:root {
  --ink: #28242f;
  --muted: #77727e;
  --faint: #aaa5ae;
  --line: #ebe7e4;
  --surface: #ffffff;
  --canvas: #faf8f7;
  --coral: #c95f4b;
  --coral-dark: #a84738;
  --coral-soft: #fff0ec;
  --plum: #56384f;
  --green: #348464;
  --green-soft: #e8f5ef;
  --amber: #b6782c;
  --amber-soft: #fff4db;
  --blue: #4d6fa8;
  --blue-soft: #edf3ff;
  --shadow: 0 12px 35px rgba(63, 46, 57, 0.07);
  --radius: 18px;
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 92% 3%, rgba(223, 169, 144, 0.13), transparent 24rem),
    var(--canvas);
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(201, 95, 75, 0.2);
  outline-offset: 1px;
}

.app-shell { min-height: 100vh; }
.topbar {
  height: 76px;
  padding: 0 clamp(20px, 4vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand { display: inline-flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.brand-mark {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 13px; color: #fff; background: var(--plum);
  font: 800 14px/1 "Manrope", sans-serif; letter-spacing: -0.3px;
  box-shadow: 0 7px 18px rgba(86, 56, 79, 0.2);
}
.brand-copy { display: grid; gap: 2px; }
.brand-copy strong { font: 800 17px/1.1 "Manrope", sans-serif; letter-spacing: -0.4px; }
.brand-copy small { color: var(--muted); font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; }
.topbar-actions { display: flex; gap: 10px; }
.logout-form { margin: 0; }
.settings-dot { width: 7px; height: 7px; border-radius: 50%; background: #c8c2c6; box-shadow: 0 0 0 2px #fff; }
.settings-dot.configured { background: var(--green); }

.button {
  min-height: 42px; padding: 0 17px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: 11px; font-weight: 700; transition: 160ms ease;
}
.button:hover { transform: translateY(-1px); }
.button:disabled { cursor: wait; opacity: 0.65; transform: none; }
.button-primary { color: #fff; background: var(--coral); box-shadow: 0 7px 18px rgba(201, 95, 75, 0.18); }
.button-primary:hover { background: var(--coral-dark); }
.button-quiet { color: #514b55; background: #fff; border-color: var(--line); }
.button-quiet:hover { border-color: #d7d0cc; background: #fdfcfc; }
.button-ai { color: #fff; background: linear-gradient(135deg, #65425e, #8a5577); box-shadow: 0 7px 18px rgba(86, 56, 79, 0.18); }
.button-ai:hover { background: linear-gradient(135deg, #56384f, #784665); }
.button-danger { color: #fff; background: #ba413d; }
.button.compact { min-height: 36px; padding: 0 13px; font-size: 13px; }

main { width: min(1740px, calc(100% - clamp(30px, 6vw, 96px))); margin: 0 auto; padding: 36px 0 64px; }
.page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 25px; }
.eyebrow { margin: 0 0 8px; color: var(--coral); font-size: 11px; font-weight: 800; letter-spacing: 1.35px; }
.page-intro h1, .modal-header h2 { margin: 0; font: 800 clamp(27px, 3vw, 36px)/1.15 "Manrope", sans-serif; letter-spacing: -1.2px; }
.page-intro-copy > p:last-child { margin: 9px 0 0; color: var(--muted); font-size: 15px; }
.intro-meta { display: flex; align-items: center; gap: 9px; }
.network-access { min-height: 46px; padding: 7px 12px; display: flex; align-items: center; gap: 9px; border: 1px solid #cee7da; border-radius: 12px; background: var(--green-soft); color: var(--green); text-decoration: none; transition: 150ms; }
.network-access:hover { border-color: #a9d5c4; transform: translateY(-1px); }
.network-access > i { font-size: 18px; }
.network-access > span { display: grid; gap: 1px; }
.network-access small { color: #62937e; font-size: 8px; font-weight: 800; letter-spacing: .45px; text-transform: uppercase; }
.network-access strong { font: 800 11px "Manrope"; }
.date-chip { margin: 0; padding: 9px 13px; background: #fff; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 600; }

.quick-calculator { margin-bottom: 16px; padding: 16px 18px; display: grid; grid-template-columns: auto minmax(210px, .8fr) minmax(190px, .6fr) minmax(310px, 1.25fr); align-items: center; gap: 14px; border: 1px solid #e2d7df; border-radius: var(--radius); background: linear-gradient(135deg, #fff, #fbf5f9); box-shadow: 0 9px 28px rgba(67,44,61,.07); }
.quick-calculator-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg, var(--plum), #8e5b7f); font-size: 19px; box-shadow: 0 8px 18px rgba(86,56,79,.2); }
.quick-calculator-copy .eyebrow { margin-bottom: 3px; font-size: 8.5px; }
.quick-calculator-copy h2 { margin: 0; color: var(--ink); font: 800 15px/1.3 "Manrope"; }
.quick-feet-input { display: grid; gap: 5px; }
.quick-feet-input > span:first-child { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.quick-input-shell { height: 42px; display: grid; grid-template-columns: 1fr 34px; align-items: center; overflow: hidden; border: 1px solid #ded4db; border-radius: 10px; background: #fff; }
.quick-input-shell:focus-within { border-color: var(--plum); box-shadow: 0 0 0 3px rgba(86,56,79,.09); }
.quick-input-shell input { min-width: 0; height: 100%; padding: 0 12px; border: 0; outline: 0; color: var(--ink); background: transparent; font: 800 15px "Manrope"; }
.quick-input-shell b { height: 100%; display: grid; place-items: center; color: var(--plum); background: #f3ebf1; font-size: 11px; }
.quick-calculator-results { min-height: 50px; display: grid; grid-template-columns: minmax(90px, auto) minmax(80px, auto) 1fr; align-items: center; gap: 11px; }
.quick-calculator-results > span { padding: 6px 11px; display: grid; gap: 1px; border-left: 2px solid #d9b8ce; }
.quick-calculator-results small { color: var(--faint); font-size: 8px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.quick-calculator-results strong { color: var(--plum); font: 800 15px "Manrope"; white-space: nowrap; }
.quick-calculator-results p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.4; }

.stats-grid { display: grid; grid-template-columns: repeat(5, minmax(160px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat-card {
  min-height: 136px; padding: 21px; display: flex; align-items: flex-start; gap: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.stat-icon { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 12px; font-size: 18px; }
.stat-card p { margin: 1px 0 6px; color: var(--muted); font-weight: 700; font-size: 12px; }
.stat-card strong { display: block; font: 800 26px/1.1 "Manrope", sans-serif; letter-spacing: -0.7px; }
.stat-card small { display: block; margin-top: 7px; color: var(--faint); font-size: 11px; white-space: nowrap; }
.stat-total .stat-icon { color: var(--plum); background: #f1eaf1; }
.stat-active .stat-icon { color: var(--coral); background: var(--coral-soft); }
.stat-awaiting .stat-icon { color: var(--amber); background: var(--amber-soft); }
.stat-ready .stat-icon { color: var(--blue); background: var(--blue-soft); }
.stat-value .stat-icon { color: var(--green); background: var(--green-soft); }

.workspace-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; }

.auth-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 15%, rgba(201, 95, 75, .15), transparent 28rem),
    radial-gradient(circle at 90% 85%, rgba(86, 56, 79, .14), transparent 30rem),
    var(--canvas);
}
.auth-shell { min-height: 100vh; width: min(100% - 32px, 460px); margin: 0 auto; display: grid; place-items: center; padding: 40px 0; }
.auth-card { width: 100%; padding: clamp(28px, 6vw, 44px); background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 25px 70px rgba(63, 46, 57, .12); }
.auth-brand { margin-bottom: 38px; }
.auth-card h1 { margin: 0; font: 800 34px/1.15 "Manrope", sans-serif; letter-spacing: -1px; }
.auth-copy { margin: 10px 0 26px; color: var(--muted); line-height: 1.6; }
.auth-form { display: grid; gap: 11px; }
.auth-form label { color: var(--muted); font-size: 12px; font-weight: 800; }
.auth-form input { width: 100%; height: 50px; padding: 0 14px; border: 1px solid #dcd6d3; border-radius: 11px; background: #fff; color: var(--ink); font-size: 16px; }
.auth-form .button { width: 100%; min-height: 50px; margin-top: 5px; }
.auth-error { margin: 0; padding: 10px 12px; color: #9d2f2c; background: #fff0ef; border-radius: 9px; font-weight: 700; }
.workspace-heading { padding: 19px 22px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.workspace-heading h2 { margin: 0; font: 800 18px/1.2 "Manrope", sans-serif; letter-spacing: -0.3px; }
.workspace-heading p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.workspace-actions { display: flex; align-items: center; gap: 9px; }
.view-toggle { height: 36px; padding: 3px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: #f7f5f4; }
.view-toggle button { height: 28px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 800; }
.view-toggle button.active { color: var(--plum); background: #fff; box-shadow: 0 2px 7px rgba(63,46,57,.1); }
.filterbar { padding: 13px 16px; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid var(--line); background: #fffdfc; }
.search-box, .filter-control {
  min-height: 40px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--muted);
}
.search-box { flex: 1 1 390px; max-width: 520px; padding: 0 11px; }
.search-box input { min-width: 120px; flex: 1; border: 0; outline: 0; color: var(--ink); background: transparent; }
.search-box kbd { padding: 2px 6px; border: 1px solid var(--line); border-radius: 5px; background: #faf8f7; color: var(--faint); font: 10px "DM Sans"; }
.filter-control { padding-left: 11px; }
.filter-control select { min-width: 128px; padding: 0 30px 0 0; border: 0; outline: 0; background: transparent; color: #5d5661; font-size: 12px; font-weight: 600; }
.creator-filter select { min-width: 145px; }
.status-multiselect { position: relative; flex: 0 0 auto; }
.status-filter-button { min-width: 162px; min-height: 40px; padding: 0 11px; display: grid; grid-template-columns: 15px minmax(0,1fr) auto 12px; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; color: #5d5661; background: #fff; font-size: 12px; font-weight: 700; text-align: left; }
.status-filter-button[aria-expanded="true"] { color: var(--plum); border-color: #cdb8c7; box-shadow: 0 0 0 3px rgba(86,56,79,.08); }
.status-filter-button > b { min-width: 19px; padding: 2px 5px; border-radius: 99px; color: #fff; background: var(--plum); font-size: 9px; text-align: center; }
.status-filter-button > i:last-child { font-size: 9px; transition: transform 150ms; }
.status-filter-button[aria-expanded="true"] > i:last-child { transform: rotate(180deg); }
.status-filter-popover { position: absolute; top: calc(100% + 8px); left: 0; z-index: 35; width: 330px; padding: 8px; border: 1px solid #ded3dc; border-radius: 14px; background: #fff; box-shadow: 0 20px 55px rgba(57,39,53,.2); }
.status-filter-popover > header { padding: 6px 6px 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid #eee8ec; }
.status-filter-popover > header > span { display: grid; gap: 2px; }
.status-filter-popover > header b { color: var(--ink); font-size: 12px; }
.status-filter-popover > header small { color: var(--faint); font-size: 9px; }
.status-filter-popover button { border: 0; color: var(--coral); background: transparent; font-size: 9.5px; font-weight: 800; }
.status-filter-options { max-height: 325px; padding: 7px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; overflow-y: auto; }
.status-filter-option { --status-accent: #776f77; --status-tint: #f4f2f3; min-width: 0; min-height: 40px; padding: 7px 8px; display: flex; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: 9px; color: #5b555c; background: var(--status-tint); cursor: pointer; }
.status-filter-option:hover { border-color: color-mix(in srgb, var(--status-accent) 30%, transparent); }
.status-filter-option input { position: absolute; opacity: 0; pointer-events: none; }
.status-checkbox { width: 19px; height: 19px; flex: 0 0 19px; display: grid; place-items: center; border: 1.5px solid color-mix(in srgb, var(--status-accent) 45%, #fff); border-radius: 6px; color: transparent; background: #fff; transition: 140ms; }
.status-filter-option input:checked + .status-checkbox { color: #fff; border-color: var(--status-accent); background: var(--status-accent); transform: scale(1.04); }
.status-filter-option input:focus-visible + .status-checkbox { outline: 2px solid var(--status-accent); outline-offset: 2px; }
.status-option-copy { min-width: 0; }
.status-option-copy b { display: block; overflow: hidden; color: inherit; font-size: 9.5px; line-height: 1.25; text-overflow: ellipsis; }
.status-filter-popover > footer { padding: 8px 6px 3px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid #eee8ec; }
.status-filter-popover > footer span { color: var(--faint); font-size: 9px; }
.status-todo { --status-accent: #776f77; --status-tint: #f3f1f3; }
.status-design_in_progress { --status-accent: #557eb8; --status-tint: #edf4fd; }
.status-ready { --status-accent: #4487a4; --status-tint: #eaf7fa; }
.status-waiting { --status-accent: #bd7e27; --status-tint: #fff5df; }
.status-design_approved { --status-accent: #3a8a6b; --status-tint: #eaf7f1; }
.status-advance_payment { --status-accent: #815075; --status-tint: #f6edf5; }
.status-full_payment { --status-accent: #71478a; --status-tint: #f3eef9; }
.status-sent_to_manufacturer { --status-accent: #4e6daa; --status-tint: #edf1fb; }
.status-fulfilled { --status-accent: #34775d; --status-tint: #e7f4ed; }
.status-cancelled { --status-accent: #ad4f4f; --status-tint: #faecec; }
.kanban-sort { min-height: 36px; padding: 0 9px; display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 9px; color: var(--plum); background: #fff; }
.kanban-sort select { min-width: 108px; border: 0; outline: 0; color: #5d5661; background: transparent; font-size: 10.5px; font-weight: 800; }
.toggle-filter { min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; white-space: nowrap; color: #5d5661; font-size: 12px; font-weight: 600; cursor: pointer; }
.toggle-filter input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-filter span { width: 29px; height: 17px; padding: 2px; border-radius: 99px; background: #d9d5d3; transition: 160ms; }
.toggle-filter span::after { content: ""; display: block; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #999; transition: 160ms; }
.toggle-filter input:checked + span { background: var(--coral); }
.toggle-filter input:checked + span::after { transform: translateX(12px); }
.clear-filters { padding: 8px; border: 0; background: transparent; color: var(--coral); font-weight: 700; font-size: 12px; }

.table-wrap { overflow-x: hidden; position: relative; min-height: 260px; }
.sheet-view { width: 100%; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
th { padding: 10px 5px; text-align: left; color: #918b93; background: #faf9f8; border-bottom: 1px solid var(--line); font-size: 9.5px; font-weight: 800; letter-spacing: 0.25px; text-transform: uppercase; white-space: normal; line-height: 1.25; }
th:first-child, td:first-child { width: 13%; padding-left: 14px; }
th:nth-child(2), td:nth-child(2) { width: 10.5%; }
th:nth-child(3), td:nth-child(3) { width: 7%; }
th:nth-child(4), td:nth-child(4) { width: 8%; }
th:nth-child(5), td:nth-child(5) { width: 5%; }
th:nth-child(6), td:nth-child(6) { width: 5.5%; }
th:nth-child(7), td:nth-child(7) { width: 6.5%; }
th:nth-child(8), td:nth-child(8) { width: 7.5%; }
th:nth-child(9), td:nth-child(9) { width: 6%; }
th:nth-child(10), td:nth-child(10) { width: 13%; }
th:nth-child(11), td:nth-child(11) { width: 6.5%; }
th:nth-child(12), td:nth-child(12) { width: 6.5%; }
th:last-child, td:last-child { width: 3%; padding-right: 8px; }
.sort-button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; }
.sort-button i { margin-left: 4px; opacity: 0.45; }
.sort-button.active { color: var(--coral); }
td { min-width: 0; padding: 11px 6px; border-bottom: 1px solid #f0edeb; vertical-align: middle; overflow-wrap: anywhere; }
tbody tr { transition: background 130ms, box-shadow 130ms; }
tbody tr.order-row { cursor: pointer; }
tbody tr.order-row:hover { background: #fff7f4; box-shadow: inset 3px 0 var(--coral); }
tbody tr.order-row:focus-visible { outline: 2px solid var(--coral); outline-offset: -2px; background: #fff7f4; }
tbody tr:last-child td { border-bottom: 0; }
.order-name { min-width: 0; }
.order-name strong { display: -webkit-box; max-width: 100%; overflow: hidden; color: #332d35; font: 700 12px/1.3 "Manrope", sans-serif; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.order-id { display: inline-block; margin-top: 3px; color: var(--faint); font-size: 9px; font-weight: 700; letter-spacing: 0.3px; }
.contact-stack { min-width: 0; display: grid; gap: 3px; }
.contact-row { min-width: 0; display: flex; align-items: center; gap: 4px; color: #615a64; font-size: 10px; text-decoration: none; max-width: 100%; }
.contact-row:hover { color: var(--coral); }
.contact-row i { width: 11px; flex: 0 0 11px; color: #a098a1; text-align: center; }
.contact-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-contact { min-width: 0; display: grid; gap: 4px; }
.phone-number { min-width: 0; display: flex; align-items: center; gap: 4px; overflow: hidden; color: #615a64; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.phone-number i { width: 11px; flex: 0 0 11px; color: #a098a1; text-align: center; }
.phone-links { display: flex; flex-wrap: wrap; gap: 4px; }
.phone-links a { padding: 3px 5px; display: inline-flex; align-items: center; gap: 3px; border-radius: 5px; color: var(--coral-dark); background: var(--coral-soft); font-size: 8.5px; font-weight: 800; text-decoration: none; }
.phone-links a:last-child { color: var(--green); background: var(--green-soft); }
.contact-empty { color: #bbb5bb; font-size: 10px; }
.size-stack { min-width: 0; display: grid; gap: 3px; color: #514b54; font-size: 10px; }
.size-stack strong { color: var(--ink); font: 800 12px/1.2 "Manrope"; }
.size-stack span { color: var(--muted); }
.size-stack small { color: var(--faint); }
.price-cell strong { font: 700 12.5px "Manrope", sans-serif; }
.price-breakdown { min-width: 0; display: grid; gap: 2px; }
.price-breakdown small { color: var(--faint); font-size: 8.5px; line-height: 1.3; }
.payment-money { min-width: 0; color: #514b54; font: 700 10.5px "Manrope"; }
.balance-money { color: var(--coral-dark); }
.design-cell { min-width: 0; display: grid; gap: 4px; }
.design-preview-line, .mobile-design-line { min-width: 0; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.design-preview { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; overflow: hidden; border: 1px solid #ded8d5; border-radius: 7px; background: #f7f4f2; color: var(--coral); text-decoration: none; }
.design-preview img { width: 100%; height: 100%; object-fit: cover; }
.design-preview > i { font-size: 16px; }
.design-state { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; color: var(--muted); font-size: 9.5px; font-weight: 700; white-space: nowrap; overflow-wrap: normal; word-break: keep-all; }
.design-state.done { color: var(--green); }
.image-hover-preview { position: fixed; z-index: 1500; overflow: hidden; pointer-events: none; border: 1px solid rgba(86,56,79,.16); border-radius: 14px; background: #fff; box-shadow: 0 22px 60px rgba(39,27,37,.28); animation: previewIn 120ms ease-out; }
.image-hover-preview img { width: 100%; max-height: 280px; display: block; object-fit: contain; background: #f5f1ef; }
.image-hover-preview span { padding: 9px 11px; display: block; overflow: hidden; color: #514a52; font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
@keyframes previewIn { from { opacity: 0; transform: translateY(4px) scale(.98); } }
.asset-download { display: inline-flex; align-items: center; gap: 3px; color: var(--coral); font-size: 9px; font-weight: 700; text-decoration: none; }
.asset-download:hover { text-decoration: underline; }
.unpriced { display: inline-flex; padding: 4px 7px; color: var(--amber); background: var(--amber-soft); border-radius: 6px; font-size: 10px; font-weight: 700; }
.address-cell { display: -webkit-box; max-width: 100%; overflow: hidden; color: #665f68; font-size: 10px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.muted-dash { color: #c3bec3; }
.badge { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; padding: 4px 6px; border-radius: 999px; font-size: 9.5px; font-weight: 800; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.confidence-very_low, .confidence-low { color: #a06157; background: #f8eae7; }
.confidence-medium { color: #9c702c; background: #fff3d7; }
.confidence-high { color: #47709b; background: #eaf2fb; }
.confidence-confident { color: #31785e; background: #e4f3ec; }
.date-cell { min-width: 0; color: #777079; font-size: 9px; line-height: 1.35; }
.creator-badge { min-width: 0; display: inline-flex; align-items: center; gap: 5px; color: #58515a; }
.creator-badge > span { width: 23px; height: 23px; flex: 0 0 23px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: linear-gradient(135deg, var(--plum), #9b688d); font: 800 8px "Manrope"; }
.creator-badge > b { min-width: 0; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.creator-badge.legacy { color: var(--faint); }
.creator-badge.legacy > span { color: #827981; background: #eeebed; }
.creator-badge.compact > span { width: 21px; height: 21px; flex-basis: 21px; }
.creator-badge.compact > b { max-width: 62px; font-size: 8px; }
.row-actions { display: flex; gap: 3px; justify-content: flex-end; }
.row-actions .icon-button { width: 25px; height: 25px; font-size: 11px; }
.workflow-control { min-width: 0; display: grid; grid-template-columns: 24px minmax(0, 1fr) 24px; align-items: center; gap: 3px; }
.workflow-arrow { width: 24px; height: 28px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--coral); font-size: 10px; }
.workflow-arrow:hover:not(:disabled) { border-color: #e7b6aa; background: var(--coral-soft); }
.workflow-arrow:disabled { color: #d1cccf; cursor: default; background: #faf9f8; }
.order-row.workflow-updated td { animation: workflow-row-updated 1.4s ease-out; }
.mobile-order-card.workflow-updated { animation: workflow-card-updated 1.4s ease-out; }
@keyframes workflow-row-updated { 0% { background: #f4eafa; } 100% { background: transparent; } }
@keyframes workflow-card-updated { 0% { box-shadow: 0 0 0 3px rgba(101,66,94,.2); } 100% { box-shadow: var(--shadow); } }
.workflow-pill { min-width: 0; min-height: 32px; padding: 5px 6px; display: flex; align-items: center; justify-content: center; gap: 4px; border: 0; border-radius: 8px; color: #655d66; background: #f4f1f2; text-align: center; cursor: pointer; }
.workflow-pill:hover { filter: brightness(.97); box-shadow: inset 0 0 0 1px rgba(101,66,94,.12); }
.workflow-pill i { flex: 0 0 auto; font-size: 11px; }
.workflow-pill b { min-width: 0; overflow: hidden; font-size: 9.5px; line-height: 1.15; text-overflow: ellipsis; }
.workflow-menu-chevron { margin-left: auto; font-size: 8px !important; opacity: .65; }
.workflow-pill.status-design_in_progress, .workflow-pill.status-ready { color: var(--blue); background: var(--blue-soft); }
.workflow-pill.status-waiting { color: var(--amber); background: var(--amber-soft); }
.workflow-pill.status-design_approved { color: var(--green); background: var(--green-soft); }
.workflow-pill.status-advance_payment, .workflow-pill.status-full_payment { color: var(--plum); background: #f1eaf1; }
.workflow-pill.status-sent_to_manufacturer { color: var(--blue); background: var(--blue-soft); }
.workflow-pill.status-fulfilled { color: #fff; background: var(--green); }
.workflow-pill.status-cancelled { color: #a54646; background: #f9e7e7; }
.workflow-dropdown { position: fixed; z-index: 1200; max-height: min(440px, calc(100vh - 16px)); overflow-y: auto; padding: 8px; border: 1px solid #ded2dc; border-radius: 14px; background: #fff; box-shadow: 0 18px 50px rgba(61,39,55,.2); }
.workflow-dropdown-heading { padding: 5px 7px 9px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid #eee8ec; }
.workflow-dropdown-heading span { color: #514a52; font-size: 12px; font-weight: 800; }
.workflow-dropdown-heading small { color: var(--faint); font-size: 9px; font-weight: 700; }
.workflow-dropdown-options { padding-top: 6px; display: grid; gap: 2px; }
.workflow-status-option { width: 100%; min-height: 34px; padding: 7px 9px; display: grid; grid-template-columns: 20px minmax(0, 1fr) 18px; align-items: center; gap: 6px; border: 0; border-radius: 8px; color: #5e5760; background: transparent; text-align: left; }
.workflow-status-option:hover, .workflow-status-option:focus-visible { color: var(--plum); background: #f8f1f7; }
.workflow-status-option.current { color: var(--green); background: var(--green-soft); }
.workflow-status-option > i { text-align: center; }
.workflow-status-option > span { font-size: 11px; font-weight: 750; }
.workflow-inline-payment { margin-top: 7px; padding: 10px; border: 1px solid #e3d6e3; border-radius: 9px; background: #faf6fa; }
.workflow-inline-payment label { display: block; margin-bottom: 6px; color: #5c535c; font-size: 10px; font-weight: 800; }
.workflow-inline-payment-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; overflow: hidden; border: 1px solid #d9cbd8; border-radius: 8px; background: #fff; }
.workflow-inline-payment-row > span { color: var(--plum); text-align: center; font-weight: 800; }
.workflow-inline-payment-row input { width: 100%; min-width: 0; height: 34px; padding: 6px 8px; border: 0; outline: 0; font: 700 12px "Manrope", sans-serif; }
.workflow-inline-save { align-self: stretch; padding: 0 12px; border: 0; color: #fff; background: var(--plum); font-size: 10px; font-weight: 800; }
.workflow-inline-payment small { display: block; margin-top: 6px; color: var(--faint); font-size: 8.5px; line-height: 1.35; }
.mobile-orders { display: none; }
.kanban-board { min-height: 420px; padding: 16px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 290px); align-items: start; gap: 12px; overflow-x: auto; overscroll-behavior-inline: contain; background: #f8f6f5; scrollbar-width: thin; }
.kanban-column { min-height: 365px; max-height: calc(100vh - 190px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid color-mix(in srgb, var(--status-accent, #aaa2aa) 24%, var(--line)); border-top: 3px solid var(--status-accent, #aaa2aa); border-radius: 14px; background: linear-gradient(180deg, var(--status-tint, #f7f5f6), rgba(255,255,255,.78) 145px); transition: border-color 140ms, background 140ms, transform 140ms; }
.kanban-column.drag-over { border-color: var(--coral); background: #fff2ee; transform: translateY(-2px); }
.kanban-column > header { min-height: 48px; padding: 11px 12px; display: flex; align-items: center; justify-content: space-between; gap: 9px; border-bottom: 1px solid color-mix(in srgb, var(--status-accent, #aaa) 18%, var(--line)); background: color-mix(in srgb, var(--status-tint, #fff) 78%, #fff); }
.kanban-column > header > span { min-width: 0; display: flex; align-items: center; gap: 7px; color: #514a52; font-size: 11px; font-weight: 800; }
.kanban-column > header > span i { color: var(--status-accent, var(--coral)); font-size: 13px; }
.kanban-column > header > b { min-width: 23px; padding: 3px 6px; border-radius: 99px; color: var(--muted); background: #efebed; font-size: 9px; text-align: center; }
.kanban-dropzone { min-height: 310px; padding: 9px; display: grid; align-content: start; gap: 9px; overflow-y: auto; }
.kanban-column-empty { min-height: 80px; display: grid; place-items: center; align-content: center; gap: 5px; border: 1px dashed #ddd5d7; border-radius: 10px; color: var(--faint); font-size: 10px; }
.kanban-column-empty i { font-size: 15px; }
.kanban-card { padding: 12px; display: grid; gap: 10px; border: 1px solid #e7e1df; border-radius: 12px; background: #fff; box-shadow: 0 5px 15px rgba(58,43,53,.06); cursor: grab; transition: transform 140ms, box-shadow 140ms, opacity 140ms; }
.kanban-card:hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(58,43,53,.1); }
.kanban-card:active { cursor: grabbing; }
.kanban-card.dragging { opacity: .42; transform: rotate(1deg) scale(.98); }
.kanban-card.workflow-updated { animation: workflow-card-updated 1.4s ease-out; }
.kanban-card > header { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.kanban-card > header > span:first-child { color: var(--faint); font-size: 9px; font-weight: 800; letter-spacing: .4px; }
.kanban-card-title { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }
.kanban-card-title > div { min-width: 0; display: grid; gap: 4px; }
.kanban-card-title strong { overflow: hidden; color: var(--ink); font: 800 13px/1.35 "Manrope"; text-overflow: ellipsis; }
.kanban-card-title small { color: var(--muted); font-size: 9.5px; }
.kanban-card-title small b { color: var(--plum); }
.kanban-card-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.kanban-card-meta > span { min-width: 0; padding: 8px; display: grid; grid-template-columns: 14px minmax(0,1fr); gap: 2px 4px; border-radius: 8px; background: #faf8f7; }
.kanban-card-meta i { grid-row: 1 / span 2; color: var(--coral); }
.kanban-card-meta b { overflow: hidden; color: #514a52; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.kanban-card-meta small { overflow: hidden; color: var(--faint); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.kanban-design-state { font-size: 9px; }
.kanban-card > footer { display: flex; align-items: center; gap: 7px; }
.kanban-card > footer label { min-width: 0; flex: 1; height: 34px; padding-left: 9px; display: flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 8px; background: #faf8f7; color: var(--plum); }
.kanban-card > footer select { min-width: 0; width: 100%; height: 32px; border: 0; outline: 0; background: transparent; color: #5b535b; font-size: 10px; font-weight: 800; }
.kanban-card > footer .icon-button { width: 34px; height: 34px; flex: 0 0 34px; border-color: var(--line); }
.kanban-next-button { height: 34px; padding: 0 9px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid color-mix(in srgb, var(--status-accent, var(--plum)) 28%, var(--line)); border-radius: 8px; color: #fff; background: var(--status-accent, var(--plum)); font-size: 9.5px; font-weight: 800; }
.kanban-next-button:hover:not(:disabled) { filter: brightness(.95); transform: translateX(1px); }
.kanban-next-button:disabled { color: #a8a0a7; border-color: var(--line); background: #efeced; cursor: default; }
.icon-button { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #88818a; }
.icon-button:hover { color: var(--coral); background: var(--coral-soft); }
.icon-button.delete:hover { color: #a23b39; background: #fbe9e8; }
.loading-state, .empty-state { width: 100%; min-height: 260px; display: grid; place-items: center; align-content: center; gap: 10px; color: var(--muted); }
.spinner { width: 22px; height: 22px; border: 2px solid #eadbd6; border-top-color: var(--coral); border-radius: 50%; animation: spin 750ms linear infinite; }
.spinner.mini { width: 14px; height: 14px; display: inline-block; border-color: rgba(255,255,255,.35); border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty-state h3 { margin: 4px 0 0; font: 800 18px "Manrope"; color: var(--ink); }
.empty-state p { margin: 0 0 8px; }
.empty-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--coral-soft); color: var(--coral); font-size: 22px; }

.modal-layer, .confirm-dialog { position: fixed; inset: 0; z-index: 50; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(39, 30, 39, 0.38); backdrop-filter: blur(3px); }
.modal-panel { position: absolute; top: 0; right: 0; height: 100%; width: min(650px, 100%); background: #fff; box-shadow: -15px 0 45px rgba(44, 31, 42, 0.14); animation: slideIn 180ms ease-out; }
@keyframes slideIn { from { transform: translateX(25px); opacity: 0; } }
.modal-header { min-height: 102px; padding: 24px 28px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }
.modal-header h2 { font-size: 24px; letter-spacing: -0.7px; }
.modal-header > div > p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.modal-header .icon-button { margin-top: 3px; background: #f7f5f4; }
.order-panel form { height: calc(100% - 102px); display: flex; flex-direction: column; }
.order-panel { width: min(740px, 100%); }
.form-scroll { flex: 1; overflow-y: auto; padding: 4px 28px 28px; }
.ai-assist { margin-top: 24px; padding: 18px; border: 1px solid #e5dbe3; border-radius: 15px; background: linear-gradient(145deg, #fbf7fb, #fffaf8); }
.ai-assist-heading { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.ai-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: var(--plum); box-shadow: 0 7px 17px rgba(86, 56, 79, 0.16); }
.ai-assist h3 { margin: 0; font: 800 14px "Manrope"; }
.ai-assist p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.ai-assist textarea { width: 100%; padding: 12px 13px; resize: vertical; border: 1px solid #ded5dc; border-radius: 10px; background: rgba(255,255,255,.9); color: var(--ink); outline: 0; line-height: 1.55; }
.ai-assist textarea:focus { border-color: #805d77; box-shadow: 0 0 0 3px rgba(86, 56, 79, 0.09); }
.ai-assist textarea::placeholder { color: #aaa1a9; }
.ai-assist-actions { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ai-assist-actions small { color: #8d858e; font-size: 10px; }
.ai-assist-actions small i { color: var(--green); margin-right: 3px; }
.form-section { margin-top: 16px; padding: 20px; border: 1px solid transparent; border-radius: 16px; }
.form-section + .form-section { border-top-width: 1px; }
.section-nameplate { background: #fff6f1; border-color: #f4ded4; }
.section-contact { background: #f3f7ff; border-color: #dbe7f8; }
.section-payment { background: #f2faf6; border-color: #d8eee2; }
.section-progress { background: #faf5fc; border-color: #eadcef; }
.section-nameplate .section-title > span { color: #b85240; background: #ffe4dc; }
.section-contact .section-title > span { color: #426b9d; background: #dfeafb; }
.section-payment .section-title > span { color: #2f775b; background: #dbf0e6; }
.section-progress .section-title > span { color: #72516f; background: #eadfee; }
.workflow-editor.full { grid-column: 1 / -1; padding: 16px; border: 1px solid #ded0e3; border-radius: 13px; background: rgba(255,255,255,.74); }
.workflow-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.workflow-heading > span { color: #5b545e; font-size: 11px; font-weight: 800; }
.workflow-heading small { color: var(--faint); font-size: 9px; }
.workflow-current { margin-top: 12px; display: grid; grid-template-columns: 38px 1fr 38px; align-items: stretch; gap: 8px; }
.workflow-nav { display: grid; place-items: center; border: 1px solid #ded5df; border-radius: 10px; background: #fff; color: var(--plum); }
.workflow-nav:hover:not(:disabled) { border-color: #bfa9bd; background: #faf4fb; }
.workflow-nav:disabled { color: #cec7cd; cursor: default; }
.workflow-current-state { min-height: 58px; padding: 10px 14px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #65425e, #8a5577); box-shadow: 0 8px 20px rgba(86,56,79,.14); }
.workflow-current-state > i { font-size: 20px; }
.workflow-current-state > span { display: grid; gap: 2px; }
.workflow-current-state small { color: rgba(255,255,255,.72); font-size: 8px; letter-spacing: .55px; text-transform: uppercase; }
.workflow-current-state b { font: 800 14px "Manrope"; }
.workflow-track { margin-top: 13px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.workflow-track span { min-width: 0; padding: 7px 3px; display: grid; justify-items: center; gap: 4px; border-radius: 8px; color: #aaa2a9; background: #f5f2f4; text-align: center; }
.workflow-track span.done { color: var(--green); background: var(--green-soft); }
.workflow-track span.current { color: var(--plum); background: #eadfee; box-shadow: inset 0 0 0 1px #d5bfd4; }
.workflow-track i { font-size: 12px; }
.workflow-track small { max-width: 100%; overflow: hidden; font-size: 7.5px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.payment-choices { margin-top: 13px; padding-top: 12px; border-top: 1px solid #e7dfe7; }
.payment-choices > small { display: block; margin-bottom: 8px; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .45px; }
.payment-choices > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.payment-choices button { min-height: 38px; padding: 7px; border: 1px solid #ded5df; border-radius: 9px; background: #fff; color: #655d66; font-size: 10px; font-weight: 700; }
.payment-choices button.active { color: var(--plum); border-color: #bfa9bd; background: #f0e6f1; box-shadow: inset 0 0 0 1px #d5bfd4; }
.payment-choices button i { margin-right: 4px; }
.workflow-payment-amount { margin-top: 10px; padding: 11px; display: grid; grid-template-columns: minmax(110px, .7fr) minmax(150px, 1fr); align-items: center; gap: 5px 10px; border: 1px solid #dfd5e1; border-radius: 10px; background: #faf7fb; }
.workflow-payment-amount > span { color: #5b545e; font-size: 10px; font-weight: 800; }
.workflow-payment-amount > small { grid-column: 2; color: var(--faint); font-size: 9px; line-height: 1.4; }
.workflow-payment-amount .input-prefix { width: 100%; }
.workflow-payment-amount input[readonly], #advanceAmount[readonly] { color: #4e4050; background: #f1ecef; cursor: default; }
.section-title { margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.section-title > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--coral); background: var(--coral-soft); font-weight: 800; }
.section-title h3 { margin: 0; font: 800 14px "Manrope"; }
.section-title p { margin: 3px 0 0; color: var(--faint); font-size: 11px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; align-content: start; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field > span { color: #5b545e; font-size: 11px; font-weight: 800; }
.field > span em { color: var(--coral); font-style: normal; }
.field > span small { color: var(--faint); font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 12px; border: 1px solid #e2ddda; border-radius: 9px; background: #fff; color: var(--ink); outline: 0; resize: vertical; transition: 140ms;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: #cec6c2; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(201, 95, 75, 0.09); }
.field input::placeholder, .field textarea::placeholder { color: #b9b3b8; }
.phone-quick-actions { display: flex; gap: 7px; }
.phone-quick-actions a { flex: 1; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #efcfc7; border-radius: 8px; color: var(--coral-dark); background: #fff8f5; font-size: 10px; font-weight: 800; text-decoration: none; }
.phone-quick-actions a:last-child { color: var(--green); border-color: #cfe8dc; background: #f2faf6; }
.section-payment { scroll-margin-top: 14px; }
.section-payment.attention { animation: paymentFocus 900ms ease-out; }
@keyframes paymentFocus { 0%, 100% { box-shadow: none; } 35% { box-shadow: 0 0 0 4px rgba(52,132,100,.2), 0 12px 28px rgba(52,132,100,.12); } }
.input-suffix, .input-prefix { display: flex; align-items: stretch; }
.input-suffix input { border-radius: 9px 0 0 9px; }
.input-prefix input { border-radius: 0 9px 9px 0; }
.input-suffix b, .input-prefix b { min-width: 42px; display: grid; place-items: center; color: #8e8790; background: #f8f6f5; border: 1px solid #e2ddda; font-size: 11px; }
.input-suffix b { border-left: 0; border-radius: 0 9px 9px 0; }
.input-prefix b { border-right: 0; border-radius: 9px 0 0 9px; font-size: 15px; }
.field-note { margin-top: -1px; color: var(--faint); font-size: 10px; }
.field-note.match { color: var(--green); }
.charge-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.charge-row .button { white-space: nowrap; }
.amount-summary.full { grid-column: 1 / -1; padding: 14px; display: flex; align-items: center; gap: 12px; border: 1px solid #e4ddd9; border-radius: 12px; background: #faf8f7; }
.amount-summary > span { display: grid; gap: 3px; }
.amount-summary small { color: var(--faint); font-size: 9px; text-transform: uppercase; letter-spacing: .45px; }
.amount-summary b { font: 800 13px "Manrope"; }
.amount-summary > i { color: #b0a9af; font-size: 10px; }
.amount-summary .amount-total { padding: 8px 11px; border-radius: 9px; background: var(--coral-soft); }
.amount-summary .amount-total b { color: var(--coral-dark); font-size: 16px; }
.amount-summary .amount-balance { margin-left: auto; text-align: right; }
.amount-summary .amount-balance b { color: var(--plum); font-size: 16px; }
.check-card.full { grid-column: 1 / -1; cursor: pointer; }
.check-card input { position: absolute; opacity: 0; }
.check-card > span { padding: 13px 14px; display: grid; grid-template-columns: auto 1fr; column-gap: 9px; row-gap: 2px; border: 1px solid var(--line); border-radius: 11px; background: #fff; transition: 150ms; }
.check-card i { grid-row: 1 / 3; align-self: center; color: #aaa3aa; font-size: 20px; }
.check-card b { font-size: 11px; }
.check-card small { color: var(--muted); font-size: 10px; }
.check-card input:checked + span { border-color: #a9d5c4; background: var(--green-soft); }
.check-card input:checked + span i { color: var(--green); }
.asset-field.full { grid-column: 1 / -1; display: grid; gap: 9px; }
.asset-field-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.asset-field-label span { color: #5b545e; font-size: 11px; font-weight: 800; }
.asset-field-label span i { margin-right: 5px; color: var(--coral); }
.asset-field-label small { color: var(--faint); font-size: 9px; }
.drop-zone { min-height: 96px; padding: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1.5px dashed #d9ceca; border-radius: 12px; background: #fffaf8; color: var(--muted); text-align: center; cursor: pointer; transition: 150ms; }
.drop-zone:hover, .drop-zone.dragging, .drop-zone:focus { border-color: var(--coral); background: var(--coral-soft); outline: 0; }
.drop-zone > i { color: var(--coral); font-size: 21px; }
.drop-zone > span { font-size: 11px; }
.drop-zone > small, .drop-zone span small { color: var(--faint); font-size: 9px; }
.compact-zone { min-height: 70px; flex-direction: row; text-align: left; }
.compact-zone span { display: grid; gap: 3px; }
.asset-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.asset-item { min-width: 0; padding: 8px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.asset-thumb { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 7px; background: #f2efed; color: var(--coral); overflow: hidden; }
.asset-thumb img { width: 100%; height: 100%; object-fit: cover; }
.asset-copy { min-width: 0; flex: 1; display: grid; gap: 2px; }
.asset-copy b { overflow: hidden; color: #5c555e; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.asset-copy small { color: var(--faint); font-size: 9px; }
.asset-item-actions { display: flex; }
.asset-item-actions .icon-button { width: 29px; height: 29px; }
.pricing-helper.full { grid-column: 1 / -1; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fffdfc; }
.pricing-helper-heading { padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); }
.pricing-helper-heading span { color: #5b545e; font-size: 11px; font-weight: 800; }
.pricing-helper-heading span i { margin-right: 5px; color: var(--coral); }
.pricing-helper-heading small { color: var(--faint); font-size: 9px; }
.pricing-helper-grid { display: grid; grid-template-columns: repeat(4, 1fr); max-height: 157px; overflow-y: auto; }
.pricing-helper-item { padding: 9px 11px; display: grid; gap: 2px; border-right: 1px solid #f0edeb; border-bottom: 1px solid #f0edeb; }
.pricing-helper-item:nth-child(4n) { border-right: 0; }
.pricing-helper-item b { color: #443d46; font-size: 10px; }
.pricing-helper-item small { color: var(--muted); font-size: 9px; }
.pricing-helper-item.active { background: var(--coral-soft); box-shadow: inset 0 0 0 1px rgba(201, 95, 75, 0.23); }
.pricing-helper-item.active b { color: var(--coral-dark); }
.modal-footer { padding: 15px 28px; display: flex; justify-content: flex-end; gap: 9px; border-top: 1px solid var(--line); background: #fff; }

.pricing-panel { width: min(760px, 100%); }
.settings-panel { width: min(560px, 100%); }
.settings-content { padding: 26px 28px; }
.key-status { padding: 14px; display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 12px; background: #faf8f7; }
.key-status > span { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: #bbb4b9; }
.key-status.configured > span { background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.key-status > div { display: grid; gap: 3px; }
.key-status strong { font-size: 12px; }
.key-status small { color: var(--muted); font-size: 10px; }
.settings-content form { margin-top: 20px; display: grid; gap: 14px; }
.password-field { display: flex; }
.password-field input { border-radius: 9px 0 0 9px; }
.password-field button { width: 44px; border: 1px solid #e2ddda; border-left: 0; border-radius: 0 9px 9px 0; background: #f8f6f5; color: var(--muted); }
.remove-key { margin-top: 20px; color: #a23b39; }
.pricing-content { padding: 25px 28px; height: calc(100% - 128px); overflow-y: auto; }
.rule-form { padding: 18px; display: grid; grid-template-columns: 1fr 1fr 1fr auto; align-items: end; gap: 10px; background: #faf8f7; border: 1px solid var(--line); border-radius: 14px; }
.rule-form .button { white-space: nowrap; }
.rule-form #cancelRuleEdit { grid-column: 1 / -1; justify-self: end; }
.rules-list { margin-top: 22px; display: grid; gap: 8px; }
.rule-row { padding: 13px 14px; display: grid; grid-template-columns: 1fr 1fr 1fr auto; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 11px; }
.rule-row span { display: grid; gap: 3px; }
.rule-row small { color: var(--faint); font-size: 9px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; }
.rule-row strong { font-size: 13px; }
.rule-actions { display: flex; }
.rules-empty { min-height: 180px; display: grid; place-items: center; align-content: center; gap: 7px; color: var(--muted); text-align: center; }
.rules-empty i { font-size: 24px; color: var(--coral); }
.rules-empty strong { color: var(--ink); }
.rules-empty p { margin: 0; font-size: 12px; }

.users-panel { width: min(720px, 100%); }
.users-content { height: calc(100% - 128px); padding: 24px 28px 34px; overflow-y: auto; }
.current-admin { padding: 11px 13px; display: flex; align-items: center; gap: 10px; border: 1px solid #cfe7dc; border-radius: 11px; background: var(--green-soft); }
.current-admin > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--green); font-size: 15px; }
.current-admin > div { display: grid; gap: 2px; }
.current-admin small { color: #6d917f; font-size: 8px; font-weight: 800; letter-spacing: .55px; text-transform: uppercase; }
.current-admin strong { color: var(--green); font: 800 12px "Manrope"; }
.user-form { margin-top: 16px; padding: 17px; display: grid; gap: 14px; border: 1px solid var(--line); border-radius: 14px; background: #faf8f7; }
.user-form-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.user-form-heading > div { display: grid; gap: 3px; }
.user-form-heading strong { font: 800 13px "Manrope"; }
.user-form-heading small { color: var(--muted); font-size: 10px; }
.user-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.user-form-grid .full { grid-column: 1 / -1; }
.user-form > .button { justify-self: end; }
.user-active-control { cursor: pointer; }
.user-active-control > input { position: absolute; opacity: 0; pointer-events: none; }
.user-active-control > span { min-height: 55px; padding: 10px 12px; display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 1px 8px; border: 1px solid #ded7da; border-radius: 10px; background: #fff; color: var(--muted); }
.user-active-control > span > i { grid-row: 1 / span 2; color: var(--faint); font-size: 20px; }
.user-active-control > span > b { color: #514a52; font-size: 11px; }
.user-active-control > span > small { font-size: 9px; }
.user-active-control > input:checked + span { border-color: #b8ddca; background: var(--green-soft); }
.user-active-control > input:checked + span > i, .user-active-control > input:checked + span > b { color: var(--green); }
.user-active-control > input:disabled + span { opacity: .65; cursor: not-allowed; }
.users-list-heading { margin: 23px 2px 9px; display: flex; align-items: center; justify-content: space-between; }
.users-list-heading span { color: #514a52; font: 800 12px "Manrope"; }
.users-list-heading small { color: var(--faint); font-size: 9px; font-weight: 800; }
.users-list { display: grid; gap: 7px; }
.user-row { min-width: 0; padding: 11px 12px; display: grid; grid-template-columns: 38px minmax(100px,1fr) auto auto auto; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.user-row.inactive { opacity: .62; background: #f7f5f5; }
.user-avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--plum); font: 800 10px "Manrope"; }
.user-identity { min-width: 0; display: grid; gap: 3px; }
.user-identity strong { overflow: hidden; font: 800 11px "Manrope"; text-overflow: ellipsis; white-space: nowrap; }
.user-identity strong small { margin-left: 4px; padding: 2px 5px; border-radius: 99px; color: var(--green); background: var(--green-soft); font-size: 7px; text-transform: uppercase; }
.user-identity > span { color: var(--faint); font-size: 8.5px; }
.user-role, .user-status { padding: 4px 7px; display: inline-flex; align-items: center; gap: 4px; border-radius: 99px; font-size: 8.5px; font-weight: 800; white-space: nowrap; }
.user-role { color: var(--blue); background: var(--blue-soft); }
.user-role.role-admin { color: var(--plum); background: #f1eaf1; }
.user-status.active { color: var(--green); background: var(--green-soft); }
.user-status.disabled { color: #9a5555; background: #f8e7e7; }
.user-status i { font-size: 5px; }
.user-actions { display: flex; gap: 2px; }
.user-actions .icon-button { width: 31px; height: 31px; }
.user-actions .icon-button:disabled { opacity: .3; cursor: not-allowed; }
.users-empty { min-height: 130px; display: grid; place-items: center; align-content: center; gap: 7px; color: var(--muted); text-align: center; }
.users-empty > i { color: var(--coral); font-size: 21px; }
.users-empty.error > i { color: #b23d3a; }

.confirm-dialog { display: grid; place-items: center; padding: 20px; }
.confirm-dialog section { width: min(390px, 100%); padding: 28px; position: relative; border-radius: 17px; background: #fff; text-align: center; box-shadow: 0 25px 65px rgba(30, 17, 27, 0.25); }
.danger-icon { width: 48px; height: 48px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 14px; color: #b23d3a; background: #fbe9e8; font-size: 20px; }
.confirm-dialog h2 { margin: 0; font: 800 19px "Manrope"; }
.confirm-dialog p { margin: 8px 0 22px; color: var(--muted); }
.confirm-dialog section > div { display: flex; justify-content: center; gap: 9px; }

.toast-region { position: fixed; left: 22px; bottom: 22px; z-index: 80; display: grid; gap: 9px; }
.toast { min-width: 260px; padding: 13px 15px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: #4f4851; box-shadow: 0 14px 40px rgba(48, 35, 46, 0.16); animation: toastIn 170ms ease-out; }
.toast i { color: var(--green); }
.toast.error i { color: #b23d3a; }
@keyframes toastIn { from { transform: translateY(7px); opacity: 0; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
body.modal-open { overflow: hidden; }

@media (max-width: 1180px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .quick-calculator { grid-template-columns: auto minmax(210px, 1fr) minmax(180px, .7fr); }
  .quick-calculator-results { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid var(--line); }
  .filterbar { flex-wrap: wrap; }
  .search-box { max-width: none; }
}

@media (max-width: 720px) {
  .topbar { height: 68px; padding: 0 16px; }
  .brand-copy, .topbar-actions .button span { display: none; }
  .topbar-actions { gap: 5px; }
  .topbar .button { min-width: 36px; padding: 0 9px; }
  main { width: calc(100% - 24px); padding-top: 24px; }
  .page-intro { align-items: flex-start; flex-direction: column; }
  .intro-meta { width: 100%; }
  .network-access { width: 100%; justify-content: center; }
  .date-chip { display: none; }
  .page-intro h1 { font-size: 27px; }
  .page-intro-copy > p:last-child { font-size: 13px; }
  .quick-calculator { padding: 14px; grid-template-columns: 40px minmax(0,1fr); gap: 11px; }
  .quick-calculator-icon { width: 40px; height: 40px; }
  .quick-feet-input, .quick-calculator-results { grid-column: 1 / -1; }
  .quick-calculator-results { grid-template-columns: 1fr 1fr; }
  .quick-calculator-results p { grid-column: 1 / -1; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .stat-card { min-height: 116px; padding: 15px; gap: 10px; }
  .stat-icon { width: 34px; height: 34px; flex-basis: 34px; }
  .stat-card strong { font-size: 21px; }
  .stat-card small { white-space: normal; }
  .stat-value { grid-column: 1 / -1; }
  .workspace-heading { padding: 16px; align-items: flex-start; flex-direction: column; gap: 12px; }
  .workspace-actions { width: 100%; justify-content: space-between; flex-wrap: wrap; }
  .view-toggle { flex: 1; }
  .view-toggle button { flex: 1; justify-content: center; }
  .kanban-sort { order: 3; width: 100%; justify-content: center; }
  .kanban-sort select { flex: 1; }
  .table-wrap { overflow: hidden; padding: 10px; }
  .table-wrap table { display: none; }
  .mobile-orders { display: grid; gap: 11px; }
  .kanban-board { min-height: 430px; margin: -10px; padding: 10px; grid-auto-columns: min(82vw, 290px); }
  .kanban-column { max-height: calc(100vh - 140px); }
  .mobile-order-card { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 5px 18px rgba(63,46,57,.06); }
  .mobile-order-card:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
  .mobile-order-card > header { padding: 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; border-bottom: 1px solid #f0edeb; }
  .mobile-order-card > header > span { min-width: 0; display: grid; gap: 3px; }
  .mobile-order-card > header small { color: var(--faint); font-size: 10px; font-weight: 800; letter-spacing: .4px; }
  .mobile-order-card > header strong { color: var(--ink); font: 800 15px/1.35 "Manrope"; }
  .mobile-order-card .workflow-control.mobile { margin: 12px 14px 0; grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 7px; }
  .mobile-order-card .workflow-control.mobile .workflow-arrow { width: 34px; height: 40px; font-size: 13px; }
  .mobile-order-card .workflow-control.mobile .workflow-pill { min-height: 40px; padding: 7px 10px; }
  .mobile-order-card .workflow-control.mobile .workflow-pill i { font-size: 14px; }
  .mobile-order-card .workflow-control.mobile .workflow-pill b { font-size: 12px; }
  .mobile-card-grid { padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .mobile-card-grid > span { min-width: 0; display: grid; align-content: start; gap: 4px; }
  .mobile-card-grid > span.wide { grid-column: 1 / -1; }
  .mobile-card-grid small { color: var(--faint); font-size: 9px; font-weight: 800; letter-spacing: .35px; text-transform: uppercase; }
  .mobile-card-grid b { color: #4f4851; font: 700 13px/1.35 "Manrope"; }
  .mobile-card-grid em { color: var(--muted); font-size: 10px; font-style: normal; }
  .mobile-card-grid .contact-stack { gap: 6px; }
  .mobile-card-grid .contact-row { font-size: 12px; }
  .mobile-card-grid .phone-number { font-size: 12px; }
  .mobile-card-grid .phone-links a { padding: 5px 8px; font-size: 10px; }
  .mobile-card-grid .design-preview { width: 42px; height: 42px; flex-basis: 42px; }
  .mobile-card-grid .badge { justify-self: start; font-size: 10px; }
  .mobile-order-card > footer { padding: 10px 14px; display: flex; justify-content: space-between; gap: 10px; color: var(--faint); background: #faf9f8; font-size: 10px; }
  .filterbar { padding: 11px; }
  .search-box { flex-basis: 100%; }
  .status-multiselect { flex: 1 1 calc(50% - 6px); }
  .status-filter-button { width: 100%; min-width: 0; }
  .status-filter-popover { width: min(330px, calc(100vw - 46px)); }
  .filter-control { flex: 1; }
  .filter-control select { min-width: 0; width: 100%; }
  .toggle-filter { flex: 1 1 auto; }
  .modal-header { min-height: 92px; padding: 20px; }
  .modal-header h2 { font-size: 21px; }
  .order-panel form { height: calc(100% - 92px); }
  .form-scroll, .pricing-content { padding-left: 20px; padding-right: 20px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-section { padding: 16px; }
  .field.full { grid-column: auto; }
  .ai-assist-actions { align-items: stretch; flex-direction: column; }
  .ai-assist-actions .button { width: 100%; }
  .pricing-helper.full { grid-column: auto; }
  .amount-summary.full, .check-card.full, .asset-field.full { grid-column: auto; }
  .workflow-editor.full { grid-column: auto; padding: 13px; }
  .workflow-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
  .workflow-track small { display: none; }
  .workflow-track span { padding: 7px 2px; }
  .payment-choices > div { grid-template-columns: 1fr; }
  .workflow-payment-amount { grid-template-columns: 1fr; }
  .workflow-payment-amount > small { grid-column: auto; }
  .amount-summary { flex-wrap: wrap; }
  .amount-summary .amount-balance { width: 100%; margin-left: 0; padding-top: 8px; border-top: 1px solid var(--line); text-align: left; }
  .charge-row { grid-template-columns: 1fr; }
  .asset-list { grid-template-columns: 1fr; }
  .pricing-helper-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-helper-item:nth-child(4n) { border-right: 1px solid #f0edeb; }
  .pricing-helper-item:nth-child(2n) { border-right: 0; }
  .modal-footer { padding: 13px 20px; }
  .rule-form { grid-template-columns: 1fr; }
  .rule-form #cancelRuleEdit { grid-column: auto; justify-self: stretch; }
  .rule-row { grid-template-columns: 1fr 1fr; }
  .rule-actions { justify-content: flex-end; }
  .users-content { height: calc(100% - 92px); padding: 18px 20px 28px; }
  .user-form-grid { grid-template-columns: 1fr; }
  .user-form-grid .full { grid-column: auto; }
  .user-form > .button { width: 100%; justify-self: stretch; }
  .user-row { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .user-role, .user-status { justify-self: start; }
  .user-role { grid-column: 2; }
  .user-status { grid-column: 2; }
  .user-actions { grid-column: 3; grid-row: 1 / span 3; }
}

/* DARK MODE */
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f3edf2;
  --muted: #bbb1bb;
  --faint: #8f858f;
  --line: #3d353d;
  --surface: #211d22;
  --canvas: #151217;
  --coral: #ef8b76;
  --coral-dark: #ffad9c;
  --coral-soft: rgba(239, 139, 118, .14);
  --plum: #d8b2cf;
  --green: #79c8a4;
  --green-soft: rgba(82, 171, 130, .15);
  --amber: #e5ad63;
  --amber-soft: rgba(215, 151, 66, .15);
  --blue: #93b6ef;
  --blue-soft: rgba(91, 137, 207, .16);
  --shadow: 0 16px 42px rgba(0, 0, 0, .24);
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 92% 3%, rgba(145, 81, 111, .16), transparent 24rem),
    var(--canvas);
}

html[data-theme="dark"] .topbar { background: rgba(25, 21, 26, .9); }
html[data-theme="dark"] .brand-mark { background: #76506d; }
html[data-theme="dark"] .settings-dot { box-shadow: 0 0 0 2px #211d22; }
html[data-theme="dark"] .button-quiet,
html[data-theme="dark"] .date-chip,
html[data-theme="dark"] .search-box,
html[data-theme="dark"] .filter-control,
html[data-theme="dark"] .status-filter-button,
html[data-theme="dark"] .kanban-sort,
html[data-theme="dark"] .quick-input-shell,
html[data-theme="dark"] .workflow-arrow,
html[data-theme="dark"] .workflow-nav,
html[data-theme="dark"] .payment-choices button,
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .check-card > span,
html[data-theme="dark"] .asset-item,
html[data-theme="dark"] .workflow-inline-payment-row,
html[data-theme="dark"] .confirm-dialog section,
html[data-theme="dark"] .toast { background: #282329; color: var(--ink); }
html[data-theme="dark"] .view-toggle,
html[data-theme="dark"] .user-form,
html[data-theme="dark"] .kanban-board { background: #1d191e; }
html[data-theme="dark"] .quick-calculator { border-color: #493d46; background: linear-gradient(135deg, #252025, #2b2329); }
html[data-theme="dark"] .quick-calculator-results > span { border-left-color: #76576e; }
html[data-theme="dark"] .quick-input-shell b { color: #e1bad5; background: #382c35; }
html[data-theme="dark"] .view-toggle button.active,
html[data-theme="dark"] .user-row,
html[data-theme="dark"] .kanban-card,
html[data-theme="dark"] .user-active-control > span { background: #282329; color: var(--ink); }
html[data-theme="dark"] .kanban-column { border-color: color-mix(in srgb, var(--status-accent) 36%, #3d353d); background: linear-gradient(180deg, color-mix(in srgb, var(--status-accent) 10%, #262126), rgba(37,32,37,.92) 150px); }
html[data-theme="dark"] .kanban-column > header { background: color-mix(in srgb, var(--status-accent) 8%, #282329); }
html[data-theme="dark"] .kanban-card-meta > span,
html[data-theme="dark"] .kanban-card > footer label { background: #302a30; }
html[data-theme="dark"] .kanban-column-empty { border-color: #50464e; }
html[data-theme="dark"] .status-filter-popover { border-color: #51444e; background: #252126; box-shadow: 0 20px 55px rgba(0,0,0,.45); }
html[data-theme="dark"] .status-filter-popover > header,
html[data-theme="dark"] .status-filter-popover > footer { border-color: #413740; }
html[data-theme="dark"] .status-filter-option { color: #d7ced6; background: color-mix(in srgb, var(--status-accent) 11%, #2b262b); }
html[data-theme="dark"] .status-checkbox { border-color: color-mix(in srgb, var(--status-accent) 62%, #2b262b); background: #302a30; }
html[data-theme="dark"] .creator-badge { color: #d6cdd5; }
html[data-theme="dark"] .creator-badge.legacy > span { color: #a89fa7; background: #393238; }
html[data-theme="dark"] .kanban-next-button:disabled { color: #716971; border-color: #453c44; background: #302a30; }
html[data-theme="dark"] .kanban-column > header > span,
html[data-theme="dark"] .kanban-card-meta b,
html[data-theme="dark"] .kanban-card > footer select,
html[data-theme="dark"] .user-form-heading strong,
html[data-theme="dark"] .users-list-heading span,
html[data-theme="dark"] .user-active-control > span > b { color: #ddd5dd; }
html[data-theme="dark"] .image-hover-preview { border-color: #51444e; background: #252126; box-shadow: 0 22px 60px rgba(0,0,0,.5); }
html[data-theme="dark"] .image-hover-preview img { background: #171418; }
html[data-theme="dark"] .image-hover-preview span { color: #ddd5dd; }
html[data-theme="dark"] .button-quiet:hover { border-color: #5b4d58; background: #302a31; }
html[data-theme="dark"] .theme-toggle { min-width: 92px; }
html[data-theme="dark"] .filterbar,
html[data-theme="dark"] th,
html[data-theme="dark"] .mobile-order-card > footer,
html[data-theme="dark"] .modal-footer { background: #1d191e; }
html[data-theme="dark"] .search-box kbd,
html[data-theme="dark"] .workflow-arrow:disabled,
html[data-theme="dark"] .modal-header .icon-button,
html[data-theme="dark"] .input-suffix b,
html[data-theme="dark"] .input-prefix b,
html[data-theme="dark"] .password-field button,
html[data-theme="dark"] .key-status,
html[data-theme="dark"] .rule-form { background: #292429; }
html[data-theme="dark"] .filter-control select,
html[data-theme="dark"] .toggle-filter,
html[data-theme="dark"] .order-name strong,
html[data-theme="dark"] .size-stack,
html[data-theme="dark"] .payment-money,
html[data-theme="dark"] .address-cell,
html[data-theme="dark"] .contact-row,
html[data-theme="dark"] .phone-number,
html[data-theme="dark"] .field > span,
html[data-theme="dark"] .asset-field-label span,
html[data-theme="dark"] .pricing-helper-heading span,
html[data-theme="dark"] .pricing-helper-item b,
html[data-theme="dark"] .asset-copy b,
html[data-theme="dark"] .mobile-card-grid b { color: #ddd5dd; }
html[data-theme="dark"] select option { background: #282329; color: var(--ink); }
html[data-theme="dark"] td { border-bottom-color: #352e35; }
html[data-theme="dark"] tbody tr.order-row:hover,
html[data-theme="dark"] tbody tr.order-row:focus-visible { background: #2d2328; }
html[data-theme="dark"] .design-preview,
html[data-theme="dark"] .asset-thumb { border-color: #493e47; background: #302a30; }
html[data-theme="dark"] .workflow-pill { color: #d8d0d8; background: #332d33; }
html[data-theme="dark"] .workflow-pill.status-advance_payment,
html[data-theme="dark"] .workflow-pill.status-full_payment { color: #e5bddb; background: rgba(181, 112, 163, .18); }
html[data-theme="dark"] .workflow-pill.status-cancelled { color: #f19a9a; background: rgba(194, 76, 76, .16); }
html[data-theme="dark"] .workflow-dropdown { border-color: #51444e; background: #252126; box-shadow: 0 20px 55px rgba(0, 0, 0, .45); }
html[data-theme="dark"] .workflow-dropdown-heading { border-bottom-color: #413740; }
html[data-theme="dark"] .workflow-dropdown-heading span,
html[data-theme="dark"] .workflow-status-option,
html[data-theme="dark"] .workflow-inline-payment label { color: #ded5dd; }
html[data-theme="dark"] .workflow-status-option:hover,
html[data-theme="dark"] .workflow-status-option:focus-visible { color: #f0c9e5; background: #352a34; }
html[data-theme="dark"] .workflow-inline-payment { border-color: #514451; background: #302a30; }
html[data-theme="dark"] .workflow-inline-payment-row input { background: #282329; color: var(--ink); }
html[data-theme="dark"] .modal-panel { background: #201c21; box-shadow: -18px 0 48px rgba(0, 0, 0, .4); }
html[data-theme="dark"] .ai-assist { border-color: #4a3d48; background: linear-gradient(145deg, #2c252d, #282223); }
html[data-theme="dark"] .ai-assist textarea { border-color: #4c414a; background: #211d22; }
html[data-theme="dark"] .section-nameplate { background: #2b2220; border-color: #533a33; }
html[data-theme="dark"] .section-contact { background: #202730; border-color: #35475d; }
html[data-theme="dark"] .section-payment { background: #202b27; border-color: #355044; }
html[data-theme="dark"] .section-progress { background: #2a232d; border-color: #4b3b50; }
html[data-theme="dark"] .workflow-editor.full { border-color: #554555; background: rgba(21, 18, 23, .48); }
html[data-theme="dark"] .workflow-heading > span,
html[data-theme="dark"] .workflow-payment-amount > span { color: #d9d0d8; }
html[data-theme="dark"] .workflow-track span { color: #948a93; background: #302a30; }
html[data-theme="dark"] .workflow-track span.current { color: #edcbe4; background: #493747; box-shadow: inset 0 0 0 1px #685064; }
html[data-theme="dark"] .payment-choices,
html[data-theme="dark"] .workflow-dropdown-heading { border-color: #483c46; }
html[data-theme="dark"] .payment-choices button.active { color: #edcbe4; border-color: #806079; background: #483746; }
html[data-theme="dark"] .workflow-payment-amount,
html[data-theme="dark"] .amount-summary.full,
html[data-theme="dark"] .pricing-helper.full { border-color: #4b4148; background: #292429; }
html[data-theme="dark"] .workflow-payment-amount input[readonly],
html[data-theme="dark"] #advanceAmount[readonly] { color: #c9c0c8; background: #302a30; }
html[data-theme="dark"] .phone-quick-actions a,
html[data-theme="dark"] .drop-zone { border-color: #594139; background: #2b2322; }
html[data-theme="dark"] .phone-quick-actions a:last-child { border-color: #385749; background: #202b27; }
html[data-theme="dark"] .pricing-helper-item { border-color: #3b343a; }
html[data-theme="dark"] .mobile-order-card { background: var(--surface); box-shadow: var(--shadow); }
html[data-theme="dark"] .mobile-order-card > header { border-bottom-color: #393139; }
html[data-theme="dark"] .network-access { border-color: #385b4b; }

@media (max-width: 720px) {
  .theme-toggle { min-width: 42px !important; }
}