:root{
  color-scheme: dark;
  --bg:#000000;
  --text:rgba(255,255,255,0.96);
  --text2:rgba(235,235,245,0.72);
  --text3:rgba(235,235,245,0.55);
  --accent:#0A84FF;
  --good:#30D158;
  --warn:#FFD60A;
  --bad:#FF453A;
  --glass:rgba(22,22,24,0.72);
  --glass2:rgba(32,32,34,0.72);
  --glass3:rgba(44,44,46,0.66);
  --hair:rgba(255,255,255,0.10);
  --hair2:rgba(255,255,255,0.16);
  --r-xxl:30px;
  --r-xl:24px;
  --r-lg:20px;
  --r-md:16px;
  --r-sm:12px;
  --s-2:6px;
  --s-3:8px;
  --s-4:12px;
  --s-5:16px;
  --s-6:20px;
  --s-7:24px;
  --shadow-1:0 10px 30px rgba(0,0,0,0.45);
  --shadow-2:0 18px 60px rgba(0,0,0,0.55);
  --blur:22px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,Arial,sans-serif;
  --safe-top:env(safe-area-inset-top);
  --safe-bot:env(safe-area-inset-bottom);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  overflow:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

#app{
  position:relative;
  height:100%;
  width:100%;
  overflow:hidden;
  background:
    radial-gradient(1100px 760px at 18% -10%, rgba(10,132,255,0.18), transparent 60%),
    radial-gradient(900px 680px at 92% 10%, rgba(48,209,88,0.14), transparent 58%),
    radial-gradient(800px 560px at 32% 115%, rgba(255,214,10,0.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0) 36%),
    #000;
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

.screen{
  position:absolute;
  inset:0;
  display:none;
  transform:translateX(12px);
  opacity:0;
  transition:transform 220ms ease, opacity 220ms ease;
}
.screen.on{ display:block; }
.screen.active{ transform:translateX(0); opacity:1; }

.scroll{
  position:absolute;
  left:0; right:0; top:0; bottom:0;
  padding-bottom:calc(104px + var(--safe-bot));
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.wrap{
  max-width:620px;
  margin:0 auto;
}
.section{
  margin:12px var(--s-5) 0 var(--s-5);
}
.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media (min-width:430px){
  .grid.ctrl-grid{ grid-template-columns:1fr 1fr; }
  .grid.device-grid{ grid-template-columns:1fr 1fr; }
}

.nav{
  position:absolute;
  top:0; left:0; right:0;
  padding-top:calc(var(--safe-top) + 10px);
  padding-bottom:10px;
  padding-left:var(--s-5);
  padding-right:var(--s-5);
  z-index:30;
  pointer-events:none;
}
.navbar{
  display:grid;
  grid-template-columns:46px 1fr 46px;
  align-items:center;
  gap:10px;
  background:rgba(16,16,18,0.55);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:999px;
  padding:8px 10px;
  backdrop-filter: blur(var(--blur)) saturate(1.7);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.7);
  box-shadow:var(--shadow-1);
  pointer-events:auto;
}
.navtitle{
  text-align:center;
  font-size:13px;
  letter-spacing:-0.2px;
  font-weight:800;
  color:rgba(235,235,245,0.92);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  user-select:none;
}
.navright{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}
.iconbtn{
  width:38px; height:38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(28,28,30,0.45);
  color:rgba(235,235,245,0.92);
  display:grid;
  place-items:center;
  font-size:18px;
  font-weight:900;
  cursor:pointer;
  user-select:none;
  transition:transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.iconbtn:active{
  transform:scale(0.98);
  background:rgba(44,44,46,0.58);
  border-color:rgba(255,255,255,0.16);
}
.iconbtn:focus-visible{
  outline:2px solid rgba(10,132,255,0.55);
  outline-offset:2px;
}

.hero{
  padding:calc(var(--safe-top) + 74px) var(--s-5) 6px var(--s-5);
}
.kicker{
  margin:0;
  font-size:11px;
  font-weight:900;
  letter-spacing:0.2px;
  color:var(--text3);
  
}
.title{
  margin:7px 0 0 0;
  font-size:34px;
  font-weight:900;
  letter-spacing:-0.9px;
  line-height:1.07;
}
.subtitle{
  margin:10px 0 0 0;
  font-size:14px;
  font-weight:700;
  letter-spacing:-0.15px;
  line-height:1.35;
  color:var(--text2);
}

.card{
  background:var(--glass);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:var(--r-xxl);
  backdrop-filter: blur(var(--blur)) saturate(1.5);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.5);
  box-shadow:var(--shadow-1);
}
.card.padded{ padding:16px; }

.tile{
  padding:14px 14px;
  cursor:pointer;
  user-select:none;
  transition:transform 120ms ease, border-color 120ms ease, background 120ms ease;
}
.tile:active{
  transform:translateY(1px);
  background:rgba(44,44,46,0.50);
  border-color:rgba(255,255,255,0.16);
}
.tile.is-selected{
  border-color:rgba(10,132,255,0.35);
  background:rgba(10,132,255,0.12);
}

.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.h{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:anywhere;
}

.p{
  font-family:var(--font);
  font-size:inherit;
  font-weight:inherit;
  display:block;
  overflow:visible;
  -webkit-line-clamp:unset;
  -webkit-box-orient:unset;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
}



.pill{
  --stroke: rgba(255,255,255,0.14);
  --fill1: rgba(28,28,32,0.98);
  --fill2: rgba(16,16,18,0.98);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  min-height:32px;
  border-radius:14px;
  border:none;
  background: linear-gradient(180deg, var(--fill1), var(--fill2));
  color: rgba(235,235,245,0.92);
  box-shadow:
    inset 0 0 0 1px var(--stroke),
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 10px 26px rgba(0,0,0,0.35);
  font-size:12px;
  font-weight:900;
  letter-spacing:-0.15px;
  line-height:1;
  white-space:nowrap;
  user-select:none;
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}

.pill.mini{
  min-height:26px;
  padding:0 10px;
  font-size:13px;
  line-height:1;
}
.pill.mini.square{
  min-width:26px;
  justify-content:center;
}

.pill.ok   { --stroke: rgba(48,209,88,0.45);  color: var(--good); }
.pill.warn { --stroke: rgba(255,214,10,0.50); color: var(--warn); }
.pill.bad  { --stroke: rgba(255,69,58,0.50);  color: var(--bad); }
.mini{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }

.tile .pill{ display:none !important; }

.ring{
  width:46px; height:46px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.72) 0 56%, transparent 56%),
    conic-gradient(var(--accent) var(--pct), rgba(255,255,255,0.12) 0);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
  flex:0 0 auto;
}
.ring span{
  font-size:12px;
  font-weight:900;
  color:rgba(235,235,245,0.92);
  letter-spacing:-0.2px;
}
.ring.ok{
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.72) 0 56%, transparent 56%),
    conic-gradient(var(--good) 100%, rgba(255,255,255,0.12) 0);
}

.bottom{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:10px var(--s-5) calc(14px + var(--safe-bot)) var(--s-5);
  z-index:25;
  pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,0.92), rgba(0,0,0,0.55), rgba(0,0,0,0));
}
.bar{ display:grid; grid-template-columns:1fr; gap:10px; pointer-events:none; }

.btn{
  height:54px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(28,28,30,0.72);
  backdrop-filter:blur(var(--blur)) saturate(1.6);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.6);
  box-shadow:var(--shadow-1);
  color:rgba(235,235,245,0.92);
  font-size:16px;
  font-weight:900;
  letter-spacing:-0.25px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
  pointer-events:auto;
  transition:transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.btn:active{
  transform:translateY(1px);
  background:rgba(44,44,46,0.82);
  border-color:rgba(255,255,255,0.16);
}
.btn.primary{
  background:linear-gradient(180deg, rgba(10,132,255,0.86), rgba(10,132,255,0.62));
  border-color:rgba(255,255,255,0.16);
  color:#fff;
  box-shadow:0 18px 52px rgba(10,132,255,0.18), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn.primary:active{
  background:linear-gradient(180deg, rgba(10,132,255,0.78), rgba(10,132,255,0.56));
}

.btn[disabled], .btn[aria-disabled="true"]{ opacity:0.45; pointer-events:none; }
.btn.primary[disabled], .btn.primary[aria-disabled="true"]{
  opacity:1;
  background:rgba(28,28,30,0.72);
  border-color:rgba(255,255,255,0.12);
  color:rgba(235,235,245,0.60);
  box-shadow:var(--shadow-1);
}

.stepwrap{
  margin:12px var(--s-5) 0 var(--s-5);
  padding-bottom:calc(120px + var(--safe-bot));
}
.stepcard{ padding:16px; }
.steptop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}
.stepmeta{
  font-size:12px;
  font-weight:900;
  letter-spacing:0.2px;
  color:var(--text3);
  
  margin:0;
}
.stepprog{
  font-size:12px;
  font-weight:900;
  color:rgba(235,235,245,0.70);
  letter-spacing:-0.2px;
}
.stepbig{
  margin:10px 0 0 0;
  font-size:20px;
  font-weight:950;
  letter-spacing:-0.35px;
  line-height:1.2;
}
.stepnote{
  margin:8px 0 0 0;
  font-size:14px;
  font-weight:750;
  color:rgba(235,235,245,0.72);
  letter-spacing:-0.15px;
  line-height:1.35;
}

.progressbar{
  margin-top:14px;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.10);
  overflow:hidden;
}
.progressbar > div{
  height:100%;
  width:0%;
  border-radius:999px;
  background:rgba(10,132,255,0.9);
  transition:width 220ms ease;
}
.chipline{ display:none !important; }
#stepChips{ display:none !important; }

.callout{
  margin-top:14px;
  border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(44,44,46,0.38);
  padding:12px;
}
.callout.blue{ border-color:rgba(10,132,255,0.28); background:rgba(10,132,255,0.10); }
.callout.green{ border-color:rgba(48,209,88,0.28); background:rgba(48,209,88,0.10); }

.callout.yellow{
  border-color: rgba(71,163,255,0.28);
  background:    rgba(71,163,255,0.10);
}

.wirelist .wirerow{
  align-items:center;
}

.wirelist .wireto{
  display:flex;
  align-items:center;
  min-height:26px;
  line-height:1.15;
}

.wirelist .wirearrow{
  display:flex;
  align-items:center;
  justify-content:center;
  height:26px;
  width:22px;
  line-height:1;
  transform:translateY(-1px);
}

.wirelist .pill.mini,
.wirelist .wireidx{
  height:26px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transform:translateY(-1px);
}

.callout.wire-tone{
  border-color: var(--wire-bd, rgba(255,255,255,0.10));
  background:    var(--wire-bg, rgba(44,44,46,0.38));
}

.callout.wire-hue{
  position:relative;
  overflow:hidden;
}

.callout.wire-hue::after{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(480px 260px at 18% 18%, var(--wire, #0A84FF), transparent 62%),
    radial-gradient(440px 280px at 86% 28%, var(--wire, #0A84FF), transparent 66%),
    radial-gradient(520px 360px at 50% 120%, var(--wire, #0A84FF), transparent 72%);
  opacity:0.18;
  filter: blur(26px) saturate(1.1) brightness(0.85);
  mix-blend-mode: normal;
  pointer-events:none;
  animation: wireHue 5.5s ease-in-out infinite;
}

@keyframes wireHue{
  0%   { opacity:0.14; filter: blur(26px) saturate(1.1) brightness(0.75); }
  50%  { opacity:0.28; filter: blur(26px) saturate(1.1) brightness(1.05); }
  100% { opacity:0.14; filter: blur(26px) saturate(1.1) brightness(0.75); }
}

#wfNavTitle{ cursor:pointer; }
#wfNavTitle:active{ opacity:0.75; }

.screen { pointer-events: none; }
.screen.on.active { pointer-events: auto; }

.callout.wire-hue > *{
  position:relative;
  z-index:1;
}

@media (prefers-reduced-motion: reduce){
  .callout.wire-hue::after{ animation:none; }
}

.callhead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.tag{
  font-size:11px;
  font-weight:950;
  letter-spacing:0.2px;
  color:rgba(235,235,245,0.70);
  
}
.tagStrong{
  color:rgba(255,255,255,0.92);
  letter-spacing:-0.2px;
  font-size:12px;
  font-weight:950;
  text-transform:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:52%;
  text-align:right;
}
.wirelist{ display:grid; gap:8px; }
.wirerow{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(0,0,0,0.18);
}

.wireidx{
  --stroke: rgba(255,255,255,0.14);
  --fill1: rgba(28,28,32,0.98);
  --fill2: rgba(16,16,18,0.98);
  min-width:26px;
  height:26px;
  padding:0 10px;
  border-radius:12px;
  border:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg, var(--fill1), var(--fill2));
  box-shadow:
    inset 0 0 0 1px var(--stroke),
    inset 0 1px 0 rgba(255,255,255,0.08);
  font-weight:950;
  font-size:13px;
  line-height:1;
  color: rgba(235,235,245,0.92);
  flex:0 0 auto;
}

.wireto{
  font-size:14px;
  font-weight:950;
  letter-spacing:-0.25px;
  color:rgba(255,255,255,0.92);
  min-width:0;
  flex:1;
  white-space:normal;
  overflow-wrap:anywhere;
}
.wirearrow{
  font-size:14px;
  font-weight:950;
  color:rgba(235,235,245,0.70);
  flex:0 0 auto;
}

#toast{
  position:absolute;
  left:50%;
  bottom:calc(98px + var(--safe-bot));
  transform:translateX(-50%) translateY(10px);
  background:rgba(22,22,24,0.86);
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter:blur(var(--blur)) saturate(1.6);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.6);
  padding:10px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:800;
  color:rgba(235,235,245,0.92);
  box-shadow:var(--shadow-1);
  opacity:0;
  transition:opacity 180ms ease, transform 180ms ease;
  z-index:90;
  pointer-events:none;
  max-width:calc(100% - 30px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }

.backdrop, #backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.55);
  opacity:0;
  pointer-events:none;
  transition:opacity 220ms ease;
  z-index:70;
}
.backdrop.on, #backdrop.on{ opacity:1; pointer-events:auto; }

.sheet{
  position:absolute;
  left:0; right:0;
  bottom:0;
  padding:10px 12px calc(16px + var(--safe-bot)) 12px;
  transform:translateY(105%);
  transition:transform 240ms cubic-bezier(.2,.9,.2,1);
  z-index:71;
}
.sheet.on{ transform:translateY(0); }

.sheetcard{
  border-radius:28px;
  padding:10px;
  background:rgba(22,22,24,0.90);
  border:1px solid rgba(255,255,255,0.10);
  backdrop-filter:blur(24px) saturate(1.6);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);
  box-shadow:var(--shadow-2);
}
.handle{
  width:44px; height:5px;
  border-radius:999px;
  background:rgba(235,235,245,0.28);
  margin:6px auto 10px auto;
}
.sheethead{
  padding:2px 8px 8px 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.sheettitle{
  margin:0;
  font-size:14px;
  font-weight:950;
  letter-spacing:-0.2px;
  color:rgba(235,235,245,0.92);
}
.sheetclose{
  height:38px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(44,44,46,0.52);
  color:rgba(235,235,245,0.92);
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  user-select:none;
  transition:transform 120ms ease;
}
.sheetclose:active{ transform:translateY(1px); }

.steps{
  padding:8px;
  max-height:min(58vh, 560px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.stepitem{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(44,44,46,0.34);
  margin-bottom:10px;
  cursor:pointer;
  user-select:none;
  transition:transform 120ms ease, border-color 120ms ease;
}
.stepitem:active{ transform:translateY(1px); border-color:rgba(255,255,255,0.16); }
.stepitem .left{ min-width:0; flex:1; }
.stepitem .t{ margin:0; font-size:13px; font-weight:950; letter-spacing:-0.15px; }
.stepitem .d{
  margin:6px 0 0 0;
  font-size:12px;
  font-weight:750;
  color:rgba(235,235,245,0.62);
  letter-spacing:-0.15px;
  line-height:1.2;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.stepitem .badge{
  flex:0 0 auto;
  margin-top:1px;
  width:28px;
  height:28px;
  border-radius:999px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(0,0,0,0.20);
  font-weight:950;
}
.b-done{ color:var(--good); border-color:rgba(48,209,88,0.35); background:rgba(48,209,88,0.14); }
.b-now{ color:var(--accent); border-color:rgba(10,132,255,0.35); background:rgba(10,132,255,0.14); }
.b-wait{ color:rgba(235,235,245,0.70); }

#cameraModal{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.94);
  z-index:95;
  display:none;
}
#cameraModal.on{ display:block; }

.camTop{
  position:absolute;
  top:0; left:0; right:0;
  padding-top:calc(var(--safe-top) + 10px);
  padding-bottom:10px;
  padding-left:var(--s-5);
  padding-right:var(--s-5);
  z-index:97;
}

.camBar{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:center;
  gap:10px;
  background:rgba(16,16,18,0.55);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:999px;
  padding:8px 10px;
  backdrop-filter: blur(24px) saturate(1.7);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  box-shadow:var(--shadow-1);
}

.camBar .mid{
  min-width:0;
  text-align:center;
  font-size:13px;
  font-weight:900;
  letter-spacing:-0.2px;
  color:rgba(235,235,245,0.92);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  user-select:none;
}

.camBtn{
  height:38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(28,28,30,0.42);
  color:rgba(235,235,245,0.92);
  font-size:13px;
  font-weight:950;
  cursor:pointer;
  user-select:none;
  transition:transform 120ms ease, border-color 120ms ease, background 120ms ease;
}
.camBtn:active{ transform:translateY(1px); border-color:rgba(255,255,255,0.16); background:rgba(44,44,46,0.54); }
.camBtn.left{ justify-self:start; padding:0 12px; }
.camBtn.right{ justify-self:end; padding:0 12px; }

.camStage{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:calc(var(--safe-top) + 84px) var(--s-5) calc(var(--safe-bot) + 118px) var(--s-5);
}
#camVideo{
  width:100%;
  max-width:620px;
  aspect-ratio:3 / 4;
  object-fit:cover;
  border-radius:26px;
  border:1px solid rgba(255,255,255,0.14);
  background:#000;
  box-shadow:var(--shadow-2);
}
.camBottom{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:10px var(--s-5) calc(var(--safe-bot) + 18px) var(--s-5);
  z-index:97;
  display:grid;
  place-items:center;
  gap:10px;
  background:linear-gradient(to top, rgba(0,0,0,0.86), rgba(0,0,0,0));
}
.shutter{
  width:76px; height:76px;
  border-radius:999px;
  border:5px solid rgba(255,255,255,0.92);
  background:rgba(255,255,255,0.10);
  cursor:pointer;
  user-select:none;
  box-shadow:0 20px 60px rgba(0,0,0,0.55);
  transition:transform 120ms ease, background 120ms ease;
}
.shutter:active{ transform:scale(0.98); background:rgba(255,255,255,0.16); }
.camHint{
  font-size:13px;
  font-weight:800;
  color:rgba(235,235,245,0.65);
  letter-spacing:-0.15px;
  text-align:center;
  max-width:560px;
}
#flash{
  position:absolute;
  inset:0;
  background:rgba(255,255,255,0.0);
  opacity:0;
  pointer-events:none;
  transition:opacity 240ms ease;
  z-index:99;
}
#flash.on{ opacity:1; }

#controlsLayer{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:85;
  display:none;
}

#actionBtn{
  position:absolute;
  right:18px;
  bottom:calc(18px + var(--safe-bot));
  width:62px;
  height:62px;
  border-radius:31px;
  background:rgba(255,255,255,0.95);
  color:#000;
  box-shadow:0 14px 45px rgba(0,0,0,0.55);
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:28px;
  font-weight:900;
  letter-spacing:-0.5px;
  pointer-events:auto;
  cursor:pointer;
  user-select:none;
  transition:transform 0.15s ease, opacity 0.15s ease;
  touch-action:none;
}
#actionBtn:active{ transform:translateY(1px); }
body.dragging #actionBtn{ transform:scale(0.55); opacity:0; pointer-events:none; }

#sliderTrack{
  position:absolute;
  right:24px;
  bottom:calc(92px + var(--safe-bot));
  width:54px;
  display:flex;
  flex-direction:column-reverse;
  background:rgba(22,22,24,0.92);
  backdrop-filter:blur(24px) saturate(1.7);
  -webkit-backdrop-filter:blur(24px) saturate(1.7);
  border-radius:28px;
  padding:6px;
  box-shadow:0 12px 46px rgba(0,0,0,0.66);
  border:1px solid rgba(255,255,255,0.14);
  opacity:0;
  transform:scaleY(0);
  transform-origin:bottom center;
  transition:opacity 0.10s ease, transform 0.10s cubic-bezier(0.215, 0.61, 0.355, 1);
  pointer-events:none;
}
body.dragging #sliderTrack{ opacity:1; transform:scaleY(1); pointer-events:auto; }

.slider-seg{
  height:34px;
  width:42px;
  border-radius:12px;
  margin-top:3px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:900;
  letter-spacing:-0.5px;
  color:#fff;
  transition:transform 0.10s ease;
  border:1px solid rgba(255,255,255,0.10);
  user-select:none;
}
.seg-White{ background:#fff; color:#000; }
.seg-Black{ background:#000; border:1px solid rgba(255,255,255,0.70); }
.seg-Yellow{ background:#FFD60A; color:#000; }
.seg-Green{ background:#30D158; color:#000; }
.seg-Red{ background:#FF453A; }
.seg-Blue{ background:#0A84FF; }
.seg-Gray{ background:#8E8E93; color:#000; }
.seg-Brown{ background:#A2845E; color:#000; }
.seg-Purple{ background:#AF52DE; }

.slider-seg.active{
  transform:scale(1.35) translateX(-6px);
  z-index:100;
  box-shadow:0 6px 18px rgba(0,0,0,0.55);
  border:2px solid rgba(255,255,255,0.92);
}

#selectionLabel{
  position:absolute;
  right:92px;
  top:50%;
  bottom:auto;
  transform:translateY(-50%);
  background:rgba(0,0,0,0.88);
  padding:6px 12px;
  border-radius:14px;
  font-weight:900;
  font-size:15px;
  color:#fff;
  pointer-events:none;
  opacity:0;
  transition:opacity 0.10s ease, top 0.05s ease;
  border:1px solid rgba(255,255,255,0.16);
  text-align:right;
  min-width:84px;
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  z-index:200;
}

body.dragging{
  -webkit-user-select:none;
  user-select:none;
}
body.dragging #selectionLabel{ opacity:1; }

#cameraInput{ display:none; }

.row > *{ min-width:0; }
.row > :first-child{ flex:1 1 auto; min-width:0; }
.callhead > *{ min-width:0; }
.grid > *{ min-width:0; }
.wirelist{ min-width:0; }
.wirerow{ min-width:0; width:100%; }
.subtitle, .stepnote{ overflow-wrap:anywhere; }

.stepitem[role="button"]:focus-visible{
  outline:2px solid rgba(10,132,255,0.55);
  outline-offset:2px;
}
#actionBtn:focus-visible{
  outline:2px solid rgba(10,132,255,0.55);
  outline-offset:3px;
}
.stepitem.is-viewing{
  border-color:rgba(10,132,255,0.28);
  box-shadow:0 0 0 2px rgba(10,132,255,0.12);
}
body.reviewing #actionIcon{
  transform:translateY(-1px);
}

#actionIcon{ display:grid; place-items:center; line-height:1; }
#actionIcon svg{ display:block; }



.navleft{
  display:flex;
  align-items:center;
  gap:8px;
}
.navbar.wfnav{
  grid-template-columns: 92px 1fr 92px;
}

.iconbtn.iconbtn-fwd{
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    background 120ms ease,
    border-color 120ms ease;
  opacity:1;
  transform:translateX(0) scale(1);
}
.iconbtn.iconbtn-fwd.is-hidden{
  opacity:0;
  transform:translateX(-6px) scale(0.75);
  pointer-events:none;
}

.dipOverlay, #dipOverlay{
  position:absolute;
  inset:0;
  z-index:120;
  display:none;
}
.dipOverlay.on, #dipOverlay.on{ display:block; }

.dipScrim, #dipScrim{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.62);
  backdrop-filter: blur(var(--blur)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.6);
}

.dipPanel{
  position:absolute;
  inset:0;
}

.dipInputCard input[type="number"]{
  width: 150px;
  font-size: 18px;
  padding: 6px 10px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25);
  color: rgba(235,235,245,0.92);
  font-weight: 900;
  outline:none;
}

.dipLabel{
  display:block;
  margin:0 0 6px 0;
  font-size:11px;
  font-weight:900;
  letter-spacing:0.2px;
  color: var(--text3);
  
}
.dipStage{
  display:grid;
  place-items:center;
}
#wfSub { display:none !important; }

.dipOverlay .pcb-board{
  background-color:#006837;
  background-image:
    radial-gradient(hsla(140, 60%, 30%, 0.8) 1px, transparent 1px),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 10px);
  background-size: 20px 20px, 100% 100%;
  width: min(360px, 100%);
  padding: 30px 18px;
  border-radius: 10px;
  position: relative;
  box-shadow:
    inset 0 0 80px rgba(0,0,0,0.7),
    0 30px 60px rgba(0,0,0,0.55),
    0 0 0 3px rgba(0, 50, 25, 1);
  display:flex;
  justify-content:center;
}

.dipOverlay .dip-wrapper{
  position: relative;
  width: 130px;
  padding: 2px 0;
  z-index: 10;
  filter: drop-shadow(0 15px 15px rgba(0,0,0,0.55));
}

.dipOverlay .dip-background-shape{
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(160deg, #3d342d 0%, #2b2520 100%);
  z-index: -1;
  clip-path: polygon(
    6px 0, 100% 0,
    100% calc(100% - 6px), calc(100% - 6px) 100%,
    0 100%, 0 6px
  );
  box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

.dipOverlay .dip-background-shape::before{
  content:'';
  position:absolute; top:0; left:6px; right:0; height:1px;
  background:rgba(255,255,255,0.15);
}
.dipOverlay .dip-background-shape::after{
  content:'';
  position:absolute; bottom:0; left:0; right:6px; height:1px;
  background:rgba(0,0,0,0.5);
}

.dipOverlay .dip-text{
  color:#d1bfa3;
  font-family:'Arial Narrow', sans-serif;
  font-size:11px;
  font-weight:bold;
  position:absolute;
  pointer-events:none;
  opacity:0.9;
}

.dipOverlay .txt-on{
  top:18px; right:6px;
  writing-mode:vertical-rl;
  text-orientation:upright;
  font-size:10px;
  letter-spacing:2px;
}
.dipOverlay .txt-cts{
  bottom:18px; right:6px;
  writing-mode:vertical-rl;
  text-orientation:upright;
  font-size:10px;
  letter-spacing:2px;
}

.dipOverlay .header-group{
  position:absolute;
  top:5px;
  left:18px;
  display:flex;
  align-items:center;
  gap:4px;
}
.dipOverlay .footer-group{
  position:absolute;
  bottom:5px;
  left:18px;
}

.dipOverlay .square-mark{
  width:7px;
  height:7px;
  background:#d1bfa3;
  box-shadow:0 1px 1px rgba(0,0,0,0.5);
}

.dipOverlay .pin-row{
  position:absolute;
  top:0; bottom:0;
  width:14px;
  display:flex;
  flex-direction:column;
  justify-content:space-evenly;
  padding:10px 0;
  z-index:-2;
}
.dipOverlay .pin-left{ left:-13px; }
.dipOverlay .pin-right{ right:-13px; }

.dipOverlay .pin{
  width:100%;
  height:12px;
  background: linear-gradient(to bottom, #666 0%, #eee 40%, #555 100%);
  border-radius:2px 0 0 2px;
  position:relative;
}
.dipOverlay .pin-right .pin{ border-radius:0 2px 2px 0; }

.dipOverlay .pin::after{
  content:'';
  position:absolute;
  width:10px; height:16px;
  background: radial-gradient(circle at 40% 40%, #fff, #aaa, #444);
  border-radius:50%;
  top:-2px;
  z-index:-1;
  box-shadow:0 2px 3px rgba(0,0,0,0.4);
}
.dipOverlay .pin-left .pin::after{ left:-7px; }
.dipOverlay .pin-right .pin::after{ right:-7px; }

.dipOverlay .sw-row{
  height:24px;
  border-bottom:1px solid rgba(0,0,0,0.3);
  border-top:1px solid rgba(255,255,255,0.04);
  display:flex;
  align-items:center;
  padding:0 12px;
  position:relative;
}

.dipOverlay .sw-num{
  color:#d1bfa3;
  font-size:13px;
  font-weight:bold;
  width:15px;
  margin-right:8px;
  font-family:Arial, sans-serif;
}

.dipOverlay .sw-track{
  flex-grow:1;
  background:#0a0a0a;
  height:16px;
  position:relative;
  box-shadow: inset 0 2px 5px rgba(0,0,0,1);
  margin-right:15px;
  border-radius:1px;
}

.dipOverlay .toggle{
  width:24px;
  height:16px;
  background:#ecece6;
  position:absolute;
  top:0;
  left:0;
  cursor:pointer;
  transition:left 0.15s ease-in-out;
  box-shadow:
    inset 1px 1px 1px rgba(255,255,255,1),
    inset -1px -1px 2px rgba(0,0,0,0.3),
    2px 2px 4px rgba(0,0,0,0.6);
  z-index:5;
}
.dipOverlay .toggle::after{
  content:'';
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:4px; height:8px;
  background: rgba(0,0,0,0.15);
  border-radius:2px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.5);
}

.dipOverlay .pcb-value{
  position:absolute;
  right:-65px;
  top:50%;
  transform:translateY(-50%);
  color: rgba(220, 230, 220, 0.75);
  font-family: Consolas, Monaco, monospace;
  font-weight:bold;
  font-size:14px;
  text-shadow:0 1px 2px rgba(0,0,0,0.6);
  width:40px;
  text-align:left;
  pointer-events:none;
}

.pill.pill-badge{
  min-width: 118px;
  justify-content:center;
  padding:8px 14px;
  line-height:1;
}

.dipOverlay .sw-row.on .toggle{
  left: calc(100% - 24px);
}

#emailGate{
  position:absolute;
  inset:0;
  z-index:200;
  display:none;
}
#emailGate.on{ display:block; }

#emailGate .emailScrim{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.62);
  backdrop-filter: blur(var(--blur)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.6);
}

#emailGate .emailPanel{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:calc(var(--safe-top) + 18px) var(--s-5) calc(var(--safe-bot) + 18px) var(--s-5);
}

#emailGate .emailCard{
  width:min(620px, 100%);
}

.emailInput{
  width:100%;
  height:54px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(0,0,0,0.25);
  color:rgba(235,235,245,0.92);
  font-weight:900;
  font-size:16px;
  padding:0 14px;
  outline:none;
}

.emailInput:focus{
  border-color:rgba(10,132,255,0.40);
  box-shadow:0 0 0 2px rgba(10,132,255,0.14);
}

.emailErr{
  margin-top:8px;
  min-height:16px;
  font-size:12px;
  font-weight:850;
  color:var(--bad);
  letter-spacing:-0.1px;
}

.emailActions{
  margin-top:14px;
  display:grid;
  gap:10px;
}
/* =========================================
   Wire row: TRUE optical centering
   Paste at END of CSS
   ========================================= */

/* 1) Reset any previous nudges (important) */
.wirelist .wirearrow,
.wirelist .pill.mini,
.wirelist .wireidx{
  transform: none;
}

/* 2) Hard-center all cells with consistent height */
.wirelist .wirerow{
  display: flex;
  align-items: center;
}

.wirelist .pill.mini,
.wirelist .wireidx{
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.wirelist .wirearrow{
  width: 22px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.wirelist .wireto{
  display: flex;
  align-items: center;
  min-height: 26px;
}

/* 3) Optical centering: cap-based nudge (scales with font)
      Fallback to px for older browsers */
:root{ --wire-optical-nudge: -0.50cap; }
@supports not (transform: translateY(1cap)){
  :root{ --wire-optical-nudge: -3px; }
}

.wirelist .pill.mini,
.wirelist .wireidx,
.wirelist .wirearrow{
  transform: translateY(var(--wire-optical-nudge));
}

.introOverlay{
  position:absolute;
  inset:0;
  z-index:300;              /* above emailGate (200) */
  display:none;
  background:#000;
}

.introOverlay.on{ display:block; }

.introVideo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.introTap{
  position:absolute;
  left:50%;
  bottom:calc(28px + var(--safe-bot));
  transform:translateX(-50%);
  height:44px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(0,0,0,0.55);
  color:rgba(255,255,255,0.92);
  font-weight:900;
  cursor:pointer;
}

.introTap.is-hidden{ display:none; }

/* --- Intro Video Layer --- */
#introLayer {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 99999;
  display: none;
  align-items: center; /* Centers video vertically */
  justify-content: center;
}
#introLayer.active { display: flex; }

#introVideo {
  width: 100%;       /* Fits phone width */
  height: auto;      /* Maintains 16:9 aspect ratio */
  max-height: 100%;
  object-fit: contain;
}

/* --- Language Selection UI --- */
.lang-grid { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin-top: 20px; }
.lang-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
}
.lang-btn:active { transform: scale(0.96); background: rgba(255,255,255,0.15); }
.lang-flag { font-size: 32px; }
.lang-label { font-size: 15px; font-weight: 700; color: #fff; }

/* --- Language & Gate Overlay Fixes --- */
#langGate {
  position: absolute;
  inset: 0;
  z-index: 210; /* Above emailGate (200) */
  display: none;
}
#langGate.on { display: block !important; }

/* Ensure the intro video is always on top */
#introLayer { z-index: 99999; }

/* Allow admin name to wrap */
.admin-worker {
  white-space: normal !important;
  line-height: 1.2 !important;
}

/* --- Fix Layering --- */
#langGate {
  position: absolute;
  inset: 0;
  z-index: 210; /* Must be higher than #emailGate (200) */
  display: none;
}
#langGate.on { display: block !important; }

/* Intro video must be top-most */
#introLayer { z-index: 99999; }
/* ---- ABM FieldSync app-specific (built on the same tokens) ---- */
.fs-input{
  width:100%; padding:12px 14px; border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,0.12); background:rgba(0,0,0,0.28);
  color:var(--text); font-family:var(--font); font-size:14px; font-weight:600;
  letter-spacing:-0.15px; outline:none;
  transition:border-color 140ms ease, background 140ms ease;
}
.fs-input::placeholder{ color:var(--text3); }
.fs-input:focus{ border-color:rgba(10,132,255,0.55); background:rgba(0,0,0,0.40); }
textarea.fs-input{ resize:vertical; line-height:1.4; }
textarea.fs-mono{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; font-weight:500; }

.fs-pick{
  border:1.5px dashed rgba(255,255,255,0.20); background:rgba(255,255,255,0.03);
  border-radius:var(--r-lg); padding:14px; text-align:left; cursor:pointer; width:100%;
  transition:border-color 140ms ease, background 140ms ease;
}
.fs-pick:active{ transform:translateY(1px); }
.fs-pick.set{ border-color:rgba(48,209,88,0.45); background:rgba(48,209,88,0.08); border-style:solid; }
.fs-pick .lab{ font-size:10px; font-weight:900; letter-spacing:0.2px;  color:var(--text3); }
.fs-pick .val{ font-size:13px; font-weight:700; color:var(--text2); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.fs-photo-thumb{
  width:74px; height:74px; border-radius:var(--r-md); object-fit:cover;
  border:1px solid rgba(255,255,255,0.14); flex:0 0 auto;
}
.fs-photo-req{
  width:100%; border:1.5px dashed rgba(255,69,58,0.45); background:rgba(255,69,58,0.10);
  border-radius:var(--r-md); padding:14px; color:var(--bad); font-weight:900; font-size:13px;
  letter-spacing:-0.15px; display:flex; align-items:center; justify-content:center; gap:8px;
  cursor:pointer; transition:transform 120ms ease;
}
.fs-photo-req:active{ transform:translateY(1px); }
.fs-divider{ height:1px; background:rgba(255,255,255,0.08); margin:18px 0; border:0; }
.fs-meta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4px 14px; margin-top:12px; }
.fs-meta-grid .k{ color:var(--text3); font-weight:800; }
.fs-spin{ width:18px; height:18px; border-radius:999px; border:2px solid rgba(255,255,255,0.25); border-top-color:#fff; display:inline-block; animation:fsSpin 0.7s linear infinite; vertical-align:-3px; }
@keyframes fsSpin{ to{ transform:rotate(360deg); } }
@keyframes fsPop{ 0%{ transform:scale(.96); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
.fs-pop{ animation:fsPop 240ms var(--ease,cubic-bezier(.2,.8,.2,1)); }

input[type=checkbox]{ width:21px; height:21px; accent-color:var(--accent); flex:0 0 auto; }
.fs-seg{ display:flex; gap:6px; background:rgba(0,0,0,0.28); border:1px solid var(--hair); border-radius:14px; padding:4px; margin:14px var(--s-5) 0; }
.fs-seg button{
  flex:1; height:34px; border:0; border-radius:11px; background:transparent; color:var(--text3);
  font-family:var(--font); font-size:12px; font-weight:900; letter-spacing:-0.1px; cursor:pointer;
  transition:background 160ms ease, color 160ms ease;
}
.fs-seg button.on{ background:rgba(10,132,255,0.16); color:#fff; box-shadow:inset 0 0 0 1px rgba(10,132,255,0.32); }
.fs-listrow{
  display:flex; align-items:flex-start; gap:11px; padding:11px 12px; border-radius:16px;
  background:rgba(0,0,0,0.18); border:1px solid var(--hair); cursor:pointer; margin-bottom:9px;
  transition:border-color 120ms ease, background 120ms ease;
}
.fs-listrow:active{ transform:translateY(1px); border-color:var(--hair2); }
.fs-listrow .txt{ font-size:13px; font-weight:700; color:var(--text2); line-height:1.32; letter-spacing:-0.1px; }
.fs-listrow input:checked ~ .txt{ color:var(--good); }
.fs-link{ color:var(--accent); font-weight:900; font-size:13px; cursor:pointer; background:none; border:0; padding:0; }
.fs-unit-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); gap:8px; margin-top:12px; }