/* main */

            /* ═══════════════════════════════════════════════════
   DESIGN TOKENS — LIGHT MODE
═══════════════════════════════════════════════════ */
            :root {
                /* Clarity — soft light workspace, clean blue identity.
     Cool paper, white cards, one confident blue accent, pastel status pills. */
                --c-bg: #eef2fb;
                --c-surface: #ffffff;
                --c-surface2: #f5f8fd;
                --c-surface3: #e8effb;
                --c-border: #e7edf6;
                --c-border2: #d6e0f0;
                /* record-table lines: ONE uniform line — same width + same color, horizontal = vertical */
                --c-grid-line: #dde6f3;
                --c-grp-divider: #dde6f3;
                --c-navy: #16223f;
                --c-navy2: #233458;
                --c-blue: #2f6cf6;
                --c-accent: #2f6cf6;
                --c-accent-glow: rgba(47,108,246,0.16);
                --c-text: #152036;
                --c-text2: #4a5670;
                /* Muted must still clear 4.5:1 on the darkest light surface (--c-surface3). */
                --c-muted: #616e8a;
                --c-green: #1f9d63;
                --c-green-bg: #e3f6ec;
                --c-red: #e0484d;
                --c-red-bg: #fce7e8;
                --c-amber: #c07d12;
                --c-amber-bg: #fbf0da;
                --c-violet: #6a5acd;
                --c-violet-bg: #e9e6f7;
                --c-teal: #2f6cf6;
                --c-teal-bg: #e2ecfe;
                --c-gold: #c07d12;
                --nav-bg: linear-gradient(180deg,#ffffff 0%,#f5f8fd 60%,#eef2fb 100%);
                --nav-active-glow: rgba(47,108,246,0.12);
                --topbar-bg: linear-gradient(100deg,#16223f,#233458);
                --shadow-sm: 0 1px 2px rgba(22,34,63,0.05);
                --shadow-md: 0 8px 28px rgba(22,34,63,0.08);
                --shadow-lg: 0 20px 50px rgba(22,34,63,0.12);
                --shadow-card: 0 2px 10px rgba(22,34,63,0.05),0 0 0 1px rgba(22,34,63,0.03);
                --radius: 16px;
                --radius-lg: 22px;
                --font: 'Plus Jakarta Sans','Inter','Segoe UI',sans-serif;
                --font-display: 'Plus Jakarta Sans','Inter','Segoe UI',sans-serif;
                --mono: 'IBM Plex Mono','Consolas','Courier New',monospace;
                --transition: .22s cubic-bezier(.22,.61,.36,1);
            }

            /* ═══════════════════════════════════════════════════
   DARK MODE TOKENS
═══════════════════════════════════════════════════ */
            body.dark {
                /* Night workspace — deep blue-charcoal, same clean blue accent lit up */
                --c-bg: #0a1c3f;
                --c-surface: #14315f;
                --c-surface2: #182134;
                --c-surface3: #1f2b42;
                --c-border: #24559b;
                --c-border2: #33425f;
                /* dark mode: ONE uniform line — same width + same color, horizontal = vertical */
                --c-grid-line: #33425f;
                --c-grp-divider: #33425f;
                --c-navy: #111827;
                --c-navy2: #182134;
                --c-blue: #5b9bff;
                --c-accent: #5b9bff;
                --c-accent-glow: rgba(91,155,255,0.22);
                --c-text: #e7ecf7;
                --c-text2: #aab8d2;
                --c-muted: #74829f;
                --c-green: #46d18f;
                --c-green-bg: rgba(70,209,143,0.14);
                --c-red: #f0817d;
                --c-red-bg: rgba(240,129,125,0.14);
                --c-amber: #e6b45c;
                --c-amber-bg: rgba(230,180,92,0.14);
                --c-violet: #a99bf5;
                --c-violet-bg: rgba(169,155,245,0.16);
                --c-teal: #5b9bff;
                --c-teal-bg: rgba(91,155,255,0.14);
                --c-gold: #e6b45c;
                --nav-bg: linear-gradient(180deg,#0e1521 0%,#111a29 40%,#131a2a 100%);
                --nav-active-glow: rgba(91,155,255,0.24);
                --topbar-bg: linear-gradient(100deg,#141d2e,#1c2740);
                --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
                --shadow-md: 0 8px 28px rgba(0,0,0,0.45);
                --shadow-lg: 0 20px 50px rgba(0,0,0,0.55);
                --shadow-card: 0 2px 10px rgba(0,0,0,0.4),0 0 0 1px rgba(255,255,255,0.03);
            }

            /* ═══════════════════════════════════════════════════
   DARK MODE — SIDENAV OVERRIDES
═══════════════════════════════════════════════════ */
            body.dark .sidenav {
                box-shadow: 4px 0 20px rgba(0,0,0,0.4);
                border-right-color: rgba(255,255,255,0.04);
            }

            body.dark .sidenav-header {
                border-bottom-color: rgba(255,255,255,0.05);
            }

            body.dark .sidenav-brand {
                color: rgba(255,255,255,0.5);
            }

            body.dark .sidenav-toggle {
                background: rgba(255,255,255,0.08);
                border-color: rgba(255,255,255,0.12);
                color: rgba(255,255,255,0.7);
            }

            body.dark .sidenav-toggle:hover {
                background: rgba(255,255,255,0.16);
                color: #fff;
            }

            body.dark .nav-section-label {
                color: rgba(255,255,255,0.25);
            }

            body.dark .nav-item {
                color: rgba(255,255,255,0.45);
            }

            body.dark .nav-item:hover {
                color: rgba(255,255,255,0.9);
                background: rgba(255,255,255,0.07);
            }

            body.dark .nav-item.active {
                color: #fff;
                background: rgba(255,255,255,0.1);
            }

            body.dark .nav-count {
                background: rgba(255,255,255,0.12);
            }

            body.dark .nav-divider {
                border-top-color: rgba(255,255,255,0.05);
            }

            body.dark .nav-footer {
                border-top-color: rgba(255,255,255,0.06);
            }

            body.dark .nav-footer-btn {
                background: rgba(255,255,255,0.05);
                border-color: rgba(255,255,255,0.1);
                color: rgba(255,255,255,0.6);
            }

            body.dark .nav-footer-btn:hover {
                background: rgba(255,255,255,0.12);
                color: #fff;
                border-color: rgba(255,255,255,0.2);
            }

            /* ═══════════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════════ */
            * {
                box-sizing: border-box;
                margin: 0;
                padding: 0;
            }

            /* During theme toggle, kill all transitions so the switch is instant (no lag) */
            html.theme-switching * {
                transition: none!important;
            }

            html,body {
                height: 100%;
                overflow: hidden;
            }

            /* Default app scale — renders at the 110% size the app is designed around,
   without needing the user to zoom the browser manually. */
            body {
                zoom:1.1;
                --bz:1.1;}

            body {
                font-family: var(--font);
                background: var(--c-bg);
                color: var(--c-text);
                transition: background var(--transition),color var(--transition);
            }

            /* ═══════════════════════════════════════════════════
   KEYFRAMES
═══════════════════════════════════════════════════ */
            @keyframes fadeUp {
                from {
                    opacity: 0;
                    transform: translateY(14px)
                }

                to {
                    opacity: 1;
                    transform: translateY(0)
                }
            }

            @keyframes fadeInOnly {
                from {
                    opacity: 0
                }

                to {
                    opacity: 1
                }
            }

            @keyframes fadeIn {
                from {
                    opacity: 0
                }

                to {
                    opacity: 1
                }
            }

            @keyframes scaleIn {
                from {
                    opacity: 0;
                    transform: scale(.94)
                }

                to {
                    opacity: 1;
                    transform: scale(1)
                }
            }

            @keyframes pulse {
                0%,100% {
                    opacity: 1
                }

                50% {
                    opacity: .5
                }
            }

            @keyframes shimmer {
                0% {
                    background-position: -200% 0
                }

                100% {
                    background-position: 200% 0
                }
            }

            @keyframes slideRight {
                from {
                    opacity: 0;
                    transform: translateX(-12px)
                }

                to {
                    opacity: 1;
                    transform: translateX(0)
                }
            }

            @keyframes toastIn {
                from {
                    opacity: 0;
                    transform: translateY(16px) scale(.95)
                }

                to {
                    opacity: 1;
                    transform: translateY(0) scale(1)
                }
            }

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

            @keyframes anchorBob {
                0%,100% {
                    transform: translateY(0)
                }

                50% {
                    transform: translateY(-6px)
                }
            }

            @keyframes waveFloat {
                0%,100% {
                    transform: translateY(0) rotate(0deg)
                }

                25% {
                    transform: translateY(-3px) rotate(1deg)
                }

                75% {
                    transform: translateY(3px) rotate(-1deg)
                }
            }

            @keyframes countUp {
                from {
                    transform: scale(.7);
                    opacity: 0
                }

                to {
                    transform: scale(1);
                    opacity: 1
                }
            }

            @keyframes navItemIn {
                from {
                    opacity: 0;
                    transform: translateX(-8px)
                }

                to {
                    opacity: 1;
                    transform: translateX(0)
                }
            }

            @keyframes borderGlow {
                0%,100% {
                    box-shadow: 0 0 0 0 var(--c-accent-glow)
                }

                50% {
                    box-shadow: 0 0 0 4px var(--c-accent-glow)
                }
            }

            @keyframes floatUp {
                0%,100% {
                    transform: translateY(0)
                }

                50% {
                    transform: translateY(-7px)
                }
            }

            @keyframes softGlow {
                0%,100% {
                    filter: drop-shadow(0 0 8px rgba(47,108,246,.25))
                }

                50% {
                    filter: drop-shadow(0 0 18px rgba(47,108,246,.5))
                }
            }

            /* Respect users who prefer less motion */
            @media (prefers-reduced-motion: reduce) {
                *,*::before,*::after {
                    animation-duration: .001ms!important;
                    animation-iteration-count: 1!important;
                    transition-duration: .001ms!important;
                    scroll-behavior: auto!important;
                }
            }

            /* Reorder list */
            .reorder-item {
                display: flex;
                align-items: center;
                gap: 10px;
                background: var(--c-surface);
                border: 1.5px solid var(--c-border);
                border-radius: 8px;
                padding: 8px 12px;
                cursor: grab;
                transition: box-shadow .15s,background .15s;
                user-select: none;
            }

            .reorder-item:active {
                cursor: grabbing;
            }

            .reorder-item.dragging {
                opacity: .5;
                box-shadow: 0 4px 16px rgba(47,108,246,0.25);
            }

            .reorder-item.drag-over {
                border-color: var(--c-accent);
                background: var(--c-accent-glow);
            }

            .reorder-handle {
                font-size: 16px;
                color: var(--c-muted);
                flex-shrink: 0;
            }

            .reorder-icon {
                font-size: 16px;
                flex-shrink: 0;
            }

            .reorder-label {
                flex: 1;
                font-size: 13px;
                font-weight: 600;
                color: var(--c-text);
            }

            .reorder-type {
                font-size: 10px;
                color: var(--c-muted);
                flex-shrink: 0;
            }

            .reorder-btns {
                display: flex;
                flex-direction: column;
                gap: 2px;
                flex-shrink: 0;
            }

            .reorder-btn {
                background: var(--c-surface3);
                border: 1px solid var(--c-border);
                color: var(--c-text2);
                border-radius: 5px;
                width: 24px;
                height: 20px;
                font-size: 11px;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: background .15s;
            }

            .reorder-btn:hover {
                background: var(--c-accent);
                color: #fff;
                border-color: var(--c-accent);
            }

            .reorder-btn:disabled {
                opacity: .3;
                cursor: not-allowed;
            }

            /* ═══════════════════════════════════════════════════
   LOGIN SCREEN
═══════════════════════════════════════════════════ */
            .login-screen {
                position: fixed;
                inset: 0;
                background: radial-gradient(130% 120% at 78% 12%,#2f6fd6 0%,#1c458f 42%,#0a1730 100%);
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 9999;
                overflow: hidden;
            }

            .login-screen::before {
                content: '';
                position: absolute;
                inset: 0;
                background: radial-gradient(circle at 78% 82%,rgba(91,155,255,0.10),transparent 42%), radial-gradient(circle at 12% 70%,rgba(168,125,31,0.07),transparent 40%);
                animation: fadeIn 1.6s ease;
                pointer-events: none;
            }

            .login-screen.hidden {
                display: none;
            }

            /* Floating particles */
            .login-particle {
                position: absolute;
                border-radius: 50%;
                background: rgba(91,155,255,0.10);
                animation: waveFloat 7s ease-in-out infinite;
                pointer-events: none;
            }

            .login-card {
                position: relative;
                z-index: 1;
                background: rgba(255,255,255,0.035);
                backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20px);
                border: 1px solid rgba(255,255,255,0.08);
                border-radius: 24px;
                padding: 48px 42px 38px;
                width: 372px;
                max-width: 92vw;
                box-shadow: 0 32px 90px rgba(0,0,0,0.55),0 0 0 1px rgba(255,255,255,0.05),inset 0 1px 0 rgba(255,255,255,0.07);
                animation: scaleIn .5s cubic-bezier(.22,.61,.36,1);
            }

            .login-anchor {
                font-size: 46px;
                text-align: center;
                display: block;
                margin-bottom: 10px;
                animation: anchorBob 3.4s ease-in-out infinite;
                filter: drop-shadow(0 0 18px rgba(91,155,255,0.35));
            }

            .login-title {
                font-family: var(--font-display);
                font-size: 25px;
                font-weight: 700;
                color: #f4f3ee;
                text-align: center;
                margin-bottom: 5px;
                letter-spacing: -.2px;
            }

            .login-sub {
                font-size: 12px;
                color: rgba(244,243,238,0.42);
                text-align: center;
                margin-bottom: 32px;
                letter-spacing: .3px;
            }

            .login-field {
                margin-bottom: 16px;
            }

            .login-field label {
                font-size: 10px;
                font-weight: 600;
                color: rgba(255,255,255,0.45);
                text-transform: uppercase;
                letter-spacing: .8px;
                display: block;
                margin-bottom: 7px;
            }

            .login-field input {
                width: 100%;
                border: 1px solid rgba(255,255,255,0.12);
                border-radius: 10px;
                padding: 11px 14px;
                background: rgba(255,255,255,0.06);
                color: #fff;
                font-family: var(--font);
                font-size: 14px;
                outline: none;
                transition: border-color .2s,background .2s;
            }

            .login-field input:focus {
                border-color: rgba(91,155,255,0.55);
                background: rgba(255,255,255,0.08);
                box-shadow: 0 0 0 3px rgba(91,155,255,0.16);
            }

            .login-field input::placeholder {
                color: rgba(255,255,255,0.25);
            }

            .login-btn {
                width: 100%;
                background: linear-gradient(135deg,#2f6fe0,#1e50c8);
                color: #fff;
                border: none;
                border-radius: 12px;
                padding: 14px;
                font-family: var(--font);
                font-size: 14px;
                font-weight: 600;
                cursor: pointer;
                transition: all var(--transition);
                margin-top: 6px;
                box-shadow: 0 6px 18px rgba(47,108,246,0.4);
                letter-spacing: .2px;
            }

            .login-btn:hover {
                background: linear-gradient(135deg,#4d84f8,#2f6cf6);
                transform: translateY(-1px);
                box-shadow: 0 10px 26px rgba(47,108,246,0.5);
            }

            .login-btn:active {
                transform: translateY(0);
            }

            .login-btn:disabled {
                opacity: .85;
                cursor: default;
                transform: none;
            }

            .login-btn.loading {
                position: relative;
                color: transparent!important;
                pointer-events: none;
            }

            .login-btn.loading::after {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                width: 20px;
                height: 20px;
                margin: -10px 0 0 -10px;
                border: 2.5px solid rgba(255,255,255,0.4);
                border-top-color: #fff;
                border-radius: 50%;
                animation: btnSpin .6s linear infinite;
            }

            @keyframes btnSpin {
                to {
                    transform: rotate(360deg);
                }
            }

            .login-err {
                color: #f87171;
                font-size: 12px;
                margin-top: 12px;
                font-weight: 500;
                display: none;
                text-align: center;
                background: rgba(248,113,113,0.1);
                border-radius: 7px;
                padding: 8px;
            }

            /* ═══════════════════════════════════════════════════
   TOPBAR
═══════════════════════════════════════════════════ */
            .topbar {
                background: var(--topbar-bg);
                height: 54px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 16px;
                box-shadow: 0 2px 16px rgba(0,0,0,0.3);
                position: sticky;
                top: 0;
                z-index: 100;
                border-bottom: 1px solid rgba(255,255,255,0.06);
                transition: background var(--transition);
            }

            .topbar-title {
                font-family: var(--font-display);
                font-size: 15px;
                font-weight: 700;
                color: #fff;
                display: flex;
                align-items: center;
                gap: 8px;
                letter-spacing: -.2px;
            }

            .topbar-anchor {
                font-size: 20px;
                animation: anchorBob 4s ease-in-out infinite;
                filter: drop-shadow(0 0 8px rgba(91,155,255,0.5));
            }

            .topbar-right {
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .tb-icon-btn {
                width: 34px;
                height: 34px;
                border-radius: 9px;
                background: rgba(255,255,255,0.08);
                border: 1px solid rgba(255,255,255,0.14);
                color: #fff;
                font-size: 15px;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: background .18s;
            }

            .tb-icon-btn:hover {
                background: rgba(255,255,255,0.18);
            }

            .tb-lbl-btn {
                display: flex;
                align-items: center;
                gap: 5px;
                height: 32px;
                padding: 0 12px;
                border-radius: 9px;
                background: rgba(255,255,255,0.08);
                border: 1px solid rgba(255,255,255,0.14);
                color: #fff;
                font-size: 12px;
                font-weight: 600;
                cursor: pointer;
                font-family: var(--font);
                transition: background .18s;
                white-space: nowrap;
            }

            .tb-lbl-btn:hover {
                background: rgba(255,255,255,0.18);
            }

            /* ── Profile dropdown ── */
            .profile-menu-wrap {
                position: relative;
            }

            .profile-trigger {
                display: flex;
                align-items: center;
                gap: 8px;
                background: rgba(255,255,255,0.08);
                border: 1px solid rgba(255,255,255,0.14);
                border-radius: 22px;
                padding: 4px 10px 4px 5px;
                cursor: pointer;
                transition: background .18s;
            }

            .profile-trigger:hover {
                background: rgba(255,255,255,0.16);
            }

            .profile-avatar {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                background: linear-gradient(135deg,#2f6cf6,#1e50c8);
                color: #fff;
                font-weight: 800;
                font-size: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }

            .profile-trigger-name {
                color: #fff;
                font-size: 13px;
                font-weight: 600;
                max-width: 100px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .profile-caret {
                color: rgba(255,255,255,0.7);
                font-size: 10px;
            }

            .profile-dropdown {
                position: absolute;
                top: calc(100% + 8px);
                right: 0;
                z-index: 300;
                width: 256px;
                background: var(--c-surface);
                border: 1.5px solid var(--c-border);
                border-radius: 14px;
                box-shadow: 0 14px 40px rgba(0,0,0,0.35);
                padding: 6px;
                display: none;
                animation: dropUpIn .22s cubic-bezier(.34,1.56,.64,1);
                transform-origin: top right;
            }

            @keyframes dropUpIn {
                from {
                    opacity: 0;
                    transform: translateY(-10px) scale(.96);
                }

                to {
                    opacity: 1;
                    transform: translateY(0) scale(1);
                }
            }

            .profile-dropdown.open {
                display: block;
            }

            .pd-header {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 12px 12px 12px;
            }

            .pd-avatar {
                width: 44px;
                height: 44px;
                border-radius: 50%;
                background: linear-gradient(135deg,#2f6cf6,#1e50c8);
                color: #fff;
                font-weight: 800;
                font-size: 17px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }

            .pd-avatar-sm {
                width: 36px;
                height: 36px;
                border-radius: 50%;
                background: linear-gradient(135deg,#2f6cf6,#1e50c8);
                color: #fff;
                font-weight: 800;
                font-size: 14px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }

            .pd-name {
                font-weight: 700;
                font-size: 14px;
                color: var(--c-text);
            }

            .pd-role {
                font-size: 11.5px;
                color: var(--c-gold,#e0a800);
                font-weight: 600;
                margin-top: 1px;
            }

            .pd-stat {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 11px 12px;
                font-size: 13.5px;
                color: var(--c-text);
            }

            .pd-stat strong {
                color: var(--c-accent);
                font-size: 15px;
                margin-left: auto;
            }

            .pd-divider {
                height: 1px;
                background: var(--c-border);
                margin: 5px 8px;
            }

            .pd-item {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 11px 12px;
                font-size: 13.5px;
                color: var(--c-text);
                border-radius: 9px;
            }

            .pd-ic {
                width: 20px;
                text-align: center;
                font-size: 15px;
                flex-shrink: 0;
            }

            .pd-click {
                cursor: pointer;
                transition: background .15s;
            }

            .pd-click:hover {
                background: var(--c-surface2);
            }

            .pd-signout {
                color: var(--c-red,#dc2626);
                font-weight: 600;
            }

            .pd-signout:hover {
                background: var(--c-red-bg,#fde8e8);
            }

            .pd-footer {
                display: flex;
                align-items: center;
                gap: 11px;
                padding: 11px 12px 8px;
                margin-top: 4px;
                border-top: 1px solid var(--c-border);
            }

            .pd-caret-up {
                margin-left: auto;
                color: var(--c-muted);
                font-size: 14px;
            }

            .stat-pill {
                background: rgba(255,255,255,0.07);
                border: 1px solid rgba(255,255,255,0.1);
                border-radius: 20px;
                padding: 4px 12px;
                font-size: 11px;
                font-weight: 500;
                color: rgba(255,255,255,0.7);
                display: flex;
                gap: 5px;
                align-items: center;
                transition: background .2s;
            }

            .stat-pill strong {
                color: #fff;
                font-weight: 700;
            }

            .stat-pill:hover {
                background: rgba(255,255,255,0.12);
            }

            .admin-badge {
                background: linear-gradient(135deg,rgba(201,149,10,0.2),rgba(251,191,36,0.15));
                border: 1px solid rgba(201,149,10,0.4);
                border-radius: 20px;
                padding: 3px 10px;
                font-size: 10px;
                font-weight: 700;
                color: #fbbf24;
                letter-spacing: .3px;
            }

            .topbar-user {
                font-size: 11px;
                color: rgba(255,255,255,0.5);
            }

            .logout-btn {
                background: rgba(255,255,255,0.08);
                border: 1px solid rgba(255,255,255,0.15);
                color: rgba(255,255,255,0.8);
                border-radius: 8px;
                padding: 5px 12px;
                font-size: 11px;
                font-weight: 600;
                cursor: pointer;
                font-family: var(--font);
                transition: all .2s;
            }

            .logout-btn:hover {
                background: rgba(239,68,68,0.2);
                border-color: rgba(239,68,68,0.4);
                color: #fca5a5;
            }

            /* Dark Mode Toggle */
            .dm-toggle {
                position: relative;
                width: 44px;
                height: 24px;
                cursor: pointer;
            }

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

            .dm-slider {
                position: absolute;
                inset: 0;
                background: rgba(255,255,255,0.1);
                border: 1px solid rgba(255,255,255,0.2);
                border-radius: 24px;
                transition: all .3s;
                display: flex;
                align-items: center;
                padding: 0 3px;
            }

            .dm-slider::after {
                content: '☀️';
                font-size: 13px;
                display: block;
                transition: transform .3s;
            }

            .dm-toggle input:checked + .dm-slider {
                background: rgba(96,165,250,0.2);
                border-color: rgba(96,165,250,0.4);
            }

            .dm-toggle input:checked + .dm-slider::after {
                content: '🌙';
                transform: translateX(20px);
            }

            /* ═══════════════════════════════════════════════════
   APP LAYOUT
═══════════════════════════════════════════════════ */
            #app {
                display: flex;
                flex-direction: column;
                height: calc(100vh / var(--bz, 1.1));
                min-height: 0;
                overflow: hidden;
            }

            @supports not (zoom:1) {
                #app {
                    height: 100vh;
                }
            }

            .app-body {
                display: flex;
                flex: 1;
                overflow: hidden;
                min-height: 0;
                position: relative;
            }

            .cat-tabs,.gsearch-bar {
                display: none!important;
            }

            .main-content {
                flex: 1;
                overflow-y: auto;
                overflow-x: hidden;
                background: var(--c-bg);
                min-width: 0;
                display: flex;
                flex-direction: column;
                padding-bottom: 40px;
                transition: background var(--transition);
            }

            /* ═══════════════════════════════════════════════════
   SIDE NAV
═══════════════════════════════════════════════════ */
            .sidenav {
                width: 220px;
                min-width: 220px;
                height: 100%;
                background: var(--nav-bg);
                display: flex;
                flex-direction: column;
                overflow: hidden;
                flex-shrink: 0;
                box-shadow: 4px 0 20px rgba(10,25,65,0.08);
                border-right: 1px solid var(--c-border);
                position: relative;
                z-index: 901;
                transition: width .42s cubic-bezier(.4,0,.2,1), min-width .42s cubic-bezier(.4,0,.2,1), box-shadow .42s ease;
            }

            .sidenav.collapsed {
                width: 56px;
                min-width: 56px;
            }

            /* auto-collapsed sidebar: reserves 56px; on hover it EXPANDS AS AN OVERLAY (no content reflow = smooth) */
            .sidenav.auto-collapsed {
                width: 56px;
                min-width: 56px;
            }

            @media(min-width: 1025px) {
                /* auto-collapsed: sidebar floats as an overlay; content reserves 56px and NEVER shifts on hover */ .sidenav.auto-collapsed {
                    position:absolute;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    height: 100%;
                    z-index: 200;
                }

                body:has(.sidenav.auto-collapsed) .main-content {
                    margin-left: 56px;
                }

                .sidenav.auto-collapsed:hover {
                    width: 220px;
                    min-width: 220px;
                    box-shadow: 6px 0 28px rgba(0,0,0,0.30);
                }

                .sidenav.auto-collapsed:hover .sidenav-brand, .sidenav.auto-collapsed:hover .nav-label, .sidenav.auto-collapsed:hover .nav-count, .sidenav.auto-collapsed:hover .nav-section-label, .sidenav.auto-collapsed:hover .nts-lbl, .sidenav.auto-collapsed:hover .side-profile-info, .sidenav.auto-collapsed:hover .side-profile-caret, .sidenav.auto-collapsed:hover .nfb-lbl {
                    opacity: 1;
                    max-width: 200px;
                    width: auto;
                    pointer-events: auto;
                }

                .sidenav.auto-collapsed:hover .nav-item {
                    padding: 6px 12px;
                    justify-content: flex-start;
                    margin: 1px 6px;
                }

                .sidenav.auto-collapsed:hover .nav-item::after {
                    display: none;
                }

                .sidenav.auto-collapsed:hover .side-profile-btn {
                    justify-content: flex-start;
                    padding: 7px 9px;
                }
            }

            .sidenav.auto-collapsed .sidenav-brand {
                opacity: 0;
                max-width: 0;
            }

            .sidenav.auto-collapsed .nav-section-label {
                opacity: 0;
            }

            .sidenav.auto-collapsed .nav-label {
                opacity: 0;
                max-width: 0;
                pointer-events: none;
            }

            .sidenav.auto-collapsed .nav-count {
                opacity: 0;
                width: 0;
                padding: 0;
                overflow: hidden;
            }

            .sidenav.auto-collapsed .nfb-lbl {
                opacity: 0;
                max-width: 0;
            }

            .sidenav.auto-collapsed .nav-item {
                padding: 9px 0;
                justify-content: center;
                margin: 2px 8px;
                border-radius: 9px;
            }

            .sidenav.collapsed .nav-item {
                padding: 9px 0;
                justify-content: center;
                margin: 2px 8px;
                border-radius: 9px;
            }

            .sidenav.collapsed .nav-icon,.sidenav.auto-collapsed:not(:hover) .nav-icon {
                width: auto;
            }

            .sidenav.collapsed .nav-mother .nav-caret,.sidenav.auto-collapsed:not(:hover) .nav-mother .nav-caret {
                display: none;
            }

            /* ─── Collapsed sidebar: keep it clean (hide carets, tree-lines, indents) ─── */
            .sidenav.collapsed .nav-caret, .sidenav.auto-collapsed .nav-caret {
                display: none;
            }

            .sidenav.collapsed .nav-group-body, .sidenav.auto-collapsed .nav-group-body {
                margin-left: 0;
                border-left: none;
                padding-left: 0;
            }

            .sidenav.collapsed .nav-group-body .nav-item, .sidenav.auto-collapsed .nav-group-body .nav-item {
                padding-left: 0 !important;
                margin-left: 6px;
                margin-right: 6px;
                justify-content: center;
            }

            .sidenav.collapsed .nav-item, .sidenav.auto-collapsed .nav-item {
                justify-content: center;
            }

            .sidenav.collapsed .nav-mother, .sidenav.auto-collapsed .nav-mother {
                justify-content: center;
            }

            /* expanded-on-hover restores the nice indented look */
            .sidenav.auto-collapsed:hover .nav-caret {
                display: inline-flex;
            }

            .sidenav.auto-collapsed:hover .nav-group-body {
                margin-left: 14px;
                border-left: 1.5px solid var(--c-border);
            }

            .sidenav.auto-collapsed:hover .nav-group-body .nav-item {
                margin-left: 6px;
                justify-content: flex-start;
            }

            .sidenav-header {
                padding: 14px 12px 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: 1px solid var(--c-border);
                flex-shrink: 0;
            }

            .sidenav-brand {
                font-family: var(--font-display);
                font-size: 12px;
                font-weight: 700;
                color: var(--c-muted);
                text-transform: uppercase;
                letter-spacing: 1.5px;
                white-space: nowrap;
                overflow: hidden;
                transition: opacity .2s,max-width .25s;
            }

            .sidenav.collapsed .sidenav-brand {
                opacity: 0;
                max-width: 0;
            }

            .sidenav-toggle {
                background: var(--c-surface3);
                border: 1px solid var(--c-border);
                color: var(--c-text2);
                border-radius: 8px;
                width: 30px;
                height: 30px;
                font-size: 14px;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                transition: all .2s;
            }

            .sidenav-toggle:hover {
                background: var(--c-border2);
                color: var(--c-text);
            }

            .nav-items {
                flex: 1;
                overflow-y: auto;
                overflow-x: hidden;
                padding: 8px 0;
                scrollbar-width: none;
                display: flex;
                flex-direction: column;
            }

            /* children must never be squashed when the list is taller than the menu (it clipped the "Overview" label) */
            .nav-items > * {
                flex-shrink: 0;
            }

            .nav-bottom-fixed {
                flex-shrink: 0;
                padding-bottom: 4px;
            }

            .nav-items::-webkit-scrollbar {
                display: none;
            }

            .nav-section-label {
                font-size: 9px;
                font-weight: 700;
                color: var(--c-muted);
                text-transform: uppercase;
                letter-spacing: 1.3px;
                padding: 8px 16px 4px;
                line-height: 1.4;
                flex-shrink: 0;
                white-space: nowrap;
                overflow: hidden;
                transition: opacity .15s;
            }

            .sidenav.collapsed .nav-section-label {
                opacity: 0;
            }

            .nav-item {
                display: flex;
                align-items: center;
                gap: 9px;
                padding: 6px 12px;
                cursor: pointer;
                color: var(--c-text2);
                font-size: 11.5px;
                font-weight: 500;
                border-left: 3px solid transparent;
                transition: background .15s ease,color .15s ease;
                white-space: nowrap;
                position: relative;
                user-select: none;
                animation: navItemIn .25s ease both;
                margin: 1px 6px;
                border-radius: 7px;
                border-left: none;
            }

            .nav-item:hover {
                color: var(--c-text);
                background: var(--c-surface3);
            }

            .nav-item.active {
                color: var(--c-accent);
                background: var(--c-accent-glow);
                box-shadow: none;
                font-weight: 700;
                position: relative;
                border-radius: 10px;
            }

            body:not(.dark) .nav-item.active {
                background: rgba(47,108,246,0.13);
            }

            .nav-item.active .nav-icon {
                color: var(--c-accent);
            }

            .nav-item.active .nav-icon svg {
                opacity: 1;
            }

            /* clean left accent bar */
            .nav-item.active::before {
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                height: 60%;
                width: 3px;
                border-radius: 0 3px 3px 0;
                background: var(--c-accent);
            }

            .sidenav.collapsed .nav-item.active::before, .sidenav.auto-collapsed:not(:hover) .nav-item.active::before {
                display: none;
            }

            .nav-item.active .nav-count {
                background: var(--c-accent);
                color: #fff;
            }

            .nav-item.active[data-cat="direct"]::before, .nav-item.active[data-cat="admin"]::before, .nav-item.active[data-cat="pending"]::before {
                background: var(--c-gold);
            }

            .nav-item.active[data-cat="apply"]::before {
                background: var(--c-green);
            }

            .nav-item.active[data-cat="admin"] {
                color: var(--c-gold);
            }

            .nav-item.active[data-cat="admin"] .nav-icon {
                color: var(--c-gold);
            }

            .nav-item.active[data-cat="news"] {
                color: var(--c-accent);
            }

            .nav-item.active[data-cat="apply"] {
                color: var(--c-green);
            }

            .nav-item.active[data-cat="apply"] .nav-icon {
                color: var(--c-green);
            }

            .nav-item.active[data-cat="pending"] {
                color: var(--c-gold);
            }

            .nav-item.active[data-cat="pending"] .nav-icon {
                color: var(--c-gold);
            }

            .mbn-item.active[data-cat="news"] {
                border-top-color: #38bdf8;
            }

            .mbn-item.active[data-cat="apply"] {
                border-top-color: #34d399;
            }

            .mbn-item.active[data-cat="pending"] {
                border-top-color: #fb923c;
            }

            .nav-item.cust-active {
                box-shadow: inset 3px 0 0 #c084fc!important;
            }

            .nav-icon {
                font-size: 14px;
                flex-shrink: 0;
                width: 18px;
                text-align: center;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }

            .nav-label {
                flex: 1;
                overflow: hidden;
                white-space: nowrap;
                transition: opacity .15s ease;
            }

            .sidenav.collapsed .nav-label {
                opacity: 0;
                max-width: 0;
                pointer-events: none;
            }

            .nav-count {
                background: var(--c-surface3);
                border-radius: 10px;
                padding: 2px 7px;
                font-size: 10px;
                font-weight: 700;
                flex-shrink: 0;
                transition: opacity .2s;
            }

            .sidenav.collapsed .nav-count {
                opacity: 0;
                width: 0;
                padding: 0;
                overflow: hidden;
            }

            /* ─── Roomier, prettier nav items ─── */
            .nav-item {
                padding: 8px 13px;
                font-size: 12px;
                gap: 11px;
                margin: 2px 8px;
                border-radius: 9px;
            }

            .nav-item:hover {
                transform: translateX(2px);
            }

            .nav-icon {
                font-size: 15px;
                width: 20px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }

            .nav-icon svg {
                width: 18px;
                height: 18px;
                opacity: .85;
            }

            .nav-item:hover .nav-icon svg,.nav-item.active .nav-icon svg {
                opacity: 1;
            }

            /* ─── Mother folder (Foundation / Direct / BSc) ─── */
            .nav-mother {
                font-weight: 700;
                letter-spacing: .01em;
            }

            .nav-mother .nav-label {
                text-transform: uppercase;
                font-size: 11.5px;
                letter-spacing: .04em;
                color: var(--c-text2);
            }

            .nav-mother .nav-icon {
                color: var(--c-accent);
            }

            .nav-mother .nav-caret {
                margin-left: auto;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                color: var(--c-muted);
                transition: transform .28s cubic-bezier(.4,0,.2,1);
            }

            .nav-mother .nav-caret svg {
                width: 13px;
                height: 13px;
            }

            .nav-mother.collapsed-folder .nav-caret {
                transform: rotate(-90deg);
            }

            .nav-mother:hover {
                background: var(--c-surface3);
            }

            .nav-mother:hover .nav-caret {
                color: var(--c-text);
            }

            /* ─── Smooth dropdown body ─── */
            .nav-group-body {
                overflow: hidden;
                transform-origin: top;
                animation: navFolderOpen .28s ease both;
                padding: 2px 0 4px;
                margin-left: 10px;
                border-left: none;
            }

            @keyframes navFolderOpen {
                0% {
                    opacity: 0;
                    transform: translateY(-4px);
                }

                100% {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            /* each child fades in gently, slightly staggered */
            .nav-group-body .nav-item {
                animation: navChildIn .26s ease both;
                margin-left: 6px;
                margin-right: 8px;
            }

            @keyframes navChildIn {
                0% {
                    opacity: 0;
                    transform: translateY(-3px);
                }

                100% {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            .nav-group-body .nav-item:nth-child(1) {
                animation-delay: .02s;
            }

            .nav-group-body .nav-item:nth-child(2) {
                animation-delay: .05s;
            }

            .nav-group-body .nav-item:nth-child(3) {
                animation-delay: .08s;
            }

            .nav-group-body .nav-item:nth-child(4) {
                animation-delay: .11s;
            }

            .nav-group-body .nav-item:nth-child(5) {
                animation-delay: .14s;
            }

            .nav-group-body .nav-item:nth-child(6) {
                animation-delay: .17s;
            }

            .nav-group-body .nav-item:nth-child(7) {
                animation-delay: .20s;
            }

            .nav-group-body .nav-item:nth-child(n+8) {
                animation-delay: .22s;
            }

            /* Icon picker for New Tab (dropdown) */
            .iconpick-dd {
                position: relative;
                max-width: 240px;
            }

            .iconpick-trigger {
                display: flex;
                align-items: center;
                gap: 8px;
                width: 220px;
                padding: 8px 11px;
                border: 1.5px solid var(--c-border);
                background: var(--c-surface);
                border-radius: 9px;
                cursor: pointer;
                font-family: var(--font);
                color: var(--c-text);
                transition: border-color .15s;
            }

            .iconpick-trigger:hover {
                border-color: var(--c-accent);
            }

            .iconpick-trigger svg {
                width: 18px;
                height: 18px;
            }

            .iconpick-panel {
                position: absolute;
                top: calc(100% + 6px);
                left: 0;
                z-index: 50;
                width: 250px;
                background: var(--c-surface);
                border: 1.5px solid var(--c-border);
                border-radius: 12px;
                padding: 12px;
                box-shadow: 0 10px 30px rgba(0,0,0,.18);
            }

            .iconpick-row {
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
            }

            .iconpick-btn {
                width: 36px;
                height: 36px;
                border: 1.5px solid var(--c-border);
                background: var(--c-surface);
                border-radius: 9px;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--c-text2);
                transition: all .14s;
            }

            .iconpick-btn:hover {
                border-color: var(--c-accent);
                color: var(--c-accent);
                transform: translateY(-1px);
            }

            .iconpick-btn.sel {
                border-color: var(--c-accent);
                background: var(--c-accent-glow);
                color: var(--c-accent);
            }

            .iconpick-btn svg {
                width: 18px;
                height: 18px;
            }

            /* Admin: grouped tab sections */
            .adm-group-sec {
                margin-bottom: 18px;
            }

            .adm-group-head {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 9px 12px;
                cursor: pointer;
                background: var(--c-surface2);
                border: 1px solid var(--c-border);
                border-radius: 10px;
                margin-bottom: 12px;
                transition: background .15s;
                user-select: none;
            }

            .adm-group-head:hover {
                background: var(--c-surface3);
            }

            .adm-group-caret {
                font-size: 12px;
                color: var(--c-muted);
                transition: transform .2s;
            }

            .adm-group-head.collapsed .adm-group-caret {
                transform: rotate(-90deg);
            }

            .adm-group-title {
                font-family: var(--font-display);
                font-size: 14px;
                font-weight: 800;
                color: var(--c-text);
                flex: 1;
            }

            .adm-group-badge {
                font-size: 11px;
                font-weight: 700;
                color: var(--c-accent);
                background: var(--c-accent-glow);
                padding: 2px 10px;
                border-radius: 20px;
            }

            .adm-group-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
                gap: 14px;
                padding: 0 2px 6px;
            }

            .adm-group-empty {
                grid-column: 1/-1;
                color: var(--c-muted);
                font-size: 12px;
                font-style: italic;
                padding: 10px 4px;
            }

            .adm-tab-card.is-mother-card {
                border-top-width: 3px;
                box-shadow: 0 0 0 1.5px var(--c-accent-glow) inset;
            }

            @media(max-width: 900px) {
                .adm-group-grid {
                    grid-template-columns:1fr 1fr;
                }
            }

            /* Drill-in folder view */
            .adm-folder-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
                gap: 16px;
            }

            .adm-folder-card {
                background: var(--c-surface);
                border: 1.5px solid var(--c-border);
                border-radius: 14px;
                padding: 22px 18px;
                cursor: pointer;
                transition: all .18s;
                text-align: center;
                position: relative;
            }

            .adm-folder-card:hover {
                border-color: var(--c-accent);
                transform: translateY(-2px);
                box-shadow: 0 8px 22px rgba(0,0,0,.1);
            }

            .adm-folder-ic {
                font-size: 42px;
                line-height: 1;
                margin-bottom: 10px;
            }

            .adm-folder-name {
                font-family: var(--font-display);
                font-size: 16px;
                font-weight: 800;
                color: var(--c-text);
            }

            .adm-folder-count {
                font-size: 12px;
                color: var(--c-muted);
                margin-top: 5px;
            }

            .adm-folder-ungrouped {
                border-style: dashed;
            }

            .adm-folder-ungrouped .adm-folder-name {
                color: var(--c-gold,#b8860b);
            }

            .adm-folder-back {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                background: var(--c-surface2);
                border: 1px solid var(--c-border);
                color: var(--c-text);
                border-radius: 9px;
                padding: 7px 14px;
                font-size: 13px;
                font-weight: 600;
                cursor: pointer;
                font-family: var(--font);
                margin-bottom: 14px;
                transition: background .15s;
            }

            .adm-folder-back:hover {
                background: var(--c-surface3);
            }

            .adm-folder-viewttl {
                font-family: var(--font-display);
                font-size: 18px;
                font-weight: 800;
                color: var(--c-text);
                margin-bottom: 16px;
            }

            @media(max-width: 600px) {
                .adm-folder-grid {
                    grid-template-columns:1fr 1fr;
                }
            }

            /* ═══ Full-screen Cadet Profile ═══ */
            .cpfs-ov {
                overscroll-behavior: contain;
                position: fixed;
                top: 54px;
                right: 0;
                bottom: 0;
                left: 220px;
                z-index: 90;
                background: var(--c-bg);
                overflow-y: auto;
                animation: cpfsIn .22s ease;
            }

            @media(max-width: 1024px) {
                .cpfs-ov, body:has(.sidenav.collapsed) .cpfs-ov, body:has(.sidenav.auto-collapsed) .cpfs-ov {
                    left:0 !important;
                    z-index: 4000;
                    top: 54px;
                }
            }

            /* keep the bottom navigation bar visible on phones */
            @media(max-width: 640px) {
                .cpfs-ov, body:has(.sidenav.collapsed) .cpfs-ov, body:has(.sidenav.auto-collapsed) .cpfs-ov {
                    bottom: calc(62px + env(safe-area-inset-bottom, 0px));
                }
            }

            body:has(.sidenav.collapsed) .cpfs-ov, body:has(.sidenav.auto-collapsed) .cpfs-ov {
                left: 56px;
            }

            @keyframes cpfsIn {
                from {
                    opacity: 0;
                    transform: translateY(8px);
                }

                to {
                    opacity: 1;
                    transform: none;
                }
            }

            .cpfs-shell {
                max-width: 1120px;
                margin: 0 auto;
                padding: 0 18px 16px;
                height: 100%;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
            }

            /* top bar: breadcrumb + Edit */
            .cpfs-topbar {
                position: sticky;
                top: 0;
                z-index: 5;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
                padding: 10px 0;
                flex-shrink: 0;
                background: var(--c-bg);
            }

            .cpfs-crumbs {
                display: flex;
                align-items: center;
                gap: 12px;
                min-width: 0;
                font-size: 14px;
                color: var(--c-text);
            }

            .cpfs-back {
                background: none;
                border: none;
                color: var(--c-text);
                padding: 4px;
                cursor: pointer;
                display: flex;
                align-items: center;
                border-radius: 8px;
            }

            .cpfs-back:hover {
                background: var(--c-surface2);
            }

            .cpfs-back svg, .cpfs-crumb-sep svg {
                width: 20px;
                height: 20px;
                stroke: currentColor;
                fill: none;
                stroke-width: 2;
                stroke-linecap: round;
                stroke-linejoin: round;
            }

            .cpfs-crumb-p {
                font-weight: 600;
                cursor: pointer;
            }

            .cpfs-crumb-sep {
                display: flex;
                color: var(--c-muted);
            }

            .cpfs-crumb-sep svg {
                width: 16px;
                height: 16px;
            }

            .cpfs-topttl {
                font-weight: 700;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .cpfs-edit {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                background: var(--c-accent);
                color: #fff;
                border: none;
                border-radius: 12px;
                padding: 8px 18px;
                font-size: 14px;
                font-weight: 600;
                font-family: var(--font);
                cursor: pointer;
                box-shadow: 0 6px 16px var(--c-accent-glow);
                transition: filter .15s, transform .1s;
            }

            .cpfs-edit:hover {
                filter: brightness(1.08);
            }

            .cpfs-edit:active {
                transform: scale(.97);
            }

            .cpfs-edit svg {
                width: 18px;
                height: 18px;
                stroke: currentColor;
                fill: none;
                stroke-width: 2;
                stroke-linecap: round;
                stroke-linejoin: round;
            }

            /* two-column layout */
            .cpfs-layout {
                display: grid;
                grid-template-columns: 250px minmax(0, 1fr);
                gap: 16px;
                align-items: stretch;
                flex: 1;
                min-height: 0;
            }

            .cpfs-card {
                background: var(--c-surface);
                border: 1px solid var(--c-border);
                border-radius: 18px;
                box-shadow: 0 4px 18px rgba(20,40,90,.06);
            }

            .cpfs-side {
                padding: 12px 14px;
                overflow-y: auto;
                align-content: start;
                display: grid;
                grid-template-columns: 1fr;
                grid-template-areas: "photo" "head" "contacts";
                gap: 12px;
            }

            .cpfs-photo {
                grid-area: photo;
                width: 100%;
                height: clamp(90px, 18vh, 220px);
                border-radius: 12px;
                background: linear-gradient(135deg, #3b82f6, #1e3a8a);
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 44px;
                font-weight: 800;
                font-family: var(--font-display);
                overflow: hidden;
                position: relative;
            }

            .cpfs-photo img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: top center;
            }

            .cpfs-photo .cpfs-cam {
                position: absolute;
                bottom: 8px;
                right: 8px;
                background: rgba(0,0,0,.55);
                border: none;
                color: #fff;
                width: 32px;
                height: 32px;
                border-radius: 50%;
                cursor: pointer;
                font-size: 14px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .cpfs-head {
                grid-area: head;
                min-width: 0;
            }

            .cpfs-name {
                font-family: var(--font-display);
                font-size: 19px;
                font-weight: 800;
                color: var(--c-text);
                line-height: 1.2;
                word-break: break-word;
            }

            .cpfs-sub {
                font-size: 14px;
                color: var(--c-muted);
                margin-top: 3px;
            }

            .cpfs-chips {
                margin-top: 9px;
                display: flex;
                gap: 8px;
                flex-wrap: wrap;
            }

            .cpfs-status {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                border-radius: 999px;
                padding: 5px 13px 5px 10px;
                font-size: 13px;
                font-weight: 600;
                background: #dcf7e6;
                color: #15803d;
            }

            .cpfs-status i {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: currentColor;
                display: block;
            }

            .cpfs-status.amber {
                background: #fdf0d3;
                color: #b45309;
            }

            .cpfs-status.blue {
                background: #dde9ff;
                color: #1d4ed8;
            }

            .cpfs-status.grey {
                background: var(--c-surface2);
                color: var(--c-muted);
            }

            body.dark .cpfs-status {
                background: rgba(34,197,94,.16);
                color: #5be08d;
            }

            body.dark .cpfs-status.amber {
                background: rgba(245,158,11,.16);
                color: #f6c05a;
            }

            body.dark .cpfs-status.blue {
                background: rgba(91,155,255,.18);
                color: #8db8ff;
            }

            body.dark .cpfs-status.grey {
                background: rgba(255,255,255,.07);
                color: var(--c-muted);
            }

            .cpfs-contacts {
                grid-area: contacts;
                display: flex;
                flex-direction: column;
            }

            .cpfs-ct {
                display: flex;
                align-items: flex-start;
                gap: 11px;
                padding: 3px 0;
                min-width: 0;
            }

            .cpfs-ct.wide {
                grid-column: 1 / -1;
            }

            .cpfs-ct svg {
                width: 20px;
                height: 20px;
                flex-shrink: 0;
                margin-top: 2px;
                stroke: var(--c-text);
                fill: none;
                stroke-width: 1.8;
                stroke-linecap: round;
                stroke-linejoin: round;
            }

            .cpfs-ct > div {
                min-width: 0;
            }

            .cpfs-ct-k {
                font-size: 12px;
                color: var(--c-muted);
                line-height: 1.25;
            }

            .cpfs-ct-v {
                font-size: 13.5px;
                color: var(--c-text);
                font-weight: 500;
                margin-top: 1px;
                word-break: break-word;
            }

            /* right card: tabs + body */
            .cpfs-main {
                min-width: 0;
                overflow: hidden;
                display: flex;
                flex-direction: column;
            }

            .cpfs-tabs {
                display: flex;
                gap: 6px;
                overflow-x: auto;
                border-bottom: 1.5px solid var(--c-border);
                margin: 0 20px;
                flex-shrink: 0;
                scrollbar-width: none;
            }

            .cpfs-tabs::-webkit-scrollbar {
                display: none;
            }

            .cpfs-tab {
                padding: 14px 14px 11px;
                font-size: 14px;
                font-weight: 600;
                color: var(--c-text);
                cursor: pointer;
                white-space: nowrap;
                border: none;
                background: none;
                font-family: var(--font);
                border-bottom: 3px solid transparent;
                margin-bottom: -1.5px;
                transition: color .15s, border-color .15s;
            }

            .cpfs-tab:hover {
                color: var(--c-accent);
            }

            .cpfs-tab.active {
                color: var(--c-accent);
                border-bottom-color: var(--c-accent);
            }

            .cpfs-body {
                padding: 0 24px 20px;
                overflow: auto;
                flex: 1;
                min-height: 0;
            }

            .cpfs-sec {
                padding-top: 16px;
            }

            .cpfs-sec + .cpfs-sec {
                margin-top: 16px;
                border-top: 1px solid var(--c-border);
            }

            .cpfs-sectitle {
                display: flex;
                align-items: center;
                gap: 14px;
                font-family: var(--font-display);
                font-size: 16px;
                font-weight: 800;
                color: var(--c-text);
                padding-bottom: 8px;
                margin-bottom: 4px;
                border-bottom: 1px solid var(--c-border);
            }

            .cpfs-sectitle .cpfs-sico {
                display: none;
                width: 42px;
                height: 42px;
                border-radius: 10px;
                background: var(--c-accent-glow);
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }

            .cpfs-sectitle .cpfs-sico svg {
                width: 22px;
                height: 22px;
                stroke: var(--c-accent);
                fill: none;
                stroke-width: 1.9;
                stroke-linecap: round;
                stroke-linejoin: round;
            }

            .cpfs-row {
                display: grid;
                grid-template-columns: minmax(120px, 42%) minmax(0, 1fr);
                gap: 14px;
                padding: 6px 0;
                font-size: 14px;
                line-height: 1.45;
            }

            .cpfs-row .cpfs-k {
                color: var(--c-muted);
            }

            .cpfs-row .cpfs-v {
                color: var(--c-text);
                font-weight: 500;
                word-break: break-word;
            }

            .cpfs-row .cpfs-v.hl {
                color: var(--c-accent);
                font-weight: 600;
            }

            .cpfs-row .cpfs-v.none {
                color: var(--c-muted);
                opacity: .6;
            }

            /* sea-service / career cards */
            .cpfs-entry {
                border: 1px solid var(--c-border);
                border-radius: 14px;
                padding: 4px 18px 8px;
                margin-top: 16px;
                background: var(--c-surface2);
            }

            .cpfs-entry-h {
                font-family: var(--font-display);
                font-size: 16px;
                font-weight: 800;
                color: var(--c-text);
                padding: 12px 0 8px;
                border-bottom: 1px solid var(--c-border);
                margin-bottom: 4px;
            }

            .cpfs-entry-h small {
                display: block;
                font-family: var(--font);
                font-weight: 500;
                color: var(--c-muted);
                font-size: 13px;
                margin-top: 2px;
            }

            .cpfs-empty {
                color: var(--c-muted);
                font-size: 14px;
                font-style: italic;
                padding: 26px 0;
            }

            /* ── tablet / mobile ── */
            @media(max-width: 900px) {
                .cpfs-shell {
                    height: auto;
                    display: block;
                    padding-bottom: 24px;
                }

                .cpfs-layout {
                    grid-template-columns: 1fr;
                    display: grid;
                }

                .cpfs-side, .cpfs-body {
                    overflow: visible;
                }

                .cpfs-photo {
                    height: auto !important;
                }

                .cpfs-side {
                    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
                    grid-template-areas: "photo head" "contacts contacts";
                    gap: 14px 20px;
                    padding: 16px;
                }

                .cpfs-photo {
                    aspect-ratio: 1 / 1.1;
                    font-size: 38px;
                }

                .cpfs-head {
                    align-self: start;
                    padding-top: 8px;
                }

                .cpfs-name {
                    font-size: 24px;
                }

                .cpfs-sub {
                    font-size: 15px;
                }

                .cpfs-contacts {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    column-gap: 14px;
                    border-top: 1px solid var(--c-border);
                }

                .cpfs-ct {
                    padding: 12px 0;
                    border-bottom: 1px solid var(--c-border);
                }

                .cpfs-ct svg {
                    width: 22px;
                    height: 22px;
                }

                .cpfs-ct-k {
                    font-size: 13px;
                }

                .cpfs-ct-v {
                    font-size: 14px;
                }

                .cpfs-sectitle .cpfs-sico {
                    display: flex;
                }
            }

            @media(max-width: 600px) {
                .cpfs-shell {
                    padding: 0 14px 40px;
                }

                .cpfs-topbar {
                    padding: 12px 0;
                }

                .cpfs-crumb-p, .cpfs-crumb-sep {
                    display: none;
                }

                .cpfs-topttl {
                    font-size: 18px;
                }

                .cpfs-edit {
                    padding: 10px 18px;
                    font-size: 14px;
                }

                .cpfs-tabs {
                    margin: 0 12px;
                }

                .cpfs-tab {
                    padding: 16px 12px 13px;
                    font-size: 14px;
                }

                .cpfs-body {
                    padding: 4px 16px 24px;
                }

                .cpfs-sectitle {
                    font-size: 17px;
                }

                .cpfs-row {
                    grid-template-columns: minmax(96px, 38%) minmax(0, 1fr);
                    gap: 12px;
                    font-size: 14px;
                    padding: 7px 0;
                }
            }

            /* ── bottom bars: slim, hidden in the collapsed menu note, hidden under the profile page ── */
            .sidenav.collapsed .nav-empty-note, .sidenav.auto-collapsed:not(:hover) .nav-empty-note {
                display: none;
            }

            /* desktop: sheet tabs (left) and scroll/zoom bar (right) share ONE row */
            @media(min-width: 901px) {
                body:has(#tbl-bottombar[style*="flex"]) .sheet-tabs {
                    right: 300px;
                    border-right: none;
                    box-shadow: none;
                }

                #tbl-bottombar {
                    left: auto !important;
                    right: 0 !important;
                    width: 300px !important;
                    height: 30px !important;
                    padding: 3px 14px 3px 8px !important;
                    border-top: 1.5px solid var(--c-border);
                }
            }

            body:has(.cpfs-ov[style*="block"]) #tbl-bottombar, body:has(.cpfs-ov[style*="block"]) .sheet-tabs {
                display: none !important;
            }

            /* ── Cadet Summary sheet (CINEC style) ── */
            .sum-toolbar {
                display: flex;
                gap: 8px;
                margin-bottom: 16px;
                flex-wrap: wrap;
            }

            .sum-btn {
                background: var(--c-surface2);
                border: 1.5px solid var(--c-border);
                color: var(--c-text);
                border-radius: 8px;
                padding: 8px 16px;
                font-size: 13px;
                font-weight: 600;
                cursor: pointer;
                font-family: var(--font);
                transition: all .15s;
            }

            .sum-btn:hover {
                background: var(--c-surface3);
            }

            .sum-btn-save {
                background: var(--c-green,#16a34a);
                color: #fff;
                border-color: transparent;
            }

            .sum-btn-blue {
                background: var(--c-accent);
                color: #fff;
                border-color: transparent;
            }

            .sum-btn-grey {
                opacity: .8;
            }

            .sum-sheet {
                background: #fff;
                color: #111;
                padding: 22px;
                border-radius: 8px;
                border: 1px solid var(--c-border);
                max-width: 900px;
                box-shadow: 0 2px 12px rgba(0,0,0,.06);
            }

            body.dark .sum-sheet {
                background: #f8f8f8;
            }

            .sum-title {
                text-align: center;
                font-family: 'Times New Roman',serif;
                font-weight: 800;
                font-size: 20px;
                color: #111;
                margin-bottom: 6px;
                letter-spacing: .5px;
            }

            .sum-topid {
                font-size: 11px;
                color: #333;
                margin-bottom: 10px;
                font-family: monospace;
            }

            .sum-grid2 {
                display: grid;
                grid-template-columns: 1.6fr 1fr;
                gap: 16px;
                align-items: start;
            }

            .sum-tbl {
                border-collapse: collapse;
                width: 100%;
                border: 1px solid #333;
            }

            .sum-tbl td, .sum-tbl th {
                border: 1px solid #333;
                padding: 5px 9px;
                font-size: 12.5px;
                color: #111;
                font-family: 'Times New Roman',serif;
            }

            .sum-k {
                font-weight: 700;
                width: 44%;
                background: #fafafa;
            }

            .sum-v {
                background: #fff;
            }

            .sum-ip .sum-k {
                background: #f0d6f0;
            }

            .sum-exam th {
                text-align: center;
                background: #fff;
                font-weight: 800;
                font-family: 'Times New Roman',serif;
            }

            .sum-ex-code {
                font-weight: 700;
                text-align: center;
                width: 55%;
            }

            .sum-ex-val {
                text-align: center;
            }

            .sum-ex-val .sum-in {
                text-align: center;
            }

            .sum-avr td {
                background: #bfe3f5 !important;
                font-weight: 800;
            }

            .sum-total td {
                font-weight: 700;
            }

            .sum-parent {
                margin-top: 14px;
                width: 65%;
            }

            .sum-company {
                margin-top: 16px;
            }

            .sum-company .sum-comp-head th {
                background: #dbeafe;
                text-align: center;
                font-weight: 700;
                font-size: 11.5px;
            }

            .sum-company td {
                text-align: center;
            }

            .sum-company td.sum-k {
                text-align: left;
                background: #eaf2ff;
            }

            .sum-company tr:nth-child(3) td {
                background: #dcfce7;
            }

            .sum-selected-row td {
                background: #fef08a !important;
                font-weight: 700;
            }

            .sum-vessel {
                margin-top: 16px;
            }

            .sum-vessel .sum-vessel-head th {
                background: #dcfce7;
                text-align: center;
                font-weight: 700;
                font-size: 11.5px;
            }

            .sum-vessel td {
                text-align: center;
                background: #f0fdf4;
            }

            .sum-section-lbl {
                font-family: 'Times New Roman',serif;
                font-weight: 800;
                font-size: 13px;
                color: #111;
                margin: 16px 0 6px;
            }

            .sum-company th, .sum-sea th {
                background: #eaeaea;
                text-align: center;
                font-weight: 700;
                font-size: 11px;
                padding: 5px 6px;
            }

            .sum-company td, .sum-sea td {
                text-align: center;
                font-size: 11.5px;
            }

            .sum-company .sum-k {
                text-align: left;
            }

            .sum-selrow .sum-k {
                background: #fff59d;
            }

            .sum-selrow .sum-v {
                background: #fff59d;
                font-weight: 700;
            }

            .sum-sea td {
                background: #e6f4e6;
            }

            .sum-sea th {
                background: #cfe8cf;
            }

            .sum-in {
                width: 100%;
                border: 1px solid var(--c-accent);
                border-radius: 4px;
                padding: 3px 6px;
                font-size: 12.5px;
                font-family: 'Times New Roman',serif;
                background: #fffbe6;
                color: #111;
            }

            .sum-in-sm {
                text-align: center;
            }

            @media(max-width: 700px) {
                .sum-grid2 {
                    grid-template-columns:1fr;
                }

                .sum-parent {
                    width: 100%;
                }
            }

            @media print {
                .no-print {
                    display: none !important;
                }
            }

            /* Collapsed & auto-collapsed: perfectly center the icon in the slim bar */
            .sidenav.collapsed .nav-item, .sidenav.auto-collapsed .nav-item {
                padding: 10px 0;
                justify-content: center;
                margin: 2px 6px;
                gap: 0;
            }

            .sidenav.collapsed .nav-icon, .sidenav.auto-collapsed .nav-icon {
                width: auto;
                margin: 0;
            }

            .nav-divider {
                border: none;
                border-top: 1px solid var(--c-border);
                margin: 4px 12px;
            }

            /* Tooltip on manually collapsed bar (auto-collapsed already shows names on hover-expand) */
            .sidenav.collapsed .nav-item::after {
                content: attr(data-label);
                position: absolute;
                left: 56px;
                top: 50%;
                transform: translateY(-50%) translateX(-6px);
                background: var(--c-navy);
                color: #fff;
                padding: 6px 12px;
                border-radius: 8px;
                font-size: 11px;
                font-weight: 600;
                white-space: nowrap;
                z-index: 999;
                box-shadow: 0 4px 16px rgba(10,25,65,0.35);
                pointer-events: none;
                border: 1px solid var(--c-border);
                opacity: 0;
                transition: opacity .15s,transform .15s;
            }

            .sidenav.collapsed .nav-item:hover::after {
                opacity: 1;
                transform: translateY(-50%) translateX(0);
            }

            /* Nav footer */
            .nav-footer {
                border-top: 1px solid var(--c-border);
                padding: 10px 8px;
                display: flex;
                flex-direction: column;
                gap: 4px;
                flex-shrink: 0;
            }

            .nav-footer-btn {
                background: var(--c-surface3);
                border: 1px solid var(--c-border);
                color: var(--c-text2);
                border-radius: 8px;
                padding: 8px 10px;
                font-size: 11px;
                font-weight: 600;
                cursor: pointer;
                font-family: var(--font);
                display: flex;
                align-items: center;
                gap: 8px;
                white-space: nowrap;
                overflow: hidden;
                transition: all .2s;
            }

            .nav-footer-btn:hover {
                background: var(--c-border2);
                color: var(--c-text);
                border-color: var(--c-border2);
            }

            .nfb-lbl {
                transition: opacity .2s,max-width .22s;
                overflow: hidden;
            }

            .sidenav.collapsed .nfb-lbl {
                opacity: 0;
                max-width: 0;
            }

            .sidenav.collapsed .nav-footer-btn {
                justify-content: center;
            }

            /* ── Sidebar total stat ── */
            .nav-total-stat {
                display: flex;
                align-items: center;
                gap: 6px;
                font-size: 11px;
                font-weight: 600;
                color: var(--c-text2);
                padding: 6px 10px;
                margin-bottom: 2px;
                background: var(--c-surface3);
                border: 1px solid var(--c-border);
                border-radius: 8px;
                white-space: nowrap;
                overflow: hidden;
            }

            .nav-total-stat strong {
                color: var(--c-accent);
                font-size: 13px;
            }

            .sidenav.collapsed .nts-lbl,.sidenav.auto-collapsed:not(:hover) .nts-lbl {
                display: none;
            }

            /* ── Sidebar profile (drop-up) ── */
            .side-profile-wrap {
                position: relative;
                margin-top: 6px;
            }

            .side-profile-btn {
                width: 100%;
                display: flex;
                align-items: center;
                gap: 10px;
                background: var(--c-surface3);
                border: 1px solid var(--c-border);
                border-radius: 10px;
                padding: 7px 9px;
                cursor: pointer;
                font-family: var(--font);
                transition: background .18s;
            }

            .side-profile-btn:hover {
                background: var(--c-border2);
            }

            .side-profile-avatar {
                width: 32px;
                height: 32px;
                border-radius: 50%;
                flex-shrink: 0;
                background: linear-gradient(135deg,#2f6cf6,#1e50c8);
                color: #fff;
                font-weight: 800;
                font-size: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-size: cover;
                background-position: center;
            }

            .side-profile-info {
                display: flex;
                flex-direction: column;
                text-align: left;
                overflow: hidden;
                flex: 1;
            }

            .side-profile-name {
                font-size: 12.5px;
                font-weight: 700;
                color: var(--c-text);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .side-profile-role {
                font-size: 10px;
                color: var(--c-gold,#e0a800);
                font-weight: 600;
                white-space: nowrap;
            }

            .side-profile-caret {
                color: var(--c-muted);
                font-size: 12px;
                transition: transform .2s;
            }

            .side-profile-caret.up {
                transform: rotate(0deg);
            }

            .sidenav.collapsed .side-profile-info,.sidenav.collapsed .side-profile-caret {
                display: none;
            }

            .sidenav.collapsed .side-profile-btn {
                justify-content: center;
                padding: 7px 0;
            }

            .sidenav.auto-collapsed:not(:hover) .side-profile-info,.sidenav.auto-collapsed:not(:hover) .side-profile-caret {
                display: none;
            }

            .sidenav.auto-collapsed:not(:hover) .side-profile-btn {
                justify-content: center;
                padding: 7px 0;
            }

            .side-profile-menu {
                position: absolute;
                bottom: calc(100% + 8px);
                left: 0;
                right: 0;
                z-index: 1000;
                background: var(--c-surface);
                border: 1.5px solid var(--c-border);
                border-radius: 12px;
                box-shadow: 0 -10px 34px rgba(0,0,0,0.4);
                padding: 6px;
                display: none;
                animation: dropUpIn .2s cubic-bezier(.34,1.56,.64,1);
                transform-origin: bottom center;
            }

            .side-profile-menu.open {
                display: block;
            }

            .spm-item {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 11px 12px;
                font-size: 13px;
                color: var(--c-text);
                border-radius: 9px;
                white-space: nowrap;
            }

            .spm-click {
                cursor: pointer;
                transition: background .15s;
            }

            .spm-click:hover {
                background: var(--c-surface2);
            }

            .spm-divider {
                height: 1px;
                background: var(--c-border);
                margin: 4px 8px;
            }

            .spm-signout {
                color: var(--c-red,#dc2626);
                font-weight: 600;
            }

            .spm-signout:hover {
                background: var(--c-red-bg,#fde8e8);
            }

            .pd-ic {
                width: 20px;
                text-align: center;
                font-size: 15px;
                flex-shrink: 0;
            }

            .mp-dp-row {
                display: flex;
                align-items: center;
                gap: 16px;
                margin-bottom: 18px;
            }

            .mp-dp {
                width: 72px;
                height: 72px;
                border-radius: 50%;
                flex-shrink: 0;
                background: linear-gradient(135deg,#2f6cf6,#1e50c8);
                background-size: cover;
                background-position: center;
                color: #fff;
                font-weight: 800;
                font-size: 26px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .mp-field {
                margin-bottom: 14px;
                display: flex;
                flex-direction: column;
                gap: 5px;
            }

            .mp-field label {
                font-size: 12px;
                font-weight: 700;
                color: var(--c-text2);
            }

            .mp-field input,.mp-field textarea {
                padding: 9px 12px;
                border-radius: 9px;
                border: 1.5px solid var(--c-border);
                background: var(--c-surface);
                color: var(--c-text);
                font-size: 13px;
                font-family: var(--font);
                resize: vertical;
            }

            .mp-field input:focus,.mp-field textarea:focus {
                outline: 1.5px solid var(--c-accent);
                outline-offset: -1px;
            }

            .mp-note {
                font-size: 10.5px;
                color: var(--c-muted);
            }

            /* Mobile profile bottom sheet */
            #mobile-profile-sheet {
                align-items: flex-end;
                z-index: 9500;
            }

            .mob-sheet {
                background: var(--c-surface);
                width: 100%;
                border-radius: 20px 20px 0 0;
                padding: 8px 14px calc(24px + env(safe-area-inset-bottom,0px));
                animation: sheetUp .25s cubic-bezier(.22,.61,.36,1);
                max-height: 80vh;
                overflow-y: auto;
                position: relative;
                z-index: 9600;
                box-shadow: 0 -8px 30px rgba(0,0,0,0.3);
            }

            @keyframes sheetUp {
                from {
                    transform: translateY(100%);
                }

                to {
                    transform: translateY(0);
                }
            }

            .mob-sheet-handle {
                width: 40px;
                height: 4px;
                border-radius: 3px;
                background: var(--c-border2,#ccc);
                margin: 6px auto 14px;
            }

            .mob-sheet-header {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 4px 6px 14px;
                border-bottom: 1px solid var(--c-border);
                margin-bottom: 8px;
            }

            .mob-sheet-avatar {
                width: 46px;
                height: 46px;
                border-radius: 50%;
                background: linear-gradient(135deg,#2f6cf6,#1e50c8);
                background-size: cover;
                background-position: center;
                color: #fff;
                font-weight: 800;
                font-size: 17px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .mob-sheet-name {
                font-weight: 700;
                font-size: 16px;
                color: var(--c-text);
            }

            .mob-sheet-role {
                font-size: 12px;
                color: var(--c-gold,#e0a800);
                font-weight: 600;
            }

            .mob-sheet-item {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 15px 8px;
                font-size: 15px;
                color: var(--c-text);
                border-radius: 10px;
                cursor: pointer;
            }

            .mob-sheet-item:active {
                background: var(--c-surface2);
            }

            .mob-signout {
                color: var(--c-red,#dc2626);
                font-weight: 600;
            }

            /* ═══════════════════════════════════════════════════
   INNER TABS
═══════════════════════════════════════════════════ */
            .itabs {
                display: flex;
                background: var(--c-surface);
                border-bottom: 1px solid var(--c-border);
                padding: 0 16px;
                overflow-x: auto;
                scrollbar-width: none;
                transition: background var(--transition),border-color var(--transition);
            }

            .itabs::-webkit-scrollbar {
                display: none;
            }

            .itab {
                padding: 11px 16px;
                font-size: 12px;
                font-weight: 600;
                color: var(--c-muted);
                cursor: pointer;
                border-bottom: 2px solid transparent;
                margin-bottom: -1px;
                transition: all .2s;
                user-select: none;
                white-space: nowrap;
                flex-shrink: 0;
                letter-spacing: .1px;
            }

            .itab:hover {
                color: var(--c-text);
            }

            .itab.active {
                color: var(--c-accent);
                border-bottom-color: var(--c-accent);
            }

            /* Records/Add/Summary bar with right-aligned selection actions */
            .sp-itab-actions {
                margin-left: auto;
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 6px 0;
                flex-shrink: 0;
            }

            .sp-itab-actions .wa-sel-info {
                font-size: 11px;
                color: var(--c-muted);
                white-space: nowrap;
            }

            .sp-itab-actions .wa-col-btn,.sp-itab-actions .wa-export-btn,.sp-itab-actions .wa-clear-btn {
                white-space: nowrap;
            }

            /* Sub-tab strip is navy in BOTH themes, so its contents are styled for a dark
   background — the theme variables here are tuned for light surfaces and wash out. */
            .sp-itabs-nav {
                background: #243b60;
                border-top: 1px solid #1a2d50;
                border-bottom-color: #1a2d50;
            }

            body.dark .sp-itabs-nav {
                background: #16233d;
                border-top-color: #0e1a2f;
                border-bottom-color: #0e1a2f;
            }

            .sp-itabs-nav .itab {
                color: rgba(255,255,255,0.66);
            }

            .sp-itabs-nav .itab:hover {
                color: #fff;
            }

            .sp-itabs-nav .itab.active {
                color: #fff;
                border-bottom-color: #6ea8ff;
            }

            .sp-itabs-nav .wa-sel-info {
                color: rgba(255,255,255,0.75);
            }

            .sp-itabs-nav .wa-col-btn,.sp-itabs-nav .wa-clear-btn {
                background: rgba(255,255,255,0.12);
                border-color: rgba(255,255,255,0.34);
                color: #fff;
            }

            .sp-itabs-nav .wa-col-btn:hover,.sp-itabs-nav .wa-clear-btn:hover {
                background: rgba(255,255,255,0.24);
                border-color: rgba(255,255,255,0.5);
            }

            .sp-itabs-nav .wa-export-btn {
                background: #2f6cf6;
                color: #fff;
                box-shadow: 0 2px 8px rgba(0,0,0,0.28);
            }

            .sp-itabs-nav .wa-export-btn:hover {
                background: #1e50c8;
            }

            @media(max-width: 760px) {
                .sp-itabs {
                    flex-wrap:wrap;
                }

                .sp-itab-actions {
                    margin-left: 0;
                    width: 100%;
                    justify-content: flex-end;
                    border-top: 1px solid var(--c-border);
                }
            }

            /* Excel-style sheet tabs (category sub-tabs) — pinned at bottom */
            .sheet-wrap {
                display: flex;
                flex-direction: column;
                flex: 1;
            }

            .sheet-panels {
                flex: 1;
                padding-bottom: 40px;
            }

            .sheet-panels .sub-panel {
                height: 100%;
            }

            .sheet-tabs {
                position: fixed;
                bottom: 0;
                left: 220px;
                right: 0;
                z-index: 65;
                display: flex;
                gap: 8px;
                align-items: flex-end;
                background: var(--c-surface2);
                border-top: 1.5px solid var(--c-border);
                padding: 3px 12px 0;
                height: 30px;
                box-sizing: border-box;
                box-shadow: 0 -3px 12px rgba(0,0,0,0.12);
            }

            .sheet-tabs-scroll {
                display: flex;
                gap: 3px;
                align-items: flex-end;
                overflow-x: auto;
                scrollbar-width: thin;
                flex: 1 1 auto;
                min-width: 0;
            }

            .sheet-tabs-scroll::-webkit-scrollbar {
                height: 3px;
            }

            .sheet-tabs-scroll::-webkit-scrollbar-thumb {
                background: var(--c-border2,#9ab);
                border-radius: 6px;
            }

            .sheet-tabs-pager {
                flex-shrink: 0;
                display: flex;
                align-items: center;
                margin-left: 14px;
                padding-right: 14px;
            }

            .sheet-tabs-spacer {
                display: none;
            }

            @media(max-width: 1024px) {
                .sheet-tabs {
                    left:180px;
                }
            }

            @media(max-width: 640px) {
                .sheet-tabs {
                    left:0;
                    bottom: 82px;
                }
            }

            .sheet-tab {
                padding: 5px 14px;
                font-size: 12px;
                font-weight: 600;
                color: var(--c-text2);
                cursor: pointer;
                white-space: nowrap;
                flex-shrink: 0;
                background: var(--c-surface3);
                border: 1px solid var(--c-border);
                border-bottom: none;
                border-radius: 7px 7px 0 0;
                margin-bottom: 0;
                transition: background .15s,color .15s;
                user-select: none;
            }

            .sheet-tab:hover {
                background: var(--c-surface);
                color: var(--c-text);
            }

            .sheet-tab.active {
                background: var(--c-surface);
                color: var(--c-accent);
                font-weight: 700;
                border-top: 2px solid var(--c-accent);
                box-shadow: 0 -2px 6px rgba(0,0,0,0.08);
            }

            body.dark .sheet-tabs {
                background: #0e1b34;
            }

            body.dark .sheet-tab {
                background: #152a4d;
            }

            body.dark .sheet-tab.active {
                background: #1d3763;
            }

            .panel {
                display: none;
                padding: 18px;
            }

            .panel.active {
                display: block;
                animation: fadeInOnly .3s ease both;
            }

            .cat-panel {
                display: none;
            }

            .cat-panel.active {
                display: block;
                animation: fadeUp .34s cubic-bezier(.22,.61,.36,1) both;
            }

            /* panels containing sheet tabs must not carry a lingering transform (it would trap position:fixed) */
            .cat-panel.active:has(.sheet-wrap) {
                animation: fadeIn .34s ease both;
            }

            /* custom category panels that contain sheet tabs fill the viewport height */
            #cust-panels {
                display: flex;
                flex-direction: column;
                min-height: 0;
            }

            #cust-panels:has(.cat-panel.active) {
                flex: 1;
            }

            .cat-panel.active:has(.sheet-wrap) {
                display: flex;
                flex-direction: column;
                flex: 1;
                min-height: 0;
            }

            /* ═══════════════════════════════════════════════════
   HOME PANEL
═══════════════════════════════════════════════════ */
            #cp-home {
                padding: 0;
                min-height: 100%;
            }

            .home-inner {
                max-width: 900px;
                width: 100%;
                margin: 0 auto;
                padding: 28px 24px 60px;
            }

            .home-hero {
                background: linear-gradient(135deg,#060f22 0%,#0b1f45 50%,#162d60 100%);
                border-radius: 20px;
                padding: 40px 32px 36px;
                margin-bottom: 22px;
                color: #fff;
                text-align: center;
                box-shadow: 0 8px 32px rgba(6,15,34,0.5),inset 0 1px 0 rgba(255,255,255,0.08);
                position: relative;
                overflow: hidden;
            }

            .home-hero::before {
                content: '';
                position: absolute;
                top: -50%;
                left: -50%;
                width: 200%;
                height: 200%;
                background: radial-gradient(ellipse at 60% 40%,rgba(47,108,246,0.12) 0%,transparent 60%);
                pointer-events: none;
            }

            .home-hero-anchor {
                font-size: 56px;
                display: block;
                margin-bottom: 12px;
                filter: drop-shadow(0 0 20px rgba(59,130,246,0.5));
                animation: anchorBob 4s ease-in-out infinite;
            }

            .home-hero h2 {
                font-family: var(--font-display);
                font-size: 26px;
                font-weight: 800;
                margin-bottom: 8px;
                letter-spacing: -.5px;
            }

            .home-hero p {
                font-size: 13px;
                color: rgba(255,255,255,0.5);
            }

            .home-stats-row {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                gap: 14px;
                margin-bottom: 22px;
            }

            .hs-card {
                background: var(--c-surface);
                border-radius: var(--radius-lg);
                padding: 20px 16px 18px;
                text-align: center;
                box-shadow: var(--shadow-card);
                border-top: 3px solid var(--c-border);
                transition: transform .2s,box-shadow .2s,background var(--transition);
                cursor: default;
            }

            .hs-card:hover {
                transform: translateY(-3px);
                box-shadow: var(--shadow-md);
            }

            .hs-card:nth-child(1) {
                border-top-color: var(--c-accent);
            }

            .hs-card:nth-child(2) {
                border-top-color: var(--c-green);
            }

            .hs-card:nth-child(3) {
                border-top-color: var(--c-red);
            }

            .hs-num {
                font-family: var(--font-display);
                font-size: 40px;
                font-weight: 800;
                color: var(--c-text);
                line-height: 1;
                animation: countUp .4s cubic-bezier(.34,1.56,.64,1);
            }

            .hs-card:nth-child(2) .hs-num {
                color: var(--c-green);
            }

            .hs-card:nth-child(3) .hs-num {
                color: var(--c-red);
            }

            .hs-lbl {
                font-size: 10px;
                color: var(--c-muted);
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: .8px;
                margin-top: 6px;
            }

            .home-search-card {
                background: var(--c-surface);
                border-radius: var(--radius-lg);
                padding: 22px;
                box-shadow: var(--shadow-card);
                transition: background var(--transition);
            }

            .home-search-card h3 {
                font-family: var(--font-display);
                font-size: 14px;
                font-weight: 700;
                color: var(--c-text);
                margin-bottom: 14px;
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .hs-input-row {
                display: flex;
                gap: 8px;
            }

            .hs-input {
                flex: 1;
                border: 1.5px solid var(--c-border);
                border-radius: 10px;
                padding: 11px 16px;
                font-family: var(--font);
                font-size: 14px;
                color: var(--c-text);
                background: var(--c-surface2);
                outline: none;
                transition: all .2s;
            }

            .hs-input:focus {
                border-color: var(--c-accent);
                background: var(--c-surface);
                box-shadow: 0 0 0 3px var(--c-accent-glow);
            }

            .hs-input::placeholder {
                color: var(--c-muted);
            }

            .hs-btn {
                background: linear-gradient(135deg,var(--c-accent),#1e50c8);
                color: #fff;
                border: none;
                border-radius: 10px;
                padding: 11px 22px;
                font-family: var(--font);
                font-size: 13px;
                font-weight: 600;
                cursor: pointer;
                white-space: nowrap;
                transition: all .2s;
                box-shadow: 0 2px 8px rgba(47,108,246,0.3);
            }

            .hs-btn:hover {
                transform: translateY(-1px);
                box-shadow: 0 4px 14px rgba(47,108,246,0.4);
            }

            .hs-clear {
                background: var(--c-surface3);
                color: var(--c-muted);
                border: 1.5px solid var(--c-border);
                border-radius: 10px;
                padding: 11px 12px;
                font-size: 13px;
                cursor: pointer;
                display: none;
                transition: all .2s;
            }

            .hs-clear:hover {
                background: var(--c-red-bg);
                color: var(--c-red);
                border-color: var(--c-red);
            }

            #home-search-results,.home-results-area {
                margin-top: 16px;
            }

            /* ═══════════════════════════════════════════════════
   FORMS
═══════════════════════════════════════════════════ */
            .form-card {
                background: var(--c-surface);
                border-radius: var(--radius-lg);
                box-shadow: var(--shadow-card);
                padding: 28px 32px;
                max-width: 1400px;
                transition: background var(--transition);
            }

            .form-card h2 {
                font-family: var(--font-display);
                font-size: 15px;
                font-weight: 700;
                color: var(--c-text);
                margin-bottom: 20px;
                padding-bottom: 12px;
                border-bottom: 1.5px solid var(--c-border);
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .form-layout {
                display: flex;
                gap: 22px;
                align-items: flex-start;
            }

            .form-fields {
                flex: 1;
                min-width: 0;
            }

            .form-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
                gap: 14px;
            }

            .fg-3 {
                grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
            }

            .form-group {
                display: flex;
                flex-direction: column;
                gap: 5px;
            }

            .form-group.full {
                grid-column: 1/-1;
            }

            .form-group label {
                font-size: 10px;
                font-weight: 700;
                color: var(--c-muted);
                text-transform: uppercase;
                letter-spacing: .6px;
            }

            .form-group input,.form-group select,.form-group textarea {
                border: 1.5px solid var(--c-border);
                border-radius: 8px;
                padding: 9px 12px;
                font-family: var(--font);
                font-size: 13px;
                color: var(--c-text);
                background: var(--c-surface2);
                outline: none;
                transition: all .2s;
            }

            .form-group input:focus,.form-group select:focus,.form-group textarea:focus {
                border-color: var(--c-accent);
                background: var(--c-surface);
                box-shadow: 0 0 0 3px var(--c-accent-glow);
            }

            .form-group textarea {
                resize: vertical;
                min-height: 64px;
            }

            .form-group select {
                cursor: pointer;
            }

            .form-actions {
                display: flex;
                gap: 10px;
                margin-top: 18px;
            }

            .req {
                color: var(--c-red);
            }

            /* Photo upload */
            .photo-col {
                width: 155px;
                flex-shrink: 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 10px;
            }

            .photo-box {
                width: 134px;
                height: 160px;
                border-radius: 12px;
                border: 2px dashed var(--c-border2);
                background: var(--c-surface2);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                overflow: hidden;
                cursor: pointer;
                transition: all .2s;
            }

            .photo-box:hover {
                border-color: var(--c-accent);
                background: var(--c-surface3);
                transform: scale(1.01);
            }

            .photo-box img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 10px;
            }

            .ph-icon {
                font-size: 32px;
                color: var(--c-muted);
            }

            .ph-txt {
                font-size: 11px;
                color: var(--c-muted);
                margin-top: 6px;
            }

            .photo-btns {
                display: flex;
                gap: 6px;
            }

            .btn-ph {
                background: var(--c-accent);
                color: #fff;
                font-size: 10px;
                padding: 5px 12px;
                border: none;
                border-radius: 6px;
                cursor: pointer;
                font-family: var(--font);
                font-weight: 600;
                transition: all .2s;
            }

            .btn-ph:hover {
                background: var(--c-blue);
            }

            .btn-ph-r {
                background: var(--c-surface3);
                color: var(--c-muted);
                font-size: 10px;
                padding: 5px 10px;
                border: 1.5px solid var(--c-border);
                border-radius: 6px;
                cursor: pointer;
                font-family: var(--font);
                transition: all .2s;
            }

            .btn-ph-r:hover {
                background: var(--c-red-bg);
                color: var(--c-red);
                border-color: var(--c-red);
            }

            /* ═══════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════ */
            .btn {
                padding: 8px 18px;
                border: none;
                border-radius: 10px;
                font-family: var(--font);
                font-size: 12px;
                font-weight: 600;
                cursor: pointer;
                transition: transform var(--transition),box-shadow var(--transition),filter var(--transition),background var(--transition);
                display: inline-flex;
                align-items: center;
                gap: 5px;
            }

            .btn:active {
                transform: translateY(0) scale(.96);
                transition: transform .08s;
            }

            .hbtn-primary:active,.hbtn-secondary:active,.hs-btn-v2:active,.login-btn:active,.wa-export-btn:active,.login-path-btn:active {
                transform: scale(.96)!important;
                transition: transform .08s!important;
            }

            .btn-ok {
                background: var(--c-green);
                color: #fff;
                box-shadow: 0 3px 10px rgba(25,122,82,0.22);
            }

            .btn-ok:hover {
                transform: translateY(-1px);
                filter: brightness(1.06);
                box-shadow: 0 6px 16px rgba(25,122,82,0.3);
            }

            .btn-del {
                background: var(--c-red);
                color: #fff;
                font-size: 11px;
                padding: 5px 11px;
                box-shadow: 0 3px 10px rgba(182,68,58,0.18);
            }

            .btn-del:hover {
                transform: translateY(-1px);
                filter: brightness(1.05);
                box-shadow: 0 6px 14px rgba(182,68,58,0.26);
            }

            .btn-sm {
                padding: 5px 12px;
                font-size: 11px;
            }

            .btn-blue {
                background: var(--c-accent);
                color: #fff;
                font-size: 11px;
                padding: 5px 11px;
                box-shadow: 0 3px 10px rgba(47,108,246,0.2);
            }

            .btn-blue:hover {
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(47,108,246,0.3);
            }

            .btn-grey {
                background: var(--c-surface3);
                color: var(--c-text2);
                border: 1.5px solid var(--c-border);
            }

            .btn-grey:hover {
                background: var(--c-border);
                color: var(--c-text);
            }

            .btn-gold {
                background: linear-gradient(135deg,#b45309,#d97706);
                color: #fff;
                border: none;
                border-radius: 8px;
                padding: 7px 16px;
                font-family: var(--font);
                font-size: 12px;
                font-weight: 700;
                cursor: pointer;
                box-shadow: 0 2px 8px rgba(180,83,9,0.25);
                transition: all .2s;
            }

            .btn-gold:hover {
                transform: translateY(-1px);
                box-shadow: 0 4px 14px rgba(180,83,9,0.35);
            }

            /* ═══════════════════════════════════════════════════
   TABLE
═══════════════════════════════════════════════════ */
            .tbl-wrap {
                overflow-x: auto;
                border-radius: var(--radius);
                box-shadow: var(--shadow-card);
                border: 1px solid var(--c-border);
                -webkit-overflow-scrolling: touch;
                scrollbar-width: auto;
                scrollbar-color: var(--c-accent) var(--c-surface2);
                padding-bottom: 2px;
                contain: content;
                /* isolate table paint so typing elsewhere stays smooth */
            }

            .tbl-wrap::-webkit-scrollbar {
                height: 14px;
            }

            .tbl-wrap::-webkit-scrollbar-thumb {
                background: var(--c-accent);
                border-radius: 8px;
                border: 3px solid var(--c-surface2);
                min-width: 60px;
            }

            .tbl-wrap::-webkit-scrollbar-thumb:hover {
                background: var(--c-accent-2,var(--c-accent));
                filter: brightness(1.1);
            }

            .tbl-wrap::-webkit-scrollbar-track {
                background: var(--c-surface2);
                border-radius: 8px;
            }

            /* Table zoom — scales font + padding via a wrapper variable */
            .tbl-wrap table {
                font-size: calc(12px * var(--tbl-zoom,1));
            }

            .tbl-wrap td,.tbl-wrap th {
                padding: calc(8px * var(--tbl-zoom,1)) calc(12px * var(--tbl-zoom,1));
            }

            /* Small fixed widget (Excel-style), bottom-right of the visible table: a short
   horizontal scrollbar + zoom controls, always reachable without scrolling
   down through all the data. Only the scrollbar track shows when the current
   table actually needs horizontal scrolling; zoom is always available. */
            #tbl-bottombar {
                position: fixed;
                z-index: 150; /* below the sidebar (200 hover-overlay / 901 pinned) so it never covers the profile/logout area */
                bottom: 0;
                left: 220px;
                right: 0;
                display: flex;
                align-items: center;
                gap: 10px;
                background: var(--c-surface2);
                border-top: 1.5px solid var(--c-border);
                padding: 2px 16px;
                height: 26px;
                box-sizing: border-box;
                box-shadow: 0 -4px 14px rgba(0,0,0,0.14);
            }

            .tbb-track {
                flex: 1 1 auto;
                position: relative;
                height: 9px;
                background: var(--c-surface3);
                border-radius: 5px;
                border: 1px solid var(--c-border);
                cursor: pointer;
                touch-action: none;
                user-select: none;
            }

            .tbb-thumb {
                position: absolute;
                top: 1px;
                bottom: 1px;
                left: 1px;
                background: var(--c-accent);
                border-radius: 4px;
                min-width: 40px;
                cursor: grab;
                transition: filter .15s;
            }

            .tbb-thumb:active {
                cursor: grabbing;
                filter: brightness(1.12);
            }

            .tbb-zoom {
                display: flex;
                align-items: center;
                gap: 1px;
                flex-shrink: 0;
                padding-left: 10px;
                border-left: 1.5px solid var(--c-border);
            }

            .tzf-btn {
                width: 20px;
                height: 20px;
                border: none;
                background: var(--c-surface);
                color: var(--c-text);
                font-size: 15px;
                font-weight: 700;
                cursor: pointer;
                border-radius: 6px;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: background .15s;
                border: 1px solid var(--c-border);
            }

            .tzf-btn:hover {
                background: var(--c-surface3);
            }

            .tzf-reset {
                font-size: 12px;
            }

            .tzf-level {
                font-size: 12px;
                font-weight: 800;
                color: var(--c-accent);
                min-width: 42px;
                text-align: center;
            }

            @media(max-width: 1024px) {
                #tbl-bottombar {
                    left:180px;
                }
            }

            body:has(.sidenav.auto-collapsed) #tbl-bottombar {
                left: 56px;
            }

            body:has(.sidenav.collapsed) #tbl-bottombar {
                left: 56px;
            }

            body:has(.sidenav.auto-collapsed) .sheet-tabs {
                left: 56px;
            }

            body:has(.sidenav.collapsed) .sheet-tabs {
                left: 56px;
            }

            @media(max-width: 640px) {
                #tbl-bottombar {
                    left:0;
                    right: 0;
                    bottom: 56px;
                    padding: 2px 10px;
                    gap: 8px;
                }

                .tzf-btn {
                    width: 20px;
                    height: 20px;
                    font-size: 14px;
                }

                .tzf-level {
                    min-width: 36px;
                    font-size: 11px;
                }
            }

            /* Freeze the Name column (4th col: after Select, Photo, #) so it stays visible while scrolling sideways */
            .tbl-wrap table {
                width: max-content;
                min-width: 100%;
            }

            .tbl-wrap td,.tbl-wrap th {
                white-space: nowrap;
            }

            .tbl-wrap td {
                max-width: 280px;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .tbl-wrap td.wrap-cell {
                white-space: normal;
            }

            /* Record-tab pagination — lives inside the sub-tabs bar, right side */
            .sheet-tabs-pager {
                display: flex;
                align-items: center;
                gap: 4px;
                padding-bottom: 2px;
            }

            .sheet-tabs-pager:empty {
                display: none;
            }

            .pg-nums {
                display: flex;
                align-items: center;
                gap: 3px;
                justify-content: center;
            }

            .pg-num {
                min-width: 24px;
                height: 24px;
                padding: 0 5px;
                border-radius: 6px;
                border: 1px solid var(--c-border);
                background: var(--c-surface3);
                color: var(--c-text);
                font-size: 12px;
                font-weight: 600;
                cursor: pointer;
                font-family: var(--font);
                transition: all .15s;
            }

            .pg-num:hover {
                border-color: var(--c-accent);
                color: var(--c-accent);
            }

            .pg-num.active {
                background: var(--c-accent);
                color: #fff;
                border-color: var(--c-accent);
            }

            .pg-ellipsis {
                color: var(--c-muted);
                padding: 0 1px;
                font-weight: 700;
                font-size: 11px;
            }

            .pg-btn {
                min-width: 24px;
                height: 24px;
                background: var(--c-accent);
                color: #fff;
                border: none;
                border-radius: 6px;
                font-size: 13px;
                font-weight: 700;
                cursor: pointer;
                font-family: var(--font);
                transition: filter .15s;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }

            .pg-btn:hover:not(:disabled) {
                filter: brightness(1.1);
            }

            .pg-btn:disabled {
                opacity: .35;
                cursor: not-allowed;
            }

            table {
                width: 100%;
                border-collapse: collapse;
                font-size: 12px;
                background: var(--c-surface);
                transition: background var(--transition);
            }

            /* Recycle Bin */
            .rb-wrap {
                max-width: 820px;
                margin: 0 auto;
                padding: 20px 18px 60px;
            }

            .rb-hero {
                display: flex;
                align-items: center;
                gap: 14px;
                background: linear-gradient(135deg,var(--c-navy),var(--c-navy2));
                color: #fff;
                border-radius: 14px;
                padding: 18px 20px;
                margin-bottom: 14px;
            }

            .rb-hero-icon {
                font-size: 32px;
            }

            .rb-hero-title {
                font-family: var(--font-display);
                font-size: 20px;
                font-weight: 700;
            }

            .rb-hero-sub {
                font-size: 12px;
                opacity: .7;
                margin-top: 2px;
            }

            .rb-note {
                font-size: 12px;
                color: var(--c-muted);
                background: var(--c-surface2);
                border: 1px solid var(--c-border);
                border-radius: 10px;
                padding: 11px 14px;
                margin-bottom: 16px;
                line-height: 1.5;
            }

            .rb-item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
                background: var(--c-surface);
                border: 1.5px solid var(--c-border);
                border-radius: 12px;
                padding: 13px 16px;
                margin-bottom: 10px;
                flex-wrap: wrap;
            }

            .rb-item-name {
                font-weight: 700;
                color: var(--c-text);
                font-size: 14px;
            }

            .rb-item-meta {
                font-size: 11px;
                color: var(--c-muted);
                margin-top: 3px;
            }

            .rb-days {
                color: var(--c-gold,#e0a800);
                font-weight: 700;
            }

            .rb-item-actions {
                display: flex;
                gap: 8px;
            }

            .rb-empty {
                text-align: center;
                color: var(--c-muted);
                padding: 50px 20px;
                font-size: 15px;
                font-weight: 600;
            }

            .rb-empty span {
                display: block;
                font-size: 12px;
                font-weight: 400;
                margin-top: 8px;
            }

            .rbview-inner {
                padding: 24px;
            }

            .confirm-box {
                max-width: 400px;
                width: 90%;
                padding: 26px 24px;
                text-align: center;
            }

            .confirm-icon {
                font-size: 42px;
                margin-bottom: 10px;
            }

            .confirm-title {
                font-family: var(--font-display);
                font-size: 19px;
                font-weight: 700;
                color: var(--c-text);
                margin-bottom: 8px;
            }

            .confirm-msg {
                font-size: 13px;
                color: var(--c-text2);
                line-height: 1.6;
                margin-bottom: 22px;
            }

            .confirm-actions {
                display: flex;
                gap: 10px;
            }

            .confirm-actions .btn {
                flex: 1;
                justify-content: center;
                padding: 11px;
                font-size: 14px;
            }

            .rbview-title {
                font-family: var(--font-display);
                font-size: 18px;
                font-weight: 700;
                color: var(--c-text);
                margin-bottom: 16px;
                padding-right: 30px;
            }

            .rbview-head {
                margin-bottom: 14px;
                padding-bottom: 12px;
                border-bottom: 1.5px solid var(--c-border);
            }

            .rbview-name {
                font-size: 17px;
                font-weight: 700;
                color: var(--c-text);
            }

            .rbview-meta {
                font-size: 11px;
                color: var(--c-muted);
                margin-top: 4px;
            }

            .rbview-fields {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 10px 14px;
                max-height: 50vh;
                overflow-y: auto;
                padding: 2px;
            }

            .rbview-row {
                display: flex;
                flex-direction: column;
                gap: 3px;
            }

            .rbview-row label {
                font-size: 10px;
                font-weight: 700;
                color: var(--c-muted);
                text-transform: uppercase;
                letter-spacing: .4px;
            }

            .rbview-val {
                font-size: 14px;
                color: var(--c-text);
                word-break: break-word;
            }

            .rbview-actions {
                display: flex;
                gap: 10px;
                margin-top: 18px;
                padding-top: 14px;
                border-top: 1.5px solid var(--c-border);
                flex-wrap: wrap;
            }

            .rbview-actions .btn {
                flex: 1;
                min-width: 140px;
                justify-content: center;
            }

            @media(max-width: 520px) {
                .rbview-fields {
                    grid-template-columns:1fr;
                }
            }

            thead tr {
                background: var(--c-navy);
            }

            body.dark thead tr {
                background: rgba(15,31,69,0.9);
            }

            thead th {
                padding: 10px 12px;
                font-weight: 700;
                font-size: 10px;
                text-align: left;
                white-space: nowrap;
                color: rgba(255,255,255,0.8);
                text-transform: uppercase;
                letter-spacing: .6px;
                border-right: 1px solid rgba(255,255,255,0.12);
            }

            thead th:last-child {
                border-right: none;
            }

            tbody tr {
                border-bottom: 1px solid var(--c-grid-line);
                transition: background .18s ease,box-shadow .18s ease;
            }

            tbody tr:hover {
                background: var(--c-surface3);
                box-shadow: inset 3px 0 0 var(--c-accent);
            }

            tbody tr:nth-child(even) {
                background: var(--c-surface2);
            }

            tbody tr:nth-child(even):hover {
                background: var(--c-surface3);
            }

            td {
                border-right: 1px solid var(--c-border);
            }

            td:last-child {
                border-right: none;
            }

            td {
                padding: 8px 12px;
                vertical-align: middle;
            }

            .no-data {
                text-align: center;
                padding: 40px;
                color: var(--c-muted);
                font-size: 13px;
            }

            .res-count {
                font-size: 11px;
                color: var(--c-muted);
                margin-bottom: 5px;
                font-weight: 500;
            }

            /* Conditional filter builder */
            .filter-panel {
                background: var(--c-surface2);
                border: 1.5px solid var(--c-border);
                border-radius: 12px;
                padding: 14px 16px;
                margin-bottom: 10px;
                animation: fadeUp .2s ease;
            }

            .filt-head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
                flex-wrap: wrap;
                margin-bottom: 10px;
            }

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

            .filt-mode {
                font-size: 11px;
                color: var(--c-muted);
                display: flex;
                align-items: center;
                gap: 4px;
            }

            .filt-mode-btn {
                border: 1.5px solid var(--c-border);
                background: var(--c-surface);
                color: var(--c-text2);
                border-radius: 7px;
                padding: 4px 9px;
                font-size: 11px;
                font-weight: 700;
                cursor: pointer;
            }

            .filt-mode-btn.on {
                background: var(--c-accent);
                color: #fff;
                border-color: var(--c-accent);
            }

            .filt-rows {
                display: flex;
                flex-direction: column;
                gap: 8px;
                margin-bottom: 12px;
            }

            .filt-row {
                display: flex;
                align-items: center;
                gap: 6px;
                flex-wrap: wrap;
            }

            .filt-join {
                font-size: 10px;
                font-weight: 800;
                color: var(--c-accent);
                min-width: 44px;
                text-transform: uppercase;
            }

            .filt-join.filt-where {
                color: var(--c-muted);
            }

            .filt-row select,.filt-row input {
                padding: 6px 9px;
                border-radius: 7px;
                border: 1.5px solid var(--c-border);
                background: var(--c-surface);
                color: var(--c-text);
                font-size: 12px;
                font-family: var(--font);
            }

            .filt-del {
                border: none;
                background: var(--c-red-bg,#fde8e8);
                color: var(--c-red,#d33);
                width: 26px;
                height: 26px;
                border-radius: 7px;
                cursor: pointer;
                font-size: 12px;
                font-weight: 700;
            }

            .filt-actions {
                display: flex;
                align-items: center;
                gap: 8px;
                flex-wrap: wrap;
            }

            .filt-count {
                font-size: 12px;
                font-weight: 700;
                color: var(--c-accent);
                margin-left: auto;
            }

            .act-cell {
                display: flex;
                gap: 5px;
                flex-wrap: wrap;
            }

            .id-c {
                font-family: var(--mono);
                font-size: 11px;
                color: var(--c-muted);
            }

            mark {
                background: rgba(251,191,36,0.35);
                border-radius: 2px;
                padding: 0 2px;
                color: inherit;
            }

            /* ═══════════════════════════════════════════════════
   BADGES
═══════════════════════════════════════════════════ */
            .badge {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                padding: 3px 10px;
                border-radius: 20px;
                font-size: 10px;
                font-weight: 700;
                letter-spacing: .2px;
            }

            .b-pending {
                background: var(--c-amber-bg);
                color: var(--c-amber);
            }

            .b-short {
                background: var(--c-violet-bg);
                color: var(--c-violet);
            }

            .b-sched {
                background: rgba(59,130,246,0.12);
                color: var(--c-blue);
            }

            .b-sel {
                background: var(--c-green-bg);
                color: var(--c-green);
            }

            .b-rej {
                background: var(--c-red-bg);
                color: var(--c-red);
            }

            .eye-ok {
                background: var(--c-green-bg);
                color: var(--c-green);
                border: 1px solid rgba(34,197,94,0.25);
                padding: 3px 10px;
                border-radius: 20px;
                font-size: 10px;
                font-weight: 700;
                display: inline-block;
            }

            .eye-fail {
                background: var(--c-red-bg);
                color: var(--c-red);
                border: 1px solid rgba(239,68,68,0.25);
                padding: 3px 10px;
                border-radius: 20px;
                font-size: 10px;
                font-weight: 700;
                display: inline-block;
            }

            .eye-pend {
                background: var(--c-amber-bg);
                color: var(--c-amber);
                border: 1px solid rgba(251,191,36,0.25);
                padding: 3px 10px;
                border-radius: 20px;
                font-size: 10px;
                font-weight: 700;
                display: inline-block;
            }

            .sc-hi {
                background: var(--c-green-bg);
                color: var(--c-green);
                border: 1px solid rgba(34,197,94,0.25);
                padding: 3px 10px;
                border-radius: 20px;
                font-size: 10px;
                font-weight: 700;
                display: inline-block;
            }

            .sc-mid {
                background: rgba(59,130,246,0.12);
                color: var(--c-blue);
                border: 1px solid rgba(59,130,246,0.2);
                padding: 3px 10px;
                border-radius: 20px;
                font-size: 10px;
                font-weight: 700;
                display: inline-block;
            }

            .sc-lo {
                background: var(--c-red-bg);
                color: var(--c-red);
                border: 1px solid rgba(239,68,68,0.2);
                padding: 3px 10px;
                border-radius: 20px;
                font-size: 10px;
                font-weight: 700;
                display: inline-block;
            }

            .sc-na {
                background: var(--c-surface3);
                color: var(--c-muted);
                padding: 3px 10px;
                border-radius: 20px;
                font-size: 10px;
                font-weight: 700;
                display: inline-block;
            }

            /* ═══════════════════════════════════════════════════
   SUMMARY CARDS
═══════════════════════════════════════════════════ */
            .sum-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill,minmax(140px,1fr));
                gap: 14px;
                margin-bottom: 22px;
            }

            .sum-card {
                background: var(--c-surface);
                border-radius: var(--radius);
                padding: 20px 18px;
                box-shadow: var(--shadow-card);
                border-left: 3px solid var(--c-border);
                transition: transform var(--transition),box-shadow var(--transition);
                cursor: default;
            }

            .sum-card:hover {
                transform: translateY(-3px);
                box-shadow: var(--shadow-md);
            }

            .sum-card .sn {
                font-family: var(--font-display);
                font-size: 34px;
                font-weight: 600;
                line-height: 1;
                letter-spacing: -1px;
                animation: countUp .45s both;
            }

            .sum-card .sl {
                font-size: 10px;
                font-weight: 600;
                color: var(--c-muted);
                margin-top: 7px;
                text-transform: uppercase;
                letter-spacing: .7px;
            }

            .sc-navy {
                border-color: var(--c-accent)
            }

            .sc-navy .sn {
                color: var(--c-accent);
            }

            .sc-green {
                border-color: var(--c-green)
            }

            .sc-green .sn {
                color: var(--c-green);
            }

            .sc-red {
                border-color: var(--c-red)
            }

            .sc-red .sn {
                color: var(--c-red);
            }

            .sc-orange {
                border-color: var(--c-amber)
            }

            .sc-orange .sn {
                color: var(--c-amber);
            }

            .sc-blue {
                border-color: var(--c-blue)
            }

            .sc-blue .sn {
                color: var(--c-blue);
            }

            .sc-teal {
                border-color: var(--c-teal)
            }

            .sc-teal .sn {
                color: var(--c-teal);
            }

            /* ═══════════════════════════════════════════════════
   MODAL
═══════════════════════════════════════════════════ */
            .modal-ov {
                display: none;
                position: fixed;
                inset: 0;
                background: rgba(4,8,18,0.7);
                backdrop-filter: blur(8px);
                z-index: 200;
                align-items: center;
                justify-content: center;
            }

            .modal-ov.open {
                display: flex;
                animation: fadeIn .2s ease;
            }

            .modal {
                background: var(--c-surface);
                border-radius: var(--radius-lg);
                width: 92%;
                max-width: 700px;
                max-height: 90vh;
                overflow-y: auto;
                box-shadow: 0 24px 64px rgba(0,0,0,0.4),0 0 0 1px var(--c-border);
                position: relative;
                animation: scaleIn .25s cubic-bezier(.34,1.56,.64,1);
            }

            .m-close {
                position: absolute;
                top: 14px;
                right: 16px;
                font-size: 20px;
                cursor: pointer;
                color: var(--c-muted);
                background: var(--c-surface3);
                border: none;
                width: 30px;
                height: 30px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all .2s;
            }

            .m-close:hover {
                background: var(--c-red-bg);
                color: var(--c-red);
            }

            /* ── Credits card (GitHub-profile style) ── */
            /* ── About MarCadInfo modal ── */
            .about-card {
                background: var(--c-surface);
                border-radius: 20px;
                width: 92%;
                max-width: 420px;
                overflow: hidden;
                position: relative;
                box-shadow: 0 20px 60px rgba(0,0,0,0.4);
                animation: fadeIn .2s ease;
            }

            .about-hero {
                background: linear-gradient(135deg,#0a2a5e,#1e50c8);
                padding: 34px 20px 26px;
                text-align: center;
                color: #fff;
            }

            .about-logo {
                font-size: 46px;
                line-height: 1;
                margin-bottom: 8px;
            }

            .about-title {
                font-family: var(--font-display,serif);
                font-size: 30px;
                font-weight: 700;
                letter-spacing: .5px;
            }

            .about-tag {
                font-size: 12px;
                opacity: .8;
                font-style: italic;
                margin-top: 3px;
                letter-spacing: .4px;
            }

            .about-body {
                padding: 22px 24px 24px;
            }

            .about-desc {
                font-size: 14px;
                line-height: 1.6;
                color: var(--c-text);
                margin: 0 0 18px;
                text-align: center;
            }

            .about-created {
                text-align: center;
                font-size: 14px;
                color: var(--c-text);
                padding: 16px 0 6px;
                border-top: 1px solid var(--c-border);
            }

            .about-link {
                color: var(--c-accent,#2f6cf6);
                font-weight: 700;
                text-decoration: none;
            }

            .about-link:hover {
                text-decoration: underline;
            }

            .about-role {
                font-size: 12.5px;
                color: var(--c-muted);
                margin-top: 5px;
            }

            .about-footer {
                text-align: center;
                font-size: 11px;
                color: var(--c-muted);
                margin-top: 18px;
                padding-top: 14px;
                border-top: 1px solid var(--c-border);
            }

            .credits-card {
                background: var(--c-surface);
                border-radius: 18px;
                width: 92%;
                max-width: 360px;
                position: relative;
                overflow: hidden;
                box-shadow: 0 24px 64px rgba(0,0,0,0.45),0 0 0 1px var(--c-border);
                animation: scaleIn .3s cubic-bezier(.34,1.56,.64,1);
            }

            .credits-card .m-close {
                z-index: 3;
                color: #fff;
                background: rgba(0,0,0,0.25);
            }

            .credits-card .m-close:hover {
                background: rgba(0,0,0,0.45);
                color: #fff;
            }

            .credits-cover {
                height: 100px;
                background: linear-gradient(135deg,#0a1f44 0%,#12386e 45%,#1e5aa8 100%);
                position: relative;
            }

            .credits-cover::after {
                content: "";
                position: absolute;
                inset: 0;
                background: radial-gradient(circle at 30% 40%,rgba(255,255,255,0.15),transparent 60%);
            }

            .credits-avatar {
                width: 88px;
                height: 88px;
                border-radius: 50%;
                background: linear-gradient(135deg,#2f6cf6,#1e50c8);
                color: #fff;
                font-family: var(--font-display);
                font-size: 32px;
                font-weight: 800;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 4px solid var(--c-surface);
                position: absolute;
                top: 56px;
                left: 50%;
                transform: translateX(-50%);
                box-shadow: 0 6px 18px rgba(47,108,246,0.4);
            }

            .credits-body {
                padding: 52px 24px 22px;
                text-align: center;
            }

            .credits-name {
                font-family: var(--font-display);
                font-size: 22px;
                font-weight: 800;
                color: var(--c-text);
            }

            .credits-handle {
                font-size: 14px;
                color: var(--c-accent);
                font-weight: 600;
                margin-top: 2px;
            }

            .credits-bio {
                font-size: 13px;
                color: var(--c-text2);
                margin-top: 12px;
                line-height: 1.6;
            }

            .credits-meta {
                display: flex;
                flex-direction: column;
                gap: 5px;
                margin-top: 14px;
                font-size: 12px;
                color: var(--c-muted);
            }

            .credits-social {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                margin-top: 18px;
                width: 100%;
                box-sizing: border-box;
                padding: 11px 16px;
                border-radius: 12px;
                background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af);
                color: #fff;
                font-weight: 700;
                font-size: 14px;
                text-decoration: none;
                transition: transform .15s,box-shadow .15s;
                box-shadow: 0 4px 14px rgba(221,42,123,0.35);
            }

            .credits-social:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 22px rgba(221,42,123,0.5);
            }

            .credits-ig {
                font-size: 16px;
            }

            .credits-footer {
                margin-top: 16px;
                font-size: 11px;
                color: var(--c-muted);
                border-top: 1px solid var(--c-border);
                padding-top: 14px;
            }

            .m-head {
                display: flex;
                gap: 20px;
                padding: 22px 24px 18px;
                border-bottom: 1.5px solid var(--c-border);
                align-items: flex-start;
                background: linear-gradient(135deg,var(--c-surface),var(--c-surface2));
                border-radius: var(--radius-lg) var(--radius-lg) 0 0;
            }

            .m-photo {
                width: 88px;
                height: 106px;
                border-radius: 10px;
                object-fit: cover;
                flex-shrink: 0;
                border: 2px solid var(--c-border);
            }

            .m-photo-ph {
                width: 88px;
                height: 106px;
                border-radius: 10px;
                background: var(--c-surface3);
                flex-shrink: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 36px;
                color: var(--c-muted);
                border: 2px solid var(--c-border);
            }

            .m-name {
                font-family: var(--font-display);
                font-size: 20px;
                font-weight: 800;
                color: var(--c-text);
                margin-bottom: 6px;
            }

            .m-body {
                padding: 18px 24px 22px;
            }

            .d-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 12px;
            }

            .d-item label {
                font-size: 10px;
                font-weight: 700;
                color: var(--c-muted);
                text-transform: uppercase;
                letter-spacing: .5px;
                display: block;
                margin-bottom: 3px;
            }

            .d-item .dv {
                font-size: 13px;
                color: var(--c-text);
                font-weight: 500;
                word-break: break-word;
            }

            .d-item.full {
                grid-column: 1/-1;
            }

            .thumb {
                width: 32px;
                height: 38px;
                border-radius: 4px;
                object-fit: cover;
                border: 1px solid var(--c-border);
            }

            .thumb-ph {
                width: 32px;
                height: 38px;
                border-radius: 4px;
                background: var(--c-surface3);
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-size: 16px;
                color: var(--c-muted);
            }

            /* ═══════════════════════════════════════════════════
   ADMIN PANEL
═══════════════════════════════════════════════════ */
            .adm-wrap {
                padding: 18px;
            }

            .adm-sec {
                background: var(--c-surface);
                border-radius: var(--radius);
                box-shadow: var(--shadow-card);
                margin-bottom: 18px;
                overflow: hidden;
                border: 1px solid var(--c-border);
                transition: background var(--transition),border-color var(--transition);
            }

            .adm-hd {
                background: linear-gradient(135deg,var(--c-navy),var(--c-navy2));
                color: #fff;
                padding: 12px 18px;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .adm-hd h3 {
                font-family: var(--font-display);
                font-size: 13px;
                font-weight: 700;
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .adm-body {
                padding: 16px;
            }

            .adm-field {
                display: flex;
                flex-direction: column;
                gap: 5px;
                margin-bottom: 10px;
            }

            .adm-field label {
                font-size: 10px;
                font-weight: 700;
                color: var(--c-muted);
                text-transform: uppercase;
                letter-spacing: .5px;
            }

            .adm-field input,.adm-field select {
                border: 1.5px solid var(--c-border);
                border-radius: 8px;
                padding: 9px 12px;
                font-family: var(--font);
                font-size: 13px;
                color: var(--c-text);
                background: var(--c-surface2);
                outline: none;
                transition: all .2s;
            }

            .adm-field input:focus,.adm-field select:focus {
                border-color: var(--c-accent);
                box-shadow: 0 0 0 3px var(--c-accent-glow);
            }

            .adm-row {
                display: flex;
                gap: 10px;
                flex-wrap: wrap;
                align-items: flex-end;
            }

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

            .list-ul li {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 10px 14px;
                border-bottom: 1px solid var(--c-border);
                font-size: 12px;
                transition: background .15s;
            }

            .list-ul li:hover {
                background: var(--c-surface2);
            }

            .list-ul li:last-child {
                border-bottom: none;
            }

            .sub-ul {
                list-style: none;
                padding: 0;
            }

            .sub-ul li {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 8px 12px;
                border-bottom: 1px solid var(--c-border);
                font-size: 12px;
                background: var(--c-surface2);
                transition: background .15s;
            }

            .sub-ul li:hover {
                background: var(--c-surface3);
            }

            .sub-ul li:last-child {
                border-bottom: none;
            }

            .dashed-top {
                border-top: 2px dashed var(--c-border);
                margin-top: 14px;
                padding-top: 14px;
            }

            /* Modern draggable field-card list (Admin → Fields) */
            .field-card-list {
                display: flex;
                flex-direction: column;
                gap: 10px;
                margin-bottom: 4px;
            }

            .cf-subgroup {
                display: grid;
                grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
                gap: 12px;
                padding: 12px 14px;
                margin-top: 2px;
                border-left: 3px solid var(--c-accent);
                background: var(--c-surface2);
                border-radius: 8px;
            }

            .cf-subgroup-deep {
                border-left-color: var(--c-gold,#e0a800);
                background: var(--c-surface3);
                margin-left: 6px;
            }

            /* Roomy full-width record form */
            .cf-roomy {
                gap: 20px 28px;
            }

            .cf-roomy .form-group input,.cf-roomy .form-group select,.cf-roomy .form-group textarea {
                padding: 11px 14px;
                font-size: 14px;
            }

            .cf-roomy .form-group label {
                font-size: 12px;
                font-weight: 700;
                letter-spacing: .3px;
            }

            .field-empty {
                color: var(--c-muted);
                font-size: 12px;
                padding: 14px 2px;
            }

            .field-card {
                background: var(--c-surface2);
                border: 1.5px solid var(--c-border);
                border-radius: 12px;
                overflow: hidden;
                transition: box-shadow .2s ease,border-color .2s ease,opacity .15s ease;
            }

            .field-card:hover {
                border-color: var(--c-border2);
                box-shadow: var(--shadow-md);
            }

            .field-card.dragging {
                opacity: .5;
                box-shadow: var(--shadow-lg);
            }

            .field-card-head {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 12px 14px;
            }

            .field-drag-handle {
                cursor: grab;
                font-size: 17px;
                line-height: 1;
                color: var(--c-muted);
                padding: 2px 4px;
                touch-action: none;
                user-select: none;
                flex-shrink: 0;
                transition: color .15s ease;
            }

            .field-drag-handle:hover {
                color: var(--c-accent);
            }

            .field-drag-handle:active {
                cursor: grabbing;
            }

            .field-card-info {
                flex: 1;
                display: flex;
                align-items: center;
                gap: 8px;
                flex-wrap: wrap;
                min-width: 0;
            }

            .field-card-label {
                font-weight: 700;
                color: var(--c-text);
                font-size: 13px;
            }

            .field-type-badge {
                font-size: 9.5px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: .4px;
                color: var(--c-accent);
                background: var(--c-accent-glow);
                padding: 2px 8px;
                border-radius: 20px;
                white-space: nowrap;
            }

            .field-card-actions {
                display: flex;
                gap: 4px;
                flex-shrink: 0;
            }

            /* Cadet-record row drag handle (Admin → Records reordering) */
            .rec-drag-handle {
                cursor: grab;
                font-size: 15px;
                line-height: 1;
                color: var(--c-muted);
                padding: 2px 6px;
                touch-action: none;
                user-select: none;
                text-align: center;
                transition: color .15s ease;
            }

            .rec-drag-handle:hover {
                color: var(--c-accent);
            }

            .rec-drag-handle:active {
                cursor: grabbing;
            }

            .tbl-wrap table tr.dragging {
                opacity: .5;
            }

            .ficon-btn {
                width: 28px;
                height: 28px;
                border: none;
                border-radius: 8px;
                background: var(--c-surface3);
                color: var(--c-text2);
                font-size: 12px;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: background .15s ease,transform .15s ease;
            }

            .ficon-btn:hover {
                background: var(--c-border2);
                transform: translateY(-1px);
            }

            .ficon-del:hover {
                background: var(--c-red-bg);
                color: var(--c-red);
            }

            .field-subcard-list {
                display: flex;
                flex-direction: column;
            }

            .field-subrow {
                border-top: 1px dashed var(--c-border);
                background: var(--c-surface3);
                transition: opacity .15s ease;
            }

            .field-subrow.dragging {
                opacity: .5;
            }

            .field-subrow-head {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 9px 14px 9px 30px;
            }

            /* when a subrow has no head wrapper (edit mode), keep padding */
            .field-subrow > .field-edit-form {
                padding: 9px 14px 9px 30px;
            }

            .field-subsub-list {
                display: flex;
                flex-direction: column;
            }

            .field-subsubrow {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 8px 14px 8px 48px;
                border-top: 1px dotted var(--c-border);
                background: var(--c-surface2);
            }

            .field-subsubrow.dragging {
                opacity: .5;
            }

            .field-addsub-row {
                display: none;
                gap: 10px;
                flex-wrap: wrap;
                align-items: flex-end;
                padding: 12px 14px;
                border-top: 1.5px dashed var(--c-border);
                background: var(--c-surface);
            }

            .field-edit-form {
                display: flex;
                gap: 10px;
                flex-wrap: wrap;
                align-items: flex-end;
                padding: 12px 14px;
                background: var(--c-surface);
            }

            .field-edit-form .adm-field {
                margin: 0;
            }

            .field-edit-form .adm-field input,.field-edit-form .adm-field select {
                width: 140px;
            }

            .field-edit-actions {
                display: flex;
                gap: 8px;
            }

            /* Admin Tab Cards */
            .adm-tab-card {
                background: var(--c-surface);
                border-radius: var(--radius);
                box-shadow: var(--shadow-card);
                cursor: pointer;
                transition: all .2s;
                overflow: hidden;
                border-top: 3px solid var(--c-accent);
                border: 1px solid var(--c-border);
            }

            .adm-tab-card:hover {
                transform: translateY(-4px);
                box-shadow: var(--shadow-md);
            }

            .adm-tab-card-body {
                padding: 16px 16px 14px;
            }

            .adm-tab-card-icon {
                font-size: 28px;
                margin-bottom: 8px;
            }

            .adm-tab-card-name {
                font-family: var(--font-display);
                font-size: 13px;
                font-weight: 700;
                color: var(--c-text);
            }

            .adm-tab-card-count {
                font-size: 11px;
                color: var(--c-muted);
                margin-top: 4px;
            }

            .adm-tab-card-type {
                font-size: 9px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: .6px;
                padding: 2px 8px;
                border-radius: 10px;
                background: var(--c-surface3);
                color: var(--c-muted);
                display: inline-block;
                margin-top: 7px;
            }

            .adm-tab-card {
                position: relative;
                overflow: visible;
            }

            .adm-card-del {
                position: absolute;
                top: 8px;
                right: 8px;
                background: rgba(220,38,38,0.08);
                border: 1px solid rgba(220,38,38,0.2);
                color: var(--c-red);
                border-radius: 6px;
                width: 26px;
                height: 26px;
                font-size: 13px;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
                transition: all .18s;
                z-index: 2;
            }

            .adm-tab-card:hover .adm-card-del {
                opacity: 1;
            }

            .adm-card-grp {
                position: absolute;
                top: 8px;
                right: 40px;
                background: var(--c-accent-glow);
                border: 1px solid var(--c-border);
                color: var(--c-accent);
                border-radius: 6px;
                width: 26px;
                height: 26px;
                font-size: 13px;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: .85;
                transition: all .18s;
                z-index: 2;
            }

            .adm-tab-card:hover .adm-card-grp {
                opacity: 1;
            }

            .adm-card-grp:hover {
                background: var(--c-accent);
                color: #fff;
            }

            .adm-card-del:hover {
                background: rgba(220,38,38,0.18)!important;
            }

            .adm-card-confirm {
                position: absolute;
                inset: 0;
                background: rgba(5,10,22,0.95);
                border-radius: var(--radius);
                display: none;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 12px;
                z-index: 10;
                padding: 16px;
                animation: fadeIn .15s ease;
            }

            .adm-card-confirm.open {
                display: flex;
            }

            .adm-card-confirm p {
                color: #fff;
                font-size: 12px;
                font-weight: 600;
                text-align: center;
            }

            .adm-card-confirm-btns {
                display: flex;
                gap: 8px;
            }

            .acc-yes,.acc-no {
                border: none;
                border-radius: 6px;
                padding: 6px 14px;
                font-size: 12px;
                font-weight: 700;
                cursor: pointer;
            }

            .acc-yes {
                background: #dc2626;
                color: #fff;
            }

            .acc-no {
                background: rgba(255,255,255,0.12);
                color: #fff;
                border: 1px solid rgba(255,255,255,0.2);
            }

            /* Admin detail tabs */
            .adm-dtab {
                padding: 10px 18px;
                font-size: 11px;
                font-weight: 600;
                color: rgba(255,255,255,0.5);
                cursor: pointer;
                border-bottom: 3px solid transparent;
                transition: all .18s;
                user-select: none;
                white-space: nowrap;
                flex-shrink: 0;
            }

            .adm-dtab:hover {
                color: rgba(255,255,255,0.9);
            }

            .adm-dtab.active {
                color: #fff;
                border-bottom-color: var(--c-gold);
            }

            .adm-dpanel {
                display: none;
            }

            /* ── Excel-like Spreadsheet view ── */
            .ss-toolbar {
                display: flex;
                align-items: center;
                gap: 10px;
                flex-wrap: wrap;
                margin-bottom: 10px;
            }

            .ss-tb-group {
                display: flex;
                align-items: center;
                gap: 6px;
            }

            .ss-tb-group label {
                font-size: 11px;
                font-weight: 700;
                color: var(--c-muted);
                text-transform: uppercase;
                letter-spacing: .4px;
            }

            .ss-tb-group select {
                padding: 7px 10px;
                border-radius: 8px;
                border: 1.5px solid var(--c-border);
                background: var(--c-surface);
                color: var(--c-text);
                font-size: 13px;
                font-family: var(--font);
            }

            .ss-tb-spacer {
                flex: 1;
            }

            .ss-hint {
                font-size: 11px;
                color: var(--c-muted);
                margin-bottom: 8px;
            }

            .ss-cols-menu {
                background: var(--c-surface2);
                border: 1.5px solid var(--c-border);
                border-radius: 10px;
                padding: 12px 14px;
                margin-bottom: 10px;
                display: grid;
                grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
                gap: 6px 14px;
            }

            .ss-cols-menu label {
                display: flex;
                align-items: center;
                gap: 6px;
                font-size: 12px;
                color: var(--c-text);
                cursor: pointer;
            }

            .ss-grid-wrap {
                overflow: auto;
                border: 1.5px solid var(--c-border);
                border-radius: 10px;
                max-height: 62vh;
                background: var(--c-surface);
                contain: content;
            }

            table.ss-grid {
                border-collapse: separate;
                border-spacing: 0;
                font-size: 12px;
                width: max-content;
                min-width: 100%;
            }

            .ss-grid th,.ss-grid td {
                border-right: 1px solid var(--c-grid-line);
                border-bottom: 1px solid var(--c-grid-line);
                padding: 0;
                position: relative;
            }

            .ss-grid thead th {
                background: var(--c-navy);
                color: #fff;
                position: sticky;
                top: 0;
                z-index: 5;
                user-select: none;
                white-space: nowrap;
            }

            .ss-grid thead th.ss-frozen,.ss-grid tbody td.ss-frozen {
                position: sticky;
                left: 0;
                z-index: 6;
                box-shadow: 1px 0 0 var(--c-grid-line);
            }

            .ss-grid thead th.ss-frozen {
                z-index: 7;
                background: #0f1f45;
            }

            /* grouped-column banner row (kept non-sticky so it scrolls away above the pinned header) */
            .ss-grid thead tr.ss-band-row th {
                position: static;
                top: auto;
                background: var(--c-navy2);
                color: #fff;
                text-align: center;
                font-size: 10px;
                font-weight: 800;
                letter-spacing: .5px;
                text-transform: uppercase;
                padding: 6px 10px;
                border-bottom: 1px solid var(--c-grp-divider);
                white-space: nowrap;
            }

            .ss-grid thead tr.ss-band-row th.ss-band-empty {
                background: var(--c-navy);
                border-bottom-color: var(--c-border);
            }

            .ss-grid thead tr.ss-band-row th.ss-band-corner {
                position: sticky;
                left: 0;
                z-index: 6;
                border-bottom-color: var(--c-border);
            }

            .ss-grid thead tr.ss-band-row th:not(.ss-band-empty):not(.ss-band-corner) {
                border-left: 1px solid var(--c-grp-divider);
                border-right: 1px solid var(--c-grp-divider);
            }

            /* grouped-column banner for standard record tables (buildSubPanel / admin data panel) */
            thead tr.grp-band-row th {
                background: var(--c-navy);
                border-bottom: none;
                padding: 5px 8px;
            }

            thead tr.grp-band-row th.grp-band-th {
                background: var(--c-navy2);
                color: #fff;
                text-align: center;
                font-weight: 800;
                font-size: 9px;
                letter-spacing: .5px;
                text-transform: uppercase;
                border-bottom: 1px solid var(--c-grp-divider);
                border-left: 1px solid var(--c-grp-divider);
                border-right: 1px solid var(--c-grp-divider);
                white-space: nowrap;
            }

            /* group divider running down through the sub-header row */
            thead tr.grp-band-row th.grp-band-th + th.grp-band-th {
                border-left-width: 2px;
            }

            .grp-tbl th.grp-edge-l,.grp-tbl td.grp-edge-l {
                border-left: 1px solid var(--c-grp-divider)!important;
            }

            .grp-tbl th.grp-edge-r,.grp-tbl td.grp-edge-r {
                border-right: 1px solid var(--c-grp-divider)!important;
            }

            .ss-grid tbody td.ss-frozen {
                background: var(--c-surface);
            }

            .ss-th-inner {
                display: flex;
                align-items: center;
                gap: 4px;
                padding: 8px 10px;
                cursor: pointer;
            }

            .ss-th-label {
                flex: 1;
                font-weight: 700;
                font-size: 11px;
                text-transform: uppercase;
                letter-spacing: .3px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .ss-sort-ind {
                font-size: 9px;
                opacity: .85;
            }

            .ss-pin-btn {
                background: none;
                border: none;
                color: rgba(255,255,255,.6);
                cursor: pointer;
                font-size: 11px;
                padding: 0 2px;
            }

            .ss-pin-btn.pinned {
                color: var(--c-gold,#ffcf5c);
            }

            .ss-th-resize {
                position: absolute;
                top: 0;
                right: 0;
                width: 7px;
                height: 100%;
                cursor: col-resize;
                z-index: 8;
            }

            .ss-th-resize:hover {
                background: var(--c-accent);
                opacity: .5;
            }

            .ss-filter-row input {
                width: 100%;
                box-sizing: border-box;
                border: none;
                border-top: 1px solid var(--c-border);
                background: var(--c-surface2);
                color: var(--c-text);
                font-size: 11px;
                padding: 4px 8px;
                font-family: var(--font);
            }

            .ss-grid tbody td {
                background: var(--c-surface);
            }

            .ss-grid tbody tr:nth-child(even) td {
                background: var(--c-surface2);
            }

            .ss-grid tbody tr:nth-child(even) td.ss-frozen {
                background: var(--c-surface2);
            }

            .ss-cell {
                padding: 7px 10px;
                min-height: 18px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 320px;
                cursor: text;
            }

            .ss-cell:hover {
                outline: 1.5px solid var(--c-accent);
                outline-offset: -1.5px;
            }

            .ss-cell-input {
                width: 100%;
                box-sizing: border-box;
                border: 1.5px solid var(--c-accent);
                background: var(--c-surface);
                color: var(--c-text);
                font-size: 12px;
                padding: 6px 9px;
                font-family: var(--font);
                border-radius: 0;
            }

            .ss-th.dragging {
                opacity: .5;
            }

            .ss-th.drag-over {
                box-shadow: inset 3px 0 0 var(--c-gold,#ffcf5c);
            }

            .ss-status {
                font-size: 11px;
                color: var(--c-muted);
                margin-top: 8px;
            }

            .ss-rownum {
                background: var(--c-navy)!important;
                color: rgba(255,255,255,.7);
                font-size: 10px;
                text-align: center;
                padding: 7px 8px;
                position: sticky;
                left: 0;
                z-index: 6;
            }

            body.dark .ss-grid tbody td {
                background: var(--c-surface);
            }

            .adm-dpanel.active {
                display: block;
            }

            /* User Management */
            .user-table {
                width: 100%;
                border-collapse: collapse;
                font-size: 12px;
            }

            .user-table th {
                background: var(--c-navy2);
                color: rgba(255,255,255,0.7);
                padding: 8px 13px;
                text-align: left;
                font-size: 10px;
                text-transform: uppercase;
                letter-spacing: .6px;
                font-weight: 700;
            }

            .user-table td {
                padding: 9px 13px;
                border-bottom: 1px solid var(--c-border);
                vertical-align: middle;
            }

            .user-table tr:last-child td {
                border-bottom: none;
            }

            .user-table tr:hover td {
                background: var(--c-surface2);
            }

            .role-badge-admin {
                background: var(--c-amber-bg);
                color: var(--c-amber);
                border: 1px solid rgba(251,191,36,0.3);
                border-radius: 10px;
                padding: 2px 8px;
                font-size: 10px;
                font-weight: 700;
            }

            .role-badge-user {
                background: var(--c-teal-bg);
                color: var(--c-teal);
                border: 1px solid rgba(45,212,191,0.3);
                border-radius: 10px;
                padding: 2px 8px;
                font-size: 10px;
                font-weight: 700;
            }

            .um-add-form {
                background: var(--c-surface2);
                border-radius: 8px;
                padding: 14px;
                margin-top: 12px;
                display: none;
                border: 1.5px solid var(--c-border);
            }

            .um-add-form.open {
                display: block;
                animation: fadeUp .15s ease;
            }

            .um-input {
                border: 1.5px solid var(--c-border);
                border-radius: 8px;
                padding: 8px 11px;
                font-family: var(--font);
                font-size: 12px;
                outline: none;
                background: var(--c-surface);
                color: var(--c-text);
                transition: border-color .2s;
            }

            .um-input:focus {
                border-color: var(--c-accent);
            }

            /* ═══════════════════════════════════════════════════
   FILTER ROW
═══════════════════════════════════════════════════ */
            .filter-row {
                display: flex;
                gap: 12px;
                align-items: center;
                margin-bottom: 16px;
                flex-wrap: wrap;
            }

            .filter-row label {
                font-size: 11px;
                font-weight: 600;
                color: var(--c-muted);
                text-transform: uppercase;
                letter-spacing: .4px;
            }

            .filter-row select {
                border: 1.5px solid var(--c-border);
                border-radius: 8px;
                padding: 7px 12px;
                font-family: var(--font);
                font-size: 12px;
                color: var(--c-text);
                background: var(--c-surface);
                outline: none;
                cursor: pointer;
                transition: border-color .2s;
            }

            .filter-row select:focus {
                border-color: var(--c-accent);
            }

            /* Per-tab search bar */
            .tab-search-row {
                display: flex;
                align-items: center;
                gap: 8px;
                margin: 0 0 8px;
                flex-wrap: wrap;
            }

            .tab-search-box {
                position: relative;
                flex: 1;
                min-width: 200px;
            }

            .tab-search-box input {
                width: 100%;
                padding: 11px 14px 11px 40px;
                border-radius: 10px;
                border: 1.5px solid var(--c-border);
                background: var(--c-surface);
                color: var(--c-text);
                font-family: var(--font);
                font-size: 13px;
                transition: border-color .15s,box-shadow .15s;
            }

            .tab-search-box input:focus {
                outline: none;
                border-color: var(--c-accent);
                box-shadow: 0 0 0 3px var(--c-accent-glow);
            }

            .tab-search-box .tsb-icon {
                position: absolute;
                left: 14px;
                top: 50%;
                transform: translateY(-50%);
                font-size: 14px;
                opacity: .6;
                pointer-events: none;
            }

            .tab-search-clear {
                background: none;
                border: 1.5px solid var(--c-border);
                color: var(--c-text2);
                border-radius: 8px;
                padding: 9px 13px;
                font-size: 12px;
                font-weight: 600;
                cursor: pointer;
                font-family: var(--font);
            }

            .tab-search-clear:hover {
                background: var(--c-surface3);
            }

            /* ── Company Search / Filter ── */
            .hs-search-tabs {
                display: flex;
                gap: 0;
                border-radius: 10px;
                overflow: hidden;
                border: 1.5px solid var(--c-border);
                margin-bottom: 14px;
                background: var(--c-surface3);
            }

            .hs-stab {
                flex: 1;
                padding: 9px 12px;
                font-family: var(--font);
                font-size: 12px;
                font-weight: 600;
                color: var(--c-muted);
                background: transparent;
                border: none;
                cursor: pointer;
                transition: all .18s;
                text-align: center;
            }

            .hs-stab.active {
                background: var(--c-accent);
                color: #fff;
                box-shadow: 0 2px 8px rgba(47,108,246,0.25);
            }

            .hs-stab:not(.active):hover {
                background: var(--c-surface2);
                color: var(--c-text);
            }

            .hs-company-row {
                display: flex;
                gap: 8px;
                align-items: center;
                flex-wrap: wrap;
            }

            .hs-company-input {
                flex: 1;
                min-width: 160px;
                border: 1.5px solid var(--c-border);
                border-radius: 10px;
                padding: 11px 16px;
                font-family: var(--font);
                font-size: 14px;
                color: var(--c-text);
                background: var(--c-surface2);
                outline: none;
                transition: all .2s;
            }

            .hs-company-input:focus {
                border-color: var(--c-accent);
                background: var(--c-surface);
                box-shadow: 0 0 0 3px var(--c-accent-glow);
            }

            .hs-company-input::placeholder {
                color: var(--c-muted);
            }

            /* Company results table */
            .co-results-wrap {
                margin-top: 14px;
            }

            .co-results-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 10px;
                flex-wrap: wrap;
                gap: 8px;
            }

            .co-results-count {
                font-size: 12px;
                font-weight: 600;
                color: var(--c-text2);
            }

            .co-action-bar {
                display: flex;
                gap: 8px;
                align-items: center;
                flex-wrap: wrap;
            }

            .co-sel-all {
                display: flex;
                align-items: center;
                gap: 6px;
                font-size: 12px;
                font-weight: 600;
                color: var(--c-text2);
                cursor: pointer;
                user-select: none;
            }

            .co-sel-all input[type=checkbox] {
                width: 15px;
                height: 15px;
                cursor: pointer;
                accent-color: var(--c-accent);
            }

            .co-export-btn {
                background: linear-gradient(135deg,#1e50c8,#2f6cf6);
                color: #fff;
                border: none;
                border-radius: 8px;
                padding: 6px 14px;
                font-family: var(--font);
                font-size: 11px;
                font-weight: 700;
                cursor: pointer;
                display: flex;
                align-items: center;
                gap: 5px;
                transition: all .2s;
                box-shadow: 0 2px 8px rgba(47,108,246,0.25);
            }

            .co-export-btn:hover {
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(47,108,246,0.35);
            }

            .co-clear-sel {
                background: var(--c-surface3);
                color: var(--c-muted);
                border: 1.5px solid var(--c-border);
                border-radius: 8px;
                padding: 6px 12px;
                font-family: var(--font);
                font-size: 11px;
                font-weight: 600;
                cursor: pointer;
                transition: all .2s;
            }

            .co-clear-sel:hover {
                background: var(--c-red-bg);
                color: var(--c-red);
                border-color: var(--c-red);
            }

            /* company result table rows */
            .co-tbl-wrap {
                overflow-x: auto;
                border-radius: var(--radius);
                box-shadow: var(--shadow-card);
                border: 1px solid var(--c-border);
            }

            .co-tbl-wrap table {
                width: 100%;
                border-collapse: collapse;
                font-size: 12px;
                background: var(--c-surface);
            }

            .co-tbl-wrap thead tr {
                background: var(--c-navy);
            }

            .co-tbl-wrap thead th {
                padding: 10px 12px;
                font-weight: 700;
                font-size: 10px;
                text-align: left;
                white-space: nowrap;
                color: rgba(255,255,255,0.8);
                text-transform: uppercase;
                letter-spacing: .6px;
            }

            .co-tbl-wrap tbody tr {
                border-bottom: 1px solid var(--c-border);
                transition: background .1s;
            }

            .co-tbl-wrap tbody tr:hover {
                background: var(--c-surface3);
            }

            .co-tbl-wrap tbody tr:nth-child(even) {
                background: var(--c-surface2);
            }

            .co-tbl-wrap tbody tr:nth-child(even):hover {
                background: var(--c-surface3);
            }

            .co-tbl-wrap tbody tr.co-row-selected {
                background: rgba(47,108,246,0.07)!important;
                outline: 2px solid rgba(47,108,246,0.2);
            }

            .co-tbl-wrap td {
                padding: 8px 12px;
                vertical-align: middle;
            }

            .co-row-cb {
                width: 15px;
                height: 15px;
                cursor: pointer;
                accent-color: var(--c-accent);
            }

            .co-source-badge {
                font-size: 9px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: .5px;
                padding: 2px 7px;
                border-radius: 8px;
                background: var(--c-surface3);
                color: var(--c-muted);
                display: inline-block;
            }

            .co-no-results {
                text-align: center;
                padding: 40px;
                color: var(--c-muted);
                font-size: 13px;
            }

            /* Selected summary bar */
            .co-sel-summary {
                background: linear-gradient(135deg,var(--c-accent),#1e50c8);
                color: #fff;
                border-radius: 10px;
                padding: 10px 16px;
                display: none;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 10px;
                gap: 10px;
                flex-wrap: wrap;
                box-shadow: 0 4px 14px rgba(47,108,246,0.25);
                animation: fadeUp .2s ease;
            }

            .co-sel-summary.show {
                display: flex;
            }

            .co-sel-summary-text {
                font-size: 12px;
                font-weight: 600;
            }

            .co-sel-actions {
                display: flex;
                gap: 8px;
            }

            .co-view-sel-btn {
                background: rgba(255,255,255,0.2);
                color: #fff;
                border: 1px solid rgba(255,255,255,0.3);
                border-radius: 7px;
                padding: 5px 12px;
                font-family: var(--font);
                font-size: 11px;
                font-weight: 700;
                cursor: pointer;
                transition: all .18s;
            }

            .co-view-sel-btn:hover {
                background: rgba(255,255,255,0.3);
            }

            .co-desel-btn {
                background: rgba(255,255,255,0.1);
                color: rgba(255,255,255,0.8);
                border: 1px solid rgba(255,255,255,0.2);
                border-radius: 7px;
                padding: 5px 10px;
                font-family: var(--font);
                font-size: 11px;
                cursor: pointer;
                transition: all .18s;
            }

            .co-desel-btn:hover {
                background: rgba(220,38,38,0.3);
                border-color: rgba(220,38,38,0.4);
            }

            /* ═══════════════════════════════════════════════════
   SECTION TITLE & EXTRAS
═══════════════════════════════════════════════════ */
            .sec-title {
                font-family: var(--font-display);
                font-size: 12px;
                font-weight: 700;
                color: var(--c-muted);
                text-transform: uppercase;
                letter-spacing: .8px;
                margin-bottom: 14px;
            }

            .cf-section {
                border-top: 2px dashed var(--c-border);
                margin-top: 16px;
                padding-top: 14px;
            }

            .cf-section-title {
                font-size: 10px;
                font-weight: 700;
                color: var(--c-muted);
                text-transform: uppercase;
                letter-spacing: .5px;
                margin-bottom: 12px;
            }

            /* ═══════════════════════════════════════════════════
   FOOTER BAR
═══════════════════════════════════════════════════ */
            .footer-bar {
                background: var(--c-navy);
                padding: 8px 16px;
                display: flex;
                align-items: center;
                gap: 10px;
                flex-wrap: wrap;
            }

            .footer-bar span {
                font-size: 11px;
                color: rgba(255,255,255,0.4);
            }

            .footer-btn {
                background: rgba(255,255,255,0.08);
                border: 1px solid rgba(255,255,255,0.15);
                color: rgba(255,255,255,0.7);
                border-radius: 7px;
                padding: 4px 12px;
                font-size: 11px;
                font-weight: 600;
                cursor: pointer;
                font-family: var(--font);
                transition: all .2s;
            }

            .footer-btn:hover {
                background: rgba(255,255,255,0.18);
                color: #fff;
            }

            /* ═══════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════ */
            #toast {
                position: fixed;
                bottom: 24px;
                right: 20px;
                background: var(--c-green);
                color: #fff;
                padding: 12px 18px;
                border-radius: 12px;
                font-size: 13px;
                font-weight: 600;
                box-shadow: 0 8px 24px rgba(0,0,0,0.25);
                opacity: 0;
                transform: translateY(16px) scale(.95);
                transition: all .28s cubic-bezier(.34,1.56,.64,1);
                z-index: 9999;
                pointer-events: none;
                display: flex;
                align-items: center;
                gap: 8px;
            }

            #toast.show {
                opacity: 1;
                transform: translateY(0) scale(1);
            }

            /* ═══════════════════════════════════════════════════
   GLOBAL SEARCH OVERLAY
═══════════════════════════════════════════════════ */
            #gsearch-overlay {
                display: none;
                position: fixed;
                inset: 0;
                background: rgba(4,8,18,0.95);
                backdrop-filter: blur(12px);
                z-index: 500;
                overflow-y: auto;
                padding: 16px;
                animation: fadeIn .2s ease;
            }

            #gsearch-overlay.open {
                display: block;
            }

            .go-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 14px;
            }

            .go-header h3 {
                color: #fff;
                font-family: var(--font-display);
                font-size: 16px;
                font-weight: 700;
            }

            .go-close {
                background: rgba(255,255,255,0.1);
                border: 1px solid rgba(255,255,255,0.2);
                color: #fff;
                border-radius: 50%;
                width: 34px;
                height: 34px;
                font-size: 18px;
                cursor: pointer;
                transition: all .2s;
            }

            .go-close:hover {
                background: rgba(239,68,68,0.2);
                color: #fca5a5;
            }

            .go-input-wrap {
                position: relative;
                margin-bottom: 14px;
            }

            .go-input-wrap input {
                width: 100%;
                padding: 12px 16px 12px 42px;
                border-radius: 12px;
                border: 1.5px solid rgba(255,255,255,0.2);
                background: rgba(255,255,255,0.08);
                color: #fff;
                font-family: var(--font);
                font-size: 14px;
                outline: none;
                transition: border-color .2s,background .2s;
            }

            .go-input-wrap input:focus {
                border-color: var(--c-accent);
                background: rgba(255,255,255,0.1);
            }

            .go-input-wrap input::placeholder {
                color: rgba(255,255,255,0.35);
            }

            .go-input-icon {
                position: absolute;
                left: 13px;
                top: 50%;
                transform: translateY(-50%);
                font-size: 16px;
            }

            .go-count {
                font-size: 11px;
                color: rgba(255,255,255,0.4);
                margin-bottom: 12px;
            }

            .go-result {
                background: rgba(255,255,255,0.05);
                border-radius: 12px;
                padding: 14px;
                margin-bottom: 10px;
                border: 1px solid rgba(255,255,255,0.08);
                transition: background .2s;
                animation: fadeUp .15s ease both;
            }

            .go-result:hover {
                background: rgba(255,255,255,0.09);
            }

            .go-result-path {
                font-size: 10px;
                color: var(--c-accent);
                margin-bottom: 6px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: .4px;
            }

            .go-result-fields {
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
            }

            .go-result-field {
                font-size: 12px;
                color: rgba(255,255,255,0.7);
            }

            .go-result-field b {
                color: #fff;
            }

            .go-result-act {
                display: flex;
                gap: 6px;
                margin-top: 10px;
            }

            .go-btn {
                background: rgba(255,255,255,0.1);
                border: 1px solid rgba(255,255,255,0.18);
                color: #fff;
                border-radius: 7px;
                padding: 5px 12px;
                font-size: 11px;
                font-weight: 600;
                cursor: pointer;
                font-family: var(--font);
                transition: all .2s;
            }

            .go-btn:hover {
                background: rgba(255,255,255,0.2);
            }

            .go-no-results {
                text-align: center;
                padding: 50px 20px;
                color: rgba(255,255,255,0.3);
                font-size: 14px;
            }

            /* ═══════════════════════════════════════════════════
   RESPONSIVE — MOBILE FIRST
═══════════════════════════════════════════════════ */
            /* ── Tablet (641–1024px) ── */
            @media(max-width: 1024px) {
                .sidenav {
                    width:180px;
                    min-width: 180px;
                }

                .home-inner {
                    padding: 20px 16px 50px;
                }

                .home-stats-row-v2 {
                    grid-template-columns: 1fr 1fr 1fr;
                    gap: 12px;
                }

                .hero-name {
                    font-size: 28px;
                }

                .anchor-svg {
                    width: 110px;
                    height: 130px;
                }

                .home-hero-v2 {
                    padding: 32px 28px;
                }
            }

            /* ── Mobile (≤640px) ── */
            @media(max-width: 640px) {
                /* Layout: stack vertically, hide sidenav */ html,body {
                    overflow:hidden;
                }

                .app-body {
                    flex-direction: column;
                    overflow: hidden;
                }

                /* Hide desktop sidenav */
                .sidenav {
                    display: none!important;
                }

                /* Main content fills screen */
                .main-content {
                    flex: 1;
                    overflow-y: auto;
                    overflow-x: hidden;
                    padding-bottom: 70px;
                    /* room for bottom nav */
                }

                /* ── TOPBAR ── */
                .topbar {
                    padding: 0 10px;
                    height: 48px;
                }

                .topbar-title {
                    font-size: 13px;
                    gap: 5px;
                }

                .topbar-anchor {
                    font-size: 17px;
                }

                .stat-pill {
                    padding: 3px 8px;
                    font-size: 10px;
                }

                .profile-trigger-name {
                    display: none;
                }

                .admin-badge {
                    font-size: 9px;
                    padding: 2px 7px;
                }

                #topbar-user {
                    display: none;
                }

                .logout-btn {
                    padding: 4px 9px;
                    font-size: 10px;
                }

                .dm-toggle {
                    width: 38px;
                    height: 20px;
                }

                .dm-slider::after {
                    font-size: 11px;
                }

                .dm-toggle input:checked + .dm-slider::after {
                    transform: translateX(17px);
                }

                /* ── BOTTOM NAV BAR ── */
                #mobile-bottom-nav {
                    display: flex!important;
                }

                /* ── HOME HERO ── */
                .home-hero-v2 {
                    flex-direction: column;
                    padding: 24px 18px 20px;
                    text-align: center;
                    min-height: auto;
                    border-radius: 16px;
                }

                .hero-content {
                    order: 2;
                }

                .hero-anchor-side {
                    order: 1;
                    margin: 0 0 12px 0;
                }

                .anchor-svg {
                    width: 72px;
                    height: 84px;
                }

                .hero-name {
                    font-size: 22px;
                    margin-bottom: 14px;
                }

                .hero-btns {
                    justify-content: center;
                    gap: 8px;
                }

                .hbtn-primary,.hbtn-secondary {
                    font-size: 12px;
                    padding: 9px 16px;
                }

                .hero-pill {
                    font-size: 10px;
                    padding: 5px 12px;
                }

                /* ── STATS ── */
                .home-stats-row-v2 {
                    display: flex!important;
                    flex-direction: row!important;
                    gap: 8px;
                    margin-bottom: 14px;
                }

                .hs-card-v2 {
                    flex: 1;
                    min-width: 0;
                    padding: 12px 8px 10px;
                    border-radius: 14px;
                }

                .hs-num-v2 {
                    font-size: 32px;
                }

                .hs-lbl-v2 {
                    font-size: 8px;
                    letter-spacing: .8px;
                }

                /* ── SEARCH ── */
                .home-search-v2 {
                    border-radius: 14px;
                }

                .search-header {
                    padding: 12px 14px;
                }

                .search-icon-circle {
                    width: 32px;
                    height: 32px;
                    font-size: 15px;
                }

                .search-title {
                    font-size: 16px;
                }

                .search-subtitle {
                    font-size: 10px;
                }

                .search-body {
                    padding: 12px 14px 4px;
                }

                .hs-input-row-v2 {
                    flex-wrap: wrap;
                    gap: 8px;
                }

                .search-input-wrap {
                    width: 100%;
                }

                .hs-input-v2 {
                    font-size: 13px;
                    padding: 10px 14px 10px 40px;
                }

                .hs-btn-v2 {
                    width: 100%;
                    justify-content: center;
                    padding: 10px;
                }

                .hs-clear-v2 {
                    padding: 10px 12px;
                }

                #home-search-results {
                    padding: 0 14px 12px;
                }

                /* ── FORMS ── */
                .form-card {
                    padding: 14px;
                }

                .form-layout {
                    flex-direction: column;
                }

                .form-fields {
                    width: 100%;
                    align-self: stretch;
                }

                .photo-col {
                    width: 100%;
                    align-items: flex-start;
                    flex-direction: row;
                    gap: 14px;
                }

                .photo-box {
                    width: 80px;
                    height: 96px;
                }

                .form-group.full {
                    grid-column: 1/-1;
                }

                .form-actions {
                    flex-wrap: wrap;
                }

                /* ── TABLE ── */
                .tbl-wrap {
                    border-radius: 8px;
                }

                table {
                    font-size: 11px;
                }

                thead th {
                    padding: 8px 8px;
                    font-size: 9px;
                }

                td {
                    padding: 7px 8px;
                }

                .btn {
                    padding: 5px 9px;
                    font-size: 10px;
                }

                .act-cell {
                    gap: 3px;
                }

                /* ── INNER TABS ── */
                .itabs {
                    padding: 0 8px;
                }

                .itab {
                    padding: 9px 10px;
                    font-size: 11px;
                }

                /* ── SUMMARY CARDS ── */
                .sum-grid {
                    grid-template-columns: 1fr 1fr;
                }

                .sum-card {
                    padding: 14px 12px;
                }

                .sum-card .sn {
                    font-size: 26px;
                }

                /* ── MODAL ── */
                .modal {
                    width: 96%;
                    max-height: 88vh;
                }

                .m-head {
                    padding: 14px 16px 12px;
                    gap: 12px;
                }

                .m-photo,.m-photo-ph {
                    width: 60px;
                    height: 72px;
                }

                .m-name {
                    font-size: 16px;
                }

                .m-body {
                    padding: 10px 12px 14px;
                }

                .d-grid {
                    grid-template-columns: 1fr 1fr;
                }

                /* ── ADMIN ── */
                .adm-wrap {
                    padding: 12px;
                }

                .adm-body {
                    padding: 12px;
                }

                #adm-all-cards {
                    display: block!important;
                }

                #adm-all-cards .adm-group-grid {
                    grid-template-columns: 1fr 1fr!important;
                }

                .adm-card-grp,.adm-card-del {
                    opacity: 1!important;
                }

                .adm-tab-card-body {
                    padding: 12px 12px 10px;
                }

                .adm-tab-card-icon {
                    font-size: 22px;
                }

                .adm-tab-card-name {
                    font-size: 12px;
                }

                /* ── PANEL PADDING ── */
                .panel {
                    padding: 12px;
                }

                .home-inner {
                    padding: 14px 12px 80px;
                }

                .filter-row {
                    gap: 8px;
                }

                /* ── TOAST ── */
                #toast {
                    bottom: 80px;
                    right: 12px;
                    left: 12px;
                    font-size: 12px;
                    border-radius: 10px;
                }

                /* ── WA FAB ── */
                .wa-fab {
                    bottom: 76px;
                    right: 12px;
                    padding: 10px 16px;
                    font-size: 12px;
                }
            }

            /* ═══════════════════════════════════════════════════
   MOBILE BOTTOM NAV
═══════════════════════════════════════════════════ */
            #mobile-bottom-nav {
                display: none;
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                z-index: 300;
                background: var(--topbar-bg);
                border-top: 1px solid rgba(255,255,255,0.08);
                height: 62px;
                padding: 0 4px;
                box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
                overflow-x: auto;
                scrollbar-width: none;
            }

            #mobile-bottom-nav::-webkit-scrollbar {
                display: none;
            }

            .mbn-inner {
                display: flex;
                align-items: stretch;
                width: max-content;
                min-width: 100%;
                height: 100%;
                gap: 0;
                overflow-x: auto;
                scrollbar-width: none;
            }

            .mbn-inner::-webkit-scrollbar {
                display: none;
            }

            .mbn-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                flex: 0 0 auto;
                width: 64px;
                padding: 6px 4px 4px;
                cursor: pointer;
                color: rgba(255,255,255,0.45);
                font-size: 9px;
                font-weight: 600;
                letter-spacing: .3px;
                border-top: 2px solid transparent;
                transition: color .18s,border-color .18s;
                user-select: none;
                gap: 3px;
                white-space: nowrap;
            }

            .mbn-item:active {
                background: rgba(255,255,255,0.07);
            }

            #mbn-profile {
                position: sticky;
                right: 0;
                background: var(--topbar-bg);
                box-shadow: -6px 0 12px rgba(0,0,0,0.25);
                z-index: 2;
            }

            .mbn-item.active {
                color: #fff;
                border-top-color: var(--c-accent);
            }

            .mbn-item.active[data-cat="home"] {
                border-top-color: #60a5fa;
            }

            .mbn-item.active[data-cat="found"] {
                border-top-color: #4ade80;
            }

            .mbn-item.active[data-cat="bsc"] {
                border-top-color: #60a5fa;
            }

            .mbn-item.active[data-cat="direct"] {
                border-top-color: #fb923c;
            }

            .mbn-item.active[data-cat="admin"] {
                border-top-color: #fbbf24;
                color: #fbbf24;
            }

            .mbn-icon {
                font-size: 18px;
                line-height: 1;
            }

            .mbn-icon svg {
                width: 18px;
                height: 18px;
                vertical-align: middle;
            }

            .mbn-label {
                font-size: 9px;
            }

            .mbn-count {
                background: rgba(255,255,255,0.15);
                border-radius: 8px;
                padding: 1px 5px;
                font-size: 8px;
                font-weight: 700;
                min-width: 16px;
                text-align: center;
            }

            /* ═══════════════════════════════════════════════════
   ADD TAB FORM (in admin)
═══════════════════════════════════════════════════ */
            #adm-add-tab-form {
                background: var(--c-surface2);
                border: 1.5px solid var(--c-border);
                border-radius: var(--radius);
                padding: 16px;
                margin-top: 12px;
                display: none;
                animation: fadeUp .15s ease;
            }

            #adm-add-tab-form.open {
                display: block;
            }

            /* ═══════════════════════════════════════════════════
   HOME V2 — HERO
═══════════════════════════════════════════════════ */
            .home-inner {
                max-width: 900px;
                width: 100%;
                margin: 0 auto;
                padding: 28px 24px 60px;
            }

            .home-hero-v2 {
                position: relative;
                overflow: hidden;
                border-radius: var(--radius-lg);
                margin-bottom: 24px;
                background: radial-gradient(130% 150% at 88% 6%,rgba(47,108,246,0.14),transparent 52%), radial-gradient(110% 130% at 6% 100%,rgba(47,108,246,0.06),transparent 48%), linear-gradient(160deg,#ffffff 0%,#f4f8ff 55%,#eaf1fd 100%);
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 52px 52px 50px;
                box-shadow: var(--shadow-card);
                border: 1px solid var(--c-border);
                min-height: 236px;
            }

            body.dark .home-hero-v2 {
                background: radial-gradient(130% 150% at 88% 6%,rgba(91,155,255,0.16),transparent 52%), radial-gradient(110% 130% at 6% 100%,rgba(91,155,255,0.08),transparent 48%), linear-gradient(160deg,#131d33 0%,#0f1828 60%,#0c1424 100%);
            }

            /* faint horizon line — the one signature flourish */
            .home-hero-v2::after {
                content: '';
                position: absolute;
                left: 0;
                right: 0;
                top: 50%;
                height: 1px;
                background: linear-gradient(90deg,transparent,var(--c-accent-glow) 30%,var(--c-accent-glow) 70%,transparent);
                opacity: .5;
                pointer-events: none;
            }

            /* Left content */
            .hero-content {
                flex: 1;
                position: relative;
                z-index: 2;
            }

            #cp-home.cat-panel.active .hero-name {
                animation: fadeUp .6s cubic-bezier(.22,.61,.36,1) both;
                animation-delay: .05s;
            }

            #cp-home.cat-panel.active .hero-btns {
                animation: fadeUp .6s cubic-bezier(.22,.61,.36,1) both;
                animation-delay: .16s;
            }

            #cp-home.cat-panel.active .hero-pill {
                animation: fadeUp .6s cubic-bezier(.22,.61,.36,1) both;
                animation-delay: .26s;
            }

            #cp-home.cat-panel.active .hero-anchor-side {
                animation: fadeIn .9s ease both;
                animation-delay: .2s;
            }

            .hero-top-line {
                display: flex;
                align-items: baseline;
                gap: 10px;
                margin-bottom: 14px;
                flex-wrap: wrap;
            }

            .hero-tag {
                font-family: var(--mono);
                font-size: 11px;
                font-weight: 500;
                color: var(--c-muted);
                letter-spacing: 1.5px;
                text-transform: uppercase;
            }

            .hero-physics {
                font-family: var(--font-display);
                font-size: 40px;
                font-weight: 600;
                font-style: normal;
                color: var(--c-accent);
                letter-spacing: -1px;
            }

            .hero-name {
                font-family: var(--font-display);
                font-size: 42px;
                font-weight: 600;
                color: var(--c-text);
                margin-bottom: 24px;
                letter-spacing: -1.2px;
                line-height: 1.08;
            }

            .hero-btns {
                display: flex;
                gap: 10px;
                align-items: center;
                margin-bottom: 26px;
                flex-wrap: wrap;
            }

            .hbtn-primary {
                background: var(--c-accent);
                color: #fff;
                border: none;
                border-radius: 12px;
                padding: 12px 24px;
                font-family: var(--font);
                font-size: 13px;
                font-weight: 600;
                cursor: pointer;
                box-shadow: 0 6px 16px rgba(47,108,246,.28);
                transition: transform var(--transition),box-shadow var(--transition),background var(--transition);
                letter-spacing: .2px;
            }

            .hbtn-primary:hover {
                filter: brightness(1.06);
                transform: translateY(-1px);
                box-shadow: 0 10px 24px rgba(47,108,246,.36);
            }

            .hbtn-secondary {
                background: var(--c-surface);
                color: var(--c-text);
                border: 1px solid var(--c-border2);
                border-radius: 12px;
                padding: 12px 22px;
                font-family: var(--font);
                font-size: 13px;
                font-weight: 500;
                cursor: pointer;
                transition: transform var(--transition),background var(--transition);
                display: flex;
                align-items: center;
                gap: 6px;
            }

            .hbtn-secondary:hover {
                background: var(--c-surface3);
                transform: translateY(-1px);
            }

            .hero-pill {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                font-family: var(--font);
                font-size: 11px;
                color: var(--c-text2);
                border: 1px solid var(--c-border2);
                border-radius: 30px;
                padding: 7px 16px;
                background: var(--c-surface);
                letter-spacing: .2px;
                font-weight: 500;
            }

            /* Right anchor */
            .hero-anchor-side {
                flex-shrink: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-left: 0;
                margin-right: 40px;
            }

            .anchor-svg-wrap {
                filter: drop-shadow(0 8px 24px rgba(47,108,246,0.28));
                animation: floatUp 5s ease-in-out infinite;
            }

            .anchor-svg {
                width: 220px;
                height: 100px;
            }

            /* ═══ STATS V2 ═══ */
            .home-stats-row-v2 {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                gap: 16px;
                margin-bottom: 24px;
            }

            .hs-card-v2 {
                position: relative;
                overflow: hidden;
                border-radius: 20px;
                padding: 26px 22px 22px;
                background: var(--c-surface);
                border: 1px solid var(--c-border);
                box-shadow: var(--shadow-card);
                transition: transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s,border-color .3s;
                cursor: default;
                animation: fadeUp .55s cubic-bezier(.22,.61,.36,1) both;
            }

            .hs-card-v2.hs-c1 {
                animation-delay: .05s;
            }

            .hs-card-v2.hs-c2 {
                animation-delay: .14s;
            }

            .hs-card-v2.hs-c3 {
                animation-delay: .23s;
            }

            .hs-card-v2:hover {
                transform: translateY(-5px);
                box-shadow: var(--shadow-lg);
                border-color: var(--c-border2);
            }

            .hs-card-v2::after {
                content: '';
                position: absolute;
                inset: 0;
                border-radius: 20px;
                pointer-events: none;
                background: radial-gradient(120% 80% at 50% -10%,rgba(255,255,255,.5),transparent 60%);
                opacity: 0;
                transition: opacity .3s;
            }

            body.dark .hs-card-v2::after {
                background: radial-gradient(120% 80% at 50% -10%,rgba(255,255,255,.06),transparent 60%);
            }

            .hs-card-v2:hover::after {
                opacity: 1;
            }

            .hs-card-bg {
                position: absolute;
                inset: 0;
                pointer-events: none;
                border-radius: 20px;
            }

            .hs-c1 .hs-card-bg {
                background: linear-gradient(135deg,var(--c-accent-glow) 0%,transparent 55%);
            }

            .hs-c2 .hs-card-bg {
                background: linear-gradient(135deg,var(--c-green-bg) 0%,transparent 55%);
            }

            .hs-c3 .hs-card-bg {
                background: linear-gradient(135deg,var(--c-red-bg) 0%,transparent 55%);
            }

            .hs-icon {
                font-size: 24px;
                margin-bottom: 14px;
                display: block;
            }

            .hs-num-v2 {
                font-family: var(--font-display);
                font-size: 60px;
                line-height: .95;
                font-weight: 600;
                color: var(--c-accent);
                letter-spacing: -2px;
                margin-bottom: 12px;
                animation: countUp .5s cubic-bezier(.22,.61,.36,1) both;
            }

            .hs-num-green {
                color: var(--c-green)!important;
            }

            .hs-num-red {
                color: var(--c-red)!important;
            }

            .hs-lbl-v2 {
                font-family: var(--font);
                font-size: 10px;
                font-weight: 600;
                color: var(--c-muted);
                text-transform: uppercase;
                letter-spacing: 1.5px;
            }

            .hs-bar {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 2px;
                border-radius: 0 0 20px 20px;
            }

            .hs-bar1 {
                background: var(--c-accent);
            }

            .hs-bar2 {
                background: var(--c-green);
            }

            .hs-bar3 {
                background: var(--c-red);
            }

            /* ═══ SEARCH V2 ═══ */
            .home-search-v2 {
                background: var(--c-surface);
                border-radius: 20px;
                box-shadow: var(--shadow-card);
                border: 1px solid var(--c-border);
                overflow: hidden;
                transition: background var(--transition);
            }

            .search-header {
                background: linear-gradient(135deg,var(--c-navy) 0%,var(--c-navy2) 100%);
                padding: 18px 24px;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .search-title-wrap {
                display: flex;
                align-items: center;
                gap: 14px;
            }

            .search-icon-circle {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background: rgba(255,255,255,.1);
                border: 1px solid rgba(255,255,255,.15);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 18px;
                flex-shrink: 0;
            }

            .search-title {
                font-family: var(--font-display);
                font-size: 21px;
                font-weight: 600;
                color: #fff;
                letter-spacing: -.3px;
            }

            .search-subtitle {
                font-family: var(--font);
                font-size: 11px;
                color: rgba(255,255,255,.5);
                margin-top: 3px;
            }

            .search-body {
                padding: 20px 22px 6px;
            }

            .hs-input-row-v2 {
                display: flex;
                gap: 10px;
                align-items: center;
            }

            .search-input-wrap {
                flex: 1;
                position: relative;
                display: flex;
                align-items: center;
            }

            .search-input-icon {
                position: absolute;
                left: 14px;
                font-size: 16px;
                pointer-events: none;
                z-index: 1;
            }

            .hs-input-v2 {
                width: 100%;
                border: 1.5px solid var(--c-border);
                border-radius: 12px;
                padding: 12px 16px 12px 44px;
                font-family: var(--font);
                font-size: 13px;
                color: var(--c-text);
                background: var(--c-surface2);
                outline: none;
                transition: all .2s;
            }

            .hs-input-v2:focus {
                border-color: var(--c-accent);
                background: var(--c-surface);
                box-shadow: 0 0 0 3px var(--c-accent-glow);
            }

            .hs-input-v2::placeholder {
                color: var(--c-muted);
            }

            .hs-btn-v2 {
                background: var(--c-accent);
                color: #fff;
                border: none;
                border-radius: 12px;
                padding: 12px 26px;
                font-family: var(--font);
                font-size: 13px;
                font-weight: 600;
                cursor: pointer;
                white-space: nowrap;
                transition: transform var(--transition),box-shadow var(--transition),filter var(--transition);
                box-shadow: 0 6px 16px rgba(47,108,246,.28);
                letter-spacing: .2px;
            }

            .hs-btn-v2:hover {
                transform: translateY(-2px);
                filter: brightness(1.06);
                box-shadow: 0 10px 24px rgba(47,108,246,.36);
            }

            .hs-clear-v2 {
                background: var(--c-surface3);
                color: var(--c-muted);
                border: 1.5px solid var(--c-border);
                border-radius: 12px;
                padding: 12px 14px;
                font-size: 14px;
                cursor: pointer;
                display: none;
                transition: all .2s;
            }

            .hs-clear-v2:hover {
                background: var(--c-red-bg);
                color: var(--c-red);
                border-color: var(--c-red);
            }

            #home-search-results {
                padding: 0 22px 16px;
                contain: content;
            }

            @media(max-width: 640px) {
                .home-hero-v2 {
                    flex-direction:column;
                    padding: 28px 22px;
                    text-align: center;
                }

                .hero-title {
                    font-size: 34px;
                }

                .hero-anchor-wrap {
                    width: 90px;
                    height: 90px;
                    margin: 16px auto 0;
                }

                .hero-anchor {
                    font-size: 44px;
                }

                .home-stats-row-v2 {
                    grid-template-columns: 1fr;
                }

                .hs-num-v2 {
                    font-size: 56px;
                }
            }

            /* ═══════════════════════════════════════════════════
   DOCUMENT UPLOAD FIELD
═══════════════════════════════════════════════════ */
            .doc-upload-box {
                border: 2px dashed var(--c-border2);
                border-radius: 10px;
                padding: 12px 14px;
                background: var(--c-surface2);
                display: flex;
                flex-direction: column;
                gap: 8px;
                transition: border-color .2s,background .2s;
            }

            .doc-upload-box:hover {
                border-color: var(--c-accent);
                background: var(--c-surface3);
            }

            .doc-upload-btn {
                background: linear-gradient(135deg,var(--c-accent),var(--c-blue));
                color: #fff;
                border: none;
                border-radius: 8px;
                padding: 8px 14px;
                font-size: 12px;
                font-weight: 700;
                cursor: pointer;
                font-family: var(--font);
                display: inline-flex;
                align-items: center;
                gap: 6px;
                transition: all .2s;
                box-shadow: 0 2px 8px rgba(47,108,246,.25);
                align-self: flex-start;
            }

            .doc-upload-btn:hover {
                transform: translateY(-1px);
                box-shadow: 0 4px 14px rgba(47,108,246,.35);
            }

            .doc-preview {
                display: flex;
                align-items: center;
                gap: 10px;
                background: var(--c-surface);
                border: 1.5px solid var(--c-border);
                border-radius: 8px;
                padding: 8px 12px;
                animation: fadeIn .2s ease;
            }

            .doc-preview-icon {
                font-size: 24px;
                flex-shrink: 0;
            }

            .doc-preview-info {
                flex: 1;
                min-width: 0;
            }

            .doc-preview-name {
                font-size: 12px;
                font-weight: 600;
                color: var(--c-text);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .doc-preview-size {
                font-size: 10px;
                color: var(--c-muted);
                margin-top: 2px;
            }

            .doc-preview-btns {
                display: flex;
                gap: 5px;
                flex-shrink: 0;
            }

            .doc-dl-btn {
                background: var(--c-teal-bg);
                color: var(--c-teal);
                border: 1.5px solid rgba(47,108,246,.3);
                border-radius: 6px;
                padding: 4px 10px;
                font-size: 10px;
                font-weight: 700;
                cursor: pointer;
                text-decoration: none;
                display: inline-flex;
                align-items: center;
                gap: 4px;
                font-family: var(--font);
                transition: all .15s;
            }

            .doc-dl-btn:hover {
                background: var(--c-teal);
                color: #fff;
            }

            .doc-rm-btn {
                background: var(--c-red-bg);
                color: var(--c-red);
                border: 1.5px solid rgba(185,28,28,.2);
                border-radius: 6px;
                padding: 4px 8px;
                font-size: 11px;
                font-weight: 700;
                cursor: pointer;
                font-family: var(--font);
                transition: all .15s;
            }

            .doc-rm-btn:hover {
                background: var(--c-red);
                color: #fff;
            }

            /* In table/modal */
            .doc-chip {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                background: var(--c-teal-bg);
                border: 1px solid rgba(47,108,246,.25);
                border-radius: 20px;
                padding: 3px 10px;
                font-size: 10px;
                font-weight: 700;
                color: var(--c-teal);
                text-decoration: none;
                cursor: pointer;
                transition: all .15s;
            }

            .doc-chip:hover {
                background: var(--c-teal);
                color: #fff;
            }

            .doc-none {
                color: var(--c-muted);
                font-size: 11px;
            }

            .cal-picker-overlay {
                position: fixed;
                inset: 0;
                z-index: 1000;
                background: transparent;
                display: none;
            }

            .cal-picker-overlay.open {
                display: block;
            }

            .cal-picker {
                position: fixed;
                z-index: 1001;
                background: var(--c-surface);
                border: 1.5px solid var(--c-border);
                border-radius: 16px;
                box-shadow: 0 12px 40px rgba(0,0,0,0.25),0 0 0 1px rgba(0,0,0,0.05);
                padding: 0;
                min-width: 300px;
                overflow: hidden;
                animation: scaleIn .15s cubic-bezier(.34,1.56,.64,1);
                user-select: none;
            }

            .cal-header {
                background: linear-gradient(135deg,var(--c-navy),var(--c-navy2));
                color: #fff;
                padding: 14px 16px 12px;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .cal-nav-btn {
                background: rgba(255,255,255,0.12);
                border: 1px solid rgba(255,255,255,0.2);
                color: #fff;
                width: 30px;
                height: 30px;
                border-radius: 8px;
                cursor: pointer;
                font-size: 14px;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: background .15s;
            }

            .cal-nav-btn:hover {
                background: rgba(255,255,255,0.22);
            }

            .cal-month-label {
                font-family: var(--font-display);
                font-size: 14px;
                font-weight: 700;
                cursor: pointer;
                padding: 4px 10px;
                border-radius: 7px;
                transition: background .15s;
            }

            .cal-month-label:hover {
                background: rgba(255,255,255,0.12);
            }

            .cal-weekdays {
                display: grid;
                grid-template-columns: repeat(7,1fr);
                padding: 10px 12px 4px;
                gap: 0;
            }

            .cal-wd {
                text-align: center;
                font-size: 10px;
                font-weight: 700;
                color: var(--c-muted);
                text-transform: uppercase;
                letter-spacing: .5px;
                padding: 4px 0;
            }

            .cal-days {
                display: grid;
                grid-template-columns: repeat(7,1fr);
                padding: 4px 12px 14px;
                gap: 3px;
            }

            .cal-day {
                aspect-ratio: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 8px;
                font-size: 12px;
                font-weight: 500;
                cursor: pointer;
                transition: background .12s,color .12s;
                border: 1.5px solid transparent;
            }

            .cal-day:hover:not(.cal-empty):not(.cal-selected) {
                background: var(--c-surface3);
                border-color: var(--c-border);
            }

            .cal-day.cal-today {
                color: var(--c-accent);
                font-weight: 700;
                border-color: var(--c-accent);
            }

            .cal-day.cal-selected {
                background: linear-gradient(135deg,var(--c-accent),var(--c-blue));
                color: #fff;
                font-weight: 700;
                border-color: transparent;
                box-shadow: 0 2px 8px rgba(47,108,246,0.35);
            }

            .cal-day.cal-empty {
                cursor: default;
            }

            .cal-day.cal-other-month {
                opacity: .35;
            }

            .cal-footer {
                border-top: 1px solid var(--c-border);
                padding: 10px 14px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background: var(--c-surface2);
            }

            .cal-today-btn {
                background: var(--c-surface3);
                border: 1.5px solid var(--c-border);
                color: var(--c-text2);
                border-radius: 7px;
                padding: 5px 12px;
                font-size: 11px;
                font-weight: 600;
                cursor: pointer;
                font-family: var(--font);
                transition: all .15s;
            }

            .cal-today-btn:hover {
                background: var(--c-accent);
                color: #fff;
                border-color: var(--c-accent);
            }

            .cal-clear-btn {
                background: none;
                border: none;
                color: var(--c-muted);
                font-size: 11px;
                cursor: pointer;
                font-family: var(--font);
                transition: color .15s;
            }

            .cal-clear-btn:hover {
                color: var(--c-red);
            }

            /* Year/Month selector overlay */
            .cal-yms {
                display: none;
                background: var(--c-surface);
                padding: 14px;
            }

            .cal-yms.open {
                display: block;
            }

            .cal-yms-title {
                font-size: 11px;
                font-weight: 700;
                color: var(--c-muted);
                text-transform: uppercase;
                letter-spacing: .5px;
                margin-bottom: 10px;
            }

            .cal-year-grid {
                display: grid;
                grid-template-columns: repeat(4,1fr);
                gap: 6px;
                max-height: 160px;
                overflow-y: auto;
            }

            .cal-year-btn {
                border: 1.5px solid var(--c-border);
                border-radius: 7px;
                padding: 6px 4px;
                font-size: 11px;
                font-weight: 600;
                cursor: pointer;
                text-align: center;
                background: var(--c-surface2);
                color: var(--c-text2);
                transition: all .15s;
            }

            .cal-year-btn:hover,.cal-year-btn.active {
                background: var(--c-accent);
                color: #fff;
                border-color: var(--c-accent);
            }

            .cal-month-grid {
                display: grid;
                grid-template-columns: repeat(4,1fr);
                gap: 6px;
                margin-top: 12px;
            }

            .cal-month-btn {
                border: 1.5px solid var(--c-border);
                border-radius: 7px;
                padding: 7px 4px;
                font-size: 11px;
                font-weight: 600;
                cursor: pointer;
                text-align: center;
                background: var(--c-surface2);
                color: var(--c-text2);
                transition: all .15s;
            }

            .cal-month-btn:hover,.cal-month-btn.active {
                background: var(--c-accent);
                color: #fff;
                border-color: var(--c-accent);
            }

            /* Age display badge */
            .age-badge {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                background: linear-gradient(135deg,rgba(47,108,246,0.1),rgba(109,40,217,0.1));
                border: 1.5px solid rgba(47,108,246,0.25);
                border-radius: 20px;
                padding: 4px 12px;
                font-size: 11px;
                font-weight: 700;
                color: var(--c-accent);
                margin-top: 5px;
                animation: fadeIn .2s ease;
                white-space: nowrap;
            }

            .age-badge .age-icon {
                font-size: 13px;
            }

            /* ═══════════════════════════════════════════════════
   SCROLLBAR
═══════════════════════════════════════════════════ */
            ::-webkit-scrollbar {
                width: 5px;
                height: 5px;
            }

            ::-webkit-scrollbar-track {
                background: transparent;
            }

            ::-webkit-scrollbar-thumb {
                background: var(--c-border2);
                border-radius: 10px;
            }

            ::-webkit-scrollbar-thumb:hover {
                background: var(--c-muted);
            }

            /* ═══════════════════════════════════════════════════
   WHATSAPP FEATURE
═══════════════════════════════════════════════════ */
            .wa-sel-col {
                width: 36px;
                text-align: center;
            }

            .wa-row-cb {
                width: 16px;
                height: 16px;
                accent-color: #2f6cf6;
                cursor: pointer;
            }

            .wa-master-cb,.sp-row-cb,.sp-master-cb {
                accent-color: #2f6cf6;
                cursor: pointer;
            }

            .sp-row-cb {
                width: 16px;
                height: 16px;
            }

            .wa-select-bar {
                display: flex;
                align-items: center;
                gap: 10px;
                justify-content: flex-end;
                background: transparent;
                border: none;
                border-radius: 0;
                padding: 2px 0;
                margin-bottom: 6px;
                animation: fadeUp .2s ease;
                flex-wrap: wrap;
            }

            body.dark .wa-select-bar {
                background: transparent;
                border: none;
            }

            .wa-select-bar.show {
                display: flex;
            }

            .wa-select-bar label {
                font-size: 11px;
                font-weight: 700;
                color: #1e50c8;
                display: flex;
                align-items: center;
                gap: 7px;
                cursor: pointer;
            }

            body.dark .wa-select-bar label {
                color: #93c5fd;
            }

            .wa-sel-info {
                font-size: 11px;
                font-weight: 600;
                color: #2f6cf6;
                margin-right: auto;
            }

            body.dark .wa-sel-info {
                color: #93c5fd;
            }

            .wa-clear-btn {
                background: none;
                border: 1.5px solid #b3cdf5;
                color: #1e50c8;
                border-radius: 6px;
                padding: 3px 9px;
                font-size: 11px;
                font-weight: 600;
                cursor: pointer;
                font-family: var(--font);
                transition: background .15s;
            }

            body.dark .wa-clear-btn {
                border-color: rgba(59,130,246,0.4);
                color: #93c5fd;
            }

            .wa-clear-btn:hover {
                background: #d0e0fa;
            }

            body.dark .wa-clear-btn:hover {
                background: rgba(59,130,246,0.15);
            }

            .wa-export-btn {
                background: #2f6cf6;
                border: none;
                color: #fff;
                border-radius: 6px;
                padding: 4px 11px;
                font-size: 11px;
                font-weight: 700;
                cursor: pointer;
                font-family: var(--font);
                transition: filter .15s,transform .15s;
                box-shadow: 0 2px 8px rgba(47,108,246,0.3);
            }

            .wa-export-btn:hover {
                filter: brightness(1.08);
                transform: translateY(-1px);
            }

            .wa-col-btn {
                background: none;
                border: 1.5px solid #b3cdf5;
                color: #1e50c8;
                border-radius: 6px;
                padding: 3px 9px;
                font-size: 11px;
                font-weight: 600;
                cursor: pointer;
                font-family: var(--font);
                transition: background .15s;
            }

            body.dark .wa-col-btn {
                border-color: rgba(59,130,246,0.4);
                color: #93c5fd;
            }

            .wa-col-btn:hover {
                background: #d0e0fa;
            }

            body.dark .wa-col-btn:hover {
                background: rgba(59,130,246,0.15);
            }

            .col-chip-panel {
                background: var(--c-surface2);
                border: 1.5px solid var(--c-border);
                border-radius: 10px;
                padding: 11px 13px;
                margin-bottom: 12px;
                animation: fadeUp .15s ease;
            }

            .col-chip-title {
                font-size: 10px;
                font-weight: 700;
                color: var(--c-muted);
                text-transform: uppercase;
                letter-spacing: .6px;
                margin-bottom: 9px;
            }

            .col-chip-row {
                display: flex;
                flex-wrap: wrap;
                gap: 7px;
            }

            .col-chip {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                font-size: 11px;
                font-weight: 600;
                color: var(--c-text2);
                background: var(--c-surface);
                border: 1.5px solid var(--c-border);
                border-radius: 20px;
                padding: 4px 11px;
                cursor: pointer;
                transition: all .12s;
            }

            .col-chip input {
                width: 13px;
                height: 13px;
                accent-color: #2f6cf6;
                cursor: pointer;
                margin: 0;
            }

            .col-chip.on {
                background: #e8effc;
                border-color: #2f6cf6;
                color: #1e50c8;
            }

            body.dark .col-chip.on {
                background: rgba(59,130,246,0.15);
                border-color: #4d84f8;
                color: #93c5fd;
            }

            .wa-fab {
                position: fixed;
                bottom: 24px;
                right: 24px;
                z-index: 500;
                background: linear-gradient(135deg,#128C7E,#25D366);
                color: #fff;
                border: none;
                border-radius: 20px;
                padding: 13px 22px;
                font-size: 13px;
                font-weight: 700;
                cursor: pointer;
                font-family: var(--font);
                box-shadow: 0 6px 28px rgba(37,211,102,0.45);
                display: none;
                align-items: center;
                gap: 9px;
                transition: all .25s cubic-bezier(.4,0,.2,1);
                animation: waPop .3s cubic-bezier(.34,1.56,.64,1);
            }

            .wa-fab:hover {
                transform: translateY(-3px);
                box-shadow: 0 10px 36px rgba(37,211,102,0.55);
            }

            .wa-fab-count {
                background: rgba(255,255,255,0.25);
                border-radius: 12px;
                padding: 2px 8px;
                font-size: 11px;
                font-weight: 800;
                min-width: 22px;
                text-align: center;
            }

            @keyframes waPop {
                from {
                    opacity: 0;
                    transform: scale(.7) translateY(20px)
                }

                to {
                    opacity: 1;
                    transform: scale(1) translateY(0)
                }
            }

            .wa-modal-ov {
                display: none;
                position: fixed;
                inset: 0;
                background: rgba(0,0,0,0.65);
                backdrop-filter: blur(5px);
                z-index: 600;
                align-items: center;
                justify-content: center;
            }

            .wa-modal-ov.open {
                display: flex;
                animation: fadeIn .2s ease;
            }

            .wa-modal {
                background: var(--c-surface);
                border-radius: 20px;
                width: 92%;
                max-width: 520px;
                box-shadow: 0 24px 80px rgba(0,0,0,0.35);
                overflow: hidden;
                animation: waPop .3s cubic-bezier(.34,1.56,.64,1);
            }

            .wa-modal-head {
                background: linear-gradient(135deg,#128C7E,#075E54);
                padding: 18px 22px;
                display: flex;
                align-items: center;
                gap: 12px;
            }

            .wa-modal-head-icon {
                font-size: 30px;
                filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
            }

            .wa-modal-head h3 {
                color: #fff;
                font-size: 15px;
                font-weight: 800;
                margin-bottom: 2px;
                font-family: var(--font-display);
            }

            .wa-modal-head p {
                color: rgba(255,255,255,0.65);
                font-size: 11px;
            }

            .wa-modal-body {
                padding: 18px 22px;
            }

            .wa-toolbar {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 10px;
            }

            .wa-toolbar-info {
                font-size: 11px;
                font-weight: 600;
                color: var(--c-muted);
            }

            .wa-copy-all-btn {
                background: #f0fdf4;
                border: 1.5px solid #bbf7d0;
                color: #065f46;
                border-radius: 8px;
                padding: 5px 12px;
                font-size: 11px;
                font-weight: 700;
                cursor: pointer;
                font-family: var(--font);
                transition: all .15s;
            }

            .wa-copy-all-btn:hover {
                background: #dcfce7;
                border-color: #86efac;
            }

            .wa-num-list {
                background: var(--c-surface2);
                border: 1.5px solid var(--c-border);
                border-radius: 12px;
                padding: 10px 12px;
                max-height: 220px;
                overflow-y: auto;
                margin-bottom: 14px;
                scrollbar-width: thin;
            }

            .wa-num-item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 6px 0;
                border-bottom: 1px solid var(--c-border);
            }

            .wa-num-item:last-child {
                border-bottom: none;
            }

            .wa-added-label {
                display: flex;
                align-items: center;
                gap: 7px;
                cursor: pointer;
                flex: 1;
                min-width: 0;
            }

            .wa-added-label input[type=checkbox] {
                flex-shrink: 0;
                width: 15px;
                height: 15px;
                accent-color: #25D366;
                cursor: pointer;
            }

            .wa-num-name {
                font-weight: 600;
                font-size: 12px;
                color: var(--c-text);
            }

            .wa-num-phone {
                font-family: var(--mono);
                color: #059669;
                font-size: 11px;
            }

            body.dark .wa-num-phone {
                color: #4ade80;
            }

            .wa-num-invalid {
                color: var(--c-red);
                font-size: 10px;
                font-weight: 600;
                background: var(--c-red-bg);
                border-radius: 4px;
                padding: 1px 6px;
            }

            .wa-added-tag {
                font-size: 10px;
                font-weight: 700;
                background: #d1fae5;
                color: #065f46;
                border: 1px solid #6ee7b7;
                border-radius: 10px;
                padding: 2px 7px;
                white-space: nowrap;
                flex-shrink: 0;
            }

            .wa-modal-footer {
                padding: 12px 22px;
                background: var(--c-surface2);
                border-top: 1px solid var(--c-border);
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 8px;
            }

            .wa-footer-summary {
                font-size: 11px;
                color: var(--c-muted);
                font-weight: 600;
            }

            .wa-added-row-badge {
                font-size: 9px;
                font-weight: 700;
                background: #d1fae5;
                color: #065f46;
                border: 1px solid #a7f3d0;
                border-radius: 10px;
                padding: 1px 7px;
                white-space: nowrap;
                margin-left: 4px;
            }

            /* CADET DOCUMENTS PANEL */
            .cdoc-section {
                padding: 16px 20px;
                border-top: 1.5px solid var(--c-border);
                margin-top: 4px;
            }

            .cdoc-title {
                font-size: 11px;
                font-weight: 800;
                color: var(--c-muted);
                text-transform: uppercase;
                letter-spacing: .6px;
                margin-bottom: 12px;
                display: flex;
                align-items: center;
                gap: 6px;
            }

            .cdoc-list {
                display: flex;
                flex-direction: column;
                gap: 8px;
                margin-bottom: 10px;
            }

            .cdoc-item {
                display: flex;
                align-items: center;
                gap: 10px;
                background: var(--c-surface2);
                border: 1px solid var(--c-border);
                border-radius: 10px;
                padding: 10px 12px;
                transition: border-color .15s;
            }

            .cdoc-item:hover {
                border-color: var(--c-accent);
            }

            .cdoc-icon {
                font-size: 22px;
                flex-shrink: 0;
            }

            .cdoc-info {
                flex: 1;
                min-width: 0;
            }

            .cdoc-name {
                font-size: 12px;
                font-weight: 700;
                color: var(--c-text);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .cdoc-meta {
                font-size: 10px;
                color: var(--c-muted);
                margin-top: 2px;
            }

            .cdoc-btns {
                display: flex;
                gap: 6px;
                flex-shrink: 0;
            }

            .cdoc-view-btn {
                background: var(--c-teal-bg);
                color: var(--c-teal);
                border: 1px solid var(--c-teal);
                border-radius: 6px;
                padding: 5px 10px;
                font-size: 11px;
                font-weight: 700;
                cursor: pointer;
            }

            .cdoc-view-btn:hover {
                background: var(--c-teal);
                color: #fff;
            }

            .cdoc-del-btn {
                background: var(--c-red-bg);
                color: var(--c-red);
                border: 1px solid var(--c-red);
                border-radius: 6px;
                padding: 5px 8px;
                font-size: 11px;
                cursor: pointer;
            }

            .cdoc-del-btn:hover {
                background: var(--c-red);
                color: #fff;
            }

            .cdoc-add-btn {
                width: 100%;
                background: var(--c-surface3);
                border: 2px dashed var(--c-border);
                color: var(--c-accent);
                border-radius: 10px;
                padding: 12px;
                font-size: 12px;
                font-weight: 700;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 6px;
                transition: all .15s;
            }

            .cdoc-add-btn:hover {
                border-color: var(--c-accent);
                background: rgba(47,108,246,.07);
            }

            .cdoc-addlink-row {
                display: none;
                flex-direction: column;
                gap: 8px;
                background: var(--c-surface2);
                border: 1.5px solid var(--c-border);
                border-radius: 10px;
                padding: 12px;
                margin-bottom: 10px;
            }

            .cdoc-addlink-row input {
                width: 100%;
                background: var(--c-surface3);
                border: 1px solid var(--c-border);
                border-radius: 8px;
                padding: 9px 11px;
                font-size: 12px;
                font-family: var(--font);
                color: var(--c-text);
                box-sizing: border-box;
            }

            .cdoc-addlink-row input:focus {
                outline: none;
                border-color: var(--c-accent);
            }

            .cdoc-addlink-btns {
                display: flex;
                gap: 8px;
            }

            .cdoc-addlink-btns .btn {
                flex: 1;
                font-size: 12px;
                padding: 8px 10px;
            }

            .cdoc-empty {
                text-align: center;
                color: var(--c-muted);
                font-size: 12px;
                padding: 10px 0 14px;
            }

            /* Doc viewer fullscreen */
            .dv-ov {
                display: none;
                position: fixed;
                inset: 0;
                background: rgba(0,0,0,.95);
                z-index: 500;
                flex-direction: column;
            }

            .dv-ov.open {
                display: flex;
            }

            .dv-bar {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 10px 16px;
                background: #070d1c;
                border-bottom: 1px solid #1e2d4e;
                flex-shrink: 0;
                gap: 10px;
            }

            .dv-fname {
                font-size: 13px;
                font-weight: 700;
                color: #fff;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                flex: 1;
            }

            .dv-dl {
                background: #1e3a5f;
                color: #7eb8f7;
                border: 1px solid #2d5a8e;
                border-radius: 7px;
                padding: 6px 12px;
                font-size: 11px;
                font-weight: 700;
                text-decoration: none;
                white-space: nowrap;
            }

            .dv-close {
                background: #2d1a1a;
                color: #f87171;
                border: 1px solid #7f1d1d;
                border-radius: 7px;
                padding: 6px 12px;
                font-size: 11px;
                font-weight: 700;
                cursor: pointer;
                white-space: nowrap;
            }

            .dv-body {
                flex: 1;
                overflow: auto;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 12px;
            }

            .dv-body iframe {
                width: 100%;
                height: 100%;
                border: none;
                border-radius: 8px;
                background: #fff;
            }

            .dv-body img {
                max-width: 100%;
                max-height: 100%;
                border-radius: 8px;
                object-fit: contain;
            }

            .dv-nosupport {
                color: #ccc;
                text-align: center;
                padding: 40px 20px;
            }

            /* ═══════════════════════════════════════════════════
   APPLY PANEL (user-facing application form)
═══════════════════════════════════════════════════ */
            #cp-apply {
                padding: 0;
                min-height: 100%;
            }

            .apply-inner {
                max-width: 700px;
                width: 100%;
                margin: 0 auto;
                padding: 28px 20px 60px;
            }

            .apply-hero {
                background: linear-gradient(135deg,#0b1f45 0%,#1a50a8 100%);
                border-radius: 20px;
                padding: 32px 28px 28px;
                margin-bottom: 22px;
                color: #fff;
                text-align: center;
                position: relative;
                overflow: hidden;
                box-shadow: 0 8px 32px rgba(6,15,34,0.4);
            }

            .apply-hero::before {
                content: '';
                position: absolute;
                inset: 0;
                background: radial-gradient(ellipse at 60% 30%,rgba(255,255,255,0.07) 0%,transparent 65%);
                pointer-events: none;
            }

            .apply-hero h2 {
                font-family: var(--font-display);
                font-size: 22px;
                font-weight: 800;
                margin-bottom: 6px;
            }

            .apply-hero p {
                font-size: 12px;
                color: rgba(255,255,255,0.55);
            }

            .apply-card {
                background: var(--c-surface);
                border-radius: var(--radius-lg);
                box-shadow: var(--shadow-card);
                padding: 26px;
                border: 1px solid var(--c-border);
                transition: background var(--transition);
            }

            .apply-card h3 {
                font-family: var(--font-display);
                font-size: 14px;
                font-weight: 700;
                color: var(--c-text);
                margin-bottom: 18px;
                padding-bottom: 12px;
                border-bottom: 1.5px solid var(--c-border);
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .apply-success {
                display: none;
                text-align: center;
                padding: 40px 20px;
            }

            .apply-success-icon {
                font-size: 56px;
                margin-bottom: 14px;
                display: block;
                animation: anchorBob 3s ease-in-out infinite;
            }

            .apply-success h3 {
                font-family: var(--font-display);
                font-size: 20px;
                font-weight: 800;
                color: var(--c-green);
                margin-bottom: 8px;
            }

            .apply-success p {
                font-size: 13px;
                color: var(--c-muted);
            }

            .apply-success-btn {
                margin-top: 18px;
                background: linear-gradient(135deg,var(--c-accent),#1e50c8);
                color: #fff;
                border: none;
                border-radius: 10px;
                padding: 11px 26px;
                font-family: var(--font);
                font-size: 13px;
                font-weight: 600;
                cursor: pointer;
                box-shadow: 0 2px 8px rgba(47,108,246,0.3);
                transition: all .2s;
            }

            .apply-success-btn:hover {
                transform: translateY(-1px);
                box-shadow: 0 4px 14px rgba(47,108,246,0.4);
            }

            /* ═══════════════════════════════════════════════════
   PENDING APPLICATIONS (admin tab)
═══════════════════════════════════════════════════ */
            .pend-wrap {
                padding: 18px;
            }

            .pend-hero {
                background: linear-gradient(135deg,#451a03,#78350f);
                border-radius: 14px;
                padding: 16px 20px;
                margin-bottom: 18px;
                display: flex;
                align-items: center;
                gap: 14px;
                box-shadow: 0 4px 16px rgba(120,53,15,0.3);
            }

            .pend-hero-icon {
                font-size: 32px;
            }

            .pend-hero h3 {
                font-family: var(--font-display);
                font-size: 15px;
                font-weight: 800;
                color: #fff;
                margin-bottom: 3px;
            }

            .pend-hero p {
                font-size: 11px;
                color: rgba(255,255,255,0.6);
            }

            .pend-badge {
                background: rgba(251,191,36,0.2);
                border: 1.5px solid rgba(251,191,36,0.5);
                border-radius: 20px;
                padding: 4px 14px;
                font-size: 11px;
                font-weight: 800;
                color: #fbbf24;
                margin-left: auto;
                white-space: nowrap;
            }

            .pend-filter-row {
                display: flex;
                gap: 10px;
                align-items: center;
                margin-bottom: 14px;
                flex-wrap: wrap;
            }

            .pend-card {
                background: var(--c-surface);
                border-radius: var(--radius-lg);
                border: 1.5px solid var(--c-border);
                margin-bottom: 12px;
                overflow: hidden;
                transition: box-shadow .2s,border-color .2s;
                animation: fadeUp .2s ease both;
            }

            .pend-card:hover {
                box-shadow: var(--shadow-md);
                border-color: var(--c-border2);
            }

            .pend-card-head {
                display: flex;
                align-items: center;
                gap: 14px;
                padding: 14px 16px;
                background: var(--c-surface2);
                border-bottom: 1px solid var(--c-border);
            }

            .pend-card-info {
                flex: 1;
                min-width: 0;
            }

            .pend-card-name {
                font-weight: 700;
                font-size: 13px;
                color: var(--c-text);
            }

            .pend-card-meta {
                font-size: 11px;
                color: var(--c-muted);
                margin-top: 3px;
                display: flex;
                gap: 10px;
                flex-wrap: wrap;
            }

            .pend-cat-badge {
                font-size: 10px;
                font-weight: 700;
                padding: 3px 10px;
                border-radius: 20px;
                background: rgba(47,108,246,0.12);
                color: var(--c-accent);
                border: 1px solid rgba(47,108,246,0.2);
            }

            .pend-time-badge {
                font-size: 10px;
                color: var(--c-muted);
                font-weight: 500;
            }

            .pend-card-actions {
                display: flex;
                gap: 7px;
                flex-shrink: 0;
            }

            .pend-approve-btn {
                background: linear-gradient(135deg,#16a34a,#15803d);
                color: #fff;
                border: none;
                border-radius: 8px;
                padding: 7px 14px;
                font-size: 11px;
                font-weight: 700;
                cursor: pointer;
                font-family: var(--font);
                transition: all .2s;
                box-shadow: 0 2px 8px rgba(22,163,74,0.25);
            }

            .pend-approve-btn:hover {
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(22,163,74,0.35);
            }

            .pend-reject-btn {
                background: linear-gradient(135deg,#dc2626,#b91c1c);
                color: #fff;
                border: none;
                border-radius: 8px;
                padding: 7px 14px;
                font-size: 11px;
                font-weight: 700;
                cursor: pointer;
                font-family: var(--font);
                transition: all .2s;
                box-shadow: 0 2px 8px rgba(220,38,38,0.2);
            }

            .pend-reject-btn:hover {
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(220,38,38,0.3);
            }

            .pend-del-btn {
                background: var(--c-surface3);
                color: var(--c-muted);
                border: 1.5px solid var(--c-border);
                border-radius: 8px;
                padding: 7px 10px;
                font-size: 11px;
                cursor: pointer;
                font-family: var(--font);
                transition: all .2s;
            }

            .pend-del-btn:hover {
                background: var(--c-red-bg);
                color: var(--c-red);
                border-color: var(--c-red);
            }

            .pend-card-body {
                padding: 12px 16px 14px;
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 8px;
            }

            .pend-field {
                display: flex;
                flex-direction: column;
                gap: 2px;
            }

            .pend-field label {
                font-size: 9px;
                font-weight: 700;
                color: var(--c-muted);
                text-transform: uppercase;
                letter-spacing: .5px;
            }

            .pend-field span {
                font-size: 12px;
                color: var(--c-text);
                font-weight: 500;
            }

            .pend-field.full {
                grid-column: 1/-1;
            }

            .pend-no-items {
                text-align: center;
                padding: 50px 20px;
                color: var(--c-muted);
                font-size: 13px;
            }

            .pend-no-items .pend-no-icon {
                font-size: 40px;
                margin-bottom: 12px;
                display: block;
                opacity: .5;
            }

            .pend-count-badge {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                background: var(--c-amber-bg);
                color: var(--c-amber);
                border-radius: 20px;
                padding: 2px 8px;
                font-size: 10px;
                font-weight: 800;
                min-width: 20px;
                margin-left: 6px;
            }

            @media(max-width: 640px) {
                .apply-inner {
                    padding:14px 12px 80px;
                }

                .apply-card {
                    padding: 16px;
                }

                .pend-wrap {
                    padding: 12px;
                }

                .pend-card-body {
                    grid-template-columns: 1fr;
                }

                .pend-card-actions {
                    flex-wrap: wrap;
                }

                .pend-field.full {
                    grid-column: 1;
                }
            }

            /* ═══════════════════════════════════════════════════
   NEWS / UPDATES TAB
═══════════════════════════════════════════════════ */
            #cp-news {
                padding: 0;
                min-height: 100%;
            }

            .news-inner {
                max-width: 860px;
                width: 100%;
                margin: 0 auto;
                padding: 22px 18px 70px;
            }

            .news-hero {
                background: linear-gradient(135deg,#0b1f45 0%,#1a3a6e 60%,#0e2d5a 100%);
                border-radius: 20px;
                padding: 26px 26px 22px;
                margin-bottom: 20px;
                display: flex;
                align-items: center;
                gap: 18px;
                box-shadow: 0 8px 28px rgba(6,15,34,0.4);
                position: relative;
                overflow: hidden;
            }

            .news-hero::before {
                content: '';
                position: absolute;
                inset: 0;
                background: radial-gradient(ellipse at 80% 50%,rgba(59,130,246,0.12) 0%,transparent 65%);
                pointer-events: none;
            }

            .news-hero-icon {
                font-size: 42px;
                flex-shrink: 0;
                filter: drop-shadow(0 0 14px rgba(59,130,246,0.5));
            }

            .news-hero-text h2 {
                font-family: var(--font-display);
                font-size: 20px;
                font-weight: 800;
                color: #fff;
                margin-bottom: 4px;
            }

            .news-hero-text p {
                font-size: 11px;
                color: rgba(255,255,255,0.5);
            }

            .news-refresh-btn {
                margin-left: auto;
                flex-shrink: 0;
                background: rgba(255,255,255,0.1);
                border: 1px solid rgba(255,255,255,0.2);
                color: #fff;
                border-radius: 10px;
                padding: 8px 16px;
                font-family: var(--font);
                font-size: 12px;
                font-weight: 600;
                cursor: pointer;
                transition: all .2s;
                display: flex;
                align-items: center;
                gap: 6px;
            }

            .news-refresh-btn:hover {
                background: rgba(255,255,255,0.18);
            }

            .news-refresh-btn.spinning .news-spin {
                animation: spin .8s linear infinite;
                display: inline-block;
            }

            .news-spin {
                display: inline-block;
            }

            /* Pinned announcements */
            .news-section-title {
                font-family: var(--font-display);
                font-size: 11px;
                font-weight: 700;
                color: var(--c-muted);
                text-transform: uppercase;
                letter-spacing: 1px;
                margin-bottom: 12px;
                display: flex;
                align-items: center;
                gap: 6px;
            }

            .news-pin-card {
                background: linear-gradient(135deg,rgba(251,191,36,0.08),rgba(180,83,9,0.06));
                border: 1.5px solid rgba(251,191,36,0.3);
                border-radius: 14px;
                padding: 14px 16px;
                margin-bottom: 10px;
                position: relative;
                animation: fadeUp .2s ease both;
            }

            body.dark .news-pin-card {
                background: linear-gradient(135deg,rgba(251,191,36,0.06),rgba(180,83,9,0.04));
            }

            .news-pin-badge {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                background: rgba(251,191,36,0.15);
                border: 1px solid rgba(251,191,36,0.35);
                border-radius: 20px;
                padding: 2px 9px;
                font-size: 9px;
                font-weight: 800;
                color: var(--c-gold);
                text-transform: uppercase;
                letter-spacing: .5px;
                margin-bottom: 7px;
            }

            .news-pin-title {
                font-size: 13px;
                font-weight: 700;
                color: var(--c-text);
                margin-bottom: 4px;
                line-height: 1.4;
            }

            .news-pin-body {
                font-size: 12px;
                color: var(--c-text2);
                line-height: 1.6;
            }

            .news-pin-meta {
                font-size: 10px;
                color: var(--c-muted);
                margin-top: 7px;
            }

            .news-pin-del {
                position: absolute;
                top: 10px;
                right: 10px;
                background: rgba(220,38,38,0.08);
                border: 1px solid rgba(220,38,38,0.2);
                color: var(--c-red);
                border-radius: 6px;
                width: 24px;
                height: 24px;
                font-size: 12px;
                cursor: pointer;
                display: none;
                align-items: center;
                justify-content: center;
                transition: background .15s;
            }

            .news-pin-card:hover .news-pin-del {
                display: flex;
            }

            .news-pin-del:hover {
                background: rgba(220,38,38,0.2);
            }

            /* Add announcement form (admin) */
            .news-add-form {
                background: var(--c-surface);
                border: 1.5px solid var(--c-border);
                border-radius: 14px;
                padding: 16px;
                margin-bottom: 18px;
                display: none;
                animation: fadeUp .15s ease;
            }

            .news-add-form.open {
                display: block;
            }

            /* Live news cards */
            .news-live-grid {
                display: flex;
                flex-direction: column;
                gap: 12px;
            }

            .news-card {
                background: var(--c-surface);
                border-radius: 14px;
                border: 1px solid var(--c-border);
                padding: 14px 16px;
                transition: box-shadow .2s,border-color .2s,transform .2s;
                animation: fadeUp .2s ease both;
                text-decoration: none;
                display: block;
                cursor: pointer;
            }

            .news-card:hover {
                box-shadow: var(--shadow-md);
                border-color: var(--c-border2);
                transform: translateY(-2px);
            }

            .news-card-source {
                font-size: 9px;
                font-weight: 800;
                text-transform: uppercase;
                letter-spacing: .8px;
                color: var(--c-accent);
                margin-bottom: 6px;
                display: flex;
                align-items: center;
                gap: 6px;
            }

            .news-card-source-dot {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: var(--c-accent);
                flex-shrink: 0;
            }

            .news-card-title {
                font-size: 13px;
                font-weight: 700;
                color: var(--c-text);
                margin-bottom: 5px;
                line-height: 1.4;
            }

            .news-card-desc {
                font-size: 11px;
                color: var(--c-text2);
                line-height: 1.5;
                margin-bottom: 8px;
            }

            .news-card-meta {
                font-size: 10px;
                color: var(--c-muted);
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .news-card-tag {
                background: var(--c-surface3);
                border-radius: 20px;
                padding: 2px 8px;
                font-size: 9px;
                font-weight: 700;
                color: var(--c-muted);
                text-transform: uppercase;
                letter-spacing: .4px;
            }

            .news-skeleton {
                background: var(--c-surface);
                border-radius: 14px;
                border: 1px solid var(--c-border);
                padding: 14px 16px;
            }

            .news-skel-line {
                height: 12px;
                border-radius: 6px;
                margin-bottom: 8px;
                background: linear-gradient(90deg,var(--c-surface3) 0%,var(--c-border) 50%,var(--c-surface3) 100%);
                background-size: 200% 100%;
                animation: shimmer 1.4s ease-in-out infinite;
            }

            .news-error {
                text-align: center;
                padding: 40px 20px;
                color: var(--c-muted);
            }

            .news-error-icon {
                font-size: 36px;
                margin-bottom: 10px;
                display: block;
            }

            @media(max-width: 640px) {
                .news-inner {
                    padding:14px 12px 80px;
                }

                .news-hero {
                    padding: 18px 16px;
                    gap: 12px;
                }

                .news-hero-icon {
                    font-size: 32px;
                }

                .news-hero-text h2 {
                    font-size: 16px;
                }

                .news-refresh-btn {
                    padding: 7px 12px;
                    font-size: 11px;
                }
            }

            /* ── LOGIN TWO-PATH DESIGN ── */
            .login-card {
                width: 400px;
                padding: 36px 36px 32px;
                transition: width .35s cubic-bezier(.22,.61,.36,1);
            }

            /* Two-panel login layout */
            .login-card.expanded {
                width: 760px;
            }

            .login-card {
                display: flex;
                gap: 0;
                align-items: stretch;
            }

            .login-left {
                flex: 0 0 auto;
                width: calc(400px - 72px);
            }

            .login-card.expanded .login-left {
                width: 328px;
            }

            .login-right {
                flex: 1 1 auto;
                min-width: 0;
                width: 0;
                overflow: hidden;
                border-left: 1px solid rgba(255,255,255,0.08);
                margin-left: 0;
                padding-left: 0;
                display: flex;
                flex-direction: column;
                justify-content: center;
                position: relative;
                opacity: 0;
                transition: opacity .3s ease .1s;
            }

            .login-card.expanded .login-right {
                width: auto;
                margin-left: 28px;
                padding-left: 28px;
                opacity: 1;
            }

            .login-right-close {
                position: absolute;
                top: -8px;
                right: -8px;
                width: 28px;
                height: 28px;
                border-radius: 50%;
                background: rgba(255,255,255,0.1);
                border: 1px solid rgba(255,255,255,0.2);
                color: #fff;
                font-size: 13px;
                cursor: pointer;
                display: none;
            }

            .login-card.expanded .login-right-close {
                display: block;
            }

            .login-right-close:hover {
                background: rgba(239,68,68,0.3);
            }

            .login-form-head {
                display: flex;
                align-items: center;
                gap: 12px;
                margin-bottom: 20px;
            }

            .login-backfeed {
                background: none;
                border: none;
                color: rgba(255,255,255,0.5);
                font-size: 12px;
                cursor: pointer;
                font-family: var(--font);
                margin-bottom: 10px;
                padding: 0;
                display: block;
            }

            .login-backfeed:hover {
                color: #fff;
            }

            .login-form-icon {
                font-size: 28px;
            }

            .login-form-title {
                font-size: 17px;
                font-weight: 700;
                color: #fff;
            }

            .login-form-desc {
                font-size: 11px;
                color: rgba(255,255,255,0.5);
                margin-top: 2px;
            }

            /* Phone: stack the form below the options */
            @media(max-width: 640px) {
                .login-card, .login-card.expanded {
                    width:100%;
                    max-width: 400px;
                    flex-direction: column;
                }

                .login-left, .login-card.expanded .login-left {
                    width: 100%;
                }

                .login-right {
                    border-left: none;
                    border-top: 1px solid rgba(255,255,255,0.08);
                }

                .login-card.expanded .login-right {
                    margin-left: 0;
                    padding-left: 0;
                    margin-top: 20px;
                    padding-top: 20px;
                    width: 100%;
                }

                .login-right-close {
                    top: 10px;
                    right: 0;
                }
            }

            /* ══ PUBLIC FEED (Instagram scrolling-feed style) ══ */
            #public-feed {
                position: fixed;
                inset: 0;
                z-index: 400;
                background: #0a0a0a;
                display: flex;
                flex-direction: column;
                overflow: hidden;
            }

            .pf-top {
                position: sticky;
                top: 0;
                z-index: 10;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: calc(env(safe-area-inset-top,0px) + 12px) 16px 12px;
                background: #0a0a0a;
                border-bottom: 1px solid rgba(255,255,255,0.08);
                flex-shrink: 0;
            }

            .pf-brand {
                color: #fff;
                font-family: var(--font-display,serif);
                font-weight: 700;
                font-size: 19px;
                display: flex;
                align-items: center;
                gap: 7px;
            }

            .pf-anchor {
                font-size: 21px;
            }

            /* ── Public feed: LIGHT mode support (default = light; .dark keeps dark) ── */
            body:not(.dark) #public-feed {
                background: #f4f6f9;
            }

            body:not(.dark) .pf-top {
                background: #fff;
                border-bottom: 1px solid #e2e8f0;
            }

            body:not(.dark) .pf-brand {
                color: #0f2444;
            }

            body:not(.dark) .pf-post {
                background: #fff;
                border-bottom: 1px solid #e6eaf0;
            }

            body:not(.dark) .pf-post-head-name {
                color: #0f2444;
            }

            body:not(.dark) .pf-post-head-sub {
                color: #64748b;
            }

            body:not(.dark) .pf-likes {
                color: #0f2444;
            }

            body:not(.dark) .pf-caption {
                color: #1e293b;
            }

            body:not(.dark) .pf-caption-name {
                color: #0f2444;
            }

            body:not(.dark) .pf-time {
                color: #94a3b8;
            }

            body:not(.dark) .pf-icon-btn {
                color: #0f2444;
            }

            body:not(.dark) .pf-empty {
                color: #0f2444;
            }

            body:not(.dark) .pf-share-sheet-inner {
                background: #fff;
                color: #0f2444;
            }

            /* feed light end */
            .pf-login-btn {
                background: var(--c-accent,#2f6cf6);
                color: #fff;
                border: none;
                border-radius: 22px;
                padding: 8px 20px;
                font-size: 13px;
                font-weight: 700;
                cursor: pointer;
                font-family: var(--font);
            }

            .pf-top-right {
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .pf-wa-btn {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 38px;
                height: 38px;
                border-radius: 50%;
                background: #25D366;
                color: #fff;
                border: none;
                cursor: pointer;
                flex-shrink: 0;
                box-shadow: 0 2px 8px rgba(37,211,102,0.4);
            }

            .pf-wa-btn:active {
                transform: scale(.92);
            }

            .pf-login-btn:hover {
                filter: brightness(1.1);
            }

            .pf-scroll {
                flex: 1;
                overflow-y: auto;
                scrollbar-width: none;
                -webkit-overflow-scrolling: touch;
            }

            .pf-scroll::-webkit-scrollbar {
                display: none;
            }

            /* Post card */
            .pf-post {
                background: #0a0a0a;
                border-bottom: 1px solid rgba(255,255,255,0.09);
                max-width: 600px;
                margin: 0 auto;
                padding-bottom: 6px;
            }

            .pf-post-head {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 11px 14px;
            }

            .pf-post-logo {
                width: 38px;
                height: 38px;
                border-radius: 50%;
                background: linear-gradient(135deg,#2f6cf6,#16305c);
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 18px;
                flex-shrink: 0;
                border: 2px solid rgba(255,255,255,0.15);
            }

            .pf-post-head-info {
                flex: 1;
                min-width: 0;
            }

            .pf-post-head-name {
                font-size: 13.5px;
                font-weight: 700;
                color: #fff;
            }

            .pf-post-head-sub {
                font-size: 11.5px;
                color: rgba(255,255,255,0.5);
                margin-top: 1px;
            }

            .pf-img-wrap {
                position: relative;
                width: 100%;
                background: #000;
                cursor: pointer;
                overflow: hidden;
                user-select: none;
            }

            .pf-post-img {
                width: 100%;
                display: block;
                max-height: 70vh;
                object-fit: contain;
                background: #000;
            }

            .pf-dbl-heart {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%) scale(0);
                pointer-events: none;
                filter: drop-shadow(0 4px 16px rgba(0,0,0,0.45));
                z-index: 5;
                line-height: 0;
            }

            .pf-dbl-heart svg {
                display: block;
            }

            .pf-dbl-heart.pop {
                animation: pfHeartPop .9s ease;
            }

            @keyframes pfHeartPop {
                0% {
                    transform: translate(-50%,-50%) scale(0);
                    opacity: 0;
                }

                15% {
                    transform: translate(-50%,-50%) scale(1.25);
                    opacity: 1;
                }

                30% {
                    transform: translate(-50%,-50%) scale(0.95);
                    opacity: 1;
                }

                70% {
                    transform: translate(-50%,-50%) scale(1);
                    opacity: 1;
                }

                100% {
                    transform: translate(-50%,-50%) scale(1.1);
                    opacity: 0;
                }
            }

            .pf-actions-row {
                display: flex;
                align-items: center;
                gap: 14px;
                padding: 10px 14px 4px;
            }

            .pf-icon-btn {
                background: none;
                border: none;
                color: #fff;
                cursor: pointer;
                padding: 0;
                display: flex;
                align-items: center;
                line-height: 1;
                transition: transform .12s;
            }

            .pf-icon-btn svg {
                display: block;
            }

            .pf-icon-btn:active {
                transform: scale(.82);
            }

            .pf-like-btn.liked {
                animation: pfLikeBtn .3s ease;
            }

            @keyframes pfLikeBtn {
                0% {
                    transform: scale(1);
                }

                45% {
                    transform: scale(1.28);
                }

                100% {
                    transform: scale(1);
                }
            }

            .pf-actions-spacer {
                flex: 1;
            }

            .pf-apply-btn {
                background: var(--c-accent,#2f6cf6);
                color: #fff;
                border: none;
                border-radius: 8px;
                padding: 8px 16px;
                font-size: 13px;
                font-weight: 700;
                cursor: pointer;
                font-family: var(--font);
            }

            .pf-apply-btn:hover {
                filter: brightness(1.1);
            }

            .pf-likes {
                padding: 2px 14px;
                font-size: 13.5px;
                font-weight: 700;
                color: #fff;
            }

            .pf-caption {
                padding: 4px 14px 6px;
                font-size: 13.5px;
                color: #fff;
                line-height: 1.45;
                white-space: pre-wrap;
                word-break: break-word;
            }

            .pf-caption-name {
                font-weight: 700;
                margin-right: 6px;
            }

            .pf-time {
                padding: 3px 14px 10px;
                font-size: 10.5px;
                color: rgba(255,255,255,0.4);
                text-transform: uppercase;
                letter-spacing: .3px;
            }

            .pf-empty {
                position: absolute;
                inset: 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                color: #fff;
                text-align: center;
                padding: 20px;
            }

            /* Ask AI */
            .ai-fab {
                position: fixed;
                bottom: calc(20px + env(safe-area-inset-bottom,0px));
                right: 18px;
                z-index: 410;
                display: flex;
                align-items: center;
                gap: 8px;
                background: linear-gradient(135deg,#2f6cf6,#7c3aed);
                color: #fff;
                border: none;
                border-radius: 30px;
                padding: 13px 20px;
                font-size: 14px;
                font-weight: 700;
                font-family: var(--font);
                cursor: pointer;
                box-shadow: 0 6px 20px rgba(47,109,246,0.45);
            }

            .ai-fab:active {
                transform: scale(.96);
            }

            .ai-fab-icon {
                font-size: 19px;
            }

            #ai-chat {
                position: fixed;
                inset: 0;
                z-index: 620;
                background: var(--c-bg,#0a0a0a);
                display: flex;
                flex-direction: column;
            }

            @media(min-width: 560px) {
                #ai-chat {
                    inset:auto;
                    right: 20px;
                    bottom: 20px;
                    width: 400px;
                    height: 600px;
                    max-height: 85vh;
                    border-radius: 18px;
                    overflow: hidden;
                    box-shadow: 0 12px 50px rgba(0,0,0,0.4);
                    border: 1px solid var(--c-border);
                }
            }

            .ai-head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: calc(env(safe-area-inset-top,0px) + 14px) 16px 14px;
                background: linear-gradient(135deg,#2f6cf6,#7c3aed);
                color: #fff;
                flex-shrink: 0;
            }

            .ai-head-title {
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .ai-close {
                background: rgba(255,255,255,0.2);
                border: none;
                color: #fff;
                width: 30px;
                height: 30px;
                border-radius: 50%;
                font-size: 15px;
                cursor: pointer;
            }

            .ai-body {
                flex: 1;
                overflow-y: auto;
                padding: 16px;
                display: flex;
                flex-direction: column;
                gap: 12px;
                background: var(--c-bg,#0a0a0a);
            }

            .ai-msg {
                max-width: 82%;
                padding: 11px 14px;
                border-radius: 14px;
                font-size: 13.5px;
                line-height: 1.5;
                word-break: break-word;
            }

            .ai-msg-user {
                align-self: flex-end;
                background: var(--c-accent,#2f6cf6);
                color: #fff;
                border-bottom-right-radius: 4px;
            }

            .ai-msg-bot {
                align-self: flex-start;
                background: var(--c-surface2,#1a1a1a);
                color: var(--c-text,#eee);
                border: 1px solid var(--c-border);
                border-bottom-left-radius: 4px;
            }

            .ai-msg-bot a {
                color: var(--c-accent,#5b8cff);
                text-decoration: underline;
            }

            .ai-suggest {
                display: flex;
                gap: 8px;
                flex-wrap: wrap;
                padding: 0 16px 8px;
                flex-shrink: 0;
            }

            .ai-chip {
                background: var(--c-surface2,#1a1a1a);
                border: 1px solid var(--c-border);
                color: var(--c-text,#ccc);
                border-radius: 16px;
                padding: 7px 13px;
                font-size: 12px;
                cursor: pointer;
                font-family: var(--font);
                white-space: nowrap;
            }

            .ai-chip:hover {
                border-color: var(--c-accent);
                color: var(--c-accent);
            }

            .ai-input-row {
                display: flex;
                gap: 8px;
                padding: 12px 14px calc(12px + env(safe-area-inset-bottom,0px));
                border-top: 1px solid var(--c-border);
                background: var(--c-surface,#111);
                flex-shrink: 0;
            }

            .ai-input-row input {
                flex: 1;
                padding: 11px 14px;
                border-radius: 22px;
                border: 1.5px solid var(--c-border);
                background: var(--c-surface2,#1a1a1a);
                color: var(--c-text,#eee);
                font-size: 14px;
                font-family: var(--font);
            }

            .ai-input-row input:focus {
                outline: none;
                border-color: var(--c-accent);
            }

            .ai-send {
                width: 44px;
                height: 44px;
                border-radius: 50%;
                background: var(--c-accent,#2f6cf6);
                color: #fff;
                border: none;
                font-size: 17px;
                cursor: pointer;
                flex-shrink: 0;
            }

            /* Share sheet */
            .pf-share-sheet {
                position: fixed;
                inset: 0;
                z-index: 600;
                background: rgba(0,0,0,0.5);
                display: flex;
                align-items: flex-end;
                justify-content: center;
            }

            .pf-share-inner {
                background: var(--c-surface,#fff);
                width: 100%;
                max-width: 440px;
                border-radius: 18px 18px 0 0;
                padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
                animation: pfSlideUp .25s ease;
            }

            @keyframes pfSlideUp {
                from {
                    transform: translateY(100%);
                }

                to {
                    transform: translateY(0);
                }
            }

            .pf-share-title {
                font-size: 15px;
                font-weight: 700;
                color: var(--c-text);
                margin-bottom: 12px;
                text-align: center;
            }

            .pf-share-link {
                font-size: 12px;
                color: var(--c-muted);
                background: var(--c-surface2);
                border: 1px solid var(--c-border);
                border-radius: 8px;
                padding: 10px;
                margin-bottom: 14px;
                word-break: break-all;
            }

            .pf-share-btns {
                display: flex;
                gap: 10px;
                margin-bottom: 10px;
            }

            .pf-share-opt {
                flex: 1;
                border: none;
                border-radius: 10px;
                padding: 13px;
                font-size: 14px;
                font-weight: 700;
                cursor: pointer;
                font-family: var(--font);
            }

            .pf-share-wa {
                background: #25D366;
                color: #fff;
            }

            .pf-share-copy {
                background: var(--c-surface2);
                color: var(--c-text);
                border: 1.5px solid var(--c-border);
            }

            .pf-share-cancel {
                width: 100%;
                background: none;
                border: none;
                color: var(--c-muted);
                font-size: 13px;
                padding: 10px;
                cursor: pointer;
                font-family: var(--font);
            }

            /* ── Cadet Portal ── */
            #cadet-portal {
                position: fixed;
                inset: 0;
                z-index: 500;
                background: var(--c-bg);
                display: flex;
                flex-direction: column;
                overflow: hidden;
            }

            .cp-top {
                display: flex;
                align-items: center;
                justify-content: space-between;
                min-height: 56px;
                flex-shrink: 0;
                padding: calc(env(safe-area-inset-top,0px) + 6px) calc(env(safe-area-inset-right,0px) + 14px) 6px calc(env(safe-area-inset-left,0px) + 14px);
                background: var(--c-navy);
                color: #fff;
                box-shadow: 0 2px 12px rgba(10,25,65,0.25);
                gap: 10px;
            }

            .cp-top-title {
                font-family: var(--font-display);
                font-weight: 700;
                font-size: 15px;
                display: flex;
                align-items: center;
                gap: 8px;
                min-width: 0;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            .cp-top-right {
                display: flex;
                align-items: center;
                flex-shrink: 0;
            }

            .cp-signout {
                background: rgba(255,255,255,0.14);
                border: 1px solid rgba(255,255,255,0.28);
                color: #fff;
                border-radius: 8px;
                padding: 8px 14px;
                font-size: 12px;
                font-weight: 700;
                cursor: pointer;
                font-family: var(--font);
                white-space: nowrap;
                flex-shrink: 0;
            }

            .cp-signout:hover {
                background: rgba(239,68,68,0.3);
                border-color: rgba(239,68,68,0.5);
            }

            /* Cadet profile drop-down menu (like PC drop-up) */
            .cp-profile-wrap {
                position: relative;
            }

            .cp-profile-btn {
                display: flex;
                align-items: center;
                gap: 5px;
                background: rgba(255,255,255,0.14);
                border: 1px solid rgba(255,255,255,0.28);
                border-radius: 22px;
                padding: 5px 10px 5px 6px;
                cursor: pointer;
            }

            .cp-profile-avatar {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                background: var(--c-accent,#2f6cf6);
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 12px;
                font-weight: 800;
            }

            .cp-profile-caret {
                color: #fff;
                font-size: 12px;
                transition: transform .2s;
            }

            .cp-profile-caret.up {
                transform: rotate(180deg);
            }

            .cp-profile-menu {
                position: absolute;
                top: calc(100% + 8px);
                right: 0;
                min-width: 210px;
                background: var(--c-surface,#fff);
                border: 1px solid var(--c-border);
                border-radius: 12px;
                box-shadow: 0 8px 30px rgba(0,0,0,0.28);
                padding: 6px;
                display: none;
                z-index: 520;
            }

            .cp-profile-menu.open {
                display: block;
                animation: fadeUp .18s ease;
            }

            .cp-menu-head {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 10px 10px 12px;
                border-bottom: 1px solid var(--c-border);
                margin-bottom: 6px;
            }

            .cp-menu-avatar {
                width: 38px;
                height: 38px;
                border-radius: 50%;
                background: var(--c-accent,#2f6cf6);
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 15px;
                font-weight: 800;
                flex-shrink: 0;
            }

            .cp-menu-name {
                font-size: 14px;
                font-weight: 700;
                color: var(--c-text);
                word-break: break-word;
            }

            .cp-menu-role {
                font-size: 11px;
                color: var(--c-muted);
                margin-top: 2px;
            }

            .cp-menu-item {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 11px 12px;
                font-size: 13.5px;
                font-weight: 600;
                color: var(--c-text);
                border-radius: 8px;
                cursor: pointer;
            }

            .cp-menu-item:hover {
                background: var(--c-surface2);
            }

            .cp-menu-divider {
                height: 1px;
                background: var(--c-border);
                margin: 6px 4px;
            }

            .cp-menu-signout {
                color: #dc2626;
            }

            .cp-menu-signout:hover {
                background: rgba(239,68,68,0.1);
            }

            .cp-menu-signout svg {
                color: #dc2626;
            }

            @media(max-width: 420px) {
                .cp-top-title {
                    font-size:14px;
                }

                .cp-top-title .topbar-anchor {
                    font-size: 16px;
                }

                .cp-title-full::after {
                    content: 'My Profile';
                }

                .cp-title-full {
                    font-size: 0;
                }

                .cp-title-full::after {
                    font-size: 14px;
                }
            }

            .cp-body {
                flex: 1;
                overflow-y: auto;
                padding: 22px 18px 60px;
                max-width: 760px;
                width: 100%;
                margin: 0 auto;
            }

            .cp-hero {
                display: flex;
                align-items: center;
                gap: 16px;
                background: linear-gradient(135deg,var(--c-navy),var(--c-navy2,#16305c));
                color: #fff;
                border-radius: 16px;
                padding: 20px 22px;
                margin-bottom: 18px;
            }

            .cp-hero-avatar {
                width: 64px;
                height: 64px;
                border-radius: 50%;
                background: rgba(255,255,255,0.15);
                background-size: cover;
                background-position: center;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 26px;
                font-weight: 800;
                flex-shrink: 0;
            }

            .cp-hero-name {
                font-family: var(--font-display);
                font-size: 20px;
                font-weight: 700;
            }

            .cp-hero-sub {
                font-size: 12px;
                opacity: .8;
                margin-top: 3px;
            }

            .cp-card {
                background: var(--c-surface);
                border: 1.5px solid var(--c-border);
                border-radius: 14px;
                padding: 4px 0;
                margin-bottom: 16px;
                overflow: hidden;
            }

            .cp-card-head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 14px 18px;
                border-bottom: 1px solid var(--c-border);
            }

            .cp-card-title {
                font-size: 14px;
                font-weight: 700;
                color: var(--c-text);
            }

            .cp-field-row {
                display: flex;
                justify-content: space-between;
                gap: 14px;
                padding: 11px 18px;
                border-bottom: 1px solid var(--c-border);
                font-size: 13px;
            }

            .cp-field-row:last-child {
                border-bottom: none;
            }

            .cp-field-label {
                color: var(--c-muted);
                font-weight: 600;
                flex-shrink: 0;
                max-width: 45%;
            }

            .cp-field-val {
                color: var(--c-text);
                text-align: right;
                word-break: break-word;
            }

            .cp-field-val.empty {
                color: var(--c-border2,#bbb);
                font-style: italic;
            }

            .cp-edit-btn {
                background: var(--c-accent);
                color: #fff;
                border: none;
                border-radius: 9px;
                padding: 9px 18px;
                font-size: 13px;
                font-weight: 700;
                cursor: pointer;
                font-family: var(--font);
            }

            .cp-edit-btn:hover {
                filter: brightness(1.08);
            }

            .cp-edit-input {
                width: 100%;
                padding: 8px 10px;
                border-radius: 8px;
                border: 1.5px solid var(--c-border);
                background: var(--c-surface);
                color: var(--c-text);
                font-size: 13px;
                font-family: var(--font);
            }

            .cp-edit-input:focus {
                outline: 1.5px solid var(--c-accent);
                outline-offset: -1px;
            }

            .cp-edit-field {
                padding: 10px 18px;
                border-bottom: 1px solid var(--c-border);
            }

            .cp-edit-field label {
                display: block;
                font-size: 12px;
                font-weight: 700;
                color: var(--c-muted);
                margin-bottom: 5px;
            }

            .cp-note {
                font-size: 12px;
                color: var(--c-muted);
                background: var(--c-surface2);
                border: 1px solid var(--c-border);
                border-radius: 10px;
                padding: 12px 14px;
                margin-bottom: 16px;
                line-height: 1.5;
            }

            .cp-actions {
                display: flex;
                gap: 10px;
                justify-content: flex-end;
                margin-top: 16px;
            }

            .cp-pending-badge {
                background: rgba(251,146,60,0.15);
                border: 1px solid rgba(251,146,60,0.4);
                color: #e67e22;
                border-radius: 8px;
                padding: 8px 12px;
                font-size: 12px;
                font-weight: 600;
                margin-bottom: 14px;
            }

            .login-path-card {
                display: flex;
                align-items: center;
                gap: 14px;
                border-radius: 14px;
                padding: 16px 16px;
                border: 1.5px solid rgba(255,255,255,0.1);
                background: rgba(255,255,255,0.04);
                transition: all .2s;
                cursor: default;
            }

            /* Admin cadet-request approval cards */
            .creq-card {
                background: var(--c-surface);
                border: 1.5px solid var(--c-border);
                border-radius: 12px;
                padding: 12px 14px;
                margin-bottom: 12px;
            }

            .creq-head {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 10px;
                padding-bottom: 8px;
                border-bottom: 1px solid var(--c-border);
            }

            .creq-name {
                font-weight: 700;
                font-size: 14px;
                color: var(--c-text);
            }

            .creq-reg {
                font-size: 11px;
                color: var(--c-muted);
                margin-left: 6px;
            }

            .creq-time {
                font-size: 10px;
                color: var(--c-muted);
            }

            .creq-change {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 8px 4px;
                border-bottom: 1px dashed var(--c-border);
                flex-wrap: wrap;
            }

            .creq-change:last-of-type {
                border-bottom: none;
            }

            .creq-change.approved {
                opacity: .55;
            }

            .creq-change.rejected {
                opacity: .5;
                text-decoration: line-through;
            }

            .creq-field {
                font-size: 12px;
                font-weight: 700;
                color: var(--c-text2);
                min-width: 110px;
                flex-shrink: 0;
            }

            .creq-vals {
                flex: 1;
                font-size: 12.5px;
                display: flex;
                align-items: center;
                gap: 8px;
                flex-wrap: wrap;
                min-width: 0;
            }

            .creq-old {
                color: var(--c-muted);
                text-decoration: line-through;
            }

            .creq-arrow {
                color: var(--c-accent);
                font-weight: 700;
            }

            .creq-new {
                color: var(--c-green,#16a34a);
                font-weight: 600;
            }

            .creq-actions {
                display: flex;
                gap: 6px;
                flex-shrink: 0;
            }

            .creq-btn {
                width: 28px;
                height: 28px;
                border: none;
                border-radius: 7px;
                font-size: 14px;
                font-weight: 700;
                cursor: pointer;
            }

            .creq-ok {
                background: var(--c-green,#16a34a);
                color: #fff;
            }

            .creq-no {
                background: var(--c-red,#dc2626);
                color: #fff;
            }

            .creq-status-approved {
                color: var(--c-green,#16a34a);
                font-size: 11px;
                font-weight: 700;
            }

            .creq-status-rejected {
                color: var(--c-red,#dc2626);
                font-size: 11px;
                font-weight: 700;
            }

            .creq-foot {
                display: flex;
                gap: 8px;
                justify-content: flex-end;
                margin-top: 10px;
                padding-top: 8px;
                border-top: 1px solid var(--c-border);
            }

            .login-path-card:hover {
                background: rgba(255,255,255,0.08);
                border-color: rgba(255,255,255,0.18);
            }

            .login-path-applicant {
                margin-bottom: 0;
            }

            .login-path-icon {
                font-size: 28px;
                flex-shrink: 0;
            }

            .login-path-info {
                flex: 1;
                min-width: 0;
            }

            .login-path-title {
                font-size: 13px;
                font-weight: 700;
                color: #fff;
                margin-bottom: 3px;
            }

            .login-path-desc {
                font-size: 10px;
                color: rgba(255,255,255,0.45);
                line-height: 1.4;
            }

            .login-path-btn {
                flex-shrink: 0;
                border: none;
                border-radius: 10px;
                padding: 9px 16px;
                font-family: var(--font);
                font-size: 12px;
                font-weight: 700;
                cursor: pointer;
                transition: all .2s;
                white-space: nowrap;
                letter-spacing: .2px;
            }

            .login-path-btn-green {
                background: linear-gradient(135deg,#4f8df5,#3b7de0);
                color: #fff;
                box-shadow: 0 3px 10px rgba(59,125,224,0.35);
            }

            .login-path-btn-green:hover {
                transform: translateY(-1px);
                box-shadow: 0 5px 16px rgba(59,125,224,0.45);
            }

            .login-path-btn-blue {
                background: linear-gradient(135deg,#2f6cf6,#1e50c8);
                color: #fff;
                box-shadow: 0 3px 10px rgba(47,108,246,0.35);
            }

            .login-path-btn-blue:hover {
                transform: translateY(-1px);
                box-shadow: 0 5px 16px rgba(47,108,246,0.45);
            }

            .login-divider {
                display: flex;
                align-items: center;
                gap: 10px;
                margin: 14px 0;
                color: rgba(255,255,255,0.2);
                font-size: 11px;
            }

            .login-divider::before,.login-divider::after {
                content: '';
                flex: 1;
                height: 1px;
                background: rgba(255,255,255,0.1);
            }

            .login-divider span {
                padding: 0 4px;
            }

            /* Stripped dashboard — simple brand header */
            .home-simple-head {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                padding: 26px 0 22px;
            }

            .hsh-anchor {
                font-size: 30px;
            }

            .hsh-name {
                font-family: var(--font-display,serif);
                font-size: 32px;
                font-weight: 700;
                color: var(--c-text);
                letter-spacing: .5px;
            }

            @media(max-width: 640px) {
                .home-simple-head {
                    padding:18px 0 14px;
                }

                .hsh-name {
                    font-size: 26px;
                }

                .hsh-anchor {
                    font-size: 24px;
                }
            }

            /* Stripped dashboard end */
            .home-simple-head + .home-search-v2 {
                margin-top: 0;
            }

            /* ── New dashboard widgets ── */
            .hs-num-amber {
                color: #f59e0b;
            }

            .hs-c4 .hs-bar4 {
                background: linear-gradient(90deg,#f59e0b,#fbbf24);
            }

            .dash-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 16px;
                margin: 18px 0;
            }

            .dash-card {
                background: var(--c-surface);
                border: 1px solid var(--c-border);
                border-radius: 16px;
                padding: 18px;
                box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            }

            .dash-card-head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 14px;
                font-weight: 700;
                color: var(--c-text);
                margin-bottom: 14px;
            }

            .dash-view-all {
                background: none;
                border: none;
                color: var(--c-accent,#2f6cf6);
                font-size: 12px;
                font-weight: 600;
                cursor: pointer;
                font-family: var(--font);
            }

            .dash-chart {
                display: flex;
                flex-direction: column;
                gap: 10px;
            }

            .dash-bar-row {
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .dash-bar-label {
                font-size: 12px;
                color: var(--c-muted);
                width: 90px;
                flex-shrink: 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .dash-bar-track {
                flex: 1;
                height: 20px;
                background: var(--c-surface2,#f1f5f9);
                border-radius: 10px;
                overflow: hidden;
            }

            .dash-bar-fill {
                height: 100%;
                border-radius: 10px;
                background: linear-gradient(90deg,#2f6cf6,#60a5fa);
                transition: width .6s ease;
                min-width: 2px;
            }

            .dash-bar-val {
                font-size: 12px;
                font-weight: 700;
                color: var(--c-text);
                width: 34px;
                text-align: right;
                flex-shrink: 0;
            }

            .dash-actions {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 10px;
            }

            .dash-act {
                display: flex;
                align-items: center;
                gap: 8px;
                background: var(--c-surface2,#f1f5f9);
                border: 1px solid var(--c-border);
                border-radius: 11px;
                padding: 13px 12px;
                font-size: 13px;
                font-weight: 600;
                color: var(--c-text);
                cursor: pointer;
                font-family: var(--font);
                transition: all .15s;
            }

            .dash-act:hover {
                border-color: var(--c-accent);
                color: var(--c-accent);
                transform: translateY(-1px);
            }

            .dash-act span {
                font-size: 17px;
            }

            .dash-pending {
                margin-bottom: 18px;
            }

            .dash-pending-item {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 11px 12px;
                border: 1px solid var(--c-border);
                border-radius: 10px;
                margin-bottom: 8px;
                background: var(--c-surface2);
            }

            .dash-pending-item .dpi-name {
                font-size: 13px;
                font-weight: 700;
                color: var(--c-text);
            }

            .dash-pending-item .dpi-meta {
                font-size: 11px;
                color: var(--c-muted);
                margin-top: 2px;
            }

            .dash-pending-item .dpi-count {
                margin-left: auto;
                background: rgba(245,158,11,0.15);
                color: #d97706;
                border-radius: 8px;
                padding: 3px 9px;
                font-size: 11px;
                font-weight: 700;
            }

            @media(max-width: 640px) {
                .dash-grid {
                    grid-template-columns:1fr;
                    gap: 12px;
                }

                .home-stats-row-v2 {
                    flex-wrap: wrap;
                }
            }

            /* ═══════════════════════════════════════════════════
   SMALL-SCREEN SCALE — shrink the whole UI a bit so
   everything fits neatly on tablets and phones without
   changing any individual layout. Uses zoom (uniform).
═══════════════════════════════════════════════════ */
            @media(max-width: 1024px) {
                body {
                    zoom:0.88;
                    --bz:0.88;
                }
            }

            @media(max-width: 768px) {
                body {
                    zoom:0.85;
                    --bz:0.85;
                }
            }

            @media(max-width: 640px) {
                body {
                    zoom:0.82;
                    --bz:0.82;
                }
            }

            @media(max-width: 420px) {
                body {
                    zoom:0.80;
                    --bz:0.80;
                }
            }

            @keyframes fbBarAnim {
                from {
                    width: 15%
                }

                to {
                    width: 85%
                }
            }

            /* base .modal-ov is z-index:200, which the sidebar (901) covers */
            #xlim-ov {
                z-index: 9600;
            }

            .xlim-modal {
                max-width: 900px;
                width: 95%;
                padding: 0;
            }

            .xlim-hd {
                padding: 22px 26px 0;
            }

            .xlim-t {
                font-size: 18px;
                font-weight: 800;
                color: var(--c-text);
            }

            .xlim-build {
                font-size: 10px;
                font-weight: 700;
                color: var(--c-muted);
                background: var(--c-surface3);
                border: 1px solid var(--c-border);
                border-radius: 20px;
                padding: 2px 8px;
                vertical-align: middle;
                margin-left: 6px;
                letter-spacing: .3px;
            }

            .xlim-d {
                font-size: 12px;
                color: var(--c-muted);
                margin-top: 4px;
                line-height: 1.55;
            }

            .xlim-steps {
                display: flex;
                gap: 6px;
                margin-top: 16px;
            }

            .xlim-stp {
                flex: 1;
                font-size: 10px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: .4px;
                color: var(--c-muted);
                padding: 7px 8px;
                border-radius: 8px;
                background: var(--c-surface2);
                border: 1.5px solid var(--c-border);
                text-align: center;
            }

            .xlim-stp.on {
                color: #fff;
                background: var(--c-navy,#0a2a5e);
                border-color: var(--c-navy,#0a2a5e);
            }

            .xlim-body {
                padding: 18px 26px 4px;
                min-height: 230px;
            }

            .xlim-pane {
                display: none;
            }

            .xlim-pane.on {
                display: block;
            }

            .xlim-drop {
                border: 2px dashed var(--c-border);
                border-radius: 14px;
                padding: 28px 18px;
                text-align: center;
                cursor: pointer;
                transition: .18s;
                background: var(--c-surface2);
            }

            .xlim-drop:hover,.xlim-drop.over {
                border-color: var(--c-accent,#2f6cf6);
                background: var(--c-surface3);
            }

            .xlim-file {
                font-size: 13px;
                font-weight: 700;
                color: var(--c-text);
                word-break: break-all;
            }

            .xlim-row {
                display: flex;
                gap: 14px;
                flex-wrap: wrap;
                align-items: flex-end;
                margin-top: 14px;
            }

            .xlim-f {
                display: flex;
                flex-direction: column;
                gap: 5px;
            }

            .xlim-f label {
                font-size: 10px;
                font-weight: 700;
                color: var(--c-muted);
                text-transform: uppercase;
                letter-spacing: .5px;
            }

            .xlim-f select,.xlim-f input {
                padding: 7px 10px;
                border: 1.5px solid var(--c-border);
                border-radius: 8px;
                background: var(--c-surface);
                color: var(--c-text);
                font-size: 12.5px;
                font-family: inherit;
            }

            .xlim-sumbar {
                display: flex;
                gap: 12px;
                align-items: center;
                flex-wrap: wrap;
                margin-top: 14px;
                padding: 11px 14px;
                border-radius: 11px;
                background: rgba(22,163,74,.09);
                border: 1.5px solid rgba(22,163,74,.32);
            }

            .xlim-sumtxt {
                flex: 1;
                min-width: 200px;
                font-size: 12.5px;
                color: var(--c-text);
                line-height: 1.5;
            }

            .xlim-sumtxt b {
                font-weight: 800;
            }

            .xlim-sumbar.warn {
                background: rgba(180,83,9,.09);
                border-color: rgba(180,83,9,.32);
            }

            .xlim-advbtn {
                background: var(--c-surface);
                border: 1.5px solid var(--c-border);
                color: var(--c-text2);
                font-size: 11px;
                font-weight: 700;
                font-family: inherit;
                padding: 6px 11px;
                border-radius: 8px;
                cursor: pointer;
                flex-shrink: 0;
            }

            .xlim-advbtn:hover {
                border-color: var(--c-accent,#2f6cf6);
                color: var(--c-text);
            }

            .xlim-adv {
                margin-top: 10px;
                padding: 12px 14px;
                border: 1.5px solid var(--c-border);
                border-radius: 11px;
                background: var(--c-surface2);
            }

            .xlim-prev {
                margin-top: 14px;
                border: 1.5px solid var(--c-border);
                border-radius: 10px;
                overflow: auto;
                max-height: 220px;
            }

            .xlim-prev table {
                border-collapse: collapse;
                width: 100%;
                font-size: 11.5px;
            }

            .xlim-prev th {
                position: sticky;
                top: 0;
                background: var(--c-surface3);
                color: var(--c-text);
                font-weight: 700;
                text-align: left;
                padding: 7px 10px;
                white-space: nowrap;
                border-bottom: 1.5px solid var(--c-border);
                vertical-align: top;
            }

            .xlim-th-sub {
                font-size: 9.5px;
                font-weight: 600;
                color: var(--c-muted);
                text-transform: none;
                letter-spacing: 0;
                margin-top: 2px;
            }

            .xlim-th-grp {
                font-size: 9.5px;
                font-weight: 700;
                color: var(--c-accent);
                text-transform: none;
                letter-spacing: .2px;
                margin-bottom: 3px;
                padding-bottom: 2px;
                border-bottom: 1px solid var(--c-border);
            }

            .xlim-prev td.xlim-rn,.xlim-prev th.xlim-rn {
                color: var(--c-muted);
                font-size: 10.5px;
                text-align: right;
                width: 1%;
                background: var(--c-surface2);
            }

            .xlim-prev td {
                padding: 6px 10px;
                border-bottom: 1px solid var(--c-border);
                color: var(--c-text2);
                white-space: nowrap;
                max-width: 220px;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            /* ── editable Excel-style grid (import preview) ── */
            .xlg-bar {
                display: flex;
                align-items: center;
                gap: 10px;
                flex-wrap: wrap;
                margin-top: 14px;
                padding: 8px 10px;
                background: var(--c-surface2);
                border: 1.5px solid var(--c-border);
                border-radius: 9px;
                font-size: 11px;
            }

            .xlg-bar label {
                font-weight: 700;
                color: var(--c-muted);
                text-transform: uppercase;
                letter-spacing: .3px;
                font-size: 10px;
            }

            .xlg-bar select {
                padding: 4px 7px;
                border: 1.5px solid var(--c-border);
                border-radius: 7px;
                background: var(--c-surface);
                color: var(--c-text);
                font-size: 11px;
                font-family: var(--font);
            }

            .xlg-hint {
                color: var(--c-muted);
                font-size: 10.5px;
                margin-left: auto;
            }

            .xlg-wrap {
                margin-top: 8px;
                border: 1.5px solid var(--c-border);
                border-radius: 10px;
                overflow: auto;
                max-height: 420px;
                background: var(--c-surface);
            }

            table.xlg {
                border-collapse: separate;
                border-spacing: 0;
                font-size: 11.5px;
                width: max-content;
            }

            .xlg th,.xlg td {
                border-right: 1px solid var(--c-grid-line);
                border-bottom: 1px solid var(--c-grid-line);
                padding: 0;
            }

            .xlg .xlg-rn {
                background: var(--c-surface2);
                color: var(--c-muted);
                font-size: 10px;
                text-align: center;
                padding: 4px 7px;
                position: sticky;
                left: 0;
                z-index: 3;
                min-width: 34px;
            }

            .xlg thead th {
                position: sticky;
                background: var(--c-surface3);
                z-index: 2;
            }

            .xlg tr.xlg-bandrow th {
                top: 0;
                background: var(--c-navy2);
                color: #fff;
                text-align: center;
                font-weight: 800;
                font-size: 10px;
                text-transform: uppercase;
                letter-spacing: .4px;
                padding: 5px 8px;
                cursor: pointer;
                border-bottom: 1px solid var(--c-grp-divider);
                border-left: 1px solid var(--c-grp-divider);
                border-right: 1px solid var(--c-grp-divider);
            }

            .xlg tr.xlg-bandrow th.xlg-nogrp {
                background: var(--c-surface3);
                color: var(--c-muted);
                border: 1px solid var(--c-border);
                font-weight: 600;
                text-transform: none;
                letter-spacing: 0;
            }

            .xlg tr.xlg-bandrow th.xlg-nogrp:hover {
                background: var(--c-surface2);
                color: var(--c-accent);
            }

            .xlg tr.xlg-hdrrow th {
                top: 26px;
                background: var(--c-surface3);
                color: var(--c-text);
                font-weight: 700;
                text-align: left;
                padding: 0;
                position: sticky;
            }

            .xlg-h {
                display: flex;
                align-items: center;
                gap: 4px;
                padding: 5px 8px;
            }

            .xlg-hname {
                flex: 1;
                outline: none;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                cursor: text;
            }

            .xlg-hname:focus {
                background: var(--c-surface);
                box-shadow: inset 0 0 0 1.5px var(--c-accent);
                border-radius: 4px;
            }

            .xlg-fmt {
                border: none;
                background: transparent;
                color: var(--c-muted);
                font-size: 9px;
                cursor: pointer;
                max-width: 74px;
                font-family: var(--font);
            }

            .xlg-fill {
                font-size: 9px;
                color: var(--c-muted);
                padding: 0 8px 4px;
                font-weight: 600;
            }

            .xlg-rs {
                position: absolute;
                top: 0;
                right: 0;
                width: 7px;
                height: 100%;
                cursor: col-resize;
                z-index: 5;
            }

            .xlg-rs:hover {
                background: var(--c-accent);
                opacity: .5;
            }

            .xlg thead th {
                position: sticky;
            }

            .xlg tr.xlg-hdrrow th {
                position: sticky;
            }

            .xlg td.xlg-c {
                padding: 5px 8px;
                color: var(--c-text);
                outline: none;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .xlg td.xlg-c:focus {
                box-shadow: inset 0 0 0 2px var(--c-accent);
                background: var(--c-surface);
                white-space: normal;
            }

            .xlg tbody tr:nth-child(even) td.xlg-c {
                background: var(--c-surface2);
            }

            .xlg.xlg-wrapcells td.xlg-c {
                white-space: normal;
            }

            .xlg.xlg-tall td.xlg-c {
                padding-top: 10px;
                padding-bottom: 10px;
            }

            .xlg.xlg-compact td.xlg-c {
                padding-top: 2px;
                padding-bottom: 2px;
            }

            .xlg.xlg-nogrid th,.xlg.xlg-nogrid td {
                border-right: none;
                border-bottom: none;
            }

            /* ── Excel text orientation for column headings ── */
            .rotc {
                display: inline-block;
            }

            .rot-45 .rotc {
                transform: rotate(-45deg);
                white-space: nowrap;
            }

            .rot-90 .rotc {
                writing-mode: vertical-rl;
                transform: rotate(180deg);
                white-space: nowrap;
            }

            .rot-135 .rotc {
                transform: rotate(45deg);
                white-space: nowrap;
            }

            .rot-180 .rotc {
                writing-mode: vertical-rl;
                white-space: nowrap;
            }

            .rot-255 .rotc {
                writing-mode: vertical-rl;
                text-orientation: upright;
                letter-spacing: 1px;
                line-height: 1;
            }

            th.rot-90,th.rot-180,th.rot-255 {
                height: 150px;
                vertical-align: bottom;
            }

            th.rot-45,th.rot-135 {
                height: 110px;
                vertical-align: bottom;
            }

            th.rot-90 .xlg-h,th.rot-180 .xlg-h,th.rot-255 .xlg-h,th.rot-45 .xlg-h,th.rot-135 .xlg-h {
                align-items: flex-end;
            }

            .xlg-rot {
                border: none;
                background: transparent;
                color: var(--c-muted);
                font-size: 9px;
                cursor: pointer;
                max-width: 70px;
                font-family: var(--font);
            }

            /* grouped record table: fixed layout, yellow separators, drag-resize */
            .tbl-wrap table.grp-tbl {
                table-layout: fixed;
                width: max-content;
            }

            .tbl-wrap table.grp-tbl thead th {
                border-right: 1px solid var(--c-grp-divider);
            }

            .tbl-wrap table.grp-tbl tbody td {
                border-right: 1px solid var(--c-grp-divider);
            }

            .tbl-wrap table.grp-tbl tbody tr {
                border-bottom: 1px solid var(--c-grid-line);
            }

            .tbl-wrap table.grp-tbl thead th:last-child,.tbl-wrap table.grp-tbl tbody td:last-child {
                border-right: none;
            }

            .grp-rs {
                position: absolute;
                top: 0;
                right: -1px;
                width: 8px;
                height: 100%;
                cursor: col-resize;
                z-index: 6;
            }

            .grp-rs:hover {
                background: rgba(244,182,58,.75);
            }

            .xlim-note {
                font-size: 11.5px;
                color: var(--c-muted);
                margin-top: 10px;
                line-height: 1.5;
            }

            .xlim-opt {
                display: flex;
                gap: 12px;
                align-items: flex-start;
                padding: 14px;
                border: 1.5px solid var(--c-border);
                border-radius: 12px;
                background: var(--c-surface2);
                cursor: pointer;
                margin-bottom: 10px;
                transition: .15s;
            }

            .xlim-opt:hover {
                border-color: var(--c-accent,#2f6cf6);
            }

            .xlim-opt.on {
                border-color: var(--c-accent,#2f6cf6);
                background: var(--c-surface3);
                box-shadow: 0 0 0 3px rgba(47,109,246,.12);
            }

            .xlim-opt input {
                margin-top: 3px;
                flex-shrink: 0;
            }

            .xlim-opt-t {
                font-size: 13px;
                font-weight: 700;
                color: var(--c-text);
            }

            .xlim-opt-d {
                font-size: 11.5px;
                color: var(--c-muted);
                margin-top: 3px;
                line-height: 1.5;
            }

            .xlim-sub-cfg {
                padding: 2px 0 6px 30px;
            }

            .xlim-map {
                border: 1.5px solid var(--c-border);
                border-radius: 10px;
                max-height: 250px;
                overflow-y: auto;
            }

            .xlim-map-r {
                display: grid;
                grid-template-columns: 1fr 20px 1fr;
                gap: 10px;
                align-items: center;
                padding: 8px 12px;
                border-bottom: 1px solid var(--c-border);
            }

            .xlim-map-r:last-child {
                border-bottom: none;
            }

            .xlim-map-h {
                font-size: 12px;
                font-weight: 700;
                color: var(--c-text);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .xlim-map-s {
                font-size: 10.5px;
                color: var(--c-muted);
                font-weight: 400;
                margin-top: 2px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .xlim-map-a {
                color: var(--c-muted);
                font-size: 13px;
                text-align: center;
            }

            .xlim-nm {
                width: 100%;
                padding: 5px 8px;
                border: 1.5px solid transparent;
                border-radius: 7px;
                background: transparent;
                color: var(--c-text);
                font-size: 12px;
                font-weight: 700;
                font-family: inherit;
            }

            .xlim-nm:hover {
                border-color: var(--c-border);
            }

            .xlim-nm:focus {
                border-color: var(--c-accent,#2f6cf6);
                background: var(--c-surface);
                outline: none;
            }

            .xlim-map-r select {
                width: 100%;
                padding: 6px 8px;
                border: 1.5px solid var(--c-border);
                border-radius: 7px;
                background: var(--c-surface);
                color: var(--c-text);
                font-size: 12px;
                font-family: inherit;
            }

            .xlim-cb {
                display: flex;
                gap: 8px;
                align-items: flex-start;
                font-size: 12px;
                color: var(--c-text2);
                margin-top: 10px;
                line-height: 1.5;
                cursor: pointer;
            }

            .xlim-cb input {
                margin-top: 2px;
                flex-shrink: 0;
            }

            .xlim-foot {
                display: flex;
                gap: 8px;
                align-items: center;
                padding: 14px 26px 18px;
                border-top: 1.5px solid var(--c-border);
                margin-top: 14px;
            }

            .xlim-msg {
                font-size: 12px;
                border-radius: 9px;
                padding: 9px 12px;
                margin-top: 12px;
                display: none;
                line-height: 1.5;
            }

            .xlim-msg.err {
                color: var(--c-red,#dc2626);
                background: rgba(220,38,38,.1);
                border: 1px solid rgba(220,38,38,.3);
            }

            .xlim-msg.warn {
                color: var(--c-gold,#b45309);
                background: rgba(180,83,9,.1);
                border: 1px solid rgba(180,83,9,.3);
            }

            .xlim-msg.info {
                color: var(--c-muted);
                background: var(--c-surface2);
                border: 1px solid var(--c-border);
            }

            @media(max-width: 620px) {
                .xlim-map-r {
                    grid-template-columns:1fr;
                    gap: 4px;
                }

                .xlim-map-a {
                    display: none;
                }

                .xlim-steps {
                    display: none;
                }

                .xlim-body {
                    padding: 16px 16px 4px;
                }

                .xlim-hd {
                    padding: 18px 16px 0;
                }

                .xlim-foot {
                    padding: 12px 16px 16px;
                }
            }

            #cinec-site {
                --bg: #0c1a3a;
                --bg-2: #12244d;
                --hero-1: #2f6fd6;
                --hero-2: #1c458f;
                --hero-3: #0a1730;
                --card: #132a56;
                --card-2: #183463;
                --ink: #eef4ff;
                --ink-2: #9db6e6;
                --violet: #4d97ff;
                --violet-br: #7bb8ff;
                --teal: #3fd0cf;
                --coral: #ff9d6b;
                --gold: #ffd27a;
                --line: rgba(77,151,255,.18);
                --shadow: 0 24px 60px -24px rgba(0,0,0,.7);
            }

            #cinec-site * {
                margin: 0;
                padding: 0;
                box-sizing: border-box
            }

            #cinec-site {
                scroll-behavior: smooth
            }

            #cinec-site {
                background: var(--bg);
                color: var(--ink);
                font-family: 'Plus Jakarta Sans',sans-serif;
                line-height: 1.6;
                overflow-x: hidden;
                -webkit-font-smoothing: antialiased
            }

            #cinec-site ::selection {
                background: var(--violet);
                color: #fff
            }

            #cinec-site .mono {
                font-family: 'Space Mono',monospace
            }

            #cinec-site .eyebrow {
                font-family: 'Space Mono',monospace;
                font-size: .72rem;
                letter-spacing: .28em;
                text-transform: uppercase;
                color: var(--violet-br);
                display: inline-block;
                font-weight: 700
            }

            #cinec-site h1,#cinec-site h2,#cinec-site h3,#cinec-site h4 {
                font-weight: 800;
                letter-spacing: -.02em;
                line-height: 1.05
            }

            #cinec-site body::before {
                content: "";
                position: fixed;
                inset: 0;
                z-index: 0;
                pointer-events: none;
                opacity: .5;
                background-image: radial-gradient(rgba(77,151,255,.10) 1px,transparent 1px);
                background-size: 22px 22px;
                mask-image: radial-gradient(ellipse at 70% 0,#000,transparent 70%)
            }

            #cinec-site .instruments {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                z-index: 50;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 16px 30px;
                transition: all .3s
            }

            #cinec-site .instruments.stuck {
                background: rgba(23,16,54,.72);
                backdrop-filter: blur(14px);
                box-shadow: 0 8px 30px -20px #000
            }

            #cinec-site .brand {
                display: flex;
                align-items: center;
                gap: 13px
            }

            #cinec-site .compass {
                width: 42px;
                height: 42px;
                position: relative;
                flex: none;
                border: 1.5px solid var(--violet);
                border-radius: 50%;
                background: rgba(77,151,255,.12)
            }

            #cinec-site .compass::before {
                content: "";
                position: absolute;
                inset: 4px;
                border-radius: 50%;
                border: 1px dashed rgba(77,151,255,.4)
            }

            #cinec-site .needle {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 2px;
                height: 16px;
                background: linear-gradient(180deg,var(--coral) 0 50%,var(--violet-br) 50% 100%);
                transform-origin: bottom center;
                transform: translate(-50%,-100%);
                transition: transform .25s ease-out
            }

            #cinec-site .brand-name {
                font-weight: 800;
                font-size: 1.15rem;
                line-height: 1
            }

            #cinec-site .brand-sub {
                font-family: 'Space Mono';
                font-size: .58rem;
                color: var(--ink-2);
                letter-spacing: .2em
            }

            #cinec-site .nav-links {
                display: flex;
                gap: 6px;
                align-items: center
            }

            #cinec-site .nav-links a {
                color: var(--ink-2);
                text-decoration: none;
                font-size: .9rem;
                font-weight: 600;
                padding: 9px 16px;
                border-radius: 100px;
                transition: all .2s
            }

            #cinec-site .nav-links a:hover {
                color: #fff;
                background: rgba(77,151,255,.14)
            }

            #cinec-site .nav-links a.cta {
                background: #fff;
                color: var(--hero-3)
            }

            #cinec-site .nav-links a.cta:hover {
                background: var(--violet-br);
                color: #fff
            }

            #cinec-site .depth {
                display: flex;
                align-items: center;
                gap: 10px;
                font-family: 'Space Mono';
                font-size: .66rem;
                color: var(--ink-2)
            }

            #cinec-site .depth-track {
                width: 96px;
                height: 4px;
                background: rgba(77,151,255,.2);
                position: relative;
                border-radius: 4px;
                overflow: hidden
            }

            #cinec-site .depth-fill {
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: 0%;
                background: var(--violet-br);
                border-radius: 4px
            }

            @media(max-width: 900px) {
                #cinec-site .nav-links a:not(.cta) {
                    display:none
                }

                #cinec-site .depth {
                    display: none
                }
            }

            #cinec-site .hero {
                position: relative;
                z-index: 1;
                min-height: 100vh;
                display: flex;
                align-items: center;
                padding: 120px 6vw 70px;
                border-radius: 0 0 44px 44px;
                overflow: hidden;
                background: radial-gradient(130% 120% at 78% 12%,var(--hero-1) 0%,var(--hero-2) 42%,var(--hero-3) 100%)
            }

            #cinec-site .hero-inner {
                display: grid;
                grid-template-columns: 1.05fr .95fr;
                gap: 30px;
                align-items: center;
                width: 100%;
                max-width: 1240px;
                margin: 0 auto
            }

            @media(max-width: 880px) {
                #cinec-site .hero-inner {
                    grid-template-columns:1fr
                }

                #cinec-site .hero-stage {
                    order: -1;
                    height: 320px
                }
            }

            #cinec-site .hero h1 {
                font-size: clamp(2.5rem,6vw,5.6rem);
                margin: 16px 0 20px;
                letter-spacing: -.03em
            }

            #cinec-site .hero h1 .lt {
                color: var(--violet-br)
            }

            #cinec-site .hero .lead {
                font-size: clamp(1.02rem,1.8vw,1.24rem);
                color: var(--ink-2);
                max-width: 480px
            }

            #cinec-site .hero .lead strong {
                color: #fff;
                font-weight: 700
            }

            #cinec-site .cw-hero-btns {
                display: flex;
                gap: 14px;
                margin-top: 32px;
                flex-wrap: wrap
            }

            #cinec-site .cw-btn {
                display: inline-flex;
                align-items: center;
                gap: 10px;
                font-weight: 700;
                font-size: .95rem;
                padding: 15px 28px;
                border-radius: 100px;
                text-decoration: none;
                transition: all .25s;
                border: 0;
                cursor: pointer
            }

            #cinec-site .btn-primary {
                background: #fff;
                color: var(--hero-3)
            }

            #cinec-site .btn-primary:hover {
                transform: translateY(-3px);
                box-shadow: 0 16px 34px -14px rgba(0,0,0,.6)
            }

            #cinec-site .btn-ghost {
                background: rgba(255,255,255,.10);
                color: #fff;
                border: 1px solid rgba(255,255,255,.25)
            }

            #cinec-site .btn-ghost:hover {
                background: rgba(255,255,255,.2)
            }

            #cinec-site .coords {
                margin-top: 30px;
                display: flex;
                gap: 24px;
                flex-wrap: wrap;
                font-family: 'Space Mono';
                font-size: .72rem;
                color: var(--ink-2)
            }

            #cinec-site .coords b {
                color: #fff;
                font-weight: 700
            }

            #cinec-site .hero-stage {
                position: relative;
                height: min(66vh,520px);
                display: flex;
                align-items: center;
                justify-content: center
            }

            #cinec-site .disc {
                position: relative;
                width: min(52vh,420px);
                height: min(52vh,420px);
                border-radius: 50%;
                background: radial-gradient(circle at 34% 28%,#4f8fe6,#1f4a99 55%,#0e2350 100%);
                box-shadow: 0 40px 90px -30px rgba(0,0,0,.8),inset 0 2px 20px rgba(255,255,255,.15);
                display: flex;
                align-items: center;
                justify-content: center
            }

            #cinec-site .disc::after {
                content: "";
                position: absolute;
                inset: 0;
                border-radius: 50%;
                background: radial-gradient(circle at 70% 75%,rgba(0,0,0,.35),transparent 55%)
            }

            #cinec-site .rose {
                position: relative;
                width: 82%;
                height: 82%;
                z-index: 2
            }

            #cinec-site .rose-spin {
                transform-origin: center;
                animation: spin 90s linear infinite
            }

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

            #cinec-site .float-emoji {
                position: absolute;
                font-size: 2rem;
                filter: drop-shadow(0 10px 16px rgba(0,0,0,.5));
                animation: bob 6s ease-in-out infinite
            }

            #cinec-site .fe1 {
                top: 2%;
                right: 8%;
                animation-delay: 0s
            }

            #cinec-site .fe2 {
                bottom: 6%;
                left: 4%;
                font-size: 1.6rem;
                animation-delay: 1.4s
            }

            #cinec-site .fe3 {
                top: 40%;
                right: -2%;
                font-size: 1.5rem;
                animation-delay: 2.4s
            }

            #cinec-site .fe4 {
                bottom: 16%;
                right: 14%;
                font-size: 1.4rem;
                animation-delay: .8s
            }

            @keyframes bob {
                0%,100% {
                    transform: translateY(0) rotate(0)
                }

                50% {
                    transform: translateY(-14px) rotate(6deg)
                }
            }

            #cinec-site .scroll-cue {
                position: absolute;
                bottom: 26px;
                left: 50%;
                transform: translateX(-50%);
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 8px;
                font-family: 'Space Mono';
                font-size: .62rem;
                letter-spacing: .22em;
                color: var(--ink-2);
                text-transform: uppercase
            }

            #cinec-site .scroll-cue .bar {
                width: 1px;
                height: 34px;
                background: linear-gradient(var(--violet-br),transparent);
                position: relative;
                overflow: hidden
            }

            #cinec-site .scroll-cue .bar::after {
                content: "";
                position: absolute;
                top: -34px;
                left: 0;
                width: 1px;
                height: 34px;
                background: #fff;
                animation: drop 2s ease-in-out infinite
            }

            @keyframes drop {
                0% {
                    top: -34px
                }

                60%,100% {
                    top: 34px
                }
            }

            #cinec-site .reveal {
                opacity: 0;
                transform: translateY(40px) scale(.98);
                transition: opacity .8s cubic-bezier(.16,.84,.28,1),transform .8s cubic-bezier(.16,.84,.28,1)
            }

            #cinec-site .reveal.in {
                opacity: 1;
                transform: none
            }

            #cinec-site .reveal.from-left {
                transform: translateX(-46px)
            }

            #cinec-site .reveal.from-right {
                transform: translateX(46px)
            }

            #cinec-site .reveal.pop {
                transform: translateY(30px) scale(.94)
            }

            #cinec-site .d1 {
                transition-delay: .09s
            }

            #cinec-site .d2 {
                transition-delay: .18s
            }

            #cinec-site .d3 {
                transition-delay: .27s
            }

            #cinec-site .d4 {
                transition-delay: .36s
            }

            #cinec-site .track .thumb {
                transform: scale(1.12);
                transition: transform 1s cubic-bezier(.16,.84,.28,1)
            }

            #cinec-site .track.in .thumb {
                transform: scale(1)
            }

            #cinec-site .disc {
                will-change: transform
            }

            #cinec-site section.block {
                position: relative;
                z-index: 1;
                padding: 100px 6vw;
                max-width: 1240px;
                margin: 0 auto;
                overflow-x: clip
            }

            #cinec-site .sec-head {
                display: flex;
                align-items: center;
                gap: 16px;
                margin-bottom: 10px
            }

            #cinec-site .sec-num {
                font-family: 'Space Mono';
                font-size: .72rem;
                color: #fff;
                background: rgba(77,151,255,.22);
                padding: 6px 13px;
                border-radius: 100px
            }

            #cinec-site .sec-head h2 {
                font-size: clamp(1.9rem,4vw,3.1rem)
            }

            #cinec-site .sec-intro {
                color: var(--ink-2);
                max-width: 600px;
                margin-bottom: 48px;
                font-size: 1.08rem
            }

            #cinec-site .tracks {
                display: grid;
                grid-template-columns: repeat(auto-fit,minmax(270px,1fr));
                gap: 22px
            }

            #cinec-site .track {
                background: linear-gradient(160deg,var(--card-2),var(--card));
                border: 1px solid var(--line);
                border-radius: 26px;
                padding: 0 0 30px;
                box-shadow: var(--shadow);
                position: relative;
                overflow: hidden;
                transition: transform .35s
            }

            #cinec-site .track:hover {
                transform: translateY(-8px)
            }

            #cinec-site .track .thumb {
                height: 132px;
                background-size: cover;
                background-position: center;
                position: relative
            }

            #cinec-site .track .thumb::after {
                content: "";
                position: absolute;
                inset: 0;
                background: linear-gradient(180deg,rgba(36,28,88,0) 30%,var(--card))
            }

            #cinec-site .track .emoji {
                position: absolute;
                top: 14px;
                left: 16px;
                font-size: 1.6rem;
                z-index: 2;
                filter: drop-shadow(0 4px 8px rgba(0,0,0,.5))
            }

            #cinec-site .track .body {
                padding: 0 28px;
                margin-top: -8px;
                position: relative;
                z-index: 2
            }

            #cinec-site .track .tag {
                font-family: 'Space Mono';
                font-size: .62rem;
                letter-spacing: .14em;
                color: var(--ink-2)
            }

            #cinec-site .track h3 {
                font-size: 1.5rem;
                margin: 6px 0 4px
            }

            #cinec-site .track .role {
                color: var(--violet-br);
                font-weight: 600;
                font-size: .86rem;
                margin-bottom: 14px
            }

            #cinec-site .track p {
                color: var(--ink-2);
                font-size: .95rem;
                margin-bottom: 20px
            }

            #cinec-site .track dl {
                display: grid;
                grid-template-columns: auto 1fr;
                gap: 8px 14px;
                font-size: .9rem;
                border-top: 1px solid var(--line);
                padding-top: 16px
            }

            #cinec-site .track dt {
                color: var(--ink-2);
                font-family: 'Space Mono';
                font-size: .64rem;
                text-transform: uppercase;
                letter-spacing: .06em;
                align-self: center
            }

            #cinec-site .track dd {
                color: #fff;
                font-weight: 600
            }

            #cinec-site .ranks {
                display: flex;
                align-items: stretch;
                gap: 6px;
                flex-wrap: nowrap
            }

            #cinec-site .rank {
                flex: 1;
                background: linear-gradient(160deg,var(--card-2),var(--card));
                border: 1px solid var(--line);
                border-radius: 22px;
                padding: 26px 22px;
                box-shadow: var(--shadow);
                position: relative;
                transition: transform .35s;
                display: flex;
                flex-direction: column
            }

            #cinec-site .rank:hover {
                transform: translateY(-8px)
            }

            #cinec-site .rank::before {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                height: 4px;
                width: 0;
                background: var(--violet-br);
                border-radius: 22px 22px 0 0;
                transition: width .4s
            }

            #cinec-site .rank:hover::before {
                width: 100%
            }

            #cinec-site .rank-top {
                background: linear-gradient(160deg,#26418f,#1a2f6b);
                border-color: rgba(123,184,255,.4)
            }

            #cinec-site .rank-top::before {
                background: var(--gold)
            }

            #cinec-site .rank-ico {
                width: 52px;
                height: 52px;
                border-radius: 15px;
                background: rgba(77,151,255,.16);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.7rem;
                margin-bottom: 16px
            }

            #cinec-site .rank-top .rank-ico {
                background: rgba(255,210,122,.18)
            }

            #cinec-site .rank-step {
                font-family: 'Space Mono';
                font-size: .6rem;
                letter-spacing: .16em;
                color: var(--violet-br);
                font-weight: 700;
                margin-bottom: 6px
            }

            #cinec-site .rank-top .rank-step {
                color: var(--gold)
            }

            #cinec-site .rank h3 {
                font-size: 1.28rem;
                margin-bottom: 6px;
                line-height: 1.1
            }

            #cinec-site .rank-cert {
                display: inline-block;
                align-self: flex-start;
                font-family: 'Space Mono';
                font-size: .64rem;
                letter-spacing: .06em;
                font-weight: 700;
                padding: 5px 11px;
                border-radius: 100px;
                background: rgba(77,151,255,.18);
                color: var(--violet-br);
                margin-bottom: 14px
            }

            #cinec-site .rank-top .rank-cert {
                background: rgba(255,210,122,.18);
                color: var(--gold)
            }

            #cinec-site .rank p {
                color: var(--ink-2);
                font-size: .9rem;
                margin-top: auto
            }

            #cinec-site .rank-arrow {
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--violet-br);
                font-size: 1.8rem;
                font-weight: 700;
                flex: none;
                padding: 0 2px
            }

            #cinec-site .banners-block {
                padding-top: 60px;
                padding-bottom: 10px
            }

            #cinec-site .banners-block .carousel {
                margin-bottom: 0
            }

            #cinec-site .intake-head {
                text-align: center;
                max-width: 640px;
                margin: 0 auto 32px
            }

            #cinec-site .intake-head h2 {
                font-size: clamp(1.8rem,4.5vw,3rem);
                margin: 10px 0 12px
            }

            #cinec-site .intake-head p {
                color: var(--ink-2);
                font-size: 1.05rem
            }

            #cinec-site .carousel {
                position: relative;
                margin-bottom: 40px;
                border-radius: 24px;
                overflow: hidden;
                box-shadow: var(--shadow);
                border: 1px solid var(--line)
            }

            #cinec-site .carousel-track {
                display: flex;
                transition: transform .6s cubic-bezier(.16,.84,.28,1);
                cursor: grab;
                touch-action: pan-y
            }

            #cinec-site .carousel-track.dragging {
                transition: none;
                cursor: grabbing
            }

            #cinec-site .slide {
                position: relative;
                min-width: 100%;
                aspect-ratio: 2100/900;
                background-size: cover;
                background-position: center;
                background-color: var(--card)
            }

            #cinec-site .slide-cap {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                padding: 26px 30px;
                z-index: 2;
                display: none
            }

            #cinec-site .slide-cap .tag {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                font-family: 'Space Mono';
                font-size: .6rem;
                letter-spacing: .12em;
                text-transform: uppercase;
                font-weight: 700;
                padding: 5px 11px;
                border-radius: 100px;
                background: rgba(77,151,255,.28);
                color: #fff;
                margin-bottom: 10px
            }

            #cinec-site .slide-cap h4 {
                font-size: 1.55rem;
                margin-bottom: 5px
            }

            #cinec-site .slide-cap p {
                color: #cfe0ff;
                font-size: .92rem;
                max-width: 520px
            }

            #cinec-site .carousel-btn {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                z-index: 5;
                width: 44px;
                height: 44px;
                border-radius: 50%;
                border: 0;
                background: rgba(10,23,48,.55);
                backdrop-filter: blur(6px);
                color: #fff;
                font-size: 1.2rem;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: background .2s
            }

            #cinec-site .carousel-btn:hover {
                background: rgba(77,151,255,.8)
            }

            #cinec-site .carousel-btn.prev {
                left: 16px
            }

            #cinec-site .carousel-btn.next {
                right: 16px
            }

            #cinec-site .carousel-dots {
                position: absolute;
                bottom: 16px;
                left: 50%;
                transform: translateX(-50%);
                z-index: 5;
                display: flex;
                gap: 8px
            }

            #cinec-site .carousel-dots .dot {
                width: 9px;
                height: 9px;
                padding: 0;
                border-radius: 50%;
                border: 0;
                background: rgba(255,255,255,.45);
                cursor: pointer;
                transition: all .25s
            }

            #cinec-site .carousel-dots .dot.active {
                background: #fff;
                width: 26px;
                border-radius: 5px
            }

            #cinec-site .cdot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                border: 0;
                background: rgba(255,255,255,.4);
                cursor: pointer;
                transition: all .25s;
                padding: 0
            }

            #cinec-site .cdot.active {
                background: #fff;
                width: 22px;
                border-radius: 100px
            }

            #cinec-site .cat-filter {
                display: flex;
                gap: 10px;
                flex-wrap: wrap;
                margin-bottom: 32px
            }

            #cinec-site .chip {
                font-weight: 700;
                font-size: .86rem;
                padding: 10px 20px;
                border: 1px solid var(--line);
                background: rgba(77,151,255,.08);
                color: var(--ink-2);
                cursor: pointer;
                transition: all .2s;
                border-radius: 100px
            }

            #cinec-site .chip:hover {
                color: #fff;
                border-color: var(--violet)
            }

            #cinec-site .chip.active {
                background: var(--violet);
                color: #fff;
                border-color: var(--violet)
            }

            #cinec-site .catalog {
                display: grid;
                grid-template-columns: repeat(3,minmax(280px,360px));
                gap: 20px;
                justify-content: center
            }

            #cinec-site .course {
                background: linear-gradient(160deg,var(--card-2),var(--card));
                border: 1px solid var(--line);
                border-radius: 22px;
                padding: 26px;
                position: relative;
                box-shadow: var(--shadow);
                transition: transform .3s
            }

            #cinec-site .course:hover {
                transform: translateY(-6px)
            }

            #cinec-site .course .cbadge {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                font-family: 'Space Mono';
                font-size: .6rem;
                padding: 5px 11px;
                border-radius: 100px;
                letter-spacing: .1em;
                text-transform: uppercase;
                margin-bottom: 14px;
                font-weight: 700
            }

            #cinec-site .b-nav {
                background: rgba(63,208,187,.16);
                color: var(--teal)
            }

            #cinec-site .b-eng {
                background: rgba(77,151,255,.2);
                color: var(--violet-br)
            }

            #cinec-site .b-eto {
                background: rgba(255,138,107,.18);
                color: var(--coral)
            }

            #cinec-site .course h4 {
                font-size: 1.2rem;
                margin-bottom: 10px;
                line-height: 1.2
            }

            #cinec-site .course .cmeta {
                display: flex;
                gap: 8px;
                flex-wrap: wrap;
                margin-bottom: 12px
            }

            #cinec-site .course .cmeta span {
                font-family: 'Space Mono';
                font-size: .62rem;
                color: var(--ink-2);
                background: rgba(77,151,255,.1);
                padding: 4px 10px;
                border-radius: 100px
            }

            #cinec-site .course p {
                color: var(--ink-2);
                font-size: .92rem;
                margin-bottom: 16px
            }

            #cinec-site .course .creq {
                font-size: .85rem;
                color: var(--ink-2);
                border-top: 1px solid var(--line);
                padding-top: 14px
            }

            #cinec-site .course .creq b {
                color: #fff;
                display: block;
                font-family: 'Space Mono';
                font-size: .6rem;
                letter-spacing: .1em;
                text-transform: uppercase;
                margin-bottom: 5px
            }

            #cinec-site .hide {
                display: none
            }

            #cinec-site .voyage {
                position: relative;
                padding-left: 8px
            }

            #cinec-site .voyage::before {
                content: "";
                position: absolute;
                left: 17px;
                top: 8px;
                bottom: 8px;
                width: 3px;
                background: rgba(77,151,255,.2);
                border-radius: 3px
            }

            #cinec-site .voyage-fill {
                position: absolute;
                left: 17px;
                top: 8px;
                width: 3px;
                background: var(--violet-br);
                border-radius: 3px;
                height: 0;
                transition: height .1s linear
            }

            #cinec-site .leg {
                position: relative;
                padding: 0 0 34px 52px
            }

            #cinec-site .leg:last-child {
                padding-bottom: 0
            }

            #cinec-site .leg .dot {
                position: absolute;
                left: 6px;
                top: 0;
                width: 26px;
                height: 26px;
                border-radius: 50%;
                border: 3px solid rgba(77,151,255,.28);
                background: var(--bg-2);
                transition: all .3s;
                z-index: 2;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: .8rem
            }

            #cinec-site .leg.lit .dot {
                border-color: var(--violet-br);
                background: var(--violet);
                box-shadow: 0 0 0 6px rgba(77,151,255,.2)
            }

            #cinec-site .leg .card-leg {
                background: linear-gradient(160deg,var(--card-2),var(--card));
                border: 1px solid var(--line);
                border-radius: 20px;
                padding: 22px 24px;
                box-shadow: var(--shadow);
                transition: transform .3s
            }

            #cinec-site .leg.lit .card-leg {
                transform: translateX(4px)
            }

            #cinec-site .leg .lnum {
                font-family: 'Space Mono';
                font-size: .64rem;
                color: var(--violet-br);
                font-weight: 700
            }

            #cinec-site .leg h4 {
                font-size: 1.22rem;
                margin: 2px 0 8px
            }

            #cinec-site .leg p {
                color: var(--ink-2);
                font-size: .94rem
            }

            #cinec-site .campus {
                display: grid;
                grid-template-columns: 1.05fr 1fr;
                gap: 34px;
                align-items: center
            }

            @media(max-width: 860px) {
                #cinec-site .campus {
                    grid-template-columns:1fr
                }
            }

            #cinec-site .map-frame {
                position: relative;
                aspect-ratio: 1/1;
                border-radius: 26px;
                background: radial-gradient(circle at 30% 25%,#2e2470,#171036);
                border: 1px solid var(--line);
                box-shadow: var(--shadow);
                overflow: hidden;
                padding: 14px
            }

            #cinec-site .map-frame svg {
                width: 100%;
                height: 100%
            }

            #cinec-site .pin {
                cursor: pointer
            }

            #cinec-site .pin circle.hit {
                transition: r .2s
            }

            #cinec-site .pin:hover circle.hit {
                r: 6
            }

            #cinec-site .pin text {
                font-family: 'Space Mono';
                font-size: 5px;
                fill: #fff;
                opacity: 0;
                transition: opacity .2s;
                font-weight: 700
            }

            #cinec-site .pin:hover text {
                opacity: 1
            }

            #cinec-site .wayfind {
                background: linear-gradient(160deg,var(--card-2),var(--card));
                border: 1px solid var(--line);
                border-radius: 26px;
                padding: 12px 26px;
                box-shadow: var(--shadow)
            }

            #cinec-site .place {
                padding: 18px 0;
                border-bottom: 1px solid var(--line);
                display: flex;
                gap: 16px;
                align-items: center;
                transition: padding-left .25s
            }

            #cinec-site .place:last-child {
                border-bottom: 0
            }

            #cinec-site .place:hover {
                padding-left: 8px
            }

            #cinec-site .place .pico {
                font-size: 1.4rem;
                min-width: 34px;
                text-align: center
            }

            #cinec-site .place h4 {
                font-size: 1.04rem
            }

            #cinec-site .place span {
                color: var(--ink-2);
                font-size: .86rem;
                display: block
            }

            #cinec-site .harbor {
                position: relative;
                z-index: 1;
                border-radius: 36px;
                padding: 90px 8vw;
                text-align: center;
                overflow: hidden;
                background: radial-gradient(130% 130% at 20% 10%,var(--hero-1),var(--hero-2) 45%,var(--hero-3));
                max-width: 1240px;
                margin: 40px auto 30px
            }

            #cinec-site .harbor h2 {
                font-size: clamp(2.2rem,5.5vw,4rem);
                margin: 16px 0 18px
            }

            #cinec-site .harbor p {
                color: var(--ink-2);
                font-size: 1.1rem;
                max-width: 500px;
                margin: 0 auto 34px
            }

            #cinec-site .harbor .fe {
                position: absolute;
                font-size: 2.4rem;
                opacity: .9;
                filter: drop-shadow(0 8px 14px rgba(0,0,0,.5))
            }

            #cinec-site .harbor .hfe1 {
                top: 26px;
                right: 8%;
                animation: bob 7s ease-in-out infinite
            }

            #cinec-site .harbor .hfe2 {
                bottom: 20px;
                left: 9%;
                font-size: 1.9rem;
                animation: bob 6s ease-in-out infinite
            }

            #cinec-site .btn-row {
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                gap: 14px;
                position: relative;
                z-index: 2
            }

            #cinec-site footer {
                position: relative;
                z-index: 1;
                padding: 36px 6vw 50px;
                max-width: 1240px;
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                gap: 16px;
                font-family: 'Space Mono';
                font-size: .72rem;
                color: var(--ink-2)
            }

            #cinec-site footer a {
                color: var(--violet-br);
                text-decoration: none;
                font-weight: 700
            }

            #cinec-site .footer-disc {
                max-width: 640px;
                font-size: .66rem;
                color: var(--ink-2);
                line-height: 1.7;
                opacity: .85
            }

            #cinec-site .course {
                cursor: pointer
            }

            #cinec-site .view-more {
                margin-top: 14px;
                color: var(--violet-br);
                font-weight: 700;
                font-size: .84rem;
                font-family: 'Space Mono';
                letter-spacing: .02em;
                transition: gap .2s
            }

            #cinec-site .course:hover .view-more {
                text-decoration: underline
            }

            #cinec-site .modal-overlay {
                position: fixed;
                inset: 0;
                z-index: 100;
                background: rgba(6,14,32,.72);
                backdrop-filter: blur(6px);
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 24px;
                opacity: 0;
                visibility: hidden;
                transition: opacity .3s,visibility .3s
            }

            #cinec-site .modal-overlay.open {
                opacity: 1;
                visibility: visible
            }

            #cinec-site .cw-modal {
                position: relative;
                width: 100%;
                max-width: 600px;
                max-height: 88vh;
                overflow-y: auto;
                background: linear-gradient(170deg,var(--card-2),var(--card));
                border: 1px solid var(--line);
                border-radius: 26px;
                box-shadow: 0 40px 100px -30px rgba(0,0,0,.8);
                transform: translateY(24px) scale(.97);
                transition: transform .35s cubic-bezier(.16,.84,.28,1)
            }

            #cinec-site .modal-overlay.open .cw-modal {
                transform: none
            }

            #cinec-site .cw-modal::-webkit-scrollbar {
                width: 8px
            }

            #cinec-site .cw-modal::-webkit-scrollbar-thumb {
                background: rgba(77,151,255,.4);
                border-radius: 8px
            }

            #cinec-site .modal-close {
                position: absolute;
                top: 14px;
                right: 16px;
                z-index: 6;
                width: 38px;
                height: 38px;
                border-radius: 50%;
                border: 0;
                background: rgba(6,14,32,.55);
                backdrop-filter: blur(6px);
                color: #fff;
                font-size: 1.4rem;
                line-height: 1;
                cursor: pointer;
                transition: background .2s
            }

            #cinec-site .modal-close:hover {
                background: var(--coral)
            }

            #cinec-site .modal-hero {
                height: 150px;
                background-size: cover;
                background-position: center;
                position: relative
            }

            #cinec-site .modal-hero::after {
                content: "";
                position: absolute;
                inset: 0;
                background: linear-gradient(180deg,rgba(19,42,86,0.15) 0%,rgba(19,42,86,0.45) 55%,var(--card-2) 100%)
            }

            #cinec-site .modal-body {
                padding: 0 30px 34px;
                margin-top: -6px;
                position: relative;
                z-index: 2
            }

            #cinec-site .modal-kicker {
                font-family: 'Space Mono';
                font-size: .68rem;
                letter-spacing: .16em;
                color: var(--violet-br);
                font-weight: 700
            }

            #cinec-site .modal-title {
                font-size: 1.7rem;
                margin: 8px 0 12px
            }

            #cinec-site .modal-desc {
                color: var(--ink-2);
                font-size: .98rem;
                margin-bottom: 22px
            }

            #cinec-site .modal-facts {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 12px;
                margin-bottom: 24px
            }

            #cinec-site .modal-facts .fact {
                background: rgba(77,151,255,.08);
                border: 1px solid var(--line);
                border-radius: 14px;
                padding: 14px 16px;
                display: flex;
                flex-direction: column;
                gap: 4px
            }

            #cinec-site .fact .fk {
                font-family: 'Space Mono';
                font-size: .62rem;
                letter-spacing: .12em;
                text-transform: uppercase;
                color: var(--violet-br)
            }

            #cinec-site .fact .fv {
                font-weight: 700;
                font-size: 1rem
            }

            #cinec-site .modal-hl-title {
                font-size: 1.02rem;
                margin-bottom: 12px
            }

            #cinec-site .modal-hl {
                list-style: none;
                display: flex;
                flex-direction: column;
                gap: 11px;
                margin-bottom: 26px
            }

            #cinec-site .modal-hl li {
                position: relative;
                padding-left: 26px;
                color: var(--ink);
                font-size: .94rem
            }

            #cinec-site .modal-hl li::before {
                content: "⚓";
                position: absolute;
                left: 0;
                top: 0;
                font-size: .9rem
            }

            #cinec-site .modal-btns {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 14px;
                margin-bottom: 6px
            }

            #cinec-site .modal-btns .cw-btn {
                padding: 14px 20px;
                border-radius: 14px;
                font-size: .98rem;
                justify-content: center;
                height: 52px
            }

            #cinec-site .wa-btn {
                background: linear-gradient(135deg,#22c35e,#12a34a);
                color: #fff;
                justify-content: center
            }

            #cinec-site .wa-btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 14px 30px -12px rgba(18,163,74,.6)
            }

            #cinec-site .enroll-card {
                max-width: 820px;
                margin: 0 auto;
                background: linear-gradient(170deg,var(--card-2),var(--card));
                border: 1px solid var(--line);
                border-radius: 28px;
                padding: 36px;
                box-shadow: var(--shadow)
            }

            #cinec-site .cw-form-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 20px;
                margin-bottom: 24px
            }

            #cinec-site .field {
                display: flex;
                flex-direction: column;
                gap: 8px;
                min-width: 0
            }

            #cinec-site .field-full {
                grid-column: 1/-1
            }

            #cinec-site .field label {
                font-weight: 700;
                font-size: .92rem
            }

            #cinec-site .field input,#cinec-site .field select,#cinec-site .field textarea {
                width: 100%;
                max-width: 100%;
                box-sizing: border-box;
                background: rgba(6,14,32,.4);
                border: 1px solid var(--line);
                border-radius: 12px;
                padding: 14px 16px;
                color: #fff;
                font-family: inherit;
                font-size: .96rem;
                transition: border-color .2s,box-shadow .2s
            }

            #cinec-site .field input::placeholder,#cinec-site .field textarea::placeholder {
                color: rgba(157,182,230,.5)
            }

            #cinec-site .field input:focus,#cinec-site .field select:focus,#cinec-site .field textarea:focus {
                outline: 0;
                border-color: var(--violet);
                box-shadow: 0 0 0 3px rgba(77,151,255,.2)
            }

            #cinec-site .field select {
                cursor: pointer
            }

            #cinec-site .field select option {
                background: var(--card);
                color: #fff
            }

            #cinec-site .field textarea {
                resize: vertical;
                min-height: 96px
            }

            #cinec-site .enroll-send {
                width: 100%;
                justify-content: center;
                background: linear-gradient(135deg,#5bb8ff,#3fd0cf);
                color: #08182f;
                font-size: 1.02rem
            }

            #cinec-site .enroll-send:hover {
                transform: translateY(-2px);
                box-shadow: 0 16px 36px -14px rgba(63,208,207,.6)
            }

            #cinec-site .form-note {
                text-align: center;
                margin-top: 16px;
                font-size: .92rem;
                color: var(--teal);
                min-height: 1.2em;
                font-weight: 600
            }

            #cinec-site .contact-grid {
                display: grid;
                grid-template-columns: 1fr 1.1fr;
                gap: 26px;
                align-items: stretch
            }

            #cinec-site .contact-card {
                background: linear-gradient(170deg,var(--card-2),var(--card));
                border: 1px solid var(--line);
                border-radius: 28px;
                padding: 30px;
                box-shadow: var(--shadow)
            }

            #cinec-site .cline {
                display: flex;
                gap: 16px;
                align-items: flex-start;
                padding: 16px 0;
                border-bottom: 1px solid var(--line)
            }

            #cinec-site .cline .cico {
                font-size: 1.35rem;
                min-width: 34px;
                text-align: center
            }

            #cinec-site .cline h4 {
                font-size: 1rem;
                margin-bottom: 3px
            }

            #cinec-site .cline span {
                color: var(--ink-2);
                font-size: .9rem;
                display: block
            }

            #cinec-site .wa-btn.wa-btn {
                margin-top: 22px;
                width: 100%
            }

            #cinec-site .contact-map {
                border-radius: 28px;
                overflow: hidden;
                border: 1px solid var(--line);
                box-shadow: var(--shadow);
                min-height: 420px
            }

            #cinec-site .contact-map iframe {
                width: 100%;
                height: 100%;
                min-height: 420px;
                border: 0;
                filter: saturate(.9) contrast(1.05)
            }

            @media(min-width: 641px) and (max-width:880px) {
                #cinec-site .hero {
                    padding:100px 28px 56px
                }

                #cinec-site section.block {
                    padding: 70px 28px
                }

                #cinec-site .disc {
                    width: 250px;
                    height: 250px
                }

                #cinec-site .hero h1 {
                    font-size: 3rem
                }

                #cinec-site .ranks {
                    flex-wrap: wrap
                }

                #cinec-site .ranks .rank {
                    flex: 1 1 calc(50% - 24px);
                    min-width: calc(50% - 24px)
                }

                #cinec-site .ranks .rank-arrow {
                    display: none
                }

                #cinec-site .reveal.from-left,#cinec-site .reveal.from-right {
                    transform: translateY(34px)
                }
            }

            @media(max-width: 640px) {
                #cinec-site .instruments {
                    padding:10px 14px
                }

                #cinec-site .compass {
                    width: 30px;
                    height: 30px
                }

                #cinec-site .needle {
                    height: 12px
                }

                #cinec-site .brand-name {
                    font-size: .9rem
                }

                #cinec-site .brand-sub {
                    font-size: .46rem;
                    letter-spacing: .16em
                }

                #cinec-site .nav-links a.cta {
                    padding: 7px 13px;
                    font-size: .78rem
                }

                #cinec-site .hero {
                    padding: 78px 18px 40px;
                    border-radius: 0 0 24px 24px;
                    min-height: auto
                }

                #cinec-site .hero-inner {
                    gap: 10px
                }

                #cinec-site .hero-stage {
                    height: 168px
                }

                #cinec-site .disc {
                    width: 158px;
                    height: 158px
                }

                #cinec-site .float-emoji {
                    font-size: 1.15rem
                }

                #cinec-site .fe2,#cinec-site .fe3,#cinec-site .fe4 {
                    font-size: .95rem
                }

                #cinec-site .hero .eyebrow {
                    font-size: .56rem;
                    letter-spacing: .14em
                }

                #cinec-site .hero h1 {
                    font-size: 2.05rem;
                    margin: 9px 0 11px;
                    letter-spacing: -.02em
                }

                #cinec-site .hero .lead {
                    font-size: .9rem;
                    line-height: 1.5
                }

                #cinec-site .cw-hero-btns {
                    gap: 9px;
                    margin-top: 18px
                }

                #cinec-site .cw-btn {
                    padding: 11px 18px;
                    font-size: .85rem
                }

                #cinec-site .coords {
                    margin-top: 16px;
                    gap: 14px;
                    font-size: .6rem
                }

                #cinec-site .scroll-cue {
                    display: none
                }

                #cinec-site section.block {
                    padding: 48px 18px
                }

                #cinec-site .sec-head {
                    gap: 9px;
                    margin-bottom: 7px
                }

                #cinec-site .sec-num {
                    font-size: .6rem;
                    padding: 4px 10px
                }

                #cinec-site .sec-head h2 {
                    font-size: 1.45rem
                }

                #cinec-site .sec-intro {
                    font-size: .9rem;
                    margin-bottom: 26px;
                    line-height: 1.55
                }

                #cinec-site .tracks {
                    gap: 14px
                }

                #cinec-site .ranks {
                    flex-direction: column;
                    gap: 0
                }

                #cinec-site .ranks .rank {
                    width: 100%
                }

                #cinec-site .ranks .rank-arrow {
                    transform: rotate(90deg);
                    padding: 8px 0;
                    font-size: 1.5rem
                }

                #cinec-site .track {
                    border-radius: 20px
                }

                #cinec-site .track .thumb {
                    height: 104px
                }

                #cinec-site .track .emoji {
                    font-size: 1.35rem;
                    top: 11px;
                    left: 13px
                }

                #cinec-site .track .body {
                    padding: 0 18px
                }

                #cinec-site .track h3 {
                    font-size: 1.2rem
                }

                #cinec-site .track .role {
                    font-size: .78rem;
                    margin-bottom: 11px
                }

                #cinec-site .track p {
                    font-size: .86rem;
                    margin-bottom: 15px
                }

                #cinec-site .track dl {
                    font-size: .82rem;
                    gap: 6px 12px;
                    padding-top: 13px
                }

                #cinec-site .track dt {
                    font-size: .58rem
                }

                #cinec-site .cat-filter {
                    gap: 7px;
                    margin-bottom: 20px
                }

                #cinec-site .slide {
                    aspect-ratio: 2100/900
                }

                #cinec-site .slide-cap {
                    padding: 18px 20px
                }

                #cinec-site .slide-cap h4 {
                    font-size: 1.15rem
                }

                #cinec-site .slide-cap p {
                    font-size: .82rem
                }

                #cinec-site .carousel-btn {
                    width: 36px;
                    height: 36px;
                    font-size: 1rem
                }

                #cinec-site .carousel-btn.prev {
                    left: 10px
                }

                #cinec-site .carousel-btn.next {
                    right: 10px
                }

                #cinec-site .carousel {
                    margin-bottom: 28px
                }

                #cinec-site .chip {
                    font-size: .76rem;
                    padding: 8px 14px
                }

                #cinec-site .catalog {
                    grid-template-columns: 1fr;
                    gap: 14px
                }

                #cinec-site .course {
                    padding: 20px;
                    border-radius: 18px
                }

                #cinec-site .course h4 {
                    font-size: 1.04rem
                }

                #cinec-site .course .cmeta span {
                    font-size: .58rem
                }

                #cinec-site .course p {
                    font-size: .86rem
                }

                #cinec-site .course .creq {
                    font-size: .8rem
                }

                #cinec-site .leg {
                    padding: 0 0 22px 40px
                }

                #cinec-site .leg .dot {
                    width: 21px;
                    height: 21px;
                    font-size: .66rem;
                    border-width: 2px
                }

                #cinec-site .voyage::before,#cinec-site .voyage-fill {
                    left: 14px;
                    width: 2px
                }

                #cinec-site .leg .card-leg {
                    padding: 15px 17px;
                    border-radius: 16px
                }

                #cinec-site .leg .lnum {
                    font-size: .58rem
                }

                #cinec-site .leg h4 {
                    font-size: 1.04rem;
                    margin: 2px 0 6px
                }

                #cinec-site .leg p {
                    font-size: .86rem
                }

                #cinec-site .campus {
                    gap: 18px
                }

                #cinec-site .map-frame {
                    padding: 10px;
                    border-radius: 20px
                }

                #cinec-site .wayfind {
                    padding: 6px 18px;
                    border-radius: 20px
                }

                #cinec-site .place {
                    padding: 13px 0;
                    gap: 12px
                }

                #cinec-site .place .pico {
                    font-size: 1.1rem;
                    min-width: 24px
                }

                #cinec-site .place h4 {
                    font-size: .94rem
                }

                #cinec-site .place span {
                    font-size: .8rem
                }

                #cinec-site .harbor {
                    padding: 52px 22px;
                    border-radius: 22px;
                    margin: 20px 14px
                }

                #cinec-site .harbor h2 {
                    font-size: 1.75rem
                }

                #cinec-site .harbor p {
                    font-size: .9rem;
                    margin-bottom: 26px
                }

                #cinec-site .harbor .fe {
                    font-size: 1.4rem
                }

                #cinec-site .btn-row {
                    gap: 9px;
                    flex-direction: column;
                    width: 100%
                }

                #cinec-site .btn-row .cw-btn {
                    width: 100%;
                    justify-content: center
                }

                #cinec-site footer {
                    padding: 24px 18px 36px;
                    font-size: .62rem;
                    gap: 12px
                }

                #cinec-site .disc-text,#cinec-site .disc {
                    will-change: transform
                }

                #cinec-site .modal-overlay {
                    padding: 0;
                    align-items: flex-end
                }

                #cinec-site .cw-modal {
                    max-width: 100%;
                    max-height: 92vh;
                    border-radius: 24px 24px 0 0
                }

                #cinec-site .modal-hero {
                    height: 120px
                }

                #cinec-site .modal-body {
                    padding: 0 20px 24px
                }

                #cinec-site .modal-title {
                    font-size: 1.4rem
                }

                #cinec-site .modal-facts {
                    grid-template-columns: 1fr 1fr;
                    gap: 10px
                }

                #cinec-site .modal-btns {
                    grid-template-columns: 1fr
                }

                #cinec-site .enroll-card {
                    padding: 18px;
                    border-radius: 20px
                }

                #cinec-site .cw-form-grid {
                    grid-template-columns: 1fr;
                    gap: 14px;
                    margin-bottom: 18px
                }

                #cinec-site .field input,#cinec-site .field select,#cinec-site .field textarea {
                    padding: 12px 14px;
                    font-size: .9rem
                }

                #cinec-site .enroll-send {
                    font-size: .95rem;
                    padding: 13px 18px
                }

                #cinec-site .contact-grid {
                    grid-template-columns: 1fr;
                    gap: 14px
                }

                #cinec-site .contact-card {
                    padding: 22px;
                    border-radius: 22px
                }

                #cinec-site .contact-map,#cinec-site .contact-map iframe {
                    min-height: 260px
                }

                #cinec-site .reveal.from-left,#cinec-site .reveal.from-right {
                    transform: translateY(34px)
                }

                #cinec-site .cline {
                    padding: 13px 0
                }

                #cinec-site .wa-btn.wa-btn {
                    margin-top: 16px
                }
            }

            @media(max-width: 360px) {
                #cinec-site .hero h1 {
                    font-size:1.82rem
                }

                #cinec-site .sec-head h2 {
                    font-size: 1.32rem
                }

                #cinec-site .disc {
                    width: 140px;
                    height: 140px
                }

                #cinec-site .hero-stage {
                    height: 158px
                }
            }

            @media(prefers-reduced-motion:reduce) {
                #cinec-site * {
                    animation: none!important;
                    transition: none!important
                }

                #cinec-site .reveal {
                    opacity: 1;
                    transform: none
                }

                #cinec-site .track .thumb {
                    transform: none
                }
            }

            #cinec-site {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 400;
                overflow-y: auto;
                overflow-x: hidden;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain
            }

            #cinec-site .slide {
                position: relative
            }

            #cinec-site .cw-slide-cap {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                padding: 26px 24px 20px;
                display: flex;
                flex-direction: column;
                gap: 5px;
                color: #fff;
                background: linear-gradient(to top,rgba(4,12,28,.86),rgba(4,12,28,0));
                pointer-events: none
            }

            #cinec-site .cw-slide-cap b {
                font-size: 1.05rem;
                font-weight: 800;
                letter-spacing: -.01em
            }

            #cinec-site .cw-slide-cap span {
                font-size: .82rem;
                opacity: .9
            }

            #cinec-site .cw-slide-cap a {
                pointer-events: auto;
                align-self: flex-start;
                margin-top: 6px;
                font-size: .76rem;
                font-weight: 700;
                color: #fff;
                text-decoration: none;
                padding: 7px 13px;
                border-radius: 999px;
                background: rgba(255,255,255,.18)
            }

            @media(min-width: 641px) and (max-width:980px) {
                #cinec-site .catalog {
                    grid-template-columns:repeat(2,minmax(280px,380px))
                }
            }

            #cinec-site .course {
                cursor: pointer
            }

            #cinec-site .modal-hero-fallback {
                background: radial-gradient(120% 140% at 30% 0%,var(--hero-1),var(--hero-2) 55%,var(--hero-3))
            }

            #cwTop {
                position: fixed;
                right: 26px;
                bottom: 26px;
                z-index: 460;
                width: 46px;
                height: 46px;
                border: none;
                border-radius: 50%;
                background: var(--violet);
                color: #fff;
                font-size: 20px;
                font-weight: 800;
                cursor: pointer;
                box-shadow: 0 10px 26px -8px rgba(0,0,0,.6);
                opacity: 0;
                transform: translateY(14px) scale(.9);
                pointer-events: none;
                transition: opacity .25s,transform .25s
            }

            #cwTop.show {
                opacity: 1;
                transform: none;
                pointer-events: auto
            }

            #cwTop:hover {
                background: var(--violet-br)
            }
        
/* cw-cform-css */

            #adm-mp-courses .cw-cform {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 14px 18px
            }

            #adm-mp-courses .cw-cf {
                display: flex;
                flex-direction: column;
                gap: 6px;
                font-size: 13px;
                font-weight: 600;
                color: var(--c-muted)
            }

            #adm-mp-courses .cw-cf.cw-cf-full {
                grid-column: 1/-1
            }

            #adm-mp-courses .cw-cf input,#adm-mp-courses .cw-cf textarea {
                width: 100%;
                padding: 10px 12px;
                border-radius: 9px;
                border: 1.5px solid var(--c-border);
                background: var(--c-bg);
                color: var(--c-text);
                font-family: var(--font);
                font-size: 14px;
                font-weight: 500
            }

            #adm-mp-courses .cw-cf input:focus,#adm-mp-courses .cw-cf textarea:focus {
                outline: none;
                border-color: var(--c-accent)
            }

            #adm-mp-courses .cw-cf textarea {
                resize: vertical;
                min-height: 56px
            }

            #adm-mp-courses .cw-cf-check {
                flex-direction: row;
                align-items: center;
                gap: 10px
            }

            #adm-mp-courses .cw-cf-check input {
                width: auto
            }

            @media(max-width: 720px) {
                #adm-mp-courses .cw-cform {
                    grid-template-columns:1fr
                }
            }
        
/* cw-sheet-css */

            .cw-sheet {
                font-size: 12.5px;
                color: var(--c-text);
                line-height: 1.4
            }

            .cw-sh-title {
                text-align: center;
                font-weight: 800;
                font-size: 15px;
                letter-spacing: .04em;
                padding: 8px;
                border: 1.5px solid var(--c-border);
                background: var(--c-bg);
                margin-bottom: 0
            }

            .cw-sh-grid {
                display: grid;
                grid-template-columns: 1.3fr 1fr;
                gap: 0
            }

            .cw-sh-t {
                width: 100%;
                border-collapse: collapse
            }

            .cw-sh-t td {
                border: 1px solid var(--c-border);
                padding: 6px 9px;
                vertical-align: top
            }

            .cw-sh-lbl {
                font-weight: 700;
                background: var(--c-bg);
                width: 44%;
                color: var(--c-text)
            }

            .cw-sh-val {
                color: var(--c-text)
            }

            .cw-sh-right {
                border: 1px solid var(--c-border);
                border-left: none
            }

            .cw-sh-exhead {
                font-weight: 800;
                text-align: center;
                padding: 6px;
                background: #1c458f;
                color: #fff;
                font-size: 12px
            }

            .cw-sh-ex {
                width: 100%;
                border-collapse: collapse
            }

            .cw-sh-ex td {
                border: 1px solid var(--c-border);
                padding: 5px 9px
            }

            .cw-sh-exl {
                font-weight: 700;
                background: var(--c-bg);
                width: 55%
            }

            .cw-sh-exv {
                text-align: center
            }

            .cw-sh-sec {
                font-weight: 800;
                text-align: center;
                padding: 7px;
                background: #1c458f;
                color: #fff;
                margin-top: 14px;
                font-size: 13px;
                letter-spacing: .03em
            }

            .cw-sh-tbl {
                width: 100%;
                border-collapse: collapse;
                font-size: 11.5px
            }

            .cw-sh-th {
                border: 1px solid var(--c-border);
                padding: 6px 7px;
                background: var(--c-bg);
                font-weight: 700;
                text-align: center;
                color: var(--c-text)
            }

            .cw-sh-td {
                border: 1px solid var(--c-border);
                padding: 6px 7px;
                text-align: center;
                color: var(--c-text)
            }

            .cw-sh-selected {
                padding: 7px 9px;
                border: 1px solid var(--c-border);
                border-top: none;
                background: #fff8e1;
                color: #000;
                font-size: 12px
            }

            @media(max-width: 640px) {
                .cw-sh-grid {
                    grid-template-columns:1fr
                }

                .cw-sh-right {
                    border-left: 1px solid var(--c-border);
                    border-top: none
                }

                .cw-sh-tbl,.cw-sheet {
                    font-size: 10.5px
                }
            }
        
/* cw-sheet-css2 */

            #det-modal .modal.cw-sheet-modal {
                max-width: 1180px;
                width: 97%
            }

            @media(min-width: 900px) {
                .cw-sh-grid {
                    grid-template-columns:1.4fr 1fr
                }

                .cw-sh-right {
                    align-self: start
                }

                .cw-sh-tbl {
                    font-size: 12px
                }
            }

            @media(max-width: 899px) {
                #det-modal .modal.cw-sheet-modal {
                    max-width:96%
                }
            }
        
/* cw-sheet-css3 */

            #det-modal .modal.cw-sheet-modal .m-body {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch
            }

            .cw-sheet {
                min-width: 680px
            }

            .cw-sh-grid {
                grid-template-columns: 1.3fr 1fr!important
            }

            @media(max-width: 640px) {
                .cw-sheet {
                    min-width:640px
                }

                .cw-sh-tbl,.cw-sh-t,.cw-sh-ex {
                    font-size: 11px
                }
            }

            @media(min-width: 641px) and (max-width:1024px) {
                .cw-sheet {
                    min-width:0
                }
            }
        
/* home-dash-css */

#cp-home .hd-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:6px 0 18px;flex-wrap:wrap}
#cp-home .hd-greet{font-size:26px;font-weight:800;color:var(--c-text);margin:0;line-height:1.2;letter-spacing:-.3px}
#cp-home .hd-sub{margin:4px 0 0;font-size:13px;color:var(--c-muted)}
#cp-home .hd-date{display:flex;align-items:center;gap:10px;text-align:right}
#cp-home .hd-date b{display:block;font-size:13px;color:var(--c-text)}
#cp-home .hd-date small{display:block;font-size:11px;color:var(--c-muted)}
#cp-home .hd-date-ic{width:34px;height:34px;border-radius:10px;background:var(--c-surface);border:1px solid var(--c-border);display:flex;align-items:center;justify-content:center;font-size:16px}
#cp-home .hd-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:18px}
#cp-home .hd-stat{background:var(--c-surface);border:1px solid var(--c-border);border-radius:16px;padding:16px;box-shadow:0 2px 10px rgba(20,40,90,.06);transition:transform .18s,box-shadow .18s;position:relative;overflow:hidden}
#cp-home .hd-stat:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(20,40,90,.12)}
#cp-home .hd-s1{background-image:linear-gradient(160deg,rgba(47,108,246,.09),transparent 60%)}
#cp-home .hd-s2{background-image:linear-gradient(160deg,rgba(20,184,166,.10),transparent 60%)}
#cp-home .hd-s3{background-image:linear-gradient(160deg,rgba(245,158,11,.10),transparent 60%)}
#cp-home .hd-s4{background-image:linear-gradient(160deg,rgba(139,92,246,.10),transparent 60%)}
#cp-home .hd-s5{background-image:linear-gradient(160deg,rgba(239,68,68,.10),transparent 60%)}
#cp-home .hd-ic{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:10px;box-shadow:0 4px 10px rgba(0,0,0,.15)}
#cp-home .hd-lbl{font-size:12px;font-weight:700;color:var(--c-text2)}
#cp-home .hd-num{font-size:30px;font-weight:800;color:var(--c-text);line-height:1.15;margin:2px 0}
#cp-home .hd-note{font-size:11px;color:var(--c-muted)}
#cp-home .hd-up{color:var(--c-green)}#cp-home .hd-dn{color:var(--c-red)}
#cp-home .hd-two{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin-bottom:18px}
#cp-home .hd-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:16px;padding:18px;box-shadow:0 2px 10px rgba(20,40,90,.06);min-width:0}
#cp-home .hd-card-h{font-size:14px;font-weight:800;color:var(--c-text);margin-bottom:12px}
#cp-home .hd-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--c-border)}
#cp-home .hd-row:first-child{border-top:0}
#cp-home .hd-av{width:40px;height:40px;border-radius:50%;background:var(--c-surface3);color:var(--c-accent);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none;background-size:cover;background-position:center}
#cp-home .hd-who{flex:1.2;min-width:0}
#cp-home .hd-who b{display:block;font-size:13px;color:var(--c-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cp-home .hd-who small{font-size:11px;color:var(--c-muted)}
#cp-home .hd-ves{flex:1;font-size:12px;color:var(--c-text2);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cp-home .hd-when{font-size:12px;font-weight:700;color:var(--c-text);white-space:nowrap}
#cp-home .hd-pill{font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px;white-space:nowrap}
#cp-home .hd-p-blue{background:var(--c-teal-bg);color:var(--c-blue)}
#cp-home .hd-p-green{background:var(--c-green-bg);color:var(--c-green)}
#cp-home .hd-p-red{background:var(--c-red-bg);color:var(--c-red)}
#cp-home .hd-click{cursor:pointer;border-radius:10px;padding-left:6px;padding-right:6px;transition:background .15s}
#cp-home .hd-click:hover{background:var(--c-surface2)}
#cp-home .hd-empty{font-size:12px;color:var(--c-muted);padding:14px 0}
#cp-home .hd-donut-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:center}
#cp-home .hd-donut{width:150px;height:150px;position:relative;flex:none}
#cp-home .hd-donut svg{width:100%;height:100%;transform:rotate(-90deg)}
#cp-home .hd-donut-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;color:var(--c-muted)}
#cp-home .hd-donut-c b{font-size:22px;color:var(--c-text)}
#cp-home .hd-legend{display:flex;flex-direction:column;gap:12px;font-size:12px;color:var(--c-text2);min-width:120px}
#cp-home .hd-leg{display:flex;align-items:center;gap:8px}
#cp-home .hd-leg i{width:9px;height:9px;border-radius:50%;flex:none}
#cp-home .hd-leg b{margin-left:auto;color:var(--c-text)}
#cp-home .hd-banner{position:relative;overflow:hidden;border-radius:16px;min-height:96px;padding:18px 24px;margin-bottom:18px;display:flex;align-items:center;justify-content:center;background:linear-gradient(110deg,#0b2a66 0%,#1d56c9 55%,#5ba3f5 100%);box-shadow:0 6px 18px rgba(20,60,140,.25)}
#cp-home .hd-ship{position:absolute;left:18px;bottom:6px;width:210px;max-width:38%;opacity:.95}
#cp-home .hd-quote{position:relative;color:#fff;font-size:17px;font-weight:700;text-align:center;line-height:1.45;margin-left:120px}
#cp-home .hd-wave-svg{position:absolute;right:22px;bottom:14px;width:70px}
@media(max-width:1100px){#cp-home .hd-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){#cp-home .hd-two{grid-template-columns:1fr}}
@media(max-width:600px){#cp-home .hd-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#cp-home .hd-greet{font-size:21px}#cp-home .hd-ves{display:none}#cp-home .hd-quote{margin-left:0;font-size:15px}#cp-home .hd-ship{opacity:.25;max-width:60%}#cp-home .hd-num{font-size:26px}}

/* form-date-fix */

.form-grid>.form-group{min-width:0}
.form-group input[type="date"]{min-width:0;width:100%;box-sizing:border-box}
.form-group>div[style*="flex-direction:column"]{min-width:0}
.form-group div[style*="display:flex"][style*="align-items:center"]{min-width:0}
/* the app's own 📅 picker replaces the browser one, so hide the duplicate native icon */
input[type="date"][onchange*="updateLinkedAgeBadge"]::-webkit-calendar-picker-indicator{display:none}
input[type="date"][onchange*="updateLinkedAgeBadge"]{cursor:pointer}

/* cpfs-photo-fix */

/* ── Cadet profile polish (desktop) ── */
@media(min-width:901px){
.cpfs-side{position:relative;grid-template-rows:auto auto auto;overflow-y:auto;padding:0 16px 16px;gap:10px;border-radius:18px}
.cpfs-side::before{content:"";position:absolute;left:0;right:0;top:0;height:96px;background:linear-gradient(135deg,#16337a 0%,#2f6cf6 62%,#6aaef7 100%)}
.cpfs-photo{width:136px;height:136px;min-height:136px;max-height:136px;aspect-ratio:auto;flex:none;margin:26px auto 0;border-radius:28px;border:4px solid var(--c-surface);box-shadow:0 8px 22px rgba(20,40,90,.28);z-index:1;font-size:40px}
.cpfs-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 12%}
.cpfs-head{text-align:center}
.cpfs-name{font-size:20px;letter-spacing:-.2px}
.cpfs-sub{display:inline-block;margin-top:6px;padding:3px 12px;border-radius:99px;background:var(--c-accent-glow);color:var(--c-accent);font-size:12.5px;font-weight:700}
.cpfs-chips{justify-content:center}
.cpfs-contacts{gap:6px}
.cpfs-ct{align-items:center;gap:12px;padding:8px 10px;border-radius:12px;background:var(--c-surface2);border:1px solid var(--c-border)}
.cpfs-ct svg{width:34px;height:34px;padding:8px;margin:0;border-radius:10px;background:var(--c-accent-glow);stroke:var(--c-accent)}
.cpfs-ct-k{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.cpfs-ct-v{font-size:13.5px;font-weight:600;margin-top:2px}
}
/* ── right side (all sizes) ── */
.cpfs-tabs{gap:4px;border-bottom:1px solid var(--c-border);padding:10px 0 12px}
.cpfs-tab{padding:8px 16px;border-radius:10px;border-bottom:0;margin-bottom:0;font-size:13.5px}
.cpfs-tab:hover{background:var(--c-surface2)}
.cpfs-tab.active{background:var(--c-accent-glow);color:var(--c-accent)}
.cpfs-sec{padding-top:18px}
.cpfs-sec+.cpfs-sec{border-top:0;margin-top:10px}
.cpfs-sectitle{border-bottom:0;padding:0 0 8px 12px;position:relative;font-size:15.5px}
.cpfs-sectitle::before{content:"";position:absolute;left:0;top:2px;bottom:10px;width:4px;border-radius:4px;background:linear-gradient(180deg,var(--c-accent),#6aaef7)}
.cpfs-row{padding:9px 12px;border-radius:10px;gap:16px;align-items:center}
.cpfs-row:nth-child(even){background:var(--c-surface2)}
.cpfs-row:hover{background:var(--c-accent-glow)}
.cpfs-row .cpfs-k{font-size:13px}
.cpfs-row .cpfs-v{font-weight:600}
.cpfs-entry{border-radius:16px;box-shadow:0 2px 10px rgba(20,40,90,.05)}
@media(max-width:900px){.cpfs-sectitle::before{display:none}.cpfs-sectitle{padding-left:0}}

/* ── Cadet profile + Home: mobile polish ── */
@media(max-width:900px){
.cpfs-side{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"photo" "head" "contacts";padding:0 16px 16px;gap:10px;overflow:hidden;border-radius:20px}
.cpfs-side::before{content:"";position:absolute;left:0;right:0;top:0;height:92px;background:linear-gradient(135deg,#16337a 0%,#2f6cf6 62%,#6aaef7 100%)}
.cpfs-photo{width:124px;height:124px !important;aspect-ratio:auto;margin:30px auto 0;border-radius:28px;border:4px solid var(--c-surface);box-shadow:0 8px 22px rgba(20,40,90,.28);z-index:1;font-size:38px}
.cpfs-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 12%}
.cpfs-head{text-align:center;padding-top:0;align-self:auto}
.cpfs-name{font-size:22px;letter-spacing:-.2px}
.cpfs-sub{display:inline-block;margin-top:6px;padding:3px 14px;border-radius:99px;background:var(--c-accent-glow);color:var(--c-accent);font-size:13px;font-weight:700}
.cpfs-chips{justify-content:center}
.cpfs-contacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;border-top:0}
.cpfs-ct{align-items:center;gap:10px;padding:10px;border-radius:14px;background:var(--c-surface2);border:1px solid var(--c-border)}
.cpfs-ct.wide{grid-column:1/-1}
.cpfs-ct svg{width:32px;height:32px;padding:7px;margin:0;border-radius:10px;background:var(--c-accent-glow);stroke:var(--c-accent);flex-shrink:0}
.cpfs-ct-k{font-size:10px;text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.cpfs-ct-v{font-size:13px;font-weight:600;margin-top:1px}
.cpfs-tabs{margin:0 10px !important;padding:10px 0 10px}
.cpfs-tab{padding:8px 14px !important}
.cpfs-row{padding:9px 10px}
}
@media(max-width:600px){
#cp-home .home-simple-head{display:none}
#cp-home .hd-head{margin-top:2px}
#cp-home .hd-s5{grid-column:1/-1}
#cp-home .hd-card{padding:14px}
#cp-home .home-search-v2{margin-bottom:16px !important}
#cp-home .home-search-v2 .search-subtitle{display:none}
#cp-home .home-search-v2 .search-header{padding:12px 16px !important}
#cp-home .home-search-v2 .search-icon-circle{width:34px !important;height:34px !important;font-size:15px !important}
#cp-home .home-search-v2 .search-title{font-size:16px !important}
#cp-home .home-search-v2 .search-body{padding:12px 14px !important}
#cp-home .hd-row{gap:10px}
#cp-home .hd-av{width:36px;height:36px}
}

/* sum-readable */

/* the Summary is a paper sheet: keep every cell light with dark text, also in dark mode */
.sum-sheet, .sum-sheet *{color-scheme:light}
.sum-sheet .sum-tbl td,.sum-sheet .sum-tbl th{background-color:#fff;color:#111}
.sum-sheet .sum-tbl .sum-k{background-color:#fafafa}
.sum-sheet .sum-ip .sum-k{background-color:#f0d6f0}
.sum-sheet .sum-exam td.sum-ex-code{background-color:#eef3fb;text-align:left;padding-left:10px;line-height:1.25}
.sum-sheet .sum-exam td.sum-ex-val{background-color:#fff}
.sum-sheet .sum-exam tr.sum-total td{background-color:#dbeafe}
.sum-sheet .sum-exam tr.sum-avr td{background-color:#bfe3f5 !important}
.sum-sheet .sum-company td.sum-k{background-color:#eaf2ff}
.sum-sheet .sum-company th,.sum-sheet .sum-sea th{background-color:#dbeafe}
.sum-sheet .sum-sea td{background-color:#f0fdf4}
.sum-sheet .sum-in{background:#fff;color:#111;border:1px solid #9ab}
.sum-sea-note{margin-top:8px;font-size:12px;color:#222;font-family:'Times New Roman',serif}


.sf-layout{display:flex;flex-direction:column;gap:6px}
.sf-sec{margin:2px 0 8px}
.sf-sec-t{font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--c-primary,#2f6cf6);padding:12px 0 8px;margin-bottom:4px;border-bottom:1px solid var(--c-border,#e1e8f4);display:flex;align-items:center;gap:8px}
.sf-sec .form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 14px}
.sf-sec .form-grid>.form-group{min-width:0}
.sf-sec .form-grid>.full{grid-column:1/-1}
@media(max-width:900px){.sf-sec .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.sf-sec .form-grid{grid-template-columns:1fr}}

.sf-tblwrap{overflow-x:auto;border:1px solid #c5d3ea;border-radius:12px;background:#fff;margin-top:6px}
.sf-tbl{width:100%;border-collapse:collapse;min-width:760px}
.sf-tbl th{background:linear-gradient(180deg,#eef4ff,#e2ecfe);color:#1e3a8a;font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:9px 6px;border-bottom:1px solid #b7c9e8;border-right:1px solid #c5d3ea;text-align:center;white-space:nowrap}
.sf-tbl td{padding:6px;border-bottom:1px solid #dbe5f3;border-right:1px solid #dbe5f3;vertical-align:middle;min-width:92px}
.sf-tbl tr:last-child td{border-bottom:0}.sf-tbl th:last-child,.sf-tbl td:last-child{border-right:0}
.sf-tbl tbody tr:nth-child(even) td{background:#f7faff}
.sf-tbl td.sf-rn,.sf-tbl th:first-child{min-width:0;width:34px;text-align:center;font-weight:800;color:#1e3a8a;background:#eef4ff}
.sf-tbl .form-group,.sf-tbl .af-cell{margin:0;padding:0}
.sf-tbl label{display:none !important}
.sf-tbl input,.sf-tbl select{width:100%;min-width:0;padding:7px 8px;font-size:12px}
.sf-tbl .form-group>div{gap:3px}
.sf-sec-t::before{content:"";width:4px;height:14px;border-radius:3px;background:linear-gradient(180deg,#2f6cf6,#38bdf8)}


/* compact profile side card — fits without scrolling */
@media(min-width:901px){
.cpfs-side{padding:0 12px 10px;gap:6px}
.cpfs-side::before{height:70px}
.cpfs-photo{width:96px;height:96px;min-height:96px;max-height:96px;margin:18px auto 0;border-radius:22px;font-size:32px}
.cpfs-name{font-size:17px}
.cpfs-sub{margin-top:4px;padding:2px 10px;font-size:11.5px}
.cpfs-chips{margin-top:6px}
.cpfs-contacts{gap:4px}
.cpfs-ct{gap:9px;padding:5px 8px;border-radius:10px}
.cpfs-ct svg{width:28px;height:28px;padding:6px;border-radius:8px}
.cpfs-ct-k{font-size:9.5px}
.cpfs-ct-v{font-size:12.5px;margin-top:0}
}
@media(min-width:901px) and (max-height:640px){
.cpfs-photo{width:78px;height:78px;min-height:78px;max-height:78px;margin-top:12px;font-size:26px}
.cpfs-side::before{height:56px}
.cpfs-ct{padding:3px 8px}
.cpfs-ct svg{width:24px;height:24px;padding:5px}
}
.cpfs-photo .cpfs-cam{width:26px;height:26px;font-size:12px;bottom:3px;right:3px;z-index:3;border:2px solid #fff}
.sum-sheet.sum-part table.sum-tbl:has(.sum-in) td{padding:3px 6px}
.sum-sheet.sum-part .sum-in{padding:3px 6px !important;font-size:12px}
/* ── Profile tab tables: thick borders, strong colours ── */
.sum-sheet .sum-section-lbl{display:flex;align-items:center;gap:8px;font-family:inherit;font-size:13px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#1e3a8a;margin:22px 0 10px}
.sum-sheet .sum-section-lbl::before{content:"";width:4px;height:16px;border-radius:3px;background:linear-gradient(180deg,#2f6cf6,#38bdf8)}
.sum-sheet table.sum-tbl{border-collapse:collapse;border:2.5px solid #1e3a8a;background:#fff;width:100%;font-family:inherit}
.sum-sheet table.sum-tbl th,.sum-sheet table.sum-tbl td{border:1.5px solid #4a6fb5;color:#0b1b3d;padding:9px 10px;font-size:13px;text-align:center;vertical-align:middle}
.sum-sheet table.sum-tbl th{background:#c9dcff;font-weight:800;font-size:11px;letter-spacing:.4px;text-transform:uppercase}
.sum-sheet table.sum-tbl td.sum-k{background:#dbe8ff;font-weight:800;text-align:left;width:38%}
.sum-sheet table.sum-tbl td.sum-v{background:#fff}
.sum-sheet table.sum-tbl tr.sum-ip td.sum-k{background:#ecd5f7}
.sum-sheet table.sum-tbl.sum-modern tr:nth-child(even) td{background:#eff5ff}
.sum-sheet table.sum-tbl.sum-company td.sum-co-name{font-weight:800;text-align:left}
.sum-sheet table.sum-tbl.sum-company th:first-child{text-align:left}
.sum-sheet table.sum-tbl.sum-sea{border-color:#14663a}
.sum-sheet table.sum-tbl.sum-sea th,.sum-sheet table.sum-tbl.sum-sea td{border-color:#3f8f5f}
.sum-sheet table.sum-tbl.sum-sea th{background:#bfe8cd;color:#0b3a1f}
.sum-sheet table.sum-tbl.sum-sea td{background:#fff}
.sum-sheet table.sum-tbl.sum-sea tr:nth-child(even) td{background:#edf9f1}
.sum-sheet table.sum-tbl td.sum-ex-code{background:#dbe8ff;font-weight:800;text-align:left;padding-left:12px}
.sum-sheet table.sum-tbl tr.sum-total td{background:#bcd3fb;font-weight:800}
.sum-sheet table.sum-tbl tr.sum-avr td{background:#9fc5ee !important;font-weight:800}
.sum-sheet table.sum-tbl .sum-in{width:100%;min-width:70px;border:1.5px solid #4a6fb5;border-radius:6px;padding:6px 8px;font:inherit;font-size:12.5px;background:#fff;color:#0b1b3d}
.sum-sheet table.sum-tbl .sum-in:focus{outline:2px solid #2f6cf6;outline-offset:0}
.sum-sheet table.sum-tbl tbody tr:hover td{filter:brightness(.98)}
@media(max-width:700px){.sum-sheet table.sum-modern{display:block;overflow-x:auto;white-space:nowrap}}
/* tab pages: content scrolls, Edit / Print stay at the bottom */
.cpfs-body:has(.sum-wrap){overflow:hidden;display:flex;flex-direction:column;padding-bottom:12px}
.sum-wrap{display:flex;flex-direction:column;flex:1;min-height:0}
.sum-scroll{flex:1;min-height:0;overflow:auto;padding:12px 2px 8px}
.sum-wrap>.sum-toolbar{margin:0;padding:10px 0 0;border-top:2px solid var(--c-border);flex-shrink:0}
.sum-sheet.sum-part{max-width:none}
.sum-sheet.sum-part .sum-section-lbl{display:none}
.sum-sheet.sum-part table.sum-tbl th,.sum-sheet.sum-part table.sum-tbl td{padding:6px 10px;font-size:12.5px}
.sum-sheet.sum-part{padding:10px 6px !important;box-shadow:none !important;border:0 !important;background:transparent !important}
.sum-sheet table.sum-tbl th,.sum-sheet table.sum-tbl td{font-family:var(--font,'Plus Jakarta Sans',system-ui,sans-serif)}
.sum-sheet.sum-part table.sum-company,.sum-sheet.sum-part table.sum-sea{table-layout:fixed}
.sum-sheet.sum-part table.sum-company th,.sum-sheet.sum-part table.sum-sea th{font-size:9.5px;padding:6px 3px;letter-spacing:.2px;word-break:break-word}
.sum-sheet.sum-part table.sum-company td,.sum-sheet.sum-part table.sum-sea td{padding:6px 3px;font-size:12px;word-break:break-word}
.sum-sheet.sum-part table.sum-company th:first-child,.sum-sheet.sum-part table.sum-company td:first-child{width:17%}
.sum-sheet.sum-part .sum-in{min-width:0 !important;padding:5px 4px !important}
.sum-two{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.sum-sheet table.sum-tbl.sum-kv td.sum-k{width:46%}
@media(max-width:860px){.sum-two{grid-template-columns:1fr}}
/* captain: keep the profile beside the sidebar instead of over it */
.cpfs-ov.cpfs-cap{left:232px !important;top:70px !important;z-index:9400 !important;border-radius:16px 0 0 0}
@media(max-width:860px){.cpfs-ov.cpfs-cap{left:0 !important;top:118px !important;border-radius:0}}

/* af-form-css */

.af-sec{margin:0 0 14px !important;padding:16px 18px 6px;border:1px solid var(--c-border);border-radius:16px;background:var(--c-surface)}
.af-sec-t{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;color:var(--c-text);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--c-border)}
.af-sec-n{background:var(--c-accent-glow);color:var(--c-accent);border-radius:8px;padding:2px 9px;font-size:12px;font-weight:800;letter-spacing:.3px}
.af-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2px 16px}
.af-cell{min-width:0}
.af-cell .form-group{margin-bottom:12px}
.af-cell textarea{min-height:90px;width:100%;box-sizing:border-box}
.af-subj{gap:0 32px}
.af-subj .form-group{display:flex !important;flex-direction:row !important;align-items:flex-end;gap:12px;margin-bottom:12px}
.af-subj .form-group label{flex:1 1 auto;margin:0 !important;text-align:left !important;text-transform:none !important;letter-spacing:0 !important;font-size:13px !important;font-weight:600 !important;line-height:1.3;padding-bottom:8px;border-bottom:1.5px dotted var(--c-border);min-width:0}
.af-subj .form-group input{flex:0 0 96px !important;width:96px !important;text-align:center;font-weight:800;font-size:15px;padding:8px 6px}
.af-subj .form-group input::placeholder{color:transparent}
.af-subj-sum{display:flex;justify-content:flex-end;align-items:baseline;gap:8px;padding:4px 4px 14px;font-size:13px;color:var(--c-muted)}
.af-subj-sum b{color:var(--c-text);font-size:17px;margin-left:2px}
@media(max-width:760px){.af-sec{padding:14px 12px 4px}.af-cell{grid-column:1/-1 !important}.af-subj .form-group input{width:80px}}

/* cute-sidenav */

/* ═══════════ Cute sidebar ═══════════ */
.sidenav{background:linear-gradient(180deg,#ffffff 0%,#f3f7ff 55%,#e7efff 100%);opacity:1}
body.dark .sidenav{background:linear-gradient(180deg,#0e1521 0%,#10203a 55%,#122650 100%);opacity:1}
.sidenav-header{padding:16px 14px 10px;border-bottom:0}
.sidenav-brand{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:800;letter-spacing:-.2px;text-transform:none;color:var(--c-text)}
body.dark .sidenav-brand{color:#fff}
.sidenav-brand::before{content:"⚓";flex:none;width:32px;height:32px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;background:linear-gradient(135deg,#2f6cf6,#6aaef7);box-shadow:0 6px 14px rgba(47,108,246,.38)}
.sidenav-toggle{width:30px;height:30px;border-radius:11px;background:var(--c-surface);box-shadow:0 2px 8px rgba(20,40,90,.08)}
.nav-section-label{display:flex;align-items:center;gap:8px;padding:14px 20px 6px;font-size:10px;font-weight:800;letter-spacing:1.5px;color:var(--c-muted)}
.nav-section-label::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--c-border),transparent)}
body.dark .nav-section-label{color:#8fa3c7}
/* items */
.nav-item{--sn-tint:rgba(236,72,153,.12);--sn-ink:#ec4899;margin:3px 10px;padding:6px 10px;gap:11px;border-left:0;border-radius:15px;font-size:12.5px;font-weight:600;color:var(--c-text2)}
.nav-item[data-cat="home"]{--sn-tint:rgba(47,108,246,.12);--sn-ink:#2f6cf6}
.nav-item[data-cat="found"]{--sn-tint:rgba(139,92,246,.14);--sn-ink:#8b5cf6}
.nav-item[data-cat="bsc"]{--sn-tint:rgba(14,165,233,.15);--sn-ink:#0ea5e9}
.nav-item[data-cat="direct"]{--sn-tint:rgba(20,184,166,.15);--sn-ink:#14b8a6}
.nav-item[data-cat="news"]{--sn-tint:rgba(99,102,241,.14);--sn-ink:#6366f1}
.nav-item[data-cat="apply"]{--sn-tint:rgba(34,197,94,.15);--sn-ink:#16a34a;--sn-grad:linear-gradient(135deg,#16a34a,#4ade80);--sn-glow:rgba(22,163,74,.32)}
.nav-item[data-cat="pending"]{--sn-tint:rgba(239,68,68,.13);--sn-ink:#ef4444;--sn-grad:linear-gradient(135deg,#ef4444,#f87171);--sn-glow:rgba(239,68,68,.3)}
.nav-item[data-cat="admin"]{--sn-tint:rgba(245,158,11,.17);--sn-ink:#d97706;--sn-grad:linear-gradient(135deg,#f59e0b,#fbbf24);--sn-glow:rgba(245,158,11,.32)}
.nav-icon{width:32px;height:32px;border-radius:11px;background:var(--sn-tint);color:var(--sn-ink);transition:transform .22s ease,background .2s}
.nav-icon svg{width:17px;height:17px;opacity:1}
.nav-mother .nav-icon,.nav-item .nav-icon{color:var(--sn-ink)}
.nav-item:hover{transform:none;background:color-mix(in srgb,var(--sn-ink) 8%,transparent);color:var(--c-text)}
.nav-item:hover .nav-icon{transform:scale(1.1) rotate(-5deg)}
body.dark .nav-item{color:#dbe5f7}
body.dark .nav-item:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav-mother .nav-label{font-size:12px;letter-spacing:.05em;font-weight:700}
.nav-caret{opacity:.55;transition:transform .25s,opacity .2s}
.nav-item:hover .nav-caret{opacity:1}
/* active = glowing gradient pill */
.nav-item.active,body:not(.dark) .nav-item.active,body.dark .nav-item.active{background:var(--sn-grad,linear-gradient(135deg,#2f6cf6,#5b9bf8)) !important;color:#fff !important;box-shadow:0 8px 18px var(--sn-glow,rgba(47,108,246,.32));font-weight:700}
.nav-item.active .nav-icon,.nav-item.active[data-cat] .nav-icon{background:rgba(255,255,255,.24);color:#fff !important}
.nav-item.active::before{display:none !important}
.nav-item.active .nav-count{background:rgba(255,255,255,.28);color:#fff}
.nav-item.cust-active{box-shadow:0 8px 18px rgba(192,132,252,.3) !important}
/* count pills */
.nav-count{background:var(--c-surface3);color:var(--c-text2);border-radius:99px;padding:2px 9px;font-size:10px;font-weight:800}
body.dark .nav-count{color:rgba(255,255,255,.7)}
/* batches inside a folder */
.nav-group-body{margin:2px 8px 8px 26px;padding:0 0 0 8px;border-left:2px dotted var(--c-border)}
.nav-group-body .nav-item{margin:3px 0 !important;padding:4px 8px;gap:8px;font-size:12px;border-radius:12px}
.nav-group-body .nav-icon{width:26px;height:26px;border-radius:9px}
.nav-group-body .nav-icon svg{width:14px;height:14px}
.nav-empty-note{margin:4px 0;padding:9px 10px !important;border:1.5px dashed var(--c-border);border-radius:12px;background:var(--c-surface2);font-style:normal !important;font-size:11px !important;line-height:1.35;text-align:center}
/* user card */
.nav-bottom-fixed{padding:0 0 8px}
.side-profile-btn{border-radius:16px !important;background:var(--c-surface) !important;border:1px solid var(--c-border) !important;box-shadow:0 6px 16px rgba(20,40,90,.08)}
body.dark .side-profile-btn{background:rgba(255,255,255,.07) !important;border-color:rgba(255,255,255,.1) !important;box-shadow:none}
/* collapsed rail: just the icon tiles */
.sidenav.collapsed .nav-item,.sidenav.auto-collapsed:not(:hover) .nav-item{margin:4px 8px;padding:3px 0;background:transparent !important;box-shadow:none !important}
.sidenav.collapsed .nav-item.active .nav-icon,.sidenav.auto-collapsed:not(:hover) .nav-item.active .nav-icon{background:var(--sn-grad,linear-gradient(135deg,#2f6cf6,#5b9bf8));box-shadow:0 6px 14px var(--sn-glow,rgba(47,108,246,.35))}
.sidenav.collapsed .nav-section-label::after,.sidenav.auto-collapsed:not(:hover) .nav-section-label::after{display:none}
.sidenav.collapsed .sidenav-brand::before{display:none}

/* ── rail (collapsed / hover-mode): square tiles instead of squeezed ovals ── */
.sidenav.collapsed .nav-icon,.sidenav.auto-collapsed:not(:hover) .nav-icon{width:38px !important;height:38px !important;border-radius:13px;margin:0 !important;font-size:16px}
.sidenav.collapsed .nav-item,.sidenav.auto-collapsed:not(:hover) .nav-item{margin:5px 8px !important;padding:0 !important;height:38px;justify-content:center}
.sidenav.collapsed .nav-group-body .nav-item,.sidenav.auto-collapsed:not(:hover) .nav-group-body .nav-item{margin:5px 8px !important}
.sidenav.collapsed .nav-group-body .nav-icon,.sidenav.auto-collapsed:not(:hover) .nav-group-body .nav-icon{width:38px !important;height:38px !important}
.sidenav.collapsed .nav-empty-note,.sidenav.auto-collapsed:not(:hover) .nav-empty-note{display:none}
.sidenav.collapsed .nav-item:hover .nav-icon,.sidenav.auto-collapsed:not(:hover) .nav-item:hover .nav-icon{transform:scale(1.08);background:color-mix(in srgb,var(--sn-ink) 24%,transparent)}
.sidenav.collapsed .nav-item.active:hover .nav-icon,.sidenav.auto-collapsed:not(:hover) .nav-item.active:hover .nav-icon{background:var(--sn-grad,linear-gradient(135deg,#2f6cf6,#5b9bf8))}
.sidenav.collapsed .side-profile-btn,.sidenav.auto-collapsed:not(:hover) .side-profile-btn{background:transparent !important;border-color:transparent !important;box-shadow:none !important;padding:4px !important;justify-content:center}
/* hover-expanded: normal tile sizes again */
.sidenav.auto-collapsed:hover .nav-icon{width:32px !important;height:32px !important;border-radius:11px;margin:0 !important}
.sidenav.auto-collapsed:hover .nav-group-body .nav-icon{width:26px !important;height:26px !important;border-radius:9px}
.sidenav.auto-collapsed:hover .nav-item{margin:3px 10px !important;height:auto;padding:6px 10px !important}
.sidenav.auto-collapsed:hover .nav-group-body .nav-item{margin:3px 0 !important;padding:4px 8px !important}
.sidenav.collapsed .nav-group-body,.sidenav.auto-collapsed:not(:hover) .nav-group-body{margin:0 !important;padding:0 !important;border:0 !important}

/* ══════════ SIDEBAR + TOPBAR — navy / bright-blue theme (matches the reference design, both modes) ══════════ */
html body,html body.dark{--topbar-bg:linear-gradient(90deg,#052758 0%,#06316d 60%,#0a4086 100%)}
html body .topbar{box-shadow:0 4px 18px rgba(3,20,55,.32);border-bottom:1px solid rgba(255,255,255,.08)}
html body .sidenav{background:linear-gradient(180deg,#062a5e 0%,#052758 55%,#041f48 100%);border-right:1px solid rgba(255,255,255,.06);box-shadow:4px 0 22px rgba(3,20,55,.35)}
html body .sidenav-header{border-bottom-color:rgba(255,255,255,.08)}
html body .sidenav-brand{color:#fff}
html body .sidenav-toggle{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#cfe0fa}
html body .sidenav-toggle:hover{background:rgba(255,255,255,.18);color:#fff}
html body .sidenav .nav-section-label{color:#8fb0e6;letter-spacing:1.4px;font-weight:700}
html body .sidenav .nav-section-label::after{display:none !important}
/* rows: plain outline icon + label, no tinted tiles */
html body .sidenav .nav-item{color:#e3edfc;background-color:transparent;box-shadow:none;border-radius:10px;font-weight:600}
html body .sidenav .nav-item:hover{background-color:rgba(255,255,255,.07);color:#fff;transform:none}
html body .sidenav .nav-item .nav-icon,html body .sidenav .nav-mother .nav-icon{background:transparent !important;box-shadow:none !important;color:#e9f1ff;width:22px;height:22px;border-radius:0}
html body .sidenav .nav-item .nav-icon svg{stroke:currentColor;stroke-width:1.8;opacity:1;filter:none;width:19px;height:19px}
html body .sidenav .nav-item:hover .nav-icon{transform:none}
html body .sidenav .nav-mother .nav-label{color:#e3edfc}
html body .sidenav .nav-mother:hover{background:rgba(255,255,255,.07)}
html body .sidenav .nav-mother .nav-caret,html body .sidenav .nav-mother:hover .nav-caret{color:#8fb0e6}
/* right-hand chevron on single rows */
html body .sidenav .nav-item[data-cat="home"],html body .sidenav .nav-item[data-cat="news"],html body .sidenav .nav-item[data-cat="apply"],html body .sidenav .nav-item[data-cat="pending"],html body .sidenav .nav-item[data-cat="admin"],html body .sidenav .nav-item[data-cat="recyclebin"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fb0e6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:14px}
/* active = bright blue pill */
html body .sidenav .nav-item.active,html body .sidenav .nav-item.active[data-cat]{background-color:#0a5fd0 !important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E"),linear-gradient(90deg,#0a58c4,#0f6fe6) !important;background-repeat:no-repeat,no-repeat !important;background-position:right 10px center,0 0 !important;background-size:14px,100% 100% !important;color:#fff !important;box-shadow:0 8px 20px rgba(10,88,196,.45) !important;font-weight:700}
html body .sidenav .nav-item.active .nav-label{color:#fff}
html body .sidenav .nav-item.active .nav-icon{background:transparent !important;color:#fff !important;box-shadow:none !important}
html body .sidenav .nav-item.active .nav-icon svg{stroke:#fff;stroke-width:2;filter:none}
html body .sidenav .nav-item.active::before{display:none}
/* count badges */
html body .sidenav .nav-count{background:#0a5fd0;color:#fff;border-radius:999px;padding:2px 9px;font-size:10.5px;font-weight:700}
html body .sidenav .nav-item.active .nav-count{background:rgba(255,255,255,.26)}
/* batch rows inside a folder = outlined cards */
html body .sidenav .nav-group-body,html body .sidenav.auto-collapsed:hover .nav-group-body{border:0 !important;margin:2px 10px 8px 10px;padding:0}
html body .sidenav .nav-group-body .nav-item{background-color:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:12px;margin:5px 0 !important;padding:8px 10px}
html body .sidenav .nav-group-body .nav-item:hover{background-color:rgba(255,255,255,.1)}
html body .sidenav .nav-group-body .nav-item.active{border-color:transparent}
html body .sidenav .nav-empty-note{background:rgba(255,255,255,.04);border:1.5px dashed rgba(255,255,255,.22);color:#b8cdf0 !important}
html body .sidenav .nav-divider,html body .sidenav .nav-footer{border-color:rgba(255,255,255,.09)}
html body .sidenav .nav-footer-btn{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:#e3edfc}
html body .sidenav .nav-footer-btn:hover{background:rgba(255,255,255,.15);color:#fff}
/* user card */
html body .sidenav .side-profile-btn{background:#0a3f82 !important;border:1px solid rgba(255,255,255,.08) !important;border-radius:14px !important;box-shadow:none !important}
html body .sidenav .side-profile-btn:hover{background:#0d4a96 !important}
html body .sidenav .side-profile-avatar{background:#297bda;color:#fff;box-shadow:none}
html body .sidenav .side-profile-name{color:#fff;font-weight:700}
html body .sidenav .side-profile-role{color:#ffc857}
html body .sidenav .side-profile-caret{color:#cfe0fa;transform:rotate(90deg)}
html body .sidenav .side-profile-caret.up{transform:rotate(-90deg)}
/* collapsed rail: icon tiles, active one is the blue pill */
html body .sidenav.collapsed .nav-item,html body .sidenav.auto-collapsed:not(:hover) .nav-item{background-image:none !important;background-color:transparent !important;box-shadow:none !important}
html body .sidenav.collapsed .nav-item.active,html body .sidenav.auto-collapsed:not(:hover) .nav-item.active{background-image:linear-gradient(135deg,#0a58c4,#0f6fe6) !important;background-color:#0a5fd0 !important;box-shadow:0 6px 14px rgba(10,88,196,.45) !important}
html body .sidenav.collapsed .nav-icon,html body .sidenav.auto-collapsed:not(:hover) .nav-icon{width:38px !important;height:38px !important}
html body .sidenav.collapsed .nav-item .nav-icon svg,html body .sidenav.auto-collapsed:not(:hover) .nav-item .nav-icon svg{width:20px;height:20px}
html body .sidenav.collapsed .side-profile-btn,html body .sidenav.auto-collapsed:not(:hover) .side-profile-btn{background:transparent !important;border-color:transparent !important}

/* ══════════ Sidebar runs the full height of the window (brand lives in the sidebar only) ══════════ */
body{--sbw:220px}
@media (max-width:1024px){body{--sbw:180px}}
body:has(.sidenav.collapsed),body:has(.sidenav.auto-collapsed){--sbw:56px}
@media (min-width:641px){
  html body .app-body{overflow:visible}
  html body .topbar{padding-left:calc(var(--sbw) + 18px);transition:padding-left .42s cubic-bezier(.4,0,.2,1),background var(--transition)}
  html body .topbar-title{display:none}
  html body .sidenav{margin-top:-54px;height:calc(100% + 54px)}
  html body .sidenav-header{height:54px;box-sizing:border-box;padding-top:0;padding-bottom:0;display:flex;align-items:center}
}
@media (min-width:1025px){
  html body .sidenav.auto-collapsed{top:-54px;margin-top:0;height:calc(100% + 54px)}  /* absolute overlay: top does the lift, so no extra negative margin */
}
/* ══════════ HOME — flat wave wallpaper + frosted cards ══════════ */
#cp-home{position:relative}
#cp-home.active{animation-name:fadeIn}  /* no lingering transform */
#cp-home .home-inner{position:relative;z-index:1}
.home-bg{--w1:#d3e8f8;--w2:#bddbf3;--w3:#a6cdee;--cl:#ffffff;
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:linear-gradient(180deg,#f4f9fe 0%,#e9f3fc 55%,#e0eefa 100%)}
body.dark .home-bg{--w1:#0e2c60;--w2:#113572;--w3:#16408a;--cl:#6f95d6;background:linear-gradient(180deg,#071733 0%,#0a1c3f 60%,#0b2350 100%)}
.home-bg .hb-cloud{position:absolute;background:var(--cl);border-radius:60px;opacity:.75}
.home-bg .hb-cloud::before,.home-bg .hb-cloud::after{content:'';position:absolute;background:inherit;border-radius:50%}
.home-bg .hb-cloud.c1{width:140px;height:34px;right:22%;top:120px;animation:hbCloud 70s ease-in-out infinite alternate}
.home-bg .hb-cloud.c1::before{width:60px;height:60px;left:22px;top:-26px}.home-bg .hb-cloud.c1::after{width:44px;height:44px;left:70px;top:-16px}
.home-bg .hb-cloud.c2{width:100px;height:26px;right:44%;top:200px;opacity:.55;animation:hbCloud 90s ease-in-out infinite alternate-reverse}
.home-bg .hb-cloud.c2::before{width:44px;height:44px;left:16px;top:-20px}.home-bg .hb-cloud.c2::after{width:32px;height:32px;left:52px;top:-12px}
body.dark .home-bg .hb-cloud{opacity:.06}
@keyframes hbCloud{from{transform:translateX(-40px)}to{transform:translateX(50px)}}
.home-bg .hb-waves{position:absolute;left:0;bottom:0;width:200%;height:300px;display:block;will-change:transform}
.home-bg .hw1{height:330px;animation:hbWave 60s linear infinite;fill:var(--w1)}
.home-bg .hw2{height:270px;animation:hbWave 42s linear infinite reverse;fill:var(--w2)}
.home-bg .hw3{height:210px;animation:hbWave 30s linear infinite;fill:var(--w3)}
@keyframes hbWave{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.home-bg *{animation:none !important}}
@media (max-width:700px){.home-bg .hb-waves{height:180px !important}}
/* light mode: white top bar (search + bell sit on white); sidebar stays blue */
html body:not(.dark) .topbar{background:#fff;box-shadow:0 1px 0 #e3eaf6,0 8px 22px rgba(30,60,120,.06);border-bottom:1px solid #e3eaf6}
html body:not(.dark) .topbar-title{color:#0b2a5c}
html body:not(.dark) .topbar-anchor{filter:none}
html body:not(.dark) .tb-search-input{background:#f1f5fb;border-color:#dbe5f3;color:#152036}
html body:not(.dark) .tb-search-input::placeholder{color:#7a8aa6}
html body:not(.dark) .tb-search-input:focus{background:#fff;border-color:#2f6cf6;box-shadow:0 0 0 3px rgba(47,108,246,.18)}
html body:not(.dark) .tb-search-clear{background:#e3eaf6;color:#334155}
html body:not(.dark) .tb-search-btn{color:#0b2a5c}
html body:not(.dark) .nav-total-stat.tb-total,html body:not(.dark) .tb-total{background:#eef3fc !important;border:1px solid #dbe5f3 !important;color:#0b2a5c !important;box-shadow:none}
html body:not(.dark) #topbar-profile-btn{background:#eef3fc !important;border-color:#dbe5f3 !important}
/* brand line */
#cp-home .home-simple-head{display:flex !important;justify-content:flex-start;gap:8px;padding:14px 0 6px}
#cp-home .hsh-anchor{font-size:22px}
#cp-home .hsh-name{font-family:var(--font);font-size:17px;font-weight:800;letter-spacing:.2px}
#cp-home .hd-greet{font-size:30px}
/* stat cards */
#cp-home .hd-stat{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.95);border-radius:16px;box-shadow:0 10px 28px rgba(30,80,160,.12);padding:16px 16px 14px;cursor:default}
#cp-home .hd-stat[class*="hd-s"]{background-image:none}
#cp-home .hd-stat::after{content:'';position:absolute;top:18px;right:14px;width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") no-repeat center/contain;opacity:.8}
#cp-home .hd-ic{--ic-fg:#2f6cf6;width:42px;height:42px;border-radius:50%;box-shadow:none;background:color-mix(in srgb,var(--ic-fg) 14%,#fff) !important;color:var(--ic-fg);margin-bottom:12px}
#cp-home .hd-ic svg,#cp-home .hd-ch-ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#cp-home .hd-lbl{font-size:13px;font-weight:700}
#cp-home .hd-num{font-size:34px}
#cp-home .hd-stat .hd-note{color:var(--c-text2);display:flex;align-items:center;font-size:11.5px}
#cp-home .hd-stat .hd-note::before{content:'';width:7px;height:7px;border-radius:50%;margin-right:6px;background:var(--dot,#94a3b8);flex:none}
#cp-home .hd-s1 .hd-note{color:#16a34a}
#cp-home .hd-s1 .hd-note::before{display:none}
#cp-home .hd-s1 .hd-note{display:block}
html body .sidenav.collapsed .nav-group-body .nav-item,html body .sidenav.auto-collapsed:not(:hover) .nav-group-body .nav-item{border-color:transparent;background-color:transparent}
#cp-home .hd-s2{--dot:#22c55e}#cp-home .hd-s3{--dot:#f59e0b}#cp-home .hd-s4{--dot:#8b5cf6}#cp-home .hd-s5{--dot:#ef4444}
/* lower cards */
#cp-home .hd-card{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.95);border-radius:16px;box-shadow:0 10px 28px rgba(30,80,160,.12)}
#cp-home .hd-card-h{display:flex;align-items:center;gap:10px}
#cp-home .hd-ch-ic{--ic-fg:#2f6cf6;display:inline-flex;width:30px;height:30px;border-radius:9px;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ic-fg) 13%,#fff);color:var(--ic-fg)}
#cp-home .hd-ch-ic svg{width:17px;height:17px}
#cp-home .hd-viewall{margin-left:auto;font-size:12px;font-weight:700;color:#2f6cf6;cursor:pointer;text-decoration:none}
#cp-home .hd-viewall:hover{text-decoration:underline}
body.dark #cp-home .hd-stat,body.dark #cp-home .hd-card{background:rgba(15,40,88,.78);border-color:rgba(120,170,255,.2);box-shadow:0 10px 28px rgba(0,0,0,.3)}
body.dark #cp-home .hd-ic{background:color-mix(in srgb,var(--ic-fg) 24%,transparent) !important}
body.dark #cp-home .hd-ch-ic{background:color-mix(in srgb,var(--ic-fg) 24%,transparent)}
body.dark #cp-home .hd-s1 .hd-note{color:#4ade80}
body.dark #cp-home .hd-viewall{color:#7fb0ff}

/* tb-search-css */

.tb-search{flex:1;max-width:470px;margin:0 20px;position:relative;align-items:center}
.tb-search-ic{position:absolute;left:12px;font-size:13px;opacity:.75;pointer-events:none}
.tb-search-input{width:100%;height:34px;box-sizing:border-box;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.10);color:#fff;padding:0 34px 0 34px;font-size:13px;font-family:inherit;outline:none;transition:background .2s,border-color .2s,box-shadow .2s}
.tb-search-input::placeholder{color:rgba(255,255,255,.58)}
.tb-search-input:focus{background:rgba(255,255,255,.18);border-color:rgba(106,174,247,.85);box-shadow:0 0 0 3px rgba(47,108,246,.28)}
.tb-search-clear{position:absolute;right:7px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:#fff;font-size:11px;cursor:pointer;line-height:22px;padding:0}
.tb-search-btn{display:none;background:transparent;border:0;color:#fff;font-size:18px;cursor:pointer;padding:4px 6px;line-height:1}
.hs-panel{position:fixed;top:58px;left:50%;transform:translateX(-50%);width:min(1100px,calc(100vw - 24px));max-height:calc(100vh - 78px);overflow:auto;background:var(--c-surface);color:var(--c-text);border:1px solid var(--c-border);border-radius:18px;box-shadow:0 26px 70px -14px rgba(0,0,0,.5);z-index:950}
.hs-panel-h{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:var(--c-surface);border-bottom:1px solid var(--c-border);font-weight:800;font-size:13px}
.hs-panel-h button{border:0;background:var(--c-surface3);color:var(--c-text2);border-radius:10px;padding:5px 12px;font-size:12px;font-weight:700;cursor:pointer}
.hs-panel #home-search-results{margin-top:0;padding:14px 18px 18px}
@media(max-width:700px){
.tb-search{display:none !important;position:absolute;left:8px;right:8px;top:6px;height:36px;margin:0;max-width:none;z-index:60}
.tb-search.open{display:flex !important}
.tb-search-input,.tb-search-input:focus{height:36px;background:#0b1a3d;border-color:rgba(106,174,247,.8)}
.tb-search.open{background:#0b1a3d;border-radius:12px}
.tb-search-btn.show{display:flex}
.hs-panel{top:52px;width:calc(100vw - 12px);border-radius:14px}
}

/* topbar-float-css */

/* ══════════ Floating top bar — sits slightly apart from the page background (desktop/tablet only) ══════════ */
@media (min-width:641px){
  html body .topbar{
    background:transparent !important;
    box-shadow:none !important;
    border-bottom:0 !important;
    padding-left:calc(var(--sbw) + 32px) !important;
    padding-right:28px !important;
  }
  html body .topbar::before{
    content:"";
    position:absolute;
    z-index:-1;
    top:5px; bottom:5px;
    left:calc(var(--sbw) + 14px);
    right:14px;
    border-radius:16px;
    background:var(--topbar-bg);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 6px 22px rgba(3,20,55,.28),0 1px 3px rgba(3,20,55,.18);
    transition:left .42s cubic-bezier(.4,0,.2,1),background var(--transition);
    pointer-events:none;
  }
  html body:not(.dark) .topbar::before{
    background:#fff;
    border:1px solid #e3eaf6;
    box-shadow:0 8px 24px rgba(30,60,120,.14),0 2px 6px rgba(30,60,120,.07);
  }
}
/* ══════════ Curved sidebar edges (desktop/tablet) — layout & behaviour unchanged ══════════ */
@media (min-width:641px){
  html body .sidenav{
    border-radius:0 16px 16px 0;      /* top-right + bottom-right curve */
    border-right:1px solid rgba(255,255,255,.10);
    box-shadow:6px 0 26px rgba(3,20,55,.30);
    overflow:hidden;                   /* clips content to the curve */
  }
  html body .sidenav.auto-collapsed:hover{
    box-shadow:10px 0 34px rgba(3,20,55,.38);
  }
}
/* ══════════ Cadet portal — redesigned "My Profile" dashboard ══════════ */
.cp-body:has(.cpx){max-width:1040px}
.cpx{display:flex;flex-direction:column;gap:16px}
.cpx-hero{position:relative;overflow:hidden;display:flex;align-items:center;gap:22px;padding:26px 28px;border-radius:22px;color:#fff;background:linear-gradient(120deg,#061f4a 0%,#0a3d8f 55%,#1d6fe0 100%);box-shadow:0 14px 34px rgba(6,31,74,.28)}
.cpx-hero::before{content:"";position:absolute;right:-70px;top:-90px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.07)}
.cpx-hero::after{content:"";position:absolute;right:90px;bottom:-120px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.05)}
.cpx-hero>*{position:relative;z-index:1}
.cpx-photo{width:112px;height:112px;border-radius:28px;border:4px solid rgba(255,255,255,.92);background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:38px;font-weight:800;overflow:hidden;flex-shrink:0;box-shadow:0 10px 24px rgba(0,0,0,.28)}
.cpx-photo img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;display:block}
.cpx-id{flex:1;min-width:0}
.cpx-name{font-family:var(--font-display);font-size:26px;font-weight:800;line-height:1.15;letter-spacing:-.3px;word-break:break-word}
.cpx-sub{margin-top:5px;font-size:13.5px;opacity:.85}
.cpx-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cpx-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);font-size:12px;font-weight:700}
.cpx-chip i{width:8px;height:8px;border-radius:50%;background:#4ade80}
.cpx-chip.amber i{background:#fbbf24}.cpx-chip.blue i{background:#60a5fa}.cpx-chip.grey i{background:#cbd5e1}
.cpx-hbtn{background:#fff;color:#0a3d8f;border:0;border-radius:12px;padding:10px 18px;font-size:13px;font-weight:800;cursor:pointer;font-family:var(--font);box-shadow:0 6px 16px rgba(0,0,0,.2);white-space:nowrap;transition:transform .15s}
.cpx-hbtn:hover{transform:translateY(-1px)}
.cpx-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px}
.cpx-stat{background:var(--c-surface);border:1px solid var(--c-border);border-radius:16px;padding:14px 16px;box-shadow:0 2px 10px rgba(22,34,63,.05);min-width:0}
.cpx-stat-k{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--c-muted)}
.cpx-stat-v{margin-top:6px;font-size:16px;font-weight:800;color:var(--c-text);word-break:break-word;line-height:1.25}
.cpx-stat-v.good{color:#16a34a}.cpx-stat-v.warn{color:#d97706}
.cpx-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;align-items:start}
.cpx-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.cpx-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:18px;padding:6px 0;box-shadow:0 2px 12px rgba(22,34,63,.05);overflow:hidden}
.cpx-ch{display:flex;align-items:center;gap:9px;padding:13px 18px 11px;font-size:14px;font-weight:800;color:var(--c-text)}
.cpx-ch .ic{width:28px;height:28px;border-radius:9px;background:rgba(47,108,246,.12);display:flex;align-items:center;justify-content:center;font-size:14px}
.cpx-row{display:flex;gap:12px;padding:10px 18px;border-top:1px solid var(--c-border);align-items:flex-start}
.cpx-ric{width:22px;text-align:center;font-size:15px;flex-shrink:0;opacity:.9;padding-top:1px}
.cpx-rb{min-width:0;flex:1}
.cpx-rk{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--c-muted)}
.cpx-rv{margin-top:2px;font-size:14px;font-weight:600;color:var(--c-text);word-break:break-word}
.cpx-ring{--p:0;width:92px;height:92px;border-radius:50%;background:conic-gradient(#2f6cf6 calc(var(--p)*1%),var(--c-border) 0);display:flex;align-items:center;justify-content:center;margin:6px auto 4px}
.cpx-ring span{width:70px;height:70px;border-radius:50%;background:var(--c-surface);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:var(--c-text)}
.cpx-pad{padding:4px 18px 14px}
.cpx-muted{font-size:12.5px;color:var(--c-muted);line-height:1.55}
.cpx-miss{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cpx-miss span{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:14px;background:rgba(217,119,6,.12);color:#b45309}
.cpx-steps{padding:4px 18px 14px;display:flex;flex-direction:column}
.cpx-step{display:flex;gap:12px;position:relative;padding-bottom:16px}
.cpx-step:last-child{padding-bottom:0}
.cpx-step::before{content:"";position:absolute;left:11px;top:24px;bottom:0;width:2px;background:var(--c-border)}
.cpx-step:last-child::before{display:none}
.cpx-dot{width:24px;height:24px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;background:var(--c-border);color:var(--c-muted);z-index:1}
.cpx-step.done .cpx-dot{background:#16a34a;color:#fff}
.cpx-step.active .cpx-dot{background:#f59e0b;color:#fff;box-shadow:0 0 0 4px rgba(245,158,11,.2)}
.cpx-st{font-size:13px;font-weight:700;color:var(--c-text)}
.cpx-sd{font-size:12px;color:var(--c-muted);margin-top:1px}
.cpx-bar{height:10px;border-radius:8px;background:var(--c-border);overflow:hidden;margin:10px 0 6px}
.cpx-bar>i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,#2f6cf6,#38bdf8)}
.cpx-barlbl{display:flex;justify-content:space-between;font-size:12px;color:var(--c-muted);font-weight:600}
.cpx-note{font-size:12px;color:var(--c-muted);text-align:center;padding:4px 10px 10px}
.cpx-zoom{position:fixed;inset:0;z-index:99999;background:rgba(3,12,30,.82);display:flex;align-items:center;justify-content:center;padding:20px;cursor:zoom-out}
.cpx-zoom img{max-width:min(92vw,520px);max-height:88vh;border-radius:20px;box-shadow:0 24px 70px rgba(0,0,0,.5)}
@media (max-width:820px){.cpx-grid{grid-template-columns:1fr}}
@media (max-width:640px){
  .cpx-hero{flex-direction:column;text-align:center;padding:22px 16px}
  .cpx-photo{width:96px;height:96px;border-radius:24px;font-size:32px}
  .cpx-name{font-size:22px}.cpx-chips{justify-content:center}
  .cpx-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* captain-css */

/* ══════════ Captain portal (view-only) ══════════ */
#captain-portal{position:fixed;inset:0;z-index:9000;display:none;background:#eef3fb;font-family:var(--font,'Plus Jakarta Sans',system-ui,sans-serif);color:#152036;overflow:hidden}
#captain-portal *{box-sizing:border-box}
.cap-sb{width:232px;flex-shrink:0;background:linear-gradient(180deg,#06285c,#041d44);color:#cfe0fa;padding:18px 12px;display:flex;flex-direction:column;gap:4px;border-radius:0 16px 16px 0;box-shadow:6px 0 26px rgba(3,20,55,.28);z-index:3}
.cap-br{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:18px;padding:4px 8px 4px}
.cap-br i{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,#2f6cf6,#38bdf8);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:18px}
.cap-role{font-size:11.5px;color:#8fb0e6;padding:0 10px 12px;font-weight:600}
.cap-sec{font-size:10.5px;letter-spacing:1.3px;font-weight:700;color:#7ea3df;padding:14px 12px 6px}
.cap-ni{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;font-size:13.5px;font-weight:600;cursor:pointer;transition:background .2s,transform .2s;border:0;background:none;color:inherit;font-family:inherit;text-align:left;width:100%}
.cap-ni:hover{background:rgba(255,255,255,.08);transform:translateX(2px)}
.cap-ni.on{background:#1b63e0;color:#fff;box-shadow:0 6px 16px rgba(27,99,224,.4)}
.cap-ni svg{flex-shrink:0}
.cap-sp{flex:1}
.cap-me{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border-radius:14px;padding:10px}
.cap-me b{display:block;color:#fff;font-size:13px}.cap-me span{font-size:11px;color:#8fb0e6}
.cap-main{flex:1;min-width:0;display:flex;flex-direction:column;height:100%}
.cap-tp{margin:10px 16px 0 14px;background:#fff;border-radius:16px;padding:9px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 8px 22px rgba(30,60,120,.11);flex-shrink:0}
.cap-sr{flex:1;max-width:480px;display:flex;align-items:center;gap:8px;background:#f1f5fb;border:1px solid #dbe5f3;border-radius:12px;padding:8px 12px}
.cap-sr input{border:0;background:none;outline:none;font:inherit;font-size:13px;width:100%;color:#152036}
.cap-body{flex:1;overflow-y:auto;padding:6px 20px 90px 18px}
.cap-in{animation:capIn .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes capIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.cap-ttl{font-size:26px;font-weight:800;margin:20px 2px 2px;letter-spacing:-.4px}
.cap-sub{font-size:12.5px;color:#616e8a}
.cap-cd{background:#fff;border-radius:18px;padding:18px;box-shadow:0 2px 12px rgba(22,34,63,.06);transition:transform .2s,box-shadow .2s}
.cap-cd.hv:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(22,34,63,.12)}
.cap-st{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:16px}
.cap-st .cap-cd{cursor:pointer}
.cap-num{font-size:30px;font-weight:800;line-height:1.2}
.cap-g2{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:14px;margin-top:14px}
.cap-h{font-size:15px;font-weight:800;margin:0 0 12px}
.cap-pl{font-size:11px;font-weight:700;padding:3px 10px;border-radius:12px;white-space:nowrap;display:inline-block}
.cap-pl.g{background:#e3f6ea;color:#15803d}.cap-pl.r{background:#fde8e8;color:#b91c1c}.cap-pl.a{background:#fff1d6;color:#b45309}.cap-pl.b{background:#e2ecfe;color:#1d4ed8}.cap-pl.n{background:#eef1f6;color:#5b6a86}
.cap-fr{display:grid;grid-template-columns:92px 1fr 40px;gap:10px;align-items:center;font-size:13px;margin:9px 0}
.cap-bar{height:10px;border-radius:6px;background:#e8eef9;overflow:hidden}
.cap-bar i{display:block;height:100%;border-radius:6px;transform-origin:left;animation:capGrow .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes capGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.cap-rw{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid #e7edf6;font-size:13px}
.cap-rw:first-child{border-top:0}
.cap-at{cursor:pointer;border-radius:10px;transition:background .15s}.cap-at:hover{background:#f3f7fe}
.cap-av{width:38px;height:38px;border-radius:50%;background:#dbe8ff;color:#1d4ed8;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.cap-av img{width:100%;height:100%;object-fit:cover}
.cap-tb{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:14px 0 10px}
.cap-chip{font:inherit;font-size:12px;font-weight:700;padding:7px 13px;border-radius:16px;background:#fff;border:1px solid #dbe5f3;color:#44516e;cursor:pointer;transition:all .18s}
.cap-chip:hover{border-color:#9cc0f7}.cap-chip.on{background:#1b63e0;border-color:#1b63e0;color:#fff;transform:scale(1.03)}
.cap-sel{font:inherit;font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:12px;border:1px solid #dbe5f3;background:#fff;color:#152036}
.cap-btn{font:inherit;font-size:13px;font-weight:700;padding:10px 16px;border-radius:12px;border:1px solid #dbe5f3;background:#fff;color:#152036;cursor:pointer;transition:all .18s}
.cap-btn:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(22,34,63,.12)}
.cap-btn.p{background:#1b63e0;border-color:#1b63e0;color:#fff}
.cap-ck{width:19px;height:19px;border-radius:6px;border:2px solid #b9c6dd;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;color:#fff;font-size:12px;font-weight:800}
.cap-ck.on{background:#1b63e0;border-color:#1b63e0}
.cap-tbl{width:100%;border-collapse:collapse;font-size:13px}
.cap-tbl th{text-align:left;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:#616e8a;padding:8px 10px}
.cap-tbl td{padding:11px 10px;border-top:1px solid #e7edf6}
.cap-tbl tr.cl{cursor:pointer}.cap-tbl tr.cl:hover td{background:#f3f7fe}
.cap-bar2{position:fixed;left:50%;bottom:20px;transform:translate(-50%,120px);background:#06285c;color:#fff;border-radius:18px;padding:12px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;box-shadow:0 18px 40px rgba(3,20,55,.4);z-index:9100;transition:transform .35s cubic-bezier(.2,.8,.2,1);max-width:94vw}
.cap-bar2.show{transform:translate(-50%,0)}
.cap-bar2 .cap-btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#fff}.cap-bar2 .cap-btn.p{background:#2f6cf6;border-color:#2f6cf6}
.cap-dr{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);background:#fff;z-index:9200;box-shadow:-20px 0 50px rgba(3,20,55,.25);transform:translateX(105%);transition:transform .35s cubic-bezier(.2,.8,.2,1);overflow-y:auto;padding:22px}
.cap-dr.show{transform:none}
.cap-dim{position:fixed;inset:0;background:rgba(3,12,30,.4);z-index:9150;opacity:0;pointer-events:none;transition:opacity .3s}.cap-dim.show{opacity:1;pointer-events:auto}
.cap-hd{font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#616e8a;margin:18px 0 6px}
.cap-ex{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cap-ex div{background:#f3f7fe;border-radius:12px;padding:8px;text-align:center;font-size:12px}.cap-ex b{display:block;font-size:15px}
#cap-report{position:fixed;inset:0;z-index:9300;background:#eef3fb;overflow-y:auto;padding:20px;font-family:var(--font,'Plus Jakarta Sans',system-ui,sans-serif);color:#152036}
.cap-rp{max-width:900px;margin:0 auto;background:#fff;border-radius:18px;padding:28px;box-shadow:0 10px 30px rgba(22,34,63,.12)}
.cap-rg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}
.cap-rc{display:flex;gap:14px;border:1px solid #e1e8f4;border-radius:16px;padding:14px;break-inside:avoid;page-break-inside:avoid}
.cap-rph{width:84px;height:104px;border-radius:12px;background:#dbe8ff;color:#1d4ed8;font-size:26px;font-weight:800;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.cap-rph img{width:100%;height:100%;object-fit:cover}
.cap-rc dl{margin:6px 0 0;font-size:12px;display:grid;grid-template-columns:auto 1fr;gap:3px 10px}.cap-rc dt{color:#616e8a}.cap-rc dd{margin:0;font-weight:600}
.cap-em{text-align:center;color:#616e8a;padding:40px 10px;font-size:14px}
@media (max-width:860px){
 #captain-portal{flex-direction:column !important}
 .cap-sb{width:100%;flex-direction:row;align-items:center;overflow-x:auto;border-radius:0 0 16px 16px;padding:10px;gap:6px}
 .cap-sec,.cap-role,.cap-sp,.cap-me{display:none}.cap-br{padding:0 8px}.cap-ni{width:auto;white-space:nowrap;padding:8px 12px}
 .cap-g2{grid-template-columns:1fr}.cap-rg{grid-template-columns:1fr}.cap-body{padding:4px 12px 100px}.cap-tp{margin:8px 12px 0}
}
@media (prefers-reduced-motion:reduce){.cap-in,.cap-bar i{animation:none}.cap-dr,.cap-bar2{transition:none}}
@media print{
 body.cap-printing>*:not(#cap-report){display:none !important}
 #cap-report{position:static !important;background:#fff;padding:0;overflow:visible}
 .cap-rp{box-shadow:none;max-width:none;padding:0}.cap-noprint{display:none !important}
 .cap-rph,.cap-pl{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* slx-topbar-profile */

html body .sidenav .nav-footer{display:none !important}
#nav-total-stat,#cw-bell-wrap{display:none !important}
#tb-prof-wrap{position:relative;display:flex;align-items:center}
#topbar-profile-btn.tb-prof-btn{position:relative;display:flex !important;align-items:center;justify-content:center;width:42px;height:42px;padding:0 !important;border-radius:50% !important;background:transparent !important;border:0 !important;cursor:pointer;box-shadow:none}
.tb-prof-av{width:38px;height:38px;border-radius:50%;background-color:#2563eb;background-image:linear-gradient(135deg,#3b82f6,#1d4ed8);background-size:cover;background-position:center;color:#fff;font-weight:800;font-size:13px;letter-spacing:.5px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(59,130,246,.45),0 4px 12px rgba(29,78,216,.35);transition:box-shadow .15s,transform .15s}
body.dark .tb-prof-av{box-shadow:0 0 0 2px #0b1a33,0 0 0 4px rgba(96,165,250,.55),0 4px 12px rgba(0,0,0,.4)}
#topbar-profile-btn:hover .tb-prof-av{transform:scale(1.05)}
.tb-prof-dot{position:absolute;right:3px;bottom:3px;width:10px;height:10px;border-radius:50%;background:#22c55e;border:2px solid #fff}
body.dark .tb-prof-dot{border-color:#0b1a33}
#tb-prof-wrap .side-profile-menu{top:calc(100% + 10px);bottom:auto;left:auto;right:0;width:250px;transform-origin:top right;box-shadow:0 14px 34px rgba(0,0,0,.30);z-index:3000}
.tbm-head{display:flex;align-items:center;gap:12px;padding:10px 10px 8px}
.tbm-av{width:44px;height:44px;border-radius:50%;background-color:#2563eb;background-image:linear-gradient(135deg,#3b82f6,#1d4ed8);background-size:cover;background-position:center;color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;flex:none}
.tbm-who{display:flex;flex-direction:column;min-width:0}
.tbm-name{font-weight:800;font-size:14px;color:var(--c-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbm-role{margin-top:3px;align-self:flex-start;font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;background:rgba(245,158,11,.15);color:#b45309}
body.dark .tbm-role{color:#fbbf24}
/* notification bell */
#slx-bell-wrap{position:relative;display:none;align-items:center}
#slx-bell{position:relative;width:40px;height:40px;border-radius:50%;border:1px solid var(--c-border);background:var(--c-surface);color:var(--c-text);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s}
#slx-bell:hover{background:rgba(59,130,246,.12)}
#slx-bell-count{display:none;position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:#ef4444;color:#fff;font-size:11px;font-weight:800;line-height:19px;text-align:center;border:2px solid var(--c-surface);box-sizing:content-box}
#slx-bell-wrap.ring #slx-bell svg{animation:slxRing 1s ease 1}
@keyframes slxRing{0%,100%{transform:rotate(0)}20%{transform:rotate(14deg)}40%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-4deg)}}
#slx-bell-menu{display:none;position:absolute;right:0;top:calc(100% + 10px);width:360px;max-width:calc(100vw - 24px);max-height:480px;overflow:auto;background:var(--c-surface);border:1px solid var(--c-border);border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.3);z-index:3000;padding:6px}
#slx-bell-menu.open{display:block}
.sb-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 6px}
.sb-head b{font-size:14px;color:var(--c-text)}
.sb-head button{background:none;border:0;color:#2563eb;font-size:12px;font-weight:700;cursor:pointer;padding:4px}
.sb-sec{padding:8px 10px 4px;font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--c-muted);text-transform:uppercase}
.sb-item{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border-radius:10px;cursor:pointer;position:relative}
.sb-item:hover{background:rgba(59,130,246,.08)}
.sb-item.unread{background:rgba(59,130,246,.07)}
.sb-item.unread::after{content:"";position:absolute;right:10px;top:15px;width:8px;height:8px;border-radius:50%;background:#3b82f6}
.sb-ic{width:32px;height:32px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:15px}
.sb-ic.red{background:rgba(239,68,68,.14)}.sb-ic.blue{background:rgba(59,130,246,.14)}.sb-ic.amber{background:rgba(245,158,11,.16)}
.sb-tx{min-width:0;flex:1;padding-right:12px}
.sb-tx b{display:block;font-size:13px;color:var(--c-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-tx span{display:block;font-size:12px;color:var(--c-muted);margin-top:2px}
.sb-tx small{display:block;font-size:11px;color:var(--c-muted);opacity:.8;margin-top:2px}
.sb-empty{padding:26px 10px;text-align:center;color:var(--c-muted);font-size:13px}
@media (max-width:700px){#slx-bell{width:36px;height:36px}}
.tb-prof-dot{transition:background .3s}
.tb-prof-dot.off{background:#ef4444 !important;animation:slxDotPulse 1.4s ease-in-out infinite}
@keyframes slxDotPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.6)}50%{box-shadow:0 0 0 5px rgba(239,68,68,0)}}
#slx-toasts{position:fixed;right:18px;bottom:18px;z-index:10050;display:flex;flex-direction:column;gap:10px;align-items:flex-end;pointer-events:none;max-width:calc(100vw - 32px)}
.slx-pop{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;width:320px;max-width:100%;box-sizing:border-box;padding:11px 12px;border-radius:12px;background:var(--c-surface,#fff);color:var(--c-text,#10284d);border:1px solid var(--c-border,#dbe5f3);border-left:4px solid #3b82f6;box-shadow:0 10px 28px rgba(0,0,0,.25);font-size:13px;opacity:0;transform:translateX(30px);transition:opacity .25s,transform .25s}
.slx-pop.show{opacity:1;transform:none}
.slx-pop.ok{border-left-color:#22c55e}.slx-pop.warn{border-left-color:#ef4444}
.slx-pop-ic{font-size:18px;line-height:1.2;flex:none}
.slx-pop-tx{flex:1;min-width:0}
.slx-pop-tx b{display:block;font-size:13px;font-weight:800}
.slx-pop-tx span{display:block;font-size:12px;color:var(--c-muted,#667);margin-top:2px;line-height:1.35}
.slx-pop-x{background:none;border:0;color:var(--c-muted,#889);font-size:18px;line-height:1;cursor:pointer;padding:0 2px;flex:none}
@media (max-width:700px){#slx-toasts{right:10px;left:10px;bottom:80px;align-items:stretch}.slx-pop{width:auto}}
.sum-alol-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:14px;align-items:start}
.sum-alol-wrap .sum-alol{margin:0;width:100%}
.sum-stream{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:9px;background:rgba(255,255,255,.25);font-size:10px;font-weight:800;letter-spacing:.3px}
.xlim-dest-ttl{font-weight:800;font-size:13px;margin:18px 0 10px;color:var(--c-text)}
.xlim-colhelp{font-size:12.5px;color:var(--c-muted);background:var(--c-surface2,#f4f7fc);border:1px solid var(--c-border);border-radius:10px;padding:10px 12px;margin-bottom:10px;line-height:1.5}
#xlim-coltally{font-size:12.5px;margin:0 0 8px;color:var(--c-text)}
.xlt{display:inline-block;padding:2px 9px;border-radius:10px;background:rgba(100,116,139,.14);font-weight:700;font-size:11.5px;margin:2px 2px}
.xlt-course{background:rgba(59,130,246,.15);color:#1d4ed8}.xlt-al{background:rgba(168,85,247,.15);color:#7e22ce}.xlt-ol{background:rgba(34,197,94,.15);color:#15803d}
body.dark .xlt-course{color:#93c5fd}body.dark .xlt-al{color:#d8b4fe}body.dark .xlt-ol{color:#86efac}
.xlg th .xlg-h{display:block !important}
.xlg th .xlg-h .rotc{display:block}
.xlg .xlg-type,.xlg .xlg-map{display:block;width:100%;box-sizing:border-box;margin-top:5px;font-size:11px;padding:3px 4px;border-radius:6px;border:1px solid var(--c-border);background:var(--c-surface);color:var(--c-text);font-weight:600}
.xlg th.xlg-t-course{box-shadow:inset 0 -3px 0 #3b82f6}.xlg th.xlg-t-al{box-shadow:inset 0 -3px 0 #a855f7}.xlg th.xlg-t-ol{box-shadow:inset 0 -3px 0 #22c55e}
.xlg th.xlg-t-skip{opacity:.5}
.xlg th.xlg-t-course .xlg-type{border-color:#3b82f6}.xlg th.xlg-t-al .xlg-type{border-color:#a855f7}.xlg th.xlg-t-ol .xlg-type{border-color:#22c55e}
.xlg-ph{display:block;width:34px;height:42px;object-fit:cover;border-radius:4px;margin:4px auto 0}
.xlt-ph{background:rgba(245,158,11,.16);color:#b45309}
#cpfs-photo img{cursor:zoom-in}
#slx-phpop{position:fixed;z-index:10060;width:300px;height:380px;padding:6px;box-sizing:border-box;background:var(--c-surface,#fff);border:1px solid var(--c-border,#dbe5f3);border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.35);pointer-events:none;opacity:0;transform:scale(.94);transition:opacity .15s,transform .15s}
#slx-phpop.show{opacity:1;transform:none}
#slx-phpop img{width:100%;height:100%;object-fit:cover;border-radius:10px;display:block}
#slx-phview{position:fixed;inset:0;z-index:10080;background:rgba(5,12,30,.88);display:none;flex-direction:column;align-items:center;justify-content:center;padding:56px 16px 24px;box-sizing:border-box}
#slx-phview.open{display:flex}
#slx-phview img{width:min(88vw,460px);height:auto;max-height:calc(100vh - 140px);object-fit:contain;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5);background:#fff}
#slx-phview .slx-phcap{color:#fff;font-weight:700;font-size:14px;margin-top:12px;text-align:center}
#slx-phview .slx-phx{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center}
#slx-phview .slx-phx:hover{background:rgba(255,255,255,.3)}
/* ── public site buttons: glass + ocean gradient instead of flat white ── */
#cinec-site .nav-links a.cta{background:rgba(255,255,255,.10) !important;color:#fff !important;border:1px solid rgba(255,255,255,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 18px -8px rgba(0,0,0,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:all .25s}
#cinec-site .nav-links a.cta:hover{background:linear-gradient(135deg,#38bdf8,#2563eb) !important;border-color:transparent;color:#fff !important;transform:translateY(-1px);box-shadow:0 10px 26px -10px rgba(56,189,248,.8)}
#cinec-site .btn-primary{background:linear-gradient(135deg,#38bdf8 0%,#2f6cf6 55%,#1d4ed8 100%) !important;color:#fff !important;border:1px solid rgba(255,255,255,.28) !important;box-shadow:0 14px 32px -14px rgba(56,189,248,.9),inset 0 1px 0 rgba(255,255,255,.35)}
#cinec-site .btn-primary:hover{transform:translateY(-3px);filter:brightness(1.08);box-shadow:0 20px 40px -14px rgba(56,189,248,1),inset 0 1px 0 rgba(255,255,255,.4)}
#cinec-site .brand,.cap-br,.cp-top-title,.login-title{cursor:pointer}
#cinec-site .footer-own{margin:8px 0 4px;font-size:.8rem;opacity:.85}
#cinec-site .footer-own a{color:#7cc4ff;font-weight:700;text-decoration:none}
#cinec-site .footer-own a:hover{text-decoration:underline}
#cinec-site a.btn-primary[href="#tracks"]{background:none !important;border:0 !important;box-shadow:none !important;color:var(--ink-2) !important;padding:10px 2px !important;font-weight:600;filter:none !important;transform:none !important}
#cinec-site a.btn-primary[href="#tracks"]:hover{color:#fff !important;transform:none !important;box-shadow:none !important}
#slx-rst{position:fixed;inset:0;z-index:10120;background:rgba(3,10,28,.7);display:flex;align-items:center;justify-content:center;padding:16px}
.slx-rst-card{position:relative;width:min(94vw,400px);background:#0e1f42;color:#e6edf7;border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:24px 22px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.slx-rst-card h3{margin:6px 0 6px;font-size:19px}.slx-rst-card p{margin:0 0 14px;font-size:13px;line-height:1.55;color:#a9bddf}
.slx-rst-ic{font-size:30px}.slx-rst-x{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;font-size:16px;cursor:pointer}
#slx-rst-in{width:100%;box-sizing:border-box;padding:12px;border-radius:10px;border:1px solid #2c3e63;background:#081530;color:#fff;font-size:15px;margin-bottom:12px}
.slx-rst-go{width:100%;padding:12px;border:0;border-radius:10px;background:linear-gradient(135deg,#38bdf8,#2f6cf6);color:#fff;font-weight:800;font-size:14.5px;cursor:pointer}
.slx-rst-go:disabled{opacity:.6}.slx-rst-msg{margin-top:12px;font-size:13px;line-height:1.55}.slx-rst-msg.ok{color:#86efac}.slx-rst-msg.err{color:#fca5a5}
.slx-rst-test{margin-top:8px;padding:8px 10px;border-radius:8px;background:rgba(245,158,11,.14);color:#fcd34d;font-size:12px}
.cdx-b{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:9px;font-size:10.5px;font-weight:800;vertical-align:middle}
.cdx-b.pend{background:rgba(245,158,11,.16);color:#b45309}.cdx-b.ok{background:rgba(34,197,94,.14);color:#15803d}.cdx-b.rej{background:rgba(239,68,68,.14);color:#b91c1c}
body.dark .cdx-b.pend{color:#fcd34d}body.dark .cdx-b.ok{color:#86efac}body.dark .cdx-b.rej{color:#fca5a5}
.cdoc-ok-btn,.cdoc-no-btn{border:0;border-radius:8px;padding:6px 10px;font-weight:700;font-size:12px;cursor:pointer;margin-right:6px}
.cdoc-ok-btn{background:#16a34a;color:#fff}.cdoc-no-btn{background:rgba(239,68,68,.14);color:#b91c1c}
.cdx-list{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.cdx-it{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--c-border,#dbe5f3);border-radius:12px}
.cdx-ic{font-size:22px}.cdx-t{flex:1;min-width:0}.cdx-t b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cdx-t span{font-size:11.5px;color:var(--c-muted,#64748b)}
.cdx-t .cdx-b{margin:4px 0 0}.cdx-btns{display:flex;gap:6px;flex-wrap:wrap}.cdx-btns button{border:1px solid var(--c-border,#dbe5f3);background:transparent;color:inherit;border-radius:8px;padding:6px 9px;font-size:12px;font-weight:700;cursor:pointer}
#slx-cl{background:var(--c-surface);border:1px solid var(--c-border);border-radius:14px;padding:16px;margin-bottom:18px}
.slx-cl-hd{display:flex;gap:14px;align-items:flex-start;justify-content:space-between}.slx-cl-hd b{font-size:15px}
.slx-cl-sub{font-size:12.5px;color:var(--c-muted);line-height:1.5;margin-top:4px;max-width:760px}
.slx-cl-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:14px 0 10px}
.slx-cl-chip{border:1px solid var(--c-border);background:transparent;color:var(--c-text);border-radius:20px;padding:5px 12px;font-size:12px;font-weight:700;cursor:pointer}
.slx-cl-chip.on{background:#2f6cf6;color:#fff;border-color:#2f6cf6}.slx-cl-chip b{margin-left:4px}
.slx-cl-q{flex:1;min-width:160px;padding:7px 10px;border-radius:9px;border:1px solid var(--c-border);background:var(--c-surface);color:var(--c-text)}
.slx-cl-last{font-size:11.5px;color:var(--c-muted)}
.slx-cl-tw{overflow:auto;max-height:520px;border:1px solid var(--c-border);border-radius:10px}
.slx-cl-t{width:100%;border-collapse:collapse;font-size:12.5px}.slx-cl-t th{position:sticky;top:0;background:var(--c-surface2,#f4f7fc);text-align:left;padding:8px 10px;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--c-muted)}
.slx-cl-t td{padding:8px 10px;border-top:1px solid var(--c-border);vertical-align:top}.slx-cl-ids{font-family:ui-monospace,Consolas,monospace;font-size:11.5px}
.slx-cl-act{white-space:nowrap}.slx-cl-act .btn{font-size:11px;padding:4px 9px}
.slx-cl-st{display:inline-block;padding:2px 9px;border-radius:9px;font-weight:800;font-size:11px}.slx-cl-st.g{background:rgba(34,197,94,.14);color:#15803d}.slx-cl-st.a{background:rgba(245,158,11,.16);color:#b45309}.slx-cl-st.b{background:rgba(59,130,246,.14);color:#1d4ed8}.slx-cl-st.r{background:rgba(239,68,68,.14);color:#b91c1c}

/* slx-cap-theme */

/* ═══ Captain portal — refreshed look ═══ */
#captain-portal{background:radial-gradient(900px 420px at 100% -5%,#d6e6ff 0,transparent 60%),radial-gradient(700px 380px at 20% 110%,#e0f2fe 0,transparent 60%),#eef3fb !important}
.cap-tp{border:1px solid #e3eaf5;backdrop-filter:blur(8px)}
.cap-sr{background:#f5f8fd !important}
.cap-body{padding-top:14px !important}
/* cards */
.cap-cd{border:1px solid #e3eaf5;box-shadow:0 6px 18px rgba(22,34,63,.06) !important}
.cap-h{display:flex;align-items:center;gap:10px;font-size:15.5px !important;color:#0b1f4a}
.cap-h::before{content:"";width:4px;height:18px;border-radius:3px;background:linear-gradient(#38bdf8,#2563eb);flex:none}
.cap-st{gap:14px !important}
.cap-num{font-size:32px !important;color:#0b1f4a;letter-spacing:-.5px;position:relative;z-index:1}
.cap-st .cap-sub{font-weight:600;color:#475569 !important;position:relative;z-index:1}
.cap-st .cap-pl{position:relative;z-index:1}
/* controls */
.cap-sel{padding:9px 34px 9px 14px !important;border-radius:12px !important;border:1px solid #d5e1f3 !important;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center !important;appearance:none;-webkit-appearance:none;font-weight:700 !important;color:#0b1f4a !important;box-shadow:0 3px 10px rgba(22,34,63,.05);cursor:pointer}
.cap-sel:hover{border-color:#93c5fd !important}
.cap-chip{box-shadow:0 2px 6px rgba(22,34,63,.04)}
.cap-chip.on{background:linear-gradient(135deg,#2563eb,#38bdf8) !important;border-color:transparent !important}
.cap-btn.p{background:linear-gradient(135deg,#2563eb,#1d4ed8) !important;border-color:transparent !important;box-shadow:0 8px 18px rgba(37,99,235,.28)}
/* bars & table */
.cap-bar{height:12px !important;background:#edf2fb !important}
.cap-bar i{background:linear-gradient(90deg,#2563eb,#38bdf8) !important}
.cap-fr{padding:6px 8px;border-radius:10px;margin:4px 0 !important}
.cap-fr.cl:hover{background:#f3f7fe}
.cap-tbl th{background:#f5f8fd;color:#475569 !important}
.cap-tbl th:first-child{border-radius:10px 0 0 10px}.cap-tbl th:last-child{border-radius:0 10px 10px 0}
.cap-tbl tr:nth-child(even) td{background:#fbfcff}
/* year chart */
.cr-chart{overflow-x:auto;padding:6px 0 0}
.cr-chart .crb:hover rect:first-child{fill:#f1f6ff}
.cr-leg{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:6px;font-size:12.5px;color:#334155;font-weight:600}
.cr-leg i{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:6px;vertical-align:-1px}
.cr-leg .cap-sub{margin-left:auto;font-weight:500}
/* no pictures: plain banners, no boats / lighthouse / compass */
.capx-art{display:none !important}
.capx-hero{min-height:0 !important;padding:20px 26px !important}
.capx-txt{max-width:100% !important}
.cap-sb::after{display:none !important}

/* slx-cap-photos */

/* captain banners: real CINEC photos instead of drawings */
#captain-portal .capx-art{display:none !important}
#captain-portal .cap-sb::after{display:none !important}
#captain-portal .capx-hero{min-height:172px;display:flex;align-items:center;background:linear-gradient(100deg,#061a3e 0%,#0a2d6b 45%,#0d3f99 100%) !important}
#captain-portal .capx-hero::after{content:"";position:absolute;top:0;right:0;bottom:0;width:min(48%,560px);background:var(--capph) center 28%/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.85) 34%,#000 60%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.85) 34%,#000 60%);pointer-events:none}
#captain-portal .capx-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,26,62,.0) 50%,rgba(6,26,62,.25));z-index:1;pointer-events:none}
#captain-portal .capx-txt{max-width:58%;z-index:2}
@media (max-width:800px){#captain-portal .capx-hero::after{width:100%;opacity:.28;-webkit-mask-image:none;mask-image:none}#captain-portal .capx-txt{max-width:100%}}

/* slx-portal-css */

/* ═══ cadet / officer private profile ═══ */
#cadet-portal.sx-on{background:#eef3fb !important}
#cadet-portal.sx-on > .cp-top{display:none !important}
#cadet-portal.sx-on > .cp-body{padding:0 !important;max-width:none !important;margin:0 !important;width:100%;height:100vh;overflow-y:auto;background:#eef3fb}
#cadet-portal.sx-on > .cp-body.sx-editing{padding:0 16px 40px !important;max-width:760px !important;margin:0 auto !important}
.sx{--nv:#071d45;--nv2:#0b2f6e;--bl:#1d5bd8;--bl2:#2f6cf6;--cy:#22c3ee;--gr:#16a34a;--tx:#14213d;--mu:#64748b;--bd:#e3eaf5;font-family:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;color:var(--tx);min-height:100%}
:where(.sx) button{font:inherit;color:inherit;cursor:pointer}
.sx-fl{flex:1}
.sx-logo{display:inline-flex;align-items:center;gap:8px;color:var(--cy)}
.sx-logo b{font-size:21px;font-weight:800;color:#fff;letter-spacing:-.3px}.sx-logo b i{font-style:normal;color:var(--cy)}
/* desktop / mobile switch */
.sx-m{display:none}
@media (max-width:899px){.sx-d{display:none}.sx-m{display:block}}
/* ── desktop ── */
.sx-top{position:sticky;top:0;z-index:20;height:56px;display:flex;align-items:center;gap:16px;padding:0 32px;background:linear-gradient(90deg,#061937,#0a2552)}
.sx-sep{width:1px;height:28px;background:rgba(255,255,255,.22)}
.sx-ttl{color:#fff;font-size:17px;font-weight:600}
.sx-bell{position:relative;background:none;border:0;color:#fff;padding:6px;display:flex}
.sx-bell i{position:absolute;top:4px;right:5px;width:9px;height:9px;border-radius:50%;background:#ef4444;border:2px solid #0a2552}
.sx-av{display:flex;align-items:center;gap:6px;background:none;border:0;color:#fff;padding:0 0 0 14px;border-left:1px solid rgba(255,255,255,.18)}
.sx-av>span{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#1d4ed8);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;overflow:hidden;box-shadow:0 0 0 2px rgba(255,255,255,.15)}
.sx-av img,.sx-ph img{width:100%;height:100%;object-fit:cover}
.sx-av svg{transform:rotate(90deg)}
.sx-wrap{max-width:1560px;margin:0 auto;padding:14px 32px 18px}
.sx-hero{position:relative;overflow:hidden;display:flex;align-items:center;gap:40px;min-height:136px;padding:16px 44px;border-radius:16px;background:radial-gradient(800px 300px at 75% 40%,#1a57c4 0,transparent 60%),linear-gradient(100deg,#082a66 0%,#0b3a8f 55%,#0d3f99 100%);color:#fff;box-shadow:0 10px 30px rgba(8,42,102,.25)}
.sx-art{position:absolute;right:0;top:0;height:100%;width:62%;pointer-events:none}
.sx-ph{position:relative;z-index:1;flex:none;width:96px;height:96px;border-radius:50%;border:4px solid #fff;background:linear-gradient(135deg,#bcd3f5,#7aa7e0);display:flex;align-items:center;justify-content:center;overflow:hidden;font-weight:800;font-size:28px;color:#0b2f6e;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.sx-ph[data-zoom]{cursor:zoom-in}
.sx-ph.big{width:108px;height:108px;font-size:34px}
.sx-hi{position:relative;z-index:1;min-width:0}
.sx-hname{font-size:26px;font-weight:800;letter-spacing:-.4px;line-height:1.15}
.sx-hrank{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:16px;color:#dbe8ff}.sx-hrank svg{color:var(--cy)}
.sx-hmeta{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:15px;color:#e6efff}
.sx-hmeta span{display:inline-flex;align-items:center;gap:8px}.sx-hmeta span+span{padding-left:14px;border-left:1px solid rgba(255,255,255,.3)}
.sx-ver{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:4px 12px 4px 6px;border-radius:20px;background:#15803d;font-size:12.5px;font-weight:700}
.sx-ver svg{background:#4ade80;color:#065f2c;border-radius:50%;padding:2px;width:16px;height:16px}
.sx-hr{position:relative;z-index:1;margin-left:auto;align-self:stretch;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:18px}
.sx-privdark{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:12px;background:rgba(5,20,50,.7);font-size:12.5px;font-weight:600}
.sx-upd{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:26px;border:1px solid rgba(255,255,255,.38);background:rgba(255,255,255,.10);color:#fff !important;font-weight:700;font-size:14.5px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .2s}
.sx-upd:hover{background:rgba(255,255,255,.2)}
.sx-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
.sx-stat{display:flex;align-items:center;gap:14px;padding:12px 16px;background:#fff;border:1px solid var(--bd);border-radius:14px;box-shadow:0 4px 14px rgba(20,40,90,.05);text-align:left;transition:transform .15s,box-shadow .15s}
.sx-stat:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,40,90,.09)}
.sx-sic{flex:none;width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.sx-sic.g{background:#dcfce7;color:#15803d}.sx-sic.b{background:#e6efff;color:#1d4ed8}.sx-sic.r{background:none}
.sx-ring{display:flex}
.sx-st{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.sx-sk{font-size:13px;color:#475569;font-weight:600}
.sx-sv{font-size:18px;font-weight:800;color:var(--tx);line-height:1.25}.sx-sv.g{color:var(--gr)}.sx-sv.a{color:#b45309}
.sx-bar{display:block;height:6px;border-radius:4px;background:#e3ecfa;margin-top:6px}.sx-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#1597d6,#22c3ee)}
.sx-chev{color:#64748b;display:flex;flex:none}
.sx-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;margin-top:14px;align-items:start}
.sx-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.sx-card{background:#fff;border:1px solid var(--bd);border-radius:16px;padding:12px 18px;box-shadow:0 4px 14px rgba(20,40,90,.05)}
.sx-ch{display:flex;align-items:center;gap:12px;padding-bottom:8px;margin-bottom:4px;border-bottom:1px solid var(--bd)}
.sx-ch h3{margin:0;font-size:17px;font-weight:800;color:#0b1f4a;flex:1}
.sx-chi{width:42px;height:42px;border-radius:50%;background:#e6efff;color:#1d4ed8;display:flex;align-items:center;justify-content:center;flex:none}
.sx-hchev{background:none;border:0;color:#64748b;display:flex}
.sx-privpill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:10px;background:#e6efff;color:#1d4ed8;font-size:11.5px;font-weight:600}
.sx-rows{display:flex;flex-direction:column}
.sx-row{display:grid;grid-template-columns:34px 220px 1fr auto;align-items:center;gap:6px;padding:6px 6px;border-bottom:1px solid #eef2f8;background:none;border-left:0;border-right:0;border-top:0;text-align:left;width:100%}
.sx-row:last-child{border-bottom:0}
.sx-ric{color:#0b2f6e;display:flex}.sx-rk{font-size:13.5px;color:#475569}
.sx-rv{font-size:14px;color:var(--tx);display:flex;align-items:center;flex-wrap:wrap;gap:4px;min-width:0;word-break:break-word}
.sx-sub{display:block;width:100%}
.sx-pv{flex:1}
.sx-eye{margin-left:auto;background:none;border:0;color:#475569;display:flex;padding:2px}
.sx-dim{color:#94a3b8}
.sx-link{color:#1d4ed8;font-weight:600}
.sx-rowlink{cursor:pointer}
.sx-qas{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}
.sx-qa{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--bd);border-radius:12px;background:#f8fbff;text-align:left}
.sx-qa:hover{background:#eef5ff}
.sx-qic{flex:none;width:42px;height:42px;border-radius:50%;background:#dbe8ff;color:#1d4ed8;display:flex;align-items:center;justify-content:center}
.sx-qt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.sx-qt b{font-size:13.5px;color:#0b1f4a}.sx-qt small{font-size:11.5px;color:var(--mu)}
.sx-ht{display:flex;align-items:flex-start;justify-content:space-between;padding:10px 16px 6px}
.sx-hs{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:90px}
.sx-hs b{font-size:13px;color:#0b1f4a}.sx-hs small{font-size:11.5px;color:var(--mu)}
.sx-hd{width:26px;height:26px;border-radius:50%;border:2px solid #c9d6ea;background:#fff;display:flex;align-items:center;justify-content:center;color:#fff}
.sx-hs.done .sx-hd{background:var(--bl);border-color:var(--bl)}.sx-hs.act .sx-hd{border-color:var(--bl);box-shadow:inset 0 0 0 4px #fff;background:var(--bl)}
.sx-hl{flex:1;height:2px;background:#d7e2f2;margin-top:13px}
.sx-note{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;margin-top:12px;border-radius:12px;background:#eef4fd;color:#1d4ed8}
.sx-note div{display:flex;flex-direction:column;gap:2px}.sx-note b{font-size:13.5px}.sx-note span{font-size:12px;color:var(--mu);line-height:1.45}
.sx-note.a{background:#fff7e6;color:#b45309}
.sx-certs{display:flex;flex-direction:column}
.sx-cert{display:flex;align-items:center;gap:12px;padding:10px 4px;border:0;border-bottom:1px solid #eef2f8;background:none;text-align:left;width:100%}
.sx-cert:last-child{border-bottom:0}
.sx-cic{flex:none;width:36px;height:36px;border-radius:50%;background:#e6efff;color:#1d4ed8;display:flex;align-items:center;justify-content:center}
.sx-cn{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:#0b1f4a}
.sx-certc .sx-cn{flex:1.4}.sx-cx{flex:1;text-align:right;font-size:12.5px;color:#475569;white-space:nowrap}
.sx-cs{display:flex;align-items:center;gap:12px;margin-top:6px;font-weight:500;font-size:12.5px;color:#475569}
.sx-pill{display:inline-block;padding:3px 12px;border-radius:10px;font-size:11.5px;font-weight:700;white-space:nowrap}
.sx-pill.ok{background:#dcfce7;color:#15803d}.sx-pill.pend{background:#fef3c7;color:#b45309}.sx-pill.rej{background:#fee2e2;color:#b91c1c}
.sx-empty{padding:16px 6px;color:var(--mu);font-size:13px}
.sx-privrow{display:flex;align-items:center;gap:14px}.sx-privrow>div{flex:1}
.sx-chk{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:13.5px}
.sx-chk svg{flex:none;width:20px;height:20px;padding:3px;border-radius:50%;background:var(--gr);color:#fff}
.sx-mp{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:12px;border:1.5px solid #bcd0f0;background:#fff;color:#1d4ed8 !important;font-weight:700;font-size:13px}
.sx-tips{margin-top:14px;font-size:13px}.sx-tips b{display:flex;align-items:center;gap:8px;color:#0b1f4a}.sx-tips ul{margin:8px 0 0;padding-left:26px;color:var(--mu);line-height:1.9}
.sx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;padding:11px 18px;border-radius:12px;border:0;background:var(--bl2,#2f6cf6);color:#fff !important;font-weight:700;font-size:13.5px}
.sx-btn2{background:#e6efff;color:#1d4ed8 !important}.sx-btnr{background:#fee2e2;color:#b91c1c !important}
/* profile menu */
.sx-menu{position:fixed;top:66px;right:40px;z-index:60;width:250px;background:#fff;border:1px solid var(--bd);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.2);padding:8px}
.sx-mhd{display:flex;align-items:center;gap:12px;padding:8px}.sx-mhd .sx-ph{width:44px;height:44px;border-width:2px;font-size:15px}.sx-mhd b{display:block;font-size:14px}.sx-mhd span{font-size:12px;color:var(--mu)}
.sx-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border:0;background:none;border-radius:9px;font-size:13.5px;text-align:left}.sx-menu button:hover{background:#f1f5fd}
.sx-menu hr{border:0;border-top:1px solid var(--bd);margin:6px 0}.sx-lo{color:#dc2626 !important}
/* modal */
.sx-ov{position:fixed;inset:0;z-index:10050;background:rgba(5,15,40,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.sx-mod{--bl:#1d5bd8;--bl2:#2f6cf6;--gr:#16a34a;--mu:#64748b;--bd:#e3eaf5;position:relative;width:min(94vw,440px);max-height:90vh;overflow:auto;background:#fff;color:#14213d;border-radius:18px;padding:22px;box-shadow:0 24px 60px rgba(0,0,0,.35);font-family:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif}
.sx-mod h3{display:flex;align-items:center;gap:10px;margin:0 30px 10px 0;font-size:18px;color:#0b1f4a}.sx-mod h3 svg{color:#1d4ed8}
.sx-mod p{font-size:13.5px;line-height:1.5;margin:6px 0}
.sx-mod label{display:block;margin:12px 0 5px;font-size:11.5px;font-weight:700;color:var(--mu,#64748b);text-transform:uppercase;letter-spacing:.4px}
.sx-mod input{width:100%;box-sizing:border-box;padding:10px 12px;border:1.5px solid #dbe5f3;border-radius:10px;font:inherit;font-size:14px}
.sx-modx{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;border:0;background:#f1f5fd;color:#334155;display:flex;align-items:center;justify-content:center;cursor:pointer}
.sx-mbtns{display:flex;flex-wrap:wrap;gap:8px}.sx-err{color:#dc2626;font-size:12.5px;margin-top:8px;min-height:16px}
.sx-mod .sx-btn{cursor:pointer}.sx-mod .sx-chk svg{background:#16a34a;color:#fff}
.sx-help{display:flex;flex-direction:column;gap:8px;margin:12px 0}.sx-help a{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #dbe5f3;border-radius:12px;color:#0b1f4a;text-decoration:none}.sx-help a span{display:flex;flex-direction:column}.sx-help small{color:#64748b}
/* ── mobile ── */
.sx-m{padding-bottom:84px;min-height:100vh;background:#eef3fb}
.sx-mh{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;height:58px;padding:0 16px;background:linear-gradient(90deg,#061937,#0a2552);color:#fff}
.sx-mh .sx-logo b{font-size:19px}
.sx-mi,.sx-mpen{background:none;border:0;color:#fff !important;display:flex;padding:6px}
.sx-mpen{width:38px;height:38px;border-radius:50%;background:#1d4ed8;align-items:center;justify-content:center}
.sx-mt{font-size:17px;font-weight:700}
.sx-avm{border:0;padding:0}.sx-avm>span{width:36px;height:36px;font-size:13px}
.sx-mhero{position:relative;overflow:hidden;display:flex;align-items:center;gap:18px;padding:18px 18px 22px;background:linear-gradient(100deg,#082a66,#0d3f99);color:#fff}
.sx-mhero .sx-art{left:auto;right:-38%;width:115%;opacity:.55}
.sx-mhero .sx-ph{width:88px;height:88px}
.sx-mhero .sx-hname{font-size:21px}.sx-mhero .sx-hrank{font-size:13.5px;margin-top:4px}.sx-mhero .sx-hmeta{font-size:13px;gap:10px;margin-top:8px}.sx-mhero .sx-hmeta span+span{padding-left:10px}.sx-mhero .sx-ver{font-size:11px;margin-top:8px}
.sx-mhome{flex-wrap:wrap;padding-bottom:20px}
.sx-mhome .sx-upd{position:relative;z-index:1;padding:10px 18px;font-size:13.5px}
.sx-mbody{padding:14px 12px;display:flex;flex-direction:column;gap:14px}
.sx-mstats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sx-mstats .sx-stat{padding:12px;gap:10px;align-items:flex-start}
.sx-mstats .sx-sic{width:40px;height:40px}.sx-mstats .sx-sic svg{width:20px;height:20px}
.sx-mstats .sx-ring svg{width:40px;height:40px}
.sx-mstats .sx-sk{font-size:11px}.sx-mstats .sx-sv{font-size:15px}.sx-mstats .sx-chev{align-self:center}
.sx-m .sx-card{padding:14px}
.sx-m .sx-ch h3{font-size:16.5px}.sx-m .sx-chi{width:36px;height:36px}
.sx-qal-w{display:flex;flex-direction:column}
.sx-qal{border:0;border-bottom:1px solid #eef2f8;border-radius:0;background:none;padding:12px 2px}.sx-qal:last-child{border-bottom:0}
.sx-tabs{display:flex;background:#fff;border-bottom:1px solid var(--bd)}
.sx-tabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 4px 10px;border:0;background:none;color:#64748b !important;font-size:13px;font-weight:600;border-bottom:3px solid transparent}
.sx-tabs button.on{color:#1d4ed8 !important;border-bottom-color:#1d4ed8}
.sx-mrow{grid-template-columns:30px 1fr auto;grid-template-rows:auto auto;row-gap:2px;padding:10px 2px}
.sx-mrow .sx-ric{grid-row:1 / span 2}.sx-mrow .sx-rk{font-size:11px;color:#64748b}.sx-mrow .sx-rv{grid-column:2 / span 2;font-size:13.5px}
.sx-m .sx-rowlink{grid-template-columns:30px 1fr auto}.sx-m .sx-rowlink .sx-rv{grid-column:2}.sx-m .sx-rowlink .sx-chev{grid-row:1 / span 2;grid-column:3}
.sx-vt{display:flex;flex-direction:column;padding:6px 2px}
.sx-vs{position:relative;display:flex;gap:14px;padding:0 0 22px}
.sx-vs:not(:last-child)::before{content:"";position:absolute;left:15px;top:32px;bottom:2px;width:2px;background:#d7e2f2}
.sx-vd{flex:none;width:32px;height:32px;border-radius:50%;border:2px solid #c9d6ea;background:#fff;display:flex;align-items:center;justify-content:center;color:#fff}
.sx-vs.done .sx-vd{background:#16a34a;border-color:#16a34a}.sx-vs.act .sx-vd{border-color:#1d4ed8;box-shadow:inset 0 0 0 5px #fff;background:#1d4ed8}
.sx-vs div{display:flex;flex-direction:column;gap:2px}.sx-vs b{font-size:14px;color:#0b1f4a}.sx-vs span{font-size:12px;color:#64748b}.sx-vs .sx-vsub{color:#1d4ed8;font-weight:600}
.sx-bn{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;height:68px;background:linear-gradient(90deg,#061937,#0a2552);padding-bottom:env(safe-area-inset-bottom)}
.sx-bn button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:0;background:none;color:#cdd9ef !important;font-size:11.5px;font-weight:600}
.sx-bn button.on{color:#22c3ee !important}
.sx-drawer{position:relative;min-height:100vh;padding:0;background:linear-gradient(180deg,#061937,#0a2552 60%,#0b2f6e);color:#fff;overflow:hidden}
.sx-drawer .sx-art{position:absolute;left:0;right:0;bottom:0;top:auto;width:100%;height:220px;opacity:.6}
.sx-dh{display:flex;align-items:center;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.12)}
.sx-dh .sx-logo b{font-size:26px}
.sx-dp{display:flex;align-items:center;gap:16px;padding:18px}
.sx-dp .sx-ph{width:88px;height:88px}.sx-dp .sx-hname{font-size:20px}.sx-dp .sx-hrank,.sx-dp .sx-hmeta{font-size:13px}
.sx-dm{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;padding:0 14px}
.sx-dm button{display:flex;align-items:center;gap:14px;padding:13px 14px;border:0;border-radius:10px;background:none;color:#fff !important;font-size:15px;text-align:left}
.sx-dm button span{flex:1}.sx-dm button.on{background:#1d4ed8}
.sx-dm hr{border:0;border-top:1px solid rgba(255,255,255,.18);margin:10px 8px}
.sx-dm .sx-lo{color:#f87171 !important}
.sx-quote{position:relative;z-index:1;padding:46px 24px 0;font-size:15px;line-height:1.5}.sx-quote i{color:#7dd3fc}
.sx-edh{margin:0 -16px 16px}
@media (max-width:1200px) and (min-width:900px){.sx-wrap,.sx-top{padding-left:24px;padding-right:24px}.sx-stats{grid-template-columns:repeat(2,1fr)}.sx-grid{grid-template-columns:1fr}.sx-hero{padding:22px 30px}.sx-qas{grid-template-columns:1fr}}
body.dark .sx-stat,body.dark .sx-card,body.dark .sx-tabs{background:#0f1d3a;border-color:#1f3157}
body.dark .sx,body.dark .sx-m,body.dark #cadet-portal.sx-on>.cp-body{background:#081430;color:#e2e8f0}
body.dark .sx-ch h3,body.dark .sx-qt b,body.dark .sx-cn,body.dark .sx-sv,body.dark .sx-rv,body.dark .sx-hs b,body.dark .sx-vs b{color:#e2e8f0}
body.dark .sx-qa{background:#13244a;border-color:#1f3157}.sx-row,body.dark .sx-cert{border-color:#eef2f8}body.dark .sx-row,body.dark .sx-cert,body.dark .sx-ch{border-color:#1f3157}
.sx-d .sx-sic{width:44px;height:44px}.sx-d .sx-chi{width:36px;height:36px}.sx-d .sx-hmeta{margin-top:8px}.sx-d .sx-ver{margin-top:8px}.sx-d .sx-upd{padding:11px 20px}
.sx-d .sx-qa{padding:9px 12px}.sx-d .sx-qic{width:36px;height:36px}.sx-d .sx-cert{padding:7px 4px}.sx-d .sx-ht{padding:6px 16px 2px}.sx-d .sx-note{margin-top:8px;padding:9px 12px}
/* profile summary viewer */
.sx-pdf{position:fixed;inset:0;z-index:10070;display:flex;flex-direction:column;background:#e9eef7}
.sx-pdfbar{display:flex;align-items:center;gap:10px;height:56px;padding:0 16px;background:linear-gradient(90deg,#061937,#0a2552);color:#fff;font-family:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif}
.sx-pdfbar b{font-size:16px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-pdfbar button{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:10px;border:0;font:inherit;font-weight:700;font-size:13.5px;cursor:pointer}
.sx-pdfbk{background:rgba(255,255,255,.12);color:#fff}.sx-pdfpr{background:linear-gradient(135deg,#2fd4f5,#16b2e8);color:#062a52}
.sx-pdf iframe{flex:1;width:min(100%,900px);margin:14px auto;border:0;border-radius:10px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.15)}
@media (max-width:600px){.sx-pdf iframe{margin:0;border-radius:0;width:100%}.sx-pdfbar span.t{display:none}}

/* slx-capdesign-css */

/* ═══ Captain portal — more attractive look ═══ */
#captain-portal{background:radial-gradient(1200px 500px at 85% -10%,#dbeafe 0,transparent 60%),#eef3fb !important}
.cap-sb{position:relative;overflow:hidden;background:linear-gradient(180deg,#072a63 0%,#04204d 55%,#03183b 100%) !important}
.cap-sb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:230px;pointer-events:none;opacity:.55;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 232 230'%3E%3Cg fill='none' stroke='%2393c5fd' stroke-opacity='.35'%3E%3Ccircle cx='170' cy='70' r='44'/%3E%3Ccircle cx='170' cy='70' r='32' stroke-dasharray='2 4'/%3E%3Cpath d='M170 18v104M118 70h104'/%3E%3C/g%3E%3Cpath d='M170 34l8 36-8 36-8-36z' fill='%2393c5fd' fill-opacity='.25'/%3E%3Cpath d='M30 150h90l-12 14H42z' fill='%231e3a8a'/%3E%3Cpath d='M74 148V104' stroke='%23cbd5e1' stroke-width='2'/%3E%3Cpath d='M76 108c18 8 26 22 28 38H76z' fill='%23e2e8f0' fill-opacity='.7'/%3E%3Cpath d='M0 176q29-12 58 0t58 0 58 0 58 0V230H0z' fill='%231d4ed8' fill-opacity='.35'/%3E%3Cpath d='M0 192q29-12 58 0t58 0 58 0 58 0V230H0z' fill='%231e40af' fill-opacity='.45'/%3E%3C/svg%3E") bottom/100% no-repeat}
.cap-sb>*{position:relative;z-index:1}
.cap-br i{box-shadow:0 6px 16px rgba(56,189,248,.45)}
.cap-ni.on{background:linear-gradient(135deg,#2563eb,#38bdf8) !important;box-shadow:0 8px 20px rgba(37,99,235,.45) !important}
.cap-tp{box-shadow:0 10px 26px rgba(30,60,120,.10) !important}
/* banner */
.capx-hero{position:relative;overflow:hidden;margin:16px 0 4px;min-height:150px;padding:22px 26px;border-radius:20px;color:#fff;
  background:radial-gradient(500px 200px at 20% 0%,rgba(56,189,248,.35),transparent 70%),linear-gradient(120deg,#082a66 0%,#0b3a8f 50%,#1d5bd8 100%);
  box-shadow:0 14px 34px rgba(8,42,102,.28)}
.capx-art{position:absolute;right:0;bottom:0;height:100%;width:min(70%,640px);pointer-events:none}
.capx-txt{position:relative;z-index:1;max-width:56%}
.capx-tag{display:inline-block;padding:4px 12px;border-radius:12px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);font-size:11.5px;font-weight:700;letter-spacing:.3px;margin-bottom:6px}
.capx-hero .cap-ttl{color:#fff;margin:4px 0 6px !important;font-size:28px}
.capx-hero .cap-sub{color:#cfe2ff !important;font-size:13px;line-height:1.5}
.capx-cad,.capx-rep{background:radial-gradient(500px 200px at 20% 0%,rgba(56,189,248,.35),transparent 70%),linear-gradient(120deg,#063b5e 0%,#0b5b8f 50%,#0ea5e9 100%)}
.capx-co,.capx-cr{background:radial-gradient(500px 200px at 20% 0%,rgba(96,165,250,.35),transparent 70%),linear-gradient(120deg,#1e1b4b 0%,#1e3a8a 50%,#2563eb 100%)}
/* stat cards with coloured icons */
.cap-st .cap-cd{position:relative;overflow:hidden;padding-top:16px;border:1px solid #e3eaf5}
.cap-st .cap-cd>.cap-sub{padding-right:46px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cap-st .cap-cd::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--capx,#2563eb)}
.cap-st .cap-cd::after{content:"";position:absolute;right:-30px;bottom:-30px;width:110px;height:110px;border-radius:50%;background:var(--capx,#2563eb);opacity:.07}
.capx-ic{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--capx,#2563eb);box-shadow:0 8px 18px color-mix(in srgb,var(--capx,#2563eb) 40%,transparent)}
.capx-c0{--capx:#2563eb}.capx-c1{--capx:#0ea5e9}.capx-c2{--capx:#f59e0b}.capx-c3{--capx:#16a34a}.capx-c4{--capx:#8b5cf6}.capx-c5{--capx:#ef4444}
.cap-cd{border:1px solid #e3eaf5}
.cap-h{display:flex;align-items:center;gap:8px}
.cap-h::before{content:"";width:6px;height:18px;border-radius:3px;background:linear-gradient(180deg,#38bdf8,#2563eb)}
.cap-tbl th{background:#f5f8fd}
.cap-bar i{background-image:linear-gradient(90deg,rgba(255,255,255,.0),rgba(255,255,255,.35))}
@media (max-width:800px){.capx-txt{max-width:100%}.capx-art{width:100%;opacity:.35}.capx-hero .cap-ttl{font-size:22px}}
/* cadet profile: "Update my details" in a calm style */
.sx .sx-upd{background:rgba(255,255,255,.14) !important;color:#fff !important;border:1px solid rgba(255,255,255,.4) !important;box-shadow:none !important;backdrop-filter:blur(6px)}
.sx .sx-upd:hover{background:rgba(255,255,255,.24) !important}

/* slx-nav-tree */

/* ── folder = one card: header on top, its tabs inside underneath ── */
html body .sidenav:not(.collapsed):not(.auto-collapsed) .nav-mother,html body .sidenav.auto-collapsed:hover .nav-mother{margin:12px 10px 0 !important;padding:9px 8px !important;gap:9px !important;background-color:rgba(255,255,255,.08) !important;border:1px solid rgba(255,255,255,.13);border-radius:12px;background-image:none !important}
html body .sidenav:not(.collapsed):not(.auto-collapsed) .nav-mother:not(.collapsed-folder),html body .sidenav.auto-collapsed:hover .nav-mother:not(.collapsed-folder){border-radius:12px 12px 0 0}
html body .sidenav:not(.collapsed):not(.auto-collapsed) .nav-mother:hover,html body .sidenav.auto-collapsed:hover .nav-mother:hover{background-color:rgba(255,255,255,.13) !important}
html body .sidenav:not(.collapsed):not(.auto-collapsed) .nav-mother .nav-label,html body .sidenav.auto-collapsed:hover .nav-mother .nav-label{display:flex;flex-direction:column;line-height:1.15;color:#fff !important;font-size:11px;letter-spacing:.02em;font-weight:800;min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis}
html body .sidenav:not(.collapsed):not(.auto-collapsed) .nav-msub,html body .sidenav.auto-collapsed:hover .nav-msub{font-size:10px;font-weight:600;letter-spacing:0;text-transform:none;color:#8fb0e6;margin-top:2px}
html body .sidenav:not(.collapsed):not(.auto-collapsed) .nav-mcount,html body .sidenav.auto-collapsed:hover .nav-mcount{margin-left:4px;background:rgba(255,255,255,.14);color:#fff;border-radius:999px;padding:2px 7px;font-size:10px;font-weight:800;flex-shrink:0}
html body .sidenav:not(.collapsed):not(.auto-collapsed) .nav-mother .nav-caret,html body .sidenav.auto-collapsed:hover .nav-mother .nav-caret{margin-left:4px !important}
html body .sidenav:not(.collapsed):not(.auto-collapsed) .nav-group-body,html body .sidenav.auto-collapsed:hover .nav-group-body{margin:0 10px 4px 24px !important;padding:5px 6px 6px !important;background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.13) !important;border-top:0 !important;border-radius:0 0 12px 12px;overflow:visible}
html body .sidenav:not(.collapsed):not(.auto-collapsed) .nav-mother:has(+ .nav-group-body .nav-item.active), .nav-mother:has(+ .nav-group-body .nav-item.active) + .nav-group-body,html body .sidenav.auto-collapsed:hover .nav-mother:has(+ .nav-group-body .nav-item.active), .nav-mother:has(+ .nav-group-body .nav-item.active) + .nav-group-body{border-color:rgba(91,155,248,.55) !important}
html body .sidenav:not(.collapsed):not(.auto-collapsed) .nav-group-body .nav-item,html body .sidenav.auto-collapsed:hover .nav-group-body .nav-item{background-color:transparent !important;border:0 !important;margin:2px 0 2px 6px !important;padding:6px 8px 6px 10px !important;font-size:11.5px;font-weight:600;color:#cfe0fa;border-radius:9px}
html body .sidenav:not(.collapsed):not(.auto-collapsed) .nav-group-body .nav-item::after,html body .sidenav.auto-collapsed:hover .nav-group-body .nav-item::after{content:none !important}
html body .sidenav:not(.collapsed):not(.auto-collapsed) .nav-group-body .nav-item:hover,html body .sidenav.auto-collapsed:hover .nav-group-body .nav-item:hover{background-color:rgba(255,255,255,.08) !important;color:#fff}
html body .sidenav:not(.collapsed):not(.auto-collapsed) .nav-group-body .nav-item .nav-icon,html body .sidenav.auto-collapsed:hover .nav-group-body .nav-item .nav-icon{width:18px !important;height:18px !important}
html body .sidenav:not(.collapsed):not(.auto-collapsed) .nav-group-body .nav-item .nav-icon svg,html body .sidenav.auto-collapsed:hover .nav-group-body .nav-item .nav-icon svg{width:15px !important;height:15px !important;opacity:.85}
html body .sidenav:not(.collapsed):not(.auto-collapsed) .nav-group-body .nav-item.active,html body .sidenav.auto-collapsed:hover .nav-group-body .nav-item.active{color:#fff !important}
html body .sidenav:not(.collapsed):not(.auto-collapsed) .nav-group-body .nav-count,html body .sidenav.auto-collapsed:hover .nav-group-body .nav-count{background:rgba(255,255,255,.12);padding:1px 7px;font-size:10px}
html body .sidenav:not(.collapsed):not(.auto-collapsed) .nav-group-body .nav-item.active .nav-count,html body .sidenav.auto-collapsed:hover .nav-group-body .nav-item.active .nav-count{background:rgba(255,255,255,.28)}
html body .sidenav:not(.collapsed):not(.auto-collapsed) .nav-empty-note,html body .sidenav.auto-collapsed:hover .nav-empty-note{margin:2px 0;border-radius:9px;padding:6px 10px !important}
html body .sidenav.collapsed .nav-msub,html body .sidenav.collapsed .nav-mcount,html body .sidenav.auto-collapsed:not(:hover) .nav-msub,html body .sidenav.auto-collapsed:not(:hover) .nav-mcount{display:none}

/* md-brand-css */

:root{--md-logo:url(../img/c-3a3f0c660a.png)}
.md-logo{display:inline-block;flex:none;width:1.05em;height:1.32em;vertical-align:middle;background:var(--md-logo) center/contain no-repeat;animation:mdFloat 3.6s ease-in-out infinite;filter:drop-shadow(0 .12em .18em rgba(20,80,200,.28));will-change:transform}
@keyframes mdFloat{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-.07em) rotate(-1.5deg)}60%{transform:translateY(-.1em) rotate(1.2deg)}}
@media (prefers-reduced-motion:reduce){.md-logo{animation:none}}
.login-anchor,.topbar-anchor{animation:none !important;filter:none !important}
.login-anchor .md-logo{font-size:52px}
.topbar-anchor{display:inline-flex;align-items:center}
html body .sidenav-brand::before{content:"" !important;display:block !important;width:26px !important;height:33px !important;border-radius:0 !important;background:var(--md-logo) center/contain no-repeat !important;box-shadow:none !important;animation:mdFloat 3.6s ease-in-out infinite;font-size:26px}
html body .sidenav-brand{min-width:0;white-space:nowrap}
.hsh-anchor{display:inline-flex;align-items:center}
.pf-post-logo{background:#061433 !important;overflow:hidden}.pf-post-logo .md-logo{font-size:24px;animation:none}
.cap-br i.md-logo{width:30px !important;height:38px !important;border-radius:0 !important;background:var(--md-logo) center/contain no-repeat !important;box-shadow:none !important;font-size:16px}
.sx-logo .md-logo{filter:drop-shadow(0 2px 6px rgba(56,189,248,.35))}
.about-logo .md-logo{font-size:58px}

/* slx-cv-css */

body.cvx-lock{overflow:hidden}
.cvx{position:fixed;inset:0;z-index:10140;background:#eef3fa;color:#0f1d3a;display:flex;flex-direction:column;font-family:"Segoe UI",system-ui,Roboto,Arial,sans-serif;font-size:14px}
.cvx *{box-sizing:border-box}
.cvx-load{margin:auto;display:flex;gap:10px;align-items:center;color:#4b5d7e;font-weight:600}
.cvx-spin{width:16px;height:16px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;display:inline-block;animation:cvxs .7s linear infinite;flex:none}
@keyframes cvxs{to{transform:rotate(360deg)}}
.cvx-bar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:linear-gradient(135deg,#0b2a5c,#123d82);color:#fff;box-shadow:0 2px 10px rgba(3,15,40,.25);flex:none}
.cvx-bk{display:flex;align-items:center;gap:4px;border:0;background:rgba(255,255,255,.12);color:#fff;border-radius:10px;padding:8px 12px 8px 8px;font-weight:700;font-size:14px;cursor:pointer}
.cvx-bk:hover{background:rgba(255,255,255,.2)}
.cvx-tt{flex:1;min-width:0;display:flex;flex-direction:column}.cvx-tt b{font-size:17px}.cvx-tt small{font-size:12px;color:#b9cdf0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cvx-acts{display:flex;gap:8px;flex-wrap:wrap}
.cvx-btn{display:flex;align-items:center;gap:7px;border:0;background:#fff;color:#0f1d3a;border-radius:10px;padding:8px 13px;font-weight:700;font-size:13.5px;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.cvx-btn:hover{background:#f1f6ff}.cvx-btn:disabled{opacity:.7;cursor:wait}
.cvx-sv{background:rgba(255,255,255,.14);color:#fff;box-shadow:none;border:1px solid rgba(255,255,255,.28)}.cvx-sv:hover{background:rgba(255,255,255,.22)}
.cvx-tabs{display:none}
.cvx-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(380px,560px) 1fr}
.cvx-ed{overflow:auto;padding:16px 16px 60px;border-right:1px solid #d7e1f0}
.cvx-intro{background:#fff;border:1px solid #d7e1f0;border-radius:12px;padding:11px 13px;font-size:13px;line-height:1.55;color:#3c4d6d;margin-bottom:12px}
.cvx-ref{display:inline-flex;align-items:center;gap:5px;margin-top:6px;border:1px solid #c9d7ee;background:#f5f8fe;color:#1d4ed8;border-radius:8px;padding:4px 9px;font-weight:700;font-size:12px;cursor:pointer}
.cvx-sec{background:#fff;border:1px solid #d7e1f0;border-radius:12px;padding:12px 13px 13px;margin-bottom:12px}
.cvx-sec h3{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:14.5px;color:#0b2a5c}.cvx-sec h3 i{font-style:normal;font-size:16px}
.cvx-g{display:grid;grid-template-columns:1fr 1fr;gap:9px 10px}.cvx-g label{display:flex;flex-direction:column;gap:4px;min-width:0}.cvx-g label.w{grid-column:1/-1}
.cvx-g label>span{font-size:11.5px;font-weight:700;color:#5a6b8a}
.cvx input,.cvx select,.cvx textarea{width:100%;min-width:0;border:1px solid #cfdbec;background:#fbfdff;color:#0f1d3a;border-radius:8px;padding:7px 9px;font:inherit;font-size:13.5px}
.cvx input:focus,.cvx select:focus,.cvx textarea:focus{outline:2px solid #3b82f6;outline-offset:-1px;border-color:transparent;background:#fff}
.cvx textarea{resize:vertical;line-height:1.45}.cvx-prof{min-height:96px}
.cvx-hint{font-size:11.5px;color:#7a8aa6;margin-top:5px}
.cvx-tb{display:flex;flex-direction:column;gap:6px}
.cvx-tr{display:grid;gap:6px;align-items:center}
.cvx-th span{font-size:11px;font-weight:800;color:#5a6b8a;text-transform:uppercase;letter-spacing:.3px}
.cvx-rl{font-size:12.5px;font-style:italic;color:#33456a;display:flex;flex-direction:column;gap:4px}
.cvx-rm{width:30px;height:30px;border:0;border-radius:8px;background:#fdecec;color:#b91c1c;font-size:17px;cursor:pointer;line-height:1}
.cvx-add{align-self:flex-start;border:1px dashed #9db6dd;background:#f5f8fe;color:#1d4ed8;border-radius:8px;padding:6px 11px;font-weight:700;font-size:12.5px;cursor:pointer;margin-top:2px}
.cvx-ty{display:flex;gap:16px;margin:-2px 0 10px;font-size:13px;font-weight:600}.cvx-ty label{display:flex;align-items:center;gap:6px;cursor:pointer}.cvx-ty input{width:auto}
.cvx-pv{min-width:0;min-height:0;background:#d9e2ef;display:flex}
.cvx-pvw{flex:1;overflow:auto;padding:12px 14px;display:flex;justify-content:center;align-items:flex-start}
.cvx-pv iframe{border:0;background:#fff;box-shadow:0 6px 24px rgba(15,29,58,.2);flex:none;display:block}
@media (max-width:860px){
  .cvx-bar{flex-wrap:wrap;padding:8px 10px;gap:8px}.cvx-tt{order:0}.cvx-acts{order:2;width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  .cvx-btn{justify-content:center;padding:8px 6px;font-size:12.5px}
  .cvx-tabs{display:flex;background:#fff;border-bottom:1px solid #d7e1f0;flex:none}.cvx-tabs button{flex:1;border:0;background:none;padding:10px;font-weight:700;color:#5a6b8a;border-bottom:3px solid transparent;cursor:pointer;font-size:14px}.cvx-tabs button.on{color:#0b2a5c;border-color:#2f6cf6}
  .cvx-body{display:block;position:relative}.cvx-ed{height:100%;border:0;padding:12px 10px 60px}.cvx-pv{display:none;height:100%}
  .cvx.cvx-show-pv .cvx-ed{display:none}.cvx.cvx-show-pv .cvx-pv{display:flex}
  .cvx-pvw{padding:8px 4px;overflow:auto}
}
@media (max-width:480px){.cvx-g{grid-template-columns:1fr}.cvx-tr{gap:4px}.cvx input{padding:7px 6px;font-size:13px}}
/* captain: no decorative circles on the stat cards, a little smaller overall */
#captain-portal .cap-st .cap-cd::after,#captain-portal .cap-cd::after{display:none !important;content:none !important}
#captain-portal{zoom:.9}
#captain-portal .capx-ic{box-shadow:0 3px 8px rgba(15,23,42,.14) !important}

/* md-login-css */

@media (min-width:641px){#login-screen.login-screen{zoom:.97}}
@media (min-width:641px) and (max-height:720px){#login-screen.login-screen{zoom:.86}}
#login-screen.login-screen{overflow-y:auto !important;align-items:safe center !important;padding:14px 0 !important}
#login-screen .login-card{margin:auto 0;flex:none}

/* ── Login: light glass card over the sea (MarCadInfo) ── */
#login-screen.login-screen{background:radial-gradient(1000px 640px at 20% 20%,#0e3282 0%,rgba(14,50,130,0) 62%),radial-gradient(900px 600px at 85% 30%,#0b2b70 0%,rgba(11,43,112,0) 60%),linear-gradient(180deg,#071b48 0%,#061536 60%,#05112c 100%) !important}
#login-screen.login-screen::before{opacity:.55;background-image:radial-gradient(1px 1px at 12% 18%,#9cc4ff 50%,transparent 51%),radial-gradient(1px 1px at 68% 12%,#9cc4ff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 58% 30%,#5fa8ff 50%,transparent 51%),radial-gradient(1px 1px at 84% 52%,#9cc4ff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 30% 62%,#5fa8ff 50%,transparent 51%) !important}
#login-screen .login-particle{display:none}
#login-screen .lg-sea{position:absolute;left:0;right:0;bottom:0;height:42vh;pointer-events:none;z-index:0}
#login-screen .lg-sea{overflow:hidden}#login-screen .lg-sea svg{width:calc(100% + 120px);height:100%;display:block}
#login-screen .lg-sea .w1{fill:#123a8c;opacity:.6;animation:lgSea 14s ease-in-out infinite alternate}
#login-screen .lg-sea .w2{fill:#0c2a6b;opacity:.85;animation:lgSea 18s ease-in-out infinite alternate-reverse}
#login-screen .lg-sea .w3{fill:#061536;animation:lgSea 22s ease-in-out infinite alternate}
@keyframes lgSea{from{transform:translateX(0)}to{transform:translateX(-40px)}}
#login-screen .login-card{background:linear-gradient(160deg,rgba(22,52,120,.62),rgba(8,26,68,.72)) !important;border:1px solid rgba(110,150,255,.24) !important;border-radius:30px !important;box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08) !important;backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);overflow:hidden;padding:34px 34px 96px !important;width:510px !important;max-width:94vw !important;color:#e8efff}
#login-screen .login-card.expanded{width:940px !important}
#login-screen .login-left{width:440px !important;max-width:100%;position:relative;z-index:1}
#login-screen .login-right{position:relative;z-index:1;border-left-color:rgba(110,150,255,.2) !important}
#login-screen .lg-deco{position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;z-index:0}
#login-screen .lg-deco svg{position:absolute;inset:0;width:100%;height:100%}
#login-screen .lg-deco i{position:absolute;left:50%;bottom:40px;transform:translateX(-50%);color:#7fb0f4;opacity:.7;display:flex}#login-screen .lg-deco .lg-a{width:26px;height:26px}
#login-screen .login-backfeed{color:#9fb2d8 !important;font-weight:600}
#login-screen .login-backfeed:hover{color:#fff !important}
#login-screen .login-anchor{margin:4px 0 8px !important}
#login-screen .login-anchor .md-logo{font-size:62px}
#login-screen .login-title{font-family:var(--font) !important;font-size:36px !important;font-weight:800 !important;color:#ffffff !important;letter-spacing:-.8px !important;margin-bottom:8px !important}
#login-screen .login-sub{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px !important;color:#c8d5ef !important;letter-spacing:.1px !important;margin-bottom:26px !important;opacity:1 !important}
#login-screen .login-sub i{font-style:normal;color:#38bdf8;display:inline-flex}#login-screen .login-sub .lg-a{width:15px;height:15px}
#login-screen .login-sub span{color:#6f86b8}
#login-screen .login-path-card{background:linear-gradient(160deg,rgba(26,60,135,.55),rgba(12,34,86,.6)) !important;border:1px solid rgba(110,150,255,.22) !important;border-radius:18px !important;padding:18px 18px !important;gap:16px !important;box-shadow:0 14px 32px -14px rgba(0,0,0,.6) !important}
#login-screen .login-path-card:hover{transform:translateY(-2px);border-color:rgba(120,170,255,.45) !important}
#login-screen .login-path-icon,#login-screen .login-form-icon{flex:none;width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 30%,#3b82f6,#1d4ed8 70%);border:2px solid rgba(147,197,253,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 22px rgba(0,0,0,.3);color:#fff;font-size:0 !important}
#login-screen .login-path-icon svg{width:38px;height:38px}
#login-screen .login-form-icon{width:50px;height:50px}#login-screen .login-form-icon svg{width:30px;height:30px}
#login-screen .login-path-title{font-size:17px !important;color:#ffffff !important;font-weight:800 !important;margin-bottom:5px !important;white-space:nowrap}#login-screen .login-path-info{min-width:0}
#login-screen .login-path-desc{font-size:12.5px !important;color:#a9bbdf !important}
#login-screen .login-path-btn{position:relative;margin-left:14px;padding:12px 20px !important;border-radius:12px !important;font-size:15px !important;background:linear-gradient(180deg,#1f6fe8,#1153c9) !important;border:1px solid #4f8fff !important;box-shadow:0 8px 20px rgba(17,83,201,.4) !important;color:#fff !important}
#login-screen .login-path-btn::before{content:"";position:absolute;left:-16px;top:-8px;bottom:-8px;width:1px;background:rgba(110,150,255,.22)}
#login-screen .login-path-btn:hover{filter:brightness(1.08)}
#login-screen .login-divider{color:#8ea3cc !important;font-size:13px !important;margin:16px 0 !important}
#login-screen .login-divider::before,#login-screen .login-divider::after{background:rgba(110,150,255,.2) !important}
#login-screen .login-form-title{color:#ffffff !important;font-size:19px !important;font-weight:800 !important}
#login-screen .login-form-desc{color:#a9bbdf !important;font-size:12px !important}
#login-screen .login-field label{color:#9fb2d8 !important;font-size:11px !important}
#login-screen .login-field input{background:rgba(5,18,48,.6) !important;border:1px solid rgba(110,150,255,.28) !important;color:#ffffff !important;border-radius:12px !important;padding:12px 14px !important}
#login-screen .login-field input::placeholder{color:#7083ab !important}
#login-screen .login-field input:focus{border-color:#3ba5ff !important;box-shadow:0 0 0 3px rgba(59,165,255,.2) !important}
#login-screen .login-btn{background:linear-gradient(180deg,#1f6fe8,#1153c9) !important;border:1px solid #4f8fff !important;border-radius:12px !important;font-size:15px !important;font-weight:700 !important;box-shadow:0 10px 22px rgba(11,58,168,.3) !important}
#login-screen .login-right-close{background:rgba(255,255,255,.08) !important;border:1px solid rgba(110,150,255,.3) !important;color:#fff !important}
#login-screen .login-right [style*="rgba(255,255,255"],#login-screen .login-right [style*="rgba(255, 255, 255"]{color:#9fb2d8 !important}
#login-screen .login-right a{color:#5fb4ff !important}
#login-screen .login-err{background:rgba(239,68,68,.14) !important;color:#fca5a5 !important}
@media (max-width:980px){#login-screen .login-card,#login-screen .login-card.expanded{width:calc((100vw - 28px) / var(--bz,1)) !important;max-width:510px !important;padding:26px 20px 92px !important}#login-screen .login-left{width:100% !important}#login-screen .login-right{border-top-color:rgba(110,150,255,.2) !important}}
@media (max-width:420px){#login-screen .login-title{font-size:30px !important}#login-screen .login-sub{font-size:12.5px !important;gap:6px}#login-screen .login-path-card{padding:14px !important;gap:12px !important}#login-screen .login-path-icon{width:52px;height:52px}#login-screen .login-path-icon svg{width:31px;height:31px}#login-screen .login-path-title{font-size:15px !important}#login-screen .login-path-btn{padding:10px 14px !important;font-size:14px !important;margin-left:10px}#login-screen .login-path-btn::before{left:-11px}}
@media (prefers-reduced-motion:reduce){#login-screen .lg-sea path{animation:none}}

#login-screen .login-right-close{top:0 !important;right:0 !important}
#login-screen .lg-deco{opacity:.55}
#login-screen .login-path-icon svg [stroke="#7fb0f4"]{stroke:#9fd0ff}
#login-screen .lp-ic-staff svg path:first-child{fill:#0b2f86}

/* ms-site-css */

/* ══ Website — deep-navy design (matches the reference picture) ══ */
html body #cinec-site{--bg:#061536;--bg-2:#0a1f4d;--card:rgba(14,38,92,.55);--card-2:rgba(20,50,115,.55);--ink:#f2f6ff;--ink-2:#a9bbdf;--line:rgba(110,150,255,.2);--violet:#2f8cff;--violet-br:#3ba5ff;--teal:#38bdf8;
  --ms-bg:radial-gradient(1100px 680px at 18% 22%,#0e3282 0%,rgba(14,50,130,0) 62%),radial-gradient(900px 640px at 82% 26%,#0b2b70 0%,rgba(11,43,112,0) 60%),linear-gradient(180deg,#071b48 0%,#061536 55%,#05112c 100%);
  --ms-card:linear-gradient(160deg,rgba(22,52,120,.55),rgba(10,30,76,.6));--ms-bd:rgba(110,150,255,.2);--ms-h:#ffffff;--ms-tx:#c8d5ef;--ms-mut:#9fb2d8;--ms-acc:#3ba5ff;--ms-cy:#38bdf8;
  background:var(--ms-bg) fixed !important;background-color:#061536 !important;color:var(--ms-tx)}
html body #cinec-site::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.55;background-image:radial-gradient(1px 1px at 12% 18%,#9cc4ff 50%,transparent 51%),radial-gradient(1px 1px at 68% 12%,#9cc4ff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 58% 30%,#5fa8ff 50%,transparent 51%),radial-gradient(1px 1px at 84% 52%,#9cc4ff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 30% 62%,#5fa8ff 50%,transparent 51%),radial-gradient(1px 1px at 92% 82%,#9cc4ff 50%,transparent 51%)}
/* header */
html body #cinec-site .instruments{padding:18px 3.2vw !important;background:transparent}
html body #cinec-site .instruments.stuck{background:rgba(6,21,54,.82) !important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--ms-bd);box-shadow:0 10px 30px rgba(0,0,0,.25)}
html body #cinec-site .brand .compass{width:46px !important;height:46px !important;border-radius:50% !important;background:radial-gradient(circle at 50% 40%,#0c2a66,#071a45) !important;border:2px solid var(--ms-cy) !important;box-shadow:0 0 0 3px rgba(56,189,248,.12),0 0 18px rgba(56,189,248,.25) !important;display:flex !important;align-items:center;justify-content:center;position:relative}
html body #cinec-site .brand .compass::before,html body #cinec-site .brand .compass::after{display:none !important}
html body #cinec-site .brand .needle{display:none !important}
html body #cinec-site .ms-anc{width:24px;height:24px;color:#e9f3ff}
html body #cinec-site .brand-name{font-family:var(--font,'Plus Jakarta Sans',system-ui,sans-serif) !important;font-size:1.32rem !important;font-weight:700 !important;color:#fff !important;letter-spacing:-.2px}
html body #cinec-site .brand-sub{color:var(--ms-cy) !important;font-size:.66rem !important;letter-spacing:.32em !important;margin-top:5px}
html body #cinec-site .nav-links{display:flex;align-items:center;gap:34px}
html body #cinec-site .nav-links a{color:#e8efff !important;font-weight:500 !important;font-size:1rem !important;background:none !important;border:0 !important;box-shadow:none !important;padding:6px 2px !important}
html body #cinec-site .nav-links a:hover{color:var(--ms-acc) !important}
html body #cinec-site .nav-links a.cta{background:linear-gradient(180deg,#1c63e0,#0f47b8) !important;border:1px solid #4d8dff !important;border-radius:10px !important;padding:10px 20px !important;color:#fff !important;font-weight:600 !important;box-shadow:0 8px 22px rgba(16,80,210,.35) !important}
html body #cinec-site .nav-links a.cta:hover{filter:brightness(1.1)}
html body #cinec-site .depth{display:none !important}
html body #cinec-site .ms-right{display:flex;align-items:center;gap:22px}
html body #cinec-site .ms-depth{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}
html body #cinec-site .ms-depth small{font-family:'Space Mono',ui-monospace,monospace;font-size:.62rem;letter-spacing:.22em;color:var(--ms-mut)}
html body #cinec-site .ms-depth b{font-family:'Space Mono',ui-monospace,monospace;font-size:1.05rem;color:var(--ms-acc);letter-spacing:.06em;font-weight:700}
html body #cinec-site .ms-sep{width:1px;height:30px;background:var(--ms-bd)}
html body #cinec-site .ms-theme{position:relative;width:64px;height:36px;border-radius:20px;border:1px solid rgba(160,190,255,.35);background:rgba(8,24,60,.6);color:#e8efff;cursor:pointer;display:flex;align-items:center;padding:0 8px;transition:background .25s}
html body #cinec-site .ms-theme svg{width:19px;height:19px;transition:opacity .25s,transform .35s}
html body #cinec-site .ms-theme .ms-moon{position:absolute;right:9px;opacity:0;transform:rotate(-40deg)}
html body #cinec-site.ms-light .ms-theme .ms-sun{opacity:0;transform:rotate(40deg)}
html body #cinec-site.ms-light .ms-theme .ms-moon{opacity:1;transform:none}
/* hero */
html body #cinec-site .hero{background:transparent !important;border-radius:0 !important;min-height:auto !important;padding:118px 5.5vw 18px !important;overflow:visible !important}
html body #cinec-site .hero::before,html body #cinec-site .hero::after{display:none !important}
html body #cinec-site .hero-inner{max-width:1320px;margin:0 auto;width:100%}
html body #cinec-site .eyebrow{display:inline-flex !important;align-items:center;gap:12px;color:var(--ms-cy) !important;font-family:'Space Mono',ui-monospace,monospace !important;font-size:.82rem !important;letter-spacing:.34em !important;text-transform:uppercase;font-weight:700 !important;background:none !important;border:0 !important;padding:0 !important}
html body #cinec-site .eyebrow i{font-style:normal;color:var(--ms-cy);opacity:.9;letter-spacing:0;margin:0 2px}
html body #cinec-site .ms-eanc{width:20px;height:20px;flex:none}
html body #cinec-site .hero h1{color:#fff !important;font-family:var(--font,'Plus Jakarta Sans',system-ui,sans-serif) !important;font-weight:800 !important;font-size:clamp(2.6rem,6vw,5.4rem) !important;line-height:1.02 !important;letter-spacing:-.035em !important;margin:26px 0 26px !important;text-shadow:0 6px 30px rgba(0,0,0,.25)}
html body #cinec-site .hero h1 .lt{color:var(--ms-acc) !important;background:none !important;-webkit-text-fill-color:currentColor !important}
html body #cinec-site .hero .lead{color:var(--ms-tx) !important;font-size:clamp(1.05rem,1.8vw,1.55rem) !important;font-weight:400 !important;max-width:640px}
html body #cinec-site .cw-hero-btns{margin-top:36px !important}
html body #cinec-site .cw-btn.btn-primary{display:inline-flex !important;align-items:center;gap:12px;background:linear-gradient(180deg,#1f6fe8,#1153c9) !important;border:1px solid #4f8fff !important;color:#fff !important;border-radius:10px !important;padding:16px 26px !important;font-size:1.15rem !important;font-weight:600 !important;box-shadow:0 14px 34px rgba(17,83,201,.4) !important;text-decoration:none}
html body #cinec-site .cw-btn.btn-primary:hover{filter:brightness(1.1);transform:translateY(-2px)}
html body #cinec-site .ms-explore svg{width:26px;height:26px}
html body #cinec-site .coords,html body #cinec-site .scroll-cue{display:none !important}
/* compass — same spinning rose, darker dial */
html body #cinec-site .disc{background:radial-gradient(circle at 50% 42%,#123a8c 0%,#0b2560 48%,#081a47 72%,#06143a 100%) !important;box-shadow:0 0 0 18px rgba(12,40,100,.45),0 0 0 19px rgba(120,160,255,.14),0 0 0 46px rgba(10,34,90,.22),0 40px 90px -20px rgba(0,0,0,.7),inset 0 0 40px rgba(0,0,0,.45) !important;width:min(50vh,400px) !important;height:min(50vh,400px) !important}
html body #cinec-site .disc::before{content:"";position:absolute;inset:-64px;border-radius:50%;border:1px dashed rgba(90,150,255,.35);pointer-events:none}
html body #cinec-site .disc::after{content:"";position:absolute;inset:-64px;border-radius:50%;background:radial-gradient(circle at 50% 0,#5fb4ff 0 3px,transparent 4px),radial-gradient(circle at 2% 40%,#3d8cff 0 4px,transparent 5px);pointer-events:none;animation:spin 60s linear infinite}
/* feature cards + quote */
html body #cinec-site .ms-feats-wrap{position:relative;z-index:1;max-width:1320px;margin:0 auto;padding:10px 5.5vw 30px}
html body #cinec-site .ms-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
html body #cinec-site .ms-feat{position:relative;display:flex;gap:16px;align-items:flex-start;padding:24px 20px 64px;border-radius:16px;background:var(--ms-card);border:1px solid var(--ms-bd);color:inherit;text-decoration:none;box-shadow:0 18px 40px -20px rgba(0,0,0,.6);transition:transform .25s,border-color .25s,box-shadow .25s}
html body #cinec-site .ms-feat:hover{transform:translateY(-4px);border-color:rgba(120,170,255,.45);box-shadow:0 24px 50px -20px rgba(0,0,0,.7)}
html body #cinec-site .ms-fi{flex:none;width:68px;height:68px;border-radius:50%;display:flex !important;align-items:center;justify-content:center;color:#fff;font-size:0 !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 22px rgba(0,0,0,.3)}
html body #cinec-site .ms-fi svg{width:32px;height:32px}
html body #cinec-site .ms-fi.b{background:radial-gradient(circle at 35% 30%,#3b82f6,#1d4ed8 70%);border:2px solid rgba(147,197,253,.4)}
html body #cinec-site .ms-fi.t{background:radial-gradient(circle at 35% 30%,#14b8a6,#0f766e 70%);border:2px solid rgba(94,234,212,.35)}
html body #cinec-site .ms-fi.p{background:radial-gradient(circle at 35% 30%,#8b5cf6,#5b21b6 70%);border:2px solid rgba(196,181,253,.35)}
html body #cinec-site .ms-fi.g{background:radial-gradient(circle at 35% 30%,#d4a64a,#94681c 70%);border:2px solid rgba(253,224,160,.4)}
html body #cinec-site .ms-ft{display:flex;flex-direction:column;gap:9px;min-width:0}
html body #cinec-site .ms-ft b{color:var(--ms-h);font-size:1.18rem;font-weight:600}
html body #cinec-site .ms-ft span{color:var(--ms-tx);font-size:.93rem;line-height:1.5}
html body #cinec-site .ms-fa{position:absolute;right:20px;bottom:18px;width:40px;height:40px;border-radius:50%;background:rgba(150,180,240,.14);border:1px solid rgba(150,180,240,.18);display:flex;align-items:center;justify-content:center;color:#fff;transition:background .2s}
html body #cinec-site .ms-feat:hover .ms-fa{background:#1f6fe8}
html body #cinec-site .ms-fa svg{width:18px;height:18px}
html body #cinec-site .ms-quote{position:relative;overflow:hidden;display:flex;align-items:center;gap:26px;margin-top:22px;padding:34px 40px;border-radius:16px;background:linear-gradient(100deg,rgba(18,46,110,.75),rgba(12,34,86,.7));border:1px solid var(--ms-bd);min-height:130px}
html body #cinec-site .ms-qm{font-family:Georgia,serif;font-size:5.4rem;line-height:.6;color:var(--ms-acc);font-weight:700;margin-top:22px;position:relative;z-index:1}
html body #cinec-site .ms-qt{display:flex;flex-direction:column;gap:8px;position:relative;z-index:1}
html body #cinec-site .ms-qt b{color:#fff;font-size:1.3rem;font-weight:500}
html body #cinec-site .ms-qt span{color:var(--ms-tx);font-size:1.08rem}
html body #cinec-site .ms-lh{position:absolute;right:0;bottom:0;height:100%;width:min(60%,560px);pointer-events:none}
/* lower sections in the same style */
html body #cinec-site .block{position:relative;z-index:1}
html body #cinec-site h2{color:#fff !important}
html body #cinec-site .intake-head p,html body #cinec-site .sec-intro,html body #cinec-site .harbor p{color:var(--ms-tx) !important}
html body #cinec-site .intake-head .eyebrow,html body #cinec-site .harbor .eyebrow,html body #cinec-site #contact .eyebrow{justify-content:center}
html body #cinec-site .sec-num{background:rgba(59,165,255,.14) !important;color:var(--ms-acc) !important;border:1px solid rgba(59,165,255,.35) !important}
html body #cinec-site .carousel{border:1px solid var(--ms-bd) !important;box-shadow:0 30px 60px -30px rgba(0,0,0,.8) !important;border-radius:18px !important}
html body #cinec-site .carousel-btn{background:rgba(6,21,54,.75) !important;border:1px solid var(--ms-bd) !important;color:#fff !important}
html body #cinec-site .rank{background:var(--ms-card) !important;border:1px solid var(--ms-bd) !important;border-radius:16px !important;box-shadow:0 18px 40px -20px rgba(0,0,0,.6) !important}
html body #cinec-site .rank.rank-top{background:linear-gradient(160deg,rgba(40,80,170,.6),rgba(16,40,100,.65)) !important;border-color:rgba(120,170,255,.45) !important}
html body #cinec-site .rank .rank-ico{width:56px !important;height:56px !important;margin-bottom:14px}
html body #cinec-site .rank .rank-ico svg{width:26px;height:26px}
html body #cinec-site .rank-step{color:var(--ms-cy) !important}
html body #cinec-site .rank h3{color:#fff !important}
html body #cinec-site .rank p{color:var(--ms-tx) !important}
html body #cinec-site .rank-cert{background:rgba(59,165,255,.14) !important;color:#bfe0ff !important;border:1px solid rgba(59,165,255,.3) !important}
html body #cinec-site .rank-arrow{color:var(--ms-acc) !important}
html body #cinec-site .contact-card{background:var(--ms-card) !important;border:1px solid var(--ms-bd) !important;border-radius:16px !important}
html body #cinec-site .cline h4{color:#fff !important}
html body #cinec-site .cline span,html body #cinec-site .cline a{color:var(--ms-tx) !important}
html body #cinec-site .cico{width:44px !important;height:44px !important;border-radius:50% !important;display:flex !important;align-items:center;justify-content:center;flex:none;background:radial-gradient(circle at 35% 30%,#3b82f6,#1d4ed8 70%) !important;color:#fff !important;font-size:0 !important;border:1px solid rgba(147,197,253,.35)}
html body #cinec-site .cico svg{width:20px;height:20px}
html body #cinec-site .contact-map{border:1px solid var(--ms-bd) !important;border-radius:16px !important;overflow:hidden;background:#0a1f4d !important}
html body #cinec-site .harbor{background:linear-gradient(120deg,rgba(20,54,130,.8),rgba(10,30,80,.85)) !important;border:1px solid var(--ms-bd);border-radius:20px !important}
html body #cinec-site footer{color:var(--ms-mut) !important;border-top:1px solid var(--ms-bd)}
html body #cinec-site footer a{color:var(--ms-acc) !important}
html body #cinec-site .ms-fbrand{display:inline-flex;align-items:center;gap:8px}html body #cinec-site .ms-fbrand svg{width:15px;height:15px;color:var(--ms-cy)}
@media (max-width:880px){html body #cinec-site .disc{width:260px !important;height:260px !important;box-shadow:0 0 0 12px rgba(12,40,100,.45),0 0 0 13px rgba(120,160,255,.14),0 30px 60px -20px rgba(0,0,0,.7),inset 0 0 30px rgba(0,0,0,.45) !important}html body #cinec-site .disc::before,html body #cinec-site .disc::after{inset:-34px}html body #cinec-site .hero-stage{height:340px !important}}
@media (max-width:1100px){html body #cinec-site .ms-feats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){html body #cinec-site .ms-depth,html body #cinec-site .ms-sep{display:none}html body #cinec-site .nav-links{gap:18px}html body #cinec-site .hero{padding-top:120px !important}}
@media (max-width:640px){
  html body #cinec-site .instruments{padding:12px 14px !important}
  html body #cinec-site .brand .compass{width:38px !important;height:38px !important}html body #cinec-site .ms-anc{width:20px;height:20px}
  html body #cinec-site .brand-name{font-size:1.02rem !important}html body #cinec-site .brand-sub{font-size:.5rem !important;letter-spacing:.24em !important}
  html body #cinec-site .nav-links a:not(.cta){display:none}html body #cinec-site .nav-links a.cta{padding:8px 14px !important;font-size:.9rem !important}
  html body #cinec-site .ms-theme{width:52px;height:32px}
  html body #cinec-site .hero{padding:100px 18px 20px !important}
  html body #cinec-site .eyebrow{font-size:.62rem !important;letter-spacing:.2em !important;gap:7px}
  html body #cinec-site .ms-feats-wrap{padding:6px 16px 20px}html body #cinec-site .ms-feats{grid-template-columns:1fr;gap:14px}
  html body #cinec-site .ms-feat{padding:18px 16px 18px;align-items:center}html body #cinec-site .ms-fa{position:static;margin-left:auto;flex:none}
  html body #cinec-site .ms-fi{width:56px;height:56px}html body #cinec-site .ms-fi svg{width:26px;height:26px}
  html body #cinec-site .ms-quote{padding:24px 20px;gap:14px}html body #cinec-site .ms-qm{font-size:4rem}html body #cinec-site .ms-qt b{font-size:1.05rem}html body #cinec-site .ms-lh{width:90%;opacity:.55}
  html body #cinec-site .disc{width:180px !important;height:180px !important;box-shadow:0 0 0 8px rgba(12,40,100,.45),0 0 0 9px rgba(120,160,255,.14),0 20px 40px -14px rgba(0,0,0,.7) !important}
  html body #cinec-site .disc::before,html body #cinec-site .disc::after{inset:-22px}
  html body #cinec-site .hero-stage{height:240px !important}
  html body #cinec-site .hero h1{font-size:2.5rem !important;margin:16px 0 !important}
}
/* light mode */
html body #cinec-site.ms-light{--ms-bg:radial-gradient(1100px 680px at 18% 22%,#dbe8fc 0%,rgba(219,232,252,0) 62%),radial-gradient(900px 640px at 82% 26%,#d2e2fb 0%,rgba(210,226,251,0) 60%),linear-gradient(180deg,#f3f7fe 0%,#eaf1fc 100%);--ms-card:linear-gradient(160deg,#ffffff,#f4f8ff);--ms-bd:rgba(30,70,150,.14);--ms-h:#0b1f4a;--ms-tx:#3d4f73;--ms-mut:#5b6b88;--ms-acc:#1d6fe8;--ms-cy:#0e7fc0;background-color:#eef4fd !important}
html body #cinec-site.ms-light::before{opacity:0}
html body #cinec-site.ms-light .instruments.stuck{background:rgba(243,247,254,.88) !important}
html body #cinec-site.ms-light .brand-name,html body #cinec-site.ms-light .nav-links a:not(.cta),html body #cinec-site.ms-light h2,html body #cinec-site.ms-light .rank h3,html body #cinec-site.ms-light .cline h4,html body #cinec-site.ms-light .ms-qt b{color:#0b1f4a !important}
html body #cinec-site.ms-light .hero h1{color:#0b1f4a !important;text-shadow:none}
html body #cinec-site.ms-light .ms-theme{background:#fff;color:#0b1f4a;border-color:#c8d7ef}
html body #cinec-site.ms-light .ms-fa{background:#eaf1fc;color:#0b1f4a;border-color:#d6e2f5}
html body #cinec-site.ms-light .ms-quote,html body #cinec-site.ms-light .harbor{background:linear-gradient(100deg,#ffffff,#eaf2ff) !important}
html body #cinec-site.ms-light .harbor h2{color:#0b1f4a !important}
html body #cinec-site.ms-light .rank-cert{color:#1d4ed8 !important}
html body #cinec-site.ms-light .rank.rank-top{background:linear-gradient(160deg,#e4eeff,#d3e3fd) !important}
html body #cinec-site.ms-light .contact-map{background:#fff !important}
html body #cinec-site.ms-light .carousel-btn{background:rgba(255,255,255,.85) !important;color:#0b1f4a !important}
html body #cinec-site.ms-light .disc{box-shadow:0 0 0 18px rgba(59,130,246,.10),0 0 0 19px rgba(59,130,246,.22),0 30px 70px -20px rgba(15,45,110,.45),inset 0 0 40px rgba(0,0,0,.4) !important}
/* a little smaller overall, and the first screen is only the hero (cards start on the next screen) */
html body #cinec-site{--sz:.95;zoom:var(--sz)}
html body #cinec-site .hero{min-height:calc(100vh / (var(--bz,1) * var(--sz))) !important;display:flex !important;align-items:center !important;padding-top:110px !important;padding-bottom:60px !important;box-sizing:border-box}
html body #cinec-site .ms-feats-wrap{padding-top:70px}
@media (max-width:640px){html body #cinec-site{--sz:1}html body #cinec-site .hero{padding-top:90px !important;padding-bottom:40px !important}html body #cinec-site .ms-feats-wrap{padding-top:30px}}
/* Explore tracks: plain, same colour as the background (no blue fill / glow) */
html body #cinec-site .cw-btn.btn-primary.ms-explore{background:transparent !important;border:1px solid rgba(160,190,255,.32) !important;box-shadow:none !important;color:#e8efff !important;font-weight:500 !important;padding:13px 22px !important;font-size:1.05rem !important}
html body #cinec-site .cw-btn.btn-primary.ms-explore:hover{background:rgba(255,255,255,.06) !important;border-color:rgba(160,190,255,.55) !important;transform:none !important;filter:none !important}
html body #cinec-site .ms-explore svg{width:22px !important;height:22px !important;color:#9fc3ff}
html body #cinec-site.ms-light .cw-btn.btn-primary.ms-explore{color:#0b1f4a !important;border-color:rgba(30,70,150,.25) !important}
html body #cinec-site .cw-hero-btns{margin-top:54px !important}
/* captain selection bar: fully hidden until a cadet is ticked (on phones it used to peek out) */
.cap-bar2{transform:translate(-50%,calc(100% + 60px)) !important;visibility:hidden;opacity:0;transition:transform .3s,opacity .2s,visibility 0s .3s !important;max-width:calc(100vw - 24px)}
.cap-bar2.show{transform:translate(-50%,0) !important;visibility:visible;opacity:1;transition:transform .3s,opacity .2s,visibility 0s !important}


/* pc-consent-css */

.pc-ov{position:fixed;inset:0;z-index:10150;background:rgba(4,14,38,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:safe center;justify-content:center;padding:16px;overflow-y:auto;font-family:var(--font,'Plus Jakarta Sans',system-ui,sans-serif)}
.pc-card{position:relative;width:min(640px,100%);background:#fff;color:#0f1d3a;border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.4);padding:22px 22px 18px;margin:auto;animation:pcIn .25s ease}
@keyframes pcIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.pc-x{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:0;background:#eef3fb;color:#0f1d3a;font-size:20px;cursor:pointer;line-height:1}
.pc-head{display:flex;gap:14px;align-items:center;margin-bottom:12px;padding-right:30px}
.pc-head h3{margin:0;font-size:19px;color:#0b1f4a}.pc-head span{font-size:12.5px;color:#5b6b88}
.pc-ic{flex:none;width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:radial-gradient(circle at 35% 30%,#3b82f6,#1d4ed8 70%)}
.pc-ic.pc-amber{background:radial-gradient(circle at 35% 30%,#f59e0b,#b45309 70%)}.pc-ic.pc-green{background:radial-gradient(circle at 35% 30%,#22c55e,#15803d 70%)}
.pc-txt{font-size:13.5px;line-height:1.55;color:#33456a;max-height:52vh;overflow:auto;padding-right:4px}
.pc-txt p{margin:0 0 10px}.pc-txt h4{margin:12px 0 5px;font-size:13px;color:#0b1f4a;text-transform:uppercase;letter-spacing:.4px}
.pc-txt ul{margin:0;padding-left:18px}.pc-txt li{margin:2px 0}
.pc-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;background:#f5f8fe;border:1px solid #e1e9f6;border-radius:14px;padding:4px 14px 12px}
.pc-small{font-size:12px;color:#6b7a96;margin-top:10px !important}
.pc-chk{display:flex;gap:10px;align-items:flex-start;margin:14px 0 4px;padding:12px 14px;border-radius:12px;background:#eef4ff;border:1.5px solid #c9dafa;font-size:13.5px;font-weight:600;color:#0b1f4a;cursor:pointer}
.pc-chk input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:#1d4ed8}
.pc-btns{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:14px}
.pc-btns button{border-radius:11px;padding:11px 18px;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit}
.pc-b1{border:0;background:linear-gradient(180deg,#1f6fe8,#1153c9);color:#fff;box-shadow:0 8px 18px rgba(17,83,201,.28)}
.pc-b1:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.pc-b2{border:1px solid #cfdbec;background:#fff;color:#33456a}
.pc-items{display:flex;flex-direction:column;gap:6px}.pc-items label{display:flex;gap:9px;align-items:center;cursor:pointer}.pc-items input{width:17px;height:17px;accent-color:#1d4ed8}
.pc-txt textarea{width:100%;box-sizing:border-box;border:1px solid #cfdbec;border-radius:10px;padding:10px;font:inherit;font-size:13.5px;resize:vertical;color:#0f1d3a}
.pc-err{color:#b91c1c;font-size:12.5px;margin-top:6px;min-height:16px}
.pc-rep{border:1px solid #e1e9f6;border-left:4px solid #f59e0b;border-radius:12px;padding:12px 14px;margin:0 0 10px;background:#fffdf7}
.pc-rep.done{border-left-color:#22c55e;background:#f7fdf9}
.pc-rh{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}.pc-rh b{color:#0b1f4a}.pc-rh span{color:#5b6b88;font-size:12.5px}.pc-rh small{margin-left:auto;color:#8a97b0;font-size:11.5px}
.pc-tags{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0 2px}.pc-tags span{font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:9px;background:#fef3c7;color:#92400e}
.pc-why{margin:6px 0 8px !important;color:#0f1d3a;white-space:pre-wrap}
.pc-note{font-size:12.5px;color:#15803d}
.pc-rep .pc-btns{margin-top:8px}.pc-rep .pc-btns button{padding:8px 14px;font-size:13px}
@media (max-width:560px){.pc-card{padding:18px 16px 14px;border-radius:16px}.pc-grid{grid-template-columns:1fr}.pc-txt{max-height:48vh}.pc-btns button{flex:1 1 auto}}
.pc-ic svg{stroke:#fff !important;fill:none !important;width:26px;height:26px}
.pc-stamp{margin:-2px 0 12px;padding:10px 12px;border-radius:12px;font-size:13px;line-height:1.45}.pc-stamp.ok{background:#ecfdf3;color:#15803d;border:1px solid #bbf7d0}.pc-stamp.warn{background:#fffbeb;color:#b45309;border:1px solid #fde68a}.pc-stamp.no{background:#f1f5fd;color:#475569;border:1px solid #dbe5f3}
/* ── cadet portal: readable dark mode ── */
body.dark .sx,body.dark .sx-mod,body.dark .sx-menu{--tx:#eaf1ff;--mu:#a9bbdf;--bd:#24386a;color:#eaf1ff}
body.dark .sx-stat,body.dark .sx-card,body.dark .sx-tabs,body.dark .sx-qa{background:#0f1f45 !important;border-color:#24386a !important}
body.dark .sx-rk,body.dark .sx-sk,body.dark .sx-cx,body.dark .sx-cs,body.dark .sx-qt small,body.dark .sx-hs small,body.dark .sx-vsub,body.dark .sx-vs span,body.dark .sx-tips ul,body.dark .sx-mhd span,body.dark .sx-sub{color:#b9c8e6 !important}
body.dark .sx-rv,body.dark .sx-sv,body.dark .sx-cn,body.dark .sx-ch h3,body.dark .sx-qt b,body.dark .sx-hs b,body.dark .sx-vs b,body.dark .sx-tips b,body.dark .sx-chk,body.dark .sx-mhd b,body.dark .sx-mod h3,body.dark .sx-mt{color:#f3f7ff !important}
body.dark .sx-sv.g{color:#4ade80 !important}body.dark .sx-sv.a{color:#fbbf24 !important}
body.dark .sx-dim{color:#8ea3cc !important}
body.dark .sx-ric,body.dark .sx-eye,body.dark .sx-chev{color:#8fb4ff !important}
body.dark .sx-row,body.dark .sx-cert,body.dark .sx-ch,body.dark .sx-menu hr{border-color:#24386a !important}
body.dark .sx-link{color:#7cb3ff !important}
body.dark .sx-chi,body.dark .sx-qic,body.dark .sx-cic,body.dark .sx-sic.b{background:rgba(59,130,246,.18) !important;color:#9cc4ff !important}
body.dark .sx-sic.g{background:rgba(34,197,94,.18) !important;color:#4ade80 !important}
body.dark .sx-privpill{background:rgba(59,130,246,.2) !important;color:#bcd6ff !important}
body.dark .sx-note{background:rgba(59,130,246,.14) !important;color:#9cc4ff !important;border:1px solid rgba(59,130,246,.28)}
body.dark .sx-note.a{background:rgba(245,158,11,.14) !important;color:#fbbf24 !important;border-color:rgba(245,158,11,.3)}
body.dark .sx-note span{color:#c3d1ec !important}
body.dark .sx-hd{background:#0f1f45;border-color:#5b7ab8;box-shadow:none}
body.dark .sx-hs.done .sx-hd,body.dark .sx-hs.act .sx-hd{background:var(--bl);border-color:var(--bl)}
body.dark .sx-hl{background:#2c4377 !important}
body.dark .sx-pill.ok{background:rgba(34,197,94,.18) !important;color:#4ade80 !important}
body.dark .sx-pill.pend{background:rgba(245,158,11,.18) !important;color:#fbbf24 !important}
body.dark .sx-pill.rej{background:rgba(239,68,68,.18) !important;color:#fca5a5 !important}
body.dark .sx-menu,body.dark .sx-mod{background:#0f1f45 !important;border-color:#24386a !important;color:#eaf1ff}
body.dark .sx-menu button{color:#eaf1ff}body.dark .sx-menu button:hover{background:#17295a}
body.dark .sx-mod input,body.dark .sx-mod select,body.dark .sx-mod textarea{background:#081430;border-color:#2c4377;color:#fff}
body.dark .sx-btn2{background:#13244a !important;color:#e2ebff !important;border-color:#2c4377 !important}
body.dark .sx-bar{background:#24386a !important}
body.dark .sx-ring circle:first-child{stroke:#24386a}
body.dark .sx-mp{background:#13244a !important;color:#e2ebff !important;border-color:#2c4377 !important}

/* v45-css */

/* ── v45: Cadet access (which fields a cadet can see / edit) ── */
.mc-ca-btn em{font-style:normal;margin-left:5px;font-size:10.5px;font-weight:800;background:#f97316;color:#fff;border-radius:8px;padding:1px 6px}
.mc-ca-bi{margin-left:auto;align-self:center;border:1.5px solid var(--c-border,#d6e0ef);background:var(--c-surface,#fff);color:var(--c-text,#0b1f4a);border-radius:10px;padding:6px 12px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.mc-ca-bi:hover{border-color:#2f6cf6;color:#1d4ed8}
.mc-ca-ov{position:fixed;inset:0;z-index:10120;background:rgba(4,14,38,.55);display:flex;align-items:safe center;justify-content:center;padding:16px;overflow-y:auto}
.mc-ca{width:min(640px,100%);max-height:calc(100dvh / var(--bz,1) - 32px);display:flex;flex-direction:column;background:var(--c-surface,#fff);color:var(--c-text,#0f1d3a);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.4);overflow:hidden;margin:auto}
.mc-ca-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:16px 18px 6px}
.mc-ca-h b{display:block;font-size:17px}.mc-ca-h span{font-size:12.5px;color:var(--c-muted,#64748b);font-weight:700}
.mc-ca-x{width:34px;height:34px;border-radius:50%;border:0;background:rgba(100,116,139,.12);color:inherit;font-size:20px;cursor:pointer;flex:none}
.mc-ca-note{margin:0 18px 10px;font-size:12.5px;line-height:1.5;color:var(--c-muted,#5b6b88)}
.mc-ca-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:0 18px 8px}
.mc-ca-s{flex:1 1 180px}.mc-ca-s input{width:100%;box-sizing:border-box;border:1.5px solid var(--c-border,#d6e0ef);border-radius:10px;padding:8px 11px;font:inherit;font-size:13px;background:var(--c-surface,#fff);color:inherit;outline:none}
.mc-ca-s input:focus{border-color:#2f6cf6}
.mc-ca-all{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--c-muted,#64748b)}
.mc-ca-all button{border:1.5px solid var(--c-border,#d6e0ef);background:transparent;color:inherit;border-radius:9px;padding:6px 9px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.mc-ca-all button:hover{border-color:#2f6cf6;color:#1d4ed8}
.mc-ca-legend{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;padding:0 18px 8px;font-size:11.5px;color:var(--c-muted,#64748b);font-weight:700}
.mc-ca-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle}
.mc-ca-legend i.e{background:#22c55e}.mc-ca-legend i.s{background:#3b82f6}.mc-ca-legend i.h{background:#94a3b8}
.mc-ca-sum{margin-left:auto;font-style:normal}
.mc-ca-list{flex:1;min-height:120px;overflow-y:auto;-webkit-overflow-scrolling:touch;border-top:1px solid var(--c-border,#e3eaf5);border-bottom:1px solid var(--c-border,#e3eaf5)}
.mc-ca-r{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:8px 18px;border-top:1px solid rgba(100,116,139,.1)}
.mc-ca-r:first-child{border-top:0}
.mc-ca-l{font-size:13px;font-weight:700;min-width:0;word-break:break-word}
.mc-ca-l small{font-size:10px;font-weight:800;color:#2f6cf6;background:rgba(47,108,246,.1);border-radius:6px;padding:1px 6px;margin-left:4px;text-transform:uppercase}
.mc-ca-seg{flex:none;display:inline-flex;background:rgba(100,116,139,.1);border-radius:10px;padding:3px;gap:2px}
.mc-ca-seg button{border:0;background:transparent;color:var(--c-muted,#64748b);font:inherit;font-size:12px;font-weight:700;padding:6px 9px;border-radius:8px;cursor:pointer;white-space:nowrap}
.mc-ca-seg button.on{color:#fff}.mc-ca-seg button.on.edit{background:#16a34a}.mc-ca-seg button.on.see{background:#2f6cf6}.mc-ca-seg button.on.hide{background:#64748b}
.mc-ca-empty{padding:16px;text-align:center;color:var(--c-muted,#64748b);font-size:13px}
.mc-ca-f{display:flex;gap:10px;justify-content:flex-end;padding:12px 18px}
.mc-ca-f button{border-radius:11px;padding:10px 20px;font:inherit;font-weight:800;font-size:14px;cursor:pointer}
.mc-ca-c{border:1.5px solid var(--c-border,#d6e0ef);background:transparent;color:inherit}
.mc-ca-ok{border:0;background:#2f6cf6;color:#fff;box-shadow:0 8px 18px rgba(47,108,246,.3)}
@media (max-width:560px){
  .mc-ca-ov{padding:8px}
  .mc-ca-r{flex-direction:column;align-items:stretch;gap:6px;padding:10px 14px}
  .mc-ca-seg{display:flex}.mc-ca-seg button{flex:1;padding:8px 4px}
  .mc-ca-h,.mc-ca-tools,.mc-ca-legend,.mc-ca-f{padding-left:14px;padding-right:14px}.mc-ca-note{margin-left:14px;margin-right:14px}
  .mc-ca-sum{margin-left:0;flex-basis:100%}
  .mc-ca-f button{flex:1}
}
body.dark .mc-ca{background:#10224d;color:#e6eeff}body.dark .mc-ca-s input{background:#0b1838;border-color:#24407a}
body.dark .mc-ca-list,body.dark .mc-ca-c,body.dark .mc-ca-all button{border-color:#24407a}
body.dark .mc-ca-bi{background:#0f1f45;border-color:#24407a;color:#e6eeff}
/* cadet portal: locked fields */
.mc-lockcard{opacity:.95}
.mc-locked .mc-lockv{padding:10px 12px;border-radius:10px;background:rgba(100,116,139,.08);border:1px dashed rgba(100,116,139,.35);font-size:14px;color:var(--c-text,#0f1d3a);word-break:break-word}
body.dark .mc-locked .mc-lockv{color:#dbe7fb}
/* tab toolbars: "⋯ More" menu */
.wa-sel-info.mc-zero{display:none !important}
.mc-more-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);color:#e3edfc;border-radius:9px;padding:5px 11px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;line-height:1.2}
.mc-more-btn:hover,.mc-more-btn.open{background:rgba(47,108,246,.18);border-color:#2f6cf6}
.mc-more-menu{position:fixed;z-index:2147482000;display:none;min-width:230px;padding:6px;background:#fff;color:#0f1d3a;border-radius:14px;box-shadow:0 22px 50px -10px rgba(4,14,38,.45),0 0 0 1px rgba(15,29,58,.07);font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:14px}
.mc-more-menu.open{display:block;animation:mcdpIn .14s ease}
.mc-more-menu .mc-more-it{display:flex !important;align-items:center;gap:8px;width:100% !important;margin:0 !important;border:0 !important;border-radius:10px !important;background:transparent !important;color:#1e2d4d !important;box-shadow:none !important;text-align:left;font:inherit !important;font-size:14px !important;font-weight:600 !important;padding:10px 12px !important;cursor:pointer;height:auto !important;white-space:nowrap}
.mc-more-menu .mc-more-it:hover{background:#f1f5fd !important;color:#1d4ed8 !important}
.mc-more-menu .wa-clear-btn{color:#b91c1c !important;border-top:1px solid #edf1f8 !important;border-radius:0 0 10px 10px !important;margin-top:4px !important}
.mc-more-menu.dark{background:#10224d;color:#e6eeff;box-shadow:0 22px 50px -10px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08)}
.mc-more-menu.dark .mc-more-it{color:#dbe7fb !important}.mc-more-menu.dark .mc-more-it:hover{background:rgba(255,255,255,.07) !important;color:#fff !important}
.mc-more-menu.dark .wa-clear-btn{color:#fca5a5 !important;border-top-color:#22396e !important}

/* v44-css */

/* ── v44: phone top bar menus (log out, bell) open ABOVE the tab bar ── */
body.mc-has-tabs #app > .topbar,body.mc-has-tabs .topbar{z-index:420 !important}
@media (max-width:640px){body.mc-has-tabs #mc-tabs{z-index:300 !important}}
#side-profile-menu,#slx-bell-menu{z-index:430}

/* ── v44: password eye ── */
.mc-eye{position:absolute;z-index:3;display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:0;border-radius:9px;background:transparent;color:#64748b;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s,color .15s}
.mc-eye:hover{background:rgba(100,116,139,.12);color:#1d4ed8}
.mc-eye.shown{color:#2f6cf6}
.mc-eye.on-dark,body.dark .mc-eye{color:#9fb2d8}.mc-eye.on-dark:hover,body.dark .mc-eye:hover{background:rgba(255,255,255,.08);color:#fff}
.mc-eye svg{pointer-events:none}

/* ── v44: date boxes (type or pick) ── */
.mc-dt{position:relative;display:block;min-width:0;max-width:100%}
.mc-dt > .mc-dt-in{width:100% !important;box-sizing:border-box;padding-right:42px !important;font-variant-numeric:tabular-nums;letter-spacing:.2px}
.mc-dt > .mc-dt-in.bad{border-color:#dc2626 !important;box-shadow:0 0 0 3px rgba(220,38,38,.14) !important}
.mc-dt-orig{display:none !important}
.mc-dt-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:34px;height:30px;display:flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:rgba(47,108,246,.1);color:#2f6cf6;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
.mc-dt-btn:hover{background:#2f6cf6;color:#fff}
.mc-dt-btn:disabled{opacity:.4;cursor:default;background:transparent}
.mc-dt.dis .mc-dt-in{opacity:.75}
body.dark .mc-dt-btn{background:rgba(47,108,246,.22);color:#9ec1ff}
/* the old separate 📅 buttons are built into the box now */
button[onclick^="calOpenById"]{display:none !important}
#cal-picker,#cal-overlay{display:none !important}

/* calendar (lives outside the page zoom so it is never cut off) */
.mcdp-bg{position:fixed;inset:0;z-index:2147483000;display:none;background:transparent}
.mcdp-bg.on{display:block}
.mcdp-bg.dim{background:rgba(4,14,38,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.mcdp{position:fixed;z-index:2147483001;display:none;width:312px;box-sizing:border-box;background:#fff;color:#0f1d3a;border-radius:18px;box-shadow:0 24px 60px -12px rgba(4,14,38,.45),0 0 0 1px rgba(15,29,58,.07);padding:12px 12px 10px;font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:14px;-webkit-user-select:none;user-select:none;-webkit-text-size-adjust:100%}
.mcdp.open{display:block;animation:mcdpIn .16s ease}
@keyframes mcdpIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.mcdp *{box-sizing:border-box;font-family:inherit}
.mcdp-top{display:none;align-items:center;justify-content:space-between;margin:0 2px 10px}
.mcdp-top b{font-size:15px;color:#0b1f4a}
.mcdp-x{width:34px;height:34px;border-radius:50%;border:0;background:#eef3fb;color:#0f1d3a;font-size:20px;line-height:1;cursor:pointer}
.mcdp-h{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.mcdp-h select{flex:1;min-width:0;height:38px;border:1.5px solid #d6e0ef;border-radius:10px;background:#f5f8fe url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center;padding:0 26px 0 10px;font-size:14px;font-weight:700;color:#0b1f4a;-webkit-appearance:none;appearance:none;cursor:pointer}
.mcdp-h select.mcdp-y{flex:0 0 92px}
.mcdp-nav{flex:none;width:36px;height:38px;border:0;border-radius:10px;background:#eef3fb;color:#1d4ed8;font-size:22px;line-height:1;cursor:pointer}
.mcdp-nav:hover{background:#dbe7ff}
.mcdp-wd,.mcdp-g{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.mcdp-wd span{text-align:center;font-size:11px;font-weight:800;color:#8a97b0;padding:4px 0;text-transform:uppercase;letter-spacing:.3px}
.mcdp-wd span:first-child,.mcdp-wd span:last-child{color:#e0603a}
.mcdp-d{height:38px;border:0;border-radius:10px;background:transparent;color:#1e2d4d;font-size:14px;font-weight:600;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
.mcdp-d:hover{background:#eef3fb}
.mcdp-d.now{box-shadow:inset 0 0 0 1.5px #2f6cf6;color:#1d4ed8;font-weight:800}
.mcdp-d.sel{background:#2f6cf6;color:#fff;font-weight:800;box-shadow:0 6px 14px -4px rgba(47,108,246,.6)}
.mcdp-d:disabled{color:#c3cbd9;cursor:default;background:transparent}
.mcdp-f{display:flex;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid #edf1f8}
.mcdp-f button{flex:1;height:38px;border-radius:10px;font-weight:800;font-size:13px;cursor:pointer;border:1.5px solid #d6e0ef;background:#fff;color:#33456a}
.mcdp-f .mcdp-done{background:#2f6cf6;border-color:#2f6cf6;color:#fff}
.mcdp-f .mcdp-clear{color:#b91c1c;border-color:#fecaca}
/* phones / tablets: a sheet in the middle of the screen */
.mcdp.sheet{left:50% !important;top:50% !important;transform:translate(-50%,-50%);width:min(360px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow-y:auto;padding:16px 14px 14px;border-radius:22px}
.mcdp.sheet.open{animation:mcdpSheet .18s ease}
@keyframes mcdpSheet{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
.mcdp.sheet .mcdp-top{display:flex}
.mcdp.sheet .mcdp-d{height:44px;font-size:15px}
.mcdp.sheet .mcdp-h select,.mcdp.sheet .mcdp-nav,.mcdp.sheet .mcdp-f button{height:44px;font-size:16px}
.mcdp:not(.sheet) .mcdp-done{display:none}
/* dark */
.mcdp.dark{background:#10224d;color:#e6eeff;box-shadow:0 24px 60px -12px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08)}
.mcdp.dark .mcdp-top b{color:#e6eeff}.mcdp.dark .mcdp-x,.mcdp.dark .mcdp-nav{background:rgba(255,255,255,.08);color:#cfe0ff}
.mcdp.dark .mcdp-h select{background-color:#0b1838;border-color:#24407a;color:#e6eeff}
.mcdp.dark .mcdp-d{color:#dbe7fb}.mcdp.dark .mcdp-d:hover{background:rgba(255,255,255,.07)}.mcdp.dark .mcdp-d:disabled{color:#4a5d86}
.mcdp.dark .mcdp-d.now{color:#9ec1ff}
.mcdp.dark .mcdp-f{border-color:#22396e}.mcdp.dark .mcdp-f button{background:transparent;border-color:#2c4880;color:#cfe0ff}
.mcdp.dark .mcdp-f .mcdp-done{background:#2f6cf6;border-color:#2f6cf6;color:#fff}.mcdp.dark .mcdp-f .mcdp-clear{color:#fca5a5;border-color:rgba(252,165,165,.35)}

/* ── v44: iPhone / iPad polish ── */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.mc-ios *{-webkit-tap-highlight-color:rgba(47,108,246,.12)}
html.mc-ios input[type="text"],html.mc-ios input[type="search"],html.mc-ios input[type="email"],html.mc-ios input[type="tel"],html.mc-ios input[type="number"],html.mc-ios input[type="password"],html.mc-ios input:not([type]),html.mc-ios textarea{-webkit-appearance:none;appearance:none}
.main-content,#cadet-portal .cp-body,.sx-m,.cap-body,.mcdp,#mc-tabs-menu{-webkit-overflow-scrolling:touch}
/* Safari's 100vh is taller than the visible screen → use the real height */
@supports (height:100dvh){
  #app{height:calc(100dvh / var(--bz,1.1)) !important}
  #cadet-portal.sx-on > .cp-body{height:100dvh !important}
  .sx-m{min-height:100dvh}
}
@supports not (height:100dvh){
  #app{height:calc((var(--mc-vh,1vh) * 100) / var(--bz,1.1)) !important}
  #cadet-portal.sx-on > .cp-body{height:calc(var(--mc-vh,1vh) * 100) !important}
}
/* notch / home-bar safe areas for the fixed bottom bars */
#mobile-bottom-nav{padding-bottom:env(safe-area-inset-bottom,0)}

/* v43-css */

/* ── v43: cadet tracker per-field list ── */
.mc-chg{margin-top:10px;border:1px solid #e3eaf5;border-radius:12px;overflow:hidden;background:#fff}
.mc-chg-r{display:grid;grid-template-columns:minmax(80px,1fr) 1.4fr auto;gap:8px;align-items:center;padding:8px 12px;font-size:12.5px;border-top:1px solid #eef2f8}
.mc-chg-r:first-child{border-top:0}
.mc-chg-r b{color:#0b1f4a;font-weight:700}.mc-chg-r span{color:#33456a;word-break:break-word}
.mc-chg-r i{font-style:normal;font-size:11px;font-weight:800;padding:2px 8px;border-radius:8px;white-space:nowrap}
.mc-chg-r i.ok{background:#dcfce7;color:#15803d}.mc-chg-r i.no{background:#fee2e2;color:#b91c1c}.mc-chg-r i.wait{background:#fef3c7;color:#92400e}
body.dark .mc-chg{background:#0f1f45;border-color:#24407a}body.dark .mc-chg-r{border-color:#1d3566}
body.dark .mc-chg-r b{color:#e6eeff}body.dark .mc-chg-r span{color:#b9c8e6}
body.dark .mc-chg-r i.ok{background:rgba(34,197,94,.16);color:#4ade80}body.dark .mc-chg-r i.no{background:rgba(239,68,68,.16);color:#fca5a5}body.dark .mc-chg-r i.wait{background:rgba(245,158,11,.16);color:#fbbf24}

/* ── v43: password rules checklist ── */
.mc-pwr{list-style:none;display:flex;flex-wrap:wrap;gap:5px;margin:7px 0 2px;padding:0}
.mc-pwr li{font-size:11px;font-weight:700;padding:3px 8px;border-radius:8px;background:rgba(100,116,139,.12);color:#64748b}
.mc-pwr li::before{content:"○ "}
.mc-pwr li.ok{background:rgba(34,197,94,.14);color:#15803d}.mc-pwr li.ok::before{content:"✓ "}
body.dark .mc-pwr li{color:#a9bbdf}body.dark .mc-pwr li.ok{color:#4ade80}

/* ── v43: update requests (Pending) ── */
#cadet-reqs-section{background:var(--c-surface,#fff);border:1px solid var(--c-border,#e3eaf5);border-radius:16px;padding:14px;margin-bottom:20px !important}
.mc-rq-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between;margin-bottom:10px}
.mc-rq-title{font-size:14.5px;font-weight:800;color:var(--c-text,#0b1f4a);display:flex;align-items:center;gap:8px}
.mc-rq-cnt{background:rgba(251,146,60,.15);border:1px solid rgba(251,146,60,.4);color:#e67e22;border-radius:8px;padding:1px 9px;font-size:11px}
.mc-rq-seg{display:inline-flex;background:rgba(100,116,139,.1);border-radius:11px;padding:3px;gap:2px}
.mc-rq-seg button{border:0;background:transparent;color:var(--c-muted,#64748b);font:inherit;font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:9px;cursor:pointer;display:flex;align-items:center;gap:6px}
.mc-rq-seg button b{font-size:10.5px;background:rgba(100,116,139,.16);border-radius:7px;padding:0 6px;line-height:17px}
.mc-rq-seg button.on{background:var(--c-surface,#fff);color:#1d4ed8;box-shadow:0 1px 4px rgba(15,29,58,.14)}
.mc-rq-seg button.on b{background:#dbe7ff;color:#1d4ed8}
.mc-rq-search{position:relative;display:flex;align-items:center;margin-bottom:12px}
.mc-rq-search svg{position:absolute;left:11px;color:var(--c-muted,#64748b);pointer-events:none}
.mc-rq-search input{width:100%;box-sizing:border-box;border:1.5px solid var(--c-border,#d6e0ef);border-radius:11px;padding:9px 34px 9px 34px;font:inherit;font-size:13px;background:var(--c-surface,#fff);color:var(--c-text,#0f1d3a);outline:none;-webkit-appearance:none;appearance:none}
.mc-rq-search input:focus{border-color:#2f6cf6;box-shadow:0 0 0 3px rgba(47,108,246,.14)}
.mc-rq-search input::-webkit-search-cancel-button{display:none}
.mc-rq-search button{position:absolute;right:6px;border:0;background:transparent;color:var(--c-muted,#64748b);font-size:14px;cursor:pointer;padding:6px}
.mc-rq-empty{padding:18px;text-align:center;color:var(--c-muted,#64748b);font-size:13px}
.mc-rq-card{border:1px solid var(--c-border,#e3eaf5);border-radius:14px;margin-bottom:10px;overflow:hidden;background:var(--c-surface,#fff);transition:opacity .2s}
.mc-rq-card.busy{opacity:.6;pointer-events:none}
.mc-rq-ch{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 10px;padding:10px 12px;background:rgba(47,108,246,.05);border-bottom:1px solid var(--c-border,#e3eaf5)}
.mc-rq-who{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0}
.mc-rq-who b{font-size:14px;color:var(--c-text,#0b1f4a)}
.mc-rq-who span{font-size:11.5px;font-weight:700;color:#1d4ed8;background:#e5eeff;border-radius:7px;padding:1px 7px}
.mc-rq-when{display:flex;align-items:center;gap:8px}.mc-rq-when small{font-size:11.5px;color:var(--c-muted,#64748b)}
.mc-rq-row{display:grid;grid-template-columns:minmax(90px,.9fr) 2fr auto;gap:8px 12px;align-items:center;padding:9px 12px;border-top:1px solid rgba(100,116,139,.12)}
.mc-rq-row:first-of-type{border-top:0}
.mc-rq-row.approved{background:rgba(34,197,94,.05)}.mc-rq-row.rejected{background:rgba(239,68,68,.05)}
.mc-rq-f{font-size:12px;font-weight:800;color:var(--c-muted,#5b6b88);text-transform:uppercase;letter-spacing:.3px}
.mc-rq-v{font-size:13px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;min-width:0;word-break:break-word}
.mc-rq-v .o{color:#94a3b8;text-decoration:line-through}.mc-rq-v .ar{color:#94a3b8}.mc-rq-v .n{color:var(--c-text,#0f1d3a);font-weight:700}
.mc-rq-row.rejected .mc-rq-v .o{text-decoration:none;color:var(--c-text,#0f1d3a)}.mc-rq-row.rejected .mc-rq-v .n{text-decoration:line-through;color:#94a3b8;font-weight:500}
.mc-rq-a{display:flex;align-items:center;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.mc-fb{border:1.5px solid;border-radius:9px;padding:6px 11px;font:inherit;font-size:12px;font-weight:800;cursor:pointer;background:transparent;white-space:nowrap;min-height:34px}
.mc-fb.ok{border-color:#86efac;color:#15803d;background:#f0fdf4}.mc-fb.ok:hover{background:#15803d;color:#fff;border-color:#15803d}
.mc-fb.no{border-color:#fca5a5;color:#b91c1c;background:#fef2f2}.mc-fb.no:hover{background:#b91c1c;color:#fff;border-color:#b91c1c}
.mc-fb:disabled{opacity:.5;cursor:wait}
.mc-rb{font-size:11px;font-weight:800;padding:3px 8px;border-radius:8px;white-space:nowrap}
.mc-rb.ok{background:#dcfce7;color:#15803d}.mc-rb.no{background:#fee2e2;color:#b91c1c}.mc-rb.part{background:#fef3c7;color:#92400e}.mc-rb.wait{background:#e0e7ff;color:#3730a3}
.mc-by{font-size:11px;color:var(--c-muted,#64748b);white-space:nowrap}
.mc-rq-foot{display:flex;align-items:center;gap:8px;justify-content:flex-end;padding:9px 12px;border-top:1px solid rgba(100,116,139,.14);background:rgba(100,116,139,.04)}
.mc-rq-foot span{margin-right:auto;font-size:12px;color:var(--c-muted,#64748b);font-weight:700}
.mc-rq-done{padding:8px 12px;font-size:12px;color:var(--c-muted,#64748b);border-top:1px solid rgba(100,116,139,.14)}
.mc-rq-done b{color:var(--c-text,#0b1f4a)}
@media (max-width:640px){
  #cadet-reqs-section{padding:12px 10px;border-radius:14px}
  .mc-rq-head{flex-direction:column;align-items:stretch}
  .mc-rq-seg{display:flex}.mc-rq-seg button{flex:1;justify-content:center}
  .mc-rq-row{grid-template-columns:1fr;gap:5px}
  .mc-rq-a{justify-content:stretch}.mc-rq-a .mc-fb{flex:1}
  .mc-rq-a .mc-rb{margin-right:auto}
  .mc-rq-foot{flex-wrap:wrap}.mc-rq-foot .mc-fb{flex:1}
}
body.dark #cadet-reqs-section,body.dark .mc-rq-card{background:#0f1f45;border-color:#24407a}
body.dark .mc-rq-ch{background:rgba(47,108,246,.12);border-color:#24407a}
body.dark .mc-rq-who b,body.dark .mc-rq-title,body.dark .mc-rq-done b{color:#e6eeff}
body.dark .mc-rq-who span{background:rgba(47,108,246,.22);color:#9ec1ff}
body.dark .mc-rq-v .n,body.dark .mc-rq-row.rejected .mc-rq-v .o{color:#e6eeff}
body.dark .mc-rq-seg{background:rgba(255,255,255,.06)}body.dark .mc-rq-seg button.on{background:#1b3268;color:#cfe0ff}body.dark .mc-rq-seg button.on b{background:#2f6cf6;color:#fff}
body.dark .mc-rq-search input{background:#0b1838;border-color:#24407a;color:#e6eeff}
body.dark .mc-fb.ok{background:rgba(34,197,94,.1);border-color:rgba(74,222,128,.45);color:#4ade80}
body.dark .mc-fb.no{background:rgba(239,68,68,.1);border-color:rgba(252,165,165,.45);color:#fca5a5}
body.dark .mc-rb.ok{background:rgba(34,197,94,.16);color:#4ade80}body.dark .mc-rb.no{background:rgba(239,68,68,.16);color:#fca5a5}body.dark .mc-rb.part{background:rgba(245,158,11,.16);color:#fbbf24}body.dark .mc-rb.wait{background:rgba(99,102,241,.2);color:#c7d2fe}

/* ── v43: Home › Recent activity ── */
#mc-recent{margin-bottom:18px}
#mc-recent .hd-card-h{display:flex;align-items:center}
#mc-recent .hd-viewall{margin-left:auto;cursor:pointer}
.mc-ra-day{font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--c-muted,#64748b);margin:10px 2px 4px}
.mc-ra-day:first-child{margin-top:2px}
.mc-ra-row{display:flex;align-items:center;gap:11px;padding:8px 8px;border-radius:12px;cursor:pointer;transition:background .15s}
.mc-ra-row:hover{background:rgba(47,108,246,.06)}
.mc-ra-ic{flex:none;width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:16px;background:rgba(47,108,246,.1)}
.mc-ra-row.k-doc .mc-ra-ic,.mc-ra-row.k-docok .mc-ra-ic{background:rgba(20,184,166,.12)}
.mc-ra-row.k-docno .mc-ra-ic,.mc-ra-row.k-obj .mc-ra-ic{background:rgba(239,68,68,.1)}
.mc-ra-row.k-req .mc-ra-ic,.mc-ra-row.k-reqd .mc-ra-ic{background:rgba(245,158,11,.13)}
.mc-ra-row.k-consent .mc-ra-ic{background:rgba(139,92,246,.12)}
.mc-ra-tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.mc-ra-tx b{font-size:13px;color:var(--c-text,#0b1f4a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-ra-tx span{font-size:12.5px;color:#33456a;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mc-ra-tx small{font-size:11px;color:var(--c-muted,#8a97b0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-ra-tm{flex:none;text-align:right;display:flex;flex-direction:column;line-height:1.25}
.mc-ra-tm b{font-size:12px;color:var(--c-text,#0b1f4a);white-space:nowrap}.mc-ra-tm small{font-size:10.5px;color:var(--c-muted,#8a97b0);white-space:nowrap}
.mc-ra-empty{padding:14px 6px;color:var(--c-muted,#64748b);font-size:13px}
body.dark .mc-ra-tx b,body.dark .mc-ra-tm b{color:#e6eeff}body.dark .mc-ra-tx span{color:#b9c8e6}
body.dark .mc-ra-row:hover{background:rgba(255,255,255,.05)}

/* ── v43: phone tab bar (admin / staff) ── */
#mc-tabs{display:none}
#mc-tabs-menu{display:none}
@media (max-width:640px){
  body.mc-has-tabs #mc-tabs{display:block;position:relative;z-index:290;flex:none;background:var(--topbar-bg,#0b2a5c);border-top:1px solid rgba(255,255,255,.08);box-shadow:0 6px 14px -8px rgba(4,14,38,.5)}
  #mc-tabs .mc-tabs-in{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:7px 30px 8px 10px;scroll-padding:0 16px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent)}
  #mc-tabs .mc-tabs-in::-webkit-scrollbar{display:none}
  #mc-tabs .mc-tab{flex:none;display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:#dbe7fb;border-radius:999px;padding:7px 12px;font:inherit;font-size:13px;font-weight:700;line-height:1;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:background .15s,color .15s}
  #mc-tabs .mc-tab svg{flex:none}
  #mc-tabs .mc-tab .mc-emo{font-size:14px;line-height:1}
  #mc-tabs .mc-tab em{font-style:normal;font-size:10.5px;font-weight:800;background:rgba(255,255,255,.14);border-radius:8px;padding:2px 6px;line-height:1.2}
  #mc-tabs .mc-tab em.al{background:#f97316;color:#fff}
  #mc-tabs .mc-tab .mc-car{display:inline-flex;margin-left:-2px;opacity:.8;transition:transform .2s}
  #mc-tabs .mc-tab.open .mc-car{transform:rotate(180deg)}
  #mc-tabs .mc-tab.on{background:#2f6cf6;border-color:#2f6cf6;color:#fff;box-shadow:0 4px 12px rgba(47,108,246,.4)}
  #mc-tabs .mc-tab.open:not(.on){background:rgba(255,255,255,.16);color:#fff}
  #mc-tabs-menu{display:block;position:fixed;z-index:10050;background:#fff;color:#0f1d3a;border-radius:16px;box-shadow:0 22px 50px -10px rgba(4,14,38,.45),0 0 0 1px rgba(15,29,58,.06);padding:6px;overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top left;pointer-events:none;transition:opacity .16s,transform .16s;visibility:hidden}
  #mc-tabs-menu.open{opacity:1;transform:none;pointer-events:auto;visibility:visible}
  #mc-tabs-menu .mc-mh{display:flex;align-items:center;gap:8px;padding:8px 10px 9px;border-bottom:1px solid #edf1f8;margin-bottom:4px;color:#1d4ed8}
  #mc-tabs-menu .mc-mh b{color:#0b1f4a;font-size:14px}
  #mc-tabs-menu .mc-mh small{margin-left:auto;font-size:11px;color:#64748b;font-weight:700}
  #mc-tabs-menu .mc-mi{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;font:inherit;font-size:14px;font-weight:600;color:#1e2d4d;text-align:left;padding:11px 10px;border-radius:11px;cursor:pointer;-webkit-tap-highlight-color:transparent}
  #mc-tabs-menu .mc-mi svg{flex:none;color:#2f6cf6}
  #mc-tabs-menu .mc-mi span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #mc-tabs-menu .mc-mi em{font-style:normal;font-size:11px;font-weight:800;color:#475569;background:#eef2f8;border-radius:8px;padding:2px 7px}
  #mc-tabs-menu .mc-mi:active,#mc-tabs-menu .mc-mi:hover{background:#f1f5fd}
  #mc-tabs-menu .mc-mi.on{background:#e8f0ff;color:#1d4ed8}
  #mc-tabs-menu .mc-me{padding:10px;font-size:13px;color:#64748b;font-style:italic}
  body.dark #mc-tabs-menu{background:#10224d;color:#e6eeff;box-shadow:0 22px 50px -10px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08)}
  body.dark #mc-tabs-menu .mc-mh{border-color:#22396e;color:#9ec1ff}body.dark #mc-tabs-menu .mc-mh b{color:#e6eeff}
  body.dark #mc-tabs-menu .mc-mi{color:#dbe7fb}body.dark #mc-tabs-menu .mc-mi em{background:rgba(255,255,255,.08);color:#b9c8e6}
  body.dark #mc-tabs-menu .mc-mi:hover,body.dark #mc-tabs-menu .mc-mi:active{background:rgba(255,255,255,.06)}body.dark #mc-tabs-menu .mc-mi.on{background:rgba(47,108,246,.22);color:#cfe0ff}
  /* the old sliding bottom bar is replaced by the tab bar for admin / staff */
  body.mc-has-tabs #mobile-bottom-nav{display:none !important}
  body.mc-has-tabs .main-content{padding-bottom:24px !important}
}

/* tablets: long folder names (FOUNDATION) fit the narrow sidebar */
@media (min-width:641px) and (max-width:1024px){html body .sidenav .nav-mother .nav-label{font-size:11px !important;letter-spacing:0 !important;min-width:0}}

/* v42-fixes-css */

/* ── v42: cadet portal states ── */
.sx-sv.r{color:#dc2626}
.sx-note.g{background:#ecfdf3;color:#15803d}.sx-note.r{background:#fef2f2;color:#b91c1c}
.sx-vt+.sx-note,.sx-ht+.sx-note{margin-top:12px}.sx-note+.sx-note{margin-top:8px}
.sx-vs.rej .sx-vd{background:#dc2626;border-color:#dc2626}
.sx-hs.rej .sx-hd{background:#dc2626;border-color:#dc2626;box-shadow:none}
.sx-vs:not(.done):not(.act):not(.rej) .sx-vd{background:#fff}
body.dark .sx-note.g{background:rgba(34,197,94,.14) !important;color:#4ade80 !important;border:1px solid rgba(34,197,94,.3)}
body.dark .sx-note.r{background:rgba(239,68,68,.14) !important;color:#fca5a5 !important;border:1px solid rgba(239,68,68,.3)}
body.dark .sx-sv.r{color:#f87171 !important}
body.dark .sx-vs:not(.done):not(.act):not(.rej) .sx-vd{background:#0f1f45;border-color:#5b7ab8}
/* full-height mobile drawer (no white strip at the bottom) */
.sx-drawer{min-height:calc(100vh / var(--bz,1)) !important;min-height:calc(100dvh / var(--bz,1)) !important;display:flex;flex-direction:column}
.sx-m:not(.sx-drawer){min-height:calc(100dvh / var(--bz,1))}
/* ── admin / staff: documents ── */
.cdx-why{display:block;margin-top:3px;font-size:11.5px;color:#b91c1c;font-weight:600}
body.dark .cdx-why{color:#fca5a5}
.cdoc-no-btn{white-space:nowrap}
@media (max-width:640px){
  .cdoc-item{flex-wrap:wrap;row-gap:8px}
  .cdoc-info{flex:1 1 calc(100% - 50px);min-width:0}
  .cdoc-btns{flex:1 1 100%;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px}
}
/* ── admin / staff: Data consent column ── */
th.mc-cth{white-space:nowrap}
td.mc-ctd{white-space:nowrap;font-size:11.5px;line-height:1.35}
td.mc-ctd small{display:block;color:var(--c-muted,#64748b);font-size:10.5px;margin-top:2px}
.mc-cs{display:inline-block;padding:2px 8px;border-radius:8px;font-weight:700;font-size:11px}
.mc-cs.ok{background:rgba(34,197,94,.14);color:#15803d}.mc-cs.warn{background:rgba(245,158,11,.16);color:#b45309}.mc-cs.no{background:rgba(100,116,139,.12);color:#64748b}
body.dark .mc-cs.ok{color:#4ade80}body.dark .mc-cs.warn{color:#fbbf24}body.dark .mc-cs.no{color:#a9bbdf}
/* ── captain: menu ── */
.cap-nav{display:flex;flex-direction:column;gap:2px}
#captain-portal .cap-tbl{min-width:560px}
#captain-portal .cap-cd:has(> .cap-tbl),#captain-portal .cap-cd:has(.cap-tbl){overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:860px){
  #captain-portal{zoom:1 !important}
  #captain-portal .cap-sb{display:flex !important;flex-direction:row !important;flex-wrap:wrap !important;align-items:center !important;overflow:visible !important;padding:10px 12px 8px !important;gap:6px 10px !important;border-radius:0 0 16px 16px !important}
  #captain-portal .cap-br{order:1;font-size:16px}
  #captain-portal .cap-role,#captain-portal .cap-sec,#captain-portal .cap-sp{display:none !important}
  #captain-portal .cap-me{display:flex !important;order:2;margin-left:auto;padding:4px 4px 4px 6px !important;gap:6px;background:rgba(255,255,255,.1)}
  #captain-portal .cap-me > div:not(.cap-av){display:none}
  #captain-portal .cap-me .cap-av{width:30px;height:30px;font-size:12px}
  #captain-portal .cap-me .cap-ni{color:#fff;padding:6px 8px !important}
  #captain-portal .cap-me .cap-ni::after{content:"Log out";font-size:12.5px;font-weight:700;margin-left:4px}
  #captain-portal .cap-nav{order:3;flex:1 1 100%;flex-direction:row;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:6px;padding:2px 0 2px;scroll-snap-type:x proximity}
  #captain-portal .cap-nav::-webkit-scrollbar{display:none}
  #captain-portal .cap-nav .cap-ni{flex:none;width:auto !important;white-space:nowrap;padding:8px 14px !important;scroll-snap-align:start;background:rgba(255,255,255,.08)}
  #captain-portal .cap-nav .cap-ni.on{background:#2f6cf6 !important;color:#fff}
  #captain-portal .cap-main{min-height:0;flex:1}
  #captain-portal .cap-tp{padding:10px 12px !important}
  #captain-portal .cap-body{padding:10px 12px 110px !important}
}
/* ── website on phones: compass right under the header, no big empty gap ── */
@media (max-width:880px){
  html body #cinec-site .hero{min-height:auto !important;align-items:flex-start !important;padding-top:96px !important;padding-bottom:36px !important}
  html body #cinec-site .hero-inner{gap:8px !important}
  html body #cinec-site .hero-stage{height:300px !important;margin-top:4px}
}
@media (max-width:640px){
  html body #cinec-site .hero{padding-top:84px !important;padding-bottom:28px !important}
  html body #cinec-site .hero-stage{height:230px !important}
  html body #cinec-site .hero h1{margin:14px 0 12px !important}
  html body #cinec-site .cw-hero-btns{margin-top:26px !important}
}

/* slx-cap-noimg */

/* captain portal: no pictures (no boats, lighthouse, compass or photos) */
#captain-portal .capx-art{display:none !important}
#captain-portal .capx-hero::after,#captain-portal .capx-hero::before{display:none !important;content:none !important}
#captain-portal .capx-hero{min-height:0 !important;padding:20px 26px !important;background:linear-gradient(110deg,#082a66 0%,#0d3f99 60%,#1257c9 100%) !important}
#captain-portal .capx-txt{max-width:100% !important}
#captain-portal .cap-sb::after{display:none !important;content:none !important}

/* main */

            .dv-ov { z-index: 10050 !important; }
            .dv-body:has(.dv-docx) { align-items: flex-start; }
            .dv-docx { width: 100%; display: flex; justify-content: center; padding: 8px 0 30px; }
            .dv-docx-page { background: #fff; color: #111; width: 100%; max-width: 850px; min-height: 60vh; padding: 48px 56px; border-radius: 6px; box-shadow: 0 6px 30px rgba(0,0,0,.45); font-family: Calibri, Arial, sans-serif; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
            .dv-docx-page table { border-collapse: collapse; margin: 10px 0; max-width: 100%; }
            .dv-docx-page td, .dv-docx-page th { border: 1px solid #999; padding: 4px 8px; vertical-align: top; }
            .dv-docx-page img { max-width: 100%; height: auto; }
            .dv-docx-page h1, .dv-docx-page h2, .dv-docx-page h3 { margin: 16px 0 8px; color: #1e3a5f; }
            @media (max-width: 700px) { .dv-docx-page { padding: 22px 18px; } }
            .cpfs-doc-hint { align-self: center; font-size: 12px; color: var(--c-muted); }
            #sumfv-ov { display: none; position: fixed; inset: 0; z-index: 10040; background: #0a1228; flex-direction: column; }
            #sumfv-ov.open { display: flex; }
            .sumfv-bar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: #070d1c; border-bottom: 1px solid #1e2d4e; flex-wrap: wrap; }
            .sumfv-title { flex: 1; color: #fff; font-weight: 700; font-size: 14px; min-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
            .sumfv-btn { background: #1e3a5f; color: #cfe3ff; border: 1px solid #2d5a8e; border-radius: 7px; padding: 7px 12px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: var(--font); }
            .sumfv-btn:hover { background: #2d5a8e; color: #fff; }
            .sumfv-close { background: #2d1a1a; color: #f87171; border-color: #7f1d1d; }
            .sumfv-pct { color: #fff; font-size: 12px; font-weight: 700; min-width: 42px; text-align: center; }
            .sumfv-scroll { flex: 1; overflow: auto; padding: 20px; }
            .sumfv-zoom { width: max-content; margin: 0 auto; }
            .sumfv-zoom .sum-sheet { width: 1040px; max-width: none !important; padding: 36px 42px !important; border-radius: 6px; box-shadow: 0 8px 36px rgba(0,0,0,.5); border: 0; }
            .sumfv-zoom .sum-sheet .sum-section-lbl { display: flex !important; }
            @media (min-width: 861px) { .cpfs-tabs { flex-wrap: wrap; } }