/* Component theming layer.
   Base tokens live in theme.css; this file only applies component-level styling.
   No variable redefinitions — theme.css already handles light/dark switching. */

html,
body {
  background: var(--claude-bg) !important;
}

body {
  color: var(--claude-text) !important;
  font-family: var(--font-sans) !important;
}

a {
  color: var(--claude-accent-strong) !important;
}

.header,
.header-content,
.card,
.login-card,
.upload-zone,
.storage-switcher,
.storage-target,
.stats,
.stats-bar,
.result-item,
.upload-item,
.history-item,
.image-card,
.compress-control,
.compress-confirm-card,
.compress-stat,
.preview-card,
.el-dialog,
.el-message-box,
.guest-notice {
  background: var(--claude-panel) !important;
  border-color: var(--claude-line) !important;
  box-shadow: none !important;
  color: var(--claude-text) !important;
}

.header-title,
.title,
.card-title,
.file-name,
.file-title,
.result-item-name,
.upload-item-name,
.image-card-name,
.preview-filename,
.el-dialog__title {
  color: var(--claude-text-strong) !important;
}

.header-title,
.login-card .title {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.subtitle,
.upload-hint,
.file-size,
.result-item-link,
.upload-item-size,
.stat-item,
.footer,
.footer a,
.el-form-item__label,
.form-group label,
.remember-label,
.footer-text,
.footer-text a {
  color: var(--claude-muted) !important;
}

input,
select,
textarea,
.el-input__inner,
.url-input-container input,
.batch-links,
.form-input {
  background: var(--claude-panel-soft) !important;
  border-color: var(--claude-line) !important;
  color: var(--claude-text) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-input:focus,
.el-input__inner:focus {
  border-color: var(--claude-accent) !important;
  box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.18) !important;
  outline: none !important;
}

.el-button--primary,
.login-btn,
.submit-btn,
.upload-btn,
.copy-btn,
.storage-btn.active,
.method-btn.active,
.format-tab.active,
.compress-format-btn.active,
.compress-mode-btn.active {
  background: var(--claude-accent) !important;
  border-color: transparent !important;
  color: #1f1f1d !important;
  box-shadow: none !important;
}

.el-button--primary:hover,
.login-btn:hover,
.submit-btn:hover,
.upload-btn:hover,
.copy-btn:hover {
  background: var(--claude-accent-strong) !important;
  box-shadow: none !important;
}

.nav-links a:hover,
.theme-floating-toggle,
.theme-auto-inline-toggle,
.theme-admin-toggle,
.header-theme-toggle,
.gallery-theme-toggle {
  background: var(--claude-panel-soft) !important;
  border-color: var(--claude-line) !important;
  color: var(--claude-text) !important;
  box-shadow: none !important;
}

.theme-floating-toggle i,
.theme-auto-inline-toggle i,
.theme-admin-toggle i,
.header-theme-toggle i,
.gallery-theme-toggle i,
.logo,
.header-title i,
.upload-zone:hover .upload-icon {
  color: var(--claude-accent) !important;
}

.login-card {
  width: min(760px, 100%) !important;
  border-radius: 28px !important;
  padding: 28px !important;
}

.login-card .logo i::before {
  content: "*";
  font-family: var(--font-serif);
}

.login-card .logo i {
  font-family: var(--font-serif) !important;
}

.login-card .title::before {
  content: "Welcome, Seraph";
  display: block;
}

.login-card .title {
  font-size: clamp(40px, 6vw, 62px) !important;
}

.login-card .title,
.login-card .subtitle {
  font-size: 0 !important;
}

.login-card .title::before {
  font-size: clamp(40px, 6vw, 62px);
}

.login-card .subtitle::before {
  content: "Seraph's Pictures private workspace";
  font-size: 15px;
}

.error-message {
  background: rgba(240, 138, 127, 0.12) !important;
  border-color: rgba(240, 138, 127, 0.32) !important;
  color: var(--claude-danger) !important;
}

::selection {
  background: rgba(217, 119, 87, 0.3);
}

html[data-theme="dark"] body {
  background: var(--claude-bg) !important;
  background-color: var(--claude-bg) !important;
  background-image: none !important;
  color: var(--claude-text) !important;
}

html[data-theme="dark"] .header, html[data-theme="dark"] .header-content,
html[data-theme="dark"] .card, html[data-theme="dark"] .login-card,
html[data-theme="dark"] .preview-card, html[data-theme="dark"] .upload-zone,
html[data-theme="dark"] .storage-switcher, html[data-theme="dark"] .storage-target,
html[data-theme="dark"] .stats, html[data-theme="dark"] .stats-bar,
html[data-theme="dark"] .result-item, html[data-theme="dark"] .upload-item,
html[data-theme="dark"] .history-item, html[data-theme="dark"] .image-card,
html[data-theme="dark"] .guest-notice, html[data-theme="dark"] .el-dialog,
html[data-theme="dark"] .el-message-box {
  background: var(--claude-panel) !important;
  border-color: var(--claude-line) !important;
  box-shadow: none !important;
  color: var(--claude-text) !important;
}

html[data-theme="dark"] input, html[data-theme="dark"] select,
html[data-theme="dark"] textarea, html[data-theme="dark"] .el-input__inner,
html[data-theme="dark"] .url-input-container input, html[data-theme="dark"] .batch-links,
html[data-theme="dark"] .form-input {
  background: var(--claude-panel-soft) !important;
  border-color: var(--claude-line) !important;
  color: var(--claude-text) !important;
}

html[data-theme="dark"] .el-button--primary, html[data-theme="dark"] .login-btn,
html[data-theme="dark"] .submit-btn, html[data-theme="dark"] .upload-btn,
html[data-theme="dark"] .copy-btn {
  background: var(--claude-accent) !important;
  border-color: transparent !important;
  color: var(--claude-bg) !important;
}