/* ============================================================
   COGNI BOARD — DESIGN SYSTEM
   Opaline palette · SF Pro Display · Apple glassmorphism
   Exact match to design-prototype tokens + components
   ============================================================ */

/* ── @font-face: SF Pro Display ── */
@font-face{font-family:'SF Pro Display';src:url('./fonts/sf-pro-display-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'SF Pro Display';src:url('./fonts/sf-pro-display-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'SF Pro Display';src:url('./fonts/sf-pro-display-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}
body{height:100%;overflow:auto;}

/* ============================================================
   LIGHT THEME TOKENS (exact match to prototype tokens.css)
   ============================================================ */
:root{
  /* ─── Colors: Light Theme ─── */
  --bg-primary:#F4F4F6;
  --bg-secondary:#FFFFFF;
  --bg-tertiary:#E7E7E7;
  --bg-muted:#D2D2D4;

  --accent:#FF634A;
  --accent-hover:#E5553C;
  --accent-light:rgba(255,99,74,0.12);
  --accent-subtle:rgba(255,99,74,0.06);

  --text-primary:#1A1A1A;
  --text-secondary:#6B6B6B;
  --text-muted:#9A9A9A;
  --text-inverse:#FFFFFF;

  --border:rgba(0,0,0,0.06);
  --border-strong:rgba(0,0,0,0.12);
  --border-focus:var(--accent);

  --shadow-sm:0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg:0 8px 32px rgba(0,0,0,0.08);
  --shadow-xl:0 16px 48px rgba(0,0,0,0.12);

  /* ─── Glass ─── */
  --glass-bg:rgba(255,255,255,0.72);
  --glass-bg-heavy:rgba(255,255,255,0.88);
  --glass-border:rgba(255,255,255,0.5);
  --glass-blur:20px;

  /* ─── Typography ─── */
  --font-family:'SF Pro Display',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-ui:'SF Pro Display',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-display:'SF Pro Display',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-mono:'SF Pro Display',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-serif:'SF Pro Display',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  --text-xs:0.75rem;
  --text-sm:0.875rem;
  --text-base:1rem;
  --text-lg:1.25rem;
  --text-xl:1.5rem;
  --text-2xl:2rem;
  --text-3xl:2.5rem;
  --text-4xl:3rem;

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  --leading-tight:1.2;
  --leading-normal:1.5;
  --leading-relaxed:1.65;

  --tracking-tight:-0.02em;
  --tracking-normal:0;
  --tracking-wide:0.02em;

  /* ─── Spacing ─── */
  --space-0:0;
  --space-1:0.25rem;
  --space-2:0.5rem;
  --space-3:0.75rem;
  --space-4:1rem;
  --space-5:1.25rem;
  --space-6:1.5rem;
  --space-8:2rem;
  --space-10:2.5rem;
  --space-12:3rem;
  --space-16:4rem;
  --space-20:5rem;
  --space-24:6rem;

  /* ─── Border Radius ─── */
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:16px;
  --radius-2xl:20px;
  --radius-full:9999px;

  /* ─── Transitions ─── */
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-in-out:cubic-bezier(0.65,0,0.35,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --duration-fast:120ms;
  --duration-normal:200ms;
  --duration-slow:320ms;

  /* ─── Z-Index ─── */
  --z-base:0;
  --z-dropdown:100;
  --z-sticky:200;
  --z-overlay:300;
  --z-modal:400;
  --z-toast:500;

  /* ─── Semantic (kept for compatibility) ─── */
  --success:#16a34a;
  --success-ink:#16a34a;
  --success-bg:rgba(34,197,94,0.12);
  --warning:#F59E0B;
  --warning-ink:#D97706;
  --warning-bg:rgba(245,158,11,0.12);
  --error:#EF4444;
  --error-ink:#DC2626;
  --error-bg:rgba(239,68,68,0.12);
  --info:#3B82F6;
  --info-ink:#2563EB;
  --info-bg:rgba(59,130,246,0.12);

  /* ─── Brand gradient ─── */
  --brand-gradient:linear-gradient(155deg,#FF634A 0%,#FF8A6E 100%);
  --brand-gradient-dark:linear-gradient(155deg,#E5573F 0%,#FF634A 100%);

  /* ─── Grid ─── */
  --grid-dot:rgba(0,0,0,0.06);
}

/* ============================================================
   DARK THEME TOKENS (exact match to prototype tokens.css)
   ============================================================ */
[data-theme="dark"]{
  --bg-primary:#0F0F0F;
  --bg-secondary:#1A1A1A;
  --bg-tertiary:#2A2A2A;
  --bg-muted:#3A3A3A;

  --text-primary:#F4F4F6;
  --text-secondary:#A0A0A0;
  --text-muted:#6B6B6B;
  --text-inverse:#1A1A1A;

  --border:rgba(255,255,255,0.06);
  --border-strong:rgba(255,255,255,0.12);

  --shadow-sm:0 1px 2px rgba(0,0,0,0.2);
  --shadow-md:0 4px 12px rgba(0,0,0,0.3);
  --shadow-lg:0 8px 32px rgba(0,0,0,0.4);
  --shadow-xl:0 16px 48px rgba(0,0,0,0.5);

  --glass-bg:rgba(30,30,30,0.72);
  --glass-bg-heavy:rgba(40,40,40,0.88);
  --glass-border:rgba(255,255,255,0.08);

  --grid-dot:rgba(255,255,255,0.04);

  --brand-gradient:linear-gradient(155deg,#E5573F 0%,#FF634A 100%);
  --brand-gradient-dark:linear-gradient(155deg,#CC4A35 0%,#E5573F 100%);
}

/* ============================================================
   TYPOGRAPHY (exact match to prototype base.css)
   ============================================================ */
h1,h2,h3,h4,h5,h6{font-weight:var(--weight-semibold);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);color:var(--text-primary);}
h1{font-size:var(--text-4xl);}
h2{font-size:var(--text-3xl);}
h3{font-size:var(--text-2xl);}
h4{font-size:var(--text-xl);}
h5{font-size:var(--text-lg);}
h6{font-size:var(--text-base);}

body{font-family:var(--font-family);font-size:var(--text-base);font-weight:var(--weight-regular);line-height:var(--leading-normal);color:var(--text-primary);background-color:var(--bg-primary);min-height:100vh;transition:background-color var(--duration-slow) var(--ease-out),color var(--duration-slow) var(--ease-out);}

a{color:var(--accent);text-decoration:none;transition:color var(--duration-fast) var(--ease-out);}
a:hover{color:var(--accent-hover);}
img,svg{display:block;max-width:100%;}
ul,ol{list-style:none;}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
::selection{background-color:var(--accent);color:var(--text-inverse);}

code,pre{font-family:var(--font-mono);}
small{font-size:var(--text-xs);}

/* ─── Scrollbar ─── */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--bg-muted);border-radius:var(--radius-full);}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted);}

/* ============================================================
   COMPONENT CLASSES (exact match to prototype components.css)
   ============================================================ */

/* ─── Glass ─── */
.glass{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-xl);}
.glass-subtle{background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius-lg);}

/* ─── Buttons ─── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);font-family:var(--font-family);font-size:var(--text-sm);font-weight:var(--weight-medium);line-height:1;border-radius:var(--radius-md);border:none;cursor:pointer;transition:all var(--duration-fast) var(--ease-out);white-space:nowrap;user-select:none;}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.btn:disabled{opacity:0.5;cursor:not-allowed;}
.btn:active:not(:disabled){transform:translateY(0);}
.btn-primary{background:var(--accent);color:var(--text-inverse);}
.btn-primary:hover:not(:disabled){background:var(--accent-hover);transform:translateY(-1px);box-shadow:var(--shadow-md);}
.btn-secondary{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-strong);}
.btn-secondary:hover:not(:disabled){background:var(--bg-tertiary);border-color:var(--text-muted);}
.btn-ghost{background:transparent;color:var(--text-secondary);}
.btn-ghost:hover:not(:disabled){background:var(--bg-tertiary);color:var(--text-primary);}
.btn-danger{background:var(--error);color:var(--text-inverse);}
.btn-danger:hover:not(:disabled){opacity:0.9;}
.btn-lg{padding:var(--space-4) var(--space-6);font-size:var(--text-base);border-radius:var(--radius-lg);}
.btn-sm{padding:var(--space-2) var(--space-3);font-size:var(--text-xs);}
.btn-icon{width:40px;height:40px;padding:0;border-radius:var(--radius-md);}
.btn-icon svg{width:20px;height:20px;}

/* ─── Inputs ─── */
.input-group{display:flex;flex-direction:column;gap:var(--space-2);}
.input-label{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-secondary);}
.input{width:100%;padding:var(--space-3) var(--space-4);font-family:var(--font-family);font-size:var(--text-base);color:var(--text-primary);background:var(--bg-secondary);border:1px solid var(--border-strong);border-radius:var(--radius-md);transition:all var(--duration-fast) var(--ease-out);}
.input::placeholder{color:var(--text-muted);}
.input:hover{border-color:var(--text-muted);}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light);}
.input-with-icon{position:relative;}
.input-with-icon .input{padding-left:var(--space-10);}
.input-with-icon .input-icon{position:absolute;left:var(--space-3);top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--text-muted);pointer-events:none;}
.input-with-action{position:relative;}
.input-with-action .input{padding-right:var(--space-10);}

/* ─── Select ─── */
.select{width:100%;padding:var(--space-3) var(--space-4);padding-right:var(--space-10);font-family:var(--font-family);font-size:var(--text-base);color:var(--text-primary);background:var(--bg-secondary);border:1px solid var(--border-strong);border-radius:var(--radius-md);appearance:none;cursor:pointer;transition:all var(--duration-fast) var(--ease-out);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-3) center;}
.select:hover{border-color:var(--text-muted);}
.select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light);}

/* ─── Chip / Toggle ─── */
.chip-group{display:flex;flex-wrap:wrap;gap:var(--space-2);}
.chip{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-secondary);background:var(--bg-secondary);border:1px solid var(--border-strong);border-radius:var(--radius-full);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);user-select:none;}
.chip:hover{border-color:var(--text-muted);color:var(--text-primary);}
.chip.active{background:var(--accent);border-color:var(--accent);color:var(--text-inverse);}
.chip.active:hover{background:var(--accent-hover);border-color:var(--accent-hover);}

/* ─── Card ─── */
.card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-6);transition:all var(--duration-fast) var(--ease-out);}
.card:hover{box-shadow:var(--shadow-md);}
.card-compact{padding:var(--space-4);}
.card-glass{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);}

/* ─── Badge ─── */
.badge{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-2);font-size:var(--text-xs);font-weight:var(--weight-medium);border-radius:var(--radius-sm);background:var(--bg-tertiary);color:var(--text-secondary);}
.badge-accent{background:var(--accent-light);color:var(--accent);}
.badge-success{background:rgba(34,197,94,0.12);color:#16a34a;}

/* ─── Avatar ─── */
.avatar{width:40px;height:40px;border-radius:var(--radius-full);background:var(--accent);color:var(--text-inverse);display:flex;align-items:center;justify-content:center;font-size:var(--text-sm);font-weight:var(--weight-semibold);}
.avatar-lg{width:56px;height:56px;font-size:var(--text-lg);}

/* ─── Divider ─── */
.divider{display:flex;align-items:center;gap:var(--space-4);color:var(--text-muted);font-size:var(--text-sm);}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border-strong);}

/* ─── Toggle ─── */
.toggle{position:relative;width:44px;height:24px;background:var(--bg-muted);border-radius:var(--radius-full);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out);}
.toggle.active{background:var(--accent);}
.toggle::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;background:white;border-radius:var(--radius-full);transition:transform var(--duration-fast) var(--ease-out);box-shadow:var(--shadow-sm);}
.toggle.active::after{transform:translateX(20px);}

/* ─── Tabs ─── */
.tabs{display:flex;gap:var(--space-1);padding:var(--space-1);background:var(--bg-tertiary);border-radius:var(--radius-md);}
.tab{flex:1;padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-secondary);background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);}
.tab:hover{color:var(--text-primary);}
.tab.active{background:var(--bg-secondary);color:var(--text-primary);box-shadow:var(--shadow-sm);}

/* ─── Skeleton ─── */
.skeleton{background:linear-gradient(90deg,var(--bg-tertiary) 25%,var(--bg-muted) 50%,var(--bg-tertiary) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-md);}

/* ─── Tooltip ─── */
[data-tooltip]{position:relative;}
[data-tooltip]::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:var(--space-2) var(--space-3);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--text-inverse);background:var(--text-primary);border-radius:var(--radius-sm);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out);z-index:var(--z-toast);}
[data-tooltip]:hover::after{opacity:1;}

/* ============================================================
   PAGE LAYOUTS (exact match to prototype pages.css)
   ============================================================ */

/* ─── Auth Page Feature Pills & Cards ─── */
.feature-pills{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-8);}
.feature-pill{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:var(--radius-full);font-size:var(--text-sm);color:var(--text-secondary);}
.feature-pill svg{width:16px;height:16px;}
.preview-cards{display:flex;gap:var(--space-4);}
.preview-card{flex:1;padding:var(--space-5);background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:var(--radius-lg);}
.preview-card .label{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--text-muted);text-transform:uppercase;letter-spacing:var(--tracking-wide);margin-bottom:var(--space-2);}
.preview-card .value{font-size:var(--text-2xl);font-weight:var(--weight-bold);}
.preview-card .change{font-size:var(--text-sm);color:#16a34a;font-weight:var(--weight-medium);}
.trust-badges{display:flex;gap:var(--space-4);margin-top:var(--space-12);}
.trust-badge{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--text-muted);}
.trust-badge svg{width:16px;height:16px;}

/* ─── Auth Form Elements ─── */
.password-input-wrap{position:relative;}
.password-toggle{position:absolute;right:var(--space-3);top:50%;transform:translateY(-50%);width:32px;height:32px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color var(--duration-fast) var(--ease-out);}
.password-toggle:hover{background:var(--bg-tertiary);color:var(--text-primary);}
.remember-row{display:flex;align-items:center;gap:var(--space-2);}
.remember-row input[type="checkbox"]{width:16px;height:16px;accent-color:var(--accent);}
.remember-row label{font-size:var(--text-sm);color:var(--text-secondary);cursor:pointer;}

/* ─── Auth Layout ─── */
.auth-layout{display:flex;min-height:100vh;}
.auth-hero{flex:1.15;display:flex;flex-direction:column;justify-content:center;padding:var(--space-16);position:relative;overflow:hidden;}
.auth-hero::before{content:'';position:absolute;top:-50%;right:-50%;width:100%;height:100%;background:radial-gradient(circle,var(--accent-light) 0%,transparent 60%);pointer-events:none;}
.auth-hero-content{position:relative;z-index:1;max-width:480px;}
.auth-hero h1{font-size:var(--text-4xl);margin-bottom:var(--space-6);letter-spacing:-0.03em;}
.auth-hero p{font-size:var(--text-lg);color:var(--text-secondary);line-height:var(--leading-relaxed);margin-bottom:var(--space-8);}
.auth-form-side{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--space-12);background:var(--bg-secondary);}
.auth-form-container{width:100%;max-width:400px;}
.auth-form-card{padding:var(--space-8);}
.auth-form-header{text-align:center;margin-bottom:var(--space-8);}
.auth-form-header .logo{width:48px;height:48px;margin:0 auto var(--space-4);background:var(--accent);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;color:var(--text-inverse);}
.auth-form-header h2{font-size:var(--text-2xl);margin-bottom:var(--space-2);}
.auth-form-header p{color:var(--text-secondary);font-size:var(--text-sm);}
.auth-form{display:flex;flex-direction:column;gap:var(--space-5);}
.auth-form .btn-primary{width:100%;padding:var(--space-4);}
.auth-social{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);}
.auth-social .btn{width:100%;}
.auth-footer{text-align:center;margin-top:var(--space-6);font-size:var(--text-sm);color:var(--text-secondary);}
.auth-footer a{font-weight:var(--weight-medium);}

/* ─── App Sidebar ─── */
.app-sidebar{display:flex;flex-direction:column;background:var(--bg-secondary);border-right:1px solid var(--border);padding:var(--space-4);position:sticky;top:0;height:100vh;overflow-y:auto;}
.sidebar-header{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);margin-bottom:var(--space-4);}
.sidebar-header .logo{width:32px;height:32px;background:var(--accent);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--text-inverse);flex-shrink:0;}
.sidebar-header .brand{font-size:var(--text-base);font-weight:var(--weight-semibold);}
.sidebar-section{margin-bottom:var(--space-6);}
.sidebar-section-label{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--text-muted);text-transform:uppercase;letter-spacing:var(--tracking-wide);padding:0 var(--space-3);margin-bottom:var(--space-2);}
.sidebar-nav{display:flex;flex-direction:column;gap:var(--space-1);}
.sidebar-nav-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-secondary);border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);}
.sidebar-nav-item:hover{background:var(--bg-tertiary);color:var(--text-primary);}
.sidebar-nav-item.active{background:var(--accent-light);color:var(--accent);}
.sidebar-nav-item svg{width:18px;height:18px;flex-shrink:0;}
.sidebar-footer{margin-top:auto;padding-top:var(--space-4);border-top:1px solid var(--border);}
.sidebar-user{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out);}
.sidebar-user:hover{background:var(--bg-tertiary);}
.sidebar-user-info{flex:1;min-width:0;}
.sidebar-user-name{font-size:var(--text-sm);font-weight:var(--weight-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar-user-role{font-size:var(--text-xs);color:var(--text-muted);}

/* ─── Dashboard Builder ─── */
.dashboard-layout{display:grid;grid-template-columns:1fr 320px;grid-template-rows:auto 1fr;min-height:calc(100vh - 65px);}
.dashboard-topbar{grid-column:1/-1;display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--border);background:var(--bg-secondary);}
.dashboard-canvas{padding:var(--space-6);overflow-y:auto;background:var(--bg-primary);}
.dashboard-canvas-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;color:var(--text-muted);}
.dashboard-canvas-empty .icon{width:64px;height:64px;margin-bottom:var(--space-4);background:var(--bg-tertiary);border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;}
.dashboard-canvas-empty h3{font-size:var(--text-lg);color:var(--text-primary);margin-bottom:var(--space-2);}
.dashboard-canvas-empty p{font-size:var(--text-sm);max-width:320px;}
.dashboard-agent{background:var(--bg-secondary);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;}
.agent-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border);}
.agent-header .status{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:var(--weight-medium);}
.agent-content{flex:1;overflow-y:auto;padding:var(--space-4);}
.agent-input{display:flex;gap:var(--space-2);padding:var(--space-4);border-top:1px solid var(--border);}
.agent-input .input{flex:1;}

/* ─── App Layout ─── */
.app-layout{display:grid;grid-template-columns:240px 1fr;min-height:100vh;}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,99,74,.28)}50%{box-shadow:0 0 0 5px rgba(255,99,74,0)}}
@keyframes barGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ─── Responsive ─── */
@media(max-width:1024px){.auth-layout{flex-direction:column;}.auth-hero{display:none;}.app-sidebar{display:none;}.dashboard-agent{display:none;}}
@media(max-width:768px){.auth-form-side{padding:var(--space-6);}.auth-social{grid-template-columns:1fr;}}

.animate-fadeIn{animation:fadeIn var(--duration-normal) var(--ease-out);}
.animate-slideUp{animation:slideUp var(--duration-slow) var(--ease-out);}
.animate-slideDown{animation:slideDown var(--duration-slow) var(--ease-out);}
.animate-scaleIn{animation:scaleIn var(--duration-normal) var(--ease-out);}

/* ============================================================
   UTILITIES
   ============================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}
.container{width:100%;max-width:1280px;margin:0 auto;padding:0 var(--space-6);}