:root{color-scheme:dark;--bg:#10151d;--panel:#171e28;--border:#2b3441;--muted:#92a0b1;--ink:#f1f4f8;--accent:#b7f3c9;--accent-ink:#13291d}
*{box-sizing:border-box}html,body{height:auto;min-height:100%;overflow:auto;background:var(--bg);color:var(--ink);font-family:Inter,'Segoe UI',sans-serif;font-size:14px;line-height:1.5}body{margin:0}button,input,select{font:inherit}button,a,input,select{outline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent)}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}[hidden]{display:none!important}a{color:inherit;text-decoration:none}.topbar{height:88px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 4%;background:#111720}.brand{display:flex;gap:13px;align-items:center;font-weight:800;letter-spacing:.12em;font-size:21px}.brand-icon{display:grid;place-items:center;width:42px;height:42px;border:1px solid #81b99b;background:#21362d;border-radius:11px;color:var(--accent);font-size:28px;font-weight:400}.brand-detail{display:block;font-size:8px;letter-spacing:.17em;font-weight:600;color:var(--muted);margin-top:0}.top-actions{display:flex;gap:22px;align-items:center}.tag{font-size:12px;color:#acb8c6;display:flex;gap:8px;align-items:center}.tag i,.live-dot{display:inline-block;background:var(--accent);height:6px;width:6px;border-radius:50%}main{max-width:1540px;margin:auto;padding:42px 4% 0}h1,h2,p{margin:0}h1{font-size:clamp(28px,3vw,43px);font-weight:600;letter-spacing:-1.7px;line-height:1.17}h2{font-size:16px;font-weight:600;letter-spacing:-.2px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--accent);display:block;margin-bottom:10px}.accent-dot{color:var(--accent)}.page-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:32px}.page-heading p{color:var(--muted);margin-top:11px;font-size:14px}.publish-actions{display:flex;align-items:center;gap:18px}.save-status{font-size:12px;color:#a9b6c5}.save-status.dirty{color:#edba71}.button{border:1px solid #394555;background:#222d3b;color:var(--ink);border-radius:9px;padding:11px 17px;display:inline-flex;align-items:center;justify-content:center;gap:20px;white-space:nowrap;font-weight:600;font-size:13px;transition:background .15s,transform .15s}.button:hover{background:#2a384a}.button:active{transform:translateY(1px)}.button.primary{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}.button.primary:hover{background:#d4ffe1}.button.quiet{background:transparent;border-color:transparent}.button.small{padding:7px 11px;font-size:12px;gap:8px}.button.wide{width:100%;margin-top:22px;justify-content:space-between;padding:13px 17px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:24px}.main-column,.settings-column{display:flex;flex-direction:column;gap:23px;min-width:0}.panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;overflow:hidden}.section-heading{padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px}.section-heading h2{display:flex;gap:10px;align-items:center}.section-dot{height:7px;width:7px;background:var(--accent);border-radius:2px}.count{font-size:10px;color:var(--muted);font-weight:500;border:1px solid #35404e;border-radius:5px;padding:2px 6px;letter-spacing:0}.preview-controls{display:flex;gap:7px;align-items:center}.chip{height:29px;min-width:29px;padding:0 7px;border:1px solid #354152;color:#b7c3d2;border-radius:6px;background:transparent;font-size:15px}.chip:hover{background:#2c3b4c;color:white}.chip.selected{color:var(--accent);border-color:#688c78;background:#284033}.preview-box{margin:0 20px;position:relative;isolation:isolate;overflow:hidden;background:#0b1017;aspect-ratio:16/9;border:1px solid #313c4b;border-radius:8px}.checker{background-color:#17202b;background-image:conic-gradient(#1d2836 25%,transparent 0 50%,#1d2836 0 75%,transparent 0);background-size:24px 24px}.empty-preview{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;pointer-events:none;color:#9aabbe;font-size:12px}.empty-preview strong{font-size:16px;color:#d1d9e3;font-weight:500}.empty-icon{font-size:38px;border:1px solid #34485b;border-radius:14px;width:70px;height:70px;display:grid;place-items:center;color:#9db9ac;margin-bottom:12px;background:#182733aa}.safe-corner{position:absolute;width:16px;height:16px;z-index:3;pointer-events:none;border-color:#7c9d8c;border-style:solid}.safe-corner.tl{left:11px;top:11px;border-width:1px 0 0 1px}.safe-corner.br{right:11px;bottom:11px;border-width:0 1px 1px 0}.preview-footer{display:flex;justify-content:space-between;padding:15px 22px;font-size:11px;color:#a2b0c1}.preview-footer>span:first-child{display:flex;align-items:center;gap:8px}.dropzone{margin:0 20px 20px;border:1px dashed #445366;border-radius:9px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:26px 15px;color:var(--muted);font-size:12px;background:#1b2430;cursor:pointer;transition:background .15s}.dropzone:hover,.dropzone.dragging{border-color:var(--accent);background:#20372d}.dropzone strong{color:#dce4ed;font-size:14px;font-weight:500}.dropzone small{font-size:10px;margin-top:8px;text-align:center}.upload-icon{width:34px;height:34px;border:1px solid #405449;border-radius:9px;display:grid;place-items:center;font-size:23px;color:var(--accent);margin-bottom:8px;background:#25362d}.compact-drop{padding:13px}.compact-drop .upload-icon,.compact-drop>span:not(.upload-icon){display:none}.compact-drop small{margin:0}.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 20px 18px}.gallery:empty{display:none}.image-card{overflow:hidden;border:1px solid #364354;border-radius:9px;background:#111923;opacity:.65}.image-card.selected{border-color:#719280;opacity:1}.thumb{height:110px;position:relative}.thumb img{width:100%;height:100%;object-fit:contain;padding:8px}.order-badge{position:absolute;top:8px;left:8px;font-size:9px;line-height:23px;width:25px;text-align:center;background:#131b24dc;border:1px solid #4c5f70;border-radius:5px}.image-toggle{position:absolute;right:8px;top:8px;margin:0!important;width:16px!important;height:16px!important;accent-color:var(--accent)}.image-info{padding:11px 10px 7px;min-width:0}.image-info strong{font-size:11px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-weight:500}.image-info small{font-size:9px;color:var(--muted)}.image-actions{display:flex;justify-content:space-between;padding:0 8px 8px;gap:4px}.image-actions .chip{height:25px;min-width:24px;font-size:13px}.library-foot{padding:12px 20px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:12px;font-size:10px;color:var(--muted)}.upload-status{padding:0 20px 12px;font-size:12px;color:var(--accent)}.upload-status:empty{display:none}.obs-card{display:flex;align-items:start;padding:22px;background:#1a2927;border:1px solid #355047;border-radius:13px;gap:16px}.obs-icon{color:var(--accent);font-size:29px;line-height:1}.obs-copy{min-width:0;flex:1}.obs-copy h2{font-size:15px}.obs-copy p{font-size:12px;color:#a7bfb5;margin-top:5px}.url-row{display:flex;gap:6px;margin-top:15px}.url-row input{font-size:11px;color:#c2dece;background:#14211e;min-width:0;flex:1}.url-row .button{border-color:#456657;color:#d1eddd;background:#284435}.obs-copy .obs-tip{font-size:10px;margin-top:9px}.panel-content{padding:0 22px 22px}.field{display:block;font-size:12px;color:#c3cedb;margin-bottom:16px}.field:last-child{margin-bottom:0}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field-row:has([hidden]){grid-template-columns:1fr}.field-row .field{min-width:0}.input-unit{position:relative;margin-top:7px}.input-unit input{width:100%;padding-right:39px}.input-unit span{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:11px;color:#768a9d;pointer-events:none}input:not([type=checkbox],[type=radio],[type=range]),select{background:#101721;border:1px solid #354150;border-radius:7px;padding:10px 11px;color:#e3eaf3;width:100%;height:41px}input::placeholder{color:#697d90;font-size:11px}select{margin-top:7px;padding-right:5px;font-size:12px}input[type=checkbox]{accent-color:var(--accent)}.switch-label{display:flex;align-items:center;gap:5px;font-size:10px;color:#adbdcf}.switch-label input{width:14px;height:14px}.segmented{display:flex;background:#101721;border:1px solid #303e4c;border-radius:8px;padding:4px}.segmented label{flex:1;position:relative;cursor:pointer;text-align:center}.segmented input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}.segmented span{display:block;padding:8px;border-radius:5px;font-size:12px;color:#8e9eaf}.segmented input:checked+span{color:#cde9d8;background:#2a4238;box-shadow:0 1px 3px #0003}.segmented input:focus-visible+span{outline:2px solid var(--accent)}.hint{color:#8396aa;font-size:10px;line-height:1.7;margin-top:9px}.segmented+.hint{margin-bottom:19px}.slider-field{display:block;font-size:10px;color:#8da0b4;margin-top:14px}.slider-field output{float:right;color:#b9c8d8;font-size:11px}input[type=range]{display:block;width:100%;height:18px;accent-color:var(--accent);margin:10px 0 0}.field-divider{border-top:1px solid #2b3644;margin:22px 0}.compact{margin-top:13px}.footer{display:flex;justify-content:space-between;color:#62778b;font-size:10px;padding:27px 0 30px}.footer span:first-child{letter-spacing:.12em}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);z-index:99;background:var(--accent);color:#162a1c;padding:12px 22px;border-radius:9px;box-shadow:0 5px 35px #0008;font-size:13px;max-width:90vw;text-align:center}.toast.bad{background:#ffb5ab;color:#571915}.error{color:#ffb5ab!important}.loading{padding:100px;text-align:center;color:var(--muted)}dialog{border:1px solid #415163;background:var(--panel);color:var(--ink);border-radius:16px;padding:0;width:min(440px,90vw);box-shadow:0 25px 100px #000b}dialog::backdrop{background:#071018b8;backdrop-filter:blur(5px)}.selected-name{font-size:12px;color:var(--accent);margin-bottom:20px;word-break:break-word}.login-view{max-width:970px;margin:60px auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:80px;min-height:480px}.login-card h1{font-size:43px;line-height:1.12;margin-bottom:20px}.login-card>p{color:#95a7bb;font-size:14px;line-height:1.7;margin-bottom:28px}.login-card label{display:block;font-size:12px;color:#c2cedd;margin-bottom:8px}.login-card .error{font-size:12px;margin-top:15px;margin-bottom:0}.login-foot{display:block;margin-top:23px;color:#6f859b;font-size:11px}.login-art{height:340px;position:relative}.art-frame{width:270px;height:230px;border:1px solid #3d6251;border-radius:21px;position:absolute;top:45px;left:40px;background:#263c32}.art-frame.one{transform:rotate(-15deg) translate(-20px,5px);background:#152a23;border-color:#284937}.art-frame.two{transform:rotate(-7deg);background:#203a2d;border-color:#43674f}.art-frame.three{transform:rotate(5deg) translate(18px,-10px);background:linear-gradient(140deg,#bfd9b8,#9bb9a8);display:flex;align-items:end;padding:27px;color:#1d3929;box-shadow:0 25px 80px #0006;font-size:24px;letter-spacing:-1px;line-height:1.25}.art-frame.three b{font-size:39px;font-weight:600}
@media(min-width:1400px){.workspace{grid-template-columns:minmax(0,1fr) 390px}.gallery{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1000px){.workspace{grid-template-columns:minmax(0,1fr) 310px;gap:18px}.section-heading{padding:17px}.panel-content{padding:0 17px 20px}.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.save-status{display:none}.preview-controls .button{font-size:0;gap:0}.preview-controls .button::after{content:'↻';font-size:16px}.preview-box{margin:0 16px}.library-foot{flex-direction:column;gap:4px}}
@media(max-width:740px){main{padding-top:25px}.topbar{height:70px}.tag{font-size:0}.tag i{width:8px;height:8px}.workspace{grid-template-columns:1fr}.page-heading{align-items:start}.page-heading h1{font-size:29px;letter-spacing:-1px}.page-heading p{font-size:12px;max-width:200px}.publish-actions{position:fixed;bottom:14px;right:16px;z-index:8;filter:drop-shadow(0 4px 15px #0008)}.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}.main-column,.settings-column{gap:17px}.obs-card{padding:18px}.url-row .quiet{display:none}.footer{padding-bottom:85px;gap:20px}.footer span:last-child{max-width:170px;text-align:right}.login-view{grid-template-columns:1fr;gap:25px;margin:10px auto;max-width:440px}.login-art{display:none}.login-card{padding:30px 8px}.login-card h1{font-size:36px}.library-foot{flex-direction:row}.image-actions .chip{min-width:21px;padding:0 4px}.section-heading{padding:17px 16px}}
@media(max-width:430px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.obs-icon{display:none}.page-heading h1{font-size:27px}.library-foot{font-size:9px}.preview-controls{gap:4px}}