@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+TC:wght@400;500;600;700&display=swap');

:root { --ink:#16221e; --muted:#65736d; --line:#e4e8e4; --paper:#fbfcfa; --mint:#e2f4e9; --forest:#123b32; --lime:#b7ed5c; --warning:#a9551f; --rose:#fff0e7; --white:#fff; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,"Noto Sans TC",sans-serif; }
button,input,select { font:inherit; }
button { cursor:pointer; }
.shell { min-height:100vh; }
.topbar { height:76px; padding:0 max(24px,calc((100vw - 1240px)/2)); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:40px; background:rgba(251,252,250,.92); position:sticky; top:0; z-index:2; backdrop-filter:blur(12px); }
.brand { font-size:18px; color:var(--ink); text-decoration:none; font-weight:800; letter-spacing:-.5px; display:flex; gap:9px; align-items:center; white-space:nowrap; }
.brand span { color:var(--forest); display:grid; place-items:center; width:27px; height:27px; background:var(--lime); border-radius:8px; font-family:"DM Mono"; font-size:15px; }
nav { display:flex; gap:8px; margin-right:auto; }
.nav,.back { border:0; background:transparent; color:var(--muted); padding:9px 12px; font-size:14px; font-weight:700; }
.nav.active { color:var(--forest); background:var(--mint); border-radius:8px; }
.primary,.secondary,.mark-paid,.icon-button { border:0; border-radius:9px; font-weight:800; font-size:14px; padding:12px 16px; transition:transform .12s,background .12s; }
.primary { background:var(--forest); color:#fff; box-shadow:0 3px 0 #092219; }.primary:hover{transform:translateY(-1px);background:#0d3028}.primary:active{transform:translateY(2px);box-shadow:none}.compact{padding:10px 14px}
.secondary { background:#eef1ed; color:var(--forest); }.secondary:hover { background:#e2e8e2; }.icon-button { color:var(--forest); background:transparent; padding:8px; }.mark-paid { color:var(--forest); background:var(--lime); padding:8px 10px; }
.page { max-width:1240px; margin:0 auto; padding:64px 24px 90px; }.page-heading,.editor-heading { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:36px; }.page-heading h1,.editor-heading h1 { font-size:clamp(30px,4vw,45px); margin:2px 0 8px; letter-spacing:-2px; line-height:1.1; }.eyebrow { color:#5a7568; text-transform:uppercase; font-family:"DM Mono","Noto Sans TC"; font-size:11px; letter-spacing:.09em; font-weight:500; margin:0 0 8px; }.subtle,.section-note { color:var(--muted); margin:0; font-size:14px; }.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px; }.stat { background:var(--white); border:1px solid var(--line); border-radius:14px; padding:22px; min-height:135px; }.stat p,.stat small { display:block; color:var(--muted); font-size:13px; margin:0; }.stat strong { display:block; margin:12px 0 8px; font-size:27px; letter-spacing:-1.2px; color:var(--forest); }
.grid.two { display:grid; grid-template-columns:1.23fr 1fr; gap:24px; }.panel { background:var(--white); border:1px solid var(--line); border-radius:14px; overflow:hidden; }.panel-title,.section-heading { padding:22px 24px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }.panel h2 { font-size:18px; margin:0; letter-spacing:-.5px; }.panel-title .eyebrow { margin-bottom:4px; }.count { font-family:"DM Mono"; font-size:12px; border-radius:20px; background:var(--mint); color:var(--forest); padding:5px 9px; }.payment-row,.quote-row { display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line); }.payment-row:last-child,.quote-row:last-child { border-bottom:0; }.avatar { width:33px; height:33px; border-radius:50%; background:var(--mint); color:var(--forest); display:grid; place-items:center; font-weight:800; font-size:13px; flex:none; }.payment-copy { margin-right:auto; }.payment-copy strong,.quote-row strong { display:block; font-size:13px; }.payment-copy span,.quote-row span { display:block; color:var(--muted); font-size:12px; margin-top:3px; }.payment-action { text-align:right; }.payment-action strong { display:block; font-family:"DM Mono"; font-size:12px; }.badge { margin-top:5px; display:inline-block!important; padding:3px 6px; border-radius:4px; font-size:10px!important; font-weight:800; }.badge.overdue { color:var(--warning); background:var(--rose); }.badge.upcoming { color:#457340; background:#ecf6d7; }.badge.neutral { color:#56655f; background:#eef1ed; }.quote-row { padding:19px 24px; justify-content:space-between; }.quote-row > div:last-child { text-align:right; }.empty { text-align:center; padding:48px 26px; }.empty-icon { width:38px; height:38px; display:grid; place-items:center; margin:0 auto 15px; border-radius:50%; background:var(--mint); color:var(--forest); font-size:22px; }.empty h3 { margin:0 0 7px; font-size:16px; }.empty p { color:var(--muted); font-size:13px; line-height:1.7; max-width:290px; margin:0 auto 13px; }.text-button { color:var(--forest); background:none; border:0; font-weight:800; padding:5px; }
.table-panel { overflow-x:auto; }table { border-collapse:collapse; width:100%; min-width:670px; font-size:14px; }th { background:#fbfcfa; color:var(--muted); text-align:left; padding:14px 24px; font-size:12px; font-weight:700; }td { border-top:1px solid var(--line); padding:16px 24px; }td .inline { display:inline-grid; vertical-align:middle; margin-right:9px; }.status-select { border:1px solid var(--line); border-radius:6px; padding:6px 8px; background:#fff; font-size:12px; }
.editor { max-width:820px; }.editor-heading { display:block; }.editor-heading .back { margin:-10px 0 25px -12px; }.form-section { margin-bottom:18px; padding-bottom:24px; }.form-section > h2 { padding:24px 24px 0; }.form-section > .section-note { padding:7px 24px 0; }.form-grid { padding:20px 24px 0; display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }label { color:#3f5049; font-size:12px; font-weight:800; display:grid; gap:7px; }input { width:100%; border:1px solid #dbe1dc; background:#fff; color:var(--ink); border-radius:8px; padding:11px 12px; outline:none; font-size:14px; }input:focus { border-color:#4f8a71; box-shadow:0 0 0 3px #e1f1e8; }.section-heading { padding:22px 24px 17px; align-items:flex-start; }.section-heading p { margin:4px 0 0; color:var(--muted); font-size:13px; }.section-heading + #items { border-top:1px solid var(--line); }.line-item { display:grid; grid-template-columns:minmax(0,1fr) 100px 150px 36px; gap:10px; padding:10px 24px; align-items:center; }.line-item:first-child { padding-top:20px; }.remove-item { width:30px; height:30px; background:transparent; color:#829088; border:0; border-radius:6px; font-size:21px; }.remove-item:hover { background:var(--rose); color:var(--warning); }.quote-totals { display:flex; align-items:end; gap:12px; margin:18px 24px 0; padding-top:18px; border-top:1px solid var(--line); }.quote-totals label { width:100px; }.quote-totals div { margin-left:auto; text-align:right; }.quote-totals span { display:block; color:var(--muted); font-size:12px; }.quote-totals strong { display:block; color:var(--forest); font-size:25px; letter-spacing:-1px; }.payments { grid-template-columns:repeat(3,1fr); }.editor-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:24px; }
@media (max-width:760px) { .topbar { height:64px; padding:0 16px; gap:13px; }.brand { font-size:0; }.brand span { font-size:15px; }.topbar nav { gap:1px; }.nav { padding:8px 9px; }.compact { padding:9px 10px; font-size:12px; }.page { padding:38px 16px 70px; }.page-heading { align-items:flex-start; gap:18px; }.page-heading .primary { white-space:nowrap; padding:10px 12px; }.stats,.grid.two { grid-template-columns:1fr; gap:12px; }.stat { min-height:110px; }.stat strong { margin:8px 0 5px; }.payment-row { padding:14px; gap:8px; flex-wrap:wrap; }.payment-copy { min-width:calc(100% - 45px); }.payment-action { margin-left:45px; text-align:left; }.icon-button { margin-left:auto; }.quote-row { padding:16px; }.form-grid,.payments { grid-template-columns:1fr; }.line-item { grid-template-columns:1fr 80px 115px 30px; padding:8px 14px; }.line-item:first-child { padding-top:16px; }.quote-totals { margin:18px 14px 0; flex-wrap:wrap; }.quote-totals div { margin-left:auto; }.section-heading,.panel-title { padding:18px; }.form-section > h2 { padding:20px 18px 0; }.form-section > .section-note,.form-grid { padding-left:18px; padding-right:18px; }.editor-actions { position:sticky; bottom:0; background:var(--paper); padding:14px 0; }.editor-actions .primary { flex:1; }.editor-heading h1 { font-size:32px; } }

.marketing { background:var(--paper); }.marketing-nav { max-width:1120px; height:78px; margin:auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; }.marketing main { overflow:hidden; }.hero { max-width:1120px; margin:auto; padding:104px 24px 96px; background:radial-gradient(circle at 83% 24%,#dff4e7 0,rgba(223,244,231,0) 25%); }.hero h1 { color:var(--forest); font-size:clamp(48px,7vw,84px); letter-spacing:-.075em; line-height:1.03; margin:0 0 22px; }.hero > p:not(.eyebrow) { max-width:530px; color:#4f5e57; font-size:18px; line-height:1.8; margin:0; }.hero-actions { display:flex; align-items:center; gap:26px; margin:35px 0 78px; }.hero-actions .primary,.closing .primary { text-decoration:none; display:inline-block; }.link-action { color:var(--forest); font-size:14px; font-weight:800; text-decoration:none; }.hero-proof { max-width:600px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:0; }.hero-proof div { border-top:1px solid #bfd7c6; padding-top:13px; }.hero-proof dt { color:var(--forest); font-family:"DM Mono"; font-size:19px; font-weight:500; }.hero-proof dd { color:var(--muted); font-size:12px; margin:5px 0 0; }.feature-band { background:var(--forest); color:#fff; display:grid; grid-template-columns:repeat(3,1fr); gap:42px; padding:84px max(24px,calc((100vw - 1072px)/2)); }.feature-band article { border-top:1px solid rgba(255,255,255,.25); padding-top:16px; }.feature-band span { color:var(--lime); font-family:"DM Mono"; font-size:12px; }.feature-band h2 { font-size:21px; letter-spacing:-.7px; margin:34px 0 10px; }.feature-band p { color:#c8d5cf; font-size:14px; line-height:1.8; margin:0; }.closing { text-align:center; padding:110px 24px; }.closing h2 { color:var(--forest); font-size:clamp(30px,4vw,48px); letter-spacing:-.055em; margin:0 auto 29px; max-width:590px; }.marketing footer { color:var(--muted); border-top:1px solid var(--line); font-size:12px; padding:24px; text-align:center; }@media (max-width:700px) { .hero { padding:76px 24px 64px; }.hero-actions { margin:28px 0 55px; }.hero-proof { gap:12px; }.feature-band { grid-template-columns:1fr; gap:32px; padding:58px 24px; }.feature-band h2 { margin-top:18px; }.closing { padding:76px 24px; } }

.auth-control { display:flex; align-items:center; gap:8px; }.sync-status,.mode-chip { background:var(--mint); border-radius:999px; color:var(--forest); font-size:11px; font-weight:800; padding:6px 9px; white-space:nowrap; }.sync-status.syncing { background:#fff1ca; color:#805f00; }.account-button { background:transparent; border:0; color:var(--muted); font-size:12px; max-width:180px; overflow:hidden; padding:7px 0; text-overflow:ellipsis; white-space:nowrap; }.notice { background:#e8f5ed; border-bottom:1px solid #cce4d5; color:var(--forest); font-size:13px; font-weight:700; padding:10px max(24px,calc((100vw - 1240px)/2)); text-align:center; }@media (max-width:760px) { .auth-control { display:none; }.mode-chip { display:none; } }