: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:340px;
    }

    *{box-sizing:border-box}
    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,.11), transparent 30rem),
        radial-gradient(circle at 100% 0%, rgba(39,125,120,.09), 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,textarea,select{font:inherit}
    button{cursor:pointer}

    .brand{
      display:inline-flex;
      align-items:center;
      gap:.75rem;
      color:var(--navy);
      font-weight:950;
    }

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

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.45rem;
      min-height:42px;
      border:1px solid transparent;
      border-radius:var(--radius);
      padding:.72rem .95rem;
      font-weight:900;
      line-height:1;
    }

    .btn-primary{background:var(--navy);color:var(--paper-soft)}
    .btn-primary:hover{background:#10293b}
    .btn-soft{background:var(--paper-soft);color:var(--navy);border-color:var(--line)}
    .btn-soft:hover{background:#f2e7d8}
    .btn-teal{background:var(--teal);color:var(--paper-soft)}
    .btn-teal:hover{background:#216f6b}
    .btn-danger{background:#fff5f1;color:var(--red);border-color:#e8c8be}
    .btn-danger:hover{background:#fbe8e1}

    .center-shell{
      min-height:100vh;
      display:grid;
      place-items:center;
      padding:1rem;
    }

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

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

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

    .field{display:grid;gap:.35rem;margin-bottom:.9rem}
    .field label{color:var(--navy);font-size:.82rem;font-weight:900}
    .field input,
    .field textarea,
    .field select{
      width:100%;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:var(--surface);
      color:var(--ink);
      padding:.78rem .85rem;
      outline:none;
    }

    .field textarea{
      min-height:120px;
      resize:vertical;
      line-height:1.55;
    }

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

    .hint{
      display:block;
      color:var(--muted);
      font-size:.8rem;
      line-height:1.45;
      margin-top:.15rem;
    }

    .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}

    .dashboard{
      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;
      padding:1rem;
      border-right:1px solid var(--line);
      background:rgba(252,248,240,.92);
      backdrop-filter:blur(14px);
      overflow:auto;
    }

    .side-card,
    .panel{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:rgba(255,253,248,.84);
      box-shadow:var(--shadow);
    }

    .side-card{padding:1rem}
    .side-card h2{margin:0;color:var(--navy);font-size:1.02rem}
    .side-card p{margin:.3rem 0 0;color:var(--muted);font-size:.85rem;line-height:1.5}

    .stats{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:.45rem;
      margin-top:.9rem;
    }

    .stat{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:var(--paper-soft);
      padding:.58rem;
    }

    .stat b{
      display:block;
      color:var(--navy);
      font-size:1.1rem;
      line-height:1;
    }

    .stat span{
      display:block;
      color:var(--muted);
      font-size:.72rem;
      margin-top:.22rem;
    }

    .side-links{display:grid;gap:.6rem}
    .side-links a{width:100%}

    .admin-menu{
      display:grid;
      gap:.55rem;
      margin-top:.85rem;
    }

    .admin-menu-link{
      display:flex;
      align-items:center;
      min-height:44px;
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:.78rem .9rem;
      background:var(--surface);
      color:var(--navy);
      font-weight:900;
      line-height:1.2;
    }

    .admin-menu-link:hover{
      background:var(--paper-soft);
    }

    .admin-menu-link.active{
      background:var(--navy);
      border-color:var(--navy);
      color:var(--paper-soft);
    }

    .chapter-tree{display:grid;gap:.65rem;margin-top:.85rem}

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

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

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

    .chapter-group-summary{
      padding:.78rem .9rem;
      font-size:.92rem;
    }

    .chapter-subgroup-summary{
      padding:.72rem .8rem;
      font-size:.85rem;
    }

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

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

    .chapter-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:.73rem;
      font-weight:800;
      text-align:center;
    }

    .chapter-subgroups{
      display:grid;
      gap:.55rem;
      padding:0 .55rem .55rem;
    }

    .chapter-list{display:grid;gap:.45rem;margin-top:.85rem}
    .chapter-list.nested{margin-top:0;padding:0 .55rem .55rem}
    .chapter-subgroup .chapter-list.nested{
      padding-left:.75rem;
      border-left:1px dashed rgba(184,117,42,.24);
      margin-left:.55rem;
    }
    .chapter-link{
      display:grid;
      grid-template-columns:40px minmax(0,1fr);
      gap:.7rem;
      align-items:center;
      border:1px solid transparent;
      border-radius:var(--radius);
      padding:.68rem;
      background:transparent;
    }

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

    .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:.94rem;
      line-height:1.3;
    }

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

    .main{
      min-width:0;
      padding:1rem;
    }

    .topbar{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:1rem;
      margin-bottom:1rem;
    }

    .topbar h1{
      margin:0;
      color:var(--navy);
      font-size:1.85rem;
      letter-spacing:-.03em;
    }

    .topbar p{
      margin:.35rem 0 0;
      color:var(--muted);
      line-height:1.55;
    }

    .top-actions{
      display:flex;
      gap:.7rem;
      flex-wrap:wrap;
      justify-content:flex-end;
    }

    .panel{
      padding:1rem;
      margin-bottom:1rem;
    }

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

    .panel-copy{
      margin:.35rem 0 1rem;
      color:var(--muted);
      line-height:1.55;
      font-size:.92rem;
    }

    .editor-grid{
      display:grid;
      grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);
      gap:1rem;
    }

    .form-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:.85rem;
    }

    .field.full{grid-column:1/-1}

    .form-actions{
      display:flex;
      gap:.7rem;
      flex-wrap:wrap;
      margin-top:.5rem;
    }

    .member-grid{
      display:grid;
      gap:.85rem;
      grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    }

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

    .member-card h3,
    .preview-card h3{
      margin:0;
      color:var(--navy);
      font-size:1rem;
    }

    .preview-card small{
      display:block;
      color:var(--muted);
      font-size:.75rem;
      text-transform:uppercase;
      letter-spacing:.08em;
      margin-bottom:.45rem;
    }

    .preview-frame{
      width:100%;
      min-height:420px;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:#fff;
      margin-top:.85rem;
    }

    .preview-text{
      color:var(--body);
      line-height:1.65;
      font-size:.94rem;
    }

    .editor-stage{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:var(--surface);
      overflow:hidden;
    }

    .editor-toolbar{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      padding:.8rem;
      border-bottom:1px solid var(--line);
      background:rgba(252,248,240,.9);
    }

    .tool-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:38px;
      padding:.65rem .8rem;
      border:1px solid var(--line);
      border-radius:10px;
      background:#fffdf8;
      color:var(--navy);
      font-weight:900;
      font-size:.82rem;
      line-height:1;
    }

    .tool-btn:hover{background:#f4ebde}

    .visual-editor{
      min-height:520px;
      padding:1.25rem;
      background:#fff;
      color:var(--body);
      line-height:1.7;
      font-size:1rem;
      outline:none;
      overflow:auto;
    }

    .visual-editor h1,
    .visual-editor h2,
    .visual-editor h3,
    .visual-editor h4{
      color:var(--navy);
      font-family:Georgia, "Times New Roman", serif;
      line-height:1.15;
    }

    .visual-editor h2{font-size:1.9rem}
    .visual-editor h3{font-size:1.45rem}
    .visual-editor p{margin:0 0 1rem}
    .visual-editor ul,
    .visual-editor ol{padding-left:1.35rem}
    .visual-editor blockquote{
      margin:1rem 0;
      padding:.8rem 1rem;
      border-left:4px solid var(--gold);
      background:#faf4ea;
      color:var(--body);
    }

    .editor-help{
      margin-top:.6rem;
      color:var(--muted);
      font-size:.84rem;
      line-height:1.55;
    }

    .advanced-box{
      margin-top:1rem;
      border:1px dashed var(--line);
      border-radius:var(--radius);
      background:rgba(255,253,248,.7);
      padding:.85rem;
    }

    .advanced-box summary{
      cursor:pointer;
      color:var(--navy);
      font-weight:900;
      list-style:none;
    }

    .advanced-box summary::-webkit-details-marker{display:none}

    .advanced-mode{
      margin:1rem 0 .5rem;
      display:flex;
      align-items:flex-start;
      gap:.65rem;
      color:var(--body);
      font-size:.88rem;
      line-height:1.5;
    }

    .advanced-mode input{
      margin-top:.2rem;
    }

    .preview-text h2,
    .preview-text h3{color:var(--navy)}

    .meta{
      display:grid;
      gap:.28rem;
      margin-top:.75rem;
      color:var(--body);
      font-size:.9rem;
      line-height:1.45;
    }

    .pill{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:26px;
      padding:.25rem .6rem;
      border-radius:999px;
      border:1px solid var(--line);
      background:var(--paper-soft);
      color:var(--navy);
      font-size:.76rem;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.05em;
    }

    .pill.approved,
    .pill.live{background:#f3fbf7;border-color:rgba(47,125,96,.28);color:#255b47}
    .pill.pending,
    .pill.upcoming{background:#fff8ef;border-color:rgba(184,117,42,.28);color:#8a611f}
    .pill.rejected,
    .pill.draft{background:#fff5f1;border-color:rgba(169,83,69,.28);color:#7a3c31}

    .member-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
      margin-top:.95rem;
    }

    .member-actions form{margin:0}

    .empty{
      border:1px dashed var(--line);
      border-radius:var(--radius);
      padding:1rem;
      background:rgba(255,253,248,.58);
      color:var(--muted);
      line-height:1.6;
      font-size:.92rem;
    }

    .video-frame{
      width:100%;
      min-height:320px;
      border:0;
      border-radius:var(--radius);
      margin-top:.85rem;
      background:#fff;
    }

    @media(max-width:1120px){
      .editor-grid{grid-template-columns:1fr}
    }

    @media(max-width:980px){
      .dashboard{grid-template-columns:1fr}
      .sidebar{
        position:static;
        height:auto;
        border-right:0;
        border-bottom:1px solid var(--line);
      }
      .topbar{display:grid}
      .top-actions{justify-content:flex-start}
    }

    @media(max-width:720px){
      .form-grid{grid-template-columns:1fr}
    }