/* Masaustu benzeri temalar (Windows 98, Mac OS 8): html[data-skin] ile app.css tokenlarini ve bilesenleri ezer. */
/* Renkler masaustu widget'inin Themes/Win98.xaml ve Mac.xaml dosyalarindan; kabartmalar Controls/Bevel.cs ile ayni
   (dis kat = 1px kenarlik, ic kat = inset golge). Temalar yalniz acik renktir (koyu sistemde de).
   Hepsi @media screen icinde: yazdirma / PDF raporlari her temada beyaz ve sade kalir. */

/* ================================================================== gorunum secici (her temada) */
@media screen {
  .skin-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 6px; }
  .skin-tile {
    position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 10px;
    text-align: left; cursor: pointer; color: var(--text); background: var(--surface);
    border: 1px solid var(--line); border-radius: 12px;
  }
  .skin-tile:hover { border-color: var(--accent); }
  .skin-tile.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
  .skin-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .skin-tile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .skin-tile-text b { font-size: 14px; }
  .skin-tile-mark {
    display: none; align-self: flex-start; align-items: center; height: 22px; padding: 0 9px; border-radius: 11px;
    background: var(--accent); color: var(--accent-text); font-size: 12px; font-weight: 600; white-space: nowrap;
  }
  .skin-tile.on .skin-tile-mark { display: inline-flex; }

  /* Kucuk pencere maketi: her tema kendi gorunusuyle, secili temadan bagimsiz cizilir */
  .skin-mock { display: grid; place-items: center; height: 116px; padding: 12px 14px; border-radius: 8px; overflow: hidden; font-size: 10px; line-height: 1.2; }
  .skin-mock span, .skin-mock i { display: block; }
  .skin-mock .sm-win { width: 100%; max-width: 176px; }
  .skin-mock .sm-bar { display: flex; align-items: center; gap: 4px; height: 16px; padding: 0 3px; }
  .skin-mock .sm-close { display: none; }
  .skin-mock .sm-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; }
  .skin-mock .sm-ctl { display: flex; gap: 2px; }
  .skin-mock .sm-ctl i { width: 10px; height: 9px; }
  .skin-mock .sm-body { display: flex; flex-direction: column; gap: 5px; padding: 7px; }
  .skin-mock .sm-field { height: 12px; }
  .skin-mock .sm-line { height: 4px; width: 82%; }
  .skin-mock .sm-line.short { width: 52%; }
  .skin-mock .sm-btn { align-self: flex-end; padding: 2px 9px; font-size: 9px; }

  .skin-mock.modern { background: #e7e9f1; font-family: "Segoe UI", system-ui, sans-serif; }
  .skin-mock.modern .sm-win { background: #fff; border: 1px solid #e3e6eb; border-radius: 9px; overflow: hidden; box-shadow: 0 4px 14px rgba(16, 18, 27, .12); }
  .skin-mock.modern .sm-bar { height: 19px; padding: 0 8px; border-bottom: 1px solid #e3e6eb; color: #1b1d22; font-weight: 600; }
  .skin-mock.modern .sm-ctl { display: none; }
  .skin-mock.modern .sm-field { border: 1px solid #e3e6eb; border-radius: 4px; }
  .skin-mock.modern .sm-line { background: #e3e6eb; border-radius: 2px; }
  .skin-mock.modern .sm-btn { background: #4f5fe8; color: #fff; border-radius: 5px; font-weight: 600; }

  .skin-mock.win98 { background: #008080; font-family: Tahoma, "Microsoft Sans Serif", "MS Sans Serif", Verdana, sans-serif; }
  .skin-mock.win98 .sm-win { background: #c0c0c0; padding: 2px; border: 1px solid; border-color: #dfdfdf #0a0a0a #0a0a0a #dfdfdf; box-shadow: inset 1px 1px #fff, inset -1px -1px #808080; }
  .skin-mock.win98 .sm-bar { background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font-weight: 700; }
  .skin-mock.win98 .sm-ctl i { background: #c0c0c0; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080; }
  .skin-mock.win98 .sm-ctl i:first-child { margin-right: 0; }
  .skin-mock.win98 .sm-field { background: #fff; box-shadow: inset 1px 1px #808080, inset 2px 2px #0a0a0a, inset -1px -1px #fff; }
  .skin-mock.win98 .sm-line { background: #808080; }
  .skin-mock.win98 .sm-btn { background: #c0c0c0; color: #000; border: 1px solid #000; box-shadow: inset 1px 1px #fff, inset -1px -1px #808080; }

  .skin-mock.mac { background: #a2a2d0; font-family: Charcoal, Chicago, Geneva, "Lucida Grande", "Segoe UI", sans-serif; }
  .skin-mock.mac .sm-win { background: #dddddd; border: 1px solid #000; box-shadow: inset 1px 1px #fff, inset -1px -1px #a0a0a0, 2px 2px 0 rgba(0, 0, 0, .5); }
  .skin-mock.mac .sm-bar { display: grid; grid-template-columns: 26px 1fr 26px; gap: 0; margin: 1px 1px 0; padding: 0 3px; background: repeating-linear-gradient(#f2f2f2 0 1px, #aaaaaa 1px 2px); border-bottom: 1px solid #8a8a8a; color: #000; font-weight: 700; }
  .skin-mock.mac .sm-close { display: block; width: 10px; height: 10px; border: 1px solid #555; background: linear-gradient(#f7f7f7, #d0d0d0); }
  .skin-mock.mac .sm-title { justify-self: center; flex: none; padding: 0 5px; background: #dddddd; }
  .skin-mock.mac .sm-ctl { justify-self: end; }
  .skin-mock.mac .sm-ctl i { width: 10px; height: 10px; border: 1px solid #555; background: linear-gradient(#f7f7f7, #d0d0d0); }
  .skin-mock.mac .sm-ctl i:first-child { display: none; }
  .skin-mock.mac .sm-field { background: #fff; border: 1px solid #555; box-shadow: inset 1px 1px #b5b5b5; }
  .skin-mock.mac .sm-line { background: #888; }
  .skin-mock.mac .sm-btn { margin: 2px; background: linear-gradient(#f7f7f7, #d0d0d0); color: #000; border: 1px solid #000; border-radius: 4px; font-weight: 700; box-shadow: 0 0 0 1px #dddddd, 0 0 0 2px #000; }

  /* Ust cubuktaki hizli secici menusu */
  .skin-menu { position: fixed; z-index: 80; min-width: 200px; padding: 4px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
  .skin-menu-title { padding: 6px 10px 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
  .skin-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 7px; background: none; color: var(--text); cursor: pointer; text-align: left; }
  .skin-menu-item:hover, .skin-menu-item:focus-visible { background: var(--surface-2); outline: none; }
  .skin-menu-item.on { font-weight: 600; }
  .skin-tick { visibility: hidden; color: var(--accent); font-weight: 700; }
  .skin-menu-item.on .skin-tick { visibility: visible; }
  .skin-swatch { width: 24px; height: 18px; flex: none; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
  .skin-swatch.modern { background: linear-gradient(135deg, #f6f7f9 50%, #4f5fe8 50%); }
  .skin-swatch.win98 { background: linear-gradient(90deg, #000080, #1084d0) top / 100% 6px no-repeat, #c0c0c0; }
  .skin-swatch.mac { background: repeating-linear-gradient(#f2f2f2 0 1px, #aaaaaa 1px 2px) top / 100% 6px no-repeat, #dddddd; }

  @media (max-width: 560px) {
    .skin-tiles { grid-template-columns: 1fr; gap: 8px; }
    .skin-tile { flex-direction: row; align-items: center; gap: 12px; padding: 8px; }
    .skin-mock { flex: none; width: 128px; height: 84px; padding: 8px; }
    .skin-mock .sm-body { padding: 5px; gap: 4px; }
    .skin-mock .sm-line.short { display: none; }
    .skin-tile-text { flex: 1; }
    .skin-tile-mark { position: absolute; top: 8px; right: 8px; height: 20px; padding: 0 7px; font-size: 11px; }
  }
}

@media screen and (prefers-color-scheme: dark) {
  .skin-mock.modern { background: #15161a; }
  .skin-mock.modern .sm-win { background: #1c1d22; border-color: #2f323a; box-shadow: 0 4px 14px rgba(0, 0, 0, .4); }
  .skin-mock.modern .sm-bar { color: #eceef2; border-color: #2f323a; }
  .skin-mock.modern .sm-field { border-color: #2f323a; }
  .skin-mock.modern .sm-line { background: #2f323a; }
  .skin-mock.modern .sm-btn { background: #7c9cff; color: #14151a; }
}

/* ================================================================== WINDOWS 98 */
@media screen {
  html[data-skin="win98"] {
    --bg: #008080;
    --surface: #c0c0c0;
    --surface-2: #d4d4d4;
    --line: #808080;
    --text: #000000;
    --muted: #404040;
    --faint: #808080;
    --accent: #000080;
    --accent-soft: #b9c4e6;
    --accent-text: #ffffff;
    --ok: #008000;
    --ok-soft: #cfe8cf;
    --warn: #9a5200;
    --warn-soft: #f2dda9;
    --danger: #c00000;
    --danger-soft: #f4d0d0;
    --shadow: none;
    --radius: 0px;
    /* Bevel.cs: dis kat kenarlik rengi (ust sol sag alt), ic kat inset golge */
    --w98-raised-b: #fff #0a0a0a #0a0a0a #fff;
    --w98-raised-s: inset 1px 1px #dfdfdf, inset -1px -1px #808080;
    --w98-window-b: #dfdfdf #0a0a0a #0a0a0a #dfdfdf;
    --w98-window-s: inset 1px 1px #fff, inset -1px -1px #808080;
    --w98-pressed-b: #0a0a0a #fff #fff #0a0a0a;
    --w98-pressed-s: inset 1px 1px #808080, inset -1px -1px #dfdfdf;
    --w98-sunken-b: #808080 #fff #fff #808080;
    --w98-sunken-s: inset 1px 1px #0a0a0a, inset -1px -1px #dfdfdf;
    --w98-soft-raised-b: #fff #808080 #808080 #fff;
    --w98-soft-sunken-b: #808080 #fff #fff #808080;
    --w98-title: linear-gradient(90deg, #000080, #1084d0);
    --w98-dither: conic-gradient(#fff 25%, #c0c0c0 0 50%, #fff 0 75%, #c0c0c0 0) 0 0 / 2px 2px;
    color-scheme: light;
  }
  @supports not selector(::-webkit-scrollbar) {
    html[data-skin="win98"] { scrollbar-color: #c0c0c0 #dfdfdf; }
  }

  html[data-skin="win98"] body {
    font: 12px/1.4 Tahoma, "Microsoft Sans Serif", "MS Sans Serif", Verdana, sans-serif;
    -webkit-font-smoothing: auto;
  }
  html[data-skin="win98"] :not(.skin-mock *),
  html[data-skin="win98"] :not(.skin-mock *)::before,
  html[data-skin="win98"] :not(.skin-mock *)::after { border-radius: 0 !important; }
  html[data-skin="win98"] ::selection { background: #000080; color: #fff; }
  html[data-skin="win98"] :is(h1, h2, h3) { letter-spacing: 0; font-weight: 700; }
  html[data-skin="win98"] h1 { font-size: 18px; }
  html[data-skin="win98"] h2 { font-size: 13px; }
  html[data-skin="win98"] h3 { font-size: 12px; }
  html[data-skin="win98"] .small { font-size: 11px; }
  html[data-skin="win98"] .link { text-decoration: underline; }

  /* ---------- kaydirma cubugu: noktali iz, kabartma tutamac ve ok dugmeleri ---------- */
  /* yalniz fare ile kullanilan ekranlarda (telefonda kaydirma cubugu yer kaplamasin) */
  @media (hover: hover) and (pointer: fine) {
    html[data-skin="win98"] ::-webkit-scrollbar { width: 16px; height: 16px; }
    html[data-skin="win98"] ::-webkit-scrollbar-track { background: var(--w98-dither); }
    html[data-skin="win98"] ::-webkit-scrollbar-thumb { background: #c0c0c0; border: 1px solid; border-color: var(--w98-window-b); box-shadow: var(--w98-window-s); }
    html[data-skin="win98"] ::-webkit-scrollbar-corner { background: #c0c0c0; }
    html[data-skin="win98"] ::-webkit-scrollbar-button:single-button {
      display: block; width: 16px; height: 16px; background-color: #c0c0c0; background-repeat: no-repeat; background-position: center;
      border: 1px solid; border-color: var(--w98-raised-b); box-shadow: var(--w98-raised-s);
    }
    html[data-skin="win98"] ::-webkit-scrollbar-button:single-button:active { border-color: #808080; box-shadow: none; }
    html[data-skin="win98"] ::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h1v1h1v1h1v1h1v1H0V3h1V2h1V1h1z'/%3E%3C/svg%3E"); }
    html[data-skin="win98"] ::-webkit-scrollbar-button:single-button:vertical:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h7v1H6v1H5v1H4v1H3V3H2V2H1V1H0z'/%3E%3C/svg%3E"); }
    html[data-skin="win98"] ::-webkit-scrollbar-button:single-button:horizontal:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h1v7H3V6H2V5H1V4H0V3h1V2h1V1h1z'/%3E%3C/svg%3E"); }
    html[data-skin="win98"] ::-webkit-scrollbar-button:single-button:horizontal:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h1v1h1v1h1v1H3v1H2v1H1v1H0z'/%3E%3C/svg%3E"); }
  }

  /* ---------- iskelet: gri arac cubugu, beyaz gezinti bolmesi, camgobegi masaustu ---------- */
  html[data-skin="win98"] .shell { grid-template-rows: 44px minmax(0, 1fr); }
  html[data-skin="win98"] .topbar { background: #c0c0c0; border-bottom: 1px solid #fff; box-shadow: inset 0 -1px #808080; gap: 10px; }
  html[data-skin="win98"] .brand { font-size: 13px; color: #000; }
  html[data-skin="win98"] .brand img { width: 24px; height: 24px; }
  html[data-skin="win98"] .org-name { color: #000; border-left: 1px solid #808080; box-shadow: inset 1px 0 #fff; }
  html[data-skin="win98"] .sync-dot { width: 10px; height: 10px; border: 1px solid; border-color: var(--w98-soft-sunken-b); }
  html[data-skin="win98"] .me .who b { font-weight: 700; }

  html[data-skin="win98"] .nav {
    background: #fff; border: 4px solid #c0c0c0; border-top-width: 2px; padding: 6px 4px 24px;
    box-shadow: inset 1px 1px #808080, inset 2px 2px #0a0a0a, inset -1px -1px #fff, inset -2px -2px #dfdfdf, 1px 0 #0a0a0a;
  }
  html[data-skin="win98"] .nav a { gap: 8px; min-height: 28px; padding: 4px 8px; color: #000; font-weight: 400; }
  html[data-skin="win98"] .nav a:hover { background: #e4e4e4; }
  html[data-skin="win98"] .nav a.on { background: #000080; color: #fff; }
  html[data-skin="win98"] .nav a.on :is(.ico, .count) { color: #fff; }
  html[data-skin="win98"] .nav .ico { color: #000; }
  html[data-skin="win98"] .nav .section { margin: 12px 8px 4px; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #808080; }
  html[data-skin="win98"] .sub-links a { min-height: 26px; padding: 3px 8px 3px 14px; font-size: 12px; }

  /* Masaustu (camgobegi) uzerindeki yazilar beyaz; uzerindeki denetimler kendi koyu yazisini korur */
  html[data-skin="win98"] :is(.main > .page-head, .main > .toolbar, .main > .legend, .main > .month-head, .main > p, .main > .muted, .main > .faint, .main > .small, .main > .empty, .main > h1, .main > h2, .main > h3, .main > .report-controls, .main > .report-tools) {
    --text: #fff; --muted: #e8e8e8; --faint: #d4d4d4; --accent: #fff; color: #fff;
  }
  html[data-skin="win98"] .main > .page-head a:not(.btn) { text-decoration: underline; }
  html[data-skin="win98"] :is(.main > .page-head, .main > .toolbar, .main > .legend, .main > .month-head, .main > .report-controls, .main > .report-tools) :is(.btn, .input, .seg, .chip, .card, .list-tabs, .filters, .stat, .tabs) {
    --text: #000; --muted: #404040; --faint: #808080; --accent: #000080;
  }

  /* ---------- pencereler: kart, ozet, proje, rapor basligi ---------- */
  html[data-skin="win98"] :is(.card, .stat, .proj-card, .report-header, .org-top, .gcard, .auth-card, .dl-card, .col, .tpl) {
    background: #c0c0c0; color: #000; border: 1px solid; border-color: var(--w98-window-b); box-shadow: var(--w98-window-s);
  }
  html[data-skin="win98"] .card { padding: 2px; }
  html[data-skin="win98"] .card.pad { padding: 12px; }
  html[data-skin="win98"] .card.flat { padding: 2px; }
  html[data-skin="win98"] :is(.card-head, .card.pad > :is(h2, h3):first-child, .modal-head, .drawer-head, .col header) {
    background: var(--w98-title); color: #fff; border-bottom: 0;
    --text: #fff; --muted: #dfe4ff; --faint: #c3cbef; --accent: #fff;
  }
  html[data-skin="win98"] :is(.card-head, .modal-head, .drawer-head, .col header) :is(.btn, .input, .chip, .seg, .list-tabs, .filters) {
    --text: #000; --muted: #404040; --faint: #808080; --accent: #000080;
  }
  html[data-skin="win98"] .card-head { min-height: 24px; padding: 3px 3px 3px 6px; gap: 6px; }
  html[data-skin="win98"] .card-head :is(h2, h3) { font-size: 12px; color: #fff; }
  html[data-skin="win98"] .card-head a:not(.btn) { color: #fff; text-decoration: underline; }
  html[data-skin="win98"] .card.pad > :is(h2, h3):first-child { margin: -10px -10px 10px; padding: 3px 6px; font-size: 12px; }
  /* Basligi bir satirda olan kartlar (baslik + baglanti / dugme) */
  html[data-skin="win98"] .card.pad > .row:first-child:has(> :is(h2, h3):first-child) {
    margin: -10px -10px 10px; padding: 3px 3px 3px 6px; min-height: 24px; gap: 6px;
    background: var(--w98-title); color: #fff; --text: #fff; --muted: #dfe4ff; --faint: #c3cbef; --accent: #fff;
  }
  html[data-skin="win98"] .card.pad > .row:first-child:has(> :is(h2, h3):first-child) > :is(h2, h3) { font-size: 12px; color: #fff; }
  html[data-skin="win98"] .card.pad > .row:first-child:has(> :is(h2, h3):first-child) a:not(.btn) { color: #fff; text-decoration: underline; }
  html[data-skin="win98"] .card.pad > .row:first-child:has(> :is(h2, h3):first-child) :is(.btn, .input, .chip, .seg, .list-tabs, .filters) { --text: #000; --muted: #404040; --faint: #808080; --accent: #000080; }
  html[data-skin="win98"] .card.pad > .row:first-child:has(> :is(h2, h3):first-child) .btn.ghost { background: #c0c0c0; border-color: var(--w98-raised-b); box-shadow: var(--w98-raised-s); }
  html[data-skin="win98"] .card > :is(.rows, .table-wrap, .occ),
  html[data-skin="win98"] .card.table-wrap > table.grid {
    background: #fff; margin: 2px; border: 1px solid; border-color: var(--w98-sunken-b); box-shadow: var(--w98-sunken-s); padding: 1px;
  }
  html[data-skin="win98"] .card.table-wrap > table.grid { width: calc(100% - 4px); }
  html[data-skin="win98"] .card .row-item { border-bottom-color: #dfdfdf; }
  html[data-skin="win98"] .card .rows .row-item:hover { background: #e4e8f4; }
  html[data-skin="win98"] .stat { padding: 8px 10px; }
  html[data-skin="win98"] .stat b { font-size: 20px; font-weight: 700; }
  html[data-skin="win98"] a.stat:hover { border-color: var(--w98-window-b); }
  html[data-skin="win98"] a.stat:active { border-color: var(--w98-pressed-b); box-shadow: var(--w98-pressed-s); }
  html[data-skin="win98"] :is(.proj-card, .gcard, .tpl):hover { border-color: var(--w98-window-b); box-shadow: var(--w98-window-s); }
  html[data-skin="win98"] .tpl:not(.static):active { border-color: var(--w98-pressed-b); box-shadow: var(--w98-pressed-s); }
  html[data-skin="win98"] .alert-card > .card-head { background: linear-gradient(90deg, #9a5200, #d08a2a); }
  html[data-skin="win98"] .dl-card.primary { background: #c0c0c0; }
  html[data-skin="win98"] .auth-card { padding: 24px; }
  html[data-skin="win98"] .auth-card::before {
    content: "HighPaw!"; display: block; margin: -22px -22px 18px; padding: 3px 6px;
    background: var(--w98-title); color: #fff; font-weight: 700;
  }
  html[data-skin="win98"] .org-box { background: #c0c0c0; border: 1px solid; border-color: var(--w98-window-b); border-left: 4px solid var(--c); box-shadow: inset -1px -1px #808080; }
  html[data-skin="win98"] .design-row { background: #c0c0c0; border: 1px solid; border-color: var(--w98-soft-raised-b); }
  html[data-skin="win98"] .occ-item { background: #c0c0c0; border: 1px solid; border-color: var(--w98-soft-raised-b); }
  html[data-skin="win98"] .occ-item.today { background: var(--warn-soft); }
  html[data-skin="win98"] .occ-item.late { background: var(--danger-soft); }
  html[data-skin="win98"] .note { background: #ffffe1; border: 1px solid #808080; }
  html[data-skin="win98"] .bubble > div { background: #fff; border: 1px solid #808080; }
  html[data-skin="win98"] .bubble.mine > div { background: #ffffe1; border-color: #808080; }
  html[data-skin="win98"] .people-pick { background: #fff; border: 1px solid; border-color: var(--w98-sunken-b); box-shadow: var(--w98-sunken-s); }
  html[data-skin="win98"] .mini-bar, html[data-skin="win98"] .stage-bar { background: #fff; border: 1px solid; border-color: var(--w98-soft-sunken-b); }
  html[data-skin="win98"] .mini-bar { height: 10px; }
  html[data-skin="win98"] .mini-bar i { background: repeating-linear-gradient(90deg, #000080 0 6px, transparent 6px 8px); margin: 1px; height: calc(100% - 2px); }

  /* ---------- dugmeler ---------- */
  html[data-skin="win98"] .btn {
    height: 28px; padding: 0 12px; background: #c0c0c0; color: #000; font-weight: 400;
    border: 1px solid; border-color: var(--w98-raised-b); box-shadow: var(--w98-raised-s);
  }
  html[data-skin="win98"] .btn:hover { background: #c0c0c0; filter: none; }
  html[data-skin="win98"] .btn:active:not(:disabled) { border-color: var(--w98-pressed-b); box-shadow: var(--w98-pressed-s); padding: 2px 11px 0 13px; }
  html[data-skin="win98"] .btn:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }
  html[data-skin="win98"] .btn:disabled { opacity: 1; color: #808080; text-shadow: 1px 1px #fff; }
  html[data-skin="win98"] .btn.primary {
    background: #c0c0c0; color: #000; font-weight: 700; border-color: #000;
    box-shadow: inset 1px 1px #fff, inset -1px -1px #0a0a0a, inset 2px 2px #dfdfdf, inset -2px -2px #808080;
  }
  html[data-skin="win98"] .btn.primary:active:not(:disabled) { border-color: #000; box-shadow: inset 1px 1px #808080, inset -1px -1px #808080; }
  html[data-skin="win98"] .btn.danger { color: #c00000; }
  html[data-skin="win98"] .btn.danger:hover { background: #c0c0c0; }
  html[data-skin="win98"] .btn.sm { height: 24px; padding: 0 8px; font-size: 11px; }
  html[data-skin="win98"] .btn.icon { width: 28px; padding: 0; }
  html[data-skin="win98"] .btn.icon.sm { width: 24px; }
  html[data-skin="win98"] .btn.icon:active:not(:disabled) { padding: 2px 0 0 2px; }
  /* Arac cubugu dugmesi: duz, ustune gelince tek kat kabartma */
  html[data-skin="win98"] .btn.ghost { background: transparent; color: #000; border-color: transparent; box-shadow: none; }
  html[data-skin="win98"] .btn.ghost:hover { background: transparent; color: #000; border-color: var(--w98-soft-raised-b); }
  html[data-skin="win98"] .btn.ghost:active:not(:disabled) { border-color: var(--w98-soft-sunken-b); box-shadow: none; }
  /* Baslik cubugunda ve masaustunde gri kutu dugme */
  html[data-skin="win98"] :is(.card-head, .modal-head, .drawer-head, .modal-foot, .col header, .main > .page-head, .main > .toolbar, .main > .month-head, .main > .report-controls, .main > .report-tools) .btn.ghost {
    background: #c0c0c0; color: #000; border-color: var(--w98-raised-b); box-shadow: var(--w98-raised-s);
  }
  html[data-skin="win98"] :is(.card-head, .modal-head, .drawer-head, .modal-foot, .col header, .main > .page-head, .main > .toolbar, .main > .month-head, .main > .report-controls, .main > .report-tools) .btn.ghost:active:not(:disabled) {
    border-color: var(--w98-pressed-b); box-shadow: var(--w98-pressed-s);
  }
  html[data-skin="win98"] :is(.modal-head, .drawer-head) .btn.icon { width: 22px; height: 20px; }
  html[data-skin="win98"] :is(.modal-head, .drawer-head) .btn.icon svg { width: 12px; height: 12px; stroke-width: 2.6; }

  /* ---------- alanlar: cokuk beyaz kutu ---------- */
  html[data-skin="win98"] :is(.input, select.input, textarea.input) {
    height: 28px; padding: 0 6px; background-color: #fff; color: #000; outline: none;
    border: 1px solid; border-color: var(--w98-sunken-b); box-shadow: var(--w98-sunken-s);
  }
  html[data-skin="win98"] textarea.input { height: auto; padding: 5px 6px; }
  html[data-skin="win98"] .input.sm { height: 24px; padding: 0 5px; font-size: 11px; }
  html[data-skin="win98"] .input:focus { border-color: var(--w98-sunken-b); box-shadow: var(--w98-sunken-s); }
  html[data-skin="win98"] .input::placeholder { color: #808080; }
  html[data-skin="win98"] .input:disabled, html[data-skin="win98"] .input[readonly] { background-color: #c0c0c0; color: #404040; }
  html[data-skin="win98"] .col-add .input { background-color: #fff; border-style: solid; }
  /* Acilir liste: sagda kabartma ok dugmesi */
  html[data-skin="win98"] select.input {
    -webkit-appearance: none; appearance: none; padding-right: 22px;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h7v1H6v1H5v1H4v1H3V3H2V2H1V1H0z'/%3E%3C/svg%3E") no-repeat right 5px center / 7px 4px,
      linear-gradient(#0a0a0a 0 0) no-repeat right 1px top 1px / 1px calc(100% - 2px),
      linear-gradient(#0a0a0a 0 0) no-repeat right 1px bottom 1px / 16px 1px,
      linear-gradient(#808080 0 0) no-repeat right 2px top 2px / 1px calc(100% - 4px),
      linear-gradient(#808080 0 0) no-repeat right 2px bottom 2px / 15px 1px,
      linear-gradient(#fff 0 0) no-repeat right 2px top 1px / 15px 1px,
      linear-gradient(#fff 0 0) no-repeat right 16px top 1px / 1px calc(100% - 3px),
      linear-gradient(#c0c0c0 0 0) no-repeat right 1px top 1px / 16px calc(100% - 2px),
      #fff;
  }
  html[data-skin="win98"] input[type="checkbox"]:not(.swatch > input) {
    -webkit-appearance: none; appearance: none; flex: none; width: 13px; height: 13px; margin: 0; cursor: pointer;
    background: #fff; border: 1px solid; border-color: var(--w98-sunken-b); box-shadow: var(--w98-sunken-s);
  }
  html[data-skin="win98"] input[type="checkbox"]:not(.swatch > input):checked {
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M6 0h1v1H6zM5 1h2v1H5zM0 2h1v1H0zM4 2h3v1H4zM0 3h2v1H0zM3 3h3v1H3zM0 4h5v1H0zM1 5h3v1H1zM2 6h1v1H2z'/%3E%3C/svg%3E") center / 7px 7px no-repeat;
  }
  html[data-skin="win98"] input[type="checkbox"]:not(.swatch > input):disabled { background-color: #c0c0c0; }
  html[data-skin="win98"] input[type="radio"]:not(.swatch > input) {
    -webkit-appearance: none; appearance: none; flex: none; width: 12px; height: 12px; margin: 0; cursor: pointer; border-radius: 50% !important;
    background: #fff; border: 1px solid; border-color: #808080 #fff #fff #808080; box-shadow: inset 1px 1px #0a0a0a;
  }
  html[data-skin="win98"] input[type="radio"]:not(.swatch > input):checked { background: radial-gradient(circle, #000 0 2px, #fff 2.5px); }

  /* ---------- sekmeler, secenek gruplari, etiketler ---------- */
  html[data-skin="win98"] .tabs { gap: 0; padding-left: 2px; border-bottom: 1px solid #fff; overflow-y: hidden; }
  html[data-skin="win98"] .tabs a {
    margin: 2px 0 0; padding: 4px 12px 3px; background: #c0c0c0; color: #000; font-weight: 400;
    border: 1px solid; border-color: #fff #0a0a0a transparent #fff; border-bottom: 0; box-shadow: inset 1px 1px #dfdfdf, inset -1px 0 #808080;
  }
  html[data-skin="win98"] .tabs a:hover { color: #000; }
  html[data-skin="win98"] .tabs a.on { position: relative; margin: 0 -2px -1px; padding: 5px 14px 5px; z-index: 1; color: #000; }
  html[data-skin="win98"] .seg { gap: 0; border: 0; background: none; overflow: visible; }
  html[data-skin="win98"] .seg > :is(button, a, label) {
    padding: 4px 10px; background: #c0c0c0; color: #000;
    border: 1px solid; border-color: var(--w98-raised-b) !important; box-shadow: var(--w98-raised-s);
  }
  html[data-skin="win98"] .seg > :is(.on, label:has(input:checked)) {
    background: var(--w98-dither); color: #000; font-weight: 700;
    border-color: var(--w98-pressed-b) !important; box-shadow: var(--w98-pressed-s);
  }
  html[data-skin="win98"] .chip { height: 18px; padding: 0 6px; font-size: 11px; font-weight: 400; border: 1px solid; border-color: var(--w98-soft-sunken-b); }
  html[data-skin="win98"] .chip[style*="--chip"] { background: color-mix(in srgb, var(--chip) 28%, #fff); color: #000; }
  html[data-skin="win98"] .list-tabs { padding: 2px 0; }
  html[data-skin="win98"] .list-tabs button {
    padding: 3px 9px; background: #c0c0c0; color: #000; font-weight: 400;
    border: 1px solid; border-color: var(--w98-raised-b); box-shadow: var(--w98-raised-s);
  }
  html[data-skin="win98"] .list-tabs button.on { background: var(--w98-dither); font-weight: 700; border-color: var(--w98-pressed-b); box-shadow: var(--w98-pressed-s); }
  html[data-skin="win98"] .filters button { color: #000; padding: 3px 9px; border: 1px solid transparent; }
  html[data-skin="win98"] .filters button:hover { border-color: var(--w98-soft-raised-b); }
  html[data-skin="win98"] .filters button.on { background: var(--w98-dither); color: #000; font-weight: 700; border-color: var(--w98-soft-sunken-b); }
  /* Gorev kutusu: klasik onay kutusu */
  html[data-skin="win98"] .status-btn {
    width: 16px; height: 16px; background: #fff; color: #000; font-size: 10px; font-weight: 700;
    border: 1px solid; border-color: var(--w98-sunken-b); box-shadow: var(--w98-sunken-s);
  }
  html[data-skin="win98"] .status-btn:hover:not(:disabled) { color: #000; border-color: var(--w98-sunken-b); }
  html[data-skin="win98"] .status-btn.pending, html[data-skin="win98"] .status-btn.pending:hover:not(:disabled) { color: var(--warn); }
  html[data-skin="win98"] .status-btn:disabled { opacity: 1; background: #c0c0c0; color: #808080; }

  /* ---------- tablolar: liste gorunumu ---------- */
  html[data-skin="win98"] table.grid { background: #fff; }
  html[data-skin="win98"] table.grid th {
    padding: 4px 8px; background: #c0c0c0; color: #000; font-size: 11px; font-weight: 400; border-bottom: 0;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  }
  html[data-skin="win98"] table.grid td { border-bottom-color: #dfdfdf; }
  html[data-skin="win98"] table.grid tr.click:hover td { background: #e4e8f4; }

  /* ---------- pano: her sutun bir pencere ---------- */
  html[data-skin="win98"] .col { padding: 2px; }
  html[data-skin="win98"] .col header { padding: 3px 4px 3px 6px; margin-bottom: 2px; }
  html[data-skin="win98"] .col header i { box-shadow: 0 0 0 1px #fff; }
  html[data-skin="win98"] .col header .count { color: #fff; }
  html[data-skin="win98"] .col-body { margin: 0 2px 2px; padding: 4px; gap: 4px; background: #fff; border: 1px solid; border-color: var(--w98-sunken-b); box-shadow: var(--w98-sunken-s); }
  html[data-skin="win98"] .col-body.drop-here { background: var(--w98-dither); }
  html[data-skin="win98"] .col-add { padding: 2px 2px 2px; }
  html[data-skin="win98"] .kcard {
    padding: 8px; background: #c0c0c0; color: #000; border: 1px solid; border-color: var(--w98-raised-b); box-shadow: var(--w98-raised-s);
  }
  html[data-skin="win98"] .kcard:hover { border-color: var(--w98-raised-b); }
  html[data-skin="win98"] .kcard.pending { border-left: 3px solid var(--warn); }
  html[data-skin="win98"] .kcard-img { width: calc(100% + 12px); margin: -6px -6px 8px; border: 1px solid; border-color: var(--w98-soft-sunken-b); }

  /* ---------- takvim ---------- */
  html[data-skin="win98"] .month-grid { background: #c0c0c0; border: 1px solid; border-color: var(--w98-sunken-b); box-shadow: var(--w98-sunken-s); padding: 1px; gap: 1px; }
  html[data-skin="win98"] .dow { background: #c0c0c0; color: #000; font-weight: 400; box-shadow: inset -1px -1px #808080, inset 1px 1px #fff; }
  html[data-skin="win98"] .day { background: #fff; }
  html[data-skin="win98"] .day.other { background: #dfdfdf; opacity: 1; color: #808080; }
  html[data-skin="win98"] .day.today .dnum { background: #000080; color: #fff; }

  /* ---------- pencere (modal) ve cekmece ---------- */
  html[data-skin="win98"] :is(.modal, .drawer) {
    background: #c0c0c0; color: #000; padding: 2px; border: 1px solid; border-color: var(--w98-window-b); box-shadow: var(--w98-window-s);
  }
  html[data-skin="win98"] :is(.modal-head, .drawer-head) { min-height: 26px; padding: 3px 3px 3px 6px; gap: 6px; }
  html[data-skin="win98"] :is(.modal-head, .drawer-head) :is(h2, h3) { font-size: 12px; color: #fff; }
  html[data-skin="win98"] .modal-foot { background: #c0c0c0; }
  html[data-skin="win98"] .drawer-body { background: #c0c0c0; }
  html[data-skin="win98"] .mention-pop { background: #c0c0c0; border: 1px solid; border-color: var(--w98-window-b); box-shadow: var(--w98-window-s); }
  html[data-skin="win98"] :is(.mention-row:hover, .mention-row.on) { background: #000080; color: #fff; --text: #fff; --muted: #dfe4ff; --faint: #c3cbef; }

  /* ---------- bildirim: sari ipucu kutusu ---------- */
  html[data-skin="win98"] #toast { padding: 6px 10px; background: #ffffe1; color: #000; border: 1px solid #000; box-shadow: none; font-size: 12px; }
  html[data-skin="win98"] #toast.err { background: #c00000; color: #fff; }

  /* ---------- gorunum secici ---------- */
  html[data-skin="win98"] .skin-tile { background: #c0c0c0; color: #000; border: 1px solid; border-color: var(--w98-raised-b); box-shadow: var(--w98-raised-s); }
  html[data-skin="win98"] .skin-tile:hover { border-color: var(--w98-raised-b); }
  html[data-skin="win98"] .skin-tile.on { border-color: var(--w98-pressed-b); box-shadow: var(--w98-pressed-s); background: #c8c8c8; }
  html[data-skin="win98"] .skin-tile:focus-visible { outline: 1px dotted #000; outline-offset: -6px; }
  html[data-skin="win98"] .skin-tile-mark { background: #000080; color: #fff; font-weight: 700; }
  html[data-skin="win98"] .skin-menu { padding: 2px; background: #c0c0c0; color: #000; border: 1px solid; border-color: var(--w98-window-b); box-shadow: var(--w98-window-s); }
  html[data-skin="win98"] .skin-menu-title { color: #404040; font-weight: 700; margin: 0 2px 2px; border-bottom: 1px solid #808080; box-shadow: 0 1px #fff; }
  html[data-skin="win98"] .skin-menu-item { min-height: 30px; color: #000; }
  html[data-skin="win98"] :is(.skin-menu-item:hover, .skin-menu-item:focus-visible) { background: #000080; color: #fff; }
  html[data-skin="win98"] :is(.skin-menu-item:hover, .skin-menu-item:focus-visible) .skin-tick { color: #fff; }
  html[data-skin="win98"] .skin-tick { color: #000; }

  /* ---------- telefon: gorev cubugu, buyuk dokunma alanlari ---------- */
  @media (max-width: 860px) {
    html[data-skin="win98"] .shell { grid-template-rows: 48px minmax(0, 1fr) auto; }
    html[data-skin="win98"] .nav { border-top-width: 4px; box-shadow: inset 1px 1px #808080, inset 2px 2px #0a0a0a, inset -1px -1px #fff, inset -2px -2px #dfdfdf, 1px 0 #0a0a0a; }
    html[data-skin="win98"] .bottom-nav { gap: 3px; padding: 4px 3px calc(4px + env(safe-area-inset-bottom)); background: #c0c0c0; border-top: 0; box-shadow: inset 0 1px #dfdfdf, inset 0 2px #fff; }
    html[data-skin="win98"] .bottom-nav > * { color: #000; background: #c0c0c0; border: 1px solid; border-color: var(--w98-raised-b); box-shadow: var(--w98-raised-s); }
    html[data-skin="win98"] .bottom-nav > .on { color: #000; font-weight: 700; background: var(--w98-dither); border-color: var(--w98-pressed-b); box-shadow: var(--w98-pressed-s); }
    html[data-skin="win98"] .bottom-nav i { background: #000080; color: #fff; }
    html[data-skin="win98"] .btn { height: 34px; }
    html[data-skin="win98"] .btn.sm { height: 30px; }
    html[data-skin="win98"] .btn.icon { width: 34px; }
    html[data-skin="win98"] .btn.icon.sm { width: 30px; }
    html[data-skin="win98"] :is(.modal-head, .drawer-head) .btn.icon { width: 30px; height: 28px; }
    html[data-skin="win98"] :is(.input, select.input) { height: 36px; font-size: 14px; }
    html[data-skin="win98"] textarea.input { height: auto; font-size: 14px; }
    html[data-skin="win98"] .input.sm { height: 30px; }
    html[data-skin="win98"] .status-btn { width: 20px; height: 20px; }
    html[data-skin="win98"] .modal { padding-bottom: calc(2px + env(safe-area-inset-bottom)); }
  }
}

/* ================================================================== MAC OS 8 "PLATINUM" */
@media screen {
  html[data-skin="mac"] {
    --bg: #a2a2d0;
    --surface: #dddddd;
    --surface-2: #e9e9e9;
    --line: #888888;
    --text: #000000;
    --muted: #444444;
    --faint: #7a7a7a;
    --accent: #33339a;
    --accent-soft: #ccccff;
    --accent-text: #ffffff;
    --ok: #1f7a1f;
    --ok-soft: #d6ebd6;
    --warn: #9a5b00;
    --warn-soft: #f3e1b5;
    --danger: #b00000;
    --danger-soft: #f3d2d2;
    --shadow: 2px 2px 0 rgba(0, 0, 0, .5);
    --radius: 2px;
    --mac-raised: inset 1px 1px #fff, inset -1px -1px #a0a0a0;
    --mac-fill: linear-gradient(#f7f7f7, #d0d0d0);
    --mac-fill-pressed: linear-gradient(#8e8e8e, #b5b5b5);
    --mac-stripes: repeating-linear-gradient(#f2f2f2 0 1px, #aaaaaa 1px 2px);
    --mac-drop: 2px 2px 0 rgba(0, 0, 0, .45);
    color-scheme: light;
  }
  @supports not selector(::-webkit-scrollbar) {
    html[data-skin="mac"] { scrollbar-color: #bbbbdd #cfcfcf; }
  }

  html[data-skin="mac"] body {
    font: 13px/1.4 Charcoal, Chicago, Geneva, "Lucida Grande", "Segoe UI", sans-serif;
  }
  html[data-skin="mac"] :not(.skin-mock *),
  html[data-skin="mac"] :not(.skin-mock *)::before,
  html[data-skin="mac"] :not(.skin-mock *)::after { border-radius: 2px !important; }
  html[data-skin="mac"] :is(.av, .sync-dot, .stage-dot, .loading span, .dot-badge, .col header i, .bottom-nav i, .img-del) { border-radius: 50% !important; }
  html[data-skin="mac"] ::selection { background: #ccccff; color: #000; }
  html[data-skin="mac"] :is(h1, h2, h3) { letter-spacing: 0; font-weight: 700; }
  html[data-skin="mac"] h1 { font-size: 19px; }
  html[data-skin="mac"] h2 { font-size: 14px; }

  /* ---------- kaydirma cubugu: platin iz, lavanta tutamac ---------- */
  /* yalniz fare ile kullanilan ekranlarda (telefonda kaydirma cubugu yer kaplamasin) */
  @media (hover: hover) and (pointer: fine) {
    html[data-skin="mac"] ::-webkit-scrollbar { width: 15px; height: 15px; }
    html[data-skin="mac"] ::-webkit-scrollbar-track { background: #cfcfcf; box-shadow: inset 1px 1px #9a9a9a; }
    html[data-skin="mac"] ::-webkit-scrollbar-thumb {
      border: 1px solid #444; box-shadow: var(--mac-raised);
      background: linear-gradient(#55557a 0 0) no-repeat center calc(50% - 3px) / 7px 1px, linear-gradient(#55557a 0 0) no-repeat center / 7px 1px,
        linear-gradient(#55557a 0 0) no-repeat center calc(50% + 3px) / 7px 1px, #bbbbdd;
    }
    html[data-skin="mac"] ::-webkit-scrollbar-thumb:horizontal {
      background: linear-gradient(#55557a 0 0) no-repeat calc(50% - 3px) center / 1px 7px, linear-gradient(#55557a 0 0) no-repeat center / 1px 7px,
        linear-gradient(#55557a 0 0) no-repeat calc(50% + 3px) center / 1px 7px, #bbbbdd;
    }
    html[data-skin="mac"] ::-webkit-scrollbar-corner { background: #dddddd; }
    html[data-skin="mac"] ::-webkit-scrollbar-button:single-button {
      display: block; width: 15px; height: 15px; background-color: #dddddd; background-repeat: no-repeat; background-position: center;
      border: 1px solid #555; box-shadow: var(--mac-raised);
    }
    html[data-skin="mac"] ::-webkit-scrollbar-button:single-button:active { background-color: #9a9a9a; box-shadow: inset 1px 1px #777; }
    html[data-skin="mac"] ::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h1v1h1v1h1v1h1v1H0V3h1V2h1V1h1z'/%3E%3C/svg%3E"); }
    html[data-skin="mac"] ::-webkit-scrollbar-button:single-button:vertical:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h7v1H6v1H5v1H4v1H3V3H2V2H1V1H0z'/%3E%3C/svg%3E"); }
    html[data-skin="mac"] ::-webkit-scrollbar-button:single-button:horizontal:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h1v7H3V6H2V5H1V4H0V3h1V2h1V1h1z'/%3E%3C/svg%3E"); }
    html[data-skin="mac"] ::-webkit-scrollbar-button:single-button:horizontal:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h1v1h1v1h1v1H3v1H2v1H1v1H0z'/%3E%3C/svg%3E"); }
  }

  /* ---------- iskelet: menu cubugu, platin kenar cubugu, masaustu ---------- */
  html[data-skin="mac"] .shell { grid-template-rows: 42px minmax(0, 1fr); }
  html[data-skin="mac"] .topbar { background: linear-gradient(#f4f4f4, #d9d9d9); border-bottom: 1px solid #000; box-shadow: inset 0 1px #fff; }
  html[data-skin="mac"] .brand { font-size: 14px; color: #000; }
  html[data-skin="mac"] .brand img { width: 24px; height: 24px; }
  html[data-skin="mac"] .org-name { color: #000; border-left-color: #888; }
  html[data-skin="mac"] .topbar .btn.ghost { color: #000; }
  html[data-skin="mac"] .topbar .btn.ghost:hover { background: #33339a; color: #fff; border-color: transparent; }

  html[data-skin="mac"] .nav { background: #eeeeee; border-right: 1px solid #000; box-shadow: inset -1px 0 #a0a0a0, inset 1px 0 #fff; }
  html[data-skin="mac"] .nav a { min-height: 30px; padding: 5px 10px; color: #000; font-weight: 400; }
  html[data-skin="mac"] .nav a:hover { background: #e0e0ec; }
  html[data-skin="mac"] .nav a.on { background: #ccccff; box-shadow: inset 0 0 0 1px #9999cc; }
  html[data-skin="mac"] .nav .ico { color: #333; }
  html[data-skin="mac"] .nav .section { color: #666; letter-spacing: .04em; }
  html[data-skin="mac"] .sub-links a { min-height: 28px; }

  /* Masaustu uzerindeki yazilar: daha koyu, okunakli */
  html[data-skin="mac"] :is(.main > .page-head, .main > .toolbar, .main > .legend, .main > .month-head, .main > p, .main > .muted, .main > .faint, .main > .small, .main > .empty, .main > .report-controls, .main > .report-tools) {
    --muted: #1e1e3a; --faint: #2e2e4e; --accent: #14145a;
  }
  html[data-skin="mac"] :is(.main > .page-head, .main > .toolbar, .main > .legend, .main > .month-head, .main > .report-controls, .main > .report-tools) :is(.btn, .input, .seg, .chip, .card, .list-tabs, .filters, .stat, .tabs) {
    --muted: #444444; --faint: #7a7a7a; --accent: #33339a;
  }

  /* ---------- pencereler ---------- */
  html[data-skin="mac"] :is(.card, .stat, .proj-card, .report-header, .org-top, .gcard, .auth-card, .dl-card, .col, .tpl) {
    background: #dddddd; color: #000; border: 1px solid #000; box-shadow: var(--mac-raised), var(--mac-drop);
  }
  html[data-skin="mac"] .card { padding: 1px; }
  html[data-skin="mac"] .card.pad { padding: 12px 14px; }
  html[data-skin="mac"] .card.flat { padding: 1px; }
  /* Cizgili baslik cubugu; yazilar cizgileri kesen platin plaka uzerinde */
  html[data-skin="mac"] :is(.card-head, .modal-head, .drawer-head, .col header) {
    background: var(--mac-stripes); border-bottom: 1px solid #8a8a8a; color: #000;
  }
  html[data-skin="mac"] .card-head { min-height: 24px; padding: 3px 6px; gap: 6px; }
  html[data-skin="mac"] :is(.card-head, .col header, .drawer-head) > :is(h2, h3, b, a:not(.btn), .link, .muted, .faint, .small, .ico, .count, span:not([class])),
  html[data-skin="mac"] :is(.card-head, .col header, .drawer-head) > .grow:not(:empty) {
    background-color: #dddddd; padding: 0 6px;
  }
  html[data-skin="mac"] :is(.card-head, .drawer-head) > .grow:not(:empty) { flex: 0 1 auto; margin-right: auto; }
  html[data-skin="mac"] .card-head :is(h2, h3) { font-size: 13px; }
  html[data-skin="mac"] .card-head > h2:only-child { margin: 0 auto; }
  html[data-skin="mac"] .card.pad > :is(h2, h3):first-child {
    display: flex; align-items: center; gap: 6px; margin: -12px -14px 12px; padding: 3px 6px;
    background: #dddddd; border-bottom: 1px solid #8a8a8a; font-size: 13px;
  }
  html[data-skin="mac"] .card.pad > :is(h2, h3):first-child::before,
  html[data-skin="mac"] .card.pad > :is(h2, h3):first-child::after { content: ""; flex: 1; align-self: stretch; min-height: 14px; background: var(--mac-stripes); }
  /* Basligi bir satirda olan kartlar (baslik + baglanti / dugme) */
  html[data-skin="mac"] .card.pad > .row:first-child:has(> :is(h2, h3):first-child) {
    margin: -12px -14px 12px; padding: 3px 6px; min-height: 24px; gap: 6px; background: var(--mac-stripes); border-bottom: 1px solid #8a8a8a;
  }
  html[data-skin="mac"] .card.pad > .row:first-child:has(> :is(h2, h3):first-child) > :is(h2, h3, a:not(.btn), .link, .muted, .small, .faint, span:not([class])) { background-color: #dddddd; padding: 0 6px; font-size: 13px; }
  html[data-skin="mac"] .card.pad > .row:first-child:has(> :is(h2, h3):first-child) .btn.ghost { background: var(--mac-fill); border-color: #555; }
  html[data-skin="mac"] .card > :is(.rows, .table-wrap, .occ),
  html[data-skin="mac"] .card.table-wrap > table.grid {
    background: #fff; margin: 4px; border: 1px solid #555; box-shadow: inset 1px 1px #b5b5b5;
  }
  html[data-skin="mac"] .card.table-wrap > table.grid { width: calc(100% - 8px); }
  html[data-skin="mac"] .card .row-item { border-bottom-color: #e2e2e2; }
  html[data-skin="mac"] .card .rows .row-item:hover { background: #ececf8; }
  html[data-skin="mac"] .stat { padding: 9px 12px; }
  html[data-skin="mac"] .stat b { font-size: 21px; font-weight: 700; }
  html[data-skin="mac"] a.stat:hover, html[data-skin="mac"] :is(.proj-card, .gcard, .tpl):hover { border-color: #000; box-shadow: var(--mac-raised), var(--mac-drop); background: #e4e4e4; }
  html[data-skin="mac"] .tpl:not(.static):active, html[data-skin="mac"] a.stat:active { background: #c8c8c8; box-shadow: inset 1px 1px #9a9a9a; }
  html[data-skin="mac"] .alert-card > .card-head { background: repeating-linear-gradient(#f8ebc8 0 1px, #d1a650 1px 2px); }
  html[data-skin="mac"] .dl-card.primary { background: #e4e4f4; }
  html[data-skin="mac"] .auth-card { padding: 24px; }
  html[data-skin="mac"] .auth-card::before {
    content: ""; display: block; height: 16px; margin: -23px -23px 18px; border-bottom: 1px solid #8a8a8a; background: var(--mac-stripes);
  }
  html[data-skin="mac"] .org-box { background: #dddddd; border: 1px solid #000; border-left: 4px solid var(--c); box-shadow: var(--mac-raised); }
  html[data-skin="mac"] .design-row { background: #eeeeee; border: 1px solid #888; box-shadow: var(--mac-raised); }
  html[data-skin="mac"] .occ-item { background: #eeeeee; border: 1px solid #888; box-shadow: var(--mac-raised); }
  html[data-skin="mac"] .occ-item.today { background: var(--warn-soft); }
  html[data-skin="mac"] .occ-item.late { background: var(--danger-soft); }
  html[data-skin="mac"] .note { background: #ffffcc; border: 1px solid #888; }
  html[data-skin="mac"] .bubble > div { background: #fff; border: 1px solid #888; }
  html[data-skin="mac"] .bubble.mine > div { background: #ccccff; border-color: #9999cc; }
  html[data-skin="mac"] .people-pick { background: #fff; border: 1px solid #555; box-shadow: inset 1px 1px #b5b5b5; }
  html[data-skin="mac"] .mini-bar, html[data-skin="mac"] .stage-bar { background: #eeeeee; border: 1px solid #555; }
  html[data-skin="mac"] .mini-bar { height: 10px; }
  html[data-skin="mac"] .mini-bar i { background: linear-gradient(#a8a8e8, #5c5cb0); }

  /* ---------- dugmeler: yuvarlak platin ---------- */
  html[data-skin="mac"] .btn {
    height: 28px; padding: 0 14px; background: var(--mac-fill); color: #000; font-weight: 400;
    border: 1px solid #000; border-radius: 4px !important; box-shadow: inset 1px 1px rgba(255, 255, 255, .7);
  }
  html[data-skin="mac"] .btn:hover { background: linear-gradient(#fdfdfd, #d8d8d8); filter: none; }
  html[data-skin="mac"] .btn:active:not(:disabled) { background: var(--mac-fill-pressed); color: #fff; box-shadow: none; }
  html[data-skin="mac"] .btn:focus-visible { outline: 2px solid #9999cc; outline-offset: 2px; }
  html[data-skin="mac"] .btn:disabled { opacity: 1; color: #8a8a8a; border-color: #8a8a8a; }
  html[data-skin="mac"] .btn.primary {
    margin: 0 3px; background: var(--mac-fill); color: #000; font-weight: 700; border-color: #000;
    box-shadow: inset 1px 1px rgba(255, 255, 255, .7), 0 0 0 1px #dddddd, 0 0 0 3px #000;
  }
  html[data-skin="mac"] .btn.primary:hover { background: linear-gradient(#fdfdfd, #d8d8d8); }
  html[data-skin="mac"] .btn.primary:active:not(:disabled) { background: var(--mac-fill-pressed); color: #fff; box-shadow: 0 0 0 1px #dddddd, 0 0 0 3px #000; }
  html[data-skin="mac"] .btn.danger { color: #b00000; }
  html[data-skin="mac"] .btn.danger:hover { background: linear-gradient(#fdfdfd, #d8d8d8); }
  html[data-skin="mac"] .btn.sm { height: 24px; padding: 0 10px; font-size: 12px; }
  html[data-skin="mac"] .btn.icon { width: 28px; padding: 0; }
  html[data-skin="mac"] .btn.icon.sm { width: 24px; }
  html[data-skin="mac"] .btn.ghost { background: transparent; color: #000; border-color: transparent; box-shadow: none; }
  html[data-skin="mac"] .btn.ghost:hover { background: var(--mac-fill); border-color: #777; }
  html[data-skin="mac"] .btn.ghost:active:not(:disabled) { background: var(--mac-fill-pressed); color: #fff; }
  html[data-skin="mac"] :is(.card-head, .col header, .modal-head, .drawer-head, .modal-foot, .main > .page-head, .main > .toolbar, .main > .month-head, .main > .report-controls, .main > .report-tools) .btn.ghost {
    background: var(--mac-fill); border-color: #555;
  }
  /* Pencere kapatma kutusu: solda, kucuk kare */
  html[data-skin="mac"] :is(.modal-head, .drawer-head) .btn.ghost.icon:is([data-close], [data-act="close-drawer"]) {
    order: -1; width: 18px; height: 18px; margin-right: 6px; color: #000; background: var(--mac-fill);
    border: 1px solid #555; border-radius: 0 !important; box-shadow: 0 0 0 1px #dddddd, var(--mac-raised);
  }
  html[data-skin="mac"] :is(.modal-head, .drawer-head) .btn.ghost.icon:is([data-close], [data-act="close-drawer"]) svg { width: 10px; height: 10px; stroke-width: 2.4; }
  html[data-skin="mac"] :is(.modal-head, .drawer-head) .btn.ghost.icon:is([data-close], [data-act="close-drawer"]):active { background: var(--mac-fill-pressed); }

  /* ---------- alanlar ---------- */
  html[data-skin="mac"] :is(.input, select.input, textarea.input) {
    height: 28px; padding: 0 7px; background-color: #fff; color: #000; outline: none;
    border: 1px solid #555; border-radius: 0 !important; box-shadow: inset 1px 1px #b5b5b5;
  }
  html[data-skin="mac"] textarea.input { height: auto; padding: 5px 7px; }
  html[data-skin="mac"] .input.sm { height: 24px; padding: 0 6px; font-size: 12px; }
  html[data-skin="mac"] .input:focus { border-color: #33339a; box-shadow: inset 1px 1px #b5b5b5, 0 0 0 2px #ccccff; }
  html[data-skin="mac"] .input::placeholder { color: #8a8a8a; }
  html[data-skin="mac"] .input:disabled, html[data-skin="mac"] .input[readonly] { background-color: #eeeeee; color: #444; }
  html[data-skin="mac"] .col-add .input { background-color: #fff; border-style: solid; }
  /* Acilir menu: platin dugme, sagda cift ok */
  html[data-skin="mac"] select.input {
    -webkit-appearance: none; appearance: none; padding-right: 26px; border-color: #000; border-radius: 4px !important; box-shadow: inset 1px 1px rgba(255, 255, 255, .7);
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='10'%3E%3Cpath d='M3.5 0L7 4H0zM0 6h7l-3.5 4z'/%3E%3C/svg%3E") no-repeat right 7px center / 7px 10px,
      linear-gradient(#888 0 0) no-repeat right 20px top 4px / 1px calc(100% - 8px),
      linear-gradient(#f7f7f7, #d0d0d0);
  }
  html[data-skin="mac"] select.input:focus { border-color: #000; box-shadow: 0 0 0 2px #ccccff; }
  html[data-skin="mac"] input[type="checkbox"]:not(.swatch > input) {
    -webkit-appearance: none; appearance: none; flex: none; width: 13px; height: 13px; margin: 0; cursor: pointer;
    border: 1px solid #000; border-radius: 0 !important; background: var(--mac-fill); box-shadow: var(--mac-raised);
  }
  html[data-skin="mac"] input[type="checkbox"]:not(.swatch > input):checked {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='8'%3E%3Cpath d='M1 4l2.5 2.5L8 1' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / 9px 8px no-repeat, var(--mac-fill);
  }
  html[data-skin="mac"] input[type="radio"]:not(.swatch > input) {
    -webkit-appearance: none; appearance: none; flex: none; width: 13px; height: 13px; margin: 0; cursor: pointer;
    border: 1px solid #000; border-radius: 50% !important; background: var(--mac-fill); box-shadow: var(--mac-raised);
  }
  html[data-skin="mac"] input[type="radio"]:not(.swatch > input):checked { background: radial-gradient(circle, #000 0 2.5px, transparent 3px), var(--mac-fill); }

  /* ---------- sekmeler, secenek gruplari, etiketler ---------- */
  html[data-skin="mac"] .tabs { gap: 2px; padding-left: 8px; border-bottom: 1px solid #000; overflow-y: hidden; }
  html[data-skin="mac"] .tabs a {
    margin: 3px 0 0; padding: 4px 14px; background: var(--mac-fill); color: #000; font-weight: 400;
    border: 1px solid #000; border-bottom: 0; border-radius: 5px 5px 0 0 !important; box-shadow: inset 1px 1px #fff;
  }
  html[data-skin="mac"] .tabs a:hover { color: #000; }
  html[data-skin="mac"] .tabs a.on { margin: 0 0 -1px; padding: 6px 16px 6px; background: #eeeeee; color: #000; font-weight: 700; }
  html[data-skin="mac"] .seg { border: 1px solid #555; border-radius: 4px !important; background: var(--mac-fill); }
  html[data-skin="mac"] .seg > :is(button, a, label) { color: #000; padding: 5px 12px; }
  html[data-skin="mac"] .seg > * + * { border-left-color: #888 !important; }
  html[data-skin="mac"] .seg > :is(.on, label:has(input:checked)) { background: #8e8eb8; color: #fff; }
  html[data-skin="mac"] .chip { height: 20px; padding: 0 7px; font-weight: 400; border: 1px solid rgba(0, 0, 0, .3); }
  html[data-skin="mac"] .chip[style*="--chip"] { background: color-mix(in srgb, var(--chip) 28%, #fff); color: #000; }
  html[data-skin="mac"] .list-tabs { padding: 2px 0; }
  html[data-skin="mac"] .list-tabs button {
    padding: 4px 10px; background: var(--mac-fill); color: #000; font-weight: 400;
    border: 1px solid #555; border-radius: 3px !important;
  }
  html[data-skin="mac"] .list-tabs button.on { background: #8e8eb8; border-color: #555; color: #fff; }
  html[data-skin="mac"] .filters button { color: #000; }
  html[data-skin="mac"] .filters button.on { background: #ccccff; color: #000; font-weight: 700; }
  html[data-skin="mac"] .status-btn {
    width: 16px; height: 16px; background: var(--mac-fill); color: #000; font-size: 11px; font-weight: 700;
    border: 1px solid #000; border-radius: 0 !important; box-shadow: var(--mac-raised);
  }
  html[data-skin="mac"] .status-btn:hover:not(:disabled) { color: #000; border-color: #000; background: linear-gradient(#fff, #dcdcdc); }
  html[data-skin="mac"] .status-btn.pending, html[data-skin="mac"] .status-btn.pending:hover:not(:disabled) { color: var(--warn); }
  html[data-skin="mac"] .status-btn:disabled { opacity: 1; border-color: #8a8a8a; color: #8a8a8a; }

  /* ---------- tablolar ---------- */
  html[data-skin="mac"] table.grid { background: #fff; }
  html[data-skin="mac"] table.grid th {
    padding: 5px 10px; background: linear-gradient(#f4f4f4, #d6d6d6); color: #000; font-weight: 700; font-size: 12px;
    border-bottom: 1px solid #555; box-shadow: inset -1px 0 #9a9a9a, inset 1px 0 #fff;
  }
  html[data-skin="mac"] table.grid td { border-bottom-color: #e2e2e2; }
  html[data-skin="mac"] table.grid tr.click:hover td { background: #ececf8; }

  /* ---------- pano ---------- */
  html[data-skin="mac"] .col { padding: 1px; }
  html[data-skin="mac"] .col header { padding: 4px 8px; margin-bottom: 4px; }
  html[data-skin="mac"] .col header i { box-shadow: 0 0 0 1px #000; }
  html[data-skin="mac"] .col-body { padding: 4px 6px 6px; gap: 6px; }
  html[data-skin="mac"] .col-body.drop-here { background: #ccccff; }
  html[data-skin="mac"] .kcard { padding: 9px; background: #f4f4f4; color: #000; border: 1px solid #555; box-shadow: var(--mac-raised); }
  html[data-skin="mac"] .kcard:hover { border-color: #000; background: #fff; }
  html[data-skin="mac"] .kcard.pending { border-left: 3px solid var(--warn); }
  html[data-skin="mac"] .kcard-img { width: calc(100% + 16px); margin: -8px -8px 8px; border-bottom: 1px solid #888; }

  /* ---------- takvim ---------- */
  html[data-skin="mac"] .month-grid { background: #aaaaaa; border: 1px solid #000; box-shadow: var(--mac-drop); }
  html[data-skin="mac"] .dow { background: linear-gradient(#f4f4f4, #d6d6d6); color: #000; }
  html[data-skin="mac"] .day { background: #fff; }
  html[data-skin="mac"] .day.other { background: #eeeeee; opacity: 1; color: #888; }
  html[data-skin="mac"] .day.today .dnum { background: #33339a; color: #fff; }

  /* ---------- pencere (modal) ve cekmece ---------- */
  html[data-skin="mac"] :is(.modal, .drawer) {
    background: #dddddd; color: #000; padding: 1px; border: 1px solid #000; box-shadow: var(--mac-raised), 3px 3px 0 rgba(0, 0, 0, .45);
  }
  html[data-skin="mac"] :is(.modal-head, .drawer-head) { min-height: 26px; padding: 3px 6px; gap: 6px; }
  html[data-skin="mac"] .modal-head h2 { flex: 0 1 auto; margin: 0 auto; padding: 0 8px; background: #dddddd; font-size: 13px; }
  html[data-skin="mac"] .modal-head::after { content: ""; width: 24px; flex: none; }
  html[data-skin="mac"] .modal-foot { background: #dddddd; }
  html[data-skin="mac"] .drawer-body { background: #dddddd; }
  html[data-skin="mac"] .mention-pop { background: #eeeeee; border: 1px solid #000; box-shadow: var(--mac-drop); }
  html[data-skin="mac"] :is(.mention-row:hover, .mention-row.on) { background: #33339a; color: #fff; --text: #fff; --muted: #dcdcff; --faint: #c4c4f0; }

  /* ---------- bildirim: balon yardimi ---------- */
  html[data-skin="mac"] #toast { padding: 7px 12px; background: #ffffcc; color: #000; border: 1px solid #000; box-shadow: var(--mac-drop); border-radius: 3px !important; }
  html[data-skin="mac"] #toast.err { background: #b00000; color: #fff; }

  /* ---------- gorunum secici ---------- */
  html[data-skin="mac"] .skin-tile { background: var(--mac-fill); color: #000; border: 1px solid #555; border-radius: 4px !important; box-shadow: var(--mac-raised); }
  html[data-skin="mac"] .skin-tile:hover { border-color: #000; }
  html[data-skin="mac"] .skin-tile.on { background: #ccccff; border-color: #33339a; box-shadow: 0 0 0 1px #33339a; }
  html[data-skin="mac"] .skin-tile-mark { background: #33339a; color: #fff; border-radius: 3px !important; }
  html[data-skin="mac"] .skin-mock { border-radius: 2px !important; border: 1px solid #555; }
  html[data-skin="mac"] .skin-menu { padding: 3px 0; background: #eeeeee; color: #000; border: 1px solid #000; box-shadow: var(--mac-drop); }
  html[data-skin="mac"] .skin-menu-title { color: #444; border-bottom: 1px solid #a8a8a8; margin-bottom: 3px; }
  html[data-skin="mac"] .skin-menu-item { min-height: 30px; color: #000; }
  html[data-skin="mac"] :is(.skin-menu-item:hover, .skin-menu-item:focus-visible) { background: #33339a; color: #fff; }
  html[data-skin="mac"] :is(.skin-menu-item:hover, .skin-menu-item:focus-visible) .skin-tick { color: #fff; }
  html[data-skin="mac"] .skin-tick { color: #000; }

  /* ---------- telefon ---------- */
  @media (max-width: 860px) {
    html[data-skin="mac"] .shell { grid-template-rows: 48px minmax(0, 1fr) auto; }
    html[data-skin="mac"] body.nav-open .nav { box-shadow: inset -1px 0 #a0a0a0, 3px 0 0 rgba(0, 0, 0, .35); }
    html[data-skin="mac"] .bottom-nav { background: linear-gradient(#f4f4f4, #d9d9d9); border-top: 1px solid #000; box-shadow: inset 0 1px #fff; }
    html[data-skin="mac"] .bottom-nav > * { color: #000; margin: 4px 2px; }
    html[data-skin="mac"] .bottom-nav > .on { color: #000; background: #ccccff; border: 1px solid #9999cc; }
    html[data-skin="mac"] .bottom-nav i { background: #33339a; color: #fff; }
    html[data-skin="mac"] .btn { height: 34px; }
    html[data-skin="mac"] .btn.sm { height: 30px; }
    html[data-skin="mac"] .btn.icon { width: 34px; }
    html[data-skin="mac"] .btn.icon.sm { width: 30px; }
    html[data-skin="mac"] :is(.modal-head, .drawer-head) .btn.ghost.icon:is([data-close], [data-act="close-drawer"]) { width: 26px; height: 26px; }
    html[data-skin="mac"] .modal-head::after { width: 32px; }
    html[data-skin="mac"] :is(.input, select.input) { height: 36px; font-size: 14px; }
    html[data-skin="mac"] textarea.input { height: auto; font-size: 14px; }
    html[data-skin="mac"] .input.sm { height: 30px; }
    html[data-skin="mac"] .status-btn { width: 20px; height: 20px; }
    html[data-skin="mac"] .modal { padding-bottom: calc(1px + env(safe-area-inset-bottom)); }
  }
}

/* Sag tik menusu: klasik masaustu menuleri */
@media screen {
  html[data-skin="win98"] .ctx-menu {
    background: #c0c0c0; color: #000; border: 2px solid; border-color: var(--w98-window-b); box-shadow: var(--w98-window-s), 2px 2px 0 rgba(0, 0, 0, .35);
    border-radius: 0; padding: 2px; transform: none; transition: opacity .06s linear; font-family: Tahoma, 'Microsoft Sans Serif', 'MS Sans Serif', Verdana, sans-serif;
  }
  html[data-skin="win98"] .ctx-menu button { border-radius: 0; padding: 4px 18px 4px 6px; font-size: 12px; }
  html[data-skin="win98"] .ctx-menu button:hover, html[data-skin="win98"] .ctx-menu button:focus-visible { background: #000080; color: #fff; }
  html[data-skin="win98"] .ctx-menu button:hover .ctx-ico, html[data-skin="win98"] .ctx-menu button:focus-visible .ctx-ico { color: #fff; }
  html[data-skin="win98"] .ctx-menu button.danger { color: #800000; }
  html[data-skin="win98"] .ctx-menu button.danger:hover { color: #fff; background: #000080; }
  html[data-skin="win98"] .ctx-sep { height: 0; border-top: 1px solid #808080; border-bottom: 1px solid #fff; margin: 3px 2px; background: none; }
  html[data-skin="win98"] .ctx-head { color: #fff; background: linear-gradient(90deg, #000080, #1084d0); margin: -2px -2px 2px; padding: 3px 6px; text-transform: none; letter-spacing: 0; font-size: 11px; }

  html[data-skin="mac"] .ctx-menu {
    background: #eee; color: #000; border: 1px solid #000; border-radius: 0; box-shadow: 2px 2px 0 rgba(0, 0, 0, .45); padding: 2px 0; transform: none;
    font-family: Charcoal, Chicago, Geneva, 'Lucida Grande', 'Segoe UI', sans-serif;
  }
  html[data-skin="mac"] .ctx-menu button { border-radius: 0; padding: 4px 16px; font-size: 12px; }
  html[data-skin="mac"] .ctx-menu button:hover, html[data-skin="mac"] .ctx-menu button:focus-visible { background: #3333cc; color: #fff; }
  html[data-skin="mac"] .ctx-menu button:hover .ctx-ico, html[data-skin="mac"] .ctx-menu button:focus-visible .ctx-ico { color: #fff; }
  html[data-skin="mac"] .ctx-sep { background: #a8a8a8; margin: 3px 0; }
  html[data-skin="mac"] .ctx-head { color: #555; text-transform: none; letter-spacing: 0; }
}

/* ================================================================== YENI BILESENLER: stok, siparis, kargo, envanter, belge,
   istatistik (Kisaca), toplanti, tuvaller. Modern yuvarlak/renkli karolar masaustu temalarinda kendi sistemlerinin
   denetimine donusur: Win98'de gri kabartma dugme + cokuk alan + lacivert baslik, Mac OS 8'de platin dugme + cizgili baslik. */
@media screen {
  /* koyu sistem temasinda bile acik renk kalsin (stock.css koyu :root tokenlarini ezer) */
  html[data-skin="win98"] {
    --inv-on: #ffffff; --inv-orange: #a04400; --inv-orange-soft: #f6dcc6;
    --inv-yellow: #c08a00; --inv-yellow-soft: #f6ebb8; --inv-yellow-ink: #6a4500;
  }
  html[data-skin="mac"] {
    --inv-on: #ffffff; --inv-orange: #a84a00; --inv-orange-soft: #f6dfcc;
    --inv-yellow: #c08a00; --inv-yellow-soft: #f6ecc0; --inv-yellow-ink: #6a4500;
  }

  /* ================================================================ WINDOWS 98 */
  /* masaustu (camgobegi) uzerindeki baslik ve aciklamalar beyaz */
  html[data-skin="win98"] .main > .inv > :is(.inv-head, .inv-tip, .inv-chiprow, .inv-empty, .inv-legend),
  html[data-skin="win98"] .main > :is(.kf-h, .kf-chips) { --text: #fff; --muted: #e8e8e8; --faint: #d4d4d4; --accent: #fff; color: #fff; }
  html[data-skin="win98"] .main > .inv > :is(.inv-head, .inv-chiprow, .inv-empty) :is(button, .inv-fchip, .inv-add) { --text: #000; --muted: #404040; --accent: #000080; }
  html[data-skin="win98"] .inv-head h1 { font-size: 18px; font-weight: 700; }
  html[data-skin="win98"] .inv-tip { font-size: 12px; }
  html[data-skin="win98"] .inv-rowlabel { font-size: 12px; }

  /* pencereler: karo, kart, ozet */
  html[data-skin="win98"] :is(.inv-tile, .or-card, .kf-card, .kf-person, .as-stat, .pyr-node, .pyr-unit-title, .pyr-wrap, .pyr-leaders, .fc-palette,
    .list-box, .choice, .oc-top, .fm-live, .pyr-cl, .pyr-clusters, .add-box, .sh-amount, .plus-edit) {
    background: #c0c0c0; color: #000; border: 1px solid; border-color: var(--w98-window-b); box-shadow: var(--w98-window-s);
  }
  html[data-skin="win98"] :is(.inv-tile, .or-card, .kf-card, .kf-person, .list-box, .choice):hover { border-color: var(--w98-window-b); }
  html[data-skin="win98"] :is(.inv-tile, .choice, .list-box):active { transform: none; border-color: var(--w98-pressed-b); box-shadow: var(--w98-pressed-s); }
  html[data-skin="win98"] .inv-tile:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }
  /* durum rengi: pencerenin solunda ince serit (trafik isigi kaybolmasin) */
  html[data-skin="win98"] :is(.inv-tile.lv-warn, .inv-tile.lv-danger) { box-shadow: var(--w98-window-s), inset 5px 0 var(--lv); }
  html[data-skin="win98"] :is(.or-card.late, .kf-card.warn, .kf-person.warn, .as-stat.warn, .kf-card.light-warn) { box-shadow: var(--w98-window-s), inset 5px 0 var(--warn); }
  html[data-skin="win98"] :is(.as-stat.danger, .kf-card.light-danger) { box-shadow: var(--w98-window-s), inset 5px 0 var(--danger); }
  html[data-skin="win98"] :is(.as-stat.ok, .kf-card.light-ok) { box-shadow: var(--w98-window-s), inset 5px 0 var(--ok); }
  html[data-skin="win98"] .or-card.st-kargoda { box-shadow: var(--w98-window-s), inset 5px 0 #000080; }
  html[data-skin="win98"] .or-card { gap: 8px; padding: 10px 12px; }
  html[data-skin="win98"] .kf-card { padding: 10px 12px; }

  /* karo ici: buyuk Bilal yazilari Tahoma kalinina iner, oran korunur */
  html[data-skin="win98"] .inv-tile { min-height: 180px; padding: 10px 10px 0; gap: 4px; }
  html[data-skin="win98"] .inv-tile:has(.inv-stripe) { padding-top: 16px; }
  html[data-skin="win98"] .inv-tile .inv-stripe { height: 6px; margin: 2px; top: 0; left: 0; right: 0; box-shadow: none; border-bottom: 1px solid #808080; }
  html[data-skin="win98"] .inv-ico { font-size: 32px; }
  html[data-skin="win98"] .inv-name { font-size: 13px; font-weight: 700; }
  html[data-skin="win98"] .inv-qty b { font-size: 28px; font-weight: 700; letter-spacing: 0; }
  html[data-skin="win98"] .inv-qty small { font-size: 12px; }
  html[data-skin="win98"] .inv-next { font-size: 12px; }
  /* doluluk: klasik ilerleme cubugu (bloklu) */
  html[data-skin="win98"] .inv-gauge { height: 14px; padding: 1px; background: #fff; border: 1px solid; border-color: var(--w98-soft-sunken-b); }
  html[data-skin="win98"] .inv-gauge i { background: repeating-linear-gradient(90deg, var(--lv) 0 7px, transparent 7px 9px); }
  /* durum sozcugu: pencerenin durum cubugu */
  html[data-skin="win98"] .inv-word {
    margin: 6px -8px 2px; padding: 4px 8px; font-size: 12px; font-weight: 700; color: var(--lv-ink);
    background: #c0c0c0; border: 1px solid; border-color: var(--w98-soft-sunken-b);
  }
  html[data-skin="win98"] .inv-word::before, html[data-skin="win98"] .inv-pill::before { width: 10px; height: 10px; box-shadow: inset -1px -1px rgba(0, 0, 0, .35); }
  html[data-skin="win98"] .inv-pill { padding: 2px 8px; font-size: 12px; font-weight: 700; background: #fff; border: 1px solid; border-color: var(--w98-soft-sunken-b); }
  html[data-skin="win98"] .inv-pill.big { font-size: 14px; padding: 4px 10px; }
  html[data-skin="win98"] :is(.inv-chip, .or-kind, .fc-n, .pyr-flag) { background: #fff; color: #000; font-weight: 400; border: 1px solid #808080; }
  html[data-skin="win98"] .inv-who .av, html[data-skin="win98"] .pyr-stack .av { box-shadow: 0 0 0 1px #c0c0c0; }

  /* dugmeye donusenler: secim cipleri, filtreler, kucuk eylemler */
  html[data-skin="win98"] :is(.chips3 span, .kind-tiles span, .pick span, .or-k span, .or-carrier span, .sh-kind span, .pp-card, .swp > span,
    .inv-fchip, .kf-chip, .aw-tab, .lt-chip, .inv-filter button, .sh-nums button, .sh-quick button, .quick-set button, .sh-step, .nf-b,
    .add-btns button, .sh-plain, .sh-all, .inv-add, .or-deliver, .sh-ok, .fm-enter, .mf-box .mf-tools button, .fc-mini, .oc-go,
    .aw-tile, .lead-tile, .owner-tile, .pp-tile, .as-st) {
    background: #c0c0c0; color: #000; font-weight: 400; box-shadow: var(--w98-raised-s);
    border: 1px solid; border-color: var(--w98-raised-b); border-style: solid; text-decoration: none; filter: none;
  }
  html[data-skin="win98"] :is(.chips3 span, .kind-tiles span, .pick span, .or-k span, .or-carrier span, .inv-fchip, .kf-chip, .aw-tab, .inv-filter button,
    .sh-nums button, .sh-quick button, .quick-set button, .sh-step, .nf-b, .add-btns button, .sh-plain, .sh-all, .fm-enter, .mf-box .mf-tools button,
    .fc-mini, .oc-go, .lt-chip, .as-st):active {
    transform: none; border-color: var(--w98-pressed-b); box-shadow: var(--w98-pressed-s);
  }
  html[data-skin="win98"] #inv-undo { background: #ffffe1; color: #000; border: 1px solid #000; box-shadow: 2px 2px 0 rgba(0, 0, 0, .35); font-size: 13px; }
  html[data-skin="win98"] #inv-undo button { background: #c0c0c0; color: #000; font-weight: 700; border: 1px solid; border-color: var(--w98-raised-b); box-shadow: var(--w98-raised-s); min-height: 32px; font-size: 12px; }
  html[data-skin="win98"] #inv-undo button:active { border-color: var(--w98-pressed-b); box-shadow: var(--w98-pressed-s); }
  /* secili: basili + noktali gri (Win98 "acik" dugmesi) */
  html[data-skin="win98"] :is(.chips3 input:checked + span, .kind-tiles input:checked + span, .pick input:checked + span, .or-k input:checked + span,
    .or-carrier input:checked + span, .sh-kind input:checked + span, .pp-i input:checked + .pp-card, .swp input:checked + span,
    .inv-fchip.on, .kf-chip.on, .aw-tab.on, .inv-filter button.on, .sh-nums button.on, .sh-quick button.on, .aw-tile:has(input:checked),
    .lead-tile.on, .owner-tile:has(input:checked), .pp-tile:has(input:checked), .list-box.on, .choice.on) {
    background: var(--w98-dither); color: #000; font-weight: 700; transform: none;
    border-color: var(--w98-pressed-b); box-shadow: var(--w98-pressed-s);
  }
  html[data-skin="win98"] .pick input:checked + span::before { content: "\2713"; }
  html[data-skin="win98"] :is(.chips3, .kind-tiles, .pick, .sh-kind, .pp-i, .swp) input:focus-visible + :is(span, .pp-card) { outline: 1px dotted #000; outline-offset: -5px; }
  html[data-skin="win98"] .chips3 span { min-height: 50px; font-size: 12px; }
  html[data-skin="win98"] .chips3 span i { font-size: 20px; }
  html[data-skin="win98"] .kind-tiles span { min-height: 76px; font-size: 13px; font-weight: 700; }
  html[data-skin="win98"] .kind-tiles span i { font-size: 28px; }
  html[data-skin="win98"] :is(.pick span, .pick-add, .inv-fchip, .sh-quick button, .quick-set button) { min-height: 32px; padding: 0 12px; font-size: 12px; }
  html[data-skin="win98"] :is(.or-k span, .or-carrier span) { padding: 5px 10px; font-size: 12px; }
  html[data-skin="win98"] .kf-chip { padding: 5px 12px; font-size: 12px; }
  html[data-skin="win98"] .inv-filter button { min-height: 32px; font-size: 13px; }
  html[data-skin="win98"] .inv-filter b { min-width: 22px; height: 18px; padding: 0 5px; font-size: 11px; background: #fff; border: 1px solid #808080; }
  /* buyuk renkli eylemler: koyu cerceveli varsayilan dugme (renk yazida) */
  html[data-skin="win98"] :is(.inv-add:not(.ghost), .or-deliver, .sh-ok) {
    font-weight: 700; border-color: #000;
    box-shadow: inset 1px 1px #fff, inset -1px -1px #0a0a0a, inset 2px 2px #dfdfdf, inset -2px -2px #808080;
  }
  html[data-skin="win98"] .inv-add { min-height: 32px; padding: 0 14px; font-size: 12px; }
  html[data-skin="win98"] .or-deliver { padding: 8px; font-size: 13px; color: #006000; }
  html[data-skin="win98"] .sh-ok { min-height: 40px; font-size: 14px; color: var(--k); }
  html[data-skin="win98"] .sh-ok:disabled { color: #808080; text-shadow: 1px 1px #fff; opacity: 1; }
  html[data-skin="win98"] :is(.inv-add, .or-deliver, .sh-ok):active:not(:disabled) { transform: none; border-color: #000; box-shadow: inset 1px 1px #808080, inset -1px -1px #808080; }
  html[data-skin="win98"] .sh-kind span { min-height: 56px; font-size: 15px; font-weight: 700; color: var(--k); }
  html[data-skin="win98"] .sh-kind input:checked + span { color: var(--k); }
  html[data-skin="win98"] .sh-kind.count input:checked + span { color: #000; }
  html[data-skin="win98"] .sh-plain.danger { color: #c00000; }
  html[data-skin="win98"] :is(.plus-chip, .pick-add, .pyr-plus, .swp-add > span) {
    background: #c0c0c0; color: #000080; font-weight: 700; border: 1px dotted #000; box-shadow: none;
  }
  html[data-skin="win98"] :is(.plus-chip, .pick-add, .pyr-plus):hover { background: #c0c0c0; border: 1px solid; border-color: var(--w98-raised-b); box-shadow: var(--w98-raised-s); }
  html[data-skin="win98"] :is(.plus-chip, .pick-add, .pyr-plus):active { border-color: var(--w98-pressed-b); box-shadow: var(--w98-pressed-s); }
  html[data-skin="win98"] .plus-emos button.on { background: #fff; border: 1px solid; border-color: var(--w98-sunken-b); }
  html[data-skin="win98"] .sh-stepper { grid-template-columns: 52px 1fr 52px; }
  html[data-skin="win98"] .sh-step { height: 52px; font-size: 24px; font-weight: 700; }
  html[data-skin="win98"] .sh-val b { font-size: 44px; font-weight: 700; }
  html[data-skin="win98"] .sh-nums button { min-height: 40px; font-size: 18px; font-weight: 700; }
  html[data-skin="win98"] .nf-b { height: 34px; font-size: 20px; }
  html[data-skin="win98"] .nf { grid-template-columns: 40px minmax(0, 1fr) auto 40px; }
  html[data-skin="win98"] .sh-qty b { font-size: 36px; font-weight: 700; }
  html[data-skin="win98"] .sh-ico { font-size: 42px; }
  html[data-skin="win98"] :is(.sh-lock, .sh-mat, .sh-person, .or-auto, .pyr-resp-row) { background: #c0c0c0; border: 1px solid #808080; box-shadow: inset 1px 1px #fff, 1px 1px #fff; }
  html[data-skin="win98"] .pyr-resp-row.empty { background: transparent; border: 1px dotted #000; box-shadow: none; }
  html[data-skin="win98"] .or-auto.soon { border-color: #000080; }

  /* alt pencere: dev Bilal alanlari Win98 olcusune */
  html[data-skin="win98"] .inv-sheet :is(.input, select.input) { height: 32px; font-size: 13px; }
  html[data-skin="win98"] .inv-sheet textarea.input { height: auto; min-height: 56px; padding-top: 5px; font-size: 13px; }
  html[data-skin="win98"] .inv-sheet .nf-in { font-size: 18px; font-weight: 700; }
  html[data-skin="win98"] .inv-sheet .modal-body { font-size: 13px; }
  html[data-skin="win98"] .inv-sheet .field.big > span { font-size: 13px; }
  html[data-skin="win98"] .inv-sheet .modal-foot .btn { height: 32px; font-size: 12px; font-weight: 400; }
  html[data-skin="win98"] .inv-sheet .modal-foot .btn.primary { font-weight: 700; }
  html[data-skin="win98"] .inv-search { height: 30px !important; font-size: 12px; }
  html[data-skin="win98"] :is(.sh-ask, .sh-result) { font-size: 14px; }
  html[data-skin="win98"] .sh-sec h3 { font-size: 12px; }
  html[data-skin="win98"] .hist { font-size: 12px; border-bottom-color: #dfdfdf; }
  html[data-skin="win98"] :is(.sh-more, details.more) > summary { min-height: 30px; font-size: 12px; color: #000080; text-decoration: underline; }

  /* sekmeler (Malzemeler / Gelen siparisler / Giden kargo): ozellik sayfasi sekmeleri */
  html[data-skin="win98"] .inv-tabs { gap: 0; padding-left: 2px; margin-bottom: 0; border-bottom: 1px solid #fff; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
  html[data-skin="win98"] .inv-tabs a {
    margin: 2px 0 0; padding: 4px 12px 3px; background: #c0c0c0; color: #000; font-weight: 400; white-space: nowrap;
    border: 1px solid; border-color: #fff #0a0a0a transparent #fff; border-bottom: 0; box-shadow: inset 1px 1px #dfdfdf, inset -1px 0 #808080;
  }
  html[data-skin="win98"] .inv-tabs a.on { position: relative; margin: 0 -2px -1px; padding: 5px 14px; z-index: 1; background: #c0c0c0; }
  html[data-skin="win98"] .inv-tabs + * { margin-top: 10px; }
  html[data-skin="win98"] .inv-tabs a b { background: #000080; color: #fff; font-weight: 700; }

  /* siparis karti: adim simgeleri kare dugme, cizgi oyuk */
  html[data-skin="win98"] .or-step i { width: 32px; height: 32px; font-size: 16px; background: #c0c0c0; border: 1px solid; border-color: var(--w98-raised-b); box-shadow: var(--w98-raised-s); }
  html[data-skin="win98"] .or-step.done i { background: #fff; border-color: var(--w98-sunken-b); box-shadow: var(--w98-sunken-s); }
  html[data-skin="win98"] .or-step.now i { outline: 1px dotted #000; outline-offset: 1px; box-shadow: var(--w98-raised-s); border-color: var(--w98-raised-b); }
  html[data-skin="win98"] .or-step b { font-size: 11px; font-weight: 700; }
  html[data-skin="win98"] .or-line { height: 2px; background: #808080; box-shadow: 0 1px #fff; margin-bottom: 24px; }
  html[data-skin="win98"] .or-track code { background: #fff; border: 1px solid; border-color: var(--w98-soft-sunken-b); font-family: "Courier New", Courier, monospace; }
  html[data-skin="win98"] .or-mini { border-bottom: 1px solid #808080; box-shadow: 0 1px #fff; }
  html[data-skin="win98"] .or-more { color: #000; }

  /* envanter tablosu: liste gorunumu */
  html[data-skin="win98"] .as-wrap { background: #fff; border: 1px solid; border-color: var(--w98-sunken-b); box-shadow: var(--w98-sunken-s); }
  html[data-skin="win98"] .as-table { font-size: 12px; }
  html[data-skin="win98"] .as-table th {
    padding: 4px 8px; background: #c0c0c0; color: #000; font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0; border-bottom: 0;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  }
  html[data-skin="win98"] .as-table td { border-bottom-color: #dfdfdf; padding: 5px 8px; }
  html[data-skin="win98"] .as-row:hover { background: #e4e8f4; }
  html[data-skin="win98"] .as-stat b { font-size: 18px; }
  html[data-skin="win98"] .as-st { padding: 2px 8px; font-size: 11px; }
  html[data-skin="win98"] .as-st.lv-ok { color: #006000; }
  html[data-skin="win98"] .as-st.lv-warn { color: var(--inv-yellow-ink); }
  html[data-skin="win98"] .as-st.lv-danger { color: #c00000; }
  html[data-skin="win98"] .as-st.lv-off { color: #404040; }
  html[data-skin="win98"] .as-mono { font-family: "Courier New", Courier, monospace; }

  /* belgeler: dosya listesi */
  html[data-skin="win98"] .doc-row { background: #fff; border: 1px solid; border-color: var(--w98-soft-sunken-b); padding: 5px 8px; }
  html[data-skin="win98"] .doc-row:hover { background: #e4e8f4; }
  html[data-skin="win98"] .doc-ico { font-size: 22px; }
  html[data-skin="win98"] .doc-main b { font-weight: 400; }
  html[data-skin="win98"] .docs-more summary { color: #000080; text-decoration: underline; }

  /* barkod okuyucu: video pencere icinde cokuk kutuda */
  html[data-skin="win98"] .scan-view { border: 2px solid; border-color: var(--w98-sunken-b); box-shadow: var(--w98-sunken-s); }
  html[data-skin="win98"] .scan-frame { border: 2px dashed #fff; }

  /* istatistik "Kisaca" */
  html[data-skin="win98"] .kf-summary { background: #ffffe1; color: #000; border: 1px solid #000; font-size: 13px; line-height: 1.55; padding: 10px 14px; box-shadow: 2px 2px 0 rgba(0, 0, 0, .35); }
  html[data-skin="win98"] .kf-summary .good { color: #006000; }
  html[data-skin="win98"] .kf-summary .bad { color: #c00000; }
  html[data-skin="win98"] .kf-ico { font-size: 26px; }
  html[data-skin="win98"] .kf-title { font-size: 11px; color: #404040; font-weight: 700; }
  html[data-skin="win98"] .kf-big { font-size: 20px; font-weight: 700; }
  html[data-skin="win98"] .kf-card.big .kf-big { font-size: 26px; }
  html[data-skin="win98"] .kf-sub { font-size: 11px; color: #404040; }
  html[data-skin="win98"] .kf-trend.good { color: #006000; }
  html[data-skin="win98"] .kf-trend.bad { color: #c00000; }
  html[data-skin="win98"] .kf-person { padding: 8px 10px; }
  html[data-skin="win98"] .kf-h { font-size: 13px; }

  /* toplanti seridi: lacivert baslik cubugu */
  html[data-skin="win98"] .meet-banner {
    background: var(--w98-title); color: #fff; border: 1px solid; border-color: var(--w98-window-b); box-shadow: var(--w98-window-s);
    padding: 6px 10px; --text: #fff; --muted: #dfe4ff;
  }
  html[data-skin="win98"] .meet-banner b { color: #fff; }
  html[data-skin="win98"] .meet-banner .btn { --text: #000; }
  html[data-skin="win98"] .meet-p.on { box-shadow: 0 0 0 2px #008000; }
  html[data-skin="win98"] .meet-kick { background: #c0c0c0; color: #000; border: 1px solid; border-color: var(--w98-raised-b); font-weight: 700; }

  /* tuval kutulari (akis, organizasyon, akis haritasi, toplanti): rengi kutunun kendi renginde baslik cubugu */
  html[data-skin="win98"] :is(.fc-box, .oc-box, .fm-node) {
    background: #c0c0c0; color: #000; border: 2px solid; border-color: var(--w98-window-b); box-shadow: var(--w98-window-s), 2px 2px 0 rgba(0, 0, 0, .3);
  }
  html[data-skin="win98"] .fc-box.onay { border-style: solid; outline: 1px dashed #000; outline-offset: -5px; }
  html[data-skin="win98"] .fc-box.son { border-color: var(--w98-window-b); box-shadow: var(--w98-window-s), 0 0 0 2px #008000; }
  html[data-skin="win98"] :is(.fc-box.sel, .oc-box.sel) { outline: 2px dotted #000; outline-offset: 2px; }
  html[data-skin="win98"] :is(.fc-head, .oc-head, .fm-node-head) {
    margin: 1px; padding: 3px 4px 3px 6px; min-height: 22px; border-bottom: 0; color: #fff; text-shadow: 1px 1px 0 rgba(0, 0, 0, .55);
    background: linear-gradient(90deg, color-mix(in srgb, var(--c, #000080) 62%, #000), color-mix(in srgb, var(--c, #000080) 90%, #000));
    --text: #fff; --muted: #eef; --faint: #dde;
  }
  html[data-skin="win98"] :is(.fc-head, .oc-head, .fm-node-head) b { font-size: 12px; font-weight: 700; color: #fff; }
  html[data-skin="win98"] .fc-head i { background: #c0c0c0; border: 1px solid; border-color: var(--w98-raised-b); }
  html[data-skin="win98"] .fc-head em { color: #fff; }
  html[data-skin="win98"] :is(.fc-head, .oc-head, .fm-node-head) .fc-n { background: #c0c0c0; color: #000; text-shadow: none; border-color: var(--w98-raised-b); }
  html[data-skin="win98"] :is(.fc-head, .oc-head, .fm-node-head) :is(button, .btn) { text-shadow: none; }
  html[data-skin="win98"] .fc-card { background: #fff; border: 1px solid; border-color: var(--w98-soft-sunken-b); }
  html[data-skin="win98"] .fc-card:hover { border-color: var(--w98-soft-sunken-b); background: #e4e8f4; }
  html[data-skin="win98"] .fc-card.sel { background: #000080; color: #fff; box-shadow: none; --muted: #dfe4ff; --faint: #c3cbef; }
  html[data-skin="win98"] :is(.fc-teams, .oc-foot) { border-color: #808080; }
  html[data-skin="win98"] .fc-team { background: #fff; border: 1px solid #808080; border-left: 3px solid var(--tc); }
  html[data-skin="win98"] :is(.fc-sock, .oc-sock, .fm-sock) { background: #c0c0c0; border-width: 2px; }
  html[data-skin="win98"] .fc-edge-x { background: #c0c0c0; color: #000; border: 1px solid; border-color: var(--w98-raised-b); box-shadow: var(--w98-raised-s), 0 0 0 2px var(--wc, #808080); opacity: 1; font-weight: 700; }
  html[data-skin="win98"] .fc-edge-x:hover { background: #c0c0c0; color: #c00000; border-color: var(--w98-raised-b); }
  html[data-skin="win98"] .oc-top { --c: #000080; border-width: 2px; padding: 2px 6px 10px; }
  html[data-skin="win98"] .oc-top-title { margin: 0 -4px 6px; padding: 3px 6px; color: #fff; background: var(--w98-title); letter-spacing: 0; text-transform: none; }

  /* paletler (akisa takim ekle, akis listesi) */
  html[data-skin="win98"] :is(.fc-pal-team, .fm-pal-flow, .ord-list li) {
    background: #c0c0c0; color: #000; border: 1px solid; border-color: var(--w98-raised-b); box-shadow: var(--w98-raised-s);
  }
  html[data-skin="win98"] .fc-pal-team { border-left: 5px solid var(--tc); }
  html[data-skin="win98"] .fm-pal-flow { border-left: 5px solid var(--c); }
  html[data-skin="win98"] :is(.fc-pal-team, .fm-pal-flow):hover { transform: none; box-shadow: var(--w98-raised-s); }
  html[data-skin="win98"] :is(.fc-pal-team, .fm-pal-flow):active { border-color: var(--w98-pressed-b); box-shadow: var(--w98-pressed-s); }
  html[data-skin="win98"] .fm-enter { padding: 2px 8px; font-size: 11px; font-weight: 700; }

  /* piramit: her birim bir pencere, baslik kendi renginde */
  html[data-skin="win98"] .pyr-node.unit { border-top: 1px solid #dfdfdf; }
  html[data-skin="win98"] .pyr-node.unit .pyr-head {
    margin: 1px 1px 4px; padding: 4px 6px; color: #fff; text-shadow: 1px 1px 0 rgba(0, 0, 0, .55);
    background: linear-gradient(90deg, color-mix(in srgb, var(--c, #000080) 62%, #000), color-mix(in srgb, var(--c, #000080) 90%, #000));
    --muted: #eef;
  }
  html[data-skin="win98"] .pyr-node.unit .pyr-head b { font-size: 13px; }
  html[data-skin="win98"] .pyr-node.top { border-width: 2px; }
  html[data-skin="win98"] :is(.pyr-node.person.lead, .pyr-leaders) { background: #c0c0c0; }
  html[data-skin="win98"] .pyr-node.person.lead { outline: 1px dotted #000; outline-offset: -5px; }
  html[data-skin="win98"] :is(.pyr-node.unit, .pyr-node.person):hover { box-shadow: var(--w98-window-s); border-color: var(--w98-window-b); }
  html[data-skin="win98"] .pyr-boss { background: #fff; border: 1px solid; border-color: var(--w98-soft-sunken-b); }
  html[data-skin="win98"] :is(.pyr-leaders-title, .pyr-top-title) { color: #000080; letter-spacing: 0; text-transform: none; font-size: 12px; }
  html[data-skin="win98"] .pyr-tree li::before, html[data-skin="win98"] .pyr-tree li::after, html[data-skin="win98"] .pyr-tree ul::before { border-color: #000; }
  html[data-skin="win98"] .pyr-add button:hover { background: #dfdfdf; color: #000080; }
  html[data-skin="win98"] .pyr-unit-title { border-left: 6px solid var(--c, #808080); }
  html[data-skin="win98"] .pyr-cl { border: 1px dashed #000; background: color-mix(in srgb, var(--cc) 16%, #c0c0c0); box-shadow: none; }
  html[data-skin="win98"] .pyr-cl-u { background: #fff; border: 1px solid #808080; border-left: 4px solid var(--c); }
  html[data-skin="win98"] :is(.pyr-node.drop-on, .pyr-leaders.drop-on, .pyr-loose.drop-on, .pyr-cl.drop-on, .oc-box.drop-on, .oc-top.drop-on, .fc-box.drop-on) {
    outline: 2px dotted #000 !important; outline-offset: 2px; box-shadow: var(--w98-window-s); transform: none; background: var(--w98-dither);
  }

  /* telefonda dokunma alani yine buyuk */
  @media (max-width: 860px) {
    html[data-skin="win98"] :is(.pick span, .pick-add, .inv-fchip, .sh-quick button, .quick-set button, .inv-add, .inv-filter button) { min-height: 40px; }
    html[data-skin="win98"] .inv-sheet :is(.input, select.input) { height: 40px; font-size: 15px; }
    html[data-skin="win98"] .inv-sheet .modal-foot .btn { height: 42px; font-size: 14px; }
    html[data-skin="win98"] .inv-tabs a { padding: 7px 12px 6px; }
  }

  /* ================================================================ MAC OS 8 */
  html[data-skin="mac"] :is(.oc-sock, .fc-sock, .fm-sock, .fc-edge-x, .meet-kick, .meet-p, .pp-ok, .hue, .sw:not(.inv-stripe), .pyr-face, .inv-word::before, .inv-pill::before) { border-radius: 50% !important; }
  html[data-skin="mac"] .main > .inv > :is(.inv-head, .inv-tip, .inv-chiprow, .inv-empty, .inv-legend),
  html[data-skin="mac"] .main > :is(.kf-h, .kf-chips) { --text: #000; --muted: #1e1e3a; --faint: #2e2e4e; --accent: #14145a; }
  html[data-skin="mac"] .inv-head h1 { font-size: 19px; font-weight: 700; }
  html[data-skin="mac"] .inv-tip { font-size: 13px; }
  html[data-skin="mac"] .inv-rowlabel { font-size: 13px; }

  html[data-skin="mac"] :is(.inv-tile, .or-card, .kf-card, .kf-person, .as-stat, .pyr-node, .pyr-unit-title, .pyr-wrap, .pyr-leaders, .fc-palette,
    .list-box, .choice, .oc-top, .pyr-cl, .pyr-clusters) {
    background: #dddddd; color: #000; border: 1px solid #000; box-shadow: var(--mac-raised), var(--mac-drop);
  }
  html[data-skin="mac"] :is(.add-box, .sh-amount, .plus-edit, .fm-live) { background: #eeeeee; border: 1px solid #555; box-shadow: inset 1px 1px #b5b5b5; }
  html[data-skin="mac"] :is(.inv-tile, .list-box, .choice):hover { border-color: #000; background: #e6e6e6; }
  html[data-skin="mac"] :is(.inv-tile, .choice, .list-box):active { transform: none; background: #c8c8c8; box-shadow: inset 1px 1px #9a9a9a; }
  html[data-skin="mac"] .inv-tile:focus-visible { outline: 2px solid #9999cc; outline-offset: 2px; }
  html[data-skin="mac"] :is(.inv-tile.lv-warn, .inv-tile.lv-danger) { box-shadow: var(--mac-raised), var(--mac-drop), inset 4px 0 var(--lv); }
  html[data-skin="mac"] :is(.or-card.late, .kf-card.warn, .kf-person.warn, .as-stat.warn, .kf-card.light-warn) { box-shadow: var(--mac-raised), var(--mac-drop), inset 4px 0 var(--warn); }
  html[data-skin="mac"] :is(.as-stat.danger, .kf-card.light-danger) { box-shadow: var(--mac-raised), var(--mac-drop), inset 4px 0 var(--danger); }
  html[data-skin="mac"] :is(.as-stat.ok, .kf-card.light-ok) { box-shadow: var(--mac-raised), var(--mac-drop), inset 4px 0 var(--ok); }
  html[data-skin="mac"] .or-card.st-kargoda { box-shadow: var(--mac-raised), var(--mac-drop), inset 4px 0 #33339a; }
  html[data-skin="mac"] .or-card { gap: 8px; padding: 10px 12px; }
  html[data-skin="mac"] .kf-card { padding: 10px 12px; }

  html[data-skin="mac"] .inv-tile { min-height: 184px; padding: 10px 10px 0; gap: 4px; }
  html[data-skin="mac"] .inv-tile:has(.inv-stripe) { padding-top: 18px; }
  html[data-skin="mac"] .inv-tile .inv-stripe { height: 7px; box-shadow: none; border-bottom: 1px solid #000; border-radius: 0 !important; }
  html[data-skin="mac"] .inv-ico { font-size: 34px; }
  html[data-skin="mac"] .inv-name { font-size: 14px; font-weight: 700; }
  html[data-skin="mac"] .inv-qty b { font-size: 30px; font-weight: 700; letter-spacing: 0; }
  html[data-skin="mac"] .inv-qty small { font-size: 13px; }
  html[data-skin="mac"] .inv-next { font-size: 12px; }
  /* doluluk: platin ilerleme cubugu */
  html[data-skin="mac"] .inv-gauge { height: 12px; background: #eeeeee; border: 1px solid #000; box-shadow: inset 1px 1px #9a9a9a; }
  html[data-skin="mac"] .inv-gauge i { background: linear-gradient(color-mix(in srgb, var(--lv) 45%, #fff), var(--lv) 60%, color-mix(in srgb, var(--lv) 75%, #000)); border-right: 1px solid #000; }
  html[data-skin="mac"] .inv-word {
    margin: 6px -10px 0; padding: 4px 10px; font-size: 12px; font-weight: 700; color: var(--lv-ink);
    background: linear-gradient(#f4f4f4, #d6d6d6); border-top: 1px solid #8a8a8a;
  }
  html[data-skin="mac"] .inv-word::before, html[data-skin="mac"] .inv-pill::before { width: 10px; height: 10px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55), inset 2px 2px rgba(255, 255, 255, .55); }
  html[data-skin="mac"] .inv-pill { padding: 2px 9px; font-size: 12px; font-weight: 700; background: #fff; border: 1px solid #888; }
  html[data-skin="mac"] .inv-pill.big { font-size: 14px; padding: 4px 11px; }
  html[data-skin="mac"] :is(.inv-chip, .or-kind, .fc-n, .pyr-flag) { background: #fff; color: #000; font-weight: 400; border: 1px solid #888; }

  html[data-skin="mac"] :is(.chips3 span, .kind-tiles span, .pick span, .or-k span, .or-carrier span, .sh-kind span, .pp-card, .swp > span,
    .inv-fchip, .kf-chip, .aw-tab, .lt-chip, .inv-filter button, .sh-nums button, .sh-quick button, .quick-set button, .sh-step, .nf-b,
    .add-btns button, .sh-plain, .sh-all, .inv-add, .or-deliver, .sh-ok, .fm-enter, .mf-box .mf-tools button, .fc-mini, .oc-go,
    .aw-tile, .lead-tile, .owner-tile, .pp-tile, .as-st) {
    background: var(--mac-fill); color: #000; font-weight: 400; border: 1px solid #555; border-style: solid; border-radius: 4px !important;
    box-shadow: inset 1px 1px rgba(255, 255, 255, .7); text-decoration: none; filter: none;
  }
  html[data-skin="mac"] :is(.chips3 span, .kind-tiles span, .pick span, .or-k span, .or-carrier span, .inv-fchip, .kf-chip, .aw-tab, .inv-filter button,
    .sh-nums button, .sh-quick button, .quick-set button, .sh-step, .nf-b, .add-btns button, .sh-plain, .sh-all, .fm-enter, .mf-box .mf-tools button,
    .fc-mini, .oc-go, .lt-chip, .as-st, .inv-add, .or-deliver, .sh-ok):active:not(:disabled) {
    transform: none; background: var(--mac-fill-pressed); color: #fff; box-shadow: none;
  }
  html[data-skin="mac"] :is(.chips3 input:checked + span, .kind-tiles input:checked + span, .pick input:checked + span, .or-k input:checked + span,
    .or-carrier input:checked + span, .sh-kind input:checked + span, .pp-i input:checked + .pp-card, .swp input:checked + span,
    .inv-fchip.on, .kf-chip.on, .aw-tab.on, .inv-filter button.on, .sh-nums button.on, .sh-quick button.on, .aw-tile:has(input:checked),
    .lead-tile.on, .owner-tile:has(input:checked), .pp-tile:has(input:checked), .list-box.on, .choice.on) {
    background: #8e8eb8; color: #fff; font-weight: 700; border-color: #33339a; transform: none; box-shadow: inset 1px 1px rgba(0, 0, 0, .35);
    --muted: #e6e6ff; --faint: #d0d0f0;
  }
  html[data-skin="mac"] #inv-undo { background: #ffffcc; color: #000; border: 1px solid #000; box-shadow: var(--mac-drop); font-size: 13px; }
  html[data-skin="mac"] #inv-undo button { background: var(--mac-fill); color: #000; font-weight: 700; border: 1px solid #000; border-radius: 4px !important; min-height: 30px; font-size: 13px; }
  html[data-skin="mac"] #inv-undo button:active { background: var(--mac-fill-pressed); color: #fff; }
  html[data-skin="mac"] :is(.chips3, .kind-tiles, .pick, .sh-kind, .pp-i, .swp) input:focus-visible + :is(span, .pp-card) { outline: 2px solid #9999cc; outline-offset: 2px; }
  html[data-skin="mac"] .chips3 span { min-height: 50px; font-size: 13px; }
  html[data-skin="mac"] .chips3 span i { font-size: 20px; }
  html[data-skin="mac"] .kind-tiles span { min-height: 78px; font-size: 13px; font-weight: 700; }
  html[data-skin="mac"] .kind-tiles span i { font-size: 28px; }
  html[data-skin="mac"] :is(.pick span, .pick-add, .inv-fchip, .sh-quick button, .quick-set button) { min-height: 32px; padding: 0 12px; font-size: 13px; }
  html[data-skin="mac"] :is(.or-k span, .or-carrier span) { padding: 5px 11px; font-size: 12px; }
  html[data-skin="mac"] .kf-chip { padding: 5px 12px; font-size: 13px; }
  html[data-skin="mac"] .inv-filter button { min-height: 32px; font-size: 13px; }
  html[data-skin="mac"] .inv-filter b { min-width: 22px; height: 18px; padding: 0 5px; font-size: 11px; background: #fff; border: 1px solid #888; border-radius: 9px !important; color: #000; }
  /* varsayilan dugme: kalin halkali */
  html[data-skin="mac"] :is(.inv-add:not(.ghost), .or-deliver, .sh-ok) {
    margin: 3px; font-weight: 700; border-color: #000; box-shadow: inset 1px 1px rgba(255, 255, 255, .7), 0 0 0 1px #dddddd, 0 0 0 3px #000;
  }
  html[data-skin="mac"] .inv-add { min-height: 30px; padding: 0 14px; font-size: 13px; }
  html[data-skin="mac"] .or-deliver { padding: 8px; font-size: 13px; color: #1a5e1a; }
  html[data-skin="mac"] .sh-ok { min-height: 40px; font-size: 15px; color: var(--k); }
  html[data-skin="mac"] .sh-ok:disabled { color: #8a8a8a; border-color: #8a8a8a; opacity: 1; box-shadow: none; }
  html[data-skin="mac"] .sh-kind span { min-height: 56px; font-size: 15px; font-weight: 700; color: var(--k); }
  html[data-skin="mac"] .sh-kind.count input:checked + span { background: #8e8eb8; color: #fff; }
  html[data-skin="mac"] .sh-plain.danger { color: #b00000; }
  html[data-skin="mac"] :is(.plus-chip, .pick-add, .pyr-plus, .swp-add > span) {
    background: transparent; color: #33339a; font-weight: 700; border: 1px dashed #33339a; box-shadow: none; border-radius: 4px !important;
  }
  html[data-skin="mac"] :is(.plus-chip, .pick-add, .pyr-plus):hover { background: #ccccff; color: #000; border-style: solid; }
  html[data-skin="mac"] .plus-emos button.on { background: #ccccff; border: 1px solid #33339a; }
  html[data-skin="mac"] .sh-stepper { grid-template-columns: 52px 1fr 52px; }
  html[data-skin="mac"] .sh-step { height: 52px; font-size: 24px; font-weight: 700; }
  html[data-skin="mac"] .sh-val b { font-size: 46px; font-weight: 700; }
  html[data-skin="mac"] .sh-nums button { min-height: 40px; font-size: 18px; font-weight: 700; }
  html[data-skin="mac"] .nf-b { height: 34px; font-size: 20px; }
  html[data-skin="mac"] .nf { grid-template-columns: 40px minmax(0, 1fr) auto 40px; }
  html[data-skin="mac"] .sh-qty b { font-size: 38px; font-weight: 700; }
  html[data-skin="mac"] .sh-ico { font-size: 44px; }
  html[data-skin="mac"] :is(.sh-lock, .sh-mat, .sh-person, .or-auto, .pyr-resp-row) { background: #eeeeee; border: 1px solid #888; box-shadow: var(--mac-raised); }
  html[data-skin="mac"] .pyr-resp-row.empty { background: transparent; border: 1px dashed #555; box-shadow: none; }
  html[data-skin="mac"] .or-auto.soon { border-color: #33339a; }

  html[data-skin="mac"] .inv-sheet :is(.input, select.input) { height: 32px; font-size: 14px; }
  html[data-skin="mac"] .inv-sheet textarea.input { height: auto; min-height: 56px; padding-top: 5px; font-size: 14px; }
  html[data-skin="mac"] .inv-sheet .nf-in { font-size: 18px; font-weight: 700; }
  html[data-skin="mac"] .inv-sheet .modal-body { font-size: 13px; }
  html[data-skin="mac"] .inv-sheet .field.big > span { font-size: 13px; }
  html[data-skin="mac"] .inv-sheet .modal-foot .btn { height: 32px; font-size: 13px; font-weight: 400; border-radius: 4px !important; }
  html[data-skin="mac"] .inv-sheet .modal-foot .btn.primary { font-weight: 700; }
  html[data-skin="mac"] .inv-sheet .modal-head h2 { font-size: 13px; }
  html[data-skin="mac"] .inv-search { height: 30px !important; font-size: 13px; }
  html[data-skin="mac"] :is(.sh-ask, .sh-result) { font-size: 15px; }
  html[data-skin="mac"] .sh-sec h3 { font-size: 13px; }
  html[data-skin="mac"] .hist { font-size: 13px; border-bottom-color: #e2e2e2; }
  html[data-skin="mac"] :is(.sh-more, details.more) > summary { min-height: 30px; font-size: 13px; color: #33339a; }
  html[data-skin="mac"] :is(.sh-more, details.more) > summary::before { content: "\25B8"; margin-right: 6px; color: #000; }
  html[data-skin="mac"] :is(.sh-more, details.more)[open] > summary::before { content: "\25BE"; }
  html[data-skin="mac"] details.more > summary::after { content: none; }

  /* sekmeler: platin klasor sekmeleri */
  html[data-skin="mac"] .inv-tabs { gap: 2px; padding-left: 8px; margin-bottom: 0; border-bottom: 1px solid #000; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
  html[data-skin="mac"] .inv-tabs a {
    margin: 3px 0 0; padding: 4px 14px; background: var(--mac-fill); color: #000; font-weight: 400; white-space: nowrap;
    border: 1px solid #000; border-bottom: 0; border-radius: 5px 5px 0 0 !important; box-shadow: inset 1px 1px #fff;
  }
  html[data-skin="mac"] .inv-tabs a.on { margin: 0 0 -1px; padding: 6px 16px; background: #eeeeee; font-weight: 700; }
  html[data-skin="mac"] .inv-tabs + * { margin-top: 10px; }
  html[data-skin="mac"] .inv-tabs a b { background: #33339a; color: #fff; border-radius: 8px !important; }

  html[data-skin="mac"] .or-step i { width: 32px; height: 32px; font-size: 16px; background: var(--mac-fill); border: 1px solid #555; box-shadow: var(--mac-raised); border-radius: 50% !important; }
  html[data-skin="mac"] .or-step.done i { background: #ccccff; border-color: #33339a; }
  html[data-skin="mac"] .or-step.now i { box-shadow: 0 0 0 2px #dddddd, 0 0 0 4px #33339a; border-color: #000; }
  html[data-skin="mac"] .or-step b { font-size: 11px; font-weight: 700; }
  html[data-skin="mac"] .or-line { height: 4px; background: #eeeeee; border: 1px solid #555; margin-bottom: 24px; }
  html[data-skin="mac"] .or-track code { background: #fff; border: 1px solid #888; font-family: Monaco, "Courier New", monospace; }
  html[data-skin="mac"] .or-mini { border-bottom: 1px solid #b5b5b5; }
  html[data-skin="mac"] .or-more { color: #000; }

  html[data-skin="mac"] .as-wrap { background: #fff; border: 1px solid #000; box-shadow: inset 1px 1px #b5b5b5, var(--mac-drop); }
  html[data-skin="mac"] .as-table { font-size: 12px; }
  html[data-skin="mac"] .as-table th {
    padding: 5px 8px; background: linear-gradient(#f4f4f4, #d6d6d6); color: #000; font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0;
    border-bottom: 1px solid #555; box-shadow: inset -1px 0 #9a9a9a, inset 1px 0 #fff;
  }
  html[data-skin="mac"] .as-table td { border-bottom-color: #e2e2e2; padding: 5px 8px; }
  html[data-skin="mac"] .as-row:hover { background: #ececf8; }
  html[data-skin="mac"] .as-stat b { font-size: 19px; }
  html[data-skin="mac"] .as-st { padding: 2px 9px; font-size: 11px; border-radius: 9px !important; }
  html[data-skin="mac"] .as-st.lv-ok { color: #1a5e1a; }
  html[data-skin="mac"] .as-st.lv-warn { color: var(--inv-yellow-ink); }
  html[data-skin="mac"] .as-st.lv-danger { color: #b00000; }
  html[data-skin="mac"] .as-mono { font-family: Monaco, "Courier New", monospace; }

  html[data-skin="mac"] .doc-row { background: #fff; border: 1px solid #888; box-shadow: inset 1px 1px #e0e0e0; padding: 5px 8px; }
  html[data-skin="mac"] .doc-row:hover { background: #ececf8; }
  html[data-skin="mac"] .doc-ico { font-size: 22px; }
  html[data-skin="mac"] .docs-more summary { color: #33339a; }

  html[data-skin="mac"] .scan-view { border: 1px solid #000; box-shadow: var(--mac-drop); }

  /* istatistik "Kisaca": balon yardimi gibi ozet */
  html[data-skin="mac"] .kf-summary { background: #ffffcc; color: #000; border: 1px solid #000; font-size: 13px; line-height: 1.55; padding: 10px 14px; box-shadow: var(--mac-drop); }
  html[data-skin="mac"] .kf-summary .good { color: #1a5e1a; }
  html[data-skin="mac"] .kf-summary .bad { color: #b00000; }
  html[data-skin="mac"] .kf-ico { font-size: 28px; }
  html[data-skin="mac"] .kf-title { font-size: 12px; color: #444; font-weight: 700; }
  html[data-skin="mac"] .kf-big { font-size: 21px; font-weight: 700; }
  html[data-skin="mac"] .kf-card.big .kf-big { font-size: 27px; }
  html[data-skin="mac"] .kf-sub { font-size: 11.5px; color: #444; }
  html[data-skin="mac"] .kf-trend.good { color: #1a5e1a; }
  html[data-skin="mac"] .kf-trend.bad { color: #b00000; }
  html[data-skin="mac"] .kf-person { padding: 8px 10px; }
  html[data-skin="mac"] .kf-h { font-size: 14px; }

  html[data-skin="mac"] .meet-banner { background: #dddddd; color: #000; border: 1px solid #000; box-shadow: var(--mac-raised), var(--mac-drop); padding: 0 10px 6px; flex-wrap: wrap; }
  html[data-skin="mac"] .meet-banner::before { content: ""; flex: 1 0 100%; height: 12px; margin: 0 -10px; background: var(--mac-stripes); border-bottom: 1px solid #8a8a8a; }
  html[data-skin="mac"] .meet-p.on { box-shadow: 0 0 0 2px #1f7a1f; }
  html[data-skin="mac"] .meet-kick { background: var(--mac-fill); color: #000; border: 1px solid #000; font-weight: 700; }

  /* tuval kutulari: cizgili baslik, ustte kutunun rengi sekme gibi */
  html[data-skin="mac"] :is(.fc-box, .oc-box, .fm-node) {
    background: #dddddd; color: #000; border: 1px solid #000; border-top: 5px solid var(--c); box-shadow: var(--mac-raised), var(--mac-drop);
  }
  html[data-skin="mac"] .fc-box.onay { border-style: dashed; border-top-style: solid; }
  html[data-skin="mac"] .fc-box.son { border-color: #1f7a1f; border-top-color: var(--c); box-shadow: var(--mac-raised), var(--mac-drop), 0 0 0 1px #1f7a1f; }
  html[data-skin="mac"] :is(.fc-box.sel, .oc-box.sel) { outline: 2px solid #33339a; outline-offset: 2px; }
  html[data-skin="mac"] :is(.fc-head, .oc-head, .fm-node-head) { padding: 3px 6px; min-height: 22px; background: var(--mac-stripes); border-bottom: 1px solid #8a8a8a; }
  html[data-skin="mac"] :is(.fc-head, .oc-head, .fm-node-head) > b { flex: 0 1 auto; margin-right: auto; padding: 0 6px; background: #dddddd; font-size: 12px; font-weight: 700; }
  html[data-skin="mac"] :is(.fc-head, .oc-head, .fm-node-head) > :is(i, em, .fc-n, .pic, .av, button, .btn, span) { box-shadow: 0 0 0 2px #dddddd; }
  html[data-skin="mac"] .fc-head em { background: #dddddd; color: #444; }
  html[data-skin="mac"] .fc-head i { border: 1px solid #000; }
  html[data-skin="mac"] .fc-card { background: #fff; border: 1px solid #888; box-shadow: inset 1px 1px #e8e8e8; }
  html[data-skin="mac"] .fc-card:hover { border-color: #000; background: #f6f6ff; }
  html[data-skin="mac"] .fc-card.sel { background: #33339a; color: #fff; border-color: #000; box-shadow: none; --muted: #dcdcff; --faint: #c4c4f0; }
  html[data-skin="mac"] :is(.fc-teams, .oc-foot) { border-color: #a0a0a0; }
  html[data-skin="mac"] .fc-team { background: #fff; border: 1px solid #888; border-left: 3px solid var(--tc); }
  html[data-skin="mac"] :is(.fc-sock, .oc-sock, .fm-sock) { background: var(--mac-fill); }
  html[data-skin="mac"] .fc-edge-x { background: var(--mac-fill); color: #000; border: 2px solid var(--wc, #555); box-shadow: 0 0 0 1px #000, var(--mac-drop); opacity: 1; font-weight: 700; }
  html[data-skin="mac"] .fc-edge-x:hover { background: #b00000; color: #fff; border-color: #b00000; }
  html[data-skin="mac"] .oc-top { --c: #33339a; padding: 0 10px 10px; }
  html[data-skin="mac"] .oc-top-title { display: flex; gap: 6px; align-items: center; margin: 0 -10px 8px; padding: 3px 6px; color: #000; letter-spacing: 0; text-transform: none; font-size: 12px; border-bottom: 1px solid #8a8a8a; }
  html[data-skin="mac"] .oc-top-title::before, html[data-skin="mac"] .oc-top-title::after { content: ""; flex: 1; align-self: stretch; min-height: 12px; background: var(--mac-stripes); }

  html[data-skin="mac"] :is(.fc-pal-team, .fm-pal-flow, .ord-list li) { background: var(--mac-fill); color: #000; border: 1px solid #555; box-shadow: var(--mac-raised); }
  html[data-skin="mac"] .fc-pal-team { border-left: 5px solid var(--tc); }
  html[data-skin="mac"] .fm-pal-flow { border-left: 5px solid var(--c); }
  html[data-skin="mac"] :is(.fc-pal-team, .fm-pal-flow):hover { transform: none; border-color: #000; box-shadow: var(--mac-raised); }
  html[data-skin="mac"] .fm-enter { padding: 2px 8px; font-size: 11px; font-weight: 700; }

  html[data-skin="mac"] .pyr-node.unit { border-top: 6px solid var(--c, #888); }
  html[data-skin="mac"] .pyr-node.unit .pyr-head { background: var(--mac-stripes); border-bottom: 1px solid #8a8a8a; padding: 4px 6px; margin-bottom: 4px; }
  html[data-skin="mac"] .pyr-node.unit .pyr-head > .grow { flex: 0 1 auto; margin-right: auto; padding: 0 6px; background: #dddddd; }
  html[data-skin="mac"] .pyr-node.unit .pyr-head > :not(.grow) { box-shadow: 0 0 0 2px #dddddd; }
  html[data-skin="mac"] .pyr-node.unit .pyr-head b { font-size: 13px; }
  html[data-skin="mac"] :is(.pyr-node.person.lead, .pyr-leaders) { background: #e4e4f4; }
  html[data-skin="mac"] .pyr-node.person.lead { border-color: #33339a; }
  html[data-skin="mac"] :is(.pyr-node.unit, .pyr-node.person):hover { box-shadow: var(--mac-raised), var(--mac-drop); background: #e6e6e6; }
  html[data-skin="mac"] .pyr-boss { background: #fff; border: 1px solid #888; box-shadow: inset 1px 1px #e0e0e0; }
  html[data-skin="mac"] :is(.pyr-leaders-title, .pyr-top-title) { color: #33339a; letter-spacing: 0; text-transform: none; font-size: 12px; }
  html[data-skin="mac"] .pyr-tree li::before, html[data-skin="mac"] .pyr-tree li::after, html[data-skin="mac"] .pyr-tree ul::before { border-color: #333; }
  html[data-skin="mac"] .pyr-add button:hover { background: #ccccff; color: #000; }
  html[data-skin="mac"] .pyr-unit-title { border-left: 6px solid var(--c, #888); }
  html[data-skin="mac"] .pyr-cl { border: 1px dashed #000; background: color-mix(in srgb, var(--cc) 14%, #dddddd); box-shadow: none; }
  html[data-skin="mac"] .pyr-cl-u { background: #fff; border: 1px solid #888; border-left: 4px solid var(--c); }
  html[data-skin="mac"] :is(.pyr-node.drop-on, .pyr-leaders.drop-on, .pyr-loose.drop-on, .pyr-cl.drop-on, .oc-box.drop-on, .oc-top.drop-on, .fc-box.drop-on) {
    outline: 2px solid #33339a !important; outline-offset: 2px; transform: none; background: #ccccff;
  }

  @media (max-width: 860px) {
    html[data-skin="mac"] :is(.pick span, .pick-add, .inv-fchip, .sh-quick button, .quick-set button, .inv-add, .inv-filter button) { min-height: 40px; }
    html[data-skin="mac"] .inv-sheet :is(.input, select.input) { height: 40px; font-size: 15px; }
    html[data-skin="mac"] .inv-sheet .modal-foot .btn { height: 42px; font-size: 14px; }
    html[data-skin="mac"] .inv-tabs a { padding: 7px 14px 6px; }
  }
}
@media screen {
  html[data-skin="win98"] .follow-bar { background: #ffffe1; border: 1px solid #000; color: #000; }
  html[data-skin="mac"] .follow-bar { background: #ffffcc; border: 1px solid #000; color: #000; box-shadow: var(--mac-drop); }
}

@media screen {
  html[data-skin="win98"] :is(.pers-strip > div) { background: #c0c0c0; border: 1px solid; border-color: var(--w98-window-b); box-shadow: var(--w98-window-s); }
  html[data-skin="win98"] .pers-strip b { font-size: 20px; }
  html[data-skin="win98"] .main > :is(.pers-filters) { --text: #000; }
  html[data-skin="win98"] .pers-row:hover td { background: #e4e8f4; }
  html[data-skin="win98"] .pers-hero .av.lg { box-shadow: 0 0 0 1px #808080; }
  html[data-skin="mac"] :is(.pers-strip > div) { background: #dddddd; border: 1px solid #000; box-shadow: var(--mac-raised), var(--mac-drop); }
  html[data-skin="mac"] .pers-strip b { font-size: 21px; }
  html[data-skin="mac"] .pers-row:hover td { background: #ececf8; }
}