:root{--bg:#0c0f14;--card:#141924;--fg:#e8f0ff;--muted:#a8b3c7;--pri:#6ee7ff;--acc:#7c3aed}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,Inter,Arial;background:var(--bg);color:var(--fg)}
.container{max-width:1100px;margin:0 auto;padding:24px}
.site-header,.site-footer{background:#0a0d12;border-bottom:1px solid #1e2533}
.site-header .wrap,.site-footer .wrap{max-width:1100px;margin:0 auto;padding:14px 24px;display:flex;justify-content:space-between;align-items:center}
a{color:var(--pri);text-decoration:none}
nav a{color:var(--muted);margin:0 8px}
.btn{background:linear-gradient(45deg,var(--pri),var(--acc));border:0;border-radius:10px;padding:10px 14px;font-weight:700;color:#001018;cursor:pointer}
.form{display:grid;gap:12px;max-width:420px}
.form input,.form select,textarea{width:100%;padding:10px;border-radius:10px;border:1px solid #273043;background:#0f1420;color:var(--fg)}
.card{background:var(--card);border:1px solid #1e2533;border-radius:14px;padding:16px;margin:12px 0}
.small{color:var(--muted);font-size:12px}
.tabs{display:flex;gap:8px;margin:12px 0 20px}
.tab{background:#0f1420;padding:8px 12px;border-radius:12px;color:var(--muted)}

.badge-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:8px; }
.badge { background:#0f1420; border:1px solid #1e2533; border-radius:12px; padding:10px; }
.badge .i { font-size:1.2em; margin-right:8px }
.role-admin { color:#ff6b6b; font-weight:700 }
.role-mod { color:#ffd166; font-weight:700 }

/* Role colors (override default link color) */
.role-admin, .role-admin a { color:#ff6b6b !important; font-weight:700; }
.role-mod,   .role-mod a   { color:#ffd166 !important; font-weight:700; }

/* Role colors (super-specific so they beat the global 'a{color:...}') */
a.role-admin, strong a.role-admin, .card a.role-admin { color:#ff6b6b !important; font-weight:700; }
a.role-mod,   strong a.role-mod,   .card a.role-mod   { color:#ffd166 !important; font-weight:700; }


/* On small screens, wrap the right group below */
@media (max-width: 720px){
  .nav-wrap{flex-wrap:wrap}
  .nav-left{order:2; width:100%; justify-content:center; padding:6px 0}
  .nav-right{order:3; width:100%; justify-content:flex-end; gap:10px}
  .logo{order:1}
}


@media (max-width: 720px){
  .hide-on-mobile{ display:none }
  .show-on-mobile{ display:inline-flex }
  .nav-wrap{ padding-right:8px }
}

/* ---------- Desktop vs Mobile visibility ---------- */
.only-desktop{ display:flex }
.only-mobile{ display:none }

/* Header layout */
.nav-wrap{display:flex; gap:16px; align-items:center; justify-content:space-between}
.logo{font-weight:800; letter-spacing:.5px}

/* Burger button */
.burger{
  width:40px;height:36px;border:0;background:#0f1420;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--fg)
}
.burger[aria-expanded="true"] .b1{ transform: translateY(5px) rotate(45deg); transform-origin: 12px 7px }
.burger[aria-expanded="true"] .b2{ opacity:0 }
.burger[aria-expanded="true"] .b3{ transform: translateY(-5px) rotate(-45deg); transform-origin: 12px 17px }
.b1,.b2,.b3{ transition: transform .25s ease, opacity .25s ease }

/* Drawer + backdrop (slides from right) */
.drawer-backdrop{
  position:fixed; inset:0; background:rgba(8,10,16,.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity:0; transition:opacity .25s ease; z-index:80;
}
.drawer{
  position:fixed; top:0; right:0; height:100vh; width:min(92vw, 360px);
  background:rgba(18,22,30,.85); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-left:1px solid #1e2533; box-shadow: -20px 0 40px rgba(0,0,0,.3);
  transform: translateX(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1);
  z-index:90; color:var(--fg);
}
.drawer.open{ transform:none }
.drawer-backdrop.show{ opacity:1 }
.no-scroll{ overflow:hidden }

/* Drawer internals */
.drawer-header{ display:flex; align-items:center; justify-content:space-between; padding:16px 16px 8px }
.drawer-close{
  border:0;background:#0f1420;color:var(--fg);font-size:22px;line-height:1;width:36px;height:36px;border-radius:10px;cursor:pointer
}
.drawer-section{ padding:12px 16px;border-top:1px solid #1e2533 }
.drawer-title{ color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em; margin:2px 0 10px }
.drawer a{ display:block; padding:10px 8px; border-radius:10px; color:var(--fg) }
.drawer a:hover{ background:rgba(255,255,255,.04) }

/* Mobile layout rules */
@media (max-width: 720px){
  .only-desktop{ display:none }
  .only-mobile{ display:inline-flex }
}

/* ===== NAV + BURGER (final, conflict-free) ===== */

/* Desktop vs Mobile visibility */
.only-desktop{ display:flex }
.only-mobile{ display:none !important }  /* force hidden on desktop */

/* Header layout */
.nav-wrap{display:flex; gap:16px; align-items:center; justify-content:space-between}
.logo{font-weight:800; letter-spacing:.5px}

/* Burger button (hidden on desktop by .only-mobile) */
.burger{
  width:40px;height:36px;border:0;background:#0f1420;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--fg)
}
.burger .b1,.burger .b2,.burger .b3{ transition: transform .25s ease, opacity .25s ease }
.burger[aria-expanded="true"] .b1{ transform: translateY(5px) rotate(45deg); transform-origin: 12px 7px }
.burger[aria-expanded="true"] .b2{ opacity:0 }
.burger[aria-expanded="true"] .b3{ transform: translateY(-5px) rotate(-45deg); transform-origin: 12px 17px }

/* Drawer + backdrop (right side) */
.drawer-backdrop{
  position:fixed; inset:0; background:rgba(8,10,16,.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity:0; transition:opacity .25s ease; z-index:80;
}
.drawer{
  position:fixed; top:0; right:0; height:100vh; width:min(92vw, 360px);
  background:rgba(18,22,30,.85); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-left:1px solid #1e2533; box-shadow: -20px 0 40px rgba(0,0,0,.3);
  transform: translateX(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1);
  z-index:90; color:var(--fg);
}
.drawer.open{ transform:none }
.drawer-backdrop.show{ opacity:1 }
.no-scroll{ overflow:hidden }

/* Drawer internals */
.drawer-header{ display:flex; align-items:center; justify-content:space-between; padding:16px 16px 8px }
.drawer-close{
  border:0;background:#0f1420;color:var(--fg);font-size:22px;line-height:1;width:36px;height:36px;border-radius:10px;cursor:pointer
}
.drawer-section{ padding:12px 16px;border-top:1px solid #1e2533 }
.drawer-title{ color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em; margin:2px 0 10px }
.drawer a{ display:block; padding:10px 8px; border-radius:10px; color:var(--fg) }
.drawer a:hover{ background:rgba(255,255,255,.04) }

/* Mobile rules */
@media (max-width: 720px){
  .only-desktop{ display:none !important }
  .only-mobile{ display:inline-flex !important }
}

.tile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:10px 0 18px}
.tile{display:block;background:var(--card);border:1px solid #1e2533;border-radius:14px;padding:16px}
.tile:hover{outline:2px solid rgba(110,231,255,.2)}
.tile-title{font-weight:700;margin-bottom:6px}
.tile-desc{color:var(--muted);font-size:13px}
.row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #1b2230}
.row:last-child{border-bottom:0}

.set-actions-inline{ white-space:nowrap }
.mini{
  border:0; border-radius:8px; padding:4px 8px; cursor:pointer;
  background:#0f1420; color:var(--fg); margin-left:6px;
  box-shadow: inset 0 0 0 1px #273043;
}
.mini:hover{ box-shadow: inset 0 0 0 1px var(--pri) }
.mini-plus{ }
.mini-minus{ }


.ex-header{ display:grid; grid-template-columns: 1fr 1fr auto; gap:8px; align-items:center }
@media (max-width: 560px){
  .ex-header{ grid-template-columns: 1fr auto; }
  .ex-header .ex-type{ grid-column: 1 / -1; }
}

.mini-star{
  font-size:16px; line-height:1; padding:6px 10px;
}
.mini-star.active{ color:#ffd166; box-shadow: inset 0 0 0 1px #ffd166; }

.fav-bar{ margin-top:6px; }
.pill-row{ display:flex; gap:6px; overflow:auto; padding-bottom:2px }
.pill{
  background:#0f1420; color:var(--fg); border:1px solid #273043;
  border-radius:999px; padding:6px 10px; white-space:nowrap; cursor:pointer;
}
.pill:hover{ border-color: var(--pri); }


/* --- Activity heatmap --- */
.heatmap-wrap { display:flex; flex-direction:column; gap:8px }
.heatmap-grid { display:flex; gap:3px; overflow-x:auto; padding-bottom:4px }
.heat-col { display:grid; grid-template-rows: repeat(7, 12px); gap:3px }
.heat-cell {
  width:12px; height:12px; border-radius:3px;
  background:#0f1420; border:1px solid #1a2332;
}
.heat-cell.l0 { background:#0f1420; border-color:#1a2332 }
.heat-cell.l1 { background:#102635; border-color:#193345 }
.heat-cell.l2 { background:#124859; border-color:#176074 }
.heat-cell.l3 { background:#146f87; border-color:#178aa6 }
.heat-cell.l4 { background:#16a3c1; border-color:#1bc1e6 }
.heatmap-legend { display:flex; align-items:center; gap:6px }
.heatmap-legend .dot { width:12px; height:12px; border-radius:3px; display:inline-block; }
.heatmap-legend .l0 { background:#0f1420; border:1px solid #1a2332 }
.heatmap-legend .l1 { background:#102635 }
.heatmap-legend .l2 { background:#124859 }
.heatmap-legend .l3 { background:#146f87 }
.heatmap-legend .l4 { background:#16a3c1 }

/* --- Mini activity heatmap (Members) --- */
.mini-heatmap .mh-grid { display:flex; gap:2px; overflow-x:auto }
.mini-heatmap .mh-col  { display:grid; grid-template-rows:repeat(7,10px); gap:2px }
.mini-heatmap .mh-cell {
  width:10px; height:10px; border-radius:2px;
  background:#0f1420; border:1px solid #1a2332;
}
.mini-heatmap .mh-cell.l0 { background:#0f1420; border-color:#1a2332 }
.mini-heatmap .mh-cell.l1 { background:#102635; border-color:#193345 }
.mini-heatmap .mh-cell.l2 { background:#124859; border-color:#176074 }
.mini-heatmap .mh-cell.l3 { background:#146f87; border-color:#178aa6 }
.mini-heatmap .mh-cell.l4 { background:#16a3c1; border-color:#1bc1e6 }

.activity-row { display:flex; align-items:center; gap:10px; }
.activity-row .label { color: var(--muted); font-size: 12px; }