:root{
  --bg:#0b1020;
  --panel:#131a2b;
  --panel2:#182136;
  --line:#2a3653;
  --text:#f8fafc;
  --muted:#94a3b8;
  --accent:#7c3aed;
  --accent2:#06b6d4;
  --danger:#ef4444;
}
*{box-sizing:border-box}
html,body{margin:0;background:
  radial-gradient(circle at top left,rgba(124,58,237,.28),transparent 32%),
  radial-gradient(circle at top right,rgba(6,182,212,.18),transparent 28%),
  var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;min-height:100%}
button,input,select{font:inherit}
button,select{border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:14px}
button{cursor:pointer;padding:12px 14px}
button:hover{filter:brightness(1.08)}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid rgba(255,255,255,.06);backdrop-filter:blur(15px);position:sticky;top:0;z-index:10;background:rgba(11,16,32,.74)}
.topbar h1{font-size:20px;margin:0}.topbar p{margin:3px 0 0;color:var(--muted);font-size:12px}
.ghost{background:transparent}
.app-shell{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;padding:20px;max-width:1500px;margin:auto}
.viewer-card,.controls-card{background:rgba(19,26,43,.82);border:1px solid rgba(255,255,255,.08);border-radius:22px;box-shadow:0 20px 70px rgba(0,0,0,.25)}
.viewer-card{padding:14px;min-height:70vh}
.viewer-toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px}
.upload-btn{display:inline-flex;align-items:center;padding:11px 14px;border-radius:14px;background:linear-gradient(135deg,var(--accent),var(--accent2));font-weight:700;cursor:pointer}
.compare-wrap{color:var(--muted);font-size:14px}
.canvas-wrap{position:relative;display:flex;align-items:center;justify-content:center;background:
  linear-gradient(45deg,#111827 25%,transparent 25%) -10px 0/20px 20px,
  linear-gradient(-45deg,#111827 25%,transparent 25%) -10px 0/20px 20px,
  linear-gradient(45deg,transparent 75%,#111827 75%) -10px 0/20px 20px,
  linear-gradient(-45deg,transparent 75%,#111827 75%) -10px 0/20px 20px,
  #0f172a;border-radius:18px;overflow:auto;min-height:60vh}
canvas{max-width:100%;max-height:70vh;display:block}
.empty-state{position:absolute;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted)}
.empty-icon{font-size:44px}.empty-state strong{color:white}
.image-info{padding:10px 2px 0;color:var(--muted);font-size:12px}
.controls-card{padding:12px;height:max-content;position:sticky;top:90px}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:14px}
.tab{padding:10px 5px;font-size:12px}
.tab.active{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent}
.panel{display:none}.panel.active{display:block}
.control{margin:17px 4px}.control label{display:flex;justify-content:space-between;margin-bottom:8px;color:#dbeafe;font-size:14px}
input[type=range]{width:100%;accent-color:#8b5cf6}
.button-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.danger-soft{border-color:rgba(239,68,68,.45)}
.hint,.status{color:var(--muted);font-size:13px;line-height:1.45}
.ratio-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}.ratio-btn.active{outline:2px solid #8b5cf6}
.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;font-weight:800}
.secondary{background:#24324d}
.full{width:100%;margin-top:12px}
.select-label{display:block;margin:16px 0 7px;color:#cbd5e1;font-size:13px}
select{width:100%;padding:12px}
.ai-hero{padding:16px;background:linear-gradient(145deg,rgba(124,58,237,.22),rgba(6,182,212,.12));border-radius:18px;border:1px solid rgba(139,92,246,.25)}
.ai-hero h2{margin:9px 0 5px;font-size:20px}.ai-hero p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.badge{font-size:10px;font-weight:800;letter-spacing:.08em;color:#c4b5fd}
.status code{color:#c4b5fd}
footer{text-align:center;color:var(--muted);padding:6px 20px 25px;font-size:12px}
@media(max-width:900px){
  .app-shell{grid-template-columns:1fr;padding:10px}
  .controls-card{position:static}
  .viewer-card{min-height:auto}
  .canvas-wrap{min-height:52vh}
  .topbar{padding:14px}
}

.mini-help{
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
  line-height:1.45;
}