/* =====================================================================
           MASTER THEME TOKENS
           ---------------------------------------------------------------------
           Every colour in this page resolves through these variables. To
           re-skin the whole app (or a per-institution build), override this
           one block — nothing else needs touching. Keep the ramp semantic
           (25 = faintest tint ... 800 = deepest) so swapping a hue keeps the
           same visual hierarchy.
           ===================================================================== */
        :root {
            /* Brand ramp */
            --brand-15:  #FAFAFF;
            --brand-20:  #F8F8FF;
            --brand-25:  #F6F5FF;
            --brand-50:  #F2F1FF;
            --brand-100: #E3E1FF;
            --brand-150: #EDEBFF;
            --brand-200: #DAD7FF;
            --brand-500: #6C63FF;   /* primary */
            --brand-550: #5F56F2;
            --brand-600: #5849D6;   /* primary pressed / headings */
            --brand-700: #4C3FCC;
            --brand-800: #43379E;

            /* Surfaces */
            --bg:            #E6E8F5;
            --bg-mobile:     #ffffff;
            --surface:       #ffffff;
            /* Sep 2026: neutral (not brand-tinted) light gray used for the
               stacked table-row cards - see .fd-table in app-extra.css. */
            --fd-card-bg:    #F4F4F6;
            --fd-card-bg-hover: #ECECEF;

            /* Text */
            --text:         #2B2A3D;
            --text-muted:   #8B89A6;
            --text-faint:   #A9A7C4;

            /* Lines */
            --line:         #F4F3FC;
            --line-soft:    #F1F0FA;

            /* Status */
            --ok:      #1C8A4C;
            --ok-bg:   #E4F9F1;
            --warn:    #B8790A;
            --warn-bg: #FFF6E0;
            --err:     #C92A2A;
            --err-bg:  #FFECEA;

            /* Shape */
            --r-sm: 10px;
            --r-md: 16px;
            --r-lg: 22px;
            --r-pill: 999px;

            /* Elevation */
            --shadow-card: 0 20px 50px -20px rgba(88, 73, 214, 0.25);
            --shadow-dock: 0 6px 18px rgba(88, 73, 214, 0.22);

            /* Gradients built from the ramp */
            --grad-brand: var(--brand-600);
        }

        /* ===== DARK MODE =====
           Every colour in this page resolves through the tokens above, so
           dark mode is just a second value for each one — nothing else in
           the stylesheet needs to change. Applied via [data-theme="dark"]
           on <html>, toggled by toggleDarkMode() and persisted to
           localStorage. See theme.js for the same palette exposed for a
           future settings page. */
        html[data-theme="dark"] {
            --brand-15:  #201F3D;
            --brand-20:  #221F3F;
            --brand-25:  #262242;
            --brand-50:  #2A2648;
            --brand-100: #342E58;
            --brand-150: #3A3462;
            --brand-200: #453D72;
            --brand-500: #8B7FFF;
            --brand-550: #9D92FF;
            --brand-600: #A79CFF;
            --brand-700: #C1B8FF;
            --brand-800: #DAD4FF;

            --bg:         #15132B;
            --bg-mobile:  #15132B;
            --surface:    #1E1B38;

            --text:        #EDEBFF;
            --text-muted:  #A9A5C9;
            --text-faint:  #726D93;

            --line:      #322D52;
            --line-soft: #2A2648;

            --fd-card-bg:       #24213D;
            --fd-card-bg-hover: #2B2748;

            --ok-bg:   #14311F;
            --warn-bg: #362507;
            --err-bg:  #3A1414;

            --shadow-card: 0 20px 50px -20px rgba(0, 0, 0, 0.55);
            --shadow-dock: 0 6px 18px rgba(0, 0, 0, 0.45);
        }

        /* Aug 2026 dark-mode contrast fix: body only ever set a dark-mode
           background here, never a text color, so any plain, unclassed
           text (e.g. the "New here? Create an account" / "Have a school?
           Register your institution" lines on the login page) fell back to
           Bootstrap's own un-themed default body color (#212529, a dark
           gray) rendered on this dark-mode background - unreadably low
           contrast. Setting color here fixes it everywhere at the root,
           not just on the login page, since the same gap existed anywhere
           else a page prints plain text without an explicitly-themed class. */
        html[data-theme="dark"] body { background: var(--bg); color: var(--text); }
        html[data-theme="dark"] .form-container,
        html[data-theme="dark"] .rv-panel,
        html[data-theme="dark"] .doc-card,
        html[data-theme="dark"] .fc-block-card,
        html[data-theme="dark"] .bottom-sheet,
        html[data-theme="dark"] .rail-dark-toggle { background: var(--surface); }
        html[data-theme="dark"] .rv-id-photo img { background: var(--surface); }
        html[data-theme="dark"] .mobile-top-nav .logo-name,
        html[data-theme="dark"] .app-hero-title { color: var(--text); }

        /* ===== RESET & BASE ===== */
        * {
            box-sizing: border-box;
        }
        
        html, body {
            overflow-x: hidden !important;
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        
        body {
            font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--bg);
            overflow-x: hidden !important;
            position: relative;
            width: 100%;
            max-width: 100vw;
            padding: 20px 80px !important;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: 'Poppins', 'Inter', sans-serif;
        }
        
        @media (max-width: 992px) {
            body {
                padding: 20px 70px !important;
            }
        }
        
        @media (max-width: 768px) {
            body {
                padding: 70px 0 80px 0 !important;
            }
        }
        
        /* ===== MOBILE TOP NAV BAR ===== */
        .mobile-top-nav {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1002;
            background: transparent;
            padding: 10px 16px;
            align-items: center;
            justify-content: space-between;
            border-bottom: none;
            box-shadow: none;
        }

        /* A tinted arc sits behind the header. Blur alone was invisible here
           because the bar, the page and the cards are all white — blurring
           white over white changes nothing. The arc introduces an actual
           coloured surface, so content passing beneath it is visible and the
           frosted effect finally reads. It also gives the header a curved,
           app-like silhouette instead of a flat strip. */
        .mobile-top-nav::before {
            content: '';
            position: absolute;
            left: -12%;
            right: -12%;
            top: 0;
            bottom: -34px;
            /* THE BUG: this used to be a fully OPAQUE gradient (no alpha on any
               stop). backdrop-filter blurs whatever sits behind an element, but
               an opaque fill paints over that blur entirely — so at rest
               (before scrolling 8px) the arc was never glassy, no matter what
               backdrop-filter said. Only the .scrolled state used to have real
               alpha. Both states are translucent now, so the blur is visible
               immediately, not just after scrolling. */
            background: linear-gradient(160deg, rgba(224,221,255,0.94) 0%, rgba(236,234,255,0.86) 60%, rgba(250,249,255,0.78) 100%);
            /* 2026-09-18, quoted directly: "its remove that semi circle and
               make it straight". This was `border-radius: 0 0 50% 50% / 0 0
               34px 34px` - an ELLIPTICAL bottom edge (the 50%/50% horizontal
               radii with a small vertical radius is what produced the wide
               shallow dome), which is what the codebase and the user both
               call "the semi circle". Now a straight bottom edge.
               app-extra.css overrides this same pseudo-element further down
               and has been straightened to match - change both or the
               override wins and the curve comes back. The .app-hero::before
               arc further down THIS file is deliberately left curved: only
               the mobile header was asked for. */
            border-radius: 0;
            z-index: -1;
            -webkit-backdrop-filter: saturate(180%) blur(16px);
            backdrop-filter: saturate(180%) blur(16px);
            transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
        }

        .mobile-top-nav.scrolled::before {
            background: linear-gradient(160deg, rgba(219,215,255,0.78) 0%, rgba(233,231,255,0.68) 60%, rgba(247,246,255,0.6) 100%);
            -webkit-backdrop-filter: saturate(200%) blur(22px);
            backdrop-filter: saturate(200%) blur(22px);
            box-shadow: 0 8px 22px rgba(88, 73, 214, 0.10);
        }

        /* Applied via JS once the page has scrolled a little — gives the
           bar a soft frosted-glass look only when there's content sliding
           underneath it, staying flat/flush white when at the top. */

        
        .mobile-top-nav .logo-section {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .mobile-top-nav .logo-section img {
            height: 66px;
            width: 66px;
            object-fit: contain;
            background: none;
            border-radius: none;
            padding: 5px;
            box-shadow: none;
        }
        
        .mobile-top-nav .logo-section span {
            font-weight: 600;
            font-size: 14px;
            color: var(--brand-600);
        }
        
        .mobile-top-nav .nav-icons {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .mobile-top-nav .nav-icons a {
            color: #5a6c7d;
            text-decoration: none;
            transition: all 0.3s ease;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: #f8fafc;
        }
        
        .mobile-top-nav .nav-icons a i {
            font-size: 16px;
        }
        
        .mobile-top-nav .nav-icons a:nth-child(1) i { color: #3498db; }
        .mobile-top-nav .nav-icons a:nth-child(2) i { color: #e74c3c; }
        .mobile-top-nav .nav-icons a:nth-child(3) i { color: #2ecc71; }
        .mobile-top-nav .nav-icons a:nth-child(4) i { color: #9b59b6; }
        
        .mobile-top-nav .nav-icons a:hover {
            transform: scale(1.1);
            background: #f0f4f8;
        }
        
        @media (max-width: 768px) {
            .mobile-top-nav {
                display: flex !important;
            }
        }
        
        /* ===== MOBILE TOP NAV: TITLE + PROGRESS RING + HELP ===== */
        .mobile-top-nav .logo-text {
            display: flex;
            flex-direction: column;
            line-height: 1.15;
            min-width: 0;
        }

        .mobile-top-nav .logo-name {
            font-weight: 700;
            font-size: 14px;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .mobile-top-nav .logo-sub {
            font-size: 10.5px;
            font-weight: 500;
            color: var(--text-muted);
            white-space: nowrap;
        }

        .nav-progress-ring {
            position: relative;
            width: 38px;
            height: 38px;
            flex-shrink: 0;
        }

        .nav-progress-ring svg {
            width: 38px;
            height: 38px;
            transform: rotate(-90deg);
        }

        /* Segmented ring: one bar per step, rather than one continuous
           stroke — each completed step reads as its own filled segment.
           Each segment pops in with a little overshoot when it becomes
           "done", staggered by index (see the inline animation-delay set
           in updateProgressBar) so completing a step feels like something
           happened rather than just flipping a colour. */
        .ring-seg {
            fill: none;
            stroke: var(--brand-200);
            stroke-width: 4;
            stroke-linecap: round;
            transition: stroke 0.35s ease;
            transform-box: fill-box;
            transform-origin: center;
        }

        .ring-seg.done {
            stroke: var(--brand-500);
            animation: ringSegPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        }
        .ring-seg.dock { stroke: rgba(255,255,255,0.32); }
        .ring-seg.dock.done { stroke: #ffffff; }

        @keyframes ringSegPop {
            0%   { opacity: 0.3; transform: scale(0.55); }
            65%  { opacity: 1;   transform: scale(1.18); }
            100% { opacity: 1;   transform: scale(1); }
        }

        /* The step count bumps slightly whenever it changes. */
        .ring-label.bump { animation: ringLabelBump 0.4s ease; }
        @keyframes ringLabelBump {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.35); }
        }

        .nav-progress-ring .ring-label {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 9.5px;
            font-weight: 700;
            color: var(--brand-600);
        }

        .nav-help-btn {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: none;
            background: var(--brand-50);
            color: var(--brand-600);
            font-size: 15px;
            cursor: pointer;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }

        .nav-help-btn:active {
            transform: scale(0.92);
            background: var(--brand-100);
        }

        /* ===== DESKTOP SIDE-DOCK PROGRESS RING ===== */
        .dock-progress {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            padding: 4px 0 10px 0;
            margin-bottom: 4px;
            border-bottom: 1px solid rgba(255,255,255,0.18);
            width: 100%;
        }

        .dock-progress-ring {
            position: relative;
            width: 42px;
            height: 42px;
        }

        .dock-progress-ring svg {
            width: 42px;
            height: 42px;
            transform: rotate(-90deg);
        }

        .dock-progress-ring .ring-label {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: 700;
            color: #ffffff;
        }

        @media (max-width: 768px) {
            .dock-progress { display: none; }
        }

        /* ===== BOTTOM SHEET (app-style modal) =====
           Sep 2026 follow-up, quoted directly: "on teacher pages the pop up
           still sits under the top nav and the bottom nav so please check
           the z-index there." Audited every teacher page/partial for a
           competing z-index, a `position`, `overflow`, `transform`,
           `will-change` or `filter` rule on an ancestor that could open a
           new stacking context and trap this fixed-position sheet under
           the nav (.mobile-top-nav is 1002, .vertical-tabs-wrapper/
           .vertical-icons-right are 1000, both comfortably below this
           sheet's own 3000/3001) - found no such rule anywhere in this
           codebase's CSS or JS (grepped for all of the above, plus every
           teacher-page inline style), and confirmed neither #fdMobileSheet/
           #fdProfileSheet/#fdWalletSheet/#fdcSheet/#fdClassSheet nor any of
           the nav elements are nested inside one another - both groups are
           always printed as direct children of <body> in header.php/
           footer.php, teacher pages included, so the existing 3000/3001
           should already dominate every nav element's z-index by the plain
           sibling-stacking rule. Since no live root cause turned up after
           that check, this raises both values further as a defensive fix
           (3000/3001 -> 9000/9001, still comfortably under the toast
           stack's 4000... note: now ABOVE it - see the toast z-index
           nearby if that ever needs reconciling) so the sheet sits
           unambiguously above every nav element on every page regardless
           of any ancestor stacking context a future page might introduce. */
        .sheet-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(26, 25, 40, 0.45);
            backdrop-filter: blur(3px);
            -webkit-backdrop-filter: blur(3px);
            z-index: 9000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.28s ease;
        }

        .sheet-backdrop.open {
            opacity: 1;
            pointer-events: auto;
        }

        .bottom-sheet {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 9001;
            background: #ffffff;
            border-radius: 26px 26px 0 0;
            padding: 10px 20px calc(24px + env(safe-area-inset-bottom, 0px)) 20px;
            box-shadow: 0 -10px 40px rgba(26, 25, 40, 0.18);
            transform: translateY(100%);
            transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.32s;
            /* Must be inert while closed — opacity/transform alone still
               leave the element hit-testable, which is what was blocking
               clicks on the fields underneath. */
            pointer-events: none;
            visibility: hidden;
            max-width: 520px;
            margin: 0 auto;
        }

        .bottom-sheet.open {
            transform: translateY(0);
            pointer-events: auto;
            visibility: visible;
            transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s;
        }

        /* On desktop the same component becomes a centred dialog instead of
           a bottom sheet — a sheet glued to the bottom edge of a large screen
           reads as a mobile artefact. Same markup and JS, different anchoring. */
        @media (min-width: 769px) {
            .bottom-sheet {
                top: 50%;
                bottom: auto;
                left: 50%;
                right: auto;
                width: min(560px, calc(100vw - 48px));
                max-width: none;
                border-radius: 24px;
                padding: 10px 24px 24px 24px;
                box-shadow: 0 30px 70px rgba(26, 25, 40, 0.28);
                transform: translate(-50%, -46%) scale(0.96);
                opacity: 0;
                pointer-events: none;
                visibility: hidden;
                transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease, visibility 0s linear 0.26s;
            }

            .bottom-sheet.open {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1;
                pointer-events: auto;
                visibility: visible;
                transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease, visibility 0s;
            }

            /* The drag handle only makes sense on a swipeable sheet. */
            .bottom-sheet .sheet-handle { display: none; }
        }

        .sheet-handle {
            width: 40px;
            height: 4px;
            border-radius: 4px;
            background: #DDDBEC;
            margin: 6px auto 16px auto;
        }

        .sheet-title {
            font-size: 18px;
            font-weight: 700;
            color: var(--text);
            margin: 0 0 4px 0;
        }

        .sheet-sub {
            font-size: 13px;
            color: var(--text-muted);
            margin: 0 0 18px 0;
        }

        .sheet-action {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 14px;
            background: var(--brand-20);
            border: none;
            border-radius: 18px;
            padding: 14px 16px;
            margin-bottom: 10px;
            cursor: pointer;
            text-align: left;
            transition: all 0.2s ease;
        }

        .sheet-action:active {
            transform: scale(0.98);
            background: var(--brand-50);
        }

        .sheet-action-icon {
            width: 44px;
            height: 44px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 17px;
            color: #fff;
            flex-shrink: 0;
        }

        .sheet-action-icon.help { background: var(--brand-600); }
        .sheet-action-icon.support { background: #00A87E; }

        .sheet-action-text {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-width: 0;
        }

        .sheet-action-title {
            font-size: 14px;
            font-weight: 700;
            color: var(--text);
        }

        .sheet-action-sub {
            font-size: 11.5px;
            color: var(--text-muted);
        }

        .sheet-action-chev {
            color: #C4C2DA;
            font-size: 12px;
            flex-shrink: 0;
        }

        .sheet-close {
            width: 100%;
            border: none;
            background: transparent;
            color: var(--text-muted);
            font-size: 14px;
            font-weight: 600;
            padding: 14px;
            margin-top: 4px;
            cursor: pointer;
        }

        /* ===== SHEET NAVIGATION (header, panes, actions) ===== */
        .sheet-header {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 2px 0 14px 0;
        }

        .sheet-back, .sheet-dismiss {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            border: none;
            background: var(--brand-50);
            color: var(--brand-600);
            font-size: 13px;
            cursor: pointer;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.15s ease, background 0.2s ease;
        }

        .sheet-back:active, .sheet-dismiss:active { transform: scale(0.9); }
        .sheet-back { visibility: hidden; }

        .sheet-heads { flex: 1; min-width: 0; }

        /* The viewport clips panes so a pane sliding in from the right is
           masked at the sheet edge rather than overflowing the screen. */
        /* Height is synced to the active pane by JS (syncSheetHeight).
           Stacked panes are absolutely positioned so they can share space
           during the slide transition, which means the viewport would
           otherwise only ever size itself to the FIRST pane and clip any
           taller sub-view. */
        /* Fixed, generous height so navigating between panes doesn't make
           the whole sheet grow and shrink under the user's thumb. Panes
           scroll internally instead. */
        .sheet-viewport {
            position: relative;
            overflow: hidden;
            height: 62vh;
            max-height: 460px;
            min-height: 300px;
        }

        .sheet-pane {
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            height: 100%;
            padding-right: 2px;
        }

        .sheet-pane {
            transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease;
        }

        /* Panes after the first are absolutely positioned so the incoming and
           outgoing panes can occupy the same space during the transition. */
        .sheet-pane + .sheet-pane {
            position: absolute;
            inset: 0;
            background: #ffffff;
        }

        .sheet-pane.entering {
            transform: translateX(100%);
            opacity: 0;
        }

        .sheet-pane.stacked {
            transform: translateX(-22%);
            opacity: 0;
        }

        .sheet-copy {
            font-size: 13.5px;
            line-height: 1.65;
            color: #5a5a72;
        }

        .sheet-copy p { margin: 0 0 10px 0; }
        .sheet-copy strong { color: var(--text); }

        .help-step {
            display: flex;
            gap: 12px;
            margin-bottom: 14px;
        }

        .help-step-num {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: var(--brand-100);
            color: var(--brand-600);
            font-size: 11px;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 1px;
        }

        .help-step strong { display: block; font-size: 13px; color: var(--text); margin-bottom: 2px; }
        .help-step p { margin: 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.55; }

        .help-tip {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            background: var(--brand-25);
            border-radius: 12px;
            padding: 12px 14px;
            margin-top: 6px;
            font-size: 12px;
            color: var(--text-muted);
        }

        .help-tip i { color: var(--brand-600); margin-top: 1px; }

        .sheet-action.is-added { opacity: 0.62; }

        .sheet-action-icon.tone-advanced  { background: var(--brand-600); }
        .sheet-action-icon.tone-technical { background: #B8790A; }
        .sheet-action-icon.tone-ordinary  { background: #1C8A4C; }
        .sheet-action-icon.tone-higher    { background: #E8590C; }
        .sheet-action-icon.tone-hnd        { background: #7B3FA0; }
        .sheet-action-icon.tone-others     { background: #546E7A; }

        a.sheet-action { text-decoration: none; }

        .sheet-btn {
            width: 100%;
            border: none;
            border-radius: 14px;
            padding: 14px;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            margin-bottom: 10px;
            transition: transform 0.15s ease;
        }

        .sheet-btn:active { transform: scale(0.98); }
        .sheet-btn.danger { background: #FFECEA; color: #C92A2A; }
        .sheet-btn.ghost { background: var(--line); color: #5a5a72; }

        /* Number picker used for "how many subjects" */
        .count-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
            gap: 10px;
        }

        .count-chip {
            border: none;
            background: var(--brand-50);
            color: var(--text);
            border-radius: 16px;
            padding: 16px 0;
            font-size: 17px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.18s ease;
        }

        .count-chip:active {
            transform: scale(0.94);
            background: var(--brand-500);
            color: #fff;
        }

        /* ===== TINTED FIELD GROUP (e.g. Parent / Guardian) ===== */
        .field-group {
            background: var(--brand-25);
            border: 1px solid var(--brand-150);
            border-radius: 20px;
            padding: 18px 16px 4px 16px;
            margin: 6px 0 18px 0;
        }

        .field-group-head {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 14px;
        }

        .field-group-icon {
            width: 40px;
            height: 40px;
            border-radius: 13px;
            background: var(--brand-600);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            flex-shrink: 0;
        }

        .field-group-title {
            display: block;
            font-size: 14px;
            font-weight: 700;
            color: var(--text);
        }

        .field-group-sub {
            display: block;
            font-size: 11.5px;
            color: var(--text-muted);
        }

        .field-group .form-control { background-color: #ffffff; }

        /* ===== MOBILE FIXED ACTION BAR =====
           The primary "next step" button on each tab is pinned to the
           viewport 15px above the bottom tab dock, so it never scrolls
           away. Tagged explicitly with .nav-action-bar rather than matched
           on utility classes, which is brittle. Hidden tabs are
           display:none so only the active tab's bar can ever be visible. */
        @media (max-width: 768px) {
            .nav-action-bar {
                position: fixed;
                left: 0;
                right: 0;
                width: 100%;
                max-width: 100vw;
                padding: 0 14px !important;
                bottom: calc(10px + 0px + env(safe-area-inset-bottom, 0px));
                z-index: 950;
                margin: 0 !important;
                /* The bar spans the full width but only the button itself
                   should be tappable, so taps either side pass through to
                   the content underneath. */
                pointer-events: none;
            }

            .nav-action-bar .btn-primary,
            .nav-action-bar .btn {
                width: 100%;
                pointer-events: auto;
                box-shadow: 0 10px 28px rgba(88, 73, 214, 0.45);
            }

            .nav-action-bar hr { display: none; }

            /* The button no longer takes up space in the flow, so the
               spacer divs before it become the scroll runway instead. */
            .tabcontent .tp-5.pt-5.mb-5,
            .tabcontent .pt-5.mb-5 {
                height: 80px;
            }
        }

        /* ===== PROGRESS BAR ===== */
        .progress-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1001;
            background: transparent;
            height: 4px;
        }
        
        @media (max-width: 768px) {
            .progress-wrapper {
                top: 60px;
            }
        }
        
        .progress-bar-line {
            height: 4px;
            background: var(--brand-600);
            background-size: 100% 100%;
            width: 0%;
            transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 0 4px 4px 0;
            box-shadow: 0 0 10px rgba(88, 73, 214, 0.4);
        }
        
        @keyframes shimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        
        /* ===== FIXED VERTICAL TABS - LEFT SIDE ===== */
        /* 2026-09-13 FIFTH same-day follow-up: `.main-wrapper`'s own
           max-width above went 1100 -> 1500px this same round, by direct
           instruction. This formula's 1200px reference was always the
           card's own width + a 100px buffer (1100 + 100 = 1200, keeping
           the rail comfortably clear of the card on every page) - so the
           reference is bumped by the same +100px relationship, 1200 ->
           1600px, rather than left at the old, now-too-narrow value
           (which would have let the wider card's edge push underneath
           this rail on most realistic screen widths, platform-wide, not
           just on the 13 tab-layout pages). -92px offset and the 12px
           floor are untouched - only the reference width changes. */
        .vertical-tabs-wrapper {
            position: fixed;
            left: max(12px, calc((100vw - 1380px) / 2 - 92px));
            top: 50%;
            transform: translateY(-50%);
            background: var(--brand-600);
            border-radius: 26px;
            padding: 14px 10px;
            box-shadow: 0 14px 32px rgba(88, 73, 214, 0.35);
            border: none;
            z-index: 1000; 
            display: flex;
            flex-direction: column;
            gap: 8px;
            max-height: 90vh;
            overflow-y: auto;
            overflow-x: hidden;
            width: 72px;
            align-items: center;
            transition: all 0.3s ease;
            pointer-events: auto;
        }
        
        @media (max-width: 768px) {
            /* 2026-09-18, quoted directly: "the bottom nav pill should be
               flush full width at the bottm no longer a pill flooding on
               mobile." Was a floating pill: bottom/left/right 14px with a
               22px radius, so the page showed through on all three sides.
               Now pinned flush to the bottom edge, full bleed, square
               corners. The safe-area inset stays in the bottom padding -
               without it the icons sit under the home indicator on a
               notched phone, which is worse than the gap it replaces.
               Desktop (the unscoped rule above, a fixed left-hand rail) is
               completely untouched. */
            .vertical-tabs-wrapper {
                position: fixed;
                bottom: 0;
                top: auto;
                left: 0;
                right: 0;
                transform: none;
                flex-direction: row;
                width: auto;
                max-height: none;
                border-radius: 0;
                padding: 8px 8px;
                padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
                gap: 4px;
                overflow-x: visible;
                overflow-y: hidden;
                box-shadow: var(--shadow-dock);
                border: none;
                justify-content: space-between;
                flex-wrap: nowrap;
                background: var(--brand-600);
            }
            
            .vertical-tabs-wrapper::-webkit-scrollbar {
                height: 0px;
            }
        }
        
        @media (max-width: 480px) {
            .vertical-tabs-wrapper {
                padding: 8px 6px;
                padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
                gap: 2px;
            }
        }
        
        .tab {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            background: #f8fafc;
            border-radius: 12px;
            padding: 4px;
        }
        
        /* ===== FIXED RIGHT SIDE ICONS - DESKTOP ===== */
        .vertical-icons-right {
            position: fixed;
            /* Sit just outside the 900px content column instead of a fixed
               220px, which used to overlap the form on ~1280-1400px screens
               and (at z-index 1000) intercept clicks on the fields beneath.
               2026-09-13 FIFTH same-day follow-up: 1200 -> 1600px reference,
               matching .vertical-tabs-wrapper's own update just above (same
               reasoning - .main-wrapper went 1100 -> 1500px this round, by
               direct instruction, so this formula's reference moves by the
               same +100px relationship it always had). -64px offset and the
               12px floor untouched. */
            right: max(12px, calc((100vw - 1380px) / 2 - 64px));
            top: 50%;
            transform: translateY(-50%);
            z-index: 1000;
            display: flex;
            flex-direction: column;
            gap: 16px;
            align-items: center;
            /* Only the icons themselves should be clickable — never the
               gaps between them. */
            pointer-events: none;
        }

        .vertical-icons-right > * { pointer-events: auto; }

        /* Below this width there is no room beside the form, so the rail
           would necessarily sit on top of it. */
        @media (max-width: 1260px) {
            .vertical-icons-right { display: none; }
        }
        
        @media (max-width: 768px) {
            .vertical-icons-right {
                display: none !important;
            }
        }
        
        .vertical-icons-right a {
            box-shadow: 0 3px 3px rgba(0, 0, 0, 0.12);
            text-decoration: none;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.9);
            position: relative;
            border: 1px solid #e8edf2;
        }
        
        .vertical-icons-right a i {
            font-size: 20px;
            transition: all 0.3s ease;
        }
        
        .vertical-icons-right a:hover {
            transform: scale(1.15) translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
        
        .vertical-icons-right a .tooltip,
        .rail-dark-toggle .tooltip {
            display: none;
            position: absolute;
            right: 52px;
            background: #2c3e50;
            color: white;
            padding: 6px 14px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            white-space: nowrap;
        }
        
        .vertical-icons-right a:hover .tooltip,
        .rail-dark-toggle:hover .tooltip {
            display: block;
        }

        .rail-dark-toggle {
            position: relative;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: none;
            background: var(--surface);
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: var(--text-muted);
        }

        .rail-dark-toggle:hover { color: var(--brand-600); }
        
        .vertical-icons-right a:nth-child(1) i { color: #3498db; }
        .vertical-icons-right a:nth-child(1):hover { background: #ebf5fb; border-color: #3498db; }
        .vertical-icons-right a:nth-child(2) i { color: #e74c3c; }
        .vertical-icons-right a:nth-child(2):hover { background: #fdedec; border-color: #e74c3c; }
        .vertical-icons-right a:nth-child(3) i { color: #2ecc71; }
        .vertical-icons-right a:nth-child(3):hover { background: #eafaf1; border-color: #2ecc71; }
        .vertical-icons-right a:nth-child(4) i { color: #9b59b6; }
        .vertical-icons-right a:nth-child(4):hover { background: #f4ecf7; border-color: #9b59b6; }
        
        .vertical-tabs-wrapper::-webkit-scrollbar {
            width: 2px;
        }
        
        .vertical-tabs-wrapper::-webkit-scrollbar-thumb {
            background: var(--brand-600);
            border-radius: 10px;
        }
        
        .vertical-tab {
            width: 54px;
            height: 54px;
            border: none;
            border-radius: 16px;
            background: transparent;
            color: rgba(255, 255, 255, 0.55);
            font-size: 10px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            padding: 6px 4px;
            position: relative;
            text-align: center;
            line-height: 1.1;
            min-height: 50px;
            flex-shrink: 0;
        }
        
        .vertical-tab i {
            font-size: 18px;
            transition: all 0.3s ease;
        }
        
        .vertical-tab .tab-label {
            font-size: 7px;
            font-weight: 600;
            letter-spacing: 0.2px;
            text-transform: uppercase;
            opacity: 0.7;
            line-height: 1;
        }
        
        @media (max-width: 768px) {
            /* Shorter bar (less top/bottom padding) but bigger icons — the
               height reduction comes from tighter padding, not from
               shrinking the icon itself. */
            .vertical-tab {
                width: auto;
                flex: 1 1 0;
                height: 48px;
                min-height: 44px;
                flex-shrink: 1;
                font-size: 8px;
                padding: 4px 2px;
                border-radius: 12px;
                background: transparent;
            }
            
            .vertical-tab i {
                font-size: 23px;
            }

            /* Sep 2026 "make the text more visible and bigger too" - this
               label used to inherit the base .tab-label rule's 7px/opacity:
               0.7 (see above) then get shrunk further to 6.5/6/5px across
               these three breakpoints - unreadably small on an actual phone.
               Bumped up and opacity raised to near-solid at every one of
               these three mobile sizes, not just this one, since the
               complaint was about the mobile dock specifically. */
            .vertical-tab .tab-label {
                font-size: 10px;
                opacity: 0.95;
                display: block;
            }

            .vertical-tab.gactive {
                transform: scale(1);
            }
        }

        @media (max-width: 480px) {
            .vertical-tab {
                height: 52px;
                min-height: 46px;
                padding: 4px 2px;
                border-radius: 10px;
            }

            .vertical-tab i {
                font-size: 17px;
            }

            .vertical-tab .tab-label {
                font-size: 9.5px;
                opacity: 0.95;
                display: block;
            }
        }

        @media (max-width: 380px) {
            .vertical-tab {
                height: 46px;
                min-height: 42px;
                padding: 3px 2px;
                gap: 1px;
            }

            .vertical-tab i {
                font-size: 15px;
            }

            .vertical-tab .tab-label {
                font-size: 9px;
                opacity: 0.95;
                display: block;
            }
        }
        
        .vertical-tab:hover:not(.disabled):not(.gactive) {
            background: rgba(255, 255, 255, 0.14);
            color: #ffffff;
        }
        
        .vertical-tab:hover:not(.disabled):not(.gactive) i {
            transform: scale(1.08);
        }
        
        .vertical-tab.gactive {
            background: transparent;
            color: #ffffff;
        }
        
        .vertical-tab.gactive i {
            color: #ffffff;
        }

        /* Small dash under the icon to mark the current tab, instead of a
           background chip — keeps the whole dock reading as one flat
           surface with just color + a tiny indicator doing the work. */
        .vertical-tab.gactive::before {
            content: '';
            position: absolute;
            bottom: 6px;
            left: 50%;
            transform: translateX(-50%);
            width: 16px;
            height: 3px;
            border-radius: 3px;
            background: #ffffff;
        }

        @media (max-width: 768px) {
            /* 2026-09-14, quoted directly: "can we make the edging alittle
               round on these edges: the 90 degrees edges to be alittle
               rounded rather than 90 degrees direct." Simply giving the
               active icon's top corners a small border-radius (like the
               6px used elsewhere in this round) does NOT work here the
               way it does everywhere else: this icon is NARROWER than the
               tab strip sitting flush above it, so rounding the icon's own
               top corners cuts two small triangular notches out of the
               icon's own background - and since the strip's bottom edge
               stops exactly at the icon's top edge (by design, per the
               "no purple separation" round), nothing else covers those
               two notches, and the dock's purple shows through them.
               Verified this directly via pixel-sampling a zoomed
               screenshot before committing to a fix - a plain small
               radius is not an option here, unlike the strip's own far
               corners (see app-extra.css) or the icon's own BOTTOM
               corners (nothing narrower sits below the icon, so a normal
               radius there was always safe).
               The fix is the standard "concave corner" technique for
               exactly this wide-flows-into-narrow shape: two small
               (6px) masks, one per corner, each a radial-gradient that's
               fully transparent within a 6px circle centered on the
               icon's own rounding origin (so the icon's real, already-
               rounded corner shows through untouched) and fully filled
               with the strip's own gray everywhere else in that same 6px
               square - i.e. exactly the two triangular notches that were
               showing purple, and nowhere else. Combined with the icon's
               own convex 6px curve, this reads as one smooth, continuous
               curve flowing from the wide strip down into the narrow
               icon, with the actual "rounding" visually happening in the
               gray, not in a gap.
               This repurposes ::before (previously the small active-tab
               dash indicator, mobile-only) for the LEFT corner mask, and
               adds ::after (previously unused on this element) for the
               RIGHT one - the dash itself is dropped on mobile only,
               since the active icon's entire chip (background + text
               color, from the two follow-ups above) already reads as
               "this one's active" far more clearly than the small dash
               ever did on its own; desktop's dash (the unscoped ::before
               rule above, transparent background, no chip) is completely
               untouched, since it's the ONLY active-state indicator
               there and still needed. */
            .vertical-tab.gactive::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: auto;
                bottom: auto;
                transform: none;
                width: 6px;
                height: 6px;
                /* Implemented as a plain solid box with border-radius
                   clipping ONE of its own corners, not a radial-gradient -
                   the two are mathematically equivalent (both fill
                   everywhere except a 6px quarter-circle nearest the
                   icon's own curve center). Either form renders correctly
                   here at every dock position (first/middle/last icon,
                   confirmed by direct pixel-sampling of screenshots).
                   An earlier pass suspected a position-specific rendering
                   bug in the LAST dock icon after a pixel-sampling test
                   found dock-purple in this corner's zone there - tracked
                   down to the TEST, not the CSS: getBoundingClientRect()
                   returns a sub-pixel float for the icon's own edge (e.g.
                   x=254.65625), and the browser's actual paint snaps that
                   fractional edge to a device pixel that can land ~0.2px
                   away from where naive Math.round() sampling looks -
                   reproduced identically by scanning the icon's own FLAT
                   body edge, far from any corner or mask, on an ordinary
                   icon with no mask at all. That single edge-pixel
                   ambiguity is a property of any sub-pixel box boundary in
                   the browser and is unrelated to this CSS; the corner
                   mask itself was re-verified clean (zero purple in the
                   corner's interior) at every position once the test
                   stopped sampling exactly on that ambiguous edge. */
                background: var(--fd-card-bg);
                border-radius: 0 0 6px 0;
            }

            .vertical-tab.gactive::after {
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                width: 6px;
                height: 6px;
                background: var(--fd-card-bg);
                border-radius: 0 0 0 6px;
            }

            /* Mobile-only: gives the active dock icon its own light-gray
               "chip" background (app-extra.css's mobile #fdToolTabGrid then
               reuses this exact same --fd-card-bg token as the tab strip's
               own background) so the active icon visually "owns" the tab
               row beneath it, per the user's own words above. Scoped to
               mobile only - the desktop rail's .gactive (unscoped rule
               above: transparent + white, dash-only) is untouched, since
               this was asked for "for the mobile view" specifically.
               FOLLOW-UP, quoted directly: "one can still observe that
               these are two different items or blocks. it should feel
               like a continuous flow... one continuous block or body."
               Even with zero purple gap and matching colors, this chip's
               own rounded TOP corners (inherited from the base
               .vertical-tab rule's border-radius, same on all 4 corners)
               created a visible "pinch" right where it meets the tab
               strip's flat bottom edge above it - two independently-
               rounded shapes touching still reads as two stacked blobs,
               not one shape. Flattening just the top-left/top-right
               corners here removes that curve, so the chip's now-straight
               top edge continues the strip's own straight bottom edge
               with no visual break - one continuous silhouette from the
               strip down into the chip. Bottom corners keep their normal
               rounding (matches the resting, unselected icons' own shape,
               so the chip still looks like it belongs to this row when
               looked at on its own). FOLLOW-UP, quoted directly: "can we
               make the edging alittle round on these edges: the 90 degrees
               edges to be alittle rounded rather than 90 degrees direct."
               A hard 0 was more literal than needed - a SMALL 6px
               rounding (paired with the same 6px on #fdToolTabGrid's own
               now-square bottom corners, app-extra.css) still reads as one
               continuous surface at this scale, just with a softer edge
               instead of a razor-sharp right angle. Kept well below the
               12-18px radii that caused the original "two blobs" pinch -
               verified via pixel-sampling (same method as the shadow fix)
               that no sliver of the dock's purple reappears in this
               corner at 6px. */
            .vertical-tab.gactive {
                background: var(--fd-card-bg);
                color: var(--brand-600);
                border-radius: 6px 6px 12px 12px;
            }

            .vertical-tab.gactive i {
                color: var(--brand-600);
            }
        }
        
        .vertical-tab.completed:not(.gactive) i {
            color: #4ADE80;
        }
        
        .vertical-tab.gactive.completed i {
            color: #ffffff;
        }
        
        .vertical-tab.disabled {
            opacity: 0.35;
            cursor: not-allowed !important;
            pointer-events: none !important;
        }
        
        .vertical-tab.disabled:hover {
            background: transparent !important;
        }
        
        .vertical-tab.skippable {
            border: 2px dashed #f39c12;
        }
        
        .vertical-tab.skippable::before {
            content: '⏭';
            position: absolute;
            top: -8px;
            right: -8px;
            font-size: 12px;
            background: #f39c12;
            color: white;
            border-radius: 50%;
            width: 18px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 9px;
            border: 2px solid white;
        }

        /* ===== MAIN CONTAINER ===== */
        .content-body1 {
            position: relative;
            z-index: 1;
        }

        @media (min-width: 769px) {
            /* Sep 2026 (undo of a same-day earlier change): a fixed-height,
               internally-scrolling .main-wrapper ("20px away from top and
               bottom") turned out not to be what was wanted - reverted.
               What's kept is just this: .content-body1 has min-height (not
               a fixed height) so it still centers .main-wrapper vertically
               when the page's own content is shorter than the viewport
               (empty space evenly above/below, instead of everything
               pinned to the top with a dead zone at the bottom) - but
               because it's min-height, a page whose content is TALLER than
               the viewport simply grows past it and the whole page scrolls
               normally, exactly like before any of this - centering never
               fights a long page's own scroll.
               2026-09-14 follow-up, quoted directly: "increase the height
               of the main wrapper so that its 40px away from the top and
               bottom of the screen minimun then can grow if there is more
               content naturally." `calc(100vh - 40px)` split its 40px
               across BOTH edges via the flex centering below (~20px top +
               ~20px bottom for a short page) - that's now 40px per edge,
               80px total, so a short page's wrapper sits a full 40px clear
               of the top and bottom of the viewport at minimum. Still
               min-height, not height, so nothing here caps growth - a
               page whose content needs more than `100vh - 80px` simply
               grows past it exactly as before, scrolling normally. */
            .content-body1 {
                min-height: calc(100vh - 80px);
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .main-wrapper {
                width: 100%;
            }
        }

        /* 2026-09-13 FIFTH same-day follow-up, quoted directly: "also
           update this on the tempate-exact: .main-wrapper { max-width:
           1500px; margin: 0 auto; position: relative; z-index: 1;
           padding-top: 8px; }." A direct, explicit instruction to edit
           THIS file - app-extra.css's own long-standing rule up to this
           round was "never touch template-exact.css, it's the vendor
           template extracted verbatim"; that rule existed to protect the
           ~50 other pages that share this class from an app-specific
           feature's side effects, not to block a genuine, deliberate
           platform-wide change the user asks for directly on the
           template itself. 1100 -> 1500px, exactly the values given,
           applies to literally every page platform-wide now (the
           previous per-page `.fd-wide-wrapper` opt-in this round retires
           - see app-extra.css and header.php's own dated comments -
           since this default is now equal to or wider than what that
           opt-in used to provide). Because the nav rail/right-icon
           formulas just below this rule hardcode a reference tied to the
           OLD 1100px width, they are updated in the same round, right
           below - leaving them untouched would have made the rail/icons
           overlap the new, much wider card on literally every page. */
        /* 2026-09-22 (thirty-ninth follow-up), quoted directly: "on desktop
           reduce the mqin-wrapper width its alittle too wide." 1500 ->
           1280px. The two fixed rail formulas below keep their
           long-standing "card width + 100px" relationship (1600 -> 1380px)
           and the right-rail's own hide breakpoint keeps its "card width -
           20px" one (1480 -> 1260px), so a narrower card does not leave
           the rails floating far out in the margin. */
        .main-wrapper {
            max-width: 1280px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
            padding-top: 8px;
        }
        
        @media (max-width: 768px) {
            .main-wrapper {
                padding-top: 0;
            }
        }
        
        .form-container {
            background: #ffffff;
            border-radius: 28px;
            box-shadow: 0 20px 50px -20px rgba(88, 73, 214, 0.25);
            padding: 36px 32px;
            max-width: 100%;
            overflow: hidden;
            position: relative;
        }
        
        @media (max-width: 768px) {
            .form-container {
                padding: 22px 16px;
                border-radius: 0;
                box-shadow: none;
            }
        }
        
        /* ===== FORM ELEMENTS =====
           Sep 2026: was a 40px capsule - "reduce border-radius on all input
           fields and buttons so it's less round" (10px), then "increase it
           just a tiny bit more" in a same-day follow-up (14px). */
        .form-control {
            border-radius: 14px !important;
            border: 2px solid var(--bg) !important;
            padding: 12px 16px;
            transition: all 0.3s ease;
            font-size: 14px;
            width: 100%;
            max-width: 100%;
            background-color: var(--bg) !important;
             height: 50px !important;
            
        }
        
        select.form-control {
            padding-right: 40px;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235a6c7d' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
            background-repeat: no-repeat !important;
            background-position: right 16px center !important;
            background-size: 12px 12px !important;
            cursor: pointer;
        }
        
        select.form-control:focus {
            border-color: transparent;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23008080' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
        }
        
        input.form-control {
            background-image: none !important; 
            padding-right: 16px;
           
        }
        
        input.form-control[type="number"] {
            -moz-appearance: textfield;
        }
        
        input.form-control[type="number"]::-webkit-outer-spin-button,
        input.form-control[type="number"]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        
        /* Active/focused inputs: no visible border box, just a soft background
           tint + bottom accent line so the field doesn't look "boxed in". */
        .form-control {
            
            background-color: #F5F5FF;
            border-radius: 14px 14px 8px 8px;
        }
        
        .form-control:focus {
            outline: none;
            border-color: transparent;
            background-color: #ffffff;
            border-bottom: 2px solid var(--brand-500);
            box-shadow: 0 4px 14px rgba(88, 73, 214, 0.12);
        }
        
        /* iOS/Safari render date inputs with their own intrinsic height and
           inline layout, which made the DOB field visibly shorter than its
           siblings. Normalising these three properties makes a native date
           picker size identically to a plain text input. */
        input[type="date"].form-control {
            -webkit-appearance: none;
            appearance: none;
            display: block;
            width: 100%;
            min-height: 46px;
            line-height: normal;
        }

        input[type="date"].form-control::-webkit-date-and-time-value { text-align: left; }
        input[type="date"].form-control::-webkit-calendar-picker-indicator {
            opacity: 0.55;
            cursor: pointer;
        }

        .form-control::placeholder {
            color: #9B9AB3;
        }

        /* ===== ICON-INSIDE-INPUT ===== */
        /* Applied automatically by JS (see moveLabelIconsIntoInputs near the
           bottom of the page) which relocates each label's icon into the
           field itself, rather than needing every field's markup edited
           by hand. */
        .input-icon-wrap {
            position: relative;
        }

        .input-icon-wrap .input-icon {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: #9B9AB3;
            font-size: 14px;
            pointer-events: none;
            transition: color 0.2s ease;
            z-index: 1;
        }

        .input-icon-wrap:focus-within .input-icon {
            color: var(--brand-500);
        }

        .form-control.has-icon {
            padding-left: 42px !important;
        }

        /* ===== IN-BUTTON SPINNER =====
           Replaces the full-screen overlay for step saves: feedback appears
           on the control the user actually pressed. */
        .btn-spinner {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            border: 2px solid rgba(255,255,255,0.35);
            border-top-color: #fff;
            display: inline-block;
            vertical-align: -2px;
            margin-right: 8px;
            animation: spin 0.7s linear infinite;
        }

        .btn.is-busy, .btn-primary.is-busy {
            opacity: 0.9;
            cursor: progress;
        }

        /* ===== DESKTOP RAIL PROFILE AVATAR ===== */
        .rail-profile { position: relative; overflow: hidden; }

        .rail-profile img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
            position: absolute;
            inset: 0;
        }

        /* ===== MENU SHEET ===== */
        .menu-profile {
            display: flex;
            align-items: center;
            gap: 12px;
            background: var(--brand-25);
            border-radius: var(--r-md);
            padding: 12px 14px;
            margin-bottom: 10px;
        }

        .menu-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            overflow: hidden;
            flex-shrink: 0;
            background: var(--grad-brand);
        }

        .menu-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

        .menu-profile-text { display: flex; flex-direction: column; min-width: 0; }
        .menu-profile-name { font-size: 14px; font-weight: 700; color: var(--text); }
        .menu-profile-sub { font-size: 11.5px; color: var(--text-muted); }

        .menu-note {
            display: flex;
            align-items: center;
            gap: 11px;
            background: var(--warn-bg);
            border-radius: var(--r-md);
            padding: 11px 14px;
            margin-bottom: 12px;
        }

        .menu-note-ic {
            width: 34px;
            height: 34px;
            border-radius: 11px;
            background: var(--warn);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            flex-shrink: 0;
        }

        .menu-note-title { display: block; font-size: 12.5px; font-weight: 700; color: var(--text); }
        .menu-note-sub { display: block; font-size: 11.5px; color: var(--text-muted); }

        .menu-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            margin-bottom: 14px;
        }

        .menu-tile {
            border: none;
            background: var(--brand-20);
            border-radius: var(--r-md);
            padding: 12px 4px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            font-size: 10.5px;
            font-weight: 600;
            color: var(--text);
            cursor: pointer;
            transition: transform 0.15s ease, background 0.2s ease;
        }

        .menu-tile:active { transform: scale(0.95); background: var(--brand-50); }

        .menu-tile-ic {
            width: 36px;
            height: 36px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 14px;
        }

        /* Program-type toggle reuses the gender toggle's shape. */
        /* Program-type toggle: same pill styling as the gender toggle, but laid
           out horizontally with the three options sharing the width evenly. */
        .program-toggle {
            flex-direction: row;
            max-width: 100%;
        }
        
        .program-toggle label {
            flex: 1 1 0;              /* equal widths regardless of label length */
            justify-content: center;  /* base rule left-aligns; centre instead */
            text-align: center;
            gap: 8px;
            padding: 12px 8px;
            font-size: 12.5px;
        }
        
        .program-toggle label i:first-child {
            width: auto;              /* drop the fixed 22px icon gutter */
        }
        
        /* The tick is pinned right in the vertical layout; centre it inline here. */
        .program-toggle label .gender-check {
            margin-left: 0;
            font-size: 12px;
        }
        
        /* Three options side-by-side get cramped on a phone, so stack them back up. */
        @media (max-width: 560px) {
            .program-toggle { flex-direction: column; }
            .program-toggle label {
                justify-content: flex-start;
                text-align: left;
                padding: 13px 16px;
                font-size: 13.5px;
            }
            .program-toggle label .gender-check { margin-left: auto; }
        }

        /* ===== UPLOAD BUTTON =====
           Deliberately styled as a dashed "drop zone" pill rather than a
           solid pill, so it can never be mistaken for a Save/Continue
           action. Solid + brand-filled = progresses the form; dashed +
           tinted = attaches a file. */
        .btn-upload {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            max-width: 360px;
            background: var(--brand-25);
            border: 1.5px dashed var(--brand-200);
            border-radius: 12px;
            padding: 11px 14px;
            font-size: 13px;
            font-weight: 600;
            color: var(--brand-600);
            cursor: pointer;
            text-align: left;
            transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
        }

        .btn-upload:hover { background: var(--brand-50); border-color: var(--brand-500); }
        .btn-upload:active { transform: scale(0.985); }

        .btn-upload-ic {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--brand-100);
            color: var(--brand-600);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            flex-shrink: 0;
        }

        .btn-upload-label {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .btn-upload.is-uploading { border-style: solid; border-color: var(--brand-500); }
        .btn-upload.is-uploading .btn-upload-ic { animation: upPulse 1s ease-in-out infinite; }

        @keyframes upPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }

        .btn-upload.is-done {
            border-style: solid;
            border-color: var(--ok);
            background: var(--ok-bg);
            color: var(--ok);
        }
        .btn-upload.is-done .btn-upload-ic { background: var(--ok); color: #fff; }
        .btn-upload.is-done .btn-upload-ic i::before { content: "\f00c"; }

        .btn-upload.is-error {
            border-style: solid;
            border-color: var(--err);
            background: var(--err-bg);
            color: var(--err);
        }
        .btn-upload.is-error .btn-upload-ic { background: var(--err); color: #fff; }

        /* Progress track sits directly under its own button. */
        .upload-progress {
            width: 100%;
            max-width: 360px;
            height: 4px;
            background: var(--brand-100);
            border-radius: var(--r-pill);
            overflow: hidden;
            margin-top: 7px;
            display: none;
        }

        .upload-progress.active { display: block; }

        .upload-progress-bar {
            height: 100%;
            width: 0%;
            border-radius: var(--r-pill);
            background: var(--grad-brand);
            transition: width 0.2s ease;
        }

        .btn-upload.is-done ~ .upload-progress .upload-progress-bar { background: var(--ok); }

        /* ===== BUTTONS =====
           Sep 2026: were 999px capsules - reduced everywhere in this block
           per "less round" ask. */
        .btn-primary {
            background: var(--brand-600);
            border: none;
            border-radius: 14px;
            padding: 13px 32px;
            font-weight: 600;
            font-size: 14px;
            color: white;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 8px 20px rgba(88, 73, 214, 0.3);
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 24px rgba(88, 73, 214, 0.4);
            background: var(--brand-700);
            color: white;
        }

        .btn-primary:active {
            transform: translateY(0) scale(0.97);
        }
        
        /* The single biggest CTA moment in the app (final Submit) — the
           reference keeps one consistent accent color throughout rather
           than switching hues, so this stays indigo too, just deeper. */
        .btn-cta-coral {
            background: var(--brand-700) !important;
            box-shadow: 0 10px 28px rgba(76, 63, 204, 0.4) !important;
            border-radius: 14px !important;
        }

        .btn-cta-coral:hover {
            background: var(--brand-800) !important;
            box-shadow: 0 14px 34px rgba(76, 63, 204, 0.5) !important;
        }

        .btn-sm-add {
            background: var(--brand-600);
            color: white;
            border: none;
            border-radius: 14px;
            padding: 8px 18px;
            font-weight: 600;
            font-size: 12px;
            transition: all 0.3s ease;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        
        .btn-sm-add:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(88, 73, 214, 0.3);
            color: white;
        }
        
        .btn-skip {
            background: #e67e22;
            border: none;
            border-radius: 10px;
            padding: 12px 35px;
            font-weight: 600;
            font-size: 14px;
            color: white;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(243, 156, 18, 0.3);
        }
        
        .btn-skip:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 30px rgba(243, 156, 18, 0.4);
            color: white;
        }
        
        /* ===== PHOTO UPLOAD ===== */
        .photo-upload-container {
            width: 100%;
            max-width: 160px;
            margin: 0 auto;
            position: relative;
        }
        
        .photo-preview {
            width: 160px;
            height: 160px;
            border-radius: 50%;
            border: 4px solid #e8edf2;
            overflow: hidden;
            background: #f8fafc;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            margin: 0 auto;
            position: relative;
            cursor: pointer;
        }
        
        .photo-preview:hover {
            border-color: var(--brand-600);
            box-shadow: 0 8px 30px rgba(88, 73, 214, 0.15);
        }
        
        .photo-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .photo-preview .upload-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: all 0.3s ease;
            border-radius: 50%;
        }
        
        .photo-preview:hover .upload-overlay {
            opacity: 1;
        }
        
        .photo-preview .upload-overlay i {
            color: white;
            font-size: 28px;
        }
        
        .photo-upload-input {
            display: none;
        }
        
        /* ===== DOCUMENT UPLOAD — pastel stat-capsule tiles ===== */
        .doc-upload-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 14px;
            margin: 20px 0;
        }

        /* On desktop there are only 3 general documents — let them size to
           content and centre as a group instead of stretching to fill the
           whole row edge-to-edge. */
        @media (min-width: 769px) {
            .doc-upload-grid {
                grid-template-columns: repeat(3, 176px);
                justify-content: center;
            }
        }
        
        .doc-card {
            background: var(--brand-100);
            border: none;
            border-radius: 28px;
            padding: 20px 12px 16px 12px;
            text-align: center;
            transition: all 0.25s ease;
            cursor: pointer;
            position: relative;
            min-height: 150px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
        }

        /* Per-document pastel colors, matching the reference's rotating
           lavender / salmon / cream status-card palette */
        .doc-card.doc-birth { background: #FFD9D6; }
        .doc-card.doc-birth .doc-icon { color: #E8590C; }
        .doc-card.doc-id { background: var(--brand-100); }
        .doc-card.doc-id .doc-icon { color: var(--brand-600); }
        .doc-card.doc-extra { background: #FFEFC2; }
        .doc-card.doc-extra .doc-icon { color: #B8790A; }
        
        .doc-card:hover {
            transform: translateY(-3px);
        }
        
        .doc-card.uploaded {
            background: #CFF3DD;
        }
        .doc-card.uploaded .doc-icon { color: #1C8A4C; }
        
        .doc-card .doc-optional-badge {
            position: absolute;
            top: 10px;
            left: 10px;
            background: rgba(255,255,255,0.7);
            color: #5a6c7d;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.3px;
            text-transform: uppercase;
            padding: 3px 8px;
            border-radius: 20px;
        }
        
        .doc-card .doc-icon {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(255,255,255,0.85);
            font-size: 18px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .doc-card .doc-name {
            font-size: 12px;
            font-weight: 700;
            color: var(--text);
            word-break: break-word;
            max-width: 100%;
        }
        
        .doc-card .doc-status {
            font-size: 10.5px;
            color: rgba(43, 42, 61, 0.55);
            margin-top: 3px;
        }
        
        .doc-card .doc-status.uploading {
            color: #B8790A;
        }
        
        .doc-card .doc-status.done {
            color: #1C8A4C;
            font-weight: 700;
        }
        
        .doc-card .doc-status.error {
            color: #d6336c;
        }
        
        .doc-card .progress-bar-container {
            width: 100%;
            height: 4px;
            background: rgba(255,255,255,0.6);
            border-radius: 4px;
            margin-top: 8px;
            overflow: hidden;
            display: none;
        }
        
        .doc-card .progress-bar-container.active {
            display: block;
        }
        
        .doc-card .progress-bar {
            height: 100%;
            background: var(--text);
            border-radius: 4px;
            width: 0%;
            transition: width 0.3s ease;
        }
        
        .doc-card .doc-check {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #22C55E;
            color: #fff;
            font-size: 12px;
            display: none;
            align-items: center;
            justify-content: center;
        }
        
        .doc-card.uploaded .doc-check {
            display: flex;
        }
        
        .doc-card input[type="file"] {
            display: none;
        }
        
        /* ===== OTHER STYLES ===== */
        .switch-container {
            display: flex;
            align-items: center;
            gap: 15px;
            margin: 15px 0;
            padding: 15px 20px;
            background: #f8fafc;
            border-radius: 12px;
            border: 1px solid #e8edf2;
        }
        
        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 26px;
            flex-shrink: 0;
        }
        
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 34px;
        }
        
        .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }
        
        input:checked + .slider {
            background-color: var(--brand-600);
        }
        
        input:checked + .slider:before {
            transform: translateX(24px);
        }
        
        .styled-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            margin: 20px 0;
            font-size: 13px;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 2px 15px rgba(88, 73, 214, 0.06);
        }
        
        .styled-table thead tr {
            background: var(--brand-600);
            color: #ffffff;
        }
        
        .styled-table th, .styled-table td {
            padding: 12px 16px;
        }
        
        .styled-table tbody tr:nth-of-type(even) {
            background-color: var(--brand-20);
        }
        
        .styled-table tbody tr:hover {
            background-color: var(--brand-50);
        }

        /* ===== REVIEW PAGE ===== */
        /* ===== REVIEW PAGE: COMPACT TABLES ===== */
        .rv-id {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            padding: 16px 18px;
            border-radius: 20px;
            background: var(--brand-600);
            margin-bottom: 12px;
        }

        /* ~1/4 of the row, with a sane floor/ceiling so it stays sensible
           on very small and very wide screens. */
        .rv-id-photo {
            flex: 0 0 34%;
            max-width: 230px;
            min-width: 130px;
            aspect-ratio: 1 / 1;
            border-radius: 20px;
            border: 3px solid rgba(255,255,255,0.45);
            background: #fff;
            overflow: hidden;
        }

        .rv-id-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* Key facts shown inside the summary band itself. */
        .rv-sum-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
            gap: 6px 14px;
            margin-top: 10px;
        }

        .rv-sum-row { display: flex; flex-direction: column; min-width: 0; }

        .rv-sum-k {
            font-size: 9.5px;
            font-weight: 700;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            color: rgba(255,255,255,0.7);
        }

        .rv-sum-v {
            font-size: 12.5px;
            font-weight: 600;
            color: #fff;
            word-break: break-word;
        }

        /* Subject tables (one per qualification) */
        .sj-wrap { padding: 4px 12px 10px 12px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

        .sj-caption {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 6px;
            font-size: 11.5px;
            font-weight: 700;
            color: var(--text);
        }

        .sj-table { width: 100%; border-collapse: collapse; }

        .sj-table td {
            padding: 7px 10px;
            font-size: 12.5px;
            border-top: 1px solid var(--line);
        }

        .sj-table tr:first-child td { border-top: none; }
        .sj-name { color: var(--text); font-weight: 600; }
        .sj-grade { width: 64px; text-align: right; }

        .sj-pill {
            display: inline-block;
            min-width: 30px;
            text-align: center;
            border-radius: var(--r-pill);
            padding: 2px 9px;
            font-size: 11.5px;
            font-weight: 800;
        }

        .rv-id-text { min-width: 0; }

        .rv-id-eyebrow {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.7px;
            text-transform: uppercase;
            color: rgba(255,255,255,0.78);
        }

        .rv-id-name {
            font-size: clamp(28px, 5.2vw, 46px);
            font-weight: 800;
            line-height: 1.08;
            letter-spacing: -0.6px;
            color: #fff;
            margin: 4px 0 10px 0;
            word-break: break-word;
        }

        .rv-id-meta {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            font-weight: 600;
            color: #fff;
            background: rgba(255,255,255,0.18);
            border-radius: 20px;
            padding: 4px 10px;
        }

        /* Collapsible panels keep the page short by default while still
           letting every value be inspected. */
        .rv-panel {
            border: 1px solid var(--brand-150);
            border-radius: 16px;
            margin-bottom: 8px;
            overflow: hidden;
            background: #fff;
        }

        .rv-panel-head {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 11px 14px;
            background: var(--brand-15);
            border: none;
            cursor: pointer;
            text-align: left;
        }

        .rv-panel-icon {
            width: 26px;
            height: 26px;
            border-radius: 9px;
            background: var(--brand-150);
            color: var(--brand-600);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            flex-shrink: 0;
        }

        .rv-panel-title {
            flex: 1;
            font-size: 12.5px;
            font-weight: 700;
            color: var(--text);
        }

        .rv-panel-badge {
            font-size: 10.5px;
            font-weight: 700;
            color: var(--brand-600);
            background: var(--brand-150);
            border-radius: 20px;
            padding: 2px 8px;
        }

        .rv-panel-chev {
            font-size: 11px;
            color: var(--text-faint);
            transition: transform 0.25s ease;
        }

        .rv-panel.collapsed .rv-panel-chev { transform: rotate(180deg); }
        .rv-panel.collapsed .rv-panel-body { display: none; }

        .rv-table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
        }

        .rv-table th,
        .rv-table td {
            padding: 9px 12px;
            font-size: 12.5px;
            vertical-align: top;
            border-top: none;
            word-break: break-word;
        }

        .rv-table tr:nth-child(even) { background: var(--brand-15); border-radius: 10px; }

        .rv-table th {
            width: 26%;
            font-weight: 500;
            color: var(--text-muted);
            text-align: left;
        }

        .rv-table td {
            width: 24%;
            font-weight: 600;
            color: var(--text);
        }

        .rv-table tr.rv-wide td { width: auto; }

        /* Single-column variant (Desired Field): label left, value right,
           full width, no pairing. */
        .rv-table.rv-single th { width: 42%; }
        .rv-table.rv-single td { width: 58%; }

        /* ===== GROUPED BAND (Desired Field choices, Higher Ed within
           Academic History) — same visual language as the gender toggle:
           a light tinted outer surface with a white card sitting on top
           of it, just used here as static grouping rather than a toggle. */
        .fc-wrap {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 4px 0 8px 0;
        }

        .fc-block {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            background: var(--brand-25);
            border-radius: 16px;
            padding: 10px;
        }

        /* Higher Education entries (Bachelor's/Master's, HND) get a distinct
           warm tint so they read as clearly different from school-level
           qualifications (O Level / A Level), which stay on the default
           indigo tint. */
        .fc-block.fc-block-highered {
            background: #FFF3E9;
        }

        .fc-block-badge {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: var(--brand-600);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 800;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .fc-block.fc-block-highered .fc-block-badge { background: #E8590C; }
        .fc-block-badge-icon { font-size: 11px; }

        .fc-block-card {
            flex: 1;
            min-width: 0;
            background: #ffffff;
            border-radius: 12px;
            padding: 10px 14px;
            box-shadow: 0 2px 8px rgba(88, 73, 214, 0.06);
        }

        .fc-block-title {
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.4px;
            text-transform: uppercase;
            color: var(--brand-600);
            margin-bottom: 6px;
        }

        .fc-block.fc-block-highered .fc-block-title { color: #E8590C; }

        .fc-row {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 12px;
            padding: 5px 0;
        }

        .fc-row-label {
            font-size: 11.5px;
            color: var(--text-muted);
            flex-shrink: 0;
        }

        .fc-row-value {
            font-size: 13px;
            font-weight: 700;
            color: var(--text);
            text-align: right;
            word-break: break-word;
        }

        .rv-table .rv-subhead th {
            width: auto;
            padding-top: 12px;
            font-size: 10.5px;
            font-weight: 800;
            letter-spacing: 0.6px;
            text-transform: uppercase;
            color: var(--brand-600);
        }

        .rv-striphead {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 7px;
            font-size: 11.5px;
            font-weight: 700;
            color: var(--text);
        }

        .rv-count {
            font-size: 10px;
            font-weight: 600;
            color: var(--text-muted);
            background: var(--line);
            border-radius: 20px;
            padding: 2px 8px;
            white-space: nowrap;
        }

        /* Inline wrapped chips: 10 subjects take ~2 lines, not 10 rows. */
        .rv-strip {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .rv-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border-radius: 20px;
            padding: 4px 5px 4px 10px;
            font-size: 11px;
        }

        .rv-chip em {
            font-style: normal;
            font-weight: 600;
            color: #4a4a63;
        }

        .rv-chip b {
            font-weight: 800;
            font-size: 11px;
            border-radius: 20px;
            padding: 2px 8px;
            background: rgba(255,255,255,0.85);
        }

        .rv-strong  { background: #E4F9F1; }
        .rv-strong b { color: #1C8A4C; }
        .rv-mid     { background: #FFF6E0; }
        .rv-mid b { color: #B8790A; }
        .rv-low     { background: #FFECEA; }
        .rv-low b { color: #C92A2A; }
        .rv-neutral { background: var(--brand-50); }
        .rv-neutral b { color: var(--brand-600); }

        @media (max-width: 600px) {
            .rv-id { gap: 12px; padding: 14px; }
            .rv-id-photo { flex-basis: 32%; min-width: 92px; }
            .rv-id-name { font-size: 16px; }

            /* Two field-pairs per line is too tight on a phone, so the table
               collapses to a stacked label/value list. */
            .rv-table,
            .rv-table tbody,
            .rv-table tr,
            .rv-table th,
            .rv-table td { display: block; width: 100% !important; }

            .rv-table tr { padding: 6px 0; }
            .rv-table th {
                border-top: none;
                padding: 6px 12px 0 12px;
                font-size: 11px;
            }
            .rv-table td {
                border-top: none;
                padding: 0 12px 6px 12px;
            }
            /* Empty padding cells from odd-numbered field counts. */
            .rv-table th:empty, .rv-table td:empty { display: none; }
        }

        .review-card-wrap {
            background: var(--brand-20);
            border-radius: 20px;
            padding: 8px 16px;
            margin: 16px 0;
        }

        .review-submit-box {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            background: var(--brand-50);
            border-radius: 16px;
            padding: 16px 18px;
            margin: 20px 0 4px 0;
        }

        .review-submit-box i {
            color: var(--brand-600);
            font-size: 18px;
            margin-top: 1px;
            flex-shrink: 0;
        }

        .review-submit-box p {
            margin: 0;
            font-size: 12.5px;
            color: #5a5a72;
            line-height: 1.5;
        }
        
        .inner-table {
            width: 100%;
            border-collapse: collapse;
            background: #ffffff;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .inner-table th, .inner-table td {
            padding: 8px 12px;
            text-align: left;
            border-bottom: 1px solid #e8edf2;
        }
        
        .inner-table thead {
            background: #e8edf2;
            color: #2c3e50;
        }
        
        .tabcontent {
            display: none;
            padding: 20px 0 0 0;
            animation: fadeSlideIn 0.5s ease;
        }
        
        /* Deliberately animates opacity ONLY — no transform/filter.
           An element with an active transform becomes the containing block
           for its position:fixed descendants, which made the fixed save bar
           resolve left/right against the tab (inside .row's negative
           margins) instead of the viewport, pushing it off-screen right. */
        @keyframes fadeSlideIn {
            from { opacity: 0; }
            to   { opacity: 1; }
        }
        
        .spinner {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background: conic-gradient(from 0deg, var(--brand-500), var(--brand-600), var(--brand-500));
            animation: spin 1s linear infinite;
            -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        #loadingSpinner {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(43, 42, 61, 0.35);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }
        
        .blink-border {
            border: 2px solid red;
            animation: blink 0.5s infinite alternate;
        }
        
        @keyframes blink {
            0% { border-color: red; }
            50% { border-color: transparent; }
            100% { border-color: red; }
        }
        
        .row {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
        
        .container {
            max-width: 100% !important;
            overflow-x: hidden !important;
            padding: 0 !important;
        }
        
        .text-center {
            text-align: center;
        }
        
        .mb-1 { margin-bottom: 4px; }
        .mb-3 { margin-bottom: 16px; }
        .p-2 { padding: 8px; }
        .p-3 { padding: 16px; }
        .mt-3 { margin-top: 16px; }
        
        /* Higher Education Selection Dropdown */
        .program-select-wrapper {
            margin: 20px 0;
        }
        
        .program-select-wrapper label {
            font-weight: 600;
            color: #2c3e50;
        }
        
        .program-select-wrapper select {
            margin-top: 8px;
        }
        
        /* SweetAlert2 Toast Customization */
        .swal2-toast {
            border-radius: 12px !important;
            box-shadow: 0 10px 40px rgba(0,0,0,0.12) !important;
        }

        /* Toasts now show top-center instead of bottom-right, so they need
           clearing space below the fixed header — otherwise they'd render
           right under (or behind) the mobile top nav / desktop dock area. */
        .swal2-container.swal2-top {
            padding-top: 20px !important;
        }

        @media (max-width: 768px) {
            .swal2-container.swal2-top {
                padding-top: calc(76px + env(safe-area-inset-top, 0px)) !important;
            }
        }

        /* The default toast is oversized on a phone — shrink the whole
           component (padding, icon, type) rather than just the text, or it
           still occupies the same footprint. */
        @media (max-width: 768px) {
            .swal2-toast {
                width: auto !important;
                max-width: calc(100vw - 28px) !important;
                padding: 8px 12px !important;
                border-radius: 14px !important;
            }
            .swal2-toast .swal2-title { font-size: 12.5px !important; margin: 0 !important; }
            .swal2-toast .swal2-html-container { font-size: 11.5px !important; margin: 2px 0 0 0 !important; }
            .swal2-toast .swal2-icon {
                width: 20px !important;
                height: 20px !important;
                min-width: 20px !important;
                margin: 0 8px 0 0 !important;
            }
            .swal2-toast .swal2-icon .swal2-icon-content { font-size: 13px !important; }
            .swal2-toast .swal2-timer-progress-bar { height: 2px !important; }
        }
        
        .swal2-toast .swal2-title {
            font-size: 14px !important;
        }
        
        .swal2-toast .swal2-html-container {
            font-size: 13px !important;
        }

        /* Slide-left transition for chained SweetAlert steps (e.g. picking
           "Advanced Level" then immediately being asked how many subjects) —
           makes the second prompt feel like a continuation of the first
           rather than a jarring new popup. */
        @keyframes swalSlideInLeft {
            from { transform: translateX(60px); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

        @keyframes swalSlideOutLeft {
            from { transform: translateX(0); opacity: 1; }
            to { transform: translateX(-60px); opacity: 0; }
        }

        .swal-slide-in-left {
            animation: swalSlideInLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }

        .swal-slide-out-left {
            animation: swalSlideOutLeft 0.22s ease-in !important;
        }

        /* ===== DESIRED FIELD: NUMBERED CHOICE CARDS ===== */
        .field-choice-card, .field-panel {
            background: var(--brand-25);
            border: 1px solid var(--brand-150);
            border-radius: 20px;
            padding: 20px 18px 6px 18px;
            margin: 16px 0;
            box-shadow: 0 6px 18px rgba(88, 73, 214, 0.06);
        }

        .field-choice-head {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 15px;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 16px;
            padding: 0 4px;
        }

        .field-choice-badge {
            width: 32px;
            height: 32px;
            border-radius: 11px;
            background: var(--brand-600);
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 800;
            flex-shrink: 0;
            box-shadow: 0 4px 12px rgba(88, 73, 214, 0.35);
        }

        /* Remove icon on a saved field-choice summary card */
        .edu-actions .field-remove-btn {
            color: #C92A2A;
        }

        .edu-actions .field-remove-btn:hover {
            background: #FFECEA;
        }

        /* ===== PWA INSTALL BANNER ===== */
        .pwa-install-banner {
            display: none;
            position: fixed;
            left: 50%;
            transform: translateX(-50%);
            bottom: 90px;
            z-index: 1003;
            background: #ffffff;
            border-radius: 14px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            border: 1px solid #e8edf2;
            padding: 12px 14px;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            width: calc(100% - 32px);
            max-width: 420px;
        }

        .pwa-install-text {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 12.5px;
            color: #2c3e50;
            font-weight: 600;
        }

        .pwa-install-text i {
            color: var(--brand-600);
            font-size: 18px;
        }

        .pwa-install-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }

        .pwa-install-btn {
            background: var(--brand-600);
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 8px 16px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
        }

        .pwa-install-dismiss {
            background: #f0f4f8;
            border: none;
            border-radius: 8px;
            width: 30px;
            height: 30px;
            color: #7f8c8d;
            cursor: pointer;
        }

        @media (min-width: 769px) {
            .pwa-install-banner {
                bottom: 24px;
            }
        }

        /* ===== HERO BANNER (Personal Info step) ===== */
        /* Desktop counterpart to the mobile header arc — a soft tinted dome
           behind the in-card header. Trial styling: delete this one rule to
           revert. */
        .app-hero {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            margin-bottom: 26px;
            padding-bottom: 18px;
            border-bottom: none;
        }

        .app-hero::before {
            content: '';
            position: absolute;
            left: -40px;
            right: -40px;
            top: -46px;
            bottom: -14px;
            background: linear-gradient(160deg, rgba(238,237,255,0.9) 0%, rgba(246,245,255,0.75) 55%, rgba(255,255,255,0) 100%);
            border-radius: 0 0 50% 50% / 0 0 40px 40px;
            z-index: 0;
            pointer-events: none;
        }

        .app-hero > * { position: relative; z-index: 1; }

        /* Name and abbreviation stack vertically instead of sitting inline. */
        .app-hero-titles { display: flex; flex-direction: column; min-width: 0; }

        .app-hero-abbr {
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.3px;
            color: var(--text-muted);
            margin-top: 2px;
        }

        .app-hero-left {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 0;
        }

        .app-hero-avatar {
            width: 100px;
            height: 100px;
            border-radius: 12px;
            object-fit: contain;
            background: none;
            box-shadow: none;
            flex-shrink: 0;
            padding: 5px;
        }

        .app-hero-avatar-fallback {
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--brand-600);
            color: #fff;
            font-size: 17px;
            padding: 0;
        }

        .app-hero-title {
            font-size: 16px;
            font-weight: 700;
            margin: 0;
            color: var(--text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .app-hero-label {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.4px;
            text-transform: uppercase;
            color: var(--brand-600);
            background: var(--brand-50);
            padding: 6px 12px;
            border-radius: 20px;
            flex-shrink: 0;
        }

        @media (max-width: 768px) {
            .app-hero { display: none; }
        }

        /* ===== GENDER SEGMENTED TOGGLE (vertical) ===== */
        .gender-toggle {
            display: flex;
            flex-direction: column;
            background: var(--brand-50);
            border-radius: 14px;
            padding: 5px;
            gap: 5px;
            width: 100%;
            max-width: 100%;
        }

        .gender-toggle input {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
        }

        .gender-toggle label {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 12px;
            padding: 13px 16px;
            border-radius: 10px;
            font-size: 13.5px;
            font-weight: 600;
            color: #5a6c7d;
            cursor: pointer;
            transition: all 0.25s ease;
            margin: 0;
        }

        .gender-toggle label i {
            font-size: 16px;
            width: 22px;
            text-align: center;
            color: #9fb0bd;
            transition: all 0.25s ease;
        }

        .gender-toggle label .gender-check {
            margin-left: auto;
            opacity: 0;
            color: var(--brand-600);
            font-size: 14px;
            transition: all 0.2s ease;
        }

        .gender-toggle input:checked + label {
            background: #ffffff;
            color: var(--brand-600);
            box-shadow: 0 3px 12px rgba(88, 73, 214, 0.2);
        }

        .gender-toggle input:checked + label i {
            color: var(--brand-600);
        }

        .gender-toggle input:checked + label .gender-check {
            opacity: 1;
        }

        .gender-toggle input:focus-visible + label {
            outline: 2px solid var(--brand-600);
            outline-offset: 2px;
        }

        /* ===== EDUCATION HISTORY ===== */
        .subject-row-remove-wrap {
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding-bottom: 16px;
        }

        .subject-row-remove {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            border: none;
            background: #FFD9D6;
            color: #d6336c;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .subject-row-remove:hover {
            background: #FFC2BD;
            transform: scale(1.08);
        }

        .edu-history-list {
            display: flex;
            flex-direction: column;
            gap: 14px;
            margin: 18px 0;
        }

        .edu-add-btn {
            background: var(--brand-50);
            border: none;
            border-radius: 14px;
            padding: 14px 18px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 14px;
            color: var(--text);
            cursor: pointer;
            transition: all 0.25s ease;
        }

        .edu-add-btn:hover {
            background: #E7E5FF;
            transform: translateY(-2px);
        }

        .edu-add-btn .edu-add-plus {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--brand-600);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 19px;
            flex-shrink: 0;
            box-shadow: 0 6px 16px rgba(88, 73, 214, 0.3);
        }

        .edu-add-btn .edu-add-text {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            text-align: left;
        }

        .edu-add-btn .edu-add-title {
            font-weight: 700;
            font-size: 14px;
            color: var(--text);
        }

        .edu-add-btn .edu-add-subtitle {
            font-size: 11.5px;
            color: var(--text-muted);
            margin-top: 1px;
        }

        .edu-summary-card {
            background: #f8fafc;
            border: 1px solid transparent;
            border-radius: 22px;
            padding: 16px 18px;
            display: flex;
            align-items: flex-start;
            gap: 14px;
            position: relative;
            transition: all 0.25s ease;
        }

        .edu-summary-card:hover {
            transform: translateY(-2px);
        }

        /* Each qualification type gets its own pastel, matching the
           reference's rotating lavender / salmon / cream / mint palette. */
        .edu-summary-card.edu-type-advanced  { background: var(--brand-100); }
        .edu-summary-card.edu-type-technical { background: #FFEFC2; }
        .edu-summary-card.edu-type-ordinary  { background: #CFF3DD; }
        .edu-summary-card.edu-type-higher    { background: #FFD9D6; }
        .edu-summary-card.edu-type-hnd       { background: #EFE0F7; }
        .edu-summary-card.edu-type-others    { background: #ECEFF1; }

        .edu-summary-card .edu-icon {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(255,255,255,0.85);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }

        .edu-type-advanced .edu-icon  { color: var(--brand-600); }
        .edu-type-technical .edu-icon { color: #B8790A; }
        .edu-type-ordinary .edu-icon  { color: #1C8A4C; }
        .edu-type-higher .edu-icon    { color: #E8590C; }
        .edu-type-hnd .edu-icon       { color: #7B3FA0; }
        .edu-type-others .edu-icon    { color: #546E7A; }

        .edu-summary-card .edu-body {
            flex: 1;
            min-width: 0;
        }

        .edu-summary-card .edu-type {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.4px;
            text-transform: uppercase;
            color: var(--brand-600);
        }

        .edu-summary-card .edu-title {
            font-size: 14px;
            font-weight: 700;
            color: #2c3e50;
            margin: 2px 0;
        }

        .edu-summary-card .edu-meta {
            font-size: 12px;
            color: #7f8c8d;
            display: flex;
            flex-wrap: wrap;
            gap: 4px 10px;
        }

        .edu-summary-card .edu-actions {
            display: flex;
            flex-direction: column;
            gap: 6px;
            flex-shrink: 0;
        }

        .edu-summary-card .edu-actions button {
            border: none;
            background: #eef2f5;
            color: #5a6c7d;
            border-radius: 8px;
            width: 32px;
            height: 32px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .edu-summary-card .edu-actions button:hover {
            background: var(--brand-600);
            color: #fff;
        }

        .edu-summary-card .edu-actions button.edu-action-delete:hover {
            background: #d6336c;
            color: #fff;
        }

        .edu-summary-card .edu-doc-status {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 11px;
            font-weight: 600;
            padding: 3px 9px;
            border-radius: 20px;
            margin-top: 8px;
            cursor: pointer;
            border: none;
        }

        .edu-summary-card .edu-doc-status.missing {
            background: #fdf2e3;
            color: #f39c12;
        }

        .edu-summary-card .edu-doc-status.uploaded {
            background: #eafaf1;
            color: #27ae60;
        }

        .edu-type-picker {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            text-align: left;
            margin-top: 6px;
        }

        .edu-type-picker button {
            border: none;
            border-radius: 14px;
            padding: 16px 10px;
            font-size: 12.5px;
            font-weight: 700;
            color: #2c3e50;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            transition: all 0.2s ease;
        }

        .edu-type-picker button i {
            font-size: 20px;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
        }

        .edu-type-picker button[onclick*="advanced"] { background: var(--brand-100); }
        .edu-type-picker button[onclick*="advanced"] i { background: var(--brand-600); }
        .edu-type-picker button[onclick*="technical"] { background: #FFEFC2; }
        .edu-type-picker button[onclick*="technical"] i { background: #B8790A; }
        .edu-type-picker button[onclick*="ordinary"] { background: #CFF3DD; }
        .edu-type-picker button[onclick*="ordinary"] i { background: #1C8A4C; }
        .edu-type-picker button[onclick*="higher"] { background: #FFD9D6; }
        .edu-type-picker button[onclick*="higher"] i { background: #E8590C; }
        .edu-type-picker button[onclick*="pickFieldChoice"] { background: var(--brand-100); }
        .edu-type-picker button[onclick*="pickFieldChoice"] i { background: var(--brand-600); }

        .edu-type-picker button:hover {
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 8px 18px rgba(20,20,50,0.12);
        }

        .edu-type-picker button.added {
            opacity: 0.5;
        }

        .edu-inline-upload {
            margin-top: 14px;
            padding-top: 14px;
            border-top: 1px dashed #e8edf2;
        }

        .edu-inline-upload label {
            font-size: 12px;
            font-weight: 600;
            color: #5a6c7d;
            display: block;
            margin-bottom: 6px;
        }

        /* ===== APP SHELL / PWA MOBILE POLISH ===== */
        @media (max-width: 768px) {
            body {
                background: #ffffff;
                /* 2026-09-22 (thirty-ninth follow-up), quoted directly: "the
                   spae between the topbar and the start of content on mobile
                   is ,uch can we reduce alittle for all pages." The fixed
                   .mobile-top-nav is `66px + safe-area` tall, so 96px left a
                   30px dead band above every page's first card. 96 -> 76px
                   keeps a deliberate 10px breathing gap and nothing more,
                   platform-wide (this is the rule every non-bare page uses).
                   Bottom padding is untouched - it clears the 56px dock plus
                   its own inset, not the top bar. */
                padding-top: calc(76px + env(safe-area-inset-top, 0px)) !important;
                padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
            }

            .mobile-top-nav {
                padding-top: env(safe-area-inset-top, 10px);
                height: calc(66px + env(safe-area-inset-top, 0px));
            }

            .main-wrapper {
                max-width: 100%;
            }

            .form-container {
                box-shadow: none;
                border-top: none;
            }

            /* Larger, thumb-friendly tap targets everywhere on mobile */
            .form-control,
            .btn-primary,
            .btn-skip,
            .btn-sm-add,
            select.form-control {
                min-height: 46px;
            }

            h3 { font-size: 19px; }

            .edu-type-picker {
                grid-template-columns: 1fr 1fr;
            }
        }

        /* Hide the browser chrome-like scrollbars/overscroll glow so the
           form feels like a native app rather than a webpage. */
        html {
            -webkit-tap-highlight-color: transparent;
            overscroll-behavior-y: contain;
        }

        /* Standalone PWA display gets extra top inset handling automatically
           via env(safe-area-inset-*) above; this just guards older browsers. */
        @supports not (padding: max(0px)) {
            .mobile-top-nav { padding-top: 10px; }
        }
        
        
        .mb-1{
            
            color:black;
            font-weight: 400;
        }
        
        
        .input-with-icon {
    position: relative;
    width: 100% !important;
    display: block !important;
}

.input-with-icon .input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #8a9baa;
    z-index: 2;
    pointer-events: none;
    font-size: 16px;
}

.input-with-icon input {
    padding-left: 38px !important;
    padding-right: 16px;
    width:100% !important;
}