@media screen {
  :root {
    --radius: 12px;
    --accent-red: #cf5058;
    --accent-green: #52b587;
    --accent-blue: #7cb9ca;
    --accent-amber: #e7ae58;
    --transition: .18s ease;
  }

  html[data-theme="dark"] {
    color-scheme: dark;
    --sidebar-bg: #1a252d;
    --sidebar-hover: #2a3943;
    --brand-bg: #152028;
    --bg-color: #17222b;
    --card-bg: #23313b;
    --card-header-bg: #2a3a44;
    --text-main: #f2f5f3;
    --text-muted: #adc0c8;
    --text-label: #d0dfe2;
    --border-color: #405560;
    --input-bg: #18262f;
    --input-border: #526b75;
    --input-text: #f4f6f4;
    --preview-bg: #1c2a34;
    --preview-text: #d5e1e2;
    --btn-secondary-bg: #30414b;
    --btn-secondary-text: #e5eeed;
    --btn-secondary-border: #526671;
    --btn-secondary-hover: #3b505a;
    --tab-inactive: #b6c7cd;
    --tab-hover: #ffffff;
    --banner-bg: #24343d;
    --banner-border: #63717a;
    --nav-label-color: #a8bbc1;
    --sidebar-link: #d6e0e1;
    --shadow: 0 14px 38px rgba(5, 12, 16, .18);
    --scrollbar-bg: #1b2932;
    --scrollbar-thumb: #607782;
    --toast-bg: #263640;
    --toast-border: #536a73;
  }

  html[data-theme="light"] {
    color-scheme: light;
    --accent-red: #aa3942;
    --accent-green: #24764f;
    --accent-blue: #2e7188;
    --accent-amber: #a36620;
    --sidebar-bg: #23323b;
    --sidebar-hover: #31434e;
    --brand-bg: #18252d;
    --bg-color: #edf0ed;
    --card-bg: #fffefa;
    --card-header-bg: #f4f5f0;
    --text-main: #263139;
    --text-muted: #62727a;
    --text-label: #394b53;
    --border-color: #c6d0ce;
    --input-bg: #ffffff;
    --input-border: #aebebb;
    --input-text: #24323a;
    --preview-bg: #f4f6f2;
    --preview-text: #34464e;
    --btn-secondary-bg: #edf1ef;
    --btn-secondary-text: #2e434b;
    --btn-secondary-border: #b8c7c5;
    --btn-secondary-hover: #dfe9e6;
    --tab-inactive: #60727a;
    --tab-hover: #24343b;
    --banner-bg: #2a3942;
    --banner-border: #aab8b7;
    --nav-label-color: #b7c9ca;
    --sidebar-link: #e2eaeb;
    --shadow: 0 12px 30px rgba(29, 49, 54, .09);
    --scrollbar-bg: #e5ece8;
    --scrollbar-thumb: #a3b6b6;
    --toast-bg: #fffefa;
    --toast-border: #b9c8c4;
  }

  html[data-theme="dark"] body {
    background:
      radial-gradient(circle at 78% 4%, rgba(142, 70, 53, .15), transparent 34%),
      radial-gradient(circle at 25% 55%, rgba(58, 114, 130, .12), transparent 42%),
      var(--bg-color);
  }
  html[data-theme="light"] body {
    background: linear-gradient(140deg, #e5ede9, #f3f1eb 58%, #e8efec);
  }

  aside {
    background: linear-gradient(180deg, var(--brand-bg) 0%, var(--sidebar-bg) 23%, var(--sidebar-bg) 100%);
    border-right: 1px solid rgba(145, 177, 180, .25);
    box-shadow: 12px 0 34px rgba(4, 10, 14, .12);
  }
  .brand {
    background: linear-gradient(110deg, rgba(156, 52, 58, .19), transparent 68%), var(--brand-bg);
    border-top: 3px solid var(--accent-red);
    border-bottom: 1px solid rgba(202, 222, 219, .16);
  }
  .brand img { filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .2)); }
  .brand-name {
    color: #f4f6f2;
    font-size: 15px;
    letter-spacing: -.025em;
    white-space: nowrap;
  }
  .brand-name::after { background: var(--accent-amber); }
  .nav-label { color: var(--nav-label-color); font-family: 'Roboto', sans-serif; letter-spacing: .12em; }
  .forum-link, .panel-tab {
    color: var(--sidebar-link);
    border-radius: 0 9px 9px 0;
    font-family: 'Roboto', sans-serif;
    font-size: 13.5px;
    letter-spacing: 0;
  }
  .forum-link:hover, .panel-tab:hover {
    background: rgba(124, 185, 202, .12);
    color: #ffffff;
  }
  .panel-tab.active {
    color: #fff;
    border-left-color: var(--accent-amber);
    background: linear-gradient(90deg, rgba(207, 80, 88, .25), rgba(124, 185, 202, .1));
  }
  .nav-group { border-left-color: rgba(185, 211, 212, .2); }
  .session-row,
  .profile-weekly-sidebar,
  #profile-active-display {
    background: rgba(13, 26, 33, .38);
    border: 1px solid rgba(145, 182, 183, .27);
    border-radius: 9px;
  }
  .profile-weekly-sidebar .profile-weekly-track span {
    background: linear-gradient(90deg, var(--accent-red), var(--accent-amber));
  }
  .theme-toggle { border-color: rgba(181, 211, 211, .25); border-radius: 9px; }

  .okf-banner {
    position: relative;
    min-height: 138px;
    overflow: hidden;
    border: 1px solid rgba(207, 226, 222, .22);
    border-left: 5px solid var(--accent-red);
    border-radius: 16px;
    background-color: #263540;
    background-image:
      linear-gradient(90deg, rgba(9, 21, 28, .95) 0%, rgba(13, 28, 36, .84) 42%, rgba(14, 28, 35, .38) 100%),
      url('../kepek/laktanya.png');
    background-position: center, center 61%;
    background-size: cover;
    box-shadow: 0 20px 45px rgba(7, 15, 19, .2);
  }
  .okf-banner::before { display: none; }
  .okf-banner::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-red), var(--accent-amber) 36%, transparent 72%);
    pointer-events: none;
  }
  .okf-banner img {
    position: relative;
    z-index: 1;
    width: 74px;
    height: 74px;
    filter: drop-shadow(0 4px 11px rgba(0, 0, 0, .55));
  }
  .okf-banner-copy { position: relative; z-index: 1; }
  .okf-banner h1 {
    color: #fff;
    font-family: 'Oswald', 'Roboto', sans-serif;
    font-size: clamp(24px, 2.5vw, 34px);
    font-weight: 600;
    letter-spacing: .025em;
    line-height: 1.15;
    white-space: nowrap;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .65);
  }
  .okf-banner p { color: #e6ecea; text-shadow: 0 1px 8px #0b1519; }

  .header-title {
    color: var(--text-main);
    font-family: 'Oswald', 'Roboto', sans-serif;
    font-size: clamp(22px, 2vw, 27px);
    font-weight: 600;
    letter-spacing: .015em;
  }
  .header-title::before {
    width: 5px;
    height: 25px;
    border-radius: 3px;
    background: linear-gradient(var(--accent-amber), var(--accent-red));
  }

  .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 {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow);
  }
  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 {
    background: linear-gradient(150deg, #273741, var(--card-bg) 62%);
  }
  .card.primary-box { border-top: 3px solid var(--accent-red); }
  .card.secondary-box { border-top: 3px solid var(--accent-blue); }
  .card-header, .portal-paper-head, .parking-map-header {
    background: linear-gradient(90deg, var(--card-header-bg), var(--card-bg));
    border-bottom: 1px solid var(--border-color);
    border-radius: 11px 11px 0 0;
  }
  .card-header h2,
  .portal-paper-head h3, .portal-side h3, .portal-box h3,
  .parking-map-header strong, .parking-box h3 {
    color: var(--text-main);
    font-family: 'Oswald', 'Roboto', sans-serif;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .015em;
    text-transform: none;
  }
  .primary-box > .card-header { border-left: 0; }
  .secondary-box > .card-header { border-left: 0; }
  .portal-paper-head { border-top: 3px solid var(--accent-red); }
  .portal-side { border-top: 3px solid var(--accent-amber); }
  .portal-box { border-top: 3px solid var(--accent-blue); }
  .portal-news-post { border-bottom-color: var(--border-color); }
  .portal-news-post h3 { font-family: 'Oswald', 'Roboto', sans-serif; font-weight: 600; }
  .portal-news-post:hover { background: rgba(124, 185, 202, .055); }
  .portal-activity strong, .portal-activity-label strong { color: var(--accent-amber); }
  .portal-vehicle { overflow: hidden; }
  .portal-vehicle-copy h3 { font-family: 'Oswald', 'Roboto', sans-serif; font-size: 20px; }
  .portal-vehicle-image { border-bottom: 2px solid var(--accent-red); }
  .portal-react { border-radius: 18px; }
  .portal-react.is-on { border-color: var(--accent-amber); background: rgba(231, 174, 88, .14); }
  .parking-map-card { overflow: hidden; }
  .parking-map-scroll { background: #17232a; }
  .parking-box { border-top: 3px solid var(--accent-blue); }
  .incident-list-item:hover { background: var(--card-header-bg); border-color: var(--accent-blue); }
  .incident-detail { border-top: 3px solid var(--accent-red); }

  .incident-paper { background: #fff; color: #17202b; }

  .badge, .rank-pill, .pos-pill, .status-pill {
    border-radius: 6px;
    border-color: var(--border-color);
  }
  .badge { background: rgba(124, 185, 202, .12); color: var(--accent-blue); }
  .stat-card { border-left: 3px solid var(--accent-amber); }
  .stat-card-count { color: var(--text-main); }
  .history-item { border-left: 3px solid var(--accent-blue); }
  .readonly-note { border-radius: 9px; }
  .profile-weekly-main { border-radius: 10px; }
  .profile-weekly-main .profile-weekly-track span { background: linear-gradient(90deg, var(--accent-red), var(--accent-amber)); }

  .roster-table thead th, .payroll-table th {
    background: var(--card-header-bg);
    color: var(--text-label);
    border-bottom: 1px solid var(--border-color);
  }
  .roster-table tbody tr:nth-child(even), .payroll-table tbody tr:nth-child(even) {
    background: rgba(124, 185, 202, .045);
  }
  .roster-table tbody tr:hover, .payroll-table tbody tr:hover {
    background: rgba(124, 185, 202, .11);
  }
  .payroll-table .payroll-total { color: var(--accent-amber); }
  .payroll-paid { box-shadow: inset 3px 0 var(--accent-green); }

  .tab.active, .stab.active { color: var(--accent-amber); border-bottom-color: var(--accent-amber); }
  .tab:hover, .stab:hover { color: var(--text-main); }
  main input:not([type="checkbox"]):not([type="radio"]),
  main select, main textarea,
  .modal-card input, .modal-card select {
    border-radius: 8px;
    border-color: var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
  }
  main input:focus, main select:focus, main textarea:focus,
  .modal-card input:focus, .modal-card select:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(124, 185, 202, .17);
  }
  .incident-paper input, .incident-paper select, .incident-paper textarea {
    border-radius: 0 !important;
    border-color: #acb5be !important;
    background: #fff !important;
    color: #17202b !important;
    box-shadow: none !important;
  }
  .btn, .btn-add, .btn-sm, .icon-btn,
  .btn-accept, .btn-decline, .stop-btn,
  .payroll-extra-control button {
    border-radius: 8px;
  }
  main .btn-primary, main .btn-submit, main .btn-add,
  main .btn-accept {
    background: linear-gradient(135deg, #a73740, #c84d50);
    border-color: #d46d67;
    color: #fff;
    box-shadow: 0 5px 15px rgba(101, 20, 28, .16);
  }
  main .btn-primary:hover, main .btn-submit:hover,
  main .btn-add:hover, main .btn-accept:hover {
    background: linear-gradient(135deg, #b63e47, #d6595b);
    border-color: #e38477;
  }
  main .btn-secondary, main .icon-btn { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); }
  main .btn-secondary:hover, main .icon-btn:hover { background: var(--btn-secondary-hover); }
  .modal-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 14px; }
  .modal-card .mc-head { background: var(--card-header-bg); color: var(--text-main); }
  .toast { border-radius: 9px; }

  @media (max-width: 700px) {
    .okf-banner { min-height: 120px; padding: 14px; }
    .okf-banner img { width: 54px; height: 54px; }
    .okf-banner h1 { font-size: clamp(17px, 4.2vw, 21px); }
    .card, .portal-paper, .portal-side, .portal-box { border-radius: 10px; }
  }
  @media (max-width: 390px) {
    .okf-banner { gap: 9px; }
    .okf-banner img { width: 42px; height: 42px; }
    .okf-banner h1 { font-size: 16px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .card, .panel-tab, .forum-link, .btn { animation: none; transition: none; }
  }
}