:root{
      --bg:#0A0A0C; --surface:#131620; --sidebar-bg:#0C0D12; --text:#F2F3F5; --muted:#9AA1AD;
      --accent:#3E6FE3; --accent-hover:#5484EC; --line:#262A34;
      --good:#2E8B57; --good-bg:rgba(46,139,87,.16); --good-border:#3FA76B;
      --bad:#C4483B; --bad-bg:rgba(196,72,59,.15); --bad-border:#D2685C;
      --font:"Nunito", system-ui, sans-serif;
    }
    *{box-sizing:border-box;}
    html{font-size:18px;}
    html,body{height:100%;}
    body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font); line-height:1.6; -webkit-font-smoothing:antialiased;}
    .app{display:flex; min-height:100vh;}
    .sidebar{width:300px; flex:none; background:var(--sidebar-bg); border-right:1px solid var(--line); display:flex; flex-direction:column; gap:12px; padding:18px 14px; z-index:50;}
    .app.collapsed .sidebar{display:none;}
    .list-label{font-size:.8rem; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); padding:2px 6px;}
    .guide-list{display:flex; flex-direction:column; gap:3px; overflow-y:auto; flex:1;}
    .guide-item{display:flex; align-items:center; gap:8px; padding:10px 10px; border-radius:9px; cursor:pointer;}
    .guide-item:hover{background:#15171F;}
    .guide-item.active{background:rgba(62,111,227,.16);}
    .guide-item .title{flex:1; font-size:1.02rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
    .star,.del{background:none; border:0; cursor:pointer; padding:2px; line-height:1;}
    .star{color:#565B66; font-size:1.1rem;}
    .star.on{color:#E8B23D;}
    .del{color:#565B66; font-size:1.05rem; opacity:0;}
    .guide-item:hover .del{opacity:1;}
    .del:hover{color:#E0675A;}
    .empty-list{color:var(--muted); font-size:.98rem; padding:10px 6px; line-height:1.5;}
    .main{flex:1; min-width:0; display:flex; flex-direction:column;}
    .topbar{display:flex; align-items:center; gap:12px; padding:14px 22px; border-bottom:1px solid var(--line);}
    .icon-btn{font-family:inherit; background:#12141B; border:1px solid var(--line); color:var(--text); width:44px; height:42px; border-radius:9px; cursor:pointer; font-size:1.2rem;}
    .icon-btn:hover{background:#191C24;}
    .top-brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.22rem;}
    .content{flex:1; padding:26px 30px; overflow-y:auto;}
    .content-inner{max-width:880px; margin:0 auto;}
    .lead{color:var(--muted); font-size:1.1rem; margin:0 0 20px;}
    label{display:block; font-weight:600; font-size:1rem; margin-bottom:8px;}
    .modes{display:flex; gap:6px; background:#0E0F15; border:1px solid var(--line); border-radius:10px; padding:4px; margin-bottom:18px; max-width:460px;}
    .mode{flex:1; font-family:inherit; font-weight:600; font-size:.96rem; color:var(--muted); background:transparent; border:0; border-radius:7px; padding:11px 6px; cursor:pointer; transition:background .12s ease, color .12s ease;}
    .mode:hover{color:var(--text);}
    .mode.active{background:var(--accent); color:#fff;}
    /* Note style: three boxes, deliberately not a segmented pill like .modes —
       each option needs a line of explanation, because "Exact" vs "Summarized"
       is not self-evident and picking wrong wastes a generation. */
    .style-label{display:block; text-align:left; font-weight:600; margin:6px 0;}
    .styles{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-width:460px; width:100%; margin:0 auto 18px;}
    .style-opt{display:flex; flex-direction:column; gap:4px; text-align:left; font-family:inherit; color:var(--muted); background:#0E0F15; border:1px solid var(--line); border-radius:10px; padding:12px; cursor:pointer; transition:background .12s ease, border-color .12s ease, color .12s ease;}
    .style-opt:hover{color:var(--text); border-color:#3A4560;}
    .style-opt.active{border-color:var(--accent); background:rgba(62,111,227,.14); color:var(--text);}
    .s-name{font-weight:700; font-size:1rem;}
    .s-desc{font-size:.79rem; line-height:1.35; color:var(--muted);}
    .style-opt.active .s-desc{color:#C7D2E8;}
    @media(max-width:560px){ .styles{grid-template-columns:1fr;} }
    textarea{width:100%; height:200px; resize:vertical; font-family:inherit; font-size:1.08rem; line-height:1.5; color:var(--text); border:1px solid var(--line); border-radius:10px; padding:15px; background:#0E0F15;}
    textarea::placeholder{color:#6B7280;}
    textarea:focus-visible, input[type=file]:focus-visible, button:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
    .or{display:flex; align-items:center; gap:12px; color:var(--muted); font-size:.88rem; text-transform:uppercase; letter-spacing:.1em; margin:18px 0;}
    .or::before,.or::after{content:""; flex:1; height:1px; background:var(--line);}
    input[type=file]{font-family:inherit; font-size:1.02rem; color:var(--muted); max-width:100%;}
    input[type=file]::file-selector-button{font-family:inherit; font-weight:600; font-size:.98rem; color:var(--accent); background:rgba(62,111,227,.16); border:1px solid rgba(62,111,227,.5); padding:10px 16px; border-radius:8px; margin-right:12px; cursor:pointer;}
    input[type=file]::file-selector-button:hover{background:rgba(62,111,227,.28);}
    button#go{margin-top:20px; width:100%; font-family:inherit; font-weight:600; font-size:1.12rem; color:#fff; background:var(--accent); border:0; border-radius:10px; padding:16px 20px; cursor:pointer; transition:background .15s ease, transform .05s ease;}
    button#go:hover{background:var(--accent-hover);}
    button#go:active{transform:translateY(1px);}
    button#go:disabled{opacity:.5; cursor:default;}
    #status{margin-top:12px; color:var(--muted); font-size:1rem; min-height:1.2em;}
    .guide-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin:6px 0 8px; flex-wrap:wrap;}
    .guide-title{font-weight:700; font-size:1.85rem; letter-spacing:-.01em; margin:0;}
    .guide-actions{display:flex; gap:10px; flex-wrap:wrap;}
    .ghost{font-family:inherit; font-weight:600; font-size:1rem; color:var(--accent); background:rgba(62,111,227,.12); border:1px solid rgba(62,111,227,.5); border-radius:9px; padding:11px 16px; cursor:pointer; transition:background .12s ease;}
    .ghost:hover{background:rgba(62,111,227,.24);}
    .ghost:disabled{opacity:.5; cursor:default;}
    .doc h1{font-weight:700; font-size:1.55rem; letter-spacing:-.01em; margin:34px 0 14px; padding-bottom:8px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px;}
    .doc h1:first-child{margin-top:18px;}
    .doc h1::before{content:""; width:14px; height:14px; background:var(--accent); border-radius:3px; flex:none;}
    .doc h2{font-weight:600; font-size:1.25rem; margin:22px 0 10px;}
    .doc h3{font-weight:500; font-size:1.12rem; margin:18px 0 8px;}
    .doc p{margin:0 0 12px; font-size:1.15rem; color:#DCDFE6;}
    .doc ul,.doc ol{margin:0 0 14px; padding-left:24px;}
    .doc li{margin:0 0 9px; font-size:1.15rem; color:#DCDFE6;}
    .doc strong{color:var(--accent); font-weight:700;}
    .doc hr{border:0; border-top:1px solid var(--line); margin:24px 0;}
    .doc a{color:var(--accent);}
    .doc input[type=checkbox]{accent-color:var(--accent); margin-right:8px; transform:scale(1.2);}
    .doc .katex{color:var(--text); font-size:1.06em;}
    .doc .katex-display{overflow-x:auto; overflow-y:hidden; padding:6px 0;}
    pre.error{white-space:pre-wrap; word-break:break-word; font-family:ui-monospace, monospace; font-size:.9rem; color:#F2B8B0; background:#241315; border:1px solid #4A2529; border-radius:8px; padding:14px;}
    .modal{position:fixed; inset:0; background:var(--bg); z-index:150; display:none; flex-direction:column;}
    .modal-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 24px; border-bottom:1px solid var(--line); flex:none;}
    .modal-title{font-weight:700; font-size:1.35rem; display:flex; align-items:center; gap:10px;}
    .modal-title::before{content:""; width:15px; height:15px; background:var(--accent); border-radius:4px;}
    .modal-body{flex:1; overflow-y:auto; padding:24px;}
    .modal-inner{max-width:760px; margin:0 auto;}
    .modal-foot{flex:none; border-top:1px solid var(--line); padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:14px;}
    .modal-foot .gen-status{color:var(--muted); font-size:1rem;}
    .qmeta{color:var(--muted); font-size:1rem; margin-bottom:12px;}
    .qtext{font-weight:600; font-size:1.4rem; line-height:1.4; margin:0 0 22px;}
    .opts{display:flex; flex-direction:column; gap:12px;}
    .opt{display:flex; gap:12px; align-items:flex-start; text-align:left; font-family:inherit; font-size:1.15rem; color:var(--text); background:#12141B; border:1.5px solid var(--line); border-radius:12px; padding:16px 18px; cursor:pointer; transition:border-color .12s ease, background .12s ease;}
    .opt:hover:not(.locked){border-color:#3A4152; background:#161922;}
    .opt.locked{cursor:default;}
    .opt .letter{font-weight:700; color:var(--muted); flex:none;}
    .opt.correct{background:var(--good-bg); border-color:var(--good-border);}
    .opt.correct .letter{color:var(--good);}
    .opt.wrong{background:var(--bad-bg); border-color:var(--bad-border);}
    .opt.wrong .letter{color:var(--bad);}
    .explain-card{margin-top:18px; border:1.5px solid var(--line); border-radius:12px; padding:16px 18px;}
    .explain-card.ok{background:var(--good-bg); border-color:var(--good-border);}
    .explain-card.no{background:var(--bad-bg); border-color:var(--bad-border);}
    .explain-card .verdict{font-weight:700; font-size:1.14rem; margin:0 0 6px;}
    .explain-card.ok .verdict{color:var(--good);}
    .explain-card.no .verdict{color:var(--bad);}
    .explain-card .explain{color:#D3D8E0; font-size:1.08rem; line-height:1.55; margin:0;}
    .quiz-nav{display:flex; justify-content:flex-end; margin-top:26px;}
    .next-btn{font-family:inherit; font-weight:600; font-size:1.08rem; color:#fff; background:var(--accent); border:0; border-radius:10px; padding:14px 30px; cursor:pointer;}
    .next-btn:hover{background:var(--accent-hover);}
    .score-wrap{text-align:center; padding:30px 0;}
    .score-num{font-weight:700; font-size:3rem; margin:0 0 6px;}
    .score-sub{color:var(--muted); font-size:1.15rem; margin:0 0 26px;}
    .score-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
    .backdrop{display:none;}
    @media(max-width:800px){
      html{font-size:16.5px;}
      .sidebar{position:fixed; top:0; left:0; height:100%; box-shadow:0 0 40px rgba(0,0,0,.6);}
      .app:not(.collapsed) .backdrop{display:block; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:40;}
      .content{padding:20px 16px;}
      .modal-body{padding:18px 16px;}
      .qtext{font-size:1.25rem;}
    }
    @media(prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }