/* /css/styles.css */
/* =========================================================
   GLOBAL / SHARED BASE STYLES
   ========================================================= */

/* Design tokens (SINGLE source of truth) */
:root {
  --bg: #0b1220;
  --card: #0f172a;
  --fg: #e5e7eb;
  --muted: #94a3b8;
  --border: #1f2937;
  --btn: #1f2937;
  --btnb: #334155;
  --good: #86efac;
  --bad: #fca5a5;
  --focus: #22c55e;
}

/* Reset / base */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Generic elements (keep minimal) */
input,
select {
  background: #0b1220;
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 10px;
}

button {
  background: var(--btn);
  color: var(--fg);
  border: 1px solid var(--btnb);
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
}

button:hover {
  background: #243041;
}

/* Shared layout helpers */
.row {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Shared components */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}

.pill {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #31445c;
  color: #cbd5e1;
}
.pill.ok {
  border-color: #1b3e2b;
  color: #b3f2c4;
}
.pill.warn {
  border-color: #5c4231;
  color: #fdd9b3;
}
.pill.bad {
  border-color: #5c3131;
  color: #f5b5b5;
}

/* Modal system (attribute-driven, safe) */
.modal-backdrop[hidden] {
  display: none !important;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal {
  width: 640px;
  max-width: 95vw;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  z-index: 50;
}

/* =========================================================
   PAGE: admin.html
   ========================================================= */

html[data-page="admin"] header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: #0f172a;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

html[data-page="admin"] header h1 {
  margin: 0;
  font-size: 18px;
}

html[data-page="admin"] main {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 14px;
  max-width: 1200px;
  margin: 14px auto;
  padding: 0 12px;
}

@media (max-width: 900px) {
  html[data-page="admin"] main {
    grid-template-columns: 1fr;
  }
}

html[data-page="admin"] .panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  height: calc(100vh - 110px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 74px;
}

html[data-page="admin"] .search {
  display: flex;
  gap: 8px;
}

html[data-page="admin"] .list {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: auto;
  flex: 1;
  background: #0b1220;
}

html[data-page="admin"] .asset-item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #142034;
  cursor: pointer;
}

html[data-page="admin"] .asset-item:hover {
  background: #121a2b;
}

html[data-page="admin"] .thumb {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #0b1220;
  border: 1px solid #1f2937;
  object-fit: cover;
}

html[data-page="admin"] .ai-title {
  font-weight: 600;
}

html[data-page="admin"] .ai-meta {
  color: var(--muted);
  font-size: 12px;
}

/* =========================================================
   PAGE: assets.html
   ========================================================= */

html[data-page="assets"] main {
  max-width: 1100px;
  margin: 14px auto;
  padding: 0 12px;
  display: grid;
  gap: 12px;
}

html[data-page="assets"] .muted {
  color: var(--muted);
}

html[data-page="assets"] .kv {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 6px 12px;
}

html[data-page="assets"] .photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}

html[data-page="assets"] .photos img {
  width: 100%;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #1f2937;
  background: #0b1220;
}

html[data-page="assets"] details {
  border-top: 1px solid #152235;
  padding-top: 10px;
}

html[data-page="assets"] summary {
  cursor: pointer;
}

html[data-page="assets"] .pager {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* =========================================================
   PAGE: index.html (login)
   ========================================================= */

html[data-page="index"],
html[data-page="index"] body {
  height: 100%;
}

html[data-page="index"] body {
  display: grid;
  place-items: center;
}

html[data-page="index"] .wrap {
  width: 100%;
  max-width: 420px;
  padding: 20px 12px;
}

html[data-page="index"] header {
  text-align: center;
  padding: 0 0 12px;
}

html[data-page="index"] header h1 {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
}

html[data-page="index"] header p {
  margin: 0;
  color: var(--muted);
}

html[data-page="index"] .card h2 {
  margin: 0 0 12px 0;
  font-size: 16px;
}

html[data-page="index"] input:focus {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/*_________________________________________________________________/*
/* source: signup.html */
html[data-page="signup"]{
      --bg:#0b1220; --card:#0f172a; --fg:#e5e7eb; --muted:#94a3b8; --border:#1f2937; --border-2:#182335;
      --btn:#1f2937; --btnb:#334155; --accent:#13c98a; --danger:#ef4444; --warn:#f59e0b;
      --focus:0 0 0 3px rgba(19,201,138,.17);
    }html[data-page="signup"] *{box-sizing:border-box}html[data-page="signup"] body{
      margin:0; background:var(--bg); color:var(--fg); font:14px system-ui,Segoe UI,Roboto,sans-serif;
      display:flex; justify-content:center; align-items:center; min-height:100vh; padding:18px 12px;
    }html[data-page="signup"] a{ color:inherit; }html[data-page="signup"] .container{
      width: min(520px, 96vw);
      padding: 18px;
      background:var(--card);
      border: 1.5px solid var(--border);
      border-radius:12px;
    }html[data-page="signup"] h1{ font-size: 22px; margin: 0 0 10px; text-align:center; }html[data-page="signup"] .hint{ color:var(--muted); font-size:12px; }html[data-page="signup"] .hint.center{ text-align:center; margin: 0 0 12px; }html[data-page="signup"] .error{ color:var(--danger); margin: 10px 0 0; }html[data-page="signup"] form{ margin-top: 10px; }html[data-page="signup"] form .row{ display:grid; grid-template-columns:1fr; gap:12px; }html[data-page="signup"] label{ display:block; margin-bottom: 5px; color:#cbd5e1; font-size:12px; }html[data-page="signup"] input{
      width:100%;
      background:#0b1220;
      color:var(--fg);
      border:1px solid var(--border);
      border-radius:10px;
      padding:10px;
      min-width:0;
      outline:none;
    }html[data-page="signup"] input:focus{ box-shadow:var(--focus); border-color:#235f4c; }html[data-page="signup"] button{
      width:100%;
      background:var(--btn);
      color:var(--fg);
      border:1px solid var(--btnb);
      padding:10px 14px;
      border-radius:10px;
      cursor:pointer;
      transition: opacity .15s, background-color .15s, transform .05s;
      user-select:none;
    }html[data-page="signup"] button:hover:not(:disabled){ opacity:.92; }html[data-page="signup"] button:active:not(:disabled){ transform: translateY(1px); }html[data-page="signup"] button:disabled{ opacity: 0.55; cursor:not-allowed; }html[data-page="signup"] button.primary{
      border-color:#1a4f3e;
      box-shadow:var(--focus) inset;
      background:var(--accent);
      color:var(--bg);
      font-weight: 800;
    }html[data-page="signup"] button.warn{
      background: var(--warn);
      color: var(--bg);
      border-color: #b45309;
      font-weight: 800;
    }html[data-page="signup"] /* Tabs */
    .tabs{
      display:flex; gap:8px; background:#0b1220; border:1px solid var(--border);
      border-radius:12px; padding:6px; margin: 12px 0 14px; overflow:auto;
      -webkit-overflow-scrolling:touch;
    }html[data-page="signup"] .tab-btn{
      flex:1 1 auto; min-width: 130px; width:auto;
      padding:9px 10px; border-radius:10px; border:1px solid #223246;
      background:transparent; color:var(--fg); font-weight:700; white-space:nowrap;
    }html[data-page="signup"] .tab-btn.active{
      border-color:#205443; background:#0d1b22; box-shadow:var(--focus) inset;
    }html[data-page="signup"] .tabpanes{
      border:1px solid var(--border);
      border-radius:12px;
      background:#0b1220;
      padding:12px;
      margin-bottom: 10px;
    }html[data-page="signup"] .pane[hidden]{ display:none !important; }html[data-page="signup"] .pane h2{ font-size:14px; margin:0 0 8px; letter-spacing:.2px; }html[data-page="signup"] .pane p{ margin:0 0 10px; color:#d7e0ea; line-height:1.45; }html[data-page="signup"] .bullets{ margin:0; padding-left: 18px; color:#d7e0ea; }html[data-page="signup"] .bullets li{ margin: 6px 0; }html[data-page="signup"] .price-box{
      display:grid; gap:10px; padding:10px;
      border:1px solid #223246; border-radius:12px; background:#0e1523;
    }html[data-page="signup"] .price-line{
      display:flex; justify-content:space-between; gap:10px; align-items:flex-start;
    }html[data-page="signup"] .price-line .k{ color:#cbd5e1; font-weight:700; }html[data-page="signup"] .price-line .v{ color:#e5e7eb; font-weight:800; }html[data-page="signup"] .divider{ height:1px; background: var(--border); opacity:.9; }html[data-page="signup"] .price-sub{ color:var(--muted); font-size:12px; margin-top:-4px; }html[data-page="signup"] .paywrap{
      margin-top: 10px;
      border:1px solid var(--border);
      border-radius:12px;
      padding:10px;
      background:#0b1220;
    }html[data-page="signup"] .signup-agency-setup{
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      gap:10px;
      align-items:center;
      border:1px solid #1f3a35;
      border-radius:12px;
      padding:10px;
      background:#0b1718;
    }html[data-page="signup"] .signup-agency-setup h2{
      margin:0 0 4px;
      font-size:14px;
    }html[data-page="signup"] .signup-agency-setup .hint{
      margin:0;
      line-height:1.45;
    }html[data-page="signup"] .setup-button{
      white-space:nowrap;
    }html[data-page="signup"] .signup-modal-backdrop{
      position:fixed;
      inset:0;
      z-index:10000;
      background:rgba(2,6,23,.72);
      padding:18px;
      display:grid;
      place-items:center;
    }html[data-page="signup"] .signup-modal-backdrop[hidden]{
      display:none !important;
    }html[data-page="signup"] .signup-modal{
      width:min(760px, 100%);
      max-height:calc(100vh - 36px);
      overflow:auto;
      border:1px solid var(--border);
      border-radius:16px;
      background:#0f172a;
      box-shadow:0 24px 70px rgba(0,0,0,.48);
    }html[data-page="signup"] .signup-modal-head,
    html[data-page="signup"] .signup-modal-foot{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:12px;
      border-bottom:1px solid var(--border);
    }html[data-page="signup"] .signup-modal-head h2{
      margin:0 0 3px;
      font-size:17px;
    }html[data-page="signup"] .signup-modal-head .hint{
      margin:0;
    }html[data-page="signup"] .signup-modal-foot{
      border-bottom:0;
      border-top:1px solid var(--border);
      justify-content:flex-end;
      position:sticky;
      bottom:0;
      background:#0f172a;
    }html[data-page="signup"] .signup-modal-body{
      display:grid;
      gap:12px;
      padding:12px;
    }html[data-page="signup"] .agency-setup-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }html[data-page="signup"] .agency-setup-grid label{
      display:grid;
      gap:5px;
      color:#cbd5e1;
      font-weight:700;
      font-size:12px;
    }html[data-page="signup"] .agency-setup-grid .wide{
      grid-column:1 / -1;
    }html[data-page="signup"] .agency-setup-grid input{
      width:100%;
      min-width:0;
    }html[data-page="signup"] .logo-picker{
      display:grid;
      gap:8px;
      border:1px solid #223246;
      border-radius:12px;
      padding:10px;
      background:#0b1220;
    }html[data-page="signup"] .logo-picker p{
      margin:4px 0 0;
    }html[data-page="signup"] .logo-drop{
      display:grid;
      place-items:center;
      min-height:116px;
      border:1px dashed #39536c;
      border-radius:12px;
      color:#d7e0ea;
      cursor:pointer;
      overflow:hidden;
      text-align:center;
    }html[data-page="signup"] .logo-drop input{
      display:none;
    }html[data-page="signup"] .logo-drop img{
      max-width:100%;
      max-height:150px;
      object-fit:contain;
      padding:8px;
    }html[data-page="signup"] .signup-billing-choice{
      display:grid;
      gap:8px;
      border:1px solid #223246;
      border-radius:12px;
      padding:10px;
      background:#0b1220;
    }html[data-page="signup"] .signup-billing-choice h2{
      margin:0;
      font-size:14px;
    }html[data-page="signup"] .signup-billing-choice .hint{
      margin:0;
    }html[data-page="signup"] .seat-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }html[data-page="signup"] .billing-summary{
      color:#b3f2c4;
      font-size:12px;
      line-height:1.4;
    }html[data-page="signup"] .signup-terms{
      display:grid;
      gap:8px;
      border:1px solid var(--border);
      border-radius:12px;
      padding:10px;
      background:#0b1220;
    }html[data-page="signup"] .signup-terms h2{
      margin:0;
      font-size:14px;
    }html[data-page="signup"] .signup-terms .hint{
      margin:0;
      line-height:1.45;
    }html[data-page="signup"] .terms-check{
      display:grid;
      grid-template-columns:auto 1fr;
      gap:8px;
      align-items:start;
      color:#d7e0ea;
      line-height:1.4;
    }html[data-page="signup"] .terms-check input{
      width:auto;
      margin-top:2px;
    }@media (max-width:760px){html[data-page="signup"] .signup-modal-backdrop{
        padding:0;
        place-items:stretch;
      }html[data-page="signup"] .signup-modal{
        width:100%;
        max-height:100vh;
        min-height:100vh;
        border-radius:0;
        border-left:0;
        border-right:0;
      }html[data-page="signup"] .agency-setup-grid{
        grid-template-columns:1fr;
      }html[data-page="signup"] .signup-agency-setup{
        grid-template-columns:1fr;
      }html[data-page="signup"] .setup-button{
        width:100%;
      }}@media (max-width:560px){html[data-page="signup"] .seat-grid{
        grid-template-columns:1fr;
      }}html[data-page="signup"] .paywrap .hint{ margin:0 0 8px; }html[data-page="signup"] .footer{
      margin-top: 12px;
      text-align:center;
      font-size:12px;
      color:var(--muted);
    }html[data-page="signup"] .footer a{ color:var(--accent); text-decoration: underline; }

/* source: super.html */
html[data-page="super"]{
      --bg:#0b1220; --card:#0f172a; --fg:#e5e7eb; --muted:#94a3b8; --border:#1f2937;
      --btn:#1f2937; --btnb:#334155; --focus:#22c55e; --ok:#86efac; --err:#fca5a5;
    }html[data-page="super"] *{ box-sizing:border-box; }html[data-page="super"] body{
      margin:0;
      background:var(--bg);
      color:var(--fg);
      font:14px system-ui,Segoe UI,Roboto,sans-serif;
      min-height:100vh;
      display:flex;
      flex-direction:column;
    }html[data-page="super"] /* ---------- Header with 3-column grid ---------- */
    header{
      display:grid;
      grid-template-columns:auto 1fr auto;
      align-items:center;
      padding:10px 14px;
      background:#0f172a;
      border-bottom:1px solid var(--border);
      gap:10px;
    }html[data-page="super"] .header-left{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
      flex-wrap:wrap;
    }html[data-page="super"] header h1{
      margin:0;
      font-size:18px;
      white-space:nowrap;
    }html[data-page="super"] .header-actions{
      display:flex;
      align-items:center;
      gap:6px;
      flex-wrap:wrap;
    }html[data-page="super"] .right{
      justify-self:end;
      display:flex;
      gap:8px;
      align-items:center;
      flex-wrap:nowrap;
      min-width:0;
    }html[data-page="super"] .muted{ color:var(--muted); }html[data-page="super"] /* Hamburger toggle (mobile-only) */
    #menuToggle{
      display:none;
      background:var(--btn);
      border:1px solid var(--btnb);
      color:var(--fg);
      border-radius:8px;
      padding:8px;
      cursor:pointer;
    }html[data-page="super"] #menuToggle:hover{
      background:#243041;
    }html[data-page="super"] .hamburger{
      width:20px;
      height:14px;
      position:relative;
    }html[data-page="super"] .hamburger::before, html[data-page="super"] .hamburger::after, html[data-page="super"] .hamburger span{
      content:"";
      position:absolute;
      left:0;
      width:100%;
      height:2px;
      background:var(--fg);
      border-radius:1px;
    }html[data-page="super"] .hamburger::before{ top:0; }html[data-page="super"] .hamburger::after{ bottom:0; }html[data-page="super"] .hamburger span{ top:6px; }@media (max-width:720px){html[data-page="super"] header{
        grid-template-columns:auto 1fr auto;
        padding:10px 10px;
      }html[data-page="super"] header h1{
        font-size:16px;
      }html[data-page="super"] .header-actions{
        display:none;
      }html[data-page="super"] .right{
        overflow-x:auto;
        max-width:50vw;
        justify-self:start;
      }html[data-page="super"] #menuToggle{
        display:inline-flex;
        align-items:center;
        justify-content:center;
      }}html[data-page="super"] button, html[data-page="super"] .btn-link{
      background:var(--btn);
      color:var(--fg);
      border:1px solid var(--btnb);
      padding:6px 10px;
      border-radius:8px;
      cursor:pointer;
      font:inherit;
      text-decoration:none;
      white-space:nowrap;
    }html[data-page="super"] button:hover, html[data-page="super"] .btn-link:hover{ background:#243041; }html[data-page="super"] button:focus, html[data-page="super"] input:focus, html[data-page="super"] select:focus, html[data-page="super"] .btn-link:focus{
      outline:2px solid var(--focus);
      outline-offset:2px;
    }html[data-page="super"] main{
      flex:1;
      max-width:1100px;
      margin:12px auto;
      padding:0 10px 14px;
      display:grid;
      gap:10px;
    }html[data-page="super"] .card{
      background:var(--card);
      border:1px solid var(--border);
      border-radius:12px;
      padding:12px;
    }html[data-page="super"] .card.tight{
      padding:8px 10px;
    }html[data-page="super"] .toolbar{
      display:flex;
      gap:6px;
      align-items:center;
      flex-wrap:wrap;
    }html[data-page="super"] input, html[data-page="super"] select{
      background:#0b1220;
      color:var(--fg);
      border:1px solid var(--border);
      border-radius:8px;
      padding:6px 9px;
      min-width:0;
      font:inherit;
    }html[data-page="super"] .right-main{
      display:flex;
      gap:6px;
      align-items:center;
      flex-wrap:wrap;
    }html[data-page="super"] a{ color:inherit; text-decoration:none; }html[data-page="super"] .hint{ font-size:12px; color:var(--muted); }html[data-page="super"] .error{ color:var(--err); }html[data-page="super"] .success{ color:var(--ok); }html[data-page="super"] .spinner{
      display:inline-block;
      width:14px;
      height:14px;
      border:2px solid #2e3a4d;
      border-top-color:#22c55e;
      border-radius:50%;
      animation:spin .8s linear infinite;
      vertical-align:-2px;
    }@keyframes spin{ to{ transform:rotate(360deg); } }html[data-page="super"] .table-shell{
      width:100%;
      overflow-x:auto;
    }html[data-page="super"] table{
      width:100%;
      border-collapse:collapse;
      min-width:780px;
    }html[data-page="super"] th, html[data-page="super"] td{
      padding:6px 8px;
      border-bottom:1px solid #1f2937;
      vertical-align:top;
    }html[data-page="super"] th{
      text-align:left;
      color:#cbd5e1;
      font-weight:600;
      white-space:nowrap;
    }html[data-page="super"] .logo-cell{
      width:64px;
      max-width:64px;
    }html[data-page="super"] .logo-box{
      width:52px;
      height:52px;
      border-radius:8px;
      border:1px solid #1f2937;
      background:#020617;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
    }html[data-page="super"] .logo-box img{
      max-width:100%;
      max-height:100%;
      object-fit:contain;
      display:block;
    }html[data-page="super"] .logo-placeholder{
      font-size:10px;
      color:var(--muted);
      text-align:center;
      user-select:none;
    }html[data-page="super"] .details{
      display:none;
      padding:8px 10px;
      background:#0b1220;
      border-radius:8px;
      margin-top:6px;
      border:1px solid #1f2937;
    }html[data-page="super"] .details.open{ display:block; }html[data-page="super"] .card-main-title, html[data-page="super"] .card-main-sub{
      display:none;
    }html[data-page="super"] .card-buttons{
      display:flex;
      gap:6px;
      flex-wrap:wrap;
    }html[data-page="super"] #mb{
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.55);
      display:none;
      z-index:40;
    }html[data-page="super"] #modalAgency, html[data-page="super"] #modalUser, html[data-page="super"] #modalAgencyView{
    top:0;
    left:0;
    transform:none;
    width:100%;
    max-width:100vw;
    height:100vh;
    border-radius:0;
    padding:14px 10px 16px;
    overflow:auto;
  }html[data-page="super"] #modalAgency h3, html[data-page="super"] #modalUser h3{
    position:sticky;
    top:0;
    background:#0f172a;
    padding-bottom:6px;
    z-index:1;
  }@media (max-width:720px){html[data-page="super"] main{ padding:0 8px 10px; }html[data-page="super"] .table-shell{
        overflow-x:visible;
      }html[data-page="super"] table{
        border:0;
        min-width:0;
      }html[data-page="super"] thead{
        display:none;
      }html[data-page="super"] tbody{
        display:block;
      }html[data-page="super"] tbody tr.agencyRow{
        display:flex;
        align-items:center;
        gap:10px;
        border:1px solid #1f2937;
        border-radius:10px;
        background:#020617;
        margin-bottom:10px;
        padding:8px 10px;
      }html[data-page="super"] tbody tr.detailRow{
        display:block;
        margin-top:-6px;
        border:0;
      }html[data-page="super"] tbody tr.agencyRow td{
        border-bottom:none;
        padding:0;
      }html[data-page="super"] tbody tr.agencyRow td[data-label="ID"], html[data-page="super"] tbody tr.agencyRow td[data-label="Status"], html[data-page="super"] tbody tr.agencyRow td[data-label="Email"], html[data-page="super"] tbody tr.agencyRow td[data-label="Phone"], html[data-page="super"] tbody tr.agencyRow td[data-label="City"], html[data-page="super"] tbody tr.agencyRow td[data-label="Name"], html[data-page="super"] tbody tr.agencyRow td[data-label="Region"]{
        display:none;
      }html[data-page="super"] .logo-cell{
        display:block;
        flex:0 0 90px;
        max-width:90px;
        margin-right:8px;
      }html[data-page="super"] .logo-box{
        width:80px;
        height:80px;
        border-radius:10px;
      }html[data-page="super"] td.actions-cell{
        flex:1;
        display:flex;
      }html[data-page="super"] .card-main{
        display:flex;
        flex-direction:column;
        width:100%;
      }html[data-page="super"] .card-main-title{
        display:block;
        font-weight:600;
        margin-bottom:2px;
      }html[data-page="super"] .card-main-sub{
        display:block;
        font-size:12px;
        color:var(--muted);
        margin-bottom:6px;
      }html[data-page="super"] .card-buttons{
        display:flex;
        flex-wrap:wrap;
        gap:6px;
      }html[data-page="super"] tbody tr.agencyRow td::before{
        content:none;
      }html[data-page="super"] .right-main{
        width:100%;
        justify-content:space-between;
      }html[data-page="super"] .super-search{flex:1 1 260px}html[data-page="super"] .super-col-id{width:70px}html[data-page="super"] .super-col-logo{width:80px}html[data-page="super"] .super-col-actions{width:240px}html[data-page="super"] .super-pager{justify-content:space-between;margin-top:6px}html[data-page="super"] .super-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:8px}html[data-page="super"] .super-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}html[data-page="super"] .super-logo-label{font-size:12px;color:var(--muted);display:block;margin-bottom:4px}html[data-page="super"] .super-form-actions{justify-content:flex-end;margin-top:10px}html[data-page="super"] .super-grid-view{display:grid;grid-template-columns:1.2fr 1.8fr;gap:10px;margin-top:6px}html[data-page="super"] .super-view-actions{justify-content:flex-end;margin-top:12px}html[data-page="super"] .super-clickable{cursor:pointer}html[data-page="super"] #modalAgency, html[data-page="super"] #modalUser, html[data-page="super"] #modalAgencyView{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:640px;
  max-width:95vw;
  background:#0f172a;
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  display:none;
  z-index:50;
}html[data-page="super"] #modalAgency h3, html[data-page="super"] #modalUser h3{
  margin:0 0 8px;
  font-size:16px;
}html[data-page="super"] #modalAgency form div, html[data-page="super"] #modalUser form div{
        grid-template-columns:1fr !important;
      }}@media (max-width:600px){html[data-page="super"] .right-main > button{
        flex:1 1 calc(50% - 4px);
        padding-block:6px;
        font-size:13px;
      }html[data-page="super"] .right-main .muted{
        flex:1 1 100%;
        order:3;
        font-size:11px;
      }}html[data-page="super"] .nav-overlay{
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.5);
      z-index:800;
      display:none;
    }html[data-page="super"] .nav-overlay.open{
      display:block;
    }html[data-page="super"] .nav-sheet{
      position:fixed;
      top:0;
      right:0;
      height:100%;
      width:min(320px, 86vw);
      background:#0f172a;
      border-left:1px solid var(--border);
      box-shadow:-20px 0 40px rgba(0,0,0,.45);
      transform:translateX(104%);
      transition:transform .22s ease;
      z-index:801;
      display:flex;
      flex-direction:column;
    }html[data-page="super"] .nav-sheet.open{
      transform:translateX(0);
    }html[data-page="super"] .nav-sheet[aria-hidden="true"]{
      pointer-events:none;
    }html[data-page="super"] .nav-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:12px;
      border-bottom:1px solid var(--border);
    }html[data-page="super"] .nav-title{
      font-weight:800;
    }html[data-page="super"] .nav-list{
      padding:8px;
      display:grid;
      gap:8px;
      overflow:auto;
      max-height:calc(100dvh - 58px);
    }html[data-page="super"] .nav-item{
      display:block;
      width:100%;
      text-align:left;
      text-decoration:none;
      color:var(--fg);
      background:#0b1220;
      border:1px solid var(--border);
      border-radius:10px;
      padding:12px;
      font-weight:600;
      font-size:14px;
    }html[data-page="super"] .nav-item:hover{
      background:#0e1523;
    }@media (min-width:721px){html[data-page="super"] .nav-overlay, html[data-page="super"] .nav-sheet{
        display:none !important;
      }}

/* source: index_legacy.html */
/* ========= Base tokens ========= */
        html[data-page="index_legacy"]{
            --bg:#0b1220; --card:#0f172a; --fg:#e5e7eb; --muted:#94a3b8; --border:#1f2937; --border-2:#182335;
            --btn:#1f2937; --btnb:#334155; --accent:#13c98a; --danger:#ef4444; --warn:#f59e0b; --ring:rgba(19,201,138,.35);
            /* Dynamic header height for stacking sticky bars safely */
            --header-h: 52px;
        }html[data-page="index_legacy"] *{box-sizing:border-box}html[data-page="index_legacy"], html[data-page="index_legacy"] body{height:100%}html[data-page="index_legacy"] body{
            margin:0;
            background:var(--bg);
            color:var(--fg);
            font:14px system-ui,Segoe UI,Roboto,sans-serif;
            font-family:'Inter',sans-serif;
        }html[data-page="index_legacy"] .text-accent{ color: var(--accent); }html[data-page="index_legacy"] .bg-card{ background-color: var(--card); }html[data-page="index_legacy"] .border-base{ border-color: var(--border); }html[data-page="index_legacy"] .border-accent{ border-color: var(--accent); }html[data-page="index_legacy"] .hover-accent-bg:hover{ background-color: #13c98a22; }html[data-page="index_legacy"] .text-muted{ color: var(--muted); }html[data-page="index_legacy"] /* ========= Header ========= */
        header{
            width:100%;
            display:flex;
            gap:10px;
            justify-content:center;
            align-items:center;
            padding:10px max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left));
            background:#0f172a;
            border-bottom:1px solid var(--border);
            position:sticky;
            top:0;
            z-index:30;
        }html[data-page="index_legacy"] header h1{margin:0;font-size:18px}html[data-page="index_legacy"] .header-wrap{
            max-width:1100px;
            margin:0 auto;
            width:100%;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            padding:0 12px;
        }html[data-page="index_legacy"] .row{display:flex;gap:8px;align-items:center}html[data-page="index_legacy"] a.buttonlike{display:inline-block}html[data-page="index_legacy"] input, html[data-page="index_legacy"] select, html[data-page="index_legacy"] textarea{
            background:#0b1220;
            color:var(--fg);
            border:1px solid var(--border);
            border-radius:10px;
            padding:8px 10px;
        }html[data-page="index_legacy"] button{
            background:var(--btn);
            color:var(--fg);
            border:1px solid var(--btnb);
            padding:8px 12px;
            border-radius:10px;
            cursor:pointer;
        }html[data-page="index_legacy"] button:hover{background:#243041}html[data-page="index_legacy"] button.ghost{background:transparent}@media (min-width:1120px){html[data-page="index_legacy"] header{justify-content:center}html[data-page="index_legacy"] header > *{max-width:1100px;width:100%}}html[data-page="index_legacy"] .wrap{max-width:1100px;margin:10px auto;padding:0 12px}html[data-page="index_legacy"] .panel{background:var(--card);border:1.5px solid var(--border);border-radius:12px}html[data-page="index_legacy"] /* Primary CTA */
        .cta-accent{
            background-color:var(--accent);
            color:var(--bg);
            font-weight:700;
            box-shadow:0 4px 14px rgba(19,201,138,0.4);
            transition:transform 0.2s,box-shadow 0.2s,background-color 0.2s;
        }html[data-page="index_legacy"] .cta-accent:hover{
            background-color:#11b37b;
            transform:translateY(-1px);
            box-shadow:0 6px 20px rgba(19,201,138,0.6);
        }html[data-page="index_legacy"] .icon-box{
            background-color:#13c98a22;
            border:1px solid var(--accent);
        }html[data-page="index_legacy"] .pricing-card{min-height:520px;}html[data-page="index_legacy"] .pricing-highlight{
            border:2px solid var(--accent);
            background-color:#13c98a11;
        }

/* source: unit_admin.html */
html[data-page="unit_admin"] body{margin:0;background:#0b1220;color:#e5e7eb;font:14px system-ui,Segoe UI,Roboto,sans-serif}html[data-page="unit_admin"] header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:#0f172a;border-bottom:1px solid #1f2937}html[data-page="unit_admin"] main{max-width:960px;margin:16px auto;padding:0 12px;display:grid;gap:14px}html[data-page="unit_admin"] .card{background:#0f172a;border:1px solid #1f2937;border-radius:12px;padding:14px}html[data-page="unit_admin"] label{display:block;margin-top:10px}html[data-page="unit_admin"] input, html[data-page="unit_admin"] select, html[data-page="unit_admin"] textarea{width:100%;padding:10px;border-radius:10px;border:1px solid #334155;background:#0b1220;color:#e5e7eb}html[data-page="unit_admin"] button{padding:10px 12px;border-radius:10px;border:1px solid #334155;background:#1f2937;color:#e5e7eb;cursor:pointer;margin-top:12px}html[data-page="unit_admin"] .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}html[data-page="unit_admin"] .muted{color:#94a3b8}html[data-page="unit_admin"] .hide{display:none !important}html[data-page="unit_admin"] .pill{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid #31445c;color:#cbd5e1}html[data-page="unit_admin"] .pill.ok{border-color:#1b3e2b;color:#b3f2c4}html[data-page="unit_admin"] .pill.warn{border-color:#5c4231;color:#fdd9b3}html[data-page="unit_admin"] .pill.bad{border-color:#5c3131;color:#f5b5b5}html[data-page="unit_admin"] .unit-admin-heading{margin:0 0 8px 0}html[data-page="unit_admin"] .unit-admin-gap-12{gap:12px}html[data-page="unit_admin"] .unit-admin-gap-16{gap:16px}html[data-page="unit_admin"] .unit-admin-muted-small{font-size:12px;margin-top:4px}

/* source: scan_photo.html */
html[data-page="scan_photo"]{
      --bg:#0b1220; --card:#0f172a; --fg:#e5e7eb; --muted:#94a3b8; --border:#1f2937; --accent:#13c98a; --ai:#9333ea;
    }html[data-page="scan_photo"] body{ margin: 0; background: var(--bg); color: var(--fg); font: 13px system-ui, sans-serif; display: flex; flex-direction: column; height: 100vh; }html[data-page="scan_photo"] header{ height: 52px; border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 20px; background: var(--card); justify-content: space-between; }html[data-page="scan_photo"] .main{ display: grid; grid-template-columns: 350px 1fr; flex: 1; overflow: hidden; }html[data-page="scan_photo"] .sidebar{ border-right: 1px solid var(--border); padding: 20px; background: var(--bg); }html[data-page="scan_photo"] .editor{ padding: 30px; overflow-y: auto; background: #080d16; }html[data-page="scan_photo"] .card{ background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 15px; margin-bottom: 15px; }html[data-page="scan_photo"] .btn{ background: var(--ai); color: #fff; border: none; padding: 12px; border-radius: 6px; cursor: pointer; font-weight: 600; width: 100%; text-transform: uppercase; }html[data-page="scan_photo"] .btn:disabled{ opacity: 0.3; }html[data-page="scan_photo"] .field-item{ background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 10px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }html[data-page="scan_photo"] .field-item input{ background: transparent; border: none; border-bottom: 1px solid var(--border); color: #fff; flex: 1; outline: none; }html[data-page="scan_photo"] .file-drop{ border: 2px dashed var(--border); padding: 20px; text-align: center; color: var(--muted); cursor: pointer; margin-bottom: 15px; border-radius: 8px; }html[data-page="scan_photo"] .spinner{
    width: 20px; height: 20px;
    border: 3px solid rgba(19,201,138, .3);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: inline-block; vertical-align: middle; margin-right: 10px;
  }@keyframes spin{ to { transform: rotate(360deg); } }html[data-page="scan_photo"] .ai-pulse{
    animation: pulse 1.5s infinite;
    color: var(--ai) !important;
    font-weight: bold;
  }@keyframes pulse{ 
    0% { opacity: 1; } 
    50% { opacity: 0.5; } 
    100% { opacity: 1; } 
  }html[data-page="scan_photo"] .scan-title{font-weight:900;color:var(--accent)}html[data-page="scan_photo"] .scan-title-highlight{color:#fff}html[data-page="scan_photo"] .scan-subtitle{color:var(--ai);font-size:11px;font-weight:bold}html[data-page="scan_photo"] .scan-status{font-size:11px;color:var(--muted);margin-top:15px;text-align:center}html[data-page="scan_photo"] .scan-empty{text-align:center;padding-top:100px;color:var(--muted);font-style:italic}html[data-page="scan_photo"] .scan-field-index{color:var(--muted);width:20px}html[data-page="scan_photo"] .scan-field-remove{background:transparent;color:var(--danger);border:none;cursor:pointer}html[data-page="scan_photo"] .scan-wait{text-align:center;margin-top:50px;opacity:0.5}html[data-page="scan_photo"] .scan-error{color:var(--danger);text-align:center}

/* source: admin_forms.html */
html[data-page="admin_forms"]{
  --bg:#0b1220; --card:#0f172a; --fg:#e5e7eb; --muted:#94a3b8; --border:#1f2937; --border-2:#182335;
  --btn:#1f2937; --btnb:#334155; --accent:#13c98a; --danger:#ef4444; --warn:#f59e0b;
  --ring:rgba(19,201,138,.35); --focus:0 0 0 3px rgba(19,201,138,.17);
  --header-h:52px;
}html[data-page="admin_forms"] *{box-sizing:border-box}html[data-page="admin_forms"], html[data-page="admin_forms"] body{height:100%; overflow-x:hidden}html[data-page="admin_forms"] body{margin:0;background:var(--bg);color:var(--fg);font:14px system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans","Helvetica Neue",Arial}html[data-page="admin_forms"] a{color:inherit; text-decoration:none}html[data-page="admin_forms"] .row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}html[data-page="admin_forms"] .buttonlike{display:inline-block}html[data-page="admin_forms"] button{
  background:var(--btn); color:var(--fg); border:1px solid var(--btnb);
  padding:8px 12px; border-radius:10px; cursor:pointer
}html[data-page="admin_forms"] button:hover{ background:#243041 }html[data-page="admin_forms"] button.ghost{ background:transparent }html[data-page="admin_forms"] button.primary{ border-color:#1a4f3e; box-shadow:var(--focus) inset }html[data-page="admin_forms"] button.danger{ border-color:#5c1c20 }html[data-page="admin_forms"] button.sm{ padding:6px 10px; border-radius:9px; font-size:12.5px }html[data-page="admin_forms"] input, html[data-page="admin_forms"] select, html[data-page="admin_forms"] textarea{
  background:#0b1220; color:var(--fg); border:1px solid var(--border); border-radius:10px; padding:8px 10px; min-width:0
}html[data-page="admin_forms"] label{display:block; margin-bottom:4px; color:#cbd5e1; font-size:12px}html[data-page="admin_forms"] .hint{ color:var(--muted) }html[data-page="admin_forms"] header{ position:sticky; top:0; z-index:30; background:#0f172a; border-bottom:1px solid var(--border) }html[data-page="admin_forms"] .header-wrap{ max-width:1100px; margin:0 auto; padding:10px 12px; display:flex; justify-content:space-between; align-items:center; gap:10px }html[data-page="admin_forms"] header h1{ margin:0; font-size:18px }html[data-page="admin_forms"] .toolbar{ position:sticky; top:var(--header-h); z-index:25; background:#0f172a; border-bottom:1px solid var(--border) }html[data-page="admin_forms"] .toolbar-wrap{ max-width:1100px; margin:0 auto; padding:8px 12px; display:grid; gap:8px }html[data-page="admin_forms"] .trow{ display:grid; grid-template-columns: 1fr; gap:8px; align-items:center }html[data-page="admin_forms"] .tcontrols{ display:grid; grid-template-columns: 1fr; gap:8px }html[data-page="admin_forms"] .tline{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; width:100% }html[data-page="admin_forms"] #q{ flex:1 1 220px; min-width:0; width:100% }html[data-page="admin_forms"] .seg{ display:flex; border:1px solid var(--border); border-radius:10px; overflow:hidden }html[data-page="admin_forms"] .seg button{ border:0; background:#0b1220; padding:8px 10px; white-space:nowrap }html[data-page="admin_forms"] .seg button.active{ background:#172033 }html[data-page="admin_forms"] .scope-seg{ width:fit-content }@media (max-width:700px){html[data-page="admin_forms"] .scope-seg{ width:100% }html[data-page="admin_forms"] .scope-seg button{ flex:1 1 0 }}html[data-page="admin_forms"] #pageSize{ min-width:140px }html[data-page="admin_forms"] #btnExport{ white-space:nowrap }@media (max-width:700px){html[data-page="admin_forms"] #btnExport{ padding:6px 8px; font-size:12.5px }}html[data-page="admin_forms"] .wrap{ max-width:1100px; margin:10px auto; padding:0 12px }html[data-page="admin_forms"] .panel{ background:var(--card); border:1.5px solid var(--border); border-radius:12px; overflow:hidden }html[data-page="admin_forms"] .panel > .head{ padding:10px; border-bottom:1.5px solid var(--border-2); display:flex; justify-content:space-between; align-items:center }html[data-page="admin_forms"] .panel > .body{ padding:10px }html[data-page="admin_forms"] .badge{ display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid #31445c }html[data-page="admin_forms"] .badge.ok{ border-color:#1b3e2b; color:#b3f2c4 }html[data-page="admin_forms"] .badge.bad{ border-color:#5c3131; color:#f5b5b5 }html[data-page="admin_forms"] .table-wrap{ border:1.5px solid var(--border); border-radius:12px; overflow:auto; -webkit-overflow-scrolling:touch }html[data-page="admin_forms"] table{ width:100%; min-width:780px; border-collapse:separate; border-spacing:0; background:#0e1523 }html[data-page="admin_forms"] thead th{ background:#0f172a; color:#cbd5e1; position:sticky; top:0; z-index:10; border-bottom:1.5px solid var(--border-2); cursor:pointer }html[data-page="admin_forms"] th, html[data-page="admin_forms"] td{ padding:10px; text-align:left; vertical-align:middle }html[data-page="admin_forms"] tbody tr{ border-bottom:1px solid var(--border-2) }html[data-page="admin_forms"] tbody tr:nth-child(odd){ background:#0e1626 }html[data-page="admin_forms"] tbody tr:hover{ outline:2px solid #2a3b54; outline-offset:-2px }html[data-page="admin_forms"] .nowrap{ white-space:nowrap }html[data-page="admin_forms"] .cell-name{ max-width:320px; overflow:hidden; text-overflow:ellipsis; }@media (max-width:480px){html[data-page="admin_forms"] th, html[data-page="admin_forms"] td{ padding:8px }html[data-page="admin_forms"] .cell-name{ max-width:180px }}html[data-page="admin_forms"] body.modal-open{ overflow:hidden }html[data-page="admin_forms"] .overlay{ position:fixed; inset:0; z-index:10000; display:none }html[data-page="admin_forms"] .overlay.open{ display:block }html[data-page="admin_forms"] .backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55) }html[data-page="admin_forms"] .sheet{
  position:absolute; inset:0 auto 0 0; height:100dvh;
  width:min(1100px, 98vw);
  right:0;
  background:#0f172a; border-left:1px solid var(--border);
  box-shadow:-24px 0 48px rgba(0,0,0,.55);
  display:flex; flex-direction:column;
  overflow:hidden;
}html[data-page="admin_forms"] .sheet-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border-bottom:1px solid var(--border-2)
}html[data-page="admin_forms"] .sheet-body{
  display:grid;
  grid-template-columns: 340px 1fr 440px;
  grid-template-rows: 1fr;
  gap:10px;
  padding:10px;
  min-height:0;
  align-items:stretch;
  overflow:hidden;
  flex:1;
}html[data-page="admin_forms"] .left-rail{
  display:grid;
  grid-template-rows:auto 1fr;
  gap:10px;
  min-height:0; min-width:0;
}html[data-page="admin_forms"] .meta-card{
  background:#0e1523; border:1px solid var(--border); border-radius:12px; padding:10px; display:grid; gap:10px
}html[data-page="admin_forms"] .meta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px }@media (max-width:1100px){html[data-page="admin_forms"] .meta-grid{ grid-template-columns:1fr }}html[data-page="admin_forms"] .json-preview strong{ font-size:12px; font-weight:700 }html[data-page="admin_forms"] .json-preview .row{ gap:6px }html[data-page="admin_forms"] .json-preview{
  background:#0e1523; border:1px solid var(--border); border-radius:12px; padding:8px;
  display:grid; gap:8px; min-height:0;
  height: clamp(160px, 34vh, 420px);
  max-height: 50vh;
  overflow:auto; overflow-x:hidden;
}html[data-page="admin_forms"] .json-preview textarea{
  width:100%; height:100%; min-height:0; resize:none;
  background:#0b1220; color:#e5e7eb; border:1px solid var(--border); border-radius:10px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; line-height:1.35;
}html[data-page="admin_forms"] .mid-col{
  min-height:0; min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}html[data-page="admin_forms"] .mid-head{ flex:0 0 auto }html[data-page="admin_forms"] .field-list{
  background:#0e1523; border:1px solid var(--border); border-radius:12px; padding:8px;
  min-height:0;
  flex:1 1 auto;
  overflow:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}html[data-page="admin_forms"] .field-row{
  display:grid; grid-template-columns:24px 1fr auto; align-items:center; gap:8px;
  padding:8px; border:1px solid #223246; border-radius:10px; background:#0b1220; cursor:grab;
}html[data-page="admin_forms"] .field-row + .field-row{ margin-top:8px }html[data-page="admin_forms"] .field-row.active{ outline:2px solid #205443; outline-offset:0 }html[data-page="admin_forms"] .drag-handle{ user-select:none; font-weight:800; text-align:center; opacity:.7 }html[data-page="admin_forms"] .field-type{ font-size:12px; color:#9fb1c8; margin-left:6px }html[data-page="admin_forms"] .right-col{ min-height:0; min-width:0; display:grid; grid-template-rows:auto 1fr; gap:8px }html[data-page="admin_forms"] .editor-card{
  background:#0e1523; border:1px solid var(--border); border-radius:12px; padding:10px;
  max-height:50vh; overflow:auto; overflow-x:hidden;
}@media (max-width:900px){html[data-page="admin_forms"] .sheet{
    left:0; right:0; top:auto; bottom:0;
    width:100vw;
    height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    border-left:none; border-top:1px solid var(--border);
    border-top-left-radius:14px; border-top-right-radius:14px;
    transform:translateY(110%);
    box-shadow:0 -24px 48px rgba(0,0,0,.55);
  }html[data-page="admin_forms"] .overlay.open .sheet{ transform:translateY(0) }html[data-page="admin_forms"] .sheet-body{
    grid-template-columns:1fr;
    grid-template-rows:auto auto 1fr auto auto;
    overflow:hidden;
    flex:1;
    min-height:0;
  }html[data-page="admin_forms"] .right-col{ display:none }html[data-page="admin_forms"] .json-preview{ display:none !important; }html[data-page="admin_forms"] .left-rail{ grid-template-rows:auto }html[data-page="admin_forms"] .mid-col{ display:flex; flex-direction:column; min-height:0 }html[data-page="admin_forms"] .field-list{ flex:1 1 auto; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch }}html[data-page="admin_forms"] .footer-actions{ display:flex; justify-content:flex-end; gap:8px; padding:10px 12px; border-top:1px solid var(--border-2); background:#0f172a; position:sticky; bottom:0; z-index:3 }html[data-page="admin_forms"] /* --- NEW: compact combo input for “Other” (works like dropdown + custom) --- */
.combo-wrap{ display:flex; gap:8px; align-items:center; }html[data-page="admin_forms"] .combo-wrap input{ flex:1 1 auto; min-width:160px; }html[data-page="admin_forms"] .combo-muted{ opacity:.92 }html[data-page="admin_forms"] .admin-forms-label-reset{margin:0}html[data-page="admin_forms"] .admin-forms-row-between{justify-content:space-between;margin:6px 0}html[data-page="admin_forms"] .admin-forms-scope{margin-left:10px}html[data-page="admin_forms"] .admin-forms-span{grid-column:1/-1}html[data-page="admin_forms"] .admin-forms-row-grid{grid-template-columns:auto auto 1fr}html[data-page="admin_forms"] .admin-forms-gap-6{gap:6px}html[data-page="admin_forms"] .admin-forms-asset-custom{min-width:220px}

/* source: tech.html */
html[data-page="tech"]{
      --bg:#0b0f12; --panel:#12181d; --panel-2:#171e24; --text:#e7f2ff; --muted:#96a3b3;
      --accent:#13c98a; --danger:#ff4757; --amber:#ffb020; --btn-b:#2a3946; --ring:rgba(19,201,138,.35);
      --okbg:rgba(19,201,138,.08); --okbd:rgba(19,201,138,.35);
      --badbg:rgba(255,71,87,.08); --badbd:rgba(255,71,87,.35);
    }html[data-page="tech"] *{box-sizing:border-box}html[data-page="tech"], html[data-page="tech"] body{height:100%}html[data-page="tech"] body{
      margin:0; color:var(--text);
      background:radial-gradient(1200px 800px at 50% -10%, #18222b 0%, var(--bg) 60%);
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans","Helvetica Neue",Arial;
    }html[data-page="tech"] .wrap{max-width:1024px;margin:0 auto;padding:16px env(safe-area-inset-right) 28px env(safe-area-inset-left);display:grid;gap:14px}html[data-page="tech"] header{display:flex;align-items:center;justify-content:space-between;gap:10px}html[data-page="tech"] .brand{display:flex;align-items:center;gap:10px}html[data-page="tech"] .led{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #4dffbf, #0f5138);box-shadow:0 0 0 2px #0d3729,0 0 12px 2px #19eaa2;animation:blink 2.6s infinite}@keyframes blink{0%,93%,100%{opacity:1}95%{opacity:.3}97%{opacity:.8}}html[data-page="tech"] h1{margin:0;font-size:1.2rem}html[data-page="tech"] .card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid #22313d;border-radius:16px;padding:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 10px 30px rgba(0,0,0,.25)}html[data-page="tech"] .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}html[data-page="tech"] .kv{background:#0e1419;border:1px solid #233240;border-radius:12px;padding:10px}html[data-page="tech"] .label{color:var(--muted);font-size:.82rem}html[data-page="tech"] .value{margin-top:4px;font-weight:650}html[data-page="tech"] .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 14px;border-radius:12px;background:#0f161c;border:1px solid var(--btn-b);color:var(--text);font-weight:700;cursor:pointer;text-decoration:none}html[data-page="tech"] .btn.primary{border-color:#1a4f3e;box-shadow:0 0 0 3px rgba(19,201,138,.07) inset}html[data-page="tech"] .btn.warn{border-color:#5f430e;box-shadow:0 0 0 3px rgba(255,176,32,.08) inset}html[data-page="tech"] .btn.danger{border-color:#5c1c20;box-shadow:0 0 0 3px rgba(255,71,87,.08) inset}html[data-page="tech"] .btn.sm{min-height:34px;padding:6px 10px;border-radius:10px;font-size:.9rem}html[data-page="tech"] .btn.emph{min-height:48px;padding:12px 18px;font-size:1rem}html[data-page="tech"] /* Button small style from user.html */
    .btn.small{
      width:auto !important; min-height:32px; padding:6px 12px; border-radius:10px; font-size:.9rem;
      flex-shrink:0; justify-self:end;
      background:linear-gradient(180deg,#0f161c,#0b1116);
      border:1px solid var(--btn-b);
      box-shadow:0 1px 0 rgba(255,255,255,.03), 0 4px 10px rgba(0,0,0,.25);
    }html[data-page="tech"] .banner{border-radius:12px;padding:10px 12px;font-weight:750;letter-spacing:.4px;text-transform:uppercase;text-align:center;border:1px solid}html[data-page="tech"] .banner.ok{background:var(--okbg);border-color:var(--okbd)}html[data-page="tech"] .banner.oos{background:var(--badbg);border-color:var(--badbd)}html[data-page="tech"] .tabs{display:flex;gap:8px;flex-wrap:wrap}html[data-page="tech"] .tab{padding:8px 12px;border:1px solid #243544;border-radius:999px;cursor:pointer;color:#c1d0e1;user-select:none}html[data-page="tech"] .tab.active{border-color:#1a4f3e;color:var(--text);box-shadow:0 0 0 3px rgba(19,201,138,.06) inset}html[data-page="tech"] /* === LOGS STYLES (Synced with user.html) === */
    .logs{display:grid;gap:10px}html[data-page="tech"] .log-item{
      border:1px solid #233240; border-radius:12px; padding:10px; background:#0c1319;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.03); cursor:pointer;
    }html[data-page="tech"] .log-item.pass{border-color:var(--okbd);background:var(--okbg);}html[data-page="tech"] .log-item.fail, html[data-page="tech"] .log-item.oos{border-color:var(--badbd);background:var(--badbg);}html[data-page="tech"] .log-time{color:var(--muted);font-size:.8rem}html[data-page="tech"] .log-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px}html[data-page="tech"] .badge{ display:inline-block; border:1px solid #31445c; border-radius:999px; padding:2px 8px; font-size:11px; color:#cbd5e1; }html[data-page="tech"] /* === END LOGS STYLES === */

    .hint{color:var(--muted);font-size:.88rem}html[data-page="tech"] details{border-top:1px solid #1f2a35;margin-top:8px;padding-top:8px}html[data-page="tech"] summary{cursor:pointer;list-style:none}html[data-page="tech"] summary::-webkit-details-marker{display:none}html[data-page="tech"] .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}@media (max-width:720px){html[data-page="tech"] .grid2{grid-template-columns:1fr}}html[data-page="tech"] .photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}html[data-page="tech"] .photos img{width:100%;height:96px;object-fit:cover;border-radius:8px;border:1px solid #1f2937;background:#0b1116}html[data-page="tech"] .toast{position:fixed;left:50%;transform:translateX(-50%);bottom:max(16px, env(safe-area-inset-bottom));background:#0f161c;border:1px solid #274052;padding:12px 14px;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:1000;opacity:0;pointer-events:none;transition:opacity .25s}html[data-page="tech"] .toast.show{opacity:1}html[data-page="tech"] .hidden{ display: none !important; }html[data-page="tech"] /* ===== New Inspection layout ===== */
    .new-inspect{
      display:grid; gap:10px;
      grid-template-areas:
        "head"
        "form"
        "side"
        "sig"
        "actions";
    }html[data-page="tech"] #formWrap{ grid-area: form; }html[data-page="tech"] .ni-side{ grid-area: side; display:grid; gap:10px; grid-template-columns:1fr 1fr; }@media (max-width:900px){html[data-page="tech"] .ni-side{ grid-template-columns:1fr; }}html[data-page="tech"] .ni-head{ grid-area: head; }html[data-page="tech"] .ni-ctrls{
      display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
    }html[data-page="tech"] .select-sm{
      min-width:150px; width:auto;
      min-height:40px; height:42px;
      padding:6px 10px; border-radius:10px; font-size:.92rem;
      background:#0f161c; border:1px solid var(--btn-b); color:var(--text);
    }html[data-page="tech"] .select-list{
      width:100%;
      height:auto;
      max-height:min(60vh, 520px);
    }html[data-page="tech"] .tech-period-block{
      display:flex;
      flex-direction:column;
      gap:6px;
    }@media (max-width:720px){html[data-page="tech"] .btn.emph{ width:100%; }html[data-page="tech"] .select-sm{ width:100%; }}html[data-page="tech"] .sig-block{ grid-area: sig; }html[data-page="tech"] .sigpad-wrap{background:#0b1116;border:1px solid #243544;border-radius:12px;padding:10px}html[data-page="tech"] #sigPad{
      width:100%;
      height:180px;
      display:block;
      border-radius:10px;
      background:#0c1319;
      cursor:crosshair;
      touch-action:none;
    }@media (max-width:720px){html[data-page="tech"] #sigPad{ height:150px; }}html[data-page="tech"] table.parts{width:100%;border-collapse:separate;border-spacing:0 8px}html[data-page="tech"] table.parts td{background:#0e1419;border:1px solid #233240;padding:8px}html[data-page="tech"] table.parts td:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}html[data-page="tech"] table.parts td:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}@media (max-width:720px){html[data-page="tech"] table.parts thead{ display:none; }html[data-page="tech"] table.parts tr{
        display:block;background:#0e1419;border:1px solid #233240;border-radius:12px;padding:10px;margin-bottom:10px;
      }html[data-page="tech"] table.parts td{ display:block;border:0;padding:6px 0;width:100%; }html[data-page="tech"] table.parts td::before{ content: attr(data-label); display:block;font-size:.82rem;color:var(--muted);margin-bottom:4px; }html[data-page="tech"] table.parts td:last-child{ padding-top:8px; }}html[data-page="tech"] .fs-backdrop{ position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:20px; }html[data-page="tech"] .fs-panel{
      width:min(1100px, 95vw); height:min(90vh, 900px);
      background:linear-gradient(180deg,var(--panel),var(--panel-2)); border:1px solid #22313d; border-radius:16px;
      box-shadow:0 18px 60px rgba(0,0,0,.45); display:flex; flex-direction:column;
    }html[data-page="tech"] .fs-head{ padding:14px 16px; border-bottom:1px solid #22313d; display:flex; align-items:center; justify-content:space-between; gap:10px; }html[data-page="tech"] .fs-title{ font-weight:800 }html[data-page="tech"] .fs-body{ padding:14px 16px; overflow:auto; display:grid; gap:12px; }html[data-page="tech"] .fs-actions{ padding:12px 16px; border-top:1px solid #22313d; display:flex; justify-content:flex-end; gap:10px; }html[data-page="tech"] #partsFS table{ width:100%; border-collapse:separate; border-spacing:0 10px; }html[data-page="tech"] #partsFS td{ background:#0e1419; border:1px solid #233240; padding:10px; vertical-align:top; }html[data-page="tech"] #partsFS td:first-child{ width:90px; }html[data-page="tech"] #partsFS input[type="text"], html[data-page="tech"] #partsFS input[type="number"], html[data-page="tech"] #partsFS select, html[data-page="tech"] #partsFS textarea{
      width:100%; background:#0b1116; color:var(--text); border:1px solid #243544; border-radius:10px; padding:10px; font-size:1rem;
    }html[data-page="tech"] #partsFS textarea{ min-height:120px; resize:vertical; }html[data-page="tech"] .logs-topbar{ display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }html[data-page="tech"] .pager-right{ display:flex; align-items:center; gap:8px; justify-self:end; }@media (max-width: 720px){html[data-page="tech"] .logs-topbar{ grid-template-columns: 1fr; gap: 6px; }html[data-page="tech"] .pager-right{ justify-self:start; }}html[data-page="tech"] .tech-card-flat{margin:0}html[data-page="tech"] .tech-gap-8{gap:8px}html[data-page="tech"] .tech-actions-row{grid-area:actions}html[data-page="tech"] .tech-failed-list{margin:6px 0 0 18px;padding:0}html[data-page="tech"] .tech-log-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:4px}

/* source: index.html */
/* ========= Base tokens ========= */
        html[data-page="index"]{
            --bg:#0b1220; --card:#0f172a; --fg:#e5e7eb; --muted:#94a3b8; --border:#1f2937; --border-2:#182335;
            --btn:#1f2937; --btnb:#334155; --accent:#13c98a; --danger:#ef4444; --warn:#f59e0b; --ring:rgba(19,201,138,0.35);
            --header-h: 52px;
        }html[data-page="index"] *{box-sizing:border-box}html[data-page="index"], html[data-page="index"] body{height:100%}html[data-page="index"] body{
            margin:0;
            background:var(--bg);
            color:var(--fg);
            font:14px system-ui,Segoe UI,Roboto,sans-serif;
            font-family:'Inter',sans-serif;
        }html[data-page="index"] .text-accent{ color: var(--accent); }html[data-page="index"] .bg-card{ background-color: var(--card); }html[data-page="index"] .border-base{ border-color: var(--border); }html[data-page="index"] .border-accent{ border-color: var(--accent); }html[data-page="index"] .hover-accent-bg:hover{ background-color: #13c98a22; }html[data-page="index"] .text-muted{ color: var(--muted); }html[data-page="index"] /* ========= Header (Fixed padding for phone safe areas) ========= */
        header{
            width:100%;
            display:flex;
            gap:10px;
            justify-content:center;
            align-items:center;
            padding:calc(10px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left));
            background:#0f172a;
            border-bottom:1px solid var(--border);
            position:sticky;
            top:0;
            z-index:30;
        }html[data-page="index"] header h1{margin:0;font-size:18px}html[data-page="index"] .header-wrap{
            max-width:1100px;
            margin:0 auto;
            width:100%;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            padding:0 12px;
        }html[data-page="index"] .marketing-menu{
            position:relative;
        }html[data-page="index"] .marketing-menu-button{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            min-height:40px;
            padding:8px 12px;
            background:#111c2e;
            border:1px solid var(--btnb);
            border-radius:8px;
            color:var(--fg);
            font-weight:700;
        }html[data-page="index"] .marketing-menu-button svg{
            width:20px;
            height:20px;
        }html[data-page="index"] .marketing-menu-panel{
            position:absolute;
            top:calc(100% + 10px);
            right:0;
            z-index:80;
            display:grid;
            width:min(310px, calc(100vw - 24px));
            padding:8px;
            border:1px solid var(--border);
            border-radius:10px;
            background:#0f172a;
            box-shadow:0 16px 40px rgba(0,0,0,.48);
        }html[data-page="index"] .marketing-menu-panel.hidden{
            display:none !important;
        }html[data-page="index"] .marketing-menu-panel a,
        html[data-page="index"] .marketing-menu-panel button{
            display:flex;
            align-items:center;
            justify-content:space-between;
            width:100%;
            min-height:42px;
            padding:9px 11px;
            border:0;
            border-radius:7px;
            background:transparent;
            color:var(--fg);
            font-size:14px;
            font-weight:650;
            text-align:left;
            text-decoration:underline;
            text-decoration-thickness:1px;
            text-underline-offset:3px;
        }html[data-page="index"] .marketing-menu-panel a:hover,
        html[data-page="index"] .marketing-menu-panel button:not(:disabled):hover{
            background:#17243a;
            color:#fff;
        }html[data-page="index"] .marketing-menu-panel button:disabled{
            cursor:default;
            color:var(--muted);
            opacity:.8;
        }html[data-page="index"] .marketing-menu-panel button span{
            padding:2px 7px;
            border:1px solid #314158;
            border-radius:999px;
            color:var(--muted);
            font-size:11px;
            font-weight:700;
        }html[data-page="index"] .marketing-menu-panel .marketing-menu-signin{
            margin-top:6px;
            padding-top:12px;
            border-top:1px solid var(--border);
            border-radius:0 0 7px 7px;
            color:var(--accent);
        }html[data-page="index"] .row{display:flex;gap:8px;align-items:center}html[data-page="index"] a.buttonlike{display:inline-block}html[data-page="index"] /* Form element styles apply globally, html[data-page="index"] for both modal forms */
        input, html[data-page="index"] select, html[data-page="index"] textarea{
            background:#0b1220;
            color:var(--fg);
            border:1px solid var(--border);
            border-radius:10px;
            padding:10px 12px; /* Adjusted padding slightly for better input feel */
            margin-bottom: 5px; 
            font-size: 1rem;
            width: 100%; /* Ensure inputs in modals are full width */
        }html[data-page="index"] button{
            background:var(--btn);
            color:var(--fg);
            border:1px solid var(--btnb);
            padding:8px 12px;
            border-radius:10px;
            cursor:pointer;
        }html[data-page="index"] button:hover{background:#243041}html[data-page="index"] button.ghost{background:transparent}@media (min-width:1120px){html[data-page="index"] header{justify-content:center}html[data-page="index"] header > *{max-width:1100px;width:100%}}html[data-page="index"] .wrap{max-width:1100px;margin:10px auto;padding:0 12px}html[data-page="index"] .panel{background:var(--card);border:1.5px solid var(--border);border-radius:12px}html[data-page="index"] /* Primary CTA (Unchanged) */
        .cta-accent{
            background-color:var(--accent);
            color:var(--bg);
            font-weight:700;
            box-shadow:0 4px 14px rgba(19,201,138,0.4);
            transition:transform 0.2s,box-shadow 0.2s,background-color 0.2s;
        }html[data-page="index"] .cta-accent:hover{
            background-color:#11b37b;
            transform:translateY(-1px);
            box-shadow:0 6px 20px rgba(19,201,138,0.6);
        }html[data-page="index"] .icon-box{
            background-color:#13c98a22;
            border:1px solid var(--accent);
        }html[data-page="index"] .pricing-card{
            min-height:0;
            display:flex;
            flex-direction:column;
        }html[data-page="index"] .pricing-card > button{
            margin-top:auto;
        }html[data-page="index"] .pricing-highlight{
            border:2px solid var(--accent);
            background-color:#13c98a11;
            position: relative; 
        }html[data-page="index"] /* Styling for the Coming Soon card to dim it (Unchanged) */
        .coming-soon-card{
            opacity: 0.6;
            pointer-events: none;
            position: relative;
        }html[data-page="index"] .coming-soon-card .badge-coming-soon{
            position: absolute;
            top: -10px;
            right: -10px;
            background-color: var(--warn);
            color: var(--bg);
            padding: 4px 12px;
            font-size: 14px;
            font-weight: 800;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(245, 158, 11, 0.6);
            transform: rotate(3deg);
            z-index: 10;
        }html[data-page="index"] /* Styling for the Calculator form (used in the modal) */
        #modal-quote-calculator{
            padding-top: 20px;
            border-top: 1px solid var(--border);
            margin-top: 15px;
        }html[data-page="index"] /* Adjusted CSS for better spacing and stacking in the modal forms */
        .modal-content label{
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            color: var(--fg);
            font-size: 0.9rem;
        }html[data-page="index"] .quote-total{
            background-color: var(--bg);
            border: 2px dashed var(--accent);
            padding: 12px;
            border-radius: 8px;
            text-align: center;
            margin-bottom: 20px;
        }html[data-page="index"] .quote-total p{
            margin: 0;
            font-size: 1.2rem;
            color: var(--muted);
        }html[data-page="index"] .quote-total span{
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--accent);
            display: block;
        }html[data-page="index"] /* Style for the ROI table (Unchanged) */
        .roi-table{
            width: 100%;
            border-collapse: collapse;
            text-align: left;
        }html[data-page="index"] .roi-table th, html[data-page="index"] .roi-table td{
            padding: 10px 0;
            border-bottom: 1px solid var(--border);
        }html[data-page="index"] .roi-table th{
            font-weight: 600;
            color: var(--muted);
            font-size: 0.9rem;
        }html[data-page="index"] .roi-table tr:last-child td{
            border-bottom: none;
        }html[data-page="index"] .roi-highlight{
            font-weight: 700;
            color: var(--accent);
            font-size: 1.25rem;
        }html[data-page="index"] /* Modal Styles */
        html[data-page="index"] .modal{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 2147483100;
            /* Added for smooth fade in/out */
            transition: opacity 0.3s ease;
        }html[data-page="index"] .modal.hidden{
            display:none !important;
        }html[data-page="index"] body.landing-dialog-open{
            overflow:hidden;
        }html[data-page="index"] .modal-content{
            background-color: var(--card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 30px;
            width: 90%;
            max-width: 500px;
            position: relative;
            box-shadow: 0 10px 25px rgba(0,0,0,0.5);
            animation: slide-in 0.3s ease-out;
            
            /* ADDED: Allow scrolling when content exceeds screen height */
            max-height: 90vh; 
            overflow-y: auto;
            -webkit-overflow-scrolling: touch; 
        }html[data-page="index"] .modal-content.dialog-anchored{
            position:fixed;
            margin:0;
        }@media (max-width:899px){
            html[data-page="index"] .modal{
                inset:0;
                width:100%;
                height:100vh;
                height:100dvh;
                padding:max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
                align-items:center;
                overflow:hidden;
            }
            html[data-page="index"] .modal-content,
            html[data-page="index"] .modal-content.dialog-anchored{
                position:relative !important;
                top:auto !important;
                left:auto !important;
                transform:none !important;
                width:100%;
                max-width:500px;
                max-height:calc(100vh - 24px);
                max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
                margin:0 !important;
                padding:24px 20px;
                overflow-y:auto;
                overscroll-behavior:contain;
            }
            html[data-page="index"] #roi-modal .modal-content{
                max-width:700px;
            }
        }html[data-page="index"] /* Increase size for the ROI modal content */
        #roi-modal .modal-content{
            max-width: 700px;
        }html[data-page="index"] .close-button{
            position: absolute;
            top: 15px;
            right: 15px;
            background: none;
            border: none;
            font-size: 1.5rem;
            color: var(--muted);
            cursor: pointer;
            transition: color 0.2s;
        }html[data-page="index"] .close-button:hover{
            color: var(--fg);
        }html[data-page="index"] .landing-dialog{
            position:fixed;
            inset:0;
            width:min(500px, calc(100vw - 24px));
            height:fit-content;
            max-width:none;
            max-height:calc(100vh - 24px);
            max-height:calc(100dvh - 24px);
            margin:auto;
            padding:0;
            border:0;
            border-radius:12px;
            background:transparent;
            color:var(--fg);
            overflow:visible;
        }html[data-page="index"] .landing-dialog-wide{
            width:min(700px, calc(100vw - 24px));
        }html[data-page="index"] .landing-dialog::backdrop{
            background:rgba(0,0,0,.8);
        }html[data-page="index"] .landing-dialog-content{
            position:relative;
            width:100%;
            max-height:calc(100vh - 24px);
            max-height:calc(100dvh - 24px);
            padding:24px 20px;
            border:1px solid var(--border);
            border-radius:12px;
            background:var(--card);
            box-shadow:0 10px 25px rgba(0,0,0,.5);
            overflow-y:auto;
            overscroll-behavior:contain;
            -webkit-overflow-scrolling:touch;
            animation:slide-in .25s ease-out;
        }html[data-page="index"] .landing-dialog-content label{
            display:block;
            margin-bottom:5px;
            color:var(--fg);
            font-size:.9rem;
            font-weight:600;
        }@keyframes slide-in{
            from { transform: translateY(-50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }html[data-page="index"] /* Success Message Style */
        .alert-success{
            background-color: #13c98a22;
            border: 1px solid var(--accent);
            color: var(--accent);
            padding: 15px;
            border-radius: 8px;
            font-weight: 600;
            text-align: center;
        }html[data-page="index"] /* Error Message Style */
        .alert-error{
            background-color: #ef444422;
            border: 1px solid var(--danger);
            color: var(--danger);
            padding: 15px;
            border-radius: 8px;
            font-weight: 600;
            text-align: center;
        }

/* source: admin.html */
html[data-page="admin"] /* Ensure hidden truly hides even if other rules try to display */
[hidden]{ display: none !important; }/* ========= Base tokens ========= */
html[data-page="admin"]{
  --bg:#0b1220; --card:#0f172a; --fg:#e5e7eb; --muted:#94a3b8; --border:#1f2937; --border-2:#182335;
  --btn:#1f2937; --btnb:#334155; --accent:#13c98a; --danger:#ef4444; --warn:#f59e0b; --ring:rgba(19,201,138,.35);
  /* Dynamic header height for stacking sticky bars safely */
  --header-h: 52px; /* JS updates this live */
}html[data-page="admin"] *{box-sizing:border-box}html[data-page="admin"], html[data-page="admin"] body{height:100%; overflow: hidden;}html[data-page="admin"] body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:14px system-ui,Segoe UI,Roboto,sans-serif;
  /* NEW: Add padding to account for the fixed header (var(--header-h)) PLUS the OS safe area */
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
}html[data-page="admin"] /* ========= Header ========= */
header{
  width:100%;
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:center;
  position:fixed;
  top:0;
  left:0;
  /* UPDATED: Increase height to include the OS safe area */
  height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  background:var(--card);
  border-bottom:1px solid var(--border);
  /* UPDATED: Push the content (back button, profile pic) down by the safe area amount */
  padding: env(safe-area-inset-top, 0px) 10px 0 10px;
  z-index:900;
}html[data-page="admin"] header h1{margin:0;font-size:18px}html[data-page="admin"] .header-wrap{
  max-width:1100px;
  margin:0 auto;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 12px;
}html[data-page="admin"] .row{display:flex;gap:8px;align-items:center}html[data-page="admin"] a.buttonlike{display:inline-block}html[data-page="admin"] input, html[data-page="admin"] select{background:#0b1220;color:var(--fg);border:1px solid var(--border);border-radius:10px;padding:8px 10px}html[data-page="admin"] button{background:var(--btn);color:var(--fg);border:1px solid var(--btnb);padding:8px 12px;border-radius:10px;cursor:pointer}html[data-page="admin"] button:hover{background:#243041}html[data-page="admin"] button.ghost{background:transparent}@media (min-width:1120px){html[data-page="admin"] header{justify-content:center}html[data-page="admin"] header > *{max-width:1100px; width:100%}}html[data-page="admin"] /* MOBILE HEADER LAYOUT */
@media (max-width:680px){
  header{
    padding:8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  }
  header h1{
    font-size:16px;
    line-height:1.2;
  }
  .header-wrap{
    padding:0 8px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }

  /* hide desktop buttons + desktop logout */
  .nav-actions{ display:none !important; }
  #btnLogout{ display:none !important; }

  .admin-menu-wrap{
    display:block;
    margin-left:auto;
    align-self:center;
  }

  header button{
    padding:8px 10px;
    border-radius:10px;
    font-size:13px;
  }
}@media (max-width:420px){html[data-page="admin"] header .row{gap:6px}html[data-page="admin"] header button{padding:7px 9px; font-size:12.5px}}html[data-page="admin"] /* ========= Toolbars & panel chrome ========= */
/* 3. Reset the Toolbar (no longer needs sticky, it sits in the flex stack) */
.toolbar{
  flex: 0 0 auto;       /* Do not grow or shrink */
  position: relative;   /* Remove 'sticky' */
  top: 0;
  z-index: 30;
  border-bottom: none;  /* Optional: looks cleaner if pager has the border */
}html[data-page="admin"] border-bottom:1px solid var(--border)}
.toolbar-wrap{max-width:1100px; margin:0 auto; padding:8px 12px; display:grid; gap:8px}html[data-page="admin"] .trow{display:grid; grid-template-columns: 1fr auto auto; gap:8px; align-items:center}html[data-page="admin"] .tcontrols{
  display:flex; gap:8px 8px; flex-wrap:wrap; align-items:center;
}html[data-page="admin"] .tcontrols input#q{
  flex:1 1 320px;
  min-width:min(320px, 100%);
  max-width:100%;
}html[data-page="admin"] .seg{display:flex; border:1px solid var(--border); border-radius:10px; overflow:hidden; flex:0 0 auto}html[data-page="admin"] .seg button{border:0;background:#0b1220;padding:8px 10px; white-space:nowrap}html[data-page="admin"] .seg button.active{background:#172033}html[data-page="admin"] /* 5. Make the Content Area Scrollable */
.wrap{
  flex: 1 1 auto;       /* Grow to fill all remaining vertical space */
  overflow-y: auto;     /* Internal scrollbar appears here */
  width: 100%;
  max-width: 100%;      /* Use full width */
  margin: 0;            /* Remove margins that cause gaps */
  padding: 12px;        /* Add padding inside the scroll area */
  
  /* Smooth scrolling */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; 
}html[data-page="admin"] /* 6. Fix the Panel to allow sticky table headers to work inside .wrap */
.panel{
  height: auto;         /* Let panel grow with content */
  min-height: 100%;     /* Ensure it fills visual space */
  overflow: visible;    /* Allow sticky th to stick to the .wrap container */
}html[data-page="admin"] .panel{background:var(--card);border:1.5px solid var(--border);border-radius:12px}html[data-page="admin"] .panel > .head{padding:10px;border-bottom:1.5px solid var(--border-2);display:flex;align-items:center;justify-content:space-between}html[data-page="admin"] .panel > .body{padding:10px}html[data-page="admin"] .controls-bar{display:flex; gap:8px; align-items:center; justify-content:flex-end; flex-wrap:wrap;}html[data-page="admin"] /* 4. Fix the Pager Bar (Arrows) - Right Aligned and Full Width */
/* 4. Fix the Pager Bar (Arrows) - Right Aligned, html[data-page="admin"] Full Width, html[data-page="admin"] Fixed */
.pager-bar{
  flex: 0 0 auto;
  width: 100%; /* CRITICAL: Must be 100% to span the screen */
  display: flex;
  justify-content: flex-end; /* PUSHES CONTENT TO THE RIGHT EDGE */
  align-items: center;
  
  background: var(--card); 
  z-index: 29;
  border-bottom: 1px solid var(--border);
  padding: 8px 12px; /* Good padding for mobile safety */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}html[data-page="admin"] /* NEW: Export dropdown next to pageSize */
  .export-menu-wrap{
    position:relative;
    flex:0 0 auto;
  }html[data-page="admin"] .export-menu-toggle{
    white-space:nowrap;
  }html[data-page="admin"] .export-menu{
    position:absolute;
    right:0;
    top:calc(100% + 4px);
    min-width:210px;
    background:#0f172a;
    border:1px solid var(--border);
    border-radius:10px;
    box-shadow:0 12px 28px rgba(0,0,0,.55);
    padding:6px;
    display:flex;
    flex-direction:column;
    gap:4px;
    z-index:999;
  }html[data-page="admin"] .export-menu[hidden]{
    display:none !important;
  }html[data-page="admin"] .export-menu button{
    width:100%;
    justify-content:flex-start;
    text-align:left;
    padding:7px 9px;
    background:#0b1220;
    border:1px solid var(--border);
    border-radius:8px;
    font-size:13px;
  }html[data-page="admin"] .export-menu button:hover{
    background:#0e1523;
  }@media (max-width:700px){html[data-page="admin"] .trow{
    grid-template-columns: 1fr;
  }html[data-page="admin"] /* Keep search/sort segment full-width */
  .seg{
    width:100%;
  }html[data-page="admin"] .seg button{
    flex:1;
  }html[data-page="admin"] /* Pager can still spread out */
  .pager-bar{
    justify-content:space-between;
  }html[data-page="admin"] /* NEW: keep pageSize + Export on one row */
  .controls-bar{
    flex-direction:row;          /* row, not column */
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    flex-wrap:nowrap;
  }html[data-page="admin"] /* Children should not be forced full-width */
  .controls-bar > *{
    width:auto;
  }html[data-page="admin"] /* Let page size shrink so Export fits next to it */
  #pageSize{
    flex:1 1 auto;
    min-width:0;
    max-width:65%;
  }html[data-page="admin"] /* Export dropdown stays compact on the right */
  .export-menu-wrap{
    flex:0 0 auto;
    width:auto;
  }}@media (max-width:700px){html[data-page="admin"] .trow{ grid-template-columns: 1fr; }html[data-page="admin"] .controls-bar{ justify-content:stretch; flex-direction:column; align-items:stretch; }html[data-page="admin"] .controls-bar > *{ width:100%; }html[data-page="admin"] .seg{ width:100%; }html[data-page="admin"] .seg button{ flex:1; }html[data-page="admin"] .pager-bar{ justify-content:space-between; }}html[data-page="admin"] /* FINAL mobile layout override for page size + Export */
@media (max-width:700px){
  .controls-bar{
    flex-direction:row;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:nowrap;
    gap:6px;
  }

  /* Don’t force children full-width */
  .controls-bar > *{
    width:auto;
  }

  /* Page size shrinks but can grow if there is room */
  #pageSize{
    flex:1 1 auto;
    min-width:0;
    max-width:65%;
  }

  /* Export stays as a compact item on the same row */
  .export-menu-wrap{
    display:flex;
    flex:0 0 auto;
    width:auto !important;   /* override previous 100% */
  }
}html[data-page="admin"] /* ========= Cards ========= */
.cards{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:12px}@media (max-width:1024px){html[data-page="admin"] .cards{grid-template-columns:1fr}}html[data-page="admin"] .card-item{border:1.5px solid var(--border);border-radius:12px;overflow:hidden;background:#0e1523;transition: box-shadow .18s, border-color .18s}html[data-page="admin"] .card-item:hover{border-color:#2a3b54;box-shadow: 0 0 0 2px rgba(41,115,255,.06) inset, 0 12px 28px rgba(0,0,0,.35)}html[data-page="admin"] .card-top{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px;border-bottom:1px solid var(--border-2)}html[data-page="admin"] .thumb{width:56px;height:56px;border-radius:10px;background:#0b1220;border:1px solid #1f2937;object-fit:cover}html[data-page="admin"] .title{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}html[data-page="admin"] .meta{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}html[data-page="admin"] .pill{font-size:12px;padding:6px 12px;border-radius:999px;border:2px solid #31445c;color:#cbd5e1;white-space:nowrap}html[data-page="admin"] .pill.ok{border-color:#1b3e2b;color:#b3f2c4}html[data-page="admin"] .pill.warn{border-color:#5c4231;color:#fdd9b3}html[data-page="admin"] .pill.bad{border-color:#5c3131;color:#f5b5b5}html[data-page="admin"] .asset-status-ok .thumb, html[data-page="admin"] .asset-status-ok .row-thumb{box-shadow:0 0 10px rgba(34,197,94,.34)}html[data-page="admin"] .asset-status-warn .thumb, html[data-page="admin"] .asset-status-warn .row-thumb{box-shadow:0 0 10px rgba(245,158,11,.34)}html[data-page="admin"] .asset-status-bad .thumb, html[data-page="admin"] .asset-status-bad .row-thumb{box-shadow:0 0 12px rgba(239,68,68,.42)}html[data-page="admin"] .card-body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:10px}html[data-page="admin"] .kv{background:#0b1220;border:1.5px solid var(--border);border-radius:10px;padding:8px 10px}html[data-page="admin"] .label{color:var(--muted);font-size:12px}html[data-page="admin"] .value{margin-top:2px;font-weight:700}html[data-page="admin"] /* ========= Table (desktop defaults) ========= */
.table-wrap{
  border:1.5px solid var(--border);
  border-radius:12px;
  overflow-x:auto;
  padding:0;            /* remove any internal padding */
  margin:0;
  width:100%;
  max-width:100%;       /* prevent forced shrinking */
}html[data-page="admin"] table{width:100%;border-collapse:separate;border-spacing:0;background:#0e1523; table-layout:auto;}html[data-page="admin"] thead th{background:#0f172a;color:#cbd5e1;position:sticky;top:0;z-index:10;cursor:pointer;border-bottom:1.5px solid var(--border-2)}html[data-page="admin"] th, html[data-page="admin"] td{padding:10px;text-align:left; vertical-align:middle;}html[data-page="admin"] tbody tr{border-bottom:1px solid var(--border-2)}html[data-page="admin"] tbody tr:nth-child(odd){background:#0e1626}html[data-page="admin"] tbody tr:hover{outline:2px solid #2a3b54; outline-offset:-2px}html[data-page="admin"] .nowrap{white-space:nowrap}html[data-page="admin"] .big-pill{font-size:13px;padding:6px 12px;border-radius:999px;border:2px solid #31445c}html[data-page="admin"] .big-pill.ok{border-color:#1b3e2b;color:#b3f2c4}html[data-page="admin"] .big-pill.warn{border-color:#5c4231;color:#fdd9b3}html[data-page="admin"] .big-pill.bad{border-color:#5c3131;color:#f5b5b5}html[data-page="admin"] /* New: thumbnail in table rows */
html[data-page="admin"] .col-photo{ width:44px; }html[data-page="admin"] .row-thumb{
  width:32px;
  height:32px;
  border-radius:8px;
  object-fit:cover;
  border:1px solid var(--border);
  background:#0b1220;
}html[data-page="admin"] /* Optional min-width hints for desktop */
table th[data-k="name"], html[data-page="admin"] table td.col-name{
  min-width: 220px;
}html[data-page="admin"] table th[data-k="type"], html[data-page="admin"] table td.col-type{
  min-width: 140px;
}html[data-page="admin"] table th[data-k="last_inspection_date"], html[data-page="admin"] table th[data-k="last_service_date"], html[data-page="admin"] table td.col-insp, html[data-page="admin"] table td.col-serv{
  min-width: 160px;
}html[data-page="admin"] tbody tr.asset-status-bad{
  background:rgba(127,29,29,.26);
}html[data-page="admin"] tbody tr.asset-status-bad td{
  background:rgba(127,29,29,.26);
}html[data-page="admin"] tbody tr.asset-status-bad:nth-child(odd){
  background:rgba(127,29,29,.34);
}html[data-page="admin"] tbody tr.asset-status-bad:nth-child(odd) td{
  background:rgba(127,29,29,.34);
}html[data-page="admin"] tbody tr.asset-status-bad:hover{
  outline-color:rgba(248,113,113,.7);
}html[data-page="admin"] table th[data-k="status"], html[data-page="admin"] table td.col-status{
  min-width: 82px;
}html[data-page="admin"] /* Keep pill text on a single line */
html[data-page="admin"] .big-pill{
  font-size:13px;
  padding:6px 12px;
  border-radius:999px;
  border:2px solid #31445c;
  white-space:nowrap;
}html[data-page="admin"] /* ========= MOBILE TABLE ========= */
@media (max-width:700px){
  html[data-page="admin"] .wrap{
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    margin-top:0 !important;
    padding:0 !important;
  }
  html[data-page="admin"] .panel{
    border-left:0 !important;
    border-right:0 !important;
    border-radius:0 !important;
  }
  html[data-page="admin"] .panel > .head{
    padding:5px 8px !important;
  }
  html[data-page="admin"] .panel > .body,
  html[data-page="admin"] #resultsBody{
    padding:2px 0 0 !important;
  }
  html[data-page="admin"] .table-wrap{
    border-left:0 !important;
    border-right:0 !important;
    border-radius:0 !important;
  }
  html[data-page="admin"] .table-wrap{ overflow-x:auto !important; }
  html[data-page="admin"] table{ width:max-content; min-width:760px; table-layout:auto !important; }
  html[data-page="admin"] th, html[data-page="admin"] td{ padding:7px 8px; }
  html[data-page="admin"] th.col-id, html[data-page="admin"] td.col-id{ display:none !important; }
  html[data-page="admin"] th.col-photo, html[data-page="admin"] td.col-photo{ width:54px !important; }
  html[data-page="admin"] .row-thumb{ width:40px; height:40px; }
  html[data-page="admin"] .big-pill{
    display:inline-block;
    padding:3px 8px !important;
    font-size:11.5px !important;
    line-height:1.05 !important;
    border-width:2px;
  }
}
@media (max-width:360px){
  html[data-page="admin"] .big-pill{
    padding:2px 7px !important;
    font-size:11px !important;
  }
}html[data-page="admin"] /* ========= Overlay ========= */
.overlay{position:fixed; inset:0; display:none; z-index:1000;}html[data-page="admin"] .overlay.open{display:block}html[data-page="admin"] .backdrop{position:absolute; inset:0; background:rgba(0,0,0,.55)}html[data-page="admin"] .sheet{position:absolute; top:0; right:0; height:100%; width:min(680px, 96vw); background:#0f172a; border-left:1px solid var(--border); box-shadow:-20px 0 40px rgba(0,0,0,.45); transform:translateX(100%); transition:transform .22s ease; display:flex; flex-direction:column}html[data-page="admin"] .overlay.open .sheet{transform:translateX(0)}@media (max-width:900px){html[data-page="admin"] .sheet{left:0; right:0; width:100vw; height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); top:auto; bottom:0; border-left:none; border-top:1px solid var(--border); border-top-left-radius:14px; border-top-right-radius:14px; transform:translateY(110%)}html[data-page="admin"] .overlay.open .sheet{transform:translateY(0)}}html[data-page="admin"] .sheet-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px; border-bottom:1px solid var(--border-2)}html[data-page="admin"] .sheet-id{display:flex; gap:10px; align-items:center}html[data-page="admin"] .tabs{display:flex; gap:8px; border-bottom:1px solid var(--border-2); padding:8px 12px}html[data-page="admin"] .tabs button{background:transparent;border:1px solid #223246;color:var(--fg);padding:8px 12px;border-radius:10px}html[data-page="admin"] .tabs button.active{border-color:#205443; background:#0d1b22}html[data-page="admin"] .sheet-body{padding:12px; overflow:auto; flex:1}html[data-page="admin"] .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}@media (max-width:1000px){html[data-page="admin"] .grid3{grid-template-columns:1fr}}html[data-page="admin"] .ph-grid{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:10px}@media (max-width:1000px){html[data-page="admin"] .ph-grid{grid-template-columns:repeat(2, minmax(0,1fr))}}html[data-page="admin"] .ph{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#0b1220}html[data-page="admin"] .ph img{width:100%;height:140px;object-fit:cover;display:block}html[data-page="admin"] .ph .ph-meta{padding:6px 8px;color:var(--muted);font-size:12px}html[data-page="admin"] /* ========= Logs list ========= */
.logs-topbar{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:8px}html[data-page="admin"] .logs-list{display:grid;gap:8px}html[data-page="admin"] .log-card{border:1px solid var(--border); border-radius:10px; padding:10px; background:#0b1220; cursor:pointer;}html[data-page="admin"] .log-head{display:flex;align-items:center;justify-content:space-between;gap:8px}html[data-page="admin"] .log-when{color:var(--muted);font-size:12px}html[data-page="admin"] .badge{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid #31445c}html[data-page="admin"] .badge.ok{border-color:#1b3e2b;color:#b3f2c4}html[data-page="admin"] .badge.bad{border-color:#5c3131;color:#f5b5b5}html[data-page="admin"] .badge.warn{border-color:#5c4231;color:#fdd9b3}html[data-page="admin"] .log-notes{margin-top:6px;color:#cbd5e1;white-space:pre-wrap}html[data-page="admin"] .logs-pager{
  display:flex;
  gap:6px;
  align-items:right;
  margin-top:0;
  margin-right:auto;
  flex-shrink:0;
}html[data-page="admin"] .logs-pager button{
  padding:4px 8px;
  font-size:12px;
  border-radius:8px;
}html[data-page="admin"] .logs-pager .meta{
  font-size:11px;
}html[data-page="admin"] /* Extra safety on very narrow screens */
@media (max-width:480px){
  .logs-topbar .row{
    flex-wrap:wrap;
  }
  .logs-pager{
    margin-left:0;
    margin-top:4px;
  }
}html[data-page="admin"] .push-right{margin-left:auto}html[data-page="admin"] /* === Mobile nav (hamburger visuals) === */
.icon-btn{
  background:var(--btn);
  border:1px solid var(--btnb);
  color:var(--fg);
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}html[data-page="admin"] .icon-btn:hover{ background:#243041; }html[data-page="admin"] .hamburger{ display:block; width:20px; height:14px; position:relative; }html[data-page="admin"] .hamburger::before, html[data-page="admin"] .hamburger::after, html[data-page="admin"] .hamburger span{
  content:""; display:block; height:2px; width:100%; background:var(--fg);
  position:absolute; left:0; border-radius:1px;
}html[data-page="admin"] .hamburger::before{ top:0; }html[data-page="admin"] .hamburger::after{ bottom:0; }html[data-page="admin"] .hamburger span{ top:6px; }html[data-page="admin"] /* --- Compact Admin Menu (mobile) --- */
.admin-menu-wrap{ position:relative; display:none; }html[data-page="admin"] .admin-menu-btn{
  background:var(--btn); color:var(--fg); border:1px solid var(--btnb);
  border-radius:10px; padding:8px 12px; cursor:pointer; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center;
}html[data-page="admin"] .admin-menu-btn:hover{ background:#243041; }html[data-page="admin"] .admin-menu-dropdown{
  position:absolute; top:calc(100% + 4px); right:0;
  background:#0f172a;
  border:1px solid var(--border); border-radius:10px; box-shadow:0 4px 16px rgba(0,0,0,.4);
  display:flex; flex-direction:column; gap:4px; padding:6px; z-index:900; width:max-content; min-width:180px;
}html[data-page="admin"] .admin-menu-dropdown a, html[data-page="admin"] .admin-menu-dropdown button{
  background:#0b1220; color:var(--fg); border:1px solid var(--border);
  border-radius:8px; padding:8px 10px; text-align:left; text-decoration:none; font-size:14px; white-space:nowrap;
}html[data-page="admin"] .admin-menu-dropdown a:hover, html[data-page="admin"] .admin-menu-dropdown button:hover{ background:#0e1523; }@media (max-width:680px){html[data-page="admin"] .nav-actions{ display:none; }html[data-page="admin"] .admin-menu-wrap{ display:block; align-self:center; }}html[data-page="admin"] .admin-controls-span{grid-column:1 / -1}html[data-page="admin"] .admin-page-size{min-width:160px}html[data-page="admin"] .admin-pager-meta{display:flex;align-items:center;gap:12px;font-weight:600;flex-shrink:0}html[data-page="admin"] .admin-page-indicator{color:var(--fg);white-space:nowrap}html[data-page="admin"] .admin-page-label{color:var(--muted)}html[data-page="admin"] .admin-log-meta{margin-top:4px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* source: tools/new_admin.html */
html[data-page="tools-new_admin"]{
      --bg:#0b1220; --card:#0f172a; --fg:#e5e7eb; --muted:#94a3b8;
      --border:#1f2937; --btn:#1f2937; --btnb:#334155;
      --ok:#86efac; --err:#fca5a5;
    }html[data-page="tools-new_admin"] *{box-sizing:border-box}html[data-page="tools-new_admin"] body{
      margin:0;
      font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      background:var(--bg); color:var(--fg);
    }html[data-page="tools-new_admin"] .wrap{max-width:720px;margin:28px auto;padding:0 12px}html[data-page="tools-new_admin"] .card{
      background:var(--card);
      border:1px solid var(--border);
      border-radius:14px;
      padding:18px;
    }html[data-page="tools-new_admin"] h1{font-size:18px;margin:0 0 12px}html[data-page="tools-new_admin"] label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}html[data-page="tools-new_admin"] input, html[data-page="tools-new_admin"] select{
      width:100%;
      padding:10px 12px;
      border-radius:10px;
      border:1px solid var(--border);
      background:#0b1220;
      color:var(--fg);
    }html[data-page="tools-new_admin"] input:focus, html[data-page="tools-new_admin"] select:focus{outline:2px solid #22c55e;outline-offset:2px}html[data-page="tools-new_admin"] .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}html[data-page="tools-new_admin"] .mt{margin-top:12px}html[data-page="tools-new_admin"] button{
      background:var(--btn);
      color:var(--fg);
      border:1px solid var(--btnb);
      padding:10px 14px;
      border-radius:10px;
      cursor:pointer;
    }html[data-page="tools-new_admin"] button:hover{background:#243041}html[data-page="tools-new_admin"] .msg{margin-top:12px;font-size:13px}html[data-page="tools-new_admin"] .ok{color:var(--ok)}html[data-page="tools-new_admin"] .err{color:var(--err)}html[data-page="tools-new_admin"] .hint{color:var(--muted);font-size:12px;margin-top:8px}

/* ============================================================
   Page scope: html[data-page="tools-new_form"]
   ============================================================ */

html[data-page="tools-new_form"]{
  --bg:#0b1220;
  --card:#0f172a;
  --fg:#e5e7eb;
  --muted:#94a3b8;
  --border:#1f2937;
  --border-2:#182335;
  --btn:#1f2937;
  --btnb:#334155;
  --focus:0 0 0 3px rgba(19,201,138,.17);
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --r:12px;
  --pad:12px;
}

html[data-page="tools-new_form"] *,
html[data-page="tools-new_form"] *::before,
html[data-page="tools-new_form"] *::after{ box-sizing:border-box; }

html[data-page="tools-new_form"],
html[data-page="tools-new_form"] body{
  height:100%;
  margin:0;
  overflow-x:hidden;
}

html[data-page="tools-new_form"] body{
  background:var(--bg);
  color:var(--fg);
  font:14px system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial;
  overflow-y:auto;
}

html[data-page="tools-new_form"] a{ color:inherit; text-decoration:none; }

html[data-page="tools-new_form"] .row{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
html[data-page="tools-new_form"] .buttonlike{ display:inline-block; }

html[data-page="tools-new_form"] button{
  background:var(--btn);
  color:var(--fg);
  border:1px solid var(--btnb);
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  width:auto;              /* IMPORTANT: never stretch */
  max-width:100%;
}
html[data-page="tools-new_form"] button:hover{ background:#243041; }
html[data-page="tools-new_form"] button:focus{ outline:none; box-shadow:var(--focus); }
html[data-page="tools-new_form"] button.ghost{ background:transparent; }
html[data-page="tools-new_form"] button.primary{ border-color:#1a4f3e; box-shadow:var(--focus) inset; }
html[data-page="tools-new_form"] button.danger{ border-color:#5c1c20; }
html[data-page="tools-new_form"] button.sm{ padding:6px 10px; border-radius:9px; font-size:12.5px; }

html[data-page="tools-new_form"] input,
html[data-page="tools-new_form"] select,
html[data-page="tools-new_form"] textarea{
  background:#0b1220;
  color:var(--fg);
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 10px;
  min-width:0;
  width:100%;
}
html[data-page="tools-new_form"] input:focus,
html[data-page="tools-new_form"] select:focus,
html[data-page="tools-new_form"] textarea:focus{
  outline:none;
  box-shadow:var(--focus);
  border-color:rgba(19,201,138,.55);
}
html[data-page="tools-new_form"] label{
  display:block;
  margin-bottom:4px;
  color:#cbd5e1;
  font-size:12px;
}
html[data-page="tools-new_form"] .hint{ color:var(--muted); }

html[data-page="tools-new_form"] .u-hidden{ display:none !important; }
html[data-page="tools-new_form"] .u-mt-6{ margin-top:6px; }
html[data-page="tools-new_form"] .u-mt-8{ margin-top:8px; }
html[data-page="tools-new_form"] .u-ml-6{ margin-left:6px; }
html[data-page="tools-new_form"] .new-form-gap-6{ gap:6px; }
html[data-page="tools-new_form"] .u-flex-between{ justify-content:space-between; }

/* ===== Header: flush top, full width, protected hamburger column ===== */
html[data-page="tools-new_form"] header{
  position:sticky;
  top:0;
  z-index:50;
  background:#0f172a;
  border-bottom:1px solid var(--border);
}

html[data-page="tools-new_form"] .header-wrap{
  width:100%;
  padding:10px 12px;        /* smaller edge margin */
  display:grid;
  gap:8px;
}

/* Top row: [title] [Back/Save] [burger] */
html[data-page="tools-new_form"] .header-row.header-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 40px;
  align-items:center;
  column-gap:8px;
}

html[data-page="tools-new_form"] .header-row.header-top h1{
  margin:0;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:16px;
  line-height:1.15;
}

/* Back/Save: never wrap into burger cell, never stretch */
html[data-page="tools-new_form"] .header-actions-primary{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
}
html[data-page="tools-new_form"] .header-actions-primary button{
  padding:6px 10px;
  font-size:12.5px;
  white-space:nowrap;
}
html[data-page="tools-new_form"] #btnSave{
  padding:6px 10px;
  min-width:72px;           /* looks consistent, not huge */
}

/* Burger: fixed cell */
html[data-page="tools-new_form"] .header-menu{
  width:34px;
  height:34px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
}

/* Hamburger tray: in normal flow; opens when body.header-menu-open */
html[data-page="tools-new_form"] .header-actions-row{ display:none; }
html[data-page="tools-new_form"] body.header-menu-open .header-actions-row{ display:block; }

html[data-page="tools-new_form"] .header-actions-overflow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding-top:2px;
}
html[data-page="tools-new_form"] .header-actions-overflow button{
  padding:7px 10px;
  font-size:12.5px;
  border-radius:10px;
  white-space:nowrap;
}

/* ===== Layout ===== */
html[data-page="tools-new_form"] .wrap{
  width:100%;
  padding:12px 12px 40px;
}

html[data-page="tools-new_form"] .grid{
  display:grid;
  gap:10px;
  grid-template-columns:360px 1fr;
}
@media (max-width:1000px){
  html[data-page="tools-new_form"] .grid{ grid-template-columns:1fr; }
}

/* Cards */
html[data-page="tools-new_form"] .card{
  background:var(--card);
  border:1.5px solid var(--border);
  border-radius:var(--r);
  padding:var(--pad);
  box-shadow:var(--shadow);
}
html[data-page="tools-new_form"] .card h2{ margin:0 0 8px; font-size:16px; }

/* Properties */
html[data-page="tools-new_form"] .props-card{ position:relative; }
html[data-page="tools-new_form"] .props-header{
  display:flex;
  align-items:center;
  gap:8px;
}

/* Collapse chevron position */
html[data-page="tools-new_form"] .props-toggle-icon{
  position:absolute;
  top:10px;
  right:10px;
  width:28px;
  height:28px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
}
html[data-page="tools-new_form"] .props-toggle-icon span{
  display:inline-block;
  transition:transform .2s ease;
}
html[data-page="tools-new_form"] body.props-collapsed .props-toggle-icon span{
  transform:rotate(-90deg);
}

/* Collapse: truly tight (no empty space) */
html[data-page="tools-new_form"] body.props-collapsed #propsBody{ display:none; }
html[data-page="tools-new_form"] body.props-collapsed .props-card{ padding-bottom:10px; }

html[data-page="tools-new_form"] .meta-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
html[data-page="tools-new_form"] .meta-grid .full{ grid-column:1/-1; }

@media (max-width:900px){
  html[data-page="tools-new_form"] .meta-grid{ grid-template-columns:1fr; }
}

html[data-page="tools-new_form"] .global-row{
  gap:10px;
  align-items:center;
}
html[data-page="tools-new_form"] .global-row input{
  width:auto;
  margin:0;
}

/* Fields header */
html[data-page="tools-new_form"] .fields-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
html[data-page="tools-new_form"] .fields-header h2{ margin:0; }
html[data-page="tools-new_form"] .fields-hint{ margin:-2px 0 8px; }

/* Field list */
html[data-page="tools-new_form"] .field-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:240px;
  max-height:calc(100vh - 240px);
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
html[data-page="tools-new_form"] .field-row{
  display:grid;
  grid-template-columns:24px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:8px;
  border:1px solid #223246;
  border-radius:10px;
  background:#0b1220;
  cursor:grab;
}
html[data-page="tools-new_form"] .field-row .drag{
  user-select:none;
  font-weight:800;
  text-align:center;
  opacity:.7;
}
html[data-page="tools-new_form"] .field-type{
  font-size:12px;
  color:#9fb1c8;
  margin-left:6px;
}
html[data-page="tools-new_form"] .badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid #31445c;
  white-space:nowrap;
}
html[data-page="tools-new_form"] .badge.bad{
  border-color:#5c3131;
  color:#f5b5b5;
}

/* Inline editor sticky below header */
html[data-page="tools-new_form"] .field-editor{
  position:sticky;
  top:64px;
  z-index:20;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  box-shadow:var(--shadow);
  display:grid;
  gap:10px;
  margin-bottom:10px;
}

html[data-page="tools-new_form"] body.editor-locked{
  overflow-x:hidden;
  overflow-y:auto;
}

/* Toast */
html[data-page="tools-new_form"] .toast{
  position:fixed;
  right:14px;
  bottom:14px;
  background:#0e1523;
  border:1px solid var(--border);
  padding:10px 12px;
  border-radius:10px;
  box-shadow:var(--shadow);
  display:none;
  z-index:60;
}
html[data-page="tools-new_form"] .toast.show{ display:block; }

/* Modal */
html[data-page="tools-new_form"] dialog.new-form-modal{
  width:min(520px,96vw);
  border:1px solid var(--border);
  border-radius:12px;
  padding:0;
  background:var(--card);
  color:var(--fg);
}
html[data-page="tools-new_form"] dialog.new-form-modal::backdrop{ background:rgba(0,0,0,.5); }
html[data-page="tools-new_form"] .new-form-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--border-2);
}
html[data-page="tools-new_form"] .new-form-modal-body{
  padding:12px 14px;
  display:grid;
  gap:8px;
}

/* Extra-tight phones: keep header compact */
@media (max-width:420px){
  html[data-page="tools-new_form"] .header-wrap{ padding:8px 10px; }
  html[data-page="tools-new_form"] .header-row.header-top{
    grid-template-columns:minmax(0,1fr) auto 36px;
    column-gap:6px;
  }
  html[data-page="tools-new_form"] .header-row.header-top h1{ font-size:14px; }
  html[data-page="tools-new_form"] .header-actions-primary button{ padding:5px 8px; font-size:12px; }
  html[data-page="tools-new_form"] #btnSave{ min-width:64px; }
  html[data-page="tools-new_form"] .header-menu{ width:32px; height:32px; }
}

/* ==========================================================================
   tools-new_form: centered, proportional 2-col layout
   ========================================================================== */

html[data-page="tools-new_form"] .nf-wrap{
  width: 100%;
  margin: 0;
  padding: 12px 12px 40px;

  /* Center the builder on big screens without going ultrawide */
  max-width: 1500px;          /* tweak: 1360–1600 depending on taste */
  margin-left: auto;
  margin-right: auto;
}

html[data-page="tools-new_form"] .nf-grid{
  width: 100%;
  display: grid !important;
  gap: 12px;
  align-items: start;

  /*
    Proportional columns:
    - left grows but not too much
    - right grows but not to ultrawide goofy widths
  */
  grid-template-columns:
    minmax(360px, 520px)
    minmax(520px, 820px);

  justify-content: center; /* if max-width makes total smaller than container */
}

/* Stack vertically on narrower screens */
@media (max-width: 1000px){
  html[data-page="tools-new_form"] .nf-wrap{
    max-width: none; /* let it fill on mobile/tablet */
  }
  html[data-page="tools-new_form"] .nf-grid{
    grid-template-columns: 1fr;
    justify-content: stretch;
  }
}

/* =============================================================================
   tools/new_form — sticky header with mobile safe-area handling
   Paste at BOTTOM of /css/styles.css
   ========================================================================== */

html[data-page="tools-new_form"]{
  /* fallback if env() unsupported */
  --nf-safe-top: 0px;
  --nf-header-pad: 12px;
}

/* Ensure no browser-default gap above header */
html[data-page="tools-new_form"] body{
  margin: 0;
}

/* Default: desktop/fullscreen — stick to absolute top */
html[data-page="tools-new_form"] header{
  position: sticky;
  top: 0;                 /* desktop/fullscreen */
  z-index: 60;
  width: 100%;
  margin: 0;
  padding: var(--nf-header-pad);
  background: var(--bg);
}

/* Mobile: respect browser safe-area (URL bar / notch area) */
@media (max-width: 900px){
  html[data-page="tools-new_form"] header{
    /* iOS Safari / modern browsers */
    top: env(safe-area-inset-top, 0px);
    padding-top: calc(var(--nf-header-pad) + env(safe-area-inset-top, 0px));
  }
}

/* Header "card" should match the main UI */
html[data-page="tools-new_form"] header .header-wrap{
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--pad);
  border-radius: var(--r);
  background: var(--card);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow);
}

/* Keep header row spanning */
html[data-page="tools-new_form"] header .header-row{
  width: 100%;
}

/* ---------------------------------------------------------------------------
   Sticky field editor: place it below the header reliably
   We approximate header height; if your header gets taller (hamburger open),
   bump the px values slightly.
   ------------------------------------------------------------------------- */

/* Desktop/fullscreen */
html[data-page="tools-new_form"] .field-editor{
  top: 96px; /* header padding + header card height approximation */
}

/* Mobile: header is effectively taller due to safe-area padding */
@media (max-width: 900px){
  html[data-page="tools-new_form"] .field-editor{
    top: calc(110px + env(safe-area-inset-top, 0px));
  }
}

/* =============================================================================
   tools/new_form — header flush-top + aligned to centered 2-col stage
   Paste at BOTTOM of /css/styles.css
   ========================================================================== */

html[data-page="tools-new_form"]{
  --nf-stage-max: 1500px;  /* match your 2-col centered layout */
  --nf-gutter: 12px;       /* match your wrap padding/gutter */
}

/* Kill global spacing that can create a "gap" above the header */
html[data-page="tools-new_form"],
html[data-page="tools-new_form"] body{
  margin: 0 !important;
  padding: 0 !important;
}

/* If some parent causes horizontal overflow, clamp it */
html[data-page="tools-new_form"] body{
  overflow-x: hidden;
}

/* Full-width sticky header BAR (background), but NO padding here */
html[data-page="tools-new_form"] header{
  position: sticky;
  top: 0 !important;              /* force flush to top */
  z-index: 80;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--bg);          /* full-width bar background */
  box-sizing: border-box;
}

/* Mobile safe-area: add ONLY top padding to the header bar (not horizontal) */
@media (max-width: 900px){
  html[data-page="tools-new_form"] header{
    padding-top: env(safe-area-inset-top, 0px) !important;
  }
}

/* Constrain the HEADER CARD to the same centered "stage" as nf-wrap */
html[data-page="tools-new_form"] header .header-wrap{
  box-sizing: border-box;
  width: 100%;
  max-width: var(--nf-stage-max);
  margin: 0 auto;                 /* center it like your 2-col area */
  padding: var(--nf-gutter);      /* same horizontal gutters as the page */
}

/* Make the header's inner box match the cards (radius, border, shadow) */
html[data-page="tools-new_form"] header .header-wrap > *:first-child{
  /* This targets your first header card element inside header-wrap
     (if header-wrap itself is the card, remove this block and apply to .header-wrap instead) */
  border-radius: var(--r);
}

/* If header-wrap itself is the "card", use this instead of the selector above: */
html[data-page="tools-new_form"] header .header-wrap{
  border-radius: var(--r);
}

/* Optional: if your header card has border/shadow elsewhere and you want it consistent */
html[data-page="tools-new_form"] header .header-wrap{
  background: var(--card);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow);
}

/* Ensure the header contents don’t exceed the stage width */
html[data-page="tools-new_form"] header .header-row{
  width: 100%;
}

/* Keep the 2-col content aligned to the same stage width */
html[data-page="tools-new_form"] .nf-wrap{
  max-width: var(--nf-stage-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--nf-gutter);
  padding-right: var(--nf-gutter);
}

/* --- Sticky editor offset: place below header (tweak if needed) --- */
html[data-page="tools-new_form"] .field-editor{
  top: 96px;
}
@media (max-width: 900px){
  html[data-page="tools-new_form"] .field-editor{
    top: calc(96px + env(safe-area-inset-top, 0px));
  }
}

/* =============================================================================
   tools/new_form — header flush-top + header aligned to 2-col stage
   Paste at BOTTOM of /css/styles.css
   ========================================================================== */

html[data-page="tools-new_form"]{
  --nf-stage-max: 1500px; /* match what you want for widescreen */
  --nf-gutter: 12px;      /* same gutter as the rest of the UI */
}

/* Remove any global top spacing that creates the visible gap */
html[data-page="tools-new_form"],
html[data-page="tools-new_form"] body{
  margin: 0 !important;
  padding: 0 !important;
}

/* Sticky bar: NO padding/margin here (this is where mystery gaps come from) */
html[data-page="tools-new_form"] header{
  position: sticky;
  top: 0 !important;
  z-index: 80;

  width: 100%;
  margin: 0 !important;
  padding: 0 !important;

  background: var(--bg);
  box-sizing: border-box;
}

/* Mobile: respect safe-area without creating a “gap above” the header card */
@media (max-width: 900px){
  html[data-page="tools-new_form"] header{
    /* Adds space INSIDE the header background, not above it */
    padding-top: env(safe-area-inset-top, 0px) !important;
  }
}

/* The header "card": kill any inherited margins and align to the stage */
html[data-page="tools-new_form"] header .header-wrap{
  box-sizing: border-box;

  /* Align width with the 2-col layout */
  max-width: var(--nf-stage-max);
  margin: 0 auto !important;        /* IMPORTANT: removes top gap if global margin exists */
  padding: var(--nf-gutter);

  /* Make it look like your cards */
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

/* Now match the main layout stage to the same max-width + gutters */
html[data-page="tools-new_form"] .wrap{
  max-width: var(--nf-stage-max);
  margin: 0 auto !important;
  padding-left: var(--nf-gutter);
  padding-right: var(--nf-gutter);

  /* IMPORTANT: if a global .wrap has top margin, this kills it */
  padding-top: 0 !important;
}

/* If the grid has a top margin pushing it down under header, kill it */
html[data-page="tools-new_form"] .grid{
  margin-top: 0 !important;
}

/* =============================================================================
   tools/new_form — header flush-top + header aligned to 2-col stage
   Paste at BOTTOM of /css/styles.css
   ========================================================================== */

html[data-page="tools-new_form"]{
  --nf-stage-max: 1500px; /* match what you want for widescreen */
  --nf-gutter: 12px;      /* same gutter as the rest of the UI */
}

/* Remove any global top spacing that creates the visible gap */
html[data-page="tools-new_form"],
html[data-page="tools-new_form"] body{
  margin: 0 !important;
  padding: 0 !important;
}

/* Sticky bar: NO padding/margin here (this is where mystery gaps come from) */
html[data-page="tools-new_form"] header{
  position: sticky;
  top: 0 !important;
  z-index: 80;

  width: 100%;
  margin: 0 !important;
  padding: 0 !important;

  background: var(--bg);
  box-sizing: border-box;
}

/* Mobile: respect safe-area without creating a “gap above” the header card */
@media (max-width: 900px){
  html[data-page="tools-new_form"] header{
    /* Adds space INSIDE the header background, not above it */
    padding-top: env(safe-area-inset-top, 0px) !important;
  }
}

/* The header "card": kill any inherited margins and align to the stage */
html[data-page="tools-new_form"] header .header-wrap{
  box-sizing: border-box;

  /* Align width with the 2-col layout */
  max-width: var(--nf-stage-max);
  margin: 0 auto !important;        /* IMPORTANT: removes top gap if global margin exists */
  padding: var(--nf-gutter);

  /* Make it look like your cards */
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

/* Now match the main layout stage to the same max-width + gutters */
html[data-page="tools-new_form"] .wrap{
  max-width: var(--nf-stage-max);
  margin: 0 auto !important;
  padding-left: var(--nf-gutter);
  padding-right: var(--nf-gutter);

  /* IMPORTANT: if a global .wrap has top margin, this kills it */
  padding-top: 0 !important;
}

/* If the grid has a top margin pushing it down under header, kill it */
html[data-page="tools-new_form"] .grid{
  margin-top: 0 !important;
}

/* =============================================================================
   tools/new_form — header flush-top + same width as 2-col layout
   ========================================================================== */
html[data-page="tools-new_form"]{
  --nf-stage-max: 1500px;
  --nf-gutter: 12px;
}

html[data-page="tools-new_form"] header{
  position: sticky !important;
  top: 0 !important;
  z-index: 80;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  background: var(--bg);
}

/* Safe-area on mobile (adds space INSIDE header background, not above it) */
@media (max-width: 900px){
  html[data-page="tools-new_form"] header{
    padding-top: env(safe-area-inset-top, 0px) !important;
  }
}

/* Header card/container: same stage width as body content */
html[data-page="tools-new_form"] header .header-wrap{
  width: 100%;
  max-width: var(--nf-stage-max);
  margin: 0 auto !important;     /* kills any inherited top margin */
  padding: var(--nf-gutter);
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

/* Match the main content stage width to header */
html[data-page="tools-new_form"] .wrap.nf-wrap{
  max-width: var(--nf-stage-max);
  margin: 0 auto !important;
  padding-left: var(--nf-gutter);
  padding-right: var(--nf-gutter);
  padding-top: 0 !important;     /* kills any inherited top padding */
}


/* =============================================================================
   tools/new_form — undo global "index.html body{display:grid;place-items:center}"
   This is the real cause of the top gap.
   ========================================================================== */
html[data-page="tools-new_form"] body{
  display: block !important;
  place-items: unset !important;
  align-content: unset !important;
  justify-items: unset !important;
  align-items: unset !important;
}

/* =============================================================================
   tools/new_form — consistent vertical rhythm: Header → Properties spacing
   ========================================================================== */
html[data-page="tools-new_form"]{
  --nf-gap: 12px; /* single source of truth for vertical spacing */
}

/* Give the header card a consistent bottom gap */
html[data-page="tools-new_form"] header .header-wrap{
  margin-bottom: var(--nf-gap) !important;
}

/* Ensure the page content doesn't add extra top spacing */
html[data-page="tools-new_form"] .wrap.nf-wrap{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ensure the grid doesn't add extra top spacing either */
html[data-page="tools-new_form"] .nf-grid{
  margin-top: 0 !important;
}

/* tools/new_form — consistent spacing under header */
html[data-page="tools-new_form"]{
  --nf-gap: 12px;
}

html[data-page="tools-new_form"] header .header-wrap{
  margin-bottom: var(--nf-gap) !important;
}

/* Ensure no extra top margin sneaks in above Properties */
html[data-page="tools-new_form"] .wrap.nf-wrap,
html[data-page="tools-new_form"] .nf-grid{
  margin-top: 0 !important;
  padding-top: 0 !important;
}




/* source: tools/manage_admins.html */
/* ===== Design tokens (aligned with PIN creator page) ===== */
    html[data-page="tools-manage_admins"]{
      --bg:#020617;
      --card:#020617;
      --card-soft:#020617;
      --fg:#e5e7eb;
      --muted:#94a3b8;
      --muted-soft:#1e293b;
      --border:#1f2937;
      --border-soft:#111827;
      --accent:#13c98a;
      --accent-soft:rgba(19,201,138,.08);
      --accent-border:rgba(19,201,138,.45);
      --danger:#ef4444;
      --danger-soft:rgba(239,68,68,.12);
      --warn:#f59e0b;
      --ring:rgba(19,201,138,.35);
      --shadow-soft:0 14px 32px rgba(15,23,42,.75);
      --radius-lg:18px;
      --radius-xl:24px;
      --radius-pill:999px;
    }html[data-page="tools-manage_admins"] /* ===== Resets & base ===== */
    *{box-sizing:border-box;margin:0;padding:0}html[data-page="tools-manage_admins"], html[data-page="tools-manage_admins"] body{height:100%}html[data-page="tools-manage_admins"] body{
      font-family: system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;
      background: radial-gradient(circle at top,#020617 0,#020617 55%,#000 100%);
      color:var(--fg);
    }html[data-page="tools-manage_admins"] [hidden]{display:none!important}html[data-page="tools-manage_admins"] .page-shell{
      min-height:100vh;
      display:flex;
      flex-direction:column;
      padding:16px;
      gap:16px;
    }html[data-page="tools-manage_admins"] /* ===== Header ===== */
    .page-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:8px 4px;
      flex-wrap:wrap;
    }html[data-page="tools-manage_admins"] .page-title{
      display:flex;
      align-items:center;
      gap:10px;
    }html[data-page="tools-manage_admins"] .logo-dot{
      width:26px;
      height:26px;
      border-radius:50%;
      background:radial-gradient(circle at 30% 20%,#6ee7b7 0,#22c55e 25%,#0f766e 60%,#020617 100%);
      box-shadow:0 0 18px rgba(34,197,94,.7);
    }html[data-page="tools-manage_admins"] .page-title h1{
      font-size:1.15rem;
      font-weight:600;
      letter-spacing:.03em;
    }html[data-page="tools-manage_admins"] .page-title span{
      display:block;
      font-size:.75rem;
      color:var(--muted);
    }html[data-page="tools-manage_admins"] .badge{
      font-size:.7rem;
      padding:2px 8px;
      border-radius:999px;
      border:1px solid var(--border);
      background:rgba(15,23,42,.9);
    }html[data-page="tools-manage_admins"] .badge-super{
      border-color:var(--accent-border);
      background:var(--accent-soft);
      color:#a7f3d0;
    }html[data-page="tools-manage_admins"] .badge-admin{
      border-color:#38bdf8;
      background:rgba(56,189,248,.12);
      color:#e0f2fe;
    }html[data-page="tools-manage_admins"] /* ===== Layout ===== */
    .layout-main{
      display:flex;
      flex-direction:column;
      gap:16px;
    }html[data-page="tools-manage_admins"] .toolbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }html[data-page="tools-manage_admins"] .toolbar-left{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      align-items:center;
    }html[data-page="tools-manage_admins"] .toolbar-right{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      align-items:center;
    }html[data-page="tools-manage_admins"] .chip{
      font-size:.7rem;
      padding:3px 8px;
      border-radius:var(--radius-pill);
      border:1px solid var(--border);
      color:var(--muted);
      display:inline-flex;
      align-items:center;
      gap:6px;
      background:rgba(15,23,42,.85);
    }html[data-page="tools-manage_admins"] /* ===== Buttons & inputs ===== */
    button{
      border:none;
      outline:none;
      cursor:pointer;
      font-size:.8rem;
      border-radius:var(--radius-pill);
      padding:7px 13px;
      display:inline-flex;
      align-items:center;
      gap:6px;
      background:var(--muted-soft);
      color:var(--fg);
      transition:background .15s ease,transform .08s ease,box-shadow .12s ease,opacity .12s ease;
      box-shadow:0 4px 14px rgba(15,23,42,.6);
    }html[data-page="tools-manage_admins"] button.primary{
      background:linear-gradient(135deg,#16a34a,#15803d);
      color:#ecfdf5;
      box-shadow:0 6px 18px rgba(22,163,74,.45);
    }html[data-page="tools-manage_admins"] button.primary:hover{
      background:linear-gradient(135deg,#22c55e,#15803d);
      box-shadow:0 7px 20px rgba(22,163,74,.55);
    }html[data-page="tools-manage_admins"] button.ghost{
      background:rgba(15,23,42,.9);
      border:1px solid var(--border);
      box-shadow:none;
    }html[data-page="tools-manage_admins"] button.subtle{
      background:rgba(15,23,42,.9);
      border:1px dashed rgba(51,65,85,.9);
      box-shadow:none;
      padding:6px 10px;
      font-size:.75rem;
    }html[data-page="tools-manage_admins"] button.danger{
      background:rgba(127,29,29,.95);
      border:1px solid rgba(248,113,113,.8);
      color:#fee2e2;
      box-shadow:0 6px 18px rgba(127,29,29,.55);
    }html[data-page="tools-manage_admins"] button:active{
      transform:translateY(1px) scale(.99);
      box-shadow:0 3px 10px rgba(15,23,42,.75);
    }html[data-page="tools-manage_admins"] button[disabled]{
      opacity:.55;
      cursor:default;
      transform:none;
      box-shadow:none;
    }html[data-page="tools-manage_admins"] .icon-dot{
      width:7px;height:7px;border-radius:999px;
      background:var(--accent);
      box-shadow:0 0 6px rgba(34,197,94,.75);
    }html[data-page="tools-manage_admins"] .input{
      border-radius:999px;
      border:1px solid var(--border);
      background:rgba(15,23,42,.95);
      padding:6px 10px;
      font-size:.8rem;
      color:var(--fg);
      outline:none;
      min-width:180px;
    }html[data-page="tools-manage_admins"] .input::placeholder{
      color:rgba(148,163,184,.75);
    }html[data-page="tools-manage_admins"] .input:focus{
      border-color:var(--accent-border);
      box-shadow:0 0 0 1px var(--accent-border),0 0 0 3px var(--ring);
      background:rgba(15,23,42,1);
    }html[data-page="tools-manage_admins"] /* ===== Status chip (only for loading & errors now) ===== */
    .status-chip{
      font-size:.7rem;
      padding:3px 9px;
      border-radius:var(--radius-pill);
      border:1px solid var(--border);
      color:var(--muted);
      display:none; /* default hidden */
      align-items:center;
      gap:6px;
      background:rgba(15,23,42,.85);
    }html[data-page="tools-manage_admins"] .status-chip span.indicator{
      width:7px;height:7px;border-radius:999px;
      background:var(--muted);
    }html[data-page="tools-manage_admins"] .status-chip.loading span.indicator{
      background:#fbbf24;
      box-shadow:0 0 10px rgba(251,191,36,.85);
    }html[data-page="tools-manage_admins"] .status-chip.error span.indicator{
      background:var(--danger);
      box-shadow:0 0 10px rgba(239,68,68,.85);
    }html[data-page="tools-manage_admins"] /* ===== Card & table ===== */
    .card{
      background:radial-gradient(circle at top left,#020617 0,#020617 46%,#020617 100%);
      border-radius:var(--radius-xl);
      border:1px solid var(--border-soft);
      box-shadow:var(--shadow-soft);
      padding:16px 16px 14px;
      position:relative;
      overflow:hidden;
    }html[data-page="tools-manage_admins"] .card::before{
      content:"";
      position:absolute;
      inset:-40%;
      opacity:0.03;
      background:
        radial-gradient(circle at 10% 0%,#22c55e 0,transparent 50%),
        radial-gradient(circle at 100% 0%,#0ea5e9 0,transparent 54%);
      pointer-events:none;
    }html[data-page="tools-manage_admins"] .card-inner{position:relative;z-index:1}html[data-page="tools-manage_admins"] .card-header{
      display:flex;
      justify-content:space-between;
      gap:8px;
      margin-bottom:10px;
      flex-wrap:wrap;
      align-items:center;
    }html[data-page="tools-manage_admins"] .card-header h2{
      font-size:.95rem;
      font-weight:600;
    }html[data-page="tools-manage_admins"] .card-header p{
      font-size:.78rem;
      color:var(--muted);
    }html[data-page="tools-manage_admins"] .row-actions{
      display:flex;
      align-items:center;
      gap:6px;
      font-size:.75rem;
      padding:4px 8px;
      border-radius:var(--radius-pill);
      border:1px solid rgba(51,65,85,.9);
      background:rgba(15,23,42,.92);
    }html[data-page="tools-manage_admins"] .row-actions-label{
      color:var(--muted);
      max-width:220px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }html[data-page="tools-manage_admins"] .table-wrapper{
      border-radius:var(--radius-lg);
      border:1px solid var(--border);
      background:rgba(15,23,42,.85);
      overflow:auto;
      max-height:calc(100vh - 240px);
    }html[data-page="tools-manage_admins"] table{
      width:100%;
      border-collapse:collapse;
      font-size:.8rem;
      min-width:720px;
    }html[data-page="tools-manage_admins"] thead{
      background:rgba(15,23,42,.98);
      position:sticky;
      top:0;
      z-index:1;
    }html[data-page="tools-manage_admins"] th, html[data-page="tools-manage_admins"] td{
      padding:7px 10px;
      border-bottom:1px solid rgba(30,41,59,.95);
      text-align:left;
      white-space:nowrap;
    }html[data-page="tools-manage_admins"] th{
      font-size:.72rem;
      text-transform:uppercase;
      letter-spacing:.08em;
      color:var(--muted);
      user-select:none;
      border-bottom:1px solid rgba(148,163,184,.35);
    }html[data-page="tools-manage_admins"] th.sortable{
      cursor:pointer;
    }html[data-page="tools-manage_admins"] .sortable-inner{
      display:inline-flex;
      align-items:center;
      gap:4px;
    }html[data-page="tools-manage_admins"] .sortable-inner .sort-icon{
      font-size:.6rem;
      opacity:.6;
    }html[data-page="tools-manage_admins"] tr:nth-child(even) td{
      background:rgba(15,23,42,.9);
    }html[data-page="tools-manage_admins"] tr:nth-child(odd) td{
      background:rgba(15,23,42,.96);
    }html[data-page="tools-manage_admins"] tr:hover td{
      background:rgba(24,35,55,.96);
    }html[data-page="tools-manage_admins"] tr.row-selected td{
      background:rgba(19,201,138,.09);
      box-shadow:inset 0 0 0 1px rgba(19,201,138,.55);
    }html[data-page="tools-manage_admins"] /* ===== Role Badges (static, not editable) ===== */
    .role-badge{
      font-size:.7rem;
      padding:2px 8px;
      border-radius:999px;
      display:inline-block;
      font-weight:600;
      text-transform: capitalize;
    }html[data-page="tools-manage_admins"] .role-badge.super{
      border:1px solid var(--accent-border);
      background:var(--accent-soft);
      color:#a7f3d0;
    }html[data-page="tools-manage_admins"] .role-badge.admin{
      border:1px solid #38bdf8;
      background:rgba(56,189,248,.12);
      color:#e0f2fe;
    }html[data-page="tools-manage_admins"] .role-badge.tech{
      border:1px solid var(--border);
      background:rgba(51,65,85,.7);
      color:var(--fg);
    }html[data-page="tools-manage_admins"] .role-badge.user{
      border:1px solid rgba(148,163,184,.7);
      background:rgba(51,65,85,.6);
      color:var(--muted);
    }html[data-page="tools-manage_admins"] /* ================================================= */

    .pill-active{
      border-radius:999px;
      padding:2px 8px;
      font-size:.75rem;
      display:inline-flex;
      align-items:center;
      gap:5px;
      border:1px solid rgba(51,65,85,.9);
      cursor:pointer;
      background:rgba(15,23,42,.95);
    }html[data-page="tools-manage_admins"] .pill-active span.dot{
      width:7px;height:7px;border-radius:999px;
    }html[data-page="tools-manage_admins"] .pill-active.on{
      border-color:var(--accent-border);
      background:var(--accent-soft);
      color:#bbf7d0;
    }html[data-page="tools-manage_admins"] .pill-active.on span.dot{
      background:#22c55e;
      box-shadow:0 0 8px rgba(34,197,94,.8);
    }html[data-page="tools-manage_admins"] .pill-active.off{
      border-color:rgba(127,29,29,.85);
      background:rgba(127,29,29,.2);
      color:#fecaca;
    }html[data-page="tools-manage_admins"] .pill-active.off span.dot{
      background:#ef4444;
      box-shadow:0 0 8px rgba(239,68,68,.8);
    }html[data-page="tools-manage_admins"] .cell-input{
      border-radius:999px;
      border:1px solid rgba(51,65,85,.95);
      background:rgba(15,23,42,.98);
      padding:4px 8px;
      font-size:.8rem;
      color:var(--fg);
      min-width:120px;
    }html[data-page="tools-manage_admins"] .cell-input:focus{
      border-color:var(--accent-border);
      box-shadow:0 0 0 1px var(--accent-border),0 0 0 3px var(--ring);
      outline:none;
      background:rgba(15,23,42,1);
    }html[data-page="tools-manage_admins"] .empty-state{
      padding:16px;
      font-size:.8rem;
      color:var(--muted);
      text-align:center;
    }html[data-page="tools-manage_admins"] .badge-small{
      border-radius:999px;
      padding:2px 6px;
      border:1px solid rgba(51,65,85,.9);
      font-size:.68rem;
      color:var(--muted);
    }html[data-page="tools-manage_admins"] .status-line{
      margin-top:8px;
      font-size:.75rem;
      color:var(--muted);
    }html[data-page="tools-manage_admins"] /* ===== Modal Styles (New Admin/Tech) ===== */
    html[data-page="tools-manage_admins"] .modal-backdrop{
      position:fixed;
      top:0;left:0;right:0;bottom:0;
      background:rgba(0,0,0,.7);
      backdrop-filter:blur(3px);
      z-index:1000;
      display:flex;
      align-items:center;
      justify-content:center;
      opacity:0;
      visibility:hidden;
      transition:opacity .25s ease,visibility .25s ease;
    }html[data-page="tools-manage_admins"] .modal-backdrop.show{
      opacity:1;
      visibility:visible;
    }html[data-page="tools-manage_admins"] .modal{
      background:var(--card-soft);
      border-radius:var(--radius-xl);
      border:1px solid var(--border);
      box-shadow:0 10px 30px rgba(0,0,0,.5), var(--shadow-soft);
      width:90%;
      max-width:450px;
      max-height:90vh;
      display:flex;
      flex-direction:column;
      transform:scale(.95) translateY(10px);
      transition:transform .25s ease;
    }html[data-page="tools-manage_admins"] .modal-backdrop.show .modal{
      transform:scale(1) translateY(0);
    }html[data-page="tools-manage_admins"] .modal-header{
      padding:16px;
      padding-bottom:12px;
      border-bottom:1px solid var(--border);
      display:flex;
      justify-content:space-between;
      align-items:center;
    }html[data-page="tools-manage_admins"] .modal-header h2{
      font-size:1.1rem;
      font-weight:600;
    }html[data-page="tools-manage_admins"] .modal-body{
      padding:16px;
      overflow-y:auto;
      display:flex;
      flex-direction:column;
      gap:16px;
    }html[data-page="tools-manage_admins"] .field label{
      display:block;
      font-size:.85rem;
      font-weight:500;
      margin-bottom:6px;
      color:var(--fg);
    }html[data-page="tools-manage_admins"] .field .helper{
      display:block;
      font-size:.75rem;
      color:var(--muted);
      margin-top:-4px;
      margin-bottom:6px;
    }html[data-page="tools-manage_admins"] .modal .cell-input, html[data-page="tools-manage_admins"] .modal .cell-select{
      width:100%;
      box-sizing:border-box;
      /* Override table styles for modal context */
      border-radius:var(--radius-lg);
      padding:8px 12px;
      min-width:unset;
      font-size:.9rem;
      background:rgba(15,23,42,.98);
      border:1px solid rgba(51,65,85,.95);
    }html[data-page="tools-manage_admins"] .modal .cell-select{
      appearance:none;
      background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394a3b8'%3e%3cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3e%3c/svg%3e");
      background-repeat:no-repeat;
      background-position:right .7rem center;
      background-size:.9em;
    }html[data-page="tools-manage_admins"] .toggle-row-inline{
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding-top:8px;
      border-top:1px solid var(--border-soft);
    }html[data-page="tools-manage_admins"] .modal-actions{
      padding:16px;
      border-top:1px solid var(--border);
      display:flex;
      justify-content:flex-end;
      gap:10px;
    }html[data-page="tools-manage_admins"] /* Ensure button styles from the main sheet apply */
    .modal-actions button{
      padding:8px 16px;
      font-size:.9rem;
    }html[data-page="tools-manage_admins"] /* ===== END Modal Styles ===== */


    /* ===== Mobile adjustments: dense rows ===== */
    @media (max-width: 768px){
      .page-shell{
        padding:10px 8px 14px;
      }
      .page-header{
        padding:4px 2px 6px;
      }
      .page-title h1{
        font-size:1rem;
      }
      .page-title span{
        font-size:.7rem;
      }
      .toolbar{
        align-items:flex-start;
      }
      .toolbar-left{
        width:100%;
      }
      .toolbar-right{
        width:100%;
        justify-content:flex-end;
      }
      .table-wrapper{
        max-height:none;
        overflow-x:auto;
      }
      #userTable{
        min-width:0;
      }

      /* Hide ID, PIN role, Active, Last login, Created in head */
      /* Indices: ID (1), PIN role (4), Active (5), Last login (6), Created (7) */
      #userTable thead th:nth-child(1),
      #userTable thead th:nth-child(4),
      #userTable thead th:nth-child(5),
      #userTable thead th:nth-child(6),
      #userTable thead th:nth-child(7){
        display:none;
      }
      /* Hide same columns in body for main rows */
      #userTable tbody tr td:nth-child(1),
      #userTable tbody tr td:nth-child(4),
      #userTable tbody tr td:nth-child(5),
      #userTable tbody tr td:nth-child(6),
      #userTable tbody tr td:nth-child(7){
        display:none;
      }

      #userTable tbody tr{
        font-size:.78rem;
      }
      #userTable tbody tr td{
        white-space:nowrap;
      }

      .row-actions{
        width:100%;
        justify-content:space-between;
      }
      .row-actions-label{
        max-width:45vw;
      }
    }@media (max-width: 480px){html[data-page="tools-manage_admins"] .toolbar-right{
        justify-content:flex-start;
      }html[data-page="tools-manage_admins"] .page-header{
        flex-direction:column;
        align-items:flex-start;
      }html[data-page="tools-manage_admins"] .table-wrapper{
        border-radius:var(--radius-lg);
      }}

html[data-page="tools-manage_admins"] .manage-admins-toggle-label{display:flex;align-items:center;gap:4px;font-size:.8rem}

/* source: tools/new_asset.html */
/* ===== Tokens / base ===== */
html[data-page="tools-new_asset"]{
  --bg:#0b1220; --card:#0f172a; --fg:#e5e7eb; --muted:#94a3b8; --border:#1f2937; --border-2:#182335;
  --btn:#1f2937; --btnb:#334155; --accent:#13c98a; --danger:#ef4444; --ring:rgba(19,201,138,.35);
  --focus:0 0 0 3px rgba(19,201,138,.17); --shadow:0 10px 30px rgba(0,0,0,.35);
}html[data-page="tools-new_asset"] *{ box-sizing:border-box }html[data-page="tools-new_asset"], html[data-page="tools-new_asset"] body{ height:100% }html[data-page="tools-new_asset"] body{
  margin:0;background:var(--bg);color:var(--fg);
  font:14px system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans","Helvetica Neue",Arial;
}html[data-page="tools-new_asset"] /* Global media safety */
img, html[data-page="tools-new_asset"] canvas{ max-width:100%; height:auto; display:block }html[data-page="tools-new_asset"] /* Utility: safe rows that wrap, html[data-page="tools-new_asset"] and children can shrink */
.row{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap; width:100%;
}html[data-page="tools-new_asset"] .row > *{
  min-width:0;
  flex:1 1 auto;
}html[data-page="tools-new_asset"] .no-grow{ flex:0 0 auto }html[data-page="tools-new_asset"] a{ color:inherit; text-decoration:none }html[data-page="tools-new_asset"] .buttonlike{ display:inline-block }html[data-page="tools-new_asset"] /* ===== Buttons & Inputs ===== */
button, html[data-page="tools-new_asset"] .btn{
  background:var(--btn); color:var(--fg); border:1px solid var(--btnb);
  padding:8px 12px; border-radius:10px; cursor:pointer; display:inline-block;
  text-align:center; line-height:1.2; text-decoration:none;
  max-width:100%;
}html[data-page="tools-new_asset"] button:hover, html[data-page="tools-new_asset"] .btn:hover{ background:#243041 }html[data-page="tools-new_asset"] button.ghost, html[data-page="tools-new_asset"] .btn.ghost{ background:transparent }html[data-page="tools-new_asset"] button.primary, html[data-page="tools-new_asset"] .btn.primary{ border-color:#1a4f3e; box-shadow:var(--focus) inset }html[data-page="tools-new_asset"] button.danger, html[data-page="tools-new_asset"] .btn.danger{ border-color:#5c1c20 }html[data-page="tools-new_asset"] button.sm, html[data-page="tools-new_asset"] .btn.sm{ padding:6px 10px; border-radius:9px; font-size:12.5px }html[data-page="tools-new_asset"] /* Inputs */
input, html[data-page="tools-new_asset"] select, html[data-page="tools-new_asset"] textarea{
  background:#0b1220; color:var(--fg); border:1px solid var(--border);
  border-radius:10px; padding:8px 10px; min-width:0; width:100%; max-width:100%;
}html[data-page="tools-new_asset"] label{ display:block; margin-bottom:4px; color:#cbd5e1; font-size:12px }html[data-page="tools-new_asset"] .hint{ color:var(--muted) }html[data-page="tools-new_asset"] /* Wrap long code/urls safely */
code, html[data-page="tools-new_asset"] .qr-url{ overflow-wrap:anywhere; word-break:break-word }html[data-page="tools-new_asset"] /* ===== Header ===== */
header{ position:sticky; top:0; z-index:30; background:#0f172a; border-bottom:1px solid var(--border) }html[data-page="tools-new_asset"] .header-wrap{
  width:100%; max-width:1100px; margin:0 auto; padding:10px 12px;
  display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap
}html[data-page="tools-new_asset"] header h1{ margin:0; font-size:18px }html[data-page="tools-new_asset"] header .right .stack{ display:flex; gap:8px; flex-wrap:wrap; width:100%; max-width:100% }@media (min-width:560px){html[data-page="tools-new_asset"] header .right .stack{ width:auto }}@media (max-width:520px){html[data-page="tools-new_asset"] header h1{ font-size:16px }html[data-page="tools-new_asset"] .header-wrap{ padding:8px 10px }}html[data-page="tools-new_asset"] /* ===== Agency banner ===== */
.agency-banner{ background:#0e1523; border-bottom:1px solid var(--border); color:#cbd5e1; }html[data-page="tools-new_asset"] .agency-wrap{
  width:100%; max-width:1100px; margin:0 auto; padding:8px 12px;
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}html[data-page="tools-new_asset"] .agency-left, html[data-page="tools-new_asset"] .agency-right{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; width:100% }@media (min-width:560px){html[data-page="tools-new_asset"] .agency-left, html[data-page="tools-new_asset"] .agency-right{ width:auto }}html[data-page="tools-new_asset"] .agency-id{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding:2px 8px; border:1px solid var(--border-2); border-radius:8px; background:#0b1220
}html[data-page="tools-new_asset"] /* ===== Content ===== */
.wrap{ width:100%; max-width:1100px; margin:12px auto 40px; padding:0 12px }@media (max-width:420px){html[data-page="tools-new_asset"] .wrap{ padding:0 8px }}html[data-page="tools-new_asset"] /* Grid: desktop 2-col, html[data-page="tools-new_asset"] smaller = 1-col */
.grid{ display:grid; gap:10px; grid-template-columns:1fr 420px; width:100% }@media (max-width:1000px){html[data-page="tools-new_asset"] .grid{ grid-template-columns:1fr }}html[data-page="tools-new_asset"] /* Cards */
.card{ background:var(--card); border:1.5px solid var(--border); border-radius:12px; padding:12px; box-shadow:var(--shadow); width:100% }html[data-page="tools-new_asset"] .card h2{ margin:0 0 8px; font-size:16px }html[data-page="tools-new_asset"] .divider{ height:1px; background:var(--border-2); margin:10px 0 }html[data-page="tools-new_asset"] /* Form grid */
html[data-page="tools-new_asset"] .meta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100% }html[data-page="tools-new_asset"] .meta-grid .full{ grid-column:1/-1 }@media (max-width:900px){html[data-page="tools-new_asset"] .meta-grid{ grid-template-columns:1fr }}html[data-page="tools-new_asset"] /* ===== QR preview ===== */
.qr-wrap{ display:grid; grid-template-rows:auto 1fr auto; gap:10px; width:100% }html[data-page="tools-new_asset"] #qrHost{
  background:#0b1220; border:1px solid var(--border); border-radius:12px;
  display:flex; align-items:center; justify-content:center; min-height:220px; position:relative;
  padding:8px; width:100%;
}html[data-page="tools-new_asset"] #qrCanvas{ width:100%; max-width:256px; margin:0 auto }html[data-page="tools-new_asset"] #qrCanvas canvas, html[data-page="tools-new_asset"] #qrCanvas img{ width:100%; height:auto; image-rendering:pixelated; display:block }html[data-page="tools-new_asset"] .qr-url{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; color:#bcd;
}html[data-page="tools-new_asset"] /* ===== Controls ===== */
.controls-bottom{ display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; width:100% }@media (max-width:640px){html[data-page="tools-new_asset"] .controls-bottom{ justify-content:stretch }html[data-page="tools-new_asset"] .controls-bottom > *{ flex:1 1 140px }}html[data-page="tools-new_asset"] /* ===== Toast ===== */
html[data-page="tools-new_asset"] .toast{
  position:fixed; right:14px; bottom:14px; background:#0e1523; border:1px solid var(--border);
  padding:10px 12px; border-radius:10px; box-shadow:var(--shadow); display:none; max-width:90vw;
}html[data-page="tools-new_asset"] .toast.show{ display:block }html[data-page="tools-new_asset"] .new-asset-right-full{width:100%}html[data-page="tools-new_asset"] .new-asset-agency-input{width:160px}html[data-page="tools-new_asset"] .new-asset-type-select{flex:1 1 220px}html[data-page="tools-new_asset"] .new-asset-type-custom{flex:1 1 240px}html[data-page="tools-new_asset"] .new-asset-uid-input{flex:1 1 240px}html[data-page="tools-new_asset"] .new-asset-row-between{justify-content:space-between}

/* source: tools/new_inspection.html */
html[data-page="tools-new_inspection"]{ --bg:#0b1220; --card:#0f172a; --fg:#e5e7eb; --muted:#94a3b8; --border:#1f2937; }html[data-page="tools-new_inspection"] *{box-sizing:border-box}html[data-page="tools-new_inspection"] body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}html[data-page="tools-new_inspection"] .wrap{max-width:760px;margin:24px auto;padding:0 12px}html[data-page="tools-new_inspection"] .card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px}html[data-page="tools-new_inspection"] h1{margin:0 0 12px 0;font-size:18px}html[data-page="tools-new_inspection"] label{display:block;font-size:12px;color:var(--muted);margin:10px 0 6px}html[data-page="tools-new_inspection"] input, html[data-page="tools-new_inspection"] select, html[data-page="tools-new_inspection"] textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:#0b1220;color:var(--fg)}html[data-page="tools-new_inspection"] textarea{min-height:90px;resize:vertical}html[data-page="tools-new_inspection"] .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}html[data-page="tools-new_inspection"] .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}html[data-page="tools-new_inspection"] button{background:#1f2937;color:var(--fg);border:1px solid #334155;padding:10px 14px;border-radius:10px;cursor:pointer}html[data-page="tools-new_inspection"] button:hover{background:#243041}html[data-page="tools-new_inspection"] .msg{margin-top:10px;font-size:13px}html[data-page="tools-new_inspection"] .ok{color:#86efac}html[data-page="tools-new_inspection"] .err{color:#fca5a5}html[data-page="tools-new_inspection"] .hint{color:var(--muted);font-size:12px;margin-top:8px}

/* source: api/fleet_archive.html */
html[data-page="api-fleet_archive"] [hidden]{ display: none !important; }html[data-page="api-fleet_archive"]{
      --bg:#0b1220; --card:#0f172a; --fg:#e5e7eb; --muted:#94a3b8; --border:#1f2937; --border-2:#182335;
      --btn:#1f2937; --btnb:#334155; --accent:#13c98a; --danger:#ef4444; --warn:#f59e0b; --ring:rgba(19,201,138,.35);
      --header-h: 52px;
    }html[data-page="api-fleet_archive"] body{ margin:0; background:var(--bg); color:var(--fg); font:14px system-ui,Segoe UI,Roboto,sans-serif; padding-top:var(--header-h); }html[data-page="api-fleet_archive"] .header{
      position: fixed; top: 0; left: 0; right: 0; height: var(--header-h);
      background: var(--card); border-bottom: 1px solid var(--border);
      display: flex; align-items: center; padding: 0 16px; z-index: 1000;
      justify-content: space-between;
    }html[data-page="api-fleet_archive"] /* Header Title style (prevents wrap/oversize look, and handles spacing) */
    .header-title{
        flex-grow: 1;
        color: var(--fg);
        font-size: 18px;
        font-weight: 600;
        margin: 0 16px; /* Spacing from back button and right controls */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }html[data-page="api-fleet_archive"] /* NEW: Container for right-side buttons to prevent them from shrinking/disappearing */
    .header-right-controls{
        display: flex;
        align-items: center;
        gap: 16px; 
        flex-shrink: 0; /* CRITICAL FIX: Prevents this group from shrinking */
    }html[data-page="api-fleet_archive"] .main-content{ padding: 16px; max-width: 1400px; margin: 0 auto; }html[data-page="api-fleet_archive"] .search-filter-controls{ display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }html[data-page="api-fleet_archive"] .search-bar-row{ display: flex; gap: 12px; }html[data-page="api-fleet_archive"] .filter-bar{ display: flex; gap: 12px; flex-wrap: wrap; }html[data-page="api-fleet_archive"] /* Styles for the Back/Forms link buttons */
    .back-btn-box{
        text-decoration: none;
        display: inline-flex; 
        align-items: center;
        padding: 8px 12px; 
        border: 1px solid var(--border); 
        background: var(--btn);
        color: var(--fg); 
        border-radius: 4px; 
        cursor: pointer; 
        transition: background 0.2s; 
        font: inherit;
        flex-shrink: 0; /* Ensure the buttons don't shrink */
    }html[data-page="api-fleet_archive"] .back-btn-box:hover{ background: var(--btnb); }html[data-page="api-fleet_archive"] /* Style for the Logout button (plain white text) */
    #btnLogout{
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        color: var(--fg) !important;
        font-weight: 600; 
        cursor: pointer;
    }html[data-page="api-fleet_archive"] #btnLogout:hover{
        background: transparent !important;
        text-decoration: underline;
    }html[data-page="api-fleet_archive"] /* Standard styles for inputs and filter buttons */
    .search-bar-row input, html[data-page="api-fleet_archive"] .filter-bar select, html[data-page="api-fleet_archive"] .filter-bar button, html[data-page="api-fleet_archive"] #btnSearchApply{
        padding: 8px 12px; border: 1px solid var(--border); background: var(--btn);
        color: var(--fg); border-radius: 4px; cursor: pointer; transition: background 0.2s; font: inherit;
    }html[data-page="api-fleet_archive"] .search-bar-row input{ flex-grow: 1; }html[data-page="api-fleet_archive"] #btnSearchApply{ background: var(--btnb); }html[data-page="api-fleet_archive"] .filter-bar button:hover, html[data-page="api-fleet_archive"] #btnSearchApply:hover{ background: var(--btnb); }html[data-page="api-fleet_archive"] .data-table-container{ overflow-x: auto; }html[data-page="api-fleet_archive"] .data-table{ width: 100%; border-collapse: collapse; min-width: 1000px; }html[data-page="api-fleet_archive"] .data-table th, html[data-page="api-fleet_archive"] .data-table td{ padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; }html[data-page="api-fleet_archive"] .data-table th{ background: var(--card); color: var(--muted); font-weight: 600; cursor: pointer; user-select: none; }html[data-page="api-fleet_archive"] .data-table tbody tr{ cursor: pointer; }html[data-page="api-fleet_archive"] .data-table tr:hover{ background: var(--border-2); }html[data-page="api-fleet_archive"] .data-table .sort-asc::after{ content: ' ▲'; }html[data-page="api-fleet_archive"] .data-table .sort-desc::after{ content: ' ▼'; }

html[data-page="api-fleet_archive"] .fleet-log-count{font-weight:bold;color:var(--accent)}html[data-page="api-fleet_archive"] .fleet-pager{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-top:12px;flex-wrap:wrap}html[data-page="api-fleet_archive"] .fleet-pager-button{padding:8px 12px;border:1px solid var(--border);background:var(--btn);color:var(--fg);border-radius:4px;cursor:pointer}html[data-page="api-fleet_archive"] .fleet-page-status{color:var(--muted);font-weight:600}html[data-page="api-fleet_archive"] .fleet-error{color:var(--danger)}html[data-page="api-fleet_archive"] .fleet-result-danger{color:var(--danger)}html[data-page="api-fleet_archive"] .fleet-result-accent{color:var(--accent)}

html[data-page="api-fleet_archive"] .search-filter-controls{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:8px;
  padding:12px;
}
html[data-page="api-fleet_archive"] .search-bar-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:10px;
}
html[data-page="api-fleet_archive"] .filter-bar{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:10px;
  align-items:center;
}
html[data-page="api-fleet_archive"] .fleet-date-range{
  display:grid;
  grid-template-columns:minmax(132px, .75fr) minmax(240px, 1.45fr);
  gap:6px 8px;
  align-items:end;
  grid-column:span 2;
}
html[data-page="api-fleet_archive"] .fleet-filter-label{
  grid-column:1 / -1;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  line-height:1.1;
  text-transform:uppercase;
}
html[data-page="api-fleet_archive"] .fleet-date-custom{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap:6px;
  align-items:center;
}
html[data-page="api-fleet_archive"] .fleet-date-custom label{
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}
html[data-page="api-fleet_archive"] .search-bar-row input,
html[data-page="api-fleet_archive"] .filter-bar input,
html[data-page="api-fleet_archive"] .filter-bar select,
html[data-page="api-fleet_archive"] .filter-bar button,
html[data-page="api-fleet_archive"] #btnSearchApply{
  width:100%;
  min-width:0;
  min-height:40px;
  box-sizing:border-box;
}
html[data-page="api-fleet_archive"] .filter-bar button{
  font-weight:700;
}
html[data-page="api-fleet_archive"] .data-table th{
  white-space:nowrap;
}
html[data-page="api-fleet_archive"] .data-table td{
  vertical-align:top;
}
html[data-page="api-fleet_archive"]{
  --header-h:64px;
}
html[data-page="api-fleet_archive"] .header{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  grid-template-areas:
    "back title nav"
    "back count nav";
  gap:2px 12px;
  align-items:center;
  min-height:var(--header-h);
  height:auto;
}
html[data-page="api-fleet_archive"] #archiveUserBack{
  grid-area:back;
}
html[data-page="api-fleet_archive"] .header-title{
  grid-area:title;
  margin:0;
}
html[data-page="api-fleet_archive"] .header-right-controls{
  display:contents;
}
html[data-page="api-fleet_archive"] .fleet-log-count{
  grid-area:count;
  justify-self:start;
  font-size:12px;
  line-height:1.2;
}
html[data-page="api-fleet_archive"] .header-right-controls .st-admin-nav{
  grid-area:nav;
  justify-self:end;
}
@media (max-width:760px){
  html[data-page="api-fleet_archive"]{
    --header-h:auto;
  }
  html[data-page="api-fleet_archive"] body{
    padding-top:0;
  }
  html[data-page="api-fleet_archive"] .header{
    position:static;
    min-height:52px;
    height:auto;
    flex-wrap:wrap;
    gap:8px;
    padding:10px;
  }
  html[data-page="api-fleet_archive"] .header-title{
    order:3;
    flex:1 1 100%;
    margin:0;
  }
  html[data-page="api-fleet_archive"] .header-right-controls{
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  html[data-page="api-fleet_archive"] .main-content{
    padding:10px;
  }
  html[data-page="api-fleet_archive"] .search-bar-row{
    grid-template-columns:1fr;
  }
  html[data-page="api-fleet_archive"] .filter-bar{
    grid-template-columns:1fr;
  }
  html[data-page="api-fleet_archive"] .fleet-date-range{
    grid-template-columns:1fr;
    grid-column:auto;
  }
  html[data-page="api-fleet_archive"] .fleet-pager{
    justify-content:stretch;
    padding:0 10px 12px;
  }
  html[data-page="api-fleet_archive"] .fleet-pager-button,
  html[data-page="api-fleet_archive"] .fleet-page-status{
    flex:1 1 100%;
    text-align:center;
  }
}

/* source: api/qrGen1.html */
html[data-page="api-qrGen1"] body{
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 20px;
        }html[data-page="api-qrGen1"] textarea{
            width: 80%;
            height: 100px;
        }html[data-page="api-qrGen1"] canvas{
            margin-top: 15px;
        }

/* source: api/qr_generator.html */
html[data-page="api-qr_generator"]{
      --bg:#0b1220; --panel:#0f172a; --fg:#e5e7eb; --muted:#9fb0c4; --border:#1f2937;
      --accent:#13c98a; --ring:rgba(19,201,138,.32);
    }html[data-page="api-qr_generator"] *{ box-sizing: border-box; }html[data-page="api-qr_generator"], html[data-page="api-qr_generator"] body{ height:100%; }html[data-page="api-qr_generator"] body{
      margin:0; padding:20px; background:var(--bg); color:var(--fg);
      font:14px system-ui,Segoe UI,Roboto,Arial,sans-serif;
      display:grid; place-items:start center;
    }html[data-page="api-qr_generator"] .wrap{
      width:min(720px, 96vw);
      background:var(--panel);
      border:1px solid var(--border);
      border-radius:14px;
      padding:16px;
      box-shadow:0 10px 30px rgba(0,0,0,.35);
    }html[data-page="api-qr_generator"] h2{ margin:0 0 10px; font-size:18px }html[data-page="api-qr_generator"] .hint{ color:var(--muted); font-size:12px; margin:4px 0 12px }html[data-page="api-qr_generator"] textarea, html[data-page="api-qr_generator"] input{
      width:100%;
      background:#0b1220; color:var(--fg);
      border:1px solid var(--border); border-radius:10px;
      padding:10px 12px;
    }html[data-page="api-qr_generator"] textarea{ height:100px; resize:vertical }html[data-page="api-qr_generator"] .row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }html[data-page="api-qr_generator"] .btn{
      background:#162131; color:var(--fg); border:1px solid #233246;
      padding:8px 12px; border-radius:10px; cursor:pointer;
    }html[data-page="api-qr_generator"] .btn:hover{ background:#1c2a3e }html[data-page="api-qr_generator"] .btn.primary{ border-color:#1a4f3e; box-shadow:0 0 0 3px var(--ring) inset }html[data-page="api-qr_generator"] .grid{ display:grid; grid-template-columns: 1fr 280px; gap:12px; }@media (max-width:840px){html[data-page="api-qr_generator"] .grid{ grid-template-columns: 1fr }}html[data-page="api-qr_generator"] .panel{
      border:1px solid var(--border); border-radius:12px; padding:12px; background:#0c1524;
    }html[data-page="api-qr_generator"] .qr-host{
      display:flex; align-items:center; justify-content:center;
      min-height:260px; border:1px dashed #24334a; border-radius:12px; background:#0b1220;
      position:relative; overflow:hidden;
    }html[data-page="api-qr_generator"] #qrCanvas{ position:relative; width:256px; height:256px; }html[data-page="api-qr_generator"] #qrImg{ max-width:100%; height:auto; display:none; image-rendering:pixelated; }html[data-page="api-qr_generator"] code, html[data-page="api-qr_generator"] .mono{
      font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    }html[data-page="api-qr_generator"] .mono.small{ font-size:12px; color:#c3d2e6; word-break:break-all }html[data-page="api-qr_generator"] .foot{ display:flex; gap:8px; justify-content:flex-end; align-items:center; flex-wrap:wrap; }html[data-page="api-qr_generator"] .foot a{ text-decoration:none }

/* source: tools/session_debug.php */
html[data-page="tools-session_debug"] body{font-family:system-ui, sans-serif;background:#0b1220;color:#e5e7eb;padding:2em}html[data-page="tools-session_debug"] table{border-collapse:collapse;width:100%;max-width:640px}html[data-page="tools-session_debug"] td, html[data-page="tools-session_debug"] th{border:1px solid #1f2937;padding:8px 10px;text-align:left}html[data-page="tools-session_debug"] th{background:#111827}html[data-page="tools-session_debug"] h1{font-size:1.5em}html[data-page="tools-session_debug"] .session-debug-ip{margin-top:2em}


/* source: api/forms_create.php */
html[data-page="api-forms_create"]{
      --bg:#0b0f12; --panel:#12181d; --panel-2:#171e24; --text:#e7f2ff; --muted:#96a3b3;
      --accent:#13c98a; --danger:#ff4757; --amber:#ffb020; --btn-b:#2a3946; --ring:rgba(19,201,138,.35);
      --okbg:rgba(19,201,138,.08); --okbd:rgba(19,201,138,.35);
      --badbg:rgba(255,71,87,.08); --badbd:rgba(255,71,87,.35);
    }
html[data-page="api-forms_create"] *{box-sizing:border-box}
html[data-page="api-forms_create"], html[data-page="api-forms_create"] body{height:100%}
html[data-page="api-forms_create"] body{
      margin:0; color:var(--text); background:radial-gradient(1200px 800px at 50% -10%, #18222b 0%, var(--bg) 60%);
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans","Helvetica Neue",Arial;
    }
html[data-page="api-forms_create"] .wrap{max-width:1024px;margin:0 auto;padding:16px env(safe-area-inset-right) 28px env(safe-area-inset-left);display:grid;gap:14px}
html[data-page="api-forms_create"] header{display:flex;align-items:center;justify-content:space-between;gap:10px}
html[data-page="api-forms_create"] .brand{display:flex;align-items:center;gap:10px}
html[data-page="api-forms_create"] .led{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #4dffbf, #0f5138);box-shadow:0 0 0 2px #0d3729,0 0 12px 2px #19eaa2;animation:blink 2.6s infinite}
    @keyframes blink{0%,93%,100%{opacity:1}95%{opacity:.3}97%{opacity:.8}}
html[data-page="api-forms_create"] h1{margin:0;font-size:1.2rem}
html[data-page="api-forms_create"] .sub{color:var(--muted);font-size:.95rem}

html[data-page="api-forms_create"] .card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid #22313d;border-radius:16px;padding:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 10px 30px rgba(0,0,0,.25)}
html[data-page="api-forms_create"] .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
html[data-page="api-forms_create"] .kv{background:#0e1419;border:1px solid #233240;border-radius:12px;padding:10px}
html[data-page="api-forms_create"] .label{color:var(--muted);font-size:.82rem}
html[data-page="api-forms_create"] .value{margin-top:4px;font-weight:650}

html[data-page="api-forms_create"] .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 14px;border-radius:12px;background:#0f161c;border:1px solid var(--btn-b);color:#e7f2ff;font-weight:700;cursor:pointer;text-decoration:none}
html[data-page="api-forms_create"] .btn.primary{border-color:#1a4f3e;box-shadow:0 0 0 3px rgba(19,201,138,.07) inset}
html[data-page="api-forms_create"] .btn.warn{border-color:#5f430e;box-shadow:0 0 0 3px rgba(255,176,32,.08) inset}
html[data-page="api-forms_create"] .btn.danger{border-color:#5c1c20;box-shadow:0 0 0 3px rgba(255,71,87,.08) inset}
html[data-page="api-forms_create"] .btn.sm{min-height:34px;padding:6px 10px;border-radius:10px;font-size:.9rem}

html[data-page="api-forms_create"] .banner{border-radius:12px;padding:10px 12px;font-weight:750;letter-spacing:.4px;text-transform:uppercase;text-align:center;border:1px solid}
html[data-page="api-forms_create"] .banner.ok{background:var(--okbg);border-color:var(--okbd)}
html[data-page="api-forms_create"] .banner.oos{background:var(--badbg);border-color:var(--badbd)}

html[data-page="api-forms_create"] .tabs{display:flex;gap:8px;flex-wrap:wrap}
html[data-page="api-forms_create"] .tab{padding:8px 12px;border:1px solid #243544;border-radius:999px;cursor:pointer;color:var(--muted);user-select:none}
html[data-page="api-forms_create"] .tab.active{border-color:#1a4f3e;color:var(--text);box-shadow:0 0 0 3px rgba(19,201,138,.06) inset}

html[data-page="api-forms_create"] .logs{display:grid;gap:8px}
html[data-page="api-forms_create"] .log{border:1px solid #233240;border-radius:12px;background:#0c1319;padding:10px}
html[data-page="api-forms_create"] .log.pass{border-color:var(--okbd);background:var(--okbg)}
html[data-page="api-forms_create"] .log.fail, html[data-page="api-forms_create"] .log.oos{border-color:var(--badbd);background:var(--badbg)}
html[data-page="api-forms_create"] .log-head{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
html[data-page="api-forms_create"] .badge{display:inline-block;border:1px solid #31445c;border-radius:999px;padding:2px 8px;font-size:11px;color:#cbd5e1}
html[data-page="api-forms_create"] .hint{color:var(--muted);font-size:.88rem}

html[data-page="api-forms_create"] details{border-top:1px solid #1f2a35;margin-top:8px;padding-top:8px}
html[data-page="api-forms_create"] summary{cursor:pointer;list-style:none}
html[data-page="api-forms_create"] summary::-webkit-details-marker{display:none}

html[data-page="api-forms_create"] .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    @media (max-width:720px){html[data-page="api-forms_create"] .grid2{grid-template-columns:1fr}}

html[data-page="api-forms_create"] .photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
html[data-page="api-forms_create"] .photos img{width:100%;height:96px;object-fit:cover;border-radius:8px;border:1px solid #1f2937;background:#0b1116}

html[data-page="api-forms_create"] .sigpad-wrap{background:#0b1116;border:1px solid #243544;border-radius:12px;padding:8px}
html[data-page="api-forms_create"] #sigPad{width:100%;height:160px;display:block;border-radius:8px;background:#0c1319;cursor:crosshair;touch-action:none}

    /* Parts: base table */
html[data-page="api-forms_create"] table.parts{width:100%;border-collapse:separate;border-spacing:0 8px}
html[data-page="api-forms_create"] table.parts td{background:#0e1419;border:1px solid #233240;padding:8px}
html[data-page="api-forms_create"] table.parts td:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}
html[data-page="api-forms_create"] table.parts td:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}

html[data-page="api-forms_create"] input, html[data-page="api-forms_create"] textarea, html[data-page="api-forms_create"] select{width:100%;background:#0b1116;color:var(--text);border:1px solid #243544;border-radius:12px;padding:10px;font-size:1rem}
html[data-page="api-forms_create"] textarea{min-height:110px;resize:vertical}

html[data-page="api-forms_create"] .toast{position:fixed;left:50%;transform:translateX(-50%);bottom:max(16px, env(safe-area-inset-bottom));background:#0f161c;border:1px solid #274052;padding:12px 14px;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:1000;opacity:0;pointer-events:none;transition:opacity .25s}
html[data-page="api-forms_create"] .toast.show{opacity:1}

    /* ===== New Inspection grid =====
       Notes area removed from grid (no "notes" block). */
html[data-page="api-forms_create"] .new-inspect{
      display:grid;
      grid-template-areas:
        "head   head"
        "form   form"
        "left   sig"
        "actions actions";
      grid-template-columns: minmax(0, 1fr) minmax(420px, 1.25fr);
      gap: 10px;
    }
html[data-page="api-forms_create"] .ni-head{ grid-area: head; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
html[data-page="api-forms_create"] .ni-title strong{ display:block; }
html[data-page="api-forms_create"] .ni-title .hint{ margin-top:4px; }
html[data-page="api-forms_create"] .ni-ctrls{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
html[data-page="api-forms_create"] .ni-ctrls .label{ align-self:center; }
html[data-page="api-forms_create"] #formWrap{ grid-area: form; }
    /* .ni-notes removed */
html[data-page="api-forms_create"] .ni-left{
      grid-area: left;
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:10px;
      align-content:start;
    }
html[data-page="api-forms_create"] .ni-left > .card{ margin-top:0 !important; }
html[data-page="api-forms_create"] .ni-signature{ grid-area: sig; }
html[data-page="api-forms_create"] .ni-actions{ grid-area: actions; }

    /* ===== Responsive Parts tables (stack fields vertically on mobile) ===== */
    @media (max-width:720px){
      table.parts thead,
html[data-page="api-forms_create"] #partsFSTable thead{ display:none; }

      table.parts tr,
html[data-page="api-forms_create"] #partsFSTable tr{
        display:block;
        background:#0e1419;
        border:1px solid #233240;
        border-radius:12px;
        padding:10px;
        margin-bottom:10px;
      }

      table.parts td,
html[data-page="api-forms_create"] #partsFSTable td{
        display:block;
        border:0;
        padding:6px 0;
        width:100%;
      }

      table.parts td::before,
html[data-page="api-forms_create"] #partsFSTable td::before{
        content: attr(data-label);
        display:block;
        font-size:.82rem;
        color:var(--muted);
        margin-bottom:4px;
      }

      table.parts td:last-child,
html[data-page="api-forms_create"] #partsFSTable td:last-child{ padding-top:8px; }
    }

    /* ===== Fullscreen Parts Editor ===== */
html[data-page="api-forms_create"] .fs-backdrop{
      position:fixed; inset:0; z-index:2000;
      background:rgba(0,0,0,.55);
      display:flex; align-items:center; justify-content:center;
      padding:20px;
    }
html[data-page="api-forms_create"] .fs-panel{
      width:min(1100px, 95vw);
      height:min(90vh, 900px);
      background:linear-gradient(180deg,var(--panel),var(--panel-2));
      border:1px solid #22313d;
      border-radius:16px;
      box-shadow:0 18px 60px rgba(0,0,0,.45);
      display:flex; flex-direction:column;
    }
html[data-page="api-forms_create"] .fs-head{
      padding:14px 16px; border-bottom:1px solid #22313d;
      display:flex; align-items:center; justify-content:space-between; gap:10px;
    }
html[data-page="api-forms_create"] .fs-title{ font-weight:800 }
html[data-page="api-forms_create"] .fs-body{
      padding:14px 16px; overflow:auto; display:grid; gap:12px;
    }
html[data-page="api-forms_create"] .fs-actions{
      padding:12px 16px; border-top:1px solid #22313d;
      display:flex; justify-content:flex-end; gap:10px;
    }

    /* Bigger inputs inside the FS editor */
html[data-page="api-forms_create"] #partsFS table{ width:100%; border-collapse:separate; border-spacing:0 10px; }
html[data-page="api-forms_create"] #partsFS td{ background:#0e1419; border:1px solid #233240; padding:10px; vertical-align:top; }
html[data-page="api-forms_create"] #partsFS td:first-child{ width:90px; }
html[data-page="api-forms_create"] #partsFS input[type="text"], html[data-page="api-forms_create"] #partsFS input[type="number"], html[data-page="api-forms_create"] #partsFS select, html[data-page="api-forms_create"] #partsFS textarea{
      width:100%; background:#0b1116; color:var(--text); border:1px solid #243544;
      border-radius:10px; padding:10px; font-size:1rem;
    }
html[data-page="api-forms_create"] #partsFS textarea{ min-height:120px; resize:vertical; }

    /* ===== Logs top bar ===== */
html[data-page="api-forms_create"] .logs-topbar{
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 12px;
    }
html[data-page="api-forms_create"] .logs-topbar .tabs{ margin: 0; }
html[data-page="api-forms_create"] .pager-right{
      display: flex;
      align-items: center;
      gap: 8px;
      justify-self: end;
    }
html[data-page="api-forms_create"] .hidden{ display: none !important; }

    @media (max-width: 720px){
html[data-page="api-forms_create"] .logs-topbar{ grid-template-columns: 1fr; gap: 6px; }
html[data-page="api-forms_create"] .pager-right{ justify-self: start; }
    }
html[data-page="api-forms_create"] .forms-create-type-select{min-width:160px}html[data-page="api-forms_create"] .forms-create-card-flat{margin-top:0}html[data-page="api-forms_create"] .forms-create-gap-8{gap:8px}html[data-page="api-forms_create"] .forms-create-fail-list{margin:6px 0 0 18px;padding:0}html[data-page="api-forms_create"] .forms-create-upload-label{cursor:pointer}html[data-page="api-forms_create"] .forms-create-label-tight{margin-bottom:6px}html[data-page="api-forms_create"] .forms-create-sig-img{max-height:80px;border:1px solid #1f2937;border-radius:8px;background:#0b1116}

/* source: views/log_pdf_template.php */
html[data-page="views-log_pdf_template"] body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans","Helvetica Neue",Arial;color:#000;background:#fff;font-size:12px}html[data-page="views-log_pdf_template"] .header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ccc;padding:6px 0}html[data-page="views-log_pdf_template"] .header-brand{display:flex;align-items:center;gap:6px}html[data-page="views-log_pdf_template"] .header-brand img{height:20px;width:auto}html[data-page="views-log_pdf_template"] .header-title{font-weight:600;font-size:14px}html[data-page="log_pdf"] .panel-sub-spaced{margin-top:6px;margin-bottom:3px}html[data-page="log_pdf"] .checklist-label{width:40%}html[data-page="log_pdf"] .binder-title{margin:0 0 6px 0;font-size:18px}html[data-page="log_pdf"] .binder-meta{margin:0 0 4px 0;font-size:11px}html[data-page="log_pdf"] .binder-summary{margin:4px 0 4px 0;font-size:11px}html[data-page="log_pdf"] .binder-note{margin:10px 0 0 0;font-size:11px;color:#6b7280}


/* source: lib/log_pdf_template.php */
html[data-page="log_pdf"] body{
    margin:0;
    font-family:DejaVu Sans, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size:12px;
    color:#000000;
    background:#ffffff;
  }
  @page{
    margin:10mm 8mm 10mm 8mm;
  }
html[data-page="log_pdf"] .log-page{
    max-width:960px;
    margin:0 auto;
    padding:14mm 8mm 12mm; /* extra top padding for clipboard clip */
    box-sizing:border-box;
    page-break-after:always;
  }
html[data-page="log_pdf"] .log-page:last-child{
    page-break-after:auto;
  }

  /* ------------------------------------------------------------------
   * Top header: one-line layout (Agency | Inspection Log # | Asset #)
   * ------------------------------------------------------------------ */
html[data-page="log_pdf"] .top-header{
    width:100%;
    margin-bottom:6px;
    overflow:hidden;
  }
html[data-page="log_pdf"] .top-logo{
    float:left;
    margin-right:6px;
  }
html[data-page="log_pdf"] .top-logo img{
    max-height:18px;
  }
html[data-page="log_pdf"] .top-line{
    width:100%;
    border-collapse:collapse;
    font-size:11px;
  }
html[data-page="log_pdf"] .top-cell{
    padding:0 2px;
    vertical-align:middle;
    white-space:nowrap;
  }
html[data-page="log_pdf"] .top-left{
    text-align:left;
  }
html[data-page="log_pdf"] .top-center{
    text-align:center;
  }
html[data-page="log_pdf"] .top-right{
    text-align:right;
  }
html[data-page="log_pdf"] .top-agency{
    font-weight:600;
  }
html[data-page="log_pdf"] .top-page-title{
    font-size:13px;
    font-weight:700;
  }
html[data-page="log_pdf"] .top-asset-ref{
    font-size:11px;
    color:#111827;
  }

html[data-page="log_pdf"] .panel{
    background:#ffffff;
    border-radius:10px;
    border:1px solid #d1d5db;
    margin-top:8px;
    overflow:hidden;
    page-break-inside:avoid;
  }
html[data-page="log_pdf"] .panel-head{
    padding:6px 8px;
    border-bottom:1px solid #e5e7eb;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
  }
html[data-page="log_pdf"] .panel-title{
    font-weight:600;
    font-size:12px;
  }
html[data-page="log_pdf"] .panel-body{
    padding:7px 8px 9px;
  }

html[data-page="log_pdf"] .overview-layout{
    width:100%;
    border-collapse:collapse;
  }
html[data-page="log_pdf"] .overview-layout td.ov-col{
    vertical-align:top;
    width:50%;
    padding:0 4px;
  }
html[data-page="log_pdf"] .meta-table{
    width:100%;
    border-collapse:collapse;
    font-size:11px;
  }
html[data-page="log_pdf"] .meta-table th{
    text-align:right;
    padding:2px 4px;
    color:#6b7280;
    width:40%;
    white-space:nowrap;
  }
html[data-page="log_pdf"] .meta-table td{
    text-align:left;
    padding:2px 4px;
    width:60%;
    word-break:break-word;
  }

html[data-page="log_pdf"] .panel-sub{
    font-size:11px;
    font-weight:500;
    color:#374151;
  }
html[data-page="log_pdf"] .muted{
    color:#6b7280;
  }
html[data-page="log_pdf"] .hint{
    color:#6b7280;
    font-size:11px;
  }

html[data-page="log_pdf"] .table-wrapper{
    border-radius:8px;
    border:1px solid #d1d5db;
    overflow:hidden;
  }
html[data-page="log_pdf"] .checklist-table{
    width:100%;
    border-collapse:collapse;
    font-size:11px;
    table-layout:fixed;
  }
html[data-page="log_pdf"] .checklist-table thead th{
    text-align:left;
    padding:5px 6px;
    border-bottom:1px solid #d1d5db;
    background:#f3f4f6;
    color:#111827;
  }
html[data-page="log_pdf"] .checklist-table tbody td{
    padding:4px 6px;
    border-bottom:1px solid #e5e7eb;
    vertical-align:top;
  }

html[data-page="log_pdf"] .gps-row{
    font-size:11px;
    color:#6b7280;
    margin-top:2px;
  }
html[data-page="log_pdf"] .gps-row code{
    font-size:10px;
    background:#f9fafb;
    border-radius:4px;
    padding:1px 4px;
    border:1px solid #e5e7eb;
  }

 /* Signature panel — small, like a real signature line */
  /* Signature panel — small, like a real signature line */
html[data-page="log_pdf"] .signature-panel{
    page-break-inside:avoid;
    margin-left:auto;     /* push to right side */
    width:45%;            /* narrower block */
    margin-top:6px;
    text-align:right;
  }

html[data-page="log_pdf"] .sig-box{
    border-radius:4px;
    border:1px solid #d1d5db;
    padding:3px 6px;
    background:#ffffff;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    min-height:32px;       /* short, signature-line feel */
    box-sizing:border-box;
  }

html[data-page="log_pdf"] .sig-box img{
    max-width:200px;       /* modest width */
    max-height:32px;       /* thin strip */
    object-fit:contain;
  }

  /* Line used when no signature image exists */
html[data-page="log_pdf"] .sig-line{
    width:100%;
    border-bottom:1px solid #111827;
    height:0;
  }

html[data-page="log_pdf"] .sig-caption{
    margin-top:2px;
    font-size:9px;         /* smaller text, per your ask */
    color:#4b5563;
  }

/* ==========================================================================
   admin_forms — HARD RESET AGAINST GLOBAL CSS COLLISIONS
   Put at VERY BOTTOM of styles.css
   Purpose: override unscoped .row/.wrap/header/body rules from other pages
   ========================================================================== */

html[data-page="admin_forms"] body{
  /* index.html block sets body { display:grid; place-items:center; } */
  display: block !important;
  place-items: unset !important;
}

/* index.html block defines .wrap max-width:420 centered — admin_forms uses .wrap too */
html[data-page="admin_forms"] .wrap{
  width: 100% !important;
  max-width: 1100px !important;
  margin: 10px auto !important;
  padding: 0 12px !important;
}

/* admin_forms relies on .row as flex */
html[data-page="admin_forms"] .row{
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

/* index.html block defines header text-align center; other pages redefine header too */
html[data-page="admin_forms"] header{
  text-align: left !important;
  display: block !important; /* keep your internal layout via .header-wrap */
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  background: #0f172a !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Force the admin_forms header container behavior regardless of global CSS */
html[data-page="admin_forms"] .header-wrap{
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 10px 12px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Toolbar wrapper reset (global grid/flex rules sometimes stomp these too) */
html[data-page="admin_forms"] .toolbar{
  position: sticky !important;
  top: var(--header-h) !important;
  z-index: 25 !important;
  background: #0f172a !important;
  border-bottom: 1px solid var(--border) !important;
}
html[data-page="admin_forms"] .toolbar-wrap{
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 8px 12px !important;
  display: grid !important;
  gap: 8px !important;
}

/* --- Mobile: true left align + wrap + no offscreen --- */
@media (max-width: 700px){

  html[data-page="admin_forms"] .header-wrap,
  html[data-page="admin_forms"] .toolbar-wrap,
  html[data-page="admin_forms"] .wrap{
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  html[data-page="admin_forms"] .header-wrap{
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  html[data-page="admin_forms"] header h1{
    width: 100% !important;
    text-align: left !important;
    white-space: normal !important;
  }

  /* Make the header buttons wrap instead of pushing offscreen */
  html[data-page="admin_forms"] header .row{
    width: 100% !important;
    justify-content: flex-start !important;
  }
  html[data-page="admin_forms"] header .row > *{
    flex: 1 1 140px !important;
    min-width: 0 !important;
  }

  /* Toolbar stack */
  html[data-page="admin_forms"] .trow,
  html[data-page="admin_forms"] .tcontrols{
    grid-template-columns: 1fr !important;
  }

  html[data-page="admin_forms"] #q,
  html[data-page="admin_forms"] .toolbar select,
  html[data-page="admin_forms"] .toolbar input,
  html[data-page="admin_forms"] #pageSize,
  html[data-page="admin_forms"] #btnExport,
  html[data-page="admin_forms"] .combo-wrap,
  html[data-page="admin_forms"] .combo-wrap input{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Segments scroll instead of breaking layout */
  html[data-page="admin_forms"] .seg{
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  html[data-page="admin_forms"] .seg button{
    flex: 0 0 auto !important;
  }
  
  /* ==========================================================================
   admin_forms — MOBILE: scope + sort segments should FIT (no side scroll)
   Assumes .scope-seg and .seg are your segmented button groups.
   ========================================================================== */

@media (max-width: 700px){

  /* Scope segment: make it a 3-up grid that fills width */
  html[data-page="admin_forms"] .scope-seg{
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    border-radius: 10px;
    overflow: hidden;
  }
  html[data-page="admin_forms"] .scope-seg button{
    width: 100% !important;
    min-width: 0 !important;
    flex: unset !important;
  }

  /* Sort segment: wrap into rows (no horizontal scroll) */
  html[data-page="admin_forms"] .seg{
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;      /* key: allow wrapping */
    overflow-x: hidden !important;   /* key: disable horizontal scrolling */
    gap: 6px !important;             /* slight breathing room when wrapped */
    padding: 6px !important;         /* so borders still look good */
    border-radius: 10px;
  }

  /* Make each sort button auto-fit; two-per-row is usually ideal */
  html[data-page="admin_forms"] .seg button{
    flex: 1 1 calc(50% - 6px) !important; /* 2 per row */
    min-width: 0 !important;
    border-radius: 9px !important;        /* since we're no longer a single strip */
    border: 1px solid var(--border) !important;
    background: #0b1220 !important;
  }

  /* Keep active state */
  html[data-page="admin_forms"] .seg button.active{
    background: #172033 !important;
  }
}
/* ==========================================================================
   admin_forms — COMPACT MOBILE/DSK TOOLBAR + BUTTONS + PAGER
   Paste at VERY BOTTOM of styles1.css
   ========================================================================== */

html[data-page="admin_forms"]{
  /* tweakable compact heights */
  --hdr-pad-y: 8px;
  --hdr-pad-x: 12px;
  --tb-pad-y: 6px;
  --tb-pad-x: 12px;
}

/* --- Header/Toolbar: reduce vertical footprint everywhere --- */
html[data-page="admin_forms"] .header-wrap{
  padding: var(--hdr-pad-y) var(--hdr-pad-x) !important;
}
html[data-page="admin_forms"] .toolbar-wrap{
  padding: var(--tb-pad-y) var(--tb-pad-x) !important;
}

/* --- Scope buttons (Agency / Global / All): shrink-to-fit in ONE row --- */
html[data-page="admin_forms"] .scope-seg{
  width: auto !important;
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
}
html[data-page="admin_forms"] .scope-seg button{
  flex: 0 0 auto !important;     /* do NOT expand */
  width: auto !important;
  padding: 6px 10px !important;
  font-size: 12.5px !important;
}

/* --- Sort buttons: compact, wrap if needed, never “wide tiles” --- */
html[data-page="admin_forms"] .seg{
  width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;     /* allows multiple rows if needed */
  overflow: hidden !important;    /* no side scroll */
  gap: 6px !important;
  padding: 6px !important;
  border-radius: 10px;
}
html[data-page="admin_forms"] .seg button{
  flex: 0 0 auto !important;      /* shrink to content */
  width: auto !important;
  padding: 6px 8px !important;
  font-size: 12px !important;
  border-radius: 9px !important;
  border: 1px solid var(--border) !important;
}

/* --- Put Asset Type above Insp. Type (layout-only; requires HTML IDs/classes) ---
   This assumes the two control rows share .tline and each control has a wrapper.
   If your wrappers are different, tell me the exact markup and I’ll retarget. */
@media (max-width: 700px){
  html[data-page="admin_forms"] .tline{
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

/* --- Pager: keep prev/next in a single row, minimal vertical space --- */
html[data-page="admin_forms"] .pager{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
}
html[data-page="admin_forms"] .pager > *{
  flex: 0 0 auto !important;
}
html[data-page="admin_forms"] .pager button{
  padding: 6px 10px !important;
  font-size: 12.5px !important;
}

/* --- Critical: your sticky header+toolbar are consuming the viewport.
   Make the LIST AREA account for their height by giving the content a top padding.
   This prevents “I can’t scroll to see the list” when stickies overlap. */
html[data-page="admin_forms"] .wrap{
  padding-top: 8px !important;
}

/* Optional: keep table visible by ensuring it can scroll if the page is short */
html[data-page="admin_forms"] .table-wrap{
  max-height: calc(100dvh - 180px); /* header+toolbar+panel head approx */
}
/* Hide sticky bars when scrolling down (JS toggles this class) */
html[data-page="admin_forms"].af-sticky-hidden header{
  transform: translateY(-110%);
  transition: transform .18s ease;
}
html[data-page="admin_forms"].af-sticky-hidden .toolbar{
  transform: translateY(-110%);
  transition: transform .18s ease;
}

/* Normal state transitions */
html[data-page="admin_forms"] header,
html[data-page="admin_forms"] .toolbar{
  transition: transform .18s ease;
}
/* ==========================================================================
   admin_forms — COMPACT MOBILE/DSK TOOLBAR + BUTTONS + PAGER
   Paste at VERY BOTTOM of styles1.css
   ========================================================================== */

html[data-page="admin_forms"]{
  /* tweakable compact heights */
  --hdr-pad-y: 8px;
  --hdr-pad-x: 12px;
  --tb-pad-y: 6px;
  --tb-pad-x: 12px;
}

/* --- Header/Toolbar: reduce vertical footprint everywhere --- */
html[data-page="admin_forms"] .header-wrap{
  padding: var(--hdr-pad-y) var(--hdr-pad-x) !important;
}
html[data-page="admin_forms"] .toolbar-wrap{
  padding: var(--tb-pad-y) var(--tb-pad-x) !important;
}

/* --- Scope buttons (Agency / Global / All): shrink-to-fit in ONE row --- */
html[data-page="admin_forms"] .scope-seg{
  width: auto !important;
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
}
html[data-page="admin_forms"] .scope-seg button{
  flex: 0 0 auto !important;     /* do NOT expand */
  width: auto !important;
  padding: 6px 10px !important;
  font-size: 12.5px !important;
}

/* --- Sort buttons: compact, wrap if needed, never “wide tiles” --- */
html[data-page="admin_forms"] .seg{
  width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;     /* allows multiple rows if needed */
  overflow: hidden !important;    /* no side scroll */
  gap: 6px !important;
  padding: 6px !important;
  border-radius: 10px;
}
html[data-page="admin_forms"] .seg button{
  flex: 0 0 auto !important;      /* shrink to content */
  width: auto !important;
  padding: 6px 8px !important;
  font-size: 12px !important;
  border-radius: 9px !important;
  border: 1px solid var(--border) !important;
}

/* --- Put Asset Type above Insp. Type (layout-only; requires HTML IDs/classes) ---
   This assumes the two control rows share .tline and each control has a wrapper.
   If your wrappers are different, tell me the exact markup and I’ll retarget. */
@media (max-width: 700px){
  html[data-page="admin_forms"] .tline{
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

/* --- Pager: keep prev/next in a single row, minimal vertical space --- */
html[data-page="admin_forms"] .pager{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
}
html[data-page="admin_forms"] .pager > *{
  flex: 0 0 auto !important;
}
html[data-page="admin_forms"] .pager button{
  padding: 6px 10px !important;
  font-size: 12.5px !important;
}

/* --- Critical: your sticky header+toolbar are consuming the viewport.
   Make the LIST AREA account for their height by giving the content a top padding.
   This prevents “I can’t scroll to see the list” when stickies overlap. */
html[data-page="admin_forms"] .wrap{
  padding-top: 8px !important;
}

/* Optional: keep table visible by ensuring it can scroll if the page is short */
html[data-page="admin_forms"] .table-wrap{
  max-height: calc(100dvh - 180px); /* header+toolbar+panel head approx */
}
/* ==========================================================================
   admin_forms — Toolbar compact + mobile fit (no scrolling segments)
   Paste at VERY BOTTOM of styles1.css
   ========================================================================== */

/* Keep scope buttons compact in one row (shrink to content) */
html[data-page="admin_forms"] .scope-seg{
  width: auto !important;
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
}
html[data-page="admin_forms"] .scope-seg button{
  flex: 0 0 auto !important;
  padding: 6px 10px !important;
  font-size: 12.5px !important;
  white-space: nowrap !important;
}

/* Sort buttons: compact chips that wrap, never fill 50% tiles */
html[data-page="admin_forms"] .sort-seg{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 6px !important;
  overflow: hidden !important;
}
html[data-page="admin_forms"] .sort-seg button{
  flex: 0 0 auto !important;    /* shrink-to-fit */
  width: auto !important;
  padding: 6px 8px !important;
  font-size: 12px !important;
  border-radius: 9px !important;
  border: 1px solid var(--border) !important;
  white-space: nowrap !important;
}

/* Tail area keeps page size + csv + toggle compact */
html[data-page="admin_forms"] .toolbar-tail{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
html[data-page="admin_forms"] #pageSize{ min-width: 120px !important; }
html[data-page="admin_forms"] #btnExport{ white-space: nowrap !important; }

/* Reduce vertical padding so sticky bars don't eat the screen */
html[data-page="admin_forms"] .header-wrap{ padding: 8px 12px !important; }
html[data-page="admin_forms"] .toolbar-wrap{ padding: 6px 12px !important; }

/* Mobile layout: stack lines, but keep scope and tail from blowing up */
@media (max-width:700px){

  /* Each tline becomes a compact grid row */
  html[data-page="admin_forms"] .tline{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* Search should occupy a full row; scope stays compact beside/under it */
  html[data-page="admin_forms"] #q{
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  /* Filters: labels + selects wrap but stay readable */
  html[data-page="admin_forms"] .tline[aria-label="Filters"] label{
    flex: 0 0 auto !important;
  }
  html[data-page="admin_forms"] #atypeSel,
  html[data-page="admin_forms"] #periodSel{
    flex: 1 1 180px !important;
    min-width: 0 !important;
  }

  /* Sort stays compact chips; tail stays on same row if possible */
  html[data-page="admin_forms"] .toolbar-tail{
    margin-left: auto;
  }

  /* If space is too tight, tail can drop to next line but stays one row internally */
  html[data-page="admin_forms"] .toolbar-tail{
    flex-wrap: nowrap;
  }
}

/* Collapsible toolbar (class toggled by JS) */
html[data-page="admin_forms"].toolbar-collapsed .toolbar .tline:not(:first-child){
  display: none !important; /* keep search+scope visible, hide filters+sort */
}
html[data-page="admin_forms"].toolbar-collapsed #btnToolbarToggle{
  transform: rotate(180deg);
}
/* ==========================================================================
   admin_forms — toolbar compact + collapsible + pager row
   Paste at VERY BOTTOM of styles1.css
   ========================================================================== */

/* Scope: single row, shrink-to-fit */
html[data-page="admin_forms"] .scope-seg{
  width:auto !important;
  display:inline-flex !important;
  flex-wrap:nowrap !important;
  overflow:visible !important;
}
html[data-page="admin_forms"] .scope-seg button{
  flex:0 0 auto !important;
  width:auto !important;
  padding:6px 10px !important;
  font-size:12.5px !important;
  white-space:nowrap !important;
}

/* Sort: compact chips (no “big tiles”) */
html[data-page="admin_forms"] .sort-seg{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  padding:6px !important;
  overflow:hidden !important;
}
html[data-page="admin_forms"] .sort-seg button{
  flex:0 0 auto !important;
  width:auto !important;
  padding:6px 8px !important;
  font-size:12px !important;
  border-radius:9px !important;
  border:1px solid var(--border) !important;
  white-space:nowrap !important;
}

/* Top line: keep toggle small and aligned */
html[data-page="admin_forms"] #btnToolbarToggle{
  padding:6px 10px !important;
  font-size:12.5px !important;
  line-height:1 !important;
}

/* Tail: keep page size + csv in one mini-row */
html[data-page="admin_forms"] .toolbar-tail{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  flex:0 0 auto !important;
}
html[data-page="admin_forms"] #pageSize{ min-width:120px !important; }

/* Collapse behavior: hide only FILTER line and sort chips/label; keep tail + toggle visible */
html[data-page="admin_forms"].toolbar-collapsed .tline-filters{
  display:none !important;
}
html[data-page="admin_forms"].toolbar-collapsed .tline-sort .sort-label{
  display:none !important;
}
html[data-page="admin_forms"].toolbar-collapsed .tline-sort .sort-seg{
  display:none !important;
}

/* Rotate toggle caret to show state */
html[data-page="admin_forms"].toolbar-collapsed #btnToolbarToggle{
  transform:rotate(180deg);
}

/* Pager: force one row always */
html[data-page="admin_forms"] .pager{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:8px !important;
}
html[data-page="admin_forms"] .pager button{
  width:auto !important;
  flex:0 0 auto !important;
}
/* ==========================================================================
   admin_forms — COMPACT HEADER / PAGER / TOOLBAR (desktop + mobile)
   Paste at VERY BOTTOM of your active stylesheet
   ========================================================================== */

html[data-page="admin_forms"]{
  --hdr-pad-y: 6px;
  --hdr-pad-x: 10px;
  --tb-pad-y: 6px;
  --tb-pad-x: 10px;
}

/* ---------------- HEADER: single row, minimal height ---------------- */
html[data-page="admin_forms"] header{
  position: sticky;
  top: 0;
  z-index: 30;
}

html[data-page="admin_forms"] .header-wrap{
  padding: var(--hdr-pad-y) var(--hdr-pad-x) !important;
  display: flex !important;
  flex-direction: row !important;     /* force single row even on mobile */
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;       /* prevent stacking */
}

html[data-page="admin_forms"] header h1{
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}

html[data-page="admin_forms"] header .row{
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

html[data-page="admin_forms"] header .row button{
  padding: 6px 10px !important;
  border-radius: 10px !important;
}

/* ---------------- PAGER ROW: always one line, compact ---------------- */
html[data-page="admin_forms"] .admin-forms-row-between{
  align-items: center !important;
  gap: 10px !important;
  margin: 6px 0 !important;          /* reduce vertical waste */
}

html[data-page="admin_forms"] .pager{
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  align-items: center !important;
}

html[data-page="admin_forms"] .pager button{
  width: auto !important;
  flex: 0 0 auto !important;
  padding: 6px 10px !important;
  font-size: 12.5px !important;
}

/* ---------------- TOOLBAR: compact and consistent ---------------- */
html[data-page="admin_forms"] .toolbar-wrap{
  padding: var(--tb-pad-y) var(--tb-pad-x) !important;
}

/* Top line: keep all elements on one line where possible */
html[data-page="admin_forms"] .tline-top{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

/* Search grows, others shrink */
html[data-page="admin_forms"] #q{
  flex: 1 1 auto !important;
  min-width: 120px !important;
}

/* Scope always one row */
html[data-page="admin_forms"] .scope-seg{
  width: auto !important;
  display: inline-flex !important;
  flex-wrap: nowrap !important;
}

html[data-page="admin_forms"] #btnToolbarToggle{
  flex: 0 0 auto !important;
  padding: 6px 10px !important;
}

/* Sort row: allow sort chips to wrap, but keep tail (pageSize+CSV) on one line */
html[data-page="admin_forms"] .tline-sort{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;              /* chips can wrap */
}

html[data-page="admin_forms"] .sort-label{
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

html[data-page="admin_forms"] .sort-seg{
  flex: 1 1 auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 6px !important;
}

html[data-page="admin_forms"] .sort-seg button{
  flex: 0 0 auto !important;
  width: auto !important;
  padding: 6px 8px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

html[data-page="admin_forms"] .toolbar-tail{
  flex: 0 0 auto !important;
  display: inline-flex !important;
  flex-wrap: nowrap !important;            /* always single row */
  gap: 8px !important;
  align-items: center !important;
  margin-left: auto !important;            /* push tail to the right on desktop */
}

html[data-page="admin_forms"] #pageSize{
  min-width: 120px !important;
}
html[data-page="admin_forms"] #btnExport{
  white-space: nowrap !important;
  padding: 6px 10px !important;
}

/* ---------------- Toolbar collapse: MUST apply on desktop too ---------------- */
/* Keep top line visible; hide filters + sort chips/label; tail remains visible */
html[data-page="admin_forms"].toolbar-collapsed .tline-filters{
  display: none !important;
}
html[data-page="admin_forms"].toolbar-collapsed .tline-sort .sort-label{
  display: none !important;
}
html[data-page="admin_forms"].toolbar-collapsed .tline-sort .sort-seg{
  display: none !important;
}

/* Rotate caret to indicate collapsed state */
html[data-page="admin_forms"].toolbar-collapsed #btnToolbarToggle{
  transform: rotate(180deg);
}

/* ==========================================================================
   admin_forms — FINAL TOOLBAR/HEADER/PAGER WRAP FIXES
   Paste at VERY BOTTOM of your active stylesheet
   ========================================================================== */

/* 1) Collapse button should scale like the other controls (not oversized / not fixed weirdly) */
html[data-page="admin_forms"] #btnToolbarToggle{
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 34px !important;       /* small but tappable */
  padding: 6px 10px !important;
  font-size: 12.5px !important;
  line-height: 1 !important;
  border-radius: 10px !important;
}
@media (max-width:700px){
  html[data-page="admin_forms"] #btnToolbarToggle{
    padding: 6px 8px !important;
    font-size: 12px !important;
    min-width: 32px !important;
  }
}

/* 2) On mobile, Filters line should stack:
      Asset Type (label+select) on top, Insp. Type (label+select) under it */
@media (max-width:700px){
  html[data-page="admin_forms"] .tline-filters{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    align-items: start !important;
  }

  html[data-page="admin_forms"] .tline-filters label{
    margin: 0 !important;
  }

  html[data-page="admin_forms"] #atypeSel,
  html[data-page="admin_forms"] #periodSel{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* 3) Desktop header must be single row with buttons (same as mobile) */
html[data-page="admin_forms"] .header-wrap{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
}
html[data-page="admin_forms"] header .row{
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
}

/* 4) Desktop Prev/Next must stay in a single row (no stacking) */
html[data-page="admin_forms"] .admin-forms-row-between{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}
html[data-page="admin_forms"] .pager{
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
}
html[data-page="admin_forms"] .pager button{
  width: auto !important;
  flex: 0 0 auto !important;
}

/* 5) Desktop page-size selector + CSV must be one row (never stacked) */
html[data-page="admin_forms"] .toolbar-tail{
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
}
html[data-page="admin_forms"] #pageSize,
html[data-page="admin_forms"] #btnExport{
  width: auto !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* ==========================================================================
   admin_forms — FORCE HEADER + PAGER TO NEVER STACK (DESKTOP + MOBILE)
   Paste at VERY BOTTOM of your active stylesheet
   ========================================================================== */

/* Header: single row, no wrapping, buttons side-by-side */
html[data-page="admin_forms"] header .header-wrap{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  flex-wrap:nowrap !important;
}

html[data-page="admin_forms"] header .header-wrap > h1{
  margin:0 !important;
  min-width:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

html[data-page="admin_forms"] header .header-wrap > .row{
  display:inline-flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;   /* <-- beats generic .row wrap */
  align-items:center !important;
  gap:8px !important;
}

/* Pager row: keep Page info + Prev/Next on one line; keep Prev/Next side-by-side */
html[data-page="admin_forms"] .wrap > .row.admin-forms-row-between{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
}

html[data-page="admin_forms"] .wrap > .row.admin-forms-row-between > #pi{
  min-width:0 !important;
  white-space:nowrap !important;
}

html[data-page="admin_forms"] .wrap > .row.admin-forms-row-between > .row.pager{
  display:inline-flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;   /* <-- beats generic .row wrap */
  align-items:center !important;
  gap:8px !important;
}

html[data-page="admin_forms"] .wrap > .row.admin-forms-row-between > .row.pager button{
  width:auto !important;
  flex:0 0 auto !important;
  white-space:nowrap !important;
}

/* Toolbar tail: keep page size + CSV in one row on desktop too */
html[data-page="admin_forms"] .toolbar .toolbar-tail{
  display:inline-flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:8px !important;
  margin-left:auto !important;
}

html[data-page="admin_forms"] .toolbar .toolbar-tail > #pageSize,
html[data-page="admin_forms"] .toolbar .toolbar-tail > #btnExport{
  width:auto !important;
  flex:0 0 auto !important;
  white-space:nowrap !important;
}
/* ==========================================================================
   admin_forms — PAGER NEVER STACKS (fix container + child widths)
   Paste at VERY BOTTOM of your live stylesheet
   ========================================================================== */

/* The outer row must never wrap */
html[data-page="admin_forms"] .wrap > .row.admin-forms-row-between{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;          /* critical */
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
}

/* If some global CSS forces children to be 100% width, override it */
html[data-page="admin_forms"] .wrap > .row.admin-forms-row-between > *{
  width:auto !important;                 /* critical */
  max-width:none !important;
}

/* Page indicator should be allowed to shrink, but not force wrapping */
html[data-page="admin_forms"] .wrap > .row.admin-forms-row-between > #pi{
  flex:1 1 auto !important;
  min-width:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* Pager must be a single inline flex row */
html[data-page="admin_forms"] .wrap > .row.admin-forms-row-between > .row.pager{
  display:inline-flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;           /* critical */
  align-items:center !important;
  gap:8px !important;
  width:auto !important;                 /* critical */
  min-width:max-content !important;       /* critical */
}

/* Override any global "row children go full width" rule */
html[data-page="admin_forms"] .wrap > .row.admin-forms-row-between > .row.pager > *{
  width:auto !important;
  flex:0 0 auto !important;
  white-space:nowrap !important;
}
/* ==========================================================================
   admin_forms — FIX: .row overrides .pager (force nowrap on .row.pager)
   Paste at VERY BOTTOM
   ========================================================================== */

/* The pager div has BOTH classes: "row pager" — so override that exact combo */
html[data-page="admin_forms"] .row.pager{
  display:inline-flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;   /* beats .row { wrap } */
  align-items:center !important;
  gap:8px !important;
  width:auto !important;
  min-width:max-content !important;
}

/* Also ensure the parent row never wraps */
html[data-page="admin_forms"] .row.admin-forms-row-between{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:space-between !important;
}

/* And prevent any global "row children are 100%" stack rule */
html[data-page="admin_forms"] .row.admin-forms-row-between > *{
  width:auto !important;
}

/* Buttons stay compact */
html[data-page="admin_forms"] .row.pager > button{
  flex:0 0 auto !important;
  width:auto !important;
  white-space:nowrap !important;
}
/* ==========================================================================
   admin_forms — PAGER “STACKING” FIX (width constraints + block button overrides)
   Paste at VERY BOTTOM of stylesheet
   ========================================================================== */

/* Ensure the parent row doesn't squeeze children into narrow columns */
html[data-page="admin_forms"] .wrap > .row.admin-forms-row-between{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
}

/* Let #pi shrink and ellipsis so pager always has room */
html[data-page="admin_forms"] .wrap > .row.admin-forms-row-between > #pi{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Pager must size to its content and never be treated like a full-width block */
html[data-page="admin_forms"] .wrap > .row.admin-forms-row-between > .row.pager{
  display:inline-flex !important;
  flex: 0 0 auto !important;
  width: max-content !important;     /* key */
  max-width: none !important;
  min-width: max-content !important; /* key */
}

/* Some universal CSS often does "button{width:100%}" at breakpoints. Kill it here. */
html[data-page="admin_forms"] .wrap > .row.admin-forms-row-between > .row.pager button{
  display:inline-flex !important;  /* beats display:block */
  width:auto !important;           /* beats width:100% */
  min-width:0 !important;
  flex:0 0 auto !important;
  white-space:nowrap !important;
}

/* ==========================================================================
   router public view — give the casual scanner some info without anything they can abuse
   ========================================================================== */
   
   html[data-page="router"] body{
  margin:0;
  background:#0b1220;
  color:#e5e7eb;
  font:14px system-ui,Segoe UI,Roboto,sans-serif;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:16px;
}
html[data-page="router"] main.card{
  width:min(680px, 100%);
  background:#0f172a;
  border:1px solid #1f2937;
  border-radius:14px;
  padding:16px;
}
html[data-page="router"] .router-summary{
  margin:12px 0 16px;
  padding:12px;
  border:1px solid #1f2937;
  border-radius:12px;
  background:#0b1220;
}
html[data-page="router"] .router-status-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:10px;
}
html[data-page="router"] .router-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
@media (max-width:640px){
  html[data-page="router"] .router-grid{
    grid-template-columns:1fr;
  }
}
html[data-page="router"] .kv{
  border:1px solid #1f2937;
  border-radius:10px;
  padding:10px;
  background:#0f172a;
}
html[data-page="router"] .pill{
  display:inline-block;
  font-size:11px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid #31445c;
  color:#cbd5e1;
}
html[data-page="router"] .pill.ok{
  border-color:#1b3e2b;
  color:#b3f2c4;
}
html[data-page="router"] .pill.bad{
  border-color:#5c3131;
  color:#f5b5b5;
}
html[data-page="router"] .pill.warn{
  border-color:#5c4231;
  color:#fdd9b3;
}
html[data-page="router"] .hint{
  color:#94a3b8;
  font-size:12px;
}
html[data-page="router"] label{
  display:block;
  margin:10px 0 6px;
  color:#94a3b8;
}
html[data-page="router"] input{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #334155;
  background:#0b1220;
  color:#e5e7eb;
}
html[data-page="router"] button{
  margin-top:12px;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid #334155;
  background:#1f2937;
  color:#e5e7eb;
  cursor:pointer;
}
html[data-page="router"] .err{
  color:#fca5a5;
}
/* Billing */
html[data-page="billing"]{
  --bg:#0b1220;
  --card:#0f172a;
  --fg:#e5e7eb;
  --muted:#94a3b8;
  --border:#1f2937;
  --btn:#1f2937;
  --btnb:#334155;
  --accent:#13c98a;
}
html[data-page="billing"] *{ box-sizing:border-box; }
html[data-page="billing"] body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:14px system-ui,Segoe UI,Roboto,sans-serif;
}
html[data-page="billing"] header{
  position:sticky;
  top:0;
  z-index:10;
  background:#0f172a;
  border-bottom:1px solid var(--border);
}
html[data-page="billing"] .header-wrap{
  max-width:980px;
  margin:0 auto;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
html[data-page="billing"] h1,
html[data-page="billing"] h2{
  margin:0;
}
html[data-page="billing"] h1{ font-size:18px; }
html[data-page="billing"] h2{ font-size:16px; }
html[data-page="billing"] .row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
html[data-page="billing"] button,
html[data-page="billing"] .buttonlike button{
  background:var(--btn);
  color:var(--fg);
  border:1px solid var(--btnb);
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer;
}
html[data-page="billing"] button.primary{
  border-color:#1a4f3e;
  box-shadow:0 0 0 3px rgba(19,201,138,.08) inset;
}
html[data-page="billing"] .billing-wrap{
  max-width:980px;
  margin:14px auto;
  padding:0 12px 24px;
  display:grid;
  gap:12px;
}
html[data-page="billing"] .billing-panel{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px;
  display:grid;
  gap:12px;
}
html[data-page="billing"] .billing-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
}
html[data-page="billing"] .kv{
  background:#0b1220;
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px;
}
html[data-page="billing"] label{
  display:grid;
  gap:6px;
  color:#cbd5e1;
  font-weight:700;
}
html[data-page="billing"] input{
  width:100%;
  min-width:0;
  padding:10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#0b1220;
  color:var(--fg);
}
html[data-page="billing"] .label{
  color:var(--muted);
  font-size:12px;
}
html[data-page="billing"] .value{
  margin-top:2px;
  font-weight:800;
}
html[data-page="billing"] .meta{
  color:var(--muted);
}
html[data-page="billing"] .billing-total{
  font-size:22px;
  font-weight:900;
  color:#b3f2c4;
}
@media (max-width:760px){
  html[data-page="billing"] .header-wrap{
    align-items:flex-start;
    flex-direction:column;
  }
  html[data-page="billing"] .billing-grid{
    grid-template-columns:1fr;
  }
  html[data-page="billing"] button,
  html[data-page="billing"] .buttonlike,
  html[data-page="billing"] .buttonlike button{
    width:100%;
  }
}
/* Admin asset overlay: responsive logs view */
html[data-page="admin"] .overlay{
  overflow:hidden;
}
html[data-page="admin"] .sheet{
  width:min(920px, 96vw);
  max-width:96vw;
}
html[data-page="admin"] .sheet-head,
html[data-page="admin"] .sheet-id,
html[data-page="admin"] [data-pane="logs"],
html[data-page="admin"] .log-card,
html[data-page="admin"] .log-head,
html[data-page="admin"] .log-head > div:first-child{
  min-width:0;
}
html[data-page="admin"] #ov .sheet,
html[data-page="admin"] #ov .sheet-body,
html[data-page="admin"] #ov [data-pane="logs"]{
  max-width:100%;
  overflow-x:hidden;
}
html[data-page="admin"] .sheet-id .title,
html[data-page="admin"] .sheet-id .meta,
html[data-page="admin"] .log-when{
  overflow:hidden;
  text-overflow:ellipsis;
}
html[data-page="admin"] .sheet-id .title,
html[data-page="admin"] .log-when{
  white-space:nowrap;
}
html[data-page="admin"] .sheet-body{
  min-height:0;
}
html[data-page="admin"] .tabs{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
html[data-page="admin"] .tabs button{
  white-space:nowrap;
  flex:0 0 auto;
}
html[data-page="admin"] .logs-topbar{
  display:block;
  margin-bottom:10px;
}
html[data-page="admin"] #ov .logs-topbar{
  max-width:100%;
  overflow:hidden;
}
html[data-page="admin"] #ov .logs-topbar *{
  box-sizing:border-box;
}
html[data-page="admin"] #ov .logs-topbar .row{
  display:grid;
  grid-template-columns:1fr !important;
  width:100%;
  max-width:100%;
  gap:8px;
  align-items:stretch;
  overflow:hidden;
}
html[data-page="admin"] #ov .admin-logs-controls{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  width:100%;
  max-width:100%;
  min-width:0;
  gap:8px;
  align-items:stretch;
  overflow:hidden;
}
html[data-page="admin"] #ov .admin-logs-controls > *{
  width:100%;
  max-width:100%;
  min-width:0;
}
html[data-page="admin"] #ov .admin-logs-controls select,
html[data-page="admin"] #ov .admin-logs-controls button{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
}
html[data-page="admin"] #ov .logs-topbar select,
html[data-page="admin"] #ov .logs-topbar button{
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}
html[data-page="admin"] #ov .logs-topbar button{
  white-space:normal;
  line-height:1.2;
  overflow-wrap:anywhere;
}
html[data-page="admin"] #ov .logs-topbar #lgLabel{
  grid-column:1 / -1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
html[data-page="admin"] #ov .logs-pager{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:44px minmax(0, 1fr) 44px;
  align-items:center;
  width:100%;
  max-width:100%;
  margin:0;
  min-width:0;
}
html[data-page="admin"] #ov .logs-pager .meta{
  min-width:0;
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
html[data-page="admin"] .log-notes{
  overflow-wrap:anywhere;
}

@media (max-width:900px){
  html[data-page="admin"] .overlay.open{
    display:flex;
  }
  html[data-page="admin"] .sheet{
    width:100vw;
    max-width:100vw;
    height:100dvh;
    max-height:100dvh;
    top:0;
    bottom:auto;
    border-radius:0;
  }
  html[data-page="admin"] .sheet-head{
    align-items:flex-start;
  }
  html[data-page="admin"] .sheet-head > .row{
    flex-shrink:0;
  }
  html[data-page="admin"] .sheet-body{
    padding:10px;
  }
  html[data-page="admin"] #ov .logs-topbar .row{
    grid-template-columns:1fr;
  }
  html[data-page="admin"] #ov .admin-logs-controls{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:760px){
  html[data-page="admin"] .sheet-head{
    gap:8px;
    padding:10px;
  }
  html[data-page="admin"] .sheet-id{
    gap:8px;
  }
  html[data-page="admin"] .sheet-id .thumb{
    width:44px;
    height:44px;
  }
  html[data-page="admin"] .tabs{
    padding:8px 10px;
    gap:6px;
  }
  html[data-page="admin"] .tabs button{
    padding:8px 10px;
  }
  html[data-page="admin"] #ov .logs-topbar .row{
    grid-template-columns:1fr;
  }
  html[data-page="admin"] #ov .admin-logs-controls{
    grid-template-columns:1fr;
  }
  html[data-page="admin"] #ov .logs-pager{
    display:grid;
    grid-template-columns:44px 1fr 44px;
    align-items:center;
  }
  html[data-page="admin"] #ov .logs-pager .meta{
    text-align:center;
  }
  html[data-page="admin"] .log-head{
    align-items:stretch;
    flex-direction:column;
  }
  html[data-page="admin"] .log-head .row,
  html[data-page="admin"] .log-head .buttonlike,
  html[data-page="admin"] .log-head button{
    width:100%;
  }
  html[data-page="admin"] .log-when{
    white-space:normal;
  }
html[data-page="admin"] .admin-log-meta{
    gap:6px;
  }
}

/* Admin overlay logs: compact inline open action */
html[data-page="admin"] #ov .log-head{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:start;
  gap:8px;
}
html[data-page="admin"] #ov .log-main{
  min-width:0;
}
html[data-page="admin"] #ov .admin-log-meta{
  width:100%;
}
html[data-page="admin"] #ov .log-open-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:start;
  justify-self:end;
  margin-left:0;
  flex:0 0 auto;
  width:auto !important;
  min-width:44px;
  min-height:22px;
  padding:3px 7px;
  border:1px solid #334155;
  border-radius:7px;
  background:#1f2937;
  color:#e5e7eb;
  font-size:11.5px;
  font-weight:600;
  line-height:1;
  text-decoration:none;
}
html[data-page="admin"] #ov .log-open-link:hover{
  background:#243041;
  color:#e5e7eb;
  text-decoration:none;
}
@media (max-width:760px){
  html[data-page="admin"] #ov .log-head{
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:start;
  }
  html[data-page="admin"] #ov .log-open-link{
    margin-left:0;
    width:auto !important;
    min-width:42px;
  }
}

/* Admin expanded menu: normalize link and button actions */
html[data-page="admin"] .admin-menu-dropdown a,
html[data-page="admin"] .admin-menu-dropdown button{
  display:flex;
  align-items:center;
  width:100%;
  min-height:38px;
  margin:0;
  font:inherit;
  line-height:1.2;
  appearance:none;
  -webkit-appearance:none;
}

html[data-page="admin"] .admin-menu-dropdown{
  top:calc(100% + 8px);
  width:min(270px, calc(100vw - 24px));
  max-height:min(72vh, 460px);
  overflow:auto;
  display:grid;
  gap:4px;
  padding:8px;
  border:1px solid #334155;
  border-radius:12px;
  background:linear-gradient(180deg,#111827,#020617);
  box-shadow:0 18px 44px rgba(0,0,0,.38);
}

html[data-page="admin"] .admin-menu-dropdown[hidden]{
  display:none !important;
}

html[data-page="admin"] .admin-menu-dropdown a,
html[data-page="admin"] .admin-menu-dropdown button{
  justify-content:space-between;
  min-height:38px;
  padding:9px 10px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:#e5e7eb;
  font-weight:750;
  line-height:1.15;
  white-space:normal;
}

html[data-page="admin"] .admin-menu-dropdown a:hover,
html[data-page="admin"] .admin-menu-dropdown a:focus-visible,
html[data-page="admin"] .admin-menu-dropdown button:hover,
html[data-page="admin"] .admin-menu-dropdown button:focus-visible{
  background:#172033;
  border-color:#334155;
  outline:none;
}

html[data-page="admin"] .admin-menu-dropdown a.is-current{
  color:#bbf7d0;
  background:rgba(34,197,94,.08);
  border-color:rgba(34,197,94,.26);
}

@media (max-width:760px){
  html[data-page="admin"] .admin-menu-dropdown{
    position:fixed;
    top:calc(env(safe-area-inset-top) + 58px);
    right:10px;
    left:10px;
    width:auto;
    max-height:calc(100dvh - 78px);
  }
}

/* Admin desktop header: normalize the visible button controls */
html[data-page="admin"] header .nav-actions > button,
html[data-page="admin"] header .nav-actions > a.buttonlike > button,
html[data-page="admin"] header #btnLogout{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  min-height:44px;
  padding:8px 12px !important;
  border:1px solid #334155 !important;
  border-radius:10px;
  background:#1f2937 !important;
  color:#e5e7eb !important;
  font:inherit;
  line-height:1.12;
  text-decoration:none;
  cursor:pointer;
  box-sizing:border-box;
  white-space:normal;
  text-align:center;
  margin-top:0;
}
html[data-page="admin"] header .nav-actions > button:hover,
html[data-page="admin"] header .nav-actions > a.buttonlike:hover > button,
html[data-page="admin"] header #btnLogout:hover{
  background:#243041 !important;
  color:#e5e7eb !important;
  text-decoration:none;
}
html[data-page="admin"] header .nav-actions > a.buttonlike{
  display:inline-flex;
  align-items:center;
  align-self:stretch;
  text-decoration:none;
}
html[data-page="admin"] header .nav-actions > a.buttonlike[hidden],
html[data-page="admin"] header .nav-actions > button[hidden]{
  display:none !important;
}

/* Admin tablet header: keep expanded actions inside the viewport */
@media (min-width:681px) and (max-width:1100px){
  html[data-page="admin"] header .header-wrap{
    flex-wrap:wrap;
    align-items:flex-start;
    row-gap:8px;
  }
  html[data-page="admin"] header h1{
    flex:1 1 auto;
    min-width:180px;
  }
  html[data-page="admin"] #btnLogout{
    order:2;
    margin-left:0 !important;
  }
  html[data-page="admin"] .nav-actions{
    order:3;
    flex:1 1 100%;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:6px;
  }
  html[data-page="admin"] header .nav-actions > a.buttonlike > button,
  html[data-page="admin"] header #btnLogout,
  html[data-page="admin"] header .nav-actions > button{
    height:40px;
    min-height:40px;
    padding:7px 9px;
    font-size:12.5px;
    white-space:normal;
  }
}

/* Admin overlay hard containment: never exceed viewport width */
html[data-page="admin"] #ov,
html[data-page="admin"] #ov *{
  box-sizing:border-box;
}
html[data-page="admin"] #ov{
  max-width:100vw;
  overflow:hidden;
}
html[data-page="admin"] #ov .sheet{
  width:min(920px, 100vw);
  max-width:100vw;
  overflow:hidden;
}
html[data-page="admin"] #ov .sheet-head,
html[data-page="admin"] #ov .sheet-body,
html[data-page="admin"] #ov #tabpanes,
html[data-page="admin"] #ov .tabpane{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:hidden;
}
html[data-page="admin"] #ov .tabs{
  flex-wrap:wrap;
  max-width:100%;
  overflow-x:hidden;
}
html[data-page="admin"] #ov img,
html[data-page="admin"] #ov canvas,
html[data-page="admin"] #ov table{
  max-width:100%;
}

/* Admin photo lightbox */
html[data-page="admin"] .ph{
  cursor:zoom-in;
}
html[data-page="admin"] .ph:focus{
  outline:2px solid #13c98a;
  outline-offset:2px;
}
html[data-page="admin"] #ov .photo-lightbox{
  position:absolute;
  inset:0;
  z-index:5;
  display:none;
}
html[data-page="admin"] #ov .photo-lightbox.open{
  display:grid;
  place-items:center;
  padding:0;
}
html[data-page="admin"] #ov .photo-lightbox-backdrop{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  padding:0 !important;
  border:0 !important;
  border-radius:0;
  background:#020617 !important;
  cursor:zoom-out;
}
html[data-page="admin"] #ov .photo-lightbox-panel{
  position:relative;
  z-index:1;
  width:100%;
  max-width:100%;
  height:100%;
  max-height:100%;
  display:grid;
  place-items:center;
  background:#020617;
  border:0;
  border-radius:0;
  overflow:hidden;
  padding:clamp(12px, 3vw, 28px);
}
html[data-page="admin"] #ov .photo-lightbox-body{
  position:relative;
  display:block;
  width:min(1080px, 100%);
  max-height:100%;
  background:#0f172a;
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 18px 44px rgba(0,0,0,.45);
  padding:8px;
}
html[data-page="admin"] #ov .photo-lightbox-body img{
  display:block;
  box-sizing:border-box;
  width:100%;
  max-width:1080px;
  max-height:calc(100dvh - 64px);
  height:auto;
  object-fit:contain;
  border-radius:8px;
}
html[data-page="admin"] #ov .photo-lightbox-x{
  position:absolute;
  top:clamp(10px, 2vw, 18px);
  right:clamp(10px, 2vw, 18px);
  z-index:3;
  width:34px;
  height:34px;
  min-width:34px;
  min-height:34px;
  max-width:34px;
  max-height:34px;
  margin:0;
  padding:0 !important;
  display:grid;
  place-items:center;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.55);
  background:rgba(15,23,42,.86);
  color:#e5e7eb;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  appearance:none;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
@media (max-width:760px){
  html[data-page="admin"] #ov .photo-lightbox-panel{
    padding:10px;
  }
  html[data-page="admin"] #ov .photo-lightbox-body{
    padding:6px;
    border-radius:8px;
  }
  html[data-page="admin"] #ov .photo-lightbox-body img{
    max-height:calc(100dvh - 44px);
    border-radius:6px;
  }
}
@media (max-width:900px){
  html[data-page="admin"] #ov .sheet{
    width:100dvw;
    max-width:100dvw;
  }
}

@media (max-width:700px){
  html[data-page="admin"] .wrap{
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  html[data-page="admin"] .panel,
  html[data-page="admin"] #resultsBody,
  html[data-page="admin"] #tableView,
  html[data-page="admin"] .table-wrap{
    width:100% !important;
    max-width:100% !important;
  }
  html[data-page="admin"] .panel{
    border-left:0 !important;
    border-right:0 !important;
    border-radius:0 !important;
  }
  html[data-page="admin"] .panel > .body,
  html[data-page="admin"] #resultsBody{
    padding-left:0 !important;
    padding-right:0 !important;
  }
  html[data-page="admin"] .table-wrap{
    border-left:0 !important;
    border-right:0 !important;
    border-radius:0 !important;
  }
}

html[data-page="admin"] tbody tr.asset-status-bad,
html[data-page="admin"] tbody tr.asset-status-bad td,
html[data-page="admin"] td.asset-status-cell-bad{
  background:rgba(127,29,29,.36) !important;
}
html[data-page="admin"] tbody tr.asset-status-bad:hover,
html[data-page="admin"] tbody tr.asset-status-bad:hover td,
html[data-page="admin"] tr:hover td.asset-status-cell-bad{
  background:rgba(153,27,27,.44) !important;
}

html[data-page="admin"] header .nav-actions > button,
html[data-page="admin"] header .nav-actions > a.buttonlike > button,
html[data-page="admin"] header button.admin-header-action{
  height:44px !important;
  min-height:44px !important;
  max-height:44px !important;
  min-width:92px !important;
  padding:8px 12px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:1.12 !important;
  box-sizing:border-box !important;
  white-space:normal !important;
}

html[data-page="admin"] header #btnLogout.admin-header-action,
html[data-page="admin"] header #linkSuperDesktop > button.admin-header-action{
  width:92px !important;
  flex:0 0 92px !important;
}

@media (min-width:681px) and (max-width:1100px){
  html[data-page="admin"] header .nav-actions > button,
  html[data-page="admin"] header .nav-actions > a.buttonlike > button,
  html[data-page="admin"] header button.admin-header-action{
    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;
  }
}

html[data-page="admin"] #ov .log-open-link{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:58px !important;
  min-height:30px !important;
  padding:6px 12px !important;
  border:1px solid rgba(96,165,250,.65) !important;
  border-radius:999px !important;
  background:#172033 !important;
  color:#dbeafe !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1 !important;
  text-decoration:none !important;
  box-shadow:0 0 0 2px rgba(96,165,250,.08) inset !important;
}
html[data-page="admin"] #ov .log-open-link:hover,
html[data-page="admin"] #ov .log-open-link:focus-visible{
  background:#1d2b45 !important;
  border-color:rgba(147,197,253,.9) !important;
  color:#eff6ff !important;
  text-decoration:none !important;
}

/* /css/styles.css: Admin and Super use their complete hamburger menus at every width. */
html[data-page="admin"] #btnLogout,
html[data-page="admin"] .nav-actions{
  display:none !important;
}
html[data-page="admin"] .admin-menu-wrap{
  display:block !important;
  margin-left:auto !important;
}

html[data-page="super"] .header-actions{
  display:none !important;
}
html[data-page="super"] #menuToggle{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
html[data-page="super"] .nav-sheet{
  display:flex !important;
}
html[data-page="super"] .nav-overlay{
  display:none !important;
}
html[data-page="super"] .nav-overlay.open{
  display:block !important;
}