/* ==========================================================================
   TroxCard app styles (auth, dashboard, modals) — Bootstrap 5 + brand layer
   ========================================================================== */
:root {
    --tc-violet: #7c3aed;
    --tc-violet-600: #6d28d9;
    --tc-violet-700: #5b21b6;
    --tc-violet-900: #2e1065;
    --tc-slate-50: #f8fafc;
    --tc-slate-100: #f1f5f9;
    --tc-slate-200: #e2e8f0;
    --tc-slate-300: #cbd5e1;
    --tc-slate-400: #94a3b8;
    --tc-slate-500: #64748b;
    --tc-slate-600: #475569;
    --tc-slate-700: #334155;
    --tc-slate-800: #1e293b;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Utilities */
.text-violet { color: var(--tc-violet) !important; }
.text-slate-300 { color: var(--tc-slate-300) !important; }
.text-slate-400 { color: var(--tc-slate-400) !important; }
.text-slate-500 { color: var(--tc-slate-500) !important; }
.text-slate-600 { color: var(--tc-slate-600) !important; }
.text-slate-700 { color: var(--tc-slate-700) !important; }
.text-slate-800 { color: var(--tc-slate-800) !important; }
.text-emerald { color: #059669 !important; }
.text-amber-900 { color: #78350f !important; }
.text-amber-700 { color: #b45309 !important; }
.tiny { font-size: .75rem; }
.micro { font-size: .66rem; }
.fw-black { font-weight: 900 !important; }
.min-w-0 { min-width: 0; }
.rotate-90 { display: inline-block; transform: rotate(90deg); }
.bg-violet-soft { background: #ede9fe !important; color: var(--tc-violet) !important; }
.bg-violet-soft-2 { background: #f5f3ff !important; color: #7c3aed !important; }
.bg-rose-soft { background: #fff1f2 !important; color: #e11d48 !important; }
.bg-emerald-soft { background: #ecfdf5 !important; color: #059669 !important; }
.bg-red-soft { background: #fee2e2 !important; color: #ef4444 !important; }
.border-violet-100 { border-color: #ede9fe !important; }

/* Buttons */
.btn-tc, .btn-violet { background: var(--tc-violet); color: #fff; border: 0; font-weight: 700; }
.btn-tc:hover, .btn-violet:hover { background: var(--tc-violet-600); color: #fff; }
.btn-violet { box-shadow: 0 10px 15px -3px rgba(221, 214, 254, .9); }
.btn-outline-tc { border: 1px solid #ddd6fe; color: var(--tc-violet); font-weight: 700; background: #fff; }
.btn-outline-tc:hover { background: #f5f3ff; color: var(--tc-violet); }
.btn-violet-gradient { background: linear-gradient(90deg, var(--tc-violet), var(--tc-violet-700)); color: #fff; border: 0; box-shadow: 0 4px 6px -1px rgba(124, 58, 237, .3); }
.btn-violet-gradient:hover { color: #fff; opacity: .95; }
.btn-tc-primary { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1rem; border: 0; border-radius: .75rem; background: var(--tc-violet); color: #fff; font-weight: 700; font-size: .75rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1); transition: background .15s, transform .1s; }
.btn-tc-primary:hover { background: var(--tc-violet-600); }
.btn-tc-primary:active { transform: scale(.98); }
.btn-tc-primary:disabled { opacity: .75; }
.btn-link-violet { border: 0; background: transparent; color: var(--tc-violet); font-weight: 700; font-size: .75rem; padding: .5rem; }
.btn-link-violet:hover { text-decoration: underline; }
.btn-outline-violet { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem; border-radius: .75rem; border: 1px solid #ddd6fe; background: #fff; color: var(--tc-violet); font-weight: 700; font-size: .75rem; }
.btn-outline-violet:hover { background: #f5f3ff; }
.link-btn { border: 0; background: transparent; color: var(--tc-violet); font-weight: 700; font-size: .75rem; padding: 0; display: inline-flex; align-items: center; gap: .25rem; }
.link-btn:hover { text-decoration: underline; }

/* ==========================================================================
   Auth screens
   ========================================================================== */
body.auth-body { min-height: 100vh; background: linear-gradient(to bottom, #7c3aed, #5b21b6, #2e1065) fixed; color: #fff; }
.auth-screen { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 1.5rem 1.5rem 3rem; overflow-x: hidden; }
.auth-glow { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 18rem; height: 18rem; border-radius: 50%; background: rgba(167, 139, 250, .2); filter: blur(120px); pointer-events: none; }
.auth-box { position: relative; z-index: 1; width: 100%; max-width: 24rem; display: flex; flex-direction: column; align-items: center; margin: 1rem 0 2rem; }
.auth-box > form { width: 100%; }
.auth-logo { width: 16rem; height: 4rem; object-fit: contain; margin-bottom: 2rem; filter: drop-shadow(0 4px 3px rgba(0,0,0,.07)); }
.auth-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: .5rem; }
.auth-subtitle { font-size: .75rem; color: rgba(255,255,255,.7); margin: 0; }
.auth-field { position: relative; display: flex; align-items: center; }
.auth-field-icon { position: absolute; left: 1rem; font-size: 1.15rem; color: rgba(255,255,255,.5); pointer-events: none; }
.auth-input { width: 100%; padding: .9rem 1rem .9rem 3rem; font-size: .875rem; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: .75rem; outline: none; transition: background .15s, border-color .15s; }
.auth-input::placeholder { color: rgba(255,255,255,.5); }
.auth-input:hover { background: rgba(255,255,255,.15); }
.auth-input:focus { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); }
.auth-field.is-taken .auth-input { background: rgba(239, 68, 68, .2); border: 2px solid #ef4444; box-shadow: 0 0 0 .2rem rgba(239, 68, 68, .3); }
.auth-field.is-taken .auth-field-icon { color: #fca5a5; }
.auth-field-error { font-size: .75rem; font-weight: 600; color: #fca5a5; display: flex; gap: .4rem; align-items: center; margin: .3rem .25rem 0; }
.auth-eye { position: absolute; right: 1rem; border: 0; background: transparent; color: rgba(255,255,255,.5); font-size: 1.15rem; padding: 0; }
.auth-eye:hover { color: rgba(255,255,255,.8); }
.auth-link-muted { font-size: .75rem; font-weight: 500; color: rgba(255,255,255,.8); text-decoration: none; }
.auth-link-muted:hover { color: #fff; }
.auth-submit { width: 100%; padding: .9rem; border: 0; border-radius: .75rem; background: #fff; color: #4c1d95; font-weight: 700; font-size: .875rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,.15); transition: transform .1s, background .15s; }
.auth-submit:hover { background: rgba(255,255,255,.95); }
.auth-submit:active { transform: scale(.98); }
.auth-alert { width: 100%; padding: .75rem; border-radius: .75rem; font-size: .75rem; font-weight: 600; display: flex; gap: .5rem; align-items: center; margin-bottom: .25rem; }
.auth-alert-danger { background: rgba(239, 68, 68, .25); border: 1px solid rgba(248, 113, 113, .5); color: #fee2e2; }
.auth-alert-success { background: rgba(16, 185, 129, .25); border: 1px solid rgba(52, 211, 153, .5); color: #d1fae5; }
.auth-terms { display: flex; gap: .6rem; align-items: flex-start; margin-top: .5rem; font-size: .75rem; color: rgba(255,255,255,.8); cursor: pointer; }
.auth-terms input { margin-top: .2rem; accent-color: var(--tc-violet); }
.auth-terms a, .auth-footer a { color: #c4b5fd; font-weight: 700; }
.auth-terms a:hover, .auth-footer a:hover { color: #ddd6fe; }
.auth-footer { font-size: .75rem; color: rgba(255,255,255,.7); text-align: center; margin-top: 2rem; }
.auth-hint { font-size: .75rem; color: rgba(255,255,255,.8); background: rgba(255,255,255,.08); border-radius: .75rem; padding: .75rem; margin: 0; }
.auth-link-button { border: 0; background: transparent; color: #c4b5fd; font-weight: 700; font-size: .75rem; text-decoration: underline; }
.error-badge { width: 80px; height: 80px; border-radius: 1.5rem; background: rgba(168, 85, 247, .2); color: #c084fc; border: 1px solid rgba(168, 85, 247, .3); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; font-weight: 900; margin: 0 auto 1.25rem; }

/* ==========================================================================
   Dashboard
   ========================================================================== */
body.dash-body { background: #4c1d95; overflow: hidden; }
.dash-app { position: fixed; inset: 0; display: flex; flex-direction: column; color: var(--tc-slate-800); user-select: none; }
.dash-scroll { flex: 1; overflow-y: auto; background: #4c1d95; scrollbar-width: none; }
.dash-scroll::-webkit-scrollbar { display: none; }
.dash-scroll > * { max-width: 560px; margin-left: auto; margin-right: auto; }

.dash-topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: .875rem 1.5rem; color: #fff; border-bottom: 1px solid transparent; transition: background .3s, box-shadow .3s; }
.dash-topbar.scrolled { background: rgba(59, 7, 100, .98); backdrop-filter: blur(12px); border-bottom-color: rgba(88, 28, 135, .4); box-shadow: 0 10px 15px -3px rgba(0,0,0,.2); }
.dash-logo { height: 36px; width: auto; object-fit: contain; }
.dash-icon-btn { border: 0; background: transparent; color: #fff; font-size: 1.3rem; padding: .3rem; border-radius: 50%; }
.dash-icon-btn:hover { background: rgba(255,255,255,.1); }
.dash-avatar-btn { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); background: #2e1065; color: #fff; font-size: .75rem; font-weight: 700; text-transform: uppercase; display: flex; align-items: center; justify-content: center; }
.dash-dropdown { width: 16rem; padding: .6rem; border: 1px solid var(--tc-slate-100); border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); margin-top: .75rem !important; }
.dash-dropdown-user { display: flex; align-items: center; gap: .75rem; padding: .75rem; background: rgba(245, 243, 255, .7); border-radius: .75rem; margin-bottom: .5rem; }
.dash-dropdown-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--tc-violet); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.member-pill { display: inline-block; margin-top: .25rem; padding: .1rem .5rem; border-radius: .4rem; background: #ede9fe; color: var(--tc-violet); font-size: 9px; font-weight: 700; }
.dash-menu-item { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: .6rem .75rem; border: 0; background: transparent; border-radius: .75rem; font-size: .75rem; font-weight: 700; color: var(--tc-slate-700); text-align: left; }
.dash-menu-item:hover { background: #f5f3ff; color: var(--tc-violet); }
.dash-menu-item.text-danger:hover { background: #fef2f2; color: #ef4444 !important; }
.menu-icon { width: 26px; height: 26px; border-radius: .5rem; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; }

.dash-hero { position: relative; margin-top: -4.5rem; padding: 5rem 1.5rem 4rem; color: #fff; background: linear-gradient(to bottom, #1b073c, #2d0a5a, #4c1d95); border-radius: 0 0 2.5rem 2.5rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,.2); }
.dash-scroll > .dash-hero { max-width: none; }
.dash-hero > * { max-width: 512px; margin-left: auto; margin-right: auto; }
.dash-hero-glow { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 16rem; height: 16rem; border-radius: 50%; background: rgba(167, 139, 250, .2); filter: blur(80px); pointer-events: none; }
.dash-greeting { position: relative; font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; margin: .75rem auto 0; max-width: 512px; padding-right: 15%; }
.dash-greeting-sub { position: relative; font-size: .75rem; color: rgba(233, 213, 255, .8); margin: .25rem auto 0; }

.dash-card-wrap { position: relative; z-index: 20; margin-top: -3rem; }
.dash-biz-card { position: relative; overflow: hidden; height: 12rem; padding: 1.25rem; border-radius: 2rem; color: #fff; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(135deg, #3b0764, #581c87, #7e22ce); border: 1px solid rgba(255,255,255,.2); box-shadow: 0 25px 50px -12px rgba(0,0,0,.4); }
.biz-blob { position: absolute; border-radius: 50%; pointer-events: none; }
.biz-blob-1 { top: -2.5rem; right: -2.5rem; width: 11rem; height: 11rem; background: rgba(192, 132, 252, .25); filter: blur(50px); }
.biz-blob-2 { bottom: -2.5rem; left: -2.5rem; width: 10rem; height: 10rem; background: rgba(99, 102, 241, .2); filter: blur(45px); }
.biz-waves { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .2; mix-blend-mode: overlay; pointer-events: none; }
.biz-avatar { width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(192, 132, 252, .3); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.25rem; overflow: hidden; flex-shrink: 0; }
.biz-avatar img { width: 100%; height: 100%; object-fit: cover; }
.biz-name { font-size: 1rem; font-weight: 700; margin: 0; max-width: 200px; }
.biz-job { font-size: .75rem; color: #e9d5ff; font-weight: 500; margin: 0; }
.biz-company { font-size: .75rem; color: rgba(216, 180, 254, .8); margin: 0; }
.biz-tap { font-size: .75rem; font-weight: 500; color: rgba(255,255,255,.9); }
.biz-qr { width: 72px; height: 72px; display: block; flex-shrink: 0; transition: transform .15s; }
.biz-qr:hover { transform: scale(1.05); }
.biz-qr > div, .share-qr > div { width: 100%; height: 100%; }

.dash-main { background: var(--tc-slate-50); margin-top: -2.5rem; padding: 3.5rem 1.5rem 7rem; min-height: 100vh; display: flex; flex-direction: column; gap: 1.5rem; }
.dash-scroll > .dash-main { max-width: none; }
.dash-main > * { width: 100%; max-width: 512px; margin-left: auto; margin-right: auto; }
.dash-panel { background: #fff; border: 1px solid rgba(241, 245, 249, .9); border-radius: 1.5rem; padding: 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.stat-icon { width: 36px; height: 36px; border-radius: 1rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.stat-big { font-size: 1.5rem; font-weight: 800; color: var(--tc-slate-800); line-height: 1.3; }
.mini-chart { display: flex; align-items: flex-end; gap: .6rem; padding-top: .5rem; }
.mini-bar-col { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.mini-bar { width: 8px; background: var(--tc-violet); border-radius: 999px; transition: height .3s; }
.mini-bar-col span { font-size: 10px; color: var(--tc-slate-400); font-weight: 600; }
.btn-soft-violet { padding: .6rem .75rem; border: 1px solid #e9d5ff; color: var(--tc-violet); background: rgba(250, 245, 255, .4); border-radius: .75rem; font-weight: 700; font-size: .75rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; transition: background .15s, transform .1s; }
.btn-soft-violet:hover { background: #faf5ff; }
.btn-soft-violet:active { transform: scale(.95); }
.section-title { font-size: .875rem; font-weight: 700; color: var(--tc-slate-800); margin: 0; }

.quick-actions { display: flex; gap: .875rem; overflow-x: auto; padding: .25rem 0 .5rem; scrollbar-width: none; scroll-snap-type: x mandatory; }
.quick-actions::-webkit-scrollbar { display: none; }
.quick-action { min-width: 105px; height: 105px; flex-shrink: 0; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; text-align: center; padding: .75rem; background: #fff; border: 1px solid rgba(241, 245, 249, .9); border-radius: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: box-shadow .15s, transform .1s; }
.quick-action:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,.1); }
.quick-action:active { transform: scale(.95); }
.qa-icon { padding: .6rem; border-radius: 1rem; margin-bottom: .35rem; font-size: 1.2rem; line-height: 1; }
.qa-label { font-size: .75rem; font-weight: 700; color: var(--tc-slate-800); white-space: nowrap; }
.qa-desc { font-size: 9px; color: var(--tc-slate-400); font-weight: 500; margin-top: 2px; }

.overview-card { padding: 1rem; border-radius: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); border: 1px solid; height: 100%; }
.ov-purple { background: #f5f3ff; border-color: rgba(237, 233, 254, .6); }
.ov-green { background: #f0fdf4; border-color: rgba(220, 252, 231, .6); }
.ov-orange { background: #fff7ed; border-color: rgba(255, 237, 213, .6); }
.ov-blue { background: #eff6ff; border-color: rgba(219, 234, 254, .6); }
.ov-icon { width: 32px; height: 32px; border-radius: .75rem; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; }
.ov-purple .ov-icon { background: #f3e8ff; color: var(--tc-violet); }
.ov-green .ov-icon { background: #dcfce7; color: #16a34a; }
.ov-orange .ov-icon { background: #ffedd5; color: #ea580c; }
.ov-blue .ov-icon { background: #dbeafe; color: #2563eb; }
.ov-value { font-size: 1.25rem; font-weight: 900; color: var(--tc-slate-800); margin: .75rem 0 0; }
.ov-label { font-size: .75rem; font-weight: 600; color: var(--tc-slate-500); margin: .1rem 0 0; }
.trend-badge { font-size: 10px; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; }
.trend-badge.up { color: #16a34a; background: rgba(220, 252, 231, .8); }
.trend-badge.down { color: #dc2626; background: rgba(254, 226, 226, .8); }

.activity-list { background: #fff; border: 1px solid var(--tc-slate-100); border-radius: 1.5rem; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.activity-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .875rem; transition: background .15s; }
.activity-row + .activity-row { border-top: 1px solid var(--tc-slate-100); }
.activity-row:hover { background: var(--tc-slate-50); }
.activity-icon { padding: .5rem; border-radius: .75rem; display: inline-flex; font-size: 1rem; line-height: 1; }
.act-purple { background: #faf5ff; color: var(--tc-violet); }
.act-green { background: #f0fdf4; color: #16a34a; }
.act-orange { background: #fff7ed; color: #ea580c; }
.act-blue { background: #eff6ff; color: #2563eb; }

.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; max-width: 24rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: .75rem 1.5rem; background: #fff; border-top: 1px solid var(--tc-slate-100); border-radius: 1.75rem 1.75rem 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.1); }
.nav-item { display: flex; flex-direction: column; align-items: center; gap: .25rem; border: 0; background: transparent; color: var(--tc-slate-400); text-decoration: none; font-size: 1.2rem; line-height: 1; transition: color .15s; }
.nav-item span { font-size: 9px; font-weight: 700; letter-spacing: .02em; }
.nav-item:hover { color: var(--tc-slate-600); }
.nav-item.active { color: var(--tc-violet); }
.nav-fab-wrap { margin-top: -2rem; }
.nav-fab { width: 56px; height: 56px; border-radius: 50%; border: 0; color: #fff; font-size: 1.6rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(45deg, var(--tc-violet), var(--tc-violet-700)); box-shadow: 0 10px 15px -3px rgba(168, 85, 247, .3); transition: transform .15s; }
.nav-fab:hover { transform: scale(1.05); }
.dash-toast-wrap { z-index: 1090; margin-bottom: 5rem; }

/* ==========================================================================
   Modals
   ========================================================================== */
.modal-backdrop.show { opacity: .7; }
.tc-dialog { max-width: 28rem; }
.tc-dialog-lg { max-width: 27.5rem; }
.modal-sm-plus { max-width: 24rem; }
.verify-dialog { max-width: 21.25rem; }
.tc-modal { border: 1px solid #ede9fe; border-radius: 2rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,.35); overflow: hidden; user-select: text; }
.tc-modal .modal-header { justify-content: space-between; gap: .75rem; padding: 1.25rem 1.25rem .75rem; border-bottom-color: var(--tc-slate-100); }
.tc-modal .modal-body { padding: 1rem 1.25rem 1.25rem; }
.tc-modal .modal-footer { padding: .75rem 1.25rem 1.25rem; border-top-color: var(--tc-slate-100); }
.tc-round-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--tc-slate-100); color: var(--tc-slate-600); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s, transform .1s; }
.tc-round-btn.sm { width: 32px; height: 32px; }
.tc-round-btn:hover { background: var(--tc-slate-200); }
.tc-round-btn:active { transform: scale(.95); }
.tc-icon-circle { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; }
.tc-icon-circle.sq { border-radius: 1rem; }
.tc-icon-circle.lg { width: 48px; height: 48px; font-size: 1.4rem; }
.tc-icon-circle.xl { width: 56px; height: 56px; font-size: 1.5rem; }

/* Stepper */
.stepper { position: relative; display: flex; justify-content: space-between; padding: 0 .25rem; }
.stepper-line { position: absolute; top: 14px; left: 1.5rem; right: 1.5rem; height: 1.5px; background: var(--tc-slate-200); z-index: 0; }
.step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; border: 0; background: transparent; padding: 0; }
.step-dot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; background: #fff; border: 2px solid var(--tc-slate-200); color: var(--tc-slate-400); }
.step-check { display: none; }
.step.reached .step-dot { background: var(--tc-violet); border-color: var(--tc-violet); color: #fff; }
.step.current .step-dot { box-shadow: 0 4px 6px -1px rgba(168, 85, 247, .3); }
.step.done .step-num { display: none; }
.step.done .step-check { display: inline; }
.step-label { font-size: 10px; font-weight: 600; margin-top: .25rem; color: var(--tc-slate-400); }
.step.reached .step-label { color: var(--tc-violet); }

/* Form controls */
.tc-label { display: block; font-size: .75rem; font-weight: 600; color: var(--tc-slate-700); margin-bottom: .25rem; }
.tc-label-sm { display: block; font-size: .66rem; font-weight: 500; color: var(--tc-slate-400); margin-bottom: .25rem; }
.tc-label-xs { display: block; font-size: .66rem; font-weight: 700; color: var(--tc-slate-700); margin-bottom: .25rem; }
.tc-label-caps { display: block; font-size: .7rem; font-weight: 700; color: var(--tc-slate-600); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .25rem; }
.tiny-title { font-size: .75rem; font-weight: 700; color: var(--tc-slate-800); margin: 0; }
.tc-input { width: 100%; padding: .6rem .75rem; font-size: .75rem; font-weight: 500; color: var(--tc-slate-800); background: #fff; border: 1px solid var(--tc-slate-200); border-radius: .75rem; outline: none; transition: border-color .15s, box-shadow .15s; resize: none; }
.tc-input:focus { border-color: var(--tc-violet); box-shadow: 0 0 0 .2rem #f3e8ff; }
.tc-input.soft { background: var(--tc-slate-50); font-weight: 600; font-size: .8rem; }
.tc-input.amber { border-color: #fde68a; }
.tc-input.amber:focus { border-color: #f59e0b; box-shadow: 0 0 0 .2rem #fef3c7; }
.tc-input-icon { position: relative; display: flex; align-items: center; }
.tc-input-icon > .bi:first-child { position: absolute; left: .9rem; color: var(--tc-slate-400); font-size: .9rem; pointer-events: none; z-index: 1; }
.tc-input-icon.align-items-start > .bi:first-child { top: .15rem; }
.tc-input-icon.violet > .bi:first-child { color: #9333ea; }
.tc-input-icon.amber > .bi:first-child { color: #d97706; }
.tc-input-icon > .tc-input { padding-left: 2.5rem; }
.tc-input-icon.sm > .bi:first-child { left: .65rem; font-size: .8rem; }
.tc-input-icon.sm > .tc-input { padding-left: 2rem; border-radius: .5rem; padding-top: .5rem; padding-bottom: .5rem; }
.char-count { position: absolute; bottom: .6rem; right: .75rem; font-size: 10px; color: var(--tc-slate-400); font-weight: 500; }
.input-end-icon { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); pointer-events: none; }
.tc-switch { width: 2.75rem !important; height: 1.5rem; cursor: pointer; }
.tc-switch:checked { background-color: var(--tc-violet); border-color: var(--tc-violet); }
.tc-switch:focus { box-shadow: 0 0 0 .2rem #ede9fe; border-color: #c4b5fd; }

/* Panels */
.soft-panel { background: var(--tc-slate-50); border: 1px solid rgba(237, 233, 254, .8); border-radius: 1rem; padding: .875rem; }
.violet-panel { background: rgba(245, 243, 255, .6); border: 1px solid #ede9fe; border-radius: 1rem; padding: .875rem; }
.amber-panel { background: rgba(255, 251, 235, .7); border: 1px solid rgba(253, 230, 138, .8); border-radius: 1rem; padding: .875rem; }
.amber-pill { font-size: 9px; font-weight: 800; background: rgba(253, 230, 138, .8); color: #78350f; padding: .1rem .5rem; border-radius: 999px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .875rem; background: var(--tc-slate-50); border: 1px solid var(--tc-slate-100); border-radius: 1rem; }
button.toggle-row:hover { background: var(--tc-slate-100); }
button.toggle-row:not(.collapsed) .collapse-chevron { transform: rotate(90deg); }
.collapse-chevron { transition: transform .2s; }
.info-banner { display: flex; align-items: center; gap: .6rem; padding: .75rem; background: rgba(245, 243, 255, .8); border-radius: .75rem; }

/* Upload boxes */
.upload-box { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem; border: 2px dashed #e9d5ff; background: rgba(250, 245, 255, .4); border-radius: 1rem; }
.upload-preview { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; border: 2px solid #d8b4fe; background: #fff; flex-shrink: 0; }
.upload-preview img { width: 100%; height: 100%; object-fit: cover; }
.upload-placeholder { width: 42px; height: 42px; border-radius: 1rem; background: #f3e8ff; color: var(--tc-violet); display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.upload-empty { width: 100%; display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 1.25rem; border: 2px dashed #e9d5ff; background: rgba(250, 245, 255, .3); border-radius: 1rem; }
.upload-empty:hover { background: rgba(250, 245, 255, .8); }
.btn-upload { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .85rem; border: 1px solid #e9d5ff; background: #fff; color: var(--tc-violet); font-weight: 700; font-size: .75rem; border-radius: .75rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); white-space: nowrap; }
.btn-upload:hover { background: #faf5ff; }
.btn-trash { width: 34px; height: 34px; border: 1px solid #e9d5ff; background: #fff; color: var(--tc-slate-400); border-radius: .75rem; display: inline-flex; align-items: center; justify-content: center; }
.btn-trash:hover { background: #fef2f2; color: #ef4444; }

/* Location picker */
.seg-toggle { display: inline-flex; background: rgba(226, 232, 240, .8); padding: 2px; border-radius: .75rem; }
.seg-toggle button { border: 0; background: transparent; font-size: 10px; font-weight: 600; color: var(--tc-slate-500); padding: .25rem .6rem; border-radius: .5rem; }
.seg-toggle button.active { background: #fff; color: var(--tc-violet); font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.loc-mode-search .loc-paste-pane, .loc-mode-paste .loc-search-pane { display: none; }
.loc-mode-search .loc-link-input { display: none !important; }
.loc-picker { position: relative; }
.loc-spinner { position: absolute; right: .8rem; color: #9333ea; animation: tc-spin 1s linear infinite; }
.loc-clear { position: absolute; right: .5rem; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--tc-slate-100); color: var(--tc-slate-400); display: inline-flex; align-items: center; justify-content: center; }
.loc-dropdown { position: absolute; top: calc(100% + .35rem); left: 0; right: 0; z-index: 60; max-height: 16rem; overflow-y: auto; background: #fff; border: 1px solid rgba(233, 213, 255, .8); border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); }
.loc-option { width: 100%; display: flex; align-items: flex-start; gap: .6rem; padding: .65rem .875rem; border: 0; background: #fff; text-align: left; }
.loc-option + .loc-option { border-top: 1px solid var(--tc-slate-100); }
.loc-option:hover { background: rgba(250, 245, 255, .8); }
.loc-option-google { background: rgba(250, 245, 255, .6); }
.loc-option-icon { width: 28px; height: 28px; border-radius: .75rem; background: var(--tc-violet); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .8rem; }
.loc-option-title { display: block; font-size: .75rem; font-weight: 700; color: var(--tc-slate-800); line-height: 1.35; }
.loc-option-google .loc-option-title { color: var(--tc-violet); font-weight: 800; }
.loc-option-sub { display: block; font-size: 10px; color: var(--tc-slate-500); font-weight: 500; margin-top: 2px; }
.gmaps-pill { background: rgba(233, 213, 255, .8); color: #6b21a8; font-size: 9px; font-weight: 900; padding: .05rem .35rem; border-radius: 999px; white-space: nowrap; }
.loc-selected { display: flex; align-items: center; justify-content: space-between; margin-top: .5rem; padding: .5rem .75rem; background: #fff; border: 1px solid rgba(226, 232, 240, .8); border-radius: .75rem; font-size: 11px; color: var(--tc-slate-600); font-weight: 500; }
.btn-chip { border: 0; background: #faf5ff; color: #9333ea; font-size: 10px; font-weight: 700; padding: .25rem .5rem; border-radius: .5rem; }
.btn-chip:hover { color: #7e22ce; }
.extra-loc { position: relative; background: var(--tc-slate-50); border: 1px solid var(--tc-slate-100); border-radius: .75rem; padding: .6rem; }
.extra-loc-remove { position: absolute; top: -.5rem; right: -.5rem; z-index: 2; width: 24px; height: 24px; border-radius: 50%; border: 0; background: #fee2e2; color: #dc2626; display: flex; align-items: center; justify-content: center; font-size: .8rem; box-shadow: 0 1px 2px rgba(0,0,0,.1); }

/* Social rows */
.social-badge { width: 40px; height: 40px; border-radius: 1rem; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; flex-shrink: 0; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.bg-insta { background: linear-gradient(45deg, #f59e0b, #f43f5e, #9333ea); }
.bg-emerald { background: #10b981; }
.bg-fb { background: #2563eb; }
.bg-linkedin { background: #0369a1; }
.bg-red { background: #dc2626; }
.bg-slate-900 { background: #0f172a; }
.bg-slate-800 { background: #1e293b; }
.bg-sky { background: #0ea5e9; }
.social-name { width: 5rem; flex-shrink: 0; font-size: .75rem; font-weight: 700; color: var(--tc-slate-800); }
.btn-icon-muted { border: 0; background: transparent; color: var(--tc-slate-400); padding: .25rem; flex-shrink: 0; }
.btn-icon-muted:hover { color: #ef4444; }
.btn-add-more { align-self: flex-start; margin-left: 88px; border: 0; background: transparent; font-size: 10px; font-weight: 700; padding: 0; display: inline-flex; align-items: center; gap: .2rem; }
.btn-add-more:hover { text-decoration: underline; }
.dashed-btn { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .75rem; border: 2px dashed #e9d5ff; background: rgba(250, 245, 255, .4); color: var(--tc-violet); font-weight: 700; font-size: .75rem; border-radius: 1rem; }
.dashed-btn:hover { background: #faf5ff; }
.picker-panel { background: #fff; border: 1px solid #e9d5ff; border-radius: 1rem; padding: .875rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,.08); }
.platform-option { width: 100%; text-align: left; padding: .5rem; border-radius: .75rem; font-size: .75rem; font-weight: 600; display: flex; align-items: center; gap: .4rem; border: 1px solid var(--tc-slate-100); background: var(--tc-slate-50); color: var(--tc-slate-700); }
.platform-option:hover { background: rgba(250, 245, 255, .5); }
.platform-option.active { background: #faf5ff; border-color: #e9d5ff; color: var(--tc-violet); }

/* Theme picker */
.theme-filter { display: inline-flex; gap: .25rem; background: var(--tc-slate-100); padding: .25rem; border-radius: .75rem; flex-shrink: 0; }
.theme-filter button { border: 0; background: transparent; padding: .25rem .6rem; border-radius: .5rem; font-size: 10px; font-weight: 700; color: var(--tc-slate-600); }
.theme-filter button.active[data-theme-filter="all"] { background: var(--tc-violet); color: #fff; }
.theme-filter button.active[data-theme-filter="free"] { background: #059669; color: #fff; }
.theme-filter button.active[data-theme-filter="paid"] { background: #f59e0b; color: #fff; }
.theme-tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 210px; padding: .5rem; border: 2px solid var(--tc-slate-200); border-radius: 1rem; background: #fff; cursor: pointer; overflow: hidden; transition: border-color .15s, transform .15s, box-shadow .15s; }
.theme-tile:hover { border-color: #d8b4fe; }
.theme-tile.is-pro { border-color: rgba(251, 191, 36, .6); background: rgba(255, 251, 235, .1); }
.theme-tile:has(input:checked) { border-color: var(--tc-violet); box-shadow: 0 0 0 .2rem #f3e8ff, 0 4px 6px -1px rgba(0,0,0,.1); background: rgba(250, 245, 255, .2); transform: scale(1.02); }
.theme-badge { position: absolute; top: .5rem; right: .5rem; z-index: 2; font-size: 8px; font-weight: 900; padding: .1rem .5rem; border-radius: 999px; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.theme-badge.free { background: #10b981; }
.theme-badge.pro { background: #f59e0b; }
.theme-preview { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: .6rem; border-radius: .75rem; color: #fff; overflow: hidden; }
.theme-logo { position: absolute; top: .35rem; left: .35rem; width: 16px; height: 16px; border-radius: .35rem; background: rgba(255,255,255,.2); font-size: 9px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.theme-avatar { position: relative; width: 32px; height: 32px; margin: .5rem 0 .25rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); background: #e9d5ff; color: #7e22ce; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.theme-avatar i { position: absolute; bottom: 0; right: 0; width: 6px; height: 6px; border-radius: 50%; background: #34d399; border: 1px solid #fff; }
.theme-name { font-size: 9px; font-weight: 800; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme-job { font-size: 7px; font-weight: 600; opacity: .8; margin-top: 2px; }
.theme-dots { display: flex; gap: .25rem; margin: .4rem 0; }
.theme-dots i { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.2); }
.theme-bio { font-size: 6px; opacity: .75; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.theme-foot { display: flex; align-items: center; justify-content: space-between; padding: .35rem .25rem .1rem; }
.theme-title { font-size: 10px; font-weight: 700; color: var(--tc-slate-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme-tile:has(input:checked) .theme-title { color: var(--tc-violet); }
.theme-radio { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--tc-slate-300); background: #fff; flex-shrink: 0; position: relative; }
.theme-tile:has(input:checked) .theme-radio { border-color: var(--tc-violet); background: var(--tc-violet); }
.theme-tile:has(input:checked) .theme-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #fff; }
.theme-tile:has(input:focus-visible) { outline: 2px solid var(--tc-violet); outline-offset: 2px; }

/* Share sheet */
.copy-field { display: flex; align-items: center; gap: .5rem; padding: .35rem; background: var(--tc-slate-50); border: 1px solid var(--tc-slate-200); border-radius: 1rem; cursor: pointer; }
.copy-field:hover { border-color: #d8b4fe; }
.copy-field input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: .75rem; font-weight: 600; color: var(--tc-slate-800); cursor: pointer; }
.copy-btn { min-width: 88px; height: 36px; border: 0; border-radius: .75rem; background: var(--tc-violet); color: #fff; font-size: .75rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; }
.copy-btn:hover { background: var(--tc-violet-600); }
.copy-btn.copied { background: #16a34a; }
.share-tile { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .75rem; border-radius: 1rem; text-decoration: none; border: 1px solid; font-size: .75rem; font-weight: 700; color: var(--tc-slate-800); transition: transform .1s, background .15s; }
.share-tile:hover { color: var(--tc-slate-800); }
.share-tile:active { transform: scale(.95); }
.share-circle { width: 40px; height: 40px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,.15); }
.share-wa { background: rgba(37, 211, 102, .1); border-color: rgba(37, 211, 102, .3); }
.share-wa .share-circle { background: #25d366; }
.share-tg { background: rgba(34, 158, 217, .1); border-color: rgba(34, 158, 217, .3); }
.share-tg .share-circle { background: #229ed9; }
.share-li { background: rgba(10, 102, 194, .1); border-color: rgba(10, 102, 194, .3); }
.share-li .share-circle { background: #0a66c2; }
.share-x { background: var(--tc-slate-100); border-color: var(--tc-slate-300); }
.share-x .share-circle { background: #0f172a; }
.share-mail { background: #faf5ff; border-color: #e9d5ff; }
.share-mail .share-circle { background: var(--tc-violet); }
.share-more { background: #ecfdf5; border-color: #a7f3d0; }
.share-more .share-circle { background: #059669; }
.share-qr { width: 48px; height: 48px; padding: .25rem; background: #fff; border: 1px solid var(--tc-slate-200); border-radius: .75rem; flex-shrink: 0; }

/* Verification modal */
.verify-desc { max-width: 260px; line-height: 1.4; }
.verify-circle { position: relative; width: 56px; height: 56px; border-radius: 50%; background: #f5f3ff; border: 1px solid #ede9fe; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 2px 4px rgba(0,0,0,.05); }
.verify-inner { padding: .5rem; border-radius: .75rem; background: #8b5cf6; color: #fff; display: flex; font-size: 1rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,.15); }
.verify-check { display: none; position: absolute; bottom: 0; right: 0; width: 16px; height: 16px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; color: #fff; font-size: 9px; align-items: center; justify-content: center; }
.verify-circle.verified { background: #f0fdf4; border-color: #bbf7d0; }
.verify-circle.verified .verify-inner { background: #22c55e; }
.verify-circle.verified .verify-check { display: flex; }
.verify-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem; border: 1px solid var(--tc-slate-100); background: rgba(248, 250, 252, .5); border-radius: .75rem; }
.verify-row-icon { width: 32px; height: 32px; border-radius: 50%; background: #f5f3ff; color: #7c3aed; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; flex-shrink: 0; }
.verify-row-icon.sq { width: 28px; height: 28px; border-radius: .5rem; }
.verify-edit-input { font-size: 11px; border-color: #ddd6fe; }
.pill-btn { border: 0; background: #ede9fe; color: #7c3aed; font-size: 9px; font-weight: 700; padding: .15rem .5rem; border-radius: 999px; display: inline-flex; align-items: center; gap: .2rem; white-space: nowrap; flex-shrink: 0; }
.pill-btn:hover { background: #ddd6fe; }
.otp-box { border: 1px solid #ede9fe; background: #fff; padding: .6rem; border-radius: .75rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.otp-inputs { display: flex; justify-content: space-between; gap: .3rem; }
.otp-inputs input { width: 2.1rem; height: 2.4rem; text-align: center; font-size: .9rem; font-weight: 700; color: var(--tc-slate-800); border: 1px solid #ddd6fe; border-radius: .5rem; outline: none; }
.otp-inputs input:focus { border-color: var(--tc-violet); box-shadow: 0 0 0 .2rem #f3e8ff; }
.support-banner { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem; border: 1px solid #ede9fe; background: rgba(248, 250, 252, .7); border-radius: .75rem; }
.support-icon { width: 28px; height: 28px; border-radius: 50%; background: #22c55e; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; flex-shrink: 0; }
.support-btn { padding: .2rem .6rem; border-radius: 999px; border: 1px solid var(--tc-violet); color: var(--tc-violet); font-size: 9px; font-weight: 700; background: #fff; text-decoration: none; white-space: nowrap; }
.support-btn:hover { background: #f5f3ff; color: var(--tc-violet); }
.success-circle { width: 56px; height: 56px; border-radius: 50%; background: #22c55e; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; box-shadow: 0 10px 15px -3px rgba(34, 197, 94, .25); }
.verify-illustration { background: rgba(245, 243, 255, .7); border: 1px solid #ede9fe; border-radius: 1rem; padding: 1rem; display: flex; flex-direction: column; align-items: center; }
.verify-avatar { position: relative; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(45deg, var(--tc-violet), var(--tc-violet-700)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,.15); }
.verify-avatar span { position: absolute; bottom: -2px; right: -2px; width: 20px; height: 20px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-size: .65rem; }

@keyframes tc-spin { to { transform: rotate(360deg); } }