/* ===== Generic card + timer ===== */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px 24px; min-width: 0; }

.timer-box { text-align: center; margin: 15px 0; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 280px; }
.timer-screen { font-size: 72px; font-weight: 800; font-family: monospace; color: var(--primary); letter-spacing: -1px; max-width: 100%; overflow-wrap: anywhere; transition: font-size 0.25s ease; }
.controls-row { display: flex; gap: 10px; justify-content: center; margin-top: 15px; }

/* ===== Zen / Focus Mode =====
   Design: one full-viewport backdrop (positioned, its own z-index) that
   automatically paints above every ordinary in-flow element on the page —
   header, quote banner, live-summary card, garden, heatmap, trend chart —
   with zero per-element rules needed for any of them. The timer card is
   pulled out of the grid and re-centered on top of that backdrop, at up to
   75% of the viewport width. Toggling body.zen-mode is the only thing the
   JS does (see toggleZenMode() in ui.js); every visual change here is a
   CSS transition, so entering/exiting is fully symmetric and never
   restructures the underlying layout. */
.timer-card { position: relative; }

.zen-toggle-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
    z-index: 3;
}
.zen-toggle-btn:hover { color: var(--primary); border-color: var(--primary); }
.zen-toggle-btn svg { width: 17px; height: 17px; }
body.zen-mode .zen-toggle-btn { color: var(--success); border-color: var(--success); background: rgba(16, 185, 129, 0.12); }

/* Small caption under the zen-toggle circle so first-time users know
   what the icon does without having to hover for the title tooltip. */
.zen-toggle-wrap { position: absolute; top: 14px; right: 14px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.zen-toggle-wrap .zen-toggle-btn { position: static; }
.zen-toggle-label { font-size: 9px; font-weight: 700; letter-spacing: 0.3px; color: var(--muted); text-transform: uppercase; user-select: none; }
body.zen-mode .zen-toggle-label { color: var(--success); }

#zen-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(3, 7, 15, 0.93);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}
body.zen-mode #zen-backdrop { opacity: 1; pointer-events: auto; }

/* The sidebar is the only other element on the page with its own z-index
   (200, set in base.css) — high enough to otherwise sit above the zen
   backdrop and poke through it. Drop it below while zen is active so it's
   covered like everything else; restored the instant zen-mode is removed. */
body.zen-mode .sidebar { z-index: 40; }

body.zen-mode .timer-card {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(75vw, 760px);
    max-width: 92vw;
    max-height: 85vh;
    overflow-y: auto;
    z-index: 110;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}
body.zen-mode .timer-screen { font-size: clamp(52px, 9vw, 110px); }
body.zen-mode .timer-box { min-height: 320px; }
@media (max-width: 700px) {
    body.zen-mode .timer-card { width: 92vw; }
    body.zen-mode .timer-screen { font-size: clamp(38px, 15vw, 68px); }
}

/* ===== Buttons =====
   Every button class below is a soft tinted-glass style — translucent
   background + matching 1px border + colored text, no solid fill — built
   from the six shared --tint-* triples in variables.css. This is the same
   look the weekly/monthly report buttons always used; the rest of the
   site's buttons (Start/Pause/Break/Stop/Export, notifications, account &
   sync, mock-test, mistakes, etc.) now match it instead of using loud
   solid fills. Because every button just references one of these classes,
   changing a --tint-* value in variables.css re-colors the whole site. */
button.btn { padding: 12px 20px; font-size: 14px; font-weight: 700; border-radius: 8px; cursor: pointer; transition: background 0.2s, transform 0.2s; }
.btn:hover { transform: translateY(-1px); }

.btn-start, .btn-report-email { background: rgba(var(--tint-emerald), 0.12); border: 1px solid rgba(var(--tint-emerald), 0.4); color: rgb(var(--tint-emerald)); }
.btn-start:hover, .btn-report-email:hover { background: rgba(var(--tint-emerald), 0.2); }

.btn-pause, .btn-yellow { background: rgba(var(--tint-amber), 0.12); border: 1px solid rgba(var(--tint-amber), 0.4); color: rgb(var(--tint-amber)); }
.btn-pause:hover, .btn-yellow:hover { background: rgba(var(--tint-amber), 0.2); }

.btn-break { background: rgba(var(--tint-violet), 0.12); border: 1px solid rgba(var(--tint-violet), 0.4); color: rgb(var(--tint-violet)); }
.btn-break:hover { background: rgba(var(--tint-violet), 0.2); }

.btn-stop { background: rgba(var(--tint-rose), 0.12); border: 1px solid rgba(var(--tint-rose), 0.4); color: rgb(var(--tint-rose)); }
.btn-stop:hover { background: rgba(var(--tint-rose), 0.2); }

.btn-export, .btn-report-download { background: rgba(var(--tint-sky), 0.12); border: 1px solid rgba(var(--tint-sky), 0.4); color: rgb(var(--tint-sky)); }
.btn-export:hover, .btn-report-download:hover { background: rgba(var(--tint-sky), 0.2); }

.btn-report-share { background: rgba(var(--tint-indigo), 0.12); border: 1px solid rgba(var(--tint-indigo), 0.4); color: rgb(var(--tint-indigo)); }
.btn-report-share:hover { background: rgba(var(--tint-indigo), 0.2); }

.btn-small { padding: 8px 12px; font-size: 12px; }
/* .btn-compact: the 3-across "Delete Cloud Data / Reset All Data / Sign Out"
   row. These sit in a `flex:1` row with white-space:nowrap, but flex items
   default to min-width:auto — meaning a flex item is never allowed to
   shrink below its own text's intrinsic width, no matter how little room
   flex:1 gives it. With 3 fairly long labels that made the row overflow its
   card (or crush against each other) instead of actually fitting on one
   line. min-width:0 lifts that floor so flex:1 can size them down for real;
   overflow/text-overflow give a graceful ellipsis instead of a raw clip on
   the rare viewport where even that isn't enough room. Padding is tightened
   (not font-size, which stays matched across all three buttons) to keep
   them from feeling cramped once they're this narrow. */
.btn-compact { padding: 7px 6px; font-size: 11px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ===== Single-line button rows (no wrapping to a 2nd row) ===== */
.btn-row-nowrap {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) var(--bg);
}
.btn-row-nowrap .btn { flex: 0 0 auto; white-space: nowrap; }

/* Single-line row that SHRINKS buttons to fit (no scrollbar, ever) —
   used where a fixed-size nowrap row would overflow (e.g. 6 report buttons
   in a ~1100px container). Buttons share width equally and their text may
   wrap to 2 lines, but the row itself never wraps or scrolls. */
.btn-row-fit {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
}
.btn-row-fit .btn {
    flex: 1 1 0;
    min-width: 0;
    white-space: normal;
    text-align: center;
    padding: 7px 6px;
    font-size: 11px;
    line-height: 1.25;
}

/* ===== Form inputs ===== */
select, input[type="text"], input[type="date"], input[type="number"] { width: 100%; padding: 10px; background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 8px; margin-top: 5px; box-sizing: border-box; transition: border-color 0.2s, box-shadow 0.2s; }
/* Brief highlight when the chapter typeahead jumps the <select> to a new
   match (mistakes.js) — makes the jump read as an intentional move. */
select.typeahead-jump { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.3); }

.date-field-wrap { position: relative; }
.date-field-wrap input[type="date"] { padding-right: 42px; }
.date-picker-btn {
    position: absolute; right: 6px; top: 50%; transform: translateY(calc(-50% + 3px));
    background: var(--primary); border: none; border-radius: 6px; width: 28px; height: 28px;
    font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.date-picker-btn:hover { opacity: 0.85; }
input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
input[type="date"] { color-scheme: dark; }
input[type="text"]:disabled, input[type="date"]:disabled { opacity: 0.5; cursor: not-allowed; }
.field-note { font-size: 11px; color: var(--warning); margin-top: 6px; }

/* ===== Badges (timer status) ===== */
.badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; margin-bottom: 10px; text-transform: uppercase; }
.badge-studying { background: rgba(16, 185, 129, 0.2); color: var(--success); }
.badge-paused { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.badge-break { background: rgba(139, 92, 246, 0.2); color: #a78bfa; }
.badge-idle { background: rgba(100, 116, 139, 0.2); color: var(--muted); }

/* ===== Misc shared rows/lists ===== */
.stat-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #1e293b; font-size: 14px; }
.todo-item { display: flex; align-items: center; gap: 8px; background: var(--bg); padding: 8px; border-radius: 6px; margin-top: 6px; font-size: 13px; word-break: break-word; overflow-wrap: break-word; }
.log-box { max-height: 200px; overflow-y: auto; background: var(--bg); border-radius: 8px; padding: 8px; }
.settings-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; font-size: 13px; }
.settings-row label { flex: 1; }
/* Custom checkbox — same dark "sunken" look as the number/time inputs
   above (var(--bg) fill, var(--border) outline) instead of the browser's
   default grey/blue control, so it matches the rest of the settings UI. */
.settings-row input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    transition: background 0.15s, border-color 0.15s;
}
.settings-row input[type="checkbox"]:hover { border-color: var(--primary); }
.settings-row input[type="checkbox"]:checked {
    background: var(--primary);
    border-color: var(--primary);
}
.settings-row input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid var(--bg);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.settings-sub { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
/* These were previously left with only width/padding set — with no
   background/border/color of their own, they fell back to the browser's
   native (light, larger) number-input chrome, which is why they looked
   like an oversized white box against the dark theme. */
.settings-sub input[type="number"] { width: 52px; margin-top: 0; padding: 5px 6px; background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 6px; font-size: 13px; font-family: inherit; box-sizing: border-box; }
.settings-sub input[type="time"] { width: auto; margin-top: 0; padding: 5px 8px; font-size: 13px; }
.small-note { font-size: 11px; color: var(--muted); margin-top: 6px; }

/* "Add Missed Break" mini-form next to the Logged Breaks list (History card) */
.missed-break-form { margin: 8px 0 12px; padding: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; }
.missed-break-form input[type="text"] { margin-top: 0; margin-bottom: 8px; font-size: 13px; padding: 8px; }
.missed-break-times { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.missed-break-times input[type="time"] { width: auto; flex: 1 1 90px; min-width: 90px; margin-top: 0; }
.missed-break-times span { color: var(--muted); }
.missed-break-times .btn { flex-shrink: 0; }

/* Number-of-tasks-left badge next to "Today's To-Do" — outlined circle,
   text/border colored to match the sidebar's accent so it sits quietly in
   the left rail instead of competing with it. Fixed equal width/height +
   border-radius:50% (instead of a min-width + horizontal padding pill)
   so it stays a true circle for both single- and double-digit counts,
   rather than stretching into an oval. */
/* Number-of-tasks-left badge next to "Today's To-Do" — outlined circle,
   text/border colored to match the sidebar's accent so it sits quietly in
   the left rail instead of competing with it. Centered via line-height
   (not flexbox align-items) — a fixed line-height equal to the circle's
   inner (content-box) height vertically centers a single line of text far
   more reliably than flex centering, which centers the whole line box and
   can read as visually high/low depending on the font's own ascent/descent
   metrics. width/height are the OUTER box (border included, box-sizing:
   border-box), so line-height = height − 2×border-width to match the
   actual inner content area. */
.todo-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    margin-left: 4px;
    border: 1.5px solid var(--primary);
    border-radius: 50%;
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Guest sign-in reminder + Account & Sync header icons — both use the same
   inline SVG (plain circle-head + shoulders, stroke only, no fill) as a CSS
   mask, so the glyph itself can be recolored with plain background-color to
   match the theme. This replaced the old solid-silhouette icon-user.png:
   that source PNG was a filled avatar shape, which is why the glyph used to
   render as a solid blob instead of a clean outline. Being an inline data
   URI also means there's no separate icon-user.png file to ship anymore. */
.guest-modal-icon, .account-header-icon {
    display: inline-block;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") no-repeat center / contain;
    background-color: var(--title);
}
.guest-modal-icon { width: 44px; height: 44px; margin-bottom: 10px; }
.account-header-icon { width: 16px; height: 16px; flex-shrink: 0; }

/* "Remind Later (5 min)" / "Ignore for Today" — sized to stay on one line
   inside the widened guest-reminder-modal instead of wrapping mid-word. */
.btn-guest-small { flex: 1; padding: 8px 6px; font-size: 11px; white-space: nowrap; }

/* Garden card's goal/streak-rules line — brighter than .small-note (which
   is meant to fade into the background) since this explains how the
   streak itself works and is worth actually reading. "Goal:" gets the
   strongest emphasis of the line; the rest is a step down from that but
   still a step up from the old --muted-only note styling.
   Forced onto a single line (white-space: nowrap) with the font scaling
   down via clamp() as the viewport narrows, so it keeps fitting on one
   line without wrapping through most desktop/tablet widths. Below the
   width where even the clamp() floor (9px) can't fit the full sentence,
   overflow-x falls back to a thin horizontal scroll rather than wrapping
   or truncating — the full text stays intact and on one line either way. */
.goal-note { font-size: clamp(9px, 1.4vw, 10.5px); color: #94a3b8; margin-top: 6px; margin-bottom: 10px; line-height: 1.5; white-space: nowrap; overflow-x: auto; padding-bottom: 2px; }
.goal-note-emphasis { color: var(--text); font-weight: 800; }
.session-log-item { display: flex; justify-content: space-between; align-items: center; background: var(--bg); padding: 6px 8px; border-radius: 6px; margin-top: 4px; font-size: 12px; }

.countdown-card { padding: 12px; }
.countdown-item { background: var(--bg); border-radius: 8px; padding: 10px 12px; margin-top: 8px; }
.countdown-item .exam-name { font-size: 12px; color: var(--primary); font-weight: 700; text-transform: uppercase; }
.countdown-item .exam-date { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.countdown-item .exam-days { font-size: 28px; font-weight: 800; color: var(--text); }
.countdown-item .exam-days span { font-size: 13px; color: var(--muted); font-weight: 500; }
.countdown-item .exam-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ===== Planner calendar widget ===== */
.planner-card { padding: 12px; }
.cal-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cal-nav button { background: var(--bg); border: 1px solid var(--border); color: var(--primary); border-radius: 6px; padding: 4px 10px; cursor: pointer; font-weight: 700; }
.cal-nav .cal-month-label { font-weight: 700; font-size: 13px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-size: 10px; color: var(--muted); font-weight: 700; padding-bottom: 4px; }
.cal-day { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; font-size: 12px; cursor: pointer; }
.cal-day:hover { border-color: var(--primary); }
.cal-day.empty { visibility: hidden; cursor: default; }
.cal-day.today { border-color: var(--success); color: var(--success); font-weight: 700; }
.cal-day .dot { position: absolute; bottom: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--warning); }

/* ===== Modals ===== */
/* Same dim+blur treatment as #zen-backdrop (rgba(3,7,15,~0.9) + blur) so
   every modal that uses this shared class — guest sign-in reminder, the
   alarm, planner, mock-test file viewer, etc. — gets the same "premium"
   fade behind it instead of the old flat rgba(0,0,0,0.7). One change here
   covers all of them since they all share .modal. */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(3, 7, 15, 0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); justify-content: center; align-items: center; z-index: 200; }
.modal-content { background: var(--card); border: 1px solid var(--border); padding: 24px; border-radius: 12px; width: 320px; }
.modal-content.wide #planner-modal-title { font-size: 22px; }
.modal-content.wide { width: min(680px, 92vw); max-height: 85vh; display: flex; flex-direction: column; }
.modal-content.wide #planner-task-input { font-size: 16px; padding: 14px; }
.modal-content.wide #planner-task-list { flex: 1; max-height: none !important; }
.task-item { display: flex; align-items: center; gap: 10px; background: var(--bg); padding: 12px; border-radius: 8px; margin-top: 8px; font-size: 15px; }
.task-item .task-text { flex: 1; }
.task-item .task-text.done { text-decoration: line-through; color: var(--muted); }
.task-item button.del { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 18px; }
button.del { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 13px; padding: 2px 4px; }
button.del:hover { color: #fca5a5; }

/* ===== Toasts =====
   Deliberately softer than a full-strength alert: a thin low-opacity border
   instead of the previous solid full-color border on all 4 sides, a lighter
   left accent instead of a heavy 4px bar, and a lower-contrast shadow. Still
   clearly noticeable (the card background + left accent + fade-in animation
   are enough for the user to register it), just not as visually loud as a
   warning-level element. */
#toast-stack { position: fixed; bottom: 16px; right: 16px; z-index: 500; display: flex; flex-direction: column; gap: 8px; max-width: 320px; }
.toast {
    background: var(--card); border: 1px solid rgba(var(--tint-sky), 0.22); border-left: 3px solid rgba(var(--tint-sky), 0.55); color: var(--text);
    padding: 12px 14px; border-radius: 8px; font-size: 13px; box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    animation: toast-in 0.25s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ===== YouTube player + history ===== */
.yt-player-wrap { margin-top: 8px; }
.yt-controls { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.yt-controls button { background: var(--bg); border: 1px solid var(--border); color: var(--primary); border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: 13px; }
.yt-controls input[type="range"] { flex: 1; }
.yt-history-panel { margin-top: 8px; max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; padding: 6px; display: none; }
.yt-history-panel.open { display: block; }
.yt-history-item { display: flex; gap: 8px; align-items: center; padding: 5px; border-radius: 6px; cursor: pointer; }
.yt-history-item:hover { background: var(--bg); }
.yt-history-item img { width: 64px; height: 36px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.yt-history-item .yt-history-label { font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.yt-star-btn { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0; flex-shrink: 0; width: 16px; text-align: center; }
.yt-star-btn.starred { color: #facc15; }
.yt-star-btn:hover { color: #facc15; }
.yt-history-empty { font-size: 12px; color: var(--muted); padding: 6px; }

/* ===== Sleep / Wake log ===== */
input[type="time"] { width: 100%; padding: 6px 8px; background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 6px; font-family: inherit; box-sizing: border-box; }
.sleep-log-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.sleep-log-row:last-child { border-bottom: none; }
.sleep-log-row .sl-date { color: var(--muted); }
.sleep-log-row .sl-dur { color: var(--primary); font-weight: 700; }

/* ===== Mock Test & mistake tags ===== */
.mock-entry { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-top: 8px; word-break: break-word; overflow-wrap: break-word; }
.mock-entry .mock-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
/* Title wraps freely in general (long subject names shouldn't overflow the
   card), but a long title used to push the score onto its own second line
   since the two sides were just two flex children with no width limits. The
   title side now gets the remaining space and truncates to ONE line with an
   ellipsis, while the score side is fixed-width/no-wrap, so "score / out of"
   always stays on a single line next to the title regardless of its length. */
.mock-entry .mock-title-wrap { min-width: 0; flex: 1 1 auto; }
.mock-entry .mock-title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-entry .mock-score-wrap { display: flex; align-items: center; gap: 8px; flex-shrink: 0; white-space: nowrap; }
.mock-entry .mock-score { color: var(--success); font-weight: 800; white-space: nowrap; }
.mock-entry .mock-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mock-entry .mock-files img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; }
.mock-entry .mock-files a.pdf-chip { font-size: 11px; background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; color: var(--primary); text-decoration: none; }
textarea.mock-notes { width: 100%; padding: 10px; background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 8px; margin-top: 5px; box-sizing: border-box; font-family: inherit; resize: vertical; min-height: 60px; overflow-wrap: break-word; word-break: break-word; }
.mistake-tag-picker { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.mistake-tag-chip { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 4px 10px; font-size: 12px; cursor: pointer; color: var(--muted); user-select: none; }
.mistake-tag-chip.selected { background: var(--primary); border-color: var(--primary); color: #04121f; font-weight: 600; }
.mock-mistake-summary-section { display: flex; flex-direction: column; gap: 6px; }
#mistake-tag-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
/* When there are 0 mock tests, renderMistakeSummary() leaves this element
   truly empty — its own margin-top (both rules above) still took up space
   with nothing to show for it, stacking on top of the flex `gap` that
   .sidebar-content already applies between every section. Zero it out
   whenever it's empty so an empty state doesn't reserve extra blank space. */
.mistake-summary-wrap:empty, #mistake-tag-summary:empty { margin: 0; }
#mistake-tag-summary .ms-pill { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 3px 9px; font-size: 11px; color: var(--text); }
.section-header-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.section-header-row .section-subtitle { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); }
.sort-select { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; font-size: 12px; font-family: inherit; max-width: 170px; }
.priority-select { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 0 4px; font-size: 16px; font-family: inherit; height: 44px; width: 52px; flex-shrink: 0; text-align: center; margin: 0; }
.priority-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 11px; color: var(--muted); }
.priority-legend .pl-item { display: flex; align-items: center; gap: 5px; }
.priority-legend .pl-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.priority-legend .pl-dot.pl-high { background: #ef4444; }
.priority-legend .pl-dot.pl-medium { background: #f59e0b; }
.priority-legend .pl-dot.pl-low { background: #22c55e; }
.mock-entry .entry-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.mock-entry .entry-tags span { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 2px 8px; font-size: 11px; color: var(--muted); }

/* ===== Syllabus Tracker ===== */
.syllabus-subject-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin: 10px 0; padding-bottom: 8px; }
.syllabus-subject-tabs button { background: var(--card); border: 1px solid var(--border); color: var(--muted); border-radius: 8px; padding: 6px 10px; font-size: 12px; cursor: pointer; white-space: nowrap; flex: 0 0 auto; }
.syllabus-subject-tabs button.active { background: var(--primary); border-color: var(--primary); color: #04121f; font-weight: 700; }
.syllabus-overall { font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.syllabus-overall .so-bar-track { background: var(--bg); border-radius: 5px; height: 8px; margin-top: 4px; overflow: hidden; }
.syllabus-overall .so-bar-fill { background: var(--success); height: 100%; border-radius: 5px; }
.syllabus-overall .highlight-text { color: var(--primary); font-weight: 800; font-size: 14px; }
.syllabus-overall .highlight-pct { color: var(--success); font-weight: 800; font-size: 14px; }
.syllabus-class-header { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin: 14px 0 6px; }
.syllabus-chapter-card { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-bottom: 8px; }
.syllabus-chapter-card .sc-top { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.syllabus-chapter-card .sc-name { font-size: 13px; font-weight: 600; }
.syllabus-chapter-card .sc-badge { font-size: 11px; color: var(--muted); white-space: nowrap; margin-left: 8px; }
.syllabus-chapter-card .sc-bar-track { background: var(--card); border-radius: 4px; height: 5px; margin-top: 6px; overflow: hidden; }
.syllabus-chapter-card .sc-bar-fill { background: var(--primary); height: 100%; border-radius: 4px; }
.syllabus-tag-grid { display: none; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.syllabus-chapter-card.expanded .syllabus-tag-grid { display: flex; }
.syllabus-tag-chip { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 4px 10px; font-size: 11px; cursor: pointer; color: var(--muted); user-select: none; }
.syllabus-tag-chip.done { background: var(--success); border-color: var(--success); color: #04121f; font-weight: 600; }

/* ===== Mistakes Tracker ===== */
.mistake-chapter-card { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-bottom: 8px; }
.mistake-chapter-card .mc-top { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.mistake-chapter-card .mc-name { font-size: 13px; font-weight: 600; }
.mistake-chapter-card .mc-badge { font-size: 11px; color: var(--muted); white-space: nowrap; margin-left: 8px; background: var(--card); border: 1px solid var(--border); border-radius: 50%; min-width: 22px; height: 22px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.mistake-chapter-card.expanded .mc-badge { color: var(--danger); border-color: var(--danger); }
.mc-detail { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.mc-entry-block { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 8px; }
.mc-entry-block + .mc-entry-block { margin-top: 0; }
.mc-entry-meta { font-size: 11px; color: var(--muted); margin-bottom: 6px; background: rgba(239, 68, 68, 0.08); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; display: inline-block; }
.mc-entry-meta .mc-entry-num { color: var(--danger); font-weight: 700; }
.mc-detail input, .mc-detail textarea { margin: 0 0 6px 0; }
.mc-count-input { width: 100%; }
.mc-notes { width: 100%; min-height: 80px; padding: 10px; background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 8px; box-sizing: border-box; font-family: inherit; resize: vertical; overflow-wrap: break-word; word-break: break-word; }
.mc-files-row { display: flex; gap: 8px; align-items: center; }
.mc-files-row input[type="file"] { flex: 1; font-size: 11px; }
.mc-file-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mc-file-chip { position: relative; display: inline-flex; align-items: center; }
.mc-file-chip img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.mc-file-chip.mc-file-pdf a { font-size: 11px; background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; color: var(--primary); text-decoration: none; }
.mc-file-chip button { position: absolute; top: -6px; right: -6px; background: var(--danger); color: #fff; border: none; border-radius: 50%; width: 16px; height: 16px; font-size: 10px; line-height: 1; cursor: pointer; padding: 0; }

/* View-mode (read-only) mistake detail — the notes box gets its own
   scrollbar once a chapter accumulates a lot of logged entries, instead of
   growing the card indefinitely. */
/* Notes now expand fully inline instead of scrolling in their own small
   box — removes a third nested scroll layer (subject tabs > chapter
   accordion > this) that made the panel feel like stacked mini-sidebars
   and invited mis-taps between them. */
.mc-notes-view { padding: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.mc-icon-btn { background: var(--card); border: 1px solid var(--border); color: var(--text); border-radius: 6px; width: 30px; height: 30px; font-size: 14px; line-height: 1; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; }
.mc-icon-btn:hover { border-color: var(--primary); }

/* Add Mistake / View Mistakes sub-tabs — two equal-width (X/2) segments
   spanning the same width as the rest of the sidebar panel, mirroring the
   look of .syllabus-subject-tabs buttons but as a fixed 2-up segmented
   control rather than a scrollable row. */
.mistake-view-toggle { display: flex; gap: 6px; margin: 12px 0; }
.mistake-view-toggle button { flex: 1 1 50%; background: var(--card); border: 1px solid var(--border); color: var(--muted); border-radius: 8px; padding: 9px 6px; font-size: 12px; font-weight: 700; cursor: pointer; }
.mistake-view-toggle button.active { background: var(--primary); border-color: var(--primary); color: #04121f; }
.mistake-search-box { margin-top: 4px; }