:root {
  --dr-ink: #071827;
  --dr-text: #112433;
  --dr-muted: #607789;
  --dr-blue: #0c6f9f;
  --dr-sky: #58b9e9;
  --dr-cyan-soft: #e8f6fc;
  --dr-mint: #e7f5ef;
  --dr-lavender: #f0ecfb;
  --dr-sand: #f8f0e5;
  --dr-canvas: #f6f9fc;
  --dr-surface: #ffffff;
  --dr-line: #d8e4eb;
  --dr-success: #15745a;
  --dr-warning: #99610a;
  --dr-danger: #b33b45;
  --dr-shadow: 0 18px 50px rgb(26 75 104 / 0.09);
  --bg: var(--dr-canvas);
  --surface: var(--dr-surface);
  --card: var(--dr-surface);
  --line: var(--dr-line);
  --text: var(--dr-text);
  --muted: var(--dr-muted);
  --brand: var(--dr-blue);
  --primary: var(--dr-blue);
  --primary2: var(--dr-sky);
  --nav: #164f6f;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { background: var(--dr-canvas); }

body {
  background:
    radial-gradient(900px 480px at 100% 0, rgb(88 185 233 / 0.12), transparent 66%),
    radial-gradient(720px 420px at 0 100%, rgb(231 245 239 / 0.9), transparent 70%),
    var(--dr-canvas);
  color: var(--dr-text);
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea { font: inherit; }

button, .btn, [role="button"] {
  border-radius: 10px;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

button:not(:disabled):hover, .btn:not(:disabled):hover { transform: translateY(-1px); }

button:focus-visible, .btn:focus-visible, a:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgb(88 185 233 / 0.42);
  outline-offset: 2px;
}

.btn.primary, button.primary, .cta, [type="submit"] {
  border-color: var(--dr-blue);
  background: linear-gradient(135deg, var(--dr-blue), #178fc1);
  color: #fff;
  box-shadow: 0 8px 20px rgb(12 111 159 / 0.18);
}

.btn.primary:not(:disabled):hover, button.primary:not(:disabled):hover,
.cta:not(:disabled):hover, [type="submit"]:not(:disabled):hover {
  background: linear-gradient(135deg, #095f89, #0c7fac);
  box-shadow: 0 10px 24px rgb(12 111 159 / 0.24);
}

input, select, textarea, .field {
  border-color: #c8d8e2;
  border-radius: 10px;
  background: #fff;
  color: var(--dr-text);
}

input:hover, select:hover, textarea:hover, .field:hover { border-color: #96bdcf; }

input:focus, select:focus, textarea:focus, .field:focus-within {
  border-color: var(--dr-sky);
  box-shadow: 0 0 0 3px rgb(88 185 233 / 0.16);
}

label { color: #314d60; letter-spacing: .01em; }

.top, .appbar, header.top, .navbar, .topbar {
  border-color: var(--dr-line);
  background: rgb(255 255 255 / 0.94);
  box-shadow: 0 6px 24px rgb(7 24 39 / 0.05);
  backdrop-filter: blur(16px);
}

.side, .sidebar, aside.navigation {
  border-color: #cfe1e9;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #f1f8fb 72%, #edf7f3);
  box-shadow: var(--dr-shadow);
}

.nav button, .sidebar a, .side nav a {
  border: 1px solid transparent;
  color: #35566a;
}

.nav button:hover, .sidebar a:hover, .side nav a:hover {
  border-color: #cce6f1;
  background: #edf8fc;
  color: #095f89;
}

.nav button.active, .nav .active, .sidebar .active, .side nav .active {
  border-color: #add9e9;
  background: linear-gradient(135deg, #dff4fb, #e7f5ef);
  color: #084d70;
  box-shadow: inset 3px 0 0 var(--dr-blue);
}

.main { border-color: transparent; background: transparent; }

.card, .panel, .box, .widget, .metric, .login, .promo, .modal-content {
  border-color: var(--dr-line);
  border-radius: 16px;
  background: var(--dr-surface);
  box-shadow: var(--dr-shadow);
}

.promo {
  background: linear-gradient(145deg, #eef9fd, #fff 54%, #edf8f3);
}

.login { box-shadow: 0 24px 70px rgb(29 79 108 / 0.13); }

h1, h2, h3, h4 { color: var(--dr-text); letter-spacing: -.018em; }
.muted, .sub, .help, small { color: var(--dr-muted); }

.badge, .tag, .pill, .status {
  border-radius: 999px;
  font-weight: 750;
}

.result, .alert, .notice, .flash {
  border-radius: 12px;
}

.result.ok, .alert-success, .success {
  border-color: #b8dfd1;
  background: #eaf8f2;
  color: #155f4c;
}

.result.bad, .alert-danger, .error, .err {
  border-color: #efc3c7;
  background: #fff1f2;
  color: #9e2d38;
}

.table, .table-wrap { border-radius: 13px; }

table {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--dr-line);
  border-radius: 12px;
  background: #fff;
}

table th {
  background: #edf6fa;
  color: #34576b;
  font-size: .75rem;
  letter-spacing: .035em;
  text-transform: uppercase;
}

table td, table th { border-color: #e3ebf0; }
table tbody tr:hover { background: #f7fbfd; }

.progress { background: #dce8ee; }
.progress-bar { background: linear-gradient(90deg, var(--dr-blue), var(--dr-sky)); }

@media (max-width: 820px) {
  .side, .sidebar { border-radius: 14px; }
  .card, .panel, .box, .widget, .metric { border-radius: 14px; }
}

body.dark, body.dark-mode, html[data-theme="dark"] {
  --dr-text: #f4f9fc;
  --dr-muted: #b7cbd8;
  --dr-canvas: #07131f;
  --dr-surface: #0b2033;
  --dr-line: #2a4960;
  --bg: var(--dr-canvas);
  --surface: var(--dr-surface);
  --card: var(--dr-surface);
  --line: var(--dr-line);
  --text: var(--dr-text);
  --muted: var(--dr-muted);
  color-scheme: dark;
}

body.dark, body.dark-mode, html[data-theme="dark"] body {
  background: radial-gradient(850px 420px at 100% 0, rgb(30 112 151 / .22), transparent 68%), #07131f;
  color: var(--dr-text);
}

body.dark .top, body.dark-mode .top, html[data-theme="dark"] .top,
body.dark .appbar, body.dark-mode .appbar, html[data-theme="dark"] .appbar {
  background: rgb(8 29 45 / .94);
  border-color: var(--dr-line);
}

body.dark .side, body.dark-mode .side, html[data-theme="dark"] .side,
body.dark .sidebar, body.dark-mode .sidebar, html[data-theme="dark"] .sidebar {
  background: linear-gradient(180deg, #0a2134, #10344b);
  border-color: var(--dr-line);
}

body.dark .card, body.dark-mode .card, html[data-theme="dark"] .card,
body.dark .panel, body.dark-mode .panel, html[data-theme="dark"] .panel,
body.dark .box, body.dark-mode .box, html[data-theme="dark"] .box,
body.dark .widget, body.dark-mode .widget, html[data-theme="dark"] .widget,
body.dark .metric, body.dark-mode .metric, html[data-theme="dark"] .metric,
body.dark table, body.dark-mode table, html[data-theme="dark"] table {
  background: var(--dr-surface);
  color: var(--dr-text);
  border-color: var(--dr-line);
}

body.dark input, body.dark select, body.dark textarea,
body.dark-mode input, body.dark-mode select, body.dark-mode textarea,
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea {
  background: #0e2a40;
  color: #f4f9fc;
  border-color: #3d6078;
}

body.dark table th, body.dark-mode table th, html[data-theme="dark"] table th { background: #12354c; color: #d8e7ef; }
body.dark table tbody tr:hover, body.dark-mode table tbody tr:hover, html[data-theme="dark"] table tbody tr:hover { background: #102d43; }

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