:root{
  --bg:#f4f6fb; --panel:#fff; --ink:#1f2733; --muted:#7a869a; --line:#e6eaf2;
  --brand:#2f6fed; --brand-d:#1f51b5; --ok:#1aa260; --warn:#d98e00; --err:#d3402f;
  --shadow:0 1px 3px rgba(20,30,60,.08),0 1px 2px rgba(20,30,60,.06);
  --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  background:var(--bg); color:var(--ink); font-size:14px; line-height:1.5;}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ---- Topbar ---- */
.topbar{display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--panel); border-bottom:1px solid var(--line); padding:10px 18px; box-shadow:var(--shadow); position:sticky; top:0; z-index:10;}
.brand{font-weight:700; font-size:16px; color:var(--brand-d); letter-spacing:.02em}
.filters{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.filters select,.filters input[type=date]{padding:7px 9px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); font-size:13px}
.filters button,.login-card button{background:var(--brand); color:#fff; border:0; padding:8px 16px; border-radius:8px; cursor:pointer; font-size:13px}
.filters button:hover{background:var(--brand-d)}
.logout{margin-left:auto; color:var(--muted); font-size:13px}

/* ---- Layout ---- */
.container{max-width:1180px; margin:0 auto; padding:18px}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow)}
.panel h2{font-size:15px; margin:0 0 12px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media(max-width:820px){.grid-2{grid-template-columns:1fr}}

.period-note{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.muted{color:var(--muted)}
.src-badges{margin-left:auto; display:flex; gap:6px}
.badge{font-size:11px; padding:3px 8px; border-radius:999px; background:#eef2fa; color:var(--muted); border:1px solid var(--line)}
.badge.ok{background:#e8f7ef; color:var(--ok); border-color:#bfe9d2}
.badge.warn{background:#fdf3e0; color:var(--warn); border-color:#f3dcab}
.badge.err{background:#fdecea; color:var(--err); border-color:#f4c7c0}

/* ---- Cards ---- */
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px}
@media(max-width:980px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cards{grid-template-columns:1fr 1fr}}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:3px}
.card-label{font-size:12px; color:var(--muted)}
.card-value{font-size:24px; font-weight:700; letter-spacing:.01em}
.card-sub{font-size:11px; color:var(--muted)}

/* ---- Charts ---- */
.chart-wrap{position:relative; height:320px}
.chart-wrap.small{height:260px}

/* ---- Tables ---- */
.table-tools{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.table-tools input[type=search]{flex:0 0 280px; max-width:60%; padding:8px 10px; border:1px solid var(--line); border-radius:8px}
.table-scroll{max-height:520px; overflow:auto; border:1px solid var(--line); border-radius:10px}
.data-table{width:100%; border-collapse:collapse; font-size:13px}
.data-table th,.data-table td{padding:9px 12px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap}
.data-table thead th{position:sticky; top:0; background:#f7f9fd; color:var(--muted); font-weight:600; z-index:1}
.data-table th[data-sort]{cursor:pointer; user-select:none}
.data-table th[data-sort]:hover{color:var(--ink)}
.data-table th.sorted-asc::after{content:" ▲"; font-size:10px}
.data-table th.sorted-desc::after{content:" ▼"; font-size:10px}
.data-table td.num,.data-table th.num{text-align:right; font-variant-numeric:tabular-nums}
.data-table tbody tr:hover{background:#f9fbff}
.data-table td.path{max-width:420px; overflow:hidden; text-overflow:ellipsis}
.hint{font-size:12px; color:var(--muted); background:#f7f9fd; border:1px dashed var(--line); border-radius:8px; padding:8px 10px; margin:0 0 10px}
.empty{padding:14px 4px}
.foot{font-size:11px; text-align:center; padding:8px 0 24px}

/* ---- Login ---- */
.login-body,.empty-body{display:flex; min-height:100vh; align-items:center; justify-content:center; padding:20px}
.login-card{background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:28px; width:340px; display:flex; flex-direction:column; gap:14px}
.login-card h1{font-size:18px; text-align:center; margin:0 0 6px; line-height:1.4; color:var(--brand-d)}
.login-card label{display:flex; flex-direction:column; gap:5px; font-size:13px; color:var(--muted)}
.login-card input{padding:10px; border:1px solid var(--line); border-radius:8px; font-size:14px}
.login-card button{padding:11px; font-size:14px}
.login-error{background:#fdecea; color:var(--err); border:1px solid #f4c7c0; border-radius:8px; padding:9px 11px; font-size:13px; margin:0}

/* ---- Empty state ---- */
.empty-card{background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:28px; max-width:560px}
.empty-card h1{font-size:18px; margin-top:0}
.empty-card pre{background:#f7f9fd; border:1px solid var(--line); border-radius:8px; padding:12px; overflow:auto; font-size:12px}