/* ==========================================================================
   Bugzilla Work — block (bento) theme. Loaded last: restyles the whole app.
   White surfaces · green #1FA971 · purple #6B4EE6 · big rounded blocks, soft shadows.
   ========================================================================== */
:root,:root[data-theme="light"]{
  color-scheme:light;
  --bz-green:#1FA971; --bz-green-d:#13764f; --bz-green-s:#E3F6EE;
  --bz-purple:#6B4EE6; --bz-purple-d:#4B33B8; --bz-purple-s:#ECE8FD;
  --bg:#F3F6F4; --bg-2:#FFFFFF; --panel:#FFFFFF; --panel-2:#F6F8F7; --panel-3:#ECF0EE;
  --line:rgba(25,20,45,.07); --line-2:rgba(25,20,45,.13); --line-3:rgba(25,20,45,.26);
  --text:#16131F; --muted:#5E5A6E; --dim:#8D8A9B;
  --orange:var(--bz-purple); --orange-2:#8C74F2; --orange-soft:var(--bz-purple-s);
  --grad:linear-gradient(135deg,#7B5FF0 0%,#6B4EE6 55%,#4B33B8 100%);
  --green:var(--bz-green-d); --violet:var(--bz-purple); --yellow:#9A6A00; --amber:#B25F00; --red:#C4352A; --blue:#2467C4; --cyan:#0E7A8B;
  --radius:22px; --side:276px;
  --shadow:0 18px 50px -28px rgba(60,40,140,.35);
  --tint:25,20,45;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0F0D18; --bg-2:#161325; --panel:#1B1730; --panel-2:#221D3A; --panel-3:#2A2447;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.13); --line-3:rgba(255,255,255,.24);
  --text:#F3F1FA; --muted:#B0ABC6; --dim:#7F7A97;
  --green:#4ADE9F; --violet:#A793FF; --tint:255,255,255;
  --bz-green-s:rgba(31,169,113,.16); --bz-purple-s:rgba(107,78,230,.22);
}
body{background:var(--bg);font-family:'Inter',system-ui,sans-serif}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(900px 500px at 105% -10%,rgba(107,78,230,.10),transparent 60%),radial-gradient(800px 500px at -10% 110%,rgba(31,169,113,.10),transparent 60%)}
::selection{background:var(--bz-purple);color:#fff}

/* wordmark */
.wordmark{font-family:'Outfit',sans-serif;font-weight:700;letter-spacing:-.03em;font-size:24px;color:var(--text);display:inline-flex;align-items:center;gap:2px}
.wordmark .wm-b{font-style:normal;display:inline-grid;place-items:center;width:1.35em;height:1.35em;border-radius:.42em;margin-right:.08em;color:#fff;font-size:.85em;
  background:linear-gradient(135deg,var(--bz-green),var(--bz-purple))}

/* floating sidebar block */
.side{inset:14px auto 14px 14px;width:calc(var(--side) - 14px);border:1px solid var(--line);border-radius:28px;background:var(--panel);box-shadow:var(--shadow)}
.main{margin-left:calc(var(--side) + 14px)}
.side-tag{color:var(--bz-purple);border-color:rgba(107,78,230,.3);background:var(--bz-purple-s)}
.menu a{border-radius:14px;padding:10px 14px}
.menu a:hover{background:var(--bz-purple-s);color:var(--bz-purple)}
.menu a.on{background:var(--grad);color:#fff;box-shadow:0 10px 22px -12px rgba(107,78,230,.7)}
.menu a.on .ic{color:#fff}
.menu .count{background:var(--bz-green);color:#fff}
.menu-sep{color:var(--bz-green-d);font-weight:700}
.side-foot{border-top:1px solid var(--line)}

/* top bar + page head */
.top{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;height:72px;padding:0 32px 0 12px}
.content{padding:6px 32px 80px 12px}
.page-head h1{font-size:clamp(26px,3vw,36px);letter-spacing:-.03em}

/* blocks */
.card{border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.card-h h2{font-size:17px}
.stats{gap:14px}
.stat{border:0;border-radius:24px;padding:20px 22px;min-height:118px;box-shadow:var(--shadow);background:var(--panel)}
.stat::before{display:none}
.stat-l{font-weight:600;letter-spacing:.1em}
.stat-v{font-size:34px;letter-spacing:-.03em}
.stats .stat:nth-child(4n+1){background:linear-gradient(145deg,#27BE82,#14935F);color:#fff}
.stats .stat:nth-child(4n+2){background:var(--grad);color:#fff}
.stats .stat:nth-child(4n+3){background:var(--bz-green-s)}
.stats .stat:nth-child(4n+4){background:var(--bz-purple-s)}
.stats .stat:nth-child(-n+2) .stat-l,.stats .stat:nth-child(-n+2) .stat-s,.stats .stat:nth-child(-n+2) .stat-v small,
.stats .stat:nth-child(2n+1):nth-child(4n+1) .stat-l{color:rgba(255,255,255,.82)}
.stats .stat:nth-child(4n+1) .stat-l,.stats .stat:nth-child(4n+1) .stat-s,.stats .stat:nth-child(4n+2) .stat-l,.stats .stat:nth-child(4n+2) .stat-s{color:rgba(255,255,255,.85)}
.stats .stat:nth-child(4n+1) *,.stats .stat:nth-child(4n+2) *{--text:#fff;color:inherit}
.stat:hover,.pcard:hover,a.stat:hover{transform:translateY(-3px) rotate(-.2deg);border-color:transparent}

/* controls */
.btn{border-radius:999px;height:40px;padding:0 18px;border:1px solid var(--line-2);background:var(--panel);font-weight:600}
.btn:hover{border-color:var(--bz-purple);color:var(--bz-purple)}
.btn-primary{background:var(--grad);color:#fff;border-color:transparent}
.btn-primary:hover{color:#fff;filter:brightness(1.06)}
input,select,textarea{border-radius:14px}
input:focus,select:focus,textarea:focus{border-color:var(--bz-purple);box-shadow:0 0 0 4px rgba(107,78,230,.14)}
.pill{border-radius:999px;font-weight:600}
.pill.green{color:var(--bz-green-d);background:var(--bz-green-s);border-color:transparent}
.pill.orange,.pill.violet{color:var(--bz-purple-d);background:var(--bz-purple-s);border-color:transparent}
.link{color:var(--bz-purple)}.link:hover{color:var(--bz-purple-d)}
table{border-collapse:separate;border-spacing:0}
thead th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:700}
tbody tr:hover td{background:var(--bz-purple-s)}
tbody tr:hover td:first-child{border-radius:14px 0 0 14px}tbody tr:hover td:last-child{border-radius:0 14px 14px 0}

/* service chips + picker */
.svc{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 10px;border-radius:999px;font-size:11.5px;font-weight:700;margin-top:4px}
.svc .ic{width:13px;height:13px}
.svc-green{background:var(--bz-green-s);color:var(--bz-green-d)}
.svc-purple{background:var(--bz-purple-s);color:var(--bz-purple-d)}
.svc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.svc-pick{border-radius:20px!important;padding:16px!important;text-align:left;border:2px solid transparent!important;cursor:pointer;transition:transform .15s,border-color .15s}
.svc-pick.svc-green{background:var(--bz-green-s)}.svc-pick.svc-purple{background:var(--bz-purple-s)}
.svc-pick:hover{transform:translateY(-2px)}
.svc-pick.on.svc-green{border-color:var(--bz-green)!important}.svc-pick.on.svc-purple{border-color:var(--bz-purple)!important}
.svc-pick b{display:block;margin-top:8px}.svc-pick small{color:var(--muted)}
.svc-pick .pick-art{color:var(--bz-purple-d)}.svc-pick.svc-green .pick-art{color:var(--bz-green-d)}
[data-svc-only]{display:contents}
.svc-block{margin-bottom:14px}

/* Services page tiles */
.bento{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.tile{margin:0;border:0}
.tile.svc-green{background:linear-gradient(160deg,var(--bz-green-s),var(--panel) 55%)}
.tile.svc-purple{background:linear-gradient(160deg,var(--bz-purple-s),var(--panel) 55%)}
.tile-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.tile-h b{font-size:20px;font-family:'Outfit',sans-serif}
.tile-ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--grad);color:#fff}
.tile.svc-green .tile-ic{background:linear-gradient(145deg,#27BE82,#14935F)}
.tile-add{border:2px dashed var(--line-3);box-shadow:none;background:transparent}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* login / setup */
.auth{background:radial-gradient(700px 500px at 10% 0%,rgba(31,169,113,.18),transparent 60%),radial-gradient(700px 500px at 100% 100%,rgba(107,78,230,.20),transparent 60%),var(--bg)}
.auth-box{border-radius:32px;box-shadow:var(--shadow);border:1px solid var(--line);background:var(--panel)}
.auth-brand>span:not(.wordmark){color:var(--bz-green-d);letter-spacing:.3em;font-weight:700}

@media (max-width:980px){.main{margin-left:0}.side{inset:0 auto 0 0;border-radius:0 28px 28px 0}.content{padding:6px 16px 80px}.top{padding:0 16px}.row2{grid-template-columns:1fr}}

/* ---- readability + one colour pattern (purple primary, green accent) ---- */
:root,:root[data-theme="light"]{--card:var(--panel);--blue:var(--bz-purple);--cyan:var(--bz-green-d);--violet:var(--bz-purple)}
:root[data-theme="dark"]{--card:var(--panel);--blue:#A793FF;--cyan:#4ADE9F}
body{font-size:15px;line-height:1.6;color:var(--text)}
.dim,.hint,small{color:var(--muted)}
.card,.nd-card,.rw-pop-card,.pop-box,.up-box{color:var(--text)}
.nd-wrap,.pop-wrap{background:rgba(22,19,31,.55)}
.nd-card,.pop-box,.up-box,.rw-pop-card{background:var(--panel);border:1px solid var(--line-2);border-radius:26px;box-shadow:0 40px 90px -30px rgba(60,40,140,.5)}
.nd-card h2,.pop-box h2,.up-box h2,.rw-pop-card h2{color:var(--text);font-size:22px}
.nd-card p,.nd-card span,.nd-list li,.pop-box p{color:var(--text)}
.nd-list li{background:var(--bz-purple-s);border-radius:16px;padding:12px 14px}
.nd-list li b{color:var(--bz-purple-d)}
.today-card,.ht-main,.card-alert,.msg.mine{background:var(--bz-purple-s);color:var(--text)}
.water{background:var(--bz-green-s);color:var(--text);border-color:rgba(31,169,113,.35)}
.btn-primary,.btn-primary *,.step.on,.seg-b.on,.menu .count,.step-n,.ver,.tab-red b{color:#fff}
.tab.on{background:var(--bz-purple);border-color:var(--bz-purple);color:#fff}.tab.on b{background:rgba(255,255,255,.2);color:#fff}
.ov{background:var(--bz-purple);color:#fff}
a{color:inherit}.link{color:var(--bz-purple)}
.pill{color:var(--muted)}
.pill.blue,.pill.violet,.pill.orange,.pill.cyan{color:var(--bz-purple-d);background:var(--bz-purple-s);border-color:transparent}
.pill.green,.pill.ok{color:var(--bz-green-d);background:var(--bz-green-s);border-color:transparent}
.c-orange,.c-violet{color:var(--bz-purple)}.c-green{color:var(--bz-green-d)}
:root[data-theme="dark"] .pill.blue,:root[data-theme="dark"] .pill.violet,:root[data-theme="dark"] .pill.orange{color:#C7BBFF}
:root[data-theme="dark"] .pill.green{color:#6EE7B7}
input,select,textarea{color:var(--text);background:var(--panel-2)}
input::placeholder,textarea::placeholder{color:var(--dim)}

.stats .stat:nth-child(4n+1),.stats .stat:nth-child(4n+2){color:#fff}
.stats .stat:nth-child(4n+3),.stats .stat:nth-child(4n+4){color:var(--text)}
.stats .stat:nth-child(4n+3) .stat-v{color:var(--bz-green-d)}.stats .stat:nth-child(4n+4) .stat-v{color:var(--bz-purple-d)}
.seg-b.on{background:var(--bz-purple);color:#fff;border-color:transparent}

:root[data-theme="dark"] .nd-list li b,:root[data-theme="dark"] .link{color:#C7BBFF}
:root[data-theme="dark"] .nd-list li{background:rgba(167,147,255,.14)}