:root{--accent:#7357e8;--accent-dark:#5d40ce;--accent-soft:#f0ebff;--ink:#272832;--muted:#92929e;--line:#eeeef3;--surface:#fff;--bg:#f6f6f9;--radius:10px;font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;color:var(--ink);font-size:13px}*{box-sizing:border-box}body{margin:0;background:var(--bg);overflow:hidden}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #bba9ff;outline-offset:3px}button{color:inherit}a{color:inherit;text-decoration:none}button,input,select,textarea{touch-action:manipulation}input,select,textarea{border:1px solid #e3e3eb;border-radius:7px;background:#fff;color:var(--ink);outline:none;width:100%;min-width:0;transition:border-color .15s}input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 2px #7357e80b}input,select{height:36px;padding:0 10px}textarea{padding:10px;resize:vertical;line-height:1.7;min-height:90px;max-height:260px}input[type=color]{width:29px;height:29px;min-width:29px;border:0;padding:0;cursor:pointer;background:transparent}input[type=color]::-webkit-color-swatch-wrapper{padding:2px}input[type=color]::-webkit-color-swatch{border:1px solid #ddd;border-radius:5px}input[type=checkbox]{width:15px;height:15px;accent-color:var(--accent);margin:0;flex-shrink:0}input[type=range]{height:20px;padding:0;accent-color:var(--accent);border:0;box-shadow:none}h2,h3,p{margin-top:0}h3{font-size:12px;font-weight:650;margin-bottom:12px}label{font-size:11px;color:#777783;display:block}label input,label select{margin-top:7px;color:var(--ink);font-size:12px}input[type=number]{padding-right:4px}button{border:0;background:transparent}.button{height:36px;padding:0 14px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:12px;font-weight:550;white-space:nowrap;transition:background .15s,transform .15s}.button:active{transform:translateY(1px)}.primary{background:var(--accent);color:#fff}.primary:hover{background:var(--accent-dark)}.secondary{background:#fff;border:1px solid #e4e3ec}.secondary:hover{background:#f8f7fc;border-color:#cfc6ed}.danger{background:#fff1f1;color:#d65757}.quiet{color:#777783}.quiet:hover{background:#f6f5f9}.full{width:100%}.large{height:44px}.text-button{color:var(--accent);font-size:11px;padding:4px 0}.text-button:hover{text-decoration:underline}.icon-button{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;font-size:21px;color:#767682}.icon-button:hover{background:#eeedf5;color:var(--accent)}.app-header{height:76px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 26px;gap:20px}.brand{display:flex;align-items:center;gap:10px;min-width:222px}.brand-mark{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--accent);color:#fff;font-size:21px;font-weight:700;box-shadow:0 5px 12px #7357e822}.brand strong{font-size:20px;letter-spacing:2px;display:block;line-height:1.3}.brand small{display:block;font-size:10px;color:#a1a0ad;letter-spacing:1px;margin-top:3px}.document-title{text-align:center;max-width:300px;flex:1}.document-title input{background:none;border:1px solid transparent;text-align:center;height:26px;font-weight:550}.document-title input:hover{border-color:#e3e3eb}.document-title span{font-size:10px;color:#a0a0ac;display:block;margin-top:3px}.header-actions{display:flex;align-items:center;gap:10px}.download-icon{font-size:20px;line-height:1}.workspace{height:calc(100dvh - 76px);display:grid;grid-template-columns:250px minmax(220px,1fr) 284px}.panel{background:#fff;overflow:auto;scrollbar-width:thin;scrollbar-color:#dedce7 transparent}.left-panel{border-right:1px solid var(--line)}.right-panel{border-left:1px solid var(--line)}.panel-heading{display:flex;align-items:center;justify-content:space-between;padding:23px 20px 15px;gap:8px}.panel-heading h2{font-size:13px;margin:0;font-weight:650}.eyebrow{font-size:9px;letter-spacing:1.5px;color:#adabb9}.panel-section{padding:18px 20px;border-bottom:1px solid var(--line)}.left-panel .panel-section:first-of-type{padding-top:10px}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:7px}.section-title h3{margin:0}.section-title>span{color:#aaa9b5;font-size:10px}.upload-card{width:100%;display:flex;align-items:center;flex-direction:column;gap:7px;border:1px dashed #d4cbea;background:#fbfaff;border-radius:9px;padding:18px 8px;color:var(--accent)}.upload-card:hover{background:#f2edff;border-color:var(--accent)}.upload-symbol{font-size:23px;line-height:1}.upload-card strong{font-size:12px;font-weight:550}.upload-card>span:last-child{color:#a7a1b6;font-size:9px}.mini-label{color:#a09cab;font-size:10px;margin:16px 0 9px}.preset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.preset{height:57px;border-radius:7px;border:1px solid #00000006;position:relative;overflow:hidden;font-size:10px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;transition:transform .15s}.preset:hover{transform:translateY(-2px)}.warm{background:linear-gradient(145deg,#f7f1e3,#e7dcc5);color:#8f8066}.lilac{background:linear-gradient(145deg,#eee7ff,#c6bcf4);color:#776592}.night{background:linear-gradient(145deg,#36435b,#182238);color:#bcc8dc}.green{background:linear-gradient(145deg,#e3eddd,#b6d0bd);color:#648671}.text-preset{width:100%;padding:12px 13px;border:1px solid #eae8f0;border-radius:7px;text-align:left;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;background:#fdfdff}.text-preset:hover{border-color:#beacef;background:#f9f6ff}.text-preset span{font-size:18px;color:#a89cbd;font-weight:400}.title-preset{font-size:19px;font-weight:700}.body-preset{font-size:13px}.caption-preset{font-size:11px;color:#99929f;margin-bottom:0}.layer-section{min-height:160px}.layers{display:grid;gap:6px}.layer{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid transparent;border-radius:7px;text-align:left;width:100%;color:#777581;font-size:11px}.layer:hover{background:#f8f7fc}.layer.active{background:#f3efff;border-color:#e5dcff;color:var(--accent)}.layer-icon{background:#eeedf2;width:25px;height:25px;display:grid;place-items:center;font-family:serif;font-size:16px;border-radius:5px;flex-shrink:0}.layer.active .layer-icon{background:#e8deff}.layer-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1}.layer-lock{font-size:10px}.project-section{border:0;padding-top:15px}.project-section>.button{justify-content:space-between}.project-buttons{display:flex;justify-content:space-between;margin:13px 0}.privacy-note{font-size:10px;color:#a4a0ae;line-height:1.7;margin:8px 0 0}.status-dot{width:5px;height:5px;background:#75ad8a;display:inline-block;border-radius:50%;margin-right:5px;vertical-align:middle}.subtle{color:#95929f;line-height:1.8;font-size:12px}.small{font-size:10px}.layer-section .subtle{margin:12px 0 0}.background-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:7px;margin-top:10px;font-size:10px;color:#999}.background-controls>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}.background-controls label{width:100%}.editor-area{display:flex;flex-direction:column;overflow:hidden;background:#f3f3f7;min-width:0;position:relative}.canvas-toolbar{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;flex-shrink:0;border-bottom:1px solid #eaeaf0;background:#f9f9fc}.toolbar-group{display:flex;align-items:center;gap:6px}.toolbar-divider{height:16px;width:1px;background:#e3e1eb;display:inline-block;margin:0 5px}.toolbar-group>span:not(.toolbar-divider){font-size:10px;color:#9896a5;letter-spacing:.3px}.zoom-value{font-size:11px;color:#7d788d;min-width:43px;padding:8px 4px}.stage-viewport{flex:1;min-height:0;overflow:auto;display:flex;align-items:flex-start;justify-content:flex-start;padding:32px;position:relative;background-image:radial-gradient(#dcdbe5 .7px,transparent .7px);background-size:16px 16px;overscroll-behavior:contain}.canvas-shell{position:relative;box-shadow:0 6px 28px #33334414,0 1px 4px #33334414;margin:auto;flex-shrink:0;line-height:0;background:white;touch-action:none}.canvas-container{touch-action:none}.canvas-footer{height:37px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 18px;flex-shrink:0;background:#fafafd;border-top:1px solid #eaeaf0;font-size:9px;color:#a19eaf}.canvas-footer .text-button{font-size:10px}.drop-hint{display:none;position:absolute;inset:12px;background:#f3eefff5;border:2px dashed var(--accent);border-radius:14px;align-items:center;justify-content:center;font-size:20px;color:var(--accent);z-index:5;pointer-events:none}.drop-hint.active{display:flex}.panel-tabs{display:flex;padding:0 20px;border-bottom:1px solid var(--line);gap:22px}.tab{height:40px;font-size:11px;color:#aaa6b5;border-bottom:2px solid transparent;padding:0 1px}.tab.active{color:var(--accent);border-color:var(--accent);font-weight:600}.field-label{margin-bottom:9px;color:#787281;font-size:11px;font-weight:550}.content-meta{display:flex;justify-content:space-between;font-size:9px;color:#aba6b5;margin-top:8px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px}.field-row.three{grid-template-columns:1fr 1fr 1fr}.format-bar{display:flex;align-items:center;justify-content:space-between;background:#f8f7fb;border-radius:7px;padding:4px;margin:13px 0}.format-button{height:29px;min-width:27px;padding:3px;border-radius:4px;font-family:Georgia,serif;font-size:15px;display:flex;align-items:center;gap:1px;justify-content:center;color:#7f778e}.format-button small{font-family:system-ui;font-size:7px}.format-button.active{background:#fff;box-shadow:0 1px 4px #33225512;color:var(--accent)}.format-bar .toolbar-divider{margin:0 3px}.unit-hint{display:none}.color-line{display:flex;align-items:center;justify-content:space-between;gap:8px}.color-input{display:flex;align-items:center;gap:6px;font-size:10px;color:#8d8598}.color-input input{margin:0}.swatches{display:flex;gap:6px}.swatches button{width:17px;height:17px;border-radius:50%;background:var(--swatch);border:1px solid #00000014}.swatches button:hover{outline:2px solid #c9b5ff;outline-offset:2px}.range-label{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:17px;gap:6px}.range-label input{width:100%;margin-top:2px}.range-label span{font-size:10px;color:#a19aad}.effect-row{display:flex;align-items:center;gap:7px;margin-top:12px;min-height:29px}.check-label{display:flex;align-items:center;gap:6px;font-size:11px;color:#8b8194}.effect-row .check-label{margin-right:auto}.effect-row>input[type=number]{width:47px;height:28px;padding:0 4px;font-size:11px}.effect-row>input[type=color]{width:25px;min-width:25px;height:25px}.lock-label{padding-top:18px}.button-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}.button-grid .button{padding:0 5px;height:32px;font-size:10px}.no-selection{padding:55px 16px;text-align:center}.no-selection>span{display:inline-grid;place-items:center;width:52px;height:52px;background:#f2edff;border-radius:14px;color:var(--accent);font-size:26px;margin-bottom:20px}.no-selection h3{font-size:14px}.no-selection p{font-size:11px;line-height:1.9;color:#a7a0b2;margin-bottom:20px}.mobile-close,.mobile-label,.mobile-nav{display:none}.toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%);background:#2c2939f5;color:white;padding:12px 20px;border-radius:10px;z-index:200;font-size:12px;box-shadow:0 4px 20px #0002;max-width:90vw;line-height:1.6}.toast.error{background:#a63d4a}.busy-overlay{position:fixed;inset:0;background:#ffffffd9;backdrop-filter:blur(3px);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:500;color:var(--accent)}.spinner{width:30px;height:30px;border:3px solid #dfd4ff;border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}dialog{border:1px solid #eeebf5;border-radius:16px;padding:27px;width:460px;max-width:calc(100vw - 30px);max-height:85dvh;overflow:auto;color:var(--ink);box-shadow:0 15px 80px #3023442b}dialog::backdrop{background:#21173155;backdrop-filter:blur(3px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:16px}.dialog-heading h2{font-size:21px;margin:5px 0 0;letter-spacing:-.5px}.dialog-heading .eyebrow{font-size:8px;color:#9b8cb8}.export-summary{background:#f5f2fc;color:var(--accent);text-align:center;padding:20px;margin:20px 0;font-size:20px;font-weight:600;letter-spacing:1px}#export-preview{margin-top:20px}#result-image{max-width:100%;max-height:350px;display:block;margin:0 auto;object-fit:contain}.draft-list{display:grid;gap:10px;margin-top:20px}.draft-item{display:flex;align-items:center;gap:12px;border:1px solid #e9e4f1;border-radius:10px;padding:10px}.draft-item img{height:70px;width:58px;object-fit:cover;border-radius:5px;background:#f6f4fa}.draft-info{flex:1;min-width:0}.draft-info strong{display:block;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.draft-info p{font-size:10px;color:#aaa;margin:6px 0}.draft-item .button{height:30px;padding:0 8px}.help-steps{padding-left:20px;line-height:1.7}.help-steps li{margin-bottom:18px;padding-left:8px}.help-steps li::marker{color:var(--accent);font-weight:650}.help-steps strong{font-size:13px}.help-steps p{color:#96909f;font-size:11px;margin:6px 0}.help-shortcuts{font-size:10px;line-height:1.9;background:#f8f5ff;padding:12px;border-radius:8px;color:#9b8cb1}[hidden]{display:none!important}
.layers,.layer,.layer-text{min-width:0}.layer-section{overflow:hidden}
@media(min-width:1600px){.workspace{grid-template-columns:270px minmax(220px,1fr) 310px}.panel-section{padding:20px 24px}.panel-heading{padding-left:24px;padding-right:24px}.stage-viewport{padding:40px}.app-header{padding:0 30px}}
@media(max-width:1100px) and (min-width:761px){.workspace{grid-template-columns:205px minmax(180px,1fr) 250px}.panel-section{padding:15px 14px}.panel-heading{padding:20px 14px 14px}.brand{min-width:185px}.app-header{padding:0 18px}.stage-viewport{padding:25px}.canvas-footer .desktop-label{display:none}.swatches{gap:4px}.swatches button{width:15px;height:15px}.color-line{gap:5px}.panel-tabs{padding:0 14px}.upload-card>span:last-child{font-size:8px}}
@media(max-width:760px){:root{font-size:14px}.app-header{height:64px;padding:0 14px;gap:10px}.brand{min-width:0;gap:7px}.brand-mark{width:32px;height:32px;font-size:19px;border-radius:9px}.brand strong{font-size:18px}.brand small{display:none}.document-title{display:none}.header-actions{gap:7px}.header-actions .button{padding:0 12px;height:35px}.desktop-label{display:none!important}.workspace{height:calc(100dvh - 126px - env(safe-area-inset-bottom));display:block}.editor-area{height:100%}.canvas-toolbar{height:46px;padding:0 12px}.stage-viewport{padding:23px;scrollbar-width:none}.canvas-footer{height:32px;font-size:9px;padding:0 12px;gap:5px}.canvas-footer>.text-button{font-size:9px}.mobile-label{display:inline}.mobile-nav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;bottom:0;left:0;right:0;z-index:40;height:calc(62px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);border-top:1px solid #ebe6f2;background:#fff}.mobile-nav>button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10px;color:#8b7f9a}.mobile-nav>button>span{font-size:21px;line-height:1}.mobile-nav>button.active{color:var(--accent);background:#f8f5ff}.panel{position:fixed;left:0;right:0;bottom:calc(62px + env(safe-area-inset-bottom));height:min(66dvh,590px);z-index:60;border-radius:16px 16px 0 0;transform:translateY(calc(100% + 100px));transition:transform .2s;box-shadow:0 -10px 35px #36234d18;border:0;padding-bottom:15px;overscroll-behavior:contain;visibility:hidden}.panel.open{transform:translateY(0);visibility:visible}.panel-heading{position:sticky;top:0;background:#fff;z-index:3;padding:16px 20px 10px;border-radius:16px 16px 0 0}.panel-heading .eyebrow{margin-left:auto}.mobile-close{display:inline-flex}.panel-section{padding:17px 20px}.panel-scrim{position:fixed;inset:64px 0 calc(62px + env(safe-area-inset-bottom));background:#21173125;z-index:50}.panel-tabs{position:sticky;top:56px;background:#fff;z-index:2}.left-panel .layer-section{min-height:120px}.left-panel .upload-card{padding:14px}.preset{height:53px}.text-preset{padding:12px}.preset-grid{gap:10px}.field-row{gap:12px}.right-panel input,.right-panel select,.right-panel textarea{font-size:16px}.right-panel input[type=color]{height:32px}.effect-row input[type=number]{font-size:14px;width:60px}.color-line{justify-content:flex-start;gap:25px}.swatches{gap:10px}.swatches button{width:23px;height:23px}.color-input{font-size:12px}.format-bar{justify-content:flex-start;gap:10px}.format-button{height:36px;min-width:35px}.right-panel .button-grid .button{height:39px;font-size:12px}.toast{bottom:85px;min-width:180px;text-align:center}.no-selection{padding:25px 16px}.panel.open input,.panel.open select,.panel.open textarea{scroll-margin-bottom:40px}.background-controls>span{max-width:70%}dialog{padding:22px;max-height:80dvh}.dialog-heading h2{font-size:20px}dialog select{font-size:14px}.help-steps p{font-size:12px}.button-grid{gap:10px}.project-section{padding-bottom:25px}.layer{padding:11px;font-size:12px}.text-content{max-height:160px}.range-label input{height:26px}.mobile-nav>button:focus-visible{outline-offset:-3px}}
@media(max-width:360px){.brand strong{display:none}.header-actions .button{padding:0 10px}.canvas-footer .mobile-label{font-size:8px}.canvas-footer>.text-button{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Red-gold default theme */
.preset-grid{grid-template-columns:repeat(5,1fr)}.red-gold{background:linear-gradient(162deg,#df1926 0%,#b3091c 70%,#ffe1a2 72%,#c68e3b 79%,#8f0717 81%);color:#fff0ca}

/* Five locally rendered patriotic backgrounds, with full-image thumbnails. */
.preset-grid.patriotic-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.patriotic-grid .preset{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;height:auto;padding:0;min-width:0;border:1px solid #e6d7d7;background:#fff9f4;color:#8d3237;border-radius:7px}
.patriotic-grid .preset img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;background:#ba1023}
.patriotic-grid .preset>span{display:block;font-size:9px;line-height:1.2;white-space:nowrap;letter-spacing:0;padding:6px 1px;font-weight:600;text-align:center;background:#fff8f1;color:#8d3237}
.patriotic-grid .preset.active{border-color:#c43d4b;box-shadow:0 0 0 2px #f0cdd1}
.preset-check{display:none;position:absolute;right:4px;top:4px;width:15px;height:15px;border-radius:50%;background:#fff2cd;color:#ab1b30;font-size:10px;font-style:normal;font-weight:750;place-items:center;box-shadow:0 1px 5px #51061944}
.preset.active .preset-check{display:grid}
.theme-text-hint{font-size:10px;line-height:1.7;color:#a78a8d;margin:11px 0 0}
@media(max-width:760px){.preset-grid.patriotic-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.patriotic-grid .preset>span{font-size:9px;padding:7px 0}.theme-text-hint{font-size:10px}}