/* SkillRecall UI. Bootstrap 5.3 provides light/dark via [data-bs-theme]. */
:root {
  --sr-primary: #4f46e5;
  --sr-sidebar-w: 260px;
  --sr-radius: .75rem;
  --sr-weak: #ef4444;
  --sr-mid: #f59e0b;
  --sr-good: #22c55e;
  --sr-strong: #0ea5e9;
}
[data-bs-theme="dark"] { --bs-body-bg: #0f1220; --bs-body-bg-rgb: 15,18,32; --bs-tertiary-bg: #171a2e; --bs-tertiary-bg-rgb: 23,26,46; --bs-border-color: #272b45; }
body { background: var(--bs-tertiary-bg); }
.btn-primary { --bs-btn-bg: var(--sr-primary); --bs-btn-border-color: var(--sr-primary); --bs-btn-hover-bg: #4338ca; --bs-btn-hover-border-color: #4338ca; --bs-btn-active-bg: #3730a3; }
.btn-outline-primary { --bs-btn-color: var(--sr-primary); --bs-btn-border-color: var(--sr-primary); --bs-btn-hover-bg: var(--sr-primary); --bs-btn-hover-border-color: var(--sr-primary); }
a { color: var(--sr-primary); }
[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item) { color: #a5b4fc; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--sr-primary) 70%, white); outline-offset: 2px; }
.skip-link { position: absolute; top: .5rem; left: .5rem; z-index: 2000; background: var(--bs-body-bg); padding: .5rem 1rem; border-radius: .5rem; }

/* Shell */
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: var(--sr-sidebar-w); background: var(--bs-body-bg); border-right: 1px solid var(--bs-border-color); flex-shrink: 0; }
@media (min-width: 992px) { .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; } }
.sidebar-brand { align-items: center; gap: .75rem; padding: 1.1rem 1.25rem; text-decoration: none; color: var(--bs-body-color) !important; }
.brand-mark { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.sidebar-nav { padding: 0 .75rem 1rem; }
.nav-group-title { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--bs-secondary-color); padding: 1rem .75rem .35rem; }
.sidebar .nav-link { display: flex; align-items: center; gap: .65rem; color: var(--bs-body-color); border-radius: .5rem; padding: .5rem .75rem; font-size: .93rem; }
.sidebar .nav-link:hover { background: var(--bs-tertiary-bg); }
.sidebar .nav-link.active { background: color-mix(in srgb, var(--sr-primary) 14%, transparent); color: var(--sr-primary); font-weight: 600; }
[data-bs-theme="dark"] .sidebar .nav-link.active { color: #c7d2fe; }
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; background: color-mix(in srgb, var(--bs-body-bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--bs-border-color); }
.search-trigger { display: flex; align-items: center; gap: .6rem; min-width: 0; width: min(420px, 100%); border: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); text-align: left; }
.search-trigger kbd { font-size: .7rem; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--sr-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.content { padding: 1.25rem; max-width: 1400px; width: 100%; margin: 0 auto; outline: none; }
@media (min-width: 768px) { .content { padding: 1.75rem 2rem; } }
.page-header { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.page-header h1 { font-size: 1.5rem; margin: 0; }
.notif-menu { width: min(360px, 92vw); max-height: 70vh; overflow: auto; }

/* Cards & stats */
.card { border-radius: var(--sr-radius); border-color: var(--bs-border-color); }
.card-header { background: transparent; font-weight: 600; }
.stat-card .stat-value { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.stat-card .stat-label { color: var(--bs-secondary-color); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.stat-icon { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.chart-box { position: relative; height: 260px; }
.chart-box.sm { height: 200px; }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--bs-secondary-color); }
.empty-state i { font-size: 2.5rem; display: block; margin-bottom: .5rem; opacity: .6; }

/* Strength meter */
.strength { display: flex; align-items: center; gap: .5rem; min-width: 110px; }
.strength .progress { flex: 1; height: .5rem; }
.strength small { width: 2.2rem; text-align: right; font-variant-numeric: tabular-nums; }
.s-weak { background-color: var(--sr-weak) !important; } .s-mid { background-color: var(--sr-mid) !important; }
.s-good { background-color: var(--sr-good) !important; } .s-strong { background-color: var(--sr-strong) !important; }
.tech-dot { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; margin-right: .35rem; }
.tag { display: inline-block; font-size: .72rem; padding: .1rem .5rem; border-radius: 99px; background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); margin: 0 .2rem .2rem 0; }
.tag-link { cursor: pointer; }
.table > :not(caption) > * > * { vertical-align: middle; }
.clickable-row { cursor: pointer; }
.fav-btn { color: var(--bs-secondary-color); } .fav-btn.on { color: #f59e0b; }

/* Code & markdown-lite */
pre.code { background: #0b1020; color: #e5e7eb; border-radius: .6rem; padding: 1rem; overflow: auto; font-size: .85rem; margin: .5rem 0; position: relative; }
pre.code code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; }
.md img { max-width: 100%; height: auto; }
.md p { margin-bottom: .6rem; } .md h1, .md h2, .md h3 { font-size: 1.05rem; margin: 1rem 0 .4rem; }
.md code:not(pre code) { background: var(--bs-tertiary-bg); padding: .1rem .35rem; border-radius: .3rem; font-size: .85em; }
.copy-btn { position: absolute; top: .4rem; right: .4rem; opacity: .7; }
textarea.code-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; tab-size: 2; }

/* Review / recall */
.review-card { max-width: 820px; margin: 0 auto; }
.review-progress { height: .4rem; }
.rating-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
@media (max-width: 575px) { .rating-grid { grid-template-columns: repeat(2, 1fr); } }
.rating-grid .btn { padding: .75rem .25rem; display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.rating-grid .btn small { opacity: .8; font-size: .7rem; }
.confidence-picker { display: inline-flex; gap: .35rem; }
.confidence-picker input { position: absolute; opacity: 0; }
.confidence-picker label { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 2px solid var(--bs-border-color); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-weight: 600; }
.confidence-picker input:checked + label { background: var(--sr-primary); border-color: var(--sr-primary); color: #fff; }
.confidence-picker input:focus-visible + label { outline: 3px solid color-mix(in srgb, var(--sr-primary) 70%, white); outline-offset: 2px; }

/* Flashcard flip */
.flip-wrap { perspective: 1200px; max-width: 720px; margin: 0 auto; }
.flip { position: relative; min-height: 280px; transition: transform .5s; transform-style: preserve-3d; cursor: pointer; }
.flip.flipped { transform: rotateY(180deg); }
.flip-face { position: absolute; inset: 0; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; border-radius: var(--sr-radius); background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); overflow: auto; }
.flip-face.back { transform: rotateY(180deg); background: color-mix(in srgb, var(--sr-primary) 8%, var(--bs-body-bg)); }
@media (prefers-reduced-motion: reduce) { .flip { transition: none; } }

/* Calendar */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-head { text-align: center; font-size: .75rem; color: var(--bs-secondary-color); padding: .25rem 0; }
.cal-day { min-height: 82px; padding: .35rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; background: var(--bs-body-bg); text-align: left; font-size: .8rem; display: flex; flex-direction: column; gap: 2px; }
.cal-day.muted { opacity: .35; } .cal-day.today { border-color: var(--sr-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sr-primary) 30%, transparent); }
.cal-day.selected { background: color-mix(in srgb, var(--sr-primary) 10%, var(--bs-body-bg)); }
.cal-day .pill { font-size: .68rem; padding: .05rem .4rem; border-radius: 99px; width: fit-content; }
@media (max-width: 575px) { .cal-day { min-height: 56px; font-size: .7rem; } .cal-day .pill { font-size: .6rem; padding: 0 .3rem; } }
.pill-due { background: #dbeafe; color: #1d4ed8; } .pill-over { background: #fee2e2; color: #b91c1c; }
.pill-done { background: #dcfce7; color: #15803d; } .pill-up { background: #ede9fe; color: #6d28d9; }

/* Timeline & roadmap */
.timeline { list-style: none; padding-left: 0; margin: 0; position: relative; }
.timeline::before { content: ''; position: absolute; left: 14px; top: 4px; bottom: 4px; width: 2px; background: var(--bs-border-color); }
.timeline li { position: relative; padding: 0 0 1rem 2.6rem; }
.timeline .dot { position: absolute; left: 4px; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--bs-body-bg); border: 2px solid var(--sr-primary); display: flex; align-items: center; justify-content: center; font-size: .65rem; color: var(--sr-primary); }
.roadmap { display: flex; flex-direction: column; gap: 0; }
.rm-step { display: flex; gap: 1rem; position: relative; }
.rm-step:not(:last-child)::before { content: ''; position: absolute; left: 19px; top: 40px; bottom: -8px; width: 3px; background: var(--bs-border-color); }
.rm-step.done:not(:last-child)::before { background: var(--sr-good); }
.rm-node { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--bs-body-bg); border: 3px solid var(--bs-border-color); font-weight: 700; z-index: 1; }
.rm-step.done .rm-node { border-color: var(--sr-good); background: var(--sr-good); color: #fff; }
.rm-step.in_progress .rm-node { border-color: var(--sr-mid); }
.rm-card { flex: 1; margin-bottom: .9rem; }
.rm-step.locked .rm-card { opacity: .65; }

/* Search results */
.search-item { display: flex; gap: .75rem; padding: .55rem .75rem; border-radius: .5rem; color: var(--bs-body-color) !important; text-decoration: none; align-items: flex-start; }
.search-item:hover, .search-item.active { background: color-mix(in srgb, var(--sr-primary) 12%, transparent); }
.search-group-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--bs-secondary-color); margin: .8rem .5rem .25rem; }

/* Simulator */
.timer { font-variant-numeric: tabular-nums; font-size: 1.4rem; font-weight: 700; }
.timer.low { color: var(--sr-weak); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .5; } }
.score-ring { width: 150px; height: 150px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto; font-size: 2.2rem; font-weight: 700; background: conic-gradient(var(--ring-color, var(--sr-primary)) calc(var(--pct) * 1%), var(--bs-border-color) 0); position: relative; }
.score-ring::before { content: ''; position: absolute; inset: 12px; border-radius: 50%; background: var(--bs-body-bg); }
.score-ring span { position: relative; }

/* Auth */
.auth-body { min-height: 100vh; background: radial-gradient(1200px 600px at 10% -10%, #c7d2fe55, transparent), radial-gradient(900px 500px at 100% 0, #ddd6fe55, transparent), var(--bs-tertiary-bg); }
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.auth-card { width: 100%; max-width: 440px; }
.kbd-hint kbd { font-size: .75rem; }
@media print { .sidebar, .topbar, .toast-container { display: none !important; } }

/* Markdown extras */
.md h4, .md h5, .md h6 { font-size: 1rem; margin: 1rem 0 .4rem; }
.md h4 { font-size: 1.2rem; } .md h3 { font-size: 1.35rem; }
.md blockquote { border-left: .25rem solid var(--bs-border-color); padding: .1rem 1rem; color: var(--bs-secondary-color); margin: .6rem 0; }
.md hr { margin: 1.25rem 0; }
.md table { font-size: .92rem; }
.md ul.task-list { list-style: none; padding-left: .25rem; }
.md mark { padding: 0 .15rem; }
.md .callout { border-left: .3rem solid var(--bs-primary); background: var(--bs-tertiary-bg); border-radius: .4rem; padding: .6rem 1rem; margin: .8rem 0; }
.md .callout p { margin: 0; }
.md .callout-title { font-weight: 600; margin-bottom: .2rem; }
.md .callout-tip { border-color: var(--bs-success); } .md .callout-warning, .md .callout-caution { border-color: var(--bs-warning); } .md .callout-important { border-color: var(--bs-danger); }

/* Snippets / highlighting */
pre.code code.hljs { background: transparent; padding: 0; }
pre.snip-code { max-height: 15rem; margin: .25rem 0 .5rem; }
.snip .fav-btn.on { color: #f59e0b; }

/* ---- Bookmarks ---- */
.bm-nav { display: flex; align-items: center; gap: .35rem; padding: .35rem .5rem; border-radius: .4rem; color: var(--bs-body-color); text-decoration: none; cursor: pointer; }
.bm-nav:hover { background: var(--bs-tertiary-bg); }
.bm-nav.active { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-weight: 600; }
.bm-nav.over { outline: 2px dashed var(--bs-primary); background: var(--bs-primary-bg-subtle); }
.bm-nav-link { display: flex; align-items: center; gap: .4rem; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.bm-nav-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-count { font-size: .75rem; color: var(--bs-secondary-color); }
.bm-dot { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; margin-right: .3rem; flex-shrink: 0; }
.bm-caret { width: 1rem; line-height: 1; color: var(--bs-secondary-color); }
.bm-col-actions { display: none; gap: .25rem; color: var(--bs-secondary-color); }
.bm-nav:hover .bm-col-actions, .bm-nav:focus-within .bm-col-actions { display: inline-flex; }
.bm-nav:hover .bm-count, .bm-nav:focus-within .bm-count { display: none; }
.bm-col-actions .btn { color: inherit; }
.bm-cover-box { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0; background: linear-gradient(135deg, var(--bs-primary-bg-subtle), var(--bs-tertiary-bg)); display: flex; align-items: center; justify-content: center; }
.bm-cover-box::before { content: attr(data-letter); font-size: 2.5rem; font-weight: 700; color: var(--bs-primary); opacity: .35; }
.bm-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bm-sel-wrap { position: absolute; top: .5rem; left: .5rem; opacity: 0; background: var(--bs-body-bg); border-radius: .3rem; padding: .15rem .3rem; line-height: 1; }
.bm-card:hover .bm-sel-wrap, .bm-card.selected .bm-sel-wrap, .bm-sel-wrap:focus-within { opacity: 1; }
.bm-type { position: absolute; bottom: .5rem; right: .5rem; font-weight: 500; opacity: .85; }
.bm-card.selected, .bm-row.selected { outline: 2px solid var(--bs-primary); }
.bm-card:hover { box-shadow: var(--bs-box-shadow); }
.bm-title { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.bm-title:hover { text-decoration: underline; color: var(--bs-primary); }
.bm-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bm-fav { width: 16px; height: 16px; border-radius: 3px; vertical-align: -3px; }
.bm-thumb { width: 7rem; height: 4.2rem; object-fit: cover; border-radius: .35rem; flex-shrink: 0; }
.bm-head { padding-top: .35rem; padding-bottom: .35rem; }
.bm-actions .fav-btn.on { color: #f59e0b; }
.bm-hl { border-left: 4px solid #fde047; padding: .25rem .6rem; margin-bottom: .6rem; background: var(--bs-tertiary-bg); border-radius: 0 .35rem .35rem 0; }
.bm-hl-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.min-w-0 { min-width: 0; }
@media (hover: none) { .bm-sel-wrap { opacity: 1; } .bm-col-actions { display: inline-flex; } }

/* ---------------------------------------------------------------- tasks (tk-*) */
.min-w-0 { min-width: 0; }
.tk-list { border: 1px solid var(--bs-border-color); border-radius: .5rem; background: var(--bs-body-bg); }
.tk-row { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; border-bottom: 1px solid var(--bs-border-color); }
.tk-row:last-child { border-bottom: 0; }
.tk-row:hover { background: var(--bs-tertiary-bg); }
.tk-row.done .tk-title { text-decoration: line-through; color: var(--bs-secondary-color); }
.tk-row.tk-sub { padding-left: 1.25rem; }
.tk-main { flex: 1; min-width: 0; cursor: pointer; }
.tk-title { font-weight: 500; overflow-wrap: anywhere; }
.tk-meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center; font-size: .78rem; color: var(--bs-secondary-color); margin-top: .15rem; }
.tk-proj { display: inline-flex; align-items: center; }
.tk-check { width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 2px solid var(--bs-secondary-color); background: transparent; display: inline-flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; font-size: .8rem; color: #fff; }
.tk-check.pri-2 { border-color: #0ea5e9; } .tk-check.pri-3 { border-color: #f59e0b; } .tk-check.pri-4 { border-color: #ef4444; }
.tk-check.on { background: #22c55e; border-color: #22c55e; }
.tk-bulk { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .5rem .75rem; margin-bottom: .5rem; background: var(--bs-primary-bg-subtle); border-radius: .5rem; }
.tk-timer { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .5rem .25rem .75rem; border-radius: 2rem; background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }
.tk-timer strong { font-variant-numeric: tabular-nums; }
.tk-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; align-items: start; }
.tk-col { background: var(--bs-tertiary-bg); border-radius: .5rem; padding: .5rem; }
.tk-col-head { display: flex; align-items: center; gap: .25rem; font-weight: 600; padding: .25rem .25rem .5rem; }
.tk-col-body { min-height: 5rem; display: flex; flex-direction: column; gap: .5rem; border-radius: .4rem; }
.tk-col-body.over, .tk-day.over { outline: 2px dashed var(--bs-primary); }
.tk-card { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-left: 4px solid var(--bs-secondary-bg); border-radius: .4rem; padding: .5rem .6rem; cursor: grab; }
.tk-card.dragging, .tk-chip.dragging { opacity: .4; }
.pri-b2 { border-left-color: #0ea5e9 !important; } .pri-b3 { border-left-color: #f59e0b !important; } .pri-b4 { border-left-color: #ef4444 !important; }
.tk-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--bs-border-color); border-radius: .5rem; overflow: hidden; }
.tk-cal-h { text-align: center; font-size: .75rem; font-weight: 600; padding: .35rem 0; background: var(--bs-tertiary-bg); }
.tk-day { min-height: 6.5rem; padding: .25rem; border-top: 1px solid var(--bs-border-color); border-left: 1px solid var(--bs-border-color); min-width: 0; }
.tk-day:nth-child(7n+8) { border-left: 0; }
.tk-day.dim { background: var(--bs-tertiary-bg); opacity: .65; }
.tk-day.today .tk-day-n button { background: var(--bs-primary); color: #fff !important; border-radius: 50%; width: 1.4rem; height: 1.4rem; }
.tk-day-n { font-size: .78rem; margin-bottom: .15rem; }
.tk-day-n button { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem; }
.tk-chip { font-size: .72rem; padding: .1rem .3rem; margin-bottom: .15rem; border-radius: .25rem; background: var(--bs-primary-bg-subtle); border-left: 3px solid var(--bs-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: grab; }
.tk-chip.done { text-decoration: line-through; opacity: .6; }
.tk-comment { padding: .4rem .6rem; margin-bottom: .5rem; background: var(--bs-tertiary-bg); border-radius: .4rem; }
@media (max-width: 767.98px) {
  .tk-board { grid-template-columns: 1fr; }
  .tk-day { min-height: 4.2rem; }
  .tk-chip { font-size: .62rem; }
}