@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg: #0a0a14; --bg2: #0f0f1e;
  --panel: rgba(255,255,255,0.04); --panel2: rgba(255,255,255,0.07);
  --border: rgba(255,255,255,0.09);
  --accent: #7c3aed; --accent2: #a855f7;
  --blue: #3b82f6; --green: #10b981; --orange: #f59e0b; --pink: #ec4899; --red: #ef4444;
  --text: #f1f5f9; --text2: #94a3b8; --text3: #475569;
  --r: 12px; --tr: 0.2s;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
body::before { content:''; position:fixed; top:-50%; left:-25%; width:60%; height:80%; background:radial-gradient(ellipse,rgba(124,58,237,0.08) 0%,transparent 70%); pointer-events:none; z-index:0; }
body::after { content:''; position:fixed; top:20%; right:-20%; width:50%; height:60%; background:radial-gradient(ellipse,rgba(59,130,246,0.06) 0%,transparent 70%); pointer-events:none; z-index:0; }
.header { position:sticky; top:0; z-index:100; background:rgba(10,10,20,0.92); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); padding:0.75rem 1.5rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.logo { display:flex; align-items:center; gap:0.5rem; font-weight:800; font-size:1.1rem; background:linear-gradient(135deg,#a78bfa,#60a5fa,#34d399); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; white-space:nowrap; }
.logo-icon { width:32px; height:32px; background:linear-gradient(135deg,var(--accent),var(--blue)); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.token-section { display:flex; align-items:center; gap:0.5rem; flex:1; min-width:0; max-width:520px; }
.token-input { flex:1; background:var(--panel); border:1px solid var(--border); border-radius:8px; color:var(--text); font-family:'JetBrains Mono',monospace; font-size:0.72rem; padding:0.45rem 0.7rem; outline:none; transition:border-color var(--tr); min-width:0; }
.token-input:focus { border-color:rgba(124,58,237,0.5); }
.token-input::placeholder { color:var(--text3); }
.quota-badge { display:flex; align-items:center; gap:0.4rem; padding:0.35rem 0.7rem; background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.2); border-radius:8px; font-size:0.72rem; color:#34d399; white-space:nowrap; flex-shrink:0; }
.main { position:relative; z-index:1; max-width:1280px; margin:0 auto; padding:1.5rem 1.5rem 3rem; }
.tabs { display:flex; gap:0.3rem; margin-bottom:1.5rem; background:var(--panel); border:1px solid var(--border); border-radius:var(--r); padding:0.3rem; overflow-x:auto; }
.tab-btn { display:flex; align-items:center; gap:0.4rem; padding:0.55rem 1rem; border:none; background:transparent; color:var(--text2); font-family:'Inter',sans-serif; font-size:0.82rem; font-weight:500; cursor:pointer; border-radius:8px; transition:all var(--tr); white-space:nowrap; flex-shrink:0; }
.tab-btn:hover { background:var(--panel2); color:var(--text); }
.tab-btn.active { background:linear-gradient(135deg,var(--accent),#6d28d9); color:#fff; box-shadow:0 4px 14px rgba(124,58,237,0.3); }
.tab-content { display:none; }
.tab-content.active { display:block; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
@media (max-width:860px) { .two-col { grid-template-columns:1fr; } }
.panel { background:var(--panel); border:1px solid var(--border); border-radius:var(--r); padding:1.2rem; }
.panel-title { font-size:0.82rem; font-weight:700; color:var(--text2); margin-bottom:1rem; display:flex; align-items:center; gap:0.4rem; text-transform:uppercase; letter-spacing:0.05em; }
label { display:block; font-size:0.75rem; font-weight:600; color:var(--text2); margin-bottom:0.35rem; }
textarea, select, input[type="text"], input[type="number"] { width:100%; background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:8px; color:var(--text); font-family:'Inter',sans-serif; font-size:0.85rem; padding:0.6rem 0.8rem; outline:none; transition:border-color var(--tr); resize:vertical; }
textarea { min-height:80px; }
textarea:focus, select:focus, input[type="text"]:focus, input[type="number"]:focus { border-color:rgba(124,58,237,0.5); }
textarea::placeholder, input::placeholder { color:var(--text3); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; margin-bottom:0.75rem; }
.form-group { margin-bottom:0.75rem; }
.field-hint { font-size:0.65rem; color:var(--text3); margin-top:0.25rem; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:0.4rem; padding:0.6rem 1.2rem; border:none; border-radius:8px; font-family:'Inter',sans-serif; font-size:0.85rem; font-weight:600; cursor:pointer; transition:all var(--tr); }
.btn-primary { background:linear-gradient(135deg,var(--accent),#6d28d9); color:#fff; box-shadow:0 4px 14px rgba(124,58,237,0.3); width:100%; padding:0.7rem; }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(124,58,237,0.4); }
.btn-primary:disabled { opacity:0.5; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-secondary { background:var(--panel2); border:1px solid var(--border); color:var(--text2); font-size:0.75rem; padding:0.4rem 0.8rem; }
.btn-secondary:hover { border-color:var(--accent); color:var(--text); }
.upload-zone { border:2px dashed var(--border); border-radius:var(--r); padding:1.5rem; text-align:center; cursor:pointer; transition:all var(--tr); background:rgba(255,255,255,0.02); position:relative; }
.upload-zone:hover { border-color:var(--accent); background:rgba(124,58,237,0.05); }
.upload-zone.dragover { border-color:var(--accent); background:rgba(124,58,237,0.08); }
.upload-zone input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.upload-icon { font-size:2rem; margin-bottom:0.5rem; }
.upload-label { font-size:0.8rem; color:var(--text2); }
.upload-hint { font-size:0.68rem; color:var(--text3); margin-top:0.25rem; }
.upload-preview { display:none; gap:0.5rem; flex-wrap:wrap; margin-top:0.75rem; }
.upload-preview.show { display:flex; }
.preview-item { position:relative; width:80px; height:80px; border-radius:8px; overflow:hidden; border:1px solid var(--border); }
.preview-item img { width:100%; height:100%; object-fit:cover; }
.preview-remove { position:absolute; top:2px; right:2px; width:18px; height:18px; background:rgba(239,68,68,0.8); border:none; border-radius:50%; color:#fff; font-size:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.progress-wrap { display:none; margin-top:1rem; }
.progress-wrap.show { display:block; }
.progress-label { display:flex; justify-content:space-between; align-items:center; font-size:0.72rem; color:var(--text2); margin-bottom:0.4rem; }
.progress-bar-bg { background:var(--panel2); border-radius:99px; height:6px; overflow:hidden; }
.progress-bar { height:100%; border-radius:99px; background:linear-gradient(90deg,var(--accent),var(--blue),var(--green)); background-size:200% 100%; transition:width 0.4s ease; animation:shimmer 2s infinite; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.progress-status { font-size:0.72rem; color:var(--text3); margin-top:0.3rem; min-height:1em; }
.gallery { display:none; gap:1rem; flex-wrap:wrap; margin-top:1.5rem; }
.gallery.show { display:flex; }
.gallery-card { background:var(--panel); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; transition:transform var(--tr),box-shadow var(--tr); flex:1; min-width:240px; max-width:380px; }
.gallery-card:hover { transform:translateY(-3px); box-shadow:0 8px 30px rgba(0,0,0,0.4); }
.gallery-card video,.gallery-card img { width:100%; display:block; background:#000; }
.gallery-card video { max-height:280px; }
.gallery-card img { max-height:260px; object-fit:cover; }
.card-footer { padding:0.6rem 0.75rem; display:flex; align-items:center; gap:0.4rem; border-top:1px solid var(--border); flex-wrap:wrap; }
.card-tag { font-size:0.65rem; padding:0.2rem 0.5rem; border-radius:99px; background:rgba(124,58,237,0.15); color:#c4b5fd; flex-shrink:0; }
.card-actions { display:flex; gap:0.3rem; margin-left:auto; }
.auto-phases { display:flex; flex-direction:column; gap:1rem; }
.auto-phase { background:var(--panel); border:1px solid var(--border); border-radius:var(--r); padding:1rem; transition:border-color var(--tr); }
.auto-phase.active { border-color:var(--accent); box-shadow:0 0 0 1px rgba(124,58,237,0.2); }
.auto-phase.done { border-color:rgba(16,185,129,0.4); }
.phase-header { display:flex; align-items:center; gap:0.6rem; margin-bottom:0.75rem; }
.phase-num { width:26px; height:26px; border-radius:50%; background:var(--panel2); border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:0.72rem; font-weight:700; flex-shrink:0; color:var(--text2); transition:all var(--tr); }
.auto-phase.active .phase-num { background:var(--accent); border-color:var(--accent); color:#fff; }
.auto-phase.done .phase-num { background:var(--green); border-color:var(--green); color:#fff; }
.phase-title { font-size:0.82rem; font-weight:600; }
.phase-status { margin-left:auto; font-size:0.68rem; color:var(--text3); }
.img-select-grid { display:flex; gap:0.5rem; flex-wrap:wrap; margin:0.75rem 0; }
.img-select-item { position:relative; width:100px; height:100px; border-radius:8px; overflow:hidden; border:2px solid var(--border); cursor:pointer; transition:border-color var(--tr); }
.img-select-item:hover { border-color:var(--accent); }
.img-select-item.selected { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.img-select-item img { width:100%; height:100%; object-fit:cover; }
.img-select-item .check { position:absolute; top:4px; right:4px; width:20px; height:20px; background:var(--accent); border-radius:50%; font-size:11px; display:none; align-items:center; justify-content:center; }
.img-select-item.selected .check { display:flex; }
.history-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; }
.history-card { background:var(--panel); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; transition:transform var(--tr); }
.history-card:hover { transform:translateY(-2px); }
.history-thumb { width:100%; aspect-ratio:16/9; background:#111; position:relative; overflow:hidden; }
.history-thumb video,.history-thumb img { width:100%; height:100%; object-fit:cover; }
.history-type-badge { position:absolute; bottom:6px; left:6px; font-size:0.6rem; padding:0.15rem 0.4rem; border-radius:99px; background:rgba(0,0,0,0.7); color:var(--text2); backdrop-filter:blur(4px); }
.history-info { padding:0.5rem 0.65rem; }
.history-prompt { font-size:0.72rem; color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.history-date { font-size:0.62rem; color:var(--text3); margin-top:0.2rem; }
.toast { position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999; background:rgba(15,15,30,0.95); backdrop-filter:blur(16px); border:1px solid var(--border); border-radius:var(--r); padding:0.75rem 1rem; max-width:380px; font-size:0.82rem; color:var(--text); display:flex; align-items:flex-start; gap:0.5rem; box-shadow:0 8px 30px rgba(0,0,0,0.5); animation:slideIn 0.3s ease; transition:opacity 0.3s,transform 0.3s; }
.toast.error { border-color:rgba(239,68,68,0.4); }
.toast.success { border-color:rgba(16,185,129,0.4); }
.toast.hiding { opacity:0; transform:translateY(10px); }
@keyframes slideIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.spinner { display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,0.3); border-top-color:#fff; border-radius:50%; animation:spin 0.7s linear infinite; flex-shrink:0; }
@keyframes spin { to{transform:rotate(360deg)} }
.empty-state { text-align:center; padding:3rem 1rem; color:var(--text3); }
.empty-state .empty-icon { font-size:3rem; margin-bottom:0.75rem; opacity:0.4; }
.empty-state p { font-size:0.82rem; }
.radio-group { display:flex; gap:0.5rem; }
.radio-chip { display:flex; align-items:center; gap:0.3rem; padding:0.35rem 0.75rem; border:1.5px solid var(--border); border-radius:8px; cursor:pointer; font-size:0.75rem; color:var(--text2); transition:all var(--tr); user-select:none; }
.radio-chip:has(input:checked) { border-color:var(--accent); background:rgba(124,58,237,0.12); color:#c4b5fd; }
.radio-chip input { display:none; }
.step-arrow { text-align:center; font-size:1.4rem; color:var(--text3); line-height:1; }