/* Auth pages theme: shared by the sign-in page design and every other account page. */

        :root {
            --cd-primary: #226DB4;
            --cd-primary-2: #3D8BFD;
            --cd-accent: #22C3B5;
            --cd-ink: #0f172a;
            --cd-muted: #64748b;
            --cd-line: #e2e8f0;
            --cd-danger: #e5484d;
            --cd-warn: #b7791f;
        }
        [v-cloak] { display: none; }
        * { box-sizing: border-box; }
        html, body { height: 100%; }
        body {
            margin: 0; min-height: 100vh;
            font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
            color: var(--cd-ink); background: #f4f7fb;
        }
        .cd-shell { display: grid; grid-template-columns: 1.15fr 1fr; min-height: 100vh; }

        /* ---------- Left: brand + illustration ---------- */
        .cd-hero {
            position: relative; overflow: hidden; color: #fff;
            padding: 48px 56px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
            background: linear-gradient(145deg, #0b1f3a 0%, #123766 45%, #1b5a9c 100%);
        }
        .cd-hero::before { /* dotted grid */
            content: ""; position: absolute; inset: 0; opacity: .18; pointer-events: none;
            background-image: radial-gradient(rgba(255,255,255,.55) 1px, transparent 1px);
            background-size: 22px 22px;
            mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
            -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
        }
        .cd-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; }
        .cd-blob.b1 { width: 420px; height: 420px; background: #3D8BFD; top: -120px; right: -100px; animation: cd-drift 16s ease-in-out infinite; }
        .cd-blob.b2 { width: 360px; height: 360px; background: #22C3B5; bottom: -140px; left: -80px; animation: cd-drift 20s ease-in-out infinite reverse; opacity: .35; }
        .cd-blob.b3 { width: 220px; height: 220px; background: #8b5cf6; top: 45%; left: 55%; animation: cd-drift 24s ease-in-out infinite; opacity: .25; }

        .cd-brand { position: relative; display: flex; align-items: center; gap: 12px; animation: cd-fade-down .7s ease both; }
        .cd-mark {
            width: 46px; height: 46px; border-radius: 13px; flex: 0 0 46px;
            display: inline-flex; align-items: center; justify-content: center;
            background: linear-gradient(135deg, var(--cd-primary-2), var(--cd-accent));
            box-shadow: 0 10px 28px rgba(61,139,253,.45), inset 0 1px 0 rgba(255,255,255,.35);
            font-weight: 800; font-size: 17px; letter-spacing: .5px; color: #fff;
        }
        .cd-brand-name { font-size: 1.2rem; font-weight: 700; line-height: 1.1; }
        .cd-brand-name small { display: block; font-size: .74rem; font-weight: 500; opacity: .7; letter-spacing: .4px; margin-top: 3px; }

        .cd-hero-body { position: relative; max-width: 580px; }
        .cd-hero h1 { font-size: 2.35rem; font-weight: 750; line-height: 1.15; margin: 0 0 14px; animation: cd-fade-up .8s .1s ease both; }
        .cd-hero h1 .cd-grad {
            background: linear-gradient(90deg, #8fc2ff, #5eead4, #8fc2ff); background-size: 200% auto;
            -webkit-background-clip: text; background-clip: text; color: transparent;
            animation: cd-shine 6s linear infinite;
        }
        .cd-hero p.lead-text { font-size: 1rem; opacity: .82; margin: 0 0 28px; animation: cd-fade-up .8s .2s ease both; }

        /* Dashboard illustration */
        .cd-visual { position: relative; height: 250px; margin-bottom: 30px; animation: cd-fade-up .9s .3s ease both; }
        .cd-panel {
            position: absolute; left: 0; top: 18px; width: 60%; height: 214px; border-radius: 18px; padding: 16px 18px;
            background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16);
            backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
            box-shadow: 0 20px 50px rgba(3,12,30,.35);
        }
        .cd-panel-head { display: flex; justify-content: space-between; align-items: baseline; }
        .cd-panel-head .lbl { font-size: .72rem; opacity: .7; text-transform: uppercase; letter-spacing: .6px; }
        .cd-panel-head .val { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; }
        .cd-panel-head .delta { font-size: .76rem; color: #5eead4; font-weight: 600; }
        .cd-chart { display: block; width: 100%; height: 104px; margin-top: 6px; overflow: visible; }
        .cd-chart .line { fill: none; stroke: url(#cdLine); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
                          stroke-dasharray: 600; stroke-dashoffset: 600; animation: cd-draw 2.2s .6s ease forwards; }
        .cd-chart .area { fill: url(#cdArea); opacity: 0; animation: cd-fade 1s 1.6s ease forwards; }
        .cd-chart .dot { fill: #fff; opacity: 0; animation: cd-pop .4s 2.6s ease forwards; transform-origin: center; transform-box: fill-box; }
        .cd-chart .ring { fill: none; stroke: #5eead4; stroke-width: 2; opacity: 0; transform-origin: center; transform-box: fill-box; animation: cd-ping 2s 2.8s ease-out infinite; }
        .cd-bars { display: flex; gap: 6px; align-items: flex-end; height: 34px; margin-top: 8px; }
        .cd-bars span { flex: 1; border-radius: 4px 4px 1px 1px; background: rgba(255,255,255,.22); transform-origin: bottom; transform: scaleY(0); animation: cd-grow .7s ease forwards; }
        .cd-bars span:nth-child(odd) { background: rgba(94,234,212,.45); }

        .cd-chip {
            position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px;
            background: #fff; color: var(--cd-ink); font-size: .8rem; box-shadow: 0 14px 34px rgba(3,12,30,.32); white-space: nowrap;
            opacity: 0;
        }
        .cd-chip .ic { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: .85rem; }
        .cd-chip b { display: block; font-size: .82rem; }
        .cd-chip small { color: var(--cd-muted); font-size: .72rem; }
        .cd-chip.c1 { right: 0; top: 0; animation: cd-pop-in .6s 1.2s ease forwards, cd-float 6s 1.8s ease-in-out infinite; }
        .cd-chip.c2 { right: 6%; top: 92px; animation: cd-pop-in .6s 1.6s ease forwards, cd-float 7s 2.2s ease-in-out infinite reverse; }
        .cd-chip.c3 { right: 0; bottom: -4px; animation: cd-pop-in .6s 2s ease forwards, cd-float 6.5s 2.6s ease-in-out infinite; }

        .cd-features { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
        .cd-features li { display: flex; gap: 10px; align-items: flex-start; opacity: 0; animation: cd-fade-up .6s ease forwards; }
        .cd-features li:nth-child(1) { animation-delay: .5s; }
        .cd-features li:nth-child(2) { animation-delay: .62s; }
        .cd-features li:nth-child(3) { animation-delay: .74s; }
        .cd-features li:nth-child(4) { animation-delay: .86s; }
        .cd-features .fi { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
                           background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); color: #8fc2ff; transition: transform .2s, background .2s; }
        .cd-features li:hover .fi { transform: translateY(-2px); background: rgba(255,255,255,.2); }
        .cd-features b { display: block; font-size: .88rem; }
        .cd-features span { opacity: .72; font-size: .78rem; }

        .cd-hero-foot { position: relative; font-size: .76rem; opacity: .65; display: flex; gap: 18px; flex-wrap: wrap; }

        /* ---------- Right: sign-in ---------- */
        .cd-side {
            display: flex; align-items: center; justify-content: center; padding: 40px 24px; position: relative;
            background:
                radial-gradient(520px 320px at 85% 10%, rgba(61,139,253,.10), transparent 70%),
                radial-gradient(420px 300px at 10% 95%, rgba(34,195,181,.10), transparent 70%),
                #f4f7fb;
        }
        .cd-card {
            width: 100%; max-width: 420px; background: #fff; border-radius: 22px; padding: 38px 34px 30px;
            box-shadow: 0 24px 60px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04);
            border: 1px solid #eef2f7; animation: cd-rise .7s .15s cubic-bezier(.2,.8,.2,1) both;
        }
        .cd-shakewrap { width: 100%; max-width: 420px; }
        .cd-shakewrap.shake { animation: cd-shake .45s ease; }
        .cd-mobile-brand { display: none; align-items: center; gap: 10px; margin-bottom: 22px; }
        .cd-mobile-brand .cd-mark { width: 38px; height: 38px; flex-basis: 38px; font-size: 14px; border-radius: 11px; }
        .cd-mobile-brand b { font-size: 1.02rem; }
        .cd-greet { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; color: var(--cd-primary);
                    background: #eaf3fe; padding: 5px 11px; border-radius: 999px; margin-bottom: 14px; }
        .cd-greet i { animation: cd-wave 2.4s 1s ease-in-out 2; transform-origin: 70% 70%; display: inline-block; }
        .cd-card h2 { font-size: 1.6rem; font-weight: 750; margin: 0 0 6px; }
        .cd-card .sub { color: var(--cd-muted); font-size: .9rem; margin: 0 0 26px; }

        .cd-field { margin-bottom: 16px; }
        .cd-field label { display: block; font-size: .8rem; font-weight: 600; color: #334155; margin-bottom: 6px; }
        .cd-input { position: relative; }
        .cd-input input {
            width: 100%; height: 48px; border-radius: 12px; border: 1.5px solid var(--cd-line); background: #f8fafc;
            padding: 0 44px 0 42px; font-size: .93rem; color: var(--cd-ink); transition: border-color .2s, box-shadow .2s, background .2s;
        }
        .cd-input .lead-ic { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: .9rem; transition: color .2s; pointer-events: none; }
        .cd-input input::placeholder { color: #a0aec0; }
        .cd-input input:hover { border-color: #cbd5e1; }
        .cd-input input:focus { outline: none; background: #fff; border-color: var(--cd-primary-2); box-shadow: 0 0 0 4px rgba(61,139,253,.14); }
        .cd-input input:focus ~ .lead-ic { color: var(--cd-primary-2); }
        .cd-input.invalid input { border-color: var(--cd-danger); box-shadow: 0 0 0 4px rgba(229,72,77,.1); }
        .cd-input .tail { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); border: none; background: none;
                          width: 34px; height: 34px; border-radius: 9px; color: #94a3b8; cursor: pointer; }
        .cd-input .tail:hover { color: var(--cd-primary); background: #eef4fc; }
        .cd-input .ok { position: absolute; right: 15px; top: 50%; margin-top: -7px; color: #16a34a; font-size: .85rem; animation: cd-pop .3s ease both; }
        .cd-err { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--cd-danger); margin-top: 6px; animation: cd-fade-down .25s ease both; }
        .cd-caps { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--cd-warn); margin-top: 6px; animation: cd-fade-down .25s ease both; }

        .cd-row { display: flex; justify-content: space-between; align-items: center; margin: 6px 0 20px; }
        .cd-check { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; color: #475569; cursor: pointer; user-select: none; margin: 0; }
        .cd-check input { width: 16px; height: 16px; accent-color: var(--cd-primary); }
        .cd-link { color: var(--cd-primary); font-size: .84rem; font-weight: 600; text-decoration: none; }
        .cd-link:hover { color: var(--cd-primary-2); text-decoration: underline; }

        .cd-btn {
            position: relative; overflow: hidden; width: 100%; height: 50px; border: none; border-radius: 13px; cursor: pointer;
            color: #fff; font-weight: 700; font-size: .96rem; letter-spacing: .2px;
            background: linear-gradient(135deg, var(--cd-primary-2), var(--cd-primary));
            box-shadow: 0 12px 26px rgba(34,109,180,.32); transition: transform .15s, box-shadow .2s, filter .2s;
        }
        .cd-btn::after { /* shimmer */
            content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
            background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg);
            animation: cd-shimmer 3.6s 1.5s ease-in-out infinite;
        }
        .cd-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 16px 30px rgba(34,109,180,.38); filter: brightness(1.04); }
        .cd-btn:active:not(:disabled) { transform: translateY(0) scale(.99); }
        .cd-btn:focus-visible { outline: 3px solid rgba(61,139,253,.45); outline-offset: 2px; }
        .cd-btn:disabled { cursor: progress; filter: saturate(.7); }
        .cd-btn .arrow { display: inline-block; margin-left: 8px; transition: transform .2s; }
        .cd-btn:hover .arrow { transform: translateX(4px); }
        .cd-spin { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%;
                   animation: cd-rot .7s linear infinite; vertical-align: -3px; margin-right: 8px; }

        .cd-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 12px; color: #94a3b8; font-size: .78rem; }
        .cd-divider::before, .cd-divider::after { content: ""; flex: 1; height: 1px; background: var(--cd-line); }
        .cd-register { text-align: center; }

        .cd-secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; font-size: .76rem; color: #94a3b8; }
        .cd-secure i { color: #16a34a; }

        /* ---------- Keyframes ---------- */
        @keyframes cd-drift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-30px,25px) scale(1.08); } }
        @keyframes cd-fade { to { opacity: 1; } }
        @keyframes cd-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
        @keyframes cd-fade-down { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
        @keyframes cd-rise { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
        @keyframes cd-draw { to { stroke-dashoffset: 0; } }
        @keyframes cd-grow { to { transform: scaleY(1); } }
        @keyframes cd-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
        @keyframes cd-pop-in { from { opacity: 0; transform: translateY(12px) scale(.9); } to { opacity: 1; transform: none; } }
        @keyframes cd-ping { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
        @keyframes cd-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
        @keyframes cd-shine { to { background-position: 200% center; } }
        @keyframes cd-shimmer { 0% { left: -60%; } 40%,100% { left: 130%; } }
        @keyframes cd-rot { to { transform: rotate(360deg); } }
        @keyframes cd-wave { 0%,100% { transform: rotate(0); } 20% { transform: rotate(16deg); } 40% { transform: rotate(-8deg); } 60% { transform: rotate(14deg); } 80% { transform: rotate(-4deg); } }
        @keyframes cd-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(4px); } }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition: none !important; }
        }
        @media (max-width: 1199px) {
            .cd-hero { padding: 40px; }
            .cd-hero h1 { font-size: 2rem; }
            .cd-features { grid-template-columns: 1fr; }
            .cd-panel { width: 66%; }
            .cd-chip.c2 { right: 0; }
        }
        @media (max-width: 991px) {
            .cd-shell { grid-template-columns: 1fr; }
            .cd-hero { display: none; }
            .cd-side { min-height: 100vh; background: linear-gradient(170deg, #0b1f3a 0%, #1b5a9c 42%, #f4f7fb 42.2%); }
            .cd-mobile-brand { display: flex; }
        }
        @media (max-width: 480px) {
            .cd-side { padding: 24px 16px; }
            .cd-card { padding: 28px 22px 24px; border-radius: 18px; }
            .cd-card h2 { font-size: 1.4rem; }
        }
    
/* ---------- Shared auth pages (logout, forgot password, confirmations, register) ---------- */
.cd-hero.cd-hero-compact .cd-hero-body h1 { font-size: 2.1rem; }
.cd-status-ic {
    width: 64px; height: 64px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.6rem; color: #fff; margin-bottom: 16px;
    background: linear-gradient(135deg, var(--cd-primary-2), var(--cd-primary));
    box-shadow: 0 14px 30px rgba(34,109,180,.32); animation: cd-pop .45s .2s ease both;
}
.cd-status-ic.ok { background: linear-gradient(135deg, #22c55e, #16a34a); box-shadow: 0 14px 30px rgba(22,163,74,.3); }
.cd-status-ic.warn { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 14px 30px rgba(217,119,6,.3); }
.cd-card .cd-center { text-align: center; }
.cd-btn.cd-btn-ghost { background: #fff; color: var(--cd-primary); border: 1.5px solid var(--cd-line); box-shadow: none; margin-top: 10px; }
.cd-btn.cd-btn-ghost::after { display: none; }
.cd-btn.cd-btn-ghost:hover:not(:disabled) { background: #f4f8fd; box-shadow: none; filter: none; }
.cd-progress { height: 4px; border-radius: 4px; background: #e8eef6; overflow: hidden; margin-top: 18px; }
.cd-progress span { display: block; height: 100%; width: 40%; border-radius: 4px; background: linear-gradient(90deg, var(--cd-primary-2), var(--cd-accent)); animation: cd-indet 1.3s ease-in-out infinite; }
@keyframes cd-indet { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

/* Existing Bootstrap form markup inside the card (register) gets the same look as the sign-in fields. */
.cd-card .form-control { height: 46px; border-radius: 12px; border: 1.5px solid var(--cd-line); background: #f8fafc; font-size: .93rem; transition: border-color .2s, box-shadow .2s, background .2s; }
.cd-card .form-control:focus { background: #fff; border-color: var(--cd-primary-2); box-shadow: 0 0 0 4px rgba(61,139,253,.14); }
.cd-card .input-group .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cd-card .input-group-text { border-radius: 0 12px 12px 0; border: 1.5px solid var(--cd-line); border-left: none; background: #f8fafc; color: #94a3b8; }
.cd-card .btn-primary { height: 46px; border: none; border-radius: 12px; font-weight: 700; background: linear-gradient(135deg, var(--cd-primary-2), var(--cd-primary)); box-shadow: 0 10px 22px rgba(34,109,180,.28); }
.cd-card .btn-primary:hover { filter: brightness(1.05); }
.cd-card .text-danger { font-size: .78rem; }
.cd-card .login-box-msg { display: none; }
.cd-card .card-body { padding: 0; }