/* ═══════════════════════════════════════════════════════
   FLUX DEV LoRA STUDIO — style.css  |  Obsidian Luxe
   ═══════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #09090b;
  --card:        #18181b;
  --input-bg:    #0f0f11;
  --border:      rgba(255,255,255,0.07);
  --border-gold: rgba(245,158,11,0.38);
  --gold:        #f59e0b;
  --gold-dim:    rgba(245,158,11,0.12);
  --text:        #e4e4e7;
  --muted:       #71717a;
  --dim:         #3f3f46;
  --danger:      #ef4444;
  --success:     #22c55e;
  --info:        #60a5fa;
  --r-sm:  8px;  --r-md:  13px;  --r-lg:  18px;
  --font-d: 'Cinzel', serif;
  --font-b: 'Inter', sans-serif;
  --ease:  0.2s cubic-bezier(0.4,0,0.2,1);
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-b);
  background: var(--bg); color: var(--text);
  min-height: 100dvh; overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── AMBIENT ── */
.ambient-bg { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.orb { position:absolute; border-radius:50%; filter:blur(80px); opacity:0.15;
  animation:orb-drift 20s ease-in-out infinite alternate; }
.orb-1 { width:500px; height:500px;
  background:radial-gradient(circle,#f59e0b,transparent 70%); top:-150px; left:-160px; }
.orb-2 { width:380px; height:380px;
  background:radial-gradient(circle,#b45309,transparent 70%); bottom:-100px; right:-130px;
  animation-duration:15s; animation-delay:-7s; }
@keyframes orb-drift { from{transform:translate(0,0) scale(1)} to{transform:translate(36px,28px) scale(1.08)} }
.grain { position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:0.024; }

/* ── SHELL ── */
.app-shell { position:relative; z-index:1; max-width:580px; margin:0 auto;
  padding:0 16px 56px; display:flex; flex-direction:column; gap:14px; }

/* ── HEADER ── */
.app-header { display:flex; align-items:center; gap:12px; padding:28px 0 10px; }
.logo-icon { width:38px; height:38px; flex-shrink:0;
  background:linear-gradient(135deg,var(--gold),#b45309); border-radius:9px;
  display:grid; place-items:center; color:#000;
  box-shadow:0 0 20px rgba(245,158,11,0.28); }
.logo-icon svg { width:18px; height:18px; stroke-width:2.5; }
.logo-title { font-family:var(--font-d); font-size:1.12rem; font-weight:700;
  letter-spacing:0.04em; color:var(--text); white-space:nowrap; }
.logo-title em { font-style:normal; color:var(--gold); }

/* ── CARD ── */
.card { border-radius:var(--r-lg); padding:18px 20px; border:1px solid var(--border); }
.glass { background:rgba(24,24,27,0.72);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  box-shadow:0 4px 28px rgba(0,0,0,0.45); }

/* ── LABELS ── */
.field-label { display:flex; align-items:center; gap:6px;
  font-size:0.73rem; font-weight:600; letter-spacing:0.07em; text-transform:uppercase;
  color:var(--muted); margin-bottom:10px; }
.field-label svg { width:13px; height:13px; opacity:0.8; }
.field-label.sm { font-size:0.69rem; margin-bottom:7px; }
.optional-tag { font-size:0.62rem; font-weight:400; letter-spacing:0.03em; text-transform:none;
  color:var(--dim); background:rgba(255,255,255,0.04); border:1px solid var(--border);
  border-radius:4px; padding:1px 5px; margin-left:2px; }
.field-hint { display:flex; align-items:center; gap:5px;
  font-size:0.7rem; color:var(--dim); margin-top:8px; }
.field-hint svg { width:11px; height:11px; }

/* NEW: Field label row with mode toggle */
.field-label-row { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.mode-toggle-btn { display:flex; align-items:center; gap:4px;
  background:rgba(245,158,11,0.1); border:1px solid var(--border-gold);
  color:var(--gold); font-size:0.65rem; font-weight:600; text-transform:uppercase;
  padding:5px 10px; border-radius:6px; cursor:pointer;
  transition:all var(--ease); white-space:nowrap; }
.mode-toggle-btn:hover { background:rgba(245,158,11,0.2); border-color:var(--gold); }
.mode-toggle-btn.base64-mode { background:rgba(59,130,246,0.1); border-color:rgba(59,130,246,0.4);
  color:#60a5fa; }
.mode-toggle-btn.base64-mode:hover { background:rgba(59,130,246,0.2); border-color:#60a5fa; }
.mode-toggle-btn svg { width:11px; height:11px; }

/* ── INPUTS ── */
.input-row { display:flex; gap:8px; align-items:center; }
.text-input { flex:1; background:var(--input-bg); border:1px solid var(--border);
  border-radius:var(--r-sm); color:var(--text); font-family:var(--font-b);
  font-size:0.87rem; padding:10px 13px; outline:none; width:100%;
  transition:border-color var(--ease), box-shadow var(--ease); }
.text-input::placeholder { color:var(--dim); }
.text-input:focus { border-color:var(--border-gold); box-shadow:0 0 0 3px rgba(245,158,11,0.09); }
.text-input.sm { padding:8px 12px; font-size:0.83rem; }
.icon-btn { flex-shrink:0; width:40px; height:40px;
  background:var(--input-bg); border:1px solid var(--border);
  border-radius:var(--r-sm); color:var(--muted);
  display:grid; place-items:center; cursor:pointer; transition:all var(--ease); }
.icon-btn svg { width:15px; height:15px; }
.icon-btn:hover { border-color:var(--border-gold); color:var(--gold); }
.icon-btn:active { transform:scale(0.92); }

/* ── PROMPT ── */
.prompt-textarea { width:100%; background:var(--input-bg); border:1px solid var(--border);
  border-radius:var(--r-sm); color:var(--text); font-family:var(--font-b);
  font-size:0.87rem; line-height:1.6; padding:12px 14px; resize:vertical;
  min-height:88px; outline:none;
  transition:border-color var(--ease), box-shadow var(--ease); }
.prompt-textarea::placeholder { color:var(--dim); }
.prompt-textarea:focus { border-color:var(--border-gold);
  box-shadow:0 0 0 3px rgba(245,158,11,0.08), 0 0 16px rgba(245,158,11,0.04); }

/* ── SIZE GRID ── */
.size-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.size-btn { display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:10px 6px; background:var(--input-bg); border:1px solid var(--border);
  border-radius:var(--r-md); cursor:pointer; color:var(--muted); transition:all var(--ease); }
.size-btn:hover { border-color:var(--border-gold); color:var(--text); }
.size-btn.active { border-color:var(--gold); color:var(--gold); background:var(--gold-dim);
  box-shadow:0 0 12px rgba(245,158,11,0.14); }
.size-btn:active { transform:scale(0.95); }
.size-icon { display:block; background:currentColor; border-radius:2px; opacity:0.7; }
.ratio-1-1  { width:16px; height:16px; }
.ratio-16-9 { width:20px; height:11px; }
.ratio-9-16 { width:11px; height:20px; }
.ratio-4-3  { width:18px; height:13px; }
.ratio-3-4  { width:13px; height:18px; }
.ratio-3-2  { width:19px; height:13px; }
.ratio-2-3  { width:13px; height:19px; }
.size-ratio { font-size:0.78rem; font-weight:600; line-height:1; }
.size-px    { font-size:0.59rem; color:var(--dim); line-height:1; text-align:center; }

/* ── UPLOAD ZONE ── */
.upload-zone { border:1.5px dashed var(--border); border-radius:var(--r-md);
  transition:border-color var(--ease), background var(--ease); }
.upload-zone.drag-over { border-color:var(--gold); background:var(--gold-dim); }
.upload-idle { display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:22px 16px; color:var(--muted); font-size:0.82rem; text-align:center; cursor:pointer; }
.upload-idle svg { width:26px; height:26px; opacity:0.5; }
.upload-hint { font-size:0.68rem; color:var(--dim); }
.upload-browse-btn { background:none; border:none; color:var(--gold); font-size:inherit;
  font-family:inherit; cursor:pointer; text-decoration:underline; padding:0; }
.upload-browse-btn:hover { color:var(--gold-light,#fbbf24); }

/* Upload preview */
.upload-preview { display:flex; align-items:center; gap:10px; padding:10px 12px; }
.preview-thumb { width:52px; height:52px; object-fit:cover; border-radius:var(--r-sm);
  border:1px solid var(--border); flex-shrink:0; }
.preview-meta { flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
.preview-name { font-size:0.78rem; color:var(--text); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.upload-status { font-size:0.7rem; }
.upload-status.uploading { color:var(--gold); }
.upload-status.done      { color:var(--success); }
.upload-status.error     { color:var(--danger); }
.preview-remove-btn { flex-shrink:0; width:28px; height:28px; background:none;
  border:1px solid var(--border); border-radius:var(--r-sm); color:var(--muted);
  display:grid; place-items:center; cursor:pointer; transition:all var(--ease); }
.preview-remove-btn svg { width:13px; height:13px; }
.preview-remove-btn:hover { border-color:rgba(239,68,68,0.4); color:var(--danger); }

/* Sub-setting (strength row shown conditionally) */
.sub-setting { margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }

/* ── LoRA SECTION ── */
.lora-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.add-lora-btn { display:flex; align-items:center; gap:5px;
  font-size:0.71rem; font-weight:600; letter-spacing:0.05em;
  color:var(--gold); background:var(--gold-dim);
  border:1px solid var(--border-gold); border-radius:var(--r-sm);
  padding:5px 11px; cursor:pointer; transition:all var(--ease); }
.add-lora-btn svg { width:13px; height:13px; }
.add-lora-btn:hover { background:rgba(245,158,11,0.2); }
.add-lora-btn:disabled { opacity:0.4; cursor:not-allowed; }
#lora-list { display:flex; flex-direction:column; gap:10px; }
.lora-row { display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto;
  gap:6px 8px; background:rgba(0,0,0,0.18); border:1px solid var(--border);
  border-radius:var(--r-md); padding:12px; animation:fade-in 0.2s ease; }
.lora-row-top  { grid-column:1; display:flex; gap:6px; align-items:center; }
.lora-remove-btn { grid-column:2; grid-row:1/3; align-self:center;
  width:30px; height:30px; background:none; border:1px solid var(--border);
  border-radius:var(--r-sm); color:var(--muted); display:grid; place-items:center;
  cursor:pointer; transition:all var(--ease); }
.lora-remove-btn svg { width:13px; height:13px; }
.lora-remove-btn:hover { border-color:rgba(239,68,68,0.4); color:var(--danger); }
.lora-row-bottom { grid-column:1; display:flex; align-items:center; gap:8px; }
.lora-select { flex:1; background:var(--input-bg); border:1px solid var(--border);
  border-radius:var(--r-sm); color:var(--text); font-family:var(--font-b);
  font-size:0.82rem; padding:8px 28px 8px 10px; outline:none; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
  transition:border-color var(--ease); }
.lora-select:focus { border-color:var(--border-gold); }
.lora-select option { background:#1c1c1f; }
.lora-path-custom { display:none; flex:1; background:var(--input-bg);
  border:1px solid var(--border); border-radius:var(--r-sm); color:var(--text);
  font-family:var(--font-b); font-size:0.82rem; padding:8px 10px; outline:none;
  transition:border-color var(--ease); }
.lora-path-custom::placeholder { color:var(--dim); }
.lora-path-custom:focus { border-color:var(--border-gold); }
.lora-path-custom.visible { display:block; }
.lora-scale-label { font-size:0.69rem; font-weight:600; color:var(--muted); white-space:nowrap; }
.lora-scale-output { font-size:0.74rem; font-weight:600; color:var(--gold);
  min-width:28px; text-align:right; }
.lora-scale-slider { -webkit-appearance:none; appearance:none; flex:1; height:4px;
  border-radius:2px; background:var(--input-bg); border:1px solid var(--border);
  outline:none; cursor:pointer; accent-color:var(--gold); }
.lora-scale-slider::-webkit-slider-thumb { -webkit-appearance:none; width:15px; height:15px;
  border-radius:50%; background:var(--gold); box-shadow:0 0 7px rgba(245,158,11,0.42);
  cursor:pointer; transition:transform var(--ease); }
.lora-scale-slider::-webkit-slider-thumb:hover { transform:scale(1.15); }
.lora-scale-slider::-moz-range-thumb { width:15px; height:15px; border-radius:50%;
  background:var(--gold); border:none; cursor:pointer; }

/* ── SETTINGS GRID ── */
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.setting-group { display:flex; flex-direction:column; }
.setting-group.full-width { grid-column:1/-1; }
.slider-row { display:flex; align-items:center; gap:10px; }
.range-slider { -webkit-appearance:none; appearance:none; flex:1; height:4px;
  border-radius:2px; background:var(--input-bg); border:1px solid var(--border);
  outline:none; cursor:pointer; accent-color:var(--gold); }
.range-slider::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px;
  border-radius:50%; background:var(--gold); box-shadow:0 0 8px rgba(245,158,11,0.42);
  cursor:pointer; transition:transform var(--ease); }
.range-slider::-webkit-slider-thumb:hover { transform:scale(1.15); }
.range-slider::-moz-range-thumb { width:16px; height:16px; border-radius:50%;
  background:var(--gold); border:none; cursor:pointer; }
.range-output { font-size:0.75rem; font-weight:600; color:var(--gold);
  min-width:34px; text-align:right; }

/* ── GENERATE BUTTON ── */
.generate-btn { width:100%; height:56px;
  background:linear-gradient(135deg,#d97706,var(--gold),#d97706);
  background-size:200% 100%; border:none; border-radius:var(--r-md);
  color:#000; font-family:var(--font-d); font-size:0.91rem; font-weight:700;
  letter-spacing:0.1em; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
  box-shadow:0 4px 20px rgba(245,158,11,0.3); transition:all var(--ease);
  position:relative; overflow:hidden; }
.generate-btn::before { content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,0.1) 50%,transparent 60%);
  background-size:200% 100%; background-position:200% 0;
  transition:background-position 0.55s ease; }
.generate-btn:hover::before { background-position:-200% 0; }
.generate-btn:hover { transform:translateY(-2px); box-shadow:0 8px 26px rgba(245,158,11,0.4); }
.generate-btn:active { transform:scale(0.98); }
.generate-btn:disabled { opacity:0.6; cursor:not-allowed; transform:none; }
.btn-state { display:flex; align-items:center; gap:9px; }
.btn-state svg { width:18px; height:18px; }
.spinner { width:17px; height:17px; border:2.5px solid rgba(0,0,0,0.22);
  border-top-color:#000; border-radius:50%; animation:spin 0.7s linear infinite; flex-shrink:0; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ── SKELETON ── */
.skeleton-canvas { background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-lg); aspect-ratio:1; position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding-bottom:22px; }
.skeleton-wave { position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(245,158,11,0.05) 50%,transparent 70%);
  background-size:200% 100%; animation:wave 1.6s ease-in-out infinite; }
@keyframes wave { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.skeleton-status { position:relative; z-index:1;
  display:flex; align-items:center; gap:7px; font-size:0.77rem; color:var(--muted);
  background:rgba(9,9,11,0.72); border:1px solid var(--border);
  border-radius:100px; padding:5px 13px; backdrop-filter:blur(8px); }
.pulse-dot { width:7px; height:7px; border-radius:50%; background:var(--gold);
  animation:pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.35;transform:scale(0.72)} }

/* ── RESULT ── */
.result-frame { border:1px solid var(--border); border-radius:var(--r-lg);
  overflow:hidden; background:var(--card); animation:fade-in 0.4s ease; }
@keyframes fade-in { from{opacity:0;transform:translateY(7px)} to{opacity:1;transform:none} }
.output-image { width:100%; height:auto; display:block; }
.result-toolbar { display:flex; gap:8px; padding:10px 12px;
  background:rgba(9,9,11,0.55); border-top:1px solid var(--border); backdrop-filter:blur(8px); }
.tool-btn { display:flex; align-items:center; gap:5px; padding:7px 13px;
  background:var(--input-bg); border:1px solid var(--border); border-radius:var(--r-sm);
  color:var(--muted); font-family:var(--font-b); font-size:0.75rem; font-weight:500;
  cursor:pointer; transition:all var(--ease); }
.tool-btn svg { width:13px; height:13px; }
.tool-btn:hover { border-color:var(--border-gold); color:var(--gold); }
.tool-btn:active { transform:scale(0.95); }
.tool-btn.danger:hover { border-color:rgba(239,68,68,0.35); color:var(--danger); }
.result-toolbar .tool-btn:first-child { flex:1; justify-content:center; }

/* ── TOASTS ── */
#toast-container { position:fixed; top:18px; left:50%; transform:translateX(-50%);
  z-index:999; display:flex; flex-direction:column; gap:7px;
  width:calc(100% - 28px); max-width:480px; pointer-events:none; }
.toast { display:flex; align-items:flex-start; gap:9px; padding:12px 15px;
  border-radius:var(--r-md); background:#1c1c1f; border:1px solid var(--border);
  box-shadow:0 8px 28px rgba(0,0,0,0.55); font-size:0.82rem; color:var(--text);
  animation:toast-in 0.28s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events:all; backdrop-filter:blur(12px); }
.toast.hiding { animation:toast-out 0.22s ease forwards; }
@keyframes toast-in  { from{opacity:0;transform:translateY(-10px) scale(0.95)} to{opacity:1;transform:none} }
@keyframes toast-out { to{opacity:0;transform:translateY(-7px) scale(0.96)} }
.toast-icon { flex-shrink:0; margin-top:1px; }
.toast-icon svg { width:14px; height:14px; }
.toast.success { border-color:rgba(34,197,94,0.28); }  .toast.success .toast-icon { color:var(--success); }
.toast.error   { border-color:rgba(239,68,68,0.28); }  .toast.error   .toast-icon { color:var(--danger); }
.toast.warning { border-color:rgba(245,158,11,0.28); } .toast.warning .toast-icon { color:var(--gold); }
.toast.info    .toast-icon { color:var(--info); }
.toast-body { flex:1; }
.toast-title { font-weight:600; margin-bottom:2px; }
.toast-msg   { color:var(--muted); }

/* ── UTILS ── */
[hidden] { display:none !important; }
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--card); border-radius:3px; }

/* ── RESPONSIVE ── */
@media (max-width:420px) {
  .size-grid { grid-template-columns:repeat(4,1fr); gap:5px; }
  .settings-grid { grid-template-columns:1fr; }
  .logo-title { font-size:0.98rem; }
  .size-px { display:none; }
}
@media (min-width:560px) {
  .app-shell { padding:0 24px 64px; }
  .card { padding:22px 24px; }
  .app-header { padding:34px 0 12px; }
}