:root {
  --ink: #30212e;
  --ink-soft: #6d6170;
  --paper: #fffaf1;
  --paper-deep: #f6eee4;
  --warm: #f6f0ea;
  --lavender: #eee9f1;
  --line: #ded4db;
  --accent: #cf675b;
  --accent-dark: #a84a46;
  --plum: #59435b;
  --shadow: 0 24px 60px rgba(71, 48, 66, 0.10);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--warm);
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--warm); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .34;
  background-image: radial-gradient(rgba(75, 55, 70, .07) .6px, transparent .6px);
  background-size: 7px 7px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent 80%);
}

.app-shell { position: relative; max-width: 1440px; min-height: 100vh; margin: 0 auto; padding: 0 54px 54px; }
.topbar { height: 86px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(48, 33, 46, .09); }
.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--paper); background: var(--plum); font-size: 18px; box-shadow: 0 5px 12px rgba(89, 67, 91, .18); }
.brand-name { font-weight: 800; font-size: 17px; letter-spacing: .04em; }
.brand-name span { color: var(--accent); }
.brand-subtitle { margin-top: 2px; color: var(--ink-soft); font-size: 11px; letter-spacing: .13em; }
.time-chip { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: .04em; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #78a976; box-shadow: 0 0 0 4px rgba(120, 169, 118, .12); }
.time-divider { color: #bcb1ba; }
.admin-link { color: var(--plum); font-size: 11px; font-weight: 700; text-decoration: none; }.admin-link span { margin-left: 5px; color: var(--accent); }.admin-link:hover { color: var(--accent-dark); }

.workspace { padding-top: 54px; }
.intro-row { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 34px; }
.eyebrow, .section-kicker { margin: 0 0 9px; color: var(--accent-dark); font: 500 10px/1 "DM Mono", monospace; letter-spacing: .18em; }
h1, h2, p { margin: 0; }
h1 { max-width: 720px; font-size: clamp(34px, 4vw, 54px); line-height: 1.17; letter-spacing: -.05em; font-weight: 800; }
h1 em { color: var(--accent); font-style: normal; }
.intro-copy { margin-top: 14px; color: var(--ink-soft); font-size: 14px; letter-spacing: .02em; }
.step-note { color: #a394a1; font: 11px "DM Mono", monospace; white-space: nowrap; }
.step-note span { color: var(--plum); font-weight: 500; }

.studio-grid { display: grid; grid-template-columns: minmax(0, .93fr) minmax(440px, 1.07fr); gap: 22px; align-items: stretch; }
.control-panel, .preview-panel { border: 1px solid rgba(48, 33, 46, .10); border-radius: 24px; box-shadow: var(--shadow); }
.control-panel { padding: 30px 30px 24px; background: rgba(238, 233, 241, .76); }
.preview-panel { padding: 30px; background: rgba(255, 250, 241, .72); }
.panel-heading, .preview-heading { display: flex; align-items: start; justify-content: space-between; margin-bottom: 25px; }
h2 { font-size: 21px; letter-spacing: -.03em; }
.ghost-button, .secondary-button { border: 1px solid var(--line); background: rgba(255,255,255,.48); color: var(--plum); }
.ghost-button { padding: 9px 12px; border-radius: 10px; font-size: 12px; }
.ghost-button span { margin-left: 6px; color: var(--accent); }
.field-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; color: var(--ink-soft); font-size: 12px; font-weight: 600; }
.field-label small { color: #a597a5; font-size: 10px; font-weight: 400; }
textarea, input { width: 100%; outline: none; border: 1px solid rgba(48, 33, 46, .13); border-radius: 11px; color: var(--ink); background: rgba(255, 255, 255, .58); transition: border-color .2s, box-shadow .2s, background .2s; }
textarea:focus, input:focus { border-color: rgba(207, 103, 91, .72); background: #fffdfb; box-shadow: 0 0 0 3px rgba(207, 103, 91, .10); }
textarea { display: block; min-height: 150px; padding: 14px; resize: vertical; font: 12px/1.75 "DM Mono", "Microsoft YaHei", monospace; }
input { height: 40px; padding: 0 12px; font-size: 13px; }
input::placeholder { color: #b4aab4; }
.helper-text { margin: 9px 0 24px; color: #9b8d9b; font-size: 11px; }
.field-section-title { display: flex; align-items: center; gap: 8px; margin: 0 0 15px; color: var(--plum); font-size: 11px; font-weight: 700; letter-spacing: .05em; }
.field-section-title span { width: 17px; height: 2px; border-radius: 999px; background: var(--accent); }
.manual-title { margin-top: 24px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 13px; }
.input-prefix { position: relative; }
.input-prefix > span { position: absolute; z-index: 1; left: 12px; top: 10px; color: var(--accent-dark); font: 600 13px "DM Mono", monospace; }
.input-prefix input { padding-left: 27px; }
.accent-field input { border-color: rgba(207, 103, 91, .42); background: rgba(255, 251, 246, .76); }
.note-wrap { margin-top: 16px; }
.action-row { display: flex; gap: 10px; margin-top: 24px; }
.primary-button, .secondary-button { height: 46px; border-radius: 12px; padding: 0 16px; font-size: 13px; font-weight: 700; transition: transform .18s, box-shadow .18s, background .18s; }
.primary-button { flex: 1; border: 0; color: #fffaf1; background: var(--accent); box-shadow: 0 10px 18px rgba(207, 103, 91, .20); }
.primary-button span { margin-left: 7px; color: #ffd9d0; }
.secondary-button { min-width: 118px; }
.primary-button:hover, .secondary-button:hover, .ghost-button:hover { transform: translateY(-1px); }
.primary-button:hover { background: var(--accent-dark); box-shadow: 0 12px 20px rgba(207, 103, 91, .25); }
.primary-button:disabled, .secondary-button:disabled { cursor: wait; opacity: .58; transform: none; box-shadow: none; }
.status-line { min-height: 18px; margin-top: 12px; color: #958793; font-size: 11px; }
.service-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.service-button { flex: 1; height: 42px; border: 1px solid rgba(89, 67, 91, .28); border-radius: 11px; color: var(--plum); background: rgba(255, 250, 241, .55); font-size: 13px; font-weight: 800; transition: transform .18s, border-color .18s, background .18s; }
.service-button span { margin-left: 7px; color: var(--accent); }
.service-button:hover { transform: translateY(-1px); border-color: var(--accent); background: #fffaf1; }
.service-row > span { color: #a0919f; font-size: 10px; white-space: nowrap; }
.room-link-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:9px; margin-top:10px; padding:9px 11px; border:1px solid rgba(89,67,91,.14); border-radius:10px; background:rgba(255,250,241,.52); }.room-link-label { color:#948592; font-size:10px; white-space:nowrap; }.room-link-row a { overflow:hidden; color:var(--plum); font:10px "DM Mono",monospace; text-overflow:ellipsis; white-space:nowrap; }.room-link-row button { border:0; padding:0; color:var(--accent); background:transparent; font-size:10px; font-weight:700; white-space:nowrap; }.room-link-row button:hover { color:var(--accent-dark); }

.preview-state { display: inline-flex; align-items: center; gap: 7px; color: #779475; font: 11px "DM Mono", monospace; }
.preview-state i { width: 7px; height: 7px; border-radius: 50%; background: #83af80; }
.receipt-stage { min-height: 700px; display: grid; place-items: center; padding: 22px; border-radius: 17px; background: #e9e0db; background-image: radial-gradient(rgba(89,67,91,.08) 0.8px, transparent .8px); background-size: 11px 11px; }
.receipt { width: min(100%, 410px); min-height: 635px; position: relative; overflow: hidden; padding: 30px 36px 22px; color: #29212b; background-color: #fffaf0; background-image: radial-gradient(rgba(72, 53, 42, .08) .55px, transparent .55px); background-size: 7px 7px; border: 1px solid rgba(113, 92, 74, .12); box-shadow: 0 18px 25px rgba(65, 47, 60, .16); transform: rotate(-.55deg); }
.receipt::before, .receipt::after { content: ""; position: absolute; left: -8px; right: -8px; height: 15px; background: #e9e0db; clip-path: polygon(0 34%, 3% 0, 6% 47%, 9% 4%, 12% 54%, 15% 0, 18% 49%, 21% 6%, 24% 52%, 27% 1%, 30% 50%, 33% 5%, 36% 54%, 39% 0, 42% 48%, 45% 6%, 48% 53%, 51% 1%, 54% 49%, 57% 5%, 60% 53%, 63% 0, 66% 48%, 69% 5%, 72% 52%, 75% 1%, 78% 50%, 81% 5%, 84% 54%, 87% 0, 90% 48%, 93% 5%, 96% 52%, 100% 1%, 100% 100%, 0 100%); }
.receipt::before { top: -1px; }
.receipt::after { bottom: -1px; transform: rotate(180deg); }
.receipt-topline { display: flex; align-items: center; justify-content: end; gap: 4px; color: #2f2630; font: 13px/1 "DM Mono", monospace; }
.top-spark { margin-right: auto; color: #bd5b50; font-size: 10px; letter-spacing: .05em; }
.brand-mini { font-size: 11px; font-weight: 800; letter-spacing: -.04em; }
.cat-line { margin-top: 7px; text-align: center; color: #2b232c; font: 16px/1.05 "DM Mono", monospace; letter-spacing: -.1em; }
.receipt-title { margin-top: 4px; text-align: center; font-size: 30px; line-height: 1.2; font-weight: 800; letter-spacing: .12em; }
.receipt-badge { width: max-content; margin: 9px auto 0; padding: 4px 13px; border-radius: 3px; color: #fff9ef; background: #bd5148; font-size: 11px; font-weight: 700; letter-spacing: .09em; }
.receipt-seal { height: 96px; display: grid; place-items: center; margin: 5px 0 2px; }
.receipt-seal svg { width: 170px; height: 92px; fill: none; stroke: #2e2930; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.receipt-seal .seal-fill { fill: #2e2930; stroke: none; }
.receipt-rule { height: 1px; margin: 10px 0 5px; background: #bfb4a9; }
.receipt-lines { display: grid; gap: 0; }
.receipt-line { display: flex; justify-content: space-between; align-items: center; min-height: 38px; gap: 14px; padding: 0; border-top: 1px dashed #c9beb1; font-size: 12px; }
.receipt-line:first-child { border-top: 0; }
.receipt-line b { flex: 0 0 45%; text-align: left; font-weight: 800; white-space: nowrap; }
.receipt-line b, .receipt-line > span { line-height: 1.2; }
.receipt-line b i { display: inline-block; width: 18px; color: #2e2930; font-style: normal; font-size: 15px; text-align: center; }
.receipt-line > span { flex: 1 1 auto; text-align: right; color: #4d3c4c; word-break: break-all; }
.receipt-line .amount-value { color: #b94f43; font-weight: 800; }
.empty-value { color: #b68b84 !important; font-style: italic; }
.order-id-line { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 8px 0; border-top: 1px dashed #c9beb1; border-bottom: 1px dashed #c9beb1; font-size: 11px; font-weight: 800; }
.order-id-line span { font-weight: 700; white-space: nowrap; }
.order-id-line code { color: #6d5b68; font: 10px "DM Mono", monospace; word-break: break-all; text-align: right; }
.receipt-note, .receipt-extra { margin-top: 9px; color: #8b7c87; font-size: 9px; line-height: 1.45; }
.receipt-extra { margin-top: 5px; color: #bf5b53; }
.receipt-date-line { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; color: #4d3c4c; font-size: 10px; font-weight: 800; }
.receipt-date-line span:first-child { text-align: left; }
.receipt-date-line span:last-child { color: #6d5b68; font: 10px "DM Mono", monospace; }
.receipt-landscape { position: relative; height: 100px; margin: 7px -5px 0; }
.receipt-landscape svg { width: 100%; height: 100%; fill: none; stroke: #2e2930; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.receipt-landscape svg path { fill: none; }
.receipt-stamp { position: absolute; right: -2px; bottom: 6px; width: 58px; height: 58px; color: #bd5148; transform: rotate(-13deg); }
.receipt-stamp svg { width: 100%; height: 100%; fill: none; stroke: #bd5148; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.receipt-stamp svg circle:not(:first-child), .receipt-stamp svg path { fill: #bd5148; stroke: none; }
.receipt-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 2px; color: #a7969d; font-size: 8px; letter-spacing: .03em; }
.receipt-footer span:first-child, .receipt-footer span:last-child { color: var(--accent); }
.preview-footnote { margin-top: 16px; color: #a0969f; font-size: 11px; }
.preview-footnote span { margin-right: 7px; color: var(--accent-dark); font: 500 10px "DM Mono", monospace; }
.toast { position: fixed; right: 28px; bottom: 24px; z-index: 10; padding: 12px 16px; border-radius: 10px; color: #fffaf1; background: var(--ink); box-shadow: 0 12px 30px rgba(48, 33, 46, .22); font-size: 12px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 980px) {
  .app-shell { padding: 0 26px 40px; }
  .workspace { padding-top: 38px; }
  .studio-grid { grid-template-columns: 1fr; }
  .preview-panel { min-height: 0; }
  .receipt-stage { min-height: 700px; }
}

@media (max-width: 560px) {
  .app-shell { padding: 0 16px 28px; }
  .topbar { height: 72px; }
  .time-chip { font-size: 9px; }
  .intro-row { display: block; margin-bottom: 26px; }
  .step-note { margin-top: 16px; font-size: 10px; }
  h1 { font-size: 34px; }
  .control-panel, .preview-panel { padding: 22px 17px 19px; border-radius: 18px; }
  .panel-heading, .preview-heading { margin-bottom: 20px; }
  .field-grid { gap: 13px 9px; }
  .receipt-stage { min-height: 610px; padding: 10px; }
  .receipt { min-height: 575px; padding: 25px 23px 20px; }
  .receipt-title { font-size: 25px; }
  .receipt-seal { height: 82px; }
  .receipt-seal svg { width: 150px; height: 80px; }
  .receipt-line { font-size: 11px; }
  .receipt-landscape { height: 86px; }
  .action-row { flex-direction: column; }
  .secondary-button { width: 100%; }
  .service-row { align-items: stretch; flex-direction: column; gap: 7px; }
  .service-row > span { text-align: center; }
  .admin-link { font-size:10px; }
  .room-link-row { grid-template-columns:1fr auto; }.room-link-label { grid-column:1 / -1; }.room-link-row a { min-width:0; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* Final receipt typography and input controls. */
.field-label-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.field-label-row .field-label { margin-bottom:0; }
.clear-notice-button { padding:5px 9px; border:1px solid var(--line); border-radius:7px; color:var(--plum); background:rgba(255,255,255,.48); font-size:10px; white-space:nowrap; }
.clear-notice-button:hover { border-color:var(--accent); color:var(--accent-dark); }
.cat-line { display:none; }
.receipt { min-height:700px; padding:34px 36px 28px; }
.receipt-topline { font-size:16px; }
.brand-mini { font-size:18px; letter-spacing:-.02em; }
.receipt-title { font-size:38px; }
.receipt-badge { font-size:14px; }
.receipt-line { min-height:46px; font-size:15px; }
.receipt-line b i { font-size:18px; }
.receipt-note, .receipt-extra { font-size:11.5px; }
.receipt-date-line { font-size:13px; }
.receipt-date-line span:last-child { font-size:12px; }

@media (max-width:620px) {
  .receipt { min-height:635px; padding:30px 24px 24px; }
  .receipt-title { font-size:32px; }
  .receipt-line { min-height:42px; font-size:13px; }
  .receipt-line b i { font-size:16px; }
  .receipt-topline { font-size:14px; }
  .brand-mini { font-size:15px; }
}