*{box-sizing:border-box}
body{margin:0;position:relative;min-height:100vh;background:var(--bg);font-family:"IBM Plex Sans","Segoe UI",sans-serif;color:var(--ink);padding:16px}
.wrap{max-width:1050px;margin:0 auto;display:grid;gap:12px}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px}
.top-card{z-index:420}
body[data-theme="graphite"] .card{background:rgba(30,39,52,.82);backdrop-filter:blur(3px);box-shadow:0 10px 28px rgba(7,13,22,.42)}
h1,h2,h3{margin:0 0 10px}
.app-title-row{display:flex;align-items:center;gap:10px}
.app-logo{width:32px;height:32px;border-radius:8px;flex:0 0 32px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
body[data-theme="graphite"] th{color:#b6cfff}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.field{flex:1 1 230px}
input,select{width:100%;padding:8px;border:1px solid #b7c7dc;border-radius:8px;font:inherit;background:#fff;color:#0f2540}
body[data-theme="graphite"] input, body[data-theme="graphite"] select{background:#2b3443;color:#e8eef7;border-color:#4a5870}
button{border:0;background:var(--btn);color:var(--btn-txt);padding:8px 12px;border-radius:8px;cursor:pointer;transition:all .16s ease}
button.secondary{background:#e6edf8;color:#15355b}
body[data-theme="graphite"] button.secondary{background:#303a4a;color:#d8e5ff}
button.range-btn{border:1px solid #d1deef}
button.range-btn:hover{background:#dce9fa;color:#123f6c;border-color:#a8c3e6}
body[data-theme="mint"] button.range-btn:hover{background:#d7f3e8;color:#0b624d;border-color:#90ceb5}
body[data-theme="graphite"] button.range-btn:hover{background:#3c4d65;color:#eaf3ff;border-color:#6883aa}
button.range-btn.active{background:var(--btn);color:var(--btn-txt);border-color:var(--btn)}
.pill{display:inline-block;padding:3px 8px;border-radius:999px;color:#fff;font-size:12px;font-weight:700}
.ok{background:var(--ok)} .down{background:var(--down)} .unknown{background:#6b7280}
.msg{margin-top:8px;color:#4b617a;font-size:13px;min-height:18px}
.msg.error{color:var(--down)} .msg.success{color:var(--ok)} .muted{color:#4b617a}
body[data-theme="graphite"] .muted, body[data-theme="graphite"] .msg{color:#aec3e6}
.site-link{display:flex;gap:8px;align-items:center;color:var(--ink);text-decoration:none;border-radius:8px;padding:3px 4px;transition:all .16s ease}
.site-link:hover{color:#1d4c7a;text-decoration:none;background:rgba(32,96,168,.08)}
body[data-theme="mint"] .site-link:hover{color:#0f6b54;background:rgba(15,107,84,.12)}
body[data-theme="graphite"] .site-link{color:#ecf4ff}
body[data-theme="graphite"] .site-link:hover{color:#ffffff;background:rgba(120,165,246,.27);box-shadow:inset 0 0 0 1px rgba(166,199,255,.34)}
.timeline-action-btn{border:1px solid transparent}
.timeline-action-btn:hover{background:#dce9fa;color:#123f6c;border-color:#a8c3e6}
body[data-theme="mint"] .timeline-action-btn:hover{background:#d7f3e8;color:#0b624d;border-color:#90ceb5}
body[data-theme="graphite"] .timeline-action-btn:hover{background:#3c4d65;color:#eaf3ff;border-color:#6883aa}
.site-icon{width:18px;height:18px;border-radius:4px;flex:0 0 18px;background:#eef3fb;object-fit:cover}
.site-meta{display:block;color:#4b617a;font-size:12px;word-break:break-all}
body[data-theme="graphite"] .site-meta{color:#a8bee0}
.metric-chip{display:inline-block;min-width:50px;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:700;text-align:center}
.metric-ok{color:var(--ok);background:rgba(14,159,110,.12)}
.metric-down{color:var(--down);background:rgba(192,57,43,.12)}
.metric-unknown{color:#66788d;background:rgba(102,120,141,.12)}
body[data-theme="graphite"] .metric-ok{background:rgba(77,212,162,.16)}
body[data-theme="graphite"] .metric-down{background:rgba(255,127,127,.16)}
body[data-theme="graphite"] .metric-unknown{color:#b6c8e2;background:rgba(102,120,141,.24)}
.user-menu-wrap{position:relative;z-index:120}
.user-menu-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#eff4fc;border:1px solid #d5e0ef;font-size:13px;font-weight:700;color:#214267;cursor:pointer;transition:all .16s ease}
.user-menu-btn:hover{background:#dfeaf9;border-color:#abc2e5;color:#0f3a66}
.theme-picker{width:120px;min-height:32px;height:32px;padding:5px 28px 5px 10px;border-radius:999px;border:1px solid #d5e0ef;background:#eff4fc;color:#214267;font-size:13px;font-weight:700}
.lang-picker{width:108px}
.theme-picker:focus{outline:none;border-color:#abc2e5}
body[data-theme="graphite"] .user-menu-btn{background:#2d3644;border-color:#42506a;color:#d9e7ff}
body[data-theme="graphite"] .user-menu-btn:hover{background:#3a465a;border-color:#617495;color:#fff}
body[data-theme="graphite"] .theme-picker{background:#2d3644;border-color:#42506a;color:#d9e7ff}
body[data-theme="graphite"] .theme-picker:focus{border-color:#617495}
.user-menu{position:absolute;right:0;top:calc(100% + 8px);width:160px;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 26px rgba(19,35,54,.15);padding:6px;z-index:250}
.user-menu-item{display:block;width:100%;text-align:left;background:transparent;color:inherit;border:0;padding:8px 10px;border-radius:8px;cursor:pointer}
.user-menu-item:hover{background:#eef4fd}
body[data-theme="graphite"] .user-menu-item:hover{background:#2f3a4c}
.chart-wrap{position:relative;margin-top:8px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,#f9fbff,#f1f7ff);overflow:hidden;aspect-ratio:960/300}
body[data-theme="graphite"] .chart-wrap{background:linear-gradient(180deg,#273040,#222a37)}
.chart-wrap svg{display:block;width:100%;height:100%}
.timeline-cursor{position:absolute;top:0;bottom:0;width:1px;background:#27598f;opacity:.9;pointer-events:none}
.timeline-tip{position:absolute;top:8px;left:8px;max-width:280px;padding:6px 8px;border-radius:8px;background:rgba(17,34,56,.92);color:#fff;font-size:12px;line-height:1.3;pointer-events:none;box-shadow:0 6px 16px rgba(0,0,0,.16)}
.timeline-ticks{position:relative;height:18px;margin-top:6px;color:#6a7f96;font-size:11px}
.timeline-ticks .tick{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.timeline-ticks .tick-start{transform:none}
.timeline-ticks .tick-end{transform:translateX(-100%)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:10px 0}
.stat{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:transparent}
.stat-value{font-size:18px;font-weight:700;color:var(--btn)}
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:16px}
.modal-backdrop{position:absolute;inset:0;background:rgba(8,22,38,.45)}
.modal-card{position:relative;z-index:1;width:min(460px,100%);background:var(--card);color:var(--ink);border-radius:14px;border:1px solid var(--line);box-shadow:0 14px 34px rgba(16,30,48,.25);padding:18px}
.modal-title{font-size:22px;font-weight:700;color:var(--ink);margin:0 0 4px}
.modal-sub{margin:0 0 12px;color:#5a6f86;font-size:13px}
.footer{display:flex;justify-content:center;padding:8px 0 14px;color:#5c728b}
.footer-link{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none;border-radius:8px;padding:6px 10px;transition:all .16s ease}
.footer-link:hover{background:rgba(32,96,168,.08);color:#1d4c7a}
body[data-theme="graphite"] .footer{color:#a8bee0}
body[data-theme="graphite"] .footer-link:hover{background:rgba(120,165,246,.27);color:#fff}
.footer-icon{width:16px;height:16px;display:block}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.section-head-actions{display:flex;align-items:center;gap:6px}
.section-toggle{min-width:36px;padding:6px 10px;font-size:18px;line-height:1}
.collapsed-hint{font-size:13px}
.timeline-range-row{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.timeline-site-select{min-width:220px}
.timeline-range-buttons{display:flex;gap:8px;flex-wrap:nowrap}
.timeline-all-list{display:grid;gap:12px}
.timeline-site-card{border:1px solid var(--line);border-radius:12px;padding:12px;background:rgba(255,255,255,.65)}
body[data-theme="graphite"] .timeline-site-card{background:rgba(29,36,48,.76)}
.timeline-site-head{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.timeline-site-meta{font-size:12px;color:#4b617a}
body[data-theme="graphite"] .timeline-site-meta{color:#9fb2d0}
.timeline-site-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
@media (max-width:920px){
  .timeline-range-row{flex-wrap:wrap;justify-content:flex-end}
  .timeline-site-select{min-width:180px;width:100%}
  .timeline-range-buttons{justify-content:flex-end;flex-wrap:wrap}
}
.hidden{display:none}