/* ==========================================================================
   KARTIKA - SISTEM INFORMASI KOPERASI DIGITAL TNI AD
   Living AI-Era Design System: 360° Continuous Orbiting Motion & Golden Aura
   ========================================================================== */

:root {
    /* Color Palette: Royal Emeralds */
    --emerald-950: #051811;
    --emerald-900: #0b241c;
    --emerald-850: #103025;
    --emerald-800: #153e30;
    --emerald-750: #1a4a3a;
    --emerald-700: #205946;
    --emerald-600: #286e57;
    --emerald-500: #35876d;
    --emerald-400: #49a285;
    --emerald-300: #6fbe9e;
    --emerald-200: #a2dab8;
    --emerald-100: #d2edd7;
    --emerald-50:  #eff8f3;

    /* Color Palette: Champagne & Warm Golds */
    --gold-950: #453004;
    --gold-900: #664708;
    --gold-800: #8c620c;
    --gold-700: #b37e12;
    --gold-600: #d1971d;
    --gold-500: #e2ad32;
    --gold-400: #ecc75f;
    --gold-300: #f4dc8f;
    --gold-200: #faedbf;
    --gold-100: #fdf7df;
    --gold-50:  #fefdf7;

    /* Semantic Aliases */
    --navy: var(--emerald-900);
    --navy-2: var(--emerald-800);
    --blue: var(--emerald-600);
    --teal: #147c72;
    --green: #1e7d50;
    --red: #a12b2e;
    --amber: #b57f10;
    --gold: var(--gold-500);
    --gold-soft: var(--gold-100);

    /* Surfaces & Neutrals */
    --canvas: #f3f6f4;
    --canvas-subtle: #e9effb;
    --surface: #ffffff;
    --surface-alt: #fbfdfc;
    --surface-card: #ffffff;
    --ink: #12241d;
    --ink-secondary: #283d34;
    --muted: #566c63;
    --muted-light: #849990;
    --line: #dae3de;
    --line-subtle: #e8f0ec;
    --line-focus: var(--emerald-600);

    /* Brand Accents */
    --brand-950: var(--emerald-950);
    --brand-900: var(--emerald-900);
    --brand-800: var(--emerald-800);
    --brand-700: var(--emerald-700);
    --brand-600: var(--emerald-600);
    --brand-gold: var(--gold-500);
    --brand-gold-light: var(--gold-300);
    --brand-ivory: #fafcfb;

    /* Layered Shadows */
    --shadow-xs: 0 1px 2px rgba(8, 28, 20, .04);
    --shadow-sm: 0 2px 6px rgba(8, 28, 20, .04), 0 1px 2px rgba(8, 28, 20, .02);
    --shadow-md: 0 6px 18px -2px rgba(8, 28, 20, .06), 0 2px 6px -1px rgba(8, 28, 20, .03);
    --shadow-soft: 0 8px 26px -3px rgba(8, 28, 20, .06), 0 3px 10px -2px rgba(8, 28, 20, .03);
    --shadow-lifted: 0 18px 44px -6px rgba(8, 28, 20, .13), 0 6px 16px -2px rgba(8, 28, 20, .06);
    --shadow-floating: 0 24px 58px -8px rgba(5, 20, 15, .18), 0 8px 24px -4px rgba(5, 20, 15, .08);
    --shadow-gold-glow: 0 0 26px rgba(226, 173, 50, .28);
    --shadow-emerald-glow: 0 0 28px rgba(40, 110, 87, .24);

    /* Motion Curves */
    --ease-premium: cubic-bezier(.16, 1, .3, 1);
    --ease-spring: cubic-bezier(.175, .885, .32, 1.275);
    --ease-smooth: cubic-bezier(.4, 0, .2, 1);
    --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
}

/* ==========================================================================
   Base & Reset
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-family: "Segoe UI Variable Text", "Aptos", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
    color: var(--ink);
    background-color: var(--canvas);
    scroll-behavior: smooth;
    color-scheme: light;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 92% 4%, rgba(226, 173, 50, .12), transparent 28rem),
        radial-gradient(circle at 8% 25%, rgba(40, 110, 87, .08), transparent 34rem),
        radial-gradient(circle at 50% 80%, rgba(20, 124, 114, .05), transparent 40rem),
        linear-gradient(180deg, #f9fbf9 0%, var(--canvas) 100%);
    color: var(--ink);
}

a {
    color: inherit;
    text-decoration: none;
}

button, input, select, textarea {
    font: inherit;
    -webkit-tap-highlight-color: transparent;
}

::selection {
    color: #ffffff;
    background: var(--emerald-600);
}

:focus-visible {
    outline: 2px solid var(--gold-500);
    outline-offset: 3px;
}

.ui-icon {
    width: 20px;
    height: 20px;
    display: block;
    flex: 0 0 auto;
    stroke-width: 1.8;
}

/* ==========================================================================
   Continuous 360° Keyframe Animations
   ========================================================================== */
@keyframes spin-360-cw {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes spin-360-ccw {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

@keyframes spin-360-gyro-1 {
    0% { transform: rotate(0deg) rotateX(25deg); }
    100% { transform: rotate(360deg) rotateX(25deg); }
}

@keyframes spin-360-gyro-2 {
    0% { transform: rotate(0deg) rotateY(30deg); }
    100% { transform: rotate(-360deg) rotateY(30deg); }
}

@keyframes border-beam-360 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==========================================================================
   App Shell & Living Aurora Background
   ========================================================================== */
.app-body {
    position: relative;
    isolation: isolate;
    overflow-x: clip;
}

.app-shell {
    position: relative;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
}

.app-ambient {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.app-ambient::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .42;
    background-image:
        linear-gradient(rgba(21, 62, 48, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(21, 62, 48, .035) 1px, transparent 1px);
    background-size: 52px 52px;
    -webkit-mask-image: radial-gradient(circle at 60% 30%, #000 25%, transparent 80%);
    mask-image: radial-gradient(circle at 60% 30%, #000 25%, transparent 80%);
}

.app-ambient span {
    position: absolute;
    border-radius: 50%;
    filter: blur(85px);
    opacity: .8;
    will-change: transform, opacity;
}

.app-ambient span:first-child {
    width: 540px;
    height: 540px;
    right: -140px;
    top: 2%;
    background: radial-gradient(circle, rgba(226, 173, 50, .18), rgba(226, 173, 50, 0) 70%);
    animation: living-aurora-one 16s ease-in-out infinite alternate;
}

.app-ambient span:last-child {
    width: 620px;
    height: 620px;
    left: 14%;
    bottom: -200px;
    background: radial-gradient(circle, rgba(40, 110, 87, .13), rgba(20, 124, 114, 0) 70%);
    animation: living-aurora-two 20s 2s ease-in-out infinite alternate;
}

@keyframes living-aurora-one {
    0% { transform: translate3d(0, 0, 0) scale(1); opacity: .7; }
    50% { transform: translate3d(-60px, 40px, 0) scale(1.18); opacity: .9; }
    100% { transform: translate3d(40px, 80px, 0) scale(.92); opacity: .65; }
}

@keyframes living-aurora-two {
    0% { transform: translate3d(0, 0, 0) scale(1); opacity: .65; }
    50% { transform: translate3d(80px, -50px, 0) scale(1.22); opacity: .85; }
    100% { transform: translate3d(-50px, -70px, 0) scale(1.05); opacity: .7; }
}

/* ==========================================================================
   Spotlight Reactive Glow on Cards
   ========================================================================== */
.card,
.stat-card,
.module-card,
.login-box,
.pos-product-tile,
.dashboard-welcome {
    --mouse-x: 50%;
    --mouse-y: 50%;
    --spotlight-opacity: 0;
    transition: transform .28s var(--ease-premium), box-shadow .28s var(--ease-premium), border-color .28s ease;
    transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift-y, 0px));
    transform-style: preserve-3d;
    will-change: transform;
}

.card:hover,
.stat-card:hover,
.module-card:hover,
.login-box:hover,
.pos-product-tile:hover {
    --spotlight-opacity: 1;
}

/* ==========================================================================
   Sidebar Navigation (360° Revolving Orbit Halo)
   ========================================================================== */
.sidebar {
    position: sticky;
    top: 0;
    z-index: 40;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 22px 18px 18px;
    overflow-y: auto;
    overflow-x: hidden;
    isolation: isolate;
    color: #ffffff;
    background:
        radial-gradient(circle at 20% 0%, rgba(226, 173, 50, .22), transparent 18rem),
        radial-gradient(circle at 90% 70%, rgba(32, 89, 70, .3), transparent 22rem),
        linear-gradient(175deg, #113429 0%, #0b241c 48%, #051610 100%);
    border-right: 1px solid rgba(226, 173, 50, .24);
    box-shadow: 14px 0 40px rgba(4, 18, 13, .25);
}

.sidebar::-webkit-scrollbar {
    width: 5px;
}

.sidebar::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: rgba(255, 255, 255, .16);
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(226, 173, 50, .35);
}

.sidebar > :not(.sidebar-ornament) {
    position: relative;
    z-index: 2;
}

.sidebar-ornament {
    position: absolute;
    z-index: 0;
    width: 360px;
    height: 360px;
    right: -220px;
    top: 14%;
    border: 1.5px solid rgba(226, 173, 50, .18);
    border-radius: 50%;
    box-shadow:
        0 0 0 45px rgba(226, 173, 50, .04),
        0 0 0 90px rgba(255, 255, 255, .018);
    pointer-events: none;
    animation: spin-360-cw 35s linear infinite;
    will-change: transform;
}

.sidebar-ornament::before {
    content: "";
    position: absolute;
    inset: 70px;
    border: 1px dashed rgba(226, 173, 50, .2);
    border-radius: 50%;
    animation: spin-360-ccw 25s linear infinite;
}

.sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 4px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    padding: 3px 4px;
    border-radius: 12px;
    transition: transform .25s var(--ease-premium);
}

.brand-emblem {
    position: relative;
    isolation: isolate;
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    transition: transform .35s var(--ease-premium), filter .35s ease;
}

.brand-emblem::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -2;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(236, 199, 95, .4), rgba(209, 151, 29, 0) 70%);
    animation: brand-breathe 4.5s ease-in-out infinite;
}

.brand-emblem-ring {
    position: absolute;
    inset: -6px;
    z-index: -1;
    border: 1.5px solid rgba(236, 199, 95, .48);
    border-top-color: transparent;
    border-bottom-color: rgba(236, 199, 95, .2);
    border-radius: 50%;
    animation: spin-360-cw 8s linear infinite;
    will-change: transform;
}

.brand-emblem-ring::before {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px dashed rgba(236, 199, 95, .35);
    border-radius: 50%;
    animation: spin-360-ccw 12s linear infinite;
}

.brand-emblem-ring::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    right: 2px;
    top: 6px;
    border-radius: 50%;
    background: var(--gold-400);
    box-shadow: 0 0 14px var(--gold-400), 0 0 20px var(--gold-300);
}

.brand-emblem img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(3, 16, 12, .45));
}

.brand:hover .brand-emblem {
    transform: translateY(-2px) scale(1.05);
    filter: brightness(1.1);
}

.brand-copy {
    min-width: 0;
    display: grid;
    align-content: center;
}

.brand-overline {
    margin-bottom: 3px;
    color: var(--gold-400);
    font-size: 8.5px;
    font-weight: 850;
    letter-spacing: .25em;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(236, 199, 95, .35);
}

.brand-copy strong {
    display: block;
    color: #ffffff;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.brand-copy small {
    display: block;
    margin-top: 4px;
    color: #c5ded3;
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sidebar-close {
    display: none;
}

.sidebar-context {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    margin: 18px 2px 8px;
    padding: 8px 12px;
    border: 1px solid rgba(226, 173, 50, .24);
    border-radius: 10px;
    color: #c5ded3;
    background: rgba(255, 255, 255, .05);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .03em;
    backdrop-filter: blur(8px);
}

.sidebar-status-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 10px #4ade80;
    flex: 0 0 auto;
}

.sidebar-status-dot::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px dashed rgba(74, 222, 128, .6);
    animation: spin-360-cw 4s linear infinite;
}

.sidebar-status-dot::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1.5px solid #4ade80;
    animation: radar-ping 2.4s cubic-bezier(0, 0, .2, 1) infinite;
}

@keyframes radar-ping {
    0% { transform: scale(.9); opacity: .9; }
    80%, 100% { transform: scale(2.6); opacity: 0; }
}

.sidebar-context-copy {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-context strong {
    margin-left: auto;
    color: var(--gold-300);
    font-size: 8.5px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.sidebar nav {
    flex: 1 0 auto;
}

.nav-label {
    margin: 20px 8px 8px;
    color: #8dafa1;
    font-size: 9.5px;
    font-weight: 850;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 43px;
    margin: 3px 0;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #cce0d7;
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s var(--ease-premium);
}

.nav-link::before {
    content: "";
    position: absolute;
    left: -1px;
    width: 3.5px;
    height: 20px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, var(--gold-400), var(--gold-600));
    opacity: 0;
    transform: scaleY(.4);
    transition: transform .25s var(--ease-premium), opacity .25s ease;
}

.nav-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, .09);
    transform: translateX(4px);
}

.nav-link.active {
    color: #ffffff;
    background: linear-gradient(90deg, rgba(226, 173, 50, .2), rgba(255, 255, 255, .09));
    border-color: rgba(226, 173, 50, .32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 4px 14px rgba(0, 0, 0, .14);
    font-weight: 750;
}

.nav-link.active::before {
    opacity: 1;
    transform: scaleY(1);
}

.nav-link.active::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, .12) 50%, transparent 75%);
    transform: translateX(-120%);
    animation: brand-nav-sheen 6.5s 1.2s ease-in-out infinite;
    pointer-events: none;
}

.nav-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 8px;
    color: #a7c6b9;
    background: rgba(255, 255, 255, .05);
    transition: transform .3s var(--ease-premium), color .2s ease, background .2s ease;
}

.nav-icon .ui-icon {
    width: 17px;
    height: 17px;
}

.nav-link:hover .nav-icon {
    transform: translateX(1px) scale(1.08) rotate(-3deg);
    color: var(--gold-300);
    background: rgba(226, 173, 50, .14);
}

.nav-link.active .nav-icon {
    color: var(--gold-300);
    background: rgba(226, 173, 50, .18);
    box-shadow: 0 0 14px rgba(226, 173, 50, .25);
}

.sidebar-footer {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(226, 173, 50, .16);
}

.sidebar-motto {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0 2px 14px;
    color: #8faea2;
    font-size: 7.5px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.sidebar-motto i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(226, 173, 50, .75);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 0 2px 12px;
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    color: #dce7e2;
    background: rgba(255, 255, 255, .04);
}

.sidebar-user > span:last-child {
    min-width: 0;
}

.sidebar-user strong, .sidebar-user small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user strong {
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
}

.sidebar-user small {
    margin-top: 3px;
    color: #9cb8ad;
    font-size: 10px;
}

.user-avatar {
    position: relative;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1.5px solid rgba(226, 173, 50, .4);
    border-radius: 10px;
    color: var(--gold-300);
    background: radial-gradient(circle, rgba(226, 173, 50, .22), rgba(226, 173, 50, .05));
    font-size: 14px;
    font-weight: 850;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}

.logout {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 41px;
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    color: #bad0c7;
    background: rgba(0, 0, 0, .16);
    cursor: pointer;
    font-size: 12px;
    font-weight: 650;
    transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s var(--ease-premium);
}

.logout .ui-icon {
    width: 16px;
    height: 16px;
}

.logout:hover {
    color: #ffffff;
    background: rgba(161, 43, 46, .35);
    border-color: rgba(225, 120, 120, .35);
    transform: translateY(-1px);
}

.sidebar-backdrop {
    display: none;
}

/* ==========================================================================
   Content Area & Topbar with Dynamic Elevation
   ========================================================================== */
.content {
    min-width: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, rgba(251, 253, 251, .65) 0%, rgba(243, 246, 244, .92) 100%);
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    min-height: 86px;
    padding: 16px 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    border-bottom: 1px solid rgba(218, 227, 222, .85);
    background: rgba(253, 254, 252, .88);
    box-shadow: 0 4px 20px rgba(8, 28, 20, .025);
    backdrop-filter: blur(18px) saturate(140%);
    transition: min-height .3s var(--ease-premium), background .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.topbar.is-scrolled {
    min-height: 76px;
    border-bottom-color: rgba(198, 212, 205, .95);
    background: rgba(254, 255, 253, .96);
    box-shadow: 0 10px 28px rgba(8, 28, 20, .07);
}

.topbar-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2.5px;
    background: linear-gradient(90deg, var(--emerald-600), var(--gold-500) 70%, var(--gold-300));
    box-shadow: 0 0 12px rgba(226, 173, 50, .45);
    transform: scaleX(var(--scroll-progress, 0));
    transform-origin: left center;
    transition: transform .06s linear;
    pointer-events: none;
}

.topbar-leading {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.mobile-menu-button {
    display: none;
}

.page-heading {
    min-width: 0;
}

.page-kicker {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 4px;
    color: var(--gold-700);
    font-size: 9.5px;
    font-weight: 850;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.page-kicker i {
    width: 16px;
    height: 1.5px;
    background: linear-gradient(90deg, var(--gold-700), var(--gold-400));
    border-radius: 2px;
}

.topbar h1 {
    margin: 0;
    color: var(--emerald-950);
    font-size: clamp(20px, 1.9vw, 25px);
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: -.03em;
}

.topbar p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 500;
}

.topbar-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    flex: 0 0 auto;
}

.today-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink-secondary);
    background: rgba(255, 255, 255, .85);
    font-size: 11.5px;
    font-weight: 650;
    white-space: nowrap;
    box-shadow: var(--shadow-xs);
    transition: transform .2s var(--ease-premium), border-color .2s ease, box-shadow .2s ease;
}

.today-chip .ui-icon {
    width: 15px;
    height: 15px;
    color: var(--gold-600);
}

.today-chip:hover {
    transform: translateY(-1px);
    border-color: var(--gold-400);
    box-shadow: 0 0 14px rgba(226, 173, 50, .2);
}

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

.main {
    flex: 1 0 auto;
    width: 100%;
    max-width: 1540px;
    margin: 0 auto;
    padding: 28px 36px 54px;
}

/* ==========================================================================
   Buttons with Radiant Flares
   ========================================================================== */
.btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 750;
    font-size: 13px;
    line-height: 1.2;
    text-align: center;
    box-shadow: var(--shadow-xs);
    transition: transform .2s var(--ease-premium), box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

.btn:hover {
    transform: translateY(-1.5px);
}

.btn:active {
    transform: translateY(0) scale(.985);
}

.btn-primary {
    color: #ffffff;
    background: linear-gradient(135deg, var(--emerald-800) 0%, var(--emerald-600) 100%);
    border-color: rgba(255, 255, 255, .15);
    box-shadow: 0 6px 20px rgba(21, 62, 48, .25), inset 0 1px 0 rgba(255, 255, 255, .2);
}

.btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(105deg, transparent 15%, rgba(255, 255, 255, .28) 48%, transparent 80%);
    transform: translateX(-130%);
    transition: transform .65s var(--ease-premium);
    pointer-events: none;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--emerald-850) 0%, var(--emerald-700) 100%);
    box-shadow: 0 10px 28px rgba(21, 62, 48, .32), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.btn-primary:hover::before {
    transform: translateX(130%);
}

.btn-secondary {
    color: var(--emerald-900);
    background: #ffffff;
    border-color: var(--line);
    box-shadow: 0 2px 6px rgba(8, 28, 20, .04);
}

.btn-secondary:hover {
    border-color: var(--emerald-400);
    background: var(--emerald-50);
    box-shadow: 0 4px 14px rgba(8, 28, 20, .08);
}

.btn-danger {
    color: #ffffff;
    background: linear-gradient(135deg, #a82e31 0%, #852225 100%);
    border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 6px 16px rgba(168, 46, 49, .22);
}

.btn-danger:hover {
    background: linear-gradient(135deg, #8f2629 0%, #701c1f 100%);
    box-shadow: 0 8px 24px rgba(168, 46, 49, .32);
}

.btn-sm {
    min-height: 34px;
    padding: 6px 11px;
    border-radius: 8px;
    font-size: 12px;
}

.ui-ripple {
    position: absolute !important;
    z-index: 5 !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(236, 199, 95, .45) 0%, rgba(255, 255, 255, .2) 60%, transparent 80%) !important;
    transform: scale(0);
    opacity: .9;
    pointer-events: none !important;
    animation: ui-ripple .58s ease-out forwards !important;
}

/* ==========================================================================
   Cards, Bento Stat Cards & Dashboard Hero (Living 360° Gyro Crest)
   ========================================================================== */
.card {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(226, 173, 50, .06), transparent 70%),
        #ffffff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
}

.card-header {
    position: relative;
    min-height: 60px;
    padding: 18px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid var(--line-subtle);
    background: linear-gradient(180deg, #ffffff, #fafcfb);
}

.card-header::after {
    content: "";
    position: absolute;
    left: 22px;
    bottom: -1px;
    width: 42px;
    height: 2.5px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--emerald-600), var(--gold-500));
}

.card-header h2 {
    margin: 0;
    color: var(--emerald-950);
    font-size: 15.5px;
    font-weight: 750;
    letter-spacing: -.015em;
}

.card-header > span {
    color: var(--muted);
    font-size: 12px;
}

.card-body {
    padding: 22px;
}

.cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.stat-card {
    position: relative;
    overflow: hidden;
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background:
        radial-gradient(350px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(226, 173, 50, .08), transparent 65%),
        linear-gradient(145deg, #ffffff 0%, #fbfdfc 100%);
    box-shadow: var(--shadow-soft);
}

.stat-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3.5px;
    background: linear-gradient(90deg, var(--emerald-600), var(--gold-500));
    opacity: .85;
}

.stat-card::after {
    content: "";
    position: absolute;
    width: 80px;
    height: 80px;
    right: -40px;
    bottom: -40px;
    border: 1.5px dashed rgba(226, 173, 50, .24);
    border-radius: 50%;
    box-shadow: 0 0 0 20px rgba(226, 173, 50, .03);
    animation: spin-360-cw 20s linear infinite;
    pointer-events: none;
    will-change: transform;
}

.stat-card:hover {
    z-index: 2;
    border-color: rgba(40, 110, 87, .35);
    box-shadow: var(--shadow-lifted), 0 0 24px rgba(226, 173, 50, .12);
}

.stat-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 650;
}

.stat-value {
    margin-top: 14px;
    color: var(--emerald-950);
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 850;
    letter-spacing: -.035em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    transition: text-shadow .4s ease, color .3s ease;
}

.stat-value.counted-flash {
    animation: stat-flash-glow .9s ease-out both;
}

@keyframes stat-flash-glow {
    0% { text-shadow: 0 0 18px rgba(226, 173, 50, .75), 0 0 32px rgba(40, 110, 87, .45); }
    100% { text-shadow: none; }
}

.stat-note {
    margin-top: 6px;
    color: var(--muted-light);
    font-size: 12px;
    line-height: 1.45;
}

.stat-icon {
    position: relative;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 12px;
    color: var(--emerald-700);
    background: var(--emerald-50);
    border: 1px solid rgba(40, 110, 87, .12);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: -.02em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
    transition: transform .35s var(--ease-premium), box-shadow .3s ease, background .3s ease;
}

.stat-icon .ui-icon {
    width: 19px;
    height: 19px;
}

.stat-card:hover .stat-icon {
    transform: rotate(-5deg) scale(1.1);
    background: var(--emerald-100);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 18px rgba(40, 110, 87, .16);
}

.grid-2 {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(300px, .8fr);
    gap: 20px;
    margin-top: 20px;
}

/* Dashboard Welcome Banner (360° Gyro Crest) */
.dashboard-welcome {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    min-height: 200px;
    margin-bottom: 22px;
    padding: 28px 34px;
    border: 1px solid rgba(226, 173, 50, .32);
    border-radius: 18px;
    color: #ffffff;
    background:
        radial-gradient(450px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(236, 199, 95, .18), transparent 70%),
        radial-gradient(circle at 86% 22%, rgba(236, 199, 95, .22), transparent 16rem),
        radial-gradient(circle at 10% 90%, rgba(53, 135, 109, .2), transparent 18rem),
        linear-gradient(130deg, #0e2d23 0%, #153e30 52%, #1e5442 100%);
    box-shadow: 0 18px 48px rgba(8, 28, 20, .2), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.dashboard-welcome::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .1) 46%, transparent 72%);
    transform: translateX(-110%);
    animation: brand-hero-sheen 8s 1s ease-in-out infinite;
    pointer-events: none;
}

.dashboard-welcome::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 320px;
    height: 320px;
    right: -70px;
    bottom: -150px;
    border: 1.5px solid rgba(236, 199, 95, .22);
    border-radius: 50%;
    box-shadow:
        0 0 0 44px rgba(236, 199, 95, .04),
        0 0 0 88px rgba(255, 255, 255, .018);
    animation: spin-360-cw 30s linear infinite;
    will-change: transform;
}

.dashboard-welcome > * {
    position: relative;
    z-index: 2;
}

.dashboard-welcome-copy {
    max-width: 760px;
}

.dashboard-eyebrow {
    display: block;
    margin-bottom: 7px;
    color: var(--gold-300);
    font-size: 9.5px;
    font-weight: 850;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(236, 199, 95, .4);
}

.dashboard-welcome h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(23px, 2.6vw, 32px);
    font-weight: 850;
    letter-spacing: -.03em;
    line-height: 1.15;
}

.dashboard-welcome p {
    max-width: 650px;
    margin: 9px 0 0;
    color: #cce0d7;
    font-size: 13.5px;
    line-height: 1.62;
}

.dashboard-trust-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 18px;
}

.dashboard-trust-list span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #dce7e2;
    font-size: 9.5px;
    font-weight: 780;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.dashboard-trust-list i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold-400);
    box-shadow: 0 0 0 4px rgba(236, 199, 95, .15);
}

.dashboard-welcome-side {
    display: flex;
    align-items: center;
    gap: 22px;
    flex: 0 0 auto;
}

.dashboard-crest {
    position: relative;
    isolation: isolate;
    width: 104px;
    height: 104px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.dashboard-crest::before {
    content: "";
    position: absolute;
    inset: -10px;
    border: 1.5px solid rgba(236, 199, 95, .4);
    border-top-color: transparent;
    border-bottom-color: rgba(236, 199, 95, .15);
    border-radius: 50%;
    animation: spin-360-cw 7s linear infinite;
    will-change: transform;
}

.dashboard-crest::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 1px dashed rgba(236, 199, 95, .32);
    border-radius: 50%;
    animation: spin-360-ccw 10s linear infinite;
    will-change: transform;
}

.dashboard-crest span {
    position: absolute;
    width: 7px;
    height: 7px;
    left: -2px;
    top: 18px;
    border-radius: 50%;
    background: var(--gold-400);
    box-shadow: 0 0 14px var(--gold-400), 0 0 20px var(--gold-300);
}

.dashboard-crest img {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    object-fit: contain;
    filter: drop-shadow(0 10px 16px rgba(3, 16, 12, .4));
    animation: brand-crest-float 4.8s ease-in-out infinite;
}

.dashboard-welcome-meta {
    min-width: 120px;
    display: grid;
    gap: 6px;
    text-align: right;
}

.dashboard-welcome-meta span {
    color: #bad0c7;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.dashboard-welcome-meta i {
    position: relative;
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 8px #4ade80;
}

.dashboard-welcome-meta strong {
    color: var(--gold-300);
    font-size: 13.5px;
    font-weight: 750;
    line-height: 1.4;
    text-shadow: 0 0 10px rgba(236, 199, 95, .3);
}

/* ==========================================================================
   Module Grid & Cards (Living 3D Tilt)
   ========================================================================== */
.section-heading {
    margin: 32px 0 16px;
    color: var(--emerald-950);
    font-size: 17.5px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.module-card {
    position: relative;
    overflow: hidden;
    min-height: 220px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background:
        radial-gradient(350px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(226, 173, 50, .07), transparent 65%),
        linear-gradient(150deg, #ffffff 0%, #fbfdfc 100%);
    box-shadow: var(--shadow-soft);
}

.module-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3.5px;
    background: var(--module-color, var(--emerald-600));
    opacity: .75;
    transition: width .25s var(--ease-premium), opacity .25s ease;
}

.module-card::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    right: -40px;
    top: -40px;
    border-radius: 50%;
    background: var(--module-soft, var(--emerald-50));
    opacity: .8;
    pointer-events: none;
}

.module-card:hover {
    border-color: color-mix(in srgb, var(--module-color, var(--emerald-600)) 35%, var(--line));
    box-shadow: var(--shadow-lifted), 0 0 20px color-mix(in srgb, var(--module-color, var(--emerald-600)) 15%, transparent);
}

.module-card:hover::before {
    width: 5.5px;
    opacity: 1;
}

.module-number {
    color: var(--muted);
    font-size: 9.5px;
    font-weight: 850;
    letter-spacing: .18em;
}

.module-title {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 11px 0 13px;
    color: var(--emerald-950);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.025em;
}

.module-title span {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 11px;
    color: var(--module-color, var(--emerald-600));
    background: var(--module-soft, var(--emerald-50));
    transition: transform .34s var(--ease-premium), box-shadow .3s ease;
}

.module-title .ui-icon {
    width: 20px;
    height: 20px;
}

.module-card:hover .module-title span {
    transform: rotate(-5deg) scale(1.1);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--module-color, var(--emerald-600)) 22%, transparent);
}

.module-list {
    margin: 0;
    padding-left: 18px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.75;
}

.module-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    color: var(--module-color, var(--emerald-700));
    font-size: 13px;
    font-weight: 750;
}

.module-link .ui-icon {
    width: 15px;
    height: 15px;
    transition: transform .2s ease;
}

.module-card:hover .module-link .ui-icon {
    transform: translateX(5px);
}

.module-wide {
    grid-column: span 3;
    min-height: auto;
}

.module-wide .module-list {
    columns: 3;
}

/* ==========================================================================
   Chart & Visualizations (Living Neon Caps)
   ========================================================================== */
.dashboard-chart-card {
    margin-top: 22px;
}

.chart {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    min-height: 290px;
    padding-top: 28px;
}

.chart-group {
    display: flex;
    flex: 1;
    min-width: 70px;
    height: 230px;
    flex-direction: column;
    justify-content: flex-end;
    text-align: center;
    gap: 10px;
}

.chart-bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    height: 195px;
    padding-bottom: 2px;
    border-bottom: 1.5px solid var(--line);
}

.chart-bar {
    position: relative;
    display: block;
    width: 18px;
    min-height: 4px;
    border-radius: 6px 6px 0 0;
    transition: transform .3s var(--ease-premium), filter .2s ease;
}

.chart-bar:hover {
    filter: brightness(1.15);
    transform: scaleX(1.15) translateY(-2px);
}

.chart-savings {
    background: linear-gradient(180deg, #329676 0%, #1f6b53 100%);
    box-shadow: 0 -2px 10px rgba(50, 150, 118, .35);
}

.chart-loans {
    background: linear-gradient(180deg, #bb4548 0%, #8c282a 100%);
    box-shadow: 0 -2px 10px rgba(187, 69, 72, .35);
}

.chart-installments {
    background: linear-gradient(180deg, #ecc75f 0%, #b88514 100%);
    box-shadow: 0 -2px 10px rgba(236, 199, 95, .35);
}

.chart-group small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
}

.chart-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    font-weight: 650;
    color: var(--muted);
}

.chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.chart-legend span::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.legend-savings::before {
    background: #25785d;
    box-shadow: 0 0 8px rgba(37, 120, 93, .4);
}

.legend-loans::before {
    background: #a33235;
    box-shadow: 0 0 8px rgba(163, 50, 53, .4);
}

.legend-installments::before {
    background: #cb941e;
    box-shadow: 0 0 8px rgba(203, 148, 30, .4);
}

/* ==========================================================================
   Tables, Badges, Pagination & Actions
   ========================================================================== */
.table-wrap {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
}

.table-wrap::-webkit-scrollbar {
    height: 6px;
}

.table-wrap::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: var(--line);
}

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

th {
    padding: 13px 16px;
    color: var(--ink-secondary);
    background: #f7faf8;
    border-bottom: 1.5px solid var(--line);
    font-size: 10.5px;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .09em;
    white-space: nowrap;
}

td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line-subtle);
    color: var(--ink-secondary);
    font-size: 13.5px;
    vertical-align: middle;
}

tbody tr {
    transition: background .16s ease, transform .16s ease;
}

tbody tr:hover {
    background: #f8faf8;
}

tr:last-child td {
    border-bottom: 0;
}

td a:not(.btn), .text-link {
    color: var(--emerald-700);
    font-weight: 700;
    transition: color .16s ease;
}

td a:not(.btn):hover, .text-link:hover {
    color: var(--gold-700);
}

.text-muted {
    color: var(--muted);
}

.text-right {
    text-align: right;
}

.empty {
    padding: 38px 20px;
    text-align: center;
    color: var(--muted);
    font-size: 13.5px;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .02em;
    line-height: 1;
    white-space: nowrap;
    transition: box-shadow .2s ease;
}

.badge-active, .badge-success {
    color: #1a6344;
    background: #e3f5eb;
    border: 1px solid #b7e3cb;
    box-shadow: 0 0 10px rgba(26, 99, 68, .12);
}

.badge-inactive {
    color: #8c6412;
    background: #fbf0d3;
    border: 1px solid #ebd498;
}

.badge-resigned {
    color: #8f2628;
    background: #fae4e3;
    border: 1px solid #f2bcba;
}

.money-positive {
    color: var(--green);
    font-weight: 750;
}

.money-negative {
    color: var(--red);
    font-weight: 750;
}

.table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 130px;
}

.table-actions form {
    margin: 0;
}

.member-actions {
    min-width: 200px;
}

.pagination {
    margin-top: 22px;
}

.pagination nav > div:first-child {
    display: none;
}

.pagination nav > div:last-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.pagination svg {
    width: 18px;
    height: 18px;
}

.pagination a, .pagination span {
    font-size: 13px;
    font-weight: 650;
    border-radius: 8px;
    padding: 6px 12px;
    transition: all .16s ease;
}

.pagination nav span[aria-current="page"] span {
    background: var(--emerald-700) !important;
    color: #ffffff !important;
    border-color: var(--emerald-700) !important;
    box-shadow: 0 4px 14px rgba(21, 62, 48, .28);
}

/* ==========================================================================
   Forms, Inputs & Workflows
   ========================================================================== */
.filter-bar {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.field {
    display: grid;
    gap: 6px;
}

.field.grow {
    flex: 1 1 260px;
}

.field-grow {
    flex: 1;
}

.field label {
    color: var(--ink-secondary);
    font-weight: 700;
    font-size: 12.5px;
}

.field-help {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}

.input, .select, .textarea {
    width: 100%;
    min-height: 42px;
    padding: 9px 13px;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    background: #ffffff;
    font-size: 13.5px;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.input:hover, .select:hover, .textarea:hover {
    border-color: var(--line-dark);
}

.input:focus, .select:focus, .textarea:focus {
    border-color: var(--emerald-600);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(40, 110, 87, .14), 0 4px 14px rgba(8, 28, 20, .05);
}

.textarea {
    min-height: 95px;
    resize: vertical;
}

.error {
    color: var(--red);
    font-size: 12px;
    font-weight: 600;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 22px;
}

.field-full {
    grid-column: 1 / -1;
}

.section-title {
    grid-column: 1 / -1;
    margin: 14px 0 0;
    padding-bottom: 8px;
    border-bottom: 1.5px solid var(--line);
    font-size: 14.5px;
    font-weight: 800;
    color: var(--emerald-950);
}

.form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 22px;
    border-top: 1px solid var(--line-subtle);
    background: #fafcfb;
}

.alert {
    margin-bottom: 20px;
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 13.5px;
    box-shadow: var(--shadow-sm);
    animation: alert-enter .5s var(--ease-premium) both;
}

.alert-success {
    color: #155c3c;
    background: #e8f7ee;
    border: 1px solid #b8e6cc;
}

.alert-error {
    color: #8c2527;
    background: #faecea;
    border: 1px solid #f2c2bc;
}

.alert ul {
    margin: 6px 0 0;
    padding-left: 20px;
}

.drop-zone {
    display: grid;
    place-items: center;
    min-height: 200px;
    padding: 28px;
    border: 2px dashed #a2b8ad;
    border-radius: 16px;
    background: #f8faf8;
    text-align: center;
    transition: border-color .2s ease, background .2s ease;
}

.drop-zone:hover, .drop-zone.dragover {
    border-color: var(--gold-600);
    background: var(--gold-50);
    box-shadow: 0 0 20px rgba(226, 173, 50, .14);
}

.drop-zone input {
    max-width: 100%;
}

.readonly-field {
    padding: 12px 15px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f8faf8;
}

.readonly-field strong {
    display: block;
    color: var(--emerald-950);
}

.readonly-field span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

/* ==========================================================================
   Tabs
   ========================================================================== */
.report-tabs-shell {
    margin-top: 20px;
}

.tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 16px;
    border: 0;
}

.tab {
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--muted);
    background: rgba(255, 255, 255, .75);
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 750;
    transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.tab:hover {
    color: var(--emerald-800);
    border-color: var(--emerald-400);
    background: #ffffff;
}

.tab.active {
    color: #ffffff;
    border-color: var(--emerald-700);
    background: linear-gradient(135deg, var(--emerald-800) 0%, var(--emerald-600) 100%);
    box-shadow: 0 6px 16px rgba(21, 62, 48, .22);
}

.tab span {
    display: inline-grid;
    min-width: 20px;
    min-height: 20px;
    place-items: center;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 99px;
    color: var(--muted);
    background: #edf2ee;
    font-size: 9px;
    font-weight: 800;
}

.tab.active span {
    color: var(--gold-900);
    background: var(--gold-300);
}

.tab-context {
    margin-left: auto;
    color: var(--muted);
    font-size: 11.5px;
}

.tab-panel[hidden] {
    display: none;
}

.tab-panel {
    animation: panel-reveal .24s var(--ease-premium) both;
}

/* ==========================================================================
   Details, Timeline & Workflows
   ========================================================================== */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.detail-item dt {
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.detail-item dd {
    margin: 0;
    color: var(--ink);
    font-weight: 650;
    font-size: 14px;
}

.timeline {
    display: grid;
    gap: 16px;
}

.timeline-item {
    display: grid;
    grid-template-columns: 12px 1fr;
    gap: 14px;
}

.timeline-dot {
    position: relative;
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--gold-600);
    box-shadow: 0 0 10px var(--gold-500);
    animation: timeline-pulse 3.5s ease-in-out infinite;
}

.timeline-item p {
    margin: 0;
    font-size: 13.5px;
    font-weight: 550;
}

.timeline-item small {
    color: var(--muted);
    font-size: 11.5px;
}

.member-photo-field {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f9fbf9;
}

.member-photo-preview, .member-profile-photo {
    width: 80px;
    height: 80px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    overflow: hidden;
    border: 2px solid var(--gold-400);
    border-radius: 18px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--emerald-800), var(--gold-700));
    font-size: 28px;
    font-weight: 850;
    box-shadow: 0 8px 22px rgba(21, 62, 48, .18), 0 0 14px rgba(226, 173, 50, .2);
}

.member-photo-preview img, .member-profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-profile-body {
    display: flex;
    align-items: flex-start;
    gap: 22px;
}

.member-profile-body .detail-grid {
    flex: 1 1 auto;
}

.member-profile-photo {
    width: 96px;
    height: 112px;
    border-radius: 16px;
}

/* Loan Workflow */
.loan-limit-banner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 960px;
    margin: 0 auto 18px;
    overflow: hidden;
    border: 1px solid rgba(226, 173, 50, .32);
    border-radius: 16px;
    color: #ffffff;
    background: linear-gradient(130deg, var(--emerald-950) 0%, var(--emerald-800) 60%, var(--emerald-700) 100%);
    box-shadow: 0 14px 34px rgba(8, 28, 20, .18);
}

.loan-limit-banner > div {
    padding: 18px 20px;
    border-right: 1px solid rgba(255, 255, 255, .1);
}

.loan-limit-banner > div:last-child {
    border-right: 0;
}

.loan-limit-banner span, .loan-limit-banner strong {
    display: block;
}

.loan-limit-banner span {
    color: #bad0c7;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.loan-limit-banner strong {
    margin-top: 6px;
    color: var(--gold-200);
    font-size: 14.5px;
    font-weight: 800;
}

.loan-workflow-card {
    margin-bottom: 20px;
}

.loan-workflow-card .card-header > div span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
}

.workflow-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 24px 20px;
}

.workflow-step {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 9px;
    color: var(--muted);
    text-align: center;
    font-size: 11.5px;
    font-weight: 650;
}

.workflow-step::before {
    content: "";
    position: absolute;
    top: 16px;
    left: -50%;
    width: 100%;
    height: 2.5px;
    background: var(--line);
}

.workflow-step:first-child::before {
    display: none;
}

.workflow-step > span {
    position: relative;
    z-index: 1;
    width: 33px;
    height: 33px;
    display: grid;
    place-items: center;
    border: 2px solid var(--line);
    border-radius: 50%;
    color: var(--muted);
    background: #ffffff;
    font-weight: 800;
}

.workflow-step.complete {
    color: var(--emerald-800);
}

.workflow-step.complete::before {
    background: var(--emerald-500);
}

.workflow-step.complete > span {
    color: #ffffff;
    border-color: var(--emerald-700);
    background: var(--emerald-700);
    box-shadow: 0 0 0 4px var(--emerald-100), 0 0 12px rgba(32, 89, 70, .25);
}

.loan-summary-cards {
    margin-bottom: 20px;
}

.loan-action-card, .loan-payment-form {
    margin-top: 20px;
}

.workflow-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.workflow-actions form {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fafcfb;
}

.workflow-actions form .btn {
    margin-top: 14px;
}

.workflow-actions .table-actions .btn {
    margin-top: 14px;
}

.loan-document-list {
    margin-bottom: 18px;
}

.document-upload-form {
    padding-top: 18px;
    border-top: 1px solid var(--line-subtle);
}

/* Reference Data & Allocation */
.reference-page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.reference-page-heading h2 {
    margin: 0;
    color: var(--emerald-950);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.025em;
}

.reference-page-heading p {
    max-width: 760px;
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.reference-stats {
    margin-bottom: 20px;
}

.stat-value-compact {
    font-size: clamp(17px, 1.55vw, 22px);
    white-space: nowrap;
}

.reference-allocation-card {
    margin-bottom: 20px;
}

.reference-allocation-card .card-header > div h2 {
    margin: 0;
}

.reference-allocation-card .card-header > div span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
}

.allocation-total {
    color: var(--emerald-700);
    font-size: 20px;
    font-weight: 850;
    letter-spacing: -.025em;
}

.reference-allocation-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
}

.reference-allocation-grid > div {
    min-width: 0;
    padding: 18px 20px;
    background: #ffffff;
}

.reference-allocation-grid span, .reference-allocation-grid strong {
    display: block;
}

.reference-allocation-grid span {
    color: var(--muted);
    font-size: 11px;
}

.reference-allocation-grid strong {
    margin-top: 7px;
    color: var(--emerald-950);
    font-size: 17px;
    font-weight: 800;
}

.reference-grid {
    align-items: start;
    margin-top: 20px;
}

.reference-card {
    scroll-margin-top: 112px;
}

.reference-card .card-header > div {
    min-width: 0;
}

.reference-card .card-header > div span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
}

.reference-card th, .reference-card td {
    white-space: nowrap;
}

.reference-card td:nth-child(2) {
    white-space: normal;
    min-width: 150px;
}

.reference-form-card {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

.reference-form-card .card-header > div span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
}

.reference-warning {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 960px;
    margin: 0 auto 18px;
    padding: 14px 18px;
    border-radius: 12px;
    color: #7b5814;
    background: #fbf5e4;
    border: 1px solid #ead69d;
}

.reference-warning .ui-icon {
    width: 20px;
    height: 20px;
    margin-top: 1px;
    flex: 0 0 auto;
}

.reference-warning strong, .reference-warning span {
    display: block;
}

.reference-warning span {
    margin-top: 3px;
    color: #8a703d;
    font-size: 12px;
}

.allocation-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.allocation-title output {
    padding: 5px 12px;
    border-radius: 99px;
    color: #1a6344;
    background: #e3f5eb;
    font-size: 12px;
    font-weight: 800;
}

.allocation-title output.allocation-invalid {
    color: #8f2628;
    background: #fae4e3;
}

/* ==========================================================================
   Point of Sale (POS) & Cashier
   ========================================================================== */
.pos-management-grid {
    grid-template-columns: minmax(0, 1.65fr) minmax(330px, .75fr);
    align-items: start;
    margin-top: 20px;
}

.pos-side-column {
    display: grid;
    gap: 20px;
}

.pos-product-card {
    min-width: 0;
}

.category-create-form {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) auto;
    align-items: end;
    gap: 9px;
}

.category-list {
    border-top: 1px solid var(--line-subtle);
}

.category-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--line-subtle);
}

.category-row:last-child {
    border-bottom: 0;
}

.category-row > form:first-child {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
}

.category-row > span {
    min-width: 0;
    flex: 1;
}

.category-row > span strong, .category-row > span small {
    display: block;
}

.category-row > span small {
    margin-top: 3px;
    color: var(--muted);
}

.input-compact {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 11.5px;
}

.checkbox.compact {
    gap: 5px;
    font-size: 10.5px;
    white-space: nowrap;
}

.compact-list > a, .compact-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--line-subtle);
    color: var(--ink);
}

.compact-list > :last-child {
    border-bottom: 0;
}

.compact-list > a:hover {
    background: #fafbf8;
}

.compact-list span {
    min-width: 0;
}

.compact-list span strong, .compact-list span small {
    display: block;
}

.compact-list span small {
    margin-top: 3px;
    overflow: hidden;
    color: var(--muted);
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compact-list > a > strong, .compact-list > div > strong {
    flex: 0 0 auto;
    font-size: 11.5px;
}

.stock-adjust {
    position: relative;
}

.stock-adjust > summary {
    list-style: none;
    cursor: pointer;
}

.stock-adjust > summary::-webkit-details-marker {
    display: none;
}

.stock-adjust[open] > form {
    position: absolute;
    z-index: 20;
    right: 0;
    top: calc(100% + 6px);
    width: 250px;
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: var(--shadow-floating);
}

.pos-cashier-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(360px, .72fr);
    align-items: start;
    gap: 20px;
}

.pos-catalog {
    min-width: 0;
}

.pos-search-card {
    margin-bottom: 16px;
}

.pos-category-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

.pos-category-filters .tab {
    min-height: 34px;
    padding: 6px 12px;
}

.pos-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.pos-product-tile {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 108px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--ink);
    background:
        radial-gradient(280px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(226, 173, 50, .08), transparent 60%),
        #ffffff;
    cursor: pointer;
    text-align: left;
    box-shadow: var(--shadow-xs);
}

.pos-product-tile:hover {
    border-color: var(--emerald-400);
    box-shadow: var(--shadow-md), 0 0 16px rgba(40, 110, 87, .12);
}

.pos-product-tile[hidden] {
    display: none;
}

.pos-product-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 12px;
    color: var(--emerald-700);
    background: var(--emerald-50);
    border: 1px solid rgba(40, 110, 87, .12);
    font-size: 12px;
    font-weight: 850;
}

.pos-product-copy {
    min-width: 0;
}

.pos-product-copy strong, .pos-product-copy small, .pos-product-copy b {
    display: block;
}

.pos-product-copy strong {
    overflow: hidden;
    font-size: 12.5px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-product-copy small {
    margin-top: 4px;
    overflow: hidden;
    color: var(--muted);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-product-copy b {
    margin-top: 8px;
    color: var(--gold-700);
    font-size: 12.5px;
    font-weight: 800;
}

.pos-add-mark {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    color: #ffffff;
    background: var(--emerald-600);
    font-weight: 700;
    font-size: 12px;
}

.pos-cart {
    position: sticky;
    top: 100px;
    max-height: calc(100dvh - 120px);
    display: flex;
    flex-direction: column;
}

.pos-cart-lines {
    min-height: 130px;
    overflow-y: auto;
}

.pos-cart-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-subtle);
}

.pos-cart-row > span strong, .pos-cart-row > span small {
    display: block;
}

.pos-cart-row > span strong {
    overflow: hidden;
    font-size: 11.5px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-cart-row > span small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 9.5px;
}

.pos-quantity-control {
    display: grid;
    grid-template-columns: 28px 50px 28px;
}

.pos-quantity-control button, .pos-quantity-control input {
    height: 30px;
    border: 1px solid var(--line);
    background: #ffffff;
    text-align: center;
}

.pos-quantity-control button {
    color: var(--emerald-700);
    cursor: pointer;
    font-weight: 800;
}

.pos-quantity-control button:first-child {
    border-radius: 7px 0 0 7px;
}

.pos-quantity-control button:last-child {
    border-radius: 0 7px 7px 0;
}

.pos-quantity-control input {
    width: 50px;
    padding: 2px;
    border-left: 0;
    border-right: 0;
    font-size: 11px;
}

.pos-line-total {
    font-size: 11px;
    font-weight: 800;
    color: var(--emerald-950);
    white-space: nowrap;
}

.pos-remove-item {
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 7px;
    color: var(--red);
    background: #faecea;
    cursor: pointer;
    font-size: 14px;
    display: grid;
    place-items: center;
    transition: background .16s ease;
}

.pos-remove-item:hover {
    background: #f5d4d1;
}

.pos-cart-summary {
    display: grid;
    gap: 9px;
    padding: 15px 18px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #f9fbf9;
}

.pos-cart-summary > div, .pos-cart-summary > label, .pos-change {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.pos-cart-summary span, .pos-change span {
    color: var(--muted);
    font-size: 11.5px;
}

.pos-cart-summary .input {
    width: 140px;
}

.pos-grand-total {
    padding-top: 9px;
    border-top: 1px dashed var(--line);
}

.pos-grand-total strong {
    color: var(--emerald-800);
    font-size: 21px;
    font-weight: 850;
}

.pos-payment-fields {
    display: grid;
    gap: 11px;
    padding: 15px 18px;
    overflow-y: auto;
}

.pos-change {
    padding: 11px 14px;
    border-radius: 10px;
    background: var(--emerald-50);
    border: 1px solid rgba(40, 110, 87, .12);
}

.pos-change strong {
    color: var(--emerald-800);
    font-size: 15px;
    font-weight: 800;
}

.pos-checkout-button {
    width: 100%;
}

/* ==========================================================================
   Accounting & Financial Statements
   ========================================================================== */
.accounting-shortcuts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 20px 0;
}

.accounting-shortcuts > a {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 15px;
    color: var(--ink);
    background:
        radial-gradient(280px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(226, 173, 50, .07), transparent 60%),
        #ffffff;
    box-shadow: var(--shadow-xs);
    transition: transform .2s var(--ease-premium), border-color .2s ease, box-shadow .2s ease;
}

.accounting-shortcuts > a:hover {
    border-color: var(--emerald-400);
    box-shadow: var(--shadow-md), 0 0 16px rgba(40, 110, 87, .12);
}

.accounting-shortcuts .ui-icon {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    color: var(--emerald-700);
}

.accounting-shortcuts span, .accounting-shortcuts strong, .accounting-shortcuts small {
    display: block;
    min-width: 0;
}

.accounting-shortcuts strong {
    font-size: 12.5px;
    font-weight: 750;
}

.accounting-shortcuts small {
    margin-top: 4px;
    overflow: hidden;
    color: var(--muted);
    font-size: 9.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-portal-shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.member-portal-identity {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
    padding: 22px;
}

.member-portal-identity h2 {
    margin: 2px 0 0;
    color: var(--emerald-950);
    font-size: 21px;
    font-weight: 800;
}

.member-portal-identity p {
    margin: 5px 0 0;
    color: var(--muted);
}

.member-portal-identity > .badge {
    margin-left: auto;
}

.member-access-note {
    margin-top: 20px;
}

.accounting-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr);
    align-items: start;
}

.account-header-row {
    background: #f0f6f2;
}

.account-header-row td {
    color: var(--emerald-950);
    font-weight: 800;
}

.journal-form {
    max-width: 1200px;
    margin: 0 auto;
}

.journal-lines-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px 12px;
    border-top: 1px solid var(--line-subtle);
}

.journal-lines-head h2 {
    margin: 0;
    font-size: 14.5px;
    font-weight: 800;
}

.journal-lines-table select {
    min-width: 220px;
}

.journal-lines-table input {
    min-width: 130px;
}

.journal-lines-table td:nth-child(2) input {
    min-width: 200px;
}

.journal-lines-table tfoot th {
    border-top: 2px solid var(--line);
    background: #f6faf7;
}

.total-row td {
    border-top: 2px solid var(--line);
    background: #f2f7f4;
    font-weight: 800;
}

.financial-statements-grid {
    align-items: start;
}

.statement-section {
    padding: 16px 22px;
    border-bottom: 1px solid var(--line-subtle);
}

.statement-section h3 {
    margin: 0 0 11px;
    color: var(--emerald-800);
    font-size: 11.5px;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.statement-section > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 0;
    font-size: 11.5px;
}

.statement-section > div > span {
    min-width: 0;
    color: var(--ink-secondary);
}

.statement-section > div > strong {
    flex: 0 0 auto;
    font-weight: 750;
}

.statement-section .statement-total {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    color: var(--emerald-950);
    font-weight: 850;
}

.statement-grand-total {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    color: #ffffff;
    background: linear-gradient(120deg, var(--emerald-900), var(--emerald-700));
    font-size: 14.5px;
    font-weight: 750;
}

.statement-grand-total strong {
    font-size: 18px;
    color: var(--gold-200);
}

/* ==========================================================================
   Login Page: Gemini AI Living Flash Suite & 360° Border-Beam Engine
   ========================================================================== */
.login-body {
    overflow-x: hidden;
    background: #051811;
    color: #12241d;
}

.login-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(520px, 1.18fr) minmax(440px, .82fr);
    background: #ffffff;
}

.login-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 100vh;
    color: #ffffff;
    background:
        radial-gradient(circle at 18% 10%, rgba(236, 199, 95, .28), transparent 25rem),
        radial-gradient(circle at 85% 85%, rgba(56, 189, 248, .22), transparent 30rem),
        radial-gradient(circle at 50% 50%, rgba(40, 110, 87, .35), transparent 35rem),
        linear-gradient(145deg, #03100b 0%, #082017 45%, #0f3529 100%);
}

/* Gemini Living Multi-Chromatic Aurora Nebula */
.gemini-aurora-nebula {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

.gemini-aurora-nebula span {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .75;
    will-change: transform, opacity;
}

.nebula-emerald {
    width: 550px;
    height: 550px;
    left: -100px;
    top: 10%;
    background: radial-gradient(circle, rgba(40, 110, 87, .42), rgba(20, 124, 114, 0) 70%);
    animation: gemini-nebula-float-1 18s ease-in-out infinite alternate;
}

.nebula-gold {
    width: 480px;
    height: 480px;
    right: -80px;
    top: -50px;
    background: radial-gradient(circle, rgba(236, 199, 95, .38), rgba(209, 151, 29, 0) 70%);
    animation: gemini-nebula-float-2 15s 2s ease-in-out infinite alternate;
}

.nebula-cyan {
    width: 520px;
    height: 520px;
    left: 30%;
    bottom: -120px;
    background: radial-gradient(circle, rgba(56, 189, 248, .28), rgba(40, 110, 87, 0) 70%);
    animation: gemini-nebula-float-3 22s 4s ease-in-out infinite alternate;
}

@keyframes gemini-nebula-float-1 {
    0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); opacity: .65; }
    50% { transform: translate3d(80px, 60px, 0) scale(1.22) rotate(45deg); opacity: .9; }
    100% { transform: translate3d(-50px, 100px, 0) scale(.95) rotate(90deg); opacity: .7; }
}

@keyframes gemini-nebula-float-2 {
    0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); opacity: .7; }
    50% { transform: translate3d(-90px, 80px, 0) scale(1.28) rotate(-60deg); opacity: .95; }
    100% { transform: translate3d(60px, -40px, 0) scale(1.05) rotate(-120deg); opacity: .6; }
}

@keyframes gemini-nebula-float-3 {
    0% { transform: translate3d(0, 0, 0) scale(1); opacity: .55; }
    50% { transform: translate3d(100px, -80px, 0) scale(1.3); opacity: .85; }
    100% { transform: translate3d(-70px, -60px, 0) scale(.9); opacity: .6; }
}

/* Gemini Twinkling Star Clusters */
.gemini-stars-field {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.gemini-star {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 12px #ffffff, 0 0 24px var(--gold-400), 0 0 36px #38bdf8;
    animation: gemini-star-sparkle 4s ease-in-out infinite;
}

.gemini-star::before, .gemini-star::after {
    content: "";
    position: absolute;
    inset: -3px 2px;
    background: linear-gradient(180deg, transparent, #ffffff, transparent);
    border-radius: 99px;
}

.gemini-star::after {
    transform: rotate(90deg);
}

.gemini-star.s1 { top: 18%; left: 22%; animation-delay: 0s; transform: scale(.9); }
.gemini-star.s2 { top: 32%; left: 78%; animation-delay: 1.4s; transform: scale(1.3); }
.gemini-star.s3 { top: 68%; left: 16%; animation-delay: 2.2s; transform: scale(1.1); }
.gemini-star.s4 { top: 82%; left: 65%; animation-delay: .7s; transform: scale(.85); }
.gemini-star.s5 { top: 12%; left: 60%; animation-delay: 2.9s; transform: scale(1.4); }
.gemini-star.s6 { top: 54%; left: 88%; animation-delay: 1.9s; transform: scale(1); }

@keyframes gemini-star-sparkle {
    0%, 100% { opacity: .25; transform: scale(.7) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.35) rotate(180deg); }
}

.login-grid-pattern {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .12;
    background-image:
        linear-gradient(rgba(236, 199, 95, .22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(236, 199, 95, .22) 1px, transparent 1px);
    background-size: 50px 50px;
    -webkit-mask-image: linear-gradient(to bottom right, #000, transparent 80%);
    mask-image: linear-gradient(to bottom right, #000, transparent 80%);
    animation: login-grid-drift 24s linear infinite;
}

.login-hero-content {
    position: relative;
    z-index: 3;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: clamp(36px, 5vw, 72px);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 16px;
    width: fit-content;
    animation: login-reveal .7s .05s both;
}

.login-brand-mark {
    position: relative;
    isolation: isolate;
    width: 84px;
    height: 84px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    transition: transform .35s var(--ease-premium);
}

.login-brand-mark::before {
    content: "";
    position: absolute;
    inset: -8px;
    z-index: -1;
    border: 2px solid rgba(236, 199, 95, .6);
    border-top-color: transparent;
    border-right-color: rgba(56, 189, 248, .8);
    border-radius: 50%;
    animation: spin-360-cw 7s linear infinite;
    will-change: transform;
}

.login-brand-mark::after {
    content: "";
    position: absolute;
    inset: -15px;
    z-index: -2;
    border: 1.5px dashed rgba(236, 199, 95, .35);
    border-radius: 50%;
    animation: spin-360-ccw 12s linear infinite;
    will-change: transform;
}

.login-brand-mark img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 14px 22px rgba(3, 16, 12, .6));
}

.login-brand:hover .login-brand-mark {
    transform: scale(1.08) rotate(-4deg);
}

.login-brand-overline {
    display: block;
    margin-bottom: 3px;
    color: var(--gold-400);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .28em;
    text-transform: uppercase;
    text-shadow: 0 0 14px rgba(236, 199, 95, .5);
}

.login-brand strong {
    display: block;
    max-width: 360px;
    color: #ffffff;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.login-brand small {
    display: block;
    margin-top: 4px;
    color: #cce0d7;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.login-copy {
    margin: auto 0;
    padding: 50px 0 35px;
}

.login-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: var(--gold-300);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-shadow: 0 0 14px rgba(236, 199, 95, .55);
    animation: login-reveal .7s .18s both;
}

.login-eyebrow i {
    width: 28px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, #38bdf8, var(--gold-400));
    box-shadow: 0 0 14px rgba(236, 199, 95, .8);
}

.login-copy h1 {
    max-width: 700px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(44px, 5.2vw, 76px);
    font-weight: 850;
    line-height: 1.02;
    letter-spacing: -.05em;
    animation: login-reveal .8s .28s both;
}

.login-copy h1 em {
    display: block;
    font-style: normal;
    background: linear-gradient(90deg, var(--gold-300) 0%, #ffffff 30%, var(--gold-400) 60%, #38bdf8 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gemini-text-shimmer 5s linear infinite;
    filter: drop-shadow(0 0 20px rgba(236, 199, 95, .4));
}

@keyframes gemini-text-shimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.login-copy p {
    max-width: 610px;
    margin: 22px 0 0;
    color: #cce0d7;
    font-size: clamp(15px, 1.25vw, 17.5px);
    line-height: 1.75;
    animation: login-reveal .8s .38s both;
}

.login-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    animation: login-reveal .8s .48s both;
}

.login-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 15px 16px;
    border: 1px solid rgba(236, 199, 95, .24);
    border-radius: 14px;
    background: rgba(255, 255, 255, .07);
    backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 8px 24px rgba(0, 0, 0, .14);
    transition: transform .25s var(--ease-premium), background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.login-feature:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, .14);
    border-color: rgba(236, 199, 95, .6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 12px 32px rgba(0, 0, 0, .25), 0 0 20px rgba(226, 173, 50, .25);
}

.login-feature-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 11px;
    color: var(--gold-300);
    background: linear-gradient(135deg, rgba(226, 173, 50, .28), rgba(56, 189, 248, .18));
    border: 1px solid rgba(236, 199, 95, .35);
    font-size: 12px;
    font-weight: 850;
    transition: transform .32s var(--ease-premium), box-shadow .25s ease;
}

.login-feature:hover .login-feature-icon {
    transform: rotate(-6deg) scale(1.12);
    box-shadow: 0 0 16px rgba(236, 199, 95, .45);
}

.login-feature strong, .login-feature small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.login-feature strong {
    color: #f7fcfa;
    font-size: 13px;
    font-weight: 750;
}

.login-feature small {
    margin-top: 3px;
    color: #9cb8ad;
    font-size: 10.5px;
}

.login-hero-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding-top: 26px;
    color: #9cb8ad;
    font-size: 11.5px;
    animation: login-reveal .8s .55s both;
}

.status-dot {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 10px #4ade80;
}

.status-dot::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1.5px solid #4ade80;
    animation: radar-ping 2.4s cubic-bezier(0, 0, .2, 1) infinite;
}

.login-orb {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
}

.login-orb-one {
    width: 320px;
    height: 320px;
    right: -80px;
    top: -70px;
    background: radial-gradient(circle at 35% 30%, rgba(236, 199, 95, .25), transparent 70%);
    border: 1px solid rgba(236, 199, 95, .15);
    animation: login-float 10s ease-in-out infinite;
}

.login-orb-two {
    width: 240px;
    height: 240px;
    left: 40%;
    bottom: 10%;
    background: radial-gradient(circle, rgba(53, 135, 109, .22), transparent 70%);
    border: 1px solid rgba(53, 135, 109, .18);
    animation: login-float 12s 2s ease-in-out infinite reverse;
}

.login-ring {
    position: absolute;
    right: -160px;
    bottom: -150px;
    z-index: 1;
    width: 460px;
    height: 460px;
    border: 1.5px solid rgba(236, 199, 95, .22);
    border-radius: 50%;
    animation: spin-360-cw 28s linear infinite;
    will-change: transform;
}

.login-ring::before, .login-ring::after, .login-ring span {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.login-ring::before {
    inset: 45px;
    border: 1px dashed rgba(236, 199, 95, .18);
    animation: spin-360-ccw 20s linear infinite;
}

.login-ring::after {
    inset: 95px;
    border: 1px solid rgba(236, 199, 95, .14);
    animation: spin-360-cw 15s linear infinite;
}

.login-ring span {
    inset: 145px;
    border: 1px dashed rgba(56, 189, 248, .12);
}

.login-crest-field {
    position: absolute;
    z-index: 1;
    width: min(42vw, 560px);
    height: min(42vw, 560px);
    right: -12%;
    top: 18%;
    display: grid;
    place-items: center;
    opacity: .08;
    pointer-events: none;
    animation: spin-360-cw 40s linear infinite;
    will-change: transform;
}

.login-crest-field::before,
.login-crest-field span {
    content: "";
    position: absolute;
    border: 1.5px solid rgba(236, 199, 95, .55);
    border-radius: 50%;
}

.login-crest-field::before { inset: -18px; }
.login-crest-field span { inset: -58px; border-style: dashed; animation: spin-360-ccw 25s linear infinite; }
.login-crest-field img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: contain;
}

/* ==========================================================================
   Login Panel & 360° Border-Beam Card Engine
   ========================================================================== */
.login-panel {
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: clamp(32px, 5vw, 76px);
    background:
        radial-gradient(circle at 100% 0%, rgba(226, 173, 50, .1), transparent 24rem),
        radial-gradient(circle at 0% 100%, rgba(40, 110, 87, .06), transparent 28rem),
        linear-gradient(145deg, #fbfdfc, #eff5f1);
}

.login-panel::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -85px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 1.5px solid rgba(40, 110, 87, .16);
    box-shadow:
        0 0 0 50px rgba(40, 110, 87, .025),
        0 0 0 100px rgba(226, 173, 50, .025);
    animation: spin-360-cw 35s linear infinite;
}

.login-panel-glow {
    position: absolute;
    left: -100px;
    bottom: -100px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(226, 173, 50, .14), transparent 70%);
    filter: blur(70px);
    animation: login-breathe 7s ease-in-out infinite;
}

.login-panel-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 450px;
    min-width: 0;
}

.login-mobile-brand {
    display: none;
}

/* Gemini 360° Border-Beam Login Box */
.login-box {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-width: 0;
    padding: 40px;
    border: 1px solid rgba(205, 220, 212, .9);
    border-radius: 26px;
    background:
        radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(226, 173, 50, .1), transparent 70%),
        rgba(255, 255, 255, .95);
    box-shadow: var(--shadow-floating), 0 0 35px rgba(8, 28, 20, .06);
    backdrop-filter: blur(24px);
    animation: login-card-enter .85s .16s var(--ease-premium) both;
}

/* Continuous 360° Revolving Neon Border-Beam Tracer */
.login-box-border-beam {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    pointer-events: none;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
}

.login-box-border-beam::before {
    content: "";
    position: absolute;
    inset: -150%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 280deg,
        rgba(56, 189, 248, .9) 320deg,
        rgba(74, 222, 128, 1) 345deg,
        rgba(236, 199, 95, 1) 360deg
    );
    animation: border-beam-360 6.5s linear infinite;
    will-change: transform;
}

.login-panel-brandline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    color: var(--gold-700);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.login-panel-brandline span {
    width: 26px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, #38bdf8, var(--gold-500));
    box-shadow: 0 0 10px rgba(226, 173, 50, .6);
}

.login-heading {
    margin-bottom: 30px;
}

.login-kicker {
    display: block;
    margin-bottom: 8px;
    color: var(--gold-700);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.login-box h2 {
    margin: 0;
    color: var(--emerald-950);
    font-size: clamp(26px, 2.4vw, 32px);
    font-weight: 850;
    line-height: 1.15;
    letter-spacing: -.035em;
}

.login-heading p {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.login-error {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
}

.login-error > span {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #ffffff;
    background: var(--red);
    font-weight: 850;
}

.login-error strong, .login-error small {
    display: block;
}

.login-error small {
    margin-top: 2px;
    line-height: 1.4;
}

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

.login-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.login-label-row span {
    color: var(--muted-light);
    font-size: 11.5px;
}

.input-shell {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 52px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    background: #fbfdfc;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s var(--ease-premium), background .2s ease;
}

.input-shell:focus-within {
    transform: translateY(-1px);
    border-color: var(--emerald-600);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(40, 110, 87, .16), 0 0 20px rgba(226, 173, 50, .22), var(--shadow-sm);
}

.input-shell > svg {
    width: 20px;
    height: 20px;
    margin-left: 16px;
    flex: 0 0 auto;
    fill: none;
    stroke: #779186;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .2s ease;
}

.input-shell:focus-within > svg {
    stroke: var(--emerald-700);
}

.input-shell input {
    flex: 1 1 auto;
    width: 0;
    min-width: 0;
    height: 50px;
    padding: 0 14px;
    border: 0;
    outline: 0;
    color: var(--ink);
    background: transparent;
    font-size: 14px;
}

.input-shell input::placeholder {
    color: #98ada2;
}

.password-toggle {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    margin-right: 4px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    color: #779186;
    background: transparent;
    cursor: pointer;
    transition: color .2s ease, background .2s ease;
}

.password-toggle:hover {
    color: var(--emerald-700);
    background: var(--emerald-50);
}

.password-toggle svg {
    grid-area: 1/1;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: opacity .18s ease, transform .18s ease;
}

.password-toggle .eye-closed, .password-toggle[aria-pressed="true"] .eye-open {
    opacity: 0;
    transform: scale(.7);
}

.password-toggle[aria-pressed="true"] .eye-closed {
    opacity: 1;
    transform: scale(1);
}

.login-checkbox {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    margin: 4px 0 22px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 550;
    cursor: pointer;
}

.login-checkbox input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkbox-control {
    width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--line-dark);
    border-radius: 6px;
    background: #ffffff;
    transition: all .2s ease;
}

.login-checkbox input:checked + .checkbox-control {
    border-color: var(--emerald-700);
    background: var(--emerald-700);
    box-shadow: 0 0 0 3px rgba(40, 110, 87, .14);
}

.login-checkbox input:checked + .checkbox-control::after {
    content: "";
    width: 8px;
    height: 4px;
    margin-top: -2px;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(-45deg);
}

/* Gemini AI Laser Beam Submit Button */
.login-submit {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 54px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 13px;
    color: #ffffff;
    background: linear-gradient(115deg, #051811 0%, #153e30 45%, #b37e12 90%, #38bdf8 100%);
    background-size: 200% auto;
    box-shadow: 0 16px 36px rgba(21, 62, 48, .32), inset 0 1px 0 rgba(255, 255, 255, .3);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .02em;
    cursor: pointer;
    transition: transform .2s var(--ease-premium), box-shadow .2s ease, background-position .6s ease;
}

.login-submit::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 15%, rgba(255, 255, 255, .35) 48%, transparent 75%);
    transform: translateX(-110%);
    animation: brand-hero-sheen 6s 1.5s ease-in-out infinite;
    pointer-events: none;
}

.login-submit:hover {
    transform: translateY(-2.5px);
    background-position: 100% 50%;
    box-shadow: 0 20px 44px rgba(21, 62, 48, .4), 0 0 24px rgba(226, 173, 50, .35), inset 0 1px 0 rgba(255, 255, 255, .4);
}

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

.login-submit svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .25s var(--ease-premium);
}

.login-submit:hover svg {
    transform: translateX(5px);
}

.login-security {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
    padding: 14px 16px;
    border-radius: 14px;
    color: var(--muted);
    background: #f4f8f5;
    border: 1px solid var(--line-subtle);
}

.login-security svg {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    fill: none;
    stroke: var(--emerald-700);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.login-security p {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.45;
}

.login-security strong {
    color: var(--emerald-950);
}

.login-copyright {
    margin: 20px 0 0;
    color: var(--muted);
    font-size: 11.5px;
    text-align: center;
    animation: login-reveal .7s .75s both;
}

/* ==========================================================================
   Print Documents (Passbook & Receipt)
   ========================================================================== */
.print-document-body {
    min-height: 100vh;
    padding: 32px;
    background: #edf1ee;
}

.print-document {
    width: min(100%, 980px);
    margin: 0 auto;
    padding: 44px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(8, 28, 20, .12);
}

.print-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 28px;
}

.print-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 24px;
    border-bottom: 3px double var(--emerald-800);
}

.print-header img {
    width: 78px;
    height: 78px;
    object-fit: contain;
}

.print-header span {
    color: var(--gold-700);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.print-header h1 {
    margin: 4px 0;
    color: var(--emerald-950);
    font-size: 24px;
    font-weight: 850;
}

.print-header p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.print-member-grid, .print-balance-grid {
    display: grid;
    gap: 1px;
    margin: 22px 0;
    background: var(--line);
    border: 1px solid var(--line);
}

.print-member-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.print-balance-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.print-member-grid > div, .print-balance-grid > div {
    padding: 13px 16px;
    background: #ffffff;
}

.print-member-grid span, .print-member-grid strong,
.print-balance-grid span, .print-balance-grid strong {
    display: block;
}

.print-member-grid span, .print-balance-grid span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 750;
    text-transform: uppercase;
}

.print-member-grid strong, .print-balance-grid strong {
    margin-top: 5px;
    color: var(--emerald-950);
    font-size: 13.5px;
}

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

.print-table th, .print-table td {
    padding: 10px 12px;
    border: 1px solid #ccd8d2;
    font-size: 11px;
}

.print-table th {
    color: var(--emerald-950);
    background: #edf4f0;
    font-weight: 800;
}

.print-signature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    margin-top: 44px;
    text-align: center;
}

.print-signature span, .print-signature strong {
    display: block;
}

.print-signature span {
    min-height: 72px;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.5;
}

.print-signature strong {
    color: var(--emerald-950);
    font-size: 13px;
}

/* POS Receipt */
.receipt-body {
    min-height: 100vh;
    padding: 28px;
    background: #edf1ee;
}

.receipt {
    width: min(100%, 420px);
    margin: 0 auto;
    padding: 30px;
    color: var(--ink);
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(8, 28, 20, .14);
}

.receipt-header {
    padding-bottom: 18px;
    border-bottom: 2px dashed #bfcac4;
    text-align: center;
}

.receipt-header img {
    width: 66px;
    height: 66px;
    object-fit: contain;
}

.receipt-header h1 {
    margin: 8px 0 3px;
    font-size: 18px;
    font-weight: 850;
    color: var(--emerald-950);
}

.receipt-header p {
    margin: 0;
    color: var(--muted);
    font-size: 10.5px;
}

.receipt-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 16px 0;
    border-bottom: 1px dashed #ccd6d1;
}

.receipt-meta span, .receipt-meta strong {
    display: block;
}

.receipt-meta span {
    color: var(--muted);
    font-size: 8.5px;
    font-weight: 750;
    text-transform: uppercase;
}

.receipt-meta strong {
    margin-top: 3px;
    font-size: 11px;
}

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

.receipt-table th, .receipt-table td {
    padding: 10px 4px;
    border-bottom: 1px dashed #d6dfdb;
    font-size: 10px;
    text-align: right;
}

.receipt-table th:first-child, .receipt-table td:first-child {
    text-align: left;
}

.receipt-table td small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
}

.receipt-totals {
    display: grid;
    gap: 8px;
    padding: 16px 0;
    border-bottom: 2px dashed #bfcac4;
}

.receipt-totals > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 11px;
}

.receipt-totals .grand {
    padding: 9px 0;
    border-top: 1px solid #ccd8d2;
    border-bottom: 1px solid #ccd8d2;
    font-size: 15px;
    font-weight: 850;
    color: var(--emerald-950);
}

.receipt-footer {
    display: grid;
    gap: 5px;
    padding-top: 20px;
    text-align: center;
}

.receipt-footer strong {
    font-size: 11.5px;
    color: var(--emerald-950);
}

.receipt-footer span {
    color: var(--muted);
    font-size: 9px;
}

/* ==========================================================================
   Animations & Motion Classes
   ========================================================================== */
.motion-ready .ui-reveal {
    opacity: 0;
    transform: translateY(20px) scale(.99);
    transition: opacity .65s var(--ease-premium) var(--reveal-delay, 0ms), transform .65s var(--ease-premium) var(--reveal-delay, 0ms);
}

.motion-ready .ui-reveal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.motion-ready [data-animated-chart].ui-reveal .chart-bar {
    transform: scaleY(0);
    transform-origin: center bottom;
    transition: transform .85s var(--ease-premium);
}

.motion-ready [data-animated-chart].ui-reveal.is-visible .chart-bar {
    transform: scaleY(1);
}

.motion-ready [data-animated-chart].ui-reveal.is-visible .chart-group:nth-child(2) .chart-bar { transition-delay: .07s; }
.motion-ready [data-animated-chart].ui-reveal.is-visible .chart-group:nth-child(3) .chart-bar { transition-delay: .14s; }
.motion-ready [data-animated-chart].ui-reveal.is-visible .chart-group:nth-child(4) .chart-bar { transition-delay: .21s; }
.motion-ready [data-animated-chart].ui-reveal.is-visible .chart-group:nth-child(5) .chart-bar { transition-delay: .28s; }
.motion-ready [data-animated-chart].ui-reveal.is-visible .chart-group:nth-child(6) .chart-bar { transition-delay: .35s; }

@keyframes brand-breathe {
    0%, 100% { opacity: .55; transform: scale(.92); }
    50% { opacity: 1; transform: scale(1.2); }
}

@keyframes brand-nav-sheen {
    0%, 72%, 100% { transform: translateX(-120%); }
    84% { transform: translateX(120%); }
}

@keyframes brand-hero-sheen {
    0%, 70%, 100% { transform: translateX(-110%); }
    84% { transform: translateX(110%); }
}

@keyframes brand-crest-float {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-6px) rotate(2deg); }
}

@keyframes timeline-pulse {
    0%, 100% { box-shadow: 0 0 0 4px var(--gold-100), 0 0 10px var(--gold-500); }
    50% { box-shadow: 0 0 0 8px rgba(226, 173, 50, .1), 0 0 18px var(--gold-400); }
}

@keyframes ui-ripple {
    to { opacity: 0; transform: scale(1); }
}

@keyframes alert-enter {
    from { opacity: 0; transform: translateY(-10px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes panel-reveal {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@keyframes login-reveal {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes login-card-enter {
    from { opacity: 0; transform: translateY(30px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes login-grid-drift {
    to { background-position: 54px 54px; }
}

@keyframes login-float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(-14px, 18px, 0); }
}

@keyframes login-breathe {
    0%, 100% { opacity: .55; transform: scale(.9); }
    50% { opacity: 1; transform: scale(1.14); }
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */
@media (max-width: 1200px) {
    .app-shell { grid-template-columns: 260px minmax(0, 1fr); }
    .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .module-wide { grid-column: span 2; }
    .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .topbar, .main { padding-left: 26px; padding-right: 26px; }
    .reference-allocation-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pos-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .accounting-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-welcome-side { gap: 16px; }
    .dashboard-crest { width: 86px; height: 86px; }
    .dashboard-crest img { width: 74px; height: 74px; }
}

@media (max-width: 1050px) {
    .login-page { grid-template-columns: minmax(430px, 1fr) minmax(390px, .9fr); }
    .login-hero-content { padding: 38px; }
    .login-copy h1 { font-size: clamp(40px, 4.8vw, 58px); }
    .login-feature-grid { grid-template-columns: 1fr; max-width: 340px; }
    .login-feature:nth-child(3) { display: none; }
}

@media (max-width: 900px) {
    .app-shell { display: block; }
    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(300px, calc(100vw - 44px));
        height: 100dvh;
        padding: 20px 16px 18px;
        transform: translateX(-104%);
        transition: transform .26s cubic-bezier(.2, .8, .2, 1);
        box-shadow: 18px 0 50px rgba(4, 18, 13, .32);
    }
    .sidebar-open .sidebar { transform: translateX(0); }
    .sidebar nav { display: block; overflow: visible; }
    .nav-label, .sidebar-footer { display: block; }
    .brand { margin-bottom: 0; }
    .sidebar-close {
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, .15);
        border-radius: 10px;
        color: #ffffff;
        background: rgba(255, 255, 255, .08);
        cursor: pointer;
    }
    .sidebar-close .ui-icon { width: 19px; height: 19px; }
    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 35;
        display: block;
        border: 0;
        background: rgba(4, 18, 13, .58);
        opacity: 0;
        pointer-events: none;
        backdrop-filter: blur(4px);
        transition: opacity .24s ease;
    }
    .sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
    body.sidebar-visible { overflow: hidden; }
    .mobile-menu-button {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 11px;
        color: var(--emerald-800);
        background: #ffffff;
        cursor: pointer;
        box-shadow: var(--shadow-xs);
    }
    .mobile-menu-button .ui-icon { width: 20px; height: 20px; }
    .topbar { min-height: 82px; padding: 14px 20px; }
    .topbar-leading { min-width: 0; }
    .topbar-end { flex: 0 0 auto; }
    .today-chip { display: none; }
    .main { padding: 22px 20px 46px; }
    .dashboard-welcome { align-items: flex-start; }
    .dashboard-welcome-side { display: none; }
    .loan-limit-banner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pos-management-grid, .pos-cashier-layout { grid-template-columns: 1fr; }
    .pos-cart { position: static; max-height: none; }
    .accounting-grid { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
    .form-grid, .detail-grid { grid-template-columns: 1fr; }
    .field-full, .section-title { grid-column: 1; }
    .login-page { grid-template-columns: 1fr; }
    .login-hero { min-height: 390px; }
    .login-hero-content { min-height: 390px; padding: 28px 24px; }
    .login-copy { padding: 50px 0 24px; }
    .login-copy h1 { max-width: 520px; font-size: clamp(38px, 9.5vw, 52px); }
    .login-copy p { max-width: 560px; margin-top: 18px; font-size: 14px; }
    .login-feature-grid, .login-hero-footer { display: none; }
    .login-panel { min-height: auto; padding: 42px 20px; }
    .login-panel-inner { width: 100%; max-width: min(480px, calc(100vw - 40px)); }
    .login-box { padding: 32px; }
}

@media (max-width: 680px) {
    .topbar { align-items: flex-start; gap: 12px; }
    .topbar-end { align-self: center; }
    .page-kicker { display: none; }
    .topbar h1 { font-size: 19px; }
    .topbar p { max-width: 50vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .page-actions { margin-top: 0; }
    .page-actions .btn { min-height: 38px; padding: 8px 12px; font-size: 11.5px; }
    .dashboard-welcome { min-height: 0; padding: 24px 20px; }
    .dashboard-welcome h2 { font-size: 22px; }
    .dashboard-trust-list { gap: 8px 14px; margin-top: 16px; }
    .dashboard-trust-list span { font-size: 8.5px; }
    .module-grid, .cards { grid-template-columns: 1fr; }
    .module-wide { grid-column: span 1; }
    .module-wide .module-list { columns: 1; }
    .module-card { min-height: 0; }
    .grid-2 { grid-template-columns: 1fr; }
    .tab-context { width: 100%; margin: 2px 2px 0; }
    .tabs { align-items: stretch; }
    .tab { flex: 1 1 140px; }
    .reference-page-heading { align-items: flex-start; }
    .reference-allocation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-actions { position: sticky; bottom: 0; z-index: 5; }
    .member-profile-body { display: grid; }
    .loan-limit-banner { grid-template-columns: 1fr; }
    .loan-limit-banner > div { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
    .loan-limit-banner > div:last-child { border-bottom: 0; }
    .workflow-steps { padding: 18px 10px; }
    .workflow-step strong { font-size: 9.5px; }
    .print-document-body { padding: 0; }
    .print-document { padding: 24px; box-shadow: none; }
    .print-member-grid, .print-balance-grid { grid-template-columns: 1fr 1fr; }
    .category-create-form, .category-row > form:first-child { grid-template-columns: 1fr; }
    .category-row { align-items: flex-end; }
    .pos-product-grid { grid-template-columns: 1fr; }
    .pos-cart-row { grid-template-columns: minmax(0, 1fr) auto auto; }
    .pos-line-total { grid-column: 1 / 3; }
    .accounting-shortcuts { grid-template-columns: 1fr; }
    .member-portal-shortcuts { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .login-hero { min-height: 320px; }
    .login-hero-content { min-height: 320px; padding: 22px 18px; }
    .login-brand-mark { width: 46px; height: 46px; }
    .login-brand strong { font-size: 14.5px; }
    .login-brand small { font-size: 9px; }
    .login-copy { padding: 40px 0 8px; }
    .login-page, .login-hero, .login-panel, .login-panel-inner, .login-box { max-width: 100%; }
    .login-page { width: 100%; overflow-x: hidden; }
    .login-copy h1 { font-size: clamp(30px, 8.8vw, 36px); }
    .login-copy p { display: none; }
    .login-panel { padding: 26px 14px; }
    .login-panel-inner { max-width: calc(100vw - 28px); }
    .login-box { padding: 26px 18px; border-radius: 20px; }
    .login-box h2 { font-size: 26px; }
    .login-label-row span { display: none; }
}

@media (max-width: 430px) {
    .topbar { min-height: 74px; padding: 12px 14px; }
    .topbar p { display: none; }
    .main { padding: 18px 14px 38px; }
    .mobile-menu-button { width: 40px; height: 40px; }
    .page-actions .btn { max-width: 130px; white-space: normal; text-align: center; }
    .card-header, .card-body { padding-left: 16px; padding-right: 16px; }
    .dashboard-welcome { border-radius: 14px; }
    .dashboard-trust-list span:last-child { display: none; }
    .brand-copy strong { font-size: 15px; }
    .brand-copy small { font-size: 7.5px; }
    .reference-page-heading { display: grid; }
    .reference-allocation-grid { grid-template-columns: 1fr; }
    .form-actions .btn { flex: 1 1 0; }
}

/* ==========================================================================
   GEMINI AI DASHBOARD — Full Animation Suite
   ========================================================================== */

/* ── Nebula Orb Field ───────────────────────────────────────── */
.dash-gemini-nebula {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.dash-nebula-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    will-change: transform, opacity;
}

.dash-orb-1 {
    width: 600px; height: 600px;
    top: -180px; left: 30%;
    background: radial-gradient(circle, rgba(40, 110, 87, .14), rgba(20, 124, 114, 0) 70%);
    animation: dash-orb-drift-1 22s ease-in-out infinite alternate;
}
.dash-orb-2 {
    width: 480px; height: 480px;
    top: 40%; right: -120px;
    background: radial-gradient(circle, rgba(226, 173, 50, .12), rgba(226, 173, 50, 0) 70%);
    animation: dash-orb-drift-2 18s 3s ease-in-out infinite alternate;
}
.dash-orb-3 {
    width: 360px; height: 360px;
    bottom: 5%; left: 10%;
    background: radial-gradient(circle, rgba(73, 162, 133, .1), transparent 70%);
    animation: dash-orb-drift-3 25s 6s ease-in-out infinite alternate;
}
.dash-orb-4 {
    width: 280px; height: 280px;
    top: 60%; left: 55%;
    background: radial-gradient(circle, rgba(236, 199, 95, .09), transparent 70%);
    animation: dash-orb-drift-4 14s 1s ease-in-out infinite alternate;
}

@keyframes dash-orb-drift-1 {
    0%   { transform: translate3d(0, 0, 0) scale(1);    opacity: .7; }
    33%  { transform: translate3d(-70px, 50px, 0) scale(1.15); opacity: .9; }
    66%  { transform: translate3d(50px, -30px, 0) scale(.9);  opacity: .75; }
    100% { transform: translate3d(30px, 80px, 0) scale(1.08); opacity: .65; }
}
@keyframes dash-orb-drift-2 {
    0%   { transform: translate3d(0, 0, 0) scale(1);    opacity: .65; }
    50%  { transform: translate3d(-90px, -60px, 0) scale(1.2); opacity: .85; }
    100% { transform: translate3d(40px, 40px, 0) scale(.85); opacity: .7; }
}
@keyframes dash-orb-drift-3 {
    0%   { transform: translate3d(0, 0, 0) scale(.95); opacity: .6; }
    50%  { transform: translate3d(100px, -40px, 0) scale(1.18); opacity: .8; }
    100% { transform: translate3d(-60px, 20px, 0) scale(1); opacity: .65; }
}
@keyframes dash-orb-drift-4 {
    0%   { transform: translate3d(0, 0, 0) scale(1); opacity: .55; }
    50%  { transform: translate3d(-50px, 60px, 0) scale(1.3);  opacity: .75; }
    100% { transform: translate3d(60px, -50px, 0) scale(.85); opacity: .5; }
}

/* ── Particle Diamond Field ─────────────────────────────────── */
.dash-particle-field {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.dash-particle {
    position: absolute;
    width: 5px; height: 5px;
    background: var(--gold-400);
    border-radius: 1px;
    transform: rotate(45deg) scale(0);
    opacity: 0;
    will-change: transform, opacity;
    box-shadow: 0 0 8px var(--gold-300);
}

/* 12 unique particle orbits */
.dp-1  { top:  8%; left: 18%; animation: dp-float-1  7s  1.0s ease-in-out infinite; }
.dp-2  { top: 15%; left: 72%; animation: dp-float-2  9s  2.3s ease-in-out infinite; background: rgba(73,162,133,.9); box-shadow: 0 0 8px rgba(73,162,133,.6); }
.dp-3  { top: 28%; left: 42%; animation: dp-float-3  6s  0.5s ease-in-out infinite; }
.dp-4  { top: 42%; left: 88%; animation: dp-float-4 11s  3.1s ease-in-out infinite; background: rgba(226,173,50,.8); }
.dp-5  { top: 55%; left: 12%; animation: dp-float-5  8s  1.8s ease-in-out infinite; }
.dp-6  { top: 68%; left: 58%; animation: dp-float-6 10s  4.2s ease-in-out infinite; background: rgba(73,162,133,.7); box-shadow: 0 0 8px rgba(73,162,133,.5); }
.dp-7  { top: 76%; left: 30%; animation: dp-float-7  7s  0.2s ease-in-out infinite; }
.dp-8  { top: 88%; left: 78%; animation: dp-float-8 13s  2.9s ease-in-out infinite; }
.dp-9  { top: 22%; left: 55%; animation: dp-float-9  5s  1.4s ease-in-out infinite; background: rgba(236,199,95,.9); }
.dp-10 { top: 50%; left: 38%; animation: dp-float-10 9s  3.7s ease-in-out infinite; }
.dp-11 { top: 36%; left: 8%;  animation: dp-float-11 6s  0.8s ease-in-out infinite; background: rgba(73,162,133,.8); box-shadow: 0 0 8px rgba(73,162,133,.5); }
.dp-12 { top: 82%; left: 65%; animation: dp-float-12 8s  5.1s ease-in-out infinite; }

@keyframes dp-float-1  { 0%,100%{transform:rotate(45deg) scale(0);opacity:0} 30%,70%{transform:rotate(45deg) scale(1) translateY(-18px);opacity:.75} }
@keyframes dp-float-2  { 0%,100%{transform:rotate(45deg) scale(0);opacity:0} 25%,75%{transform:rotate(225deg) scale(.85) translateY(-22px);opacity:.65} }
@keyframes dp-float-3  { 0%,100%{transform:rotate(45deg) scale(0);opacity:0} 35%,65%{transform:rotate(45deg) scale(1.2) translateY(-14px);opacity:.8} }
@keyframes dp-float-4  { 0%,100%{transform:rotate(45deg) scale(0);opacity:0} 40%,60%{transform:rotate(135deg) scale(.9) translateY(-26px);opacity:.6} }
@keyframes dp-float-5  { 0%,100%{transform:rotate(45deg) scale(0);opacity:0} 20%,80%{transform:rotate(45deg) scale(1) translateY(-20px);opacity:.7} }
@keyframes dp-float-6  { 0%,100%{transform:rotate(45deg) scale(0);opacity:0} 45%,55%{transform:rotate(315deg) scale(1.1) translateY(-16px);opacity:.75} }
@keyframes dp-float-7  { 0%,100%{transform:rotate(45deg) scale(0);opacity:0} 30%,70%{transform:rotate(45deg) scale(.95) translateY(-24px);opacity:.7} }
@keyframes dp-float-8  { 0%,100%{transform:rotate(45deg) scale(0);opacity:0} 35%,65%{transform:rotate(225deg) scale(1.15) translateY(-12px);opacity:.65} }
@keyframes dp-float-9  { 0%,100%{transform:rotate(45deg) scale(0);opacity:0} 25%,75%{transform:rotate(45deg) scale(1.3) translateY(-20px);opacity:.85} }
@keyframes dp-float-10 { 0%,100%{transform:rotate(45deg) scale(0);opacity:0} 40%,60%{transform:rotate(135deg) scale(.8) translateY(-18px);opacity:.6} }
@keyframes dp-float-11 { 0%,100%{transform:rotate(45deg) scale(0);opacity:0} 30%,70%{transform:rotate(45deg) scale(1.1) translateY(-22px);opacity:.75} }
@keyframes dp-float-12 { 0%,100%{transform:rotate(45deg) scale(0);opacity:0} 45%,55%{transform:rotate(315deg) scale(.9) translateY(-16px);opacity:.65} }

/* ── Dashboard Welcome — Border Beam 360° ───────────────────── */
.dash-welcome-border-beam {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
}

.dash-welcome-border-beam::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(
        from var(--beam-angle, 0deg),
        transparent 0deg,
        rgba(236, 199, 95, .9) 40deg,
        rgba(73, 162, 133, .8) 90deg,
        transparent 140deg
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: dash-beam-rotate 4s linear infinite;
    will-change: transform;
}

@keyframes dash-beam-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Alternate: CSS custom property approach for smoother 360° */
@property --beam-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
.dash-welcome-border-beam::after {
    content: "";
    position: absolute;
    inset: -1.5px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--beam-angle),
        transparent 0deg,
        rgba(226, 173, 50, .6) 30deg,
        rgba(40, 110, 87, .5) 80deg,
        transparent 130deg
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: beam-angle-sweep 6s 0.8s linear infinite;
    will-change: --beam-angle;
}

@keyframes beam-angle-sweep {
    from { --beam-angle: 0deg; }
    to   { --beam-angle: 360deg; }
}

/* ── Sonar Pulse Rings ──────────────────────────────────────── */
.dash-pulse-rings {
    position: absolute;
    right: 120px;
    bottom: 10px;
    z-index: 0;
    pointer-events: none;
}

.dash-pulse-ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(236, 199, 95, .6);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    will-change: transform, opacity;
}

.dpr-1 { width: 80px;  height: 80px;  animation: dash-pulse-ring 3.6s 0s    ease-out infinite; }
.dpr-2 { width: 140px; height: 140px; animation: dash-pulse-ring 3.6s 1.2s  ease-out infinite; }
.dpr-3 { width: 200px; height: 200px; animation: dash-pulse-ring 3.6s 2.4s  ease-out infinite; border-color: rgba(73, 162, 133, .5); }

@keyframes dash-pulse-ring {
    0%   { transform: translate(-50%, -50%) scale(.1); opacity: .9; }
    80%  { transform: translate(-50%, -50%) scale(1);  opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1);  opacity: 0; }
}

/* ── Dot-Matrix Data Grid Overlay ──────────────────────────── */
.dash-data-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    background-image:
        radial-gradient(circle, rgba(236, 199, 95, .18) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: .35;
    mask-image: radial-gradient(circle at 70% 40%, #000 10%, transparent 65%);
    -webkit-mask-image: radial-gradient(circle at 70% 40%, #000 10%, transparent 65%);
    animation: dash-grid-breathe 8s ease-in-out infinite alternate;
}

@keyframes dash-grid-breathe {
    from { opacity: .28; transform: scale(1); }
    to   { opacity: .45; transform: scale(1.04); }
}

/* ── AI Badge ───────────────────────────────────────────────── */
.dash-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 5px 12px;
    border: 1px solid rgba(236, 199, 95, .35);
    border-radius: 99px;
    background: rgba(255, 255, 255, .06);
    color: rgba(236, 199, 95, .9);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .12em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
    box-shadow: 0 0 20px rgba(236, 199, 95, .08);
}

.dash-ai-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, .6);
    animation: dash-ai-dot-pulse 2s ease-in-out infinite;
    flex: 0 0 auto;
}

@keyframes dash-ai-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); }
    50%       { box-shadow: 0 0 0 5px rgba(74, 222, 128, 0); }
}

/* ── Dashboard Eyebrow Dot ──────────────────────────────────── */
.dashboard-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dash-eyebrow-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--gold-400);
    box-shadow: 0 0 0 0 rgba(236, 199, 95, .7);
    animation: dash-eyebrow-ping 2.4s ease-in-out infinite;
}

@keyframes dash-eyebrow-ping {
    0%, 100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(236, 199, 95, .7); }
    50%       { transform: scale(1.2); box-shadow: 0 0 0 6px rgba(236, 199, 95, 0); }
}

/* ── Dashboard Welcome h2 em (Name Shimmer) ─────────────────── */
.dashboard-welcome h2 em {
    font-style: normal;
    background: linear-gradient(
        100deg,
        #ffffff 0%,
        var(--gold-300) 30%,
        #ffffff 50%,
        var(--gold-200) 70%,
        #ffffff 100%
    );
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: dash-name-shimmer 4s ease-in-out infinite;
}

@keyframes dash-name-shimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* ── Crest Extra Rings ──────────────────────────────────────── */
.dash-crest-outer-ring {
    position: absolute !important;
    inset: -22px !important;
    border: 1px dashed rgba(236, 199, 95, .2) !important;
    border-radius: 50% !important;
    background: none !important;
    box-shadow: none !important;
    animation: spin-360-ccw 18s linear infinite !important;
    will-change: transform !important;
}

.dash-crest-radar {
    position: absolute !important;
    inset: 8px !important;
    border-radius: 50% !important;
    background: conic-gradient(
        from 0deg,
        rgba(73, 162, 133, .35) 0deg,
        transparent 60deg,
        transparent 360deg
    ) !important;
    animation: spin-360-cw 3s linear infinite !important;
    will-change: transform !important;
    box-shadow: none !important;
}

/* ── Stat Card Holographic Shimmer on Hover ─────────────────── */
.stat-card::before {
    background: linear-gradient(90deg, var(--emerald-600), var(--gold-500), var(--emerald-400));
    background-size: 200% 100%;
    animation: stat-bar-shimmer 3s ease-in-out infinite;
}

@keyframes stat-bar-shimmer {
    0%   { background-position: 100% center; }
    50%  { background-position:   0% center; }
    100% { background-position: 100% center; }
}

.stat-card:hover .stat-value {
    text-shadow: 0 0 24px rgba(226, 173, 50, .4);
    color: var(--emerald-800);
}

/* ── Module Card Corner Flash on Hover ──────────────────────── */
.module-card:hover::after {
    animation: module-corner-flash .6s var(--ease-premium) both;
}

@keyframes module-corner-flash {
    0%   { opacity: 0;   transform: scale(.5) rotate(-20deg); }
    50%  { opacity: 1;   transform: scale(1.1) rotate(10deg); }
    100% { opacity: .8;  transform: scale(1) rotate(0deg); }
}

/* ── Section Heading Animated Underline ─────────────────────── */
.section-heading {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.section-heading::after {
    content: "";
    flex: 1 1 auto;
    display: inline-block;
    height: 2px;
    min-width: 40px;
    background: linear-gradient(90deg, var(--emerald-600), var(--gold-400), transparent);
    border-radius: 99px;
    animation: section-line-grow 1s var(--ease-premium) both;
}

@keyframes section-line-grow {
    from { transform: scaleX(0); opacity: 0; transform-origin: left; }
    to   { transform: scaleX(1); opacity: 1; transform-origin: left; }
}

/* ── Timeline Dot Pulse ─────────────────────────────────────── */
.timeline-dot {
    animation: timeline-dot-ping 2s ease-in-out infinite;
}

@keyframes timeline-dot-ping {
    0%, 100% { box-shadow: 0 0 0 0 rgba(40, 110, 87, .5); }
    50%       { box-shadow: 0 0 0 5px rgba(40, 110, 87, 0); }
}

/* ── Staggered Reveal Keyframe ──────────────────────────────── */
/* ── Chart Bar Animated Entry ───────────────────────────────── */
/* ── Today Chip Gemini Pulse ────────────────────────────────── */
.today-chip {
    animation: chip-enter .6s var(--ease-spring) both;
}

@keyframes chip-enter {
    from { transform: scale(.85); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* ── Brand Hero Sheen (re-expose) ───────────────────────────── */
@keyframes brand-hero-sheen {
    0%,100% { transform: translateX(-110%); opacity: 0; }
    8%,22%  { opacity: 1; }
    35%     { transform: translateX(115%); opacity: 0; }
}

@keyframes brand-crest-float {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-7px); }
}

/* ==========================================================================
   Reduced Motion & Print Rules
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
    .motion-ready .ui-reveal { opacity: 1; transform: none; }
    .motion-ready [data-animated-chart].ui-reveal .chart-bar { transform: scaleY(1); }
    .ui-ripple { display: none !important; }
}

@media print {
    @page { size: A4 portrait; margin: 12mm; }
    body { background: #ffffff !important; }
    .sidebar, .sidebar-backdrop, .topbar, .print-toolbar, .loan-action-card, .document-upload-form, .loan-payment-form, .filter-bar, .app-ambient { display: none !important; }
    .app-shell, .content { display: block !important; min-height: 0; background: #ffffff !important; }
    .main { max-width: none; padding: 0; }
    .card, .stat-card, .print-document { break-inside: avoid; box-shadow: none !important; border: 1px solid #ccd8d2 !important; }
    .print-document-body { padding: 0; background: #ffffff !important; }
    .print-document { width: 100%; margin: 0; padding: 0; box-shadow: none !important; }
    .receipt-body { padding: 0; background: #ffffff !important; }
    .receipt { width: 80mm; margin: 0 auto; padding: 5mm; box-shadow: none !important; }
    .print-table th, .print-table td { color: #000000; }
    a { color: inherit; text-decoration: none; }
}