:root {
  --bg: #f1f5f9; --panel: #ffffff; --text: #0f172a; --muted: #64748b; --line: #e2e8f0; --accent: #0f766e;
  --accent-text: #ffffff; --hover: #f8fafc; --stripe: #f8fafc; --alert-bg: #fef2f2; --alert-text: #b91c1c;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1120; --panel: #111827; --text: #e5e7eb; --muted: #94a3b8; --line: #243044; --accent: #2dd4bf;
    --accent-text: #042f2e; --hover: #1a2436; --stripe: #0f172a; --alert-bg: #3b1219; --alert-text: #fca5a5;
  }
}
html, body { background: var(--bg); color: var(--text); -webkit-text-size-adjust: 100%; }
body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.muted { color: var(--muted); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.toolbar { background: var(--panel); border-bottom: 1px solid var(--line); }
.alert { background: var(--alert-bg); color: var(--alert-text); border-radius: 10px; padding: .6rem .8rem; }

/* 16px fields and 44px targets: iOS Safari zooms into smaller inputs and fingers need room */
.field, .btn {
  min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text);
  padding: 0 .75rem; font-size: 16px; line-height: 1.2;
}
.field:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn { cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.btn:active { background: var(--hover); }
.btn[aria-expanded="true"] { border-color: var(--accent); }
.badge-count { display: inline-block; min-width: 1.25rem; border-radius: 999px; background: var(--accent); color: var(--accent-text);
  font-size: .75rem; line-height: 1.25rem; text-align: center; margin-left: .25rem; }

/* filters panel */
#filters { max-height: 45vh; overflow-y: auto; overscroll-behavior: contain; }
#filters .grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
#filters label { display: block; font-size: .75rem; color: var(--muted); margin-bottom: .15rem; }
#filters .pair { display: flex; gap: .4rem; }
#filters .pair .field, #filters .field { width: 100%; }

/* status badges (table and cards) */
.badge { display: inline-block; border-radius: 999px; padding: .1rem .55rem; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.badge-new { background: #dbeafe; color: #1e40af; } .badge-ok { background: #dcfce7; color: #166534; }
.badge-promo { background: #ede9fe; color: #5b21b6; } .badge-reserved { background: #ffedd5; color: #9a3412; }
.badge-warning { background: #fef9c3; color: #854d0e; } .badge-removed { background: #e5e7eb; color: #374151; }
@media (prefers-color-scheme: dark) {
  .badge-new { background: #1e3a8a; color: #dbeafe; } .badge-ok { background: #14532d; color: #dcfce7; }
  .badge-promo { background: #4c1d95; color: #ede9fe; } .badge-reserved { background: #7c2d12; color: #ffedd5; }
  .badge-warning { background: #713f12; color: #fef9c3; } .badge-removed { background: #374151; color: #e5e7eb; }
}

/* Tabulator on top of the simple theme */
.tabulator { background: var(--panel); border: 0; font-size: 14px; color: var(--text); }
.tabulator .tabulator-header, .tabulator .tabulator-header .tabulator-col { background: var(--panel); color: var(--text); border-color: var(--line); }
.tabulator .tabulator-header .tabulator-col .tabulator-col-content { padding: 10px 8px; }
.tabulator .tabulator-header .tabulator-col .tabulator-col-sorter .tabulator-arrow { border-bottom-color: var(--muted); border-top-color: var(--muted); }
.tabulator .tabulator-tableholder { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.tabulator .tabulator-row { background: var(--panel); color: var(--text); border-color: var(--line); }
.tabulator .tabulator-row.tabulator-row-even { background: var(--stripe); }
.tabulator .tabulator-row .tabulator-cell { border-color: var(--line); padding: 10px 8px; cursor: copy; }
.tabulator .tabulator-row:hover, .tabulator .tabulator-row:hover .tabulator-cell { background: var(--hover); }
.tabulator .tabulator-row .tabulator-cell.tabulator-frozen { background: inherit; }
.tabulator .tabulator-placeholder span { color: var(--muted); }
.cell-num { text-align: right; font-variant-numeric: tabular-nums; }

/* phone cards */
.prop { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: .8rem .9rem; margin-bottom: .7rem; }
.prop h2 { font-size: 1rem; font-weight: 600; line-height: 1.25; }
.prop .price { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.prop dl { display: grid; grid-template-columns: 8.5rem 1fr; gap: .35rem .6rem; font-size: .9rem; }
.prop dt { color: var(--muted); font-size: .75rem; padding-top: .1rem; }
.prop dd { overflow-wrap: anywhere; }
.prop summary { cursor: pointer; color: var(--accent); font-size: .9rem; padding: .5rem 0; touch-action: manipulation; }
.copyable, .tabulator .tabulator-row .tabulator-cell { -webkit-user-select: none; user-select: none; }
.copyable { cursor: copy; -webkit-tap-highlight-color: rgba(15, 118, 110, .25); }
.prop .copyable { display: inline-block; padding: .1rem 0; min-height: 1.5rem; }
.copied { animation: flash .7s ease-out; }
@keyframes flash { from { background: color-mix(in srgb, var(--accent) 35%, transparent); } to { background: transparent; } }
a.folder { text-decoration: none; font-size: 1.1rem; }

/* toast */
#toast { position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom)); transform: translate(-50%, 1rem); max-width: min(92vw, 28rem);
  background: #0f172a; color: #f8fafc; border-radius: 999px; padding: .6rem 1rem; font-size: .9rem; opacity: 0; pointer-events: none;
  transition: opacity .15s, transform .15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 50; box-shadow: 0 6px 20px rgba(0,0,0,.3); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { #toast, .copied { transition: none; animation: none; } }