/* ============================================================
   DeckIQ in the Night shift look (27 Oct 2026; Jared picked the mockup in DeckIQ/mockups/deckiq-night-20261027/,
   dark and light, with the "middle ground" glow). Loaded after home-night.css on deckiq.html's body.night; it only
   re-colors and re-types DeckIQ's own classes, nothing in deckiq.js depends on it.
   - The shell (header, rail, cards, tiles) is Night shift: deep navy glass in dark, white glass in light, Sora + Inter + JetBrains Mono.
   - The board and the 3D view stay true color: the drawing is the product.
   - Cyan = the action (Confirm, Find it, the selected view), amber = the step that wants you, no green in the chrome.
   - The glow, the middle ground: in light mode a moving trace only on the step card that wants you (amber), the price tile and
     the Confirm that follows you (cyan); every other card has a still cyan edge glow. In dark mode the same boxes glow, still.
   ============================================================ */
body.night{
  --page:#04070F; --deep:#070C18; --panel:#0A1120; --panel-2:#0D1629; --card:#0A1120; --edge:rgba(160,220,255,.14);
  --line:rgba(160,220,255,.12); --line-2:rgba(160,220,255,.2); --ink:#EAF2FF; --ink-2:#C9D7EE; --ink-3:#8EA0BE;
  --blue:#22C9F0; --blue-lit:#7DF3FF; --blue-deep:#0B8FB0; --blue-ink:#7DF3FF; --mint:#3BE8FF; --amber:#FFB547;
  --nc-btn:linear-gradient(180deg,#7DF3FF,#22C9F0); --nc-btnInk:#03121A; --nc-glow:0 8px 26px -8px rgba(59,232,255,.7);
  background:var(--n-bg); font-family:Inter,Figtree,system-ui,sans-serif;
}
html[data-mode="light"] body.night{
  --page:#F3F6FB; --deep:#E9EEF6; --panel:#FFFFFF; --panel-2:#F7F9FC; --card:#FFFFFF; --edge:rgba(15,23,42,.1);
  --line:rgba(15,23,42,.09); --line-2:rgba(15,23,42,.15); --ink:#0B1324; --ink-2:#24324B; --ink-3:#55647D;
  --blue:#0AA5C8; --blue-lit:#22C9F0; --blue-deep:#07809E; --blue-ink:#07809E; --mint:#0AA5C8; --amber:#D98200;
  --nc-glow:0 8px 22px -10px rgba(10,165,200,.6);
}
/* type */
body.night :is(.iqHead h1,.q h3,.qHead h3,#iqFollow span){font-family:Sora,Outfit,sans-serif; letter-spacing:-.03em}
body.night .iqHead h1{font-size:34px; font-weight:800}
body.night .q h4,body.night .iqRail button,body.night .iqBadge{font-family:"JetBrains Mono","IBM Plex Mono",monospace; letter-spacing:.08em}
body.night .q h4{color:var(--n-cT); font-size:11.5px}
body.night .iqBadge{color:var(--n-cT); background:transparent; border-color:var(--line-2)}

/* the header: the price as a glass tile with a cyan number, the progress as a cyan line */
body.night :is(.dqTotal > div:first-child,.dqTotalBox,.dqTot){background:linear-gradient(180deg,var(--n-glass1),var(--n-glass2))!important; border:1px solid var(--line-2)!important; border-radius:16px!important; box-shadow:var(--n-shadow)}
body.night .dqTotal :is(b,strong,.big,.dqTotV){color:var(--n-cT)!important; font-family:Sora,sans-serif}
body.night .dqTotal :is(small,span){color:var(--ink-3)!important}
body.night :is(.dqProg i,.dqProg b,.iqProgBar i,.dqHeadBar i,progress::-webkit-progress-value){background:linear-gradient(90deg,#22C9F0,#7DF3FF)!important; box-shadow:0 0 12px rgba(59,232,255,.6)}
body.night .iqAddr input{background:var(--panel)!important; border-color:var(--line-2)!important; color:var(--ink); border-radius:12px}
body.night .iqAddr .btn,body.night .btn.gloss{background:var(--nc-btn)!important; color:var(--nc-btnInk)!important; box-shadow:var(--nc-glow)!important; border:0}
body.night .btn.gloss::before{display:none}

/* the frame round the workspace, the rail, the tile column */
body.night .iqApp{background:linear-gradient(180deg,var(--n-glass1),var(--n-glass2)); border:1px solid var(--line)!important; border-radius:22px; box-shadow:var(--n-shadow)}
body.night .iqRail button{font-size:10px; color:var(--ink-3); border-radius:12px}
body.night .iqRail button[aria-current="step"],body.night .iqRail button.on{background:rgba(255,181,71,.1)!important; color:var(--n-amT)!important; box-shadow:inset 0 0 0 1px rgba(255,181,71,.45)!important}
body.night .iqRail button .ck{background:var(--n-c)!important; color:#03121A!important}
body.night :is(.iqTileCol,.dqTiles) button:not(#iqHelpBtn){border-radius:12px}   /* the ? stays round */
body.night :is(.iqTileCol button[aria-pressed="true"],.iqTileCol button.on){background:rgba(59,232,255,.12)!important; color:var(--n-cT)!important; box-shadow:inset 0 0 0 1px rgba(59,232,255,.5)!important}

/* the step cards: glass, rounder; the step that wants you lit amber */
body.night .q{background:linear-gradient(180deg,var(--n-glass1),var(--n-glass2))!important; border:1px solid var(--line)!important; border-radius:20px!important; box-shadow:var(--n-shadow),inset 0 1px 0 rgba(255,255,255,.06)}
body.night .q.wants{border-color:rgba(255,181,71,.55)!important; box-shadow:var(--n-shadow),0 0 0 1px rgba(255,181,71,.25),0 0 40px -18px rgba(255,181,71,.6)!important}
body.night :is(.picks button,.stSet,.tile,.dRow,.hwRow){background:var(--n-win)!important; border-color:var(--line)!important; border-radius:14px!important}
body.night .picks button[aria-pressed="true"],body.night .seg button[aria-pressed="true"]{background:rgba(59,232,255,.12)!important; color:var(--ink)!important; box-shadow:inset 0 0 0 1.5px rgba(59,232,255,.6)!important; border-color:transparent!important}
body.night .seg{background:var(--n-win)!important; border-color:var(--line)!important; border-radius:12px}

/* the actions: Confirm and the like in cyan glow (no green), quiet buttons as glass */
body.night .okBtn,body.night #iqFollow .okBtn,body.night .q .okBtn.next{background:var(--nc-btn)!important; color:var(--nc-btnInk)!important; box-shadow:var(--nc-glow)!important; border:0!important; border-radius:11px!important; font-family:Inter,sans-serif}
body.night :is(.iqSmall,.stepNav button,.dqNext,.dqBack){background:var(--n-win)!important; border:1px solid var(--line-2)!important; color:var(--ink)!important; border-radius:11px!important}
body.night #iqFollow{background:var(--n-win); border-color:var(--line-2); backdrop-filter:blur(14px); box-shadow:var(--n-shadow)}
body.night #iqFollow span::before{color:var(--n-am)}
/* the add-on prices keep their meaning, in the new palette: more = amber, less = cyan */
/* 20261030q (Jared, 30 Oct: "we settled on green as saving money and red as costing more"): costs more = red, saves = green, in both modes */
body.night :is(.dqAdd,.addBtn.more,.wiAdd){color:var(--n-addT)!important; border-color:var(--n-addB)!important; background:var(--n-addBg)!important}
body.night :is(.dqSave,.addBtn.less,.wiSave){color:var(--n-saveT)!important; border-color:var(--n-saveB)!important; background:var(--n-saveBg)!important}

/* the view tabs and the board frame */
body.night :is(.iqViews,.dqViews) button[aria-pressed="true"]{background:var(--nc-btn)!important; color:var(--nc-btnInk)!important}
/* pass 2: the pieces that carry their own blue and green */
body.night .dqTotBox{background:linear-gradient(180deg,var(--n-glass1),var(--n-glass2))!important; border:1px solid rgba(59,232,255,.35)!important; border-radius:16px!important; box-shadow:var(--n-shadow),0 0 40px -20px rgba(59,232,255,.6)!important}
body.night .dqTotV{color:var(--n-cT)!important; font-family:Sora,sans-serif; letter-spacing:-.03em}
body.night .dqTotBox :is(small,span:not(.dqTotV)){color:var(--ink-3)!important; font-family:"JetBrains Mono",monospace}
body.night .dqTotal :is(.dqInst,.dqMat,button:not(.dqTotBox),label){border-radius:10px}
body.night .dqTotal :is(button,label)[aria-pressed="true"],body.night .dqTotal .on{background:var(--nc-btn)!important; color:var(--nc-btnInk)!important}
body.night .dqHeadProg{color:var(--n-cT)!important; font-family:"JetBrains Mono",monospace; font-size:12px}
body.night .dqHeadProg .bar{background:rgba(59,232,255,.12)!important}
body.night .dqHeadProg .bar *{background:linear-gradient(90deg,#22C9F0,#7DF3FF)!important; box-shadow:0 0 12px rgba(59,232,255,.55)}
body.night :is(.iqSeg,.iqTools){background:var(--n-win)!important; border-color:var(--line)!important; border-radius:12px}
body.night :is(.iqSeg,.iqTools) button{color:var(--ink-2)}
body.night :is(.iqSeg button[aria-pressed="true"],.iqSeg button.on,.iqTools button[aria-pressed="true"],.iqTools button.on){background:rgba(59,232,255,.14)!important; color:var(--n-cT)!important; box-shadow:inset 0 0 0 1.5px rgba(59,232,255,.6)!important}
body.night .iqTools.dark.iconTools{background:var(--n-win)!important; border:1px solid var(--line)!important}
body.night .iqWsBar{background:transparent!important; border-color:var(--line)!important}
body.night .iqWork{background:transparent!important}
body.night .iqApp{background:linear-gradient(180deg,var(--n-glass1),var(--n-glass2))!important}
body.night .iqRail{background:transparent!important}
body.night .iqRail button.on{background:rgba(255,181,71,.1)!important; color:var(--n-amT)!important; box-shadow:inset 0 0 0 1px rgba(255,181,71,.5)!important}
body.night .iqRail button.now::before{background:var(--n-am)}
body.night .dqFrameBtn{background:var(--n-win)!important; border-color:rgba(59,232,255,.45)!important; color:var(--n-cT)!important; border-radius:14px!important}
body.night .dqFrameBtn *{color:inherit!important}
body.night .dqQuick{color:var(--ink-2)!important}
body.night .dqWhat{color:var(--n-cT)!important}
body.night .dqTotSw{border-color:var(--line-2)!important; border-radius:11px!important}
body.night .dqTotSw button{font-family:Inter,sans-serif}
body.night .dqTotSw button[aria-pressed="true"]{background:var(--nc-btn)!important; color:var(--nc-btnInk)!important}
html[data-mode="light"] body.night .iqWsBar{background:var(--panel-2)!important}
body.night .iqWsBar{background:rgba(4,8,16,.35)!important}

/* the middle ground: a still cyan edge on every card; the moving trace only where your eye should go */
body.night .q:not(.wants){box-shadow:var(--n-shadow),0 0 0 1px rgba(59,232,255,.14),0 0 26px -14px rgba(59,232,255,.45)!important}
html[data-mode="light"] body.night .q:not(.wants){box-shadow:0 18px 40px -26px rgba(15,23,42,.3),0 0 0 1px rgba(59,232,255,.28),0 0 22px -10px rgba(59,232,255,.45)!important}
body.night #iqFollow{box-shadow:var(--n-shadow),0 0 0 1px rgba(59,232,255,.35),0 0 30px -10px rgba(59,232,255,.6)}
body.night :is(.q.wants,.dqTotBox,#iqFollow){position:relative}
body.night #iqFollow{position:fixed}
html[data-mode="light"] body.night .q.wants::after{content:''; position:absolute; inset:-2px; border-radius:inherit; padding:2px; pointer-events:none; z-index:3;
  background:conic-gradient(from var(--tr),rgba(59,232,255,.22) 0 55%,rgba(59,232,255,.5) 70%,#3BE8FF 84%,#fff 87%,#3BE8FF 90%,rgba(59,232,255,.22) 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:nTrace 6s linear 2 both}   /* two loops when the box lights up, then a still glow: a trace that never stops costs battery and
     frames on older laptops (and starved the test browser), and the eye should settle; a new step card starts it again.
     No drop-shadow filter: an animated filter is costly. */
html[data-mode="light"] body.night .q.wants::after{background:conic-gradient(from var(--tr),rgba(255,181,71,.22) 0 55%,rgba(255,181,71,.55) 70%,#FFB547 84%,#fff 87%,#FFB547 90%,rgba(255,181,71,.22) 96%);
  animation-duration:7s}
html[data-mode="light"] body.night .q.wants{box-shadow:0 18px 40px -26px rgba(15,23,42,.3),0 0 22px -6px rgba(255,181,71,.55)!important}
/* one trace per screen (27 Oct): the price box and the phone's Confirm keep their still glow, no trace */
@media (prefers-reduced-motion:reduce){ html[data-mode="light"] body.night .q.wants::after{animation:none} }

/* the phone's step chips and progress line (the panel's own copy of the steps) */
body.night .iqSteps button{border-radius:999px; font-family:Inter,sans-serif}
body.night .iqSteps button.done{color:var(--n-cT)!important; border-color:rgba(59,232,255,.45)!important; background:rgba(59,232,255,.08)!important}
body.night .iqSteps button.now{color:var(--n-amT)!important; border-color:rgba(255,181,71,.6)!important; background:rgba(255,181,71,.08)!important}
body.night .iqProg .bar{background:rgba(59,232,255,.12)!important}
body.night .iqProg .bar i{background:linear-gradient(90deg,#22C9F0,#7DF3FF)!important; box-shadow:0 0 12px rgba(59,232,255,.55)}
body.night .iqProg b{color:var(--n-cT)}

/* ============================================================
   28 Oct (cloud): the page below the design area (Jared's ss3/ss4 in DeckIQ/screens-20261028/). Design review, the shopping
   and cut lists, the plan set viewer and buy box, the build manual view, Get quotes, the gallery entry, the legal bars, and the
   pop-ups, drawers, What if… and Saved decks. Same rules as above: glass panels, cyan = the action and the prices, amber =
   caution, no green or old blue in the chrome. The sheets themselves (the white letter pages, the PDF) stay print drawings.
   No new animation: every panel gets the still cyan edge, nothing loops.
   ============================================================ */
/* deckiq.css sets its own --line-2/--ink-3 (and a green --mint in light) on .iqWrap: the old navy borders. Night tokens here. */
body.night .iqWrap{--line-2:rgba(160,220,255,.2); --ink-3:#8EA0BE; --mint:#3BE8FF;
  --nb-panel:linear-gradient(180deg,var(--n-glass1),var(--n-glass2)) 0 0/100% 420px no-repeat,var(--n-glass2);   /* the sheen on the top 420 px: a
     gradient stretched down a 2,000 px shopping-list column rasterized as gray bands in Chromium's software renderer */
  --nb-solid:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015)),#0A1120;
  --nb-edge:var(--n-shadow),0 0 0 1px rgba(59,232,255,.12),0 0 26px -14px rgba(59,232,255,.42)}
html[data-mode="light"] body.night .iqWrap{--line-2:rgba(15,23,42,.15); --line:rgba(15,23,42,.09); --ink-2:#24324B; --ink-3:#55647D; --mint:#07809E; --amber:#D98200;
  --nb-solid:linear-gradient(180deg,#FFFFFF,#F6FCFF);
  --nb-edge:0 18px 40px -26px rgba(15,23,42,.3),0 0 0 1px rgba(59,232,255,.28),0 0 22px -10px rgba(59,232,255,.45)}
/* the pop-ups and drawers sit outside .iqWrap: the same tokens on body */
body.night{--nb-solid:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015)),#0A1120; --nb-edge:var(--n-shadow),0 0 0 1px rgba(59,232,255,.16),0 0 30px -12px rgba(59,232,255,.45)}
html[data-mode="light"] body.night{--nb-solid:linear-gradient(180deg,#FFFFFF,#F6FCFF); --nb-edge:0 24px 60px -24px rgba(15,23,42,.35),0 0 0 1px rgba(59,232,255,.3),0 0 26px -10px rgba(59,232,255,.5)}

/* section heads: the kicker as the site's mono eyebrow, the title in Sora */
body.night .iqSec .kick{font:700 12px/1 "JetBrains Mono","IBM Plex Mono",monospace; letter-spacing:.14em; color:var(--n-cT)}
body.night :is(.iqSec > h2,.bomHead h2){font-family:Sora,Outfit,sans-serif; font-weight:700; letter-spacing:-.03em}
body.night :is(.iqSec > p.sub,.bomHead p.sub){color:var(--ink-2)}
/* every panel down here: glass, round, the still cyan edge */
body.night :is(.card2,.grp,.buyBox,#iqQuotes .dqCard,.cmpBox){background:var(--nb-panel)!important; border:1px solid var(--line)!important; border-radius:18px!important; box-shadow:var(--nb-edge)}
body.night :is(.card2,.buyBox) h3,body.night .grp h3,body.night #iqQuotes .dqHead b{font-family:Sora,Outfit,sans-serif; letter-spacing:-.02em}
body.night .grp h3 span{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.04em; color:var(--ink-3)}
body.night .item{border-top-color:var(--line)}
/* styles.css's blue .note box, down here and in the pop-ups: a quiet glass well */
body.night :is(.iqSec,.iqPop,.dqDrawer) .note{background:var(--n-win); border:1px solid var(--line); color:var(--ink-2)}
body.night :is(.iqSec,.iqPop,.dqDrawer) .note b{color:var(--ink)}
body.night .item b{font-family:"JetBrains Mono",monospace; color:var(--n-cT)}

/* design review: the drawing stays true color; the tables and level tabs re-colored */
body.night .card2 .lvTabs button{font-family:Inter,sans-serif; border-color:var(--line-2); border-radius:10px}
body.night .card2 .lvTabs button[aria-pressed="true"]{background:var(--nc-btn)!important; color:var(--nc-btnInk)!important; border-color:transparent}
body.night .rvTbl th{font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.1em; border-bottom-color:var(--line-2)}
body.night .rvTbl td{border-bottom-color:var(--line)}
body.night .rvTbl td.n{font-family:"JetBrains Mono",monospace; font-weight:500}
body.night .rvTbl tr:hover td{background:rgba(59,232,255,.06)}
body.night .rvTbl tr.sel td{background:rgba(255,181,71,.12)}
body.night .rvTbl .pill{font-family:"JetBrains Mono",monospace; font-weight:600; background:rgba(59,232,255,.1); color:var(--n-cT); box-shadow:inset 0 0 0 1px rgba(59,232,255,.3)}
body.night .rvTbl .pill.house{background:rgba(255,181,71,.12); color:var(--n-amT); box-shadow:inset 0 0 0 1px rgba(255,181,71,.4)}
body.night .rvTbl .pill.curve{background:rgba(59,232,255,.14); color:var(--n-cT)}
body.night .svgWrap{border-radius:14px}

/* the shopping list: the price like the header's, the flags in the night palette */
body.night .bomPrice b{font-family:Sora,sans-serif; font-weight:700; letter-spacing:-.03em; color:var(--n-cT)}
body.night .bomPrice span{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--ink-3)}
body.night .bomCsv{color:var(--ink-3)}
body.night .grp .flag,body.night .flags .flag{border-radius:12px}
body.night .flag.review{color:var(--n-amT); background:rgba(255,181,71,.08); border-color:rgba(255,181,71,.45)}
body.night .flag.note{background:var(--n-win); border-color:var(--line)}

/* the legal bars (the planning list's and the page's): a caution, so amber, but calm glass */
body.night .legal{color:var(--ink-2)!important; background:linear-gradient(180deg,rgba(255,181,71,.07),rgba(255,181,71,.02))!important; border:1px solid rgba(255,181,71,.32)!important; border-radius:16px!important; padding:12px 16px!important; box-shadow:inset 3px 0 0 var(--n-am)}
body.night .legal b{color:var(--n-amT)!important}
body.night .legal a{color:var(--n-cT)}
html[data-mode="light"] body.night .legal{background:linear-gradient(180deg,#FFFFFF,#FFFBF3)!important; border-color:rgba(217,130,0,.35)!important; box-shadow:inset 3px 0 0 #D98200,0 14px 34px -24px rgba(15,23,42,.3)}

/* the plan set / build manual tiles above the viewer */
body.night .viewTabs button{font-family:Sora,sans-serif; font-weight:700; letter-spacing:-.02em; background:var(--nb-panel)!important; border:1px solid var(--line-2)!important; border-radius:18px; box-shadow:var(--nb-edge)}
body.night .viewTabs button small{font-family:Inter,sans-serif; letter-spacing:0; font-weight:500}
body.night .viewTabs button svg{color:var(--n-c)}
body.night .viewTabs button .vtGo{font-family:Inter,sans-serif; letter-spacing:0; color:var(--n-cT); border:1px solid rgba(59,232,255,.45); border-radius:10px}
body.night .viewTabs button:hover{border-color:rgba(59,232,255,.55)!important; box-shadow:var(--nb-edge),0 0 30px -10px rgba(59,232,255,.55)}
body.night .viewTabs button.on{border-color:rgba(59,232,255,.6)!important; background:linear-gradient(180deg,rgba(59,232,255,.12),rgba(59,232,255,.03))!important; box-shadow:inset 0 0 0 1px rgba(59,232,255,.35),0 0 34px -12px rgba(59,232,255,.6)}
body.night .viewTabs button.on .vtGo{background:var(--nc-btn); color:var(--nc-btnInk); border-color:transparent}
body.night .viewTabs button em{font-family:"JetBrains Mono",monospace; color:#1A1203; background:var(--n-am)}   /* "New" wants you: amber, not green */

/* the viewer: a dark well (a light one in light mode) round the white sheet; cyan arrows; the zoom bar and sheet chips as glass */
body.night #iqPlans .viewer{background:rgba(4,8,16,.6); border:1px solid var(--line); border-radius:20px; box-shadow:var(--nb-edge),inset 0 1px 0 rgba(255,255,255,.04)}
html[data-mode="light"] body.night #iqPlans .viewer{background:#E4ECF5; border-color:rgba(10,140,190,.2)}
body.night #iqPlans .viewer.dqFull{background:var(--n-bg); border-radius:0}
body.night .vArrow{background:var(--nc-btn); color:var(--nc-btnInk); box-shadow:var(--nc-glow); font-weight:600}
body.night .vArrow:disabled{background:var(--n-win); color:var(--ink-3); box-shadow:inset 0 0 0 1px var(--line-2); opacity:.6}
body.night .dqZoomBar button{font-family:Inter,sans-serif; font-weight:600; color:var(--ink); background:var(--n-win); border:1px solid var(--line-2); border-radius:11px; backdrop-filter:blur(8px)}
body.night .dqZoomBar button:hover:not(:disabled){border-color:rgba(59,232,255,.6); color:var(--n-cT)}
body.night .dqZoomBar button[aria-pressed="true"]{background:var(--nc-btn); color:var(--nc-btnInk); border-color:transparent}
html[data-mode="light"] body.night .dqZoomBar button{background:#FFFFFF}
html[data-mode="light"] body.night .dqZoomBar button[aria-pressed="true"]{background:var(--nc-btn)}
body.night .pages button{font-family:Inter,sans-serif; font-weight:600; color:var(--ink-2); border:1px solid var(--line-2); border-radius:10px; background:var(--n-win)}
body.night .pages button:hover{border-color:rgba(59,232,255,.55); color:var(--ink)}
body.night .pages button i{font-family:"JetBrains Mono",monospace; color:var(--ink-3); opacity:1}
body.night .pages button.paid i{color:var(--n-cT)}
body.night .pages button.on{background:var(--nc-btn); color:var(--nc-btnInk); border-color:transparent; box-shadow:var(--nc-glow)}
body.night .pages button.on i{color:var(--nc-btnInk); opacity:.75}
html[data-mode="light"] body.night .pages button{background:#FFFFFF}
html[data-mode="light"] body.night .pages button.on{background:var(--nc-btn)}

/* the buy box: tiles as glass wells, the prices cyan (they were green), the address note amber */
body.night .buyBox .tier{background:var(--n-win)!important; border:1px solid var(--line-2)!important; border-radius:14px; transition:border-color .15s,box-shadow .15s}
body.night .buyBox .tier:hover{border-color:rgba(59,232,255,.6)!important; box-shadow:0 0 0 1px rgba(59,232,255,.25),0 0 26px -10px rgba(59,232,255,.6)}
body.night .buyBox .tier b{font-family:Sora,sans-serif; font-weight:600; letter-spacing:-.01em}
body.night .buyBox .tier .pr{font-family:Sora,sans-serif; font-weight:700; letter-spacing:-.03em; color:var(--n-cT)!important}
body.night .buyBox{grid-template-columns:minmax(0,1fr)}   /* a wide price tag never pushes the box past its column */
body.night .buyBox .tier .pr small{font-family:"JetBrains Mono",monospace; font-weight:500; font-size:9.5px; letter-spacing:.04em}
body.night .buyBox .tier.have{border-color:rgba(59,232,255,.45)!important; background:rgba(59,232,255,.06)!important}
body.night .buyBox .tier.have .pr,body.night .buyBox .okLine{color:var(--n-cT)!important}
html[data-mode="light"] body.night .buyBox .tier{background:#F7FAFD!important}
body.night .buyBox .engNote.lockNote{color:var(--ink)!important; background:rgba(255,181,71,.08)!important; border:1px solid rgba(255,181,71,.5)!important; border-radius:14px; box-shadow:inset 3px 0 0 var(--n-am)}
body.night .buyBox .engNote.lockNote b{color:var(--n-amT)}
html[data-mode="light"] body.night .buyBox .engNote.lockNote{background:#FFF8EA!important; border-color:rgba(217,130,0,.45)!important}
body.night .buyBox .engNote:not(.lockNote){border-radius:14px}
body.night .lockNote:not(.engNote){border:1px solid rgba(59,232,255,.45); background:rgba(59,232,255,.08); border-radius:12px}
body.night .buyBox .mirrorLine{background:rgba(59,232,255,.06)!important; border-color:rgba(59,232,255,.35)!important}
body.night .buyBox .ownerRow input,body.night .galleryIn input,body.night #iqQuotes .dqForm :is(input,textarea),body.night #iqPopB .probNote,body.night .vsRow input{background:var(--n-win)!important; border:1px solid var(--line-2)!important; border-radius:12px!important; color:var(--ink); font-family:Inter,sans-serif}
html[data-mode="light"] body.night :is(.buyBox .ownerRow input,.galleryIn input,#iqQuotes .dqForm input,#iqQuotes .dqForm textarea,#iqPopB .probNote,.vsRow input){background:#FFFFFF!important}
body.night :is(.buyBox .ownerRow input,.galleryIn input,#iqQuotes .dqForm input,#iqQuotes .dqForm textarea,#iqPopB .probNote,.vsRow input):focus{outline:0; border-color:rgba(59,232,255,.7)!important; box-shadow:0 0 0 3px rgba(59,232,255,.18)}
body.night .buyBox .planStatus.ok{color:var(--n-cT)!important; border-color:rgba(59,232,255,.5)!important; background:rgba(59,232,255,.08)!important}
body.night .buyBox .logBtn{background:var(--n-win); border-radius:11px; font-family:Inter,sans-serif}
body.night .buyBox .logBtn:hover{border-color:rgba(59,232,255,.6)}
body.night .buyBox .manRow{border-top-color:var(--line)}
body.night .buyBox .fine a,body.night .galleryRow a{color:var(--n-cT)}
body.night .workRow{background:rgba(59,232,255,.07); border-color:rgba(59,232,255,.35); border-radius:14px}
/* the gallery entry: a dashed cyan well, Enter it the action */
body.night .galleryRow{border:1px dashed rgba(59,232,255,.35); border-radius:16px; background:rgba(59,232,255,.03); grid-template-columns:minmax(0,1fr)}
body.night .galleryIn input{width:0}   /* flex grows it; Inter's wider letters made its default 20-character width push Enter it out of the box */
body.night .galleryRow > b{font-family:Sora,sans-serif; letter-spacing:-.01em}
body.night .galleryMore summary{color:var(--n-cT); cursor:pointer}
body.night .galleryIn .iqSmall{background:var(--nc-btn)!important; color:var(--nc-btnInk)!important; border:0!important; box-shadow:var(--nc-glow)}

/* the check boxes down here: a glass square, cyan when ticked (in Report a problem each box gets its own line) */
body.night #iqPopB .ack{display:flex; gap:9px; align-items:flex-start; margin:8px 0; font-size:14px; line-height:1.45; color:var(--ink-2)}
body.night :is(.buyBox .ack,#iqPopB .ack,.dqDwAll,.dqTermsOk,.vsTable) input[type="checkbox"]{-webkit-appearance:none; appearance:none; flex:none; width:18px; height:18px; margin:2px 0 0; border-radius:5px; border:1.5px solid rgba(59,232,255,.45); background:var(--n-win); cursor:pointer; display:inline-grid; place-items:center; transition:background .12s,box-shadow .12s}
body.night :is(.buyBox .ack,#iqPopB .ack,.dqDwAll,.dqTermsOk,.vsTable) input[type="checkbox"]:checked{border-color:transparent; box-shadow:0 0 12px -2px rgba(59,232,255,.7);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%2303121A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat,linear-gradient(180deg,#7DF3FF,#22C9F0)}
body.night :is(.buyBox .ack,#iqPopB .ack,.dqDwAll,.dqTermsOk,.vsTable) input[type="checkbox"]:focus-visible{outline:2px solid rgba(59,232,255,.7); outline-offset:2px}
html[data-mode="light"] body.night :is(.buyBox .ack,#iqPopB .ack,.dqDwAll,.dqTermsOk,.vsTable) input[type="checkbox"]{background:#FFFFFF; border-color:rgba(7,128,158,.55)}
html[data-mode="light"] body.night :is(.buyBox .ack,#iqPopB .ack,.dqDwAll,.dqTermsOk,.vsTable) input[type="checkbox"]:checked{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%2303121A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat,linear-gradient(180deg,#7DF3FF,#22C9F0)}

/* every main button down here (Get quotes, Print the plan set, Save this version, a pop-up's yes) is the cyan action; the rest glass */
body.night :is(.btnRow button.pri,.vsRow button.pri,.dqVlRow button.pri,.dqTerms .pri,.dqDrawerFoot .ok,.dqCatHead .done){background:var(--nc-btn)!important; color:var(--nc-btnInk)!important; border:0!important; box-shadow:var(--nc-glow)!important; border-radius:11px!important; font-family:Inter,sans-serif; font-weight:700}
body.night :is(.btnRow button.pri,.vsRow button.pri,.dqVlRow button.pri,.dqTerms .pri,.dqDrawerFoot .ok,.dqCatHead .done):hover:not(:disabled){filter:brightness(1.06)}
body.night .btnRow button:not(.pri):not(.warn):not([aria-pressed="true"]){background:var(--n-win); border:1px solid var(--line-2); border-radius:11px; font-family:Inter,sans-serif; font-weight:600}
html[data-mode="light"] body.night .btnRow button:not(.pri):not(.warn):not([aria-pressed="true"]){background:#FFFFFF}
body.night .btnRow button:not(.pri):hover{border-color:rgba(59,232,255,.6)}
body.night .btnRow button.warn{border-radius:11px}

/* Get quotes: the quote cards, the price cyan; a won quote lit cyan, not green */
body.night #iqQuotes .dqCard.won{border-color:rgba(59,232,255,.55)!important; background:linear-gradient(180deg,rgba(59,232,255,.1),rgba(59,232,255,.02))!important}
body.night #iqQuotes .dqPrice b{font-family:Sora,sans-serif; font-weight:700; letter-spacing:-.03em; color:var(--n-cT)!important}
body.night #iqQuotes .dqMoney input{font-family:"JetBrains Mono",monospace}
body.night #iqQuotes .dqOut{background:var(--n-win); border-color:var(--line); border-radius:12px}
body.night #iqQuotes .dqSent div{border-top-color:var(--line)}

/* pop-ups: a dimmed, blurred page behind solid glass */
body.night .iqBack{background:rgba(2,5,12,.62); backdrop-filter:blur(4px)}
html[data-mode="light"] body.night .iqBack{background:rgba(15,30,50,.32)}
body.night .iqBack.side{background:rgba(2,5,12,.2); backdrop-filter:none}
body.night .iqPop{background:var(--nb-solid)!important; border:1px solid var(--line-2); border-radius:20px; box-shadow:var(--nb-edge)}
body.night .iqPop h3{font-family:Sora,Outfit,sans-serif; font-weight:700; letter-spacing:-.02em}
body.night .iqPop .x{background:var(--n-win); border:1px solid var(--line-2); border-radius:50%; color:var(--ink-2)}
body.night .iqPop .x:hover{border-color:rgba(59,232,255,.6); color:var(--n-cT)}
body.night .iqPop.side [data-hov]:hover,body.night .iqPop.side [data-hov]:focus-visible{border-color:var(--n-c); box-shadow:0 0 0 2px rgba(59,232,255,.3)}
body.night .tourGrid button{background:var(--n-win); border-color:var(--line-2); border-radius:14px}
body.night .tourGrid button:hover{border-color:rgba(59,232,255,.6)}
body.night .lotCard{background:var(--n-win); border-color:var(--line-2); border-radius:14px}
body.night .toast{background:var(--nb-solid); color:var(--ink); border:1px solid rgba(59,232,255,.4); border-radius:14px; box-shadow:var(--nb-edge); font-family:Inter,sans-serif}
body.night .toast button{border-color:rgba(59,232,255,.55); color:var(--n-cT); border-radius:9px}
/* Saved decks (and the count on the rail's Saved decks button, the old blue dot) */
body.night .iqRail .dqCount{background:var(--n-c); color:#03121A; font-family:"JetBrains Mono",monospace; box-shadow:0 0 10px rgba(59,232,255,.55)}
body.night .dqMineRow{background:var(--n-win); border:1px solid var(--line-2); border-radius:14px}
body.night .dqMineRow.hov,body.night .dqMineRow:focus-visible{border-color:rgba(59,232,255,.6); background:rgba(59,232,255,.08)}
body.night .dqMineRow.on em{color:var(--n-cT)}
body.night .dqMinePrev{background:var(--n-win); border:1px solid var(--line-2); border-radius:16px}
html[data-mode="light"] body.night :is(.dqMineRow,.dqMinePrev,.tourGrid button,.lotCard){background:#FFFFFF}
/* the DeckIQ agreement */
body.night .dqTerms{background:var(--nb-solid); color:var(--ink); border:1px solid var(--line-2); border-radius:20px; box-shadow:var(--nb-edge)}
body.night .dqTerms h3{font-family:Sora,sans-serif; letter-spacing:-.02em}
body.night .dqTermsBody{border-color:var(--line-2); border-radius:12px}

/* What if… and Save and compare: more = red, less = green (25g; the 27d amber/cyan undone 20261030q at Jared's request) */
body.night{--n-addT:#FF8A8A; --n-addB:rgba(255,138,138,.5); --n-addBg:rgba(255,138,138,.08); --n-addH:rgba(255,138,138,.18);
  --n-saveT:#4ADE9B; --n-saveB:rgba(74,222,155,.5); --n-saveBg:rgba(74,222,155,.08); --n-saveH:rgba(74,222,155,.18)}
html[data-mode="light"] body.night{--n-addT:#C81E1E; --n-addB:#F3B4B4; --n-addBg:#FFF; --n-addH:#FDECEC; --n-saveT:#067A4E; --n-saveB:#A7E3C8; --n-saveBg:#FFF; --n-saveH:#E8F8F0}
body.night .dqAoRow{border-top-color:var(--line)}
body.night .dqAoRow button{font-family:"JetBrains Mono",monospace; font-weight:600; border-width:1px; border-radius:10px}
body.night .dqAoRow button.up{color:var(--n-addT)!important; border-color:var(--n-addB)!important; background:var(--n-addBg)!important}
body.night .dqAoRow button.dn{color:var(--n-saveT)!important; border-color:var(--n-saveB)!important; background:var(--n-saveBg)!important}
body.night .dqAoRow button.up:hover{background:var(--n-addH)!important}
body.night .dqAoRow button.dn:hover{background:var(--n-saveH)!important}
body.night .dqAoRow .tag{color:#FF7A85}
body.night .vsTable tr.on td{background:rgba(59,232,255,.07)}
body.night .vsTable td.num{font-family:"JetBrains Mono",monospace}
body.night .cmpBox h4 span{font-family:"JetBrains Mono",monospace; color:var(--n-amT)}
body.night .cmpBox h4 span.less{color:var(--n-cT)}
body.night .opt{background:var(--n-win); border-color:var(--line-2); border-radius:14px}

/* the drawers: the step's drawer (railing, boards, stairs) and the brand catalog */
body.night :is(.dqDrawer,.dqCat){background:var(--nb-solid); color:var(--ink); border:1px solid var(--line-2); box-shadow:var(--nb-edge); font-family:Inter,sans-serif}
body.night .dqDrawer{border-radius:20px}
body.night .dqDrawerBack{background:rgba(2,5,12,.28)}
html[data-mode="light"] body.night .dqDrawerBack{background:rgba(15,30,50,.1)}
body.night .dqDrawerHead b,body.night .dqCatHead b,body.night .dqCatSide > b{font-family:Sora,sans-serif; letter-spacing:-.02em}
body.night .dqDrawerHead .x{background:var(--n-win); border:1px solid var(--line-2)}
body.night :is(.dqDrawer,.dqCat) h4{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.12em; color:var(--n-cT)}
body.night .dqDrawer small.dqDwP{font-family:"JetBrains Mono",monospace; color:var(--n-cT)}
body.night .dqDrawer .swatches button[aria-pressed="true"] span{box-shadow:0 0 0 2px var(--n-bg),0 0 0 4px var(--n-c),0 0 14px rgba(59,232,255,.6)}
body.night .dqDrawerFoot{border-top:1px solid var(--line)}
body.night .dqDwTot b{color:var(--n-cT); font-family:"JetBrains Mono",monospace}
body.night .dqDrawerFoot .cancel{background:var(--n-win); border:1px solid var(--line-2); border-radius:11px; font-family:Inter,sans-serif}
body.night .dqCatSide{background:rgba(255,255,255,.02); border-right-color:var(--line)}
body.night .dqCatSide button{background:var(--n-win); border:1px solid var(--line-2); border-radius:12px; font-family:Inter,sans-serif; font-weight:600}
body.night .dqCatSide button.on{border-color:rgba(59,232,255,.6); background:rgba(59,232,255,.1); color:var(--n-cT)}
body.night .dqCatFx span{background:var(--n-win); border:1px solid var(--line-2)}
body.night .dqCatFx span.warn{border-color:rgba(255,181,71,.55); color:var(--n-amT)}
body.night .dqCatRow{border:1px solid rgba(59,232,255,.45); background:rgba(59,232,255,.05); border-radius:14px}
body.night .dqCatRow:hover{background:rgba(59,232,255,.1)}
body.night .dqCatRow .go{color:var(--n-cT)}
html[data-mode="light"] body.night :is(.dqDrawerFoot .cancel,.dqCatSide button,.dqDrawerHead .x){background:#FFFFFF}

/* ============================================================
   20261031a: the read-only viewer (deckiq?view=<token>, html.dqViewer), mockup A "the designer, read-only":
   the 2D board / Split / 3D on the left, an At a glance panel on the right, the parts list below. Every editing control is gone.
   (Source: DeckIQ/viewer/viewer.css, appended by patch_css.py.)
   ============================================================ */
.dqViewer :is(#iqAddrForm,#iqRail,#iqTileCol,#iqMapBox,#iqFoldTab,#iqEditBar,#iqBoardTip,.iqTipBtn,#iqDock,#iqDockTab,#iqSelCard,#iqFixCard,#iqDimIn,#iqTplMenu,
  #iqLater,#iqReview,#iqPlans,#iqQuotes,#iqLayers,#iqHelpBtn,.dqHelpBtn,#iq3dStepBar,.iq3dSteps,#iq3dChips,[data-3d="since"],.dqMore,.dqWhat){display:none!important}
.dqViewer #iqSvg *{pointer-events:none!important}   /* the board only pans and zooms: every press lands on the background */
.dqViewer #iqSvg :is(.vtx,.vtxHit,.vtxHov,.edgeHit,.chips,.chip,.dqRefHit){display:none!important}   /* no corner or edge handles, no +/− edge chips */
.dqViewer .iqApp{grid-template-columns:minmax(0,1fr)!important; grid-template-areas:"stage" "panel"!important}
@media (min-width:1001px){ .dqViewer .iqApp{grid-template-columns:minmax(0,1fr) minmax(320px,380px)!important; grid-template-areas:"stage panel"!important} }
.dqViewer .iqPanel{grid-area:panel; max-height:none!important; height:auto!important; overflow:visible!important; align-self:start}
.dqViewer .iqStage{grid-area:stage}
.dqVwBadge{border-color:var(--n-c,#3BE8FF)!important; color:var(--n-c,#3BE8FF)!important}
.dqVwH{font-size:clamp(22px,2.4vw,30px)}
.dqVw{display:flex; flex-direction:column; gap:14px; padding:16px}
.dqVwLock{display:flex; gap:9px; align-items:flex-start; font-size:13px; line-height:1.45; color:var(--n-ink2,var(--ink-2)); padding:10px 12px; border:1px solid var(--n-line,var(--line)); border-radius:12px; background:var(--n-glass2,transparent)}
.dqVwLock svg{flex:none; margin-top:2px; color:var(--n-c,#3BE8FF)}
.dqVwH3{margin:4px 0 0; font:700 15px Sora,Inter,sans-serif; color:var(--n-ink,var(--ink))}
.dqVwFacts{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.dqVwFact{padding:9px 11px; border:1px solid var(--n-line,var(--line)); border-radius:12px; background:var(--n-glass2,transparent); min-width:0}
.dqVwFact small,.dqVwPrice small{display:block; font:600 10.5px 'JetBrains Mono',monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--n-mut,var(--ink-3))}
.dqVwFact b{display:block; font:700 15px Sora,Inter,sans-serif; color:var(--n-ink,var(--ink)); overflow-wrap:anywhere}
.dqVwCode{display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:12px; border:1.5px solid; font-size:13px; color:var(--n-ink2,var(--ink-2))}
.dqVwCode b{font:800 12px 'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase}
.dqVwCode.ok{border-color:rgba(18,226,154,.55)} .dqVwCode.ok b{color:#12E29A}
.dqVwCode.bad{border-color:rgba(255,181,71,.6)} .dqVwCode.bad b{color:var(--n-am,#FFB547)}
html[data-mode="light"] .dqVwCode.ok b{color:#0E9F6E}
.dqVwPrice{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.dqVwPrice b{font:800 19px Sora,Inter,sans-serif; color:var(--n-ink,var(--ink))}
.dqVwBtns{flex-wrap:wrap}
/* the owner's Share view pop-up */
.dqVlRow{display:flex; gap:8px; margin:10px 0}
.dqVlRow input{flex:1; min-width:0; font:500 13px 'JetBrains Mono',monospace; padding:9px 10px; border-radius:10px; border:1px solid var(--n-line,var(--line)); background:var(--n-glass2,transparent); color:var(--n-ink,var(--ink))}
.dqVlAddr{display:flex; gap:8px; align-items:center; font-size:14px; margin:8px 0}

/* 20261031g: Before you start, one bar with topics (Jared's mockup A) */
.dqBys{margin:14px 0; border:1px solid var(--line-2); border-radius:14px; background:var(--n-win,var(--panel)); overflow:hidden}
.dqBys button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; text-align:left}
.dqBysBar{display:flex; align-items:center; gap:10px; width:100%; padding:12px 16px; font:700 15px Sora,Inter,sans-serif!important; color:var(--ink)!important}
.dqBysBar svg{color:var(--n-c,#3BE8FF); flex:none}
.dqBysBar .t{flex:1}
.dqBysPill{font:600 12px Inter,sans-serif; padding:3px 9px; border-radius:999px; border:1px solid var(--line-2); color:var(--ink-2)}
.dqBysPill.fix{color:var(--n-amT,#FFD79A); border-color:rgba(255,181,71,.55); background:rgba(255,181,71,.1)}
.dqBysChev{width:8px; height:8px; flex:none; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); opacity:.7; transition:transform .15s}
[aria-expanded="true"]>.dqBysChev{transform:rotate(45deg)}
.dqBys [hidden]{display:none}
.dqBysGrps{display:flex; flex-direction:column; gap:6px; padding:0 12px 12px}
.dqBysGrp{border:1px solid var(--line); border-radius:11px}
.dqBysGrp.fix{border-color:rgba(255,181,71,.5)}
.dqBysGh{display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; font-weight:600!important; font-size:14px!important; color:var(--ink)!important}
.dqBysGh .t{flex:1}
.dqBysN{font:600 12px 'JetBrains Mono',monospace; color:var(--ink-3)}
.dqBysBody{padding:0 12px 6px 30px}
.dqBysItem{border-top:1px solid var(--line); padding:7px 0}
.dqBysItem p{margin:0; font-size:13.5px; line-height:1.5; color:var(--ink-2)}
.dqBysItem b{color:var(--ink); font-weight:600}
.dqBysItem.k-warn b,.dqBysItem.k-review b,.dqBysItem.k-eng b{color:var(--n-amT,#FFD79A)}
.dqBysI{display:inline-flex!important; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%!important; border:1px solid var(--line-2)!important; font:italic 700 11px Georgia,serif!important; color:var(--ink-2)!important; vertical-align:1px; padding:0!important}
.dqBysI[aria-expanded="true"]{border-color:var(--n-c,#3BE8FF)!important; color:var(--n-c,#3BE8FF)!important}
.dqBysFull{margin-top:6px!important; padding:8px 10px; border-radius:9px; background:var(--n-glass2,rgba(127,127,127,.06)); font-size:13px!important}
html[data-mode="light"] .dqBysPill.fix{color:#6B4A07; background:#FFF8E8; border-color:#E8C27A}
html[data-mode="light"] .dqBysItem.k-warn b,html[data-mode="light"] .dqBysItem.k-review b,html[data-mode="light"] .dqBysItem.k-eng b{color:#8A5A00}
html[data-mode="light"] .dqBysGrp.fix{border-color:#E8C27A}
@media print{.dqBysChev,.dqBysI{display:none!important} .dqBys [hidden]{display:block!important}}   /* a printout has every note in full */