/* =========================================================
   sertifikat.avloniy.uz — design tokens
   ========================================================= */
:root {
    /* ===== Royal Indigo + Champagne Gold — luxury / prestige ===== */
    --c-primary:        #312e81;   /* deep royal indigo */
    --c-primary-dark:   #232063;   /* darker indigo (hover) */
    --c-primary-2:      #4338ca;   /* royal blue — gradient partner */
    --c-primary-light:  #e8e7f7;   /* light indigo tint (chips) */

    /* Champagne gold accent — the "luxury" signal */
    --c-gold:           #c9a227;   /* rich champagne gold */
    --c-gold-bright:    #e6c45e;   /* bright gold highlight */
    --c-gold-dark:      #a8851c;
    --c-gold-soft:      #ecdca7;
    --c-gold-light:     #faf4e1;

    --c-sidebar-from:   #232063;
    --c-sidebar-to:     #4338ca;

    --c-success:        #0f9d6e;
    --c-success-bg:     #d1fae5;
    --c-danger:         #e23b4e;
    --c-danger-bg:      #fee2e2;
    --c-warning:        #e08a0b;
    --c-warning-bg:     #fef3c7;
    --c-info:           #4338ca;

    --c-bg:             #faf9f6;   /* warm ivory */
    --c-bg-soft:        #f3f1ea;
    --c-card:           #ffffff;
    --c-border:         #e8e3d6;   /* warm-neutral border */
    --c-border-soft:    #f1ede2;
    --c-text:           #1a1830;   /* near-black indigo */
    --c-text-soft:      #56536f;
    --c-text-muted:     #9a96ad;

    /* Indigo-tinted shadows for depth */
    --shadow-sm:  0 1px 3px rgba(35, 32, 99, 0.06);
    --shadow:     0 4px 18px rgba(35, 32, 99, 0.09);
    --shadow-lg:  0 18px 50px rgba(35, 32, 99, 0.15);
    --shadow-gold: 0 6px 22px rgba(201, 162, 39, 0.35);

    /* Signature gradients */
    --grad-primary: linear-gradient(135deg, #312e81 0%, #4338ca 100%);
    --grad-primary-soft: linear-gradient(135deg, #3a3690 0%, #5b50e0 100%);
    --grad-gold:    linear-gradient(135deg, #b8941f 0%, #e6c45e 45%, #c9a227 100%);

    --radius-sm:  6px;
    --radius:     10px;
    --radius-lg:  14px;
    --radius-xl:  18px;
}

* { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
    background: var(--c-bg);
    color: var(--c-text);
    -webkit-font-smoothing: antialiased;
}

.public-bg {
    background: #122d6b;             /* dark blue — visible in the gap below content */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.public-bg .page-content {
    /* natural height (do NOT flex-grow) so dark body shows below it as a clean band */
    background: linear-gradient(180deg, #e8f1ff 0%, #f4f7fb 320px);
    padding-bottom: 60px;            /* breathing room before the dark cut-off */
}
.public-bg .public-footer {
    margin-top: auto;                /* push footer to viewport bottom; dark gap appears above it */
    flex-shrink: 0;
}

/* ---------- Buttons ---------- */
.btn { font-weight: 600; border-radius: var(--radius); padding: 0.55rem 1.1rem; transition: transform .12s ease, box-shadow .18s ease, background .18s ease; }
.btn-lg { padding: 0.75rem 1.6rem; border-radius: var(--radius); }
.btn-primary {
    background: var(--grad-primary); border: none;
    box-shadow: 0 4px 14px rgba(49, 46, 129, 0.3);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--grad-primary-soft);
    box-shadow: 0 8px 22px rgba(49, 46, 129, 0.4);
    transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }
.btn-outline-primary { color: var(--c-primary); border-color: var(--c-primary); border-width: 1.5px; }
.btn-outline-primary:hover { background: var(--c-primary); border-color: var(--c-primary); }

/* Gold luxury CTA */
.btn-gold {
    background: var(--grad-gold); border: none; color: #3a2e05; font-weight: 700;
    box-shadow: var(--shadow-gold);
}
.btn-gold:hover, .btn-gold:focus {
    color: #3a2e05; transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(201, 162, 39, 0.5);
}
.btn-outline-gold { color: var(--c-gold-dark); border: 1.5px solid var(--c-gold); background: transparent; font-weight: 600; }
.btn-outline-gold:hover { background: var(--grad-gold); color: #3a2e05; border-color: transparent; }

.card {
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.card.shadow-soft { box-shadow: var(--shadow); }

/* ---------- Public header ---------- */
.public-nav {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--c-border-soft);
}
.public-nav .brand {
    display: flex; align-items: center; gap: 14px;
    text-decoration: none; color: var(--c-text);
}
.public-nav .brand img { width: 48px; height: 48px; }
.public-nav .brand .brand-title {
    font-size: 18px; font-weight: 700; color: var(--c-primary-dark); line-height: 1.1;
}
.public-nav .brand .brand-sub {
    font-size: 11.5px; color: var(--c-text-soft); margin-top: 3px; line-height: 1.3;
}
.public-nav .nav-link { color: var(--c-text-soft); font-weight: 500; padding: 0.5rem 1rem; }
.public-nav .nav-link.active { color: var(--c-primary); border-bottom: 2px solid var(--c-primary); }

.lang-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border: 1px solid var(--c-border);
    border-radius: 999px; background: white; color: var(--c-text);
    font-size: 14px; cursor: pointer; transition: border-color .15s;
}
.lang-pill:hover { border-color: var(--c-primary); }
.lang-pill .dot {
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--c-primary-light); display:inline-flex;
    align-items:center; justify-content:center; color:var(--c-primary); font-size:10px;
}

/* ---------- Hero ---------- */
.hero { padding: 64px 0 48px; }
.hero h1 { font-size: 48px; line-height: 1.1; font-weight: 800; color: var(--c-text); letter-spacing: -0.5px; }
.hero h1 .accent {
    background: var(--grad-primary); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.hero p.lead { font-size: 17px; color: var(--c-text-soft); margin-top: 18px; max-width: 540px; }
.hero-search {
    margin-top: 32px; display: flex; gap: 12px;
    background: white; border-radius: var(--radius-lg); padding: 8px;
    box-shadow: var(--shadow); max-width: 600px;
}
.hero-search input {
    border: none; flex: 1; padding: 14px 18px; font-size: 16px; outline: none; background: transparent;
}
.hero-note { margin-top: 14px; color: var(--c-text-soft); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.hero-cert-preview {
    background: white; border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg); padding: 14px;
    max-width: 560px; margin-left: auto;
}
.hero-cert-preview img { width: 100%; border-radius: 8px; display: block; }

/* ---------- Feature cards ---------- */
.feature-card {
    background: white; padding: 28px;
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-lg); height: 100%;
    box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .22s ease;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.feature-card .ic {
    width: 56px; height: 56px; border-radius: 14px;
    background: var(--grad-primary); color: #fff;
    box-shadow: 0 6px 16px rgba(49,46,129,0.28);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 24px; margin-bottom: 16px;
}
.feature-card h3 { font-size: 18px; font-weight: 600; }
.feature-card p { color: var(--c-text-soft); font-size: 14px; margin: 0; }

/* ---------- Footer ---------- */
.public-footer {
    background: linear-gradient(180deg, #232063 0%, #16143a 100%);
    color: #c8c6e0; padding: 48px 0 0; margin-top: 80px;
    border-top: 3px solid transparent;
    border-image: var(--grad-gold) 1;
}
.public-footer h5 {
    color: #fff; font-size: 14px; text-transform: uppercase;
    letter-spacing: 0.5px; margin-bottom: 18px;
}
.public-footer a { color: #cfdbf2; text-decoration: none; font-size: 14px; }
.public-footer a:hover { color: #fff; }
.public-footer ul { list-style: none; padding: 0; }
.public-footer ul li { padding: 4px 0; }
.public-footer .social a {
    display: inline-flex; width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,0.08); align-items: center; justify-content: center;
    margin-right: 8px; transition: background .15s;
}
.public-footer .social a:hover { background: rgba(255,255,255,0.2); }
.public-footer .bottom-bar {
    margin-top: 40px; padding: 18px 0; text-align: center;
    border-top: 1px solid rgba(255,255,255,0.08);
    color: #aabbd9; font-size: 13px;
}

/* ---------- Verify result ---------- */
.verify-result {
    background: white; border-radius: var(--radius-lg);
    overflow: hidden; border: 2px solid transparent;
}
.verify-result.ok    { border-color: #a7f3d0; background: linear-gradient(180deg, #ecfdf5 0%, white 90px); }
.verify-result.bad   { border-color: #fecaca; background: linear-gradient(180deg, #fef2f2 0%, white 90px); }
.verify-result.warn  { border-color: #fde68a; background: linear-gradient(180deg, #fef9eb 0%, white 90px); }

.verify-result .icon-circle {
    width: 80px; height: 80px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 40px; flex-shrink: 0;
}
.verify-result.ok   .icon-circle { background: #d1fae5; color: var(--c-success); }
.verify-result.bad  .icon-circle { background: #fee2e2; color: var(--c-danger); }
.verify-result.warn .icon-circle { background: #fef3c7; color: var(--c-warning); }

.verify-result h2 { font-size: 26px; font-weight: 700; margin: 0; }
.verify-result.ok   h2 { color: #065f46; }
.verify-result.bad  h2 { color: #991b1b; }
.verify-result.warn h2 { color: #92400e; }

.info-grid {
    display: grid; grid-template-columns: 32px 1fr;
    gap: 12px 14px; align-items: center;
    padding: 18px 24px; border-top: 1px solid var(--c-border-soft);
}
.info-grid .label { color: var(--c-text-soft); font-size: 13px; }
.info-grid .value { font-weight: 600; }
.info-grid .ic-cell {
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--c-bg); color: var(--c-primary);
    display: flex; align-items: center; justify-content: center; font-size: 14px;
}

/* ---------- Login layout ---------- */
.login-shell {
    min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr;
}
@media (max-width: 992px) { .login-shell { grid-template-columns: 1fr; } }
.login-illu {
    background:
        radial-gradient(circle at 22% 18%, rgba(99, 91, 224, 0.45), transparent 48%),
        radial-gradient(circle at 82% 78%, rgba(201, 162, 39, 0.30), transparent 52%),
        linear-gradient(155deg, #312e81 0%, #232063 55%, #16143a 100%);
    display: flex; flex-direction: column; padding: 48px;
    position: relative; overflow: hidden;
    color: white;
}
/* Subtle dot grid */
.login-illu::before {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.08) 1.5px, transparent 1.5px);
    background-size: 28px 28px;
    pointer-events: none;
    mask-image: linear-gradient(180deg, transparent 0%, black 40%, black 80%, transparent 100%);
}
/* Soft glowing orbs */
.login-illu::after {
    content: ""; position: absolute;
    width: 360px; height: 360px; border-radius: 50%;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.18), transparent 70%);
    top: 55%; left: -100px;
    filter: blur(20px);
    pointer-events: none;
    animation: float-orb 12s ease-in-out infinite;
}
@keyframes float-orb {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(60px, -30px); }
}

.login-illu .brand-lockup {
    position: relative; z-index: 2;
    display: inline-flex; align-items: center;
    background: rgba(255, 255, 255, 0.95);
    padding: 14px 22px; border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
    width: fit-content;
}
.login-illu .brand-lockup img { max-width: 240px; height: auto; }

/* Certificate showcase — 3D tilted stack */
.cert-showcase {
    position: relative; z-index: 1;
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    perspective: 1400px;
    margin: 32px 0;
}
.cert-card-wrap {
    position: absolute;
    width: 360px;
    height: 250px;
    transform-style: preserve-3d;
}
.cert-card-wrap.back  { transform: rotateY(-10deg) rotateX(8deg)  translate(-46px, -34px) scale(0.88); opacity: 0.55; }
.cert-card-wrap.mid   { transform: rotateY(-6deg)  rotateX(4deg)  translate(-24px, -17px) scale(0.94); opacity: 0.82; }
.cert-card-wrap.front { transform: rotateY(2deg)   rotateX(-2deg); }

.cert-card-wrap .inner {
    width: 100%; height: 100%;
    border-radius: 12px;
    background: white;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    animation: cert-float 6s ease-in-out infinite;
}
.cert-card-wrap.mid  .inner { animation-delay: -2s; }
.cert-card-wrap.back .inner { animation-delay: -4s; }
@keyframes cert-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

.mini-cert {
    width: 100%; height: 100%; padding: 16px 22px;
    display: flex; flex-direction: column;
    background:
        linear-gradient(135deg, transparent 0 64px, var(--accent, #fbbf24) 64px 65px, transparent 65px),
        linear-gradient(225deg, transparent 0 56px, var(--accent, #fbbf24) 56px 57px, transparent 57px) bottom right,
        white;
    background-repeat: no-repeat;
    border: 3px solid var(--primary, #1a3a8f);
}
.mini-cert .top { text-align: center; color: var(--primary, #1a3a8f); font-size: 8.5px; letter-spacing: 1.5px; font-weight: 700; }
.mini-cert .title {
    text-align: center; color: var(--primary, #1a3a8f);
    font-family: "Times New Roman", serif; font-weight: bold;
    font-size: 32px; letter-spacing: 6px; margin-top: 14px;
}
.mini-cert .underline { width: 50px; height: 2px; background: var(--accent, #fbbf24); margin: 4px auto 12px; }
.mini-cert .name {
    text-align: center; font-family: "Times New Roman", serif; font-style: italic;
    font-size: 18px; color: #0f172a;
}
.mini-cert .meta { text-align: center; color: #64748b; font-size: 9px; margin-top: 8px; }
.mini-cert .footer { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; }
.mini-cert .qr {
    width: 42px; height: 42px;
    background:
        repeating-conic-gradient(#0f172a 0% 12.5%, white 12.5% 25%) 0 0/100% 100%,
        white;
    border: 2px solid white;
}
.mini-cert .seal {
    width: 36px; height: 36px; border-radius: 50%;
    border: 2px solid var(--primary, #1a3a8f);
    display: flex; align-items: center; justify-content: center;
    color: var(--primary, #1a3a8f); font-size: 7px; text-align: center;
    line-height: 1.1;
}

/* Trust badges */
.trust-badges {
    position: relative; z-index: 2;
    display: flex; gap: 14px; flex-wrap: wrap;
    margin-top: 24px;
}
.trust-badge {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 10px 16px;
    color: white; font-size: 13px; font-weight: 500;
}
.trust-badge i {
    color: #fbbf24; font-size: 16px;
}

.login-illu .footer-tag {
    position: relative; z-index: 2;
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 12px;
}

/* Login scene (animated characters / 3D model) */
.login-scene {
    position: relative; z-index: 1;
    width: 100%; flex: 1;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.login-scene svg { width: 100%; height: auto; max-width: 600px; }

/* 3D model scene */
.scene-3d {
    position: relative;
    width: 400px; height: 400px;       /* container — auto-fit modelni to'liq sig'diradi */
    max-width: 80%;
    margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
}
.scene-3d model-viewer {
    width: 100%; height: 100%;
    --poster-color: transparent;
    background: transparent !important;
    transition: filter 0.6s ease;
}
.scene-3d[data-look="away"] model-viewer { filter: brightness(0.96) saturate(1.05); }

.scene-3d .floor-glow {
    position: absolute; bottom: 8%; left: 50%;
    width: 320px; height: 50px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(251, 191, 36, 0.40) 0%, rgba(26, 86, 219, 0.18) 40%, transparent 70%);
    filter: blur(8px);
    pointer-events: none;
}

/* Neon eyes — anchored as a <model-viewer> hotspot, position driven by 3D scene */
.scene-3d .neon-eyes {
    /* model-viewer manages position; we only style the visual presence */
    display: flex;
    gap: 46px;                          /* eye-to-eye spacing */
    pointer-events: none;
    transition: opacity 0.35s ease;
    transform: translate(-50%, -50%);   /* center the eyes around the hotspot point */
}
.scene-3d[data-look="away"] .neon-eyes { opacity: 0; }   /* hide when robot turns away */
/* model-viewer adds the "hide" class automatically when the hotspot is behind the model */
.scene-3d .neon-eyes.hide { opacity: 0; }

/* Eye socket — almost invisible, just a tiny area to allow pupil tracking */
.scene-3d .neon-eyes .eye {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: transparent;
    position: relative;
    overflow: visible;
}
/* Glossy cyan "display" eye, matching reference robot */
.scene-3d .neon-eyes .iris {
    position: absolute; inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 38% 32%,
            rgba(255,255,255,0.95) 0%,
            rgba(186,250,255,0.9) 8%,
            #67e8f9 24%,
            #22d3ee 55%,
            #0891b2 92%,
            #0e7490 100%);
    box-shadow:
        0 0 12px rgba(103, 232, 249, 0.95),
        0 0 28px rgba(34, 211, 238, 0.7),
        0 0 52px rgba(34, 211, 238, 0.45),
        0 0 90px rgba(8, 145, 178, 0.28),
        inset 0 -3px 6px rgba(8, 51, 68, 0.35),
        inset 0 2px 4px rgba(236, 254, 255, 0.55);
    transition: transform 0.18s cubic-bezier(.34,1.56,.64,1);
}
/* Bright specular highlight near top-left, like a glossy screen */
.scene-3d .neon-eyes .iris::before {
    content: "";
    position: absolute;
    top: 14%; left: 22%;
    width: 30%; height: 22%;
    background: radial-gradient(ellipse at center,
        rgba(255,255,255,0.95) 0%,
        rgba(255,255,255,0.6) 40%,
        rgba(255,255,255,0) 75%);
    border-radius: 50%;
    transform: rotate(-18deg);
    pointer-events: none;
    z-index: 2;
}
.scene-3d .neon-eyes .pupil { display: none; }

/* Subtle "blink" — eyelid closes briefly every ~5s, attached to the iris
   so it inherits the mouse-tracking translate and stays aligned. */
.scene-3d .neon-eyes .iris::after {
    content: ""; position: absolute; inset: 0;
    background: #083344;
    border-radius: 50%;
    transform: scaleY(0);
    transform-origin: top;
    animation: eye-blink 5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes eye-blink {
    0%, 92%, 100% { transform: scaleY(0); }
    95%           { transform: scaleY(1); }
    97%           { transform: scaleY(0); }
}

/* Whistle notes — only visible during password focus */
.scene-3d .notes-overlay {
    position: absolute; top: 20%; right: 8%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.scene-3d[data-look="away"] .notes-overlay { opacity: 1; }

.scene-3d .notes-overlay .n {
    position: absolute;
    font-size: 28px; font-weight: 700;
    color: #fbbf24;
    text-shadow: 0 2px 8px rgba(251, 191, 36, 0.5);
    opacity: 0;
}
.scene-3d[data-look="away"] .notes-overlay .n {
    animation: note-rise 1.8s ease-in-out infinite;
}
.scene-3d .notes-overlay .n1 { left: 0;    bottom: 0; }
.scene-3d .notes-overlay .n2 { left: 24px; bottom: 0; font-size: 20px; animation-delay: -0.6s !important; }
.scene-3d .notes-overlay .n3 { left: 48px; bottom: 0; font-size: 24px; animation-delay: -1.2s !important; }

@keyframes note-rise {
    0%   { opacity: 0; transform: translateY(0)    rotate(-10deg) scale(0.7); }
    20%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(-100px) rotate(15deg) scale(1.2); }
}


/* Gentle bobbing for both characters and certificate */
.char-bob   { animation: bob 4s ease-in-out infinite; transform-origin: center bottom; }
.cert-bob   { animation: cert-rotate 6s ease-in-out infinite; transform-origin: center; }
@keyframes bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
@keyframes cert-rotate {
    0%, 100% { transform: rotate(-1deg); }
    50%      { transform: rotate(1deg) translateY(-3px); }
}

/* Sparkle twinkles */
.sparkles circle { animation: twinkle 3s ease-in-out infinite; transform-origin: center; }
.sparkles circle:nth-child(2) { animation-delay: -1s; }
.sparkles circle:nth-child(3) { animation-delay: -2s; }
.sparkles circle:nth-child(4) { animation-delay: -0.5s; }
@keyframes twinkle {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50%      { opacity: 1;   transform: scale(1.2); }
}

/* Eyes movement — controlled by [data-look] on the scene */
.eyes { transition: transform 0.32s cubic-bezier(.34,1.56,.64,1); }
[data-look="form"]  .eyes { transform: translate(3px, 1px); }   /* look right toward form */
[data-look="away"]  .eyes { transform: translate(-3px, -1px); } /* look left away */

/* Heads tilt slightly */
.head { transition: transform 0.35s ease; transform-origin: center 60px; }
[data-look="form"]  #head-left  { transform: rotate(6deg); }
[data-look="form"]  #head-right { transform: rotate(6deg); }
[data-look="away"]  #head-left  { transform: rotate(-12deg); }
[data-look="away"]  #head-right { transform: rotate(-10deg); }

/* Mouth swap when whistling */
.mouth-whistle { transition: opacity 0.25s ease; }
.mouth-smile   { transition: opacity 0.25s ease; }
[data-look="away"] .mouth-whistle { opacity: 1; }
[data-look="away"] .mouth-smile   { opacity: 0; }

/* Musical notes for whistling */
.notes text {
    transform-origin: center bottom;
    animation: none;
}
[data-look="away"] .notes {
    opacity: 1 !important;
}
[data-look="away"] .notes text {
    animation: note-float 1.6s ease-in-out infinite;
}
[data-look="away"] .notes text:nth-child(2) { animation-delay: -0.8s; }
@keyframes note-float {
    0%   { opacity: 0; transform: translateY(0)   scale(0.8); }
    30%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(-26px) scale(1.1); }
}

.login-form-wrap {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(160deg, #faf9f6 0%, #f1eee6 100%);
    padding: 48px;
}
.login-form-card {
    width: 100%; max-width: 420px;
    background: white; padding: 36px;
    border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.login-form-card .brand-mini {
    display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 18px;
}
.login-form-card .brand-mini img { width: 36px; height: 36px; }
.login-form-card .brand-mini span { font-size: 18px; font-weight: 700; color: var(--c-primary-dark); }
.login-form-card h1 { font-size: 26px; font-weight: 700; text-align: center; margin-top: 4px; }
.login-form-card .sub { text-align: center; color: var(--c-text-soft); font-size: 14px; margin: 6px 0 24px; }

/* ---------- Dashboard ---------- */
.dash-shell {
    display: grid; grid-template-columns: 260px 1fr; min-height: 100vh;
}
.dash-sidebar {
    background: linear-gradient(180deg, var(--c-sidebar-from) 0%, var(--c-sidebar-to) 100%);
    color: #dbe5fb; padding: 24px 0;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.dash-sidebar .brand {
    display: flex; align-items: center; gap: 12px;
    padding: 0 22px 24px; border-bottom: 1px solid rgba(255,255,255,0.08);
    text-decoration: none; color: white;
}
.dash-sidebar .brand img {
    width: 42px; height: 42px; border-radius: 10px;
    background: white; padding: 3px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.dash-sidebar .brand strong { font-size: 16px; line-height: 1.1; display: block; }
.dash-sidebar .brand small { color: #aec4f0; font-size: 11px; }
.dash-sidebar .menu { padding: 16px 14px; }
.dash-sidebar .menu a {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px; border-radius: 10px; margin-bottom: 2px;
    color: #c9d6ee; text-decoration: none; font-size: 14px;
    transition: background .15s;
}
.dash-sidebar .menu a { position: relative; }
.dash-sidebar .menu a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.dash-sidebar .menu a.active {
    background: rgba(255,255,255,0.14); color: #fff; font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(230, 196, 94, 0.25);
}
.dash-sidebar .menu a.active::before {
    content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
    width: 4px; height: 22px; border-radius: 0 3px 3px 0; background: var(--grad-gold);
    box-shadow: 0 0 10px rgba(230, 196, 94, 0.6);
}
.dash-sidebar .menu a.active .ic { color: var(--c-gold-bright); }
.dash-sidebar .menu .ic { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.dash-sidebar .menu .placeholder { padding: 10px 14px; color: #8aa3d6; font-size: 12px; }
.dash-sidebar .footer-line {
    margin-top: 24px; padding: 16px 22px;
    color: #aec4f0; font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.dash-sidebar .help-card {
    margin: 16px 14px; padding: 12px 14px;
    background: rgba(255,255,255,0.08); border-radius: 10px;
    color: #dbe5fb; font-size: 13px; display: flex; align-items: center; gap: 10px;
    text-decoration: none;
}
.dash-sidebar .help-card:hover { background: rgba(255,255,255,0.14); color: #fff; }

.dash-main { display: flex; flex-direction: column; min-width: 0; }
.dash-topbar {
    height: 64px; background: white;
    border-bottom: 1px solid var(--c-border-soft);
    display: flex; align-items: center; padding: 0 24px; gap: 18px;
    position: sticky; top: 0; z-index: 10;
}
.dash-topbar .page-title { font-size: 18px; font-weight: 600; flex-shrink: 0; }
.dash-topbar .search { flex: 1; max-width: 480px; position: relative; }
.dash-topbar .search input {
    width: 100%; padding: 10px 14px 10px 40px;
    border: 1px solid var(--c-border); border-radius: 10px;
    background: #f8fafc; font-size: 14px;
}
.dash-topbar .search .ic {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--c-text-muted); font-size: 14px;
}
.dash-topbar .right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.dash-topbar .icon-btn {
    width: 38px; height: 38px; border-radius: 10px;
    border: 1px solid var(--c-border);
    background: white; color: var(--c-text-soft);
    display: inline-flex; align-items: center; justify-content: center;
    position: relative; cursor: pointer;
}
.dash-topbar .icon-btn .badge-dot {
    position: absolute; top: 6px; right: 6px;
    background: var(--c-danger); color: white;
    font-size: 10px; min-width: 16px; height: 16px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.dash-topbar .user {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 14px 6px 6px; border-radius: 999px;
    border: 1px solid var(--c-border); background: white; cursor: pointer;
}
.dash-topbar .user .avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--c-primary-light); color: var(--c-primary);
    display: flex; align-items: center; justify-content: center; font-weight: 600;
}
.dash-topbar .user .info { line-height: 1.1; text-align: left; }
.dash-topbar .user .info b { font-size: 14px; }
.dash-topbar .user .info small { color: var(--c-text-soft); font-size: 11px; }

.dash-content { padding: 28px; flex: 1; }

.kpi-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.kpi {
    background: white; border-radius: var(--radius-lg);
    padding: 22px; border: 1px solid var(--c-border-soft);
    display: flex; align-items: flex-start; gap: 16px;
    box-shadow: var(--shadow-sm);
    position: relative; overflow: hidden;
    transition: transform .16s ease, box-shadow .2s ease;
}
.kpi::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--grad-gold); opacity: 0; transition: opacity .2s ease;
}
.kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.kpi:hover::before { opacity: 1; }
.kpi .kpi-ic {
    width: 52px; height: 52px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.kpi.kpi-blue   .kpi-ic { background: var(--c-primary-light); color: var(--c-primary); }
.kpi.kpi-green  .kpi-ic { background: #d1fae5; color: #047857; }
.kpi.kpi-red    .kpi-ic { background: #fee2e2; color: #b91c1c; }
.kpi.kpi-orange .kpi-ic { background: #ffedd5; color: #c2410c; }
.kpi.kpi-purple .kpi-ic { background: #ede9fe; color: #6d28d9; }
.kpi .kpi-label { color: var(--c-text-soft); font-size: 13px; }
.kpi .kpi-value { font-size: 28px; font-weight: 700; line-height: 1.15; margin-top: 4px; }
.kpi .kpi-sub { color: var(--c-text-muted); font-size: 12px; margin-top: 4px; }

.data-card { background: white; border-radius: var(--radius-lg); border: 1px solid var(--c-border-soft); overflow: hidden; box-shadow: var(--shadow-sm); }
.data-card .card-head {
    padding: 18px 22px; border-bottom: 1px solid var(--c-border-soft);
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.data-card .card-head h2 {
    font-size: 16px; font-weight: 700; margin: 0;
    position: relative; padding-left: 14px;
}
.data-card .card-head h2::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 4px; height: 18px; border-radius: 2px; background: var(--grad-gold);
}
.data-card table { margin: 0; }
.data-card thead th {
    background: #f8fafc; color: var(--c-text-soft);
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px;
    font-weight: 600; padding: 14px 22px; border: 0;
}
.data-card tbody td { padding: 14px 22px; vertical-align: middle; border-color: var(--c-border-soft); }
.data-card tbody tr:hover { background: #fafcff; }

.pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 500;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-success { background: var(--c-success-bg); color: #047857; }
.pill-danger  { background: var(--c-danger-bg);  color: #b91c1c; }
.pill-warning { background: var(--c-warning-bg); color: #b45309; }
.pill-info    { background: var(--c-primary-light); color: var(--c-primary); }

.filter-bar {
    background: white; padding: 18px 22px;
    border: 1px solid var(--c-border-soft); border-radius: var(--radius-lg);
    margin-bottom: 18px;
}
.filter-bar label.lbl { font-size: 12px; color: var(--c-text-soft); margin-bottom: 4px; display: block; }

.crumb { color: var(--c-text-soft); font-size: 14px; margin-bottom: 16px; }
.crumb a { color: var(--c-text-soft); text-decoration: none; }
.crumb a:hover { color: var(--c-primary); }
.crumb .sep { margin: 0 8px; color: var(--c-text-muted); }
.crumb .current { color: var(--c-text); font-weight: 500; }

.detail-two { display: grid; gap: 22px; grid-template-columns: 1fr 1.1fr; }
@media (max-width: 992px) { .detail-two { grid-template-columns: 1fr; } }

.icon-list { padding: 4px 0; }
.icon-list .row-il {
    display: grid; grid-template-columns: 28px 200px 1fr;
    gap: 14px; align-items: center; padding: 10px 0;
    border-bottom: 1px solid var(--c-border-soft);
}
.icon-list .row-il:last-child { border-bottom: 0; }
.icon-list .ic-cell { color: var(--c-primary); font-size: 16px; }
.icon-list .label   { color: var(--c-text-soft); font-size: 13px; }
.icon-list .value   { font-weight: 500; }

code, .mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; }
.text-primary { color: var(--c-primary) !important; }
.text-soft { color: var(--c-text-soft); }

/* =========================================================
   Modern link styles — used across the whole platform
   ========================================================= */

/* Base link colour + smooth transition */
a {
    color: var(--c-primary);
    text-decoration: none;
    transition: color 0.18s ease;
}
a:hover { color: var(--c-primary-dark); }

/* Inline content links inside cards / detail content — animated underline */
.data-card td a:not(.btn):not(.pill),
.data-card .card-body a:not(.btn):not(.pill),
.icon-list .row-il a,
.crumb a,
.list-group-item a:not(.btn) {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1.5px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 0.25s ease, color 0.18s ease;
    padding-bottom: 1px;
    font-weight: 500;
}
.data-card td a:not(.btn):not(.pill):hover,
.data-card .card-body a:not(.btn):not(.pill):hover,
.icon-list .row-il a:hover,
.crumb a:hover,
.list-group-item a:not(.btn):hover {
    background-size: 100% 1.5px;
}

/* Code-style cert numbers inside table cells — slight pop on hover */
.data-card td a code {
    background: rgba(26, 86, 219, 0.06);
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.18s ease;
}
.data-card td a:hover code {
    background: rgba(26, 86, 219, 0.14);
}

/* ─── Public navbar links — animated underline ─────────────────── */
.public-nav .nav-link {
    position: relative;
    border-bottom: 0 !important;          /* override old static border */
    transition: color 0.18s ease;
}
.public-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 50%; right: 50%; bottom: 2px;
    height: 2px;
    background: var(--grad-gold);
    border-radius: 2px;
    transition: left 0.25s cubic-bezier(.34,1.56,.64,1),
                right 0.25s cubic-bezier(.34,1.56,.64,1);
}
.public-nav .nav-link:hover { color: var(--c-primary); }
.public-nav .nav-link:hover::after,
.public-nav .nav-link.active::after {
    left: 12px; right: 12px;
}
.public-nav .nav-link.active { color: var(--c-primary); }

/* ─── Footer links — chevron slides on hover ───────────────────── */
.public-footer ul li {
    padding: 0;
    margin: 6px 0;
}
.public-footer ul li a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    position: relative;
    transition: color 0.18s ease, transform 0.18s ease;
}
.public-footer ul li a > i.bi {
    color: #fbbf24;
    transition: transform 0.2s cubic-bezier(.34,1.56,.64,1);
}
.public-footer ul li a:hover {
    color: #fff;
    transform: translateX(2px);
}
.public-footer ul li a:hover > i.bi {
    transform: translateX(3px);
}

.public-footer .social a {
    transition: background 0.18s ease, transform 0.2s ease;
}
.public-footer .social a:hover {
    transform: translateY(-3px);
}

/* ─── Dashboard sidebar links — accent bar on left + smooth ─── */
.dash-sidebar .menu a {
    position: relative;
    overflow: hidden;
    transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}
.dash-sidebar .menu a::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 3px; height: 0;
    background: linear-gradient(180deg, #fbbf24, #f59e0b);
    border-radius: 0 3px 3px 0;
    transform: translateY(-50%);
    transition: height 0.22s cubic-bezier(.34,1.56,.64,1);
}
.dash-sidebar .menu a:hover { padding-left: 18px; }
.dash-sidebar .menu a:hover::before { height: 50%; }
.dash-sidebar .menu a.active::before {
    height: 70%;
}
.dash-sidebar .menu a.active {
    padding-left: 18px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

/* ─── Pagination — pill style with lift ────────────────────────── */
.pagination .page-link {
    border: 1px solid var(--c-border);
    border-radius: 8px;
    margin: 0 3px;
    color: var(--c-text);
    font-weight: 500;
    transition: all 0.18s ease;
    padding: 0.4rem 0.85rem;
}
.pagination .page-link:hover {
    background: var(--c-primary-light);
    color: var(--c-primary-dark);
    border-color: var(--c-primary-light);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26, 86, 219, 0.15);
    z-index: 1;
}
.pagination .page-item.active .page-link {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(26, 86, 219, 0.30);
}

/* ─── Breadcrumb chevron + smooth hover ────────────────────────── */
.crumb .sep {
    display: inline-block;
    transition: color 0.2s ease;
}
.crumb a {
    color: var(--c-text-soft);
    font-weight: 500;
}
.crumb a:hover {
    color: var(--c-primary);
}

/* ─── "Barchasini →" view-all card links ───────────────────────── */
.data-card .card-head a,
.list-group-item .small {
    color: var(--c-primary);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.18s ease, gap 0.2s ease;
}
.data-card .card-head a:hover {
    color: var(--c-primary-dark);
    gap: 8px;
}

/* ─── "Parolni unutdingizmi?" + similar text links ─────────────── */
.login-form-card a.small {
    color: var(--c-primary);
    font-weight: 500;
    position: relative;
    transition: color 0.18s ease;
}
.login-form-card a.small::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 1.5px;
    background: var(--c-primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.22s cubic-bezier(.34,1.56,.64,1);
}
.login-form-card a.small:hover { color: var(--c-primary-dark); }
.login-form-card a.small:hover::after { transform: scaleX(1); }

/* =========================================================
   Dark mode
   ========================================================= */
[data-theme="dark"] {
    --c-primary: #7c9bf0; --c-primary-dark: #9bb2f5; --c-primary-light: #2a335c;
    --c-sidebar-from: #1a1f3d; --c-sidebar-to: #2b3b78;

    --c-bg: #11152a; --c-bg-soft: #181d38; --c-card: #1c2244;
    --c-border: #2e3866; --c-border-soft: #283065;
    --c-text: #e9eaf6; --c-text-soft: #aab4d8; --c-text-muted: #7e8bbb;

    --c-success-bg: rgba(16,185,129,0.16);
    --c-danger-bg:  rgba(239,68,68,0.16);
    --c-warning-bg: rgba(245,158,11,0.16);

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow:    0 2px 10px rgba(0,0,0,0.4);
    --shadow-lg: 0 12px 34px rgba(0,0,0,0.5);

    --grad-primary: linear-gradient(135deg, #4338ca 0%, #6d62ee 100%);
    --grad-primary-soft: linear-gradient(135deg, #5147d6 0%, #8278f4 100%);

    color-scheme: dark;
}
[data-theme="dark"] body { background: var(--c-bg); color: var(--c-text); }

/* Surfaces */
[data-theme="dark"] .card, [data-theme="dark"] .data-card, [data-theme="dark"] .kpi,
[data-theme="dark"] .filter-bar, [data-theme="dark"] .verify-result,
[data-theme="dark"] .feature-card, [data-theme="dark"] .login-form-card,
[data-theme="dark"] .hero-cert-preview, [data-theme="dark"] .lang-pill,
[data-theme="dark"] .dropdown-menu, [data-theme="dark"] .modal-content {
    background: var(--c-card); border-color: var(--c-border); color: var(--c-text);
}
[data-theme="dark"] .dash-topbar { background: var(--c-card); border-color: var(--c-border); }

/* Form controls */
[data-theme="dark"] .dash-topbar .search input,
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select,
[data-theme="dark"] .filter-bar input, [data-theme="dark"] .filter-bar select {
    background: var(--c-bg-soft); border-color: var(--c-border); color: var(--c-text);
}
[data-theme="dark"] .form-control::placeholder { color: var(--c-text-muted); }
[data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus {
    background: var(--c-bg-soft); border-color: var(--c-primary); color: var(--c-text);
    box-shadow: 0 0 0 3px rgba(124,155,240,0.22);
}

/* Tables */
[data-theme="dark"] thead th, [data-theme="dark"] .table-light th, [data-theme="dark"] .table-light td {
    background: var(--c-bg-soft) !important; color: var(--c-text-soft) !important; border-color: var(--c-border) !important;
}
[data-theme="dark"] .table { color: var(--c-text); border-color: var(--c-border); }
[data-theme="dark"] .table td, [data-theme="dark"] .table th { border-color: var(--c-border-soft); }
[data-theme="dark"] tbody tr:hover { background: rgba(124,155,240,0.07); }

/* Dropdown items */
[data-theme="dark"] .dropdown-item { color: var(--c-text); }
[data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background: var(--c-bg-soft); color: var(--c-text); }
[data-theme="dark"] .dropdown-divider { border-color: var(--c-border); }

/* Pills — translucent bg already set via vars; tune text for contrast */
[data-theme="dark"] .pill-success { color: #6ee7b7; }
[data-theme="dark"] .pill-danger  { color: #fca5a5; }
[data-theme="dark"] .pill-warning { color: #fcd34d; }
[data-theme="dark"] .pill-info    { color: #c3cef8; }

/* Bootstrap alerts */
[data-theme="dark"] .alert-info    { background: rgba(124,155,240,0.14); color: #c3cef8; border-color: rgba(124,155,240,0.32); }
[data-theme="dark"] .alert-success { background: rgba(16,185,129,0.14); color: #8ef0c4; border-color: rgba(16,185,129,0.32); }
[data-theme="dark"] .alert-warning { background: rgba(245,158,11,0.14); color: #fcd34d; border-color: rgba(245,158,11,0.32); }
[data-theme="dark"] .alert-danger,
[data-theme="dark"] .alert-error   { background: rgba(239,68,68,0.14); color: #fca5a5; border-color: rgba(239,68,68,0.32); }

/* Code / kbd */
[data-theme="dark"] code { background: var(--c-bg-soft); color: #c3cef8; padding: 1px 5px; border-radius: 4px; }
[data-theme="dark"] kbd  { background: var(--c-bg-soft); border-color: var(--c-border); color: var(--c-text); }

/* =========================================================
   Login page — robot removed, clean refresh
   ========================================================= */
.login-illu .brand-lockup { margin-bottom: 8px; }

.login-illu-hero {
    position: relative; z-index: 2;
    flex: 1;
    display: flex; flex-direction: column; justify-content: center;
    gap: 16px;
    margin: 28px 0;
}
.login-illu-hero h2 {
    font-size: 30px; font-weight: 800; line-height: 1.18; margin: 0;
    letter-spacing: -0.01em;
}
.login-illu-hero p {
    font-size: 15px; line-height: 1.6; margin: 0;
    color: rgba(255, 255, 255, 0.82); max-width: 460px;
}
.login-illu-art {
    margin-top: 14px;
    width: 100%; max-width: 380px; height: auto;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    animation: float-orb 9s ease-in-out infinite;
}

/* ---- Form side ---- */
.login-form-wrap {
    display: flex; align-items: center; justify-content: center;
    padding: 40px 24px; background: var(--c-bg);
}
.login-form-card {
    width: 100%; max-width: 410px;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 40px 36px;
}
.login-brand-mini { text-align: center; margin-bottom: 14px; }
.login-brand-mini img { width: 56px; height: 56px; }
.login-form-card h1 { font-size: 24px; font-weight: 700; text-align: center; margin: 0; color: var(--c-text); }
.login-form-card .sub { text-align: center; color: var(--c-text-soft); font-size: 14px; margin: 6px 0 26px; }

.field-label {
    display: block; font-size: 13px; font-weight: 600;
    color: var(--c-text-soft); margin-bottom: 6px;
}
.field-group {
    position: relative;
    display: flex; align-items: center;
    background: var(--c-card);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.field-group:focus-within {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3.5px rgba(67, 56, 202, 0.14);
}
.field-icon {
    flex: 0 0 auto;
    width: 44px; text-align: center;
    color: var(--c-text-muted); font-size: 16px;
    pointer-events: none;
}
.field-group:focus-within .field-icon { color: var(--c-primary); }
.field-input {
    flex: 1 1 auto;
    border: 0; outline: 0; background: transparent;
    padding: 12px 12px 12px 0;
    font-size: 15px; color: var(--c-text);
    min-width: 0;
}
.field-input::placeholder { color: var(--c-text-muted); }
.field-eye {
    flex: 0 0 auto;
    border: 0; background: transparent;
    width: 44px; height: 100%;
    color: var(--c-text-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: color .15s ease;
}
.field-eye:hover { color: var(--c-primary); }

@media (max-width: 992px) {
    .login-illu { padding: 32px 24px; }
    .login-illu-art { display: none; }
    .login-form-card { box-shadow: var(--shadow); }
}

/* Outline secondary buttons */
[data-theme="dark"] .btn-outline-secondary { color: var(--c-text-soft); border-color: var(--c-border); }
[data-theme="dark"] .btn-outline-secondary:hover { background: var(--c-bg-soft); color: var(--c-text); }

/* Misc surfaces with literal light bg in light mode */
[data-theme="dark"] .icon-btn { background: var(--c-bg-soft); border-color: var(--c-border); color: var(--c-text); }
[data-theme="dark"] .filter-tab { background: var(--c-bg-soft); border-color: var(--c-border); color: var(--c-text-soft); }

/* ── Visual editor (template_form) ── */
[data-theme="dark"] .wysiwyg-shell { background: var(--c-card); border-color: var(--c-border); }
[data-theme="dark"] .wysiwyg-toolbar { background: var(--c-card); border-color: var(--c-border); }
[data-theme="dark"] .tb-btn { color: var(--c-text); }
[data-theme="dark"] .tb-btn:hover:not(:disabled) { background: var(--c-bg-soft); }
[data-theme="dark"] .tb-sep { background: var(--c-border); }
[data-theme="dark"] .wysiwyg-workspace { background: #0d1124; }
[data-theme="dark"] .layers-panel { background: var(--c-card); border-color: var(--c-border); }
[data-theme="dark"] .layer-item:hover { background: var(--c-bg-soft); }
[data-theme="dark"] .layer-item .icon { background: var(--c-bg-soft); color: var(--c-text-soft); }
[data-theme="dark"] .canvas-wrapper {
    background: #0d1124;
    background-image:
        linear-gradient(45deg, rgba(255,255,255,0.035) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.035) 75%, rgba(255,255,255,0.035)),
        linear-gradient(45deg, rgba(255,255,255,0.035) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.035) 75%, rgba(255,255,255,0.035));
}
[data-theme="dark"] .props-panel { background: var(--c-card); border-color: var(--c-border); }
[data-theme="dark"] .props-panel input[type="number"],
[data-theme="dark"] .props-panel select,
[data-theme="dark"] .props-panel input[type="text"] {
    background: var(--c-bg-soft); border-color: var(--c-border); color: var(--c-text);
}
[data-theme="dark"] .props-panel .align-row .btn-align { background: var(--c-bg-soft); border-color: var(--c-border); color: var(--c-text); }
[data-theme="dark"] .field-toggle { background: var(--c-bg-soft); }
[data-theme="dark"] .keyhints { background: var(--c-bg-soft); color: var(--c-text-muted); }
[data-theme="dark"] .keyhints kbd { background: var(--c-card); border-color: var(--c-border); color: var(--c-text); }
[data-theme="dark"] .ruler-top, [data-theme="dark"] .ruler-left { background: var(--c-card); color: var(--c-text-muted); border-color: var(--c-border); }
[data-theme="dark"] .wysiwyg-statusbar { background: var(--c-bg-soft); border-color: var(--c-border); color: var(--c-text-soft); }
[data-theme="dark"] .editor-empty { background: var(--c-card); border-color: var(--c-border); }