:root {
  --fbp-ink: #17191f;
  --fbp-ink-soft: #343946;
  --fbp-paper: #fbfaf7;
  --fbp-surface: rgba(255,255,255,0.94);
  --fbp-line: rgba(26,28,35,0.12);
  --fbp-gold: #c9a24a;
  --fbp-gold-soft: #efe3bd;
  --fbp-red: #d93646;
  --fbp-green: #25664f;
}

html {
  background: var(--fbp-paper);
}

body {
  background:
    linear-gradient(180deg, #fbfaf7 0%, #f4f5f7 46%, #ffffff 100%) !important;
  color: var(--fbp-ink) !important;
  letter-spacing: 0 !important;
}

header {
  background: rgba(18,20,27,0.94) !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(201,162,74,0.32) !important;
  box-shadow: 0 18px 42px rgba(17,19,24,0.16) !important;
}

header .text-navy,
header .text-ios-label,
header h1,
header h2,
header h3,
header .font-bold,
header a,
header button {
  color: #fff !important;
}

header img {
  background: #fff;
  border: 1px solid rgba(201,162,74,0.38);
  box-shadow: 0 8px 22px rgba(0,0,0,0.22);
}

main {
  background: transparent !important;
}

.ios-card,
.card,
.template-tile,
.seg-row,
.segment-tile,
.meta-bar,
table,
.bg-white {
  background: var(--fbp-surface) !important;
  border: 1px solid var(--fbp-line) !important;
  border-radius: 8px !important;
  box-shadow: 0 18px 48px rgba(28,30,36,0.08), 0 1px 0 rgba(255,255,255,0.8) inset !important;
}

.template-tile:hover,
.ios-card:hover,
.segment-tile:hover {
  border-color: rgba(201,162,74,0.48) !important;
  box-shadow: 0 24px 60px rgba(28,30,36,0.13), 0 0 0 1px rgba(201,162,74,0.12) inset !important;
}

.rounded-3xl { border-radius: 12px !important; }
.rounded-2xl { border-radius: 10px !important; }
.rounded-xl,
.rounded-lg { border-radius: 8px !important; }

.ios-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
textarea,
select {
  background: rgba(255,255,255,0.9) !important;
  border: 1px solid rgba(32,35,43,0.16) !important;
  border-radius: 8px !important;
  color: var(--fbp-ink) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset !important;
}

.ios-input:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--fbp-gold) !important;
  box-shadow: 0 0 0 4px rgba(201,162,74,0.18) !important;
}

.ios-btn,
.btn {
  border-radius: 8px !important;
  letter-spacing: 0 !important;
}

button {
  letter-spacing: 0 !important;
}

.ios-btn-primary,
button.primary,
.btn.primary {
  background: linear-gradient(180deg, #242833 0%, #141821 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(201,162,74,0.34) !important;
  box-shadow: 0 12px 28px rgba(20,24,33,0.24) !important;
}

.ios-btn-accent {
  background: linear-gradient(180deg, #e14655 0%, #be2636 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: 0 12px 28px rgba(217,54,70,0.24) !important;
}

.ios-btn-secondary,
.btn:not(.primary) {
  background: #fff !important;
  color: var(--fbp-ink) !important;
  border: 1px solid rgba(32,35,43,0.16) !important;
}

/* NOT noise: every class in this chain is a button that owns its own fill, and
   the rule below is `!important`, so anything missing from the chain paints
   transparent no matter which stylesheet loads later. The five add-video entries
   — .fbp-add-row, .fbp-ai-btn, .fbp-rev-add, .fbp-consent-yes, .fbp-consent-no —
   each lose something specific without it: the navy fill on .fbp-add-row.is-primary
   is the whole reason that sheet reads as one obvious next step, .fbp-rev-add is
   the flow's single primary CTA, and .fbp-consent-no loses its border, which left
   "Avbryt" as a bare word beside a filled "Acceptera" on a consent dialog.
   .fbp-hint-q / .fbp-hint-x are the first-run hint system's "?" and its bubble
   close: both are navy chips that own their fill, and without the exemption the
   "?" paints invisible on every page that loads this file (app, browse,
   organizer) while still being present and clickable — the worst failure mode. */
button:not(.ios-btn):not(.btn):not(.ios-pill):not(.lang-pill):not(.primary):not(.danger):not(.green):not(.folder-card):not(.template-tile):not(.app-tile):not(.fbp-hamburger):not(.fbp-sheet-row):not(.fbp-sheet-close):not(.fbp-action-btn):not(.fbp-sb-item):not(.fbp-sb-toggle):not(.fbp-clipmenu-item):not(.fbp-pick-item):not(.fbp-pick-x):not(.fbp-add-row):not(.fbp-ai-btn):not(.fbp-rev-add):not(.fbp-consent-yes):not(.fbp-consent-no):not(.ios-modal-done):not(.ios-nav-btn):not(.ios-pick-done):not(.ios-tr-tile):not(.ios-font-opt):not(.fbp-chat-pill):not(.fbp-chat-nudge-txt):not(.fbp-chat-nudge-x):not(.fbpc-btn):not(.fbpc-send):not(.fbpc-chip):not(.fbpc-x):not(.fbpc-reset):not(.fs-done-btn):not(.fs-undo):not(.fs-arrow):not(.fs-step):not(.fs-print-btn):not(.fs-dip-btn):not(.fs-cta-red):not(.fbp-hint-q):not(.fbp-hint-x):not(.cl-btn) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.ios-btn-secondary:hover,
.ios-pill:hover,
button:hover {
  border-color: rgba(201,162,74,0.42) !important;
}

.ios-pill,
.lang-pill,
.badge {
  background: rgba(255,255,255,0.86) !important;
  color: var(--fbp-ink-soft) !important;
  border: 1px solid rgba(32,35,43,0.12) !important;
}

.ios-pill.active,
.lang-pill.active,
.step-dot.active {
  background: var(--fbp-ink) !important;
  color: #fff !important;
  border-color: rgba(201,162,74,0.48) !important;
}

.text-navy {
  color: var(--fbp-ink) !important;
}

.text-brand {
  color: var(--fbp-red) !important;
}

.bg-navy {
  background-color: var(--fbp-ink) !important;
}

.bg-brand {
  background-color: var(--fbp-red) !important;
}

.border-ios-sep,
.border-black\/5 {
  border-color: var(--fbp-line) !important;
}

thead tr,
th {
  background: #17191f !important;
  color: #f6efe0 !important;
}

tbody tr:hover {
  background: rgba(201,162,74,0.08) !important;
}

.modal-bg {
  background: rgba(12,14,18,0.62) !important;
}

video,
.drop-zone {
  border-radius: 8px !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(23,25,31,0.34) !important;
}