/* ==========================================================================
   Premium URL Shortener – design system
   Brand colour is injected as --brand / --brand-rgb by partials/head.ejs
   ========================================================================== */
:root {
  --brand: #6236ff;
  --brand-rgb: 98, 54, 255;
  --brand-dark: color-mix(in srgb, var(--brand) 82%, #000);
  --brand-light: color-mix(in srgb, var(--brand) 12%, #fff);
  --brand-soft: rgba(var(--brand-rgb), .1);
  --radius: .75rem;
  --radius-lg: 1rem;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-lg: 0 12px 32px -8px rgba(16, 24, 40, .14), 0 4px 8px -4px rgba(16, 24, 40, .06);
  --sidebar-w: 260px;
  --topbar-h: 64px;
  --app-bg: #f6f7fb;
  --surface: #ffffff;
  --border: #e8eaf1;
  --muted: #6b7280;
  --heading: #111827;
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-primary: var(--brand);
  --bs-primary-rgb: var(--brand-rgb);
  --bs-link-color: var(--brand);
  --bs-link-color-rgb: var(--brand-rgb);
  --bs-link-hover-color: var(--brand-dark);
  --bs-border-radius: .6rem;
  --bs-border-radius-lg: .9rem;
}
[data-bs-theme="dark"] {
  --app-bg: #0f1117;
  --surface: #171a23;
  --border: #262b38;
  --muted: #9aa1b2;
  --heading: #f3f4f6;
  --brand-light: color-mix(in srgb, var(--brand) 22%, #171a23);
  --brand-soft: rgba(var(--brand-rgb), .18);
  --bs-body-bg: #0f1117;
  --bs-body-color: #d6d9e0;
  --bs-border-color: #262b38;
  --bs-secondary-bg: #1d212c;
  --bs-tertiary-bg: #1a1e28;
  --shadow: 0 1px 3px rgba(0, 0, 0, .4);
  --shadow-lg: 0 12px 32px -8px rgba(0, 0, 0, .6);
}

body { font-family: var(--bs-body-font-family); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--heading); font-weight: 700; letter-spacing: -.01em; }
a { text-decoration: none; }
.text-muted { color: var(--muted) !important; }
.fw-semibold { font-weight: 600 !important; }
.small-caps { text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; font-weight: 600; }
.min-w-0 { min-width: 0; }
.text-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cursor-pointer { cursor: pointer; }
.mw-100px { max-width: 100px; } .mw-200px { max-width: 200px; } .mw-300px { max-width: 300px; } .mw-400px { max-width: 400px; }

/* ----------------------------------------------------------------- brand */
.text-primary { color: var(--brand) !important; }
.bg-primary { background-color: var(--brand) !important; }
.bg-primary-soft { background-color: var(--brand-soft) !important; }
.border-primary { border-color: var(--brand) !important; }
.link-primary { color: var(--brand) !important; }
.btn-primary {
  --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-dark); --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-active-bg: var(--brand-dark); --bs-btn-active-border-color: var(--brand-dark);
  --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand);
  --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-bg: var(--brand); --bs-btn-active-border-color: var(--brand);
  --bs-btn-disabled-color: var(--brand); --bs-btn-disabled-border-color: var(--brand);
  --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}
.btn-soft-primary { color: var(--brand); background: var(--brand-soft); border-color: transparent; }
.btn-soft-primary:hover, .btn-soft-primary:focus { color: #fff; background: var(--brand); }
.btn-soft-danger { color: #dc3545; background: rgba(220, 53, 69, .1); border-color: transparent; }
.btn-soft-danger:hover { color: #fff; background: #dc3545; }
.btn-soft-secondary { color: var(--bs-body-color); background: var(--bs-secondary-bg); border-color: transparent; }
.btn-soft-secondary:hover { background: var(--border); }
.btn { font-weight: 500; border-radius: .6rem; }
.btn-icon { width: 2.25rem; height: 2.25rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.btn-icon.btn-sm { width: 1.9rem; height: 1.9rem; }
.btn-gradient { color: #fff; border: 0; background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 55%, #ff3d9a)); }
.btn-gradient:hover { color: #fff; filter: brightness(1.08); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: rgba(var(--brand-rgb), .55); box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .15); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-range::-webkit-slider-thumb { background: var(--brand); }
.form-range::-moz-range-thumb { background: var(--brand); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--brand); }
.page-link { color: var(--brand); }
.active > .page-link, .page-link.active { background-color: var(--brand); border-color: var(--brand); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--brand); }
.list-group-item.active { background-color: var(--brand); border-color: var(--brand); }
.progress-bar { background-color: var(--brand); }
.badge-soft-primary { background: var(--brand-soft); color: var(--brand); }
.badge-soft-success { background: rgba(25, 135, 84, .12); color: #198754; }
.badge-soft-danger { background: rgba(220, 53, 69, .12); color: #dc3545; }
.badge-soft-warning { background: rgba(255, 193, 7, .18); color: #b58100; }
.badge-soft-info { background: rgba(13, 202, 240, .14); color: #0a8ca8; }
.badge-soft-secondary { background: rgba(108, 117, 125, .12); color: var(--muted); }
.badge { font-weight: 600; }
.form-label { font-weight: 500; font-size: .9rem; }
.form-text { font-size: .8rem; }
.input-group-text { background: var(--bs-tertiary-bg); }

/* ----------------------------------------------------------------- cards */
.card { border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); background: var(--surface); }
.card-header { background: transparent; border-bottom: 1px solid var(--border); padding: 1rem 1.25rem; font-weight: 600; }
.card-header:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.card-footer { background: transparent; border-top: 1px solid var(--border); }
.card-body { padding: 1.25rem; }
.card-hover { transition: transform .15s ease, box-shadow .15s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.card-title { font-weight: 600; }
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .85rem 1rem; border-color: var(--border); }
.table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; background: var(--bs-tertiary-bg); border-bottom-width: 1px; white-space: nowrap; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: rgba(var(--brand-rgb), .03); }
.card > .table-responsive:last-child .table tr:last-child td { border-bottom: 0; }

.stat-card { display: flex; align-items: center; gap: 1rem; }
.stat-icon { width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; flex-shrink: 0; background: var(--brand-soft); color: var(--brand); }
.stat-icon.success { background: rgba(25, 135, 84, .12); color: #198754; }
.stat-icon.warning { background: rgba(255, 193, 7, .18); color: #c58b00; }
.stat-icon.danger { background: rgba(220, 53, 69, .12); color: #dc3545; }
.stat-icon.info { background: rgba(13, 202, 240, .14); color: #0a8ca8; }
.stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--heading); }
.stat-label { color: var(--muted); font-size: .85rem; }

.icon-box { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-soft); color: var(--brand); flex-shrink: 0; }
.icon-box-lg { width: 56px; height: 56px; border-radius: 14px; font-size: 1.5rem; }
.avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--brand-soft); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.avatar-sm { width: 28px; height: 28px; font-size: .75rem; }
.avatar-lg { width: 64px; height: 64px; font-size: 1.4rem; }
.avatar-xl { width: 96px; height: 96px; font-size: 2rem; }
.favicon { width: 20px; height: 20px; border-radius: 4px; flex-shrink: 0; }

.page-header { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.page-header h1 { font-size: 1.5rem; margin: 0; }
.page-header p { margin: .25rem 0 0; color: var(--muted); }

.empty-state { text-align: center; padding: 3rem 1rem; }
.empty-state .empty-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; margin-bottom: 1rem; }

.section-title { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; margin-bottom: .75rem; }
.divider-text { display: flex; align-items: center; gap: 1rem; color: var(--muted); font-size: .85rem; }
.divider-text::before, .divider-text::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.option-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; cursor: pointer; transition: all .15s; display: block; height: 100%; }
.option-card:hover { border-color: rgba(var(--brand-rgb), .5); }
.btn-check:checked + .option-card, .option-card.active { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 1px var(--brand); }

.short-link { font-weight: 600; color: var(--brand); word-break: break-all; }
.long-link { color: var(--muted); font-size: .85rem; word-break: break-all; }
.copy-btn.copied { color: #198754 !important; }
.kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--bs-tertiary-bg); border: 1px solid var(--border); border-radius: .4rem; padding: .15rem .45rem; font-size: .85em; }
pre.code, .code-block { background: #0f172a; color: #e2e8f0; border-radius: var(--radius); padding: 1rem 1.25rem; font-size: .82rem; overflow: auto; margin: 0; }
pre.code .k { color: #c792ea; } pre.code .s { color: #c3e88d; } pre.code .c { color: #7f8ea3; }

.color-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.lock-badge { font-size: .65rem; padding: .15rem .4rem; border-radius: 1rem; background: rgba(255, 193, 7, .18); color: #b58100; }
.upgrade-card { background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 50%, #ff3d9a)); color: #fff; border: 0; }
.upgrade-card .text-muted { color: rgba(255, 255, 255, .75) !important; }

/* ----------------------------------------------------------------- app layout (user + admin) */
.app-body { background: var(--app-bg); min-height: 100vh; }
.app-sidebar {
  position: fixed; top: 0; bottom: 0; left: 0; width: var(--sidebar-w); z-index: 1040;
  background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column;
  transition: transform .2s ease;
}
[dir="rtl"] .app-sidebar { left: auto; right: 0; border-right: 0; border-left: 1px solid var(--border); }
.app-sidebar .sidebar-brand { height: var(--topbar-h); display: flex; align-items: center; padding: 0 1.25rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.app-sidebar .sidebar-scroll { overflow-y: auto; flex: 1; padding: 1rem .75rem; }
.app-sidebar .sidebar-footer { padding: 1rem; border-top: 1px solid var(--border); flex-shrink: 0; }
.sidebar-heading { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 700; padding: 1rem .75rem .4rem; }
.sidebar-nav .nav-link { display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem; border-radius: .6rem; color: var(--bs-body-color); font-weight: 500; font-size: .92rem; }
.sidebar-nav .nav-link i { font-size: 1.1rem; width: 1.25rem; text-align: center; color: var(--muted); }
.sidebar-nav .nav-link:hover { background: var(--bs-tertiary-bg); color: var(--heading); }
.sidebar-nav .nav-link.active { background: var(--brand-soft); color: var(--brand); }
.sidebar-nav .nav-link.active i { color: var(--brand); }
.sidebar-nav .nav-link .badge { margin-left: auto; }
[dir="rtl"] .sidebar-nav .nav-link .badge { margin-left: 0; margin-right: auto; }
.app-main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
[dir="rtl"] .app-main { margin-left: 0; margin-right: var(--sidebar-w); }
.app-topbar { position: sticky; top: 0; z-index: 1030; height: var(--topbar-h); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: .75rem; padding: 0 1.5rem; }
.app-content { padding: 1.75rem 1.5rem; flex: 1; width: 100%; max-width: 1480px; margin: 0 auto; }
.app-footer { padding: 1rem 1.5rem; color: var(--muted); font-size: .85rem; }
.topbar-search { max-width: 420px; flex: 1; }
.topbar-search .form-control { background: var(--bs-tertiary-bg); border-color: transparent; padding-left: 2.4rem; border-radius: 2rem; }
.topbar-search .bi-search { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: var(--muted); }
.notif-dot { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; border-radius: 8px; background: #dc3545; color: #fff; font-size: .62rem; display: flex; align-items: center; justify-content: center; padding: 0 3px; }
.sidebar-backdrop { display: none; }
.admin-body .app-sidebar { background: #111827; border-color: #1f2937; }
.admin-body .app-sidebar .sidebar-brand { border-color: #1f2937; }
.admin-body .app-sidebar .sidebar-footer { border-color: #1f2937; }
.admin-body .sidebar-nav .nav-link { color: #cbd5e1; }
.admin-body .sidebar-nav .nav-link i { color: #64748b; }
.admin-body .sidebar-nav .nav-link:hover { background: #1f2937; color: #fff; }
.admin-body .sidebar-nav .nav-link.active { background: rgba(var(--brand-rgb), .25); color: #fff; }
.admin-body .sidebar-nav .nav-link.active i { color: #fff; }
.admin-body .sidebar-heading { color: #64748b; }
.admin-body .sidebar-brand .brand-text { color: #fff; }
@media (max-width: 991.98px) {
  .app-sidebar { transform: translateX(-100%); }
  [dir="rtl"] .app-sidebar { transform: translateX(100%); }
  .app-sidebar.show { transform: none; box-shadow: var(--shadow-lg); }
  .app-main { margin-left: 0 !important; margin-right: 0 !important; }
  .sidebar-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 1035; }
  .app-content { padding: 1.25rem 1rem; }
  .app-topbar { padding: 0 1rem; }
}

.brand-logo { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.15rem; color: var(--heading); letter-spacing: -.02em; }
.brand-logo img { max-height: 34px; max-width: 180px; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 55%, #ff3d9a)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; }

/* ----------------------------------------------------------------- public site */
.site-body { background: var(--surface); }
.site-navbar { padding: .9rem 0; background: color-mix(in srgb, var(--surface) 85%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.site-navbar.scrolled { border-color: var(--border); }
.site-navbar .nav-link { font-weight: 500; color: var(--bs-body-color); padding: .5rem .9rem !important; }
.site-navbar .nav-link:hover, .site-navbar .nav-link.active { color: var(--brand); }
.hero { position: relative; overflow: hidden; padding: 6rem 0 5rem; }
.hero::before { content: ""; position: absolute; inset: -40% -10% auto; height: 120%; background: radial-gradient(closest-side, rgba(var(--brand-rgb), .16), transparent 70%); z-index: 0; pointer-events: none; }
.hero > * { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; }
.hero .lead { font-size: 1.2rem; color: var(--muted); max-width: 640px; margin-left: auto; margin-right: auto; }
.text-gradient { background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 45%, #ff3d9a)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.shortener-box { background: var(--surface); border: 1px solid var(--border); border-radius: 1.1rem; box-shadow: var(--shadow-lg); padding: .6rem; }
.shortener-box .form-control { border: 0; box-shadow: none; font-size: 1.05rem; padding: .8rem 1rem; background: transparent; }
.section { padding: 5rem 0; }
.section-sm { padding: 3rem 0; }
.section-alt { background: var(--app-bg); }
.feature-icon { width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; background: var(--brand-soft); color: var(--brand); }
.pricing-card { border-radius: 1.25rem; height: 100%; }
.pricing-card.highlight { border: 2px solid var(--brand); box-shadow: var(--shadow-lg); }
.pricing-card .price { font-size: 2.6rem; font-weight: 800; color: var(--heading); letter-spacing: -.03em; }
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { padding: .35rem 0; display: flex; gap: .6rem; align-items: flex-start; }
.check-list li i.bi-check-circle-fill { color: #198754; }
.check-list li.disabled { color: var(--muted); text-decoration: line-through; opacity: .7; }
.site-footer { background: var(--app-bg); border-top: 1px solid var(--border); padding: 4rem 0 2rem; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--brand); }
.site-footer h6 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1rem; }
.prose { line-height: 1.75; font-size: 1.02rem; }
.prose h2 { margin-top: 2rem; font-size: 1.5rem; } .prose h3 { margin-top: 1.5rem; font-size: 1.25rem; }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius); }
.prose pre { background: var(--bs-tertiary-bg); padding: 1rem; border-radius: var(--radius); }
.prose blockquote { border-left: 4px solid var(--brand); padding-left: 1rem; color: var(--muted); }

/* ----------------------------------------------------------------- auth */
.auth-wrapper { min-height: 100vh; display: flex; }
.auth-side { flex: 1; background: linear-gradient(150deg, var(--brand), color-mix(in srgb, var(--brand) 45%, #ff3d9a)); color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 4rem; position: relative; overflow: hidden; }
.auth-side h2 { color: #fff; font-size: 2.2rem; }
.auth-side::after { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: rgba(255, 255, 255, .08); right: -160px; bottom: -160px; }
.auth-main { width: 100%; max-width: 560px; display: flex; flex-direction: column; justify-content: center; padding: 3rem; background: var(--surface); }
.auth-card { width: 100%; max-width: 420px; margin: 0 auto; }
.btn-social { border: 1px solid var(--border); background: var(--surface); color: var(--bs-body-color); font-weight: 500; }
.btn-social:hover { background: var(--bs-tertiary-bg); }
@media (max-width: 991.98px) { .auth-side { display: none; } .auth-main { max-width: none; padding: 2rem 1.25rem; } }

/* ----------------------------------------------------------------- misc components */
.toast-container { z-index: 2000; }
.dropzone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 2rem; text-align: center; color: var(--muted); cursor: pointer; transition: all .15s; }
.dropzone:hover, .dropzone.dragover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.img-preview { max-width: 100%; max-height: 120px; border-radius: .5rem; object-fit: contain; }
.repeater-row { position: relative; }
.chart-container { position: relative; height: 300px; }
.chart-container.sm { height: 220px; }
.map-container { height: 340px; }
.bar-list .bar-item { position: relative; padding: .55rem .75rem; border-radius: .5rem; display: flex; justify-content: space-between; gap: 1rem; z-index: 0; }
.bar-list .bar-item .bar-fill { position: absolute; inset: 0 auto 0 0; background: var(--brand-soft); border-radius: .5rem; z-index: -1; }
.nav-tabs-modern { border-bottom: 1px solid var(--border); gap: .25rem; flex-wrap: nowrap; overflow-x: auto; }
.nav-tabs-modern .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 500; padding: .75rem 1rem; white-space: nowrap; border-radius: 0; background: none; }
.nav-tabs-modern .nav-link:hover { color: var(--heading); }
.nav-tabs-modern .nav-link.active { color: var(--brand); border-bottom-color: var(--brand); background: none; }
.settings-nav .nav-link { color: var(--bs-body-color); border-radius: .6rem; padding: .6rem .9rem; display: flex; gap: .65rem; align-items: center; font-weight: 500; }
.settings-nav .nav-link i { color: var(--muted); }
.settings-nav .nav-link.active { background: var(--brand-soft); color: var(--brand); }
.settings-nav .nav-link.active i { color: var(--brand); }
.bulk-bar { position: sticky; bottom: 1rem; z-index: 1020; display: none; }
.bulk-bar.show { display: block; }
.sortable-ghost { opacity: .4; }
.drag-handle { cursor: grab; color: var(--muted); }
.cookie-banner { position: fixed; bottom: 1rem; left: 1rem; right: 1rem; max-width: 560px; z-index: 2000; }
.impersonate-bar { background: #111827; color: #fff; font-size: .9rem; }
.announcement { border-radius: var(--radius); }
.qr-preview { background: #fff; border-radius: var(--radius); padding: 1rem; display: flex; align-items: center; justify-content: center; }
.qr-preview svg, .qr-preview img { max-width: 100%; height: auto; }
.phone-preview { width: 320px; height: 640px; border: 10px solid #111827; border-radius: 42px; overflow: hidden; box-shadow: var(--shadow-lg); margin: 0 auto; background: #fff; }
.phone-preview iframe { width: 100%; height: 100%; border: 0; }
.spinner-overlay { position: absolute; inset: 0; background: rgba(255, 255, 255, .6); display: flex; align-items: center; justify-content: center; z-index: 5; border-radius: inherit; }
[data-bs-theme="dark"] .spinner-overlay { background: rgba(0, 0, 0, .4); }
[data-bs-theme="dark"] .bg-white { background-color: var(--surface) !important; }
[data-bs-theme="dark"] .bg-light { background-color: var(--bs-tertiary-bg) !important; }
[data-bs-theme="dark"] .border, [data-bs-theme="dark"] .border-top, [data-bs-theme="dark"] .border-bottom { border-color: var(--border) !important; }
.ad-slot { text-align: center; margin: 1rem auto; overflow: hidden; }
.ad-slot img { max-width: 100%; height: auto; }
.logo-dark-only { display: none; }
[data-bs-theme="dark"] .logo-dark-only { display: inline; }
[data-bs-theme="dark"] .logo-light-only { display: none; }

/* ----------------------------------------------------------------- theme presets (settings.theme) */
.theme-modern { --radius: 1rem; --radius-lg: 1.35rem; }
.theme-modern .card { box-shadow: var(--shadow); }
.theme-modern .btn { border-radius: 2rem; }
.theme-modern .form-control, .theme-modern .form-select { border-radius: .8rem; }
.theme-modern .sidebar-nav .nav-link { border-radius: 2rem; }
.theme-minimal { --radius: .4rem; --radius-lg: .5rem; --shadow-lg: none; }
.theme-minimal .card { box-shadow: none; }
.theme-minimal .btn { border-radius: .4rem; }
.theme-minimal .hero::before { display: none; }
.theme-minimal .btn-gradient, .theme-minimal .upgrade-card { background: var(--brand); }
.theme-minimal .text-gradient { background: none; color: var(--brand); -webkit-background-clip: initial; background-clip: initial; }