:root {
  color-scheme: dark;
  --bg: #111318;
  --sidebar: #15171d;
  --panel: #191b22;
  --panel-hover: #1d2028;
  --line: #292c35;
  --line-soft: #24262e;
  --text: #eeeff4;
  --muted: #8d909d;
  --soft: #b6b8c2;
  --lime: #c9ef74;
  --purple: #a996ff;
  --blue: #7bc9e6;
  --mono: "Cascadia Code", "Consolas", monospace;
  font-family: "Segoe UI", "Malgun Gothic", "Noto Sans KR", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 85px; }
body { min-width: 320px; margin: 0; background: var(--bg); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
::selection { color: #14160f; background: var(--lime); }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; z-index: 4; inset: 0 auto 0 0; display: flex; width: 238px; flex-direction: column; padding: 23px 15px 15px; border-right: 1px solid var(--line); background: var(--sidebar); }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 8px; }
.brand-mark { display: grid; width: 33px; height: 33px; flex: 0 0 33px; place-items: center; border-radius: 10px; background: var(--lime); color: #1a1c15; font-family: var(--mono); font-size: 16px; letter-spacing: -2px; padding-right: 2px; }
.brand-name { display: grid; gap: 3px; font-size: 15px; font-weight: 700; letter-spacing: -.3px; }
.brand-name small { color: #80838e; font-family: var(--mono); font-size: 14px; font-weight: 400; letter-spacing: 1.15px; }
.sidebar-label { margin: 43px 10px 11px; color: #777a86; font-family: var(--mono); font-size: 14px; letter-spacing: 1px; }
.side-nav { display: grid; gap: 4px; }
.side-link { display: flex; min-height: 38px; align-items: center; gap: 11px; padding: 0 11px; border: 1px solid transparent; border-radius: 6px; color: #a3a5af; font-size: 14px; transition: background .15s, color .15s; }
.side-link:hover { background: #1e2027; color: var(--text); }
.side-link.active { border-color: #34372d; background: rgba(201,239,116,.08); color: var(--lime); }
.nav-icon { width: 16px; color: currentColor; font-size: 15px; text-align: center; }
.sidebar-label-tools { margin-top: 34px; }
.quick-links { display: grid; gap: 4px; }
.quick-links a { display: flex; min-height: 36px; align-items: center; gap: 10px; padding: 0 11px; border-radius: 6px; color: #999ba6; font-size: 14px; }
.quick-links a:hover { background: #1e2027; color: var(--text); }
.quick-icon { width: 16px; color: #8f919d; font-size: 15px; text-align: center; }
.external { margin-left: auto; color: #777a86; }
.sidebar-bottom { margin-top: auto; }
.connection-card { display: flex; align-items: center; gap: 9px; padding: 11px 9px; border: 1px solid #30323b; border-radius: 7px; background: #1a1c23; }
.connection-icon { display: grid; width: 25px; height: 25px; flex: 0 0 25px; place-items: center; border: 1px solid #4a493c; border-radius: 7px; color: var(--lime); font-family: Georgia, serif; font-size: 15px; }
.connection-card div { display: grid; gap: 4px; }
.connection-card strong { font-size: 14px; font-weight: 600; }
.connection-card small { color: #858792; font-size: 14px; }
.connection-dot { width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: #e4ad55; }
.connection-card[data-connection-state="connected"] .connection-dot { background: #79c96c; }
.connection-card[data-connection-state="error"] .connection-dot { background: #e57878; }
.dashboard-connection { margin-bottom: 14px; }
.sidebar-project { display: flex; justify-content: space-between; padding: 15px 5px 0; color: #858792; font-size: 14px; }
.sidebar-project:hover { color: var(--lime); }

.main-content { min-height: 100vh; margin-left: 238px; }
.topbar { position: sticky; z-index: 3; top: 0; display: flex; height: 58px; align-items: center; justify-content: space-between; padding: 0 34px; border-bottom: 1px solid var(--line); background: rgba(17,19,24,.94); backdrop-filter: blur(12px); }
.breadcrumb { display: flex; align-items: center; gap: 10px; color: #858894; font-size: 14px; }
.breadcrumb strong { color: #e1e2e8; font-weight: 500; }
.crumb-slash { color: #575a65; }
.topbar-actions { display: flex; align-items: center; gap: 15px; }
.preview-badge { display: inline-flex; align-items: center; gap: 6px; color: #c8b487; font-size: 14px; }
.preview-badge span { width: 6px; height: 6px; border-radius: 50%; background: #d7ae5e; }
.guide-button { padding: 8px 11px; border: 1px solid #353842; border-radius: 5px; color: #d0d1d9; font-size: 14px; }
.guide-button:hover { border-color: #7a8e52; color: var(--lime); }
.guide-button span { margin-left: 5px; color: #9799a3; }
.theme-toggle { display: inline-flex; min-height: 30px; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid #353842; border-radius: 5px; background: transparent; color: #d0d1d9; cursor: pointer; font-size: 14px; }
.theme-toggle:hover { border-color: #7a8e52; color: var(--lime); }
.theme-icon { color: #e2c36e; font-size: 14px; }
.mobile-menu { display: none; }
.page-content { width: min(1120px, calc(100% - 68px)); margin: 0 auto; padding: 31px 0 22px; }
.welcome-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 21px; }
.eyebrow { margin: 0 0 7px; color: #9294a0; font-family: var(--mono); font-size: 14px; letter-spacing: 1.1px; }
h1, h2, h3, p { margin-top: 0; }
.welcome-row h1 { margin-bottom: 4px; font-size: 23px; font-weight: 650; letter-spacing: -.6px; }
.welcome-description { margin: 0; color: var(--muted); font-size: 14px; }
.server-select { display: flex; min-width: 174px; align-items: center; gap: 9px; padding: 7px 10px; border: 1px solid #30323b; border-radius: 6px; background: var(--panel); }
.server-avatar { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 6px; background: #39364e; color: #d2c8ff; font-size: 14px; font-weight: 700; }
.server-select > span:nth-child(2) { display: grid; gap: 3px; }
.server-select small { color: #7f828d; font-family: var(--mono); font-size: 14px; letter-spacing: .7px; }
.server-select strong { color: #d9dae1; font-size: 14px; font-weight: 500; }
.select-chevron { margin-left: auto; color: #7d808b; font-size: 15px; }

.preview-notice { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; padding: 11px 13px; border: 1px solid #49402b; border-radius: 6px; background: rgba(201,164,88,.055); }
.notice-icon { display: grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; border: 1px solid #8e7444; border-radius: 50%; color: #e4bd70; font-family: Georgia, serif; font-size: 14px; }
.preview-notice p { display: grid; gap: 3px; flex: 1; margin: 0; }
.preview-notice strong { color: #e4c981; font-size: 14px; font-weight: 600; }
.preview-notice p span { color: #a9a08c; font-size: 14px; line-height: 1.55; }
.preview-notice > a { flex: 0 0 auto; color: #e4c981; font-size: 14px; }
.preview-notice > a span { margin-left: 3px; }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin-bottom: 14px; }
.stat-card, .panel { border: 1px solid var(--line); border-radius: 7px; background: var(--panel); }
.stat-card { min-height: 112px; padding: 13px 14px; }
.stat-heading { display: flex; align-items: center; justify-content: space-between; color: #a7a9b3; font-size: 14px; }
.stat-icon { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 6px; font-size: 14px; }
.stat-icon.purple { background: #2e293e; color: #b9a8ff; }
.stat-icon.green { background: #29362a; color: #bde68b; }
.stat-icon.orange { background: #3a3026; color: #efbd79; }
.stat-icon.blue { background: #26363d; color: #8ad2e8; }
.stat-value { margin: 6px 0 5px; color: #e6e7ed; font-size: 21px; font-weight: 650; letter-spacing: -.6px; }
.stat-pending { font-size: 15px; letter-spacing: 0; }
.stat-caption { color: #858792; font-size: 14px; }
.pending-pill { margin-right: 4px; padding: 3px 5px; border-radius: 3px; background: rgba(211,167,81,.1); color: #d7b86f; font-size: 14px; }

.overview-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 12px; margin-bottom: 13px; }
.panel { padding: 14px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 13px; }
.panel-heading h2 { margin: 0 0 4px; font-size: 14px; font-weight: 650; }
.panel-heading p { margin: 0; color: #858792; font-size: 14px; }
.panel-period { padding: 6px 8px; border: 1px solid #343640; border-radius: 4px; color: #a8aab4; font-size: 14px; }
.panel-period span { margin-left: 7px; }
.activity-panel { min-height: 228px; }
.chart-placeholder { display: flex; height: 163px; gap: 9px; }
.chart-y-labels { display: flex; flex-direction: column; justify-content: space-between; padding: 2px 0 21px; color: #767984; font-family: var(--mono); font-size: 14px; }
.chart-area { position: relative; flex: 1; }
.chart-lines { position: absolute; inset: 0 0 20px; display: flex; flex-direction: column; justify-content: space-between; }
.chart-lines i { width: 100%; border-top: 1px dashed #30323a; }
.chart-empty { position: absolute; inset: 3px 0 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; }
.chart-empty-icon { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid #343640; border-radius: 8px; color: #9295a1; font-size: 18px; }
.chart-empty strong { color: #bdc0c9; font-size: 14px; font-weight: 500; }
.chart-empty small { color: #80838e; font-size: 14px; text-align: center; }
.chart-x-labels { position: absolute; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-between; color: #777a85; font-size: 14px; }
.status-panel { min-height: 228px; }
.more-dots { color: #888b96; font-size: 16px; letter-spacing: 1px; line-height: 10px; }
.action-row { display: flex; min-height: 48px; align-items: center; gap: 9px; border-top: 1px solid #2a2c34; }
.action-row:hover strong { color: var(--lime); }
.action-icon { display: grid; width: 27px; height: 27px; flex: 0 0 27px; place-items: center; border-radius: 6px; font-size: 14px; }
.action-icon.violet { background: #302a41; color: #b8a5ff; }
.action-icon.lime { background: #2d3626; color: #c5e790; }
.action-icon.blue { background: #26363d; color: #8ad2e8; }
.action-row > span:nth-child(2) { display: grid; gap: 4px; }
.action-row strong { color: #d6d7df; font-size: 14px; font-weight: 550; }
.action-row small { color: #858792; font-size: 14px; }
.action-row > b { margin-left: auto; color: #777a85; font-size: 14px; font-weight: 400; }

.features-panel, .commands-panel { margin-bottom: 13px; }
.text-link { color: #a7c875; font-size: 14px; }
.text-link span { margin-left: 4px; }
.feature-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.feature-item { display: flex; min-height: 77px; align-items: flex-start; gap: 9px; padding: 11px 9px; border: 1px solid #2b2e37; border-radius: 6px; background: #171920; }
.feature-icon { display: grid; width: 26px; height: 26px; flex: 0 0 26px; place-items: center; border-radius: 6px; font-size: 14px; }
.feature-icon.purple { background: #302a41; color: #b8a5ff; }
.feature-icon.green { background: #29362a; color: #bde68b; }
.feature-icon.orange { background: #3a3026; color: #efbd79; }
.feature-icon.blue { background: #26363d; color: #8ad2e8; }
.feature-item h3 { margin: 1px 0 5px; color: #d6d7df; font-size: 14px; font-weight: 600; }
.feature-item p { margin: 0; color: #858792; font-size: 14px; line-height: 1.6; }
.feature-arrow { margin-left: auto; color: #747782; font-size: 14px; }

.commands-panel .panel-heading { margin-bottom: 11px; }
.command-search { display: flex; height: 35px; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid #33353e; border-radius: 5px; background: #15171d; color: #9295a0; }
.command-search > span:first-child { font-size: 18px; line-height: 1; }
.command-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 14px; }
.command-search input::placeholder { color: #777a85; }
.command-search:focus-within { border-color: #71824a; box-shadow: 0 0 0 2px rgba(201,239,116,.07); }
.command-search kbd { padding: 2px 5px; border: 1px solid #3c3e47; border-radius: 3px; font-family: var(--mono); font-size: 14px; }
.filter-button { padding: 5px 9px; border: 1px solid #343640; border-radius: 4px; background: transparent; color: #a3a5af; cursor: pointer; font-size: 14px; }
.filter-button:hover { border-color: #5b5e69; color: var(--text); }
.filter-button.active { border-color: #75894b; background: rgba(201,239,116,.08); color: var(--lime); }
.command-filters { display: flex; flex-wrap: wrap; gap: 5px; margin: 9px 0; }
.command-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.command-card { display: flex; min-height: 48px; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid #2a2c35; border-radius: 5px; background: #171920; }
.command-card:hover { border-color: #444751; }
.command-card[hidden] { display: none; }
.command-icon { display: grid; width: 25px; height: 25px; flex: 0 0 25px; place-items: center; border-radius: 5px; background: #282a32; color: var(--lime); font-family: var(--mono); font-size: 14px; }
.command-card h3 { margin: 0 0 3px; color: #d9dae1; font-family: var(--mono); font-size: 14px; font-weight: 500; }
.command-card p { margin: 0; color: #858792; font-size: 14px; }
.command-action { min-height: 44px; margin-top: 8px; padding: 6px 10px; border: 1px solid #71824a; border-radius: 5px; background: transparent; color: var(--lime); cursor: pointer; font: inherit; }
.command-action:hover, .command-action:focus-visible { background: rgba(201,239,116,.15); outline: 2px solid var(--lime); outline-offset: 2px; }
:root[data-theme="light"] .command-action { color: #466612; border-color: #72953c; }
.command-arrow { margin-left: auto; color: #777a85; font-size: 14px; }
.no-results { grid-column: 1 / -1; margin: 0; padding: 20px 10px; color: var(--muted); text-align: center; font-size: 14px; }
.command-footnote { margin: 9px 0 0; color: #858792; font-size: 14px; }
.visually-hidden { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(0,0,0,0); white-space: nowrap; clip-path: inset(50%); }

.setup-banner { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid #3c3b32; border-radius: 7px; background: linear-gradient(110deg, rgba(201,239,116,.075), transparent 60%), #191b20; }
.setup-symbol { display: grid; width: 37px; height: 37px; flex: 0 0 37px; place-items: center; border-radius: 10px; background: var(--lime); color: #191b14; font-family: var(--mono); font-size: 18px; letter-spacing: -2px; }
.setup-banner > div:nth-child(2) { flex: 1; }
.setup-banner .eyebrow { margin-bottom: 4px; color: #afc980; font-size: 14px; }
.setup-banner h2 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.setup-banner p:not(.eyebrow) { margin: 0; color: #93959f; font-size: 14px; }
.setup-actions { display: flex; gap: 6px; }
.button { display: inline-flex; min-height: 30px; align-items: center; gap: 8px; padding: 0 9px; border: 1px solid transparent; border-radius: 4px; font-size: 14px; font-weight: 600; }
.button-light { background: var(--lime); color: #1a1c15; }
.button-light:hover { background: #d8ff87; }
.button-outline { border-color: #3b3e45; color: #d4d5dc; }
.button-outline:hover { border-color: #777b86; }
.page-footer { display: flex; justify-content: space-between; padding: 18px 1px 0; color: #777a85; font-size: 14px; }
.footer-divider { padding: 0 5px; color: #4b4d57; }
.page-footer a:hover { color: var(--lime); }
.page-footer a span { margin-left: 4px; }
.auth-label { max-width: 180px; overflow: hidden; color: #b6d681; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-login { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.dashboard-login > div { flex: 1; }
.dashboard-login h2 { margin: 0 0 4px; font-size: 14px; }
.dashboard-login p { margin: 0; color: var(--muted); font-size: 14px; }
.dashboard-status { margin: 0 0 12px; padding: 9px 11px; border: 1px solid #343640; border-radius: 5px; color: var(--soft); font-size: 14px; }
.dashboard-my-profile { margin-bottom: 14px; }
.dashboard-my-profile p { color: var(--soft); line-height: 1.6; }
.dashboard-my-profile input { padding: 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--text); font: inherit; max-width: 100%; }
#error-admin-search-form, #error-admin-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; }
#error-admin-candidates { display: block; width: min(100%, 360px); margin: 8px 0 12px; padding: 9px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--text); font: inherit; }
#owner-config-form { display: flex; flex-direction: column; align-items: stretch; }
#owner-config-form select, #owner-config-form textarea { width: 100%; padding: 9px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--text); font: inherit; }
#owner-config-form button { align-self: flex-start; }
.dashboard-status[data-state="error"] { border-color: #784b4b; background: rgba(130,53,53,.12); color: #e8a3a3; }
.live-data-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 13px; }
.live-data-grid.owner-view { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.live-data-grid > .panel { min-width: 0; }
.dashboard-filter { display: grid; gap: 5px; color: var(--soft); font-size: 14px; }
.dashboard-filter input { width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--text); font: inherit; }
.dashboard-filter-count { margin: 6px 0 8px; color: var(--muted); font-size: 14px; }
.table-scroll { overflow-x: auto; }
.members-table { width: 100%; border-collapse: collapse; text-align: left; }
.members-table th, .members-table td { padding: 8px 7px; border-bottom: 1px solid var(--line); font-size: 14px; white-space: nowrap; }
.members-table th { color: var(--muted); font-weight: 500; }
.members-table td { color: var(--soft); }
.dashboard-log-list { display: grid; max-height: 330px; gap: 0; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.dashboard-log-list li { display: grid; gap: 4px; padding: 9px 2px; border-top: 1px solid var(--line); }
.dashboard-log-list li strong { color: var(--text); font-size: 14px; }
.dashboard-log-list li span, .dashboard-log-list li small { overflow-wrap: anywhere; color: var(--muted); font-size: 14px; line-height: 1.6; }
.dashboard-settings { margin-bottom: 13px; }
.dashboard-settings form { display: flex; align-items: center; gap: 10px; }
.dashboard-settings label { color: var(--soft); font-size: 14px; }
.dashboard-settings input { width: 90px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--text); }
.dashboard-settings #announcement-form { display: flex; flex-direction: column; align-items: stretch; }
.dashboard-settings #announcement-form input, .dashboard-settings #announcement-form textarea { width: 100%; padding: 9px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--text); font: inherit; }
.dashboard-settings #announcement-form button { align-self: flex-start; }
.dashboard-settings button:disabled { opacity: .55; cursor: wait; }
.dashboard-health { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.dashboard-health h3 { margin-bottom: 6px; font-size: 16px; }
.dashboard-health p, .dashboard-health li { color: var(--soft); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.dashboard-health ul { margin: 8px 0 0; padding-left: 20px; }

@media (min-width: 1500px) {
  .page-content { padding-top: 38px; }
  .stat-card { min-height: 125px; padding: 16px; }
  .panel { padding: 17px; }
  .activity-panel, .status-panel { min-height: 245px; }
}

@media (max-width: 1080px) {
  .sidebar { width: 205px; }
  .main-content { margin-left: 205px; }
  .page-content { width: calc(100% - 44px); }
  .topbar { padding-inline: 22px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-grid { grid-template-columns: 1.3fr 1fr; }
}

@media (max-width: 700px) {
  html { scroll-padding-top: 65px; }
  .sidebar { position: relative; inset: auto; width: 100%; height: auto; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { padding: 0; }
  .brand-mark { width: 30px; height: 30px; flex-basis: 30px; }
  .sidebar-label, .quick-links, .sidebar-bottom { display: none; }
  .side-nav { display: flex; gap: 4px; overflow-x: auto; margin-top: 11px; scrollbar-width: none; }
  .side-nav::-webkit-scrollbar { display: none; }
  .side-link { flex: 0 0 auto; min-height: 44px; gap: 6px; padding-inline: 10px; font-size: 14px; }
  .nav-icon { width: auto; font-size: 14px; }
  .main-content { margin-left: 0; }
  .topbar { position: relative; min-height: 48px; height: auto; gap: 8px; padding: 8px 18px; }
  .breadcrumb { font-size: 14px; }
  .topbar-actions { flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
  .guide-button { display: none; }
  #logout-button { display: inline-flex; }
  .theme-toggle, #logout-button { min-height: 44px; }
  .dashboard-filter input, .dashboard-settings input { min-height: 44px; font-size: 16px; }
  .dashboard-login .button, .dashboard-settings .button { min-height: 44px; }
  .mobile-menu { display: none; }
  .page-content { width: calc(100% - 32px); padding-top: 23px; }
  .welcome-row { align-items: flex-start; }
  .welcome-row h1 { font-size: 21px; }
  .welcome-description { max-width: 235px; line-height: 1.6; }
  .server-select { min-width: auto; padding: 6px; }
  .server-select strong { font-size: 14px; }
  .server-avatar { width: 24px; height: 24px; }
  .select-chevron { display: none; }
  .preview-notice { align-items: flex-start; flex-wrap: wrap; }
  .preview-notice p { flex: 1 1 calc(100% - 34px); }
  .preview-notice > a { margin-left: 30px; }
  .stats-grid { gap: 8px; }
  .stat-card { min-height: 100px; padding: 10px; }
  .stat-heading { font-size: 14px; }
  .stat-icon { width: 21px; height: 21px; }
  .stat-value { font-size: 18px; }
  .stat-pending { font-size: 15px; }
  .stat-caption { font-size: 14px; }
  .overview-grid { grid-template-columns: 1fr; }
  .live-data-grid.owner-view { grid-template-columns: minmax(0, 1fr); }
  .activity-panel { min-height: 205px; }
  .chart-placeholder { height: 143px; }
  .status-panel { min-height: auto; }
  .feature-list { grid-template-columns: 1fr 1fr; }
  .feature-item { min-height: 75px; gap: 7px; padding: 9px 7px; }
  .feature-item p { font-size: 14px; }
  .command-grid { grid-template-columns: 1fr; }
  .setup-banner { align-items: flex-start; flex-wrap: wrap; }
  .setup-banner > div:nth-child(2) { min-width: calc(100% - 60px); padding-top: 2px; }
  .setup-actions { width: 100%; margin-left: 51px; }
  .dashboard-login { flex-wrap: wrap; }
  .dashboard-login > div { flex: 1 1 calc(100% - 48px); }
  .dashboard-login > a { margin-left: 38px; }
  .dashboard-settings form { align-items: flex-start; flex-wrap: wrap; }
}

@media (max-width: 380px) {
  .page-content { width: calc(100% - 24px); }
  .topbar { padding-inline: 12px; }
  .server-select small { display: none; }
  .server-select strong { max-width: 73px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .preview-badge { font-size: 14px; }
  .feature-list { grid-template-columns: 1fr; }
  .feature-item { min-height: 60px; }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #e7ebf1;
  --sidebar: #ffffff;
  --panel: #ffffff;
  --panel-hover: #edf1f6;
  --line: #aab4c2;
  --line-soft: #c9d1db;
  --text: #20232b;
  --muted: #515b6a;
  --soft: #404b5a;
  --lime: #60851d;
  --purple: #7654d6;
  --blue: #287c9b;
  background: var(--bg);
}

:root[data-theme="light"] body { background: var(--bg); color: var(--text); }
:root[data-theme="light"] ::selection { color: #fff; background: #688d27; }
:root[data-theme="light"] .sidebar { border-color: var(--line); background: var(--sidebar); }
:root[data-theme="light"] .brand-mark, :root[data-theme="light"] .setup-symbol { background: #dff0bd; color: #3e5e0b; }
:root[data-theme="light"] .brand-name { color: #242731; }
:root[data-theme="light"] .side-link { color: #626775; }
:root[data-theme="light"] .side-link:hover, :root[data-theme="light"] .quick-links a:hover { background: #f2f4f7; color: #20232b; }
:root[data-theme="light"] .side-link.active { border-color: #d9e7c2; background: #f0f7e5; color: #4f7115; }
:root[data-theme="light"] .quick-links a, :root[data-theme="light"] .quick-icon { color: #666b78; }
:root[data-theme="light"] .connection-card { border-color: #aab4c2; background: #f3f6fa; }
:root[data-theme="light"] .connection-icon { border-color: #dce5ca; color: #5a7c1c; }
:root[data-theme="light"] .connection-card strong { color: #343844; }
:root[data-theme="light"] .sidebar-project { color: #747987; }
:root[data-theme="light"] .topbar { border-color: var(--line); background: rgba(231,235,241,.96); }
:root[data-theme="light"] .breadcrumb { color: #727785; }
:root[data-theme="light"] .breadcrumb strong { color: #343844; }
:root[data-theme="light"] .guide-button, :root[data-theme="light"] .theme-toggle { border-color: #d8dce4; color: #454a57; }
:root[data-theme="light"] .guide-button:hover, :root[data-theme="light"] .theme-toggle:hover { border-color: #9ab76a; color: #4e7015; }
:root[data-theme="light"] .preview-badge { color: #8a641c; }
:root[data-theme="light"] .preview-badge span { background: #c79735; }
:root[data-theme="light"] .theme-icon { color: #636f82; }
:root[data-theme="light"] .eyebrow { color: #697180; }
:root[data-theme="light"] .welcome-description { color: #6d7280; }
:root[data-theme="light"] .server-select { border-color: var(--line); background: #fff; }
:root[data-theme="light"] .server-avatar { background: #eee9ff; color: #6548b6; }
:root[data-theme="light"] .server-select small, :root[data-theme="light"] .server-select strong { color: #696e7b; }
:root[data-theme="light"] .select-chevron { color: #777c89; }
:root[data-theme="light"] .preview-notice { border-color: #e9d8ae; background: #fff9eb; }
:root[data-theme="light"] .notice-icon { border-color: #d8bd7c; color: #88651c; }
:root[data-theme="light"] .preview-notice strong, :root[data-theme="light"] .preview-notice > a { color: #795b1e; }
:root[data-theme="light"] .preview-notice p span { color: #786e59; }
:root[data-theme="light"] .stat-card, :root[data-theme="light"] .panel { border-color: var(--line); background: var(--panel); box-shadow: 0 2px 6px rgba(34, 49, 69, .1); }
:root[data-theme="light"] .stat-heading, :root[data-theme="light"] .panel-heading p { color: var(--muted); }
:root[data-theme="light"] .stat-icon.purple, :root[data-theme="light"] .action-icon.violet, :root[data-theme="light"] .feature-icon.purple { background: #eee9ff; color: #7153c2; }
:root[data-theme="light"] .stat-icon.green, :root[data-theme="light"] .action-icon.lime, :root[data-theme="light"] .feature-icon.green { background: #edf5e3; color: #587d1d; }
:root[data-theme="light"] .stat-icon.orange, :root[data-theme="light"] .feature-icon.orange { background: #fff0dd; color: #9a601d; }
:root[data-theme="light"] .stat-icon.blue, :root[data-theme="light"] .action-icon.blue, :root[data-theme="light"] .feature-icon.blue { background: #e4f3f8; color: #28758f; }
:root[data-theme="light"] .stat-value { color: #292d37; }
:root[data-theme="light"] .stat-caption, :root[data-theme="light"] .panel-heading p { color: var(--muted); }
:root[data-theme="light"] .pending-pill { background: #fff1d2; color: #805d18; }
:root[data-theme="light"] .panel-period { border-color: #e0e3e9; color: #626775; }
:root[data-theme="light"] .chart-y-labels, :root[data-theme="light"] .chart-x-labels { color: var(--muted); }
:root[data-theme="light"] .chart-lines i { border-color: var(--line-soft); }
:root[data-theme="light"] .chart-empty-icon { border-color: #e0e3e9; color: #777d8a; }
:root[data-theme="light"] .chart-empty strong { color: #555b68; }
:root[data-theme="light"] .chart-empty small { color: var(--muted); }
:root[data-theme="light"] .more-dots, :root[data-theme="light"] .action-row > b { color: #7a7f8c; }
:root[data-theme="light"] .action-row { border-color: var(--line-soft); }
:root[data-theme="light"] .action-row strong, :root[data-theme="light"] .feature-item h3 { color: #343844; }
:root[data-theme="light"] .action-row small, :root[data-theme="light"] .feature-item p { color: var(--muted); }
:root[data-theme="light"] .action-row:hover strong { color: #4e7015; }
:root[data-theme="light"] .text-link { color: #52761a; }
:root[data-theme="light"] .feature-item, :root[data-theme="light"] .command-card { border-color: #b7c1ce; background: #f3f6fa; }
:root[data-theme="light"] .feature-arrow, :root[data-theme="light"] .command-arrow { color: #7b808d; }
:root[data-theme="light"] .command-search { border-color: #dfe2e9; background: #fff; color: #686e7c; }
:root[data-theme="light"] .command-search input { color: #292d37; }
:root[data-theme="light"] .command-search input::placeholder { color: #858a96; }
:root[data-theme="light"] .command-search:focus-within { border-color: #91ae60; box-shadow: 0 0 0 2px rgba(96,133,29,.1); }
:root[data-theme="light"] .command-search kbd, :root[data-theme="light"] .filter-button { border-color: #dfe2e9; color: #5f6471; }
:root[data-theme="light"] .filter-button:hover { border-color: #aeb3be; color: #292d37; }
:root[data-theme="light"] .filter-button.active { border-color: #a8c77a; background: #f0f7e5; color: #4f7115; }
:root[data-theme="light"] .command-icon { background: #edf2e4; color: #56771b; }
:root[data-theme="light"] .command-card h3 { color: #343844; }
:root[data-theme="light"] .command-card p, :root[data-theme="light"] .command-footnote { color: var(--muted); }
:root[data-theme="light"] .command-card:hover { border-color: #c3c9b5; }
:root[data-theme="light"] .setup-banner { border-color: #dfe8cf; background: linear-gradient(110deg, rgba(96,133,29,.08), transparent 60%), #fbfcf8; }
:root[data-theme="light"] .setup-banner .eyebrow { color: #587b1d; }
:root[data-theme="light"] .setup-banner p:not(.eyebrow) { color: #6d7280; }
:root[data-theme="light"] .button-light { background: #dff0bd; color: #3e5e0b; }
:root[data-theme="light"] .button-light:hover { background: #d2eaa4; }
:root[data-theme="light"] .button-outline { border-color: #d8dce4; color: #454a57; }
:root[data-theme="light"] .button-outline:hover { border-color: #aeb3be; }
:root[data-theme="light"] .page-footer { color: #747987; }
:root[data-theme="light"] .footer-divider { color: #a1a5af; }
:root[data-theme="light"] .auth-label { color: #52761a; }
:root[data-theme="light"] .dashboard-login h2, :root[data-theme="light"] .dashboard-log-list li strong { color: #343844; }
:root[data-theme="light"] .dashboard-login p, :root[data-theme="light"] .dashboard-log-list li span, :root[data-theme="light"] .dashboard-log-list li small { color: var(--muted); }
:root[data-theme="light"] .dashboard-status { border-color: #dfe2e9; color: #505563; }
:root[data-theme="light"] .dashboard-status[data-state="error"] { border-color: #e4c4c4; background: #fff3f3; color: #8b3c3c; }
:root[data-theme="light"] .members-table th, :root[data-theme="light"] .members-table td, :root[data-theme="light"] .dashboard-log-list li { border-color: var(--line); }
:root[data-theme="light"] .members-table th, :root[data-theme="light"] .members-table td { color: #555b68; }
:root[data-theme="light"] .dashboard-settings label { color: #505563; }
:root[data-theme="light"] .dashboard-settings input { border-color: #dfe2e9; background: #fff; color: #292d37; }
:root[data-theme="light"] .dashboard-settings #announcement-form textarea { border-color: #dfe2e9; background: #fff; color: #292d37; }
:root[data-theme="light"] .dashboard-filter { color: #505563; }
:root[data-theme="light"] .dashboard-filter input { border-color: #dfe2e9; background: #fff; color: #292d37; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Dashboard layout */
.page-content { width: min(1200px, calc(100% - 68px)); padding-bottom: 36px; }
.welcome-row { margin-bottom: 26px; }
.welcome-row h1 { font-size: 30px; letter-spacing: -.8px; }
.welcome-description { font-size: 15px; line-height: 1.6; }
.panel, .stat-card { border-radius: 12px; }
.panel { padding: 22px; }
.panel-heading { align-items: flex-start; margin-bottom: 18px; }
.panel-heading h2 { font-size: 19px; line-height: 1.4; }
.panel-heading p { line-height: 1.55; }
.panel-heading .section-kicker { margin: 0 0 6px; color: var(--muted); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; }
.button, .guide-button, .theme-toggle { min-height: 42px; border-radius: 8px; cursor: pointer; }
.button { justify-content: center; padding: 9px 14px; }
.button-outline, button.guide-button { background: transparent; }
.button-outline:hover { background: var(--panel-hover); }
.button:disabled { opacity: .6; cursor: wait; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.dashboard-my-profile input, .dashboard-my-profile select, .dashboard-my-profile textarea,
.dashboard-settings input, .dashboard-settings textarea { min-height: 44px; border-radius: 8px; }
#error-admin-search-form, #error-admin-form { gap: 10px; }
#error-admin-search-form input, #error-admin-form input { flex: 1 1 200px; min-width: 0; }
.profile-summary { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.level-progress { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.level-progress > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; color: var(--soft); font-size: 14px; }
.level-progress strong { color: var(--text); }
.level-progress progress { display: block; width: 100%; height: 9px; margin-top: 10px; accent-color: var(--lime); }
.dashboard-connection #dashboard-retry { flex-shrink: 0; min-height: 38px; }
:root[data-theme="light"] .dashboard-connection #dashboard-retry { color: var(--text); border-color: #9da5b3; }
.profile-summary-icon, .personal-icon { display: grid; flex: 0 0 auto; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(169,150,255,.13); color: var(--purple); font-size: 19px; }
.summary-label { display: block; margin-bottom: 4px; color: var(--muted); font-size: 14px; }
.dashboard-my-profile .profile-summary p { margin: 0; color: var(--text); font-size: 15px; font-weight: 600; }
.dashboard-my-profile .profile-summary #attendance-info { margin-top: 3px; color: var(--soft); font-size: 14px; font-weight: 400; }
.personal-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; align-items: start; }
.personal-card { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.personal-card-heading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.personal-card h3 { margin: 0 0 4px; color: var(--text); font-size: 16px; line-height: 1.35; }
.dashboard-my-profile .personal-card-heading p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.personal-card .button { width: 100%; }
.personal-group { margin-top: 24px; }
.personal-group-title { display: flex; align-items: baseline; gap: 10px; }
.personal-group-title h3 { margin: 0; color: var(--text); font-size: 16px; }
.personal-group-title span { color: var(--muted); font-size: 14px; }
.personal-group .personal-actions { margin-top: 12px; }
.personal-card > .button + .button, .personal-card > p:empty + .button { margin-top: 8px; }
.repay-details { margin-top: 12px; border-top: 1px solid var(--line); }
.repay-details summary { padding: 14px 0 2px; color: var(--soft); cursor: pointer; font-size: 14px; }
.repay-details summary:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.dashboard-my-profile .repay-details > p:not(:empty) { margin: 12px 0 0; color: var(--soft); font-size: 14px; overflow-wrap: anywhere; }
.repay-form { display: grid; gap: 8px; margin-top: 16px; }
.repay-form label { color: var(--soft); font-size: 14px; }
.repay-form input { width: 100%; }
.dashboard-my-profile .personal-card > p:not(:empty) { margin: 12px 0 0; color: var(--soft); font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.personal-card > p:empty, .repay-details > p:empty { display: none; }
.personal-card ul:not(:empty) { display: grid; gap: 8px; margin: 12px 0 0; padding-left: 20px; color: var(--soft); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.personal-card ul:empty { display: none; }
.personal-card .shop-buy { width: auto; margin: 8px 0 4px; display: flex; }
.personal-card { transition: border-color .15s, box-shadow .15s; }
.personal-card:hover, .personal-card:focus-within { border-color: #555b45; }
.personal-card ul:not(:empty) { list-style: none; padding: 0; }
.personal-card li { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.dashboard-my-profile .personal-card > p:not(:empty), .dashboard-my-profile .repay-details > p:not(:empty) { padding: 10px 12px; border-left: 3px solid var(--lime); border-radius: 4px; background: var(--panel); }
.server-select { min-width: 200px; border-radius: 10px; padding: 10px 12px; }
.dashboard-connection { padding: 12px 14px; border-radius: 10px; }
.side-link { min-height: 44px; border-radius: 8px; }
.dashboard-settings form, #owner-config-form { gap: 12px; }
.dashboard-settings textarea, #owner-config-form select, #error-admin-candidates { max-width: 100%; }
.activity-panel, .status-panel { min-height: 0; }
.activity-summary.chart-empty { position: static; min-height: 150px; align-items: flex-start; padding: 22px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.activity-summary.chart-empty strong { color: var(--text); font-size: 22px; font-weight: 650; }
.activity-summary.chart-empty small { color: var(--muted); text-align: left; }
.feature-list { gap: 10px; }
.feature-item { min-height: 110px; gap: 12px; padding: 15px; border-radius: 10px; }
.feature-item h3 { font-size: 15px; }
.feature-arrow { display: none; }
.command-search { height: 46px; border-radius: 8px; }
.command-filters { gap: 8px; margin: 14px 0; }
.filter-button { min-height: 40px; padding: 7px 13px; border-radius: 8px; }
.command-grid { gap: 10px; }
.command-card { align-items: flex-start; gap: 12px; min-width: 0; padding: 15px; border-radius: 10px; }
.command-card > div { min-width: 0; flex: 1; }
.command-icon { width: 36px; height: 36px; flex-basis: 36px; border-radius: 9px; font-size: 17px; }
.command-card h3 { font-size: 15px; line-height: 1.4; }
.command-card p { line-height: 1.5; }
.command-action { min-height: 40px; margin-top: 12px; border-radius: 7px; }
.command-arrow { padding: 4px 7px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: 12px; }
.command-footnote { margin-top: 14px; line-height: 1.6; }
:root[data-theme="light"] .profile-summary, :root[data-theme="light"] .level-progress, :root[data-theme="light"] .personal-card, :root[data-theme="light"] .activity-summary.chart-empty { background: #f3f6fa; }
:root[data-theme="light"] .personal-icon, :root[data-theme="light"] .profile-summary-icon { background: #eae5fb; color: #6548b6; }
:root[data-theme="light"] .personal-card:hover, :root[data-theme="light"] .personal-card:focus-within { border-color: #9bab86; }
:root[data-theme="light"] .activity-summary.chart-empty strong { color: var(--text); }
:root[data-theme="light"] .activity-summary.chart-empty small { color: var(--muted); }
@media (max-width: 1080px) {
  .page-content { width: calc(100% - 44px); }
  .personal-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .page-content { width: calc(100% - 32px); }
  .breadcrumb { flex: 0 0 auto; white-space: nowrap; }
  .breadcrumb > span { display: none; }
  .preview-badge { display: none; }
  .topbar-actions { min-width: 0; }
  .auth-label { max-width: 90px; }
  .panel { padding: 18px; }
  .welcome-row { flex-direction: column; gap: 14px; }
  .welcome-row h1 { font-size: 26px; }
  .welcome-description { max-width: none; }
  .server-select { width: 100%; padding: 10px 12px; }
  .personal-actions { grid-template-columns: 1fr; }
  .personal-card { padding: 15px; }
  .feature-list { grid-template-columns: 1fr; }
  .feature-item { min-height: 0; padding: 14px; }
  .command-grid { grid-template-columns: 1fr; }
  .command-search input, .dashboard-my-profile input, .dashboard-my-profile select { font-size: 16px; }
  .filter-button, .command-action, .personal-card .button { min-height: 44px; }
}
@media (max-width: 380px) {
  body { min-width: 0; }
  .page-content { width: calc(100% - 24px); }
  .server-select strong { max-width: none; }
  .auth-label { display: none; }
}