/* ============================================================
   UI CONSTRUCT — construct.html
   Login screens keep the Elemental admin look; once signed in the
   app switches to a Design Center-style light UI (dark optional).
   ============================================================ */

/* ---------- admin chrome shared with build.html (login only) ---------- */
body.admin { min-height: 100vh; }
[hidden] { display: none !important; }
.admin__top { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem var(--gutter); border-bottom: 1px solid var(--line-2); position: sticky; top: 0; background: rgba(10,8,7,0.82); backdrop-filter: blur(12px); z-index: 50; }
.admin__top img { height: 90px; }
.admin__top .who { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); letter-spacing: 0.08em; }
.btn-sm { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--line); padding: 0.5rem 0.9rem; border-radius: 100px; color: var(--bone-dim); transition: 0.3s; background: none; cursor: pointer; }
.btn-sm:hover { border-color: var(--oxblood-lite); color: var(--bone); }
.admin__login { min-height: 78vh; display: grid; place-items: center; padding: 2rem var(--gutter); }
.admin__card { width: 100%; max-width: 420px; border: 1px solid var(--line); border-radius: 18px; padding: 2.4rem; background: linear-gradient(165deg, var(--ink-3), var(--ink)); }
.admin__badge { display: block; width: 120px; height: 120px; margin: 0 auto 1.6rem; }
.admin__card h1 { font-size: var(--step-2); margin: 0.6rem 0 0.4rem; }
.admin__card p { color: var(--bone-dim); font-size: 0.9rem; margin-bottom: 1.6rem; }
.admin__card .field { margin-bottom: 1.1rem; }
.admin__card .btn { width: 100%; justify-content: center; }
#loginStatus, #pwGateStatus { margin-top: 1rem; font-size: 0.8rem; min-height: 1em; }
body.uc-on .admin__top, body.uc-on .vignette { display: none; }
body.uc-on { background: var(--uc-bg, #f4f5f6); overflow: hidden; }

/* ---------- tokens ---------- */
.uc-app, .uc-modal, .uc-popmenu, #ucPrintDoc {
  --bg: #f4f5f6; --panel: #ffffff; --panel-2: #f7f8f9; --hover: #f1f3f5; --line: #e3e5e8; --line-2: #eceef0;
  --text: #212327; --text-2: #50565e; --muted: #858c96; --blue: #006fff; --blue-2: #0059d6; --blue-soft: #e6f0ff;
  --green: #2ea043; --green-soft: #e3f5e6; --red: #e5343a; --red-soft: #fdecec; --orange: #f5a524; --canvas: #ffffff;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 6px 20px rgba(16,24,40,.08); --radius: 10px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text); font-size: 14px; letter-spacing: 0;
}
.uc-app[data-uc-theme="dark"], .uc-app[data-uc-theme="dark"] ~ .uc-modal, .uc-app[data-uc-theme="dark"] ~ .uc-popmenu {
  --bg: #121315; --panel: #1b1d20; --panel-2: #212428; --hover: #25282c; --line: #2d3136; --line-2: #25282c;
  --text: #eceef1; --text-2: #b4bac2; --muted: #7d858f; --blue: #3d8bff; --blue-2: #5c9dff; --blue-soft: #16294a;
  --green-soft: #173222; --red-soft: #3a1b1d; --canvas: #17191b; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
}
.uc-app *, .uc-modal *, .uc-popmenu * { box-sizing: border-box; }
:where(.uc-app, .uc-modal, .uc-popmenu) button { font-family: inherit; font-size: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.uc-app input, .uc-app select, .uc-app textarea, .uc-modal input, .uc-modal select, .uc-modal textarea { font-family: inherit; font-size: 13px; color: var(--text); }
.uc-ico { display: block; flex: none; }
.uc-muted { color: var(--muted); font-size: 12.5px; line-height: 1.5; }

/* ---------- app frame ---------- */
.uc-app { position: fixed; inset: 0; display: grid; grid-template-columns: 50px 1fr; grid-template-rows: 50px 1fr; background: var(--bg); z-index: 10; }
.uc-rail { grid-row: 1 / 3; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; padding: 8px 0; gap: 4px; z-index: 5; }
.uc-rail__logo { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; margin-bottom: 14px; }
.uc-rail__logo img { width: 28px; height: 28px; }
.uc-rail__nav { display: flex; flex-direction: column; gap: 6px; }
.uc-rail__nav button, .uc-rail__foot > * { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); transition: background .15s, color .15s; }
.uc-rail__nav button:hover, .uc-rail__foot > *:hover { background: var(--hover); color: var(--text); }
.uc-rail__nav button.is-active { color: var(--blue); background: var(--blue-soft); }
.uc-rail__nav button:disabled { opacity: .35; pointer-events: none; }
.uc-rail__foot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.uc-top { grid-column: 2; background: var(--panel); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 14px; padding: 0 14px; min-width: 0; }
.uc-projsw { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; padding: 7px 10px; border-radius: 8px; max-width: 360px; }
.uc-projsw:hover { background: var(--hover); }
.uc-projsw span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-save { font-size: 12px; color: var(--muted); white-space: nowrap; }
.uc-save.is-err { color: var(--red); }
.uc-top__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.uc-top__who { font-size: 12px; color: var(--muted); }
.uc-units { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 5px 8px; font-size: 12px; color: var(--text-2); }
.uc-main { grid-column: 2; position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.uc-view { position: absolute; inset: 0; overflow: auto; }

/* ---------- primitives ---------- */
.uc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line) !important; background: var(--panel) !important; font-weight: 500; font-size: 13px; color: var(--text) !important; white-space: nowrap; transition: .15s; }
.uc-btn:hover { background: var(--hover) !important; }
.uc-btn--primary { background: var(--blue) !important; border-color: var(--blue) !important; color: #fff !important; }
.uc-btn--primary:hover { background: var(--blue-2) !important; }
.uc-btn--primary:disabled { opacity: .45; }
.uc-btn--danger { background: var(--red) !important; border-color: var(--red) !important; color: #fff !important; }
.uc-btn--ghost { border-color: transparent !important; background: transparent !important; color: var(--text-2) !important; }
.uc-btn--ghost:hover { background: var(--hover) !important; color: var(--text) !important; }
.uc-btn--sm { height: 26px; padding: 0 9px; font-size: 12px; border-radius: 6px; }
.uc-btn--block { width: 100%; }
.uc-link { color: var(--blue) !important; font-weight: 500; }
.uc-link:hover { text-decoration: underline; }
.uc-link--danger { color: var(--red) !important; }
.uc-iconbtn { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); transition: .15s; }
.uc-iconbtn:hover { background: var(--hover); color: var(--text); }
.uc-iconbtn.is-active { color: #fff; background: var(--blue); }
.uc-iconbtn:disabled { opacity: .35; pointer-events: none; }
.uc-input, .uc-field input, .uc-field select, .uc-field textarea { width: 100%; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); padding: 0 10px; outline: none; transition: .15s; }
.uc-field textarea { height: auto; padding: 8px 10px; resize: vertical; }
.uc-input:focus, .uc-field input:focus, .uc-field select:focus, .uc-field textarea:focus { border-color: var(--blue); background: var(--panel); }
.uc-field { display: block; margin-bottom: 12px; }
.uc-field > span { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-2); margin-bottom: 5px; font-weight: 500; }
.uc-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.uc-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 10px; }
.uc-search { position: relative; }
.uc-search .uc-ico { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.uc-search input { padding-left: 32px; }
.uc-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.uc-seg { display: inline-flex; background: var(--panel); border-radius: 10px; padding: 3px; gap: 2px; box-shadow: var(--shadow); }
.uc-seg button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: 8px; color: var(--text-2); font-weight: 500; }
.uc-seg button:hover { color: var(--text); }
.uc-seg button.is-active { background: var(--blue); color: #fff; }
.uc-seg--flat { box-shadow: none; background: var(--panel-2); border: 1px solid var(--line); }
.uc-step { display: inline-flex; align-items: center; background: var(--panel-2); border-radius: 8px; height: 30px; }
.uc-step button { width: 30px; height: 30px; display: grid; place-items: center; color: var(--muted); border-radius: 8px; }
.uc-step button:hover { color: var(--text); background: var(--hover); }
.uc-step input { width: 44px; height: 30px; border: 0; background: transparent; text-align: center; font-weight: 500; -moz-appearance: textfield; }
.uc-step input::-webkit-outer-spin-button, .uc-step input::-webkit-inner-spin-button { -webkit-appearance: none; }
.uc-badge { display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 7px; border-radius: 10px; background: var(--green-soft); color: var(--green); font-size: 11.5px; font-weight: 600; }
.uc-badge--blue { background: var(--blue-soft); color: var(--blue); }
.uc-badge--grey { background: var(--hover); color: var(--text-2); }
.uc-est { font-size: 10px; font-weight: 600; color: var(--orange); border: 1px solid var(--orange); border-radius: 4px; padding: 0 4px; margin-left: 6px; vertical-align: 1px; }
.uc-thumb { width: 34px; height: 34px; object-fit: contain; flex: none; border-radius: 6px; }
.uc-thumb--lg { width: 64px; height: 64px; }
.uc-empty { padding: 40px 16px; text-align: center; color: var(--muted); }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px); background: #212327; color: #fff; font-family: "Inter", sans-serif; font-size: 13px; padding: 10px 16px; border-radius: 10px; opacity: 0; pointer-events: none; transition: .3s; z-index: 400; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- modal & menus ---------- */
.uc-modal { position: fixed; inset: 0; background: rgba(15,17,20,.45); display: none; align-items: flex-start; justify-content: center; padding: 10vh 16px; z-index: 300; overflow-y: auto; }
.uc-modal.open { display: flex; }
.uc-modal__card { position: relative; width: 100%; max-width: 440px; background: var(--panel); border-radius: 14px; padding: 22px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.uc-modal__card.is-wide { max-width: 640px; }
.uc-modal__x { position: absolute; right: 12px; top: 12px; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); }
.uc-modal__x:hover { background: var(--hover); color: var(--text); }
.uc-modal__title { font-size: 17px; font-weight: 600; margin: 0 30px 8px 0; font-family: inherit; }
.uc-modal__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.uc-popmenu { position: fixed; z-index: 250; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; min-width: 240px; max-height: 70vh; overflow-y: auto; }
.uc-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 8px; text-align: left; color: var(--text); font-size: 13px; }
.uc-menu__item:hover { background: var(--hover); }
.uc-menu__item.is-active { color: var(--blue); font-weight: 600; }
.uc-menu__item.is-danger { color: var(--red); }
.uc-menu__sep { height: 1px; background: var(--line); margin: 5px 4px; }
.uc-menu__head { font-size: 11px; font-weight: 600; color: var(--muted); padding: 6px 10px 4px; text-transform: uppercase; letter-spacing: .04em; }

/* ---------- home (projects) ---------- */
.uc-home { max-width: 1180px; margin: 0 auto; padding: 36px 28px 60px; }
.uc-home__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.uc-home__head h1 { font-size: 26px; font-weight: 700; margin: 0 0 4px; font-family: inherit; letter-spacing: -.01em; }
.uc-home__note { background: #fff8e6; border: 1px solid #f7d58a; color: #7a5a10; border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 18px; }
.uc-home__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.uc-projcard { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; cursor: pointer; transition: .15s; display: flex; flex-direction: column; }
.uc-projcard:hover { border-color: var(--blue); box-shadow: var(--shadow); }
.uc-projcard__art { height: 110px; background: linear-gradient(135deg, var(--blue-soft), var(--panel-2)); display: grid; place-items: center; color: var(--blue); }
.uc-projcard__body { padding: 12px 14px; }
.uc-projcard__name { font-weight: 600; font-size: 14.5px; }
.uc-projcard__meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.uc-projcard__stats { display: flex; gap: 12px; font-size: 12px; color: var(--text-2); margin-top: 8px; }
.uc-projcard__foot { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px 8px 14px; border-top: 1px solid var(--line-2); }
.uc-projcard--new { border-style: dashed; align-items: center; justify-content: center; min-height: 220px; color: var(--blue); font-weight: 600; gap: 8px; }

/* ---------- floor plan view ---------- */
.uc-planview { overflow: hidden; background: var(--canvas); }
.uc-stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
.uc-stage svg { width: 100%; height: 100%; display: block; user-select: none; }
.uc-stage[data-cursor="pan"], .uc-stage.is-panning { cursor: grab; }
.uc-stage[data-cursor="cross"] { cursor: crosshair; }
.uc-stage[data-cursor="place"] { cursor: copy; }
.uc-float { position: absolute; z-index: 20; }
.uc-float--tl { left: 16px; top: 16px; display: flex; gap: 8px; }
.uc-float--tc { left: 50%; top: 16px; transform: translateX(-50%); }
.uc-float--tr { right: 16px; top: 16px; bottom: 124px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; }
.uc-float--tr > * { pointer-events: auto; }
.uc-float--l { left: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
.uc-float--bc { left: 50%; bottom: 16px; transform: translateX(-50%); }
.uc-float--br { right: 16px; bottom: 16px; }
.uc-float--bl { left: 70px; bottom: 20px; }
.uc-vstack { background: var(--panel); border-radius: 10px; box-shadow: var(--shadow); padding: 3px; display: flex; flex-direction: column; gap: 2px; }
.uc-vstack .uc-iconbtn { width: 32px; height: 32px; }
.uc-vstack__3d { font-weight: 600; font-size: 12.5px; color: var(--text-2); width: 32px; height: 32px; border-radius: 8px; }
.uc-vstack__3d:hover { background: var(--hover); }
.uc-vstack__3d.is-active { background: var(--blue); color: #fff; }
.uc-floorbtn { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; background: var(--panel); border-radius: 10px; box-shadow: var(--shadow); font-weight: 500; min-width: 200px; }
.uc-floorbtn .uc-ico:last-child { margin-left: auto; color: var(--muted); }
.uc-toolbar { display: flex; align-items: center; gap: 2px; background: var(--panel); border-radius: 12px; box-shadow: var(--shadow); padding: 5px; }
.uc-toolbar__sep { width: 1px; height: 22px; background: var(--line); margin: 0 5px; }
.uc-toolbar .uc-iconbtn { width: 34px; height: 34px; }
.uc-toolbar__add { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 8px; color: var(--text-2); font-weight: 500; white-space: nowrap; }
.uc-toolbar__add:hover { background: var(--hover); color: var(--text); }
.uc-toolbar__add.is-active { background: var(--blue); color: #fff; }
.uc-banner { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); z-index: 25; background: #2b2e33; color: #fff; border-radius: 10px; padding: 7px 8px 7px 14px; display: flex; align-items: center; gap: 12px; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.2); white-space: nowrap; }
.uc-banner b { font-weight: 600; }
.uc-banner .uc-btn { height: 28px; }
.uc-panel { width: 290px; background: var(--panel); border-radius: 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; max-height: 100%; min-height: 0; overflow: hidden; }
.uc-panel__head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px 14px; font-weight: 600; }
.uc-panel__head .uc-iconbtn { margin-left: auto; width: 28px; height: 28px; }
.uc-panel__body { overflow-y: auto; padding: 0 6px 8px; min-height: 0; }
.uc-panel__foot { border-top: 1px solid var(--line-2); padding: 8px 12px; }
.uc-list__item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.uc-list__item:hover { background: var(--hover); }
.uc-list__item.is-active { background: var(--blue-soft); }
.uc-list__item .uc-thumb { width: 28px; height: 28px; }
.uc-list__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-list__sub { display: block; font-size: 11.5px; color: var(--muted); }
.uc-list__price { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.uc-list__add { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: var(--blue); flex: none; }
.uc-list__add:hover { background: var(--blue-soft); }
.uc-catrow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 8px; text-align: left; color: var(--text); }
.uc-catrow:hover { background: var(--hover); }
.uc-catrow .uc-ico:first-child { color: var(--text-2); }
.uc-catrow .uc-ico:last-child { margin-left: auto; color: var(--muted); }
.uc-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border-radius: 8px; text-align: left; font-size: 13px; }
.uc-opt:hover { background: var(--hover); }
.uc-opt.is-active { background: var(--blue-soft); }
.uc-opt__val { margin-left: auto; font-size: 12px; color: var(--muted); }
.uc-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.uc-pop__tabs { display: flex; gap: 4px; padding: 4px; margin: 0 8px 6px; background: var(--panel-2); border-radius: 9px; }
.uc-pop__tabs button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 30px; border-radius: 7px; color: var(--text-2); font-weight: 500; }
.uc-pop__tabs button.is-active { background: var(--panel); color: var(--blue); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.uc-legend { background: var(--panel); border-radius: 12px; box-shadow: var(--shadow); padding: 10px 12px; width: 310px; }
.uc-legend__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.uc-legend__row select { border: 0; background: transparent; font-weight: 600; font-size: 12.5px; color: var(--text); padding: 0; cursor: pointer; }
.uc-legend__bands { display: flex; gap: 10px; }
.uc-legend__bands button { color: var(--muted); font-size: 12.5px; }
.uc-legend__bands button.is-active { color: var(--blue); font-weight: 600; }
.uc-legend__bar { height: 6px; border-radius: 3px; margin: 9px 0 4px; background: linear-gradient(90deg, #e53935, #fb8c00, #fdd835, #7cc442, #2ea043); }
.uc-legend__bar--dori { background: linear-gradient(90deg, #c9ddff 0 25%, #8fb8ff 25% 50%, #4d8dff 50% 75%, #1f5fe0 75%); }
.uc-legend__ends { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); }
.uc-scalebar { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--text-2); }
.uc-scalebar__line { height: 6px; border: 1.5px solid var(--text-2); border-top: 0; }
.uc-scalebar__btn { display: flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 11.5px; margin-top: 4px; }
.uc-scalebar__btn.is-warn { color: #c77700; }
/* svg content */
.uc-devlbl { font-family: "Inter", sans-serif; font-size: 11px; font-weight: 600; fill: #212327; paint-order: stroke; stroke: #fff; stroke-width: 3.5px; stroke-linejoin: round; }
.uc-app[data-uc-theme="dark"] .uc-devlbl { fill: #eceef1; stroke: #17191b; }
.uc-meas { font-family: "Inter", sans-serif; font-size: 11px; font-weight: 600; fill: #fff; }
.uc-hover-wall { stroke: var(--blue); }
.uc-tmp-line { fill: none; stroke: #006fff; stroke-width: 2; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.uc-handle { fill: #fff; stroke: #006fff; stroke-width: 2; cursor: move; }
.uc-rot { fill: #006fff; stroke: #fff; stroke-width: 2; cursor: grab; }
.uc-marquee { fill: rgba(0,111,255,.08); stroke: #006fff; stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
#ucPlanImg.is-dark { filter: invert(.92) hue-rotate(180deg); }
/* inspector */
.uc-inspector { width: 300px; }
.uc-insp__hero { display: flex; gap: 12px; align-items: center; padding: 4px 14px 12px; border-bottom: 1px solid var(--line-2); }
.uc-insp__hero b { display: block; font-size: 14px; }
.uc-insp__hero span { font-size: 12px; color: var(--muted); }
.uc-insp__sec { padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
.uc-insp__sec:last-child { border-bottom: 0; }
.uc-insp__title { font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.uc-kv { display: flex; justify-content: space-between; font-size: 12.5px; padding: 4px 0; color: var(--text-2); }
.uc-kv b { color: var(--text); font-weight: 500; }
.uc-range { width: 100%; accent-color: var(--blue); }
.uc-accrow { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.uc-accrow select { flex: 1; min-width: 0; height: 28px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); font-size: 12px; }
.uc-accrow input { width: 50px; height: 28px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); text-align: center; }
.uc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.uc-chip { height: 26px; padding: 0 10px; border-radius: 13px; border: 1px solid var(--line) !important; font-size: 12px; color: var(--text-2) !important; }
.uc-chip:hover { border-color: var(--blue) !important; color: var(--blue) !important; }
.uc-exp { font-size: 12.5px; }
.uc-exp__row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line-2); }
.uc-exp__row:last-child { border-bottom: 0; }
.uc-exp__row b { font-weight: 600; }
.uc-exp__val { margin-left: auto; font-weight: 600; }
.uc-3d { position: absolute; inset: 0; z-index: 15; background: var(--canvas); }

/* ---------- rack view ---------- */
.uc-rackview { display: flex; gap: 16px; padding: 16px; min-height: 100%; align-items: flex-start; }
.uc-rackpick { width: 300px; flex: none; position: sticky; top: 0; max-height: calc(100vh - 82px); display: flex; flex-direction: column; }
.uc-rackpick .uc-panel__body { flex: 1; }
.uc-rackcard { flex: none; width: 420px; padding: 14px 18px; display: flex; flex-direction: column; }
.uc-rackcard__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.uc-rackframe { position: relative; margin: 0 auto; width: 360px; background: linear-gradient(180deg, #e9ebee, #d8dce1); border-radius: 6px; padding: 16px 16px 20px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.uc-app[data-uc-theme="dark"] .uc-rackframe { background: linear-gradient(180deg, #2a2d31, #202326); }
.uc-rackframe__cap { height: 12px; margin: -8px -8px 8px; border-radius: 4px 4px 0 0; background: repeating-linear-gradient(90deg, #c9ced4 0 3px, #dfe3e7 3px 6px); }
.uc-rackslots { position: relative; background: #1d1f22; border-radius: 3px; padding: 0 14px; }
.uc-rackslots::before, .uc-rackslots::after { content: ""; position: absolute; top: 0; bottom: 0; width: 14px; background: repeating-linear-gradient(180deg, #b9bec5 0 2px, #9ea4ab 2px 4px, #b9bec5 4px 23px); }
.uc-rackslots::before { left: 0; } .uc-rackslots::after { right: 0; }
.uc-rackU { position: relative; height: 23px; border-bottom: 1px solid rgba(255,255,255,.03); }
.uc-rackU__n { position: absolute; left: -44px; width: 20px; top: 50%; transform: translateY(-50%); text-align: right; font-size: 10px; color: var(--muted); }
.uc-rackU__add { position: absolute; inset: 1px 0; display: none; align-items: center; justify-content: center; gap: 6px; background: rgba(0,111,255,.18); color: #cfe0ff; font-size: 11.5px; border: 1px dashed rgba(92,157,255,.6); border-radius: 2px; }
.uc-rackU:hover .uc-rackU__add { display: flex; }
.uc-rackdev { position: absolute; left: 14px; right: 14px; z-index: 2; cursor: grab; background: #e7e9ec center/100% 100% no-repeat; border-radius: 1px; overflow: hidden; }
.uc-rackdev.is-fallback { background: linear-gradient(180deg, #f1f2f4, #d8dbdf); display: flex; align-items: center; padding: 0 10px; font-size: 11px; font-weight: 600; color: #3a3f45; }
.uc-rackdev.is-sel::after, .uc-rackdev:hover::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px var(--blue); }
.uc-rackdev__bar { position: absolute; inset: 0; display: none; align-items: center; justify-content: space-between; padding: 0 8px; background: rgba(0,111,255,.92); color: #fff; font-size: 12px; font-weight: 600; }
.uc-rackdev.is-sel .uc-rackdev__bar { display: flex; }
.uc-rackdev.is-over { outline: 2px solid var(--red); }
.uc-rackfoot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; font-size: 13px; }
.uc-rackfoot select { border: 0; background: transparent; font-weight: 500; color: var(--text-2); }
.uc-sumcol { flex: 1; min-width: 300px; max-width: 460px; display: flex; flex-direction: column; gap: 14px; }
.uc-sumcard__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line-2); font-weight: 600; }
.uc-sumcard__head .uc-btn { margin-left: auto; }
.uc-sumrow { display: flex; align-items: center; gap: 10px; padding: 6px 14px; font-size: 13px; }
.uc-sumrow .uc-thumb { width: 30px; height: 30px; }
.uc-sumrow__name { flex: 1; min-width: 0; }
.uc-sumrow__name small { display: block; color: var(--muted); font-size: 11.5px; }
.uc-rackstats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 14px; }
.uc-meter { height: 6px; background: var(--panel-2); border-radius: 3px; overflow: hidden; margin-top: 6px; border: 1px solid var(--line-2); }
.uc-meter i { display: block; height: 100%; background: var(--blue); border-radius: 3px; }
.uc-meter i.is-over { background: var(--red); }

/* ---------- topology / ports ---------- */
.uc-netview { overflow: hidden; background: var(--canvas); }
.uc-topo-actions { position: absolute; right: 16px; top: 14px; z-index: 5; display: flex; gap: 8px; }
.uc-topo-node { cursor: pointer; }
.uc-topo-node rect.bg { fill: var(--panel); stroke: var(--line); }
.uc-topo-node.is-sel rect.bg { stroke: var(--blue); stroke-width: 2; }
.uc-topo-name { font-family: "Inter", sans-serif; font-size: 11px; font-weight: 600; fill: var(--text); }
.uc-topo-sub { font-family: "Inter", sans-serif; font-size: 9.5px; fill: var(--muted); }
.uc-portsview { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.uc-portsbar { display: flex; align-items: center; gap: 12px; }
.uc-portcard { padding: 14px 16px; }
.uc-portcard__head { display: flex; align-items: center; gap: 10px; font-weight: 600; margin-bottom: 8px; }
.uc-letter { width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 11.5px; font-weight: 700; display: grid; place-items: center; }
.uc-portgrid { display: flex; justify-content: center; flex-wrap: wrap; gap: 26px; padding: 10px 0 4px; }
.uc-portgroup { display: grid; grid-auto-flow: column; gap: 8px 6px; }
.uc-port { width: 32px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.uc-port__box { width: 32px; height: 32px; border-radius: 6px; background: #cfd3d8; color: #fff; font-size: 11px; font-weight: 700; position: relative; display: flex; align-items: flex-end; padding: 3px 4px; cursor: pointer; }
.uc-port__box small { position: absolute; top: 3px; right: 4px; font-size: 8px; font-weight: 700; }
.uc-port__box.is-used { box-shadow: inset 0 0 0 2px rgba(0,0,0,.18); }
.uc-port__dev { width: 32px; height: 30px; display: grid; place-items: center; }
.uc-port__dev img { width: 26px; height: 26px; object-fit: contain; }
.uc-port__lbl { font-size: 9.5px; color: var(--text-2); max-width: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.uc-portlegend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--text-2); }
.uc-portlegend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 5px; }

/* ---------- cart / quote ---------- */
.uc-cartview { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; padding: 16px; align-items: start; max-width: 1400px; margin: 0 auto; }
.uc-cartlist { padding: 4px 18px; }
.uc-cartadd { display: flex; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--line-2); position: relative; }
.uc-cartadd .uc-search { flex: 1; }
.uc-cartresults { position: absolute; left: 0; right: 0; top: 52px; z-index: 30; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); max-height: 360px; overflow-y: auto; padding: 4px; }
.uc-cartgroup { padding: 12px 0 2px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; display: flex; justify-content: space-between; }
.uc-cartitem { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 4px 14px; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.uc-cartitem:last-child { border-bottom: 0; }
.uc-cartitem__img { width: 56px; height: 56px; object-fit: contain; grid-row: 1 / 3; }
.uc-cartitem__name { font-weight: 600; font-size: 13.5px; }
.uc-cartitem__sku { font-size: 12px; color: var(--muted); margin-top: 1px; }
.uc-cartitem__note { font-size: 11.5px; color: var(--blue); margin-top: 2px; }
.uc-cartitem__trash { color: var(--muted); align-self: start; }
.uc-cartitem__trash:hover { color: var(--red); }
.uc-cartitem__ctl { grid-column: 2 / 4; display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.uc-cartitem__price { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-2); }
.uc-cartitem__price input { width: 82px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); padding: 0 8px; text-align: right; }
.uc-cartitem__price input.is-ov, .uc-step input.is-ov { color: #c77700; }
.uc-cartitem__total { margin-left: auto; font-weight: 700; font-size: 13.5px; }
.uc-cartside { position: sticky; top: 0; display: flex; flex-direction: column; gap: 12px; }
.uc-cartsum { padding: 16px; }
.uc-cartsum__row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; color: var(--text-2); }
.uc-cartsum__total { display: flex; justify-content: space-between; align-items: baseline; font-size: 18px; font-weight: 700; padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--line); }
.uc-cartsum .uc-btn { margin-top: 10px; }
.uc-cartset { padding: 12px 16px; }
.uc-cartset summary { cursor: pointer; font-weight: 600; font-size: 13px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.uc-cartset summary::-webkit-details-marker { display: none; }
.uc-cartset[open] summary { margin-bottom: 10px; }
.uc-kit { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 12px; color: var(--muted); }
.uc-kit select { flex: 1; min-width: 0; height: 28px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); font-size: 12px; }
.uc-kit input { width: 44px; height: 28px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); text-align: center; }

/* ---------- report ---------- */
.uc-reportview { display: grid; grid-template-columns: 300px minmax(0, 1fr); height: 100%; }
.uc-reportside { background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; padding: 14px; }
.uc-reportside h4 { font-size: 13px; font-weight: 600; margin: 16px 0 8px; display: flex; justify-content: space-between; }
.uc-check { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; cursor: pointer; }
.uc-check input { accent-color: var(--blue); width: 15px; height: 15px; }
.uc-check--sub { padding-left: 22px; }
.uc-reportprev { overflow-y: auto; padding: 24px; background: var(--bg); }
.uc-doc { background: #fff; color: #1d1f22; max-width: 860px; margin: 0 auto; padding: 44px 50px; border-radius: 4px; box-shadow: 0 2px 12px rgba(0,0,0,.08); font-family: "Inter", sans-serif; font-size: 12.5px; }
.uc-doc__head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid #e3e5e8; padding-bottom: 16px; margin-bottom: 20px; }
.uc-doc__head h1 { font-size: 26px; font-weight: 700; margin: 0; font-family: inherit; color: #1d1f22; }
.uc-doc__head p { margin: 4px 0 0; color: #6b7178; }
.uc-doc__logo { height: 42px; }
.uc-doc h2 { font-size: 17px; font-weight: 700; margin: 26px 0 12px; font-family: inherit; color: #1d1f22; }
.uc-doc__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 8px; }
.uc-doc__meta b { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: #6b7178; margin-bottom: 3px; }
.uc-doc table { width: 100%; border-collapse: collapse; }
.uc-doc th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: #6b7178; border-bottom: 1px solid #d5d8dc; padding: 6px 6px; font-weight: 600; }
.uc-doc td { padding: 7px 6px; border-bottom: 1px solid #eceef0; vertical-align: middle; }
.uc-doc td.r, .uc-doc th.r { text-align: right; white-space: nowrap; }
.uc-doc td img { width: 28px; height: 28px; object-fit: contain; vertical-align: middle; }
.uc-doc__sub td { font-weight: 600; border-bottom: 0; }
.uc-doc__totals { margin: 12px 0 0 auto; width: 300px; }
.uc-doc__totals div { display: flex; justify-content: space-between; padding: 4px 0; }
.uc-doc__grand { border-top: 2px solid #1d1f22; font-weight: 700; font-size: 15px; margin-top: 4px; padding-top: 8px !important; }
.uc-doc__plan svg { width: 100%; height: auto; border: 1px solid #e3e5e8; border-radius: 4px; }
.uc-doc__rack { display: flex; gap: 20px; flex-wrap: wrap; }
.uc-doc__rack .uc-rackframe { transform: scale(.85); transform-origin: top left; margin: 0; }
.uc-doc__sign { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; margin-top: 44px; }
.uc-doc__sign div { border-top: 1px solid #1d1f22; padding-top: 5px; font-size: 11px; color: #6b7178; }
.uc-doc__pb { page-break-before: always; }
.uc-doc .uc-portcard { border: 1px solid #e3e5e8; border-radius: 8px; margin-bottom: 10px; }

/* ---------- print ---------- */
#ucPrintDoc { display: none; }
@media print {
  @page { margin: 12mm; }
  body, body.uc-on { background: #fff !important; overflow: visible !important; height: auto; }
  body > *:not(#ucPrintDoc) { display: none !important; }
  #ucPrintDoc { display: block !important; }
  #ucPrintDoc .uc-doc { box-shadow: none; padding: 0; max-width: none; }
  .uc-rackslots, .uc-rackframe, .uc-port__box, .uc-letter { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (max-width: 900px) {
  .uc-cartview { grid-template-columns: 1fr; }
  .uc-cartside { position: static; }
  .uc-reportview { grid-template-columns: 1fr; }
  .uc-rackview { flex-wrap: wrap; }
  .uc-rackpick { position: static; width: 100%; max-height: none; }
}

/* narrower screens: keep the legend / scale bar clear of the bottom toolbar */
@media (max-width: 1250px) {
  .uc-float--br, .uc-float--bl { bottom: 78px; }
  .uc-float--tr { bottom: 186px; }
  .uc-float--bl { left: 70px; }
}

/* port strip in the device inspector */
.uc-pstrip { display: flex; flex-wrap: wrap; gap: 3px; }
.uc-pstrip__p { width: 22px; height: 22px; border-radius: 4px; color: #fff; font-size: 9.5px; font-weight: 700; display: grid; place-items: center; opacity: .55; cursor: default; }
.uc-pstrip__p.is-used { opacity: 1; box-shadow: inset 0 0 0 2px rgba(0,0,0,.25); }
/* recording capacity */
.uc-recsplit { display: flex; height: 26px; border-radius: 6px; overflow: hidden; font-size: 11.5px; font-weight: 600; color: #fff; margin: 8px 0 4px; }
.uc-recsplit > div { display: flex; align-items: center; padding: 0 8px; white-space: nowrap; }
.uc-recsplit__hq { background: var(--blue); }
.uc-recsplit__lq { background: #7fb2ff; justify-content: flex-end; }

/* ---------- stages (js/construct/stages.js) ---------- */
.uc-stagesw { font-weight: 500; font-size: 13px; color: var(--text-2); border: 1px solid var(--line); height: 32px; padding: 0 10px; }
.uc-stagesw.is-staged { color: var(--blue); border-color: var(--blue); background: var(--blue-soft); }
.uc-stageitem__name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.uc-stageitem__name small { font-size: 11.5px; color: var(--muted); font-weight: 400; }
.uc-badge--green { background: var(--green-soft); color: var(--green); }
.uc-badge--orange { background: rgba(245,165,36,.16); color: #b87400; }
.uc-stagebar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 18px 0; padding: 9px 14px; border: 1px solid var(--blue); background: var(--blue-soft); color: var(--text); border-radius: 10px; font-size: 13px; }
.uc-stagebar .uc-ico { color: var(--blue); }
.uc-dev.is-otherstage { opacity: .38; }
.uc-rackdev.is-otherstage { opacity: .5; filter: grayscale(.6); }
.uc-stage.is-dropping { outline: 2px dashed var(--blue); outline-offset: -8px; }

/* ---------- auto walls (js/construct/autowalls.js) ---------- */
.uc-modal__card.is-wide:has(.uc-aw) { max-width: 920px; }
.uc-aw { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; margin-top: 12px; align-items: start; }
.uc-aw canvas { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.uc-aw__legend { display: flex; gap: 12px; font-size: 12px; color: var(--text-2); margin: 10px 0 6px; }
.uc-aw__legend span { display: inline-flex; align-items: center; gap: 5px; }
.uc-aw__legend i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.uc-opt--auto { color: var(--blue); font-weight: 600; border-bottom: 1px solid var(--line-2); margin-bottom: 4px; }
@media (max-width: 760px) { .uc-aw { grid-template-columns: 1fr; } }

/* ---------- rack contents in the plan inspector ---------- */
.uc-rackrow { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line-2); }
.uc-rackrow:last-of-type { border-bottom: 0; }
.uc-rackrow__u { flex: none; width: 32px; font: 600 11px/1 "JetBrains Mono", monospace; color: var(--muted); }
.uc-rackrow .uc-thumb { width: 28px; height: 28px; flex: none; }
.uc-rackrow__name { min-width: 0; display: flex; flex-direction: column; font-size: 12.5px; }
.uc-rackrow__name b, .uc-rackrow__name small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc-rackrow__name small { color: var(--muted); font-size: 11.5px; }
.uc-rackpeek { display: flex; justify-content: center; max-height: 68vh; overflow: auto; padding: 8px 0 8px 30px; }

/* ---------- wall alignment guides ---------- */
.uc-guide { stroke: #ff3d81; stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.uc-guide__x { stroke: #ff3d81; stroke-width: 1.5; fill: none; }

/* ---------- place anything ---------- */
.uc-list__add--pin { margin-right: 4px; }
.uc-rackdev__bar button[data-rsize] { font: 600 11px/1 "Inter", sans-serif; width: auto; padding: 0 6px; }

/* ---------- wiring (js/construct/wiring.js) ---------- */
.uc-modal__card.is-wide:has(.uc-wire__ends), .uc-modal__card.is-wide:has(.uc-wire__sched) { max-width: 880px; }
.uc-wire__ends { display: grid; grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 10px; }
.uc-wire__arrow { display: grid; place-items: center; height: 58px; color: var(--muted); }
.uc-wire__terms { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 4px 0 12px; background: var(--panel-2); }
.uc-wire__terms textarea, .uc-wire__terms select { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 7px 9px; font: 12.5px/1.5 "JetBrains Mono", monospace; outline: none; }
.uc-wire__terms select { font-family: inherit; height: 30px; padding: 0 8px; }
.uc-wire__condhead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 12px 0 6px; font-size: 13px; }
.uc-wire__presets { margin-left: auto; display: flex; gap: 6px; }
.uc-wire__cond { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.uc-wire__cond th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.uc-wire__cond td { padding: 4px 6px; border-bottom: 1px solid var(--line-2); vertical-align: middle; white-space: nowrap; }
.uc-wire__cond td:last-child { white-space: normal; }
.uc-wire__cond tr:not(.is-on) td:nth-child(n+2) { opacity: .5; }
.uc-wire__cond thead tr td, .uc-wire__sched tr td { opacity: 1 !important; }
.uc-wire__cond input:not([type=checkbox]), .uc-wire__cond select { width: 100%; min-width: 120px; height: 28px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); padding: 0 8px; outline: none; font-size: 12.5px; }
.uc-wire__cond input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--blue); }
.uc-wire__sw { display: inline-block; width: 22px; height: 10px; border-radius: 5px; border: 1px solid rgba(0,0,0,.25); margin-right: 8px; vertical-align: -1px; }
.uc-wire__sched { max-height: 56vh; overflow: auto; margin-top: 10px; }
.uc-wire__row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 6px 4px; border-radius: 8px; }
.uc-wire__row:hover { background: var(--hover); }
.uc-wire__row span { min-width: 0; display: flex; flex-direction: column; font-size: 12.5px; }
.uc-wire__row b, .uc-wire__row small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc-wire__row small { color: var(--muted); font-size: 11.5px; }
.uc-wire__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
@media (max-width: 760px) { .uc-wire__ends { grid-template-columns: 1fr; } .uc-wire__arrow { display: none; } }

/* ---------- accessory search ---------- */
.uc-accrow .uc-thumb { width: 26px; height: 26px; flex: none; }
.uc-accrow__name { flex: 1; min-width: 0; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; flex-direction: column; }
.uc-accrow__name small, .uc-accres small { color: var(--muted); font-size: 11px; font-weight: 400; }
.uc-accrow input[type=number] { width: 54px; flex: none; }
.uc-accres { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 5px 6px; border-radius: 8px; font-size: 12.5px; color: var(--text); }
.uc-accres:hover { background: var(--hover); }
.uc-accres .uc-thumb { width: 26px; height: 26px; flex: none; }
.uc-accres span { flex: 1; min-width: 0; display: flex; flex-direction: column; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc-accres > .uc-ico { color: var(--blue); flex: none; }
.uc-accres--new { color: var(--blue); border-top: 1px dashed var(--line); border-radius: 0 0 8px 8px; margin-top: 2px; }

/* ---------- device label pills (plan) ---------- */
.uc-devpill rect { fill: rgba(22,24,28,.9); }
.uc-devpill text { font: 600 11px "Inter", sans-serif; fill: #fff; }

/* ---------- rack: gear that takes no unit ---------- */
.uc-zerou { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }

/* ---------- stage picker ---------- */
.uc-modal__card.is-wide:has(.uc-pick__list) { max-width: 760px; }
.uc-pick__bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; }
.uc-pick__bar select { height: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); padding: 0 8px; max-width: 240px; }
.uc-pick__list { max-height: 50vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 4px 10px 8px; }
.uc-pick__group { position: sticky; top: 0; background: var(--panel); padding: 9px 0 5px; font-size: 13px; z-index: 1; border-bottom: 1px solid var(--line-2); }
.uc-pick__group label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.uc-pick__row { display: flex; align-items: center; gap: 10px; padding: 5px 2px 5px 22px; border-bottom: 1px solid var(--line-2); cursor: pointer; }
.uc-pick__row:hover { background: var(--hover); }
.uc-pick__row .uc-thumb { width: 28px; height: 28px; flex: none; }
.uc-pick__name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 12.5px; }
.uc-pick__name b, .uc-pick__name small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc-pick__name small { color: var(--muted); font-size: 11.5px; }
.uc-pick__list input[type=checkbox], .uc-pick__group input { width: 15px; height: 15px; accent-color: var(--blue); flex: none; }
.uc-chip b { font-weight: 600; opacity: .7; margin-left: 3px; }
.uc-chip.is-on { border-color: var(--blue) !important; color: var(--blue) !important; }

/* ---------- rack page: list of what's mounted ---------- */
.uc-mounted { cursor: pointer; border-radius: 8px; gap: 8px; }
.uc-mounted:hover { background: var(--hover); }
.uc-mounted.is-sel { background: var(--blue-soft); }

/* ---------- quote: what-if view ---------- */
.uc-cartview__show { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 0 2px; }
.uc-cartgroup > span:last-child { display: inline-flex; align-items: center; gap: 8px; }
.uc-cartgroup em { font-style: normal; font-weight: 400; font-size: 12px; color: var(--muted); margin-left: 6px; }
.uc-cartgroup.is-off { opacity: .6; }
.uc-cartgroup__eye, .uc-cartitem__eye { width: 26px; height: 26px; }
.uc-cartgroup__eye.is-active, .uc-cartitem__eye.is-active { color: #fff !important; background: var(--orange) !important; }
.uc-cartitem.is-off { opacity: .45; }
.uc-cartitem.is-off .uc-cartitem__name { text-decoration: line-through; }
.uc-cartitem__tools { display: inline-flex; align-items: flex-start; gap: 6px; align-self: start; }
.uc-cartitem__eye { border-radius: 7px; display: grid; place-items: center; }
.uc-cartitem__eye:hover { color: var(--orange) !important; }
.uc-cartsum__cut { margin-top: 10px; padding: 9px 11px; border: 1px solid rgba(245,165,36,.5); background: rgba(245,165,36,.09); border-radius: 8px; font-size: 12.5px; line-height: 1.45; }
.uc-cartsum__cut div { color: var(--muted); margin-top: 3px; }