:root{--night:#12191d;--panel:#182227;--line:#35454b;--text:#e9eee9;--muted:#91a09d;--lime:#d8fb6c;font-family:"Noto Sans SC",sans-serif;color:var(--text);background:var(--night);font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--night)}button,input,select{font:inherit}.app-shell{min-height:100vh;padding:22px clamp(14px,3vw,52px) 18px;background:linear-gradient(145deg,#10181c 0%,#12191d 50%,#182126 100%)}.topbar{height:48px;max-width:1540px;margin:0 auto 18px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font:700 21px "Playfair Display","Noto Sans SC",serif}.brand small{font:600 10px "Noto Sans SC",sans-serif;color:var(--muted);letter-spacing:.12em}.brand-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--lime);color:#172024;font:700 19px "Playfair Display",serif}.topbar-meta{display:flex;gap:12px;align-items:center}.local-pill{color:var(--muted);font-size:11px;display:flex;gap:7px;align-items:center}.local-pill i,.preview-badge i{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px #d8fb6c20}.random-button,.subtle-button,.cancel-button{border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer}.random-button{height:34px;padding:0 11px;border-radius:6px;font-size:12px}.random-button:hover{border-color:var(--lime);color:var(--lime)}.studio{max-width:1540px;margin:auto;display:grid;grid-template-columns:minmax(280px,326px) minmax(440px,1fr) minmax(280px,326px);gap:14px;align-items:start}.panel{border:1px solid #2f3d43;background:var(--panel);box-shadow:0 18px 50px #00000022}.editor-panel,.effects-panel{min-height:700px}.panel-title{height:56px;padding:0 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700}.panel-title small{font-size:10px;color:var(--muted);font-weight:500}.setting-section{border-bottom:1px solid var(--line)}.section-toggle{height:44px;width:100%;padding:0 18px;display:flex;justify-content:space-between;align-items:center;border:0;background:transparent;color:var(--text);font-size:12px;font-weight:700;cursor:pointer}.section-toggle b{color:var(--muted);font-size:16px;font-weight:400}.section-body{padding:0 18px 18px}.setting-section:not(.open) .section-body{display:none}.dropzone{height:108px;border:1px dashed #52646a;background:#202c30;display:flex;align-items:center;justify-content:center;flex-direction:column;cursor:pointer;transition:.18s}.dropzone:hover,.dropzone.dragging{border-color:var(--lime);background:#283533}.dropzone input{display:none}.upload-icon{font-size:20px;color:var(--lime);line-height:1}.dropzone strong{font-size:12px;margin-top:7px}.dropzone small{color:var(--muted);font-size:9px;margin-top:3px}.field-grid{display:grid;gap:10px}.field-grid.two{grid-template-columns:1fr 1fr}.field-grid label,.compact-fields label{color:#b2bfbb;font-size:10px;font-weight:700}.field-grid input,.field-grid select{width:100%;height:35px;margin-top:6px;padding:0 9px;border:1px solid #405057;background:#202c30;color:var(--text);border-radius:4px;outline:none;font-size:12px}.quick-messages,.message-library{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}.chip{border:1px solid #405057;border-radius:20px;background:transparent;color:#b8c4bf;padding:5px 8px;font-size:10px;cursor:pointer}.chip:hover,.chip.active{border-color:var(--lime);background:#d8fb6c14;color:var(--lime)}.compact-fields{display:grid;gap:12px}.compact-fields label{display:grid;grid-template-columns:1fr auto;gap:7px;align-items:center}.compact-fields input{grid-column:1/-1;width:100%;accent-color:var(--lime)}output{color:var(--lime);font-size:10px}.subtle-button{height:32px;border-radius:4px;font-size:11px}.export-settings{display:flex;justify-content:space-between;color:var(--muted);font-size:10px}.preview-panel{min-height:700px;padding:23px 27px 22px;display:flex;flex-direction:column}.preview-head{display:flex;justify-content:space-between;align-items:start}.eyebrow{font-size:9px;letter-spacing:.16em;font-weight:800;color:var(--muted)}h1{font-size:24px;margin:5px 0 0;letter-spacing:0;font-family:"Playfair Display","Noto Sans SC",serif}.frame-count{font-size:10px;color:#aebcb7;border:1px solid var(--line);padding:6px 8px}.stage-wrap{position:relative;display:grid;place-items:center;flex:1;min-height:515px;margin:4px 0 12px;overflow:hidden;background:#11181b}.stage-grid{position:absolute;inset:0;opacity:.3;background-image:linear-gradient(#3b484c 1px,transparent 1px),linear-gradient(90deg,#3b484c 1px,transparent 1px);background-size:27px 27px;mask-image:linear-gradient(to bottom,transparent,black 17%,black 83%,transparent)}#previewCanvas{position:relative;max-width:min(88%,440px);max-height:475px;width:auto;height:auto;filter:drop-shadow(0 18px 18px #0008)}.preview-badge{position:absolute;left:50%;bottom:11px;transform:translateX(-50%);display:flex;align-items:center;gap:7px;padding:5px 8px;border:1px solid #39494c;background:#142024d9;color:#b8c5bf;font-size:9px}.result-bar{padding:14px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.result-copy{display:flex;align-items:center;gap:9px}.result-icon{display:grid;place-items:center;width:27px;height:27px;background:#d8fb6c;color:#1a2527;font-weight:800}.result-copy strong,.result-copy small{display:block}.result-copy strong{font-size:11px}.result-copy small{font-size:9px;color:var(--muted);margin-top:2px}.result-actions{display:flex;gap:6px}.cancel-button{width:34px;font-size:20px;line-height:1}.download-button,.generate-button{border:0;cursor:pointer;font-weight:800}.download-button{height:34px;padding:0 10px;background:#eef2e9;color:#182126;font-size:11px}.download-button:disabled,.cancel-button:disabled{opacity:.38;cursor:not-allowed}.generate-button{height:45px;background:var(--lime);color:#152023;font-size:13px}.generate-button:hover:not(:disabled){background:#e7ff9c}.generate-button:disabled{opacity:.5;cursor:wait}.generate-button span{font-size:16px;margin-right:6px}.hint{margin:10px 0 0;min-height:15px;text-align:center;color:var(--muted);font-size:10px}.tab-list{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}.tab-list button{height:42px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);cursor:pointer;font-size:11px}.tab-list button.active{color:var(--lime);border-bottom-color:var(--lime)}.tab-content{display:none;padding:16px 15px 18px}.tab-content.active{display:block}.preset-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.preset-card{position:relative;min-height:76px;padding:10px;border:1px solid #3b4b50;background:#202c30;color:var(--text);text-align:left;cursor:pointer}.preset-card:hover,.preset-card.active{border-color:var(--lime)}.preset-card b{display:block;font-size:12px}.preset-card small{display:block;margin-top:5px;color:var(--muted);font-size:9px;line-height:1.35}.preset-icon{position:absolute;right:9px;top:8px;font-size:19px}.control-group{margin-bottom:18px}.control-group>label{display:flex;justify-content:space-between;margin-bottom:8px;color:#bdc8c3;font-size:11px;font-weight:700}.control-group label small{color:var(--muted);font-weight:500}.option-grid,.swatch-grid,.decoration-grid{display:flex;flex-wrap:wrap;gap:6px}.option-button{min-height:29px;padding:5px 8px;border:1px solid #405057;background:#202c30;color:#c7d0cd;font-size:10px;cursor:pointer}.option-button.active{border-color:var(--lime);color:var(--lime);background:#d8fb6c12}.swatch{width:29px;height:29px;border:2px solid transparent;cursor:pointer;position:relative}.swatch.active{border-color:var(--lime)}.swatch.active:after{content:"";position:absolute;inset:3px;border:1px solid #122}.decoration-button{width:43px;height:39px;border:1px solid #405057;background:#202c30;color:var(--text);font-size:19px;cursor:pointer}.decoration-button.active{border-color:var(--lime);background:#d8fb6c18}.mini-grid .option-button{min-width:31px;text-align:center}.message-library .chip{font-size:9px}.effects-panel{max-height:calc(100vh - 88px);overflow:auto}footer{max-width:1540px;margin:15px auto 0;display:flex;justify-content:center;gap:12px;align-items:center;color:#73827f;font-size:9px}footer span:nth-child(2){width:22px;height:1px;background:#435257}@media(max-width:1120px){.studio{grid-template-columns:minmax(260px,310px) minmax(390px,1fr)}.effects-panel{grid-column:1/-1;min-height:0;max-height:none}.preset-grid{grid-template-columns:repeat(4,1fr)}}@media(max-width:720px){.app-shell{padding:13px}.topbar{margin-bottom:13px}.brand small,.local-pill{display:none}.studio{grid-template-columns:1fr;gap:11px}.editor-panel,.preview-panel,.effects-panel{min-height:0}.editor-panel{order:2}.preview-panel{order:1;padding:17px}.effects-panel{order:3}.stage-wrap{min-height:390px}#previewCanvas{max-height:360px;max-width:92%}.preset-grid{grid-template-columns:repeat(2,1fr)}.topbar-meta{gap:0}.field-grid.two{grid-template-columns:1fr}.export-settings{gap:5px;flex-direction:column}.effects-panel{overflow:visible}}
.admin-link{color:var(--muted);font-size:11px;text-decoration:none}.admin-link:hover{color:var(--lime)}dialog{width:min(420px,calc(100vw - 30px));padding:0;border:1px solid #405057;background:#182227;color:var(--text);box-shadow:0 20px 60px #000}dialog::backdrop{background:#000a}dialog form{position:relative;display:grid;gap:15px;padding:28px}dialog h2,dialog p{margin:0}dialog p,dialog small{color:var(--muted);font-size:12px;line-height:1.6}dialog input{height:42px;border:1px solid #405057;background:#202c30;color:var(--text);padding:0 12px}.dialog-close{position:absolute;right:12px;top:8px;border:0;background:transparent;color:var(--muted);font-size:24px;cursor:pointer}footer a{color:inherit;text-decoration:none}
