/* CTRL SPACE Tools — matches ctrlspace.xyz design system */

:root {
  --bg:        #faf9f6;
  --panel-mobile-bg: rgba(250, 249, 246, 0.01);
  --bg-2:      #f1efe8;
  --ink:       #18170f;
  --ink-soft:  #3a382f;
  --muted:     #6f6c61;
  --line:      rgba(24, 23, 15, 0.13);
  --line-2:    rgba(24, 23, 15, 0.08);
  --accent:    #c2f03a;
  --accent-d:  #a9d91f;
  --on-accent: #18170f;
  --block:     #18170f;
  --on-block:  #faf9f6;
  --nav-bg:    rgba(250, 249, 246, 0.88);
  --surface:   #fff;
  --panel-w:   320px;

  --font:  'Mona Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --label: 'Space Grotesk', system-ui, sans-serif;
  --cjk:   'Noto Sans TC', 'Mona Sans', sans-serif;
  --mono:  ui-monospace, 'SF Mono', 'Fira Mono', monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="dark"] {
  --bg:        #100f0a;
  --panel-mobile-bg: rgba(16, 15, 10, 0.01);
  --bg-2:      #18170f;
  --ink:       #f4f2ea;
  --ink-soft:  #cecabf;
  --muted:     #918d82;
  --line:      #35342f;
  --line-2:    #26251f;
  --accent:    #cdf24f;
  --accent-d:  #b8e63a;
  --on-accent: #16150f;
  --block:     #f4f2ea;
  --on-block:  #100f0a;
  --nav-bg:    rgba(16, 15, 10, 0.88);
  --surface:   #1a1910;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: 14px;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ── Nav ── */
.topbar {
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
}

.topbar-left { display: flex; align-items: center; gap: 16px; }
.topbar .btn-ghost,
.topbar .btn-print {
  height: 40px;
  min-height: 0;
  padding: 0;
  font-size: 13px;
  border-radius: 13px;
  justify-content: center;
}
.topbar .btn-ghost { width: 80px; }
.topbar .btn-print { width: auto; min-width: 89px; padding: 0 14px; gap: 6px; }
.topbar .theme-toggle { width: 40px; height: 40px; border-radius: 13px; }
.topbar .theme-toggle svg { width: 20px; height: 20px; }
.topbar .lang { height: 40px; padding: 3px; border-radius: 13px; }
.topbar .lang::before { top: 3px; left: 3px; width: calc(50% - 3px); height: calc(100% - 6px); border-radius: 10px; }
.topbar .lang button { width: 34px; height: 32px; font-size: 13px; border-radius: 10px; }

.topbar-logo { display: flex; align-items: center; }
.topbar-logo .lg { height: 40px; display: block; }
.topbar-logo .lg-dark { display: none; }
[data-theme="dark"] .topbar-logo .lg-light { display: none; }
[data-theme="dark"] .topbar-logo .lg-dark  { display: block; }

.topbar-actions { display: flex; gap: 10px; align-items: center; }

/* Lang switch */
.lang {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 3px;
  position: relative;
}
.lang::before {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  background: var(--ink);
  border-radius: 2px;
  pointer-events: none;
  transition: transform 0.2s cubic-bezier(0.22,1,0.36,1);
}
[data-lang="cn"] .lang::before { transform: translateX(100%); }
.lang button {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  width: 36px;
  padding: 5px 0;
  text-align: center;
  border-radius: 2px;
  color: var(--muted);
  position: relative;
  z-index: 1;
}
.lang button.on { color: var(--bg); }

/* Theme toggle */
.theme-toggle {
  width: 48px; height: 48px;
  border-radius: 16px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  color: var(--ink);
  transition: background 0.15s;
}
@media (hover: hover) { .theme-toggle:hover { background: var(--bg-2); } }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun  { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }

.btn-print {
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 600;
  border: 1.5px solid transparent;
  border-radius: 16px;
  height: 48px;
  padding: 0 17px;
  cursor: pointer;
  letter-spacing: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.15s;
}
@media (hover: hover) { .btn-print:hover { background: var(--accent-d); } }
.btn-print:disabled,
.btn-print.is-loading {
  background: #d9ff70;
  color: var(--on-accent);
  cursor: progress;
  pointer-events: none;
}
.loading-icon {
  animation: ctrltools-spin 0.65s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}
@keyframes ctrltools-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.btn-ghost {
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  height: 51px;
  padding: 0 16px;
  cursor: pointer;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1;
  transition: border-color 0.15s, color 0.15s;
}
@media (hover: hover) { .btn-ghost:hover { border-color: var(--ink); } }

/* ── Layout ── */
.layout {
  display: grid;
  grid-template-columns: var(--panel-w) 1fr;
  height: 100vh;
  padding-top: 72px;
}

/* ── Form Panel ── */
.form-panel {
  background: var(--bg);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  padding: 20px 18px 48px;
}

.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--ink);
  margin-bottom: 20px;
}
.panel-title .cn-part { font-weight: 900; font-family: var(--cjk); }
.panel-clear-btn {
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .panel-clear-btn:hover {
    color: var(--ink);
    border-color: var(--ink);
    background: var(--bg-2);
  }
}

.panel-clear-btn:active {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--bg-2);
}

.panel-clear-btn:focus-visible {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--bg-2);
  outline: 2px solid var(--ink-soft);
  outline-offset: 2px;
}

.panel-section { margin-bottom: 24px; }

.panel-section-title {
  font-family: var(--label);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}

.field { margin-bottom: 12px; }

.field label {
  display: block;
  font-family: var(--label);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s, background 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' stroke-width='1.5' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 4V2M15 4V6M15 4H10.5M3 10V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V10H3Z' stroke='%2318170f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3 10V6C3 4.89543 3.89543 4 5 4H7' stroke='%2318170f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 2V6' stroke='%2318170f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M21 10V6C21 4.89543 20.1046 4 19 4H18.5' stroke='%2318170f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  opacity: 1;
}
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' stroke-width='1.5' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 4V2M15 4V6M15 4H10.5M3 10V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V10H3Z' stroke='%23f4f2ea' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3 10V6C3 4.89543 3.89543 4 5 4H7' stroke='%23f4f2ea' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 2V6' stroke='%23f4f2ea' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M21 10V6C21 4.89543 20.1046 4 19 4H18.5' stroke='%23f4f2ea' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.field select {
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.30711 8.71299C5.4232 8.43273 5.69668 8.25 6.00002 8.25H18C18.3034 8.25 18.5768 8.43273 18.6929 8.71299C18.809 8.99324 18.7449 9.31583 18.5304 9.53033L12.5304 15.5303C12.2375 15.8232 11.7626 15.8232 11.4697 15.5303L5.46969 9.53033C5.25519 9.31583 5.19103 8.99324 5.30711 8.71299Z' fill='%2318170f'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

[data-theme="dark"] .field select {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.30711 8.71299C5.4232 8.43273 5.69668 8.25 6.00002 8.25H18C18.3034 8.25 18.5768 8.43273 18.6929 8.71299C18.809 8.99324 18.7449 9.31583 18.5304 9.53033L12.5304 15.5303C12.2375 15.8232 11.7626 15.8232 11.4697 15.5303L5.46969 9.53033C5.25519 9.31583 5.19103 8.99324 5.30711 8.71299Z' fill='%23f4f2ea'/%3E%3C/svg%3E");
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--ink-soft);
  background: var(--surface);
}

.field textarea { resize: vertical; min-height: 52px; line-height: 1.5; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ── Preview Panel ── */
.preview-drawer-handle { display: none; }
.preview-close-btn { display: none; }
.preview-print-btn { display: none; }

.preview-panel {
  background: var(--bg-2);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 24px;
  gap: 20px;
}

/* Live master: off-screen, used for JS measurement & updates */
.preview-master {
  position: fixed !important;
  top: -99999px !important;
  left: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Wrapper that holds N page frames */
.preview-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: auto;
}

/* Each A4-height frame shown in the preview */
.preview-page-frame {
  width: 210mm;
  height: 297mm;
  padding: 14mm 22mm 18mm;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0 2px 32px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.05);
  border-radius: 2px;
  flex-shrink: 0;
  position: relative;
  transform-origin: top center;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Content window clips clone to exactly 265mm (the content area) */
/* Padding-bottom area below is left clear for the footer overlay */
.preview-content-window {
  height: 265mm;
  overflow: hidden;
}

/* Clone inside each frame: strip padding (frame owns it), width fills content area */
.preview-page[data-pageclone] {
  padding: 0 !important;
  width: 100% !important;
  min-height: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Hide doc-pagenum inside clones — frame renders its own per-page footer */
.preview-page[data-pageclone] .doc-pagenum { display: none !important; }

/* Per-page footer overlay pinned to bottom of each frame */
.frame-pagenum {
  position: absolute;
  bottom: 10mm;
  left: 22mm;
  right: 22mm;
  display: flex;
  justify-content: space-between;
  font-size: 7.5pt;
  color: #aaa;
  font-family: var(--font);
  letter-spacing: 0.01em;
}
.frame-pagenum .cn-part { display: none; }
[data-doclang="cn"] .frame-pagenum .cn-part { display: inline; }
[data-doclang="cn"] .frame-pagenum .en-part { display: none; }

/* Language control for footer cloned into frame */
.preview-page-frame[data-doclang="en"] .doc-footer .cn-part { display: none; }
.preview-page-frame[data-doclang="cn"] .doc-footer .en-part { display: none; }


.preview-page {
  background: #fff;
  color: #111;
  width: 210mm;
  min-height: 297mm;
  padding: 14mm 22mm 18mm;
  box-shadow: 0 2px 32px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.05);
  flex-shrink: 0;
  border-radius: 2px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ── Landing ── */
.landing {
  max-width: 960px;
  margin: 0 auto;
  padding: 132px 28px 88px;
}

.landing-hero {
  margin-bottom: 60px;
}

.landing-eyebrow {
  font-family: var(--label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
  display: block;
}

.landing-hero h1 {
  font-family: var(--font);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 200;
  letter-spacing: -2px;
  line-height: 1.15;
  margin-bottom: 14px;
  color: var(--ink);
}

.landing-hero h1 .cn-part { font-family: var(--cjk); font-weight: 200; }
.landing-hero h1 .accent {
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.08em;
}
.landing-hero h1 .cn-part .accent { font-weight: 900; }

.landing-hero p {
  font-size: 15px;
  color: var(--muted);
  max-width: 600px;
  line-height: 1.6;
  font-weight: 400;
}

.hero-mobile-br { display: none; }
.hero-tiny-br   { display: none; }
.hero-not-mobile-br { display: block; }

.tools-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.tool-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 28px 24px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
  display: block;
}

@media (hover: hover) {
  .tool-card:hover {
    border-color: var(--ink-soft);
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
    transform: translateY(-2px);
  }
}

.tool-card-icon {
  font-size: 24px;
  margin-bottom: 16px;
  display: block;
}

.tool-card h2 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}

.tool-card p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  font-weight: 400;
}

.tool-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 20px;
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.1px;
  color: var(--on-accent);
  background: var(--accent);
  padding: 10px 18px;
  border-radius: 16px;
  transition: background 0.15s;
}
@media (hover: hover) { .tool-card-cta:hover { background: var(--accent-d); } }

.landing-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 28px 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
  font-family: var(--font);
  background: var(--bg);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.footer-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.landing-footer .footer-main,
.landing-footer .footer-tagline,
.landing-footer .footer-copy { color: var(--muted); font-weight: 400; }

.landing-footer a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.footer-tos {
  opacity: 0.7;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

/* ── Document styles (shared, always light) ── */
.preview-page * { font-family: 'Mona Sans', 'Noto Sans TC', sans-serif; }
.doc-title,
.doc-title *,
.doc-footer,
.doc-footer *,
.frame-pagenum,
.frame-pagenum * { font-family: 'Space Grotesk', 'Noto Sans TC', sans-serif; }

.doc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 5mm;
  border-bottom: 4px solid #111;
  margin-bottom: 7mm;
}

.doc-title {
  font-size: 30pt;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
  text-transform: uppercase;
  color: #111;
}

#invoicePreview .doc-title { font-size: 40pt; }

/* Contract */
.parties { margin-bottom: 8mm; font-size: 9.5pt; line-height: 1.8; color: #111; }
.parties p + p { margin-top: 3px; }

.section { margin-bottom: 7mm; }

.section-title {
  font-size: 10pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 3mm;
  padding-bottom: 2mm;
  border-bottom: 1px solid #111;
  color: #111;
}

.clause-block {
  margin-bottom: 4mm;
  padding-left: 5mm;
  font-size: 9pt;
  line-height: 1.65;
  color: #111;
}
.clause-num { font-weight: 600; margin-right: 3px; }
.en { margin-bottom: 1.5mm; }
.cn { color: #111; }

ul.items { list-style: none; margin: 2mm 0 2mm 3mm; }
ul.items li { padding-left: 10px; position: relative; margin-bottom: 1.5mm; font-size: 9pt; color: #111; }
ul.items li::before { content: "•"; position: absolute; left: 0; }
.item-en { display: block; }
.item-cn { display: block; color: #444; }

.wire-box { border: 1px solid #ccc; padding: 3mm 4mm; margin: 5mm 0; background: #fafafa; }
.wire-box-title { font-weight: 700; font-size: 8pt; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2mm; color: #666; }
.wire-row { display: flex; margin-bottom: 1.5mm; font-size: 9pt; }
.wire-label { width: 58mm; color: #666; flex-shrink: 0; }
.wire-value { font-weight: 500; border-bottom: 1px solid #bbb; flex: 1; padding-bottom: 1px; color: #111; }

.sig-section { margin-top: 20mm; }
.sig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10mm; margin-top: 4mm; }
.sig-col { display: flex; flex-direction: column; gap: 7mm; }
.sig-label { font-size: 9pt; color: #666; margin-bottom: 1mm; }
.sig-line { border-bottom: 1px solid #ccc; height: 10mm; }
.sig-line-sm { border-bottom: 1px solid #ccc; height: 5mm; font-size: 9.5pt; display: flex; align-items: flex-end; padding-bottom: 1px; color: #111; }
.sig-field-label { font-size: 8pt; color: #999; margin-top: 1mm; }

/* Invoice */
.billed-section { margin-bottom: 8mm; }
.billed-label { font-size: 8pt; font-weight: 700; margin-bottom: 2mm; color: #111; }
.billed-grid { display: grid; grid-template-columns: 1fr 1fr 36mm; }
.billed-col-label { font-size: 8pt; color: #888; margin-bottom: 1mm; }
.billed-col-value { font-size: 10pt; font-weight: 700; color: #111; }

.items-table { width: 100%; border-collapse: collapse; }
.items-table thead tr { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.items-table th { font-size: 8pt; font-weight: 400; color: #888; padding: 2.5mm 0; text-align: left; }
.items-table th.right, .items-table td.right { text-align: right; }
.items-table td { padding: 3.5mm 0; font-size: 9pt; vertical-align: top; border-bottom: 1px solid #eee; color: #111; }
.th-qty { width: 16mm; text-align: right; }
.th-price { width: 24mm; text-align: right; }
.th-sub { width: 22mm; text-align: right; }
.item-name { font-weight: 700; display: block; margin-bottom: 1mm; color: #111; }
.item-desc { font-size: 8pt; color: #888; display: block; word-break: break-word; overflow-wrap: break-word; white-space: pre-wrap; max-width: 100%; }

.total-rows { margin: 2mm 0 8mm; }
.total-row { display: flex; justify-content: flex-end; gap: 18mm; padding: 1.5mm 0; }
.total-label { font-size: 9pt; color: #666; }
.total-amount { font-size: 9pt; color: #666; width: 22mm; text-align: right; }
.total-due .total-label, .total-due .total-amount { font-weight: 700; font-size: 10pt; color: #111; }

.payment-section { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 4mm 0; margin-top: 8mm; }
.payment-label { font-weight: 700; font-size: 8pt; margin-bottom: 2mm; color: #111; }
.payment-line { font-size: 8.5pt; color: #444; line-height: 1.9; }

.doc-footer { padding: 8mm 0 0; border-top: 4px solid #111; margin-top: auto; font-family: 'Space Grotesk', 'Noto Sans TC', sans-serif; }
.thanks { font-size: 26pt; font-weight: 700; text-transform: uppercase; letter-spacing: -0.5px; line-height: 1; margin-bottom: 3mm; color: #111; }
.thanks .cn-part { font-weight: 800; }
.doc-footer .footer-tagline { font-weight: 700; font-size: 9pt; margin-bottom: 2mm; color: #111; }
.footer-contact { font-size: 8.5pt; color: #555; }

.doc-pagenum { display: flex; justify-content: space-between; font-size: 7.5pt; color: #aaa; margin-top: 8mm; }

/* ── Form field language visibility (controlled by global UI language) ── */
.field[data-lang-field="cn"] { display: none; }
[data-lang="cn"] .field[data-lang-field="cn"] { display: block; }
[data-lang="cn"] .field[data-lang-field="en"] { display: none; }

/* ── i18n: Form UI (controlled by data-lang on <html>) ── */
.form-panel .cn-part,
.topbar .cn-part,
.exit-modal .cn-part,
.landing .cn-part,
.preview-drawer-handle .cn-part,
.preview-print-btn .cn-part { display: none; }
[data-lang="cn"] .form-panel .cn-part,
[data-lang="cn"] .topbar .cn-part,
[data-lang="cn"] .exit-modal .cn-part,
[data-lang="cn"] .landing .cn-part,
[data-lang="cn"] .preview-drawer-handle .cn-part,
[data-lang="cn"] .preview-print-btn .cn-part { display: inline; }
[data-lang="cn"] .form-panel .en-part,
[data-lang="cn"] .topbar .en-part,
[data-lang="cn"] .exit-modal .en-part,
[data-lang="cn"] .landing .en-part,
[data-lang="cn"] .preview-drawer-handle .en-part,
[data-lang="cn"] .preview-print-btn .en-part { display: none; }

/* ── i18n: Document language (controlled by data-doclang on #contractPreview) ── */

/* Labels (en-part/cn-part): EN by default in bilingual + EN mode; CN only in full CN mode */
#contractPreview .cn-part,
.preview-page-frame .cn-part { display: none; }
#contractPreview[data-doclang="cn"] .cn-part,
.preview-page-frame[data-doclang="cn"] .cn-part { display: inline; }
#contractPreview[data-doclang="bilingual"] .section-title .cn-part,
.preview-page-frame[data-doclang="bilingual"] .section-title .cn-part {
  display: inline-block;
  margin-left: 2.5mm;
}
#contractPreview[data-doclang="bilingual"] .section-title .cn-section-num,
.preview-page-frame[data-doclang="bilingual"] .section-title .cn-section-num { display: none; }
#contractPreview[data-doclang="cn"] .en-part,
.preview-page-frame[data-doclang="cn"] .en-part { display: none; }

/* Body text (en/cn paragraphs): hide the non-matching language in single-lang modes */
#contractPreview[data-doclang="en"] .cn,
#contractPreview[data-doclang="en"] .item-cn,
.preview-page-frame[data-doclang="en"] .cn,
.preview-page-frame[data-doclang="en"] .item-cn { display: none; }

#contractPreview[data-doclang="cn"] .en,
#contractPreview[data-doclang="cn"] .item-en,
.preview-page-frame[data-doclang="cn"] .en,
.preview-page-frame[data-doclang="cn"] .item-en { display: none; }
#contractPreview[data-doclang="cn"] .cn,
.preview-page-frame[data-doclang="cn"] .cn { color: #111; margin-bottom: 1.5mm; }
#contractPreview[data-doclang="cn"] .item-cn,
.preview-page-frame[data-doclang="cn"] .item-cn { color: #111; }

/* ── i18n: Invoice preview ── */
/* EN-only mode: hide CN */
#invoicePreview[data-doclang="en"] .cn-part { display: none; }
/* CN-only mode: hide EN */
#invoicePreview[data-doclang="cn"] .en-part { display: none; }
/* Bilingual mode: show both with "/" separator */
#invoicePreview[data-doclang="bilingual"] .cn-part { display: inline; }
#invoicePreview[data-doclang="bilingual"] .cn-part::before { content: " / "; color: #aaa; font-weight: 400; }
/* Doc title: bilingual shows EN only; CN shows Chinese */
#invoicePreview .doc-title .cn-part { display: none; }
#invoicePreview[data-doclang="cn"] .doc-title .cn-part { display: block; }
#invoicePreview[data-doclang="bilingual"] .doc-title .cn-part { display: none; }

/* ── Line items (invoice form) ── */
.line-item {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
}
.line-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.line-item-num {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-soft);
}
.remove-item-btn {
  background: none;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 13px;
  padding: 0 2px;
  line-height: 1;
}
.add-item-btn {
  width: 100%;
  padding: 9px;
  border: 1.5px dashed var(--line);
  border-radius: 10px;
  background: none;
  color: var(--ink-soft);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  margin-top: 2px;
}
@media (hover: hover) {
  .remove-item-btn:hover { color: var(--ink); }
  .add-item-btn:hover { border-color: var(--ink); color: var(--ink); }
}

/* ── Invoice table # column ── */
.th-num, .td-num { width: 22px; color: #999; font-size: 8pt; }

/* Clause 8.2: only show in bilingual mode */
#contractPreview[data-doclang="en"] .clause-bilingual-only,
#contractPreview[data-doclang="cn"] .clause-bilingual-only,
.preview-page-frame[data-doclang="en"] .clause-bilingual-only,
.preview-page-frame[data-doclang="cn"] .clause-bilingual-only { display: none; }

/* Doc title: show CN only in CN mode */
.doc-title .cn-part { display: none; }
#contractPreview[data-doclang="cn"] .doc-title .cn-part,
.preview-page-frame[data-doclang="cn"] .doc-title .cn-part { display: block; }

/* ── File upload ── */
.file-upload { display: flex; align-items: center; gap: 10px; }
.file-upload-btn {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s;
  flex-shrink: 0;
}
@media (hover: hover) { .file-upload-btn:hover { border-color: var(--ink); } }
.file-upload-name {
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-upload-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  margin-left: -8px;
  transition: color 0.15s;
}
@media (hover: hover) { .file-upload-clear:hover { color: var(--ink); } }

/* ── Exit confirmation modal ── */
.exit-scrim {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(16,15,9,0.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s var(--ease);
}
.exit-scrim.open { opacity: 1; pointer-events: auto; }
.exit-modal {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px;
  max-width: 360px;
  width: 100%;
  transform: translateY(12px);
  transition: transform 0.25s var(--ease);
}
.exit-scrim.open .exit-modal { transform: none; }
.exit-modal-title {
  font-size: 18px; font-weight: 800;
  letter-spacing: -0.3px; margin-bottom: 8px;
}
.exit-modal-body {
  font-size: 14px; color: var(--muted);
  line-height: 1.55; margin-bottom: 24px;
}
.exit-modal-actions { display: flex; gap: 10px; justify-content: center; align-items: center; }
.modal-btn-fill { flex: 1; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.btn-print.modal-btn-fill { border: 1.5px solid transparent; }

/* Print */
.doc-logo-placeholder {
  height: 56px;
  min-width: 120px;
  border: 1.5px dashed #bbb;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9pt;
  color: #bbb;
  letter-spacing: 0.02em;
  padding: 0 16px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .tools-grid {
    grid-template-columns: 1fr;
  }

  .hero-mobile-br     { display: block; }
  .hero-not-mobile-br { display: none; }

  .landing {
    padding-bottom: 0;
  }

  .topbar-left .topbar-logo { display: none; }
  .topbar .btn-ghost { width: 40px; }
  .topbar .btn-ghost .en-part,
  .topbar .btn-ghost .cn-part { display: none !important; }
  .topbar .btn-print { width: 40px; min-width: 0; padding: 0; }
  .topbar .btn-print .btn-text { display: none; }
  .topbar .btn-print .btn-icon { width: 20px; height: 20px; flex-shrink: 0; }
  .topbar .btn-print .btn-text { display: none; }
  .topbar .btn-print .btn-icon { display: block; }

  .landing-footer {
    position: static;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 24px 28px 48px;
    margin-top: 80px;
    margin-left: -28px;
    margin-right: -28px;
  }
  .footer-left { display: contents; }
  .footer-tos   { order: 1; align-items: flex-start; margin-top: 0; }
  .footer-main  { order: 2; margin-top: 18px; }
  .footer-tagline { display: block; margin-top: 8px; }
  .footer-copy  { order: 3; margin-top: 18px; }

  /* ── Mobile layout: form full-width, preview button at bottom ── */
  .layout {
    display: block;
    height: auto;
    padding-top: 72px;
  }
  .form-panel {
    width: 100vw;
    border-right: none;
    overflow-y: visible;
    padding-bottom: 88px;
  }
  .field input,
  .field select,
  .field textarea {
    font-size: 16px;
  }
  .preview-panel {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 72px;
    z-index: 200;
    border: none;
    border-radius: 0;
    background: var(--panel-mobile-bg);
    box-shadow: none;
    padding: 12px 16px;
    gap: 0;
    overflow: hidden;
    align-items: center;
    flex-direction: column;
    transition: height 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.2s ease;
  }
  .preview-panel:not(.preview-open) .preview-pages {
    visibility: hidden;
  }
  .preview-panel.preview-open {
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
    border-radius: 16px 16px 0 0;
    border: 1px solid var(--line);
    border-bottom: none;
    background: var(--bg-2);
    box-shadow: none;
    padding: 20px 20px calc(152px + env(safe-area-inset-bottom));
  }
  .preview-panel.preview-open .preview-pages {
    margin: 0 auto;
    align-items: flex-start;
  }

  /* Preview trigger button */
  .preview-drawer-handle {
    width: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    min-height: 48px;
    flex-shrink: 0;
    cursor: pointer;
    background: var(--block);
    color: var(--on-block);
    border-radius: 12px;
    padding: 0 20px;
  }
  .preview-panel.preview-open .preview-drawer-handle {
    display: none;
  }
  .preview-drawer-pill {
    display: none;
  }
  .preview-drawer-label {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--on-block);
    font-family: var(--font);
    letter-spacing: 0;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .preview-drawer-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  /* Close button — top-right corner, visible only when open */
  .preview-close-btn {
    display: none;
  }
  .preview-panel.preview-open .preview-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 16px;
    align-self: flex-end;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--bg-2);
    border: 1.5px solid var(--line);
    color: var(--ink);
    cursor: pointer;
    flex-shrink: 0;
    margin-bottom: -40px;
    z-index: 10;
  }

  .preview-panel.preview-open .preview-print-btn {
    display: flex;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(20px + env(safe-area-inset-bottom));
    width: auto;
    border-radius: 12px;
    padding: 0 20px;
    margin-top: 20px;
    flex-shrink: 0;
    z-index: 220;
  }
}

@media (min-width: 769px) and (max-width: 1170px) {
  .preview-panel {
    overflow-x: hidden;
    align-items: center;
    padding-bottom: 96px;
  }
  .preview-pages {
    margin-left: auto;
    margin-right: auto;
    align-items: flex-start;
  }
}

@media (max-width: 369px) {
  .hero-tiny-br { display: block; }
}

@media print {
  .topbar, .form-panel { display: none !important; }
  .layout { display: block !important; padding-top: 0 !important; }
  .preview-panel {
    display: block !important;
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    bottom: auto !important;
    z-index: auto !important;
  }
  .preview-pages {
    display: flex !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    gap: 0 !important;
    margin: 0 !important;
  }
  .preview-master { display: none !important; }
  .preview-drawer-handle,
  .preview-close-btn,
  .preview-print-btn,
  .exit-scrim { display: none !important; }
  .preview-page-frame {
    width: 100% !important;
    height: 297mm !important;
    padding: 14mm 22mm 18mm !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transform: none !important;
    margin-bottom: 0 !important;
  }
  .preview-content-window {
    height: 265mm;
    overflow: hidden;
  }
  .preview-page-frame + .preview-page-frame { break-before: page; }
  @page { size: A4; margin: 0; }
  .doc-pagenum { display: none; }
  .frame-pagenum { display: flex; }
  .doc-logo-placeholder { display: none !important; }
  .payment-section { break-inside: avoid; }
  .doc-footer { break-inside: avoid; break-before: avoid; }
}