:root {
  color-scheme: light;
  --ink: #22160a;
  --muted: #766242;
  --line: #ead7b3;
  --paper: #fff8ea;
  --panel: #ffffff;
  --solar: #f8b91f;
  --solar-2: #ff8a1d;
  --solar-3: #ffd76a;
  --deep: #7a3d00;
  --leaf: #2f7d52;
  --danger: #b83535;
  --shadow: 0 18px 48px rgba(122, 61, 0, 0.13);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; color: var(--ink); background: linear-gradient(180deg, #fff0c4 0, #fff8ea 340px, #fffaf1 100%); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px clamp(18px, 4vw, 44px); border-bottom: 1px solid rgba(234, 215, 179, 0.9); background: rgba(255, 252, 245, 0.9); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 5; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 1.02rem; }
.brand small { color: var(--muted); font-size: 0.78rem; }
.brand-mark { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(from 25deg, var(--solar), #fff3b0, var(--solar), var(--solar-2), var(--solar)); box-shadow: inset 0 0 0 7px rgba(255, 255, 255, 0.72), 0 8px 22px rgba(255, 138, 29, 0.25); }
.brand-mark span { width: 14px; height: 14px; border-radius: 50%; background: var(--deep); }
.status-cluster, .quote-toolbar, .dialog-title, .action-bar, .setup-box { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.status-pill { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--panel); font-size: 0.86rem; white-space: nowrap; }
.status-pill.ready { color: #5d3700; border-color: rgba(248, 185, 31, 0.55); background: #fff4cf; }
.status-pill.error { color: var(--danger); border-color: rgba(184, 53, 53, 0.3); background: #fff3f1; }
.icon-button { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 8px; color: var(--deep); background: #fffdf8; display: inline-grid; place-items: center; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
main { width: min(1500px, 100%); margin: 0 auto; padding: clamp(18px, 3vw, 38px); }
.workspace { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: clamp(18px, 2.4vw, 30px); align-items: start; }
.supplier-panel, .quote-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.supplier-panel { padding: 24px; position: sticky; top: 92px; }
.eyebrow { margin: 0 0 6px; color: var(--solar-2); font-size: 0.76rem; font-weight: 900; letter-spacing: 0; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 12px; font-size: clamp(1.55rem, 2.4vw, 2.25rem); line-height: 1.08; }
h2 { margin-bottom: 0; font-size: clamp(1.25rem, 1.7vw, 1.7rem); }
h3 { margin-bottom: 0; font-size: 1rem; }
.intro { color: var(--muted); line-height: 1.55; }
.supplier-form, .config-form { display: grid; gap: 14px; }
label { display: grid; gap: 7px; color: #553a15; font-size: 0.88rem; font-weight: 750; }
input, select, textarea { width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; color: var(--ink); background: #fff; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 3px solid rgba(255, 138, 29, 0.28); outline-offset: 2px; }
.setup-box { margin-top: 22px; padding: 14px; border-radius: 8px; background: #fff6db; border: 1px solid rgba(248, 185, 31, 0.42); }
.setup-box span { display: block; color: var(--muted); font-size: 0.82rem; }
.setup-box button, .action-bar button, .empty-state button, menu button { min-height: 42px; border: 0; border-radius: 8px; padding: 10px 16px; color: #2a1600; background: linear-gradient(180deg, var(--solar-3), var(--solar)); font-weight: 900; box-shadow: 0 8px 18px rgba(248, 185, 31, 0.24); }
.quote-panel { overflow: hidden; }
.quote-toolbar { padding: 22px 24px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #fffdf8, #fff7e4); }
.search-wrap { display: flex; align-items: center; gap: 8px; width: min(340px, 100%); border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; background: #fff; }
.search-wrap svg { width: 18px; height: 18px; color: var(--muted); }
.search-wrap input { border: 0; padding-inline: 0; }
.summary-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); background: #fffaf0; }
.summary-strip div { padding: 15px 24px; border-right: 1px solid var(--line); }
.summary-strip div:last-child { border-right: 0; }
.summary-strip span, .summary-strip small { display: block; }
.summary-strip span { font-weight: 900; font-size: 1.08rem; }
.summary-strip small { color: var(--muted); margin-top: 3px; }
.list-head { display: grid; grid-template-columns: minmax(260px, 1.2fr) 96px minmax(520px, 1.7fr); gap: 16px; padding: 12px 24px; border-bottom: 1px solid var(--line); background: #fff3d0; color: #6e470d; font-size: 0.76rem; font-weight: 900; text-transform: uppercase; }
.items-list { display: grid; }
.item-row { display: grid; grid-template-columns: minmax(260px, 1.2fr) 96px minmax(520px, 1.7fr); gap: 16px; align-items: start; padding: 18px 24px; border-bottom: 1px solid var(--line); background: #fff; }
.item-row:nth-child(even) { background: #fffbf3; }
.item-main { min-width: 0; }
.item-code { margin-bottom: 5px; color: var(--solar-2); font-size: 0.76rem; font-weight: 900; }
.specification { margin: 8px 0 0; color: var(--muted); line-height: 1.45; }
.quantity-badge { min-width: 76px; border-radius: 8px; padding: 8px 10px; color: #5d3700; background: #fff1c5; text-align: center; font-size: 0.85rem; font-weight: 900; white-space: nowrap; }
.quote-fields { display: grid; grid-template-columns: minmax(120px, 0.8fr) minmax(150px, 0.9fr) minmax(120px, 0.75fr) minmax(190px, 1.2fr); gap: 12px; }
.quote-fields textarea { min-height: 42px; }
.empty-state { display: grid; justify-items: center; gap: 12px; padding: 56px 22px; text-align: center; }
.empty-state[hidden], .items-list[hidden], .empty-state:not([hidden]) + .list-head { display: none; }
.empty-state p { max-width: 520px; color: var(--muted); }
.empty-icon { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; color: var(--deep); background: #fff1c5; }
.action-bar { padding: 18px 24px; border-top: 1px solid var(--line); background: #fffaf0; }
#submitMessage { color: var(--muted); font-weight: 700; }
#submitMessage.error { color: var(--danger); }
dialog { width: min(560px, calc(100vw - 28px)); border: 1px solid var(--line); border-radius: 8px; padding: 0; box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(73, 43, 0, 0.42); }
.config-form { padding: 22px; }
.config-form p { color: var(--muted); line-height: 1.5; }
menu { display: flex; justify-content: flex-end; gap: 10px; margin: 0; padding: 0; }
menu button[value="cancel"] { color: var(--deep); background: #fff1c5; box-shadow: none; }
@media (max-width: 1180px) { .workspace { grid-template-columns: 300px minmax(0, 1fr); } .list-head, .item-row { grid-template-columns: minmax(220px, 1fr) 86px minmax(390px, 1.35fr); } .quote-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) { main { padding: 18px; } .workspace { grid-template-columns: 1fr; } .supplier-panel { position: static; } .supplier-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .list-head { display: none; } .item-row { grid-template-columns: minmax(0, 1fr) 92px; } .quote-fields { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .topbar, .quote-toolbar { align-items: stretch; flex-direction: column; } .status-cluster { width: 100%; } .status-pill { flex: 1; } .search-wrap { width: 100%; } .supplier-form, .quote-fields, .summary-strip { grid-template-columns: 1fr; } .summary-strip div { border-right: 0; border-bottom: 1px solid var(--line); } .summary-strip div:last-child { border-bottom: 0; } .item-row { grid-template-columns: 1fr; padding: 16px; } .quantity-badge { justify-self: start; } .action-bar { align-items: stretch; flex-direction: column; } }