/* ===================================================================== PixelForge — design system & app styling ===================================================================== */ :root{ /* ---- Surface scale (deepest -> most raised) ---- */ --bg-0:#13141a; /* app base / viewport well */ --bg-1:#191b22; /* panels, dialogs */ --bg-2:#1f212b; /* menubar, toolbar, panel headers */ --bg-3:#272a36; /* hover / inputs */ --bg-4:#323647; /* active / pressed */ --bg-5:#3b3f53; /* highest raised chip */ /* ---- Lines ---- */ --line:#0a0a0d; --line-soft:#363a4a; --line-softer:#2a2d3a; /* ---- Text ---- */ --txt:#c7c9d6; --txt-dim:#7c7f93; --txt-dimmer:#5b5e70; --txt-bright:#f3f4f9; /* ---- Accent: cool electric blue-violet, primary brand + interactive ---- */ --accent:#5b8cff; --accent-hover:#76a0ff; --accent-press:#4877e6; --accent-soft:rgba(91,140,255,.16); --accent-soft-strong:rgba(91,140,255,.28); /* ---- Secondary accent: warm gold, reserved for AI / highlight badges ---- */ --gold:#ffb454; --gold-soft:rgba(255,180,84,.16); --danger:#ff5d6c; --danger-soft:rgba(255,93,108,.16); --success:#3ddc97; /* ---- Radius scale ---- */ --r-sm:4px; --r-md:7px; --r-lg:11px; --r-xl:16px; /* ---- Elevation ---- */ --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 6px 16px rgba(0,0,0,.38), 0 1px 2px rgba(0,0,0,.3); --shadow-lg:0 20px 48px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.35); --shadow-focus:0 0 0 3px var(--accent-soft-strong); --ease:cubic-bezier(.2,.7,.3,1); --font-ui:14px/1.45 "Inter","Segoe UI",system-ui,-apple-system,sans-serif; } *{margin:0;padding:0;box-sizing:border-box;user-select:none;-webkit-user-select:none} textarea,#livetext-input,input[type=text],input[type=number],input[type=search]{user-select:text;-webkit-user-select:text} html,body{height:100%;overflow:hidden;background:var(--bg-0);color:var(--txt);font:var(--font-ui); font-feature-settings:"tnum" 1,"cv05" 1;-webkit-font-smoothing:antialiased} button,input,select{font:inherit;color:inherit} button{background:none;border:none;cursor:pointer;transition:background-color .12s var(--ease),color .12s var(--ease)} button:disabled{cursor:not-allowed;opacity:.5} input[type=text],input[type=number],select{ background:var(--bg-0);border:1px solid var(--line-soft);border-radius:var(--r-sm); color:var(--txt);padding:4px 7px;outline:none;transition:border-color .12s var(--ease),box-shadow .12s var(--ease)} input:focus-visible,select:focus-visible,button:focus-visible{box-shadow:var(--shadow-focus);border-radius:var(--r-sm)} input[type=text]:focus,input[type=number]:focus,select:focus{border-color:var(--accent)} input[type=range]{accent-color:var(--accent);cursor:pointer} input[type=color]{border:1px solid var(--line-soft);background:none;padding:0;border-radius:var(--r-sm);cursor:pointer} ::selection{background:var(--accent-soft-strong)} /* ---------- App grid ---------- */ #app{display:grid;height:100%; grid-template-rows:34px 42px 1fr 26px; grid-template-columns:58px 1fr 264px 320px; grid-template-areas: "menu menu menu menu" "opts opts opts opts" "tools view side ads" "status status status status";} #app.no-ads{ grid-template-columns:58px 1fr 264px; grid-template-areas: "menu menu menu" "opts opts opts" "tools view side" "status status status";} /* ---------- Menubar ---------- */ #menubar{grid-area:menu;display:flex;align-items:center;background:var(--bg-2); border-bottom:1px solid var(--line);padding:0 10px;gap:1px} #menubar .logo{display:flex;align-items:center;gap:7px;font-weight:700;color:var(--txt-bright); padding:0 14px 0 2px;letter-spacing:.2px;font-size:14.5px;white-space:nowrap} #menubar .logo svg{width:18px;height:18px;flex-shrink:0} .menu-item{position:relative} .menu-item>button{padding:7px 13px;border-radius:var(--r-sm);color:var(--txt);font-size:13.5px} .menu-item>button:hover{background:var(--bg-3);color:var(--txt-bright)} .menu-item.open>button{background:var(--bg-4);color:var(--txt-bright)} .dropdown{display:none;position:absolute;top:calc(100% + 4px);left:0;min-width:240px;z-index:200; background:var(--bg-2);border:1px solid var(--line-soft);border-radius:var(--r-md); box-shadow:var(--shadow-lg);padding:5px; animation:dd-in .12s var(--ease)} @keyframes dd-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}} .menu-item.open .dropdown{display:block} .dropdown button{display:flex;justify-content:space-between;align-items:center;gap:18px;width:100%; text-align:left;padding:7px 11px;color:var(--txt);border-radius:var(--r-sm);font-size:13px} .dropdown button:hover{background:var(--accent);color:#fff} .dropdown button .kbd{color:var(--txt-dim);font-size:11px;letter-spacing:.2px} .dropdown button:hover .kbd{color:rgba(255,255,255,.85)} .dropdown hr{border:none;border-top:1px solid var(--line-softer);margin:5px 2px} .dropdown .dd-label{padding:6px 11px 3px;font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:var(--txt-dimmer);font-weight:600} /* ---------- Options bar ---------- */ #optionsbar{grid-area:opts;display:flex;align-items:center;gap:16px;background:var(--bg-1); border-bottom:1px solid var(--line);padding:0 16px;overflow-x:auto;white-space:nowrap} #optionsbar .opt{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--txt-dim);flex-shrink:0} #optionsbar .opt b{color:var(--txt-bright);font-weight:600;letter-spacing:.2px;font-size:13px} #optionsbar input[type=range]{width:108px} #optionsbar input[type=number]{width:56px} #optionsbar select{max-width:160px} #optionsbar input[type=color]{height:24px;width:33px;padding:0;cursor:pointer;border-radius:var(--r-sm)} #optionsbar label{display:flex;align-items:center;gap:4px;cursor:pointer} #optionsbar input[type=checkbox]{width:15px;height:15px;accent-color:var(--accent);cursor:pointer} /* ---------- Toolbar ---------- */ #toolbar{grid-area:tools;background:var(--bg-2);border-right:1px solid var(--line); display:flex;flex-direction:column;align-items:center;padding:10px 9px;gap:4px;overflow-y:auto} .tool-btn{width:40px;height:40px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center; color:var(--txt-dim);position:relative;flex-shrink:0} .tool-btn:hover{background:var(--bg-3);color:var(--txt-bright)} .tool-btn.active{background:var(--accent-soft-strong);color:var(--accent-hover)} .tool-btn.active::before{content:'';position:absolute;left:-9px;top:50%;transform:translateY(-50%); width:3px;height:19px;border-radius:2px;background:var(--accent)} .tool-btn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .tool-sep{width:28px;border-top:1px solid var(--line-soft);margin:6px 0} #color-wells{margin-top:12px;position:relative;width:40px;height:40px} #color-wells input{position:absolute;width:25px;height:25px;border-radius:var(--r-sm);box-shadow:0 0 0 1px var(--line)} #fg-color{top:0;left:0;z-index:2} #bg-color{bottom:0;right:0;z-index:1} /* ---------- Viewport ---------- */ #viewport{grid-area:view;position:relative;overflow:hidden;background:var(--bg-0); background-image:radial-gradient(circle at 50% 38%, #1a1c24 0%, #121319 72%)} #stage{position:absolute;inset:0;cursor:crosshair;touch-action:none; box-shadow:0 0 0 1px var(--line-soft),var(--shadow-md)} #welcome{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;color:var(--txt-dim)} #welcome .mark{width:52px;height:52px;color:var(--accent);filter:drop-shadow(0 4px 18px rgba(91,140,255,.35))} #welcome h1{font-size:24px;font-weight:600;color:var(--txt-bright);letter-spacing:3px;display:flex;align-items:center;gap:12px} #welcome .wbtns{display:flex;gap:10px;margin-top:2px} #welcome .wbtns button{background:var(--bg-2);border:1px solid var(--line-soft);padding:9px 20px;border-radius:var(--r-md); color:var(--txt);font-size:12.5px;font-weight:500;box-shadow:var(--shadow-sm)} #welcome .wbtns button:hover{border-color:var(--accent);color:var(--accent-hover);background:var(--bg-3)} #welcome .wbtns button.primary{background:var(--accent);border-color:var(--accent);color:#fff} #welcome .wbtns button.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)} #welcome small{font-size:11px;color:var(--txt-dimmer)} /* ---------- Side panels ---------- */ #sidebar{grid-area:side;background:var(--bg-1);border-left:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden} .panel{display:flex;flex-direction:column;border-bottom:1px solid var(--line);min-height:0} .panel-head{padding:8px 12px;font-size:10.5px;text-transform:uppercase;letter-spacing:1.1px;font-weight:600; color:var(--txt-dim);background:var(--bg-2);display:flex;justify-content:space-between;align-items:center;gap:6px} .panel-head svg{width:13px;height:13px;opacity:.7} .panel-body{padding:10px 12px;overflow-y:auto} #panel-adjust .row{display:flex;align-items:center;gap:8px;margin-bottom:9px;font-size:12px} #panel-adjust .row label{width:74px;color:var(--txt-dim)} #panel-adjust .row input[type=range]{flex:1} #panel-adjust .row output{width:32px;text-align:right;font-size:11px;color:var(--txt);font-variant-numeric:tabular-nums} #panel-adjust .btns{display:flex;gap:6px;margin-top:6px} #panel-adjust .btns button{flex:1;background:var(--bg-3);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:6px;font-size:12px;font-weight:500} #panel-adjust .btns button.primary{background:var(--accent);border-color:var(--accent);color:#fff} #panel-adjust .btns button:hover{filter:brightness(1.15)} #panel-adjust .btns button:active{filter:brightness(.95)} #panel-layers{flex:1} #layers-list{flex:1;overflow-y:auto;padding:5px} .layer-row{display:flex;align-items:center;gap:8px;padding:6px 7px;border-radius:var(--r-md);cursor:pointer;border:1px solid transparent} .layer-row:hover{background:var(--bg-2)} .layer-row.active{background:var(--accent-soft);border-color:rgba(91,140,255,.4)} .layer-row .eye{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:var(--txt-dim);flex-shrink:0} .layer-row .eye svg{width:15px;height:15px} .layer-row .eye.off{color:var(--txt-dimmer)} .layer-row .thumb{width:40px;height:30px;background: conic-gradient(#5a5d6b 25%, #75788a 0 50%, #5a5d6b 0 75%, #75788a 0) 0 0/10px 10px; border:1px solid var(--line-soft);border-radius:var(--r-sm);flex-shrink:0;overflow:hidden} .layer-row .thumb canvas{width:100%;height:100%;display:block} .layer-row .lname{flex:1;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt)} .layer-row.active .lname{color:var(--txt-bright);font-weight:500} .layer-row .lock-ind{width:16px;height:20px;display:flex;align-items:center;justify-content:center;color:var(--txt-dimmer);cursor:pointer;flex-shrink:0} .layer-row .lock-ind svg{width:13px;height:13px} .layer-row .lock-ind.locked{color:var(--accent-hover)} .layer-row.multi-selected{background:rgba(91,140,255,.12);border-color:rgba(91,140,255,.3)} .layer-row.dragging{opacity:0.4} .layer-row.drag-over{border-top:2px solid var(--accent)} .context-menu button:hover .kbd{color:rgba(255,255,255,.85)} .layer-controls{display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--line);font-size:11px;color:var(--txt-dim)} .layer-controls select{flex:1;font-size:11px;padding:3px 5px} .layer-controls input[type=range]{width:68px} .layer-actions{display:flex;gap:2px;padding:5px 9px;border-top:1px solid var(--line);justify-content:flex-end} .layer-actions button{width:27px;height:27px;border-radius:var(--r-sm);color:var(--txt-dim);display:flex;align-items:center;justify-content:center} .layer-actions button:hover{background:var(--bg-3);color:var(--txt-bright)} .layer-actions svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} #panel-history .panel-body{max-height:120px} #history-list{font-size:12px} #history-list div{padding:4px 7px;border-radius:var(--r-sm);color:var(--txt-dim);cursor:pointer} #history-list div:hover{background:var(--bg-2)} #history-list div.current{color:var(--txt-bright);background:var(--accent-soft)} /* ---------- Status bar ---------- */ #statusbar{grid-area:status;background:var(--bg-2);border-top:1px solid var(--line); display:flex;align-items:center;gap:18px;padding:0 12px;font-size:11px;color:var(--txt-dim)} #statusbar .zoom-ctl{display:flex;align-items:center;gap:3px} #statusbar button{color:var(--txt-dim);padding:3px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center} #statusbar button:hover{color:var(--txt-bright);background:var(--bg-3)} #statusbar button svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} #statusbar #st-zoom{min-width:38px;text-align:center;font-variant-numeric:tabular-nums} /* ---------- Dialogs ---------- */ #overlay{position:fixed;inset:0;background:rgba(8,9,13,.65);backdrop-filter:blur(2px);display:none;z-index:500;align-items:center;justify-content:center} #overlay.show{display:flex;animation:ov-in .14s var(--ease)} @keyframes ov-in{from{opacity:0}to{opacity:1}} .dialog{background:var(--bg-1);border:1px solid var(--line-soft);border-radius:var(--r-lg);min-width:320px; max-width:min(92vw,720px);max-height:92vh;overflow-y:auto;box-shadow:var(--shadow-lg); animation:dlg-in .16s var(--ease)} @keyframes dlg-in{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}} #overlay{padding:16px} .dialog h3{padding:13px 18px;font-size:13.5px;border-bottom:1px solid var(--line);font-weight:600;color:var(--txt-bright);letter-spacing:.1px} .dialog .d-body{padding:15px 18px;display:flex;flex-direction:column;gap:11px} .dialog .d-row{display:flex;align-items:center;gap:10px;font-size:12px} .dialog .d-row label{width:90px;color:var(--txt-dim)} .dialog .d-row input,.dialog .d-row select{flex:1} .dialog .d-foot{display:flex;justify-content:flex-end;gap:8px;padding:13px 18px;border-top:1px solid var(--line)} .dialog .d-foot button{padding:7px 18px;border-radius:var(--r-md);background:var(--bg-3);border:1px solid var(--line-soft);font-size:12.5px;font-weight:500} .dialog .d-foot button.primary{background:var(--accent);border-color:var(--accent);color:#fff} .dialog .d-foot button:hover{filter:brightness(1.15)} .dialog .d-foot button:active{filter:brightness(.95)} /* ---------- Collapsible "Advanced options" disclosure (used in dialogs) ---------- */ .dialog details{border-top:1px solid var(--line-softer);padding-top:10px} .dialog details summary::-webkit-details-marker{display:none} .dialog details summary:hover{color:var(--txt-bright)} .dialog details[open] summary{color:var(--txt-bright)} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--bg-4);border-radius:6px;border:2.5px solid var(--bg-1)} ::-webkit-scrollbar-thumb:hover{background:var(--bg-5)} ::-webkit-scrollbar-track{background:transparent} @media (max-width:760px){ #app{grid-template-columns:58px 1fr 0} #sidebar{display:none} } /* ---------- Crop handles ---------- */ .crop-handle{position:absolute;width:10px;height:10px;background:var(--accent);border:1.5px solid #fff;border-radius:2px;pointer-events:none;box-shadow:0 1px 4px rgba(0,0,0,.4)} /* ---------- Text preview in dialog ---------- */ #d-text-preview{word-break:break-word;text-align:center} /* ---------- Gradient stops row ---------- */ #optionsbar input[type=color]{height:22px;width:32px;padding:0;cursor:pointer} /* ---------- Ad Column (separate from sidebar) ---------- */ #ad-column{grid-area:ads;background:var(--bg-1);border-left:1px solid var(--line); display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px 10px;overflow-y:auto} #ad-column .ad-col-head{width:100%;font-size:10px;text-transform:uppercase;letter-spacing:1px; color:var(--txt-dimmer);text-align:center;padding-bottom:4px;border-bottom:1px solid var(--line-soft)} .adbox-wrap{display:flex;flex-direction:column;gap:6px;align-items:center} .adbox-label{font-size:9px;color:var(--txt-dimmer);text-transform:uppercase;letter-spacing:.5px;align-self:flex-start} .adbox{width:300px;height:250px;background:var(--bg-0);border:1px solid var(--line-soft); border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0} #ad-column .ad-footer{margin-top:auto;font-size:9px;color:var(--txt-dimmer);text-align:center;padding-top:8px} @media (max-width:1280px){ #app{grid-template-columns:58px 1fr 264px; grid-template-areas: "menu menu menu" "opts opts opts" "tools view side" "status status status";} #ad-column{display:none} } /* ---------- Responsive dialogs ---------- */ @media (max-width:640px){ .dialog{min-width:0;width:100%;max-width:100%;border-radius:var(--r-lg)} .dialog h3{font-size:14px;padding:14px 14px} .dialog .d-body{padding:12px 14px;gap:12px} .dialog .d-row{flex-wrap:wrap;gap:8px} .dialog .d-row label{width:auto;min-width:64px} .dialog .d-foot{flex-wrap:wrap;padding:12px 14px} .dialog .d-foot button{flex:1;min-width:120px;padding:10px 16px;font-size:14px} #d-prev-canvas{max-width:100%;height:auto} #d-text{font-size:16px} } @media (max-width:480px){ #overlay{padding:8px;align-items:flex-start} .dialog{margin-top:8px} .dialog .d-row{font-size:13px} } .dialog input[type=number]{max-width:90px} .dialog input[type=color]{flex:0 0 auto} .dialog textarea{width:100%;box-sizing:border-box} /* ===================================================================== Font Picker — searchable, font-rendered dropdown Progressively enhances