*{box-sizing:border-box}body{margin:0;background:#f5f6f8;color:#20242a;font:14px system-ui,-apple-system,sans-serif}header{height:64px;background:#15191f;color:#fff;display:flex;align-items:center;gap:36px;padding:0 28px}header strong{font-size:19px}header span,h1 span{color:#f28c28}header em{font-style:normal;font-weight:400;color:#aeb6c2}header nav{flex:1;color:#cbd1d8}a{color:inherit}main{padding:28px;max-width:1400px;margin:auto}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:20px 0}.card{background:#fff;border:1px solid #e2e5e9;border-radius:10px;padding:20px;box-shadow:0 1px 2px #00000008}.stats b{display:block;font-size:30px;margin-top:8px}.stats small{color:#68717d}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:13px;border-bottom:1px solid #edf0f2}th{color:#68717d;font-size:12px}.pill{background:#eef1f5;border-radius:12px;padding:4px 9px}.empty{text-align:center;color:#7b8490;padding:35px}.login{display:grid;place-items:center;min-height:100vh}.login-card{width:min(420px,90vw)}label{display:block;margin:15px 0;color:#555}input{display:block;width:100%;margin-top:6px;padding:11px;border:1px solid #ccd2d8;border-radius:6px}button{width:100%;padding:12px;background:#20252c;color:#fff;border:0;border-radius:6px}.error{background:#fff0f0;color:#a22;padding:10px;border-radius:6px}@media(max-width:800px){.stats{grid-template-columns:1fr 1fr}header nav{display:none}}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}.stats.wide{grid-template-columns:repeat(4,1fr)}.smaller{font-size:18px!important}.inline{display:flex;gap:10px;align-items:center}.inline input,.inline select{margin:0;padding:10px;border:1px solid #ccd2d8;border-radius:6px}.inline input{flex:1}.inline button,.actions button{width:auto}.actions{display:flex;gap:10px;flex-wrap:wrap}.actions button{padding:10px 14px}@media(max-width:900px){.grid2{grid-template-columns:1fr}.stats.wide{grid-template-columns:1fr 1fr}}
/* V5 responsive navigation */
.menu-toggle{display:none;width:auto;padding:8px 11px;font-size:22px;line-height:1;background:transparent;border:1px solid #49515c;border-radius:7px;color:#fff;cursor:pointer}.mobile-backdrop{display:none}.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-wrap table{min-width:720px}.status-ok{color:#16763c}.muted{color:#68717d}.btn-link{display:inline-block;padding:8px 11px;border-radius:6px;background:#20252c;color:#fff;text-decoration:none}
@media(max-width:800px){header{height:auto;min-height:60px;padding:10px 14px;gap:12px;position:sticky;top:0;z-index:100;flex-wrap:wrap}header strong{font-size:17px;flex:1}.menu-toggle{display:block;order:2}header>div{order:3;font-size:12px}header nav{display:none!important;position:fixed;left:0;top:0;bottom:0;width:min(82vw,330px);background:#15191f;padding:76px 20px 24px;z-index:120;box-shadow:4px 0 20px #0005;overflow:auto}header nav.open{display:flex!important;flex-direction:column;gap:0}header nav a{display:block;padding:14px 10px;border-bottom:1px solid #2d333b;text-decoration:none;font-size:16px}.mobile-backdrop.open{display:block;position:fixed;inset:0;background:#0008;z-index:110}main{padding:18px 12px}.stats,.stats.wide{grid-template-columns:1fr 1fr;gap:10px}.card{padding:14px}.grid2{grid-template-columns:1fr}.inline{align-items:stretch;flex-direction:column}.inline button,.actions button{width:100%}h1{font-size:24px}.table-wrap table{min-width:680px}th,td{padding:10px 9px}}
@media(max-width:480px){.stats,.stats.wide{grid-template-columns:1fr}.stats b{font-size:26px}}


/* V7 navigation: desktop and mobile are deliberately isolated. */
@media (min-width:1101px){
  header{
    height:64px;
    min-height:64px;
    padding:0 28px;
    gap:28px;
    flex-wrap:nowrap;
    position:relative;
  }
  header strong{
    flex:0 0 auto;
    white-space:nowrap;
  }
  header nav{
    display:flex !important;
    position:static !important;
    flex:1 1 auto;
    min-width:0;
    width:auto !important;
    height:auto !important;
    padding:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
    flex-direction:row !important;
    align-items:center;
    gap:0;
    white-space:nowrap;
    color:#cbd1d8;
    font-size:0; /* hides the legacy middle-dot text separators */
  }
  header nav a{
    display:inline-flex !important;
    align-items:center;
    flex:0 0 auto;
    padding:8px 8px !important;
    border:0 !important;
    text-decoration:none;
    font-size:13px !important;
    line-height:1.2;
    white-space:nowrap;
  }
  header nav a:hover{
    color:#fff;
    background:#242a32;
    border-radius:6px;
  }
  header>div{
    flex:0 0 auto;
    white-space:nowrap;
    font-size:13px;
  }
  .menu-toggle,.mobile-backdrop{
    display:none !important;
  }
}

@media (max-width:1100px){
  header{
    height:auto;
    min-height:60px;
    padding:10px 14px;
    gap:12px;
    position:sticky;
    top:0;
    z-index:100;
    flex-wrap:wrap;
  }
  header strong{font-size:17px;flex:1 1 auto;white-space:nowrap}
  .menu-toggle{display:block;order:2}
  header>div{order:3;font-size:12px}
  header nav{
    display:none !important;
    position:fixed !important;
    left:0;top:0;bottom:0;
    width:min(82vw,330px) !important;
    background:#15191f !important;
    padding:76px 20px 24px !important;
    z-index:120;
    box-shadow:4px 0 20px #0005 !important;
    overflow:auto !important;
    font-size:0;
  }
  header nav.open{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch;
    gap:0;
  }
  header nav a{
    display:block !important;
    padding:14px 10px !important;
    border-bottom:1px solid #2d333b !important;
    text-decoration:none;
    font-size:16px !important;
    line-height:1.25;
    white-space:normal;
  }
  .mobile-backdrop.open{
    display:block;
    position:fixed;
    inset:0;
    background:#0008;
    z-index:110;
  }
}

.actionbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.actionbar form{display:inline-flex;gap:8px;flex-wrap:wrap;margin:0}
.button,button{display:inline-block;padding:9px 13px;border-radius:7px;border:1px solid #38404a;background:#242a32;color:#fff;text-decoration:none;cursor:pointer}
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.settings-grid label{display:flex;flex-direction:column;gap:6px}
.settings-grid input,.settings-grid select{padding:9px;border:1px solid #ccd2d8;border-radius:6px}
pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:360px;overflow:auto}
@media(max-width:700px){.actionbar,.actionbar form{align-items:stretch;flex-direction:column}.actionbar button,.actionbar .button{width:100%;text-align:center}}

.main-header nav a.active{background:#303844;color:#fff;border-radius:6px}
.header-user a{color:inherit}
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.detail-grid .card{margin:0}

th.sortable{cursor:pointer;user-select:none}th.sortable::after{content:' ↕';opacity:.35}th.sortable[data-sort=asc]::after{content:' ↑';opacity:1}th.sortable[data-sort=desc]::after{content:' ↓';opacity:1}.filterbar{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin-bottom:16px}.filterbar label{display:flex;flex-direction:column;gap:5px}.filterbar select{min-width:150px;padding:8px;border:1px solid #ccd2d8;border-radius:6px}@media(max-width:700px){.filterbar{flex-direction:column;align-items:stretch}.filterbar select,.filterbar button,.filterbar .button{width:100%;box-sizing:border-box}}



/* V23.4.1 navigation: desktop and mobile are separate DOM elements */
.desktop-nav{display:flex;align-items:center;gap:4px;min-width:0}
.mobile-menu-button,.mobile-nav{display:none}
@media(max-width:800px){
 .desktop-nav{display:none!important}
 .mobile-menu-button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
 .mobile-nav{display:none;flex-direction:column;width:100%;padding:8px 12px;background:var(--panel,#fff);border-bottom:1px solid var(--border,#ddd)}
 .mobile-nav.open{display:flex}
 .mobile-nav a{display:flex;align-items:center;min-height:44px;padding:8px 10px}
 .mobile-backdrop{display:none}
 .mobile-backdrop.open{display:block}
}
@media(min-width:801px){
 .desktop-nav{display:flex!important}
 .mobile-menu-button,.mobile-nav,.mobile-backdrop{display:none!important}
}