/*
 * CLN-C visual system based on the Blog Manager admin theme.
 * This file intentionally loads after style.css so legacy dark declarations
 * cannot leak into newly added or less frequently visited screens.
 */

html[data-theme="light"] {
  --bg: #f5f7fb;
  --background: #f5f7fb;
  --surface: #ffffff;
  --surface-strong: #f8fafc;
  --surface-subtle: #f8fafc;
  --surface-blue: #f4f7ff;
  --border: #e3e8f0;
  --border-strong: #d3dae6;
  --line: #e3e8f0;
  --text: #172033;
  --text-secondary: #556176;
  --text-muted: #667085;
  --muted: #667085;
  --muted-strong: #556176;
  --placeholder: #667085;
  --navy: #13233f;
  --purple: #2563eb;
  --purple-strong: #1d4ed8;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-soft: #eaf1ff;
  --success: #106b49;
  --success-soft: #e8f7f0;
  --warning: #a15c08;
  --warning-soft: #fff5df;
  --danger: #c33d4b;
  --danger-bg: #fff0f1;
  --danger-soft: #fff0f1;
  --danger-border: #efc6cb;
  --danger-text: #c33d4b;
  --shadow-sm: 0 1px 2px rgb(15 23 42 / 4%);
  --shadow-md: 0 12px 30px rgb(15 23 42 / 8%);
  --shadow: 0 12px 30px rgb(15 23 42 / 8%);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --sidebar-width: 252px;
  --content-width: 1540px;
  --page-top-space: 32px;
  --page-side-space: 32px;
  --page-header-height: 68px;
  --page-section-gap: 24px;
  color-scheme: light;
  background: var(--background);
  scrollbar-color: #b8c4d5 #eef2f7;
}

/* Codex account and usage surfaces */
.codex-usage-indicator {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 12px;
  overflow: hidden;
  padding: 14px;
  border: 1px solid #d9e3f0;
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(59, 130, 246, 0.09), transparent 42%),
    linear-gradient(150deg, #ffffff 0%, #f8faff 58%, #f3f7fd 100%);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 7px 18px rgba(34, 62, 104, 0.08);
  color: #172033;
}

.codex-usage-indicator::before {
  position: absolute;
  z-index: -1;
  top: -36px;
  right: -30px;
  width: 96px;
  height: 96px;
  border: 1px solid rgba(59, 130, 246, 0.1);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(59, 130, 246, 0.025);
  content: "";
}

.codex-usage-head,
.codex-usage-brand,
.codex-connection-state,
.codex-connection-state > span,
.codex-usage-label,
.codex-usage-meta,
.codex-device-login,
.codex-usage-card > div:first-child {
  display: flex;
  align-items: center;
}

.codex-usage-head,
.codex-connection-state,
.codex-usage-label,
.codex-usage-meta { justify-content: space-between; }
.codex-usage-head { gap: 8px; }
.codex-usage-brand { min-width: 0; gap: 9px; }
.codex-usage-mark {
  display: grid;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid #c9daf5;
  border-radius: 10px;
  background: #edf4ff;
  color: #2563eb;
}
.codex-usage-mark svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.7; }
.codex-usage-title { display: grid; min-width: 0; gap: 1px; }
.codex-usage-title small { color: #6980a0; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.12em; }
.codex-usage-title strong { color: #172b4d; font-size: 0.86rem; letter-spacing: -0.01em; }
.codex-plan-badge {
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid #bfd4fb;
  border-radius: 999px;
  background: #eaf2ff;
  color: #1d4ed8;
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}
.codex-connection-state {
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid #e0e7f1;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.72);
  color: #41516a;
  font-size: 0.67rem;
}
.codex-connection-state > span { gap: 6px; font-weight: 700; }
.codex-connection-state small { color: #718198; font-size: 0.62rem; }
.codex-status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #718096; box-shadow: 0 0 0 3px rgba(113, 128, 150, 0.12); }
.codex-status-dot.connected { background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.13); }
.codex-status-dot.pending { background: #f6c85f; box-shadow: 0 0 0 3px rgba(246, 200, 95, 0.13); }
.codex-usage-row {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid #e0e7f1;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.82);
}
.codex-usage-label { gap: 8px; color: #4b5d76; font-size: 0.7rem; font-weight: 650; }
.codex-usage-label strong { color: #172b4d; font-size: 1rem; font-variant-numeric: tabular-nums; line-height: 1; }
.codex-usage-label strong small { margin-left: 1px; color: #718198; font-size: 0.62rem; }
.codex-usage-track {
  height: 8px;
  overflow: hidden;
  border: 1px solid #dbe4ef;
  border-radius: 999px;
  background: #e8eef6;
  box-shadow: inset 0 1px 2px rgba(70, 89, 118, 0.08);
}
.codex-usage-track > span {
  display: block;
  width: var(--usage-percent, 0%);
  min-width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #3b82f6 58%, #38bdf8);
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.2);
  transition: width 360ms ease;
}
.codex-usage-track > span.warning { background: linear-gradient(90deg, #f6c85f, #f59e0b); }
.codex-usage-track > span.critical { background: linear-gradient(90deg, #fb7185, #ef4444); }
.codex-usage-meta { gap: 8px; }
.codex-usage-meta small,
.codex-usage-empty { color: #718198; font-size: 0.62rem; }
.codex-usage-meta small:first-child { color: #4f6583; font-weight: 650; }
.codex-usage-empty { margin: 0; line-height: 1.5; }
.codex-usage-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #cfddf1;
  border-radius: 9px;
  background: #f0f5fd;
  color: #31517e;
  font-size: 0.67rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.codex-usage-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.codex-usage-link:hover { border-color: #a9c4ef; background: #e5efff; color: #1d4ed8; }
.app-shell.sidebar-collapsed .codex-usage-indicator { display: none; }

@media (prefers-reduced-motion: reduce) {
  .codex-usage-track > span { transition: none; }
}

.codex-page-header { align-items: end; }
.codex-page-header .eyebrow { color: var(--accent, #2563eb); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.13em; }
.codex-page-header p,
.codex-status-message,
.form-help { color: var(--text-muted, #64748b); }
.codex-device-login { margin: 18px 0; padding: 18px; border: 1px solid rgba(37, 99, 235, 0.22); border-radius: 14px; background: rgba(37, 99, 235, 0.06); }
.codex-device-login > div { display: grid; gap: 4px; }
.codex-device-login strong { font-size: 1.8rem; letter-spacing: 0.12em; }
.codex-usage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.codex-usage-card { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--border, #dce3ed); border-radius: 14px; background: var(--surface, #ffffff); }
.codex-usage-card strong { font-size: 1.3rem; }
.codex-usage-card small { color: var(--text-muted, #64748b); }

@media (max-width: 720px) {
  .codex-device-login { align-items: stretch; flex-direction: column; }
  .codex-device-login .primary-button { text-align: center; }
}

html[data-theme="light"] *,
html[data-theme="light"] .table-wrap {
  scrollbar-color: #b8c4d5 #eef2f7;
}

html[data-theme="light"] *::-webkit-scrollbar-track,
html[data-theme="light"] .table-wrap::-webkit-scrollbar-track,
html[data-theme="light"] .board-title-tooltip::-webkit-scrollbar-track {
  border-color: #eef2f7;
  background: #eef2f7;
  box-shadow: none;
}

html[data-theme="light"] *::-webkit-scrollbar-thumb,
html[data-theme="light"] .table-wrap::-webkit-scrollbar-thumb,
html[data-theme="light"] .board-title-tooltip::-webkit-scrollbar-thumb {
  border-color: #eef2f7;
  background: #b8c4d5;
  box-shadow: none;
}

html[data-theme="light"] body {
  background: var(--background);
  color: var(--text);
  font-family:
    Pretendard,
    "Noto Sans KR",
    "Apple SD Gothic Neo",
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 14px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

html[data-theme="light"] button,
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  color-scheme: light;
}

html[data-theme="light"] :focus-visible {
  outline: 3px solid rgb(37 99 235 / 24%);
  outline-offset: 2px;
}

/* Application frame and sidebar */

html[data-theme="light"] .app-shell {
  background: var(--background);
}

html[data-theme="light"] .sidebar {
  gap: 0;
  padding: 0 14px 17px;
  border-right: 1px solid var(--border);
  background: var(--surface);
  box-shadow: none;
}

html[data-theme="light"] .sidebar-header {
  min-height: 74px;
  margin: 0;
  padding: 0 6px;
  border-bottom: 1px solid var(--border);
}

html[data-theme="light"] .brand {
  gap: 11px;
}

html[data-theme="light"] .brand-mark {
  width: 35px;
  height: 35px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(145deg, #3272ee, #1b4fc1);
  box-shadow: 0 6px 14px rgb(37 99 235 / 20%);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

html[data-theme="light"] .brand strong {
  color: var(--navy);
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -0.02em;
}

html[data-theme="light"] .sidebar-graph {
  opacity: 0.72;
}

html[data-theme="light"] .icon-button {
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: #677286;
}

html[data-theme="light"] .icon-button:hover {
  border-color: var(--border-strong);
  background: var(--surface-subtle);
  color: var(--navy);
}

html[data-theme="light"] .nav-list {
  gap: 3px;
  padding: 20px 0;
}

html[data-theme="light"] .nav-separator {
  margin: 7px 10px;
  background: var(--border);
}

html[data-theme="light"] .nav-link {
  min-height: 42px;
  gap: 12px;
  padding: 0 12px;
  border-radius: 9px;
  color: #4d5a70;
  font-size: 13px;
  font-weight: 570;
  transition:
    color 160ms ease,
    background-color 160ms ease;
}

html[data-theme="light"] .nav-link::before,
html[data-theme="light"] .nav-link::after {
  display: none;
}

html[data-theme="light"] .nav-link svg,
html[data-theme="light"] .nav-link:hover svg,
html[data-theme="light"] .nav-link.active svg {
  color: currentColor;
  filter: none;
  opacity: 0.88;
}

html[data-theme="light"] .nav-link:hover {
  background: #f5f7fa;
  color: var(--navy);
}

html[data-theme="light"] .nav-link.active {
  background: var(--primary-soft);
  color: var(--primary-dark);
  box-shadow: inset 3px 0 0 var(--primary);
  font-weight: 700;
}

html[data-theme="light"] .nav-count-badge {
  border-color: #dfe5ee;
  background: #f5f7fa;
  color: #667085;
}

html[data-theme="light"] .sidebar-footer {
  gap: 8px;
  padding-top: 15px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

html[data-theme="light"] .security-chip {
  gap: 6px;
  padding: 10px 11px;
  border: 1px solid #dde5f3;
  border-radius: 10px;
  background: #f8faff;
  box-shadow: none;
}

html[data-theme="light"] .security-chip-head {
  color: #30425f;
  font-size: 10px;
  letter-spacing: 0.05em;
}

html[data-theme="light"] .security-dot {
  border: 2px solid #bcd0fc;
  background: var(--primary);
  box-shadow: 0 0 0 3px #e8efff;
}

html[data-theme="light"] .security-chip p {
  color: var(--text-muted);
  font-size: 10px;
}

html[data-theme="light"] .security-ip {
  border-color: #d8e2f4;
  background: #eff4ff;
  color: #2858b8;
  font-size: 10px;
}

html[data-theme="light"] .user-card {
  min-height: 52px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

html[data-theme="light"] .user-card:hover {
  border-color: #d6dde8;
  background: #f8fafc;
}

html[data-theme="light"] .user-avatar,
html[data-theme="light"] .profile-summary-avatar {
  border: 1px solid #d8e2f4;
  border-radius: 10px;
  background: #eff4ff;
  color: #2858b8;
}

html[data-theme="light"] .user-meta strong {
  color: #344158;
  font-size: 12px;
}

html[data-theme="light"] .user-meta small {
  color: var(--text-muted);
  font-size: 10px;
}

html[data-theme="light"] .user-popover {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

html[data-theme="light"] .user-popover-head:hover,
html[data-theme="light"] .user-menu-item:hover {
  background: var(--surface-subtle);
}

/* Main content, type and surfaces */

html[data-theme="light"] .content {
  padding: var(--page-top-space) var(--page-side-space) 32px;
}

html[data-theme="light"] .page-header {
  align-items: flex-end;
}

html[data-theme="light"] .page-header h1,
html[data-theme="light"] .chemical-front-title {
  color: var(--navy);
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 780;
  letter-spacing: -0.045em;
  line-height: 1.25;
}

html[data-theme="light"] .page-header p,
html[data-theme="light"] .chemical-front-subtitle,
html[data-theme="light"] .chemical-front-description {
  color: var(--text-secondary);
  font-size: 13px;
}

html[data-theme="light"] .eyebrow,
html[data-theme="light"] .card-kicker {
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

html[data-theme="light"] .admin-stat-card,
html[data-theme="light"] .admin-action-card,
html[data-theme="light"] .admin-panel,
html[data-theme="light"] .menu-card,
html[data-theme="light"] .panel,
html[data-theme="light"] .news-panel,
html[data-theme="light"] .research-tabs,
html[data-theme="light"] .research-form-side,
html[data-theme="light"] .comment-item,
html[data-theme="light"] .legal-note-detail,
html[data-theme="light"] .search-results-empty {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

html[data-theme="light"] .elevated-panel,
html[data-theme="light"] .legal-note-detail {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

html[data-theme="light"] .admin-panel,
html[data-theme="light"] .panel {
  padding: 18px;
}

html[data-theme="light"] .admin-stat-card,
html[data-theme="light"] .admin-action-card {
  padding: 17px;
}

html[data-theme="light"] .admin-stat-card span,
html[data-theme="light"] .admin-action-card p,
html[data-theme="light"] .menu-card p {
  color: var(--text-secondary);
}

html[data-theme="light"] .admin-stat-card strong,
html[data-theme="light"] .admin-action-card h2,
html[data-theme="light"] .admin-panel h2,
html[data-theme="light"] .menu-card h2,
html[data-theme="light"] .panel h2 {
  color: var(--navy);
}

html[data-theme="light"] .menu-card:hover {
  border-color: #c7d5eb;
  background: #fafbfd;
  box-shadow: 0 10px 24px rgb(30 54 94 / 8%);
}

html[data-theme="light"] .profile-summary-avatar {
  width: 42px;
  height: 42px;
}

/* Buttons, form fields and selection controls */

html[data-theme="light"] .primary-button,
html[data-theme="light"] .search-command > button,
html[data-theme="light"] .login-form button,
html[data-theme="light"] .search-form button {
  border: 0;
  border-radius: 9px;
  background: var(--primary);
  box-shadow: 0 5px 12px rgb(37 99 235 / 16%);
  color: #ffffff;
  font-weight: 700;
}

html[data-theme="light"] .primary-button:hover,
html[data-theme="light"] .search-command > button:hover,
html[data-theme="light"] .login-form button:hover,
html[data-theme="light"] .search-form button:hover {
  border-color: transparent;
  background: var(--primary-dark);
  color: #ffffff;
  box-shadow: 0 6px 14px rgb(37 99 235 / 20%);
}

html[data-theme="light"] .secondary-button,
html[data-theme="light"] .sort-button,
html[data-theme="light"] .icon-action-link,
html[data-theme="light"] .icon-action-button,
html[data-theme="light"] .news-refresh-button,
html[data-theme="light"] .board-page-button,
html[data-theme="light"] .news-page-button {
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--surface);
  color: #40506b;
  box-shadow: none;
}

html[data-theme="light"] .secondary-button:hover,
html[data-theme="light"] .sort-button:hover,
html[data-theme="light"] .icon-action-link:hover,
html[data-theme="light"] .icon-action-button:hover,
html[data-theme="light"] .news-refresh-button:hover,
html[data-theme="light"] .board-page-button:hover,
html[data-theme="light"] .news-page-button:hover {
  border-color: #bfc9d8;
  background: #fafbfd;
  color: var(--navy);
  box-shadow: none;
}

html[data-theme="light"] .field-block input,
html[data-theme="light"] .field-block select,
html[data-theme="light"] .field-block textarea,
html[data-theme="light"] .admin-filter input,
html[data-theme="light"] .admin-filter select,
html[data-theme="light"] .inline-form input,
html[data-theme="light"] .board-search-row select,
html[data-theme="light"] .board-search-row input,
html[data-theme="light"] .search-form input,
html[data-theme="light"] .editor-mode-select,
html[data-theme="light"] .research-admin-control select,
html[data-theme="light"] .research-graph-toolbar input[type="search"],
html[data-theme="light"] .graph-background-select select,
html[data-theme="light"] .comments-panel .comment-form textarea,
html[data-theme="light"] .comment-edit-form textarea,
html[data-theme="light"] .comment-reply-form textarea,
html[data-theme="light"] .chemical-front-toolbar input,
html[data-theme="light"] .chemical-front-toolbar select {
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: #fbfcfe;
  color: var(--text);
  box-shadow: none;
}

html[data-theme="light"] .field-block input:focus,
html[data-theme="light"] .field-block select:focus,
html[data-theme="light"] .field-block textarea:focus,
html[data-theme="light"] .admin-filter input:focus,
html[data-theme="light"] .admin-filter select:focus,
html[data-theme="light"] .board-search-row input:focus,
html[data-theme="light"] .board-search-row select:focus,
html[data-theme="light"] .comments-panel .comment-form textarea:focus,
html[data-theme="light"] .chemical-front-toolbar input:focus,
html[data-theme="light"] .chemical-front-toolbar select:focus {
  border-color: #7da2ec;
  background: #ffffff;
  outline: none;
  box-shadow: 0 0 0 3px rgb(37 99 235 / 10%);
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: var(--placeholder);
}

html[data-theme="light"] .checkbox-grid label,
html[data-theme="light"] .choice-pill span,
html[data-theme="light"] .sidebar-graph-form li label,
html[data-theme="light"]
  .sidebar-graph-form
  #id_sidebar_graph_style
  > div
  > label,
html[data-theme="light"] .continue-registration-toggle,
html[data-theme="light"] .screen-mode-card {
  border-color: var(--border);
  border-radius: 9px;
  background: var(--surface-subtle);
  color: var(--text-secondary);
  box-shadow: none;
}

html[data-theme="light"] .choice-pill input:checked + span,
html[data-theme="light"] .sidebar-graph-form li label:has(input:checked),
html[data-theme="light"]
  .sidebar-graph-form
  #id_sidebar_graph_style
  > div
  > label:has(input:checked) {
  border-color: #bcd0fc;
  background: var(--primary-soft);
  color: var(--primary-dark);
  box-shadow: none;
}

html[data-theme="light"] .screen-mode-options-single {
  grid-template-columns: minmax(0, 620px);
}

html[data-theme="light"] .screen-mode-card-fixed {
  cursor: default;
}

html[data-theme="light"] .screen-mode-preview.is-blog-manager {
  border: 1px solid #dfe5ee;
  background: #f5f7fb;
}

html[data-theme="light"] .screen-mode-preview.is-blog-manager span {
  background: var(--primary);
}

/* Tables, editors and detail content */

html[data-theme="light"] .table-wrap,
html[data-theme="light"] .board-pagination,
html[data-theme="light"] .board-title-tooltip,
html[data-theme="light"] .rich-text,
html[data-theme="light"] .rich-editor,
html[data-theme="light"] .attachment-list li,
html[data-theme="light"] .revision-diff,
html[data-theme="light"] .code-block {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  box-shadow: none;
}

html[data-theme="light"] .admin-table thead tr,
html[data-theme="light"] .admin-table th {
  border-color: var(--border);
  background: var(--surface-subtle);
  color: #5f6b80;
}

html[data-theme="light"] .admin-table tbody tr,
html[data-theme="light"] .admin-table td {
  border-color: #edf0f4;
  background: var(--surface);
  color: #526078;
}

html[data-theme="light"] .admin-table tbody tr:hover td {
  background: #f9fbff;
}

html[data-theme="light"] .board-title-link,
html[data-theme="light"] .issue-title-link,
html[data-theme="light"] .admin-table .table-link {
  background: none;
  color: #43516a;
  font-weight: 400;
  text-shadow: none;
}

html[data-theme="light"] .board-title-link::after,
html[data-theme="light"] .issue-title-link::after,
html[data-theme="light"] .procurement-project-cell .table-link::after {
  display: none;
}

html[data-theme="light"] .board-title-link:hover,
html[data-theme="light"] .board-title-link:focus-visible,
html[data-theme="light"] .issue-title-link:hover,
html[data-theme="light"] .issue-title-link:focus-visible,
html[data-theme="light"] .admin-table .table-link:hover,
html[data-theme="light"] .admin-table .table-link:focus-visible,
html[data-theme="light"] .procurement-project-cell .table-link:hover,
html[data-theme="light"] .procurement-project-cell .table-link:focus-visible {
  background: none;
  color: var(--primary-dark);
  text-shadow: none;
}

html[data-theme="light"] .rich-editor-toolbar,
html[data-theme="light"] .rich-editor-tablebar {
  border-color: var(--border);
  background: var(--surface-subtle);
}

html[data-theme="light"] .toolbar-group,
html[data-theme="light"] .procurement-setting-section,
html[data-theme="light"] .issue-reply-list {
  border-color: var(--border);
}

html[data-theme="light"] .rich-editor-toolbar button,
html[data-theme="light"] .rich-editor-tablebar button,
html[data-theme="light"] .rich-editor-toolbar select,
html[data-theme="light"] .rich-editor-toolbar input[type="color"] {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text-secondary);
}

html[data-theme="light"] .rich-editor-surface,
html[data-theme="light"] .rich-text-rendered,
html[data-theme="light"] .legal-note-prose {
  background: var(--surface);
  color: var(--text-secondary);
}

html[data-theme="light"] .revision-legend .deleted,
html[data-theme="light"] .revision-line.deleted {
  background: var(--danger-soft);
  color: var(--danger);
}

html[data-theme="light"] .revision-legend .added,
html[data-theme="light"] .revision-line.added {
  background: var(--primary-soft);
  color: var(--primary-dark);
}

html[data-theme="light"] .revision-line.equal {
  background: var(--surface-subtle);
  color: var(--text-secondary);
}

/* Search and latest-news presentation */

html[data-theme="light"] .search-brand h1 {
  background: linear-gradient(
    110deg,
    var(--navy) 8%,
    var(--primary) 52%,
    #3272ee 82%
  );
  background-clip: text;
  -webkit-background-clip: text;
  text-shadow: none;
}

html[data-theme="light"] .search-command,
html[data-theme="light"] .search-command::after,
html[data-theme="light"] .search-history-panel,
html[data-theme="light"] .search-results-empty {
  border-color: var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

html[data-theme="light"] .search-command {
  min-height: 54px;
}

html[data-theme="light"] .search-command::before {
  background: var(--primary);
}

html[data-theme="light"] .search-command:focus-within {
  border-color: #7da2ec;
  box-shadow:
    0 0 0 3px rgb(37 99 235 / 10%),
    var(--shadow-md);
}

html[data-theme="light"] .search-file-mode-toggle,
html[data-theme="light"] .search-history-toggle span {
  border-color: var(--border);
  background: var(--surface-subtle);
}

html[data-theme="light"] .search-history-toggle input:checked + span {
  border-color: #bcd0fc;
  background: var(--primary-soft);
}

html[data-theme="light"] .search-history-toggle input:checked + span::before {
  background: var(--primary);
}

html[data-theme="light"] .search-history-item:hover,
html[data-theme="light"] .search-history-item:focus-visible,
html[data-theme="light"] .search-result-item:hover {
  background: var(--surface-blue);
}

html[data-theme="light"] .search-result-group-head h3 {
  border-color: var(--border);
  background: var(--surface-subtle);
  box-shadow: none;
  color: var(--navy);
}

html[data-theme="light"] .search-results-head p {
  color: var(--primary);
  text-shadow: none;
}

html[data-theme="light"] .search-result-total {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text-muted);
}

html[data-theme="light"] .search-result-group {
  --search-group-accent: var(--primary);
  --search-group-bg: var(--primary-soft);
}

html[data-theme="light"] .search-result-group-head h3 span {
  color: var(--primary-dark);
  text-shadow: none;
}

html[data-theme="light"] .search-result-item strong,
html[data-theme="light"] .search-results-empty strong {
  color: var(--navy);
}

html[data-theme="light"] .search-result-accuracy,
html[data-theme="light"] .mini-badge,
html[data-theme="light"] .research-tag-row span {
  border-color: #d7e2f8;
  background: #f7faff;
  color: #3b5f9f;
}

html[data-theme="light"] .news-panel {
  width: min(100%, 980px);
  padding: 18px;
}

html[data-theme="light"] .news-panel-head {
  border-bottom-color: var(--border);
}

html[data-theme="light"] .news-panel-head p {
  color: var(--primary);
}

html[data-theme="light"] .news-source {
  border-color: #d7e2f8;
  background: #f7faff;
  color: #3b5f9f;
}

html[data-theme="light"] .news-loading-spinner {
  border-color: #d7e2f8;
  border-top-color: var(--primary);
}

html[data-theme="light"] .news-row:hover,
html[data-theme="light"] .news-row:focus-visible {
  background: var(--surface-blue);
  box-shadow: inset 3px 0 0 var(--primary);
}

html[data-theme="light"] .news-row:hover .news-source,
html[data-theme="light"] .news-row:focus-visible .news-source {
  border-color: #bcd0fc;
  background: var(--primary-soft);
  color: var(--primary-dark);
}

/* Status colors */

html[data-theme="light"] .flash,
html[data-theme="light"] .note-badge.visibility-shared,
html[data-theme="light"] .note-badge.visibility-group,
html[data-theme="light"] .note-badge.status-review_requested,
html[data-theme="light"] .research-keyword-chip {
  border-color: #cfdcf6;
  background: var(--primary-soft);
  color: var(--primary-dark);
}

html[data-theme="light"] .config-status.on,
html[data-theme="light"] .status-badge.active,
html[data-theme="light"] .note-badge.status-published,
html[data-theme="light"] .note-badge.uncertainty-confirmed,
html[data-theme="light"] .update-badge,
html[data-theme="light"] .new-item-badge {
  border-color: #bfe2d3;
  background: var(--success-soft);
  color: var(--success);
}

html[data-theme="light"] .config-status.off,
html[data-theme="light"] .config-status.danger,
html[data-theme="light"] .status-badge.inactive,
html[data-theme="light"] .note-badge.status-rejected,
html[data-theme="light"] .alert-badge {
  border-color: #efc6cb;
  background: var(--danger-soft);
  color: var(--danger);
}

html[data-theme="light"] .note-badge.uncertainty-needs_review,
html[data-theme="light"] .note-badge.uncertainty-needs_official_interpretation {
  border-color: #f0d9a8;
  background: var(--warning-soft);
  color: var(--warning);
}

html[data-theme="light"] .danger-button,
html[data-theme="light"] .danger-action,
html[data-theme="light"] .danger-link,
html[data-theme="light"] .danger-icon-button,
html[data-theme="light"] .icon-action-button.danger,
html[data-theme="light"] .icon-action-link.danger {
  border: 1px solid #efc6cb;
  background: var(--danger-soft);
  color: var(--danger);
  box-shadow: none;
}

html[data-theme="light"] .danger-button:hover,
html[data-theme="light"] .danger-action:hover,
html[data-theme="light"] .danger-icon-button:hover,
html[data-theme="light"] .icon-action-button.danger:hover,
html[data-theme="light"] .icon-action-link.danger:hover {
  border-color: #e4aeb5;
  background: #ffe7e9;
  color: #a92e3b;
}

/* Login and first-admin setup */

html[data-theme="light"] .login-page {
  padding: 32px 20px 62px;
  background:
    radial-gradient(circle at 10% 5%, rgb(210 223 250 / 52%), transparent 32%),
    radial-gradient(circle at 92% 92%, rgb(225 232 246 / 65%), transparent 34%),
    var(--background);
  background-size: auto;
}

html[data-theme="light"] .login-page::before,
html[data-theme="light"] .secret-card::before {
  display: none;
}

html[data-theme="light"] .login-card,
html[data-theme="light"] .secret-card {
  width: min(100%, 432px);
  padding: 36px;
  border: 1px solid #dfe5ee;
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 97%);
  box-shadow: 0 24px 70px rgb(31 48 78 / 12%);
}

html[data-theme="light"] .access-status,
html[data-theme="light"] .access-status strong {
  color: var(--primary-dark);
  font-size: 10px;
  text-shadow: none;
}

html[data-theme="light"] .access-status span {
  background: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
}

html[data-theme="light"] .login-form {
  gap: 12px;
}

html[data-theme="light"] .login-form label,
html[data-theme="light"] .login-check {
  color: #445169;
  font-size: 11px;
}

html[data-theme="light"] .login-form input:not([type="checkbox"]) {
  height: 45px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: #fbfcfe;
  color: var(--text);
  font-size: 12px;
  box-shadow: none;
}

html[data-theme="light"] .login-form input:not([type="checkbox"]):focus {
  border-color: #7da2ec;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgb(37 99 235 / 10%);
}

html[data-theme="light"] .login-form button {
  min-height: 45px;
}

html[data-theme="light"] .message {
  border-color: #f1ced2;
  border-radius: 8px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 11px;
}

html[data-theme="light"] .login-mark,
html[data-theme="light"] .secret-card .login-mark {
  border: 0;
  border-radius: 10px;
  background: linear-gradient(145deg, #3272ee, #1b4fc1);
  box-shadow: 0 6px 14px rgb(37 99 235 / 20%);
  color: #ffffff;
}

/* Secondary controls and workflow cards */

html[data-theme="light"] .switch-track {
  border-color: var(--border-strong);
  background: #e7ebf1;
  box-shadow: inset 0 1px 2px rgb(15 23 42 / 8%);
}

html[data-theme="light"] .switch-thumb {
  background: #ffffff;
  box-shadow: 0 2px 6px rgb(15 23 42 / 18%);
}

html[data-theme="light"] .switch-field input:checked + .switch-track {
  border-color: #7da2ec;
  background: var(--primary);
  box-shadow: inset 0 1px 2px rgb(15 23 42 / 12%);
}

html[data-theme="light"]
  .switch-field
  input:checked
  + .switch-track
  .switch-thumb {
  background: #ffffff;
  box-shadow: 0 2px 7px rgb(15 23 42 / 20%);
}

html[data-theme="light"] .source-url-row,
html[data-theme="light"] .confirm-summary div,
html[data-theme="light"] .interpretation-summary-grid > div,
html[data-theme="light"] .research-version-meta div {
  border-color: var(--border);
  border-radius: 9px;
  background: var(--surface-subtle);
  color: var(--text-secondary);
}

html[data-theme="light"] .interpretation-summary-grid strong {
  display: block;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  color: #344159;
  font-size: 0.82rem;
  font-weight: 650;
}

html[data-theme="light"] .interpretation-summary-section {
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #f7f9fc;
  box-shadow: none;
}

html[data-theme="light"] .interpretation-summary-heading h3 {
  color: var(--navy);
  font-size: 0.95rem;
  font-weight: 650;
}

html[data-theme="light"] .interpretation-summary-heading span {
  color: var(--text-muted);
}

html[data-theme="light"] .interpretation-summary-grid {
  gap: 12px;
}

html[data-theme="light"] .interpretation-summary-grid > div {
  padding: 15px;
  border-color: var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

html[data-theme="light"] .interpretation-summary-list {
  gap: 8px;
  margin-top: 12px;
}

html[data-theme="light"] .interpretation-summary-list li {
  gap: 4px;
  padding: 11px 12px 11px 14px;
  border: 1px solid #e7ebf1;
  border-radius: 8px;
  background: var(--surface-subtle);
  color: var(--text-secondary);
  box-shadow: none;
}

html[data-theme="light"] .interpretation-summary-list li::before {
  top: 11px;
  bottom: 11px;
  width: 2px;
  background: #89a8e5;
}

html[data-theme="light"] .interpretation-summary-item-label {
  color: #315b9d;
  font-weight: 600;
}

html[data-theme="light"] .interpretation-summary-item-body {
  color: #3f4c63;
  font-size: 0.91rem;
  line-height: 1.6;
}

html[data-theme="light"] .interpretation-summary-empty {
  color: var(--text-muted);
}

html[data-theme="light"] .ocr-progress-track,
html[data-theme="light"] .sync-progress-track {
  border-color: var(--border);
  background: #e9edf3;
}

html[data-theme="light"] .ocr-progress-fill,
html[data-theme="light"] .sync-progress-fill {
  background: linear-gradient(90deg, #5b85df, var(--primary));
  box-shadow: none;
}

html[data-theme="light"] .visibility-slider-track {
  border-color: var(--border-strong);
  background: #e7ebf1;
  box-shadow: inset 0 1px 2px rgb(15 23 42 / 8%);
}

html[data-theme="light"]
  .visibility-slider
  input:checked
  + .visibility-slider-track {
  border-color: #7da2ec;
  background: var(--primary);
  box-shadow: inset 0 1px 2px rgb(15 23 42 / 10%);
}

html[data-theme="light"]
  .procurement-detail-actions
  [data-copy-value].is-copied {
  border-color: #bfe2d3;
  background: var(--success-soft);
  color: var(--success);
}

html[data-theme="light"] .method-card {
  border-color: var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

html[data-theme="light"] .method-card.active:hover {
  border-color: #bcd0fc;
  background: var(--surface-blue);
  box-shadow: 0 10px 24px rgb(30 54 94 / 8%);
}

html[data-theme="light"] .method-icon {
  border-color: #cfdcf6;
  background: var(--primary-soft);
  color: var(--primary-dark);
}

html[data-theme="light"] .paste-upload-zone {
  border-color: #b8c7da;
  background: var(--surface-subtle);
  color: var(--text);
}

html[data-theme="light"] .paste-upload-zone:focus,
html[data-theme="light"] .paste-upload-zone:hover {
  border-color: #7da2ec;
  background: var(--surface-blue);
  box-shadow: 0 0 0 3px rgb(37 99 235 / 10%);
}

html[data-theme="light"] .ocr-preview-item,
html[data-theme="light"] .ocr-progress-panel {
  border-color: var(--border);
  background: var(--surface-subtle);
  color: var(--text-secondary);
}

html[data-theme="light"] .api-test-result {
  border-color: var(--border);
  background: var(--surface-subtle);
  color: var(--text-secondary);
}

html[data-theme="light"] .api-test-result.success {
  border-color: #bfe2d3;
  background: var(--success-soft);
}

html[data-theme="light"] .api-test-result.error {
  border-color: #efc6cb;
  background: var(--danger-soft);
}

html[data-theme="light"] .board-table tr {
  background: var(--surface);
}

html[data-theme="light"] .research-admin-card.is-danger {
  border-color: #efc6cb;
  background: var(--danger-soft);
}

html[data-theme="light"] .research-graph-appearance-panel {
  border-color: var(--border);
  background: var(--surface-subtle);
}

html[data-theme="light"] .graph-glass-toggle {
  border-color: var(--border-strong);
  background: var(--surface);
}

/* Chemical Front screens were introduced after the old light-theme block. */

html[data-theme="light"] .chemical-front-meta-grid > div,
html[data-theme="light"] .front-company-panel,
html[data-theme="light"] .front-unknown-list,
html[data-theme="light"] .chemical-front-map-wrap,
html[data-theme="light"] .radar-preset-card {
  border-color: var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

html[data-theme="light"] .chemical-front-map-wrap {
  overflow: hidden;
}

html[data-theme="light"] #chemicalFrontMap {
  background: #e9eff7;
}

html[data-theme="light"] .chemical-front-toolbar label,
html[data-theme="light"] .chemical-front-admin-filter label {
  color: #445169;
  font-size: 11px;
}

html[data-theme="light"] .front-company-panel-head {
  border-bottom-color: var(--border);
}

html[data-theme="light"] .front-company-panel-head h2,
html[data-theme="light"] .front-company-card strong,
html[data-theme="light"] .config-panel-heading h2,
html[data-theme="light"] .chemical-front-name-cell strong {
  color: var(--navy);
}

html[data-theme="light"] .front-company-panel-head span {
  color: var(--primary-dark);
}

html[data-theme="light"] .front-company-card {
  border-color: var(--border);
  border-radius: 10px;
  background: #fbfcfe;
  color: var(--text);
}

html[data-theme="light"] .front-company-card:hover,
html[data-theme="light"] .front-company-card.is-active {
  border-color: #bcd0fc;
  background: var(--primary-soft);
}

html[data-theme="light"] .front-company-card span,
html[data-theme="light"] .front-company-card p,
html[data-theme="light"] .front-company-card small,
html[data-theme="light"] .chemical-front-coordinate-cell {
  color: var(--text-muted);
}

html[data-theme="light"] .front-status-pill {
  border-color: var(--border-strong);
  background: #f1f3f6;
  color: var(--text-secondary);
}

html[data-theme="light"] .front-status-pill.is-frontline,
html[data-theme="light"] .front-status-pill.status-success {
  border-color: #cfdcf6;
  background: var(--primary-soft);
  color: var(--primary-dark);
}

html[data-theme="light"] .front-status-pill.is-visible,
html[data-theme="light"] .front-status-pill.status-manual {
  border-color: #bfe2d3;
  background: var(--success-soft);
  color: var(--success);
}

html[data-theme="light"] .front-status-pill.status-failed {
  border-color: #efc6cb;
  background: var(--danger-soft);
  color: var(--danger);
}

html[data-theme="light"] .front-status-pill.status-pending {
  border-color: #f0d9a8;
  background: var(--warning-soft);
  color: var(--warning);
}

html[data-theme="light"] .chemical-front-map-wrap .front-empty-state {
  border-color: #bcd0fc;
  background: rgb(244 247 255 / 92%);
  color: var(--text-secondary);
}

html[data-theme="light"] .radar-preset-card:hover,
html[data-theme="light"] .radar-preset-card:focus-visible,
html[data-theme="light"] .radar-preset-card.is-selected {
  border-color: #bcd0fc;
  background: var(--primary-soft);
  box-shadow: none;
}

html[data-theme="light"] .chemical-front-company-form .checkbox-list {
  border-color: var(--border);
  background: var(--surface-subtle);
}

html[data-theme="light"] .front-line-swatch {
  border-color: var(--border-strong);
}

html[data-theme="light"] .leaflet-tooltip {
  border-color: var(--border);
  background: var(--surface);
  color: var(--navy);
  box-shadow: var(--shadow-md);
}

html[data-theme="light"] .leaflet-tooltip-top::before {
  border-top-color: var(--surface);
}

html[data-theme="light"] .leaflet-tooltip-bottom::before {
  border-bottom-color: var(--surface);
}

html[data-theme="light"] .leaflet-tooltip-left::before {
  border-left-color: var(--surface);
}

html[data-theme="light"] .leaflet-tooltip-right::before {
  border-right-color: var(--surface);
}

html[data-theme="light"] .front-marker--active .front-marker-core {
  border-color: #93c5fd;
  background: radial-gradient(
    circle at 35% 30%,
    #dbeafe 0 10%,
    #60a5fa 24%,
    #2563eb 58%,
    #13233f 100%
  );
  box-shadow:
    0 0 0 6px rgb(37 99 235 / 16%),
    0 0 24px rgb(37 99 235 / 36%);
}

html[data-theme="light"] .front-marker--active::after,
html[data-theme="light"] .front-marker-radar {
  border-color: rgb(37 99 235 / 46%);
}

html[data-theme="light"] .front-marker-radar {
  background: rgb(37 99 235 / 12%);
}

html[data-theme="light"] .front-marker-sweep {
  background: conic-gradient(
    from 0deg,
    rgb(37 99 235 / 58%),
    rgb(37 99 235 / 10%) 26%,
    transparent 27% 100%
  );
}

html[data-theme="light"] .front-cluster,
html[data-theme="light"] .front-cluster-icon--medium .front-cluster,
html[data-theme="light"] .front-cluster-icon--large .front-cluster,
html[data-theme="light"] .front-cluster-icon--frontline .front-cluster {
  border-color: #bfdbfe;
  background: radial-gradient(
    circle at 35% 30%,
    #dbeafe 0 12%,
    #60a5fa 36%,
    #2563eb 68%,
    #13233f 100%
  );
  box-shadow:
    0 0 0 5px rgb(37 99 235 / 12%),
    0 8px 22px rgb(15 23 42 / 22%);
}

html[data-theme="light"] .front-cluster-ring,
html[data-theme="light"] .front-cluster-icon--frontline .front-cluster-ring {
  border-color: rgb(37 99 235 / 34%);
}

/* Dialogs and comments */

html[data-theme="light"] .confirm-modal,
html[data-theme="light"] .sync-progress-dialog,
html[data-theme="light"] .graph-background-select,
html[data-theme="light"] .research-graph-detail {
  border-color: var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-md);
}

html[data-theme="light"] .comment-item.reply,
html[data-theme="light"] .issue-comment,
html[data-theme="light"] .issue-reply,
html[data-theme="light"] .comment-reply-form {
  border-color: var(--border);
  background: var(--surface-subtle);
}

@media (max-width: 1024px) {
  html[data-theme="light"] {
    --page-side-space: 24px;
    --page-top-space: 24px;
  }
}

@media (max-width: 760px) {
  html[data-theme="light"] {
    --page-side-space: 16px;
    --page-top-space: 20px;
    --page-section-gap: 18px;
  }

  html[data-theme="light"] .login-card,
  html[data-theme="light"] .secret-card {
    padding: 28px 22px;
  }

  html[data-theme="light"] .screen-mode-options-single {
    grid-template-columns: 1fr;
  }
}