/* DARK03: color-only native scrollbars, including teleported/dynamic containers.
 * Keep platform sizing, overflow and input behavior. Forced colors stay native.
 * The standard API owns thumb/track; legacy WebKit also supports thumb hover. */
@media (forced-colors: none) {
  html.dark {
    --vg-scrollbar-track: var(--vg-surface-sidebar); /* #111C30 */
    --vg-scrollbar-thumb: 97 123 158; /* #617B9E */
    --vg-scrollbar-thumb-hover: 130 155 186; /* #829BBA */
  }

  html.dark,
  html.dark * {
    scrollbar-color: rgb(var(--vg-scrollbar-thumb)) rgb(var(--vg-scrollbar-track));
  }

  @supports not (scrollbar-color: red blue) {
    html.dark::-webkit-scrollbar,
    html.dark *::-webkit-scrollbar,
    html.dark::-webkit-scrollbar-track,
    html.dark *::-webkit-scrollbar-track,
    html.dark::-webkit-scrollbar-corner,
    html.dark *::-webkit-scrollbar-corner {
      background-color: rgb(var(--vg-scrollbar-track));
    }

    html.dark::-webkit-scrollbar-thumb,
    html.dark *::-webkit-scrollbar-thumb {
      background-color: rgb(var(--vg-scrollbar-thumb));
    }

    html.dark::-webkit-scrollbar-thumb:hover,
    html.dark *::-webkit-scrollbar-thumb:hover {
      background-color: rgb(var(--vg-scrollbar-thumb-hover));
    }
  }
}

/* One component authority; approved surface, action and focus tokens serve both themes. */
.vg-appearance { position:relative; flex-shrink:0; font-family:var(--vg-font-family); font-size:.8125rem; color:rgb(var(--vg-text-primary)); }
.vg-appearance [hidden] { display:none; }
.vg-appearance__capsule { display:flex; align-items:center; min-height:36px; border:1px solid rgb(var(--vg-border)); border-radius:999px; background:rgb(var(--vg-surface-panel)); }
.vg-appearance button { font:inherit; color:inherit; cursor:pointer; transition:background-color .12s ease,border-color .12s ease; }
.vg-appearance__quick,.vg-appearance__menu { display:flex; align-items:center; justify-content:center; min-height:34px; border:0; background:transparent; }
.vg-appearance__quick { width:36px; border-radius:999px 0 0 999px; }
.vg-appearance__quick svg { width:19px; height:19px; }
.vg-appearance__menu { gap:3px; padding:0 8px 0 4px; border-radius:0 999px 999px 0; }
.vg-appearance__menu svg { width:16px; height:16px; }
.vg-appearance__indicator { font-size:.6875rem; color:rgb(var(--vg-text-secondary)); }
.vg-appearance button:hover:not(:disabled) { background:rgb(var(--vg-surface-hover, var(--vg-surface-muted))); }
.vg-appearance button:focus-visible { outline:2px solid rgb(var(--vg-border-focus)); outline-offset:2px; }
.vg-appearance :disabled { opacity:.6; cursor:wait; }
.vg-appearance__panel { position:fixed; inset-inline-end:12px; top:64px; z-index:60; width:min(368px,calc(100vw - 24px)); padding:8px; border:1px solid rgb(var(--vg-border)); border-radius:var(--vg-radius-control); background:rgb(var(--vg-surface-panel)); box-shadow:var(--vg-shadow-panel); max-height:calc(100dvh - 80px); overflow:auto; overscroll-behavior:contain; }
.vg-appearance__title { margin:4px 8px 8px; font-weight:600; }
.vg-appearance__option { display:flex; align-items:center; gap:10px; width:100%; min-height:58px; text-align:start; padding:10px; border:0; border-radius:6px; background:transparent; }
.vg-appearance__option-icon { width:20px; height:20px; flex:none; color:rgb(var(--vg-text-secondary)); }
.vg-appearance__option-copy { min-width:0; flex:1; }
.vg-appearance__option-title { display:block; font-weight:600; line-height:1.5; }
.vg-appearance__description { display:block; margin:0; font-size:12px; font-weight:400; line-height:1.5; color:rgb(var(--vg-text-secondary)); }
.vg-appearance__option .vg-appearance__description { white-space:nowrap; }
.vg-appearance .vg-appearance__option[aria-checked="true"],.vg-appearance .vg-appearance__option[aria-checked="true"]:hover { background:rgb(var(--vg-brand-soft)); color:rgb(var(--vg-brand-soft-text)); }
.vg-appearance__option[aria-checked="true"] .vg-appearance__option-icon { color:inherit; }
.vg-appearance__check { visibility:hidden; width:18px; height:18px; flex:none; }
.vg-appearance__option[aria-checked="true"] .vg-appearance__check { visibility:visible; }
.vg-appearance__schedule { padding:4px; }
.vg-appearance__schedule-heading { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.vg-appearance__schedule-heading h2 { margin:0; font:inherit; font-weight:600; }
.vg-appearance__back { display:flex; align-items:center; justify-content:center; width:32px; height:32px; flex:none; border:0; border-radius:6px; background:transparent; }
.vg-appearance__back svg { width:20px; height:20px; }
.vg-appearance__kinds { display:flex; gap:4px; margin:16px 0 12px; padding:4px; border:1px solid rgb(var(--vg-border)); border-radius:var(--vg-radius-control); }
.vg-appearance__kinds button { flex:1; min-height:32px; padding:4px 6px; border:0; border-radius:4px; background:transparent; }
.vg-appearance__days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; margin-bottom:12px; }
.vg-appearance__days button { min-width:0; min-height:36px; padding:4px; border:1px solid rgb(var(--vg-border-control)); border-radius:6px; background:transparent; }
.vg-appearance :is(.vg-appearance__kinds,.vg-appearance__days) button[aria-pressed="true"] { background:rgb(var(--vg-brand-soft)); color:rgb(var(--vg-brand-soft-text)); border-color:rgb(var(--vg-brand)); font-weight:600; }
.vg-appearance__times { display:flex; gap:10px; margin:12px 0; }
.vg-appearance__field { flex:1; min-width:0; }
.vg-appearance__field label { display:block; font-size:12px; color:rgb(var(--vg-text-secondary)); }
.vg-appearance__field .fi-input-wrp { margin-top:5px; }
.vg-appearance__secondary { width:100%; min-height:34px; padding:6px; border:1px solid rgb(var(--vg-border)); border-radius:6px; background:rgb(var(--vg-action-secondary-bg)); }
.vg-appearance__day-list { display:grid; gap:4px; margin:12px 0; }
.vg-appearance__day-row { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-height:34px; padding:6px 8px; border:1px solid transparent; border-radius:6px; background:transparent; text-align:start; }
.vg-appearance__day-row span:last-child { font-size:12px; color:rgb(var(--vg-text-secondary)); }
.vg-appearance__day-row[aria-expanded="true"] { border-color:rgb(var(--vg-border-control)); background:rgb(var(--vg-surface-hover, var(--vg-surface-muted))); }
.vg-appearance__day-editor { min-width:0; margin:12px 0; padding:8px; border:1px solid rgb(var(--vg-border)); border-radius:6px; }
.vg-appearance__day-editor legend { padding:0 4px; font-size:12px; font-weight:600; }
.vg-appearance__summary { margin:12px 0; font-size:12px; line-height:1.6; color:rgb(var(--vg-text-secondary)); overflow-wrap:anywhere; }
.vg-appearance .vg-appearance__save { min-height:38px; width:100%; padding:8px; border:0; border-radius:6px; background:rgb(var(--vg-action-primary-bg)); color:rgb(var(--vg-action-primary-text)); font-weight:600; }
.vg-appearance .vg-appearance__save:hover:not(:disabled) { background:rgb(var(--vg-action-primary-hover)); }
.vg-appearance .vg-appearance__save:active:not(:disabled) { background:rgb(var(--vg-action-primary-active)); }
.vg-appearance__status { margin:8px; color:rgb(var(--vg-text-secondary)); font-size:12px; }
.vg-appearance__error { display:block; margin:4px 0 0; font-size:12px; color:rgb(var(--vg-status-danger-text)); }
.vg-appearance__status:empty,.vg-appearance__error:empty { display:none; }
.vg-appearance__status[data-error="true"] { color:rgb(var(--vg-status-danger-text)); }
@media(max-width:480px) { .vg-appearance__indicator { display:none; } }
@media(max-width:360px) { .vg-appearance__option { gap:8px; padding:8px; } .vg-appearance__option .vg-appearance__description { white-space:normal; } }
@media(prefers-reduced-motion:reduce) { .vg-appearance button { transition:none; } }