:root {
  --bg: #eef3f9;
  --bg-soft: #ffffff;
  --panel: #ffffff;
  --panel-alt: #f5f8fc;
  --text: #1b2430;
  --text-soft: #5e6a7a;
  --border: #d8e2ee;
  --primary: #6ea2e5;
  --primary-dark: #4d84ca;
  --danger: #dc3545;
  --success: #1fa971;
  --warning: #e0a100;
  --info: #0ea5e9;
  --shadow: 0 18px 50px rgba(21, 41, 70, 0.10);
  --select-arrow-right: 16px;
  --select-padding-right: 48px;
  --sidebar-bg: #f5f8fc;
  --sidebar-text: #1b2430;
  --sidebar-active-bg: rgba(110, 162, 229, 0.2);
  --sidebar-active-text: #1b2430;
  --sidebar-hover-bg: rgba(110, 162, 229, 0.12);
  --button-primary-bg: #6ea2e5;
  --button-primary-text: #ffffff;
  --button-secondary-bg: transparent;
  --button-danger-bg: #dc3545;
  --button-success-bg: #1fa971;
  --input-bg: #ffffff;
  --input-border: #d8e2ee;
  --input-text: #1b2430;
  --input-placeholder: #9fb0c4;
  --input-focus: #6ea2e5;
  --table-header-bg: #f5f8fc;
  --table-header-text: #1b2430;
  --table-row-hover: rgba(110, 162, 229, 0.08);
  --calendar-selected-bg: rgba(110, 162, 229, 0.18);
  --calendar-selected-text: #1b2430;
  --calendar-marked-bg: rgba(74, 183, 129, 0.14);
  --calendar-marked-text: #1b2430;
  --ranking-card-bg: #ffffff;
  --ranking-card-text: #1b2430;
  --ranking-progress-bg: #e2e8f0;
  --online-color: #22c55e;
  --offline-color: #94a3b8;
  --accent-purple: #c4a0ff;
  --accent-purple-soft: rgba(180,140,255,0.07);
  --accent-purple-border: rgba(180,140,255,0.35);
  --accent-purple-strong: #d8b8ff;
  --accent-danger-soft: #ff8d98;
  --accent-success-soft: #7be39f;
  --accent-teal: #14b8a6;
  --accent-header-bg: #1a2433;
}

html[data-theme="dark"] {
  --bg: #0f1722;
  --bg-soft: #131c28;
  --panel: #182332;
  --panel-alt: #101927;
  --text: #e7eef7;
  --text-soft: #9fb0c4;
  --border: #243244;
  --primary: #7db1f4;
  --primary-dark: #5f98e1;
  --danger: #ff6b7a;
  --success: #39c38c;
  --warning: #f4be48;
  --info: #38bdf8;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.30);
  --sidebar-bg: #101927;
  --sidebar-text: #dbe8f7;
  --sidebar-active-bg: rgba(110, 162, 229, 0.2);
  --sidebar-active-text: #ffffff;
  --sidebar-hover-bg: rgba(110, 162, 229, 0.12);
  --button-primary-bg: #7db1f4;
  --button-primary-text: #0f1722;
  --button-secondary-bg: transparent;
  --button-danger-bg: #ff6b7a;
  --button-success-bg: #39c38c;
  --input-bg: #182332;
  --input-border: #243244;
  --input-text: #e7eef7;
  --input-placeholder: #9fb0c4;
  --input-focus: #7db1f4;
  --table-header-bg: #1a2433;
  --table-header-text: #e7eef7;
  --table-row-hover: rgba(110, 162, 229, 0.08);
  --calendar-selected-bg: rgba(110, 162, 229, 0.18);
  --calendar-selected-text: #dcecff;
  --calendar-marked-bg: rgba(74, 183, 129, 0.14);
  --calendar-marked-text: #e7eef7;
  --ranking-card-bg: #182332;
  --ranking-card-text: #e7eef7;
  --ranking-progress-bg: rgba(110, 162, 229, 0.16);
  --online-color: #22c55e;
  --offline-color: #94a3b8;
  --accent-purple: #c4a0ff;
  --accent-purple-soft: rgba(180,140,255,0.07);
  --accent-purple-border: rgba(180,140,255,0.35);
  --accent-purple-strong: #d8b8ff;
  --accent-danger-soft: #ff8d98;
  --accent-success-soft: #7be39f;
  --accent-teal: #14b8a6;
  --accent-header-bg: #1a2433;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
}

button,
input,
select {
  font: inherit;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: var(--select-padding-right);
  background-image: none !important;
}

select::-ms-expand {
  display: none;
}

.select-shell {
  position: relative;
  display: block;
  width: 100%;
}

.select-shell select {
  width: 100%;
}

.select-shell::after {
  content: "";
  position: absolute;
  right: var(--select-arrow-right);
  top: 50%;
  width: 12px;
  height: 8px;
  transform: translateY(-50%);
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%239fb0c4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 8px;
}

.hidden {
  display: none !important;
}