/* ==========================================================================
   Jobbie × Lucian UX/UI — redesign layer
   Loaded after style.css so it can restyle the whole application without
   touching the existing behaviour/JS. Light theme, Pretendard, purple accent.
   ========================================================================== */

:root {
  /* Lucian tokens */
  --ux-page: #F4F2EE;
  --ux-surface: #FFFFFF;
  --ux-surface-2: #F7F5F1;
  --ux-surface-3: #ECE8E2;
  --ux-ink: #16151B;
  --ux-ink-2: #57535F;
  --ux-ink-3: #8E8A97;
  --ux-line: rgba(22, 21, 27, .09);
  --ux-line-2: rgba(22, 21, 27, .17);
  --ux-accent: #6A57F2;
  --ux-accent-2: #2F8FE0;
  --ux-accent-soft: rgba(106, 87, 242, .12);
  --ux-accent-ink: #FFFFFF;
  --ux-mint: #119C72;
  --ux-warn: #C8741C;
  --ux-danger: #D93A55;
  --ux-grad: linear-gradient(120deg, #7B61FF, #3D8BFF 55%, #1FB89A);
  --ux-ease: cubic-bezier(.2, .8, .2, 1);
  --ux-spring: cubic-bezier(.34, 1.45, .64, 1);
  --ux-shadow: 0 18px 50px rgba(40, 30, 80, .10);
  --ux-shadow-strong: 0 30px 80px rgba(40, 30, 80, .18);

  /* Map the existing design tokens to Lucian */
  --bg: var(--ux-page);
  --surface: var(--ux-surface);
  --surface-soft: #FBFAF7;
  --surface-muted: var(--ux-surface-2);
  --ink: var(--ux-ink);
  --ink-soft: #3A3742;
  --muted: var(--ux-ink-2);
  --line: var(--ux-line);
  --line-strong: var(--ux-line-2);

  --accent: var(--ux-accent);
  --accent-hover: #5643E0;
  --accent-soft: var(--ux-accent-soft);
  --accent-line: rgba(106, 87, 242, .28);

  --green: var(--ux-mint);
  --green-soft: #E8F7F1;
  --green-line: #BDEBDD;
  --amber: var(--ux-warn);
  --amber-soft: #FFF4E6;
  --amber-line: #F7D5A8;
  --red: var(--ux-danger);
  --red-soft: #FDECEF;
  --red-line: #F6C4CD;
  --purple: var(--ux-accent);
  --purple-soft: #F1EEFF;

  --radius-card: 20px;
  --radius-control: 12px;
  --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(22, 21, 27, .04);
  --shadow-sm: var(--ux-shadow);
  --ring: 0 0 0 4px rgba(106, 87, 242, .16);
  --ease: 200ms var(--ux-ease);

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(900px 520px at 8% -10%, rgba(106, 87, 242, .10), transparent 62%),
    radial-gradient(820px 460px at 96% 0%, rgba(47, 143, 224, .08), transparent 60%),
    var(--ux-page);
  background-attachment: fixed;
  color: var(--ink);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Noto Sans KR", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(106, 87, 242, .18); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
* { scrollbar-width: thin; scrollbar-color: rgba(22, 21, 27, .18) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: rgba(22, 21, 27, .16); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(22, 21, 27, .26); background-clip: padding-box; }

h1, h2, h3, h4 { letter-spacing: -.03em; }
h1 { font-weight: 760; }
h2 { font-weight: 740; }
h3 { font-weight: 700; }
a { color: var(--accent); }

/* --------------------------------------------------------------------------
   Shell — desktop left rail, mobile top bar
   -------------------------------------------------------------------------- */
.app-shell { min-height: 100vh; }

.brand { gap: 12px; }
.logo {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: var(--ux-grad);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 10px 24px rgba(106, 87, 242, .30);
}
.brand h1 { font-size: 16px; font-weight: 760; letter-spacing: -.03em; }
.brand p { color: var(--muted); font-size: 11px; letter-spacing: .01em; }

.side-item {
  border-radius: 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  transition: background var(--ease), color var(--ease), transform var(--ease);
}
.side-item svg { fill: none; stroke: currentColor; stroke-width: 1.7; }
.side-item:hover { background: var(--surface-muted); color: var(--ink); }
.side-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(106, 87, 242, .10);
}
.side-item.active svg { stroke: var(--accent); }

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--ux-grad);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(106, 87, 242, .24);
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.side-user-info b { font-size: 12.5px; font-weight: 700; }
.side-user-info small { font-size: 10.5px; color: var(--muted); }

@media (min-width: 981px) {
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    width: 264px;
    height: 100vh;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 20px 16px 16px;
    background: rgba(255, 255, 255, .74);
    border-right: 1px solid var(--line);
    border-bottom: 0;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
  }
  .brand { padding: 4px 8px 20px; }
  .side-nav {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    overflow-y: auto;
    padding: 4px 0 12px;
  }
  .side-item { width: 100%; min-height: 42px; justify-content: flex-start; padding: 10px 12px; }
  .side-item svg { width: 18px; height: 18px; flex: 0 0 18px; }
  .side-user {
    margin: 12px 0 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    gap: 10px;
    flex-wrap: wrap;
  }
  .side-user-info { display: block; flex: 1 1 100%; min-width: 0; order: 2; }
  .side-user .avatar { order: 1; }
  .side-user .btn { order: 3; width: 100%; }
  .main-area { margin-left: 264px; width: calc(100% - 264px); }
}

/* Top bar / page heading */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 24px 36px 10px;
  background: linear-gradient(to bottom, rgba(244, 242, 238, .94), rgba(244, 242, 238, .78) 68%, rgba(244, 242, 238, 0));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.topbar h1 { font-size: 30px; line-height: 1.12; font-weight: 760; letter-spacing: -.045em; }
.topbar p { margin-top: 4px; color: var(--muted); font-size: 13px; }
.main-area main { padding: 6px 36px 56px; }
.page { gap: 20px; }
.page:not([hidden]) { animation: ux-page-in .36s var(--ux-ease) both; }
@keyframes ux-page-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   Typography helpers
   -------------------------------------------------------------------------- */
.hint { color: var(--muted); font-size: 12px; line-height: 1.55; }
.meta { color: var(--muted); font-size: 11.5px; }
.bento-eyebrow, .eyebrow {
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Buttons / links
   -------------------------------------------------------------------------- */
.btn {
  min-height: 40px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), #8B7BFF);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
  box-shadow: 0 8px 18px rgba(106, 87, 242, .22);
  transition: transform var(--ease), box-shadow var(--ease), background var(--ease), border-color var(--ease), color var(--ease);
}
.btn:hover {
  background: linear-gradient(135deg, var(--accent-hover), #7A68F5);
  border-color: transparent;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(106, 87, 242, .28);
}
.btn:active:not(:disabled) { transform: translateY(0); box-shadow: 0 4px 10px rgba(106, 87, 242, .20); }
.btn:focus-visible { box-shadow: var(--ring); }
.btn:disabled { opacity: .5; transform: none; box-shadow: none; }
.btn.ghost {
  background: rgba(255, 255, 255, .70);
  border-color: var(--line-strong);
  color: var(--ink-soft);
  box-shadow: none;
}
.btn.ghost:hover { background: var(--surface-muted); border-color: var(--line-strong); color: var(--ink); box-shadow: none; }
.btn.danger { background: var(--red-soft); border-color: var(--red-line); color: var(--red); box-shadow: none; }
.btn.danger:hover { background: #FBDCE2; border-color: var(--red-line); color: var(--red); box-shadow: none; }
.btn.small { min-height: 32px; padding: 7px 12px; font-size: 12px; border-radius: 10px; }
.link { color: var(--accent); font-size: 12px; font-weight: 700; }
.link:hover { text-decoration: none; opacity: .78; }

/* --------------------------------------------------------------------------
   Inputs / forms
   -------------------------------------------------------------------------- */
input, select, textarea {
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(255, 255, 255, .76);
  color: var(--ink);
  font-size: 13px;
  transition: border-color var(--ease), box-shadow var(--ease), background var(--ease);
}
textarea { min-height: 92px; }
input::placeholder, textarea::placeholder { color: #9A95A3; }
input:hover, select:hover, textarea:hover { border-color: rgba(106, 87, 242, .34); }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  background: #fff;
  box-shadow: var(--ring);
}
select { cursor: pointer; }
.check { gap: 8px; color: var(--ink-soft); font-size: 12px; font-weight: 550; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }
.stack { gap: 14px; }
.stack label, .form-grid label { gap: 6px; color: var(--ink-soft); font-size: 11.5px; font-weight: 650; }
.form-grid { gap: 14px 16px; }
.row input { min-width: 0; }
fieldset { border-color: var(--line); }

/* --------------------------------------------------------------------------
   Surfaces / cards
   -------------------------------------------------------------------------- */
.panel,
.bento-card {
  background: rgba(255, 255, 255, .82);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 22px;
  box-shadow: 0 1px 2px rgba(22, 21, 27, .03);
  backdrop-filter: blur(6px);
}
.bento-card:hover { border-color: rgba(22, 21, 27, .14); }
.panel-head { margin-bottom: 16px; }
.panel-head h2 { font-size: 17px; font-weight: 740; }
.panel-head h3,
.bento-card h3,
.bento-card-head h3 {
  font-size: 13.5px;
  font-weight: 720;
  letter-spacing: -.015em;
}
.bento-grid { gap: 18px; }
.bento-page > .bento-card { min-height: 210px; padding: 22px; }

/* Dashboard stats */
.bento-stats, .stats.page-stats { gap: 14px; }
.bento-stats .stat,
.page-stats .stat {
  padding: 18px 20px;
  background: rgba(255, 255, 255, .84);
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(22, 21, 27, .03);
  position: relative;
  overflow: hidden;
}
.bento-stats .stat::after,
.page-stats .stat::after {
  content: "";
  position: absolute;
  right: -24px;
  top: -24px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--accent-soft);
}
.stat b { font-size: 30px; font-weight: 760; letter-spacing: -.05em; }
.stat span { color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .09em; }

/* Hero / CV page */
.bento-hero {
  background:
    radial-gradient(420px 220px at 100% 0%, rgba(47, 143, 224, .16), transparent 65%),
    linear-gradient(135deg, rgba(106, 87, 242, .14), rgba(255, 255, 255, .80));
  border-color: rgba(106, 87, 242, .20);
}
.bento-hero h2 { font-size: 30px; font-weight: 760; letter-spacing: -.045em; }
.bento-hero p { color: var(--ux-ink-2); font-size: 13px; }
.bento-metrics b { font-size: 28px; font-weight: 760; letter-spacing: -.05em; }
.bento-selected b { color: var(--accent); }
.bento-actions, .bento-skills { background: rgba(255, 255, 255, .72); }

/* Quick actions / recent */
.quick-actions { gap: 8px; }
.recent-item {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .70);
  transition: transform var(--ease), border-color var(--ease), background var(--ease);
}
.recent-item:hover { transform: translateX(2px); border-color: var(--accent-line); background: #fff; }
.recent-item b { font-size: 13px; font-weight: 700; }
.usage-bar { height: 8px; background: var(--surface-muted); }
.usage-bar > div { background: var(--ux-grad); }
.billing-plan-name, .settings-plan-name { font-weight: 760; letter-spacing: -.045em; }

/* --------------------------------------------------------------------------
   Candidate cards / tables
   -------------------------------------------------------------------------- */
.cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.card {
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .84);
  gap: 12px;
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease), background var(--ease);
}
.card:hover {
  transform: translateY(-3px);
  border-color: rgba(106, 87, 242, .26);
  background: #fff;
  box-shadow: var(--ux-shadow);
}
.card.selected {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(106, 87, 242, .10), rgba(255, 255, 255, .94));
  box-shadow: 0 0 0 4px rgba(106, 87, 242, .10);
}
.card h3 { font-size: 15px; font-weight: 740; }
.card-foot { border-top-color: var(--line); }
.contact { font-size: 12px; }
.badge {
  padding: 4px 9px;
  border: 0;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 700;
}
.badge.green { background: var(--green-soft); color: var(--green); }
.badge.amber { background: var(--amber-soft); color: var(--amber); }
.badge.red { background: var(--red-soft); color: var(--red); }
.badge.gray { background: var(--surface-muted); color: var(--muted); }
.chips { gap: 6px; }
.chip {
  padding: 5px 9px;
  border: 1px solid rgba(22, 21, 27, .08);
  border-radius: 999px;
  background: rgba(247, 245, 241, .92);
  color: var(--ux-ink-2);
  font-size: 11px;
  font-weight: 550;
}
.empty {
  padding: 48px 20px;
  border: 1px dashed var(--line-strong);
  border-radius: 18px;
  background: rgba(255, 255, 255, .48);
  color: var(--muted);
}

.table-wrap {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .82);
  overflow: auto;
}
.data-table { font-size: 12.5px; }
.data-table th {
  padding: 11px 14px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .08em;
}
.data-table td { padding: 12px 14px; border-bottom-color: var(--line); }
.data-table tbody tr:hover { background: rgba(106, 87, 242, .045); }
.cv-table tbody tr.selected { background: var(--accent-soft); }

/* Filters */
.filters {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .66);
}
.filters input[name="q"] { min-height: 42px; }
.view-toggle {
  padding: 3px;
  border-radius: 12px;
  background: var(--surface-muted);
}
.view-btn { border-radius: 9px; }
.view-btn.active { background: #fff; color: var(--accent); box-shadow: 0 1px 3px rgba(22, 21, 27, .08); }

/* --------------------------------------------------------------------------
   Upload / preview / logs
   -------------------------------------------------------------------------- */
.dropzone {
  min-height: 220px;
  border: 1.5px dashed rgba(106, 87, 242, .34);
  border-radius: 22px;
  background:
    radial-gradient(360px 180px at 50% 0%, rgba(106, 87, 242, .10), transparent 70%),
    rgba(255, 255, 255, .62);
  transition: border-color var(--ease), background var(--ease), transform var(--ease);
}
.dropzone:hover, .dropzone.drag {
  border-color: var(--accent);
  background: rgba(106, 87, 242, .08);
  transform: translateY(-1px);
}
.dropzone strong { font-size: 15px; font-weight: 720; }
.preview-box { border-radius: 18px; }
.preview-grid { gap: 12px 16px; }
.raw-text {
  border-radius: 14px;
  background: var(--surface-muted);
  font-size: 12px;
}
.log-row { border-radius: 10px; }
.log-row.ok { background: var(--green-soft); }
.log-row.dup { background: var(--amber-soft); }
.log-row.err { background: var(--red-soft); }
.folder-import { border-radius: 14px; }

/* --------------------------------------------------------------------------
   Chat
   -------------------------------------------------------------------------- */
main.chat-mode { padding: 4px 36px 24px; }
.chat-panel { padding: 20px; border-radius: 22px; background: rgba(255, 255, 255, .78); }
.chat-layout { grid-template-columns: 236px minmax(0, 1fr); gap: 18px; }
.chat-history { border-right: 1px solid var(--line); }
.chat-session { border-radius: 11px; padding: 9px 10px; }
.chat-session:hover { background: var(--surface-muted); }
.chat-session.active { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.chat-messages {
  padding: 18px;
  border: 0;
  border-radius: 18px;
  background: rgba(247, 245, 241, .72);
  gap: 12px;
}
.chat-msg .chat-bubble {
  padding: 12px 14px;
  border-radius: 16px 16px 16px 6px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(22, 21, 27, .03);
  font-size: 13px;
  line-height: 1.6;
}
.chat-msg.user .chat-bubble {
  background: linear-gradient(135deg, var(--accent), #8B7BFF);
  border-color: transparent;
  color: #fff;
  border-radius: 16px 16px 6px 16px;
  box-shadow: 0 8px 18px rgba(106, 87, 242, .20);
}
.chat-suggestions button {
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .78);
  font-size: 11.5px;
}
.chat-suggestions button:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.chat-composer { gap: 10px; }
.chat-composer textarea { border-radius: 16px; background: rgba(255, 255, 255, .84); }
.chat-candidate { border-radius: 10px; }
.chat-candidate:hover { background: var(--surface-muted); }

/* --------------------------------------------------------------------------
   Pipeline / kanban
   -------------------------------------------------------------------------- */
.kanban-col {
  min-height: 380px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(247, 245, 241, .72);
  border-color: var(--line);
}
.kanban-head b { font-size: 12px; font-weight: 720; }
.kanban-card {
  border-radius: 13px;
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(22, 21, 27, .03);
}
.kanban-card:hover { border-color: var(--accent-line); box-shadow: 0 8px 20px rgba(40, 30, 80, .08); }
.kanban-status { border-radius: 8px; }

/* --------------------------------------------------------------------------
   Email / SMTP
   -------------------------------------------------------------------------- */
.email-template-card {
  border-radius: 14px;
  background: rgba(255, 255, 255, .78);
  border-color: var(--line);
}
.email-template-card:hover { border-color: var(--accent-line); background: #fff; }
.email-preview-wrap { border-radius: 14px; border-color: var(--line); }
.email-preview-frame { border-radius: 10px; }
#smtpForm {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(247, 245, 241, .56);
}

/* --------------------------------------------------------------------------
   Billing / LLM / settings
   -------------------------------------------------------------------------- */
.plan-grid { gap: 14px; }
.plan-card {
  padding: 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .80);
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.plan-card:hover { transform: translateY(-2px); box-shadow: var(--ux-shadow); }
.plan-card.current {
  border-color: var(--accent);
  background: linear-gradient(160deg, rgba(106, 87, 242, .13), rgba(255, 255, 255, .92));
  box-shadow: 0 0 0 4px rgba(106, 87, 242, .08);
}
.plan-price { font-size: 30px; font-weight: 760; letter-spacing: -.05em; }
.llm-card {
  padding: 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .80);
}
.llm-card:hover { border-color: var(--accent-line); box-shadow: 0 10px 24px rgba(40, 30, 80, .06); }
.llm-avatar {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--ux-grad);
  color: #fff;
  font-weight: 800;
}
.kv dt { font-size: 10px; letter-spacing: .08em; }

/* --------------------------------------------------------------------------
   Drawer / modal / toast
   -------------------------------------------------------------------------- */
.overlay { background: rgba(7, 8, 13, .42); backdrop-filter: blur(5px); }
.drawer {
  width: min(700px, 96vw);
  padding: 26px;
  border-radius: 24px 0 0 24px;
  border-left: 1px solid var(--line);
  box-shadow: var(--ux-shadow-strong);
  background: var(--ux-surface);
}
.drawer-close {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--surface-muted);
}
.modal { background: rgba(7, 8, 13, .42); backdrop-filter: blur(5px); place-items: center; }
.modal-card {
  padding: 24px;
  border-radius: 24px;
  border: 1px solid var(--line);
  box-shadow: var(--ux-shadow-strong);
  background: var(--ux-surface);
}
.modal-head h2 { font-size: 20px; font-weight: 760; }
.pdf-modal-card { border-radius: 22px; }
.pdf-frame { border-radius: 14px; }
.toast {
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(22, 21, 27, .94);
  font-weight: 600;
  box-shadow: 0 16px 40px rgba(22, 21, 27, .30);
}

/* --------------------------------------------------------------------------
   Login
   -------------------------------------------------------------------------- */
.login-body {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(720px 460px at 8% 0%, rgba(106, 87, 242, .20), transparent 62%),
    radial-gradient(680px 420px at 96% 12%, rgba(47, 143, 224, .16), transparent 62%),
    radial-gradient(600px 420px at 50% 110%, rgba(31, 184, 154, .12), transparent 60%),
    var(--ux-page);
}
.login-body::before,
.login-body::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  filter: blur(8px);
  pointer-events: none;
}
.login-body::before {
  width: 460px; height: 460px; left: -160px; top: -180px;
  background: radial-gradient(circle, rgba(106, 87, 242, .22), transparent 68%);
}
.login-body::after {
  width: 520px; height: 520px; right: -200px; bottom: -220px;
  background: radial-gradient(circle, rgba(47, 143, 224, .18), transparent 68%);
}
.login-card {
  position: relative;
  z-index: 1;
  width: min(440px, 100%);
  padding: 32px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, .9);
  background: rgba(255, 255, 255, .86);
  box-shadow: var(--ux-shadow-strong);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
}
.login-brand { gap: 14px; margin-bottom: 24px; }
.login-brand h1 { font-size: 22px; font-weight: 760; letter-spacing: -.04em; }
.login-brand p { font-size: 12px; }
.login-tabs {
  padding: 4px;
  border-radius: 12px;
  background: var(--surface-muted);
  gap: 4px;
}
.login-tabs button {
  padding: 9px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
  transition: background var(--ease), color var(--ease), box-shadow var(--ease);
}
.login-tabs button.active {
  background: #fff;
  color: var(--accent);
  box-shadow: 0 1px 4px rgba(22, 21, 27, .08);
}
.login-form { gap: 14px; }
.login-form label { gap: 6px; color: var(--ink-soft); font-size: 11.5px; font-weight: 650; }
.login-form .btn { min-height: 44px; margin-top: 4px; }
.login-divider { color: var(--muted); font-size: 11px; }
.login-divider::before, .login-divider::after { background: var(--line); }
.google-btn {
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .78);
  font-weight: 650;
}
.google-btn:hover { border-color: var(--accent-line); background: #fff; }
.login-msg { border-radius: 10px; font-size: 12px; }
.login-msg.ok { background: var(--green-soft); color: var(--green); }
.dev-link { border-radius: 10px; background: var(--surface-muted); }
.login-foot { color: var(--muted); font-size: 10.5px; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .bento-page > .eq-3 { grid-column: span 6; }
  .bento-stats, .page-stats .stat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats.page-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .sidebar {
    padding: 10px 16px;
    background: rgba(255, 255, 255, .80);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  .brand { padding: 0; }
  .side-item { border-radius: 10px; }
  .main-area { margin-left: 0; width: 100%; }
  .topbar { padding: 20px 20px 8px; }
  .topbar h1 { font-size: 26px; }
  .main-area main { padding: 6px 20px 40px; }
  main.chat-mode { padding: 4px 20px 20px; }
  .bento-page > .eq-3,
  .bento-page > .eq-4 { grid-column: span 6; }
  .bento-page > .eq-6 { grid-column: span 12; }
  .stats.page-stats,
  .bento-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-hero, .bento-actions, .bento-skills { grid-column: span 12; }
}
@media (max-width: 760px) {
  .topbar { padding: 18px 14px 6px; }
  .topbar h1 { font-size: 23px; }
  .main-area main { padding: 4px 14px 36px; }
  .bento-grid { gap: 12px; }
  .bento-page > .eq-3,
  .bento-page > .eq-4,
  .bento-page > .eq-6,
  .bento-page > .eq-12 { grid-column: span 12; }
  .panel, .bento-card { padding: 16px; border-radius: 16px; }
  .stats.page-stats,
  .bento-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat b { font-size: 24px; }
  .cards { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .plan-grid { grid-template-columns: 1fr; }
  .drawer { width: 100vw; border-radius: 0; }
  .modal-card { padding: 18px; border-radius: 18px; }
  .login-card { padding: 24px; border-radius: 22px; }
  .chat-layout { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .page:not([hidden]) { animation: none; }
  .btn, .card, .recent-item, .plan-card { transition: none; }
}

/* --- polish pass --- */
[data-page-view="email"] .bento-grid { align-items: start; }
[data-page-view="email"] .bento-page > .bento-card { height: auto; }
.email-template-card { gap: 12px; padding: 12px; }
.email-template-actions { gap: 8px; }
.email-template-actions .btn { min-height: 30px; padding: 6px 9px; }

/* --- responsive polish --- */
.modal-head .drawer-close {
  position: static;
  flex: 0 0 auto;
  margin-left: auto;
  width: 34px;
  height: 34px;
}
@media (max-width: 980px) {
  .side-nav {
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
    padding-right: 24px;
  }
}
@media (max-width: 760px) {
  .filters { grid-template-columns: 1fr; }
  .filters input[name="q"],
  .filters .check,
  .filters .filter-actions { grid-column: 1 / -1; }
  .filters .filter-actions { justify-content: stretch; }
  .filters .filter-actions .btn { flex: 1 1 auto; }
  #emailHistoryTable th,
  #emailHistoryTable td { padding: 10px; white-space: nowrap; }
}

/* ==========================================================================
   Brand palette (change these 3 values to rebrand the whole app)
   ========================================================================== */
:root {
  --brand-1: #6A57F2;
  --brand-2: #2F8FE0;
  --brand-3: #1FB89A;
  --ux-grad: linear-gradient(120deg, var(--brand-1), var(--brand-2) 55%, var(--brand-3));
}
.btn { background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); }
.btn:hover { background: linear-gradient(135deg, var(--accent-hover), var(--brand-2)); }
.chat-msg.user .chat-bubble {
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
}

/* ==========================================================================
   Theme toggle + mobile drawer
   ========================================================================== */
.topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .72);
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: background var(--ease), color var(--ease), transform var(--ease);
}
.theme-toggle:hover { background: var(--surface-muted); color: var(--ink); transform: translateY(-1px); }
.login-theme { position: absolute; top: 16px; right: 16px; z-index: 2; }

.mobile-menu-btn { display: none; }
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 65;
  background: rgba(7, 8, 13, .38);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

@media (max-width: 980px) {
  .mobile-menu-btn {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    order: 0;
    margin-right: 2px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(255, 255, 255, .70);
    color: var(--ink-soft);
  }
  .sidebar .brand { order: 1; flex: 1 1 auto; min-width: 0; }
  .sidebar .side-user { order: 2; }
  .side-nav {
    display: none;
    position: fixed;
    top: 70px;
    left: 10px;
    right: 10px;
    z-index: 75;
    max-height: calc(100vh - 84px);
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--ux-shadow-strong);
    -webkit-mask-image: none;
    mask-image: none;
  }
  body.nav-open .side-nav { display: flex; }
  body.nav-open .mobile-nav-overlay { display: block; }
  body.nav-open { overflow: hidden; }
  .side-nav .side-item { width: 100%; justify-content: flex-start; min-height: 42px; padding: 10px 12px; }
  .side-nav .side-item svg { width: 18px; height: 18px; flex: 0 0 18px; }
}

/* ==========================================================================
   Dark theme
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand-1: #B7A4FF;
  --brand-2: #7DB4FF;
  --brand-3: #A5F2D3;
  --ux-page: #07080D;
  --ux-surface: #13141C;
  --ux-surface-2: #1A1B25;
  --ux-surface-3: #252632;
  --ux-ink: #F4F0E8;
  --ux-ink-2: rgba(244, 240, 232, .68);
  --ux-ink-3: rgba(244, 240, 232, .42);
  --ux-line: rgba(255, 255, 255, .08);
  --ux-line-2: rgba(255, 255, 255, .16);
  --ux-accent: #B7A4FF;
  --ux-accent-2: #7DB4FF;
  --ux-accent-soft: rgba(183, 164, 255, .15);
  --ux-accent-ink: #0B0C12;
  --ux-mint: #7EE8C0;
  --ux-warn: #FFB26B;
  --ux-danger: #FF7D8C;
  --ux-grad: linear-gradient(120deg, var(--brand-1), var(--brand-2) 55%, var(--brand-3));
  --ux-shadow: 0 18px 50px rgba(0, 0, 0, .48);
  --ux-shadow-strong: 0 30px 90px rgba(0, 0, 0, .70);

  --bg: var(--ux-page);
  --surface: var(--ux-surface);
  --surface-soft: #14151D;
  --surface-muted: var(--ux-surface-2);
  --ink: var(--ux-ink);
  --ink-soft: rgba(244, 240, 232, .82);
  --muted: var(--ux-ink-2);
  --line: var(--ux-line);
  --line-strong: var(--ux-line-2);
  --accent: var(--ux-accent);
  --accent-hover: #C9BCFF;
  --accent-soft: var(--ux-accent-soft);
  --accent-line: rgba(183, 164, 255, .30);
  --green: var(--ux-mint);
  --green-soft: rgba(126, 232, 192, .12);
  --green-line: rgba(126, 232, 192, .26);
  --amber: var(--ux-warn);
  --amber-soft: rgba(255, 178, 107, .12);
  --amber-line: rgba(255, 178, 107, .26);
  --red: var(--ux-danger);
  --red-soft: rgba(255, 125, 140, .12);
  --red-line: rgba(255, 125, 140, .26);
  --purple: var(--ux-accent);
  --purple-soft: rgba(183, 164, 255, .12);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow-sm: var(--ux-shadow);
  --ring: 0 0 0 4px rgba(183, 164, 255, .18);
}
[data-theme="dark"] body {
  background:
    radial-gradient(900px 520px at 8% -10%, rgba(183, 164, 255, .13), transparent 62%),
    radial-gradient(820px 460px at 96% 0%, rgba(125, 180, 255, .10), transparent 60%),
    var(--ux-page);
}
[data-theme="dark"] .sidebar { background: rgba(19, 20, 28, .84); }
[data-theme="dark"] .topbar {
  background: linear-gradient(to bottom, rgba(7, 8, 13, .94), rgba(7, 8, 13, .76) 68%, rgba(7, 8, 13, 0));
}
[data-theme="dark"] :is(.panel, .bento-card, .bento-stats .stat, .page-stats .stat,
  .recent-item, .card, .plan-card, .llm-card, .kanban-card, .email-template-card,
  .table-wrap, .filters, .side-user, .login-card, .drawer, .modal-card, .chat-panel,
  .smtpForm, #smtpForm, .preview-box, .folder-import) {
  background: rgba(19, 20, 28, .82);
  border-color: var(--ux-line);
}
[data-theme="dark"] .bento-hero {
  background:
    radial-gradient(420px 220px at 100% 0%, rgba(125, 180, 255, .18), transparent 65%),
    linear-gradient(135deg, rgba(183, 164, 255, .16), rgba(19, 20, 28, .90));
}
[data-theme="dark"] :is(input, select, textarea) {
  background: rgba(255, 255, 255, .05);
  border-color: var(--ux-line-2);
  color: var(--ux-ink);
}
[data-theme="dark"] :is(input, select, textarea):focus { background: var(--ux-surface-2); }
[data-theme="dark"] .btn { color: #0B0C12; }
[data-theme="dark"] .btn.ghost {
  background: rgba(255, 255, 255, .04);
  border-color: var(--ux-line-2);
  color: var(--ux-ink);
  box-shadow: none;
}
[data-theme="dark"] .btn.ghost:hover { background: rgba(255, 255, 255, .08); color: var(--ux-ink); }
[data-theme="dark"] .btn.danger { background: var(--red-soft); border-color: var(--red-line); color: var(--ux-danger); }
[data-theme="dark"] .logo,
[data-theme="dark"] .avatar { color: #0B0C12; }
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .mobile-menu-btn {
  background: rgba(255, 255, 255, .06);
  color: var(--ux-ink);
}
[data-theme="dark"] .table-wrap { background: rgba(19, 20, 28, .82); }
[data-theme="dark"] .data-table th { background: rgba(255, 255, 255, .04); }
[data-theme="dark"] .data-table tbody tr:hover { background: rgba(183, 164, 255, .08); }
[data-theme="dark"] .chat-messages { background: rgba(255, 255, 255, .03); }
[data-theme="dark"] .chat-msg .chat-bubble { background: var(--ux-surface-2); border-color: var(--ux-line); }
[data-theme="dark"] .chat-msg.user .chat-bubble { background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); color: #0B0C12; }
[data-theme="dark"] .chat-suggestion,
[data-theme="dark"] .chat-suggestions button { background: rgba(255, 255, 255, .05); color: var(--ux-ink); }
[data-theme="dark"] .chip { background: rgba(255, 255, 255, .05); border-color: var(--ux-line); color: var(--ux-ink-2); }
[data-theme="dark"] .badge.gray { background: rgba(255, 255, 255, .06); color: var(--ux-ink-2); }
[data-theme="dark"] .login-body {
  background:
    radial-gradient(720px 460px at 8% 0%, rgba(183, 164, 255, .18), transparent 62%),
    radial-gradient(680px 420px at 96% 12%, rgba(125, 180, 255, .13), transparent 62%),
    radial-gradient(600px 420px at 50% 110%, rgba(165, 242, 211, .08), transparent 60%),
    var(--ux-page);
}
[data-theme="dark"] .login-card { background: rgba(19, 20, 28, .88); border-color: rgba(255, 255, 255, .12); }
[data-theme="dark"] .login-tabs { background: rgba(255, 255, 255, .06); }
[data-theme="dark"] .login-tabs button.active { background: rgba(255, 255, 255, .10); color: var(--ux-accent); }
[data-theme="dark"] .google-btn { background: rgba(255, 255, 255, .04); border-color: var(--ux-line-2); }
[data-theme="dark"] .google-btn:hover { background: rgba(255, 255, 255, .08); }
[data-theme="dark"] .dropzone {
  background:
    radial-gradient(360px 180px at 50% 0%, rgba(183, 164, 255, .12), transparent 70%),
    rgba(255, 255, 255, .03);
  border-color: rgba(183, 164, 255, .32);
}
[data-theme="dark"] .kanban-col { background: rgba(255, 255, 255, .03); }
[data-theme="dark"] .toast { background: rgba(244, 240, 232, .96); color: #0B0C12; }
[data-theme="dark"] .email-preview-frame,
[data-theme="dark"] .pdf-frame { background: #fff; }

/* keep the mobile drawer above its own backdrop */
.mobile-nav-overlay { z-index: 40; }
@media (max-width: 980px) {
  .sidebar { z-index: 50; }
  body.nav-open .sidebar { z-index: 80; }
  body.nav-open .side-nav { z-index: 90; }
}

/* ==========================================================================
   Flat colors (no gradients) + button sizing balance
   ========================================================================== */
:root { --ux-grad: var(--brand-1); }

body { background: var(--ux-page); }

.btn { background: var(--brand-1); }
.btn:hover { background: var(--accent-hover); }
.btn:active:not(:disabled) { background: var(--accent-hover); }
.btn.ghost { background: var(--surface); }
.btn.ghost:hover { background: var(--surface-muted); }
.btn.danger { background: var(--red-soft); }

.logo, .avatar { background: var(--brand-1); }
.chat-msg.user .chat-bubble { background: var(--brand-1); }
.bento-hero { background: var(--accent-soft); }
.card.selected { background: var(--accent-soft); }
.plan-card.current { background: var(--accent-soft); }
.dropzone { background: var(--surface); }
.login-body { background: var(--ux-page); }
.login-body::before, .login-body::after { display: none; }

.btn { min-height: 42px; }
.btn.small { min-height: 34px; padding: 7px 12px; }
.chat-tools { align-items: center; }
.chat-tools select,
.chat-tools .btn,
.chat-tools .btn.small {
  min-height: 42px;
  padding: 10px 16px;
  font-size: 13px;
  border-radius: 12px;
}
.email-template-actions .btn { min-height: 32px; }

[data-theme="dark"] body { background: var(--ux-page); }
[data-theme="dark"] .bento-hero { background: rgba(183, 164, 255, .10); }
[data-theme="dark"] .logo,
[data-theme="dark"] .avatar { background: var(--ux-accent); }
[data-theme="dark"] .btn { background: var(--ux-accent); color: #0B0C12; }
[data-theme="dark"] .btn:hover { background: var(--brand-2); color: #0B0C12; }
[data-theme="dark"] .btn.ghost { background: rgba(255, 255, 255, .04); color: var(--ux-ink); }
[data-theme="dark"] .btn.ghost:hover { background: rgba(255, 255, 255, .08); color: var(--ux-ink); }
[data-theme="dark"] .btn.danger { background: var(--red-soft); color: var(--ux-danger); }
[data-theme="dark"] .chat-msg.user .chat-bubble { background: var(--ux-accent); color: #0B0C12; }
[data-theme="dark"] .dropzone { background: var(--ux-surface); }
[data-theme="dark"] .login-body { background: var(--ux-page); }

/* flat topbar + dark avatar text */
.topbar { background: rgba(244, 242, 238, .92); }
[data-theme="dark"] .topbar { background: rgba(7, 8, 13, .92); }
[data-theme="dark"] .llm-avatar { color: #0B0C12; }

/* filled/active secondary toggle */
.btn.ghost.is-active {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}
[data-theme="dark"] .btn.ghost.is-active {
  background: var(--ux-accent-soft);
  border-color: var(--accent-line);
  color: var(--ux-accent);
}

/* ==========================================================================
   TechVanguard palette — dark gold identity
   ========================================================================== */
:root {
  --brand-1: #D0B872;
  --brand-2: #B58A33;
  --brand-3: #8B6329;
  --ux-page: #F7F3E8;
  --ux-surface: #FFFFFF;
  --ux-surface-2: #F3EFE4;
  --ux-surface-3: #EAE3D3;
  --ux-ink: #1E1D26;
  --ux-ink-2: #57535F;
  --ux-ink-3: #8A8592;
  --ux-line: rgba(30, 29, 38, .10);
  --ux-line-2: rgba(30, 29, 38, .18);
  --ux-accent: #8B6329;
  --ux-accent-2: #B58A33;
  --ux-accent-soft: rgba(208, 184, 114, .20);
  --ux-accent-ink: #1E1D26;
  --ux-mint: #11875F;
  --ux-warn: #B36B14;
  --ux-danger: #C03B4F;

  --bg: var(--ux-page);
  --surface: var(--ux-surface);
  --surface-soft: #FBFAF6;
  --surface-muted: var(--ux-surface-2);
  --ink: var(--ux-ink);
  --ink-soft: #3B3742;
  --muted: var(--ux-ink-2);
  --line: var(--ux-line);
  --line-strong: var(--ux-line-2);
  --accent: var(--ux-accent);
  --accent-hover: #6F4E20;
  --accent-soft: var(--ux-accent-soft);
  --accent-line: rgba(139, 99, 41, .26);
  --green: #11875F;
  --green-soft: #E8F7F0;
  --green-line: #BDEBD8;
  --amber: #B36B14;
  --amber-soft: #FFF4E2;
  --amber-line: #F2D4A2;
  --red: #C03B4F;
  --red-soft: #FDECEF;
  --red-line: #F3C4CC;
  --purple: #8B6329;
  --purple-soft: #F7EFDA;
  --ring: 0 0 0 4px rgba(208, 184, 114, .22);
  --ux-grad: var(--brand-1);
}

body { background: var(--ux-page); }
.btn { background: var(--brand-1); color: #1E1D26; }
.btn:hover { background: var(--brand-2); color: #1E1D26; }
.btn.ghost { background: var(--surface); color: var(--ink-soft); }
.btn.ghost:hover { background: var(--surface-muted); color: var(--ink); }
.btn.danger { background: var(--red-soft); color: var(--red); }
.logo,
.avatar { background: var(--brand-1); color: #1E1D26; }
.chat-msg.user .chat-bubble { background: var(--brand-1); color: #1E1D26; }

:root[data-theme="dark"] {
  --brand-1: #FADE83;
  --brand-2: #D0B872;
  --brand-3: #8B6329;
  --ux-page: #1E1D26;
  --ux-surface: #1B1A23;
  --ux-surface-2: #312F3F;
  --ux-surface-3: #3B394A;
  --ux-ink: #F5F2EA;
  --ux-ink-2: #AEAEAE;
  --ux-ink-3: rgba(245, 242, 234, .52);
  --ux-line: rgba(175, 156, 99, .24);
  --ux-line-2: rgba(175, 156, 99, .42);
  --ux-accent: #FADE83;
  --ux-accent-2: #D0B872;
  --ux-accent-soft: rgba(250, 222, 131, .14);
  --ux-accent-ink: #1E1D26;
  --ux-mint: #9FD8A8;
  --ux-warn: #FADE83;
  --ux-danger: #FF8A8A;

  --bg: var(--ux-page);
  --surface: var(--ux-surface);
  --surface-soft: #23222C;
  --surface-muted: var(--ux-surface-2);
  --ink: var(--ux-ink);
  --ink-soft: rgba(245, 242, 234, .84);
  --muted: var(--ux-ink-2);
  --line: var(--ux-line);
  --line-strong: var(--ux-line-2);
  --accent: var(--ux-accent);
  --accent-hover: #FFEAA6;
  --accent-soft: var(--ux-accent-soft);
  --accent-line: rgba(250, 222, 131, .35);
  --green: var(--ux-mint);
  --green-soft: rgba(159, 216, 168, .12);
  --green-line: rgba(159, 216, 168, .28);
  --amber: #FADE83;
  --amber-soft: rgba(250, 222, 131, .10);
  --amber-line: rgba(250, 222, 131, .26);
  --red: var(--ux-danger);
  --red-soft: rgba(255, 138, 138, .10);
  --red-line: rgba(255, 138, 138, .28);
  --purple: #D0B872;
  --purple-soft: rgba(208, 184, 114, .12);
  --ring: 0 0 0 4px rgba(250, 222, 131, .18);
  --ux-grad: var(--brand-1);
}
[data-theme="dark"] body { background: var(--ux-page); }
[data-theme="dark"] .sidebar { background: rgba(27, 26, 35, .88); }
[data-theme="dark"] .topbar { background: rgba(30, 29, 38, .92); }
[data-theme="dark"] :is(.panel, .bento-card, .bento-stats .stat, .page-stats .stat,
  .recent-item, .card, .plan-card, .llm-card, .kanban-card, .email-template-card,
  .table-wrap, .filters, .side-user, .drawer, .modal-card, .chat-panel,
  #smtpForm, .preview-box, .folder-import) {
  background: rgba(27, 26, 35, .86);
  border-color: var(--ux-line);
}
[data-theme="dark"] .login-card {
  background: rgba(27, 26, 35, .92);
  border-color: var(--ux-line-2);
}
[data-theme="dark"] .login-body { background: var(--ux-page); }
[data-theme="dark"] .bento-hero { background: rgba(208, 184, 114, .10); }
[data-theme="dark"] .chat-messages { background: rgba(27, 26, 35, .58); }
[data-theme="dark"] .kanban-col { background: rgba(49, 47, 63, .55); }
[data-theme="dark"] .dropzone { background: var(--ux-surface); }
[data-theme="dark"] .btn { background: var(--ux-accent); color: #1E1D26; }
[data-theme="dark"] .btn:hover { background: #FFEAA6; color: #1E1D26; }
[data-theme="dark"] .btn.ghost { background: rgba(255, 255, 255, .04); color: var(--ux-ink); }
[data-theme="dark"] .btn.ghost:hover { background: rgba(255, 255, 255, .09); color: var(--ux-ink); }
[data-theme="dark"] .btn.danger { background: var(--red-soft); color: var(--ux-danger); }
[data-theme="dark"] .logo,
[data-theme="dark"] .avatar { background: var(--ux-accent); color: #1E1D26; }
[data-theme="dark"] .chat-msg.user .chat-bubble { background: var(--ux-accent); color: #1E1D26; }
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .mobile-menu-btn { background: rgba(255, 255, 255, .06); color: var(--ux-ink); }
[data-theme="dark"] .toast { background: var(--ux-accent); color: #1E1D26; }
[data-theme="dark"] .side-item.active {
  background: var(--ux-accent-soft);
  color: var(--ux-accent);
  box-shadow: inset 0 0 0 1px rgba(250, 222, 131, .14);
}
[data-theme="dark"] .login-tabs button.active {
  background: rgba(250, 222, 131, .14);
  color: var(--ux-accent);
}

/* language switcher */
.lang-select {
  width: auto;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .72);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
[data-theme="dark"] .lang-select {
  background: rgba(255, 255, 255, .06);
  color: var(--ux-ink);
}
.login-lang {
  position: absolute;
  top: 16px;
  right: 64px;
  z-index: 2;
  width: 62px;
}
@media (max-width: 760px) {
  .login-lang { right: 62px; }
}

/* ==========================================================================
   Material 3 / Jobbie-inspired light workspace
   ========================================================================== */
:root {
  --md-primary: #0e00ce;
  --md-primary-container: #3032e8;
  --md-on-primary: #ffffff;
  --md-primary-fixed: #e1e0ff;
  --md-on-primary-fixed: #03006d;
  --md-secondary: #526600;
  --md-secondary-container: #c8f31d;
  --md-on-secondary-container: #576c00;
  --md-tertiary: #4400b6;
  --md-tertiary-container: #5d14ea;
  --md-tertiary-fixed: #e7deff;
  --md-surface: #faf9fd;
  --md-surface-lowest: #ffffff;
  --md-surface-low: #f5f3f7;
  --md-surface-container: #efedf1;
  --md-surface-high: #e9e7ec;
  --md-surface-highest: #e3e2e6;
  --md-on-surface: #1b1b1f;
  --md-on-surface-variant: #454556;
  --md-outline: #767588;
  --md-outline-variant: #c6c4d9;
  --md-error: #ba1a1a;
  --md-error-container: #ffdad6;
  --md-inverse-surface: #2f3034;
  --md-inverse-on-surface: #f2f0f4;

  --brand-1: var(--md-primary-container);
  --brand-2: var(--md-primary);
  --brand-3: var(--md-tertiary-container);
  --ux-page: var(--md-surface);
  --ux-surface: var(--md-surface-lowest);
  --ux-surface-2: var(--md-surface-low);
  --ux-surface-3: var(--md-surface-container);
  --ux-ink: var(--md-on-surface);
  --ux-ink-2: var(--md-on-surface-variant);
  --ux-ink-3: var(--md-outline);
  --ux-line: #e3e2e6;
  --ux-line-2: var(--md-outline-variant);
  --ux-accent: var(--md-primary);
  --ux-accent-2: var(--md-primary-container);
  --ux-accent-soft: var(--md-primary-fixed);
  --ux-accent-ink: #ffffff;

  --bg: var(--md-surface);
  --surface: var(--md-surface-lowest);
  --surface-soft: #fcfbff;
  --surface-muted: var(--md-surface-low);
  --ink: var(--md-on-surface);
  --ink-soft: var(--md-on-surface-variant);
  --muted: var(--md-outline);
  --line: var(--ux-line);
  --line-strong: var(--ux-line-2);
  --accent: var(--md-primary);
  --accent-hover: #1e1bdd;
  --accent-soft: var(--md-primary-fixed);
  --accent-line: #bfc1ff;
  --green: var(--md-secondary);
  --green-soft: var(--md-secondary-container);
  --green-line: #aed500;
  --amber: #9a5b00;
  --amber-soft: #fff0d1;
  --amber-line: #f2cf8b;
  --red: var(--md-error);
  --red-soft: var(--md-error-container);
  --red-line: #ffb4ab;
  --purple: var(--md-tertiary);
  --purple-soft: var(--md-tertiary-fixed);
  --radius-card: 16px;
  --radius-control: 12px;
  --shadow-xs: 0 1px 8px rgba(0, 0, 0, .04);
  --shadow-sm: 0 4px 18px rgba(29, 27, 56, .07);
  --ring: 0 0 0 3px rgba(48, 50, 232, .18);
  --ux-shadow: 0 8px 28px rgba(29, 27, 56, .10);
  --ux-shadow-strong: 0 20px 60px rgba(29, 27, 56, .18);
  --ux-grad: var(--md-primary-container);
}

body {
  background: var(--md-surface);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  letter-spacing: -.005em;
}
h1, h2, h3, h4,
.brand h1,
.topbar h1,
.bento-hero h2,
.billing-plan-name,
.settings-plan-name,
.login-brand h1,
.stat b,
.plan-price,
.user-stat b {
  font-family: Syne, "Plus Jakarta Sans", sans-serif;
  letter-spacing: -.03em;
}
.topbar h1 { font-size: 28px; font-weight: 700; }
.brand h1 { font-size: 17px; font-weight: 700; }
.logo {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--md-primary-container); color: var(--md-on-primary);
  box-shadow: 0 4px 12px rgba(48, 50, 232, .28);
}
.brand p { color: var(--md-outline); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }

@media (min-width: 981px) {
  .sidebar {
    width: 288px;
    background: var(--md-surface-lowest);
    border-right: 0;
    box-shadow: 0 1px 8px rgba(0, 0, 0, .04);
  }
  .main-area { margin-left: 288px; width: calc(100% - 288px); }
  .side-nav { gap: 3px; }
  .side-item { min-height: 44px; padding: 10px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; color: var(--md-on-surface-variant); }
  .side-item:hover { background: var(--md-surface-low); color: var(--md-on-surface); }
  .side-item.active {
    background: var(--md-primary-container);
    color: var(--md-on-primary);
    box-shadow: 0 0 0 3px rgba(48, 50, 232, .16);
  }
  .side-item.active svg { stroke: var(--md-on-primary); }
  .side-item[data-page="chat"]::after,
  .side-item[data-page="llm"]::after {
    content: "AI";
    margin-left: auto;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--md-secondary-container);
    color: var(--md-on-secondary-container);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
  }
  .side-item[data-page="chat"].active::after,
  .side-item[data-page="llm"].active::after { background: rgba(255, 255, 255, .20); color: #fff; }
  .nav-label {
    padding: 14px 12px 6px;
    color: var(--md-outline);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .side-user {
    border: 0;
    border-radius: 14px;
    background: var(--md-surface-low);
    box-shadow: none;
  }
}

.topbar {
  min-height: 64px;
  padding: 14px 32px;
  background: rgba(250, 249, 253, .86);
  box-shadow: 0 1px 8px rgba(0, 0, 0, .04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.topbar h1 { font-size: 28px; }
.topbar p { color: var(--md-outline); font-size: 13px; }
.main-area main { padding: 24px 32px 56px; max-width: 1440px; margin: 0 auto; }
.page { gap: 20px; }

/* controls */
.btn {
  min-height: 42px;
  padding: 10px 18px;
  border: 0;
  border-radius: 12px;
  background: var(--md-primary-container);
  color: var(--md-on-primary);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(48, 50, 232, .20);
}
.btn:hover { background: var(--md-primary); color: var(--md-on-primary); box-shadow: 0 6px 18px rgba(48, 50, 232, .26); }
.btn.ghost { background: var(--md-surface-low); border: 0; color: var(--md-on-surface); box-shadow: none; }
.btn.ghost:hover { background: var(--md-surface-container); color: var(--md-on-surface); }
.btn.danger { background: var(--md-error-container); color: var(--md-error); box-shadow: none; }
.btn.danger:hover { background: #ffc7c2; color: var(--md-error); }
.btn.small { min-height: 34px; padding: 7px 12px; border-radius: 10px; font-size: 12px; }
.btn.ghost.is-active { background: var(--md-primary-fixed); color: var(--md-on-primary-fixed); border: 0; }

input, select, textarea {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--md-surface-low);
  color: var(--md-on-surface);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
}
input:hover, select:hover, textarea:hover { border-color: var(--md-outline-variant); }
input:focus, select:focus, textarea:focus { border-color: var(--md-primary-container); box-shadow: var(--ring); background: #fff; }
input::placeholder, textarea::placeholder { color: var(--md-outline); }
.check input { accent-color: var(--md-primary-container); }
.stack label, .form-grid label { color: var(--md-outline); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

.theme-toggle, .lang-select, .mobile-menu-btn {
  background: var(--md-surface-low);
  border: 0;
  color: var(--md-on-surface-variant);
  box-shadow: none;
}
.theme-toggle:hover, .lang-select:hover { background: var(--md-surface-container); }

/* surfaces */
.panel, .bento-card {
  background: var(--md-surface-lowest);
  border: 0;
  border-radius: 16px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .04);
  padding: 22px;
}
.bento-card:hover { box-shadow: 0 4px 18px rgba(29, 27, 56, .07); }
.panel-head h2 { font-family: Syne, sans-serif; font-size: 18px; font-weight: 700; }
.panel-head h3, .bento-card h3, .bento-card-head h3 { font-size: 13px; font-weight: 800; letter-spacing: .01em; }
.bento-grid { gap: 16px; }

.bento-stats, .stats.page-stats { gap: 14px; }
.bento-stats .stat, .page-stats .stat {
  background: var(--md-surface-lowest);
  border: 0;
  border-radius: 16px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .04);
  padding: 18px 20px;
}
.bento-stats .stat::after, .page-stats .stat::after { background: var(--md-primary-fixed); }
.stat b { font-size: 30px; font-weight: 700; }
.stat span { color: var(--md-outline); font-size: 10px; font-weight: 800; letter-spacing: .08em; }

.bento-hero {
  background: var(--md-primary-fixed);
  border: 0;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .04);
}
.bento-hero .bento-eyebrow { color: var(--md-primary-container); }
.bento-hero h2 { font-size: 30px; }
.bento-actions, .bento-skills { background: var(--md-surface-lowest); }
.bento-metrics b { font-size: 28px; font-weight: 700; }

.recent-item, .card, .plan-card, .llm-card, .kanban-card, .email-template-card {
  background: var(--md-surface-lowest);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
}
.recent-item:hover, .card:hover, .plan-card:hover, .llm-card:hover, .email-template-card:hover {
  background: #fff;
  border: 0;
  box-shadow: 0 6px 20px rgba(29, 27, 56, .09);
}
.card.selected {
  background: var(--md-primary-fixed);
  box-shadow: 0 0 0 3px rgba(48, 50, 232, .16);
}
.card h3 { font-family: Syne, sans-serif; font-size: 15px; font-weight: 700; }
.chip {
  background: var(--md-surface-low);
  border: 0;
  border-radius: 999px;
  color: var(--md-on-surface-variant);
  font-weight: 600;
}
.badge {
  background: var(--md-primary-fixed);
  color: var(--md-on-primary-fixed);
  border: 0;
  border-radius: 999px;
  font-weight: 800;
}
.badge.green { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.badge.amber { background: var(--md-tertiary-fixed); color: var(--md-tertiary); }
.badge.gray { background: var(--md-surface-container); color: var(--md-on-surface-variant); }
.badge.red { background: var(--md-error-container); color: var(--md-error); }

.table-wrap { border: 0; border-radius: 16px; background: var(--md-surface-lowest); box-shadow: 0 1px 8px rgba(0, 0, 0, .04); }
.data-table th { background: var(--md-surface-low); color: var(--md-outline); font-size: 10px; font-weight: 800; letter-spacing: .07em; }
.data-table td { border-bottom-color: var(--md-surface-container); }
.data-table tbody tr:hover { background: var(--md-surface-low); }
.filters { background: var(--md-surface-lowest); border: 0; border-radius: 16px; box-shadow: 0 1px 8px rgba(0, 0, 0, .04); }
.view-toggle { background: var(--md-surface-low); border: 0; border-radius: 12px; }
.view-btn.active { background: #fff; color: var(--md-primary-container); box-shadow: 0 1px 4px rgba(0,0,0,.06); }

.dropzone { background: var(--md-surface-lowest); border: 1.5px dashed var(--md-outline-variant); border-radius: 20px; }
.dropzone:hover, .dropzone.drag { background: var(--md-primary-fixed); border-color: var(--md-primary-container); }

.chat-panel { background: var(--md-surface-lowest); border-radius: 20px; }
.chat-messages { background: var(--md-surface-low); border-radius: 16px; border: 0; }
.chat-msg .chat-bubble { background: #fff; border: 0; border-radius: 16px 16px 16px 6px; box-shadow: 0 1px 6px rgba(0,0,0,.05); }
.chat-msg.user .chat-bubble { background: var(--md-primary-container); color: #fff; border-radius: 16px 16px 6px 16px; box-shadow: 0 4px 14px rgba(48,50,232,.22); }
.chat-suggestion, .chat-suggestions button { background: #fff; border: 0; box-shadow: 0 1px 4px rgba(0,0,0,.04); }
.chat-session.active { background: var(--md-primary-fixed); color: var(--md-on-primary-fixed); }

.kanban-col { background: var(--md-surface-low); border: 0; border-radius: 16px; }
.kanban-card { box-shadow: 0 1px 6px rgba(0,0,0,.05); }
.plan-card.current { background: var(--md-primary-fixed); border: 0; box-shadow: 0 0 0 3px rgba(48,50,232,.12); }

.overlay { background: rgba(27, 27, 31, .42); }
.modal-card, .drawer { background: var(--md-surface-lowest); border: 0; border-radius: 20px; box-shadow: 0 24px 70px rgba(29,27,56,.22); }
.drawer { border-radius: 20px 0 0 20px; }
.toast { background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); border-radius: 12px; box-shadow: 0 12px 36px rgba(0,0,0,.22); }

.login-body { background: var(--md-surface); }
.login-card { background: var(--md-surface-lowest); border: 0; border-radius: 22px; box-shadow: 0 20px 60px rgba(29,27,56,.12); }
.login-tabs { background: var(--md-surface-low); }
.login-tabs button.active { background: #fff; color: var(--md-on-surface); box-shadow: 0 1px 6px rgba(0,0,0,.06); }
.google-btn { background: var(--md-surface-low); border: 0; }
.google-btn:hover { background: var(--md-surface-container); }

/* dark counterpart */
:root[data-theme="dark"] {
  --md-primary: #bfc1ff;
  --md-primary-container: #3032e8;
  --md-primary-fixed: #1e1b4b;
  --md-on-primary-fixed: #e1e0ff;
  --md-secondary-container: #c8f31d;
  --md-on-secondary-container: #171e00;
  --md-tertiary-fixed: #2c1d55;
  --md-surface: #141317;
  --md-surface-lowest: #1b1b1f;
  --md-surface-low: #232228;
  --md-surface-container: #2b2a31;
  --md-surface-high: #33323a;
  --md-surface-highest: #3b3a43;
  --md-on-surface: #f2f0f4;
  --md-on-surface-variant: #c6c4d9;
  --md-outline: #918fa3;
  --md-outline-variant: #454556;
  --md-error: #ffb4ab;
  --md-error-container: #93000a;
  --md-inverse-surface: #e3e2e6;
  --md-inverse-on-surface: #1b1b1f;
  --brand-1: #bfc1ff;
  --brand-2: #a5a7ff;
  --brand-3: #cdbdff;
  --ux-page: var(--md-surface);
  --ux-surface: var(--md-surface-lowest);
  --ux-surface-2: var(--md-surface-low);
  --ux-surface-3: var(--md-surface-container);
  --ux-ink: var(--md-on-surface);
  --ux-ink-2: var(--md-on-surface-variant);
  --ux-ink-3: var(--md-outline);
  --ux-line: #33323a;
  --ux-line-2: var(--md-outline-variant);
  --ux-accent: var(--md-primary);
  --ux-accent-2: var(--md-primary-container);
  --ux-accent-soft: rgba(191,193,255,.14);
  --accent: var(--md-primary);
  --accent-hover: #d8d9ff;
  --accent-soft: rgba(191,193,255,.14);
  --accent-line: rgba(191,193,255,.30);
  --green: var(--md-secondary-container);
  --green-soft: rgba(200,243,29,.12);
  --green-line: rgba(200,243,29,.30);
  --red: var(--md-error);
  --red-soft: var(--md-error-container);
  --red-line: rgba(255,180,171,.30);
  --purple: #cdbdff;
  --purple-soft: var(--md-tertiary-fixed);
  --shadow-xs: 0 1px 8px rgba(0,0,0,.35);
  --shadow-sm: 0 6px 22px rgba(0,0,0,.42);
  --ring: 0 0 0 3px rgba(191,193,255,.22);
}
[data-theme="dark"] body { background: var(--md-surface); }
[data-theme="dark"] .sidebar { background: var(--md-surface-lowest); box-shadow: 0 1px 8px rgba(0,0,0,.35); }
[data-theme="dark"] .topbar { background: rgba(20,19,23,.88); box-shadow: 0 1px 8px rgba(0,0,0,.35); }
[data-theme="dark"] :is(.panel,.bento-card,.bento-stats .stat,.page-stats .stat,.recent-item,.card,.plan-card,.llm-card,.kanban-card,.email-template-card,.table-wrap,.filters,.side-user,.drawer,.modal-card,.chat-panel,#smtpForm,.preview-box,.folder-import,.login-card) {
  background: var(--md-surface-lowest);
  border-color: transparent;
}
[data-theme="dark"] .bento-hero { background: var(--md-primary-fixed); }
[data-theme="dark"] .chat-messages { background: var(--md-surface-low); }
[data-theme="dark"] .chat-msg .chat-bubble { background: #232228; }
[data-theme="dark"] .chat-msg.user .chat-bubble { background: var(--md-primary-container); color: #fff; }
[data-theme="dark"] .kanban-col { background: var(--md-surface-low); }
[data-theme="dark"] .dropzone { background: var(--md-surface-lowest); border-color: var(--md-outline-variant); }
[data-theme="dark"] .btn { background: var(--md-primary-container); color: #fff; }
[data-theme="dark"] .btn:hover { background: #1e1bdd; color: #fff; }
[data-theme="dark"] .btn.ghost { background: var(--md-surface-low); color: var(--md-on-surface); }
[data-theme="dark"] .btn.ghost:hover { background: var(--md-surface-container); }
[data-theme="dark"] .btn.danger { background: var(--md-error-container); color: var(--md-error); }
[data-theme="dark"] .logo,
[data-theme="dark"] .avatar { background: var(--md-primary-container); color: #fff; }
[data-theme="dark"] .side-item.active { background: var(--md-primary-container); color: #fff; box-shadow: 0 0 0 3px rgba(48,50,232,.28); }
[data-theme="dark"] .side-item.active svg { stroke: #fff; }
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .lang-select,
[data-theme="dark"] .mobile-menu-btn { background: var(--md-surface-low); color: var(--md-on-surface-variant); }
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea { background: var(--md-surface-low); color: var(--md-on-surface); border-color: transparent; }
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus { background: var(--md-surface-container); border-color: var(--md-primary); }
[data-theme="dark"] .toast { background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); }
[data-theme="dark"] .login-body { background: var(--md-surface); }
[data-theme="dark"] .login-card { background: var(--md-surface-lowest); }
[data-theme="dark"] .login-tabs { background: var(--md-surface-low); }
[data-theme="dark"] .login-tabs button.active { background: var(--md-surface-container); color: var(--md-on-surface); }
[data-theme="dark"] .google-btn { background: var(--md-surface-low); }

/* login controls layout */
.login-controls {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}
.login-controls .login-lang,
.login-controls .login-theme { position: static; top: auto; right: auto; }
.login-brand { padding-right: 118px; }
@media (max-width: 520px) {
  .login-controls { position: static; justify-content: flex-end; margin-bottom: 14px; }
  .login-brand { padding-right: 0; }
}

/* ==========================================================================
   Readability pass — Vietnamese needs a font with full diacritics
   ========================================================================== */
:root { --muted: #5f5e70; --ux-ink-3: #6f6e7e; }
:root[data-theme="dark"] { --muted: #c6c4d9; --ux-ink-3: #918fa3; }

h1, h2, h3, h4,
.topbar h1,
.bento-hero h2,
.billing-plan-name,
.settings-plan-name,
.stat b,
.plan-price,
.user-stat b {
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: -.025em;
}
.panel-head h2,
.card h3 {
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.brand h1,
.login-brand h1 {
  font-family: Syne, "Plus Jakarta Sans", sans-serif;
}

.stack label,
.form-grid label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--md-on-surface-variant);
}
.hint, .meta, .topbar p, .data-table th, .brand p { color: var(--muted); }

/* chat selectors: avoid clipped model/context text */
.chat-tools select { min-width: 170px; max-width: 320px; }
#chatModel { min-width: 290px; max-width: 360px; }
@media (max-width: 980px) {
  #chatModel, .chat-tools select { min-width: 0; width: 100%; max-width: none; }
}

/* dashboard analytics cards */
.metric-hero { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 14px; }
.metric-hero b { font-family: "Plus Jakarta Sans", sans-serif; font-size: 34px; line-height: 1; font-weight: 800; letter-spacing: -.04em; }
.metric-hero span { color: var(--muted); font-size: 12px; font-weight: 600; }
.metric-legend { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 10px; color: var(--muted); font-size: 11px; font-weight: 600; }
.metric-legend span { display: inline-flex; align-items: center; gap: 5px; }
.metric-legend b { color: var(--ink); font-weight: 700; }
.metric-legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.metric-legend .dot.junior { background: var(--md-tertiary-fixed-dim); }
.metric-legend .dot.mid { background: var(--md-primary-container); }
.metric-legend .dot.senior { background: var(--md-secondary-container); }
.metric-stacked { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--md-surface-container); margin-bottom: 14px; }
.metric-stacked span { height: 100%; width: 0; transition: width .4s ease; }
.metric-stacked .seg.junior { background: var(--md-tertiary-fixed-dim); }
.metric-stacked .seg.mid { background: var(--md-primary-container); }
.metric-stacked .seg.senior { background: var(--md-secondary-container); }
.metric-foot { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 11px; margin-top: auto; }
.metric-foot b { color: var(--ink); font-weight: 700; }
.metric-row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; color: var(--muted); font-size: 12px; font-weight: 600; }
.metric-row b { color: var(--ink); font-weight: 800; }
.metric-progress { height: 8px; border-radius: 999px; overflow: hidden; background: var(--md-surface-container); margin-top: 6px; }
.metric-progress span { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--md-primary-container); transition: width .4s ease; }
.metric-progress span.lime { background: var(--md-secondary-container); }
.metric-progress span.tertiary { background: var(--md-tertiary-container); }
.activity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; height: 100%; }
.activity-grid > div { background: var(--md-surface-low); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.activity-grid b { display: block; font-family: "Plus Jakarta Sans", sans-serif; font-size: 24px; line-height: 1.1; font-weight: 800; letter-spacing: -.03em; }
.activity-grid span { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
[data-theme="dark"] .activity-grid > div { background: var(--md-surface-container); }

/* candidate dashboard: two analytics cards instead of three */
@media (min-width: 981px) {
  body.role-candidate #dashExperience,
  body.role-candidate #dashQuality { grid-column: span 6; }
}

/* active subscription card */
.subscription-card {
  background: #2f3034 !important;
  color: #f2f0f4;
  border: 0;
  display: flex;
  flex-direction: column;
  min-height: 210px;
}
.sub-head { display: flex; align-items: center; gap: 8px; color: rgba(242, 240, 244, .72); font-size: 10px; font-weight: 800; letter-spacing: .10em; text-transform: uppercase; }
.sub-dot { width: 8px; height: 8px; border-radius: 50%; background: #c8f31d; box-shadow: 0 0 0 3px rgba(200, 243, 29, .16); }
.subscription-card h3 { margin: 10px 0 0; color: #fff; font-family: "Plus Jakarta Sans", sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.sub-usage { display: flex; align-items: baseline; gap: 5px; margin-top: 4px; }
.sub-usage b { font-family: "Plus Jakarta Sans", sans-serif; font-size: 34px; line-height: 1; font-weight: 800; letter-spacing: -.04em; color: #fff; }
.sub-usage span { color: rgba(242, 240, 244, .62); font-size: 12px; font-weight: 600; }
.sub-bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .14); overflow: hidden; margin: 16px 0 10px; }
.sub-bar span { display: block; width: 0; height: 100%; border-radius: 999px; background: #c8f31d; transition: width .4s ease; }
.sub-foot { color: rgba(242, 240, 244, .68); font-size: 11px; margin-bottom: 14px; }
.sub-btn { margin-top: auto; width: 100%; min-height: 38px; border: 0; border-radius: 10px; background: #c8f31d; color: #171e00; font-family: "Plus Jakarta Sans", sans-serif; font-size: 12px; font-weight: 800; cursor: pointer; transition: background .2s ease; }
.sub-btn:hover { background: #d9ff4d; }
[data-theme="dark"] .subscription-card { background: #1b1b1f !important; border: 1px solid #33323a; }

/* wide recent CVs card */
.recent-list-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; gap: 10px; }
.recent-list-wide .recent-item { padding: 12px 14px; }
@media (max-width: 760px) {
  .recent-list-wide { grid-template-columns: 1fr; }
}

/* recent CVs + extracted skills split */
.bento-page > .eq-8 { grid-column: span 8; }
@media (max-width: 1200px) {
  .bento-page > .eq-8,
  .bento-page > .skills-extracted { grid-column: span 12; }
}
.skill-chart { display: grid; gap: 13px; margin-top: 2px; }
.skill-row-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.skill-row-head span { display: flex; align-items: center; gap: 7px; min-width: 0; font-weight: 600; color: var(--ink); }
.skill-row-head b { flex: 0 0 auto; color: var(--muted); font-size: 10.5px; font-weight: 700; }
.skill-row-head .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--md-primary-container); flex: 0 0 7px; }
.skill-bar { height: 7px; border-radius: 999px; background: var(--md-surface-container); overflow: hidden; margin-top: 5px; }
.skill-bar span { display: block; height: 100%; border-radius: 999px; background: var(--md-primary-container); transition: width .4s ease; }
.skill-row:nth-child(3n) .skill-row-head .dot,
.skill-row:nth-child(3n) .skill-bar span { background: var(--md-secondary-container); }
.skill-row:nth-child(3n + 2) .skill-row-head .dot,
.skill-row:nth-child(3n + 2) .skill-bar span { background: var(--md-tertiary-container); }

/* brand mark image */
.logo {
  background: #fff !important;
  padding: 2px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(48, 50, 232, .20);
}
.logo img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 8px; }
[data-theme="dark"] .logo { background: #fff !important; }

/* email tabs + live preview */
.email-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border-radius: 14px;
  background: var(--md-surface-low);
  scrollbar-width: none;
}
.email-tabs::-webkit-scrollbar { display: none; }
.email-tab {
  border: 0;
  border-radius: 10px;
  padding: 9px 18px;
  background: transparent;
  color: var(--muted);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.email-tab:hover { color: var(--ink); }
.email-tab.active {
  background: var(--md-surface-lowest);
  color: var(--md-primary-container);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .07);
}
.email-tab-panel[hidden] { display: none !important; }
.email-preview-card .email-preview-wrap {
  padding: 0;
  border: 1px solid var(--ux-line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  min-height: 440px;
}
.email-preview-card #emailPreviewFrame {
  width: 100%;
  height: 440px;
  border: 0;
  border-radius: 12px;
  background: #fff;
}
@media (max-width: 760px) {
  .email-tabs { width: 100%; }
  .email-tab { flex: 1 1 auto; padding: 9px 12px; }
  .email-preview-card .email-preview-wrap { min-height: 340px; }
  .email-preview-card #emailPreviewFrame { height: 340px; }
}

/* applications list grouped by status */
.pipeline-list { display: flex; flex-direction: column; gap: 16px; }
.pipeline-status-group {
  border: 1px solid var(--ux-line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--md-surface-lowest);
}
.pipeline-status-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  background: var(--md-surface-low);
  border-bottom: 1px solid var(--ux-line);
}
.pipeline-status-head h4 { flex: 1; margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 12.5px; font-weight: 800; color: var(--ink); }
.pipeline-status-head .badge { font-size: 10px; }
.pipeline-status-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; background: var(--md-primary-container); }
.pipeline-status-dot.tone-blue { background: #3b82f6; }
.pipeline-status-dot.tone-cyan { background: #06b6d4; }
.pipeline-status-dot.tone-amber { background: #f59e0b; }
.pipeline-status-dot.tone-purple { background: #8b5cf6; }
.pipeline-status-dot.tone-green { background: #22c55e; }
.pipeline-status-dot.tone-red { background: #ef4444; }
.pipeline-rows { display: flex; flex-direction: column; }
.pipeline-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 160px auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ux-line);
  cursor: pointer;
  transition: background .18s ease;
}
.pipeline-row:last-child { border-bottom: 0; }
.pipeline-row:hover { background: var(--md-surface-low); }
.pipeline-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pipeline-row-main b { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pipeline-row-main .meta { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pipeline-date { color: var(--muted); font-size: 11px; white-space: nowrap; }
.pipeline-row .kanban-status { min-height: 34px; width: 160px; }
.pipeline-row .kanban-del { width: 28px; height: 28px; border-radius: 8px; }
.pipeline-empty { padding: 16px; color: var(--muted); font-size: 12px; }
@media (max-width: 760px) {
  .pipeline-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; }
  .pipeline-date { display: none; }
  .pipeline-row .kanban-status { grid-column: 1 / -1; width: 100%; }
}

/* pipeline header controls */
#pipelineCompany { width: auto; min-width: 200px; max-width: 280px; }
.panel-head .head-actions { flex-wrap: nowrap; }
@media (max-width: 760px) {
  .panel-head .head-actions { flex-wrap: wrap; }
  #pipelineCompany { width: 100%; max-width: none; }
}

/* login header: no overlapping/clipped brand text */
.brand h1,
.login-brand h1 {
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: -.03em;
}
.login-controls {
  position: static;
  top: auto;
  right: auto;
  justify-content: flex-end;
  margin-bottom: 12px;
}
.login-brand { padding-right: 0; }

/* ==========================================================================
   Subscription & quota page (Jobbie format)
   ========================================================================== */
.billing-page { display: flex; flex-direction: column; gap: 22px; }
.billing-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.billing-kicker { color: #B22200; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.billing-title { margin: 6px 0 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 40px; line-height: 1.04; font-weight: 800; letter-spacing: -.045em; color: var(--ink); }
.billing-hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.billing-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.billing-pill.lime { background: #C8F31D; color: #171E00; }
.billing-pill.pk { background: #ffdad2; color: #8c1900; }
.billing-link { border: 0; background: none; color: #B22200; font-family: "Plus Jakarta Sans", sans-serif; font-size: 12px; font-weight: 800; cursor: pointer; padding: 0; }
.billing-link:hover { text-decoration: underline; }
.billing-card { background: var(--surface); border: 1px solid var(--line); color: var(--ink); border-radius: 28px; box-shadow: 0 4px 20px -2px rgba(27, 27, 31, .04); padding: 26px 28px; transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s; }
.billing-card:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -14px rgba(222, 48, 5, .14); }
.billing-caption { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.billing-muted { color: var(--muted); font-size: 12px; }
.billing-usage-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.billing-usage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; margin-top: 18px; }
.billing-usage-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: 14px; color: var(--ink); }
.billing-usage-line b { font-weight: 700; }
.billing-progress { height: 10px; border-radius: 999px; background: var(--surface-muted); overflow: hidden; margin-bottom: 9px; }
.billing-progress span { display: block; width: 0; height: 100%; border-radius: 999px; background: #C8F31D; transition: width .6s cubic-bezier(.16,1,.3,1); }
.billing-progress span.red { background: #DE3005; }
.billing-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; align-items: stretch; }
.billing-plan { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 4px 20px -2px rgba(27, 27, 31, .04); transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s; }
.billing-plan:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -14px rgba(222, 48, 5, .14); }
.billing-plan.current { border: 2px solid #DE3005; background: #fff6f3; }
.billing-plan-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.billing-plan-name { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.billing-plan-price { font-family: "Plus Jakarta Sans", sans-serif; font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -.045em; color: var(--ink); }
.billing-plan-price small { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.billing-plan-features { margin: 0; flex: 1; color: var(--ink-soft); font-size: 13px; line-height: 1.6; }
.billing-btn { margin-top: 8px; width: 100%; min-height: 42px; border: 0; border-radius: 999px; padding: 11px 20px; font-family: "Plus Jakarta Sans", sans-serif; font-size: 13px; font-weight: 800; cursor: pointer; transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .2s; }
.billing-btn:hover:not(:disabled) { transform: scale(1.03); }
.billing-btn.soft { background: var(--surface-muted); color: var(--ink); }
.billing-btn.ink { background: #1b1b1f; color: #fff; }
.billing-btn:disabled { opacity: .55; cursor: default; }
.billing-history-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.billing-history-head b { font-family: "Plus Jakarta Sans", sans-serif; font-size: 18px; font-weight: 800; color: var(--ink); }
.billing-history-row { display: grid; grid-template-columns: 1.2fr 1.6fr 1fr 1fr; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink); }
.billing-history-row:last-child { border-bottom: 0; }
.billing-history-row.head { padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.billing-history-row span { min-width: 0; }
.billing-empty { margin-top: 12px; padding: 28px 18px; border: 1px dashed var(--line-strong); border-radius: 16px; background: var(--surface-soft); text-align: center; color: var(--muted); font-size: 13px; }
@media (max-width: 760px) {
  .billing-title { font-size: 30px; }
  .billing-card { padding: 20px; border-radius: 20px; }
  .billing-plans { grid-template-columns: 1fr; }
  .billing-history-row { grid-template-columns: 1fr 1fr; gap: 6px 12px; }
  .billing-history-row.head { display: none; }
}

[data-theme="dark"] .billing-plan.current { background: #2a1a16; }
[data-theme="dark"] .billing-card,
[data-theme="dark"] .billing-plan { box-shadow: none; }
[data-theme="dark"] .billing-btn.ink { background: var(--md-primary-container); color: #fff; }
[data-theme="dark"] .billing-empty { background: var(--md-surface-low); }

[data-theme="dark"] .billing-link { color: #ff9a80; }

/* workspace / team members */
.team-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.team-member { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); }
.team-member-main { flex: 1; min-width: 0; }
.team-member-main b { display: block; color: var(--ink); font-size: 13px; font-weight: 700; }
.team-member-main small { display: block; color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.team-member .badge { flex: 0 0 auto; }
.team-member .btn.danger.small { flex: 0 0 auto; }
.team-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.team-add input { flex: 1; min-width: 220px; }
.team-add .btn { flex: 0 0 auto; }
[data-theme="dark"] .team-member { background: var(--md-surface-low); }