/* =========================================================
   StudyQ design system
   "Exercise book" identity — ink navy + warm paper + marigold
   Serif headings (Fraunces) / humanist sans UI (IBM Plex Sans)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root{
  --ink:        #1B2A4A;
  --ink-80:     #33436A;
  --ink-60:     #5B6B85;
  --ink-30:     #A9B3C6;
  --paper:      #FBF8F2;
  --paper-dim:  #F2EDE1;
  --line:       #DFD6C2;
  --line-strong:#C9BC9E;
  --marigold:   #E29A34;
  --marigold-dk:#B87A22;
  --marigold-tint:#FBEBD3;
  --leaf:       #3F7859;
  --leaf-tint:  #E4F0E9;
  --rust:       #B24C3B;
  --rust-tint:  #F6E4E0;
  --white:      #FFFFFF;

  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --shadow-card: 0 1px 0 rgba(27,42,74,0.04), 0 8px 20px -14px rgba(27,42,74,0.35);
  --shadow-pop:  0 12px 32px -12px rgba(27,42,74,0.35);

  --font-display: 'Fraunces', Georgia, serif;
  --font-ui: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.01em;
}
p{ margin:0; }
a{ color: inherit; text-decoration:none; }
button{ font-family: inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }

:focus-visible{
  outline: 2.5px solid var(--marigold-dk);
  outline-offset: 2px;
}

/* ---------- layout shells ---------- */
.page{ min-height:100vh; display:flex; flex-direction:column; }
.container{ max-width: 1180px; margin: 0 auto; padding: 0 32px; width:100%; }

/* ---------- top marketing nav ---------- */
.topnav{
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.topnav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height: 100px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-display);
  font-weight:700; font-size:1.25rem; color: var(--ink);
  width:26%;
}
.brand-mark{
  width:34px; height:34px; border-radius:8px;
  background: var(--ink);
  display:flex; align-items:center; justify-content:center;
  color: var(--marigold);
  font-family: var(--font-display); font-weight:700; font-size:1.05rem;
}
.navlinks{ display:flex; gap:32px; }
.navlinks a{
  font-size:0.95rem; color: var(--ink-60); font-weight:500;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.navlinks a:hover{ color: var(--ink); }
.navactions{ display:flex; gap:12px; align-items:center; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 11px 20px;
  border-radius: var(--radius-md);
  font-size: 0.95rem; font-weight:600;
  border: 1.5px solid transparent;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--ink); color: var(--paper); }
.btn-primary:hover{ background: var(--ink-80); }
.btn-marigold{ background: var(--marigold); color: var(--ink); }
.btn-marigold:hover{ background: var(--marigold-dk); color: var(--white); }
.btn-outline{ background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-outline:hover{ border-color: var(--ink); }
.btn-ghost{ background: transparent; color: var(--ink-60); }
.btn-ghost:hover{ color: var(--ink); }
.btn-block{ width:100%; }
.btn-sm{ padding: 7px 14px; font-size:0.85rem; border-radius: var(--radius-sm); }
.btn-danger-text{ color: var(--rust); background:transparent; }

/* ---------- cards & surfaces ---------- */
.card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.card-pad{ padding: 28px; }
.hairline{ border-top: 1px solid var(--line); }

/* ---------- form elements ---------- */
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.field label{ font-size:0.82rem; font-weight:600; color: var(--ink-80); }
.field .hint{ font-size:0.78rem; color: var(--ink-60); font-weight:400; }
.input, .select{
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  padding: 11px 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  width:100%;
}
.input:focus, .select:focus{ border-color: var(--ink); outline:none; }
.input::placeholder{ color: var(--ink-30); }
.select{ appearance:none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235B6B85' stroke-width='1.6' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 14px center; padding-right: 36px; }
.row-2{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.phone-field{ display:flex; gap:8px; }
.phone-field .code{ width:76px; flex:none; }
.checkline{ display:flex; align-items:flex-start; gap:9px; font-size:0.88rem; color: var(--ink-80); }
.checkline input{ margin-top:3px; accent-color: var(--ink); }
.password-wrap{ position:relative; }
.password-wrap .input{ padding-right: 40px; }
.eye{ position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--ink-60); font-size:24px; }

/* ---------- badges / status ---------- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding: 4px 11px; border-radius: 100px;
  font-size: 0.76rem; font-weight:600;
}
.badge-dot{ width:6px; height:6px; border-radius:50%; }
.badge-completed{ background: var(--leaf-tint); color:#265B3E; }
.badge-completed .badge-dot{ background: var(--leaf); }
.badge-processing{ background: var(--marigold-tint); color:#8C5E14; }
.badge-processing .badge-dot{ background: var(--marigold-dk); }
.badge-pending{ background: var(--paper-dim); color: var(--ink-60); }
.badge-pending .badge-dot{ background: var(--ink-30); }
.badge-hard{ background: var(--rust-tint); color:#8A3527; }
.badge-medium{ background: var(--marigold-tint); color:#8C5E14; }
.badge-easy{ background: var(--leaf-tint); color:#265B3E; }

/* ---------- app shell (dashboards) ---------- */
.app{ display:flex; min-height:100vh; }
.sidebar{
  width: 240px; flex: none;
  background: var(--ink);
  color: var(--paper);
  padding: 22px 16px;
  display:flex; flex-direction:column;
  gap: 26px;
}
.sidebar .brand{ color: var(--paper); padding: 0 10px; }
.sidebar .brand .brand-mark{ background: var(--marigold); color: var(--ink); }
.sidenav{ display:flex; flex-direction:column; gap:2px; }
.sidenav a{
  display:flex; align-items:center; gap:12px;
  padding: 11px 12px; border-radius: var(--radius-sm);
  font-size:0.92rem; color: #C7CFE0; font-weight:500;
}
.sidenav a .ico{ width:18px; text-align:center; opacity:0.9; }
.sidenav a:hover{ background: rgba(255,255,255,0.06); color: var(--paper); }
.sidenav a.active{ background: var(--marigold); color: var(--ink); font-weight:600; }
.sidebar-foot{ margin-top:auto; }

.main{ flex:1; background: var(--paper-dim); min-width:0; }
.topbar{
  height: 74px; padding: 0 34px;
  display:flex; align-items:center; justify-content:space-between;
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.content{ padding: 30px 34px 60px; }

.eyebrow{ font-size:0.78rem; color: var(--ink-60); font-weight:600; }
.subtle{ color: var(--ink-60); }

/* ---------- stat tiles ---------- */
.stats-row{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; margin-bottom: 26px; }
.stat{
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius-md);
  padding: 18px 18px 16px;
}
.stat .stat-label{ font-size:0.78rem; color: var(--ink-60); font-weight:600; margin-bottom:10px; }
.stat .stat-value{ font-family: var(--font-display); font-size: 1.9rem; font-weight:600; }
.stat.tone-marigold .stat-value{ color: var(--marigold-dk); }
.stat.tone-leaf .stat-value{ color: var(--leaf); }
.stat.tone-ink .stat-value{ color: var(--ink); }

/* ---------- table ---------- */
.table-wrap{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius-md); overflow:hidden; }
table{ width:100%; border-collapse:collapse; font-size:0.9rem; }
thead th{
  text-align:left; font-size:0.76rem; font-weight:600; color: var(--ink-60);
  padding: 13px 18px; border-bottom: 1px solid var(--line); background: var(--paper-dim);
}
tbody td{ padding: 14px 18px; border-bottom: 1px solid var(--line); color: var(--ink-80); }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background: #FCFAF4; }
.link-action{ color: var(--ink); font-weight:600; font-size:0.85rem; border-bottom:1.5px solid var(--marigold); }

/* ---------- pricing ---------- */
.price-card{
  border:1.5px solid var(--line); border-radius: var(--radius-lg); padding: 22px; background: var(--white);
}
.price-card.featured{ border-color: var(--ink); position:relative; }
.price-amount{ font-family: var(--font-display); font-size:2.1rem; font-weight:600; margin: 10px 0 2px; }
.price-amount .per{ font-family: var(--font-ui); font-size:0.85rem; font-weight:500; color: var(--ink-60); }

/* ---------- chapter row (multi-select) ---------- */
.chapter-row{
  display:grid; grid-template-columns: 90px 1fr 1fr 1fr 1fr 32px;
  gap:10px; align-items:end; margin-bottom: 14px;
}
.chapter-row .tag{
  font-size:0.72rem; font-weight:700; color: var(--marigold-dk);
  background: var(--marigold-tint); padding:9px 10px; border-radius: var(--radius-sm);
  text-align:center; align-self:center;
}
.remove-x{ color: var(--rust); font-weight:700; align-self:center; text-align:center; font-size:1rem; }

/* ---------- misc ---------- */
.divider-word{ display:flex; align-items:center; gap:12px; color: var(--ink-60); font-size:0.85rem; margin: 18px 0; }
.divider-word::before, .divider-word::after{ content:""; flex:1; height:1px; background: var(--line); }
.footer-note{
  background: var(--ink); color: var(--paper-dim);
  text-align:center; font-size:0.82rem; padding: 13px 20px;
}
.pill-step{
  display:flex; align-items:center; gap:10px; font-size:0.85rem; color: var(--ink-80);
}
.pill-step .num{
  width:26px; height:26px; border-radius:50%; background: var(--ink); color: var(--paper);
  display:flex; align-items:center; justify-content:center; font-size:0.78rem; font-weight:700; flex:none;
}