/* ============================================================
   Cardit — modern global layer
   Loaded LAST (after style.css, mg.css, webapp-compat.css) so it
   sets one consistent design language across every app page.

   Design tokens (shared with the modernised all-folders /
   folder-content pages):
     ink #222831 / #202733 · body #53616f
     surface #fff · panel #f5f8fa · border #dfe7eb
     accent #f66315 · accent-hover #c95300 · accent-tint #fff5ef
     chrome teal: header #127a63 · logo tile #0c5647
     radius 10px controls / 12px cards
     shadow 0 12px 28px rgba(15,33,55,.06)

   Chrome rules are unscoped (the header/sidebar chrome only
   exists on logged-in app pages). Component rules are scoped to
   .inner-pages and are visual-only (no layout dimensions) to
   stay safe across every page. The already-tailored
   .folder-content-page keeps its own styling (more specific).
   ============================================================ */

/* ---------- Top bar (black chrome) — every app page ---------- */
.sidebar-head {
  background: #0f1216;
  /* paint 1px of black past the sidebar's right edge so the sidebar-head
     (0–220px) and the .user-header (from 220px) meet with no hairline seam */
  box-shadow: 1px 0 0 0 #0f1216;
  border: none;
}

#user-header-wrap {
  background: #0f1216;
}

.user-header {
  background: #0f1216;
  border-bottom: none;
}

.user-header li {
  border-right: none;
}

.user-header li input {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 10px;
  padding: 9px 12px;
  color: #ffffff;
}

.user-header li input::placeholder {
  color: rgba(255, 255, 255, 0.8);
}

/* ---------- Buttons (visual only) ---------- */
.inner-pages .sign-up-btn {
  border: 1px solid #f66315;
  border-radius: 10px;
  background: #f66315;
  color: #ffffff;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.inner-pages .sign-up-btn:hover,
.inner-pages .sign-up-btn:focus {
  background: #d95400;
  border-color: #d95400;
  color: #ffffff;
}

.inner-pages .get-started-btn {
  border: 1px solid #cfd9e0;
  border-radius: 10px;
  background: #ffffff;
  color: #222831;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.inner-pages .get-started-btn:hover,
.inner-pages .get-started-btn:focus {
  border-color: #f66315;
  background: #fff5ef;
  color: #c95300;
}

/* ---------- Form inputs (visual only, height unchanged) ---------- */
.inner-pages .form-control {
  border: 1px solid #dfe7eb;
  border-radius: 10px;
  box-shadow: none;
  color: #33404d;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.inner-pages .form-control:focus {
  border-color: #f66315;
  box-shadow: 0 0 0 3px rgba(246, 99, 21, 0.15);
  outline: none;
}

/* ---------- Modal popups (create / rename / confirm) ---------- */
.inner-pages .overlay-info {
  border-radius: 16px;
  border: 1px solid #dfe7eb;
  box-shadow: 0 24px 60px rgba(15, 33, 55, 0.18);
}

.inner-pages .overlay-info h3 {
  color: #222831;
  font-weight: 700;
}

/* ---------- Premium polish (visual only: elevation + interaction) ---------- */
.inner-pages .card-box,
.inner-pages .card-box-sec .card-box {
  box-shadow: 0 6px 18px rgba(15, 33, 55, 0.07);
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease;
}
.inner-pages .card-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(15, 33, 55, 0.14);
}
.inner-pages .folder-pages {
  box-shadow: 0 12px 30px rgba(15, 33, 55, 0.07);
}
/* Collection tiles: consistent calm elevation + hover */
.inner-pages .all-folders li > div,
.inner-pages .all-folders li .new-folder,
.inner-pages .all-folders li .service-product {
  transition: transform .18s ease, box-shadow .18s ease;
}
.inner-pages .all-folders li > div:hover,
.inner-pages .all-folders li .new-folder:hover,
.inner-pages .all-folders li .service-product:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(15, 33, 55, 0.12);
}
/* Dashboard stat tiles: gentle interactive lift */
.inner-pages .cardit-stat {
  transition: transform .18s ease, box-shadow .18s ease;
}
.inner-pages .cardit-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15, 33, 55, 0.11);
}
/* Primary CTA (Create Digital Card): premium orange with soft depth */
.inner-pages .sign-up-btn {
  box-shadow: 0 8px 18px rgba(246, 99, 21, 0.24);
}
.inner-pages .sign-up-btn:hover,
.inner-pages .sign-up-btn:focus {
  box-shadow: 0 12px 22px rgba(246, 99, 21, 0.30);
}

/* ============================================================
   Dark mode (opt-in via html[data-cardit-theme="dark"], set by
   the top-bar toggle + localStorage). Light stays the default.
   Broad overrides for the main app surfaces; uses !important to
   win over legacy hard-coded light colours.
   ============================================================ */
.cardit-theme-toggle {
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08); color: #fff;
  font-size: 17px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.cardit-theme-toggle:hover { background: rgba(255,255,255,.18); }
.cardit-theme-toggle-li { display: flex; align-items: center; }

html[data-cardit-theme="dark"] body.inner-pages {
  background: radial-gradient(1100px 460px at -10% -20%, #10203a 0%, rgba(16,32,58,0) 60%),
              radial-gradient(900px 420px at 110% -10%, #2a1710 0%, rgba(42,23,16,0) 52%),
              #0b1220 !important;
  color: #e6edf5 !important;
}
html[data-cardit-theme="dark"] .folder-pages {
  background: #131c2b !important; border-color: #24344a !important; color: #e6edf5;
}
html[data-cardit-theme="dark"] .top-sec h3,
html[data-cardit-theme="dark"] h1,
html[data-cardit-theme="dark"] h2,
html[data-cardit-theme="dark"] h3,
html[data-cardit-theme="dark"] h4,
html[data-cardit-theme="dark"] .title-folder h3 { color: #e9f0f8 !important; }
html[data-cardit-theme="dark"] .inner-sidebar,
html[data-cardit-theme="dark"] .inner-sidebar-info,
html[data-cardit-theme="dark"] .sidebar-info,
html[data-cardit-theme="dark"] .wrapper .about-user { background: #0f1826 !important; border-color: #24344a !important; }
html[data-cardit-theme="dark"] .inner-sidebar-links a,
html[data-cardit-theme="dark"] .inner-sidebar .full-name,
html[data-cardit-theme="dark"] .about-user .full-name { color: #d3deec !important; }
html[data-cardit-theme="dark"] .card-box,
html[data-cardit-theme="dark"] .card-box-content,
html[data-cardit-theme="dark"] .card-box-sec .card-box,
html[data-cardit-theme="dark"] .cardit-folder-card { background: #131c2b !important; border-color: #24344a !important; color: #e6edf5; }
html[data-cardit-theme="dark"] .cardit-stat { background: #131c2b !important; border-color: #24344a !important; }
html[data-cardit-theme="dark"] .cardit-stat .cs-num { color: #e9f0f8 !important; }
html[data-cardit-theme="dark"] .cardit-stat .cs-lbl,
html[data-cardit-theme="dark"] .cardit-card-meta,
html[data-cardit-theme="dark"] .cardit-card-description,
html[data-cardit-theme="dark"] .all-folders .card-folder small { color: #9fb0c4 !important; }
html[data-cardit-theme="dark"] .all-folders li > div,
html[data-cardit-theme="dark"] .all-folders li .new-folder,
html[data-cardit-theme="dark"] .all-folders li .service-product { background: #131c2b !important; border-color: #24344a !important; }
html[data-cardit-theme="dark"] .form-control,
html[data-cardit-theme="dark"] .search-field input,
html[data-cardit-theme="dark"] .controls-list .drop-down input { background: #0f1826 !important; border-color: #24344a !important; color: #e6edf5 !important; }
html[data-cardit-theme="dark"] .overlay-info { background: #131c2b !important; border-color: #24344a !important; color: #e6edf5; }
html[data-cardit-theme="dark"] .overlay-info h3,
html[data-cardit-theme="dark"] .overlay-info h2 { color: #e9f0f8 !important; }
html[data-cardit-theme="dark"] .drop-down { background: #131c2b !important; border-color: #24344a !important; }
html[data-cardit-theme="dark"] .drop-down a,
html[data-cardit-theme="dark"] .drop-down li,
html[data-cardit-theme="dark"] .drop-down strong { color: #d3deec !important; }
html[data-cardit-theme="dark"] .controls-list > li > a { color: #d3deec; }
html[data-cardit-theme="dark"] table.table,
html[data-cardit-theme="dark"] .table td,
html[data-cardit-theme="dark"] .table th { color: #dbe4ef; border-color: #24344a !important; }
html[data-cardit-theme="dark"] .get-started-btn {
  background: #1a2536 !important; border-color: #31435c !important; color: #e9f0f8 !important;
}
html[data-cardit-theme="dark"] .cardit-card-chip { background: #1a2536 !important; border-color: #31435c !important; color: #c8d5e4 !important; }

/* ============================================================
   Public front page (body.cardit-home) — premium palette.
   The old marketing blocks used clashing pastels (yellow/blue/
   green/peach). Replace with a cohesive, restrained warm+cool
   neutral scheme on the Cardit orange/ink system. Scoped to
   .cardit-home so no other page is affected.
   ============================================================ */
:root {
  --home-warm: #fdf4ee;   /* barely-there orange tint  */
  --home-cool: #eef2f7;   /* barely-there slate tint   */
  --home-ink:  #17324e;   /* headings                  */
  --home-body: #55636f;   /* body copy                 */
  --home-accent: #f66315;
}

/* Two-tone split blocks: alternate warm / cool for rhythm */
body.cardit-home .block1 { background: var(--home-cool); }
body.cardit-home .block1:before { background: var(--home-warm); }
body.cardit-home .block2 { background: var(--home-warm); }
body.cardit-home .block2:before { background: var(--home-cool); }
body.cardit-home .block3 { background: var(--home-cool); }
body.cardit-home .block3:before { background: var(--home-warm); }

/* Readable, consistent type on the calmer surfaces */
body.cardit-home .home-info-box h3,
body.cardit-home .home-info-box h3.no-white {
  color: var(--home-ink);
  font-weight: 800;
  letter-spacing: -.01em;
}
body.cardit-home .home-info-box p,
body.cardit-home .home-info-box p.no-white {
  color: var(--home-body);
}

/* Section that describes the ecosystem — clean white surface */
body.cardit-home .bcn-card-wrap { background: #ffffff; }
body.cardit-home .bcn-card-wrap h2,
body.cardit-home .about-bnc h2,
body.cardit-home .virtual-digital-cards h2 {
  color: var(--home-ink);
  font-weight: 800;
  letter-spacing: -.01em;
}
body.cardit-home .about-bnc p,
body.cardit-home .virtual-digital-cards p { color: var(--home-body); }

/* Primary CTA on the home page — premium orange with depth */
body.cardit-home .get-started-btn,
body.cardit-home .sign-up-btn {
  background: var(--home-accent) !important;
  border-color: var(--home-accent) !important;
  color: #fff !important;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(246, 99, 21, .24);
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
body.cardit-home .get-started-btn:hover,
body.cardit-home .sign-up-btn:hover,
body.cardit-home .get-started-btn:focus,
body.cardit-home .sign-up-btn:focus {
  background: #d95400 !important;
  border-color: #d95400 !important;
  box-shadow: 0 12px 22px rgba(246, 99, 21, .30);
  transform: translateY(-1px);
}

/* Header: keep the white bar premium-clean; orange Join CTA */
body.cardit-home .video-container { display: none; }

/* ============================================================
   Auth popups (#signIn / #signUp) — distinct, premium buttons.
   ID-scoped + !important so they beat the generic .get-started-btn
   / .sign-up-btn colour rules above. Order per form:
     primary (orange) · Google (white) · Apple (black) · secondary
   ============================================================ */
#signIn .get-started-btn,
#signIn .sign-up-btn,
#signUp .sign-up-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 12px;
  font-weight: 700;
  margin-top: 12px;
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease, border-color .15s ease, color .15s ease;
}
#signIn .get-started-btn .fa,
#signUp .sign-up-btn .fa { font-size: 17px; line-height: 1; }

/* Primary — "Take me in" (Cardit orange) */
#signIn #login,
#signUp #sign-up {
  background: #f66315 !important;
  border: 1px solid #f66315 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(246, 99, 21, .22);
}
#signIn #login:hover,
#signUp #sign-up:hover {
  background: #d95400 !important;
  border-color: #d95400 !important;
  box-shadow: 0 12px 22px rgba(246, 99, 21, .28);
  transform: translateY(-1px);
}

/* Google — white, official look */
#signIn #google-login,
#signUp #google-signup {
  background: #ffffff !important;
  border: 1px solid #dadce0 !important;
  color: #3c4043 !important;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .10) !important;
}
#signIn #google-login .fa,
#signUp #google-signup .fa { color: #ea4335; }
#signIn #google-login:hover,
#signUp #google-signup:hover {
  background: #f7f8f9 !important;
  border-color: #c6cace !important;
  box-shadow: 0 3px 10px rgba(60, 64, 67, .16) !important;
}

/* Secondary — "New user? Sign up now" (ghost / outline) */
#signIn .singnUpPopup {
  background: #ffffff !important;
  border: 1px solid #f3c9ac !important;
  color: #d95400 !important;
  box-shadow: none !important;
}
#signIn .singnUpPopup:hover {
  background: #fff5ef !important;
  border-color: #f66315 !important;
  color: #c74e00 !important;
}

/* ============================================================
   PREMIUM CHROME v2 (2026-09-07) — top bar + sidebar refinement
   + mobile responsive. Applies to every logged-in app page
   (the header markup is identical across pages; the sidebar is
   one shared include). Visual + layout polish only.
   ============================================================ */

/* ---------- Top bar ---------- */
.user-header {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  /* Compressed top bar. Kept in sync with .sidebar-head + the content/sidebar
     top offsets below so the black bar stays flush and nothing overlaps. */
  height: 56px;
}
/* Compressed top bar — coordinated heights/offsets (were 70px) */
.sidebar-head { height: 56px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 10px 0 12px !important; }
/* Logo left, hamburger hard right — both vertically centred. The base gives the
   toggle float:right + margin-top:15px (tuned for the old 70px bar), which
   pushed it out of alignment; neutralise that so it lines up with the logo. */
.sidebar-head .user-logo,
.sidebar-head .sidebar-toggle {
  float: none !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}
.sidebar-head .user-logo img { max-height: 44px !important; }
/* Toggle icon: the legacy .hidden-phone/.visible-phone responsive spans are
   unreliable here (.hidden-phone computes display:none on desktop, which hid
   the collapsed-rail hamburger). Force exactly ONE white hamburger, always,
   in every state — expanded, collapsed rail (body.pageLayOut) and mobile. */
.sidebar-head .sidebar-toggle .hidden-phone { display: inline-flex !important; align-items: center; }
.sidebar-head .sidebar-toggle .visible-phone { display: none !important; }
.sidebar-head .sidebar-toggle .hidden-phone .normal-state { display: inline-block !important; }
.sidebar-head .sidebar-toggle .hidden-phone .active-state { display: none !important; }
/* Kill the legacy clearfix ::after — as a flex item it stole the right slot and
   pushed the hamburger to the middle instead of the right edge. */
.sidebar-head::after { content: none !important; display: none !important; }
/* Collapsed rail: hide the logo (my display:flex on .user-logo above would
   otherwise override the base hide) and centre the toggle. */
body.pageLayOut .sidebar-head { justify-content: center !important; }
body.pageLayOut .sidebar-head .user-logo { display: none !important; }
.user-sidebar { padding-top: 56px !important; }
#user-main-wrap { padding-top: 56px !important; }
.inner-sidebar { top: 56px !important; }
.sidebar-info { min-height: calc(100vh - 78px); }
/* Slimmer pills/buttons to match the shorter bar */
.user-header #searchCardLink,
.user-header li:nth-child(2) { height: 38px !important; }
.user-header .go-to-btn,
.cardit-theme-toggle { width: 38px !important; height: 38px !important; }
.user-header #add-bcn { width: 28px !important; height: 28px !important; }
.user-header li {
  border: none !important;
  padding: 0 !important;
  width: auto !important;
  float: none !important;
  display: flex;
  align-items: center;
}
/* Search pill */
.user-header #searchCardLink {
  position: relative;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  padding: 0 14px;
  height: 42px;
  width: 340px;
  transition: border-color .15s ease, background .15s ease;
}
.user-header #searchCardLink:focus-within {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.42);
}
.user-header #searchCardLink input {
  order: 2;
  width: 100% !important;
  background: none;
  border: none;
  color: #fff;
  font-size: 14px;
  padding: 0 0 0 8px !important;
}
.user-header #searchCardLink input::placeholder { color: rgba(255, 255, 255, 0.72); }
.user-header li a img { display: none !important; }
.user-header #searchCardLink a {
  order: 1;
  width: 18px; height: 18px; flex: 0 0 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: .85;
}
/* Add-with-BCN pill */
.user-header li:nth-child(2) {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  padding: 0 6px 0 14px !important;
  height: 42px;
  width: 300px !important;
  transition: border-color .15s ease, background .15s ease;
}
.user-header li:nth-child(2):focus-within {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.42);
}
.user-header li:nth-child(2) input {
  width: 100% !important;
  background: none; border: none; color: #fff; font-size: 14px; padding: 0 !important;
}
.user-header li:nth-child(2) input::placeholder { color: rgba(255, 255, 255, 0.72); }
.user-header #add-bcn {
  width: 32px; height: 32px; flex: 0 0 32px; margin-left: 8px;
  border-radius: 9px;
  background: #f6a100 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/16px no-repeat;
  transition: background-color .15s ease, transform .15s ease;
}
.user-header #add-bcn:hover { background-color: #e08f00; transform: translateY(-1px); }
/* push home + theme toggle to the right */
.user-header li:nth-child(3) { margin-left: auto; }
.user-header .go-to-btn {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.6 12 3l9 7.6'/%3E%3Cpath d='M5 9.6V20a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.6'/%3E%3Cpath d='M9.5 21v-6h5v6'/%3E%3C/svg%3E") center/20px no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: background-color .15s ease, border-color .15s ease;
}
.user-header .go-to-btn:hover { background-color: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.32); }

/* ---------- Sidebar ---------- */
.user-sidebar {
  /* No border-right: it renders above the top bar (z-index 1003 > header)
     and would draw a light vertical line across the black bar. A subtle
     off-white background gives separation from the white content instead. */
  background: #f7f9fc;
  border-right: none;
}
/* Distribute the sidebar over the full height: top group at the top, the
   Settings/Notifications/Logout group pinned to the bottom, with more air. */
.sidebar-info {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 92px);
  padding-top: 14px;
}
.sidebar-info .profile-links { margin-bottom: 8px; }
.sidebar-info .profile-links li { margin-bottom: 16px; padding-top: 4px; padding-bottom: 4px; }
.sidebar-info .business-card { margin-top: 14px; margin-bottom: 8px; }
.sidebar-info > p { margin-bottom: 6px; }
.sidebar-info .sidebar-nav {
  margin-top: auto;               /* push the bottom nav to the foot */
  padding-top: 16px;
  border-top: 1px solid #eef2f6;
}
.sidebar-info .sidebar-nav li { margin-bottom: 4px; }
/* Profile block */
.profile-links .user-profile { margin-bottom: 6px; }
.profile-links .user-profile .img-circle {
  border: 2px solid #f0f4f8;
  box-shadow: 0 4px 12px rgba(15, 33, 55, .10);
}
.profile-links .avatar-name { font-weight: 700; color: #17324e; }
.profile-links .link-title strong a { color: #8a97a6; font-weight: 600; font-size: 12.5px; }
/* Nav rows (Manage / Folders) + bottom nav share a look */
.profile-links li > .link-icon,
.sidebar-nav li a {
  border-radius: 10px;
  transition: background .14s ease, color .14s ease;
}
.cardit-nav-ic {
  width: 21px; height: 21px;
  stroke: #5a6b7d; fill: none; stroke-width: 1.85;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: middle;
}
.profile-links li .link-icon { display: inline-flex; align-items: center; justify-content: center; }
.sidebar-nav li a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; color: #46566a; font-weight: 600; }
.sidebar-nav li a:hover { background: #f5f8fb; color: #17324e; }
.sidebar-nav li a:hover .cardit-nav-ic { stroke: #f66315; }
.sidebar-nav li a strong { font-weight: 600; }
.profile-links li:hover .cardit-nav-ic { stroke: #f66315; }
/* Notification badge dot */
.notification-link { position: relative; display: inline-flex; }
.notification-link i {
  position: absolute; top: -2px; right: -2px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #f6a100; border: 2px solid #fff;
}
/* Create Digital Card CTA */
.sidebar-info .business-card {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #f66315; color: #fff;
  border-radius: 12px; font-weight: 700;
  box-shadow: 0 8px 18px rgba(246, 99, 21, .24);
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.sidebar-info .business-card:hover { background: #d95400; box-shadow: 0 12px 22px rgba(246, 99, 21, .30); transform: translateY(-1px); }
.sidebar-info .business-card i { font-style: normal; }
.cardit-cta-ic { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2.4; stroke-linecap: round; }
.sidebar-info > p { color: #9aa6b2; font-size: 12px; }

/* Collapsed rail (body.pageLayOut) centres icons */
body.pageLayOut .cardit-cta-ic { width: 20px; height: 20px; }

/* Dark-mode chrome */
html[data-cardit-theme="dark"] .user-sidebar { background: #0f1826 !important; border-right-color: #24344a !important; }
html[data-cardit-theme="dark"] .sidebar-nav li a { color: #c3d0df; }
html[data-cardit-theme="dark"] .sidebar-nav li a:hover { background: #162233; color: #fff; }
html[data-cardit-theme="dark"] .cardit-nav-ic { stroke: #9fb0c4; }
html[data-cardit-theme="dark"] .profile-links .avatar-name { color: #e9f0f8; }
/* Main sidebar item labels ("Manage My Cards", "Collections", "My Profile")
   are .link-title > a and were left dark → black on the dark-blue sidebar. */
html[data-cardit-theme="dark"] .user-sidebar .link-title a { color: #e9f0f8 !important; }
html[data-cardit-theme="dark"] .user-sidebar .link-title strong a { color: #9fb0c4 !important; }
html[data-cardit-theme="dark"] .sidebar-info .sidebar-nav { border-top-color: #24344a; }

/* ---------- Flyout submenus (#profile / #manageCard) — premium rows ----------
   Scoped to these two panels so the dynamic #folders panel keeps its own style. */
#profile.inner-sidebar,
#manageCard.inner-sidebar,
#folders.inner-sidebar {
  background: #ffffff;
  width: 244px;
  border-right: 1px solid #eef2f6;
  box-shadow: 14px 0 34px rgba(15, 33, 55, 0.07);
}
/* The base .inner-sidebar-info is hard-set to width:190px, which squeezed the
   content (labels wrapped). Let it fill the panel for all three flyouts. */
#profile .inner-sidebar-info,
#manageCard .inner-sidebar-info { padding: 20px 14px; width: auto; }
#folders .inner-sidebar-info { width: auto; }
@media (max-width: 479px) {
  #profile.inner-sidebar,
  #manageCard.inner-sidebar,
  #folders.inner-sidebar { width: 214px; }
}
#profile .cardit-sub-title,
#manageCard .cardit-sub-title {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #93a1b3; padding: 2px 12px 14px;
}
#profile .inner-sidebar-links li,
#manageCard .inner-sidebar-links li {
  list-style: none !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
}
#profile .inner-sidebar-links a,
#manageCard .inner-sidebar-links a {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px; border-radius: 10px;
  font-size: 14px !important; font-weight: 600;
  color: #46566a !important; text-transform: none !important;
  text-decoration: none !important;
  border: none !important;
  transition: background .14s ease, color .14s ease;
}
#profile .inner-sidebar-links a:hover,
#manageCard .inner-sidebar-links a:hover { background: #f5f8fb; color: #17324e !important; }
#profile .inner-sidebar-links li.active > a,
#manageCard .inner-sidebar-links li.active > a {
  background: #fff5ef; color: #d95400 !important; border-bottom: none !important;
}
.cardit-sub-ic {
  width: 19px; height: 19px; flex: 0 0 19px;
  stroke: #7a8898; fill: none; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .14s ease;
}
#profile .inner-sidebar-links a:hover .cardit-sub-ic,
#manageCard .inner-sidebar-links a:hover .cardit-sub-ic { stroke: #f66315; }
#profile .inner-sidebar-links li.active > a .cardit-sub-ic,
#manageCard .inner-sidebar-links li.active > a .cardit-sub-ic { stroke: #f66315; }
/* Dark mode for the flyouts */
html[data-cardit-theme="dark"] #profile.inner-sidebar,
html[data-cardit-theme="dark"] #manageCard.inner-sidebar { background: #0f1826; border-right-color: #24344a; }
html[data-cardit-theme="dark"] #profile .inner-sidebar-links a,
html[data-cardit-theme="dark"] #manageCard .inner-sidebar-links a { color: #c3d0df !important; }
html[data-cardit-theme="dark"] #profile .inner-sidebar-links a:hover,
html[data-cardit-theme="dark"] #manageCard .inner-sidebar-links a:hover { background: #162233; color: #fff !important; }
html[data-cardit-theme="dark"] #profile .inner-sidebar-links li.active > a,
html[data-cardit-theme="dark"] #manageCard .inner-sidebar-links li.active > a { background: #2a1710; color: #ffa866 !important; }

/* ---------- Mobile responsive ---------- */
@media (max-width: 991px) {
  .user-header #searchCardLink { width: 240px; }
  .user-header li:nth-child(2) { width: 220px !important; }
}
@media (max-width: 767px) {
  .user-header { gap: 8px; padding: 0 12px; height: 56px; }
  .user-header #searchCardLink { flex: 1 1 auto; width: auto; height: 40px; padding: 0 12px; }
  /* Hide the BCN pill on phones to keep the bar clean; BCN add stays on the dashboard */
  .user-header li:nth-child(2) { display: none !important; }
  .user-header .go-to-btn { width: 40px; height: 40px; }
  .cardit-theme-toggle { width: 40px; height: 40px; }

  /* Sidebar drawer on phones: a proper labelled menu (the drawer is wide, so
     icon-only looked broken). Full labels, left-aligned rows, natural spacing
     with no forced full-height gap. */
  .user-sidebar .link-title,
  .user-sidebar .sidebar-info > p,
  .user-sidebar .sidebar-nav strong { display: block !important; }
  .user-sidebar .sidebar-info { display: block; min-height: auto; }
  .user-sidebar .profile-links li { justify-content: flex-start; }
  .user-sidebar .sidebar-nav { margin-top: 20px; }
  .user-sidebar .sidebar-nav li a { justify-content: flex-start; }
  .user-sidebar .sidebar-info .business-card { font-size: inherit; padding: 13px; }
  .user-sidebar .sidebar-info .business-card i { display: inline; }
}
@media (max-width: 479px) {
  .user-header { padding: 0 8px; }
  .user-header #searchCardLink input { display: inline-block !important; }
}
/* Dashboard blocks already collapse (cdash-* rules). Tighten paddings on phone. */
@media (max-width: 767px) {
  .dashboard-page .cdash-hello { font-size: 22px; }
  .dashboard-page .cardit-stats { gap: 10px; }
  .dashboard-page .folder-pages { padding-left: 14px; padding-right: 14px; }
}


/* ============================================================
   Folder toolbar (filter bar) — premium, especially on mobile.
   Uniform chips + crisp SVG icons via ::before (survives the JS
   that rewrites Sort/Filter/View labels). PNG icons hidden.
   ============================================================ */
.folder-content-page .card-control-sec {
  gap: 8px !important;
  margin: 12px 22px 16px !important;
  padding: 8px 10px !important;
  border: 1px solid #e6ecf2 !important;
  border-radius: 13px !important;
  box-shadow: 0 6px 18px rgba(15,33,55,.05) !important;
}
.folder-content-page .controls-list { gap: 7px !important; }
.folder-content-page .controls-list > li { min-height: 0 !important; }
.folder-content-page .controls-list > li > a {
  min-height: 36px !important;
  min-width: 36px !important;
  padding: 0 11px !important;
  gap: 7px !important;
  border: 1px solid #e3e8ee !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #46566a !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.folder-content-page .controls-list > li > a:hover,
.folder-content-page .controls-list > li > a:focus,
.folder-content-page .controls-list > li.active > a {
  border-color: #f6a35e !important;
  background: #fff7f2 !important;
  color: #c95300 !important;
  box-shadow: 0 4px 12px rgba(246,99,21,.14) !important;
}
/* hide the old PNG icons; draw crisp SVGs as a leading pseudo-icon */
.folder-content-page .controls-list > li > a img { display: none !important; }
.folder-content-page .controls-list > li > a::before {
  content: ""; width: 17px; height: 17px; flex: 0 0 17px;
  background-repeat: no-repeat; background-position: center; background-size: contain;
}

/* Select keeps its real (stateful) checkbox — no duplicate pseudo-icon. */
.folder-content-page .controls-list > li.card-selector > a::before { display: none; }
.folder-content-page .controls-list > li.card-selector > a { padding: 0 12px; }
.folder-content-page .controls-list > li.delete-icon > a::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2346566a%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%206h18%27%2F%3E%3Cpath%20d%3D%27M8%206V4h8v2%27%2F%3E%3Cpath%20d%3D%27M6%206l1%2014h10l1-14%27%2F%3E%3C%2Fsvg%3E"); }
.folder-content-page .controls-list > li.folder-list > a::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2346566a%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%207a2%202%200%200%201%202-2h4l2%202h8a2%202%200%200%201%202%202v8a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%27%2F%3E%3Cpath%20d%3D%27M12%2016v-4%27%2F%3E%3Cpath%20d%3D%27M10%2013.5%2012%2011.5l2%202%27%2F%3E%3C%2Fsvg%3E"); }
.folder-content-page .controls-list a#sort-folder-dropdown::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2346566a%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M11%206h10%27%2F%3E%3Cpath%20d%3D%27M11%2012h7%27%2F%3E%3Cpath%20d%3D%27M11%2018h4%27%2F%3E%3Cpath%20d%3D%27M6%204v14%27%2F%3E%3Cpath%20d%3D%27M3%2015l3%203%203-3%27%2F%3E%3C%2Fsvg%3E"); }
.folder-content-page .controls-list a#filter-folder-dropdown::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2346566a%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%205h18l-7%208v6l-4%202v-8z%27%2F%3E%3C%2Fsvg%3E"); }
.folder-content-page .controls-list a#view-folder-dropdown::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2346566a%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271.5%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%273%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271.5%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%2714%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271.5%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%2714%27%20width%3D%277%27%20height%3D%277%27%20rx%3D%271.5%27%2F%3E%3C%2Fsvg%3E"); }
.folder-content-page .controls-list > li.email-icon > a::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2346566a%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2718%27%20height%3D%2714%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27m3%207%209%206%209-6%27%2F%3E%3C%2Fsvg%3E"); }
.folder-content-page .controls-list > li.share-icon > a::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2346566a%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2718%27%20cy%3D%275%27%20r%3D%273%27%2F%3E%3Ccircle%20cx%3D%276%27%20cy%3D%2712%27%20r%3D%273%27%2F%3E%3Ccircle%20cx%3D%2718%27%20cy%3D%2719%27%20r%3D%273%27%2F%3E%3Cpath%20d%3D%27M8.6%2013.5l6.8%204%27%2F%3E%3Cpath%20d%3D%27M15.4%206.5l-6.8%204%27%2F%3E%3C%2Fsvg%3E"); }

/* Search field — clean compact pill with a crisp, clickable magnifier.
   The .search-field CONTAINER carried its own border+bg (webapp-compat:1282),
   which doubled up with the input's border → a "box inside a box". Strip the
   container chrome so only the input reads as the search box. */
.folder-content-page .search-field {
  flex: 0 1 260px !important;
  min-width: 200px !important;
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
/* No hover "name" tooltips on the toolbar icons */
.folder-content-page .controls-list .tooltip-link strong,
.folder-content-page .controls-list .tooltip-link:hover strong { display: none !important; }
.folder-content-page .search-field input {
  height: 36px !important;
  padding: 0 40px 0 13px !important;
  border: 1px solid #e3e8ee !important;
  border-radius: 10px !important;
  background: #fff !important;
  font-size: 13.5px !important;
}
.folder-content-page .search-field input:focus {
  border-color: #f66315 !important;
  box-shadow: 0 0 0 3px rgba(246,99,21,.12) !important;
}
.folder-content-page .search-field img { display: none !important; }
.folder-content-page .search-field a {
  display: block !important;
  width: 30px !important; height: 30px !important;
  right: 4px !important;
  border-radius: 8px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2346566a%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%277%27%2F%3E%3Cpath%20d%3D%27m21%2021-4.3-4.3%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 17px;
}
.folder-content-page .search-field a:hover { background-color: #f5f8fb; }
/* Create New Folder chip in the command bar: keep tidy */
.folder-content-page .card-control-sec .createNewFolder,
.folder-content-page .folder-command-bar .createNewFolder {
  border-radius: 11px;
}

/* ---------- Mobile: a tidy, compact icon-only row ---------- */
@media (max-width: 899px) {
  .folder-content-page .card-control-sec {
    flex-direction: column;
    align-items: stretch;
    gap: 10px !important;
    margin: 12px 12px 16px !important;
    padding: 10px !important;
  }
  /* Wrap (do NOT horizontally scroll): a scroll container clips the
     Sort/Filter/View/Move dropdowns vertically, which made the buttons look
     dead on mobile. Uniform icon squares wrap to two tidy rows instead. */
  .folder-content-page .controls-list {
    flex-wrap: wrap !important;
    overflow: visible !important;
    gap: 8px !important;
  }
  .folder-content-page .controls-list > li { flex: 0 0 auto; }
  /* icon-only: hide the Sort/Filter/View text labels, keep the ::before icon */
  .folder-content-page .controls-list > li > a {
    font-size: 0 !important;
    min-width: 42px !important;
    width: 42px;
    padding: 0 !important;
    justify-content: center;
  }
  .folder-content-page .controls-list > li.card-selector > a { width: 44px; }
  .folder-content-page .search-field { flex-basis: auto; min-width: 0; width: 100%; }
}

/* Dark mode */
html[data-cardit-theme="dark"] .folder-content-page .card-control-sec { background:#131c2b !important; border-color:#24344a !important; }
html[data-cardit-theme="dark"] .folder-content-page .controls-list > li > a,
html[data-cardit-theme="dark"] .folder-content-page .search-field input { background:#0f1826 !important; border-color:#24344a !important; color:#c3d0df !important; }

/* ---------- Dark-mode contrast fixes (2026-09-08) ---------- */
/* Toolbar chip icons + search magnifier are SVGs with a baked dark stroke
   (#46566a) → near-invisible on dark. Brighten them to a light grey. */
html[data-cardit-theme="dark"] .folder-content-page .controls-list > li > a::before,
html[data-cardit-theme="dark"] .folder-content-page .search-field a {
  filter: brightness(0) invert(0.8);
}
html[data-cardit-theme="dark"] .folder-content-page .search-field a:hover { background-color:#162233 !important; }
html[data-cardit-theme="dark"] .folder-content-page .controls-list > li > a:hover,
html[data-cardit-theme="dark"] .folder-content-page .controls-list > li.active > a { background:#2a1710 !important; border-color:#7a4a22 !important; color:#ffb37a !important; }
html[data-cardit-theme="dark"] .folder-content-page .controls-list > li > a:hover::before,
html[data-cardit-theme="dark"] .folder-content-page .controls-list > li.active > a::before { filter: none; }
/* Section links (Manage / View all) + muted text — lift for legibility on dark */
html[data-cardit-theme="dark"] .cdash-section-head a { color:#ff9152 !important; }
html[data-cardit-theme="dark"] .cdash-eyebrow { color:#aab7c6 !important; }
html[data-cardit-theme="dark"] .cdash-hello-sub { color:#aeb9c7 !important; }
html[data-cardit-theme="dark"] .folder-context-meta,
html[data-cardit-theme="dark"] .folder-pages .top-sec p,
html[data-cardit-theme="dark"] .sidebar-info > p { color:#9fb0c4 !important; }
/* Cardit orange links elsewhere in the app read too dark on a dark ground */
html[data-cardit-theme="dark"] a[style*="f66315"], html[data-cardit-theme="dark"] .cardit-accent-link { color:#ff9152 !important; }
/* Folder/collection page wrappers were white in dark mode → make them dark */
html[data-cardit-theme="dark"] .folder-content-page .folder-command-bar,
html[data-cardit-theme="dark"] .all-folders-page .folder-pages,
html[data-cardit-theme="dark"] .folder-content-page .folder-pages { background:#131c2b !important; }
html[data-cardit-theme="dark"] .folder-content-page .folder-command-bar { border-color:#24344a !important; box-shadow:0 6px 18px rgba(0,0,0,.35) !important; }
html[data-cardit-theme="dark"] .folder-content-page .top-sec h3,
html[data-cardit-theme="dark"] .all-folders-page .top-sec h3 { color:#e9f0f8 !important; }


/* ============================================================
   My Card(s) Holders (DataTable) — premium table (2026-09-09)
   ============================================================ */
.cards-holder-page .card-holder-table {
  background: #fff;
  border: 1px solid #e6ecf2;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(15, 33, 55, .06);
  padding: 16px 20px 20px;
  margin: 6px 22px 26px;
}
.cards-holder-page .dataTables_length,
.cards-holder-page .dataTables_filter { margin-bottom: 14px; color: #5d6b7d; font-size: 13.5px; font-weight: 600; }
.cards-holder-page .dataTables_length select,
.cards-holder-page .dataTables_filter input {
  border: 1px solid #e3e8ee; border-radius: 10px; height: 38px; padding: 0 12px;
  background: #fff; color: #33404d; font-size: 13.5px; box-shadow: none;
}
.cards-holder-page .dataTables_filter input { min-width: 240px; }
.cards-holder-page .dataTables_filter input:focus,
.cards-holder-page .dataTables_length select:focus { border-color: #f66315; box-shadow: 0 0 0 3px rgba(246, 99, 21, .12); outline: none; }

.cards-holder-page table#grid.table { border-collapse: separate; border-spacing: 0; margin: 0; width: 100%; }
.cards-holder-page table#grid thead th {
  background: #f5f8fb !important; color: #5d6b7d !important;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  border: none !important; border-bottom: 1px solid #e6ecf2 !important; padding: 14px 16px;
}
.cards-holder-page table#grid thead th:first-child { border-top-left-radius: 10px; }
.cards-holder-page table#grid thead th:last-child { border-top-right-radius: 10px; }
.cards-holder-page table#grid tbody td {
  border: none !important; border-bottom: 1px solid #eef2f6 !important;
  padding: 13px 16px; color: #33404d; font-size: 14px; vertical-align: middle; background: transparent;
}
.cards-holder-page table#grid tbody tr:hover td { background: #f8fafc; }
.cards-holder-page table#grid tbody tr:last-child td { border-bottom: none !important; }
/* Name & Company cell = .about-user > avatar (.profile_xsmall) + .user-info-detail (name + company) */
.cards-holder-page table#grid tbody .about-user { display: flex; align-items: center; gap: 12px; margin: 0; }
.cards-holder-page table#grid tbody .about-user .profile_xsmall { flex: 0 0 auto; margin: 0; padding: 0; }
.cards-holder-page table#grid tbody .about-user .img-circle { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; display: block; }
.cards-holder-page table#grid tbody .user-info-detail { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.cards-holder-page table#grid tbody .user-info-detail a:first-child { color: #17324e; font-weight: 700; font-size: 14px; text-decoration: none; }
.cards-holder-page table#grid tbody .user-info-detail a:first-child:hover { color: #f66315; }
.cards-holder-page table#grid tbody .user-info-detail a i { color: #8a97a6; font-size: 12.5px; font-style: normal; }
/* Delete = <a class="delete"> rendering the trash icon via a CSS background */
.cards-holder-page table#grid tbody .delete { opacity: .5; transition: opacity .15s ease; }
.cards-holder-page table#grid tbody .delete:hover { opacity: 1; }

.cards-holder-page .dataTables_info { color: #8a97a6; font-size: 13px; padding-top: 14px; }
.cards-holder-page .dataTables_paginate { padding-top: 12px; }
.cards-holder-page .dataTables_paginate .paginate_button {
  border-radius: 8px !important; border: 1px solid #e3e8ee !important; margin: 0 3px !important;
  padding: 6px 12px !important; color: #46566a !important; background: #fff !important;
}
.cards-holder-page .dataTables_paginate .paginate_button.current,
.cards-holder-page .dataTables_paginate .paginate_button.current:hover {
  background: #f66315 !important; border-color: #f66315 !important; color: #fff !important;
}
.cards-holder-page .dataTables_paginate .paginate_button:hover {
  background: #fff5ef !important; border-color: #f66315 !important; color: #c95300 !important;
}
.cards-holder-page table#grid thead th.sorting_asc,
.cards-holder-page table#grid thead th.sorting_desc { color: #f66315 !important; }

/* Dark mode for the holders table */
html[data-cardit-theme="dark"] .cards-holder-page .card-holder-table { background:#131c2b; border-color:#24344a; }
html[data-cardit-theme="dark"] .cards-holder-page table#grid thead th { background:#0f1826 !important; color:#9fb0c4 !important; border-bottom-color:#24344a !important; }
html[data-cardit-theme="dark"] .cards-holder-page table#grid tbody td { color:#dbe4ef; border-bottom-color:#24344a !important; }
html[data-cardit-theme="dark"] .cards-holder-page table#grid tbody tr:hover td { background:#162233; }
html[data-cardit-theme="dark"] .cards-holder-page .user-info-detail a:first-child { color:#e9f0f8; }
html[data-cardit-theme="dark"] .cards-holder-page .user-info-detail a i { color:#9fb0c4; }
html[data-cardit-theme="dark"] .cards-holder-page .dataTables_length select,
html[data-cardit-theme="dark"] .cards-holder-page .dataTables_filter input { background:#0f1826; border-color:#24344a; color:#dbe4ef; }
html[data-cardit-theme="dark"] .cards-holder-page .dataTables_paginate .paginate_button { background:#0f1826 !important; border-color:#24344a !important; color:#c3d0df !important; }


/* ============================================================
   Dark mode — FULL APP COVERAGE (2026-09-09, Picasso)
   Additive & dark-only. Extends the earlier dark layer so every
   authed page gets dark surfaces + legible text:
     All Collections (.all-folders-page), Card detail
     (.card-detail-page / #userCardDetail), Settings (.setting-page),
     Notifications (.notification-activity-page), Personal / Company
     info, Card requests (.card-request-page), Create-card wizard
     (.create-card-page).
   Every rule is scoped html[data-cardit-theme="dark"] — light mode
   is never touched. The top bar / hamburger / sidebar-head are left
   alone deliberately.
   Palette: bg #0b1220 · surface #131c2b · deep #0f1826 ·
            border #24344a · text #e9f0f8 / body #dbe4ef ·
            muted #9fb0c4 · accent-on-dark #ff9152
   ============================================================ */

/* ---------- Shared: form controls, labels, selects ---------- */
html[data-cardit-theme="dark"] select.form-control,
html[data-cardit-theme="dark"] textarea.form-control,
html[data-cardit-theme="dark"] input.form-control { background:#0f1826 !important; border-color:#24344a !important; color:#e6edf5 !important; }
html[data-cardit-theme="dark"] .form-control::placeholder { color:#7286a0 !important; }
html[data-cardit-theme="dark"] .form-control:focus { border-color:#ff9152 !important; }
html[data-cardit-theme="dark"] .setting-page label,
html[data-cardit-theme="dark"] .personal-info-page label,
html[data-cardit-theme="dark"] .company-info-page label,
html[data-cardit-theme="dark"] .card-request-page label,
html[data-cardit-theme="dark"] .notification-activity-page label,
html[data-cardit-theme="dark"] .create-card-page label,
html[data-cardit-theme="dark"] .subscription-preferences h4,
html[data-cardit-theme="dark"] .notification-alert h4,
html[data-cardit-theme="dark"] .css-label { color:#dbe4ef !important; }
html[data-cardit-theme="dark"] .subscription-preferences label strong,
html[data-cardit-theme="dark"] .css-label strong { color:#9fb0c4 !important; }
html[data-cardit-theme="dark"] .seeting-update p { color:#dbe4ef !important; }

/* Section heading bars on content pages — were white / fixed-white on scroll */
html[data-cardit-theme="dark"] .setting-page .top-sec,
html[data-cardit-theme="dark"] .notification-activity-page .top-sec,
html[data-cardit-theme="dark"] .personal-info-page .top-sec,
html[data-cardit-theme="dark"] .company-info-page .top-sec,
html[data-cardit-theme="dark"] .card-request-page .top-sec,
html[data-cardit-theme="dark"] #user-main-wrap.tableOnScroll .top-sec { background:#0b1220 !important; border-bottom-color:#24344a !important; }
html[data-cardit-theme="dark"] .setting-page .folder-pages,
html[data-cardit-theme="dark"] .notification-activity-page .folder-pages,
html[data-cardit-theme="dark"] .card-request-page .folder-pages { background:transparent !important; border-color:#24344a !important; }

/* Custom dropdown (title / country selects on profile pages) */
html[data-cardit-theme="dark"] .custom-dropdown ul { background:#131c2b !important; border-color:#24344a !important; box-shadow:0 10px 24px rgba(0,0,0,.55) !important; }
html[data-cardit-theme="dark"] .custom-dropdown a { color:#dbe4ef !important; }
html[data-cardit-theme="dark"] .custom-dropdown a:hover { background:#162233 !important; }
html[data-cardit-theme="dark"] .custom-select:after { filter: brightness(0) invert(.7); }

/* ---------- Buttons ---------- */
html[data-cardit-theme="dark"] .sign-up-btn { color:#ff9152 !important; border-color:#ff9152 !important; background:transparent !important; }
html[data-cardit-theme="dark"] .sign-up-btn:hover,
html[data-cardit-theme="dark"] .sign-up-btn:focus,
html[data-cardit-theme="dark"] .sign-up-btn:active { color:#0b1220 !important; border-color:#ff9152 !important; background:#ff9152 !important; }
html[data-cardit-theme="dark"] .get-started-btn:hover,
html[data-cardit-theme="dark"] .get-started-btn:focus,
html[data-cardit-theme="dark"] .get-started-btn:active { border-color:#ff9152 !important; color:#ff9152 !important; background:#1a2536 !important; }

/* ---------- Tabs (settings / notifications / card requests) ---------- */
html[data-cardit-theme="dark"] .nav-tabs { border-bottom-color:#24344a !important; }
html[data-cardit-theme="dark"] .nav-tabs > li > a { color:#9fb0c4 !important; }
html[data-cardit-theme="dark"] .nav-tabs > li > a:hover { background:#162233 !important; color:#e9f0f8 !important; }
html[data-cardit-theme="dark"] .nav-tabs > li.active > a,
html[data-cardit-theme="dark"] .nav-tabs > li.active > a:hover,
html[data-cardit-theme="dark"] .nav-tabs > li.active > a:focus { background:#131c2b !important; color:#ff9152 !important; }

/* ---------- Generic bootstrap tables (notifications / card requests) ---------- */
html[data-cardit-theme="dark"] .table > tbody > tr { border-bottom-color:#24344a !important; }
html[data-cardit-theme="dark"] .table > tbody > tr > th { background:#0f1826 !important; color:#e9f0f8 !important; }
html[data-cardit-theme="dark"] .table > tbody > tr > td,
html[data-cardit-theme="dark"] .table > thead > tr > td { color:#dbe4ef !important; }
html[data-cardit-theme="dark"] .table > thead > tr > th { background:#0f1826 !important; color:#9fb0c4 !important; border-bottom-color:#24344a !important; }
html[data-cardit-theme="dark"] .table-hover > tbody > tr:hover { background:#162233 !important; }
html[data-cardit-theme="dark"] .table-bottom-info,
html[data-cardit-theme="dark"] .prev-next a,
html[data-cardit-theme="dark"] .show-entries > a { color:#9fb0c4 !important; }

/* ---------- Card-request toolbar (mirror of folder-content-page) ---------- */
html[data-cardit-theme="dark"] .card-request-page .card-control-sec { background:#131c2b !important; border-color:#24344a !important; }
html[data-cardit-theme="dark"] .card-request-page .controls-list > li > a,
html[data-cardit-theme="dark"] .card-request-page .search-field input { background:#0f1826 !important; border-color:#24344a !important; color:#c3d0df !important; }
html[data-cardit-theme="dark"] .card-request-page .controls-list > li > a:hover,
html[data-cardit-theme="dark"] .card-request-page .controls-list > li.active > a { background:#2a1710 !important; border-color:#7a4a22 !important; color:#ffb37a !important; }

/* ============================================================
   All Collections page — dark tinted collection cards
   ============================================================ */
/* Light page wrappers → dark (were #f4f8fa / #fff / #fff5ef) */
html[data-cardit-theme="dark"] .all-folders-page #main,
html[data-cardit-theme="dark"] .all-folders-page .user-main-info { background:transparent !important; }
html[data-cardit-theme="dark"] .all-folders-page .folder-pages { background:#131c2b !important; border-color:#24344a !important; }
html[data-cardit-theme="dark"] .all-folders-page .folder-pages .top-sec { background:#131c2b !important; border-bottom-color:#24344a !important; }
html[data-cardit-theme="dark"] .all-folders-page .folder-pages .top-sec h3 { color:#e9f0f8 !important; }
html[data-cardit-theme="dark"] .all-folders-page .folder-pages .top-sec .createNewFolder { background:#1a2536 !important; border-color:#31435c !important; color:#e9f0f8 !important; }
html[data-cardit-theme="dark"] .all-folders-page .folder-pages .top-sec .createNewFolder:hover,
html[data-cardit-theme="dark"] .all-folders-page .folder-pages .top-sec .createNewFolder:focus { background:#2a1710 !important; border-color:#ff9152 !important; color:#ffb37a !important; }
html[data-cardit-theme="dark"] .all-folders-page .rename-delete,
html[data-cardit-theme="dark"] .all-folders-page .rename-delete a { background:#131c2b !important; color:#dbe4ef !important; }
html[data-cardit-theme="dark"] .all-folders-page .rename-delete a:hover { background:#162233 !important; }
html[data-cardit-theme="dark"] .all-folders-page .folder-section-header h4 { color:#e9f0f8 !important; }
html[data-cardit-theme="dark"] .all-folders-page .folder-section-header p { color:#9fb0c4 !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-collection-card {
  background:#131c2b !important; border-color:#24344a !important; color:#e9f0f8 !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.35) !important;
}
html[data-cardit-theme="dark"] .all-folders-page .cardit-collection-title h3 { color:#e9f0f8 !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-collection-title small { color:#9fb0c4 !important; }
html[data-cardit-theme="dark"] .all-folders-page .folder-badge,
html[data-cardit-theme="dark"] .all-folders-page .folder-access-note,
html[data-cardit-theme="dark"] .all-folders-page .cardit-collection-footer span { background:#0f1826 !important; color:#c8d5e4 !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-collection-footer { border-top-color:#24344a !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-collection-count .card-number { background:#0f1826 !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-collection-owner { background:#0f1826 !important; border-color:#24344a !important; color:#9fb0c4 !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-collection-owner strong { color:#e9f0f8 !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-collection-avatar-image { background:#0f1826 !important; box-shadow: inset 0 0 0 1px #24344a !important; }

/* Per-type accent hues (brightened for dark): left border + vivid avatar + tinted chips */
html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-web { border-color:#24344a !important; box-shadow: inset 4px 0 0 #ea7a4d, 0 12px 30px rgba(0,0,0,.35) !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-web:hover { border-color:#ea7a4d !important; box-shadow: inset 4px 0 0 #ea7a4d, 0 18px 40px rgba(0,0,0,.5) !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-web .cardit-collection-avatar:not(.cardit-collection-avatar-image) { background:#ea7a4d !important; color:#1a0f08 !important; box-shadow:none !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-web .folder-badge,
html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-web .cardit-collection-count { background:rgba(234,122,77,.16) !important; color:#f0a986 !important; }

html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-scanned { border-color:#24344a !important; box-shadow: inset 4px 0 0 #e0a54a, 0 12px 30px rgba(0,0,0,.35) !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-scanned:hover { border-color:#e0a54a !important; box-shadow: inset 4px 0 0 #e0a54a, 0 18px 40px rgba(0,0,0,.5) !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-scanned .cardit-collection-avatar:not(.cardit-collection-avatar-image) { background:#e0a54a !important; color:#1a1206 !important; box-shadow:none !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-scanned .folder-badge,
html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-scanned .cardit-collection-count { background:rgba(224,165,74,.16) !important; color:#e9c186 !important; }

html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-people { border-color:#24344a !important; box-shadow: inset 4px 0 0 #5aa2e8, 0 12px 30px rgba(0,0,0,.35) !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-people:hover { border-color:#5aa2e8 !important; box-shadow: inset 4px 0 0 #5aa2e8, 0 18px 40px rgba(0,0,0,.5) !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-people .cardit-collection-avatar:not(.cardit-collection-avatar-image) { background:#5aa2e8 !important; color:#08182b !important; box-shadow:none !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-people .folder-badge,
html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-people .cardit-collection-count { background:rgba(90,162,232,.16) !important; color:#9ec8f2 !important; }

html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-service { border-color:#24344a !important; box-shadow: inset 4px 0 0 #37c79b, 0 12px 30px rgba(0,0,0,.35) !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-service:hover { border-color:#37c79b !important; box-shadow: inset 4px 0 0 #37c79b, 0 18px 40px rgba(0,0,0,.5) !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-service .cardit-collection-avatar:not(.cardit-collection-avatar-image) { background:#37c79b !important; color:#04231a !important; box-shadow:none !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-service .folder-badge,
html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-service .cardit-collection-count { background:rgba(55,199,155,.16) !important; color:#83dcc0 !important; }

html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-personal { border-color:#24344a !important; box-shadow: inset 4px 0 0 #94a2b2, 0 12px 30px rgba(0,0,0,.35) !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-personal:hover { border-color:#94a2b2 !important; box-shadow: inset 4px 0 0 #94a2b2, 0 18px 40px rgba(0,0,0,.5) !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-personal .cardit-collection-avatar:not(.cardit-collection-avatar-image) { background:#94a2b2 !important; color:#12181d !important; box-shadow:none !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-personal .folder-badge,
html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-personal .cardit-collection-count { background:rgba(148,162,178,.16) !important; color:#c1cbd6 !important; }

html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-group { border-color:#24344a !important; box-shadow: inset 4px 0 0 #9a90ee, 0 12px 30px rgba(0,0,0,.35) !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-group:hover { border-color:#9a90ee !important; box-shadow: inset 4px 0 0 #9a90ee, 0 18px 40px rgba(0,0,0,.5) !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-group .cardit-collection-avatar:not(.cardit-collection-avatar-image) { background:#9a90ee !important; color:#12102b !important; box-shadow:none !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-group .folder-badge,
html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-group .cardit-collection-count { background:rgba(154,144,238,.16) !important; color:#c3bcf5 !important; }

html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-following { border-color:#24344a !important; box-shadow: inset 4px 0 0 #e37aa0, 0 12px 30px rgba(0,0,0,.35) !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-following:hover { border-color:#e37aa0 !important; box-shadow: inset 4px 0 0 #e37aa0, 0 18px 40px rgba(0,0,0,.5) !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-following .cardit-collection-avatar:not(.cardit-collection-avatar-image) { background:#e37aa0 !important; color:#2a0e1a !important; box-shadow:none !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-following .folder-badge,
html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-following .cardit-collection-count { background:rgba(227,122,160,.16) !important; color:#f0a8c2 !important; }

/* Kebab menu + create-folder card */
html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-menu-btn { background:#0f1826 !important; border-color:#31435c !important; color:#c3d0df !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-menu-btn:hover { color:#ff9152 !important; border-color:#ff9152 !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-menu { background:#131c2b !important; border-color:#24344a !important; box-shadow:0 12px 28px rgba(0,0,0,.55) !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-menu a { color:#dbe4ef !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-menu a:hover { background:#162233 !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-menu a[data-action="delete"] { color:#ff7a6b !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-folder-menu a[data-action="delete"]:hover { background:#3a1512 !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-create-folder-card { background:#131c2b !important; border-color:#ff9152 !important; color:#e9f0f8 !important; box-shadow:0 10px 24px rgba(0,0,0,.35) !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-create-folder-card strong { color:#e9f0f8 !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-create-folder-card small { color:#9fb0c4 !important; }
html[data-cardit-theme="dark"] .all-folders-page .cardit-create-folder-icon { background:#ff9152 !important; color:#0b1220 !important; }

/* ============================================================
   Card detail page (.card-detail-page) + #userCardDetail panel
   ============================================================ */
html[data-cardit-theme="dark"] .card-detail-page {
  background: radial-gradient(circle at 12% 0%, rgba(255,145,82,.10), transparent 30%), #0b1220 !important;
}
html[data-cardit-theme="dark"] .card-detail-page .cardit-back-btn { background:#131c2b !important; border-color:#24344a !important; color:#e9f0f8 !important; }
html[data-cardit-theme="dark"] .card-detail-page .cardit-back-btn:hover,
html[data-cardit-theme="dark"] .card-detail-page .cardit-back-btn:focus { background:#2a1710 !important; border-color:#ff9152 !important; color:#ffb37a !important; }
html[data-cardit-theme="dark"] .card-detail-page .cardit-detail-empty { background:#131c2b !important; border-color:#24344a !important; box-shadow:0 18px 42px rgba(0,0,0,.45) !important; }
html[data-cardit-theme="dark"] .card-detail-page .cardit-detail-empty h3 { color:#e9f0f8 !important; }
html[data-cardit-theme="dark"] .card-detail-page .cardit-detail-empty p { color:#9fb0c4 !important; }
html[data-cardit-theme="dark"] .card-detail-page #carditDetailMount.cardit-detail-loading { color:#9fb0c4 !important; }
html[data-cardit-theme="dark"] .card-detail-page #userCardDetail .cardit-detail-top { background:#131c2b !important; border-color:#24344a !important; box-shadow:0 24px 58px rgba(0,0,0,.55) !important; }
html[data-cardit-theme="dark"] .card-detail-page #userCardDetail .cardit-detail-visual { background:#0f1826 !important; }
html[data-cardit-theme="dark"] .card-detail-page #userCardDetail .cardit-detail-hero { background:#131c2b !important; border-top-color:#24344a !important; }
html[data-cardit-theme="dark"] #userCardDetail .cardit-detail-owner h3 { color:#e9f0f8 !important; }
html[data-cardit-theme="dark"] #userCardDetail .cardit-detail-subtitle { color:#9fb0c4 !important; }
html[data-cardit-theme="dark"] #userCardDetail .cardit-detail-description { color:#c7d2df !important; }
html[data-cardit-theme="dark"] #userCardDetail .cardit-detail-actions .bcn,
html[data-cardit-theme="dark"] #userCardDetail .cardit-detail-actions .rate-card { background:#0f1826 !important; border-color:#24344a !important; color:#9fb0c4 !important; }
html[data-cardit-theme="dark"] #userCardDetail .cardit-detail-actions .bcn a,
html[data-cardit-theme="dark"] #userCardDetail .cardit-detail-actions .bcn strong { color:#e9f0f8 !important; }
html[data-cardit-theme="dark"] #userCardDetail .cardit-detail-status .card-added { background:#12241a !important; border-color:#2b5f3f !important; color:#7fd8a0 !important; }
html[data-cardit-theme="dark"] #userCardDetail .card-details-panel,
html[data-cardit-theme="dark"] #userCardDetail .mutual-contacts,
html[data-cardit-theme="dark"] #userCardDetail .coments-sec { background:#131c2b !important; border-color:#24344a !important; box-shadow:0 18px 42px rgba(0,0,0,.45) !important; }
html[data-cardit-theme="dark"] #userCardDetail .card-details-panel-head h3,
html[data-cardit-theme="dark"] #userCardDetail .card-detail-section h4,
html[data-cardit-theme="dark"] #userCardDetail .cardit-detail-menu .card-details-panel-head h3,
html[data-cardit-theme="dark"] #userCardDetail .cardit-detail-rewards .card-details-panel-head h3 { color:#e9f0f8 !important; }
html[data-cardit-theme="dark"] #userCardDetail .card-details-grid .detail-row,
html[data-cardit-theme="dark"] #userCardDetail .detail-row { background:#0f1826 !important; border-color:#24344a !important; }
html[data-cardit-theme="dark"] #userCardDetail .card-details-grid .detail-row span,
html[data-cardit-theme="dark"] #userCardDetail .detail-row span { color:#9fb0c4 !important; }
html[data-cardit-theme="dark"] #userCardDetail .card-details-grid .detail-row strong,
html[data-cardit-theme="dark"] #userCardDetail .detail-row strong { color:#e9f0f8 !important; }
html[data-cardit-theme="dark"] #userCardDetail .card-details-grid .detail-row a,
html[data-cardit-theme="dark"] #userCardDetail .detail-row a { color:#ff9152 !important; }
html[data-cardit-theme="dark"] #userCardDetail .card-detail-section { background:transparent !important; border-color:#24344a !important; }
html[data-cardit-theme="dark"] #userCardDetail .mutual-contacts p,
html[data-cardit-theme="dark"] #userCardDetail .coments-sec p { color:#c7d2df !important; }

/* ============================================================
   Create-card wizard (.create-card-page) — retheme the inline
   `cc-*` design system via its CSS variables + hardcoded whites.
   ============================================================ */
html[data-cardit-theme="dark"] .create-card-page {
  --cc-text:#e9f0f8; --cc-muted:#9fb0c4; --cc-border:#24344a;
  --cc-bg:#0b1220; --cc-surface:#131c2b; --cc-primary:#cfe0f2; --cc-accent:#ff9152;
}
html[data-cardit-theme="dark"] .create-card-page .cc-field input,
html[data-cardit-theme="dark"] .create-card-page .cc-field select,
html[data-cardit-theme="dark"] .create-card-page .cc-field textarea { background:#0f1826 !important; color:#e6edf5 !important; border-color:#24344a !important; }
html[data-cardit-theme="dark"] .create-card-page .cc-field label { color:#c3d0df !important; }
html[data-cardit-theme="dark"] .create-card-page .cc-step .cc-dot { background:#1a2536 !important; color:#9fb0c4 !important; }
html[data-cardit-theme="dark"] .create-card-page .cc-btn.ghost { background:#131c2b !important; color:#cfe0f2 !important; border-color:#24344a !important; }
html[data-cardit-theme="dark"] .create-card-page .cc-btn.primary:hover { background:#e0560f !important; }
html[data-cardit-theme="dark"] .create-card-page .cc-preview-media { background:#0f1826 !important; color:#7286a0 !important; }
html[data-cardit-theme="dark"] .create-card-page .cc-preview-chip { background:rgba(255,145,82,.16) !important; color:#ffb37a !important; }
html[data-cardit-theme="dark"] .create-card-page .cc-drop:hover { background:#1a2231 !important; }
html[data-cardit-theme="dark"] .create-card-page .cc-front-preview img,
html[data-cardit-theme="dark"] .create-card-page .cc-front-preview video { background:#0b1323 !important; }
html[data-cardit-theme="dark"] .create-card-page .cc-modal { background:#131c2b !important; }
html[data-cardit-theme="dark"] .create-card-page .cc-modal h2 { color:#e9f0f8 !important; }
html[data-cardit-theme="dark"] .create-card-page .cc-modal .cc-bcn strong { background:#0f1826 !important; color:#e9f0f8 !important; }