*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',Arial,sans-serif;background:var(--bg);color:var(--text)}:root{--bg:#f5f5f6;--surface:#fff;--surface2:#fafafa;--canvas-space:#e7e7ea;--border:#e5e5e7;--border2:#f0f0f2;--text:#111;--muted:#707075;--muted2:#9b9ba1;--accent:#2563eb;--accent2:#eff4ff;--danger:#dc2626;--green:#16a34a;--gold:#d97706;--shadow:0 8px 30px rgba(0,0,0,.09);--header:56px;--left:285px;--right:290px;--radius:12px}body.dark{--bg:#111214;--surface:#18191c;--surface2:#202126;--canvas-space:#22242a;--border:#2d2f36;--border2:#26282e;--text:#f5f5f6;--muted:#b1b1b7;--muted2:#7f8088;--accent2:#17233d;--shadow:0 8px 35px rgba(0,0,0,.35)}button,input{font:inherit}.topbar{position:fixed;inset:0 0 auto 0;height:var(--header);background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;padding:0 16px;z-index:40}body.dark .topbar{background:rgba(24,25,28,.9)}.brand{font-weight:800;font-size:18px;letter-spacing:-.5px;color:var(--text);text-decoration:none}.brand span{color:var(--accent)}.spacer{flex:1}.statbar{display:flex;gap:16px}.stat{text-align:center}.stat b{display:block;font-size:13px}.stat small{display:block;font-size:9px;color:var(--muted2);text-transform:uppercase;letter-spacing:.5px}.credits{border:1px solid #c7d9fc;background:var(--accent2);color:var(--accent);font-weight:700;border-radius:999px;padding:6px 11px;font-size:13px}.btn{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:8px;padding:8px 12px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s}.btn:hover{transform:translateY(-1px);box-shadow:0 3px 12px rgba(0,0,0,.08)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn.primary{background:var(--accent);border-color:var(--accent);color:white}.btn.danger{background:#fff1f2;border-color:#fecdd3;color:var(--danger)}body.dark .btn.danger{background:#331b20;border-color:#5c2630}.btn.green{background:var(--green);border-color:var(--green);color:white}.btn.sm{padding:5px 9px;font-size:12px}.app{height:100vh;padding-top:var(--header);display:flex}.panel{background:var(--surface);border-color:var(--border);position:relative;z-index:20}.left-panel{width:var(--left);border-right:1px solid var(--border);overflow:visible;transition:.2s}.right-panel{width:var(--right);border-left:1px solid var(--border);overflow:visible;transition:.2s}.left-panel.collapsed{margin-left:calc(var(--left) * -1)}.right-panel.collapsed{margin-right:calc(var(--right) * -1)}.panel-scroll{height:100%;overflow:auto}.panel-scroll::-webkit-scrollbar{width:5px}.panel-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.collapse-btn{position:absolute;top:18px;width:30px;height:48px;border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:999px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);z-index:50;cursor:pointer;font-weight:800}.left-panel .collapse-btn{right:-16px}.right-panel .collapse-btn{left:-16px}.section{padding:14px 16px;border-bottom:1px solid var(--border2)}.section-title{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted2);font-weight:800;margin-bottom:10px}.lb-tabs{display:flex;background:var(--surface2);border:1px solid var(--border2);padding:3px;border-radius:9px;margin-bottom:10px;gap:2px}.lb-tab{flex:1;border:0;background:transparent;color:var(--muted);font-size:11px;font-weight:700;padding:6px 4px;border-radius:7px;cursor:pointer}.lb-tab.active{background:var(--surface);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.07)}.lb-row{display:flex;gap:9px;align-items:center;padding:8px 6px;border-radius:9px}.lb-row:hover{background:var(--surface2)}.rank{width:18px;text-align:center;font-size:11px;font-weight:900;color:var(--muted2)}.swatch-mini{width:13px;height:13px;border-radius:3px;border:1px solid rgba(0,0,0,.16);flex:0 0 auto}.lb-info{flex:1;min-width:0}.lb-name{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lb-sub{font-size:10px;color:var(--muted2)}.lb-val{font-size:12px;font-weight:800}.canvas-wrap{flex:1;position:relative;background:var(--canvas-space);overflow:hidden;cursor:crosshair}#main-canvas{display:block;width:100%;height:100%}.hover-tip{position:absolute;display:none;z-index:30;pointer-events:none;background:rgba(17,17,17,.88);color:#fff;border-radius:7px;font-size:11px;padding:6px 9px;white-space:nowrap}.canvas-controls{position:absolute;bottom:16px;left:16px;display:flex;flex-direction:column;gap:5px}.zoom-btn,.mode-btn{width:36px;height:36px;background:rgba(255,255,255,.93);border:1px solid #dedee2;border-radius:9px;box-shadow:0 2px 8px rgba(0,0,0,.08);cursor:pointer;font-weight:800;color:#222}.zoom-label{background:rgba(255,255,255,.93);border:1px solid #dedee2;border-radius:8px;font-size:11px;font-weight:800;text-align:center;padding:5px 0;color:#333}.coord-bar{position:absolute;bottom:16px;right:16px;background:rgba(255,255,255,.93);border:1px solid #dedee2;border-radius:8px;padding:5px 10px;font-size:11px;font-weight:700;color:#444}.pixel-card .empty{text-align:center;color:var(--muted2);padding:30px 12px;font-size:13px}.pixel-top{display:flex;gap:11px;align-items:flex-start}.pixel-preview{width:48px;height:48px;border-radius:8px;border:2px solid var(--border);background:white}.coords{font-size:18px;font-weight:900;letter-spacing:-.4px}.badge{display:inline-flex;border-radius:999px;padding:3px 8px;font-size:10px;font-weight:800;background:var(--surface2);border:1px solid var(--border);color:var(--muted)}.badge.yours{background:#ecfdf5;color:#059669;border-color:#a7f3d0}.badge.protected{background:#fffbeb;color:#b45309;border-color:#fde68a}.meta{margin-top:12px;display:flex;flex-direction:column;gap:7px}.meta-row{display:flex;justify-content:space-between;font-size:12px}.meta-row span:first-child{color:var(--muted2)}.meta-row span:last-child{font-weight:700}.action-main{width:100%;justify-content:center;margin-bottom:8px}.action-row{display:flex;gap:8px}.action-row .btn{flex:1}.protected-box{background:#fffbeb;color:#a16207;border:1px solid #fde68a;border-radius:10px;padding:10px;font-size:12px;font-weight:700}.donate-card{background:var(--surface2);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:14px;padding:13px;box-shadow:none}.donate-card h4{font-size:13px;margin-bottom:4px}.donate-card p{font-size:11px;color:var(--text-2);margin-bottom:10px;line-height:1.4}.donate-buttons{display:flex;gap:6px;flex-wrap:wrap}.donate-buttons .btn{background:var(--surface);color:var(--text);border-color:var(--border)}body.dark .donate-card{background:rgba(255,255,255,.035);border-color:var(--border);border-left-color:var(--accent)}body.dark .donate-buttons .btn{background:rgba(255,255,255,.055);color:var(--text);border-color:var(--border)}.color-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;margin-bottom:10px}.color-btn{aspect-ratio:1;border:2px solid transparent;border-radius:6px;cursor:pointer;position:relative;overflow:hidden}.color-btn:hover{transform:scale(1.12)}.color-btn.selected{border-color:var(--text);box-shadow:0 0 0 1px rgba(0,0,0,.2)}.color-btn.locked{opacity:.6}.lock{position:absolute;inset:0;background:rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;color:white;font-size:10px}.palette-box{border-radius:10px;border:1px solid #c7d9fc;background:var(--accent2);color:var(--accent);padding:10px;font-size:12px;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:8px}.palette-ok{border-radius:10px;border:1px solid #a7f3d0;background:#ecfdf5;color:#059669;padding:9px;font-size:12px;font-weight:800}body.dark .palette-ok{background:#10261c;border-color:#14532d;color:#34d399}.subtle{font-size:10px;color:var(--muted2);margin:8px 0 5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);z-index:100;display:none;align-items:center;justify-content:center}.modal-overlay.open{display:flex}.modal{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);width:520px;max-width:94vw;max-height:90vh;overflow:auto}.modal-head{padding:20px 22px 8px;display:flex;justify-content:space-between;gap:16px}.modal-head h2{font-size:19px}.modal-head p{font-size:13px;color:var(--muted);margin-top:3px}.modal-body{padding:12px 22px 22px}.close{width:30px;height:30px;border-radius:999px;border:0;background:var(--surface2);color:var(--muted);cursor:pointer}.bundle-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.bundle{border:1px solid var(--border);border-radius:12px;padding:15px;position:relative}.bundle.popular{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent2)}.tag{position:absolute;right:12px;top:-9px;background:var(--accent);color:white;border-radius:999px;font-size:9px;font-weight:900;padding:3px 8px;text-transform:uppercase;letter-spacing:.5px}.bundle-price{font-size:21px;font-weight:900}.bundle-credits{font-size:13px;color:var(--accent);font-weight:800}.bundle-per,.bundle-bonus{font-size:11px;color:var(--muted2);margin-top:3px}.bundle-bonus{color:var(--green);font-weight:800}.bundle .btn{width:100%;justify-content:center;margin-top:10px}.bundle:first-child .btn{margin-top:23px}.amount-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}.amount{border:1px solid var(--border);background:var(--surface);border-radius:10px;padding:10px 4px;cursor:pointer;text-align:center}.amount.active{border-color:var(--accent);background:var(--accent2)}.amount b{display:block}.custom-row{display:none;gap:8px;margin:12px 0}.custom-row input{flex:1;border:1px solid var(--border);border-radius:8px;padding:9px;background:var(--surface);color:var(--text)}.page{min-height:100vh;overflow:auto;padding-top:var(--header);background:var(--bg)}.page-inner{max-width:900px;margin:0 auto;padding:34px 20px}.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px;margin-bottom:16px;box-shadow:0 1px 6px rgba(0,0,0,.04)}.card h1,.card h2{margin-bottom:10px}.card p,.card li{color:var(--muted);line-height:1.7}.form{max-width:420px}.field{margin-bottom:12px}.field label{display:block;font-size:12px;font-weight:800;color:var(--muted);margin-bottom:5px}.field input{width:100%;padding:11px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text)}.toast-wrap{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:150;display:flex;flex-direction:column;gap:7px;pointer-events:none}.toast{background:rgba(17,17,17,.92);color:white;border-radius:10px;padding:10px 15px;font-size:13px;font-weight:700;animation:toastIn .2s,toastOut .25s 2.35s forwards}.toast.success{background:rgba(22,163,74,.94)}.toast.error{background:rgba(220,38,38,.94)}.toast.info{background:rgba(37,99,235,.94)}@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1}}@keyframes toastOut{to{opacity:0;transform:translateY(-8px)}}@media(max-width:900px){:root{--left:245px;--right:265px}.statbar{display:none}.brand{font-size:16px}.topbar{gap:8px;padding:0 10px}.btn{padding:7px 9px}.left-panel{display:none}.right-panel{width:270px}}
/* Device compatibility updates */
@media (max-width: 760px) {
html, body { overflow:auto; }
.topbar { height:auto; min-height:58px; flex-wrap:wrap; gap:8px; padding:10px 12px; }
.brand { font-size:17px; }
.page { padding-top:74px; }
.page-inner { padding:22px 14px; }
.card { padding:18px; border-radius:14px; }
.form { max-width:100%; }
.btn { min-height:38px; }
}
@media (max-width: 420px) {
.topbar .spacer { display:none; }
.topbar { justify-content:space-between; }
.page { padding-top:92px; }
.card h1 { font-size:24px; }
}
/* V16.7 legal page/link polish */
#legal-links a{color:var(--muted);text-decoration:none;font-weight:700;}
#legal-links a:hover{color:var(--text);}
body.dark #legal-links a{color:rgba(245,245,246,.78);}
body.dark #legal-links a:hover{color:#fff;}