:root{
    --ink:#1A2540; --ink-2:#233163; --ink-3:#121B36;
    --vellum:#F2ECD9; --vellum-2:#FAF7EC; --paper:#FFFFFF;
    --brass:#B8863B; --brass-light:#D8AE66;
    --oxblood:#6E2430; --oxblood-light:#8C3040;
    --charcoal:#241F16; --ink-dim:#5A5140;
    --paper-text:#EDE4CB; --paper-text-dim:#B9AF92;
    --rule:#E3D9BC; --rule-dark:rgba(233,223,196,0.14);
    --ok:#3F6B4A;
  }
  *{box-sizing:border-box;}
  body{margin:0; font-family:'Lora',serif; background:var(--vellum); color:var(--charcoal); font-size:15px;}
  h1,h2,h3,h4{font-family:'Fraunces',serif; font-weight:600; margin:0;}
  a{color:inherit; text-decoration:none;}
  button{font-family:inherit; cursor:pointer;}
  ::-webkit-scrollbar{width:8px; height:8px;}
  ::-webkit-scrollbar-thumb{background:#00000022; border-radius:4px;}

  .eyebrow{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--brass); display:flex; align-items:center; gap:8px;}
  .eyebrow::before{content:""; width:16px; height:1px; background:var(--brass);}

  /* ---------------- LOGIN / SPLASH ---------------- */
  #splash{
    position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
    background:radial-gradient(ellipse at 20% -10%, rgba(184,134,59,0.18), transparent 55%), linear-gradient(180deg,var(--ink-3),var(--ink));
    color:var(--paper-text);
  }
  .login-card{width:min(380px,90vw); text-align:center;}
  .login-card svg{width:64px; height:64px; margin-bottom:18px;}
  .login-card h1{color:#fff; font-size:28px; margin-bottom:6px;}
  .login-card p.sub{color:var(--paper-text-dim); font-size:14px; margin:0 0 34px;}
  .login-card input{
    width:100%; background:rgba(255,255,255,0.05); border:1px solid var(--rule-dark); color:#fff;
    padding:13px 14px; border-radius:2px; margin-bottom:12px; font-family:'Lora',serif; font-size:14.5px;
  }
  .login-card input::placeholder{color:var(--paper-text-dim);}
  .login-card input:focus{outline:1px solid var(--brass-light);}
  .btn-primary{
    width:100%; background:var(--brass); color:var(--ink-3); border:none; padding:14px; border-radius:2px;
    font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase; margin-top:8px;
    transition:background .2s;
  }
  .btn-primary:hover{background:var(--brass-light);}
  .login-hint{margin-top:22px; font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--paper-text-dim); letter-spacing:0.04em;}

  /* ---------------- APP SHELL ---------------- */
  #app{display:none; height:100vh; width:100%;}
  #app.active{display:grid; grid-template-columns:250px 1fr; grid-template-rows:64px 1fr;}

  .topbar{
    grid-column:1 / 3; grid-row:1; background:var(--paper); border-bottom:1px solid var(--rule);
    display:flex; align-items:center; justify-content:space-between; padding:0 26px; z-index:5; gap:14px;
  }
  .topbar .left{display:flex; align-items:center; gap:14px; flex:1; min-width:0;}
  .menu-btn{
    display:none; align-items:center; justify-content:center; width:36px; height:36px; flex-shrink:0;
    background:transparent; border:1px solid var(--rule); border-radius:2px; color:var(--ink); font-size:16px; cursor:pointer; padding:0;
  }
  .menu-btn:hover{border-color:var(--brass);}
  .topbar .search{
    display:flex; align-items:center; gap:8px; background:var(--vellum-2); border:1px solid var(--rule);
    padding:8px 14px; border-radius:2px; width:320px; font-size:13.5px; color:var(--ink-dim);
  }
  .topbar .right{display:flex; align-items:center; gap:18px; flex-shrink:0;}
  .workspace-switch{
    font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.05em; text-transform:uppercase;
    color:var(--brass); text-decoration:none; border:1px solid var(--rule); padding:6px 12px; border-radius:2px;
    white-space:nowrap; transition:border-color .2s, color .2s;
  }
  .workspace-switch:hover{border-color:var(--brass); color:var(--oxblood,#6E2430);}
  .topbar .bell{font-size:16px; color:var(--ink-dim); position:relative;}
  .topbar .bell .dot{position:absolute; top:-2px; right:-4px; width:7px; height:7px; background:var(--oxblood); border-radius:50%;}
  .avatar{width:34px; height:34px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:600; font-size:14px; overflow:hidden; flex-shrink:0;}
  .avatar img{width:100%; height:100%; object-fit:cover; display:block;}
  .avatar-lg{width:88px; height:88px; font-size:32px;}
  .avatar-upload-row{display:flex; align-items:center; gap:18px; margin-top:10px;}
  .avatar-actions{display:flex; flex-direction:column; gap:8px;}
  .avatar-actions .hint{font-size:11.5px; color:var(--ink-dim); max-width:220px;}
  input[type="file"].hidden-file{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden;}
  .upload-error{color:var(--oxblood,#6E2430); font-size:12px; margin-top:8px; display:none;}
  .upload-error.show{display:block;}

  .sidebar{
    grid-column:1; grid-row:2; background:var(--ink-3); color:var(--paper-text); overflow-y:auto;
    display:flex; flex-direction:column; padding:20px 0 20px;
  }
  .sidebar .brand{display:flex; align-items:center; gap:10px; padding:0 22px 22px; border-bottom:1px solid var(--rule-dark); margin-bottom:14px;}
  .sidebar .brand svg{width:26px; height:26px;}
  .sidebar .brand span{font-family:'Fraunces',serif; font-weight:700; font-size:15px; color:#fff;}
  .sidebar .brand small{display:block; font-family:'IBM Plex Mono',monospace; font-size:8.5px; letter-spacing:0.1em; color:var(--brass-light); text-transform:uppercase;}
  .nav-group{margin-bottom:6px;}
  .nav-group-label{padding:14px 22px 6px; font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--paper-text-dim);}
  .nav-item{
    display:flex; align-items:center; gap:11px; padding:9px 22px; font-size:13.5px; color:var(--paper-text-dim);
    border-left:2px solid transparent; cursor:pointer; transition:background .15s, color .15s;
  }
  .nav-item .ic{width:16px; text-align:center; font-size:13px;}
  .nav-item:hover{background:rgba(255,255,255,0.03); color:#fff;}
  .nav-item.active{background:rgba(184,134,59,0.1); color:#fff; border-left-color:var(--brass);}

  .main{grid-column:2; grid-row:2; overflow-y:auto; padding:36px 42px 70px;}
  .panel{display:none; max-width:1120px; margin:0 auto;}
  .panel.active{display:block; animation:fade .35s ease;}
  @keyframes fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

  .page-head{margin-bottom:28px;}
  .page-head h2{font-size:26px; margin-top:8px;}
  .page-head p{color:var(--ink-dim); margin-top:8px; font-size:14.5px; max-width:560px;}

  .grid{display:grid; gap:18px;}
  .grid.cols-2{grid-template-columns:1fr 1fr;}
  .grid.cols-3{grid-template-columns:repeat(3,1fr);}
  .grid.cols-4{grid-template-columns:repeat(4,1fr);}

  .card{background:var(--paper); border:1px solid var(--rule); border-radius:3px; padding:22px;}
  .card h4{font-size:15.5px; margin-bottom:4px;}
  .card .meta{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--brass); margin-bottom:10px;}

  /* dashboard */
  .welcome-band{
    background:linear-gradient(120deg,var(--ink) 0%, var(--ink-2) 100%); color:#fff; border-radius:3px; padding:30px 32px;
    display:flex; justify-content:space-between; align-items:center; margin-bottom:26px;
  }
  .welcome-band h2{color:#fff; font-size:23px;}
  .welcome-band p{color:var(--paper-text-dim); font-size:13.5px; margin-top:6px;}
  .welcome-band .verse{font-family:'Fraunces',serif; font-style:italic; font-size:13px; color:var(--brass-light); max-width:280px; text-align:right; line-height:1.5;}

  .stat{padding:20px 22px;}
  .stat .num{font-family:'Fraunces',serif; font-size:30px; color:var(--ink);}
  .stat .lbl{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-dim); margin-top:4px;}

  .progress-bar{height:6px; background:var(--vellum-2); border-radius:3px; overflow:hidden; margin-top:8px;}
  .progress-bar span{display:block; height:100%; background:var(--brass);}

  .list-row{display:flex; justify-content:space-between; align-items:center; padding:13px 0; border-bottom:1px solid var(--rule);}
  .list-row:last-child{border-bottom:none;}
  .list-row .l-title{font-size:14px; font-weight:600;}
  .list-row .l-sub{font-size:12px; color:var(--ink-dim); margin-top:2px;}
  .tag{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.06em; text-transform:uppercase; padding:3px 8px; border-radius:2px;}
  .tag.live{background:rgba(110,36,48,0.1); color:var(--oxblood);}
  .tag.done{background:rgba(63,107,74,0.12); color:var(--ok);}
  .tag.progress{background:rgba(184,134,59,0.14); color:#8A5A26;}
  .tag.locked{background:#eee; color:#888;}

  /* course room */
  .module{border:1px solid var(--rule); border-radius:3px; margin-bottom:14px; background:var(--paper); overflow:hidden;}
  .module-head{display:flex; justify-content:space-between; align-items:center; padding:16px 20px; background:var(--vellum-2); cursor:pointer;}
  .module-head h4{font-size:14.5px;}
  .lesson-row{display:flex; align-items:center; gap:14px; padding:13px 20px; border-top:1px solid var(--rule); font-size:13.5px;}
  .lesson-row .status{width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0;}
  .status.done{background:var(--ok); color:#fff;}
  .status.progress{background:var(--brass); color:#fff;}
  .status.locked{background:#e4e4e4; color:#999;}
  .lesson-row .l-name{flex:1;}
  .lesson-row .l-meta{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ink-dim);}

  /* community */
  .space-card{display:flex; align-items:center; gap:14px; padding:18px; border:1px solid var(--rule); border-radius:3px; background:var(--paper);}
  .space-card .icon{width:40px; height:40px; border-radius:50%; background:var(--ink); color:var(--brass-light); display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:600;}

  /* library / marketplace */
  .res-card{border:1px solid var(--rule); border-radius:3px; background:var(--paper); overflow:hidden;}
  .res-cover{height:110px; background:linear-gradient(135deg,var(--ink),var(--ink-2)); display:flex; align-items:center; justify-content:center; color:var(--brass-light); font-family:'Fraunces',serif; font-size:26px; font-style:italic;}
  .res-body{padding:16px 18px;}
  .price{font-family:'IBM Plex Mono',monospace; color:var(--oxblood); font-weight:600; font-size:13.5px; margin-top:8px;}

  .btn-ghost{border:1px solid var(--rule); background:transparent; padding:8px 16px; border-radius:2px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink);}
  .btn-ghost:hover{border-color:var(--brass); color:var(--brass);}
  .btn-solid{border:none; background:var(--ink); color:#fff; padding:9px 18px; border-radius:2px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase;}
  .btn-solid:hover{background:var(--ink-2);}

  .empty{border:1px dashed var(--rule); border-radius:3px; padding:34px; text-align:center; color:var(--ink-dim); font-size:13.5px;}

  .proto-flag{
    position:fixed; bottom:14px; right:16px; z-index:60; background:var(--ink-3); color:var(--paper-text-dim);
    font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.05em; padding:8px 12px; border-radius:2px;
    border:1px solid var(--rule-dark); max-width:230px; line-height:1.5;
  }

  @media (max-width:900px){
    #app.active{grid-template-columns:1fr;}
    .menu-btn{display:flex;}
    .sidebar{position:fixed; left:0; top:64px; bottom:0; width:250px; transform:translateX(-100%); transition:transform .25s ease; z-index:30; box-shadow:8px 0 24px rgba(0,0,0,0.25);}
    .sidebar.open{transform:translateX(0);}
    .sidebar-backdrop{display:none; position:fixed; inset:64px 0 0 0; background:rgba(15,23,54,0.45); z-index:25;}
    .sidebar-backdrop.open{display:block;}
    .main{grid-column:1;}
    .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr;}
    .topbar .search{display:none;}
    .topbar{padding:0 16px;}
  }
  @media (max-width:560px){
    .main{padding:22px 16px 60px;}
    .welcome-band{flex-direction:column; align-items:flex-start; gap:16px;}
    .welcome-band .verse{text-align:left; max-width:100%;}
    .list-row{flex-direction:column; align-items:flex-start; gap:8px;}
    .list-row > *:last-child{align-self:flex-start;}
    .module-head{flex-wrap:wrap; gap:8px;}
    .lesson-row{flex-wrap:wrap;}
    .modal{padding:22px 18px;}
    .proto-flag{left:14px; right:14px; max-width:none; text-align:center;}
  }

/* ---------------- additions for the real (wired) app ---------------- */
.form-error{
  background:rgba(110,36,48,0.08); border:1px solid var(--oxblood-light,#8C3040); color:var(--oxblood,#6E2430);
  padding:10px 14px; border-radius:2px; font-size:12.5px; margin-bottom:12px; display:none;
}
.form-error.show{display:block;}
.tab-switch{display:flex; gap:0; margin-bottom:22px; border:1px solid var(--rule-dark); border-radius:2px; overflow:hidden;}
.tab-switch button{flex:1; background:transparent; border:none; color:var(--paper-text-dim); padding:10px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase;}
.tab-switch button.active{background:var(--brass); color:var(--ink-3);}

.modal-backdrop{position:fixed; inset:0; background:rgba(15,23,54,0.55); display:none; align-items:center; justify-content:center; z-index:80;}
.modal-backdrop.open{display:flex;}
.modal{background:var(--paper); width:min(480px,92vw); max-height:86vh; overflow-y:auto; border-radius:3px; padding:34px 32px;}
.modal h3{font-size:18px; margin-bottom:16px;}
.field{margin-bottom:22px;}
.field label{display:block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:6px;}
.field input, .field textarea, .field select{
  width:100%; border:1px solid var(--rule); border-radius:2px; padding:10px 12px; font-family:'Lora',serif; font-size:13.5px; background:#fff;
}
.field textarea{resize:vertical; min-height:70px;}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:18px;}
.modal-close{position:absolute; top:14px; right:16px; background:none; border:none; font-size:18px; color:var(--ink-dim); cursor:pointer;}

.loading{padding:40px; text-align:center; color:var(--ink-dim); font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.05em;}
.role-badge{
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase;
  background:rgba(184,134,59,0.14); color:#8A5A26; padding:2px 8px; border-radius:2px; margin-left:8px;
}
.small-btn{background:none; border:1px solid var(--rule); border-radius:2px; padding:5px 10px; font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; color:var(--ink-dim); cursor:pointer;}
.small-btn:disabled{opacity:0.4; cursor:not-allowed;}
.small-btn:disabled:hover{border-color:var(--rule); color:var(--ink-dim);}
.small-btn:hover{border-color:var(--oxblood-light,#8C3040); color:var(--oxblood,#6E2430);}
.small-btn.on{background:var(--ok,#3F6B4A); color:#fff; border-color:var(--ok,#3F6B4A);}

.lesson-editable{cursor:pointer;}
.lesson-editable:hover{background:var(--vellum-2);}
.module-actions, .lesson-actions{display:flex; gap:8px;}
.inline-add{padding:10px 20px; border-top:1px solid var(--rule);}
.role-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:10px;
}

.role-option{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border:1px solid var(--rule);
  border-radius:3px;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}

.role-option:hover{
  background:var(--vellum-2);
  border-color:var(--brass);
}

.role-option input{
  margin:0;
  width:16px;
  height:16px;
  flex-shrink:0;
}

.role-option span{
  display:flex;
  align-items:center;
}