/* ========================================
   AI 写真馆 - 玻璃拟态商用UI (v4)
   Frosted Glass Admin Dashboard
   ======================================== */

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

:root {
  /* Glass & Background */
  --bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #f0f2f5 40%, #eef1f5 100%);
  --glass-bg: rgba(255,255,255,0.55);
  --glass-bg-strong: rgba(255,255,255,0.75);
  --glass-border: rgba(255,255,255,0.35);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.02);
  --glass-shadow-hover: 0 12px 48px rgba(99,102,241,0.06), 0 2px 6px rgba(0,0,0,0.04);

  /* Colors - Low saturation elegant palette */
  --text: #1e293b;
  --text-2: #64748b;
  --text-3: #94a3b8;
  --text-4: #cbd5e1;
  --accent: #6366f1;
  --accent-soft: rgba(99,102,241,0.08);
  --accent-strong: rgba(99,102,241,0.12);
  --accent-glow: 0 0 20px rgba(99,102,241,0.15);
  --accent-gradient: linear-gradient(135deg, #6366f1, #818cf8);
  --accent-gradient-2: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);
  --purple: #a855f7;
  --rose: #f43f5e;
  --emerald: #10b981;
  --amber: #f59e0b;
  --sky: #0ea5e9;

  /* Layout */
  --sidebar-w: 64px;
  --sidebar-exp-w: 200px;
  --right-panel-w: 280px;

  /* Radius */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Transitions */
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.15s ease;
}

html { font-size: 14px; }
html, body, #app { width:100%; max-width:100%; overflow-x:hidden; }
body {
  font-family: "Inter", "Noto Sans SC", "PingFang SC", -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-gradient);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; min-width:0; }
img { display: block; max-width: 100%; height: auto; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.08); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.15); }

/* =========================================
   GLASS CARD
   ========================================= */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
}
.glass-strong {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
}
.glass-hover:hover {
  box-shadow: var(--glass-shadow-hover);
  transform: translateY(-1px);
}
.glass-card {
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(0,0,0,0.03), 0 1px 3px rgba(0,0,0,0.02);
  transition: all var(--transition);
}
.glass-card:hover {
  box-shadow: 0 8px 32px rgba(99,102,241,0.06), 0 2px 6px rgba(0,0,0,0.03);
}

/* =========================================
   BUTTONS
   ========================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: var(--radius); padding: 10px 20px;
  cursor: pointer; transition: all var(--transition-fast); white-space: nowrap;
  font-weight: 600; font-size: 13px; letter-spacing: 0.01em;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary {
  background: var(--accent-gradient);
  color: #fff;
  box-shadow: 0 2px 12px rgba(99,102,241,0.2);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(99,102,241,0.3); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: rgba(255,255,255,0.6);
  color: var(--text-2);
  border: 1px solid rgba(255,255,255,0.5);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: rgba(255,255,255,0.85); color: var(--text); border-color: rgba(99,102,241,0.2); }
.btn-ghost-accent {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid transparent;
}
.btn-ghost-accent:hover { background: var(--accent-strong); }

.btn-sm { padding: 6px 14px; font-size: 12px; border-radius: var(--radius-sm); }
.btn-xs { padding: 4px 10px; font-size: 11px; border-radius: 6px; }
.btn-icon {
  width: 36px; height: 36px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius); border: 1px solid var(--glass-border);
  background: var(--glass-bg); backdrop-filter: blur(8px);
  cursor: pointer; transition: all var(--transition-fast); font-size: 15px;
}
.btn-icon:hover { background: rgba(255,255,255,0.85); border-color: rgba(99,102,241,0.2); }

/* =========================================
   INPUTS
   ========================================= */
.input, .textarea, .select {
  width: 100%;
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: var(--radius);
  padding: 9px 14px;
  transition: all var(--transition-fast);
  font-size: 13px;
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  background: rgba(255,255,255,0.85);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.08);
}
.textarea { resize: vertical; min-height: 72px; }
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.select { cursor: pointer; }

/* =========================================
   PILL / BADGE
   ========================================= */
.pill {
  display: inline-flex; align-items: center; padding: 2px 10px;
  border-radius: var(--radius-full); font-size: 11px; font-weight: 600;
  background: var(--accent-soft); color: var(--accent);
  white-space: nowrap;
}
.pill-cyan { background: rgba(14,165,233,0.08); color: #0369a1; }
.pill-green { background: rgba(16,185,129,0.08); color: #059669; }
.pill-warm { background: rgba(245,158,11,0.08); color: #b45309; }
.pill-rose { background: rgba(244,63,94,0.08); color: #be123c; }
.pill-purple { background: rgba(168,85,247,0.08); color: #7e22ce; }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--radius-full); font-size: 10px; font-weight: 700;
}
.badge-success { background: rgba(16,185,129,0.1); color: #059669; }
.badge-warning { background: rgba(245,158,11,0.1); color: #b45309; }
.badge-danger { background: rgba(244,63,94,0.1); color: #be123c; }
.badge-info { background: var(--accent-soft); color: var(--accent); }

/* =========================================
   TOAST
   ========================================= */
.toast-wrap {
  position: fixed; top: 20px; right: 20px; z-index: 99999;
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  padding: 10px 18px; border-radius: var(--radius); font-size: 13px; font-weight: 600;
  box-shadow: var(--glass-shadow), 0 8px 24px rgba(0,0,0,0.08);
  animation: toastIn 0.3s ease;
  backdrop-filter: blur(12px);
}
.toast-success { background: rgba(16,185,129,0.9); color: #fff; }
.toast-error { background: rgba(244,63,94,0.9); color: #fff; }
.toast-info { background: rgba(99,102,241,0.9); color: #fff; }
@keyframes toastIn { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* =========================================
   PROGRESS
   ========================================= */
.progress-bar {
  width: 100%; height: 4px; background: rgba(0,0,0,0.06); border-radius: var(--radius-full); overflow: hidden;
}
.progress-fill {
  height: 100%; border-radius: var(--radius-full);
  background: var(--accent-gradient);
  transition: width 0.6s ease;
}

/* =========================================
   AUTH
   ========================================= */
.auth-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--bg-gradient);
}
.auth-card {
  width: 100%; max-width: 380px; padding: 36px 32px;
  background: var(--glass-bg-strong); backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-shadow), 0 20px 60px rgba(0,0,0,0.04);
}
.auth-logo { text-align: center; margin-bottom: 24px; }
.auth-logo .logo-icon {
  width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 16px;
  background: var(--accent-gradient); display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #fff; box-shadow: var(--accent-glow);
}
.auth-logo h1 { font-size: 22px; color: var(--text); font-weight: 700; }
.auth-logo p { color: var(--text-2); font-size: 13px; margin-top: 4px; }
.auth-tabs {
  display: flex; gap: 4px; padding: 3px; border-radius: var(--radius);
  background: rgba(0,0,0,0.03); margin-bottom: 20px; border: 1px solid rgba(255,255,255,0.3);
}
.auth-tab { flex: 1; border: 0; background: transparent; border-radius: var(--radius-sm); padding: 9px; color: var(--text-2); cursor: pointer; font-weight: 600; font-size: 13px; transition: all var(--transition-fast); }
.auth-tab.active { background: rgba(255,255,255,0.7); color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-2); }
.auth-checkbox { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-2); }
.auth-code-row { display: flex; gap: 10px; align-items: flex-start; }
.auth-code-row label { flex: 1; }
.auth-footer { text-align: center; margin-top: 18px; color: var(--text-3); font-size: 12px; }

/* =========================================
   APP LAYOUT
   ========================================= */
.app-layout {
  display: flex; min-height: 100vh;
  position: relative;
}

/* ---- Sidebar ---- */
.app-sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  position: fixed; top: 0; left: 0; height: 100vh; z-index: 40;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-right: 1px solid var(--glass-border);
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 0; gap: 2px;
  transition: width var(--transition);
  overflow: hidden;
}
.app-sidebar.expanded { width: var(--sidebar-exp-w); }

.sb-toggle {
  width: 36px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 13px; color: var(--text-3);
  transition: all var(--transition-fast); margin-bottom: 6px;
}
.sb-toggle:hover { background: var(--accent-soft); color: var(--accent); }

.sb-item {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: flex-start;
  gap: 10px; padding: 0 10px;
  border: 0; background: transparent; border-radius: var(--radius);
  cursor: pointer; font-size: 17px; transition: all var(--transition-fast);
  color: var(--text-3); position: relative;
}
.sb-item:hover { background: var(--accent-soft); color: var(--text-2); }
.sb-item.active { background: var(--accent-soft); color: var(--accent); }
.sb-item.active::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2.5px;
  background: var(--accent); border-radius: 0 2px 2px 0;
}
.sb-icon { flex-shrink: 0; width: 20px; text-align: center; }
.sb-label { display: none; font-size: 12px; font-weight: 600; white-space: nowrap; }
.app-sidebar.expanded .sb-item { width: 100%; padding: 0 14px; }
.app-sidebar.expanded .sb-label { display: block; }

.sb-spacer { flex: 1; width: 100%; }
.sb-user {
  width: 100%; display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 8px 14px; cursor: pointer; transition: all var(--transition-fast);
  border: 0; background: transparent; flex-shrink: 0;
}
.sb-user:hover { background: var(--accent-soft); }
.sb-avatar {
  width: 34px; height: 34px; border-radius: var(--radius);
  background: var(--accent-gradient); display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 700; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(99,102,241,0.15);
}
.sb-username { display: none; font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-sidebar.expanded .sb-user { justify-content: flex-start; }
.app-sidebar.expanded .sb-username { display: block; }

/* ---- Main wrapper ---- */
.app-main-wrapper {
  margin-left: var(--sidebar-w);
  flex: 1; min-width: 0;
  display: flex;
  transition: margin-left var(--transition);
}
.app-sidebar.expanded ~ .app-main-wrapper { margin-left: var(--sidebar-exp-w); }

/* ---- Main content ---- */
.app-content {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
}

.topbar {
  height: 52px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-border);
  position: sticky; top: 0; z-index: 20;
}
.topbar-left { display: flex; align-items: center; gap: 12px; }
.topbar-brand { font-size: 14px; font-weight: 700; color: var(--accent); letter-spacing: 0.02em; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.topbar-balance {
  padding: 4px 12px; border-radius: var(--radius-full);
  background: var(--accent-soft); backdrop-filter: blur(8px);
  font-size: 11px; font-weight: 600; color: var(--accent);
}

.main-area {
  flex: 1;
  padding: 24px 28px 40px;
  overflow-y: auto;
  display: flex; gap: 24px;
  min-width: 0;
}

/* ---- Center column ---- */
.center-col {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 20px;
}
.workbench-focus { max-width: 1180px; margin: 0 auto; width: 100%; }

/* ---- Right panel ---- */
.right-panel {
  width: var(--right-panel-w); flex-shrink: 0;
  position: sticky; top: 76px; align-self: flex-start;
  display: flex; flex-direction: column; gap: 16px;
}
.rp-section {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--glass-shadow);
}
.rp-title { font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; }

/* =========================================
   WELCOME BANNER
   ========================================= */
.welcome-banner {
  background: linear-gradient(135deg, rgba(99,102,241,0.06) 0%, rgba(6,182,212,0.04) 100%);
  border: 1px solid rgba(99,102,241,0.1);
  border-radius: var(--radius-xl);
  padding: 24px 28px;
  position: relative; overflow: hidden;
}
.welcome-banner::before {
  content: ''; position: absolute; top: -60%; right: -20%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(99,102,241,0.06) 0%, transparent 70%);
  border-radius: 50%;
}
.welcome-banner h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.welcome-banner h1 span { background: var(--accent-gradient-2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.welcome-banner p { color: var(--text-2); font-size: 13px; margin-top: 4px; max-width: 500px; }
.welcome-stats {
  display: flex; gap: 24px; margin-top: 14px;
}
.welcome-stat { text-align: center; }
.welcome-stat .num { font-size: 20px; font-weight: 800; color: var(--text); }
.welcome-stat .lbl { font-size: 11px; color: var(--text-3); margin-top: 1px; }

/* =========================================
   QUICK ACTIONS
   ========================================= */
.quick-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.qa-card {
  flex: 1; min-width: 140px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 14px; border-radius: var(--radius-lg);
  background: var(--glass-bg); backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  cursor: pointer; transition: all var(--transition-fast);
  box-shadow: var(--glass-shadow);
}
.qa-card:hover {
  box-shadow: var(--glass-shadow-hover);
  transform: translateY(-2px);
  border-color: rgba(99,102,241,0.15);
}
.qa-icon { width: 40px; height: 40px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.qa-icon-purple { background: rgba(99,102,241,0.1); color: var(--accent); }
.qa-icon-cyan { background: rgba(14,165,233,0.1); color: var(--sky); }
.qa-icon-rose { background: rgba(244,63,94,0.1); color: var(--rose); }
.qa-icon-green { background: rgba(16,185,129,0.1); color: var(--emerald); }
.qa-name { font-size: 13px; font-weight: 600; color: var(--text); }
.qa-desc { font-size: 11px; color: var(--text-3); }

/* =========================================
   SECTION TITLE
   ========================================= */
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.section-title {
  font-size: 15px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
.section-count {
  font-size: 12px; font-weight: 400; color: var(--text-3);
}
.section-more {
  font-size: 12px; color: var(--accent); cursor: pointer; font-weight: 600;
  opacity: 0; transition: opacity var(--transition-fast);
}
.section-header:hover .section-more { opacity: 1; }

/* =========================================
   TEMPLATE CENTER
   ========================================= */
.tpl-cats {
  display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap;
}
.tpl-cat {
  padding: 5px 14px; border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.3);
  backdrop-filter: blur(8px);
  cursor: pointer; font-size: 12px; color: var(--text-2); font-weight: 500;
  transition: all var(--transition-fast);
}
.tpl-cat:hover { background: rgba(255,255,255,0.6); color: var(--text); }
.tpl-cat.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

.tpl-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px;
}
.tpl-card {
  position: relative;
  padding: 16px; border-radius: var(--radius);
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.35);
  cursor: pointer; transition: all var(--transition-fast);
}

.tpl-card-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(225, 29, 72, 0.22);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.92);
  color: #be123c;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

.tpl-card-delete:hover { background: #fff1f2; }
.tpl-card:hover {
  background: rgba(255,255,255,0.75);
  border-color: rgba(99,102,241,0.15);
  box-shadow: 0 4px 16px rgba(99,102,241,0.04);
  transform: translateY(-1px);
}
.tpl-card-icon {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; margin-bottom: 8px;
}
.tpl-card-name { font-size: 13px; font-weight: 600; }
.tpl-card-desc { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.tpl-card-tag { margin-top: 8px; }
.tpl-card.active {
  background: rgba(99,102,241,0.06);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(99,102,241,0.08);
}

/* =========================================
   PROMPT AREA (Workbench)
   ========================================= */
.prompt-area {
  border-radius: var(--radius-xl);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(20px);
  box-shadow: var(--glass-shadow);
  transition: all var(--transition);
  overflow: hidden;
}
.prompt-area:focus-within { border-color: var(--accent); box-shadow: var(--glass-shadow), 0 0 0 3px rgba(99,102,241,0.06); }
.prompt-textarea {
  border: 0; border-radius: 0; min-height: 72px; resize: none;
  padding: 16px 18px; font-size: 14px;
  background: transparent;
}
.prompt-textarea:focus { outline: none; box-shadow: none; }
.prompt-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.2);
}
.prompt-toolbar-left { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.prompt-toolbar-right { display: flex; align-items: center; gap: 8px; }

.ref-banner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px;
  background: rgba(99,102,241,0.04);
  border-top: 1px solid rgba(99,102,241,0.1);
  font-size: 12px; color: var(--accent);
}

/* Generation Progress */
.gen-progress-card {
  padding: 16px 18px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(16px);
}
.gen-progress-header { display: flex; justify-content: space-between; margin-bottom: 10px; }
.gen-progress-label { font-size: 13px; font-weight: 600; color: var(--text); }
.gen-progress-status { font-size: 12px; color: var(--text-2); }
.gen-progress-steps { display: flex; gap: 2px; margin-top: 8px; }
.gen-step { flex: 1; height: 3px; border-radius: 999px; background: rgba(0,0,0,0.06); transition: all 0.3s ease; }
.gen-step.active { background: var(--accent); }
.gen-step.done { background: var(--sky); }
.gen-progress-detail { font-size: 11px; color: var(--text-3); margin-top: 6px; }

/* Result */
.result-card {
  overflow: hidden; border-radius: var(--radius-xl);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(16px);
  box-shadow: var(--glass-shadow);
}
.result-card img { width: 100%; height: auto; max-width: 100%; display: block; }
.result-meta {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.3);
}
.result-info { font-size: 12px; color: var(--text-2); }
.result-actions { display: flex; gap: 6px; }
.post-generation-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 16px; border-top: 1px solid rgba(99,102,241,0.12);
  background: linear-gradient(90deg, rgba(99,102,241,0.06), rgba(6,182,212,0.045));
}
.post-generation-copy { display: grid; gap: 3px; color: var(--text-2); font-size: 11px; line-height: 1.5; }
.post-generation-title { color: var(--text); font-size: 13px; font-weight: 650; }
.post-generation-buttons { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.identity-required-hint {
  margin-top: 8px; padding: 9px 11px; border-radius: 8px;
  color: #9a6700; background: rgba(245, 158, 11, 0.10); border: 1px solid rgba(245, 158, 11, 0.24);
  font-size: 12px; line-height: 1.5;
}
@media (max-width: 680px) {
  .post-generation-actions { align-items: flex-start; flex-direction: column; }
  .post-generation-buttons { width: 100%; }
  .post-generation-buttons .btn { flex: 1; }
}

/* =========================================
   RIGHT PANEL - SEARCH
   ========================================= */
.rp-search {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.4);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: var(--radius);
  padding: 6px 12px;
}
.rp-search input {
  flex: 1; border: 0; background: transparent; font-size: 12px; padding: 2px 0;
}
.rp-search input:focus { outline: none; }

/* Right Panel - Category filters */
.rp-cat-list { display: flex; flex-direction: column; gap: 4px; }
.rp-cat-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; border-radius: var(--radius-sm);
  cursor: pointer; transition: all var(--transition-fast);
  font-size: 12px; color: var(--text-2);
}
.rp-cat-item:hover { background: rgba(255,255,255,0.4); color: var(--text); }
.rp-cat-item.active { background: var(--accent-soft); color: var(--accent); }
.rp-cat-count { font-size: 11px; color: var(--text-3); }

/* Right Panel - Task Queue */
.rp-task-list { display: flex; flex-direction: column; gap: 6px; }
.rp-task-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.25);
  font-size: 12px; transition: all var(--transition-fast);
}
.rp-task-status {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.rp-task-status.running { background: var(--accent); animation: pulse 1.5s ease infinite; }
.rp-task-status.queued { background: var(--amber); }
.rp-task-status.done { background: var(--emerald); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.rp-task-info { flex: 1; min-width: 0; }
.rp-task-name { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-task-time { font-size: 10px; color: var(--text-3); }

/* =========================================
   GALLERY
   ========================================= */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.gallery-card {
  overflow: hidden; border-radius: var(--radius-lg);
  background: var(--glass-bg); backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: all var(--transition-fast); cursor: pointer;
  position: relative;
}
.gallery-card:hover { box-shadow: var(--glass-shadow-hover); transform: translateY(-2px); }
.gallery-thumb {
  aspect-ratio: 1;
  background: linear-gradient(135deg, rgba(99,102,241,0.04), rgba(168,85,247,0.04));
  display: flex; align-items: center; justify-content: center; font-size: 28px;
  position: relative;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-del {
  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px;
  border: 0; border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.4); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 12px; opacity: 0; transition: all var(--transition-fast);
}
.gallery-card:hover .gallery-del { opacity: 1; }
.gallery-del:hover { background: rgba(244,63,94,0.7); }
.gallery-body { padding: 10px 12px; }
.gallery-name { font-size: 12px; font-weight: 600; }
.gallery-desc { font-size: 11px; color: var(--text-3); margin-top: 1px; }
.gallery-tags { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }

/* =========================================
   WALLET
   ========================================= */
.wallet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.wallet-item { padding: 18px; text-align: center; border-radius: var(--radius-lg); background: var(--glass-bg); backdrop-filter: blur(12px); border: 1px solid var(--glass-border); }
.wallet-item .wl-label { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.03em; }
.wallet-item .wl-value { font-size: 22px; font-weight: 800; margin-top: 6px; }

.coupon-form { display: flex; gap: 8px; }

.tx-list { display:grid;gap:0; }
.tx-item { display: grid; grid-template-columns: minmax(0,1fr) 170px 92px; gap:14px; align-items:center; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.04); font-size: 13px; }
.tx-item:last-child { border-bottom: 0; }
.tx-type { font-weight: 600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tx-time { font-size: 11px; color: var(--text-3); text-align:left; font-variant-numeric: tabular-nums; white-space:nowrap; }
.tx-amount { font-weight: 700; text-align:right; font-variant-numeric: tabular-nums; white-space:nowrap; }

/* =========================================
   SETTINGS
   ========================================= */
.settings-card { padding: 18px; margin-bottom: 14px; border-radius: var(--radius-lg); background: var(--glass-bg); backdrop-filter: blur(12px); border: 1px solid var(--glass-border); }
.settings-card h3 { font-size: 13px; margin-bottom: 12px; }
.settings-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.04); font-size: 13px; }
.settings-row:last-child { border-bottom: 0; }
.settings-val { color: var(--text-2); }

/* =========================================
   ADMIN
   ========================================= */
.admin-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.admin-stat-card { padding: 16px; border-radius: var(--radius-lg); background: var(--glass-bg); backdrop-filter: blur(12px); border: 1px solid var(--glass-border); }
.admin-stat-label { font-size: 11px; color: var(--text-3); }
.admin-stat-value { font-size: 22px; font-weight: 800; margin-top: 4px; }

.channel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.channel-card { padding: 14px; border-radius: var(--radius-lg); background: var(--glass-bg); backdrop-filter: blur(12px); border: 1px solid var(--glass-border); }
.channel-form { display: grid; gap: 8px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.config-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.config-card { padding: 14px; border-radius: var(--radius-lg); background: var(--glass-bg); backdrop-filter: blur(12px); border: 1px solid var(--glass-border); display: grid; gap: 8px; }

/* =========================================
   MISC
   ========================================= */
.hidden { display: none !important; }

.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 20px; color: var(--text-3); text-align: center; gap: 8px;
}
.empty-icon { font-size: 36px; opacity: 0.4; }
.empty p { font-size: 13px; }

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 1200px) {
  .right-panel { width: 240px; }
  :root { --right-panel-w: 240px; }
}
@media (max-width: 992px) {
  .right-panel { display: none; }
  .main-area { padding: 16px 20px; }
  .tpl-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .wallet-grid { grid-template-columns: 1fr 1fr; }
  .admin-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .app-sidebar:not(.expanded) { width: 48px; }
  .app-sidebar.expanded { width: 170px; }
  :root { --sidebar-w: 48px; --sidebar-exp-w: 170px; }
  .app-sidebar .sb-item { width: 36px; height: 36px; font-size: 15px; padding: 0 6px; }
  .app-sidebar.expanded .sb-item { padding: 0 10px; }
  .sb-avatar { width: 30px; height: 30px; font-size: 11px; }
  .main-area { padding: 12px 14px; gap: 14px; }
  .topbar { padding: 0 14px; height: 46px; }
  .welcome-banner { padding: 18px; }
  .welcome-banner h1 { font-size: 18px; }
  .welcome-stats { gap: 12px; }
  .qa-card { min-width: 100px; padding: 14px 10px; }
  .tpl-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .wallet-grid { grid-template-columns: 1fr; }
  .admin-grid { grid-template-columns: 1fr 1fr; }
  .result-meta, .post-generation-actions { align-items:flex-start; flex-direction:column; }
  .result-actions, .post-generation-buttons { width:100%; flex-wrap:wrap; }
  .result-actions .btn, .post-generation-buttons .btn { flex:1 1 130px; }
}

/* v6 refinements */
.field-hint { display:block; margin-top:5px; color:var(--text-3); font-size:11px; line-height:1.45; }
.btn-danger { background:linear-gradient(135deg,#f43f5e,#e11d48); color:#fff; border-color:rgba(244,63,94,.35); box-shadow:0 12px 28px rgba(244,63,94,.22); }
.btn-danger:hover { transform:translateY(-1px); box-shadow:0 16px 34px rgba(244,63,94,.28); }
.admin-gen-page { display:flex; flex-direction:column; gap:14px; }
.admin-gen-hero { display:flex; justify-content:space-between; gap:18px; align-items:center; padding:20px; border-radius:var(--radius-xl); overflow:hidden; position:relative; }
.admin-gen-hero:before { content:""; position:absolute; inset:-30% -10% auto auto; width:220px; height:220px; background:radial-gradient(circle,rgba(99,102,241,.18),transparent 66%); pointer-events:none; }
.eyebrow { font-size:10px; letter-spacing:.14em; color:var(--accent); font-weight:800; text-transform:uppercase; margin-bottom:5px; }
.admin-gen-hero h2 { font-size:20px; margin:0 0 6px; }
.admin-gen-hero p { margin:0; color:var(--text-2); font-size:12px; }
.admin-gen-metrics { display:flex; gap:10px; flex-wrap:wrap; }
.admin-gen-metrics div { min-width:76px; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.52); border:1px solid rgba(255,255,255,.55); text-align:center; }
.admin-gen-metrics b { display:block; font-size:20px; color:var(--accent); }
.admin-gen-metrics span { display:block; color:var(--text-3); font-size:11px; }
.admin-gen-filters { display:grid; grid-template-columns:repeat(4,minmax(120px,1fr)) auto; gap:10px; align-items:end; padding:14px; border-radius:var(--radius-lg); }
.admin-gen-filters label span { display:block; color:var(--text-3); font-size:11px; margin-bottom:5px; }
.admin-gen-actions { display:flex; gap:8px; }
.admin-gen-list { display:grid; gap:10px; }
.admin-gen-card { display:grid; grid-template-columns:64px 1fr; gap:12px; padding:12px; border-radius:var(--radius-lg); cursor:pointer; transition:.18s ease; }
.admin-gen-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.admin-gen-cover { width:64px; height:64px; border-radius:18px; display:grid; place-items:center; font-size:24px; background:linear-gradient(135deg,rgba(99,102,241,.13),rgba(6,182,212,.12)); }
.admin-gen-cover.ok { background:linear-gradient(135deg,rgba(16,185,129,.14),rgba(6,182,212,.12)); }
.admin-gen-cover.bad { background:linear-gradient(135deg,rgba(244,63,94,.16),rgba(251,113,133,.10)); }
.admin-gen-cover.run { background:linear-gradient(135deg,rgba(245,158,11,.16),rgba(99,102,241,.10)); }
.admin-gen-main { min-width:0; }
.admin-gen-top { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom:4px; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; }
.admin-gen-user { color:var(--text-2); font-size:12px; margin-bottom:5px; }
.admin-gen-user span { color:var(--text-3); margin-left:6px; }
.admin-gen-prompt { color:var(--text); font-size:13px; line-height:1.55; margin-bottom:8px; }
.admin-gen-meta { display:flex; gap:8px; flex-wrap:wrap; color:var(--text-3); font-size:11px; }
.admin-gen-meta span { padding:3px 7px; border-radius:999px; background:rgba(255,255,255,.55); }
.admin-gen-modal { max-width:780px; }
.admin-gen-prompt-full { white-space:pre-wrap; overflow-wrap:anywhere; }
.admin-gen-asset-section { margin-top:18px; padding-top:15px; border-top:1px solid rgba(148,163,184,.2); }
.admin-gen-asset-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.admin-gen-asset-head b { font-size:13px; }
.admin-gen-asset-head span,.admin-gen-no-assets { color:var(--text-3); font-size:11px; }
.admin-gen-image-card { padding:0; overflow:hidden; border:1px solid rgba(148,163,184,.18); border-radius:16px; background:rgba(255,255,255,.5); cursor:pointer; text-align:left; transition:var(--transition-fast); }
.admin-gen-image-card:hover { transform:translateY(-2px); box-shadow:var(--glass-shadow-hover); }
.admin-gen-image-card img { border-radius:0; aspect-ratio:1 / 1; object-fit:cover; }
.admin-gen-image-card span { display:block; padding:8px 9px; color:var(--text-2); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-gen-image-empty { display:grid; min-height:140px; place-items:center; color:var(--text-3); font-size:12px; }
.works-active-jobs { margin-bottom:16px; padding:14px; }
.works-active-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.works-active-head b { display:block; font-size:13px; }
.works-active-head span { display:block; margin-top:2px; color:var(--text-3); font-size:11px; }
.works-active-list { display:grid; gap:8px; margin-top:12px; }
.works-active-item { display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:10px; background:rgba(99,102,241,.055); }
.works-active-item b,.works-active-item span:not(.rp-task-status) { display:block; }
.works-active-item b { color:var(--text); font-size:12px; }
.works-active-item span:not(.rp-task-status) { color:var(--text-3); font-size:11px; margin-top:2px; }
.admin-gen-detail-grid { display:grid; grid-template-columns:72px 1fr; gap:8px 14px; font-size:13px; }
.admin-gen-detail-grid > div:nth-child(odd) { color:var(--text-3); }
.admin-gen-images { margin-top:14px; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; }
.admin-gen-images img { width:100%; border-radius:16px; box-shadow:var(--shadow); }
.badge-danger { background:rgba(244,63,94,.12); color:#be123c; border-color:rgba(244,63,94,.18); }
@media (max-width: 860px) { .admin-gen-filters { grid-template-columns:1fr 1fr; } .admin-gen-actions { grid-column:1/-1; } .admin-gen-hero { align-items:flex-start; flex-direction:column; } }

/* v7 admin polish + dashboard */
.recent-hint { margin:-4px 0 10px; color:var(--text-3); font-size:12px; }
.dash-page,.admin-users-page { display:flex; flex-direction:column; gap:14px; }
.dash-hero,.admin-users-hero { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px; border-radius:var(--radius-xl); position:relative; overflow:hidden; }
.dash-hero:after,.admin-users-hero:after { content:""; position:absolute; right:-80px; top:-100px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle,rgba(99,102,241,.20),transparent 68%); pointer-events:none; }
.dash-hero h2,.admin-users-hero h2 { font-size:20px; margin:0 0 6px; }
.dash-hero p,.admin-users-hero p { margin:0; color:var(--text-2); font-size:12px; }
.dash-kpis,.user-kpis { display:grid; grid-template-columns:repeat(4,minmax(140px,1fr)); gap:12px; }
.dash-kpi,.user-kpi { padding:16px; border-radius:var(--radius-lg); overflow:hidden; position:relative; }
.dash-kpi:before,.user-kpi:before { content:""; position:absolute; inset:auto -20px -30px auto; width:95px; height:95px; border-radius:50%; background:rgba(99,102,241,.08); }
.dash-kpi span,.user-kpi span { display:block; color:var(--text-3); font-size:12px; margin-bottom:8px; }
.dash-kpi b,.user-kpi b { display:block; font-size:26px; line-height:1; color:var(--text); }
.dash-kpi em { display:block; margin-top:8px; color:var(--text-3); font-style:normal; font-size:11px; }
.dash-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.dash-panel { padding:16px; border-radius:var(--radius-lg); min-height:220px; }
.dash-panel-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.dash-panel-head h3 { font-size:14px; margin:0; }
.dash-panel-head span { color:var(--text-3); font-size:11px; }
.alert-list,.failure-list { display:grid; gap:10px; }
.alert-item { display:grid; grid-template-columns:10px 1fr; gap:10px; align-items:start; padding:10px; border-radius:14px; background:rgba(255,255,255,.52); border:1px solid rgba(255,255,255,.6); }
.alert-dot { width:9px; height:9px; border-radius:50%; margin-top:5px; background:var(--emerald); box-shadow:0 0 0 4px rgba(16,185,129,.12); }
.alert-item.warning .alert-dot { background:var(--amber); box-shadow:0 0 0 4px rgba(245,158,11,.14); }
.alert-item.danger .alert-dot { background:var(--rose); box-shadow:0 0 0 4px rgba(244,63,94,.14); }
.alert-item b { font-size:13px; }
.alert-item p { color:var(--text-2); font-size:12px; margin:2px 0 0; }
.failure-item { padding:10px; border-radius:14px; background:rgba(255,255,255,.52); border:1px solid rgba(255,255,255,.6); }
.failure-item p { color:var(--text-2); font-size:12px; line-height:1.45; margin:5px 0; }
.failure-item em { color:var(--text-3); font-size:11px; font-style:normal; }
.empty-mini { display:grid; place-items:center; min-height:150px; color:var(--text-3); font-size:12px; }
.admin-user-actions { display:flex; gap:8px; flex-wrap:wrap; z-index:1; }
.admin-user-table-card { border-radius:var(--radius-xl); overflow:hidden; }
.admin-table-note { padding:12px 14px; color:var(--text-2); font-size:12px; border-bottom:1px solid rgba(255,255,255,.5); background:rgba(99,102,241,.06); }
.user-cell { display:flex; align-items:center; gap:10px; min-width:160px; }
.user-avatar { width:34px; height:34px; border-radius:12px; display:grid; place-items:center; font-weight:800; color:#fff; background:linear-gradient(135deg,var(--accent),var(--cyan)); box-shadow:0 10px 22px rgba(99,102,241,.18); }
.user-cell b { display:block; font-size:13px; }
.user-cell span { display:block; color:var(--text-3); font-size:11px; margin-top:2px; }
.user-row-actions { display:flex; gap:5px; flex-wrap:wrap; min-width:150px; }
.admin-user-table tbody tr { transition:.16s ease; }
.admin-user-table tbody tr:hover { transform:translateX(2px); }
@media (max-width: 900px) { .dash-kpis,.user-kpis,.dash-grid { grid-template-columns:1fr; } .dash-hero,.admin-users-hero { flex-direction:column; align-items:flex-start; } }

/* Admin channel model routing */
.channel-manager-head { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; margin-bottom:14px; }
.channel-manager-head h3 { margin:0 0 4px; font-size:15px; }
.channel-manager-head p { margin:0; color:var(--text-2); font-size:12px; }
.channel-grid-rich { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.channel-card-rich { padding:16px; background:rgba(255,255,255,.62); }
.channel-card-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:12px; }
.channel-card-head strong { display:block; font-size:14px; color:var(--text); }
.channel-card-head .mono { display:block; margin-top:2px; color:var(--text-3); font-size:11px; }
.channel-card-rich label span { display:block; margin:0 0 5px; color:var(--text-3); font-size:11px; }
.channel-models { min-height:86px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; }
.channel-mini-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.channel-mini-meta span { padding:3px 8px; border-radius:999px; background:rgba(99,102,241,.08); color:var(--text-2); font-size:11px; }
.channel-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.admin-gen-cover { overflow:hidden; }
.admin-gen-cover img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.admin-gen-image-card { display:block; color:var(--text-2); font-size:11px; }
.admin-gen-image-card { all: unset; display: block; color: var(--text-2); font-size: 11px; text-align: center; cursor: pointer; }
.admin-gen-image-card img { aspect-ratio:1/1; object-fit:cover; background:rgba(0,0,0,.04); margin-bottom:6px; }
.admin-gen-image-card img { width: 100%; border-radius: 16px; box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease; }
.admin-gen-image-card:hover img { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(31,41,91,.18); }
.admin-gen-image-card span { display: block; margin-top: 4px; }
.admin-gen-image-empty { aspect-ratio:1/1; display:grid; place-items:center; border-radius:16px; background:rgba(0,0,0,.04); color:var(--text-3); }
@media (max-width: 720px) { .channel-manager-head { flex-direction:column; } .channel-grid-rich { grid-template-columns:1fr; } }

/* Admin channel list layout */
.channel-list { display:flex; flex-direction:column; gap:10px; }
.channel-row-form { border:1px solid rgba(15,23,42,.07); border-radius:14px; background:rgba(255,255,255,.58); overflow:hidden; }
.channel-row-form.empty { background:rgba(248,250,252,.68); }
.channel-row { display:grid; grid-template-columns:minmax(220px,1.8fr) 120px 86px 76px minmax(250px,auto); gap:10px; align-items:center; padding:12px; }
.channel-name-btn { text-align:left; border:0; background:transparent; padding:0; cursor:pointer; color:var(--text); }
.channel-name-btn strong { display:block; font-size:13px; }
.channel-name-btn span { display:block; margin-top:3px; color:var(--text-3); font-size:11px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.channel-inline-priority span { display:block; margin-bottom:4px; color:var(--text-3); font-size:10px; }
.channel-inline-priority .input { height:34px; padding:6px 8px; }
.channel-switch { display:flex; align-items:center; gap:6px; color:var(--text-2); font-size:12px; }
.channel-switch input { width:16px; height:16px; accent-color:var(--accent); }
.channel-row-actions { display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; }
.channel-row-actions .btn[disabled] { opacity:.45; cursor:not-allowed; }
.channel-detail { display:none; border-top:1px solid rgba(15,23,42,.06); padding:14px; background:rgba(255,255,255,.46); }
.channel-row-form.open .channel-detail { display:block; }
.channel-detail label span { display:block; margin:0 0 5px; color:var(--text-3); font-size:11px; }
@media (max-width: 980px) {
  .channel-row { grid-template-columns:1fr 96px 76px; }
  .channel-row-actions { grid-column:1 / -1; justify-content:flex-start; }
}
@media (max-width: 640px) {
  .channel-row { grid-template-columns:1fr; }
  .channel-row-actions { justify-content:flex-start; }
}
.tpl-cover{width:54px;height:54px;border-radius:16px;overflow:hidden;border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}
.tpl-cover img{width:100%;height:100%;object-fit:cover;display:block}.tpl-modal{max-width:860px}.tpl-modal-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}.tpl-modal-head h3{font-size:18px;margin-bottom:4px}.tpl-modal-head p{font-size:12px;color:var(--text-2)}.tpl-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;max-height:420px;overflow:auto;padding:2px}.tpl-preview-card{position:relative;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.5);border:1px solid var(--glass-border);aspect-ratio:1/1}.tpl-preview-card img{width:100%;height:100%;object-fit:cover;display:block}.tpl-empty-img{height:100%;display:grid;place-items:center;color:var(--text-3);font-size:12px}.tpl-img-del,.tpl-img-badge{position:absolute;right:8px;top:8px;border:0;border-radius:999px;padding:4px 8px;font-size:11px;background:rgba(15,23,42,.72);color:#fff}.tpl-img-del{cursor:pointer;background:rgba(244,63,94,.82)}.tpl-custom-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px}.tpl-prompt-preview{margin-top:12px;padding:10px;border-radius:14px;background:rgba(99,102,241,.08);font-size:12px;color:var(--text-2);line-height:1.6;white-space:pre-wrap}
.tpl-desc-full{margin:-4px 0 12px;color:var(--text-2);font-size:13px;line-height:1.6}.tpl-editor-form{display:grid;gap:10px}.tpl-editor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tpl-editor-form label span{display:block;font-size:12px;color:var(--text-2);margin:0 0 5px}.tpl-editor-form textarea.input{resize:vertical;line-height:1.55}.tpl-enable{display:flex!important;align-items:center;gap:8px;font-size:12px;color:var(--text-2)}.tpl-enable input{width:auto}.btn-danger{background:linear-gradient(135deg,#fb7185,#e11d48);color:#fff;box-shadow:0 10px 25px rgba(225,29,72,.22)}@media(max-width:720px){.tpl-editor-grid{grid-template-columns:1fr}.tpl-custom-actions{align-items:stretch;flex-direction:column}.tpl-custom-actions>div{justify-content:flex-start;flex-wrap:wrap}}
.prompt-textarea{min-height:180px;max-height:460px;overflow-y:auto;line-height:1.65}.size-hint{font-size:11px;color:var(--text-3);line-height:1.45;max-width:360px}.tpl-size-hint{padding:8px 10px;border-radius:10px;background:rgba(14,165,233,.08);color:var(--text-2)}.tpl-limit-note{font-size:12px;color:var(--text-3);align-self:center}.tpl-editor-form .input.auto-resize{min-height:90px;max-height:320px;overflow-y:auto}
.preview-overlay{z-index:10000}.preview-modal{max-width:780px;max-height:90vh;overflow-y:auto}.preview-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.preview-meta{font-size:12px;color:var(--text-2);margin-bottom:10px;line-height:1.6}.preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}.preview-img-card{background:var(--card-bg);border-radius:var(--radius-md);overflow:hidden;padding:8px;text-align:center}.preview-img-card img{width:100%;border-radius:6px;cursor:pointer;transition:transform .15s}.preview-img-card img:hover{transform:scale(1.03)}.preview-img-label{display:block;font-size:10px;color:var(--text-3);margin-top:4px}
.image-lightbox{position:fixed;inset:0;z-index:20000;background:rgba(3,7,18,.94);display:grid;grid-template-rows:auto 1fr;padding:14px}.image-lightbox-toolbar{display:flex;align-items:center;justify-content:center;gap:8px;padding-bottom:12px}.image-lightbox-toolbar button,.image-lightbox-toolbar a{width:36px;height:36px;border:1px solid rgba(255,255,255,.2);border-radius:6px;background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;text-decoration:none;cursor:pointer;font-size:16px}.image-lightbox-zoom{width:52px;text-align:center;color:#fff;font-size:12px}.image-lightbox-stage{min-height:0;overflow:auto;display:grid;place-items:center}.image-lightbox-img{max-width:92vw;max-height:82vh;object-fit:contain;transform-origin:center;transition:transform .15s ease;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.tpl-img-area{width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--card-bg);border-radius:var(--radius-md);margin-bottom:4px}.tpl-img-area img{width:100%;height:100%;object-fit:cover}.tpl-img-meta{margin:4px 0;font-size:11px;line-height:1.4}.tpl-img-prompt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--text-2)}.tpl-no-prompt{font-size:10px;color:var(--text-3);font-style:italic}.tpl-img-actions{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}.tpl-img-edit-prompt{padding:0 4px 4px;margin-bottom:4px}
.gen-progress-hint{margin-top:10px;font-size:12px;color:var(--text-2);background:rgba(255,255,255,.4);border-radius:10px;padding:8px 10px;line-height:1.5}
.admin-coupon-table th,.admin-coupon-table td{font-size:12px}
.coupon-code{background:rgba(99,102,241,.1);padding:2px 6px;border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px}
.coupon-editor-form{display:grid;gap:10px}
.coupon-editor-form label{display:grid;gap:4px;font-size:12px;color:var(--text-2)}
.coupon-editor-form .input{padding:8px 10px}
.ref-stack{display:grid;gap:6px;margin-top:8px}.ref-style-banner{border-color:rgba(6,182,212,.25);background:rgba(6,182,212,.08)}
.tpl-editor-image-section{margin-top:14px;padding:12px;border:1px solid rgba(99,102,241,.14);background:rgba(255,255,255,.38);border-radius:var(--radius-lg)}
.tpl-editor-image-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:10px;font-size:12px;color:var(--text-2)}
.tpl-editor-image-head strong{display:block;color:var(--text);font-size:13px;margin-bottom:2px}.tpl-editor-image-head span{font-size:11px;color:var(--text-3);line-height:1.45}.tpl-editor-images{margin-top:0!important}.tpl-editor-image-card{padding-bottom:8px}.tpl-img-edit-prompt{display:grid;gap:4px;padding:0 4px 6px;margin:0}.tpl-img-edit-prompt span{font-size:10px;color:var(--text-3);font-weight:700}.tpl-img-edit-prompt textarea{width:100%;box-sizing:border-box;font-size:12px;line-height:1.45;padding:7px 8px;resize:vertical;min-height:58px}
.tpl-editor-image-clickable{cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.tpl-editor-image-clickable:hover{transform:translateY(-2px);border-color:rgba(99,102,241,.55);box-shadow:0 14px 32px rgba(31,41,91,.18)}.tpl-editor-image-clickable .tpl-img-area{position:relative}.tpl-img-prompt-badge{position:absolute;left:8px;right:8px;bottom:8px;padding:7px 9px;border-radius:9px;background:rgba(15,23,42,.76);backdrop-filter:blur(8px);color:#fff;font-size:11px;text-align:center}.tpl-sample-prompt-summary{min-height:54px;padding:10px 11px;color:var(--text-2);font-size:12px;line-height:1.5}.sample-prompt-overlay{z-index:1200}.sample-prompt-modal{width:min(720px,calc(100vw - 28px))}.sample-prompt-modal textarea{min-height:280px;line-height:1.65;resize:vertical}.sample-prompt-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
@media(max-width:640px){.tx-item{grid-template-columns:minmax(0,1fr) 86px;gap:4px 10px}.tx-time{grid-column:1/2;grid-row:2;text-align:left}.tx-amount{grid-column:2/3;grid-row:1/3;align-self:center}.tx-type{grid-column:1/2}}
.tpl-sample-guide{display:grid;gap:4px;margin:10px 0 12px;padding:10px 12px;border-radius:14px;background:linear-gradient(135deg,rgba(99,102,241,.10),rgba(6,182,212,.10));border:1px solid rgba(99,102,241,.16);font-size:12px;color:var(--text-2)}
.tpl-sample-guide b{color:var(--text);font-size:13px}.tpl-sample-card{padding-bottom:10px}.tpl-detail-prompt{margin-top:6px;background:rgba(255,255,255,.5);border-radius:10px;padding:8px}.tpl-sample-prompt-input{min-height:70px!important}.tpl-sample-use{width:100%;justify-content:center;margin-top:4px}.tpl-img-actions{width:100%}
.tpl-main-preview{display:flex;justify-content:center;margin:12px 0 8px}
.tpl-main-preview-card{width:100%;max-width:360px;background:rgba(255,255,255,.45);border:1px solid rgba(99,102,241,.18);border-radius:var(--radius-lg);padding:12px;display:grid;gap:8px}
.tpl-main-preview-card .tpl-img-area{border-radius:12px;overflow:hidden;aspect-ratio:3/4;background:var(--card-bg)}
.tpl-main-prompt-editor{margin-top:4px;background:rgba(255,255,255,.6);border-radius:10px;padding:10px}
.tpl-main-prompt-editor span{font-size:12px;font-weight:700;color:var(--text)}
.tpl-main-prompt-editor textarea{font-size:13px}
.tpl-big-sample-use{width:100%;justify-content:center;padding:10px 14px;font-size:14px}
.CSS
node --check ai-photo-web/app.js
.tpl-main-preview{display:flex;justify-content:center;margin:12px 0 8px}
.tpl-main-preview-card{width:100%;max-width:360px;background:rgba(255,255,255,.45);border:1px solid rgba(99,102,241,.18);border-radius:var(--radius-lg);padding:12px;display:grid;gap:8px}
.tpl-main-preview-card .tpl-img-area{border-radius:12px;overflow:hidden;aspect-ratio:3/4;background:var(--card-bg)}
.tpl-main-prompt-editor{margin-top:4px;background:rgba(255,255,255,.6);border-radius:10px;padding:10px}
.tpl-main-prompt-editor span{font-size:12px;font-weight:700;color:var(--text)}
.tpl-main-prompt-editor textarea{font-size:13px}
.tpl-big-sample-use{width:100%;justify-content:center;padding:10px 14px;font-size:14px}
.tpl-card{position:relative}.tpl-card-actions-overlay{position:absolute;inset:0;background:rgba(15,23,42,.55);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;opacity:1}.tpl-card-sample-btn{font-size:13px;padding:8px 14px}.tpl-more-samples{margin-top:14px}.tpl-more-title{font-size:12px;font-weight:700;color:var(--text-3);margin-bottom:8px;padding-left:4px}
.tpl-prompt-step{background:rgba(255,255,255,.65);border:1px solid rgba(99,102,241,.18);border-radius:12px;padding:10px;margin-top:6px}
.tpl-step-label{font-size:12px;font-weight:800;color:#4f46e5;margin-bottom:6px}
.tpl-prompt-readonly,.tpl-prompt-readonly-sm{font-size:12px;color:var(--text-2);line-height:1.5}
.tpl-prompt-readonly span,.tpl-prompt-readonly-sm span{font-weight:700;color:var(--text)}
.tpl-prompt-readonly i,.tpl-prompt-readonly-sm i{color:var(--text-3)}
.tpl-main-prompt-editor span{font-size:12px;font-weight:700;color:#4f46e5}
.tpl-img-edit-prompt span{font-size:11px;font-weight:700;color:#4f46e5}
.tpl-detail-samples{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:12px 0}
.tpl-detail-sample-card{background:rgba(255,255,255,.55);border:1px solid rgba(99,102,241,.12);border-radius:var(--radius-lg);padding:10px;cursor:pointer;transition:border-color .15s,box-shadow .15s;display:flex;flex-direction:column;gap:8px}
.tpl-detail-sample-card:hover{border-color:rgba(99,102,241,.35);box-shadow:0 8px 24px rgba(99,102,241,.08)}
.tpl-detail-sample-card .tpl-img-area{border-radius:10px;overflow:hidden;aspect-ratio:3/4;background:var(--card-bg)}
.tpl-detail-sample-info{display:flex;flex-direction:column;gap:6px}
.tpl-detail-sample-name{font-size:12px;font-weight:700;color:var(--text)}
.tpl-detail-sample-prompt{max-height:0;overflow:hidden;transition:max-height .2s}
.tpl-detail-sample-card.expanded .tpl-detail-sample-prompt{max-height:260px}
.tpl-detail-sample-actions{display:flex;gap:6px;justify-content:center;margin-top:2px}
.tpl-detail-user-refs{background:rgba(255,255,255,.5);border:1px dashed rgba(99,102,241,.25);border-radius:12px;padding:12px;margin:8px 0}
.tpl-detail-user-refs-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:8px}
.tpl-detail-user-refs-list{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.tpl-detail-ref-thumb{position:relative;width:64px;height:64px;border-radius:8px;overflow:hidden;border:1px solid rgba(99,102,241,.18)}
.tpl-detail-ref-thumb img{width:100%;height:100%;object-fit:cover}
.tpl-detail-ref-thumb button{position:absolute;top:2px;right:2px;background:rgba(255,255,255,.85);border:none;border-radius:4px;padding:2px 4px;font-size:10px;line-height:1}
.tpl-detail-user-refs-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ref-multi-banner{display:flex;flex-direction:column;gap:6px}
.ref-thumbs{display:flex;gap:6px;flex-wrap:wrap}
.ref-thumb{position:relative;width:52px;height:52px;border-radius:6px;overflow:hidden;border:1px solid rgba(99,102,241,.2)}
.ref-thumb img{width:100%;height:100%;object-fit:cover}
.ref-thumb button{position:absolute;top:1px;right:1px;background:rgba(255,255,255,.9);border:none;border-radius:3px;padding:1px 3px;font-size:9px}
.tpl-img-edit-prompt span{font-size:11px;font-weight:700;color:#4f46e5}
.tpl-prompt-readonly-sm{font-size:12px;color:var(--text-2)}
.tpl-prompt-readonly-sm span{font-weight:700;color:var(--text)}
@media (max-width: 768px) {
  .app-shell{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:90;width:220px;transform:translateX(-100%);transition:transform .2s}
  .sidebar.open{transform:translateX(0)}
  .main{grid-column:1;padding:12px}
  .tpl-detail-samples{grid-template-columns:repeat(2,1fr)}
  .tpl-detail-sample-card{padding:8px}
  .modal{max-width:calc(100vw - 24px);max-height:calc(100vh - 24px)}
  .tpl-modal{width:calc(100vw - 24px)}
  .prompt-toolbar{flex-direction:column;align-items:stretch;gap:10px}
  .prompt-toolbar-right{justify-content:space-between;flex-wrap:wrap}
  .tpl-grid{grid-template-columns:repeat(2,1fr)}
  .ref-thumbs{flex-wrap:wrap}
}
@media (max-width: 480px) {
  .tpl-detail-samples{grid-template-columns:1fr}
  .tpl-grid{grid-template-columns:1fr}
  .tpl-custom-actions{flex-direction:column;gap:10px;align-items:stretch}
  .tpl-detail-owner-actions{justify-content:flex-start}
  .tpl-modal-head h3{font-size:15px}
  .tpl-detail-sample-actions{flex-direction:column}
  .tpl-detail-sample-actions .btn{width:100%}
}