@media screen {
  html[data-theme="dark"] {
    --sidebar-bg: #192831;
    --sidebar-hover: #314650;
    --brand-bg: #111f27;
    --bg-color: #14222c;
    --card-bg: #243640;
    --card-header-bg: #2d424d;
    --border-color: #49616b;
    --text-muted: #b5c9cf;
    --accent-red: #ed6468;
    --accent-amber: #f2c56a;
    --accent-blue: #8dcede;
    --accent-green: #69cba0;
    --shadow: 0 18px 40px rgba(2, 9, 15, .24);
  }

  html[data-theme="light"] {
    --accent-red: #ad3742;
    --accent-amber: #9c5d16;
    --accent-blue: #246b84;
    --accent-green: #1f714c;
    --border-color: #b8c8ca;
  }

  html[data-theme="dark"] body {
    background:
      radial-gradient(ellipse at 90% 9%, rgba(230, 101, 80, .18), transparent 36%),
      radial-gradient(ellipse at 18% 72%, rgba(52, 135, 156, .15), transparent 48%),
      linear-gradient(155deg, #192a35 0%, #13212b 53%, #1d2b32 100%);
  }

  html[data-theme="light"] body {
    background:
      radial-gradient(ellipse at 88% 8%, rgba(173, 55, 66, .09), transparent 36%),
      linear-gradient(150deg, #e6eeed, #f5f3ee 58%, #e6efed);
  }

  aside {
    background:
      linear-gradient(180deg, rgba(129, 54, 55, .14), transparent 210px),
      linear-gradient(180deg, var(--brand-bg), var(--sidebar-bg) 24%, var(--sidebar-bg));
    border-right-color: rgba(157, 193, 198, .35);
  }

  .brand {
    border-top-color: var(--accent-red);
    background:
      linear-gradient(110deg, rgba(225, 91, 93, .19), rgba(241, 190, 100, .05) 58%, transparent),
      var(--brand-bg);
  }

  .brand img, .okf-banner img {
    filter: drop-shadow(0 4px 13px rgba(3, 10, 15, .55));
  }

  .nav-label {
    color: #b5cbd0;
  }

  .panel-tab, .forum-link {
    transition: background .18s ease, color .18s ease, border-color .18s ease;
  }

  .panel-tab:hover, .forum-link:hover {
    background: linear-gradient(90deg, rgba(130, 199, 213, .17), rgba(130, 199, 213, .05));
  }

  .panel-tab.active {
    background: linear-gradient(90deg, rgba(235, 95, 100, .31), rgba(133, 198, 211, .11));
    border-left-color: var(--accent-amber);
    box-shadow: inset 0 1px rgba(255, 255, 255, .08);
  }

  .session-row, .profile-weekly-sidebar, #profile-active-display {
    border-color: rgba(167, 205, 207, .35);
    background: linear-gradient(140deg, rgba(19, 44, 52, .82), rgba(21, 36, 44, .68));
  }

  .okf-banner {
    min-height: 150px;
    border-color: rgba(176, 212, 213, .42);
    border-left-color: var(--accent-red);
    background-image:
      linear-gradient(90deg, rgba(7, 19, 26, .96) 0%, rgba(11, 30, 39, .81) 45%, rgba(10, 26, 33, .22) 100%),
      url('../kepek/laktanya.png');
    background-position: center, center 61%;
    box-shadow: 0 22px 48px rgba(4, 13, 19, .3), inset 0 1px rgba(255, 255, 255, .09);
  }

  .okf-banner::after {
    height: 5px;
    background: linear-gradient(90deg, var(--accent-red), var(--accent-amber) 36%, var(--accent-blue) 70%, transparent);
  }

  .okf-banner h1 {
    letter-spacing: .012em;
    text-shadow: 0 3px 16px rgba(0, 0, 0, .85);
  }

  .header-title {
    padding-bottom: 11px;
    border-bottom: 1px solid var(--border-color);
  }

  .header-title::before {
    background: linear-gradient(180deg, var(--accent-amber), var(--accent-red));
    box-shadow: 0 0 14px rgba(237, 100, 104, .33);
  }

  .card, .portal-paper, .portal-side, .portal-box, .portal-vehicle,
  .parking-map-card, .parking-box, .incident-detail, .incident-list-item,
  .history-item, .stat-card, .duty-card, .payroll-rank-panel {
    border-color: var(--border-color);
    box-shadow: var(--shadow), inset 0 1px rgba(255, 255, 255, .055);
  }

  html[data-theme="dark"] .card,
  html[data-theme="dark"] .portal-paper,
  html[data-theme="dark"] .portal-side,
  html[data-theme="dark"] .portal-box,
  html[data-theme="dark"] .parking-box,
  html[data-theme="dark"] .incident-detail,
  html[data-theme="dark"] .payroll-rank-panel {
    background: linear-gradient(155deg, #2b414b, var(--card-bg) 59%, #22343e);
  }

  .card.primary-box { border-top: 3px solid var(--accent-red); }
  .card.secondary-box { border-top: 3px solid var(--accent-blue); }
  .portal-side, .stat-card { border-top: 3px solid var(--accent-amber); }
  .portal-box, .parking-box, .payroll-rank-panel { border-top: 3px solid var(--accent-blue); }
  .incident-detail { border-top: 3px solid var(--accent-red); }

  .card-header, .portal-paper-head, .parking-map-header {
    background:
      linear-gradient(90deg, rgba(236, 99, 101, .11), transparent 35%),
      linear-gradient(90deg, var(--card-header-bg), var(--card-bg));
    border-bottom-color: var(--border-color);
  }

  .card-header h2, .portal-paper-head h3, .parking-box h3,
  .parking-map-header strong {
    letter-spacing: .025em;
  }

  .portal-news-post {
    border-left: 3px solid transparent;
    transition: background .18s ease, border-color .18s ease;
  }

  .portal-news-post:hover {
    border-left-color: var(--accent-amber);
    background: rgba(136, 202, 217, .09);
  }

  .portal-vehicle-image { border-bottom-color: var(--accent-amber); }
  .parking-map-header { border-top: 3px solid var(--accent-green); }
  .parking-map-scroll { background: #142129; }

  .incident-list-item {
    border-left: 3px solid var(--accent-blue);
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
  }

  .incident-list-item:hover {
    border-left-color: var(--accent-amber);
    background: var(--card-header-bg);
    transform: translateY(-2px);
  }

  .stat-card { border-left: 1px solid var(--border-color); }
  .stat-card-count { color: var(--accent-amber); }
  .history-item { border-left-color: var(--accent-blue); }

  .roster-table thead th, .payroll-table th {
    background: linear-gradient(180deg, #344a55, var(--card-header-bg));
    color: #e9f2f0;
  }

  html[data-theme="light"] .roster-table thead th,
  html[data-theme="light"] .payroll-table th {
    background: linear-gradient(180deg, #e7edeb, var(--card-header-bg));
    color: var(--text-main);
  }

  .roster-table tbody tr:hover, .payroll-table tbody tr:hover {
    background: rgba(129, 194, 207, .15);
  }

  .payroll-table .payroll-total { color: var(--accent-amber); }
  .badge { border-color: rgba(141, 206, 222, .45); }
  .tab.active, .stab.active { border-bottom-color: var(--accent-amber); }

  main input:not([type="checkbox"]):not([type="radio"]):focus,
  main select:focus, main textarea:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(141, 206, 222, .17);
  }

  main .btn-primary, main .btn-submit, main .btn-add, main .btn-accept {
    background: linear-gradient(135deg, #a93540, #bc454d);
    border-color: #e6867c;
    box-shadow: 0 7px 18px rgba(110, 28, 39, .23);
  }

  main .btn-primary:hover, main .btn-submit:hover,
  main .btn-add:hover, main .btn-accept:hover {
    background: linear-gradient(135deg, #ad3943, #c44750);
  }

  .account-dialog {
    border-color: rgba(242, 197, 106, .52);
    background: linear-gradient(155deg, #263741, #17252e 66%);
    box-shadow: 0 30px 85px rgba(0, 0, 0, .5);
  }

  #authGate .auth-hero > img {
    filter: saturate(.92) contrast(1.09);
  }

  #authGate .auth-shell::before {
    background:
      linear-gradient(90deg, rgba(6, 17, 24, .83), rgba(8, 20, 26, .23) 64%),
      linear-gradient(0deg, rgba(6, 17, 24, .83), transparent 62%);
  }

  #authGate .auth-masthead {
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    background: linear-gradient(90deg, rgba(9, 24, 31, .63), transparent 68%);
  }

  #authGate .auth-card {
    border-color: rgba(230, 241, 239, .34);
    border-left-color: #e65a61;
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(27, 48, 58, .94), rgba(11, 25, 33, .93));
    box-shadow: 0 28px 78px rgba(2, 8, 13, .58), inset 0 1px rgba(255, 255, 255, .08);
  }

  #authGate .auth-form-title { color: #fff; }
  #authGate .auth-body input {
    border-color: #617985;
    border-radius: 7px;
    background: rgba(4, 15, 21, .7);
  }

  #authGate .auth-body input:focus {
    outline: 2px solid rgba(141, 206, 222, .28);
    border-color: #8dcede;
  }

  #authGate .auth-btn {
    border-radius: 7px;
    background: linear-gradient(110deg, #a93540, #bc454d);
    box-shadow: 0 8px 20px rgba(93, 15, 25, .3);
  }

  #authGate .auth-btn:hover {
    background: linear-gradient(110deg, #ad3943, #c44750);
  }

  @media (max-width: 700px) {
    .okf-banner { min-height: 120px; }
    .incident-list-item:hover { transform: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .portal-news-post, .incident-list-item, .panel-tab, .forum-link { transition: none; }
  }
}