:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; color:#222831; background:#f1f3f6; font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; }
button, textarea, input { font:inherit; }
.topbar { padding:24px 36px; background:#fff; display:flex; justify-content:space-between; align-items:center; gap:24px; border-bottom:1px solid #dfe3e8; }
.brand { display:flex; align-items:center; gap:14px; }
.brandmark { display:grid; place-items:center; width:44px; height:44px; background:#f83929; color:white; border-radius:12px; font-size:22px; font-weight:700; }
.brand h1 { margin:0; font-size:22px; font-weight:700; letter-spacing:.3px; }
.brand h1 span { font-size:16px; font-weight:400; color:#66707b; margin-left:14px; border-left:1px solid #d9dfe6; padding-left:14px; }
.brand p { color:#66707b; font-size:14px; margin:6px 0 0; }
.header-actions { display:flex; align-items:center; gap:18px; }
.account-bar { display:flex; flex-wrap:wrap; align-items:center; gap:5px 12px; max-width:320px; font-size:13px; color:#64707b; }
.account-bar a { color:#586574; text-decoration:none; white-space:nowrap; }
.account-bar .text-button { padding:0; min-height:30px; color:#35465b; background:none; font-size:13px; font-weight:600; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-bar .text-button:hover:not(:disabled) { color:#a63125; background:none; }
#account-balance { width:100%; text-align:right; }
#access-expiry { width:100%; text-align:right; font-size:12px; color:#487363; }
#copy { white-space:nowrap; }
button { background:#222b38; color:white; border:0; padding:13px 21px; border-radius:8px; font-size:15px; font-weight:600; cursor:pointer; min-height:46px; }
button span { margin-left:12px; }
button:hover:not(:disabled) { background:#111a27; }
button:disabled { background:#e8ebef; color:#8a919c; cursor:not-allowed; }
button:focus-visible, textarea:focus-visible, input:focus-visible, a:focus-visible { outline:3px solid #fca89f; outline-offset:3px; }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; max-width:1600px; padding:24px 36px 12px; margin:auto; }
.panel { background:white; border:1px solid #dde2e8; border-radius:12px; min-width:0; overflow:hidden; display:flex; flex-direction:column; height:calc(100dvh - 181px); min-height:480px; }
.panel-head { display:flex; flex-shrink:0; justify-content:space-between; align-items:center; padding:17px 22px; border-bottom:1px solid #e7eaef; }
.panel-head label, .panel-head h2 { margin:0; font-size:15px; font-weight:650; }
.panel-head span { color:#727c88; font-size:13px; }
textarea { display:block; border:0; resize:none; width:100%; flex:1; min-height:250px; padding:26px; color:#303843; line-height:1.85; font-size:16px; background:white; outline-offset:-4px !important; }
textarea::placeholder { color:#8b939e; }
.panel-foot { flex-shrink:0; border-top:1px solid #e7eaef; padding:12px 20px; color:#697482; font-size:13px; line-height:1.5; }
.preview-scroll { flex:1; overflow:auto; padding:28px 20px; background:#f8f9fb; }
.paper { width:100%; max-width:445px; min-height:100%; padding:22px 20px 34px; margin:0 auto; background:white; border:1px solid #e9ecf0; box-shadow:0 4px 14px #25345005; }
#empty-state { text-align:center; padding:80px 8px; }
.empty-mark { display:block; font:48px Georgia,serif; color:#c3c9d2; margin-bottom:22px; }
#empty-state p { font-size:16px; color:#566270; margin:0 0 12px; }
#empty-state > span:last-child { font-size:14px; color:#818b97; line-height:1.7; }
.page-foot { display:flex; justify-content:space-between; gap:16px; max-width:1600px; margin:auto; padding:4px 38px 18px; color:#727d8a; font-size:13px; line-height:1.6; }
#status { color:#3a526d; text-align:right; }
#status[data-error="true"] { color:#b42a20; }
@media(max-width:800px) { .topbar {padding:20px; gap:16px; flex-wrap:wrap;} .brand h1 {font-size:20px;} .brand h1 span {font-size:14px;} .header-actions {justify-content:space-between; width:100%;} .workspace {padding:16px; grid-template-columns:1fr; gap:16px;} .panel {height:55dvh; min-height:360px;} .preview-panel {height:auto; min-height:460px;} .preview-scroll {padding:16px 12px; max-height:70dvh;} .paper {padding:18px 14px 28px;} .page-foot {padding:0 20px 24px; flex-direction:column; gap:8px;} #status {text-align:left;} }
@media(prefers-reduced-motion:no-preference) { button {transition:background .15s;} }

/* Three concise hints remain visible while users edit in place. */
.quick-help {display:flex;flex-wrap:wrap;gap:8px 18px;padding:12px 20px;border-bottom:1px solid #e7eaef;background:#fafbfd;flex-shrink:0;color:#697482;font-size:13px;line-height:1.8;}
.quick-help > span {white-space:nowrap;}
.quick-help code {font-family:Consolas,monospace;font-size:14px;color:#303e4e;background:#edf0f4;border-radius:4px;padding:3px 5px;margin-right:4px;}
@media(max-width:800px){.quick-help{gap:5px 12px;padding:10px 16px;}}

/* Payment is confirmed only at copy time; editing remains available. */
dialog { width:min(440px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:0; border:1px solid #e0e4eb; border-radius:16px; box-shadow:0 22px 90px #15253935; color:#222831; }
dialog::backdrop { background:#1a263b66; }
.dialog-content { padding:26px; }
.dialog-content h2 { margin:0 0 10px; font-size:21px; }
.dialog-content > p { line-height:1.65; font-size:14px; color:#66707b; margin:0 0 18px; }
#identity-fields > label { display:block; font-size:14px; color:#4b596a; margin-bottom:9px; }
.identity-query { display:flex; gap:10px; }
.identity-query input { min-width:0; width:100%; border:1px solid #ced5df; border-radius:8px; padding:10px 12px; font-size:16px; }
.identity-query button { flex-shrink:0; }
.account-options { display:grid; gap:8px; margin-top:12px; }
.account-options button { display:flex; justify-content:space-between; gap:12px; width:100%; color:#334156; background:#f1f4f8; text-align:left; font-weight:500; overflow-wrap:anywhere; }
.account-options button:hover { background:#e8edf5; }
.account-options button span { margin:0; flex-shrink:0; font-size:13px; color:#68758a; }
#payment-summary { margin:18px 0; padding:16px; background:#f5f7fa; border-radius:10px; font-size:14px; }
#payment-summary > div { display:flex; justify-content:space-between; gap:18px; margin:0 0 13px; }
#payment-summary > div:last-child { margin-bottom:0; }
#payment-summary dt { color:#697482; flex-shrink:0; }
#payment-summary dd { margin:0; font-weight:600; text-align:right; overflow-wrap:anywhere; }
.dialog-content .payment-message { min-height:22px; margin:10px 0 18px; color:#3a526d; font-size:13px; }
.payment-message[data-error="true"] { color:#b42a20; }
.dialog-actions { display:flex; gap:10px; }
.dialog-actions button { flex:1; padding:12px 9px; }
.secondary-button { background:#edf0f4; color:#526173; }
.secondary-button:hover:not(:disabled) { background:#e2e7ee; }
@media(max-width:1050px) { .topbar {flex-wrap:wrap;} .header-actions {margin-left:auto;} }
@media(max-width:800px) { .header-actions {align-items:flex-end; gap:12px;} .account-bar {gap:3px 10px; max-width:none; min-width:0;} #account-balance,#access-expiry {text-align:left;} #copy {font-size:13px; padding:12px 13px;} .account-bar .text-button {max-width:115px;} }
@media(max-width:360px) { .topbar {padding:18px 14px;} .brand {gap:10px;} .brandmark {width:38px;height:38px;} .brand h1 span {margin-left:8px;padding-left:8px;} .dialog-content {padding:20px;} .dialog-actions button {font-size:14px;} }