:root {
  --bg: #1A0A10;
  --bg-card: #221318;
  --bg-input: #180b10;
  --text: #f0dce4;
  --text-secondary: #a07888;
  --text-muted: #5c3a48;
  --primary: #F43F5E;
  --secondary: #FB7185;
  --accent: #06B6D4;
  --border: rgba(244,63,94,0.08);
  --border-strong: rgba(244,63,94,0.2);
  --radius: 12px;
  --font: 'Inter',system-ui,sans-serif;
  --transition: 0.2s ease;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;overflow:hidden}

.header{display:flex;align-items:center;justify-content:space-between;padding:6px 14px;background:var(--bg-card);border-bottom:1px solid var(--border);height:40px}
.header-left,.header-right{display:flex;align-items:center;gap:8px}
.logo{font-size:1rem}
h1{font-size:0.88rem;font-weight:700;color:var(--primary)}

.btn{padding:4px 10px;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--text-secondary);font-family:var(--font);font-size:0.72rem;cursor:pointer;transition:all var(--transition);white-space:nowrap}
.btn:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}
.btn:disabled{opacity:0.4;cursor:not-allowed}
.btn.accent{border-color:var(--accent);color:var(--accent);background:rgba(6,182,212,0.06)}

.app-layout{display:flex;height:calc(100vh - 40px)}
.sidebar{width:260px;padding:10px;overflow-y:auto;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.preview-area{flex:1;overflow-y:auto;padding:10px}

.sec{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:8px}
.sec h3{font-size:0.68rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.row{display:flex;gap:4px;align-items:center;margin-bottom:4px}
.input,.range{padding:4px 6px;border:1px solid var(--border);border-radius:6px;background:var(--bg-input);color:var(--text);font-family:var(--font);font-size:0.72rem;width:100%}
.input:focus{outline:none;border-color:var(--primary)}
.label{font-size:0.62rem;color:var(--text-muted);min-width:50px;flex-shrink:0}
.val{font-size:0.62rem;color:var(--text-secondary);min-width:32px;text-align:right}
.color-input{width:28px;height:24px;border:1px solid var(--border);border-radius:4px;cursor:pointer;padding:0}

/* Upload */
.upload-box{display:flex;align-items:center;justify-content:center;height:60px;border:2px dashed var(--border-strong);border-radius:var(--radius);color:var(--text-muted);font-size:0.72rem;cursor:pointer;transition:all var(--transition)}
.upload-box:hover{border-color:var(--primary);color:var(--primary)}
.img-info{font-size:0.62rem;color:var(--text-muted);margin-top:4px}

/* Presets */
.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.preset-btn{padding:4px 6px;border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--text-secondary);font-size:0.6rem;cursor:pointer;transition:.2s;text-align:left}
.preset-btn:hover{border-color:var(--primary);color:var(--primary)}
.preset-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(6,182,212,0.06)}
.preset-dim{font-size:0.52rem;color:var(--text-muted)}

/* Preview Grid */
.preview-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));gap:10px}
.empty-state{grid-column:1/-1;text-align:center;padding:60px;color:var(--text-muted);font-size:0.82rem}

.preview-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:.2s}
.preview-card:hover{border-color:var(--border-strong)}
.preview-card canvas{width:100%;display:block}
.preview-card-info{padding:5px 8px;display:flex;align-items:center;justify-content:space-between}
.preview-name{font-size:0.68rem;font-weight:600;color:var(--text)}
.preview-dim{font-size:0.58rem;color:var(--text-muted)}
.dl-btn{padding:2px 6px;border:1px solid var(--border);border-radius:4px;background:transparent;color:var(--secondary);font-size:0.58rem;cursor:pointer}
.dl-btn:hover{border-color:var(--secondary)}

@media(max-width:700px){
  .app-layout{flex-direction:column}
  .sidebar{width:100%;border-right:none;border-bottom:1px solid var(--border);max-height:45vh}
}