/* ============================================================
   Darkfiber — Security Engineer Pro  |  styles.css
   ============================================================ */
:root {
  --bg: #0a0d12;
  --bg-card: #11151c;
  --bg-sidebar: #0a0d12;
  --bg-input: #151a23;
  --bg-hover: rgba(0,229,255,.06);
  --bg-surface: #131820;
  --accent: #00e5ff;
  --accent-hover: #00bcd4;
  --accent-glow: rgba(0,229,255,.18);
  --accent-soft: rgba(0,229,255,.1);
  --success: #4ade80;
  --success-bg: rgba(74,222,128,.1);
  --warning: #fbbf24;
  --warning-bg: rgba(251,191,36,.1);
  --danger: #f87171;
  --danger-bg: rgba(248,113,113,.1);
  --info: #7dd3fc;
  --info-bg: rgba(125,211,252,.08);
  --text: #e2e8f0;
  --text-secondary: #b0b8c4;
  --text-muted: #6b7280;
  --text-subtle: #3f4550;
  --border: #1a2030;
  --border-muted: #151b26;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow: 0 8px 32px rgba(0,0,0,.55);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.3);
  --sidebar-w: 0px;
  --nav-h: 56px;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --transition: .18s ease;
}

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

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ═══════════════ DARKFIBER TOP NAVBAR ═══════════════ */
.df-topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(10,13,18,.92); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  height: var(--nav-h);
}
.df-nav-inner {
  display: flex; align-items: center; gap: .15rem;
  height: var(--nav-h); padding: 0 .75rem;
  max-width: 1600px; margin: 0 auto;
}

/* Logo */
.df-logo {
  display: flex; align-items: center; gap: .5rem;
  text-decoration: none; flex-shrink: 0; margin-right: .5rem;
}
.df-logo img { height: 30px; width: auto; filter: drop-shadow(0 0 6px rgba(0,229,255,.25)); }

/* Nav Links */
.df-nav-links {
  display: flex; align-items: center; gap: .1rem; flex: 1;
  overflow: visible;
}
.df-nav-link {
  display: flex; align-items: center; gap: .35rem;
  padding: .4rem .65rem; border-radius: 8px;
  font-size: .78rem; font-weight: 500; color: var(--text-muted);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: none; background: none; font-family: inherit;
  transition: color .15s, background .15s;
}
.df-nav-link:hover { color: var(--text); background: var(--bg-hover); }
.df-nav-link.active, .df-nav-link[data-view].active, .df-dd-trigger.active { color: var(--accent); background: var(--accent-soft); }
.df-dd-arrow { font-size: .5rem; margin-left: .15rem; transition: transform .2s; opacity: .5; }
.df-dd-trigger { cursor: pointer; }

/* Dropdowns */
.df-dropdown { position: relative; }
.df-dropdown .df-dd-menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0;
  background: rgba(17,21,28,.97); backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0,0,0,.55); padding: .35rem;
  min-width: 200px; z-index: 1100;
  animation: dfDropIn .15s ease;
}
.df-dd-right .df-dd-menu { left: auto; right: 0; }
@keyframes dfDropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.df-dropdown.open > .df-dd-menu,
.df-dropdown.open .df-dd-menu { display: block; }
.df-dropdown.open .df-dd-arrow { transform: rotate(180deg); }
.df-dd-item {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  padding: .45rem .65rem; border: none; background: none;
  color: var(--text-muted); font-size: .8rem; cursor: pointer;
  border-radius: 6px; transition: all .12s; text-decoration: none; font-family: inherit;
}
.df-dd-item:hover { background: var(--bg-hover); color: var(--text); }
.df-dd-item.active { color: var(--accent); font-weight: 500; }
.df-dd-item i { width: 1rem; text-align: center; font-size: .8rem; opacity: .7; }
.df-dd-sep { height: 1px; background: var(--border); margin: .25rem 0; }
.df-badge-ai {
  font-size: .55rem; font-weight: 700; background: linear-gradient(135deg, var(--accent), #00b8d4);
  color: #000; border-radius: 4px; padding: 1px 5px; letter-spacing: .04em; margin-left: auto;
}
.df-dd-wide { min-width: 280px; }
.df-dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem; }

/* Account dropdown user info */
.df-dd-user-info {
  padding: .45rem .65rem; display: flex; flex-direction: column; gap: .25rem;
}
.df-dd-email { font-size: .72rem; color: var(--text-muted); }
.df-dd-danger { color: var(--danger) !important; }
.df-dd-danger:hover { background: rgba(248,113,113,.08) !important; }

/* Right side icons */
.df-nav-right { display: flex; align-items: center; gap: .25rem; margin-left: auto; flex-shrink: 0; }
.df-icon-btn {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid transparent;
  background: none; color: var(--text-muted); font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s;
}
.df-icon-btn:hover { color: var(--accent); background: var(--bg-hover); border-color: var(--border); }
.df-btn-login {
  display: flex; align-items: center; gap: .35rem;
  padding: .35rem .75rem; border-radius: 8px;
  background: var(--accent); color: #000; border: none;
  font-size: .78rem; font-weight: 600; cursor: pointer;
  transition: all .15s; font-family: inherit;
}
.df-btn-login:hover { background: var(--accent-hover); box-shadow: 0 2px 12px rgba(0,229,255,.25); }
.df-avatar-btn {
  display: flex; align-items: center; gap: .4rem;
  padding: .3rem .55rem; border-radius: 8px; border: 1px solid var(--border);
  background: none; color: var(--text-muted); cursor: pointer;
  font-size: .78rem; font-family: inherit; transition: all .15s;
}
.df-avatar-btn:hover { border-color: var(--accent); color: var(--text); }
.df-avatar {
  width: 26px; height: 26px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-hover); color: var(--accent); font-size: .85rem;
}
.df-user-name { font-size: .78rem; font-weight: 500; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Hamburger (mobile only) */
.df-hamburger {
  display: none; width: 36px; height: 36px; border-radius: 8px;
  border: 1px solid var(--border); background: none; color: var(--text);
  font-size: 1rem; cursor: pointer; align-items: center; justify-content: center;
  transition: all .15s;
}
.df-hamburger:hover { background: var(--bg-hover); border-color: var(--accent); }

/* Mobile overlay */
.df-mobile-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5);
  z-index: 999; backdrop-filter: blur(2px);
}
.df-mobile-overlay.open { display: block; }

/* Pomodoro widget (now floats below navbar) */
.pomodoro-widget {
  position: absolute; top: calc(var(--nav-h) + 4px); right: 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .65rem .85rem;
  box-shadow: var(--shadow); z-index: 1050;
  display: none; width: 220px;
}
.pomodoro-widget.show { display: block; }
.pomodoro-widget.running { display: block; border-color: var(--accent); }

/* ═══════════ MOBILE TOP NAV ═══════════ */
@media (max-width: 900px) {
  .df-nav-links { display: none; }
  .df-nav-links.mobile-open {
    display: flex; flex-direction: column; align-items: stretch;
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    background: rgba(10,13,18,.97); backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    padding: .5rem; max-height: calc(100vh - var(--nav-h));
    overflow-y: auto; z-index: 1050;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
  }
  .df-hamburger { display: flex; }
  .df-nav-link { padding: .55rem .75rem; font-size: .85rem; }
  .df-dropdown .df-dd-menu {
    position: static; box-shadow: none; border: none;
    background: rgba(255,255,255,.03); margin-left: .5rem;
    padding: .2rem .25rem; border-radius: 6px;
  }
  .df-dd-wide { min-width: auto; }
  .df-dd-grid { grid-template-columns: 1fr; }
  .df-login-text { display: none; }
  .df-user-name { display: none; }
  .pomodoro-widget { right: 8px; }
}

/* ======================== MOBILE HEADER (legacy — hidden) ======================== */
.mobile-header { display: none !important; }
.mobile-menu-btn,
.mobile-account-btn { display: none !important; }

/* ======================== SCROLL PROGRESS ======================== */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: transparent; z-index: 9999;
}
.scroll-bar {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent), #00b8d4);
  transition: width .1s linear;
}

/* ======================== SIDEBAR ======================== */
.sidebar {
  width: var(--sidebar-w); min-width: var(--sidebar-w);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  transition: width .25s cubic-bezier(.4,0,.2,1), min-width .25s cubic-bezier(.4,0,.2,1);
  overflow: hidden; overflow-y: auto;
  height: 100vh; position: sticky; top: 0;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); }
.sidebar.collapsed { width: 56px; min-width: 56px; }
.sidebar.collapsed .nav-item span,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .logo span,
.sidebar.collapsed .pomodoro-widget,
.sidebar.collapsed .progress-section { display: none; }
.sidebar.collapsed .nav-item { justify-content: center; padding: .55rem; }
.sidebar.collapsed .sidebar-footer { padding: .5rem; justify-content: center; }

.sidebar-header {
  padding: .85rem 1rem;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg-sidebar); z-index: 10;
}
.logo { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .95rem; color: var(--accent); white-space: nowrap; letter-spacing: -.02em; }
.logo i { font-size: 1.15rem; filter: drop-shadow(0 0 6px var(--accent-glow)); }
.sidebar-toggle { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; padding: .3rem; border-radius: var(--radius); transition: all var(--transition); }
.sidebar-toggle:hover { background: var(--bg-hover); color: var(--text); transform: scale(1.08); }

/* Pomodoro Widget */
.pomodoro-widget {
  margin: .5rem .75rem 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .5rem .7rem;
  transition: border-color .2s;
  display: none; /* Hidden by default — toggled by user */
}
.pomodoro-widget.show { display: block; }
.pomodoro-widget.running { border-color: var(--accent); display: block; }
.pomodoro-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .3rem; font-size: .72rem; color: var(--text-muted); }
.pomodoro-header select { background: var(--bg-input); border: 1px solid var(--border); color: var(--text); border-radius: 4px; font-size: .7rem; padding: .1rem .3rem; }
.pomodoro-display { display: flex; align-items: center; justify-content: space-between; }
.pomodoro-display span { font-size: 1.3rem; font-weight: 700; font-family: var(--font-mono); color: var(--text); }
.pomodoro-btns { display: flex; gap: .2rem; }
.pomodoro-btns button { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; border-radius: var(--radius); padding: .25rem .4rem; font-size: .72rem; transition: all var(--transition); }
.pomodoro-btns button:hover { background: var(--bg-hover); color: var(--accent); border-color: var(--accent); }
.pomodoro-widget.running .pomodoro-display span { color: var(--accent); }

/* Nav */
.nav-section { padding: .2rem 0; border-bottom: 1px solid var(--border-muted); }
.nav-label {
  font-size: .6rem; font-weight: 700; letter-spacing: .1em; color: var(--text-subtle);
  padding: .45rem 1rem .25rem; text-transform: uppercase;
  display: flex; align-items: center; justify-content: space-between;
  transition: color .15s;
}
.nav-collapsible > .nav-label { cursor: pointer; user-select: none; }
.nav-collapsible > .nav-label:hover { color: var(--text-muted); }
.nav-collapse-icon { font-size: .5rem; transition: transform .25s cubic-bezier(.4,0,.2,1); }
.nav-collapsible.nav-collapsed .nav-collapse-icon { transform: rotate(-90deg); }
.nav-section-items { overflow: hidden; max-height: 2000px; transition: max-height .35s cubic-bezier(.4,0,.2,1); }
.nav-collapsible.nav-collapsed .nav-section-items { max-height: 0; }
.nav-item {
  display: flex; align-items: center; gap: .5rem;
  padding: .36rem .9rem; color: var(--text-muted);
  text-decoration: none; font-size: .78rem; font-weight: 400;
  transition: all .15s cubic-bezier(.4,0,.2,1);
  border-radius: 0; position: relative;
  margin: 1px 0;
}
.nav-item:hover { background: var(--bg-hover); color: var(--text-secondary); padding-left: 1rem; }
.nav-item.active { background: var(--bg-hover); color: var(--accent); font-weight: 500; }
.nav-item.active::before {
  content: ''; position: absolute; left: 0; top: 15%; bottom: 15%;
  width: 2.5px; background: var(--accent); border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px var(--accent-glow);
}
.nav-item i { width: .9rem; text-align: center; font-size: .78rem; opacity: .7; transition: opacity .15s, transform .15s; }
.nav-item:hover i { opacity: 1; transform: scale(1.1); }
.nav-item.active i { opacity: 1; }
.nav-item.chapter-read { color: var(--success); }
.nav-item.chapter-read i { color: var(--success); opacity: 1; }
.badge { background: var(--accent); color: #fff; border-radius: 10px; font-size: .6rem; padding: .05rem .35rem; margin-left: auto; font-weight: 600; }
.badge-new { background: linear-gradient(135deg, #6366f1, #8b5cf6); animation: badgePulse 2.5s ease-in-out infinite; }
@keyframes badgePulse { 0%,100% { opacity: 1; } 50% { opacity: .7; } }

/* Sidebar Dropdowns */
.sidebar-dropdown { margin: .4rem .75rem; position: relative; }
.sidebar-dropdown-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  width: 100%; padding: .45rem .7rem; border-radius: var(--radius);
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-muted); font-size: .8rem; cursor: pointer;
  transition: all .15s;
}
.sidebar-dropdown-trigger:hover { border-color: var(--accent); color: var(--text); }
.sidebar-dd-arrow { font-size: .55rem; transition: transform .2s; }
.sidebar-dropdown.open .sidebar-dd-arrow { transform: rotate(180deg); }
.sidebar-dropdown-menu {
  display: none; position: absolute; left: 0; right: 0; z-index: 50;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.4);
  padding: .3rem; margin-top: .25rem;
}
.sidebar-dropdown-menu.sidebar-dd-up { bottom: 100%; top: auto; margin-top: 0; margin-bottom: .25rem; }
.sidebar-dropdown.open .sidebar-dropdown-menu { display: block; }
.sidebar-dd-item {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: .4rem .6rem; border: none; background: none;
  color: var(--text-muted); font-size: .78rem; cursor: pointer;
  border-radius: 4px; transition: all .12s;
}
.sidebar-dd-item:hover { background: var(--bg-hover); color: var(--text); }
.sidebar-dd-item.active { color: var(--accent); font-weight: 500; }
.sidebar-dd-item i { width: 1rem; text-align: center; }
.sidebar-dd-sep { height: 1px; background: var(--border); margin: .2rem 0; }
.sidebar-dd-danger { color: var(--danger) !important; }
.sidebar-dd-danger:hover { background: rgba(248,113,113,.08) !important; }
.sidebar-user-trigger { display: flex; align-items: center; gap: .4rem; overflow: hidden; }
.sidebar-user-trigger i { font-size: 1.1rem; }

.sidebar.collapsed .sidebar-dropdown { margin: .4rem; }
.sidebar.collapsed .sidebar-dropdown-trigger span,
.sidebar.collapsed .sidebar-user-trigger span { display: none; }
.sidebar.collapsed .sidebar-dd-arrow { display: none; }
.sidebar.collapsed .sidebar-dropdown-trigger { justify-content: center; padding: .45rem; }

.sidebar-footer {
  margin-top: auto; padding: .5rem .5rem .6rem;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: .4rem;
  background: linear-gradient(to top, rgba(12,15,20,.6), transparent);
  position: sticky; bottom: 0; z-index: 5;
}
.progress-section { padding: 0 .5rem; }
.progress-label { font-size: .7rem; color: var(--text-muted); margin-bottom: .3rem; display: flex; align-items: center; justify-content: space-between; }
.progress-bar-outer { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #00b8d4); border-radius: 3px; transition: width .4s cubic-bezier(.4,0,.2,1); position: relative; }
.progress-fill::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 20px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.2)); border-radius: 3px; animation: progressShimmer 2s infinite; }
@keyframes progressShimmer { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
.progress-text { font-size: .7rem; color: var(--text-muted); }

/* ======================== MAIN CONTENT ======================== */
.main-content {
  flex: 1; min-width: 0; overflow-y: auto; height: calc(100vh - var(--nav-h));
  margin-top: var(--nav-h); position: relative;
}

.view { display: none; padding: 1.25rem 2rem; min-height: 100%; animation: fadeIn .25s ease; }
.view.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.view-header { margin-bottom: 1.25rem; }
.view-header h1 { font-size: 1.25rem; font-weight: 700; margin-bottom: .15rem; display: flex; align-items: center; gap: .45rem; letter-spacing: -.02em; }
.view-header h1 i { color: var(--accent); font-size: 1rem; }
.subtitle { color: var(--text-muted); font-size: .78rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* ======================== READER ======================== */
.reader-toolbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10,13,18,.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: .3rem .8rem; display: flex; align-items: center;
  gap: .5rem; flex-wrap: wrap;
  margin: -1.25rem -2rem 1rem;
}
.toolbar-group { display: flex; align-items: center; gap: .35rem; }
/* Advanced toolbar — hidden by default, toggled via button */
.toolbar-advanced { display: none; align-items: center; gap: .75rem; flex-wrap: wrap; }
.toolbar-advanced.show { display: flex; }
.toolbar-label { font-size: .72rem; color: var(--text-muted); white-space: nowrap; }
.font-size-label { font-size: .75rem; font-family: var(--font-mono); color: var(--text-secondary); min-width: 20px; text-align: center; }
.highlight-colors { display: flex; gap: .2rem; }
.color-btn {
  width: 16px; height: 16px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; transition: transform .15s, border-color .15s;
}
.color-btn.active, .color-btn:hover { transform: scale(1.2); border-color: rgba(255,255,255,.7); }

.chapter-selector-bar {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.25rem; flex-wrap: wrap;
}
.chapter-selector-bar select { flex: 1; max-width: 420px; }
.reading-time { font-size: .8rem; color: var(--text-muted); white-space: nowrap; }

.reader-content { font-size: 16px; }
.chapter-title { font-size: 1.2rem; font-weight: 700; line-height: 1.35; margin-bottom: .4rem; color: var(--text); }
.chapter-meta { font-size: .75rem; color: var(--text-muted); margin-bottom: 1.25rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border); }
.chapter-body { line-height: 1.8; word-wrap: break-word; color: var(--text-secondary); font-size: 14.5px; }

/* Markdown body styles for rendered chapter content */
.chapter-body.markdown-body h1 { font-size: 1.5rem; font-weight: 700; color: var(--text); margin: 2rem 0 1rem; padding-bottom: .4rem; border-bottom: 1px solid var(--border); }
.chapter-body.markdown-body h2 { font-size: 1.25rem; font-weight: 600; color: var(--text); margin: 1.75rem 0 .75rem; }
.chapter-body.markdown-body h3 { font-size: 1.1rem; font-weight: 600; color: var(--accent); margin: 1.25rem 0 .5rem; }
.chapter-body.markdown-body h4 { font-size: 1rem; font-weight: 600; color: var(--text-secondary); margin: 1rem 0 .4rem; }
.chapter-body.markdown-body p { margin: .6rem 0; line-height: 1.8; }
.chapter-body.markdown-body ul, .chapter-body.markdown-body ol { margin: .5rem 0 .5rem 1.5rem; }
.chapter-body.markdown-body li { margin: .3rem 0; line-height: 1.7; }
.chapter-body.markdown-body strong { color: var(--text); font-weight: 600; }
.chapter-body.markdown-body em { font-style: italic; color: var(--text-muted); }
.chapter-body.markdown-body code { background: var(--bg-input); border: 1px solid var(--border-muted); border-radius: 4px; padding: .15rem .4rem; font-size: .85em; font-family: var(--font-mono); color: var(--accent); }
.chapter-body.markdown-body pre { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin: 1rem 0; overflow-x: auto; }
.chapter-body.markdown-body pre code { background: none; border: none; padding: 0; color: var(--text-secondary); font-size: .85rem; }
.chapter-body.markdown-body blockquote { border-left: 3px solid var(--accent); padding: .5rem 1rem; margin: 1rem 0; background: rgba(99,102,241,.05); color: var(--text-muted); font-size: .9rem; border-radius: 0 var(--radius) var(--radius) 0; }
.chapter-body.markdown-body hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }
.chapter-body.markdown-body table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: .85rem; }
.chapter-body.markdown-body th { background: var(--bg-input); color: var(--text); font-weight: 600; text-align: left; padding: .6rem .75rem; border: 1px solid var(--border); }
.chapter-body.markdown-body td { padding: .5rem .75rem; border: 1px solid var(--border-muted); color: var(--text-secondary); }
.chapter-body.markdown-body tr:nth-child(even) { background: rgba(255,255,255,.02); }
.chapter-body.markdown-body a { color: var(--accent); text-decoration: underline; }
.chapter-body.markdown-body img { max-width: 100%; border-radius: var(--radius); }
.chapter-sources { display: inline-block; font-size: .7rem; background: var(--accent); color: #fff; padding: .1rem .5rem; border-radius: 10px; margin-left: .5rem; }

/* Highlights */
mark.highlight { border-radius: 2px; cursor: pointer; padding: 0 2px; opacity: .85; }
mark.highlight:hover { opacity: 1; outline: 2px solid rgba(255,255,255,.4); }
mark.highlight-yellow { background: rgba(251,191,36,.35); color: inherit; }
mark.highlight-green  { background: rgba(74,222,128,.25); color: inherit; }
mark.highlight-blue   { background: rgba(96,165,250,.25); color: inherit; }
mark.highlight-pink   { background: rgba(244,114,182,.25); color: inherit; }

.chapter-nav-buttons { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }
.welcome-card { text-align: center; max-width: 560px; margin: 2rem auto; padding: 2rem 2rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.welcome-icon { font-size: 2.2rem; color: var(--accent); margin-bottom: .85rem; opacity: .85; }
.welcome-card h2 { font-size: 1.15rem; margin-bottom: .4rem; font-weight: 600; letter-spacing: -.02em; }
.welcome-card p { color: var(--text-muted); margin-bottom: .85rem; font-size: .82rem; line-height: 1.65; }
.welcome-card .cta { font-size: .78rem; color: var(--text-muted); }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; margin: 1.25rem 0; }
.feature-item { background: var(--bg-input); border: 1px solid var(--border-muted); border-radius: var(--radius); padding: .75rem; text-align: center; font-size: .78rem; line-height: 1.5; color: var(--text-muted); }
.feature-item i { font-size: 1.1rem; display: block; margin-bottom: .35rem; opacity: .8; }
.feature-item strong { color: var(--text-secondary); font-weight: 500; }
kbd { background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: .1rem .35rem; font-size: .75rem; font-family: var(--font-mono); color: var(--text-secondary); }

/* Chapter count badge in nav label */
.chapter-count-badge {
  font-size: .6rem; background: var(--bg-hover); color: var(--text-muted);
  border-radius: 8px; padding: .05rem .35rem; font-weight: 600;
  margin-left: auto; margin-right: .3rem;
}

/* Quick concept picks */
.quick-concepts { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .75rem; align-items: center; }
.quick-concepts span { font-size: .78rem; color: var(--text-muted); font-weight: 600; font-style: italic; }
.quick-concepts button {
  background: var(--bg-input); border: 1px solid var(--border); color: var(--text-secondary);
  border-radius: 16px; padding: .2rem .6rem; font-size: .72rem; cursor: pointer;
  transition: all var(--transition); font-family: inherit;
}
.quick-concepts button:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-hover); }

/* Focus Mode */
body.focus-mode .sidebar,
body.focus-mode .reader-toolbar,
body.focus-mode .chapter-nav-buttons { display: none !important; }
body.focus-mode .main-content { padding: 0; }
body.focus-mode .view { max-width: 760px; margin: 0 auto; padding: 2rem 1.5rem; }
body.focus-mode #readerViewHeader { display: none; }

/* ======================== CARDS & FORMS ======================== */
.setup-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 1rem; }
.form-group { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .75rem; }
.form-row { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; }
.form-group label, .form-row label { font-size: .75rem; color: var(--text-muted); font-weight: 500; }

/* ======================== BUTTONS ======================== */
.btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .75rem; border-radius: var(--radius);
  font-size: .78rem; font-weight: 500; cursor: pointer;
  border: 1px solid transparent; transition: all var(--transition);
  text-decoration: none; white-space: nowrap;
}
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary   { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover   { background: var(--accent-hover); box-shadow: 0 2px 12px rgba(106,161,255,.2); }
.btn-secondary { background: transparent; color: var(--text-secondary); border-color: var(--border); }
.btn-secondary:hover { background: var(--bg-hover); border-color: var(--accent); color: var(--accent); }
.btn-success   { background: var(--success-bg); color: var(--success); border-color: rgba(74,222,128,.25); }
.btn-success:hover   { background: var(--success); color: #000; }
.btn-danger    { background: var(--danger-bg); color: var(--danger); border-color: rgba(248,113,113,.25); }
.btn-danger:hover    { background: var(--danger); color: #fff; }
.btn-warning   { background: var(--warning-bg); color: var(--warning); border-color: rgba(251,191,36,.25); }
.btn-info      { background: var(--info-bg); color: var(--info); border-color: rgba(125,211,252,.2); }
.btn-lg { padding: .5rem 1.1rem; font-size: .82rem; }
.btn-sm { padding: .2rem .5rem; font-size: .72rem; }
.btn-full { width: 100%; justify-content: center; }
.btn-icon { background: none; border: 1px solid transparent; color: var(--text-muted); cursor: pointer; border-radius: var(--radius); padding: .35rem .5rem; font-size: .85rem; transition: all var(--transition); }
.btn-icon:hover { background: var(--bg-hover); color: var(--text-secondary); border-color: var(--border); }
.btn-icon.bookmarked { color: var(--warning); }
.btn-icon.speaking { color: var(--accent); animation: pulse 1.2s infinite; }
.btn-group { display: flex; flex-wrap: wrap; gap: .35rem; }
.btn-group.wrap { flex-wrap: wrap; }
.btn-option { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-muted); font-size: .8rem; }
.btn-option:hover { border-color: var(--accent); color: var(--accent); }
.btn-option.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Selects & Inputs */
select, input, textarea {
  background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius);
  padding: .45rem .7rem; font-size: .82rem; font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}
select:focus, input:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}
.form-input { width: 100%; }

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

/* ======================== CHAT ======================== */
.chat-container { display: flex; flex-direction: column; height: calc(100vh - 130px); }
.chat-context { display: flex; align-items: center; gap: .5rem; padding: .4rem .65rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; flex-wrap: wrap; }
.chat-context label { font-size: .72rem; color: var(--text-muted); white-space: nowrap; }
.chat-context select { flex: 1; min-width: 130px; font-size: .75rem; }
.chat-messages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; background: var(--bg); border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.chat-msg { display: flex; gap: .6rem; align-items: flex-start; }
.chat-msg.user { flex-direction: row-reverse; }
.chat-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: .78rem; flex-shrink: 0; }
.chat-msg.user .chat-avatar { background: var(--accent); color: #fff; border-color: var(--accent); }
.chat-bubble { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: .65rem .9rem; max-width: 80%; font-size: .84rem; line-height: 1.7; position: relative; }
.chat-msg.user .chat-bubble { background: var(--accent); border-color: var(--accent); color: #fff; border-radius: var(--radius-lg) 0 var(--radius-lg) var(--radius-lg); }
.suggestions { display: none; flex-wrap: wrap; gap: .3rem; margin-top: .6rem; }
.suggestions.show { display: flex; }
.suggestions button { background: transparent; border: 1px solid var(--border); color: var(--text-muted); border-radius: 20px; padding: .25rem .7rem; font-size: .72rem; cursor: pointer; transition: all var(--transition); }
.suggestions button:hover { border-color: var(--accent); color: var(--accent); }
.chat-input-area { display: flex; gap: .4rem; padding: .6rem .75rem; background: var(--bg-card); border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius) var(--radius); align-items: center; }
.chat-input-area input { flex: 1; border-radius: 20px; padding: .45rem .85rem; font-size: .82rem; }
.send-btn { border-radius: 50%; width: 36px; height: 36px; padding: 0; justify-content: center; flex-shrink: 0; font-size: .82rem; }
.btn-copy-msg { position: absolute; top: .4rem; right: .4rem; background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: .7rem; opacity: 0; transition: opacity .15s; }
.chat-bubble:hover .btn-copy-msg { opacity: 1; }
.typing-dots { display: flex; gap: 4px; align-items: center; padding: .25rem 0; }
.typing-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); animation: typingBounce .9s infinite; }
.typing-dots span:nth-child(2) { animation-delay: .15s; }
.typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes typingBounce { 0%,60%,100% { transform: translateY(0) } 30% { transform: translateY(-6px) } }

/* ======================== QUIZ ======================== */
.quiz-progress { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.quiz-progress-bar { flex: 1; min-width: 120px; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.quiz-progress-bar div { height: 100%; background: linear-gradient(90deg, var(--accent), #00b8d4); transition: width .3s; }
.quiz-timer { font-family: var(--font-mono); font-size: .85rem; color: var(--text-muted); }
.quiz-question { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.15rem; margin-bottom: .75rem; }
.q-text { font-size: .95rem; font-weight: 500; margin-bottom: 1rem; line-height: 1.5; }
.quiz-options { display: flex; flex-direction: column; gap: .6rem; }
.quiz-option { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: all .15s; user-select: none; }
.quiz-option:hover { border-color: var(--accent); background: var(--bg-hover); }
.quiz-option.correct { border-color: var(--success); background: var(--success-bg); cursor: default; }
.quiz-option.wrong   { border-color: var(--danger); background: var(--danger-bg); cursor: default; }
.quiz-option.selected { outline: 2px solid var(--accent); }
.opt-letter { width: 26px; height: 26px; border-radius: 50%; background: var(--border); display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; flex-shrink: 0; }
.quiz-option.correct .opt-letter { background: var(--success); color: #000; }
.quiz-option.wrong   .opt-letter { background: var(--danger); color: #fff; }
.quiz-explanation { margin-top: 1rem; padding: .75rem 1rem; background: var(--info-bg); border: 1px solid var(--info); border-radius: var(--radius); font-size: .85rem; line-height: 1.5; }
.quiz-results, .quiz-result-card { text-align: center; padding: 2rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.result-grade { font-size: 4rem; font-weight: 900; line-height: 1; margin-bottom: .5rem; }
.grade-success { color: var(--success); } .grade-warning { color: var(--warning); } .grade-danger { color: var(--danger); }
.result-score { font-size: 2rem; font-weight: 700; } .result-pct { color: var(--text-muted); font-size: 1.1rem; margin: .25rem 0; }
.result-time { font-size: .85rem; color: var(--text-muted); } .result-msg { font-size: 1rem; margin: .75rem 0 1.5rem; }
.result-review { text-align: left; margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: .4rem; }
.review-item { display: flex; align-items: flex-start; gap: .6rem; padding: .5rem .75rem; border-radius: var(--radius); font-size: .83rem; }
.review-item.correct { background: var(--success-bg); color: var(--success); }
.review-item.wrong   { background: var(--danger-bg); color: var(--danger); }
.review-correct { margin-left: auto; font-size: .78rem; flex-shrink: 0; }
.result-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.quiz-history-preview { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin-top: 1rem; }
.quiz-history-preview h4 { margin-bottom: .75rem; font-size: .9rem; color: var(--text-muted); }
.qh-item { display: flex; align-items: center; gap: .75rem; padding: .4rem 0; border-bottom: 1px solid var(--border-muted); font-size: .82rem; flex-wrap: wrap; }
.qh-item:last-child { border-bottom: none; }
.qh-chapter { flex: 1; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qh-score { font-weight: 600; font-family: var(--font-mono); }
.score-good { color: var(--success); } .score-mid { color: var(--warning); } .score-low { color: var(--danger); }
.qh-diff { font-size: .75rem; padding: .1rem .4rem; border-radius: 10px; }
.diff-easy { background: var(--success-bg); color: var(--success); }
.diff-medium { background: var(--warning-bg); color: var(--warning); }
.diff-hard { background: var(--danger-bg); color: var(--danger); }
.qh-date { color: var(--text-muted); font-size: .76rem; }

/* ======================== FLASHCARDS ======================== */
.flashcard-header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.flashcard-counter { font-size: .9rem; color: var(--text-muted); font-family: var(--font-mono); }
.flashcard-category { font-size: .78rem; background: var(--info-bg); color: var(--info); border-radius: 10px; padding: .15rem .5rem; }
.flashcard-container { perspective: 1000px; margin: 0 auto 1.25rem; max-width: 540px; }
.flashcard { width: 100%; height: 240px; cursor: pointer; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.645,.045,.355,1); border-radius: var(--radius-lg); }
.flashcard.flipped { transform: rotateY(180deg); }
.flashcard-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.flashcard-front, .flashcard-back {
  position: absolute; width: 100%; height: 100%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: var(--radius-lg); display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 1.75rem;
  border: 1px solid var(--border); overflow-y: auto;
}
.flashcard-front { background: var(--bg-card); }
.flashcard-back  { background: linear-gradient(135deg, #1c2128, #0d1117); border-color: var(--accent); transform: rotateY(180deg); }
.card-label { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .75rem; }
.card-text { font-size: 1rem; text-align: center; line-height: 1.65; }
.flashcard-controls { display: flex; gap: .75rem; justify-content: center; margin-bottom: 1rem; }
.flashcard-srs { display: flex; align-items: center; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-bottom: .5rem; }
.srs-label { font-size: .85rem; color: var(--text-muted); }
.srs-btn { font-size: .82rem; padding: .45rem .9rem; }
.srs-again { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.srs-hard  { background: var(--warning-bg); color: var(--warning); border-color: var(--warning); }
.srs-good  { background: var(--info-bg); color: var(--info); border-color: var(--info); }
.srs-easy  { background: var(--success-bg); color: var(--success); border-color: var(--success); }
.srs-stats { text-align: center; color: var(--text-muted); font-size: .78rem; }

/* ======================== SUMMARY / EXPLAIN / COMPARE ======================== */
.summary-setup { margin-bottom: 1.5rem; }
.summary-actions-row { gap: .5rem; flex-wrap: wrap; align-items: center; }
.actions-dropdown { position: relative; }
.dropdown-trigger { display: flex; align-items: center; gap: .35rem; }
.dropdown-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  display: none; flex-direction: column;
  min-width: 180px; padding: .25rem;
  z-index: 200;
}
.actions-dropdown.open .dropdown-menu { display: flex; }
.dropdown-item {
  background: none; border: none; color: var(--text-muted);
  text-align: left; padding: .45rem .55rem; border-radius: 6px;
  cursor: pointer; display: flex; gap: .5rem; align-items: center;
}
.dropdown-item:hover { background: var(--bg-hover); color: var(--text); }
.dropdown-item.active { background: var(--accent-soft); color: var(--accent); }

/* Format dropdown for summary types */
.format-dropdown { position: relative; }
.format-dropdown .dropdown-trigger { gap: .5rem; min-width: 140px; justify-content: space-between; }
.format-dropdown .dropdown-trigger i:last-child { font-size: .7rem; opacity: .6; }
.format-dropdown .dropdown-menu { left: 0; right: auto; min-width: 180px; }
.format-dropdown.open .dropdown-menu { display: flex; }

.form-input-compact { padding: .25rem .4rem; min-height: 32px; }
.inline-history { margin-left: auto; }
.summary-content, .explain-content, .compare-content { min-height: 100px; }
.explain-result { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; }

/* ======================== NOTES VIEW ======================== */
.notes-controls { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.notes-editor-wrap { display: flex; flex-direction: column; height: calc(100vh - 260px); min-height: 300px; }
.notes-editor { flex: 1; resize: none; border-radius: var(--radius-lg); font-family: var(--font-mono); font-size: .875rem; line-height: 1.75; padding: 1.25rem; min-height: 300px; }
.notes-status { font-size: .78rem; color: var(--success); margin-top: .4rem; }

/* Notes Panel (slide-in) */
.notes-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 360px;
  background: var(--bg-card); border-left: 1px solid var(--border);
  z-index: 600; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .25s;
  box-shadow: -4px 0 24px rgba(0,0,0,.4);
}
.notes-panel.open { transform: translateX(0); }
.notes-panel-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 590; display: none; }
.notes-panel-overlay.visible { display: block; }
.notes-panel-header { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1rem; border-bottom: 1px solid var(--border); }
.notes-panel-header h3 { font-size: .95rem; font-weight: 600; }
.notes-panel-actions { display: flex; gap: .35rem; }
.notes-panel-editor { flex: 1; resize: none; border: none; background: var(--bg); border-radius: 0; font-family: var(--font-mono); font-size: .83rem; line-height: 1.75; padding: 1rem; }
.notes-panel-editor:focus { outline: none; }

/* ======================== INTERVIEW ======================== */
.interview-setup { margin-bottom: 1.5rem; }
.interview-content { display: flex; flex-direction: column; gap: 1rem; }
.interview-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.interview-header { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.25rem; }
.interview-q { flex: 1; font-weight: 600; font-size: .95rem; line-height: 1.45; }
.interview-answer { padding: 0 1.25rem 1.25rem; }
.interview-answer summary { cursor: pointer; color: var(--accent); font-size: .85rem; padding: .5rem 0; user-select: none; list-style: none; }
.interview-answer summary::-webkit-details-marker { display: none; }
.interview-answer summary::before { content: '▶ '; font-size: .7rem; }
details.interview-answer[open] summary::before { content: '▼ '; }
.interview-tip { margin-top: .75rem; padding: .6rem .9rem; background: var(--warning-bg); border: 1px solid var(--warning); border-radius: var(--radius); font-size: .83rem; }

/* ======================== SEARCH ======================== */
.search-bar { display: flex; gap: .75rem; align-items: center; margin-bottom: 1.5rem; position: relative; }
.search-bar input { flex: 1; padding-left: 2.5rem; }
.search-icon-abs { position: absolute; left: .85rem; color: var(--text-muted); font-size: .85rem; pointer-events: none; }
.search-count { font-size: .85rem; color: var(--text-muted); margin-bottom: .75rem; }
.search-results { display: flex; flex-direction: column; gap: .75rem; }
.search-result-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1.25rem; cursor: pointer; transition: border-color .15s; }
.search-result-item:hover { border-color: var(--accent); }
.sr-title { font-weight: 600; color: var(--accent); margin-bottom: .4rem; }
.sr-snippet { font-size: .85rem; color: var(--text-muted); line-height: 1.55; }
.sr-meta { font-size: .77rem; color: var(--text-subtle); margin-top: .4rem; }
mark.search-hl { background: rgba(251,191,36,.4); color: var(--text); border-radius: 2px; padding: 0 2px; }

/* ======================== GLOSSARY ======================== */
.glossary-controls { margin-bottom: 1rem; }
.glossary-category-filter { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .75rem; }
.glossary-count { font-size: .82rem; color: var(--text-muted); margin-bottom: .75rem; }
.glossary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .6rem; }
.glossary-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: .85rem; transition: border-color .15s, box-shadow .15s; }
.glossary-clickable { cursor: pointer; }
.glossary-clickable:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(99,102,241,.15); transform: translateY(-1px); }
.glossary-card:hover { border-color: var(--accent); }
.glossary-term { font-weight: 700; font-size: .95rem; margin-bottom: .25rem; }
.glossary-category-tag { font-size: .7rem; color: var(--info); background: var(--info-bg); border-radius: 10px; padding: .1rem .45rem; display: inline-block; margin-bottom: .5rem; }
.glossary-definition { font-size: .83rem; color: var(--text-muted); line-height: 1.5; }

/* ======================== SKILL LABS ======================== */
.skill-labs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.skill-lab-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem; cursor: pointer; transition: all .2s; position: relative; overflow: hidden; }
.skill-lab-card:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(99,102,241,.15); transform: translateY(-2px); }
.skill-lab-card h3 { font-size: .92rem; font-weight: 700; margin: .5rem 0 .3rem; }
.skill-lab-card p { font-size: .78rem; color: var(--text-muted); line-height: 1.45; margin: 0; }
.skill-lab-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #fff; }
.skill-lab-tag { display: inline-block; font-size: .65rem; font-weight: 600; padding: .1rem .4rem; border-radius: 10px; background: var(--accent-bg); color: var(--accent); margin-top: .5rem; text-transform: uppercase; letter-spacing: .5px; }

/* Skill Lab Detail */
.skill-lab-tabs { display: flex; gap: .4rem; margin-bottom: 1rem; border-bottom: 2px solid var(--border); padding-bottom: .4rem; }
.skill-lab-tab { background: none; border: none; padding: .45rem 1rem; font-size: .82rem; font-weight: 600; color: var(--text-muted); cursor: pointer; border-radius: var(--radius) var(--radius) 0 0; transition: all .15s; }
.skill-lab-tab:hover { color: var(--text-primary); background: var(--bg-card); }
.skill-lab-tab.active { color: var(--accent); background: var(--bg-card); border-bottom: 2px solid var(--accent); margin-bottom: -2px; }
.skill-lab-tab-content { display: none; }
.skill-lab-tab-content.active { display: block; }
.skill-lab-content { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; margin-top: 1rem; }
.skill-lab-content pre { background: var(--bg-body); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; overflow-x: auto; }
.skill-lab-content code { font-family: 'JetBrains Mono', monospace; font-size: .82rem; }
.skill-lab-result-actions { display: flex; gap: .5rem; margin-bottom: 1rem; }
.skill-lab-quick-topics { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; align-items: center; }
.skill-lab-quick-topics span { font-size: .78rem; color: var(--text-muted); font-weight: 600; }
.skill-lab-quick-topics button { font-size: .75rem; padding: .2rem .6rem; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; transition: all .15s; }
.skill-lab-quick-topics button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }

/* Skill Lab Q&A Search Bar */
.skill-lab-search-bar { display: flex; align-items: center; gap: 0; background: var(--bg-body); border: 2px solid var(--border); border-radius: 12px; padding: .25rem .25rem .25rem .75rem; transition: border-color .2s; }
.skill-lab-search-bar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.skill-lab-search-icon { color: var(--text-muted); font-size: .9rem; flex-shrink: 0; }
.skill-lab-search-input { border: none !important; background: transparent !important; padding: .5rem .75rem !important; font-size: .9rem; flex: 1; outline: none; box-shadow: none !important; }
.skill-lab-search-btn { border-radius: 8px !important; padding: .45rem 1.2rem !important; flex-shrink: 0; }

/* LP Glossary */
.lp-glossary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .75rem; }
.lp-card { display: flex; align-items: center; gap: .75rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: .85rem 1rem; cursor: pointer; transition: all .2s; }
.lp-card:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(99,102,241,.12); transform: translateY(-1px); }
.lp-card-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: .95rem; color: #fff; flex-shrink: 0; }
.lp-card-body { flex: 1; min-width: 0; }
.lp-card-body h4 { font-size: .85rem; font-weight: 700; margin: 0 0 .15rem; color: var(--text-primary); }
.lp-card-body p { font-size: .75rem; color: var(--text-muted); margin: 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lp-card-arrow { color: var(--text-muted); font-size: .7rem; flex-shrink: 0; transition: transform .2s; }
.lp-card:hover .lp-card-arrow { transform: translateX(3px); color: var(--accent); }
.lp-detail-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }

/* Q&A thread */
.skill-lab-qa-entry { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 1rem; }
.skill-lab-qa-entry.skill-lab-quiz { border-left: 3px solid var(--warning); }
.skill-lab-qa-q { font-weight: 600; padding: .5rem .75rem; background: var(--accent-bg); border-radius: var(--radius); margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; }
.skill-lab-qa-q i { color: var(--accent); }
.skill-lab-qa-a { line-height: 1.7; }
.skill-lab-qa-a pre { background: var(--bg-body); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; overflow-x: auto; }

@media (max-width: 600px) {
  .skill-labs-grid { grid-template-columns: 1fr; }
  .skill-lab-tabs { flex-wrap: wrap; }
  .skill-lab-tab { padding: .5rem .8rem; font-size: .8rem; }
}

/* ======================== COMPARE ======================== */
.compare-content { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; }

/* ======================== BOOKMARKS ======================== */
.bookmarks-content { display: flex; flex-direction: column; gap: 1rem; }
.bookmark-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; }
.bookmark-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.bookmark-header h3 { font-size: .98rem; font-weight: 600; }
.bookmark-header > div { display: flex; gap: .4rem; flex-shrink: 0; }
.bookmark-note { font-style: italic; color: var(--text-muted); font-size: .85rem; margin-bottom: .4rem; }
.bookmark-meta { font-size: .75rem; color: var(--text-subtle); }
.empty-state { text-align: center; padding: 3rem; color: var(--text-muted); }
.empty-state i { font-size: 3rem; display: block; margin-bottom: 1rem; }

/* ======================== DASHBOARD ======================== */
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .6rem; margin-bottom: 1.5rem; }
.stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: .85rem; text-align: center; transition: all var(--transition); }
.stat-card:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.stat-icon { font-size: 1.1rem; color: var(--accent); margin-bottom: .3rem; opacity: .7; }
.stat-value { font-size: 1.35rem; font-weight: 800; line-height: 1; margin-bottom: .2rem; }
.stat-label { font-size: .68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.dashboard-sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.5rem; }
.dash-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; }
.dash-section h3 { font-size: .95rem; font-weight: 600; margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; }
.chapter-progress-list { display: flex; flex-direction: column; gap: .4rem; max-height: 360px; overflow-y: auto; }
.cp-item { display: flex; align-items: center; gap: .6rem; padding: .45rem .5rem; border-radius: var(--radius); background: var(--bg-input); font-size: .83rem; }
.cp-status { font-size: 1rem; color: var(--text-subtle); }
.cp-status.read { color: var(--success); }
.cp-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-icons { display: flex; gap: .3rem; color: var(--text-muted); font-size: .78rem; }
.quiz-history-list { display: flex; flex-direction: column; gap: .3rem; max-height: 360px; overflow-y: auto; }

/* -- Darkfiber Dashboard Hero -- */
.df-dash-hero { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 1.75rem; margin-bottom: 1.25rem;
  background: linear-gradient(135deg, rgba(0,229,255,.08) 0%, rgba(0,229,255,.02) 100%);
  border: 1px solid rgba(0,229,255,.15); border-radius: var(--radius-lg); }
.df-hero-text h1 { font-size: 1.5rem; font-weight: 800; margin: 0; }
.df-hero-text p { color: var(--text-muted); font-size: .85rem; margin: .35rem 0 0; }
.df-accent { color: var(--accent); }
.df-hero-streak { display: flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 700; color: #ff9800;
  background: rgba(255,152,0,.1); padding: .5rem 1rem; border-radius: var(--radius); white-space: nowrap; }
.df-hero-streak i { font-size: 1.2rem; }

/* -- Feature Cards Grid -- */
.df-feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .85rem; margin-bottom: 1.5rem; }
.df-feature-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.15rem 1rem; transition: all .2s ease; position: relative; overflow: hidden; }
.df-feature-card:hover { border-color: var(--accent); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.df-feature-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, hsl(var(--fc-hue,190) 90% 55%), transparent); opacity: 1; }
.df-fc-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0; background: hsl(var(--fc-hue,190) 60% 15%); color: hsl(var(--fc-hue,190) 90% 60%); }
.df-feature-card h3 { font-size: .88rem; font-weight: 700; margin: 0; }
.df-fc-header { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.df-fc-links { display: flex; flex-direction: column; gap: .15rem; }
.df-fc-links a { display: flex; align-items: center; gap: .5rem;
  padding: .3rem .5rem; border-radius: 6px; font-size: .78rem; color: var(--text-muted);
  text-decoration: none; transition: all .12s; }
.df-fc-links a:hover { background: var(--bg-hover); color: var(--accent); }
.df-fc-links a i { width: .85rem; text-align: center; font-size: .75rem; opacity: .65; }

/* ======================== MARKDOWN CONTENT ======================== */
.md-content { font-size: .9rem; line-height: 1.75; }
.md-content h1 { font-size: 1.3rem; margin: 1.5rem 0 .75rem; padding-bottom: .4rem; border-bottom: 1px solid var(--border); }
.md-content h2 { font-size: 1.15rem; margin: 1.25rem 0 .6rem; color: var(--accent); }
.md-content h3 { font-size: 1rem; margin: 1rem 0 .5rem; }
.md-content p { margin-bottom: .75rem; }
.md-content ul, .md-content ol { margin: .5rem 0 .75rem 1.25rem; }
.md-content li { margin-bottom: .3rem; }
.md-content strong { color: var(--text); }
.md-content code { font-family: var(--font-mono); font-size: .82em; background: var(--bg-input); border: 1px solid var(--border); border-radius: 4px; padding: .1rem .35rem; }
.md-content pre { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; overflow-x: auto; margin: .75rem 0; }
.md-content pre code { background: none; border: none; padding: 0; font-size: .82rem; }
.md-content blockquote { border-left: 3px solid var(--accent); padding-left: .9rem; color: var(--text-muted); margin: .75rem 0; }
.md-content table { width: 100%; border-collapse: collapse; margin: .75rem 0; font-size: .85rem; }
.md-content th { background: var(--bg-input); border: 1px solid var(--border); padding: .5rem .75rem; text-align: left; }
.md-content td { border: 1px solid var(--border); padding: .5rem .75rem; }
.md-content tr:nth-child(even) td { background: rgba(255,255,255,.02); }
.md-content a { color: var(--accent); text-decoration: none; }
.md-content a:hover { text-decoration: underline; }
.md-content hr { border: none; border-top: 1px solid var(--border); margin: 1.25rem 0; }

/* ======================== MODALS ======================== */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  z-index: 700; display: flex; align-items: center; justify-content: center;
  padding: 1rem; backdrop-filter: blur(6px);
}
.modal-content {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); width: 100%; max-width: 600px;
  max-height: 88vh; display: flex; flex-direction: column;
  box-shadow: 0 16px 48px rgba(0,0,0,.5); animation: modalIn .2s;
}
.modal-content.modal-wide { max-width: 780px; }
.modal-content.modal-sm { max-width: 400px; }
@keyframes modalIn { from { transform: scale(.96); opacity: 0 } to { transform: none; opacity: 1 } }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-header h2 { font-size: 1.05rem; font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.modal-header-actions { display: flex; gap: .4rem; }
.modal-body { padding: 1.25rem; overflow-y: auto; flex: 1; }

/* Shortcuts */
.shortcuts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .6rem; }
.shortcut-item { display: flex; align-items: center; gap: .5rem; font-size: .85rem; padding: .5rem .6rem; background: var(--bg-input); border-radius: var(--radius); }
.shortcut-item kbd { font-size: .72rem; }
.shortcut-item span { color: var(--text-muted); }

/* Comprehension */
.comp-item { background: var(--bg-input); border-radius: var(--radius); padding: 1rem; margin-bottom: .75rem; }
.comp-q { font-weight: 600; margin-bottom: .6rem; }
.comp-hint, .comp-answer { margin-top: .5rem; }
.comp-hint summary, .comp-answer summary { cursor: pointer; color: var(--accent); font-size: .85rem; user-select: none; list-style: none; }
.comp-hint summary::-webkit-details-marker,
.comp-answer summary::-webkit-details-marker { display: none; }
.comp-hint p { margin-top: .4rem; color: var(--text-muted); font-size: .85rem; }
.comp-answer ul { margin-top: .4rem; padding-left: 1.1rem; font-size: .85rem; color: var(--success); }

/* ======================== LOADING ======================== */
.loading-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  z-index: 800; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.loading-spinner { text-align: center; }
.spinner { width: 48px; height: 48px; border: 4px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; margin: 0 auto 1rem; }
.spinner-inline { width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; margin: 1rem auto; }
.spinner-btn { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; vertical-align: middle; margin-right: 6px; }
.inline-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.5rem 1rem; gap: .5rem; }
.inline-loading .loading-label { color: var(--text-muted); font-size: .9rem; }
button:disabled { opacity: .6; cursor: not-allowed; }
@keyframes spin { to { transform: rotate(360deg) } }
#loadingText { color: var(--text-muted); font-size: .9rem; }

/* ======================== TOASTS ======================== */
.toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9000; display: flex; flex-direction: column; gap: .4rem; pointer-events: none; }
.toast {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .55rem .85rem;
  font-size: .8rem; display: flex; align-items: center; gap: .5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.4); transform: translateX(120%);
  transition: transform .3s, opacity .3s;
  min-width: 200px; max-width: 320px;
}
.toast.toast-show { transform: translateX(0); }
.toast-success { border-color: var(--success); } .toast-success i { color: var(--success); }
.toast-danger  { border-color: var(--danger);  } .toast-danger  i { color: var(--danger);  }
.toast-warning { border-color: var(--warning); } .toast-warning i { color: var(--warning); }
.toast-info    { border-color: var(--border);  } .toast-info    i { color: var(--accent);  }

/* ======================== BADGE ======================== */
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; font-size: .68rem; font-weight: 700; }
.badge-success { background: var(--success-bg); color: var(--success); border: 1px solid var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger);  border: 1px solid var(--danger);  }
.badge-info    { background: var(--info-bg);    color: var(--info);    border: 1px solid var(--info);    }

/* Text utils */
.text-muted   { color: var(--text-muted); }
.text-danger  { color: var(--danger); }
.text-success { color: var(--success); }

/* ======================== SCROLLBARS ======================== */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); }

/* ======================== MOBILE SIDEBAR OVERLAY (legacy — hidden) ======================== */
.sidebar-overlay { display: none !important; }

/* ======================== MOBILE HAMBURGER (legacy — hidden) ======================== */

/* ======================== RESPONSIVE ======================== */
@media (max-width: 900px) {
  .main-content { margin-left: 0; }
  .view { padding: 1rem .85rem; }
  .reader-toolbar { margin: -1rem -.85rem 1rem; }
  /* Touch-friendly sizing */
  .btn, button { min-height: 40px; }
  .btn-sm { min-height: 36px; font-size: .82rem; }
  input[type="text"], input[type="email"], input[type="password"],
  textarea, select, .form-input { min-height: 42px; font-size: 16px !important; }
  .chat-input-area input { min-height: 44px; font-size: 16px !important; }
  .chat-input-area { padding: .5rem; gap: .3rem; }
  .view-header h1 { font-size: 1.1rem; }
  .model-controls { width: 100%; justify-content: flex-start; }
  .ai-model-banner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .form-row { flex-direction: column; }
  .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-sections { grid-template-columns: 1fr; }
  .df-feature-grid { grid-template-columns: 1fr; }
  .df-dash-hero { flex-direction: column; gap: .75rem; text-align: center; padding: 1.15rem; }
  .df-hero-text h1 { font-size: 1.2rem; }
  .glossary-grid { grid-template-columns: 1fr; }
  .notes-panel { width: 100%; }
  .view { padding: .85rem .65rem; }
  .chapter-selector-bar { flex-direction: column; align-items: stretch; }
  .chapter-selector-bar select { max-width: 100%; }
  .toolbar-group { flex-wrap: wrap; }
  .toolbar-advanced { flex-wrap: wrap; }
  .stat-card { padding: .5rem; }
  .welcome-card { padding: 1.25rem; }
}

/* ======================== NEW FEATURE STYLES ======================== */

/* Badge variants */
.badge-new { background: #0097a722; color: #4dd0e1; border: 1px solid #0097a7; font-size: .6rem; padding: 0 5px; }

/* Nav chat MIC button */
.btn-icon-round { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg-input); border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; transition: all var(--transition); flex-shrink: 0; }
.btn-icon-round:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-icon-round.mic-active { background: #dc2626; color: #fff; border-color: #dc2626; animation: pulse-mic 1s infinite; }
.btn-icon-round.active { background: var(--accent); color: #fff; border-color: var(--accent); }
@keyframes pulse-mic { 0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.4); } 50% { box-shadow: 0 0 0 8px rgba(220,38,38,0); } }

/* Chat input area updated */
.chat-input-area { display: flex; gap: .4rem; padding: .75rem 1rem; border-top: 1px solid var(--border); background: var(--bg-secondary); align-items: center; }
.chat-input-area input { flex: 1; }

/* Web search badge */
.web-search-badge { font-size: .7rem; color: var(--accent); margin-top: .25rem; display: flex; align-items: center; gap: .25rem; }

/* Toggle label */
.toggle-label { display: flex; align-items: center; gap: .25rem; font-size: .75rem; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.toggle-label input { accent-color: var(--accent); }

/* Chat context bar — already defined above, override for feature section */

/* Msg actions */
.msg-actions { display: flex; gap: .2rem; margin-top: .25rem; opacity: 0; transition: opacity .2s; }
.chat-bubble:hover .msg-actions { opacity: 1; }
.btn-copy-msg, .btn-tts-msg { background: none; border: 1px solid var(--border); color: var(--text-muted); border-radius: 4px; padding: 2px 5px; font-size: .65rem; cursor: pointer; }
.btn-copy-msg:hover, .btn-tts-msg:hover { color: var(--accent); border-color: var(--accent); }

/* Global voice bar - Redesigned for mobile-friendly minimal UI */
.global-voice-bar {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(19, 22, 29, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  z-index: 8000;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
  animation: voiceBarSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  width: min(420px, calc(100vw - 24px));
  max-width: 420px;
}

.voice-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.voice-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.voice-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.voice-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--accent), #00b8d4);
  color: #fff;
  border-radius: 6px;
  padding: 3px 8px;
  white-space: nowrap;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(0,229,255,.3);
}

.voice-status {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.voice-btn-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.voice-btn-close:hover {
  background: rgba(239, 68, 68, 0.25);
  transform: scale(1.1);
}

.voice-btn-close:active {
  transform: scale(0.95);
}

.voice-progress-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.voice-progress-bar {
  position: relative;
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: visible;
  cursor: pointer;
  touch-action: none;
  padding: 4px 0;
}

.voice-progress-bar:hover .voice-progress-thumb {
  opacity: 1;
  transform: scale(1);
}

.voice-progress-fill {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 4px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), #00b8d4);
  border-radius: 4px;
  transition: width 0.1s linear;
  pointer-events: none;
}

.voice-progress-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%) scale(0.8);
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 2px var(--accent);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.voice-times {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.voice-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.voice-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
}

.voice-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
  transform: scale(1.05);
}

.voice-btn:active {
  transform: scale(0.95);
}

.voice-btn-primary {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--accent), #00b8d4);
  color: #000;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(0,229,255,.35);
}

.voice-btn-primary:hover {
  background: linear-gradient(135deg, #00e5ff, #00b8d4);
  box-shadow: 0 6px 16px rgba(0,229,255,.5);
  color: #000;
}

@keyframes voiceBarSlideIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Mobile-friendly voice bar adjustments */
@media (max-width: 480px) {
  .global-voice-bar {
    bottom: 8px;
    padding: 10px;
    width: calc(100vw - 16px);
  }
  
  .voice-main {
    gap: 8px;
  }
  
  .voice-badge {
    font-size: 9px;
    padding: 2px 6px;
  }
  
  .voice-status {
    font-size: 11px;
  }
  
  .voice-btn {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  
  .voice-btn-primary {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
  
  .voice-btn-close {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }
  
  .voice-times {
    font-size: 10px;
  }
}

/* AI Model Banner */
.ai-model-banner { display: flex; align-items: center; justify-content: space-between; padding: .45rem .8rem; border-radius: var(--radius); margin-bottom: .75rem; border: 1px solid var(--border); gap: .5rem; flex-wrap: wrap; }
.model1-banner { background: var(--bg-card); border-color: rgba(99,102,241,.3); }
.model2-banner { background: var(--bg-card); border-color: rgba(245,158,11,.3); }
.model-info { display: flex; align-items: center; gap: .6rem; }
.model-info i { font-size: 1rem; }
.model1-banner .model-info i { color: #818cf8; }
.model2-banner .model-info i { color: #fbbf24; }
.model-info strong { display: block; color: var(--text); font-size: .82rem; }
.model-info span { font-size: .7rem; color: var(--text-muted); }
.model-controls { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.model1-avatar, .model2-avatar { background: none !important; }
.model1-avatar i { color: #818cf8; }
.model2-avatar i { color: #fbbf24; }

/* Interview Voice Mode - Voice-First UI */
/* ============ INTERVIEW SIMULATOR — Professional Redesign ============ */

/* Interview view should have no padding — container fills entire space */
#sirtModel2View.view { padding: 0; overflow: hidden; }

/* --- Interview Resume/JD Gate --- */
.iv-resume-gate {
  position: absolute; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 15, 20, 0.95);
  backdrop-filter: blur(8px);
}
.iv-resume-gate-inner {
  background: #141a22; border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px; padding: 2rem; max-width: 540px; width: 95%;
  max-height: 85vh; overflow-y: auto;
}
.iv-resume-gate-inner h3 { color: var(--accent); margin: 0 0 .5rem; font-size: 1.25rem; }
.iv-resume-gate-inner > p { color: rgba(255,255,255,.6); margin: 0 0 1.5rem; font-size: .9rem; }
.iv-gate-field { margin-bottom: 1.25rem; }
.iv-gate-field label { display: block; font-weight: 600; margin-bottom: .4rem; color: #ccc; font-size: .85rem; }
.iv-gate-file-row { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.iv-gate-file-row input[type="file"] { font-size: .8rem; color: #aaa; }
.iv-gate-or { color: rgba(255,255,255,.35); font-size: .75rem; }
.iv-gate-textarea {
  width: 100%; background: #0e1419; border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; padding: .6rem .8rem; color: #eee; font-size: .85rem;
  font-family: inherit; resize: vertical;
}
.iv-gate-textarea:focus { border-color: var(--accent); outline: none; }
.iv-gate-actions { text-align: center; margin-top: 1.5rem; }
.iv-gate-hint { text-align: center; color: rgba(255,255,255,.35); font-size: .75rem; margin-top: 1rem; }

.iv-container {
  display: flex; flex-direction: column;
  height: 100vh;
  background: #0a0f14;
  border-radius: 0;
  overflow: hidden;
  position: relative;
}

/* --- Top Bar --- */
.iv-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem 1rem;
  background: #0e1419;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
  gap: .75rem;
  flex-wrap: wrap;
}
.iv-topbar-left { display: flex; align-items: center; gap: .6rem; }
.iv-title { font-size: 1rem; font-weight: 700; color: #e2e8f0; letter-spacing: -.01em; }
.iv-topbar-right { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* Status Badge */
.iv-status-badge {
  font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .15rem .5rem; border-radius: 999px;
}
.iv-status-badge i { font-size: .4rem; }
.iv-badge-offline { background: rgba(239,68,68,.1); color: #ef4444; }
.iv-badge-connecting { background: rgba(251,191,36,.12); color: #fbbf24; animation: iv-pulse 1s infinite; }
.iv-badge-live { background: rgba(16,185,129,.12); color: #10b981; }
.iv-badge-error { background: rgba(239,68,68,.15); color: #f87171; }
@keyframes iv-pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }

/* Role Switcher */
.iv-role-switcher {
  display: flex; border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
}
.iv-role-btn {
  border: none; background: rgba(255,255,255,.04); color: #94a3b8;
  font-size: .72rem; padding: .3rem .65rem; cursor: pointer;
  display: flex; align-items: center; gap: .3rem; transition: all .2s;
  font-family: inherit; font-weight: 500;
}
.iv-role-btn:first-child { border-right: 1px solid rgba(255,255,255,.08); }
.iv-role-active { background: #10b981 !important; color: #fff !important; font-weight: 700; }
.iv-role-btn:hover:not(.iv-role-active) { background: rgba(255,255,255,.08); }

/* Action Buttons */
.iv-action-btn {
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04);
  color: #94a3b8; font-size: .8rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.iv-action-btn:hover { background: rgba(255,255,255,.1); color: #e2e8f0; }
.iv-action-danger:hover { background: rgba(239,68,68,.15); color: #f87171; border-color: rgba(239,68,68,.3); }

/* --- Messages Area --- */
.iv-messages {
  flex: 1; overflow-y: auto; padding: 1.25rem;
  display: flex; flex-direction: column; gap: .75rem;
  scroll-behavior: smooth;
}

/* Welcome Screen */
.iv-welcome {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; flex: 1; padding: 1.5rem 1rem; gap: .5rem;
}
.iv-welcome-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #10b981 0%, #0ea5e9 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: #fff;
  box-shadow: 0 0 30px rgba(16,185,129,.15);
}
.iv-welcome h2 { font-size: 1.1rem; color: #e2e8f0; font-weight: 700; margin: 0; }
.iv-welcome > p { color: #64748b; font-size: .8rem; max-width: 380px; margin: 0; }
.iv-welcome-cards {
  display: flex; gap: .75rem; margin-top: .5rem; flex-wrap: wrap; justify-content: center;
}
.iv-card {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px; padding: .55rem .8rem; width: 160px;
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  transition: border-color .2s;
}
.iv-card:hover { border-color: rgba(16,185,129,.3); }
.iv-card i { font-size: 1rem; color: #10b981; }
.iv-card strong { font-size: .72rem; color: #e2e8f0; }
.iv-card span { font-size: .62rem; color: #64748b; line-height: 1.3; }
.iv-welcome-hint { font-size: .7rem; color: #475569; margin-top: .3rem; }

/* Message Bubbles */
.iv-msg {
  display: flex; gap: .6rem; align-items: flex-start;
  animation: iv-msg-in .3s ease;
}
@keyframes iv-msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.iv-msg-user { flex-direction: row-reverse; }
.iv-msg-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem;
}
.iv-msg-avatar-ai { background: linear-gradient(135deg, #10b981, #0ea5e9); color: #fff; }
.iv-msg-avatar-user { background: #3b82f6; color: #fff; }
.iv-msg-bubble {
  max-width: 75%; border-radius: 16px; padding: .65rem .9rem;
  font-size: .85rem; line-height: 1.55; position: relative;
}
.iv-msg:not(.iv-msg-user) .iv-msg-bubble {
  background: #151c24; border: 1px solid rgba(255,255,255,.06);
  color: #cbd5e1; border-top-left-radius: 4px;
}
.iv-msg-user .iv-msg-bubble {
  background: linear-gradient(135deg, #10b981, #0d9668);
  color: #fff; border-top-right-radius: 4px;
}
.iv-msg-bubble .md-content { word-break: break-word; }
.iv-msg-bubble .md-content p { margin: 0 0 .3rem; }
.iv-msg-bubble .md-content p:last-child { margin: 0; }
.iv-msg-actions {
  display: flex; gap: .2rem; margin-top: .3rem; opacity: 0; transition: opacity .2s;
}
.iv-msg:hover .iv-msg-actions { opacity: 1; }
.iv-msg-actions button {
  background: none; border: 1px solid rgba(255,255,255,.1); color: #94a3b8;
  border-radius: 4px; padding: 2px 6px; font-size: .65rem; cursor: pointer;
}
.iv-msg-actions button:hover { color: #10b981; border-color: #10b981; }

/* System messages */
.iv-system-msg {
  text-align: center; padding: .3rem .75rem; font-size: .75rem;
  color: #64748b; display: flex; align-items: center; justify-content: center; gap: .4rem;
}
.iv-system-msg i { font-size: .6rem; }

/* --- Live Transcript Bar --- */
.iv-transcript-bar {
  padding: .4rem 1rem;
  background: rgba(16,185,129,.06);
  border-top: 1px solid rgba(16,185,129,.15);
  display: flex; align-items: center; gap: .5rem;
  flex-shrink: 0;
}
.iv-transcript-bar i { color: #10b981; font-size: .75rem; }
.iv-transcript-text {
  font-size: .8rem; color: #94a3b8; font-style: italic;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
}

/* --- Bottom Voice Bar --- */
.iv-bottom-bar {
  padding: .5rem .8rem .6rem;
  background: #0e1419;
  border-top: 1px solid rgba(255,255,255,.04);
  flex-shrink: 0;
}

/* Round buttons inside voice bar */
.iv-bar-round-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.3);
  color: #fff; font-size: .8rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s; flex-shrink: 0; z-index: 2;
}
.iv-bar-round-btn:hover { background: rgba(255,255,255,.15); transform: scale(1.08); }
.iv-bar-round-btn.iv-muted { color: #ef4444; border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.15); }
.iv-bar-round-btn.iv-btn-active { color: #10b981; border-color: rgba(16,185,129,.4); background: rgba(16,185,129,.12); }
.iv-bar-round-danger { color: #ef4444 !important; border-color: rgba(239,68,68,.3) !important; }
.iv-bar-round-danger:hover { background: rgba(239,68,68,.2) !important; }

/* Interview Language Select */
.iv-lang-select {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: #e2e8f0; border-radius: 6px; padding: .2rem .3rem; font-size: .7rem;
  cursor: pointer; outline: none;
}
.iv-lang-select:focus { border-color: var(--accent); }

/* Voice Bar — the big tappable button */
.iv-voice-bar {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 14px; padding: .55rem .8rem;
  cursor: pointer; transition: all .25s ease;
  position: relative; user-select: none;
  min-height: 48px;
}
.iv-voice-idle {
  background: linear-gradient(135deg, #10b981 0%, #0ea5e9 100%);
  box-shadow: 0 4px 20px rgba(16,185,129,.25);
}
.iv-voice-idle:hover {
  box-shadow: 0 6px 30px rgba(16,185,129,.35); transform: translateY(-1px);
}
.iv-voice-connecting {
  background: linear-gradient(135deg, #f59e0b, #f97316);
  box-shadow: 0 4px 20px rgba(245,158,11,.25);
  animation: iv-bar-pulse 1.5s infinite;
}
@keyframes iv-bar-pulse {
  0%,100% { box-shadow: 0 4px 20px rgba(245,158,11,.25); }
  50% { box-shadow: 0 4px 30px rgba(245,158,11,.5); }
}
.iv-voice-listening {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 4px 24px rgba(16,185,129,.3);
}
.iv-voice-speaking {
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  box-shadow: 0 4px 24px rgba(99,102,241,.3);
}
.iv-voice-error {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 4px 20px rgba(239,68,68,.25);
}

.iv-bar-center {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
}
.iv-bar-status-text {
  font-size: .85rem; font-weight: 700; color: #fff;
  letter-spacing: .02em; text-transform: uppercase;
}
.iv-bar-stop, .iv-bar-clear {
  position: absolute; font-size: .75rem; font-weight: 600;
  color: rgba(255,255,255,.8); cursor: pointer; padding: .25rem .5rem;
}
.iv-bar-stop { left: 1rem; }
.iv-bar-clear { right: 1rem; }
.iv-bar-stop:hover, .iv-bar-clear:hover { color: #fff; }

/* Visualizer Bars */
.iv-bar-visualizer {
  display: flex; align-items: center; gap: 3px; height: 20px;
}
.iv-viz-bar {
  width: 3px; border-radius: 2px; background: rgba(255,255,255,.85);
  animation: iv-bar-bounce 0.6s ease-in-out infinite alternate;
}
.iv-viz-bar:nth-child(1) { height: 8px; animation-delay: 0s; }
.iv-viz-bar:nth-child(2) { height: 14px; animation-delay: 0.15s; }
.iv-viz-bar:nth-child(3) { height: 8px; animation-delay: 0.3s; }
@keyframes iv-bar-bounce {
  0% { transform: scaleY(0.4); }
  100% { transform: scaleY(1.6); }
}

.iv-disclaimer {
  text-align: center; font-size: .62rem; color: #475569;
  margin-top: .35rem; letter-spacing: .01em;
}

/* --- Mobile Responsive --- */
@media (max-width: 640px) {
  #sirtModel2View.view { padding: 0; }
  .iv-container {
    height: 100dvh;
    height: 100vh; /* fallback */
    height: 100dvh;
    border-radius: 0;
    max-height: -webkit-fill-available;
  }
  .iv-topbar { padding: .4rem .6rem; gap: .4rem; }
  .iv-role-btn span { display: none; }
  .iv-messages { padding: .75rem; min-height: 0; }
  .iv-msg-bubble { max-width: 88%; font-size: .82rem; }
  .iv-welcome { padding: 1rem .75rem; gap: .5rem; }
  .iv-welcome-icon { width: 56px; height: 56px; font-size: 1.4rem; }
  .iv-welcome h2 { font-size: 1.1rem; }
  .iv-welcome > p { font-size: .78rem; }
  .iv-welcome-cards { flex-direction: column; align-items: center; gap: .5rem; }
  .iv-card { width: 90%; padding: .5rem .75rem; }
  .iv-card i { font-size: 1rem; }
  .iv-card strong { font-size: .72rem; }
  .iv-card span { font-size: .62rem; }
  .iv-welcome-hint { font-size: .65rem; margin-top: .25rem; }
  .iv-bottom-bar { padding: .35rem .5rem .4rem; }
  .iv-voice-bar { min-height: 44px; padding: .45rem .6rem; border-radius: 10px; }
  .iv-bar-status-text { font-size: .75rem; }
  .iv-bar-round-btn { width: 32px; height: 32px; font-size: .7rem; }
  .iv-transcript-bar { padding: .3rem .6rem; }
  .iv-transcript-text { font-size: .72rem; }
  .iv-disclaimer { font-size: .55rem; margin-top: .2rem; }
  .iv-toggle-label { display: none; }
}

/* --- Camera Preview --- */
.iv-camera-preview {
  position: absolute; top: 52px; right: 12px; z-index: 20;
  width: 160px; height: 120px; border-radius: 10px;
  overflow: hidden; border: 2px solid rgba(16,185,129,.4);
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
  transition: all .35s cubic-bezier(.4,0,.2,1);
}
.iv-camera-preview video {
  width: 100%; height: 100%; object-fit: cover;
  transform: scaleX(-1);
}
.iv-camera-preview.iv-camera-fullscreen {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw !important; height: 100vh !important;
  border-radius: 0; border: none; z-index: 9999;
  background: #000;
}
.iv-camera-preview.iv-camera-fullscreen video {
  object-fit: contain;
}
.iv-camera-controls {
  position: absolute; top: 6px; right: 6px;
  display: flex; gap: 5px; z-index: 2;
}
.iv-camera-ctrl-btn {
  width: 26px; height: 26px; border-radius: 50%; border: none;
  background: rgba(0,0,0,.55); color: #fff; font-size: .65rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); transition: background .2s, transform .15s;
}
.iv-camera-ctrl-btn:hover { background: rgba(0,0,0,.8); transform: scale(1.1); }
.iv-camera-ctrl-close:hover { background: rgba(239,68,68,.8); }
.iv-camera-preview.iv-camera-fullscreen .iv-camera-controls {
  top: 16px; right: 16px; gap: 10px;
}
.iv-camera-preview.iv-camera-fullscreen .iv-camera-ctrl-btn {
  width: 40px; height: 40px; font-size: 1rem;
  background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.15);
}

/* --- Interview History Side Panel --- */
.iv-history-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 340px;
  background: #0e1419; border-left: 1px solid rgba(255,255,255,.06);
  z-index: 30; display: flex; flex-direction: column;
  animation: iv-slide-in .25s ease;
}
@keyframes iv-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.iv-history-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem .8rem; border-bottom: 1px solid rgba(255,255,255,.06);
}
.iv-history-header h3 { font-size: .85rem; color: #e2e8f0; margin: 0; font-weight: 600; }
.iv-history-list {
  flex: 1; overflow-y: auto; padding: .5rem;
  display: flex; flex-direction: column; gap: .4rem;
}
.iv-history-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #475569; gap: .4rem; padding: 2rem; text-align: center;
}
.iv-history-empty i { font-size: 1.5rem; }
.iv-history-item {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px; padding: .5rem .6rem; cursor: pointer;
  transition: border-color .15s;
}
.iv-history-item:hover { border-color: rgba(16,185,129,.3); }
.iv-history-item-title { font-size: .78rem; font-weight: 600; color: #e2e8f0; margin-bottom: .15rem; }
.iv-history-item-meta { font-size: .65rem; color: #64748b; }
.iv-history-item-preview { font-size: .7rem; color: #94a3b8; margin-top: .2rem; line-height: 1.4; max-height: 2.8em; overflow: hidden; }

@media (max-width: 640px) {
  .iv-history-panel { width: 100%; }
}

/* --- Instant Review Toggle --- */
.iv-toggle-wrap {
  display: flex; align-items: center; gap: .3rem; cursor: pointer;
  font-size: .68rem; color: #94a3b8; user-select: none;
}
.iv-toggle-wrap input { display: none; }
.iv-toggle-slider {
  width: 28px; height: 16px; border-radius: 8px;
  background: rgba(255,255,255,.1); position: relative;
  transition: background .2s;
}
.iv-toggle-slider::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #94a3b8; transition: all .2s;
}
.iv-toggle-wrap input:checked + .iv-toggle-slider {
  background: #10b981;
}
.iv-toggle-wrap input:checked + .iv-toggle-slider::after {
  transform: translateX(12px); background: #fff;
}
.iv-toggle-label { font-weight: 500; }

/* --- Attachment Preview --- */
.iv-attachment-preview {
  display: flex; align-items: center; gap: .5rem;
  padding: .3rem .6rem; background: rgba(16,185,129,.08);
  border-radius: 8px; margin-bottom: .3rem;
  border: 1px solid rgba(16,185,129,.15);
}
.iv-attachment-thumb {
  width: 32px; height: 32px; border-radius: 4px; object-fit: cover;
  border: 1px solid rgba(255,255,255,.1);
}
.iv-attachment-name { font-size: .7rem; color: #94a3b8; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-attachment-remove {
  background: none; border: none; color: #64748b; cursor: pointer;
  font-size: .7rem; padding: 2px;
}
.iv-attachment-remove:hover { color: #f87171; }

/* === End Interview Simulator Styles === */

/* Upload Zone */
.upload-zone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 1.5rem .75rem; text-align: center; transition: all .2s; cursor: pointer; background: var(--bg-secondary); margin-bottom: 1rem; }
.upload-zone.drag-over { border-color: var(--accent); background: var(--bg-hover); }
.upload-zone-inner { display: flex; flex-direction: column; align-items: center; gap: .6rem; pointer-events: none; }
.upload-zone-inner > * { pointer-events: auto; }
.upload-zone i { font-size: 2rem; color: var(--accent); }
.upload-zone strong { font-size: .88rem; color: var(--text); }
.upload-zone span { font-size: .85rem; color: var(--text-muted); }
.upload-label { cursor: pointer; }
.upload-hint { font-size: .75rem !important; color: var(--text-muted) !important; }
.upload-progress { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: var(--bg-card); border-radius: var(--radius); margin-bottom: 1.5rem; border: 1px solid var(--border); }
.upload-progress .spinner { width: 24px; height: 24px; border-width: 3px; margin: 0; }
#uploadProgressText { font-size: .9rem; color: var(--text-muted); }

/* Documents list */
.documents-list { display: flex; flex-direction: column; gap: 1rem; }
.doc-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; transition: border-color .2s; }
.doc-card:hover { border-color: var(--accent); }
.doc-card-header { display: flex; align-items: flex-start; gap: 1rem; }
.doc-icon { width: 42px; height: 42px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; background: var(--bg-hover); }
.doc-resume i { color: #818cf8; }
.doc-study i { color: #4ade80; }
.doc-info { flex: 1; }
.doc-info h4 { margin: 0 0 .2rem; font-size: .95rem; }
.doc-info p { font-size: .8rem; color: var(--text-muted); margin: 0 0 .4rem; }
.doc-tags { display: flex; flex-wrap: wrap; gap: .25rem; }
.tag { font-size: .7rem; padding: 1px 6px; border-radius: 4px; background: var(--bg-hover); border: 1px solid var(--border); color: var(--text-muted); }
.doc-actions { display: flex; flex-direction: column; gap: .3rem; align-items: flex-end; flex-shrink: 0; }
.doc-modules-count { font-size: .75rem; color: var(--text-muted); }
.doc-meta { display: flex; gap: 1.5rem; margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--border); font-size: .75rem; color: var(--text-muted); }

/* Profile card */
.profile-card { max-width: 700px; }
.profile-resume-status { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; background: var(--bg-hover); border-radius: 8px; margin-bottom: 1.25rem; font-size: .85rem; color: var(--text-muted); border: 1px solid var(--border); }
.profile-resume-status i { font-size: 1.2rem; }
.hint { font-size: .75rem; color: var(--text-muted); font-weight: 400; }
.voice-settings-row { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.range-input { width: 100%; accent-color: var(--accent); }

/* Cloud Voice Selector */
.cloud-voice-selector { margin-bottom: 1rem; }
.cloud-voice-selector label { font-size: .82rem; font-weight: 600; color: var(--text-secondary); margin-bottom: .35rem; display: flex; align-items: center; gap: .4rem; }
.cloud-voice-selector label i { color: var(--accent); }
.cloud-voice-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cloud-voice-row select { flex: 1; min-width: 180px; }
.cloud-voice-row .btn { flex-shrink: 0; }
.voice-section-divider { height: 1px; background: var(--border); margin: 1.25rem 0; position: relative; }
.voice-section-divider::after { content: 'or'; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: var(--bg-card); color: var(--text-muted); font-size: .68rem; padding: 0 .5rem; text-transform: uppercase; letter-spacing: .06em; }

/* Summary inline voice picker */
.summary-voice-picker { display: inline-flex; align-items: center; gap: .4rem; }
.summary-voice-picker select { width: auto; min-width: 140px; max-width: 220px; font-size: .78rem; padding: .3rem .5rem; border-radius: 16px; background: var(--bg-input); border: 1px solid var(--border); color: var(--text); }

/* Doc learn modal modules */
.doc-modules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.doc-module-card { background: var(--bg-secondary); border-radius: var(--radius); padding: 1rem; border: 1px solid var(--border); }
.doc-module-card.easy { border-top: 3px solid #4ade80; }
.doc-module-card.advanced { border-top: 3px solid #f87171; }
.module-type-badge { font-size: .7rem; font-weight: 700; margin-bottom: .5rem; }
.module-content { font-size: .85rem; max-height: 200px; overflow-y: auto; margin: .5rem 0; }
.module-keypoints ul { margin: .3rem 0; padding-left: 1.2rem; font-size: .8rem; }
.module-quiz details { font-size: .8rem; margin: .25rem 0; }
.module-quiz summary { cursor: pointer; color: var(--text-muted); }
.module-footer { margin-top: .75rem; }
.doc-ask-section { border-top: 1px solid var(--border); padding-top: 1rem; }

/* Diff tags */
.diff-beginner { background: #16a34a22; color: #4ade80; }
.diff-intermediate { background: #d97706222; color: #fbbf24; }
.diff-advanced { background: #dc262622; color: #f87171; }

/* ==================== VMR PROJECT SIMULATOR ==================== */
.vmr-launcher { max-width: 720px; margin: 0 auto; }
.vmr-launch-header { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
.vmr-launch-header h2 { margin: 0 0 .2rem; font-size: 1.1rem; }
.vmr-launch-header p { color: var(--text-muted); margin: 0; font-size: .82rem; }

.vmr-previous { margin-top: 2rem; }
.vmr-previous h3 { color: var(--text-secondary); margin-bottom: 1rem; }
.vmr-project-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.2rem; margin-bottom: .6rem; cursor: pointer; transition: all .2s; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.vmr-project-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.vmr-project-card strong { flex: 1; }
.vmr-project-phase { color: var(--text-muted); font-size: .85rem; }

/* Severity badges */
.vmr-severity-badge { padding: .2rem .7rem; border-radius: 30px; font-weight: 700; font-size: .75rem; letter-spacing: .5px; text-transform: uppercase; }
.vmr-sev-critical { background: #dc262644; color: #f87171; border: 1px solid #dc262688; }
.vmr-sev-high { background: #ea580c44; color: #fb923c; border: 1px solid #ea580c88; }
.vmr-sev-medium { background: #d9770644; color: #fbbf24; border: 1px solid #d9770688; }
.vmr-sev-low { background: #16a34a44; color: #4ade80; border: 1px solid #16a34a88; }

/* Project Header */
.vmr-project-header { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.2rem 1.5rem; margin-bottom: 1rem; }
.vmr-project-title { display: flex; align-items: center; gap: .8rem; margin-bottom: .5rem; }
.vmr-project-title h2 { margin: 0; font-size: 1.2rem; }
.vmr-project-meta { display: flex; gap: 1.2rem; align-items: center; color: var(--text-muted); font-size: .85rem; flex-wrap: wrap; }
.vmr-project-meta span { display: flex; align-items: center; gap: .3rem; }

/* Phase Timeline */
.vmr-timeline { display: flex; gap: 0; margin-bottom: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: .6rem .8rem; overflow-x: auto; }
.vmr-phase { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .5rem .3rem; border-radius: 8px; cursor: pointer; transition: all .2s; position: relative; min-width: 70px; opacity: .4; }
.vmr-phase.completed { opacity: 1; }
.vmr-phase.unlocked { opacity: .8; }
.vmr-phase.active { opacity: 1; background: var(--accent-bg, rgba(59,130,246,.12)); outline: 2px solid var(--accent); }
.vmr-phase.locked { cursor: not-allowed; }
.vmr-phase-icon { font-size: 1.3rem; }
.vmr-phase-label { font-size: .7rem; font-weight: 600; text-align: center; color: var(--text-secondary); }
.vmr-phase.completed .vmr-phase-label { color: var(--accent); }
.vmr-phase.completed::after { content: '✓'; position: absolute; top: 2px; right: 4px; font-size: .6rem; color: #4ade80; font-weight: 700; }

/* Content Area */
.vmr-content-area { display: flex; gap: 1rem; }
.vmr-doc-panel { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.vmr-doc-header { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1.2rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: .5rem; }
.vmr-doc-header h3 { margin: 0; font-size: 1rem; }
.vmr-doc-actions { display: flex; gap: .5rem; }
.vmr-doc-content { padding: 1.5rem; max-height: 60vh; overflow-y: auto; line-height: 1.7; }
.vmr-doc-content h1, .vmr-doc-content h2, .vmr-doc-content h3 { margin-top: 1.5rem; }
.vmr-doc-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.vmr-doc-content th, .vmr-doc-content td { border: 1px solid var(--border); padding: .5rem .8rem; text-align: left; font-size: .85rem; }
.vmr-doc-content th { background: var(--bg); font-weight: 600; }
.vmr-doc-content pre { border-radius: 8px; padding: 1rem; overflow-x: auto; font-size: .85rem; }

/* Loading */
.vmr-loading { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 3rem; color: var(--text-muted); }
.vmr-unlock-prompt { text-align: center; padding: 3rem 1rem; color: var(--text-muted); }
.vmr-unlock-prompt p { margin-top: 1rem; }

/* Artifacts Panel */
.vmr-artifacts-panel { width: 280px; min-width: 250px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.vmr-artifacts-header { display: flex; justify-content: space-between; align-items: center; padding: .6rem 1rem; border-bottom: 1px solid var(--border); }
.vmr-artifacts-header h4 { margin: 0; font-size: .9rem; }
.vmr-artifacts-list { padding: .5rem; max-height: 55vh; overflow-y: auto; }
.vmr-artifact-card { display: flex; gap: .8rem; align-items: center; padding: .6rem .8rem; border-radius: 8px; cursor: pointer; transition: background .2s; }
.vmr-artifact-card:hover { background: var(--hover-bg, rgba(255,255,255,.05)); }
.vmr-artifact-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--accent-bg, rgba(59,130,246,.12)); color: var(--accent); font-size: .9rem; flex-shrink: 0; }
.vmr-artifact-info { min-width: 0; }
.vmr-artifact-info strong { display: block; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vmr-artifact-type { font-size: .7rem; color: var(--text-muted); }
.vmr-artifact-expanded { padding: .5rem 0; }
.vmr-artifact-body { margin-top: 1rem; }

/* Metrics Bar */
.vmr-metrics-bar { display: flex; gap: .3rem; padding: .6rem; margin-top: .6rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; }
.vmr-metric { flex: 1; text-align: center; padding: .4rem .6rem; min-width: 80px; }
.vmr-metric-label { display: block; font-size: .65rem; text-transform: uppercase; color: var(--text-muted); letter-spacing: .5px; font-weight: 600; }
.vmr-metric-value { display: block; font-size: 1rem; font-weight: 700; color: var(--accent); margin-top: .2rem; }

/* Project Chat */
.vmr-chat-section { margin-top: 1rem; }
.vmr-chat-section details { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.vmr-chat-section summary { padding: .8rem 1.2rem; cursor: pointer; font-weight: 600; color: var(--text-secondary); }
.vmr-chat-section summary:hover { color: var(--accent); }
.vmr-chat-inner { padding: 0 1rem 1rem; }
.vmr-chat-messages { max-height: 250px; overflow-y: auto; margin-bottom: .8rem; }

@media (max-width: 768px) {
  .vmr-content-area { flex-direction: column; }
  .vmr-artifacts-panel { width: 100%; min-width: 0; }
  .vmr-timeline { gap: 0; }
  .vmr-phase { min-width: 55px; }
  .vmr-phase-label { font-size: .6rem; }
}

@media (max-width: 768px) {
  .main-content { padding-top: 0; }
  .reader-toolbar { margin: -1rem -1rem .75rem; }
  .inline-history { margin-left: 0; }
}

/* ============================================================
   LANGUAGE SELECTOR WIDGET
   ============================================================ */
.lang-selector-widget {
  margin: 0 .75rem .5rem;
  background: linear-gradient(135deg, rgba(0,229,255,.12), rgba(59,130,246,.08));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .65rem .9rem;
}

.lang-selector-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: .5rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.lang-selector-label i { color: #4dd0e1; font-size: .75rem; }

.lang-btns {
  display: flex;
  gap: .4rem;
}

.lang-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  padding: .38rem .5rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-alt, rgba(255,255,255,.04));
  color: var(--text-secondary);
  font-size: .78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .18s ease;
  line-height: 1.2;
}

.lang-btn:hover {
  border-color: #4dd0e1;
  color: var(--text-primary);
  background: rgba(0,229,255,.15);
}

.lang-btn.active {
  background: linear-gradient(135deg, rgba(0,229,255,.35), rgba(59,130,246,.25));
  border-color: #4dd0e1;
  color: #e9d5ff;
  font-weight: 700;
  box-shadow: 0 0 8px rgba(0,229,255,.3);
}

.lang-flag { font-size: .9rem; line-height: 1; }

/* Collapsed sidebar — hide label text, keep flags */
.sidebar.collapsed .lang-selector-widget {
  margin: 0 .5rem .5rem;
  padding: .5rem;
}
.sidebar.collapsed .lang-selector-label { display: none; }
.sidebar.collapsed .lang-btn { padding: .38rem; }
.sidebar.collapsed .lang-btn span.lang-flag ~ * { display: none; }

/* ============================================================
   VMR LAUNCHER TABS & CASE CARDS & REFERENCES
   ============================================================ */
.vmr-launch-tabs {
  display: flex;
  gap: .4rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--border);
  padding-bottom: .4rem;
}
.vmr-tab {
  flex: 1;
  padding: .45rem .7rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px 8px 0 0;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: .78rem;
  cursor: pointer;
  transition: all .18s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
}
.vmr-tab:hover { color: var(--text-primary); background: rgba(0,229,255,.08); }
.vmr-tab.active {
  color: var(--accent);
  background: rgba(0,229,255,.12);
  border-color: var(--border);
  border-bottom-color: var(--bg);
}
.vmr-tab-content { display: none; }
.vmr-tab-content.active { display: block; }

/* Case Study Cards Grid */
.vmr-cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: .8rem;
  margin: 1rem 0;
}
.vmr-case-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.vmr-case-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,229,255,.15); }
.vmr-case-card.selected { border-color: var(--accent); background: rgba(0,229,255,.08); box-shadow: 0 0 0 3px rgba(0,229,255,.2); }
.vmr-case-header { display: flex; justify-content: space-between; align-items: center; }
.vmr-case-year { font-size: .75rem; color: var(--text-muted); font-weight: 600; }
.vmr-case-title { font-size: .92rem; font-weight: 700; color: var(--text-primary); line-height: 1.3; }
.vmr-case-cve { font-size: .75rem; font-family: 'Fira Code', monospace; color: var(--accent); }
.vmr-case-summary { font-size: .8rem; color: var(--text-secondary); line-height: 1.5; flex: 1; }
.vmr-case-meta { font-size: .72rem; color: var(--text-muted); }
.vmr-case-meta i { margin-right: .3rem; }
.vmr-case-tech { display: flex; flex-wrap: wrap; gap: .3rem; }
.vmr-tech-tag {
  font-size: .68rem;
  background: rgba(59,130,246,.15);
  color: #60a5fa;
  padding: .15rem .5rem;
  border-radius: 20px;
  font-weight: 500;
}
.vmr-case-link {
  font-size: .75rem;
  color: var(--accent);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-top: .3rem;
}
.vmr-case-link:hover { text-decoration: underline; }

/* Custom input textarea */
#vmrCustomInput {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 10px;
  padding: .8rem;
  font-size: .85rem;
  line-height: 1.6;
  resize: vertical;
  width: 100%;
  transition: border-color .2s;
}
#vmrCustomInput:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(0,229,255,.15); }

/* References Panel (collapsible) */
.vmr-references-panel {
  margin-top: 1rem;
  background: linear-gradient(135deg, rgba(59,130,246,.06), rgba(0,229,255,.04));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0;
}
.vmr-references-toggle {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .75rem 1.2rem;
  cursor: pointer;
  font-size: .85rem;
  font-weight: 700;
  color: var(--text-secondary);
  user-select: none;
  list-style: none;
}
.vmr-references-toggle::-webkit-details-marker { display: none; }
.vmr-references-toggle::before {
  content: '\f054';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: .65rem;
  color: var(--text-muted);
  transition: transform .2s;
  margin-right: .2rem;
}
details.vmr-references-panel[open] > .vmr-references-toggle::before {
  transform: rotate(90deg);
}
.vmr-references-toggle i { color: #60a5fa; }
.vmr-ref-count {
  font-size: .7rem;
  background: rgba(96,165,250,.2);
  color: #60a5fa;
  padding: .1rem .45rem;
  border-radius: 10px;
  margin-left: .3rem;
  font-weight: 600;
}
.vmr-references-panel .vmr-references-list {
  padding: 0 1.2rem 1rem;
}
.vmr-references-list {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.vmr-ref-card {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .8rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  transition: all .18s;
  cursor: pointer;
}
.vmr-ref-card:hover { border-color: #60a5fa; background: rgba(59,130,246,.08); transform: translateX(4px); }
.vmr-ref-icon { width: 28px; height: 28px; border-radius: 6px; background: rgba(59,130,246,.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vmr-ref-icon i { font-size: .75rem; color: #60a5fa; }
.vmr-ref-info { flex: 1; min-width: 0; }
.vmr-ref-title { display: block; font-size: .8rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vmr-ref-domain { display: block; font-size: .68rem; color: var(--text-muted); }
.vmr-ref-arrow { font-size: .65rem; color: var(--text-muted); flex-shrink: 0; }

@media (max-width: 600px) {
  .vmr-launch-tabs { flex-direction: column; }
  .vmr-cases-grid { grid-template-columns: 1fr; }
}

/* ======================== AUTH BAR (legacy — removed, moved to sidebar) ======================== */
.auth-bar { display: none !important; }

/* ======================== SIDEBAR AUTH ======================== */
.sidebar-auth {
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--border);
}
.sidebar-auth-logged-out { display: flex; }
.sidebar-auth-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .45rem .6rem; border-radius: 8px; border: 1px solid var(--accent);
  background: rgba(56,139,253,.08); color: var(--accent);
  font-size: .78rem; font-weight: 600; cursor: pointer;
  transition: all .15s; font-family: inherit;
}
.sidebar-auth-btn:hover { background: rgba(56,139,253,.18); }
.sidebar.collapsed .sidebar-auth-btn span { display: none; }
.sidebar.collapsed .sidebar-auth-btn { justify-content: center; padding: .45rem; }
.sidebar-auth-logged-in { display: flex; flex-direction: column; gap: .35rem; }
.sidebar-user-info {
  display: flex; align-items: center; gap: .4rem;
  padding: .2rem 0;
}
.sidebar-user-avatar { color: var(--success); font-size: 1.1rem; flex-shrink: 0; }
.sidebar-user-email {
  font-size: .72rem; color: var(--text); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.sidebar-auth-actions { display: flex; gap: .25rem; }
.sidebar-auth-icon {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: .3rem; border-radius: 6px; border: 1px solid var(--border);
  background: transparent; color: var(--text-muted); cursor: pointer;
  font-size: .72rem; transition: all .15s; font-family: inherit;
}
.sidebar-auth-icon:hover { background: var(--bg-hover); color: var(--text); }
.sidebar-signout:hover { color: #f87171; border-color: rgba(248,113,113,.3); background: rgba(248,113,113,.06); }
.sidebar.collapsed .sidebar-user-email,
.sidebar.collapsed .sidebar-auth-actions { display: none; }
.sidebar.collapsed .sidebar-auth-logged-in { align-items: center; }

/* ======================== HISTORY ======================== */
.history-filters {
  display: flex; flex-wrap: wrap; gap: .3rem;
  margin-bottom: 1rem; padding-bottom: .75rem;
  border-bottom: 1px solid var(--border);
}
.history-filter.active { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
.history-list { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; }
.history-loading { display: flex; align-items: center; gap: .75rem; justify-content: center; padding: 2rem; color: var(--text-muted); }
.history-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  cursor: pointer;
  transition: border-color .2s;
}
.history-item:hover { border-color: var(--accent); }
.history-item-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: .3rem; }
.history-item-title { font-weight: 600; font-size: .9rem; color: var(--text); }
.history-item-type { font-size: .68rem; padding: 2px 6px; border-radius: 4px; background: var(--bg-hover); color: var(--accent); text-transform: uppercase; font-weight: 700; letter-spacing: .05em; }
.history-item-meta { font-size: .75rem; color: var(--text-muted); margin-bottom: .4rem; }
.history-item-preview { font-size: .8rem; color: var(--text-muted); line-height: 1.5; max-height: 3.6em; overflow: hidden; }
.history-item-actions { display: flex; gap: .3rem; margin-top: .4rem; }
.history-empty { text-align: center; padding: 2rem; color: var(--text-muted); }
.history-expanded { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--border); max-height: 300px; overflow-y: auto; font-size: .85rem; line-height: 1.7; }

/* History button in section headers */
.btn-history {
  background: rgba(0,229,255,.12);
  color: #4dd0e1;
  border: 1px solid rgba(0,229,255,.3);
  border-radius: 6px;
  padding: .2rem .6rem;
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s;
  margin-left: .5rem;
  vertical-align: middle;
}
.btn-history:hover {
  background: rgba(0,229,255,.25);
  border-color: #4dd0e1;
  color: #e9d5ff;
}

/* ============================================================
   BOLO — Read Aloud Practice Styles
   ============================================================ */
.bolo-word {
  padding: 2px 4px;
  border-radius: 4px;
  cursor: pointer;
  transition: all .2s;
  color: #6b7280;
}
.bolo-word:hover { background: rgba(255,255,255,.05); }
.bolo-current {
  background: rgba(106,161,255,.25);
  color: #fff;
  outline: 2px solid rgba(106,161,255,.5);
  outline-offset: 1px;
  font-weight: 600;
}
.bolo-correct { color: #3fb950; }
.bolo-skipped { color: #f85149; text-decoration: line-through; }
.bolo-past { color: #8b949e; }

.bolo-flash-correct {
  background: rgba(63,185,80,.35) !important;
  color: #fff !important;
  transform: scale(1.05);
}
.bolo-flash-wrong {
  background: rgba(248,81,73,.35) !important;
  color: #fff !important;
  animation: bolo-shake .3s ease-in-out;
}

@keyframes bolo-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-3px); }
}

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

/* ============================================================
   SIDEBAR USER INFO & ROLE BADGE
   ============================================================ */
.sidebar-user-trigger {
  display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1;
}
.sidebar-avatar {
  width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--bg-hover); color: var(--accent); font-size: 14px;
}
.sidebar-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.sidebar-avatar-initials {
  font-size: 11px; font-weight: 700; color: #fff; background: var(--accent);
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.sidebar-user-info {
  display: flex; flex-direction: column; min-width: 0; line-height: 1.2;
}
.sidebar-user-name {
  font-size: .78rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-user-email {
  font-size: .65rem; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Role Badges */
.role-badge {
  display: inline-block; padding: 1px 7px; border-radius: 8px;
  font-size: .6rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; flex-shrink: 0;
}
.role-student { background: rgba(34,197,94,.15); color: #22c55e; }
.role-alumni { background: rgba(59,130,246,.15); color: #3b82f6; }
.role-admin { background: rgba(249,115,22,.15); color: #f97316; }
.role-moderator { background: rgba(168,85,247,.15); color: #a855f7; }

/* Tier badges */
.tier-badge {
  display: inline-block; padding: 1px 7px; border-radius: 8px;
  font-size: .6rem; font-weight: 700; text-transform: uppercase;
}
.tier-free { background: rgba(107,114,128,.15); color: #9ca3af; }
.tier-pro { background: rgba(59,130,246,.15); color: #3b82f6; }
.tier-business { background: rgba(245,158,11,.15); color: #f59e0b; }

.profile-verified {
  color: #22c55e; font-size: .7rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 3px;
}

/* Collapsed sidebar — hide user info details */
.sidebar.collapsed .sidebar-user-info { display: none; }
.sidebar.collapsed .role-badge { display: none; }
.sidebar.collapsed .sidebar-dd-arrow { display: none; }

/* ============================================================
   PROFILE SLIDE PANEL
   ============================================================ */
.profile-slide-panel {
  position: fixed; right: -400px; top: 0; width: 380px; height: 100vh;
  background: var(--bg-main); border-left: 1px solid var(--border);
  z-index: 250; transition: right .3s ease; overflow-y: auto;
  box-shadow: -4px 0 20px rgba(0,0,0,.3);
}
.profile-slide-panel.open { right: 0; }
.profile-slide-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 240;
  display: none;
}
.profile-slide-overlay.open { display: block; }

.profile-slide-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg-main); z-index: 1;
}
.profile-slide-header h3 { font-size: 1rem; font-weight: 700; margin: 0; }

.profile-slide-body { padding: 20px; }
.profile-slide-loading { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 40px; color: var(--text-muted); }
.profile-slide-empty { text-align: center; padding: 40px; color: var(--text-muted); }

.profile-slide-card {}
.profile-slide-top { text-align: center; margin-bottom: 20px; }
.profile-slide-avatar {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 12px;
  overflow: hidden; background: var(--bg-hover);
  display: flex; align-items: center; justify-content: center;
}
.profile-slide-avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-initials-lg {
  font-size: 24px; font-weight: 800; color: #fff; background: var(--accent);
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.profile-slide-name { font-size: 1.15rem; font-weight: 700; margin: 0 0 4px; }
.profile-slide-email { font-size: .8rem; color: var(--text-muted); margin: 0 0 10px; }
.profile-slide-badges { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }

.profile-slide-details { margin: 16px 0; display: flex; flex-direction: column; gap: 8px; }
.profile-detail-row {
  display: flex; align-items: flex-start; gap: 10px; font-size: .82rem;
  padding: 6px 10px; background: var(--bg-card); border-radius: 8px;
}
.profile-detail-row i { color: var(--accent); width: 16px; text-align: center; margin-top: 2px; }

.profile-slide-links {
  display: flex; gap: 10px; justify-content: center; margin: 14px 0;
}
.profile-slide-links a {
  width: 34px; height: 34px; border-radius: 50%; background: var(--bg-card);
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 15px; transition: .2s;
}
.profile-slide-links a:hover { color: var(--accent); border-color: var(--accent); }

.profile-slide-edit { margin-top: 20px; }
.profile-slide-edit h3 {
  font-size: .85rem; font-weight: 700; margin-bottom: 12px;
  display: flex; align-items: center; gap: 6px; color: var(--text-muted);
}
.profile-edit-form { display: flex; flex-direction: column; gap: 10px; }
.profile-edit-form .form-group { margin: 0; }
.profile-edit-form .form-group label { font-size: .75rem; font-weight: 600; margin-bottom: 3px; display: block; color: var(--text-muted); }
.profile-edit-form .form-input { font-size: .82rem; padding: 7px 10px; }
.profile-edit-form .btn { margin-top: 6px; }

@media (max-width: 450px) {
  .profile-slide-panel { width: 100%; right: -100%; }
}

/* ============================================================
   HISTORY SECTION TABS
   ============================================================ */
.history-sections-tabs {
  display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.history-section-tab {
  background: var(--bg-card); color: var(--text-muted); border: 1px solid var(--border);
  padding: 5px 12px; border-radius: 16px; font-size: .75rem; font-weight: 600;
  cursor: pointer; transition: .2s; display: flex; align-items: center; gap: 5px;
}
.history-section-tab:hover { border-color: var(--accent); color: var(--accent); }
.history-section-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ===== Admin Panel (inline SPA) ===== */
#adminView.view { padding: 0; height: 100vh; overflow: hidden; }

.adm-auth-gate { display: flex; align-items: center; justify-content: center; height: 100vh; background: var(--bg); }
.adm-auth-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; width: 380px; text-align: center; }
.adm-auth-box h2 { margin-bottom: .5rem; font-size: 1.1rem; }
.adm-auth-box p { font-size: .8rem; color: var(--text-muted); margin-bottom: 1.25rem; }

.adm-shell { display: flex; height: 100vh; overflow: hidden; }
.adm-sidebar {
  width: 220px; background: var(--bg-card); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; height: 100%; z-index: 5;
  flex-shrink: 0; overflow-y: auto;
}
.adm-logo { padding: 1.25rem 1rem; border-bottom: 1px solid var(--border); font-weight: 800; font-size: 1rem; color: var(--accent); display: flex; align-items: center; gap: .5rem; }
.adm-logo i { font-size: 1.1rem; }
.adm-nav { flex: 1; padding: .75rem 0; overflow-y: auto; }
.adm-nav button {
  width: 100%; background: none; border: none; color: var(--text-muted); padding: .65rem 1.25rem;
  font-size: .82rem; font-weight: 600; text-align: left; display: flex; align-items: center;
  gap: .65rem; transition: .2s; border-left: 3px solid transparent; cursor: pointer;
}
.adm-nav button:hover { color: var(--text); background: rgba(249,115,22,.06); }
.adm-nav button.active { color: var(--accent); border-left-color: var(--accent); background: rgba(249,115,22,.08); }
.adm-nav button i { width: 18px; text-align: center; font-size: .85rem; }
.adm-nav-sep { height: 1px; background: var(--border); margin: .5rem 1rem; }
.adm-sidebar-back { padding: .75rem 1rem; border-top: 1px solid var(--border); }
.adm-main { flex: 1; padding: 1.5rem 2rem; overflow-y: auto; min-width: 0; height: 100%; }

.adm-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.75rem; flex-wrap: wrap; gap: .5rem; }
.adm-topbar h1 { font-size: 1.35rem; font-weight: 800; }
.adm-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.adm-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.75rem; }
.adm-stat {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.25rem; position: relative; overflow: hidden;
}
.adm-stat-icon { position: absolute; top: 1rem; right: 1rem; font-size: 1.5rem; opacity: .15; color: var(--accent); }
.adm-stat-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted); margin-bottom: .35rem; }
.adm-stat-val { font-size: 1.75rem; font-weight: 800; }
.adm-stat.accent .adm-stat-val { color: var(--accent); }
.adm-stat.success .adm-stat-val { color: #22c55e; }
.adm-stat.warning .adm-stat-val { color: #f59e0b; }
.adm-stat.info .adm-stat-val { color: #6aa1ff; }

.adm-section { display: none; }
.adm-section.active { display: block; }

.adm-table {
  width: 100%; border-collapse: collapse; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; font-size: .82rem;
}
.adm-table th {
  background: var(--bg-hover); padding: .65rem .85rem; text-align: left;
  font-weight: 700; font-size: .7rem; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border);
}
.adm-table td { padding: .65rem .85rem; border-bottom: 1px solid var(--border); }
.adm-table tr:last-child td { border-bottom: none; }
.adm-table tr:hover td { background: rgba(249,115,22,.03); }

.adm-posts-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .9rem 0 0;
}

.adm-page-dots {
  color: var(--text-muted);
  font-size: .82rem;
  padding: 0 .15rem;
}

.adm-panel-box {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.25rem; margin-bottom: 1rem;
}
.adm-panel-box h3 { font-size: .95rem; font-weight: 700; margin-bottom: .75rem; display: flex; align-items: center; gap: .5rem; }
.adm-panel-box h3 i { color: var(--accent); }

.adm-gen-panel {
  background: linear-gradient(135deg, rgba(249,115,22,.08), rgba(99,102,241,.06));
  border: 1px solid rgba(249,115,22,.2); border-radius: var(--radius);
  padding: 1.5rem; margin-bottom: 1.5rem;
}
.adm-gen-panel h3 { color: var(--accent); margin-bottom: .75rem; font-size: 1rem; font-weight: 700; }
.adm-gen-input { display: flex; gap: .5rem; margin-bottom: .75rem; }
.adm-gen-input input {
  flex: 1; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); padding: .55rem .75rem; font-size: .85rem;
}
.adm-gen-input input:focus { outline: none; border-color: var(--accent); }
.adm-gen-info { font-size: .72rem; color: var(--text-muted); line-height: 1.6; }

/* Blog auto-generation controls (posts tab) */
.adm-auto-controls {
  margin-top: 24px;
  background: linear-gradient(180deg, rgba(9,14,24,0.92), rgba(6,11,20,0.96));
  border: 1px solid #16223a;
  border-radius: 16px;
  padding: 26px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}
.adm-auto-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.adm-auto-head h3 { margin: 0; font-size: 1.1rem; display: flex; align-items: center; gap: 10px; color: #dbeafe; }
.adm-auto-head h3 i { color: #60a5fa; }
.adm-auto-head p { margin: 6px 0 0; color: #94a3b8; font-size: 0.82rem; }
.adm-auto-pill { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.5px; padding: 7px 12px; border-radius: 10px; background: rgba(51,65,85,0.55); color: #cbd5e1; border: 1px solid rgba(148,163,184,0.25); }
.adm-auto-pill.active { background: rgba(22,163,74,0.18); color: #22c55e; border-color: rgba(34,197,94,0.35); }
.adm-auto-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: rgba(15,23,42,0.58);
  border: 1px solid #16223a;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 12px;
}
.adm-auto-row h4 { margin: 0 0 5px; font-size: 0.95rem; color: #e2e8f0; }
.adm-auto-row p { margin: 0; font-size: 0.82rem; color: #94a3b8; }
.adm-auto-interval-wrap { display: flex; align-items: center; gap: 8px; }
.adm-auto-interval-wrap input {
  width: 86px;
  background: #182338;
  border: 1px solid #263451;
  color: #e2e8f0;
  border-radius: 11px;
  padding: 8px 10px;
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
}
.adm-auto-interval-wrap span { color: #94a3b8; font-size: 0.9rem; }
.adm-auto-status {
  margin-top: 10px;
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  background: linear-gradient(180deg, rgba(5,58,51,0.42), rgba(8,45,39,0.42));
  border: 1px solid rgba(34,197,94,0.18);
  border-radius: 12px;
  padding: 14px 18px;
}
.adm-auto-status div { color: #cbd5e1; font-size: 0.92rem; }
.adm-auto-status span { color: #94a3b8; }
.adm-auto-status strong { color: #e2e8f0; }
.adm-auto-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.adm-auto-manual {
  margin-top: 16px;
  border: 1px solid #16223a;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(7,13,24,0.93), rgba(4,10,20,0.95));
  padding: 24px 26px;
}
.adm-auto-manual h3 { margin: 0 0 8px; font-size: 1.05rem; color: #e2e8f0; display: flex; align-items: center; gap: 10px; }
.adm-auto-manual h3 i { color: #60a5fa; }
.adm-auto-manual p { margin: 0 0 14px; color: #94a3b8; font-size: 0.88rem; }

@media (max-width: 900px) {
  .adm-auto-status { grid-template-columns: 1fr; }
  .adm-auto-row { flex-direction: column; align-items: flex-start; }
  .adm-auto-interval-wrap { width: 100%; }
}

/* Toggle Switch */
.adm-toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.adm-toggle-switch input { opacity: 0; width: 0; height: 0; }
.adm-toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: var(--border); transition: 0.3s; border-radius: 24px; }
.adm-toggle-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background: white; transition: 0.3s; border-radius: 50%; }
.adm-toggle-switch input:checked + .adm-toggle-slider { background: #22c55e; }
.adm-toggle-switch input:checked + .adm-toggle-slider:before { transform: translateX(20px); }

.adm-fg { margin-bottom: 1rem; }
.adm-fg label { display: block; font-size: .75rem; font-weight: 700; color: var(--text-muted); margin-bottom: .3rem; text-transform: uppercase; }
.adm-fg input, .adm-fg select, .adm-fg textarea {
  width: 100%; padding: .55rem .75rem; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); font-size: .85rem; font-family: inherit;
}
.adm-fg input:focus, .adm-fg select:focus, .adm-fg textarea:focus { outline: none; border-color: var(--accent); }
.adm-fg textarea { resize: vertical; min-height: 120px; }
.adm-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.adm-editor-wrap {
  background: var(--bg-hover); border: 1px solid var(--border); border-radius: 8px;
  min-height: 300px; padding: 1rem; font-size: .85rem; overflow: auto;
  max-height: 500px; color: var(--text); line-height: 1.6;
}
.adm-editor-wrap:focus { outline: none; border-color: var(--accent); }
.adm-editor-toolbar { display: flex; gap: .25rem; margin-bottom: .5rem; flex-wrap: wrap; }
.adm-editor-toolbar button {
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted);
  width: 30px; height: 28px; border-radius: 4px; font-size: .75rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.adm-editor-toolbar button:hover { color: var(--accent); border-color: var(--accent); }

.adm-badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: .65rem; font-weight: 700; text-transform: uppercase; }
.adm-badge-pub { background: rgba(34,197,94,.15); color: #22c55e; }
.adm-badge-draft { background: rgba(245,158,11,.15); color: #f59e0b; }

.adm-settings-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 0; border-bottom: 1px solid var(--border);
}
.adm-settings-item:last-child { border-bottom: none; }
.adm-settings-item .s-label { font-size: .85rem; font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.adm-settings-item .s-ok { color: #22c55e; font-size: .82rem; }
.adm-settings-item .s-warn { color: #f59e0b; font-size: .82rem; }
.adm-settings-item .s-val { font-size: .82rem; color: var(--text-muted); }

/* ── Admin Error Logs ── */
.adm-error-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--danger); color: #fff; font-size: .6rem; font-weight: 800;
  border-radius: 10px; min-width: 18px; height: 18px; padding: 0 4px; margin-left: auto;
}

.adm-err-filters {
  display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.adm-err-filters select, .adm-err-filters input {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); padding: .45rem .65rem; font-size: .8rem; min-width: 130px;
}
.adm-err-filters input { flex: 1; min-width: 180px; }

.adm-err-trend {
  display: flex; align-items: flex-end; gap: 6px; height: 100px; padding-top: .5rem;
}
.adm-err-trend-bar {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%;
}
.adm-err-trend-bar .bar {
  background: linear-gradient(to top, var(--danger), var(--accent)); border-radius: 4px 4px 0 0;
  width: 100%; min-height: 2px; display: flex; align-items: flex-start; justify-content: center;
  font-size: .65rem; font-weight: 700; color: #fff; padding-top: 2px;
}
.adm-err-trend-bar span { font-size: .65rem; color: var(--text-muted); }

.adm-err-pills { display: flex; gap: .5rem; flex-wrap: wrap; }
.adm-err-pill {
  display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .75rem;
  background: var(--bg-hover); border: 1px solid var(--border); border-radius: 20px;
  font-size: .75rem; color: var(--text); cursor: pointer; transition: .2s;
}
.adm-err-pill:hover { border-color: var(--accent); color: var(--accent); }
.adm-err-pill b { color: var(--accent); }

.adm-err-table td { font-size: .78rem; vertical-align: middle; }
.adm-err-table .err-time { white-space: nowrap; font-size: .72rem; color: var(--text-muted); }
.adm-err-table .err-msg { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.adm-err-table .err-src { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; color: var(--text-muted); }
.adm-err-row:hover td { background: rgba(239,68,68,.04); }
.adm-err-row.resolved td { opacity: .5; }

.adm-err-type-badge {
  display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: .65rem;
  font-weight: 700; text-transform: uppercase;
}
.adm-err-type-badge.runtime { background: rgba(239,68,68,.12); color: #ef4444; }
.adm-err-type-badge.promise { background: rgba(168,85,247,.12); color: #a855f7; }
.adm-err-type-badge.api { background: rgba(59,130,246,.12); color: #3b82f6; }
.adm-err-type-badge.console { background: rgba(245,158,11,.12); color: #f59e0b; }
.adm-err-type-badge.gemini { background: rgba(34,197,94,.12); color: #22c55e; }
.adm-err-type-badge.other { background: rgba(148,163,184,.12); color: #94a3b8; }

.adm-err-sev {
  display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: .65rem; font-weight: 700; text-transform: uppercase;
}
.adm-err-sev.danger { background: rgba(239,68,68,.12); color: #ef4444; }
.adm-err-sev.warning { background: rgba(245,158,11,.12); color: #f59e0b; }

.adm-err-pagination {
  display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; font-size: .82rem; color: var(--text-muted);
}

@media (max-width: 768px) {
  .adm-sidebar { width: 56px; }
  .adm-sidebar .adm-logo span, .adm-nav button span, .adm-sidebar-back span { display: none; }
  .adm-nav button { justify-content: center; padding: .65rem 0; }
  .adm-main { padding: 1rem; }
  .adm-stat-grid { grid-template-columns: 1fr 1fr; }
  .adm-form-row { grid-template-columns: 1fr; }
  .adm-gen-input { flex-direction: column; }
}

/* Blog SPA View (Inline) */

.blog-category-tabs {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 1.25rem;
}
.blog-cat-tab {
  background: var(--bg-card); color: var(--text-muted); border: 1px solid var(--border);
  padding: 5px 14px; border-radius: 16px; font-size: .78rem; font-weight: 600;
  cursor: pointer; transition: .2s;
}
.blog-cat-tab:hover { border-color: var(--accent); color: var(--accent); }
.blog-cat-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.blog-posts-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}
@media (max-width: 700px) { .blog-posts-grid { grid-template-columns: 1fr; } }

.blog-card-inline {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; transition: .25s;
}
.blog-card-inline:hover {
  transform: translateY(-3px); border-color: var(--accent);
  box-shadow: 0 6px 24px rgba(249,115,22,.08);
}
.blog-card-body { padding: 1rem 1.15rem; }
.blog-card-cat {
  display: inline-block; background: rgba(249,115,22,.12); color: var(--accent);
  padding: 2px 9px; border-radius: 8px; font-size: .65rem; font-weight: 700;
  text-transform: uppercase; margin-bottom: 6px;
}
.blog-card-title {
  font-size: .95rem; font-weight: 700; margin-bottom: 6px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card-excerpt {
  font-size: .8rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card-meta {
  display: flex; justify-content: space-between; font-size: .7rem; color: var(--text-subtle);
}

.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1.1rem 0 0.75rem;
}

.blog-page-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: .45rem .8rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: .85rem;
  transition: .2s;
}

.blog-page-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.blog-page-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
}

.blog-page-dots {
  color: var(--text-muted);
  font-size: .85rem;
}

.blog-loading {
  display: flex; align-items: center; gap: .75rem; justify-content: center;
  padding: 2rem; color: var(--text-muted);
}
.blog-empty-state { text-align: center; padding: 3rem; color: var(--text-muted); }
.blog-empty-state i { font-size: 2rem; display: block; margin-bottom: .5rem; }

/* Single post inline */
.blog-single-post { max-width: 820px; }
.blog-post-header-inline { margin-bottom: 1.5rem; }
.blog-post-title-inline { font-size: 1.5rem; font-weight: 800; margin: .5rem 0; line-height: 1.3; }
.blog-post-meta-inline {
  display: flex; gap: 1rem; font-size: .8rem; color: var(--text-muted); flex-wrap: wrap; margin-bottom: .75rem;
}
.blog-cover-inline { width: 100%; border-radius: var(--radius); margin: .75rem 0; }
.blog-tags-inline { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: .75rem; }
.blog-inline-tag {
  background: var(--bg-hover); color: var(--text-muted); padding: 2px 8px;
  border-radius: 8px; font-size: .68rem; font-weight: 500;
}

.blog-post-content-inline {
  font-size: .92rem; line-height: 1.8;
}
.blog-post-content-inline h1 { font-size: 1.4rem; font-weight: 800; margin: 1.5rem 0 .75rem; }
.blog-post-content-inline h2 { font-size: 1.2rem; font-weight: 700; margin: 1.25rem 0 .6rem; border-bottom: 1px solid var(--border); padding-bottom: .4rem; }
.blog-post-content-inline h3 { font-size: 1.05rem; font-weight: 700; margin: 1rem 0 .5rem; }
.blog-post-content-inline p { margin: .6rem 0; }
.blog-post-content-inline ul, .blog-post-content-inline ol { margin: .6rem 0 .6rem 1.5rem; }
.blog-post-content-inline li { margin: 4px 0; }
.blog-post-content-inline a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.blog-post-content-inline img { max-width: 100%; border-radius: var(--radius); margin: .75rem 0; }
.blog-post-content-inline table {
  width: 100%; border-collapse: collapse; margin: .75rem 0; font-size: .82rem;
  border: 1px solid var(--border); border-radius: var(--radius);
}
.blog-post-content-inline th {
  background: var(--accent); color: #fff; padding: .5rem .75rem; text-align: left;
  font-weight: 700; font-size: .75rem; text-transform: uppercase;
}
.blog-post-content-inline td { padding: .5rem .75rem; border-bottom: 1px solid var(--border); }
.blog-post-content-inline tbody tr:hover { background: var(--bg-hover); }
.blog-post-content-inline pre {
  background: #1e1e2e; border-radius: var(--radius); padding: 1rem;
  overflow-x: auto; margin: .75rem 0; border: 1px solid var(--border);
}
.blog-post-content-inline pre code { background: none; padding: 0; color: #d4d4d8; font-size: .82rem; }
.blog-post-content-inline code {
  background: var(--bg-hover); padding: 1px 5px; border-radius: 4px; font-size: .82rem;
}
.blog-post-content-inline blockquote {
  border-left: 3px solid var(--accent); padding: .6rem 1rem; margin: .75rem 0;
  background: rgba(249,115,22,.04); color: var(--text-muted); font-style: italic;
}

/* Blog callouts (from AI-generated content) */
.blog-post-content-inline .blog-callout,
.blog-post-content-inline .blog-callout-tip,
.blog-post-content-inline .blog-callout-warning,
.blog-post-content-inline .blog-callout-exam {
  padding: .75rem 1rem; border-radius: var(--radius); margin: .75rem 0;
  border-left: 3px solid; font-size: .85rem;
}
.blog-post-content-inline .blog-callout-tip { border-left-color: #22c55e; background: rgba(34,197,94,.06); }
.blog-post-content-inline .blog-callout-warning { border-left-color: #f59e0b; background: rgba(245,158,11,.06); }
.blog-post-content-inline .blog-callout-exam { border-left-color: #6366f1; background: rgba(99,102,241,.06); }

.blog-post-content-inline .faq-item {
  border: 1px solid var(--border); border-radius: var(--radius); margin: .5rem 0;
}
.blog-post-content-inline .faq-question {
  background: var(--bg-hover); padding: .6rem .75rem; font-weight: 700; font-size: .88rem; margin: 0;
}
.blog-post-content-inline .faq-answer { padding: .6rem .75rem; font-size: .85rem; }

.blog-post-content-inline .youtube-embed {
  position: relative; padding-bottom: 56.25%; height: 0; margin: 1rem 0; border-radius: var(--radius); overflow: hidden;
}
.blog-post-content-inline .youtube-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.blog-post-share {
  display: flex; gap: .6rem; align-items: center; margin-top: 1.5rem; padding-top: 1rem;
  border-top: 1px solid var(--border); font-size: .85rem; color: var(--text-muted);
}
.blog-post-share a, .blog-post-share button {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-muted); font-size: 14px; cursor: pointer; transition: .2s;
}
.blog-post-share a:hover, .blog-post-share button:hover { color: var(--accent); border-color: var(--accent); }

/* Blog TOC — suppress double numbering (ol auto-numbers + text has "1.", "2." etc) */
.blog-post-content-inline .blog-toc { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin: 1rem 0 1.5rem; }
.blog-post-content-inline .blog-toc h3 { font-size: .95rem; font-weight: 700; margin: 0 0 .75rem; }
.blog-post-content-inline .blog-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: none; }
.blog-post-content-inline .blog-toc ol li { padding: .35rem 0; border-bottom: 1px solid var(--border); font-size: .88rem; }
.blog-post-content-inline .blog-toc ol li:last-child { border-bottom: none; }
.blog-post-content-inline .blog-toc ol li a { color: var(--accent); text-decoration: none; transition: .2s; display: block; padding: .15rem 0; }
.blog-post-content-inline .blog-toc ol li a:hover { color: #fff; padding-left: .5rem; }

/* Key takeaway box */
.blog-post-content-inline .blog-key-takeaway { background: rgba(249,115,22,.06); border: 1px solid rgba(249,115,22,.2); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 1rem 0; }
.blog-post-content-inline .blog-key-takeaway h4 { margin: 0 0 .5rem; font-size: .9rem; color: var(--accent); }
.blog-post-content-inline .blog-key-takeaway ul { margin: 0; padding-left: 1.25rem; }
.blog-post-content-inline .blog-key-takeaway li { font-size: .85rem; margin: 3px 0; }

/* Mobile compatibility hardening (blog/admin/slides) */
.blog-post-title-inline,
.blog-post-content-inline h1,
.blog-post-content-inline h2,
.blog-post-content-inline h3,
.blog-card-title {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 900px) {
  #adminView.view,
  .adm-shell,
  .adm-auth-gate {
    height: 100dvh;
  }

  .adm-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }
}

@media (max-width: 768px) {
  .slide-generator-container iframe {
    height: 75dvh !important;
    min-height: 440px !important;
  }

  .blog-single-post {
    max-width: 100%;
  }

  .blog-post-meta-inline {
    flex-wrap: wrap;
    gap: .45rem .9rem;
  }

  .blog-post-content-inline pre,
  .blog-post-content-inline table {
    display: block;
    overflow-x: auto;
  }
}

@media (max-width: 480px) {
  .slide-generator-container iframe {
    height: 72dvh !important;
    min-height: 380px !important;
  }

  .blog-post-title-inline {
    font-size: 1.25rem;
  }
}

/* ============================================================
   JOB ANALYSIS DASHBOARD — Styles
   ============================================================ */
.ja-grad-purple { background: linear-gradient(135deg, #818cf8, #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; }
.ja-grad-teal   { background: linear-gradient(135deg, #60a5fa, #5eead4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; }

.ja-section-title { font-size: 1.55rem; font-weight: 700; margin-bottom: 22px; }

/* Loader */
.ja-loader-container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 40vh; }
.ja-loader { width: 44px; height: 44px; border: 4px solid var(--border); border-bottom-color: var(--accent); border-radius: 50%; animation: jaRotation 1s linear infinite; }
@keyframes jaRotation { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

/* Stats Row */
.ja-stats { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 40px; }
.ja-stat-box { background: var(--bg-card); padding: 20px; border-radius: var(--radius-lg); flex: 1; min-width: 200px; box-shadow: 0 2px 8px rgba(0,0,0,.3); border: 1px solid var(--border); position: relative; overflow: hidden; transition: transform .3s, box-shadow .3s, border-color .3s; }
.ja-stat-box:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.4); border-color: rgba(106,161,255,.25); }
.ja-stat-box::before { content:''; position: absolute; top:0; left:0; width:100%; height:3px; background: var(--ja-grad, linear-gradient(135deg,#6366f1,#a855f7)); }
.ja-stat-box h4 { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); margin: 0 0 14px; font-weight: 600; }
.ja-stat-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: .88rem; font-weight: 500; color: var(--text-secondary); border-bottom: 1px solid var(--border-muted); }
.ja-stat-item:last-child { border-bottom: none; }
.ja-stat-count { font-weight: 700; color: #fff; background: var(--ja-grad, linear-gradient(135deg,#6366f1,#a855f7)); padding: 2px 10px; border-radius: 20px; font-size: .75rem; }

/* Cards Grid */
.ja-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 20px; }
.ja-card { background: var(--bg-card); padding: 24px; border-radius: var(--radius-lg); cursor: default; box-shadow: 0 2px 8px rgba(0,0,0,.3); border: 1px solid var(--border); transition: all .35s cubic-bezier(.16,1,.3,1); display: flex; flex-direction: column; position: relative; overflow: hidden; }
.ja-card::before { content:''; position: absolute; top:0; left:0; width:100%; height:3px; background: var(--ja-grad, linear-gradient(135deg,#6366f1,#a855f7)); opacity:.6; transition: opacity .3s; }
.ja-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.45); border-color: rgba(106,161,255,.2); }
.ja-card:hover::before { opacity: 1; }
.ja-card h3 { font-size: 1.15rem; font-weight: 700; margin: 0 0 8px; color: var(--text); }
.ja-card p { font-size: .85rem; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 16px; line-height: 1.5; }

/* Card Action Buttons */
.ja-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.ja-action-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-secondary); font-size: .78rem; font-weight: 600; cursor: pointer; transition: all .25s; white-space: nowrap; }
.ja-action-btn i { font-size: .75rem; }
.ja-action-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-hover); transform: translateY(-1px); }
.ja-action-btn.ja-btn-learn:hover  { border-color: #818cf8; color: #818cf8; background: rgba(129,140,248,.08); }
.ja-action-btn.ja-btn-lab:hover    { border-color: #34d399; color: #34d399; background: rgba(52,211,153,.08); }
.ja-action-btn.ja-btn-quiz:hover   { border-color: #fbbf24; color: #fbbf24; background: rgba(251,191,36,.08); }
.ja-action-btn.ja-btn-interview:hover { border-color: #f472b6; color: #f472b6; background: rgba(244,114,182,.08); }
.ja-action-btn.ja-btn-details:hover { border-color: var(--accent); color: var(--accent); }

/* Animations */
@keyframes jaFadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.ja-animate { opacity: 0; animation: jaFadeInUp .5s cubic-bezier(.16,1,.3,1) forwards; }

/* Modal */
.ja-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(8px); z-index: 9999; justify-content: center; align-items: center; padding: 20px; opacity: 0; transition: opacity .3s; }
.ja-modal-overlay.ja-active { display: flex; opacity: 1; }
.ja-modal-content { background: var(--bg-card); width: 100%; max-width: 900px; max-height: 85vh; border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(0,0,0,.5); display: flex; flex-direction: column; transform: scale(.95) translateY(16px); transition: transform .4s cubic-bezier(.16,1,.3,1); overflow: hidden; border: 1px solid var(--border); }
.ja-modal-overlay.ja-active .ja-modal-content { transform: scale(1) translateY(0); }
.ja-modal-header { padding: 24px 32px; background: var(--bg-surface); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: flex-start; position: relative; }
.ja-modal-header::before { content:''; position: absolute; top:0; left:0; width:100%; height:4px; background: var(--ja-modal-grad, linear-gradient(135deg,#6366f1,#a855f7)); }
.ja-modal-header h2 { font-size: 1.4rem; margin: 0 0 6px; color: var(--text); }
.ja-modal-summary { color: var(--text-muted); font-size: .9rem; line-height: 1.5; max-width: 90%; }
.ja-close-btn { background: rgba(255,255,255,.06); border: 1px solid var(--border); width: 34px; height: 34px; border-radius: 50%; font-size: 1rem; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; justify-content: center; transition: all .2s; flex-shrink: 0; }
.ja-close-btn:hover { background: rgba(248,113,113,.15); color: #f87171; border-color: rgba(248,113,113,.3); transform: rotate(90deg); }

/* Modal Tabs */
.ja-modal-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); background: var(--bg-surface); padding: 0 32px; }
.ja-modal-tab { padding: 12px 20px; font-size: .85rem; font-weight: 600; color: var(--text-muted); cursor: pointer; border: none; background: none; border-bottom: 2px solid transparent; transition: all .2s; white-space: nowrap; }
.ja-modal-tab:hover { color: var(--text-secondary); }
.ja-modal-tab.ja-tab-active { color: var(--accent); border-bottom-color: var(--accent); }
.ja-modal-tab i { margin-right: 6px; }

.ja-modal-body { padding: 32px; overflow-y: auto; }
.ja-modal-body::-webkit-scrollbar { width: 6px; }
.ja-modal-body::-webkit-scrollbar-track { background: var(--bg); }
.ja-modal-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* Detail tags grid */
.ja-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.ja-detail-group h5 { font-size: .8rem; text-transform: uppercase; color: var(--text-muted); letter-spacing: .06em; margin: 0 0 10px; font-weight: 600; }
.ja-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ja-tag { padding: 4px 12px; border-radius: 6px; font-size: .78rem; font-weight: 600; transition: transform .2s; }
.ja-tag:hover { transform: translateY(-1px); }

/* AI Content area inside modal */
.ja-ai-content { color: var(--text-secondary); line-height: 1.7; font-size: .92rem; }
.ja-ai-content h3 { color: var(--text); font-size: 1.1rem; margin: 20px 0 8px; font-weight: 700; }
.ja-ai-content h3:first-child { margin-top: 0; }
.ja-ai-content ul, .ja-ai-content ol { padding-left: 1.5rem; margin: 8px 0; }
.ja-ai-content li { margin: 4px 0; }
.ja-ai-content code { background: var(--bg-surface); padding: 2px 6px; border-radius: 4px; font-size: .85rem; color: var(--accent); }
.ja-ai-content pre { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; overflow-x: auto; margin: 12px 0; }
.ja-ai-content pre code { background: none; padding: 0; color: var(--text-secondary); }
.ja-ai-content strong { color: var(--text); }
.ja-ai-content blockquote { border-left: 3px solid var(--accent); padding: 8px 16px; margin: 12px 0; background: var(--bg-surface); border-radius: 0 var(--radius) var(--radius) 0; color: var(--text-secondary); }

.ja-ai-loading { display: flex; align-items: center; gap: 12px; color: var(--text-muted); padding: 24px 0; }
.ja-ai-loading .ja-loader { width: 24px; height: 24px; border-width: 3px; }

/* Quiz in modal */
.ja-quiz-option { display: block; width: 100%; text-align: left; padding: 12px 16px; margin: 8px 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-surface); color: var(--text-secondary); font-size: .9rem; cursor: pointer; transition: all .2s; }
.ja-quiz-option:hover { border-color: var(--accent); color: var(--text); background: var(--bg-hover); }
.ja-quiz-option.ja-correct { border-color: var(--success); background: var(--success-bg); color: var(--success); }
.ja-quiz-option.ja-wrong { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.ja-quiz-option.ja-disabled { pointer-events: none; opacity: .7; }
.ja-quiz-explanation { margin-top: 12px; padding: 12px 16px; background: var(--bg-surface); border-radius: var(--radius); border-left: 3px solid var(--accent); color: var(--text-secondary); font-size: .85rem; }
.ja-quiz-question { font-size: 1rem; font-weight: 600; color: var(--text); margin: 0 0 16px; }
.ja-quiz-counter { font-size: .8rem; color: var(--text-muted); margin-bottom: 8px; }
.ja-quiz-score { text-align: center; padding: 24px; }
.ja-quiz-score h3 { font-size: 1.3rem; color: var(--text); margin: 0 0 8px; }
.ja-quiz-score p { color: var(--text-muted); }
.ja-quiz-nav { display: flex; justify-content: center; gap: 12px; margin-top: 20px; }

/* Interview sim in modal */
.ja-chat-log { display: flex; flex-direction: column; gap: 12px; max-height: 50vh; overflow-y: auto; margin-bottom: 16px; }
.ja-chat-msg { max-width: 85%; padding: 12px 16px; border-radius: 12px; font-size: .9rem; line-height: 1.5; }
.ja-chat-msg.ja-ai { background: var(--bg-surface); color: var(--text-secondary); border: 1px solid var(--border); align-self: flex-start; border-top-left-radius: 4px; }
.ja-chat-msg.ja-user { background: rgba(106,161,255,.12); color: var(--text); border: 1px solid rgba(106,161,255,.2); align-self: flex-end; border-top-right-radius: 4px; }
.ja-chat-input-row { display: flex; gap: 8px; }
.ja-chat-input-row input { flex: 1; padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: .9rem; }
.ja-chat-input-row input:focus { outline: none; border-color: var(--accent); }
.ja-chat-input-row button { padding: 10px 20px; }

/* Generate button in modal */
.ja-generate-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: var(--radius); border: 1px solid var(--accent); background: rgba(106,161,255,.08); color: var(--accent); font-size: .88rem; font-weight: 600; cursor: pointer; transition: all .2s; }
.ja-generate-btn:hover { background: rgba(106,161,255,.15); transform: translateY(-1px); }
.ja-generate-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.ja-generate-btn i { font-size: .85rem; }

/* Progress indicator on cards */
.ja-progress-row { display: flex; gap: 4px; margin-top: 12px; }
.ja-progress-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: background .3s; }
.ja-progress-dot.ja-done { background: var(--success); }
.ja-progress-label { font-size: .72rem; color: var(--text-muted); margin-left: 8px; }

/* Responsive */
@media(max-width:768px) {
  .ja-stats { flex-direction: column; }
  .ja-cards { grid-template-columns: 1fr; }
  .ja-modal-body { padding: 20px; }
  .ja-modal-header { padding: 20px 24px; }
  .ja-modal-tabs { padding: 0 16px; overflow-x: auto; }
  .ja-details-grid { grid-template-columns: 1fr; }
  .ja-card-actions { gap: 6px; }
}

/* ── Dashboard Mode Buttons ── */
.ja-mode-buttons { display: flex; gap: 16px; margin-bottom: 32px; flex-wrap: wrap; }
.ja-mode-btn { flex: 1; min-width: 150px; padding: 20px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); color: var(--text); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: all .3s; }
.ja-mode-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.ja-mode-btn i { font-size: 1.6rem; }
.ja-mode-btn span { font-weight: 700; font-size: 1rem; }
.ja-mode-btn small { font-size: .75rem; color: var(--text-muted); }
.ja-mode-learn { border-color: rgba(129,140,248,.3); }
.ja-mode-learn:hover { border-color: #818cf8; background: rgba(129,140,248,.08); }
.ja-mode-learn i { color: #818cf8; }
.ja-mode-lab { border-color: rgba(52,211,153,.3); }
.ja-mode-lab:hover { border-color: #34d399; background: rgba(52,211,153,.08); }
.ja-mode-lab i { color: #34d399; }
.ja-mode-quiz { border-color: rgba(251,191,36,.3); }
.ja-mode-quiz:hover { border-color: #fbbf24; background: rgba(251,191,36,.08); }
.ja-mode-quiz i { color: #fbbf24; }
.ja-mode-interview { border-color: rgba(244,114,182,.3); }
.ja-mode-interview:hover { border-color: #f472b6; background: rgba(244,114,182,.08); }
.ja-mode-interview i { color: #f472b6; }
.ja-skills-hint { color: var(--text-muted); font-size: .82rem; margin: -14px 0 12px; }
.ja-skills-hint i { margin-right: 4px; }
.ja-stat-clickable { cursor: pointer; transition: all .2s; border-radius: 6px; padding: 6px 4px !important; }
.ja-stat-clickable:hover { background: rgba(106,161,255,.08); color: var(--accent) !important; }
.ja-action-btn.ja-btn-ask:hover { border-color: #4dd0e1; color: #4dd0e1; background: rgba(167,139,250,.08); }

/* ══ SKILL SUB-PAGE LAYOUT ══ */
.ja-skill-page { display: flex; height: calc(100vh - 60px); overflow: hidden; margin: -20px -28px -24px; }
.ja-skill-sidebar { width: 280px; min-width: 240px; background: var(--bg-card); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0; }
.ja-skill-sidebar-header { padding: 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; }
.ja-back-btn { background: none; border: 1px solid var(--border); color: var(--text-secondary); padding: 6px 12px; border-radius: var(--radius); cursor: pointer; font-size: .82rem; font-weight: 600; transition: all .2s; white-space: nowrap; }
.ja-back-btn:hover { border-color: var(--accent); color: var(--accent); }
.ja-skill-sidebar-header h3 { margin: 0; font-size: 1rem; color: var(--text); flex: 1; }
.ja-skill-search { margin: 8px 12px; padding: 8px 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: .82rem; }
.ja-skill-search:focus { outline: none; border-color: var(--accent); }
.ja-skill-list { overflow-y: auto; flex: 1; padding: 4px 0; }
.ja-skill-list::-webkit-scrollbar { width: 5px; }
.ja-skill-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.ja-mode-tabs { display: flex; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ja-mode-tab { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: none; color: var(--text-muted); font-size: .72rem; font-weight: 600; cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; gap: 4px; }
.ja-mode-tab:hover { border-color: var(--accent); color: var(--text-secondary); }
.ja-mode-tab-active { border-color: var(--accent); color: var(--accent); background: rgba(106,161,255,.08); }
.ja-mode-tab i { font-size: .68rem; }
.ja-skill-cat-group { border-bottom: 1px solid var(--border-muted); }
.ja-skill-cat-header { display: flex; align-items: center; width: 100%; padding: 10px 14px; background: none; border: none; color: var(--text-secondary); font-size: .82rem; font-weight: 700; cursor: pointer; transition: all .2s; text-align: left; }
.ja-skill-cat-header:hover { background: var(--bg-hover); color: var(--text); }
.ja-cat-arrow { font-size: .6rem; margin-right: 6px; transition: transform .2s; }
.ja-collapsed .ja-cat-arrow { transform: rotate(-90deg); }
.ja-skill-cat-items { overflow: hidden; }
.ja-collapsed .ja-skill-cat-items { display: none; }
.ja-skill-item { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 7px 14px 7px 30px; background: none; border: none; color: var(--text-muted); font-size: .8rem; cursor: pointer; transition: all .15s; text-align: left; }
.ja-skill-item:hover { background: var(--bg-hover); color: var(--text); }
.ja-skill-active { background: rgba(106,161,255,.1) !important; color: var(--accent) !important; border-left: 2px solid var(--accent); }
.ja-skill-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.ja-skill-item-count { font-size: .7rem; color: var(--text-muted); background: var(--bg-surface); padding: 1px 6px; border-radius: 8px; flex-shrink: 0; }
.ja-skill-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.ja-skill-topbar { padding: 12px 20px; border-bottom: 1px solid var(--border); background: var(--bg-card); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ja-skill-topbar-info { display: flex; align-items: center; gap: 8px; }
.ja-skill-cat-label { font-size: .75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.ja-skill-name-label { font-size: .95rem; color: var(--text); font-weight: 700; }
.ja-skill-topbar-actions { display: flex; align-items: center; gap: 8px; flex: 1; justify-content: flex-end; }
.ja-custom-input { padding: 8px 14px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: .82rem; width: 240px; max-width: 100%; }
.ja-custom-input:focus { outline: none; border-color: var(--accent); }
.ja-history-toggle { background: none; border: 1px solid var(--border); color: var(--text-muted); width: 36px; height: 36px; border-radius: var(--radius); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; font-size: .85rem; }
.ja-history-toggle:hover { border-color: var(--accent); color: var(--accent); }
.ja-skill-content-area { flex: 1; overflow-y: auto; padding: 20px; }
.ja-skill-content-area::-webkit-scrollbar { width: 6px; }
.ja-skill-content-area::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.ja-skill-output { min-height: 200px; }
.ja-skill-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 300px; color: var(--text-muted); text-align: center; }
.ja-skill-placeholder p { font-size: .92rem; }
.ja-followup-section { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
.ja-followup-label { font-size: .78rem; font-weight: 600; color: var(--text-muted); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.ja-followup-log { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow-y: auto; }
.ja-history-panel { position: absolute; top: 0; right: 0; width: 300px; height: 100%; background: var(--bg-card); border-left: 1px solid var(--border); flex-direction: column; z-index: 10; box-shadow: -4px 0 16px rgba(0,0,0,.3); }
.ja-history-header { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.ja-history-header h4 { margin: 0; font-size: .9rem; color: var(--text); display: flex; align-items: center; gap: 6px; }
.ja-history-list { overflow-y: auto; flex: 1; padding: 8px; }
.ja-history-item { display: block; width: 100%; padding: 10px 12px; background: none; border: 1px solid var(--border-muted); border-radius: var(--radius); margin-bottom: 6px; cursor: pointer; text-align: left; transition: all .2s; color: var(--text); }
.ja-history-item:hover { border-color: var(--accent); background: var(--bg-hover); }
.ja-history-item-title { font-size: .82rem; font-weight: 600; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ja-history-item-meta { display: flex; align-items: center; gap: 6px; }

/* ══ RICH CONTENT — Lesson & Lab ══ */
.ja-rich-content { max-width: 860px; }

/* Lesson Header */
.ja-lesson-header { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.ja-lesson-title { font-size: 1.5rem; font-weight: 800; color: var(--text); margin: 0 0 6px; display: flex; align-items: center; gap: 10px; }
.ja-lesson-title i { color: var(--accent); font-size: 1.2rem; }
.ja-lab-header .ja-lesson-title i { color: #34d399; }
.ja-lesson-level { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 600; color: var(--text-muted); background: var(--bg-surface); padding: 4px 12px; border-radius: 20px; border: 1px solid var(--border); }

/* Introduction Box */
.ja-intro-box { display: flex; gap: 16px; padding: 18px 20px; background: rgba(106,161,255,.05); border: 1px solid rgba(106,161,255,.15); border-radius: 12px; margin-bottom: 24px; }
.ja-intro-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(106,161,255,.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent); font-size: 1rem; }
.ja-intro-box h4 { margin: 0 0 6px; font-size: .95rem; color: var(--text); }
.ja-intro-box p { margin: 0 0 4px; font-size: .88rem; color: var(--text-secondary); line-height: 1.6; }

/* Topic Sections */
.ja-topic-section { margin-bottom: 32px; padding: 24px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; }
.ja-topic-title { display: flex; align-items: center; gap: 12px; font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border-muted); }
.ja-topic-num { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg,#818cf8,#c084fc); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 800; flex-shrink: 0; }
.ja-topic-block { margin-bottom: 16px; padding: 0 0 0 2px; font-size: .88rem; color: var(--text-secondary); line-height: 1.65; }
.ja-topic-block strong { color: var(--text); font-size: .85rem; display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.ja-topic-block ul, .ja-topic-block ol { padding-left: 1.3rem; margin: 8px 0 0; }
.ja-topic-block li { margin: 4px 0; }
.ja-block-icon { color: var(--accent); font-size: .8rem; }
.ja-why-block { background: rgba(251,191,36,.04); border-left: 3px solid rgba(251,191,36,.4); padding: 12px 16px !important; border-radius: 0 8px 8px 0; }
.ja-why-block .ja-block-icon { color: #fbbf24; }

/* Code Blocks */
.ja-code-block { margin: 16px 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: #0d1117; }
.ja-code-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: rgba(255,255,255,.04); border-bottom: 1px solid var(--border); }
.ja-code-lang { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; display: flex; align-items: center; gap: 6px; }
.ja-code-lang i { font-size: .7rem; }
.ja-copy-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: var(--text-muted); font-size: .72rem; font-weight: 600; cursor: pointer; transition: all .2s; }
.ja-copy-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(106,161,255,.08); }
.ja-code-pre { margin: 0; padding: 16px; overflow-x: auto; font-size: .82rem; line-height: 1.6; }
.ja-code-pre::-webkit-scrollbar { height: 5px; }
.ja-code-pre::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.ja-code-content { color: #c9d1d9; font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace; white-space: pre; }

/* Image Preview Cards */
.ja-image-card { margin: 16px 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: linear-gradient(135deg, rgba(129,140,248,.06), rgba(192,132,252,.06)); }
.ja-image-card-visual { padding: 28px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; min-height: 120px; }
.ja-image-card-visual i { font-size: 2.2rem; color: rgba(129,140,248,.5); }
.ja-image-card-visual span { font-size: .82rem; color: var(--text-muted); max-width: 80%; line-height: 1.4; }
.ja-image-card-actions { padding: 10px 16px; border-top: 1px solid var(--border); display: flex; justify-content: center; background: rgba(0,0,0,.15); }
.ja-img-link { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--accent); text-decoration: none; padding: 6px 14px; border-radius: 6px; transition: all .2s; }
.ja-img-link:hover { background: rgba(106,161,255,.1); text-decoration: none; }

/* YouTube Video Cards */
.ja-yt-section { margin: 28px 0; }
.ja-section-heading { font-size: 1.1rem; font-weight: 700; color: var(--text); margin: 0 0 16px; display: flex; align-items: center; gap: 8px; }
.ja-section-heading i { color: #ff0000; }
.ja-section-heading small { font-size: .75rem; color: var(--text-muted); font-weight: 400; }
.ja-yt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ja-yt-card { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; text-decoration: none; transition: all .3s; }
.ja-yt-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.4); border-color: rgba(255,0,0,.3); text-decoration: none; }
.ja-yt-thumb { height: 140px; display: flex; align-items: center; justify-content: center; position: relative; }
.ja-yt-play { font-size: 3rem; color: rgba(255,255,255,.9); filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); transition: transform .3s; }
.ja-yt-card:hover .ja-yt-play { transform: scale(1.15); }
.ja-yt-info { padding: 12px 14px; flex: 1; }
.ja-yt-title { font-size: .85rem; font-weight: 700; color: var(--text); line-height: 1.35; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ja-yt-channel-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.ja-yt-channel { font-size: .72rem; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.ja-yt-stats { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.ja-yt-stat { font-size: .7rem; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.ja-yt-stat i { font-size: .65rem; color: var(--accent); opacity: .7; }
.ja-yt-desc { font-size: .7rem; color: var(--text-muted); line-height: 1.4; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; opacity: .8; }
.ja-yt-duration { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,.85); color: #fff; font-size: .65rem; font-weight: 600; padding: 2px 6px; border-radius: 4px; letter-spacing: .3px; }
.ja-yt-meta { font-size: .7rem; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }

/* Summary & Next Steps Boxes */
.ja-summary-box, .ja-next-steps-box { margin: 20px 0; padding: 18px 22px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-card); }
.ja-summary-box h3, .ja-next-steps-box h3 { font-size: 1rem; font-weight: 700; color: var(--text); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.ja-summary-box h3 i { color: var(--accent); }
.ja-next-steps-box h3 i { color: var(--success); }
.ja-summary-box ul, .ja-summary-box ol, .ja-next-steps-box ul, .ja-next-steps-box ol { padding-left: 1.3rem; margin: 0; }
.ja-summary-box li, .ja-next-steps-box li { font-size: .88rem; color: var(--text-secondary); margin: 6px 0; line-height: 1.5; }

/* Want More / Bonus */
.ja-want-more { margin: 20px 0; padding: 18px 22px; border-radius: 12px; border-left: 3px solid var(--accent); background: rgba(106,161,255,.04); }
.ja-want-more h3 { font-size: 1rem; font-weight: 700; color: var(--text); margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.ja-want-more h3 i { color: var(--accent); }
.ja-want-more p { font-size: .88rem; color: var(--text-secondary); margin: 0; line-height: 1.6; }

/* Lab Step Cards */
.ja-lab-step { margin: 14px 0; padding: 18px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; }
.ja-lab-step-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ja-step-num { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg,#34d399,#059669); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 800; flex-shrink: 0; }
.ja-lab-step-header strong { color: var(--text); font-size: .92rem; }
.ja-lab-step p { font-size: .86rem; color: var(--text-secondary); line-height: 1.6; margin: 0 0 8px; }
.ja-expected { font-size: .82rem; color: var(--success); display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: rgba(52,211,153,.06); border-radius: 8px; margin-top: 8px; }
.ja-expected i { flex-shrink: 0; }

/* ── Visual Reference Cards (instant, no external images) ── */
.ja-visual-ref { margin: 14px 0; }
.ja-visual-gradient { border-radius: 12px; border: 1px solid; padding: 28px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; min-height: 120px; transition: all .3s; }
.ja-visual-gradient:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,.3); }
.ja-visual-icon { font-size: 2.2rem; opacity: .7; }
.ja-visual-text { font-size: .88rem; color: var(--text-secondary); line-height: 1.45; max-width: 85%; font-weight: 600; }
.ja-visual-search-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 8px; border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--accent); font-size: .78rem; font-weight: 600; text-decoration: none; transition: all .2s; margin-top: 4px; }
.ja-visual-search-btn:hover { background: rgba(106,161,255,.1); border-color: var(--accent); text-decoration: none; }

/* ── Web Image Preview Carousel ─────────────────────────── */
.ja-img-preview { margin: 14px 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--bg-card); }
.ja-img-preview-header { padding: 8px 14px; border-bottom: 1px solid var(--border); font-size: .8rem; font-weight: 600; color: var(--text-secondary); background: var(--bg-surface); display: flex; align-items: center; }
.ja-img-preview-row { display: flex; overflow-x: auto; gap: 10px; padding: 12px 14px; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.ja-img-preview-row::-webkit-scrollbar { height: 6px; }
.ja-img-preview-row::-webkit-scrollbar-track { background: transparent; }
.ja-img-preview-row::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.ja-img-card { flex: 0 0 220px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: #0d1117; cursor: pointer; scroll-snap-align: start; transition: transform .2s, box-shadow .2s; position: relative; }
.ja-img-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.4); border-color: var(--accent); }
.ja-img-card img { width: 100%; height: 150px; object-fit: cover; display: block; transition: transform .3s; }
.ja-img-card:hover img { transform: scale(1.04); }
.ja-img-card-overlay { position: absolute; top: 0; left: 0; right: 0; height: 150px; display: flex; align-items: flex-start; justify-content: space-between; padding: 6px 8px; pointer-events: none; }
.ja-img-expand-btn { width: 26px; height: 26px; border-radius: 6px; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.15); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .65rem; opacity: 0; transition: opacity .2s; pointer-events: auto; cursor: pointer; }
.ja-img-card:hover .ja-img-expand-btn { opacity: 1; }
.ja-img-source-tag { background: rgba(0,0,0,.65); color: rgba(255,255,255,.85); font-size: .6rem; padding: 2px 7px; border-radius: 4px; align-self: flex-end; margin-top: auto; position: absolute; bottom: calc(150px - 24px); right: 6px; letter-spacing: .2px; }
.ja-img-card-title { padding: 8px 10px; font-size: .7rem; color: var(--text-secondary); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ja-img-grid-credit a { color: var(--accent); text-decoration: none; }

/* ── YouTube Slider ───────────────────────────────────────── */
.ja-yt-slider { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--bg-card); }
.ja-yt-slider-viewport { position: relative; }
.ja-yt-slide { display: none; }
.ja-yt-slide.ja-yt-slide-active { display: block; }
.ja-yt-slide .ja-yt-embed-card { border: none; border-radius: 0; }
.ja-yt-slide .ja-yt-thumb-area { aspect-ratio: 16/9; min-height: auto; }
.ja-yt-slide .ja-yt-thumb-img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/9; }
.ja-yt-slide .ja-yt-iframe { width: 100%; aspect-ratio: 16/9; height: auto; }
.ja-slider-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,.65); border: 1px solid rgba(255,255,255,.15); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: .8rem; z-index: 5; transition: all .2s; }
.ja-slider-btn:hover { background: rgba(0,0,0,.9); border-color: var(--accent); transform: translateY(-50%) scale(1.08); }
.ja-slider-prev { left: 10px; }
.ja-slider-next { right: 10px; }
.ja-slider-dots { display: flex; gap: 5px; align-items: center; }
.ja-slider-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); border: none; cursor: pointer; transition: all .2s; padding: 0; }
.ja-slider-dot.ja-dot-active { background: var(--accent); transform: scale(1.4); }
.ja-img-count { font-size: .7rem; color: var(--text-muted); background: var(--bg-card); padding: 2px 8px; border-radius: 8px; }
.ja-yt-slider-viewport > .ja-slider-btn { z-index: 5; }
.ja-yt-slider-footer { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-top: 1px solid var(--border); background: var(--bg-surface); }

/* ── Sidebar Collapse ─────────────────────────────────────── */
.ja-sb-toggle { background: none; border: 1px solid var(--border); color: var(--text-muted); width: 28px; height: 28px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: .7rem; transition: all .2s; flex-shrink: 0; }
.ja-sb-toggle:hover { border-color: var(--accent); color: var(--accent); }
.ja-sb-expand { position: relative; width: 24px; min-width: 24px; background: var(--bg-card); border: none; border-right: 1px solid var(--border); color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: .7rem; transition: all .2s; flex-shrink: 0; }
.ja-sb-expand:hover { background: var(--bg-hover); color: var(--accent); }
.ja-skill-page.ja-sb-collapsed .ja-skill-sidebar { width: 0; min-width: 0; padding: 0; border: none; overflow: hidden; opacity: 0; transition: all .25s ease; }
.ja-skill-page .ja-skill-sidebar { transition: all .25s ease; opacity: 1; }

/* ── Fullscreen Image Modal ───────────────────────────────── */
.ja-fs-modal { display: none; position: fixed; inset: 0; z-index: 99999; align-items: center; justify-content: center; }
.ja-fs-modal.ja-fs-active { display: flex; }
.ja-fs-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.9); backdrop-filter: blur(8px); cursor: zoom-out; }
.ja-fs-content { position: relative; z-index: 1; max-width: 92vw; max-height: 92vh; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ja-fs-img { max-width: 88vw; max-height: 78vh; object-fit: contain; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.8); display: block; }
.ja-fs-close { position: fixed; top: 18px; right: 22px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: .95rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; z-index: 2; }
.ja-fs-close:hover { background: rgba(248,113,113,.25); border-color: #f87171; color: #f87171; transform: rotate(90deg); }
.ja-fs-bar { display: flex; justify-content: center; }
/* ── YouTube Embed Cards ──────────────────────────────────── */
.ja-yt-embed-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s, border-color .2s; }
.ja-yt-embed-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.4); border-color: rgba(255,0,0,.2); }
.ja-yt-thumb-area { position: relative; background: #0d1117; overflow: hidden; cursor: pointer; flex-shrink: 0; display: block; aspect-ratio: 16/9; }
.ja-yt-no-thumb { background: linear-gradient(135deg,#1a0a0a,#2d0707) !important; }
.ja-yt-no-thumb-bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#1a0000,#2a0a0a); }
.ja-yt-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.ja-yt-thumb-area:hover .ja-yt-thumb-img { transform: scale(1.04); }
.ja-yt-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(255,0,0,.88); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; pointer-events: none; transition: all .3s; box-shadow: 0 4px 20px rgba(0,0,0,.5); }
.ja-yt-thumb-area:hover .ja-yt-play-btn { background: #ff0000; transform: translate(-50%,-50%) scale(1.1); box-shadow: 0 6px 28px rgba(255,0,0,.4); }
.ja-yt-hover-text { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.72); color: #fff; font-size: .68rem; font-weight: 700; padding: 3px 10px; border-radius: 10px; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.ja-yt-thumb-area:hover .ja-yt-hover-text { opacity: 1; }
.ja-yt-search-link { text-decoration: none; }
.ja-yt-iframe { width: 100%; aspect-ratio: 16/9; border: none; display: block; background: #000; }



/* ============================================================
   VIDEO SCRIPT FEATURE — Styles
   ============================================================ */
.video-script-tabs {
  display: flex;
  gap: .75rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.tab-btn {
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-weight: 500;
  font-size: .9rem;
  transition: color .2s, border-color .2s;
  display: flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
}

.tab-btn:hover {
  color: var(--text);
}

.tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tab-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
  animation: fadeIn .2s ease;
}

.file-upload-btn {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 12px 16px;
  background: var(--bg-input);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--accent);
  cursor: pointer;
  font-weight: 500;
  transition: all .2s;
}

.file-upload-btn:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
}

.upload-hint {
  display: block;
  font-size: .8rem;
  color: var(--text-muted);
  margin-top: .35rem;
}

.output-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.output-header h2 {
  font-size: 1.1rem;
  margin: 0;
}

.output-meta {
  display: flex;
  gap: 1rem;
  align-items: center;
  font-size: .85rem;
  color: var(--text-muted);
}

.form-textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: .85rem;
  resize: vertical;
  line-height: 1.6;
  transition: border-color .2s;
}

.form-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(106,161,255,.1);
}

.output-actions {
  display: flex;
  gap: .75rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.script-history {
  position: fixed;
  right: 0;
  top: 0;
  width: 280px;
  height: 100%;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 999;
  box-shadow: -4px 0 16px rgba(0,0,0,.3);
}

.history-header {
  padding: 1.2rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.history-header h3 {
  font-size: .95rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.history-list {
  flex: 1;
  overflow-y: auto;
  padding: .75rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.history-item {
  padding: .8rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all .2s;
  font-size: .8rem;
  text-align: left;
  color: var(--text-secondary);
}

.history-item:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
  color: var(--text);
}

.history-item-title {
  font-weight: 600;
  margin-bottom: .35rem;
  color: var(--text);
}

.history-item-meta {
  font-size: .7rem;
  color: var(--text-muted);
}

@media (max-width: 1200px) {
  .script-history {
    width: 240px;
  }
}

@media (max-width: 768px) {
  .video-script-tabs {
    flex-wrap: wrap;
  }

  .output-header {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
  }

  .output-actions {
    flex-direction: column;
    width: 100%;
  }

  .output-actions .btn {
    width: 100%;
  }

  .script-history {
    display: none;
  }
}

/* Video Script — Options Grid (situation/tone) — REPLACED by vs-options-bar */
.vs-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 600px) {
  .vs-options-grid { grid-template-columns: 1fr; }
}

/* === VIDEO SCRIPT COMPACT REDESIGN === */

/* Card tweak */
.vs-card { padding: 1rem 1.25rem; }

/* Compact input row - all tab inputs live here */
.vs-input-row {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
}

/* Upload pill button (replaces file-upload-btn inside tabs) */
.vs-upload-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 7px 14px;
  background: var(--bg-input);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--accent);
  cursor: pointer;
  font-weight: 500;
  font-size: .82rem;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all .2s;
}
.vs-upload-pill:hover { background: var(--bg-hover); border-color: var(--accent); }

/* Mini duration select inline with file pickers */
.vs-mini-select {
  min-width: 120px !important;
  max-width: 150px !important;
  padding: 7px 10px !important;
  font-size: .8rem !important;
  flex-shrink: 0;
}

/* Inline file status (truncates long names) */
.vs-status-inline {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* ======================== VIDEO AI — STEPPER & WIZARD ======================== */

/* Stepper Bar */
.va-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 1.25rem 0 1.5rem;
  padding: 0 1rem;
  flex-wrap: wrap;
}
.va-step {
  display: flex;
  align-items: center;
  gap: .45rem;
  cursor: default;
  padding: .35rem .5rem;
  border-radius: 8px;
}
.va-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 700;
  border: 2px solid var(--border);
  color: var(--text-muted);
  background: var(--bg-card);
  transition: all .25s;
  flex-shrink: 0;
}
.va-step-label {
  font-size: .78rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color .25s;
  white-space: nowrap;
}
.va-step.active .va-step-num  { border-color: var(--accent); background: var(--accent); color: #fff; }
.va-step.active .va-step-label { color: var(--text); font-weight: 600; }
.va-step.done .va-step-num    { border-color: var(--success); background: var(--success); color: #fff; }
.va-step.done .va-step-label  { color: var(--success); }
.va-step-line {
  width: 28px;
  height: 2px;
  background: var(--border);
  flex-shrink: 0;
  transition: background .25s;
}
.va-step-line.filled { background: var(--success); }

/* Accordion Step Cards */
.va-step-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  margin-bottom: .75rem;
  overflow: hidden;
  transition: border-color .2s;
}
.va-step-card[data-open="true"]  { border-color: var(--accent); }
.va-step-card[data-completed="true"] { border-color: var(--success); opacity: .92; }

.va-step-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1.1rem;
  cursor: pointer;
  user-select: none;
  gap: .75rem;
}
.va-step-card-header:hover { background: rgba(255,255,255,.025); }
.va-step-card-title {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 600;
  font-size: .9rem;
  flex-wrap: wrap;
}
.va-step-badge-sm {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  background: var(--accent);
  color: #fff;
  flex-shrink: 0;
}
.va-step-chevron {
  font-size: .8rem;
  color: var(--text-muted);
  transition: transform .25s;
  flex-shrink: 0;
}
.va-step-card[data-open="true"] .va-step-chevron { transform: rotate(180deg); }
.va-done-tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .72rem;
  font-weight: 600;
  color: var(--success);
  background: rgba(74,222,128,.12);
  border: 1px solid rgba(74,222,128,.25);
  padding: 2px 8px;
  border-radius: 99px;
}

/* Card body */
.va-step-card-body {
  display: none;
  padding: 0 1.1rem 1.25rem;
  animation: vaFadeIn .2s ease;
}
.va-step-card[data-open="true"] .va-step-card-body { display: block; }

@keyframes vaFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Output blocks */
.va-output-block {
  background: var(--bg-input, #0f1218);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem;
  font-size: .88rem;
  line-height: 1.7;
  max-height: 500px;
  overflow-y: auto;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.va-output-block p { margin: 0 0 .6rem; }

.va-output-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .75rem;
}

/* Scene / camera / whisker item cards */
.va-scene-card {
  background: var(--bg-input, #0f1218);
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  padding: .85rem 1rem;
  margin-bottom: .6rem;
}
.va-scene-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .55rem;
}
.va-scene-num {
  font-size: .78rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .04em;
}
.va-scene-section-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  margin-bottom: .3rem;
}
.va-scene-narration {
  font-size: .86rem;
  line-height: 1.65;
  color: var(--text);
  white-space: pre-wrap;
}
.va-scene-prompt {
  font-size: .84rem;
  line-height: 1.6;
  color: rgba(244,134,182,.9);
  white-space: pre-wrap;
  word-break: break-word;
}

/* History items */
.va-history-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: .4rem;
}
.va-history-item:hover { border-color: var(--accent) !important; background: rgba(106,161,255,.04); }

/* Responsive */
@media (max-width: 700px) {
  .va-stepper { gap: .2rem; }
  .va-step-line { width: 14px; }
  .va-step-label { display: none; }
  .va-step-num { width: 28px; height: 28px; font-size: .8rem; }
  .va-step-card-header { padding: .7rem .85rem; }
  .va-output-toolbar { gap: .35rem; }
}


/* Combine checkbox label */
.vs-check-label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
}

/* Source pill toggle (File / YouTube) */
.vs-src-pills {
  display: flex;
  gap: .25rem;
  flex-shrink: 0;
}
.vs-src-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 6px 12px;
  border-radius: var(--radius);
  font-size: .8rem;
  cursor: pointer;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: all .15s;
  font-weight: 500;
  user-select: none;
  white-space: nowrap;
}
.vs-src-pill.active,
.vs-src-pill:has(input:checked) {
  background: rgba(106,161,255,.12);
  border-color: var(--accent);
  color: var(--accent);
}

/* Skills collapsible wrapper */
.vs-skills-wrap { margin-top: .6rem; }
.vs-skills-toggle-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: .8rem;
  cursor: pointer;
  padding: 3px 0;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.vs-skills-toggle-btn:hover { color: var(--accent); }
.vs-chevron { transition: transform .2s; font-size: .7rem; }
.vs-skills-toggle-btn.open .vs-chevron { transform: rotate(180deg); }

/* Bottom options bar: situation | tone | style | generate */
.vs-options-bar {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.vs-bar-select {
  flex: 1;
  min-width: 110px !important;
  padding: 7px 10px !important;
  font-size: .8rem !important;
}
@media (max-width: 700px) {
  .vs-options-bar { gap: .35rem; }
  .vs-bar-select { min-width: 90px !important; }
  .vs-input-row { gap: .35rem; }
}

/* Video Script — PPTX Preview Slide Card */
.vs-slide-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  position: relative;
}
.vs-slide-card-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
}

/* ============================================================
   SBOM TOOLS — Security Scanner Dashboard
   ============================================================ */
.sbom-phases-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}
.sbom-phase-card {
  background: var(--card-bg, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: var(--radius, 12px);
  padding: 1.25rem;
  transition: border-color .3s, box-shadow .3s;
}
.sbom-phase-card.sbom-running {
  border-color: var(--accent, #38bdf8);
  box-shadow: 0 0 12px rgba(56, 189, 248, .15);
}
.sbom-phase-card.sbom-done {
  border-color: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, .1);
}
.sbom-phase-card.sbom-error {
  border-color: #ef4444;
}
.sbom-phase-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.sbom-phase-header > div { flex: 1; }
.sbom-phase-header h3 { margin: 0; font-size: 1.05rem; color: var(--text-primary, #f1f5f9); }
.sbom-phase-header p { margin: .2rem 0 0; font-size: .82rem; color: var(--text-secondary, #94a3b8); }
.sbom-phase-num {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent, #38bdf8), #6366f1);
  color: #fff; font-weight: 700; font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sbom-run-btn { flex-shrink: 0; min-width: 100px; }
.sbom-phase-status { margin-top: .75rem; font-size: .85rem; }
.sbom-running-text { color: var(--accent, #38bdf8); }
.sbom-ok-text { color: #22c55e; }
.sbom-err-text { color: #ef4444; }
.sbom-phase-output {
  margin-top: 1rem;
  animation: sbomFadeIn .3s ease;
}
@keyframes sbomFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Summary bar */
.sbom-summary-bar {
  display: flex; gap: 1rem; flex-wrap: wrap;
  padding: .75rem; background: rgba(0,0,0,.2);
  border-radius: 8px; margin-bottom: 1rem;
}
.sbom-stat {
  display: flex; flex-direction: column; align-items: center;
  min-width: 70px; flex: 1;
}
.sbom-stat-num { font-size: 1.6rem; font-weight: 700; color: var(--text-primary, #f1f5f9); }
.sbom-stat span:last-child { font-size: .72rem; color: var(--text-secondary, #94a3b8); text-transform: uppercase; letter-spacing: .5px; }
.sbom-stat-num.sbom-ok { color: #22c55e; }
.sbom-stat-num.sbom-warn { color: #f59e0b; }
.sbom-stat-num.sbom-high { color: #f97316; }
.sbom-stat-num.sbom-medium { color: #eab308; }
.sbom-stat-num.sbom-critical { color: #ef4444; }

/* Tables */
.sbom-table-wrap { overflow-x: auto; max-height: 400px; overflow-y: auto; border-radius: 8px; }
.sbom-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.sbom-table th {
  background: rgba(0,0,0,.3); color: var(--text-secondary, #94a3b8);
  padding: .5rem .65rem; text-align: left; font-weight: 600;
  position: sticky; top: 0; z-index: 1;
  text-transform: uppercase; font-size: .7rem; letter-spacing: .5px;
}
.sbom-table td { padding: .45rem .65rem; border-bottom: 1px solid rgba(255,255,255,.05); }
.sbom-table tr:hover td { background: rgba(255,255,255,.03); }
.sbom-mono { font-family: monospace; font-size: .75rem; word-break: break-all; color: var(--text-secondary, #94a3b8); }

/* Badges */
.sbom-badge {
  display: inline-block; padding: .15rem .55rem; border-radius: 4px;
  font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
}
.sbom-sev-critical { background: rgba(239,68,68,.2); color: #ef4444; }
.sbom-sev-high { background: rgba(249,115,22,.2); color: #f97316; }
.sbom-sev-medium { background: rgba(234,179,8,.2); color: #eab308; }
.sbom-sev-low { background: rgba(34,197,94,.15); color: #22c55e; }
.sbom-sev-unknown { background: rgba(148,163,184,.15); color: #94a3b8; }

/* Clean state */
.sbom-clean {
  text-align: center; padding: 1.5rem; color: #22c55e;
  font-size: 1.1rem; font-weight: 600;
}
.sbom-clean i { font-size: 1.5rem; margin-right: .5rem; }

/* Details/toggle */
.sbom-details { margin-top: .75rem; }
.sbom-details summary {
  cursor: pointer; padding: .5rem .75rem;
  background: rgba(0,0,0,.15); border-radius: 6px;
  font-size: .85rem; color: var(--accent, #38bdf8);
  font-weight: 500;
}
.sbom-details summary:hover { background: rgba(0,0,0,.25); }
.sbom-pre {
  background: rgba(0,0,0,.3); padding: .75rem; border-radius: 6px;
  font-size: .78rem; overflow-x: auto; max-height: 250px; overflow-y: auto;
  color: var(--text-secondary, #94a3b8); line-height: 1.4;
}

/* License rows */
.sbom-lic-row {
  padding: .6rem .75rem; border-radius: 6px; margin-bottom: .4rem;
  display: flex; flex-direction: column; gap: .35rem;
}
.sbom-lic-ok { background: rgba(34,197,94,.05); }
.sbom-lic-warn { background: rgba(249,115,22,.08); border-left: 3px solid #f97316; }
.sbom-lic-danger { background: rgba(239,68,68,.08); border-left: 3px solid #ef4444; }
.sbom-lic-label { display: flex; align-items: center; gap: .6rem; font-size: .85rem; }
.sbom-lic-count { color: var(--text-secondary, #94a3b8); font-size: .78rem; margin-left: auto; }
.sbom-lic-pkgs { padding-left: 1rem; font-size: .78rem; }
.sbom-lic-pkgs code {
  background: rgba(0,0,0,.2); padding: .1rem .4rem; border-radius: 4px;
  font-size: .75rem; margin-right: .3rem; color: var(--text-secondary, #94a3b8);
}

/* Report header */
.sbom-report-header {
  text-align: center; margin-bottom: 1rem;
}
.sbom-report-header h3 { margin: 0; font-size: 1.15rem; color: var(--accent, #38bdf8); }
.sbom-report-header p { margin: .3rem 0 0; font-size: .82rem; color: var(--text-secondary, #94a3b8); }

/* Warning button */
.btn-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff; border: none; cursor: pointer;
  padding: .5rem 1rem; border-radius: var(--radius, 8px);
  font-weight: 600; font-size: .85rem;
}
.btn-warning:hover { opacity: .9; }
.btn-accent {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; border: none; cursor: pointer;
  padding: .5rem 1rem; border-radius: var(--radius, 8px);
  font-weight: 600; font-size: .85rem;
}
.btn-accent:hover { opacity: .9; }

/* Responsive */
@media (max-width: 600px) {
  .sbom-summary-bar { gap: .5rem; }
  .sbom-stat-num { font-size: 1.2rem; }
  .sbom-phase-header { flex-wrap: wrap; }
  .sbom-run-btn { width: 100%; margin-top: .5rem; }
}
  font-weight: 600;
  font-size: .9rem;
  color: var(--accent);
}
.vs-slide-card-badges {
  display: flex;
  gap: .35rem;
  margin-left: auto;
}
.vs-slide-badge {
  font-size: .7rem;
  padding: 2px 8px;
  border-radius: 99px;
  font-weight: 500;
}
.vs-slide-badge.text { background: rgba(77, 171, 247, 0.15); color: #4dabf7; }
.vs-slide-badge.image { background: rgba(81, 207, 102, 0.15); color: #51cf66; }
.vs-slide-card-content {
  font-size: .82rem;
  color: var(--text-secondary);
  line-height: 1.55;
  white-space: pre-wrap;
  max-height: 180px;
  overflow-y: auto;
}

/* Video Script — File Row & Status */
.vs-file-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.vs-file-status {
  font-size: .82rem;
  color: var(--success);
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: 4px 0;
  min-height: 24px;
}

.vs-file-status:empty { display: none; }

/* Image preview grid */
.vs-images-preview {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .5rem;
}

.vs-images-preview:empty { display: none; }

.vs-img-thumb {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--border);
}

.vs-img-thumb-wrap {
  position: relative;
}

.vs-img-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  border: none;
  font-size: .6rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Skills picker */
.vs-skills-picker {
  display: none;
  max-height: 200px;
  overflow-y: auto;
  padding: .65rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: .4rem;
}
.vs-skills-picker.open { display: block; }

.vs-skills-group {
  margin-bottom: .75rem;
}

.vs-skills-group-title {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  margin-bottom: .35rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--border);
}

.vs-skills-list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.vs-skill-chip {
  padding: 3px 10px;
  font-size: .75rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}

.vs-skill-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg-hover);
}

.vs-skill-chip.selected {
  background: rgba(106,161,255,.15);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* CISSP Curriculum Cascade */
.cissp-cascade {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.cissp-select {
  font-size: .82rem;
  padding: .45rem .6rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
}
.cissp-select:focus { border-color: var(--accent); outline: none; }
.cissp-selection-summary {
  font-size: .82rem;
  padding: .5rem .7rem;
  background: rgba(106,161,255,.08);
  border: 1px solid rgba(106,161,255,.25);
  border-radius: var(--radius);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Sample script card in modal */
.vs-sample-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .85rem;
}

.vs-sample-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;  
  margin-bottom: .35rem;
}

.vs-sample-card-title {
  font-weight: 600;
  font-size: .9rem;
}

.vs-sample-card-preview {
  font-size: .78rem;
  color: var(--text-muted);
  max-height: 60px;
  overflow: hidden;
  line-height: 1.4;
  white-space: pre-wrap;
}

/* Modal overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  width: 100%;
  box-shadow: 0 16px 48px rgba(0,0,0,.5);
  animation: modalIn .2s;
}

/* ==================== SBOM EXTERNAL SCANNER ==================== */
.sext-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 1.25rem; }
.sext-tab {
  padding: .6rem 1.2rem; background: none; border: none; color: var(--text-secondary);
  font-size: .85rem; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -2px; transition: all .15s; display: flex; align-items: center; gap: .4rem;
}
.sext-tab:hover { color: var(--text-primary); }
.sext-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.sext-target-bar { display: flex; gap: .75rem; margin-bottom: 1rem; }
.sext-target-bar .form-group label { font-size: .78rem; font-weight: 600; color: var(--text-secondary); }

.sext-methods { display: flex; flex-direction: column; gap: .5rem; }
.sext-method {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-card); overflow: hidden; transition: border-color .2s;
}
.sext-method:hover { border-color: var(--accent); }
.sext-method-header {
  display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem;
  cursor: pointer; user-select: none; flex-wrap: wrap;
}
.sext-method-header > span:first-child { font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: .4rem; white-space: nowrap; }
.sext-method-desc { font-size: .75rem; color: var(--text-secondary); flex: 1; }
.sext-chevron { margin-left: auto; font-size: .7rem; color: var(--text-secondary); transition: transform .2s; }
.sext-method-body { padding: 0 1rem 1rem; }

.sext-pkg-row { display: flex; gap: .5rem; align-items: center; margin-bottom: .4rem; }
.sext-hint { font-size: .75rem; color: var(--text-secondary); margin: .5rem 0 0; }
.sext-hint i { color: var(--accent); }

.sext-status {
  margin-top: .75rem; padding: .65rem .85rem; border-radius: var(--radius);
  font-size: .82rem; line-height: 1.5;
}
.sext-status-info { background: rgba(56,189,248,.08); border: 1px solid rgba(56,189,248,.25); color: var(--accent); }
.sext-status-ok { background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.25); color: #22c55e; }
.sext-status-error { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.25); color: #ef4444; }
.sext-status a { color: var(--accent); font-weight: 600; text-decoration: underline; }

.sext-loading { text-align: center; padding: 2rem; color: var(--text-secondary); font-size: .95rem; }
.sext-empty { text-align: center; padding: 3rem 1rem; color: var(--text-secondary); font-size: .9rem; }
.sext-clean { text-align: center; padding: 1.5rem; color: #22c55e; font-size: 1rem; font-weight: 600; }

.sext-actions { display: flex; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }

/* Fingerprint results */
.sext-fp-results { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.sext-fp-item {
  display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem;
  background: var(--bg-hover); border-radius: var(--radius); font-size: .78rem;
}
.sext-fp-cat {
  background: var(--accent); color: #fff; font-size: .65rem; font-weight: 700;
  padding: .1rem .35rem; border-radius: 3px; text-transform: uppercase;
}
.sext-fp-source { color: var(--text-secondary); font-size: .7rem; }

/* Report preview */
.sext-report-actions { display: flex; gap: .5rem; margin-bottom: 1rem; }
.sext-report-preview {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.5rem; line-height: 1.7;
}
.sext-report-preview h2 { font-size: 1.1rem; margin-bottom: .5rem; }
.sext-report-preview h3 { font-size: .95rem; margin: 1.25rem 0 .5rem; color: var(--accent); border-bottom: 1px solid var(--border); padding-bottom: .3rem; }
.sext-report-meta { display: flex; gap: 1.5rem; font-size: .78rem; color: var(--text-secondary); margin-bottom: 1rem; flex-wrap: wrap; }
.sext-report-meta span { display: flex; align-items: center; gap: .3rem; }

.sext-learn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.sext-learn-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.1rem 1.15rem;
}
.sext-learn-card-wide { grid-column: 1 / -1; }
.sext-learn-card h3 {
  display: flex; align-items: center; gap: .45rem; margin: 0 0 .8rem;
  font-size: .95rem; color: var(--accent);
}
.sext-learn-list { margin: 0; padding-left: 1.15rem; display: grid; gap: .55rem; }
.sext-bullet-list { margin: 0; padding-left: 1.05rem; display: grid; gap: .45rem; }
.sext-learn-table-wrap { overflow-x: auto; }
.sext-workflow { display: grid; gap: .75rem; }
.sext-step {
  display: grid; grid-template-columns: 40px 1fr; gap: .8rem; align-items: flex-start;
  padding: .8rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: rgba(255,255,255,.02);
}
.sext-step p { margin: .25rem 0 0; color: var(--text-secondary); font-size: .83rem; }
.sext-step-num {
  width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent, #38bdf8), #0ea5e9); color: #fff; font-weight: 700;
}
.sext-check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .65rem; }
.sext-check-item {
  border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem .85rem; background: rgba(34,197,94,.05);
}
.sext-check-item::before { content: 'CHECK'; display: inline-block; margin-right: .45rem; color: #22c55e; font-size: .68rem; font-weight: 700; }

@media (max-width: 600px) {
  .sext-tabs { overflow-x: auto; }
  .sext-tab { font-size: .78rem; padding: .5rem .8rem; }
  .sext-target-bar { flex-direction: column; }
  .sext-pkg-row { flex-wrap: wrap; }
  .sext-method-header { flex-direction: column; align-items: flex-start; }
  .sext-step { grid-template-columns: 1fr; }
}

/* ==================== PYTHON APPS ==================== */
.pyapp-layout { display: flex; gap: 0; min-height: calc(100vh - 160px); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--card-bg); box-shadow: 0 4px 24px rgba(0,0,0,0.08); }
.pyapp-sidebar { width: 290px; min-width: 290px; border-right: 1px solid var(--border); display: flex; flex-direction: column; position: relative; background: var(--bg); transition: width 0.25s ease, min-width 0.25s ease; }
.pyapp-sidebar.collapsed { width: 60px; min-width: 60px; }
.pyapp-sidebar.collapsed .pyapp-sidebar-header { padding: 10px 6px; }
.pyapp-sidebar.collapsed .pyapp-filter-chips { display: none; }
.pyapp-sidebar.collapsed .pyapp-list { padding: 4px; }
.pyapp-sidebar.collapsed .pyapp-item { justify-content: center; padding: 10px 6px; gap: 0; }
.pyapp-sidebar.collapsed .pyapp-fab { right: 7px; width: 38px; height: 38px; font-size: 1rem; }
.pyapp-sidebar-header { padding: 14px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; position: static; }
.pyapp-collapse-btn { background: none; border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; padding: 5px 8px; border-radius: 6px; font-size: 0.75rem; transition: all 0.15s; flex-shrink: 0; position: absolute; right: 10px; top: 10px; z-index: 2; }
.pyapp-collapse-btn:hover { background: var(--hover-bg); color: var(--text); }

/* Search bar */
.pyapp-search-wrap { display: flex; align-items: center; background: var(--bg-card, rgba(15,23,42,0.55)); border: 1px solid var(--border); border-radius: 10px; padding: 0 10px; gap: 8px; }
.pyapp-search-icon { color: var(--text-dim); font-size: 0.8rem; flex-shrink: 0; }
.pyapp-search-wrap input { flex: 1; background: none; border: none; color: var(--text); font-size: 0.82rem; padding: 8px 0; outline: none; min-width: 0; }
.pyapp-search-wrap input::placeholder { color: var(--text-dim); }
.pyapp-filter-dropdown-btn { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 4px 6px; border-radius: 6px; font-size: 0.85rem; position: relative; transition: color 0.15s; flex-shrink: 0; }
.pyapp-filter-dropdown-btn:hover { color: var(--accent); }
.pyapp-filter-count { position: absolute; top: -4px; right: -4px; background: var(--accent); color: #fff; font-size: 0.6rem; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; }

/* Filter dropdown */
.pyapp-filter-dropdown { position: absolute; top: 54px; left: 14px; right: 14px; width: calc(100% - 28px); background: var(--bg-card, rgba(15,23,42,0.95)); border: 1px solid var(--border); border-radius: 10px; padding: 8px; max-height: 280px; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; z-index: 100; box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
.pyapp-dd-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 0.78rem; color: var(--text); transition: background 0.12s; }
.pyapp-dd-item:hover { background: var(--hover-bg); }
.pyapp-dd-item input[type="checkbox"] { accent-color: var(--accent); width: 14px; height: 14px; cursor: pointer; }
.pyapp-filter-actions { display: flex; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border); margin-top: 4px; }
.pyapp-filter-btn { flex: 1; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border); font-size: 0.76rem; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.pyapp-filter-cancel { background: transparent; color: var(--text-dim); }
.pyapp-filter-cancel:hover { background: var(--hover-bg); color: var(--text); }
.pyapp-filter-done { background: var(--accent); color: #fff; border-color: var(--accent); }
.pyapp-filter-done:hover { opacity: 0.9; }
.pyapp-filter-done:active { opacity: 0.8; }

/* Pagination */
.pyapp-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 14px; border-top: 1px solid var(--border); }
.pyapp-page-btn { background: none; border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; padding: 4px 10px; border-radius: 6px; font-size: 0.78rem; transition: all 0.15s; }
.pyapp-page-btn:hover:not(:disabled) { background: var(--hover-bg); color: var(--text); }
.pyapp-page-btn:disabled { opacity: 0.35; cursor: default; }
.pyapp-page-info { font-size: 0.78rem; color: var(--text-dim); font-weight: 600; }
.pyapp-sidebar.collapsed .pyapp-pagination { display: none !important; }
.pyapp-sidebar.collapsed .pyapp-search-wrap { display: none !important; }
.pyapp-sidebar.collapsed .pyapp-filter-dropdown { display: none !important; }
.pyapp-info-btn { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 4px 6px; border-radius: 6px; font-size: 0.8rem; opacity: 0; transition: opacity 0.15s, color 0.15s; flex-shrink: 0; }
.pyapp-item:hover .pyapp-info-btn { opacity: 1; }
.pyapp-info-btn:hover { color: var(--accent); }
.pyapp-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pyapp-chip { padding: 5px 12px; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; font-size: 0.75rem; transition: all 0.2s; font-weight: 500; }
.pyapp-chip:hover { border-color: var(--accent); background: var(--accent-light, rgba(99,102,241,0.06)); }
.pyapp-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 2px 8px rgba(99,102,241,0.3); }
.pyapp-list { flex: 1; overflow-y: auto; padding: 8px; scrollbar-width: thin; margin-top: 0; }
.pyapp-item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px; cursor: pointer; transition: all 0.18s ease; margin-bottom: 4px; border: 1px solid transparent; }
.pyapp-item:hover { background: var(--hover-bg); border-color: var(--border); }
.pyapp-item.active { background: var(--accent-light, rgba(99,102,241,0.12)); border-left: 3px solid var(--accent); box-shadow: inset 0 0 0 1px rgba(99,102,241,0.15); }
.pyapp-item i { font-size: 1.1rem; color: var(--accent); width: 26px; text-align: center; flex-shrink: 0; }
.pyapp-item-info { flex: 1; min-width: 0; }
.pyapp-item-info strong { display: block; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pyapp-item-info small { color: var(--text-dim); font-size: 0.72rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.pyapp-saved-badge { background: var(--accent); color: #fff; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; flex-shrink: 0; font-weight: 600; }
.pyapp-fab { position: absolute; bottom: 16px; right: 16px; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; border: none; font-size: 1.2rem; cursor: pointer; box-shadow: 0 4px 16px rgba(99,102,241,0.4); transition: all 0.25s; display: flex; align-items: center; justify-content: center; z-index: 2; }
.pyapp-fab:hover { transform: scale(1.1) translateY(-2px); box-shadow: 0 8px 24px rgba(99,102,241,0.5); }
.pyapp-main { flex: 1; padding: 28px; overflow-y: auto; scrollbar-width: thin; }
.pyapp-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--text-dim); text-align: center; gap: 12px; }
.pyapp-empty-state i { font-size: 3.5rem; opacity: 0.2; }
.pyapp-empty-state h3 { margin: 0; font-size: 1.1rem; }
.pyapp-empty-list { padding: 32px 16px; text-align: center; color: var(--text-dim); font-size: 0.85rem; }

/* Detail panel */
.pyapp-detail-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pyapp-detail-title { display: flex; align-items: center; gap: 14px; }
.pyapp-detail-title i { font-size: 2rem; color: var(--accent); background: var(--accent-light, rgba(99,102,241,0.1)); width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 12px; }
.pyapp-detail-title h2 { margin: 0; font-size: 1.3rem; }
.pyapp-detail-actions { display: flex; gap: 6px; }
.pyapp-detail-desc { color: var(--text-dim); margin-bottom: 20px; font-size: 0.9rem; line-height: 1.5; }
.pyapp-category-badge { font-size: 0.7rem; padding: 3px 10px; border-radius: 12px; background: var(--accent-light, rgba(99,102,241,0.12)); color: var(--accent); font-weight: 600; letter-spacing: 0.3px; }

/* Input form */
.pyapp-input-form { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.pyapp-field { display: flex; flex-direction: column; gap: 5px; }
.pyapp-field label { font-weight: 600; font-size: 0.82rem; color: var(--text-dim); letter-spacing: 0.2px; }
.pyapp-field input, .pyapp-field select, .pyapp-field textarea { padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); font-size: 0.9rem; font-family: inherit; transition: border-color 0.2s, box-shadow 0.2s; }
.pyapp-field input:focus, .pyapp-field select:focus, .pyapp-field textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }

/* Run bar */
.pyapp-run-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.pyapp-run-btn { min-width: 110px; font-weight: 600; border-radius: 10px; padding: 10px 20px; transition: all 0.2s; }
.pyapp-run-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,102,241,0.3); }
.pyapp-exec-time { font-size: 0.78rem; color: var(--text-dim); background: var(--bg); padding: 4px 12px; border-radius: 12px; border: 1px solid var(--border); font-weight: 500; }

/* Output */
.pyapp-output { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 20px; transition: box-shadow 0.2s; }
.pyapp-output:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.pyapp-output-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--bg); border-bottom: 1px solid var(--border); }
.pyapp-output-header h3 { margin: 0; font-size: 0.9rem; }
.pyapp-output-body { padding: 16px; overflow-x: auto; }
.pyapp-json { margin: 0; padding: 12px; background: var(--bg); border-radius: 8px; font-size: 0.82rem; white-space: pre-wrap; word-break: break-word; }
.pyapp-error { color: #f87171; display: flex; align-items: center; gap: 8px; padding: 12px; background: rgba(248,113,113,0.08); border-radius: 8px; }
.pyapp-stderr { border-top: 1px solid var(--border); }
.pyapp-stderr summary { padding: 8px 14px; cursor: pointer; color: #f87171; font-size: 0.82rem; }
.pyapp-stderr pre { padding: 10px 14px; margin: 0; font-size: 0.78rem; color: #f87171; white-space: pre-wrap; }

/* Table output */
.pyapp-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.pyapp-table th, .pyapp-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.pyapp-table th { background: var(--bg); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; color: var(--text-dim); }
.pyapp-table code { font-size: 0.78rem; background: var(--bg); padding: 2px 6px; border-radius: 4px; word-break: break-all; }

/* Result header (for header scanner etc.) */
.pyapp-result-header { display: flex; align-items: center; gap: 16px; padding: 12px 0; margin-bottom: 8px; flex-wrap: wrap; }
.pyapp-grade { font-size: 1.1rem; font-weight: 700; padding: 4px 16px; border-radius: 8px; }
.pyapp-grade-a { background: #22c55e20; color: #22c55e; }
.pyapp-grade-b { background: #84cc1620; color: #84cc16; }
.pyapp-grade-c { background: #eab30820; color: #eab308; }
.pyapp-grade-d { background: #f9731620; color: #f97316; }
.pyapp-grade-f { background: #ef444420; color: #ef4444; }
.pyapp-summary-bar { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.pyapp-tag { padding: 4px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.pyapp-tag-pass { background: #22c55e20; color: #22c55e; }
.pyapp-tag-fail { background: #ef444420; color: #ef4444; }
.pyapp-tag-warn { background: #eab30820; color: #eab308; }

/* Source code */
.pyapp-source { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 20px; }
.pyapp-source-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--bg); border-bottom: 1px solid var(--border); }
.pyapp-source-header h3 { margin: 0; font-size: 0.9rem; }
.pyapp-source pre { margin: 0; padding: 16px; font-size: 0.82rem; overflow-x: auto; }
.pyapp-code-editor { width: 100%; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: #1e1e2e; color: #cdd6f4; font-family: 'Fira Code', 'Cascadia Code', monospace; font-size: 0.82rem; line-height: 1.6; resize: vertical; tab-size: 4; }
.pyapp-edit-actions { display: flex; gap: 8px; padding: 12px 16px; }

/* Saved results */
.pyapp-saved { margin-bottom: 20px; }
.pyapp-saved details > summary { cursor: pointer; padding: 12px 16px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; font-weight: 600; font-size: 0.85rem; transition: border-color 0.2s; }
.pyapp-saved details > summary:hover { border-color: var(--accent); }
.pyapp-saved-list { padding: 8px 0; }
.pyapp-saved-item { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.pyapp-saved-meta { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg); font-size: 0.78rem; color: var(--text-dim); }
.pyapp-saved-meta em { flex: 1; }
.pyapp-saved-pre { margin: 0; padding: 10px 12px; font-size: 0.78rem; white-space: pre-wrap; word-break: break-word; border-top: 1px solid var(--border); max-height: 200px; overflow-y: auto; }
.pyapp-saved-item details summary { padding: 6px 12px; cursor: pointer; font-size: 0.78rem; color: var(--accent); }

/* Create new app */
.pyapp-create-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.pyapp-create-steps { display: flex; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.pyapp-step-item { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-dim); padding: 6px 12px; border-radius: 8px; background: var(--bg); }
.pyapp-step-item.step-active { color: var(--accent); }
.pyapp-step-item.step-done { color: #22c55e; }
.pyapp-step-item.step-fail { color: #ef4444; }
.pyapp-safety-block { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.3); border-radius: 10px; padding: 16px; margin-bottom: 12px; }
.pyapp-safety-block h4 { margin: 0 0 8px; color: #ef4444; }
.pyapp-safety-block ul { margin: 8px 0; padding-left: 20px; }
.pyapp-safety-block li { margin-bottom: 4px; color: #ef4444; font-size: 0.85rem; }
.pyapp-safety-warnings { color: #eab308; font-size: 0.82rem; margin-top: 6px; }
.pyapp-safety-ok { background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.3); border-radius: 10px; padding: 12px; margin-bottom: 12px; color: #22c55e; }
.pyapp-deps-result { margin-top: 12px; }
.pyapp-deps-ok { background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.3); border-radius: 8px; padding: 10px 14px; margin-bottom: 6px; color: #22c55e; font-size: 0.85rem; }
.pyapp-deps-ok code { background: rgba(34,197,94,0.15); padding: 2px 6px; border-radius: 4px; }
.pyapp-deps-missing { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.3); border-radius: 8px; padding: 10px 14px; margin-bottom: 6px; color: #f87171; font-size: 0.85rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pyapp-deps-missing code { background: rgba(239,68,68,0.15); padding: 2px 6px; border-radius: 4px; }

/* Responsive */
@media (max-width: 768px) {
  .pyapp-layout { flex-direction: column; border-radius: 12px; }
  .pyapp-sidebar { width: 100%; min-width: 0; max-height: 200px; border-right: none; border-bottom: 1px solid var(--border); }
  .pyapp-fab { bottom: 8px; right: 8px; width: 38px; height: 38px; font-size: 1rem; }
  .pyapp-main { padding: 16px; }
  .pyapp-ai-popup { width: 95vw; height: 85vh; max-width: none; border-radius: 16px; }
  .pyapp-detail-title i { width: 40px; height: 40px; font-size: 1.5rem; }
  .pyapp-run-bar { flex-wrap: wrap; }
}

/* Input Echo */
.pyapp-input-echo { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; transition: all 0.2s; }
.pyapp-input-echo-header { font-size: 0.75rem; font-weight: 600; color: var(--text-dim); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.pyapp-input-echo-body { display: flex; flex-wrap: wrap; gap: 8px; }
.pyapp-echo-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--accent-light, rgba(99,102,241,0.1)); color: var(--text); padding: 5px 12px; border-radius: 20px; font-size: 0.78rem; border: 1px solid rgba(99,102,241,0.15); }
.pyapp-echo-chip strong { color: var(--accent); font-weight: 600; }

/* AI Ask Me Button */
.pyapp-ai-btn { background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff !important; border: none; border-radius: 8px; font-weight: 500; }
.pyapp-ai-btn:hover { background: linear-gradient(135deg, #0097a7, #4f46e5); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,102,241,0.35); }

/* AI Popup Overlay */
.pyapp-ai-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); z-index: 1000; display: flex; align-items: center; justify-content: center; animation: pyappOverlayIn 0.2s ease; }
@keyframes pyappOverlayIn { from { opacity: 0; } to { opacity: 1; } }
.pyapp-ai-popup { width: 560px; max-width: 90vw; height: 70vh; max-height: 600px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 20px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,0.35); animation: pyappPopupIn 0.25s ease; }
@keyframes pyappPopupIn { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
.pyapp-ai-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); background: var(--bg); }
.pyapp-ai-header h3 { margin: 0; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; }
.pyapp-ai-header h3 i { color: #8b5cf6; }

/* AI Messages */
.pyapp-ai-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.pyapp-ai-msg { display: flex; gap: 10px; max-width: 90%; animation: pyappFadeIn 0.2s ease; }
.pyapp-ai-msg.user { align-self: flex-end; flex-direction: row-reverse; }
.pyapp-ai-msg > i { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; flex-shrink: 0; }
.pyapp-ai-msg.assistant > i { background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff; }
.pyapp-ai-msg.user > i { background: var(--accent); color: #fff; }
.pyapp-ai-msg > div { padding: 10px 14px; border-radius: 12px; font-size: 0.85rem; line-height: 1.55; }
.pyapp-ai-msg.assistant > div { background: var(--bg); border: 1px solid var(--border); border-top-left-radius: 4px; }
.pyapp-ai-msg.user > div { background: var(--accent); color: #fff; border-top-right-radius: 4px; }
.pyapp-ai-msg code { background: rgba(0,0,0,0.15); padding: 1px 5px; border-radius: 4px; font-size: 0.8rem; }
.pyapp-ai-msg pre.pyapp-ai-code { background: #1e1e2e; color: #cdd6f4; padding: 10px 12px; border-radius: 8px; font-size: 0.78rem; overflow-x: auto; margin: 6px 0; white-space: pre-wrap; }

@keyframes pyappFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.pyapp-ai-input-bar { display: flex; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--border); background: var(--bg); }
.pyapp-ai-input-bar input { flex: 1; padding: 10px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); color: var(--text); font-size: 0.88rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.pyapp-ai-input-bar input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
.pyapp-ai-input-bar button { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; border: none; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.pyapp-ai-input-bar button:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(99,102,241,0.3); }

/* View Header Row (Codes + History buttons) */
.pyapp-view-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }

/* Multi-input mode */
.pyapp-input-mode-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.pyapp-mode-tab { padding: 5px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text-dim); font-size: 0.75rem; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; gap: 5px; }
.pyapp-mode-tab:hover { border-color: var(--accent); color: var(--text); }
.pyapp-mode-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.pyapp-mode-tab i { font-size: 0.7rem; }
.pyapp-upload-area { border: 2px dashed var(--border); border-radius: 12px; padding: 24px; text-align: center; cursor: pointer; transition: all 0.2s; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-dim); }
.pyapp-upload-area:hover, .pyapp-upload-area.dragover { border-color: var(--accent); background: rgba(99,102,241,0.05); color: var(--accent); }
.pyapp-upload-area i { font-size: 1.5rem; }
.pyapp-upload-area small { font-size: 0.75rem; color: var(--accent); font-weight: 500; }

.pyapp-header-actions { display: flex; gap: 8px; flex-shrink: 0; padding-top: 4px; }
.pyapp-header-actions .btn { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; border-radius: 10px; transition: all 0.2s; }
.pyapp-header-actions .btn:hover { transform: translateY(-1px); }
.pyapp-hide-mobile {}
@media (max-width: 600px) { .pyapp-hide-mobile { display: none; } }

/* History & Code Library Popup */
.pyapp-history-popup, .pyapp-codelib-popup { width: 620px; max-width: 92vw; height: 78vh; max-height: 680px; }
.pyapp-history-body { flex: 1; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; }
.pyapp-history-item { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: all 0.18s ease; }
.pyapp-history-item:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(99,102,241,0.1); transform: translateY(-1px); }
.pyapp-history-item-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.pyapp-history-item-header strong { font-size: 0.88rem; }
.pyapp-history-item-meta { display: flex; gap: 12px; font-size: 0.75rem; color: var(--text-dim); margin-bottom: 4px; }
.pyapp-history-item-meta i { margin-right: 3px; }
.pyapp-history-item-io { font-size: 0.75rem; color: var(--text-dim); display: flex; flex-direction: column; gap: 2px; }
.pyapp-history-item-io small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Error block in output */
.pyapp-error { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.25); border-radius: 10px; color: #f87171; font-size: 0.85rem; line-height: 1.5; }
.pyapp-error i { font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; }

/* Kebab menu (three-dot) */
.pyapp-kebab-btn { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 4px 6px; border-radius: 6px; font-size: 0.85rem; opacity: 0.72; transition: opacity 0.15s, background 0.15s, color 0.15s; flex-shrink: 0; }
.pyapp-item:hover .pyapp-kebab-btn { opacity: 1; color: var(--text); }
.pyapp-kebab-btn:hover { background: var(--hover-bg); color: var(--text); }
.pyapp-kebab-menu { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); padding: 6px; z-index: 9999; min-width: 160px; animation: pyappFadeIn 0.15s ease; }
.pyapp-kebab-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: none; background: none; color: var(--text); font-size: 0.82rem; cursor: pointer; border-radius: 6px; transition: background 0.12s; }
.pyapp-kebab-menu button:hover { background: var(--hover-bg); }
.pyapp-kebab-menu button.danger { color: #f87171; }
.pyapp-kebab-menu button.danger:hover { background: rgba(248,113,113,0.1); }

/* Error analysis */
.pyapp-error-block { display: flex; flex-direction: column; gap: 8px; }
.pyapp-error-stderr { margin: 0; padding: 10px 12px; background: rgba(248,113,113,0.06); border: 1px solid rgba(248,113,113,0.15); border-radius: 8px; font-size: 0.78rem; color: #f87171; white-space: pre-wrap; word-break: break-word; max-height: 150px; overflow-y: auto; }
.pyapp-analyze-btn { align-self: flex-start; background: linear-gradient(135deg, #8b5cf6, #6366f1) !important; color: #fff !important; border: none; border-radius: 8px; font-weight: 500; }
.pyapp-analyze-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,102,241,0.35); }
.pyapp-analysis { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin-top: 4px; }
.pyapp-analysis h4 { margin: 0 0 8px; font-size: 0.9rem; color: var(--accent); display: flex; align-items: center; gap: 6px; }
.pyapp-analysis-diag { font-size: 0.85rem; line-height: 1.55; margin: 0 0 8px; }
.pyapp-analysis-root { font-size: 0.82rem; margin: 0 0 8px; color: var(--text-dim); }
.pyapp-analysis-tip { background: rgba(234,179,8,0.08); border: 1px solid rgba(234,179,8,0.2); border-radius: 8px; padding: 8px 12px; font-size: 0.82rem; color: #eab308; margin-bottom: 8px; }
.pyapp-analysis-fixes { font-size: 0.82rem; margin-bottom: 8px; }
.pyapp-analysis-fixes ul { margin: 4px 0 0; padding-left: 16px; }
.pyapp-analysis-fixes li { margin-bottom: 4px; display: flex; align-items: flex-start; gap: 6px; }
.pyapp-analysis-code { margin-top: 8px; }
.pyapp-analysis-code summary { cursor: pointer; font-size: 0.82rem; color: var(--accent); }
.pyapp-analysis-code pre { margin: 8px 0; padding: 12px; background: #1e1e2e; color: #cdd6f4; border-radius: 8px; font-size: 0.78rem; overflow-x: auto; white-space: pre-wrap; max-height: 300px; overflow-y: auto; }

/* ═══════════════════════════════════════════════════════════════
   SIEM Lab
   ═══════════════════════════════════════════════════════════════ */
.siem-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:0 0 12px; flex-wrap:wrap; }
.siem-header h1 { font-size:1.4rem; color:var(--accent); margin:0; }
.siem-subtitle { color:var(--text-muted); font-size:.85rem; margin:4px 0 0; }
.siem-header-actions { display:flex; align-items:center; gap:10px; }
.siem-btn-pulse { animation: siemPulse 2s infinite; }
@keyframes siemPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(0,229,255,.3); } 50%{ box-shadow:0 0 12px 4px rgba(0,229,255,.15); } }
.siem-sse-dot { width:10px; height:10px; border-radius:50%; background:#555; display:inline-block; }
.siem-sse-dot.connected { background:#00e676; box-shadow:0 0 6px #00e676; }
.siem-sse-dot.error { background:#ff5252; }

/* Tabs */
.siem-tabs { display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:16px; overflow-x:auto; }
.siem-tab { background:none; border:none; color:var(--text-muted); padding:10px 16px; font-size:.85rem; cursor:pointer; border-bottom:2px solid transparent; transition:all .2s; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.siem-tab:hover { color:var(--text); background:var(--bg-hover); }
.siem-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.siem-badge { background:var(--accent); color:#000; font-size:.7rem; padding:1px 6px; border-radius:10px; font-weight:700; }
.siem-panel { display:none; }
.siem-panel.active { display:block; }

/* Stats row */
.siem-stats-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:20px; }
.siem-stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:16px; text-align:center; border-top:3px solid hsl(var(--sh),80%,55%); }
.siem-stat-val { font-size:1.8rem; font-weight:700; color:var(--text); }
.siem-stat-label { font-size:.78rem; color:var(--text-muted); margin-top:2px; }

/* Dashboard grid */
.siem-dash-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.siem-dash-card { background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:16px; }
.siem-dash-card h3 { font-size:.95rem; color:var(--accent); margin:0 0 12px; display:flex; align-items:center; gap:8px; }
.siem-dash-wide { grid-column:1/-1; }

/* Severity bars */
.siem-sev-bars { display:flex; flex-direction:column; gap:6px; }
.siem-sev-row { display:flex; align-items:center; gap:8px; }
.siem-sev-label { font-size:.75rem; font-weight:600; width:55px; text-align:right; text-transform:uppercase; }
.siem-sev-label.crit { color:#ff1744; } .siem-sev-label.high { color:#ff9100; } .siem-sev-label.med { color:#ffea00; } .siem-sev-label.low { color:#00e5ff; } .siem-sev-label.info { color:#90a4ae; }
.siem-sev-bar { flex:1; height:14px; background:var(--bg-input); border-radius:7px; overflow:hidden; }
.siem-sev-fill { height:100%; border-radius:7px; transition:width .4s ease; }
.siem-sev-fill.crit { background:#ff1744; } .siem-sev-fill.high { background:#ff9100; } .siem-sev-fill.med { background:#ffea00; } .siem-sev-fill.low { background:#00e5ff; } .siem-sev-fill.info { background:#90a4ae; }
.siem-sev-count { font-size:.78rem; color:var(--text-muted); width:30px; }

/* Toolbar */
.siem-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.siem-search { flex:1; min-width:180px; padding:8px 12px; background:var(--bg-input); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:.85rem; }
.siem-search:focus { border-color:var(--accent); outline:none; }
.siem-select { padding:8px 10px; background:var(--bg-input); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:.82rem; }
.siem-select-sm { padding:5px 8px; font-size:.78rem; }

/* Tables */
.siem-table-wrap { overflow-x:auto; }
.siem-table { width:100%; border-collapse:collapse; font-size:.82rem; }
.siem-table th { background:var(--bg-surface); color:var(--text-muted); font-weight:600; text-transform:uppercase; font-size:.72rem; letter-spacing:.05em; padding:8px 10px; text-align:left; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:1; }
.siem-table td { padding:8px 10px; border-bottom:1px solid var(--border); color:var(--text); vertical-align:top; }
.siem-table tr:hover td { background:var(--bg-hover); }
.siem-table-compact td { padding:6px 8px; font-size:.78rem; }
.siem-events-table-wrap { max-height:60vh; overflow-y:auto; }
.siem-empty { color:var(--text-muted); text-align:center; padding:24px; font-size:.85rem; }
.siem-event-count { font-size:.78rem; color:var(--text-muted); margin-bottom:6px; }

/* Pagination */
.siem-pagination { display:flex; justify-content:center; gap:6px; margin-top:12px; }
.siem-pagination button { background:var(--bg-input); border:1px solid var(--border); color:var(--text); padding:6px 12px; border-radius:4px; cursor:pointer; font-size:.8rem; }
.siem-pagination button:hover { border-color:var(--accent); }
.siem-pagination button.active { background:var(--accent); color:#000; border-color:var(--accent); }

/* Severity badges */
.siem-sev-badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:.72rem; font-weight:700; text-transform:uppercase; }
.siem-sev-badge[data-sev="critical"],.siem-sev-badge.critical { background:rgba(255,23,68,.15); color:#ff1744; border:1px solid rgba(255,23,68,.3); }
.siem-sev-badge[data-sev="high"],.siem-sev-badge.high { background:rgba(255,145,0,.15); color:#ff9100; border:1px solid rgba(255,145,0,.3); }
.siem-sev-badge[data-sev="medium"],.siem-sev-badge.medium { background:rgba(255,234,0,.12); color:#ffea00; border:1px solid rgba(255,234,0,.3); }
.siem-sev-badge[data-sev="low"],.siem-sev-badge.low { background:rgba(0,229,255,.12); color:#00e5ff; border:1px solid rgba(0,229,255,.3); }
.siem-sev-badge[data-sev="info"],.siem-sev-badge.info { background:rgba(144,164,174,.12); color:#90a4ae; border:1px solid rgba(144,164,174,.3); }

.siem-rule-type-badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:.72rem; background:rgba(0,229,255,.1); color:var(--accent); border:1px solid rgba(0,229,255,.2); }
.siem-rule-status-badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:.72rem; background:rgba(0,230,118,.1); color:#00e676; border:1px solid rgba(0,230,118,.25); }
.siem-rule-status-badge.draft { background:rgba(144,164,174,.1); color:#90a4ae; border-color:rgba(144,164,174,.25); }
.siem-rule-status-badge.disabled { background:rgba(255,82,82,.1); color:#ff5252; border-color:rgba(255,82,82,.25); }
.siem-rule-status-badge.testing { background:rgba(255,234,0,.1); color:#ffea00; border-color:rgba(255,234,0,.25); }

/* Rules layout */
.siem-rules-layout { display:grid; grid-template-columns:280px 1fr; gap:16px; }
.siem-rules-list { display:flex; flex-direction:column; gap:4px; max-height:70vh; overflow-y:auto; }
.siem-rule-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:10px 12px; cursor:pointer; transition:border-color .2s; }
.siem-rule-card:hover,.siem-rule-card.active { border-color:var(--accent); }
.siem-rule-card h4 { font-size:.82rem; color:var(--text); margin:0 0 4px; display:flex; align-items:center; gap:6px; }
.siem-rule-card-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.siem-rule-detail { background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:16px; overflow-y:auto; max-height:75vh; }
.siem-rule-detail-header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:8px; }
.siem-rule-detail-header h3 { margin:0; font-size:1.1rem; color:var(--text); }
.siem-rule-detail-actions { display:flex; gap:4px; }
.siem-rule-meta { display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:.82rem; flex-wrap:wrap; }
.siem-rule-desc { color:var(--text-muted); font-size:.85rem; margin:0 0 12px; line-height:1.5; }
.siem-rule-tags { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:12px; }
.siem-rule-tags span { background:var(--bg-input); color:var(--text-muted); padding:2px 8px; border-radius:4px; font-size:.72rem; }
.siem-code { background:#0d1117; border:1px solid var(--border); border-radius:8px; padding:12px; font-family:'Fira Code',monospace; font-size:.78rem; color:#c9d1d9; overflow-x:auto; white-space:pre-wrap; max-height:300px; overflow-y:auto; }
.siem-code-input { background:#0d1117; border:1px solid var(--border); border-radius:8px; padding:12px; font-family:'Fira Code',monospace; font-size:.78rem; color:#c9d1d9; width:100%; resize:vertical; }

/* Alert drawer */
.siem-drawer { position:fixed; top:56px; right:0; bottom:0; width:520px; max-width:90vw; background:var(--bg-card); border-left:1px solid var(--border); z-index:200; display:flex; flex-direction:column; box-shadow:-4px 0 20px rgba(0,0,0,.4); }
.siem-drawer-header { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--border); }
.siem-drawer-header h3 { margin:0; font-size:1rem; color:var(--accent); }
.siem-drawer-body { flex:1; overflow-y:auto; padding:16px; }
.siem-drawer-section { margin-bottom:16px; }
.siem-drawer-section h4 { font-size:.85rem; color:var(--accent); margin:0 0 8px; display:flex; align-items:center; gap:6px; }

/* Investigations */
.siem-inv-layout { display:grid; grid-template-columns:280px 1fr; gap:16px; }
.siem-inv-list { display:flex; flex-direction:column; gap:4px; max-height:70vh; overflow-y:auto; }
.siem-inv-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:10px 12px; cursor:pointer; transition:border-color .2s; }
.siem-inv-card:hover,.siem-inv-card.active { border-color:var(--accent); }
.siem-inv-card h4 { font-size:.82rem; color:var(--text); margin:0 0 4px; }
.siem-inv-detail { background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:16px; max-height:75vh; overflow-y:auto; }
.siem-inv-detail-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:8px; gap:12px; }
.siem-inv-detail-header h3 { margin:0; color:var(--text); }
.siem-inv-sections { display:flex; flex-direction:column; gap:16px; }
.siem-inv-section h4 { font-size:.85rem; color:var(--accent); margin:0 0 8px; display:flex; align-items:center; gap:6px; }
.siem-inv-ioc-add { display:flex; gap:6px; margin-top:8px; }
.siem-inv-ioc-add input { flex:1; }
.siem-inv-notes { display:flex; flex-direction:column; gap:8px; max-height:300px; overflow-y:auto; margin-bottom:8px; }
.siem-inv-note { background:var(--bg-input); border-radius:8px; padding:10px 12px; font-size:.82rem; }
.siem-inv-note-header { display:flex; justify-content:space-between; font-size:.72rem; color:var(--text-muted); margin-bottom:4px; }
.siem-inv-note.ai { border-left:3px solid var(--accent); }
.siem-inv-note-add textarea { width:100%; padding:8px 12px; background:var(--bg-input); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:.82rem; resize:vertical; }
.siem-inv-note-actions { display:flex; gap:6px; margin-top:6px; }
.siem-ioc-chip { display:inline-flex; align-items:center; gap:4px; background:var(--bg-input); border:1px solid var(--border); border-radius:4px; padding:3px 8px; font-size:.75rem; color:var(--text); margin:2px; }
.siem-ioc-chip button { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:.7rem; padding:0; }

/* Data source cards in dashboard */
.siem-dash-sources { display:flex; flex-direction:column; gap:6px; }
.siem-ds-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid var(--border); font-size:.82rem; }
.siem-ds-row:last-child { border-bottom:none; }

/* Recent alerts */
.siem-recent-alerts { display:flex; flex-direction:column; gap:4px; }
.siem-recent-alert { display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:6px; cursor:pointer; font-size:.82rem; }
.siem-recent-alert:hover { background:var(--bg-hover); }

/* Alert table status */
.siem-status-badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:.72rem; font-weight:600; }
.siem-status-badge.new { background:rgba(0,229,255,.12); color:#00e5ff; }
.siem-status-badge.in_progress { background:rgba(255,234,0,.1); color:#ffea00; }
.siem-status-badge.resolved { background:rgba(0,230,118,.1); color:#00e676; }
.siem-status-badge.false_positive { background:rgba(144,164,174,.1); color:#90a4ae; }
.siem-status-badge.escalated { background:rgba(255,23,68,.12); color:#ff1744; }

/* btn danger */
.siem-btn-danger { color:#ff5252!important; border-color:rgba(255,82,82,.3)!important; }
.siem-btn-danger:hover { background:rgba(255,82,82,.1)!important; }

/* Form helpers */
.siem-rule-form .form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.siem-rule-form .form-group { margin-bottom:12px; }
.siem-rule-form .form-group label { display:block; font-size:.78rem; color:var(--text-muted); margin-bottom:4px; font-weight:600; }
.siem-rule-form input, .siem-rule-form textarea, .siem-rule-form select { width:100%; padding:8px 10px; background:var(--bg-input); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:.85rem; }

/* AI analysis in drawer */
.siem-ai-analysis { line-height:1.6; }
.siem-ai-analysis h3 { font-size:.95rem; color:var(--accent); margin:12px 0 6px; }
.siem-ai-analysis code { background:var(--bg-input); padding:1px 5px; border-radius:3px; font-size:.82rem; color:#ff9100; }
.siem-ai-analysis .badge-critical { color:#ff1744; font-weight:700; } .siem-ai-analysis .badge-high { color:#ff9100; font-weight:700; }

/* Responsive */
@media (max-width:768px) {
  .siem-dash-grid { grid-template-columns:1fr; }
  .siem-rules-layout, .siem-inv-layout { grid-template-columns:1fr; }
  .siem-drawer { width:100vw; }
  .siem-tab span { display:none; }
  .siem-tab i { font-size:1rem; }
  .siem-rule-form .form-row { grid-template-columns:1fr; }
}

/* ── SIEM Time Range & Live Monitoring ─────────────────────────── */
.siem-timerange-bar { display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; padding:10px 14px; background:var(--bg-card); border:1px solid var(--border); border-radius:8px; }
.siem-timerange-bar label { font-size:.8rem; color:var(--text-muted); font-weight:600; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.siem-custom-dates { display:flex; align-items:center; gap:6px; }
.siem-custom-dates span { color:var(--text-muted); font-size:.8rem; }
.siem-date-input { padding:6px 8px; background:var(--bg-input); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:.8rem; }
.siem-date-input:focus { border-color:var(--accent); outline:none; }

/* Live indicator */
.siem-live-indicator { display:flex; align-items:center; gap:6px; margin-left:auto; font-size:.75rem; font-weight:700; color:#00e676; letter-spacing:.05em; text-transform:uppercase; }
.siem-live-dot { width:8px; height:8px; border-radius:50%; background:#00e676; animation:siemLiveBlink 1.5s infinite; }
@keyframes siemLiveBlink { 0%,100%{ opacity:1; box-shadow:0 0 4px #00e676; } 50%{ opacity:.3; box-shadow:none; } }

/* Critical alert pulse on stat card */
.siem-stat-alerts.siem-critical-pulse { animation:siemCritPulse 1.5s infinite; border-color:#ff1744; }
@keyframes siemCritPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(255,23,68,.4); } 50%{ box-shadow:0 0 18px 4px rgba(255,23,68,.25); } }

/* Active Threats Banner */
.siem-threat-banner { background:linear-gradient(135deg, rgba(255,23,68,.15), rgba(255,82,82,.08)); border:1px solid #ff1744; border-left:4px solid #ff1744; border-radius:8px; padding:1rem 1.25rem; margin-bottom:1rem; }
.siem-threat-banner h4 { color:#ff1744; margin:0 0 .5rem; font-size:.95rem; display:flex; align-items:center; gap:.5rem; }
.siem-threat-banner h4 i { animation:siemThreatPulse 1.2s infinite; }
@keyframes siemThreatPulse { 0%,100%{ opacity:1; } 50%{ opacity:.4; } }
.siem-threat-item { display:flex; align-items:center; gap:.75rem; padding:.4rem .6rem; background:rgba(0,0,0,.2); border-radius:6px; margin-bottom:.35rem; font-size:.82rem; }
.siem-threat-item .siem-sev-badge { font-size:.7rem; padding:2px 8px; }
.siem-threat-detail { flex:1; color:var(--text); }
.siem-threat-detail strong { color:#ff8a80; }
.siem-threat-meta { color:var(--text-muted); font-size:.72rem; white-space:nowrap; }
.siem-threat-actions { font-size:.75rem; color:#ffab40; margin-top:.5rem; padding:.4rem .6rem; background:rgba(255,171,64,.06); border-radius:6px; border:1px solid rgba(255,171,64,.15); }
.siem-threat-actions i { margin-right:.3rem; }

/* Value flash animation */
.siem-val-flash { animation:siemValFlash .6s ease; }
@keyframes siemValFlash { 0%{ color:var(--text); } 30%{ color:#00e676; transform:scale(1.1); } 100%{ color:var(--text); transform:scale(1); } }

/* Live event count badge */
.siem-live-count { background:rgba(0,229,255,.15); color:var(--accent); font-size:.72rem; padding:2px 8px; border-radius:10px; margin-left:8px; font-weight:700; }

/* Live Feed */
.siem-live-feed { max-height:280px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.siem-live-row { display:grid; grid-template-columns:60px 44px 1fr 120px 100px 70px; align-items:center; gap:6px; padding:5px 8px; border-radius:4px; font-size:.78rem; border-left:3px solid transparent; transition:background .2s; }
.siem-live-row:hover { background:var(--bg-hover); }
.siem-live-row-hot { border-left-color:#ff1744; background:rgba(255,23,68,.05); }
.siem-live-ts { color:var(--text-muted); font-size:.72rem; }
.siem-live-action { font-weight:500; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.siem-live-user { color:var(--text-muted); font-size:.75rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.siem-live-ip code { color:var(--accent); font-size:.75rem; }

/* Data source row */
.siem-ds-row { display:flex; justify-content:space-between; align-items:center; padding:6px 8px; border-radius:4px; font-size:.82rem; }
.siem-ds-row:hover { background:var(--bg-hover); }
.siem-ds-row span:first-child { color:var(--text); font-weight:500; }
.siem-ds-row span:last-child { color:var(--text-muted); font-size:.75rem; }

/* Telegram card */
.siem-tg-status { font-size:.7rem; font-weight:700; margin-left:8px; }
.siem-tg-info { display:flex; flex-direction:column; gap:4px; }
.siem-tg-row { display:flex; justify-content:space-between; align-items:center; padding:4px 0; font-size:.82rem; border-bottom:1px solid rgba(255,255,255,.04); }
.siem-tg-row span:first-child { color:var(--text-muted); }
.siem-tg-row span:last-child { color:var(--text); font-weight:500; }
.siem-tg-actions .btn { font-size:.75rem; }

@media (max-width:768px) {
  .siem-timerange-bar { flex-direction:column; align-items:stretch; }
  .siem-live-row { grid-template-columns:50px 40px 1fr 60px; }
  .siem-live-user, .siem-live-ip { display:none; }
}