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

:root{
  --bg:#0d0d12;
  --bg-secondary:#16161d;
  --surface:#1c1c26;
  --surface-elevated:#242430;
  --border:#2e2e3d;
  --border-light:#3a3a4f;
  --text:#f0f0f5;
  --text-secondary:#a0a0b5;
  --text-muted:#6b6b80;
  --accent:#00e5a0;
  --accent-dim:#00b87d;
  --accent-glow:rgba(0,229,160,0.15);
  --danger:#ff6b6b;
  --success:#34d399;
  --warning:#fbbf24;
  --gradient-1:linear-gradient(135deg,#00e5a0 0%,#00b4d8 50%,#9b5de5 100%);
  --gradient-2:linear-gradient(45deg,#ff6b6b 0%,#feca57 100%);
  --noise:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  --transition-fast:0.15s cubic-bezier(0.4,0,0.2,1);
  --transition-smooth:0.3s cubic-bezier(0.4,0,0.2,1);
  --transition-bounce:0.5s cubic-bezier(0.34,1.56,0.64,1);
  --shadow-sm:0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:0 8px 32px rgba(0,0,0,0.4);
  --shadow-lg:0 16px 64px rgba(0,0,0,0.5);
  --shadow-glow:0 0 40px var(--accent-glow);
}

[data-theme="light"]{
  --bg:#fafafa;
  --bg-secondary:#ffffff;
  --surface:#ffffff;
  --surface-elevated:#f5f5f7;
  --border:#e0e0e5;
  --border-light:#d0d0d8;
  --text:#1a1a1f;
  --text-secondary:#55555f;
  --text-muted:#888895;
  --accent:#00b87d;
  --accent-dim:#009966;
  --accent-glow:rgba(0,184,125,0.12);
  --danger:#ff6b6b;
  --success:#10b981;
  --warning:#f59e0b;
  --shadow-sm:0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:0 8px 32px rgba(0,0,0,0.08);
  --shadow-lg:0 16px 64px rgba(0,0,0,0.1);
  --shadow-glow:0 0 60px var(--accent-glow);
}

html{scroll-behavior:smooth}
body{
  font-family:'Space Grotesk',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  transition:background var(--transition-smooth),color var(--transition-smooth);
}

/* Animated background */
.bg-canvas{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.bg-canvas::before{
  content:'';
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:
    radial-gradient(ellipse 600px 400px at 20% 30%,var(--accent-glow) 0%,transparent 70%),
    radial-gradient(ellipse 500px 500px at 80% 70%,rgba(155,93,229,0.08) 0%,transparent 60%),
    radial-gradient(ellipse 400px 300px at 60% 20%,rgba(0,180,216,0.06) 0%,transparent 50%);
  animation:bgFloat 20s ease-in-out infinite;
}
@keyframes bgFloat{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  33%{transform:translate(2%,1%) rotate(1deg)}
  66%{transform:translate(-1%,2%) rotate(-1deg)}
}
.bg-canvas::after{
  content:'';
  position:absolute;
  inset:0;
  background:var(--noise);
  opacity:0.5;
}

/* Grid pattern overlay */
.grid-overlay{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:0.03;
  background-image:
    linear-gradient(var(--text) 1px,transparent 1px),
    linear-gradient(90deg,var(--text) 1px,transparent 1px);
  background-size:60px 60px;
}

.app{
  position:relative;
  z-index:2;
  max-width:1875px;
  margin:0 auto;
  padding:24px;
  display:grid;
  grid-template-columns:475px 1fr;
  gap:28px;
  min-height:100vh;
}
@media(max-width:1000px){
  .app{grid-template-columns:1fr;padding:16px;gap:20px}
}

/* Panel styling */
.panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:20px;
  height:fit-content;
  position:sticky;
  top:24px;
  box-shadow:var(--shadow-md);
  backdrop-filter:blur(20px);
  transition:all var(--transition-smooth);
}
.panel::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:20px;
  padding:1px;
  background:linear-gradient(135deg,var(--border-light),transparent 50%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}

/* Header */
.panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.panel h1{
  font-size:1.5rem;
  font-weight:700;
  background:var(--gradient-1);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  display:flex;
  align-items:center;
  gap:10px;
  letter-spacing:-0.02em;
}
.panel h1::before{
  content:'';
  width:10px;
  height:10px;
  background:var(--accent);
  border-radius:2px;
  -webkit-text-fill-color:initial;
  animation:logoPulse 2s ease-in-out infinite;
}
@keyframes logoPulse{
  0%,100%{transform:scale(1) rotate(0deg);opacity:1}
  50%{transform:scale(1.2) rotate(45deg);opacity:0.7}
}

.brand{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.copyright{
  font-size:0.7rem;
  color:var(--text-muted);
  font-weight:400;
  letter-spacing:0.02em;
  margin-left:20px;
}

/* Theme toggle */
.theme-toggle{
  position:relative;
  width:52px;
  height:28px;
  background:var(--surface-elevated);
  border:1px solid var(--border);
  border-radius:14px;
  cursor:pointer;
  transition:all var(--transition-smooth);
  overflow:hidden;
}
.theme-toggle::before{
  content:'';
  position:absolute;
  top:3px;
  left:3px;
  width:20px;
  height:20px;
  background:var(--gradient-1);
  border-radius:50%;
  transition:all var(--transition-bounce);
  box-shadow:var(--shadow-sm);
}
.theme-toggle:hover::before{
  transform:scale(1.1);
}
[data-theme="light"] .theme-toggle::before{
  left:27px;
}
.theme-toggle .icon-sun,.theme-toggle .icon-moon{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:14px;
  height:14px;
  transition:all var(--transition-fast);
}
.theme-toggle .icon-moon{
  left:7px;
  opacity:1;
}
.theme-toggle .icon-sun{
  right:7px;
  opacity:0.4;
}
[data-theme="light"] .theme-toggle .icon-moon{opacity:0.4}
[data-theme="light"] .theme-toggle .icon-sun{opacity:1}

/* Form elements */
.form-group{
  display:flex;
  flex-direction:column;
  gap:8px;
}
label{
  font-size:0.8rem;
  font-weight:600;
  color:var(--text-secondary);
  text-transform:uppercase;
  letter-spacing:0.08em;
}

input,textarea,select{
  width:100%;
  background:var(--surface-elevated);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 16px;
  color:var(--text);
  font-family:inherit;
  font-size:0.95rem;
  outline:none;
  transition:all var(--transition-fast);
}
input:focus,textarea:focus,select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow);
}
input::placeholder,textarea::placeholder{
  color:var(--text-muted);
}
input[type="number"]{
  text-align:center;
  font-family:'JetBrains Mono',monospace;
  font-size:0.9rem;
}
textarea{
  resize:vertical;
  min-height:160px;
  line-height:1.6;
}
select{
  cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:44px;
}
select:hover{
  border-color:var(--border-light);
}

.key-input-wrap{
  position:relative;
}
.key-input-wrap input{
  padding-right:48px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.85rem;
  letter-spacing:0.02em;
}
.secret-textarea{
  min-height:96px;
  padding-right:48px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.82rem;
  letter-spacing:0.02em;
}
.secret-textarea.masked{
  -webkit-text-security:disc;
}
.key-toggle{
  position:absolute;
  right:12px;
  top:12px;
  background:none;
  border:none;
  color:var(--text-muted);
  cursor:pointer;
  padding:4px;
  border-radius:6px;
  transition:all var(--transition-fast);
  font-size:1rem;
}
.key-toggle:hover{
  color:var(--text);
  background:var(--border);
}
.key-input-wrap input + .key-toggle{
  top:50%;
  transform:translateY(-50%);
}
.key-input-wrap textarea + .key-toggle{
  top:12px;
  transform:none;
}

.endpoint-select-wrap{
  position:relative;
  display:flex;
  gap:8px;
}
.endpoint-select-wrap select{
  flex:1;
}
.refresh-endpoint{
  padding:8px 12px;
  background:var(--surface-elevated);
  border:1px solid var(--border);
  border-radius:8px;
  cursor:pointer;
  transition:all var(--transition-fast);
  font-size:1rem;
  min-width:36px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.refresh-endpoint:hover{
  border-color:var(--accent);
  background:var(--accent-glow);
}
.mini-btn:disabled,
button:disabled{
  opacity:0.55;
  cursor:not-allowed;
  transform:none !important;
}

/* Row layout */
.row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

/* Buttons */
.btn{
  position:relative;
  padding:16px 24px;
  border:none;
  border-radius:14px;
  font-family:inherit;
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
  transition:all var(--transition-fast);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  overflow:hidden;
}
.btn-primary{
  background:var(--gradient-1);
  color:#fff;
  box-shadow:var(--shadow-sm),var(--shadow-glow);
}
.btn-primary::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.2),transparent 50%);
  opacity:0;
  transition:opacity var(--transition-fast);
}
.btn-primary:hover::before{opacity:1}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md),var(--shadow-glow);
}
.btn-primary:active{
  transform:translateY(0);
}
.btn-primary:disabled{
  opacity:0.5;
  cursor:not-allowed;
  transform:none;
  box-shadow:var(--shadow-sm);
}

.btn-secondary{
  background:var(--surface-elevated);
  color:var(--text);
  border:1px solid var(--border);
}
.btn-secondary:hover{
  border-color:var(--accent);
  background:var(--accent-glow);
}

[hidden]{
  display:none !important;
}

.label-note{
  color:var(--text-muted);
  font-size:0.72rem;
  font-weight:600;
}

.inline-status-text{
  color:var(--text-muted);
  font-size:0.75rem;
  margin-left:8px;
}

.inline-status-text.success{color:var(--success)}
.inline-status-text.accent{color:var(--accent)}
.inline-status-text.warning{color:var(--warning)}

.field-help{
  color:var(--text-muted);
  font-size:0.8rem;
}

.field-help-spaced{
  margin-top:6px;
  font-size:0.75rem;
}

.field-help.warning{color:var(--warning)}
.field-help.danger{color:var(--danger)}
.field-help.success{color:var(--success)}
.field-help.accent{color:var(--accent)}

.stack-top{
  margin-top:12px;
}

.file-input-hidden{
  display:none;
}

.clipboard-helper{
  position:fixed;
  opacity:0;
}

body.lightbox-open{
  overflow:hidden;
}

.button-accent-soft{
  background:rgba(0,229,160,0.3);
}

.custom-size-inputs{
  margin-top:10px;
}

.custom-size-grid{
  display:flex;
  gap:8px;
}

.custom-size-field{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.mini-field-label{
  font-size:0.7rem;
  text-transform:none;
  letter-spacing:0;
}

.flush-label{
  margin:0;
}

.section-subtitle{
  margin-top:10px;
}

.toolbar-search{
  max-width:260px;
}

.modal-actions-tight{
  margin-top:12px;
}
.modal-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.empty-state{
  color:var(--text-muted);
  font-size:0.85rem;
  padding:40px;
  text-align:center;
}

.empty-state-compact{
  padding:20px;
}

.empty-state.danger{
  color:var(--danger);
}

.inline-state{
  color:var(--text-muted);
  font-size:0.85rem;
}

.inline-state.danger{
  color:var(--danger);
}

.text-danger{
  color:var(--danger);
}

.text-muted{
  color:var(--text-muted);
}

.status-inline{
  font-size:0.75rem;
}

.status-inline.success{color:var(--success)}
.status-inline.accent{color:var(--accent)}
.status-inline.warning{color:var(--warning)}
.status-inline.danger{color:var(--danger)}

/* Spinner */
.spinner{
  width:20px;
  height:20px;
  border:2px solid rgba(255,255,255,0.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin 0.6s linear infinite;
  display:none;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Reference images upload */
.ref-images-area{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.ref-upload-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:24px 16px;
  background:var(--surface-elevated);
  border:1px dashed var(--border);
  border-radius:12px;
  cursor:pointer;
  transition:all var(--transition-fast);
  color:var(--text-secondary);
  width:100%;
  min-height:80px;
}
.ref-upload-btn:hover{
  border-color:var(--accent);
  background:var(--accent-glow);
  color:var(--accent);
}
.ref-upload-btn.disabled{
  opacity:0.5;
  cursor:not-allowed;
  pointer-events:none;
}
.ref-upload-btn svg{
  transition:transform var(--transition-fast);
}
.ref-upload-btn:hover svg{
  transform:translateY(-3px);
}
.ref-upload-btn.drag-over{
  border-color:var(--accent);
  background:var(--accent-glow);
  color:var(--accent);
  transform:scale(1.01);
  border-style:solid;
}
.ref-upload-btn.drag-over svg{
  transform:translateY(-6px) scale(1.15);
}

.btn-clear-ref-full{
  width:100%;
  padding:10px 16px;
  border:1px solid var(--border);
  border-radius:10px;
  background:transparent;
  color:var(--text-muted);
  font-size:0.85rem;
  cursor:pointer;
  transition:all var(--transition-fast);
  margin-top:8px;
}
.btn-clear-ref-full:hover{
  border-color:var(--danger);
  color:var(--danger);
  background:rgba(255,107,107,0.1);
}

.ref-preview-list{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.ref-preview-item{
  position:relative;
  width:60px;
  height:60px;
  border-radius:8px;
  overflow:hidden;
  border:1px solid var(--border);
  animation:refPreviewIn 0.3s ease;
}
@keyframes refPreviewIn{
  from{opacity:0;transform:scale(0.8)}
  to{opacity:1;transform:scale(1)}
}
.ref-preview-item img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.ref-preview-item .ref-delete{
  position:absolute;
  top:2px;
  right:2px;
  width:18px;
  height:18px;
  background:rgba(0,0,0,0.7);
  border:none;
  border-radius:50%;
  color:#fff;
  font-size:10px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity var(--transition-fast);
}
.ref-preview-item:hover .ref-delete{
  opacity:1;
}
.ref-preview-item .ref-delete:hover{
  background:var(--danger);
}
.ref-preview-item:hover{
  border-color:var(--accent);
}

/* Prompt examples */
.prompt-examples-panel{
  gap:10px;
}
.prompt-example-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.prompt-example-card{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface-elevated);
  box-shadow:0 1px 0 rgba(255,255,255,0.04) inset;
}
.prompt-example-images{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:2px;
  min-height:118px;
  max-height:132px;
  background:var(--surface-soft);
}
.prompt-example-images img{
  width:100%;
  height:100%;
  min-width:0;
  object-fit:cover;
  display:block;
}
.prompt-example-body{
  padding:12px;
}
.prompt-example-kicker{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  border:1px solid rgba(20,216,166,0.28);
  border-radius:999px;
  padding:3px 8px;
  color:var(--accent);
  background:rgba(20,216,166,0.08);
  font-size:0.68rem;
  font-weight:800;
}
.prompt-example-title{
  margin-top:8px;
  color:var(--text);
  font-size:0.96rem;
  font-weight:900;
}
.prompt-example-text{
  margin-top:6px;
  color:var(--text-muted);
  font-size:0.76rem;
  line-height:1.55;
}
.prompt-example-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.prompt-example-actions .mini-btn:first-child{
  color:var(--accent);
  border-color:rgba(20,216,166,0.35);
  background:rgba(20,216,166,0.1);
}
.prompt-admin-list{
  max-height:620px;
}
.prompt-admin-row{
  align-items:start;
}
.prompt-admin-thumbs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}
.prompt-admin-thumbs img{
  width:52px;
  height:68px;
  object-fit:cover;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-soft);
}

/* Status */
.status{
  font-size:0.85rem;
  color:var(--text-secondary);
  text-align:center;
  min-height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.status.success{color:var(--accent)}
.status.error{color:var(--danger)}

/* Divider */
.divider{
  height:1px;
  background:linear-gradient(90deg,transparent,var(--border),transparent);
  margin:4px 0;
}

/* History section */
.history-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.history-header label{margin:0}
.clear-btn{
  padding:6px 12px;
  font-size:0.75rem;
  background:transparent;
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text-muted);
  cursor:pointer;
  transition:all var(--transition-fast);
}
.clear-btn:hover{
  border-color:var(--danger);
  color:var(--danger);
}

.history-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:320px;
  overflow-y:auto;
  padding-right:4px;
}
.history-list::-webkit-scrollbar{width:4px}
.history-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

.history-item{
  display:flex;
  gap:12px;
  padding:12px;
  border-radius:12px;
  background:var(--surface-elevated);
  border:1px solid transparent;
  cursor:pointer;
  transition:all var(--transition-fast);
  align-items:center;
}
.history-item:hover{
  border-color:var(--border-light);
  transform:translateX(4px);
}
.history-thumb{
  width:48px;
  height:48px;
  border-radius:8px;
  background:linear-gradient(135deg,var(--border),var(--surface-elevated));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.4rem;
  flex-shrink:0;
  transition:transform var(--transition-fast);
}
.history-item:hover .history-thumb{
  transform:scale(1.05);
}
.history-info{
  flex:1;
  overflow:hidden;
}
.history-info p{
  font-size:0.85rem;
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--text);
}
.history-info span{
  font-size:0.72rem;
  color:var(--text-muted);
}

/* Main output area */
.main{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.output-area{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:20px;
  box-shadow:var(--shadow-md);
}
.output-area::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:20px;
  padding:1px;
  background:linear-gradient(135deg,var(--border-light),transparent 50%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}

.output-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.output-header h2{
  font-size:1.1rem;
  font-weight:600;
  color:var(--text-secondary);
}

/* Current single image display */
.current-image-area{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:300px;
  background:var(--surface-elevated);
  border-radius:16px;
  overflow:hidden;
  position:relative;
  padding:16px;
}

.current-image{
  max-width:100%;
  max-height:calc(70vh - 82px);
  display:block;
  cursor:pointer;
  border-radius:12px;
  transition:transform var(--transition-smooth);
  animation:currentImageIn 0.4s ease;
}
@keyframes currentImageIn{
  from{opacity:0;transform:scale(0.95)}
  to{opacity:1;transform:scale(1)}
}
.current-image:hover{
  transform:scale(1.02);
}
.image-load-fallback{
  width:100%;
  min-height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  color:var(--text-muted);
  background:
    linear-gradient(135deg,var(--surface-elevated),var(--surface-soft)),
    repeating-linear-gradient(45deg,transparent 0 10px,rgba(148,163,184,0.06) 10px 20px);
  border:1px dashed var(--border-light);
  border-radius:12px;
  text-align:center;
  line-height:1.5;
}
.current-image.image-load-fallback{
  cursor:default;
  max-width:min(100%,520px);
  min-height:300px;
}

.current-actions{
  position:static;
  width:min(100%,560px);
  padding:10px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  opacity:1;
  box-shadow:var(--shadow-sm);
  transition:opacity var(--transition-fast);
}
.current-actions button{
  min-height:42px;
  padding:10px 18px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-elevated);
  color:var(--text-primary);
  font-family:inherit;
  font-size:0.85rem;
  font-weight:700;
  cursor:pointer;
  transition:all var(--transition-fast);
}
.current-actions button:hover{
  border-color:var(--accent);
  transform:translateY(-1px);
}
.current-actions .current-action-primary{
  border-color:transparent;
  background:var(--gradient-1);
  color:#fff;
  -webkit-text-fill-color:#fff;
  box-shadow:0 10px 22px rgba(20,184,166,0.22);
}

/* History section */
.history-section{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:16px;
  box-shadow:var(--shadow-md);
}
.history-section::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:20px;
  padding:1px;
  background:linear-gradient(135deg,var(--border-light),transparent 50%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}

.history-section .history-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.history-section .history-header h2{
  font-size:1rem;
  font-weight:600;
  color:var(--text-secondary);
}

.prompt-examples-section{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:16px;
  box-shadow:var(--shadow-md);
}
.prompt-examples-section::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:20px;
  padding:1px;
  background:linear-gradient(135deg,var(--border-light),transparent 50%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
.prompt-examples-section .history-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}
.prompt-examples-section .history-header h2{
  font-size:1rem;
  font-weight:600;
  color:var(--text-secondary);
}
.prompt-examples-section .prompt-example-grid{
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:16px;
}
.prompt-examples-section .prompt-example-images{
  min-height:150px;
  max-height:190px;
}
.prompt-examples-section .prompt-example-body{
  padding:14px;
}
.prompt-examples-section .prompt-example-title{
  font-size:1rem;
}
.prompt-examples-section .prompt-example-text{
  font-size:0.8rem;
  max-height:4.9em;
  overflow:hidden;
}

/* Masonry waterfall grid - horizontal-first layout with JS */
.masonry-grid{
  display:flex;
  gap:12px;
  max-height:1200px;
  overflow-y:auto;
  padding-right:4px;
}
.masonry-column{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.masonry-grid::-webkit-scrollbar{width:4px}
.masonry-grid::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

.masonry-item{
  position:relative;
  border-radius:12px;
  overflow:visible;
  background:var(--surface-elevated);
  border:1px solid var(--border);
  cursor:pointer;
  transition:all var(--transition-fast);
  animation:masonryIn 0.3s ease backwards;
  margin-bottom:0;
  display:block;
}
.masonry-item:nth-child(1){animation-delay:0s}
.masonry-item:nth-child(2){animation-delay:0.05s}
.masonry-item:nth-child(3){animation-delay:0.1s}
.masonry-item:nth-child(4){animation-delay:0.15s}
.masonry-item:nth-child(5){animation-delay:0.2s}
.masonry-item:nth-child(6){animation-delay:0.25s}
@keyframes masonryIn{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
.masonry-item:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
  box-shadow:var(--shadow-md);
}
.masonry-item img{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
}
.masonry-item .image-load-fallback{
  aspect-ratio:1/1;
  min-height:160px;
  font-size:0.86rem;
}
.masonry-item .overlay{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:40%;
  background:linear-gradient(transparent,rgba(0,0,0,0.7));
  opacity:0;
  transition:opacity var(--transition-fast);
  border-radius:0 0 12px 12px;
}
.masonry-item:hover .overlay{opacity:1}
.masonry-item .info{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:10px;
  opacity:0;
  transform:translateY(5px);
  transition:all var(--transition-fast);
}
.masonry-item:hover .info{
  opacity:1;
  transform:translateY(0);
}
.masonry-item .info p{
  font-size:0.75rem;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.masonry-item .info span{
  font-size:0.65rem;
  color:rgba(255,255,255,0.6);
}

/* Placeholder */
.placeholder{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:80px 40px;
  color:var(--text-muted);
  gap:16px;
  text-align:center;
}
.placeholder svg{
  width:80px;
  height:80px;
  opacity:0.3;
  stroke:var(--text-muted);
  animation:float 3s ease-in-out infinite;
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
.placeholder p{
  font-size:1rem;
  max-width:280px;
  line-height:1.6;
}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.92);
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  cursor:zoom-out;
  backdrop-filter:blur(20px);
  opacity:0;
  transition:opacity var(--transition-smooth);
}
.lightbox.active{
  display:flex;
  opacity:1;
}
.lightbox img{
  max-width:92vw;
  max-height:92vh;
  border-radius:16px;
  box-shadow:0 0 100px rgba(0,229,160,0.2);
  animation:lightboxIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes lightboxIn{
  from{opacity:0;transform:scale(0.9)}
  to{opacity:1;transform:scale(1)}
}
.lb-actions{
  position:fixed;
  bottom:40px;
  display:flex;
  gap:14px;
}
.lb-actions button{
  padding:14px 28px;
  border:none;
  border-radius:12px;
  background:rgba(255,255,255,0.1);
  color:#fff;
  font-family:inherit;
  font-size:0.95rem;
  font-weight:500;
  cursor:pointer;
  backdrop-filter:blur(10px);
  transition:all var(--transition-fast);
}
.lb-actions button:hover{
  background:rgba(255,255,255,0.2);
  transform:translateY(-2px);
}

/* Toast notification */
.toast{
  position:fixed;
  bottom:30px;
  left:50%;
  transform:translateX(-50%) translateY(100px);
  padding:14px 28px;
  background:var(--surface);
  border:1px solid var(--accent);
  border-radius:12px;
  color:var(--text);
  font-weight:500;
  box-shadow:var(--shadow-lg),var(--shadow-glow);
  z-index:2000;
  opacity:0;
  transition:all var(--transition-bounce);
}
.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* Log panel */
.log-panel{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.log-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.log-actions{
  display:flex;
  gap:8px;
}

.log-copy,.log-clear{
  padding:4px 10px;
  font-size:0.7rem;
  background:transparent;
  border:1px solid var(--border);
  border-radius:6px;
  color:var(--text-muted);
  cursor:pointer;
  transition:all var(--transition-fast);
}
.log-copy:hover,.log-clear:hover{
  border-color:var(--accent);
  color:var(--accent);
}

.log-list{
  display:flex;
  flex-direction:column;
  gap:2px;
  max-height:180px;
  overflow-y:auto;
  font-family:'JetBrains Mono',monospace;
  font-size:0.75rem;
  padding:8px;
  background:var(--surface-elevated);
  border-radius:8px;
  user-select:text;
}
.log-list::-webkit-scrollbar{width:4px}
.log-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

.log-item{
  padding:4px 0;
  line-height:1.5;
  user-select:text;
  cursor:text;
  border-bottom:1px dashed var(--border);
}
.log-item:last-child{
  border-bottom:none;
}
.log-item.info{color:var(--text)}
.log-item.success{color:var(--success)}
.log-item.error{color:var(--danger)}
.log-item.warning{color:var(--warning)}

.log-time{
  color:var(--text-muted);
  margin-right:8px;
}

/* Custom endpoint list */
.custom-endpoint-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:200px;
  overflow-y:auto;
  padding-right:4px;
}
.custom-endpoint-list::-webkit-scrollbar{width:4px}
.custom-endpoint-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

.custom-endpoint-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  background:var(--surface-elevated);
  border:1px solid var(--border);
  border-radius:10px;
  transition:all var(--transition-fast);
}
.custom-endpoint-item:hover{
  border-color:var(--border-light);
}
.custom-endpoint-item.active{
  border-color:var(--accent);
  background:var(--accent-glow);
}
.custom-endpoint-item .ep-info{
  flex:1;
  overflow:hidden;
}
.custom-endpoint-item .ep-info .ep-name{
  font-size:0.85rem;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.custom-endpoint-item .ep-info .ep-url{
  font-size:0.7rem;
  color:var(--text-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-family:'JetBrains Mono',monospace;
}
.custom-endpoint-item .ep-info .ep-key{
  font-size:0.65rem;
  color:var(--text-secondary);
  margin-top:2px;
}
.custom-endpoint-item .ep-actions{
  display:flex;
  gap:6px;
}
.custom-endpoint-item .ep-actions button{
  padding:6px 10px;
  border:none;
  border-radius:6px;
  background:var(--border);
  color:var(--text);
  cursor:pointer;
  font-size:0.75rem;
  transition:all var(--transition-fast);
}
.custom-endpoint-item .ep-actions button:hover{
  background:var(--border-light);
}
.custom-endpoint-item .ep-actions .ep-edit:hover{
  background:var(--accent-glow);
  color:var(--accent);
}
.custom-endpoint-item .ep-actions .ep-delete:hover{
  background:rgba(255,107,107,0.15);
  color:var(--danger);
}

/* Modal */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(10px);
  z-index:1500;
  display:none;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity var(--transition-smooth);
}
.modal-overlay.active{
  display:flex;
  opacity:1;
}
.modal{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  padding:28px;
  max-width:630px;
  width:90%;
  box-shadow:var(--shadow-lg);
  animation:modalIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes modalIn{
  from{opacity:0;transform:scale(0.9) translateY(20px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
.modal h3{
  font-size:1.2rem;
  font-weight:700;
  margin-bottom:20px;
  color:var(--text);
}
.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}
.modal-header h3{
  margin-bottom:0;
}
.generation-job-modal{
  max-width:780px;
  max-height:min(86vh,820px);
  overflow:auto;
}
.dedicated-endpoint-modal{
  max-width:min(980px,94vw);
  max-height:min(88vh,860px);
  overflow:auto;
}
.user-api-key-modal,
.user-role-modal{
  max-width:min(720px,94vw);
}
.admin-key-manager-list,
.dedicated-key-list{
  min-height:40px;
  padding:8px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-soft);
}
.role-option-help{
  margin-top:10px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--text-muted);
  background:var(--surface-soft);
  font-size:0.82rem;
  line-height:1.55;
}
.dedicated-endpoint-list{
  display:grid;
  gap:14px;
}
.dedicated-endpoint-row{
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  background:var(--surface-elevated);
}
.dedicated-endpoint-row-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.dedicated-endpoint-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.dedicated-endpoint-grid label{
  display:grid;
  gap:6px;
}
.dedicated-endpoint-grid label span{
  color:var(--text-muted);
  font-size:0.82rem;
  font-weight:700;
}
.dedicated-endpoint-wide{
  grid-column:1 / -1;
}
.dedicated-endpoint-switch{
  grid-template-columns:auto 1fr;
  align-items:center;
}
.dedicated-endpoint-switch span{
  grid-column:1 / -1;
}
.dedicated-endpoint-switch input{
  width:22px;
  height:22px;
}
.dedicated-endpoint-switch em{
  color:var(--text-muted);
  font-style:normal;
}
.dedicated-endpoint-actions{
  position:sticky;
  bottom:0;
  padding-top:12px;
  background:linear-gradient(180deg,transparent,var(--surface) 25%);
}
.detail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.detail-cell{
  padding:12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-elevated);
}
.detail-cell strong{
  display:block;
  margin-bottom:4px;
  color:var(--text-muted);
  font-size:0.75rem;
}
.detail-cell span{
  color:var(--text);
  word-break:break-word;
}
.detail-cell-wide{
  grid-column:1 / -1;
}
.detail-pre{
  margin:0;
  white-space:pre-wrap;
  word-break:break-word;
  color:var(--text);
  font-family:inherit;
  line-height:1.55;
}
.modal .form-group{
  margin-bottom:16px;
}
.modal .modal-actions{
  display:flex;
  gap:12px;
  margin-top:24px;
}
.modal .modal-actions .btn{
  flex:1;
}

/* Auth and admin */
.auth-overlay{
  position:fixed;
  inset:0;
  z-index:2200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,0.72);
  backdrop-filter:blur(14px);
}
.auth-overlay.hidden{
  display:none;
}
.auth-card{
  width:min(420px,100%);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  padding:30px;
  box-shadow:var(--shadow-lg);
}
.auth-card h2{
  font-size:1.35rem;
  margin-bottom:6px;
}
.auth-card p{
  color:var(--text-muted);
  font-size:0.85rem;
  margin-bottom:22px;
}
.auth-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:18px;
  padding:4px;
  background:var(--surface-elevated);
  border:1px solid var(--border);
  border-radius:12px;
}
.auth-tab{
  border:none;
  border-radius:8px;
  padding:10px 12px;
  background:transparent;
  color:var(--text-muted);
  font-family:inherit;
  font-weight:600;
  cursor:pointer;
  transition:all var(--transition-fast);
}
.auth-tab.active{
  background:var(--accent);
  color:#05110d;
}
.auth-panel{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.auth-panel.hidden{
  display:none;
}
.auth-note{
  color:var(--warning);
  font-size:0.78rem;
  line-height:1.5;
}
.auth-error{
  min-height:20px;
  color:var(--danger);
  font-size:0.8rem;
  margin-top:10px;
}
.account-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  background:var(--surface-elevated);
  border:1px solid var(--border);
  border-radius:10px;
}
.account-main{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.account-name{
  font-size:0.95rem;
  font-weight:700;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.account-meta{
  font-size:0.75rem;
  color:var(--text-muted);
}
.account-actions{
  display:flex;
  gap:8px;
  flex-shrink:0;
}
.mini-btn{
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--text);
  cursor:pointer;
  padding:8px 10px;
  font-size:0.78rem;
  transition:all var(--transition-fast);
}
.mini-btn:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:var(--accent-glow);
}
.admin-section{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:16px;
  box-shadow:var(--shadow-md);
}
.admin-header,.admin-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.admin-header h2,.admin-toolbar h3,.admin-card h3{
  margin:0;
  color:var(--text);
}
.admin-grid,.admin-records-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
@media (max-width:900px){
  .admin-grid,.admin-records-grid{grid-template-columns:1fr}
}
.admin-card{
  background:var(--surface-elevated);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
}
.admin-card .form-group{
  margin-bottom:12px;
}
.redeem-inline{
  display:flex;
  gap:8px;
}
.redeem-inline input{
  flex:1;
}
.redeem-inline .mini-btn{
  min-width:72px;
}
.generated-codes{
  width:100%;
  min-height:96px;
  margin-top:12px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.78rem;
  resize:vertical;
}
.admin-form-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
@media (max-width:640px){
  .admin-form-row{grid-template-columns:1fr}
  .account-strip{align-items:flex-start;flex-direction:column}
  .redeem-inline{flex-direction:column}
}
.admin-user-list,.record-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:320px;
  overflow-y:auto;
  padding-right:4px;
}
#adminUserList{
  max-height:min(72vh,760px);
}
.admin-user-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:12px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
}
.admin-user-name{
  font-weight:700;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.admin-user-meta,.record-meta{
  font-size:0.75rem;
  color:var(--text-muted);
  margin-top:3px;
}
.admin-user-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
}
.user-management-row{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:14px;
  padding:16px;
}
.user-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.user-card-title{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  min-width:0;
}
.user-card-title strong{
  font-size:1.02rem;
  color:var(--text);
  overflow-wrap:anywhere;
}
.user-card-created{
  flex:0 0 auto;
  color:var(--text-muted);
  font-size:0.74rem;
  white-space:nowrap;
}
.user-card-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.user-card-stat{
  min-width:0;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-soft);
}
.user-card-stat span,
.user-card-detail span{
  display:block;
  color:var(--text-muted);
  font-size:0.72rem;
  margin-bottom:4px;
}
.user-card-stat strong{
  display:block;
  color:var(--text);
  font-size:1rem;
  line-height:1.35;
  overflow-wrap:anywhere;
}
.user-card-stat em,
.user-card-risk em{
  display:block;
  margin-top:3px;
  color:var(--text-muted);
  font-style:normal;
  font-size:0.72rem;
  overflow-wrap:anywhere;
}
.user-card-detail-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.user-card-detail{
  min-width:0;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-soft);
}
.user-card-detail strong{
  color:var(--text);
  font-size:0.82rem;
  line-height:1.45;
  overflow-wrap:anywhere;
}
.user-card-risk{
  border-color:rgba(20,184,166,0.22);
  background:rgba(20,184,166,0.06);
}
.user-action-bar{
  justify-content:flex-start;
  padding-top:12px;
  border-top:1px solid var(--border);
}
.endpoint-key-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}
.endpoint-key-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  padding:4px 6px 4px 8px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-soft);
  color:var(--text-muted);
  font-family:'JetBrains Mono',monospace;
  font-size:0.72rem;
}
.endpoint-key-remove{
  width:20px;
  height:20px;
  display:inline-grid;
  place-items:center;
  border:1px solid transparent;
  border-radius:6px;
  background:transparent;
  color:var(--text-muted);
  cursor:pointer;
}
.endpoint-key-remove:hover{
  border-color:rgba(255,45,85,0.32);
  color:var(--danger);
  background:rgba(255,45,85,0.08);
}
.endpoint-key-empty{
  color:var(--text-muted);
  font-size:0.75rem;
}
.record-item{
  padding:10px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  font-size:0.8rem;
}
.record-title{
  color:var(--text);
  font-weight:600;
  margin-bottom:4px;
}

/* Utility */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--border-light)}

/* Loading dots animation */
.loading-dots::after{
  content:'';
  animation:loadingDots 1.5s infinite;
}
@keyframes loadingDots{
  0%{content:''}
  25%{content:'.'}
  50%{content:'..'}
  75%{content:'...'}
  100%{content:''}
}

/* Task Queue Styles */
.task-queue-section{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:16px;
  box-shadow:var(--shadow-md);
}
.task-queue-section::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:20px;
  padding:1px;
  background:linear-gradient(135deg,var(--border-light),transparent 50%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}

.task-queue-container{
  display:flex;
  flex-direction:column;
  gap:12px;
  max-height:600px;
  overflow-y:auto;
  padding-right:4px;
}

.task-item{
  background:var(--surface-elevated);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:all var(--transition-fast);
  animation:taskIn 0.3s ease;
}
@keyframes taskIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
.task-item[data-status="running"]{
  border-color:var(--accent);
  background:var(--accent-glow);
}
.task-item[data-status="completed"]{
  opacity:0.7;
}
.task-item[data-status="failed"]{
  border-color:var(--danger);
}

.task-header{
  display:flex;
  align-items:center;
  gap:12px;
}
.task-id{
  font-weight:600;
  font-size:0.9rem;
  color:var(--text);
  font-family:'JetBrains Mono',monospace;
}
.task-status{
  font-size:0.75rem;
  font-weight:500;
  padding:2px 8px;
  border-radius:6px;
  background:var(--surface);
}
.task-item[data-status="pending"] .task-status{color:var(--text-muted)}
.task-item[data-status="running"] .task-status{color:var(--accent)}
.task-item[data-status="completed"] .task-status{color:var(--success)}
.task-item[data-status="failed"] .task-status{color:var(--danger)}
.task-item[data-status="cancelled"] .task-status{color:var(--warning)}
.task-actions{
  margin-left:auto;
  display:flex;
  gap:6px;
}
.task-btn{
  width:24px;
  height:24px;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:6px;
  color:var(--text);
  cursor:pointer;
  font-size:0.85rem;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all var(--transition-fast);
  padding:0;
}
.task-btn:hover{
  border-color:var(--accent);
  background:var(--accent-glow);
  color:var(--accent);
}
.task-btn-delete:hover{
  border-color:var(--danger);
  background:rgba(255,107,107,0.1);
  color:var(--danger);
}

.task-prompt{
  font-size:0.85rem;
  color:var(--text-secondary);
  line-height:1.4;
}

.task-progress{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.task-progress-bar{
  height:6px;
  background:var(--surface);
  border-radius:3px;
  overflow:hidden;
}
.task-progress-native{
  width:100%;
  height:6px;
  appearance:none;
  border:none;
  border-radius:3px;
  overflow:hidden;
  background:var(--surface);
}
.task-progress-native::-webkit-progress-bar{
  background:var(--surface);
  border-radius:3px;
}
.task-progress-native::-webkit-progress-value{
  background:var(--gradient-1);
  border-radius:3px;
}
.task-progress-native::-moz-progress-bar{
  background:var(--gradient-1);
  border-radius:3px;
}
.task-progress-native.is-busy{
  animation:taskBusyPulse 1.6s ease-in-out infinite;
}
@keyframes taskBusyPulse{
  0%,100%{filter:saturate(1);opacity:0.92}
  50%{filter:saturate(1.18);opacity:1}
}
.task-progress-fill{
  height:100%;
  background:var(--gradient-1);
  border-radius:3px;
  transition:width var(--transition-smooth);
}
.task-progress-text{
  font-size:0.7rem;
  color:var(--text-muted);
  font-family:'JetBrains Mono',monospace;
  line-height:1.5;
}

.task-meta{
  font-size:0.7rem;
  color:var(--text-muted);
}

/* Two-theme polish: dark and light */
:root,
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#080a12;
  --bg-secondary:#0d111c;
  --surface:rgba(16,20,33,0.88);
  --surface-elevated:rgba(24,30,47,0.92);
  --surface-soft:rgba(255,255,255,0.055);
  --border:rgba(148,163,184,0.18);
  --border-light:rgba(148,163,184,0.32);
  --text:#f8fafc;
  --text-secondary:#cbd5e1;
  --text-muted:#8b98aa;
  --accent:#14d8a6;
  --accent-dim:#0ea5e9;
  --accent-glow:rgba(20,216,166,0.16);
  --danger:#fb7185;
  --success:#22c55e;
  --warning:#f59e0b;
  --gradient-1:linear-gradient(135deg,#14d8a6 0%,#38bdf8 54%,#a78bfa 100%);
  --shadow-sm:0 8px 20px rgba(0,0,0,0.22);
  --shadow-md:0 18px 46px rgba(0,0,0,0.32);
  --shadow-lg:0 26px 80px rgba(0,0,0,0.48);
  --shadow-glow:0 18px 44px rgba(20,216,166,0.16);
}
[data-theme="light"]{
  color-scheme:light;
  --bg:#eef3f8;
  --bg-secondary:#f8fafc;
  --surface:rgba(255,255,255,0.88);
  --surface-elevated:rgba(248,250,252,0.96);
  --surface-soft:rgba(15,23,42,0.045);
  --border:rgba(51,65,85,0.14);
  --border-light:rgba(51,65,85,0.24);
  --text:#111827;
  --text-secondary:#475569;
  --text-muted:#7a8798;
  --accent:#0fbc8f;
  --accent-dim:#0284c7;
  --accent-glow:rgba(15,188,143,0.13);
  --danger:#e11d48;
  --success:#16a34a;
  --warning:#d97706;
  --gradient-1:linear-gradient(135deg,#0fbc8f 0%,#0ea5e9 54%,#8b5cf6 100%);
  --shadow-sm:0 8px 22px rgba(15,23,42,0.07);
  --shadow-md:0 18px 48px rgba(15,23,42,0.11);
  --shadow-lg:0 28px 82px rgba(15,23,42,0.18);
  --shadow-glow:0 18px 44px rgba(15,188,143,0.13);
}

body{
  background:
    linear-gradient(135deg,rgba(20,216,166,0.1),transparent 28%),
    linear-gradient(315deg,rgba(56,189,248,0.1),transparent 30%),
    var(--bg);
}
[data-theme="light"] body{
  background:
    linear-gradient(135deg,rgba(15,188,143,0.14),transparent 30%),
    linear-gradient(315deg,rgba(14,165,233,0.13),transparent 34%),
    var(--bg);
}
.bg-canvas::before{
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:
    linear-gradient(115deg,rgba(255,255,255,0.055),transparent 24%),
    linear-gradient(180deg,rgba(20,216,166,0.06),transparent 36%),
    linear-gradient(0deg,rgba(8,10,18,0.92),rgba(8,10,18,0.42));
  animation:none;
}
[data-theme="light"] .bg-canvas::before{
  background:
    linear-gradient(115deg,rgba(15,188,143,0.12),transparent 26%),
    linear-gradient(315deg,rgba(14,165,233,0.1),transparent 34%),
    linear-gradient(0deg,rgba(238,243,248,0.72),rgba(248,250,252,0.94));
}
.grid-overlay{
  opacity:0.06;
  background-size:48px 48px;
}

.app{
  max-width:1780px;
  gap:24px;
}
.app.admin-only{
  max-width:1680px;
  grid-template-columns:minmax(0,1fr);
  padding:30px;
}
.app.admin-only .panel,
.app.admin-only .output-area,
.app.admin-only .task-queue-section,
.app.admin-only .history-section,
.app.admin-only .prompt-examples-section{
  display:none;
}
.app.admin-only .admin-section{
  padding:30px;
  border-radius:22px;
}
.app.admin-only .admin-shell{
  grid-template-columns:260px minmax(0,1fr);
  gap:24px;
  min-height:calc(100vh - 120px);
}
.app.admin-only .admin-sidebar{
  min-height:calc(100vh - 180px);
  padding:18px;
}
.app.admin-only .admin-workspace{
  gap:20px;
}
.app.admin-only .admin-header{
  padding:22px 24px;
}
.app.admin-only .admin-card{
  padding:24px;
}
.app.admin-only .admin-grid,
.app.admin-only .admin-records-grid{
  gap:20px;
}
.panel,.output-area,.history-section,.prompt-examples-section,.admin-section{
  border-radius:18px;
  border-color:var(--border);
  background:var(--surface);
  box-shadow:var(--shadow-md);
  backdrop-filter:blur(22px);
}
.panel{
  padding:24px;
}
.panel h1{
  font-size:1.42rem;
  letter-spacing:0;
}
.copyright{
  color:var(--text-muted);
}

.theme-toggle{
  width:108px;
  height:36px;
  border-radius:999px;
  background:var(--surface-soft);
  border-color:var(--border-light);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
}
.theme-toggle::before{
  top:3px;
  left:3px;
  width:30px;
  height:30px;
  border-radius:999px;
  background:var(--gradient-1);
  box-shadow:0 8px 20px rgba(20,216,166,0.22);
}
[data-theme="light"] .theme-toggle::before{
  left:73px;
}
.theme-toggle::after{
  content:'暗黑';
  position:absolute;
  top:50%;
  right:13px;
  transform:translateY(-50%);
  color:var(--text-secondary);
  font-size:0.72rem;
  font-weight:700;
}
[data-theme="light"] .theme-toggle::after{
  content:'明亮';
  right:auto;
  left:13px;
}
.theme-toggle .icon-moon{
  left:10px;
  color:#06121d;
  opacity:1;
  z-index:1;
}
.theme-toggle .icon-sun{
  right:10px;
  color:#06121d;
  opacity:0;
  z-index:1;
}
[data-theme="light"] .theme-toggle .icon-moon{opacity:0}
[data-theme="light"] .theme-toggle .icon-sun{opacity:1}

input,textarea,select{
  border-radius:10px;
  border-color:var(--border);
  background:var(--surface-soft);
  color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}
input:hover,textarea:hover,select:hover{
  border-color:var(--border-light);
}
input:focus,textarea:focus,select:focus{
  border-color:rgba(20,216,166,0.7);
  box-shadow:0 0 0 4px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,0.05);
}
label{
  color:var(--text-secondary);
  letter-spacing:0.05em;
}
textarea{
  min-height:150px;
}

.btn{
  border-radius:12px;
  min-height:46px;
}
.btn-primary{
  background:var(--gradient-1);
  color:#ffffff;
  box-shadow:0 14px 32px rgba(14,165,233,0.16),0 10px 28px rgba(20,216,166,0.16);
}
.btn-secondary{
  background:rgba(255,255,255,0.06);
  border-color:var(--border-light);
}
[data-theme="light"] .btn-secondary{
  background:rgba(15,23,42,0.04);
}
.btn-secondary:hover{
  color:var(--text);
  background:rgba(20,216,166,0.1);
}
.mini-btn{
  border-radius:9px;
  background:rgba(255,255,255,0.055);
  border-color:var(--border);
  color:var(--text-secondary);
}
[data-theme="light"] .mini-btn{
  background:rgba(15,23,42,0.035);
}
.mini-btn:hover{
  background:rgba(20,216,166,0.12);
  box-shadow:0 8px 18px rgba(20,216,166,0.08);
}

.setup-overlay{
  position:fixed;
  inset:0;
  z-index:60;
  display:grid;
  place-items:center;
  padding:28px;
  overflow:auto;
  background:
    linear-gradient(135deg,rgba(20,216,166,0.14),transparent 34%),
    linear-gradient(315deg,rgba(56,189,248,0.12),transparent 34%),
    rgba(5,7,13,0.92);
  backdrop-filter:blur(18px);
}
.setup-overlay.hidden{display:none}
[data-theme="light"] .setup-overlay{
  background:
    linear-gradient(135deg,rgba(15,188,143,0.14),transparent 34%),
    linear-gradient(315deg,rgba(14,165,233,0.14),transparent 34%),
    rgba(238,243,248,0.9);
}
.setup-card{
  width:min(1180px,100%);
  max-height:calc(100vh - 56px);
  overflow:auto;
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:18px;
  color:var(--text);
  background:linear-gradient(180deg,rgba(18,24,39,0.96),rgba(10,14,24,0.94));
  border:1px solid rgba(148,163,184,0.24);
  border-radius:24px;
  box-shadow:0 32px 90px rgba(0,0,0,0.52),0 0 0 1px rgba(255,255,255,0.04) inset;
}
[data-theme="light"] .setup-card{
  background:linear-gradient(180deg,rgba(255,255,255,0.97),rgba(248,250,252,0.94));
  border-color:rgba(51,65,85,0.16);
  box-shadow:0 32px 90px rgba(15,23,42,0.16),0 0 0 1px rgba(255,255,255,0.7) inset;
}
.setup-hero{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border);
}
.setup-kicker{
  width:max-content;
  padding:6px 10px;
  margin-bottom:10px;
  color:var(--accent);
  background:var(--accent-glow);
  border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border));
  border-radius:999px;
  font-weight:700;
  font-size:0.78rem;
}
.setup-hero h2{
  font-size:2rem;
  line-height:1.15;
}
.setup-hero p,.setup-section p{
  color:var(--text-muted);
  line-height:1.65;
}
.setup-section{
  padding:20px;
  background:var(--surface-soft);
  border:1px solid var(--border);
  border-radius:16px;
}
.setup-section h3{
  margin-bottom:10px;
  font-size:1.08rem;
}
.setup-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.form-grid{
  display:grid;
  gap:14px;
}
.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.setup-section input,.setup-section select,.setup-section textarea{
  width:100%;
  min-height:46px;
  background:var(--surface-elevated);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:12px;
  padding:12px 14px;
  font:inherit;
}
.setup-section textarea{resize:vertical}
.setup-section code{
  color:var(--accent);
  background:var(--accent-glow);
  padding:2px 6px;
  border-radius:6px;
}
.setup-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.setup-error{
  color:var(--danger);
  min-height:22px;
  font-size:0.9rem;
}
@media(max-width:900px){
  .setup-overlay{padding:12px}
  .setup-card{max-height:calc(100vh - 24px);padding:18px;border-radius:18px}
  .setup-grid,.form-grid.two,.form-grid.four{grid-template-columns:1fr}
  .setup-hero h2{font-size:1.55rem}
  .setup-actions{flex-direction:column;align-items:stretch}
}

.auth-overlay{
  background:
    linear-gradient(135deg,rgba(20,216,166,0.13),transparent 32%),
    linear-gradient(315deg,rgba(56,189,248,0.12),transparent 34%),
    rgba(5,7,13,0.9);
  backdrop-filter:blur(18px);
}
[data-theme="light"] .auth-overlay{
  background:
    linear-gradient(135deg,rgba(15,188,143,0.14),transparent 32%),
    linear-gradient(315deg,rgba(14,165,233,0.14),transparent 34%),
    rgba(238,243,248,0.88);
}
.auth-card{
  width:min(460px,100%);
  padding:34px;
  color:#f8fafc;
  background:linear-gradient(180deg,rgba(18,24,39,0.96),rgba(10,14,24,0.94));
  border:1px solid rgba(148,163,184,0.24);
  border-radius:24px;
  box-shadow:0 32px 90px rgba(0,0,0,0.52),0 0 0 1px rgba(255,255,255,0.04) inset;
  position:relative;
}
[data-theme="light"] .auth-card{
  color:#111827;
  background:linear-gradient(180deg,rgba(255,255,255,0.96),rgba(248,250,252,0.92));
  border-color:rgba(51,65,85,0.16);
  box-shadow:0 32px 90px rgba(15,23,42,0.16),0 0 0 1px rgba(255,255,255,0.7) inset;
}
.auth-card::before{
  content:'';
  display:block;
  width:46px;
  height:5px;
  border-radius:999px;
  margin-bottom:22px;
  background:var(--gradient-1);
}
.auth-theme-toggle{
  position:absolute;
  top:24px;
  right:24px;
}
.auth-theme-toggle::after{
  font-size:0.68rem;
}
.auth-card h2{
  color:inherit;
  font-size:1.58rem;
  line-height:1.2;
}
.auth-card p{
  color:var(--text-muted);
  line-height:1.6;
}
.auth-tabs{
  background:var(--surface-soft);
  border-color:var(--border);
  border-radius:14px;
}
.auth-tab{
  color:var(--text-muted);
}
.auth-tab.active{
  background:linear-gradient(135deg,#14d8a6,#38bdf8);
  color:#06121d;
  box-shadow:0 8px 20px rgba(20,216,166,0.22);
}
.auth-card input{
  background:var(--surface-soft);
  border-color:var(--border);
  color:inherit;
}
.auth-note{
  padding:10px 12px;
  border:1px solid rgba(245,158,11,0.22);
  border-radius:10px;
  background:rgba(245,158,11,0.08);
}
.announcement-bar{
  display:none;
  margin:0 0 18px;
  padding:12px 14px;
  border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border));
  background:linear-gradient(135deg,var(--accent-glow),var(--surface-soft));
  color:var(--text-secondary);
  border-radius:8px;
  font-size:0.86rem;
  line-height:1.55;
}
.announcement-bar.visible{display:block}
.auth-card .announcement-bar{
  margin:0 0 16px;
  text-align:left;
}
.ops-setting-card textarea{
  min-height:88px;
  resize:vertical;
}
#adminTotpSecretPreview,#adminTotpUri{
  font-family:'JetBrains Mono',monospace;
}
#adminTotpUri{
  min-height:88px;
  resize:vertical;
}
.ops-setting-card .setting-hint{
  color:var(--text-muted);
  font-size:0.76rem;
  line-height:1.5;
}

.account-strip,.admin-card,.admin-user-row,.record-item,.task-item,.history-item{
  background:var(--surface-elevated);
  border-color:var(--border);
  box-shadow:0 1px 0 rgba(255,255,255,0.04) inset;
}
.account-strip{
  position:relative;
  border-radius:14px;
  padding:14px;
}
.account-secondary-panel{
  order:30;
  display:block;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface-elevated);
  box-shadow:0 1px 0 rgba(255,255,255,0.04) inset;
}
.account-secondary-panel > summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px;
  color:var(--text);
  cursor:pointer;
  list-style:none;
  user-select:none;
}
.account-secondary-panel > summary::-webkit-details-marker{
  display:none;
}
.account-secondary-panel > summary span{
  font-size:0.9rem;
  font-weight:800;
}
.account-secondary-panel > summary em{
  color:var(--text-muted);
  font-style:normal;
  font-size:0.72rem;
  line-height:1.35;
  text-align:right;
}
.account-secondary-panel > summary::after{
  content:'展开';
  flex:0 0 auto;
  border:1px solid var(--border);
  border-radius:999px;
  padding:4px 8px;
  color:var(--text-muted);
  font-size:0.7rem;
  font-weight:800;
}
.account-secondary-panel[open] > summary::after{
  content:'收起';
  border-color:rgba(20,216,166,0.35);
  color:var(--accent);
  background:rgba(20,216,166,0.09);
}
.generation-settings-panel{
  order:0;
}
.generation-settings-panel > summary{
  padding:12px 14px;
}
.generation-settings-panel .compact-config-body{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:14px;
  border-top:1px solid var(--border);
}
.generation-settings-panel .compact-config-body > .form-group{
  gap:7px;
}
.generation-settings-panel:not([open]) > summary em{
  color:var(--accent);
}
.email-verified-notice{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid rgba(20,216,166,0.25);
  border-radius:10px;
  background:rgba(20,216,166,0.08);
  color:var(--text-secondary);
  font-size:0.78rem;
  line-height:1.55;
}
.email-change-ticket-status{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-soft);
  color:var(--text-muted);
  font-size:0.78rem;
  line-height:1.55;
}
.email-change-ticket-status.accent{
  border-color:rgba(20,216,166,0.28);
  color:var(--accent);
  background:rgba(20,216,166,0.08);
}
.email-change-ticket-status.warning{
  border-color:rgba(245,158,11,0.28);
  color:var(--warning);
  background:rgba(245,158,11,0.08);
}
.account-secondary-panel .user-records-card,
.account-secondary-panel .commerce-board{
  border:0;
  border-top:1px solid var(--border);
  border-radius:0;
  background:transparent;
}
.divider,.log-panel{
  order:40;
}
.account-actions,#adminOpenBtn{
  position:relative;
  z-index:2;
}
.admin-quick-open{
  padding:12px 16px;
  border-radius:12px;
}
.account-meta{
  color:var(--accent);
}
.redeem-inline,.endpoint-select-wrap{
  padding:6px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface-soft);
}
.redeem-inline input,.endpoint-select-wrap select{
  border-color:transparent;
  background-color:transparent;
  box-shadow:none;
}
.redeem-inline input:focus,.endpoint-select-wrap select:focus{
  box-shadow:none;
}
.redeem-inline .mini-btn{
  min-width:82px;
  background:rgba(20,216,166,0.13);
  color:var(--accent);
}
.refresh-endpoint{
  border-radius:10px;
  background:rgba(255,255,255,0.06);
}

.admin-section{
  padding:22px;
  z-index:3;
  isolation:isolate;
}
.admin-shell{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:18px;
  min-height:660px;
}
.admin-sidebar{
  position:relative;
  top:0;
  z-index:2;
  align-self:start;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:620px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface-elevated);
  box-shadow:0 1px 0 rgba(255,255,255,0.04) inset;
}
.admin-brand-block{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
  padding:6px 6px 14px;
  border-bottom:1px solid var(--border);
}
.admin-brand-mark{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:var(--accent-glow);
  color:var(--accent);
  font-weight:800;
}
.admin-brand-block strong{
  display:block;
  color:var(--text);
  font-size:0.95rem;
}
.admin-brand-block span{
  display:block;
  margin-top:2px;
  color:var(--text-muted);
  font-size:0.75rem;
}
.admin-nav{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:12px 13px;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:var(--text-secondary);
  font-size:0.92rem;
  text-align:left;
  cursor:pointer;
  transition:all var(--transition-fast);
}
.admin-nav span{
  width:22px;
  text-align:center;
  color:var(--text-muted);
}
.admin-nav:hover,.admin-nav.active{
  background:var(--accent-glow);
  border-color:color-mix(in srgb,var(--accent) 35%,var(--border));
  color:var(--accent);
}
.admin-nav.active span{color:var(--accent)}
.admin-workspace{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.admin-header{
  padding:16px 18px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface-elevated);
  box-shadow:0 1px 0 rgba(255,255,255,0.04) inset;
}
.admin-header p{
  margin:5px 0 0;
  color:var(--text-muted);
  font-size:0.86rem;
}
.admin-header .mini-btn{
  min-width:74px;
}
.admin-header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.admin-session-badge{
  color:var(--text-secondary);
  font-size:0.82rem;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-soft);
}
.admin-session-badge.warning{
  border-color:rgba(245,158,11,0.4);
  background:rgba(245,158,11,0.1);
  color:var(--warning);
}
.admin-pane{
  display:none;
}
.admin-pane.active{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.admin-card-wide{
  grid-column:1 / -1;
}
.admin-workbench-grid{
  grid-template-columns:minmax(360px,0.82fr) minmax(520px,1.18fr);
  gap:20px;
}
.admin-workbench-grid .admin-list-card{
  min-width:0;
}
.admin-workbench-grid #adminUserList,
.admin-workbench-grid #adminEndpointList,
.admin-workbench-grid #adminPromptExampleList{
  max-height:min(74vh,780px);
}
.admin-workbench-grid #adminEndpointList,
.admin-workbench-grid #adminPromptExampleList{
  min-height:360px;
}
.admin-billing-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-areas:
    "channel generate"
    "package generate"
    "channels packages"
    "codes batches";
}
.billing-channel-card{grid-area:channel}
.billing-package-card{grid-area:package}
.billing-generate-card{grid-area:generate}
.billing-channel-list-card{grid-area:channels}
.billing-package-list-card{grid-area:packages}
.billing-code-list-card{grid-area:codes}
.billing-batch-list-card{grid-area:batches}
.admin-billing-grid #adminRedeemChannelList,
.admin-billing-grid #adminRedeemPackageList,
.admin-billing-grid #adminRedeemCodeList,
.admin-billing-grid #adminRedeemBatchList{
  max-height:min(44vh,500px);
}
.admin-report-grid{
  grid-template-columns:minmax(360px,1fr) minmax(420px,1fr);
  grid-template-areas:
    "range range"
    "channels packages"
    "trend batch"
    "trend users"
    "events events";
}
.report-range-card{grid-area:range}
.report-channel-card{grid-area:channels}
.report-package-card{grid-area:packages}
.report-trend-card{grid-area:trend}
.report-batch-card{grid-area:batch}
.report-user-card{grid-area:users}
.report-event-card{grid-area:events}
.admin-report-grid #businessTrendList{
  max-height:min(54vh,620px);
}
.admin-backup-grid{
  grid-template-columns:minmax(360px,0.82fr) minmax(520px,1.18fr);
  grid-template-areas:
    "create protect"
    "import list";
}
.backup-create-card{grid-area:create}
.backup-protect-card{grid-area:protect}
.backup-import-card{grid-area:import}
.backup-list-card{grid-area:list}
.admin-backup-grid #adminBackupList{
  max-height:min(62vh,680px);
  min-height:260px;
}
.admin-pane .admin-grid,.admin-pane .admin-records-grid{
  align-items:start;
}
.admin-ops-grid{
  grid-template-columns:minmax(330px,0.72fr) minmax(560px,1.28fr);
  gap:16px;
}
.admin-ops-left,
.admin-ops-right{
  display:flex;
  flex-direction:column;
  gap:16px;
  min-width:0;
}
.admin-ops-left > .admin-card,
.admin-ops-right > .admin-card{
  width:100%;
}
@media (max-width:960px){
  .admin-workbench-grid,
  .admin-billing-grid,
  .admin-report-grid,
  .admin-backup-grid,
  .admin-ops-grid{
    grid-template-columns:1fr;
    grid-template-areas:none;
  }
  .billing-channel-card,
  .billing-package-card,
  .billing-generate-card,
  .billing-channel-list-card,
  .billing-package-list-card,
  .billing-code-list-card,
  .billing-batch-list-card,
  .report-range-card,
  .report-channel-card,
  .report-package-card,
  .report-trend-card,
  .report-batch-card,
  .report-user-card,
  .report-event-card,
  .backup-create-card,
  .backup-protect-card,
  .backup-import-card,
  .backup-list-card{
    grid-area:auto;
  }
  .admin-workbench-grid #adminEndpointList,
  .admin-workbench-grid #adminPromptExampleList{
    min-height:0;
  }
  .admin-backup-grid #adminBackupList{
    min-height:0;
  }
}
.admin-card{
  border-radius:14px;
  padding:18px;
}
.admin-card h3{
  font-size:1rem;
}
.admin-user-row{
  border-radius:13px;
  padding:14px;
}
.admin-user-name{
  white-space:normal;
  line-height:1.35;
}
.admin-user-meta,.record-meta{
  line-height:1.45;
}
.record-item{
  border-radius:12px;
  padding:12px;
  border:1px solid var(--border);
}
.record-item.danger{
  color:var(--danger);
}
.record-filter{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.record-filter input{
  max-width:220px;
}
.record-filter select{
  min-height:38px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  color:var(--text);
  padding:0 10px;
}
.record-meta.danger{
  color:var(--danger);
}
.generation-job-actions{
  justify-content:flex-start;
  margin-top:10px;
}
.generation-job-item.warning{
  border-color:rgba(245,158,11,0.55);
  background:linear-gradient(135deg, rgba(245,158,11,0.08), var(--surface));
}
.generation-job-item{
  cursor:pointer;
}
.generation-job-item:hover{
  border-color:var(--accent);
}
.recovery-notice{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  margin-bottom:14px;
  border:1px solid rgba(20,184,166,0.42);
  border-radius:14px;
  background:linear-gradient(135deg, rgba(20,184,166,0.12), rgba(59,130,246,0.08));
}
.recovery-notice[hidden]{
  display:none;
}
.recovery-notice strong{
  color:var(--text);
}
.recovery-notice p{
  margin:4px 0 0;
  color:var(--text-muted);
  font-size:0.85rem;
}
@media (max-width:640px){
  .detail-grid{
    grid-template-columns:1fr;
  }
  .generation-job-modal{
    width:94%;
    padding:20px;
  }
  .dedicated-endpoint-modal{
    width:94%;
    padding:18px;
  }
  .dedicated-endpoint-grid{
    grid-template-columns:1fr;
  }
  .dedicated-endpoint-wide{
    grid-column:auto;
  }
  .recovery-notice{
    align-items:flex-start;
    flex-direction:column;
  }
  .record-filter select,
  .record-filter input{
    width:100%;
    max-width:none;
  }
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.stat-card{
  background:var(--surface-elevated);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  box-shadow:0 1px 0 rgba(255,255,255,0.04) inset;
}
.stat-card-action{
  width:100%;
  text-align:left;
  font:inherit;
  color:inherit;
  cursor:pointer;
  transition:transform var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast);
}
.stat-card-action:hover{
  border-color:rgba(20,216,166,0.5);
  background:linear-gradient(135deg,rgba(20,216,166,0.12),rgba(59,130,246,0.08)),var(--surface-elevated);
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(15,23,42,0.12);
}
.stat-card-action:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}
.stat-label{
  color:var(--text-muted);
  font-size:0.76rem;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.stat-value{
  color:var(--text);
  font-size:1.55rem;
  font-weight:800;
  margin-top:8px;
}
.stat-meta{
  color:var(--text-muted);
  font-size:0.75rem;
  margin-top:4px;
  line-height:1.45;
}
.user-records-card{
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface-elevated);
  padding:14px;
}
.user-record-tabs{
  display:flex;
  gap:8px;
  margin-bottom:12px;
}
.user-record-tab{
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-soft);
  color:var(--text-secondary);
  cursor:pointer;
  padding:8px 10px;
  font-size:0.78rem;
  font-weight:700;
}
.user-record-tab.active{
  border-color:rgba(20,216,166,0.45);
  background:rgba(20,216,166,0.12);
  color:var(--accent);
}
.user-record-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:260px;
  overflow:auto;
}
.user-record-item{
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px;
  background:var(--surface-soft);
}
.commerce-board{
  border:1px solid var(--border);
  border-radius:14px;
  background:
    linear-gradient(135deg,rgba(20,216,166,0.08),transparent 30%),
    var(--surface-elevated);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.commerce-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}
.commerce-stat{
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-soft);
  padding:12px;
  min-width:0;
}
.commerce-stat span{
  display:block;
  color:var(--text-muted);
  font-size:0.72rem;
  font-weight:800;
}
.commerce-stat strong{
  display:block;
  margin-top:6px;
  color:var(--text);
  font-size:1.16rem;
  line-height:1.2;
}
.commerce-stat em{
  display:block;
  margin-top:4px;
  color:var(--text-muted);
  font-style:normal;
  font-size:0.72rem;
  line-height:1.35;
}
.commerce-redeem{
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-soft);
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.commerce-redeem strong{
  display:block;
  color:var(--text);
  font-size:0.94rem;
}
.commerce-redeem span{
  display:block;
  margin-top:4px;
  color:var(--text-muted);
  font-size:0.76rem;
  line-height:1.5;
}
.commerce-tabs{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}
.commerce-tab{
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-soft);
  color:var(--text-secondary);
  cursor:pointer;
  padding:8px 10px;
  font-size:0.78rem;
  font-weight:800;
}
.commerce-tab:hover{
  border-color:rgba(20,216,166,0.35);
  color:var(--text);
}
.commerce-tab.active{
  border-color:rgba(20,216,166,0.46);
  background:rgba(20,216,166,0.13);
  color:var(--accent);
}
.commerce-list{
  display:flex;
  flex-direction:column;
  gap:9px;
  max-height:360px;
  overflow:auto;
  padding-right:2px;
}
.commerce-filter{
  margin:10px 0;
}
.inline-mini-action{
  margin-left:8px;
  padding:5px 10px;
  min-height:0;
}
.favorite-image-thumb{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--surface-soft);
}
.commerce-package-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
.commerce-item,.commerce-package-card{
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-soft);
  padding:12px;
  min-width:0;
}
.commerce-item-title{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.commerce-item-title span{
  color:var(--text);
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
}
.commerce-item-title strong{
  color:var(--accent);
  white-space:nowrap;
}
.commerce-price{
  margin-top:8px;
  color:var(--text);
  font-size:1.25rem;
  font-weight:900;
}
.commerce-item-meta,.commerce-item-note{
  color:var(--text-muted);
  font-size:0.76rem;
  line-height:1.55;
}
.commerce-item-meta{
  margin-top:7px;
}
.record-meta.warning,
.commerce-item-meta.warning{
  color:var(--warning);
}
.commerce-item-note{
  margin-top:4px;
  overflow-wrap:anywhere;
}
@media(max-width:1100px){
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .stats-grid{grid-template-columns:1fr}
  .commerce-stats,.commerce-package-grid{grid-template-columns:1fr}
}
@media(max-width:960px){
  .user-card-stats,
  .user-card-detail-grid{
    grid-template-columns:1fr 1fr;
  }
  .user-card-risk{
    grid-column:1 / -1;
  }
  .user-card-head{
    flex-direction:column;
  }
  .user-card-created{
    white-space:normal;
  }
  .admin-shell,
  .app.admin-only .admin-shell{
    grid-template-columns:1fr;
    gap:14px;
    min-height:0;
  }
  .admin-sidebar,
  .app.admin-only .admin-sidebar{
    position:relative;
    top:auto;
    min-height:0;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    padding:12px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .admin-brand-block,
  .app.admin-only .admin-brand-block{
    width:100%;
    margin-bottom:2px;
    padding:4px 4px 10px;
  }
  .admin-nav,
  .app.admin-only .admin-nav{
    width:auto;
    flex:1 0 132px;
    justify-content:center;
    padding:10px 12px;
    white-space:nowrap;
  }
  .app.admin-only{
    max-width:none;
    padding:12px;
    display:block;
  }
  .app.admin-only .admin-section{
    padding:12px;
    border-radius:16px;
    overflow:hidden;
  }
  .app.admin-only .admin-workspace{
    gap:14px;
    width:100%;
    min-width:0;
  }
  .app.admin-only .admin-header{
    padding:14px;
    align-items:flex-start;
  }
  .admin-header,
  .admin-toolbar{
    flex-wrap:wrap;
    align-items:flex-start;
  }
  .admin-header > div:first-child,
  .admin-toolbar > div:first-child{
    min-width:0;
  }
  .admin-header h2{
    font-size:1.18rem;
    line-height:1.25;
  }
  .admin-header p{
    line-height:1.45;
  }
  .admin-header-actions{
    width:100%;
    justify-content:flex-start;
  }
  .app.admin-only .admin-card{
    padding:14px;
    border-radius:14px;
  }
  .app.admin-only .admin-grid,
  .app.admin-only .admin-records-grid{
    grid-template-columns:1fr;
    gap:14px;
  }
  .admin-form-row{
    grid-template-columns:1fr;
  }
  .record-filter,
  .admin-header-actions,
  .admin-toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .toolbar-search{
    width:100%;
    max-width:none;
    flex:1 1 220px;
  }
  .admin-toolbar .mini-btn{
    flex:0 0 auto;
  }
  .record-filter input{
    min-width:0;
    flex:1 1 180px;
  }
  .admin-user-row,
  .record-item{
    overflow-wrap:anywhere;
  }
}

.mobile-ui .app{
  max-width:none;
  grid-template-columns:1fr;
  padding:10px;
  gap:14px;
}
.mobile-ui .user-card-stats,
.mobile-ui .user-card-detail-grid{
  grid-template-columns:1fr;
}
.mobile-ui .panel{
  position:relative;
  top:0;
}
.mobile-ui .app.admin-only{
  display:block;
  max-width:none;
  padding:8px;
}
.mobile-ui .app.admin-only .admin-section{
  padding:10px;
  border-radius:16px;
  overflow:hidden;
}
.mobile-ui .app.admin-only .admin-shell{
  grid-template-columns:1fr;
  gap:14px;
  min-height:0;
}
.mobile-ui .app.admin-only .admin-sidebar{
  position:sticky;
  top:8px;
  z-index:5;
  min-height:0;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:8px;
  padding:10px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.mobile-ui .app.admin-only .admin-brand-block{
  flex:0 0 170px;
  width:auto;
  margin:0;
  padding:4px 8px;
  border-bottom:0;
}
.mobile-ui .app.admin-only .admin-nav{
  flex:0 0 auto;
  min-width:116px;
  width:auto;
  justify-content:center;
  padding:10px 12px;
  white-space:nowrap;
  font-size:0.82rem;
}
.mobile-ui .app.admin-only .admin-workspace{
  width:100%;
  min-width:0;
  gap:14px;
}
.mobile-ui .app.admin-only .admin-header,
.mobile-ui .app.admin-only .admin-card{
  padding:12px;
  border-radius:14px;
}
.mobile-ui .app.admin-only .admin-grid,
.mobile-ui .app.admin-only .admin-records-grid{
  grid-template-columns:1fr;
  gap:14px;
}
.mobile-ui .admin-header,
.mobile-ui .admin-toolbar{
  flex-wrap:wrap;
  align-items:flex-start;
}
.mobile-ui .admin-header-actions{
  width:100%;
  justify-content:flex-start;
}
.mobile-ui .admin-form-row{
  grid-template-columns:1fr;
}
.mobile-ui input,
.mobile-ui textarea,
.mobile-ui select{
  font-size:16px;
}
.generated-codes{
  border-radius:12px;
  background:rgba(3,7,18,0.38);
}
[data-theme="light"] .generated-codes{
  background:rgba(15,23,42,0.04);
}

.current-image-area{
  border:1px dashed var(--border-light);
  background:
    linear-gradient(135deg,rgba(20,216,166,0.07),transparent 32%),
    var(--surface-elevated);
}
.masonry-item{
  border-radius:14px;
  box-shadow:var(--shadow-sm);
}
.log-panel{
  background:rgba(3,7,18,0.42);
  border-color:var(--border);
}
[data-theme="light"] .log-panel{
  background:rgba(255,255,255,0.72);
}

@media(max-width:1000px){
  .app{padding:14px}
  .panel{position:relative;top:0}
}

@media(max-width:640px){
  .app{
    padding:10px;
    gap:14px;
  }
  .panel,
  .output-area,
  .history-section,
  .prompt-examples-section,
  .task-queue-section{
    padding:16px;
    border-radius:16px;
  }
  .panel-header,
  .output-header,
  .history-header{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .theme-toggle{
    width:96px;
  }
  [data-theme="light"] .theme-toggle::before{
    left:61px;
  }
  textarea{
    min-height:130px;
  }
  .current-image-area{
    min-height:220px;
  }
  .prompt-examples-section .prompt-example-grid{
    grid-template-columns:1fr;
  }
  .prompt-examples-section .prompt-example-images{
    min-height:112px;
    max-height:140px;
  }
  .app.admin-only{
    padding:8px;
  }
  .app.admin-only .admin-section{
    padding:10px;
  }
  .app.admin-only .admin-sidebar{
    flex-wrap:nowrap;
    align-items:stretch;
  }
  .app.admin-only .admin-brand-block{
    flex:0 0 170px;
    width:auto;
    margin:0;
    padding:4px 8px;
    border-bottom:0;
  }
  .app.admin-only .admin-nav{
    flex:0 0 auto;
    min-width:116px;
    font-size:0.82rem;
  }
  .admin-nav span{
    width:auto;
  }
  .app.admin-only .admin-header{
    padding:12px;
  }
  .admin-header h2{
    font-size:1.08rem;
  }
  .admin-header .mini-btn,
  .admin-toolbar .mini-btn{
    min-height:38px;
  }
  input,
  textarea,
  select{
    font-size:16px;
  }
}