/* ==========================================================================
   Time For Golds - brand theme
   Palette taken from the printed Swarna Sanchay artwork: deep maroon, BIS
   gold and cream, lifted with restrained neon accents for the panels.
   ========================================================================== */

:root {
    /* core brand */
    --tfg-maroon: #4a0d1b;
    --tfg-maroon-deep: #2e0710;
    --tfg-maroon-soft: #5f1524;
    --tfg-gold: #d4af37;
    --tfg-gold-light: #f5d98a;
    --tfg-gold-dark: #a8842a;
    --tfg-cream: #fdf6e7;
    --tfg-cream-dim: #f4e9d2;

    /* neon accents */
    --tfg-neon-gold: #ffd86b;
    --tfg-neon-rose: #ff3d8b;
    --tfg-neon-cyan: #3df0ff;
    --tfg-neon-green: #3dffa8;
    --tfg-neon-amber: #ffb01f;

    /* surfaces */
    --tfg-bg: #fdf9f1;
    --tfg-surface: #ffffff;
    --tfg-surface-2: #fffaf0;
    --tfg-ink: #2b1a12;
    --tfg-ink-soft: #6b5a50;
    --tfg-line: #e8dcc4;

    /* dark panel surfaces */
    --tfg-panel: #2a0a13;
    --tfg-panel-2: #3a0f1d;
    --tfg-panel-line: rgba(212, 175, 55, 0.22);

    --tfg-gradient-gold: linear-gradient(135deg, #a8842a 0%, #d4af37 35%, #f5d98a 55%, #d4af37 75%, #a8842a 100%);
    --tfg-gradient-maroon: linear-gradient(160deg, #5f1524 0%, #4a0d1b 45%, #2e0710 100%);
    --tfg-gradient-neon: linear-gradient(120deg, #ff3d8b 0%, #ffd86b 50%, #3df0ff 100%);

    --tfg-radius: 16px;
    --tfg-radius-sm: 10px;
    --tfg-shadow: 0 10px 30px rgba(74, 13, 27, 0.12);
    --tfg-shadow-lg: 0 24px 60px rgba(46, 7, 16, 0.28);

    --bs-body-font-family: "Segoe UI", "Noto Sans Devanagari", system-ui, -apple-system, sans-serif;
}

html[lang="hi"] body {
    font-family: "Noto Sans Devanagari", "Nirmala UI", "Segoe UI", system-ui, sans-serif;
}

body {
    background: var(--tfg-bg);
    color: var(--tfg-ink);
    font-family: var(--bs-body-font-family);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--tfg-maroon); text-decoration: none; }
a:hover { color: var(--tfg-gold-dark); }

.serif-display {
    font-family: "Georgia", "Times New Roman", serif;
    letter-spacing: 0.04em;
}

/* ------------------------------------------------------------ text utils */

.text-gold { color: var(--tfg-gold) !important; }
.text-maroon { color: var(--tfg-maroon) !important; }
.text-cream { color: var(--tfg-cream) !important; }
.text-muted-soft { color: var(--tfg-ink-soft) !important; }

.text-gradient-gold {
    background: var(--tfg-gradient-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.text-gradient-neon {
    background: var(--tfg-gradient-neon);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.bg-maroon { background: var(--tfg-gradient-maroon) !important; }
.bg-gold { background: var(--tfg-gradient-gold) !important; }
.bg-cream { background: var(--tfg-cream) !important; }

/* ------------------------------------------------------------- top brand */

.brand-strip {
    background: var(--tfg-gradient-maroon);
    color: var(--tfg-cream);
    border-bottom: 2px solid var(--tfg-gold);
}

.brand-wordmark {
    font-family: "Georgia", serif;
    font-size: 1.55rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: var(--tfg-gradient-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1.1;
}

.brand-sub {
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--tfg-cream-dim);
}

.brand-mark {
    width: 46px; height: 46px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--tfg-gradient-gold);
    color: var(--tfg-maroon-deep);
    font-family: Georgia, serif;
    font-weight: 700;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2), 0 0 18px rgba(255, 216, 107, 0.45);
    flex: 0 0 auto;
}

/* ------------------------------------------------------------- navigation */

.tfg-navbar {
    background: rgba(46, 7, 16, 0.96);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--tfg-panel-line);
}

.tfg-navbar .nav-link {
    color: var(--tfg-cream-dim);
    font-weight: 500;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    transition: color 0.2s, background 0.2s;
}

.tfg-navbar .nav-link:hover,
.tfg-navbar .nav-link.active {
    color: var(--tfg-neon-gold);
    background: rgba(212, 175, 55, 0.1);
}

.navbar-toggler {
    border-color: var(--tfg-panel-line);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23f5d98a' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* language pills */

.lang-switch {
    display: inline-flex;
    border: 1px solid var(--tfg-panel-line);
    border-radius: 999px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
}

.lang-switch a {
    padding: 0.28rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--tfg-cream-dim);
    line-height: 1.4;
}

.lang-switch a.active {
    background: var(--tfg-gradient-gold);
    color: var(--tfg-maroon-deep);
}

.lang-switch.on-light {
    border-color: var(--tfg-line);
    background: #fff;
}

.lang-switch.on-light a { color: var(--tfg-ink-soft); }
.lang-switch.on-light a.active { color: var(--tfg-maroon-deep); }

/* ------------------------------------------------------------- ticker */

.tfg-ticker {
    background: var(--tfg-maroon-deep);
    color: var(--tfg-gold-light);
    font-size: 0.85rem;
    padding: 0.4rem 0;
    overflow: hidden;
    white-space: nowrap;
    border-bottom: 1px solid var(--tfg-panel-line);
}

.tfg-ticker__track {
    display: inline-block;
    padding-left: 100%;
    animation: tfg-marquee 28s linear infinite;
}

.tfg-ticker__track span { margin-right: 3.5rem; }

@keyframes tfg-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
    .tfg-ticker__track { animation: none; padding-left: 0; }
}

/* ------------------------------------------------------------- hero slider */

.tfg-hero { position: relative; background: var(--tfg-maroon-deep); }

.tfg-hero .carousel-item {
    height: clamp(360px, 62vh, 620px);
}

.tfg-hero .carousel-item img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.tfg-hero__overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center;
}

.overlay-maroon { background: linear-gradient(90deg, rgba(46, 7, 16, 0.92) 0%, rgba(74, 13, 27, 0.7) 45%, rgba(74, 13, 27, 0.15) 100%); }
.overlay-gold   { background: linear-gradient(90deg, rgba(74, 13, 27, 0.88) 0%, rgba(168, 132, 42, 0.45) 100%); }
.overlay-neon   { background: linear-gradient(100deg, rgba(46, 7, 16, 0.9) 0%, rgba(255, 61, 139, 0.28) 55%, rgba(61, 240, 255, 0.22) 100%); }
.overlay-dark   { background: linear-gradient(90deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.3) 100%); }
.overlay-none   { background: transparent; }

.tfg-hero__title {
    font-family: Georgia, serif;
    font-size: clamp(1.8rem, 4.2vw, 3.4rem);
    line-height: 1.15;
    color: var(--tfg-cream);
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.tfg-hero__subtitle {
    color: var(--tfg-gold-light);
    font-size: clamp(0.98rem, 1.6vw, 1.3rem);
    max-width: 44ch;
}

.tfg-hero .carousel-indicators [data-bs-target] {
    width: 34px; height: 4px; border-radius: 4px;
    background: rgba(253, 246, 231, 0.45);
    border: 0;
}

.tfg-hero .carousel-indicators .active {
    background: var(--tfg-gradient-gold);
    box-shadow: 0 0 12px var(--tfg-neon-gold);
}

/* ------------------------------------------------------------- buttons */

.btn-gold {
    background: var(--tfg-gradient-gold);
    border: 0;
    color: var(--tfg-maroon-deep);
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.62rem 1.5rem;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(168, 132, 42, 0.35);
    transition: transform 0.18s, box-shadow 0.18s, filter 0.18s;
}

.btn-gold:hover, .btn-gold:focus {
    color: var(--tfg-maroon-deep);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(255, 216, 107, 0.5), 0 0 0 1px rgba(255, 216, 107, 0.4);
    filter: saturate(1.1);
}

.btn-maroon {
    background: var(--tfg-gradient-maroon);
    border: 1px solid var(--tfg-panel-line);
    color: var(--tfg-cream);
    font-weight: 600;
    border-radius: 999px;
    padding: 0.62rem 1.5rem;
}

.btn-maroon:hover { color: var(--tfg-neon-gold); border-color: var(--tfg-gold); }

.btn-outline-gold {
    border: 1.5px solid var(--tfg-gold);
    color: var(--tfg-gold-dark);
    background: transparent;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.55rem 1.35rem;
}

.btn-outline-gold:hover {
    background: var(--tfg-gradient-gold);
    color: var(--tfg-maroon-deep);
    border-color: transparent;
}

.btn-neon {
    position: relative;
    background: var(--tfg-panel);
    color: var(--tfg-neon-gold);
    border: 1px solid rgba(255, 216, 107, 0.5);
    border-radius: 999px;
    font-weight: 600;
    padding: 0.55rem 1.35rem;
    box-shadow: 0 0 14px rgba(255, 216, 107, 0.25), inset 0 0 14px rgba(255, 216, 107, 0.08);
}

.btn-neon:hover {
    color: #fff;
    box-shadow: 0 0 22px rgba(255, 61, 139, 0.45), 0 0 34px rgba(61, 240, 255, 0.25);
    border-color: var(--tfg-neon-rose);
}

/* ------------------------------------------------------------- cards */

.tfg-card {
    background: var(--tfg-surface);
    border: 1px solid var(--tfg-line);
    border-radius: var(--tfg-radius);
    box-shadow: var(--tfg-shadow);
}

.tfg-card__header {
    padding: 0.95rem 1.2rem;
    border-bottom: 1px solid var(--tfg-line);
    font-weight: 700;
    color: var(--tfg-maroon);
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    flex-wrap: wrap;
}

.tfg-card__body { padding: 1.2rem; }

/* gold-framed panel used for the scheme figures */
.tfg-frame {
    position: relative;
    background: var(--tfg-cream);
    border-radius: var(--tfg-radius);
    padding: 1.5rem;
    border: 1px solid rgba(212, 175, 55, 0.4);
}

.tfg-frame::before {
    content: "";
    position: absolute; inset: 6px;
    border: 1px solid rgba(212, 175, 55, 0.45);
    border-radius: calc(var(--tfg-radius) - 6px);
    pointer-events: none;
}

/* ribbon heading like the printed flyers */
.tfg-ribbon {
    display: inline-block;
    background: var(--tfg-gradient-gold);
    color: var(--tfg-maroon-deep);
    font-weight: 800;
    padding: 0.5rem 2.2rem;
    clip-path: polygon(6% 0, 94% 0, 100% 50%, 94% 100%, 6% 100%, 0 50%);
    letter-spacing: 0.02em;
}

.section-title {
    font-family: Georgia, serif;
    color: var(--tfg-maroon);
    font-size: clamp(1.4rem, 2.6vw, 2.1rem);
}

.section-rule {
    width: 88px; height: 3px;
    background: var(--tfg-gradient-gold);
    border-radius: 3px;
    margin: 0.6rem auto 0;
}

/* ------------------------------------------------------------- stat tiles */

.stat-tile {
    position: relative;
    background: var(--tfg-gradient-maroon);
    border: 1px solid var(--tfg-panel-line);
    border-radius: var(--tfg-radius);
    padding: 1.05rem 1.15rem;
    color: var(--tfg-cream);
    overflow: hidden;
    height: 100%;
}

.stat-tile::after {
    content: "";
    position: absolute;
    right: -30px; top: -30px;
    width: 110px; height: 110px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 216, 107, 0.28) 0%, transparent 70%);
}

.stat-tile__label {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tfg-gold-light);
    opacity: 0.9;
}

.stat-tile__value {
    font-size: clamp(1.3rem, 2.4vw, 1.8rem);
    font-weight: 700;
    line-height: 1.2;
    margin-top: 0.3rem;
}

.stat-tile__meta { font-size: 0.8rem; color: rgba(253, 246, 231, 0.7); }

.stat-tile--neon-rose { box-shadow: inset 0 0 0 1px rgba(255, 61, 139, 0.35), 0 0 22px rgba(255, 61, 139, 0.14); }
.stat-tile--neon-cyan { box-shadow: inset 0 0 0 1px rgba(61, 240, 255, 0.3), 0 0 22px rgba(61, 240, 255, 0.12); }
.stat-tile--neon-gold { box-shadow: inset 0 0 0 1px rgba(255, 216, 107, 0.4), 0 0 22px rgba(255, 216, 107, 0.16); }
.stat-tile--neon-green { box-shadow: inset 0 0 0 1px rgba(61, 255, 168, 0.3), 0 0 22px rgba(61, 255, 168, 0.12); }

/* ------------------------------------------------------------- badges */

.badge-neon-green, .badge-neon-amber, .badge-neon-red, .badge-neon-muted, .badge-neon-orange, .badge-neon-cyan {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.26rem 0.65rem;
    border-radius: 999px;
    text-transform: uppercase;
    border: 1px solid transparent;
    white-space: nowrap;
}

.badge-neon-green { background: rgba(61, 255, 168, 0.14); color: #0f7a4d; border-color: rgba(61, 255, 168, 0.5); }
.badge-neon-amber { background: rgba(255, 176, 31, 0.15); color: #8a5a00; border-color: rgba(255, 176, 31, 0.5); }
.badge-neon-orange { background: rgba(255, 136, 31, 0.15); color: #8a3d00; border-color: rgba(255, 136, 31, 0.5); }
.badge-neon-red { background: rgba(255, 61, 139, 0.14); color: #a4123f; border-color: rgba(255, 61, 139, 0.45); }
.badge-neon-cyan { background: rgba(61, 240, 255, 0.14); color: #0b6b78; border-color: rgba(61, 240, 255, 0.45); }
.badge-neon-muted { background: rgba(107, 90, 80, 0.12); color: #6b5a50; border-color: rgba(107, 90, 80, 0.3); }

.badge-level {
    background: var(--tfg-gradient-maroon);
    color: var(--tfg-gold-light);
    border: 1px solid var(--tfg-panel-line);
    border-radius: 8px;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    font-size: 0.75rem;
}

/* ------------------------------------------------------------- tables */

.tfg-table { width: 100%; border-collapse: separate; border-spacing: 0; }

.tfg-table thead th {
    background: var(--tfg-cream);
    color: var(--tfg-maroon);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
    padding: 0.7rem 0.85rem;
    border-bottom: 2px solid rgba(212, 175, 55, 0.35);
    white-space: nowrap;
}

.tfg-table tbody td {
    padding: 0.72rem 0.85rem;
    border-bottom: 1px solid var(--tfg-line);
    vertical-align: middle;
    font-size: 0.92rem;
}

.tfg-table tbody tr:hover { background: var(--tfg-surface-2); }

.table-wrap { overflow-x: auto; border-radius: var(--tfg-radius-sm); }

/* ------------------------------------------------------------- forms */

.form-label { font-weight: 600; font-size: 0.85rem; color: var(--tfg-maroon); margin-bottom: 0.3rem; }

.form-control, .form-select {
    border: 1px solid var(--tfg-line);
    border-radius: var(--tfg-radius-sm);
    padding: 0.6rem 0.85rem;
    background: #fff;
}

.form-control:focus, .form-select:focus {
    border-color: var(--tfg-gold);
    box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.18);
}

.form-hint { font-size: 0.78rem; color: var(--tfg-ink-soft); }

.form-check-input:checked { background-color: var(--tfg-gold); border-color: var(--tfg-gold-dark); }

.input-group-text { background: var(--tfg-cream); border-color: var(--tfg-line); color: var(--tfg-maroon); }

.lang-tab-strip {
    display: inline-flex; gap: 0.25rem;
    background: var(--tfg-cream); border-radius: 999px; padding: 0.2rem;
}

.lang-tab-strip .nav-link {
    border-radius: 999px; font-size: 0.8rem; font-weight: 600;
    color: var(--tfg-ink-soft); padding: 0.25rem 0.85rem;
}

.lang-tab-strip .nav-link.active { background: var(--tfg-gradient-gold); color: var(--tfg-maroon-deep); }

/* ------------------------------------------------------------- panels */

.panel-shell { display: flex; min-height: 100vh; background: var(--tfg-bg); }

.panel-sidebar {
    width: 268px;
    flex: 0 0 268px;
    background: var(--tfg-gradient-maroon);
    border-right: 1px solid var(--tfg-panel-line);
    color: var(--tfg-cream-dim);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
    overflow-y: auto;
}

.panel-sidebar__brand {
    padding: 1.05rem 1.1rem;
    border-bottom: 1px solid var(--tfg-panel-line);
    display: flex; align-items: center; gap: 0.7rem;
}

.panel-nav { padding: 0.75rem 0.6rem 2rem; }

.panel-nav__group {
    font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(245, 217, 138, 0.55);
    padding: 1rem 0.7rem 0.35rem;
}

.panel-nav a {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--tfg-radius-sm);
    color: var(--tfg-cream-dim);
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.15rem;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}

.panel-nav a:hover {
    background: rgba(212, 175, 55, 0.12);
    color: var(--tfg-neon-gold);
}

.panel-nav a.active {
    background: linear-gradient(90deg, rgba(255, 216, 107, 0.2), rgba(255, 61, 139, 0.08));
    color: #fff;
    box-shadow: inset 3px 0 0 var(--tfg-neon-gold);
}

.panel-nav .badge-count {
    margin-left: auto;
    background: var(--tfg-neon-rose);
    color: #fff;
    font-size: 0.68rem;
    border-radius: 999px;
    padding: 0.08rem 0.45rem;
    font-weight: 700;
}

.panel-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.panel-topbar {
    background: #fff;
    border-bottom: 1px solid var(--tfg-line);
    padding: 0.7rem 1.1rem;
    display: flex; align-items: center; gap: 0.9rem;
    position: sticky; top: 0; z-index: 20;
    flex-wrap: wrap;
}

.panel-content { padding: 1.25rem; flex: 1 1 auto; }

.panel-title { font-family: Georgia, serif; color: var(--tfg-maroon); font-size: 1.35rem; margin: 0; min-width: 0; }

@media (max-width: 991.98px) {
    .panel-sidebar {
        position: fixed; z-index: 1050; left: 0; top: 0;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        box-shadow: var(--tfg-shadow-lg);
    }
    .panel-sidebar.is-open { transform: translateX(0); }
    .panel-backdrop {
        position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45);
        z-index: 1040;
    }
}

/* ------------------------------------------------------------- passbook grid */

.month-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 0.75rem;
}

.month-cell {
    border: 1px solid var(--tfg-line);
    border-radius: var(--tfg-radius-sm);
    padding: 0.7rem;
    background: #fff;
    position: relative;
    transition: border-color 0.18s, box-shadow 0.18s;
}

.month-cell:hover { border-color: var(--tfg-gold); box-shadow: 0 4px 14px rgba(212, 175, 55, 0.18); }

.month-cell__no {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--tfg-ink-soft);
}

.month-cell__amount { font-weight: 700; color: var(--tfg-maroon); font-size: 1.02rem; }
.month-cell__due { font-size: 0.75rem; color: var(--tfg-ink-soft); }

.month-cell.is-paid { background: linear-gradient(160deg, #f2fff8, #fff); border-color: rgba(61, 255, 168, 0.5); }
.month-cell.is-late { background: linear-gradient(160deg, #fff8ec, #fff); border-color: rgba(255, 176, 31, 0.55); }
.month-cell.is-missed { background: linear-gradient(160deg, #fff2f6, #fff); border-color: rgba(255, 61, 139, 0.45); }
.month-cell.is-due { border-color: var(--tfg-gold); box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.18); }

.progress-gold { height: 10px; border-radius: 999px; background: var(--tfg-cream-dim); overflow: hidden; }
.progress-gold .bar { height: 100%; background: var(--tfg-gradient-gold); border-radius: 999px; }

/* ------------------------------------------------------------- genealogy tree */

.tree-scroll {
    overflow: auto;
    padding: 1.5rem 1rem 2.5rem;
    background:
        radial-gradient(circle at 20% 0%, rgba(212, 175, 55, 0.07), transparent 45%),
        var(--tfg-surface-2);
    border-radius: var(--tfg-radius);
    border: 1px solid var(--tfg-line);
}

.tree, .tree ul { list-style: none; margin: 0; padding: 0; }

.tree ul { padding-left: 1.6rem; position: relative; }

.tree ul::before {
    content: "";
    position: absolute;
    left: 0.55rem; top: 0; bottom: 1.15rem;
    border-left: 2px dashed rgba(212, 175, 55, 0.5);
}

.tree li { position: relative; padding: 0.3rem 0 0.3rem 0; }

.tree ul > li::before {
    content: "";
    position: absolute;
    left: -1.05rem; top: 1.5rem;
    width: 1rem;
    border-top: 2px dashed rgba(212, 175, 55, 0.5);
}

.tree-node {
    display: inline-flex; align-items: center; gap: 0.6rem;
    background: #fff;
    border: 1px solid var(--tfg-line);
    border-left: 4px solid var(--tfg-gold);
    border-radius: var(--tfg-radius-sm);
    padding: 0.5rem 0.8rem;
    box-shadow: 0 2px 8px rgba(74, 13, 27, 0.07);
    min-width: 230px;
}

.tree-node.is-root {
    background: var(--tfg-gradient-maroon);
    color: var(--tfg-cream);
    border-left-color: var(--tfg-neon-gold);
    box-shadow: 0 0 18px rgba(255, 216, 107, 0.3);
}

.tree-node.is-root .tree-node__code { color: var(--tfg-gold-light); }
.tree-node.is-root .tree-node__meta { color: rgba(253, 246, 231, 0.75); }

.tree-node.is-blocked { border-left-color: var(--tfg-neon-rose); opacity: 0.75; }

.tree-node__avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--tfg-gradient-gold);
    color: var(--tfg-maroon-deep);
    display: grid; place-items: center;
    font-weight: 700; font-size: 0.85rem;
    flex: 0 0 auto;
}

.tree-node__name { font-weight: 600; font-size: 0.9rem; line-height: 1.2; }
.tree-node__code { font-size: 0.75rem; color: var(--tfg-gold-dark); font-weight: 600; }
.tree-node__meta { font-size: 0.72rem; color: var(--tfg-ink-soft); }

.tree-toggle {
    border: 1px solid var(--tfg-line);
    background: var(--tfg-cream);
    color: var(--tfg-maroon);
    width: 22px; height: 22px;
    border-radius: 6px;
    font-size: 0.8rem; line-height: 1;
    display: grid; place-items: center;
    cursor: pointer;
    flex: 0 0 auto;
}

.level-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: var(--tfg-cream);
    border: 1px solid rgba(212, 175, 55, 0.45);
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--tfg-maroon);
}

.level-chip strong { color: var(--tfg-gold-dark); }
.level-chip.active { background: var(--tfg-gold-light); border-color: var(--tfg-gold-dark); }

/* level ladder on the public page */
.level-ladder { display: grid; gap: 0.6rem; }

.level-ladder__row {
    display: grid;
    grid-template-columns: 78px 1fr 92px;
    align-items: center;
    gap: 0.8rem;
    background: #fff;
    border: 1px solid var(--tfg-line);
    border-radius: var(--tfg-radius-sm);
    padding: 0.6rem 0.9rem;
}

.level-ladder__bar { height: 12px; border-radius: 999px; background: var(--tfg-cream-dim); overflow: hidden; }
.level-ladder__fill { height: 100%; background: var(--tfg-gradient-neon); border-radius: 999px; }

/* ------------------------------------------------------------- gallery */

.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 1rem; }

.media-card {
    position: relative;
    border-radius: var(--tfg-radius);
    overflow: hidden;
    border: 1px solid var(--tfg-line);
    background: #fff;
    box-shadow: var(--tfg-shadow);
    transition: transform 0.2s, box-shadow 0.2s;
}

.media-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(74, 13, 27, 0.18); }

.media-card__thumb { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; display: block; background: var(--tfg-cream); }

.media-card__body { padding: 0.75rem 0.9rem; }

.media-card__title { font-size: 0.92rem; font-weight: 600; color: var(--tfg-maroon); }

.media-card__play {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    background: linear-gradient(0deg, rgba(46, 7, 16, 0.45), rgba(46, 7, 16, 0.05));
}

.media-card__play span {
    width: 54px; height: 54px; border-radius: 50%;
    background: var(--tfg-gradient-gold);
    color: var(--tfg-maroon-deep);
    display: grid; place-items: center;
    font-size: 1.2rem;
    box-shadow: 0 0 22px rgba(255, 216, 107, 0.6);
}

.ratio-video { position: relative; padding-top: 56.25%; }
.ratio-video > * { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ------------------------------------------------------------- gift cards */

.gift-card {
    background: linear-gradient(160deg, #fff, var(--tfg-cream));
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: var(--tfg-radius);
    padding: 1rem;
    height: 100%;
    display: flex; flex-direction: column; gap: 0.6rem;
    position: relative;
    overflow: hidden;
}

.gift-card__value {
    position: absolute; top: 0.8rem; right: -2.2rem;
    transform: rotate(38deg);
    background: var(--tfg-gradient-gold);
    color: var(--tfg-maroon-deep);
    font-weight: 800; font-size: 0.78rem;
    padding: 0.2rem 2.4rem;
}

.gift-card__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--tfg-radius-sm); }

.coupon-code {
    font-family: "Consolas", monospace;
    letter-spacing: 0.12em;
    font-weight: 700;
    background: var(--tfg-maroon-deep);
    color: var(--tfg-neon-gold);
    border-radius: 8px;
    padding: 0.35rem 0.7rem;
    display: inline-block;
}

/* ------------------------------------------------------------- popup */

.tfg-popup .modal-content {
    border: 0;
    border-radius: var(--tfg-radius);
    overflow: hidden;
    box-shadow: var(--tfg-shadow-lg);
    background: var(--tfg-cream);
}

.tfg-popup .modal-header {
    background: var(--tfg-gradient-maroon);
    color: var(--tfg-cream);
    border-bottom: 2px solid var(--tfg-gold);
}

.tfg-popup .modal-title { font-family: Georgia, serif; color: var(--tfg-gold-light); }

.tfg-popup .btn-close { filter: invert(1) sepia(1) saturate(4) hue-rotate(5deg); }

.tfg-popup__image { width: 100%; max-height: 380px; object-fit: cover; }

/* ------------------------------------------------------------- footer */

.tfg-footer {
    background: var(--tfg-gradient-maroon);
    color: var(--tfg-cream-dim);
    border-top: 2px solid var(--tfg-gold);
    padding: 2.5rem 0 1.2rem;
}

.tfg-footer h6 { color: var(--tfg-gold-light); font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; }
.tfg-footer a { color: var(--tfg-cream-dim); font-size: 0.9rem; }
.tfg-footer a:hover { color: var(--tfg-neon-gold); }

.tfg-footer__bottom {
    border-top: 1px solid var(--tfg-panel-line);
    margin-top: 1.6rem; padding-top: 1rem;
    font-size: 0.82rem;
    color: rgba(253, 246, 231, 0.6);
}

/* ------------------------------------------------------------------ *
 * Auth pages (login, registration, forgot / reset password).
 * Rebuilt 28 Sep to the design sample the client sent: lotus heading,
 * round icon badge on every label, tall rounded inputs with hints,
 * a pill action button and a lotus rule closing the page. On a phone
 * the maroon column is dropped and the card sits straight under the
 * rate band - the old layout left a screen-high empty gap there.
 * ------------------------------------------------------------------ */
.auth-body { background: var(--tfg-bg); }

.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    background: var(--tfg-maroon-deep);
}

.auth-aside {
    position: relative;
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 61, 139, 0.2), transparent 45%),
        radial-gradient(circle at 85% 75%, rgba(61, 240, 255, 0.16), transparent 45%),
        var(--tfg-gradient-maroon);
    color: var(--tfg-cream);
    padding: 3rem;
    display: flex; flex-direction: column; justify-content: center;
}
.auth-aside__brand {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 1.75rem; text-decoration: none;
}

.auth-panel {
    position: relative;
    background: var(--tfg-bg);
    padding: 2rem 1.5rem 2.5rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.auth-panel__inner { width: 100%; max-width: 480px; }
.auth-panel > .auth-wave {
    width: calc(100% + 3rem); margin: auto -1.5rem -2.5rem;   /* cancels the column padding */
}
.auth-panel__top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 1.5rem;
}
.auth-back {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 700; color: var(--tfg-maroon); text-decoration: none;
}
.auth-back:hover { color: var(--tfg-gold-dark); }

/* ---------- heading with the lotus mark -------------------------------- */
.auth-head { margin-bottom: 1.3rem; }
.auth-head__title {
    display: flex; align-items: center; gap: 12px; margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.7rem, 5.2vw, 2.15rem); font-weight: 700;
    color: var(--tfg-maroon); line-height: 1.15;
}
.auth-lotus { width: 46px; height: 29px; flex: 0 0 auto; color: var(--tfg-gold); }
.auth-head__sub { margin: .55rem 0 0; color: var(--tfg-ink-soft); font-size: 1.02rem; }
.auth-head__rule {
    display: block; width: 84px; height: 3px; margin-top: .85rem;
    border-radius: 2px; background: var(--tfg-gradient-gold);
}

/* ---------- the card and its fields ------------------------------------ */
.auth-card {
    background: var(--tfg-surface);
    border: 1px solid var(--tfg-line);
    border-radius: 22px;
    padding: 1.4rem 1.25rem 1.5rem;
    box-shadow: 0 18px 44px rgba(46, 7, 16, .10);
    display: grid; gap: 1.05rem;
}

.auth-field { display: grid; gap: .5rem; min-width: 0; }
.auth-field__label {
    display: flex; align-items: center; gap: 10px; margin: 0;
    font-weight: 700; font-size: 1rem; color: var(--tfg-maroon);
}
.auth-field__opt { font-weight: 600; font-size: .82rem; color: var(--tfg-ink-soft); }
.auth-badge {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center; font-size: 1.05rem;
    color: var(--tfg-maroon);
    background: linear-gradient(140deg, #fff6e0, #f7e7c2);
    border: 1px solid rgba(212, 175, 55, .5);
    box-shadow: inset 0 1px 0 #fff;
}

.form-control.auth-control, .form-select.auth-control {
    min-height: 52px; border-radius: 14px;
    border: 1px solid var(--tfg-line); background: #fff;
    padding: .7rem 1rem; font-size: 1rem; color: var(--tfg-ink);
}
.form-control.auth-control::placeholder { color: #a99a8c; }
/* the sponsor box upper-cases what is typed - not its hint */
.form-control.auth-control.text-uppercase::placeholder { text-transform: none; }
.form-control.auth-control:focus, .form-select.auth-control:focus {
    border-color: var(--tfg-gold);
    box-shadow: 0 0 0 .22rem rgba(212, 175, 55, .2);
}
.auth-group { flex-wrap: nowrap; }
.auth-group .input-group-text {
    min-height: 52px; border-radius: 14px 0 0 14px;
    border: 1px solid var(--tfg-line); border-right: 0;
    background: linear-gradient(140deg, #fff6e0, #f7e7c2);
    font-weight: 700; color: var(--tfg-maroon);
}
.auth-group .auth-control { border-radius: 0 14px 14px 0; }

.auth-row {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: .6rem 1rem;
}
.auth-check .form-check-input {
    width: 1.15rem; height: 1.15rem; margin-top: .15rem;
    border-color: rgba(212, 175, 55, .75);
}
.auth-check .form-check-input:checked { background-color: var(--tfg-gold-dark); border-color: var(--tfg-gold-dark); }
.auth-check .form-check-label { font-size: .98rem; color: var(--tfg-ink); }
.auth-terms .form-check-label { font-size: .92rem; }
.auth-link { font-weight: 700; color: var(--tfg-gold-dark); text-decoration: none; }
.auth-link:hover { text-decoration: underline; }

.auth-plan {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: .4rem .8rem; padding: .85rem 1rem;
    border-radius: 14px; border: 1px dashed rgba(212, 175, 55, .6);
    background: var(--tfg-surface-2);
}
.auth-plan__figures { font-size: .92rem; color: var(--tfg-ink-soft); }

.auth-submit {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    width: 100%; min-height: 56px; border-radius: 999px;
    font-size: 1.12rem; font-weight: 800;
}
.auth-submit i { font-size: 1.15rem; }

.auth-switch { margin: 0; text-align: center; color: var(--tfg-ink-soft); font-size: .97rem; }
.auth-switch a { font-weight: 800; color: var(--tfg-maroon); text-decoration: none; }
.auth-switch a:hover { color: var(--tfg-gold-dark); }

.auth-figure {
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--tfg-panel-line);
    border-radius: var(--tfg-radius);
    padding: 1rem 1.2rem;
}

/* ---------- lotus rule that closes the page ---------------------------- */
.auth-foot {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin-top: 1.7rem; color: var(--tfg-gold);
}
.auth-foot__rule { flex: 0 1 120px; height: 1px; background: linear-gradient(90deg, transparent, var(--tfg-gold)); }
.auth-foot__rule:last-child { background: linear-gradient(90deg, var(--tfg-gold), transparent); }
.auth-foot__lotus { width: 30px; height: 19px; opacity: .85; }

/* the gold ribbon banner that closes the page (client's sample, 4 Oct) */
.auth-wave { position: relative; margin-top: 1.4rem; line-height: 0; }
.auth-wave__art { display: block; width: 100%; height: 86px; }
.auth-wave__band { fill: url(#tfgFootGold); opacity: .18; }
.auth-wave__ribbon { stroke: url(#tfgFootGold); stroke-width: 3; }
.auth-wave__ribbon--soft { stroke-width: 2; opacity: .55; }
.auth-wave__lotus {
    position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
    width: 38px; height: 24px; color: var(--tfg-gold); opacity: .95;
    filter: drop-shadow(0 2px 4px rgba(212, 175, 55, .35));
}

@media (min-width: 992px) {
    /* the maroon column sits directly under the band, so the cream wave
       would cut across it - keep the gold hairline there instead */
    .tfg-rate-line--wave .tfg-rate-wave { display: none; }
    .tfg-rate-line--wave { border-bottom: 1px solid rgba(212, 175, 55, .5); }
}

@media (max-width: 991.98px) {
    .auth-shell { grid-template-columns: 1fr; min-height: 0; background: var(--tfg-bg); }
    .auth-aside { display: none; }
    /* top-aligned: the old centring left a screen-high gap under the band */
    .auth-panel { align-items: flex-start; padding: 1rem 1rem 2rem; }
    .auth-panel__top { margin-bottom: 1.1rem; }
}

@media (max-width: 575.98px) {
    .auth-card { padding: 1.15rem 1rem 1.3rem; border-radius: 20px; gap: .95rem; }
    .auth-head { margin-bottom: 1.1rem; }
    .auth-head__sub { font-size: .95rem; }
    .auth-lotus { width: 40px; height: 25px; }
    .auth-badge { width: 34px; height: 34px; font-size: .95rem; }
    .form-control.auth-control, .form-select.auth-control { min-height: 50px; }
    .auth-group .input-group-text { min-height: 50px; }
    .auth-submit { min-height: 54px; font-size: 1.06rem; }
}

/* ------------------------------------------------------------- misc */

.flash-stack { position: fixed; top: 1rem; right: 1rem; z-index: 1080; max-width: 380px; }

.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--tfg-ink-soft); }
.empty-state__icon { font-size: 2.2rem; opacity: 0.4; }

.divider-gold { height: 1px; background: linear-gradient(90deg, transparent, var(--tfg-gold), transparent); }

.skip-link {
    position: absolute; left: -9999px;
    background: var(--tfg-gold); color: var(--tfg-maroon-deep);
    padding: 0.5rem 1rem; z-index: 2000; border-radius: 0 0 8px 0;
}

.skip-link:focus { left: 0; top: 0; }

:focus-visible { outline: 3px solid var(--tfg-neon-cyan); outline-offset: 2px; }

/* admin section tabs (E-PINs, income, wallet …) — scroll sideways on phones */
.admin-tabs {
    display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 2px;
    border-bottom: 1px solid var(--tfg-line); -webkit-overflow-scrolling: touch;
}
.admin-tabs a {
    flex: 0 0 auto; padding: 0.55rem 0.95rem; border-radius: 10px 10px 0 0;
    color: var(--tfg-maroon); font-weight: 600; font-size: 0.9rem; text-decoration: none; white-space: nowrap;
    border: 1px solid transparent; border-bottom: 0;
}
.admin-tabs a:hover { background: rgba(212, 175, 55, 0.12); }
.admin-tabs a.active { background: #fff; border-color: var(--tfg-line); box-shadow: 0 -2px 0 var(--tfg-gold) inset; }

/* compact key/value list used on member detail */
.kv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem; }
.kv-grid > div, .kv-grid > a > div { background: var(--tfg-cream); border: 1px solid var(--tfg-line); border-radius: 10px; padding: 0.55rem 0.75rem; min-width: 0; }
.kv-grid a:hover > div { border-color: var(--tfg-gold); }
.kv-grid small { display: block; color: var(--tfg-ink-soft); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; }
.kv-grid b { display: block; color: var(--tfg-maroon); font-size: 1rem; overflow-wrap: anywhere; }

/* admin list headers on phones: filters wrap onto full-width rows instead of
   pushing the "New" button off-screen */
@media (max-width: 575.98px) {
    .tfg-card__header { padding: 0.8rem 0.9rem; }
    .tfg-card__header > span.d-flex,
    .tfg-card__header > form { width: 100%; }
    .tfg-card__header form { flex-wrap: wrap; flex: 1 1 100%; }
    .tfg-card__header form .form-control,
    .tfg-card__header form .form-select { flex: 1 1 130px; width: auto !important; min-width: 0; }
    .panel-topbar { gap: 0.5rem; }
}

@media print {
    .no-print, .panel-sidebar, .panel-topbar, .tfg-navbar, .tfg-footer { display: none !important; }
    body { background: #fff; }
}

/* ==========================================================================
   Admin panel — larger, easier-to-read type (client request 2026-09-19).
   Scoped to .panel-sidebar / .panel-main so public pages keep their sizes.
   ========================================================================== */
.panel-sidebar { width: 290px; flex-basis: 290px; }
.panel-nav a { font-size: 1.06rem; padding: 0.62rem 0.8rem; gap: 0.75rem; }
.panel-nav a .bi { font-size: 1.1rem; }
.panel-nav__group { font-size: 0.8rem; font-weight: 700; color: rgba(245, 217, 138, 0.85); padding: 1.1rem 0.75rem 0.4rem; }
.panel-nav .badge-count { font-size: 0.76rem; }
.panel-sidebar .brand-wordmark { font-size: 1.2rem !important; }
.panel-sidebar .brand-sub { font-size: 0.74rem; }

.panel-main { font-size: 1.05rem; }
.panel-title { font-size: 1.7rem; }
.panel-main .tfg-card__header { font-size: 1.1rem; }
.panel-main .tfg-table thead th { font-size: 0.86rem; padding: 0.8rem 0.9rem; }
.panel-main .tfg-table tbody td { font-size: 1.02rem; padding: 0.8rem 0.9rem; }
.panel-main .tfg-table .small, .panel-main small { font-size: 0.9rem; }
.panel-main .form-label { font-size: 0.98rem; }
.panel-main .form-hint { font-size: 0.9rem; }
.panel-main .form-control, .panel-main .form-select { font-size: 1.02rem; }
.panel-main .form-control-sm, .panel-main .form-select-sm, .panel-main .btn-sm { font-size: 0.94rem; }
.panel-main .btn { font-size: 1.02rem; }
.panel-main .stat-tile__label { font-size: 0.86rem; }
.panel-main .stat-tile__meta { font-size: 0.9rem; }
.panel-main .kv-grid small { font-size: 0.8rem; }
.panel-main .kv-grid b { font-size: 1.1rem; }
.panel-main .level-chip { font-size: 0.92rem; }
.panel-main .admin-tabs a { font-size: 1rem; }
.panel-main .alert { font-size: 1.02rem; }

/* ------------------------------------------------- branded confirm dialog */
.tfg-ask {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(46,7,16,.55);
    display: grid; place-items: center; padding: 16px;
}
.tfg-ask__card {
    width: 100%; max-width: 420px;
    background: #fff; border: 1px solid var(--br-line, #e8dcc4); border-radius: 14px;
    box-shadow: 0 24px 60px rgba(46,7,16,.35);
    padding: 22px;
}
.tfg-ask__title { margin: 0 0 8px; font-family: Georgia, serif; font-size: 20px; color: #4a0d1b; }
.tfg-ask__text { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: #2b1a12; }
.tfg-ask__row { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.tfg-ask__btn {
    border: 0; border-radius: 8px; padding: 10px 18px;
    font-size: 15px; font-weight: 700; cursor: pointer;
}
.tfg-ask__btn--cancel { background: #f4e9d2; color: #4a0d1b; }
.tfg-ask__btn--cancel:hover { background: #e8dcc4; }
.tfg-ask__btn--yes { background: linear-gradient(135deg,#a8842a,#d4af37 40%,#f5d98a 60%,#d4af37); color: #2e0710; }
.tfg-ask__btn--yes:hover { filter: brightness(1.06); }

/* ============================================================================
   Module 2 - 20-level fixed-amount team bonus (Level Plan screen)
   Twenty rows with six columns will not fit a phone as a table, so below the
   admin breakpoint each row becomes a stacked card and every cell prints its
   own header from the data-label the Blade writes. Appended at the end so the
   rest of the sheet is untouched.
   ========================================================================= */

.tfg-level-totals { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: flex-end; }
.tfg-engine-select { max-width: 420px; }
.tfg-level-table input[type="number"] { min-width: 78px; }

@media (max-width: 767.98px) {
    .tfg-level-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .tfg-level-table, .tfg-level-table tbody, .tfg-level-table tr, .tfg-level-table td { display: block; width: 100%; }
    .tfg-level-table tr {
        margin-bottom: 12px; padding: 10px 12px;
        border: 1px solid rgba(212, 175, 55, .35); border-radius: 10px; background: rgba(255, 255, 255, .55);
    }
    .tfg-level-table td {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        max-width: none !important; border: 0; padding: 5px 0; text-align: left !important;
    }
    .tfg-level-table td::before {
        content: attr(data-label);
        font-size: 12px; font-weight: 700; color: #7a5a1e; flex: 0 0 auto;
    }
    .tfg-level-table td > .input-group, .tfg-level-table td > input { max-width: 170px; }
    .tfg-level-totals { justify-content: flex-start; }
}

/* ============================================================================
   Module 3 - the leadership Rank Plan screen (admin)
   Seven ranks x seven columns, each followed by a plain-language explanation
   row. On a phone the table collapses to stacked cards the same way the Level
   Plan table does, and the explanation row becomes the card's footnote. The
   whole block is appended after the Module 2 block so nothing above is touched.
   ========================================================================= */

.tfg-rank-header { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; align-items: center; }
.tfg-rank-rate { display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: space-between; align-items: center; }
.tfg-rank-table input[type="number"] { min-width: 76px; }
.tfg-rank-table .form-text { margin-top: 2px; line-height: 1.25; }

/* The explanation sits under its own rank, so it must not read as a data row. */
.tfg-rank-explain td { border-top: 0; padding-top: 0; padding-bottom: 12px; }

/* A switched-off rank cannot be earned; grey it so the total makes sense. */
.tfg-rank-table tr.is-off { opacity: .55; }

@media (max-width: 767.98px) {
    .tfg-rank-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .tfg-rank-table, .tfg-rank-table tbody, .tfg-rank-table tr, .tfg-rank-table td { display: block; width: 100%; }
    .tfg-rank-table tr[data-rank-row] {
        margin-bottom: 0; padding: 10px 12px 4px;
        border: 1px solid rgba(212, 175, 55, .35); border-bottom: 0;
        border-radius: 10px 10px 0 0; background: rgba(255, 255, 255, .55);
    }
    .tfg-rank-table tr.tfg-rank-explain {
        margin-bottom: 12px; padding: 0 12px 10px;
        border: 1px solid rgba(212, 175, 55, .35); border-top: 0;
        border-radius: 0 0 10px 10px; background: rgba(255, 255, 255, .55);
    }
    .tfg-rank-table td {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        max-width: none !important; border: 0; padding: 5px 0; text-align: left !important;
    }
    .tfg-rank-table td::before {
        content: attr(data-label);
        font-size: 12px; font-weight: 700; color: #7a5a1e; flex: 0 0 auto;
    }
    /* The footnote has no label of its own and needs the full card width. */
    .tfg-rank-table tr.tfg-rank-explain td { display: block; padding: 6px 0 0; }
    .tfg-rank-table tr.tfg-rank-explain td::before { content: none; }
    .tfg-rank-table td > .input-group, .tfg-rank-table td > input { max-width: 170px; }
    /* The hint under "directs needed" would be squeezed against its input. */
    .tfg-rank-table td:has(> .form-text) { flex-wrap: wrap; }
    .tfg-rank-table td > .form-text { flex: 1 0 100%; text-align: right; }
    .tfg-rank-header, .tfg-rank-rate { justify-content: flex-start; }
}

/* 360px: the narrowest phone we support - keep every control on the card. */
@media (max-width: 400px) {
    .tfg-rank-table td { gap: 8px; }
    .tfg-rank-table td > .input-group, .tfg-rank-table td > input { max-width: 132px; }
    .tfg-rank-table input[type="number"] { min-width: 0; }
    .tfg-rank-rate .btn { width: 100%; }
}

/* ------------------------------------------------------------------ *
 * Today's live metal rate band (public + auth pages). 24K, 22K, 18K
 * then Silver, each a coloured card with its own metal glyph - New
 * Delhi figures from the feed. Restyled 28 Sep to the design sample
 * the client sent: darker jewellery-window backdrop, metal glyphs,
 * the city pill beside the heading, and a gold wave into the page.
 * ------------------------------------------------------------------ */
.tfg-rate-line {
    position: relative;
    background:
        radial-gradient(90% 150% at 6% -20%, rgba(255, 216, 107, .20) 0%, rgba(255, 216, 107, 0) 58%),
        radial-gradient(75% 130% at 96% 118%, rgba(212, 175, 55, .30) 0%, rgba(212, 175, 55, 0) 60%),
        radial-gradient(38% 70% at 78% 24%, rgba(255, 176, 31, .16) 0%, rgba(255, 176, 31, 0) 70%),
        linear-gradient(118deg, #16060a 0%, #3d0d19 46%, #220810 100%);
    box-shadow: inset 0 -1px 0 rgba(212, 175, 55, .30);
    border-bottom: 1px solid rgba(212, 175, 55, .5);
    overflow: hidden;
}
/* where a gold wave closes the band, a hairline would cut across it */
.tfg-rate-line--wave { border-bottom: 0; box-shadow: none; }

.tfg-rate-bar {
    box-sizing: border-box; width: 100%; max-width: 1180px; margin: 0 auto;
    padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 10px;
}
.tfg-rate-line--wave .tfg-rate-bar { padding-bottom: 6px; }

/* ---------- headline row: live pill, brand + heading, city, stamp ----- */
.tfg-rate-bar__head {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 7px 12px; text-align: center; line-height: 1.35;
}
.tfg-rate-bar__live {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 12px; border-radius: 999px;
    font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: #8bffcd; background: rgba(61, 255, 168, .14);
    border: 1px solid rgba(61, 255, 168, .46);
    box-shadow: 0 0 14px rgba(61, 255, 168, .12);
}
.tfg-rate-bar__dot {
    flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
    background: #3dffa8; box-shadow: 0 0 0 0 rgba(61, 255, 168, .75);
    animation: tfg-rate-pulse 2s infinite;
}
@keyframes tfg-rate-pulse {
    0% { box-shadow: 0 0 0 0 rgba(61, 255, 168, .7); }
    70% { box-shadow: 0 0 0 7px rgba(61, 255, 168, 0); }
    100% { box-shadow: 0 0 0 0 rgba(61, 255, 168, 0); }
}
@media (prefers-reduced-motion: reduce) { .tfg-rate-bar__dot { animation: none; } }

.tfg-rate-bar__title {
    display: inline-flex; align-items: baseline; flex-wrap: wrap;
    justify-content: center; gap: 4px 8px; min-width: 0;
}
.tfg-rate-bar__brand {
    font-size: 14.5px; font-weight: 800; letter-spacing: .01em;
    background: var(--tfg-gradient-gold); -webkit-background-clip: text;
    background-clip: text; color: transparent;
}
.tfg-rate-bar__heading {
    font-size: 14px; font-weight: 700; color: var(--tfg-cream);
    opacity: .95; letter-spacing: .01em;
}
.tfg-rate-bar__city {
    padding: 2px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    color: var(--tfg-gold-light); background: rgba(212, 175, 55, .15);
    border: 1px solid rgba(212, 175, 55, .45);
}
.tfg-rate-bar__time {
    flex: 1 0 100%;   /* its own centred line, as in the design sample */
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    margin-top: -2px;
    font-size: 12px; font-weight: 600; color: rgba(253, 246, 231, .70);
}
.tfg-rate-bar__clock { width: 13px; height: 13px; flex: 0 0 auto; opacity: .85; }

/* ---------- the four rate cards ---------------------------------------- */
.tfg-rate-cards {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
.tfg-rate-card {
    --rc: var(--tfg-gold);
    position: relative; overflow: hidden; min-width: 0;
    display: flex; flex-direction: column; gap: 3px;
    padding: 11px 13px 12px 16px; border-radius: 16px;
    background:
        linear-gradient(150deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .05) 55%, rgba(0, 0, 0, .12) 100%);
    border: 1px solid color-mix(in srgb, var(--rc) 46%, transparent);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .16);
}
/* colour-mix is new-ish; a flat gold hairline is the fallback everywhere else */
@supports not (border-color: color-mix(in srgb, red 40%, transparent)) {
    .tfg-rate-card { border-color: rgba(212, 175, 55, .42); }
}
.tfg-rate-card::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px;
    background: linear-gradient(180deg, var(--rc), rgba(255, 255, 255, .55));
}
.tfg-rate-card--k24 { --rc: #ffd86b; }
.tfg-rate-card--k22 { --rc: #ffb01f; }
.tfg-rate-card--k18 { --rc: #f3a583; }
.tfg-rate-card--silver { --rc: #d8e6f2; }

.tfg-rate-card__top {
    display: flex; align-items: center; flex-wrap: wrap; gap: 5px 7px; min-width: 0;
}
.tfg-rate-card__icon {
    width: 28px; height: 24px; flex: 0 0 auto; color: var(--rc);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
}
.tfg-rate-card__purity {
    padding: 2px 8px; border-radius: 7px;
    font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
    color: #3a0a14; background: linear-gradient(135deg, var(--rc), #fff6de);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
}
.tfg-rate-card__metal {
    font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(253, 246, 231, .74);
}
.tfg-rate-card__price {
    display: block; font-size: 21px; font-weight: 800; line-height: 1.15;
    color: #fffdf6; font-variant-numeric: tabular-nums; letter-spacing: -.01em;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .3);
}
.tfg-rate-card__price small {
    margin-left: 3px; font-size: 11px; font-weight: 600;
    color: rgba(253, 246, 231, .64); letter-spacing: 0;
}
.tfg-rate-card__price--none { color: rgba(253, 246, 231, .55); }
.tfg-rate-card__ten {
    font-size: 11.5px; font-weight: 700; color: var(--rc);
    font-variant-numeric: tabular-nums; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}

/* ---------- the gold curve that hands the band over to the page -------- */
.tfg-rate-wave {
    display: block; width: 100%; height: 54px; margin-bottom: -1px;
}
.tfg-rate-wave__ribbon { fill: url(#tfgWaveGold); }
.tfg-rate-wave__sheen { fill: url(#tfgWaveSheen); }
.tfg-rate-wave__fill { fill: var(--tfg-wave-fill, var(--tfg-bg)); }
.tfg-rate-wave__line { stroke: #fff3d2; stroke-width: 2; opacity: .75; }

/* ---------- responsive: 4 across, 2x2 on tablets and phones ----------- */
@media (max-width: 991.98px) {
    .tfg-rate-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .tfg-rate-card__price { font-size: 19px; }
    .tfg-rate-wave { height: 44px; }
}
@media (max-width: 575.98px) {
    .tfg-rate-bar { padding: 10px 12px 12px; gap: 8px; }
    .tfg-rate-bar__head { gap: 5px 9px; }
    .tfg-rate-bar__brand { display: none; }   /* the navbar logo is right below it */
    .tfg-rate-bar__heading { font-size: 13px; }
    .tfg-rate-bar__city { font-size: 10px; padding: 2px 8px; }
    .tfg-rate-bar__time { font-size: 11.5px; }
    .tfg-rate-card { padding: 9px 11px 10px 14px; border-radius: 14px; gap: 2px; }
    .tfg-rate-card__icon { width: 24px; height: 21px; }
    .tfg-rate-card__price { font-size: 18px; }
    .tfg-rate-card__price small { font-size: 10px; }
    .tfg-rate-card__ten { font-size: 10.5px; }
}
@media (max-width: 400px) {
    .tfg-rate-bar { padding: 9px 10px 10px; }
    .tfg-rate-cards { gap: 8px; }
    .tfg-rate-card { padding: 8px 9px 9px 13px; }
    .tfg-rate-card__icon { width: 22px; height: 19px; }
    .tfg-rate-card__price { font-size: 17px; }
    .tfg-rate-card__metal { font-size: 9.5px; letter-spacing: .08em; }
    .tfg-rate-wave { height: 38px; }
}
/* ------------------------------------------------------------------ *
 * Admin gallery: multi-photo upload box and photo grid
 * ------------------------------------------------------------------ */
.gal-drop {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 28px 16px; text-align: center; cursor: pointer;
    border: 2px dashed rgba(212, 175, 55, .6); border-radius: 14px;
    background: rgba(212, 175, 55, .06); transition: background .15s, border-color .15s;
}
.gal-drop:hover, .gal-drop:focus-within { background: rgba(212, 175, 55, .12); border-color: #d4af37; }
.gal-drop__icon { font-size: 40px; color: #b8860b; }
.gal-drop__main { font-weight: 700; font-size: 17px; }
.gal-drop__hint { font-size: 13px; opacity: .75; }
.gal-drop__count { font-weight: 700; color: #1f7a3d; min-height: 1.2em; }
.gal-drop__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }

.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.gal-item {
    display: flex; flex-direction: column; gap: 8px; padding: 10px;
    border: 1px solid rgba(0, 0, 0, .1); border-radius: 12px; background: rgba(255, 255, 255, .04);
}
.gal-item.is-hidden .gal-item__img img { opacity: .45; filter: grayscale(.6); }
.gal-item__img { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: #0002; }
.gal-item__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-item__badges { position: absolute; top: 6px; left: 6px; display: flex; gap: 4px; flex-wrap: wrap; }
.gal-item__form { display: flex; flex-direction: column; gap: 6px; }
.gal-item__row { display: flex; align-items: center; gap: 8px; }
.gal-item__order { max-width: 90px; }
@media (max-width: 575.98px) { .gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 380px) { .gal-grid { grid-template-columns: 1fr; } }

/* current-image preview on slider / popup / media forms */
.img-current { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.img-current img { max-width: 220px; max-height: 124px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(0, 0, 0, .12); }
.img-current__meta { font-size: 13px; opacity: .8; }

/* ------------------------------------------------------------------ *
 * Admin dashboard: clickable metric tiles (client, 21 Sep)
 * ------------------------------------------------------------------ */
.stat-tile-link { display: block; height: 100%; color: inherit; text-decoration: none; }
.stat-tile-link .stat-tile { height: 100%; transition: transform .15s, box-shadow .15s; cursor: pointer; }
.stat-tile-link:hover .stat-tile, .stat-tile-link:focus-visible .stat-tile { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }
.stat-tile__go { margin-top: 8px; font-size: 13px; font-weight: 700; opacity: .85; }
.stat-tile-link:hover .stat-tile__go { opacity: 1; text-decoration: underline; }

/* ------------------------------------------------------------------ *
 * Top sponsors leaderboard: featured podium for #1-#3
 * ------------------------------------------------------------------ */
.top-sponsors { border: 2px solid #d4af37; box-shadow: 0 0 0 4px rgba(212, 175, 55, .15), 0 12px 30px rgba(0, 0, 0, .2); }
.top-sponsors .tfg-card__header { background: linear-gradient(90deg, #5a0f1c, #8a1f33); color: #f8e7b0; font-size: 1.15rem; font-weight: 800; }
.ts-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ts-card {
    position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
    padding: 22px 14px 16px; border-radius: 16px; text-decoration: none; color: #2b1a10;
    border: 2px solid transparent; transition: transform .15s, box-shadow .15s;
}
.ts-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, .25); color: #2b1a10; }
.ts-card--1 { background: linear-gradient(160deg, #fff4c2, #f3d060 55%, #d4a017); border-color: #b8860b; order: 2; transform: scale(1.04); }
.ts-card--1:hover { transform: scale(1.04) translateY(-4px); }
.ts-card--2 { background: linear-gradient(160deg, #ffffff, #dfe3e8 60%, #b9c0c9); border-color: #9aa3ad; order: 1; }
.ts-card--3 { background: linear-gradient(160deg, #fbe3cf, #e3a56f 60%, #b87333); border-color: #9c5b24; order: 3; }
.ts-medal { font-size: 40px; line-height: 1; }
.ts-place { position: absolute; top: 10px; left: 12px; font-weight: 900; font-size: 15px; opacity: .7; }
.ts-name { font-weight: 800; font-size: 1.1rem; line-height: 1.25; word-break: break-word; }
.ts-code { font-size: 13px; font-weight: 600; opacity: .75; }
.ts-big { font-size: 2rem; font-weight: 900; line-height: 1.1; margin-top: 4px; }
.ts-big small { font-size: .9rem; font-weight: 700; }
.ts-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; font-size: 13px; }
.ts-earned { font-size: 13px; font-weight: 700; margin-top: 2px; }
@media (max-width: 767.98px) {
    .ts-podium { grid-template-columns: 1fr; }
    .ts-card--1, .ts-card--2, .ts-card--3 { order: 0; transform: none; }
    .ts-card--1:hover { transform: translateY(-4px); }
}

/* Show / hide eye inside every password box (client, 21 Sep) */
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap > input { width: 100%; padding-right: 46px !important; }
.pw-eye {
    position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px;
    background: transparent; color: #7a1a2a; cursor: pointer; z-index: 5;
}
.pw-eye:hover, .pw-eye:focus-visible { background: rgba(122, 26, 42, .1); outline: none; }
.input-group > .pw-wrap { flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group > .pw-wrap > .form-control { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* ------------------------------------------------------------------ *
 * Account on hold / turned down (client, 28 Sep: no ID goes live until
 * an admin verifies it).
 * ------------------------------------------------------------------ */
.auth-hold__icon {
    width: 76px; height: 76px; margin: 0 auto .9rem; border-radius: 50%;
    display: grid; place-items: center; font-size: 2.1rem;
    color: var(--tfg-gold-dark);
    background: linear-gradient(140deg, #fff6e0, #f7e7c2);
    border: 1px solid rgba(212, 175, 55, .55);
}
.auth-hold__icon--bad { color: #a4123f; background: linear-gradient(140deg, #ffeef4, #ffdde7); border-color: rgba(255, 61, 139, .45); }
.auth-hold__lead { margin: 0; font-size: 1.02rem; color: var(--tfg-ink); }
.auth-hold__reason {
    margin: 0; padding: .7rem .9rem; border-radius: 12px; font-size: .95rem;
    background: #fff4f7; border: 1px solid rgba(255, 61, 139, .3); color: #6b2436;
}
.auth-hold__id {
    display: flex; flex-direction: column; gap: 2px; padding: .8rem 1rem;
    border-radius: 14px; background: var(--tfg-surface-2); border: 1px dashed rgba(212, 175, 55, .6);
}
.auth-hold__id span { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tfg-ink-soft); }
.auth-hold__id strong { font-size: 1.3rem; letter-spacing: .06em; color: var(--tfg-maroon); }
.auth-hold__help { margin: 0; font-size: .93rem; color: var(--tfg-ink-soft); }
.auth-hold__help a { font-weight: 700; color: var(--tfg-gold-dark); text-decoration: none; }

@media (max-width: 991.98px) {
    .auth-panel > .auth-wave { width: calc(100% + 2rem); margin: auto -1rem -2rem; }
    .auth-wave__art { height: 70px; }
    .auth-wave__lotus { bottom: 20px; width: 32px; height: 20px; }
}