:root{--bg:#0f0a1a;--card-bg:#150f24;--border:#8b3ce8;--accent-from:#7c3aed;--accent-to:#a855f7;--green:#2ee88f;--text:#c9c3d9;--heading:#fff;--mono:ui-monospace, "JetBrains Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;--sans:"Segoe UI", system-ui, -apple-system, sans-serif}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);font-family:var(--sans);background-image:radial-gradient(80% 50% at 50% -10%,#7c3aed2e,#0000);min-height:100vh;margin:0;line-height:1.55}.page{flex-direction:column;align-items:center;gap:28px;max-width:1160px;margin:0 auto;padding:40px 20px 60px;display:flex}.app-header{align-items:center;gap:16px;width:100%;max-width:720px;display:flex}.logo-tile{background:linear-gradient(135deg, var(--accent-from), var(--accent-to));border-radius:16px;flex-shrink:0;justify-content:center;align-items:center;width:56px;height:56px;display:flex;box-shadow:0 0 24px #8b3ce873}.header-text{flex-direction:column;align-items:flex-start;gap:6px;display:flex}.app-header h1{color:var(--heading);font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;margin:0;font-size:1.35rem;font-weight:700}.badge{font-family:var(--mono);letter-spacing:.14em;color:#08150e;background:var(--green);border-radius:6px;padding:2px 8px;font-size:.68rem;font-weight:700}.app-footer{font-family:var(--mono);letter-spacing:.08em;color:#c9c3d98c;text-align:center;font-size:.75rem}.card{background:var(--card-bg);border:2px solid var(--border);border-radius:24px;flex-direction:column;gap:26px;width:100%;padding:36px;display:flex;box-shadow:0 0 40px #8b3ce847,0 0 100px #8b3ce81a}.card-import{max-width:720px}.card-result{max-width:1160px}.dropzone{text-align:center;cursor:pointer;border:2px dashed #8b3ce88c;border-radius:16px;flex-direction:column;align-items:center;gap:8px;padding:40px 24px;transition:border-color .15s,background .15s;display:flex}.dropzone:hover,.dropzone-active{border-color:var(--accent-to);background:#7c3aed14}.dropzone-icon{color:var(--accent-to)}.dropzone-title{color:var(--heading);font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:.95rem;font-weight:700}.dropzone-hint{margin:0 0 10px;font-size:.85rem}.file-preview{background:#7c3aed14;border:1px solid #8b3ce859;border-radius:14px;align-items:center;gap:16px;padding:12px 16px;display:flex}.thumb{object-fit:contain;background:repeating-conic-gradient(#efeaf7 0% 25%,#d9d2e8 0% 50%) 0 0/16px 16px;border-radius:8px;flex-shrink:0;width:72px;height:72px}.file-meta{flex-direction:column;gap:2px;min-width:0;display:flex}.file-name{color:var(--heading);font-family:var(--mono);text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;overflow:hidden}.file-dims{font-size:.8rem}.settings{flex-direction:column;gap:14px;display:flex}.settings h2,.panel h2{color:var(--heading);font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;margin:0;font-size:.85rem;font-weight:700}.settings h2:before,.panel h2:before{content:"▸ ";color:var(--green)}.setting-group{flex-direction:column;gap:14px;display:flex}.setting-disabled{opacity:.45;pointer-events:none}.setting-row{grid-template-columns:220px 1fr;align-items:center;gap:12px;display:grid}.setting-row>label{color:var(--heading);flex-direction:column;font-size:.88rem;font-weight:600;display:flex}.setting-hint{color:var(--text);font-size:.74rem;font-weight:400}.setting-controls{align-items:center;gap:12px;min-width:0;display:flex}.setting-value{font-family:var(--mono);color:var(--green);text-align:right;min-width:44px;font-size:.82rem}.setting-note{color:var(--green);margin:0;font-size:.8rem}input[type=range]{accent-color:var(--accent-to);flex:1;min-width:0}input[type=number],select{background:var(--bg);color:var(--heading);font-family:var(--mono);border:1px solid #8b3ce880;border-radius:8px;width:90px;padding:8px 10px;font-size:.85rem}input[type=number]:focus,select:focus{outline:2px solid var(--accent-to);outline-offset:1px}select{width:auto}.checkbox{color:var(--heading);cursor:pointer;white-space:nowrap;align-items:center;gap:7px;font-size:.85rem;display:inline-flex}.checkbox input{accent-color:var(--accent-to);width:16px;height:16px}.size-controls{flex-wrap:wrap}.size-x{color:var(--text)}.btn{font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;border:none;border-radius:14px;justify-content:center;align-items:center;gap:10px;padding:14px 26px;font-size:.9rem;font-weight:700;transition:box-shadow .15s,transform 50ms;display:inline-flex}.btn:active{transform:translateY(1px)}.btn-primary{background:linear-gradient(135deg, var(--accent-from), var(--accent-to));color:#fff}.btn-primary:hover:not(:disabled){box-shadow:0 0 22px #a855f78c}.btn-primary:disabled{opacity:.45;cursor:not-allowed}.btn-secondary{color:var(--accent-to);border:1.5px solid var(--border);background:0 0;padding:12px 22px}.btn-secondary:hover{background:#7c3aed1f;box-shadow:0 0 16px #8b3ce84d}.btn-cta{width:100%}.spinner{border:2px solid #ffffff59;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.error-box{color:#ff9db4;background:#e83c601f;border:1px solid #e83c6080;border-radius:10px;margin:0;padding:10px 14px;font-size:.85rem}.compare{grid-template-columns:1fr 1fr;gap:26px;display:grid}.panel{flex-direction:column;gap:12px;min-width:0;display:flex}.canvas-box{aspect-ratio:4/3;background:repeating-conic-gradient(#efeaf7 0% 25%,#d9d2e8 0% 50%) 0 0/20px 20px;border:1px solid #8b3ce866;border-radius:14px;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.canvas-box img{object-fit:contain;width:100%;height:100%;padding:10px;position:absolute;inset:0}.canvas-box .ghost{opacity:.3}.info{flex-direction:column;gap:4px;margin:0;font-size:.84rem;display:flex}.info>div{gap:10px;display:flex}.info dt{font-family:var(--mono);color:#c9c3d9a6;text-transform:uppercase;letter-spacing:.08em;min-width:120px;padding-top:2px;font-size:.72rem}.info dd{color:var(--heading);overflow-wrap:anywhere;margin:0}.info .ok{color:var(--green)}.info .warn{color:#ffb84d}.notes{flex-direction:column;gap:4px;margin:0;padding:0;font-size:.82rem;list-style:none;display:flex}.notes li:before{content:"▸ ";color:var(--green)}.result-actions{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.result-buttons{flex-wrap:wrap;gap:14px;display:flex}@media (width<=860px){.compare{grid-template-columns:1fr}.setting-row{grid-template-columns:1fr;gap:6px}.card{padding:24px}}