:root{
  /* Quality Electric (qeidaho.com) brand mapping */
  color-scheme:light;
  --ink:#333333;
  --muted:#6b6b6b;
  --line:#d7d6d6;
  --panel:#ffffff;
  --surface:#f4f4f4;
  --green:#269b50;
  --green-dark:#106530;
  --green-mid:#208244;
  --green-soft:#e8f6ee;
  --forest:#0d4024;
  --charcoal:#111c26;
  --amber:#c9851a;
  --red:#b94b42;
  --card-border:#d5dde3;
  --card-shadow:6px 6px 0 rgba(17,28,38,.10),0 12px 28px rgba(17,28,38,.06);
  --divider:#ebeaea;
  --row-line:#efefef;
  --chip:#efefef;
  --hint-bg:#efefef;
  --hint-border:#e2e2e2;
  --hint-ink:#555;
  --one-slot-bg:#fff;
  --pilot-bg:#f2f9f5;
  --pilot-border:#cfe3d6;
  --pilot-ink:#456054;
  --note-icon-bg:#d7efe3;
  --current-bg:#f3faf6;
  --current-border:#cfe8d8;
  --input-border:#d3d3d3;
  --input-label:#444;
  --code-toggle-bg:#efefef;
  --connect-bg:#fff;
  --offline-bg:#fff4f2;
  --offline-border:#f0c2bb;
  --offline-ink:#7a342e;
  --offline-muted:#94534c;
  --secondary-btn-bg:#fff;
  --secondary-btn-border:#e0aea7;
  --secondary-btn-ink:#8b2f29;
  --nudge-bg:#fff8e8;
  --nudge-border:#f0c56d;
  --nudge-ink:#9a6b12;
  --urgent-bg:#fff1f1;
  --urgent-border:#e8a0a0;
  --urgent-ink:#a33b3b;
  --waiting-btn:#aeb8c1;
  --disabled-btn:#9da8b1;
}
html[data-theme="dark"]{
  color-scheme:dark;
  --ink:#e8eef4;
  --muted:#9aabba;
  --line:#2f3d4a;
  --panel:#1a242e;
  --surface:#121a22;
  --green:#3db86a;
  --green-dark:#56c984;
  --green-mid:#4ec47a;
  --green-soft:#1c3326;
  --forest:#9fd4b5;
  --charcoal:#0c1218;
  --amber:#e0a84a;
  --red:#e07a72;
  --card-border:#2a3845;
  --card-shadow:6px 6px 0 rgba(0,0,0,.28),0 12px 28px rgba(0,0,0,.22);
  --divider:#2a3845;
  --row-line:#24313c;
  --chip:#24313c;
  --hint-bg:#24313c;
  --hint-border:#314250;
  --hint-ink:#c5d2dc;
  --one-slot-bg:#1a242e;
  --pilot-bg:#172820;
  --pilot-border:#2a4637;
  --pilot-ink:#b7d4c4;
  --note-icon-bg:#214032;
  --current-bg:#1c3326;
  --current-border:#2f5640;
  --input-border:#3a4a58;
  --input-label:#c5d2dc;
  --code-toggle-bg:#24313c;
  --connect-bg:#1a242e;
  --offline-bg:#2a1c1b;
  --offline-border:#5a3532;
  --offline-ink:#f0b8b2;
  --offline-muted:#d49a94;
  --secondary-btn-bg:#2a1c1b;
  --secondary-btn-border:#5a3532;
  --secondary-btn-ink:#f0b8b2;
  --nudge-bg:#332914;
  --nudge-border:#8a6a24;
  --nudge-ink:#efc56a;
  --urgent-bg:#332020;
  --urgent-border:#8a4a4a;
  --urgent-ink:#f0a0a0;
  --waiting-btn:#5a6670;
  --disabled-btn:#4a5560;
}
*{box-sizing:border-box}
html{background:var(--surface)}
body{margin:0;color:var(--ink);background:var(--surface);font-family:Inter,"Segoe UI",Arial,Helvetica,sans-serif}
button,input{font:inherit}
button{cursor:pointer}
.queue-shell{min-height:100vh;display:flex;flex-direction:column}
.page-body{
  flex:1 1 auto;
  display:grid;
  grid-template-columns:minmax(190px,230px) minmax(0,1fr);
  align-items:start;
  width:100%;
  max-width:1280px;
  margin:0 auto;
}
.mascot-rail{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:48px 8px 24px 16px;
  pointer-events:none;
  user-select:none;
}
.mascot-figure{
  display:block;
  width:191px;
  height:289px;
  object-fit:contain;
  object-position:top center;
}
.page-main{min-width:0;padding-bottom:24px}

.topbar{
  min-height:92px;
  padding:12px max(24px,calc((100vw - 1280px)/2 + 24px));
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--charcoal);
  color:#fff;
  border-bottom:1px solid #1c2a35;
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  color:inherit;
  text-decoration:none;
}
.brand-logo{
  display:block;
  width:auto;
  height:auto;
  object-fit:contain;
}
.brand-logo-top{
  width:72px;
  height:72px;
  flex:0 0 72px;
  border-radius:16px;
}
.connect-brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:12px;
  width:100%;
  margin:0 0 24px;
}
.connect-card .brand-logo-modal{
  display:block;
  width:150px;
  height:150px;
  flex:0 0 150px;
  object-fit:contain;
  border-radius:26px;
  margin:0 auto;
}
.connect-title-brand{
  display:block;
  font-size:38px;
  letter-spacing:-.03em;
  font-weight:800;
  color:var(--ink);
  text-align:center;
}
.brandcopy{display:flex;flex-direction:column;line-height:1.15;min-width:0;justify-content:center}
.brandcopy strong{font-size:22px;letter-spacing:-.03em;font-weight:800}
.brand-sub{margin-top:3px;color:#a8b3bc;font-size:11px;font-weight:700;letter-spacing:.04em}
.topbar-meta{margin-left:auto;display:flex;align-items:center;gap:12px}
.theme-toggle{
  flex:0 0 auto;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:16px;
  line-height:1;
  padding:0;
}
.theme-toggle:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28)}
.theme-toggle:focus-visible{outline:2px solid #42d697;outline-offset:2px}
.signed-in{
  max-width:160px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#d5dde4;
  font-size:13px;
  font-weight:600;
}
.connection{display:flex;align-items:center;gap:8px;color:#a8b3bc;font-size:13px;font-weight:600}
.connection-dot{width:8px;height:8px;border-radius:99px;background:#73808c;box-shadow:0 0 0 3px rgba(115,128,140,.12)}
.connection.online{color:#c8f4df}
.connection.online .connection-dot{background:#42d697;box-shadow:0 0 0 3px rgba(66,214,151,.14)}
.connection.offline{color:#ffd0c8}
.connection.offline .connection-dot{background:#f07167;box-shadow:0 0 0 3px rgba(240,113,103,.16)}

.offline-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:16px 24px 0;
  padding:14px 18px;
  border:1px solid var(--offline-border);
  background:var(--offline-bg);
  border-radius:12px;
  color:var(--offline-ink);
}
.offline-banner[hidden]{display:none !important}
.offline-banner strong{display:block;font-size:13px}
.offline-banner span{display:block;margin-top:2px;font-size:12px;color:var(--offline-muted)}
.secondary-button{
  flex:0 0 auto;
  border:1px solid var(--secondary-btn-border);
  border-radius:10px;
  min-height:38px;
  padding:0 14px;
  background:var(--secondary-btn-bg);
  color:var(--secondary-btn-ink);
  font-weight:700;
  font-size:13px;
}
.secondary-button:hover:not(:disabled){filter:brightness(1.06)}
.secondary-button:disabled{opacity:.65;cursor:not-allowed}

.hero-panel{
  margin:0;
  padding:48px 24px 28px 16px;
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
}
.hero-copy{flex:1 1 auto;min-width:0}
.section-label{color:var(--green-mid);font-size:11px;text-transform:uppercase;letter-spacing:.15em;font-weight:800}
.hero-panel h1{margin:8px 0;font-size:clamp(34px,4.6vw,52px);letter-spacing:-.045em;line-height:1.02;color:var(--ink)}
.hero-panel p{margin:0;color:var(--muted);max-width:620px;font-size:16px;line-height:1.65}
.hero-panel p + p{margin-top:22px}
.one-slot{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 13px 9px 9px;
  border:1px solid var(--line);
  background:var(--one-slot-bg);
  border-radius:12px;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.one-slot span{
  width:29px;height:29px;border-radius:8px;display:grid;place-items:center;color:#fff;background:var(--green);
}

.queue-grid{
  margin:0;
  padding:0 24px;
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:18px;
}
.status-card,.line-card{
  border:2px solid var(--card-border);
  background:var(--panel);
  border-radius:16px;
  box-shadow:var(--card-shadow);
}
.status-card{
  min-height:365px;
  padding:26px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
}
.status-card:before{content:"";height:4px;position:absolute;inset:0 0 auto;background:#c8c8c8}
.status-card.ready:before{background:var(--green)}
.status-card.syncing:before{background:var(--green-dark)}
.status-card.waiting:before{background:var(--amber)}
.status-card.ready{
  border-color:#b7dfc8;
  box-shadow:
    6px 6px 0 rgba(16,101,48,.14),
    0 12px 28px rgba(38,155,80,.08);
}
.status-card.syncing{
  border-color:#a9cbb8;
  box-shadow:
    6px 6px 0 rgba(13,64,36,.16),
    0 12px 28px rgba(16,101,48,.08);
}
.status-card.waiting{
  border-color:#ead5a8;
  box-shadow:
    6px 6px 0 rgba(201,133,26,.14),
    0 12px 28px rgba(201,133,26,.07);
}
.status-heading{
  display:flex;align-items:center;gap:9px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-weight:800;
}
.status-pulse{width:9px;height:9px;border:2px solid #9aa6b1;border-radius:99px}
.ready .status-pulse{border-color:var(--green);background:#dcf7ea;animation:pulse-ready 1.6s ease-in-out infinite}
.syncing .status-pulse{border-color:var(--green-dark);background:#d7efe1;box-shadow:0 0 0 5px #eef8f2}
.waiting .status-pulse{border-color:var(--amber);background:#fff0d8}
@keyframes pulse-ready{
  0%,100%{box-shadow:0 0 0 0 rgba(38,155,80,0)}
  50%{box-shadow:0 0 0 6px rgba(38,155,80,.14)}
}
.status-main{margin:auto 0}
.status-main h2{margin:0 0 8px;font-size:38px;letter-spacing:-.035em}
.status-main p{margin:0;color:var(--muted);line-height:1.5}
.status-main .status-hint{
  margin:16px 0;
  padding:10px 12px;
  border-radius:10px;
  background:var(--hint-bg);
  border:1px solid var(--hint-border);
  color:var(--hint-ink);
  font-size:13px;
  line-height:1.45;
}
.status-card.ready .status-main .status-hint{background:var(--green-soft);border-color:#cfe8d8;color:var(--green-dark)}
.status-card.syncing .status-main .status-hint{background:#e7f3ec;border-color:#c5dfd0;color:var(--forest)}
.status-card.waiting .status-main .status-hint{background:#fff8ee;border-color:#f0e2c8;color:#7a5a1f}
.status-main .status-hint[hidden]{display:none !important}

.actions{display:grid;gap:9px}
.primary-button,.danger-button{
  width:100%;border:0;border-radius:11px;min-height:48px;padding:0 18px;color:#fff;font-weight:800;letter-spacing:.02em;
}
.primary-button{background:var(--green);box-shadow:0 5px 14px rgba(38,155,80,.18)}
.primary-button:hover:not(:disabled){background:var(--green-dark)}
.primary-button:disabled{cursor:not-allowed;background:var(--disabled-btn);box-shadow:none}
.primary-button.waiting-button{background:var(--waiting-btn);letter-spacing:0;font-weight:700}
.danger-button{background:var(--red)}
.text-button{min-height:34px;border:0;color:var(--muted);background:transparent;font-weight:700;font-size:13px}
.text-button:hover{color:var(--red)}
.secondary-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:2px;
}
.urgent-button,.nudge-button{
  justify-self:start;
  min-height:30px;
  margin:0;
  padding:4px 10px;
  border-radius:8px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.01em;
  white-space:nowrap;
}
.urgent-button{
  border:1px solid var(--urgent-border);
  background:var(--urgent-bg);
  color:var(--urgent-ink);
}
.urgent-button:hover{
  filter:brightness(1.08);
}
.urgent-button:disabled{opacity:.5;cursor:not-allowed}
.nudge-button{
  border:1px solid var(--nudge-border);
  background:var(--nudge-bg);
  color:var(--nudge-ink);
}
.nudge-button:hover{
  filter:brightness(1.08);
}
.nudge-button:disabled{opacity:.5;cursor:not-allowed}

.line-card{min-height:365px;padding:26px}
.card-title-row{
  display:flex;justify-content:space-between;align-items:start;gap:20px;
  padding-bottom:20px;border-bottom:1px solid var(--divider);
}
.card-title-row h2{margin:4px 0 0;font-size:24px;letter-spacing:-.025em}
.count-pill,.you-pill,.state-pill{border-radius:99px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.count-pill{background:var(--chip);color:var(--muted);padding:7px 10px}
.empty-state{
  min-height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--muted);text-align:center;
}
.empty-state strong{color:var(--ink);margin:12px 0 4px}
.empty-state span{font-size:13px}
.empty-icon{
  width:48px;height:48px;display:grid;place-items:center;border-radius:99px;
  color:var(--green);background:var(--green-soft);font-size:22px;font-weight:900;
}
.queue-list{list-style:none;padding:14px 0 0;margin:0}
.queue-person{
  min-height:70px;
  display:grid;
  align-items:center;
  grid-template-columns:30px 42px minmax(0,1fr) auto;
  gap:11px;
  border-bottom:1px solid var(--row-line);
  border-radius:10px;
  padding:0 8px;
  margin:0 -8px;
}
.queue-person.current{
  background:var(--current-bg);
  border:1px solid var(--current-border);
  border-bottom-color:var(--current-border);
  margin-bottom:4px;
}
.queue-person.current.ready{background:var(--green-soft);border-color:#bfe3cd}
.queue-person.current.syncing{background:#e7f3ec;border-color:#b7d9c5}
.position{color:#8b97a2;font-size:13px;font-weight:700;text-align:center}
.avatar{
  width:38px;height:38px;border-radius:11px;background:var(--green-soft);color:var(--green-dark);
  display:grid;place-items:center;font-size:11px;font-weight:900;
}
.avatar.ready{background:#d7f0e2;color:var(--green)}
.avatar.syncing{background:#cfe6d8;color:var(--green-dark)}
.avatar.waiting{background:#fff1db;color:var(--amber)}
.person-copy{display:flex;flex-direction:column;overflow:hidden}
.person-copy strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.person-copy small{color:var(--muted);margin-top:3px}
.you-pill{padding:5px 8px;color:var(--green-dark);background:var(--green-soft)}
.you-pill.ready{color:var(--green-dark);background:#d9f2e4}
.you-pill.syncing{color:var(--forest);background:#d7ebe1}
.state-pill{padding:5px 8px;color:var(--muted);background:var(--chip)}
.state-pill.ready{color:var(--green-dark);background:#e4f6ec}
.state-pill.syncing{color:var(--forest);background:#dcefe5}

.pilot-note{
  margin:18px 24px 18px;padding:17px 24px;display:flex;gap:12px;
  color:var(--pilot-ink);border:1px solid var(--pilot-border);background:var(--pilot-bg);border-radius:14px;
}
.pilot-note strong{font-size:13px;color:var(--green-dark)}
.pilot-note p{margin:3px 0 0;font-size:12px;line-height:1.55}
.site-footer{
  margin:0 24px 28px;
  padding-top:14px;
  border-top:1px solid var(--divider);
  display:flex;
  justify-content:center;
  gap:12px;
  color:var(--muted);
  font-size:12px;
  text-align:center;
}
.site-footer a{color:var(--green-dark);font-weight:700;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.note-icon{
  width:24px;height:24px;flex:0 0 24px;display:grid;place-items:center;border-radius:99px;
  background:var(--note-icon-bg);color:var(--green-dark);font-family:Georgia,serif;font-weight:800;
}

.modal-backdrop{
  position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:20px;
  background:rgba(17,28,38,.74);backdrop-filter:blur(7px);
}
.modal-backdrop.hidden{display:none}
.connect-card{
  width:min(100%,430px);border-radius:20px;background:var(--connect-bg);padding:32px;
  box-shadow:0 24px 90px rgba(0,0,0,.26);
  text-align:center;
  color:var(--ink);
}
.connect-card h2{margin:7px 0 9px;font-size:29px;letter-spacing:-.03em}
.connect-card>p{margin:0 0 22px;color:var(--muted);font-size:14px;line-height:1.55}
.connect-card label{display:block;margin:0 0 14px;color:var(--input-label);font-size:12px;font-weight:800;text-align:left}
.connect-card input{
  display:block;width:100%;height:45px;margin-top:7px;border:1px solid var(--input-border);
  border-radius:9px;padding:0 12px;color:var(--ink);background:var(--panel);outline:none;
}
.code-field{position:relative;display:block}
.code-field input{padding-right:68px}
.code-toggle{
  position:absolute;right:6px;bottom:6px;height:33px;padding:0 10px;border:0;border-radius:7px;
  background:var(--code-toggle-bg);color:var(--input-label);font-size:12px;font-weight:700;
}
.code-toggle:hover{filter:brightness(1.08)}
.connect-card input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(38,155,80,.14)}
.connect-card small{display:block;margin-top:13px;color:#84919c;text-align:center;font-size:10px;line-height:1.4}
.form-error{margin:0 0 14px;padding:10px 12px;border-radius:8px;color:#8b2f29;background:#fdeceb;font-size:12px}

html[data-theme="dark"] .status-card.ready{
  border-color:#2f5640;
  box-shadow:6px 6px 0 rgba(61,184,106,.16),0 12px 28px rgba(0,0,0,.22);
}
html[data-theme="dark"] .status-card.syncing{
  border-color:#355844;
  box-shadow:6px 6px 0 rgba(86,201,132,.14),0 12px 28px rgba(0,0,0,.22);
}
html[data-theme="dark"] .status-card.waiting{
  border-color:#5a4a28;
  box-shadow:6px 6px 0 rgba(224,168,74,.14),0 12px 28px rgba(0,0,0,.22);
}
html[data-theme="dark"] .status-card.ready .status-main .status-hint{
  background:#1c3326;border-color:#2f5640;color:#9fd4b5;
}
html[data-theme="dark"] .status-card.syncing .status-main .status-hint{
  background:#1a2e24;border-color:#355844;color:#b7d4c4;
}
html[data-theme="dark"] .status-card.waiting .status-main .status-hint{
  background:#332914;border-color:#5a4a28;color:#efc56a;
}
html[data-theme="dark"] .ready .status-pulse{background:#214032}
html[data-theme="dark"] .syncing .status-pulse{background:#214032;box-shadow:0 0 0 5px rgba(61,184,106,.12)}
html[data-theme="dark"] .waiting .status-pulse{background:#332914}
html[data-theme="dark"] .queue-person.current.ready{background:#1c3326;border-color:#2f5640}
html[data-theme="dark"] .queue-person.current.syncing{background:#1a2e24;border-color:#355844}
html[data-theme="dark"] .avatar.ready{background:#214032;color:#56c984}
html[data-theme="dark"] .avatar.syncing{background:#1c3326;color:#9fd4b5}
html[data-theme="dark"] .avatar.waiting{background:#332914;color:#efc56a}
html[data-theme="dark"] .you-pill{color:#9fd4b5;background:#1c3326}
html[data-theme="dark"] .you-pill.ready{color:#9fd4b5;background:#214032}
html[data-theme="dark"] .you-pill.syncing{color:#b7d4c4;background:#1a2e24}
html[data-theme="dark"] .state-pill.ready{color:#9fd4b5;background:#1c3326}
html[data-theme="dark"] .state-pill.syncing{color:#b7d4c4;background:#1a2e24}
html[data-theme="dark"] .form-error{color:#f0b8b2;background:#2a1c1b}
html[data-theme="dark"] .connect-card small{color:#84919c}
html[data-theme="dark"] .mascot-figure{opacity:.92;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35))}
html[data-theme="dark"] .status-card:before{background:#3a4a58}

.toast{
  position:fixed;right:20px;bottom:20px;z-index:20;max-width:360px;padding:11px 14px;
  border-radius:10px;background:var(--charcoal);color:#fff;box-shadow:0 8px 30px rgba(0,0,0,.2);
  font-size:13px;opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s ease;
}
.toast.show{opacity:1;transform:translateY(0)}

@media(max-width:1100px){
  .page-body{
    grid-template-columns:1fr;
  }
  .page-main{order:1}
  .mascot-rail{
    order:2;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding:8px 16px 20px;
  }
  .mascot-figure{
    width:140px;
    height:auto;
    max-height:210px;
    object-position:bottom center;
  }
}

@media(max-width:760px){
  .topbar{min-height:76px;padding:10px 16px}
  .brand{gap:10px}
  .brand-logo-top{width:56px;height:56px;flex-basis:56px;border-radius:14px}
  .brandcopy strong{font-size:18px}
  .brand-sub{font-size:10px}
  .signed-in{display:none}
  .mascot-figure{
    width:110px;
    max-height:170px;
  }
  .mascot-rail{padding:4px 14px 16px}
  .hero-panel{padding:32px 18px 22px;display:block}
  .hero-panel p{font-size:14px}
  .one-slot{width:fit-content;margin-top:18px}
  .queue-grid{grid-template-columns:1fr;padding:0 14px}
  .status-card{min-height:320px}
  .line-card{min-height:310px}
  .offline-banner{margin:12px 14px 0;flex-direction:column;align-items:stretch}
  .pilot-note{margin:14px 14px 12px}
  .site-footer{margin:0 14px 22px;flex-wrap:wrap}
  .connect-card{padding:26px 22px}
  .toast{left:16px;right:16px;max-width:none}
}