:root {
  color-scheme: light;
  --ink: #151927;
  --muted: #73798a;
  --subtle: #9ca2b1;
  --line: #e6e8ef;
  --surface: #ffffff;
  --canvas: #f4f6fb;
  --brand: #6547e8;
  --brand-dark: #5133ce;
  --brand-soft: #f0edff;
  --success: #16a477;
  --danger: #dc4d5a;
  --shadow-sm: 0 1px 2px rgba(20, 24, 40, .04), 0 5px 16px rgba(20, 24, 40, .045);
  --shadow-md: 0 12px 32px rgba(39, 31, 77, .09);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--canvas); }

body {
  width: 430px;
  min-height: 600px;
  max-height: 800px;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

body::-webkit-scrollbar, .pdf-preview::-webkit-scrollbar, .file-list::-webkit-scrollbar { width: 6px; height: 6px; }
body::-webkit-scrollbar-thumb, .pdf-preview::-webkit-scrollbar-thumb, .file-list::-webkit-scrollbar-thumb { border-radius: 99px; background: #cfd3de; }

button, input, textarea, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(101, 71, 232, .16); outline-offset: 1px; }
svg { display: block; }

.shell { min-height: 600px; display: flex; flex-direction: column; background: var(--canvas); }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(225, 227, 235, .82);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
}

.brand-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: white;
  background: linear-gradient(145deg, #8065f5, #5635d6);
  box-shadow: 0 8px 20px rgba(91, 58, 214, .24), inset 0 1px 0 rgba(255,255,255,.24);
}
.brand-mark svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.brand-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.15; }
.brand-copy strong { font-size: 15px; font-weight: 780; letter-spacing: -.02em; }
.brand-copy span { margin-top: 4px; color: var(--muted); font-size: 10px; }
.header-actions { display: flex; flex-direction: column; align-items: stretch; gap: 5px; flex: 0 0 auto; max-width: 130px; }
.language-select { min-height: 30px; width: 100%; padding: 4px 7px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font-size: 11px; cursor: pointer; }
.header-actions .account-toggle { max-width: 130px; }
html:lang(zh) { line-break: strict; }
html:lang(zh) .eyebrow { letter-spacing: .04em; }

#catalogView { flex: 1; padding-bottom: 8px; }

.hero {
  position: relative;
  overflow: hidden;
  margin: 14px 16px 14px;
  padding: 21px 20px 22px;
  border: 1px solid rgba(101, 71, 232, .10);
  border-radius: 22px;
  background: linear-gradient(135deg, #ffffff 0%, #f4f0ff 100%);
  box-shadow: var(--shadow-sm);
}
.hero::before { content: ""; position: absolute; width: 150px; height: 150px; right: -65px; top: -80px; border-radius: 50%; background: radial-gradient(circle, rgba(125,96,239,.18), rgba(125,96,239,0) 68%); }
.hero::after { content: ""; position: absolute; width: 90px; height: 90px; right: 25px; bottom: -65px; border-radius: 50%; background: rgba(255,255,255,.7); }
.hero > * { position: relative; z-index: 1; }
.hero-tag { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; padding: 5px 8px; border-radius: 99px; color: var(--brand-dark); background: rgba(255,255,255,.76); box-shadow: inset 0 0 0 1px rgba(101,71,232,.11); font-size: 9px; font-weight: 760; letter-spacing: .02em; }
.hero-tag span { width: 6px; height: 6px; border-radius: 50%; background: #7455e9; box-shadow: 0 0 0 3px rgba(116,85,233,.11); }
.hero h1 { margin: 0; max-width: 320px; font-size: 25px; line-height: 1.12; letter-spacing: -.038em; }
.hero > p { margin: 9px 0 0; max-width: 330px; color: var(--muted); font-size: 12px; line-height: 1.5; }

.eyebrow { margin: 0 0 5px; color: var(--brand); font-size: 9px; font-weight: 800; letter-spacing: .105em; text-transform: uppercase; }

.search {
  height: 45px;
  margin: 0 16px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--subtle);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color .16s, box-shadow .16s;
}
.search:focus-within { border-color: #aaa0ed; box-shadow: 0 0 0 4px rgba(101,71,232,.10), var(--shadow-sm); }
.search svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.search input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
.search input::placeholder { color: #a1a6b3; }

.filters { display: flex; gap: 7px; padding: 13px 16px 11px; overflow-x: auto; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filter { flex: 0 0 auto; padding: 7px 11px; border: 1px solid transparent; border-radius: 99px; color: var(--muted); background: transparent; cursor: pointer; font-size: 10px; font-weight: 690; transition: .15s ease; }
.filter:hover { color: var(--ink); background: #ebeef5; }
.filter.active { color: var(--brand-dark); border-color: #ddd7fb; background: var(--brand-soft); box-shadow: 0 2px 8px rgba(70,45,170,.05); }

.tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 16px 16px; }
.tool-card { position: relative; min-height: 108px; padding: 14px; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid var(--line); border-radius: 17px; text-align: left; background: var(--surface); box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .17s ease, box-shadow .17s ease, border-color .17s ease; }
.tool-card::after { content: ""; position: absolute; width: 70px; height: 70px; right: -35px; bottom: -40px; border-radius: 50%; background: var(--icon-bg, #f1efff); opacity: .55; }
.tool-card:hover { z-index: 1; transform: translateY(-2px); border-color: #d8d2f3; box-shadow: var(--shadow-md); }
.tool-icon { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; color: var(--icon-color, var(--brand)); background: var(--icon-bg, var(--brand-soft)); }
.tool-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.tool-copy { position: relative; z-index: 1; min-width: 0; width: 100%; margin-top: 11px; }
.tool-copy strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11.5px; font-weight: 760; letter-spacing: -.01em; }
.tool-copy > span { display: block; margin-top: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); font-size: 9px; }
.tool-chevron { position: absolute; top: 17px; right: 13px; color: #b3b7c3; font-size: 17px; line-height: 1; transition: transform .15s, color .15s; }
.tool-card:hover .tool-chevron { color: var(--brand); transform: translateX(2px); }
.empty { padding: 42px 20px; text-align: center; color: var(--muted); font-size: 12px; }

.workspace { flex: 1; padding: 15px 16px 22px; }
.back { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px 6px 6px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; font-size: 10px; font-weight: 650; transition: .15s; }
.back span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; color: var(--brand); background: var(--brand-soft); font-size: 18px; line-height: 1; }
.back:hover { color: var(--ink); background: #eceef4; }

.workspace-heading { display: flex; gap: 13px; align-items: center; margin: 14px 0 15px; }
.workspace-heading .tool-icon.large { width: 50px; height: 50px; border-radius: 15px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.02); }
.workspace-heading .tool-icon.large svg { width: 25px; height: 25px; }
.workspace-heading h2 { margin: 0; font-size: 20px; line-height: 1.2; letter-spacing: -.025em; }
.workspace-heading > div:last-child > p:last-child { margin: 5px 0 0; color: var(--muted); font-size: 10.5px; line-height: 1.45; }

.dropzone { min-height: 128px; padding: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1.5px dashed #cfc9e9; border-radius: 18px; background: linear-gradient(150deg, #fdfcff, #f2efff); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); transition: transform .16s, border-color .16s, box-shadow .16s; }
.dropzone:hover, .dropzone.dragging { transform: translateY(-1px); border-color: var(--brand); box-shadow: 0 8px 22px rgba(84,57,196,.10), inset 0 1px 0 white; }
.upload-icon { width: 40px; height: 40px; margin-bottom: 10px; display: grid; place-items: center; border-radius: 13px; color: white; background: linear-gradient(145deg, #8065f5, #5a39d8); box-shadow: 0 8px 18px rgba(88,56,213,.24); }
.upload-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dropzone strong { font-size: 12px; font-weight: 760; }
.dropzone > span:last-child { margin-top: 4px; color: var(--muted); font-size: 9.5px; }

.file-list { max-height: 126px; margin-top: 10px; overflow: auto; display: grid; gap: 6px; border: 0; border-radius: 0; }
.file-row { min-height: 38px; padding: 7px 9px; display: flex; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); box-shadow: 0 1px 3px rgba(20,24,40,.025); font-size: 10px; }
.file-order { width: 21px; height: 21px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 7px; color: var(--brand-dark); background: var(--brand-soft); font-size: 8px; font-weight: 800; }
.file-name { min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 640; }
.file-size { color: var(--muted); font-size: 8.5px; }
.file-remove { width: 23px; height: 23px; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 7px; color: #a2a6b2; background: transparent; cursor: pointer; font-size: 15px; line-height: 1; transition: .14s; }
.file-remove:hover { color: var(--danger); background: #fff0f2; }

.signature-panel, .edit-panel { display: grid; gap: 10px; margin-top: 11px; }
.signature-block { padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); }
.field-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.field-heading > div { display: flex; flex-direction: column; }
.field-heading strong { font-size: 10.5px; font-weight: 750; }
.field-heading span { margin-top: 2px; color: var(--muted); font-size: 8.5px; }
.subtle-button { padding: 6px 9px; border: 1px solid #e1ddf8; border-radius: 8px; color: var(--brand-dark); background: var(--brand-soft); cursor: pointer; font-size: 8.5px; font-weight: 720; }

#signatureCanvas { display: block; width: 100%; height: 105px; border: 1px solid #dfe2ea; border-radius: 11px; background-color: #fff; background-image: radial-gradient(#d9dce4 .65px, transparent .65px); background-size: 12px 12px; cursor: crosshair; touch-action: none; }

.placement-controls, .edit-controls { display: flex; align-items: flex-end; gap: 7px; margin-bottom: 9px; }
.placement-controls label, .edit-controls label { display: flex; flex-direction: column; color: var(--muted); font-size: 8px; font-weight: 620; }
.placement-controls input[type="number"], .edit-controls input[type="number"] { width: 56px; height: 32px; margin-top: 4px; padding: 0 8px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: #fafbfe; outline: 0; font-size: 10px; }
.placement-controls input[type="number"]:focus, .edit-controls input[type="number"]:focus { border-color: #a89bec; background: white; }
.page-count { margin-bottom: 8px; color: var(--subtle); font-size: 8px; }
.size-control { flex: 1; margin-left: 4px; }
.size-control input { width: 100%; accent-color: var(--brand); }

.pdf-preview { position: relative; min-height: 155px; max-height: 325px; overflow: auto; border: 1px solid #dfe2ea; border-radius: 12px; background: #e9ecf3; box-shadow: inset 0 0 0 4px rgba(255,255,255,.35); cursor: crosshair; }
.preview-page { position: relative; width: 100%; }
.preview-zoom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0 10px; }
.preview-zoom > span { color: var(--muted); font-size: 11px; font-weight: 650; }
.zoom-stepper { display: flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid #ddd7f4; border-radius: 11px; background: #f7f5ff; }
.preview-zoom button, .preview-zoom select { min-height: 36px; border: 0; border-radius: 8px; background: white; color: var(--ink); cursor: pointer; }
.zoom-stepper button { min-width: 34px; font-size: 21px; font-weight: 600; }
.zoom-stepper select { width: 76px; padding: 0 4px 0 8px; font-size: 12px; font-weight: 650; }
.preview-zoom .zoom-fit { padding: 0 9px; border: 1px solid #ddd7f4; color: var(--brand-dark); font-size: 11px; font-weight: 650; }
.preview-zoom button:hover:not(:disabled) { background: var(--brand-soft); }
.zoom-help { margin: 8px 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.pdf-preview:focus-visible { outline: 3px solid #6547e84d; outline-offset: 2px; }
#pdfPreview, #editPdfPreview { display: block; width: 100%; height: auto; background: white; }
.preview-placeholder { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; color: var(--muted); text-align: center; font-size: 9px; }
.signature-ghost { position: absolute; z-index: 2; height: auto; transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 1px 1px rgba(20,27,54,.16)); }
.placement-hint { margin: 7px 2px 0; color: var(--muted); font-size: 8.5px; line-height: 1.4; }

.edit-text-label { display: flex; flex-direction: column; color: var(--muted); font-size: 8px; font-weight: 620; }
.edit-mode-switch { margin-bottom: 8px; padding: 3px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; border-radius: 11px; background: #eff1f6; }
.edit-mode-switch button { min-height: 32px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; cursor: pointer; font-size: 9px; font-weight: 730; transition: .15s; }
.edit-mode-switch button.active { color: var(--brand-dark); background: white; box-shadow: 0 2px 8px rgba(32,27,70,.09); }
.edit-mode-hint { min-height: 25px; margin: 0 2px 8px; color: var(--muted); font-size: 8.5px; line-height: 1.45; }
.edit-text-label textarea { width: 100%; min-height: 58px; margin-top: 5px; padding: 9px 10px; resize: vertical; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fafbfe; outline: 0; font-size: 10px; line-height: 1.4; transition: border-color .15s, background .15s, box-shadow .15s; }
.edit-text-label textarea:focus { border-color: #a89bec; background: white; box-shadow: 0 0 0 3px rgba(101,71,232,.08); }
.edit-controls { margin: 9px 0; }
.edit-controls .size-control { flex: 1; }
.color-control input { width: 34px; height: 32px; margin-top: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: #fafbfe; cursor: pointer; }
.edit-preview { cursor: text; }
.edit-preview.replace-mode { cursor: default; }
.edit-source-masks, .edit-text-layer, .edit-overlays { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.edit-source-mask { position: absolute; background: white; }
.edit-text-hit { position: absolute; z-index: 2; padding: 0; border: 1px solid transparent; border-radius: 2px; color: transparent; background: transparent; pointer-events: auto; cursor: pointer; }
.edit-text-hit:hover, .edit-text-hit:focus-visible { border-color: rgba(101,71,232,.72); background: rgba(101,71,232,.10); outline: 0; }
.edit-text-hit.selected { visibility: hidden; } /* The fitted draft is the selection, not the old line box. */
.edit-overlay-item, .edit-draft { position: absolute; z-index: 3; width: max-content; min-height: 0; max-width: calc(100% - 3px); padding: 0 1px; border: 1px solid transparent; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.2; text-align: left; }
.edit-overlay-item { pointer-events: auto; cursor: grab; background: transparent; touch-action: none; }
.edit-overlay-item:hover { border-color: rgba(101,71,232,.48); }
.edit-overlay-item.replace { background: white; }
.edit-overlay-item.replace, .edit-draft.replace { white-space: nowrap; overflow: visible; }
.edit-overlay-item:active { cursor: grabbing; }
.edit-draft { pointer-events: none; border-style: dashed; border-color: var(--brand); border-radius: 4px; background: rgba(255,255,255,.88); box-shadow: 0 2px 7px rgba(30,24,64,.08); }
.edit-draft.add { background: rgba(255,255,255,.78); }
.edit-draft.draggable { pointer-events: auto; cursor: grab; touch-action: none; }
.edit-draft.draggable:active, .edit-draft.draggable.dragging { cursor: grabbing; }
.secondary-action { width: 100%; min-height: 38px; margin-top: 8px; border: 1px solid #d7d1fa; border-radius: 10px; color: var(--brand-dark); background: linear-gradient(#f6f3ff, #eeeaff); cursor: pointer; font-size: 9.5px; font-weight: 760; transition: .15s; }
.secondary-action:hover:not(:disabled) { border-color: #bdb1f5; box-shadow: 0 5px 14px rgba(80,50,190,.09); }
.secondary-action:disabled { color: #a2a6b2; border-color: var(--line); background: #f1f2f5; cursor: not-allowed; box-shadow: none; }
.cancel-edit { width: 100%; margin-top: 7px; padding: 6px; border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: 8.5px; font-weight: 680; }
.cancel-edit:hover { color: var(--danger); }

.edit-items { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: white; box-shadow: var(--shadow-sm); }
.edit-item { min-height: 43px; padding: 5px 7px 5px 10px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid var(--line); font-size: 9px; }
.edit-item:last-child { border-bottom: 0; }
.edit-item.selected { background: #f7f5ff; }
.edit-item-dot { width: 9px; height: 9px; flex: 0 0 auto; border: 2px solid white; border-radius: 50%; background: var(--edit-color); box-shadow: 0 0 0 1px #d9dce4; }
.edit-item-main { min-width: 0; flex: 1; padding: 3px 2px; display: flex; gap: 9px; align-items: center; border: 0; text-align: left; background: transparent; cursor: pointer; }
.edit-item-copy { min-width: 0; flex: 1; }
.edit-item-copy strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 9.5px; }
.edit-item-copy span { display: block; margin-top: 2px; color: var(--muted); font-size: 7.5px; }

.disclosure { margin: 11px 3px 0; color: #838898; font-size: 8px; line-height: 1.45; }
.disclosure a { color: var(--brand-dark); text-decoration: none; font-weight: 720; }

.primary { width: 100%; min-height: 47px; margin-top: 12px; border: 0; border-radius: 13px; color: white; background: linear-gradient(135deg, #7658ee, #5b3bd7); box-shadow: 0 10px 22px rgba(84,52,204,.22), inset 0 1px 0 rgba(255,255,255,.18); cursor: pointer; font-size: 11px; font-weight: 780; letter-spacing: .005em; transition: transform .15s, box-shadow .15s, filter .15s; }
.primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 13px 26px rgba(84,52,204,.27), inset 0 1px 0 rgba(255,255,255,.2); filter: saturate(1.05); }
.primary:active:not(:disabled) { transform: translateY(0); }
.primary:disabled { color: #9ca1ad; background: #e6e8ed; box-shadow: none; cursor: not-allowed; }

.status { margin-top: 10px; padding: 10px 11px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: var(--shadow-sm); }
.status.success { border-color: #d4eee5; background: #effaf6; }
.status.error { border-color: #f3d7da; background: #fff1f2; }
.status strong { font-size: 9.5px; }
.status p { margin: 3px 0 0; color: var(--muted); font-size: 8.5px; }
.spinner { width: 19px; height: 19px; flex: 0 0 auto; border: 2px solid #ded9f4; border-top-color: var(--brand); border-radius: 50%; animation: spin .75s linear infinite; }
.status.success .spinner, .status.error .spinner { animation: none; border: 0; display: grid; place-items: center; font-weight: 900; }
.status.success .spinner::after { content: "✓"; color: var(--success); }
.status.error .spinner::after { content: "!"; color: var(--danger); }
@keyframes spin { to { transform: rotate(360deg); } }

footer { margin-top: auto; padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: var(--muted); background: rgba(255,255,255,.72); font-size: 8.5px; }
footer .secure { display: inline-flex; align-items: center; gap: 5px; }
footer .secure svg { width: 13px; height: 13px; fill: none; stroke: var(--success); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
footer a { color: var(--brand-dark); text-decoration: none; font-weight: 700; }
.footer-links { display:flex; align-items:center; gap:8px; }

.hidden { display: none !important; }