:root{
  --accent-1:#ff5a00; --accent-2:#ff9a3c;
  --bg:#f4f6f9; --panel:#ffffff; --muted:#6b7280; --text:#0f172a;
  --radius:12px;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
.app-wrap{max-width:1200px;margin:18px auto;padding:12px}
.app{display:flex;gap:18px;align-items:flex-start}
.panel{width:340px;background:var(--panel);padding:18px;border-radius:var(--radius);border:1px solid rgba(15,23,42,0.04);box-shadow:0 8px 28px rgba(15,23,42,0.03)}
.stage{flex:1;display:flex;flex-direction:column;gap:14px;align-items:center}

/* Brand */
.brand{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.logo{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,var(--accent-1),var(--accent-2));display:flex;align-items:center;justify-content:center;color:white;font-weight:800}
h1{margin:0;font-size:18px;color:var(--accent-1)}
.muted{font-size:13px;color:var(--muted)}

/* groups */
.group{margin-bottom:14px}
.group h3{margin:0 0 8px 0;color:var(--accent-2);font-size:13px}
label{display:block;margin-bottom:6px;font-weight:600;font-size:13px}
.small{font-size:12px;color:var(--muted)}
.inline{display:flex;align-items:center;gap:8px;font-weight:600}

/* inputs */
input[type="file"]{width:100%;padding:8px;border-radius:8px;border:1px solid rgba(15,23,42,0.06);background:#fff}
input[type="range"]{width:100%}
input[type="color"]{width:56px;height:36px;padding:0;border:0;background:transparent;cursor:pointer}

/* actions */
.actions{display:flex;gap:8px;margin-top:10px}
.btn-primary{padding:10px 14px;border-radius:10px;border:none;background:linear-gradient(180deg,var(--accent-1),var(--accent-2));color:white;cursor:pointer;font-weight:700}
.btn-ghost{padding:10px 14px;border-radius:10px;border:1px solid rgba(15,23,42,0.06);background:transparent;cursor:pointer}

/* preview canvas */
.preview-wrap{width:100%;display:flex;justify-content:center;align-items:center;padding:16px;background:linear-gradient(180deg,rgba(255,255,255,0.6),rgba(255,255,255,0.8));border-radius:12px;border:1px solid rgba(15,23,42,0.03)}
#outputCanvas{background:#ffffff;border-radius:10px;image-rendering:pixelated;max-width:100%;height:auto;border:6px solid rgba(0,0,0,0.03);width:600px;max-width:92%}

/* holo badge */
.holo-container{display:flex;justify-content:center}
.holo-badge{display:inline-flex;gap:10px;align-items:center;padding:8px 14px;border-radius:999px;background:linear-gradient(90deg, rgba(255,90,0,0.12), rgba(255,154,60,0.09));text-decoration:none;color:var(--text);font-weight:700}
.holo-icon{display:inline-flex;width:28px;height:28px;border-radius:7px;background:linear-gradient(135deg,var(--accent-2),var(--accent-1));color:white;align-items:center;justify-content:center}

/* footer */
.footer-note{font-size:13px;color:var(--muted);text-align:center}

/* responsive */
@media (max-width:820px){
  .app{flex-direction:column}
  .panel{width:100%}
  #outputCanvas{width:92%}
}