:root {
  --bg: #f6f5f1;
  --surface: #ffffff;
  --surface-2: #f1efe9;
  --ink: #111827;
  --ink-soft: #4b5563;
  --line: #e5e2da;
  --brand: #4f46e5;
  --brand-2: #7c3aed;
  --brand-ink: #ffffff;
  --brand-soft: #eef0ff;
  --good: #15803d;
  --good-soft: #e3f5ec;
  --warn: #9a5b00;
  --warn-soft: #fff3dc;
  --bad: #b91c1c;
  --radius: 14px;
  --shadow: 0 1px 2px rgb(17 24 39 / 5%), 0 10px 28px rgb(17 24 39 / 7%);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c0f17;
    --surface: #161c2c;
    --surface-2: #1c2335;
    --ink: #eef1f7;
    --ink-soft: #a7b0c2;
    --line: #262e42;
    --brand: #8b8cff;
    --brand-2: #b18cff;
    --brand-ink: #0c0f17;
    --brand-soft: #1d2242;
    --good: #4ade80;
    --good-soft: #13291f;
    --warn: #f0b44c;
    --warn-soft: #2c2413;
    --bad: #f87171;
    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 10px 28px rgb(0 0 0 / 35%);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--brand); }
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 .6rem; }
h1 { font-size: clamp(1.6rem, 3.5vw, 2.1rem); }
h2 { font-size: 1.2rem; }
p { margin: 0 0 .8rem; }
.wrap { max-width: 920px; margin: 0 auto; padding: 0 1.25rem; }
.muted { color: var(--ink-soft); }
.small { font-size: .88rem; }
.loading { padding: 4rem 0; text-align: center; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* ------------------------------------------------------------ header & footer */
.bar { background: var(--surface); border-bottom: 1px solid var(--line); }
.bar-inner { display: flex; align-items: center; justify-content: space-between; height: 4rem; }
.logo { display: flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; font-weight: 750; font-size: 1.1rem; }
.logo .muted { font-weight: 500; margin-left: .25rem; }
.logo svg { width: 30px; height: 30px; }
.logo-bg { fill: var(--brand); }
.logo-p { fill: none; stroke: var(--brand-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.logo-dot { fill: var(--brand-ink); }
.foot { padding: 2.5rem 0 3rem; color: var(--ink-soft); font-size: .88rem; }
.foot a { color: var(--ink-soft); }

/* ------------------------------------------------------------ layout */
.hello { padding: 2.25rem 0 1.25rem; }
.section { margin-bottom: 1.5rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow); }
.card + .card { margin-top: 1rem; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .7rem 1.2rem; border-radius: 999px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: var(--brand-ink);
  font: inherit; font-weight: 650; text-decoration: none;
}
.button:disabled { opacity: .6; cursor: progress; }
.button.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.button.small { padding: .4rem .85rem; font-size: .9rem; }

.pill { display: inline-block; padding: .15rem .65rem; border-radius: 999px; font-size: .8rem; font-weight: 650; background: var(--surface-2); color: var(--ink-soft); }
.pill.good { background: var(--good-soft); color: var(--good); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }

/* ------------------------------------------------------------ project progress */
.stages { list-style: none; padding: 0; margin: 1rem 0 .5rem; display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; }
.stages li { text-align: center; font-size: .78rem; color: var(--ink-soft); }
.stages li::before { content: ""; display: block; height: 6px; border-radius: 999px; background: var(--line); margin-bottom: .45rem; }
.stages li.done::before { background: var(--brand); opacity: .55; }
.stages li.current { color: var(--ink); font-weight: 700; }
.stages li.current::before { background: linear-gradient(135deg, var(--brand), var(--brand-2)); }

/* ------------------------------------------------------------ quotes */
.quote-lines { width: 100%; border-collapse: collapse; margin: .75rem 0; font-size: .95rem; }
.quote-lines th, .quote-lines td { text-align: left; padding: .5rem .25rem; border-bottom: 1px solid var(--line); }
.quote-lines th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.num { text-align: right !important; font-variant-numeric: tabular-nums; }
.total { font-size: 1.15rem; font-weight: 750; text-align: right; }
.accept { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--line); }
.accept label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .75rem; }
.accept input[type=text] { display: block; width: 100%; max-width: 22rem; margin-top: .35rem; }
.check { display: flex !important; gap: .6rem; align-items: flex-start; font-weight: 500 !important; }
.check input { margin-top: .3rem; }
input, textarea {
  padding: .65rem .8rem; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); font: inherit;
}
textarea { width: 100%; resize: vertical; }

/* ------------------------------------------------------------ messages */
.thread { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .6rem; max-height: 28rem; overflow-y: auto; }
.msg { max-width: 85%; padding: .65rem .9rem; border-radius: 14px; background: var(--surface-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.mine { align-self: flex-end; background: var(--brand-soft); }
.msg.update { align-self: center; max-width: 95%; background: transparent; border: 1px dashed var(--line); font-size: .92rem; color: var(--ink-soft); text-align: center; }
.msg .meta { display: block; font-size: .75rem; color: var(--ink-soft); margin-top: .25rem; }
.compose { display: flex; flex-direction: column; gap: .6rem; align-items: flex-end; }

.toast {
  position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%); z-index: 40;
  background: var(--ink); color: var(--bg); padding: .65rem 1.1rem; border-radius: 10px; box-shadow: var(--shadow); max-width: calc(100% - 2rem);
}
.toast.error { background: var(--bad); color: #fff; }

@media (max-width: 640px) {
  .stages { grid-template-columns: 1fr; }
  .stages li { display: flex; align-items: center; gap: .6rem; text-align: left; }
  .stages li::before { width: 1.2rem; height: 1.2rem; margin: 0; flex: none; }
  .msg { max-width: 100%; }
  .logo .muted { display: none; }
}

/* ------------------------------------------------------------ printable quote */
.print-only { display: none; }
@media print {
  body > *:not(#print-area) { display: none !important; }
  #print-area { display: block; color: #000; font: 11pt/1.5 var(--font); }
  #print-area table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
  #print-area th, #print-area td { text-align: left; padding: .35rem .25rem; border-bottom: 1px solid #ccc; }
  #print-area .num { text-align: right; }
}

.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .5rem; }