:root { font-family: Inter, "Noto Sans SC", "Microsoft YaHei", sans-serif; color: #202b2a; background: #f3f6f5; font-size: 14px; font-synthesis: none; text-rendering: optimizeLegibility; }
* { box-sizing: border-box; }
body { min-width: 360px; margin: 0; }
button, input, textarea, select { color: inherit; font: inherit; }
button { cursor: pointer; }
.topbar { position: sticky; z-index: 3; top: 0; display: flex; height: 66px; align-items: center; gap: 22px; padding: 0 max(26px, calc((100vw - 1120px) / 2)); border-bottom: 1px solid #e1e7e4; background: rgb(255 255 255 / 97%); }
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; white-space: nowrap; }
.brand-mark { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 7px; background: #174d49; }
.brand-mark svg { width: 20px; fill: #fff; }
.brand strong { font-size: 14px; font-weight: 650; }
.template-tools { display: flex; align-items: end; gap: 8px; margin-left: auto; }
.template-picker { display: flex; min-width: 220px; flex-direction: column; gap: 4px; color: #68746f; font-size: 10px; font-weight: 600; }
.template-picker select, .field-label input, .field-label textarea { width: 100%; border: 1px solid #d3dcd8; border-radius: 5px; outline: 0; background: #fff; transition: border-color .15s, box-shadow .15s; }
.template-picker select { height: 36px; padding: 0 29px 0 10px; font-size: 12px; }
.save-state { min-width: 75px; color: #7d8883; font-size: 10px; text-align: right; }
main { width: min(1040px, calc(100% - 48px)); margin: 0 auto; padding: 38px 0 58px; }
.page-heading { margin-bottom: 20px; }
h1, h2, p { margin: 0; }
h1 { font-size: 23px; font-weight: 650; }
h2 { font-size: 14px; font-weight: 650; }
.page-heading p { margin-top: 6px; color: #7c8782; font-size: 12px; }
.generator-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 16px; }
.generator-panel, .preview-panel { padding: 21px; border: 1px solid #dfe6e3; border-radius: 8px; background: #fff; box-shadow: 0 3px 12px rgb(26 53 47 / 3%); }
.field-label { display: flex; flex-direction: column; gap: 8px; color: #586560; font-size: 12px; font-weight: 600; }
.field-label textarea { min-height: 170px; resize: vertical; padding: 11px 12px; color: #27322f; font-size: 12px; font-weight: 400; line-height: 1.55; }
.remark-field { margin-top: 15px; }
#qr-remark { min-height: 82px; }
.field-label textarea:focus, .field-label input:focus, .template-picker select:focus { border-color: #388b80; box-shadow: 0 0 0 3px rgb(56 139 128 / 12%); }
.input-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.input-actions #input-status { flex: 1 1 100%; min-height: 14px; color: #328273; font-size: 11px; }
.button { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; border: 1px solid #d2dad7; border-radius: 5px; background: #fff; color: #35413d; font-size: 11px; font-weight: 600; transition: background .15s, border-color .15s, transform .15s; }
.button:hover { transform: translateY(-1px); border-color: #aebdb8; background: #f8faf9; }
.button.primary { border-color: #176e65; background: #176e65; color: #fff; }
.button.primary:hover { border-color: #125c55; background: #125c55; }
.button:disabled { transform: none; opacity: .45; cursor: default; }
.preview-heading { display: flex; align-items: center; justify-content: space-between; }
.live-indicator { display: flex; align-items: center; gap: 6px; color: #79847f; font-size: 10px; }
.live-indicator i { width: 6px; height: 6px; border-radius: 50%; background: #37a17d; box-shadow: 0 0 0 3px #e5f4ed; }
.preview-stage { display: grid; min-height: 320px; max-height: 440px; overflow: auto; place-items: center; margin-top: 16px; padding: 15px; border: 1px solid #edf1ef; border-radius: 6px; background-color: #fafcfb; background-image: radial-gradient(#e3eae7 .7px, transparent .7px); background-size: 13px 13px; }
.qr-preview { display: grid; width: 100%; place-items: center; }
.qr-preview canvas { display: block; width: min(100%, 280px); height: auto; padding: 8px; background: #fff; box-shadow: 0 2px 12px rgb(24 43 38 / 9%); }
.muted { color: #89938f; font-size: 11px; }
.preview-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.preview-actions .button { width: 100%; padding: 0 8px; }
.preview-actions svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.toast { position: fixed; z-index: 10; bottom: 22px; left: 50%; transform: translate(-50%, 12px); padding: 10px 15px; border-radius: 5px; background: #24312e; color: #fff; font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .16s, transform .16s; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

.modal-backdrop { position: fixed; z-index: 8; inset: 0; display: grid; place-items: center; overflow: auto; padding: 22px; background: rgb(23 34 31 / 48%); }
.manager-modal { width: min(650px, 100%); max-height: min(760px, calc(100dvh - 44px)); overflow: auto; border: 1px solid #dfe6e3; border-radius: 9px; background: #fff; box-shadow: 0 20px 70px rgb(0 0 0 / 18%); }
.modal-header { position: sticky; z-index: 1; top: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 21px 22px 17px; border-bottom: 1px solid #e8edeb; background: #fff; }
.modal-header h2 { font-size: 17px; }
.modal-header p { margin-top: 5px; color: #818b87; font-size: 11px; }
.close-button { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #65716c; font-size: 22px; line-height: 1; }
.close-button:hover { border-color: #e0e7e4; background: #f5f8f6; }
.manager-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 13px 22px; color: #76817c; font-size: 11px; }
.template-rows { padding: 0 22px 20px; }
.managed-template { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-top: 1px solid #edf0ef; }
.template-summary { display: grid; min-width: 0; gap: 5px; }
.template-summary strong { font-size: 12px; font-weight: 600; }
.template-summary span { overflow: hidden; max-width: 400px; color: #87918d; font-family: ui-monospace, Consolas, monospace; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.row-actions { display: flex; flex: 0 0 auto; gap: 6px; }
.row-actions .button { min-height: 31px; padding: 0 10px; }
.danger-button { color: #a34b43; }
.danger-button:hover { border-color: #efd8d4; background: #fff8f6; }
.empty-list { padding: 34px 10px; color: #87918d; font-size: 12px; text-align: center; }
.form-modal { width: min(560px, 100%); }
#template-form { padding: 18px 22px 22px; }
#template-form .field-label { margin-bottom: 14px; font-size: 11px; }
#template-form input:not([type="color"]) { height: 37px; padding: 0 10px; font-size: 12px; font-weight: 400; }
#template-form textarea { min-height: 88px; padding: 9px 10px; font-size: 11px; font-weight: 400; }
#template-form .field-label:nth-of-type(3) textarea { min-height: 56px; }
.color-control { display: flex; align-items: center; gap: 9px; }
.color-control input { width: 38px; height: 33px; padding: 2px; border: 1px solid #d3dcd8; border-radius: 5px; background: #fff; }
.color-control code { color: #56625e; font-size: 11px; font-weight: 500; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 3px; }
.form-error { min-height: 15px; margin-top: 8px; color: #b42318; font-size: 11px; }

@media (max-width: 760px) {
  .topbar { padding: 0 17px; }
  main { width: calc(100% - 34px); }
  .generator-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; }
  .generator-panel, .preview-panel { padding: 16px; }
  .preview-stage { min-height: 270px; }
}
@media (max-width: 620px) {
  .topbar { height: auto; min-height: 60px; flex-wrap: wrap; gap: 10px; padding: 9px 13px; }
  .brand { margin-right: auto; }
  .template-tools { order: 3; width: 100%; margin: 0; }
  .template-picker { min-width: 0; flex: 1; }
  .save-state { min-width: auto; }
  main { width: calc(100% - 26px); padding: 23px 0 38px; }
  .page-heading { margin-bottom: 14px; }
  h1 { font-size: 20px; }
  .page-heading p { font-size: 11px; }
  .generator-layout { display: flex; flex-direction: column; }
  .preview-panel { order: -1; width: 100%; }
  .generator-panel { width: 100%; padding: 15px; }
  .field-label textarea { min-height: 115px; }
  .preview-stage { min-height: 235px; max-height: 330px; }
  .qr-preview canvas { width: min(100%, 250px); }
  .input-actions .button { flex: 1; padding: 0 8px; font-size: 10px; }
  .manager-modal { max-height: calc(100dvh - 24px); }
  .modal-backdrop { padding: 12px; }
  .modal-header, .manager-toolbar { padding-right: 15px; padding-left: 15px; }
  .template-rows { padding: 0 15px 15px; }
  .managed-template { align-items: flex-start; }
  .template-summary span { max-width: 210px; }
  .row-actions { gap: 4px; }
  .row-actions .button { padding: 0 7px; }
  #template-form { padding: 16px 15px 18px; }
}