/* AGOL Web Book — Main Stylesheet
   Auto-extracted from book.html
*/

  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body { font-family: 'Inter', sans-serif; background: #FAFAF8; color: #1C1917; overflow: hidden; }

  /* ── Reading progress ── */
  #progress { position: fixed; top: 0; left: 0; height: 3px; background: #E4002B; z-index: 9999; transition: width .1s linear; }

  /* ── Sidebar ── */
  #sidebar {
    width: 280px; min-width: 280px;
    background: #0F172A;
    display: flex; flex-direction: column;
    transition: width .3s ease, min-width .3s ease;
    overflow: hidden;
  }
  #sidebar.collapsed { width: 0; min-width: 0; }
  .sidebar-logo { padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,.07); }
  .sidebar-logo h1 { font-family: 'Montserrat'; color: #fff; font-size: 1.25rem; line-height: 1.2; }
  .sidebar-logo p  { color: #94A3B8; font-size: .7rem; margin-top: .2rem; letter-spacing: .05em; text-transform: uppercase; }

  .nav-scroll { flex: 1; overflow-y: auto; padding: .75rem 0 2rem; }
  .nav-scroll::-webkit-scrollbar { width: 4px; }
  .nav-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }

  .nav-division-label {
    padding: .65rem 1.5rem .2rem;
    font-size: .62rem; color: #4B5C78; font-weight: 700;
    text-transform: uppercase; letter-spacing: .12em;
    display: flex; align-items: center; gap: .35rem;
    margin-top: .4rem; user-select: none;
    border-top: 1px solid rgba(255,255,255,.07);
  }
  .nav-division-label:first-child { border-top: none; margin-top: 0; }

  .nav-chapter { padding: .25rem .75rem; }
  .nav-chapter-header {
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .75rem; border-radius: .5rem;
    cursor: pointer; color: #CBD5E1; font-size: .8rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em;
    transition: background .15s;
  }
  .nav-chapter-header:hover { background: rgba(255,255,255,.05); }
  .nav-chapter-header .icon { font-size: 1rem; }
  .nav-chapter-header .chevron { margin-left: auto; transition: transform .2s; }
  .nav-chapter-header.open .chevron { transform: rotate(90deg); }

  .nav-pages { overflow: hidden; }
  .nav-page {
    display: block; padding: .4rem .75rem .4rem 2.5rem;
    color: #94A3B8; font-size: .82rem; border-radius: .375rem;
    cursor: pointer; transition: color .15s, background .15s;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border-left: 2px solid transparent; margin-left: .75rem;
  }
  .nav-page:hover { color: #E2E8F0; background: rgba(255,255,255,.04); }
  .nav-page.active { color: #fff; border-left-color: #E4002B; background: rgba(228,0,43,.1); font-weight: 500; }

  /* ── Main content ── */
  #main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

  /* ── Topbar ── */
  #topbar {
    height: 56px; background: #fff; border-bottom: 1px solid #E7E5E4;
    display: flex; align-items: center; gap: .75rem; padding: 0 1.5rem;
    flex-shrink: 0;
  }
  .topbar-btn {
    width: 36px; height: 36px; border-radius: .5rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #78716C; transition: background .15s, color .15s;
  }
  .topbar-btn:hover { background: #F5F5F4; color: #1C1917; }
  .breadcrumb { flex: 1; font-size: .82rem; color: #A8A29E; display: flex; align-items: center; gap: .4rem; overflow: hidden; }
  .breadcrumb span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .breadcrumb .active { color: #1C1917; font-weight: 500; }
  .search-btn {
    display: flex; align-items: center; gap: .5rem;
    padding: .4rem .8rem; border-radius: .5rem; border: 1px solid #E7E5E4;
    background: #F9F9F8; cursor: pointer; color: #78716C; font-size: .82rem;
    transition: border-color .15s, box-shadow .15s;
  }
  .search-btn:hover { border-color: #CBD5E1; box-shadow: 0 0 0 3px rgba(228,0,43,.06); }
  .kbd { font-size: .7rem; background: #E7E5E4; padding: .1rem .35rem; border-radius: .25rem; }

  /* Search icon-only button (trainee) */
  .search-icon-btn {
    width: 34px; height: 34px; border-radius: .5rem; border: 1px solid #E7E5E4;
    background: #F9F9F8; cursor: pointer; color: #78716C; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .15s, box-shadow .15s, color .15s;
  }
  .search-icon-btn:hover { border-color: #E4002B; color: #E4002B; box-shadow: 0 0 0 3px rgba(228,0,43,.06); }

  /* Quiz loading state */
  .quiz-loading-state { display: flex; align-items: center; gap: .5rem; }

  /* ── User menu ── */
  .user-btn {
    display: flex; align-items: center; gap: .5rem;
    padding: .35rem .75rem; border-radius: .5rem;
    border: 1px solid #E7E5E4; background: #F9F9F8;
    cursor: pointer; color: #1C1917; font-size: .82rem;
    transition: border-color .15s; position: relative;
  }
  .user-btn:hover { border-color: #CBD5E1; }
  .user-btn-name {
    max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  @media (max-width: 480px) { .user-btn-name { display: none; } }
  .user-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: #E4002B; color: #fff; font-size: .72rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .user-dropdown {
    position: absolute; top: calc(100% + .5rem); right: 0;
    background: #fff; border: 1px solid #E7E5E4; border-radius: .75rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.1); padding: .5rem; min-width: 180px;
    z-index: 200;
  }
  .user-dropdown-item {
    padding: .5rem .75rem; border-radius: .5rem; cursor: pointer;
    font-size: .85rem; color: #1C1917; transition: background .1s;
  }
  .user-dropdown-item:hover { background: #F5F5F4; }
  .user-dropdown-item.danger { color: #E4002B; }
  .user-dropdown-divider { border: none; border-top: 1px solid #F5F5F4; margin: .25rem 0; }

  /* ── Main app layout (flex wrapper — must be class, not inline, so x-show can toggle display) ── */
  .app-layout { display: flex; height: 100vh; overflow: hidden; }

  /* ── Content scroll area ── */
  #content-area { flex: 1; overflow-y: auto; }
  #content-area::-webkit-scrollbar { width: 6px; }
  #content-area::-webkit-scrollbar-thumb { background: #D6D3D1; border-radius: 3px; }

  /* ── Home page ── */
  .home-hero {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
    padding: 4rem 3rem; color: white; position: relative; overflow: hidden;
  }
  .home-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 70% 50%, rgba(228,0,43,.15) 0%, transparent 60%);
  }
  .home-hero h1 { font-family: 'Montserrat'; font-size: 2.5rem; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; position: relative; }
  .home-hero p  { color: #CBD5E1; margin-top: 1rem; font-size: 1.05rem; max-width: 520px; position: relative; }
  .home-stats { display: flex; gap: 2rem; margin-top: 2rem; position: relative; }
  .home-stat { text-align: center; }
  .home-stat .num { font-family: 'Montserrat'; font-size: 2rem; font-weight: 800; color: #E4002B; letter-spacing: -.02em; }
  .home-stat .lbl { font-size: .75rem; color: #94A3B8; text-transform: uppercase; letter-spacing: .05em; margin-top: .1rem; }

  .chapters-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem; padding: 2.5rem 3rem;
  }
  .chapter-card {
    background: #fff; border: 1px solid #E7E5E4; border-radius: 1rem;
    padding: 1.5rem; cursor: pointer;
    transition: transform .2s, box-shadow .2s, border-color .2s;
  }
  .chapter-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.08); border-color: #CBD5E1; }
  .chapter-card .card-icon { font-size: 2rem; margin-bottom: .75rem; }
  .chapter-card h3 { font-family: 'Montserrat'; font-size: 1rem; font-weight: 700; letter-spacing: -.01em; color: #1C1917; margin-bottom: .4rem; }
  .chapter-card p  { font-size: .82rem; color: #78716C; line-height: 1.5; }
  .chapter-card .page-count {
    margin-top: 1rem; padding-top: .75rem; border-top: 1px solid #F5F5F4;
    font-size: .75rem; color: #A8A29E; display: flex; align-items: center; gap: .35rem;
  }

  /* ── Page view ── */
  .page-header { padding: 2.5rem 3rem 0; max-width: 800px; margin: 0 auto; }
  .page-chapter-label {
    font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
    color: #E4002B; margin-bottom: .75rem; display: flex; align-items: center; gap: .4rem;
  }
  .page-title { font-family: 'Montserrat'; font-size: 2rem; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: #0F172A; }
  .page-meta { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; color: #78716C; font-size: .82rem; }
  .page-tags { display: flex; gap: .4rem; margin-top: 1rem; flex-wrap: wrap; }
  .tag { padding: .2rem .65rem; border-radius: 2rem; font-size: .72rem; font-weight: 500; }
  .page-divider { border: none; border-top: 1px solid #E7E5E4; margin: 1.5rem 0; }

  /* ── Blocks ── */
  .blocks-area { padding: 0 3rem 1.5rem; max-width: 800px; margin: 0 auto; }
  .prose { font-family: 'Inter', Georgia, serif; font-size: 1.05rem; line-height: 1.85; color: #1C1917; }
  .prose h1 { font-family: 'Montserrat'; font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; margin: 2rem 0 .75rem; color: #0F172A; }
  .prose h2 { font-family: 'Montserrat'; font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; margin: 1.75rem 0 .6rem; color: #0F172A; }
  .prose h3 { font-family: 'Inter'; font-size: 1.1rem; font-weight: 600; margin: 1.5rem 0 .5rem; color: #1C1917; }
  .prose p  { margin: 0 0 1.1rem; }
  .prose ul, .prose ol { margin: 0 0 1.1rem 1.5rem; }
  .prose li { margin-bottom: .4rem; }
  .prose ul li { list-style: disc; }
  .prose ol li { list-style: decimal; }
  .prose strong { font-weight: 600; color: #0F172A; }
  .prose em { font-style: italic; }
  .prose a { color: #E4002B; text-decoration: underline; text-underline-offset: 3px; }
  .prose code { background: #F5F5F4; padding: .15em .4em; border-radius: .3rem; font-size: .88em; font-family: 'Courier New', monospace; }
  .prose blockquote { border-left: 3px solid #E4002B; padding-left: 1rem; color: #57534E; font-style: italic; margin: 1.25rem 0; }
  .prose hr { border: none; border-top: 1px solid #E7E5E4; margin: 1.5rem 0; }
  .prose mark { background: #FEF08A; padding: .05em .2em; border-radius: .2rem; }
  .prose table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: .9rem; border: 1px solid #E7E5E4; overflow: hidden; }
  .prose thead tr { background: #0F172A; }
  .prose th { color: #fff; padding: .65rem 1rem; text-align: left; font-weight: 600; font-family: 'Inter'; }
  .prose td { padding: .6rem 1rem; border: 1px solid #E7E5E4; color: #1C1917; vertical-align: top; line-height: 1.55; }
  .prose tbody tr:nth-child(even) td { background: #FAFAF8; }
  .prose tbody tr:hover td { background: #FFF5F5; }
  .img-block { margin: 1.75rem 0; }
  .img-block img { width: 100%; border-radius: .75rem; box-shadow: 0 4px 24px rgba(0,0,0,.1); }
  .img-block figcaption { text-align: center; font-size: .82rem; color: #78716C; font-style: italic; margin-top: .6rem; }
  .html-block { margin: 1.75rem 0; }
  .html-block svg { width: 100%; height: auto; display: block; }
  .table-wrap { margin: 1.75rem 0; overflow-x: auto; border-radius: .75rem; border: 1px solid #E7E5E4; }
  .data-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
  .data-table thead tr { background: #0F172A; }
  .data-table th { color: #fff; padding: .75rem 1rem; text-align: left; font-weight: 600; white-space: nowrap; }
  .data-table td { padding: .65rem 1rem; border-bottom: 1px solid #F5F5F4; color: #1C1917; }
  .data-table tbody tr:last-child td { border-bottom: none; }
  .data-table tbody tr:nth-child(even) td { background: #FAFAF8; }
  .data-table tbody tr:hover td { background: #FFF5F5; }
  .table-caption { text-align: center; font-size: .8rem; color: #78716C; font-style: italic; margin-top: .5rem; padding: 0 1rem .75rem; }
  .callout { display: flex; gap: .75rem; padding: 1rem 1.25rem; border-radius: .75rem; margin: 1.5rem 0; border-left: 4px solid; }
  .callout-info    { background: #EFF6FF; border-color: #3B82F6; }
  .callout-warning { background: #FFFBEB; border-color: #F59E0B; }
  .callout-tip     { background: #F0FDF4; border-color: #22C55E; }
  .callout-note    { background: #F5F3FF; border-color: #8B5CF6; }
  .callout-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: .05rem; }
  .callout-body > strong { display: block; font-weight: 600; margin-bottom: .25rem; font-size: .9rem; }
  .callout-body .prose { font-size: .92rem; }
  .code-block { background: #0F172A; color: #E2E8F0; padding: 1.25rem 1.5rem; border-radius: .75rem; overflow-x: auto; font-size: .88rem; line-height: 1.65; font-family: 'Courier New', monospace; margin: 1.5rem 0; }
  .content-divider { border: none; border-top: 2px solid #E7E5E4; margin: 2rem 0; }

  /* ── Navigation prev/next ── */
  .page-nav { display: flex; gap: 1rem; padding: 2rem 3rem; max-width: 800px; margin: 0 auto; }
  .page-nav-btn {
    flex: 1; padding: 1rem 1.25rem; border-radius: .75rem; border: 1px solid #E7E5E4;
    background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s;
    display: flex; align-items: center; gap: .75rem;
  }
  .page-nav-btn:hover { border-color: #E4002B; box-shadow: 0 0 0 3px rgba(228,0,43,.06); }
  .page-nav-btn.next { justify-content: flex-end; text-align: right; }
  .page-nav-label { font-size: .72rem; color: #A8A29E; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .2rem; }
  .page-nav-title { font-size: .9rem; font-weight: 500; color: #1C1917; }

  /* ── Related pages ── */
  .related-section { padding: 0 3rem 3rem; max-width: 800px; margin: 0 auto; }
  .related-section h2 { font-family: 'Montserrat'; font-size: 1.25rem; margin-bottom: 1rem; color: #0F172A; }
  .related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; }
  .related-card {
    padding: 1rem; border-radius: .75rem; border: 1px solid #E7E5E4;
    background: #fff; cursor: pointer; transition: border-color .15s, transform .15s;
  }
  .related-card:hover { border-color: #CBD5E1; transform: translateY(-2px); }
  .related-card .r-chapter { font-size: .7rem; color: #E4002B; font-weight: 600; text-transform: uppercase; margin-bottom: .35rem; }
  .related-card .r-title   { font-size: .88rem; font-weight: 500; color: #1C1917; line-height: 1.4; }
  .related-card .r-time    { font-size: .72rem; color: #A8A29E; margin-top: .4rem; }

  /* ── Quiz section ── */
  .quiz-section {
    padding: 0 3rem 3rem; max-width: 800px; margin: 0 auto;
  }
  .quiz-cta {
    background: linear-gradient(135deg, #0F172A, #1E3A5F);
    border-radius: 1rem; padding: 2rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    flex-wrap: wrap;
  }
  .quiz-cta-text h3 { font-family: 'Montserrat'; font-weight: 800; color: #fff; font-size: 1.1rem; margin-bottom: .3rem; }
  .quiz-cta-text p  { color: #94A3B8; font-size: .85rem; }
  .quiz-start-btn {
    background: #E4002B; color: #fff; border: none; border-radius: .75rem;
    padding: .75rem 1.75rem; font-size: .95rem; font-weight: 600;
    cursor: pointer; transition: background .15s, transform .15s; white-space: nowrap;
  }
  .quiz-start-btn:hover { background: #C4001E; transform: translateY(-1px); }
  .quiz-start-btn:disabled { background: #aaa; cursor: not-allowed; transform: none; }

  /* ── Search modal ── */
  #search-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000;
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 10vh; backdrop-filter: blur(4px);
  }
  .search-box {
    width: 100%; max-width: 600px; background: #fff; border-radius: 1rem;
    box-shadow: 0 24px 64px rgba(0,0,0,.2); overflow: hidden;
  }
  .search-input-row { display: flex; align-items: center; padding: 1rem 1.25rem; gap: .75rem; border-bottom: 1px solid #F5F5F4; }
  .search-input { flex: 1; border: none; outline: none; font-size: 1rem; color: #1C1917; background: transparent; }
  .search-results { max-height: 400px; overflow-y: auto; }
  .search-result { padding: .875rem 1.25rem; cursor: pointer; border-bottom: 1px solid #F5F5F4; transition: background .1s; }
  .search-result:hover { background: #FFF5F5; }
  .search-result:last-child { border-bottom: none; }
  .search-result .sr-chapter { font-size: .72rem; color: #E4002B; font-weight: 600; text-transform: uppercase; }
  .search-result .sr-title   { font-size: .95rem; font-weight: 500; color: #1C1917; margin: .2rem 0; }
  .search-result .sr-excerpt { font-size: .82rem; color: #78716C; line-height: 1.5; }
  .search-result .sr-excerpt mark { background: #FEF08A; border-radius: .2rem; padding: 0 .15em; }
  .search-empty { padding: 2rem; text-align: center; color: #A8A29E; font-size: .9rem; }

  /* ── Modal base ── */
  .modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.6);
    z-index: 500; display: flex; align-items: center; justify-content: center;
    padding: 1.5rem; backdrop-filter: blur(4px);
  }
  .modal-box {
    background: #fff; border-radius: 1.25rem; width: 100%; max-width: 680px;
    box-shadow: 0 32px 64px rgba(0,0,0,.2); display: flex; flex-direction: column;
    max-height: 90vh; overflow: hidden;
  }
  .modal-header {
    padding: 1.5rem 1.75rem 1rem; border-bottom: 1px solid #F5F5F4;
    display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
  }
  .modal-title { font-family: 'Montserrat'; font-size: 1.2rem; font-weight: 800; color: #0F172A; }
  .modal-close {
    width: 32px; height: 32px; border-radius: .5rem; border: none; background: #F5F5F4;
    cursor: pointer; font-size: 1.1rem; color: #78716C;
    display: flex; align-items: center; justify-content: center;
    transition: background .1s;
  }
  .modal-close:hover { background: #E7E5E4; }
  .modal-body { overflow-y: auto; padding: 1.5rem 1.75rem; flex: 1; }
  .modal-footer { padding: 1rem 1.75rem; border-top: 1px solid #F5F5F4; display: flex; gap: .75rem; justify-content: flex-end; flex-shrink: 0; }

  /* ── Quiz modal ── */
  .quiz-modal-box { max-width: 720px; }
  .quiz-question-card {
    background: #F9FAFB; border: 1px solid #E7E5E4; border-radius: .75rem;
    padding: 1.25rem; margin-bottom: 1.25rem;
  }
  .quiz-question-text { font-weight: 600; color: #0F172A; margin-bottom: 1rem; font-size: .95rem; line-height: 1.5; }
  .quiz-option {
    display: flex; align-items: center; gap: .75rem;
    padding: .6rem .875rem; border-radius: .5rem; cursor: pointer;
    margin-bottom: .4rem; border: 2px solid transparent;
    transition: border-color .1s, background .1s;
    font-size: .88rem; color: #374151;
  }
  .quiz-option:hover { background: #F3F4F6; }
  .quiz-option.selected { border-color: #E4002B; background: #FFF5F5; font-weight: 500; color: #0F172A; }
  .quiz-option.correct  { border-color: #22C55E; background: #F0FDF4; color: #166534; }
  .quiz-option.wrong    { border-color: #EF4444; background: #FEF2F2; color: #991B1B; }
  .quiz-option.show-correct { border-color: #22C55E; background: #F0FDF4; }
  .quiz-option-label { width: 24px; height: 24px; border-radius: 50%; background: #E7E5E4; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; flex-shrink: 0; }
  .quiz-option.selected .quiz-option-label { background: #E4002B; color: #fff; }
  .quiz-option.correct .quiz-option-label  { background: #22C55E; color: #fff; }
  .quiz-option.wrong .quiz-option-label    { background: #EF4444; color: #fff; }
  .quiz-option.show-correct .quiz-option-label { background: #22C55E; color: #fff; }
  /* ── Pretest option labels ── */
  .option-label {
    display: flex; align-items: flex-start; gap: .65rem;
    padding: .55rem .85rem; border-radius: .5rem; cursor: pointer;
    border: 2px solid #E7E5E4; background: #fff;
    font-size: .88rem; color: #374151; line-height: 1.45;
    transition: border-color .1s, background .1s;
  }
  .option-label:hover { background: #FFF5F5; border-color: #FECACA; }
  .option-label.selected { border-color: #E4002B; background: #FFF5F5; font-weight: 500; color: #0F172A; }
  .option-label.multi.selected { border-color: #7C3AED; background: #F5F3FF; color: #1C1917; }
  .option-dot {
    width: 24px; height: 24px; border-radius: 50%; background: #E7E5E4;
    display: flex; align-items: center; justify-content: center;
    font-size: .73rem; font-weight: 700; flex-shrink: 0; color: #374151;
    margin-top: .05rem;
  }
  .option-label.selected .option-dot { background: #E4002B; color: #fff; }
  .option-label.multi.selected .option-dot { background: #7C3AED; color: #fff; }

  .quiz-score-banner {
    text-align: center; padding: 1.5rem; border-radius: 1rem; margin-bottom: 1.5rem;
  }
  .quiz-score-banner.pass { background: #F0FDF4; border: 2px solid #22C55E; }
  .quiz-score-banner.fail { background: #FFFBEB; border: 2px solid #F59E0B; }
  .quiz-score-num { font-family: 'Montserrat'; font-size: 3.5rem; font-weight: 800; line-height: 1; }
  .quiz-score-banner.pass .quiz-score-num { color: #16A34A; }
  .quiz-score-banner.fail .quiz-score-num { color: #D97706; }
  .quiz-score-label { font-size: .9rem; color: #57534E; margin-top: .4rem; }

  /* ── Admin Panel modal ── */
  .admin-modal-box {
    max-width: 1100px; width: 96vw;
    height: 92vh; display: flex; flex-direction: column;
  }
  .admin-modal-box .modal-body { display: flex; flex-direction: column; flex: 1; overflow: hidden; padding: 0; }
  .admin-tabs {
    display: flex; gap: 0; border-bottom: 2px solid #F5F5F4;
    padding: 0 1.75rem; flex-shrink: 0; overflow-x: auto;
  }
  .admin-tabs::-webkit-scrollbar { display: none; }
  .admin-tab {
    padding: .75rem 1.1rem; font-size: .82rem; font-weight: 600; cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap;
    color: #78716C; transition: color .15s; display: flex; align-items: center; gap: .35rem;
  }
  .admin-tab.active { color: #E4002B; border-bottom-color: #E4002B; }
  .admin-tab:hover:not(.active) { color: #1C1917; background: #FAFAF8; }
  .admin-tab-body { flex: 1; overflow-y: auto; padding: 1.5rem 1.75rem; }
  .admin-tab-body::-webkit-scrollbar { width: 5px; }
  .admin-tab-body::-webkit-scrollbar-thumb { background: #E7E5E4; border-radius: 3px; }

  /* User action panel */
  .admin-action-panel {
    background: #F8FAFF; border: 1.5px solid #E0E9FF;
    border-radius: .75rem; padding: 1rem 1.25rem; margin-top: .25rem;
    animation: slideDown .15s ease;
  }
  .admin-action-panel.danger-panel { background: #FFF8F8; border-color: #FFD6D6; }
  .admin-action-panel.success-panel { background: #F0FDF4; border-color: #BBF7D0; }
  @keyframes slideDown { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }

  /* Sistem stats cards */
  .stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-bottom: 1.5rem; }
  .stat-card {
    background: #fff; border: 1px solid #E7E5E4; border-radius: .875rem;
    padding: 1rem 1.25rem; text-align: center;
  }
  .stat-card-num { font-family: 'Montserrat'; font-size: 1.8rem; font-weight: 800; color: #0F172A; line-height: 1; }
  .stat-card-label { font-size: .72rem; color: #78716C; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-top: .3rem; }
  .stat-card.red .stat-card-num { color: #E4002B; }
  .stat-card.blue .stat-card-num { color: #2563EB; }
  .stat-card.green .stat-card-num { color: #16A34A; }

  /* Materi accordion */
  .materi-chapter {
    border: 1px solid #E7E5E4; border-radius: .75rem; margin-bottom: .5rem; overflow: hidden;
  }
  .materi-chapter-header {
    display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem;
    cursor: pointer; background: #FAFAF8; user-select: none;
    transition: background .15s;
  }
  .materi-chapter-header:hover { background: #F5F5F4; }
  .materi-chapter-header .mc-icon { font-size: 1.1rem; }
  .materi-chapter-header .mc-title { font-weight: 600; font-size: .88rem; flex: 1; }
  .materi-chapter-header .mc-count { font-size: .75rem; color: #78716C; background: #E7E5E4; padding: .15rem .5rem; border-radius: 2rem; }
  .materi-chapter-header .mc-chevron { color: #A8A29E; transition: transform .2s; font-size: .75rem; }
  .materi-chapter-header.open .mc-chevron { transform: rotate(90deg); }
  .materi-pages { padding: .5rem; border-top: 1px solid #F5F5F4; }
  .materi-page-item {
    display: flex; align-items: center; gap: .5rem; padding: .45rem .75rem;
    border-radius: .5rem; cursor: pointer; font-size: .84rem; color: #374151;
    transition: background .1s;
  }
  .materi-page-item:hover { background: #EFF6FF; color: #2563EB; }
  .materi-page-item .mp-dot { width: 6px; height: 6px; border-radius: 50%; background: #CBD5E1; flex-shrink: 0; }
  .materi-page-item:hover .mp-dot { background: #2563EB; }
  .materi-sub-label { font-size: .72rem; color: #A8A29E; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .5rem .75rem .15rem; }

  /* Ranking table */
  .rank-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
  .rank-table th { text-align: left; padding: .6rem .75rem; font-weight: 600; color: #57534E; border-bottom: 2px solid #E7E5E4; background: #FAFAF8; }
  .rank-table td { padding: .65rem .75rem; border-bottom: 1px solid #F5F5F4; }
  .rank-table tr:last-child td { border-bottom: none; }
  .rank-table tr:hover td { background: #FAFAF8; }
  .rank-medal { font-size: 1.1rem; width: 28px; display: inline-block; text-align: center; }
  .rank-progress-bar { height: 6px; background: #F5F5F4; border-radius: 3px; overflow: hidden; min-width: 80px; }
  .rank-progress-fill { height: 100%; background: #E4002B; border-radius: 3px; transition: width .3s; }
  .admin-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
  .admin-table th { text-align: left; padding: .6rem .75rem; font-weight: 600; color: #57534E; border-bottom: 2px solid #E7E5E4; }
  .admin-table td { padding: .6rem .75rem; border-bottom: 1px solid #F5F5F4; color: #1C1917; }
  .admin-table tr:last-child td { border-bottom: none; }
  .admin-table tr:hover td { background: #FAFAF8; }
  .badge { padding: .15rem .55rem; border-radius: 2rem; font-size: .72rem; font-weight: 600; }
  .badge-admin   { background: #FEF2F2; color: #E4002B; }
  .badge-rm      { background: #DBEAFE; color: #1E40AF; }
  .badge-spv     { background: #D1FAE5; color: #065F46; }
  .badge-kordi   { background: #FEF9C3; color: #713F12; }
  .badge-trainee { background: #EFF6FF; color: #2563EB; }
  .badge-active { background: #F0FDF4; color: #16A34A; }
  .badge-inactive { background: #F5F5F4; color: #A8A29E; }
  .btn-sm {
    padding: .3rem .7rem; border-radius: .4rem; font-size: .78rem; font-weight: 500;
    cursor: pointer; border: none; transition: background .1s;
  }
  .btn-primary { background: #E4002B; color: #fff; }
  .btn-primary:hover { background: #C4001E; }
  .btn-secondary { background: #F5F5F4; color: #1C1917; }
  .btn-secondary:hover { background: #E7E5E4; }
  .btn-danger { background: #FEF2F2; color: #E4002B; }
  .btn-danger:hover { background: #FEE2E2; }
  .btn-warning { background: #FEF9C3; color: #713F12; }
  .btn-warning:hover { background: #FEF08A; }
  .btn-full { width: 100%; padding: .65rem; border-radius: .625rem; font-size: .9rem; font-weight: 600; cursor: pointer; border: none; }
  .form-group { margin-bottom: 1rem; }
  .form-label { display: block; font-size: .8rem; font-weight: 600; color: #374151; margin-bottom: .3rem; }
  .form-input {
    width: 100%; padding: .55rem .85rem; border: 1.5px solid #E7E5E4; border-radius: .5rem;
    font-size: .9rem; font-family: 'Inter'; outline: none; transition: border-color .15s;
    background: #fff;
  }
  .form-input:focus { border-color: #E4002B; box-shadow: 0 0 0 3px rgba(228,0,43,.07); }
  .form-select {
    width: 100%; padding: .55rem .85rem; border: 1.5px solid #E7E5E4; border-radius: .5rem;
    font-size: .9rem; font-family: 'Inter'; outline: none; background: #fff; cursor: pointer;
  }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
  .form-error { color: #E4002B; font-size: .8rem; margin-top: .25rem; }
  .section-divider { border: none; border-top: 1px solid #F5F5F4; margin: 1.25rem 0; }

  /* ── Login screen ── */
  .login-screen {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 60%, #0F172A 100%);
    padding: 1.5rem;
  }
  .login-card {
    background: #fff; border-radius: 1.5rem; padding: 2.5rem;
    width: 100%; max-width: 400px;
    box-shadow: 0 32px 80px rgba(0,0,0,.3);
  }
  .login-logo { text-align: center; margin-bottom: 2rem; }
  .login-logo-icon {
    width: 64px; height: 64px; border-radius: 14px; background: #0891B2;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto .75rem;
  }
  .login-logo h2 { font-family: 'Montserrat'; font-size: 1.4rem; font-weight: 800; color: #0F172A; }
  .login-logo p { color: #78716C; font-size: .85rem; margin-top: .25rem; }
  .login-error { background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C; padding: .65rem .875rem; border-radius: .5rem; font-size: .85rem; margin-bottom: 1rem; }

  /* ── Change password modal ── */
  .chpw-modal-box { max-width: 400px; }

  /* ── Loading spinner ── */
  .spinner { width: 36px; height: 36px; border: 3px solid #E7E5E4; border-top-color: #E4002B; border-radius: 50%; animation: spin .7s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .spinner-sm { width: 16px; height: 16px; border-width: 2px; display: inline-block; }

  /* ── Empty state ── */
  .empty-state { text-align: center; padding: 5rem 2rem; color: #A8A29E; }
  .empty-state .icon { font-size: 4rem; margin-bottom: 1rem; }
  .empty-state h2 { font-family: 'Montserrat'; font-size: 1.5rem; color: #57534E; margin-bottom: .5rem; }

  @media (max-width: 768px) {
    /* ── Sidebar (admin) ── */
    #sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; }
    #sidebar.collapsed { width: 0; min-width: 0; }
    #sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 99; background: rgba(0,0,0,.45); }
    #sidebar-backdrop.visible { display: block; }

    /* ── Topbar ── */
    #topbar { padding: 0 .75rem; gap: .4rem; }
    .breadcrumb { font-size: .75rem; }

    /* ── Admin home ── */
    .home-hero { padding: 2rem 1.25rem; }
    .home-hero h1 { font-size: 1.5rem; }
    .home-stats { gap: 1rem; }
    .chapters-grid { padding: 1.25rem; gap: 1rem; }

    /* ── Page view ── */
    .page-header { padding-left: 1.25rem; padding-right: 1.25rem; padding-top: 1.5rem; }
    .page-title { font-size: 1.5rem; }
    .blocks-area { padding-left: 1.25rem; padding-right: 1.25rem; }
    .page-nav { padding: 1.25rem; }
    .related-section { padding-left: 1.25rem; padding-right: 1.25rem; padding-bottom: 1.5rem; }
    .quiz-section { padding-left: 1.25rem; padding-right: 1.25rem; padding-bottom: 1.5rem; }

    /* ── Forms ── */
    .form-row { grid-template-columns: 1fr; }

    /* ── Quiz CTA ── */
    .quiz-cta { flex-direction: column; align-items: flex-start; }
    .quiz-start-btn { width: 100%; text-align: center; }

    /* ── Related pages grid → 1 kolom ── */
    .related-grid { grid-template-columns: 1fr; }

    /* ── Prev/next nav buttons stack ── */
    .page-nav { flex-direction: column; }
    .page-nav-btn { width: 100%; }

    /* ── Admin stat cards → 2 kolom ── */
    .stat-cards { grid-template-columns: repeat(2, 1fr); }

    /* ── HTML block & prose table overflow ── */
    .html-block { overflow-x: auto; }
    .prose table { font-size: .8rem; }
    .data-table th, .data-table td { padding: .5rem .65rem; font-size: .82rem; }
  }

  /* ══════════════════════════════════════════════════════
     TRAINEE DASHBOARD
  ══════════════════════════════════════════════════════ */
  .trainee-shell { max-width: 900px; margin: 0 auto; padding: 2rem 2rem 4rem; }
  .trainee-welcome { background: linear-gradient(135deg,#0F172A 0%,#1E3A5F 100%); border-radius: 1.25rem; padding: 2rem 2.5rem; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:2rem; }
  .trainee-welcome h2 { font-family:'Montserrat'; font-size:1.35rem; font-weight:800; margin-bottom:.35rem; }
  .trainee-welcome p  { color:#94A3B8; font-size:.9rem; margin-bottom:1.25rem; }
  .progress-bar-wrap { background:rgba(255,255,255,.1); border-radius:999px; height:8px; width:260px; max-width:100%; margin-bottom:1.25rem; }
  .progress-bar-fill { background:linear-gradient(90deg,#E4002B,#FF6B6B); border-radius:999px; height:100%; transition:width .6s ease; }
  .progress-text { font-size:.82rem; color:#CBD5E1; margin-top:.3rem; }
  .continue-btn { background:#E4002B; color:#fff; border:none; border-radius:.75rem; padding:.75rem 1.75rem; font-size:.95rem; font-weight:700; cursor:pointer; transition:background .15s,transform .15s; white-space:nowrap; }
  .continue-btn:hover { background:#C4001E; transform:translateY(-1px); }
  .continue-btn:disabled { background:#555; cursor:not-allowed; transform:none; }

  /* Leaderboard */
  .section-title { font-family:'Montserrat'; font-size:1.15rem; font-weight:800; color:#0F172A; margin-bottom:1rem; display:flex; align-items:center; gap:.5rem; }
  .leaderboard-table { width:100%; border-collapse:collapse; font-size:.88rem; }
  .leaderboard-table th { background:#0F172A; color:#fff; padding:.6rem 1rem; text-align:left; font-weight:600; }
  .leaderboard-table td { padding:.6rem 1rem; border-bottom:1px solid #F5F5F4; }
  .leaderboard-table tr:last-child td { border-bottom:none; }
  .leaderboard-table tr:nth-child(even) td { background:#FAFAF8; }
  .leaderboard-table tr.me td { background:#FFF5F5 !important; font-weight:600; }
  .rank-badge { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; font-size:.78rem; font-weight:700; background:#E7E5E4; color:#78716C; }
  .rank-badge.gold   { background:#FDE68A; color:#92400E; }
  .rank-badge.silver { background:#E5E7EB; color:#374151; }
  .rank-badge.bronze { background:#FED7AA; color:#92400E; }
  .lb-prog-bar { height:6px; background:#E7E5E4; border-radius:3px; width:100px; display:inline-block; vertical-align:middle; margin-right:.4rem; }
  .lb-prog-fill { height:100%; background:#E4002B; border-radius:3px; }

  /* Chapter progress cards */
  .ch-progress-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.85rem; margin-bottom:2rem; }
  .ch-progress-card { background:#fff; border:1.5px solid #E7E5E4; border-radius:.9rem; padding:1rem 1.25rem; display:flex; align-items:center; gap:.85rem; transition:border-color .15s,box-shadow .15s; }
  .ch-progress-card.passed   { border-color:#22C55E; }
  .ch-progress-card.locked   { opacity:.5; cursor:default; }
  .ch-progress-card.current  { border-color:#E4002B; box-shadow:0 0 0 3px rgba(228,0,43,.08); cursor:pointer; }
  .ch-progress-card:not(.locked):not(.passed) { cursor:pointer; }
  .ch-progress-card:not(.locked):not(.passed):hover { border-color:#CBD5E1; box-shadow:0 4px 16px rgba(0,0,0,.07); }
  .ch-card-icon { font-size:1.5rem; flex-shrink:0; }
  .ch-card-title { font-size:.85rem; font-weight:600; color:#0F172A; line-height:1.35; }
  .ch-card-meta  { font-size:.75rem; color:#78716C; margin-top:.2rem; }
  .ch-status-badge { margin-left:auto; flex-shrink:0; font-size:.7rem; font-weight:700; padding:.2rem .55rem; border-radius:2rem; }
  .ch-status-badge.pass   { background:#DCFCE7; color:#166534; }
  .ch-status-badge.lock   { background:#F3F4F6; color:#9CA3AF; }
  .ch-status-badge.open   { background:#FEF9C3; color:#854D0E; }

  /* Quiz review modal */
  .review-question-card { border:1px solid #E7E5E4; border-radius:.75rem; padding:1.25rem; margin-bottom:1rem; }
  .review-question-card.correct { border-color:#22C55E; background:#F0FDF4; }
  .review-question-card.wrong   { border-color:#EF4444; background:#FEF2F2; }
  .review-q-num { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#78716C; margin-bottom:.5rem; }
  .review-q-text { font-size:.92rem; font-weight:600; color:#1C1917; margin-bottom:.85rem; line-height:1.5; }
  .review-option { display:flex; align-items:center; gap:.6rem; padding:.4rem .6rem; border-radius:.5rem; font-size:.87rem; margin-bottom:.3rem; }
  .review-option.user-answer  { background:#FEE2E2; color:#B91C1C; font-weight:600; }
  .review-option.correct-ans  { background:#DCFCE7; color:#166534; font-weight:600; }
  .review-option.both         { background:#DCFCE7; color:#166534; font-weight:600; }
  .review-option-label { width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700; background:#E7E5E4; color:#374151; flex-shrink:0; }
  .review-explanation { margin-top:.85rem; padding:.75rem 1rem; background:#FFF7ED; border-left:3px solid #F59E0B; border-radius:0 .5rem .5rem 0; font-size:.87rem; color:#1C1917; line-height:1.6; }
  .review-explanation strong { color:#92400E; }

  /* Score celebration */
  .score-celebrate { text-align:center; padding:2rem 1.5rem; }
  .score-big { font-family:'Montserrat'; font-size:4rem; font-weight:900; line-height:1; }
  .score-big.pass  { color:#22C55E; }
  .score-big.fail  { color:#E4002B; }
  .score-unlock-badge { display:inline-flex; align-items:center; gap:.5rem; background:#DCFCE7; color:#166534; border-radius:2rem; padding:.4rem 1rem; font-size:.85rem; font-weight:700; margin-top:.75rem; }

  /* Trainee topbar (no sidebar) */
  .trainee-topbar-prog { display:flex; align-items:center; gap:.6rem; font-size:.82rem; color:#78716C; }
  .trainee-topbar-prog .tp-fill { height:5px; width:80px; background:#E7E5E4; border-radius:3px; display:inline-block; }
  .trainee-topbar-prog .tp-done { height:5px; background:#E4002B; border-radius:3px; transition:width .4s; }

  /* Locked chapter overlay */
  .locked-overlay { text-align:center; padding:5rem 2rem; }
  .locked-overlay .lock-icon { font-size:3.5rem; margin-bottom:1rem; }
  .locked-overlay h2 { font-family:'Montserrat'; font-size:1.5rem; font-weight:800; color:#0F172A; margin-bottom:.5rem; }
  .locked-overlay p  { color:#78716C; font-size:.95rem; margin-bottom:1.5rem; }

  /* ══════════════════════════════════════════════════════
     MOBILE — Trainee overrides (harus di bawah base styles)
  ══════════════════════════════════════════════════════ */
  @media (max-width: 768px) {
    /* Topbar trainee: progress bar lebih compact */
    .trainee-topbar-prog .tp-fill { width: 50px; }

    /* Shell & welcome */
    .trainee-shell { padding: 1rem 1rem 3rem; }
    .trainee-welcome { padding: 1.25rem 1.25rem; gap: 1rem; }
    .trainee-welcome h2 { font-size: 1.1rem; }
    .progress-bar-wrap { width: 100%; }
    .continue-btn { width: 100%; text-align: center; padding: .7rem 1.25rem; }

    /* Chapter progress → 1 kolom */
    .ch-progress-grid { grid-template-columns: 1fr; gap: .6rem; }

    /* Leaderboard: sembunyikan kolom Level (3) & Avg Nilai (5) */
    .leaderboard-table th:nth-child(3),
    .leaderboard-table td:nth-child(3),
    .leaderboard-table th:nth-child(5),
    .leaderboard-table td:nth-child(5) { display: none; }

    /* Padding sel lebih kecil agar tidak overflow */
    .leaderboard-table th,
    .leaderboard-table td { padding: .45rem .55rem; font-size: .79rem; }

    /* Progress bar leaderboard compact */
    .lb-prog-bar { width: 50px; }
  }

/* ════════════════════════════════════════════════════════
   NOTIFICATION BELL
════════════════════════════════════════════════════════ */
.notif-bell-btn {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: .35rem .4rem;
  border-radius: 8px;
  color: #64748B;
  display: flex;
  align-items: center;
  transition: background .15s, color .15s;
}
.notif-bell-btn:hover { background: #F1F5F9; color: #E4002B; }

.notif-badge {
  position: absolute;
  top: 2px; right: 2px;
  background: #E4002B;
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
  pointer-events: none;
}

.notif-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 300px;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 9999;
  overflow: hidden;
}

.notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem .85rem;
  font-size: .82rem;
  font-weight: 700;
  color: #1E293B;
  border-bottom: 1px solid #F1F5F9;
}

.notif-new-badge {
  font-size: .68rem;
  background: #FEF2F2;
  color: #E4002B;
  border: 1px solid #FECACA;
  border-radius: 20px;
  padding: .1rem .45rem;
  font-weight: 600;
}

.notif-list {
  max-height: 340px;
  overflow-y: auto;
}

.notif-empty {
  padding: 1.5rem;
  text-align: center;
  color: #94A3B8;
  font-size: .82rem;
}

.notif-item {
  display: flex;
  gap: .6rem;
  padding: .6rem .85rem;
  border-bottom: 1px solid #F8FAFC;
  transition: background .1s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: #F8FAFC; }
.notif-item.notif-unread { background: #FFF7F7; }
.notif-item.notif-unread:hover { background: #FEF2F2; }

.notif-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: .1rem;
}

.notif-body { flex: 1; min-width: 0; }

.notif-msg {
  font-size: .8rem;
  color: #1E293B;
  line-height: 1.4;
  word-break: break-word;
}

.notif-time {
  font-size: .7rem;
  color: #94A3B8;
  margin-top: .2rem;
}

/* ════════════════════════════════════════════════════════
   EMOJI REACTIONS
════════════════════════════════════════════════════════ */
.notif-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin-top: .35rem;
}

.reaction-chip {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: .1rem .4rem;
  font-size: .78rem;
  cursor: default;
}

.reaction-count {
  font-size: .7rem;
  font-weight: 600;
  color: #64748B;
}

.emoji-picker {
  display: flex;
  gap: .2rem;
  margin-top: .4rem;
  flex-wrap: wrap;
}

.emoji-btn {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: .2rem .3rem;
  font-size: .95rem;
  cursor: pointer;
  transition: background .12s, transform .1s, border-color .12s;
  line-height: 1;
}
.emoji-btn:hover {
  background: #FEF2F2;
  border-color: #FECACA;
  transform: scale(1.18);
}

/* ════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
════════════════════════════════════════════════════════ */
.toast-container {
  position: fixed;
  top: 60px;
  right: 16px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  pointer-events: none;
  max-width: 320px;
  width: 100%;
}

.toast-item {
  background: #1E293B;
  color: #F8FAFC;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  pointer-events: all;
  animation: toastIn .25s ease;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}

.toast-content {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .65rem .75rem .55rem;
}

.toast-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: .05rem;
}

.toast-msg {
  font-size: .8rem;
  line-height: 1.4;
  flex: 1;
  word-break: break-word;
}

.toast-close {
  background: none;
  border: none;
  color: #94A3B8;
  font-size: .8rem;
  cursor: pointer;
  padding: 0 .1rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: .05rem;
}
.toast-close:hover { color: #F8FAFC; }

.toast-progress-track {
  height: 3px;
  background: rgba(255,255,255,.15);
}

.toast-progress-bar {
  height: 100%;
  background: #E4002B;
  transition: width .05s linear;
}