/* ══════════════════════════════════════════════════════════════════════
   Padres en Pie — Design System v3.0
   Shared tokens, components, utilities, dark mode, accessibility.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Reset ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* ── Design Tokens ── */
:root{
  /* Brand */
  --pep-green-900:#0D2818;
  --pep-green-800:#1B4332;
  --pep-green-700:#2D6A4F;
  --pep-green-600:#40916C;
  --pep-green-500:#52B788;
  --pep-green-400:#74C69D;
  --pep-green-300:#95D5B2;
  --pep-green-200:#B7E4C7;
  --pep-green-100:#D8F3DC;
  --pep-green-50:#F0FFF4;

  --pep-gold-700:#92610A;
  --pep-gold-600:#B8860B;
  --pep-gold-500:#D4A03C;
  --pep-gold-400:#E0B960;
  --pep-gold-300:#EBD08A;
  --pep-gold-200:#F5E6B8;
  --pep-gold-100:#FBF3DE;
  --pep-gold-50:#FFFCF0;

  /* Semantic (light) */
  --color-bg:#F8FAF9;
  --color-bg-subtle:#F0F2F1;
  --color-bg-muted:#E8EBE9;
  --color-surface:#FFFFFF;
  --color-surface-raised:#FFFFFF;
  --color-border:#E2E5E3;
  --color-border-subtle:#EEF0EF;
  --color-text:#111916;
  --color-text-secondary:#4A5651;
  --color-text-muted:#7A8580;
  --color-text-on-dark:#FFFFFF;
  --color-text-on-brand:#FFFFFF;

  --color-primary:var(--pep-green-800);
  --color-primary-hover:var(--pep-green-700);
  --color-primary-active:var(--pep-green-900);

  --color-accent:var(--pep-gold-500);
  --color-accent-hover:var(--pep-gold-600);
  --color-accent-subtle:var(--pep-gold-100);

  --color-success:#16A34A;
  --color-success-bg:#DCFCE7;
  --color-warning:#D97706;
  --color-warning-bg:#FEF3C7;
  --color-danger:#DC2626;
  --color-danger-bg:#FEE2E2;
  --color-info:#2563EB;
  --color-info-bg:#DBEAFE;

  /* Typography */
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-mono:'SF Mono','Fira Code',monospace;

  --text-xs:.75rem;    /* 12px */
  --text-sm:.8125rem;  /* 13px */
  --text-base:.875rem; /* 14px */
  --text-md:.9375rem;  /* 15px */
  --text-lg:1rem;      /* 16px */
  --text-xl:1.125rem;  /* 18px */
  --text-2xl:1.375rem; /* 22px */
  --text-3xl:1.75rem;  /* 28px */
  --text-4xl:2.25rem;  /* 36px */

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

  --tracking-tight:-.02em;
  --tracking-normal:0;
  --tracking-wide:.04em;

  /* Spacing (4px grid) */
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;

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

  /* Elevation */
  --shadow-xs:0 1px 2px rgba(17,25,22,.05);
  --shadow-sm:0 1px 3px rgba(17,25,22,.08),0 1px 2px rgba(17,25,22,.04);
  --shadow-md:0 4px 12px rgba(17,25,22,.08),0 2px 4px rgba(17,25,22,.04);
  --shadow-lg:0 8px 24px rgba(17,25,22,.1),0 4px 8px rgba(17,25,22,.04);
  --shadow-xl:0 16px 48px rgba(17,25,22,.12),0 8px 16px rgba(17,25,22,.06);
  --shadow-focus:0 0 0 3px rgba(45,106,79,.3);
  --shadow-focus-accent:0 0 0 3px rgba(212,160,60,.35);

  /* Transitions */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.45,0,.55,1);
  --duration-fast:120ms;
  --duration-normal:200ms;
  --duration-slow:300ms;

  /* Z-index scale */
  --z-dropdown:100;
  --z-sticky:200;
  --z-overlay:500;
  --z-modal:600;
  --z-toast:700;
  --z-command:800;

  /* Layout */
  --sidebar-width:260px;
  --topbar-height:56px;
  --content-max:1200px;
}

/* ── Dark Mode ── */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --color-bg:#0C1210;
    --color-bg-subtle:#131B17;
    --color-bg-muted:#1A2420;
    --color-surface:#1A2420;
    --color-surface-raised:#212D28;
    --color-border:#2A3832;
    --color-border-subtle:#222E29;
    --color-text:#E8EEEB;
    --color-text-secondary:#A3B0AA;
    --color-text-muted:#6E7F78;
    --color-primary:var(--pep-green-500);
    --color-primary-hover:var(--pep-green-400);
    --color-accent:var(--pep-gold-400);
    --color-accent-hover:var(--pep-gold-300);
    --color-accent-subtle:#2A2210;
    --color-success-bg:#052E16;
    --color-warning-bg:#2A1F05;
    --color-danger-bg:#2A0505;
    --color-info-bg:#0A1A2E;
    --shadow-xs:0 1px 2px rgba(0,0,0,.3);
    --shadow-sm:0 1px 3px rgba(0,0,0,.4);
    --shadow-md:0 4px 12px rgba(0,0,0,.4);
    --shadow-lg:0 8px 24px rgba(0,0,0,.5);
    --shadow-xl:0 16px 48px rgba(0,0,0,.6);
    --shadow-focus:0 0 0 3px rgba(82,183,136,.35);
  }
}
[data-theme="dark"]{
  --color-bg:#0C1210;
  --color-bg-subtle:#131B17;
  --color-bg-muted:#1A2420;
  --color-surface:#1A2420;
  --color-surface-raised:#212D28;
  --color-border:#2A3832;
  --color-border-subtle:#222E29;
  --color-text:#E8EEEB;
  --color-text-secondary:#A3B0AA;
  --color-text-muted:#6E7F78;
  --color-primary:var(--pep-green-500);
  --color-primary-hover:var(--pep-green-400);
  --color-accent:var(--pep-gold-400);
  --color-accent-hover:var(--pep-gold-300);
  --color-accent-subtle:#2A2210;
  --color-success-bg:#052E16;
  --color-warning-bg:#2A1F05;
  --color-danger-bg:#2A0505;
  --color-info-bg:#0A1A2E;
  --shadow-xs:0 1px 2px rgba(0,0,0,.3);
  --shadow-sm:0 1px 3px rgba(0,0,0,.4);
  --shadow-md:0 4px 12px rgba(0,0,0,.4);
  --shadow-lg:0 8px 24px rgba(0,0,0,.5);
  --shadow-xl:0 16px 48px rgba(0,0,0,.6);
  --shadow-focus:0 0 0 3px rgba(82,183,136,.35);
}

/* ── Base ── */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  font-size:var(--text-base);
  line-height:var(--leading-normal);
  color:var(--color-text);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--color-primary);text-decoration:none}
a:hover{text-decoration:underline}
img{display:block;max-width:100%}
button,input,select,textarea{font-family:inherit;font-size:inherit}

/* ── Accessibility ── */
.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}
.skip-link{position:absolute;top:-100%;left:var(--space-4);padding:var(--space-3) var(--space-4);background:var(--color-primary);color:var(--color-text-on-brand);border-radius:0 0 var(--radius-md) var(--radius-md);font-weight:600;z-index:var(--z-command);transition:top var(--duration-fast)}
.skip-link:focus{top:0}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-sm)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ── Typography ── */
h1,.h1{font-size:var(--text-3xl);font-weight:700;line-height:var(--leading-tight);letter-spacing:var(--tracking-tight)}
h2,.h2{font-size:var(--text-2xl);font-weight:700;line-height:var(--leading-tight);letter-spacing:var(--tracking-tight)}
h3,.h3{font-size:var(--text-xl);font-weight:600;line-height:var(--leading-snug)}
h4,.h4{font-size:var(--text-md);font-weight:600;line-height:var(--leading-snug)}
.text-xs{font-size:var(--text-xs)}.text-sm{font-size:var(--text-sm)}.text-base{font-size:var(--text-base)}
.text-lg{font-size:var(--text-lg)}.text-xl{font-size:var(--text-xl)}.text-2xl{font-size:var(--text-2xl)}
.text-muted{color:var(--color-text-muted)}.text-secondary{color:var(--color-text-secondary)}
.text-success{color:var(--color-success)}.text-warning{color:var(--color-warning)}
.text-danger{color:var(--color-danger)}.text-accent{color:var(--color-accent)}
.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-4);
  border:1px solid transparent;border-radius:var(--radius-md);
  font-size:var(--text-sm);font-weight:600;line-height:1.4;
  cursor:pointer;transition:all var(--duration-fast) var(--ease-out);
  white-space:nowrap;user-select:none;
}
.btn:focus-visible{box-shadow:var(--shadow-focus)}
.btn:active{transform:scale(.97)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none}

.btn-primary{background:var(--color-primary);color:var(--color-text-on-brand);box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--color-primary-hover);box-shadow:var(--shadow-md)}

.btn-accent{background:var(--color-accent);color:var(--pep-green-900);font-weight:700;box-shadow:0 4px 14px rgba(212,160,60,.3)}
.btn-accent:hover{background:var(--color-accent-hover);box-shadow:0 6px 18px rgba(212,160,60,.35)}
.btn-accent:focus-visible{box-shadow:var(--shadow-focus-accent)}

.btn-secondary{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border)}
.btn-secondary:hover{background:var(--color-bg-subtle);border-color:var(--color-border)}

.btn-ghost{background:transparent;color:var(--color-text-secondary)}
.btn-ghost:hover{background:var(--color-bg-subtle);color:var(--color-text)}

.btn-danger{background:var(--color-danger);color:#fff}
.btn-danger:hover{background:#B91C1C}

.btn-success{background:var(--color-success);color:#fff}
.btn-success:hover{background:#15803D}

.btn-sm{padding:var(--space-1) var(--space-3);font-size:var(--text-xs)}
.btn-lg{padding:var(--space-3) var(--space-6);font-size:var(--text-md)}
.btn-xl{padding:var(--space-4) var(--space-8);font-size:var(--text-lg);border-radius:var(--radius-lg)}
.btn-icon{padding:var(--space-2);width:36px;height:36px}
.btn-icon.btn-sm{width:28px;height:28px;padding:var(--space-1)}
.btn-block{width:100%}

/* ── Inputs ── */
.input,.select,.textarea{
  display:block;width:100%;
  padding:var(--space-2) var(--space-3);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  font-size:var(--text-base);
  color:var(--color-text);
  transition:border-color var(--duration-fast),box-shadow var(--duration-fast);
}
.input:focus,.select:focus,.textarea:focus{
  outline:none;
  border-color:var(--color-primary);
  box-shadow:var(--shadow-focus);
}
.input::placeholder{color:var(--color-text-muted)}
.input.error{border-color:var(--color-danger)}
.input.error:focus{box-shadow:0 0 0 3px rgba(220,38,38,.2)}
.textarea{resize:vertical;min-height:80px}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.input-sm,.select-sm{padding:var(--space-1) var(--space-2);font-size:var(--text-sm)}

.field{margin-bottom:var(--space-4)}
.field-label{display:block;font-size:var(--text-sm);font-weight:600;color:var(--color-text);margin-bottom:var(--space-1)}
.field-hint{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-1)}
.field-error{font-size:var(--text-xs);color:var(--color-danger);margin-top:var(--space-1)}

.checkbox,.radio{display:flex;align-items:flex-start;gap:var(--space-2);cursor:pointer;font-size:var(--text-sm)}
.checkbox input,.radio input{margin-top:2px;flex-shrink:0;accent-color:var(--color-primary)}

/* ── Cards ── */
.card{
  background:var(--color-surface);
  border:1px solid var(--color-border-subtle);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  box-shadow:var(--shadow-xs);
}
.card-elevated{box-shadow:var(--shadow-md)}
.card-interactive{cursor:pointer;transition:all var(--duration-normal) var(--ease-out)}
.card-interactive:hover{box-shadow:var(--shadow-lg);border-color:transparent;transform:translateY(-2px)}
.card-interactive:focus-visible{box-shadow:var(--shadow-focus)}
.card-bordered-left{border-left:3px solid var(--color-primary)}
.card-gold{border-left-color:var(--color-accent)}
.card-danger{border-left-color:var(--color-danger)}

/* ── Badges ── */
.badge{
  display:inline-flex;align-items:center;gap:var(--space-1);
  padding:2px var(--space-2);border-radius:var(--radius-full);
  font-size:var(--text-xs);font-weight:600;white-space:nowrap;
}
.badge-green{background:var(--color-success-bg);color:#065F46}
.badge-yellow{background:var(--color-warning-bg);color:#92400E}
.badge-red{background:var(--color-danger-bg);color:#991B1B}
.badge-blue{background:var(--color-info-bg);color:#1D4ED8}
.badge-gray{background:var(--color-bg-muted);color:var(--color-text-muted)}
.badge-gold{background:var(--pep-gold-100);color:var(--pep-gold-700)}
.badge-tier-free{background:var(--color-bg-muted);color:var(--color-text-muted)}
.badge-tier-premium{background:linear-gradient(135deg,var(--pep-gold-500),var(--pep-gold-600));color:#fff}
.badge-tier-vip{background:linear-gradient(135deg,var(--pep-green-800),var(--pep-green-700));color:#fff}
.badge-dot::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}

/* ── Avatar ── */
.avatar{
  width:36px;height:36px;border-radius:var(--radius-full);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:var(--text-sm);flex-shrink:0;
  background:var(--pep-green-700);color:#fff;
}
.avatar-sm{width:28px;height:28px;font-size:var(--text-xs)}
.avatar-lg{width:48px;height:48px;font-size:var(--text-lg)}
.avatar-xl{width:64px;height:64px;font-size:var(--text-2xl)}

/* ── KPI ── */
.kpi{
  background:var(--color-surface);
  border-radius:var(--radius-lg);
  padding:var(--space-4) var(--space-5);
  border-left:3px solid var(--color-primary);
  box-shadow:var(--shadow-xs);
  transition:all var(--duration-normal) var(--ease-out);
}
.kpi:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.kpi-label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--color-text-muted);font-weight:600}
.kpi-value{font-size:var(--text-2xl);font-weight:700;color:var(--color-primary);margin-top:var(--space-1);line-height:1}
.kpi-gold{border-left-color:var(--color-accent)}
.kpi-gold .kpi-value{color:var(--color-accent)}

/* ── Toast ── */
.toast-container{position:fixed;top:var(--space-4);right:var(--space-4);z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--space-2);pointer-events:none}
.toast{
  pointer-events:auto;
  background:var(--color-surface);border-radius:var(--radius-lg);
  padding:var(--space-3) var(--space-4);
  box-shadow:var(--shadow-lg);
  display:flex;align-items:center;gap:var(--space-3);
  font-size:var(--text-sm);min-width:260px;max-width:380px;
  border-left:3px solid var(--color-success);
  animation:toast-in var(--duration-slow) var(--ease-out);
}
.toast-error{border-left-color:var(--color-danger)}
.toast-info{border-left-color:var(--color-info)}
.toast-warning{border-left-color:var(--color-warning)}
@keyframes toast-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.toast-exit{animation:toast-out var(--duration-normal) var(--ease-out) forwards}
@keyframes toast-out{to{opacity:0;transform:translateX(24px)}}

/* ── Modal ── */
.modal-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(12,18,16,.6);backdrop-filter:blur(4px);
  z-index:var(--z-modal);
  align-items:center;justify-content:center;padding:var(--space-5);
}
.modal-overlay.active{display:flex}
.modal-dialog{
  background:var(--color-surface);
  border-radius:var(--radius-xl);
  width:100%;max-width:480px;max-height:88vh;overflow-y:auto;
  box-shadow:var(--shadow-xl);
  animation:modal-enter var(--duration-normal) var(--ease-out);
}
@keyframes modal-enter{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
.modal-header{padding:var(--space-5) var(--space-6) 0;display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-3)}
.modal-header h3{color:var(--color-primary);font-size:var(--text-xl)}
.modal-close{background:var(--color-bg-subtle);border:none;width:32px;height:32px;border-radius:var(--radius-full);cursor:pointer;font-size:1.1rem;color:var(--color-text-muted);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--duration-fast)}
.modal-close:hover{background:var(--color-bg-muted)}
.modal-body{padding:var(--space-4) var(--space-6) var(--space-6)}
.modal-footer{display:flex;gap:var(--space-3);padding:0 var(--space-6) var(--space-6);justify-content:flex-end}

/* ── Skeleton ── */
.skeleton{height:14px;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--color-bg-subtle) 25%,var(--color-bg-muted) 50%,var(--color-bg-subtle) 75%);background-size:200% 100%;animation:skeleton-pulse 1.5s ease-in-out infinite}
@keyframes skeleton-pulse{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton-text{height:12px;width:60%;margin-bottom:var(--space-2)}
.skeleton-circle{border-radius:var(--radius-full)}

/* ── Empty State ── */
.empty-state{text-align:center;padding:var(--space-12) var(--space-6);color:var(--color-text-muted)}
.empty-state-icon{font-size:3rem;margin-bottom:var(--space-3);opacity:.6}
.empty-state h3{color:var(--color-text);font-size:var(--text-lg);margin-bottom:var(--space-2)}
.empty-state p{max-width:380px;margin:0 auto var(--space-4);font-size:var(--text-sm)}

/* ── Command Palette (Cmd+K) ── */
.command-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(12,18,16,.5);backdrop-filter:blur(6px);
  z-index:var(--z-command);
  align-items:flex-start;justify-content:center;
  padding-top:min(20vh,160px);
}
.command-overlay.active{display:flex}
.command-dialog{
  background:var(--color-surface);border-radius:var(--radius-xl);
  width:100%;max-width:560px;overflow:hidden;
  box-shadow:var(--shadow-xl);
  animation:modal-enter var(--duration-fast) var(--ease-out);
}
.command-input{
  width:100%;padding:var(--space-4) var(--space-5);
  border:none;border-bottom:1px solid var(--color-border);
  font-size:var(--text-lg);background:transparent;color:var(--color-text);
}
.command-input:focus{outline:none}
.command-input::placeholder{color:var(--color-text-muted)}
.command-results{max-height:360px;overflow-y:auto;padding:var(--space-2)}
.command-item{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);
  cursor:pointer;font-size:var(--text-sm);transition:background var(--duration-fast);
}
.command-item:hover,.command-item.active{background:var(--color-bg-subtle)}
.command-item-icon{width:20px;text-align:center;font-size:1rem;flex-shrink:0}
.command-item-label{flex:1}
.command-item-shortcut{font-size:var(--text-xs);color:var(--color-text-muted);font-family:var(--font-mono)}
.command-footer{padding:var(--space-2) var(--space-4);border-top:1px solid var(--color-border);font-size:var(--text-xs);color:var(--color-text-muted);display:flex;gap:var(--space-4)}
.command-footer kbd{display:inline-flex;align-items:center;padding:1px 5px;border:1px solid var(--color-border);border-radius:4px;font-family:var(--font-mono);font-size:10px;background:var(--color-bg-subtle)}

/* ── Chat (Legal AI) ── */
.chat-container{display:flex;flex-direction:column;height:calc(100vh - var(--topbar-height) - var(--space-12));min-height:400px}
.chat-header{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border);background:var(--color-surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.chat-messages{flex:1;overflow-y:auto;padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4);scroll-behavior:smooth}
.chat-message{display:flex;gap:var(--space-3);max-width:85%;animation:chat-msg-in var(--duration-normal) var(--ease-out)}
@keyframes chat-msg-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.chat-message-user{align-self:flex-end;flex-direction:row-reverse}
.chat-bubble{padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);font-size:var(--text-sm);line-height:var(--leading-relaxed)}
.chat-bubble-ai{background:var(--color-surface-raised);border:1px solid var(--color-border-subtle)}
.chat-bubble-user{background:var(--color-primary);color:var(--color-text-on-brand)}
.chat-bubble p+p{margin-top:var(--space-2)}
.chat-bubble ul,.chat-bubble ol{margin:var(--space-2) 0;padding-left:var(--space-5)}
.chat-bubble li{margin-bottom:var(--space-1)}
.chat-bubble strong{font-weight:600}
.chat-typing{display:flex;gap:4px;padding:var(--space-3) var(--space-4)}
.chat-typing-dot{width:6px;height:6px;border-radius:50%;background:var(--color-text-muted);animation:typing-bounce .6s ease-in-out infinite}
.chat-typing-dot:nth-child(2){animation-delay:.15s}
.chat-typing-dot:nth-child(3){animation-delay:.3s}
@keyframes typing-bounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}}

.chat-input-area{padding:var(--space-4) var(--space-5);border-top:1px solid var(--color-border);background:var(--color-surface);border-radius:0 0 var(--radius-lg) var(--radius-lg)}
.chat-input-wrap{display:flex;gap:var(--space-2);align-items:flex-end}
.chat-input{
  flex:1;padding:var(--space-3) var(--space-4);
  border:1px solid var(--color-border);border-radius:var(--radius-xl);
  font-size:var(--text-sm);resize:none;max-height:120px;
  background:var(--color-bg-subtle);color:var(--color-text);
  transition:border-color var(--duration-fast),box-shadow var(--duration-fast);
}
.chat-input:focus{outline:none;border-color:var(--color-primary);box-shadow:var(--shadow-focus);background:var(--color-surface)}
.chat-input::placeholder{color:var(--color-text-muted)}
.chat-send{
  width:40px;height:40px;border-radius:var(--radius-full);
  background:var(--color-primary);color:#fff;
  border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all var(--duration-fast);flex-shrink:0;
}
.chat-send:hover{background:var(--color-primary-hover);transform:scale(1.05)}
.chat-send:disabled{opacity:.4;cursor:not-allowed;transform:none}
.chat-send svg{width:18px;height:18px}
.chat-disclaimer{font-size:var(--text-xs);color:var(--color-text-muted);text-align:center;padding:var(--space-2) var(--space-4) 0}

/* ── Sidebar (shared) ── */
.sidebar{
  background:linear-gradient(180deg,var(--pep-green-800) 0%,var(--pep-green-900) 100%);
  color:#fff;width:var(--sidebar-width);position:fixed;top:0;left:0;bottom:0;
  display:flex;flex-direction:column;overflow-y:auto;
  z-index:var(--z-sticky);
  transition:transform var(--duration-slow) var(--ease-out);
}
.sidebar-brand{padding:var(--space-5) var(--space-5) var(--space-4);border-bottom:1px solid rgba(255,255,255,.1)}
.sidebar-brand img{width:42px;height:42px;border-radius:var(--radius-md)}
.sidebar-brand-name{font-weight:700;font-size:var(--text-sm)}
.sidebar-brand-sub{font-size:var(--text-xs);color:var(--pep-gold-400)}

.sidebar-nav{flex:1;padding:var(--space-2) 0}
.sidebar-nav a,.sidebar-nav button{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-2) var(--space-5);
  color:rgba(255,255,255,.65);font-size:var(--text-sm);
  border:none;background:none;width:100%;text-align:left;
  cursor:pointer;transition:all var(--duration-fast);
  border-left:3px solid transparent;
}
.sidebar-nav a:hover,.sidebar-nav button:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.sidebar-nav a.active,.sidebar-nav button.active{background:rgba(255,255,255,.12);color:#fff;border-left-color:var(--pep-gold-500)}
.sidebar-nav-icon{width:20px;text-align:center;font-size:1rem;flex-shrink:0}
.sidebar-nav-label{flex:1}
.sidebar-nav-badge{font-size:var(--text-xs);padding:1px 7px;border-radius:var(--radius-full);background:var(--pep-gold-500);color:var(--pep-green-900);font-weight:700}
.sidebar-nav-lock{font-size:var(--text-xs);opacity:.5}
.sidebar-nav a.locked{opacity:.5}

.sidebar-tier{margin:0 var(--space-4) var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--text-xs);font-weight:700;text-align:center;text-transform:uppercase;letter-spacing:.5px}
.sidebar-tier-free{background:rgba(255,255,255,.1);color:rgba(255,255,255,.8)}
.sidebar-tier-premium{background:linear-gradient(135deg,var(--pep-gold-500),var(--pep-gold-600));color:#fff}
.sidebar-tier-vip{background:linear-gradient(135deg,#fff,#e8e8e8);color:var(--pep-green-800)}

.sidebar-footer{border-top:1px solid rgba(255,255,255,.1);padding-top:var(--space-2)}

/* ── Main Content ── */
.main-content{margin-left:var(--sidebar-width);min-height:100vh;padding:var(--space-6) var(--space-8)}
.page-header{margin-bottom:var(--space-6)}
.page-title{font-size:var(--text-2xl);font-weight:700;color:var(--color-primary);display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.page-subtitle{color:var(--color-text-muted);font-size:var(--text-sm);margin-top:var(--space-1)}

/* ── Grid system ── */
.grid{display:grid;gap:var(--space-4)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-auto{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid-auto-sm{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.grid-auto-lg{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* ── Flex utilities ── */
.flex{display:flex}.flex-col{flex-direction:column}
.items-center{align-items:center}.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}
.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}
.flex-wrap{flex-wrap:wrap}

/* ── Spacing utilities ── */
.p-0{padding:0}.p-2{padding:var(--space-2)}.p-3{padding:var(--space-3)}.p-4{padding:var(--space-4)}.p-5{padding:var(--space-5)}.p-6{padding:var(--space-6)}
.px-4{padding-left:var(--space-4);padding-right:var(--space-4)}
.py-2{padding-top:var(--space-2);padding-bottom:var(--space-2)}
.py-3{padding-top:var(--space-3);padding-bottom:var(--space-3)}
.mt-0{margin-top:0}.mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:var(--space-2)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}

/* ── Divider ── */
.divider{height:1px;background:var(--color-border);margin:var(--space-4) 0}

/* ── Detail rows ── */
.detail-row{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3) 0;border-bottom:1px solid var(--color-border);font-size:var(--text-sm)}
.detail-row:last-child{border-bottom:none}
.detail-row-label{color:var(--color-text-muted)}
.detail-row-value{font-weight:600}

/* ── Progress ── */
.progress{height:6px;background:var(--color-bg-muted);border-radius:var(--radius-full);overflow:hidden}
.progress-bar{height:100%;background:var(--color-primary);border-radius:var(--radius-full);transition:width var(--duration-slow) var(--ease-out)}
.progress-bar-accent{background:var(--color-accent)}

/* ── Tables ── */
.table-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--color-border)}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--color-text-muted);padding:var(--space-3);border-bottom:2px solid var(--color-border);background:var(--color-bg-subtle);white-space:nowrap;font-weight:600}
td{padding:var(--space-3);border-bottom:1px solid var(--color-border);font-size:var(--text-sm);vertical-align:middle}
tbody tr{transition:background var(--duration-fast)}
tbody tr:hover{background:var(--color-bg-subtle)}
tbody tr:last-child td{border-bottom:none}

/* ── Mobile ── */
.mobile-topbar{
  display:none;position:fixed;top:0;left:0;right:0;height:var(--topbar-height);
  background:var(--color-surface);border-bottom:1px solid var(--color-border);
  z-index:var(--z-sticky);
  padding:0 var(--space-4);
  align-items:center;gap:var(--space-3);
}
.mobile-menu-btn{
  width:40px;height:40px;border-radius:var(--radius-md);
  background:var(--color-primary);color:#fff;border:none;
  font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.sidebar-overlay-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:calc(var(--z-sticky) - 1)}
.sidebar-overlay-bg.active{display:block}

@media(max-width:920px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:none}
  .mobile-topbar{display:flex}
  .main-content{margin-left:0;padding:calc(var(--topbar-height) + var(--space-4)) var(--space-4) var(--space-4)}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}
@media(max-width:640px){
  .grid-auto{grid-template-columns:1fr}
  .chat-message{max-width:92%}
}

/* ── Animation utilities ── */
.fade-in{animation:fade-in var(--duration-normal) var(--ease-out)}
@keyframes fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.slide-up{animation:slide-up var(--duration-slow) var(--ease-out)}
@keyframes slide-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}