:root{
      --paper:#f6efe3;
      --paper-soft:#fcf8f0;
      --surface:#fffdf8;
      --ink:#1d2b34;
      --body:#344650;
      --muted:#6a767e;
      --line:#e5d8c6;
      --navy:#183549;
      --teal:#277d78;
      --gold:#b8752a;
      --green:#2f7d60;
      --red:#a95345;
      --shadow:0 16px 36px rgba(50,38,23,.10);
      --radius:12px;
      --sidebar:320px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
    body{
      margin:0;
      min-height:100vh;
      color:var(--ink);
      background:
        linear-gradient(rgba(246,239,227,.96), rgba(246,239,227,.96)),
        radial-gradient(circle at 10% 0%, rgba(184,117,42,.12), transparent 30rem),
        radial-gradient(circle at 100% 0%, rgba(39,125,120,.10), transparent 28rem),
        var(--paper);
      font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    a{color:inherit;text-decoration:none}
    button,input{font:inherit}
    button{cursor:pointer}
    .hidden{display:none !important}

    .brand{
      display:inline-flex;
      align-items:center;
      gap:.75rem;
      color:var(--navy);
      font-weight:900;
      letter-spacing:-.02em;
    }

    .brand-mark{
      width:40px;
      height:40px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:var(--navy);
      color:var(--paper-soft);
      font-size:.82rem;
      font-weight:950;
    }

    .login-screen{
      min-height:100vh;
      display:grid;
      grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
    }

    .login-copy{
      padding:clamp(2rem,5vw,5rem);
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      gap:2.5rem;
      border-right:1px solid var(--line);
    }

    .login-copy h1{
      margin:0 0 1rem;
      max-width:780px;
      color:var(--navy);
      font-family:Georgia, "Times New Roman", serif;
      font-size:clamp(3rem,8vw,6rem);
      line-height:.98;
    }

    .login-copy p{
      margin:0;
      max-width:640px;
      color:var(--body);
      font-size:clamp(1rem,2vw,1.18rem);
      line-height:1.65;
    }

    .login-points{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:1rem;
      margin-top:2rem;
    }

    .login-point{
      min-height:128px;
      padding:1rem;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:rgba(255,253,248,.68);
    }

    .login-point b{
      display:block;
      color:var(--navy);
      margin-bottom:.35rem;
    }

    .login-point span{
      display:block;
      color:var(--muted);
      line-height:1.5;
      font-size:.93rem;
    }

    .login-panel{
      display:grid;
      place-items:center;
      padding:2rem;
    }

    .card{
      width:min(100%, 460px);
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:rgba(255,253,248,.84);
      box-shadow:var(--shadow);
      padding:1.35rem;
    }

    .card h2{
      margin:0 0 .4rem;
      color:var(--navy);
      font-size:1.45rem;
      letter-spacing:-.02em;
    }

    .card p{
      margin:0 0 1rem;
      color:var(--muted);
      line-height:1.55;
      font-size:.95rem;
    }

    .field{display:grid;gap:.4rem;margin-bottom:.9rem}
    .field label{
      color:var(--navy);
      font-size:.83rem;
      font-weight:850;
    }

    .field input{
      width:100%;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:var(--surface);
      color:var(--ink);
      padding:.85rem .9rem;
      outline:none;
    }

    .field input:focus{
      border-color:rgba(39,125,120,.7);
      box-shadow:0 0 0 3px rgba(39,125,120,.12);
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.45rem;
      min-height:44px;
      border:1px solid transparent;
      border-radius:var(--radius);
      padding:.76rem 1rem;
      font-weight:900;
      line-height:1;
      transition:.16s ease;
    }

    .btn-primary{color:var(--paper-soft);background:var(--navy)}
    .btn-primary:hover{background:#10293b}
    .btn-soft{color:var(--navy);background:var(--paper-soft);border-color:var(--line)}
    .btn-soft:hover{background:#f2e7d8}
    .btn-teal{color:var(--paper-soft);background:var(--teal)}
    .btn-teal:hover{background:#216f6b}
    .card .btn-primary{width:100%}

    .auth-switch{
      display:flex;
      gap:.55rem;
      margin:0 0 1rem;
    }

    .auth-switch a{
      flex:1 1 0;
      text-align:center;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:var(--paper-soft);
      color:var(--navy);
      padding:.72rem .9rem;
      font-weight:900;
    }

    .auth-switch a.active{
      background:var(--navy);
      color:var(--paper-soft);
      border-color:var(--navy);
    }

    .flash-stack{display:grid;gap:.65rem;margin:0 0 1rem}

    .flash{
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:.8rem .9rem;
      background:var(--surface);
      color:var(--body);
      line-height:1.5;
      font-size:.92rem;
    }

    .flash.success{background:#f3fbf7;border-color:rgba(47,125,96,.28);color:#255b47}
    .flash.error{background:#fff5f1;border-color:rgba(169,83,69,.28);color:#7a3c31}
    .flash.info{background:#f4f7f8;border-color:rgba(24,53,73,.18);color:#244050}

    .status-card p strong{color:var(--navy)}
    .status-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.05rem}

    .app{
      min-height:100vh;
      display:grid;
      grid-template-columns:var(--sidebar) minmax(0,1fr);
    }

    .sidebar{
      position:sticky;
      top:0;
      height:100vh;
      display:flex;
      flex-direction:column;
      gap:1rem;
      border-right:1px solid var(--line);
      background:rgba(252,248,240,.92);
      backdrop-filter:blur(14px);
      padding:1rem;
      overflow:auto;
    }

    .member-card{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:var(--surface);
      padding:1rem;
    }

    .member-top{
      display:grid;
      grid-template-columns:54px minmax(0,1fr);
      gap:.85rem;
      align-items:center;
    }

    .avatar{
      width:54px;
      height:54px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:var(--navy);
      color:var(--paper-soft);
      font-size:1rem;
      font-weight:950;
    }

    .member-name b{
      display:block;
      color:var(--navy);
      font-size:1rem;
    }

    .member-name span{
      display:block;
      color:var(--muted);
      font-size:.84rem;
      margin-top:.2rem;
    }

    .progress-box{
      margin-top:1rem;
      padding-top:1rem;
      border-top:1px solid var(--line);
    }

    .progress-line{
      height:12px;
      border-radius:999px;
      background:#ecdfcf;
      overflow:hidden;
    }

    .progress-fill{
      width:0;
      height:100%;
      background:linear-gradient(90deg, var(--gold), var(--teal));
      transition:width .18s ease;
    }

    .progress-meta{
      margin-top:.55rem;
      display:flex;
      justify-content:space-between;
      gap:1rem;
      color:var(--muted);
      font-size:.82rem;
      font-weight:700;
    }

    .nav-title{
      color:var(--navy);
      font-size:.82rem;
      font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
      margin-bottom:.6rem;
    }

    .chapter-nav{display:grid;gap:.55rem}

    .nav-group,
    .nav-subgroup{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:rgba(255,253,248,.72);
      overflow:hidden;
    }

    .nav-group-summary,
    .nav-subgroup-summary{
      list-style:none;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
      cursor:pointer;
      color:var(--navy);
      font-weight:900;
    }

    .nav-group-summary::-webkit-details-marker,
    .nav-subgroup-summary::-webkit-details-marker{
      display:none;
    }

    .nav-group-summary{
      padding:.8rem .9rem;
      font-size:.92rem;
    }

    .nav-subgroup-summary{
      padding:.72rem .8rem;
      font-size:.86rem;
    }

    .nav-group-summary::after,
    .nav-subgroup-summary::after{
      content:'▾';
      color:var(--muted);
      font-size:.86rem;
      transition:transform .16s ease;
    }

    .nav-group[open] > .nav-group-summary::after,
    .nav-subgroup[open] > .nav-subgroup-summary::after{
      transform:rotate(180deg);
    }

    .nav-count{
      margin-left:auto;
      min-width:28px;
      padding:.12rem .45rem;
      border-radius:999px;
      border:1px solid var(--line);
      background:var(--surface);
      color:var(--muted);
      font-size:.74rem;
      font-weight:800;
      text-align:center;
    }

    .nav-group-items{
      display:grid;
      gap:.45rem;
      padding:0 .55rem .55rem;
    }

    .nav-subtree{
      padding-top:0;
    }

    .nav-subgroup{
      background:var(--surface);
    }

    .nav-subgroup .nav-group-items{
      padding-left:.7rem;
      border-left:1px dashed rgba(184,117,42,.24);
      margin-left:.65rem;
    }

    .chapter-link{
      width:100%;
      display:grid;
      grid-template-columns:40px minmax(0,1fr) 14px;
      gap:.7rem;
      align-items:center;
      border:1px solid transparent;
      border-radius:var(--radius);
      padding:.65rem;
      text-align:left;
      background:transparent;
      color:var(--ink);
    }

    .chapter-link:hover,
    .chapter-link.active{
      border-color:var(--line);
      background:rgba(255,253,248,.74);
    }

    .chapter-no{
      width:40px;
      height:40px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:var(--paper-soft);
      color:var(--navy);
      border:1px solid var(--line);
      font-weight:950;
      font-size:.92rem;
    }

    .chapter-copy b{
      display:block;
      color:var(--navy);
      font-size:.95rem;
      line-height:1.3;
    }

    .chapter-copy span{
      display:block;
      color:var(--muted);
      font-size:.8rem;
      margin-top:.18rem;
    }

    .state-dot{
      width:12px;
      height:12px;
      border-radius:50%;
      background:#d7c8b7;
    }

    .state-dot.live{background:var(--green)}
    .state-dot.upcoming{background:var(--gold)}
    .state-dot.done{background:var(--teal)}

    .sidebar-actions{display:grid;gap:.6rem}

    .main{min-width:0}

    .topbar{
      position:sticky;
      top:0;
      z-index:20;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:1rem 1.15rem;
      border-bottom:1px solid var(--line);
      background:rgba(246,239,227,.86);
      backdrop-filter:blur(14px);
    }

    .topbar h2{
      margin:0;
      color:var(--navy);
      font-size:1.15rem;
    }

    .topbar p{
      margin:.2rem 0 0;
      color:var(--muted);
      font-size:.9rem;
      line-height:1.45;
    }

    .top-actions,
    .reader-actions{
      display:flex;
      align-items:flex-start;
      gap:.7rem;
      flex-wrap:wrap;
    }

    .reader-actions{
      align-self:flex-start;
      width:auto;
    }

    .reader-actions .btn{
      width:auto;
      flex:0 0 auto;
      align-self:flex-start;
      height:auto;
      min-width:148px;
    }

    #nextBtn{
      width:auto !important;
      min-height:44px;
      padding:.76rem 1rem;
    }

    .mobile-menu{display:none}

    .content{
      width:min(100% - 2rem, 1180px);
      margin:0 auto;
      padding:1rem 0 1.25rem;
    }

    .status-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:1rem;
      margin-bottom:1rem;
    }

    .stat-card{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:rgba(255,253,248,.74);
      padding:1rem;
    }

    .stat-card small{
      display:block;
      color:var(--muted);
      font-size:.76rem;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

    .stat-card b{
      display:block;
      color:var(--navy);
      font-size:1.05rem;
      margin-top:.45rem;
    }

    .stat-card span{
      display:block;
      color:var(--body);
      font-size:.92rem;
      line-height:1.55;
      margin-top:.38rem;
    }

    .reader-card{
      border:1px solid var(--line);
      border-radius:calc(var(--radius) + 2px);
      background:rgba(255,253,248,.84);
      box-shadow:var(--shadow);
      overflow:hidden;
    }

    .reader-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:1rem;
      padding:1.1rem;
      border-bottom:1px solid var(--line);
    }

    .reader-kicker{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      color:var(--gold);
      font-size:.78rem;
      font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

    .reader-head h1{
      margin:.3rem 0 .45rem;
      color:var(--navy);
      font-family:Georgia, "Times New Roman", serif;
      font-size:2rem;
      line-height:1.05;
    }

    .reader-head p{
      margin:0;
      max-width:760px;
      color:var(--body);
      line-height:1.65;
    }

    .frame-wrap{
      min-height:560px;
      background:#fff;
    }

    .chapter-frame,
    .html-preview-frame{
      display:block;
      width:100%;
      min-height:560px;
      border:0;
      background:#fff;
    }

    .custom-content{
      padding:1.25rem;
      color:var(--body);
      line-height:1.7;
    }

    .custom-content h2,
    .custom-content h3{color:var(--navy)}

    .upcoming-panel{
      display:grid;
      grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);
      gap:1rem;
      padding:1.1rem;
      background:rgba(255,253,248,.74);
    }

    .video-placeholder,
    .upcoming-side{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:var(--surface);
      padding:1rem;
    }

    .video-placeholder b{
      display:block;
      color:var(--navy);
      font-size:1.05rem;
    }

    .video-description{
      margin-top:.45rem;
      color:var(--body);
      line-height:1.65;
    }

    .video-embed{
      width:100%;
      min-height:360px;
      border:0;
      border-radius:var(--radius);
      margin-top:.85rem;
    }

    .upcoming-side h3{
      margin:0 0 .8rem;
      color:var(--navy);
      font-size:1rem;
    }

    .upcoming-list{
      display:grid;
      gap:.7rem;
      padding:0;
      margin:0;
      list-style:none;
    }

    .upcoming-list li{
      display:grid;
      grid-template-columns:24px minmax(0,1fr);
      gap:.55rem;
      color:var(--body);
      line-height:1.45;
      font-size:.94rem;
    }

    .upcoming-list i{
      width:24px;
      height:24px;
      border-radius:50%;
      display:grid;
      place-items:center;
      color:var(--gold);
      background:var(--paper-soft);
      border:1px solid var(--line);
      font-style:normal;
      font-size:.78rem;
      font-weight:950;
    }

    .mobile-drawer{
      position:fixed;
      inset:0;
      z-index:90;
      background:rgba(24,53,73,.34);
      display:none;
    }

    .watermark{
      position:fixed;
      right:.9rem;
      bottom:.9rem;
      z-index:110;
      border:1px solid rgba(24,53,73,.12);
      border-radius:999px;
      background:rgba(255,253,248,.86);
      color:var(--navy);
      padding:.55rem .85rem;
      font-size:.82rem;
      font-weight:800;
      box-shadow:var(--shadow);
      backdrop-filter:blur(10px);
    }

    body.drawer-open .mobile-drawer{display:block}
    body.drawer-open .sidebar{transform:translateX(0)}

    @media(max-width:1040px){
      .login-screen{grid-template-columns:1fr}
      .login-copy{border-right:0;border-bottom:1px solid var(--line)}
      .login-points{grid-template-columns:1fr}
      .app{grid-template-columns:1fr}
      .sidebar{
        position:fixed;
        z-index:100;
        left:0;
        top:0;
        width:min(86vw, 330px);
        transform:translateX(-105%);
        transition:transform .2s ease;
        box-shadow:var(--shadow);
      }
      .mobile-menu{display:inline-flex}
      .status-grid{grid-template-columns:1fr}
      .upcoming-panel{grid-template-columns:1fr}
    }

    @media(max-width:720px){
      .login-panel{padding:1rem}
      .login-copy{padding:1.25rem}
      .topbar{align-items:flex-start;padding:.85rem}
      .top-actions{width:100%;justify-content:stretch}
      .top-actions .btn{flex:1 1 auto}
      .content{width:min(100% - 1rem, 1180px);padding:.8rem 0 1rem}
      .reader-head{display:grid}
      .reader-actions{justify-content:stretch}
      .reader-actions .btn{flex:1 1 auto;min-width:0}
      .frame-wrap{min-height:500px}
      .watermark{left:.6rem;right:.6rem;text-align:center}
    }