.ji-page{margin:0;background:#f5f7fb;color:#172033;font:15px/1.6 var(--fm-font,system-ui)}
.ji-field>label>span{display:block;font-size:12px;font-weight:650;color:#475569;margin-bottom:7px}.ji-color{display:grid;grid-template-columns:44px minmax(0,1fr);gap:6px}.ji-field .ji-color input{padding:6px}.ji-field .ji-color input[type=text]{font-size:12px}:root[data-theme=dark] .ji-field>label>span{color:#c3cee1}
@media(max-width:600px){.ji-field .ji-color input[type=text]{font-size:16px}}
:root[data-theme=dark] .ji-upload p,:root[data-theme=dark] .ji-upload small{color:#a3b0c8}
.ji-main,.ji-main *{box-sizing:border-box}.ji-main{max-width:1320px;margin:0 auto;padding:42px 24px 64px}.ji-main [hidden]{display:none!important}
.ji-intro{max-width:800px;margin-bottom:30px}.ji-intro h1{font-size:clamp(30px,4vw,44px);line-height:1.18;letter-spacing:-1.4px;margin:10px 0 14px;font-weight:750}.ji-intro>p:not(.ji-eyebrow){font-size:16px;color:#64748b;margin:0 0 16px;max-width:700px}.ji-privacy{display:inline-flex;align-items:center;gap:7px;color:#047857;background:#ecfdf5;border:1px solid #d1fae5;padding:6px 12px;border-radius:100px;font-size:12px;font-weight:600}
.ji-eyebrow{margin:0 0 8px;color:#526ed0;font-size:10px;font-weight:750;letter-spacing:1.6px}.ji-grid{display:grid;grid-template-columns:minmax(300px,400px) minmax(0,1fr);gap:26px;align-items:start}.ji-controls{display:grid;gap:20px;margin:0;min-width:0}.ji-card{background:white;border:1px solid #e2e8f0;border-radius:18px;padding:24px;box-shadow:0 8px 30px #17203304}.ji-card h2{font-size:19px;line-height:1.35;margin:0 0 20px;letter-spacing:-.4px}.ji-upload{border:1px dashed #b6c5e3;border-radius:12px;background:#f8faff;text-align:center;padding:22px 16px}.ji-upload.is-dragging{background:#eff6ff;border-color:#2563eb}.ji-upload-icon{display:block;color:#526ed0;font-size:30px;line-height:1;margin-bottom:16px}.ji-upload p{font-size:12px;color:#64748b;margin:12px 0 4px}.ji-upload small{font-size:11px;color:#64748b;display:block}
.ji-button{display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:44px;padding:11px 15px;border:1px solid transparent;border-radius:10px;font:600 13px/1.4 var(--fm-font,system-ui);cursor:pointer;text-decoration:none;transition:background .15s}.ji-primary{background:#345ee8;color:white;border-color:#345ee8}.ji-primary:hover{background:#244ccc}.ji-secondary{background:white;color:#334155;border-color:#cbd5e1}.ji-secondary:hover{background:#f8fafc}.ji-button:disabled{opacity:.5;cursor:not-allowed}.ji-button:focus-visible,.ji-text-button:focus-visible{outline:2px solid #3b82f6;outline-offset:3px}.ji-upload-button{position:relative;overflow:hidden}.ji-upload-button input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}.ji-upload-button:focus-within{outline:2px solid #3b82f6;outline-offset:3px}.ji-image-info{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin:14px 0 4px;font-size:12px}.ji-image-info>span{overflow-wrap:anywhere;min-width:0}.ji-image-info small{color:#64748b;white-space:nowrap}.ji-text-button{background:none;border:0;padding:4px 0;color:#345ee8;font:600 12px var(--fm-font,system-ui);cursor:pointer}
.ji-field{display:block;margin:0 0 16px;min-width:0}.ji-field>span{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:12px;font-weight:650;color:#475569;margin-bottom:7px}.ji-field textarea,.ji-field select,.ji-field input:not([type=range]){width:100%;min-width:0;min-height:44px;border:1px solid #cbd5e1;border-radius:9px;background:white;color:#172033;padding:10px 12px;font:14px/1.5 var(--fm-font,system-ui)}.ji-field textarea{resize:vertical;min-height:80px;max-height:180px}.ji-field input[type=color]{padding:6px;height:44px;cursor:pointer}.ji-field input[type=range]{width:100%;accent-color:#345ee8;height:26px;cursor:pointer}.ji-field small,.ji-help{display:block;font-size:12px;color:#64748b;line-height:1.7;margin:7px 0 0}.ji-field input:focus-visible,.ji-field textarea:focus-visible,.ji-field select:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.ji-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}.ji-check{display:flex;align-items:center;gap:9px;font-size:12px;margin:12px 0;color:#475569}.ji-check input{width:17px;height:17px;margin:0;accent-color:#345ee8;flex:none}.ji-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.ji-actions .ji-button{flex:1}.ji-save-hint{margin-top:14px}.ji-preview{position:sticky;top:84px;min-width:0}.ji-preview-card{padding:22px}.ji-preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.ji-preview-head h2{margin:0}.ji-preview-head .ji-eyebrow{margin-bottom:4px}.ji-resolution{font-size:11px;background:#f1f5f9;color:#64748b;padding:5px 9px;border-radius:50px;white-space:nowrap}
.ji-stage{display:flex;align-items:center;justify-content:center;position:relative;min-height:280px;padding:18px;border:1px solid #e2e8f0;border-radius:12px;background-color:#f1f5f9;background-image:linear-gradient(45deg,#e2e8f0 25%,transparent 25%),linear-gradient(-45deg,#e2e8f0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e2e8f0 75%),linear-gradient(-45deg,transparent 75%,#e2e8f0 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.ji-stage canvas{display:block;width:auto;height:auto;max-width:100%;max-height:65vh;box-shadow:0 8px 25px #17203326;cursor:move;touch-action:none;outline-offset:4px}.ji-stage canvas:focus-visible{outline:2px solid #3b82f6}.ji-loading{position:absolute;inset:0;display:grid;place-items:center;background:#f1f5f9e8;border-radius:12px;font-size:13px;color:#475569}.ji-keyboard{font-size:11px}.ji-status{font-size:12px;color:#047857;margin:14px 0 0;min-height:20px}.ji-error,.ji-notice{padding:14px 18px;border-radius:10px;border:1px solid #fecaca;background:#fef2f2;color:#991b1b;margin-bottom:22px;font-size:13px}
:root[data-theme=dark] .ji-page{background:#0b1220;color:#e8eefb}:root[data-theme=dark] .ji-card{background:#131c30;border-color:#263550}:root[data-theme=dark] .ji-intro>p:not(.ji-eyebrow),:root[data-theme=dark] .ji-help,:root[data-theme=dark] .ji-field small,:root[data-theme=dark] .ji-image-info small{color:#a3b0c8}:root[data-theme=dark] .ji-field>span,:root[data-theme=dark] .ji-check{color:#c3cee1}:root[data-theme=dark] .ji-field textarea,:root[data-theme=dark] .ji-field select,:root[data-theme=dark] .ji-field input:not([type=range]),:root[data-theme=dark] .ji-secondary{background:#0b1220;color:#e8eefb;border-color:#3b4963}:root[data-theme=dark] .ji-upload{background:#111e35;border-color:#3b4963}:root[data-theme=dark] .ji-stage{background-color:#101a2b;border-color:#263550;background-image:none}:root[data-theme=dark] .ji-resolution{background:#263550;color:#c3cee1}:root[data-theme=dark] .ji-eyebrow,:root[data-theme=dark] .ji-text-button{color:#93b3ff}:root[data-theme=dark] .ji-status{color:#6ee7b7}
@media(max-width:900px){.ji-grid{grid-template-columns:1fr}.ji-controls{display:contents}.ji-controls>section:first-child{grid-row:1}.ji-preview{position:static;grid-row:2}.ji-controls>section:nth-child(2){grid-row:3}.ji-controls>section:nth-child(3){grid-row:4}.ji-stage canvas{max-height:55vh}.ji-preview-card{padding:18px}.ji-intro{margin-bottom:22px}.ji-intro h1{font-size:32px}.ji-keyboard{display:none}}
@media(max-width:600px){.ji-main{padding:28px 14px 42px}.ji-card{padding:20px}.ji-intro h1{font-size:29px;letter-spacing:-.8px}.ji-intro>p:not(.ji-eyebrow){font-size:14px}.ji-stage{padding:12px;min-height:180px}.ji-stage canvas{max-height:50vh}.ji-field textarea,.ji-field select,.ji-field input:not([type=range]){font-size:16px}.ji-actions .ji-button{font-size:12px}.ji-resolution{font-size:10px}.ji-two{gap:10px}.ji-preview-head h2{font-size:18px}}