@font-face{font-family:DFXingKaiHK;src:url(/assets/fonts/DFXingKaiHK-W5.otf) format("opentype")}@font-face{font-family:Cataneo BT;src:url(/assets/fonts/CataneoBT-Regular.ttf) format("truetype")}@font-face{font-family:MingLiU HKSCS;src:url(/assets/fonts/MingLiU_HKSCS.ttf) format("truetype")}@font-face{font-family:Namecard Arial;src:url(/assets/fonts/Arial.ttf) format("truetype")}@font-face{font-family:Arial Narrow;src:url(/assets/fonts/ArialNarrow.ttf) format("truetype")}:root{--bg: #f4f5f7;--panel: #ffffff;--panel-2: #fafafa;--ink: #171719;--muted: #626874;--border: #d8dce3;--accent: #6f379d;--accent-dark: #4d246f;--accent-soft: #efe5f5;--focus: #1e7f71;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input,a{font:inherit}button,a{-webkit-tap-highlight-color:transparent}.app-shell{display:grid;grid-template-columns:320px minmax(0,1fr);min-height:100vh}.workspace-panel{display:flex;flex-direction:column;gap:18px;padding:24px 18px;background:#202126;color:#fff}.brand-lockup{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center}.brand-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:8px;background:var(--accent);font-weight:800;letter-spacing:0}.brand-lockup h1,.topbar h2{margin:0;font-size:18px;line-height:1.15}.brand-lockup p,.topbar p{margin:4px 0 0;color:#aeb5c1;font-size:13px}.primary-action,.save-button,.export-button,.upload-button,.reset-button,.icon-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;border:1px solid transparent;border-radius:8px;cursor:pointer;text-decoration:none;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease}.primary-action{width:100%;background:#fff;color:#202126;font-weight:700}.primary-action:hover,.save-button:hover,.export-button:hover,.upload-button:hover,.reset-button:hover,.icon-button:hover{transform:translateY(-1px)}.search-box{display:flex;align-items:center;gap:9px;height:38px;padding:0 12px;border:1px solid #3b3d45;border-radius:8px;background:#17181d;color:#c7ccd5}.search-box input{width:100%;border:0;outline:0;color:#fff;background:transparent;font-size:14px}.saved-list{display:flex;flex-direction:column;gap:8px;overflow:auto;padding-right:2px}.saved-card{display:grid;gap:4px;width:100%;padding:12px;border:1px solid #343741;border-radius:8px;background:#292b32;color:#fff;text-align:left}.saved-card.selected{border-color:#c99ef1;background:#392944}.saved-name{font-weight:700;font-size:14px}.saved-meta,.empty-state{color:#b8bec8;font-size:12px}.workbench{min-width:0;padding:22px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.topbar p{color:var(--muted)}.topbar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.save-button{padding:0 14px;background:var(--accent);color:#fff;font-weight:700}.save-button:disabled{opacity:.65;cursor:wait}.export-button,.icon-button{padding:0 12px;border-color:var(--border);background:#fff;color:var(--ink)}.export-button.disabled{opacity:.45;pointer-events:none}.editor-grid{display:grid;grid-template-columns:minmax(420px,1fr) 390px;gap:22px;align-items:start}.preview-stage,.editor-panel{border:1px solid var(--border);border-radius:8px;background:var(--panel)}.preview-stage{display:grid;place-items:center;gap:14px;padding:24px;min-height:calc(100vh - 110px)}.card-canvas{position:relative;width:min(100%,529px);aspect-ratio:756 / 1182;background:#fff;box-shadow:0 24px 55px #14182024}.template-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none}.photo-frame{position:absolute;left:56.75%;top:60.41%;width:30.29%;height:22.67%;border-radius:50%;overflow:hidden;background:#111}.photo-frame img{position:absolute;top:50%;left:50%;width:100%;height:100%;object-fit:cover;transform-origin:center}.overlay{position:absolute;color:#191919;text-align:center;line-height:1;white-space:nowrap;transform:translate(-50%)}.chinese-name{left:50%;top:31.8%;width:46%;font-family:DFXingKaiHK,serif;font-size:clamp(24px,4vw,40px)}.english-name{left:50%;top:37.8%;width:56%;font-family:Cataneo BT,Georgia,serif;font-size:clamp(19px,3.2vw,33px);font-weight:600}.chinese-title{left:50%;top:44.1%;width:56%;font-family:MingLiU HKSCS,MingLiU,serif;font-size:clamp(11px,1.85vw,19px)}.english-title{left:50%;top:48%;width:60%;display:grid;gap:2px;justify-items:center;font-family:Cataneo BT,Georgia,serif;font-size:clamp(11px,1.85vw,19px);font-weight:600;font-style:italic;line-height:1.03}.mobile-number,.email-address{font-family:Namecard Arial,Arial,sans-serif;font-size:clamp(9px,1.58vw,15px);text-align:left;transform:none}.mobile-number{left:40.1%;top:78.95%}.email-address{left:32.95%;top:83.5%}.preview-footer{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}.editor-panel{display:grid;gap:0;overflow:hidden}.panel-section{display:grid;gap:13px;padding:18px;border-bottom:1px solid var(--border)}.panel-section:last-child{border-bottom:0}.panel-section h3{margin:0 0 2px;font-size:15px}.field{display:grid;gap:6px}.field span,.slider-row span{color:var(--muted);font-size:12px;font-weight:700}.field input,.field textarea{width:100%;border:1px solid var(--border);border-radius:6px;outline:none;background:#fff}.field input{height:36px;padding:0 10px}.field textarea{min-height:58px;resize:vertical;padding:8px 10px;line-height:1.25}.field input:focus,.field textarea:focus,.search-box:focus-within{border-color:var(--focus);box-shadow:0 0 0 3px #1e7f7129}.upload-button,.reset-button{width:100%;border-color:var(--border);background:var(--panel-2);color:var(--ink);font-weight:700}.reset-button{background:#fff;color:var(--muted)}.control-group{display:grid;gap:11px}.slider-row{display:grid;grid-template-columns:86px minmax(0,1fr) 44px;gap:9px;align-items:center}.slider-row input{width:100%;accent-color:var(--accent)}.slider-row output{color:var(--muted);font-size:12px;text-align:right}.compact-note{grid-template-columns:18px 1fr;align-items:start;background:var(--accent-soft);color:var(--accent-dark)}.compact-note p{margin:0;font-size:13px;line-height:1.45}@media(max-width:1080px){.app-shell{grid-template-columns:1fr}.workspace-panel{min-height:auto}.saved-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));max-height:220px}.editor-grid{grid-template-columns:1fr}}@media(max-width:640px){.workbench,.workspace-panel{padding:16px}.topbar{align-items:stretch;flex-direction:column}.topbar-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.preview-stage{padding:12px;min-height:auto}.editor-grid{gap:14px}}