/* ═══════════════════════════════════════
   DESIGN OS — App-specific styles
   Extends vitrail.css for tool UI
   ═══════════════════════════════════════ */

/* Tab navigation */
.app-tabs{display:flex;gap:3px;flex-wrap:wrap}
.tab-btn{position:relative;padding:8px 12px;border:2px solid transparent;background:transparent;color:var(--soft);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;font-family:var(--mono);transition:.2s}
.tab-btn::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;transform:scaleX(0);background:linear-gradient(90deg,var(--cyan),var(--violet));transition:.28s}
.tab-btn:hover,.tab-btn.active{color:var(--ink);background:rgba(40,199,217,.06);border-color:var(--thin)}
.tab-btn:hover::after,.tab-btn.active::after{transform:scaleX(1)}
.tab-btn.active{color:var(--cyan);border-color:var(--cyan)}

/* Pages */
.page{display:none;padding-bottom:50px}
.page.active{display:block}

/* App hero (compact) */
.app-hero{padding:44px 0 28px}

/* Tool badge */
.tool-badge{display:inline-block;padding:2px 8px;font-size:.6rem;font-family:var(--mono);letter-spacing:.1em;border:2px solid var(--cyan);color:var(--cyan);margin-bottom:8px;text-transform:uppercase;font-weight:700}

/* Form fields (app-specific) */
.fg{margin-bottom:12px}
.fg label{display:block;font-size:.65rem;color:var(--soft);font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;margin-bottom:5px;font-weight:700}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* Result box */
.result{border:2px solid var(--line);background:var(--glass-strong);padding:18px;margin-top:14px;display:none}
.result.show{display:block}

/* Swatch */
.swatch-row{display:flex;gap:0;flex-wrap:wrap;overflow:hidden;border:2px solid var(--line)}
.swatch{flex:1;min-width:60px;height:72px;cursor:pointer;display:flex;align-items:flex-end;padding:6px;transition:.2s;position:relative}
.swatch:hover{transform:scaleY(1.05);z-index:2}
.swatch span{font-size:.6rem;font-family:var(--mono);padding:2px 5px;background:rgba(0,0,0,.55);letter-spacing:.04em;color:#fff}
.swatch-sm{height:48px;border:2px solid var(--thin);cursor:pointer;transition:.2s;position:relative;display:flex;align-items:flex-end;padding:4px}
.swatch-sm span{font-size:.55rem;font-family:var(--mono);background:rgba(0,0,0,.55);padding:1px 4px;color:#fff}
.swatch-sm:hover{transform:scale(1.06);z-index:2;border-color:var(--line)}

/* Contrast */
.contrast-big{font-size:2.8rem;font-weight:800;font-family:var(--mono);line-height:1;color:var(--cyan)}
.wcag-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.wcag-chip{padding:4px 10px;font-size:.68rem;font-family:var(--mono);font-weight:700;letter-spacing:.06em;border:2px solid transparent}
.wcag-chip.pass{background:rgba(36,168,107,.1);color:var(--green);border-color:var(--green)}
.wcag-chip.fail{background:rgba(211,67,53,.08);color:var(--red);border-color:var(--red)}

/* Type scale */
.type-scale-row{display:flex;flex-direction:column;gap:3px;margin-top:14px}
.ts-item{display:flex;align-items:baseline;gap:14px;padding:7px 12px;border-bottom:1px solid var(--faint);cursor:pointer}
.ts-item:hover{background:var(--faint)}
.ts-label{font-size:.62rem;color:var(--soft);font-family:var(--mono);min-width:48px;font-weight:700;text-transform:uppercase}
.ts-size{font-family:var(--mono);color:var(--cyan);min-width:52px;font-size:.72rem;font-weight:700}
.ts-preview{color:var(--ink);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* Aspect ratio box */
.ar-box{border:2px solid var(--line);background:var(--glass-strong);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:1rem;font-weight:800;color:var(--cyan);margin-top:14px;transition:all .4s;min-height:60px}

/* Gradient */
.grad-preview{height:72px;margin-top:12px;border:2px solid var(--line);position:relative}
.grad-code{margin-top:8px;padding:10px;background:var(--glass-strong);border:2px solid var(--faint);font-family:monospace;font-size:.7rem;color:var(--soft);word-break:break-all;cursor:pointer}
.grad-code:hover{border-color:var(--line)}

/* App note */
.app-note{border-left:3px solid var(--cyan);padding:10px 14px;background:rgba(40,199,217,.05);color:var(--soft);font-size:.78rem}
[dir="rtl"] .app-note{border-left:0;border-right:3px solid var(--cyan)}
.app-note.blue{border-color:var(--blue);background:rgba(34,103,232,.05)}

/* Toast */
.copied-toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:var(--line);color:var(--paper);font-family:var(--mono);font-size:.72rem;font-weight:700;padding:10px 22px;letter-spacing:.1em;text-transform:uppercase;opacity:0;pointer-events:none;transition:.3s;z-index:999}
.copied-toast.show{opacity:1}

/* Responsive */
@media(max-width:860px){
  .app-tabs{gap:2px}
  .tab-btn{padding:7px 8px;font-size:.62rem}
  .form-row{grid-template-columns:1fr}
  .app-hero{padding:30px 0 20px}
}