:root { --bg: #100e16; --panel: #18151f; --panel2: #201c2a; --alt: #322b40; --line: #4a2a7a; --accent: #b04dff; --accent2: #dcb3ff; --accent-dark: #6a1fb8;
  --text: #e8e4f0; --dim: #9d95ab; --green: #2fbf4a; --red: #ff5a5a; --font: "DejaVu Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 var(--font); }
a { color: var(--accent2); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
header { border-bottom: 2px solid var(--accent); background: linear-gradient(#26202f, #100e16); }
header .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: baseline; gap: 10px; letter-spacing: 2px; text-decoration: none; }
.brand-main { font-weight: 800; font-size: 22px; color: var(--accent); text-shadow: 0 0 10px rgba(176,77,255,.5); }
.brand-sub { font-size: 12px; color: var(--dim); letter-spacing: 4px; }
nav a { color: var(--dim); text-decoration: none; white-space: nowrap; margin-left: 22px; font-weight: bold; letter-spacing: 1px; font-size: 13px; } nav a:hover, nav a.on { color: var(--accent2); }
h1 { font-size: 34px; margin: 36px 0 6px; letter-spacing: 1px; } h1 span { color: var(--accent); }
.lede { color: var(--dim); font-size: 17px; margin: 0 0 26px; max-width: 760px; }
.layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; padding-bottom: 60px; } .layout.two { grid-template-columns: 1fr 1fr; }
.side { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 16px; }
.card { background: linear-gradient(var(--panel2), var(--panel)); border: 1px solid var(--line); border-radius: 8px; padding: 18px; }
.card h2 { font-size: 15px; letter-spacing: 2px; color: var(--accent); margin: 0 0 12px; }
.group { margin-bottom: 22px; } .group h3 { margin: 0 0 4px; font-size: 13px; letter-spacing: 2px; color: var(--accent2); } .group .hint { margin: 0 0 10px; }
.hint { color: var(--dim); font-size: 13px; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.choice { text-align: left; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; background: var(--panel); border: 1px solid var(--alt); border-radius: 8px; padding: 12px 14px; color: var(--text); cursor: pointer; font: inherit; }
.choice:hover { border-color: var(--accent); } .choice.sel { border-color: var(--accent); box-shadow: 0 0 12px rgba(176,77,255,.35); background: linear-gradient(#2a2238, #1c1826); }
.choice .ct { font-weight: 800; } .choice .cs { grid-column: 1; color: var(--dim); font-size: 12px; } .choice .cp { grid-column: 2; grid-row: 1 / span 2; font-weight: 800; color: var(--accent2); white-space: nowrap; }
.choice.tog { width: 100%; margin-top: 10px; } .choice.tog::before { content: ""; } .choice.sel .ct::before { content: "\2713  "; color: var(--green); }
.qtyrow { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; margin-top: 10px; background: var(--panel); border: 1px solid var(--alt); border-radius: 8px; padding: 12px 14px; }
.qtyrow .ct { font-weight: 800; } .qtyrow .cs { color: var(--dim); font-size: 12px; grid-column: 1; }
.qty { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 8px; } .qty button { width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--accent); background: var(--panel2); color: var(--accent); font-size: 20px; font-weight: 800; cursor: pointer; } .qty span { min-width: 28px; text-align: center; font-weight: 800; font-size: 18px; }
.price-panel h3 { margin: 0 0 10px; font-size: 13px; letter-spacing: 2px; color: var(--accent); }
.lines { width: 100%; border-collapse: collapse; font-size: 13px; } .lines td { padding: 5px 0; border-bottom: 1px solid var(--alt); vertical-align: top; } .lines td.amt { text-align: right; white-space: nowrap; font-family: ui-monospace, Menlo, monospace; }
.lines tr.promo td { color: var(--green); } .lines tr.included td.amt, .lines tr.tbd td.amt { color: var(--dim); font-size: 12px; } .lines small { color: var(--dim); }
.tot { display: flex; justify-content: space-between; padding: 6px 0 0; color: var(--dim); font-size: 13px; } .tot.big { color: var(--text); font-size: 20px; font-weight: 800; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; } .tot.big span:last-child { color: var(--accent2); }
.cust { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .cust label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--dim); letter-spacing: 1px; } .cust label.wide { grid-column: 1 / -1; }
input, textarea, select { background: #0d0b12; border: 1px solid var(--alt); border-radius: 6px; padding: 10px 12px; color: var(--text); font: inherit; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-weight: 800; letter-spacing: 1px; border-radius: 8px; padding: 14px 26px; cursor: pointer; font: inherit; font-weight: 800;
  background: linear-gradient(#3a3546, #2e2a3a 45%, #211e2a 55%, #131118); border: 1px solid var(--accent); border-bottom: 2px solid var(--accent-dark); color: var(--accent); box-shadow: 0 0 10px rgba(176,77,255,.35), inset 0 1px 0 rgba(255,255,255,.08); }
.btn:hover { color: var(--accent2); border-color: var(--accent2); } .btn:disabled { opacity: .5; cursor: default; }
.btn.go { background: linear-gradient(#5ce07a, #2fbf4a 50%, #1d8a33); color: #041; border-color: #8f8; box-shadow: 0 0 18px rgba(47,191,74,.6); font-size: 17px; width: 100%; }
.btn.small { padding: 8px 14px; font-size: 12px; }
.email-nudge { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--green); border-radius: 6px; background: rgba(47,191,74,.08); font-size: 13px; } .email-nudge b { color: var(--green); }
.card.done { text-align: center; padding: 30px 0; } .done .num { font-family: ui-monospace, Menlo, monospace; font-size: 26px; color: var(--accent2); margin: 10px 0; } .done .btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.toast { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(20px); background: #1e1a28; border: 1px solid var(--accent); color: var(--text); padding: 12px 20px; border-radius: 8px; opacity: 0; transition: .25s; pointer-events: none; z-index: 50; max-width: 90vw; }
.toast.on { opacity: 1; transform: translateX(-50%); } .toast.err { border-color: var(--red); color: #ffb3b3; }
footer { border-top: 1px solid var(--alt); padding: 26px 0 40px; color: var(--dim); font-size: 13px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
/* admin */
.login { max-width: 380px; margin: 60px auto; display: flex; flex-direction: column; gap: 12px; } .login input { width: 100%; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 18px; } .tabs button { background: var(--panel); border: 1px solid var(--alt); color: var(--dim); padding: 10px 18px; border-radius: 8px; font: inherit; font-weight: 800; letter-spacing: 1px; cursor: pointer; } .tabs button.on { color: var(--accent); border-color: var(--accent); }
.list { width: 100%; border-collapse: collapse; font-size: 13px; } .list th { text-align: left; color: var(--dim); font-weight: normal; letter-spacing: 1px; font-size: 11px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.list td { padding: 8px; border-bottom: 1px solid var(--alt); vertical-align: top; } .list tr.row { cursor: pointer; } .list tr.row:hover td { background: rgba(176,77,255,.08); } .list td.amt { text-align: right; font-family: ui-monospace, Menlo, monospace; white-space: nowrap; }
.list .src { font-size: 10px; letter-spacing: 1px; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--alt); color: var(--dim); } .list .src.admin { border-color: var(--accent); color: var(--accent2); }
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; } .toolbar input { flex: 1; min-width: 200px; }
.detail dl { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; margin: 0 0 14px; font-size: 13px; } .detail dt { color: var(--dim); } .detail dd { margin: 0; }
.extras { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; } .extras label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--dim); letter-spacing: 1px; }
.customrow { display: grid; grid-template-columns: 2fr 1fr auto; gap: 8px; margin-top: 8px; }
.custlist { margin-top: 10px; } .custlist td small { color: var(--dim); }
@media (max-width: 900px) { .layout, .layout.two { grid-template-columns: 1fr; } .side { position: static; } .cust { grid-template-columns: 1fr; } nav a { margin-left: 12px; } .extras { grid-template-columns: 1fr; } }
.reach { text-align: left; margin-top: 22px; max-width: 640px; margin-left: auto; margin-right: auto; } .reach-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.reach-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--dim); letter-spacing: 1px; } .reach-form .btn.go { width: 100%; }
.badge { display: inline-block; min-width: 20px; padding: 1px 7px; border-radius: 10px; background: var(--green); color: #041; font-size: 11px; margin-left: 6px; }
.status { font-size: 10px; letter-spacing: 1px; padding: 2px 8px; border-radius: 4px; border: 1px solid var(--alt); color: var(--dim); white-space: nowrap; } .status.pending { border-color: var(--green); color: var(--green); } .status.completed { border-color: var(--alt); color: var(--dim); }
.subtabs { display: flex; gap: 8px; margin-bottom: 12px; } .subtabs button { background: transparent; border: 1px solid var(--alt); color: var(--dim); padding: 8px 14px; border-radius: 6px; font: inherit; font-weight: 800; letter-spacing: 1px; font-size: 12px; cursor: pointer; } .subtabs button.on { color: var(--green); border-color: var(--green); }
.req-detail textarea { width: 100%; min-height: 80px; margin-top: 6px; }
/* account + dialogue */
.acct-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 22px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); font-size: 14px; } .acct-bar .hint { flex: 1; min-width: 200px; }
.chat-log { max-height: 420px; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 6px 2px; }
.msg { max-width: 82%; padding: 8px 12px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--alt); } .msg.mine { align-self: flex-end; border-color: var(--accent); background: #2a2238; } .msg .who { font-size: 11px; color: var(--dim); letter-spacing: 1px; margin-bottom: 3px; } .msg .txt { white-space: pre-wrap; }
.chat-send { display: flex; gap: 8px; margin-top: 10px; } .chat-send textarea { flex: 1; }
.auth-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .auth-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--dim); letter-spacing: 1px; } .auth-form label.wide { grid-column: 1 / -1; } .auth-form .btn { grid-column: 1 / -1; }
.verify { margin-top: 10px; padding: 10px 12px; border: 1px solid #ffd070; border-radius: 6px; background: rgba(255,208,112,.08); font-size: 13px; color: #ffd070; }
.threads td.unread { color: var(--green); font-weight: 800; }
@media (max-width: 900px) { .auth-form { grid-template-columns: 1fr; } }
/* phones: the admin (opened from a Telegram link) and the customer pages stack into cards with big tap targets */
@media (max-width: 720px) {
  .wrap { padding: 0 12px; } header .wrap { height: auto; padding: 10px 12px; flex-wrap: wrap; gap: 6px; } nav a { margin: 0 12px 0 0; font-size: 12px; }
  h1 { font-size: 26px; margin: 20px 0 6px; } .lede { font-size: 15px; }
  .tabs { flex-wrap: wrap; gap: 6px; margin: 14px 0 12px; } .tabs button { padding: 10px 12px; font-size: 12px; flex: 1 1 auto; }
  .subtabs button { flex: 1 1 auto; }
  .card { padding: 14px; }
  .list, .list tbody { display: block; width: 100%; } .list thead, .list th, .list tr:first-child:not(.row) { display: none; }
  .list tr { display: block; border: 1px solid var(--alt); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; background: var(--panel); }
  .list td { display: block; border: 0; padding: 3px 0; } .list td.amt { text-align: left; font-size: 15px; font-weight: 800; } .list td:empty { display: none; }
  .list tr.row:hover td { background: transparent; }
  .detail dl { grid-template-columns: 1fr; gap: 2px; } .detail dt { margin-top: 6px; font-size: 11px; letter-spacing: 1px; }
  .toolbar .btn, .btn.small { padding: 12px 14px; font-size: 13px; min-height: 44px; } .toolbar { gap: 8px; } .toolbar .btn { flex: 1 1 45%; }
  .chat-log { max-height: 50vh; } .msg { max-width: 92%; }
  .choices { grid-template-columns: 1fr; } .choice { padding: 14px; min-height: 56px; }
  .btn.go { min-height: 52px; }
  .done .btns .btn { flex: 1 1 100%; }
  .acct-bar { padding: 10px 12px; } .acct-bar .btn.small { flex: 1 1 45%; }
}
/* the estimate preview: paper on the dark page */
.paper { background: #fff; color: #16161c; border-radius: 6px; padding: 28px 32px; margin: 18px auto 0; max-width: 820px; text-align: left; font-size: 13px; line-height: 1.45; box-shadow: 0 20px 60px rgba(0,0,0,.6); border-top: 8px solid #007a8a; }
.paper .p-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .paper .p-co { font-size: 22px; font-weight: 800; letter-spacing: 1px; } .paper .p-sub { color: #6e6e78; font-size: 11px; line-height: 1.4; }
.paper .p-pill { font-family: ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 800; border: 1px solid #16161c; border-radius: 4px; padding: 5px 9px; white-space: nowrap; }
.paper .p-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0 16px; } .paper .p-lab { color: #007a8a; font-size: 10px; font-weight: 800; letter-spacing: 1px; margin: 14px 0 4px; }
.paper .p-head { font-size: 21px; margin: 6px 0 4px; line-height: 1.2; } .paper .p-total { color: #007a8a; font-weight: 800; margin-bottom: 12px; }
.paper .p-table { width: 100%; border-collapse: collapse; } .paper .p-table th { background: #16161c; color: #fff; font-size: 10px; letter-spacing: 1px; text-align: left; padding: 6px 8px; } .paper .p-table th:not(:first-child), .paper .p-table td.n { text-align: right; white-space: nowrap; font-family: ui-monospace, Menlo, monospace; }
.paper .p-table td { padding: 7px 8px; border-bottom: 1px solid #d8d8de; vertical-align: top; } .paper .p-table tr.promo td { color: #1e8c3c; } .paper .p-table tr.included td.n, .paper .p-table tr.tbd td.n { font-family: inherit; font-size: 10px; font-weight: 800; color: #1e8c3c; } .paper .p-table tr.tbd td.n { color: #6e6e78; }
.paper .p-sum { margin: 8px 0 0 auto; max-width: 300px; } .paper .p-sum div { display: flex; justify-content: space-between; padding: 4px 8px; } .paper .p-sum span:last-child { font-family: ui-monospace, Menlo, monospace; } .paper .p-sum .big { background: #eef4f6; font-weight: 800; font-size: 15px; }
.paper .p-inc { columns: 2; margin: 0; padding-left: 18px; } .paper .p-inc li { break-inside: avoid; } .paper p { margin: 6px 0; } .paper .p-fine { color: #6e6e78; font-size: 10.5px; }
.paper .p-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1px solid #d8d8de; margin-top: 14px; padding-top: 8px; color: #6e6e78; font-size: 10.5px; }
@media (max-width: 720px) { .paper { padding: 18px 14px; } .paper .p-cols { grid-template-columns: 1fr; } .paper .p-inc { columns: 1; } .paper .p-table th:nth-child(2), .paper .p-table td:nth-child(2), .paper .p-table th:nth-child(3), .paper .p-table td:nth-child(3) { display: none; } }
/* admin dashboard */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
.tile { background: linear-gradient(var(--panel2), var(--panel)); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; } .tile .k { color: var(--dim); font-size: 11px; letter-spacing: 1px; } .tile .v { font-size: 26px; font-weight: 800; color: var(--accent2); margin-top: 2px; line-height: 1.1; } .tile .s { color: var(--dim); font-size: 12px; margin-top: 4px; }
.tile.alert .v { color: var(--green); }
.dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 900px) { .dash-cols { grid-template-columns: 1fr; } }
.bars div { display: grid; grid-template-columns: 180px 1fr auto; gap: 10px; align-items: center; font-size: 13px; padding: 4px 0; } .bars i { display: block; height: 10px; border-radius: 5px; background: var(--accent); min-width: 2px; } .bars b { font-family: ui-monospace, Menlo, monospace; }
.dash-h { font-size: 13px; letter-spacing: 2px; color: var(--dim); margin: 18px 0 10px; }
.days { display: flex; gap: 4px; align-items: flex-end; flex-wrap: wrap; } .days .day { flex: 1 1 0; min-width: 0; text-align: center; font-size: 10px; color: var(--dim); } .days .cols { display: flex; gap: 2px; align-items: flex-end; justify-content: center; height: 64px; }
.days i { display: block; width: 12px; border-radius: 3px 3px 0 0; } .days i.a { background: var(--accent); } .days i.b { background: var(--green); } .days b { display: block; color: var(--text); }
.days .legend { flex: 1 1 100%; display: flex; gap: 14px; font-size: 11px; color: var(--dim); margin-top: 6px; } .days .legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: middle; } .days .legend .a::before { background: var(--accent); } .days .legend .b::before { background: var(--green); }
.finance { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; padding: 12px 16px; border: 1px solid var(--green); border-radius: 8px; background: linear-gradient(rgba(47,191,74,.14), rgba(47,191,74,.06)); font-size: 14px; }
.finance b { color: var(--green); letter-spacing: 2px; font-size: 13px; white-space: nowrap; } .finance span { color: var(--text); flex: 1; min-width: 200px; }
/* orders: timeline, stages, payments */
.tl-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .tl-head b { color: var(--accent2); } .tl-head b.late { color: var(--red); }
.tl-bar { height: 8px; border-radius: 4px; background: var(--alt); overflow: hidden; margin: 6px 0 10px; } .tl-bar i { display: block; height: 100%; background: var(--green); }
.tl-list { list-style: none; margin: 0; padding: 0; } .tl-list li { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--alt); font-size: 13px; }
.tl-list .dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--alt); } .tl-list li.done .dot { background: var(--green); border-color: var(--green); } .tl-list li.target .dot { border-color: var(--accent); } .tl-list li.stage .nm { color: var(--dim); } .tl-list li.done .nm { color: var(--text); } .tl-list .at { color: var(--dim); font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.status.s-invoiced { border-color: var(--accent); color: var(--accent2); } .status.s-deposit_paid, .status.s-in_manufacturing { border-color: var(--green); color: var(--green); } .status.s-ready { border-color: #ffd070; color: #ffd070; } .status.s-complete { border-color: var(--dim); color: var(--dim); } .status.s-cancelled { border-color: var(--red); color: var(--red); }
.stages { list-style: none; margin: 0; padding: 0; } .stages li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--alt); } .stages li.done { color: var(--dim); } .stages li .btn.small { margin-left: auto; }
.pay-form { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; align-items: end; } .pay-form label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--dim); letter-spacing: 1px; } @media (max-width: 720px) { .pay-form { grid-template-columns: 1fr 1fr; } }
.order-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 900px) { .order-grid { grid-template-columns: 1fr; } }
.money-row { display: flex; gap: 18px; flex-wrap: wrap; margin: 8px 0; } .money-row div { flex: 1 1 120px; } .money-row .k { color: var(--dim); font-size: 11px; letter-spacing: 1px; } .money-row .v { font-size: 20px; font-weight: 800; color: var(--accent2); } .money-row .v.due { color: #ffd070; } .money-row .v.ok { color: var(--green); }
.spec { white-space: pre-wrap; background: #0d0b12; border: 1px solid var(--alt); border-radius: 6px; padding: 10px 12px; font-size: 13px; }
.steps-list { margin: 10px 0 0; padding-left: 20px; color: var(--dim); font-size: 13px; } .steps-list li { margin: 4px 0; } .steps-list b { color: var(--accent2); font-family: ui-monospace, Menlo, monospace; }
.hint.err { color: var(--red); }
.laser-pick { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 14px; border: 1px solid var(--accent); border-radius: 8px; background: rgba(176,77,255,.1); }
.laser-pick b { color: var(--text); } .laser-pick span { font-weight: 800; font-size: 18px; color: var(--accent2); font-family: ui-monospace, Menlo, monospace; }
/* the step-by-step estimator */
.flow-card { max-width: 760px; margin: 0 auto; padding: 22px 24px 18px; }
.flow-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .flow-step { font-size: 11px; letter-spacing: 2px; color: var(--dim); white-space: nowrap; }
.flow-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--alt); overflow: hidden; } .flow-bar i { display: block; height: 100%; background: var(--accent); transition: width .2s; }
.flow-q { font-size: 24px !important; color: var(--text) !important; letter-spacing: 0 !important; margin: 0 0 6px !important; line-height: 1.25; }
.flow-sub { color: var(--dim); font-size: 14px; margin: 0 0 16px; }
.flow-body { display: flex; flex-direction: column; gap: 10px; }
.choice.big { padding: 16px 18px; min-height: 64px; } .choice.big .ct { font-size: 16px; } .choice.big .cp { font-size: 16px; }
.flow-qty { justify-content: center; margin: 6px 0; } .flow-qty button { width: 52px; height: 52px; font-size: 24px; } .flow-qty span { font-size: 26px; min-width: 48px; }
.flow-big { text-align: center; font-size: 22px; font-weight: 800; color: var(--accent2); }
.flow-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; }
.flow-total { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--alt); margin-top: 14px; padding-top: 10px; font-size: 13px; }
.flow-total b { color: var(--accent2); font-size: 17px; white-space: nowrap; }
.flow-body .cust { grid-template-columns: 1fr 1fr; } @media (max-width: 720px) { .flow-card { padding: 16px 14px; } .flow-q { font-size: 20px !important; } .flow-body .cust { grid-template-columns: 1fr; } .flow-nav .btn { flex: 1; } }

.choice .cp .cship { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--dim); margin-top: 2px; }
.flow-num { width: 120px; font: 800 22px/1 var(--font); text-align: center; padding: 10px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px; }
.legal-box { grid-column: 1 / -1; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 0 0 12px; }
.legal-row { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text); margin: 6px 0; cursor: pointer; } .legal-row input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; } .legal-row a { color: var(--accent2); }
.legal-hint { margin: 6px 0 0 !important; } .cust input:disabled, .cust textarea:disabled, .auth-form input:disabled, .lc-form input:disabled, .lc-form textarea:disabled { opacity: .45; }