:root{
    --space-1: #05060F;
    --space-2: #0A0E1F;
    --space-3: #10152B;
    --panel: rgba(18,22,44,0.55);
    --panel-solid: #10142A;
    --border: rgba(120,150,255,0.18);
    --border-soft: rgba(255,255,255,0.08);
    --blue: #3DA9FC;
    --blue-soft: rgba(61,169,252,0.16);
    --gold: #FFC93C;
    --gold-soft: rgba(255,201,60,0.16);
    --text: #EDF1FF;
    --text-dim: #8C93B8;
    --radius: 16px;
    --font-display: 'Sora', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
  }
  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  body{
    background: radial-gradient(ellipse at 15% 0%, rgba(61,169,252,0.10), transparent 45%),
                radial-gradient(ellipse at 85% 15%, rgba(255,201,60,0.08), transparent 40%),
                linear-gradient(180deg, var(--space-1), var(--space-2) 40%, var(--space-1));
    color: var(--text);
    font-family: var(--font-body);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
  }

  /* ---------- Starfield ---------- */
  .stars{ position: fixed; inset:0; z-index:0; pointer-events:none; }
  .stars span{
    position:absolute; width:2px; height:2px; background:#fff; border-radius:50%;
    opacity:.5; animation: twinkle 4s ease-in-out infinite;
  }
  @keyframes twinkle{ 0%,100%{ opacity:.15; } 50%{ opacity:.9; } }

  /* ---------- Floating geometry ---------- */
  .floaters{ position: fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
  .floater{
    position:absolute; opacity:.16; animation: drift linear infinite;
  }
  .floater.gold{ opacity:.14; }
  @keyframes drift{
    0%{ transform: translate(0,0) rotate(0deg); }
    50%{ transform: translate(18px,-26px) rotate(180deg); }
    100%{ transform: translate(0,0) rotate(360deg); }
  }
  @media (prefers-reduced-motion: reduce){
    .floater{ animation: none; }
    .stars span{ animation: none; opacity:.4; }
  }

  .app{ position: relative; z-index: 2; max-width: 1080px; margin: 0 auto; padding: 22px 24px 80px; }

  /* ---- Desktop sidebar (faqat katta ekranlarda) ---- */
  .app-shell{ display:block; }
  .app-sidebar{ display:none; }
  @media (min-width: 900px){
    .app-shell{ display:flex; align-items:flex-start; min-height:100vh; }
    .app-sidebar{
      display:flex; flex-direction:column; width:220px; flex:none; min-height:100vh;
      background: var(--panel-solid); border-right:1px solid var(--border); padding:20px 14px; position:sticky; top:0;
    }
    .app-sidebar .sidebar-logo{ display:flex; align-items:center; gap:8px; padding:6px 10px 22px; cursor:pointer; }
    .app-sidebar .sidebar-logo img{ height:24px; }
    .app-sidebar .sidebar-logo span{ font-family: var(--font-display); font-weight:800; font-size:16px; }
    .sidebar-nav-item{
      display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:10px; cursor:pointer;
      font-size:13.5px; font-weight:600; color: var(--text-dim); margin-bottom:4px; border:none; background:none;
      width:100%; text-align:left; font-family:var(--font-body); transition: all .15s ease;
    }
    .sidebar-nav-item:hover{ background: rgba(255,255,255,0.04); color: var(--text); }
    .sidebar-nav-item.active{ background: var(--blue-soft); color: var(--blue); }
    .sidebar-nav-item .ic{ font-size:15px; flex:none; width:18px; text-align:center; }
    .sidebar-plus-card{
      margin-top:18px; background: linear-gradient(135deg, rgba(255,201,60,0.14), rgba(255,201,60,0.04));
      border:1px solid rgba(255,201,60,0.3); border-radius:14px; padding:14px; cursor:pointer;
    }
    .sidebar-plus-card .spc-title{ font-family:var(--font-display); font-weight:700; font-size:13px; color: var(--gold); display:flex; align-items:center; gap:6px; }
    .sidebar-plus-card .spc-sub{ font-size:11.5px; color: var(--text-dim); margin-top:4px; line-height:1.4; }
    .sidebar-plus-card .spc-btn{
      margin-top:10px; width:100%; background: var(--gold); color:#2A1E00; border:none; font-weight:800;
      font-size:12px; padding:8px; border-radius:999px; cursor:pointer;
    }
    .sidebar-help-link{ margin-top:14px; padding:10px 12px; font-size:12.5px; color: var(--text-dim); cursor:pointer; }
    .sidebar-help-link:hover{ color: var(--text); }
    .sidebar-footer{
      margin-top:auto; display:flex; align-items:center; gap:10px; padding:12px 10px 4px;
      border-top:1px solid var(--border-soft); cursor:pointer;
    }
    .sidebar-footer-avatar{
      width:32px; height:32px; border-radius:50%; background: linear-gradient(135deg, var(--blue), var(--gold));
      display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color: var(--space-1); flex:none; overflow:hidden;
    }
    .sidebar-footer-avatar img{ width:100%; height:100%; object-fit:cover; }
    .sidebar-footer-text .sft-name{ font-size:12.5px; font-weight:700; }
    .sidebar-footer-text .sft-plan{ font-size:11px; color: var(--text-dim); }
  }

  /* ---------- Header / Nav ---------- */

  .bottom-nav{
    display:none; position:fixed; bottom:0; left:0; right:0; z-index:60;
    background: var(--panel-solid); border-top:1px solid var(--border);
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
    justify-content: space-around; align-items:center;
  }
  .bottom-nav-item{
    display:flex; flex-direction:column; align-items:center; gap:3px;
    background:none; border:none; color: var(--text-dim); cursor:pointer;
    font-family: var(--font-body); font-size:10.5px; font-weight:600; padding:4px 8px; flex:1;
    transition: color .15s ease;
  }
  .bottom-nav-item svg{ width:20px; height:20px; }
  .bottom-nav-item.active{ color: var(--blue); }

  /* ---------- Panels ---------- */
  .panel{ display:none; margin-top: 34px; animation: fadeUp .4s ease; }
  .panel.active{ display:block; }
  @keyframes fadeUp{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform:translateY(0);} }

  .glass-card{
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
    backdrop-filter: blur(14px); padding: 28px; transition: border-color .2s ease, box-shadow .2s ease;
  }

  /* ---- Reader-mode: umumiy tor "card" konteynerdan chiqib, to'liq ekranga yoyiladi ---- */
  body.reader-mode .app{ max-width: none; padding: 22px 28px 40px; }
  body.reader-mode #panel-teacher > .glass-card{
    background: none; border: none; backdrop-filter: none; padding: 0; box-shadow: none;
  }
  body.reader-mode #panel-teacher > .sec-title, body.reader-mode #panel-teacher > .sec-sub{ display:none; }
  body.reader-mode .reader-body{
    border: none; border-radius: 0; height: calc(100vh - 130px);
  }
  body.reader-mode .reader-page-item{ box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
  body.reader-mode #book-list-section-outer{ display:none; }

  /* ---------- Home / Solve ---------- */
  .home-title{
    text-align:center; font-family: var(--font-display); font-weight:700;
    font-size: 34px; letter-spacing:.01em; margin: 8px 0 6px;
    background: linear-gradient(120deg, var(--text), var(--blue) 60%, var(--gold));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
  .home-sub{ text-align:center; color: var(--text-dim); font-size:14px; margin-bottom: 28px; }

  /* ---------- Dashboard (Bosh sahifa) ---------- */
  .dash-welcome{ margin-bottom:22px; }
  .dash-title{ font-family: var(--font-display); font-size:26px; font-weight:800; margin:0 0 4px; }
  .dash-sub{ color: var(--text-dim); font-size:14px; margin:0; }

  .dash-continue-card{ margin-bottom:26px; padding:18px; }
  .dash-continue-row{ display:flex; align-items:center; gap:16px; }
  .dash-continue-cover{ width:52px; height:70px; object-fit:cover; border-radius:8px; flex:none; background: rgba(255,255,255,0.05); }
  .dash-continue-info{ flex:1; min-width:0; }
  .dash-continue-title{ font-family: var(--font-display); font-weight:700; font-size:15px; margin-bottom:3px; }
  .dash-continue-meta{ font-size:12px; color: var(--text-dim); font-family: var(--font-mono); margin-bottom:8px; }
  .dash-continue-progress{ height:5px; background: rgba(255,255,255,0.08); border-radius:3px; overflow:hidden; max-width:260px; }
  .dash-continue-progress-fill{ height:100%; background: linear-gradient(90deg, var(--blue), var(--gold)); border-radius:3px; }

  .dash-quick-title{ font-family: var(--font-display); font-weight:700; font-size:15px; margin: 0 0 12px; }
  .dash-quick-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap:14px; margin-bottom:32px; }
  .dash-quick-card{
    display:flex; flex-direction:column; align-items:flex-start; gap:8px; text-align:left;
    background: var(--panel); border:1px solid var(--border); border-radius: 14px; padding:18px;
    cursor:pointer; transition: border-color .15s ease, transform .1s ease;
  }
  .dash-quick-card:hover{ border-color: var(--blue); transform: translateY(-2px); }
  .dqc-ic{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; }
  .dqc-title{ font-family: var(--font-display); font-weight:700; font-size:14.5px; }
  .dqc-sub{ font-size:11.5px; color: var(--text-dim); }

  .dash-solve-section{ margin-top:8px; }

  /* ---------- Mock Test ---------- */
  .mocktest-header-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
  .mocktest-filter-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
  .mt-filter-btn{
    background: var(--panel); border:1px solid var(--border); color: var(--text-dim);
    font-family: var(--font-body); font-weight:600; font-size:12.5px; padding:8px 16px;
    border-radius:999px; cursor:pointer; transition: all .15s ease;
  }
  .mt-filter-btn:hover{ color: var(--text); border-color: var(--blue); }
  .mt-filter-btn.active{ background: var(--blue); border-color: var(--blue); color: var(--space-1); }

  .mocktest-list{ display:flex; flex-direction:column; gap:12px; }
  .mt-card{
    display:flex; align-items:center; gap:16px; background: var(--panel); border:1px solid var(--border);
    border-radius: var(--radius); padding:16px 18px;
  }
  .mt-card-icon{ width:44px; height:44px; border-radius:12px; flex:none; display:flex; align-items:center; justify-content:center; font-size:20px; }
  .mt-card-body{ flex:1; min-width:0; }
  .mt-card-title{ font-family: var(--font-display); font-weight:700; font-size:14.5px; margin-bottom:3px; }
  .mt-card-meta{ font-size:12px; color: var(--text-dim); font-family: var(--font-mono); margin-bottom:4px; }
  .mt-card-result{ font-size:11.5px; color: var(--text-dim); }
  .mt-card-result.solved{ color: var(--green, #4ADE80); }
  .mt-card-start{ flex:none; }
  @media (max-width: 600px){
    .mt-card{ flex-wrap:wrap; }
    .mt-card-start{ width:100%; }
  }


  textarea, input[type=text], input[type=number]{
    width:100%; background: rgba(5,7,18,0.55); border: 1px solid var(--border);
    border-radius: 12px; color: var(--text); font-family: var(--font-mono); font-size:14.5px;
    padding: 14px 16px; resize: vertical;
  }
  textarea:focus, input:focus, select:focus{ outline: 2px solid var(--blue); outline-offset:1px; }
  textarea{ min-height: 110px; }

  .field{ margin-bottom:16px; }
  label{ display:block; font-size:12px; font-weight:700; color: var(--text-dim); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; }

  .file-drop{
    border: 1.5px dashed var(--border); border-radius: 12px; padding: 18px; text-align:center;
    color: var(--text-dim); font-size:13.5px; cursor:pointer; background: rgba(5,7,18,0.4); position:relative;
  }
  .file-drop.has-image{ padding:10px; }
  .file-drop img{ max-height:150px; border-radius:8px; display:block; margin:0 auto; }
  .file-drop input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
  .file-drop .clear-btn{
    display:none; margin-top:10px; background:none; border:1px solid var(--border); color: var(--gold);
    font-size:12px; padding:5px 12px; border-radius:999px; cursor:pointer; font-family: var(--font-body); font-weight:600;
    position:relative; z-index:2;
  }
  .file-drop.has-image .clear-btn{ display:inline-block; }

  button.glow-btn{
    background: linear-gradient(120deg, var(--blue), #6FC3FF);
    color: var(--space-1); border:none; font-family: var(--font-body); font-weight:800; font-size:14.5px;
    padding: 13px 26px; border-radius: 999px; cursor:pointer; transition: transform .12s ease, box-shadow .12s ease;
    box-shadow: 0 0 22px rgba(61,169,252,0.3);
  }
  button.glow-btn:hover{ transform: translateY(-1px); box-shadow: 0 0 28px rgba(61,169,252,0.5); }
  button.glow-btn:active{ transform: translateY(0) scale(.98); }
  button.glow-btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

  button.ghost-btn{
    background: rgba(255,255,255,0.03); border: 1px solid var(--border); color: var(--text);
    font-family: var(--font-body); font-weight:700; font-size:13px; padding: 10px 18px;
    border-radius: 999px; cursor:pointer; transition: border-color .15s ease, background .15s ease;
  }
  button.ghost-btn:hover{ border-color: var(--blue); background: var(--blue-soft); }
  button.ghost-btn:active{ transform: scale(.98); }

  /* Klaviatura orqali harakatlanish uchun ko'rinadigan fokus holati */
  button:focus-visible, .icon-btn:focus-visible,
  .book-card:focus-visible, textarea:focus-visible, input:focus-visible, select:focus-visible{
    outline: 2px solid var(--gold); outline-offset: 2px;
  }

  .status{ font-family: var(--font-mono); font-size:12.5px; color: var(--blue); margin-top:12px; min-height:16px; }
  .status.err{ color: #FF8080; }

  .result{ margin-top:22px; padding-top:20px; border-top: 1px dashed var(--border-soft); display:none; }
  .result.show{ display:block; }
  .result h3{ font-family: var(--font-display); font-size:19px; margin:0 0 12px; color: var(--gold); }
  .step{ display:flex; gap:12px; margin-bottom:12px; align-items:flex-start; }
  .step-num{
    flex:none; width:26px; height:26px; border-radius:50%; background: rgba(5,7,18,0.6);
    border: 1px solid var(--gold); color: var(--gold); display:flex; align-items:center; justify-content:center;
    font-family: var(--font-mono); font-size:12px; font-weight:700;
  }
  .step-text{ font-size:14px; padding-top:3px; }
  .final-answer{
    margin-top:14px; background: rgba(5,7,18,0.55); border: 1px solid var(--gold);
    border-radius:12px; padding:12px 16px; font-family: var(--font-mono); font-size:14.5px;
  }
  .final-answer b{ color: var(--gold); }

  .footer-note{ text-align:center; color: var(--text-dim); font-size:12px; margin-top:50px; font-family: var(--font-mono); }

  /* ---------- Section titles (reused) ---------- */
  .sec-title{ font-family: var(--font-display); font-weight:700; font-size:26px; margin:0 0 4px; }
  .sec-sub{ color: var(--text-dim); font-size:13.5px; margin-bottom:20px; }

  /* ---------- Teacher AI (Gulchiroy) chat ---------- */
  .teacher-layout{ display:flex; gap:20px; align-items:flex-start; transition: all .35s ease; }
  .chat-col{ flex: 1 1 100%; transition: flex-basis .35s ease; }
  .book-col{ display:none; overflow:hidden; }
  .teacher-layout.book-mode .chat-col{ display:none; }
  .teacher-layout.book-mode .book-col{ display:block; flex: 1 1 auto; width:auto; order: 1; }
  #panel-teacher.view-books .chat-col{ display:none; }
  #panel-teacher.view-books #book-list-section-outer{ display:block; }
  #panel-teacher.view-teacher #book-list-section-outer{ display:none; }
  .chat-window{ display:flex; flex-direction:column; gap:14px; max-height: 480px; overflow-y:auto; padding: 6px 4px 10px; }
  .msg{ display:flex; max-width: 92%; }
  .msg.user{ align-self:flex-end; margin-left:auto; }
  .avatar{ flex:none; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; }
  .avatar.teacher{ background: linear-gradient(135deg, var(--gold), #FFE08A); }
  .avatar.user{ background: linear-gradient(135deg, var(--blue), #8FD0FF); }
  .bubble{ background: rgba(255,255,255,0.05); border:1px solid var(--border-soft); border-radius: 14px; padding: 10px 14px; font-size: 13.8px; line-height:1.5; white-space:pre-wrap; }
  .msg.user .bubble{ background: var(--blue-soft); border-color: rgba(61,169,252,0.3); }
  .msg.teacher .bubble{ background: var(--gold-soft); border-color: rgba(255,201,60,0.28); }
  .msg-name{ font-size:11px; color: var(--text-dim); margin-bottom:4px; font-weight:700; }
  .typing-dots{ display:flex; gap:4px; padding:4px 0; }
  .typing-dots span{
    width:7px; height:7px; border-radius:50%; background: var(--gold);
    animation: typingBounce 1.2s infinite ease-in-out;
  }
  .typing-dots span:nth-child(2){ animation-delay: 0.2s; }
  .typing-dots span:nth-child(3){ animation-delay: 0.4s; }
  @keyframes typingBounce{
    0%, 60%, 100%{ transform: translateY(0); opacity:.5; }
    30%{ transform: translateY(-5px); opacity:1; }
  }

  .quick-prompts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
  .chip-btn{
    background: rgba(255,255,255,0.04); border: 1px solid var(--border-soft); color: var(--text-dim);
    font-family: var(--font-body); font-weight:600; font-size:12.5px; padding: 8px 14px;
    border-radius: 999px; cursor:pointer; transition: all .15s ease;
  }
  .chip-btn:hover{ border-color: var(--blue); color: var(--text); background: var(--blue-soft); }
  .chat-input-wrap{ margin-top:14px; }
  .chat-input-wrap textarea{ width:100%; box-sizing:border-box; resize:none; min-height: 44px; }
  .chat-input-actions{ display:flex; gap:6px; justify-content:flex-end; margin-top:8px; }
  .icon-btn{
    width:38px; height:38px; border-radius:50%; border:1px solid var(--border);
    background: rgba(255,255,255,0.05); color: var(--text); font-size:18px; font-weight:700;
    display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none;
    transition: background .15s ease, border-color .15s ease, transform .1s ease;
  }
  .icon-btn:hover{ border-color: var(--blue); transform: translateY(-1px); }
  .icon-btn.send-btn{ background: var(--blue); border-color: var(--blue); color: var(--space-1); }
  .icon-btn.send-btn:hover{ background:#6FC3FF; }
  .icon-btn.send-btn.stop-state{ background: var(--gold); border-color: var(--gold); }
  .chat-thumb{ position:relative; display:inline-block; margin-top:8px; }
  .chat-thumb img{ height:60px; border-radius:8px; border:1px solid var(--border); }
  .chat-thumb .rm{ position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%; background: var(--space-1); border:1px solid var(--border); color: var(--text); font-size:11px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .chat-input-row textarea{ min-height:48px; flex:1; }
  .chat-input-row button{ flex:none; }

  .book-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap:14px; margin-top: 22px; }
  .teacher-layout.book-mode .book-grid{ display:none; }
  .book-card{
    background: rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:12px; padding:14px;
    cursor:pointer; transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
  }
  .book-card:hover{ border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(255,201,60,0.12); }
  .book-card:active{ transform: translateY(-1px); }
  .book-card .b-title{ font-family: var(--font-display); font-size:18px; margin:0 0 4px; }
  .book-card .b-author{ font-size:11.5px; color: var(--text-dim); font-family: var(--font-mono); }
  .book-card .b-count{ font-size:11px; color: var(--blue); margin-top:6px; font-family: var(--font-mono); }
  .book-card .b-del{ margin-top:10px; background:none; border:1px solid var(--border); color:#FF8A8A; font-size:11px; padding:4px 8px; border-radius:999px; cursor:pointer; font-weight:600; }
  .empty-note{ color: var(--text-dim); font-size:13px; font-family: var(--font-mono); padding:8px 0; }

  .book-detail-title{ font-family: var(--font-display); font-size:20px; margin: 0 0 12px; }

  .book-detail-card{ text-align:center; padding: 20px 10px; }
  .book-detail-cover{ width:140px; aspect-ratio:3/4; object-fit:cover; border-radius:10px; margin: 0 auto 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
  .book-detail-card .book-detail-title{ margin: 0 0 4px; }
  .book-detail-author{ font-size:13px; color: var(--text-dim); font-family: var(--font-mono); margin-bottom:20px; }

  .reader-header-title{ font-family: var(--font-display); font-size:15px; flex:1; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 8px; }

  .reader-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap:8px; position:relative; }
  .reader-header .back-link{ margin-bottom:0; flex:none; }

  .reader-body{ display:flex; gap:0; align-items:stretch; height: min(72vh, 780px); border:1px solid var(--border-soft); border-radius:14px; overflow:hidden; }
  .reader-main{ flex:1; min-width:0; display:flex; flex-direction:column; position:relative; }

  .reader-canvas-wrap{
    position:relative; background: rgba(0,0,0,0.25); flex:1; min-width:0; min-height:0;
    display:flex; flex-direction:column; overflow:hidden;
  }
  .reader-loading{ font-family: var(--font-mono); font-size:13px; color: var(--text-dim); text-align:center; margin:auto; }

  .reader-scroll{
    flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding: 16px 0 76px; display:flex; flex-direction:column; align-items:center; gap:14px;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
  .reader-scroll.draw-lock{ overflow-y:hidden; touch-action:none; }
  .reader-scroll.zoomed-pan{ overflow-x:auto; align-items:flex-start; cursor:grab; }
  .reader-scroll.zoomed-pan.draw-lock{ overflow-x:hidden; cursor:default; }

  /* ---- Nozik, tema bilan mos scrollbar (katta oq default scrollbar o'rniga) ---- */
  .reader-scroll{ scrollbar-width: thin; scrollbar-color: rgba(120,150,255,0.35) transparent; }
  .reader-scroll::-webkit-scrollbar{ width:8px; height:8px; }
  .reader-scroll::-webkit-scrollbar-track{ background: transparent; }
  .reader-scroll::-webkit-scrollbar-thumb{ background: rgba(120,150,255,0.35); border-radius:8px; }
  .reader-scroll::-webkit-scrollbar-thumb:hover{ background: rgba(120,150,255,0.55); }
  .reader-page-item{ position:relative; flex:none; background:#fff; border-radius:6px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); overflow:hidden; }
  .reader-page-item canvas.page-canvas{ display:block; width:100%; height:100%; }
  .reader-page-item canvas.page-annotation-canvas{ position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; touch-action:pan-y; }

  /* ---- Yagona sarlavha menyusi: sahifaga o'tish + (faqat desktop) zoom ---- */
  .reader-menu-popover{
    display:none; position:absolute; top: 52px; right: 0; z-index:60;
    background: var(--panel-solid); border:1px solid var(--border); border-radius:12px; padding:8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4); min-width:180px;
  }
  .reader-menu-popover.open{ display:block; }
  .reader-menu-item{
    display:block; width:100%; text-align:left; background:none; border:none; color: var(--text);
    font-family: var(--font-body); font-size:13px; padding:10px 12px; border-radius:8px; cursor:pointer;
  }
  .reader-menu-item:hover{ background: rgba(255,255,255,0.06); }
  .reader-header-desktop-controls{ display:none; align-items:center; gap:10px; flex:none; }
  .ai-desktop-btn{
    display:flex; align-items:center; gap:6px; background: linear-gradient(120deg, var(--blue), #6FC3FF);
    color: var(--space-1); border:none; font-family: var(--font-body); font-weight:800; font-size:12.5px;
    padding: 8px 14px; border-radius: 999px; cursor:pointer;
  }

  /* ---- Pastdagi yagona suzuvchi panel: ✏️ ✨ ---- */
  .reader-floating-bar{
    position:absolute; bottom:16px; left:50%; transform:translateX(-50%); z-index:45;
    display:flex; align-items:center; gap:10px; background: var(--panel-solid); border:1px solid var(--border);
    border-radius:999px; padding:8px 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  }
  .reader-floating-bar .icon-btn{ width:42px; height:42px; }
  #pen-toggle.active, #pen-tool-btn.active, #eraser-toggle.active{ background: var(--blue); border-color: var(--blue); color: var(--space-1); }
  .ai-fab{
    background: linear-gradient(120deg, var(--blue), #6FC3FF) !important; border:none !important; color:var(--space-1) !important;
  }

  /* ---- Chizish uchun kontekstual asboblar paneli (faqat qalam yoqilganda ko'rinadi) ---- */
  .annotation-toolbar{
    display:none; position:absolute; bottom:70px; left:50%; transform:translateX(-50%); z-index:46;
    align-items:center; gap:6px; background: var(--panel-solid); border:1px solid var(--border);
    border-radius:999px; padding:8px 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  }
  .annotation-toolbar.open{ display:flex; }

  .reader-page-popover{
    display:none; position:absolute; bottom:70px; left:50%; transform: translateX(-50%);
    background: var(--panel-solid); border:1px solid var(--border); border-radius:12px; padding:12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4); z-index:50; white-space:nowrap;
  }
  .reader-page-popover.open{ display:block; }
  .reader-page-popover-label{ font-size:11.5px; color: var(--text-dim); margin-bottom:8px; text-align:center; }
  .reader-page-popover-row{ display:flex; gap:8px; align-items:center; }
  .reader-page-popover-row input{
    width:70px; text-align:center; background: rgba(5,7,18,0.55); border:1px solid var(--border);
    border-radius:8px; color: var(--text); font-family: var(--font-mono); font-size:13px; padding:8px;
  }

  .annotation-clear-confirm{
    display:none; position:absolute; bottom:70px; left:50%; transform:translateX(-50%);
    background: var(--panel-solid); border:1px solid var(--border); border-radius:14px; padding:16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4); z-index:47; width:min(280px,90%); text-align:center;
  }
  .annotation-clear-confirm.open{ display:block; }
  .annotation-clear-confirm p{ font-size:12.5px; color: var(--text-dim); margin:0 0 12px; }
  .annotation-clear-confirm .ac-row{ display:flex; gap:8px; }
  .annotation-clear-confirm .ac-row button{ flex:1; font-size:12px; padding:8px; }

  /* ---- AI panel: mobile drawer overlay, desktop static split ---- */
  .ai-panel-backdrop{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:70; }
  .ai-panel-backdrop.open{ display:block; }
  .ai-panel{
    display:flex; flex-direction:column; position:fixed; top:0; right:0; bottom:0; width:min(360px,88%); z-index:71;
    background: var(--panel-solid); border-left:1px solid var(--border);
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom,0px)); box-shadow: -10px 0 40px rgba(0,0,0,0.5);
    transform: translateX(105%); transition: transform .25s ease;
  }
  .ai-panel.open{ transform: translateX(0); }
  .ai-panel-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
  .ai-panel-header span{ font-family: var(--font-display); font-size:15px; font-weight:700; }
  .ai-sheet-chat{ flex:1; overflow-y:auto; min-height:80px; display:flex; flex-direction:column; gap:10px; margin-bottom:8px; }
  .ai-panel-hint{ margin:auto; text-align:center; color: var(--text-dim); font-size:13.5px; padding:0 20px; }

  @media (min-width: 900px){
    .reader-header-desktop-controls{ display:flex; }
    .reader-menu-btn, #reader-menu-btn{ display:none; }
    .ai-fab{ display:none; }
    .ai-panel{
      position:static; transform:none; display:none; width:320px; flex:none; height:auto;
      border-left:1px solid var(--border-soft); box-shadow:none; border-radius:0;
    }
    .ai-panel.open{ display:flex; }
    .ai-panel-backdrop{ display:none !important; }
  }

  .book-detail-title{ font-family: var(--font-display); font-size:20px; margin: 0 0 12px; }

  .book-detail-card{ text-align:center; padding: 20px 10px; }
  .book-detail-cover{ width:140px; aspect-ratio:3/4; object-fit:cover; border-radius:10px; margin: 0 auto 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
  .book-detail-card .book-detail-title{ margin: 0 0 4px; }
  .book-detail-author{ font-size:13px; color: var(--text-dim); font-family: var(--font-mono); margin-bottom:20px; }

  .back-link{ background:none; border:none; color: var(--blue); font-family: var(--font-mono); font-size:12.5px; cursor:pointer; padding:0; margin-bottom:14px; }
  .back-link:hover{ text-decoration:underline; }
  .problem-item{ background: rgba(255,255,255,0.03); border:1px solid var(--border-soft); border-radius:10px; padding:12px 14px; margin-bottom:10px; font-size:13.5px; font-family: var(--font-mono); cursor:pointer; transition: border-color .15s ease; }
  .problem-item:hover{ border-color: var(--blue); }

  /* ---------- Video panel ---------- */
  .video-links{ margin-top:14px; display:flex; flex-direction:column; gap:20px; }
  .video-embed{ background: rgba(255,255,255,0.03); border:1px solid var(--border-soft); border-radius:14px; padding:14px; }
  .video-embed-title{ font-size:14px; font-weight:600; margin-bottom:10px; color: var(--text); }
  .video-embed iframe{ width:100%; aspect-ratio:16/9; border-radius:10px; border:none; }
  .video-link{
    display:flex; align-items:center; gap:10px; padding:10px 14px; background: rgba(255,255,255,0.03);
    border:1px solid var(--border-soft); border-radius:10px; color: var(--blue); text-decoration:none; font-size:13.5px;
    transition: border-color .15s ease;
  }
  .video-link:hover{ border-color: var(--blue); }
  .video-link .yt{ flex:none; width:20px; height:20px; }

  .row{ display:flex; gap:16px; flex-wrap:wrap; }
  .row > .field{ flex:1 1 200px; }
  select{ width:100%; background: rgba(5,7,18,0.55); border:1px solid var(--border); border-radius:12px; color: var(--text); font-family: var(--font-body); font-size:14.5px; padding:13px 14px; }

  /* ---------- Profile ---------- */
  .profile-card{ max-width: 420px; margin: 0 auto; text-align:center; }
  .profile-avatar{
    width:84px; height:84px; border-radius:50%; margin: 0 auto 16px;
    background: linear-gradient(135deg, var(--blue), var(--gold)); display:flex; align-items:center; justify-content:center;
    font-family: var(--font-display); font-size:30px; font-weight:800; color: var(--space-1);
  }
  .oauth-btn{
    width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
    background: rgba(255,255,255,0.04); border:1px solid var(--border); color: var(--text);
    font-family: var(--font-body); font-weight:700; font-size:14px; padding:13px 18px; border-radius:999px;
    cursor:pointer; margin-bottom:12px; transition: border-color .15s ease, background .15s ease;
  }
  .oauth-btn:hover{ border-color: var(--blue); background: var(--blue-soft); }
  .oauth-note{ font-size:11.5px; color: var(--text-dim); font-family: var(--font-mono); margin-top:16px; }
  .signed-in-badge{ display:none; background: var(--gold-soft); border:1px solid var(--gold); border-radius:12px; padding:14px; margin-top:16px; font-size:13.5px; }

  /* ---- Profile dashboard (redesigned) ---- */
  .profile-hero{ display:flex; align-items:center; gap:18px; margin-bottom:22px; }
  .profile-hero-avatar{
    width:78px; height:78px; border-radius:50%; flex:none; overflow:hidden;
    background: linear-gradient(135deg, var(--blue), var(--gold)); display:flex; align-items:center; justify-content:center;
    font-family: var(--font-display); font-size:28px; font-weight:800; color: var(--space-1);
  }
  .profile-hero-avatar img{ width:100%; height:100%; object-fit:cover; }
  .profile-hero-name-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .profile-hero-name-row span:first-child{ font-family: var(--font-display); font-size:21px; font-weight:700; }
  .plan-badge{
    font-family: var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.5px;
    padding:4px 10px; border-radius:999px; background: rgba(255,255,255,0.06); color: var(--text-dim); border:1px solid var(--border);
  }
  .plan-badge.plus{ background: var(--gold-soft); color: var(--gold); border-color: var(--gold); }
  .profile-hero-email{ font-size:13px; color: var(--text-dim); font-family: var(--font-mono); margin-top:4px; }

  .profile-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
  .profile-section-card h3{ font-family: var(--font-display); font-size:15.5px; margin:0 0 10px; }
  .settings-row{
    display:flex; align-items:center; justify-content:space-between; padding:12px 4px;
    cursor:pointer; font-size:14px; border-top:1px solid var(--border-soft);
  }
  .settings-row:first-of-type{ border-top:none; }
  .settings-row:hover{ color: var(--blue); }
  .settings-row span:last-child{ color: var(--text-dim); }

  /* ---- Full-screen overlays (plan select, redeem) ---- */
  .fullscreen-overlay{
    display:none; position:fixed; inset:0; z-index:150; background: var(--space-1);
    overflow-y:auto; padding: 24px 20px 60px;
  }
  .fullscreen-overlay.open{ display:block; }
  .fullscreen-overlay-inner{ max-width:460px; margin:0 auto; }

  .plan-toggle{ display:flex; gap:8px; margin:18px 0; background: rgba(255,255,255,0.03); border-radius:999px; padding:4px; }
  .plan-toggle-btn{
    flex:1; background:none; border:none; color: var(--text-dim); font-family: var(--font-body); font-weight:700;
    font-size:13.5px; padding:10px; border-radius:999px; cursor:pointer; transition: all .15s ease;
  }
  .plan-toggle-btn.active{ background: var(--blue); color: var(--space-1); }

  .plan-card{ text-align:center; }
  .plan-price{ font-family: var(--font-display); font-size:26px; font-weight:800; margin-bottom:18px; }
  .plan-benefits{ list-style:none; padding:0; margin:0 0 22px; text-align:left; }
  .plan-benefits li{ padding:8px 0; font-size:13.5px; color: var(--text-dim); border-bottom:1px solid var(--border-soft); }
  .plan-benefits li:last-child{ border-bottom:none; }
  .signed-in-badge.show{ display:block; }

 /* ======================================================
     RESPONSIVE — suyuq (fluid) o'lchamlar orqali silliq moslashuv
     ====================================================== */
  .app{ padding: clamp(12px, 3vw, 22px) clamp(12px, 4vw, 24px) 60px; }

  @media (max-width: 600px){
    .bottom-nav{ display:flex; }
    .app{ padding-bottom: 92px; }
  }

  .home-title{ font-size: clamp(20px, 4.5vw, 34px); }
  .home-sub{ font-size: clamp(12px, 2vw, 14px); }
  .sec-title{ font-size: clamp(17px, 3.5vw, 26px); }
  .sec-sub{ font-size: clamp(11.5px, 1.8vw, 13.5px); }

  .glass-card{ padding: clamp(14px, 3vw, 28px); }
  textarea, input[type=text], input[type=number], select{ font-size: clamp(13px, 1.8vw, 14.5px); }

  .book-grid{ grid-template-columns: repeat(auto-fill, minmax(clamp(110px, 22vw, 190px), 1fr)); gap: clamp(8px, 1.5vw, 14px); }
  .book-card{ padding: clamp(10px, 1.8vw, 14px); }
  .book-card .b-title{ font-size: clamp(14px, 2.2vw, 18px); }

  .bubble{ font-size: clamp(13px, 1.8vw, 13.8px); }
  .step-text{ font-size: clamp(13px, 1.8vw, 14px); }

  /* Faqat haqiqiy telefon kengligida (<=600px): kitob va chatni tepa-past qilib qo'yamiz,
     chunki yonma-yon sig'ishning iloji yo'q */
  @media (max-width: 600px){
    .teacher-layout{ flex-direction: column; height:auto; min-height:0; }
    .chat-col{ height:auto; min-height:0; flex:none; }
    .chat-window{ max-height: 320px; height:auto; }
    .teacher-layout.book-mode .chat-col{ display:none; }
    .teacher-layout.book-mode .book-col{ order: 1; width: 100%; }
    .chat-window{ max-height: 320px; }
    .reader-body{ height: 68vh; }

    /* O'qish rejimida (reader-mode) pastki navigatsiya va sarlavha yashiriladi,
       kitob o'qish maydoni butun ekranni egallaydi */
    body.reader-mode .bottom-nav{ display:none; }
    body.reader-mode .app{ padding-bottom: 16px; }
    .row{ flex-direction: column; gap: 12px; }
    .row > .field{ flex: 1 1 auto; }
    button.glow-btn{ width: 100%; }
    button.ghost-btn{ width: 100%; }
    .profile-card{ max-width: 100%; }
    .profile-grid{ grid-template-columns: 1fr; }
    .profile-hero-avatar{ width:64px; height:64px; font-size:22px; }
    .profile-hero{ gap:14px; }
  }

/* ===== MATHLVL 2026 CLEAN MATH-ONLY UI OVERRIDES ===== */
:root{ --panel-solid:#0b1024; --panel:rgba(14,20,43,.82); --border:rgba(104,126,255,.20); --blue:#6f7cff; --blue-soft:rgba(111,124,255,.14); --gold:#a98cff; --gold-soft:rgba(169,140,255,.12); --radius:14px; }
body{ background:radial-gradient(circle at 70% -20%,rgba(111,124,255,.13),transparent 35%),linear-gradient(180deg,#070a16,#090d1d 55%,#070a16); }
.stars{opacity:.42}.floaters{opacity:.38}
@media (min-width:900px){
 .app-sidebar{width:238px;padding:22px 14px;background:linear-gradient(180deg,#0b1024,#080c1c);border-right-color:rgba(130,145,255,.13)}
 .app-sidebar .sidebar-logo{padding:4px 10px 24px;gap:10px}.app-sidebar .sidebar-logo img{width:29px;height:29px;object-fit:contain}.app-sidebar .sidebar-logo span{font-size:18px;letter-spacing:.04em}
 .sidebar-nav-item{padding:11px 13px;border-radius:9px;font-size:13px}.sidebar-nav-item.active{background:linear-gradient(90deg,rgba(111,124,255,.18),rgba(111,124,255,.07));color:#aeb7ff;box-shadow:inset 2px 0 #7884ff}
 .sidebar-plus-card{border-color:rgba(132,115,255,.25);background:linear-gradient(145deg,rgba(111,124,255,.13),rgba(169,140,255,.05))}.sidebar-plus-card .spc-title{color:#b9b3ff}.sidebar-plus-card .spc-btn{background:linear-gradient(90deg,#6f7cff,#9478ff);color:white;border-radius:9px}
 .app{max-width:none;width:100%;padding:38px 44px 70px}.panel{margin-top:0;max-width:1180px;margin-left:auto;margin-right:auto}
}
.glass-card,.dash-quick-card,.mt-card{background:linear-gradient(145deg,rgba(16,22,48,.88),rgba(11,16,35,.86));border-color:rgba(111,124,255,.16);box-shadow:0 18px 60px rgba(0,0,0,.16)}
.dash-title,.sec-title{letter-spacing:-.025em}.dash-title{font-size:30px}.sec-title{font-family:var(--font-display)}
.dash-quick-card:hover,.mt-card:hover{border-color:rgba(125,139,255,.5)}
.mt-filter-btn{border-radius:9px}.mt-filter-btn.active{background:#6f7cff;color:white}
.glow-btn{background:linear-gradient(90deg,#6f7cff,#8c75ff)!important;color:white!important;box-shadow:none!important}
.reader-body{background:#080c19}.reader-scroll{background:radial-gradient(circle at 50% 0,rgba(111,124,255,.06),transparent 38%),#080c19}.reader-page-item{border-radius:3px}
.ai-desktop-btn{background:linear-gradient(90deg,#6675ff,#8b76ff)!important;border-color:transparent!important;color:white!important}
@media(max-width:899px){.bottom-nav{display:flex}.bottom-nav-item{padding-left:3px;padding-right:3px;font-size:9.5px}.app{padding:20px 16px 92px}.panel{margin-top:10px}.glass-card{padding:18px}.dash-title{font-size:24px}}

/* MATHLVL v2 — modern desktop + mobile */
:root{--space-1:#030712;--space-2:#07101f;--panel:rgba(9,19,38,.78);--panel-solid:#081126;--border:rgba(105,145,255,.17);--blue:#4f7cff;--blue-soft:rgba(79,124,255,.16);--text:#f5f7ff;--text-dim:#909ab7}
body{background:radial-gradient(circle at 74% 12%,rgba(53,104,255,.10),transparent 25%),radial-gradient(circle at 15% 8%,rgba(35,92,200,.08),transparent 30%),linear-gradient(145deg,#020611 0%,#07101f 55%,#040711 100%)}
@media(min-width:900px){.app-sidebar{width:232px;background:linear-gradient(180deg,rgba(8,17,38,.98),rgba(5,11,27,.98));padding:22px 14px}.app{max-width:none;flex:1;padding:36px 48px 80px;min-width:0}.app-sidebar .sidebar-logo img{height:30px;width:30px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(63,124,255,.35))}.app-sidebar .sidebar-logo span{font-size:20px}}
.sidebar-nav-item{border-radius:9px!important;min-height:44px}.sidebar-nav-item.active{background:linear-gradient(90deg,rgba(57,91,220,.42),rgba(69,77,181,.18))!important;color:#dfe6ff!important;box-shadow:inset 3px 0 0 #6f83ff}
.dash-title{font-size:clamp(25px,3vw,34px);letter-spacing:-.04em}
.dash-home-hero{position:relative;min-height:210px;margin:4px 0 28px;border:1px solid var(--border);border-radius:18px;overflow:hidden;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;background:linear-gradient(120deg,rgba(9,19,39,.95),rgba(7,15,34,.78))}
.dash-home-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 42%,rgba(60,111,255,.19),transparent 28%);pointer-events:none}.hero-copy{padding:30px 34px;position:relative;z-index:2}.hero-eyebrow{font-size:11px;letter-spacing:.14em;color:#7997ff;font-weight:800;margin-bottom:9px}.hero-title{font-family:var(--font-display);font-size:clamp(21px,2.2vw,30px);line-height:1.18;margin:0 0 9px;letter-spacing:-.035em}.hero-sub{font-size:13px;color:var(--text-dim);max-width:470px;line-height:1.6;margin:0}.hero-book-wrap{height:210px;display:flex;align-items:center;justify-content:center;position:relative;z-index:2}.hero-book-glow{position:absolute;width:220px;height:90px;border-radius:50%;background:rgba(58,102,255,.22);filter:blur(34px);bottom:30px}.hero-book{width:220px;height:150px;filter:drop-shadow(0 28px 24px rgba(0,0,0,.45));animation:novaBookFloat 5s ease-in-out infinite}@keyframes novaBookFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}.hero-symbol{position:absolute;color:#6d87ff;border:1px solid rgba(93,124,255,.2);background:rgba(30,53,110,.16);border-radius:9px;padding:7px 9px;font-family:Georgia,serif}.hero-symbol.s1{right:12%;top:18%;font-size:22px}.hero-symbol.s2{right:4%;top:48%;font-size:18px}.hero-symbol.s3{right:31%;top:9%;font-size:18px}
.dash-quick-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.dash-quick-card{min-height:118px;border-radius:13px;padding:17px;background:linear-gradient(145deg,rgba(11,23,46,.9),rgba(8,16,34,.82));box-shadow:0 16px 44px rgba(0,0,0,.16)}.dash-quick-card:hover{transform:translateY(-3px);box-shadow:0 18px 45px rgba(0,0,0,.24)}.dqc-ic{width:38px!important;height:38px!important;border-radius:9px!important}.dqc-ic svg{width:21px;height:21px}.nova-svg-icon{width:18px;height:18px;display:block;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.sidebar-nav-item .ic{display:grid!important;place-items:center}.sidebar-nav-item .ic svg{width:17px;height:17px}
@media(max-width:899px){.app{padding:22px 16px 102px}.panel{margin-top:12px}.dash-welcome{margin:4px 2px 16px}.dash-title{font-size:25px}.dash-home-hero{grid-template-columns:1fr;min-height:245px;border-radius:16px;margin-bottom:20px}.hero-copy{padding:20px 20px 2px}.hero-title{font-size:21px}.hero-book-wrap{height:150px}.hero-book{width:172px;height:116px}.hero-symbol.s1{right:10%;top:45%;font-size:16px}.hero-symbol.s2{right:5%;top:70%;font-size:14px}.hero-symbol.s3{right:29%;top:42%;font-size:14px}.dash-quick-grid{grid-template-columns:1fr 1fr;gap:10px}.dash-quick-card{min-height:108px;padding:14px}.bottom-nav{display:flex!important;left:10px;right:10px;bottom:10px;border:1px solid rgba(120,145,255,.18);border-radius:18px;padding:7px 5px calc(7px + env(safe-area-inset-bottom,0px));background:rgba(7,15,32,.91);backdrop-filter:blur(18px);box-shadow:0 18px 50px rgba(0,0,0,.45)}.bottom-nav-item{border-radius:12px;padding:7px 4px;font-size:9.5px}.bottom-nav-item.active{background:rgba(79,124,255,.14);color:#8aa1ff}.glass-card{padding:18px;border-radius:15px}}
@media(max-width:420px){.app{padding-left:12px;padding-right:12px}.hero-copy{padding:18px 17px 0}}
@media(prefers-reduced-motion:reduce){.hero-book{animation:none}}


/* MATHLVL v3 — readability fixes */
.dash-quick-card,.dash-quick-card *{color:#f7f9ff!important}
.dash-quick-card .dqc-sub{color:#98a4c3!important}
.dash-quick-card .dqc-title{color:#f7f9ff!important;font-weight:700}
.dash-title,.dash-section-title,.section-title,.panel-title,.glass-card h2,.glass-card h3,.glass-card h4{color:#f7f9ff!important}
.dash-sub,.glass-card p,.glass-card .muted,.glass-card .sub,.glass-card small{color:#98a4c3!important}
.hero-title{color:#f7f9ff!important}.hero-sub{color:#a3aec8!important}.hero-eyebrow{color:#86a0ff!important}
.sidebar-nav-item{color:#aeb8d3!important}.sidebar-nav-item.active{color:#fff!important}
.sidebar-logo span{color:#fff!important}
.sidebar-plus-card,.sidebar-plus-card *{color:#f7f9ff!important}
.sidebar-plus-card p,.sidebar-plus-card .muted{color:#9aa6c5!important}
button,.btn,.pill,.card,.glass-card,.panel{color:inherit}


/* ===== MATHLVL v4 — Profile menu + Light/Dark mode ===== */
@media (min-width:900px){
  .dash-quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}

  .sidebar-profile-wrap{margin-top:auto;position:relative}
  .sidebar-profile-trigger{
    width:100%;min-height:56px;border:1px solid transparent;border-radius:12px;
    background:transparent;color:var(--text);padding:10px 10px;
    display:flex;align-items:center;gap:10px;text-align:left;
    transition:background .16s ease,border-color .16s ease;
  }
  .sidebar-profile-trigger:hover,.sidebar-profile-wrap.open .sidebar-profile-trigger{
    background:rgba(89,112,255,.08);border-color:rgba(111,132,255,.17)
  }
  .sidebar-profile-trigger .sidebar-footer-text{flex:1;min-width:0}
  .profile-chevron{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round;color:var(--text-dim);transition:transform .16s ease}
  .sidebar-profile-wrap.open .profile-chevron{transform:rotate(180deg)}

  .sidebar-profile-menu{
    position:absolute;left:0;right:0;bottom:66px;z-index:120;
    padding:8px;background:rgba(8,15,32,.97);
    border:1px solid rgba(111,132,255,.18);border-radius:14px;
    box-shadow:0 24px 60px rgba(0,0,0,.46);backdrop-filter:blur(18px)
  }
  .sidebar-profile-menu[hidden]{display:none}
  .sidebar-profile-action{
    width:100%;border:0;background:transparent;color:#c4cce2;
    display:flex;align-items:center;gap:10px;text-align:left;
    padding:10px 10px;border-radius:9px;cursor:pointer;
    font-family:var(--font-body);font-size:12.5px;font-weight:600;
    transition:background .14s ease,color .14s ease
  }
  .sidebar-profile-action:hover{background:rgba(111,124,255,.10);color:#fff}
  .sidebar-profile-action svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
  .sidebar-profile-action .theme-icon-sun{display:none}
  .sidebar-profile-action.danger{color:#ff7777}
  .sidebar-profile-action.danger:hover{background:rgba(255,80,80,.08);color:#ff9292}
  .sidebar-profile-divider{height:1px;background:var(--border-soft);margin:5px 4px}
}

/* Light theme tokens */
html[data-theme="light"]{
  color-scheme:light;
  --space-1:#f5f8fd;
  --space-2:#edf3fa;
  --space-3:#e8eff8;
  --panel:rgba(255,255,255,.88);
  --panel-solid:#ffffff;
  --border:rgba(31,57,104,.13);
  --border-soft:rgba(31,57,104,.08);
  --text:#14203a;
  --text-dim:#68758f;
  --blue:#4267e8;
  --blue-soft:rgba(66,103,232,.10);
  --gold:#d49a21;
}
html[data-theme="light"] body{
  background:
    radial-gradient(circle at 72% 11%,rgba(70,112,245,.08),transparent 25%),
    linear-gradient(145deg,#f8faff 0%,#edf3fa 55%,#f8faff 100%)!important;
  color:#14203a!important
}
html[data-theme="light"] .app-sidebar{
  background:linear-gradient(180deg,#fff,#f7f9fd)!important;
  border-right-color:rgba(31,57,104,.10)!important
}
html[data-theme="light"] .sidebar-logo span,
html[data-theme="light"] .dash-title,
html[data-theme="light"] .hero-title,
html[data-theme="light"] .sec-title,
html[data-theme="light"] .dash-quick-card .dqc-title{
  color:#14203a!important
}
html[data-theme="light"] .dash-sub,
html[data-theme="light"] .hero-sub,
html[data-theme="light"] .dash-quick-card .dqc-sub,
html[data-theme="light"] .sec-sub{
  color:#68758f!important
}
html[data-theme="light"] .sidebar-nav-item{color:#59657e!important}
html[data-theme="light"] .sidebar-nav-item:hover{background:rgba(66,103,232,.06)!important;color:#21365e!important}
html[data-theme="light"] .sidebar-nav-item.active{
  color:#3155d1!important;background:linear-gradient(90deg,rgba(66,103,232,.14),rgba(66,103,232,.05))!important
}
html[data-theme="light"] .glass-card,
html[data-theme="light"] .dash-quick-card,
html[data-theme="light"] .dash-home-hero,
html[data-theme="light"] .mt-card{
  background:rgba(255,255,255,.90)!important;
  border-color:rgba(31,57,104,.11)!important;
  box-shadow:0 16px 42px rgba(45,72,117,.08)!important
}
html[data-theme="light"] .dash-home-hero{
  background:linear-gradient(120deg,rgba(255,255,255,.96),rgba(244,248,255,.94))!important
}
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select{
  background:#f9fbff!important;border-color:rgba(31,57,104,.14)!important;color:#17233c!important
}
html[data-theme="light"] .sidebar-profile-menu{
  background:rgba(255,255,255,.98);border-color:rgba(31,57,104,.12);box-shadow:0 24px 60px rgba(45,72,117,.16)
}
html[data-theme="light"] .sidebar-profile-action{color:#58657e}
html[data-theme="light"] .sidebar-profile-action:hover{background:rgba(66,103,232,.08);color:#1d3567}
html[data-theme="light"] .sidebar-profile-action .theme-icon-moon{display:none}
html[data-theme="light"] .sidebar-profile-action .theme-icon-sun{display:block}
html[data-theme="light"] .sidebar-profile-trigger:hover,
html[data-theme="light"] .sidebar-profile-wrap.open .sidebar-profile-trigger{
  background:rgba(66,103,232,.07);border-color:rgba(66,103,232,.13)
}
html[data-theme="light"] .bottom-nav{
  background:rgba(255,255,255,.93)!important;border-color:rgba(31,57,104,.10)!important;
  box-shadow:0 18px 50px rgba(45,72,117,.14)!important
}
html[data-theme="light"] .bottom-nav-item{color:#68758f!important}
html[data-theme="light"] .bottom-nav-item.active{color:#365bd7!important;background:rgba(66,103,232,.09)!important}

@media(max-width:899px){
  .dash-quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:420px){
  .dash-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .dash-quick-card{padding:12px 9px!important;min-height:100px!important}
  .dash-quick-card .dqc-title{font-size:12px!important}
  .dash-quick-card .dqc-sub{font-size:10px!important}
}


/* ===== MATHLVL v5 — Help Center + Milliy sertifikat only ===== */
.nova-help-overlay{
  position:fixed; inset:0; z-index:5000;
  display:grid; place-items:center; padding:18px;
  background:rgba(2,6,15,.62); backdrop-filter:blur(10px);
}
.nova-help-overlay[hidden]{display:none}
.nova-help-modal{
  width:min(560px,100%); max-height:min(760px,88vh); overflow:hidden;
  border:1px solid rgba(117,135,255,.22); border-radius:18px;
  background:linear-gradient(180deg,rgba(10,18,38,.98),rgba(7,13,29,.99));
  box-shadow:0 30px 90px rgba(0,0,0,.48);
}
.nova-help-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:22px 24px 16px;border-bottom:1px solid rgba(255,255,255,.06)
}
.nova-help-head h2{margin:0;color:#f7f9ff;font-size:24px;letter-spacing:-.03em}
.nova-help-head p{margin:5px 0 0;color:#96a2c0;font-size:13px}
.nova-help-close{
  width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);color:#dfe5f8;font-size:22px;cursor:pointer
}
.nova-help-body{padding:16px;overflow:auto;max-height:calc(88vh - 82px)}
.nova-help-item{
  width:100%;display:grid;grid-template-columns:42px 1fr 18px;gap:12px;align-items:center;
  padding:13px 14px;margin-bottom:9px;border:1px solid rgba(255,255,255,.06);
  border-radius:13px;background:rgba(255,255,255,.035);color:#e9edfb;text-align:left;cursor:pointer;
  transition:.16s ease;
}
.nova-help-item:hover{transform:translateY(-1px);background:rgba(93,112,255,.08);border-color:rgba(110,127,255,.15)}
.nova-help-item b{display:block;font-size:13.5px;margin-bottom:3px}
.nova-help-item small{display:block;color:#8f9bb8;font-size:11.5px;line-height:1.4}
.help-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-weight:800}
.help-ic.purple{background:rgba(138,88,255,.18);color:#b99aff}
.help-ic.blue{background:rgba(63,135,255,.18);color:#79a8ff}
.help-ic.gold{background:rgba(235,166,50,.16);color:#ffc66d}
.help-ic.green{background:rgba(45,176,108,.16);color:#78dda8}
.help-ic.yellow{background:rgba(246,197,67,.15);color:#ffd765}
.help-arrow{color:#8591ad;font-size:24px}
.nova-help-report{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:14px;padding:15px;border-radius:14px;border:1px solid rgba(114,88,255,.28);
  background:linear-gradient(135deg,rgba(80,58,190,.18),rgba(42,50,120,.16))
}
.nova-help-report b{display:block;color:#f6f8ff;font-size:13px}
.nova-help-report span{display:block;color:#929eba;font-size:11.5px;margin-top:3px}
.nova-help-report button{
  flex:none;border:0;border-radius:10px;padding:10px 14px;background:linear-gradient(135deg,#6557ff,#8b54ff);
  color:white;font-weight:800;cursor:pointer
}
.nova-help-answer{padding:4px 2px 2px}
.nova-help-answer h3{font-size:20px;color:#f7f9ff;margin:10px 0 12px}
.nova-help-answer p,.nova-help-answer li{font-size:13px;line-height:1.65;color:#a5b0cb}
.nova-help-answer ul{padding-left:20px}
.nova-help-answer .plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.nova-help-answer .plan-card{padding:14px;border-radius:13px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.035)}
.nova-help-answer .plan-card h4{margin:0 0 6px;color:#fff}
.nova-help-answer .plan-card.plus{border-color:rgba(109,90,255,.25);background:linear-gradient(145deg,rgba(75,59,194,.14),rgba(43,52,124,.10))}
.nova-help-answer .price-line{font-size:11.5px;color:#8f9bb8;margin-top:6px}
.help-back{border:0;background:transparent;color:#8fa6ff;font-weight:700;cursor:pointer;padding:4px 0}
html[data-theme="light"] .nova-help-overlay{background:rgba(31,48,79,.24)}
html[data-theme="light"] .nova-help-modal{
  background:linear-gradient(180deg,#fff,#f8faff);border-color:rgba(31,57,104,.12);box-shadow:0 28px 80px rgba(43,70,110,.22)
}
html[data-theme="light"] .nova-help-head{border-bottom-color:rgba(31,57,104,.08)}
html[data-theme="light"] .nova-help-head h2,html[data-theme="light"] .nova-help-item b,html[data-theme="light"] .nova-help-answer h3{color:#14203a}
html[data-theme="light"] .nova-help-head p,html[data-theme="light"] .nova-help-item small,html[data-theme="light"] .nova-help-answer p,html[data-theme="light"] .nova-help-answer li{color:#68758f}
html[data-theme="light"] .nova-help-item{background:#fff;border-color:rgba(31,57,104,.09);color:#20304d;box-shadow:0 8px 20px rgba(45,72,117,.05)}
html[data-theme="light"] .nova-help-report{background:linear-gradient(135deg,rgba(92,74,224,.08),rgba(66,103,232,.06));border-color:rgba(92,74,224,.15)}
html[data-theme="light"] .nova-help-report b{color:#14203a}
html[data-theme="light"] .nova-help-answer .plan-card{background:#fff;border-color:rgba(31,57,104,.09)}
html[data-theme="light"] .nova-help-answer .plan-card h4{color:#14203a}
@media(max-width:640px){
  .nova-help-overlay{align-items:end;padding:0}
  .nova-help-modal{width:100%;max-height:92vh;border-radius:20px 20px 0 0}
  .nova-help-head{padding:18px 18px 14px}.nova-help-body{padding:12px 12px 18px}
  .nova-help-answer .plan-grid{grid-template-columns:1fr}
  .nova-help-report{align-items:flex-start;flex-direction:column}
  .nova-help-report button{width:100%}
}


/* MATHLVL v6 — guest/auth aware profile menu */
.sidebar-profile-action[hidden]{display:none!important}


/* MATHLVL chosen brand mark */
.app-sidebar .sidebar-logo .mathlvl-logo-image{
  width:30px;
  height:30px;
  flex:none;
  filter:drop-shadow(0 0 12px rgba(91,108,255,.32));
}


.app-sidebar .sidebar-logo .mathlvl-logo-image{
  width:32px !important;
  height:32px !important;
  object-fit:contain;
  flex:none;
  filter:drop-shadow(0 0 10px rgba(68,105,255,.24));
}
html[data-theme="light"] .app-sidebar .sidebar-logo .mathlvl-logo-image{
  filter:drop-shadow(0 3px 8px rgba(40,70,180,.18));
}


/* ===== MATHLVL v7 — 2026 professional product design ===== */
:root{
  --space-1:#090c12;
  --space-2:#0c1018;
  --space-3:#111722;
  --panel:rgba(17,22,32,.92);
  --panel-solid:#0e131c;
  --border:rgba(255,255,255,.085);
  --border-soft:rgba(255,255,255,.055);
  --blue:#7b8cff;
  --blue-soft:rgba(123,140,255,.12);
  --gold:#9da9ff;
  --gold-soft:rgba(157,169,255,.10);
  --text:#f4f6fb;
  --text-dim:#8f99aa;
  --green:#72d6a1;
  --red:#ff7b86;
  --radius:14px;
  --font-display:'Manrope',var(--font-body);
  --font-body:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
  --shadow-sm:0 8px 24px rgba(0,0,0,.18);
  --shadow-md:0 18px 54px rgba(0,0,0,.26);
}
html{color-scheme:dark}
body{
  background:
    radial-gradient(900px 500px at 72% -15%,rgba(123,140,255,.10),transparent 62%),
    linear-gradient(180deg,#090c12 0%,#0b0f16 48%,#090c12 100%) !important;
  color:var(--text);
  letter-spacing:-.008em;
}
.stars,.floaters{display:none!important}
*{scrollbar-color:#293142 transparent;scrollbar-width:thin}
::selection{background:rgba(123,140,255,.28);color:#fff}

.app{position:relative;z-index:2}
.panel{animation:none!important}
.sec-title,.dash-title,.hero-title,.book-card .b-title,.mt-card-title{
  font-family:var(--font-display)!important;
}
.dash-title,.sec-title{color:var(--text)!important}
.dash-title{
  font-size:clamp(27px,3vw,36px)!important;
  line-height:1.12;
  font-weight:750!important;
  letter-spacing:-.045em!important;
}
.dash-sub,.sec-sub{
  color:var(--text-dim)!important;
  line-height:1.55;
}
.sec-title{
  font-size:clamp(23px,2.5vw,30px)!important;
  font-weight:740!important;
  letter-spacing:-.035em!important;
}
.dash-welcome{margin:0 0 22px!important}

@media(min-width:900px){
  .app-shell{min-height:100vh}
  .app-sidebar{
    width:252px!important;
    min-height:100vh;
    padding:22px 15px 18px!important;
    background:rgba(11,15,22,.97)!important;
    border-right:1px solid var(--border)!important;
    box-shadow:none!important;
  }
  .app-sidebar .sidebar-logo{
    padding:4px 11px 24px!important;
    gap:10px!important;
  }
  .app-sidebar .sidebar-logo img{
    width:28px!important;height:28px!important;
    filter:none!important;
  }
  .app-sidebar .sidebar-logo span{
    font-family:var(--font-display)!important;
    font-size:18px!important;
    font-weight:800!important;
    letter-spacing:-.025em!important;
  }
  .sidebar-nav-item{
    min-height:44px!important;
    padding:10px 12px!important;
    margin-bottom:3px!important;
    border-radius:10px!important;
    color:#9aa4b6!important;
    font-size:13px!important;
    font-weight:650!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .sidebar-nav-item:hover{
    color:#eef1f7!important;
    background:rgba(255,255,255,.045)!important;
  }
  .sidebar-nav-item.active{
    color:#f7f8fb!important;
    background:#171d29!important;
    box-shadow:inset 2px 0 0 var(--blue)!important;
  }
  .sidebar-nav-item .ic{color:#aab4c7!important}
  .sidebar-nav-item.active .ic{color:#aeb8ff!important}

  .sidebar-profile-wrap{margin-top:auto!important}
  .sidebar-profile-trigger{
    min-height:60px!important;
    border:1px solid transparent!important;
    border-radius:12px!important;
    padding:9px 10px!important;
  }
  .sidebar-profile-trigger:hover,.sidebar-profile-wrap.open .sidebar-profile-trigger{
    background:#151b25!important;
    border-color:var(--border)!important;
  }
  .sidebar-footer-avatar{
    width:36px!important;height:36px!important;
    background:#202737!important;
    color:#dce2ef!important;
    border:1px solid rgba(255,255,255,.08);
  }
  .sidebar-footer-text .sft-name{
    font-size:12.5px!important;
    color:#eef1f7!important;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .sidebar-footer-text .sft-plan{font-size:10.5px!important}
  .sidebar-profile-menu{
    bottom:69px!important;
    padding:7px!important;
    border-radius:12px!important;
    background:#111720!important;
    border:1px solid var(--border)!important;
    box-shadow:0 20px 55px rgba(0,0,0,.42)!important;
    backdrop-filter:blur(20px);
  }
  .sidebar-profile-action{
    border-radius:8px!important;
    padding:10px!important;
    font-size:12.5px!important;
    color:#aeb7c6!important;
  }
  .sidebar-profile-action:hover{
    background:#1a202c!important;
    color:#fff!important;
  }

  .app{
    max-width:none!important;
    width:100%!important;
    min-width:0!important;
    padding:42px clamp(32px,4.2vw,68px) 84px!important;
  }
  .panel{
    max-width:1180px!important;
    margin:0 auto!important;
  }
}

.glass-card,.mt-card,.book-card,.dash-quick-card{
  background:var(--panel)!important;
  border:1px solid var(--border)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.glass-card{border-radius:var(--radius)!important}
.glass-card:hover{border-color:rgba(255,255,255,.11)!important}

/* Home hero: restrained product presentation */
.dash-home-hero{
  min-height:270px!important;
  margin:0 0 28px!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr)!important;
  gap:28px!important;
  align-items:center!important;
  overflow:hidden!important;
  border:1px solid var(--border)!important;
  border-radius:18px!important;
  background:
    linear-gradient(135deg,rgba(20,25,36,.98),rgba(14,19,28,.96))!important;
  box-shadow:none!important;
}
.dash-home-hero:before{
  content:""!important;
  position:absolute!important;
  inset:auto -120px -180px auto!important;
  width:430px!important;height:430px!important;
  border-radius:50%!important;
  background:radial-gradient(circle,rgba(123,140,255,.12),transparent 68%)!important;
  pointer-events:none!important;
}
.hero-copy{
  padding:36px 0 36px 38px!important;
  position:relative;z-index:2;
}
.hero-eyebrow{
  margin-bottom:13px!important;
  color:#909cff!important;
  font-size:10px!important;
  font-weight:800!important;
  letter-spacing:.16em!important;
}
.hero-title{
  max-width:580px;
  margin:0 0 13px!important;
  color:#f7f8fb!important;
  font-size:clamp(28px,3.4vw,44px)!important;
  line-height:1.04!important;
  font-weight:780!important;
  letter-spacing:-.055em!important;
}
.hero-sub{
  max-width:570px!important;
  margin:0!important;
  color:#9da6b6!important;
  font-size:14px!important;
  line-height:1.68!important;
}
.hero-trust-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:25px;
}
.hero-trust-row span{
  padding:7px 10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:rgba(255,255,255,.025);
  color:#aab3c2;
  font-size:11px;
  font-weight:650;
}
.hero-product-preview{
  position:relative;
  z-index:2;
  margin:22px 24px 22px 0;
  padding:12px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  background:#0c1119;
  box-shadow:0 24px 70px rgba(0,0,0,.30);
}
.hpp-top{
  height:38px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 8px 10px;
  color:#7f8999;
  font-size:10.5px;
  border-bottom:1px solid var(--border-soft);
}
.hpp-status-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 4px rgba(114,214,161,.08);
}
.hpp-status{
  margin-left:auto;
  color:#6f7a8d;
  font-family:var(--font-mono);
  font-size:9px;
}
.hpp-metric{
  display:grid;
  grid-template-columns:34px 1fr 20px;
  align-items:center;
  gap:11px;
  min-height:63px;
  padding:10px 8px;
  border-bottom:1px solid var(--border-soft);
}
.hpp-metric:last-child{border-bottom:0}
.hpp-icon{
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:9px;
  color:#aab5ff;
  background:rgba(123,140,255,.09);
  border:1px solid rgba(123,140,255,.12);
}
.hpp-icon svg{width:17px;height:17px}
.hpp-metric b{
  display:block;
  color:#edf0f6;
  font-size:12px;
  font-weight:680;
  margin-bottom:3px;
}
.hpp-metric small{
  display:block;
  color:#747f91!important;
  font-size:10.5px;
}
.hpp-arrow{
  color:#596476;
  font-size:13px;
}

/* Continue + quick access */
.dash-continue-card{
  padding:15px 16px!important;
  margin-bottom:25px!important;
  background:#101620!important;
}
.dash-continue-cover{
  width:48px!important;height:64px!important;
  border-radius:7px!important;
  box-shadow:0 8px 22px rgba(0,0,0,.26);
}
.dash-continue-title{font-size:14px!important}
.dash-continue-meta{font-size:10.5px!important;color:#7f8999!important}
.dash-continue-progress{
  height:4px!important;
  max-width:290px!important;
  background:#202735!important;
}
.dash-continue-progress-fill{
  background:var(--blue)!important;
  border-radius:999px!important;
}
.dash-quick-title{
  margin:0 0 10px!important;
  color:#8d97a8!important;
  font-size:11px!important;
  font-weight:750!important;
  letter-spacing:.08em!important;
  text-transform:uppercase;
}
.dash-quick-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  margin-bottom:36px!important;
}
.dash-quick-card{
  min-height:112px!important;
  padding:16px!important;
  border-radius:12px!important;
  gap:9px!important;
  background:#101620!important;
  transition:background .16s ease,border-color .16s ease,transform .16s ease!important;
}
.dash-quick-card:hover{
  transform:translateY(-2px)!important;
  background:#131a25!important;
  border-color:rgba(123,140,255,.26)!important;
}
.dqc-ic{
  width:34px!important;height:34px!important;
  border-radius:8px!important;
  background:rgba(123,140,255,.09)!important;
  color:#a9b3ff!important;
}
.dqc-ic svg{width:18px!important;height:18px!important}
.dqc-title{
  color:#f1f3f8!important;
  font-size:13.5px!important;
  font-weight:700!important;
}
.dqc-sub{
  color:#7f8999!important;
  font-size:10.5px!important;
  line-height:1.4;
}

/* Forms */
label{
  color:#808b9d!important;
  font-size:10.5px!important;
  font-weight:750!important;
  letter-spacing:.08em!important;
}
textarea,input[type=text],input[type=number],select{
  background:#0d131c!important;
  border:1px solid var(--border)!important;
  border-radius:10px!important;
  color:#eef1f6!important;
  font-family:var(--font-body)!important;
  font-size:13.5px!important;
  padding:13px 14px!important;
  box-shadow:none!important;
}
textarea::placeholder,input::placeholder{color:#596476!important}
textarea:focus,input:focus,select:focus{
  outline:none!important;
  border-color:rgba(123,140,255,.58)!important;
  box-shadow:0 0 0 3px rgba(123,140,255,.10)!important;
}
.file-drop{
  border:1px dashed rgba(255,255,255,.13)!important;
  border-radius:10px!important;
  background:#0c121b!important;
  color:#7f8999!important;
  padding:18px!important;
}
.file-drop:hover{border-color:rgba(123,140,255,.34)!important}

button.glow-btn,.ai-desktop-btn{
  border-radius:10px!important;
  border:1px solid transparent!important;
  background:#7586ff!important;
  color:#fff!important;
  font-family:var(--font-body)!important;
  font-weight:720!important;
  font-size:13px!important;
  padding:11px 17px!important;
  box-shadow:none!important;
  transition:background .15s ease,transform .12s ease,border-color .15s ease!important;
}
button.glow-btn:hover,.ai-desktop-btn:hover{
  background:#8695ff!important;
  transform:translateY(-1px)!important;
  box-shadow:none!important;
}
button.glow-btn:active,.ai-desktop-btn:active{transform:translateY(0)!important}
button.ghost-btn{
  border-radius:10px!important;
  border:1px solid var(--border)!important;
  background:#101620!important;
  color:#cdd3de!important;
  font-weight:650!important;
  font-size:12.5px!important;
  padding:10px 14px!important;
}
button.ghost-btn:hover{
  background:#151c27!important;
  border-color:rgba(255,255,255,.13)!important;
  color:#fff!important;
}
.icon-btn{
  width:38px!important;height:38px!important;
  border-radius:10px!important;
  background:#111823!important;
  border:1px solid var(--border)!important;
  color:#cbd2dd!important;
}
.icon-btn.send-btn{
  background:#7586ff!important;
  border-color:#7586ff!important;
  color:#fff!important;
}
.chip-btn,.mt-filter-btn,.plan-toggle-btn{
  border-radius:9px!important;
  background:#111721!important;
  border:1px solid var(--border)!important;
  color:#9aa4b5!important;
  box-shadow:none!important;
}
.chip-btn:hover,.mt-filter-btn:hover,.plan-toggle-btn:hover{
  background:#161d28!important;
  border-color:rgba(123,140,255,.26)!important;
  color:#e7eaf0!important;
}
.mt-filter-btn.active,.plan-toggle-btn.active{
  background:#20283a!important;
  border-color:rgba(123,140,255,.30)!important;
  color:#dfe4ff!important;
}

/* Solve/result */
.dash-solve-section .glass-card{padding:22px!important;background:#101620!important}
.result{border-top:1px solid var(--border-soft)!important}
.result h3{color:#e9edf6!important}
.step-num{
  border:1px solid rgba(123,140,255,.28)!important;
  color:#b7c0ff!important;
  background:#171e2a!important;
}
.final-answer{
  border:1px solid rgba(123,140,255,.24)!important;
  background:#111824!important;
}

/* AI chat */
#panel-teacher>.glass-card{padding:20px!important}
.chat-window{
  gap:11px!important;
  max-height:500px!important;
  padding:5px 2px 12px!important;
}
.msg{max-width:86%!important}
.bubble{
  border-radius:12px!important;
  padding:11px 13px!important;
  background:#121925!important;
  border:1px solid var(--border-soft)!important;
  color:#e8ebf1!important;
  font-size:13.5px!important;
  line-height:1.62!important;
}
.msg.user .bubble{
  background:#1a2234!important;
  border-color:rgba(123,140,255,.16)!important;
}
.msg.teacher .bubble{
  background:#111822!important;
  border-color:var(--border-soft)!important;
}
.quick-prompts{gap:7px!important}
.chat-input-wrap{
  margin-top:14px!important;
  padding:9px!important;
  border:1px solid var(--border)!important;
  border-radius:13px!important;
  background:#0d131c!important;
}
.chat-input-wrap textarea{
  border:0!important;
  background:transparent!important;
  min-height:46px!important;
  padding:8px 9px!important;
  box-shadow:none!important;
}
.chat-input-actions{margin-top:4px!important}

/* Library */
#book-search{margin-bottom:12px!important}
.book-grid{
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr))!important;
  gap:12px!important;
  margin-top:14px!important;
}
.book-card{
  padding:10px!important;
  border-radius:12px!important;
  background:#101620!important;
}
.book-card:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(123,140,255,.28)!important;
  box-shadow:none!important;
}
.book-card img{
  border-radius:8px!important;
  margin-bottom:11px!important;
  box-shadow:0 12px 30px rgba(0,0,0,.22);
}
.book-card .b-title{
  color:#edf0f6!important;
  font-size:14px!important;
  line-height:1.35!important;
  font-weight:700!important;
}
.book-card .b-author{
  color:#7e899b!important;
  font-family:var(--font-body)!important;
  font-size:10.5px!important;
}

/* Mock tests */
.mocktest-header-row{margin-bottom:20px!important}
.mocktest-list{gap:10px!important}
.mt-card{
  border-radius:12px!important;
  padding:15px 16px!important;
  background:#101620!important;
}
.mt-card-icon{
  width:38px!important;height:38px!important;
  border-radius:9px!important;
  background:rgba(123,140,255,.09)!important;
  color:#aab5ff!important;
  font-family:Georgia,serif;
  font-size:17px!important;
}
.mt-card-title{font-size:13.5px!important;color:#eef1f6!important}
.mt-card-meta{
  color:#7f8999!important;
  font-family:var(--font-body)!important;
  font-size:10.5px!important;
}
.mt-card-result{font-size:10.5px!important;color:#707b8e!important}
#mock-question-text{color:#eef1f6!important}
#mock-clock{color:#aab5ff!important}
.result-kicker,.modal-kicker{
  display:inline-flex;
  align-items:center;
  min-height:25px;
  padding:5px 8px;
  border:1px solid rgba(123,140,255,.18);
  border-radius:7px;
  background:rgba(123,140,255,.08);
  color:#aeb8ff;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  margin-bottom:12px;
}

/* Profile + plans */
.profile-hero{
  gap:15px!important;
  margin-bottom:18px!important;
}
.profile-hero-avatar{
  width:66px!important;height:66px!important;
  border-radius:16px!important;
  background:#1a2230!important;
  border:1px solid var(--border)!important;
  color:#dfe5ef!important;
}
.profile-hero-avatar img{border-radius:16px!important}
.profile-hero-name-row span:first-child{
  font-size:19px!important;
  letter-spacing:-.025em!important;
}
.plan-badge{
  border-radius:7px!important;
  font-size:9px!important;
  letter-spacing:.06em!important;
}
.profile-grid{gap:12px!important}
.profile-section-card{background:#101620!important}
.profile-section-card h3{
  margin-top:0!important;
  font-size:14px!important;
  color:#e9edf4!important;
}
.oauth-btn{
  border-radius:10px!important;
  background:#111721!important;
  border-color:var(--border)!important;
}
.oauth-btn:hover{
  background:#161d28!important;
  border-color:rgba(123,140,255,.28)!important;
}
.fullscreen-overlay{
  background:rgba(4,7,11,.72)!important;
  backdrop-filter:blur(12px)!important;
}
.fullscreen-overlay-inner{
  border-radius:16px!important;
}
.plan-card{background:#101620!important}
.plan-price{letter-spacing:-.035em!important}

/* Reader */
.reader-header{margin-bottom:12px!important}
.reader-body{
  border:1px solid var(--border)!important;
  border-radius:12px!important;
  background:#080c12!important;
}
.reader-scroll{background:#080c12!important}
.reader-page-item{box-shadow:0 14px 42px rgba(0,0,0,.34)!important}
.reader-menu-popover,.reader-page-popover,.annotation-clear-confirm{
  background:#111720!important;
  border:1px solid var(--border)!important;
  border-radius:12px!important;
  box-shadow:var(--shadow-md)!important;
}
.reader-menu-item:hover{background:#171e29!important}
.annotation-toolbar{
  border-radius:12px!important;
  background:#111720!important;
  border-color:var(--border)!important;
}

/* Help */
.nova-help-overlay{background:rgba(4,7,11,.72)!important}
.nova-help-modal{
  border-radius:16px!important;
  background:#111720!important;
  border:1px solid var(--border)!important;
  box-shadow:0 28px 84px rgba(0,0,0,.42)!important;
}
.nova-help-head{border-bottom-color:var(--border-soft)!important}
.nova-help-item{
  border-radius:10px!important;
  background:#141b26!important;
  border-color:var(--border-soft)!important;
}
.nova-help-item:hover{
  transform:none!important;
  background:#18202c!important;
  border-color:rgba(123,140,255,.18)!important;
}
.help-ic{
  border-radius:9px!important;
  background:#1b2230!important;
  color:#aeb8ff!important;
}
.nova-help-report{
  border-radius:11px!important;
  background:#141b26!important;
  border-color:var(--border)!important;
}
.nova-help-report button{
  border-radius:9px!important;
  background:#7586ff!important;
}


.nova-help-report strong{color:#c7ceff;font-weight:700}
.nova-help-report button{
  white-space:nowrap;
  min-width:126px;
}
html[data-theme="light"] .nova-help-report strong{color:#5667d9}

/* Mobile */
@media(max-width:899px){
  .app{padding:24px 15px 104px!important}
  .panel{margin-top:7px!important}
  .dash-welcome{margin:0 2px 16px!important}
  .dash-title{font-size:27px!important}

  .dash-home-hero{
    min-height:0!important;
    grid-template-columns:1fr!important;
    gap:0!important;
    border-radius:15px!important;
    margin-bottom:20px!important;
  }
  .hero-copy{padding:24px 21px 18px!important}
  .hero-title{font-size:30px!important}
  .hero-sub{font-size:13px!important}
  .hero-trust-row{margin-top:18px!important}
  .hero-product-preview{
    margin:0 14px 14px!important;
  }

  .dash-quick-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    margin-bottom:28px!important;
  }
  .dash-quick-card{
    min-height:104px!important;
    padding:12px 10px!important;
  }
  .dqc-title{font-size:11.5px!important}
  .dqc-sub{font-size:9.5px!important}
  .dqc-ic{width:31px!important;height:31px!important}

  .glass-card{padding:16px!important}
  .bottom-nav{
    display:flex!important;
    left:10px!important;right:10px!important;bottom:10px!important;
    padding:7px 5px calc(7px + env(safe-area-inset-bottom,0px))!important;
    border:1px solid var(--border)!important;
    border-radius:16px!important;
    background:rgba(14,19,28,.93)!important;
    backdrop-filter:blur(18px)!important;
    box-shadow:0 16px 44px rgba(0,0,0,.35)!important;
  }
  .bottom-nav-item{
    min-height:50px;
    border-radius:10px!important;
    color:#7f8999!important;
    font-size:9px!important;
  }
  .bottom-nav-item.active{
    color:#c2c9ff!important;
    background:#1a2130!important;
  }
  .bottom-nav-item svg{width:19px!important;height:19px!important}

  .book-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .mt-card{gap:11px!important}
  .mt-card-start{width:100%!important}
  .profile-hero-avatar{width:58px!important;height:58px!important;border-radius:14px!important}
  .profile-hero-avatar img{border-radius:14px!important}
}

@media(max-width:430px){
  .hero-title{font-size:27px!important}
  .hero-product-preview{padding:9px!important}
  .hpp-metric{min-height:58px!important}
  .hero-trust-row span{font-size:10px!important;padding:6px 8px!important}
  .dash-quick-card{min-height:98px!important}
}

/* Light mode: same restraint, no toy-like gradients */
html[data-theme="light"]{
  color-scheme:light;
  --space-1:#f5f7fa;
  --space-2:#f1f4f8;
  --space-3:#e9edf3;
  --panel:#ffffff;
  --panel-solid:#ffffff;
  --border:rgba(20,32,54,.10);
  --border-soft:rgba(20,32,54,.065);
  --blue:#5f70e8;
  --blue-soft:rgba(95,112,232,.10);
  --gold:#6677e8;
  --gold-soft:rgba(102,119,232,.09);
  --text:#151b26;
  --text-dim:#6f7989;
}
html[data-theme="light"] body{
  background:#f5f7fa!important;
  color:#151b26!important;
}
html[data-theme="light"] .app-sidebar{
  background:#fff!important;
  border-right-color:rgba(20,32,54,.09)!important;
}
html[data-theme="light"] .sidebar-nav-item{color:#667184!important}
html[data-theme="light"] .sidebar-nav-item:hover{background:#f5f7fa!important;color:#202938!important}
html[data-theme="light"] .sidebar-nav-item.active{
  background:#eef1f8!important;
  color:#263043!important;
  box-shadow:inset 2px 0 0 #6677e8!important;
}
html[data-theme="light"] .sidebar-profile-trigger:hover,
html[data-theme="light"] .sidebar-profile-wrap.open .sidebar-profile-trigger{
  background:#f5f7fa!important;
}
html[data-theme="light"] .sidebar-profile-menu{
  background:#fff!important;
  box-shadow:0 20px 55px rgba(42,54,76,.14)!important;
}
html[data-theme="light"] .sidebar-profile-action:hover{background:#f3f5f9!important;color:#151b26!important}
html[data-theme="light"] .sidebar-footer-text .sft-name{color:#202735!important}

html[data-theme="light"] .glass-card,
html[data-theme="light"] .mt-card,
html[data-theme="light"] .book-card,
html[data-theme="light"] .dash-quick-card,
html[data-theme="light"] .profile-section-card,
html[data-theme="light"] .plan-card{
  background:#fff!important;
  border-color:rgba(20,32,54,.10)!important;
  box-shadow:none!important;
}
html[data-theme="light"] .dash-home-hero{
  background:#fff!important;
  border-color:rgba(20,32,54,.10)!important;
}
html[data-theme="light"] .hero-title,
html[data-theme="light"] .dash-title,
html[data-theme="light"] .sec-title,
html[data-theme="light"] .dqc-title,
html[data-theme="light"] .mt-card-title,
html[data-theme="light"] .book-card .b-title{
  color:#151b26!important;
}
html[data-theme="light"] .hero-sub,
html[data-theme="light"] .dash-sub,
html[data-theme="light"] .sec-sub,
html[data-theme="light"] .dqc-sub{
  color:#6f7989!important;
}
html[data-theme="light"] .hero-product-preview{
  background:#f7f8fb!important;
  border-color:rgba(20,32,54,.09)!important;
  box-shadow:0 20px 50px rgba(44,57,80,.08)!important;
}
html[data-theme="light"] .hpp-metric b{color:#202735!important}
html[data-theme="light"] .hpp-metric small{color:#788293!important}
html[data-theme="light"] .hpp-icon{background:#eef1ff!important;color:#5d6ee4!important}
html[data-theme="light"] .dash-quick-card:hover{background:#fafbfc!important}
html[data-theme="light"] textarea,
html[data-theme="light"] input[type=text],
html[data-theme="light"] input[type=number],
html[data-theme="light"] select,
html[data-theme="light"] .file-drop,
html[data-theme="light"] .chat-input-wrap{
  background:#fafbfc!important;
  color:#1d2532!important;
}
html[data-theme="light"] button.ghost-btn,
html[data-theme="light"] .chip-btn,
html[data-theme="light"] .mt-filter-btn,
html[data-theme="light"] .plan-toggle-btn,
html[data-theme="light"] .icon-btn{
  background:#f8f9fb!important;
  color:#4f5b6d!important;
}
html[data-theme="light"] button.ghost-btn:hover,
html[data-theme="light"] .chip-btn:hover,
html[data-theme="light"] .mt-filter-btn:hover{
  background:#f1f3f7!important;
  color:#1f2734!important;
}
html[data-theme="light"] .bubble{
  background:#f6f7fa!important;
  color:#253041!important;
  border-color:rgba(20,32,54,.08)!important;
}
html[data-theme="light"] .msg.user .bubble{background:#eef1ff!important}
html[data-theme="light"] .bottom-nav{
  background:rgba(255,255,255,.94)!important;
  border-color:rgba(20,32,54,.10)!important;
  box-shadow:0 14px 40px rgba(44,57,80,.14)!important;
}
html[data-theme="light"] .bottom-nav-item.active{
  background:#eef1f8!important;
  color:#5869dc!important;
}
html[data-theme="light"] .nova-help-modal,
html[data-theme="light"] .reader-menu-popover,
html[data-theme="light"] .reader-page-popover,
html[data-theme="light"] .annotation-clear-confirm{
  background:#fff!important;
}
html[data-theme="light"] .nova-help-item,
html[data-theme="light"] .nova-help-report{
  background:#f8f9fb!important;
  color:#263043!important;
}


/* ===== MATHLVL v9 — refined library, saved fallback: backup-books-design-a318ee5 ===== */
#book-list-section-outer{
  max-width:1180px;
  margin:0 auto;
}
.library-topbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin:0 0 18px;
}
.library-kicker{
  margin-bottom:7px;
  color:#6f91ff;
  font:800 10px/1 var(--font-body);
  letter-spacing:.15em;
}
.library-heading{
  margin:0;
  color:#f3f6fb;
  font:750 clamp(21px,2.3vw,28px)/1.14 var(--font-display);
  letter-spacing:-.04em;
}
.library-subheading{
  margin:7px 0 0;
  color:#778295;
  font-size:12.5px;
  line-height:1.5;
}
.library-count{
  flex:none;
  min-height:30px;
  display:inline-flex;
  align-items:center;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:8px;
  background:#10151d;
  color:#8994a7;
  font:650 11px/1 var(--font-body);
}
.library-search-shell{
  position:relative;
  display:flex;
  align-items:center;
  min-height:50px;
  margin:0 0 22px;
  border:1px solid rgba(255,255,255,.085);
  border-radius:13px;
  background:#0e131b;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.library-search-shell:focus-within{
  border-color:rgba(105,138,255,.50);
  background:#101620;
  box-shadow:0 0 0 3px rgba(91,121,255,.08);
}
.library-search-icon{
  width:18px;
  height:18px;
  flex:none;
  margin-left:15px;
  fill:none;
  stroke:#667287;
  stroke-width:1.8;
  stroke-linecap:round;
}
#book-search{
  flex:1;
  min-width:0;
  min-height:48px!important;
  margin:0!important;
  padding:0 42px 0 11px!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  color:#edf1f7!important;
  font-family:var(--font-body)!important;
  font-size:13px!important;
}
#book-search::placeholder{color:#556174!important}
.library-search-clear{
  position:absolute;
  right:9px;
  top:50%;
  width:31px;
  height:31px;
  transform:translateY(-50%);
  border:0;
  border-radius:8px;
  background:transparent;
  color:#748095;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
.library-search-clear:hover{background:#181f2a;color:#d8deea}

.book-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(225px,1fr))!important;
  gap:18px!important;
  margin-top:0!important;
  align-items:start!important;
}
.book-card{
  position:relative;
  min-width:0!important;
  padding:10px 10px 13px!important;
  border:1px solid rgba(255,255,255,.07)!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,#111720 0%,#0f151d 100%)!important;
  box-shadow:0 8px 28px rgba(0,0,0,.16)!important;
  overflow:hidden!important;
  cursor:pointer!important;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease!important;
}
.book-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(111,145,255,.035),transparent 44%);
}
.book-card:hover{
  transform:translateY(-3px)!important;
  border-color:rgba(102,138,255,.24)!important;
  background:linear-gradient(180deg,#141b25 0%,#101720 100%)!important;
  box-shadow:0 16px 38px rgba(0,0,0,.24)!important;
}
.book-card:active{transform:translateY(-1px)!important}
.book-card:focus-visible{
  outline:2px solid #718aff!important;
  outline-offset:3px!important;
}
.book-cover-shell{
  position:relative;
  width:100%;
  aspect-ratio:3 / 4;
  overflow:hidden;
  border-radius:11px;
  background:#171e29;
  border:1px solid rgba(255,255,255,.055);
  margin-bottom:12px;
}
.book-cover-shell::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}
.book-cover-image{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
  border-radius:0!important;
  margin:0!important;
  transform:scale(1.001);
  transition:transform .28s ease,filter .28s ease!important;
}
.book-card:hover .book-cover-image{
  transform:scale(1.018);
  filter:saturate(1.03) contrast(1.01);
}
.book-cover-placeholder{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  gap:8px;
  padding:20px;
  background:
    radial-gradient(circle at 80% 12%,rgba(106,145,255,.18),transparent 32%),
    linear-gradient(155deg,#172033,#101720);
  color:#fff;
}
.book-cover-placeholder span{
  color:#7692f6;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.16em;
}
.book-cover-placeholder strong{
  font:750 20px/1.08 var(--font-display);
  letter-spacing:-.04em;
}
.book-card-content{
  position:relative;
  z-index:1;
  padding:0 2px;
}
.book-card .b-title{
  margin:0 0 5px!important;
  color:#edf1f7!important;
  font:750 15.5px/1.34 var(--font-display)!important;
  letter-spacing:-.025em!important;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.book-meta-line{
  min-height:17px;
  margin-bottom:10px;
  overflow:hidden;
  color:#747f91;
  font-size:11.5px;
  font-weight:520;
  line-height:1.45;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.book-access-badge{
  width:max-content;
  max-width:100%;
  min-height:26px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  border-radius:8px;
  font-size:10.5px;
  line-height:1;
  font-weight:720;
  white-space:nowrap;
}
.book-access-dot{
  width:7px;
  height:7px;
  flex:none;
  border-radius:50%;
  background:currentColor;
}
.book-access-badge.free{
  color:#70dca0;
  background:rgba(65,181,116,.10);
  border:1px solid rgba(79,197,130,.12);
}
.book-access-badge.plus{
  color:#9bacff;
  background:rgba(96,119,230,.11);
  border:1px solid rgba(111,137,255,.13);
}
.book-access-badge.purchase{
  color:#e8bf77;
  background:rgba(194,145,64,.10);
  border:1px solid rgba(211,160,75,.12);
}
.book-access-badge.plus-purchase{
  color:#b6a1ec;
  background:rgba(138,107,205,.10);
  border:1px solid rgba(157,125,225,.12);
}
.empty-note{
  grid-column:1/-1;
  min-height:150px;
  display:grid;
  place-items:center;
  border:1px dashed rgba(255,255,255,.09);
  border-radius:14px;
  background:#0e131a;
  color:#6f7b8d!important;
  font-family:var(--font-body)!important;
  font-size:13px!important;
}

/* Light mode */
html[data-theme="light"] .library-kicker{color:#5368d9}
html[data-theme="light"] .library-heading{color:#172033}
html[data-theme="light"] .library-subheading{color:#6c7789}
html[data-theme="light"] .library-count{
  background:#fff;
  color:#667184;
  border-color:rgba(29,45,72,.09);
}
html[data-theme="light"] .library-search-shell{
  background:#fff;
  border-color:rgba(29,45,72,.11);
}
html[data-theme="light"] .library-search-shell:focus-within{
  background:#fff;
  border-color:rgba(83,104,217,.40);
  box-shadow:0 0 0 3px rgba(83,104,217,.08);
}
html[data-theme="light"] #book-search{color:#172033!important}
html[data-theme="light"] #book-search::placeholder{color:#98a1af!important}
html[data-theme="light"] .library-search-clear:hover{background:#f0f3f8;color:#273249}
html[data-theme="light"] .book-card{
  background:#fff!important;
  border-color:rgba(30,46,73,.09)!important;
  box-shadow:0 7px 22px rgba(41,55,79,.07)!important;
}
html[data-theme="light"] .book-card:hover{
  background:#fff!important;
  border-color:rgba(83,104,217,.20)!important;
  box-shadow:0 14px 32px rgba(41,55,79,.11)!important;
}
html[data-theme="light"] .book-cover-shell{
  background:#edf1f6;
  border-color:rgba(30,46,73,.07);
}
html[data-theme="light"] .book-card .b-title{color:#182133!important}
html[data-theme="light"] .book-meta-line{color:#737e8f}
html[data-theme="light"] .book-cover-placeholder{
  background:
    radial-gradient(circle at 80% 12%,rgba(83,104,217,.15),transparent 32%),
    linear-gradient(155deg,#eef2fa,#e7ecf4);
  color:#1d2738;
}
html[data-theme="light"] .empty-note{
  background:#fff;
  border-color:rgba(30,46,73,.10);
  color:#6e798a!important;
}

/* Responsive density */
@media(min-width:1200px){
  .book-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(max-width:899px){
  .library-topbar{
    align-items:flex-start;
    margin-bottom:14px;
  }
  .library-heading{font-size:22px}
  .library-subheading{font-size:11.5px}
  .library-count{font-size:10px}
  .library-search-shell{min-height:46px;margin-bottom:16px}
  #book-search{min-height:44px!important;font-size:12.5px!important}
  .book-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:11px!important;
  }
  .book-card{
    padding:8px 8px 11px!important;
    border-radius:14px!important;
  }
  .book-cover-shell{
    border-radius:9px!important;
    margin-bottom:10px!important;
  }
  .book-card .b-title{
    font-size:13.5px!important;
    line-height:1.3!important;
  }
  .book-meta-line{
    margin-bottom:8px;
    font-size:10px;
  }
  .book-access-badge{
    min-height:23px;
    padding:4px 7px;
    border-radius:7px;
    font-size:9.5px;
  }
  .book-access-dot{width:6px;height:6px}
}
@media(max-width:430px){
  .library-topbar{display:block}
  .library-count{
    width:max-content;
    margin-top:10px;
  }
  .book-grid{gap:9px!important}
}



/* ===== Ustoz AI -> MATHLVL library recommendations ===== */
.ai-book-recommendations{
  display:grid;
  gap:9px;
  margin-top:11px;
}
.ai-book-rec-label{
  color:#727e91;
  font-size:10px;
  font-weight:750;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.ai-book-rec-card{
  display:grid;
  grid-template-columns:52px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  padding:9px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:12px;
  background:#0d141d;
}
.ai-book-rec-cover{
  width:52px;
  height:68px;
  overflow:hidden;
  border-radius:7px;
  background:#18202c;
  border:1px solid rgba(255,255,255,.06);
}
.ai-book-rec-cover img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.ai-book-rec-fallback{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  padding:5px;
  color:#8798ff;
  font:800 8px/1.1 var(--font-body);
  text-align:center;
}
.ai-book-rec-info{min-width:0}
.ai-book-rec-title{
  overflow:hidden;
  color:#edf1f7;
  font-size:12.5px;
  font-weight:720;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ai-book-rec-meta{
  margin-top:4px;
  color:#748094;
  font-size:10.5px;
  line-height:1.35;
}
.ai-book-rec-proof{
  margin-top:5px;
  color:#72c99a;
  font-size:9.5px;
}
.ai-book-rec-open{
  min-height:34px!important;
  padding:8px 10px!important;
  border-radius:8px!important;
  white-space:nowrap;
  font-size:10.5px!important;
}
html[data-theme="light"] .ai-book-rec-card{
  background:#f8fafc;
  border-color:rgba(28,45,73,.09);
}
html[data-theme="light"] .ai-book-rec-title{color:#1a2435}
html[data-theme="light"] .ai-book-rec-cover{
  background:#eef2f7;
  border-color:rgba(28,45,73,.07);
}
@media(max-width:520px){
  .ai-book-rec-card{
    grid-template-columns:44px minmax(0,1fr);
  }
  .ai-book-rec-cover{width:44px;height:58px}
  .ai-book-rec-open{
    grid-column:1/-1;
    width:100%;
  }
}


/* ===== MATHLVL v10 — Ustoz AI responsive redesign ===== */
#panel-teacher.view-teacher{
  --ai-accent:#7c8cff;
  --ai-accent-2:#9aa7ff;
  --ai-surface:#0e141d;
  --ai-surface-2:#111923;
  --ai-line:rgba(255,255,255,.075);
  --ai-muted:#7d899b;
  overflow-x:clip;
}
#panel-teacher.view-teacher > .ai-page-heading{
  max-width:980px;
  margin:0 auto 18px;
}
.ai-page-heading{
  display:flex;
  align-items:center;
  gap:13px;
}
.ai-page-heading-icon{
  width:42px;
  height:42px;
  flex:none;
  display:grid;
  place-items:center;
  border:1px solid rgba(124,140,255,.18);
  border-radius:12px;
  background:rgba(124,140,255,.08);
  color:#aab5ff;
}
.ai-page-heading-icon svg{width:20px;height:20px}
.ai-page-heading-copy{min-width:0;flex:1}
.ai-page-heading-topline{
  margin-bottom:3px;
  color:#7d8cf0;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.14em;
}
#panel-teacher.view-teacher .ai-page-heading .sec-title{
  margin:0!important;
  color:#f3f6fb!important;
  font-size:28px!important;
  line-height:1.1!important;
  letter-spacing:-.04em!important;
}
#panel-teacher.view-teacher .ai-page-heading .sec-sub{
  margin:5px 0 0!important;
  color:#788497!important;
  font-size:12.5px!important;
  line-height:1.45!important;
}
.ai-library-status{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:32px;
  padding:0 10px;
  border:1px solid var(--ai-line);
  border-radius:9px;
  background:#0d131b;
  color:#8994a6;
  font-size:10.5px;
  font-weight:650;
}
.ai-library-status span{
  width:7px;height:7px;border-radius:50%;
  background:#62d694;
  box-shadow:0 0 0 4px rgba(98,214,148,.08);
}

#panel-teacher.view-teacher > .glass-card{
  max-width:980px!important;
  margin:0 auto!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
#panel-teacher.view-teacher .teacher-layout,
#panel-teacher.view-teacher .chat-col{
  width:100%;
  min-width:0;
  display:block;
}
#panel-teacher.view-teacher .chat-col{
  border:1px solid var(--ai-line);
  border-radius:18px;
  background:
    radial-gradient(700px 260px at 50% -120px,rgba(124,140,255,.07),transparent 70%),
    #0b1119;
  overflow:hidden;
  box-shadow:0 18px 54px rgba(0,0,0,.20);
}
#panel-teacher.view-teacher .chat-window{
  width:100%;
  min-width:0;
  min-height:420px;
  height:clamp(420px,calc(100vh - 350px),620px);
  max-height:none!important;
  display:flex;
  flex-direction:column;
  gap:22px!important;
  overflow-y:auto;
  overflow-x:hidden;
  padding:26px 28px 18px!important;
  scroll-padding-bottom:30px;
}
#panel-teacher.view-teacher .chat-window::-webkit-scrollbar{width:6px}
#panel-teacher.view-teacher .chat-window::-webkit-scrollbar-track{background:transparent}
#panel-teacher.view-teacher .chat-window::-webkit-scrollbar-thumb{
  background:#252f40;
  border-radius:10px;
}

#panel-teacher.view-teacher .msg{
  min-width:0;
  max-width:100%!important;
}
#panel-teacher.view-teacher .msg.user{
  width:auto;
  max-width:min(74%,720px)!important;
  align-self:flex-end;
  margin-left:auto;
}
#panel-teacher.view-teacher .msg.teacher{
  position:relative;
  width:min(100%,820px);
  max-width:820px!important;
  align-self:flex-start;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  padding-left:42px;
}
#panel-teacher.view-teacher .msg.teacher::before{
  content:"AI";
  position:absolute;
  left:0;
  top:1px;
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border:1px solid rgba(124,140,255,.20);
  border-radius:9px;
  background:#171f31;
  color:#aab5ff;
  font-size:8px;
  font-weight:850;
  letter-spacing:.04em;
}
#panel-teacher.view-teacher .bubble{
  min-width:0;
  max-width:100%;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#cbd3df!important;
  font-size:13.5px!important;
  line-height:1.7!important;
  white-space:normal!important;
  overflow-wrap:anywhere;
  word-break:normal;
}
#panel-teacher.view-teacher .bubble p{
  margin:0 0 12px;
}
#panel-teacher.view-teacher .bubble p:last-child{margin-bottom:0}
#panel-teacher.view-teacher .bubble ol,
#panel-teacher.view-teacher .bubble ul{
  margin:10px 0 12px;
  padding-left:21px;
}
#panel-teacher.view-teacher .bubble li{margin:7px 0}
#panel-teacher.view-teacher .bubble strong{color:#f0f3f8}
#panel-teacher.view-teacher .msg.user .bubble{
  padding:10px 13px!important;
  border:1px solid rgba(124,140,255,.15)!important;
  border-radius:13px!important;
  background:#171f30!important;
  color:#eef2f8!important;
  font-size:13px!important;
  line-height:1.5!important;
}
#panel-teacher.view-teacher .typing-dots span{
  background:#8e9cff!important;
}

#panel-teacher.view-teacher .quick-prompts{
  margin:0!important;
  padding:0 28px 16px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px!important;
}
#panel-teacher.view-teacher .chip-btn{
  min-height:40px;
  padding:9px 10px!important;
  border:1px solid var(--ai-line)!important;
  border-radius:10px!important;
  background:#0f161f!important;
  color:#8b96a8!important;
  font-size:10.5px!important;
  line-height:1.3;
  text-align:left;
  box-shadow:none!important;
}
#panel-teacher.view-teacher .chip-btn:hover{
  transform:none!important;
  border-color:rgba(124,140,255,.26)!important;
  background:#131b27!important;
  color:#dbe1eb!important;
}

#panel-teacher.view-teacher .chat-input-wrap{
  position:relative;
  margin:0 18px 18px!important;
  padding:8px 9px 8px 12px!important;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:8px;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:15px!important;
  background:#101720!important;
  box-shadow:0 10px 30px rgba(0,0,0,.18)!important;
}
#panel-teacher.view-teacher .chat-input-wrap:focus-within{
  border-color:rgba(124,140,255,.44)!important;
  box-shadow:0 0 0 3px rgba(124,140,255,.07),0 10px 30px rgba(0,0,0,.18)!important;
}
#panel-teacher.view-teacher .chat-input-wrap textarea{
  width:100%;
  min-width:0;
  min-height:42px!important;
  max-height:130px;
  margin:0!important;
  padding:10px 4px!important;
  resize:none!important;
  overflow-y:auto;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#eef2f8!important;
  font-size:12.5px!important;
  line-height:1.5!important;
}
#panel-teacher.view-teacher .chat-input-wrap textarea::placeholder{color:#5f6c80!important}
#panel-teacher.view-teacher .chat-input-actions{
  margin:0!important;
  display:flex;
  align-items:center;
  gap:6px;
}
#panel-teacher.view-teacher .chat-input-actions .icon-btn{
  width:35px!important;
  height:35px!important;
  border-radius:10px!important;
  background:#171f2a!important;
  border:1px solid rgba(255,255,255,.07)!important;
  color:#99a5b8!important;
}
#panel-teacher.view-teacher .chat-input-actions .icon-btn:hover{
  transform:none!important;
  background:#1c2532!important;
  color:#fff!important;
}
#panel-teacher.view-teacher .chat-input-actions .send-btn{
  background:#7c8cff!important;
  border-color:#7c8cff!important;
  color:#fff!important;
}
#panel-teacher.view-teacher .chat-input-actions .send-btn:hover{background:#8998ff!important}
#panel-teacher.view-teacher .chat-input-actions .send-btn.stop-state{
  background:#d2a75d!important;
  border-color:#d2a75d!important;
}
#panel-teacher.view-teacher #chat-image-preview{
  margin:-9px 22px 10px;
}
#panel-teacher.view-teacher #chat-status{
  margin:0 22px 10px;
  font-size:10.5px;
}

/* Book recommendations live below the assistant answer, never beside it */
#panel-teacher.view-teacher .ai-book-recommendations{
  width:100%;
  min-width:0;
  margin-top:16px!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px!important;
}
#panel-teacher.view-teacher .ai-book-rec-label{
  grid-column:1/-1;
  margin:0 0 1px;
  color:#68758a!important;
  font-size:9px!important;
  letter-spacing:.12em!important;
}
#panel-teacher.view-teacher .ai-book-rec-card{
  min-width:0;
  display:grid!important;
  grid-template-columns:46px minmax(0,1fr)!important;
  grid-template-rows:auto auto;
  align-items:center!important;
  gap:8px 10px!important;
  padding:9px!important;
  border:1px solid rgba(255,255,255,.07)!important;
  border-radius:11px!important;
  background:#0f161f!important;
}
#panel-teacher.view-teacher .ai-book-rec-cover{
  grid-row:1 / span 2;
  width:46px!important;
  height:61px!important;
  border-radius:7px!important;
}
#panel-teacher.view-teacher .ai-book-rec-info{
  grid-column:2;
  min-width:0!important;
}
#panel-teacher.view-teacher .ai-book-rec-title{
  color:#e8edf4!important;
  font-size:11.5px!important;
  line-height:1.35!important;
}
#panel-teacher.view-teacher .ai-book-rec-meta{
  margin-top:2px!important;
  color:#6f7c90!important;
  font-size:9.5px!important;
}
#panel-teacher.view-teacher .ai-book-rec-proof{
  margin-top:3px!important;
  color:#6ecb98!important;
  font-size:8.5px!important;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
#panel-teacher.view-teacher .ai-book-rec-open{
  grid-column:2!important;
  width:max-content!important;
  min-height:28px!important;
  padding:6px 8px!important;
  border-radius:7px!important;
  font-size:9px!important;
  justify-self:start;
}

/* Light mode */
html[data-theme="light"] #panel-teacher.view-teacher{
  --ai-surface:#fff;
  --ai-surface-2:#f7f9fc;
  --ai-line:rgba(26,43,70,.09);
  --ai-muted:#6f7b8d;
}
html[data-theme="light"] #panel-teacher.view-teacher .ai-page-heading .sec-title{color:#172033!important}
html[data-theme="light"] .ai-library-status{
  background:#fff;
  color:#687386;
  border-color:rgba(26,43,70,.09);
}
html[data-theme="light"] #panel-teacher.view-teacher .chat-col{
  background:#fff;
  border-color:rgba(26,43,70,.09);
  box-shadow:0 16px 44px rgba(42,57,83,.08);
}
html[data-theme="light"] #panel-teacher.view-teacher .msg.teacher::before{
  background:#eef1ff;
  color:#5d70dd;
  border-color:rgba(93,112,221,.12);
}
html[data-theme="light"] #panel-teacher.view-teacher .bubble{color:#435066!important}
html[data-theme="light"] #panel-teacher.view-teacher .bubble strong{color:#172033}
html[data-theme="light"] #panel-teacher.view-teacher .msg.user .bubble{
  background:#eef1ff!important;
  border-color:rgba(93,112,221,.12)!important;
  color:#25314a!important;
}
html[data-theme="light"] #panel-teacher.view-teacher .chip-btn{
  background:#f8fafc!important;
  color:#677386!important;
  border-color:rgba(26,43,70,.08)!important;
}
html[data-theme="light"] #panel-teacher.view-teacher .chat-input-wrap{
  background:#fff!important;
  border-color:rgba(26,43,70,.11)!important;
  box-shadow:0 9px 28px rgba(42,57,83,.08)!important;
}
html[data-theme="light"] #panel-teacher.view-teacher .chat-input-wrap textarea{color:#172033!important}
html[data-theme="light"] #panel-teacher.view-teacher .chat-input-actions .icon-btn{
  background:#f3f5f9!important;
  border-color:rgba(26,43,70,.08)!important;
  color:#5e6b7d!important;
}
html[data-theme="light"] #panel-teacher.view-teacher .ai-book-rec-card{
  background:#f8fafc!important;
  border-color:rgba(26,43,70,.08)!important;
}
html[data-theme="light"] #panel-teacher.view-teacher .ai-book-rec-title{color:#1f293a!important}

/* Tablet and phone */
@media(max-width:899px){
  #panel-teacher.view-teacher{
    margin-top:8px!important;
    width:100%;
    max-width:100%;
    overflow-x:clip;
  }
  #panel-teacher.view-teacher > .ai-page-heading{
    margin:0 0 13px;
    padding:0 1px;
  }
  .ai-page-heading{
    align-items:flex-start;
    gap:10px;
  }
  .ai-page-heading-icon{
    width:36px;
    height:36px;
    border-radius:10px;
  }
  .ai-page-heading-icon svg{width:17px;height:17px}
  #panel-teacher.view-teacher .ai-page-heading .sec-title{
    font-size:22px!important;
  }
  #panel-teacher.view-teacher .ai-page-heading .sec-sub{
    max-width:320px;
    font-size:10.5px!important;
    line-height:1.45!important;
  }
  .ai-page-heading-topline{font-size:8px}
  .ai-library-status{
    display:none;
  }
  #panel-teacher.view-teacher > .glass-card,
  #panel-teacher.view-teacher .teacher-layout,
  #panel-teacher.view-teacher .chat-col{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  #panel-teacher.view-teacher .chat-col{
    border-radius:14px;
  }
  #panel-teacher.view-teacher .chat-window{
    min-width:0!important;
    width:100%!important;
    min-height:360px;
    height:calc(100dvh - 315px);
    max-height:590px!important;
    padding:18px 13px 12px!important;
    gap:18px!important;
    overflow-x:hidden!important;
  }
  #panel-teacher.view-teacher .msg{
    min-width:0!important;
    max-width:100%!important;
  }
  #panel-teacher.view-teacher .msg.user{
    max-width:88%!important;
  }
  #panel-teacher.view-teacher .msg.teacher{
    width:100%!important;
    max-width:100%!important;
    padding-left:35px!important;
  }
  #panel-teacher.view-teacher .msg.teacher::before{
    width:26px;
    height:26px;
    border-radius:8px;
    font-size:7px;
  }
  #panel-teacher.view-teacher .bubble{
    max-width:100%!important;
    min-width:0!important;
    font-size:12px!important;
    line-height:1.65!important;
    overflow-wrap:anywhere!important;
  }
  #panel-teacher.view-teacher .msg.user .bubble{
    font-size:11.5px!important;
    padding:9px 11px!important;
  }
  #panel-teacher.view-teacher .quick-prompts{
    padding:0 13px 12px!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  #panel-teacher.view-teacher .chip-btn{
    min-width:0;
    min-height:36px;
    padding:8px!important;
    font-size:9.5px!important;
  }
  #panel-teacher.view-teacher .chat-input-wrap{
    width:auto!important;
    min-width:0!important;
    margin:0 10px 10px!important;
    padding:6px 7px 6px 10px!important;
    border-radius:13px!important;
    grid-template-columns:minmax(0,1fr) auto!important;
  }
  #panel-teacher.view-teacher .chat-input-wrap textarea{
    min-width:0!important;
    min-height:38px!important;
    padding:8px 2px!important;
    font-size:11.5px!important;
  }
  #panel-teacher.view-teacher .chat-input-actions{
    flex:none!important;
  }
  #panel-teacher.view-teacher .chat-input-actions .icon-btn{
    width:32px!important;
    height:32px!important;
    border-radius:9px!important;
  }
  #panel-teacher.view-teacher #chat-image-preview{
    margin:-4px 13px 8px!important;
  }
  #panel-teacher.view-teacher #chat-status{
    margin:0 13px 8px!important;
  }
  #panel-teacher.view-teacher .ai-book-recommendations{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    margin-top:12px!important;
  }
  #panel-teacher.view-teacher .ai-book-rec-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    grid-template-columns:42px minmax(0,1fr) auto!important;
    grid-template-rows:auto!important;
    gap:8px!important;
    padding:8px!important;
    box-sizing:border-box!important;
  }
  #panel-teacher.view-teacher .ai-book-rec-cover{
    grid-column:1!important;
    grid-row:1!important;
    width:42px!important;
    height:56px!important;
  }
  #panel-teacher.view-teacher .ai-book-rec-info{
    grid-column:2!important;
    grid-row:1!important;
    min-width:0!important;
  }
  #panel-teacher.view-teacher .ai-book-rec-open{
    grid-column:3!important;
    grid-row:1!important;
    min-width:0!important;
    width:auto!important;
    max-width:104px!important;
    white-space:normal!important;
    line-height:1.2!important;
    text-align:center;
  }
}
@media(max-width:520px){
  #panel-teacher.view-teacher .ai-book-rec-card{
    grid-template-columns:42px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
  }
  #panel-teacher.view-teacher .ai-book-rec-cover{
    grid-row:1 / span 2!important;
  }
  #panel-teacher.view-teacher .ai-book-rec-info{
    grid-column:2!important;
    grid-row:1!important;
  }
  #panel-teacher.view-teacher .ai-book-rec-open{
    grid-column:2!important;
    grid-row:2!important;
    width:max-content!important;
    max-width:100%!important;
    justify-self:start!important;
    white-space:nowrap!important;
  }
}
@media(max-width:360px){
  #panel-teacher.view-teacher .chat-window{
    padding-left:10px!important;
    padding-right:10px!important;
  }
  #panel-teacher.view-teacher .msg.teacher{
    padding-left:32px!important;
  }
  #panel-teacher.view-teacher .quick-prompts{
    grid-template-columns:1fr!important;
  }
}


/* ===== MATHLVL v11 — premium Ustoz AI workspace ===== */
#panel-teacher.view-teacher{
  --ai-v11-bg:#080c12;
  --ai-v11-surface:#0d1219;
  --ai-v11-surface-2:#111722;
  --ai-v11-surface-3:#151c28;
  --ai-v11-line:rgba(255,255,255,.075);
  --ai-v11-line-strong:rgba(255,255,255,.115);
  --ai-v11-text:#f4f6fa;
  --ai-v11-copy:#b2bccb;
  --ai-v11-muted:#6f7b8d;
  --ai-v11-violet:#8177ff;
  --ai-v11-blue:#5eb8ff;
  margin-top:24px!important;
  overflow:visible!important;
}
#panel-teacher.view-teacher::before{
  content:"";
  position:fixed;
  z-index:-1;
  width:760px;
  height:520px;
  left:calc(50% - 160px);
  top:90px;
  pointer-events:none;
  background:
    radial-gradient(circle at 42% 35%,rgba(106,93,255,.095),transparent 42%),
    radial-gradient(circle at 70% 50%,rgba(64,163,255,.055),transparent 44%);
  filter:blur(20px);
}

/* header */
#panel-teacher.view-teacher > .ai-page-heading{
  width:min(100%,1000px)!important;
  max-width:none!important;
  margin:0 auto 22px!important;
}
#panel-teacher.view-teacher .ai-page-heading{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:20px!important;
}
#panel-teacher.view-teacher .ai-header-brand{
  display:flex;
  align-items:center;
  min-width:0;
  gap:13px;
}
#panel-teacher.view-teacher .ai-page-heading-icon{
  width:44px!important;
  height:44px!important;
  border:1px solid rgba(129,119,255,.20)!important;
  border-radius:13px!important;
  background:
    linear-gradient(145deg,rgba(129,119,255,.16),rgba(94,184,255,.055))!important;
  color:#b9b4ff!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 10px 26px rgba(0,0,0,.18)!important;
}
#panel-teacher.view-teacher .ai-page-heading-icon svg{
  width:20px!important;height:20px!important;
}
#panel-teacher.view-teacher .ai-page-heading-topline{
  margin:0 0 4px!important;
  color:#7f8ba0!important;
  font-size:8.5px!important;
  font-weight:800!important;
  letter-spacing:.17em!important;
}
#panel-teacher.view-teacher .ai-page-heading .sec-title{
  margin:0!important;
  color:var(--ai-v11-text)!important;
  font:780 29px/1.05 var(--font-display)!important;
  letter-spacing:-.05em!important;
}
#panel-teacher.view-teacher .ai-page-heading .sec-sub{
  margin:6px 0 0!important;
  color:#758196!important;
  font-size:11.5px!important;
  line-height:1.45!important;
}
#panel-teacher.view-teacher .ai-library-status{
  flex:none!important;
  min-height:34px!important;
  padding:0 11px!important;
  gap:7px!important;
  border:1px solid var(--ai-v11-line)!important;
  border-radius:10px!important;
  background:rgba(13,18,25,.72)!important;
  color:#818da0!important;
  font-size:9.5px!important;
  backdrop-filter:blur(12px);
}
#panel-teacher.view-teacher .ai-library-status b{
  color:#aab4c4;
  font-weight:700;
}
#panel-teacher.view-teacher .ai-library-status em{
  color:#68d698;
  font-style:normal;
  font-weight:700;
}
#panel-teacher.view-teacher .ai-library-status span{
  width:6px!important;height:6px!important;
  background:#5ee095!important;
  box-shadow:0 0 0 4px rgba(94,224,149,.075)!important;
}

/* remove the old giant bordered card */
#panel-teacher.view-teacher > .glass-card{
  width:min(100%,1000px)!important;
  max-width:none!important;
  margin:0 auto!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
#panel-teacher.view-teacher .teacher-layout,
#panel-teacher.view-teacher .chat-col{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
}
#panel-teacher.view-teacher .chat-col{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  min-height:620px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  overflow:visible!important;
  box-shadow:none!important;
}

/* conversation canvas */
#panel-teacher.view-teacher .chat-window{
  width:100%!important;
  min-width:0!important;
  height:auto!important;
  min-height:500px!important;
  max-height:calc(100vh - 330px)!important;
  padding:14px 72px 34px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:28px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  background:transparent!important;
  scrollbar-gutter:stable;
}
#panel-teacher.view-teacher .chat-window::-webkit-scrollbar{width:5px!important}
#panel-teacher.view-teacher .chat-window::-webkit-scrollbar-thumb{
  border-radius:10px!important;
  background:#202938!important;
}

/* welcome */
#panel-teacher.view-teacher .ai-welcome{
  width:min(100%,720px);
  min-height:470px;
  margin:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  transition:opacity .18s ease,transform .18s ease;
}
#panel-teacher.view-teacher .ai-welcome.is-hidden{
  display:none!important;
}
#panel-teacher.view-teacher .ai-orb{
  position:relative;
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  margin-bottom:22px;
}
#panel-teacher.view-teacher .ai-orb::before{
  content:"";
  position:absolute;
  inset:-26px;
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(128,118,255,.16),rgba(91,157,255,.065) 36%,transparent 68%);
  filter:blur(8px);
  animation:aiOrbBreath 4.8s ease-in-out infinite;
}
#panel-teacher.view-teacher .ai-orb::after{
  content:"";
  position:absolute;
  inset:4px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:22px;
  transform:rotate(45deg);
  background:linear-gradient(145deg,rgba(129,119,255,.08),rgba(94,184,255,.025));
}
#panel-teacher.view-teacher .ai-orb-core{
  position:relative;
  z-index:2;
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border:1px solid rgba(141,132,255,.22);
  border-radius:17px;
  background:
    linear-gradient(145deg,#171c2d,#101620);
  color:#bbb5ff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 18px 50px rgba(0,0,0,.32);
}
#panel-teacher.view-teacher .ai-orb-core svg{width:24px;height:24px}
@keyframes aiOrbBreath{
  0%,100%{transform:scale(.94);opacity:.72}
  50%{transform:scale(1.07);opacity:1}
}
#panel-teacher.view-teacher .ai-welcome-kicker{
  margin-bottom:8px;
  color:#66738a;
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.19em;
}
#panel-teacher.view-teacher .ai-welcome h3{
  margin:0;
  color:#f4f6fb;
  font:780 clamp(30px,3vw,42px)/1.06 var(--font-display);
  letter-spacing:-.055em;
}
#panel-teacher.view-teacher .ai-welcome > p{
  max-width:570px;
  margin:13px auto 0;
  color:#778397;
  font-size:12.5px;
  line-height:1.65;
}
#panel-teacher.view-teacher .ai-prompt-grid{
  width:100%;
  margin:30px 0 0!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:9px!important;
}
#panel-teacher.view-teacher .ai-prompt-grid .chip-btn{
  position:relative;
  min-width:0;
  min-height:102px!important;
  display:grid!important;
  grid-template-columns:32px minmax(0,1fr) 18px;
  align-items:center;
  gap:10px;
  padding:13px!important;
  border:1px solid var(--ai-v11-line)!important;
  border-radius:13px!important;
  background:rgba(15,21,30,.76)!important;
  color:#8a96a8!important;
  text-align:left!important;
  box-shadow:none!important;
  backdrop-filter:blur(10px);
  transition:transform .16s ease,border-color .16s ease,background .16s ease!important;
}
#panel-teacher.view-teacher .ai-prompt-grid .chip-btn:hover{
  transform:translateY(-3px)!important;
  border-color:rgba(129,119,255,.26)!important;
  background:#121a25!important;
}
#panel-teacher.view-teacher .ai-prompt-icon{
  width:32px;height:32px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.06);
  border-radius:9px;
  background:#131b27;
  color:#98a6ff;
}
#panel-teacher.view-teacher .ai-prompt-icon svg{
  width:16px;height:16px;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
#panel-teacher.view-teacher .ai-prompt-grid b{
  display:block;
  margin-bottom:4px;
  color:#dce2ec;
  font-size:10.5px;
  font-weight:720;
}
#panel-teacher.view-teacher .ai-prompt-grid small{
  display:block;
  color:#657186;
  font-size:9px;
  line-height:1.35;
}
#panel-teacher.view-teacher .ai-prompt-arrow{
  color:#556176;
  font-size:13px;
}

/* messages */
#panel-teacher.view-teacher .msg{
  width:100%;
  min-width:0!important;
  max-width:100%!important;
}
#panel-teacher.view-teacher .msg.teacher{
  position:relative!important;
  width:100%!important;
  max-width:820px!important;
  padding:0 0 0 42px!important;
  align-self:flex-start!important;
}
#panel-teacher.view-teacher .msg.teacher::before{
  content:"";
  position:absolute!important;
  left:0!important;
  top:0!important;
  width:28px!important;
  height:28px!important;
  border:1px solid rgba(129,119,255,.19)!important;
  border-radius:9px!important;
  background:
    radial-gradient(circle at 35% 30%,rgba(129,119,255,.24),transparent 55%),
    #131925!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
#panel-teacher.view-teacher .msg.teacher::after{
  content:"✦";
  position:absolute;
  left:8px;
  top:5px;
  color:#a8a0ff;
  font-size:11px;
}
#panel-teacher.view-teacher .msg.user{
  width:auto!important;
  max-width:min(76%,680px)!important;
  margin-left:auto!important;
  align-self:flex-end!important;
}
#panel-teacher.view-teacher .bubble{
  min-width:0!important;
  max-width:100%!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--ai-v11-copy)!important;
  font-size:13px!important;
  line-height:1.72!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
#panel-teacher.view-teacher .bubble p{margin:0 0 13px!important}
#panel-teacher.view-teacher .bubble p:last-child{margin-bottom:0!important}
#panel-teacher.view-teacher .bubble ol,
#panel-teacher.view-teacher .bubble ul{
  margin:10px 0 13px!important;
  padding-left:20px!important;
}
#panel-teacher.view-teacher .bubble li{margin:7px 0!important}
#panel-teacher.view-teacher .bubble strong{color:#f1f4f8!important}
#panel-teacher.view-teacher .msg.user .bubble{
  padding:10px 13px!important;
  border:1px solid rgba(129,119,255,.15)!important;
  border-radius:13px 13px 4px 13px!important;
  background:
    linear-gradient(145deg,rgba(129,119,255,.13),rgba(94,184,255,.055)),
    #121925!important;
  color:#edf1f7!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

/* recommendations as premium source cards */
#panel-teacher.view-teacher .ai-book-recommendations{
  width:100%!important;
  margin:18px 0 0!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:9px!important;
}
#panel-teacher.view-teacher .ai-book-rec-label{
  grid-column:1/-1!important;
  margin:0 0 1px!important;
  color:#657186!important;
  font-size:8.5px!important;
  font-weight:800!important;
  letter-spacing:.13em!important;
}
#panel-teacher.view-teacher .ai-book-rec-card{
  position:relative;
  min-width:0!important;
  min-height:132px;
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr)!important;
  grid-template-rows:auto 30px!important;
  align-items:center!important;
  gap:9px 10px!important;
  padding:10px!important;
  border:1px solid var(--ai-v11-line)!important;
  border-radius:13px!important;
  background:#0e151e!important;
  overflow:hidden;
  transition:transform .16s ease,border-color .16s ease,background .16s ease!important;
}
#panel-teacher.view-teacher .ai-book-rec-card:hover{
  transform:translateY(-2px);
  border-color:rgba(129,119,255,.22)!important;
  background:#111925!important;
}
#panel-teacher.view-teacher .ai-book-rec-cover{
  grid-row:1 / span 2!important;
  width:48px!important;
  height:64px!important;
  border-radius:7px!important;
  border:1px solid rgba(255,255,255,.055)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.22);
}
#panel-teacher.view-teacher .ai-book-rec-info{
  align-self:end;
  min-width:0!important;
}
#panel-teacher.view-teacher .ai-book-rec-title{
  color:#e8edf4!important;
  font-size:10.5px!important;
  font-weight:720!important;
  line-height:1.35!important;
}
#panel-teacher.view-teacher .ai-book-rec-meta{
  margin-top:3px!important;
  color:#68758a!important;
  font-size:8.5px!important;
}
#panel-teacher.view-teacher .ai-book-rec-proof{
  margin-top:4px!important;
  color:#61c993!important;
  font-size:8px!important;
  line-height:1.35!important;
}
#panel-teacher.view-teacher .ai-book-rec-open{
  grid-column:2!important;
  width:max-content!important;
  min-height:27px!important;
  padding:5px 8px!important;
  justify-self:start!important;
  border-radius:7px!important;
  background:#151d2a!important;
  border-color:rgba(255,255,255,.075)!important;
  color:#aeb8c8!important;
  font-size:8.5px!important;
}

/* floating composer */
#panel-teacher.view-teacher .ai-composer-zone{
  position:relative;
  z-index:8;
  width:min(calc(100% - 64px),860px);
  margin:-2px auto 0;
  padding:0 0 4px;
}
#panel-teacher.view-teacher .ai-composer-zone::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:-50px;right:-50px;bottom:-18px;
  height:130px;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(8,12,18,.94) 44%,#080c12 78%);
  filter:blur(.01px);
}
#panel-teacher.view-teacher .chat-input-wrap{
  position:relative!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:7px 7px 7px 15px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:end!important;
  gap:10px!important;
  border:1px solid rgba(255,255,255,.105)!important;
  border-radius:17px!important;
  background:rgba(17,23,33,.92)!important;
  box-shadow:
    0 18px 48px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.035)!important;
  backdrop-filter:blur(18px);
  transition:border-color .16s ease,box-shadow .16s ease!important;
}
#panel-teacher.view-teacher .chat-input-wrap:focus-within{
  border-color:rgba(129,119,255,.38)!important;
  box-shadow:
    0 0 0 3px rgba(129,119,255,.07),
    0 20px 55px rgba(0,0,0,.30)!important;
}
#panel-teacher.view-teacher .chat-input-wrap textarea{
  width:100%!important;
  min-width:0!important;
  min-height:42px!important;
  max-height:132px!important;
  margin:0!important;
  padding:10px 0!important;
  resize:none!important;
  overflow-y:auto!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#f0f3f8!important;
  font:500 12.5px/1.5 var(--font-body)!important;
}
#panel-teacher.view-teacher .chat-input-wrap textarea::placeholder{color:#596579!important}
#panel-teacher.view-teacher .chat-input-actions{
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
}
#panel-teacher.view-teacher .chat-input-actions .icon-btn{
  width:36px!important;
  height:36px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(255,255,255,.075)!important;
  border-radius:11px!important;
  background:#171f2b!important;
  color:#8f9bad!important;
  box-shadow:none!important;
}
#panel-teacher.view-teacher .chat-input-actions .icon-btn svg{
  width:15px;height:15px;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
#panel-teacher.view-teacher .chat-input-actions .icon-btn:hover{
  transform:none!important;
  background:#1c2533!important;
  color:#fff!important;
}
#panel-teacher.view-teacher .chat-input-actions .send-btn{
  border-color:transparent!important;
  background:linear-gradient(145deg,#8c82ff,#697dff)!important;
  color:#fff!important;
  box-shadow:0 7px 18px rgba(105,125,255,.22)!important;
}
#panel-teacher.view-teacher .chat-input-actions .send-btn:hover{
  background:linear-gradient(145deg,#9890ff,#7587ff)!important;
}
#panel-teacher.view-teacher .chat-input-actions .send-btn.stop-state{
  background:#c79550!important;
  box-shadow:none!important;
}
#panel-teacher.view-teacher #chat-image-preview{
  margin:0 0 7px!important;
}
#panel-teacher.view-teacher .chat-thumb{
  margin:0!important;
}
#panel-teacher.view-teacher .chat-thumb img{
  height:58px!important;
  border-radius:10px!important;
}
#panel-teacher.view-teacher .ai-composer-footer{
  min-height:25px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 5px 0;
  color:#515d70;
  font-size:8.5px;
  line-height:1;
}
#panel-teacher.view-teacher .ai-composer-dot{
  width:3px;height:3px;border-radius:50%;background:#3d4757;
}
#panel-teacher.view-teacher .ai-composer-spacer{flex:1}
#panel-teacher.view-teacher #chat-status{
  margin:2px 5px 0!important;
  min-height:0!important;
  font-size:9px!important;
}

/* light mode */
html[data-theme="light"] #panel-teacher.view-teacher{
  --ai-v11-bg:#f6f8fb;
  --ai-v11-surface:#fff;
  --ai-v11-surface-2:#f8fafc;
  --ai-v11-surface-3:#f2f5f9;
  --ai-v11-line:rgba(29,44,69,.09);
  --ai-v11-line-strong:rgba(29,44,69,.13);
  --ai-v11-text:#172033;
  --ai-v11-copy:#465268;
  --ai-v11-muted:#748094;
}
html[data-theme="light"] #panel-teacher.view-teacher::before{
  background:
    radial-gradient(circle at 42% 35%,rgba(106,93,255,.075),transparent 42%),
    radial-gradient(circle at 70% 50%,rgba(64,163,255,.045),transparent 44%);
}
html[data-theme="light"] #panel-teacher.view-teacher .ai-page-heading .sec-title,
html[data-theme="light"] #panel-teacher.view-teacher .ai-welcome h3{color:#172033!important}
html[data-theme="light"] #panel-teacher.view-teacher .ai-page-heading-icon{
  background:linear-gradient(145deg,#f0efff,#f5f8ff)!important;
}
html[data-theme="light"] #panel-teacher.view-teacher .ai-library-status{
  background:rgba(255,255,255,.82)!important;
  border-color:rgba(29,44,69,.09)!important;
}
html[data-theme="light"] #panel-teacher.view-teacher .ai-prompt-grid .chip-btn{
  background:rgba(255,255,255,.82)!important;
  border-color:rgba(29,44,69,.09)!important;
}
html[data-theme="light"] #panel-teacher.view-teacher .ai-prompt-grid b{color:#293449!important}
html[data-theme="light"] #panel-teacher.view-teacher .ai-prompt-icon{
  background:#f4f6fa!important;
  border-color:rgba(29,44,69,.07)!important;
}
html[data-theme="light"] #panel-teacher.view-teacher .bubble{color:#465268!important}
html[data-theme="light"] #panel-teacher.view-teacher .bubble strong{color:#172033!important}
html[data-theme="light"] #panel-teacher.view-teacher .msg.user .bubble{
  background:linear-gradient(145deg,#eeedff,#f2f6ff)!important;
  color:#26324a!important;
  border-color:rgba(105,95,230,.12)!important;
}
html[data-theme="light"] #panel-teacher.view-teacher .msg.teacher::before{
  background:linear-gradient(145deg,#efeeff,#f3f7ff)!important;
}
html[data-theme="light"] #panel-teacher.view-teacher .ai-book-rec-card{
  background:#fff!important;
  border-color:rgba(29,44,69,.09)!important;
}
html[data-theme="light"] #panel-teacher.view-teacher .ai-book-rec-title{color:#222e42!important}
html[data-theme="light"] #panel-teacher.view-teacher .ai-composer-zone::before{
  background:linear-gradient(180deg,transparent,rgba(246,248,251,.94) 44%,#f6f8fb 78%);
}
html[data-theme="light"] #panel-teacher.view-teacher .chat-input-wrap{
  background:rgba(255,255,255,.93)!important;
  border-color:rgba(29,44,69,.11)!important;
  box-shadow:
    0 16px 44px rgba(42,57,83,.10),
    inset 0 1px 0 rgba(255,255,255,.7)!important;
}
html[data-theme="light"] #panel-teacher.view-teacher .chat-input-wrap textarea{color:#172033!important}
html[data-theme="light"] #panel-teacher.view-teacher .chat-input-actions .icon-btn{
  background:#f3f5f9!important;
  border-color:rgba(29,44,69,.075)!important;
  color:#647186!important;
}

/* responsive */
@media(max-width:899px){
  #panel-teacher.view-teacher{
    margin-top:4px!important;
    min-height:calc(100dvh - 96px);
  }
  #panel-teacher.view-teacher::before{
    width:100vw;height:420px;left:0;top:55px;
  }
  #panel-teacher.view-teacher > .ai-page-heading{
    width:100%!important;
    margin:0 0 14px!important;
    padding:0 2px!important;
  }
  #panel-teacher.view-teacher .ai-page-heading{
    gap:10px!important;
  }
  #panel-teacher.view-teacher .ai-header-brand{gap:9px}
  #panel-teacher.view-teacher .ai-page-heading-icon{
    width:36px!important;height:36px!important;border-radius:10px!important;
  }
  #panel-teacher.view-teacher .ai-page-heading-icon svg{width:16px!important;height:16px!important}
  #panel-teacher.view-teacher .ai-page-heading-topline{font-size:7px!important;margin-bottom:3px!important}
  #panel-teacher.view-teacher .ai-page-heading .sec-title{
    font-size:21px!important;
  }
  #panel-teacher.view-teacher .ai-page-heading .sec-sub{
    max-width:270px;
    margin-top:4px!important;
    font-size:9.5px!important;
  }
  #panel-teacher.view-teacher .ai-library-status{display:none!important}

  #panel-teacher.view-teacher > .glass-card,
  #panel-teacher.view-teacher .teacher-layout,
  #panel-teacher.view-teacher .chat-col{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  #panel-teacher.view-teacher .chat-col{
    min-height:calc(100dvh - 205px)!important;
  }
  #panel-teacher.view-teacher .chat-window{
    min-width:0!important;
    min-height:380px!important;
    max-height:none!important;
    height:auto!important;
    padding:8px 2px 24px!important;
    gap:22px!important;
    overflow-x:hidden!important;
  }
  #panel-teacher.view-teacher .ai-welcome{
    width:100%;
    min-height:calc(100dvh - 330px);
    padding:18px 2px 8px;
  }
  #panel-teacher.view-teacher .ai-orb{
    width:58px;height:58px;margin-bottom:17px;
  }
  #panel-teacher.view-teacher .ai-orb-core{
    width:45px;height:45px;border-radius:14px;
  }
  #panel-teacher.view-teacher .ai-orb-core svg{width:20px;height:20px}
  #panel-teacher.view-teacher .ai-welcome-kicker{font-size:7.5px;margin-bottom:7px}
  #panel-teacher.view-teacher .ai-welcome h3{
    max-width:330px;
    font-size:29px!important;
    line-height:1.08!important;
  }
  #panel-teacher.view-teacher .ai-welcome > p{
    max-width:340px;
    margin-top:10px;
    font-size:10.5px;
    line-height:1.55;
  }
  #panel-teacher.view-teacher .ai-prompt-grid{
    margin-top:22px!important;
    display:flex!important;
    width:calc(100vw - 30px)!important;
    max-width:100%!important;
    overflow-x:auto!important;
    gap:8px!important;
    padding:0 1px 6px!important;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  #panel-teacher.view-teacher .ai-prompt-grid::-webkit-scrollbar{display:none}
  #panel-teacher.view-teacher .ai-prompt-grid .chip-btn{
    flex:0 0 205px!important;
    min-height:84px!important;
    grid-template-columns:29px minmax(0,1fr) 15px!important;
    padding:11px!important;
    scroll-snap-align:start;
  }
  #panel-teacher.view-teacher .ai-prompt-icon{width:29px;height:29px}
  #panel-teacher.view-teacher .ai-prompt-grid b{font-size:9.5px}
  #panel-teacher.view-teacher .ai-prompt-grid small{font-size:8px}

  #panel-teacher.view-teacher .msg.teacher{
    width:100%!important;
    max-width:100%!important;
    padding-left:34px!important;
  }
  #panel-teacher.view-teacher .msg.teacher::before{
    width:24px!important;height:24px!important;border-radius:8px!important;
  }
  #panel-teacher.view-teacher .msg.teacher::after{
    left:6.5px;top:3.5px;font-size:9px;
  }
  #panel-teacher.view-teacher .msg.user{
    max-width:88%!important;
  }
  #panel-teacher.view-teacher .bubble{
    max-width:100%!important;
    min-width:0!important;
    font-size:11.5px!important;
    line-height:1.67!important;
  }
  #panel-teacher.view-teacher .msg.user .bubble{
    padding:9px 11px!important;
    font-size:11px!important;
  }

  #panel-teacher.view-teacher .ai-book-recommendations{
    width:100%!important;
    min-width:0!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
  }
  #panel-teacher.view-teacher .ai-book-rec-card{
    min-height:0!important;
    grid-template-columns:42px minmax(0,1fr) auto!important;
    grid-template-rows:auto!important;
    padding:8px!important;
  }
  #panel-teacher.view-teacher .ai-book-rec-cover{
    grid-column:1!important;
    grid-row:1!important;
    width:42px!important;
    height:56px!important;
  }
  #panel-teacher.view-teacher .ai-book-rec-info{
    grid-column:2!important;
    align-self:center!important;
  }
  #panel-teacher.view-teacher .ai-book-rec-open{
    grid-column:3!important;
    min-height:28px!important;
    max-width:100px!important;
    white-space:normal!important;
    line-height:1.2!important;
  }

  #panel-teacher.view-teacher .ai-composer-zone{
    position:sticky!important;
    bottom:calc(74px + env(safe-area-inset-bottom,0px));
    width:100%!important;
    margin:0!important;
    padding:0 0 2px!important;
  }
  #panel-teacher.view-teacher .ai-composer-zone::before{
    left:-16px;right:-16px;bottom:-14px;height:112px;
  }
  #panel-teacher.view-teacher .chat-input-wrap{
    min-width:0!important;
    width:100%!important;
    padding:6px 6px 6px 11px!important;
    border-radius:15px!important;
  }
  #panel-teacher.view-teacher .chat-input-wrap textarea{
    min-width:0!important;
    min-height:38px!important;
    padding:8px 0!important;
    font-size:11px!important;
  }
  #panel-teacher.view-teacher .chat-input-actions{
    flex:none!important;
    gap:5px!important;
  }
  #panel-teacher.view-teacher .chat-input-actions .icon-btn{
    width:33px!important;height:33px!important;border-radius:10px!important;
  }
  #panel-teacher.view-teacher .ai-composer-footer{
    padding-top:5px;
    font-size:7.5px;
  }
  #panel-teacher.view-teacher .ai-composer-footer span:nth-last-child(1){
    display:none;
  }
  #panel-teacher.view-teacher .ai-composer-spacer{display:none}
}
@media(max-width:520px){
  #panel-teacher.view-teacher .ai-book-rec-card{
    grid-template-columns:42px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
  }
  #panel-teacher.view-teacher .ai-book-rec-cover{
    grid-row:1 / span 2!important;
  }
  #panel-teacher.view-teacher .ai-book-rec-open{
    grid-column:2!important;
    grid-row:2!important;
    width:max-content!important;
    max-width:100%!important;
    justify-self:start!important;
    white-space:nowrap!important;
  }
}
@media(max-width:380px){
  #panel-teacher.view-teacher .ai-page-heading .sec-sub{display:none}
  #panel-teacher.view-teacher .ai-welcome h3{font-size:26px!important}
  #panel-teacher.view-teacher .ai-prompt-grid .chip-btn{flex-basis:185px!important}
}

/* Respect reduced motion */
@media(prefers-reduced-motion:reduce){
  #panel-teacher.view-teacher .ai-orb::before{animation:none!important}
  #panel-teacher.view-teacher .ai-prompt-grid .chip-btn,
  #panel-teacher.view-teacher .ai-book-rec-card{transition:none!important}
}


/* ===== MATHLVL v11.1 — centered professional balance ===== */
#panel-teacher.view-teacher > .ai-page-heading{
  width:min(100%,820px)!important;
  margin:0 auto 24px!important;
}
#panel-teacher.view-teacher .ai-page-heading{
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  gap:11px!important;
  text-align:center!important;
}
#panel-teacher.view-teacher .ai-header-brand{
  justify-content:center!important;
  align-items:center!important;
  width:100%!important;
}
#panel-teacher.view-teacher .ai-page-heading-copy{
  flex:0 1 auto!important;
  text-align:left!important;
}
#panel-teacher.view-teacher .ai-library-status{
  min-height:28px!important;
  padding:0 9px!important;
  font-size:8.5px!important;
  border-radius:999px!important;
}
#panel-teacher.view-teacher .ai-library-status b{
  font-weight:650!important;
}

/* Center the whole AI workspace instead of letting it stretch across the page. */
#panel-teacher.view-teacher > .glass-card{
  width:min(100%,880px)!important;
}
#panel-teacher.view-teacher .chat-col{
  min-height:610px!important;
}
#panel-teacher.view-teacher .chat-window{
  width:min(100%,820px)!important;
  max-width:820px!important;
  margin:0 auto!important;
  padding:12px 28px 32px!important;
}

/* Welcome content stays visually centered after removing the third quick action. */
#panel-teacher.view-teacher .ai-welcome{
  width:min(100%,640px)!important;
  min-height:455px!important;
  margin:auto!important;
}
#panel-teacher.view-teacher .ai-prompt-grid{
  width:min(100%,520px)!important;
  margin:28px auto 0!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  justify-content:center!important;
}
#panel-teacher.view-teacher .ai-prompt-grid .chip-btn{
  min-height:94px!important;
}

/* Keep the conversation on one centered reading rail. */
#panel-teacher.view-teacher .msg.teacher{
  width:min(100%,720px)!important;
  max-width:720px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  align-self:center!important;
}
#panel-teacher.view-teacher .msg.user{
  max-width:min(68%,620px)!important;
  margin-left:auto!important;
  margin-right:50px!important;
  align-self:flex-end!important;
}
#panel-teacher.view-teacher .ai-book-recommendations{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}

/* Composer follows the exact same center rail as messages. */
#panel-teacher.view-teacher .ai-composer-zone{
  width:min(100%,760px)!important;
  margin:0 auto!important;
}
#panel-teacher.view-teacher .ai-composer-footer{
  justify-content:center!important;
}
#panel-teacher.view-teacher .ai-composer-spacer{
  display:none!important;
}

/* Tablet / mobile: no horizontal carousel, no off-center cards. */
@media(max-width:899px){
  #panel-teacher.view-teacher > .ai-page-heading{
    width:100%!important;
    margin:0 auto 16px!important;
  }
  #panel-teacher.view-teacher .ai-page-heading{
    gap:9px!important;
  }
  #panel-teacher.view-teacher .ai-header-brand{
    justify-content:center!important;
  }
  #panel-teacher.view-teacher .ai-page-heading-copy{
    text-align:left!important;
  }
  #panel-teacher.view-teacher .ai-library-status{
    display:inline-flex!important;
  }

  #panel-teacher.view-teacher > .glass-card{
    width:100%!important;
  }
  #panel-teacher.view-teacher .chat-window{
    width:100%!important;
    max-width:100%!important;
    margin:0 auto!important;
    padding:8px 4px 24px!important;
  }
  #panel-teacher.view-teacher .ai-welcome{
    width:min(100%,360px)!important;
    min-height:calc(100dvh - 330px)!important;
    margin:auto!important;
  }
  #panel-teacher.view-teacher .ai-prompt-grid{
    display:grid!important;
    width:min(100%,330px)!important;
    max-width:330px!important;
    margin:22px auto 0!important;
    padding:0!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    overflow:visible!important;
    scroll-snap-type:none!important;
  }
  #panel-teacher.view-teacher .ai-prompt-grid .chip-btn{
    width:100%!important;
    flex:none!important;
    min-height:72px!important;
    grid-template-columns:30px minmax(0,1fr) 16px!important;
    padding:10px 11px!important;
  }

  #panel-teacher.view-teacher .msg.teacher{
    width:min(100%,560px)!important;
    max-width:560px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    align-self:center!important;
  }
  #panel-teacher.view-teacher .msg.user{
    max-width:86%!important;
    margin-left:auto!important;
    margin-right:0!important;
  }
  #panel-teacher.view-teacher .ai-book-recommendations{
    grid-template-columns:1fr!important;
  }

  #panel-teacher.view-teacher .ai-composer-zone{
    width:min(100%,560px)!important;
    margin:0 auto!important;
    left:auto!important;
    right:auto!important;
  }
  #panel-teacher.view-teacher .ai-composer-footer{
    justify-content:flex-start!important;
    padding-left:4px!important;
  }
}
@media(max-width:520px){
  #panel-teacher.view-teacher .ai-header-brand{
    width:auto!important;
  }
  #panel-teacher.view-teacher .ai-page-heading-copy{
    text-align:center!important;
  }
  #panel-teacher.view-teacher .ai-header-brand{
    flex-direction:column!important;
    gap:7px!important;
  }
  #panel-teacher.view-teacher .ai-page-heading .sec-sub{
    max-width:300px!important;
  }
  #panel-teacher.view-teacher .ai-library-status{
    margin-top:1px!important;
  }
  #panel-teacher.view-teacher .ai-welcome{
    width:min(100%,340px)!important;
  }
  #panel-teacher.view-teacher .ai-prompt-grid{
    width:min(100%,320px)!important;
    max-width:320px!important;
  }
  #panel-teacher.view-teacher .ai-composer-zone{
    width:100%!important;
  }
}


/* =====================================================================
   MATHLVL v12 — Full Product Design System
   Backup before this redesign: backup-full-site-design-before-v12
   ===================================================================== */

:root{
  --space-1:#090b0f!important;
  --space-2:#0d1015!important;
  --space-3:#12161d!important;
  --panel:#11151c!important;
  --panel-solid:#0d1117!important;
  --border:rgba(255,255,255,.078)!important;
  --border-soft:rgba(255,255,255,.048)!important;
  --text:#f3f5f8!important;
  --text-dim:#828d9e!important;
  --blue:#7380ff!important;
  --blue-soft:rgba(115,128,255,.105)!important;
  --gold:#9c8cff!important;
  --gold-soft:rgba(156,140,255,.10)!important;
  --green:#62d69a!important;
  --red:#ff707c!important;
  --radius:16px!important;

  --v12-bg:#090b0f;
  --v12-bg-elev:#0d1015;
  --v12-surface:#11151c;
  --v12-surface-2:#151a22;
  --v12-surface-3:#1a202a;
  --v12-line:rgba(255,255,255,.078);
  --v12-line-strong:rgba(255,255,255,.12);
  --v12-text:#f3f5f8;
  --v12-copy:#b5bdca;
  --v12-muted:#7b8799;
  --v12-accent:#7380ff;
  --v12-accent-2:#9b7cff;
  --v12-accent-soft:rgba(115,128,255,.10);
  --v12-success:#62d69a;
  --v12-danger:#ff707c;
  --v12-shadow:0 24px 70px rgba(0,0,0,.26);
  --v12-shadow-soft:0 12px 34px rgba(0,0,0,.16);
}

html{
  color-scheme:dark;
  background:var(--v12-bg)!important;
}

body{
  min-height:100vh;
  background:
    radial-gradient(1000px 520px at 78% -10%,rgba(115,128,255,.075),transparent 64%),
    radial-gradient(720px 460px at 18% 105%,rgba(130,94,255,.045),transparent 66%),
    linear-gradient(180deg,#090b0f 0%,#0a0d12 48%,#090b0f 100%)!important;
  color:var(--v12-text)!important;
  font-family:var(--font-body)!important;
  letter-spacing:-.006em;
}
body::selection{background:rgba(115,128,255,.25);color:#fff}
.stars,.floaters{display:none!important}

/* ---------- Global typography ---------- */
.dash-title,.sec-title,.hero-title,.library-heading,.profile-hero-name-row span:first-child,
.mt-card-title,.book-card .b-title{
  font-family:var(--font-display)!important;
  letter-spacing:-.04em!important;
}
.dash-title{
  font-size:clamp(30px,3.2vw,42px)!important;
  font-weight:780!important;
  line-height:1.02!important;
  color:var(--v12-text)!important;
}
.sec-title{
  font-size:clamp(26px,2.5vw,34px)!important;
  font-weight:770!important;
  line-height:1.08!important;
  color:var(--v12-text)!important;
}
.dash-sub,.sec-sub{
  color:var(--v12-muted)!important;
  font-size:13px!important;
  line-height:1.55!important;
}
.dash-welcome{margin:0 0 24px!important}

/* ---------- Layout + sidebar ---------- */
.app-shell{min-height:100vh!important}
.app{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
}
.panel{
  max-width:1240px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  animation:none!important;
}

@media(min-width:900px){
  .app-sidebar{
    width:246px!important;
    min-height:100vh!important;
    padding:20px 14px 16px!important;
    position:sticky!important;
    top:0!important;
    background:rgba(10,13,18,.965)!important;
    border-right:1px solid var(--v12-line)!important;
    box-shadow:18px 0 60px rgba(0,0,0,.12)!important;
    backdrop-filter:blur(18px);
  }
  .app{
    padding:44px clamp(34px,4.3vw,72px) 84px!important;
  }
  .app-sidebar .sidebar-logo{
    min-height:58px!important;
    padding:4px 10px 22px!important;
    gap:10px!important;
  }
  .app-sidebar .sidebar-logo img{
    width:30px!important;height:30px!important;object-fit:contain!important;
  }
  .app-sidebar .sidebar-logo span{
    font-size:17px!important;
    font-weight:800!important;
    letter-spacing:-.02em!important;
    color:#f1f3f7!important;
  }

  .sidebar-nav-item{
    position:relative!important;
    min-height:44px!important;
    margin-bottom:4px!important;
    padding:10px 12px!important;
    gap:11px!important;
    border:1px solid transparent!important;
    border-radius:11px!important;
    background:transparent!important;
    color:#7f8a9b!important;
    font-size:12.5px!important;
    font-weight:650!important;
    box-shadow:none!important;
    transition:background .15s ease,color .15s ease,border-color .15s ease!important;
  }
  .sidebar-nav-item:hover{
    color:#d7dde7!important;
    background:rgba(255,255,255,.035)!important;
  }
  .sidebar-nav-item.active{
    color:#f1f3f8!important;
    background:linear-gradient(90deg,rgba(115,128,255,.125),rgba(115,128,255,.045))!important;
    border-color:rgba(115,128,255,.13)!important;
    box-shadow:none!important;
  }
  .sidebar-nav-item.active::before{
    content:"";
    position:absolute;
    left:-1px;top:9px;bottom:9px;width:2px;
    border-radius:4px;
    background:linear-gradient(180deg,#8f98ff,#6d79f8);
  }
  .sidebar-nav-item .ic{
    width:18px!important;
    color:#8e99aa!important;
  }
  .sidebar-nav-item.active .ic{color:#aeb5ff!important}

  .sidebar-help-link{
    margin-top:12px!important;
    padding:10px 12px!important;
    border-radius:10px!important;
    color:#6f7a8b!important;
    font-size:11.5px!important;
  }
  .sidebar-help-link:hover{
    background:rgba(255,255,255,.03)!important;
    color:#d5dbe4!important;
  }

  .sidebar-profile-wrap{margin-top:auto!important}
  .sidebar-profile-trigger{
    min-height:60px!important;
    padding:8px 9px!important;
    border:1px solid var(--v12-line)!important;
    border-radius:13px!important;
    background:rgba(255,255,255,.018)!important;
  }
  .sidebar-profile-trigger:hover,
  .sidebar-profile-wrap.open .sidebar-profile-trigger{
    background:#12171f!important;
    border-color:rgba(255,255,255,.105)!important;
  }
  .sidebar-footer-avatar{
    width:37px!important;height:37px!important;
    border-radius:11px!important;
    background:#191f29!important;
    border:1px solid rgba(255,255,255,.08)!important;
    color:#dbe1e9!important;
  }
  .sidebar-footer-avatar img{border-radius:11px!important}
  .sidebar-footer-text .sft-name{
    color:#e9edf3!important;
    font-size:12px!important;
    font-weight:720!important;
  }
  .sidebar-footer-text .sft-plan{
    color:#737f91!important;
    font-size:9.5px!important;
  }
  .sidebar-profile-menu{
    bottom:68px!important;
    padding:7px!important;
    border-radius:13px!important;
    background:rgba(15,19,26,.98)!important;
    border:1px solid var(--v12-line-strong)!important;
    box-shadow:0 24px 70px rgba(0,0,0,.42)!important;
  }
  .sidebar-profile-action{
    padding:10px!important;
    border-radius:9px!important;
    color:#929daf!important;
    font-size:11.5px!important;
  }
  .sidebar-profile-action:hover{
    background:#191f29!important;
    color:#f0f2f6!important;
  }
}

/* ---------- Global surface language ---------- */
.glass-card,
.mt-card,
.book-card,
.dash-quick-card,
.profile-section-card,
.plan-card{
  border:1px solid var(--v12-line)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.008)),
    var(--v12-surface)!important;
  box-shadow:var(--v12-shadow-soft)!important;
  backdrop-filter:none!important;
}
.glass-card{
  border-radius:17px!important;
  padding:22px!important;
}
.glass-card:hover{border-color:rgba(255,255,255,.095)!important}

/* ---------- Buttons + controls ---------- */
button.glow-btn,.ai-desktop-btn{
  min-height:42px!important;
  padding:10px 16px!important;
  border:1px solid transparent!important;
  border-radius:11px!important;
  background:linear-gradient(145deg,#7d87ff,#6976f4)!important;
  color:#fff!important;
  font-family:var(--font-body)!important;
  font-size:12px!important;
  font-weight:750!important;
  box-shadow:0 8px 24px rgba(104,118,244,.18)!important;
  transition:transform .14s ease,filter .14s ease,box-shadow .14s ease!important;
}
button.glow-btn:hover,.ai-desktop-btn:hover{
  transform:translateY(-1px)!important;
  filter:brightness(1.06);
  box-shadow:0 10px 28px rgba(104,118,244,.24)!important;
}
button.glow-btn:active,.ai-desktop-btn:active{transform:translateY(0)!important}

button.ghost-btn,.mt-filter-btn,.plan-toggle-btn,.chip-btn{
  min-height:38px;
  border:1px solid var(--v12-line)!important;
  border-radius:10px!important;
  background:#121820!important;
  color:#9aa5b6!important;
  font-family:var(--font-body)!important;
  font-size:11.5px!important;
  font-weight:650!important;
  box-shadow:none!important;
}
button.ghost-btn:hover,.mt-filter-btn:hover,.plan-toggle-btn:hover,.chip-btn:hover{
  border-color:rgba(115,128,255,.24)!important;
  background:#171e28!important;
  color:#eef1f5!important;
}
button:disabled{opacity:.46!important;cursor:not-allowed!important}

textarea,input[type=text],input[type=number],select{
  border:1px solid var(--v12-line)!important;
  border-radius:12px!important;
  background:#0e131a!important;
  color:#edf1f6!important;
  font-family:var(--font-body)!important;
  font-size:13px!important;
  box-shadow:none!important;
}
textarea::placeholder,input::placeholder{color:#556174!important}
textarea:focus,input:focus,select:focus{
  outline:none!important;
  border-color:rgba(115,128,255,.52)!important;
  box-shadow:0 0 0 3px rgba(115,128,255,.075)!important;
}
label{
  color:#738093!important;
  font-size:9.5px!important;
  font-weight:800!important;
  letter-spacing:.09em!important;
}
.file-drop{
  border:1px dashed rgba(255,255,255,.12)!important;
  border-radius:13px!important;
  background:#0e131a!important;
  color:#748093!important;
}
.file-drop:hover{border-color:rgba(115,128,255,.30)!important}

/* ---------- HOME ---------- */
#panel-home{max-width:1200px!important}
.dash-home-hero{
  position:relative!important;
  min-height:320px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.08fr) minmax(330px,.92fr)!important;
  align-items:center!important;
  gap:32px!important;
  margin:0 0 24px!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid var(--v12-line)!important;
  border-radius:22px!important;
  background:
    radial-gradient(500px 280px at 86% 18%,rgba(115,128,255,.10),transparent 68%),
    linear-gradient(135deg,#11151d,#0d1117 65%)!important;
  box-shadow:var(--v12-shadow)!important;
}
.dash-home-hero::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  opacity:.17!important;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px)!important;
  background-size:32px 32px!important;
  mask-image:linear-gradient(90deg,rgba(0,0,0,.6),transparent 70%)!important;
}
.hero-copy{
  position:relative;z-index:2;
  padding:46px 0 46px 46px!important;
}
.hero-eyebrow{
  margin:0 0 14px!important;
  color:#8691ff!important;
  font-size:9px!important;
  font-weight:850!important;
  letter-spacing:.17em!important;
}
.hero-title{
  max-width:610px;
  margin:0 0 14px!important;
  color:#f5f6fa!important;
  font-size:clamp(34px,4vw,52px)!important;
  font-weight:790!important;
  line-height:1.00!important;
  letter-spacing:-.06em!important;
}
.hero-sub{
  max-width:590px!important;
  margin:0!important;
  color:#8d98aa!important;
  font-size:13.5px!important;
  line-height:1.7!important;
}
.hero-trust-row{
  margin-top:26px!important;
  display:flex!important;
  gap:8px!important;
}
.hero-trust-row span{
  min-height:30px;
  display:inline-flex;
  align-items:center;
  padding:0 10px!important;
  border:1px solid rgba(255,255,255,.075)!important;
  border-radius:9px!important;
  background:rgba(255,255,255,.02)!important;
  color:#8a95a7!important;
  font-size:10px!important;
  font-weight:650!important;
}
.hero-product-preview{
  position:relative!important;
  z-index:2!important;
  margin:26px 28px 26px 0!important;
  padding:10px!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:17px!important;
  background:rgba(10,14,20,.78)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.30)!important;
  backdrop-filter:blur(16px)!important;
}
.hpp-top{
  height:40px!important;
  padding:0 9px 9px!important;
  color:#6f7a8c!important;
  font-size:9.5px!important;
  border-bottom:1px solid var(--v12-line)!important;
}
.hpp-status{color:#5f6a7b!important;font-size:8.5px!important}
.hpp-status-dot{background:var(--v12-success)!important}
.hpp-metric{
  min-height:70px!important;
  grid-template-columns:36px 1fr 18px!important;
  padding:10px 8px!important;
  border-bottom:1px solid var(--v12-line)!important;
}
.hpp-icon{
  width:36px!important;height:36px!important;
  border-radius:10px!important;
  border:1px solid rgba(115,128,255,.12)!important;
  background:rgba(115,128,255,.08)!important;
  color:#a9b2ff!important;
}
.hpp-metric b{color:#e9edf3!important;font-size:11.5px!important}
.hpp-metric small{color:#697589!important;font-size:9.5px!important}
.hpp-arrow{color:#4f5b6d!important}

.dash-continue-card{
  margin-bottom:24px!important;
  padding:14px 15px!important;
  border-radius:15px!important;
  background:#10151c!important;
}
.dash-continue-cover{
  width:50px!important;height:66px!important;
  border-radius:8px!important;
}
.dash-continue-title{color:#e9edf3!important;font-size:13px!important}
.dash-continue-meta{color:#6d798c!important;font-size:9.5px!important}
.dash-continue-progress{height:4px!important;background:#242b36!important}
.dash-continue-progress-fill{background:linear-gradient(90deg,#7280ff,#9a7dff)!important}

.dash-quick-title{
  margin:0 0 11px!important;
  color:#657185!important;
  font-size:9.5px!important;
  font-weight:850!important;
  letter-spacing:.13em!important;
  text-transform:uppercase!important;
}
.dash-quick-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:11px!important;
  margin-bottom:34px!important;
}
.dash-quick-card{
  position:relative!important;
  min-height:118px!important;
  padding:16px!important;
  border-radius:15px!important;
  background:#10151c!important;
  transition:transform .16s ease,border-color .16s ease,background .16s ease!important;
}
.dash-quick-card::after{
  content:"↗";
  position:absolute;
  top:14px;right:14px;
  color:#4f5a6d;
  font-size:12px;
}
.dash-quick-card:hover{
  transform:translateY(-3px)!important;
  border-color:rgba(115,128,255,.24)!important;
  background:#141a22!important;
  box-shadow:0 18px 42px rgba(0,0,0,.18)!important;
}
.dqc-ic{
  width:35px!important;height:35px!important;
  border-radius:10px!important;
  background:rgba(115,128,255,.08)!important;
  color:#a6b0ff!important;
}
.dqc-title{
  margin-top:2px;
  color:#eef1f5!important;
  font-size:12.5px!important;
  font-weight:740!important;
}
.dqc-sub{
  color:#727e90!important;
  font-size:9.8px!important;
  line-height:1.4!important;
}

.dash-solve-section{margin-top:4px!important}
.dash-solve-section > .sec-title{margin-bottom:4px!important}
.dash-solve-section .glass-card{
  padding:24px!important;
  background:#0f141b!important;
  border-radius:18px!important;
}
.result{
  border-top:1px solid var(--v12-line)!important;
}
.result h3{color:#f0f2f6!important}
.step-num{
  background:#151b24!important;
  border:1px solid rgba(115,128,255,.22)!important;
  color:#aeb5ff!important;
}
.final-answer{
  background:#121822!important;
  border:1px solid rgba(115,128,255,.18)!important;
  border-radius:12px!important;
}

/* ---------- LIBRARY ---------- */
#book-list-section-outer{max-width:1180px!important}
.library-topbar{
  margin-bottom:18px!important;
  align-items:flex-end!important;
}
.library-kicker{
  color:#7582f6!important;
  font-size:8.5px!important;
  letter-spacing:.16em!important;
}
.library-heading{
  color:#f2f4f7!important;
  font-size:clamp(24px,2.5vw,32px)!important;
  font-weight:770!important;
}
.library-subheading{
  color:#748094!important;
  font-size:11.5px!important;
}
.library-count{
  min-height:30px!important;
  padding:0 10px!important;
  border:1px solid var(--v12-line)!important;
  border-radius:9px!important;
  background:#0f141a!important;
  color:#778396!important;
  font-size:9.5px!important;
}
.library-search-shell{
  min-height:52px!important;
  margin-bottom:22px!important;
  border:1px solid var(--v12-line)!important;
  border-radius:14px!important;
  background:#0f141b!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.012)!important;
}
.library-search-shell:focus-within{
  border-color:rgba(115,128,255,.42)!important;
  box-shadow:0 0 0 3px rgba(115,128,255,.07)!important;
}
.library-search-icon{stroke:#637084!important}
#book-search{
  min-height:50px!important;
  color:#edf1f6!important;
  font-size:12.5px!important;
}
.library-search-clear{color:#647084!important}
.library-search-clear:hover{background:#171d26!important;color:#fff!important}

.book-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:16px!important;
}
.book-card{
  padding:9px 9px 13px!important;
  border-radius:16px!important;
  background:#10151c!important;
  box-shadow:none!important;
}
.book-card:hover{
  transform:translateY(-3px)!important;
  border-color:rgba(115,128,255,.22)!important;
  background:#131a22!important;
  box-shadow:0 18px 40px rgba(0,0,0,.20)!important;
}
.book-cover-shell{
  aspect-ratio:3/4!important;
  margin-bottom:11px!important;
  border-radius:11px!important;
  background:#171d26!important;
  border-color:rgba(255,255,255,.055)!important;
}
.book-card .b-title{
  color:#e9edf3!important;
  font-size:14px!important;
  line-height:1.34!important;
  font-weight:740!important;
}
.book-meta-line{
  color:#6f7b8d!important;
  font-size:9.8px!important;
}
.book-access-badge{
  min-height:25px!important;
  padding:4px 8px!important;
  border-radius:8px!important;
  font-size:9.5px!important;
}
.book-access-dot{width:6px!important;height:6px!important;box-shadow:none!important}
.book-access-badge.free{color:#6bd79b!important;background:rgba(66,180,118,.09)!important}
.book-access-badge.plus{color:#9da9ff!important;background:rgba(115,128,255,.10)!important}
.book-access-badge.purchase{color:#dfb96f!important;background:rgba(187,137,61,.10)!important}
.book-access-badge.plus-purchase{color:#b6a0ef!important;background:rgba(140,103,209,.10)!important}

/* ---------- USTOZ AI — integrate v11 into global system ---------- */
#panel-teacher.view-teacher{
  --ai-v11-bg:var(--v12-bg)!important;
  --ai-v11-surface:var(--v12-surface)!important;
  --ai-v11-line:var(--v12-line)!important;
  --ai-v11-text:var(--v12-text)!important;
  --ai-v11-copy:var(--v12-copy)!important;
  --ai-v11-muted:var(--v12-muted)!important;
  margin-top:0!important;
}
#panel-teacher.view-teacher::before{
  opacity:.6!important;
}
#panel-teacher.view-teacher .ai-page-heading-icon{
  border-color:rgba(115,128,255,.18)!important;
  background:linear-gradient(145deg,rgba(115,128,255,.14),rgba(115,128,255,.045))!important;
}
#panel-teacher.view-teacher .ai-library-status{
  border-color:var(--v12-line)!important;
  background:#0f141b!important;
}
#panel-teacher.view-teacher .ai-welcome h3{color:#f3f5f8!important}
#panel-teacher.view-teacher .ai-welcome > p{color:#768296!important}
#panel-teacher.view-teacher .ai-prompt-grid .chip-btn{
  border-color:var(--v12-line)!important;
  background:#10151c!important;
}
#panel-teacher.view-teacher .ai-prompt-grid .chip-btn:hover{
  background:#151b24!important;
  border-color:rgba(115,128,255,.22)!important;
}
#panel-teacher.view-teacher .chat-input-wrap{
  border-color:var(--v12-line-strong)!important;
  background:rgba(17,22,29,.94)!important;
}
#panel-teacher.view-teacher .ai-book-rec-card{
  border-color:var(--v12-line)!important;
  background:#10151c!important;
}

/* ---------- MOCK TEST ---------- */
#panel-mocktest{max-width:1050px!important}
.mocktest-header-row{
  margin-bottom:18px!important;
  align-items:center!important;
}
.mocktest-filter-row{
  gap:7px!important;
  margin-bottom:18px!important;
}
.mt-filter-btn{
  min-height:34px!important;
  padding:7px 11px!important;
  border-radius:9px!important;
  background:#10151c!important;
}
.mt-filter-btn.active{
  background:rgba(115,128,255,.12)!important;
  border-color:rgba(115,128,255,.20)!important;
  color:#b7beff!important;
}
.mocktest-list{gap:9px!important}
.mt-card{
  min-height:74px!important;
  padding:13px 14px!important;
  border-radius:14px!important;
  background:#10151c!important;
  box-shadow:none!important;
}
.mt-card:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(115,128,255,.20)!important;
  background:#141a22!important;
}
.mt-card-icon{
  width:38px!important;height:38px!important;
  border-radius:10px!important;
  background:rgba(115,128,255,.08)!important;
  color:#aeb6ff!important;
}
.mt-card-title{
  color:#e9edf3!important;
  font-size:12.5px!important;
}
.mt-card-meta,.mt-card-result{
  color:#6f7a8c!important;
  font-size:9.5px!important;
}
.mt-card-start{min-height:34px!important}
#mocktest-list > .glass-card{
  max-width:860px!important;
  margin:0 auto!important;
  padding:24px!important;
  border-radius:18px!important;
  background:#10151c!important;
}
#mock-clock{
  min-width:72px;
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--v12-line)!important;
  border-radius:9px;
  background:#0d1218;
  color:#aab4ff!important;
  font-size:11px!important;
}
#mock-question-text{
  color:#eef1f5!important;
  font-size:17px!important;
  line-height:1.65!important;
  font-weight:650!important;
}
#mock-options{
  gap:8px!important;
}
#mock-options .ghost-btn{
  width:100%!important;
  min-height:46px!important;
  padding:11px 13px!important;
  border-radius:11px!important;
  background:#0e141b!important;
  color:#b9c1cd!important;
}
#mock-options .ghost-btn:hover{
  background:#151c25!important;
  border-color:rgba(115,128,255,.24)!important;
  color:#fff!important;
}
#mock-nav-grid{
  gap:5px!important;
  padding-top:15px;
  border-top:1px solid var(--v12-line);
}
#mock-nav-grid .ghost-btn{
  min-width:34px!important;
  width:auto!important;
  min-height:32px!important;
  padding:6px 8px!important;
  border-radius:8px!important;
}
.result-kicker,.modal-kicker{
  min-height:24px!important;
  padding:4px 8px!important;
  border:1px solid rgba(115,128,255,.15)!important;
  border-radius:8px!important;
  background:rgba(115,128,255,.08)!important;
  color:#aeb6ff!important;
  font-size:8.5px!important;
}

/* ---------- PROFILE ---------- */
#panel-profile{max-width:1000px!important}
.profile-card{
  max-width:430px!important;
  padding:28px!important;
  border-radius:20px!important;
}
.profile-avatar{
  width:78px!important;height:78px!important;
  border-radius:20px!important;
  background:#181f29!important;
  border:1px solid var(--v12-line)!important;
  color:#dfe4eb!important;
}
.oauth-btn{
  min-height:46px!important;
  border:1px solid var(--v12-line)!important;
  border-radius:11px!important;
  background:#10151c!important;
  color:#dce2ea!important;
  font-size:12px!important;
}
.oauth-btn:hover{
  background:#151b24!important;
  border-color:rgba(115,128,255,.22)!important;
}
.oauth-note{
  color:#687488!important;
  font-family:var(--font-body)!important;
  font-size:9.5px!important;
}
.profile-hero{
  margin-bottom:20px!important;
  gap:14px!important;
}
.profile-hero-avatar{
  width:68px!important;height:68px!important;
  border-radius:18px!important;
  background:#181f29!important;
  border:1px solid var(--v12-line)!important;
}
.profile-hero-avatar img{border-radius:18px!important}
.profile-hero-name-row span:first-child{
  color:#eef1f5!important;
  font-size:20px!important;
  font-weight:770!important;
}
.profile-hero-email{
  color:#748093!important;
  font-family:var(--font-body)!important;
  font-size:10.5px!important;
}
.plan-badge{
  padding:4px 8px!important;
  border-radius:7px!important;
  background:#171d25!important;
  color:#8792a4!important;
  border-color:var(--v12-line)!important;
  font-size:8px!important;
}
.plan-badge.plus{
  background:rgba(115,128,255,.09)!important;
  color:#aeb7ff!important;
  border-color:rgba(115,128,255,.16)!important;
}
.profile-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
}
.profile-section-card{
  padding:18px!important;
  border-radius:15px!important;
  background:#10151c!important;
  box-shadow:none!important;
}
.profile-section-card h3{
  color:#e9edf3!important;
  font-size:12.5px!important;
  font-weight:730!important;
}
.settings-row{
  padding:11px 2px!important;
  border-top:1px solid var(--v12-line)!important;
  color:#9ba5b5!important;
  font-size:11.5px!important;
}
.settings-row:hover{color:#fff!important}

/* plans + gift */
.fullscreen-overlay{
  background:rgba(6,8,12,.80)!important;
  backdrop-filter:blur(16px)!important;
}
.fullscreen-overlay-inner{
  width:min(100%,460px)!important;
  padding:22px!important;
  border:1px solid var(--v12-line)!important;
  border-radius:20px!important;
  background:#10151c!important;
  box-shadow:0 30px 90px rgba(0,0,0,.42)!important;
}
.plan-toggle{
  padding:4px!important;
  border:1px solid var(--v12-line)!important;
  border-radius:11px!important;
  background:#0d1218!important;
}
.plan-toggle-btn{
  border-radius:8px!important;
}
.plan-toggle-btn.active{
  background:#1a2130!important;
  color:#bcc3ff!important;
}
.plan-card{
  border-radius:15px!important;
  background:#10151c!important;
  box-shadow:none!important;
}
.plan-price{
  color:#f2f4f7!important;
  font-size:28px!important;
  letter-spacing:-.05em!important;
}
.plan-benefits li{
  color:#8994a5!important;
  border-bottom-color:var(--v12-line)!important;
  font-size:11.5px!important;
}

/* ---------- READER ---------- */
body.reader-mode{
  background:#07090c!important;
}
body.reader-mode .app{
  padding-top:16px!important;
}
.reader-header{
  min-height:46px!important;
  margin-bottom:10px!important;
}
.reader-header-title{
  color:#e9edf3!important;
  font-size:12px!important;
}
.back-link{
  color:#8f9aac!important;
  font-family:var(--font-body)!important;
  font-size:11px!important;
}
.reader-body{
  border:1px solid var(--v12-line)!important;
  border-radius:16px!important;
  background:#080b0f!important;
  box-shadow:0 24px 70px rgba(0,0,0,.28)!important;
}
.reader-canvas-wrap,.reader-scroll{
  background:
    radial-gradient(600px 260px at 50% 0,rgba(115,128,255,.035),transparent 70%),
    #080b0f!important;
}
.reader-page-item{
  border-radius:5px!important;
  box-shadow:0 18px 54px rgba(0,0,0,.34)!important;
}
.reader-menu-popover,.reader-page-popover,.annotation-clear-confirm,
.annotation-toolbar,.reader-floating-bar,.ai-panel{
  border:1px solid var(--v12-line-strong)!important;
  border-radius:13px!important;
  background:rgba(16,21,28,.96)!important;
  box-shadow:0 20px 60px rgba(0,0,0,.36)!important;
  backdrop-filter:blur(18px)!important;
}
.reader-menu-item{
  border-radius:8px!important;
  color:#a5afbd!important;
}
.reader-menu-item:hover{
  background:#1a202a!important;
  color:#fff!important;
}
.annotation-toolbar .icon-btn,.reader-floating-bar .icon-btn{
  background:#171e27!important;
  border-color:rgba(255,255,255,.07)!important;
}
.ai-panel-header{
  border-bottom-color:var(--v12-line)!important;
}

/* ---------- HELP CENTER ---------- */
.nova-help-overlay{
  background:rgba(6,8,12,.78)!important;
  backdrop-filter:blur(16px)!important;
}
.nova-help-modal{
  width:min(600px,100%)!important;
  border:1px solid var(--v12-line-strong)!important;
  border-radius:20px!important;
  background:#10151c!important;
  box-shadow:0 32px 100px rgba(0,0,0,.46)!important;
}
.nova-help-head{
  padding:18px 19px!important;
  border-bottom:1px solid var(--v12-line)!important;
}
.nova-help-head h3{color:#eef1f5!important}
.nova-help-body{padding:14px!important}
.nova-help-item{
  min-height:62px!important;
  padding:10px!important;
  border:1px solid var(--v12-line)!important;
  border-radius:12px!important;
  background:#0f141b!important;
}
.nova-help-item:hover{
  transform:none!important;
  background:#151b24!important;
  border-color:rgba(115,128,255,.20)!important;
}
.nova-help-item b{color:#dfe4eb!important;font-size:11.5px!important}
.nova-help-item small{color:#6f7b8d!important;font-size:9.5px!important}
.help-ic{
  width:34px!important;height:34px!important;
  border-radius:10px!important;
  background:#171e27!important;
  color:#aab4ff!important;
}
.nova-help-report{
  margin-top:10px!important;
  border:1px solid var(--v12-line)!important;
  border-radius:12px!important;
  background:#0f141b!important;
}
.nova-help-report button{
  min-width:118px!important;
  border-radius:9px!important;
  background:#6f7cf6!important;
}
.nova-help-report strong{color:#c6ccff!important}

/* ---------- Footer ---------- */
.footer-note{
  margin-top:44px!important;
  color:#4f5b6c!important;
  font-family:var(--font-body)!important;
  font-size:9px!important;
  letter-spacing:.02em!important;
}

/* ---------- LIGHT MODE: fully re-authored ---------- */
html[data-theme="light"]{
  color-scheme:light;
  --space-1:#f5f7fb!important;
  --space-2:#eef2f7!important;
  --space-3:#e8edf4!important;
  --panel:#ffffff!important;
  --panel-solid:#ffffff!important;
  --border:rgba(31,45,67,.10)!important;
  --border-soft:rgba(31,45,67,.065)!important;
  --text:#182131!important;
  --text-dim:#6d7889!important;
  --blue:#5d6ee6!important;
  --blue-soft:rgba(93,110,230,.095)!important;
  --gold:#765fe5!important;
  --gold-soft:rgba(118,95,229,.09)!important;

  --v12-bg:#f5f7fb;
  --v12-bg-elev:#eef2f7;
  --v12-surface:#ffffff;
  --v12-surface-2:#f8fafc;
  --v12-surface-3:#f2f5f8;
  --v12-line:rgba(31,45,67,.10);
  --v12-line-strong:rgba(31,45,67,.14);
  --v12-text:#182131;
  --v12-copy:#465268;
  --v12-muted:#738094;
  --v12-accent:#5d6ee6;
  --v12-accent-2:#7b63e9;
  --v12-accent-soft:rgba(93,110,230,.09);
  --v12-shadow:0 24px 70px rgba(44,58,82,.10);
  --v12-shadow-soft:0 10px 30px rgba(44,58,82,.07);
}
html[data-theme="light"] body{
  background:
    radial-gradient(900px 480px at 78% -8%,rgba(93,110,230,.07),transparent 64%),
    linear-gradient(180deg,#f7f9fc 0%,#f3f6fa 50%,#f7f9fc 100%)!important;
  color:#182131!important;
}
html[data-theme="light"] .app-sidebar{
  background:rgba(255,255,255,.96)!important;
  border-right-color:rgba(31,45,67,.09)!important;
  box-shadow:18px 0 60px rgba(44,58,82,.05)!important;
}
html[data-theme="light"] .app-sidebar .sidebar-logo span{color:#182131!important}
html[data-theme="light"] .sidebar-nav-item{color:#667286!important}
html[data-theme="light"] .sidebar-nav-item:hover{
  color:#263348!important;
  background:#f5f7fa!important;
}
html[data-theme="light"] .sidebar-nav-item.active{
  color:#394dba!important;
  background:linear-gradient(90deg,rgba(93,110,230,.10),rgba(93,110,230,.035))!important;
  border-color:rgba(93,110,230,.10)!important;
}
html[data-theme="light"] .sidebar-profile-trigger{
  background:#fafbfd!important;
  border-color:rgba(31,45,67,.09)!important;
}
html[data-theme="light"] .sidebar-profile-trigger:hover,
html[data-theme="light"] .sidebar-profile-wrap.open .sidebar-profile-trigger{
  background:#f4f6f9!important;
}
html[data-theme="light"] .sidebar-footer-avatar{
  background:#f0f3f8!important;
  border-color:rgba(31,45,67,.08)!important;
  color:#49566b!important;
}
html[data-theme="light"] .sidebar-footer-text .sft-name{color:#202b3d!important}
html[data-theme="light"] .sidebar-profile-menu{
  background:#fff!important;
  border-color:rgba(31,45,67,.11)!important;
  box-shadow:0 24px 70px rgba(44,58,82,.14)!important;
}
html[data-theme="light"] .sidebar-profile-action{color:#657185!important}
html[data-theme="light"] .sidebar-profile-action:hover{background:#f3f5f8!important;color:#1e2a3d!important}

html[data-theme="light"] .glass-card,
html[data-theme="light"] .mt-card,
html[data-theme="light"] .book-card,
html[data-theme="light"] .dash-quick-card,
html[data-theme="light"] .profile-section-card,
html[data-theme="light"] .plan-card{
  background:#fff!important;
  border-color:rgba(31,45,67,.09)!important;
  box-shadow:var(--v12-shadow-soft)!important;
}
html[data-theme="light"] .dash-home-hero{
  background:
    radial-gradient(500px 280px at 86% 18%,rgba(93,110,230,.08),transparent 68%),
    #ffffff!important;
  border-color:rgba(31,45,67,.09)!important;
  box-shadow:var(--v12-shadow)!important;
}
html[data-theme="light"] .dash-home-hero::before{
  background-image:
    linear-gradient(rgba(31,45,67,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(31,45,67,.035) 1px,transparent 1px)!important;
}
html[data-theme="light"] .hero-title,
html[data-theme="light"] .dash-title,
html[data-theme="light"] .sec-title,
html[data-theme="light"] .library-heading,
html[data-theme="light"] .dqc-title,
html[data-theme="light"] .book-card .b-title,
html[data-theme="light"] .mt-card-title{
  color:#182131!important;
}
html[data-theme="light"] .hero-sub,
html[data-theme="light"] .dash-sub,
html[data-theme="light"] .sec-sub,
html[data-theme="light"] .library-subheading,
html[data-theme="light"] .dqc-sub{
  color:#707c8d!important;
}
html[data-theme="light"] .hero-trust-row span{
  background:#f8fafc!important;
  border-color:rgba(31,45,67,.08)!important;
  color:#667286!important;
}
html[data-theme="light"] .hero-product-preview{
  background:rgba(248,250,253,.92)!important;
  border-color:rgba(31,45,67,.09)!important;
  box-shadow:0 20px 50px rgba(44,58,82,.10)!important;
}
html[data-theme="light"] .hpp-top,
html[data-theme="light"] .hpp-metric{border-color:rgba(31,45,67,.075)!important}
html[data-theme="light"] .hpp-icon{
  background:#eef1ff!important;
  border-color:rgba(93,110,230,.10)!important;
  color:#5d6ee6!important;
}
html[data-theme="light"] .hpp-metric b{color:#263247!important}
html[data-theme="light"] .hpp-metric small{color:#7b8697!important}

html[data-theme="light"] textarea,
html[data-theme="light"] input[type=text],
html[data-theme="light"] input[type=number],
html[data-theme="light"] select,
html[data-theme="light"] .file-drop,
html[data-theme="light"] .library-search-shell{
  background:#fff!important;
  color:#182131!important;
  border-color:rgba(31,45,67,.11)!important;
}
html[data-theme="light"] textarea::placeholder,
html[data-theme="light"] input::placeholder{color:#9aa3b0!important}
html[data-theme="light"] button.ghost-btn,
html[data-theme="light"] .mt-filter-btn,
html[data-theme="light"] .plan-toggle-btn,
html[data-theme="light"] .chip-btn{
  background:#f8fafc!important;
  color:#58667a!important;
  border-color:rgba(31,45,67,.09)!important;
}
html[data-theme="light"] button.ghost-btn:hover,
html[data-theme="light"] .mt-filter-btn:hover,
html[data-theme="light"] .chip-btn:hover{
  background:#f1f4f8!important;
  color:#1f2a3d!important;
}
html[data-theme="light"] .book-card:hover,
html[data-theme="light"] .dash-quick-card:hover,
html[data-theme="light"] .mt-card:hover{
  background:#fff!important;
  border-color:rgba(93,110,230,.18)!important;
}
html[data-theme="light"] .library-count{
  background:#fff!important;
  border-color:rgba(31,45,67,.09)!important;
}
html[data-theme="light"] .book-cover-shell{
  background:#edf1f6!important;
  border-color:rgba(31,45,67,.07)!important;
}
html[data-theme="light"] .profile-hero-name-row span:first-child{color:#182131!important}
html[data-theme="light"] .profile-section-card h3{color:#253044!important}
html[data-theme="light"] .profile-hero-avatar,
html[data-theme="light"] .profile-avatar{
  background:#f0f3f8!important;
  border-color:rgba(31,45,67,.08)!important;
  color:#45546a!important;
}
html[data-theme="light"] .oauth-btn{
  background:#fff!important;
  color:#263247!important;
  border-color:rgba(31,45,67,.10)!important;
}
html[data-theme="light"] .fullscreen-overlay{background:rgba(231,235,242,.80)!important}
html[data-theme="light"] .fullscreen-overlay-inner,
html[data-theme="light"] .nova-help-modal{
  background:#fff!important;
  border-color:rgba(31,45,67,.10)!important;
  box-shadow:0 28px 90px rgba(44,58,82,.16)!important;
}
html[data-theme="light"] .nova-help-item,
html[data-theme="light"] .nova-help-report{
  background:#f8fafc!important;
  border-color:rgba(31,45,67,.08)!important;
}
html[data-theme="light"] .nova-help-item b{color:#263247!important}
html[data-theme="light"] .help-ic{background:#eef1f6!important;color:#5d6ee6!important}
html[data-theme="light"] .reader-body,
html[data-theme="light"] .reader-canvas-wrap,
html[data-theme="light"] .reader-scroll{
  background:#eef1f5!important;
}
html[data-theme="light"] .reader-menu-popover,
html[data-theme="light"] .reader-page-popover,
html[data-theme="light"] .annotation-clear-confirm,
html[data-theme="light"] .annotation-toolbar,
html[data-theme="light"] .reader-floating-bar,
html[data-theme="light"] .ai-panel{
  background:rgba(255,255,255,.96)!important;
  border-color:rgba(31,45,67,.11)!important;
  box-shadow:0 20px 60px rgba(44,58,82,.16)!important;
}
html[data-theme="light"] #panel-teacher.view-teacher .chat-input-wrap{
  background:rgba(255,255,255,.96)!important;
  border-color:rgba(31,45,67,.11)!important;
}
html[data-theme="light"] #panel-teacher.view-teacher .ai-prompt-grid .chip-btn,
html[data-theme="light"] #panel-teacher.view-teacher .ai-book-rec-card{
  background:#fff!important;
  border-color:rgba(31,45,67,.09)!important;
}

/* ---------- MOBILE: app-like, not compressed desktop ---------- */
@media(max-width:899px){
  body{
    background:
      radial-gradient(520px 300px at 100% -5%,rgba(115,128,255,.07),transparent 68%),
      #090b0f!important;
  }
  .app{
    padding:18px 14px 108px!important;
  }
  .panel{
    width:100%!important;
    max-width:100%!important;
    margin-top:0!important;
  }
  .dash-welcome{margin:0 2px 16px!important}
  .dash-title{font-size:29px!important}
  .sec-title{font-size:24px!important}

  .dash-home-hero{
    min-height:0!important;
    grid-template-columns:1fr!important;
    gap:0!important;
    margin-bottom:18px!important;
    border-radius:18px!important;
  }
  .hero-copy{
    padding:26px 21px 19px!important;
  }
  .hero-title{
    font-size:32px!important;
    line-height:1.03!important;
  }
  .hero-sub{
    font-size:11.5px!important;
    line-height:1.6!important;
  }
  .hero-trust-row{
    margin-top:18px!important;
    flex-wrap:wrap!important;
  }
  .hero-product-preview{
    margin:0 12px 12px!important;
    border-radius:14px!important;
  }
  .hpp-metric{min-height:61px!important}

  .dash-continue-card{padding:12px!important}
  .dash-continue-row{gap:11px!important}
  .dash-continue-cover{width:44px!important;height:58px!important}
  #dash-continue-btn{width:auto!important;min-height:36px!important;padding:8px 10px!important}

  .dash-quick-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    margin-bottom:26px!important;
  }
  .dash-quick-card{
    min-height:100px!important;
    padding:11px!important;
    border-radius:13px!important;
  }
  .dash-quick-card::after{top:10px;right:10px;font-size:10px}
  .dqc-ic{width:30px!important;height:30px!important;border-radius:8px!important}
  .dqc-title{font-size:10.5px!important}
  .dqc-sub{font-size:8.5px!important}

  .glass-card{padding:15px!important;border-radius:15px!important}

  .book-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }
  .book-card{
    padding:7px 7px 10px!important;
    border-radius:13px!important;
  }
  .book-cover-shell{border-radius:9px!important}
  .book-card .b-title{font-size:12.5px!important}
  .book-meta-line{font-size:8.8px!important}

  .mocktest-header-row{
    align-items:flex-start!important;
    gap:10px!important;
  }
  #mocktest-results-btn{
    width:auto!important;
    min-height:34px!important;
    padding:7px 10px!important;
  }
  .mt-card{
    flex-wrap:wrap!important;
    padding:11px!important;
  }
  .mt-card-start{
    width:100%!important;
  }
  #mocktest-list > .glass-card{
    padding:16px!important;
    border-radius:15px!important;
  }
  #mock-question-text{
    font-size:15px!important;
    margin:16px 0!important;
  }
  #mock-nav-grid{gap:4px!important}
  #mock-prev,#mock-next,#mock-exit{
    width:auto!important;
  }

  .profile-grid{grid-template-columns:1fr!important}
  .profile-hero-avatar{width:58px!important;height:58px!important;border-radius:15px!important}
  .profile-hero-avatar img{border-radius:15px!important}
  .profile-section-card{padding:15px!important}

  .nova-help-modal{border-radius:16px!important}
  .nova-help-head{padding:15px!important}
  .nova-help-body{padding:10px!important}
  .nova-help-item{min-height:58px!important}

  /* Bottom nav stays as a compact floating dock on installations that use it. */
  .bottom-nav{
    left:10px!important;
    right:10px!important;
    bottom:10px!important;
    padding:6px 5px calc(6px + env(safe-area-inset-bottom,0px))!important;
    border:1px solid rgba(255,255,255,.08)!important;
    border-radius:16px!important;
    background:rgba(13,17,23,.92)!important;
    box-shadow:0 18px 50px rgba(0,0,0,.34)!important;
    backdrop-filter:blur(18px)!important;
  }
  .bottom-nav-item{
    min-height:48px!important;
    border-radius:10px!important;
    color:#758194!important;
    font-size:8.5px!important;
  }
  .bottom-nav-item svg{width:18px!important;height:18px!important}
  .bottom-nav-item.active{
    color:#b6bdff!important;
    background:rgba(115,128,255,.10)!important;
  }

  .fullscreen-overlay{
    padding:14px!important;
  }
  .fullscreen-overlay-inner{
    padding:18px!important;
    border-radius:17px!important;
  }

  .reader-body{
    border-radius:12px!important;
  }
}

@media(max-width:440px){
  .app{padding-left:12px!important;padding-right:12px!important}
  .dash-quick-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .dash-quick-card:last-child{
    grid-column:1/-1;
  }
  .hero-title{font-size:29px!important}
  .book-grid{gap:8px!important}
  .profile-hero{
    align-items:center!important;
  }
}

/* Light mobile */
@media(max-width:899px){
  html[data-theme="light"] body{
    background:
      radial-gradient(520px 300px at 100% -5%,rgba(93,110,230,.055),transparent 68%),
      #f6f8fb!important;
  }
  html[data-theme="light"] .bottom-nav{
    background:rgba(255,255,255,.94)!important;
    border-color:rgba(31,45,67,.09)!important;
    box-shadow:0 18px 50px rgba(44,58,82,.14)!important;
  }
  html[data-theme="light"] .bottom-nav-item{color:#738094!important}
  html[data-theme="light"] .bottom-nav-item.active{
    color:#5264d3!important;
    background:rgba(93,110,230,.08)!important;
  }
}

/* Theme switch feels intentional, not abrupt. */
body,.app-sidebar,.glass-card,.book-card,.mt-card,.dash-quick-card,
.sidebar-profile-menu,.fullscreen-overlay-inner,.nova-help-modal,
textarea,input,select,.bottom-nav{
  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease!important;
}


/* ===== MATHLVL v12.1 — Solve reliability + UX ===== */
.solve-section-head{
  display:block;
  margin-bottom:14px;
}
.solve-section-head .sec-title{margin:0 0 4px!important}
.solve-section-head .sec-sub{margin:0!important}
.solve-kicker{
  margin-bottom:7px;
  color:#7582f6;
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.16em;
}
.solve-card{
  padding:20px!important;
  background:#0f141b!important;
}
.solve-input-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
  gap:14px;
  align-items:stretch;
}
.solve-text-field,
.solve-image-field{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.solve-text-field textarea{
  min-height:184px!important;
  resize:vertical!important;
  padding:14px!important;
  line-height:1.6!important;
}
.solve-field-note{
  margin-top:7px;
  color:#596578;
  font-size:8.8px;
  line-height:1.4;
}
.solve-optional{
  margin-left:4px;
  color:#505c6f;
  font-size:8px;
  font-weight:650;
  letter-spacing:0;
  text-transform:none;
}
.solve-file-drop{
  min-height:184px;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px!important;
  overflow:hidden;
  border-style:dashed!important;
  transition:border-color .16s ease,background .16s ease;
}
.solve-file-drop:hover{
  background:#111821!important;
  border-color:rgba(115,128,255,.27)!important;
}
.solve-file-drop input[type=file]{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  width:100%!important;
  height:100%!important;
  opacity:0!important;
  cursor:pointer!important;
}
.solve-upload-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  pointer-events:none;
  text-align:center;
}
.solve-upload-empty[hidden]{display:none!important}
.solve-upload-icon{
  width:36px;height:36px;
  display:grid;place-items:center;
  margin-bottom:2px;
  border:1px solid rgba(115,128,255,.12);
  border-radius:10px;
  background:rgba(115,128,255,.07);
  color:#a8b1ff;
}
.solve-upload-icon svg{
  width:17px;height:17px;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.solve-upload-empty b{
  color:#bbc3cf;
  font-size:10.5px;
  font-weight:720;
}
.solve-upload-empty span{
  color:#5e6a7d;
  font-size:8.5px;
}
.solve-image-preview{
  width:100%;
  height:100%;
  min-height:158px;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  gap:8px;
  pointer-events:none;
}
.solve-image-preview[hidden]{display:none!important}
.solve-image-preview img{
  width:100%;
  min-height:0;
  height:118px;
  display:block;
  object-fit:contain;
  border-radius:9px;
  background:#090d12;
  border:1px solid rgba(255,255,255,.05);
}
.solve-preview-info{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.solve-preview-info b{
  min-width:0;
  overflow:hidden;
  color:#9fa9b8;
  font-size:8.8px;
  font-weight:650;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.solve-preview-info span{
  flex:none;
  color:#596578;
  font-size:8px;
}
.solve-file-drop .clear-btn{
  position:absolute!important;
  z-index:3!important;
  top:8px!important;
  right:8px!important;
  margin:0!important;
  padding:5px 8px!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:8px!important;
  background:rgba(10,14,20,.88)!important;
  color:#a8b1bf!important;
  font-size:8px!important;
  backdrop-filter:blur(10px);
}
.solve-file-drop .clear-btn:hover{
  border-color:rgba(255,112,124,.24)!important;
  color:#ff8b95!important;
}
.solve-file-drop.is-processing::after{
  content:"";
  position:absolute;
  z-index:4;
  width:22px;height:22px;
  border:2px solid rgba(255,255,255,.12);
  border-top-color:#8d98ff;
  border-radius:50%;
  animation:solveSpin .75s linear infinite;
}
@keyframes solveSpin{to{transform:rotate(360deg)}}

.solve-action-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:15px;
  padding-top:15px;
  border-top:1px solid var(--v12-line);
}
.solve-action-note{
  color:#596578;
  font-size:8.8px;
  line-height:1.4;
}
.solve-submit-btn{
  width:auto!important;
  min-width:154px;
}
.solve-submit-btn.is-loading::before{
  content:"";
  width:13px;height:13px;
  display:inline-block;
  margin-right:8px;
  vertical-align:-2px;
  border:2px solid rgba(255,255,255,.30);
  border-top-color:#fff;
  border-radius:50%;
  animation:solveSpin .7s linear infinite;
}
#solve-status{
  margin-top:10px!important;
  min-height:16px!important;
  color:#8390a4!important;
  font-family:var(--font-body)!important;
  font-size:9.5px!important;
}
#solve-status.err{color:#ff858f!important}
.solve-result-card{
  margin-top:18px!important;
  padding-top:18px!important;
  border-top:1px solid var(--v12-line)!important;
}
.solve-result-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}
.solve-result-kicker{
  margin-bottom:4px;
  color:#7481ef;
  font-size:8px;
  font-weight:850;
  letter-spacing:.15em;
}
.solve-result-head h3{
  margin:0!important;
  color:#f0f2f6!important;
  font-size:16px!important;
}
#solve-steps{
  display:grid;
  gap:9px;
}
#solve-steps .step{
  margin:0!important;
  display:grid!important;
  grid-template-columns:28px minmax(0,1fr);
  gap:10px!important;
  align-items:flex-start!important;
  padding:11px 12px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:11px;
  background:#0d1218;
}
#solve-steps .step-num{
  width:28px!important;height:28px!important;
  border-radius:8px!important;
  background:rgba(115,128,255,.08)!important;
  border:1px solid rgba(115,128,255,.15)!important;
  color:#aeb5ff!important;
  font-size:9px!important;
}
#solve-steps .step-text{
  min-width:0;
  padding-top:3px!important;
  color:#b9c1cd!important;
  font-size:12px!important;
  line-height:1.65!important;
  overflow-wrap:anywhere;
}
#solve-steps .katex-display{
  overflow-x:auto;
  overflow-y:hidden;
  padding:4px 0;
}
#solve-final{
  margin-top:11px!important;
  padding:13px 14px!important;
  border:1px solid rgba(98,214,154,.13)!important;
  border-radius:11px!important;
  background:rgba(98,214,154,.055)!important;
  color:#dce4e0!important;
  font-family:var(--font-body)!important;
  font-size:12.5px!important;
  line-height:1.55!important;
}
#solve-final b{color:#7cdda6!important}

html[data-theme="light"] .solve-card{background:#fff!important}
html[data-theme="light"] .solve-file-drop{
  background:#f8fafc!important;
  border-color:rgba(31,45,67,.13)!important;
}
html[data-theme="light"] .solve-file-drop:hover{
  background:#f4f7fb!important;
  border-color:rgba(93,110,230,.24)!important;
}
html[data-theme="light"] .solve-upload-empty b{color:#526075}
html[data-theme="light"] .solve-upload-icon{
  background:#eef1ff;
  border-color:rgba(93,110,230,.10);
  color:#5d6ee6;
}
html[data-theme="light"] .solve-image-preview img{
  background:#eef2f7;
  border-color:rgba(31,45,67,.07);
}
html[data-theme="light"] .solve-file-drop .clear-btn{
  background:rgba(255,255,255,.92)!important;
  border-color:rgba(31,45,67,.09)!important;
  color:#667286!important;
}
html[data-theme="light"] #solve-steps .step{
  background:#f8fafc;
  border-color:rgba(31,45,67,.075);
}
html[data-theme="light"] #solve-steps .step-text{color:#455268!important}
html[data-theme="light"] #solve-final{
  background:rgba(57,166,108,.055)!important;
  border-color:rgba(57,166,108,.13)!important;
  color:#304b3d!important;
}
html[data-theme="light"] #solve-final b{color:#27865a!important}

@media(max-width:760px){
  .solve-section-head{
    align-items:flex-start;
  }
  .solve-capability-badge{display:none}
  .solve-input-grid{
    grid-template-columns:1fr;
    gap:13px;
  }
  .solve-text-field textarea{
    min-height:150px!important;
  }
  .solve-file-drop{
    min-height:132px;
  }
  .solve-image-preview{
    min-height:108px;
  }
  .solve-image-preview img{
    height:86px;
  }
  .solve-action-row{
    align-items:stretch;
    flex-direction:column;
    gap:10px;
  }
  .solve-submit-btn{
    width:100%!important;
  }
  .solve-action-note{
    order:2;
    text-align:center;
  }
}


/* =====================================================================
   MATHLVL v13 — cinematic premium polish
   Backup: backup-before-v13-wow-polish
   ===================================================================== */

:root{
  --wow-blue:#6f7cff;
  --wow-violet:#9a72ff;
  --wow-cyan:#65c7ff;
  --wow-line:rgba(255,255,255,.085);
  --wow-line-strong:rgba(255,255,255,.14);
  --wow-surface:#10151c;
  --wow-surface-2:#151b24;
  --wow-text:#f4f6fa;
  --wow-muted:#7d8899;
  --wow-shadow:0 28px 90px rgba(0,0,0,.34);
}

/* ----- ambient depth ----- */
body{
  position:relative;
  overflow-x:hidden;
}
body::before,
body::after{
  content:"";
  position:fixed;
  z-index:-2;
  pointer-events:none;
  border-radius:50%;
  filter:blur(46px);
  opacity:.72;
}
body::before{
  width:780px;height:780px;
  top:-420px;right:-250px;
  background:
    radial-gradient(circle at 50% 50%,rgba(111,124,255,.17),rgba(154,114,255,.07) 35%,transparent 68%);
}
body::after{
  width:660px;height:660px;
  left:-360px;bottom:-430px;
  background:
    radial-gradient(circle at 50% 50%,rgba(101,199,255,.08),rgba(111,124,255,.035) 38%,transparent 68%);
}

/* fine technical texture */
.app-shell::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.15;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.8),rgba(0,0,0,.12) 72%,transparent);
}

/* ----- desktop shell refinement ----- */
@media(min-width:900px){
  .app-sidebar{
    background:
      linear-gradient(180deg,rgba(12,15,21,.985),rgba(9,12,17,.97))!important;
    border-right:1px solid rgba(255,255,255,.065)!important;
    box-shadow:
      24px 0 80px rgba(0,0,0,.14),
      inset -1px 0 0 rgba(255,255,255,.018)!important;
  }
  .app-sidebar::after{
    content:"";
    position:absolute;
    top:0;right:-1px;
    width:1px;height:180px;
    background:linear-gradient(180deg,rgba(123,135,255,.48),transparent);
    opacity:.28;
    pointer-events:none;
  }

  .sidebar-nav-item{
    overflow:hidden!important;
    isolation:isolate;
  }
  .sidebar-nav-item::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    opacity:0;
    background:
      radial-gradient(180px 60px at 20% 50%,rgba(111,124,255,.13),transparent 70%);
    transition:opacity .18s ease;
  }
  .sidebar-nav-item:hover::after,
  .sidebar-nav-item.active::after{opacity:1}
  .sidebar-nav-item.active{
    background:
      linear-gradient(90deg,rgba(111,124,255,.12),rgba(111,124,255,.025))!important;
    border-color:rgba(111,124,255,.15)!important;
  }
  .sidebar-nav-item.active::before{
    width:3px!important;
    top:8px!important;
    bottom:8px!important;
    box-shadow:0 0 18px rgba(111,124,255,.65);
  }

  .sidebar-profile-trigger{
    position:relative;
    overflow:hidden;
  }
  .sidebar-profile-trigger::before{
    content:"";
    position:absolute;
    left:12px;right:12px;top:0;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);
  }
}

/* ----- premium surface system ----- */
.glass-card,
.book-card,
.mt-card,
.dash-quick-card,
.profile-section-card,
.plan-card,
.nova-help-item,
.nova-help-report,
.fullscreen-overlay-inner{
  position:relative;
  isolation:isolate;
}
.glass-card::before,
.book-card::before,
.mt-card::before,
.dash-quick-card::before,
.profile-section-card::before,
.plan-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(135deg,rgba(255,255,255,.045),transparent 26%,transparent 72%,rgba(112,124,255,.035));
  opacity:.72;
}
.glass-card::after,
.book-card::after,
.mt-card::after,
.dash-quick-card::after,
.profile-section-card::after,
.plan-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  pointer-events:none;
  background:
    linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.015) 28%,rgba(111,124,255,.10) 68%,rgba(154,114,255,.08));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:.45;
}
.glass-card:hover::after,
.book-card:hover::after,
.mt-card:hover::after,
.dash-quick-card:hover::after,
.profile-section-card:hover::after,
.plan-card:hover::after{
  opacity:.72;
}

/* ----- typography feels more editorial ----- */
.hero-title,.dash-title,.sec-title,.library-heading{
  text-wrap:balance;
}
.hero-sub,.dash-sub,.sec-sub,.library-subheading{
  text-wrap:pretty;
}
.dash-title,.sec-title,.library-heading{
  text-shadow:0 1px 0 rgba(255,255,255,.02);
}

/* ----- HERO: make the "wow" happen here, not everywhere ----- */
.dash-home-hero{
  isolation:isolate;
  box-shadow:
    0 28px 90px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.dash-home-hero::before{
  opacity:.22!important;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px)!important;
  background-size:36px 36px!important;
}
.dash-home-hero::after{
  content:"";
  position:absolute;
  z-index:0;
  width:520px;height:520px;
  right:-180px;top:-240px;
  border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(circle,rgba(116,129,255,.18),rgba(154,114,255,.055) 35%,transparent 70%);
  filter:blur(12px);
  animation:heroAura 8s ease-in-out infinite alternate;
}
@keyframes heroAura{
  from{transform:translate3d(0,0,0) scale(.94);opacity:.72}
  to{transform:translate3d(-28px,22px,0) scale(1.08);opacity:1}
}

.hero-title{
  background:linear-gradient(180deg,#ffffff 0%,#e8ecf7 58%,#cfd5e6 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
}
.hero-title::selection{
  -webkit-text-fill-color:#fff;
}
.hero-product-preview{
  overflow:hidden;
  transform:perspective(1200px) rotateY(-1.6deg) rotateX(.7deg);
  transform-origin:center right;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease!important;
}
.hero-product-preview:hover{
  transform:perspective(1200px) rotateY(0deg) rotateX(0deg) translateY(-4px);
  box-shadow:0 34px 95px rgba(0,0,0,.38)!important;
}
.hero-product-preview::before{
  content:"";
  position:absolute;
  inset:-40% -60%;
  pointer-events:none;
  background:
    linear-gradient(115deg,transparent 42%,rgba(255,255,255,.065) 50%,transparent 58%);
  transform:translateX(-52%);
  animation:heroSheen 8.5s ease-in-out infinite;
}
@keyframes heroSheen{
  0%,72%{transform:translateX(-52%)}
  88%,100%{transform:translateX(52%)}
}
.hpp-metric{
  transition:background .15s ease,transform .15s ease;
}
.hpp-metric:hover{
  background:rgba(255,255,255,.018);
  transform:translateX(2px);
}

/* ----- quick cards ----- */
.dash-quick-card{
  overflow:hidden;
}
.dash-quick-card::before{
  background:
    radial-gradient(170px 90px at 10% 0%,rgba(115,128,255,.09),transparent 70%),
    linear-gradient(135deg,rgba(255,255,255,.025),transparent 50%);
}
.dash-quick-card:hover{
  transform:translateY(-5px)!important;
  box-shadow:0 20px 48px rgba(0,0,0,.24)!important;
}
.dash-quick-card:hover .dqc-ic{
  transform:translateY(-2px) scale(1.04);
}
.dqc-ic{
  transition:transform .18s ease,background .18s ease!important;
}

/* ----- inputs/buttons ----- */
button.glow-btn,.ai-desktop-btn{
  position:relative;
  overflow:hidden;
}
button.glow-btn::after,.ai-desktop-btn::after{
  content:"";
  position:absolute;
  top:-70%;left:-25%;
  width:34%;height:240%;
  transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  opacity:0;
}
button.glow-btn:hover::after,.ai-desktop-btn:hover::after{
  opacity:1;
  animation:btnSheen .75s ease;
}
@keyframes btnSheen{
  from{left:-35%}
  to{left:115%}
}
textarea,input[type=text],input[type=number],select,
.library-search-shell,.chat-input-wrap{
  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease,
    transform .16s ease!important;
}
textarea:focus,input:focus,select:focus,
.library-search-shell:focus-within,
.chat-input-wrap:focus-within{
  box-shadow:
    0 0 0 3px rgba(111,124,255,.075),
    0 10px 32px rgba(0,0,0,.12)!important;
}

/* ----- library cards ----- */
.book-card{
  overflow:hidden!important;
}
.book-card:hover{
  transform:translateY(-5px)!important;
}
.book-cover-shell{
  position:relative;
  overflow:hidden!important;
}
.book-cover-shell::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.025),transparent 28%,transparent 72%,rgba(7,10,14,.25));
}
.book-card:hover .book-cover-image{
  transform:scale(1.035)!important;
}
.book-cover-image{
  transition:transform .32s cubic-bezier(.2,.8,.2,1),filter .3s ease!important;
}
.book-card:hover .book-cover-image{
  filter:saturate(1.06) contrast(1.025);
}
.book-access-badge{
  backdrop-filter:blur(10px);
}

/* ----- Ustoz AI: polished workspace ----- */
#panel-teacher.view-teacher .ai-orb::before{
  background:
    radial-gradient(circle,rgba(125,114,255,.20),rgba(80,160,255,.07) 34%,transparent 70%)!important;
}
#panel-teacher.view-teacher .ai-orb-core{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 22px 58px rgba(0,0,0,.36),
    0 0 30px rgba(111,124,255,.08)!important;
}
#panel-teacher.view-teacher .ai-prompt-grid .chip-btn{
  overflow:hidden;
}
#panel-teacher.view-teacher .ai-prompt-grid .chip-btn::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(180px 80px at 15% 10%,rgba(115,128,255,.12),transparent 65%);
  transition:opacity .18s ease;
}
#panel-teacher.view-teacher .ai-prompt-grid .chip-btn:hover::before{opacity:1}
#panel-teacher.view-teacher .msg.user .bubble{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 26px rgba(0,0,0,.12)!important;
}
#panel-teacher.view-teacher .chat-input-wrap{
  box-shadow:
    0 20px 58px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.04)!important;
}

/* ----- solve section ----- */
.solve-card{
  position:relative;
  overflow:hidden;
}
.solve-card::before{
  content:"";
  position:absolute;
  right:-120px;bottom:-140px;
  width:320px;height:320px;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(circle,rgba(111,124,255,.065),transparent 70%);
}
.solve-file-drop{
  position:relative;
  overflow:hidden;
}
.solve-file-drop::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(140px 90px at 50% 25%,rgba(111,124,255,.05),transparent 70%);
}
.solve-upload-icon{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
#solve-steps .step{
  transition:transform .15s ease,border-color .15s ease,background .15s ease;
}
#solve-steps .step:hover{
  transform:translateX(3px);
  border-color:rgba(111,124,255,.15);
  background:#10161e;
}

/* ----- mock tests ----- */
.mt-card{
  overflow:hidden;
}
.mt-card::before{
  background:
    radial-gradient(150px 80px at 0% 0%,rgba(111,124,255,.085),transparent 70%);
}
.mt-card:hover{
  transform:translateY(-4px)!important;
}
#mock-options .ghost-btn{
  position:relative;
  overflow:hidden;
}
#mock-options .ghost-btn::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:2px;
  background:#7380ff;
  opacity:0;
  transition:opacity .15s ease;
}
#mock-options .ghost-btn:hover::before{opacity:.85}

/* ----- profile ----- */
.profile-hero-avatar{
  box-shadow:
    0 14px 34px rgba(0,0,0,.20),
    0 0 0 1px rgba(255,255,255,.02);
}
.profile-section-card:hover{
  transform:translateY(-2px);
  border-color:rgba(111,124,255,.16)!important;
}
.settings-row{
  transition:padding-left .15s ease,color .15s ease;
}
.settings-row:hover{
  padding-left:6px!important;
}

/* ----- reader ----- */
.reader-body{
  box-shadow:
    0 28px 90px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.02)!important;
}
.reader-floating-bar,.annotation-toolbar,.ai-panel{
  box-shadow:
    0 20px 60px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.035)!important;
}

/* ----- help/modals ----- */
.nova-help-modal,.fullscreen-overlay-inner{
  overflow:hidden;
}
.nova-help-modal::before,.fullscreen-overlay-inner::before{
  content:"";
  position:absolute;
  top:0;left:10%;right:10%;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
}
.nova-help-item{
  transition:transform .15s ease,border-color .15s ease,background .15s ease!important;
}
.nova-help-item:hover{
  transform:translateX(3px)!important;
}

/* ----- LIGHT MODE gets equal care ----- */
html[data-theme="light"]{
  --wow-line:rgba(31,45,67,.09);
  --wow-line-strong:rgba(31,45,67,.14);
  --wow-surface:#ffffff;
  --wow-surface-2:#f8fafc;
  --wow-text:#182131;
  --wow-muted:#6f7b8e;
  --wow-shadow:0 24px 72px rgba(46,59,82,.12);
}
html[data-theme="light"] body::before{
  background:
    radial-gradient(circle at 50% 50%,rgba(93,110,230,.10),rgba(118,95,229,.035) 35%,transparent 68%);
}
html[data-theme="light"] body::after{
  background:
    radial-gradient(circle at 50% 50%,rgba(82,168,230,.055),rgba(93,110,230,.02) 38%,transparent 68%);
}
html[data-theme="light"] .app-shell::before{
  background-image:
    linear-gradient(rgba(31,45,67,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(31,45,67,.018) 1px,transparent 1px);
}
html[data-theme="light"] .dash-home-hero::after{
  background:
    radial-gradient(circle,rgba(93,110,230,.10),rgba(118,95,229,.03) 35%,transparent 70%);
}
html[data-theme="light"] .hero-title{
  background:linear-gradient(180deg,#172033 0%,#263651 62%,#526079 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
}
html[data-theme="light"] .glass-card::before,
html[data-theme="light"] .book-card::before,
html[data-theme="light"] .mt-card::before,
html[data-theme="light"] .dash-quick-card::before,
html[data-theme="light"] .profile-section-card::before,
html[data-theme="light"] .plan-card::before{
  background:
    linear-gradient(135deg,rgba(255,255,255,.65),transparent 34%,transparent 72%,rgba(93,110,230,.025));
}
html[data-theme="light"] .glass-card::after,
html[data-theme="light"] .book-card::after,
html[data-theme="light"] .mt-card::after,
html[data-theme="light"] .dash-quick-card::after,
html[data-theme="light"] .profile-section-card::after,
html[data-theme="light"] .plan-card::after{
  background:
    linear-gradient(135deg,rgba(31,45,67,.07),rgba(31,45,67,.008) 28%,rgba(93,110,230,.07) 68%,rgba(118,95,229,.05));
}
html[data-theme="light"] .book-cover-shell::before{
  background:
    linear-gradient(180deg,rgba(255,255,255,.03),transparent 30%,transparent 76%,rgba(43,55,77,.07));
}
html[data-theme="light"] #solve-steps .step:hover{
  background:#f7f9fc;
}
html[data-theme="light"] .hero-product-preview{
  box-shadow:0 28px 70px rgba(44,58,82,.13)!important;
}

/* ----- mobile: premium but restrained ----- */
@media(max-width:899px){
  body::before{
    width:460px;height:460px;
    top:-260px;right:-220px;
    filter:blur(40px);
    opacity:.58;
  }
  body::after{display:none}
  .app-shell::before{
    background-size:36px 36px;
    opacity:.10;
  }

  .dash-home-hero{
    box-shadow:
      0 18px 54px rgba(0,0,0,.24),
      inset 0 1px 0 rgba(255,255,255,.03)!important;
  }
  .dash-home-hero::after{
    width:360px;height:360px;
    right:-190px;top:-180px;
  }
  .hero-product-preview{
    transform:none!important;
  }
  .hero-product-preview:hover{
    transform:none!important;
  }
  .dash-quick-card:hover,
  .book-card:hover,
  .mt-card:hover{
    transform:none!important;
  }
  .glass-card::after,
  .book-card::after,
  .mt-card::after,
  .dash-quick-card::after,
  .profile-section-card::after,
  .plan-card::after{
    opacity:.34;
  }
  #panel-teacher.view-teacher .ai-orb::before{
    opacity:.82;
  }
}

/* ----- reduced motion ----- */
@media(prefers-reduced-motion:reduce){
  .dash-home-hero::after,
  .hero-product-preview::before{
    animation:none!important;
  }
  .hero-product-preview,
  .dash-quick-card,
  .book-card,
  .mt-card,
  .profile-section-card{
    transition:none!important;
  }
}


/* ===== MATHLVL v13.1 — compact solve composer ===== */
.solve-card{
  padding:18px!important;
}
.solve-input-grid,
.solve-image-field,
.solve-field-note,
.solve-optional,
.solve-upload-icon{
  display:none!important;
}
.solve-text-field{
  display:block!important;
}
.solve-text-field textarea{
  min-height:142px!important;
  resize:vertical!important;
  padding:14px 15px!important;
  border-radius:13px!important;
}
.solve-action-row{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  margin-top:10px!important;
  padding-top:0!important;
  border-top:0!important;
}
.solve-file-drop{
  position:relative!important;
  min-height:0!important;
  flex:none!important;
  display:block!important;
  padding:0!important;
  overflow:visible!important;
  border:0!important;
  background:transparent!important;
}
.solve-file-drop::before{display:none!important}
.solve-file-drop input[type=file]{
  display:none!important;
}
.solve-attach-btn{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 11px;
  border:1px solid var(--v12-line);
  border-radius:10px;
  background:#131922;
  color:#98a4b6!important;
  font-family:var(--font-body);
  font-size:10.5px!important;
  font-weight:700!important;
  letter-spacing:0!important;
  cursor:pointer;
  user-select:none;
  text-transform:none!important;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
}
.solve-attach-btn:hover{
  transform:translateY(-1px);
  background:#181f2a;
  border-color:rgba(111,124,255,.24);
  color:#eef1f6!important;
}
.solve-attach-btn svg{
  width:15px;height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.solve-image-preview{
  min-height:40px!important;
  height:40px!important;
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  padding:4px 5px 4px 4px!important;
  border:1px solid var(--v12-line)!important;
  border-radius:10px!important;
  background:#111720!important;
  pointer-events:auto!important;
}
.solve-image-preview[hidden]{display:none!important}
.solve-image-preview img{
  width:32px!important;
  height:32px!important;
  min-height:0!important;
  flex:none!important;
  object-fit:cover!important;
  border-radius:7px!important;
  background:#0a0e13!important;
}
.solve-preview-info{
  max-width:118px;
  display:block!important;
  min-width:0!important;
}
.solve-preview-info b{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#aab4c2!important;
  font-size:8.5px!important;
}
.solve-preview-info span{
  display:block;
  margin-top:1px;
  color:#5f6b7e!important;
  font-size:7.5px!important;
}
.solve-file-drop .clear-btn{
  position:static!important;
  width:24px!important;
  height:24px!important;
  display:grid!important;
  place-items:center!important;
  flex:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:7px!important;
  background:transparent!important;
  color:#6f7b8d!important;
  font-size:15px!important;
  line-height:1!important;
}
.solve-file-drop .clear-btn:hover{
  background:rgba(255,112,124,.08)!important;
  color:#ff808b!important;
}
.solve-submit-btn{
  min-width:150px!important;
  min-height:40px!important;
}
.solve-action-note{
  margin-top:7px!important;
  color:#505c6e!important;
  font-size:8px!important;
  text-align:right!important;
}
#solve-status{
  margin-top:7px!important;
}
html[data-theme="light"] .solve-attach-btn{
  background:#f6f8fb!important;
  border-color:rgba(31,45,67,.09)!important;
  color:#627086!important;
}
html[data-theme="light"] .solve-attach-btn:hover{
  background:#eef2f7!important;
  border-color:rgba(93,110,230,.20)!important;
  color:#263247!important;
}
html[data-theme="light"] .solve-image-preview{
  background:#f7f9fc!important;
  border-color:rgba(31,45,67,.09)!important;
}
html[data-theme="light"] .solve-image-preview img{
  background:#eef2f7!important;
}

@media(max-width:760px){
  .solve-card{
    padding:12px!important;
  }
  .solve-text-field textarea{
    min-height:130px!important;
    padding:12px!important;
  }
  .solve-action-row{
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:7px!important;
    margin-top:8px!important;
  }
  .solve-file-drop{
    flex:none!important;
  }
  .solve-attach-btn{
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    padding:0!important;
    border-radius:10px!important;
  }
  .solve-attach-btn span{
    display:none!important;
  }
  .solve-attach-btn svg{
    width:17px!important;
    height:17px!important;
  }
  .solve-submit-btn{
    width:auto!important;
    min-width:0!important;
    flex:1!important;
    min-height:40px!important;
  }
  .solve-image-preview{
    height:40px!important;
    min-height:40px!important;
    max-width:150px!important;
  }
  .solve-preview-info{
    max-width:68px!important;
  }
  .solve-action-note{
    display:none!important;
  }
}


/* ===== MATHLVL v13.2 — reliable AI composer controls ===== */
#panel-teacher.view-teacher .chat-input-actions .ai-attach-btn{
  margin:0!important;
  padding:0!important;
  cursor:pointer!important;
  user-select:none!important;
  flex:none!important;
}
#panel-teacher.view-teacher .chat-input-actions .ai-attach-btn:hover{
  transform:none!important;
}
#panel-teacher.view-teacher .chat-input-actions .send-btn svg[hidden]{
  display:none!important;
}
#panel-teacher.view-teacher .chat-thumb{
  width:max-content!important;
  max-width:180px!important;
  min-height:46px!important;
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  padding:5px!important;
  border:1px solid var(--v12-line)!important;
  border-radius:11px!important;
  background:#10161e!important;
}
#panel-teacher.view-teacher .chat-thumb img{
  width:46px!important;
  height:46px!important;
  object-fit:cover!important;
  border-radius:8px!important;
}
#panel-teacher.view-teacher .chat-thumb .rm{
  width:25px!important;
  height:25px!important;
  display:grid!important;
  place-items:center!important;
  border:0!important;
  border-radius:7px!important;
  background:transparent!important;
  color:#748093!important;
  cursor:pointer!important;
  font-size:15px!important;
  line-height:1!important;
}
#panel-teacher.view-teacher .chat-thumb .rm:hover{
  background:rgba(255,112,124,.08)!important;
  color:#ff808b!important;
}
#panel-teacher.view-teacher #chat-status:empty{
  display:none!important;
}
html[data-theme="light"] #panel-teacher.view-teacher .chat-thumb{
  background:#f7f9fc!important;
  border-color:rgba(31,45,67,.09)!important;
}


/* ===== Home workspace is the primary navigation ===== */
.hero-product-preview .hpp-link{
  width:100%!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  border:0!important;
  border-bottom:1px solid var(--v12-line)!important;
  border-radius:0!important;
  background:transparent!important;
  color:inherit!important;
  font:inherit!important;
  text-align:left!important;
  cursor:pointer!important;
  box-shadow:none!important;
}
.hero-product-preview .hpp-link:last-child{
  border-bottom:0!important;
}
.hero-product-preview .hpp-link:hover{
  background:rgba(115,128,255,.055)!important;
  transform:translateX(3px)!important;
}
.hero-product-preview .hpp-link:focus-visible{
  outline:2px solid rgba(115,128,255,.62)!important;
  outline-offset:-2px!important;
}
.hero-product-preview .hpp-copy{
  min-width:0;
  display:block;
}
.hero-product-preview .hpp-copy b{
  display:block;
}
.hero-product-preview .hpp-copy small{
  display:block;
}
.hero-product-preview .hpp-link .hpp-arrow{
  transition:transform .15s ease,color .15s ease;
}
.hero-product-preview .hpp-link:hover .hpp-arrow{
  transform:translate(2px,-2px);
  color:#9ea9ff!important;
}
html[data-theme="light"] .hero-product-preview .hpp-link{
  border-bottom-color:rgba(31,45,67,.075)!important;
}
html[data-theme="light"] .hero-product-preview .hpp-link:hover{
  background:rgba(93,110,230,.055)!important;
}

/* Duplicate quick-access grid removed; keep no dead gap. */
.dash-quick-title,
.dash-quick-grid{
  display:none!important;
}


/* ===== MATHLVL v13.3 — natural AI typewriter ===== */
#panel-teacher.view-teacher .bubble.typewriter-active,
.ai-panel .bubble.typewriter-active{
  white-space:pre-wrap!important;
}
#panel-teacher.view-teacher .bubble.typewriter-active::after,
.ai-panel .bubble.typewriter-active::after{
  content:"";
  display:inline-block;
  width:1.5px;
  height:1em;
  margin-left:2px;
  vertical-align:-.1em;
  border-radius:2px;
  background:currentColor;
  opacity:.72;
  animation:mathlvlTypingCaret .75s steps(1,end) infinite;
}
@keyframes mathlvlTypingCaret{
  0%,48%{opacity:.72}
  49%,100%{opacity:0}
}
@media(prefers-reduced-motion:reduce){
  #panel-teacher.view-teacher .bubble.typewriter-active::after,
  .ai-panel .bubble.typewriter-active::after{
    animation:none!important;
  }
}


/* ===== Profile — purchased books only ===== */
.profile-purchased-list{
  display:grid;
  gap:8px;
}
.profile-purchased-book{
  min-height:72px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:9px;
  border:1px solid var(--v12-line);
  border-radius:12px;
  background:rgba(255,255,255,.012);
}
.profile-purchased-cover{
  width:42px;
  height:56px;
  flex:none;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.055);
  background:#171d26;
  color:#8f9aff;
  font-family:var(--font-display);
  font-size:12px;
  font-weight:800;
}
.profile-purchased-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.profile-purchased-info{
  min-width:0;
  flex:1;
}
.profile-purchased-title{
  overflow:hidden;
  color:#e9edf3;
  font-size:11.5px;
  font-weight:720;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.profile-purchased-meta{
  margin-top:3px;
  overflow:hidden;
  color:#697588;
  font-size:9px;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.profile-purchased-status{
  width:max-content;
  margin-top:6px;
  padding:3px 6px;
  border-radius:6px;
  background:rgba(98,214,154,.08);
  color:#69d69a;
  font-size:8px;
  font-weight:750;
}
.profile-purchased-open{
  min-height:32px!important;
  padding:6px 10px!important;
  font-size:9px!important;
  flex:none;
}
.profile-books-loading,
.profile-books-empty{
  padding:8px 0;
  color:#6f7b8d;
  font-size:11px;
  line-height:1.5;
}
.profile-books-error{
  margin-top:8px;
  color:#ff7f89;
  font-size:9.5px;
}
html[data-theme="light"] .profile-purchased-book{
  background:#fff;
  border-color:rgba(31,45,67,.08);
}
html[data-theme="light"] .profile-purchased-cover{
  background:#edf1f6;
  border-color:rgba(31,45,67,.08);
}
html[data-theme="light"] .profile-purchased-title{color:#1b2536}
html[data-theme="light"] .profile-purchased-meta{color:#778295}

@media(max-width:560px){
  .profile-purchased-book{
    gap:9px;
    padding:8px;
  }
  .profile-purchased-cover{
    width:38px;
    height:51px;
  }
  .profile-purchased-open{
    padding:6px 8px!important;
  }
}


/* ===== Hero descender fix ===== */
.hero-title{
  line-height:1.10!important;
  padding-bottom:.08em!important;
  overflow:visible!important;
}
@media(max-width:899px){
  .hero-title{
    line-height:1.10!important;
    padding-bottom:.09em!important;
  }
}


/* ===== MATHLVL v14 — focused premium reader ===== */
.dash-continue-card{display:none!important}

#book-detail-screen{min-height:min(700px,calc(100vh - 180px));padding:4px 2px 18px}
.book-detail-back{width:max-content!important;display:inline-flex!important;align-items:center!important;gap:7px!important;margin:0 0 18px!important;padding:8px 10px!important;border:1px solid transparent!important;border-radius:9px!important;background:transparent!important;color:#7e899a!important;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease!important}
.book-detail-back:hover{background:#111720!important;border-color:rgba(255,255,255,.06)!important;color:#dfe4eb!important}
.book-detail-back svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.book-detail-stage{position:relative;min-height:540px;display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);align-items:center;gap:clamp(38px,6vw,82px);overflow:hidden;padding:clamp(34px,5vw,64px);border:1px solid rgba(255,255,255,.075);border-radius:24px;background:radial-gradient(520px 360px at 20% 48%,rgba(115,128,255,.09),transparent 68%),radial-gradient(420px 300px at 90% 10%,rgba(154,124,255,.045),transparent 72%),linear-gradient(145deg,#0d1219,#0a0e14);box-shadow:0 28px 90px rgba(0,0,0,.28)}
.book-detail-stage::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.12;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(90deg,#000,transparent 76%)}
.book-detail-visual{position:relative;z-index:1;min-height:400px;display:grid;place-items:center}
.book-detail-aura{position:absolute;width:310px;height:310px;border-radius:50%;background:radial-gradient(circle,rgba(115,128,255,.18),rgba(115,128,255,.045) 45%,transparent 72%);filter:blur(18px)}
.book-detail-cover-frame{position:relative;width:min(220px,75%);aspect-ratio:3/4;transform:perspective(1000px) rotateY(5deg) rotateX(1deg);transform-origin:center;filter:drop-shadow(0 34px 34px rgba(0,0,0,.42));transition:transform .28s ease}
.book-detail-stage:hover .book-detail-cover-frame{transform:perspective(1000px) rotateY(1.5deg) rotateX(0deg) translateY(-3px)}
.book-detail-cover{width:100%!important;height:100%!important;margin:0!important;display:block;object-fit:cover;border:1px solid rgba(255,255,255,.10);border-radius:12px!important;box-shadow:none!important}
.book-detail-cover-fallback{width:100%;height:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:5px;padding:20px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:radial-gradient(160px 130px at 75% 15%,rgba(115,128,255,.20),transparent 68%),linear-gradient(155deg,#171e2b,#0d1219);color:#e9edf4}
.book-detail-cover-fallback span{color:#8f99ff;font-size:8px;font-weight:850;letter-spacing:.17em}
.book-detail-cover-fallback strong{max-width:100%;font-family:var(--font-display);font-size:20px;line-height:1.05;letter-spacing:-.035em}
.book-detail-copy{position:relative;z-index:1;max-width:640px}
.book-detail-kicker{margin-bottom:12px;color:#7e8afa;font-size:8.5px;font-weight:850;letter-spacing:.18em}
.book-detail-title{max-width:620px;margin:0 0 10px!important;color:#f2f4f8!important;font-family:var(--font-display)!important;font-size:clamp(30px,4vw,50px)!important;font-weight:790!important;line-height:1.04!important;letter-spacing:-.05em!important}
.book-detail-author{margin:0 0 20px!important;color:#8c97a8!important;font-family:var(--font-body)!important;font-size:12.5px!important}
.book-detail-meta{margin-bottom:8px;color:#adb5c2;font-size:10.5px;font-weight:650}
.book-detail-access{width:max-content;margin-bottom:22px;color:#9ba7ff;font-size:10px;font-weight:760;letter-spacing:.02em}
.book-detail-description{max-width:570px;margin:0 0 26px;color:#778396;font-size:12.5px;line-height:1.75}
.book-detail-actions{display:flex;align-items:center;gap:10px}
.book-start-reading{min-height:46px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;min-width:184px!important;padding:11px 18px!important}
.book-start-reading svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.book-detail-note{display:flex;align-items:center;gap:8px;margin-top:18px;color:#596577;font-size:9px}
.book-detail-note svg{width:14px;height:14px;flex:none;fill:none;stroke:#6f7bf0;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

body.reader-mode{background:radial-gradient(800px 430px at 74% -10%,rgba(115,128,255,.055),transparent 68%),#07090d!important}
body.reader-mode .app{max-width:none!important;padding:14px 24px 32px!important}
body.reader-mode #panel-teacher{max-width:none!important}
body.reader-mode #panel-teacher>.glass-card{padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
body.reader-mode .ai-page-heading{display:none!important}
.teacher-layout.book-mode,.teacher-layout.book-mode .book-col{width:100%!important;max-width:none!important}
.reader-header{min-height:64px!important;display:flex!important;align-items:center!important;gap:11px!important;margin:0 0 10px!important;padding:8px 10px!important;border:1px solid rgba(255,255,255,.065);border-radius:15px;background:rgba(13,17,23,.88);box-shadow:0 14px 38px rgba(0,0,0,.18);backdrop-filter:blur(18px)}
.reader-back-button,.reader-menu-button{width:40px;height:40px;flex:none;display:grid;place-items:center;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:#121820;color:#8f9aac;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}
.reader-back-button:hover,.reader-menu-button:hover{background:#18202a;border-color:rgba(115,128,255,.18);color:#f0f2f6}
.reader-back-button svg,.reader-menu-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.reader-menu-button svg circle{fill:currentColor;stroke:none}
.reader-header-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.reader-header-kicker{color:#596577;font-size:7.5px;font-weight:850;letter-spacing:.17em}
.reader-header-title{padding:0!important;overflow:hidden;color:#e9edf3!important;font-family:var(--font-display)!important;font-size:12.5px!important;font-weight:700!important;text-align:left!important;text-overflow:ellipsis;white-space:nowrap}
.reader-header-desktop-controls{display:flex!important;align-items:center!important;gap:8px!important}
.reader-page-text{min-height:38px;padding:8px 12px;border:1px solid rgba(255,255,255,.07);border-radius:9px;background:#111720;color:#8b96a8;font-family:var(--font-mono);font-size:9px;cursor:pointer}
.reader-page-text:hover{background:#171e28;color:#d9dee6}
.ai-desktop-btn{min-height:38px!important;display:inline-flex!important;align-items:center!important;gap:7px!important;padding:8px 12px!important;border-radius:9px!important;background:#737ff5!important;color:#fff!important;box-shadow:0 8px 22px rgba(91,107,240,.17)!important}
.ai-desktop-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.reader-body{height:calc(100vh - 104px)!important;min-height:560px;overflow:hidden!important;border:1px solid rgba(255,255,255,.065)!important;border-radius:18px!important;background:#080b10!important;box-shadow:0 28px 86px rgba(0,0,0,.34)!important}
.reader-canvas-wrap,.reader-scroll{background:radial-gradient(720px 300px at 50% 0,rgba(115,128,255,.045),transparent 72%),linear-gradient(180deg,#0a0e14,#070a0e)!important}
.reader-scroll{padding:28px 0 92px!important;gap:24px!important;scroll-behavior:smooth}
.reader-page-item{border:1px solid rgba(255,255,255,.055)!important;border-radius:4px!important;box-shadow:0 26px 75px rgba(0,0,0,.43),0 2px 0 rgba(255,255,255,.02)!important}
.reader-floating-bar{bottom:18px!important;gap:7px!important;padding:7px!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:14px!important;background:rgba(16,21,28,.92)!important;box-shadow:0 18px 55px rgba(0,0,0,.38)!important}
.reader-floating-bar .icon-btn,.annotation-toolbar .icon-btn{width:39px!important;height:39px!important;display:grid!important;place-items:center!important;border-radius:10px!important}
.reader-floating-bar .icon-btn svg,.annotation-toolbar .icon-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.reader-floating-bar .ai-fab{background:#737ff5!important;color:#fff!important;border-color:#737ff5!important}
.annotation-toolbar{bottom:72px!important;gap:6px!important;padding:7px!important;border-radius:14px!important;background:rgba(16,21,28,.95)!important}
#pen-toggle.active,#pen-tool-btn.active,#eraser-toggle.active{background:rgba(115,128,255,.14)!important;border-color:rgba(115,128,255,.24)!important;color:#b8bfff!important}
#annotation-done{color:#8f9aff!important}
.reader-menu-popover{top:68px!important;right:8px!important;border-radius:12px!important}
.reader-page-popover,.annotation-clear-confirm{border-radius:14px!important}

html[data-theme="light"] .book-detail-stage{border-color:rgba(31,45,67,.09);background:radial-gradient(520px 360px at 20% 48%,rgba(93,110,230,.08),transparent 68%),#fff;box-shadow:0 24px 70px rgba(42,54,76,.10)}
html[data-theme="light"] .book-detail-title{color:#182235!important}
html[data-theme="light"] .book-detail-author{color:#748094!important}
html[data-theme="light"] .book-detail-meta{color:#576477}
html[data-theme="light"] .book-detail-description{color:#6e7a8d}
html[data-theme="light"] .book-detail-cover-fallback{border-color:rgba(31,45,67,.09);background:linear-gradient(155deg,#eef2f8,#e5eaf2);color:#1c2637}
html[data-theme="light"] body.reader-mode{background:#edf1f6!important}
html[data-theme="light"] .reader-header{border-color:rgba(31,45,67,.09);background:rgba(255,255,255,.92);box-shadow:0 12px 32px rgba(42,54,76,.09)}
html[data-theme="light"] .reader-back-button,html[data-theme="light"] .reader-menu-button,html[data-theme="light"] .reader-page-text{border-color:rgba(31,45,67,.09);background:#f7f9fc;color:#667285}
html[data-theme="light"] .reader-header-title{color:#1e2838!important}
html[data-theme="light"] .reader-body{border-color:rgba(31,45,67,.08)!important;background:#dfe4eb!important;box-shadow:0 24px 70px rgba(42,54,76,.13)!important}
html[data-theme="light"] .reader-canvas-wrap,html[data-theme="light"] .reader-scroll{background:radial-gradient(680px 280px at 50% 0,rgba(93,110,230,.055),transparent 72%),#e7ebf1!important}
html[data-theme="light"] .reader-floating-bar,html[data-theme="light"] .annotation-toolbar{background:rgba(255,255,255,.94)!important;border-color:rgba(31,45,67,.10)!important;box-shadow:0 16px 40px rgba(42,54,76,.16)!important}

@media(max-width:899px){
  #book-detail-screen{min-height:auto;padding:0 0 18px}
  .book-detail-stage{min-height:0;grid-template-columns:1fr;gap:25px;padding:28px 22px 30px;border-radius:18px}
  .book-detail-visual{min-height:280px}
  .book-detail-cover-frame{width:min(170px,55vw)}
  .book-detail-title{font-size:31px!important}
  .book-detail-actions,.book-start-reading{width:100%!important}
  body.reader-mode .app{padding:8px 8px 14px!important}
  .reader-header{min-height:56px!important;margin-bottom:7px!important;padding:6px!important;border-radius:12px}
  .reader-header-kicker{display:none}
  .reader-header-title{font-size:10.5px!important}
  .reader-header-desktop-controls{display:flex!important}
  .ai-desktop-btn{width:38px!important;min-width:38px!important;padding:0!important;justify-content:center!important}
  .ai-desktop-btn span{display:none}
  .reader-page-text{display:none!important}
  .reader-back-button,.reader-menu-button{width:38px;height:38px}
  .reader-body{height:calc(100vh - 78px)!important;min-height:0!important;border-radius:12px!important}
  .reader-scroll{padding:14px 0 82px!important;gap:15px!important}
  .reader-floating-bar{bottom:12px!important}
}


/* ===== Reader header tools: pen + AI live in the top bar ===== */
.reader-header-tool{
  width:38px;
  height:38px;
  flex:none;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.07);
  border-radius:9px;
  background:#111720;
  color:#8b96a8;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .12s ease;
}
.reader-header-tool:hover{
  background:#171e28;
  border-color:rgba(115,128,255,.20);
  color:#e8ecf2;
}
.reader-header-tool:active{transform:translateY(1px)}
.reader-header-tool.active{
  background:rgba(115,128,255,.13);
  border-color:rgba(115,128,255,.26);
  color:#b7beff;
}
.reader-header-tool svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.reader-floating-bar{display:none!important}
html[data-theme="light"] .reader-header-tool{
  border-color:rgba(31,45,67,.09);
  background:#f7f9fc;
  color:#697589;
}
html[data-theme="light"] .reader-header-tool:hover{
  background:#eef2f7;
  color:#344155;
}
html[data-theme="light"] .reader-header-tool.active{
  background:rgba(93,110,230,.08);
  border-color:rgba(93,110,230,.20);
  color:#5869dc;
}
@media(max-width:899px){
  .reader-header-tool{
    width:38px;
    height:38px;
  }
}


/* MATHLVL reader performance: smoother mobile PDF scrolling */
.reader-scroll{-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;touch-action:pan-y;scroll-behavior:auto!important}
.reader-page-item{contain:layout paint}
@media(max-width:700px){.reader-page-item{content-visibility:auto;contain-intrinsic-size:0 900px}}

/* ===== Wawej Studio signature ===== */
.wawej-signature{display:flex;align-items:center;gap:9px;margin:0 4px 10px;padding:10px 6px 12px;border-top:1px solid var(--border-soft);color:#77839c;text-decoration:none;transition:color .16s ease,opacity .16s ease}.wawej-signature:hover{color:#aab7ff}.wawej-signature-mark{width:25px;height:25px;flex:none;display:block;object-fit:contain;opacity:.9}.wawej-signature-copy{display:flex;flex-direction:column;gap:2px;min-width:0}.wawej-signature-copy small{font-size:7px;line-height:1;letter-spacing:.16em;font-weight:800;color:#68748d}.wawej-signature-copy strong{font-size:11px;line-height:1.1;letter-spacing:.01em;color:#aeb8cf;font-weight:700}.wawej-logo-dark{display:block}.wawej-logo-light{display:none}html[data-theme="light"] .wawej-signature{color:#71809a;border-top-color:rgba(31,57,104,.08)}html[data-theme="light"] .wawej-signature-copy small{color:#8a96aa}html[data-theme="light"] .wawej-signature-copy strong{color:#3a4760}html[data-theme="light"] .wawej-logo-dark{display:block}html[data-theme="light"] .wawej-logo-light{display:none}@media(max-width:899px){.wawej-signature{display:none}}

/* ===== Reader stability: mobile PDF, touch scroll, back button ===== */
.reader-header,
.reader-back-button,
.reader-header-desktop-controls,
.reader-menu-button{
  position:relative;
  z-index:20!important;
}
.reader-back-button{
  pointer-events:auto!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent;
}
#reader-canvas-wrap{
  position:relative!important;
  min-height:0!important;
}
#reader-scroll{
  position:relative!important;
  z-index:1!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-y!important;
}
.reader-page-item{
  contain:layout paint;
}
.reader-page-item canvas{
  display:block;
  max-width:none;
}
@media(max-width:899px){
  body.reader-mode .app{
    padding:10px 8px 24px!important;
  }
  body.reader-mode .reader-header{
    position:sticky!important;
    top:0!important;
    z-index:30!important;
    margin-bottom:8px!important;
  }
  body.reader-mode .reader-body{
    height:calc(100dvh - 92px)!important;
    min-height:0!important;
  }
}

/* MATHLVL_MOBILE_PDF_SCROLL_FIX */
@media(max-width:899px){
  body.reader-mode{
    overscroll-behavior-y:none!important;
  }
  body.reader-mode .reader-body{
    contain:layout paint!important;
  }
  body.reader-mode .reader-scroll{
    scroll-behavior:auto!important;
    touch-action:pan-y pinch-zoom!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch!important;
    background:#080b10!important;
  }
  html[data-theme="light"] body.reader-mode .reader-scroll{
    background:#e7ebf1!important;
  }
  body.reader-mode .reader-page-item{
    box-shadow:0 8px 22px rgba(0,0,0,.24)!important;
    contain:layout paint style!important;
  }
  body.reader-mode .reader-page-item canvas.page-canvas{
    backface-visibility:hidden;
  }
}


/* ===== MATHLVL_MOBILE_READER_SCROLL_PERF_V2 ===== */
@media (max-width:899px){
  body.reader-mode{
    overscroll-behavior:none!important;
  }
  body.reader-mode .reader-body{
    height:calc(100dvh - 78px)!important;
    max-height:calc(100dvh - 78px)!important;
    min-height:0!important;
    contain:layout paint style!important;
  }
  body.reader-mode .reader-canvas-wrap{
    min-height:0!important;
    overflow:hidden!important;
    contain:layout paint style!important;
  }
  body.reader-mode .reader-scroll{
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;
    touch-action:pan-y!important;
    scroll-behavior:auto!important;
    contain:layout paint style!important;
    scrollbar-width:none!important;
  }
  body.reader-mode .reader-scroll::-webkit-scrollbar{display:none!important}
  body.reader-mode .reader-page-item{
    contain:layout paint!important;
    box-shadow:0 6px 18px rgba(0,0,0,.20)!important;
  }
  body.reader-mode .reader-page-item canvas.page-canvas{
    pointer-events:none!important;
    transform:none!important;
    backface-visibility:visible!important;
  }
  body.reader-mode .reader-page-item canvas.page-annotation-canvas{
    touch-action:pan-y!important;
  }
  body.reader-mode .reader-scroll.draw-lock canvas.page-annotation-canvas{
    touch-action:none!important;
  }
  body.reader-mode .reader-header{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
}



/* Ustoz AI daily usage */
.teacher-ai-usage{
  margin:12px 0 0;
  padding:13px 15px 12px;
  border:1px solid rgba(117,139,255,.24);
  border-radius:16px;
  background:linear-gradient(120deg,rgba(71,91,190,.12),rgba(26,30,54,.30));
  box-shadow:0 10px 28px rgba(3,8,24,.14);
}
.teacher-ai-usage[hidden]{display:none}
.teacher-ai-usage-head,.teacher-ai-usage-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.teacher-ai-usage-head>div{display:flex;flex-direction:column;gap:3px}
.teacher-ai-usage-kicker{font-size:9px;letter-spacing:.15em;color:#8fa4ff;font-weight:800}
.teacher-ai-usage-head strong{font-size:12px;color:var(--text)}
.teacher-ai-usage-head .teacher-ai-usage-remaining{font-size:23px;letter-spacing:-.04em;color:#fff}
.teacher-ai-usage-track{height:6px;margin:11px 0 8px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.09)}
.teacher-ai-usage-track span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#637eff,#a189ff);transition:width .35s ease}
.teacher-ai-usage-foot{font-size:10px;color:var(--text-dim)}
.teacher-ai-usage.is-error .teacher-ai-usage-remaining{color:var(--text-dim)}
.plan-ai-limit-panel{display:flex;align-items:flex-start;gap:13px;padding:16px;margin:0 0 18px;border:1px solid rgba(106,126,255,.22);border-radius:18px;background:linear-gradient(135deg,rgba(82,103,220,.14),rgba(30,33,57,.24))}
.plan-ai-limit-icon{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:11px;background:rgba(115,133,255,.16);color:#aab4ff;font-size:18px}
.plan-ai-limit-panel strong{display:block;margin:1px 0 4px;color:var(--text);font-size:13px}
.plan-ai-limit-panel p{margin:0;color:var(--text-dim);font-size:12px;line-height:1.55}
@media(max-width:600px){
  .teacher-ai-usage{margin-top:10px;padding:12px}
  .teacher-ai-usage-foot{align-items:flex-start;flex-direction:column;gap:4px}
  .plan-ai-limit-panel{padding:14px}
}


/* Profile daily AI usage summary */
.profile-ai-usage-card{
  margin:0 0 16px;
  padding:22px!important;
  border-color:rgba(111,124,255,.22)!important;
}
.profile-ai-usage-card[hidden]{display:none!important}
.profile-ai-usage-main{display:flex;align-items:center;justify-content:space-between;gap:20px}
.profile-ai-usage-copy h3{margin:5px 0 6px!important;font-size:17px!important}
.profile-ai-usage-copy p{margin:0;color:var(--text-dim);font-size:13px;line-height:1.5}
.profile-ai-usage-total{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.profile-ai-usage-total strong{font-size:38px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.05em;color:#fff}
.profile-ai-usage-total span{font-size:12px;color:var(--text-dim)}
.profile-ai-usage-card .teacher-ai-usage-track{height:8px;margin:18px 0 10px}
.profile-ai-usage-access{margin:12px 0 0;color:var(--text-dim);font-size:12px;line-height:1.55}
.profile-ai-upgrade{width:auto;min-height:42px;margin-top:14px;padding:0 16px;font-size:13px}
@media(max-width:600px){
  .profile-ai-usage-card{padding:16px!important}
  .profile-ai-usage-main{align-items:flex-start;gap:12px}
  .profile-ai-usage-total{flex-direction:column;align-items:flex-end;gap:3px}
  .profile-ai-usage-total strong{font-size:32px}
  .profile-ai-usage-copy p{max-width:30ch}
  .profile-ai-upgrade{width:100%}
}

.profile-ai-upgrade[hidden]{display:none!important}
html[data-theme="light"] .profile-ai-usage-total strong{color:#172033}

/* Keep the library below the reader out of the reading/detail layout. */
body.reader-mode #book-list-section-outer { display: none !important; }

.plus-celebration{box-sizing:border-box;width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;margin:auto;padding:34px 26px;border:1px solid rgba(139,124,255,.45);border-radius:26px;background:var(--bg-card,#10131e);color:var(--text,#f7f8ff);text-align:center;box-shadow:0 24px 90px #0008;font-family:var(--font-body,inherit)}
.plus-celebration::backdrop{background:rgba(3,5,14,.76);backdrop-filter:blur(8px)}
.plus-celebration-icon{display:grid;place-items:center;width:76px;height:76px;margin:0 auto 20px;border-radius:24px;color:#fff;font-size:42px;background:linear-gradient(135deg,#5175ff,#9c64ff);box-shadow:0 8px 35px #755cff55}
.plus-celebration-tag{color:#9b8cff;letter-spacing:.18em;font-size:11px;font-weight:800}
.plus-celebration h2{font-family:var(--font-display,inherit);font-size:27px;line-height:1.2;margin:14px 0}
.plus-celebration p{font-size:14px;line-height:1.7;color:var(--text-dim,#b0b5ca);margin:0 0 20px}
.plus-celebration-benefits{padding:14px;border:1px solid #8580ff33;border-radius:14px;background:#8580ff0d;font-size:12px;line-height:1.8;margin-bottom:22px}
.plus-celebration-actions{display:grid;gap:10px}.plus-celebration-actions button{width:100%;min-height:46px}

/* Saved mock review and aligned card actions */
#panel-mocktest .mock-card-actions{display:flex;align-items:center;gap:10px;align-self:center;flex-shrink:0}
#panel-mocktest .mock-card-actions>button{height:46px!important;min-height:46px!important;margin:0!important;padding:0 20px!important;width:auto!important;min-width:110px;border-radius:12px!important;white-space:nowrap}
#mock-saved-review{padding:28px;max-width:100%;overflow-wrap:anywhere}
.mock-review-header{display:flex;justify-content:space-between;align-items:center;gap:16px}
.mock-review-header h3{margin:8px 0}.mock-review-label{font-size:11px;letter-spacing:.12em;color:var(--text-dim)}
.mock-review-score{display:flex;align-items:center;gap:20px;padding:24px 0}.mock-review-score strong{font-size:48px;color:var(--blue)}
.mock-review-tutor{border:1px solid var(--border-soft);border-radius:18px;padding:22px;margin:24px 0;background:rgba(100,110,255,.045)}
.mock-review-note{font-size:12px;color:var(--text-dim);line-height:1.6}
#mock-review-chat{display:grid;gap:10px;margin-top:24px}#mock-review-chat textarea{box-sizing:border-box;width:100%;min-height:90px;padding:14px;border:1px solid var(--border-soft);border-radius:12px;color:var(--text);background:var(--bg);font:inherit;resize:vertical}#mock-review-chat button{justify-self:end}
#mock-review-reply,#mock-saved-ai{line-height:1.8}#mock-saved-review details{border:1px solid var(--border-soft);border-radius:12px;padding:14px}#mock-saved-review summary{cursor:pointer}
@media(max-width:700px){#panel-mocktest .mock-card-actions{width:100%;grid-column:1/-1;justify-content:stretch}#panel-mocktest .mock-card-actions>button{flex:1;min-width:0;padding:0 12px!important}#mock-saved-review{padding:16px}.mock-review-header{align-items:flex-start;flex-direction:column}.mock-review-tutor{padding:16px}.mock-review-score strong{font-size:38px}}