/* IBPath shared look — Earth Online palette (same tokens as VocabBox) */
:root{
  --bg:#08080a; --panel:#0f0f14; --panel2:#16161d; --panel3:#1c1c25;
  --line:rgba(232,230,225,.14); --line-2:rgba(232,230,225,.28); --line-faint:rgba(232,230,225,.07);
  --txt:#e8e6e1; --dim:#a8a39a; --dim2:#6c6760;
  --accent:#c95a44; --accent-deep:#9b3a2b; --accent2:#5a9b6a;
  --warn:#c5832d; --bad:#e23725; --gold:#e0b833; --blue:#4f6b8a;
  --grad:linear-gradient(100deg,#9b3a2b,#c95a44);
  --mono:'JetBrains Mono','IBM Plex Mono','Cascadia Code',Consolas,Menlo,monospace;
  --sans:'Space Grotesk','Inter','Noto Sans SC','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;color:var(--txt);font-family:var(--sans);
  background:linear-gradient(var(--line-faint) 1px,transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg,var(--line-faint) 1px,transparent 1px) 0 0/44px 44px,
    radial-gradient(1200px 700px at 50% -10%,#16121a,transparent),var(--bg)}
header.top{padding:16px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:rgba(8,8,10,.85);border-bottom:1px solid var(--line)}
header.top h1{font-size:20px;margin:0;letter-spacing:.5px;font-weight:800;font-family:var(--mono);text-transform:uppercase}
header.top h1 .hl{color:var(--accent)}
header.top .sub{color:var(--dim2);font-size:11px;font-family:var(--mono);letter-spacing:1.5px;margin-top:4px;text-transform:uppercase}
header.top a{color:var(--dim);text-decoration:none;font-family:var(--mono);font-size:12px;letter-spacing:1px}
header.top a:hover{color:var(--accent)}
.spacer{flex:1}
.userchip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:2px;padding:6px 12px;font-family:var(--mono);font-size:12px;letter-spacing:.5px}
.userchip .role{color:var(--dim2);font-size:10px;text-transform:uppercase;letter-spacing:1.5px}
.userchip .role.mentor{color:var(--gold)}
button{font-family:var(--mono);cursor:pointer;border-radius:2px;padding:9px 15px;font-size:12px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;background:transparent;color:var(--txt);border:1px solid var(--line-2);transition:background .15s,border-color .15s,color .15s}
button:hover{border-color:var(--accent);color:var(--accent);background:rgba(201,90,68,.08)}
button:active{transform:translateY(1px)}
button.primary{background:var(--accent-deep);border:1px solid var(--accent-deep);color:#fff}
button.primary:hover{background:var(--accent);border-color:var(--accent);color:#fff}
button.ghost{background:transparent;border:1px solid var(--line);color:var(--dim)}
button.ghost:hover{border-color:var(--line-2);color:var(--txt);background:var(--panel2)}
button.danger{border-color:rgba(226,55,37,.5);color:#e26a5a}
button.danger:hover{background:rgba(226,55,37,.12);border-color:var(--bad);color:var(--bad)}
button:disabled{opacity:.4;cursor:not-allowed;transform:none}
label{display:block;font-size:10px;color:var(--dim2);margin:12px 0 5px;font-family:var(--mono);letter-spacing:1.5px;text-transform:uppercase}
input,textarea,select{width:100%;background:var(--bg);border:1px solid var(--line-2);border-radius:2px;padding:10px 12px;color:var(--txt);font-size:14px;font-family:var(--sans)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(201,90,68,.2)}
.panel{background:var(--panel);border:1px solid var(--line-2);border-radius:3px;padding:24px;position:relative;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.panel::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent)}
.panel h2{margin:0 0 4px;font-size:17px;font-weight:700;font-family:var(--mono);letter-spacing:1px;text-transform:uppercase}
.hint{color:var(--dim);font-size:12px;margin-bottom:12px;line-height:1.6}
.status{font-size:12px;margin-top:8px;min-height:16px;font-family:var(--mono);letter-spacing:.5px}
.status.ok{color:var(--accent2)} .status.err{color:var(--bad)} .status.load{color:var(--warn)}
.blk-warn,.blk-err,.blk-ok{font-size:12px;border-radius:2px;padding:9px 12px;margin-top:8px;line-height:1.7;border:1px solid}
.blk-warn{background:rgba(197,131,45,.1);color:#e0b833;border-color:rgba(197,131,45,.4)}
.blk-err{background:rgba(226,55,37,.1);color:#e26a5a;border-color:rgba(226,55,37,.4)}
.blk-ok{background:rgba(90,155,106,.1);color:#7fc79a;border-color:rgba(90,155,106,.4)}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--panel3);color:var(--txt);border:1px solid var(--accent);padding:10px 18px;border-radius:2px;font-size:12px;font-weight:600;font-family:var(--mono);letter-spacing:.5px;opacity:0;transition:.3s;z-index:80;box-shadow:0 10px 30px rgba(0,0,0,.5);pointer-events:none}
.toast.on{opacity:1}
.overlay{position:fixed;inset:0;background:rgba(4,4,6,.8);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:50;padding:20px}
.overlay.on{display:flex}
.modal{background:var(--panel);border:1px solid var(--line-2);border-radius:3px;padding:24px;width:min(520px,100%);position:relative;box-shadow:0 24px 70px rgba(0,0,0,.6);max-height:92vh;overflow:auto}
.modal::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent)}
.modal h2{margin:0 0 4px;font-size:17px;font-weight:700;font-family:var(--mono);letter-spacing:1px;text-transform:uppercase}
.modal-actions{display:flex;gap:10px;margin-top:18px}
.modal-actions button{flex:1}
.close{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--dim2);font-size:22px;padding:0}
.close:hover{color:var(--bad);background:none;border:none}
.noData{color:var(--dim2);font-size:12px;text-align:center;padding:24px;font-family:var(--mono);letter-spacing:1px}
.mono{font-family:var(--mono)}
.dim{color:var(--dim2)}