@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{
  --sidebar:#14243e;
  --sidebar2:#1b3154;
  --blue:#2f73dd;
  --blueSoft:#eaf2ff;
  --bg:#eef3f8;
  --panel:#fff;
  --line:#d8e1ec;
  --text:#172237;
  --muted:#6a7890;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:Inter,'Segoe UI',Arial,sans-serif;color:var(--text)}
button,select{font:inherit}
.app{height:100vh;display:grid;grid-template-columns:260px minmax(0,1fr);background:var(--bg)}
.sidebar{background:linear-gradient(180deg,var(--sidebar),#102038);color:#fff;display:flex;flex-direction:column;min-height:0}
.brand{display:flex;align-items:center;gap:12px;padding:20px 18px;border-bottom:1px solid rgba(255,255,255,.1)}
.brandMark{width:46px;height:46px;border-radius:13px;background:#fff;display:grid;place-items:center}
.brandMark img{width:64%;height:64%;object-fit:contain;display:block}
.brandTitle{font-weight:800;font-size:17px}
.brandSub{font-size:11px;color:#aebbd0;margin-top:3px}
nav{padding:12px 9px;display:flex;flex-direction:column;gap:4px;overflow:auto}
.navItem{width:100%;display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:8px;text-align:left;border:0;border-radius:10px;padding:11px 10px;background:transparent;color:#cbd5e5;cursor:pointer}
.navItem:hover{background:rgba(255,255,255,.07);color:#fff}
.navItem.active{background:var(--blue);color:#fff}
.navItem small{font-size:9px;text-transform:uppercase;letter-spacing:.07em;color:#91a1b9;font-weight:800}
.navItem.active small{color:#dce9ff}
.navIcon{font-size:17px;text-align:center}
.sidebarFoot{margin-top:auto;padding:14px;border-top:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.08)}
.roleLabel{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#9eacc1;font-weight:800;margin-bottom:7px}
.roleSwitch{display:grid;grid-template-columns:1fr 1fr;background:#0d1b30;border-radius:9px;padding:3px}
.roleSwitch button{border:0;border-radius:7px;padding:8px;background:transparent;color:#9eacc1;font-weight:700;cursor:pointer}
.roleSwitch button.active{background:#fff;color:#172237}
.managerSelect{margin-top:10px}
.managerSelect label{display:block;font-size:10px;color:#9eacc1;margin-bottom:5px;font-weight:700}
.managerSelect select{width:100%;border:1px solid rgba(255,255,255,.15);background:#0e1d33;color:#fff;border-radius:8px;padding:8px}
.modeNote{font-size:10px;line-height:1.45;color:#94a3b9;margin-top:10px}
.hidden{display:none!important}
.workspace{min-width:0;display:grid;grid-template-rows:66px minmax(0,1fr)}
.workspaceHeader{background:#fff;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 20px}
.headerLeft{display:flex;align-items:center;gap:10px;min-width:0}
.navToggle{display:none;flex:0 0 auto;width:38px;height:38px;border-radius:9px;border:1px solid var(--line);background:#fff;font-size:17px;cursor:pointer;align-items:center;justify-content:center}
.navBackdrop{position:fixed;inset:0;background:rgba(10,18,32,.45);z-index:190}
.breadcrumb{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:800}
.workspaceHeader h1{font-size:22px;margin:3px 0 0;letter-spacing:-.02em}
.headerRight{display:flex;align-items:center;gap:8px}
.seasonBadge{padding:7px 10px;border-radius:999px;font-size:11px;font-weight:800;background:#f0f3f7;color:#59687e}

.authBox{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.authBox .authEmail{font-weight:800;color:var(--text)}
.authBox .authRole{padding:5px 9px;border-radius:999px;background:#eaf2ff;color:#235cb2;font-weight:800;font-size:11px}
.authBox button{font-size:11px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--text);cursor:pointer;font-weight:800}
.authOverlay{position:fixed;inset:0;background:rgba(16,28,46,.35);z-index:100}
.authDialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:101;background:#fff;border-radius:14px;box-shadow:0 20px 50px rgba(20,40,70,.25);padding:22px;width:min(320px,92vw)}
.authDialog h3{margin:0 0 16px;font-size:18px}
.authDialog label{display:block;font-size:11px;font-weight:800;color:var(--muted);margin:12px 0 5px}
.authDialog input{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 10px;font:inherit}
.authError{margin-top:12px;font-size:12px;color:#a12f22;background:#fdeceb;border:1px solid #f3c8c4;border-radius:8px;padding:8px 10px}
.authDialogActions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.authDialogActions button{padding:8px 14px;border-radius:8px;border:1px solid var(--line);background:#fff;font-weight:800;cursor:pointer}
.authDialogActions #authSubmit{background:var(--blue);border-color:var(--blue);color:#fff}
.content{min-height:0;padding:10px}
iframe{width:100%;height:100%;border:1px solid var(--line);border-radius:13px;background:#fff;display:block}
.comingSoon{height:100%;border:1px dashed #b9c7d9;border-radius:14px;background:#fff;display:grid;place-content:center;text-align:center;padding:30px}
.soonIcon{font-size:46px}.comingSoon h2{margin:12px 0 7px}.comingSoon p{margin:0;color:var(--muted);max-width:460px}
@media(max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}
  .navToggle{display:inline-flex}
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:82%;max-width:300px;z-index:200;transform:translateX(-100%);transition:transform .25s ease;box-shadow:14px 0 40px rgba(0,0,0,.3)}
  .sidebar.open{transform:translateX(0)}
  .workspace{grid-template-rows:auto minmax(0,1fr)}
  .workspaceHeader{padding:0 12px;flex-wrap:wrap;height:auto;min-height:56px;gap:6px 10px;row-gap:0}
  .workspaceHeader h1{font-size:17px;margin:1px 0 0}
  .breadcrumb{display:none}
  .seasonBadge{display:none}
  .content{padding:6px}
}
@media(max-width:420px){
  .authBox{font-size:11px;gap:6px}
  .authBox .authRole{padding:4px 7px}
}