/* ─── Reset & Base ─── */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0d1017; color: #e8ecf4; font-family: 'Inter', -apple-system, sans-serif; min-height: 100vh; }
.mono { font-family: 'JetBrains Mono', monospace; }

/* ─── Header ─── */
.header { border-bottom: 1px solid #1e2433; padding: 12px 24px; display: flex; justify-content: space-between; align-items: center; }
.header-left { display: flex; align-items: center; gap: 12px; }
.logo { width: 28px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, #6366f1, #a78bfa); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.header-title { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.header-separator { color: #1e2433; margin: 0 4px; }
.header-right { display: flex; align-items: center; gap: 16px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #34d399; box-shadow: 0 0 6px #34d39960; display: inline-block; margin-right: 6px; }
.status-text { font-size: 11px; color: #6b7394; }
.global-model-select {
  padding: 5px 28px 5px 10px; border-radius: 6px; border: 1px solid #1e2433;
  background: #141821; color: #818cf8; font-size: 13px; font-weight: 600;
  outline: none; appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%23818cf8'%3E%3Cpath d='M2 3l3 4 3-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; transition: all 0.15s;
}
.global-model-select:hover { border-color: #6366f1; }
.global-model-select:focus { border-color: #6366f1; box-shadow: 0 0 0 2px #6366f120; }

/* ─── Tabs ─── */
.tabs { border-bottom: 1px solid #1e2433; padding: 0 24px; display: flex; gap: 0; }
.tab {
  padding: 12px 20px; font-size: 12px; font-weight: 500; color: #6b7394;
  background: none; border: none; border-bottom: 2px solid transparent;
  cursor: pointer; letter-spacing: 0.03em; transition: all 0.15s;
}
.tab:hover { color: #818cf8; }
.tab.active { color: #818cf8; border-bottom-color: #6366f1; }

/* ─── Content Layout ─── */
.content { padding: 24px; max-width: 1100px; margin: 0 auto; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.tab-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }

/* ─── Common ─── */
.section-title { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.section-subtitle { font-size: 13px; color: #6b7394; margin-bottom: 0; }
.card { background: #141821; border: 1px solid #1e2433; border-radius: 8px; padding: 16px; }
.label { font-size: 11px; color: #6b7394; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }

/* ─── Badges ─── */
.badge { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.05em; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; }
.badge-fp { background: #7c3aed20; border: 1px solid #7c3aed50; color: #a78bfa; }
.badge-fn { background: #dc262620; border: 1px solid #dc262650; color: #f87171; }
.badge-high { background: #dc262615; border: 1px solid #dc262640; color: #f87171; }
.badge-medium { background: #f59e0b15; border: 1px solid #f59e0b40; color: #fbbf24; }
.badge-low { background: #10b98115; border: 1px solid #10b98140; color: #34d399; }
.badge-pending { background: #6366f115; border: 1px solid #6366f140; color: #818cf8; }
.badge-approved { background: #10b98115; border: 1px solid #10b98140; color: #34d399; }
.badge-rejected { background: #f59e0b15; border: 1px solid #f59e0b40; color: #fbbf24; }
.badge-rejudge { background: #e879f915; border: 1px solid #e879f940; color: #e879f9; }
.badge-collecting { background: #6366f115; border: 1px solid #6366f140; color: #818cf8; }
.badge-ready { background: #f59e0b15; border: 1px solid #f59e0b40; color: #fbbf24; }
.badge-training { background: #e879f915; border: 1px solid #e879f940; color: #e879f9; }
.badge-deployed { background: #10b98115; border: 1px solid #10b98140; color: #34d399; }

/* ─── Datasets ─── */
.target-size-control { display: flex; align-items: center; gap: 12px; }
.target-size-input { display: flex; align-items: center; gap: 6px; background: #141821; border: 1px solid #1e2433; border-radius: 6px; padding: 4px 8px; }
.target-size-value { font-size: 13px; font-weight: 700; color: #818cf8; min-width: 40px; text-align: center; }
.ds-target-btn { background: none; border: 1px solid #1e2433; color: #818cf8; width: 24px; height: 24px; border-radius: 4px; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
.ds-target-btn:hover { background: #6366f120; border-color: #6366f1; }

.ds-card { background: #141821; border: 1px solid #1e2433; border-radius: 8px; padding: 20px; margin-bottom: 10px; transition: border-color 0.15s; }
.ds-card:hover { border-color: #1e243380; }
.ds-card.ds-active { border-color: #6366f140; }
.ds-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.ds-version { font-size: 16px; font-weight: 700; }
.ds-hf-link { font-size: 11px; color: #818cf8; text-decoration: none; display: flex; align-items: center; gap: 5px; transition: color 0.15s; }
.ds-hf-link:hover { color: #a78bfa; }
.ds-hf-icon { width: 16px; height: 16px; border-radius: 3px; background: #fbbf24; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; }
.ds-progress-wrap { margin-bottom: 14px; }
.ds-progress-bar { height: 8px; background: #1e2433; border-radius: 4px; overflow: hidden; margin-top: 6px; }
.ds-progress-fill { height: 100%; border-radius: 4px; transition: width 0.4s ease; }
.ds-progress-labels { display: flex; justify-content: space-between; align-items: center; }
.ds-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; font-size: 11px; }
.ds-stat-label { color: #6b7394; margin-bottom: 3px; }
.ds-stat-value { color: #e8ecf4; font-weight: 600; }
.ds-split-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; margin-top: 6px; gap: 2px; }
.ds-split-train { background: #6366f1; border-radius: 3px; }
.ds-split-test { background: #a78bfa; border-radius: 3px; }
.ds-pipeline-row { display: flex; gap: 6px; margin-top: 14px; padding: 10px; background: #0d1017; border: 1px solid #1e2433; border-radius: 6px; }
.ds-pipeline-step { flex: 1; text-align: center; padding: 6px 4px; border-radius: 4px; font-size: 10px; }
.ds-pipeline-done { background: #10b98115; border: 1px solid #10b98130; color: #34d399; }
.ds-pipeline-active { background: #6366f115; border: 1px solid #6366f140; color: #818cf8; animation: dsPulse 2s infinite; }
.ds-pipeline-wait { background: #1e243330; border: 1px solid #1e2433; color: #4b5069; }
@keyframes dsPulse { 0%,100% { opacity:1 } 50% { opacity:0.6 } }
.ds-annotations-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: #6b7394; background: #1e243340; padding: 2px 8px; border-radius: 4px; margin-top: 2px; cursor: pointer; }
.ds-annotations-tag:hover { color: #818cf8; }

/* ─── Auto Train Logs ─── */
.atl-session-info { font-size: 11px; color: #4b5069; }
.atl-terminal { background: #080b10; border: 1px solid #1e2433; border-radius: 8px; padding: 16px; min-height: 420px; max-height: 620px; overflow-y: auto; }
.atl-lines { display: flex; flex-direction: column; gap: 2px; }
.atl-empty { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.atl-prompt { color: #6366f1; font-size: 13px; }
.atl-empty-msg { color: #3a3f5c; font-size: 12px; }
.atl-cursor { color: #6366f1; font-size: 13px; animation: atl-blink 1.1s step-end infinite; }
@keyframes atl-blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
.atl-line { display: flex; gap: 10px; font-size: 12px; line-height: 1.6; }
.atl-ts { color: #3a3f5c; min-width: 190px; }
.atl-level { min-width: 56px; }
.atl-msg { color: #c8cee0; }
.atl-info { color: #818cf8; }
.atl-success { color: #34d399; }
.atl-warn { color: #fbbf24; }
.atl-error { color: #f87171; }

/* ─── Training ─── */
.tr-runs-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.tr-arrow { color: #4b5069; font-size: 18px; }
.tr-run-box { flex: 1; background: #0d1017; border: 1px solid #1e2433; border-radius: 6px; padding: 10px 14px; }
.tr-run-empty { opacity: 0.4; }
.tr-run-label { font-size: 10px; color: #6b7394; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.tr-run-id { font-size: 13px; font-weight: 600; color: #c8cee0; margin-bottom: 6px; }
.tr-run-metrics { display: flex; gap: 14px; font-size: 11px; }

/* ─── Annotations ─── */
.filter-bar { display: flex; gap: 4px; }
.filter-btn { padding: 6px 14px; border-radius: 6px; border: 1px solid #1e2433; background: transparent; color: #6b7394; font-size: 12px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em; }
.filter-btn.active { border-color: #6366f1; background: #6366f120; color: #818cf8; }

.annotations-container { display: flex; gap: 16px; }
.annotations-left { flex: 1; }
.annotations-left.has-detail { width: 45%; flex: none; }
.annotation-list { display: flex; flex-direction: column; gap: 6px; }
.pagination-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 2px 2px; margin-top: 2px; border-top: 1px solid #1e2433; }
.pagination-btn { padding: 5px 14px; border-radius: 6px; border: 1px solid #1e2433; background: transparent; color: #818cf8; font-size: 12px; cursor: pointer; letter-spacing: 0.05em; transition: all 0.15s; }
.pagination-btn:hover:not(:disabled) { background: #6366f120; border-color: #6366f1; }
.pagination-btn:disabled { color: #3a3f5c; cursor: default; }
.pagination-info { font-size: 12px; color: #a0a8cc; }
.annotation-item { background: #141821; border: 1px solid #1e2433; border-radius: 8px; padding: 12px 16px; cursor: pointer; transition: all 0.15s; }
.annotation-item:hover { border-color: #6366f130; }
.annotation-item.selected { background: #1a1f2e; border-color: #6366f150; }
.annotation-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.annotation-id { font-size: 12px; color: #818cf8; }
.annotation-body { display: flex; justify-content: space-between; align-items: center; }
.annotation-signal { font-size: 11px; color: #6b7394; margin-left: 8px; }
.annotation-date { font-size: 11px; color: #4b5069; }
.annotation-levels { display: flex; gap: 12px; margin-top: 8px; font-size: 11px; }
.annotation-levels span { color: #6b7394; }

/* Detail panel */
.detail-panel { width: 55%; background: #141821; border: 1px solid #1e2433; border-radius: 8px; padding: 20px; display: none; }
.detail-panel.visible { display: block; }
.detail-close { background: none; border: none; color: #6b7394; cursor: pointer; font-size: 18px; }
.detail-section { margin-bottom: 16px; }
.detail-box { font-size: 12px; color: #c8cee0; background: #0d1017; border-radius: 6px; padding: 12px; border: 1px solid #1e2433; line-height: 1.6; }
.screenshot-pair { display: flex; gap: 8px; }
.screenshot-placeholder { flex: 1; background: #0d1017; border-radius: 6px; padding: 20px; border: 1px solid #1e2433; text-align: center; }
.screenshot-placeholder .icon { font-size: 24px; margin-bottom: 4px; }
.screenshot-placeholder .label { font-size: 10px; color: #6b7394; }
.screenshot-img { flex: 1; background: #0d1017; border-radius: 6px; border: 1px solid #1e2433; overflow: hidden; display: flex; flex-direction: column; }
.screenshot-img img { width: 100%; height: auto; max-height: 180px; object-fit: cover; display: block; }
.screenshot-img .label { font-size: 10px; color: #6b7394; text-align: center; padding: 4px; border-top: 1px solid #1e2433; }
.screenshot-img { cursor: zoom-in; }
.screenshot-preview-overlay { display: none; position: fixed; z-index: 9999; background: #0d1017; border: 1px solid #1e2433; border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.7); padding: 6px; pointer-events: none; }
.screenshot-preview-overlay.visible { display: block; }
.screenshot-preview-overlay img { display: block; max-width: 520px; max-height: 80vh; width: auto; height: auto; border-radius: 4px; }
.level-change { background: #0d1017; border-radius: 6px; padding: 12px; border: 1px solid #1e2433; text-align: center; }
.level-arrow { color: #6b7394; font-size: 16px; margin: 0 8px; }
.level-caption { font-size: 10px; color: #4b5069; margin-top: 6px; }
.level-brand { font-size: 12px; color: #c8cee0; margin-top: 8px; font-weight: 600; }
.action-buttons { display: flex; gap: 8px; margin-top: 16px; }
.btn-approve { flex: 1; padding: 10px 16px; border-radius: 6px; border: 1px solid #10b98140; background: #10b98115; color: #34d399; font-size: 12px; font-weight: 600; cursor: pointer; letter-spacing: 0.05em; }
.btn-edit { flex: 1; padding: 10px 16px; border-radius: 6px; border: 1px solid #f59e0b40; background: #f59e0b15; color: #fbbf24; font-size: 12px; font-weight: 600; cursor: pointer; letter-spacing: 0.05em; }
.status-bar { margin-top: 16px; padding: 10px; border-radius: 6px; text-align: center; font-size: 12px; }
.status-bar.approved { background: #10b98110; border: 1px solid #10b98130; color: #34d399; }
.status-bar.edited { background: #f59e0b10; border: 1px solid #f59e0b30; color: #fbbf24; }
.status-bar.rejudge { background: #e879f910; border: 1px solid #e879f930; color: #e879f9; }

/* ─── VLM1 per-attribute review ─── */
.page-context { display: grid; grid-template-columns: 160px 1fr; gap: 12px; margin-bottom: 16px; align-items: stretch; }
.page-thumb .screenshot-placeholder { padding: 34px 8px; height: 100%; }
.html-preview .label { margin-bottom: 6px; }
.html-preview-box { font-size: 11px; max-height: 160px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; line-height: 1.5; }

.attr-card { background: #0d1017; border: 1px solid #1e2433; border-radius: 6px; padding: 4px; display: flex; flex-direction: column; gap: 2px; }
.attr-row { padding: 8px 10px; border-left: 2px solid transparent; border-radius: 4px; transition: background 0.15s; }
.attr-row:hover { background: #141821; }
.attr-row--pending { border-left-color: #f59e0b80; }
.attr-row--resolved { border-left-color: #10b98180; }
.attr-row-main { display: grid; grid-template-columns: minmax(160px, auto) auto 1fr auto; gap: 10px; align-items: center; font-size: 12px; }
.attr-name { color: #c8cee0; font-weight: 600; }
.attr-prod { color: #8b92ad; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.attr-judge-correct { background: #10b98115; border: 1px solid #10b98140; color: #34d399; }
.attr-judge-wrong { background: #dc262620; border: 1px solid #dc262650; color: #f87171; }
.attr-actions { display: flex; gap: 4px; }
.btn-attr { background: #1e243350; border: 1px solid #1e2433; color: #6b7394; border-radius: 4px; padding: 3px 8px; font-size: 11px; cursor: pointer; font-family: 'JetBrains Mono', monospace; transition: all 0.15s; }
.btn-attr:hover { border-color: #6366f1; color: #818cf8; }
.btn-attr.is-active { background: #6366f125; border-color: #6366f1; color: #818cf8; }
.attr-detail { margin-top: 6px; padding-left: 4px; font-size: 11px; line-height: 1.5; }
.attr-explain { color: #8b92ad; }
.attr-suggested { color: #34d399; margin-top: 4px; }
.attr-prod-full { color: #6b7394; margin-top: 4px; word-break: break-all; }
.attr-custom-input { width: 100%; background: #0d1017; border: 1px solid #1e2433; color: #e8ecf4; border-radius: 4px; padding: 6px; font-size: 11px; font-family: 'JetBrains Mono', monospace; resize: vertical; outline: none; }
.attr-custom-input:focus { border-color: #6366f1; }
.btn-attr-save { margin-top: 4px; background: #6366f120; border: 1px solid #6366f140; color: #818cf8; border-radius: 4px; padding: 4px 10px; font-size: 11px; cursor: pointer; }
.btn-attr-save:hover { background: #6366f130; }
.btn-submit-review { width: 100%; margin-top: 16px; }

/* VLM2 inline edit form */
.vlm2-edit { margin-top: 16px; }
.vlm2-edit-select { width: 100%; background: #0d1017; border: 1px solid #1e2433; color: #e8ecf4; border-radius: 4px; padding: 6px 10px; font-size: 12px; outline: none; }
.vlm2-edit-select:focus { border-color: #6366f1; }
.vlm2-edit-text { width: 100%; background: #0d1017; border: 1px solid #1e2433; color: #e8ecf4; border-radius: 4px; padding: 8px; font-size: 12px; resize: vertical; outline: none; line-height: 1.5; }
.vlm2-edit-text:focus { border-color: #6366f1; }
.btn-approve[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ─── Empty state ─── */
.empty-state { text-align: center; padding: 40px; color: #4b5069; }
.empty-state-icon { font-size: 32px; margin-bottom: 8px; }

/* ─── Playground ─── */
.pg-layout { display: flex; gap: 16px; min-height: 560px; }

.pg-ticket-list {
  width: 280px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 6px;
  max-height: 700px; overflow-y: auto;
  padding-right: 4px;
}
.pg-ticket-list::-webkit-scrollbar { width: 4px; }
.pg-ticket-list::-webkit-scrollbar-track { background: transparent; }
.pg-ticket-list::-webkit-scrollbar-thumb { background: #1e2433; border-radius: 2px; }

.pg-ticket-item {
  background: #141821; border: 1px solid #1e2433; border-radius: 8px;
  padding: 10px 14px; cursor: pointer; transition: all 0.15s;
}
.pg-ticket-item:hover { border-color: #6366f130; }
.pg-ticket-item.selected { background: #1a1f2e; border-color: #6366f150; }
.pg-ticket-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.pg-ticket-id { font-size: 12px; color: #818cf8; }
.pg-ticket-signal { font-size: 11px; color: #6b7394; line-height: 1.4; }
.pg-ticket-version { font-size: 10px; color: #4b5069; margin-top: 4px; }

.pg-inference-panel { flex: 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.pg-empty-panel {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #141821; border: 1px solid #1e2433; border-radius: 8px; padding: 40px;
  color: #4b5069;
}

.pg-preview-section { background: #141821; border: 1px solid #1e2433; border-radius: 8px; padding: 16px; }

.pg-preview-pair { display: flex; gap: 12px; margin-bottom: 14px; }

.pg-preview-img {
  width: 200px; flex-shrink: 0;
  background: #0d1017; border: 1px solid #1e2433; border-radius: 6px;
  overflow: hidden; display: flex; flex-direction: column;
}
.pg-preview-img img { width: 100%; height: auto; max-height: 160px; object-fit: cover; display: block; }
.pg-no-img {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px; color: #4b5069; font-size: 11px; text-align: center; gap: 6px;
}

.pg-preview-html { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pg-html-box {
  flex: 1; background: #0d1017; border: 1px solid #1e2433; border-radius: 6px;
  padding: 10px; font-size: 11px; color: #6b7394; line-height: 1.5;
  max-height: 160px; overflow-y: auto; white-space: pre-wrap; word-break: break-word;
}

.pg-run-bar { display: flex; align-items: center; gap: 12px; padding-top: 2px; }
.pg-run-btn {
  padding: 8px 20px; border-radius: 6px; border: 1px solid #6366f140;
  background: #6366f120; color: #818cf8; font-size: 12px; font-weight: 600;
  cursor: pointer; letter-spacing: 0.05em; transition: all 0.15s;
}
.pg-run-btn:hover:not(:disabled) { background: #6366f130; border-color: #6366f1; }
.pg-run-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pg-run-btn.loading { color: #a78bfa; border-color: #7c3aed40; }
.pg-status-msg { font-size: 12px; color: #6b7394; }
.pg-status-msg.error { color: #f87171; }

/* Result card */
.pg-result {
  background: #141821; border: 1px solid #1e2433; border-radius: 8px; padding: 16px;
  display: flex; flex-direction: column; gap: 0;
}
.pg-result-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #1e2433;
}
.pg-field-row {
  padding: 10px 0; border-bottom: 1px solid #1e243340;
  display: grid; grid-template-columns: 180px 1fr; gap: 10px;
}
.pg-field-row:last-child { border-bottom: none; }
.pg-field-name { font-size: 11px; color: #6b7394; padding-top: 2px; }
.pg-field-value { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-start; }
.pg-field-expl {
  grid-column: 2; font-size: 11px; color: #8b92ad; line-height: 1.5;
  margin-top: 4px;
}
.pg-description { font-size: 12px; color: #c8cee0; line-height: 1.6; }

/* chips */
.pg-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 500;
  background: #1e243350; border: 1px solid #1e2433; color: #c8cee0;
  padding: 2px 8px; border-radius: 4px;
}
.pg-chip.primary { background: #6366f115; border-color: #6366f140; color: #818cf8; }
.pg-chip-loc { color: #4b5069; font-size: 10px; }

/* yes / no / possibly badges */
.pg-yn-badge {
  display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 2px 8px; border-radius: 4px;
  background: #1e243350; border: 1px solid #1e2433; color: #6b7394;
}
.pg-yn-yes { background: #10b98115; border-color: #10b98140; color: #34d399; }
.pg-yn-no { background: #dc262615; border-color: #dc262640; color: #f87171; }
.pg-yn-possibly { background: #f59e0b15; border-color: #f59e0b40; color: #fbbf24; }

/* raw fallback */
.pg-raw-output {
  background: #0d1017; border: 1px solid #1e2433; border-radius: 6px;
  padding: 12px; font-size: 11px; color: #8b92ad; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word; overflow-x: auto;
  font-family: 'JetBrains Mono', monospace;
}

/* ─── Auth / Login ─── */
.auth-user { font-size: 11px; color: #818cf8; padding: 3px 8px; border: 1px solid #1e2433; border-radius: 4px; background: #141821; }
.auth-user:empty { display: none; }
.logout-btn {
  background: #141821; border: 1px solid #1e2433; color: #6b7394;
  padding: 5px 12px; border-radius: 6px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.03em; cursor: pointer; transition: all 0.15s;
}
.logout-btn:hover { color: #f87171; border-color: #dc262650; background: #dc262610; }

.login-shell {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background:
    radial-gradient(circle at 20% 20%, #6366f118, transparent 40%),
    radial-gradient(circle at 80% 80%, #a78bfa15, transparent 40%),
    #0d1017;
}
.login-card {
  width: 100%; max-width: 380px; background: #141821; border: 1px solid #1e2433;
  border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 20px 48px #00000080;
}
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.login-brand-text { display: flex; flex-direction: column; }
.login-brand-title { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.login-brand-subtitle { font-size: 11px; color: #6b7394; margin-top: 2px; }

.login-field { display: flex; flex-direction: column; gap: 6px; }
.login-field .label { margin-bottom: 0; }
.login-input {
  background: #0d1017; border: 1px solid #1e2433; color: #e8ecf4;
  border-radius: 6px; padding: 10px 12px; font-size: 13px; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.login-input:hover { border-color: #6366f180; }
.login-input:focus { border-color: #6366f1; box-shadow: 0 0 0 2px #6366f120; }

.login-password-wrap { position: relative; display: flex; align-items: center; }
.login-password-wrap .login-input { flex: 1; padding-right: 54px; }
.show-pw-btn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #818cf8; font-size: 11px;
  padding: 4px 8px; border-radius: 4px; cursor: pointer; transition: background 0.15s;
}
.show-pw-btn:hover { background: #6366f120; }

.login-error {
  min-height: 16px; font-size: 12px; color: #f87171;
}
.login-error:not(:empty) {
  padding: 8px 10px; background: #dc262615; border: 1px solid #dc262640;
  border-radius: 6px;
}

.login-submit {
  background: linear-gradient(135deg, #6366f1, #a78bfa);
  color: #fff; border: none; border-radius: 6px;
  padding: 11px 16px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  cursor: pointer; transition: opacity 0.15s, transform 0.15s;
  margin-top: 4px;
}
.login-submit:hover:not(:disabled) { opacity: 0.92; }
.login-submit:active:not(:disabled) { transform: translateY(1px); }
.login-submit:disabled { opacity: 0.6; cursor: progress; }