:root{
  --bg:#080c11; --bg2:#0b1119; --card:#111a24; --card2:#16212e; --line:#1f2d3c;
  --tx:#e8eff6; --dim:#8fa1b4; --faint:#5d6e80;
  --ok:#3fb950; --warn:#e3a008; --crit:#f85149; --info:#58a6ff; --viol:#a371f7;
  --r:16px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;max-width:100%;overflow-x:hidden}
body{
  background:
    radial-gradient(1100px 480px at 78% -8%, rgba(88,166,255,.10), transparent 62%),
    radial-gradient(760px 380px at 6% 4%, rgba(163,113,247,.08), transparent 60%),
    var(--bg);
  background-attachment:fixed;
  color:var(--tx);
  font:15px/1.55 "IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  padding-bottom:calc(34px + env(safe-area-inset-bottom));
}

/* ---------------------------------------------------------------- motion */
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes breathe{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.15;transform:scale(2.5)}}
@keyframes sheen{from{background-position:-160% 0}to{background-position:260% 0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes alertGlow{
  0%,100%{box-shadow:inset 3px 0 0 var(--crit), 0 0 0 rgba(248,81,73,0)}
  50%    {box-shadow:inset 3px 0 0 var(--crit), 0 0 22px rgba(248,81,73,.20)}
}

.reveal{opacity:0}
.reveal.in{animation:rise .62s var(--ease) both; animation-delay:calc(var(--i,0) * 55ms)}

/* ----------------------------------------------------------------- shell */
header{
  position:sticky; top:0; z-index:20;
  background:linear-gradient(180deg, rgba(8,12,17,.96), rgba(8,12,17,.80));
  backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid var(--line);
  padding:calc(12px + env(safe-area-inset-top)) 16px 12px;
  display:flex; align-items:center; gap:12px;
}
/* Any instance of the mark, anywhere, gets a trace colour and a sane default. */
.mk{display:block;color:var(--faint);--mk-trace:var(--tx)}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
/* The ring carries the status colour, so the mark doubles as the status lamp. */
.brand .mk{width:27px;height:27px;flex:0 0 auto;display:block;color:var(--faint);
  --mk-trace:var(--tx);transition:color .5s var(--ease)}
.brand .wm{display:block;font-family:Archivo,system-ui,sans-serif;font-variation-settings:"wght" 800;
  font-weight:800;font-size:18px;letter-spacing:-.02em;line-height:1.08}
.brand small{display:block;font-family:Archivo,system-ui,sans-serif;font-variation-settings:"wdth" 116,"wght" 500;
  font-weight:500;font-size:9.5px;color:var(--faint);letter-spacing:.15em;margin-top:2px;text-transform:uppercase}
.pill{
  margin-left:auto; font-family:Archivo,system-ui,sans-serif; font-size:12px; font-weight:700;
  font-variation-settings:"wdth" 108,"wght" 700; letter-spacing:.02em; padding:7px 13px 7px 11px;
  border-radius:999px; white-space:nowrap; display:flex; align-items:center; gap:8px;
  transition:background .5s var(--ease), color .5s var(--ease);
}
.pill.ok{background:rgba(63,185,80,.14);color:var(--ok)}
.pill.warn{background:rgba(227,160,8,.15);color:var(--warn)}
.pill.crit{background:rgba(248,81,73,.16);color:var(--crit)}
.pill.load{background:rgba(88,166,255,.12);color:var(--info)}

/* the refresh sweep that runs along the header while data is being fetched */
#sweep{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden;opacity:0;transition:opacity .3s}
#sweep.on{opacity:1}
#sweep i{
  display:block;height:100%;width:40%;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--info),transparent);
  animation:sheen 1.05s linear infinite;
}

.wrap{padding:16px;max-width:820px;margin:0 auto}
/* instrument label: Archivo at its widest. The one place the width axis is used. */
h2{
  font-family:Archivo,system-ui,sans-serif;font-variation-settings:"wdth" 118,"wght" 600;
  font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  margin:30px 0 11px;display:flex;align-items:center;gap:9px;
}
h2::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
h2:first-child{margin-top:6px}

.card{
  background:linear-gradient(180deg,var(--card),var(--bg2));
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px -22px rgba(0,0,0,.9);
}

/* ------------------------------------------------------------- app rows */
.row{display:flex;align-items:center;gap:12px;padding:13px 15px;border-top:1px solid var(--line);
  transition:background .3s var(--ease)}
.row:first-child{border-top:0}
.row:active{background:var(--card2)}
.dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;position:relative}
.dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:inherit;animation:breathe 3s ease-in-out infinite}
.dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)} .dot.crit{background:var(--crit)}
.dot.crit::after{animation-duration:1.2s}
.nm{font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sub{font-size:12px;color:var(--faint)}
.right{margin-left:auto;text-align:right;flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.ms{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;
  font-size:12.5px;color:var(--dim)}
.ms.slow{color:var(--warn)}
.spark path{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:draw 1.1s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* --------------------------------------------------------------- meters */
.mrow{padding:14px 15px;border-top:1px solid var(--line)}
.mrow:first-child{border-top:0}
.mhead{display:flex;gap:10px;align-items:baseline;font-size:13.5px}
.mhead b{font-weight:500}
.mhead .v{margin-left:auto;color:var(--dim);font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums;font-size:12.5px}
.bar{height:7px;border-radius:4px;background:#0d151e;overflow:hidden;margin-top:8px;position:relative}
.bar>i{
  display:block;height:100%;border-radius:4px;width:0;
  background:linear-gradient(90deg,#2ea043,var(--ok));
  transition:width 1.05s var(--ease);
  position:relative;overflow:hidden;
}
.bar>i::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  background-size:200% 100%; animation:sheen 2.6s linear infinite;
}
.bar>i.warn{background:linear-gradient(90deg,#b3820a,var(--warn))}
.bar>i.crit{background:linear-gradient(90deg,#c9372f,var(--crit))}

/* --------------------------------------------------------------- alerts */
.alert{padding:14px 15px;border-top:1px solid var(--line);box-shadow:inset 3px 0 0 var(--warn)}
.alert.crit{animation:alertGlow 2.4s ease-in-out infinite}
.alert b{display:block;margin-bottom:4px;font-family:Archivo,system-ui,sans-serif;
  font-variation-settings:"wght" 700;font-weight:700;font-size:14.5px;letter-spacing:-.01em}
.alert p{margin:0;font-size:13px;color:var(--dim);white-space:pre-wrap}
.empty{padding:28px 15px;text-align:center;color:var(--faint);font-size:13px}

/* ----------------------------------------------------------------- tabs */
.tabs{display:flex;gap:7px;margin:0 0 12px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  flex:0 0 auto;padding:9px 15px;border:1px solid var(--line);background:var(--card);color:var(--dim);
  border-radius:999px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:all .35s var(--ease);
}
.tabs button[aria-selected=true]{
  background:var(--card2); color:var(--tx); border-color:#33506d;
  box-shadow:0 0 0 1px rgba(88,166,255,.18), 0 4px 16px -8px rgba(88,166,255,.5);
  transform:translateY(-1px);
}
.swap{animation:fadein .45s var(--ease)}

/* ---------------------------------------------------------- big numbers */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
.stat{background:var(--bg2);padding:15px}
.stat .n{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:22px;font-weight:600;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--tx)}
.stat .n.pulse{animation:pop .5s var(--ease)}
.stat .l{font-family:Archivo,system-ui,sans-serif;font-variation-settings:"wdth" 112,"wght" 500;
  font-size:10px;color:var(--faint);margin-top:5px;letter-spacing:.11em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --------------------------------------------------------------- charts */
.tgrid{display:flex;align-items:flex-end;gap:4px;height:98px;padding:16px 15px 0}
.tgrid div{
  flex:1;min-width:0;border-radius:3px 3px 0 0;height:0;
  background:linear-gradient(180deg,var(--info),rgba(88,166,255,.35));
  transition:height .85s var(--ease);
}
.tlab{display:flex;justify-content:space-between;padding:10px 15px 13px;font-size:11px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;color:var(--faint)}
.area{display:block;width:100%;height:120px}
.area path.ln{fill:none;stroke:var(--viol);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 1.35s var(--ease) forwards}
.area path.fl{fill:url(#vgrad);opacity:0;animation:fadein .9s var(--ease) .45s forwards}
.rhythm{display:flex;align-items:flex-end;gap:2px;height:70px;padding:16px 15px 0}
.rhythm div{flex:1;border-radius:2px 2px 0 0;height:0;background:linear-gradient(180deg,var(--viol),rgba(163,113,247,.3));
  transition:height .8s var(--ease)}

/* rank rows: app usage, referrers, pages */
.rank{padding:12px 15px;border-top:1px solid var(--line)}
.rank:first-child{border-top:0}
.rank .rh{display:flex;gap:10px;align-items:baseline;font-size:13.5px;margin-bottom:7px}
.rank .rh b{font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank .rh .v{margin-left:auto;color:var(--dim);font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums;font-size:12px;flex:0 0 auto}
.rank .rb{height:6px;border-radius:3px;background:#0d151e;overflow:hidden}
.rank .rb>i{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,rgba(88,166,255,.5),var(--info));
  transition:width .95s var(--ease)}
.rank.alt .rb>i{background:linear-gradient(90deg,rgba(163,113,247,.5),var(--viol))}

/* --------------------------------------------------------------- setup */
.setup{padding:20px}
.setup input{width:100%;padding:12px 13px;margin:9px 0 12px;background:var(--bg);border:1px solid var(--line);
  color:var(--tx);border-radius:11px;font:inherit;transition:border-color .3s,box-shadow .3s}
.setup input:focus{outline:none;border-color:#3d6a96;box-shadow:0 0 0 3px rgba(88,166,255,.14)}
.setup button{width:100%;padding:13px;background:linear-gradient(180deg,#6cb2ff,var(--info));color:#04121f;
  border:0;border-radius:11px;font:inherit;font-family:Archivo,system-ui,sans-serif;font-weight:700;
  cursor:pointer;transition:transform .2s var(--ease)}
.setup button:active{transform:scale(.98)}

.foot{text-align:center;color:var(--faint);font-size:11px;margin:30px 0 8px;line-height:1.8}
.foot a{color:var(--faint)}
.spinner{display:inline-block;width:11px;height:11px;border:2px solid rgba(143,161,180,.3);
  border-top-color:var(--dim);border-radius:50%;animation:spin .8s linear infinite;vertical-align:-1px}

@media (prefers-reduced-motion: reduce){
  *,*::after,*::before{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1}
  .bar>i,.tgrid div,.rhythm div,.rank .rb>i{transition:none}
  .spark path,.area path.ln{stroke-dashoffset:0!important}
  .area path.fl{opacity:1}
}

/* ==================================================== views & navigation == */
.viewnav{
  position:sticky; top:calc(62px + env(safe-area-inset-top)); z-index:19;
  display:flex; gap:7px; padding:11px 16px; overflow-x:auto; scrollbar-width:none;
  background:linear-gradient(180deg,rgba(8,12,17,.97),rgba(8,12,17,.86));
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line);
}
.viewnav::-webkit-scrollbar{display:none}
.viewnav button{
  flex:0 0 auto; padding:11px 16px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:var(--card); color:var(--dim);
  font-family:Archivo,system-ui,sans-serif; font-variation-settings:"wdth" 106,"wght" 600;
  font-size:12.5px; letter-spacing:.01em; transition:all .3s var(--ease);
}
.viewnav button[aria-current="true"]{
  background:var(--card2); color:var(--tx); border-color:#33506d;
  box-shadow:0 0 0 1px rgba(88,166,255,.16);
}
.view{animation:fadein .4s var(--ease)}

/* ============================================================== controls == */
.ctrl{display:flex;gap:10px;align-items:center;padding:13px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ctrl.bare{padding:0 0 11px;border-bottom:0}
.ctrl select{
  flex:1 1 150px; min-width:0; padding:8px 11px; border-radius:10px;
  background:var(--bg); border:1px solid var(--line); color:var(--tx);
  font:inherit; font-size:13px;
}
.seg{display:flex;gap:5px;flex:0 0 auto}
.seg.scrollx{overflow-x:auto;scrollbar-width:none;flex:1 1 auto}
.seg.scrollx::-webkit-scrollbar{display:none}
.seg button{
  flex:0 0 auto; padding:10px 14px; border-radius:9px; cursor:pointer;
  border:1px solid var(--line); background:var(--card); color:var(--faint);
  font:inherit; font-size:12px; font-weight:500; transition:all .28s var(--ease);
}
.seg button[aria-pressed="true"]{background:var(--card2);color:var(--tx);border-color:#33506d}

/* ================================================================== hero == */
.hero{padding:20px 18px;display:grid;gap:5px}
.hero .st{
  font-family:Archivo,system-ui,sans-serif; font-variation-settings:"wght" 800;
  font-size:27px; letter-spacing:-.03em; line-height:1.1;
}
.hero .why{color:var(--dim);font-size:14px}
.hero .meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:9px;
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--faint)}

/* ========================================================== domain cards == */
.dcards{display:grid;gap:12px}
@media (min-width:620px){ .dcards{grid-template-columns:1fr 1fr} }
.dcard{
  text-align:left; width:100%; cursor:pointer; display:grid; gap:11px; padding:16px;
  background:linear-gradient(180deg,var(--card),var(--bg2));
  border:1px solid var(--line); border-radius:var(--r); color:inherit; font:inherit;
  transition:border-color .3s var(--ease), transform .2s var(--ease);
}
.dcard:hover{border-color:#33506d}
.dcard:active{transform:scale(.99)}
.dcard .top{display:flex;align-items:center;gap:10px}
.dcard .nm{font-family:Archivo,system-ui,sans-serif;font-variation-settings:"wght" 700;
  font-size:15.5px;letter-spacing:-.01em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dcard .chev{margin-left:auto;color:var(--faint);flex:0 0 auto}
.dcard .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.dcard .kpi{display:grid;gap:2px}
.dcard .kpi b{font-family:"IBM Plex Mono",monospace;font-size:15px;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--tx)}
.dcard .kpi span{font-size:10.5px;color:var(--faint);letter-spacing:.02em}
.dcard .tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-family:"IBM Plex Mono",monospace;font-size:10.5px;padding:3px 8px;border-radius:999px;white-space:nowrap;
  background:var(--card2);border:1px solid var(--line);color:var(--dim)}
.tag.warn{color:var(--warn);border-color:rgba(227,160,8,.35)}
.tag.crit{color:var(--crit);border-color:rgba(248,81,73,.4)}
.tag.ok{color:var(--ok);border-color:rgba(63,185,80,.3)}

/* =============================================================== charts == */
.chart{display:block;width:100%;height:170px;touch-action:none;cursor:crosshair}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .ln{fill:none;stroke:var(--info);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .fl{fill:url(#cg)}
.chart .cur{stroke:var(--faint);stroke-width:1;stroke-dasharray:3 3}
.chart .dot{fill:var(--info);stroke:var(--bg2);stroke-width:2}
.chart .bad{fill:var(--crit);opacity:.16}
.chart text{font-family:"IBM Plex Mono",monospace;font-size:10px;fill:var(--faint)}
.statline{display:flex;gap:0;border-top:1px solid var(--line)}
.statline div{flex:1;padding:11px 8px;text-align:center;border-left:1px solid var(--line)}
.statline div:first-child{border-left:0}
.statline b{display:block;font-family:"IBM Plex Mono",monospace;font-size:14px;font-weight:600;
  font-variant-numeric:tabular-nums}
.statline span{font-size:10px;color:var(--faint);letter-spacing:.06em;text-transform:uppercase}
.readout{padding:9px 14px;border-top:1px solid var(--line);font-family:"IBM Plex Mono",monospace;
  font-size:12px;color:var(--dim);min-height:36px}

/* ============================================================= app grid == */
.appgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:1px;background:var(--line)}
.apptile{
  background:var(--bg2); padding:13px 11px; display:grid; gap:6px; cursor:pointer;
  border:0; color:inherit; font:inherit; text-align:left; transition:background .25s var(--ease);
}
.apptile:hover{background:var(--card2)}
.apptile .t{display:flex;align-items:center;gap:7px}
.apptile .n{font-size:12px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apptile .v{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--faint)}

/* ====================================================== expandable rows == */
.row.tap{cursor:pointer}
.row .caret{margin-left:6px;color:var(--faint);transition:transform .3s var(--ease);flex:0 0 auto}
.row.open .caret{transform:rotate(90deg)}
.exp{padding:2px 15px 16px;border-top:1px solid var(--line);animation:fadein .3s var(--ease)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px;margin-top:12px}
.kv dt{color:var(--faint)}
.kv dd{margin:0;font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--dim);
  word-break:break-all;text-align:right}

/* ================================================================= misc == */
.backbtn{
  display:inline-flex;align-items:center;gap:8px;margin:2px 0 14px;padding:8px 14px;
  border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--dim);
  font:inherit;font-size:12.5px;cursor:pointer;transition:color .25s,border-color .25s;
}
.backbtn:hover{color:var(--tx);border-color:var(--faint)}
.vhead{display:flex;align-items:center;gap:12px;margin:0 0 4px}
.vhead .mk{width:22px;height:22px;flex:0 0 auto}
.vhead h1{font-family:Archivo,system-ui,sans-serif;font-variation-settings:"wght" 800;
  font-size:23px;letter-spacing:-.025em;margin:0;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.hint{color:var(--faint);font-size:12.5px;text-align:center;margin:12px 0 0}
.note{padding:13px 15px;border-top:1px solid var(--line);color:var(--faint);font-size:12.5px;line-height:1.55}
.note:first-child{border-top:0}

/* ============================================================= diagnosis == */
.dx{
  background:linear-gradient(180deg,var(--card),var(--bg2));
  border:1px solid var(--line); border-radius:var(--r); padding:17px 17px 15px;
  margin-bottom:12px; box-shadow:var(--shadow, none);
  animation:rise .55s var(--ease) both; animation-delay:calc(var(--i,0) * 60ms);
}
.dx.crit{box-shadow:inset 3px 0 0 var(--crit)}
.dx.warn{box-shadow:inset 3px 0 0 var(--warn)}
.dx.info{box-shadow:inset 3px 0 0 var(--faint)}
.dxh{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:9px}
.dxh .sev{
  font-family:Archivo,system-ui,sans-serif;font-variation-settings:"wdth" 112,"wght" 700;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;
}
.dxh .sev.crit{background:rgba(248,81,73,.15);color:var(--crit)}
.dxh .sev.warn{background:rgba(227,160,8,.15);color:var(--warn)}
.dxh .sev.info{background:var(--card2);color:var(--dim)}
.dxh .conf,.dxh .scope{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;color:var(--faint);
  border:1px solid var(--line);border-radius:999px;padding:2px 8px;
}
.dxt{
  display:block;font-family:Archivo,system-ui,sans-serif;font-variation-settings:"wght" 700;
  font-weight:700;font-size:16.5px;letter-spacing:-.015em;line-height:1.3;margin-bottom:7px;
  text-wrap:balance;
}
.dxc{margin:0;color:var(--dim);font-size:14px;line-height:1.6}
.dxe{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:5px}
.dxe li{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;color:var(--faint);
  padding-left:14px;position:relative;line-height:1.5;word-break:break-word;
}
.dxe li::before{content:'';position:absolute;left:0;top:.62em;width:5px;height:1px;background:var(--faint)}
.dxa{
  margin:13px 0 0;padding:11px 12px;border-radius:10px;background:var(--card2);
  border:1px solid var(--line);font-size:13px;color:var(--tx);line-height:1.55;
}
.dxa span{
  display:block;font-family:Archivo,system-ui,sans-serif;font-variation-settings:"wdth" 114,"wght" 700;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--info);margin-bottom:4px;
}
.pad{padding:16px}

/* ================================================================= fixes == */
.fixes{margin-top:14px;border-top:1px solid var(--line);padding-top:13px}
.fixhead{
  font-family:Archivo,system-ui,sans-serif;font-variation-settings:"wdth" 114,"wght" 700;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:10px;
}
.fix{
  border:1px solid var(--line);border-radius:11px;padding:12px 13px;margin-bottom:9px;
  background:var(--bg2);
}
.fix:last-child{margin-bottom:0}
.fix b{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-family:Archivo,system-ui,sans-serif;font-variation-settings:"wght" 600;font-weight:600;
  font-size:13.5px;margin-bottom:5px;
}
.fix .risk{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9.5px;font-weight:400;
  padding:2px 7px;border-radius:999px;border:1px solid var(--line);color:var(--faint);
}
.fix .risk.careful{color:var(--warn);border-color:rgba(227,160,8,.4)}
.fix p{margin:0;font-size:13px;color:var(--dim);line-height:1.55}
.fixbtn{
  margin-top:10px;margin-right:8px;padding:9px 15px;border-radius:9px;cursor:pointer;
  border:1px solid transparent;background:var(--info);color:#04121f;
  font:inherit;font-family:Archivo,system-ui,sans-serif;font-weight:700;font-size:12.5px;
  transition:transform .18s var(--ease), background .25s, color .25s;
}
.fixbtn:active{transform:scale(.97)}
.fixbtn:disabled{opacity:.55;cursor:default}
.fixbtn.ghost{background:transparent;color:var(--dim);border-color:var(--line)}
.fixbtn.ghost:hover{color:var(--tx);border-color:var(--faint)}
.fixbtn.armed{background:var(--warn);color:#1a1204}
.fixmsg{margin-top:10px;font-size:12.5px;color:var(--dim);line-height:1.5}
.fixmsg.ok{color:var(--ok)}
.fixmsg.bad{color:var(--crit)}
.fixmsg textarea{
  width:100%;margin-top:7px;padding:10px;border-radius:9px;background:var(--bg);
  border:1px solid var(--line);color:var(--tx);font-family:"IBM Plex Mono",monospace;
  font-size:11.5px;line-height:1.5;resize:vertical;
}

/* ================================================================== mail == */
.mrowx{display:flex;align-items:center;gap:11px;padding:13px 15px;border-top:1px solid var(--line);cursor:pointer}
.mrowx:first-child{border-top:0}
.mrowx .nm{font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrowx .val{margin-left:auto;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;
  color:var(--dim);text-align:right;flex:0 0 auto}
.mtable{width:100%;border-collapse:collapse;font-size:13px}
.mtable th{
  font-family:Archivo,system-ui,sans-serif;font-variation-settings:"wdth" 112,"wght" 600;
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);
  text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.mtable td{padding:12px 14px;border-bottom:1px solid var(--rule-soft, var(--line))}
.mtable tbody tr{cursor:pointer;transition:background .2s var(--ease)}
.mtable tbody tr:hover{background:var(--card2)}
.mtable td.num{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;
  text-align:right;color:var(--dim);white-space:nowrap}
.mtable tr.det td{background:var(--bg2);cursor:default}
.mtable tr.det:hover td{background:var(--bg2)}
.tw2{overflow-x:auto}
.qbar{height:5px;border-radius:3px;background:#0d151e;overflow:hidden;margin-top:6px;min-width:64px}
.qbar>i{display:block;height:100%;width:0;border-radius:3px;background:var(--ok);transition:width .9s var(--ease)}
.qbar>i.warn{background:var(--warn)} .qbar>i.crit{background:var(--crit)}


/* --------------------------------------------------- readability at 320px == */
/* A label that explains something must never be clipped: on a narrow phone it
   is better for it to take two lines than to end in an ellipsis. */
.mrowx .nm{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
#history .nm,#alerts .nm{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
.mrowx .val{white-space:nowrap}

/* On the narrowest phones the brand subtitle wraps and makes the header ragged.
   The wordmark and the status pill are what matter there. */
@media (max-width:360px){
  .brand small{display:none}
  header{padding-left:13px;padding-right:13px}
}

/* =================================================================== home == */
.hcards{display:grid;gap:12px}
@media (min-width:620px){ .hcards{grid-template-columns:1fr 1fr} }
.hcard{
  display:grid; gap:9px; padding:16px; text-align:left; width:100%; cursor:pointer;
  background:linear-gradient(180deg,var(--card),var(--bg2));
  border:1px solid var(--line); border-radius:var(--r); color:inherit; font:inherit;
  transition:border-color .3s var(--ease), transform .2s var(--ease);
}
.hcard:hover{border-color:#33506d}
.hcard:active{transform:scale(.99)}
.hcard .htop{display:flex;align-items:center;gap:10px}
.hcard .hname{
  font-family:Archivo,system-ui,sans-serif;font-variation-settings:"wght" 700;font-weight:700;
  font-size:15.5px;letter-spacing:-.01em;
}
.hcard .chev{margin-left:auto;color:var(--faint);flex:0 0 auto}
.hcard .hline{font-size:13.5px;color:var(--tx);line-height:1.45}
.hcard .hline.quiet{color:var(--dim)}
.hcard .hkpis{
  display:flex;gap:14px;flex-wrap:wrap;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums;
}
.hcard .hkpis b{color:var(--dim);font-weight:500}

/* ============================================================== directory == */
.dirrow{display:flex;align-items:flex-start;gap:11px;padding:13px 15px;border-top:1px solid var(--line)}
.dirrow:first-child{border-top:0}
.dirrow .dot{margin-top:5px}
.dirmain{display:grid;gap:2px;min-width:0;flex:1}
.dirname{
  font-family:Archivo,system-ui,sans-serif;font-variation-settings:"wght" 600;font-weight:600;
  font-size:14.5px;color:var(--tx);text-decoration:none;
}
.dirname:hover{color:var(--info)}
.dirurl{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;color:var(--faint);
  word-break:break-all;line-height:1.4}
.dirside{display:grid;gap:6px;justify-items:end;flex:0 0 auto;text-align:right}
.dircode{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;color:var(--faint);white-space:nowrap}
.dircode.bad{color:var(--crit)}
.diradmin{
  font-family:Archivo,system-ui,sans-serif;font-weight:600;font-size:11.5px;
  color:var(--info);text-decoration:none;white-space:nowrap;
  border:1px solid var(--line);border-radius:999px;padding:5px 10px;
}
.diradmin:hover{border-color:#33506d}

/* ---------------------------------------------------------- drilldown -- */
/* A panel rather than a page: the list is the context, and losing it to open
   one item makes comparing two findings a navigation exercise. */
.drillopen {
  margin-top: 12px; background: none; border: 0; padding: 6px 0;
  color: var(--accent, #6ea8fe); font: inherit; font-size: .86rem;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.drillopen:hover { opacity: .8; }

.drill {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,.62);
  display: flex; align-items: flex-end; justify-content: center;
  animation: drillin .18s ease-out;
}
@keyframes drillin { from { opacity: 0 } to { opacity: 1 } }
/* The class sets display:flex, which beats the browser's own [hidden] rule —
   without this line the overlay sits over every view and swallows every tap. */
.drill[hidden] { display: none; }

.drillcard {
  background: var(--card, #14181f); color: var(--fg, #e8ecf1);
  width: min(720px, 100%); max-height: 88vh; overflow-y: auto;
  border-radius: 16px 16px 0 0; padding: 20px 18px 34px;
  box-shadow: 0 -8px 40px rgba(0,0,0,.5);
  animation: drillup .22s cubic-bezier(.2,.7,.3,1);
}
@keyframes drillup { from { transform: translateY(22px) } to { transform: translateY(0) } }
@media (min-width: 720px) {
  .drill { align-items: center; }
  .drillcard { border-radius: 16px; max-height: 84vh; }
}

.drillx {
  float: right; background: none; border: 1px solid var(--line, #2a3240);
  color: var(--muted, #9aa7b6); border-radius: 999px;
  padding: 5px 13px; font: inherit; font-size: .8rem; cursor: pointer;
}
.drillx:hover { color: var(--fg, #e8ecf1); }

.drillt { margin: 10px 0 4px; font-size: 1.18rem; line-height: 1.3; }
.drillwhen { margin: 0 0 14px; color: var(--muted, #9aa7b6); font-size: .82rem; }
.drillcard h3 {
  margin: 18px 0 6px; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--muted, #9aa7b6);
}
.drillcard p { margin: 0 0 8px; line-height: 1.55; }
.drillcard .dxe { margin: 4px 0 0; padding-left: 18px; }
.drillcard .dxe li { margin: 4px 0; line-height: 1.5; }

.recheck { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line, #2a3240); }

/* ================================================================= logs == */
.tgrid.lghours div.warn{background:linear-gradient(180deg,var(--warn),rgba(227,160,8,.35))}
.tgrid.lghours div.crit{background:linear-gradient(180deg,var(--crit),rgba(248,81,73,.35))}
.mrow.tap,.row.tap{cursor:pointer}
.mrow.tap:active{background:var(--card2)}
.lgsearch{gap:8px}
.lgsearch input{
  flex:1 1 auto;min-width:0;padding:9px 12px;border-radius:9px;border:1px solid var(--line);
  background:var(--bg);color:var(--tx);font:inherit;font-size:13px;
}
.lgsearch input:focus{outline:none;border-color:var(--info)}
.lgchips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line)}
.lgchip{cursor:pointer;font:inherit;font-family:"IBM Plex Mono",monospace;font-size:10.5px}
.lgchip:hover{color:var(--tx);border-color:var(--faint)}
.lg{padding:10px 15px;border-top:1px solid var(--line);font-size:12.5px}
.lg:first-child{border-top:0}
.lgm{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums;margin-bottom:4px}
.lgm .dot{width:7px;height:7px}
.lgm .lgh{color:var(--dim)}
.lgm .lgip{margin-left:auto}
.lgl{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;color:var(--tx);word-break:break-all;line-height:1.5}
.lgs{color:var(--dim);margin-top:2px;word-break:break-word;line-height:1.5}
.lgs.quiet{color:var(--faint);font-size:11.5px}