/* The tracker look, shared with the staff page. Copied from index.html. */

:root{
  --bg:#0a0a13;
  --bg-alt:#0e0e1a;
  --panel:#131322;
  --panel-2:#1a1a2d;
  --panel-hover:#222239;
  --border:#2b2b47;
  --border-soft:rgba(255,255,255,.07);
  --text:#f4f4fa;
  --text-dim:#a6a6c4;
  --text-faint:#6e6e90;
  --accent:#8b6bff;
  --accent-soft:rgba(139,107,255,.15);
  --accent-strong:#7a58f5;
  --green:#34d399;
  --yellow:#fbbf24;
  --orange:#fb923c;
  --red:#f87171;
  --red-dim:#3a1f2b;
  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:10px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.3);
  --shadow-md:0 16px 40px rgba(0,0,0,.45);
  --ease:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.005em;
}
a{color:var(--accent);}
.app{display:flex;min-height:100vh;}

/* Sidebar */
.sidebar{
  width:236px;
  flex-shrink:0;
  background:var(--bg-alt);
  border-right:1px solid var(--border-soft);
  display:flex;
  flex-direction:column;
  padding:20px 14px;
  position:sticky;
  top:0;
  height:100vh;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:4px 6px 18px 6px;
  border-bottom:1px solid var(--border-soft);
  margin-bottom:14px;
}
.brand-badge{
  width:34px;height:34px;border-radius:9px;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:14px;flex-shrink:0;
}
.brand-name{
  font-weight:700;font-size:14.5px;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  cursor:text;
}
.brand-sub{font-size:11.5px;color:var(--text-faint);}
.nav{display:flex;flex-direction:column;gap:2px;}
.nav-item{
  position:relative;
  display:flex;align-items:center;gap:11px;
  padding:9px 12px 9px 16px;border-radius:var(--radius-sm);
  color:var(--text-dim);text-decoration:none;
  font-size:13.5px;font-weight:500;cursor:pointer;
  user-select:none;
  transition:background .15s var(--ease), color .15s var(--ease);
}
.nav-item:hover{background:var(--panel-hover);color:var(--text);}
.nav-item.active{background:var(--panel-2);color:#fff;font-weight:600;}
.nav-item.active::before{content:"";position:absolute;left:2px;top:50%;transform:translateY(-50%);width:3px;height:16px;border-radius:2px;background:var(--accent);}
.nav-item.active .nav-icon{color:var(--accent);}
.nav-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text-faint);transition:color .15s var(--ease);}
.nav-icon svg{width:17px;height:17px;}
.nav-item:hover .nav-icon{color:var(--text-dim);}
.nav-badge{
  margin-left:auto;background:var(--red);color:#fff;
  font-size:10.5px;font-weight:700;border-radius:20px;
  padding:1px 6px;min-width:16px;text-align:center;
}
.sidebar-footer{margin-top:auto;padding-top:12px;border-top:1px solid var(--border-soft);font-size:11.5px;color:var(--text-faint);}

/* Main */
.main{flex:1;padding:28px 40px 60px 40px;max-width:1680px;width:100%;margin:0 auto;}
.page{animation:pageIn .25s var(--ease);}
@keyframes pageIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.page-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:12px;}
.page-title{font-size:22px;font-weight:700;margin:0 0 4px 0;letter-spacing:-.01em;}
.page-desc{color:var(--text-dim);font-size:13.5px;margin:0;}
.roadmap-board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;align-items:start;}
.roadmap-col.ideas{border-style:dashed;}
.rm-vote{background:var(--panel-2);border:1px solid var(--border);color:var(--text-dim);border-radius:99px;padding:2px 9px;font-size:11.5px;font-weight:700;cursor:pointer;transition:border-color .15s var(--ease), color .15s var(--ease);}
.rm-vote:hover{border-color:var(--accent);color:var(--accent);}
.rm-vote.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);}
.roadmap-col{background:var(--bg-alt);border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:12px;min-height:120px;transition:border-color .15s var(--ease), background .15s var(--ease);}
.roadmap-col.drag-over{border-color:var(--accent);background:var(--accent-soft);}
.roadmap-col-head{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:13px;margin:2px 2px 10px;}
.roadmap-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 13px;margin-bottom:10px;cursor:pointer;transition:border-color .15s var(--ease), transform .15s var(--ease);}
.roadmap-card:hover{border-color:rgba(255,255,255,.18);transform:translateY(-1px);}
.roadmap-card[draggable="true"]{cursor:grab;}
.roadmap-card.overdue{border-color:var(--red);box-shadow:inset 3px 0 0 var(--red);}
.roadmap-card-title{font-weight:600;font-size:13.5px;line-height:1.35;}
.roadmap-card-title a.rm-link{color:var(--accent);text-decoration:none;font-weight:700;margin-left:4px;}
.roadmap-card-desc{color:var(--text-dim);font-size:12.5px;line-height:1.5;margin-top:5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.rm-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.rm-owner{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:12px;color:var(--text-dim);}
.roadmap-card-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:9px;font-size:11.5px;color:var(--text-faint);}
.rm-stats{display:flex;gap:10px;align-items:center;}
.rm-seg{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;}
.rm-seg button{background:var(--panel-2);color:var(--text-dim);border:0;padding:9px 15px;font-size:13px;font-weight:600;cursor:pointer;}
.rm-seg button.active{background:var(--accent-soft);color:var(--accent);}
.btn.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);}
.rm-progress{display:flex;height:8px;background:var(--panel-2);border:1px solid var(--border-soft);border-radius:99px;overflow:hidden;}
.rm-progress>span{display:block;height:100%;}
.rm-release{margin-bottom:14px;}
.rm-release-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--border-soft);font-size:13px;cursor:pointer;flex-wrap:wrap;}
.rm-release-row:hover .rm-row-title{color:var(--accent);}
.rm-check{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13px;}
.rm-check.done span{text-decoration:line-through;color:var(--text-faint);}
@media (max-width:1500px){.roadmap-board{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:1000px){.roadmap-board{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:700px){.roadmap-board{grid-template-columns:1fr;}}
.rm-timeline{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:14px;overflow-x:auto;padding-bottom:6px;align-items:start;}
.hidden{display:none !important;}
[hidden]{display:none !important;}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--panel-2);color:var(--text);
  border:1px solid var(--border);
  padding:9px 15px;border-radius:var(--radius-sm);
  font-size:13px;font-weight:600;cursor:pointer;
  transition:background .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease);
}
.btn:hover{background:var(--panel-hover);border-color:rgba(255,255,255,.18);}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-strong);border-color:var(--accent-strong);}
.btn-danger{background:var(--red-dim);border-color:rgba(240,85,74,.32);color:#ffb3a7;}
.btn-danger:hover{background:#5a332f;border-color:rgba(240,85,74,.5);}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-dim);padding:6px 9px;}
.btn-ghost:hover{background:var(--panel-hover);color:var(--text);}
.btn-sm{padding:5px 10px;font-size:12px;}

/* Cards / stats */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px;}
.stat-card{
  background:var(--panel);
  border:1px solid var(--border);border-radius:var(--radius-md);
  padding:18px 20px;
  transition:border-color .15s var(--ease), transform .15s var(--ease);
}
.stat-card:hover{border-color:rgba(255,255,255,.16);transform:translateY(-1px);}
.stat-label{font-size:12.5px;color:var(--text-dim);font-weight:600;}
.stat-value{font-size:28px;font-weight:700;margin-top:8px;letter-spacing:-.02em;}
.stat-sub{font-size:12px;color:var(--text-faint);margin-top:5px;}

.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px 22px;margin-bottom:20px;}
.panel-title{font-size:14.5px;font-weight:700;margin:0 0 14px 0;display:flex;align-items:center;justify-content:space-between;}

/* Tables */
table{width:100%;border-collapse:collapse;font-size:13.5px;}
th{text-align:left;color:var(--text-faint);font-weight:600;font-size:11.5px;padding:9px 10px;border-bottom:1px solid var(--border-soft);}
td{padding:12px 10px;border-bottom:1px solid var(--border-soft);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tbody tr{transition:background .12s var(--ease);}
tbody tr:hover{background:var(--panel-2);}
.empty-row td{text-align:center;color:var(--text-faint);padding:30px;}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;}
.badge-dot{width:5px;height:5px;border-radius:50%;background:currentColor;}
.badge-green{background:rgba(62,207,142,.12);color:var(--green);}
.badge-yellow{background:rgba(232,185,63,.12);color:var(--yellow);}
.badge-orange{background:rgba(232,138,63,.12);color:var(--orange);}
.badge-red{background:rgba(240,85,74,.14);color:var(--red);}
.badge-gray{background:rgba(154,161,178,.12);color:var(--text-dim);}
.badge-accent{background:var(--accent-soft);color:var(--accent);}
.badge-muted{background:transparent;color:var(--text-faint);border:1px dashed var(--border);}

.row-departed{opacity:.55;}
.row-departed:hover{opacity:1;}
.row-blacklisted{background:rgba(240,85,74,.06);}
.row-blacklisted:hover{background:rgba(240,85,74,.1);}

.role-pill{display:inline-flex;align-items:center;padding:3px 11px;border-radius:20px;font-size:12px;font-weight:600;background:transparent;border:1px solid currentColor;}

/* Toolbar */
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap;}
.search-input, select, input[type=text], input[type=date], textarea{
  background:var(--bg-alt);border:1px solid var(--border);color:var(--text);
  padding:9px 12px;border-radius:var(--radius-sm);font-size:13.5px;font-family:inherit;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.search-input:focus, select:focus, input:focus, textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
.search-input{flex:1;min-width:180px;}
select{cursor:pointer;}
.toolbar-spacer{flex:1;}

/* Modal */
.modal-overlay{
  position:fixed;inset:0;background:rgba(4,5,8,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;
  animation:overlayIn .15s var(--ease);
}
@keyframes overlayIn{from{opacity:0;}to{opacity:1;}}
@keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}
.modal{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);
  width:100%;max-width:480px;max-height:88vh;overflow-y:auto;
  box-shadow:var(--shadow-md);
  animation:modalIn .18s var(--ease);
}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 0 22px;}
.modal-title{font-size:16px;font-weight:700;}
.modal-body{padding:16px 22px 22px 22px;display:flex;flex-direction:column;gap:14px;}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:12px 22px 22px 22px;position:sticky;bottom:0;background:var(--panel);}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:12.5px;font-weight:600;color:var(--text-dim);}
.field input,.field select,.field textarea{width:100%;}
.field-row{display:flex;gap:12px;}
.field-row .field{flex:1;}
textarea{resize:vertical;min-height:60px;}
.checkbox-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;}
.checkbox-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-dim);}
.checkbox-item input{accent-color:var(--accent);}
.color-swatches{display:flex;gap:8px;flex-wrap:wrap;}
.swatch{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid transparent;}
.swatch.selected{border-color:#fff;}

/* Person cell */
.person{display:flex;align-items:center;gap:10px;}
.person[data-view-member]:hover .person-name{color:var(--accent);}
.avatar{position:relative;overflow:hidden;width:32px;height:32px;border-radius:50%;background:var(--panel-2);border:1px solid var(--border-soft);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--text-dim);flex-shrink:0;}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;}
.person-name{font-weight:600;}
.person-sub{font-size:12px;color:var(--text-faint);}
a.person-sub{text-decoration:none;transition:color .15s var(--ease);}
a.person-sub:hover{color:var(--accent);}

/* Activity feed */
.activity-item{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid var(--border-soft);font-size:13px;}
.activity-item:last-child{border-bottom:none;}
.activity-icon{width:28px;height:28px;border-radius:50%;background:var(--panel-2);border:1px solid var(--border-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--accent-text);}
.activity-icon svg{width:14px;height:14px;}
.activity-text{color:var(--text-dim);}
.activity-text b{color:var(--text);}
.activity-time{font-size:11.5px;color:var(--text-faint);margin-top:2px;}

/* Role cards */
.role-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;}
.role-card{background:var(--panel);border:1px solid var(--border);border-top-width:3px;border-radius:var(--radius-md);padding:18px;transition:border-color .15s var(--ease), transform .15s var(--ease);}
.role-card:hover{border-color:rgba(255,255,255,.16);transform:translateY(-1px);}
.role-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.role-perms{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.perm-tag{font-size:11px;background:var(--panel-2);border:1px solid var(--border-soft);color:var(--text-dim);padding:4px 9px;border-radius:20px;}

.settings-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border-soft);gap:14px;flex-wrap:wrap;}
.settings-row:last-child{border-bottom:none;}
.settings-row-label{font-weight:600;font-size:14px;}
.settings-row-desc{font-size:12.5px;color:var(--text-faint);margin-top:2px;}

/* Loading & save status */
.loading-screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;background:var(--bg);z-index:200;}
.loading-spinner{width:32px;height:32px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--accent);animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.loading-text{color:var(--text-dim);font-size:13px;}
.save-status{
  position:fixed;bottom:16px;right:16px;z-index:150;
  padding:8px 14px;border-radius:20px;font-size:12.5px;font-weight:600;
  background:var(--panel-2);border:1px solid var(--border);color:var(--text-dim);
  box-shadow:var(--shadow-sm);transition:opacity .2s var(--ease);
}
.save-status.saved{color:var(--green);border-color:rgba(62,207,142,.3);}
.save-status.error{color:var(--red);border-color:rgba(240,85,74,.35);background:rgba(240,85,74,.08);}

::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--panel-2);border-radius:6px;}
::-webkit-scrollbar-thumb:hover{background:var(--panel-hover);}
::-webkit-scrollbar-track{background:transparent;}

@media (max-width:900px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:50;transform:translateX(-100%);transition:transform .2s var(--ease);box-shadow:var(--shadow-md);}
  .sidebar.open{transform:translateX(0);}
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .main{padding:18px;}
  .field-row{flex-direction:column;}
  .checkbox-grid{grid-template-columns:1fr;}
}
.mobile-topbar{display:none;}
@media (max-width:900px){
  .mobile-topbar{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border-soft);position:sticky;top:0;background:var(--bg-alt);z-index:40;}
  .mobile-topbar .nav-icon{width:20px;height:20px;color:var(--text-dim);}
  .mobile-topbar .nav-icon svg{width:20px;height:20px;}
}

/* ================= Brand theme: DoJRP Life ================= */
:root{
  --brand-grad:linear-gradient(135deg,#7c4dff 0%,#d946a8 55%,#ff8a2b 100%);
  --ring:0 0 0 1px rgba(139,107,255,.35);
}
html{scroll-behavior:smooth;}
body{
  font-family:"Barlow","Segoe UI",system-ui,sans-serif;
  font-size:15px;
  background:
    radial-gradient(900px 520px at 85% -8%, rgba(124,77,255,.16), transparent 62%),
    radial-gradient(700px 460px at -8% 108%, rgba(255,138,43,.07), transparent 58%),
    var(--bg);
  background-attachment:fixed;
  letter-spacing:0;
}
a{color:var(--accent-text);}

/* Sidebar */
.sidebar{
  width:252px;padding:18px 14px 16px;
  background:linear-gradient(180deg,#0f0f1b 0%,#0b0b14 100%);
  border-right:1px solid var(--border-soft);
}
.brand{gap:12px;padding:2px 6px 18px;margin-bottom:12px;}
.brand-logo{width:46px;height:46px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 4px 12px rgba(124,77,255,.35));}
.brand-name{cursor:default;}
.brand-sub{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.nav{gap:3px;}
.nav-item{padding:10px 12px 10px 16px;font-size:13.5px;border-radius:10px;}
.nav-item:hover{background:rgba(255,255,255,.05);}
.nav-item.active{background:linear-gradient(90deg,rgba(124,77,255,.24),rgba(124,77,255,.04));color:#fff;}
.nav-item.active::before{left:0;width:3px;height:20px;background:var(--brand-grad);}
.nav-item.active .nav-icon{color:var(--accent-text);}
.sidebar-footer{border-top:1px solid var(--border-soft);padding-top:12px;}
.user-card{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--border-soft);}
.user-card .avatar{width:36px;height:36px;border:2px solid transparent;background:linear-gradient(var(--panel-2),var(--panel-2)) padding-box,var(--brand-grad) border-box;color:var(--text);}
.user-name{font-size:13px;font-weight:700;color:var(--text);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.user-role{font-size:11px;color:var(--text-faint);}

/* Page chrome */
.main{padding:32px 44px 70px;}
.page-title{font-family:"Barlow Condensed","Barlow","Segoe UI",sans-serif;font-size:34px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;line-height:1.05;}
.brand-name,.modal-title,.panel-title,.stat-value{font-family:"Barlow Condensed","Barlow","Segoe UI",sans-serif;}
.brand-name{font-size:19px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
.modal-title{font-size:21px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;}
.panel-title{font-size:17px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
.stat-label,th,.brand-sub{font-family:"Barlow","Segoe UI",system-ui,sans-serif;}
button,input,select,textarea{font-family:inherit;}
.page-title::after{content:"";display:block;width:44px;height:3px;border-radius:3px;background:var(--brand-grad);margin-top:9px;}
.page-desc{font-size:14px;margin-top:10px;max-width:760px;line-height:1.55;}
.page-header{margin-bottom:26px;}

/* Cards */
.panel{border-radius:14px;box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px rgba(0,0,0,.25);background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0)) ,var(--panel);}
.stat-card{
  position:relative;overflow:hidden;border-radius:14px;padding:20px 22px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0)),var(--panel);
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}
.stat-card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--brand-grad);opacity:.85;}
.stat-label{text-transform:uppercase;letter-spacing:.07em;font-size:11px;color:var(--text-faint);}
.stat-value{font-size:42px;font-weight:700;letter-spacing:.01em;line-height:1.1;}
.roadmap-col{background:rgba(255,255,255,.02);border-radius:14px;}
.roadmap-card,.role-card{border-radius:12px;}

/* Tables */
th{text-transform:uppercase;letter-spacing:.07em;font-size:10.5px;font-weight:700;color:var(--text-faint);padding:12px 12px;}
td{padding:13px 12px;}
tbody tr:hover{background:rgba(124,77,255,.07);}

/* Buttons & inputs */
.btn{border-radius:10px;padding:9px 16px;background:rgba(255,255,255,.05);border-color:var(--border);}
.btn:hover{background:rgba(255,255,255,.09);border-color:rgba(177,156,255,.5);}
.btn-primary{background:linear-gradient(135deg,#7c4dff,#9f6bff);border-color:transparent;color:#fff;box-shadow:0 6px 18px rgba(124,77,255,.35);}
.btn-primary:hover{background:linear-gradient(135deg,#8a5cff,#ae7dff);border-color:transparent;}
.btn-ghost{background:transparent;}
.btn.on,.rm-seg button.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-text);}
.rm-seg{border-radius:10px;}
.search-input,select,input[type=text],input[type=date],textarea{background:rgba(0,0,0,.28);border-radius:10px;}
.search-input:focus,select:focus,input:focus,textarea:focus{border-color:#8b6bff;box-shadow:0 0 0 3px rgba(139,107,255,.2);}
.checkbox-item input{accent-color:#8b6bff;}

/* Modals */
.modal{border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.6);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0)),var(--panel);}
.modal-overlay{background:rgba(5,4,12,.66);}

/* Badges & bits */
.badge-accent,.rm-vote.on{background:var(--accent-soft);color:var(--accent-text);}
.roadmap-card-title a.rm-link,.rm-vote:hover{color:var(--accent-text);}
.loading-spinner{border-top-color:#8b6bff;}
.save-status{border-radius:99px;}
.mobile-topbar{background:#0d0d18;}
.mobile-topbar img{width:30px;height:30px;object-fit:contain;}
#menuToggle svg{width:22px;height:22px;display:block;}

/* ================= Duplicates ================= */
.dup-box{margin-top:16px;padding:12px 14px;border-radius:var(--radius-sm);background:rgba(251,146,60,.07);border:1px solid rgba(251,146,60,.28);}
.dup-title{font-weight:700;font-size:13px;margin-bottom:6px;}
.dup-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--border-soft);font-size:13px;}
.dup-row:first-of-type{border-top:none;}
.dup-name{flex:1;min-width:0;}
.dup-name a{color:var(--text);font-weight:600;text-decoration:none;} .dup-name a:hover{color:var(--accent-text);}

/* ================= Tester picker ================= */
.field input[type=checkbox],.field input[type=radio],.rm-check input[type=checkbox]{width:auto;flex:none;}
.pick-row{display:flex;align-items:flex-start;gap:12px;padding:10px 6px;border-bottom:1px solid var(--border-soft);cursor:pointer;border-radius:8px;}
.pick-row:last-child{border-bottom:none;}
.pick-row:hover{background:rgba(124,77,255,.07);}
.pick-row input[type=checkbox]{width:17px;height:17px;flex:none;margin:6px 0 0;accent-color:#8b6bff;}
.pick-row .avatar{margin-top:1px;}
.pick-main{min-width:0;flex:1;}
.pick-top{display:flex;align-items:center;gap:8px;}
.pick-name{font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pick-free{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none;}
.pick-pct{margin-left:auto;font-size:11.5px;color:var(--text-faint);white-space:nowrap;flex:none;}
.pick-meta{font-size:12px;color:var(--text-faint);line-height:1.45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ================= Incidents list ================= */
.inc-panel{padding:0;overflow:hidden;}
.inc-month{padding:10px 20px;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-faint);background:rgba(255,255,255,.025);border-bottom:1px solid var(--border-soft);}
.inc-row{display:grid;grid-template-columns:190px minmax(0,1fr) 150px;gap:20px;align-items:start;padding:16px 20px 16px 17px;border-bottom:1px solid var(--border-soft);border-left:3px solid var(--sev, var(--border));cursor:pointer;transition:background .12s var(--ease);}
.inc-row:hover{background:rgba(124,77,255,.07);}
.inc-row:last-child{border-bottom:none;}
.inc-who .person{cursor:pointer;} .inc-who .person:hover .person-name{color:var(--accent-text);}
.inc-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:5px;}
.inc-reason{font-size:13.5px;line-height:1.55;color:var(--text-dim);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:6px;}
.inc-more{color:var(--accent-text);font-weight:600;}
.inc-side{text-align:right;}
.inc-date{font-size:13px;font-weight:600;margin-bottom:6px;}
.inc-actions{display:flex;gap:2px;justify-content:flex-end;opacity:0;transition:opacity .12s var(--ease);}
.inc-row:hover .inc-actions,.inc-row:focus-within .inc-actions{opacity:1;}
.inc-empty{padding:40px;text-align:center;color:var(--text-faint);}
@media (max-width:900px){
  .inc-row{grid-template-columns:1fr;gap:10px;padding:14px 14px 14px 12px;}
  .inc-side{display:flex;justify-content:space-between;align-items:center;text-align:left;}
  .inc-actions{opacity:1;}
  .inc-date{margin:0;}
}

/* ================= Status, leaderboard, dashboard, small screens ================= */
.avatar-wrap{position:relative;flex-shrink:0;display:inline-block;line-height:0;}
.status-dot{position:absolute;right:-1px;bottom:-1px;border-radius:50%;border:2px solid var(--panel);box-sizing:content-box;}
.status-pip{display:inline-block;width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.status-line{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-dim);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.user-card{cursor:pointer;transition:background .15s var(--ease), border-color .15s var(--ease);}
.user-card:hover{background:rgba(255,255,255,.07);border-color:rgba(177,156,255,.4);}
.status-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.status-opt{display:flex;gap:10px;align-items:flex-start;text-align:left;padding:12px;border-radius:12px;background:var(--bg-alt);border:1px solid var(--border);color:var(--text);cursor:pointer;font:inherit;}
.status-opt .status-pip{margin-top:5px;}
.status-opt.on{border-color:#8b6bff;background:var(--accent-soft);}
@media (max-width:520px){.status-grid{grid-template-columns:1fr;}}

.rank{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--panel-2);font-family:"Barlow Condensed","Barlow",sans-serif;font-weight:700;font-size:15px;color:var(--text-dim);}
.rank-1{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#2a1a00;}
.rank-2{background:linear-gradient(135deg,#d4d4e8,#a3a3c2);color:#16162a;}
.rank-3{background:linear-gradient(135deg,#e8a06a,#c47a3d);color:#2a1300;}

.dash-attn{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-bottom:22px;}
.attn{display:flex;align-items:center;gap:14px;text-align:left;padding:14px 16px;border-radius:14px;background:var(--panel);border:1px solid var(--border);color:var(--text);font:inherit;cursor:pointer;transition:border-color .15s var(--ease),transform .15s var(--ease);}
.attn:hover{transform:translateY(-1px);border-color:rgba(177,156,255,.5);}
.attn b{font-size:14px;}
.attn-n{font-family:"Barlow Condensed","Barlow",sans-serif;font-size:36px;font-weight:700;line-height:1;min-width:38px;text-align:center;}
.attn-orange .attn-n{color:var(--orange);} .attn-red .attn-n{color:var(--red);} .attn-accent .attn-n{color:var(--accent-text);} .attn-ok .attn-n{color:var(--green);}
.attn-orange{border-left:3px solid var(--orange);} .attn-red{border-left:3px solid var(--red);} .attn-accent{border-left:3px solid #8b6bff;} .attn-ok{border-left:3px solid var(--green);}
.dash-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:20px;align-items:start;}
.bar-row{display:flex;align-items:center;gap:12px;padding:6px 0;font-size:13px;}
.bar-label{width:120px;flex-shrink:0;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bar-track{flex:1;height:8px;border-radius:99px;background:var(--panel-2);overflow:hidden;}
.bar-fill{display:block;height:100%;border-radius:99px;background:var(--brand-grad);}
.rm-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:center;}
.rm-mini-n{font-family:"Barlow Condensed","Barlow",sans-serif;font-size:32px;font-weight:700;line-height:1.1;}
.queue-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--border-soft);font-size:13px;cursor:pointer;}
.queue-row:first-of-type{border-top:none;}
.queue-row:hover .queue-title{color:var(--accent-text);}
.queue-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;}

/* small screens: tables become scrollable, headers wrap, tap targets grow */
@media (max-width:900px){
  .dash-grid{grid-template-columns:1fr;}
  .page-title{font-size:28px;}
  .page-header{align-items:flex-start;}
  .panel{padding:16px;overflow-x:auto;}
  table{font-size:13px;}
  th,td{padding:10px 8px;white-space:nowrap;}
  .person-name{white-space:normal;}
  .btn{padding:10px 14px;}
  .toolbar > *{flex:1 1 100%;min-width:0;}
  .toolbar .btn{flex:1 1 auto;}
  .rm-seg{max-width:100%;overflow-x:auto;}
  .modal{max-height:92vh;}
  .modal-overlay{padding:10px;align-items:flex-end;}
  .modal-footer{flex-wrap:wrap;}
  .modal-footer .btn{flex:1 1 auto;justify-content:center;}
}
/* bug reports become cards on a phone */
@media (max-width:700px){
  #page-bugreports .panel{padding:4px 12px;overflow:visible;}
  #page-bugreports thead{display:none;}
  #page-bugreports table,#page-bugreports tbody,#page-bugreports tr{display:block;width:100%;}
  #page-bugreports tr{padding:12px 0;border-bottom:1px solid var(--border-soft);}
  #page-bugreports tr:last-child{border-bottom:none;}
  #page-bugreports td{display:inline-block;width:auto;border:0;padding:3px 10px 3px 0;white-space:normal;vertical-align:middle;}
  #page-bugreports td:first-child{display:block;width:100%;padding-bottom:6px;}
  #page-bugreports .empty-row td{display:block;text-align:center;}
}
@media (max-width:520px){
  .main{padding:16px 14px 60px;}
  .stat-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .stat-card{padding:14px 14px;}
  .stat-value{font-size:34px;}
  .dash-attn{grid-template-columns:1fr;}
  .rm-mini{grid-template-columns:repeat(2,1fr);}
  .field-row{flex-direction:column;}
}

/* Dropdowns: an opaque background, so the native list that opens is readable (a see-through one turns grey). */
select{background-color:var(--panel-2);color:var(--text);}
select option,select optgroup{background-color:var(--panel);color:var(--text);}
select option:checked{background-color:var(--accent-soft);}
.rq-task{white-space:normal;min-width:240px;max-width:520px;line-height:1.45;}
.rq-row:hover{background:rgba(124,77,255,.07);}
@media (max-width:700px){ .rq-hide-sm{display:none;} .rq-task{min-width:160px;} }
/* ---------------- Light mode ----------------
   Dark is the default. The theme is chosen under Settings -> Appearance and stored in this browser. */
:root{--accent-text:#c7b8ff;color-scheme:dark;}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f3f2fa;
  --bg-alt:#eceaf6;
  --panel:#ffffff;
  --panel-2:#f1f0f9;
  --panel-hover:#e8e6f4;
  --border:#d5d2e6;
  --border-soft:rgba(30,24,70,.09);
  --text:#1b1933;
  --text-dim:#55527a;
  --text-faint:#8582a6;
  --accent:#6a45ee;
  --accent-soft:rgba(106,69,238,.11);
  --accent-strong:#5836d6;
  --accent-text:#5836d6;
  --green:#0e8f62;
  --yellow:#a06a05;
  --orange:#c0540a;
  --red:#cf3f3b;
  --red-dim:#fdeceb;
  --shadow-sm:0 1px 3px rgba(30,24,70,.10);
  --shadow-md:0 16px 40px rgba(30,24,70,.16);
  --ring:0 0 0 1px rgba(106,69,238,.35);
}
:root[data-theme="light"] body{
  background:
    radial-gradient(900px 520px at 85% -8%, rgba(124,77,255,.10), transparent 62%),
    radial-gradient(700px 460px at -8% 108%, rgba(255,138,43,.07), transparent 58%),
    var(--bg);
  background-attachment:fixed;
}
:root[data-theme="light"] .sidebar{background:linear-gradient(180deg,#ffffff 0%,#f6f5fc 100%);}
:root[data-theme="light"] .mobile-topbar{background:#ffffff;}
:root[data-theme="light"] .panel,
:root[data-theme="light"] .stat-card{background:var(--panel);box-shadow:0 1px 2px rgba(30,24,70,.06),0 8px 24px rgba(30,24,70,.07);}
:root[data-theme="light"] .modal{background:var(--panel);box-shadow:0 30px 80px rgba(30,24,70,.28);}
:root[data-theme="light"] .modal-overlay{background:rgba(30,24,70,.38);}
:root[data-theme="light"] .roadmap-col{background:rgba(30,24,70,.03);}
:root[data-theme="light"] .nav-item:hover{background:rgba(30,24,70,.05);}
:root[data-theme="light"] .nav-item.active{background:linear-gradient(90deg,rgba(106,69,238,.16),rgba(106,69,238,.03));color:var(--text);}
:root[data-theme="light"] .user-card{background:rgba(30,24,70,.03);}
:root[data-theme="light"] .user-card:hover{background:rgba(30,24,70,.06);border-color:rgba(106,69,238,.4);}
:root[data-theme="light"] .btn{background:#fff;border-color:var(--border);}
:root[data-theme="light"] .btn:hover{background:var(--panel-2);border-color:rgba(106,69,238,.5);}
:root[data-theme="light"] .btn-primary{background:linear-gradient(135deg,#7c4dff,#9f6bff);border-color:transparent;color:#fff;}
:root[data-theme="light"] .btn-primary:hover{background:linear-gradient(135deg,#8a5cff,#ae7dff);}
:root[data-theme="light"] .btn-danger{background:var(--red-dim);color:#b3302b;border-color:rgba(207,63,59,.35);}
:root[data-theme="light"] .btn-danger:hover{background:#fbdcda;}
:root[data-theme="light"] .btn.on,:root[data-theme="light"] .rm-seg button.active{color:var(--accent-text);}
:root[data-theme="light"] .rm-seg button{background:#fff;}
:root[data-theme="light"] .rm-seg button.active{background:var(--accent-soft);}
:root[data-theme="light"] .search-input,
:root[data-theme="light"] select{background-color:#fff;}
:root[data-theme="light"] .search-input,
:root[data-theme="light"] input[type=text],
:root[data-theme="light"] input[type=date],
:root[data-theme="light"] textarea{background:#fff;}
:root[data-theme="light"] .roadmap-card:hover,
:root[data-theme="light"] .stat-card:hover,
:root[data-theme="light"] .role-card:hover{border-color:rgba(106,69,238,.35);}
:root[data-theme="light"] .inc-month{background:rgba(30,24,70,.03);}
:root[data-theme="light"] .swatch.selected{border-color:#1b1933;}
:root[data-theme="light"] .brand-logo{filter:drop-shadow(0 4px 10px rgba(124,77,255,.25));}
:root[data-theme="light"] .dup-box{background:rgba(192,84,10,.07);border-color:rgba(192,84,10,.3);}
:root[data-theme="light"] .badge-green{background:rgba(14,143,98,.12);}
:root[data-theme="light"] .badge-yellow{background:rgba(160,106,5,.13);}
:root[data-theme="light"] .badge-orange{background:rgba(192,84,10,.12);}
:root[data-theme="light"] .badge-red{background:rgba(207,63,59,.12);}
:root[data-theme="light"] .badge-gray{background:rgba(85,82,122,.11);}
:root[data-theme="light"] ::selection{background:rgba(106,69,238,.22);}