*{box-sizing:border-box}
:root{--bg:#080a0e;--panel:#10141b;--panel2:#0c1016;--line:#252c37;--text:#f4f7fb;--muted:#8c96a6;--blue:#67a8ff;--glow:rgba(75,145,255,.24)}
body{margin:0;background:radial-gradient(circle at 50% 0%,#17202d 0,#0a0d12 34%,#06080b 100%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;min-height:100vh}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,black,transparent 75%)}
.app-shell{max-width:1120px;margin:auto;padding:0 22px 40px}.topbar{height:64px;border-bottom:1px solid #202631;display:flex;align-items:center;justify-content:space-between;font-size:12px;letter-spacing:.08em}.brand{font-weight:700}.brand b{color:#78adff}.brand-mark{color:#54a8ff;margin-right:8px}.top-meta{color:#697587}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#65a8ff;box-shadow:0 0 12px #65a8ff;margin-right:7px}
.hero{text-align:center;padding:70px 10px 45px}.eyebrow{font-size:11px;letter-spacing:.28em;color:#667386;margin-bottom:14px}.hero h1{font-size:clamp(34px,6vw,62px);line-height:1.05;margin:0;font-weight:750;letter-spacing:-.04em}.hero h1 span{color:var(--blue);text-shadow:0 0 28px var(--glow)}.hero p{color:var(--muted);max-width:600px;margin:18px auto 0;font-size:15px}
.workspace{display:grid;gap:18px}.upload-card,.preview-card,.palette-card,.code-card{background:linear-gradient(145deg,rgba(20,25,33,.96),rgba(10,13,18,.96));border:1px solid var(--line);border-radius:22px;box-shadow:0 20px 70px rgba(0,0,0,.25)}.upload-card{min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;border-style:dashed;transition:.2s}.upload-card.drag{border-color:var(--blue);box-shadow:0 0 0 4px rgba(103,168,255,.08),0 20px 70px rgba(0,0,0,.3)}.upload-icon{width:52px;height:52px;border:1px solid #354050;border-radius:15px;display:grid;place-items:center;font-size:28px;color:var(--blue);margin-bottom:14px;background:#111720}.upload-card h2{margin:0;font-size:20px}.upload-card p{color:var(--muted);margin:8px 0 20px;font-size:14px}.upload-card small{color:#5e6878;margin-top:13px}.primary-btn,.ghost-btn{border:0;border-radius:10px;padding:11px 16px;font-weight:650;cursor:pointer;color:white;transition:.18s}.primary-btn{background:linear-gradient(135deg,#4d96ff,#6bb5ff);box-shadow:0 7px 25px rgba(70,145,255,.2)}.primary-btn:hover{transform:translateY(-1px);filter:brightness(1.08)}.primary-btn.small{padding:8px 12px;font-size:12px}.ghost-btn{background:#151b24;border:1px solid #2a3340;color:#aeb8c7}.ghost-btn:hover{background:#1b222d;color:white}.preview-card,.palette-card,.code-card{padding:18px}.card-head{display:flex;align-items:center;justify-content:space-between;color:#7d899a;font-size:10px;letter-spacing:.18em;font-weight:700;margin-bottom:14px}.actions{display:flex;gap:8px;align-items:center}.image-wrap{background:#080a0e;border-radius:15px;overflow:hidden;display:flex;justify-content:center;max-height:430px}.image-wrap img{max-width:100%;max-height:430px;display:block;object-fit:contain}.palette{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.swatch{min-width:0;border:1px solid #2a313c;border-radius:15px;overflow:hidden;background:#0b0e13;cursor:pointer;transition:.18s}.swatch:hover{transform:translateY(-3px);border-color:#536174}.color-box{height:120px}.swatch-info{padding:11px}.hex{font-size:13px;font-weight:750;letter-spacing:.04em}.rgb{font-size:10px;color:#687385;margin-top:4px}.copy-label{font-size:9px;color:#526071;margin-top:8px}.code-card{margin-top:18px}.code-card pre{margin:0;white-space:pre-wrap;background:#080b10;border:1px solid #1e2530;border-radius:13px;padding:16px;color:#a9c9f5;font-size:12px;line-height:1.7;overflow:auto}.hidden{display:none!important}footer{text-align:center;color:#4f5968;font-size:10px;letter-spacing:.12em;margin-top:34px}footer span{color:#6daeff;margin:0 5px}
@media(max-width:720px){.app-shell{padding:0 14px 30px}.topbar{height:56px}.hero{padding:48px 4px 30px}.hero h1{font-size:38px}.hero p{font-size:13px}.upload-card{min-height:245px}.palette{grid-template-columns:repeat(2,1fr)}.color-box{height:105px}.card-head{align-items:flex-start;gap:10px}.actions{flex-wrap:wrap;justify-content:flex-end}.preview-card,.palette-card,.code-card{padding:14px}}
@media(min-width:721px){.workspace{grid-template-columns:1fr 1fr}.upload-card{grid-column:1/-1}.palette-card{grid-column:1/-1}}