:root{
  --bg:#F6F6F4;
  --surface:#FFFFFF;
  --border:#E2E1DC;
  --ink:#1D1F1C;
  --ink-2:#585B55;
  --ink-3:#8C8F87;
  --accent:#3B6E8F;
  --accent-soft:#E6EEF2;
  --ok:#2E7D4F;
  --ok-soft:#E4F3EA;
  --err:#B3432E;
  --err-soft:#FBEAE5;
  --warn:#A3690F;
  --warn-soft:#F7EAD4;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);}
a{color:inherit; text-decoration:none;}

.shell{display:flex; min-height:100vh;}

.sidebar{
  width:248px; flex:0 0 248px;
  background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  padding:20px 14px;
  overflow:hidden;
  transition:flex-basis .18s ease, width .18s ease, padding .18s ease;
}
.brand-row{display:flex; align-items:center; justify-content:space-between; gap:6px; padding:4px 6px 20px;}
.brand{display:flex; align-items:center; gap:10px; min-width:0; overflow:hidden;}
.brand-mark{
  width:28px; height:28px; flex:0 0 28px; border-radius:7px; background:var(--accent);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700;
}
.brand-name{font-size:14.5px; font-weight:700; white-space:nowrap;}

.sidebar-toggle{
  width:24px; height:24px; flex:0 0 24px; border-radius:6px;
  background:none; border:1px solid var(--border); color:var(--ink-3);
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
}
.sidebar-toggle:hover{color:var(--accent); border-color:var(--accent);}
.sidebar-toggle svg{transition:transform .18s ease;}

html[data-sidebar="collapsed"] .sidebar{width:56px; flex-basis:56px; padding-left:8px; padding-right:8px;}
html[data-sidebar="collapsed"] .brand-name,
html[data-sidebar="collapsed"] .nav-group,
html[data-sidebar="collapsed"] .foot-info{display:none;}
html[data-sidebar="collapsed"] .brand-row{flex-direction:column; gap:10px; padding-left:0; padding-right:0;}
html[data-sidebar="collapsed"] .sidebar-foot{justify-content:center;}
html[data-sidebar="collapsed"] .sidebar-toggle svg{transform:rotate(180deg);}

.nav-group{margin-bottom:18px;}
.nav-group-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 8px; margin-bottom:6px;
}
.nav-group-label{
  font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); font-weight:600;
}
.nav-subgroup{margin-bottom:2px;}
.nav-subgroup-label{
  font-size:10px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-3);
  padding:5px 10px 3px 16px; font-weight:600;
}
.nav-item{
  display:block; padding:7px 10px 7px 20px; border-radius:6px;
  font-size:13.5px; color:var(--ink-2);
}
.nav-item.lvl2{padding-left:32px;}
.nav-item.active{background:var(--accent-soft); color:var(--accent); font-weight:600;}

.sidebar-foot{margin-top:auto; display:flex; align-items:flex-start; gap:9px; padding:10px 8px; border-top:1px solid var(--border);}
.avatar{width:26px; height:26px; flex:0 0 26px; border-radius:50%; background:var(--ink); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center;}
.foot-info{display:flex; flex-direction:column; align-items:flex-start; gap:5px; min-width:0; max-width:100%;}
.user-name{font-size:12.5px; font-weight:600; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.logout-btn{font-family:var(--sans); font-size:11px; line-height:1.4; color:var(--ink-3); background:none; border:none; cursor:pointer; padding:0; margin:0; text-decoration:underline;}

.main{flex:1 1 auto; padding:32px 40px; min-width:0;}
.eyebrow{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); font-family:var(--mono); margin:0 0 8px;}
.h1{font-size:23px; font-weight:700; margin:0;}
.lede{font-size:13.5px; color:var(--ink-2); margin:0 0 26px; max-width:62ch;}
.back-link{font-size:12px; color:var(--ink-3); margin-bottom:10px; display:inline-block;}

.page-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:18px;}
.timing{font-size:12px; color:var(--ink-3); font-family:var(--mono);}

.app-section{margin-bottom:26px;}
.section-head{display:flex; align-items:center; gap:8px; margin:0 0 10px;}
.section-label{font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); font-weight:600;}

.list-subhead{font-size:11.5px; color:var(--ink-3); font-weight:500; margin:14px 0 8px;}
.list-subhead:first-child{margin-top:0;}
.source-list{background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; margin-bottom:14px;}
.source-list:last-child{margin-bottom:0;}
.source-row{display:flex; align-items:center; gap:18px; padding:14px 18px; border-bottom:1px solid var(--border);}
.source-row:last-child{border-bottom:none;}
.source-row-main{flex:1 1 auto; min-width:0;}
.source-row-name{font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px;}
.source-dot{width:7px; height:7px; border-radius:50%; background:var(--accent); display:inline-block; flex:0 0 auto;}
.source-row-desc{font-size:12.5px; color:var(--ink-2); margin:3px 0 0;}
.source-row-meta{font-size:11px; color:var(--ink-3); font-family:var(--mono); flex:0 0 auto; white-space:nowrap;}

.filters{
  display:flex; flex-direction:column; gap:12px;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:14px 16px; margin-bottom:16px;
}
.filters-row{display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap;}
.filters-row > .field{flex:1 1 0; min-width:110px;}
.field{display:flex; flex-direction:column; gap:5px;}
.field label{font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3);}
.field input, .field select{
  font-family:var(--sans); font-size:13px; color:var(--ink);
  border:1px solid var(--border); border-radius:7px; padding:7px 9px; background:var(--bg);
  min-height:32px; width:100%;
}
.field input[type="number"]{-moz-appearance:textfield;}
.field input[type="number"]::-webkit-inner-spin-button,
.field input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none; margin:0;}
.field input::placeholder{color:#A3A59F;}
.field.grow{flex:1 1 220px;}
.btn{
  font-family:var(--sans); font-size:13px; font-weight:600; color:#fff; background:var(--accent);
  border:none; border-radius:7px; padding:9px 16px; cursor:pointer; min-height:34px;
}
.btn.ghost{background:transparent; color:var(--ink-2); border:1px solid var(--border); font-weight:500;}
.btn[disabled]{opacity:.45; cursor:default;}

.table{background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden;}
.row{display:flex; align-items:center; padding:8px 16px; gap:14px; border-bottom:1px solid var(--border); font-size:13px;}
.row:last-child{border-bottom:none;}
.row.head{
  background:var(--bg); padding:10px 16px;
}
.row.head > div{
  font-family:var(--sans); font-size:10.5px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-3); font-weight:600; white-space:nowrap;
}
.col-time{width:148px; flex:0 0 148px; margin-right:26px; font-family:var(--mono); font-size:12px; color:var(--ink-2);}
.col-hook{flex:0 1 340px; min-width:120px; margin-right:26px; font-size:13.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.col-status{width:112px; flex:0 0 112px; margin-left:auto;}
.col-ids{width:198px; flex:0 0 198px; font-family:var(--mono); font-size:12px; color:var(--ink-2); white-space:nowrap;}
.col-exp{width:60px; flex:0 0 60px; text-align:right; color:var(--ink-3); font-size:12px;}

.status-text{font-size:12.5px; font-weight:600;}
.status-text.ok{color:var(--ok);}
.status-text.err{color:var(--err);}
.status-text.none{color:var(--err);}

details.row-expand{border-bottom:1px solid var(--border);}
details.row-expand:last-child{border-bottom:none;}
details.row-expand summary{list-style:none; cursor:pointer;}
details.row-expand summary::-webkit-details-marker{display:none;}
.expand-panel{background:var(--bg); border-top:1px dashed var(--border); padding:14px 16px 16px 162px;}
.expand-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 6px;}
.expand-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3); margin:0;}
.copy-json-btn{
  font-family:var(--sans); font-size:11.5px; font-weight:600; color:var(--accent);
  background:var(--accent-soft); border:none; border-radius:6px; padding:4px 10px; cursor:pointer;
}
.copy-json-btn:hover{opacity:.85;}
.json-block{
  font-family:var(--mono); font-size:11.5px; line-height:1.5; color:var(--ink-2);
  background:var(--surface); border:1px solid var(--border); border-radius:8px;
  padding:12px 14px; margin:0; overflow-x:auto; white-space:pre-wrap; word-break:break-word;
}

.pager{display:flex; align-items:center; justify-content:space-between; margin-top:14px; font-size:12.5px; color:var(--ink-2); flex-wrap:wrap; gap:10px;}
.pager-controls{display:flex; align-items:center; gap:10px;}
.empty-row{padding:24px 16px; text-align:center; color:var(--ink-3); font-size:13px;}

.login-shell{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px;}
.card{
  width:340px; max-width:100%; background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:28px; display:flex; flex-direction:column; gap:16px;
}
.card h1{font-size:18px; margin:0;}
.error{font-size:12.5px; color:var(--err); background:var(--err-soft); border-radius:7px; padding:8px 10px;}

@media (max-width: 720px){
  .shell{flex-direction:column;}
  .sidebar{
    width:100%; flex:0 0 auto;
    border-right:none; border-bottom:1px solid var(--border);
    padding:14px 14px 8px;
  }
  .nav-group{margin-bottom:12px;}
  .main{padding:20px 16px;}
  .h1{font-size:19px;}
  .lede{max-width:none;}

  .filters-row{flex-direction:column; align-items:stretch;}
  .field, .field.grow{flex:1 1 auto;}
  .btn{width:100%;}

  .source-row{flex-wrap:wrap; gap:6px;}
  .source-row-meta{flex-basis:100%;}

  .row.head{display:none;}
  .table .row{flex-wrap:wrap; align-items:flex-start; gap:4px 12px; padding:12px 14px;}
  .table .row > div{width:auto; flex:1 1 auto;}
  .col-time, .col-status, .col-ids{flex:0 0 auto; margin-right:0; margin-left:0;}
  .col-hook{flex:1 1 100%; order:1; white-space:normal; text-overflow:clip;}
  .col-exp{display:none;}
  [data-label]::before{
    content:attr(data-label);
    display:block;
    font-size:9.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3); font-weight:600;
    margin-bottom:2px;
  }
  .expand-panel{padding:14px 16px;}

  .pager{justify-content:center; text-align:center;}

  html[data-sidebar="collapsed"] .sidebar{width:100%; padding:14px;}
  html[data-sidebar="collapsed"] .brand-row{flex-direction:row;}
  html[data-sidebar="collapsed"] .sidebar-foot{display:none;}
}