/* ============================================================================
   TurnAI Local — shared design system  (S1, per O1003/Niko 0036)
   Single source of truth for the whole front: one accent, one type pairing,
   one component set. Link this FIRST on every page, then pages use .tui-* classes
   and the --tui-* tokens. Prefixed to be safe to adopt incrementally (won't clash
   with a page's existing .btn/.card until that page migrates).
   Owner: O1003 (Niko), UX/AX. Reconciles the prior split (#675ae5 vs #6955e8,
   Manrope+Poppins vs DM Sans+Manrope) into one system.
   ============================================================================ */
:root{
  /* Brand */
  --tui-accent:#675ae5;        /* the ONE TurnAI purple (was split #675ae5 / #6955e8) */
  --tui-accent-ink:#4b3fd0;    /* hover / pressed */
  --tui-accent-soft:#efeafe;   /* tint / secondary button */
  --tui-mint:#bff7df;          /* secondary accent */
  /* Neutrals */
  --tui-ink:#1a1730; --tui-muted:#6b6880;
  --tui-paper:#f7f6fb; --tui-card:#ffffff; --tui-line:#e7e4f0;
  /* Status */
  --tui-ok:#1f9d63; --tui-warn:#a25a00; --tui-err:#c2384a;
  /* Type — one pairing everywhere */
  --tui-font-heading:'Manrope',system-ui,sans-serif;
  --tui-font-body:'DM Sans',system-ui,sans-serif;
  /* Shape / motion */
  --tui-radius:10px; --tui-radius-lg:16px; --tui-gap:16px;
  --tui-shadow:0 1px 2px rgba(20,16,40,.06),0 8px 24px rgba(20,16,40,.07);
  --tui-focus:3px solid var(--tui-accent);
}

/* Base (a page that opts in inherits the system; a page's own later rules win) */
.tui *,.tui-scope *{box-sizing:border-box}
.tui-scope{font-family:var(--tui-font-body);color:var(--tui-ink);background:var(--tui-paper)}
.tui-h,h1.tui,h2.tui,h3.tui,h4.tui{font-family:var(--tui-font-heading);line-height:1.15;margin:0}

/* Buttons — every state (hover/pressed/disabled/focus) */
.tui-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:600;
  border:0;border-radius:var(--tui-radius);padding:11px 18px;background:var(--tui-accent);color:#fff;
  cursor:pointer;transition:background .15s ease,transform .05s ease}
.tui-btn:hover:not(:disabled){background:var(--tui-accent-ink)}
.tui-btn:active:not(:disabled){transform:translateY(1px)}
.tui-btn:disabled{opacity:.5;cursor:not-allowed}
.tui-btn--secondary{background:var(--tui-accent-soft);color:var(--tui-accent-ink)}
.tui-btn--ghost{background:transparent;border:1px solid var(--tui-line);color:var(--tui-ink)}
.tui-btn--lg{padding:14px 24px;font-size:16px}

/* Focus — accessibility, low specificity so pages keep it */
:where(.tui-btn,.tui-nav-item,.tui-input,a,button,input,select,textarea):focus-visible{
  outline:var(--tui-focus);outline-offset:2px}

/* Card */
.tui-card{background:var(--tui-card);border:1px solid var(--tui-line);
  border-radius:var(--tui-radius-lg);padding:22px;box-shadow:var(--tui-shadow)}

/* Form field */
.tui-field{display:block;margin:0 0 14px}
.tui-field>span{display:block;font-weight:600;font-size:13px;margin-bottom:6px}
.tui-input{width:100%;font:inherit;border:1px solid var(--tui-line);border-radius:var(--tui-radius);
  padding:10px 12px;background:#fff}
.tui-input:focus{outline:var(--tui-focus);outline-offset:0;border-color:var(--tui-accent)}

/* Left-nav item */
.tui-nav-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:transparent;
  border:0;color:inherit;padding:11px 12px;border-radius:var(--tui-radius);font-weight:600;cursor:pointer}
.tui-nav-item:hover{background:var(--tui-accent-soft)}
.tui-nav-item:active{transform:translateY(1px)}
.tui-nav-item[aria-current="page"],.tui-nav-item.is-active{background:var(--tui-accent);color:#fff}

/* Pills / status */
.tui-pill{display:inline-block;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px}
.tui-pill--ok{background:#e5f7ee;color:var(--tui-ok)}
.tui-pill--wait{background:#fff3e0;color:var(--tui-warn)}

/* Motion + honest states */
.tui-spinner{width:34px;height:34px;border:3px solid var(--tui-line);border-top-color:var(--tui-accent);
  border-radius:50%;animation:tui-spin .8s linear infinite;margin:0 auto 14px}
@keyframes tui-spin{to{transform:rotate(360deg)}}
.tui-pulse{animation:tui-pulse 1.4s ease-in-out infinite}
@keyframes tui-pulse{0%,100%{opacity:1}50%{opacity:.45}}
.tui-empty{display:grid;place-items:center;padding:56px 22px;text-align:center;color:var(--tui-muted)}
.tui-preview-flag{display:inline-block;font-size:11px;font-weight:600;color:var(--tui-accent-ink);
  background:var(--tui-accent-soft);border:1px solid #ddd4fb;padding:3px 9px;border-radius:999px}

@media(prefers-reduced-motion:reduce){.tui-spinner,.tui-pulse{animation:none}}

/* ---- App shell (reusable topbar + left-sidebar for signed-in pages, S3) ---- */
.tui-shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.tui-sidebar{background:#141026;color:#e9e6f6;display:flex;flex-direction:column;padding:22px 16px;position:sticky;top:0;height:100vh}
.tui-sidebar .tui-nav-item{color:#c9c4e6}
.tui-sidebar .tui-nav-item:hover{background:#221b40;color:#fff}
.tui-sidebar .tui-nav-item.is-active,.tui-sidebar .tui-nav-item[aria-current="page"]{background:var(--tui-accent);color:#fff}
.tui-main{display:flex;flex-direction:column;min-width:0}
.tui-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 34px;border-bottom:1px solid var(--tui-line);background:var(--tui-card);position:sticky;top:0;z-index:2}
.tui-content{padding:30px 34px;max-width:960px}
.tui-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--tui-accent),#9b7bff);color:#fff;display:grid;place-items:center;font-weight:700;font-family:var(--tui-font-heading)}

/* ---- Tabs / segmented ---- */
.tui-tabs{display:inline-flex;gap:4px;background:var(--tui-accent-soft);padding:4px;border-radius:var(--tui-radius)}
.tui-tab{border:0;background:transparent;font:inherit;font-weight:600;color:var(--tui-accent-ink);padding:7px 14px;border-radius:7px;cursor:pointer}
.tui-tab[aria-selected="true"],.tui-tab.is-active{background:#fff;color:var(--tui-ink);box-shadow:var(--tui-shadow)}

/* ---- Toggle switch (settings / billing opt-ins) ---- */
.tui-switch{position:relative;display:inline-block;width:42px;height:24px}
.tui-switch input{opacity:0;width:0;height:0}
.tui-switch span{position:absolute;inset:0;background:var(--tui-line);border-radius:999px;transition:.2s;cursor:pointer}
.tui-switch span::before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.tui-switch input:checked+span{background:var(--tui-accent)}
.tui-switch input:checked+span::before{transform:translateX(18px)}
.tui-switch input:focus-visible+span{outline:var(--tui-focus);outline-offset:2px}

/* ---- Table (my-data / billing history) ---- */
.tui-table{width:100%;border-collapse:collapse}
.tui-table th,.tui-table td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--tui-line)}
.tui-table th{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--tui-muted)}
.tui-table tr.tui-row{cursor:pointer}
.tui-table tr.tui-row:hover{background:#faf8ff}

/* ---- Badge ---- */
.tui-badge{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;background:var(--tui-accent-soft);color:var(--tui-accent-ink)}

/* ---- Responsive shell ---- */
@media(max-width:760px){.tui-shell{grid-template-columns:1fr}.tui-sidebar{position:static;height:auto}.tui-content{padding:20px}}