/* FlashCards — CSS v1 — Glass morphism, same palette as FocusFlow */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root {
  --bg: #080d1a;
  --glass: rgba(8,13,26,0.72);
  --surface: rgba(255,255,255,0.05);
  --surface-h: rgba(255,255,255,0.09);
  --border: rgba(255,255,255,0.08);
  --border-h: rgba(255,255,255,0.16);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.38);
  --sec: rgba(255,255,255,0.60);
  --accent: #4fffa4;
  --accent2: #7b93ff;
  --accent-rgb: 79,255,164;
  --accent2-rgb: 123,147,255;
  --danger: #ff6b6b;
  --warn: #ffb347;
  --font: 'Outfit', sans-serif;
  --mono: 'DM Mono', monospace;
  --r: 14px;
  --r-sm: 9px;
  --r-lg: 20px;
  --t: .18s cubic-bezier(.4,0,.2,1);
  --shadow: 0 8px 32px rgba(0,0,0,0.4);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html,body {
  height:100%; overflow:hidden;
  font-family:var(--font); font-size:14px;
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

/* ── Background ── */
#bgLayer {
  position:fixed; inset:0; z-index:0;
  background:linear-gradient(135deg,#080d1a 0%,#0d1a2e 100%);
  transition:background .6s ease;
}
body::before,body::after {
  content:''; position:fixed; border-radius:50%;
  pointer-events:none; z-index:1; filter:blur(120px);
}
body::before { width:700px; height:700px; top:-200px; left:-150px; background:radial-gradient(circle,rgba(79,255,164,.04) 0%,transparent 70%); }
body::after  { width:600px; height:600px; bottom:-150px; right:-100px; background:radial-gradient(circle,rgba(123,147,255,.04) 0%,transparent 70%); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-h); border-radius:2px; }

/* ── Glass ── */
.glass {
  background:var(--glass);
  backdrop-filter:blur(24px) saturate(1.5);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);
  border:1px solid var(--border);
  border-radius:var(--r);
}

/* ── Screens ── */
.screen { position:fixed; inset:0; z-index:10; display:none; overflow-y:auto; }
.screen.active { display:flex; }

/* ── AUTH SCREEN ── */
#authScreen {
  align-items:center; justify-content:center;
  background:var(--bg);
}
.auth-box {
  width:100%; max-width:400px; padding:40px;
  margin:20px;
}
.auth-logo {
  text-align:center; margin-bottom:32px;
}
.auth-logo .logo-icon {
  font-size:40px; display:block; margin-bottom:8px;
}
.auth-logo h1 {
  font-size:24px; font-weight:600;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.auth-logo p { color:var(--muted); font-size:13px; margin-top:4px; }

.auth-tabs { display:flex; gap:4px; margin-bottom:24px; background:var(--surface); border-radius:var(--r-sm); padding:4px; }
.auth-tab {
  flex:1; padding:8px; border:none; background:transparent;
  color:var(--muted); font-family:var(--font); font-size:13px;
  border-radius:6px; cursor:pointer; transition:all var(--t);
}
.auth-tab.active { background:var(--surface-h); color:var(--text); }

.auth-form { display:none; flex-direction:column; gap:12px; }
.auth-form.active { display:flex; }

.form-group { display:flex; flex-direction:column; gap:6px; }
.form-label { font-size:12px; color:var(--muted); font-weight:500; }

.error-msg { color:var(--danger); font-size:12px; padding:8px 12px; background:rgba(255,107,107,.08); border-radius:var(--r-sm); display:none; }
.error-msg:not(.hidden) { display:block; }

/* ── MAIN APP ── */
#appScreen {
  display:none; flex-direction:column;
  overflow:hidden;
}
#appScreen.active { display:flex; }

/* ── TOP NAV ── */
.topnav {
  position:relative; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; border-bottom:1px solid var(--border);
  background:rgba(8,13,26,0.85);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  flex-shrink:0;
}
.nav-brand { display:flex; align-items:center; gap:10px; }
.nav-brand .brand-icon { font-size:22px; }
.nav-brand h1 { font-size:16px; font-weight:600; color:var(--text); }

.nav-tabs { display:flex; gap:4px; }
.nav-tab {
  display:flex; align-items:center; gap:6px;
  padding:7px 14px; border:none; background:transparent;
  color:var(--muted); font-family:var(--font); font-size:13px;
  border-radius:var(--r-sm); cursor:pointer; transition:all var(--t);
}
.nav-tab:hover { color:var(--text); background:var(--surface); }
.nav-tab.active { color:var(--accent); background:rgba(var(--accent-rgb),.1); }
.nav-tab .tab-icon { font-size:15px; }

.nav-actions { display:flex; align-items:center; gap:8px; }
.user-dot {
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg,rgba(var(--accent-rgb),.2),rgba(var(--accent2-rgb),.2));
  border:1px solid rgba(var(--accent-rgb),.3);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:600; color:var(--accent);
  cursor:pointer; transition:all var(--t);
}
.user-dot:hover { border-color:rgba(var(--accent-rgb),.5); }

/* ── MAIN CONTENT ── */
.main-content {
  flex:1; overflow:hidden; position:relative;
}
.view { display:none; height:100%; overflow-y:auto; padding:24px; }
.view.active { display:block; }

/* ── PAGE HEADERS ── */
.page-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:24px;
}
.page-title { font-size:20px; font-weight:600; }
.page-subtitle { color:var(--muted); font-size:13px; margin-top:2px; }

/* ── DASHBOARD ── */
.stats-row {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px;
  margin-bottom:24px;
}
.stat-card {
  padding:16px 18px; border-radius:var(--r);
  background:var(--surface); border:1px solid var(--border);
  transition:all var(--t);
}
.stat-card:hover { border-color:var(--border-h); background:var(--surface-h); }
.stat-label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.stat-value { font-size:28px; font-weight:700; margin-top:4px; }
.stat-sub { font-size:11px; color:var(--muted); margin-top:2px; }

.section-title { font-size:13px; font-weight:600; color:var(--sec); margin-bottom:12px; letter-spacing:.04em; text-transform:uppercase; }

/* ── DECK GRID ── */
.decks-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px;
}
.deck-card {
  padding:20px; border-radius:var(--r); border:1px solid var(--border);
  background:var(--surface); cursor:pointer; transition:all var(--t);
  display:flex; flex-direction:column; gap:12px;
  position:relative; overflow:hidden;
}
.deck-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--deck-color, var(--accent));
  opacity:.6;
}
.deck-card:hover { border-color:var(--border-h); background:var(--surface-h); transform:translateY(-2px); box-shadow:var(--shadow); }
.deck-header { display:flex; align-items:center; gap:10px; }
.deck-icon { font-size:24px; }
.deck-title { font-size:15px; font-weight:600; flex:1; }
.deck-desc { font-size:12px; color:var(--muted); line-height:1.5; }
.deck-meta { display:flex; align-items:center; justify-content:space-between; }
.deck-count { font-size:12px; color:var(--muted); }
.deck-due {
  font-size:11px; padding:3px 8px; border-radius:20px;
  background:rgba(var(--accent-rgb),.1); color:var(--accent);
  border:1px solid rgba(var(--accent-rgb),.2);
}
.deck-due.zero { opacity:0; }

.deck-add-btn {
  padding:20px; border-radius:var(--r);
  border:1px dashed var(--border); background:transparent;
  color:var(--muted); font-family:var(--font); font-size:14px;
  cursor:pointer; transition:all var(--t);
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:120px;
}
.deck-add-btn:hover { border-color:rgba(var(--accent-rgb),.3); color:var(--accent); background:rgba(var(--accent-rgb),.04); }

/* ── CARDS VIEW ── */
.cards-toolbar {
  display:flex; align-items:center; gap:12px; margin-bottom:20px;
  flex-wrap:wrap;
}
.search-inp {
  flex:1; min-width:200px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-sm);
  color:var(--text); font-family:var(--font); font-size:14px;
  padding:9px 14px; outline:none; transition:border-color var(--t);
}
.search-inp:focus { border-color:rgba(var(--accent-rgb),.35); }
.search-inp::placeholder { color:var(--muted); }

.cards-list { display:flex; flex-direction:column; gap:8px; }
.card-item {
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  border-radius:var(--r-sm); border:1px solid var(--border);
  background:var(--surface); transition:all var(--t);
}
.card-item:hover { border-color:var(--border-h); background:var(--surface-h); }
.card-front { flex:1; font-size:14px; }
.card-back { flex:1; font-size:13px; color:var(--muted); }
.card-tags { display:flex; gap:4px; flex-wrap:wrap; }
.tag {
  font-size:10px; padding:2px 7px; border-radius:20px;
  background:rgba(var(--accent2-rgb),.1); color:var(--accent2);
  border:1px solid rgba(var(--accent2-rgb),.2);
}
.card-due-badge {
  font-size:10px; padding:2px 7px; border-radius:20px;
  background:rgba(var(--accent-rgb),.1); color:var(--accent);
  white-space:nowrap;
}
.card-due-badge.overdue {
  background:rgba(255,179,71,.1); color:var(--warn);
}

/* ── REVIEW / STUDY MODE ── */
#reviewView {
  display:none; height:100%; overflow:hidden;
  flex-direction:column; align-items:center; justify-content:center;
  padding:24px;
}
#reviewView.active { display:flex; }

.review-header {
  width:100%; max-width:600px; display:flex;
  align-items:center; justify-content:space-between; margin-bottom:24px;
}
.review-progress { flex:1; height:4px; background:var(--surface); border-radius:2px; margin:0 16px; overflow:hidden; }
.review-progress-bar { height:100%; background:var(--accent); border-radius:2px; transition:width .3s ease; }

.flashcard-wrap {
  width:100%; max-width:600px; perspective:1000px;
  flex:1; max-height:360px; cursor:pointer;
}
.flashcard {
  width:100%; height:100%; position:relative;
  transform-style:preserve-3d; transition:transform 0.5s cubic-bezier(.4,0,.2,1);
}
.flashcard.flipped { transform:rotateY(180deg); }
.card-face {
  position:absolute; inset:0; border-radius:var(--r-lg);
  border:1px solid var(--border); backface-visibility:hidden;
  display:flex; align-items:center; justify-content:center;
  padding:40px; text-align:center;
  background:var(--glass);
  backdrop-filter:blur(24px) saturate(1.5);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);
}
.card-face.front { background:linear-gradient(135deg,rgba(79,255,164,.05),rgba(123,147,255,.05)); }
.card-face.back  { background:linear-gradient(135deg,rgba(123,147,255,.05),rgba(79,255,164,.05)); transform:rotateY(180deg); }
.card-face-label {
  position:absolute; top:16px; left:20px;
  font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);
}
.card-face-text { font-size:18px; font-weight:500; line-height:1.6; }

.flip-hint { color:var(--muted); font-size:12px; margin-top:12px; text-align:center; }

.review-actions { margin-top:20px; width:100%; max-width:600px; }
.rating-buttons { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.rating-btn {
  padding:12px 8px; border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface); color:var(--text); font-family:var(--font);
  font-size:12px; cursor:pointer; transition:all var(--t); text-align:center;
}
.rating-btn:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.rating-btn.again  { border-color:rgba(255,107,107,.3); }
.rating-btn.again:hover  { background:rgba(255,107,107,.1); border-color:rgba(255,107,107,.5); color:var(--danger); }
.rating-btn.hard   { border-color:rgba(255,179,71,.3); }
.rating-btn.hard:hover   { background:rgba(255,179,71,.1); border-color:rgba(255,179,71,.5); color:var(--warn); }
.rating-btn.good   { border-color:rgba(79,255,164,.3); }
.rating-btn.good:hover   { background:rgba(79,255,164,.1); border-color:rgba(79,255,164,.5); color:var(--accent); }
.rating-btn.easy   { border-color:rgba(123,147,255,.3); }
.rating-btn.easy:hover   { background:rgba(123,147,255,.1); border-color:rgba(123,147,255,.5); color:var(--accent2); }
.rating-btn .rating-interval { display:block; font-size:10px; color:var(--muted); margin-top:3px; }

.simple-rating { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }

.review-empty {
  display:flex; flex-direction:column; align-items:center; gap:16px;
  color:var(--muted); text-align:center;
}
.review-empty .empty-icon { font-size:48px; opacity:.4; }

/* ── DOCUMENT UPLOAD VIEW ── */
.upload-zone {
  border:2px dashed var(--border); border-radius:var(--r-lg);
  padding:48px; text-align:center; cursor:pointer; transition:all var(--t);
  background:var(--surface);
}
.upload-zone:hover, .upload-zone.drag-over {
  border-color:rgba(var(--accent-rgb),.4);
  background:rgba(var(--accent-rgb),.04);
}
.upload-icon { font-size:40px; display:block; margin-bottom:12px; opacity:.5; }
.upload-title { font-size:16px; font-weight:500; margin-bottom:8px; }
.upload-sub { font-size:13px; color:var(--muted); }
.upload-types { display:flex; gap:8px; justify-content:center; margin-top:16px; flex-wrap:wrap; }
.file-type-badge {
  font-size:11px; padding:3px 10px; border-radius:20px;
  border:1px solid var(--border); color:var(--muted);
}

.docs-list { display:flex; flex-direction:column; gap:10px; margin-top:24px; }
.doc-item {
  display:flex; align-items:center; gap:14px; padding:16px;
  border-radius:var(--r-sm); border:1px solid var(--border);
  background:var(--surface); transition:all var(--t);
}
.doc-item:hover { border-color:var(--border-h); }
.doc-type-icon { font-size:24px; flex-shrink:0; }
.doc-info { flex:1; min-width:0; }
.doc-name { font-size:14px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.doc-meta { font-size:12px; color:var(--muted); margin-top:2px; }
.doc-status {
  font-size:11px; padding:3px 10px; border-radius:20px; flex-shrink:0;
}
.doc-status.pending   { background:rgba(255,179,71,.1); color:var(--warn); border:1px solid rgba(255,179,71,.2); }
.doc-status.processing{ background:rgba(123,147,255,.1); color:var(--accent2); border:1px solid rgba(123,147,255,.2); animation:pulse 1.5s infinite; }
.doc-status.done      { background:rgba(79,255,164,.1); color:var(--accent); border:1px solid rgba(79,255,164,.2); }
.doc-status.error     { background:rgba(255,107,107,.1); color:var(--danger); border:1px solid rgba(255,107,107,.2); }
.doc-status.cancelled { background:var(--surface); color:var(--muted); border:1px solid var(--border); }

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }

/* ── AI SUGGESTIONS PANEL ── */
.suggestions-panel {
  position:fixed; inset:0; z-index:200;
  display:none; align-items:center; justify-content:center;
  background:rgba(8,13,26,.85);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.suggestions-panel.active { display:flex; }
.suggestions-box {
  width:100%; max-width:760px; max-height:85vh;
  margin:20px; display:flex; flex-direction:column;
  border-radius:var(--r-lg); border:1px solid var(--border);
  background:rgba(8,13,26,.95);
  backdrop-filter:blur(32px); -webkit-backdrop-filter:blur(32px);
  overflow:hidden;
}
.suggestions-header {
  padding:20px 24px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.suggestions-header h3 { font-size:16px; font-weight:600; }
.suggestions-body { flex:1; overflow-y:auto; padding:20px 24px; }
.suggestion-card {
  display:flex; gap:12px; padding:14px; margin-bottom:10px;
  border-radius:var(--r-sm); border:1px solid var(--border);
  background:var(--surface); cursor:pointer; transition:all var(--t);
  user-select:none;
}
.suggestion-card:hover { border-color:var(--border-h); }
.suggestion-card.selected {
  border-color:rgba(var(--accent-rgb),.4);
  background:rgba(var(--accent-rgb),.06);
}
.suggestion-check {
  width:18px; height:18px; border-radius:4px; flex-shrink:0; margin-top:2px;
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  font-size:11px; transition:all var(--t);
}
.suggestion-card.selected .suggestion-check {
  background:var(--accent); border-color:var(--accent); color:#000;
}
.suggestion-content { flex:1; }
.suggestion-front { font-size:14px; font-weight:500; margin-bottom:6px; }
.suggestion-back  { font-size:13px; color:var(--muted); }

.suggestions-footer {
  padding:16px 24px; border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap;
}
.select-deck-wrap { display:flex; align-items:center; gap:10px; flex:1; }

/* ── TEXT SELECTION TOOLBAR ── */
.text-view-wrap { position:relative; }
.extracted-text {
  font-size:13px; line-height:1.8; color:var(--sec);
  white-space:pre-wrap; word-break:break-word;
  max-height:400px; overflow-y:auto; padding:16px;
  border-radius:var(--r-sm); border:1px solid var(--border);
  background:var(--surface); cursor:text; user-select:text;
}
.selection-toolbar {
  position:fixed; z-index:300; display:none;
  background:rgba(8,13,26,.95); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:6px 10px; gap:6px;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:var(--shadow);
}
.selection-toolbar.active { display:flex; }

/* ── MODAL ── */
.modal-overlay {
  position:fixed; inset:0; z-index:200;
  background:rgba(8,13,26,.85); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center;
}
.modal-overlay.active { display:flex; }
.modal {
  width:100%; max-width:480px; margin:20px;
  border-radius:var(--r-lg); border:1px solid var(--border);
  background:rgba(8,13,26,.95); backdrop-filter:blur(32px); -webkit-backdrop-filter:blur(32px);
  overflow:hidden;
}
.modal-header { padding:20px 24px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.modal-header h3 { font-size:16px; font-weight:600; }
.modal-body { padding:24px; display:flex; flex-direction:column; gap:16px; }
.modal-footer { padding:16px 24px; border-top:1px solid var(--border); display:flex; gap:8px; justify-content:flex-end; }

/* ── SETTINGS PANEL ── */
.settings-overlay {
  position:fixed; inset:0; z-index:200;
  background:rgba(8,13,26,.85); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:flex-end;
}
.settings-overlay.active { display:flex; }
.settings-panel {
  width:100%; max-width:360px; height:100%;
  border-left:1px solid var(--border);
  background:rgba(8,13,26,.97); backdrop-filter:blur(32px); -webkit-backdrop-filter:blur(32px);
  display:flex; flex-direction:column; overflow:hidden;
}
.settings-header { padding:20px 24px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.settings-header h3 { font-size:16px; font-weight:600; }
.settings-body { flex:1; overflow-y:auto; padding:24px; }
.settings-section { margin-bottom:28px; }
.settings-section-title { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:14px; }
.settings-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); gap:12px; }
.settings-row:last-child { border-bottom:none; }
.settings-row-label { font-size:13px; }
.settings-row-sub { font-size:11px; color:var(--muted); margin-top:2px; }

/* Toggle switch */
.toggle {
  position:relative; width:40px; height:22px; flex-shrink:0;
}
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider {
  position:absolute; inset:0; cursor:pointer;
  background:var(--surface-h); border:1px solid var(--border);
  border-radius:11px; transition:all var(--t);
}
.toggle-slider::before {
  content:''; position:absolute; height:16px; width:16px;
  left:2px; bottom:2px; background:var(--muted);
  border-radius:50%; transition:all var(--t);
}
.toggle input:checked + .toggle-slider { background:rgba(var(--accent-rgb),.2); border-color:rgba(var(--accent-rgb),.4); }
.toggle input:checked + .toggle-slider::before { transform:translateX(18px); background:var(--accent); }

/* Color picker row */
.color-options { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.color-opt {
  width:24px; height:24px; border-radius:50%; cursor:pointer;
  border:2px solid transparent; transition:all var(--t);
}
.color-opt.selected, .color-opt:hover { border-color:var(--text); transform:scale(1.15); }

/* App switcher */
.app-switcher {
  display:flex; gap:8px; margin-top:4px;
}
.app-switch-btn {
  flex:1; padding:10px; border-radius:var(--r-sm);
  border:1px solid var(--border); background:var(--surface);
  color:var(--muted); font-family:var(--font); font-size:12px;
  cursor:pointer; transition:all var(--t); text-align:center;
  text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:4px;
}
.app-switch-btn:hover { border-color:var(--border-h); color:var(--text); }
.app-switch-btn.current { border-color:rgba(var(--accent-rgb),.3); color:var(--accent); background:rgba(var(--accent-rgb),.06); }
.app-switch-btn .switch-icon { font-size:18px; }

/* ── INPUTS & BUTTONS ── */
.inp {
  width:100%; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-sm); color:var(--text); font-family:var(--font);
  font-size:14px; padding:10px 14px; outline:none; transition:border-color var(--t);
}
.inp:focus { border-color:rgba(var(--accent-rgb),.35); }
.inp::placeholder { color:var(--muted); }
textarea.inp { resize:vertical; min-height:80px; }
select.inp { cursor:pointer; }

.btn-main {
  padding:11px 20px;
  background:linear-gradient(135deg,rgba(79,255,164,.14),rgba(123,147,255,.14));
  border:1px solid rgba(79,255,164,.25); border-radius:var(--r-sm);
  color:var(--text); font-family:var(--font); font-size:14px; font-weight:500;
  cursor:pointer; transition:all var(--t);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  white-space:nowrap;
}
.btn-main:hover { background:linear-gradient(135deg,rgba(79,255,164,.22),rgba(123,147,255,.22)); border-color:rgba(79,255,164,.4); transform:translateY(-1px); }
.btn-main:disabled { opacity:.4; cursor:not-allowed; transform:none; }
.btn-main.full { width:100%; }

.btn-ghost {
  padding:9px 16px; background:transparent; border:1px solid var(--border);
  border-radius:var(--r-sm); color:var(--muted); font-family:var(--font);
  font-size:13px; cursor:pointer; transition:all var(--t);
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.btn-ghost:hover { border-color:var(--border-h); color:var(--text); }
.btn-ghost.danger { border-color:rgba(255,107,107,.25); color:var(--danger); }
.btn-ghost.danger:hover { background:rgba(255,107,107,.08); }
.btn-ghost.sm { padding:6px 12px; font-size:12px; }

.ico-btn {
  background:none; border:none; color:var(--muted); cursor:pointer;
  font-size:16px; padding:6px 8px; border-radius:6px; transition:all var(--t);
  display:inline-flex; align-items:center; justify-content:center;
}
.ico-btn:hover { color:var(--text); background:var(--surface-h); }

/* ── TOAST ── */
.toast-container { position:fixed; bottom:24px; right:24px; z-index:999; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast {
  padding:12px 18px; border-radius:var(--r-sm); font-size:13px;
  border:1px solid var(--border); background:rgba(8,13,26,.95);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  display:flex; align-items:center; gap:8px;
  pointer-events:all; animation:slideIn .2s ease;
  max-width:320px; box-shadow:var(--shadow);
}
.toast.success { border-color:rgba(var(--accent-rgb),.3); }
.toast.error   { border-color:rgba(255,107,107,.3); color:var(--danger); }
.toast.info    { border-color:rgba(var(--accent2-rgb),.3); }
@keyframes slideIn { from{transform:translateX(20px);opacity:0} to{transform:translateX(0);opacity:1} }

/* ── EMPTY STATES ── */
.empty-state { display:flex; flex-direction:column; align-items:center; gap:12px; padding:48px 24px; color:var(--muted); text-align:center; }
.empty-state .empty-icon { font-size:40px; opacity:.35; }
.empty-state h3 { font-size:16px; font-weight:500; color:var(--sec); }
.empty-state p { font-size:13px; max-width:280px; line-height:1.6; }

/* ── SPINNER ── */
.spinner {
  width:16px; height:16px; border:2px solid var(--border);
  border-top-color:var(--accent); border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg)} }

/* ── UTILS ── */
.hidden { display:none !important; }
.flex { display:flex; }
.flex-1 { flex:1; }
.gap-8 { gap:8px; }
.gap-12 { gap:12px; }
.muted { color:var(--muted); }
.accent { color:var(--accent); }
.divider { height:1px; background:var(--border); margin:16px 0; }

/* ── REVIEW COMPLETE SCREEN ── */
.review-complete {
  display:flex; flex-direction:column; align-items:center; gap:20px;
  text-align:center; padding:40px;
}
.review-complete .complete-icon { font-size:56px; }
.review-complete h2 { font-size:22px; font-weight:700; }
.review-complete .complete-stats { display:flex; gap:24px; margin-top:8px; }
.complete-stat { text-align:center; }
.complete-stat .val { font-size:28px; font-weight:700; color:var(--accent); }
.complete-stat .lbl { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }

/* ── EXCEL CHART PREVIEW ── */
.chart-preview { border-radius:var(--r-sm); border:1px solid var(--border); overflow:hidden; margin-top:12px; }

/* ── RESPONSIVE ── */
@media (max-width:640px) {
  .nav-tabs { display:none; }
  .topnav { padding:10px 16px; }
  .view { padding:16px; }
  .decks-grid { grid-template-columns:1fr 1fr; }
  .rating-buttons { grid-template-columns:repeat(2,1fr); }
  .flashcard-wrap { max-height:280px; }
}
@media (max-width:400px) {
  .decks-grid { grid-template-columns:1fr; }
  .stats-row { grid-template-columns:repeat(2,1fr); }
}