/* Layerlab-reviewed dark admin theme. Interactive content remains native DOM. */
:root {
  color-scheme: dark;
  --brand: #090d12;
  --brand-hover: #151d26;
  --brand-nav: #131d26;
  --brand-line: rgb(161 176 191 / 18%);
  --brand-accent: #35d48b;
  --accent: #35d48b;
  --accent-hover: #2fc37f;
  --accent-soft: #2f8cff;
  --taegeuk-red: #ed3344;
  --focus-ring: rgb(53 212 139 / 22%);
  --page: #080d13;
  --login-wash: #0a1017;
  --paper: #111821;
  --line: #293440;
  --line-soft: #202a34;
  --head: #0e151d;
  --inset: #0b1219;
  --ink: #f3f6f8;
  --ink-2: #c8d0d8;
  --muted: #8e99a5;
  --muted-2: #6f7b88;
  --on-brand: #f5f8fa;
  --on-brand-dim: #9aa6b2;
  --green: #35d48b;
  --green-dot: #35d48b;
  --green-bg: rgb(53 212 139 / 10%);
  --green-line: rgb(53 212 139 / 30%);
  --blue: #3e91ff;
  --blue-bg: rgb(62 145 255 / 10%);
  --blue-line: rgb(62 145 255 / 30%);
  --amber: #f4ad24;
  --amber-dot: #f4ad24;
  --amber-bg: rgb(244 173 36 / 9%);
  --amber-line: rgb(244 173 36 / 42%);
  --red: #ff6670;
  --red-dot: #ff4f5d;
  --red-bg: rgb(255 79 93 / 10%);
  --red-line: rgb(255 79 93 / 30%);
  --sidebar-w: 244px;
  --topbar-h: 78px;
  --pad: 24px;
  --gap: 16px;
  --r: 6px;
  --r-sm: 5px;
  --ctrl-h: 44px;
  --ctrl-h-sm: 36px;
}

body {
  color: var(--ink);
  background: var(--page);
}

::selection { color: #07110d; background: var(--accent); }

/* Brand assets extracted as reviewed raster crops from the generated design. */
.crest,
.login-crest {
  background: #090d12 url("assets/layerlab-dark/brand-taegeuk-mark.png") center / contain no-repeat;
}
.crest {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 8%);
}
.crest.sm { width: 28px; height: 28px; }
.login-crest {
  width: 144px;
  height: 141px;
}
.login-crest::before,
.login-crest::after { display: none; }

/* Login */
.login-view { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--page); }
.login-brand {
  border-right: 1px solid var(--line);
  background: #090e14;
}
.login-brand-title { margin-top: 24px; font-size: 43px; color: #f7f9fb; }
.login-brand-system { color: var(--accent); }
.login-rule { background: var(--accent); }
.login-tagline { color: #a6b0ba; }
.mat-hex { background: rgb(154 171 188 / 15%); }
.mat-hex i { background: #090e14; }
.mat-diag {
  width: 1px;
  background: rgb(154 171 188 / 13%);
}
.login-features {
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 74px;
  justify-content: center;
  margin: 0;
}
.login-features li {
  flex-direction: row;
  gap: 10px;
  min-width: 0;
  padding: 0 34px;
  color: #c1c9d1;
  font-size: 14px;
}
.login-features .ico { margin: 0; color: var(--accent); transform: none; }
.feature-status {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: inset 0 0 0 4px rgb(0 0 0 / 10%);
}
.feature-pin {
  position: relative;
  width: 16px;
  height: 16px;
  border: 2px solid var(--accent);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}
.feature-pin::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--accent);
}
.login-side { background: #0a0f15; }
.login-secure { display: none; }
.login-panel { width: min(568px, 100%); }
.login-panel h1 { font-size: 36px; }
.login-subtitle { color: #9aa5b0; }
.login-form { margin-top: 46px; }
.login-form input {
  min-height: 64px;
  border-color: #34414e;
  background: #111820;
}
.login-form .primary-button {
  color: #06130d;
  min-height: 66px;
  box-shadow: 0 8px 24px rgb(53 212 139 / 10%);
}
.login-row .link-button { color: var(--accent); }
.login-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 38px;
  color: #8d98a4;
}
.login-foot::before,
.login-foot::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}
.login-foot .ico { flex: 0 0 auto; }

/* Shell */
.admin-view { background: var(--page); }
.sidebar {
  padding: 18px 15px 28px;
  background: #080d13;
  border-right: 1px solid var(--line);
}
.sidebar-brand { padding: 0 5px 25px; }
.sidebar-brand-text strong { font-size: 17px; }
.sidebar-brand-text small { color: var(--accent); }
.main-nav { gap: 8px; }
.nav-item {
  position: relative;
  height: 52px;
  padding: 0 15px;
  color: #a3adb7;
  border-radius: 5px;
}
.nav-item:hover { color: #f5f7f9; background: #111922; }
.nav-item.active { color: var(--accent); background: #111a23; }
.nav-item.active::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--accent);
}
.sidebar-footer { border-color: var(--line); }
.avatar-dark { color: var(--accent); background: var(--green-bg); }
.logout-button { color: #c0c8d0; border-color: var(--line); }
.logout-button:hover { background: #131b24; }

.topbar {
  background: #090e14;
  border-color: var(--line);
}
.topbar-title p { color: #7d8996; }
.topbar-title h1 { color: #f5f7f9; font-size: 25px; }
.topbar-tools { gap: 18px; }
.date-chip { background: #0d141c; }
.account .avatar { color: var(--accent); background: var(--green-bg); }
.content { background: var(--page); }

/* Controls */
input,
textarea,
select,
.date-field,
.date-chip,
.icon-button,
.secondary-button,
.row-action,
.seg,
.pagination button {
  color: var(--ink-2);
  border-color: var(--line);
  background: #0e151d;
}
input::placeholder,
textarea::placeholder { color: #66727f; }
select option { color: var(--ink); background: #111821; }
input[type="date"] { color-scheme: dark; }
.primary-button {
  color: #07120d;
  background: var(--accent);
  border-color: var(--accent);
}
.primary-button:hover { background: #43df99; }
.secondary-button:hover,
.icon-button:hover,
.row-action:hover,
.seg:hover,
.pagination button:hover:not(:disabled) { color: var(--ink); background: #17212b; }
.seg.active,
.pagination button.active {
  color: var(--accent);
  background: var(--green-bg);
  border-color: var(--accent);
}
.link-button { color: var(--accent); }

/* Panels, tables and cards */
.panel,
.summary-card,
.mini-stat,
.preview-panel,
.detail-panel,
.modal {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--line);
  box-shadow: 0 10px 28px rgb(0 0 0 / 8%);
}
.panel-head { border-color: var(--line); }
.data-table th { color: #93a0ac; background: #0d141b; border-color: var(--line); }
.data-table td { color: #c1cad3; border-color: var(--line-soft); }
.data-table tbody tr:hover td { background: #141d26; }
.data-table tbody tr.is-active td,
.scores-table tbody tr.is-active td,
.notices-table tbody tr.is-active td { background: rgb(53 212 139 / 7%); }
.scores-table tbody tr.is-active td:first-child,
.notices-table tbody tr.is-active td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.table-foot { border-color: var(--line); }
.stat {
  min-height: 126px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 10px 28px rgb(0 0 0 / 7%);
}
.stat-icon,
.mini-stat .mini-icon,
.summary-item .mini-icon,
.mode-icon { border: 1px solid currentColor; }
.stat-foot { border-top: 1px solid var(--line-soft); padding-top: 8px; }
.summary-item + .summary-item { border-color: var(--line); }
.scores-main > .toolbar { flex-wrap: nowrap; }
.scores-main > .toolbar .date-field { flex: 0 1 208px; min-width: 186px; }
.scores-main > .toolbar .date-field input { width: 72px; }
.scores-main > .toolbar .select-field { flex: 0 1 110px; min-width: 0; }
.scores-main > .toolbar .select-field select { min-width: 0; width: 110px; padding-left: 10px; }
.scores-main > .toolbar .primary-button { padding-inline: 13px; }
.scores-main > .toolbar .secondary-button { padding-inline: 12px; }
.chart-plot .gl { border-color: #27323d; }
.chart-col .bar { background: var(--accent); opacity: .68; }
.chart-col .dot,
.chart-line-seg { background: var(--accent); }
.legend-line::before { background: var(--accent); }
.legend-bar::before { background: var(--accent); }
.mode-row { border-color: var(--line-soft); }

.pill-green { color: var(--green); background: var(--green-bg); border-color: var(--green-line); }
.pill-blue { color: var(--blue); background: var(--blue-bg); border-color: var(--blue-line); }
.pill-amber { color: var(--amber); background: var(--amber-bg); border-color: var(--amber-line); }
.pill-red { color: var(--red); background: var(--red-bg); border-color: var(--red-line); }
.pill-grey { color: #9aa5b0; background: #141c24; border-color: var(--line); }

/* Detail and preview surfaces */
.detail-panel {
  margin: calc(var(--pad) * -1) calc(var(--pad) * -1) calc(var(--pad) * -1) 0;
  background: #0d141c;
}
.detail-total { background: #0a1118; }
.detail-total strong { color: var(--accent); }
.detail-triple,
.detail-double { background: #0e151d; }
.detail-chart .chart-axis { color: #687582; }
.detail-bars i { background: var(--accent); }
.phone { background: #0b1118; border-color: #303b46; box-shadow: none; }
.phone-step { color: var(--ink-2); background: #111922; }
.phone-rule,
.preview-meta div + div { background: var(--line-soft); border-color: var(--line-soft); }
.preview-meta { border-color: var(--line); }
.push-preview { background: #0a1118; }
.provider-state { background: rgb(244 173 36 / 8%); }
.provider-state.ready { background: var(--green-bg); }
.compose-panel .compose-body { background: #0d141c; }

/* Dialog and feedback states */
.modal::backdrop { background: rgb(0 0 0 / 72%); }
.modal { box-shadow: 0 28px 90px rgb(0 0 0 / 54%); }
.modal-actions { border-color: var(--line); }
.detail-grid .detail-cell { background: #0c131a; }
.toast { background: #151e27; border: 1px solid var(--line); }
.toast.is-success { color: #dffff0; background: #0b462d; }
.toast.is-error { color: #ffe7e9; background: #5c171e; }
.load-bar::before { background: var(--accent); }

@media (max-width: 1080px) {
  .login-features { position: static !important; margin-top: 48px; }
  .detail-panel { margin: 0; border: 1px solid var(--line); border-radius: var(--r); }
  .scores-main > .toolbar { flex-wrap: wrap; }
  .scores-main > .toolbar .date-field,
  .scores-main > .toolbar .select-field { flex: 1 1 auto; }
  .scores-main > .toolbar .select-field select { width: auto; min-width: 120px; }
}

@media (max-width: 720px) {
  .sidebar { background: #080d13; }
  .sidebar-scrim { background: rgb(0 0 0 / 68%); }
  .login-brand-title { font-size: 34px; }
  .login-features li { padding: 0 18px; }
}

@media (max-width: 440px) {
  .login-crest { width: 104px; height: 102px; }
  .login-brand-title { font-size: 29px; }
  .login-features { gap: 14px 0; }
  .login-features li { flex: 1 1 40%; justify-content: center; }
}