.tbcfg-root{
    --ink: #1e293b;
    --ink-soft: #334155;
    --paper: #f9fafb;
    --card: #ffffff;
    --line: #e2e8f0;
    --brass: #0072ff;
    --brass-deep: #045cb4;
    --glow: #ffd98a;
    --ok: #3f7d54;
    --warn: #b4582a;
    --shadow: 0 1px 2px rgba(30,41,59,.04), 0 8px 24px rgba(30,41,59,.06);
  }.tbcfg-root, .tbcfg-root *{ box-sizing: border-box; }.tbcfg-root{
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: ui-sans-serif, "Inter", system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.5;
  }.tbcfg-root .wrap{ max-width: 1160px; margin: 0 auto; padding: 28px 24px 80px; }.tbcfg-root header.top{ display: flex; align-items: baseline; gap: 14px; border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 24px; }.tbcfg-root header.top h1{ font-size: 20px; letter-spacing: -.01em; margin: 0; font-weight: 650; }.tbcfg-root header.top .tag{ font-size: 12px; color: var(--ink-soft); letter-spacing: .04em; text-transform: uppercase; }.tbcfg-root .layout{ display: grid; grid-template-columns: 1fr 400px; gap: 24px; align-items: start; }
  @media (max-width: 900px){.tbcfg-root .layout{ grid-template-columns: 1fr; } }.tbcfg-root .panel{ background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }.tbcfg-root .panel-pad{ padding: 18px; }.tbcfg-root .bathroom{ border: 1px solid var(--line); border-radius: 10px; margin-bottom: 14px; overflow: hidden; }.tbcfg-root .bathroom-head{ display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: linear-gradient(180deg,#f8fafc,#f1f5f9); border-bottom: 1px solid var(--line); }.tbcfg-root .bathroom-head input.name{ font-size: 15px; font-weight: 600; border: 1px solid transparent; background: transparent; padding: 4px 6px; border-radius: 6px; width: 230px; color: var(--ink); }.tbcfg-root .bathroom-head input.name:hover{ border-color: var(--line); }.tbcfg-root .bathroom-head input.name:focus{ border-color: var(--brass); outline: none; background: #fff; }.tbcfg-root .temp-select select{ font-size: 13px; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line); background: #fff; }.tbcfg-root .switch{ border-top: 1px dashed var(--line); padding: 12px 14px; }.tbcfg-root .switch:first-of-type{ border-top: none; }.tbcfg-root .switch-label{ font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--brass-deep); font-weight: 700; margin-bottom: 8px; display:flex; align-items:center; gap:8px;}.tbcfg-root .fixture-row{ display: grid; grid-template-columns: 1fr 96px 30px; gap: 8px; align-items: center; margin-bottom: 7px; }.tbcfg-root .fixture-row select, .tbcfg-root .fixture-row input{ font-size: 13px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line); background: #fff; width: 100%; }.tbcfg-root .fixture-row .unit{ position: relative; }.tbcfg-root .mini-btn{ border: 1px solid var(--line); background: #fff; border-radius: 6px; cursor: pointer; font-size: 12px; padding: 5px 10px; color: var(--ink-soft); transition: .12s; }.tbcfg-root .mini-btn:hover{ border-color: var(--brass); color: var(--brass-deep); }.tbcfg-root .x-btn{ border: none; background: transparent; color: #94a3b8; cursor: pointer; font-size: 16px; line-height: 1; }.tbcfg-root .x-btn:hover{ color: var(--warn); }.tbcfg-root .add-row{ display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }.tbcfg-root .btn{ border: 1px solid var(--brass); background: var(--brass); color: #fff; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; padding: 9px 16px; transition: .12s; }.tbcfg-root .btn:hover{ background: var(--brass-deep); border-color: var(--brass-deep); }.tbcfg-root .btn.ghost{ background: transparent; color: var(--brass-deep); }.tbcfg-root .btn.ghost:hover{ background: #eff6ff; }.tbcfg-root .sum-head{ padding: 16px 18px; border-bottom: 1px solid var(--line); display:flex; justify-content:space-between; align-items:center;}.tbcfg-root .sum-head h2{ margin: 0; font-size: 15px; }.tbcfg-root .view-toggle{ display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }.tbcfg-root .view-toggle button{ border: none; background: #fff; font-size: 12px; padding: 5px 11px; cursor: pointer; color: var(--ink-soft); }.tbcfg-root .view-toggle button.active{ background: var(--ink); color: #fff; }.tbcfg-root .kit-group{ border-bottom: 1px solid var(--line); }.tbcfg-root .kit-title{ padding: 12px 18px 6px; font-weight: 650; font-size: 14px; display:flex; justify-content:space-between; }.tbcfg-root .kit-title .ksub{ font-weight: 400; color: var(--ink-soft); font-size: 12px; }.tbcfg-root .line{ display: flex; justify-content: space-between; padding: 3px 18px; font-size: 13px; color: var(--ink-soft); }.tbcfg-root .line .nm{ display:flex; gap:7px; }.tbcfg-root .line .qty{ color: var(--brass-deep); font-variant-numeric: tabular-nums; min-width: 26px; }.tbcfg-root .homeowner .line{ display: none; }.tbcfg-root .homeowner .kit-title{ padding-bottom: 12px; }.tbcfg-root .totals{ padding: 14px 18px; }.tbcfg-root .totals .t-row{ display: flex; justify-content: space-between; font-size: 13px; padding: 2px 0; color: var(--ink-soft); }.tbcfg-root .totals .t-row.grand{ font-size: 17px; font-weight: 700; color: var(--ink); border-top: 1px solid var(--line); margin-top: 8px; padding-top: 10px; }.tbcfg-root .ship-free{ color: var(--ok); font-weight: 600; }.tbcfg-root .flags{ padding: 0 18px 14px; }.tbcfg-root .flag{ font-size: 12px; padding: 8px 10px; border-radius: 7px; margin-top: 8px; display:flex; gap:8px; }.tbcfg-root .flag.warn{ background: #fbf0e8; color: var(--warn); }.tbcfg-root .flag.info{ background: #eef4f0; color: var(--ok); }.tbcfg-root .empty{ padding: 40px 18px; text-align: center; color: var(--ink-soft); font-size: 13px; }.tbcfg-root .footnote{ font-size: 11px; color: #64748b; margin-top: 18px; line-height: 1.6; }.tbcfg-root .pill{ display:inline-block; font-size:10px; letter-spacing:.05em; text-transform:uppercase; background:#e2e8f0; color:var(--brass-deep); padding:2px 7px; border-radius:20px; font-weight:700;}.tbcfg-root .scene-panel{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:12px;margin-bottom:24px}.tbcfg-root .scene-frame{position:relative;display:inline-block;line-height:0;width:100%}.tbcfg-root #vcv{width:100%;height:auto;border-radius:8px;display:block;background:#e2e8f0}.tbcfg-root .scene-panel .badges{position:absolute;inset:0;pointer-events:none}.tbcfg-root .scene-panel .badge{position:absolute;transform:translate(-50%,-50%);width:30px;height:36px;pointer-events:auto;cursor:default}.tbcfg-root .scene-panel .badge img{width:30px;height:36px;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}.tbcfg-root .scene-panel .badge .cnt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 12px/1 system-ui,Arial;color:#fff;transform:translateY(1px)}.tbcfg-root .scene-panel .badge .tip{position:absolute;bottom:120%;left:50%;transform:translateX(-50%);white-space:nowrap;background:#0b0d11;border:1px solid #2c313b;border-radius:8px;padding:7px 10px;font:12px/1.5 system-ui,Arial;color:#e7e9ee;opacity:0;visibility:hidden;transition:opacity .12s;box-shadow:0 6px 18px rgba(0,0,0,.4);z-index:5;text-align:left}.tbcfg-root .scene-panel .badge .tip b{color:#b08948}.tbcfg-root .scene-panel .badge:hover .tip{opacity:1;visibility:visible}.tbcfg-root .scene-cap{font-size:12px;color:var(--ink-soft);margin-top:8px;padding:0 4px}.tbcfg-root #menu{margin-bottom:14px}.tbcfg-root .menu-temps{display:flex;gap:6px;margin-bottom:12px}.tbcfg-root .menu-temps button{flex:1;padding:7px;border:1px solid var(--line);background:#fff;border-radius:7px;cursor:pointer;font-size:12px;color:var(--ink-soft)}.tbcfg-root .menu-temps button.sel{border-color:var(--brass);background:#eff6ff;color:var(--brass-deep);font-weight:700}.tbcfg-root .six{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}.tbcfg-root .six .cat{position:relative}.tbcfg-root .six .cat>button{width:100%;display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px 6px;border:1px solid var(--line);background:#fff;border-radius:10px;cursor:pointer;color:var(--ink);transition:.12s}.tbcfg-root .six .cat>button:hover{border-color:var(--brass);box-shadow:var(--shadow)}.tbcfg-root .six .cat>button svg{width:26px;height:26px;stroke:var(--brass-deep);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.tbcfg-root .six .cat>button span{font-size:12px;font-weight:600}.tbcfg-root .pop{position:absolute;z-index:20;top:100%;left:0;min-width:210px;margin-top:5px;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow);padding:5px;display:none}.tbcfg-root .six .cat:nth-child(3n) .pop{left:auto;right:0}.tbcfg-root .pop.open{display:block}.tbcfg-root .pop button{display:block;width:100%;text-align:left;padding:7px 9px;border:none;background:transparent;border-radius:6px;cursor:pointer;font-size:12.5px;color:var(--ink);white-space:nowrap}.tbcfg-root .pop button:hover{background:#eff6ff;color:var(--brass-deep)}.tbcfg-root .zones{display:flex;flex-direction:column;gap:10px}.tbcfg-root .zone{border:1px solid var(--line);border-radius:10px;overflow:hidden}.tbcfg-root .zone.active{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass) inset}.tbcfg-root .zone-head{display:flex;align-items:center;gap:8px;padding:9px 12px;background:linear-gradient(180deg,#f8fafc,#f1f5f9);border-bottom:1px solid var(--line);cursor:pointer;font-size:11px;font-weight:700;color:var(--brass-deep);letter-spacing:.05em;text-transform:uppercase}.tbcfg-root .zone-head .act{font-size:9px;background:var(--brass);color:#fff;padding:2px 7px;border-radius:20px;letter-spacing:.03em}.tbcfg-root .zone-el{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:8px;align-items:start;padding:8px 12px;border-top:1px dashed var(--line)}.tbcfg-root .x-btn.dupbtn:hover{color:var(--brass-deep)}.tbcfg-root .grip{cursor:grab;color:#94a3b8;font-size:14px;line-height:1;user-select:none;padding:2px 2px 0;align-self:center}.tbcfg-root .grip:active{cursor:grabbing}.tbcfg-root .zone.dropok{outline:2px dashed var(--brass);outline-offset:-2px;background:#fbf7ee}.tbcfg-root .zone-el.dragging{opacity:.45}.tbcfg-root .zone-el .eln{font-size:13px}.tbcfg-root .zone-el .eldims{display:flex;gap:5px}.tbcfg-root .zone-el .eldims input{width:62px;font-size:12px;padding:4px 6px;border:1px solid var(--line);border-radius:6px;background:#fff}.tbcfg-root .zone-empty{padding:11px 12px;color:var(--ink-soft);font-size:12px}.tbcfg-root .addzone{align-self:flex-start;font-size:12px;padding:7px 12px}.tbcfg-root .adv-hidden{display:none}.tbcfg-root .adv-toggle{background:transparent;border:none;color:var(--brass-deep);cursor:pointer;font-size:12px;padding:6px 0;margin:2px 0 8px}.tbcfg-root .cat-img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:7px;display:block;margin-bottom:4px}.tbcfg-root .six .cat>button{padding:7px 6px 9px}.tbcfg-root .bath-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card);box-shadow:var(--shadow);margin-bottom:16px}.tbcfg-root .bath-head{padding:11px 14px;background:linear-gradient(180deg,#f8fafc,#f1f5f9);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}.tbcfg-root .bath-head .bath-name{flex:1 1 auto;width:auto}.tbcfg-root .ledcolor{flex:0 0 auto;font-size:11px;color:var(--ink-soft);display:flex;align-items:center;gap:6px;white-space:nowrap;text-transform:uppercase;letter-spacing:.04em;font-weight:700}.tbcfg-root .ledcolor select{font-size:12px;padding:4px 6px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);width:auto;text-transform:none;font-weight:400}.tbcfg-root .vswitches{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:10px}.tbcfg-root .vsw-lbl{font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;font-weight:700}.tbcfg-root .vsw{border:1px solid var(--line);border-radius:20px;font-size:12px;padding:5px 12px;cursor:pointer;background:#fff;color:var(--ink-soft);font-weight:600}.tbcfg-root .vsw.on{background:#eff6ff;border-color:var(--brass);color:var(--brass-deep)}.tbcfg-root .vsw.off{background:#f1f5f9;color:#64748b}.tbcfg-root .bath-name{font-size:16px;font-weight:650;border:1px solid transparent;background:transparent;padding:4px 6px;border-radius:6px;width:100%;color:var(--ink)}.tbcfg-root .bath-name:hover{border-color:var(--line)}.tbcfg-root .bath-name:focus{border-color:var(--brass);outline:none;background:#fff}.tbcfg-root .bath-body{padding:14px}.tbcfg-root .meas-title{font-size:13px;font-weight:700;color:var(--ink);margin:4px 0 9px}.tbcfg-root .meas-sub{display:block;font-size:11px;font-weight:400;color:var(--ink-soft);margin-top:1px}.tbcfg-root .lampbtn{border:1px solid var(--line);border-radius:20px;font-size:10px;padding:3px 9px;cursor:pointer;background:#fff;color:var(--ink-soft);font-weight:700;letter-spacing:.02em}.tbcfg-root .lampbtn.on{background:#eff6ff;border-color:var(--brass);color:var(--brass-deep)}.tbcfg-root .lampbtn.off{background:#f1f5f9;color:#64748b}.tbcfg-root .zone-head .zt{font-size:11px}.tbcfg-root .zone-el{align-items:start}.tbcfg-root .zone-el .eldims{display:flex;gap:12px;flex-wrap:wrap}.tbcfg-root .dim{display:flex;flex-direction:column;gap:2px}.tbcfg-root .dl{font-size:10px;color:var(--ink-soft);letter-spacing:.02em}.tbcfg-root .dg{display:flex;align-items:center;gap:3px}.tbcfg-root .zone-el .eldims .dnum{width:44px;font-size:12px;padding:4px 5px;border:1px solid var(--line);border-radius:6px;background:#fff;text-align:right}.tbcfg-root .du{font-size:11px;color:var(--ink-soft);margin-right:2px}.tbcfg-root .toprow{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:24px;align-items:start;margin-bottom:24px}
  @media (max-width:900px){.tbcfg-root .toprow{grid-template-columns:1fr} }.tbcfg-root .menucol{min-width:0}.tbcfg-root .scene-panel{margin-bottom:0}.tbcfg-root .modal-ov{position:fixed;inset:0;background:rgba(20,18,14,.5);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}.tbcfg-root .modal-box{background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.3);width:100%;max-width:440px;max-height:90vh;overflow:auto;padding:22px}.tbcfg-root .modal-title{font-size:18px;font-weight:700;margin:0 0 3px}.tbcfg-root .modal-sub{font-size:12px;color:var(--ink-soft);margin:0 0 8px}.tbcfg-root .mstep-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);font-weight:700;margin:15px 0 8px}.tbcfg-root .mopts{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tbcfg-root .mopt{border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px;cursor:pointer;text-align:center;font-size:13px;font-weight:600;color:var(--ink)}.tbcfg-root .mopt:hover{border-color:var(--brass)}.tbcfg-root .mopt.sel{border-color:var(--brass);background:#eff6ff;color:var(--brass-deep);box-shadow:0 0 0 1px var(--brass) inset}.tbcfg-root .mopt img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:7px;margin-bottom:6px;display:block}.tbcfg-root .mtoggle{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}.tbcfg-root .mtoggle button{flex:1;border:none;background:#fff;padding:9px 6px;cursor:pointer;font-size:13px;color:var(--ink-soft);border-right:1px solid var(--line)}.tbcfg-root .mtoggle button:last-child{border-right:none}.tbcfg-root .mtoggle button.sel{background:var(--brass);color:#fff;font-weight:700}.tbcfg-root .mdisc{font-size:12px;color:var(--ink-soft);background:#f1f5f9;border-radius:8px;padding:10px 12px;margin:14px 0;line-height:1.5}.tbcfg-root .mdims{display:flex;gap:16px;flex-wrap:wrap}.tbcfg-root .mdim{display:flex;flex-direction:column;gap:3px}.tbcfg-root .mdim .dl{font-size:11px;color:var(--ink-soft)}.tbcfg-root .mdim .dg{display:flex;align-items:center;gap:4px}.tbcfg-root .mdim input{width:52px;font-size:13px;padding:6px 6px;border:1px solid var(--line);border-radius:6px;text-align:right;background:#fff;color:var(--ink)}.tbcfg-root .mdim .du{font-size:12px;color:var(--ink-soft)}.tbcfg-root .mfoot{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}.tbcfg-root .cparts{display:flex;flex-direction:column;gap:6px}.tbcfg-root .cpart{display:grid;grid-template-columns:1fr auto auto auto;gap:8px;align-items:center;background:#232830 0;background:#f8fafc;border:1px solid var(--line);border-radius:8px;padding:7px 10px}.tbcfg-root .cpart .cpn{font-size:13px}.tbcfg-root .cpart .cpp{font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums}.tbcfg-root .cpart .stepper{display:flex;align-items:center;gap:4px}.tbcfg-root .cpart .stepper button{width:24px;height:24px;padding:0;cursor:pointer;border:1px solid var(--line);background:#fff;border-radius:6px}.tbcfg-root .cpart .stepper .q{min-width:18px;text-align:center;font-variant-numeric:tabular-nums;font-size:13px}.tbcfg-root .csearch{width:100%;padding:9px 11px;font-size:14px;border:1px solid var(--line);border-radius:8px;margin:2px 0 10px;background:#fff;color:var(--ink)}.tbcfg-root .clist{max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:9px;padding:4px;display:flex;flex-direction:column;gap:2px}.tbcfg-root .crow{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;border:none;background:transparent;border-radius:6px;padding:8px 10px;cursor:pointer;font-size:13px;color:var(--ink)}.tbcfg-root .crow:hover{background:#eff6ff}.tbcfg-root .crow.sel{background:#eff6ff;box-shadow:0 0 0 1px var(--brass) inset}.tbcfg-root .crow .crmeta{display:flex;align-items:center;gap:8px;color:var(--ink-soft);font-size:12px;white-space:nowrap}.tbcfg-root .crow .ctype{background:#e2e8f0;color:var(--brass-deep);padding:1px 7px;border-radius:20px;font-size:10px;text-transform:uppercase;letter-spacing:.04em;font-weight:700}.tbcfg-root .csel{margin-top:12px}.tbcfg-root .csel-empty{font-size:12px;color:var(--ink-soft);padding:4px 2px}.tbcfg-root .csel-row{display:flex;align-items:center;gap:10px}.tbcfg-root .csel-row .csn{flex:1;font-size:13px;font-weight:600}.tbcfg-root .csel-row .stepper{display:flex;align-items:center;gap:4px}.tbcfg-root .csel-row .stepper button{width:26px;height:26px;padding:0;cursor:pointer;border:1px solid var(--line);background:#fff;border-radius:6px}.tbcfg-root .csel-row .stepper .q{min-width:20px;text-align:center;font-variant-numeric:tabular-nums}.tbcfg-root .swsel{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 12px;border-bottom:1px solid var(--line)}.tbcfg-root .swsel.need{background:#fdece9;border-bottom:1px solid #f2c9c2}.tbcfg-root .swsel.done{background:#f0f6f1}.tbcfg-root .swsel .swtxt{font-size:12px;color:var(--ink-soft)}.tbcfg-root .swsel .swtxt b{color:var(--ink)}.tbcfg-root .swadd{margin-left:auto;border:1px solid var(--warn);background:#fff;color:var(--warn);border-radius:8px;padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer}.tbcfg-root .swadd:hover{background:var(--warn);color:#fff}.tbcfg-root .swchg{margin-left:auto;border:1px solid var(--line);background:#fff;color:var(--brass-deep);border-radius:8px;padding:5px 11px;font-size:12px;cursor:pointer}.tbcfg-root .swcards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}.tbcfg-root .swcard{border:1px solid var(--line);border-radius:11px;padding:12px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px}.tbcfg-root .swcard.own{justify-content:center;background:#f8fafc}.tbcfg-root .swimg{width:100%;max-width:150px;aspect-ratio:1/1;object-fit:contain;border-radius:8px;background:#f9fafb}.tbcfg-root .swn{font-size:13px;font-weight:700;margin-top:4px}.tbcfg-root .swpr{font-size:13px;color:var(--ink-soft)}.tbcfg-root .swownsub{font-size:11px;color:var(--ink-soft);margin:4px 0 8px}.tbcfg-root .swcolors{font-size:11px;color:var(--ink-soft);display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:center}.tbcfg-root .swchip{border:1px solid var(--line);background:#fff;border-radius:20px;padding:3px 10px;font-size:11px;cursor:pointer;color:var(--ink)}.tbcfg-root .swchip.sel{border-color:var(--brass);background:#eff6ff;color:var(--brass-deep);font-weight:700}.tbcfg-root .swmore{font-size:12px;color:var(--brass-deep);text-decoration:underline;margin:3px 0}.tbcfg-root .swpickbtn{width:100%;padding:8px;font-size:12px;margin-top:4px}.tbcfg-root .bathtabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;align-items:center}.tbcfg-root .bathtab{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#f8fafc;border-radius:9px;padding:8px 12px;font-size:13px;cursor:pointer;color:var(--ink-soft)}.tbcfg-root .bathtab:hover{border-color:var(--brass)}.tbcfg-root .bathtab.active{color:var(--ink);font-weight:700;background:#fff;border-color:var(--brass);box-shadow:0 0 0 1px var(--brass) inset}.tbcfg-root .bathtab .bathdup{display:inline-flex;color:#94a3b8;font-size:14px;line-height:1}.tbcfg-root .bathtab .bathdup:hover{color:var(--brass-deep)}.tbcfg-root .bathtab .bathx{display:inline-flex;color:#94a3b8;font-size:15px;line-height:1}.tbcfg-root .bathtab .bathx:hover{color:var(--warn)}.tbcfg-root .bathadd{border:1px dashed var(--line);background:transparent;border-radius:9px;padding:8px 12px;font-size:13px;cursor:pointer;color:var(--brass-deep)}.tbcfg-root .bathadd:hover{border-color:var(--brass);background:#eff6ff}
  @keyframes swflash{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 3px var(--warn) inset}}.tbcfg-root .swsel.flash{animation:swflash 1.8s ease}

/* --- Isolation reset: block theme (Astra) typography from bleeding into the widget.
   Element-scoped so intentional uppercase (on class rules) keeps higher specificity. --- */
.tbcfg-root, .tbcfg-root *{ font-family: Montserrat, ui-sans-serif, system-ui, -apple-system, sans-serif !important; }
.tbcfg-root button, .tbcfg-root input, .tbcfg-root select, .tbcfg-root textarea, .tbcfg-root h1, .tbcfg-root h2, .tbcfg-root h3, .tbcfg-root h4, .tbcfg-root a, .tbcfg-root p, .tbcfg-root label{ text-transform: none; letter-spacing: normal; }

/* --- Mobile fixes (phones / narrow viewports) --- */
@media (max-width: 900px){
  /* iOS auto-zooms when a focused field is < 16px; the niche modal auto-focuses
     its width field, so bump all form controls to 16px on small screens. */
  .tbcfg-root input, .tbcfg-root select, .tbcfg-root textarea, .tbcfg-root .mdim input, .tbcfg-root .dg input, .tbcfg-root .eldims input, .tbcfg-root .fixture-row input{ font-size: 16px !important; }
  /* Stack the bathroom name over the LED colour so neither clips off-screen. */
  .tbcfg-root .bath-head{ flex-wrap: wrap; }
  .tbcfg-root .bath-name{ flex: 1 1 100%; min-width: 0; }
  .tbcfg-root .ledcolor{ flex: 1 1 auto; }
  /* Give the modal a little more room on small screens. */
  .tbcfg-root .modal-ov{ padding: 12px; }
  .tbcfg-root .modal-box{ padding: 18px; }
}

/* --- Feature-row layout on mobile: name on its own line, so the Max-width
   inputs and the duplicate/delete buttons line up across every row. --- */
@media (max-width: 900px){
  .tbcfg-root .zone-el{
    grid-template-columns: auto 1fr auto auto !important;
    grid-template-areas: "grip name dup del" "grip dims dims dims" !important;
    row-gap: 6px; align-items: center;
  }
  .tbcfg-root .zone-el .grip{ grid-area: grip; align-self: start; margin-top:2px; }
  .tbcfg-root .zone-el .eln{ grid-area: name; }
  .tbcfg-root .zone-el .eldims{ grid-area: dims; }
  .tbcfg-root .zone-el .dupbtn{ grid-area: dup; align-self:start; }
  .tbcfg-root .zone-el .x-btn:not(.dupbtn){ grid-area: del; align-self:start; }
}

/* --- Component popup: theme buttons force white text, which hid the +/-
   glyphs and washed out the highlighted row. Force readable ink text. --- */
.tbcfg-root .stepper button{ color: var(--ink) !important; }
.tbcfg-root .crow, .tbcfg-root .crow:hover, .tbcfg-root .crow.sel, .tbcfg-root .crow:focus{ color: var(--ink) !important; }

/* --- Lift a tapped/hovered shield (and its tooltip) above neighbouring
   shields so the tip is never hidden behind them. --- */
.tbcfg-root .scene-panel .badge:hover,
.tbcfg-root .scene-panel .badge:focus,
.tbcfg-root .scene-panel .badge.active{ z-index: 30; }

/* --- Save / saved-kits bar --- */
.tbcfg-root .savebar{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  background:#f8fafc; border:1px solid var(--line); border-radius:10px;
  padding:9px 12px; margin-bottom:12px;
}
.tbcfg-root .savebar .savestate{ font-size:12px; color:var(--ink-soft); }
.tbcfg-root .savebar .savebtns{ display:flex; gap:6px; flex-wrap:wrap; }
.tbcfg-root .savebar .btn{ font-size:12px; padding:6px 11px; text-decoration:none; }

/* Toast */
.tbcfg-toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(12px);
  background:#1a1d23; color:#fff; padding:11px 18px; border-radius:8px;
  font:14px/1.4 ui-sans-serif,system-ui,sans-serif; box-shadow:0 8px 24px rgba(0,0,0,.25);
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; z-index:100000;
}
.tbcfg-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* --- Save controls live in the header, right-aligned --- */
.tbcfg-root header.top{ justify-content:space-between; flex-wrap:wrap; gap:12px; }
.tbcfg-root header.top #tbcfg-savebar{ margin-left:auto; }
.tbcfg-root header.top .savebar{
  margin-bottom:0;
  background:transparent;
  border:0;
  padding:0;
  gap:12px;
}
.tbcfg-root header.top .savebar .savestate{ text-align:right; }

@media (max-width: 900px){
  /* Full width under the title on phones so nothing crowds or clips. */
  .tbcfg-root header.top #tbcfg-savebar{ margin-left:0; width:100%; }
  .tbcfg-root header.top .savebar{
    justify-content:space-between;
    background:#f8fafc;
    border:1px solid var(--line);
    border-radius:10px;
    padding:9px 12px;
  }
  .tbcfg-root header.top .savebar .savestate{ text-align:left; }
}

/* "Why this fee?" marker */
.tbcfg-root .tbcfg-why{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; margin-left:5px; padding:0;
  border:1px solid var(--line); border-radius:50%;
  background:#fff; color:var(--brass-deep);
  font-size:11px; font-weight:700; line-height:1; cursor:pointer; vertical-align:middle;
}
.tbcfg-root .tbcfg-why:hover{ border-color:var(--brass); background:#eff6ff; }
.tbcfg-toast{ max-width:min(560px, 92vw); text-align:left; line-height:1.5; }

/* Read-only extra parts (customer view) */
.tbcfg-root .cpart.cpart-ro{ grid-template-columns:1fr auto; }
.tbcfg-root .cpart.cpart-ro .cpp{ color:var(--ink-soft); font-variant-numeric:tabular-nums; }

/* Blocking flags + out-of-range measurement guard (v0.17.0) */
.tbcfg-root .flag.stop{ background:#fdece9; color:#a3271a; border:1px solid #f2c9c2; align-items:flex-start; font-size:12.5px; line-height:1.5; }
.tbcfg-root .dim.over .dnum[data-unit="ft"]{ border-color:#d9534f; background:#fff6f5; }
.tbcfg-root .dimwarn{ font-size:11px; line-height:1.45; color:#a3271a; max-width:210px; margin-top:3px; }
.tbcfg-root .dimfix{ display:inline-block; margin-top:3px; border:1px solid #d9534f; background:#fff; color:#a3271a; border-radius:6px; padding:2px 8px; font-size:11px; font-weight:700; cursor:pointer; }
.tbcfg-root .dimfix:hover{ background:#d9534f; color:#fff; }


/* ===== v0.20.0 — site-theme skin, layout and control additions ===== */

/* Headings follow the site (Astra uses Oswald for h1). */
.tbcfg-root h1, .tbcfg-root .modal-title{ font-family: Oswald, Impact, "Helvetica Neue", Helvetica, Arial, sans-serif !important; }

/* The page already supplies its own gutters — do not inset a second time. */
.tbcfg-root .wrap{ max-width: none; margin: 0; padding: 0 0 48px; }

/* Totals: keep every figure hard right, even when the label wraps on a narrow phone. */
.tbcfg-root .totals .t-row{ gap: 12px; align-items: baseline; }
.tbcfg-root .totals .t-row > span:first-child{ min-width: 0; }
.tbcfg-root .totals .t-row > span:last-child{ margin-left: auto; text-align: right; white-space: nowrap; flex: 0 0 auto; }

/* "beta" marker beside the title. */
.tbcfg-root .top h1 .beta{ font-family: Montserrat, sans-serif !important; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; margin-left: 8px; padding: 3px 8px; border-radius: 20px; background: #eff6ff; color: var(--brass-deep); border: 1px solid var(--brass); }

/* Count badge on the six category buttons. */
.tbcfg-root .six .cat{ position: relative; }
.tbcfg-root .six .cat .catcount{ position: absolute; top: -6px; right: -6px; z-index: 2; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 20px; background: var(--brass); color: #fff; font-size: 11px; font-weight: 700; line-height: 22px; text-align: center; box-shadow: 0 1px 3px rgba(30,41,59,.3); pointer-events: none; }

/* Order notes. */
.tbcfg-root .notes{ margin-top: 14px; }
.tbcfg-root .notes label{ display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); font-weight: 700; margin-bottom: 6px; }
.tbcfg-root .notes textarea{ width: 100%; min-height: 74px; resize: vertical; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-size: 14px; line-height: 1.5; }
.tbcfg-root .notes textarea:focus{ border-color: var(--brass); outline: none; }
.tbcfg-root .notes .noteshint{ font-size: 11px; color: var(--ink-soft); margin-top: 5px; }

/* Destructive control sits apart from the save actions. */
.tbcfg-root .savebar .btn.danger{ color: #b4582a; border-color: #e2c4b6; }
.tbcfg-root .savebar .btn.danger:hover{ background: #b4582a; border-color: #b4582a; color: #fff; }

/* ===== v0.20.1-beta ===== */
/* The builder sat on its own --paper panel, which read as a grey slab dropped
   onto a white page. The cards inside carry their own background, border and
   shadow, so they still separate from the page without it. */
.tbcfg-root{ background: transparent; }

/* ---- admin Breakdown (v0.23.0) — only ever rendered for staff ---- */
.tbcfg-root .bd{ border-top: 1px dashed var(--line); margin-top: 10px; padding-top: 8px; }
.tbcfg-root .bd-toggle{ border: none; background: transparent; padding: 2px 0; cursor: pointer;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--brass-deep); font-family: inherit; }
.tbcfg-root .bd-toggle:hover{ text-decoration: underline; }
.tbcfg-root .bd-caret{ font-size: 10px; }
.tbcfg-root .bd-body{ margin-top: 8px; background: #f8fafc; border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px; }
.tbcfg-root .bd-row{ display: flex; justify-content: space-between; gap: 12px;
  font-size: 12.5px; color: var(--ink-soft); padding: 2px 0; }
.tbcfg-root .bd-row > span:last-child{ font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbcfg-root .bd-warn{ font-size: 11.5px; line-height: 1.45; background: #fbf0e8; color: var(--warn);
  border-radius: 6px; padding: 7px 9px; margin-bottom: 8px; }
.tbcfg-root .bd-tbl{ width: 100%; border-collapse: collapse; margin-top: 9px;
  font-size: 12px; font-variant-numeric: tabular-nums; }
.tbcfg-root .bd-tbl th, .tbcfg-root .bd-tbl td{ padding: 4px 3px; text-align: right; }
.tbcfg-root .bd-tbl thead th{ font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-soft); font-weight: 700; border-bottom: 1px solid var(--line); }
.tbcfg-root .bd-tbl tbody th{ text-align: left; font-weight: 600; color: var(--ink-soft); }
.tbcfg-root .bd-tbl tr.bd-list th, .tbcfg-root .bd-tbl tr.bd-list td{ color: var(--ink); font-weight: 700;
  border-bottom: 1px solid var(--line); }
.tbcfg-root .bd-tbl .bd-net{ color: var(--ok); font-weight: 700; }
.tbcfg-root .bd-tbl .bd-neg{ color: var(--warn); }
.tbcfg-root .bd-note{ font-size: 10.5px; color: #64748b; margin-top: 8px; line-height: 1.5; }

/* ---- LED colour must be chosen, not defaulted (v0.24.0) ---- */
.tbcfg-root .ledsel.needs-pick{
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.18);
  animation: tbcfg-pick 1.6s ease-in-out infinite;
}
.tbcfg-root .ledsel.needs-pick:focus{ animation: none; box-shadow: 0 0 0 3px rgba(220,38,38,.3); }
@keyframes tbcfg-pick{
  0%,100%{ box-shadow: 0 0 0 3px rgba(220,38,38,.18); }
  50%    { box-shadow: 0 0 0 5px rgba(220,38,38,.06); }
}
@media (prefers-reduced-motion: reduce){
  .tbcfg-root .ledsel.needs-pick{ animation: none; }
}
.tbcfg-root .ledcolor .pick-hint{
  margin-left: 6px; font-size: 10px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: #dc2626; white-space: nowrap;
}

/* ---- v0.25.1: the LED Color control must never be what shrinks ----
   .ledcolor was flex:1 1 auto with white-space:nowrap, so it could shrink
   below its own content, and .bath-card has overflow:hidden — which clipped
   the select (and the "required" pip) off the right edge on desktop. The
   bathroom NAME is the elastic thing here; the colour control is fixed.

   !important is required, not decorative: the earlier .bath-head .bath-name rule
   has identical specificity, and without it the name keeps flex-basis:auto ->
   width:100%, which pushes the colour control onto a second row. Measured on
   live before and after. */
.tbcfg-root .bath-head{ flex-wrap: wrap; row-gap: 8px; }
.tbcfg-root .bath-head .bath-name{ flex: 1 1 120px !important; min-width: 0 !important; width: auto !important; }
.tbcfg-root .bath-head .ledcolor{ flex: 0 0 auto !important; margin-left: auto; max-width: 100%; }
.tbcfg-root .bath-head .ledcolor select{ max-width: 130px; }
@media (max-width: 560px){
  .tbcfg-root .bath-head .bath-name{ flex: 1 1 100% !important; }
  .tbcfg-root .bath-head .ledcolor{ margin-left: 0; }
}

/* ---- staff-quoted shipping (v0.26.0) — never rendered for a customer ---- */
.tbcfg-root .shipq{
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line);
}
.tbcfg-root .shipq label{
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--brass-deep);
}
.tbcfg-root .shipq-in{
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 13px; color: var(--ink-soft);
}
.tbcfg-root .shipq-in input{
  width: 84px; font-size: 13px; padding: 5px 7px; text-align: right;
  border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tbcfg-root .shipq-in input:focus{ border-color: var(--brass); outline: none; }
.tbcfg-root .shipq-hint{ flex: 1 1 100%; font-size: 10.5px; color: #64748b; line-height: 1.45; }