:root{--bg:#0b0b0b;--card:#111111;--muted:#9ca3af;--text:#f5f5f5;--accent:#ffffff;--accent-2:#ffffff;--border:#d3d3d3}:root.light{--bg:#ffffff;--card:#f8f8f8;--muted:#6b7280;--text:#111111;--accent:#000000;--accent-2:#000000;--border:#e5e7eb}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:radial-gradient(1200px 600px at 10% -10%,rgb(96 165 250 / .15),transparent),radial-gradient(1000px 500px at 90% 0%,rgb(110 231 183 / .12),transparent),var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column;background-repeat:no-repeat}.container{max-width:1280px;margin:0 auto;padding:16px;width:100%!important}header h1{margin:24px 0 6px;font-size:32px;letter-spacing:.2px}.subtitle{margin:0 0 12px;color:var(--muted)}.nav{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px}.brand{display:inline-flex;align-items:center;gap:10px}.site-title{margin:0;font-size:22px;font-weight:700;letter-spacing:.3px}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;background:var(--card);border:1px solid var(--border);color:var(--text);cursor:pointer}.icon-btn:hover{background:rgb(255 255 255 / .06)}.sun-icon{display:none}html.light .sun-icon{display:block}html.light .moon-icon{display:none}.links-row{gap:8px;margin-top:8px}.links-row .icon-btn{width:40px;height:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center}.empty-hero{margin-bottom:16px}.empty-title{margin:8px 0;font-size:22px;font-weight:600}.empty-desc{color:var(--muted);margin:0 0 12px;max-width:70ch}.empty-points{margin:0 0 12px;padding-left:18px;color:var(--muted)}.empty-points li{margin:4px 0}.sample-swatches{display:grid;grid-template-columns:repeat(2,minmax(0,2fr));gap:8px;margin-top:8px}.sample-swatch{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden}.sample-swatch::before{content:"";display:block;height:54px;background:var(--c)}.sample-swatch span{display:block;padding:8px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--muted)}.card{background:linear-gradient(180deg,rgb(255 255 255 / .02),#fff0);border:1px solid var(--border);border-radius:16px;padding:16px;backdrop-filter:blur(8px);box-shadow:0 10px 30px rgb(0 0 0 / .25)}.grid{display:grid;grid-template-columns:1fr;gap:12px}.col.left,.col.right{min-width:0}.col.left{display:flex;flex-direction:column}.controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.file-name{color:var(--muted);font-size:14px}.image-info-bar{display:flex;justify-content:space-between;align-items:center;padding:8px;background:var(--card);border:1px solid var(--border);border-radius:12px;margin-bottom:16px}.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}input[type="range"]{accent-color:#2563eb}.empty #left-col{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh}.empty .controls{justify-content:center}.empty .results-header{justify-content:center;flex-direction:column;gap:12px}.empty .color-controls{justify-content:center}.file-label{display:inline-block}.file-label input{display:none}.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:12px;border:1px solid var(--border);color:var(--text);background:var(--card);cursor:pointer;transition:background .15s ease,box-shadow .2s ease,transform .05s ease;box-shadow:0 1px 2px rgb(0 0 0 / .2),0 2px 6px rgb(0 0 0 / .2)}.btn:hover{background:rgb(255 255 255 / .06)}.btn:focus{outline:none;box-shadow:0 0 0 3px rgb(255 255 255 / .25),0 1px 2px rgb(0 0 0 / .2)}.btn.primary{background:var(--text);color:var(--bg);border-color:var(--text)}.btn.primary:hover{background:#e5e5e5}.btn.secondary{background:var(--bg);color:var(--text);border-color:var(--border)}.btn.secondary:hover{background:#0e0e0e}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}.preview{display:flex;align-items:center;justify-content:center;width:100%;overflow:hidden}.preview img{max-width:1000px;max-height:500px;object-fit:contain;display:block}.preview img.clickable{cursor:crosshair}.color-tooltip{position:fixed;background:var(--card);color:var(--text);padding:5px 10px;border-radius:8px;border:1px solid var(--border);font-family:ui-monospace,monospace;font-size:14px;z-index:10000;pointer-events:none;display:flex;align-items:center;gap:8px;box-shadow:0 4px 12px rgb(0 0 0 / .3)}.color-tooltip-swatch{width:16px;height:16px;border-radius:4px;border:1px solid var(--border)}.format-toggle{display:flex;gap:4px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:4px}.format-toggle .btn{border:none;box-shadow:none;padding:8px 16px}.format-toggle .btn.active{background:var(--text);color:var(--bg)}.results{margin-top:8px}.results-header{display:flex;align-items:center;justify-content:space-between}.color-controls{display:flex;gap:10px;align-items:center}.color-hint{color:var(--muted);font-size:13px;margin:6px 0 4px}.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:12px}.swatches-4{grid-template-columns:repeat(2,minmax(0,1fr))}.swatch{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#0d1427}.swatch .color{height:96px}.swatch .meta{padding:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;font-size:14px;color:var(--muted)}.meta .row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px}.meta .tag{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:8px;background:#0b1326;color:#e6e9ef;border:1px solid #1f2a44}.meta .label{opacity:.7;font-weight:600}.copy{border:1px solid var(--border);border-radius:8px;padding:6px 10px;background:none;color:var(--text);cursor:pointer}.hidden{display:none}.footer{color:var(--muted);text-align:center}main.container{flex:1}.empty main.container{display:flex;align-items:center;justify-content:center}.empty .card{width:100%;max-width:820px;margin:0 auto}.empty #left-col{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:70vh}.empty .controls{justify-content:center}.empty .results-header{justify-content:center;flex-direction:column;gap:12px}.empty .color-controls{justify-content:center}.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#111827;color:#f9fafb;border:1px solid #1f2937;padding:12px 16px;border-radius:10px;box-shadow:0 10px 30px rgb(0 0 0 / .45),0 0 0 3px rgb(37 99 235 / .35) inset;z-index:9999;font-weight:600;opacity:.98}.loading{position:fixed;inset:0;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;background:rgb(2 6 23 / .55);backdrop-filter:blur(2px);z-index:9998}.loading.hidden{display:none}.spinner{width:36px;height:36px;border-radius:999px;border:3px solid rgb(255 255 255 / .2);border-top-color:#60a5fa;animation:spin 0.9s linear infinite}.loading .spinner{width:56px;height:56px;border-width:4px;border-top-color:#6ee7b7}.loading-text{margin-top:10px;color:#e6e9ef;font-weight:600}@keyframes spin{to{transform:rotate(360deg)}}@media (min-width:768px){header h1{font-size:32px}.swatches{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}}.upload-box{display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px dashed var(--border);border-radius:16px;padding:28px 20px;cursor:pointer;transition:background 0.2s,border-color 0.2s,transform 0.1s;width:100%;max-width:520px;min-height:260px;text-align:center;color:var(--muted);background:var(--card);margin:0 auto}.upload-box:hover,.upload-box.dragover{background:rgb(255 255 255 / .03);border-color:var(--accent-2);transform:scale(1.02)}.upload-box input{display:none}.upload-content{display:flex;flex-direction:column;align-items:center;gap:8px}.upload-icon{width:36px;height:36px;stroke:var(--accent-2)}.upload-box span{font-size:14px;font-weight:500;color:var(--muted)}