:root { color-scheme: light; --ink:#2A2A32; --muted:#6d6d78; --line:#e6e6eb; --pink:#F48B9C; --ok:#166534; --bad:#9f1239; }
* { box-sizing: border-box; }
body { margin:0; font: 16px/1.5 system-ui, sans-serif; background:#fff; color:var(--ink); }
h1 { font-size: 1.6rem; line-height: 1.2; margin: 0 0 .35rem; font-weight: 700; }
h2 { font-size: 1rem; margin: 1.6rem 0 .5rem; }
a { color: var(--ink); }
p { margin: .35rem 0; }
.muted { color: var(--muted); }
.error { color: var(--bad); font-weight: 650; }
.ok { color: var(--ok); font-weight: 650; }
.feedback { margin: 0 0 1rem; padding: .65rem .8rem; border-left: 3px solid var(--pink); font-weight: 650; }
.mark { display:inline-flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem; border-radius:8px; background:var(--pink); color:#fff; font-weight:750; letter-spacing:-.04em; text-decoration:none; }
.side { background:#fff; border-bottom:1px solid var(--line); padding:1.1rem 1.1rem .4rem; }
.side nav { display:flex; flex-direction:column; gap:.1rem; margin-top:1rem; }
.side nav a { color:var(--ink); text-decoration:none; font-weight:650; padding:.55rem .7rem; border-radius:8px; }
.side nav a.on { box-shadow: inset 3px 0 0 var(--pink); }
.work { padding: 1.25rem 1.1rem 5rem; }
.gate { max-width: 24rem; margin: 0 auto; padding: 3rem 1.25rem 4rem; }
.signin .mark { margin-bottom: 1rem; }
.card { display:block; background:#fff; border:1px solid var(--line); border-radius:12px; padding: .9rem 1rem; margin: .7rem 0; text-decoration:none; color:inherit; }
.card h2 { margin-top: 0; }
.orders-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:.4rem 1.2rem; }
.orders-head h1 { margin-bottom:.2rem; }
.key { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.35rem .75rem; margin:.15rem 0 0 auto; padding:0; list-style:none; max-width:22rem; color:var(--muted); font-size:.78rem; }
.key li { display:flex; align-items:center; gap:.35rem; }
.swatch { width:.7rem; height:.7rem; border-radius:99px; flex:0 0 auto; }
.swatch.approval { background:#c4a574; }
.swatch.proof { background:#7f97b3; }
.swatch.pack { background:#c2b39a; }
.swatch.ready { background:#7d9a84; }
.swatch.sent { background:#8b919c; }
tr.tone-approval td { background:#fbf6ee; }
tr.tone-proof td { background:#f3f6fa; }
tr.tone-pack td { background:#faf6f0; }
tr.tone-ready td { background:#f3f7f4; }
tr.tone-sent td { background:#f4f5f7; }
.order-card.tone-approval { background:#fbf6ee; }
.order-card.tone-proof { background:#f3f6fa; }
.order-card.tone-pack { background:#faf6f0; }
.order-card.tone-ready { background:#f3f7f4; }
.order-card.tone-sent { background:#f4f5f7; }
.order-card { border:1px solid var(--line); border-radius:12px; padding:.9rem 1rem; margin:.7rem 0; }
.order-card > a { font-weight:750; text-decoration:none; }
.meta { display:block; color:var(--muted); font-size:.88rem; margin-top:.15rem; }
.label { display:inline-block; font-size:.78rem; font-weight:700; line-height:1.2; border-bottom:2px solid var(--pink); }
label { display:block; font-weight:650; margin: .8rem 0 .3rem; }
label.check { display:flex; align-items:center; gap:.45rem; margin:0; }
.photo-row { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; border:1px solid var(--line); border-radius:12px; padding:.7rem; margin:.6rem 0; }
.photo-row img { flex:0 0 4.5rem; width:4.5rem; height:4.5rem; object-fit:contain; object-position:center; display:block; border:1px solid var(--line); border-radius:8px; background:#f7f7f8; }
.photo-row select, .photo-row input[type=file] { flex:1 1 12rem; width:auto; margin:0; }
.photo-row .quiet { margin:0; }
.scrim { position:fixed; inset:0; z-index:30; width:100%; min-height:100%; margin:0; padding:1.5rem; border:0; border-radius:0; background:rgba(42,42,50,.35); display:flex; align-items:center; justify-content:center; }
h1.center { text-align: center; }
.pair { display: flex; gap: .6rem; margin: .8rem 0; }
.pair button { width: auto; flex: 1; margin-top: 0; }
.pair button.on { box-shadow: inset 0 -3px 0 var(--pink); }
.views { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; margin: .8rem 0 1rem; }
.views button { border: 0; background: transparent; box-shadow: none; }
.views button.on { box-shadow: inset 0 -3px 0 var(--pink); }
.sheet-head, .sheet-row { display: grid; gap: .6rem; padding: .7rem 0; text-decoration: none; color: inherit; }
.sheet-6 .sheet-head, .sheet-6 .sheet-row { grid-template-columns: 1.1fr 1.3fr repeat(4, 1fr); }
.sheet-3 .sheet-head, .sheet-3 .sheet-row { grid-template-columns: 1.1fr 1.4fr 1.2fr; }
.sheet-4 .sheet-head, .sheet-4 .sheet-row { grid-template-columns: 1.1fr 1.2fr 1fr 1.6fr; }
.sheet-head { color: var(--muted); font-size: .75rem; font-weight: 700; }
.plain { display: flex; flex-direction: column; gap: .15rem; padding: .85rem 0; text-decoration: none; color: inherit; }
.receipt { display: block; width: 100%; max-width: 24rem; margin-top: .6rem; border-radius: 12px; background: #f7f7f8; }
.popup-card { background:#fff; color:var(--ink); border-radius:20px; padding:1.4rem 1.8rem; font-weight:750; text-align:center; max-width:18rem; }
input, textarea, select { width:100%; font:inherit; padding:.75rem; border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--ink); }
textarea { min-height: 6rem; }
button, .button { display:block; width:100%; min-height:3rem; margin-top:.6rem; border-radius:10px; border:0; font: inherit; font-weight:700; text-align:center; text-decoration:none; cursor:pointer; }
.primary { background:var(--ink); color:#fff; }
.danger { background:#fff; color:var(--bad); border:1px solid var(--line); }
.quiet { background:#fff; color:var(--ink); border:1px solid var(--line); width:auto; min-height:2.5rem; padding:0 .8rem; }
button.signout { width:auto; min-height:0; margin:1rem .7rem .4rem; padding:.4rem 0; background:transparent; color:var(--ink); border:0; font-weight:650; text-align:left; }
td.actions form, .actions form { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin:.4rem 0 0; }
.actions .act { display:inline-flex; align-items:center; justify-content:center; width:auto; min-height:2.75rem; margin:0; padding:0 .8rem; border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--ink); font-weight:650; }
.actions .act.solid { background:var(--ink); color:#fff; border-color:var(--ink); }
.actions .act.wait { color:var(--muted); background:transparent; border-style:dashed; }
a.wa { display:inline-flex; align-items:center; justify-content:center; width:auto; min-height:2.75rem; margin:.35rem .4rem .35rem 0; padding:0 .85rem; border-radius:8px; background:var(--ink); color:#fff; font-weight:700; text-decoration:none; }
.draft { white-space:pre-line; }
.actions input.note { width:100%; min-height:2.75rem; margin:0; padding:.35rem .55rem; }
.tid, pre { font-family: ui-monospace, monospace; white-space: pre-wrap; word-break: break-word; }
pre { background:#f7f7f8; padding:.7rem; border-radius:10px; }
.records-wrap { overflow-x:auto; margin-top:.8rem; }
table.board { width:100%; border-collapse:collapse; font-size:.92rem; min-width:46rem; background:#fff; }
table.board th, table.board td { text-align:left; padding:.75rem .7rem; border-bottom:1px solid var(--line); vertical-align:top; }
table.board th { font-size:.75rem; color:var(--muted); font-weight:700; white-space:nowrap; }
.pill { display:inline-block; font-size:.78rem; font-weight:700; border-bottom:2px solid var(--pink); }
.pill.bad { color:var(--bad); }
.pill.ok { color:var(--ok); }
.wide { display:none; }
.narrow { display:block; }
#alerts.alerts-on { border:0; background:transparent; color:var(--muted); font-weight:650; min-height:0; margin-top:.2rem; padding:0; width:auto; max-width:100%; cursor:default; white-space:normal; text-align:left; }
.arrived { position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; align-items:center; justify-content:space-between; gap:.8rem; background:#1c1917; color:#fffdf8; padding:.85rem 1rem calc(.85rem + env(safe-area-inset-bottom)); }
.arrived p { margin:0; font-weight:650; }
.arrived a { color:#fdba74; font-weight:700; white-space:nowrap; }
.arrived[hidden] { display:none; }
@media (max-width: 959px) {
  .work { padding-bottom: 50vh; }
  input, textarea, select { scroll-margin-top: 4.5rem; scroll-margin-bottom: 40vh; }
}
@media (min-width: 960px) {
  .side { position: fixed; top:0; left:0; bottom:0; width:220px; border-bottom:0; border-right:1px solid var(--line); padding:1.4rem 1rem; overflow:auto; }
  .work { margin-left:220px; padding:2rem 2.25rem 5rem; }
  .wide { display:block; }
  .narrow { display:none; }
  .actions input.note { width:8.5rem; }
}