@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');
  :root{
    --bg-dark:#081226;
    --bg-card-dark:#132a5c;
    --bg-card-dark-hover:#1b3468;
    --navy-header:#0f2148;
    --orange:#f97316;
    --orange-dark:#c2410c;
    --peach:#fff7ed;
    --white:#FFFFFF;
    --ink:#0f172a;
    --muted:#94a3b8;
    --muted-dark:#64748b;
    --input-bg:#f8fafc;
    --green:#16a34a;
    --green-dark:#166534;
    --red:#b91c1c;
    --line:#1e2c4d;
    --line-light:#e2e8f0;
    --r-lg:12px;
    --r-md:8px;
    --r-sm:8px;
    --r-xs:6px;
    --shadow-sm:0 1px 2px rgba(15,23,42,0.08);
    --shadow-md:0 10px 30px rgba(15,23,42,0.12);
    --shadow-lg:0 20px 60px rgba(0,0,0,0.35);
  }
  *{box-sizing:border-box;}
  html,body{ height:100%; }
  body{
    margin:0;
    background:#f8fafc;
    color:var(--ink);
    font-family:'IBM Plex Sans', Arial, Helvetica, sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  input,select,textarea,button{ font-family:'IBM Plex Sans', Arial, Helvetica, sans-serif; }
  .mono{ font-family:'IBM Plex Mono','Courier New',monospace; }
  ::selection{background:var(--orange); color:#fff;}
  a,button,input,select,textarea,.nav-item,.pill,.status-badge{ transition:background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease; }

  ::-webkit-scrollbar{ width:9px; height:9px; }
  ::-webkit-scrollbar-track{ background:transparent; }
  ::-webkit-scrollbar-thumb{ background:rgba(138,147,166,0.35); border-radius:20px; }
  ::-webkit-scrollbar-thumb:hover{ background:rgba(138,147,166,0.55); }

  .app{ display:flex; min-height:100vh; }

  /* ================= SIDEBAR ================= */
  .sidebar{
    width:290px;
    flex-shrink:0;
    background:var(--bg-dark);
    color:#fff;
    padding:24px 20px 20px 20px;
    display:flex;
    flex-direction:column;
    gap:18px;
  }
  .logo-row{ display:flex; align-items:center; gap:12px; }
  .logo-box{
    width:50px; height:50px; background:transparent; border-radius:var(--r-sm);
    border:2px solid var(--orange);
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:19px; color:#fff; font-family:'IBM Plex Mono','Courier New',monospace;
    letter-spacing:0.5px; flex-shrink:0;
  }
  .logo-text .l1{ font-weight:800; font-size:14.5px; letter-spacing:0.3px; line-height:1.3; text-transform:uppercase; }
  .logo-text .l2{ font-weight:700; font-size:10px; letter-spacing:1.5px; color:var(--orange); margin-top:1px; text-transform:uppercase; font-family:'IBM Plex Mono','Courier New',monospace; }

  .field-label{ font-size:10px; letter-spacing:1.3px; color:var(--muted); margin-bottom:6px; }
  .side-input{
    width:100%; padding:10px 12px; background:var(--bg-card-dark);
    border:1px solid var(--line); color:#fff; font-size:12.5px; border-radius:var(--r-xs);
  }
  .side-input:focus{ outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(249,115,22,0.18); }
  .side-input::placeholder{ color:var(--muted-dark); }
  .roletoggle{ display:flex; background:var(--bg-card-dark); border:1px solid var(--line); border-radius:var(--r-xs); overflow:hidden; padding:3px; gap:3px; }
  .roletoggle button{
    flex:1; border:none; background:transparent; color:var(--muted); border-radius:6px;
    font-size:10.5px; letter-spacing:0.8px; padding:9px 6px; cursor:pointer; font-weight:800;
    text-transform:uppercase; font-family:'IBM Plex Mono','Courier New',monospace;
  }
  .roletoggle button.active{ background:var(--orange); color:#0f2148; font-weight:800; }

  .nav-label{ font-size:10px; letter-spacing:1.8px; color:var(--muted); margin:6px 0 2px 0; }
  .nav-list{ display:flex; flex-direction:column; gap:8px; overflow-y:auto; }
  .nav-item{
    background:var(--bg-card-dark); border:1px solid var(--line); border-radius:var(--r-sm);
    padding:11px 13px; cursor:pointer; position:relative;
  }
  .nav-item:hover{ background:var(--bg-card-dark-hover); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
  .nav-item.active{ background:var(--bg-card-dark-hover); border-color:var(--orange); box-shadow:0 0 0 1px var(--orange); }
  .nav-item.locked{ opacity:0.45; cursor:not-allowed; }
  .nav-item.locked:hover{ transform:none; box-shadow:none; }
  .nav-item .title-row{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
  .nav-item .name{ font-weight:700; font-size:12.5px; letter-spacing:0.2px; }
  .nav-item .sub{ font-size:10.5px; color:var(--muted); margin-top:4px; font-family:'IBM Plex Mono','Courier New',monospace; }
  .pill{
    font-size:9px; letter-spacing:0.8px; padding:3px 8px; border-radius:20px; border:1px solid var(--orange);
    color:var(--orange); white-space:nowrap; font-weight:800; text-transform:uppercase;
    font-family:'IBM Plex Mono','Courier New',monospace;
  }
  .pill.gray{ border-color:var(--muted-dark); color:var(--muted); }
  .pill.green{ border-color:var(--green); color:var(--green); }

  .sidebar-spacer{ flex:1; }
  .btn-full{
    width:100%; padding:11px; border:none; font-size:11px; letter-spacing:0.8px; font-weight:800;
    cursor:pointer; border-radius:var(--r-xs); text-transform:uppercase; font-family:'IBM Plex Mono','Courier New',monospace;
  }
  .btn-green{ background:var(--green); color:#fff; }
  .btn-green:hover{ background:var(--green-dark); }
  .btn-outline-red{ background:transparent; border:1px solid var(--red); color:#fca5a5; }
  .btn-outline-red:hover{ background:rgba(185,28,28,0.15); }
  .signed-in{ font-size:10.5px; color:var(--muted); text-align:center; line-height:1.6; font-family:'IBM Plex Mono','Courier New',monospace; }
  .signed-in b{ color:#fff; }

  /* ================= TOPBAR ================= */
  .topbar{
    background:var(--bg-dark); color:#fff; padding:10px 26px;
    display:flex; align-items:center; gap:18px; border-bottom:2px solid var(--orange);
    font-size:11px; letter-spacing:0.5px; flex-wrap:wrap;
    font-family:'IBM Plex Mono','Courier New',monospace; font-weight:700;
  }
  .topbar .badge{ background:var(--orange); color:var(--bg-dark); font-weight:900; padding:3px 10px; letter-spacing:1.5px; border-radius:3px; }
  .topbar .portal-title{ font-weight:700; letter-spacing:0.5px; font-size:10px; color:#cbd5e1; }
  .topbar .announce{ color:var(--orange); font-weight:900; letter-spacing:1.5px; font-size:10px; }
  .topbar .announce-text{ color:#e2e8f0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; max-width:360px; font-weight:600; }
  .topbar .spacer{ flex:1; }
  .topbar .clock{ color:#e2e8f0; }
  .topbar select.loc{
    background:#0f172a; color:var(--orange); border:1px solid var(--line); padding:3px 6px; font-size:10px; border-radius:4px; cursor:pointer;
    font-family:'IBM Plex Mono','Courier New',monospace; font-weight:700;
  }

  /* ================= MAIN ================= */
  .main{ flex:1; padding:28px; min-width:0; }
  .card{
    background:var(--white); border:1px solid var(--line-light); border-radius:var(--r-lg);
    padding:26px 30px; margin-bottom:20px; box-shadow:var(--shadow-md);
  }
  .card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; }
  .card-head h1{
    font-family:'IBM Plex Sans', Arial, Helvetica, sans-serif; font-style:normal; font-weight:800; font-size:22px;
    color:var(--navy-header); margin:0 0 6px 0; letter-spacing:0.2px; text-transform:uppercase;
  }
  .card-head .intro{ color:var(--muted-dark); font-size:12px; max-width:560px; line-height:1.65; }
  .stamp{
    font-family:'IBM Plex Mono','Courier New',monospace; font-style:normal; font-weight:800; font-size:11px; letter-spacing:1.5px;
    color:var(--orange); background:rgba(249,115,22,0.1); border-radius:20px; padding:6px 14px;
    text-align:right; display:inline-block; text-transform:uppercase;
  }
  .meta-mini{ font-size:10px; color:var(--muted-dark); letter-spacing:1px; text-align:right; margin-top:8px; font-family:'IBM Plex Mono','Courier New',monospace;}

  .stat-bar{
    background:var(--bg-dark); border-radius:var(--r-md); margin-top:18px; padding:16px 20px;
    display:flex; gap:34px; flex-wrap:wrap; align-items:center; color:#fff;
    border-left:4px solid var(--orange);
  }
  .stat{ }
  .stat .lbl{ font-size:9.5px; letter-spacing:1.3px; color:var(--muted); margin-bottom:5px; text-transform:uppercase; font-weight:800; }
  .stat .val{ font-size:16px; font-weight:800; font-family:'IBM Plex Mono','Courier New',monospace; }
  .stat-bar .grow{ flex:1; }
  .role-chip{
    background:rgba(249,115,22,0.15); border:1px solid var(--orange); color:var(--orange); border-radius:20px;
    padding:6px 14px; font-size:11px; letter-spacing:0.6px; font-weight:800; font-family:'IBM Plex Mono','Courier New',monospace;
    text-transform:uppercase;
  }

  .search-row{ margin-top:18px; }
  .search-row input{
    width:100%; padding:11px 14px; background:var(--input-bg); border:1px solid var(--line-light); font-size:12.5px; color:var(--ink);
    border-radius:var(--r-xs);
  }
  .search-row input:focus{ outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(249,115,22,0.12); background:#fff; }
  .search-row input::placeholder{ color:var(--muted-dark); }

  .empty-note{ color:var(--muted-dark); font-size:12px; }

  /* ---------- data card (IDENTITY-style) ---------- */
  .dcard{ border:1px solid var(--line-light); border-radius:var(--r-lg); margin-top:16px; background:#fff; overflow:hidden; box-shadow:var(--shadow-sm); }
  .dcard.alt .dhead{ background:var(--peach); color:var(--orange-dark); }
  .dhead{
    background:var(--navy-header); color:#fff; font-size:11.5px; font-weight:700;
    letter-spacing:1px; padding:12px 18px;
  }
  .dbody{ padding:20px; }
  .dbody .prompt{ font-size:12.5px; line-height:1.7; color:var(--ink); margin-bottom:14px; }
  .dbody textarea{
    width:100%; min-height:100px; padding:12px; background:var(--input-bg); border:1px solid var(--line-light);
    font-size:12.5px; color:var(--ink); resize:vertical; border-radius:var(--r-xs);
  }
  .dbody textarea:focus{ outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(249,115,22,0.12); background:#fff; }
  .dbody textarea:disabled{ background:#EEEFF2; color:#666; }
  .dbody textarea::placeholder{ color:var(--muted-dark); }

  .row-actions{ display:flex; justify-content:space-between; align-items:center; margin-top:12px; flex-wrap:wrap; gap:10px;}
  .status-badge{ font-size:10px; letter-spacing:0.8px; padding:6px 12px; border:1px solid transparent; border-radius:20px; font-weight:600; }
  .status-empty{ background:var(--input-bg); color:var(--muted-dark); border-color:var(--line-light); }
  .status-pending{ background:var(--peach); color:var(--orange-dark); border-color:var(--orange); }
  .status-graded{ background:var(--navy-header); color:#fff; border-color:var(--navy-header); }

  .model-answer{
    background:var(--input-bg); border-left:3px solid var(--orange); border-radius:0 var(--r-xs) var(--r-xs) 0; padding:12px 14px; font-size:11.5px;
    color:var(--ink); margin-top:10px; display:none; line-height:1.65;
  }
  .model-answer.show{ display:block; }
  .toggle-model{ font-size:10.5px; color:var(--orange-dark); cursor:pointer; font-weight:600; }
  .toggle-model:hover{ color:var(--orange); }

  .grade-row{ margin-top:14px; border-top:1px solid var(--line-light); padding-top:14px; display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
  .grade-inputs{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
  .grade-inputs label{ font-size:10px; color:var(--muted-dark); letter-spacing:0.8px; }
  .grade-inputs input[type=number]{ width:58px; padding:8px; border:1px solid var(--line-light); background:var(--input-bg); font-size:12px; border-radius:var(--r-xs); }
  .grade-inputs input[type=text]{ flex:1; min-width:220px; padding:8px 10px; border:1px solid var(--line-light); background:var(--input-bg); font-size:12px; border-radius:var(--r-xs); }
  .grade-inputs input:focus{ outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(249,115,22,0.12); background:#fff; }

  select.day-select{ padding:10px 12px; border:1px solid var(--line-light); background:var(--input-bg); font-size:12px; border-radius:var(--r-xs); cursor:pointer; }

  button.btn{
    font-size:11.5px; letter-spacing:0.6px; padding:11px 22px; border:none; cursor:pointer; font-weight:700;
    border-radius:var(--r-xs);
  }
  button.btn.orange{ background:var(--orange); color:#fff; box-shadow:var(--shadow-sm); }
  button.btn.orange:hover{ background:var(--orange-dark); transform:translateY(-1px); box-shadow:var(--shadow-md); }
  button.btn.ghost{ background:transparent; border:1px solid var(--line-light); color:var(--navy-header); }
  button.btn.ghost:hover{ background:var(--input-bg); }
  button.btn:disabled{ opacity:0.45; cursor:not-allowed; transform:none; box-shadow:none; }

  /* ---------- leaderboard ---------- */
  table.leader{ width:100%; border-collapse:collapse; margin-top:6px; }
  table.leader th{
    text-align:left; font-size:10px; letter-spacing:1.2px; color:var(--muted-dark);
    padding:10px; border-bottom:2px solid var(--line-light);
  }
  table.leader td{ padding:14px 10px; border-bottom:1px solid var(--line-light); font-size:12.5px; }
  table.leader tr:hover td{ background:#FAFBFC; }
  .rank{ font-weight:700; color:var(--navy-header); }
  .rank.gold{ color:var(--orange); }
  .score-total{ font-weight:700; color:var(--orange-dark); }

  .locked-panel{ text-align:center; padding:60px 20px; color:var(--muted-dark); }
  .locked-panel .lock-stamp{
    font-weight:700; letter-spacing:1.5px; border:1px solid var(--orange); border-radius:20px;
    color:var(--orange); background:rgba(249,115,22,0.08); display:inline-block; padding:8px 20px; margin-bottom:14px;
  }

  /* ---------- subtabs (admin: manage vs grade) ---------- */
  .subtabs{ display:flex; gap:6px; margin-top:18px; }
  .subtab{
    padding:9px 16px; font-size:11px; letter-spacing:0.8px; font-weight:700; color:var(--muted-dark);
    background:var(--input-bg); border:1px solid var(--line-light); border-radius:var(--r-xs); cursor:pointer;
  }
  .subtab.active{ background:var(--navy-header); color:#fff; border-color:var(--navy-header); }

  /* ---------- activity builder form ---------- */
  .form-field{ margin-bottom:14px; }
  .form-field label{ display:block; font-size:10px; letter-spacing:1px; color:var(--muted-dark); margin-bottom:6px; font-weight:600; }
  .form-field input[type=text], .form-field textarea{
    width:100%; padding:10px 12px; border:1px solid var(--line-light); background:var(--input-bg);
    font-size:12.5px; color:var(--ink); border-radius:var(--r-xs); font-family:inherit;
  }
  .form-field textarea{ min-height:80px; resize:vertical; }
  .form-field input:focus, .form-field textarea:focus{
    outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(249,115,22,0.12); background:#fff;
  }
  .form-row{ display:flex; gap:14px; flex-wrap:wrap; }
  .form-row > .form-field{ flex:1; min-width:220px; }

  .item-row{
    display:flex; justify-content:space-between; align-items:flex-start; gap:14px;
    padding:14px 16px; border:1px solid var(--line-light); border-radius:var(--r-sm); margin-top:10px; background:#fff;
  }
  .item-row .item-num{ font-size:10px; color:var(--orange); font-weight:700; letter-spacing:1px; margin-bottom:4px; }
  .item-row .item-title{ font-weight:700; font-size:13px; color:var(--ink); }
  .item-row .item-preview{ font-size:11.5px; color:var(--muted-dark); margin-top:4px; line-height:1.5; }
  .item-actions{ display:flex; gap:8px; flex-shrink:0; }
  .icon-btn{
    padding:7px 12px; font-size:10.5px; font-weight:700; letter-spacing:0.5px; border-radius:var(--r-xs);
    border:1px solid var(--line-light); background:var(--input-bg); color:var(--navy-header); cursor:pointer;
  }
  .icon-btn:hover{ background:#fff; }
  .icon-btn.danger{ color:var(--red); border-color:rgba(185,28,28,0.3); }
  .icon-btn.danger:hover{ background:rgba(185,28,28,0.08); }

  .empty-state{
    text-align:center; padding:34px 20px; color:var(--muted-dark); font-size:12px;
    border:1px dashed var(--line-light); border-radius:var(--r-md); margin-top:14px;
  }

  .form-field select, .form-field input[type=datetime-local]{
    width:100%; padding:10px 12px; border:1px solid var(--line-light); background:var(--input-bg);
    font-size:12.5px; color:var(--ink); border-radius:var(--r-xs); font-family:inherit;
  }
  .form-field select:focus, .form-field input[type=datetime-local]:focus{
    outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(249,115,22,0.12); background:#fff;
  }

  /* ---------- rich text editor ---------- */
  .rte-wrap{ border:1px solid var(--line-light); border-radius:var(--r-xs); overflow:hidden; background:var(--input-bg); }
  .rte-wrap:focus-within{ border-color:var(--orange); box-shadow:0 0 0 3px rgba(249,115,22,0.12); background:#fff; }
  .rte-toolbar{ display:flex; align-items:center; gap:3px; padding:6px 8px; border-bottom:1px solid var(--line-light); background:#fff; }
  .rte-toolbar button{
    width:26px; height:26px; border:1px solid transparent; background:transparent; border-radius:6px;
    color:var(--navy-header); font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .rte-toolbar button:hover{ background:var(--input-bg); border-color:var(--line-light); }
  .rte-toolbar button.active{ background:var(--orange); border-color:var(--orange); color:#fff; }
  .rte-toolbar button.active:hover{ background:var(--orange-dark); border-color:var(--orange-dark); }
  .rte-editor{
    min-height:80px; padding:10px 12px; font-size:12.5px; color:var(--ink); line-height:1.5;
    outline:none;
  }
  .rte-editor:empty:before{ content:attr(data-placeholder); color:var(--muted-dark); font-style:italic; }
  .rte-editor.readonly{ background:#F6F7F9; cursor:default; }
  .rte-display{ font-size:12px; line-height:1.65; color:var(--ink); }

  @media (max-width:900px){
    .app{ flex-direction:column; }
    .sidebar{ width:100%; }
  }

  /* ================= AUTH GATE (login / register) ================= */
  .authpage{
    --auth-accent:#f97316;
    --auth-accent-hover:#fb923c;
    --auth-glow:#132a5c;
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    background: radial-gradient(circle at 30% 20%, var(--auth-glow), var(--bg-dark) 70%);
    padding:40px 16px; font-family:'IBM Plex Sans', Arial, Helvetica, sans-serif;
    transition: background 0.4s ease;
  }
  .authpage.theme-admin{
    --auth-accent:#ef4444;
    --auth-accent-hover:#f87171;
    --auth-glow:#3b0d0d;
  }
  .authcard{
    width:100%; max-width:420px; background:rgba(255,255,255,0.03);
    border-radius:var(--r-lg); border:1px solid var(--line); border-top:3px solid var(--auth-accent);
    box-shadow:var(--shadow-lg); padding:32px; color:#fff;
    transition: border-top-color 0.4s ease;
  }

  .authbrand{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
  .authbrand .logo-box{ width:38px; height:38px; font-size:14px; border-color:var(--auth-accent); transition:border-color 0.4s ease; }
  .authbrand .l1{ font-size:15px; font-weight:900; }
  .authbrand .l2{ color:var(--auth-accent); transition:color 0.4s ease; }

  .authtabs{ display:flex; gap:6px; margin-bottom:20px; background:#0d1c3d;
    border-radius:8px; padding:4px; }
  .authtabs button{
    flex:1; border:none; background:transparent; color:#94a3b8; border-radius:6px;
    font-size:10.5px; letter-spacing:0.05em; font-weight:800; text-transform:uppercase; padding:9px 6px; cursor:pointer;
    font-family:'IBM Plex Mono','Courier New',monospace; transition:background 0.25s ease, color 0.25s ease;
  }
  .authtabs button.active{ background:var(--auth-accent); color:#0f2148; }

  .authfield{ margin-bottom:12px; }
  .authfield label{ display:block; font-size:9.5px; letter-spacing:1.2px; color:#94a3b8; margin-bottom:6px; text-transform:uppercase; font-weight:800; }
  .authfield input, .authfield select{
    width:100%; padding:10px 12px; background:#0d1c3d; border:1px solid var(--line);
    color:#fff; font-size:13px; border-radius:var(--r-xs); font-family:'IBM Plex Mono','Courier New',monospace;
  }
  .authfield input::placeholder{ color:var(--muted-dark); }
  .authfield input:focus, .authfield select:focus{
    outline:none; border-color:var(--auth-accent);
  }
  .authfield input:disabled{ opacity:0.5; cursor:not-allowed; }
  .authhint{ font-size:10px; color:var(--muted); margin-top:6px; line-height:1.4; font-family:'IBM Plex Sans', Arial, sans-serif; }

  .authrow{ display:flex; gap:12px; }
  .authrow .authfield{ flex:1; }
  .authrow .authfield.small{ flex:0 0 68px; }
  .authrow .authfield.suffix{ flex:0 0 118px; }

  .authbtn{
    width:100%; padding:11px; border:none; border-radius:6px; background:var(--auth-accent);
    color:#0f2148; font-size:11px; font-weight:900; letter-spacing:0.05em; text-transform:uppercase; cursor:pointer; margin-top:6px;
    font-family:'IBM Plex Sans', Arial, sans-serif; transition:background 0.25s ease;
  }
  .authbtn:hover{ background:var(--auth-accent-hover); }

  .authfooter{ text-align:center; font-size:11px; color:#94a3b8; margin-top:16px; }
  .authfooter a{ color:var(--auth-accent); font-weight:700; text-decoration:underline; cursor:pointer; }

  .autherror{ color:#fca5a5; font-size:11px; font-weight:700; margin-bottom:12px; display:none; background:rgba(185,28,28,0.15);
    border-radius:6px; padding:9px 12px; }
  .authnotice{ color:#fdba74; font-size:11px; font-weight:700; margin-bottom:12px; display:none; background:rgba(249,115,22,0.15);
    border-radius:6px; padding:9px 12px; }

  .authview{ display:none; }
  .authview.active{ display:block; }