:root{
    --bg:#f6f7f9;
    --card:#ffffff;
    --ink:#1f2937;
    --muted:#6b7280;
    --accent:#2f6fed;
    --accent-weak:#e6eeff;
    --border:#e5e7eb;
    --pill:#f3f4f6;
    --pill-active:#e8edff;
    --shadow:0 1px 2px rgba(16,24,40,.06),0 2px 8px rgba(16,24,40,.06);
    --radius:14px;
}
html,body{background:var(--bg); color:var(--ink);}
*{box-sizing:border-box}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

.shell{max-width:1400px; margin:24px auto; padding:0 16px;}
.header { display:flex; align-items:center; gap:10px; }
.header a { display:flex; align-items:center; line-height:1; }
.header img { height:28px; width:auto; display:block; }
.title { font-size:20px; font-weight:600; }

.nav-wrap{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:8px;
    box-shadow:var(--shadow);
    overflow:auto;
}
.nav{
    display:flex; gap:6px; flex-wrap:wrap; margin:0; padding:0; list-style:none;
}
.nav a{
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 12px; border-radius:999px; background:var(--pill);
    font-size:14px; color:var(--ink); border:1px solid transparent;
    cursor:pointer;
}
.nav a:hover{background:#eceef2; text-decoration:none}
.nav a.is-active{background:var(--pill-active); border-color:#c9d6ff; color:#1b3ea3; font-weight:600}
.nav .count{
    font-variant-numeric:tabular-nums;
    color:var(--muted);
    font-size:12px;
    padding:1px 6px;
    border-radius:999px;
    background:rgba(255,255,255,.7);
}

.controls{
    margin-top:14px; display:flex; flex-direction:column; gap:10px; align-items:center;
}
.search-row{
    display:flex; flex-direction:column; gap:10px; align-items:center;
}
.search-field{
    position:relative; width:360px;
}
.meta{color:var(--muted); font-size:13px; white-space:nowrap;}
.search-field input{
    width:100%; padding:12px 12px; border:1px solid var(--border);
    border-radius:10px; background:#fff; font-size:14px; outline:none;
}
.search-field input:focus{border-color:#b8c8ff; box-shadow:0 0 0 3px #e6eeff}
.search-field input:disabled{background:#f3f4f6; color:var(--muted); cursor:not-allowed; border-color:var(--border)}
.search-field label{
    position:absolute; top:-8px; left:10px; background:#fff;
    padding:0 4px; font-size:11px; color:var(--muted); font-weight:500;
}
/* Custom dropdown */
.dropdown-wrap input{padding-right:32px}
.dropdown-arrow{
    position:absolute; right:12px; top:50%; transform:translateY(-50%);
    color:var(--muted); pointer-events:none;
    transition:transform .15s ease;
}
.dropdown-wrap.is-open .dropdown-arrow{transform:translateY(-50%) rotate(180deg)}
.dropdown-list{
    display:none; position:absolute; top:calc(100% + 4px); left:0; right:0;
    background:var(--card); border:1px solid var(--border); border-radius:10px;
    box-shadow:var(--shadow); max-height:240px; overflow:auto; z-index:10;
    padding:4px;
}
.dropdown-wrap.is-open .dropdown-list{display:block}
.dropdown-item{
    display:flex; align-items:center; justify-content:space-between;
    padding:8px 12px; border-radius:8px; font-size:14px; cursor:pointer;
    color:var(--ink); font-weight:500;
}
.dropdown-item:hover, .dropdown-item.is-highlighted{
    background:var(--accent-weak);
}
.dropdown-item .count{
    font-variant-numeric:tabular-nums; color:var(--muted); font-size:12px;
    padding:1px 6px; border-radius:999px; background:var(--pill);
}
.dropdown-item.is-hidden{display:none}

.more-row td{
    text-align:center; color:var(--accent); font-size:13px;
    padding:10px 12px; cursor:pointer; background:#fafbff !important;
}
.more-row:hover td{background:var(--accent-weak) !important}

.card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    margin-top:14px;
    box-shadow:var(--shadow);
    overflow:hidden;
}
.table-wrap{
    max-height:68vh;
    overflow:auto;
    padding-left:16px;
}
table{width:100%; border-collapse:separate; border-spacing:0}
thead th{
    position:sticky; top:0; background:#fcfdff; z-index:1;
    text-align:left; padding:12px; font-size:13px; color:#374151; border-bottom:1px solid var(--border);
}
tbody td{padding:12px; font-size:14px; border-bottom:1px solid var(--border)}
tbody tr:nth-child(odd){background:#fafbff}
tbody tr:hover{background:#f3f6ff}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size:13px}

.empty{
    padding:28px; text-align:center; color:var(--muted);
}

.section-header td{
    background:#f0f2f5 !important;
    font-weight:600;
    font-size:13px;
    color:#374151;
    padding:10px 12px;
    border-bottom:1px solid var(--border);
}
.section-header:hover{background:#f0f2f5 !important}

.no-results{
    padding:28px; text-align:center; color:var(--muted); font-size:14px;
}

.note{margin-top:10px; color:var(--muted); font-size:12px}

@media (max-width:640px){
    .title{font-size:18px}
    .header img{height:24px}
}

.badge-error{
    display:inline-flex; align-items:center; padding:6px 10px;
    border-radius:999px; background:#fef2f2; color:#991b1b;
    border:1px solid #fecaca; font-size:13px;
}