/* Live design sampler ------------------------------------------------------ */
.theme-trigger { gap: 8px; }
.theme-trigger b {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 20px;
  padding: 0 5px;
  border-radius: 6px;
  background: rgba(var(--accent-rgb), .15);
  color: var(--red-hot);
  font-size: 9px;
}
.theme-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .11);
}

.design-modal { z-index: 70; }
.design-card {
  width: min(1180px, 96vw);
  max-height: 92vh;
  padding: 28px;
}
.design-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 22px;
}
.design-head h2 { margin: 7px 0 5px; }
.design-head p { color: var(--muted); font-size: 13px; }
.design-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.design-option {
  position: relative;
  min-width: 0;
  padding: 12px;
  overflow: hidden;
  color: var(--text);
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--border);
  border-radius: 13px;
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.design-option:hover {
  transform: translateY(-3px);
  border-color: var(--border-hi);
  background: rgba(255, 255, 255, .045);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .2);
}
.design-option:focus-visible {
  outline: 3px solid rgba(108, 168, 255, .35);
  outline-offset: 2px;
}
.design-option.active {
  border-color: var(--red);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .12);
}
.design-option.active::after {
  content: "Selected";
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 7px;
  border-radius: 999px;
  color: #fff;
  background: var(--red);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.design-no {
  display: block;
  margin-bottom: 9px;
  color: var(--muted-2);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
}
.design-option > strong { display: block; margin-top: 12px; font-size: 13px; }
.design-option > small { display: block; min-height: 48px; margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.palette { display: flex; gap: 4px; margin-top: 12px; }
.palette i { width: 17px; height: 7px; border-radius: 999px; }

.mini-preview {
  display: grid;
  grid-template-columns: 24% 1fr 1fr;
  grid-template-rows: 17px 38px 38px;
  gap: 5px;
  height: 108px;
  padding: 8px;
  overflow: hidden;
  border-radius: 9px;
}
.mini-preview i { display: block; border-radius: 3px; }
.mini-preview i:first-child { grid-column: 1 / -1; }
.mini-preview i:nth-child(2) { grid-row: 2 / 4; }
.mini-preview i:nth-child(3),
.mini-preview i:nth-child(4) { grid-column: 2 / 4; }
.preview-command { background: #151517; }
.preview-command i { background: #2a2a2e; }
.preview-command i:first-child { background: linear-gradient(90deg, #ed3949 14%, #202023 14%); }
.preview-silver { background: linear-gradient(135deg, #c3c8cd, #eef0f2); }
.preview-silver i { background: #e5e8ea; border: 1px solid #adb3b9; }
.preview-silver i:first-child { background: linear-gradient(90deg, #b51f31 14%, #d9dde0 14%); }
.preview-cobalt { background: #07152d; }
.preview-cobalt i { background: #102b55; }
.preview-cobalt i:first-child { background: linear-gradient(90deg, #2d7ff9 14%, #0c2041 14%); }
.preview-motorsport { background: #050505; border-radius: 2px; }
.preview-motorsport i { background: #1d1d1b; border-radius: 1px; }
.preview-motorsport i:first-child { background: linear-gradient(90deg, #f4a62a 14%, #111 14%); }
.preview-evergreen { background: #071a1a; }
.preview-evergreen i { background: #12302f; border-radius: 7px; }
.preview-evergreen i:first-child { background: linear-gradient(90deg, #35c99a 14%, #0d2928 14%); }
.preview-paper { background: #eee7da; border: 1px solid #cbbfaa; }
.preview-paper i { background: #f8f3e9; border: 1px solid #d9cebc; border-radius: 0; }
.preview-paper i:first-child { background: linear-gradient(90deg, #842535 14%, #f7f1e5 14%); }
.preview-dark-silver { background: linear-gradient(135deg, #101214, #3d4145); border: 1px solid #5f6468; }
.preview-dark-silver i { background: linear-gradient(145deg, #3c4044, #202326); border: 1px solid #555a5f; }
.preview-dark-silver i:first-child { background: linear-gradient(90deg, #c92c40 14%, #2d3033 14%); }
.preview-hex-forge { background: #0d0c0a; clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.preview-hex-forge i { background: #29241d; border: 1px solid #574936; border-radius: 0; clip-path: polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px); }
.preview-hex-forge i:first-child { background: linear-gradient(90deg, #d47a2d 14%, #1a1713 14%); }
.preview-soft-studio { background: #eee8ef; border-radius: 18px; }
.preview-soft-studio i { background: #fff9f5; border: 1px solid #d7c9d7; border-radius: 14px; }
.preview-soft-studio i:first-child { background: linear-gradient(90deg, #ef6f61 14%, #fbf6f4 14%); border-radius: 999px; }
.preview-blueprint { background: #eef6ff; border: 1px solid #8db9e8; border-radius: 0; }
.preview-blueprint i { background: #f8fbff; border: 1px solid #3b83c8; border-radius: 0; }
.preview-blueprint i:first-child { background: linear-gradient(90deg, #086dc1 14%, #e6f2ff 14%); }
.preview-dark-blueprint {
  background:
    linear-gradient(rgba(213,46,67,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(213,46,67,.14) 1px, transparent 1px),
    #111315;
  background-size: 12px 12px;
  border: 1px solid #62686d;
  border-radius: 0;
}
.preview-dark-blueprint i { background: #292d30; border: 1px solid #777d82; border-radius: 0; box-shadow: 2px 2px 0 #08090a; }
.preview-dark-blueprint i:first-child { background: linear-gradient(90deg, #d52e43 14%, #222528 14%); }

.preview-command + strong + small + .palette i:nth-child(1) { background: #151517; }
.preview-command + strong + small + .palette i:nth-child(2) { background: #333338; }
.preview-command + strong + small + .palette i:nth-child(3) { background: #ed3949; }
.preview-silver + strong + small + .palette i:nth-child(1) { background: #c4c9ce; }
.preview-silver + strong + small + .palette i:nth-child(2) { background: #eceeef; }
.preview-silver + strong + small + .palette i:nth-child(3) { background: #a91d2d; }
.preview-cobalt + strong + small + .palette i:nth-child(1) { background: #07152d; }
.preview-cobalt + strong + small + .palette i:nth-child(2) { background: #2d7ff9; }
.preview-cobalt + strong + small + .palette i:nth-child(3) { background: #75d4ff; }
.preview-motorsport + strong + small + .palette i:nth-child(1) { background: #050505; }
.preview-motorsport + strong + small + .palette i:nth-child(2) { background: #f4a62a; }
.preview-motorsport + strong + small + .palette i:nth-child(3) { background: #eee8dc; }
.preview-evergreen + strong + small + .palette i:nth-child(1) { background: #071a1a; }
.preview-evergreen + strong + small + .palette i:nth-child(2) { background: #35c99a; }
.preview-evergreen + strong + small + .palette i:nth-child(3) { background: #d4eee8; }
.preview-paper + strong + small + .palette i:nth-child(1) { background: #eee7da; }
.preview-paper + strong + small + .palette i:nth-child(2) { background: #28221c; }
.preview-paper + strong + small + .palette i:nth-child(3) { background: #842535; }
.preview-dark-silver + strong + small + .palette i:nth-child(1) { background: #121416; }
.preview-dark-silver + strong + small + .palette i:nth-child(2) { background: #555a5f; }
.preview-dark-silver + strong + small + .palette i:nth-child(3) { background: #c92c40; }
.preview-hex-forge + strong + small + .palette i:nth-child(1) { background: #0d0c0a; }
.preview-hex-forge + strong + small + .palette i:nth-child(2) { background: #3a3024; }
.preview-hex-forge + strong + small + .palette i:nth-child(3) { background: #d47a2d; }
.preview-soft-studio + strong + small + .palette i:nth-child(1) { background: #eee8ef; }
.preview-soft-studio + strong + small + .palette i:nth-child(2) { background: #fff9f5; }
.preview-soft-studio + strong + small + .palette i:nth-child(3) { background: #ef6f61; }
.preview-blueprint + strong + small + .palette i:nth-child(1) { background: #eef6ff; }
.preview-blueprint + strong + small + .palette i:nth-child(2) { background: #0e355e; }
.preview-blueprint + strong + small + .palette i:nth-child(3) { background: #0878d1; }
.preview-dark-blueprint + strong + small + .palette i:nth-child(1) { background: #111315; }
.preview-dark-blueprint + strong + small + .palette i:nth-child(2) { background: #62686d; }
.preview-dark-blueprint + strong + small + .palette i:nth-child(3) { background: #d52e43; }

/* 01 — Charcoal Red ------------------------------------------------------- */
html[data-design-theme="command"] {
  color-scheme: dark;
  --bg: #151517;
  --panel: #222225;
  --panel-2: #29292d;
  --panel-3: #323237;
  --text: #f5f5f6;
  --muted: #aaaab0;
  --muted-2: #74747c;
  --red: #ed3949;
  --red-hot: #ff5260;
  --red-dark: #bd2231;
  --accent-rgb: 237, 57, 73;
  --red-soft: rgba(var(--accent-rgb), .12);
  --border: #3a3a40;
  --border-hi: #505057;
  --green: #55d68b;
  --amber: #f0b452;
  --blue: #75aaff;
  --shadow: 0 20px 58px rgba(0, 0, 0, .31);
  --shadow-soft: 0 9px 28px rgba(0, 0, 0, .22);
}
html[data-design-theme="command"] body {
  background:
    radial-gradient(circle at 80% -14%, rgba(var(--accent-rgb), .16), transparent 36rem),
    linear-gradient(rgba(255, 255, 255, .017) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .017) 1px, transparent 1px),
    #151517;
  background-size: auto, 40px 40px, 40px 40px, auto;
}
html[data-design-theme="command"] .topbar {
  background: rgba(25, 25, 28, .93);
  border-bottom-color: #3a3a40;
}
html[data-design-theme="command"] .search,
html[data-design-theme="command"] input,
html[data-design-theme="command"] textarea,
html[data-design-theme="command"] select {
  background-color: #1a1a1d;
  border-color: #3d3d43;
}
html[data-design-theme="command"] .btn.ghost,
html[data-design-theme="command"] .state-tab,
html[data-design-theme="command"] .area-tab {
  background: #29292d;
  border-color: #45454c;
}
html[data-design-theme="command"] .btn.ghost:hover { background: #343439; }
html[data-design-theme="command"] .metrics,
html[data-design-theme="command"] .list-panel,
html[data-design-theme="command"] .record-view,
html[data-design-theme="command"] fieldset,
html[data-design-theme="command"] .details-actions,
html[data-design-theme="command"] .invoicing,
html[data-design-theme="command"] .plugin-bar,
html[data-design-theme="command"] .assessor-legend,
html[data-design-theme="command"] .quote-toolbar,
html[data-design-theme="command"] .col,
html[data-design-theme="command"] .modal-card {
  background: rgba(34, 34, 37, .96);
  border-color: #3a3a40;
}
html[data-design-theme="command"] .list-heading,
html[data-design-theme="command"] .record-tabs,
html[data-design-theme="command"] .col h4,
html[data-design-theme="command"] .sel-table th {
  background: #1c1c1f;
  border-color: #3a3a40;
}
html[data-design-theme="command"] .quote-list th { background: #19191c; }
html[data-design-theme="command"] .quote-list td,
html[data-design-theme="command"] .group-item,
html[data-design-theme="command"] .choice,
html[data-design-theme="command"] .sel-table td { border-color: #343439; }
html[data-design-theme="command"] .quote-footer { background: rgba(22, 22, 24, .96); }
html[data-design-theme="command"] .stage i { background: #222225; }
html[data-design-theme="command"] .quote-list .job-row { background: #242428; }

/* 02 — Silverline ---------------------------------------------------------- */
html[data-design-theme="silver"] {
  color-scheme: light;
  --bg: #c8cdd2;
  --panel: #e8eaec;
  --panel-2: #dfe2e5;
  --panel-3: #d3d7db;
  --text: #9c1b2b;
  --muted: #6f4a50;
  --muted-2: #867177;
  --red: #ad1f31;
  --red-hot: #c72b3e;
  --red-dark: #831322;
  --accent-rgb: 173, 31, 49;
  --red-soft: rgba(var(--accent-rgb), .1);
  --border: #aeb4ba;
  --border-hi: #8f979e;
  --green: #178b5f;
  --amber: #b87416;
  --blue: #2567c9;
  --shadow: 0 20px 52px rgba(45, 50, 55, .16);
  --shadow-soft: 0 8px 24px rgba(45, 50, 55, .11);
}
html[data-design-theme="silver"] body {
  color: #9c1b2b;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .46), transparent 34%),
    linear-gradient(180deg, #dde0e3, #c6cbd0 480px, #bfc5ca);
}
html[data-design-theme="silver"] .topbar {
  background: linear-gradient(180deg, rgba(240, 242, 244, .96), rgba(207, 211, 215, .94));
  border-bottom-color: #9da4aa;
  box-shadow: 0 9px 30px rgba(42, 47, 52, .14);
}
html[data-design-theme="silver"] .brand strong,
html[data-design-theme="silver"] .workspace-head h1,
html[data-design-theme="silver"] .metric strong,
html[data-design-theme="silver"] .list-heading h2,
html[data-design-theme="silver"] .record-ref,
html[data-design-theme="silver"] .invoicing h4,
html[data-design-theme="silver"] .modal-card h2,
html[data-design-theme="silver"] legend { color: #9c1b2b; }
html[data-design-theme="silver"] .brand-kicker { color: #831322; }
html[data-design-theme="silver"] .brand .sub,
html[data-design-theme="silver"] .workspace-head p,
html[data-design-theme="silver"] .field-label,
html[data-design-theme="silver"] .list-heading p { color: #74545a; }
html[data-design-theme="silver"] .search,
html[data-design-theme="silver"] input,
html[data-design-theme="silver"] textarea,
html[data-design-theme="silver"] select {
  color: #8f1827;
  background-color: #f4f5f6;
  border-color: #aeb4ba;
}
html[data-design-theme="silver"] .search::placeholder,
html[data-design-theme="silver"] input::placeholder,
html[data-design-theme="silver"] textarea::placeholder { color: #9d7d82; }
html[data-design-theme="silver"] .btn.ghost,
html[data-design-theme="silver"] .state-tab,
html[data-design-theme="silver"] .area-tab {
  color: #8f1827;
  background: linear-gradient(180deg, #eff1f2, #d5d9dc);
  border-color: #a7adb3;
}
html[data-design-theme="silver"] .btn.ghost:hover { color: #70111e; background: #f7f8f8; }
html[data-design-theme="silver"] .metrics,
html[data-design-theme="silver"] .list-panel,
html[data-design-theme="silver"] .record-view,
html[data-design-theme="silver"] fieldset,
html[data-design-theme="silver"] .details-actions,
html[data-design-theme="silver"] .invoicing,
html[data-design-theme="silver"] .plugin-bar,
html[data-design-theme="silver"] .assessor-legend,
html[data-design-theme="silver"] .quote-toolbar,
html[data-design-theme="silver"] .col,
html[data-design-theme="silver"] .modal-card {
  background: linear-gradient(145deg, #f0f2f3, #dfe2e4);
  border-color: #adb3b9;
}
html[data-design-theme="silver"] .list-heading,
html[data-design-theme="silver"] .record-tabs,
html[data-design-theme="silver"] .col h4,
html[data-design-theme="silver"] .sel-table th {
  color: #8c1826;
  background: linear-gradient(180deg, #e9ebed, #d2d6d9);
  border-color: #aeb4ba;
}
html[data-design-theme="silver"] .quote-list th { color: #7e2934; background: #d0d4d7; }
html[data-design-theme="silver"] .quote-list td,
html[data-design-theme="silver"] .group-item,
html[data-design-theme="silver"] .choice,
html[data-design-theme="silver"] .sel-table td { color: #8a1a28; border-color: #c8cdd1; }
html[data-design-theme="silver"] .quote-list a { color: #a31729; }
html[data-design-theme="silver"] .quote-list .job-row:nth-child(even) { background: rgba(121, 128, 134, .08); }
html[data-design-theme="silver"] .quote-list .job-row:hover { background: linear-gradient(90deg, rgba(var(--accent-rgb), .09), rgba(255,255,255,.22)); }
html[data-design-theme="silver"] .quote-footer { color: #7d2a35; background: rgba(226, 229, 231, .96); }
html[data-design-theme="silver"] .quote-footer b { color: #971a2a; }
html[data-design-theme="silver"] .stage i { color: #8d1c2a; background: #e8eaec; }
html[data-design-theme="silver"] .design-option { color: #8f1827; background: linear-gradient(145deg, #f2f3f4, #dadddf); }
html[data-design-theme="silver"] .quote-list .job-row { background: #e8eaec; }
html[data-design-theme="silver"] .status:not(.status-finished):not(.status-job):not(.status-invoice) { color: #a11729; }

/* 03 — Cobalt Pro --------------------------------------------------------- */
html[data-design-theme="cobalt"] {
  color-scheme: dark;
  --bg: #061225;
  --panel: #0c1d36;
  --panel-2: #102746;
  --panel-3: #153257;
  --text: #f1f7ff;
  --muted: #91a7c4;
  --muted-2: #607997;
  --red: #2d7ff9;
  --red-hot: #5b9cff;
  --red-dark: #1559bd;
  --accent-rgb: 45, 127, 249;
  --red-soft: rgba(var(--accent-rgb), .13);
  --border: #1c3d67;
  --border-hi: #315783;
  --green: #34d6a2;
  --amber: #ffc35f;
  --blue: #75d4ff;
  --shadow: 0 22px 60px rgba(0, 7, 20, .34);
}
html[data-design-theme="cobalt"] body {
  background:
    radial-gradient(circle at 76% -18%, rgba(45, 127, 249, .23), transparent 40rem),
    linear-gradient(135deg, #061225, #081a33 62%, #061225);
}
html[data-design-theme="cobalt"] .topbar {
  background: rgba(6, 18, 37, .92);
  border-bottom-color: #1c3d67;
}
html[data-design-theme="cobalt"] .search,
html[data-design-theme="cobalt"] input,
html[data-design-theme="cobalt"] textarea,
html[data-design-theme="cobalt"] select { background-color: #08172b; border-color: #23466f; }
html[data-design-theme="cobalt"] .metrics,
html[data-design-theme="cobalt"] .list-panel,
html[data-design-theme="cobalt"] .record-view,
html[data-design-theme="cobalt"] fieldset,
html[data-design-theme="cobalt"] .col { background: rgba(12, 29, 54, .92); }
html[data-design-theme="cobalt"] .list-heading,
html[data-design-theme="cobalt"] .record-tabs,
html[data-design-theme="cobalt"] .col h4 { background: #091a31; }
html[data-design-theme="cobalt"] .quote-list th,
html[data-design-theme="cobalt"] .sel-table th { background: #07162a; }

/* 04 — Motorsport --------------------------------------------------------- */
html[data-design-theme="motorsport"] {
  color-scheme: dark;
  --bg: #050505;
  --panel: #10100f;
  --panel-2: #171714;
  --panel-3: #20201c;
  --text: #f4f0e8;
  --muted: #a29d91;
  --muted-2: #706c64;
  --red: #f4a62a;
  --red-hot: #ffbc50;
  --red-dark: #c67a09;
  --accent-rgb: 244, 166, 42;
  --red-soft: rgba(var(--accent-rgb), .12);
  --border: #33322e;
  --border-hi: #514e46;
  --green: #6dd694;
  --amber: #f4a62a;
  --blue: #70a8ff;
  --radius: 3px;
  --radius-sm: 2px;
  --shadow: 0 18px 45px rgba(0, 0, 0, .4);
}
html[data-design-theme="motorsport"] body {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 1px, transparent 1px 18px),
    #050505;
}
html[data-design-theme="motorsport"] .topbar {
  min-height: 72px;
  background: rgba(7, 7, 6, .96);
  border-bottom-color: #3c392f;
}
html[data-design-theme="motorsport"] .logo,
html[data-design-theme="motorsport"] .btn,
html[data-design-theme="motorsport"] .state-tab,
html[data-design-theme="motorsport"] .metrics,
html[data-design-theme="motorsport"] .list-panel,
html[data-design-theme="motorsport"] .record-view,
html[data-design-theme="motorsport"] fieldset,
html[data-design-theme="motorsport"] .col,
html[data-design-theme="motorsport"] .modal-card { border-radius: 2px; }
html[data-design-theme="motorsport"] .workspace-head h1,
html[data-design-theme="motorsport"] .brand strong,
html[data-design-theme="motorsport"] .list-heading h2 { text-transform: uppercase; letter-spacing: -.025em; }
html[data-design-theme="motorsport"] .workspace-head h1 { font-size: clamp(32px, 3.5vw, 48px); }
html[data-design-theme="motorsport"] main { max-width: 1660px; }
html[data-design-theme="motorsport"] .search,
html[data-design-theme="motorsport"] input,
html[data-design-theme="motorsport"] textarea,
html[data-design-theme="motorsport"] select { background-color: #0b0b0a; border-radius: 1px; }
html[data-design-theme="motorsport"] .list-heading,
html[data-design-theme="motorsport"] .record-tabs,
html[data-design-theme="motorsport"] .col h4,
html[data-design-theme="motorsport"] .quote-list th { background: #0a0a09; }

/* 05 — Evergreen Glass ---------------------------------------------------- */
html[data-design-theme="evergreen"] {
  color-scheme: dark;
  --bg: #061616;
  --panel: #0d2423;
  --panel-2: #122e2d;
  --panel-3: #193938;
  --text: #eff8f5;
  --muted: #9ab7b1;
  --muted-2: #668c85;
  --red: #35c99a;
  --red-hot: #55dbae;
  --red-dark: #19936e;
  --accent-rgb: 53, 201, 154;
  --red-soft: rgba(var(--accent-rgb), .12);
  --border: #21423f;
  --border-hi: #355d59;
  --green: #5be0ae;
  --amber: #f0bd65;
  --blue: #77b4ff;
  --radius: 18px;
  --radius-sm: 11px;
  --shadow: 0 24px 68px rgba(0, 9, 9, .32);
}
html[data-design-theme="evergreen"] body {
  background:
    radial-gradient(circle at 82% -12%, rgba(53, 201, 154, .16), transparent 38rem),
    radial-gradient(circle at 7% 65%, rgba(94, 157, 195, .08), transparent 34rem),
    #061616;
}
html[data-design-theme="evergreen"] .topbar {
  background: rgba(6, 22, 22, .8);
  border-bottom-color: rgba(53, 93, 89, .72);
  backdrop-filter: blur(26px) saturate(150%);
}
html[data-design-theme="evergreen"] .metrics,
html[data-design-theme="evergreen"] .list-panel,
html[data-design-theme="evergreen"] .record-view,
html[data-design-theme="evergreen"] fieldset,
html[data-design-theme="evergreen"] .col,
html[data-design-theme="evergreen"] .modal-card {
  background: rgba(13, 36, 35, .82);
  backdrop-filter: blur(16px);
}
html[data-design-theme="evergreen"] .list-heading,
html[data-design-theme="evergreen"] .record-tabs,
html[data-design-theme="evergreen"] .col h4 { background: rgba(7, 28, 27, .88); }
html[data-design-theme="evergreen"] .search,
html[data-design-theme="evergreen"] input,
html[data-design-theme="evergreen"] textarea,
html[data-design-theme="evergreen"] select { background-color: #081d1c; border-color: #294d49; }

@media (max-width: 1100px) {
  .design-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .design-card { padding: 20px; }
  .design-head { align-items: stretch; flex-direction: column; gap: 14px; }
  .design-head .btn { align-self: flex-start; }
  .design-grid { grid-template-columns: 1fr; }
  .design-option { display: grid; grid-template-columns: 112px 1fr; column-gap: 12px; }
  .design-no { grid-column: 1 / -1; }
  .mini-preview { grid-row: 2 / 5; height: 96px; }
  .design-option > strong,
  .design-option > small,
  .palette { margin-top: 0; }
  .design-option > small { min-height: 0; }
}

/* ========================================================================
   DESIGN LAB V2 — five distinct interface systems
   ======================================================================== */

/* 01 / VELOCITY — fast horizontal command centre ------------------------ */
html[data-design-theme="command"] .topbar {
  border-bottom: 0;
  box-shadow: 0 14px 45px rgba(0, 0, 0, .34);
}
html[data-design-theme="command"] .topbar::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--red) 0 22%, #3b3b40 22% 100%);
}
html[data-design-theme="command"] .workspace-head > div:first-child {
  padding-left: 20px;
  border-left: 4px solid var(--red);
}
html[data-design-theme="command"] .workspace-head h1 {
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: -.045em;
}
html[data-design-theme="command"] .btn.primary {
  border-radius: 11px 3px 11px 3px;
}
html[data-design-theme="command"] .state-tabs {
  display: inline-flex;
  padding: 5px;
  border: 1px solid #3b3b40;
  border-radius: 14px;
  background: #1b1b1e;
}
html[data-design-theme="command"] .state-tab {
  border-color: transparent;
  background: transparent;
}
html[data-design-theme="command"] .state-tab.active {
  border-color: #4a4a50;
  background: #2b2b30;
  box-shadow: inset 0 -2px 0 var(--red);
}

/* 02 / PRECISION SILVER — desktop left navigation rail ------------------ */
html[data-design-theme="silver"] body {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .46), transparent 38%),
    linear-gradient(180deg, #dde0e3, #c2c7cc 540px, #b9bfc4);
}
html[data-design-theme="silver"] .workspace-head h1 {
  font-weight: 620;
  letter-spacing: -.045em;
}
html[data-design-theme="silver"] .metrics {
  border: 0;
  background: transparent;
  box-shadow: none;
  gap: 10px;
  overflow: visible;
}
html[data-design-theme="silver"] .metric {
  border: 1px solid #aeb4ba;
  border-radius: 10px;
  background: linear-gradient(145deg, #f5f6f7, #d5d9dc);
  box-shadow: 0 8px 20px rgba(50, 56, 61, .1);
}
html[data-design-theme="silver"] .metric:last-child { border: 1px solid #aeb4ba; }
html[data-design-theme="silver"] .state-tabs {
  padding-bottom: 10px;
  border-bottom: 1px solid #aeb4ba;
}
html[data-design-theme="silver"] .state-tab.active {
  color: #fff;
  background: linear-gradient(135deg, #b72134, #831322);
  box-shadow: none;
}
html[data-design-theme="silver"] .state-tab.active b { background: rgba(255,255,255,.2); }

@media (min-width: 1051px) {
  html[data-design-theme="silver"] .topbar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: 270px;
    height: 100vh;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 30px 20px;
    overflow-y: auto;
    border: 0;
    border-right: 1px solid #9da4aa;
    background: linear-gradient(160deg, #eef0f2, #c8cdd1 70%, #b9bec3);
    box-shadow: 12px 0 34px rgba(47, 52, 57, .13);
  }
  html[data-design-theme="silver"] .topbar::after {
    inset: 0 0 auto auto;
    width: 4px;
    height: 170px;
    background: linear-gradient(180deg, #ad1f31, transparent);
  }
  html[data-design-theme="silver"] .brand {
    align-items: flex-start;
    padding-bottom: 26px;
    border-bottom: 1px solid #aeb4ba;
  }
  html[data-design-theme="silver"] .brand-copy { padding-top: 2px; }
  html[data-design-theme="silver"] .brand .sub {
    max-width: 155px;
    white-space: normal;
    line-height: 1.45;
  }
  html[data-design-theme="silver"] .topbar-actions {
    width: 100%;
    flex: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 9px;
    margin-top: 28px;
  }
  html[data-design-theme="silver"] .topbar-actions::before {
    content: "Workspace";
    margin: 0 4px 4px;
    color: #7d3a43;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .15em;
    text-transform: uppercase;
  }
  html[data-design-theme="silver"] .topbar-actions .search {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-bottom: 12px;
  }
  html[data-design-theme="silver"] .topbar-actions .btn {
    width: 100%;
    justify-content: flex-start;
  }
  html[data-design-theme="silver"] .theme-trigger b { margin-left: auto; }
  html[data-design-theme="silver"] main {
    max-width: none;
    margin-left: 270px;
    padding: 44px clamp(24px, 4vw, 64px) 110px;
  }
  html[data-design-theme="silver"] .record-tabs { top: 16px; }
}

/* 03 / AERO GLASS — floating navigation and capsule controls ------------ */
html[data-design-theme="cobalt"] {
  --bg: #070c23;
  --panel: #111b3b;
  --panel-2: #16254c;
  --panel-3: #1d2f5c;
  --text: #f5f7ff;
  --muted: #a7b2d4;
  --muted-2: #6978aa;
  --red: #7c6cff;
  --red-hot: #9b8fff;
  --red-dark: #5544d8;
  --accent-rgb: 124, 108, 255;
  --red-soft: rgba(var(--accent-rgb), .13);
  --border: rgba(155, 177, 255, .2);
  --border-hi: rgba(155, 177, 255, .36);
  --blue: #63dcff;
  --radius: 22px;
  --radius-sm: 999px;
}
html[data-design-theme="cobalt"] body {
  background:
    radial-gradient(circle at 14% 8%, rgba(69, 205, 255, .15), transparent 30rem),
    radial-gradient(circle at 86% 3%, rgba(124, 108, 255, .25), transparent 38rem),
    linear-gradient(145deg, #060a1e, #0b1231 56%, #080d25);
}
html[data-design-theme="cobalt"] .topbar {
  top: 12px;
  width: auto;
  min-height: 70px;
  margin: 14px max(18px, calc((100vw - 1500px) / 2)) 0;
  padding: 10px 14px;
  border: 1px solid rgba(155, 177, 255, .24);
  border-radius: 22px;
  background: rgba(13, 23, 56, .7);
  box-shadow: 0 22px 60px rgba(0, 4, 20, .32), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: blur(28px) saturate(145%);
}
html[data-design-theme="cobalt"] .topbar::after { display: none; }
html[data-design-theme="cobalt"] .logo { border-radius: 50%; background: linear-gradient(145deg, #63dcff, #6551ee); }
html[data-design-theme="cobalt"] .btn,
html[data-design-theme="cobalt"] .state-tab,
html[data-design-theme="cobalt"] .record-tab,
html[data-design-theme="cobalt"] .area-tab { border-radius: 999px; }
html[data-design-theme="cobalt"] .btn.primary {
  color: #080d25;
  background: linear-gradient(135deg, #63dcff, #8c7cff);
  box-shadow: 0 10px 30px rgba(99, 220, 255, .17);
}
html[data-design-theme="cobalt"] .metrics,
html[data-design-theme="cobalt"] .list-panel,
html[data-design-theme="cobalt"] .record-view,
html[data-design-theme="cobalt"] fieldset,
html[data-design-theme="cobalt"] .col,
html[data-design-theme="cobalt"] .modal-card {
  background: rgba(17, 27, 59, .68);
  border-color: rgba(155, 177, 255, .2);
  box-shadow: 0 24px 70px rgba(0, 3, 20, .28), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(20px);
}
html[data-design-theme="cobalt"] .metric { background: linear-gradient(145deg, rgba(124,108,255,.1), transparent); }
html[data-design-theme="cobalt"] .list-heading,
html[data-design-theme="cobalt"] .record-tabs,
html[data-design-theme="cobalt"] .col h4 { background: rgba(7, 14, 40, .64); }
html[data-design-theme="cobalt"] .state-tabs { justify-content: center; }
html[data-design-theme="cobalt"] .record-tabs { top: 104px; }

/* 04 / HI-VIS WORKSHOP — dense industrial tool console ------------------ */
html[data-design-theme="motorsport"] {
  --red: #f2cc18;
  --red-hot: #ffe34d;
  --red-dark: #b79200;
  --accent-rgb: 242, 204, 24;
  --red-soft: rgba(var(--accent-rgb), .12);
}
html[data-design-theme="motorsport"] .topbar {
  min-height: 66px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: 4px solid #f2cc18;
}
html[data-design-theme="motorsport"] .topbar::after { display: none; }
html[data-design-theme="motorsport"] .logo {
  color: #050505;
  background: #f2cc18;
  box-shadow: none;
}
html[data-design-theme="motorsport"] .brand-kicker,
html[data-design-theme="motorsport"] .choice b,
html[data-design-theme="motorsport"] .quote-footer .grand b { color: #f2cc18; }
html[data-design-theme="motorsport"] main { padding-top: 22px; }
html[data-design-theme="motorsport"] .workspace-head { margin-bottom: 18px; }
html[data-design-theme="motorsport"] .workspace-head h1 {
  font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  font-style: italic;
  font-weight: 900;
  letter-spacing: -.035em;
}
html[data-design-theme="motorsport"] .btn.primary {
  color: #050505;
  background: #f2cc18;
  border-color: #f2cc18;
  box-shadow: none;
}
html[data-design-theme="motorsport"] .btn,
html[data-design-theme="motorsport"] .state-tab,
html[data-design-theme="motorsport"] .record-tab,
html[data-design-theme="motorsport"] .area-tab {
  min-height: 34px;
  border-radius: 0;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}
html[data-design-theme="motorsport"] .metrics { border: 0; gap: 4px; background: transparent; }
html[data-design-theme="motorsport"] .metric {
  border: 0;
  border-left: 4px solid #f2cc18;
  background: #151513;
}
html[data-design-theme="motorsport"] .state-tabs { gap: 2px; }
html[data-design-theme="motorsport"] .state-tab.active {
  color: #050505;
  background: #f2cc18;
  box-shadow: none;
}
html[data-design-theme="motorsport"] .state-tab.active b { color: #f2cc18; background: #050505; }
html[data-design-theme="motorsport"] .list-panel,
html[data-design-theme="motorsport"] .record-view { box-shadow: 8px 8px 0 #000; }
html[data-design-theme="motorsport"] .list-heading { min-height: 58px; }
html[data-design-theme="motorsport"] .quote-list td { height: 46px; }

/* 05 / PAPER LEDGER — editorial, flat, warm and minimal ------------------ */
html[data-design-theme="paper"] {
  color-scheme: light;
  --bg: #eee7da;
  --panel: #f8f3e9;
  --panel-2: #f1eadf;
  --panel-3: #e7ddcd;
  --text: #28221c;
  --muted: #74695b;
  --muted-2: #9b8e7c;
  --red: #842535;
  --red-hot: #a73447;
  --red-dark: #611522;
  --accent-rgb: 132, 37, 53;
  --red-soft: rgba(var(--accent-rgb), .08);
  --border: #cfc2ae;
  --border-hi: #aa9a84;
  --green: #3d7e5b;
  --amber: #a56a1d;
  --blue: #365f8a;
  --radius: 0;
  --radius-sm: 0;
  --shadow: none;
  --shadow-soft: none;
}
html[data-design-theme="paper"] body {
  color: #28221c;
  background:
    linear-gradient(90deg, transparent 0 7%, rgba(132,37,53,.055) 7% 7.12%, transparent 7.12%),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(87,73,57,.045) 31px 32px),
    #eee7da;
}
html[data-design-theme="paper"] .topbar {
  position: relative;
  min-height: 78px;
  padding-top: 16px;
  padding-bottom: 16px;
  border: 0;
  border-bottom: 2px solid #842535;
  background: rgba(248, 243, 233, .9);
  box-shadow: none;
  backdrop-filter: none;
}
html[data-design-theme="paper"] .topbar::after { display: none; }
html[data-design-theme="paper"] .logo {
  color: #f8f3e9;
  background: #842535;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
html[data-design-theme="paper"] .brand strong,
html[data-design-theme="paper"] .workspace-head h1,
html[data-design-theme="paper"] .metric strong,
html[data-design-theme="paper"] .list-heading h2,
html[data-design-theme="paper"] .record-ref,
html[data-design-theme="paper"] .modal-card h2 { color: #28221c; }
html[data-design-theme="paper"] .workspace-head h1,
html[data-design-theme="paper"] .modal-card h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -.045em;
  text-transform: none;
}
html[data-design-theme="paper"] .search,
html[data-design-theme="paper"] input,
html[data-design-theme="paper"] textarea,
html[data-design-theme="paper"] select {
  color: #28221c;
  background: #fbf7ef;
  border-color: #cfc2ae;
  border-radius: 0;
}
html[data-design-theme="paper"] .btn {
  color: #28221c;
  background: transparent;
  border-color: #9d8d76;
  border-radius: 0;
  box-shadow: none;
}
html[data-design-theme="paper"] .btn.primary {
  color: #fffaf0;
  background: #842535;
  border-color: #842535;
}
html[data-design-theme="paper"] .btn.ghost { color: #28221c; background: transparent; border-color: #9d8d76; }
html[data-design-theme="paper"] .metrics {
  border: 0;
  border-top: 1px solid #aa9a84;
  border-bottom: 1px solid #aa9a84;
  background: transparent;
  box-shadow: none;
}
html[data-design-theme="paper"] .metric { border-color: #cfc2ae; }
html[data-design-theme="paper"] .metric.accent { background: rgba(132,37,53,.05); }
html[data-design-theme="paper"] .state-tabs { gap: 20px; border-bottom: 1px solid #cfc2ae; }
html[data-design-theme="paper"] .state-tab {
  min-width: 0;
  padding: 10px 0;
  color: #74695b;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
html[data-design-theme="paper"] .state-tab b { background: #e4dacb; }
html[data-design-theme="paper"] .state-tab.active {
  color: #842535;
  background: transparent;
  border-color: #842535;
  box-shadow: none;
}
html[data-design-theme="paper"] .state-tab.active b { color: #fff; background: #842535; }
html[data-design-theme="paper"] .list-panel,
html[data-design-theme="paper"] .record-view,
html[data-design-theme="paper"] fieldset,
html[data-design-theme="paper"] .details-actions,
html[data-design-theme="paper"] .invoicing,
html[data-design-theme="paper"] .plugin-bar,
html[data-design-theme="paper"] .assessor-legend,
html[data-design-theme="paper"] .quote-toolbar,
html[data-design-theme="paper"] .col,
html[data-design-theme="paper"] .modal-card {
  color: #28221c;
  background: rgba(248, 243, 233, .88);
  border-color: #cfc2ae;
  border-radius: 0;
  box-shadow: none;
}
html[data-design-theme="paper"] .list-heading,
html[data-design-theme="paper"] .record-tabs,
html[data-design-theme="paper"] .col h4,
html[data-design-theme="paper"] .sel-table th,
html[data-design-theme="paper"] .quote-list th {
  color: #5f5549;
  background: #e8dfd1;
  border-color: #cfc2ae;
}
html[data-design-theme="paper"] .quote-list td,
html[data-design-theme="paper"] .group-item,
html[data-design-theme="paper"] .choice,
html[data-design-theme="paper"] .sel-table td { color: #3c342c; border-color: #d9cebc; }
html[data-design-theme="paper"] .quote-list a { color: #842535; }
html[data-design-theme="paper"] .record-tab,
html[data-design-theme="paper"] .area-tab { color: #665b4f; background: transparent; border-radius: 0; }
html[data-design-theme="paper"] .record-tab.active,
html[data-design-theme="paper"] .area-tab.active { color: #842535; background: transparent; border-color: #842535; }
html[data-design-theme="paper"] .quote-footer { color: #5f5549; background: rgba(238,231,218,.96); border-color: #aa9a84; border-radius: 0; }
html[data-design-theme="paper"] .quote-footer b { color: #28221c; }
html[data-design-theme="paper"] .stage i { color: #842535; background: #f8f3e9; }
html[data-design-theme="paper"] .design-option { color: #28221c; background: #f8f3e9; }
html[data-design-theme="paper"] .quote-list .job-row { background: #f8f3e9; }

/* Restore special desktop layouts gracefully on smaller screens. */
@media (max-width: 1050px) {
  html[data-design-theme="silver"] .topbar {
    position: sticky;
    inset: auto;
    width: auto;
    height: auto;
    min-height: 84px;
    flex-direction: row;
    align-items: flex-start;
    padding: 13px 18px;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid #9da4aa;
  }
  html[data-design-theme="silver"] .topbar-actions {
    width: 100%;
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
  }
  html[data-design-theme="silver"] .topbar-actions::before { display: none; }
  html[data-design-theme="silver"] .topbar-actions .search { width: auto; min-width: 230px; margin: 0; }
  html[data-design-theme="silver"] .topbar-actions .btn { width: auto; }
  html[data-design-theme="silver"] main { margin-left: 0; }
  html[data-design-theme="silver"] .record-tabs { top: 84px; }
}

@media (max-width: 900px) {
  html[data-design-theme="cobalt"] .topbar { margin: 8px; top: 6px; border-radius: 16px; }
  html[data-design-theme="cobalt"] .record-tabs { top: 0; }
  html[data-design-theme="paper"] .topbar { position: relative; }
}

/* 06 / DARK SILVER — brushed gunmetal and crimson ----------------------- */
html[data-design-theme="dark-silver"] {
  color-scheme: dark;
  --bg: #111315;
  --panel: #24272a;
  --panel-2: #2d3034;
  --panel-3: #373b3f;
  --text: #f4f5f6;
  --muted: #afb4b8;
  --muted-2: #7c8287;
  --red: #d52e43;
  --red-hot: #f14a5d;
  --red-dark: #9f1b2d;
  --accent-rgb: 213, 46, 67;
  --red-soft: rgba(var(--accent-rgb), .12);
  --border: #484d51;
  --border-hi: #666c71;
  --green: #55d68b;
  --amber: #e8af51;
  --blue: #7aa9e8;
  --radius: 8px;
  --radius-sm: 6px;
  --shadow: 0 22px 58px rgba(0, 0, 0, .34);
  --shadow-soft: 0 9px 28px rgba(0, 0, 0, .24);
}
html[data-design-theme="dark-silver"] body {
  color: #f4f5f6;
  background:
    radial-gradient(circle at 76% -12%, rgba(213, 46, 67, .12), transparent 34rem),
    repeating-linear-gradient(100deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px),
    linear-gradient(145deg, #17191b, #0f1113 70%);
}
html[data-design-theme="dark-silver"] .topbar {
  min-height: 78px;
  border-bottom: 1px solid #51565a;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), transparent 48%),
    linear-gradient(135deg, rgba(49,53,57,.97), rgba(27,29,32,.97));
  box-shadow: 0 14px 40px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.09);
}
html[data-design-theme="dark-silver"] .topbar::after {
  width: min(30vw, 480px);
  background: linear-gradient(90deg, #d52e43, rgba(213,46,67,.32), transparent);
}
html[data-design-theme="dark-silver"] .logo {
  border-color: #e85a6b;
  border-radius: 7px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.14), transparent 45%),
    linear-gradient(145deg, #e23a50, #8d1828);
  box-shadow: 0 10px 24px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.22);
}
html[data-design-theme="dark-silver"] .brand-kicker { color: #ef6071; }
html[data-design-theme="dark-silver"] .search,
html[data-design-theme="dark-silver"] input,
html[data-design-theme="dark-silver"] textarea,
html[data-design-theme="dark-silver"] select {
  color: #f5f6f7;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent),
    #17191b;
  border-color: #4a4f53;
  border-radius: 5px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.28);
}
html[data-design-theme="dark-silver"] .btn {
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: .055em;
}
html[data-design-theme="dark-silver"] .btn.ghost,
html[data-design-theme="dark-silver"] .state-tab,
html[data-design-theme="dark-silver"] .area-tab {
  color: #e4e6e8;
  background:
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.015)),
    #2a2d30;
  border-color: #555b60;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 5px rgba(0,0,0,.2);
}
html[data-design-theme="dark-silver"] .btn.ghost:hover {
  color: #fff;
  background: linear-gradient(180deg, #464a4e, #303337);
  border-color: #70767b;
}
html[data-design-theme="dark-silver"] .btn.primary {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), transparent 48%),
    linear-gradient(135deg, #e03b50, #9f1b2d);
  border-color: #ef5365;
  box-shadow: 0 8px 20px rgba(136, 15, 35, .28), inset 0 1px 0 rgba(255,255,255,.2);
}
html[data-design-theme="dark-silver"] .metrics {
  border: 0;
  gap: 8px;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
html[data-design-theme="dark-silver"] .metric {
  border: 1px solid #4b5054;
  border-radius: 7px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), transparent 45%),
    linear-gradient(145deg, #35393d, #24272a);
  box-shadow: 0 8px 20px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
}
html[data-design-theme="dark-silver"] .metric:last-child { border: 1px solid #4b5054; }
html[data-design-theme="dark-silver"] .metric.accent {
  border-color: rgba(213,46,67,.52);
  background:
    linear-gradient(145deg, rgba(213,46,67,.18), transparent 52%),
    linear-gradient(145deg, #35393d, #24272a);
}
html[data-design-theme="dark-silver"] .list-panel,
html[data-design-theme="dark-silver"] .record-view,
html[data-design-theme="dark-silver"] fieldset,
html[data-design-theme="dark-silver"] .details-actions,
html[data-design-theme="dark-silver"] .invoicing,
html[data-design-theme="dark-silver"] .plugin-bar,
html[data-design-theme="dark-silver"] .assessor-legend,
html[data-design-theme="dark-silver"] .quote-toolbar,
html[data-design-theme="dark-silver"] .col,
html[data-design-theme="dark-silver"] .modal-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,.035), transparent 45%),
    #24272a;
  border-color: #474c50;
  box-shadow: 0 18px 45px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.045);
}
html[data-design-theme="dark-silver"] .list-heading,
html[data-design-theme="dark-silver"] .record-tabs,
html[data-design-theme="dark-silver"] .col h4,
html[data-design-theme="dark-silver"] .sel-table th {
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), transparent),
    #1c1f21;
  border-color: #474c50;
}
html[data-design-theme="dark-silver"] .quote-list th {
  color: #aeb3b7;
  background: #191b1d;
  border-color: #41464a;
}
html[data-design-theme="dark-silver"] .quote-list td,
html[data-design-theme="dark-silver"] .group-item,
html[data-design-theme="dark-silver"] .choice,
html[data-design-theme="dark-silver"] .sel-table td { color: #e0e3e5; border-color: #383d40; }
html[data-design-theme="dark-silver"] .quote-list .job-row:nth-child(even) { background: rgba(255,255,255,.018); }
html[data-design-theme="dark-silver"] .quote-list .job-row:hover {
  background: linear-gradient(90deg, rgba(213,46,67,.12), rgba(255,255,255,.02));
}
html[data-design-theme="dark-silver"] .state-tab.active,
html[data-design-theme="dark-silver"] .record-tab.active,
html[data-design-theme="dark-silver"] .area-tab.active {
  color: #fff;
  border-color: rgba(213,46,67,.68);
  background: linear-gradient(180deg, rgba(213,46,67,.2), rgba(130,20,36,.12));
  box-shadow: inset 0 -2px 0 #d52e43;
}
html[data-design-theme="dark-silver"] .quote-footer {
  color: #b6bbc0;
  background: rgba(20,22,24,.96);
  border-color: #4a4f53;
  box-shadow: 0 -10px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
}
html[data-design-theme="dark-silver"] .stage i { background: #24272a; }
html[data-design-theme="dark-silver"] .design-option { color: #f2f3f4; background: linear-gradient(145deg, #35393d, #202326); }
html[data-design-theme="dark-silver"] .quote-list .job-row { background: #272a2d; }

/* 07 / HEX FORGE — chamfered geometry and copper ------------------------- */
html[data-design-theme="hex-forge"] {
  color-scheme: dark;
  --bg: #0d0c0a;
  --panel: #1b1814;
  --panel-2: #242019;
  --panel-3: #30291f;
  --text: #f3eadf;
  --muted: #b3a18d;
  --muted-2: #766855;
  --red: #d47a2d;
  --red-hot: #ef9a4d;
  --red-dark: #9f4d13;
  --accent-rgb: 212, 122, 45;
  --red-soft: rgba(var(--accent-rgb), .12);
  --border: #4a3e30;
  --border-hi: #685641;
  --green: #67ca87;
  --amber: #d99a42;
  --blue: #719ccc;
  --radius: 0;
  --radius-sm: 0;
  --shadow: 12px 14px 0 rgba(0,0,0,.28);
  --shadow-soft: 7px 8px 0 rgba(0,0,0,.2);
}
html[data-design-theme="hex-forge"] body {
  background:
    linear-gradient(30deg, rgba(212,122,45,.035) 12%, transparent 12.5%, transparent 87%, rgba(212,122,45,.035) 87.5%),
    linear-gradient(150deg, rgba(212,122,45,.035) 12%, transparent 12.5%, transparent 87%, rgba(212,122,45,.035) 87.5%),
    #0d0c0a;
  background-size: 48px 84px;
}
html[data-design-theme="hex-forge"] .topbar {
  min-height: 82px;
  border: 0;
  border-bottom: 1px solid #574936;
  background: linear-gradient(110deg, #211c16, #11100d 65%);
  box-shadow: 0 14px 40px rgba(0,0,0,.42);
}
html[data-design-theme="hex-forge"] .topbar::after {
  width: 42%;
  height: 4px;
  background: linear-gradient(90deg, #d47a2d, #7d3b12, transparent);
}
html[data-design-theme="hex-forge"] .logo {
  border: 0;
  border-radius: 0;
  background: linear-gradient(145deg, #f0a15a, #9f4d13);
  clip-path: polygon(24% 0, 76% 0, 100% 24%, 100% 76%, 76% 100%, 24% 100%, 0 76%, 0 24%);
  box-shadow: 0 0 28px rgba(212,122,45,.22);
}
html[data-design-theme="hex-forge"] .logo::after {
  border-radius: 0;
  clip-path: polygon(24% 0, 76% 0, 100% 24%, 100% 76%, 76% 100%, 24% 100%, 0 76%, 0 24%);
}
html[data-design-theme="hex-forge"] .btn,
html[data-design-theme="hex-forge"] .state-tab,
html[data-design-theme="hex-forge"] .area-tab,
html[data-design-theme="hex-forge"] .record-tab {
  border-radius: 0;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
html[data-design-theme="hex-forge"] .btn.primary {
  color: #170c04;
  background: linear-gradient(135deg, #f0a15a, #b85d18);
  border: 0;
  box-shadow: none;
}
html[data-design-theme="hex-forge"] .btn.ghost,
html[data-design-theme="hex-forge"] .state-tab,
html[data-design-theme="hex-forge"] .area-tab {
  color: #e3d6c7;
  background: #262119;
  border-color: #5b4a37;
}
html[data-design-theme="hex-forge"] .metrics {
  gap: 9px;
  overflow: visible;
  border: 0;
  background: transparent;
}
html[data-design-theme="hex-forge"] .metric {
  border: 1px solid #574936;
  background: linear-gradient(145deg, #2a241b, #171410);
  clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
html[data-design-theme="hex-forge"] .metric:last-child { border: 1px solid #574936; }
html[data-design-theme="hex-forge"] .list-panel,
html[data-design-theme="hex-forge"] fieldset,
html[data-design-theme="hex-forge"] .details-actions,
html[data-design-theme="hex-forge"] .invoicing,
html[data-design-theme="hex-forge"] .plugin-bar,
html[data-design-theme="hex-forge"] .assessor-legend,
html[data-design-theme="hex-forge"] .quote-toolbar,
html[data-design-theme="hex-forge"] .col,
html[data-design-theme="hex-forge"] .modal-card {
  border-radius: 0;
  background: #1b1814;
  border-color: #4a3e30;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
html[data-design-theme="hex-forge"] .record-view {
  border-radius: 0;
  background: #1b1814;
  border-color: #4a3e30;
}
html[data-design-theme="hex-forge"] .list-heading,
html[data-design-theme="hex-forge"] .record-tabs,
html[data-design-theme="hex-forge"] .col h4,
html[data-design-theme="hex-forge"] .quote-list th,
html[data-design-theme="hex-forge"] .sel-table th { background: #12100d; border-color: #4a3e30; }
html[data-design-theme="hex-forge"] .search,
html[data-design-theme="hex-forge"] input,
html[data-design-theme="hex-forge"] textarea,
html[data-design-theme="hex-forge"] select {
  color: #f0e6da;
  background: #12100d;
  border-color: #534533;
  border-radius: 0;
  clip-path: polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
html[data-design-theme="hex-forge"] .quote-footer {
  color: #c8b8a5;
  background: #12100d;
  border-color: #5b4a37;
  border-radius: 0;
  clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
html[data-design-theme="hex-forge"] .quote-list .job-row { background: #1e1a15; }

/* 08 / SOFT STUDIO — organic radii and floating capsules ---------------- */
html[data-design-theme="soft-studio"] {
  color-scheme: light;
  --bg: #eee8ef;
  --panel: #fffaf7;
  --panel-2: #f6eff5;
  --panel-3: #e9dfe9;
  --text: #3e3340;
  --muted: #7f7080;
  --muted-2: #a799a7;
  --red: #ef6f61;
  --red-hot: #ff897c;
  --red-dark: #c84c42;
  --accent-rgb: 239, 111, 97;
  --red-soft: rgba(var(--accent-rgb), .1);
  --border: #dacdda;
  --border-hi: #c4b2c3;
  --green: #4aa87c;
  --amber: #bd7b33;
  --blue: #6f83d8;
  --radius: 32px;
  --radius-sm: 999px;
  --shadow: 0 26px 70px rgba(88, 63, 87, .13);
  --shadow-soft: 0 12px 34px rgba(88, 63, 87, .09);
}
html[data-design-theme="soft-studio"] body {
  color: #3e3340;
  background:
    radial-gradient(circle at 12% 3%, rgba(255,255,255,.82), transparent 32rem),
    radial-gradient(circle at 88% 8%, rgba(239,111,97,.12), transparent 30rem),
    #eee8ef;
}
html[data-design-theme="soft-studio"] .topbar {
  top: 10px;
  width: auto;
  min-height: 72px;
  margin: 12px max(14px, calc((100vw - 1500px) / 2)) 0;
  padding: 11px 15px;
  border: 1px solid rgba(218,205,218,.85);
  border-radius: 999px;
  background: rgba(255,250,247,.82);
  box-shadow: 0 18px 50px rgba(88,63,87,.13);
  backdrop-filter: blur(24px) saturate(120%);
}
html[data-design-theme="soft-studio"] .topbar::after { display: none; }
html[data-design-theme="soft-studio"] .logo {
  border: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff9a8d, #e35c50);
  box-shadow: 0 8px 20px rgba(239,111,97,.22);
}
html[data-design-theme="soft-studio"] .brand strong,
html[data-design-theme="soft-studio"] .workspace-head h1,
html[data-design-theme="soft-studio"] .metric strong,
html[data-design-theme="soft-studio"] .list-heading h2,
html[data-design-theme="soft-studio"] .record-ref,
html[data-design-theme="soft-studio"] .modal-card h2 { color: #3e3340; }
html[data-design-theme="soft-studio"] .btn,
html[data-design-theme="soft-studio"] .state-tab,
html[data-design-theme="soft-studio"] .record-tab,
html[data-design-theme="soft-studio"] .area-tab,
html[data-design-theme="soft-studio"] input,
html[data-design-theme="soft-studio"] textarea,
html[data-design-theme="soft-studio"] select { border-radius: 999px; }
html[data-design-theme="soft-studio"] textarea { border-radius: 22px; }
html[data-design-theme="soft-studio"] .btn.primary {
  color: #fff;
  background: linear-gradient(135deg, #ff897c, #df5b50);
  box-shadow: 0 10px 24px rgba(239,111,97,.2);
}
html[data-design-theme="soft-studio"] .btn.ghost,
html[data-design-theme="soft-studio"] .state-tab,
html[data-design-theme="soft-studio"] .area-tab {
  color: #5f5060;
  background: rgba(255,255,255,.62);
  border-color: #dacdda;
}
html[data-design-theme="soft-studio"] .metrics {
  border: 0;
  gap: 13px;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
html[data-design-theme="soft-studio"] .metric {
  border: 1px solid #ded1dd;
  border-radius: 28px;
  background: rgba(255,250,247,.78);
  box-shadow: 0 12px 32px rgba(88,63,87,.08);
}
html[data-design-theme="soft-studio"] .metric:last-child { border: 1px solid #ded1dd; }
html[data-design-theme="soft-studio"] .list-panel,
html[data-design-theme="soft-studio"] .record-view,
html[data-design-theme="soft-studio"] fieldset,
html[data-design-theme="soft-studio"] .details-actions,
html[data-design-theme="soft-studio"] .invoicing,
html[data-design-theme="soft-studio"] .plugin-bar,
html[data-design-theme="soft-studio"] .assessor-legend,
html[data-design-theme="soft-studio"] .quote-toolbar,
html[data-design-theme="soft-studio"] .col,
html[data-design-theme="soft-studio"] .modal-card {
  color: #3e3340;
  background: rgba(255,250,247,.82);
  border-color: #dacdda;
  border-radius: 30px;
  box-shadow: 0 24px 64px rgba(88,63,87,.1);
}
html[data-design-theme="soft-studio"] .list-heading,
html[data-design-theme="soft-studio"] .record-tabs,
html[data-design-theme="soft-studio"] .col h4,
html[data-design-theme="soft-studio"] .quote-list th,
html[data-design-theme="soft-studio"] .sel-table th {
  color: #6d5d6e;
  background: rgba(245,236,244,.82);
  border-color: #dacdda;
}
html[data-design-theme="soft-studio"] .quote-list td,
html[data-design-theme="soft-studio"] .group-item,
html[data-design-theme="soft-studio"] .choice,
html[data-design-theme="soft-studio"] .sel-table td { color: #544655; border-color: #eadfea; }
html[data-design-theme="soft-studio"] .quote-list a { color: #d9554a; }
html[data-design-theme="soft-studio"] .search,
html[data-design-theme="soft-studio"] input,
html[data-design-theme="soft-studio"] textarea,
html[data-design-theme="soft-studio"] select { color: #4b3d4c; background-color: rgba(255,255,255,.72); border-color: #d7c9d7; }
html[data-design-theme="soft-studio"] .quote-footer { color: #746575; background: rgba(255,250,247,.92); border-color: #dacdda; border-radius: 999px; }
html[data-design-theme="soft-studio"] .quote-footer b { color: #3e3340; }
html[data-design-theme="soft-studio"] .stage i { color: #d9554a; background: #fffaf7; }
html[data-design-theme="soft-studio"] .quote-list .job-row { background: #fffaf7; }
html[data-design-theme="soft-studio"] .record-tabs { top: 100px; }

/* 09 / BLUEPRINT GRID — strict modules and drafting lines --------------- */
html[data-design-theme="blueprint"] {
  color-scheme: light;
  --bg: #eaf4ff;
  --panel: #f8fbff;
  --panel-2: #eef6ff;
  --panel-3: #deedfc;
  --text: #0e355e;
  --muted: #526d88;
  --muted-2: #7f9ab4;
  --red: #0878d1;
  --red-hot: #1595f2;
  --red-dark: #07589a;
  --accent-rgb: 8, 120, 209;
  --red-soft: rgba(var(--accent-rgb), .09);
  --border: #8db9e8;
  --border-hi: #4f91d1;
  --green: #278867;
  --amber: #ae7022;
  --blue: #0878d1;
  --radius: 0;
  --radius-sm: 0;
  --shadow: 6px 6px 0 rgba(8, 88, 154, .1);
  --shadow-soft: 4px 4px 0 rgba(8, 88, 154, .08);
}
html[data-design-theme="blueprint"] body {
  color: #0e355e;
  background:
    linear-gradient(rgba(8,120,209,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,120,209,.08) 1px, transparent 1px),
    linear-gradient(rgba(8,120,209,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,120,209,.035) 1px, transparent 1px),
    #eaf4ff;
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px, auto;
}
html[data-design-theme="blueprint"] .topbar {
  border: 0;
  border-bottom: 2px solid #0878d1;
  background: rgba(242,249,255,.94);
  box-shadow: none;
}
html[data-design-theme="blueprint"] .topbar::after { display: none; }
html[data-design-theme="blueprint"] .logo {
  color: #fff;
  border: 0;
  border-radius: 0;
  background: #0878d1;
  box-shadow: 5px 5px 0 rgba(8,88,154,.17);
}
html[data-design-theme="blueprint"] .brand strong,
html[data-design-theme="blueprint"] .workspace-head h1,
html[data-design-theme="blueprint"] .metric strong,
html[data-design-theme="blueprint"] .list-heading h2,
html[data-design-theme="blueprint"] .record-ref,
html[data-design-theme="blueprint"] .modal-card h2 { color: #0e355e; }
html[data-design-theme="blueprint"] .btn,
html[data-design-theme="blueprint"] .state-tab,
html[data-design-theme="blueprint"] .record-tab,
html[data-design-theme="blueprint"] .area-tab,
html[data-design-theme="blueprint"] input,
html[data-design-theme="blueprint"] textarea,
html[data-design-theme="blueprint"] select { border-radius: 0; }
html[data-design-theme="blueprint"] .btn.primary { color: #fff; background: #0878d1; border-color: #0878d1; box-shadow: 4px 4px 0 rgba(8,88,154,.19); }
html[data-design-theme="blueprint"] .btn.ghost,
html[data-design-theme="blueprint"] .state-tab,
html[data-design-theme="blueprint"] .area-tab { color: #0e355e; background: #f8fbff; border-color: #77a9dc; }
html[data-design-theme="blueprint"] .workspace-head > div:first-child { padding: 18px; border: 1px solid #8db9e8; background: rgba(248,251,255,.7); }
html[data-design-theme="blueprint"] .metrics { border: 0; gap: 8px; overflow: visible; background: transparent; box-shadow: none; }
html[data-design-theme="blueprint"] .metric { border: 1px solid #78abe0; background: rgba(248,251,255,.86); box-shadow: 5px 5px 0 rgba(8,88,154,.09); }
html[data-design-theme="blueprint"] .metric:last-child { border: 1px solid #78abe0; }
html[data-design-theme="blueprint"] .list-panel,
html[data-design-theme="blueprint"] .record-view,
html[data-design-theme="blueprint"] fieldset,
html[data-design-theme="blueprint"] .details-actions,
html[data-design-theme="blueprint"] .invoicing,
html[data-design-theme="blueprint"] .plugin-bar,
html[data-design-theme="blueprint"] .assessor-legend,
html[data-design-theme="blueprint"] .quote-toolbar,
html[data-design-theme="blueprint"] .col,
html[data-design-theme="blueprint"] .modal-card {
  color: #0e355e;
  background: rgba(248,251,255,.9);
  border-color: #78abe0;
  border-radius: 0;
  box-shadow: 6px 6px 0 rgba(8,88,154,.09);
}
html[data-design-theme="blueprint"] .list-heading,
html[data-design-theme="blueprint"] .record-tabs,
html[data-design-theme="blueprint"] .col h4,
html[data-design-theme="blueprint"] .quote-list th,
html[data-design-theme="blueprint"] .sel-table th { color: #315c86; background: #dcecff; border-color: #78abe0; }
html[data-design-theme="blueprint"] .quote-list td,
html[data-design-theme="blueprint"] .group-item,
html[data-design-theme="blueprint"] .choice,
html[data-design-theme="blueprint"] .sel-table td { color: #244c73; border-color: #bdd7f0; }
html[data-design-theme="blueprint"] .quote-list a { color: #0878d1; }
html[data-design-theme="blueprint"] .search,
html[data-design-theme="blueprint"] input,
html[data-design-theme="blueprint"] textarea,
html[data-design-theme="blueprint"] select { color: #0e355e; background: #f9fcff; border-color: #78abe0; }
html[data-design-theme="blueprint"] .state-tab.active,
html[data-design-theme="blueprint"] .record-tab.active,
html[data-design-theme="blueprint"] .area-tab.active { color: #fff; background: #0878d1; border-color: #0878d1; box-shadow: none; }
html[data-design-theme="blueprint"] .quote-footer { color: #315c86; background: rgba(234,244,255,.96); border-color: #78abe0; border-radius: 0; }
html[data-design-theme="blueprint"] .quote-footer b { color: #0e355e; }
html[data-design-theme="blueprint"] .stage i { color: #0878d1; background: #f8fbff; }
html[data-design-theme="blueprint"] .design-option { color: #0e355e; background: #f8fbff; }
html[data-design-theme="blueprint"] .quote-list .job-row { background: #f8fbff; }

@media (max-width: 900px) {
  html[data-design-theme="soft-studio"] .topbar { margin: 8px; top: 6px; border-radius: 24px; }
  html[data-design-theme="soft-studio"] .record-tabs { top: 0; }
}

/* 10 / DARK BLUEPRINT — Dark Silver palette + Blueprint geometry -------- */
html[data-design-theme="dark-blueprint"] {
  color-scheme: dark;
  --bg: #111315;
  --panel: #24272a;
  --panel-2: #2d3034;
  --panel-3: #373b3f;
  --text: #f4f5f6;
  --muted: #b1b6ba;
  --muted-2: #7d8489;
  --red: #d52e43;
  --red-hot: #f14a5d;
  --red-dark: #9f1b2d;
  --accent-rgb: 213, 46, 67;
  --red-soft: rgba(var(--accent-rgb), .11);
  --border: #555b60;
  --border-hi: #757c82;
  --green: #55d68b;
  --amber: #e8af51;
  --blue: #8da6bf;
  --radius: 0;
  --radius-sm: 0;
  --shadow: 7px 7px 0 rgba(0,0,0,.35);
  --shadow-soft: 4px 4px 0 rgba(0,0,0,.28);
}
html[data-design-theme="dark-blueprint"] body {
  color: #f4f5f6;
  background:
    linear-gradient(rgba(213,46,67,.095) 1px, transparent 1px),
    linear-gradient(90deg, rgba(213,46,67,.095) 1px, transparent 1px),
    linear-gradient(rgba(180,188,195,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180,188,195,.035) 1px, transparent 1px),
    linear-gradient(145deg, #171a1c, #0d0f11 72%);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px, auto;
}
html[data-design-theme="dark-blueprint"] .topbar {
  min-height: 76px;
  border: 0;
  border-bottom: 2px solid #d52e43;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), transparent 45%),
    rgba(27,30,32,.96);
  box-shadow: 0 12px 34px rgba(0,0,0,.4);
}
html[data-design-theme="dark-blueprint"] .topbar::after { display: none; }
html[data-design-theme="dark-blueprint"] .topbar::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 18%;
  height: 2px;
  background: #f14a5d;
  box-shadow: 28vw 0 0 rgba(213,46,67,.28), 56vw 0 0 rgba(213,46,67,.14);
}
html[data-design-theme="dark-blueprint"] .logo {
  color: #fff;
  border: 1px solid #e45062;
  border-radius: 0;
  background: #b72237;
  box-shadow: 5px 5px 0 #08090a;
}
html[data-design-theme="dark-blueprint"] .logo::after { border-radius: 0; }
html[data-design-theme="dark-blueprint"] .brand-kicker { color: #f16879; }
html[data-design-theme="dark-blueprint"] .workspace-head > div:first-child {
  position: relative;
  padding: 18px 20px;
  border: 1px solid #555b60;
  background:
    linear-gradient(#d52e43,#d52e43) left top / 22px 2px no-repeat,
    linear-gradient(#d52e43,#d52e43) left top / 2px 22px no-repeat,
    linear-gradient(#d52e43,#d52e43) right bottom / 22px 2px no-repeat,
    linear-gradient(#d52e43,#d52e43) right bottom / 2px 22px no-repeat,
    rgba(30,33,36,.76);
  box-shadow: 5px 5px 0 rgba(0,0,0,.24);
}
html[data-design-theme="dark-blueprint"] .btn,
html[data-design-theme="dark-blueprint"] .state-tab,
html[data-design-theme="dark-blueprint"] .record-tab,
html[data-design-theme="dark-blueprint"] .area-tab,
html[data-design-theme="dark-blueprint"] input,
html[data-design-theme="dark-blueprint"] textarea,
html[data-design-theme="dark-blueprint"] select {
  border-radius: 0;
}
html[data-design-theme="dark-blueprint"] .btn {
  text-transform: uppercase;
  letter-spacing: .045em;
}
html[data-design-theme="dark-blueprint"] .btn.primary {
  color: #fff;
  background: #b72237;
  border-color: #e45062;
  box-shadow: 4px 4px 0 #08090a;
}
html[data-design-theme="dark-blueprint"] .btn.ghost,
html[data-design-theme="dark-blueprint"] .state-tab,
html[data-design-theme="dark-blueprint"] .area-tab {
  color: #e3e6e8;
  background: #292d30;
  border-color: #62686d;
  box-shadow: 3px 3px 0 rgba(0,0,0,.25);
}
html[data-design-theme="dark-blueprint"] .search,
html[data-design-theme="dark-blueprint"] input,
html[data-design-theme="dark-blueprint"] textarea,
html[data-design-theme="dark-blueprint"] select {
  color: #f5f6f7;
  background: #151719;
  border-color: #5a6065;
  box-shadow: inset 3px 3px 0 rgba(0,0,0,.18);
}
html[data-design-theme="dark-blueprint"] .metrics {
  border: 0;
  gap: 9px;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
html[data-design-theme="dark-blueprint"] .metric {
  position: relative;
  border: 1px solid #5a6065;
  border-radius: 0;
  background:
    linear-gradient(#d52e43,#d52e43) left top / 16px 2px no-repeat,
    linear-gradient(#d52e43,#d52e43) left top / 2px 16px no-repeat,
    linear-gradient(#d52e43,#d52e43) right bottom / 16px 2px no-repeat,
    linear-gradient(#d52e43,#d52e43) right bottom / 2px 16px no-repeat,
    linear-gradient(145deg, #34383b, #24272a);
  box-shadow: 5px 5px 0 #0a0b0c;
}
html[data-design-theme="dark-blueprint"] .metric:last-child { border: 1px solid #5a6065; }
html[data-design-theme="dark-blueprint"] .metric.accent {
  background:
    linear-gradient(#f14a5d,#f14a5d) left top / 16px 2px no-repeat,
    linear-gradient(#f14a5d,#f14a5d) left top / 2px 16px no-repeat,
    linear-gradient(#f14a5d,#f14a5d) right bottom / 16px 2px no-repeat,
    linear-gradient(#f14a5d,#f14a5d) right bottom / 2px 16px no-repeat,
    linear-gradient(145deg, rgba(213,46,67,.2), #24272a 58%);
}
html[data-design-theme="dark-blueprint"] .list-panel,
html[data-design-theme="dark-blueprint"] .record-view,
html[data-design-theme="dark-blueprint"] fieldset,
html[data-design-theme="dark-blueprint"] .details-actions,
html[data-design-theme="dark-blueprint"] .invoicing,
html[data-design-theme="dark-blueprint"] .plugin-bar,
html[data-design-theme="dark-blueprint"] .assessor-legend,
html[data-design-theme="dark-blueprint"] .quote-toolbar,
html[data-design-theme="dark-blueprint"] .col,
html[data-design-theme="dark-blueprint"] .modal-card {
  color: #f4f5f6;
  border-color: #555b60;
  border-radius: 0;
  background:
    linear-gradient(#d52e43,#d52e43) left top / 18px 2px no-repeat,
    linear-gradient(#d52e43,#d52e43) left top / 2px 18px no-repeat,
    linear-gradient(#d52e43,#d52e43) right bottom / 18px 2px no-repeat,
    linear-gradient(#d52e43,#d52e43) right bottom / 2px 18px no-repeat,
    rgba(34,37,40,.96);
  box-shadow: 7px 7px 0 rgba(0,0,0,.31);
}
html[data-design-theme="dark-blueprint"] .list-heading,
html[data-design-theme="dark-blueprint"] .record-tabs,
html[data-design-theme="dark-blueprint"] .col h4,
html[data-design-theme="dark-blueprint"] .quote-list th,
html[data-design-theme="dark-blueprint"] .sel-table th {
  color: #b8bdc1;
  background: #191c1e;
  border-color: #555b60;
}
html[data-design-theme="dark-blueprint"] .quote-list td,
html[data-design-theme="dark-blueprint"] .group-item,
html[data-design-theme="dark-blueprint"] .choice,
html[data-design-theme="dark-blueprint"] .sel-table td {
  color: #e1e4e6;
  border-color: #3e4347;
}
html[data-design-theme="dark-blueprint"] .quote-list a { color: #f14a5d; }
html[data-design-theme="dark-blueprint"] .state-tab.active,
html[data-design-theme="dark-blueprint"] .record-tab.active,
html[data-design-theme="dark-blueprint"] .area-tab.active {
  color: #fff;
  background: #b72237;
  border-color: #e45062;
  box-shadow: 3px 3px 0 #08090a;
}
html[data-design-theme="dark-blueprint"] .quote-footer {
  color: #b8bdc1;
  background: #17191b;
  border-color: #5a6065;
  border-radius: 0;
  box-shadow: 5px 5px 0 #08090a;
}
html[data-design-theme="dark-blueprint"] .quote-footer b { color: #f2f4f5; }
html[data-design-theme="dark-blueprint"] .stage i { background: #24272a; border-radius: 0; }
html[data-design-theme="dark-blueprint"] .design-option { color: #f2f3f4; background: #25282b; border-radius: 0; }
html[data-design-theme="dark-blueprint"] .quote-list .job-row { background: #26292c; }

@media (min-width: 721px) {
  .design-option:last-child:nth-child(3n + 1) { grid-column: 2; }
}

/* Dark Silver refinement — strict, simple rectangular language ----------- */
html[data-design-theme="dark-silver"] {
  --radius: 0;
  --radius-sm: 0;
  --shadow: 0 10px 28px rgba(0,0,0,.28);
  --shadow-soft: 0 5px 16px rgba(0,0,0,.2);
}
html[data-design-theme="dark-silver"] body {
  background: linear-gradient(180deg, #1b1e20, #111315 440px, #0f1113);
}
html[data-design-theme="dark-silver"] .topbar {
  min-height: 74px;
  border: 0;
  border-bottom: 2px solid #d52e43;
  border-radius: 0;
  background: #202326;
  box-shadow: 0 8px 24px rgba(0,0,0,.32);
}
html[data-design-theme="dark-silver"] .topbar::after { display: none; }
html[data-design-theme="dark-silver"] .logo {
  border: 1px solid #e04a5c;
  border-radius: 0;
  background: #b72237;
  box-shadow: none;
}
html[data-design-theme="dark-silver"] .logo::after { border-radius: 0; }
html[data-design-theme="dark-silver"] .btn,
html[data-design-theme="dark-silver"] .state-tab,
html[data-design-theme="dark-silver"] .record-tab,
html[data-design-theme="dark-silver"] .area-tab,
html[data-design-theme="dark-silver"] .status,
html[data-design-theme="dark-silver"] input,
html[data-design-theme="dark-silver"] textarea,
html[data-design-theme="dark-silver"] select,
html[data-design-theme="dark-silver"] .theme-trigger b,
html[data-design-theme="dark-silver"] .panel-index,
html[data-design-theme="dark-silver"] .live-state,
html[data-design-theme="dark-silver"] .stage i {
  border-radius: 0;
  clip-path: none;
}
html[data-design-theme="dark-silver"] .btn {
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
}
html[data-design-theme="dark-silver"] .btn.primary {
  color: #fff;
  background: #b72237;
  border-color: #d84155;
  box-shadow: none;
}
html[data-design-theme="dark-silver"] .btn.primary:hover { background: #cc2b40; }
html[data-design-theme="dark-silver"] .btn.ghost,
html[data-design-theme="dark-silver"] .state-tab,
html[data-design-theme="dark-silver"] .area-tab {
  color: #e5e7e9;
  background: #2b2e31;
  border-color: #50565a;
  box-shadow: none;
}
html[data-design-theme="dark-silver"] .btn.ghost:hover { background: #363a3e; }
html[data-design-theme="dark-silver"] .search,
html[data-design-theme="dark-silver"] input,
html[data-design-theme="dark-silver"] textarea,
html[data-design-theme="dark-silver"] select {
  color: #f4f5f6;
  background: #17191b;
  border-color: #4d5357;
  box-shadow: none;
}
html[data-design-theme="dark-silver"] .metrics {
  gap: 0;
  overflow: hidden;
  border: 1px solid #4b5054;
  border-radius: 0;
  background: #24272a;
  box-shadow: none;
}
html[data-design-theme="dark-silver"] .metric,
html[data-design-theme="dark-silver"] .metric:last-child {
  border: 0;
  border-right: 1px solid #4b5054;
  border-radius: 0;
  background: #24272a;
  box-shadow: none;
}
html[data-design-theme="dark-silver"] .metric:last-child { border-right: 0; }
html[data-design-theme="dark-silver"] .metric.accent { background: #2d2528; }
html[data-design-theme="dark-silver"] .state-tabs { gap: 4px; }
html[data-design-theme="dark-silver"] .state-tab.active,
html[data-design-theme="dark-silver"] .record-tab.active,
html[data-design-theme="dark-silver"] .area-tab.active {
  color: #fff;
  background: #3a2429;
  border-color: #d52e43;
  box-shadow: inset 0 -2px 0 #d52e43;
}
html[data-design-theme="dark-silver"] .list-panel,
html[data-design-theme="dark-silver"] .record-view,
html[data-design-theme="dark-silver"] fieldset,
html[data-design-theme="dark-silver"] .details-actions,
html[data-design-theme="dark-silver"] .invoicing,
html[data-design-theme="dark-silver"] .plugin-bar,
html[data-design-theme="dark-silver"] .assessor-legend,
html[data-design-theme="dark-silver"] .quote-toolbar,
html[data-design-theme="dark-silver"] .col,
html[data-design-theme="dark-silver"] .modal-card,
html[data-design-theme="dark-silver"] .design-option {
  border-radius: 0;
  clip-path: none;
  background: #24272a;
  border-color: #4b5054;
  box-shadow: none;
}
html[data-design-theme="dark-silver"] .list-heading,
html[data-design-theme="dark-silver"] .record-tabs,
html[data-design-theme="dark-silver"] .col h4,
html[data-design-theme="dark-silver"] .sel-table th {
  border-radius: 0;
  background: #1b1d1f;
  border-color: #484d51;
}
html[data-design-theme="dark-silver"] .quote-list th { background: #181a1c; }
html[data-design-theme="dark-silver"] .quote-footer {
  color: #b7bcc0;
  background: #17191b;
  border-color: #4d5357;
  border-radius: 0;
  box-shadow: none;
}
html[data-design-theme="dark-silver"] .quote-list .job-row { background: #24272a; }
html[data-design-theme="dark-silver"] .theme-dot,
html[data-design-theme="dark-silver"] .eyebrow i,
html[data-design-theme="dark-silver"] .live-state i,
html[data-design-theme="dark-silver"] .status::before,
html[data-design-theme="dark-silver"] .metric.accent::after,
html[data-design-theme="dark-silver"] .design-option.active::after { border-radius: 0; }

@media (max-width: 600px) {
  html[data-design-theme="dark-silver"] .metric,
  html[data-design-theme="dark-silver"] .metric:last-child {
    border-right: 0;
    border-bottom: 1px solid #4b5054;
  }
  html[data-design-theme="dark-silver"] .metric:last-child { border-bottom: 0; }
}

/* Persistent light / dark control ---------------------------------------- */
.mode-toggle {
  min-height: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 9px 7px 11px;
  color: #e5e7e9;
  background: #2b2e31;
  border: 1px solid #50565a;
  border-radius: 0;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.mode-toggle:hover { color: #fff; background: #363a3e; border-color: #6a7075; }
.mode-toggle:focus-visible { outline: 3px solid rgba(var(--accent-rgb), .28); outline-offset: 2px; }
.mode-toggle-icon { width: 13px; color: var(--red-hot); font-size: 14px; line-height: 1; }
.mode-toggle-track {
  position: relative;
  width: 29px;
  height: 16px;
  overflow: hidden;
  background: #151719;
  border: 1px solid #5d6368;
}
.mode-toggle-track > span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  background: #8f969b;
  transition: transform .18s ease, background .18s ease;
}
.mode-toggle[aria-checked="true"] .mode-toggle-track > span {
  transform: translateX(13px);
  background: var(--red-hot);
}

html[data-color-mode="light"] {
  color-scheme: light;
  --bg: #e3e6e8;
  --panel: #f4f5f6;
  --panel-2: #e9ecee;
  --panel-3: #dfe3e6;
  --text: #202428;
  --muted: #626a70;
  --muted-2: #8a9196;
  --border: #b5bbc0;
  --border-hi: #8e969c;
  --shadow: 0 10px 28px rgba(42, 47, 51, .13);
  --shadow-soft: 0 5px 16px rgba(42, 47, 51, .1);
}
html[data-color-mode="light"] body {
  color: var(--text);
  background:
    linear-gradient(rgba(73, 82, 89, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(73, 82, 89, .045) 1px, transparent 1px),
    linear-gradient(180deg, #eef0f1, #dfe3e5 440px, #d8dcde);
  background-size: 32px 32px, 32px 32px, auto;
}
html[data-color-mode="light"] .topbar {
  color: #22272b;
  background: #d6dadd;
  border-bottom-color: var(--red);
  box-shadow: 0 8px 24px rgba(43, 49, 54, .16);
}
html[data-color-mode="light"] .brand strong,
html[data-color-mode="light"] .workspace-head h1,
html[data-color-mode="light"] .metric strong,
html[data-color-mode="light"] .list-heading h2,
html[data-color-mode="light"] .record-ref,
html[data-color-mode="light"] .invoicing h4,
html[data-color-mode="light"] .modal-card h2,
html[data-color-mode="light"] legend { color: #24292d; }
html[data-color-mode="light"] .brand-kicker { color: #9e2032; }
html[data-color-mode="light"] .brand .sub,
html[data-color-mode="light"] .workspace-head p,
html[data-color-mode="light"] .field-label,
html[data-color-mode="light"] .list-heading p,
html[data-color-mode="light"] label,
html[data-color-mode="light"] .tag { color: #626a70; }
html[data-color-mode="light"] .search,
html[data-color-mode="light"] input,
html[data-color-mode="light"] textarea,
html[data-color-mode="light"] select {
  color: #24292d;
  background-color: #fbfbfc;
  border-color: #aeb5ba;
  box-shadow: none;
}
html[data-color-mode="light"] input::placeholder,
html[data-color-mode="light"] textarea::placeholder,
html[data-color-mode="light"] .search::placeholder { color: #858d93; }
html[data-color-mode="light"] .btn.ghost,
html[data-color-mode="light"] .state-tab,
html[data-color-mode="light"] .record-tab,
html[data-color-mode="light"] .area-tab,
html[data-color-mode="light"] .mode-toggle {
  color: #343a3f;
  background: #e9ecee;
  border-color: #aeb5ba;
  box-shadow: none;
}
html[data-color-mode="light"] .btn.ghost:hover,
html[data-color-mode="light"] .state-tab:hover,
html[data-color-mode="light"] .area-tab:hover,
html[data-color-mode="light"] .mode-toggle:hover {
  color: #181c1f;
  background: #f7f8f8;
  border-color: #858e94;
}
html[data-color-mode="light"] .mode-toggle-track { background: #f7f8f8; border-color: #939ba1; }
html[data-color-mode="light"] .mode-toggle-track > span { background: #5f686e; }
html[data-color-mode="light"] .metrics,
html[data-color-mode="light"] .list-panel,
html[data-color-mode="light"] .record-view,
html[data-color-mode="light"] fieldset,
html[data-color-mode="light"] .details-actions,
html[data-color-mode="light"] .invoicing,
html[data-color-mode="light"] .plugin-bar,
html[data-color-mode="light"] .assessor-legend,
html[data-color-mode="light"] .quote-toolbar,
html[data-color-mode="light"] .col,
html[data-color-mode="light"] .modal-card,
html[data-color-mode="light"] .design-option {
  color: #24292d;
  background: #f3f4f5;
  border-color: #b5bbc0;
  box-shadow: var(--shadow-soft);
}
html[data-color-mode="light"] .metric {
  background: #eceff1;
  border-color: #b5bbc0;
}
html[data-color-mode="light"] .metric.accent { background: #eadfe1; }
html[data-color-mode="light"] .list-heading,
html[data-color-mode="light"] .record-tabs,
html[data-color-mode="light"] .col h4,
html[data-color-mode="light"] .sel-table th {
  color: #30363a;
  background: #e1e5e7;
  border-color: #b5bbc0;
}
html[data-color-mode="light"] .quote-list th {
  color: #5c656b;
  background: #d9dde0;
  border-color: #b5bbc0;
}
html[data-color-mode="light"] .quote-list td,
html[data-color-mode="light"] .group-item,
html[data-color-mode="light"] .choice,
html[data-color-mode="light"] .sel-table td,
html[data-color-mode="light"] .invoice-list td,
html[data-color-mode="light"] .invoice-list th {
  color: #343a3f;
  border-color: #c5cace;
}
html[data-color-mode="light"] .quote-list .job-row,
html[data-color-mode="light"] .quote-list .job-row:nth-child(even) { background: #f3f4f5; }
html[data-color-mode="light"] .quote-list .job-row:nth-child(even) { background: #e9ecee; }
html[data-color-mode="light"] .quote-list .job-row:hover {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), .1), #f8f9f9);
}
html[data-color-mode="light"] .quote-list a { color: #a41f32; }
html[data-color-mode="light"] .quote-footer {
  color: #596268;
  background: rgba(225, 229, 231, .97);
  border-color: #aeb5ba;
  box-shadow: 0 -8px 22px rgba(43, 49, 54, .1);
}
html[data-color-mode="light"] .quote-footer b { color: #24292d; }
html[data-color-mode="light"] .stage i { color: #4d555b; background: #e1e5e7; }
html[data-color-mode="light"] .design-option > small { color: #626a70; }

@media print {
  .mode-toggle { display: none !important; }
}

/* Production polish — restrained workshop UI ---------------------------- */
.settings-card {
  max-height: 92vh;
  overflow-y: auto;
}
.settings-appearance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 18px 0 20px;
  padding: 15px 16px;
  color: var(--text);
  background: #1b1e21;
  border: 1px solid var(--border);
}
.settings-appearance > div { display: grid; gap: 3px; }
.settings-appearance strong { font-size: 12px; letter-spacing: .02em; }
.settings-appearance span:not(.theme-dot) { color: var(--muted); font-size: 10px; }
.settings-appearance .theme-trigger { flex: 0 0 auto; }

.workspace-head { margin-bottom: 22px; }
.workspace-head h1 {
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 760;
  letter-spacing: -.045em;
  text-transform: none;
}
.workspace-head p { margin-top: 8px; }

html[data-design-theme="dark-silver"] {
  --professional-header: #202326;
  --professional-surface: #24272a;
  --professional-subtle: #1b1d1f;
  --professional-line: #484d51;
}
html[data-design-theme="dark-silver"][data-color-mode="light"] {
  --professional-header: #d6dadd;
  --professional-surface: #f3f4f5;
  --professional-subtle: #e1e5e7;
  --professional-line: #b5bbc0;
}
html[data-design-theme="dark-silver"] body {
  background: linear-gradient(180deg, #1a1d1f, #111315 440px, #0f1113);
}
html[data-design-theme="dark-silver"][data-color-mode="light"] body {
  background: linear-gradient(180deg, #eef0f1, #e3e6e8 440px, #dce0e2);
  background-size: auto;
}
html[data-design-theme="dark-silver"] .topbar {
  min-height: 72px;
  background: var(--professional-header);
  border-bottom: 1px solid var(--professional-line);
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
}
html[data-design-theme="dark-silver"] .topbar::after {
  display: block;
  width: 132px;
  height: 2px;
  background: #d52e43;
}
html[data-design-theme="dark-silver"] .logo {
  flex-basis: 44px;
  width: 44px;
  height: 44px;
  background: #a92135;
  border-color: #c94758;
}
html[data-design-theme="dark-silver"] .brand-kicker {
  color: var(--muted);
  letter-spacing: .18em;
}
html[data-design-theme="dark-silver"] .brand strong {
  font-size: 16px;
  letter-spacing: 0;
}
html[data-design-theme="dark-silver"] .metrics,
html[data-design-theme="dark-silver"] .list-panel,
html[data-design-theme="dark-silver"] .record-view,
html[data-design-theme="dark-silver"] fieldset,
html[data-design-theme="dark-silver"] .details-actions,
html[data-design-theme="dark-silver"] .invoicing,
html[data-design-theme="dark-silver"] .plugin-bar,
html[data-design-theme="dark-silver"] .assessor-legend,
html[data-design-theme="dark-silver"] .quote-toolbar,
html[data-design-theme="dark-silver"] .col,
html[data-design-theme="dark-silver"] .modal-card,
html[data-design-theme="dark-silver"] .design-option {
  background: var(--professional-surface);
  border-color: var(--professional-line);
}
html[data-design-theme="dark-silver"] .list-heading,
html[data-design-theme="dark-silver"] .record-tabs,
html[data-design-theme="dark-silver"] .col h4,
html[data-design-theme="dark-silver"] .sel-table th,
html[data-design-theme="dark-silver"] .settings-appearance {
  background: var(--professional-subtle);
  border-color: var(--professional-line);
}
html[data-design-theme="dark-silver"] .metric.accent::after {
  border-top-width: 8px;
  border-left-width: 8px;
}
html[data-design-theme="dark-silver"] .state-tab.active,
html[data-design-theme="dark-silver"] .record-tab.active,
html[data-design-theme="dark-silver"] .area-tab.active {
  background: rgba(var(--accent-rgb), .1);
}

@media (max-width: 600px) {
  .settings-appearance { align-items: stretch; flex-direction: column; gap: 12px; }
  .settings-appearance .theme-trigger { width: 100%; }
}

/* 11 / WORKSHOP GREY — calm professional neutral ------------------------ */
.preview-professional-grey { background: linear-gradient(145deg, #858b90, #62686d); border: 1px solid #a5aaae; border-radius: 2px; }
.preview-professional-grey i { background: #3b4044; border: 1px solid #5b6166; border-radius: 1px; }
.preview-professional-grey i:first-child { background: linear-gradient(90deg, #aa2639 14%, #303438 14%); }
.preview-professional-grey + strong + small + .palette i:nth-child(1) { background: #747a7f; }
.preview-professional-grey + strong + small + .palette i:nth-child(2) { background: #34393d; }
.preview-professional-grey + strong + small + .palette i:nth-child(3) { background: #b52b40; }

html[data-design-theme="professional-grey"] {
  color-scheme: dark;
  --bg: #686e73;
  --panel: #363b3f;
  --panel-2: #3e4448;
  --panel-3: #484e53;
  --text: #f4f5f6;
  --muted: #c0c4c7;
  --muted-2: #91979b;
  --red: #c72d42;
  --red-hot: #e1475b;
  --red-dark: #972033;
  --accent-rgb: 199, 45, 66;
  --red-soft: rgba(var(--accent-rgb), .12);
  --border: #5a6065;
  --border-hi: #777e83;
  --radius: 2px;
  --radius-sm: 2px;
  --grey-page: linear-gradient(180deg, #747a7f, #62686d 420px, #5b6166);
  --grey-header: #303438;
  --grey-surface: #363b3f;
  --grey-subtle: #292d30;
  --grey-field: #2d3135;
  --grey-text: #f4f5f6;
  --grey-cell: #e0e3e5;
  --grey-line: #5a6065;
  --grey-row: #393e42;
  --grey-row-alt: #34393d;
}
html[data-design-theme="professional-grey"][data-color-mode="light"] {
  color-scheme: light;
  --bg: #c7cbce;
  --panel: #f1f2f3;
  --panel-2: #e4e7e9;
  --panel-3: #d8dcdf;
  --text: #252a2e;
  --muted: #60686e;
  --muted-2: #858d92;
  --border: #abb1b5;
  --border-hi: #858d93;
  --grey-page: linear-gradient(180deg, #d5d8da, #c5c9cc 420px, #bcc1c4);
  --grey-header: #e0e3e5;
  --grey-surface: #f2f3f4;
  --grey-subtle: #dce0e2;
  --grey-field: #fafafa;
  --grey-text: #252a2e;
  --grey-cell: #343a3f;
  --grey-line: #abb1b5;
  --grey-row: #f2f3f4;
  --grey-row-alt: #e7eaec;
}
html[data-design-theme="professional-grey"] body {
  color: var(--grey-text);
  background: var(--grey-page);
  background-size: auto;
}
html[data-design-theme="professional-grey"] .topbar {
  min-height: 72px;
  color: var(--grey-text);
  background: var(--grey-header);
  border: 0;
  border-bottom: 1px solid var(--grey-line);
  box-shadow: 0 6px 18px rgba(32,36,39,.22);
}
html[data-design-theme="professional-grey"] .topbar::after { width: 132px; height: 2px; background: #c72d42; }
html[data-design-theme="professional-grey"] .logo {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  border-radius: 2px;
  clip-path: none;
  background: #a52337;
  border-color: #cb4658;
  box-shadow: none;
}
html[data-design-theme="professional-grey"] .logo::after { border-radius: 0; clip-path: none; }
html[data-design-theme="professional-grey"] .brand-kicker { color: var(--muted); }
html[data-design-theme="professional-grey"] .brand strong,
html[data-design-theme="professional-grey"] .workspace-head h1,
html[data-design-theme="professional-grey"] .metric strong,
html[data-design-theme="professional-grey"] .list-heading h2,
html[data-design-theme="professional-grey"] .record-ref,
html[data-design-theme="professional-grey"] .invoicing h4,
html[data-design-theme="professional-grey"] .modal-card h2,
html[data-design-theme="professional-grey"] legend { color: var(--grey-text); }
html[data-design-theme="professional-grey"] .search,
html[data-design-theme="professional-grey"] input,
html[data-design-theme="professional-grey"] textarea,
html[data-design-theme="professional-grey"] select {
  color: var(--grey-text);
  background-color: var(--grey-field);
  border-color: var(--grey-line);
  border-radius: 2px;
  box-shadow: none;
}
html[data-design-theme="professional-grey"] .btn,
html[data-design-theme="professional-grey"] .state-tab,
html[data-design-theme="professional-grey"] .record-tab,
html[data-design-theme="professional-grey"] .area-tab,
html[data-design-theme="professional-grey"] .status,
html[data-design-theme="professional-grey"] .theme-trigger b,
html[data-design-theme="professional-grey"] .mode-toggle { border-radius: 2px; clip-path: none; }
html[data-design-theme="professional-grey"] .btn.ghost,
html[data-design-theme="professional-grey"] .state-tab,
html[data-design-theme="professional-grey"] .area-tab,
html[data-design-theme="professional-grey"] .mode-toggle {
  color: var(--grey-text);
  background: var(--grey-subtle);
  border-color: var(--grey-line);
  box-shadow: none;
}
html[data-design-theme="professional-grey"] .btn.primary { color: #fff; background: #ad263a; border-color: #cf4154; box-shadow: none; }
html[data-design-theme="professional-grey"] .btn.primary:hover { background: #c22d42; }
html[data-design-theme="professional-grey"] .metrics,
html[data-design-theme="professional-grey"] .list-panel,
html[data-design-theme="professional-grey"] .record-view,
html[data-design-theme="professional-grey"] fieldset,
html[data-design-theme="professional-grey"] .details-actions,
html[data-design-theme="professional-grey"] .invoicing,
html[data-design-theme="professional-grey"] .plugin-bar,
html[data-design-theme="professional-grey"] .assessor-legend,
html[data-design-theme="professional-grey"] .quote-toolbar,
html[data-design-theme="professional-grey"] .col,
html[data-design-theme="professional-grey"] .modal-card,
html[data-design-theme="professional-grey"] .design-option {
  color: var(--grey-text);
  background: var(--grey-surface);
  border-color: var(--grey-line);
  border-radius: 2px;
  box-shadow: 0 8px 22px rgba(30,34,37,.15);
}
html[data-design-theme="professional-grey"] .list-heading,
html[data-design-theme="professional-grey"] .record-tabs,
html[data-design-theme="professional-grey"] .col h4,
html[data-design-theme="professional-grey"] .sel-table th {
  color: var(--grey-text);
  background: var(--grey-subtle);
  border-color: var(--grey-line);
}
html[data-design-theme="professional-grey"] .metrics { gap: 0; overflow: hidden; background: var(--grey-surface); border-color: var(--grey-line); }
html[data-design-theme="professional-grey"] .metric { background: var(--grey-surface); border-color: var(--grey-line); }
html[data-design-theme="professional-grey"] .metric.accent { background: rgba(var(--accent-rgb), .13); }
html[data-design-theme="professional-grey"] .quote-list th { color: var(--muted); background: var(--grey-subtle); border-color: var(--grey-line); }
html[data-design-theme="professional-grey"] .quote-list td,
html[data-design-theme="professional-grey"] .group-item,
html[data-design-theme="professional-grey"] .choice,
html[data-design-theme="professional-grey"] .sel-table td { color: var(--grey-cell); border-color: var(--grey-line); }
html[data-design-theme="professional-grey"] .quote-list .job-row { background: var(--grey-row); }
html[data-design-theme="professional-grey"] .quote-list .job-row:nth-child(even) { background: var(--grey-row-alt); }
html[data-design-theme="professional-grey"] .quote-list .job-row:hover { background: linear-gradient(90deg, rgba(var(--accent-rgb), .12), var(--grey-row)); }
html[data-design-theme="professional-grey"] .state-tab.active,
html[data-design-theme="professional-grey"] .record-tab.active,
html[data-design-theme="professional-grey"] .area-tab.active {
  color: #fff;
  background: #a52337;
  border-color: #d34a5c;
  box-shadow: inset 0 -2px 0 #ef6a7b;
}
html[data-design-theme="professional-grey"] .quote-footer {
  color: var(--muted);
  background: var(--grey-subtle);
  border-color: var(--grey-line);
  border-radius: 2px;
  box-shadow: none;
}
html[data-design-theme="professional-grey"] .quote-footer b { color: var(--grey-text); }
html[data-design-theme="professional-grey"] .stage i { background: var(--grey-surface); border-radius: 2px; }

/* 12 / COACHBUILT — an editorial workshop instrument -------------------- */
.preview-coachbuilt {
  background: #aaa69d;
  border: 1px solid #4a4b46;
  border-radius: 0;
  box-shadow: 4px 4px 0 #292a27;
}
.preview-coachbuilt i { background: #eee9dd; border: 1px solid #77756e; border-radius: 0; }
.preview-coachbuilt i:first-child { background: linear-gradient(90deg, #8e2235 14%, #1c1d1b 14%); }
.preview-coachbuilt i:nth-child(2) { background: #252624; }
.preview-coachbuilt + strong + small + .palette i:nth-child(1) { background: #aaa69d; }
.preview-coachbuilt + strong + small + .palette i:nth-child(2) { background: #1c1d1b; }
.preview-coachbuilt + strong + small + .palette i:nth-child(3) { background: #8e2235; }

html[data-design-theme="coachbuilt"] {
  color-scheme: dark;
  --bg: #191a18;
  --panel: #242522;
  --panel-2: #2b2c29;
  --panel-3: #343530;
  --text: #ece7db;
  --muted: #aaa69d;
  --muted-2: #7d7b74;
  --red: #a3293c;
  --red-hot: #cc4054;
  --red-dark: #75192a;
  --accent-rgb: 163, 41, 60;
  --red-soft: rgba(var(--accent-rgb), .12);
  --border: #4b4c46;
  --border-hi: #6b6b63;
  --green: #74b88a;
  --amber: #d0a45f;
  --blue: #7e9dbc;
  --radius: 0;
  --radius-sm: 0;
  --cb-page: #191a18;
  --cb-surface: #242522;
  --cb-subtle: #1d1e1c;
  --cb-field: #151614;
  --cb-ink: #ece7db;
  --cb-muted: #aaa69d;
  --cb-rule: #4b4c46;
  --cb-row: #242522;
  --cb-row-alt: #20211f;
  --cb-shadow: #090a09;
}
html[data-design-theme="coachbuilt"][data-color-mode="light"] {
  color-scheme: light;
  --bg: #aaa69d;
  --panel: #eee9dd;
  --panel-2: #e3ded2;
  --panel-3: #d5d0c5;
  --text: #1d1e1c;
  --muted: #65655e;
  --muted-2: #88877f;
  --border: #8a8981;
  --border-hi: #62635d;
  --cb-page: #aaa69d;
  --cb-surface: #eee9dd;
  --cb-subtle: #ddd8cc;
  --cb-field: #f8f5ed;
  --cb-ink: #1d1e1c;
  --cb-muted: #65655e;
  --cb-rule: #8a8981;
  --cb-row: #eee9dd;
  --cb-row-alt: #e6e1d6;
  --cb-shadow: #343531;
}
html[data-design-theme="coachbuilt"] body {
  color: var(--cb-ink);
  background:
    linear-gradient(90deg, transparent 0 23px, rgba(var(--accent-rgb), .22) 23px 24px, transparent 24px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 32px),
    var(--cb-page);
  background-size: 100% 100%, 100% 32px, auto;
  font-family: "Segoe UI Variable", "Segoe UI", Helvetica, Arial, sans-serif;
}
html[data-design-theme="coachbuilt"][data-color-mode="light"] body {
  background:
    linear-gradient(90deg, transparent 0 23px, rgba(var(--accent-rgb), .22) 23px 24px, transparent 24px),
    repeating-linear-gradient(0deg, rgba(29,30,28,.055) 0 1px, transparent 1px 32px),
    var(--cb-page);
  background-size: 100% 100%, 100% 32px, auto;
}
html[data-design-theme="coachbuilt"] main { max-width: 1520px; padding-top: 38px; }
html[data-design-theme="coachbuilt"] .topbar {
  min-height: 88px;
  padding-top: 13px;
  padding-bottom: 13px;
  color: #f1ece0;
  background: #1c1d1b;
  border: 0;
  border-bottom: 5px solid #aaa69d;
  box-shadow: 0 7px 0 rgba(0,0,0,.14);
}
html[data-design-theme="coachbuilt"] .topbar::after {
  bottom: -5px;
  width: 23%;
  height: 5px;
  background: #9b2639;
}
html[data-design-theme="coachbuilt"] .brand {
  position: relative;
  min-width: 248px;
  padding-right: 28px;
}
html[data-design-theme="coachbuilt"] .brand::after {
  content: "12 / CB";
  position: absolute;
  right: 0;
  bottom: 2px;
  color: #89877f;
  font: 700 8px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .12em;
  writing-mode: vertical-rl;
}
html[data-design-theme="coachbuilt"] .logo {
  width: 50px;
  height: 50px;
  flex-basis: 50px;
  color: #1d1e1c;
  background: #d6d0c3;
  border: 1px solid #77756e;
  border-radius: 50%;
  clip-path: none;
  box-shadow: inset 0 0 0 5px #1c1d1b, inset 0 0 0 6px #8e8b83;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px;
}
html[data-design-theme="coachbuilt"] .logo::after { inset: 8px; border: 0; border-radius: 50%; clip-path: none; }
html[data-design-theme="coachbuilt"] .brand-kicker {
  color: #bcb6aa;
  font: 700 8px/1.1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .17em;
}
html[data-design-theme="coachbuilt"] .brand strong {
  color: #f1ece0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 700;
  letter-spacing: -.015em;
  text-transform: none;
}
html[data-design-theme="coachbuilt"] .brand .sub { color: #aaa69d; font-size: 9px; }
html[data-design-theme="coachbuilt"] .topbar-actions {
  padding-left: 22px;
  border-left: 1px solid #44453f;
}
html[data-design-theme="coachbuilt"] .search {
  color: #252624;
  background-color: #e6e0d4;
  border-color: #77756e;
  border-radius: 0;
  box-shadow: inset 4px 0 0 #9b2639;
}
html[data-design-theme="coachbuilt"] .topbar .btn.ghost,
html[data-design-theme="coachbuilt"] .topbar .mode-toggle {
  color: #e9e4d8;
  background: #292a27;
  border-color: #55564f;
}
html[data-design-theme="coachbuilt"] .btn,
html[data-design-theme="coachbuilt"] .state-tab,
html[data-design-theme="coachbuilt"] .record-tab,
html[data-design-theme="coachbuilt"] .area-tab,
html[data-design-theme="coachbuilt"] .status,
html[data-design-theme="coachbuilt"] .mode-toggle,
html[data-design-theme="coachbuilt"] input,
html[data-design-theme="coachbuilt"] textarea,
html[data-design-theme="coachbuilt"] select,
html[data-design-theme="coachbuilt"] .theme-trigger b,
html[data-design-theme="coachbuilt"] .stage i {
  border-radius: 0;
  clip-path: none;
}
html[data-design-theme="coachbuilt"] .btn { font-weight: 760; letter-spacing: .01em; box-shadow: none; }
html[data-design-theme="coachbuilt"] .btn.primary {
  color: #fff9ed;
  background: #8e2235;
  border-color: #b33b4d;
  box-shadow: inset 4px 0 0 #d9cdbb;
}
html[data-design-theme="coachbuilt"] .btn.primary:hover { background: #a3293c; }
html[data-design-theme="coachbuilt"] .btn.ghost,
html[data-design-theme="coachbuilt"] .state-tab,
html[data-design-theme="coachbuilt"] .area-tab,
html[data-design-theme="coachbuilt"] .mode-toggle {
  color: var(--cb-ink);
  background: var(--cb-subtle);
  border-color: var(--cb-rule);
  box-shadow: none;
}
html[data-design-theme="coachbuilt"] input,
html[data-design-theme="coachbuilt"] textarea,
html[data-design-theme="coachbuilt"] select {
  color: var(--cb-ink);
  background-color: var(--cb-field);
  border-color: var(--cb-rule);
  box-shadow: inset 3px 0 0 rgba(var(--accent-rgb), .38);
}
html[data-design-theme="coachbuilt"] .workspace-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(430px, .85fr);
  align-items: end;
  gap: 42px;
  margin-bottom: 30px;
}
html[data-design-theme="coachbuilt"] .workspace-head > div:first-child {
  position: relative;
  padding: 22px 24px 20px 31px;
  border-left: 6px solid #8e2235;
  border-bottom: 1px solid var(--cb-rule);
}
html[data-design-theme="coachbuilt"] .workspace-head > div:first-child::after {
  content: "LIVE WORK ORDER REGISTER";
  position: absolute;
  right: 0;
  bottom: -15px;
  color: var(--cb-muted);
  font: 700 8px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .16em;
}
html[data-design-theme="coachbuilt"] .eyebrow {
  color: var(--cb-muted);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .16em;
}
html[data-design-theme="coachbuilt"] .workspace-head h1 {
  margin-top: 13px;
  color: var(--cb-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 4.4vw, 58px);
  font-style: italic;
  font-weight: 700;
  line-height: .94;
  letter-spacing: -.055em;
  text-transform: none;
}
html[data-design-theme="coachbuilt"] .workspace-head p { color: var(--cb-muted); font-size: 12px; }
html[data-design-theme="coachbuilt"] .metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  overflow: visible;
  background: var(--cb-surface);
  border: 1px solid var(--cb-rule);
  border-radius: 0;
  box-shadow: 7px 7px 0 var(--cb-shadow);
}
html[data-design-theme="coachbuilt"] .metric,
html[data-design-theme="coachbuilt"] .metric:last-child {
  min-height: 92px;
  padding: 18px 16px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--cb-rule);
  border-radius: 0;
  box-shadow: none;
}
html[data-design-theme="coachbuilt"] .metric:last-child { border-right: 0; }
html[data-design-theme="coachbuilt"] .metric span {
  color: var(--cb-muted);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .1em;
}
html[data-design-theme="coachbuilt"] .metric strong {
  margin-top: 12px;
  color: var(--cb-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 31px;
  font-weight: 700;
}
html[data-design-theme="coachbuilt"] .metric.accent { background: rgba(var(--accent-rgb), .1); }
html[data-design-theme="coachbuilt"] .metric.accent::after { border-top-width: 9px; border-left-width: 9px; }
html[data-design-theme="coachbuilt"] .state-tabs {
  gap: 0;
  margin: 0 0 15px;
  padding-left: 18px;
  border-bottom: 1px solid var(--cb-rule);
}
html[data-design-theme="coachbuilt"] .state-tab {
  min-width: 112px;
  margin-bottom: -1px;
  padding: 12px 14px;
  color: var(--cb-muted);
  background: transparent;
  border: 1px solid transparent;
  border-bottom-color: var(--cb-rule);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 9px;
  text-transform: uppercase;
}
html[data-design-theme="coachbuilt"] .state-tab.active {
  color: #fff9ed;
  background: #272825;
  border-color: #55564f;
  border-bottom-color: #272825;
  box-shadow: inset 0 3px 0 #a3293c;
}
html[data-design-theme="coachbuilt"] .state-tab.active b { color: #fff9ed; background: #8e2235; }
html[data-design-theme="coachbuilt"] .list-panel,
html[data-design-theme="coachbuilt"] .record-view,
html[data-design-theme="coachbuilt"] fieldset,
html[data-design-theme="coachbuilt"] .details-actions,
html[data-design-theme="coachbuilt"] .invoicing,
html[data-design-theme="coachbuilt"] .plugin-bar,
html[data-design-theme="coachbuilt"] .assessor-legend,
html[data-design-theme="coachbuilt"] .quote-toolbar,
html[data-design-theme="coachbuilt"] .col,
html[data-design-theme="coachbuilt"] .modal-card,
html[data-design-theme="coachbuilt"] .design-option {
  color: var(--cb-ink);
  background: var(--cb-surface);
  border-color: var(--cb-rule);
  border-radius: 0;
  box-shadow: 6px 6px 0 var(--cb-shadow);
}
html[data-design-theme="coachbuilt"] .list-panel,
html[data-design-theme="coachbuilt"] .record-view { border-left-width: 5px; }
html[data-design-theme="coachbuilt"] .list-panel::before,
html[data-design-theme="coachbuilt"] .record-view::before { width: 26px; height: 26px; background: linear-gradient(225deg, #8e2235 0 7px, transparent 7px); }
html[data-design-theme="coachbuilt"] .list-heading,
html[data-design-theme="coachbuilt"] .record-tabs,
html[data-design-theme="coachbuilt"] .col h4,
html[data-design-theme="coachbuilt"] .sel-table th {
  color: var(--cb-ink);
  background: var(--cb-subtle);
  border-color: var(--cb-rule);
  border-radius: 0;
}
html[data-design-theme="coachbuilt"] .panel-index {
  min-width: 39px;
  min-height: 39px;
  display: grid;
  place-items: center;
  color: var(--cb-ink);
  background: transparent;
  border: 1px solid var(--cb-rule);
  border-left: 4px solid #8e2235;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
html[data-design-theme="coachbuilt"] .list-heading h2,
html[data-design-theme="coachbuilt"] .col h4,
html[data-design-theme="coachbuilt"] .modal-card h2,
html[data-design-theme="coachbuilt"] legend,
html[data-design-theme="coachbuilt"] .invoicing h4 { color: var(--cb-ink); font-family: Georgia, "Times New Roman", serif; }
html[data-design-theme="coachbuilt"] .quote-list th {
  color: var(--cb-muted);
  background: var(--cb-subtle);
  border-color: var(--cb-rule);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 8px;
  letter-spacing: .16em;
}
html[data-design-theme="coachbuilt"] .quote-list td,
html[data-design-theme="coachbuilt"] .group-item,
html[data-design-theme="coachbuilt"] .choice,
html[data-design-theme="coachbuilt"] .sel-table td,
html[data-design-theme="coachbuilt"] .invoice-list td,
html[data-design-theme="coachbuilt"] .invoice-list th { color: var(--cb-ink); border-color: var(--cb-rule); }
html[data-design-theme="coachbuilt"] .quote-list .job-row { background: var(--cb-row); }
html[data-design-theme="coachbuilt"] .quote-list .job-row:nth-child(even) { background: var(--cb-row-alt); }
html[data-design-theme="coachbuilt"] .quote-list .job-row:hover {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), .13), var(--cb-row));
  box-shadow: inset 5px 0 0 #8e2235;
}
html[data-design-theme="coachbuilt"] .quote-list a {
  color: var(--cb-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
}
html[data-design-theme="coachbuilt"] .quote-list a::before { color: #a3293c; }
html[data-design-theme="coachbuilt"] .record-tab.active,
html[data-design-theme="coachbuilt"] .area-tab.active {
  color: #fff9ed;
  background: #8e2235;
  border-color: #b53c4f;
  box-shadow: inset 4px 0 0 #d8cdbb;
}
html[data-design-theme="coachbuilt"] .quote-footer {
  color: var(--cb-muted);
  background: var(--cb-subtle);
  border-color: var(--cb-rule);
  border-radius: 0;
  box-shadow: 5px 5px 0 var(--cb-shadow);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
html[data-design-theme="coachbuilt"] .quote-footer b { color: var(--cb-ink); }
html[data-design-theme="coachbuilt"] .design-option.active::after { border-radius: 0; background: #8e2235; }

@media (max-width: 1180px) and (min-width: 901px) {
  html[data-design-theme="coachbuilt"] .topbar {
    gap: 16px;
    padding-left: 18px;
    padding-right: 18px;
  }
  html[data-design-theme="coachbuilt"] .brand { min-width: 214px; padding-right: 22px; }
  html[data-design-theme="coachbuilt"] .topbar-actions { gap: 7px; padding-left: 14px; }
  html[data-design-theme="coachbuilt"] .topbar-actions .search { min-width: 210px; flex: 1 1 230px; }
  html[data-design-theme="coachbuilt"] .topbar-actions .btn,
  html[data-design-theme="coachbuilt"] .topbar-actions .mode-toggle { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 900px) {
  html[data-design-theme="coachbuilt"] .topbar { min-height: 0; }
  html[data-design-theme="coachbuilt"] .topbar-actions { padding-left: 0; border-left: 0; }
  html[data-design-theme="coachbuilt"] .workspace-head { grid-template-columns: 1fr; gap: 26px; }
  html[data-design-theme="coachbuilt"] .workspace-head > div:first-child { padding-left: 22px; }
}
@media (max-width: 600px) {
  html[data-design-theme="coachbuilt"] main { padding-top: 28px; }
  html[data-design-theme="coachbuilt"] .brand { min-width: 0; padding-right: 0; }
  html[data-design-theme="coachbuilt"] .brand::after { display: none; }
  html[data-design-theme="coachbuilt"] .workspace-head h1 { font-size: 39px; }
  html[data-design-theme="coachbuilt"] .metrics { grid-template-columns: 1fr; box-shadow: 4px 4px 0 var(--cb-shadow); }
  html[data-design-theme="coachbuilt"] .metric,
  html[data-design-theme="coachbuilt"] .metric:last-child { min-height: 74px; border-right: 0; border-bottom: 1px solid var(--cb-rule); }
  html[data-design-theme="coachbuilt"] .metric:last-child { border-bottom: 0; }
  html[data-design-theme="coachbuilt"] .state-tabs { padding-left: 0; }
  html[data-design-theme="coachbuilt"] .state-tab { min-width: 96px; }
  html[data-design-theme="coachbuilt"] .list-panel,
  html[data-design-theme="coachbuilt"] .record-view { box-shadow: 4px 4px 0 var(--cb-shadow); }
}