:root {
  color-scheme: dark;
  --bg-0: #050a18;
  --bg-1: #0a1330;
  --panel: rgba(12, 22, 52, 0.82);
  --panel-line: rgba(212, 175, 55, 0.24);
  --gold: #d4af37;
  --gold-soft: #e6c866;
  --gold-deep: #b48f1f;
  --white: #f4f6fb;
  --muted: #9aa6c4;
  --field: rgba(255, 255, 255, 0.045);
  --field-line: rgba(255, 255, 255, 0.16);
}

html {
  min-height: 100%;
  background: var(--bg-0);
  scroll-behavior: smooth;
}

body {
  color: var(--white);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(40, 80, 190, 0.28), transparent 60%),
    radial-gradient(700px 420px at 100% 0%, rgba(212, 175, 55, 0.1), transparent 60%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  background-attachment: fixed;
}

h1,
h2,
h3,
h4 {
  color: var(--gold-soft);
}

section h2,
main h2 {
  border-color: var(--gold);
}

a {
  color: var(--gold-soft);
}

a:hover {
  color: var(--gold);
}

nav a,
.back-btn,
.login-btn,
.card-btn {
  border-color: var(--panel-line);
  border-radius: 8px;
}

.card,
.panel,
.notice,
.id-card,
.modal-content,
.login-card {
  color: var(--white);
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(6px);
}

.card:hover,
.id-card:hover {
  background: rgba(16, 29, 64, 0.92);
  border-color: rgba(212, 175, 55, 0.42);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.38);
}

button,
.button,
.card-btn,
.login-btn {
  color: #0a1330;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold) 58%, var(--gold-deep));
  border: 1px solid rgba(230, 200, 102, 0.7);
  border-radius: 9px;
  font-weight: 700;
}

button:hover,
.button:hover,
.card-btn:hover,
.login-btn:hover {
  color: #0a1330;
  background: linear-gradient(135deg, #f0d77e, var(--gold));
  box-shadow: 0 8px 22px rgba(212, 175, 55, 0.22);
}

button:disabled,
.button:disabled {
  opacity: 0.55;
}

button.danger,
.danger {
  color: #fff;
  background: linear-gradient(135deg, #c73b4a, #8f1d32);
  border-color: rgba(255, 138, 138, 0.45);
}

button.danger:hover,
.danger:hover {
  color: #fff;
  background: linear-gradient(135deg, #dc5360, #a8253a);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
textarea,
select {
  color: var(--white);
  background-color: var(--field);
  border-color: var(--field-line);
  border-radius: 10px;
}

input::placeholder,
textarea::placeholder {
  color: rgba(154, 166, 196, 0.68);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--gold);
  background-color: rgba(212, 175, 55, 0.07);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
}

input[readonly] {
  color: #c4cce0;
  background-color: rgba(255, 255, 255, 0.025);
}

label {
  color: var(--white);
}

table {
  color: var(--white);
  border-color: var(--panel-line);
}

th {
  color: var(--gold-soft);
  background-color: rgba(212, 175, 55, 0.1);
}

td,
th {
  border-color: var(--panel-line);
}

tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.025);
}

footer {
  color: var(--muted);
  background: rgba(5, 10, 24, 0.78);
  border-top: 1px solid var(--panel-line);
}

hr {
  border-color: var(--panel-line);
}

::selection {
  color: #0a1330;
  background: var(--gold-soft);
}

:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 3px;
}

/* Shared MDT surface: compact, operational and consistent with Patrouilles. */
:root {
  --bg-0: #071126;
  --bg-1: #0b1732;
  --panel: rgba(12, 25, 53, 0.96);
  --panel-line: rgba(129, 151, 189, 0.24);
  --field: #101d39;
  --field-line: rgba(155, 175, 211, 0.28);
}

body {
  line-height: 1.55;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(31, 64, 133, 0.2), transparent 60%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
}

body > header:not(.command-header) {
  position: relative;
  z-index: 20;
  padding: 12px clamp(16px, 4vw, 56px);
  background: rgba(5, 12, 27, 0.96);
  border-bottom: 1px solid rgba(212, 175, 55, 0.38);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
}

body > header:not(.command-header) .brand {
  display: flex;
  align-items: center;
  gap: 15px;
  width: min(100%, 1440px);
  margin: 0 auto 10px;
}

body > header:not(.command-header) .brand-home {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: inherit;
  text-decoration: none;
  border-radius: 8px;
}

body > header:not(.command-header) .logo {
  width: 54px;
  height: 54px;
  filter: drop-shadow(0 3px 8px rgba(212, 175, 55, 0.18));
}

body > header:not(.command-header) .brand h1 {
  margin: 0;
  color: #f0cf65;
  font-size: clamp(1.12rem, 2.2vw, 1.55rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-shadow: none;
}

body > header:not(.command-header) .brand p {
  margin: 3px 0 0;
  color: #aebbd2;
  font-size: 0.84rem;
}

body > header:not(.command-header) > nav {
  display: flex;
  justify-content: flex-start;
  gap: 7px;
  width: min(100%, 1440px);
  margin: 0 auto;
}

body > header:not(.command-header) > nav a {
  min-height: 36px;
  padding: 7px 11px;
  color: #cbd5e7;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(155, 175, 211, 0.15);
  border-radius: 7px;
  font-size: 0.82rem;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

body > header:not(.command-header) > nav a:hover,
body > header:not(.command-header) > nav a:focus-visible {
  color: #f0cf65;
  background: rgba(212, 175, 55, 0.09);
  border-color: rgba(212, 175, 55, 0.45);
  transform: none;
  box-shadow: none;
}

body > header:not(.command-header) + main,
body > header:not(.command-header) ~ main {
  width: min(100% - 40px, 1440px);
  margin-inline: auto;
}

h1, h2, h3, h4 {
  text-shadow: none;
  line-height: 1.25;
}

body > header:not(.command-header) ~ main h1 {
  font-size: clamp(1.45rem, 3vw, 2rem);
}

.card,
.panel,
.notice,
.id-card,
.modal-content,
.login-card {
  background: rgba(12, 25, 53, 0.94);
  border-color: rgba(129, 151, 189, 0.24);
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.19);
  backdrop-filter: none;
}

.card:hover,
.id-card:hover {
  background: rgba(15, 30, 62, 0.98);
  border-color: rgba(212, 175, 55, 0.38);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.24);
  transform: none;
}

button,
.button,
.card-btn,
.login-btn {
  min-height: 36px;
  border-radius: 7px;
  box-shadow: none;
}

button:hover,
.button:hover,
.card-btn:hover,
.login-btn:hover {
  box-shadow: 0 3px 10px rgba(212, 175, 55, 0.16);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
textarea,
select {
  min-height: 36px;
  border-radius: 7px;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

th {
  font-weight: 700;
  text-align: left;
}

td,
th {
  padding: 9px 11px;
}

@media (max-width: 760px) {
  body > header:not(.command-header) {
    padding: 10px 14px;
  }

  body > header:not(.command-header) .brand {
    gap: 10px;
    margin-bottom: 9px;
  }

  body > header:not(.command-header) .logo {
    width: 44px;
    height: 44px;
  }

  body > header:not(.command-header) > nav {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }

  body > header:not(.command-header) > nav a {
    flex: 0 0 auto;
  }

  body > header:not(.command-header) + main,
  body > header:not(.command-header) ~ main {
    width: min(100% - 24px, 1440px);
  }

  table {
    font-size: 0.88rem;
  }

  td,
  th {
    padding: 7px 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}