:root{
  /* Bathshack brand */
  --pink:#e6017e;
  --pink-dark:#b8015f;
  --pink-soft:rgba(230,1,126,0.08);
  --pink-soft-strong:rgba(230,1,126,0.14);

  /* Neutrals */
  --bg:#faf9f8;
  --panel:#ffffff;
  --raised:#fbfafa;
  --border:#e7e3e1;
  --border-soft:#efebe9;
  --ink:#1c1c1e;
  --dim:#6b6f76;
  --faint:#9a9ea5;

  /* Semantic (Core Web Vitals) */
  --good:#1f9d55;
  --good-bg:rgba(31,157,85,0.09);
  --improve:#b9840f;
  --improve-bg:rgba(185,132,15,0.1);
  --poor:#d92d20;
  --poor-bg:rgba(217,45,32,0.09);

  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --sans:'IBM Plex Sans', -apple-system, sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(1100px 500px at 12% -10%, var(--pink-soft), transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  min-height:100vh;
  padding:28px 20px 60px;
}
.wrap{max-width:1080px;margin:0 auto;}

/* ---- Header ---- */
.rig-header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap;}
.rig-title{display:flex;align-items:center;gap:10px;}
.rig-title .dial-icon{width:28px;height:28px;flex-shrink:0;}
.rig-title h1{font-size:19px;font-weight:700;letter-spacing:0.01em;margin:0;color:var(--ink);}
.rig-title .sub{font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:2px;letter-spacing:0.02em;}
.rig-header-right{font-family:var(--mono);font-size:11px;color:var(--faint);text-align:right;}

/* ---- Control strip ---- */
.control-strip{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  margin-bottom:22px;
  box-shadow:0 1px 2px rgba(28,28,30,0.03);
}
.control-row{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;}
.url-field{
  flex:1 1 320px;
  display:flex;align-items:center;gap:8px;
  background:var(--raised);
  border:1px solid var(--border);
  border-radius:8px;
  padding:0 12px;
}
.url-field:focus-within{border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-soft);}
.url-field svg{flex-shrink:0;opacity:0.45;width:14px;height:14px;color:var(--dim);}
.url-field input{
  flex:1;background:none;border:none;outline:none;color:var(--ink);
  font-family:var(--mono);font-size:13px;padding:11px 0;min-width:0;
}
.url-field input::placeholder{color:var(--faint);}

.device-toggle{display:flex;background:var(--raised);border:1px solid var(--border);border-radius:8px;padding:3px;}
.device-toggle button{
  background:none;border:none;color:var(--dim);font-family:var(--sans);font-size:12px;font-weight:600;
  padding:8px 14px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .15s;
}
.device-toggle button.active{background:var(--pink);color:#fff;}
.device-toggle svg{width:14px;height:14px;}

.run-btn{
  background:var(--pink);color:#fff;border:none;border-radius:8px;
  font-family:var(--sans);font-weight:700;font-size:13px;padding:0 22px;cursor:pointer;
  display:flex;align-items:center;gap:8px;white-space:nowrap;transition:filter .15s, opacity .15s;
}
.run-btn:hover{filter:brightness(0.92);}
.run-btn:disabled{opacity:0.55;cursor:default;}
.run-btn svg{width:15px;height:15px;}
.run-btn .spin{animation:spin 0.9s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.control-options{display:flex;align-items:center;gap:18px;margin-top:12px;flex-wrap:wrap;}
.opt-check{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--dim);cursor:pointer;user-select:none;}
.opt-check input{accent-color:var(--pink);}
.adv-toggle{font-size:12px;color:var(--pink-dark);cursor:pointer;background:none;border:none;font-family:var(--sans);padding:0;margin-left:auto;font-weight:600;}
.adv-panel{display:none;margin-top:12px;padding-top:12px;border-top:1px solid var(--border-soft);gap:10px;flex-wrap:wrap;align-items:center;}
.adv-panel.open{display:flex;}
.adv-panel label{font-size:11px;color:var(--faint);font-family:var(--mono);}
.adv-panel input[type=text]{background:var(--raised);border:1px solid var(--border);border-radius:6px;color:var(--ink);font-family:var(--mono);font-size:12px;padding:7px 10px;width:260px;}

.status-line{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin-top:10px;min-height:16px;}
.status-line.err{color:var(--poor);}

/* ---- Panels ---- */
.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:18px;box-shadow:0 1px 2px rgba(28,28,30,0.03);}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:8px;}
.panel-head h2{font-size:13px;text-transform:uppercase;letter-spacing:0.08em;color:var(--dim);margin:0;font-weight:600;}
.panel-head .meta{font-family:var(--mono);font-size:11px;color:var(--faint);}

/* ---- Gauges ---- */
.gauge-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;}
.gauge{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;border-radius:10px;background:var(--raised);border:1px solid var(--border-soft);}
.gauge svg{width:104px;height:104px;}
.gauge .num{font-family:var(--mono);font-weight:700;font-size:22px;}
.gauge .label{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:0.06em;}

/* ---- Tabs ---- */
.tabs{display:flex;gap:6px;background:var(--raised);border:1px solid var(--border);border-radius:8px;padding:3px;width:fit-content;}
.tabs button{background:none;border:none;color:var(--dim);font-family:var(--sans);font-size:12px;font-weight:600;padding:7px 14px;border-radius:6px;cursor:pointer;}
.tabs button.active{background:var(--pink);color:#fff;}

.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:14px;}
.metric-card{background:var(--raised);border:1px solid var(--border-soft);border-left:3px solid var(--border);border-radius:8px;padding:12px 14px;position:relative;}
.metric-card.good{border-left-color:var(--good);}
.metric-card.improve{border-left-color:var(--improve);}
.metric-card.poor{border-left-color:var(--poor);}
.metric-card .m-label{font-size:11px;color:var(--dim);display:flex;align-items:center;gap:5px;}
.metric-card .m-label .full{font-weight:600;}
.metric-card .m-val{font-family:var(--mono);font-size:22px;font-weight:600;margin-top:6px;color:var(--ink);}
.metric-card .m-val .unit{font-size:12px;color:var(--faint);font-weight:400;margin-left:2px;}
.metric-card .m-tag{position:absolute;top:10px;right:10px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;padding:2px 6px;border-radius:4px;}
.metric-card.good .m-tag{background:var(--good-bg);color:var(--good);}
.metric-card.improve .m-tag{background:var(--improve-bg);color:var(--improve);}
.metric-card.poor .m-tag{background:var(--poor-bg);color:var(--poor);}
.metric-card.nodata{opacity:0.45;}
.metric-note{font-size:10.5px;color:var(--faint);margin-top:14px;line-height:1.5;font-family:var(--mono);}

.inp-callout{background:var(--pink-soft);border:1px solid var(--pink-soft-strong);border-radius:8px;padding:12px 14px;margin-top:14px;font-size:12px;color:var(--dim);line-height:1.55;}
.inp-callout b{color:var(--ink);}

/* ---- Diagnostics ---- */
.diag-item{border:1px solid var(--border-soft);border-radius:8px;margin-bottom:8px;overflow:hidden;background:var(--raised);}
.diag-head{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;}
.diag-head .sev-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.diag-head .sev-dot.high{background:var(--poor);}
.diag-head .sev-dot.med{background:var(--improve);}
.diag-head .sev-dot.low{background:var(--faint);}
.diag-head .title{font-size:13px;font-weight:600;flex:1;color:var(--ink);}
.diag-head .save{font-family:var(--mono);font-size:11.5px;color:var(--faint);white-space:nowrap;}
.diag-head .chev{width:14px;height:14px;color:var(--faint);transition:transform .15s;flex-shrink:0;}
.diag-item.open .chev{transform:rotate(90deg);}
.diag-body{display:none;padding:0 14px 14px 32px;font-size:12.5px;color:var(--dim);line-height:1.6;}
.diag-item.open .diag-body{display:block;}
.diag-body .fix{background:var(--panel);border:1px solid var(--border-soft);border-radius:6px;padding:10px 12px;margin-top:10px;}
.diag-body .fix .fix-label{font-size:10px;text-transform:uppercase;letter-spacing:0.06em;color:var(--pink-dark);font-weight:700;margin-bottom:4px;}
.diag-empty{color:var(--faint);font-size:12.5px;text-align:center;padding:20px 0;}

.evidence-label{font-size:10px;text-transform:uppercase;letter-spacing:0.06em;color:var(--dim);font-weight:700;margin-top:12px;margin-bottom:6px;}
.evidence-list{display:flex;flex-direction:column;gap:4px;}
.evidence-row{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--border-soft);border-radius:6px;
  padding:6px 10px;font-family:var(--mono);font-size:11.5px;
}
.evidence-row .ev-label{color:var(--ink);word-break:break-all;}
.evidence-row .ev-meta{color:var(--faint);font-size:11px;margin-left:auto;white-space:nowrap;}
.evidence-row .ev-badge{
  font-family:var(--sans);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.03em;
  padding:1px 6px;border-radius:4px;white-space:nowrap;
}
.evidence-row .ev-badge.tp{background:var(--improve-bg);color:var(--improve);}

.fix-files{margin-top:10px;}
.fix-files .fix-label{font-size:10px;text-transform:uppercase;letter-spacing:0.06em;color:var(--pink-dark);font-weight:700;margin-bottom:4px;}
.fix-files ul{margin:0;padding-left:18px;}
.fix-files li{font-family:var(--mono);font-size:11.5px;color:var(--dim);margin-bottom:2px;}

/* ---- History ---- */
.history-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;}
.hist-chip{
  flex-shrink:0;display:flex;flex-direction:column;gap:4px;padding:10px 14px;border-radius:8px;
  background:var(--raised);border:1px solid var(--border-soft);cursor:pointer;min-width:96px;
}
.hist-chip:hover{border-color:var(--pink);}
.hist-chip .hc-score{font-family:var(--mono);font-weight:700;font-size:18px;}
.hist-chip .hc-meta{font-size:10px;color:var(--faint);font-family:var(--mono);}
.hist-empty{color:var(--faint);font-size:12px;}

.empty-state{text-align:center;padding:60px 20px;color:var(--faint);}
.empty-state svg{width:40px;height:40px;opacity:0.35;margin-bottom:14px;color:var(--pink);}
.empty-state .e-title{font-size:14px;color:var(--dim);margin-bottom:6px;}
.empty-state .e-sub{font-size:12px;max-width:380px;margin:0 auto;line-height:1.6;}

footer{text-align:center;font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:30px;line-height:1.7;}
footer a{color:var(--faint);}

@media (max-width:560px){
  .rig-header{flex-direction:column;align-items:flex-start;}
  .control-row{flex-direction:column;}
  .device-toggle,.run-btn{width:100%;justify-content:center;}
}