/* ============================================================
   INNFACT — Modular Power Configurator
   Industrial Precision styling (true black, orange accent)
   ============================================================ */

html, body { height: 100%; }
body.cfg-body {
  margin: 0; overflow: hidden;
  background: #000;
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  display: flex; flex-direction: column;
  height: 100vh;
}

.cfg-dot-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: .06;
}

/* ---------- TOP BAR ---------- */
.cfg-top {
  position: relative; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: #000; flex-shrink: 0;
}
.cfg-top-left { display: flex; align-items: center; gap: 16px; }
.cfg-wordmark { display: inline-flex; align-items: center; }
.cfg-title { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.cfg-divider { width: 1px; height: 22px; background: var(--line-soft); }
.cfg-top-right { display: flex; align-items: center; gap: 0; height: 100%; }
.cfg-top-btn {
  display: flex; align-items: center; gap: 8px; height: 100%;
  padding: 0 16px; background: none; border: none; cursor: pointer; color: var(--muted);
  border-left: 1px solid var(--line-soft);
  font-family: inherit; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  transition: background .08s, color .08s;
}
.cfg-top-btn .material-symbols-outlined { font-size: 18px; }
.cfg-top-btn:hover { background: #fff; color: #000; }
.cfg-top-btn.accent { background: transparent; border: 1px solid var(--orange); color: var(--orange); }
.cfg-top-btn.accent:hover { background: var(--orange); color: #000; }
.cfg-rec-btn { background: var(--orange); border: 1px solid var(--orange); color: #000; }
.cfg-rec-btn:hover { background: #fff; border-color: #fff; color: #000; }
.cfg-rec-btn .material-symbols-outlined { color: inherit; }
.cfg-coach[hidden] { display: none !important; }
/* first-visit coach tip */
.cfg-coach { position: fixed; top: 56px; z-index: 5000; display: flex; align-items: center; gap: 10px;
  background: var(--orange); color: #000; padding: 10px 12px; max-width: 260px; font-size: 13px; line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.cfg-coach::after { content: ""; position: absolute; top: -7px; left: var(--arrow-x, 26px); margin-left: -7px; border: 7px solid transparent; border-top: none; border-bottom-color: var(--orange); }
.cfg-coach-x { background: none; border: none; color: #000; font-size: 18px; font-weight: 700; cursor: pointer; line-height: 1; padding: 0; }
@media (max-width: 760px) { .cfg-coach { top: 52px; max-width: 220px; } }
.cfg-top-btn:active { transform: translateY(1px); }
.cfg-cart { position: relative; }
.cfg-cart .cart-badge { top: 12px; right: 8px; }

/* ---------- CANVAS ---------- */
.cfg-canvas {
  position: relative; flex: 1 1 auto;
  display: flex; align-items: center; justify-content: flex-end;
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: 200px;
}
.cfg-canvas::-webkit-scrollbar { height: 5px; }
.cfg-canvas::-webkit-scrollbar-track { background: #0a0a0a; }
.cfg-canvas::-webkit-scrollbar-thumb { background: var(--orange); }
.cfg-scale {
  transition: transform .4s cubic-bezier(.4,0,.2,1);
  transform-origin: right center;
}
.cfg-assembly { display: flex; align-items: flex-end; justify-content: flex-end; width: max-content; }

/* append button */
.cfg-append {
  width: 96px; height: 168px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 1px dashed rgba(255,255,255,.32); background: transparent; cursor: pointer;
  color: var(--muted); position: relative; z-index: 2000;
  transition: background .1s, color .1s;
}
.cfg-append:hover { background: #0a0a0a; color: #fff; }
.cfg-append .material-symbols-outlined { font-size: 32px; }
.cfg-append .lbl { font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.cfg-append.dimmed { border-color: rgba(255,255,255,.12); }
.cfg-append.dimmed .material-symbols-outlined,
.cfg-append.dimmed .lbl { opacity: .35; }

/* module frame */
.cfg-module {
  position: relative; flex: 0 0 auto;
  width: auto; height: 182px;
  display: flex; flex-direction: column; justify-content: flex-end;
  cursor: pointer; background: transparent;
}
.cfg-img { height: 150px; width: auto; display: block; }
.cfg-img-loading { height:150px; background-color:#0d0d0d; background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0, rgba(255,255,255,.07) 7px, transparent 7px, transparent 14px); border:1px solid rgba(255,255,255,.12); }
.cfg-module.sel .cfg-img { filter: drop-shadow(0 0 2px var(--orange)) drop-shadow(0 0 2px var(--orange)); }
.cfg-mod-head {
  position: absolute; top: 0; left: 12px; right: 12px; z-index: 6;
  display: flex; align-items: center; justify-content: space-between;
  opacity: 0; transition: opacity .15s, color .15s; color: var(--muted); pointer-events: none;
}
.cfg-module:hover .cfg-mod-head { opacity: 1; }
.cfg-module.sel .cfg-mod-head { opacity: 1; color: #fff; }
.cfg-mod-head .label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; display:flex; align-items:center; gap:6px; pointer-events:auto; }
.cfg-mod-head .del { font-size: 15px; cursor: pointer; color: rgba(255,255,255,.5); }
.cfg-mod-head .del:hover { color: var(--orange); }
.cfg-mod-head .material-symbols-outlined { font-size: 15px; }

/* selection arrow below, pointing up at the module */
.cfg-arrow {
  position: absolute; bottom: -52px; left: 50%; transform: translateX(-50%);
  width: 42px; height: 42px; z-index: 2000; pointer-events: none;
  opacity: 0; transition: opacity .15s;
}
.cfg-module:hover .cfg-arrow { opacity: .5; }
.cfg-module.sel .cfg-arrow { opacity: 1; }
.cfg-arrow svg { width: 100%; height: 100%; fill: none; stroke: var(--muted); stroke-width: 1.4; }
.cfg-module.sel .cfg-arrow svg { stroke: var(--orange); }

/* power module right end */
.cfg-power { width: auto; }

/* notification boxes — shared NOTICE design (pairing warning + append tooltip) */
.cfg-warning, .cfg-tip {
  position: absolute; z-index: 600; min-width: 280px;
  background: #161616; border: 1px solid var(--orange); padding: 14px 16px; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
}
/* both boxes hover the same distance above the assembly baseline */
.cfg-warning { bottom: 112%; right: 0; }
.cfg-tip { bottom: calc(100% + 36px); left: 0; z-index: 2100; }
.cfg-warning.show, .cfg-tip.show { opacity: 1; visibility: visible; }
.cfg-warning p, .cfg-tip p { margin: 0; font-size: 11px; line-height: 1.6; color: var(--on-surface, #e5e2e1); }

/* ---------- INSPECTOR (bottom) ---------- */
.cfg-inspector {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: #070707; border-top: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.cfg-controls {
  display: flex; align-items: flex-start; gap: 28px; flex-wrap: wrap;
  padding: 14px 24px; border-bottom: 1px solid var(--line-soft);
}
.cfg-ctrl { display: flex; flex-direction: column; }
.cfg-ctrl > label { font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.cfg-field {
  display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px;
  border: 1px solid var(--line-soft); background: #000;
}
.cfg-select { min-width: 196px; }
.cfg-select select {
  background: transparent; border: none; outline: none; color: #fff;
  font-family: inherit; font-size: 13px; width: 100%; cursor: pointer; appearance: none;
}
.cfg-select .del-btn { background: none; border: none; color: #fff; cursor: pointer; font-size: 18px; display:flex; }
.cfg-select .del-btn:hover { color: var(--orange); }
.cfg-slider { min-width: 240px; }
.cfg-slider input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; height: 2px; background: var(--line-soft); cursor: pointer; }
.cfg-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; background: #fff; cursor: pointer; }
.cfg-slider input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; background: #fff; border: none; border-radius: 0; cursor: pointer; }
.cfg-slider .val { font-size: 13px; min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
.cfg-finish { display: flex; gap: 10px; }
.cfg-sw { width: 32px; height: 32px; border: 1px solid var(--line-soft); cursor: pointer; padding: 0; position: relative; }
.cfg-sw.sel { border-color: var(--orange); }
.cfg-sw.sel::after { content: ""; position: absolute; inset: -4px; border: 1px solid var(--orange); }
.cfg-sw.w { background: #e9e9e9; } .cfg-sw.k { background: #111; } .cfg-sw.b { background: #1E3A8A; }
.cfg-sw.y { background: #e6b800; } .cfg-sw.r { background: #c41f1f; }
.cfg-sw.hidden { display: none; }
.cfg-status { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; }
.cfg-status .row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.cfg-led { width: 8px; height: 8px; background: var(--orange); box-shadow: 0 0 6px 1px rgba(255,68,0,.8); }
.cfg-status .lbl { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.cfg-status .ver { font-size: 10px; color: var(--muted); letter-spacing: .1em; }
.cfg-reset {
  width: 44px; height: 44px; border: 1px solid var(--line-soft); background: #000; color: var(--muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.cfg-reset:hover { background: #fff; color: #000; }

.cfg-stats {
  display: flex; align-items: center; gap: 44px;
  padding: 12px 24px;
}
.cfg-stat .k { font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 5px; }
.cfg-stat .k .cn { margin-right: 5px; }
.cfg-stats-toggle { display: none; }
.cfg-stats-body { display: contents; }
.cfg-wordmark-m { display: none; }
.cfg-added { display: none; }
/* 2026-07-15新增：缺貨提示彈窗——跟.cfg-added不同，這個不限定只在手機版顯示，
   所有螢幕尺寸都要能看到（缺貨資訊比較重要，桌機版原本用toast顯示成功訊息，
   但這個要清楚列出好幾個模組+建議顏色，toast裝不下，所以用彈窗）。 */
.cfg-stock-issue { display: none; }
.cfg-stock-issue.show { display: flex !important; position: fixed; inset: 0; z-index: 4100;
  align-items: center; justify-content: center; background: rgba(0,0,0,.75); padding: 24px; }
.cfg-stock-issue-box { background: #0c0c0c; border: 1px solid var(--line, rgba(255,255,255,.5));
  padding: 30px 26px; display: flex; flex-direction: column; align-items: center; gap: 14px;
  width: 100%; max-width: 420px; max-height: 82vh; overflow-y: auto; text-align: center; }
.cfg-stock-issue-title { font-size: 16px; font-weight: 500; color: #fff; }
.cfg-stock-issue-list { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.cfg-stock-issue-row { width: 100%; border: 1px solid var(--line-soft); padding: 14px; text-align: left; }
.cfg-stock-issue-label { font-size: 13px; color: #d14b4b; font-weight: 600; margin-bottom: 8px; }
.cfg-stock-alts { font-size: 12px; color: var(--muted); display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cfg-stock-alts.dim { color: var(--muted-dim, #666); }
.cfg-stock-alt-btn { padding: 6px 12px; font-family: inherit; font-size: 12px; cursor: pointer;
  background: transparent; border: 1px solid var(--orange); color: var(--orange); }
.cfg-stock-alt-btn:hover { background: var(--orange); color: #000; }
.cfg-stat .v { font-size: 18px; line-height: 1; font-variant-numeric: tabular-nums; }
.cfg-stat .v.price { color: var(--orange); }
.cfg-copy { margin-left: auto; font-size: 9px; letter-spacing: .1em; color: var(--muted-dim); text-transform: uppercase; }

@media (max-width: 880px) {
  .cfg-title, .cfg-divider { display: none; }
  .cfg-controls { gap: 16px; }
  .cfg-status { display: none; }
  .cfg-stats { gap: 22px; overflow-x: auto; }
  .cfg-top-btn .txt { display: none; }
}

/* ============================================================
   MOBILE (≤760px): vertical module stack (desktop rotated 90° CW),
   floating auto-hide header/footer, compact controls.
   ============================================================ */
@media (max-width: 760px) {
  html, body { height: auto; }
  body.cfg-body { display: block; overflow-x: hidden; overflow-y: auto; min-height: 100vh; }

  /* floating top bar */
  .cfg-top { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 60px; padding: 0 10px;
    transition: transform .25s ease; }
  .cfg-top--hidden { transform: translateY(-100%); }
  .cfg-top-left { gap: 4px; }
  .cfg-top-right { gap: 0; }
  /* bigger header buttons on mobile */
  .cfg-top-btn { padding: 0 13px; font-size: 11px; }
  .cfg-top-btn .material-symbols-outlined { font-size: 24px; }
  .cfg-history { gap: 0; }

  /* canvas → vertical flow, body scrolls */
  .cfg-canvas { position: static; display: block; overflow: visible; height: auto;
    padding: 84px 0 24px 104px; }
  .cfg-scale { transform: none !important; }
  .cfg-assembly { flex-direction: column !important; align-items: center !important;
    justify-content: flex-start !important; gap: 0 !important; width: 100%; isolation: isolate; }
  /* upper modules paint above lower ones: later DOM (=visually upper under
     column-reverse) already paints on top; lift head labels above all images */
  #cfg-active-modules { display: flex !important; flex-direction: column !important;
    align-items: center !important; width: auto !important; gap: 0 !important; }
  .cfg-mod-head { z-index: 2600 !important; }

  /* append bar at top of the stack */
  .cfg-append { width: 116px; height: 64px; flex-direction: row; gap: 8px; margin: 0 auto 6px; }
  .cfg-append .material-symbols-outlined { font-size: 24px; }

  /* modules: rotate image 90° CW, stack vertically (uniform width 116px).
     The rotated image's layout box stays horizontal, so we fix each module
     box to the rotated footprint (width 116 = image height; box height =
     image's rendered long edge) and clip overflow so boxes butt edge-to-edge
     vertically, exactly like the desktop row interlocks horizontally. */
  .cfg-module { width: 116px !important; margin: 0 auto -20px !important;
    align-items: center; justify-content: center; overflow: visible; }
  .cfg-img, .cfg-img-loading { height: 116px !important; width: auto !important;
    transform: rotate(90deg); transform-origin: center; }
  .cfg-module.sel .cfg-img { filter: drop-shadow(0 0 2px var(--orange)) drop-shadow(0 0 2px var(--orange)); }
  .cfg-module.type-CHARGING { height: 166px; }
  .cfg-module.type-SOCKET   { height: 335px; }
  .cfg-module.type-POWER    { height: 226px; }
  /* hide the cut-cable end of the power module by fading it (pre-rotation right edge = visual bottom) */
  .cfg-module.cfg-power.type-POWER .cfg-img { -webkit-mask-image: linear-gradient(to right, #000 78%, transparent 100%); mask-image: linear-gradient(to right, #000 78%, transparent 100%); }
  .cfg-module.type-PLUG     { height: 106px; }
  .cfg-arrow { display: none; }
  /* head label flush to the LEFT of the module, not covering it */
  .cfg-mod-head { top: 50%; left: auto; right: 100%; margin-right: 4px; transform: translateY(-50%); width: max-content;
    flex-direction: column; gap: 10px; background: rgba(0,0,0,.78); padding: 10px 6px; border-radius: 4px; }
  .cfg-mod-head .label { writing-mode: vertical-rl; font-size: 13px; letter-spacing: .12em; gap: 12px; }
  .cfg-mod-head .del { writing-mode: horizontal-tb; font-size: 26px; padding: 2px; }
  .cfg-mod-head > .material-symbols-outlined { display: none; }

  /* notices: pinned in the gap between product and inspector, narrow to clear stats */
  .cfg-warning, .cfg-tip { position: fixed; left: 120px; right: 16px; top: auto; bottom: 30vh;
    min-width: 0; z-index: 2500; }

  /* floating auto-hide inspector — always above the module stack, compact */
  .cfg-inspector { z-index: 3000 !important; transition: transform .25s ease; max-height: 38vh; overflow-y: auto; }
  .cfg-inspector--hidden { transform: translateY(100%); }
  /* controls: single row — dropdown shrinks first (with min width), swatches fixed */
  .cfg-controls { gap: 12px 14px; padding: 12px 14px; flex-wrap: nowrap; align-items: center; }
  .cfg-ctrl.cfg-select { flex: 1 1 auto; min-width: 150px; max-width: 60%; }
  .cfg-select { min-width: 0; }
  #cfg-del-btn { display: flex !important; flex: 0 0 auto; }
  .cfg-ctrl.cfg-slider { display: none; }   /* zoom not needed in vertical mode */
  .cfg-finish { gap: 10px; justify-content: flex-start; flex-wrap: nowrap; }
  .cfg-sw { width: 30px !important; height: 30px !important; flex: 0 0 auto; }
  /* stats pinned to a fixed left rail (moved out of the panel via JS on mobile) */
  .cfg-stats { position: fixed !important; left: 0; top: 70px; z-index: 70;
    display: flex !important; flex-direction: column !important; gap: 0 !important;
    width: auto; max-width: 150px; padding: 0 !important; background: rgba(0,0,0,.62);
    border-right: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14);
    overflow: visible; }
  /* mini toggle button on top of the rail (always top-left) */
  .cfg-stats-toggle { display: flex !important; align-items: center; justify-content: flex-start;
    width: 100%; height: 30px; padding: 0 12px; background: rgba(255,255,255,.06); border: none;
    border-bottom: 1px solid rgba(255,255,255,.12); color: var(--orange); cursor: pointer;
    font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 700; line-height: 1; }
  .cfg-stats-toggle .ico-expand { display: none; }
  .cfg-stats.collapsed .cfg-stats-toggle .ico-collapse { display: none; }
  .cfg-stats.collapsed .cfg-stats-toggle .ico-expand { display: inline; }
  .cfg-stats.collapsed { width: auto; }
  .cfg-stats-body { display: flex; flex-direction: column; gap: 10px; padding: 11px 11px 12px; }
  .cfg-stats.collapsed .cfg-stats-body { display: none; }
  .cfg-stat .k { margin-bottom: 2px !important; }
  .cfg-stat .k .cn { display: block; font-size: 12px !important; font-weight: 700; letter-spacing: .02em;
    text-transform: none; color: #cfd2d2; margin-right: 0; }
  .cfg-stat .k .en { display: block; font-size: 7px !important; letter-spacing: .08em; color: var(--muted); }
  .cfg-stat .v { font-size: 17px !important; }
  .cfg-copy { display: none !important; }
  /* build stamp pinned to the very bottom, always visible above the footer */
  .cfg-cart { display: none !important; }
  /* keep undo/redo/reset; emphasise add-to-cart with orange outline */
  .cfg-top-btn.accent { background: transparent !important; border: 1px solid var(--orange) !important; color: var(--orange) !important; }
  /* logo → grey text label, non-link on mobile */
  .cfg-wordmark { display: none !important; }
  .cfg-wordmark-m { display: inline !important; color: var(--muted); font-size: 13px; font-weight: 500;
    letter-spacing: .02em; white-space: nowrap; }
  /* added-to-cart modal */
  .cfg-added.show { display: flex !important; position: fixed; inset: 0; z-index: 4000;
    align-items: center; justify-content: center; background: rgba(0,0,0,.7); padding: 28px; }
  .cfg-added-box { background: #0c0c0c; border: 1px solid var(--line, rgba(255,255,255,.5));
    padding: 32px 26px; display: flex; flex-direction: column; align-items: center; gap: 14px;
    width: 100%; max-width: 340px; text-align: center; }
  .cfg-added-title { font-size: 17px; font-weight: 500; color: #fff; margin-bottom: 6px; }
  .cfg-added-btn { width: 100%; padding: 14px; font-family: inherit; font-size: 14px; cursor: pointer;
    background: transparent; border: 1px solid var(--line-soft); color: #fff; }
  .cfg-added-btn.primary { background: var(--orange); border-color: var(--orange); color: #000; font-weight: 700; }
  .cfg-top-btn { padding: 0 9px; }
  .cfg-top-btn.accent { padding: 0 12px; }
  .cfg-sw { width: 30px !important; height: 30px !important; }
  .cfg-finish { gap: 9px !important; }
  #cfg-del-btn { display: flex !important; }
  #build-stamp { position: static !important; z-index: auto !important; width: 100%;
    background: #000; border-top: 1px solid rgba(255,255,255,.12); padding: 10px 12px !important; }
  .cfg-copy { flex: 1 1 100%; margin-left: 0; }
}