/* ==========================================================================
   MasterNote — light, Persian-first design system.
   Order: font → tokens → reset → shell → components → pages → responsive.
   ========================================================================== */

@font-face {
  font-family: 'Estedad';
  src: url("../fonts/Estedad-Variable.440f276eca2e.woff2") format('woff2-variations'),
       url("../fonts/Estedad-Variable.440f276eca2e.woff2") format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f5f6fa;
  --bg-tint: #eef0f8;
  --surface: #ffffff;
  --surface-2: #fafbfd;
  --border: #e6e8f0;
  --border-strong: #d5d9e6;

  --ink: #141824;
  --ink-2: #454c5f;
  --muted: #858da3;

  --brand: #5b5bd6;
  --brand-ink: #4342c0;
  --brand-soft: #eeeeff;
  --accent: #0ea5e9;

  --easy: #17a34a;
  --easy-soft: #e8f7ee;
  --medium: #e79b0b;
  --medium-soft: #fdf4e3;
  --hard: #e11d48;
  --hard-soft: #fdeaef;

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;

  --shadow-xs: 0 1px 2px rgba(20, 24, 36, .05);
  --shadow-sm: 0 2px 8px rgba(20, 24, 36, .05);
  --shadow: 0 8px 24px rgba(20, 24, 36, .07);
  --shadow-lg: 0 18px 50px rgba(20, 24, 36, .12);

  --header-h: 62px;
  --maxw: 1180px;
}

* { box-sizing: border-box; }

/* Several components below set `display`, which would otherwise beat the user
   agent's [hidden] rule and leave "hidden" overlays covering the page. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Estedad', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* A backstop, not a fix: the layout is built to fit at every width, but an
   RTL viewport rounds a stray pixel or two and a phone would answer with a
   sideways wobble. `clip`, not `hidden`, so the sticky header still sticks. */
html { overflow-x: clip; }

h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; line-height: 1.5; letter-spacing: -.01em; }
p { margin: 0 0 .9em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
hr { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }

::selection { background: #dcdcfb; }

.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8;
        stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: var(--maxw); margin: 0 auto; height: var(--header-h);
  padding: 0 20px; display: flex; align-items: center; gap: 18px;
}

.brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; font-weight: 800; font-size: 16px; box-shadow: 0 4px 12px rgba(99, 102, 241, .35);
}
.brand-mark svg { width: 58%; height: 58%; fill: #fff; }
.brand-text { font-size: 17px; font-weight: 500; letter-spacing: -.02em; }
.brand-text b { font-weight: 800; }

.topnav { display: flex; align-items: center; gap: 4px; }
.topnav > a, .topnav summary {
  padding: 7px 12px; border-radius: var(--radius-sm); color: var(--ink-2);
  font-size: 14.5px; font-weight: 500; cursor: pointer; transition: .15s;
  display: flex; align-items: center; gap: 6px;
}
.topnav > a:hover, .topnav summary:hover { background: var(--bg-tint); color: var(--ink); }
.topnav > a.is-active { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }

.search-box {
  margin-inline-start: auto; position: relative; display: flex; align-items: center;
  background: var(--bg-tint); border: 1px solid transparent; border-radius: 999px;
  padding: 0 14px; height: 38px; width: 260px; transition: .18s;
}
.search-box:focus-within { background: #fff; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(91, 91, 214, .1); width: 300px; }
.search-box .icon { color: var(--muted); flex-shrink: 0; }
/* The attribute selector is load-bearing: the generic `input[type=search]`
   rule in the Forms section has the same specificity as `.search-box input`
   and comes later, so without it the field draws its own bordered white box
   and bursts out of the pill. */
.search-box input[type=search] {
  appearance: none; -webkit-appearance: none;
  border: none; background: none; box-shadow: none; outline: none;
  width: 100%; height: 100%; padding: 0 8px 0 0; border-radius: 0; font-size: 14px;
}
.search-box input[type=search]:focus { border: none; box-shadow: none; }
.search-box input[type=search]::-webkit-search-decoration,
.search-box input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }

.topbar-actions { display: flex; align-items: center; gap: 6px; }
.icon-btn {
  position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  color: var(--ink-2); border: none; background: none; cursor: pointer; transition: .15s;
}
.icon-btn:hover { background: var(--bg-tint); color: var(--ink); }
.badge {
  position: absolute; top: 2px; inset-inline-start: 2px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--hard); color: #fff; font-size: 10.5px; font-weight: 700;
  display: grid; place-items: center; border: 2px solid #fff; line-height: 1;
}
.dot-badge {
  background: var(--hard); color: #fff; border-radius: 9px; padding: 0 6px;
  font-size: 11px; font-weight: 700; line-height: 17px;
}

/* Dropdowns built on <details> — no JS, closes via a click-away handler. */
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-panel {
  position: absolute; top: calc(100% + 8px); inset-inline-start: 0; min-width: 210px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 6px; z-index: 70;
  animation: pop .14s ease-out;
}
.menu--end .menu-panel { inset-inline-start: auto; inset-inline-end: 0; }
.menu-panel--wide { min-width: 330px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
@keyframes pop { from { opacity: 0; transform: translateY(-6px); } }
.menu-panel a, .menu-panel button {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: start;
  padding: 8px 10px; border-radius: 9px; font-size: 14px; color: var(--ink-2);
  border: none; background: none; cursor: pointer; transition: .12s;
}
.menu-panel a:hover, .menu-panel button:hover { background: var(--bg-tint); color: var(--ink); }
.menu-danger:hover { background: var(--hard-soft) !important; color: var(--hard) !important; }
.menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.menu-head-name { font-weight: 700; }
.menu-head-sub { font-size: 12.5px; color: var(--muted); }
.menu-course-icon { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; }
.avatar-summary { cursor: pointer; display: grid; place-items: center; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.page { max-width: var(--maxw); margin: 0 auto; padding: 28px 20px 80px; }
.page--narrow { max-width: 780px; }
.page--wide { max-width: 1320px; }

.split { display: grid; grid-template-columns: 260px 1fr; gap: 26px; align-items: start; }
/* Without this a grid item refuses to go below its widest child — one code
   block or long formula then widens the column, the page, and the phone's
   whole layout. Every grid in the app needs it, not just this one. */
.split > *, .stack > *, .course-grid > *, .stat-grid > *, .manage-grid > *,
.word-grid > *, .uploads-grid > *, .chapter-grid > * { min-width: 0; }
/* Content first, a sidebar beside it. The width lives here, not in a style
   attribute, so the media queries below can actually collapse it. */
.split--aside { grid-template-columns: minmax(0, 1fr) 300px; }
.stack { display: grid; gap: 16px; }
.row { display: flex; align-items: center; gap: 10px; }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.spacer { flex: 1; }

.strip { padding: 10px 20px; text-align: center; font-size: 13.5px; }
.strip--warn { background: #fff7e6; color: #8a5b00; border-bottom: 1px solid #ffe9bd; }

.flash-wrap { position: fixed; top: calc(var(--header-h) + 14px); inset-inline: 0; z-index: 90;
              display: grid; gap: 8px; justify-items: center; pointer-events: none; padding-inline: 12px; }
.flash {
  pointer-events: auto; display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border); border-inline-start: 4px solid var(--brand);
  border-radius: var(--radius); padding: 10px 16px; box-shadow: var(--shadow-lg); font-size: 14px;
  animation: pop .2s ease-out;
}
.flash--success { border-inline-start-color: var(--easy); }
.flash--error { border-inline-start-color: var(--hard); }
.flash--warning { border-inline-start-color: var(--medium); }
.flash { max-width: 100%; }
.flash-close { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 20px; line-height: 1; }

.site-footer {
  text-align: center; color: var(--muted); font-size: 13px;
  padding: 28px 20px 40px; border-top: 1px solid var(--border); background: var(--surface-2);
}

/* --------------------------------------------------------------------------
   Primitives
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
}
.card--pad { padding: 20px 22px; }
.card--hover { transition: .18s; }
.card--hover:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-strong); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 40px; padding: 0 18px; border-radius: 11px; border: 1px solid transparent;
  font-size: 14.5px; font-weight: 600; cursor: pointer; transition: .15s; white-space: nowrap;
  background: var(--brand); color: #fff; box-shadow: 0 4px 12px rgba(91, 91, 214, .25);
}
.btn:hover { background: var(--brand-ink); transform: translateY(-1px); }
.btn:active { transform: none; }
.btn--ghost { background: var(--surface); color: var(--ink-2); border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.btn--ghost:hover { background: var(--bg-tint); color: var(--ink); }
.btn--quiet { background: none; color: var(--ink-2); box-shadow: none; }
.btn--quiet:hover { background: var(--bg-tint); color: var(--ink); }
.btn--danger { background: var(--hard); box-shadow: 0 4px 12px rgba(225, 29, 72, .25); }
.btn--danger:hover { background: #be123c; }
.btn--sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 9px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .55; pointer-events: none; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border-radius: 999px; background: var(--bg-tint); color: var(--ink-2);
  font-size: 12.5px; font-weight: 500;
}
.chip--brand { background: var(--brand-soft); color: var(--brand-ink); }
.chip--easy { background: var(--easy-soft); color: var(--easy); }
.chip--medium { background: var(--medium-soft); color: #9a6800; }
.chip--hard { background: var(--hard-soft); color: var(--hard); }

.avatar {
  display: inline-grid; place-items: center; border-radius: 50%; color: #fff;
  font-weight: 700; letter-spacing: 0; flex-shrink: 0; line-height: 1;
}

.muted { color: var(--muted); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.ltr { direction: ltr; }
.center { text-align: center; }

.section-title { display: flex; align-items: center; gap: 10px; margin: 30px 0 14px; font-size: 16.5px; }
.section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.breadcrumb { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); margin-bottom: 12px; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb .sep { opacity: .5; }

.empty {
  text-align: center; padding: 52px 24px; color: var(--muted);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-2);
}
.empty-icon { font-size: 34px; display: block; margin-bottom: 8px; }

.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 26px; }
.pagination a, .pagination span {
  min-width: 36px; height: 36px; padding: 0 10px; border-radius: 10px; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border); font-size: 13.5px; color: var(--ink-2);
}
.pagination a:hover { border-color: var(--brand); color: var(--brand); }
.pagination .is-current { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 700; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.field { margin-bottom: 16px; }
.field > label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.field .helptext { display: block; font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.field .errorlist { list-style: none; margin: 6px 0 0; padding: 0; color: var(--hard); font-size: 12.5px; }

input[type=text], input[type=password], input[type=email], input[type=search],
input[type=number], input[type=url], select, textarea {
  width: 100%; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 11px; padding: 10px 14px; outline: none; transition: .15s; font-size: 14.5px;
}
textarea { line-height: 1.9; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(91, 91, 214, .12); }
input::placeholder, textarea::placeholder { color: #aab1c2; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
         linear-gradient(135deg, var(--muted) 50%, transparent 50%);
         background-position: 14px calc(50% - 2px), 19px calc(50% - 2px);
         background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-inline-start: 34px; }
.color-input { padding: 4px; height: 42px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 22px; }
/* Search + selects + submit. Everything may shrink and wrap; nothing carries
   a pixel width that would push the page sideways. */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filter-bar__q { flex: 1 1 180px; min-width: 0; }
.filter-bar select { width: auto; min-width: 0; flex: 0 1 auto; }
.filter-bar .btn { flex: 0 0 auto; }

.tabs { display: flex; gap: 4px; background: var(--bg-tint); padding: 4px; border-radius: 12px;
         max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a, .tabs button {
  padding: 6px 14px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--ink-2);
  border: none; background: none; cursor: pointer; transition: .14s;
  flex: 0 0 auto; white-space: nowrap;
}
.tabs a:hover, .tabs button:hover { color: var(--ink); }
.tabs .is-active { background: var(--surface); color: var(--brand-ink); font-weight: 700; box-shadow: var(--shadow-xs); }

/* --------------------------------------------------------------------------
   Auth pages
   -------------------------------------------------------------------------- */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 40px 20px;
             background: radial-gradient(1000px 500px at 80% -10%, #e8e8ff, transparent),
                         radial-gradient(800px 500px at 10% 110%, #e0f5ff, transparent), var(--bg); }
.auth-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border);
             border-radius: 24px; box-shadow: var(--shadow-lg); padding: 34px 32px; }
.auth-head { text-align: center; margin-bottom: 26px; }
.auth-head .brand-mark { width: 46px; height: 46px; font-size: 22px; border-radius: 14px; margin: 0 auto 14px; }
.auth-head h1 { font-size: 21px; margin-bottom: 6px; }
.auth-alt { text-align: center; margin-top: 20px; font-size: 13.5px; color: var(--muted); }
.auth-alt a { color: var(--brand); font-weight: 600; }

/* --------------------------------------------------------------------------
   Landing
   -------------------------------------------------------------------------- */
.hero { min-height: 100vh; display: grid; place-items: center; padding: 60px 20px;
        background: radial-gradient(900px 480px at 75% -5%, #e9e9ff, transparent),
                    radial-gradient(700px 460px at 15% 105%, #dff3ff, transparent), var(--bg); }
.hero-inner { max-width: 720px; text-align: center; }
.hero .brand-mark { width: 60px; height: 60px; border-radius: 18px; font-size: 28px; margin: 0 auto 22px; }
.hero h1 { font-size: 38px; line-height: 1.35; margin-bottom: 14px; letter-spacing: -.03em; }
.hero h1 span { background: linear-gradient(120deg, #6366f1, #0ea5e9); -webkit-background-clip: text;
                background-clip: text; color: transparent; }
.hero p { font-size: 16.5px; color: var(--ink-2); max-width: 520px; margin: 0 auto 28px; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 52px; text-align: start; }
.hero-feature { background: rgba(255, 255, 255, .7); border: 1px solid var(--border); border-radius: var(--radius);
                padding: 18px; backdrop-filter: blur(6px); }
.hero-feature b { display: block; margin-bottom: 4px; }
.hero-feature span { font-size: 13px; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   Home
   -------------------------------------------------------------------------- */
.hello { margin-bottom: 22px; }
.hello h1 { font-size: 25px; letter-spacing: -.02em; }
.hello p { color: var(--muted); margin: 4px 0 0; font-size: 14px; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        padding: 16px 18px; box-shadow: var(--shadow-xs); }
.stat b { display: block; font-size: 25px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; }
.stat span { font-size: 13px; color: var(--muted); }

.course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.course-card { display: block; padding: 20px; border-radius: var(--radius-lg); background: var(--surface);
               border: 1px solid var(--border); box-shadow: var(--shadow-xs); position: relative;
               overflow: hidden; transition: .18s; }
.course-card::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px; background: var(--c); }
.course-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.course-icon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
               font-size: 21px; margin-bottom: 12px; }
.course-card h3 { font-size: 16.5px; margin-bottom: 4px; }
.course-card p { font-size: 13px; color: var(--muted); margin-bottom: 12px; min-height: 2.6em; }
.course-meta { display: flex; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.course-meta span { background: var(--bg-tint); border-radius: 999px; padding: 2px 10px; }

.author-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; }
.author-row .name { font-weight: 600; font-size: 14px; }
.author-row .count { margin-inline-start: auto; font-size: 12.5px; color: var(--muted); }

/* --------------------------------------------------------------------------
   Course / chapter
   -------------------------------------------------------------------------- */
.course-hero { border-radius: var(--radius-lg); padding: 26px 28px; margin-bottom: 24px; position: relative;
               overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.course-hero::before { content: ''; position: absolute; inset: 0; opacity: .07; background: var(--c); }
.course-hero > * { position: relative; }
.course-hero h1 { font-size: 26px; letter-spacing: -.02em; }
.course-hero p { color: var(--ink-2); margin: 6px 0 0; }
.course-hero .course-icon { background: #fff; box-shadow: var(--shadow-sm); flex-shrink: 0; }

.chapter-list { display: grid; gap: 10px; }
.chapter-item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--surface);
                border: 1px solid var(--border); border-radius: var(--radius); transition: .15s; }
.chapter-item:hover { border-color: var(--c, var(--brand)); transform: translateX(-3px); box-shadow: var(--shadow-sm); }
.chapter-num { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
               font-weight: 700; font-size: 14px; flex-shrink: 0; }
.chapter-item h3 { font-size: 15.5px; font-weight: 600; }
.chapter-arrow { color: var(--muted); margin-inline-start: auto; }

/* A gap between the rows: without it the active chapter's tint and the one
   under the cursor meet edge to edge and read as a single merged block. */
.side-nav { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 3px; }
.side-nav-title { font-size: 12.5px; font-weight: 700; color: var(--muted); padding: 0 10px 8px; }
.side-nav a { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 10px;
              font-size: 13.5px; color: var(--ink-2); transition: .12s; }
.side-nav a:hover { background: var(--bg-tint); color: var(--ink); }
.side-nav a.is-active { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
.side-nav .n { margin-inline-start: auto; font-size: 11.5px; color: var(--muted); }

.chapter-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.chapter-head h1 { font-size: 23px; letter-spacing: -.02em; }
.chapter-nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; margin-top: 28px; }
.chapter-nav .btn { min-width: 0; }

/* --------------------------------------------------------------------------
   Note card
   -------------------------------------------------------------------------- */
.note {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs); transition: .18s;
  /* Deliberately not overflow:hidden — that clipped the options dropdown at
     the card's edge. The footer rounds its own corners instead. */
  position: relative;
}
.note:hover { box-shadow: var(--shadow-sm); }
/* An open menu has to clear the cards that come after it in the flow. */
.note:has(details.menu[open]) { z-index: 30; }
.note--pinned { border-color: #ffd98e; box-shadow: 0 0 0 3px #fff7e6; }
.note-head { display: flex; align-items: center; gap: 11px; padding: 15px 20px 0; }
.note-author { line-height: 1.4; }
.note-author .name { font-weight: 600; font-size: 14px; }
.note-author .name:hover { color: var(--brand); }
.note-author .when { font-size: 12px; color: var(--muted); }
.note-head-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 4px; }
.note-title { padding: 12px 20px 0; font-size: 18px; letter-spacing: -.015em; overflow-wrap: anywhere; }
.note-title a:hover { color: var(--brand); }
.note-body { padding: 10px 20px 4px; position: relative; }
.note-body--clipped { max-height: 460px; overflow: hidden; }
.note-body--clipped::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 120px;
  background: linear-gradient(to top, #fff 18%, rgba(255, 255, 255, 0)); pointer-events: none; }
.note-expand { display: block; width: 100%; padding: 8px; border: none; background: none; cursor: pointer;
               color: var(--brand); font-weight: 600; font-size: 13.5px; }
.note-expand:hover { background: var(--brand-soft); }

.note-foot { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-top: 1px solid var(--border);
             background: var(--surface-2); flex-wrap: wrap;
             border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px); }

.rate { display: flex; align-items: center; gap: 6px; }
.rate-label { font-size: 12.5px; color: var(--muted); margin-inline-end: 2px; }
.rate-btn {
  display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface); cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); transition: .14s;
}
.rate-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-xs); }
.rate-btn .bul { width: 8px; height: 8px; border-radius: 50%; }
.rate-btn[data-level=easy] .bul { background: var(--easy); }
.rate-btn[data-level=medium] .bul { background: var(--medium); }
.rate-btn[data-level=hard] .bul { background: var(--hard); }
.rate-btn.is-on[data-level=easy] { background: var(--easy-soft); border-color: var(--easy); color: var(--easy); }
.rate-btn.is-on[data-level=medium] { background: var(--medium-soft); border-color: var(--medium); color: #9a6800; }
.rate-btn.is-on[data-level=hard] { background: var(--hard-soft); border-color: var(--hard); color: var(--hard); }

.donut-wrap { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.donut { width: 54px; height: 54px; flex-shrink: 0; }
.donut-legend { display: grid; gap: 1px; font-size: 11.5px; color: var(--ink-2); line-height: 1.6; }
.donut-legend i { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-inline-end: 5px; }
.donut-empty { font-size: 11.5px; color: var(--muted); max-width: 90px; line-height: 1.5; }

.like-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer; transition: .14s;
}
.like-btn .icon { transition: transform .18s cubic-bezier(.34, 1.6, .64, 1); }
.like-btn:hover { border-color: #f7a8bd; color: var(--hard); }
.like-btn:hover .icon { transform: scale(1.12); }
.like-btn.is-on { background: var(--hard-soft); border-color: #f7a8bd; color: var(--hard); }
.like-btn.is-on .icon { fill: currentColor; }
.like-btn .n:empty { display: none; }

.discuss-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px;
               border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink);
               font-size: 13px; font-weight: 600; transition: .15s; }
.discuss-btn:hover { background: #e2e2ff; }

/* --------------------------------------------------------------------------
   Rendered markdown
   -------------------------------------------------------------------------- */
.md { font-size: 15px; line-height: 2.05; color: var(--ink); overflow-wrap: break-word; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md h1, .md h2, .md h3, .md h4 { margin: 1.4em 0 .6em; line-height: 1.6; }
.md h1 { font-size: 1.35em; } .md h2 { font-size: 1.22em; } .md h3 { font-size: 1.1em; } .md h4 { font-size: 1em; }
.md ul, .md ol { padding-inline-start: 1.6em; margin: .7em 0; }
.md li { margin: .28em 0; }
.md li::marker { color: var(--brand); }
.md a { color: var(--brand); font-weight: 500; border-bottom: 1px solid #d5d5f5; }
.md a:hover { border-bottom-color: var(--brand); }
.md blockquote {
  margin: 1.1em 0; padding: 4px 16px; border-inline-start: 3px solid var(--brand);
  background: var(--brand-soft); border-radius: 0 10px 10px 0; color: var(--ink-2);
}
.md mark { background: #fff3ad; padding: 0 3px; border-radius: 3px; }
.md kbd { background: var(--bg-tint); border: 1px solid var(--border-strong); border-bottom-width: 2px;
          border-radius: 6px; padding: 1px 6px; font-size: .85em; direction: ltr; display: inline-block; }
.md hr { margin: 1.6em 0; }

.md code {
  direction: ltr; unicode-bidi: embed; font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: .87em; background: var(--bg-tint); padding: .15em .4em; border-radius: 6px; color: #b23c6d;
}
.md pre {
  direction: ltr; text-align: left; background: #f8f9fc; border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px; overflow-x: auto; margin: 1.1em 0; line-height: 1.7;
}
.md pre code { background: none; padding: 0; color: var(--ink); font-size: 13px; }
.pre-copy { position: absolute; top: 8px; left: 8px; transition: opacity .15s; }
@media (hover: hover) {
  /* On a pointer device it stays out of the way until you reach for it. */
  .pre-copy { opacity: 0; }
  .md pre:hover .pre-copy, .pre-copy:focus-visible { opacity: 1; }
}

.md img { display: block; margin: 1.2em auto; border-radius: 12px;
          cursor: zoom-in; max-height: 620px; object-fit: contain; }
.md figure { margin: 1.4em 0; }
.md figure img { margin-bottom: .5em; }
.md figcaption { text-align: center; font-size: 12.5px; color: var(--muted); }

/* fit-content, not 100%: a block box only obeys `margin: auto` once it is
   narrower than its container, and a four-column table centred under the text
   reads better than one stretched across the note. It still scrolls on its own
   when it cannot fit. */
.md table { border-collapse: collapse; font-size: 14px; display: block; width: fit-content;
            max-width: 100%; margin: 1.4em auto 2em; overflow-x: auto; }
.md th, .md td { border: 1px solid var(--border); padding: 8px 12px; }
.md th { background: var(--bg-tint); font-weight: 700; }
.md tbody tr:nth-child(even) { background: var(--surface-2); }

.md .admonition { border: 1px solid var(--border); border-inline-start: 3px solid var(--accent);
                  background: #f2fbff; border-radius: 0 12px 12px 0; padding: 12px 16px; margin: 1.2em 0; }
.md .admonition-title { font-weight: 700; margin-bottom: .3em; }
.md .task-list-item { list-style: none; }
.md .task-list-control { margin-inline-end: 6px; }

/* KaTeX is drawn LTR no matter how RTL the surrounding paragraph is. */
.md .katex, .katex { direction: ltr; unicode-bidi: isolate; font-size: 1.06em; }
.md .katex-display { direction: ltr; margin: 1.3em 0; padding: 10px 4px; overflow-x: auto; overflow-y: hidden;
                     text-align: center; }
/* An inline formula has no break points. Left alone, one long one drags the
   whole page wider than the phone; as an inline-block it scrolls on its own. */
.md .arithmatex { unicode-bidi: isolate; display: inline-block; max-width: 100%;
                  overflow-x: auto; overflow-y: hidden; vertical-align: middle; }
.md .arithmatex.katex-display, .md div.arithmatex { display: block; }
.md .katex-error { color: var(--hard); direction: ltr; display: inline-block;
                   background: var(--hard-soft); padding: 0 4px; border-radius: 4px; }

/* Pygments — a restrained light palette. */
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kt { color: #8250df; font-weight: 600; }
.highlight .s, .highlight .s1, .highlight .s2, .highlight .sb { color: #0a7d3f; }
.highlight .c, .highlight .c1, .highlight .cm { color: #97a0b3; font-style: italic; }
.highlight .n { color: #14181f; }
.highlight .nf, .highlight .nc { color: #0550ae; }
.highlight .mi, .highlight .mf, .highlight .m { color: #b23c6d; }
.highlight .o, .highlight .p { color: #57606a; }
.highlight .cp { color: #b25e00; }

/* --------------------------------------------------------------------------
   Editor
   -------------------------------------------------------------------------- */
.editor { border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface);
          overflow: hidden; transition: .15s; }
.editor:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(91, 91, 214, .1); }
.editor-toolbar { display: flex; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--border);
                  background: var(--surface-2); flex-wrap: wrap; }
.tool {
  width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; border: none;
  background: none; cursor: pointer; color: var(--ink-2); font-size: 13px; font-weight: 700; transition: .12s;
  /* Fixed-width icon buttons: anything wider than the box must say so with
     .tool--wide rather than spilling over its neighbour. */
  overflow: hidden; white-space: nowrap; flex-shrink: 0;
}

/* Write / preview: a segmented pair, not two icon buttons. */
.editor-tabs { display: flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--bg-tint); }
.editor-tab {
  height: 26px; padding: 0 12px; border: none; border-radius: 7px; background: none; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; transition: .12s;
}
.editor-tab:hover { color: var(--ink); }
.editor-tab.is-active { background: var(--surface); color: var(--brand-ink); box-shadow: var(--shadow-xs); }
.tool:hover { background: var(--bg-tint); color: var(--brand); }
.tool--wide { width: auto; padding: 0 10px; gap: 6px; display: inline-flex; align-items: center; font-weight: 600; }
.tool-sep { width: 1px; height: 20px; background: var(--border); margin: 0 5px; }
.editor textarea { border: none; border-radius: 0; padding: 16px 18px; min-height: 300px; box-shadow: none !important; }
.editor textarea:focus { box-shadow: none; }
.editor-preview { padding: 18px; min-height: 300px; background: var(--surface); }
/* A reply box is not a note editor: same tools, a fraction of the height. */
.composer .editor textarea, .composer .editor-preview { min-height: 130px; }
.editor-foot { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--border);
               background: var(--surface-2); font-size: 12.5px; color: var(--muted); }
.dropzone-hint { border: 2px dashed var(--brand); border-radius: var(--radius); }

.cheatsheet { font-size: 13px; }
.cheatsheet table { width: 100%; border-collapse: collapse; }
.cheatsheet td { padding: 6px 4px; border-bottom: 1px solid var(--border); vertical-align: top; }
.cheatsheet code { direction: ltr; display: inline-block; background: var(--bg-tint); padding: 1px 6px;
                   border-radius: 5px; font-size: 12px; font-family: ui-monospace, monospace; }

.mention-pop {
  position: absolute; z-index: 80; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-lg); padding: 5px; min-width: 220px; max-height: 260px; overflow: auto;
}
.mention-pop button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px;
                      border: none; background: none; border-radius: 8px; cursor: pointer; text-align: start; }
.mention-pop button:hover, .mention-pop button.is-active { background: var(--brand-soft); }
.mention-pop .u { font-size: 12px; color: var(--muted); direction: ltr; }

.uploads-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 12px; }
.upload-tile { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px;
               overflow: hidden; background: var(--surface); }
.upload-tile img { width: 100%; height: 110px; object-fit: cover; display: block; background: var(--bg-tint); }
.upload-meta { display: flex; align-items: center; gap: 6px; padding: 8px 8px 10px; flex-wrap: wrap; }
.upload-meta .chip { height: 22px; padding: 0 8px; }
.upload-meta a { color: var(--brand); }
.upload-meta a:hover { text-decoration: underline; }
/* The bar sits on its own tinted strip so the buttons stop dissolving into
   the white tile, and `margin-top:auto` lines every tile's bar up. */
.upload-tile .bar { display: flex; flex-wrap: wrap; gap: 5px; padding: 7px; margin-top: auto;
                    background: var(--surface-2); border-top: 1px solid var(--border); }
.upload-tile .bar button { flex: 1 1 auto; min-width: max-content; font-size: 12px; font-weight: 600; line-height: 1.6; padding: 5px 6px;
                           border-radius: 7px; border: 1px solid var(--border-strong); color: var(--ink-2);
                           background: var(--surface); box-shadow: var(--shadow-xs); cursor: pointer;
                           white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.upload-tile .bar button:hover { background: var(--brand-soft); color: var(--brand-ink); border-color: #b9b9ee; }
.upload-tile .bar button:active { transform: translateY(1px); }
.upload-tile .bar button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.upload-tile .bar .inline-form { display: flex; flex: 1 1 auto; min-width: max-content; }
.upload-tile .bar .inline-form button { width: 100%; }
/* Delete reads as delete before you touch it, not only on hover. */
.upload-tile .bar button.danger { color: #be123c; background: var(--hard-soft); border-color: #f2adc0; }
.upload-tile .bar button.danger:hover { background: #fbd5de; color: #9f1239; border-color: #ec8ba7; }

/* --------------------------------------------------------------------------
   Discussion
   -------------------------------------------------------------------------- */
.thread { display: grid; gap: 14px; }
.comment { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; }
.comment--reply { margin-inline-start: 34px; background: var(--surface-2); border-style: dashed; }
.comment:target { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(91, 91, 214, .12); }
.comment-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.comment-head .name { font-weight: 600; font-size: 13.5px; }
.comment-head .when { font-size: 12px; color: var(--muted); }
.comment-actions { margin-inline-start: auto; display: flex; gap: 2px; }
.comment .md { font-size: 14.5px; line-height: 1.95; }
.replies { display: grid; gap: 12px; margin-top: 12px; }
.reply-form { margin-inline-start: 34px; }
.composer { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; }
.composer-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13.5px; }

.note-summary { border-inline-start: 3px solid var(--brand); }

/* --------------------------------------------------------------------------
   Manage panel
   -------------------------------------------------------------------------- */
.manage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
              overflow-x: auto; }
table.data { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 14px; }
table.data td:last-child .row { flex-wrap: nowrap; }
table.data th { text-align: start; font-size: 12.5px; color: var(--muted); font-weight: 600;
                padding: 11px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
table.data td { padding: 11px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.data tr:last-child td { border-bottom: none; }
table.data tr:hover td { background: var(--surface-2); }
.inline-form { display: inline; }

.user-cell { display: flex; align-items: center; gap: 10px; }
.user-cell .u { font-size: 12px; color: var(--muted); direction: ltr; }

.manage-course { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.manage-course > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 18px;
                           cursor: pointer; list-style: none; }
.manage-course > summary::-webkit-details-marker { display: none; }
.manage-course[open] > summary { border-bottom: 1px solid var(--border); }
.manage-chapter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 9px 18px; font-size: 13.5px;
                  border-bottom: 1px solid var(--surface-2); }
.manage-chapter:hover { background: var(--surface-2); }

/* --------------------------------------------------------------------------
   Notifications & misc
   -------------------------------------------------------------------------- */
.notif { display: flex; align-items: flex-start; gap: 12px; padding: 13px 18px; background: var(--surface);
         border: 1px solid var(--border); border-radius: var(--radius); }
.notif--unread { background: #fbfbff; border-color: #d9d9f7; }
.notif .text { font-size: 14px; }
.notif .when { font-size: 12px; color: var(--muted); }

.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(12, 14, 22, .82); display: grid;
            place-items: center; padding: 30px; cursor: zoom-out; backdrop-filter: blur(3px); }
.lightbox img { max-width: calc(100vw - 24px); max-height: 88vh; border-radius: 12px; box-shadow: var(--shadow-lg); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
/* Tablet: the sidebar goes under the content it was helping. */
@media (max-width: 1000px) {
  .course-grid { grid-template-columns: repeat(2, 1fr); }
  .manage-grid { grid-template-columns: repeat(2, 1fr); }
  .split, .split--aside { grid-template-columns: 1fr; }
  /* Stacked, the chapter list would push every note below the fold. */
  .side-nav { position: static; order: 2; }
  .split--aside > aside > .card { position: static !important; }
  .search-box { width: 190px; }
  .search-box:focus-within { width: 220px; }
}

@media (max-width: 720px) {
  body { font-size: 14.5px; }
  .topbar-inner { gap: 8px; padding: 0 12px; }
  /* The wordmark goes, the course menu stays: without it a phone has no way
     into a course except by going home first. */
  .brand-text { display: none; }
  .topnav > a { display: none; }
  .topnav .menu > summary { padding: 7px 10px; }
  .search-box { flex: 1 1 80px; width: auto; min-width: 0; margin-inline-start: 0; }
  .search-box:focus-within { width: auto; }
  /* The header's own dropdowns hang off a button at the very edge, so on a
     phone they detach and span the width instead. Menus inside a card keep
     their anchor — they are small and already sit clear of the edge. */
  .topbar .menu-panel { position: fixed; inset-inline: 12px; top: calc(var(--header-h) + 6px);
                        min-width: 0; width: auto; max-height: 72vh; overflow-y: auto; }
  .menu-panel { max-width: min(320px, calc(100vw - 24px)); }
  .page { padding: 18px 14px 60px; }
  .stat-grid, .course-grid, .hero-features, .manage-grid { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 27px; }
  .hero-features { grid-template-columns: 1fr; }
  .note-foot { gap: 10px; padding: 12px 14px; }
  .note, .card--pad { --pad-x: 16px; }
  .donut-wrap { margin-inline-start: 0; }
  .comment--reply, .reply-form { margin-inline-start: 14px; }
  .auth-card { padding: 26px 20px; }
  table.data { font-size: 13px; }
  table.data th, table.data td { padding: 9px 10px; }
  /* Safari zooms the page in whenever a focused field is under 16px. */
  input, select, textarea { font-size: 16px; }
  .search-box input[type=search] { font-size: 16px; }
  .note-head, .chapter-head, .comment-head { flex-wrap: wrap; }
  .chapter-head .btn { flex: 1 1 auto; justify-content: center; }
  .chapter-nav .btn { flex: 1 1 auto; justify-content: center; }
  /* The course banner is a row of icon + title + counters; at this width the
     title gets three words a line and the counters get squeezed, so stack it. */
  .course-hero { padding: 20px 18px; }
  .course-hero > .row { flex-wrap: wrap; }
  .course-hero h1 { font-size: 21px; }
  .course-hero .spacer { display: none; }
  .course-hero > .row > .row { width: 100%; flex-wrap: wrap; }
  /* A filter row is a stack on a phone: full-width field, full-width select. */
  .filter-bar__q, .filter-bar select, .filter-bar .btn { flex: 1 1 100%; }
  .form-actions .btn { flex: 1 1 auto; justify-content: center; }
  .form-actions .muted.tiny { display: none; }
  .md { font-size: 14.5px; line-height: 1.95; }
  .md pre code { font-size: 12.5px; }
  .breadcrumb { font-size: 12.5px; }
  /* The toolbar wraps rather than scrolls, so keep each key small enough that
     it costs one line, not three. */
  .editor-toolbar { gap: 1px; padding: 5px 6px; }
  .editor-toolbar button { padding: 4px 6px; font-size: 12.5px; }
  .editor-tab { padding: 5px 10px; font-size: 12.5px; }
  .editor textarea, .editor-preview { min-height: 240px; }
  /* At phone width a tile is nearly full-bleed; 110px of a 360px-wide image
     is a crop, not a thumbnail. */
  .upload-tile img { height: auto; aspect-ratio: 16 / 10; }
}

/* A phone held in one hand. Course cards carry a description and three chips,
   so they get the full width; a counter is four characters and does not. */
@media (max-width: 460px) {
  .course-grid { grid-template-columns: 1fr; }
  .rate-label { display: none; }
  .donut-legend { display: none; }
  .note-title { font-size: 16px; }
  .page { padding: 14px 12px 56px; }
}

/* Touch, not a mouse: nothing important may hide behind :hover, and a target
   has to be big enough for a thumb. */
@media (pointer: coarse) {
  .btn--sm { height: 36px; }
  .rate-btn { height: 34px; padding: 0 13px; }
  .tick-btn { width: 32px; height: 32px; }
  .word-act { padding: 6px 10px; font-size: 12.5px; }
  .tabs a, .tabs button { padding: 9px 14px; }
  .menu-panel a, .menu-panel button { padding: 11px 12px; }
  .upload-tile .bar button { padding: 8px 6px; }
  .note-menu-btn, .icon-btn { min-width: 44px; min-height: 44px; }
  /* The logo is the only way home once the nav collapses, so it gets a
     thumb-sized hit box without growing the 32px mark itself. */
  .brand { min-width: 44px; align-self: stretch; }
  .avatar-summary { min-width: 44px; min-height: 44px; }
  .like-btn, .discuss-btn { min-height: 38px; }
  .flash-close { min-width: 40px; min-height: 40px; display: grid; place-items: center; }
  .lvl { min-height: 36px; }
  .editor-tab { min-height: 34px; }
  .editor-toolbar button { min-width: 34px; min-height: 34px; }
}

@media print {
  .topbar, .note-foot, .site-footer, .flash-wrap, .strip { display: none !important; }
  .note { break-inside: avoid; border-color: #ddd; box-shadow: none; }
}

/* --------------------------------------------------------------------------
   Vocabulary
   A word list is not a note list: dozens of short cards read at a glance, so
   they are dense, uniform, and carry their senses as separate chips rather
   than one comma-run the eye has to parse.
   -------------------------------------------------------------------------- */
.vocab { margin-bottom: 26px; }
.vocab-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.vocab-search {
  flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 0 14px; height: 40px; transition: .15s;
}
.vocab-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(91, 91, 214, .1); }
.vocab-search .icon { color: var(--muted); flex-shrink: 0; }
.vocab-search input[type=search] {
  appearance: none; -webkit-appearance: none; border: none; background: none;
  box-shadow: none; outline: none; width: 100%; height: 100%; padding: 0; border-radius: 0;
}
.vocab-search input[type=search]:focus { border: none; box-shadow: none; }

.level-filter { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.lvl {
  height: 30px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--border-strong); background: var(--surface);
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); transition: .14s;
}
.lvl:hover { border-color: var(--brand); color: var(--brand-ink); }
.lvl .tiny { opacity: .75; }
.lvl.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.lvl--critical.is-on { background: #be123c; border-color: #be123c; }
.lvl--high.is-on { background: #b8730a; border-color: #b8730a; }   /* white text needs 4.5:1 */
.lvl--notable.is-on { background: #2c4fb3; border-color: #2c4fb3; }
.lvl--low.is-on { background: #616a80; border-color: #616a80; }

.word-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }

.word-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 11px 13px 12px; transition: .14s;
}
.word-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
/* A word already learnt recedes rather than disappears. */
.word-card--known { background: #f8fbf9; border-color: #cfe9d8; }

/* Importance lives in one badge: a grid of tinted cards is a wall of colour,
   a grid of white cards with a coloured chip is a list you can scan. */
.badge-imp {
  margin-inline-start: auto; flex-shrink: 0; font-size: 11px; font-weight: 700;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap; line-height: 1.7;
}
.badge-imp--critical { background: #ffe4ea; color: #be123c; }
.badge-imp--high { background: #ffedd0; color: #9a6800; }
.badge-imp--notable { background: #e3ecff; color: #2c4fb3; }
.badge-imp--low { background: var(--bg-tint); color: #5d6478; }  /* on most cards: keep it readable */

.word-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; flex-wrap: wrap; }
.word {
  font-family: 'Estedad', ui-sans-serif, system-ui, sans-serif;
  font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; color: var(--ink);
  overflow-wrap: anywhere; min-width: 0;
}


.senses { display: flex; flex-wrap: wrap; gap: 4px; }
.sense {
  font-size: 12.5px; line-height: 1.9; color: var(--ink-2);
  background: var(--bg-tint); border-radius: 7px; padding: 1px 8px;
}
.word-card--known .sense { background: #eaf5ee; }

.word-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }

.word-act {
  font-size: 11.5px; color: var(--muted); background: none; border: none; cursor: pointer;
  padding: 2px 6px; border-radius: 6px;
}
@media (hover: hover) {
  /* Invisible-but-tappable is how a delete gets hit by accident, so this only
     applies where a pointer can actually hover. */
  .word-act { opacity: 0; transition: opacity .14s; }
  .word-card:hover .word-act, .word-act:focus-visible { opacity: 1; }
}
.word-act:hover { color: var(--brand); background: var(--brand-soft); }
.word-act--danger:hover { color: var(--hard); background: var(--hard-soft); }

@media (max-width: 720px) {
  .word-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .word { font-size: 15.5px; }
}

/* --------------------------------------------------------------------------
   Tick 5 — five boxes per word, one review a day
   -------------------------------------------------------------------------- */
.tick-panel {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(120deg, #f4f4ff, #eefaf3);
  border: 1px solid #e0e2f5; border-radius: var(--radius-lg);
  padding: 14px 18px; margin-bottom: 16px;
}
.tick-panel-main { flex: 1; min-width: 260px; }
.tick-panel-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tick-logo {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(135deg, #6366f1, #14b8a6); color: #fff; font-weight: 800; font-size: 15px;
}

.tick-boxes { display: flex; gap: 3px; margin: 8px 0 2px; }
.tick-boxes i {
  width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--border-strong);
  background: var(--surface); transition: .16s;
}
.tick-boxes i.is-on { background: var(--easy); border-color: var(--easy); }
.tick-boxes--mini { margin: 6px 0 0; }
.tick-boxes--mini i { width: 11px; height: 11px; border-radius: 3px; }

.tick-btn {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--muted); font-size: 12px; font-weight: 800; transition: .14s;
}
.tick-btn:hover { border-color: var(--brand); color: var(--brand); }
.tick-btn.is-on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-ink); }

.tick-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 26px 24px; text-align: center;
}
.tick-card.is-hidden { display: none; }
.tick-card .tick-boxes { justify-content: center; margin-bottom: 18px; }
.tick-word {
  font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.4;
  overflow-wrap: anywhere;
}
.tick-prompt { margin: 6px 0 18px; }
.tick-senses { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 14px 0 18px; }
.tick-senses .sense { font-size: 14px; padding: 4px 12px; }
.tick-actions { display: grid; gap: 10px; justify-items: center; }
.tick-verdict { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.tick-yes { background: var(--easy); box-shadow: 0 4px 12px rgba(23, 163, 74, .25); }
.tick-yes:hover { background: #12833b; }

@media (max-width: 720px) {
  .tick-word { font-size: 27px; }
  .tick-panel-actions { width: 100%; }
  .tick-panel-actions .btn { flex: 1; }
}