/* ==========================================================================
   Flyronix Drone Builder — public component picker + live compatibility /
   build-score HUD. Loaded ONLY on the page-drone-builder.php template (see
   functions.php), built on top of the shared token system in
   flyronix-design.css (--bg, --glass, --line, --line-hi, --text, --muted,
   --cyan, --violet, --font-display, --font-body, --font-mono).
   ========================================================================== */

/* scroll-behavior on html (not .db-page -- the document itself is the
   scrolling box, not this <main>) so any anchor/programmatic scroll on
   this page eases instead of jumping. Page-scoped: this stylesheet is
   only enqueued on the Drone Builder template, so it never touches the
   rest of the site. */
html:has(.db-page){scroll-behavior:smooth;}
.db-page{padding-top:130px;padding-bottom:40px;}

/* ===== Builder hero — the second (and last) spot on the site that gets the homepage
   hero's full HUD corner-bracket frame, on the reasoning that this is the site's other
   "showcase" moment (a live component picker), not just a prose page. Static/idle here
   (unlike the CTA's animated corner lock) since the builder below is already the busy,
   interactive part of the page — the frame just signals "instrument panel" at a glance. ===== */
.db-hero{padding:0 6% 40px;max-width:900px;position:relative;}
.db-hero .hud-frame{position:absolute;inset:-14px 4% -6px;pointer-events:none;z-index:0;}
.db-hero .hud-corner{position:absolute;width:22px;height:22px;filter:drop-shadow(0 0 3px rgba(23,227,255,0.35));}
.db-hero .hud-corner.tl{top:0;left:0;border-top:1.5px solid var(--line-hi);border-left:1.5px solid var(--line-hi);}
.db-hero .hud-corner.tr{top:0;right:0;border-top:1.5px solid var(--line-hi);border-right:1.5px solid var(--line-hi);}
.db-hero .hud-corner.bl{bottom:0;left:0;border-bottom:1.5px solid var(--line-hi);border-left:1.5px solid var(--line-hi);}
.db-hero .hud-corner.br{bottom:0;right:0;border-bottom:1.5px solid var(--line-hi);border-right:1.5px solid var(--line-hi);}
@media (max-width:700px){.db-hero .hud-frame{display:none;}}
.db-hero .eyebrow-hud{position:relative;z-index:1;}
.db-hero .eyebrow-hud .reticle{color:var(--cyan);opacity:0.85;flex-shrink:0;}
.db-hero h1{position:relative;z-index:1;font-family:var(--font-display);font-weight:600;font-size:clamp(32px,5vw,58px);letter-spacing:-0.01em;margin:14px 0 16px;color:var(--text);}
.db-hero-sub{position:relative;z-index:1;font-size:16px;line-height:1.7;color:var(--copy,var(--muted));max-width:620px;}

/* ===== "Setup" layout — 3D preview + build status on the left (sticky),
   compact component builder on the right. Mirrors the split-screen
   configurator pattern (live preview | picker panel) used by dedicated
   PC/drone build-planning tools, executed in Flyronix's own dual-theme
   glass/HUD visual language rather than copying any one tool's styling. ===== */
/* Left column widened + given more visual weight than the first "Setup" pass —
   the 3D assembly is now the centerpiece, not a small companion panel. */
.db-setup{padding:0 6% 70px;display:grid;grid-template-columns:minmax(480px,760px) 1fr;gap:28px;align-items:start;}

/* Sticky column with the 3D stage pinned at the top and the status/error
   panel scrolling independently beneath it. An earlier version made the
   whole column (stage + status) one scroll area -- that fixed the status
   panel being unreachable below the fold, but traded it for a worse
   problem: scrolling down to read a compatibility message scrolled the
   live 3D preview itself out of view along with it, on a page whose
   entire premise is "watch your build update live." The stage never
   needs to scroll (it's a fixed-aspect-ratio square); only the status
   card's content grows unpredictably (compatibility pairs, score trace),
   so only IT gets the internal scrollbar + max-height treatment, via
   .db-setup-issues below. The 3D view is now always on screen the whole
   time this column is stuck to the viewport. */
.db-setup-preview{position:sticky;top:150px;max-height:calc(100vh - 170px);display:flex;flex-direction:column;gap:20px;}

/* ---------- 3D assembly stage ---------- */
/* flex-shrink:0 -- fixed-aspect-ratio square, never compressed to make
   room for the status panel below; see .db-setup-preview above for why
   that panel scrolls internally instead of this stage ever moving. */
.db-3d-stage{border-radius:24px;padding:18px 18px 20px;position:relative;overflow:hidden;flex-shrink:0;}
.db-3d-canvas-wrap{position:relative;aspect-ratio:1/1;border-radius:16px;overflow:hidden;background:rgba(var(--surface-rgb),0.05);cursor:grab;}
.db-3d-canvas-wrap.is-dragging{cursor:grabbing;}
.db-3d-canvas-wrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;}
.db-3d-hint{
  position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.06em;color:var(--muted);
  background:rgba(var(--surface-rgb),0.35);backdrop-filter:blur(6px);padding:5px 12px;border-radius:100px;
  pointer-events:none;opacity:0.85;
}

/* ---------- Zoom slider, left edge of the 3D canvas ---------- */
.db-3d-zoom{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:rgba(var(--surface-rgb),0.35);backdrop-filter:blur(6px);border:1px solid var(--line);
  border-radius:100px;padding:10px 7px;
}
.db-3d-zoom-icon{
  font-family:var(--font-mono);font-size:13px;line-height:1;color:var(--muted);
  user-select:none;pointer-events:none;
}
.db-3d-zoom-slider{
  -webkit-appearance:slider-vertical;appearance:slider-vertical;
  writing-mode:vertical-lr;direction:rtl;
  width:6px;height:120px;margin:2px 0;cursor:pointer;accent-color:var(--cyan);
  background:transparent;
}
@media (max-width:1050px){
  .db-3d-zoom{left:10px;padding:8px 6px;}
  .db-3d-zoom-slider{height:90px;}
}

/* ---------- "Show dimensions" toggle + panel ---------- */
.db-dims-toggle{
  position:absolute;top:12px;right:12px;z-index:2;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.06em;color:var(--muted);
  background:rgba(var(--surface-rgb),0.35);backdrop-filter:blur(6px);border:1px solid var(--line);
  padding:6px 12px;border-radius:100px;cursor:pointer;transition:all .2s ease;
}
.db-dims-toggle:hover{color:var(--text);border-color:var(--line-hi);}
.db-dims-toggle.is-active{color:#04141A;background:linear-gradient(90deg,var(--cyan),#00b3d1);border-color:transparent;}
.db-dims-panel{
  display:none;position:absolute;top:52px;right:12px;left:12px;z-index:2;max-height:60%;overflow-y:auto;
  background:rgba(var(--surface-rgb),0.55);backdrop-filter:blur(10px);border:1px solid var(--line-hi);
  border-radius:12px;padding:10px 12px;font-family:var(--font-mono);font-size:11px;
}
.db-dims-panel.is-open{display:block;}
.db-dims-row{padding:6px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:2px;}
.db-dims-row:last-child{border-bottom:none;}
.db-dims-cat{color:var(--cyan);letter-spacing:0.06em;text-transform:uppercase;font-size:9.5px;}
.db-dims-name{color:var(--text);font-weight:600;}
.db-dims-specs{color:var(--muted);}
.db-dims-empty{color:var(--muted);padding:4px 0;}

.db-3d-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.db-3d-chip{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.04em;color:var(--muted);
  background:rgba(var(--surface-rgb),0.03);border:1px solid var(--line);border-radius:100px;padding:6px 12px;
  display:flex;align-items:center;gap:6px;transition:all .25s ease;
}
.db-3d-chip .dot{width:6px;height:6px;border-radius:50%;background:var(--line-hi);flex-shrink:0;}
.db-3d-chip.is-equipped{color:var(--cyan);border-color:var(--line-hi);background:rgba(23,227,255,0.08);}
.db-3d-chip.is-equipped .dot{background:var(--cyan);box-shadow:0 0 6px rgba(23,227,255,0.7);}
.db-3d-note{margin:12px 2px 0;font-size:12px;line-height:1.6;color:var(--muted);}

/* ---------- Build-status panel (was the old sticky sidebar; now sits
   directly under the 3D stage instead of beside the categories) ---------- */
/* flex:1 1 auto + min-height:0 lets this panel absorb whatever's left of
   .db-setup-preview's max-height and scroll ITS OWN content internally
   (overflow-y:auto) once compatibility pairs/score trace grow past that --
   the 3D stage above never has to shrink or scroll to make room, see its
   own comment. min-height:0 is required for a flex child to be allowed to
   shrink below its content size at all; without it this panel would just
   keep growing and push the stage out through the parent's own overflow. */
.db-setup-issues{border-radius:24px;padding:26px;display:flex;flex-direction:column;gap:18px;transition:box-shadow 0.3s ease;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;}
/* Whole status card picks up a faint colored edge matching the overall
   verdict, so "something's wrong" reads at a glance even before scrolling
   down to the individual pair rows. */
.db-setup-issues:has(.db-status-dot.is-bad){box-shadow:inset 0 0 0 1px rgba(255,92,108,0.3);}
.db-setup-issues:has(.db-status-dot.is-ok){box-shadow:inset 0 0 0 1px rgba(46,209,135,0.22);}
.db-setup-issues .db-status-head{flex-wrap:wrap;gap:10px 14px;}
.db-setup-issues .db-live-indicator{margin-left:auto;margin-top:0;}

/* ---------- Right column: compact builder ---------- */
.db-setup-builder{display:flex;flex-direction:column;gap:18px;}
.db-builder-head{display:flex;flex-direction:column;gap:4px;padding:0 4px;}
.db-builder-hint{font-size:12.5px;color:var(--muted);}

/* ---------- Category sections ---------- */
.db-categories{display:flex;flex-direction:column;gap:16px;}

.db-category{border-radius:20px;padding:22px 24px;position:relative;}
.db-category.db-optional{border-style:dashed;}

/* ---------- Scroll-in reveal (see categoryRevealObserver in JS) ----------
   .db-category--observe is the pre-reveal state (only applied by JS, so a
   no-JS/reduced-motion page never hides content behind a script that
   might not run); .is-revealed is added the moment IntersectionObserver
   sees the section, single one-way transition, never reverses on scroll
   back up. The cyan sweep is a one-shot highlight riding the same
   transition, not a persistent effect -- ties the reveal to this page's
   existing HUD/scan language (hero corner brackets, status dots) without
   adding a second unrelated animation style. */
.db-category--observe{opacity:0;transform:translateY(22px);transition:opacity .5s cubic-bezier(.22,.68,0,1),transform .5s cubic-bezier(.22,.68,0,1);}
.db-category--observe::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:linear-gradient(100deg,transparent 40%,rgba(23,227,255,0.16) 50%,transparent 60%);
  background-size:250% 100%;background-position:100% 0;opacity:0;
}
.db-category--observe.is-revealed{opacity:1;transform:translateY(0);}
.db-category--observe.is-revealed::before{opacity:1;animation:dbCatSweep .7s ease-out .05s forwards;}
@keyframes dbCatSweep{from{background-position:100% 0;}to{background-position:0 0;opacity:0;}}
@media (prefers-reduced-motion:reduce){
  .db-category--observe,.db-category--observe.is-revealed{opacity:1;transform:none;transition:none;}
  .db-category--observe::before{display:none;}
}

.db-cat-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap;}
.db-cat-tag{font-family:var(--font-mono);font-size:11px;letter-spacing:0.12em;color:#04141A;background:linear-gradient(90deg,var(--cyan),#00b3d1);border-radius:8px;padding:4px 9px;flex-shrink:0;}
.db-category.db-optional .db-cat-tag{background:transparent;border:1px solid var(--line-hi);color:var(--cyan);}
.db-cat-head h3{font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--text);margin:0;flex-shrink:0;}
.db-cat-optional-label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:2px 10px;}
.db-cat-state{margin-left:auto;font-family:var(--font-mono);font-size:12px;color:var(--muted);padding:5px 12px;border-radius:100px;border:1px solid var(--line);white-space:nowrap;}
.db-cat-state.is-selected{color:var(--cyan);border-color:var(--line-hi);background:rgba(23,227,255,0.06);}

/* ---------- Color swatches (motor/propeller only) ---------- */
.db-color-swatches{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.db-color-swatches-label{font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin-right:2px;}
.db-color-swatch{
  width:22px;height:22px;border-radius:100px;border:2px solid var(--line);cursor:pointer;
  padding:0;transition:transform .15s,border-color .15s;flex-shrink:0;
}
.db-color-swatch:hover{transform:scale(1.12);}
.db-color-swatch.is-active{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(23,227,255,0.25);}
.db-color-swatch--reset{
  background:repeating-conic-gradient(#9aa4b2 0% 25%,#e8ecef 0% 50%) 0 0/10px 10px;
}

/* ---------- Per-category search ---------- */
.db-cat-search{margin-bottom:16px;}
.db-cat-search-label{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.db-cat-search-input{
  width:100%;font-family:var(--font-body);font-size:14px;color:var(--text);
  background:rgba(var(--surface-rgb),0.03);border:1px solid var(--line);border-radius:10px;
  padding:10px 14px;transition:border-color .2s,background .2s,box-shadow .2s;
}
.db-cat-search-input::placeholder{color:var(--muted);}
.db-cat-search-input:hover{border-color:var(--line-hi);}
.db-cat-search-input:focus-visible,.db-cat-search-input:focus{
  outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(23,227,255,0.12);
}
/* Remove default WebKit search decorations so it matches the rest of the site's inputs */
.db-cat-search-input::-webkit-search-decoration,
.db-cat-search-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;}

.db-product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}

.db-product{
  text-align:left;border-radius:16px;padding:16px 18px;cursor:pointer;
  background:rgba(var(--surface-rgb),0.025);border:1px solid var(--line);
  transition:border-color .2s,background .2s,transform .2s;font-family:var(--font-body);color:var(--text);
  overflow:hidden;
}
.db-product:hover{border-color:var(--line-hi);transform:translateY(-2px);}
.db-product:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.db-product[aria-pressed="true"]{border-color:var(--cyan);background:rgba(23,227,255,0.09);box-shadow:0 0 0 1px var(--cyan) inset;}

.db-product-name{font-family:var(--font-display);font-weight:600;font-size:15px;margin-bottom:4px;color:var(--text);overflow-wrap:break-word;}
.db-product-maker{font-family:var(--font-mono);font-size:11px;color:var(--muted);letter-spacing:0.03em;margin-bottom:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.db-product-specs{display:flex;flex-wrap:wrap;gap:6px;max-width:100%;}
.db-product-spec{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);background:rgba(var(--surface-rgb),0.05);border:1px solid var(--line);border-radius:6px;padding:3px 7px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.db-product-spec strong{color:var(--text);font-weight:500;}

.db-empty{
  border:1.5px dashed var(--line);border-radius:16px;padding:24px;text-align:center;
  color:var(--muted);font-size:14px;line-height:1.6;
}
.db-empty strong{color:var(--text);}

.db-loading{font-family:var(--font-mono);font-size:12px;color:var(--muted);padding:8px 0;}

/* ---------- Incompatible / greyed-out product state ---------- */
.db-product--incompatible{
  opacity:0.45;cursor:not-allowed;filter:grayscale(0.4);
}
.db-product--incompatible:hover{border-color:var(--line);transform:none;}
.db-product-reason{
  margin-top:10px;padding-top:8px;border-top:1px dashed var(--line);
  font-family:var(--font-mono);font-size:10.5px;line-height:1.5;color:var(--red);
}

/* ---------- "N hidden — incompatible" note + reveal toggle ---------- */
.db-hidden-note-wrap:empty{display:none;}
.db-hidden-note{
  margin-top:14px;display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  font-family:var(--font-mono);font-size:11.5px;color:var(--muted);
}
.db-hidden-toggle{
  font-family:var(--font-mono);font-size:11px;color:var(--violet);background:none;border:none;
  cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px;
}
.db-hidden-toggle:hover{color:var(--cyan);}

/* ---------- Status HUD (sticky sidebar) ---------- */
.db-status{border-radius:24px;padding:26px;position:sticky;top:150px;display:flex;flex-direction:column;gap:22px;overflow:hidden;}
/* Small top-corner ticks only — not a full HUD frame. This panel already reads as a
   telemetry readout via its own live/idle dots and score numbers; two restrained corner
   marks are enough to tie it visually to the hero's frame above without stacking a second
   heavy HUD treatment onto a component that's already the busiest thing on the page. */
.db-status-corner{position:absolute;width:18px;height:18px;pointer-events:none;opacity:0.5;}
.db-status-corner.tl{top:14px;left:14px;border-top:1.5px solid var(--line-hi);border-left:1.5px solid var(--line-hi);}
.db-status-corner.tr{top:14px;right:14px;border-top:1.5px solid var(--line-hi);border-right:1.5px solid var(--line-hi);}

.db-status-head{display:flex;align-items:center;gap:10px;}
.db-status-dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex-shrink:0;position:relative;}
.db-status-dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid currentColor;opacity:0;}
.db-status-dot.is-ok{background:#2ED187;color:#2ED187;}
.db-status-dot.is-bad{background:var(--red);color:var(--red);animation:dbPulse 1.6s ease-in-out infinite;}
.db-status-dot.is-idle{background:var(--amber);color:var(--amber);}
@keyframes dbPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,92,108,0.5);}50%{box-shadow:0 0 0 6px rgba(255,92,108,0);}}

.db-status-sub{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);margin-top:-14px;transition:color 0.25s ease;}
.db-setup-issues:has(.db-status-dot.is-bad) .db-status-sub{color:var(--red);}
.db-setup-issues:has(.db-status-dot.is-ok) .db-status-sub{color:#2ED187;}

/* ---------- "always checking" live indicator — same dot language as
   db-status-dot above, just a second smaller instance dedicated to the
   background compatible-products filtering rather than the overall
   build-compatibility verdict. ---------- */
.db-live-indicator{display:flex;align-items:center;gap:8px;margin-top:-10px;}
.db-status-dot--live{width:7px;height:7px;}
.db-status-dot--live.is-idle{background:var(--muted);color:var(--muted);}
.db-status-dot--live.is-live{background:var(--cyan);color:var(--cyan);animation:dbPulseSlow 2.4s ease-in-out infinite;}
.db-status-dot--live.is-checking{background:var(--violet);color:var(--violet);animation:dbPulseFast 0.9s ease-in-out infinite;}
.db-live-label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.04em;color:var(--muted);}
@keyframes dbPulseSlow{0%,100%{box-shadow:0 0 0 0 rgba(23,227,255,0.45);}50%{box-shadow:0 0 0 5px rgba(23,227,255,0);}}
@keyframes dbPulseFast{0%,100%{box-shadow:0 0 0 0 rgba(140,116,255,0.55);}50%{box-shadow:0 0 0 5px rgba(140,116,255,0);}}

.db-pairs{display:flex;flex-direction:column;gap:10px;}
.db-pair{
  border:1px solid var(--line);border-left-width:3px;border-radius:14px;padding:12px 14px 12px 13px;
  font-size:13px;transition:background-color 0.25s ease,border-color 0.25s ease;
  animation:dbPairIn 0.22s ease both;
}
@keyframes dbPairIn{from{opacity:0;transform:translateY(3px);}to{opacity:1;transform:translateY(0);}}
.db-pair.is-ok{background:rgba(46,209,135,0.05);border-left-color:#2ED187;}
.db-pair.is-bad{background:rgba(255,92,108,0.06);border-left-color:var(--red);}
.db-pair-head{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;color:var(--text);}
.db-pair-icon{flex-shrink:0;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-size:10px;}
.db-pair.is-ok .db-pair-icon{background:rgba(46,209,135,0.15);color:#2ED187;}
.db-pair.is-bad .db-pair-icon{background:rgba(255,92,108,0.15);color:var(--red);}
.db-pair-msgs{margin:8px 0 0;padding-left:22px;color:var(--muted);font-size:12.5px;line-height:1.6;}
.db-pair-msgs li{margin-bottom:3px;}

.db-idle-note{font-size:13px;color:var(--muted);line-height:1.7;}

.db-score-block{border-top:1px solid var(--line);padding-top:20px;}
.db-score-readout{display:flex;align-items:baseline;gap:10px;margin-bottom:8px;}
.db-score-value{font-family:var(--font-display);font-weight:700;font-size:44px;color:var(--cyan);line-height:1;}
.db-score-unit{font-family:var(--font-mono);font-size:12px;color:var(--muted);}
.db-score-label{font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;}

.db-score-reasons{list-style:disc;padding-left:20px;color:var(--muted);font-size:13px;line-height:1.7;margin:0 0 14px;}

.db-score-trace-toggle{
  font-family:var(--font-mono);font-size:11px;color:var(--cyan);background:none;border:none;cursor:pointer;
  padding:0;text-decoration:underline;text-underline-offset:3px;margin-bottom:10px;
}
.db-score-trace{list-style:none;margin:0 0 6px;padding:12px 14px;background:rgba(var(--surface-rgb),0.03);border:1px solid var(--line);border-radius:12px;font-family:var(--font-mono);font-size:11.5px;color:var(--muted);line-height:1.8;display:none;}
.db-score-trace.is-open{display:block;}
.db-score-trace li{border-bottom:1px dashed var(--line);padding-bottom:6px;margin-bottom:6px;}
.db-score-trace li:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}

/* ---------- Disclaimer — always visible, deliberately not a tiny footnote ---------- */
.db-disclaimer{
  display:flex;gap:12px;align-items:flex-start;border-radius:16px;padding:16px 18px;
  background:rgba(255,176,32,0.08);border:1px solid rgba(255,176,32,0.35);
}
.db-disclaimer-icon{flex-shrink:0;font-size:18px;line-height:1;}
.db-disclaimer p{margin:0;font-size:12.5px;line-height:1.65;color:var(--text);}
.db-disclaimer strong{color:var(--amber);}

@media (max-width:1050px){
  .db-setup{grid-template-columns:1fr;}
  .db-setup-preview{position:static;}
}
@media (max-width:640px){
  .db-hero,.db-setup{padding-left:5%;padding-right:5%;}
  .db-category{padding:22px 18px;}
}

/* ---------- "Produkt vorschlagen" request form ---------- */
.db-request-section{margin:0 6% 80px;border-radius:28px;padding:40px 44px;}
.db-request-head{max-width:640px;margin-bottom:26px;}
.db-request-head h2{font-family:var(--font-display);font-weight:600;font-size:clamp(24px,3vw,32px);margin:10px 0 12px;color:var(--text);}
.db-request-note{font-size:14.5px;line-height:1.7;color:var(--muted);}

.db-request-form{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;}
.db-request-row{display:flex;flex-direction:column;gap:7px;}
.db-request-row--wide{grid-column:1 / -1;}
.db-request-row label{font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.05em;color:var(--muted);}
.db-request-row input,.db-request-row select,.db-request-row textarea{
  font-family:var(--font-body);font-size:14.5px;color:var(--text);
  background:rgba(var(--surface-rgb),0.03);border:1px solid var(--line);border-radius:10px;
  padding:11px 14px;transition:border-color .2s,box-shadow .2s;resize:vertical;
}
.db-request-row input::placeholder,.db-request-row textarea::placeholder{color:var(--muted);}
.db-request-row input:hover,.db-request-row select:hover,.db-request-row textarea:hover{border-color:var(--line-hi);}
.db-request-row input:focus-visible,.db-request-row select:focus-visible,.db-request-row textarea:focus-visible,
.db-request-row input:focus,.db-request-row select:focus,.db-request-row textarea:focus{
  outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(23,227,255,0.12);
}
.db-request-row select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C6472' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:34px;}
/* The select box itself picks up dark-mode colors fine via --text/
   --surface-rgb above, but its OPENED option-list popup is rendered by
   the browser/OS in a separate layer that ignores the page's translucent
   surface background entirely -- Chrome falls back to a plain white
   popup with black text regardless of --text on the closed <select>, so
   the expanded list looked wrong (unreadable/mismatched) in dark mode.
   Options need their own explicit, opaque background+color; reusing
   --dropdown-glass since it's already the theme-aware opaque-surface
   token defined for exactly this kind of floating panel. */
.db-request-row select option{background:var(--dropdown-glass);color:var(--text);}

.db-request-row input:invalid:not(:placeholder-shown){border-color:var(--red);}

.db-request-actions{grid-column:1 / -1;display:flex;align-items:center;gap:16px;margin-top:6px;}
.db-request-status{font-family:var(--font-mono);font-size:12.5px;color:var(--muted);}
.db-request-status.is-ok{color:var(--cyan);}
.db-request-status.is-error{color:var(--red);}

@media (max-width:640px){
  .db-request-section{margin-left:5%;margin-right:5%;padding:28px 22px;}
  .db-request-form{grid-template-columns:1fr;}
}