/* ── Tab panels ── */
    .tab-panel {
      display: none;
      margin-bottom: var(--page-padding-bottom);
      min-width: 0;
      overflow: visible;
    }

    .tab-panel.active { display: block; }

    .tab-panel.active.tab-enter-forward {
      animation: tabPanelSwipeForward 320ms cubic-bezier(0.16, 0.92, 0.28, 1) both;
      will-change: transform, opacity;
    }

    .tab-panel.active.tab-enter-backward {
      animation: tabPanelSwipeBackward 320ms cubic-bezier(0.16, 0.92, 0.28, 1) both;
      will-change: transform, opacity;
    }

    @keyframes tabPanelSwipeForward {
      0% {
        opacity: 0.78;
        transform: translate3d(32px, 0, 0) scale(0.996);
      }
      72% {
        opacity: 1;
        transform: translate3d(-2px, 0, 0) scale(1);
      }
      100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
      }
    }

    @keyframes tabPanelSwipeBackward {
      0% {
        opacity: 0.78;
        transform: translate3d(-32px, 0, 0) scale(0.996);
      }
      72% {
        opacity: 1;
        transform: translate3d(2px, 0, 0) scale(1);
      }
      100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .tab-panel.active.tab-enter-forward,
      .tab-panel.active.tab-enter-backward {
        animation: none;
        will-change: auto;
      }
    }

    .app-content {
      flex: 1 1 auto;
      min-width: 0;
      min-height: 0;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: none;
      overscroll-behavior-y: contain;
      padding-bottom: calc(var(--app-shell-bottom-reserve) + var(--page-padding-bottom));
      scroll-padding-bottom: calc(var(--app-shell-bottom-reserve) + var(--page-padding-bottom));
    }

    .is-standalone-pwa .app-content {
      /* iOS standalone can freeze nested momentum scrollers after edge-swipe attempts. */
      -webkit-overflow-scrolling: auto;
    }

    .is-standalone-pwa .tab-panel { margin-bottom: 0; }

    /* ── Shared position helpers ── */
    .ui-surface,
    .month-nav,
    .dashboard-card,
    .quick-stats-grid,
    .average-shift-card,
    .shifts-section,
    .form-section,
    .salary-card,
    .settings-card,
    .stat-card,
    .quick-stat,
    .shifts-overview-chip,
    .optional-card,
    .glass-select-trigger,
    .glass-select-menu,
    .sheet-url-text {
      position: relative;
      min-width: 0;
      isolation: isolate;
    }

    .dashboard-head,
    .quick-stats-head,
    .average-shift-head,
    .form-title-row,
    .month-nav-top,
    .section-header-row,
    .settings-row,
    .settings-row-stack,
    .sheet-url-row,
    .confirm-btns,
    .shift-main-row,
    .shift-card-top,
    .shift-title-row,
    .shift-actions,
    .average-shift-row,
    .salary-subtotal-row,
    .salary-summary-row,
    .salary-net-row,
    .salary-row {
      min-width: 0;
    }

    /* ── Month Navigator ── */
    .month-nav {
      display: grid;
      gap: 12px;
      padding: 16px;
      margin-bottom: 16px;
      border-radius: var(--r-card);
      background: var(--card);
      border: 1px solid var(--border);
      overflow: visible;
    }

    .month-nav::before,
    .month-nav::after { content: none; }

    .month-nav-top {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) 34px;
      align-items: center;
      gap: 8px;
    }

    .month-header {
      text-align: center;
      min-width: 0;
    }

    .month-title {
      font-size: 18px;
      font-weight: 700;
      line-height: 1.1;
      color: var(--text);
    }

    .month-quarter {
      margin-top: 3px;
      font-size: 10px;
      font-weight: 800;
      color: var(--muted);
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .month-btn {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--border);
      color: var(--text);
      width: 34px;
      height: 34px;
      border-radius: var(--r-inner);
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, border-color 0.15s;
      -webkit-tap-highlight-color: transparent;
    }

    .month-btn:active {
      background: var(--accent-dim);
      border-color: rgba(56, 189, 248, 0.2);
    }

    /* ── Quarter month tabs ── */
    .month-tabs {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 4px;
      background: rgba(0, 0, 0, 0.25);
      border-radius: var(--r-pill);
      padding: 3px;
    }

    .month-tab {
      appearance: none;
      min-height: 34px;
      border-radius: var(--r-pill);
      background: transparent;
      border: none;
      color: var(--muted);
      font-family: 'Manrope', sans-serif;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.16s, color 0.16s;
      -webkit-tap-highlight-color: transparent;
    }

    .month-tab::before { content: none; }

    .month-tab.active {
      background: var(--card-hi);
      color: var(--accent);
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    }

    .month-tab:active { opacity: 0.8; }

    /* ── Dashboard card (hours) ── */
    .dashboard-card {
      background: var(--card-hi);
      border: 1px solid var(--border);
      border-radius: var(--r-card);
      padding: var(--c-pad);
      margin-bottom: 16px;
      overflow: visible;
    }

    .dashboard-card::before,
    .dashboard-card::after { content: none; }

    .dashboard-card > * { position: relative; z-index: 1; }

    /* Accent risk line above label */
    .dashboard-head {
      display: grid;
      gap: 6px;
      margin-bottom: 14px;
    }

    .dashboard-head::before {
      content: none;
      display: none;
    }

    .dashboard-eyebrow {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .dashboard-value {
      display: flex;
      align-items: flex-end;
      flex-wrap: wrap;
      gap: 8px;
      min-width: 0;
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(40px, 11.5vw, 56px);
      font-weight: 700;
      line-height: 1;
      letter-spacing: -0.03em;
      color: var(--text);
      -webkit-text-fill-color: var(--text);
      font-variant-numeric: tabular-nums;
    }

    .dashboard-value #statWorked {
      white-space: nowrap;
      min-width: 0;
    }

    .dashboard-total {
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(18px, 5vw, 22px);
      font-weight: 500;
      color: var(--sub);
      vertical-align: baseline;
    }

    /* Progress bar — 2px thin */
    .progress-track {
      margin-top: 2px;
      background: rgba(255, 255, 255, 0.06);
      border-radius: var(--r-pill);
      height: 2px;
      overflow: visible;
      position: relative;
    }

    .progress-fill {
      height: 100%;
      width: 0%;
      border-radius: inherit;
      background: var(--accent);
      transition: width 0.3s ease;
      position: relative;
    }

    /* Dot at the end of progress bar */
    .progress-fill::after {
      content: '';
      position: absolute;
      right: -4px;
      top: 50%;
      transform: translateY(-50%);
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 12px var(--accent-glow);
    }

    .progress-marker {
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 8px;
      height: 8px;
      border-radius: 50%;
      border: 2px solid currentColor;
      background: var(--card-hi);
      color: var(--sub);
      pointer-events: none;
      z-index: 2;
    }

    .progress-marker::after {
      content: '';
      position: absolute;
      left: 50%;
      top: -11px;
      transform: translateX(-50%);
      width: 1px;
      height: 9px;
      background: currentColor;
      opacity: 0.55;
    }

    .progress-marker-today { color: var(--accent); }
    .progress-marker-month { color: var(--holiday); }

    .dashboard-meta-grid {
      margin-top: 10px;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 8px;
    }

    .dashboard-meta-item {
      display: grid;
      gap: 2px;
      min-width: 0;
      padding: 8px 10px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: rgba(255, 255, 255, 0.02);
    }

    .dashboard-month-income {
      margin-top: 0;
      min-height: auto;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
    }

    .dashboard-norms {
      margin-top: 12px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .dashboard-norm-item {
      display: grid;
      gap: 2px;
      padding: 7px 9px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: rgba(255, 255, 255, 0.02);
      min-width: 0;
      justify-items: center;
      text-align: center;
    }

    .dashboard-norm-label {
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      min-width: 0;
    }

    .dashboard-norm-value {
      font-family: 'JetBrains Mono', monospace;
      font-size: 14px;
      line-height: 1.15;
      font-weight: 700;
      color: var(--text);
      white-space: nowrap;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      font-variant-numeric: tabular-nums;
    }

    .dashboard-month-income-label {
      font-size: 13px;
      color: var(--sub);
      font-weight: 600;
      letter-spacing: 0.01em;
      text-transform: none;
      line-height: 1.25;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .dashboard-month-income-value {
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(20px, 5.3vw, 25px);
      font-weight: 700;
      line-height: 1.2;
      color: var(--green);
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.02em;
      white-space: nowrap;
      flex-shrink: 0;
      text-align: right;
    }

    .dashboard-sub {
      margin-top: 9px;
      display: flex;
      align-items: center;
      gap: 6px;
      width: 100%;
      justify-content: center;
      padding: 0;
      color: var(--sub);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.3;
      border: none;
      background: transparent;
    }

    .dashboard-sub::before {
      content: '';
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: currentColor;
      opacity: 0.92;
      box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.04);
      flex: 0 0 auto;
    }

    .dashboard-sub.ok {
      color: var(--green);
    }

    .dashboard-sub.overtime {
      color: var(--warn);
    }

    .dashboard-sub.remaining {
      color: var(--holiday);
    }

    .dashboard-card.state-ok .progress-fill,
    .dashboard-card.state-ok .progress-fill::after {
      background: var(--green);
      box-shadow: 0 0 10px rgba(74, 222, 128, 0.24);
    }

    .dashboard-card.state-overtime .progress-fill,
    .dashboard-card.state-overtime .progress-fill::after {
      background: var(--warn);
      box-shadow: 0 0 10px rgba(245, 158, 11, 0.24);
    }

    .dashboard-average {
      margin-top: 0;
      font-size: 13px;
      line-height: 1.35;
      color: var(--text);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .dashboard-average.is-muted { color: var(--muted); }

    .dashboard-average-label {
      font-size: 10px;
      color: var(--muted);
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    /* ── Quick stats grid (3 columns) ── */
    .quick-stats-grid {
      display: grid;
      gap: var(--gap);
      margin-bottom: 20px;
      padding: 14px;
      border-radius: var(--r-card);
      background: var(--card);
      border: 1px solid var(--border);
      overflow: visible;
    }

    .quick-stats-grid::before,
    .quick-stats-grid::after { content: none; }

    .quick-stats-grid > * { position: relative; z-index: 1; }

    .quick-stats-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      min-width: 0;
    }

    .quick-stats-title {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .quick-stats-note {
      font-size: 10px;
      color: var(--muted);
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .quick-stats-row {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      align-items: stretch;
    }

    .quick-stat {
      position: relative;
      padding: 6px 9px 7px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      min-height: 64px;
      min-width: 0;
    }

    .quick-stat + .quick-stat {
      border-left: 1px solid var(--border);
      padding-left: 14px;
    }

    .quick-stat-value {
      font-family: 'JetBrains Mono', monospace;
      font-size: 20px;
      font-weight: 700;
      line-height: 1;
      color: var(--text);
      min-width: 0;
      max-width: 100%;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: clip;
      font-variant-numeric: tabular-nums;
    }

    .quick-stat-value.night   { color: var(--accent); }
    .quick-stat-value.holiday { color: var(--holiday); }
    .quick-stat-value.shifts  { color: var(--text); }

    .quick-stat.quick-stat-primary .quick-stat-value {
      font-size: 24px;
      font-weight: 700;
    }

    .quick-stat.quick-stat-primary .stat-label {
      font-size: 10px;
      letter-spacing: 0.12em;
    }

    .quick-stats-grid .stat-label {
      display: block;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
      text-align: center;
      min-height: 2.35em;
      overflow: visible;
    }

    .quick-stat-value.is-updated {
      animation: quickMetricPulse 0.45s ease;
    }

    @keyframes quickMetricPulse {
      0%   { opacity: 1; }
      30%  { opacity: 0.6; }
      100% { opacity: 1; }
    }

    /* ── Section headers ── */
    .section-header {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 12px;
    }

    .section-header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .section-link {
      background: transparent;
      border: none;
      color: var(--accent);
      font-family: 'Manrope', sans-serif;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      padding: 4px 0;
      -webkit-tap-highlight-color: transparent;
    }

    .section-link:active { opacity: 0.7; }

    /* ── Average shift card ── */
    .average-shift-card {
      display: grid;
      gap: 10px;
      margin-bottom: 16px;
      padding: 14px;
      border-radius: var(--r-card);
      background: var(--card);
      border: 1px solid var(--border);
      overflow: visible;
    }

    .average-shift-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
    }

    .average-shift-title {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .average-shift-meta {
      font-size: 11px;
      color: var(--sub);
      line-height: 1.3;
      text-align: right;
      min-width: 0;
      max-width: 58%;
    }

    .average-shift-list {
      display: grid;
      gap: 8px;
    }

    .average-shift-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      padding-top: 8px;
      border-top: 1px solid var(--border);
    }

    .average-shift-row:first-child {
      padding-top: 0;
      border-top: none;
    }

    .average-shift-label {
      font-size: 13px;
      color: var(--sub);
      line-height: 1.35;
      min-width: 0;
      max-width: 56%;
    }

    .average-shift-value {
      font-family: 'JetBrains Mono', monospace;
      font-size: 15px;
      color: var(--text);
      font-weight: 700;
      letter-spacing: -0.01em;
      white-space: nowrap;
      flex-shrink: 0;
      font-variant-numeric: tabular-nums;
    }

    /* ── Stat cards (standalone) ── */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 20px;
    }

    .stat-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--r-card);
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .stat-label {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .stat-value {
      font-family: 'JetBrains Mono', monospace;
      font-size: 18px;
      font-weight: 700;
      color: var(--text);
      line-height: 1.2;
    }

    .stat-value.overtime  { color: var(--warn); }
    .stat-value.ok        { color: var(--green); }
    .stat-value.remaining { color: var(--sub); }
    .stat-value.night     { color: var(--accent); }
    .stat-value.holiday   { color: var(--holiday); }

    /* ── Salary cards ── */
    .salary-card,
    .settings-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--r-card);
      padding: 18px;
      margin-bottom: 14px;
      overflow: visible;
    }

    .settings-card {
      display: grid;
      gap: 14px;
    }

    .salary-summary-card {
      padding: 20px 18px;
    }

    .salary-month-nav {
      margin-bottom: 12px;
    }

    .salary-total-amount {
      margin-top: 8px;
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(40px, 10vw, 54px);
      line-height: 1;
      font-weight: 700;
      letter-spacing: -0.04em;
      color: var(--green);
      font-variant-numeric: tabular-nums;
    }

    .salary-total-caption {
      margin-top: 8px;
      color: var(--sub);
      font-size: 13px;
    }

    .salary-disclaimer {
      font-size: 11px;
      line-height: 1.45;
      color: var(--muted);
      margin: 8px 4px 16px;
    }

    .salary-list {
      display: grid;
      gap: 0;
      margin-bottom: 12px;
    }

    .salary-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
    }

    .salary-row:last-child { border-bottom: none; }

    .salary-row-label {
      font-size: 13px;
      color: var(--sub);
      line-height: 1.35;
      min-width: 0;
    }

    .salary-row-amount {
      font-family: 'JetBrains Mono', monospace;
      font-size: 14px;
      font-weight: 700;
      color: var(--green);
      white-space: nowrap;
      flex-shrink: 0;
    }

    .salary-subtotal-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--border);
      margin-top: 4px;
    }

    .salary-subtotal-label {
      font-size: 12px;
      font-weight: 700;
      color: var(--sub);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .salary-subtotal-value {
      font-family: 'JetBrains Mono', monospace;
      font-size: 16px;
      font-weight: 700;
      color: var(--green);
    }

    .salary-summary-list {
      display: grid;
      gap: 0;
      margin-bottom: 12px;
    }

    .salary-summary-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 8px 0;
      border-bottom: 1px solid var(--border);
      font-size: 13px;
      color: var(--sub);
    }

    .salary-summary-row:last-child { border-bottom: none; }

    .salary-summary-row span:last-child {
      font-family: 'JetBrains Mono', monospace;
      font-weight: 600;
      color: var(--sub);
    }

    .salary-net-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding-top: 14px;
      border-top: 1px solid var(--border-hi);
      margin-top: 4px;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--sub);
    }

    .salary-net-row span:last-child {
      font-family: 'JetBrains Mono', monospace;
      font-size: 20px;
      font-weight: 700;
      color: var(--green);
      text-transform: none;
      letter-spacing: -0.02em;
    }

    .salary-hero {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .salary-title {
      font-size: 22px;
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: var(--text);
    }

    .salary-text {
      color: var(--sub);
      font-size: 14px;
      line-height: 1.6;
    }

    .salary-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: var(--r-pill);
      background: var(--accent-dim);
      border: 1px solid rgba(56, 189, 248, 0.2);
      color: var(--accent);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      width: fit-content;
    }

    /* ── Settings ── */
    .settings-list {
      display: grid;
      gap: 14px;
      margin-top: 12px;
    }

    .settings-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid var(--border);
      width: 100%;
    }

    .settings-row:last-child { border-bottom: none; }
    .settings-row:first-child { padding-top: 0; }

    .settings-row-stack {
      align-items: flex-start;
    }

    .salary-settings-sheet {
      display: grid;
      gap: 0;
    }

    .salary-settings-header {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) 34px;
      align-items: center;
      column-gap: 8px;
      margin-bottom: 6px;
      position: sticky;
      top: -1px;
      z-index: 2;
      padding-bottom: 8px;
      background: var(--card);
    }

    .salary-settings-header .sheet-title {
      margin-bottom: 0;
      text-align: center;
      font-size: 17px;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .salary-settings-header-spacer {
      width: 34px;
      height: 34px;
      display: block;
      pointer-events: none;
    }

    .salary-settings-back-btn {
      width: 34px;
      height: 34px;
      border-radius: var(--r-inner);
      border: 1px solid var(--border);
      background: var(--card-hi);
      color: var(--text);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      padding: 0;
    }

    .salary-settings-back-btn svg {
      width: 18px;
      height: 18px;
      display: block;
    }

    .salary-settings-back-btn:active {
      border-color: var(--border-hi);
      color: var(--accent);
    }

    .salary-settings-actions {
      margin-top: 8px;
      display: flex;
      justify-content: center;
    }

    .btn-sheet-save {
      width: min(100%, 420px);
      min-height: 44px;
      border-radius: 12px;
      border: 1px solid rgba(56, 189, 248, 0.32);
      background: linear-gradient(180deg, rgba(56, 189, 248, 0.95), rgba(56, 189, 248, 0.82));
      color: #001624;
      font-family: 'Manrope', sans-serif;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.01em;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      box-shadow: 0 8px 24px rgba(56, 189, 248, 0.25);
    }

    .btn-sheet-save:active {
      transform: translateY(1px);
      box-shadow: 0 4px 14px rgba(56, 189, 248, 0.18);
    }

    .settings-label {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
    }

    .settings-value {
      font-size: 13px;
      color: var(--sub);
      text-align: right;
    }

    .settings-note {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.35;
      margin-top: 4px;
    }

    .settings-page-title {
      font-size: 24px;
      font-weight: 800;
      line-height: 1.15;
      margin: 10px 0 16px;
      letter-spacing: -0.03em;
      color: var(--text);
    }

    .settings-section-title {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
      margin: 16px 0 10px;
    }

    .settings-input-wrap,
    .settings-inline-field {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: auto;
      max-width: 100%;
    }

    .settings-input {
      width: min(100%, 240px);
      background: var(--card-hi);
      border: 1px solid var(--border);
      border-radius: var(--r-inner);
      color: var(--text);
      font-family: 'JetBrains Mono', monospace;
      font-size: 14px;
      padding: 10px 12px;
      outline: none;
      transition: border-color 0.15s;
      -webkit-appearance: none;
      appearance: none;
    }

    .settings-input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-dim);
    }

    .settings-input.compact {
      width: 100px;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    .settings-unit {
      color: var(--sub);
      font-size: 13px;
      white-space: nowrap;
    }

    /* ── Segmented control ── */
    .segmented {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      background: rgba(0, 0, 0, 0.25);
      border-radius: var(--r-pill);
      padding: 3px;
      gap: 3px;
      overflow: hidden;
    }

    .segmented.two {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .segmented-btn {
      appearance: none;
      border: none;
      background: transparent;
      color: var(--muted);
      padding: 9px 12px;
      min-height: 38px;
      font-family: 'Manrope', sans-serif;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      border-radius: var(--r-pill);
      transition: background 0.15s, color 0.15s;
      -webkit-tap-highlight-color: transparent;
    }

    .segmented-btn::before { content: none; }

    .segmented-btn.active {
      background: var(--card-hi);
      color: var(--accent);
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    }

    /* ── Docs nav card ── */
    .docs-nav-card {
      display: grid;
      gap: 12px;
    }

    .docs-nav-title {
      font-size: 18px;
      font-weight: 700;
      color: var(--text);
    }

    .docs-month-tabs {
      display: flex;
      gap: 4px;
      background: rgba(0, 0, 0, 0.25);
      border-radius: var(--r-pill);
      padding: 3px;
    }

    .docs-tab-btn {
      flex: 1;
      appearance: none;
      border: none;
      background: transparent;
      color: var(--muted);
      font-family: 'Manrope', sans-serif;
      font-size: 13px;
      font-weight: 700;
      padding: 8px 10px;
      min-height: 34px;
      border-radius: var(--r-pill);
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
      -webkit-tap-highlight-color: transparent;
    }

    .docs-tab-btn::before { content: none; }

    .docs-tab-btn.active {
      background: var(--card-hi);
      color: var(--accent);
    }

    /* ── Sheet / overlay common ── */
    .docs-pro-wrap {
      position: relative;
      min-height: 0;
    }

    .docs-pro-wrap.is-locked .docs-shell {
      filter: blur(10px) saturate(0.85);
      opacity: 0.52;
      pointer-events: none;
      user-select: none;
      transition: filter 0.22s ease, opacity 0.22s ease;
    }

    .docs-pro-wrap:not(.is-locked) .docs-shell {
      filter: none;
      opacity: 1;
      transition: filter 0.22s ease, opacity 0.22s ease;
    }

    .docs-pro-gate {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px;
      z-index: calc(var(--layer-scrim) + 5);
      pointer-events: none;
    }

    .docs-pro-gate.hidden {
      display: none;
    }

    .docs-pro-card {
      width: min(100%, 380px);
      background: rgba(14, 18, 28, 0.96);
      border: 1px solid rgba(65, 176, 255, 0.28);
      border-radius: var(--r-card);
      padding: 18px 16px;
      text-align: center;
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.34);
      pointer-events: auto;
    }

    .docs-pro-icon {
      width: 34px;
      height: 34px;
      margin: 0 auto 8px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(56, 189, 248, 0.12);
      border: 1px solid rgba(56, 189, 248, 0.28);
      color: #74d5ff;
    }

    .docs-pro-icon svg {
      width: 18px;
      height: 18px;
      display: block;
    }

    .docs-pro-icon svg path,
    .docs-pro-icon svg rect {
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .docs-pro-icon svg rect {
      stroke-width: 1.8;
    }

    .docs-pro-icon svg path:last-child {
      stroke-width: 2;
    }

    .docs-pro-title {
      font-size: 16px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 6px;
    }

    .docs-pro-text {
      font-size: 13px;
      line-height: 1.45;
      color: var(--sub);
      margin-bottom: 14px;
    }

    .docs-pro-unlock-btn {
      width: 100%;
      min-height: 42px;
      justify-content: center;
    }

    .overlay {
      position: fixed;
      inset: 0;
      z-index: var(--layer-scrim);
      display: flex;
      align-items: flex-end;
      background: rgba(0, 0, 0, 0.6);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.22s ease, visibility 0.22s ease;
      pointer-events: none;
    }

    .overlay.is-open,
    .overlay.visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    body.has-open-overlay .bottom-nav {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .bottom-sheet {
      width: 100%;
      max-width: 480px;
      margin: 0 auto;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--r-card) var(--r-card) 0 0;
      padding: 20px 20px calc(30px + var(--safe-bottom));
      max-height: 90dvh;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      transform: translateY(100%);
      transition: transform 0.28s cubic-bezier(0.25, 1, 0.35, 1);
    }

    .overlay.is-open .bottom-sheet,
    .overlay.visible .bottom-sheet {
      transform: translateY(0);
    }

    .sheet-title {
      font-size: 18px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 20px;
    }

    .sheet-url-text {
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      color: var(--sub);
      padding: 10px 12px;
      background: var(--card-hi);
      border-radius: var(--r-inner);
      border: 1px solid var(--border);
      word-break: break-all;
    }

    .sheet-url-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
    }

    .btn-sheet-close,
    .btn-copy {
      height: 34px;
      padding: 0 12px;
      border-radius: var(--r-inner);
      background: var(--card-hi);
      border: 1px solid var(--border);
      color: var(--sub);
      font-family: 'Manrope', sans-serif;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      flex-shrink: 0;
      -webkit-tap-highlight-color: transparent;
    }

    .install-guide-sheet {
      position: relative;
      display: grid;
      gap: 14px;
      padding-top: 18px;
      background: linear-gradient(180deg, rgba(56, 189, 248, 0.05) 0%, rgba(56, 189, 248, 0) 28%);
    }

    #overlayAddScreen {
      z-index: calc(var(--layer-scrim) + 10);
      align-items: center;
      justify-content: center;
      padding:
        max(14px, var(--safe-top))
        12px
        max(14px, var(--safe-bottom));
      background: rgba(3, 7, 16, 0.68);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      overscroll-behavior: contain;
      touch-action: none;
    }

    #overlayAddScreen .install-guide-sheet {
      width: min(440px, 100%);
      max-width: 440px;
      margin: 0;
      padding: 18px 16px 16px;
      max-height: min(92dvh, calc(100dvh - 24px));
      border-radius: 20px;
      border: 1px solid var(--border-hi);
      background:
        linear-gradient(180deg, rgba(56, 189, 248, 0.06) 0%, rgba(56, 189, 248, 0) 24%),
        var(--card);
      box-shadow: 0 26px 62px rgba(0, 0, 0, 0.45);
      overflow-y: auto;
      touch-action: pan-y;
      transform: translateY(12px) scale(0.985);
      transition: transform 0.24s cubic-bezier(0.25, 1, 0.35, 1);
    }

    #overlayAddScreen.is-open .install-guide-sheet,
    #overlayAddScreen.visible .install-guide-sheet {
      transform: translateY(0) scale(1);
    }

    .install-guide-sheet > * {
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.2s ease, transform 0.2s ease;
    }

    #overlayAddScreen .install-guide-sheet > * {
      position: relative;
      opacity: 1;
      transform: none;
      transition: none;
    }

    .overlay.is-open .install-guide-sheet > *,
    .overlay.visible .install-guide-sheet > * {
      opacity: 1;
      transform: translateY(0);
    }

    .overlay.is-open .install-guide-sheet > *:nth-child(2),
    .overlay.visible .install-guide-sheet > *:nth-child(2) { transition-delay: 20ms; }
    .overlay.is-open .install-guide-sheet > *:nth-child(3),
    .overlay.visible .install-guide-sheet > *:nth-child(3) { transition-delay: 40ms; }
    .overlay.is-open .install-guide-sheet > *:nth-child(4),
    .overlay.visible .install-guide-sheet > *:nth-child(4) { transition-delay: 60ms; }
    .overlay.is-open .install-guide-sheet > *:nth-child(5),
    .overlay.visible .install-guide-sheet > *:nth-child(5) { transition-delay: 80ms; }

    .install-guide-header {
      display: grid;
      gap: 8px;
    }

    .install-guide-kicker {
      display: inline-flex;
      justify-self: start;
      align-items: center;
      padding: 4px 10px;
      border-radius: var(--r-pill);
      border: 1px solid rgba(56, 189, 248, 0.24);
      background: rgba(56, 189, 248, 0.1);
      color: var(--accent);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      line-height: 1.2;
    }

    .install-guide-sheet .sheet-title {
      margin-bottom: 0;
      font-size: 22px;
      line-height: 1.08;
      letter-spacing: -0.02em;
    }

    .install-guide-subtitle {
      max-width: 36ch;
      font-size: 14px;
      line-height: 1.42;
      color: rgba(238, 242, 248, 0.82);
    }

    .install-guide-platforms {
      display: grid;
      gap: 10px;
    }

    .install-guide-note {
      font-size: 12px;
      line-height: 1.45;
      color: rgba(255, 227, 176, 0.96);
      background: rgba(245, 158, 11, 0.1);
      border: 1px solid rgba(245, 158, 11, 0.24);
      border-radius: 12px;
      padding: 9px 11px;
    }

    #overlayAddScreen .install-guide-note {
      z-index: 0;
    }

    .install-guide-card {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 120%),
        var(--card-hi);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 13px 12px;
      display: grid;
      gap: 10px;
      box-shadow: 0 12px 24px rgba(3, 7, 18, 0.22);
      overflow: hidden;
    }

    .install-guide-card.is-primary {
      border-color: rgba(56, 189, 248, 0.34);
      background:
        linear-gradient(180deg, rgba(56, 189, 248, 0.11) 0%, rgba(56, 189, 248, 0.03) 100%),
        var(--card-hi);
    }

    .install-guide-card.is-secondary {
      opacity: 0.95;
    }

    .install-guide-card-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      line-height: 1.3;
    }

    .install-guide-steps {
      margin: 0;
      padding: 0;
      display: grid;
      gap: 8px;
      list-style: none;
      counter-reset: install-step;
    }

    .install-guide-steps li {
      position: relative;
      min-height: 24px;
      padding-left: 32px;
      color: var(--sub);
      font-size: 13px;
      line-height: 1.4;
    }

    .install-guide-steps li::before {
      counter-increment: install-step;
      content: counter(install-step);
      position: absolute;
      top: 0;
      left: 0;
      width: 22px;
      height: 22px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      font-weight: 700;
      color: var(--accent);
      border: 1px solid rgba(56, 189, 248, 0.28);
      background: rgba(56, 189, 248, 0.08);
      line-height: 1;
    }

    .install-guide-steps li .ig-browser-icon,
    .install-guide-steps li .ig-share-icon,
    .install-guide-steps li .ig-add-icon,
    .install-guide-steps li .ig-dots-icon {
      display: inline-block;
      vertical-align: middle;
      position: relative;
      top: -1px;
      flex-shrink: 0;
    }
    .install-guide-steps li .ig-browser-icon { width: 15px; height: 15px; }
    .install-guide-steps li .ig-share-icon   { width: 14px; height: 16px; }
    .install-guide-steps li .ig-add-icon     { width: 15px; height: 15px; }
    .install-guide-steps li .ig-dots-icon    { width:  5px; height: 14px; }

    .install-guide-link-block {
      display: grid;
      gap: 8px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)),
        rgba(255, 255, 255, 0.01);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 12px;
      overflow: hidden;
    }

    .install-guide-link-label {
      font-size: 11px;
      font-weight: 700;
      color: var(--muted);
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }

    .install-guide-link-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: stretch;
    }

    .install-guide-link-value {
      min-width: 0;
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      color: rgba(238, 242, 248, 0.9);
      background: rgba(255, 255, 255, 0.025);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 10px;
      padding: 10px 12px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .install-guide-link-actions {
      display: block;
    }

    .install-guide-open-btn {
      width: 100%;
      min-height: 36px;
      border: 1px solid var(--border-hi);
      background: rgba(255, 255, 255, 0.03);
      color: var(--text);
    }

    .install-guide-open-btn:active {
      background: rgba(255, 255, 255, 0.05);
    }

    .install-guide-copy-btn {
      min-width: 96px;
      height: 36px;
      background: var(--accent-dim);
      border: 1px solid rgba(56, 189, 248, 0.22);
      color: var(--accent);
      transition: background 0.15s, color 0.15s, border-color 0.15s;
      align-self: stretch;
    }

    .install-guide-copy-btn:active {
      background: rgba(56, 189, 248, 0.18);
    }

    .install-guide-copy-btn.is-success {
      background: rgba(56, 189, 248, 0.18);
      border-color: rgba(56, 189, 248, 0.32);
      color: var(--accent);
    }

    .install-guide-copy-btn.is-error {
      background: rgba(244, 63, 94, 0.08);
      color: var(--danger);
      border-color: rgba(244, 63, 94, 0.22);
    }

    .install-guide-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      justify-items: center;
      width: 100%;
      padding-top: 2px;
    }

    .install-guide-close-btn {
      min-width: 0;
      width: 100%;
      height: 38px;
      background: rgba(255, 255, 255, 0.03);
      color: var(--sub);
    }

    .install-guide-close-btn:hover,
    .install-guide-close-btn:active {
      color: var(--text);
      border-color: var(--border-hi);
    }

    @media (max-width: 380px) {
      .install-guide-sheet {
        gap: 12px;
      }

      #overlayAddScreen {
        padding: max(10px, var(--safe-top)) 10px max(10px, var(--safe-bottom));
      }

      #overlayAddScreen .install-guide-sheet {
        width: 100%;
        max-height: min(94dvh, calc(100dvh - 20px));
        border-radius: 18px;
      }

      .install-guide-sheet .sheet-title {
        font-size: 20px;
      }

      .install-guide-link-row {
        grid-template-columns: minmax(0, 1fr) auto;
      }

      .install-guide-open-btn,
      .install-guide-close-btn {
        width: 100%;
      }

      .install-guide-actions {
        justify-content: stretch;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .install-guide-sheet > * {
        opacity: 1;
        transform: none;
        transition: none !important;
      }
    }

    .confirm-btns {
      display: grid;
      gap: 10px;
      margin-top: 16px;
    }

    /* ── Shift actions menu ── */
    .shift-actions-backdrop {
      position: fixed;
      inset: 0;
      z-index: 2;
      background: transparent;
      pointer-events: auto;
      touch-action: manipulation;
    }

    .shift-actions-backdrop.hidden { display: none; }

    .shift-actions-menu {
      position: fixed;
      z-index: var(--layer-overlay);
      background: var(--card);
      border: 1px solid var(--border-hi);
      border-radius: var(--r-card);
      padding: 6px;
      min-width: 180px;
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
      display: grid;
      gap: 2px;
    }

    .shift-actions-menu.hidden { display: none; }

    .shift-action-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border: none;
      background: transparent;
      color: var(--text);
      font-family: 'Manrope', sans-serif;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      border-radius: var(--r-inner);
      text-align: left;
      -webkit-tap-highlight-color: transparent;
      transition: background 0.12s;
    }

    .shift-action-btn:hover,
    .shift-action-btn:active {
      background: var(--card-hi);
    }

    .shift-action-btn.danger { color: var(--danger); }

    /* ── UI overlay root ── */
    .ui-overlay-root {
      position: fixed;
      inset: 0;
      z-index: var(--layer-overlay);
      pointer-events: none;
      overflow: visible;
    }

    .ui-overlay-root > * { pointer-events: auto; }