/* DataTR Relay paneli. Betik yok (CSP); etkileşimler CSS ve <details> ile.
   İlkeler: yarı saydam kenarlık ve katmanlı gölge, sayılarda tabular rakam, hareket kısa (150-200ms)
   ve ease-out, hover sadece fareli cihazlarda, "hareketi azalt" ayarına saygı. */
:root {
  --bg:#f6f7f9; --surface:#fff; --surface-2:#fafbfc; --card:#fff; --fg:#0f172a; --fg-2:#334155; --muted:#64748b; --faint:#94a3b8;
  --line:rgba(15,23,42,.08); --line-2:rgba(15,23,42,.05); --line-strong:rgba(15,23,42,.14);
  --accent:#3b5bfd; --accent-hover:#2f4be0; --accent-soft:rgba(59,91,253,.08); --ring:rgba(59,91,253,.28);
  --ok:#0f7b55; --ok-soft:rgba(16,163,110,.10); --warn:#a55a00; --warn-soft:rgba(245,158,11,.14); --err:#c42b33; --err-soft:rgba(225,45,57,.09);
  --info:#475569; --info-soft:rgba(71,85,105,.08);
  --side:#0b1120; --side-2:#111a2e; --side-fg:#9aa6bf; --side-fg-strong:#e7ecf6; --side-hover:rgba(255,255,255,.05); --side-active:rgba(255,255,255,.09);
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.02);
  --shadow-md:0 1px 2px rgba(15,23,42,.04), 0 8px 24px -10px rgba(15,23,42,.14);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --r-sm:6px; --r:10px; --r-lg:14px;
  --mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing:border-box; }
html, body { margin:0; }
body { font:14px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--fg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a { color:var(--accent); text-decoration:none; }
@media (hover:hover) and (pointer:fine) { a:hover { text-decoration:underline; text-underline-offset:2px; } }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
::selection { background:rgba(59,91,253,.18); }

/* ---------- Yerleşim ---------- */
body.app { display:flex; min-height:100vh; }
.shell { flex:1; min-width:0; display:flex; flex-direction:column; }
main { padding:28px 32px; flex:1; min-width:0; }
main.center { max-width:420px; margin:9vh auto 0; width:100%; padding:0 16px; }
footer { color:var(--faint); font-size:12px; padding:16px 32px 28px; }
body.bare { min-height:100vh; background:radial-gradient(1200px 600px at 50% -10%, rgba(59,91,253,.12), transparent 60%) no-repeat, var(--bg); }
body.bare footer { text-align:center; }

/* ---------- Kenar menüsü ---------- */
.side { width:256px; flex:0 0 256px; position:sticky; top:0; height:100vh; overflow-y:auto; overscroll-behavior:contain;
  background:linear-gradient(180deg, var(--side-2), var(--side) 220px); color:var(--side-fg); padding:14px 10px 28px;
  border-right:1px solid rgba(255,255,255,.04); scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.12) transparent; }
.side .brand { display:flex; align-items:center; gap:10px; color:var(--side-fg-strong); font-weight:650; font-size:15px; letter-spacing:-.01em; padding:6px 10px 18px; }
.side .brand:hover { text-decoration:none; }
.brand-t span { color:var(--side-fg); font-weight:500; }
.logo { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:8px; flex-shrink:0;
  background:linear-gradient(135deg,#5b7cff,#22c3a6); color:#fff; font-weight:800; font-size:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 4px 12px -4px rgba(59,91,253,.6); }
.side nav a { display:flex; align-items:center; gap:8px; color:var(--side-fg); padding:6px 10px; margin:1px 0; border-radius:7px; font-size:13.5px;
  position:relative; transition:background-color 150ms var(--ease-out), color 150ms var(--ease-out); }
.side nav a .nt { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (hover:hover) and (pointer:fine) { .side nav a:hover { background:var(--side-hover); color:var(--side-fg-strong); text-decoration:none; } }
.side nav a.active { background:var(--side-active); color:#fff; font-weight:550; }
.side nav a.active::before { content:""; position:absolute; left:-10px; top:7px; bottom:7px; width:3px; border-radius:0 3px 3px 0; background:#6f8cff; }
.navpin { padding-bottom:10px; margin-bottom:8px; border-bottom:1px solid rgba(255,255,255,.06); }
details.navgroup { margin:2px 0; }
details.navgroup > summary { list-style:none; display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none;
  padding:7px 10px; border-radius:7px; font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:#6b7793;
  transition:color 150ms var(--ease-out), background-color 150ms var(--ease-out); }
details.navgroup > summary::-webkit-details-marker { display:none; }
details.navgroup > summary .ng-t { flex:1; }
@media (hover:hover) and (pointer:fine) { details.navgroup > summary:hover { color:var(--side-fg-strong); background:var(--side-hover); } }
details.navgroup[open] > summary { color:#aab4cb; }
details.navgroup[open] > summary .nbadge { display:none; }
.chev { width:14px; height:14px; flex-shrink:0; opacity:.7; transition:transform 180ms var(--ease-out); }
details.navgroup[open] > summary .chev { transform:rotate(90deg); }
.navitems { padding:2px 0 8px; }
.navitems a { padding-left:14px !important; }
.nbadge { flex-shrink:0; min-width:20px; height:18px; padding:0 6px; border-radius:9px; display:inline-grid; place-items:center;
  font-size:11px; font-weight:650; font-variant-numeric:tabular-nums; letter-spacing:0; background:rgba(255,255,255,.1); color:#dbe3f3; }
.nbadge.n-err { background:#e5484d; color:#fff; }
.nbadge.n-warn { background:#f5a524; color:#2a1700; }

/* ---------- Üst bar (yarı saydam katman) ---------- */
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; height:56px; padding:0 32px; position:sticky; top:0; z-index:5;
  background:rgba(246,247,249,.78); -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line); }
.crumb { display:flex; align-items:center; gap:8px; min-width:0; font-size:13.5px; }
.crumb-s { color:var(--muted); white-space:nowrap; }
.crumb-sep { color:var(--faint); }
.crumb-p { font-weight:600; color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.logout { display:flex; align-items:center; gap:14px; margin:0; flex-shrink:0; }
.who { display:inline-flex; align-items:center; gap:8px; color:var(--fg-2); font-size:13px; }
a.who:hover { text-decoration:none; color:var(--fg); }
.avatar { width:24px; height:24px; border-radius:50%; display:inline-grid; place-items:center; font-size:11px; font-weight:700; text-transform:uppercase;
  background:linear-gradient(135deg,#dfe6ff,#d4f3ec); color:#33427a; flex-shrink:0; }
.role { background:var(--info-soft); color:var(--info); border-radius:10px; padding:1px 8px; font-size:11.5px; }
button.link { background:none; border:0; color:var(--muted); padding:0; cursor:pointer; font:inherit; font-size:13px; box-shadow:none; }
@media (hover:hover) and (pointer:fine) { button.link:hover { color:var(--fg); background:none; } }

/* ---------- Başlık ---------- */
.pagehead { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:20px; }
h1 { font-size:24px; line-height:1.2; font-weight:650; margin:0 0 6px; letter-spacing:-.02em; }
h2 { font-size:15px; font-weight:600; margin:0 0 12px; letter-spacing:-.005em; }
.desc { color:var(--muted); margin:0; max-width:860px; line-height:1.55; }
.total { color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; }

/* ---------- Filtreler ---------- */
.filters { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:16px; }
.filters input[type=search] { flex:1; min-width:240px; max-width:520px; margin-top:0; }
.seg { display:inline-flex; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:2px; gap:2px; box-shadow:var(--shadow-sm); }
.seg button { background:transparent; color:var(--fg-2); border:0; padding:5px 11px; font:inherit; font-size:13px; font-weight:500; cursor:pointer; border-radius:5px; box-shadow:none; }
@media (hover:hover) and (pointer:fine) { .seg button:hover { background:var(--surface-2); } }
.seg button.on { background:var(--accent-soft); color:var(--accent); font-weight:600; }

/* ---------- Kartlar ---------- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px 22px; margin-bottom:16px; box-shadow:var(--shadow-sm); }
.card.narrow { max-width:420px; margin:0 auto; box-shadow:var(--shadow-md); }
.authbrand { display:flex; align-items:center; justify-content:center; gap:10px; font-size:17px; color:var(--fg-2); margin-bottom:18px; }
.authbrand b { color:var(--fg); }
.authbrand .logo { width:34px; height:34px; font-size:16px; border-radius:10px; }
.card.auth { padding:28px 28px 24px; }
.card.auth h1 { font-size:20px; margin-bottom:16px; }
.card.auth button[type=submit] { width:100%; padding:10px 16px; margin-top:4px; }
.cardhead { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; }
.cols .card { margin-bottom:0; }

/* ---------- İstatistik kutucukları ---------- */
.stats { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; margin-bottom:20px; }
.stat { display:block; position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px 14px 18px; color:var(--fg);
  box-shadow:var(--shadow-sm); transition:box-shadow 180ms var(--ease-out), transform 180ms var(--ease-out); }
.stat::before { content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:0 3px 3px 0; background:var(--faint); }
@media (hover:hover) and (pointer:fine) { a.stat:hover { text-decoration:none; box-shadow:var(--shadow-md); transform:translateY(-1px); } }
.stat-v { font-size:26px; font-weight:650; letter-spacing:-.025em; font-variant-numeric:tabular-nums; line-height:1.25; }
.stat-l { color:var(--muted); font-size:12.5px; }
.t-ok::before { background:#10a36e; } .t-warn::before { background:#f59e0b; } .t-err::before { background:#e5484d; } .t-info::before { background:#8592ad; }

/* ---------- Canlı genel bakış ---------- */
:root { --c-sent:#16a34a; --c-defer:#f59e0b; --c-bounce:#ef4444; --c-accept:#3b5bfd; --c-hold:#8b5cf6; }
.dash-head { align-items:center; }
.dash-tools { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.seg a { display:inline-block; padding:5px 11px; border-radius:5px; color:var(--fg-2); font-size:13px; font-weight:500; }
@media (hover:hover) and (pointer:fine) { .seg a:hover { background:var(--surface-2); text-decoration:none; } }
.seg a.on { background:var(--accent-soft); color:var(--accent); font-weight:600; }
.live { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ok); font-weight:600; font-variant-numeric:tabular-nums;
  background:var(--ok-soft); border:1px solid rgba(22,163,74,.18); padding:4px 10px; border-radius:999px; white-space:nowrap; }
.live-dot { width:8px; height:8px; border-radius:50%; background:#16a34a; position:relative; }
.live-dot::after { content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid #16a34a; opacity:0; animation:pulse 2s var(--ease-out) infinite; }
@keyframes pulse { 0% { transform:scale(.6); opacity:.7; } 100% { transform:scale(1.6); opacity:0; } }
.live.off { color:var(--err); background:var(--err-soft); border-color:rgba(225,45,57,.2); }
.live.off .live-dot { background:#ef4444; } .live.off .live-dot::after { display:none; }

/* Sağlık şeridi */
.health { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; min-height:32px; }
.hp { display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 10px; border-radius:999px; background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow-sm); color:var(--fg-2); font-size:12.5px; transition:box-shadow 150ms var(--ease-out); }
@media (hover:hover) and (pointer:fine) { a.hp:hover { text-decoration:none; box-shadow:var(--shadow-md); } }
.hp-l { color:var(--muted); }
.hp-v { font-weight:600; color:var(--fg); font-variant-numeric:tabular-nums; }
.hp-dot { width:8px; height:8px; border-radius:50%; background:var(--faint); flex-shrink:0; }
.hp-ok .hp-dot { background:#16a34a; box-shadow:0 0 0 3px rgba(22,163,74,.15); }
.hp-warn .hp-dot { background:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.18); }
.hp-err { border-color:rgba(225,45,57,.3); background:var(--err-soft); }
.hp-err .hp-dot { background:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.2); }

/* KPI kartları */
.kpis { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-bottom:16px; }
@media (min-width:1500px) { .kpis { grid-template-columns:repeat(8, minmax(0,1fr)); } }
.kpi { position:relative; display:flex; flex-direction:column; min-height:122px; overflow:hidden; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:14px 16px 0; color:var(--fg); box-shadow:var(--shadow-sm); transition:box-shadow 180ms var(--ease-out), transform 180ms var(--ease-out); }
@media (hover:hover) and (pointer:fine) { a.kpi:hover { text-decoration:none; box-shadow:var(--shadow-md); transform:translateY(-1px); } }
.kpi::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--faint); opacity:.9; }
.kpi.t-ok::before { background:linear-gradient(90deg,#16a34a,#4ade80); } .kpi.t-warn::before { background:linear-gradient(90deg,#f59e0b,#fcd34d); }
.kpi.t-err::before { background:linear-gradient(90deg,#ef4444,#fb7185); } .kpi.t-info::before { background:linear-gradient(90deg,#3b5bfd,#60a5fa); }
.kpi-top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.kpi-l { font-size:12.5px; color:var(--muted); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kpi-d { font-size:11.5px; font-weight:650; font-variant-numeric:tabular-nums; padding:0 7px; border-radius:9px; line-height:19px; white-space:nowrap; }
.kpi-d.good { color:#15803d; background:rgba(22,163,74,.1); } .kpi-d.bad { color:#b91c1c; background:rgba(239,68,68,.1); } .kpi-d.flat { color:var(--muted); background:var(--info-soft); }
.kpi-v { font-size:28px; font-weight:700; letter-spacing:-.03em; line-height:1.2; margin-top:6px; font-variant-numeric:tabular-nums; }
.kpi-sp { margin:auto -16px 0; height:36px; }
svg.kpi-spark { display:block; width:100%; height:36px; }
.kpi-meter { margin:14px 16px 16px; height:6px; border-radius:3px; background:var(--line-2); overflow:hidden; }
.kpi-meter-f { display:block; height:100%; width:0; border-radius:3px; background:linear-gradient(90deg,#16a34a,#4ade80); transition:width 700ms var(--ease-out); }
.kpi.skel { background:linear-gradient(90deg, var(--surface) 0%, #f1f4f8 50%, var(--surface) 100%); background-size:200% 100%; animation:shimmer 1.4s linear infinite; }
@keyframes shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }

/* Panel ızgarası */
.dgrid { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:16px; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px 18px; box-shadow:var(--shadow-sm); min-width:0; }
.panel > header { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.panel h2 { font-size:14px; margin:0; font-weight:650; }
.phint { font-size:12px; color:var(--faint); }
.s4 { grid-column:span 4; } .s6 { grid-column:span 6; } .s8 { grid-column:span 8; } .s12 { grid-column:span 12; }
@media (max-width:1200px) { .s4 { grid-column:span 6; } .s8 { grid-column:span 12; } }
@media (max-width:760px) { .s4, .s6, .s8 { grid-column:span 12; } .kpis { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.legend { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; color:var(--muted); align-items:center; }
.lg { display:inline-flex; align-items:center; gap:6px; }
.sw { display:inline-block; width:9px; height:9px; border-radius:3px; flex-shrink:0; }
.chart { position:relative; min-height:270px; }
.chart.sm { min-height:250px; }
.chart.is-empty::after { content:"Bu aralıkta veri yok"; position:absolute; inset:0; display:grid; place-items:center; color:var(--faint); font-size:13px; background:rgba(255,255,255,.6); }
.uplot { font-family:inherit; }
.u-over { cursor:crosshair; }
.u-tip { position:absolute; z-index:10; pointer-events:none; min-width:170px; background:rgba(15,23,42,.94); color:#f8fafc; border-radius:10px; padding:9px 11px;
  font-size:12px; box-shadow:0 10px 30px -10px rgba(15,23,42,.5); font-variant-numeric:tabular-nums; }
.u-tip-t { color:#cbd5e1; font-weight:600; margin-bottom:5px; font-size:11.5px; }
.u-tip-r { display:flex; align-items:center; gap:7px; line-height:20px; }
.u-tip-r b { margin-left:auto; padding-left:12px; font-weight:650; }
.u-tip-r.total { border-top:1px solid rgba(255,255,255,.12); margin-top:4px; padding-top:3px; color:#cbd5e1; }
.u-tip-n { color:#e2e8f0; }

/* Halka grafik */
.donut-wrap { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
svg.donut { width:150px; height:150px; flex-shrink:0; }
.donut-bg { fill:none; stroke:var(--line-2); stroke-width:18; }
.donut-seg { transition:stroke-dasharray 500ms var(--ease-out), stroke-dashoffset 500ms var(--ease-out); }
@media (hover:hover) and (pointer:fine) { .donut-seg:hover { stroke-width:22; } }
.donut-total { font-size:22px; font-weight:700; text-anchor:middle; fill:var(--fg); letter-spacing:-.02em; }
.donut-label { font-size:10px; text-anchor:middle; fill:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
ul.dlegend { list-style:none; margin:0; padding:0; flex:1; min-width:150px; display:flex; flex-direction:column; gap:7px; font-size:13px; }
ul.dlegend li { display:flex; align-items:center; gap:8px; }
.dl-n { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dl-v { font-weight:600; font-variant-numeric:tabular-nums; color:var(--fg-2); }

/* Sıralamalar ve çubuklar */
ol.rank { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.rk-top { display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:13px; }
.rk-n { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--fg); font-weight:500; }
a.rk-n { color:var(--fg); }
.rk-v { flex-shrink:0; font-variant-numeric:tabular-nums; font-weight:650; }
.rk-x { font-weight:500; font-size:11.5px; color:var(--muted); margin-left:6px; }
.bar { height:6px; margin-top:5px; border-radius:3px; background:var(--line-2); overflow:hidden; }
.bar-f { display:block; height:100%; width:0; border-radius:3px; background:var(--c-accept); transition:width 600ms var(--ease-out); }
.bar-f.tone-ok { background:linear-gradient(90deg,#16a34a,#4ade80); } .bar-f.tone-warn { background:linear-gradient(90deg,#f59e0b,#fcd34d); }
.bar-f.tone-err { background:linear-gradient(90deg,#ef4444,#fb7185); } .bar-f.tone-info { background:linear-gradient(90deg,#3b5bfd,#60a5fa); }
.empty-sm { color:var(--faint); font-size:13px; margin:6px 0; }

/* Canlı akış */
ol.feed { list-style:none; margin:0; padding:0; }
.fd { display:grid; grid-template-columns:14px 74px 120px minmax(0,1.2fr) minmax(0,2fr); gap:12px; align-items:center; padding:8px 4px; border-bottom:1px solid var(--line-2); font-size:13px; }
.fd:last-child { border-bottom:0; }
.fd-dot { width:8px; height:8px; border-radius:50%; background:var(--faint); justify-self:center; }
.fd-sent .fd-dot { background:#16a34a; } .fd-deferred .fd-dot { background:#f59e0b; } .fd-bounced .fd-dot { background:#ef4444; } .fd-rejected .fd-dot { background:#8b5cf6; }
.fd-t { font-family:var(--mono); font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.fd-k { font-weight:600; font-size:12px; }
.fd-sent .fd-k { color:#15803d; } .fd-deferred .fd-k { color:#b45309; } .fd-bounced .fd-k { color:#b91c1c; } .fd-rejected .fd-k { color:#6d28d9; }
.fd-m { display:flex; flex-direction:column; min-width:0; }
.fd-target { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--fg); font-weight:500; }
.fd-who { font-size:11.5px; color:var(--faint); font-family:var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fd-x { color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fd-new { animation:feedIn 600ms var(--ease-out); }
@keyframes feedIn { from { opacity:0; transform:translateY(-6px); background:rgba(59,91,253,.08); } to { opacity:1; transform:none; background:transparent; } }
@media (max-width:760px) { .fd { grid-template-columns:14px 64px minmax(0,1fr); } .fd-k, .fd-x { display:none; } }

/* ---------- Tablolar ---------- */
.tablewrap { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:auto; max-height:calc(100vh - 260px); box-shadow:var(--shadow-sm); }
.tablewrap.flat { max-height:none; }
table.grid { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; font-variant-numeric:tabular-nums; }
table.grid th { position:sticky; top:0; z-index:1; text-align:left; font-weight:600; font-size:12px; color:var(--muted); padding:10px 12px; white-space:nowrap;
  background:rgba(250,251,252,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
table.grid td { padding:9px 12px; border-bottom:1px solid var(--line-2); vertical-align:top; white-space:nowrap; }
table.grid tbody tr:last-child td { border-bottom:0; }
table.grid tbody tr { transition:background-color 120ms var(--ease-out); }
@media (hover:hover) and (pointer:fine) { table.grid tbody tr:hover { background:rgba(59,91,253,.03); } }
.card table.grid th { background:transparent; position:static; -webkit-backdrop-filter:none; backdrop-filter:none; }
table.grid.compact td { padding:6px 4px; }
td.num, th.num, td.k-num, th.k-num { text-align:right; }
td.mono, .mono, td.k-mono { font-family:var(--mono); font-size:12.5px; letter-spacing:-.01em; }
td.wide, td.k-wide { white-space:normal; min-width:300px; max-width:620px; overflow-wrap:anywhere; color:var(--fg-2); }
td.k-wide { font-size:12.5px; }
.clip { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
/* Kısaltılan değerin tamamı başlıkta (title); sayılar ve tarihler kısaltılmaz */
.cv { display:inline-block; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
td.k-num .cv { max-width:none; }
td.k-mono .cv { max-width:220px; }
table.grid { font-size:12.5px; }
td.wide, td.k-wide { min-width:200px; max-width:420px; }
/* Yatay kaydırılan tablolarda sağda "devamı var" gölgesi */
.tablewrap { background:
  linear-gradient(to right, var(--surface) 30%, rgba(255,255,255,0)) left center / 40px 100% no-repeat local,
  linear-gradient(to left, var(--surface) 30%, rgba(255,255,255,0)) right center / 40px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%, rgba(15,23,42,.12), transparent) left center / 14px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,.12), transparent) right center / 14px 100% no-repeat scroll,
  var(--surface); }
table.grid td { padding:9px 14px; } table.grid th { padding:10px 14px; }
table.grid tbody td:first-child { color:var(--muted); font-variant-numeric:tabular-nums; }
.total-chip { white-space:nowrap; font-size:13px; color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:5px 12px; box-shadow:var(--shadow-sm); }
.total-chip b { color:var(--fg); font-variant-numeric:tabular-nums; }
.small { font-size:12px; }
.pager { display:flex; gap:16px; align-items:center; justify-content:flex-end; padding:12px 4px; color:var(--muted); font-variant-numeric:tabular-nums; }
.empty { background:var(--surface); border:1px dashed var(--line-strong); border-radius:var(--r-lg); padding:44px 24px; text-align:center; color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:6px; }
.empty b { color:var(--fg-2); font-weight:600; }
.empty-ic { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:20px; color:var(--accent); background:var(--accent-soft); margin-bottom:6px; }

/* ---------- Etiketler ---------- */
.badge { display:inline-block; font-size:11.5px; font-weight:550; line-height:19px; border-radius:10px; padding:0 8px; white-space:nowrap;
  background:var(--info-soft); color:var(--info); box-shadow:inset 0 0 0 1px rgba(15,23,42,.05); }
.badge a { color:inherit; }
.b-ok { background:var(--ok-soft); color:var(--ok); } .b-warn { background:var(--warn-soft); color:var(--warn); }
.b-err { background:var(--err-soft); color:var(--err); } .b-info { background:var(--info-soft); color:var(--info); }

/* ---------- Mail izi ---------- */
ol.timeline { list-style:none; margin:0; padding:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden; }
ol.timeline li { display:flex; gap:16px; padding:12px 16px; border-bottom:1px solid var(--line-2); }
ol.timeline li:last-child { border-bottom:0; }
.tl-time { font-family:var(--mono); font-size:12px; color:var(--muted); white-space:nowrap; padding-top:2px; font-variant-numeric:tabular-nums; }
.tl-body { min-width:0; overflow-wrap:anywhere; }
li.src-postfix { box-shadow:inset 3px 0 0 #8592ad; } li.src-relay { box-shadow:inset 3px 0 0 var(--accent); }

/* ---------- Servisler ---------- */
.node2 { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px 20px 20px; margin-bottom:18px; box-shadow:var(--shadow-sm); }
.node2-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.node2-title { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.node2-title h2 { margin:0; font-size:16px; }
.nd { width:9px; height:9px; border-radius:50%; flex-shrink:0; background:var(--faint); }
.nd-ok { background:#16a34a; box-shadow:0 0 0 3px rgba(22,163,74,.15); } .nd-warn { background:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.18); }
.nd-err { background:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.18); }
.tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:10px; margin-bottom:16px; }
.tile { background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--r); padding:10px 12px; display:flex; flex-direction:column; gap:3px; min-width:0; }
.tile-l { font-size:11.5px; color:var(--muted); }
.tile-2 { grid-column:span 2; }
.tile b { font-size:14px; font-variant-numeric:tabular-nums; }
progress.meter { -webkit-appearance:none; appearance:none; width:100%; height:5px; border:0; border-radius:3px; overflow:hidden; background:var(--line); margin-top:4px; }
progress.meter::-webkit-progress-bar { background:var(--line); border-radius:3px; }
progress.meter::-webkit-progress-value { background:#16a34a; border-radius:3px; } progress.meter::-moz-progress-bar { background:#16a34a; }
progress.meter.m-warn::-webkit-progress-value { background:#f59e0b; } progress.meter.m-warn::-moz-progress-bar { background:#f59e0b; }
progress.meter.m-err::-webkit-progress-value { background:#ef4444; } progress.meter.m-err::-moz-progress-bar { background:#ef4444; }
.qchips { display:flex; flex-wrap:wrap; gap:6px; font-weight:500; font-size:12.5px !important; }
.qchips span { background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:1px 8px; color:var(--fg-2); }
.qchips i { font-style:normal; font-weight:650; color:var(--fg); }
.qchips span.hot { border-color:rgba(245,158,11,.4); background:var(--warn-soft); }
.ugrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:10px; }
.ucard { border:1px solid var(--line); border-radius:var(--r); padding:11px 13px; display:flex; flex-direction:column; gap:5px; min-width:0; background:var(--surface);
  transition:box-shadow 150ms var(--ease-out); }
@media (hover:hover) and (pointer:fine) { .ucard:hover { box-shadow:var(--shadow-md); } }
.ucard.u-err { border-color:rgba(239,68,68,.35); background:linear-gradient(0deg, rgba(239,68,68,.04), rgba(239,68,68,.04)), var(--surface); }
.ucard.u-warn { border-color:rgba(245,158,11,.4); }
.ucard-top { display:flex; align-items:center; gap:8px; min-width:0; }
.uname { font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; }
.udesc { font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.umeta { display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12px; color:var(--fg-2); font-variant-numeric:tabular-nums; }
.uact form { display:flex; gap:6px; margin:4px 0 0; flex-wrap:wrap; }

/* ---------- Mail takibi: özet ve yolculuk ---------- */
.tsum { display:flex; flex-wrap:wrap; align-items:center; gap:16px 32px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px 22px; margin-bottom:18px; box-shadow:var(--shadow-sm); border-left:4px solid var(--faint); }
.tsum-ok { border-left-color:#16a34a; } .tsum-warn { border-left-color:#f59e0b; } .tsum-err { border-left-color:#ef4444; } .tsum-info { border-left-color:var(--accent); }
.tsum-status { display:flex; align-items:center; gap:10px; font-size:18px; font-weight:650; letter-spacing:-.01em; min-width:200px; }
.tsum-dot { width:12px; height:12px; border-radius:50%; background:var(--faint); }
.tsum-ok .tsum-dot { background:#16a34a; box-shadow:0 0 0 4px rgba(22,163,74,.15); } .tsum-warn .tsum-dot { background:#f59e0b; box-shadow:0 0 0 4px rgba(245,158,11,.18); }
.tsum-err .tsum-dot { background:#ef4444; box-shadow:0 0 0 4px rgba(239,68,68,.15); } .tsum-info .tsum-dot { background:var(--accent); }
dl.tsum-facts { display:flex; flex-wrap:wrap; gap:10px 28px; margin:0; }
.tsum-facts dt { font-size:11.5px; color:var(--muted); }
.tsum-facts dd { margin:2px 0 0; font-weight:600; font-variant-numeric:tabular-nums; }
ol.journey { list-style:none; margin:0; padding:6px 0 0; position:relative; }
ol.journey::before { content:""; position:absolute; left:11px; top:14px; bottom:14px; width:2px; background:var(--line); border-radius:1px; }
.js { position:relative; display:flex; gap:16px; padding:0 0 14px; }
.js-dot { position:relative; z-index:1; flex-shrink:0; width:24px; height:24px; border-radius:50%; background:var(--surface); border:2px solid var(--faint); margin-top:12px; }
.js-dot::after { content:""; position:absolute; inset:5px; border-radius:50%; background:var(--faint); }
.js-ok .js-dot { border-color:#16a34a; } .js-ok .js-dot::after { background:#16a34a; }
.js-warn .js-dot { border-color:#f59e0b; } .js-warn .js-dot::after { background:#f59e0b; }
.js-err .js-dot { border-color:#ef4444; } .js-err .js-dot::after { background:#ef4444; }
.js-info .js-dot { border-color:var(--accent); } .js-info .js-dot::after { background:var(--accent); }
.js-body { flex:1; min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:11px 14px; box-shadow:var(--shadow-sm); }
.js-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.js-head strong { font-size:14px; }
.js-src { font-size:11px; color:var(--faint); text-transform:uppercase; letter-spacing:.06em; }
.js-time { margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.js-who { color:var(--fg-2); font-size:13px; margin-top:2px; }
.js-detail { font-family:var(--mono); font-size:12px; color:var(--muted); margin-top:4px; overflow-wrap:anywhere; }
.js-err .js-body { border-color:rgba(239,68,68,.25); background:linear-gradient(0deg, rgba(239,68,68,.03), rgba(239,68,68,.03)), var(--surface); }

/* ---------- Formlar ve butonlar ---------- */
label { display:block; margin:0 0 12px; font-weight:500; font-size:13px; color:var(--fg-2); }
label.inline { display:flex; align-items:center; gap:8px; font-weight:400; }
input[type=text], input:not([type]), input[type=password], input[type=search], input[type=email], input[type=number], input[type=date], select, textarea {
  display:block; width:100%; margin-top:5px; padding:8px 10px; border:1px solid var(--line-strong); border-radius:var(--r-sm); font:inherit; color:var(--fg);
  background:var(--surface); box-shadow:var(--shadow-sm); transition:border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out); }
input:focus, select:focus, textarea:focus { outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
input[type=checkbox] { accent-color:var(--accent); width:15px; height:15px; }
button, .button { display:inline-flex; align-items:center; justify-content:center; gap:6px; background:var(--accent); color:#fff; border:0; border-radius:var(--r-sm);
  padding:8px 16px; font:inherit; font-weight:550; cursor:pointer; box-shadow:0 1px 2px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.14);
  transition:background-color 150ms var(--ease-out), transform 120ms var(--ease-out), box-shadow 150ms var(--ease-out); }
@media (hover:hover) and (pointer:fine) { button:hover, .button:hover { background:var(--accent-hover); text-decoration:none; } }
button:active, .button:active { transform:scale(.97); }
button.secondary { background:var(--surface); color:var(--fg-2); box-shadow:var(--shadow-sm), inset 0 0 0 1px var(--line-strong); }
@media (hover:hover) and (pointer:fine) { button.secondary:hover { background:var(--surface-2); color:var(--fg); } }
button.danger { background:var(--err); }
@media (hover:hover) and (pointer:fine) { button.danger:hover { background:#a8232a; } }
button.small { padding:4px 10px; font-size:12.5px; border-radius:6px; }
/* Tablo içindeki tehlikeli işlemler çerçeveli (dikkat çeker ama bağırmaz) */
button.small.danger { background:var(--surface); color:var(--err); box-shadow:var(--shadow-sm), inset 0 0 0 1px rgba(196,43,51,.35); }
@media (hover:hover) and (pointer:fine) { button.small.danger:hover { background:var(--err-soft); color:#a8232a; } }
td form.inline { flex-wrap:nowrap; }
/* Satır işlemleri menüsü (betiksiz <details>) */
details.menu { position:relative; display:inline-block; }
details.menu > summary { list-style:none; cursor:pointer; user-select:none; font-size:12.5px; font-weight:550; color:var(--fg-2); padding:4px 10px; border-radius:6px;
  box-shadow:var(--shadow-sm), inset 0 0 0 1px var(--line-strong); background:var(--surface); white-space:nowrap; }
details.menu > summary::-webkit-details-marker { display:none; }
details.menu > summary::after { content:"▾"; margin-left:6px; color:var(--faint); }
details.menu[open] > summary { background:var(--surface-2); }
.menu-p { position:absolute; right:0; top:calc(100% + 4px); z-index:20; min-width:200px; display:flex; flex-direction:column; padding:4px; margin:0;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:0 12px 32px -12px rgba(15,23,42,.3); }
.menu-p button { justify-content:flex-start; background:none; color:var(--fg-2); box-shadow:none; font-weight:500; font-size:13px; padding:7px 10px; border-radius:6px; text-align:left; }
@media (hover:hover) and (pointer:fine) { .menu-p button:hover { background:var(--surface-2); color:var(--fg); } .menu-p button.m-danger:hover { background:var(--err-soft); } }
.menu-p button.m-danger { color:var(--err); }
.tablewrap:has(details.menu[open]) { overflow:visible; }
tbody tr:nth-last-child(-n+2) .menu-p { top:auto; bottom:calc(100% + 4px); }
.menu-p button:active { transform:none; }
td .inline-select { padding:5px 8px; font-size:12.5px; }
.two { display:flex; flex-direction:column; min-width:0; line-height:1.35; }
.two b { font-weight:550; }
.chips .chip { font-size:12px; padding:2px 8px; border-radius:6px; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chip.more { background:var(--accent-soft); color:var(--accent); font-weight:600; }
.chips { gap:4px; }
.seg a i { font-style:normal; font-weight:650; color:var(--faint); margin-left:3px; font-variant-numeric:tabular-nums; }
.seg a.on i { color:var(--accent); }
a.button { color:#fff; }
.testform { margin-top:12px; }
.muted { color:var(--muted); }
.err { color:var(--err); background:var(--err-soft); border:1px solid rgba(225,45,57,.18); padding:10px 14px; border-radius:var(--r-sm); }
.okmsg { color:var(--ok); background:var(--ok-soft); border:1px solid rgba(16,163,110,.2); padding:10px 14px; border-radius:var(--r-sm); }
ul.status { list-style:none; padding:0; margin:0 0 8px; }
ul.status li::before { content:"●"; margin-right:8px; }
ul.status li.ok::before { color:#10a36e; }
ul.status li.off::before { color:#cbd2dc; }

/* ---------- Servisler ---------- */
.hoststats { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px 20px; margin:6px 0 14px; font-variant-numeric:tabular-nums; }
.hoststats div { display:flex; flex-direction:column; }
.hoststats span { font-size:12px; }
td.actions { display:flex; gap:8px; align-items:center; }
td.actions form { display:flex; gap:6px; margin:0; }
details.history { margin-top:12px; }
details.history summary { cursor:pointer; color:var(--accent); margin-bottom:8px; }
pre.out { margin:0; white-space:pre-wrap; font-size:12px; max-height:160px; overflow:auto; font-family:var(--mono); }

/* ---------- Yönetim ---------- */
.syncbar { border-radius:var(--r); padding:10px 14px; margin-bottom:16px; border:1px solid var(--line); background:var(--surface); display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; font-size:13px; }
.syncbar.sb-ok { border-color:rgba(16,163,110,.2); background:var(--ok-soft); }
.syncbar.sb-warn { border-color:rgba(245,158,11,.3); background:var(--warn-soft); }
.syncbar.sb-err { border-color:rgba(225,45,57,.2); background:var(--err-soft); }
.syncbar .sbnodes { display:flex; gap:6px; flex-wrap:wrap; }
.syncbar .small { flex-basis:100%; color:var(--err); }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:4px 20px; }
.grid4 { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:4px 16px; }
section.card ~ button[type=submit] { margin-bottom:20px; }
.cols + .card, .cols { margin-bottom:16px; }
form.inline select { max-width:100%; }
.grid3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:4px 16px; align-items:end; }
.grid3 > div { margin-bottom:12px; }
.statusline { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
form.inline { display:inline-flex; gap:6px; margin:0; align-items:center; flex-wrap:wrap; }
form.inline input, form.inline select { margin-top:0; width:auto; }
.headlinks { display:flex; gap:14px; }
.label { font-weight:500; margin-bottom:4px; }
ul.plain { margin:4px 0 8px; padding-left:18px; }
.creds dl { display:grid; grid-template-columns:160px 1fr; gap:8px 16px; margin:0 0 12px; }
.creds dt { color:var(--muted); }
.creds dd { margin:0; overflow-wrap:anywhere; }
.creds .secret { font-size:16px; background:var(--warn-soft); padding:4px 8px; border-radius:6px; display:inline-block; }
.inline-select { width:auto; display:inline-block; margin:0; }
table.limits input, table.limits select { margin:0; }
table.msgs td { white-space:normal; }
table.msgs td:first-child { width:240px; }
table.msgs .codein { width:110px; }
table.msgs textarea { margin:0; min-width:420px; }
code { background:var(--info-soft); padding:1px 5px; border-radius:4px; font-size:12px; font-family:var(--mono); }
.qrbox { display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
svg.qr { width:200px; height:200px; image-rendering:pixelated; border:1px solid var(--line); border-radius:var(--r-sm); }
.narrowcard { max-width:520px; }
.authgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px 20px; margin:8px 0 12px; }
.dnsbox { background:var(--surface-2); border:1px dashed var(--line-strong); border-radius:var(--r-sm); padding:12px 14px; margin-bottom:10px; }
.dnsval { overflow-wrap:anywhere; background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:8px; margin:6px 0; font-family:var(--mono); font-size:12px; }
.rowactions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.errtext { color:var(--err); }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { background:var(--info-soft); border-radius:14px; padding:3px 10px; color:var(--info); font-size:13px; }
.chip b { color:var(--err); margin-left:4px; }
details summary { cursor:pointer; }
.rule-form { gap:8px 12px !important; }

/* ---------- Dar ekran ---------- */
@media (max-width: 900px) {
  body.app { display:block; }
  .side { position:static; width:auto; height:auto; padding-bottom:12px; }
  main { padding:18px 16px; }
  .topbar { padding:0 16px; }
  footer { padding:16px; }
  .pagehead { flex-direction:column; align-items:flex-start; }
}

/* ---------- Hareketi azalt ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration:0ms !important; animation-duration:0ms !important; }
  a.stat:hover { transform:none; }
}

/* ---------- Müşteri portalı ---------- */
body.portal { min-height:100vh; display:flex; flex-direction:column; background:var(--bg); }
.ptop { display:flex; align-items:center; gap:28px; padding:12px 32px; background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.ptop .brand { display:flex; align-items:center; gap:10px; color:var(--fg); text-decoration:none; font-weight:600; }
.ptop .brand-t span { color:var(--muted); font-weight:500; }
.pnav { display:flex; gap:4px; flex:1; }
.pnav a { padding:6px 12px; border-radius:var(--r-sm); color:var(--fg-2); text-decoration:none; font-weight:500; }
.pnav a.active, .pnav a:hover { background:var(--accent-soft); color:var(--accent); }
.ptop .logout { display:flex; align-items:center; gap:14px; margin:0; }
.ptop .who { display:flex; align-items:center; gap:8px; color:var(--fg-2); font-size:13px; }
main.pmain { max-width:1100px; width:100%; min-width:0; margin:0 auto; padding:28px 32px; flex:1; }
main.pmain .cols { grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); }
.xscroll { overflow-x:auto; }
main.center.wide { max-width:600px; }
.authlinks { margin:14px 0 0; font-size:13px; }
.secretkey { font-size:15px; background:var(--warn-soft); padding:4px 8px; border-radius:6px; display:inline-block; letter-spacing:.04em; overflow-wrap:anywhere; }
.card.auth h2 { font-size:15px; margin:18px 0 6px; }
.usage { margin-bottom:14px; }
.usage-h { display:flex; justify-content:space-between; font-size:13px; color:var(--fg-2); }
.usage-h b { color:var(--fg); font-variant-numeric:tabular-nums; }
.usage progress.meter { height:8px; }
dl.kv { display:grid; grid-template-columns:auto 1fr; gap:8px 20px; margin:0; }
dl.kv dt { color:var(--muted); }
dl.kv dd { margin:0; font-variant-numeric:tabular-nums; }
@media (max-width: 700px) {
  .ptop { flex-wrap:wrap; gap:10px; padding:10px 16px; }
  .ptop .who { display:none; }
  main.pmain { padding:18px 16px; }
}
pre.code { background:#0f172a; color:#e2e8f0; padding:12px 14px; border-radius:var(--r-sm); font-family:var(--mono); font-size:12.5px; line-height:1.55; overflow-x:auto; white-space:pre; margin:6px 0 12px; }
details.card.guide > summary { cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; }
details.card.guide > summary::-webkit-details-marker { display:none; }
details.card.guide > summary h2 { margin:0; }
details.card.guide > summary::after { content:"+"; font-size:18px; color:var(--muted); }
details.card.guide[open] > summary { margin-bottom:12px; }
details.card.guide[open] > summary::after { content:"–"; }
.pkpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); gap:12px; margin-bottom:16px; }
.pkpi { display:flex; flex-direction:column; gap:2px; padding:16px 18px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); color:var(--fg); text-decoration:none; border-top:3px solid #16a34a; transition:box-shadow 150ms var(--ease-out); }
.pkpi:hover { box-shadow:var(--shadow-md); }
.pkpi span { font-size:12.5px; color:var(--muted); font-weight:500; }
.pkpi b { font-size:26px; font-weight:650; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.pkpi i { font-style:normal; font-size:12px; color:var(--faint); }
.pkpi.k-warn { border-top-color:#f59e0b; } .pkpi.k-err { border-top-color:#ef4444; }
.pkpi:nth-child(2) { border-top-color:#94a3b8; }
.ptabs { margin-bottom:12px; flex-wrap:wrap; }