:root{
  color-scheme:dark;

  /* Appearance tokens drive Simple and Cyberpunk without changing app workflows. */
  --app-background:
    radial-gradient(circle at 50% 0%, rgba(24,48,105,0.82) 0%, rgba(7,18,48,0.92) 42%, #040b22 100%);
  --app-bg:#040b22;
  --app-bg-elevated:#071536;
  --app-bg-glow:rgba(52,107,255,0.18);
  --panel-bg:linear-gradient(180deg, rgba(12,25,58,0.96) 0%, rgba(9,18,46,0.96) 100%);
  --panel-secondary-bg:rgba(255,255,255,0.04);
  --panel-header-bg:rgba(9,18,46,0.72);
  --panel-texture:none;
  --text-primary:#f5f7fb;
  --text-secondary:#aeb7ca;
  --border-primary:rgba(255,255,255,0.10);
  --border-secondary:rgba(255,255,255,0.07);
  --accent-blue:#6aa8ff;
  --accent-cyan:#76e9ff;
  --highlight-yellow:#f7d106;
  --success-green:#42f56c;
  --danger-red:#ff4d4d;
  --warning-amber:#ffc745;
  --glow-strength:0.16;
  --shadow-depth:0 12px 30px rgba(0,0,0,0.35);
  --corner-radius:8px;
  --panel-bevel-depth:inset 0 1px 0 rgba(255,255,255,0.05);
  --nav-bg:rgba(5,12,31,0.74);
  --nav-active-bg:var(--highlight-yellow);
  --nav-active-text:#071023;
  --input-bg:linear-gradient(180deg, rgba(32,48,88,0.92) 0%, rgba(24,39,78,0.92) 100%);
  --input-border:rgba(255,255,255,0.16);
  --input-focus-border:rgba(247,209,6,0.70);
  --focus-ring:0 0 0 3px rgba(247,209,6,0.14);
  --button-secondary-bg:linear-gradient(180deg, rgba(38,52,92,0.95) 0%, rgba(23,35,68,0.95) 100%);
  --button-secondary-bg-hover:linear-gradient(180deg, rgba(44,60,106,0.98) 0%, rgba(26,40,76,0.98) 100%);
  --button-secondary-border:rgba(255,255,255,0.10);
  --button-primary-bg:linear-gradient(180deg, #ffe45a 0%, var(--highlight-yellow) 100%);
  --button-primary-text:#0a0f1f;
  --button-primary-border:rgba(247,209,6,0.90);
  --selected-bg:linear-gradient(180deg, #ffe45a 0%, var(--highlight-yellow) 100%);
  --selected-text:#0a0f1f;
  --selected-border:rgba(247,209,6,0.90);
  --selected-shadow:0 12px 28px rgba(247,209,6,0.18);
  --status-live-shadow:0 0 0 4px rgba(66,245,108,0.16);

  --primary:var(--highlight-yellow);
  --primary-dark:#d4b504;
  --secondary:#1c2748;
  --bg1:#0a1d4d;
  --bg2:var(--app-bg);
  --card:#0b1637;
  --card-soft:rgba(11,22,55,0.94);
  --text:var(--text-primary);
  --muted:var(--text-secondary);
  --border:var(--border-primary);
  --danger:var(--danger-red);
  --ok:var(--success-green);
  --radius:var(--corner-radius);
  --shadow:var(--shadow-depth);
  --btn-radius:var(--corner-radius);
  --btn-shadow:0 10px 24px rgba(0,0,0,0.24);
  --btn-shadow-strong:var(--selected-shadow);
  --low-stock-bg:rgba(255,77,77,0.12);
  --low-stock-border:rgba(255,77,77,0.22);
  --low-stock-text:#ffd6d6;
}

*{ box-sizing:border-box; }

html,
body{
  margin:0;
  min-height:100%;
  background:var(--bg2);
}

body{
  padding:calc(12px + env(safe-area-inset-top, 0px)) 12px calc(28px + env(safe-area-inset-bottom, 0px));
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:radial-gradient(circle at top, var(--bg1), var(--bg2));
  color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body.settings-modal-open{
  overflow:hidden;
}

.wrap{
  max-width:1040px;
  margin:0 auto;
  position:relative;
}

.app-shell.app-locked{
  pointer-events:none;
  user-select:none;
  filter:blur(3px);
  opacity:0.35;
}

header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
  flex-wrap:wrap;
  position:relative;
  padding-right:0;
}

.brand-head{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1 1 auto;
  min-width:0;
  max-width:calc(100% - 92px);
}

.brand-head img{
  width:72px;
  height:auto;
  border-radius:16px;
  border:2px solid var(--primary);
  box-shadow:var(--shadow);
  cursor:pointer;
  background:#fff;
  display:block;
}

body:not(.is-authenticated) .brand-head{
  max-width:100%;
}

.brand-copy h1{
  margin:0;
  font-size:18px;
  line-height:1.05;
  color:var(--primary);
  letter-spacing:0.2px;
}

.brand-subtitle{
  margin:2px 0 0;
  color:rgba(245,247,251,0.84);
  font-size:0.82rem;
  font-weight:500;
  line-height:1.2;
}

.tool-title{
  color:var(--primary);
  font-size:0.8rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin-top:4px;
  line-height:1.2;
}

.mode-switch{
  display:flex;
  background:rgba(5,12,31,0.74);
  border-radius:16px;
  padding:3px;
  border:1px solid rgba(255,255,255,0.07);
  box-shadow:0 6px 16px rgba(0,0,0,0.18);
  align-self:flex-end;
}

.mode-switch-3{
  width:auto;
}

.mode-btn{
  appearance:none;
  border:none;
  background:transparent;
  color:rgba(245,247,251,0.68);
  border-radius:12px;
  padding:9px 13px;
  font-size:0.72rem;
  font-weight:800;
  text-transform:uppercase;
  cursor:pointer;
  transition:background 0.18s ease, color 0.18s ease, transform 0.06s ease;
  font-family:inherit;
  min-width:94px;
  line-height:1;
  letter-spacing:0.04em;
}

.mode-btn:active{
  transform:translateY(1px);
}

.mode-btn.active{
  background:var(--primary);
  color:#0a0f1f;
  box-shadow:0 5px 14px rgba(247,209,6,0.18);
}

.screen{
  display:none;
}

.screen.active{
  display:block;
}

.card{
  background:linear-gradient(180deg, rgba(12,25,58,0.96) 0%, rgba(9,18,46,0.96) 100%);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  backdrop-filter:blur(6px);
}

.card + .card{
  margin-top:10px;
}

.card h2{
  margin:0;
  padding:12px 14px 10px;
  font-size:0.82rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.04em;
  border-bottom:1px solid rgba(255,255,255,0.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  line-height:1.2;
}

.body{
  padding:12px 14px 14px;
}

.helper{
  color:var(--muted);
  font-size:0.8rem;
  line-height:1.45;
}

.helper strong{
  color:var(--primary);
}

.helper-tight{
  margin-top:8px;
}

.compact-banner .body{
  padding:12px 14px;
}

.compact-banner-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:8px;
}

.mini-pill{
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.04);
  padding:10px 12px;
}

.mini-pill-label{
  color:var(--muted);
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  font-weight:800;
  margin-bottom:5px;
  line-height:1.1;
}

.mini-pill-value{
  font-size:1rem;
  font-weight:900;
  color:var(--primary);
  line-height:1.05;
}

.grid-main{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.usage-grid-main{
  gap:12px;
}

.field + .field{
  margin-top:12px;
}

.job-meta-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:8px;
  align-items:end;
}

.usage-intro{
  padding:0 0 16px;
  margin-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.usage-step-card{
  margin-top:14px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
  transition:border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.usage-step-card.is-current{
  border-color:rgba(247,209,6,0.42);
  background:rgba(247,209,6,0.06);
  box-shadow:0 10px 24px rgba(0,0,0,0.16);
}

.usage-step-card.is-complete{
  border-color:rgba(66,245,108,0.18);
}

.usage-riviera-card{
  margin-top:10px;
}

.usage-step-header{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:12px;
}

.usage-step-header h3{
  margin:0;
  font-size:0.98rem;
  line-height:1.2;
}

.usage-step-header p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:0.82rem;
  line-height:1.4;
}

.usage-step-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  color:var(--primary);
  font-size:0.78rem;
  font-weight:900;
  flex:0 0 auto;
}

.usage-step-number-logo{
  overflow:hidden;
  padding:0;
  background:#ffffff;
  border-color:rgba(255,255,255,0.3);
}

.usage-step-number-icon{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.usage-inline-step{
  margin-top:10px;
  padding:12px 14px 0;
}

.usage-step-field{
  margin-top:0;
}

.inline-link-btn{
  appearance:none;
  margin-top:2px;
  padding:0;
  border:none;
  background:none;
  color:var(--primary);
  font:inherit;
  font-size:0.84rem;
  font-weight:800;
  cursor:pointer;
}

.inline-link-btn:hover{
  text-decoration:underline;
}

.queue-job-reference{
  margin-bottom:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.04);
  color:var(--primary);
  font-size:0.82rem;
  font-weight:800;
  line-height:1.35;
}

.usage-utilities-card .body{
  padding-top:14px;
}

.utility-subsection h3{
  margin:0;
  font-size:0.88rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.04em;
  line-height:1.25;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.job-meta-field{
  min-width:0;
}

.job-meta-row .field + .field{
  margin-top:0;
}

.usage-meta-line{
  padding:9px 11px;
  gap:8px;
  min-height:0;
}

.usage-meta-copy{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
}

.usage-meta-inline{
  color:var(--muted);
  font-size:0.76rem;
  font-weight:700;
  white-space:nowrap;
}

.field label{
  display:block;
  font-size:0.8rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin-bottom:8px;
  color:rgba(255,255,255,0.92);
  line-height:1.2;
}

.input,
textarea{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--input-border);
  background:var(--input-bg);
  color:var(--text);
  outline:none;
  font:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
}

.input:focus,
textarea:focus{
  border-color:rgba(247,209,6,0.70);
  box-shadow:0 0 0 3px rgba(247,209,6,0.14);
}

textarea{
  min-height:86px;
  resize:vertical;
}

.status-line,
.summary-box,
.message,
.empty-state,
.log-card,
.line-card,
.preview-box{
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.04);
}

.status-line{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 12px;
  color:var(--text);
  font-size:0.9rem;
  font-weight:600;
  line-height:1.2;
}

.status-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 0 4px rgba(66,245,108,0.16);
  flex:0 0 auto;
}

.button-grid{
  display:grid;
  gap:8px;
}

.catalog-group-heading{
  grid-column:1 / -1;
  margin-top:8px;
  padding:6px 2px 2px;
  color:var(--primary);
  font-size:0.82rem;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

.inline-width-picker{
  grid-column:1 / -1;
  display:grid;
  gap:8px;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  margin:-2px 0 8px;
  padding:10px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  background:rgba(255,255,255,0.03);
}

.inline-width-picker .choice-btn{
  min-height:52px;
}

.inline-order-flow{
  grid-column:1 / -1;
  margin:-2px 0 14px;
  padding:12px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  background:rgba(255,255,255,0.025);
}

.inline-order-field{
  margin-top:10px;
}

.inline-order-field:first-child{
  margin-top:0;
}

.inline-order-hint{
  color:var(--muted);
  font-size:0.82rem;
  text-align:center;
}

.inline-order-actions{
  margin-top:12px;
}

.grid-installers{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.grid-brands{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.grid-cards{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.grid-actions{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.compact-installers .choice-btn{
  min-height:44px;
  padding:8px 10px;
  font-size:0.84rem;
  border-radius:12px;
}

.installer-toggle-btn{
  width:100%;
  justify-content:space-between;
  display:inline-flex;
  align-items:center;
  text-transform:none;
  letter-spacing:0.01em;
  font-size:0.9rem;
  padding:12px 14px;
}

.installer-toggle-btn::after{
  content:'▾';
  font-size:0.9rem;
  opacity:0.85;
}

.installer-toggle-btn.open::after{
  content:'▴';
}

.choice-btn,
.btn,
.line-btn{
  appearance:none;
  border:none;
  cursor:pointer;
  font-family:inherit;
  transition:
    transform 0.06s ease,
    filter 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    color 0.16s ease;
}

.choice-btn:active,
.btn:active,
.line-btn:active{
  transform:translateY(1px);
}

.choice-btn{
  min-height:60px;
  border-radius:var(--btn-radius);
  padding:10px 10px;
  font-weight:800;
  line-height:1.1;
  color:var(--text);
  background:linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.04) 100%);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
  text-align:center;
  font-size:0.92rem;
  letter-spacing:0.02em;
  min-width:0;
}

.header-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-end;
  width:100%;
}

.header-sync-btn{
  appearance:none;
  align-self:flex-start;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:78px;
  height:42px;
  margin-left:auto;
  padding:0 12px;
  border-radius:14px;
  border:1px solid rgba(247,209,6,0.32);
  background:linear-gradient(180deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.045) 100%);
  color:var(--primary);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 18px rgba(0,0,0,0.18);
  font:inherit;
  font-size:0.74rem;
  font-weight:900;
  letter-spacing:0.05em;
  line-height:1;
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color 0.18s ease, background 0.18s ease, transform 0.08s ease, opacity 0.18s ease;
}

.header-sync-btn[hidden],
body:not(.is-authenticated) .header-sync-btn{
  display:none;
}

.header-sync-btn svg{
  width:17px;
  height:17px;
  display:block;
}

.header-sync-btn:hover{
  border-color:rgba(247,209,6,0.62);
  background:rgba(247,209,6,0.12);
}

.header-sync-btn:active{
  transform:translateY(1px);
}

.header-sync-btn:focus-visible{
  outline:2px solid rgba(247,209,6,0.88);
  outline-offset:2px;
}

.header-sync-btn:disabled{
  cursor:wait;
  opacity:0.82;
}

.header-sync-btn.is-syncing svg{
  animation:manualSyncSpin 0.9s linear infinite;
}

.header-sync-btn.is-complete{
  border-color:rgba(66,245,108,0.42);
  color:var(--success-green);
}

.header-sync-btn.is-failed{
  border-color:rgba(255,77,77,0.42);
  color:#ffb3b3;
}

@keyframes manualSyncSpin{
  to{ transform:rotate(360deg); }
}

.auth-status-bar{
  display:flex;
  align-items:center;
  gap:14px;
  justify-content:space-between;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(2,6,23,0.78);
  box-shadow:0 8px 18px rgba(0,0,0,0.22);
}

.auth-status-copy{
  min-width:0;
  flex:1 1 auto;
}

.auth-status-label{
  color:var(--muted);
  font-size:0.68rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  font-weight:800;
}

.auth-status-name{
  color:var(--text);
  font-size:0.95rem;
  font-weight:800;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.auth-status-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.auth-status-indicator{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 0 4px rgba(66,245,108,0.16);
  flex:0 0 auto;
}

.background-sync-status{
  appearance:none;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.065);
  color:var(--text);
  min-width:44px;
  height:32px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 10px;
  cursor:default;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
}

.background-sync-status[hidden]{
  display:none;
}

.background-sync-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--primary);
  box-shadow:0 0 0 4px rgba(78,166,255,0.14);
}

.background-sync-count{
  font-size:0.72rem;
  font-weight:900;
  line-height:1;
}

.background-sync-status.is-syncing .background-sync-dot{
  animation:syncPulse 0.9s ease-in-out infinite;
}

.background-sync-status.is-failed{
  border-color:rgba(255,122,122,0.42);
  background:rgba(255,122,122,0.12);
}

.background-sync-status.is-failed .background-sync-dot{
  background:var(--danger);
  box-shadow:0 0 0 4px rgba(255,122,122,0.16);
  animation:none;
}

@keyframes syncPulse{
  0%, 100%{ transform:scale(0.82); opacity:0.72; }
  50%{ transform:scale(1.12); opacity:1; }
}

.icon-btn{
  appearance:none;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.055);
  color:var(--primary);
  width:40px;
  min-width:40px;
  height:40px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
  transition:border-color 0.18s ease, background 0.18s ease, transform 0.08s ease;
}

.icon-btn svg{
  width:18px;
  height:18px;
  display:block;
}

.icon-btn:hover{
  border-color:rgba(247,209,6,0.42);
  background:rgba(247,209,6,0.11);
}

.icon-btn:active{
  transform:translateY(1px);
}

.icon-btn:focus-visible{
  outline:2px solid rgba(247,209,6,0.88);
  outline-offset:2px;
}

.settings-open-btn{
  color:var(--primary);
}

.card-toggle-heading{
  padding:0;
}

.card-toggle-btn{
  appearance:none;
  width:100%;
  border:none;
  border-radius:0;
  background:transparent;
  color:inherit;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px 10px;
  font:inherit;
  font-weight:inherit;
  line-height:inherit;
  letter-spacing:inherit;
  text-align:left;
  text-transform:inherit;
}

.card-toggle-btn::after{
  content:'▾';
  flex:0 0 auto;
  font-size:0.95rem;
  color:var(--primary);
  transition:transform 0.18s ease;
}

.card-toggle-btn.open::after,
.card-toggle-btn[aria-expanded="true"]::after{
  transform:rotate(180deg);
}

.card-toggle-btn:focus-visible{
  outline:2px solid rgba(247,209,6,0.85);
  outline-offset:-2px;
}

.auth-status-meta{
  color:var(--primary);
  font-size:0.78rem;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.auth-logout-btn{
  white-space:nowrap;
  flex:0 0 auto;
}

.theme-toggle-compact-wrap{
  display:none;
  flex:0 0 auto;
}

.theme-toggle-compact{
  appearance:none;
  width:34px;
  min-width:34px;
  height:72px;
  padding:5px 4px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.12);
  background:linear-gradient(180deg, rgba(18,31,67,0.96) 0%, rgba(9,18,46,0.96) 100%);
  box-shadow:0 8px 18px rgba(0,0,0,0.18);
  color:rgba(245,247,251,0.64);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  transition:border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.theme-toggle-compact:hover{
  border-color:rgba(247,209,6,0.46);
  box-shadow:0 10px 20px rgba(0,0,0,0.22);
}

.theme-toggle-compact:active{
  transform:translateY(1px);
}

.theme-toggle-compact:focus-visible{
  outline:2px solid rgba(247,209,6,0.88);
  outline-offset:2px;
}

.theme-toggle-compact-icon{
  width:14px;
  height:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:rgba(245,247,251,0.52);
  transition:color 0.18s ease, opacity 0.18s ease;
}

.theme-toggle-compact-icon svg{
  width:100%;
  height:100%;
  display:block;
}

.theme-toggle-compact-track{
  position:relative;
  width:18px;
  height:32px;
  border-radius:999px;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.12);
}

.theme-toggle-compact-thumb{
  position:absolute;
  left:1px;
  top:1px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:linear-gradient(180deg, #ffe45a 0%, var(--primary) 100%);
  box-shadow:0 4px 8px rgba(0,0,0,0.22);
  transition:transform 0.18s ease;
}

.theme-toggle-compact.is-light .theme-toggle-compact-thumb{
  transform:translateY(16px);
}

.theme-toggle-compact.is-light .theme-toggle-compact-icon-light,
.theme-toggle-compact:not(.is-light) .theme-toggle-compact-icon-dark{
  color:var(--primary);
}

.choice-btn:hover{
  background:linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.05) 100%);
  border-color:rgba(255,255,255,0.16);
}

.choice-btn .choice-btn-text{
  display:block;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.choice-btn small{
  display:block;
  margin-top:7px;
  color:var(--muted);
  font-size:0.72rem;
  font-weight:700;
  line-height:1.25;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.grid-brands .choice-btn{
  min-height:64px;
  padding:8px 8px;
  font-size:0.88rem;
}

.choice-btn-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:0;
  padding:10px 10px;
  overflow:visible;
}

.choice-btn-logo-image{
  display:block;
  max-width:100%;
  width:auto;
  height:28px;
  object-fit:contain;
  object-position:center;
  filter:none;
}

.choice-btn-logo-image.brand-logo-3m{
  height:40px;
  max-width:78%;
}

.choice-btn-logo-image.brand-logo-express{
  display:block !important;
  height:34px !important;
  max-width:82% !important;
  width:auto !important;
  transform:none !important;
}

.choice-btn-logo-image.brand-logo-mep{
  height:34px;
  max-width:82%;
}

.choice-btn-logo-image.brand-logo-solargard{
  height:42px;
  max-width:82%;
}

.choice-btn-logo-image.brand-logo-wes{
  height:34px;
  max-width:82%;
}

.choice-btn-logo-image.brand-logo-riviera{
  height:34px;
  max-width:82%;
}

.logo-fallback-text{
  font-size:0.88rem;
  font-weight:800;
  letter-spacing:0.02em;
}

.choice-btn-logo small{
  margin-top:6px;
}

.choice-btn.selected{
  background:linear-gradient(180deg, #ffe45a 0%, var(--primary) 100%);
  color:#0a0f1f;
  border-color:rgba(247,209,6,0.90);
  box-shadow:var(--btn-shadow-strong);
}

.choice-btn.selected small{
  color:rgba(10,15,31,0.72);
}

.choice-btn.disabled{
  background:rgba(255,255,255,0.03);
  color:rgba(255,255,255,0.42);
  border-color:rgba(255,255,255,0.06);
  cursor:not-allowed;
  box-shadow:none;
}

.choice-btn.disabled small{
  color:rgba(255,255,255,0.34);
}

.choice-btn.disabled .choice-btn-logo-image{
  opacity:0.38;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

.btnrow{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,0.10);
}

.btn{
  border-radius:var(--btn-radius);
  padding:12px 14px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.04em;
  min-height:48px;
  line-height:1;
  font-size:0.82rem;
  box-shadow:var(--btn-shadow);
}

.btn-primary{
  background:linear-gradient(180deg, #ffe45a 0%, var(--primary) 100%);
  color:#0a0f1f;
  border:1px solid rgba(247,209,6,0.90);
}

.btn-primary:hover{
  filter:brightness(1.03);
  box-shadow:var(--btn-shadow-strong);
}

.btn-secondary{
  background:linear-gradient(180deg, rgba(38,52,92,0.95) 0%, rgba(23,35,68,0.95) 100%);
  color:var(--text);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 8px 18px rgba(0,0,0,0.18);
}

.btn-secondary:hover{
  background:linear-gradient(180deg, rgba(44,60,106,0.98) 0%, rgba(26,40,76,0.98) 100%);
  border-color:rgba(255,255,255,0.16);
}

.btn[disabled]{
  opacity:0.45;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

.reveal{
  display:none;
}

.reveal.active{
  display:block;
}

.summary-box,
.preview-box{
  padding:12px 12px;
  line-height:1.4;
  font-size:0.86rem;
  margin-top:8px;
}

.summary-box strong,
.preview-box strong{
  color:var(--primary);
  display:block;
  margin-bottom:3px;
  font-size:0.76rem;
  text-transform:uppercase;
  letter-spacing:0.04em;
  line-height:1.2;
}

.message{
  padding:12px 12px;
  line-height:1.4;
  font-size:0.86rem;
  margin-top:12px;
}

.message.error{
  background:rgba(255,77,77,0.15);
  border-color:rgba(255,77,77,0.45);
  color:#ffd6d6;
  font-weight:800;
}

.message.success{
  background:rgba(66,245,108,0.12);
  border-color:rgba(66,245,108,0.28);
  color:#d7ffe2;
}

.message.warning{
  background:rgba(255,193,7,0.16);
  border-color:rgba(255,193,7,0.34);
  color:#fff1b5;
  font-weight:700;
}

.usage-job-lookup{
  margin-top:10px;
}

.usage-job-lookup strong{
  margin-bottom:4px;
}

.usage-job-lookup.is-loading{
  border-color:rgba(77,163,255,0.34);
  background:rgba(77,163,255,0.14);
  color:#d8ebff;
}

.usage-job-lookup.is-success{
  border-color:rgba(66,245,108,0.30);
  background:rgba(66,245,108,0.12);
  color:#d7ffe2;
}

.usage-job-lookup.is-warning{
  border-color:rgba(255,193,7,0.34);
  background:rgba(255,193,7,0.16);
  color:#fff1b5;
}

.usage-job-lookup-meta{
  color:var(--muted);
  font-size:0.76rem;
}

.line-list,
.log-list{
  display:grid;
  gap:8px;
}

.line-card,
.log-card{
  padding:12px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.line-card strong,
.log-card strong{
  display:block;
  margin-bottom:4px;
  font-size:0.92rem;
  line-height:1.25;
}

.line-card p,
.log-card p{
  margin:0;
  color:var(--muted);
  font-size:0.82rem;
  line-height:1.4;
}

.line-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%);
}

.delivery-card{
  align-items:stretch;
}

.delivery-card.is-unmatched{
  border-color:var(--low-stock-border);
  background:linear-gradient(180deg, rgba(80,27,27,0.34) 0%, rgba(255,255,255,0.04) 100%);
}

.delivery-card.is-receiving{
  opacity:0.72;
}

.delivery-card-main{
  flex:1 1 auto;
  min-width:0;
}

.delivery-card-title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}

.delivery-card-title strong{
  margin:0;
}

.delivery-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.06);
  color:var(--text);
  font-size:0.7rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.04em;
  white-space:nowrap;
}

.delivery-badge.warn{
  background:rgba(255,77,77,0.15);
  border-color:rgba(255,77,77,0.40);
  color:#ffd6d6;
}

.delivery-metadata{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px 12px;
  margin-top:10px;
}

.delivery-meta{
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
  padding:9px 10px;
}

.delivery-meta-label{
  color:var(--muted);
  font-size:0.68rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin-bottom:3px;
  line-height:1.15;
}

.delivery-meta-value{
  color:var(--text);
  font-size:0.84rem;
  font-weight:700;
  line-height:1.3;
  word-break:break-word;
}

.delivery-card-actions{
  width:170px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.delivery-card-actions .btn{
  width:100%;
  justify-content:center;
  display:inline-flex;
  align-items:center;
}

.delivery-unmatched-note{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,77,77,0.28);
  background:rgba(255,77,77,0.10);
  color:#ffd6d6;
  font-size:0.8rem;
  line-height:1.4;
}

.delivery-unmatched-note.is-success{
  border-color:rgba(66,245,108,0.28);
  background:rgba(66,245,108,0.12);
  color:#d7ffe2;
}

.delivery-unmatched-note.is-warning{
  border-color:rgba(255,77,77,0.28);
  background:rgba(255,77,77,0.10);
  color:#ffd6d6;
}

.delivery-unmatched-note.compact{
  margin-top:8px;
  padding:8px 10px;
  font-size:0.74rem;
}

.delivery-bulk-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
}

.delivery-bulk-summary{
  color:var(--muted);
  font-size:0.82rem;
  line-height:1.35;
}

.delivery-bulk-summary strong{
  color:var(--text);
}

.delivery-bulk-btn{
  flex:0 0 auto;
}

.delivery-bulk-actions{
  display:flex;
  justify-content:flex-start;
  margin-top:12px;
}

.delivery-compact-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.delivery-compact-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.04);
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}

.delivery-compact-row.is-selected{
  border-color:rgba(255,214,10,0.45);
  background:linear-gradient(180deg, rgba(255,214,10,0.10) 0%, rgba(255,255,255,0.04) 100%);
}

.delivery-compact-row.is-unmatched{
  border-color:var(--low-stock-border);
  background:linear-gradient(180deg, rgba(80,27,27,0.30) 0%, rgba(255,255,255,0.03) 100%);
}

.delivery-compact-row.is-receiving{
  opacity:0.72;
}

.delivery-compact-body{
  flex:1 1 auto;
  min-width:0;
}

.delivery-compact-line{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.delivery-compact-line strong{
  flex:0 0 auto;
  color:var(--text);
  font-size:0.98rem;
  line-height:1.2;
  white-space:nowrap;
}

.delivery-compact-meta{
  display:inline-flex;
  flex:1 1 auto;
  flex-wrap:wrap;
  gap:4px 8px;
  min-width:0;
  color:var(--muted);
  font-size:0.76rem;
  line-height:1.2;
}

.delivery-compact-meta span{
  display:inline-flex;
  align-items:center;
  gap:5px;
}

.delivery-compact-meta span:not(:last-child)::after{
  content:'';
  width:4px;
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,0.25);
}

.delivery-compact-checkbox{
  flex:0 0 auto;
  width:20px;
  height:20px;
  margin:0;
  accent-color:var(--accent);
}

.delivery-badge-inline{
  flex:0 0 auto;
  padding:4px 7px;
  font-size:0.64rem;
}

.line-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.line-btn{
  padding:10px 12px;
  border-radius:12px;
  font-size:0.72rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.04em;
  background:linear-gradient(180deg, rgba(38,52,92,0.95) 0%, rgba(23,35,68,0.95) 100%);
  color:var(--text);
  border:1px solid rgba(255,255,255,0.10);
  line-height:1;
  box-shadow:0 6px 16px rgba(0,0,0,0.16);
}

.line-btn:hover{
  border-color:rgba(255,255,255,0.16);
}

.line-btn[disabled]{
  cursor:not-allowed;
  opacity:0.58;
  transform:none;
  box-shadow:none;
}

.line-btn.danger{
  background:rgba(255,77,77,0.14);
  color:#ffd6d6;
  border:1px solid rgba(255,77,77,0.28);
  box-shadow:none;
}

.empty-state{
  padding:14px;
  text-align:center;
  color:var(--muted);
  line-height:1.45;
  font-size:0.88rem;
}

.user-list{
  display:grid;
  gap:8px;
}

.user-card{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.04);
}

.user-card.is-selected{
  border-color:rgba(247,209,6,0.60);
  background:rgba(247,209,6,0.10);
}

.user-card-title{
  margin:0 0 4px;
  font-size:0.92rem;
  font-weight:800;
}

.user-card-copy{
  color:var(--muted);
  font-size:0.8rem;
  line-height:1.45;
}

.user-card-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.checkbox-row{
  display:flex !important;
  align-items:center;
  gap:10px;
  text-transform:none !important;
  letter-spacing:0 !important;
  margin-bottom:0 !important;
}

.checkbox-row input{
  width:18px;
  height:18px;
  margin:0;
}

.auth-overlay{
  position:fixed;
  inset:0;
  z-index:10000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:radial-gradient(circle at top, rgba(10,29,77,0.84), rgba(3,11,36,0.96));
  backdrop-filter:blur(8px);
}

.auth-overlay.active{
  display:flex;
}

:root[data-auth-bootstrap="checking"] .auth-overlay.active{
  display:none;
}

.auth-secure-card{
  display:none;
  width:min(100%, 380px);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;
  padding:24px;
  color:#fff;
  text-align:center;
  background:linear-gradient(180deg, rgba(12,25,58,0.98), rgba(8,16,38,0.98));
  box-shadow:0 24px 60px rgba(0,0,0,0.42);
}

.auth-secure-card h2{
  margin:8px 0;
  font-size:1.25rem;
  line-height:1.2;
}

.auth-secure-card p{
  margin:0;
  color:rgba(255,255,255,0.72);
}

.auth-secure-spinner{
  display:inline-block;
  width:28px;
  height:28px;
  border:3px solid rgba(255,255,255,0.22);
  border-top-color:#fff;
  border-radius:50%;
  animation:authSecureSpin 0.9s linear infinite;
}

:root[data-auth-bootstrap="secure"] .auth-overlay.active{
  display:flex;
}

:root[data-auth-bootstrap="secure"] .auth-card{
  display:none;
}

:root[data-auth-bootstrap="secure"] .auth-secure-card{
  display:block;
}

@keyframes authSecureSpin{
  to{
    transform:rotate(360deg);
  }
}

.auth-card{
  width:min(100%, 460px);
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.10);
  background:linear-gradient(180deg, rgba(12,25,58,0.98) 0%, rgba(8,16,38,0.98) 100%);
  box-shadow:0 24px 60px rgba(0,0,0,0.42);
}

.auth-card-head{
  padding:22px 22px 14px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.auth-card-head h2{
  margin:6px 0 10px;
  font-size:1.4rem;
  line-height:1.2;
  color:var(--primary);
}

.auth-card-head p{
  margin:0;
  color:rgba(245,247,251,0.84);
  line-height:1.55;
}

.auth-eyebrow{
  color:var(--muted);
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-weight:800;
}

.auth-card-body{
  padding:18px 22px 22px;
}

.auth-form .field + .field{
  margin-top:14px;
}

.auth-btnrow{
  border-top:none;
  padding-top:0;
  margin-top:18px;
}

.auth-btnrow .btn{
  width:100%;
  justify-content:center;
  display:inline-flex;
  align-items:center;
}

.auth-help{
  margin-top:12px;
  color:var(--muted);
  font-size:0.82rem;
  line-height:1.45;
}

.divider{
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.14) 18%, rgba(255,255,255,0.14) 82%, transparent 100%);
  margin:14px 0;
}

.submit-wrap{
  margin-top:14px;
}

.submit-wrap .btn{
  width:100%;
  justify-content:center;
  display:inline-flex;
  align-items:center;
}

.submit-wrap + .helper,
.submit-wrap + .helper.helper-tight{
  text-align:center;
}

#kevinAdminPanel{
  margin-top:14px;
}

.admin-dashboard-card{
  grid-column:1 / -1;
  --admin-glass-bg:rgba(5,14,39,0.92);
  --admin-glass-bg-strong:rgba(8,18,48,0.96);
  --admin-glass-surface:rgba(11,22,55,0.76);
  --admin-glass-surface-strong:rgba(12,25,58,0.90);
  --admin-glass-border:rgba(255,255,255,0.105);
  --admin-glass-highlight:rgba(255,255,255,0.085);
  --admin-brand-glow:rgba(247,209,6,0.18);
  --admin-blue-glow:rgba(10,29,77,0.34);
  --admin-muted-bright:rgba(245,247,251,0.76);
  position:relative;
  isolation:isolate;
  border-color:var(--admin-glass-border);
  background:
    linear-gradient(180deg, rgba(12,25,58,0.97), rgba(3,11,36,0.98)),
    radial-gradient(circle at 18% 0%, rgba(10,29,77,0.72), transparent 42%);
  box-shadow:
    0 22px 48px rgba(0,0,0,0.38),
    0 0 0 1px rgba(247,209,6,0.035),
    inset 0 1px 0 var(--admin-glass-highlight);
  backdrop-filter:blur(9px) saturate(118%);
  -webkit-backdrop-filter:blur(9px) saturate(118%);
}

.admin-dashboard-card::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 0%, rgba(20,58,116,0.22), transparent 36%),
    radial-gradient(circle at 88% 4%, rgba(247,209,6,0.12), transparent 30%),
    linear-gradient(90deg, rgba(247,209,6,0.055), transparent 18%, transparent 78%, rgba(247,209,6,0.06));
  opacity:0.95;
}

.admin-dashboard-card::after{
  content:'';
  position:absolute;
  inset:8px;
  z-index:-1;
  pointer-events:none;
  border:1px solid rgba(247,209,6,0.045);
  border-radius:calc(var(--radius) - 6px);
}

.admin-dashboard-card > h2{
  position:relative;
  z-index:1;
  background:linear-gradient(90deg, rgba(247,209,6,0.075) 0%, rgba(12,25,58,0.45) 48%, rgba(3,11,36,0.12) 100%);
  color:var(--text);
  border-bottom-color:rgba(247,209,6,0.12);
}

.admin-dashboard-heading-meta{
  flex:0 0 auto;
  border-radius:999px;
  border:1px solid rgba(247,209,6,0.38);
  background:linear-gradient(180deg, rgba(247,209,6,0.22), rgba(247,209,6,0.10));
  color:#fff2ad;
  padding:4px 8px;
  font-size:0.58rem;
  font-weight:900;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.admin-dashboard-card .body{
  position:relative;
  z-index:1;
  display:grid;
  gap:16px;
}

.admin-dashboard-overview-strip{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  position:relative;
  overflow:hidden;
  border-radius:14px;
  border:1px solid rgba(247,209,6,0.12);
  background:
    linear-gradient(180deg, rgba(12,25,58,0.88), rgba(5,14,39,0.90)),
    rgba(3,11,36,0.72);
  padding:12px;
  box-shadow:
    inset 0 1px 1px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 10px 24px rgba(0,0,0,0.16);
  backdrop-filter:blur(6px) saturate(112%);
  -webkit-backdrop-filter:blur(6px) saturate(112%);
}

.admin-dashboard-overview-strip::before{
  content:'';
  position:absolute;
  left:0;
  top:12px;
  bottom:12px;
  width:3px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(247,209,6,0.98), rgba(247,209,6,0.42));
}

.admin-dashboard-overview-meta{
  min-width:170px;
  padding-left:4px;
}

.admin-dashboard-overview-meta .helper{
  margin-top:0;
  color:rgba(247,209,6,0.86);
  text-transform:uppercase;
  letter-spacing:0.07em;
  font-size:0.64rem;
  font-weight:900;
}

.admin-dashboard-last-refreshed{
  color:var(--text);
  font-size:0.95rem;
  font-weight:850;
  line-height:1.25;
  font-variant-numeric:tabular-nums;
}

.admin-dashboard-overview-controls{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
}

.admin-dashboard-refresh-btn{
  min-width:112px;
  min-height:42px;
  padding:10px 14px;
  border:1px solid rgba(247,209,6,0.34);
  background:
    linear-gradient(180deg, rgba(12,25,58,0.96) 0%, rgba(7,16,42,0.96) 100%);
  color:#fff2ad;
  box-shadow:
    0 10px 22px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(247,209,6,0.08);
}

.admin-dashboard-refresh-btn:hover:not(:disabled){
  border-color:rgba(247,209,6,0.64);
  background:
    linear-gradient(180deg, rgba(247,209,6,0.18) 0%, rgba(12,25,58,0.96) 100%);
  color:var(--primary);
  filter:none;
  box-shadow:
    0 12px 26px rgba(0,0,0,0.22),
    0 0 0 1px rgba(247,209,6,0.14),
    inset 0 1px 0 rgba(255,255,255,0.10);
}

.admin-dashboard-refresh-btn:disabled{
  opacity:0.68;
  cursor:progress;
}

.admin-dashboard-range{
  display:inline-flex;
  align-items:center;
  gap:2px;
  min-height:42px;
  padding:3px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(5,12,31,0.78);
  box-shadow:
    inset 0 1px 1px rgba(0,0,0,0.26),
    inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter:blur(5px) saturate(110%);
  -webkit-backdrop-filter:blur(5px) saturate(110%);
}

.admin-dashboard-range-btn{
  appearance:none;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:rgba(245,247,251,0.70);
  font:inherit;
  font-size:0.74rem;
  font-weight:800;
  line-height:1;
  letter-spacing:0;
  text-transform:uppercase;
  min-height:40px;
  padding:9px 13px;
  cursor:pointer;
  transition:background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, transform 0.06s ease;
}

.admin-dashboard-range-btn:hover:not(:disabled){
  border-color:rgba(247,209,6,0.38);
  background:rgba(247,209,6,0.08);
  color:var(--text);
}

.admin-dashboard-range-btn:active{
  transform:translateY(1px);
}

.admin-dashboard-range-btn.active{
  border-color:rgba(247,209,6,0.70);
  background:var(--primary);
  color:#0a0f1f;
  box-shadow:
    0 6px 16px rgba(247,209,6,0.18),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

.admin-dashboard-range-btn[disabled]{
  opacity:0.48;
  cursor:not-allowed;
}

.admin-dashboard-summary-strip{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:11px;
}

.admin-dashboard-stat{
  position:relative;
  overflow:hidden;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.095);
  background:
    linear-gradient(180deg, rgba(12,25,58,0.92), rgba(7,16,42,0.90)),
    rgba(3,11,36,0.72);
  padding:13px 12px 13px 15px;
  display:grid;
  gap:7px;
  min-height:74px;
  min-width:0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 10px 22px rgba(0,0,0,0.16);
}

.admin-dashboard-stat::before{
  content:'';
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(247,209,6,0.95), rgba(247,209,6,0.38));
}

.admin-dashboard-stat-label{
  color:var(--admin-muted-bright);
  font-size:0.68rem;
  font-weight:800;
  letter-spacing:0;
  text-transform:uppercase;
  line-height:1.1;
}

.admin-dashboard-stat-value{
  color:var(--text);
  font-size:1.24rem;
  font-weight:900;
  line-height:1.1;
  overflow-wrap:anywhere;
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
}

.admin-dashboard-stat-high{
  border-color:rgba(255,77,77,0.34);
  background:
    linear-gradient(180deg, rgba(255,77,77,0.13) 0%, rgba(7,16,42,0.92) 100%);
}

.admin-dashboard-stat-high::before{
  background:rgba(255,77,77,0.88);
}

.admin-dashboard-stat-warning{
  border-color:rgba(247,209,6,0.34);
  background:
    linear-gradient(180deg, rgba(247,209,6,0.13) 0%, rgba(7,16,42,0.92) 100%);
}

.admin-dashboard-stat-warning::before{
  background:rgba(247,209,6,0.92);
}

.admin-dashboard-stat-ok::before{
  background:rgba(66,245,108,0.72);
}

.admin-dashboard-panels{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

.admin-dashboard-inventory-panel,
.admin-dashboard-stock-levels-panel,
.admin-dashboard-overview-panel{
  grid-column:1 / -1;
}

.admin-dashboard-panel{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.09);
  background:
    linear-gradient(180deg, rgba(12,25,58,0.88), rgba(5,14,39,0.92)),
    rgba(3,11,36,0.76);
  padding:14px;
  min-width:0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.075),
    0 12px 26px rgba(0,0,0,0.18);
  backdrop-filter:blur(6px) saturate(112%);
  -webkit-backdrop-filter:blur(6px) saturate(112%);
}

.admin-dashboard-panel::before{
  content:'';
  position:absolute;
  inset:0 0 auto;
  height:1px;
  background:linear-gradient(90deg, rgba(247,209,6,0.24), rgba(255,255,255,0.08) 32%, transparent 78%);
  pointer-events:none;
}

.admin-dashboard-alert-panel{
  border-color:rgba(247,209,6,0.20);
}

.admin-dashboard-trend-panel{
  border-color:rgba(247,209,6,0.16);
}

.admin-dashboard-risk-panel,
.admin-dashboard-feed-panel{
  border-color:rgba(247,209,6,0.10);
}

.admin-dashboard-panel h3{
  margin:0 0 12px;
  color:var(--text);
  font-size:0.94rem;
  font-weight:900;
  letter-spacing:0.01em;
  text-transform:none;
  line-height:1.2;
  display:flex;
  align-items:center;
  gap:8px;
}

.admin-dashboard-panel-kicker{
  margin:0 0 6px;
  color:rgba(247,209,6,0.82);
  font-size:0.62rem;
  font-weight:900;
  letter-spacing:0.08em;
  text-transform:uppercase;
  line-height:1;
}

.admin-dashboard-subsection{
  display:grid;
  gap:8px;
}

.admin-dashboard-subsection-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.admin-dashboard-subsection-head h4{
  margin:0;
  color:rgba(245,247,251,0.88);
  font-size:0.74rem;
  font-weight:850;
  letter-spacing:0.02em;
  text-transform:uppercase;
}

.admin-dashboard-subsection-head > span{
  border-radius:999px;
  border:1px solid rgba(247,209,6,0.34);
  background:rgba(247,209,6,0.12);
  color:#fff2ad;
  padding:3px 8px;
  font-size:0.72rem;
  font-weight:900;
  line-height:1;
  font-variant-numeric:tabular-nums;
}

.admin-dashboard-note{
  border-radius:10px;
  border:1px solid rgba(247,209,6,0.18);
  background:rgba(247,209,6,0.08);
  padding:8px 10px;
  color:rgba(245,247,251,0.76);
  font-size:0.72rem;
  line-height:1.35;
}

.admin-dashboard-panel h3::before{
  content:'';
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(247,209,6,0.82);
  box-shadow:0 0 0 4px rgba(247,209,6,0.10);
  flex:0 0 auto;
}

.admin-dashboard-alert-panel h3::before{
  background:rgba(247,209,6,0.94);
  box-shadow:0 0 0 4px rgba(247,209,6,0.12);
}

.admin-dashboard-feed-panel h3::before{
  background:rgba(247,209,6,0.82);
  box-shadow:0 0 0 4px rgba(247,209,6,0.10);
}

.admin-dashboard-subheading{
  margin-top:14px;
  margin-bottom:7px;
  color:rgba(247,209,6,0.78);
  font-size:0.69rem;
  font-weight:800;
  letter-spacing:0;
  text-transform:uppercase;
  line-height:1.2;
}

.admin-dashboard-panel h3 + .admin-dashboard-subheading,
.admin-dashboard-panel h3 + .admin-dashboard-summary-row,
.admin-dashboard-panel h3 + .admin-dashboard-status-strip{
  margin-top:0;
}

.admin-dashboard-status-strip{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
  margin:0 0 13px;
}

.admin-dashboard-status-cell{
  position:relative;
  overflow:hidden;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.085);
  background:
    linear-gradient(180deg, rgba(12,25,58,0.72) 0%, rgba(7,16,42,0.84) 100%);
  padding:9px 10px 9px 11px;
  min-height:56px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.045);
}

.admin-dashboard-status-cell::before{
  content:'';
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:3px;
  border-radius:999px;
  background:rgba(247,209,6,0.64);
}

.admin-dashboard-status-cell.is-high{
  border-color:rgba(255,77,77,0.32);
}

.admin-dashboard-status-cell.is-high::before{
  background:rgba(255,77,77,0.92);
}

.admin-dashboard-status-cell.is-warning{
  border-color:rgba(247,209,6,0.32);
}

.admin-dashboard-status-cell.is-warning::before{
  background:rgba(247,209,6,0.92);
}

.admin-dashboard-status-cell.is-ok::before{
  background:rgba(66,245,108,0.66);
}

.admin-dashboard-status-label{
  display:block;
  color:var(--admin-muted-bright);
  font-size:0.62rem;
  font-weight:800;
  line-height:1.15;
  text-transform:uppercase;
  overflow-wrap:anywhere;
}

.admin-dashboard-status-value{
  display:block;
  margin-top:6px;
  color:var(--text);
  font-size:1.08rem;
  font-weight:900;
  line-height:1;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}

.admin-dashboard-list{
  display:grid;
  gap:9px;
}

.admin-dashboard-low-stock-list{
  gap:7px;
}

.admin-dashboard-low-stock-row{
  position:relative;
  overflow:hidden;
  border-radius:11px;
  border:1px solid rgba(255,255,255,0.085);
  background:linear-gradient(180deg, rgba(12,25,58,0.78) 0%, rgba(7,16,42,0.88) 100%);
  padding:10px 12px 10px 14px;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr)) minmax(92px, auto);
  gap:8px;
  align-items:center;
}

.admin-dashboard-low-stock-row::before{
  content:'';
  position:absolute;
  left:0;
  top:9px;
  bottom:9px;
  width:3px;
  border-radius:999px;
  background:rgba(247,209,6,0.9);
}

.admin-dashboard-low-stock-row.is-warning{
  border-color:rgba(247,209,6,0.32);
}

.admin-dashboard-low-stock-row.is-high{
  border-color:rgba(255,77,77,0.34);
  background:linear-gradient(180deg, rgba(255,77,77,0.14) 0%, rgba(7,16,42,0.90) 100%);
}

.admin-dashboard-low-stock-row.is-high::before{
  background:rgba(255,77,77,0.92);
}

.admin-dashboard-low-stock-cell{
  min-width:0;
  display:grid;
  gap:3px;
}

.admin-dashboard-low-stock-cell em{
  color:var(--admin-muted-bright);
  font-size:0.58rem;
  font-style:normal;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  line-height:1.1;
}

.admin-dashboard-low-stock-cell strong{
  color:var(--text);
  font-size:0.83rem;
  font-weight:850;
  line-height:1.2;
  overflow-wrap:anywhere;
}

.admin-dashboard-order-now-btn{
  justify-self:end;
  min-height:34px;
  border-radius:8px;
  border:1px solid var(--button-primary-border);
  background:var(--button-primary-bg);
  color:var(--button-primary-text);
  box-shadow:0 8px 18px rgba(0,0,0,0.18);
  padding:7px 10px;
  font-size:0.64rem;
  font-weight:900;
  line-height:1;
  letter-spacing:0.04em;
  text-transform:uppercase;
  white-space:nowrap;
}

.admin-dashboard-order-now-btn:hover{
  filter:brightness(1.03);
  box-shadow:0 10px 22px rgba(247,209,6,0.18);
}

.admin-dashboard-stock-levels{
  display:grid;
  gap:7px;
}

.admin-dashboard-stock-level-row{
  position:relative;
  overflow:hidden;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.085);
  background:linear-gradient(180deg, rgba(12,25,58,0.74) 0%, rgba(7,16,42,0.86) 100%);
  padding:8px 10px 8px 14px;
  display:grid;
  grid-template-columns:minmax(54px, auto) minmax(36px, auto) minmax(0, 1fr) minmax(56px, auto);
  align-items:center;
  gap:8px;
}

.admin-dashboard-stock-level-row::before{
  content:'';
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:3px;
  border-radius:999px;
  background:rgba(66,245,108,0.72);
}

.admin-dashboard-stock-level-row.is-low::before{
  background:rgba(247,209,6,0.92);
}

.admin-dashboard-stock-level-row.is-out::before{
  background:rgba(255,77,77,0.94);
}

.admin-dashboard-stock-level-code{
  color:var(--text);
  font-size:0.75rem;
  font-weight:860;
  line-height:1.1;
}

.admin-dashboard-stock-level-width{
  color:rgba(245,247,251,0.72);
  font-size:0.7rem;
  font-weight:760;
  line-height:1.1;
}

.admin-dashboard-stock-level-bar-wrap{
  height:9px;
  border-radius:999px;
  background:rgba(5,12,31,0.78);
  overflow:hidden;
  box-shadow:inset 0 1px 1px rgba(0,0,0,0.22);
}

.admin-dashboard-stock-level-bar{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(247,209,6,0.38), rgba(247,209,6,0.92));
}

.admin-dashboard-stock-level-metres{
  color:var(--text);
  font-size:0.74rem;
  font-weight:860;
  line-height:1;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.admin-dashboard-row{
  position:relative;
  overflow:hidden;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.085);
  background:
    linear-gradient(180deg, rgba(12,25,58,0.76) 0%, rgba(7,16,42,0.84) 100%);
  padding:11px 12px 11px 15px;
  min-width:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.055);
  transition:background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}

.admin-dashboard-row::before{
  content:'';
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:999px;
  background:rgba(247,209,6,0.62);
}

.admin-dashboard-row:hover{
  border-color:rgba(247,209,6,0.28);
  background:
    linear-gradient(180deg, rgba(14,31,71,0.86) 0%, rgba(8,19,48,0.92) 100%);
}

.admin-dashboard-row-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  min-width:0;
  margin:0 0 5px;
}

.admin-dashboard-row strong{
  display:block;
  margin:0;
  font-size:0.86rem;
  line-height:1.25;
  overflow-wrap:anywhere;
  flex:1 1 auto;
  min-width:0;
}

.admin-dashboard-row-metric{
  flex:0 0 auto;
  border-radius:999px;
  border:1px solid rgba(247,209,6,0.16);
  background:rgba(247,209,6,0.08);
  color:var(--text);
  padding:3px 7px;
  font-size:0.72rem;
  font-weight:900;
  line-height:1;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.admin-dashboard-row p{
  margin:0;
  color:rgba(245,247,251,0.68);
  font-size:0.76rem;
  line-height:1.38;
}

.admin-dashboard-row.is-high{
  border-color:rgba(255,77,77,0.34);
  background:
    linear-gradient(180deg, rgba(255,77,77,0.13) 0%, rgba(7,16,42,0.90) 100%);
}

.admin-dashboard-row.is-high::before{
  background:rgba(255,77,77,0.92);
}

.admin-dashboard-row.is-high .admin-dashboard-row-metric{
  border-color:rgba(255,77,77,0.25);
  color:#ffd6d6;
  background:rgba(255,77,77,0.12);
}

.admin-dashboard-row.is-warning{
  border-color:rgba(247,209,6,0.32);
  background:
    linear-gradient(180deg, rgba(247,209,6,0.13) 0%, rgba(7,16,42,0.90) 100%);
}

.admin-dashboard-row.is-warning::before{
  background:rgba(247,209,6,0.92);
}

.admin-dashboard-row.is-warning .admin-dashboard-row-metric{
  border-color:rgba(247,209,6,0.30);
  color:var(--primary);
  background:rgba(247,209,6,0.12);
}

.admin-dashboard-row.is-ok::before{
  background:rgba(66,245,108,0.66);
}

.admin-dashboard-attention-btn{
  appearance:none;
  width:100%;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.085);
  background:
    linear-gradient(180deg, rgba(12,25,58,0.78) 0%, rgba(7,16,42,0.88) 100%);
  color:var(--text);
  padding:12px 12px 12px 15px;
  min-height:56px;
  text-align:left;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  position:relative;
  overflow:hidden;
  transition:background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.06s ease;
}

.admin-dashboard-attention-btn::before{
  content:'';
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:999px;
  background:rgba(247,209,6,0.66);
}

.admin-dashboard-attention-btn.is-high{
  border-color:rgba(255,77,77,0.34);
  background:
    linear-gradient(180deg, rgba(255,77,77,0.15) 0%, rgba(7,16,42,0.90) 100%);
}

.admin-dashboard-attention-btn.is-high::before{
  background:rgba(255,77,77,0.94);
}

.admin-dashboard-attention-btn.is-warning{
  border-color:rgba(247,209,6,0.32);
  background:
    linear-gradient(180deg, rgba(247,209,6,0.14) 0%, rgba(7,16,42,0.90) 100%);
}

.admin-dashboard-attention-btn.is-warning::before{
  background:rgba(247,209,6,0.94);
}

.admin-dashboard-attention-btn:hover:not(:disabled){
  border-color:rgba(247,209,6,0.46);
  background:
    linear-gradient(180deg, rgba(14,31,71,0.88) 0%, rgba(8,19,48,0.92) 100%);
  box-shadow:0 10px 20px rgba(0,0,0,0.16);
}

.admin-dashboard-attention-copy{
  display:grid;
  gap:3px;
  min-width:0;
}

.admin-dashboard-attention-severity{
  color:rgba(247,209,6,0.82);
  font-size:0.66rem;
  font-weight:900;
  letter-spacing:0.08em;
  line-height:1;
  text-transform:uppercase;
}

.admin-dashboard-attention-label{
  font-size:0.84rem;
  font-weight:820;
  line-height:1.3;
  overflow-wrap:anywhere;
}

.admin-dashboard-attention-count{
  min-width:36px;
  border-radius:999px;
  border:1px solid rgba(247,209,6,0.24);
  background:rgba(247,209,6,0.15);
  padding:4px 8px;
  font-size:0.98rem;
  font-weight:900;
  color:var(--primary);
  line-height:1;
  text-align:center;
  flex:0 0 auto;
  font-variant-numeric:tabular-nums;
}

.admin-dashboard-attention-btn.is-high .admin-dashboard-attention-count{
  border-color:rgba(255,77,77,0.30);
  background:rgba(255,77,77,0.16);
  color:#ffd6d6;
}

.admin-dashboard-feed-row{
  padding-left:22px;
}

.admin-dashboard-feed-row::before{
  left:8px;
  top:15px;
  bottom:auto;
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(247,209,6,0.78);
  box-shadow:0 0 0 4px rgba(247,209,6,0.10);
}

.admin-dashboard-feed-row .admin-dashboard-row-head{
  justify-content:flex-start;
  align-items:center;
}

.admin-dashboard-feed-badge{
  flex:0 0 auto;
  border-radius:999px;
  border:1px solid rgba(247,209,6,0.18);
  background:rgba(247,209,6,0.08);
  color:#fff2ad;
  padding:3px 7px;
  font-size:0.58rem;
  font-weight:900;
  letter-spacing:0.07em;
  line-height:1;
  text-transform:uppercase;
}

.admin-dashboard-summary-row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:9px;
}

.admin-dashboard-compact-insights{
  gap:7px;
}

.admin-dashboard-compact-insights .admin-dashboard-row{
  padding:9px 10px 9px 13px;
}

.admin-dashboard-compact-insights .admin-dashboard-row p{
  font-size:0.72rem;
}

.admin-dashboard-usage-chip{
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.085);
  background:
    linear-gradient(180deg, rgba(12,25,58,0.72) 0%, rgba(7,16,42,0.84) 100%);
  padding:10px 11px;
  display:grid;
  gap:5px;
  min-width:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}

.admin-dashboard-chip-label{
  color:var(--admin-muted-bright);
  font-size:0.68rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0;
  line-height:1.1;
}

.admin-dashboard-chip-value{
  color:var(--text);
  font-size:0.98rem;
  font-weight:800;
  line-height:1.2;
  overflow-wrap:anywhere;
  font-variant-numeric:tabular-nums;
}

.admin-dashboard-trend{
  display:grid;
  gap:9px;
}

.admin-dashboard-monthly-trend{
  gap:8px;
}

.admin-dashboard-trend-row{
  display:grid;
  grid-template-columns:minmax(48px, auto) minmax(0, 1fr) minmax(58px, auto);
  align-items:center;
  gap:8px;
}

.admin-dashboard-trend-label{
  color:var(--muted);
  font-size:0.7rem;
  font-weight:700;
  min-width:48px;
}

.admin-dashboard-trend-bar-wrap{
  height:10px;
  border-radius:999px;
  background:rgba(5,12,31,0.76);
  overflow:hidden;
  box-shadow:inset 0 1px 1px rgba(0,0,0,0.20);
}

.admin-dashboard-trend-bar{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(247,209,6,0.46) 0%, rgba(247,209,6,0.88) 100%);
}

.admin-dashboard-trend-value{
  color:var(--text);
  font-size:0.72rem;
  font-weight:800;
  min-width:58px;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.admin-dashboard-top-film-row{
  display:grid;
  gap:7px;
}

.admin-dashboard-top-film-row .admin-dashboard-row-head{
  margin-bottom:0;
}

.admin-dashboard-comparison-bar{
  display:block;
  height:7px;
  border-radius:999px;
  background:rgba(5,12,31,0.70);
  overflow:hidden;
  box-shadow:inset 0 1px 1px rgba(0,0,0,0.20);
}

.admin-dashboard-comparison-bar > span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(247,209,6,0.38), rgba(247,209,6,0.86));
}

.admin-dashboard-empty{
  padding:11px 12px;
  border-style:dashed;
  color:rgba(245,247,251,0.72);
  font-size:0.78rem;
  line-height:1.4;
  background:rgba(11,22,55,0.48);
}

.admin-dashboard-summary-strip .admin-dashboard-empty,
.admin-dashboard-summary-row .admin-dashboard-empty{
  grid-column:1 / -1;
}

.admin-dashboard-card :where(button, [href], input, select, textarea, [tabindex]):focus-visible{
  outline:2px solid rgba(247,209,6,0.92);
  outline-offset:3px;
  box-shadow:0 0 0 4px rgba(247,209,6,0.14);
}

@media (prefers-reduced-motion: reduce){
  .admin-dashboard-card *,
  .admin-dashboard-card *::before,
  .admin-dashboard-card *::after{
    scroll-behavior:auto !important;
    transition-duration:0.01ms !important;
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
  }
}

.log-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
  flex-wrap:wrap;
}

.muted-note{
  color:rgba(255,255,255,0.64);
  font-size:0.77rem;
  line-height:1.45;
}

.live-view-intro{
  margin-bottom:10px;
}

.live-view-summary{
  display:inline-block;
  text-align:right;
  line-height:1.35;
  white-space:normal;
}

.stock-view-toolbar{
  display:flex;
  justify-content:flex-start;
  margin:0 0 10px;
}

.stock-view-switch{
  display:inline-flex;
  align-items:center;
  gap:3px;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:12px;
  background:rgba(5,12,31,0.74);
  padding:4px;
  box-shadow:inset 0 1px 1px rgba(0,0,0,0.22);
}

.stock-view-switch-btn{
  min-height:34px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:var(--muted);
  padding:8px 14px;
  font-size:0.73rem;
  font-weight:900;
  letter-spacing:0.04em;
  line-height:1;
  text-transform:uppercase;
}

.stock-view-switch-btn:hover{
  color:var(--text);
  background:rgba(255,255,255,0.05);
}

.stock-view-switch-btn.active{
  border-color:var(--button-primary-border);
  background:var(--button-primary-bg);
  color:var(--button-primary-text);
  box-shadow:0 8px 18px rgba(0,0,0,0.20);
}

.orders-frame-wrap{
  width:100%;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  background:rgba(255,255,255,0.03);
}

.orders-frame-wrap iframe{
  display:block;
  width:100%;
  border:none;
  background:#fff;
}

.table-wrap{
  width:100%;
  overflow:auto;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  background:rgba(255,255,255,0.03);
}

.live-stock-table-wrap{
  max-height:70vh;
}

.live-stock-table-wrap[hidden],
.live-stock-visual-list[hidden]{
  display:none !important;
}

.live-stock-search-wrap{
  margin:0 0 10px;
}

.live-stock-search-input{
  width:100%;
  max-width:420px;
  border:1px solid var(--input-border);
  border-radius:10px;
  background:var(--input-bg);
  color:var(--text);
  padding:10px 12px;
  font-size:0.88rem;
  font-weight:700;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
}

.live-stock-search-input::placeholder{
  color:var(--muted);
  opacity:1;
}

.live-stock-search-input:focus{
  border-color:rgba(247,209,6,0.65);
  box-shadow:0 0 0 3px rgba(247,209,6,0.14);
}

.live-stock-visual-list{
  display:grid;
  gap:7px;
  max-height:70vh;
  overflow:auto;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  background:rgba(255,255,255,0.03);
  padding:8px;
}

.live-stock-visual-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  margin:0 -8px 2px;
  border-top:1px solid rgba(255,255,255,0.14);
  border-bottom:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.40);
}

.live-stock-visual-group{
  margin:0 -1px;
  border-radius:9px;
  background:rgba(255,255,255,0.055);
  color:var(--primary);
  padding:9px 10px 7px;
  font-size:0.78rem;
  font-weight:850;
  letter-spacing:0.03em;
  line-height:1.2;
  text-align:center;
}

.live-stock-visual-row{
  position:relative;
  overflow:hidden;
  width:100%;
  border:1px solid rgba(255,255,255,0.085);
  border-radius:10px;
  background:linear-gradient(180deg, rgba(12,25,58,0.74) 0%, rgba(7,16,42,0.86) 100%);
  color:var(--text);
  padding:8px 10px 8px 14px;
  display:grid;
  grid-template-columns:minmax(58px, 0.82fr) minmax(38px, 0.44fr) minmax(0, 1.8fr) minmax(62px, auto);
  align-items:center;
  gap:8px;
  text-align:left;
}

.live-stock-visual-row::before{
  content:'';
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:3px;
  border-radius:999px;
  background:rgba(66,245,108,0.72);
}

.live-stock-visual-row.is-low::before{
  background:rgba(247,209,6,0.92);
}

.live-stock-visual-row.is-out::before{
  background:rgba(255,77,77,0.94);
}

.live-stock-visual-row:hover{
  border-color:rgba(247,209,6,0.24);
  background:linear-gradient(180deg, rgba(18,34,74,0.86) 0%, rgba(8,18,47,0.92) 100%);
}

.live-stock-visual-row:focus-visible{
  outline:3px solid rgba(247,209,6,0.36);
  outline-offset:2px;
}

.live-stock-visual-code{
  color:var(--text);
  font-size:0.76rem;
  font-weight:860;
  line-height:1.1;
  overflow-wrap:anywhere;
}

.live-stock-visual-width{
  color:rgba(245,247,251,0.72);
  font-size:0.7rem;
  font-weight:760;
  line-height:1.1;
}

.live-stock-visual-bar-wrap{
  height:9px;
  border-radius:999px;
  background:rgba(5,12,31,0.78);
  overflow:hidden;
  box-shadow:inset 0 1px 1px rgba(0,0,0,0.22);
}

.live-stock-visual-bar{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(247,209,6,0.38), rgba(247,209,6,0.92));
}

.live-stock-visual-row.is-out .live-stock-visual-bar{
  width:0 !important;
}

.live-stock-visual-metres{
  color:var(--text);
  font-size:0.74rem;
  font-weight:860;
  line-height:1;
  text-align:right;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.live-stock-visual-row.is-low .live-stock-visual-metres{
  color:var(--primary);
}

.live-stock-visual-row.is-out .live-stock-visual-metres{
  color:#ff4d4d;
}

.live-stock-visual-knowledge{
  margin:0 0 4px;
}

.live-stock-visual-empty{
  margin:0;
}

.stock-search-result-heading td{
  padding-top:10px;
  padding-bottom:8px;
}

.stock-search-width-row td{
  padding-top:8px;
  padding-bottom:8px;
}

.stock-search-knowledge-row td{
  padding:8px 8px 10px;
  background:rgba(255,255,255,0.02);
}

.stock-search-knowledge-cell{
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.stock-film-overview{
  border:1px solid rgba(247,209,6,0.20);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(10,23,57,0.78) 0%, rgba(6,15,39,0.78) 100%);
  padding:10px 12px;
}

.stock-film-overview-title{
  font-size:0.76rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--primary);
  margin:0 0 7px;
}

.stock-film-overview p{
  margin:0;
  color:var(--text);
  font-size:0.82rem;
  line-height:1.45;
}

.stock-film-overview p + p{
  margin-top:4px;
}

.stock-film-overview-missing{
  color:var(--muted);
  font-size:0.82rem;
  line-height:1.4;
}

.stock-table{
  width:100%;
  min-width:360px;
  table-layout:fixed;
  border-collapse:collapse;
  font-size:0.84rem;
}

.stock-table col.col-brand{ width:22%; }
.stock-table col.col-item{ width:23%; }
.stock-table col.col-width{ width:15%; }
.stock-table col.col-stock{ width:40%; }

.stock-table thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:linear-gradient(180deg, rgba(20,33,68,0.98) 0%, rgba(14,24,51,0.98) 100%);
  color:var(--primary);
  text-transform:uppercase;
  letter-spacing:0.04em;
  font-size:0.72rem;
  font-weight:900;
  padding:11px 8px;
  text-align:left;
  border-bottom:1px solid rgba(255,255,255,0.10);
  white-space:nowrap;
}

.stock-table thead th.stock-col-right{
  text-align:right;
}

.stock-table tbody tr:nth-child(even){
  background:rgba(255,255,255,0.03);
}

.stock-table tbody tr:hover{
  background:rgba(247,209,6,0.06);
}

.stock-table tbody tr:last-child td{
  border-bottom:none;
}

.stock-col-right{
  text-align:right;
}

.stock-table td.stock-col-right{
  font-weight:800;
  color:var(--primary);
}

.stock-table td.stock-col-right{
  font-weight:800;
}

.stock-table td.stock-col-right.stock-level-good{
  color:#42f56c;
}

.stock-table td.stock-col-right.stock-level-low{
  color:var(--primary);
}

.stock-table td.stock-col-right.stock-level-out{
  color:#ff2400;
}

.stock-heading-row:hover{
  background:transparent !important;
}

.stock-heading-cell,
.stock-group-cell{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

.stock-brand-row td{
  padding:12px 10px 8px;
  background:rgba(255,255,255,0.40);
  border-top:1px solid rgba(255,255,255,0.16);
  border-bottom:1px solid rgba(255,255,255,0.16);
}

.stock-heading-cell{
  color:var(--primary) !important;
  font-size:0.82rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.05em;
  text-align:center;
}

.table-brand-logo-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  width:100%;
}

.table-brand-logo{
  display:block;
  width:auto;
  object-fit:contain;
  object-position:center;
  filter:none;
}

.table-brand-logo.brand-logo-3m{
  height:34px;
  max-width:120px;
}

.table-brand-logo.brand-logo-express{
  height:30px;
  max-width:120px;
  width:auto;
  transform:none;
}

.table-brand-logo.brand-logo-mep{
  height:30px;
  max-width:120px;
}

.table-brand-logo.brand-logo-solargard{
  height:32px;
  max-width:120px;
}

.table-brand-fallback{
  display:inline-block;
}

.visually-hidden-brand-text{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

.stock-group-row td{
  padding:9px 10px 7px;
  background:rgba(255,255,255,0.05);
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.stock-group-cell{
  color:var(--primary) !important;
  font-size:0.78rem;
  font-weight:800;
  letter-spacing:0.03em;
  text-align:center;
}

.stock-table-empty{
  text-align:center;
  color:var(--muted) !important;
  font-weight:700;
  padding:18px 12px !important;
}

.stock-adjustment-modal-overlay{
  align-items:flex-end;
  padding:12px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.stock-adjustment-modal-card{
  display:flex;
  flex-direction:column;
  width:min(100%, 560px);
  max-height:min(720px, calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  overflow:hidden;
  border-color:rgba(247,209,6,0.20);
}

.stock-adjustment-modal-head{
  align-items:center;
}

.stock-adjustment-close-btn{
  flex:0 0 auto;
}

.stock-adjustment-modal-body{
  display:grid;
  gap:12px;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.stock-adjustment-selected-line{
  margin:0;
}

.stock-adjustment-type-grid{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.stock-adjustment-modal-actions{
  gap:8px;
  flex:0 0 auto;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,0.08);
  background:linear-gradient(180deg, rgba(10,18,43,0.98) 0%, rgba(8,16,38,0.98) 100%);
}

.stock-adjustment-modal-actions .btn{
  flex:1 1 calc(50% - 4px);
}

.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(2, 6, 23, 0.78);
  backdrop-filter:blur(4px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:9999;
}

.modal-overlay.active{
  display:flex;
}

.modal-card{
  width:min(100%, 420px);
  background:linear-gradient(180deg, rgba(25,20,45,0.98) 0%, rgba(11,22,55,0.98) 100%);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:20px;
  box-shadow:0 20px 50px rgba(0,0,0,0.5);
  overflow:hidden;
}

.modal-head{
  padding:14px 16px 12px;
  background:rgba(255,77,77,0.16);
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.modal-title{
  margin:0;
  color:#ffd6d6;
  font-size:0.95rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.05em;
  line-height:1.2;
}

.modal-body{
  padding:16px;
  color:var(--text);
}

.modal-body p{
  margin:0;
  font-size:1rem;
  line-height:1.5;
  font-weight:700;
}

.modal-actions{
  padding:0 16px 16px;
  display:flex;
  justify-content:flex-end;
}

.modal-actions .btn{
  min-width:120px;
}

.film-knowledge-btnrow{
  margin-top:10px;
}

.film-knowledge-key-grid{
  display:grid;
  gap:10px;
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.film-knowledge-use-cases{
  display:grid;
  gap:8px;
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.film-knowledge-use-case{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:10px;
  background:rgba(255,255,255,0.03);
  padding:8px 9px;
  min-height:44px;
}

.film-knowledge-use-case input{
  margin:0;
  width:16px;
  height:16px;
  accent-color:var(--accent);
}

.film-knowledge-use-case span{
  color:var(--text);
  font-size:0.82rem;
  line-height:1.3;
  font-weight:700;
}

.settings-modal-overlay{
  z-index:10020;
  padding:calc(12px + env(safe-area-inset-top, 0px)) 10px 10px;
}

.ut-loader-overlay{
  position:fixed;
  inset:0;
  z-index:11060;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:calc(18px + env(safe-area-inset-top, 0px)) 18px calc(18px + env(safe-area-inset-bottom, 0px));
  opacity:0;
  pointer-events:none;
  transition:opacity 0.22s ease;
}

.ut-loader-overlay.active{
  opacity:1;
}

.ut-loader-overlay.is-display-blocking{
  inset:0;
  transform:none;
  background:rgba(2,8,24,0.34);
  backdrop-filter:blur(3px) saturate(0.86);
  -webkit-backdrop-filter:blur(3px) saturate(0.86);
  align-items:center;
  justify-content:center;
  padding:calc(18px + env(safe-area-inset-top, 0px)) 18px calc(18px + env(safe-area-inset-bottom, 0px));
}

.ut-loader-overlay.active.is-display-blocking{
  pointer-events:auto;
}

.ut-loader-overlay.is-display-floating{
  inset:auto;
  top:calc(8px + env(safe-area-inset-top, 0px));
  right:12px;
  left:auto;
  bottom:auto;
  transform:none;
  padding:0;
  align-items:flex-start;
  justify-content:flex-end;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.ut-loader-panel{
  width:min(90vw, 560px);
  border:none;
  background:transparent;
  box-shadow:none;
  padding:0;
  display:grid;
  gap:8px;
  justify-items:center;
}

.ut-loader-overlay.is-display-floating .ut-loader-panel{
  width:min(248px, calc(100vw - 20px));
  padding:8px 10px;
  gap:6px;
  justify-items:stretch;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.16);
  background:linear-gradient(180deg, rgba(10,22,52,0.96) 0%, rgba(7,16,40,0.96) 100%);
  box-shadow:0 14px 28px rgba(0,0,0,0.42);
  pointer-events:none;
}

.ut-loader-logo-wrap{
  width:min(84vw, 520px);
}

.ut-loader-overlay.is-display-floating .ut-loader-logo-wrap{
  width:min(160px, 52vw);
  margin:0 auto;
}

.ut-loader-logo{
  width:100%;
  height:auto;
  display:block;
  filter:
    drop-shadow(0 0 1.5px rgba(0,0,0,0.78))
    drop-shadow(0 10px 22px rgba(0,0,0,0.48));
  transform:translateZ(0);
}

.ut-loader-ellipse-base,
.ut-loader-ellipse-active,
.ut-loader-letters{
  image-rendering:auto;
}

.ut-loader-ellipse-base{
  opacity:0.28;
}

.ut-loader-ellipse-active-layer{
  opacity:1;
  transition:opacity 0.14s linear;
}

.ut-loader-ellipse-active{
  filter:saturate(1.16) brightness(1.14);
}

.ut-loader-overlay.is-reduced-motion .ut-loader-ellipse-active{
  filter:saturate(1.1) brightness(1.08);
}

.ut-loader-copy{
  width:100%;
  text-align:center;
}

.ut-loader-overlay.is-display-floating .ut-loader-copy{
  text-align:left;
}

.ut-loader-message{
  margin:0;
  color:var(--text-primary);
  font-size:0.9rem;
  font-weight:700;
  letter-spacing:0.01em;
  text-shadow:0 2px 10px rgba(0,0,0,0.48);
}

.ut-loader-overlay.is-display-floating .ut-loader-message{
  font-size:0.78rem;
  line-height:1.28;
  text-shadow:none;
}

.ut-loader-progress-text{
  margin:4px 0 0;
  color:var(--highlight-yellow);
  font-size:0.84rem;
  font-weight:800;
  letter-spacing:0.04em;
  text-shadow:0 2px 10px rgba(0,0,0,0.52);
}

.ut-loader-overlay.is-display-floating .ut-loader-progress-text{
  margin-top:3px;
  font-size:0.7rem;
  text-shadow:none;
}

@media (max-width:620px){
  .ut-loader-panel{
    width:min(94vw, 400px);
    padding:0;
  }

  .ut-loader-logo-wrap{
    width:min(88vw, 360px);
  }

  .ut-loader-message{
    font-size:0.88rem;
  }

  .ut-loader-overlay.is-display-floating{
    right:auto;
    left:50%;
    transform:translateX(-50%);
    top:calc(8px + env(safe-area-inset-top, 0px));
    justify-content:center;
  }

  .ut-loader-overlay.is-display-floating .ut-loader-panel{
    width:min(256px, calc(100vw - 16px));
    padding:8px 10px;
  }

  .ut-loader-overlay.is-display-floating .ut-loader-logo-wrap{
    width:min(148px, 54vw);
  }

  .ut-loader-overlay.is-display-floating .ut-loader-message{
    font-size:0.76rem;
  }
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ut-loader-overlay.is-display-blocking{
    background:rgba(2,8,24,0.42);
  }
}

.settings-modal-card{
  width:min(720px, calc(100vw - 20px));
  max-height:calc(100svh - 20px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.12);
  background:linear-gradient(180deg, rgba(12,25,58,0.98) 0%, rgba(7,15,40,0.98) 100%);
  box-shadow:0 22px 56px rgba(0,0,0,0.52);
}

.settings-modal-head{
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:14px 16px 12px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  background:rgba(7,15,40,0.96);
  backdrop-filter:blur(10px);
}

.settings-modal-title-wrap{
  min-width:0;
}

.settings-modal-title{
  margin:0;
  color:var(--primary);
  font-size:0.95rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.06em;
  line-height:1.2;
}

.settings-modal-subtitle{
  margin:4px 0 0;
  color:var(--muted);
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.04em;
  line-height:1.3;
}

.settings-modal-account{
  margin-top:8px;
  font-size:0.72rem;
  line-height:1.35;
  color:rgba(245,247,251,0.86);
  font-weight:700;
}

.settings-close-btn{
  margin-top:0;
  width:46px;
  min-width:46px;
  height:46px;
}

.settings-modal-body{
  padding:10px;
  overflow:auto;
  overscroll-behavior:contain;
  padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling:touch;
}

.settings-group{
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.035);
  overflow:hidden;
}

.settings-group + .settings-group{
  margin-top:10px;
}

.settings-group-title{
  margin:0;
  padding:10px 12px 8px;
  color:var(--primary);
  font-size:0.72rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.07em;
  border-bottom:1px solid rgba(255,255,255,0.07);
}

.settings-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
  padding:11px 12px;
  min-height:52px;
}

.settings-row[data-toggle-target]{
  cursor:pointer;
}

.settings-row[data-toggle-target]:hover{
  background:rgba(255,255,255,0.02);
}

.settings-row + .settings-row{
  border-top:1px solid rgba(255,255,255,0.06);
}

.settings-row-copy{
  min-width:0;
}

.settings-label{
  color:var(--text);
  font-size:0.9rem;
  font-weight:800;
  line-height:1.25;
}

.settings-help{
  margin:3px 0 0;
  color:var(--muted);
  font-size:0.76rem;
  line-height:1.35;
}

.settings-segmented{
  display:inline-grid;
  grid-auto-flow:column;
  gap:3px;
  padding:3px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(5,12,31,0.68);
}

.settings-segmented-3{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.settings-segment-btn{
  appearance:none;
  min-height:44px;
  padding:0 10px;
  border:0;
  border-radius:11px;
  background:transparent;
  color:rgba(245,247,251,0.66);
  font:inherit;
  font-size:0.72rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.04em;
  cursor:pointer;
}

.settings-segment-btn.active{
  background:var(--primary);
  color:#0a0f1f;
  box-shadow:0 6px 14px rgba(247,209,6,0.16);
}

.settings-segment-btn:focus-visible{
  outline:2px solid rgba(247,209,6,0.85);
  outline-offset:2px;
}

.settings-switch{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:8px 0;
  cursor:pointer;
  user-select:none;
}

.settings-switch input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.settings-switch-track{
  position:relative;
  width:48px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.08);
  transition:background 0.16s ease, border-color 0.16s ease;
}

.settings-switch-thumb{
  position:absolute;
  top:3px;
  left:3px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:rgba(245,247,251,0.94);
  box-shadow:0 4px 10px rgba(0,0,0,0.28);
  transition:transform 0.16s ease, background 0.16s ease;
}

.settings-switch input:checked + .settings-switch-track{
  background:var(--primary);
  border-color:rgba(247,209,6,0.72);
}

.settings-switch input:checked + .settings-switch-track .settings-switch-thumb{
  transform:translateX(20px);
  background:#0a0f1f;
}

.settings-switch input:focus-visible + .settings-switch-track{
  outline:2px solid rgba(247,209,6,0.85);
  outline-offset:2px;
}

.settings-switch-state{
  min-width:24px;
  font-size:0.76rem;
  font-weight:900;
  color:var(--primary);
  text-transform:uppercase;
  letter-spacing:0.04em;
}

.settings-select-wrap{
  min-width:140px;
}

.settings-select{
  min-height:44px;
  font-size:0.82rem;
  padding:10px 11px;
}

.settings-row-reset{
  align-items:flex-start;
}

.settings-reset-btn{
  min-width:150px;
  min-height:44px;
  padding:10px 12px;
}

.settings-inline-message{
  margin:0 12px 12px;
}

.banner-hidden-mobile{
  display:block;
}

.mobile-nav{
  display:none;
}

.mobile-nav-btn{
  appearance:none;
  border:none;
  background:transparent;
  color:rgba(245,247,251,0.62);
  border-radius:16px;
  padding:8px 6px 10px;
  min-height:60px;
  font:inherit;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  transition:background 0.18s ease, color 0.18s ease, transform 0.06s ease;
}

.mobile-nav-btn:active{
  transform:translateY(1px);
}

.mobile-nav-btn.active{
  background:rgba(247,209,6,0.16);
  color:var(--primary);
}

.mobile-nav-icon{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.mobile-nav-icon svg{
  width:100%;
  height:100%;
  display:block;
}

.mobile-nav-label{
  font-size:0.68rem;
  font-weight:800;
  letter-spacing:0.03em;
  text-transform:uppercase;
  line-height:1;
}

.workflow-intro-card .body{
  display:grid;
  gap:12px;
}

.workflow-kicker{
  color:var(--primary);
  font-size:0.72rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.08em;
}

.workflow-title{
  margin:0;
  padding:0;
  border:0;
  font-size:1.2rem;
  font-weight:900;
  text-transform:none;
  letter-spacing:0;
  justify-content:flex-start;
  line-height:1.1;
  color:var(--text);
}

.workflow-copy{
  margin:0;
  color:rgba(245,247,251,0.82);
  line-height:1.5;
}

@media (min-width: 900px){
  .grid-main{
    grid-template-columns:1.02fr 0.98fr;
  }

  .admin-dashboard-summary-strip{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:12px;
  }

  .admin-dashboard-panels{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
  }

  .brand-head img{
    width:84px;
  }

  .brand-copy h1{
    font-size:20px;
  }
}

@media (max-width: 760px){
  .header-actions{
    width:100%;
    align-items:stretch;
  }

  .auth-status-bar{
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:9px 11px;
  }

  .auth-status-name{
    font-size:0.9rem;
  }

  .auth-status-meta{
    font-size:0.74rem;
  }

  .line-card,
  .log-card,
  .user-card{
    flex-direction:column;
  }

  .delivery-card{
    flex-direction:column;
  }

  .delivery-card-actions{
    width:100%;
  }

  .delivery-metadata{
    grid-template-columns:1fr;
  }

  .delivery-bulk-toolbar{
    flex-direction:column;
    align-items:flex-start;
  }

  .delivery-bulk-actions{
    width:100%;
  }

  .delivery-compact-checkbox{
    align-self:center;
  }

  .line-actions{
    width:100%;
    justify-content:stretch;
  }

  .line-btn{
    flex:1 1 0;
  }

  .job-meta-row{
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap:10px;
  }

  .admin-dashboard-low-stock-row{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:7px;
  }

  .admin-dashboard-order-now-btn{
    grid-column:2;
    justify-self:end;
  }
}

@media (max-width: 560px){
  body{
    padding:calc(22px + env(safe-area-inset-top, 0px)) 10px calc(28px + env(safe-area-inset-bottom, 0px));
  }

  header{
    gap:8px;
  }

  .brand-head{
    gap:8px;
  }

  .brand-head img{
    width:64px;
  }

  .brand-copy h1{
    font-size:17px;
  }

  .brand-subtitle{
    font-size:0.78rem;
  }

  .tool-title{
    font-size:0.75rem;
  }

  .mode-switch,
  .mode-switch-3{
    width:100%;
    justify-content:space-between;
  }

  .job-meta-row{
    gap:8px;
  }

  .auth-status-bar{
    gap:8px;
    padding:8px 10px;
  }

  .auth-status-actions{
    gap:8px;
  }

  .auth-status-label{
    font-size:0.62rem;
  }

  .auth-status-name{
    font-size:0.86rem;
  }

  .auth-status-meta{
    font-size:0.72rem;
  }

  .auth-logout-btn{
    padding:8px 11px;
    font-size:0.74rem;
  }

  .auth-card-head{
    padding:18px 18px 12px;
  }

  .auth-card-body{
    padding:16px 18px 18px;
  }

  .mode-btn{
    flex:1 1 0;
    min-width:0;
    padding:9px 8px;
    font-size:0.68rem;
  }

  .compact-banner-grid{
    grid-template-columns:1fr 1fr;
  }

  .grid-installers{
    grid-template-columns:1fr 1fr;
  }

  .grid-brands{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .grid-cards,
  .grid-actions{
    grid-template-columns:1fr 1fr;
  }

  #orderItemGrid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  #orderItemGrid .choice-btn{
    min-height:64px;
    padding:12px 12px;
  }

  #orderItemGrid .catalog-group-heading{
    margin-top:10px;
    padding-top:2px;
    font-size:0.78rem;
  }

  #orderItemGrid .inline-width-picker{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }

  .body{
    padding:10px 12px 12px;
  }

  .usage-step-card{
    padding:12px;
  }

  .usage-step-header{
    gap:10px;
  }

  .usage-inline-step{
    padding:10px 12px 0;
  }

  .usage-meta-copy{
    flex-wrap:wrap;
    justify-content:flex-start;
  }

  .utility-subsection h3{
    align-items:flex-start;
    flex-direction:column;
  }

  .card h2{
    padding:11px 12px 9px;
    font-size:0.8rem;
    align-items:flex-start;
  }

  .card-toggle-btn{
    padding:11px 12px 9px;
  }

  .admin-dashboard-card .body{
    gap:12px;
  }

  .admin-dashboard-heading-meta{
    padding:3px 7px;
    font-size:0.58rem;
  }

  .admin-dashboard-overview-strip{
    align-items:flex-start;
    padding:11px;
  }

  .admin-dashboard-overview-meta{
    width:100%;
  }

  .admin-dashboard-panel{
    padding:11px;
  }

  .admin-dashboard-panel h3{
    margin-bottom:10px;
  }

  .admin-dashboard-panel-kicker{
    font-size:0.58rem;
  }

  .admin-dashboard-subsection-head h4{
    font-size:0.68rem;
  }

  .admin-dashboard-subsection-head > span{
    font-size:0.68rem;
    padding:3px 7px;
  }

  .admin-dashboard-note{
    padding:7px 9px;
    font-size:0.68rem;
  }

  .admin-dashboard-stat{
    padding:11px 10px 11px 13px;
    min-height:68px;
  }

  .admin-dashboard-stat-value{
    font-size:1.08rem;
  }

  .admin-dashboard-status-strip{
    gap:6px;
    margin-bottom:11px;
  }

  .admin-dashboard-status-cell{
    min-height:52px;
    padding:8px 7px 8px 9px;
  }

  .admin-dashboard-status-label{
    font-size:0.56rem;
  }

  .admin-dashboard-status-value{
    font-size:1rem;
  }

  .admin-dashboard-row-head{
    gap:7px;
    flex-wrap:wrap;
    align-items:flex-start;
  }

  .admin-dashboard-row-metric{
    font-size:0.68rem;
    padding:3px 6px;
    margin-left:auto;
  }

  .admin-dashboard-row{
    padding:10px 10px 10px 13px;
  }

  .admin-dashboard-low-stock-row{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:7px;
    padding:9px 9px 9px 12px;
  }

  .admin-dashboard-order-now-btn{
    grid-column:2;
    justify-self:end;
    min-height:32px;
    padding:7px 9px;
    font-size:0.6rem;
  }

  .admin-dashboard-low-stock-cell em{
    font-size:0.55rem;
  }

  .admin-dashboard-low-stock-cell strong{
    font-size:0.76rem;
  }

  .admin-dashboard-stock-level-row{
    grid-template-columns:minmax(44px, auto) minmax(30px, auto) minmax(0, 1fr) minmax(50px, auto);
    gap:6px;
    padding:7px 8px 7px 12px;
  }

  .admin-dashboard-stock-level-code{
    font-size:0.7rem;
  }

  .admin-dashboard-stock-level-width{
    font-size:0.66rem;
  }

  .admin-dashboard-stock-level-metres{
    font-size:0.68rem;
  }

  .admin-dashboard-attention-btn{
    min-height:54px;
    padding:11px 10px 11px 13px;
  }

  .admin-dashboard-summary-row{
    gap:7px;
  }

  .admin-dashboard-usage-chip{
    padding:9px;
  }

  .admin-dashboard-trend-row{
    grid-template-columns:minmax(42px, auto) minmax(72px, 1fr) minmax(54px, auto);
    gap:7px;
  }

  .admin-dashboard-trend-label{
    min-width:0;
  }

  .admin-dashboard-trend-value{
    min-width:54px;
    font-size:0.68rem;
  }

  .admin-dashboard-overview-controls{
    width:100%;
    justify-content:space-between;
    gap:8px;
  }

  .admin-dashboard-range{
    flex:1 1 auto;
    min-width:0;
  }

  .admin-dashboard-range-btn{
    flex:1 1 0;
    text-align:center;
    padding:8px 0;
  }

  .admin-dashboard-refresh-btn{
    flex:0 0 auto;
    min-width:106px;
    padding:10px 10px;
  }

  .choice-btn{
    min-height:56px;
    font-size:0.88rem;
  }

  .compact-installers .choice-btn{
    min-height:42px;
    font-size:0.8rem;
    padding:8px 8px;
  }

  .grid-brands .choice-btn{
    min-height:58px;
    font-size:0.82rem;
    padding:8px 4px;
  }

  .choice-btn-logo-image.brand-logo-3m{
    height:32px;
    max-width:78%;
  }

  .choice-btn-logo-image.brand-logo-express{
    display:block !important;
    height:28px !important;
    max-width:82% !important;
    width:auto !important;
    transform:none !important;
  }

  .choice-btn-logo-image.brand-logo-mep{
    height:28px;
    max-width:82%;
  }

  .choice-btn-logo-image.brand-logo-solargard{
    height:34px;
    max-width:82%;
  }

  .choice-btn-logo-image.brand-logo-riviera{
    height:28px;
    max-width:82%;
  }

  .table-brand-logo.brand-logo-3m{
    height:28px;
    max-width:90px;
  }

  .table-brand-logo.brand-logo-express{
    height:24px;
    max-width:90px;
    width:auto;
  }

  .table-brand-logo.brand-logo-mep{
    height:24px;
    max-width:90px;
  }

  .table-brand-logo.brand-logo-solargard{
    height:26px;
    max-width:90px;
  }

  .btnrow{
    gap:8px;
  }

  .btnrow .btn{
    flex:1 1 calc(50% - 4px);
  }

  .submit-wrap .btn{
    flex:1 1 100%;
  }

  .live-view-summary{
    font-size:0.74rem;
    text-align:right;
  }

  .stock-view-toolbar{
    justify-content:stretch;
  }

  .stock-view-switch{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .stock-view-switch-btn{
    padding-inline:10px;
  }

  .live-stock-visual-list{
    max-height:68vh;
    padding:7px;
  }

  .live-stock-visual-brand{
    min-height:48px;
    margin-inline:-7px;
  }

  .live-stock-visual-row{
    grid-template-columns:minmax(48px, 0.78fr) minmax(34px, 0.45fr) minmax(70px, 1fr) minmax(54px, auto);
    gap:7px;
    padding:8px 8px 8px 12px;
  }

  .live-stock-visual-code{
    font-size:0.72rem;
  }

  .live-stock-visual-width,
  .live-stock-visual-metres{
    font-size:0.68rem;
  }

  .stock-adjustment-modal-overlay{
    padding:8px;
    padding-bottom:calc(8px + env(safe-area-inset-bottom));
  }

  .stock-adjustment-modal-card{
    max-height:calc(100svh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  @supports (height:100dvh){
    .stock-adjustment-modal-card{
      max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }
  }

  .stock-adjustment-type-grid{
    grid-template-columns:1fr;
  }

  .stock-table{
    min-width:340px;
    font-size:0.78rem;
  }

  .stock-table thead th,
  .stock-table tbody td{
    padding:9px 6px;
  }

  .stock-brand-row td{
    padding:10px 8px 7px;
  }

  .stock-group-row td{
    padding:8px 8px 6px;
  }

  .film-knowledge-key-grid{
    grid-template-columns:1fr;
  }

  .film-knowledge-use-cases{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .film-knowledge-btnrow .btn{
    flex:1 1 100%;
  }

  .stock-film-overview{
    padding:9px 10px;
  }

  .stock-film-overview-title{
    font-size:0.74rem;
  }

  .stock-film-overview p,
  .stock-film-overview-missing{
    font-size:0.8rem;
  }

  .banner-hidden-mobile{
    display:none;
  }
}

@media (max-width: 420px){
  .auth-status-bar{
    align-items:center;
  }

  .auth-logout-btn{
    width:auto;
  }

  .film-knowledge-use-cases{
    grid-template-columns:1fr;
  }
}

.mode-switch-5{
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:2px;
}

.screen[hidden]{
  display:none !important;
}

@media (max-width: 560px){
  body.is-authenticated .theme-controls{
    display:none;
  }

  body{
    padding:calc(22px + env(safe-area-inset-top, 0px)) 10px calc(74px + env(safe-area-inset-bottom, 0px));
  }

  .mode-switch{
    display:none;
  }

  .mobile-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:30;
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(0, 1fr);
    align-items:stretch;
    gap:4px;
    padding:7px max(8px, env(safe-area-inset-right, 0px)) max(7px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
    border-radius:18px 18px 0 0;
    border:1px solid rgba(255,255,255,0.08);
    border-width:1px 0 0;
    background:rgba(2,6,23,0.94);
    box-shadow:0 -14px 30px rgba(0,0,0,0.34);
    backdrop-filter:blur(10px);
  }

  .mobile-nav-btn{
    min-height:54px;
    padding:6px 2px;
    border-radius:14px;
    gap:4px;
  }

  .mobile-nav-icon{
    width:20px;
    height:20px;
  }

  .mobile-nav-label{
    font-size:0.66rem;
  }
}

.theme-controls{
  position:absolute;
  top:0;
  right:0;
  display:flex;
  justify-content:flex-end;
  z-index:2;
}

.theme-toggle{
  appearance:none;
  border:1px solid rgba(255,255,255,0.10);
  background:linear-gradient(180deg, rgba(18,31,67,0.92) 0%, rgba(9,18,46,0.92) 100%);
  color:var(--text);
  border-radius:18px;
  padding:8px 12px;
  min-height:52px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  font:inherit;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,0.18);
  transition:transform 0.12s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.theme-toggle:hover{
  border-color:rgba(247,209,6,0.46);
  box-shadow:0 10px 22px rgba(0,0,0,0.2);
}

.theme-toggle:active{
  transform:translateY(1px);
}

.theme-toggle:focus-visible{
  outline:2px solid rgba(247,209,6,0.88);
  outline-offset:2px;
}

.theme-toggle-track{
  position:relative;
  width:46px;
  height:24px;
  flex:0 0 auto;
  border-radius:999px;
  background:rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.12);
}

.theme-toggle-thumb{
  position:absolute;
  top:2px;
  left:2px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:linear-gradient(180deg, #ffe45a 0%, var(--primary) 100%);
  box-shadow:0 4px 10px rgba(0,0,0,0.28);
  transition:transform 0.18s ease;
}

.theme-toggle.is-light .theme-toggle-thumb{
  transform:translateX(22px);
}

.theme-toggle-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
}

.theme-toggle-label{
  font-size:0.68rem;
  line-height:1;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:800;
}

.theme-toggle-value{
  margin-top:4px;
  font-size:0.9rem;
  line-height:1.1;
  font-weight:800;
  color:var(--text);
}

@media (max-width: 760px){
  header{
    padding-right:0;
  }

  .theme-controls{
    position:static;
    width:100%;
  }
}

@media (max-width: 560px){
  .theme-controls{
    justify-content:stretch;
  }

  .theme-toggle{
    width:100%;
    justify-content:space-between;
  }

  body.is-authenticated .theme-toggle-compact-wrap{
    display:flex;
  }

  .auth-status-actions{
    gap:10px;
  }

  .auth-logout-btn{
    margin-left:2px;
  }
}

@media (max-width: 560px){
  .settings-modal-overlay{
    padding:calc(14px + env(safe-area-inset-top, 0px)) 8px 8px;
    align-items:stretch;
  }

  .settings-modal-card{
    width:100%;
    max-height:calc(100svh - (22px + env(safe-area-inset-top, 0px)));
    border-radius:18px;
  }

  .settings-modal-head{
    padding:12px 12px 10px;
  }

  .settings-modal-body{
    padding:8px 8px calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .settings-row{
    grid-template-columns:1fr;
    align-items:flex-start;
  }

  .settings-row > .settings-segmented,
  .settings-row > .settings-switch,
  .settings-row > .settings-select-wrap{
    width:100%;
  }

  .settings-segmented{
    width:100%;
  }

  .settings-segment-btn{
    min-width:0;
    padding:0 8px;
  }

  .settings-switch{
    justify-content:space-between;
  }

  .settings-reset-btn{
    width:100%;
  }
}

:root[data-help-mode="hidden"] .helper:not([data-help-exempt="true"]),
:root[data-help-mode="hidden"] .workflow-copy,
:root[data-help-mode="hidden"] .auth-help{
  display:none !important;
}

:root[data-density="compact"] .card + .card{
  margin-top:8px;
}

:root[data-density="compact"] .body{
  padding:10px 12px 12px;
}

:root[data-density="compact"] .grid-main{
  gap:8px;
}

:root[data-density="compact"] .usage-grid-main{
  gap:10px;
}

:root[data-density="compact"] .card h2,
:root[data-density="compact"] .card-toggle-btn{
  padding:10px 12px 8px;
}

:root[data-density="compact"] .usage-step-card{
  margin-top:10px;
  padding:11px;
}

:root[data-density="compact"] .btnrow{
  margin-top:14px;
  padding-top:11px;
}

:root[data-density="compact"] .field + .field{
  margin-top:8px;
}

:root[data-density="compact"] .summary-box,
:root[data-density="compact"] .preview-box,
:root[data-density="compact"] .message,
:root[data-density="compact"] .line-card,
:root[data-density="compact"] .log-card,
:root[data-density="compact"] .empty-state{
  padding:10px 11px;
}

:root[data-density="compact"] .choice-btn{
  min-height:54px;
  padding:9px 9px;
}

:root[data-density="compact"] .btn{
  min-height:44px;
  padding:10px 12px;
}

:root[data-density="compact"] .input{
  min-height:44px;
  padding:10px 11px;
}

:root[data-density="compact"] textarea{
  min-height:72px;
  padding:10px 11px;
}

:root[data-density="compact"] .stock-table thead th,
:root[data-density="compact"] .stock-table tbody td{
  padding:8px 6px;
}

:root[data-density="compact"] .live-stock-visual-list{
  gap:5px;
  padding:6px;
}

:root[data-density="compact"] .live-stock-visual-row{
  padding-top:7px;
  padding-bottom:7px;
}

:root[data-density="compact"] .delivery-compact-row{
  padding:8px 10px;
}

:root[data-motion-mode="reduced"] *,
:root[data-motion-mode="reduced"] *::before,
:root[data-motion-mode="reduced"] *::after{
  transition-duration:0s !important;
  animation-duration:0s !important;
}

@media (prefers-reduced-motion: reduce){
  :root[data-motion-mode="system"] *,
  :root[data-motion-mode="system"] *::before,
  :root[data-motion-mode="system"] *::after{
    transition-duration:0s !important;
    animation-duration:0s !important;
  }
}

:root[data-theme="light"]{
  color-scheme:light;
  --primary:#b8860b;
  --primary-dark:#8f6800;
  --bg1:#f6efdf;
  --bg2:#e7edf7;
  --card:#fffdfa;
  --card-soft:rgba(255,253,248,0.96);
  --text:#142447;
  --muted:#5d6d86;
  --border:rgba(7,27,87,0.12);
  --shadow:0 14px 32px rgba(7,27,87,0.14);
  --btn-shadow:0 10px 24px rgba(7,27,87,0.12);
  --btn-shadow-strong:0 12px 28px rgba(247,209,6,0.24);
  --low-stock-bg:rgba(194,61,61,0.10);
  --low-stock-border:rgba(194,61,61,0.24);
  --low-stock-text:#8c1f1f;
}

html[data-theme="light"],
html[data-theme="light"] body{
  background:#e7edf7;
}

:root[data-theme="light"] body{
  background:radial-gradient(circle at top, #f7f1e3 0%, #eef3fb 48%, #e5ecf7 100%);
}

:root[data-theme="light"] .card,
:root[data-theme="light"] .auth-card,
:root[data-theme="light"] .modal-card{
  border-color:rgba(7,27,87,0.12);
  box-shadow:0 20px 44px rgba(7,27,87,0.12);
}

:root[data-theme="light"] .card{
  background:linear-gradient(180deg, rgba(255,253,248,0.98) 0%, rgba(244,247,252,0.98) 100%);
}

:root[data-theme="light"] .card h2,
:root[data-theme="light"] .auth-card-head,
:root[data-theme="light"] .stock-table thead th,
:root[data-theme="light"] .stock-group-row td,
:root[data-theme="light"] .modal-head{
  border-bottom-color:rgba(7,27,87,0.10);
}

:root[data-theme="light"] .brand-subtitle,
:root[data-theme="light"] .workflow-copy,
:root[data-theme="light"] .muted-note,
:root[data-theme="light"] .field label{
  color:#314869;
}

:root[data-theme="light"] .mode-switch{
  background:rgba(255,251,244,0.86);
  border-color:rgba(7,27,87,0.10);
  box-shadow:0 10px 20px rgba(7,27,87,0.08);
}

:root[data-theme="light"] .mode-btn{
  color:rgba(20,36,71,0.66);
}

:root[data-theme="light"] .mode-btn.active{
  color:#0a0f1f;
}

:root[data-theme="light"] .choice-btn,
:root[data-theme="light"] .status-line,
:root[data-theme="light"] .summary-box,
:root[data-theme="light"] .message,
:root[data-theme="light"] .empty-state,
:root[data-theme="light"] .log-card,
:root[data-theme="light"] .line-card,
:root[data-theme="light"] .preview-box,
:root[data-theme="light"] .table-wrap,
:root[data-theme="light"] .orders-frame-wrap,
:root[data-theme="light"] .queue-job-reference,
:root[data-theme="light"] .mini-pill{
  background:linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(246,248,252,0.92) 100%);
  border-color:rgba(7,27,87,0.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.7);
}

:root[data-theme="light"] .admin-dashboard-panel,
:root[data-theme="light"] .admin-dashboard-stat,
:root[data-theme="light"] .admin-dashboard-row,
:root[data-theme="light"] .admin-dashboard-low-stock-row,
:root[data-theme="light"] .admin-dashboard-stock-level-row,
:root[data-theme="light"] .admin-dashboard-attention-btn,
:root[data-theme="light"] .admin-dashboard-status-cell,
:root[data-theme="light"] .admin-dashboard-usage-chip,
:root[data-theme="light"] .admin-dashboard-empty{
  background:linear-gradient(180deg, rgba(255,255,255,0.80), rgba(247,250,254,0.62));
  border-color:rgba(7,27,87,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 8px 18px rgba(7,27,87,0.06);
}

:root[data-theme="light"] .admin-dashboard-card{
  --admin-muted-bright:rgba(28,49,82,0.76);
  border-color:rgba(7,27,87,0.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.82), rgba(246,249,253,0.72)),
    rgba(255,255,255,0.58);
  box-shadow:
    0 20px 44px rgba(7,27,87,0.12),
    inset 0 1px 0 rgba(255,255,255,0.86);
  backdrop-filter:blur(9px) saturate(118%);
  -webkit-backdrop-filter:blur(9px) saturate(118%);
}

:root[data-theme="light"] .admin-dashboard-card::before{
  background:
    radial-gradient(circle at 12% 0%, rgba(20,58,116,0.12) 0%, transparent 32%),
    radial-gradient(circle at 92% 8%, rgba(247,209,6,0.12) 0%, transparent 28%),
    linear-gradient(90deg, rgba(247,209,6,0.055), transparent 22%, transparent 82%, rgba(247,209,6,0.08));
}

:root[data-theme="light"] .admin-dashboard-card::after{
  border-color:rgba(7,27,87,0.05);
}

:root[data-theme="light"] .admin-dashboard-card > h2{
  background:linear-gradient(90deg, rgba(247,209,6,0.12) 0%, rgba(7,27,87,0.035) 100%);
  border-bottom-color:rgba(7,27,87,0.10);
}

:root[data-theme="light"] .admin-dashboard-heading-meta{
  border-color:rgba(184,134,11,0.30);
  background:rgba(247,209,6,0.16);
  color:#7a5800;
}

:root[data-theme="light"] .admin-dashboard-overview-strip{
  background:linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(246,248,252,0.88) 100%);
  border-color:rgba(7,27,87,0.10);
}

:root[data-theme="light"] .admin-dashboard-overview-strip::before{
  background:linear-gradient(180deg, rgba(247,209,6,0.98), rgba(184,134,11,0.68));
}

:root[data-theme="light"] .admin-dashboard-overview-meta .helper,
:root[data-theme="light"] .admin-dashboard-attention-severity{
  color:rgba(20,36,71,0.88);
}

:root[data-theme="light"] .admin-dashboard-panel-kicker{
  color:rgba(96,70,0,0.82);
}

:root[data-theme="light"] .admin-dashboard-subsection-head > span{
  background:rgba(247,209,6,0.18);
  border-color:rgba(179,117,0,0.28);
  color:#755500;
}

:root[data-theme="light"] .admin-dashboard-note{
  background:rgba(247,209,6,0.12);
  border-color:rgba(179,117,0,0.20);
  color:rgba(28,49,82,0.78);
}

:root[data-theme="light"] .admin-dashboard-card :where(button, [href], input, select, textarea, [tabindex]):focus-visible{
  outline:2px solid rgba(20,58,116,0.94);
  outline-offset:3px;
  box-shadow:0 0 0 4px rgba(20,58,116,0.20);
}

:root[data-theme="light"] .admin-dashboard-range{
  background:rgba(255,255,255,0.58);
  border-color:rgba(7,27,87,0.10);
  box-shadow:
    inset 0 1px 2px rgba(7,27,87,0.08),
    inset 0 1px 0 rgba(255,255,255,0.85);
}

:root[data-theme="light"] .admin-dashboard-range-btn{
  background:transparent;
  border-color:transparent;
  color:#203559;
}

:root[data-theme="light"] .admin-dashboard-range-btn:hover:not(:disabled){
  background:rgba(255,247,217,0.88);
  border-color:rgba(184,134,11,0.34);
}

:root[data-theme="light"] .admin-dashboard-range-btn.active{
  background:var(--primary);
  border-color:rgba(184,134,11,0.58);
  color:#0a0f1f;
  box-shadow:0 8px 16px rgba(7,27,87,0.09), inset 0 1px 0 rgba(255,255,255,0.7);
}

:root[data-theme="light"] .btn.admin-dashboard-refresh-btn{
  background:linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,247,217,0.92) 100%);
  border-color:rgba(184,134,11,0.30);
  color:#6b4e00;
  box-shadow:0 10px 20px rgba(7,27,87,0.10), inset 0 1px 0 rgba(255,255,255,0.75);
}

:root[data-theme="light"] .btn.admin-dashboard-refresh-btn:hover:not(:disabled){
  background:linear-gradient(180deg, rgba(255,245,210,0.98) 0%, rgba(247,209,6,0.24) 100%);
  border-color:rgba(184,134,11,0.42);
  color:#5c4300;
}

:root[data-theme="light"] .admin-dashboard-stat-high,
:root[data-theme="light"] .admin-dashboard-row.is-high,
:root[data-theme="light"] .admin-dashboard-attention-btn.is-high{
  border-color:rgba(194,61,61,0.34);
  background:linear-gradient(180deg, rgba(194,61,61,0.10) 0%, rgba(255,255,255,0.90) 100%);
}

:root[data-theme="light"] .admin-dashboard-stat-warning,
:root[data-theme="light"] .admin-dashboard-row.is-warning,
:root[data-theme="light"] .admin-dashboard-attention-btn.is-warning{
  border-color:rgba(179,117,0,0.32);
  background:linear-gradient(180deg, rgba(247,209,6,0.16) 0%, rgba(255,255,255,0.90) 100%);
}

:root[data-theme="light"] .admin-dashboard-status-cell.is-high{
  border-color:rgba(194,61,61,0.34);
}

:root[data-theme="light"] .admin-dashboard-status-cell.is-warning{
  border-color:rgba(179,117,0,0.32);
}

:root[data-theme="light"] .admin-dashboard-attention-count{
  background:rgba(184,134,11,0.13);
  border-color:rgba(184,134,11,0.24);
  color:#8f6800;
}

:root[data-theme="light"] .admin-dashboard-row-metric{
  background:rgba(7,27,87,0.045);
  border-color:rgba(7,27,87,0.10);
  color:#142447;
}

:root[data-theme="light"] .admin-dashboard-attention-btn.is-high .admin-dashboard-attention-count,
:root[data-theme="light"] .admin-dashboard-row.is-high .admin-dashboard-row-metric{
  background:rgba(194,61,61,0.10);
  border-color:rgba(194,61,61,0.24);
  color:#8c1f1f;
}

:root[data-theme="light"] .admin-dashboard-row.is-warning .admin-dashboard-row-metric{
  background:rgba(247,209,6,0.16);
  border-color:rgba(179,117,0,0.22);
  color:#8a5b00;
}

:root[data-theme="light"] .admin-dashboard-feed-badge{
  background:rgba(247,209,6,0.14);
  border-color:rgba(184,134,11,0.22);
  color:#755500;
}

:root[data-theme="light"] .admin-dashboard-row p{
  color:rgba(28,49,82,0.72);
}

:root[data-theme="light"] .admin-dashboard-low-stock-cell em,
:root[data-theme="light"] .admin-dashboard-stock-level-width{
  color:rgba(28,49,82,0.72);
}

:root[data-theme="light"] .admin-dashboard-empty{
  color:rgba(20,36,71,0.66);
}

:root[data-theme="light"] .admin-dashboard-trend-bar-wrap{
  background:rgba(7,27,87,0.10);
}

:root[data-theme="light"] .admin-dashboard-trend-bar{
  background:linear-gradient(90deg, rgba(247,209,6,0.42) 0%, rgba(184,134,11,0.82) 100%);
}

:root[data-theme="light"] .admin-dashboard-stock-level-bar-wrap{
  background:rgba(7,27,87,0.10);
}

:root[data-theme="light"] .admin-dashboard-stock-level-bar{
  background:linear-gradient(90deg, rgba(247,209,6,0.40) 0%, rgba(184,134,11,0.86) 100%);
}

:root[data-theme="light"] .admin-dashboard-comparison-bar{
  background:rgba(7,27,87,0.09);
}

:root[data-theme="light"] .admin-dashboard-comparison-bar > span{
  background:linear-gradient(90deg, rgba(247,209,6,0.38), rgba(184,134,11,0.78));
}

:root[data-theme="light"] .choice-btn:hover{
  background:linear-gradient(180deg, rgba(255,247,217,0.95) 0%, rgba(248,250,255,0.95) 100%);
  border-color:rgba(7,27,87,0.18);
}

:root[data-theme="light"] .choice-btn.choice-btn-logo{
  background:linear-gradient(180deg, rgba(20,33,68,0.98) 0%, rgba(14,24,51,0.98) 100%);
  border-color:rgba(7,27,87,0.18);
  box-shadow:0 10px 22px rgba(7,27,87,0.16);
}

:root[data-theme="light"] .choice-btn.choice-btn-logo:hover{
  background:linear-gradient(180deg, rgba(28,45,90,0.98) 0%, rgba(18,31,63,0.98) 100%);
  border-color:rgba(184,134,11,0.36);
}

:root[data-theme="light"] .choice-btn.choice-btn-logo.selected{
  background:linear-gradient(180deg, rgba(22,36,73,0.99) 0%, rgba(15,26,56,0.99) 100%);
  border-color:rgba(184,134,11,0.82);
  box-shadow:0 0 0 1px rgba(184,134,11,0.18), 0 12px 24px rgba(7,27,87,0.18);
  color:#f5f7fb;
}

:root[data-theme="light"] .choice-btn.choice-btn-logo.selected small{
  color:rgba(245,247,251,0.72);
}

:root[data-theme="light"] .choice-btn.disabled{
  background:rgba(226,232,242,0.72);
  color:rgba(20,36,71,0.42);
  border-color:rgba(7,27,87,0.08);
}

:root[data-theme="light"] .choice-btn.disabled small{
  color:rgba(20,36,71,0.36);
}

:root[data-theme="light"] .usage-intro{
  border-bottom-color:rgba(7,27,87,0.10);
}

:root[data-theme="light"] .usage-step-card{
  background:rgba(255,255,255,0.58);
  border-color:rgba(7,27,87,0.10);
}

:root[data-theme="light"] .usage-step-card.is-current{
  background:rgba(247,209,6,0.12);
  border-color:rgba(247,209,6,0.44);
}

:root[data-theme="light"] .usage-step-card.is-complete{
  border-color:rgba(66,245,108,0.24);
}

:root[data-theme="light"] .input,
:root[data-theme="light"] textarea,
:root[data-theme="light"] .live-stock-search-input{
  background:#ffffff;
  color:#142447;
  border-color:rgba(7,27,87,0.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.72);
}

:root[data-theme="light"] .input::placeholder,
:root[data-theme="light"] textarea::placeholder,
:root[data-theme="light"] .live-stock-search-input::placeholder{
  color:rgba(49,72,105,0.56);
}

:root[data-theme="light"] .input:focus,
:root[data-theme="light"] textarea:focus,
:root[data-theme="light"] .live-stock-search-input:focus{
  border-color:rgba(247,209,6,0.84);
  box-shadow:0 0 0 3px rgba(247,209,6,0.18);
}

:root[data-theme="light"] .auth-status-bar{
  background:linear-gradient(180deg, rgba(255,251,244,0.94) 0%, rgba(244,247,252,0.94) 100%);
  border-color:rgba(7,27,87,0.12);
  box-shadow:0 12px 24px rgba(7,27,87,0.10);
}

:root[data-theme="light"] .theme-toggle{
  background:linear-gradient(180deg, rgba(255,251,244,0.96) 0%, rgba(243,247,252,0.96) 100%);
  border-color:rgba(7,27,87,0.12);
  color:#142447;
  box-shadow:0 10px 22px rgba(7,27,87,0.10);
}

:root[data-theme="light"] .theme-toggle-track{
  background:rgba(7,27,87,0.08);
  border-color:rgba(7,27,87,0.10);
}

:root[data-theme="light"] .theme-toggle-compact{
  background:linear-gradient(180deg, rgba(255,251,244,0.98) 0%, rgba(243,247,252,0.98) 100%);
  border-color:rgba(7,27,87,0.14);
  color:rgba(20,36,71,0.6);
  box-shadow:0 10px 20px rgba(7,27,87,0.10);
}

:root[data-theme="light"] .theme-toggle-compact-track{
  background:rgba(7,27,87,0.08);
  border-color:rgba(7,27,87,0.10);
}

:root[data-theme="light"] .theme-toggle-compact-icon{
  color:rgba(20,36,71,0.42);
}

:root[data-theme="light"] .btn-secondary{
  background:linear-gradient(180deg, rgba(20,39,84,0.96) 0%, rgba(10,24,58,0.96) 100%);
  color:#f5f7fb;
  border-color:rgba(7,27,87,0.18);
  box-shadow:0 10px 20px rgba(7,27,87,0.16);
}

:root[data-theme="light"] .btn-secondary:hover{
  background:linear-gradient(180deg, rgba(26,49,101,0.98) 0%, rgba(14,31,73,0.98) 100%);
  border-color:rgba(7,27,87,0.28);
}

:root[data-theme="light"] .message.error{
  background:rgba(194,61,61,0.10);
  border-color:rgba(194,61,61,0.24);
  color:#8c1f1f;
}

:root[data-theme="light"] .message.success{
  background:rgba(30,140,77,0.10);
  border-color:rgba(30,140,77,0.22);
  color:#0e6b37;
}

:root[data-theme="light"] .message.warning{
  background:rgba(179,117,0,0.12);
  border-color:rgba(179,117,0,0.24);
  color:#8a5b00;
}

:root[data-theme="light"] .delivery-unmatched-note.is-success{
  background:rgba(30,140,77,0.10);
  border-color:rgba(30,140,77,0.22);
  color:#0e6b37;
}

:root[data-theme="light"] .delivery-unmatched-note.is-warning{
  background:rgba(194,61,61,0.10);
  border-color:rgba(194,61,61,0.24);
  color:#8c1f1f;
}

:root[data-theme="light"] .usage-job-lookup.is-loading{
  background:rgba(45,116,217,0.10);
  border-color:rgba(45,116,217,0.24);
  color:#1d57a7;
}

:root[data-theme="light"] .usage-job-lookup.is-success{
  background:rgba(30,140,77,0.10);
  border-color:rgba(30,140,77,0.22);
  color:#0e6b37;
}

:root[data-theme="light"] .usage-job-lookup.is-warning{
  background:rgba(179,117,0,0.12);
  border-color:rgba(179,117,0,0.24);
  color:#8a5b00;
}

:root[data-theme="light"] .low-stock,
:root[data-theme="light"] .stock-warning,
:root[data-theme="light"] .warning-text{
  color:#8c1f1f;
}

:root[data-theme="light"] .auth-overlay{
  background:radial-gradient(circle at top, rgba(246,239,223,0.94), rgba(231,237,247,0.98));
}

:root[data-theme="light"] .auth-card{
  background:linear-gradient(180deg, rgba(255,253,248,0.99) 0%, rgba(242,246,252,0.99) 100%);
}

:root[data-theme="light"] .auth-card-head p{
  color:#314869;
}

:root[data-theme="light"] .divider{
  background:linear-gradient(90deg, transparent 0%, rgba(7,27,87,0.14) 18%, rgba(7,27,87,0.14) 82%, transparent 100%);
}

:root[data-theme="light"] .orders-frame-wrap,
:root[data-theme="light"] .table-wrap{
  background:rgba(255,255,255,0.82);
}

:root[data-theme="light"] .stock-table thead th{
  background:linear-gradient(180deg, rgba(16,34,76,0.98) 0%, rgba(10,23,58,0.98) 100%);
}

:root[data-theme="light"] .stock-table tbody tr:nth-child(even){
  background:rgba(7,27,87,0.03);
}

:root[data-theme="light"] .stock-table tbody tr:hover{
  background:rgba(247,209,6,0.10);
}

:root[data-theme="light"] .stock-group-row td{
  background:rgba(7,27,87,0.05);
}

:root[data-theme="light"] .modal-overlay{
  background:rgba(20,36,71,0.24);
}

:root[data-theme="light"] .modal-card{
  background:linear-gradient(180deg, rgba(255,253,248,0.99) 0%, rgba(243,246,252,0.99) 100%);
}

:root[data-theme="light"] .icon-btn{
  border-color:rgba(7,27,87,0.12);
  background:rgba(255,255,255,0.62);
  color:#b8860b;
}

:root[data-theme="light"] .icon-btn:hover{
  border-color:rgba(184,134,11,0.42);
  background:rgba(247,209,6,0.16);
}

:root[data-theme="light"] .settings-modal-card{
  background:linear-gradient(180deg, rgba(255,253,248,0.99) 0%, rgba(243,246,252,0.99) 100%);
  border-color:rgba(7,27,87,0.12);
  box-shadow:0 22px 48px rgba(7,27,87,0.16);
}

:root[data-theme="light"] .settings-modal-head{
  background:rgba(255,253,248,0.96);
  border-bottom-color:rgba(7,27,87,0.10);
}

:root[data-theme="light"] .settings-modal-account{
  color:#314869;
}

:root[data-theme="light"] .settings-group{
  background:rgba(255,255,255,0.62);
  border-color:rgba(7,27,87,0.10);
}

:root[data-theme="light"] .settings-row[data-toggle-target]:hover{
  background:rgba(7,27,87,0.04);
}

:root[data-theme="light"] .settings-group-title,
:root[data-theme="light"] .settings-row + .settings-row{
  border-color:rgba(7,27,87,0.08);
}

:root[data-theme="light"] .settings-label{
  color:#142447;
}

:root[data-theme="light"] .settings-help{
  color:#51647f;
}

:root[data-theme="light"] .settings-segmented{
  background:rgba(7,27,87,0.06);
  border-color:rgba(7,27,87,0.10);
}

:root[data-theme="light"] .settings-segment-btn{
  color:rgba(20,36,71,0.64);
}

:root[data-theme="light"] .settings-segment-btn.active{
  color:#142447;
}

:root[data-theme="light"] .settings-switch-track{
  border-color:rgba(7,27,87,0.14);
  background:rgba(7,27,87,0.08);
}

:root[data-theme="light"] .settings-switch-thumb{
  background:#ffffff;
  box-shadow:0 4px 10px rgba(7,27,87,0.24);
}

:root[data-theme="light"] .settings-switch input:checked + .settings-switch-track .settings-switch-thumb{
  background:#142447;
}

:root[data-theme="light"] .modal-head{
  background:rgba(194,61,61,0.12);
}

:root[data-theme="light"] .modal-title{
  color:#8c1f1f;
}

:root[data-theme="light"] .mobile-nav{
  border-color:rgba(7,27,87,0.12);
  background:rgba(255,251,244,0.96);
  box-shadow:0 16px 34px rgba(7,27,87,0.14);
}

:root[data-theme="light"] .mobile-nav-btn{
  color:rgba(20,36,71,0.62);
}

:root[data-theme="light"] .mobile-nav-btn.active{
  background:rgba(247,209,6,0.18);
  color:#142447;
}

:root[data-theme="simple"]{
  color-scheme:dark;
}

:root[data-theme="cyberpunk"]{
  color-scheme:dark;
  --app-background:
    radial-gradient(circle at 12% -12%, rgba(0,126,255,0.30) 0%, transparent 34%),
    radial-gradient(circle at 95% 8%, rgba(247,209,6,0.11) 0%, transparent 24%),
    radial-gradient(circle at 1px 1px, rgba(118,233,255,0.15) 1px, transparent 1.5px),
    linear-gradient(180deg, #061833 0%, #041126 48%, #020715 100%);
  --app-background-size:auto, auto, 22px 22px, auto;
  --app-bg:#020715;
  --app-bg-elevated:#061833;
  --app-bg-glow:rgba(0,176,255,0.30);
  --panel-bg:
    linear-gradient(135deg, rgba(118,233,255,0.10) 0, rgba(118,233,255,0.10) 1px, transparent 1px, transparent 16px),
    radial-gradient(circle at 0% 0%, rgba(0,163,255,0.16) 0%, transparent 34%),
    linear-gradient(180deg, rgba(7,25,58,0.96) 0%, rgba(3,13,33,0.98) 100%);
  --panel-secondary-bg:linear-gradient(180deg, rgba(9,31,67,0.82) 0%, rgba(4,17,43,0.88) 100%);
  --panel-header-bg:linear-gradient(90deg, rgba(0,176,255,0.16) 0%, rgba(7,25,58,0.84) 58%, rgba(3,13,33,0.64) 100%);
  --panel-texture:radial-gradient(circle at 1px 1px, rgba(118,233,255,0.13) 1px, transparent 1.5px);
  --text-primary:#f4fbff;
  --text-secondary:#9fb8d4;
  --border-primary:rgba(102,214,255,0.27);
  --border-secondary:rgba(118,233,255,0.16);
  --accent-blue:#2f8cff;
  --accent-cyan:#76e9ff;
  --highlight-yellow:#ffd60a;
  --success-green:#52ff8f;
  --danger-red:#ff4667;
  --warning-amber:#ffb547;
  --glow-strength:0.28;
  --shadow-depth:
    0 20px 42px rgba(0,0,0,0.48),
    0 0 26px rgba(0,176,255,0.10);
  --corner-radius:8px;
  --panel-bevel-depth:
    inset 0 1px 0 rgba(244,251,255,0.10),
    inset 0 0 0 1px rgba(118,233,255,0.08);
  --nav-bg:linear-gradient(180deg, rgba(4,17,43,0.96), rgba(2,10,28,0.96));
  --nav-active-bg:linear-gradient(180deg, rgba(118,233,255,0.22), rgba(47,140,255,0.20));
  --nav-active-text:#f4fbff;
  --input-bg:linear-gradient(180deg, rgba(13,43,87,0.94) 0%, rgba(8,31,70,0.96) 100%);
  --input-border:rgba(118,233,255,0.34);
  --input-focus-border:rgba(118,233,255,0.88);
  --focus-ring:
    0 0 0 2px rgba(118,233,255,0.22),
    0 0 16px rgba(0,176,255,0.18);
  --button-secondary-bg:linear-gradient(180deg, rgba(10,35,74,0.94) 0%, rgba(5,19,47,0.98) 100%);
  --button-secondary-bg-hover:linear-gradient(180deg, rgba(15,51,101,0.98) 0%, rgba(7,25,58,0.98) 100%);
  --button-secondary-border:rgba(118,233,255,0.22);
  --button-primary-bg:linear-gradient(180deg, #fff07a 0%, #ffd60a 52%, #d9a900 100%);
  --button-primary-text:#06111d;
  --button-primary-border:rgba(255,214,10,0.92);
  --selected-bg:linear-gradient(180deg, rgba(118,233,255,0.28) 0%, rgba(47,140,255,0.22) 100%);
  --selected-text:#f4fbff;
  --selected-border:rgba(118,233,255,0.78);
  --selected-shadow:
    0 0 0 1px rgba(118,233,255,0.18),
    0 0 22px rgba(0,176,255,0.22),
    inset 0 0 18px rgba(118,233,255,0.10);
  --status-live-shadow:
    0 0 0 4px rgba(82,255,143,0.14),
    0 0 16px rgba(82,255,143,0.24);

  --primary:var(--accent-cyan);
  --primary-dark:#2f8cff;
  --secondary:#0b2448;
  --bg1:#061833;
  --bg2:var(--app-bg);
  --card:#07193a;
  --card-soft:rgba(7,25,58,0.94);
  --text:var(--text-primary);
  --muted:var(--text-secondary);
  --border:var(--border-primary);
  --danger:var(--danger-red);
  --ok:var(--success-green);
  --radius:var(--corner-radius);
  --shadow:var(--shadow-depth);
  --btn-radius:var(--corner-radius);
  --btn-shadow:0 14px 26px rgba(0,0,0,0.30);
  --btn-shadow-strong:
    0 12px 28px rgba(255,214,10,0.20),
    0 0 18px rgba(255,214,10,0.16);
  --low-stock-bg:rgba(255,70,103,0.12);
  --low-stock-border:rgba(255,70,103,0.28);
  --low-stock-text:#ffd4dc;
}

:root[data-theme="simple"] body,
:root[data-theme="cyberpunk"] body{
  background-image:var(--app-background);
  background-size:var(--app-background-size, auto);
  background-attachment:fixed;
  color:var(--text-primary);
}

:root[data-theme="simple"] .brand-subtitle,
:root[data-theme="simple"] .workflow-copy,
:root[data-theme="simple"] .field label,
:root[data-theme="cyberpunk"] .brand-subtitle,
:root[data-theme="cyberpunk"] .workflow-copy,
:root[data-theme="cyberpunk"] .field label{
  color:var(--text-secondary);
}

:root[data-theme="simple"] .mode-switch,
:root[data-theme="cyberpunk"] .mode-switch,
:root[data-theme="simple"] .settings-segmented,
:root[data-theme="cyberpunk"] .settings-segmented,
:root[data-theme="simple"] .admin-dashboard-range,
:root[data-theme="cyberpunk"] .admin-dashboard-range{
  background:var(--nav-bg);
  border-color:var(--border-secondary);
  border-radius:var(--corner-radius);
  box-shadow:var(--panel-bevel-depth);
}

:root[data-theme="simple"] .mode-btn,
:root[data-theme="cyberpunk"] .mode-btn,
:root[data-theme="simple"] .settings-segment-btn,
:root[data-theme="cyberpunk"] .settings-segment-btn,
:root[data-theme="simple"] .admin-dashboard-range-btn,
:root[data-theme="cyberpunk"] .admin-dashboard-range-btn{
  border-radius:calc(var(--corner-radius) - 1px);
}

:root[data-theme="simple"] .mode-btn.active,
:root[data-theme="cyberpunk"] .mode-btn.active,
:root[data-theme="simple"] .settings-segment-btn.active,
:root[data-theme="cyberpunk"] .settings-segment-btn.active,
:root[data-theme="simple"] .admin-dashboard-range-btn.active,
:root[data-theme="cyberpunk"] .admin-dashboard-range-btn.active{
  background:var(--nav-active-bg);
  color:var(--nav-active-text);
  border-color:var(--selected-border);
  box-shadow:var(--selected-shadow);
}

:root[data-theme="simple"] .card,
:root[data-theme="simple"] .auth-card,
:root[data-theme="simple"] .modal-card,
:root[data-theme="simple"] .settings-modal-card,
:root[data-theme="simple"] .admin-dashboard-card,
:root[data-theme="cyberpunk"] .card,
:root[data-theme="cyberpunk"] .auth-card,
:root[data-theme="cyberpunk"] .modal-card,
:root[data-theme="cyberpunk"] .settings-modal-card,
:root[data-theme="cyberpunk"] .admin-dashboard-card{
  position:relative;
  background:var(--panel-bg);
  border-color:var(--border-primary);
  border-radius:var(--corner-radius);
  box-shadow:var(--shadow-depth);
}

:root[data-theme="cyberpunk"] .card::before,
:root[data-theme="cyberpunk"] .auth-card::before,
:root[data-theme="cyberpunk"] .modal-card::before,
:root[data-theme="cyberpunk"] .settings-modal-card::before{
  content:'';
  position:absolute;
  inset:6px;
  border:1px solid var(--border-secondary);
  border-radius:calc(var(--corner-radius) - 2px);
  pointer-events:none;
  box-shadow:inset 0 0 18px rgba(118,233,255,0.07);
  z-index:0;
}

:root[data-theme="cyberpunk"] .card > *,
:root[data-theme="cyberpunk"] .auth-card > *,
:root[data-theme="cyberpunk"] .modal-card > *,
:root[data-theme="cyberpunk"] .settings-modal-card > *{
  position:relative;
  z-index:1;
}

:root[data-theme="simple"] .card h2,
:root[data-theme="simple"] .card-toggle-btn,
:root[data-theme="simple"] .auth-card-head,
:root[data-theme="simple"] .modal-head,
:root[data-theme="simple"] .settings-modal-head,
:root[data-theme="simple"] .settings-group-title,
:root[data-theme="cyberpunk"] .card h2,
:root[data-theme="cyberpunk"] .card-toggle-btn,
:root[data-theme="cyberpunk"] .auth-card-head,
:root[data-theme="cyberpunk"] .modal-head,
:root[data-theme="cyberpunk"] .settings-modal-head,
:root[data-theme="cyberpunk"] .settings-group-title{
  background:var(--panel-header-bg);
  border-color:var(--border-secondary);
}

:root[data-theme="simple"] .settings-group,
:root[data-theme="simple"] .usage-step-card,
:root[data-theme="simple"] .status-line,
:root[data-theme="simple"] .summary-box,
:root[data-theme="simple"] .preview-box,
:root[data-theme="simple"] .message,
:root[data-theme="simple"] .empty-state,
:root[data-theme="simple"] .line-card,
:root[data-theme="simple"] .log-card,
:root[data-theme="simple"] .mini-pill,
:root[data-theme="simple"] .queue-job-reference,
:root[data-theme="simple"] .table-wrap,
:root[data-theme="simple"] .orders-frame-wrap,
:root[data-theme="simple"] .delivery-card,
:root[data-theme="simple"] .user-card,
:root[data-theme="simple"] .admin-dashboard-panel,
:root[data-theme="simple"] .admin-dashboard-stat,
:root[data-theme="simple"] .admin-dashboard-row,
:root[data-theme="simple"] .admin-dashboard-low-stock-row,
:root[data-theme="simple"] .admin-dashboard-stock-level-row,
:root[data-theme="simple"] .admin-dashboard-attention-btn,
:root[data-theme="simple"] .admin-dashboard-status-cell,
:root[data-theme="simple"] .admin-dashboard-usage-chip,
:root[data-theme="simple"] .admin-dashboard-empty,
:root[data-theme="cyberpunk"] .settings-group,
:root[data-theme="cyberpunk"] .usage-step-card,
:root[data-theme="cyberpunk"] .status-line,
:root[data-theme="cyberpunk"] .summary-box,
:root[data-theme="cyberpunk"] .preview-box,
:root[data-theme="cyberpunk"] .message,
:root[data-theme="cyberpunk"] .empty-state,
:root[data-theme="cyberpunk"] .line-card,
:root[data-theme="cyberpunk"] .log-card,
:root[data-theme="cyberpunk"] .mini-pill,
:root[data-theme="cyberpunk"] .queue-job-reference,
:root[data-theme="cyberpunk"] .table-wrap,
:root[data-theme="cyberpunk"] .orders-frame-wrap,
:root[data-theme="cyberpunk"] .delivery-card,
:root[data-theme="cyberpunk"] .user-card,
:root[data-theme="cyberpunk"] .admin-dashboard-panel,
:root[data-theme="cyberpunk"] .admin-dashboard-stat,
:root[data-theme="cyberpunk"] .admin-dashboard-row,
:root[data-theme="cyberpunk"] .admin-dashboard-low-stock-row,
:root[data-theme="cyberpunk"] .admin-dashboard-stock-level-row,
:root[data-theme="cyberpunk"] .admin-dashboard-attention-btn,
:root[data-theme="cyberpunk"] .admin-dashboard-status-cell,
:root[data-theme="cyberpunk"] .admin-dashboard-usage-chip,
:root[data-theme="cyberpunk"] .admin-dashboard-empty{
  background:var(--panel-secondary-bg);
  border-color:var(--border-primary);
  border-radius:var(--corner-radius);
  box-shadow:var(--panel-bevel-depth);
}

:root[data-theme="cyberpunk"] .summary-box,
:root[data-theme="cyberpunk"] .preview-box,
:root[data-theme="cyberpunk"] .admin-dashboard-panel{
  background-image:var(--panel-texture), var(--panel-secondary-bg);
  background-size:18px 18px, auto;
}

:root[data-theme="simple"] .input,
:root[data-theme="simple"] textarea,
:root[data-theme="cyberpunk"] .input,
:root[data-theme="cyberpunk"] textarea{
  background:var(--input-bg);
  border-color:var(--input-border);
  color:var(--text-primary);
  border-radius:var(--corner-radius);
  box-shadow:var(--panel-bevel-depth);
}

:root[data-theme="simple"] .input:focus,
:root[data-theme="simple"] textarea:focus,
:root[data-theme="cyberpunk"] .input:focus,
:root[data-theme="cyberpunk"] textarea:focus{
  border-color:var(--input-focus-border);
  box-shadow:var(--focus-ring);
}

:root[data-theme="simple"] .choice-btn,
:root[data-theme="simple"] .icon-btn,
:root[data-theme="cyberpunk"] .choice-btn,
:root[data-theme="cyberpunk"] .icon-btn{
  background:var(--panel-secondary-bg);
  border-color:var(--button-secondary-border);
  border-radius:var(--corner-radius);
  box-shadow:var(--panel-bevel-depth);
}

:root[data-theme="simple"] .choice-btn:hover,
:root[data-theme="cyberpunk"] .choice-btn:hover,
:root[data-theme="simple"] .icon-btn:hover,
:root[data-theme="cyberpunk"] .icon-btn:hover{
  border-color:var(--selected-border);
  box-shadow:var(--selected-shadow);
}

:root[data-theme="simple"] .choice-btn.selected,
:root[data-theme="cyberpunk"] .choice-btn.selected,
:root[data-theme="simple"] .user-card.is-selected,
:root[data-theme="cyberpunk"] .user-card.is-selected,
:root[data-theme="simple"] .delivery-compact-row.is-selected,
:root[data-theme="cyberpunk"] .delivery-compact-row.is-selected{
  background:var(--selected-bg);
  border-color:var(--selected-border);
  color:var(--selected-text);
  box-shadow:var(--selected-shadow);
}

:root[data-theme="simple"] .choice-btn.selected small{
  color:rgba(10,15,31,0.72);
}

:root[data-theme="cyberpunk"] .choice-btn.selected small{
  color:rgba(244,251,255,0.76);
}

:root[data-theme="simple"] .btn,
:root[data-theme="cyberpunk"] .btn{
  border-radius:var(--corner-radius);
}

:root[data-theme="simple"] .btn-primary,
:root[data-theme="cyberpunk"] .btn-primary{
  background:var(--button-primary-bg);
  border-color:var(--button-primary-border);
  color:var(--button-primary-text);
  box-shadow:var(--btn-shadow-strong);
}

:root[data-theme="simple"] .btn-secondary,
:root[data-theme="cyberpunk"] .btn-secondary{
  background:var(--button-secondary-bg);
  border-color:var(--button-secondary-border);
  color:var(--text-primary);
  box-shadow:var(--btn-shadow);
}

:root[data-theme="simple"] .btn-secondary:hover,
:root[data-theme="cyberpunk"] .btn-secondary:hover{
  background:var(--button-secondary-bg-hover);
  border-color:var(--selected-border);
}

:root[data-theme="simple"] :where(button, [href], input, select, textarea, [tabindex]):focus-visible,
:root[data-theme="cyberpunk"] :where(button, [href], input, select, textarea, [tabindex]):focus-visible{
  outline:2px solid var(--input-focus-border);
  outline-offset:2px;
  box-shadow:var(--focus-ring);
}

:root[data-theme="simple"] .auth-status-bar,
:root[data-theme="cyberpunk"] .auth-status-bar{
  background:var(--panel-secondary-bg);
  border-color:var(--border-primary);
  border-radius:var(--corner-radius);
}

:root[data-theme="simple"] .auth-status-indicator,
:root[data-theme="simple"] .status-dot,
:root[data-theme="cyberpunk"] .auth-status-indicator,
:root[data-theme="cyberpunk"] .status-dot{
  background:var(--success-green);
  box-shadow:var(--status-live-shadow);
}

:root[data-theme="simple"] .stock-table thead th,
:root[data-theme="cyberpunk"] .stock-table thead th{
  background:var(--panel-header-bg);
  border-bottom-color:var(--border-secondary);
}

:root[data-theme="simple"] .stock-view-switch,
:root[data-theme="cyberpunk"] .stock-view-switch{
  border-color:var(--border-secondary);
}

:root[data-theme="simple"] .live-stock-visual-list,
:root[data-theme="cyberpunk"] .live-stock-visual-list{
  border-color:var(--border-secondary);
}

:root[data-theme="simple"] .live-stock-visual-row,
:root[data-theme="cyberpunk"] .live-stock-visual-row{
  background:var(--button-secondary-bg);
  border-color:var(--border-secondary);
}

:root[data-theme="simple"] .stock-table tbody tr:nth-child(even),
:root[data-theme="cyberpunk"] .stock-table tbody tr:nth-child(even){
  background:rgba(255,255,255,0.025);
}

:root[data-theme="cyberpunk"] .stock-table tbody tr:hover{
  background:rgba(118,233,255,0.08);
}

:root[data-theme="simple"] .settings-row + .settings-row,
:root[data-theme="cyberpunk"] .settings-row + .settings-row{
  border-color:var(--border-secondary);
}

:root[data-theme="simple"] .settings-switch-track,
:root[data-theme="cyberpunk"] .settings-switch-track{
  background:var(--input-bg);
  border-color:var(--input-border);
}

:root[data-theme="simple"] .settings-switch input:checked + .settings-switch-track,
:root[data-theme="cyberpunk"] .settings-switch input:checked + .settings-switch-track{
  background:var(--selected-bg);
  border-color:var(--selected-border);
  box-shadow:var(--selected-shadow);
}

:root[data-theme="simple"] .mobile-nav,
:root[data-theme="cyberpunk"] .mobile-nav{
  background:var(--nav-bg);
  border-color:var(--border-primary);
  border-radius:var(--corner-radius);
  box-shadow:var(--shadow-depth);
}

@media (max-width: 560px){
  :root[data-theme="simple"] .mobile-nav,
  :root[data-theme="cyberpunk"] .mobile-nav{
    border-radius:18px 18px 0 0;
    box-shadow:0 -14px 30px rgba(0,0,0,0.34);
  }
}

:root[data-theme="simple"] .mobile-nav-btn,
:root[data-theme="cyberpunk"] .mobile-nav-btn{
  border-radius:calc(var(--corner-radius) - 1px);
}

:root[data-theme="simple"] .mobile-nav-btn.active,
:root[data-theme="cyberpunk"] .mobile-nav-btn.active{
  background:var(--nav-active-bg);
  color:var(--nav-active-text);
  box-shadow:var(--selected-shadow);
}

:root[data-theme="cyberpunk"] .btn-primary{
  text-shadow:0 1px 0 rgba(255,255,255,0.24);
}

:root[data-theme="cyberpunk"] .brand-head img{
  border-color:rgba(118,233,255,0.78);
  box-shadow:
    0 0 0 1px rgba(118,233,255,0.20),
    0 0 18px rgba(0,176,255,0.22),
    var(--shadow-depth);
}
