*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,Arial;background:#f4f7fb;color:#17202a}header{height:72px;background:#0b1f36;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 28px}header b{display:block;font-size:18px}header span{font-size:11px;color:#bcd0e6}button{background:#1f6feb;color:#fff;border:0;border-radius:8px;padding:10px 18px;font-weight:700}.shell{display:flex;min-height:calc(100vh - 72px)}aside{width:220px;background:#102a47;padding:22px 12px}aside a{display:block;color:#d6e2ef;padding:12px 15px;border-radius:8px;margin:3px 0;text-decoration:none}aside a:first-child{background:#1f6feb;color:#fff;font-weight:700}main{flex:1;padding:30px}.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:15px}.cards div,section{background:#fff;border:1px solid #dde5ef;border-radius:12px;padding:20px}.cards b{display:block;color:#667085;font-size:12px}.cards strong{display:block;font-size:32px;margin-top:10px}.grid{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-top:20px}.empty{padding:35px;background:#f8fafc;border-radius:10px;color:#667085}.ok{color:#16865c;font-weight:600}.muted{color:#667085}.loginbg{background:#0b1f36;display:grid;place-items:center;height:100vh}.login{width:390px;background:#fff;padding:36px;border-radius:18px}.login h1{margin:0}.login p{color:#667085}.login input{width:100%;padding:13px;margin:8px 0;border:1px solid #ccd5df;border-radius:8px}.login button{width:100%;margin-top:12px}.err{color:#d64545;margin-top:12px}@media(max-width:900px){.cards{grid-template-columns:1fr 1fr}.grid{grid-template-columns:1fr}aside{display:none}}

.table{width:100%;border-collapse:collapse;background:#fff}.table th,.table td{padding:12px;border-bottom:1px solid #e2e8f0;text-align:left}.table th{font-size:12px;text-transform:uppercase;color:#52647a}
.btn{display:inline-block;padding:9px 14px;border-radius:7px;text-decoration:none;border:0;cursor:pointer}.btn-primary{background:#2878ed;color:#fff}.btn-light{background:#eef3f8;color:#10263f}
.form-card{background:#fff;border:1px solid #d8e1eb;border-radius:12px;padding:22px;max-width:850px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field label{display:block;font-size:12px;font-weight:700;margin-bottom:6px}.field input,.field select,.field textarea{width:100%;box-sizing:border-box;padding:10px;border:1px solid #cbd5e1;border-radius:7px}.actions{margin-top:18px;display:flex;gap:10px}.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.badge{padding:4px 8px;border-radius:999px;background:#eef3f8;font-size:12px}

/* =========================================================
   PRADELL AI SALES - ENTERPRISE UI FOUNDATION
   ========================================================= */

:root {
    --pd-navy: #041b35;
    --pd-navy-2: #06294d;
    --pd-blue: #0878ff;
    --pd-blue-light: #25b8ff;
    --pd-gold: #f3bd47;
    --pd-bg: #f2f7fd;
    --pd-border: #dce8f5;
    --pd-text: #10233d;
    --pd-muted: #71829b;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;
    background: var(--pd-bg);
    color: var(--pd-text);
}

body {
    overflow-x: hidden;
}

.enterprise-shell {
    min-height: 100vh;
    display: flex;
}


/* SIDEBAR */

.enterprise-sidebar {
    width: 250px;
    min-width: 250px;
    min-height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1000;

    display: flex;
    flex-direction: column;

    color: #fff;

    background:
        radial-gradient(
            circle at 50% 92%,
            rgba(0, 126, 255, .35),
            transparent 22%
        ),
        linear-gradient(
            180deg,
            #03182f 0%,
            #052b50 60%,
            #063b6e 100%
        );

    box-shadow:
        10px 0 35px rgba(5, 32, 64, .12);
}

.brand-zone {
    min-height: 100px;
    padding: 18px 18px 15px;
    display: flex;
    align-items: center;
    gap: 12px;

    border-bottom:
        1px solid rgba(255,255,255,.09);
}

.brand-mark {
    width: 55px;
    height: 55px;
    flex: 0 0 55px;

    border-radius: 50%;

    display: grid;
    place-items: center;

    font-size: 30px;
    color: var(--pd-gold);

    background:
        radial-gradient(
            circle at 35% 30%,
            #19b8ff,
            #0752a0 55%,
            #02172d
        );

    border: 2px solid rgba(244,193,74,.85);

    box-shadow:
        0 0 22px rgba(13,133,255,.55),
        inset 0 0 16px rgba(255,255,255,.12);
}

.brand-copy {
    line-height: 1.05;
}

.brand-copy strong {
    display: block;
    font-size: 22px;
    letter-spacing: .5px;
}

.brand-copy span {
    display: block;
    margin-top: 3px;
    color: #26b8ff;
    font-size: 11px;
    font-weight: 800;
}

.brand-copy small {
    display: block;
    margin-top: 5px;
    font-size: 8px;
    color: #fff;
    letter-spacing: .4px;
}


.enterprise-nav {
    padding: 14px 10px;
    flex: 1;
}

.nav-item {
    position: relative;

    min-height: 46px;
    margin-bottom: 4px;
    padding: 0 14px;

    display: flex;
    align-items: center;
    gap: 15px;

    border-radius: 10px;

    color: #dcecff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;

    transition:
        transform .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}

.nav-item i {
    width: 22px;
    text-align: center;
    font-size: 18px;
}

.nav-item:hover {
    color: #fff;
    background: rgba(255,255,255,.08);
    transform: translateX(2px);
}

.nav-item.active {
    color: #fff;

    background:
        linear-gradient(
            100deg,
            #0784ff,
            #075ce6
        );

    box-shadow:
        0 8px 20px rgba(0,111,255,.32),
        inset 0 1px rgba(255,255,255,.2);
}

.nav-item.active::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 9px;
    bottom: 9px;
    width: 3px;

    border-radius: 0 5px 5px 0;

    background: #36d8ff;

    box-shadow:
        0 0 12px #22bfff;
}

.nav-new {
    margin-left: auto;
    padding: 4px 8px;

    border-radius: 999px;

    background: #18c970;
    color: #fff;

    font-size: 9px;
    font-weight: 800;

    box-shadow:
        0 0 12px rgba(24,201,112,.35);
}


.sidebar-global {
    padding: 10px 20px 22px;
}

.global-orbit {
    font-size: 62px;
    line-height: 1;
    color: #39a9ff;

    text-shadow:
        0 0 25px rgba(21,139,255,.8);
}

.sidebar-global strong {
    display: block;

    margin-top: 6px;

    font-size: 17px;
    line-height: 1.2;

    color: #fff;
}

.sidebar-global small {
    display: block;
    margin-top: 12px;

    color: #c8dbef;
    font-size: 7px;
    letter-spacing: .3px;
}


/* WORKSPACE */

.enterprise-workspace {
    width: calc(100% - 250px);
    min-height: 100vh;
    margin-left: 250px;
}


/* TOP BAR */

.enterprise-topbar {
    height: 74px;

    position: sticky;
    top: 0;
    z-index: 900;

    padding: 10px 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;

    background:
        rgba(248,252,255,.96);

    border-bottom:
        1px solid var(--pd-border);

    box-shadow:
        0 6px 22px rgba(29,74,120,.06);

    backdrop-filter: blur(15px);
}

.global-search {
    width: min(600px, 48vw);
    height: 48px;

    padding: 0 14px;

    display: flex;
    align-items: center;
    gap: 12px;

    border: 1px solid #d6e5f5;
    border-radius: 13px;

    background: #fff;

    box-shadow:
        0 5px 18px rgba(22,76,133,.07);
}

.global-search i {
    color: var(--pd-blue);
    font-size: 18px;
}

.global-search input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;

    color: #314a69;
    font-size: 14px;
}

.global-search kbd {
    padding: 5px 8px;

    border: 1px solid #d8e5f2;
    border-radius: 7px;

    background: #f4f8fc;
    color: #57708f;

    font-family: inherit;
    font-size: 11px;
}


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

.timezone-widget {
    min-width: 235px;
    height: 52px;

    padding: 6px 12px;

    display: flex;
    align-items: center;
    gap: 10px;

    border: 1px solid #deebf7;
    border-radius: 13px;

    background: #fff;
}

.timezone-icon {
    font-size: 22px;
    color: var(--pd-blue);
}

.timezone-widget strong {
    display: block;
    font-size: 16px;
    color: #0c1e38;
}

.timezone-widget span {
    display: block;
    font-size: 9px;
    color: var(--pd-muted);
}

.timezone-widget small {
    padding-left: 10px;
    border-left: 1px solid #dce7f2;

    font-size: 9px;
    line-height: 1.25;
    color: #506985;
}


.top-icon {
    width: 42px;
    height: 42px;

    position: relative;

    display: grid;
    place-items: center;

    border: 1px solid #deebf7;
    border-radius: 50%;

    background: #fff;
    color: #112b49;

    text-decoration: none;
    cursor: pointer;

    font-size: 17px;

    box-shadow:
        0 4px 13px rgba(19,67,115,.06);
}

.top-icon:hover {
    color: var(--pd-blue);
}

.notification-dot {
    position: absolute;
    right: -2px;
    top: -4px;

    width: 17px;
    height: 17px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #ef2d2d;
    color: #fff;

    font-size: 8px;
    font-weight: 800;
}


.profile-zone {
    min-width: 210px;
    height: 52px;

    padding: 5px 8px;

    display: flex;
    align-items: center;
    gap: 9px;

    border: 1px solid #deebf7;
    border-radius: 14px;

    background: #fff;
}

.profile-avatar {
    width: 39px;
    height: 39px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #fff;
    font-weight: 800;

    background:
        linear-gradient(
            145deg,
            #087fff,
            #0749d6
        );

    box-shadow:
        0 5px 15px rgba(0,102,255,.25);
}

.profile-copy {
    flex: 1;
}

.profile-copy strong {
    display: block;
    font-size: 12px;
}

.profile-copy span {
    display: block;
    margin-top: 2px;
    font-size: 9px;
    color: var(--pd-muted);
}

.profile-zone form {
    margin: 0;
}

.profile-logout {
    width: 30px;
    height: 30px;

    border: 0;
    border-radius: 8px;

    background: #f1f6fc;
    color: #34506f;

    cursor: pointer;
}

.profile-logout:hover {
    background: #e5f0fc;
    color: #006cff;
}


/* PAGE AREA */

.enterprise-content {
    min-height: calc(100vh - 74px);
    padding: 18px;
}


/* Existing pages remain usable */

.enterprise-content table {
    width: 100%;
}

.enterprise-content button,
.enterprise-content .btn {
    border-radius: 8px;
}


/* RESPONSIVE */

@media (max-width: 1200px) {

    .timezone-widget {
        min-width: auto;
    }

    .timezone-widget small {
        display: none;
    }

    .profile-zone {
        min-width: auto;
    }

    .profile-copy {
        display: none;
    }
}

@media (max-width: 900px) {

    .enterprise-sidebar {
        width: 76px;
        min-width: 76px;
    }

    .brand-copy,
    .nav-item span:not(.nav-new),
    .sidebar-global strong,
    .sidebar-global small {
        display: none;
    }

    .brand-zone {
        justify-content: center;
        padding-left: 8px;
        padding-right: 8px;
    }

    .brand-mark {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }

    .nav-item {
        justify-content: center;
        padding: 0;
    }

    .nav-item i {
        font-size: 20px;
    }

    .nav-new {
        position: absolute;
        right: 2px;
        top: 3px;
        width: 8px;
        height: 8px;
        padding: 0;
        font-size: 0;
    }

    .sidebar-global {
        text-align: center;
        padding: 10px 0;
    }

    .global-orbit {
        font-size: 40px;
    }

    .enterprise-workspace {
        width: calc(100% - 76px);
        margin-left: 76px;
    }

    .timezone-widget,
    .top-icon {
        display: none;
    }

    .global-search {
        width: 100%;
    }
}


/* =========================================================
   PRADELL PREMIUM DASHBOARD V1
   ========================================================= */

.pd-dashboard {
    max-width: 1680px;
    margin: 0 auto;
}


/* ========================= HERO ========================= */

.pd-hero {
    position: relative;
    min-height: 310px;
    overflow: hidden;
    border-radius: 24px;
    padding: 42px 46px;
    color: #fff;

    background:
        radial-gradient(circle at 75% 25%, rgba(42,184,255,.30), transparent 22%),
        radial-gradient(circle at 90% 80%, rgba(0,102,255,.32), transparent 28%),
        linear-gradient(118deg, #031c3a 0%, #063e75 48%, #087ed7 100%);

    box-shadow:
        0 20px 50px rgba(8,52,98,.18),
        inset 0 1px rgba(255,255,255,.18);
}

.pd-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);

    background-size: 32px 32px;
}

.pd-hero-content {
    position: relative;
    z-index: 5;
    width: 53%;
}

.pd-eyebrow {
    display: inline-flex;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.11);
    border: 1px solid rgba(255,255,255,.18);
    color: #8edaff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.pd-hero h1 {
    margin: 15px 0 2px;
    font-size: clamp(31px, 3vw, 50px);
    line-height: 1.03;
    letter-spacing: -1.5px;
}

.pd-hero h1 span {
    color: #4fc7ff;
}

.pd-hero h2 {
    margin: 10px 0 0;
    font-size: 18px;
    color: #fff;
    letter-spacing: 1px;
}

.pd-hero p {
    margin: 10px 0 22px;
    color: #cfe9ff;
    font-size: 14px;
}

.pd-hero p b {
    color: #4fc7ff;
    margin: 0 6px;
}

.pd-hero-button {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding: 12px 20px;
    border-radius: 11px;
    text-decoration: none;
    color: #07203c;
    background: linear-gradient(135deg, #fff, #dff5ff);
    font-weight: 800;
    font-size: 13px;
    box-shadow: 0 10px 25px rgba(0,0,0,.18);
    transition: transform .2s ease, box-shadow .2s ease;
}

.pd-hero-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(0,0,0,.24);
}

.pd-hero-button span {
    font-size: 19px;
    color: #087cff;
}


/* HERO LOGISTICS SCENE */

.pd-hero-scene {
    position: absolute;
    z-index: 2;
    right: 0;
    top: 0;
    width: 52%;
    height: 100%;
}

.pd-sun {
    position: absolute;
    width: 180px;
    height: 180px;
    right: 110px;
    top: 42px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(93,204,255,.32), rgba(21,137,255,.04) 65%, transparent 70%);
}

.pd-city {
    position: absolute;
    bottom: 61px;
    right: 20px;
    height: 120px;
    display: flex;
    align-items: flex-end;
    gap: 7px;
    opacity: .42;
}

.pd-city span {
    width: 30px;
    display: block;
    border-radius: 5px 5px 0 0;
    border: 1px solid rgba(255,255,255,.3);
    background:
        repeating-linear-gradient(
            180deg,
            rgba(255,255,255,.22) 0 4px,
            transparent 4px 11px
        ),
        linear-gradient(#27b5ff, #06579b);
}

.pd-city span:nth-child(1) { height: 65px; }
.pd-city span:nth-child(2) { height: 95px; }
.pd-city span:nth-child(3) { height: 73px; }
.pd-city span:nth-child(4) { height: 118px; }
.pd-city span:nth-child(5) { height: 88px; }
.pd-city span:nth-child(6) { height: 105px; }
.pd-city span:nth-child(7) { height: 60px; }

.pd-plane {
    position: absolute;
    top: 45px;
    right: 70px;
    color: #fff;
    font-size: 55px;
    transform: rotate(-12deg);
    filter: drop-shadow(0 10px 10px rgba(0,0,0,.25));
    animation: pdPlaneFloat 5s ease-in-out infinite;
}

.pd-plane::after {
    content: "";
    position: absolute;
    right: 50px;
    top: 29px;
    width: 130px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.6));
}

.pd-ship {
    position: absolute;
    bottom: 28px;
    left: 40px;
    color: #e9f8ff;
    font-size: 105px;
    filter: drop-shadow(0 12px 12px rgba(0,0,0,.3));
    animation: pdShipFloat 4s ease-in-out infinite;
}

.ship-containers {
    position: absolute;
    bottom: 62px;
    left: 26px;
    display: flex;
    gap: 2px;
}

.ship-containers span {
    display: block;
    width: 22px;
    height: 15px;
    border-radius: 2px;
    background: #ffad32;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}

.ship-containers span:nth-child(2),
.ship-containers span:nth-child(5) {
    background: #24b8ff;
}

.ship-containers span:nth-child(3) {
    background: #ff5e59;
}

.pd-truck {
    position: absolute;
    right: 25px;
    bottom: 29px;
    font-size: 73px;
    color: #fff;
    filter: drop-shadow(0 12px 10px rgba(0,0,0,.3));
    animation: pdTruckFloat 3.5s ease-in-out infinite;
}

.pd-route {
    position: absolute;
    border: 1px dashed rgba(102,218,255,.42);
    border-radius: 50%;
}

.route-one {
    width: 340px;
    height: 170px;
    right: 10px;
    bottom: 20px;
    transform: rotate(-10deg);
}

.route-two {
    width: 250px;
    height: 120px;
    right: 180px;
    top: 25px;
    transform: rotate(17deg);
}

.pd-hero-tag {
    position: absolute;
    right: 35px;
    top: 122px;
    display: flex;
    flex-direction: column;
    text-align: right;
    color: rgba(255,255,255,.9);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 9px;
}

.pd-hero-dots {
    position: absolute;
    z-index: 8;
    left: 50%;
    bottom: 13px;
    display: flex;
    gap: 7px;
}

.pd-hero-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.4);
}

.pd-hero-dots span.active {
    width: 24px;
    border-radius: 8px;
    background: #fff;
}


/* ==================== SECTION HEADINGS ==================== */

.pd-section {
    margin-top: 24px;
}

.pd-section-heading,
.pd-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.pd-section-kicker,
.pd-panel-heading > div > span {
    display: block;
    color: #0782ed;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.pd-section-heading h2,
.pd-panel-heading h2 {
    margin: 4px 0 0;
    color: #102a48;
    font-size: 20px;
}


/* ================== TRANSPORT CAROUSEL ================== */

.transport-controls {
    display: flex;
    gap: 8px;
}

.transport-controls button {
    width: 38px;
    height: 38px;
    border: 1px solid #d7e7f7;
    border-radius: 10px;
    background: #fff;
    color: #0a72df;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(17,72,126,.08);
}

.transport-viewport {
    margin-top: 14px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
}

.transport-viewport::-webkit-scrollbar {
    display: none;
}

.transport-track {
    display: flex;
    gap: 18px;
    width: max-content;
    padding: 4px 4px 18px;
}

.transport-card {
    position: relative;
    width: 270px;
    height: 155px;
    flex: 0 0 270px;
    padding: 22px;
    overflow: hidden;
    scroll-snap-align: start;
    border-radius: 19px;
    color: #fff;
    transform-style: preserve-3d;
    box-shadow: 0 13px 28px rgba(17,64,108,.17);
    transition: transform .25s ease, box-shadow .25s ease;
}

.transport-card:hover {
    transform: translateY(-6px) perspective(700px) rotateX(2deg);
    box-shadow: 0 20px 35px rgba(17,64,108,.24);
}

.transport-card::before {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    right: -50px;
    top: -50px;
    background: rgba(255,255,255,.12);
}

.transport-card.sea {
    background: linear-gradient(135deg, #0061a8, #00a6db);
}

.transport-card.land {
    background: linear-gradient(135deg, #087346, #1ebd78);
}

.transport-card.air {
    background: linear-gradient(135deg, #3840a8, #8069e8);
}

.transport-card.rail {
    background: linear-gradient(135deg, #bd611c, #f1a336);
}

.transport-card.warehouse {
    background: linear-gradient(135deg, #283c58, #607895);
}

.transport-icon {
    position: absolute;
    right: 18px;
    bottom: 7px;
    font-size: 72px;
    opacity: .22;
    transform: rotate(-5deg);
}

.transport-card > span {
    font-size: 8px;
    letter-spacing: 1.5px;
    font-weight: 800;
    opacity: .8;
}

.transport-card h3 {
    margin: 7px 0 2px;
    font-size: 27px;
}

.transport-card p {
    margin: 0;
    font-size: 12px;
    opacity: .9;
}

.transport-line {
    width: 45px;
    height: 3px;
    margin-top: 14px;
    border-radius: 5px;
    background: rgba(255,255,255,.8);
}


/* ======================== KPI ======================== */

.pd-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 16px;
    margin-top: 7px;
}

.pd-kpi {
    position: relative;
    min-height: 130px;
    overflow: hidden;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: #fff;
    text-decoration: none;
    border-radius: 19px;
    box-shadow: 0 12px 28px rgba(18,69,120,.16);
    transition: transform .2s ease;
}

.pd-kpi:hover {
    transform: translateY(-4px);
}

.kpi-blue {
    background: linear-gradient(135deg,#087cff,#22b8f4);
}

.kpi-green {
    background: linear-gradient(135deg,#0b9a64,#31c986);
}

.kpi-orange {
    background: linear-gradient(135deg,#ff8728,#f6b33e);
}

.kpi-purple {
    background: linear-gradient(135deg,#6550d8,#9a67e8);
}

.kpi-icon {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.22);
    font-size: 23px;
    backdrop-filter: blur(8px);
}

.pd-kpi span {
    display: block;
    font-size: 11px;
    font-weight: 700;
    opacity: .9;
}

.pd-kpi strong {
    display: block;
    margin: 2px 0;
    font-size: 34px;
    line-height: 1;
}

.pd-kpi small {
    font-size: 9px;
    opacity: .75;
}

.kpi-watermark {
    position: absolute;
    right: -9px;
    bottom: -12px;
    font-size: 82px;
    opacity: .08;
}


/* ===================== PANELS ===================== */

.pd-analytics-grid {
    display: grid;
    grid-template-columns: 1.15fr .9fr .95fr;
    gap: 16px;
    margin-top: 18px;
}

.pd-panel {
    border: 1px solid #dce9f5;
    border-radius: 19px;
    background: rgba(255,255,255,.96);
    padding: 20px;
    box-shadow: 0 9px 25px rgba(24,74,123,.07);
}

.pd-panel-heading > i {
    font-size: 25px;
    color: #0c82ee;
}

.pd-panel-heading a {
    color: #087cf0;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}


/* GLOBAL */

.global-visual {
    position: relative;
    height: 175px;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.global-earth {
    position: relative;
    z-index: 4;
    font-size: 100px;
    line-height: 1;
    color: #0b82e9;
    filter: drop-shadow(0 12px 17px rgba(4,111,213,.22));
    animation: pdEarth 8s ease-in-out infinite;
}

.global-ring {
    position: absolute;
    border: 1px dashed rgba(7,127,239,.25);
    border-radius: 50%;
}

.ring-a {
    width: 240px;
    height: 100px;
    transform: rotate(15deg);
}

.ring-b {
    width: 270px;
    height: 115px;
    transform: rotate(-17deg);
}

.ring-c {
    width: 180px;
    height: 150px;
    transform: rotate(70deg);
}

.global-node {
    position: absolute;
    z-index: 6;
    width: 9px;
    height: 9px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #18c77c;
    box-shadow: 0 0 12px rgba(18,196,121,.8);
}

.n1 { top: 40px; left: 23%; }
.n2 { top: 60px; right: 23%; }
.n3 { bottom: 37px; left: 31%; }
.n4 { bottom: 50px; right: 28%; }

.global-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
}

.global-stats div {
    padding: 10px;
    text-align: center;
    border-radius: 11px;
    background: #f4f9fe;
}

.global-stats strong {
    display: block;
    color: #087cf0;
    font-size: 20px;
}

.global-stats span {
    color: #74869c;
    font-size: 9px;
}


/* DONUT */

.donut-wrap {
    min-height: 215px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
}

.pd-donut {
    width: 145px;
    height: 145px;
    flex: 0 0 145px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(#e8f0f7 0 100%);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.03);
}

.donut-center {
    width: 93px;
    height: 93px;
    display: grid;
    align-content: center;
    text-align: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 5px 16px rgba(12,65,116,.1);
}

.donut-center strong {
    font-size: 25px;
    color: #112b48;
}

.donut-center span {
    color: #7a8b9e;
    font-size: 9px;
}

.chart-legend {
    min-width: 115px;
}

.chart-legend > div {
    display: grid;
    grid-template-columns: 9px 1fr auto;
    align-items: center;
    gap: 7px;
    margin: 8px 0;
    color: #60758d;
    font-size: 10px;
}

.chart-legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.chart-legend strong {
    color: #193450;
}


/* INDUSTRY */

.industry-chart {
    padding-top: 15px;
}

.industry-row {
    margin: 13px 0;
}

.industry-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    color: #536b84;
    font-size: 10px;
}

.industry-label strong {
    color: #153552;
}

.industry-bar {
    height: 8px;
    overflow: hidden;
    border-radius: 10px;
    background: #eaf1f8;
}

.industry-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,#087cf0,#28c1ef);
    box-shadow: 0 0 10px rgba(8,124,240,.22);
}


/* ================== PIPELINE ================== */

.pipeline-panel {
    margin-top: 18px;
}

.pipeline-live {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #15a968;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
}

.pipeline-live span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #17c477;
    box-shadow: 0 0 0 5px rgba(23,196,119,.12);
}

.pipeline-flow {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 10px;
}

.pipeline-flow > div {
    min-height: 110px;
    padding: 15px 10px;
    text-align: center;
    border: 1px solid #dfeaf5;
    border-radius: 14px;
    background: linear-gradient(180deg,#fff,#f5faff);
}

.pipeline-flow > div i {
    display: block;
    margin-bottom: 9px;
    color: #087cf0;
    font-size: 25px;
}

.pipeline-flow strong {
    display: block;
    color: #173451;
    font-size: 12px;
}

.pipeline-flow span {
    display: block;
    margin-top: 3px;
    color: #8291a2;
    font-size: 9px;
}

.pipeline-flow > b {
    color: #7baee0;
    font-size: 20px;
}


/* ================= RECENT TABLES ================= */

.pd-recent-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 16px;
    margin-top: 18px;
}

.recent-panel {
    min-width: 0;
}

.pd-table-wrap {
    overflow-x: auto;
    margin-top: 14px;
}

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

.pd-table th {
    padding: 9px 7px;
    border-bottom: 1px solid #e1eaf3;
    color: #7b8ca0;
    text-align: left;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.pd-table td {
    padding: 11px 7px;
    border-bottom: 1px solid #edf2f7;
    color: #5a7088;
    font-size: 9px;
}

.pd-table td strong {
    color: #183651;
}

.lead-status {
    display: inline-flex;
    padding: 4px 7px;
    border-radius: 999px;
    background: #e9f4ff;
    color: #0876dd;
    font-size: 8px;
    font-weight: 800;
}


/* ================= FOOTER ================= */

.pd-footer {
    margin-top: 18px;
    padding: 18px 5px 6px;
    display: flex;
    justify-content: space-between;
    gap: 15px;
    color: #7a8da2;
    font-size: 9px;
}

.pd-footer span {
    margin: 0 5px;
    color: #b3c2d1;
}

.pd-footer strong {
    color: #087cf0;
}


/* ================= ANIMATIONS ================= */

@keyframes pdPlaneFloat {
    0%,100% {
        transform: translate(0,0) rotate(-12deg);
    }
    50% {
        transform: translate(-16px,-9px) rotate(-10deg);
    }
}

@keyframes pdShipFloat {
    0%,100% {
        transform: translateY(0) rotate(0);
    }
    50% {
        transform: translateY(-5px) rotate(-1deg);
    }
}

@keyframes pdTruckFloat {
    0%,100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-10px);
    }
}

@keyframes pdEarth {
    0%,100% {
        transform: translateY(0) rotate(-2deg);
    }
    50% {
        transform: translateY(-5px) rotate(2deg);
    }
}


/* ================= RESPONSIVE ================= */

@media (max-width: 1250px) {

    .pd-analytics-grid {
        grid-template-columns: 1fr 1fr;
    }

    .global-panel {
        grid-column: span 2;
    }

    .pd-recent-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1050px) {

    .pd-kpi-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .pd-hero-content {
        width: 65%;
    }

    .pd-hero-scene {
        opacity: .55;
    }
}

@media (max-width: 760px) {

    .pd-hero {
        min-height: 360px;
        padding: 30px 24px;
    }

    .pd-hero-content {
        width: 100%;
    }

    .pd-hero-scene {
        width: 100%;
        opacity: .22;
    }

    .pd-kpi-grid,
    .pd-analytics-grid {
        grid-template-columns: 1fr;
    }

    .global-panel {
        grid-column: auto;
    }

    .pipeline-flow {
        display: flex;
        overflow-x: auto;
    }

    .pipeline-flow > div {
        min-width: 150px;
    }

    .pd-footer {
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {

    .pd-plane,
    .pd-ship,
    .pd-truck,
    .global-earth {
        animation: none !important;
    }

    * {
        scroll-behavior: auto !important;
    }
}


/* =========================================================
   GLOBAL LIVE SEARCH
   ========================================================= */

.global-search {
    position: relative;
}

.global-search-results {
    position: absolute;
    z-index: 5000;

    left: 0;
    right: 0;
    top: calc(100% + 9px);

    max-height: 430px;
    overflow-y: auto;

    padding: 7px;

    border: 1px solid #d9e7f5;
    border-radius: 15px;

    background: rgba(255,255,255,.98);

    box-shadow:
        0 20px 50px rgba(15,54,94,.20);

    backdrop-filter: blur(15px);
}

.global-search-results[hidden] {
    display: none !important;
}

.global-search-result {
    min-height: 62px;

    display: grid;
    grid-template-columns: 40px minmax(0,1fr) auto 14px;
    align-items: center;
    gap: 10px;

    padding: 8px 10px;

    border-radius: 11px;

    color: #173550;
    text-decoration: none;

    transition:
        background .15s ease,
        transform .15s ease;
}

.global-search-result:hover {
    background: #eef7ff;
    transform: translateX(2px);
}

.search-result-icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    color: #087cf0;
    background: #e7f3ff;
}

.search-result-copy {
    min-width: 0;
}

.search-result-copy strong {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: #173550;
    font-size: 12px;
}

.search-result-copy small {
    display: block;

    margin-top: 3px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: #778ba0;
    font-size: 9px;
}

.search-result-type {
    padding: 4px 7px;

    border-radius: 999px;

    color: #0872dc;
    background: #edf6ff;

    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.search-result-arrow {
    color: #9ab0c5;
    font-size: 9px;
}

.global-search-state,
.global-search-empty {
    min-height: 75px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;

    color: #748ba2;
    text-align: center;
    font-size: 10px;
}

.global-search-state i,
.global-search-empty i {
    color: #087cf0;
    font-size: 19px;
}

.global-search-empty strong {
    color: #274762;
    font-size: 11px;
}

.global-search-empty span {
    font-size: 9px;
}


/* =========================================================
   AI RESEARCH NAVIGATION
   ========================================================= */

.ai-research-nav {
    position: relative;
}

.ai-research-nav i {
    color: #55d5ff;
}

.ai-research-nav.active i {
    color: #fff;
}

.ai-nav-badge {
    margin-left: auto;
    min-width: 25px;
    padding: 3px 7px;

    text-align: center;

    border-radius: 999px;

    background: linear-gradient(135deg,#28d6ff,#087cff);
    color: #fff;

    font-size: 8px;
    font-weight: 900;

    box-shadow: 0 0 12px rgba(34,193,255,.45);
}

.ai-research-nav.active .ai-nav-badge {
    background: #fff;
    color: #087cf0;
}


/* =========================================================
   PRADELL AI RESEARCH COMMAND CENTER
   ========================================================= */

.research-command {
    max-width: 1680px;
    margin: 0 auto;
}


/* HERO */

.research-hero {
    position: relative;
    min-height: 235px;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    padding: 32px 38px;

    border-radius: 22px;

    color: #fff;

    background:
        radial-gradient(circle at 83% 35%,
            rgba(44,198,255,.30),
            transparent 22%),
        radial-gradient(circle at 95% 90%,
            rgba(20,104,255,.35),
            transparent 30%),
        linear-gradient(120deg,
            #031b37 0%,
            #06467f 55%,
            #0788df 100%);

    box-shadow:
        0 18px 42px rgba(7,53,99,.17);
}

.research-hero::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px);

    background-size: 30px 30px;
    pointer-events: none;
}

.research-hero-copy {
    position: relative;
    z-index: 3;
    max-width: 760px;
}

.research-ai-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 6px 10px;

    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;

    background: rgba(255,255,255,.08);

    color: #8bdcff;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.4px;
}

.research-ai-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #38e69a;

    box-shadow:
        0 0 0 5px rgba(56,230,154,.10),
        0 0 13px rgba(56,230,154,.8);
}

.research-hero h1 {
    margin: 14px 0 7px;

    color: #fff;

    font-size: clamp(30px,3vw,44px);
    line-height: 1.04;
    letter-spacing: -1.2px;
}

.research-hero h1 span {
    color: #48caff;
}

.research-hero-copy > p {
    max-width: 680px;

    margin: 0;

    color: #d1eaff;

    font-size: 13px;
    line-height: 1.6;
}

.research-flow-mini {
    margin-top: 22px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.research-flow-mini span {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 7px 10px;

    border-radius: 8px;

    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.12);

    color: #fff;

    font-size: 9px;
    font-weight: 700;
}

.research-flow-mini span i {
    color: #5bd6ff;
}

.research-flow-mini b {
    color: #64d2ff;
}


/* HERO AI CORE */

.research-hero-action {
    position: relative;
    z-index: 3;

    min-width: 320px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.research-brain {
    position: relative;

    width: 120px;
    height: 105px;

    display: grid;
    place-items: center;
}

.research-brain-core {
    position: relative;
    z-index: 5;

    width: 72px;
    height: 72px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #fff;

    font-size: 27px;

    background:
        linear-gradient(145deg,#1bd0ff,#0872f0);

    border: 1px solid rgba(255,255,255,.35);

    box-shadow:
        0 0 30px rgba(28,194,255,.55),
        inset 0 0 20px rgba(255,255,255,.15);
}

.research-brain-ring {
    position: absolute;

    border-radius: 50%;

    border: 1px dashed rgba(122,221,255,.45);
}

.research-brain-ring.ring1 {
    width: 105px;
    height: 60px;
    transform: rotate(18deg);
}

.research-brain-ring.ring2 {
    width: 112px;
    height: 55px;
    transform: rotate(-28deg);
}

.research-pulse {
    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #42edac;

    box-shadow: 0 0 10px #42edac;
}

.research-pulse.p1 {
    left: 8px;
    top: 31px;
}

.research-pulse.p2 {
    right: 7px;
    top: 55px;
}

.research-pulse.p3 {
    left: 46px;
    bottom: 0;
}

.research-new-btn {
    width: 270px;

    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 10px;

    padding: 11px 13px;

    border-radius: 13px;

    color: #0c3156;
    background: #fff;

    text-decoration: none;

    box-shadow:
        0 12px 28px rgba(0,0,0,.17);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.research-new-btn:hover {
    transform: translateY(-3px);

    box-shadow:
        0 17px 35px rgba(0,0,0,.23);
}

.research-new-btn > i:first-child {
    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    color: #fff;
    background: #087cf0;
}

.research-new-btn strong {
    display: block;
    font-size: 11px;
}

.research-new-btn small {
    display: block;

    margin-top: 2px;

    color: #788ca1;
    font-size: 8px;
}

.research-new-btn > i:last-child {
    color: #087cf0;
}


/* ALERTS */

.research-alert {
    margin-top: 14px;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 13px 16px;

    border-radius: 13px;

    font-size: 10px;
}

.research-alert > i {
    font-size: 20px;
}

.research-alert strong,
.research-alert span {
    display: block;
}

.research-alert span {
    margin-top: 2px;
}

.research-alert.success {
    color: #087247;
    background: #e9fbf3;
    border: 1px solid #c8f0df;
}

.research-alert.error {
    color: #a53636;
    background: #fff0f0;
    border: 1px solid #ffd5d5;
}


/* KPI */

.research-kpis {
    margin-top: 16px;

    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 14px;
}

.research-kpi {
    min-height: 105px;

    display: flex;
    align-items: center;
    gap: 13px;

    padding: 17px;

    border-radius: 17px;

    color: #fff;

    box-shadow:
        0 10px 24px rgba(14,62,110,.13);
}

.rk-blue {
    background: linear-gradient(135deg,#087cf0,#28b9ee);
}

.rk-orange {
    background: linear-gradient(135deg,#f47c23,#ffb13b);
}

.rk-purple {
    background: linear-gradient(135deg,#6253d8,#9468e9);
}

.rk-green {
    background: linear-gradient(135deg,#0a9a62,#27c881);
}

.rk-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.20);

    font-size: 20px;
}

.research-kpi span {
    display: block;

    font-size: 9px;
    font-weight: 700;
}

.research-kpi strong {
    display: block;

    margin: 1px 0;

    font-size: 28px;
    line-height: 1.05;
}

.research-kpi small {
    font-size: 8px;
    opacity: .78;
}


/* JOB PANEL */

.research-jobs-panel {
    margin-top: 16px;

    overflow: hidden;

    border: 1px solid #dbe8f4;
    border-radius: 19px;

    background: #fff;

    box-shadow:
        0 9px 25px rgba(18,68,116,.07);
}

.research-panel-head {
    padding: 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    border-bottom: 1px solid #e4edf6;
}

.research-panel-head > div:first-child > span {
    color: #087cf0;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.3px;
}

.research-panel-head h2 {
    margin: 4px 0 3px;

    color: #102c4b;

    font-size: 20px;
}

.research-panel-head p {
    margin: 0;

    color: #788ba0;

    font-size: 10px;
}

.research-panel-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.research-job-search {
    width: 240px;
    height: 40px;

    padding: 0 11px;

    display: flex;
    align-items: center;
    gap: 8px;

    border: 1px solid #dbe7f3;
    border-radius: 10px;

    background: #f8fbfe;
}

.research-job-search i {
    color: #087cf0;
}

.research-job-search input {
    width: 100%;

    border: 0;
    outline: 0;

    background: transparent;

    color: #24425e;

    font-size: 10px;
}

.research-create-small {
    height: 40px;

    padding: 0 14px;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    border-radius: 10px;

    color: #fff;
    background: linear-gradient(135deg,#087cf0,#079fe7);

    text-decoration: none;

    font-size: 10px;
    font-weight: 800;

    box-shadow:
        0 7px 17px rgba(8,124,240,.20);
}


/* TABLE */

.research-table-wrap {
    overflow-x: auto;
}

.research-table {
    width: 100%;

    border-collapse: collapse;
}

.research-table th {
    padding: 11px 15px;

    text-align: left;

    color: #8191a4;
    background: #f6f9fc;

    border-bottom: 1px solid #e3ecf5;

    font-size: 8px;
    letter-spacing: .5px;
}

.research-table td {
    padding: 15px;

    border-bottom: 1px solid #edf2f7;

    vertical-align: middle;

    color: #49637d;

    font-size: 10px;
}

.research-table tbody tr {
    transition: background .15s ease;
}

.research-table tbody tr:hover {
    background: #f8fbff;
}

.research-job-name {
    min-width: 250px;

    display: flex;
    align-items: center;
    gap: 10px;
}

.research-job-number {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    color: #087cf0;
    background: #eaf5ff;

    font-weight: 900;
}

.research-job-name strong {
    display: block;

    color: #153451;

    font-size: 11px;
}

.research-job-name span {
    display: block;

    margin-top: 3px;

    color: #8a9aad;

    font-size: 8px;
}

.research-target {
    min-width: 120px;

    display: flex;
    align-items: center;
    gap: 7px;
}

.research-target i {
    color: #1688ed;
}


/* STATUS */

.research-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 5px 9px;

    border-radius: 999px;

    font-size: 8px;
    font-weight: 800;
}

.research-status > i {
    font-size: 6px;
}

.status-review {
    color: #9a6500;
    background: #fff4d8;
}

.status-review > i {
    color: #f3a800;
}

.status-completed {
    color: #08734a;
    background: #e2f9ee;
}

.status-completed > i {
    color: #17bd76;
}

.status-running {
    color: #096ec8;
    background: #e5f3ff;
}

.status-running > i {
    color: #087cf0;
}

.status-failed {
    color: #b13c3c;
    background: #ffebeb;
}

.status-failed > i {
    color: #e74b4b;
}

.status-pending {
    color: #65788d;
    background: #edf2f6;
}

.research-created strong {
    display: block;

    color: #36536d;

    font-size: 9px;
}

.research-created span {
    display: block;

    margin-top: 2px;

    color: #8a9bad;

    font-size: 8px;
}


/* ACTIONS */

.research-actions {
    min-width: 190px;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.research-run-form {
    margin: 0;
}

.research-review-btn,
.research-run-btn {
    height: 34px;

    padding: 0 11px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    border-radius: 9px;

    font-size: 9px;
    font-weight: 800;

    cursor: pointer;
}

.research-review-btn {
    color: #0874dd;

    background: #eef7ff;

    border: 1px solid #cee5fa;

    text-decoration: none;
}

.research-run-btn {
    color: #fff;

    background: linear-gradient(135deg,#0b9b63,#20c47c);

    border: 0;

    box-shadow:
        0 6px 14px rgba(19,178,111,.18);
}

.research-run-btn:disabled {
    opacity: .65;
    cursor: wait;
}


/* EMPTY */

.research-empty {
    padding: 55px 20px;

    text-align: center;
}

.research-empty-icon {
    width: 65px;
    height: 65px;

    margin: 0 auto 12px;

    display: grid;
    place-items: center;

    border-radius: 18px;

    color: #087cf0;
    background: #eaf5ff;

    font-size: 26px;
}

.research-empty h3 {
    margin: 0;

    color: #183751;
}

.research-empty p {
    color: #7f91a5;

    font-size: 10px;
}

.research-empty a {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 10px 14px;

    border-radius: 9px;

    color: #fff;
    background: #087cf0;

    text-decoration: none;

    font-size: 10px;
    font-weight: 800;
}


/* SAFE MODE */

.research-safety {
    margin-top: 16px;

    display: flex;
    align-items: center;
    gap: 13px;

    padding: 15px 18px;

    border: 1px solid #cfeee0;
    border-radius: 15px;

    background:
        linear-gradient(90deg,#edfbf5,#f8fffc);

    box-shadow:
        0 7px 18px rgba(18,120,78,.05);
}

.research-safety-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    color: #fff;
    background: #13aa6c;

    font-size: 19px;
}

.research-safety > div:nth-child(2) {
    flex: 1;
}

.research-safety > div:nth-child(2) > span {
    display: block;

    color: #0a9b62;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
}

.research-safety strong {
    display: block;

    margin-top: 2px;

    color: #174b39;

    font-size: 11px;
}

.research-safety p {
    margin: 2px 0 0;

    color: #6f8d81;

    font-size: 9px;
}

.research-safe-state {
    display: flex;
    align-items: center;
    gap: 7px;

    color: #07995e;

    font-size: 9px;
    font-weight: 900;
}

.research-safe-state span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #17c779;

    box-shadow:
        0 0 0 5px rgba(23,199,121,.12);
}


/* RESPONSIVE */

@media (max-width: 1050px) {

    .research-kpis {
        grid-template-columns: repeat(2,1fr);
    }

    .research-hero-action {
        min-width: 260px;
    }

    .research-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 760px) {

    .research-hero {
        flex-direction: column;
        align-items: flex-start;

        padding: 25px;
    }

    .research-hero-action {
        width: 100%;
        min-width: 0;
    }

    .research-kpis {
        grid-template-columns: 1fr;
    }

    .research-panel-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .research-job-search {
        width: 100%;
    }

    .research-create-small {
        justify-content: center;
    }

    .research-safety {
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .research-brain-core,
    .research-pulse {
        animation: none !important;
    }
}


/* =========================================================
   HOME - AI RESEARCH COMMAND CENTER
   ========================================================= */

.home-ai-center {
    position: relative;
    min-height: 330px;
    margin-top: 20px;
    overflow: hidden;

    display: grid;
    grid-template-columns: 1.12fr .88fr;
    align-items: center;
    gap: 30px;

    padding: 35px 40px;

    border-radius: 23px;

    background:
        radial-gradient(circle at 82% 45%,
            rgba(30,196,255,.24),
            transparent 23%),
        radial-gradient(circle at 95% 95%,
            rgba(31,97,255,.26),
            transparent 30%),
        linear-gradient(120deg,
            #031a35 0%,
            #073d70 55%,
            #087dcc 100%);

    box-shadow:
        0 18px 42px rgba(8,55,101,.18),
        inset 0 1px rgba(255,255,255,.12);

    color: #fff;
}

.home-ai-center::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px);

    background-size: 32px 32px;

    pointer-events: none;
}

.home-ai-main {
    position: relative;
    z-index: 5;
}

.home-ai-badge {
    width: fit-content;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 7px 11px;

    border: 1px solid rgba(255,255,255,.17);
    border-radius: 999px;

    background: rgba(255,255,255,.08);

    color: #72d8ff;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.4px;
}

.home-ai-badge > span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #35e89a;

    box-shadow:
        0 0 0 5px rgba(53,232,154,.10),
        0 0 13px rgba(53,232,154,.85);
}

.home-ai-main h2 {
    max-width: 700px;

    margin: 15px 0 9px;

    color: #fff;

    font-size: clamp(28px,3vw,43px);
    line-height: 1.07;
    letter-spacing: -1.2px;
}

.home-ai-main h2 span {
    display: block;

    background:
        linear-gradient(90deg,#4fd2ff,#86e5ff);

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

.home-ai-main > p {
    max-width: 650px;

    margin: 0;

    color: #cde7fa;

    font-size: 12px;
    line-height: 1.65;
}

.home-ai-flow {
    margin-top: 22px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.home-ai-flow > div {
    min-width: 90px;

    padding: 10px 12px;

    display: flex;
    align-items: center;
    gap: 7px;

    border: 1px solid rgba(255,255,255,.13);
    border-radius: 10px;

    background: rgba(255,255,255,.075);

    backdrop-filter: blur(7px);

    font-size: 9px;
    font-weight: 800;
}

.home-ai-flow > div i {
    color: #54d5ff;

    font-size: 14px;
}

.home-ai-flow > b {
    color: #65d7ff;

    font-size: 17px;
}

.home-ai-actions {
    margin-top: 22px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.home-ai-primary,
.home-ai-secondary {
    min-height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 0 16px;

    border-radius: 10px;

    text-decoration: none;

    font-size: 10px;
    font-weight: 900;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.home-ai-primary {
    color: #08325a;

    background:
        linear-gradient(135deg,#ffffff,#dff5ff);

    box-shadow:
        0 10px 22px rgba(0,0,0,.17);
}

.home-ai-primary:hover {
    transform: translateY(-2px);

    box-shadow:
        0 14px 28px rgba(0,0,0,.22);
}

.home-ai-secondary {
    color: #fff;

    border: 1px solid rgba(255,255,255,.25);

    background: rgba(255,255,255,.08);
}

.home-ai-secondary:hover {
    color: #fff;

    background: rgba(255,255,255,.14);
}


/* =========================================================
   AI VISUAL
   ========================================================= */

.home-ai-visual {
    position: relative;
    z-index: 4;

    min-height: 260px;

    display: grid;
    place-items: center;
}

.ai-core {
    position: relative;
    z-index: 10;

    width: 125px;
    height: 125px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        radial-gradient(circle at 35% 28%,
            #67e1ff,
            #0989f2 40%,
            #06488f 100%);

    border: 1px solid rgba(255,255,255,.35);

    box-shadow:
        0 0 0 10px rgba(43,193,255,.06),
        0 0 42px rgba(34,192,255,.50),
        inset 0 0 25px rgba(255,255,255,.18);

    animation:
        pradellAiFloat 4s ease-in-out infinite;
}

.ai-core > i {
    margin-bottom: 5px;

    color: #fff;

    font-size: 31px;

    filter:
        drop-shadow(0 4px 6px rgba(0,0,0,.20));
}

.ai-core > span {
    color: #fff;

    text-align: center;

    font-size: 19px;
    font-weight: 950;
    line-height: .95;
}

.ai-core small {
    display: block;

    margin-top: 4px;

    color: #bcecff;

    font-size: 7px;
    letter-spacing: 1.3px;
}

.ai-orbit {
    position: absolute;

    border-radius: 50%;

    border: 1px dashed rgba(116,221,255,.34);

    pointer-events: none;
}

.orbit-one {
    width: 300px;
    height: 130px;

    transform: rotate(14deg);
}

.orbit-two {
    width: 315px;
    height: 125px;

    transform: rotate(-22deg);
}

.orbit-three {
    width: 205px;
    height: 220px;

    transform: rotate(67deg);
}

.ai-node {
    position: absolute;
    z-index: 12;

    min-width: 118px;

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 9px 11px;

    border: 1px solid rgba(255,255,255,.20);
    border-radius: 11px;

    background:
        rgba(3,35,68,.70);

    box-shadow:
        0 10px 24px rgba(0,0,0,.16);

    backdrop-filter: blur(10px);

    color: #fff;
}

.ai-node > i {
    width: 29px;
    height: 29px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    color: #68ddff;

    background: rgba(57,199,255,.12);
}

.ai-node span {
    color: #bcdcf3;

    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.ai-node strong {
    display: block;

    color: #fff;

    font-size: 15px;
    line-height: 1;
}

.node-company {
    left: 1%;
    top: 35px;
}

.node-contact {
    right: 0;
    top: 50px;
}

.node-lead {
    right: 7%;
    bottom: 31px;
}

.ai-safe {
    position: absolute;
    left: 5%;
    bottom: 38px;
    z-index: 12;

    display: flex;
    align-items: center;
    gap: 7px;

    padding: 7px 10px;

    border-radius: 999px;

    color: #73f0bb;

    background: rgba(5,54,56,.64);

    border: 1px solid rgba(77,230,166,.24);

    font-size: 7px;
    font-weight: 900;
    letter-spacing: .7px;
}


/* Decorative AI connection dots */

.home-ai-visual::before,
.home-ai-visual::after {
    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #51ddff;

    box-shadow:
        0 0 14px rgba(81,221,255,.9);
}

.home-ai-visual::before {
    top: 18%;
    left: 32%;
}

.home-ai-visual::after {
    right: 26%;
    bottom: 16%;
}


/* =========================================================
   ANIMATION
   ========================================================= */

@keyframes pradellAiFloat {
    0%,100% {
        transform: translateY(0) scale(1);
    }

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


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

    .home-ai-center {
        grid-template-columns: 1fr;
    }

    .home-ai-visual {
        min-height: 280px;
    }
}

@media (max-width: 700px) {

    .home-ai-center {
        padding: 25px 20px;
    }

    .home-ai-flow > b {
        display: none;
    }

    .home-ai-visual {
        transform: scale(.88);
    }
}

@media (prefers-reduced-motion: reduce) {

    .ai-core {
        animation: none !important;
    }
}


/* =========================================================
   PRADELL DASHBOARD - CINEMATIC HERO V2
   ========================================================= */

.pd-hero {
    position: relative !important;
    min-height: 285px !important;
    overflow: hidden !important;
    isolation: isolate;

    background:
        radial-gradient(circle at 78% 40%,
            rgba(24,190,255,.32),
            transparent 24%),
        radial-gradient(circle at 92% 95%,
            rgba(0,102,255,.32),
            transparent 32%),
        linear-gradient(110deg,
            #02152c 0%,
            #052f59 43%,
            #056cae 72%,
            #0799df 100%) !important;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px !important;

    box-shadow:
        0 18px 45px rgba(3,40,78,.18),
        inset 0 1px 0 rgba(255,255,255,.12) !important;
}

/* subtle enterprise grid */

.pd-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;

    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);

    background-size: 36px 36px;

    mask-image:
        linear-gradient(to right,
            rgba(0,0,0,.85),
            rgba(0,0,0,.25));
}

/* glowing world / logistics atmosphere */

.pd-hero::after {
    content: "";
    position: absolute;

    width: 500px;
    height: 500px;

    right: -120px;
    top: -190px;

    z-index: -2;

    border-radius: 50%;

    border: 1px solid rgba(105,220,255,.16);

    background:
        repeating-radial-gradient(
            circle,
            transparent 0 28px,
            rgba(99,218,255,.055) 29px 30px
        );

    box-shadow:
        0 0 90px rgba(23,179,255,.18);
}


/* Hero copy */

.pd-hero h1 {
    font-size: clamp(32px,3.5vw,52px) !important;
    line-height: 1.02 !important;
    letter-spacing: -1.8px !important;

    text-shadow:
        0 8px 25px rgba(0,0,0,.20);
}

.pd-hero h1 span {
    background:
        linear-gradient(90deg,#56d7ff,#7de9ff);

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent !important;
}

.pd-hero p {
    color: #d8efff !important;
}


/* Existing hero logistics scene becomes more premium */

.pd-hero-scene {
    opacity: .96;
    filter:
        drop-shadow(0 18px 24px rgba(0,0,0,.20));
}


/* Ship */

.pd-hero .hero-ship,
.pd-hero .pd-ship {
    filter:
        drop-shadow(0 14px 15px rgba(0,0,0,.25));
}


/* Plane animation */

.pd-hero .hero-plane,
.pd-hero .pd-plane {
    filter:
        drop-shadow(0 12px 9px rgba(0,0,0,.20));

    animation:
        pradellPlaneFloat 5s ease-in-out infinite;
}


/* Truck */

.pd-hero .hero-truck,
.pd-hero .pd-truck {
    filter:
        drop-shadow(0 12px 10px rgba(0,0,0,.25));

    animation:
        pradellTruckFloat 4.5s ease-in-out infinite;
}


/* Premium CTA */

.pd-hero a,
.pd-hero .btn {
    transition:
        transform .2s ease,
        box-shadow .2s ease !important;
}

.pd-hero a:hover,
.pd-hero .btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 14px 30px rgba(0,0,0,.22) !important;
}


/* decorative light sweep */

.pd-hero .pd-hero-content::after {
    content: "";

    position: absolute;

    width: 170px;
    height: 1px;

    left: 0;
    bottom: -18px;

    background:
        linear-gradient(
            90deg,
            #52d7ff,
            rgba(82,215,255,0)
        );
}


/* animations */

@keyframes pradellPlaneFloat {

    0%,100% {
        transform: translate(0,0) rotate(-4deg);
    }

    50% {
        transform: translate(-9px,-7px) rotate(-2deg);
    }
}

@keyframes pradellTruckFloat {

    0%,100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-5px);
    }
}


/* Responsive */

@media (max-width: 900px) {

    .pd-hero {
        min-height: 310px !important;
    }

    .pd-hero::after {
        opacity: .55;
    }
}


/* Accessibility */

@media (prefers-reduced-motion: reduce) {

    .pd-hero .hero-plane,
    .pd-hero .pd-plane,
    .pd-hero .hero-truck,
    .pd-hero .pd-truck {
        animation: none !important;
    }
}


/* =========================================================
   DASHBOARD ABOVE-THE-FOLD FINAL SPACING
   ========================================================= */

.pd-dashboard {
    padding-top: 18px !important;
}

.pd-hero {
    min-height: 315px !important;
}

.pd-hero-content {
    padding-top: 4px;
}

.pd-hero h1 {
    margin-bottom: 10px !important;
}

.pd-hero-button {
    margin-top: 18px !important;
}

.pd-capabilities,
.pd-transport-section {
    margin-top: 14px !important;
}

.home-ai-center {
    margin-top: 14px !important;
}

/* Keep desktop dashboard dense but premium */
@media (min-width: 1200px) {
    .pd-hero {
        min-height: 315px !important;
    }
}


/* =========================================================
   PRADELL HERO LOGISTICS SCENE V3
   Plane + Port + Ship + Truck + Routes
   ========================================================= */

.pd-hero-scene {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 52% !important;
    overflow: hidden !important;
    opacity: 1 !important;
}

/* ---------------------------------------------------------
   GLOBAL GLOW
   --------------------------------------------------------- */

.pd-hero-scene::before {
    content: "";
    position: absolute;

    width: 420px;
    height: 420px;

    right: -55px;
    top: -85px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(72,210,255,.22) 0%,
            rgba(20,153,235,.10) 38%,
            transparent 68%
        );

    pointer-events: none;
}

/* Horizon / port floor */

.pd-hero-scene::after {
    content: "";
    position: absolute;

    left: 17%;
    right: -5%;
    bottom: 22px;

    height: 58px;

    border-radius: 50% 50% 0 0;

    background:
        linear-gradient(
            180deg,
            rgba(41,184,240,.10),
            rgba(0,38,83,.38)
        );

    border-top:
        1px solid rgba(117,224,255,.22);

    transform: perspective(180px) rotateX(58deg);

    box-shadow:
        0 -15px 45px rgba(30,184,255,.10);
}


/* ---------------------------------------------------------
   SUN / WORLD RADAR
   --------------------------------------------------------- */

.pd-sun {
    position: absolute !important;

    width: 265px !important;
    height: 265px !important;

    right: 45px !important;
    top: -72px !important;

    border-radius: 50% !important;

    border:
        1px solid rgba(129,224,255,.15) !important;

    background:
        repeating-radial-gradient(
            circle,
            transparent 0 29px,
            rgba(126,224,255,.08) 30px 31px
        ) !important;

    box-shadow:
        0 0 65px rgba(0,183,255,.12) !important;
}


/* ---------------------------------------------------------
   AIRCRAFT
   --------------------------------------------------------- */

.pd-plane {
    position: absolute !important;

    top: 50px !important;
    right: 67px !important;

    z-index: 9 !important;

    font-size: 57px !important;

    color: #fff !important;

    transform: rotate(-7deg);

    text-shadow:
        0 4px 0 rgba(190,235,255,.55),
        0 13px 20px rgba(0,37,75,.35);

    filter:
        drop-shadow(0 0 13px rgba(124,225,255,.25));

    animation:
        pradellPremiumPlane 5s ease-in-out infinite !important;
}

/* aircraft light */

.pd-plane::after {
    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    right: 5px;
    top: 27px;

    border-radius: 50%;

    background: #8de9ff;

    box-shadow:
        0 0 10px #8de9ff,
        0 0 20px rgba(141,233,255,.75);
}


/* ---------------------------------------------------------
   PORT / CITY CONTAINERS
   --------------------------------------------------------- */

.pd-city {
    position: absolute !important;

    right: 55px !important;
    bottom: 60px !important;

    height: 105px !important;

    display: flex !important;
    align-items: flex-end !important;
    gap: 7px !important;

    z-index: 4 !important;

    opacity: .72 !important;
}

.pd-city span {
    position: relative;

    width: 29px !important;

    border-radius: 4px 4px 1px 1px !important;

    border:
        1px solid rgba(126,225,255,.22) !important;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(102,214,255,.18) 0 7px,
            rgba(0,102,174,.22) 8px 10px
        ),
        linear-gradient(
            180deg,
            rgba(84,204,255,.42),
            rgba(0,89,163,.20)
        ) !important;

    box-shadow:
        inset 0 0 15px rgba(100,222,255,.08),
        0 7px 15px rgba(0,30,66,.12) !important;
}

.pd-city span:nth-child(1) { height: 54px !important; }
.pd-city span:nth-child(2) { height: 78px !important; }
.pd-city span:nth-child(3) { height: 43px !important; }
.pd-city span:nth-child(4) { height: 96px !important; }
.pd-city span:nth-child(5) { height: 69px !important; }
.pd-city span:nth-child(6) { height: 87px !important; }
.pd-city span:nth-child(7) { height: 51px !important; }


/* ---------------------------------------------------------
   CARGO SHIP
   --------------------------------------------------------- */

.pd-ship {
    position: absolute !important;

    left: 13% !important;
    bottom: 25px !important;

    z-index: 12 !important;

    width: 175px !important;
    height: 125px !important;

    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;

    filter:
        drop-shadow(0 17px 14px rgba(0,35,73,.28)) !important;

    animation:
        pradellPremiumShip 4.2s ease-in-out infinite !important;
}

.pd-ship > i {
    position: absolute !important;

    left: 17px !important;
    bottom: 0 !important;

    color: #eefaff !important;

    font-size: 112px !important;

    text-shadow:
        0 4px 0 rgba(181,230,249,.72),
        0 9px 15px rgba(0,44,83,.28);
}


/* Real container-stack effect */

.ship-containers {
    position: absolute !important;

    left: 49px !important;
    bottom: 64px !important;

    z-index: 5 !important;

    width: 103px !important;

    display: flex !important;
    align-items: flex-end !important;
    gap: 3px !important;
}

.ship-containers span {
    width: 18px !important;
    height: 17px !important;

    display: block !important;

    border-radius: 2px !important;

    border:
        1px solid rgba(255,255,255,.50) !important;

    box-shadow:
        inset 0 -5px 7px rgba(0,0,0,.10),
        0 2px 4px rgba(0,0,0,.12) !important;
}

.ship-containers span:nth-child(1) {
    height: 21px !important;
    background: #ffbd28 !important;
}

.ship-containers span:nth-child(2) {
    height: 27px !important;
    background: #ff8d28 !important;
}

.ship-containers span:nth-child(3) {
    height: 22px !important;
    background: #22bff1 !important;
}

.ship-containers span:nth-child(4) {
    height: 29px !important;
    background: #ff5959 !important;
}

.ship-containers span:nth-child(5) {
    height: 19px !important;
    background: #23c6e9 !important;
}


/* ---------------------------------------------------------
   TRUCK
   --------------------------------------------------------- */

.pd-truck {
    position: absolute !important;

    right: 20px !important;
    bottom: 27px !important;

    z-index: 13 !important;

    color: #f4fbff !important;

    font-size: 79px !important;

    filter:
        drop-shadow(0 14px 11px rgba(0,35,70,.28)) !important;

    animation:
        pradellPremiumTruck 4s ease-in-out infinite !important;
}


/* road under truck */

.pd-truck::after {
    content: "";

    position: absolute;

    width: 115px;
    height: 3px;

    right: -5px;
    bottom: -9px;

    border-radius: 50%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(171,235,255,.70),
            transparent
        );

    box-shadow:
        0 0 10px rgba(87,213,255,.35);
}


/* ---------------------------------------------------------
   GLOBAL ROUTE LINES
   --------------------------------------------------------- */

.pd-route {
    position: absolute !important;

    z-index: 3 !important;

    border:
        1px dashed rgba(137,228,255,.32) !important;

    border-radius: 50% !important;

    background: transparent !important;
}

.route-one {
    width: 350px !important;
    height: 150px !important;

    right: 5px !important;
    top: 71px !important;

    transform: rotate(13deg) !important;
}

.route-two {
    width: 285px !important;
    height: 165px !important;

    right: 65px !important;
    bottom: 17px !important;

    transform: rotate(-14deg) !important;
}


/* moving route light */

.route-one::after,
.route-two::after {
    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #89ecff;

    box-shadow:
        0 0 8px #89ecff,
        0 0 18px rgba(137,236,255,.85);
}

.route-one::after {
    left: 23%;
    top: 7px;
}

.route-two::after {
    right: 21%;
    bottom: 7px;
}


/* ---------------------------------------------------------
   BRAND MESSAGE
   --------------------------------------------------------- */

.pd-hero-tag {
    position: absolute !important;

    right: 34px !important;
    top: 120px !important;

    z-index: 14 !important;

    padding-left: 12px !important;

    border-left:
        2px solid rgba(117,224,255,.70) !important;

    text-align: left !important;
}

.pd-hero-tag strong {
    display: block !important;

    color: #e9f9ff !important;

    font-size: 8px !important;
    line-height: 1.35 !important;

    text-transform: uppercase !important;
    letter-spacing: 1.6px !important;
}


/* ---------------------------------------------------------
   ANIMATION
   --------------------------------------------------------- */

@keyframes pradellPremiumPlane {

    0%,100% {
        transform:
            translate(0,0)
            rotate(-7deg);
    }

    50% {
        transform:
            translate(-13px,-7px)
            rotate(-4deg);
    }
}

@keyframes pradellPremiumShip {

    0%,100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-4px) rotate(-.5deg);
    }
}

@keyframes pradellPremiumTruck {

    0%,100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-7px);
    }
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1050px) {

    .pd-hero-scene {
        width: 45% !important;
        opacity: .70 !important;
    }

    .pd-city {
        opacity: .42 !important;
    }
}

@media (max-width: 760px) {

    .pd-hero-scene {
        opacity: .20 !important;
        width: 100% !important;
    }

    .pd-hero-tag {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    .pd-plane,
    .pd-ship,
    .pd-truck {
        animation: none !important;
    }
}


/* =========================================================
   PRADELL AI RESEARCH - CREATE / LAUNCH CENTER
   ========================================================= */

.research-create-page {
    width: 100%;
    padding: 18px 0 35px;
}


/* ---------- TOP HERO ---------- */

.research-create-hero {
    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    min-height: 165px;
    margin-bottom: 18px;
    padding: 28px 34px;

    border-radius: 22px;

    background:
        radial-gradient(circle at 83% 30%,
            rgba(52,205,255,.25),
            transparent 24%),
        linear-gradient(115deg,
            #031a35 0%,
            #064c83 58%,
            #0797db 100%);

    box-shadow:
        0 16px 38px rgba(7,56,100,.15);

    color: #fff;
}

.research-create-hero::after {
    content: "";
    position: absolute;

    width: 280px;
    height: 280px;

    right: 80px;
    top: -155px;

    border-radius: 50%;

    border: 1px solid rgba(132,228,255,.22);

    box-shadow:
        0 0 0 35px rgba(103,217,255,.035),
        0 0 0 70px rgba(103,217,255,.025);
}

.research-create-badge {
    position: relative;
    z-index: 2;

    width: fit-content;

    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 10px;
    padding: 6px 10px;

    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;

    background: rgba(255,255,255,.08);

    color: #78dcff;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.research-create-hero h1 {
    position: relative;
    z-index: 2;

    margin: 0 0 7px;

    color: #fff;

    font-size: clamp(26px,3vw,38px);
    font-weight: 900;
    letter-spacing: -1px;
}

.research-create-hero p {
    position: relative;
    z-index: 2;

    max-width: 690px;
    margin: 0;

    color: #cce9fa;

    font-size: 12px;
    line-height: 1.65;
}

.research-back-btn {
    position: relative;
    z-index: 3;

    min-width: 145px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border: 1px solid rgba(255,255,255,.25);
    border-radius: 10px;

    background: rgba(255,255,255,.09);

    color: #fff;
    text-decoration: none;

    font-size: 10px;
    font-weight: 800;

    backdrop-filter: blur(8px);

    transition: .2s ease;
}

.research-back-btn:hover {
    color: #fff;
    background: rgba(255,255,255,.16);
    transform: translateY(-2px);
}


/* ---------- PAGE GRID ---------- */

.research-create-grid {
    display: grid;
    grid-template-columns: minmax(0,1.45fr) minmax(300px,.55fr);
    gap: 18px;
    align-items: start;
}


/* ---------- FORM CARD ---------- */

.research-form-card {
    overflow: hidden;

    padding: 27px;

    border: 1px solid #dbe8f3;
    border-radius: 18px;

    background: #fff;

    box-shadow:
        0 10px 30px rgba(21,67,104,.07);
}


/* ---------- STEPPER ---------- */

.research-stepper {
    display: flex;
    align-items: flex-start;

    margin-bottom: 30px;
    padding: 0 5px 22px;

    border-bottom: 1px solid #edf2f7;
}

.research-step {
    min-width: 60px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.research-step > span {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    border: 1px solid #d6e4ef;
    border-radius: 50%;

    background: #f4f8fb;

    color: #8299aa;

    font-size: 10px;
    font-weight: 900;
}

.research-step.active > span {
    color: #fff;

    border-color: #0c9ce7;

    background:
        linear-gradient(135deg,#075eaa,#11b9ef);

    box-shadow:
        0 5px 13px rgba(10,153,220,.22);
}

.research-step small {
    color: #8496a6;

    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.research-step.active small {
    color: #075f9e;
}

.research-step-line {
    flex: 1;
    height: 1px;

    margin-top: 15px;

    background:
        linear-gradient(
            90deg,
            #16aee9,
            #d8e7f1
        );
}


/* ---------- FORM SECTIONS ---------- */

.research-form-section {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 15px;
}

.research-section-number {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    background: #edf8fe;

    color: #0788cf;

    font-size: 9px;
    font-weight: 900;
}

.research-section-content {
    min-width: 0;
}

.research-field-heading {
    display: flex;
    align-items: center;
    gap: 11px;

    margin-bottom: 18px;
}

.research-field-icon {
    width: 37px;
    height: 37px;

    flex: 0 0 37px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    color: #087dc0;

    background:
        linear-gradient(135deg,#e8f7ff,#f5fbff);

    border: 1px solid #d9edf8;
}

.research-field-heading h3 {
    margin: 0 0 2px;

    color: #0b2841;

    font-size: 14px;
    font-weight: 900;
}

.research-field-heading p {
    margin: 0;

    color: #8194a5;

    font-size: 10px;
}

.research-section-content label {
    display: block;

    margin-bottom: 7px;

    color: #304a60;

    font-size: 10px;
    font-weight: 800;
}

.research-section-content label > span {
    color: #e84a5f;
}

.research-divider {
    height: 1px;

    margin: 25px 0;

    background: #edf2f7;
}


/* ---------- INPUTS ---------- */

.research-input-wrap {
    position: relative;
}

.research-input-wrap > i {
    position: absolute;

    left: 14px;
    top: 50%;

    transform: translateY(-50%);

    color: #78a2bd;

    font-size: 12px;

    pointer-events: none;
}

.research-input-wrap input {
    width: 100%;
    height: 46px;

    padding: 0 14px 0 40px;

    outline: none;

    border: 1px solid #d9e5ee;
    border-radius: 10px;

    background: #fbfdff;

    color: #18384f;

    font-size: 11px;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.research-input-wrap input:focus {
    border-color: #29a9e6;

    background: #fff;

    box-shadow:
        0 0 0 4px rgba(27,166,228,.09);
}

.research-two-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}


/* ---------- AI TEXTAREA ---------- */

.research-textarea-wrap {
    position: relative;
}

.research-textarea-wrap textarea {
    width: 100%;
    min-height: 145px;

    resize: vertical;

    padding: 15px 15px 37px;

    outline: none;

    border: 1px solid #d9e5ee;
    border-radius: 11px;

    background: #fbfdff;

    color: #18384f;

    font-family: inherit;
    font-size: 11px;
    line-height: 1.6;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.research-textarea-wrap textarea:focus {
    border-color: #29a9e6;

    background: #fff;

    box-shadow:
        0 0 0 4px rgba(27,166,228,.09);
}

.research-ai-writing {
    position: absolute;

    left: 12px;
    bottom: 10px;

    display: flex;
    align-items: center;
    gap: 6px;

    color: #0a8fd2;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: .4px;
}


/* ---------- VALIDATION ---------- */

.research-validation,
.research-field-error {
    color: #d83a50;

    font-size: 9px;
}

.research-field-error {
    display: block;
    margin-top: 5px;
}


/* ---------- SAFE MODE ---------- */

.research-safe-box {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 12px;

    margin-top: 28px;
    padding: 15px;

    border: 1px solid #ccebdd;
    border-radius: 12px;

    background:
        linear-gradient(90deg,#f0fcf7,#f8fffc);
}

.research-safe-icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    color: #0b9a65;

    background: #ddf8ec;

    font-size: 16px;
}

.research-safe-box strong {
    display: block;

    margin-bottom: 3px;

    color: #176247;

    font-size: 11px;
}

.research-safe-box p {
    margin: 0;

    color: #67877a;

    font-size: 9px;
    line-height: 1.5;
}

.research-safe-status {
    padding: 6px 9px;

    border-radius: 999px;

    color: #07885a;

    background: #d9f7e9;

    font-size: 7px;
    font-weight: 900;
    letter-spacing: .7px;
}


/* ---------- FORM ACTIONS ---------- */

.research-form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;

    margin-top: 22px;
}

.research-cancel-btn {
    height: 43px;

    display: inline-flex;
    align-items: center;

    padding: 0 18px;

    border: 1px solid #d8e3eb;
    border-radius: 10px;

    color: #657d8f;
    background: #fff;

    text-decoration: none;

    font-size: 10px;
    font-weight: 800;
}

.research-launch-btn {
    min-width: 220px;
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    padding: 0 17px;

    border: 0;
    border-radius: 10px;

    color: #fff;

    background:
        linear-gradient(135deg,#0866ba,#0aaee9);

    box-shadow:
        0 9px 20px rgba(8,130,195,.20);

    font-size: 10px;
    font-weight: 900;

    cursor: pointer;

    transition: .2s ease;
}

.research-launch-btn span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.research-launch-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 13px 25px rgba(8,130,195,.27);
}


/* =========================================================
   RIGHT AI FLOW CARD
   ========================================================= */

.research-side-card {
    position: relative;
    overflow: hidden;

    padding: 25px 22px;

    border-radius: 18px;

    color: #fff;

    background:
        radial-gradient(circle at 80% 15%,
            rgba(34,205,255,.25),
            transparent 25%),
        linear-gradient(160deg,
            #041b35,
            #064a79 70%,
            #057eb5);

    box-shadow:
        0 14px 34px rgba(6,52,91,.14);
}

.research-side-glow {
    position: absolute;

    width: 210px;
    height: 210px;

    right: -110px;
    top: -90px;

    border-radius: 50%;

    border: 1px solid rgba(99,218,255,.16);

    box-shadow:
        0 0 0 28px rgba(90,216,255,.025),
        0 0 0 56px rgba(90,216,255,.018);
}

.research-side-title {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 11px;

    padding-bottom: 18px;

    border-bottom: 1px solid rgba(255,255,255,.11);
}

.research-side-title > span {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,255,255,.15);
    border-radius: 11px;

    color: #66dcff;

    background: rgba(255,255,255,.07);

    font-size: 17px;
}

.research-side-title small {
    display: block;

    margin-bottom: 2px;

    color: #5fd9ff;

    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
}

.research-side-title h3 {
    margin: 0;

    color: #fff;

    font-size: 15px;
    font-weight: 900;
}


/* ---------- FLOW ---------- */

.research-flow-list {
    position: relative;
    z-index: 2;

    padding: 21px 0 10px;
}

.research-flow-item {
    position: relative;

    display: grid;
    grid-template-columns: 24px 37px 1fr;
    align-items: center;
    gap: 9px;
}

.research-flow-item > span {
    color: #63d9ff;

    font-size: 7px;
    font-weight: 900;
}

.research-flow-icon {
    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,255,255,.14);
    border-radius: 9px;

    background: rgba(255,255,255,.07);

    color: #72dcff;

    font-size: 12px;
}

.research-flow-item strong {
    display: block;

    margin-bottom: 2px;

    color: #fff;

    font-size: 10px;
}

.research-flow-item p {
    margin: 0;

    color: #a9ccdf;

    font-size: 8px;
    line-height: 1.4;
}

.research-flow-connector {
    width: 1px;
    height: 18px;

    margin: 4px 0 4px 41px;

    background:
        linear-gradient(#42c9f6,rgba(66,201,246,.12));
}


/* ---------- SECURITY ---------- */

.research-side-security {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 14px;
    padding: 12px;

    border: 1px solid rgba(75,232,172,.20);
    border-radius: 10px;

    background: rgba(4,68,65,.35);
}

.research-side-security > i {
    color: #62e6af;
}

.research-side-security strong {
    display: block;

    color: #78edbc;

    font-size: 9px;
}

.research-side-security span {
    display: block;

    margin-top: 2px;

    color: #b7d8ce;

    font-size: 7px;
    line-height: 1.4;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

    .research-create-grid {
        grid-template-columns: 1fr;
    }

    .research-side-card {
        order: -1;
    }
}

@media (max-width: 700px) {

    .research-create-hero {
        align-items: flex-start;
        flex-direction: column;

        padding: 23px 20px;
    }

    .research-form-card {
        padding: 20px 15px;
    }

    .research-two-fields {
        grid-template-columns: 1fr;
    }

    .research-form-section {
        grid-template-columns: 1fr;
    }

    .research-section-number {
        display: none;
    }

    .research-safe-box {
        grid-template-columns: 38px 1fr;
    }

    .research-safe-status {
        grid-column: 2;
        width: fit-content;
    }

    .research-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .research-launch-btn,
    .research-cancel-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {

    .research-back-btn,
    .research-launch-btn {
        transition: none !important;
    }
}

\n\n/* =========================================================\n   PRADELL DASHBOARD FINAL POLISH V2.1\n   ========================================================= */\n.pd-hero-livebar{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.pd-hero-livebar span{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(2,20,42,.28);backdrop-filter:blur(10px);color:#dff6ff;font-size:9px;font-weight:800;letter-spacing:.35px;box-shadow:inset 0 1px rgba(255,255,255,.08)}.pd-hero-livebar i{color:#65e6b4}.pd-dashboard>.pd-section,.pd-dashboard>.pd-panel,.pd-dashboard>.pd-recent-grid,.pd-dashboard>.pd-kpi-grid,.pd-dashboard>.pd-analytics-grid,.pd-dashboard>.home-ai-center{animation:pdReveal .45s ease both}.pd-dashboard>.pd-kpi-grid{animation-delay:.04s}.pd-dashboard>.home-ai-center{animation-delay:.08s}.pd-dashboard>.pd-analytics-grid{animation-delay:.12s}.pd-dashboard>.pipeline-panel{animation-delay:.16s}.pd-dashboard>.pd-recent-grid{animation-delay:.20s}@keyframes pdReveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.pd-kpi,.pd-panel,.transport-card{will-change:transform}.pd-kpi:hover,.pd-panel:hover{transform:translateY(-2px)}.pd-panel{transition:transform .2s ease,box-shadow .2s ease}.pd-panel:hover{box-shadow:0 18px 42px rgba(7,49,91,.10)}@media(max-width:760px){.pd-hero-livebar{display:none}}@media(prefers-reduced-motion:reduce){.pd-dashboard>*{animation:none!important}.pd-kpi,.pd-panel{transition:none!important}}\n


/* PRADELL DASHBOARD V2.2 — responsive visual finish only */
@media (min-width: 1100px) {
  .pd-dashboard { max-width: 1600px; }
  .pd-hero { min-height: 300px !important; padding: 38px 40px !important; }
  .pd-hero-content { width: 57% !important; max-width: 760px; }
  .pd-hero-scene { right: 18px !important; width: 45% !important; transform: scale(.92); transform-origin: right center; }
  .pd-plane { right: 88px !important; top: 42px !important; font-size: 48px !important; }
  .pd-city { right: 35px !important; bottom: 58px !important; transform: scale(.88); transform-origin: right bottom; }
  .pd-truck { right: 42px !important; bottom: 30px !important; font-size: 62px !important; }
  .pd-ship { left: 22px !important; bottom: 26px !important; font-size: 92px !important; }
  .pd-hero-tag { right: 42px !important; top: 112px !important; }
  .route-one { right: 28px !important; width: 300px !important; }
  .route-two { right: 145px !important; width: 220px !important; }
}

/* 1366/1440-class desktops: keep artwork fully inside the hero */
@media (min-width: 1060px) and (max-width: 1450px) {
  .pd-dashboard { max-width: 1180px; }
  .pd-hero { min-height: 278px !important; padding: 34px 34px !important; }
  .pd-hero-content { width: 60% !important; }
  .pd-hero h1 { font-size: clamp(32px, 3vw, 43px) !important; }
  .pd-hero-scene { width: 42% !important; right: 22px !important; transform: scale(.78); transform-origin: right center; }
  .pd-hero-tag { right: 34px !important; }
  .transport-card { min-width: 190px; }
  .home-ai-center { grid-template-columns: 1.08fr .92fr; padding: 31px 34px; gap: 20px; }
  .home-ai-visual { transform: scale(.88); transform-origin: center; }
}

/* AI command center — give the visual breathing room and stop edge clipping */
.home-ai-center { overflow: hidden; }
.home-ai-main { min-width: 0; }
.home-ai-visual { min-width: 0; padding: 8px 18px; }
.home-ai-visual .node-company { left: 4% !important; }
.home-ai-visual .node-contact { right: 4% !important; }
.home-ai-visual .node-lead { right: 10% !important; }
.home-ai-visual .ai-safe { left: 8% !important; }

/* smoother cards and consistent vertical rhythm */
.transport-section { margin-top: 18px !important; }
.home-ai-center { margin-top: 18px !important; }
.pd-kpi-grid { margin-top: 18px !important; }
.transport-card { transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.transport-card:hover { transform: translateY(-3px); filter: saturate(1.04); }

@media (max-width: 1050px) {
  .pd-hero-content { width: 68% !important; }
  .pd-hero-scene { width: 46% !important; right: -10px !important; opacity: .42 !important; transform: scale(.82); transform-origin: right center; }
  .home-ai-center { grid-template-columns: 1fr; }
  .home-ai-visual { max-width: 620px; width: 100%; margin: 0 auto; }
}

@media (max-width: 760px) {
  .pd-hero { min-height: 350px !important; padding: 28px 22px !important; }
  .pd-hero-content { width: 100% !important; }
  .pd-hero-scene { inset: auto -55px 0 auto !important; width: 100% !important; height: 78% !important; opacity: .16 !important; transform: scale(.78); }
  .pd-hero h1 { letter-spacing: -1px !important; }
  .home-ai-center { padding: 25px 20px !important; }
  .home-ai-visual { transform: scale(.80) !important; margin: -12px auto -20px; }
}

@media (prefers-reduced-motion: reduce) {
  .transport-card { transition: none !important; }
}

/* PRADELL DASHBOARD V2.3 — REFERENCE MATCH
   Visual-only override. No controller/database/research/email logic changes. */

.pd-dashboard { max-width: 1680px; }

/* HERO: realistic logistics artwork on right, reference-like compact geometry */
.pd-hero {
    min-height: 300px !important;
    padding: 38px 42px !important;
    border-radius: 18px !important;
    background: linear-gradient(105deg,#031a36 0%,#063b70 48%,#0a77be 100%) !important;
    isolation: isolate;
}
.pd-hero::before {
    z-index: 0;
    background: linear-gradient(90deg,rgba(2,20,44,.92) 0%,rgba(3,34,66,.75) 43%,rgba(4,57,98,.18) 64%,rgba(4,57,98,0) 100%) !important;
}
.pd-hero::after {
    content:"";
    position:absolute;
    z-index:-1;
    inset:0 0 0 42%;
    background-image:url('/images/dashboard-v23/hero-logistics.webp');
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    filter:saturate(1.08) contrast(1.04);
}
.pd-hero-content { width: 56% !important; z-index:5 !important; }
.pd-hero-scene { display:none !important; }
.pd-eyebrow {
    padding:6px 12px !important;
    border:1px solid #18b7ff !important;
    background:rgba(2,38,72,.56) !important;
    color:#bdeaff !important;
}
.pd-hero h1 { font-size:clamp(34px,3.05vw,52px) !important; margin-top:15px !important; }
.pd-hero h2 { font-size:19px !important; margin-top:8px !important; }
.pd-hero p { font-size:14px !important; margin:9px 0 20px !important; }
.pd-hero-button {
    color:#fff !important;
    background:linear-gradient(135deg,#0879f7,#0ba5ff) !important;
    padding:13px 21px !important;
    border-radius:9px !important;
    box-shadow:0 10px 24px rgba(0,94,225,.32) !important;
}
.pd-hero-button span { color:#fff !important; }
.pd-hero-dots { bottom:10px !important; }

/* CAPABILITIES: compact white container and photo-backed cards */
.transport-section {
    margin-top:14px !important;
    padding:12px 12px 8px !important;
    background:#fff;
    border:1px solid #dce9f5;
    border-radius:14px;
    box-shadow:0 8px 24px rgba(17,64,108,.06);
}
.transport-section .pd-section-heading h2 { font-size:20px !important; }
.transport-viewport { margin-top:8px !important; }
.transport-track { gap:10px !important; padding:2px 0 5px !important; width:100% !important; }
.transport-card {
    width:auto !important;
    flex:1 1 0 !important;
    min-width:0 !important;
    height:130px !important;
    padding:18px 16px !important;
    border-radius:12px !important;
    box-shadow:none !important;
    background-size:55% 100%,100% 100% !important;
    background-position:right center,left top !important;
    background-repeat:no-repeat !important;
}
.transport-card::before {
    inset:0 !important;
    width:auto !important;
    height:auto !important;
    border-radius:0 !important;
    background:linear-gradient(90deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.04) 48%,rgba(0,0,0,0) 72%) !important;
}
.transport-card.sea { background-image:url('/images/dashboard-v23/sea.webp'),linear-gradient(135deg,#0066b5,#06a7dd) !important; }
.transport-card.land { background-image:url('/images/dashboard-v23/land.webp'),linear-gradient(135deg,#08794a,#21b977) !important; }
.transport-card.air { background-image:url('/images/dashboard-v23/air.webp'),linear-gradient(135deg,#4740bc,#8068ed) !important; }
.transport-card.rail { background-image:url('/images/dashboard-v23/rail.webp'),linear-gradient(135deg,#c95e0c,#f39b23) !important; }
.transport-card.warehouse { display:none !important; }
.transport-icon { display:none !important; }
.transport-card > span,.transport-card h3,.transport-card p,.transport-line { position:relative; z-index:2; }
.transport-card > span { font-size:8px !important; opacity:1 !important; }
.transport-card h3 { font-size:24px !important; margin:6px 0 1px !important; }
.transport-card p { font-size:11px !important; }
.transport-line { margin-top:10px !important; width:34px !important; height:2px !important; }

@media (max-width: 1450px) {
    .pd-hero { min-height:278px !important; padding:32px 36px !important; }
    .pd-hero::after { inset-left:43%; }
    .pd-hero h1 { font-size:40px !important; }
    .transport-card { height:122px !important; }
}
@media (max-width: 1180px) {
    .pd-hero::after { inset-left:36%; opacity:.72; }
    .pd-hero-content { width:72% !important; }
    .transport-track { width:max-content !important; }
    .transport-card { flex:0 0 245px !important; width:245px !important; }
    .transport-card.warehouse { display:block !important; }
}
@media (max-width: 760px) {
    .pd-hero { min-height:320px !important; padding:28px 24px !important; }
    .pd-hero::after { inset:0; opacity:.42; }
    .pd-hero::before { background:rgba(2,20,44,.70) !important; }
    .pd-hero-content { width:100% !important; }
    .pd-hero h1 { font-size:34px !important; }
}

/* PRADELL DASHBOARD V2.4 — EXACT REFERENCE VISUAL
   Presentation-only override. Backend / SQL / Research / Gmail untouched. */

/* HERO — full photographic background, no oval/circle clipping */
.pd-hero{
    position:relative !important;
    overflow:hidden !important;
    min-height:300px !important;
    padding:38px 42px !important;
    border-radius:14px !important;
    background:#05284d !important;
}
.pd-hero::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    opacity:1 !important;
    transform:none !important;
    border-radius:0 !important;
    clip-path:none !important;
    -webkit-clip-path:none !important;
    mask:none !important;
    -webkit-mask:none !important;
    background-image:url('/images/dashboard-v23/hero-logistics.webp') !important;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    filter:saturate(1.06) contrast(1.03) !important;
}
.pd-hero::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    width:100% !important;
    height:100% !important;
    transform:none !important;
    border-radius:0 !important;
    clip-path:none !important;
    background:linear-gradient(90deg,
        rgba(2,19,42,.96) 0%,
        rgba(2,24,50,.90) 25%,
        rgba(2,31,61,.68) 43%,
        rgba(2,37,68,.20) 61%,
        rgba(2,37,68,0) 78%) !important;
}
.pd-hero-content{
    position:relative !important;
    z-index:3 !important;
    width:48% !important;
    max-width:650px !important;
}
.pd-hero-scene{display:none !important;}
.pd-hero h1{font-size:clamp(36px,3vw,52px) !important;line-height:1.04 !important;}
.pd-hero h2{font-size:19px !important;}
.pd-hero p{font-size:14px !important;}
.pd-hero-dots{z-index:4 !important;}

/* CAPABILITY CARDS — photograph fills entire card like accepted reference */
.transport-section{
    margin-top:14px !important;
    padding:12px !important;
    border-radius:12px !important;
}
.transport-track{
    display:flex !important;
    gap:10px !important;
    width:100% !important;
}
.transport-card{
    position:relative !important;
    overflow:hidden !important;
    flex:1 1 0 !important;
    width:auto !important;
    min-width:0 !important;
    height:128px !important;
    padding:18px 16px !important;
    border-radius:10px !important;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    isolation:isolate !important;
}
.transport-card.sea{background-image:url('/images/dashboard-v23/sea.webp') !important;}
.transport-card.land{background-image:url('/images/dashboard-v23/land.webp') !important;}
.transport-card.air{background-image:url('/images/dashboard-v23/air.webp') !important;}
.transport-card.rail{background-image:url('/images/dashboard-v23/rail.webp') !important;}
.transport-card.warehouse{display:none !important;}

.transport-card::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    width:100% !important;
    height:100% !important;
    border-radius:0 !important;
    transform:none !important;
    clip-path:none !important;
    background:linear-gradient(90deg,
        rgba(3,18,35,.82) 0%,
        rgba(3,18,35,.62) 32%,
        rgba(3,18,35,.20) 58%,
        rgba(3,18,35,0) 82%) !important;
}
.transport-card > span,
.transport-card h3,
.transport-card p,
.transport-line{
    position:relative !important;
    z-index:2 !important;
    color:#fff !important;
    text-shadow:0 1px 3px rgba(0,0,0,.45) !important;
}
.transport-card > span{font-size:8px !important;}
.transport-card h3{font-size:24px !important;margin:6px 0 1px !important;}
.transport-card p{font-size:11px !important;}
.transport-icon{display:none !important;}

/* Keep the lower AI Research section intact */
@media (max-width:1450px){
    .pd-hero{min-height:278px !important;padding:32px 36px !important;}
    .pd-hero::after{inset:0 !important;background-position:center center !important;}
    .pd-hero-content{width:51% !important;}
    .transport-card{height:122px !important;}
}
@media (max-width:1180px){
    .pd-hero-content{width:64% !important;}
    .pd-hero::before{
        background:linear-gradient(90deg,rgba(2,19,42,.94) 0%,rgba(2,25,52,.78) 48%,rgba(2,25,52,.18) 100%) !important;
    }
    .transport-track{width:max-content !important;}
    .transport-card{flex:0 0 245px !important;width:245px !important;}
}
@media (max-width:760px){
    .pd-hero{min-height:320px !important;padding:28px 24px !important;}
    .pd-hero-content{width:100% !important;}
    .pd-hero::before{background:rgba(2,20,44,.70) !important;}
}

/* PRADELL DASHBOARD V2.5 — FINAL REFERENCE POLISH
   Visual-only override. Keeps V2.4 structure and all backend logic intact. */

/* Match accepted reference: brighter, less zoomed hero with more breathing room */
.pd-hero{
    min-height:320px !important;
    padding:42px 44px !important;
}
.pd-hero::after{
    background-size:cover !important;
    background-position:center 48% !important;
    filter:saturate(1.03) brightness(1.08) contrast(1.01) !important;
}
.pd-hero::before{
    background:linear-gradient(90deg,
        rgba(2,18,40,.91) 0%,
        rgba(2,24,49,.82) 25%,
        rgba(2,30,58,.53) 43%,
        rgba(2,36,65,.12) 61%,
        rgba(2,36,65,0) 78%) !important;
}
.pd-hero-content{
    width:50% !important;
    max-width:680px !important;
}
.pd-hero h1{
    font-size:clamp(40px,3.25vw,56px) !important;
    line-height:1.02 !important;
    letter-spacing:-1.3px !important;
    margin-bottom:8px !important;
}
.pd-hero h2{
    font-size:20px !important;
    margin-bottom:8px !important;
}
.pd-hero p{
    font-size:14px !important;
    margin-bottom:20px !important;
}

/* Match reference capability proportions */
.transport-section{
    padding:13px 14px 15px !important;
}
.transport-track{
    gap:10px !important;
}
.transport-card{
    height:142px !important;
    padding:19px 17px !important;
    background-position:center center !important;
}
.transport-card::before{
    background:linear-gradient(90deg,
        rgba(3,18,35,.75) 0%,
        rgba(3,18,35,.50) 34%,
        rgba(3,18,35,.14) 61%,
        rgba(3,18,35,0) 84%) !important;
}
.transport-card h3{
    font-size:25px !important;
    line-height:1 !important;
    margin:7px 0 4px !important;
}
.transport-card p{
    font-size:11px !important;
}
.transport-card > span{
    font-size:8px !important;
    letter-spacing:1px !important;
}
.transport-line{
    width:34px !important;
    margin-top:12px !important;
}

/* Keep desktop compact but proportional at user's browser width */
@media (max-width:1450px){
    .pd-hero{
        min-height:300px !important;
        padding:36px 38px !important;
    }
    .pd-hero h1{
        font-size:42px !important;
    }
    .pd-hero h2{
        font-size:18px !important;
    }
    .transport-card{
        height:132px !important;
    }
}
@media (max-width:1180px){
    .pd-hero-content{width:62% !important;}
}


/* =========================================================
   PRADELL WORLD CLOCK THEME V11
   ========================================================= */

.world-clock-bar {
    height: 52px;
    display: flex;
    align-items: center;
    gap: 4px;

    padding: 5px 8px;

    background: #ffffff;

    border: 1px solid #deebf7;
    border-radius: 14px;

    box-shadow:
        0 4px 13px rgba(19,67,115,.05);

    white-space: nowrap;
}


.world-clock-icon {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border-radius: 9px;

    background: #edf6ff;

    color: var(--pd-blue);
}


.world-clock-item {
    min-width: 67px;

    padding:
        0 6px;

    border-left:
        1px solid #e4edf6;
}


.world-clock-item span {
    display: block;

    font-size: 8px;
    line-height: 1;

    font-weight: 800;

    letter-spacing: .4px;

    color: #52708f;
}


.world-clock-item strong {
    display: block;

    margin-top: 2px;

    font-size: 10px;
    line-height: 1.15;

    color: #0c1e38;
}


.world-clock-item small {
    display: block;

    margin-top: 2px;

    font-size: 7px;
    line-height: 1;

    color: #7b8fa4;
}


.theme-toggle {
    flex: 0 0 auto;
}


/* =========================================================
   DARK / NIGHT MODE
   ========================================================= */

html[data-pradell-theme="dark"] {
    color-scheme: dark;
}


html[data-pradell-theme="dark"] body,
html[data-pradell-theme="dark"] .enterprise-main,
html[data-pradell-theme="dark"] .enterprise-content {

    background:
        #08111f !important;

    color:
        #e8eef7 !important;
}


html[data-pradell-theme="dark"] .enterprise-topbar {

    background:
        #0d1928 !important;

    border-color:
        #26394e !important;
}


html[data-pradell-theme="dark"] .global-search,
html[data-pradell-theme="dark"] .world-clock-bar,
html[data-pradell-theme="dark"] .top-icon,
html[data-pradell-theme="dark"] .profile-zone {

    background:
        #111f30 !important;

    border-color:
        #2a3e55 !important;

    color:
        #e8eef7 !important;
}


html[data-pradell-theme="dark"] .world-clock-icon {

    background:
        #172d47;
}


html[data-pradell-theme="dark"] .world-clock-item {

    border-color:
        #2b4058;
}


html[data-pradell-theme="dark"] .world-clock-item strong,
html[data-pradell-theme="dark"] .profile-copy strong {

    color:
        #f3f7fc !important;
}


html[data-pradell-theme="dark"] .world-clock-item span,
html[data-pradell-theme="dark"] .world-clock-item small,
html[data-pradell-theme="dark"] .profile-copy span {

    color:
        #9eb1c7 !important;
}


html[data-pradell-theme="dark"] .card {

    background:
        #111f30 !important;

    color:
        #e8eef7 !important;

    border-color:
        #293d54 !important;
}


html[data-pradell-theme="dark"] h1,
html[data-pradell-theme="dark"] h2,
html[data-pradell-theme="dark"] h3,
html[data-pradell-theme="dark"] h4,
html[data-pradell-theme="dark"] h5,
html[data-pradell-theme="dark"] h6 {

    color:
        #f4f8fc !important;
}


html[data-pradell-theme="dark"] .text-muted {

    color:
        #9eb1c7 !important;
}


html[data-pradell-theme="dark"] .table {

    --bs-table-bg:
        #111f30;

    --bs-table-color:
        #e8eef7;

    --bs-table-border-color:
        #293d54;

    --bs-table-hover-bg:
        #17283b;

    --bs-table-hover-color:
        #ffffff;
}


html[data-pradell-theme="dark"] .form-control,
html[data-pradell-theme="dark"] .form-select {

    background:
        #0b1725 !important;

    border-color:
        #30465f !important;

    color:
        #edf3fa !important;
}


html[data-pradell-theme="dark"] .form-control::placeholder {

    color:
        #71879e;
}


html[data-pradell-theme="dark"] .profile-logout {

    background:
        #182a3d;

    color:
        #d4e0ec;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1450px) {

    .world-clock-item {

        min-width: 57px;

        padding-left: 4px;
        padding-right: 4px;
    }


    .world-clock-item small {

        display: none;
    }
}


@media (max-width: 1150px) {

    .world-clock-item:nth-of-type(4),
    .world-clock-item:nth-of-type(5) {

        display: none;
    }
}


@media (max-width: 900px) {

    .world-clock-bar {

        display: none;
    }


    .theme-toggle {

        display: grid !important;
    }
}


/* =========================================================
   PRADELL DARK THEME COMPATIBILITY V12
   Admin + Sales Agent
   ========================================================= */

html[data-pradell-theme="dark"] {
    --pd-dark-bg: #08111f;
    --pd-dark-surface: #101d2d;
    --pd-dark-surface-2: #142337;
    --pd-dark-border: #293d54;
    --pd-dark-text: #e8eef7;
    --pd-dark-muted: #9eb1c7;
}

/* Main application surfaces */

html[data-pradell-theme="dark"] body,
html[data-pradell-theme="dark"] main,
html[data-pradell-theme="dark"] .enterprise-main,
html[data-pradell-theme="dark"] .enterprise-content {
    background-color: var(--pd-dark-bg) !important;
    color: var(--pd-dark-text) !important;
}

/* Generic old page containers */

html[data-pradell-theme="dark"] section,
html[data-pradell-theme="dark"] .cards > div,
html[data-pradell-theme="dark"] .form-card,
html[data-pradell-theme="dark"] .pd-panel,
html[data-pradell-theme="dark"] .research-jobs-panel,
html[data-pradell-theme="dark"] .transport-section,
html[data-pradell-theme="dark"] .recent-panel {
    background: var(--pd-dark-surface) !important;
    border-color: var(--pd-dark-border) !important;
    color: var(--pd-dark-text) !important;
}

/* =========================================================
   TABLES
   ========================================================= */

html[data-pradell-theme="dark"] table,
html[data-pradell-theme="dark"] .table,
html[data-pradell-theme="dark"] .pd-table,
html[data-pradell-theme="dark"] .research-table {
    background: var(--pd-dark-surface) !important;
    color: var(--pd-dark-text) !important;
}

html[data-pradell-theme="dark"] table thead,
html[data-pradell-theme="dark"] table tbody,
html[data-pradell-theme="dark"] table tr,
html[data-pradell-theme="dark"] table th,
html[data-pradell-theme="dark"] table td {
    background-color: transparent !important;
    border-color: var(--pd-dark-border) !important;
}

html[data-pradell-theme="dark"] table th,
html[data-pradell-theme="dark"] .table th,
html[data-pradell-theme="dark"] .pd-table th,
html[data-pradell-theme="dark"] .research-table th {
    color: #b8c8da !important;
}

html[data-pradell-theme="dark"] table td,
html[data-pradell-theme="dark"] .table td,
html[data-pradell-theme="dark"] .pd-table td,
html[data-pradell-theme="dark"] .research-table td {
    color: var(--pd-dark-text) !important;
}

html[data-pradell-theme="dark"] .pd-table td strong {
    color: #f4f8fc !important;
}

html[data-pradell-theme="dark"] table tbody tr:hover,
html[data-pradell-theme="dark"] .research-table tbody tr:hover {
    background: #17283b !important;
}

/* =========================================================
   HEADINGS / NORMAL TEXT
   ========================================================= */

html[data-pradell-theme="dark"] .page-head h1,
html[data-pradell-theme="dark"] .page-head h2,
html[data-pradell-theme="dark"] .pd-section-heading h2,
html[data-pradell-theme="dark"] .pd-panel-heading h2,
html[data-pradell-theme="dark"] .research-panel-head h2 {
    color: #f5f8fc !important;
}

html[data-pradell-theme="dark"] p,
html[data-pradell-theme="dark"] label {
    color: #c7d3e1;
}

html[data-pradell-theme="dark"] .muted,
html[data-pradell-theme="dark"] .text-muted,
html[data-pradell-theme="dark"] .research-panel-head p {
    color: var(--pd-dark-muted) !important;
}

/* Keep links clearly visible */

html[data-pradell-theme="dark"] .enterprise-content a:not(.btn) {
    color: #65b5ff;
}

html[data-pradell-theme="dark"] .enterprise-content a:not(.btn):hover {
    color: #93ccff;
}

/* =========================================================
   FORMS
   ========================================================= */

html[data-pradell-theme="dark"] input,
html[data-pradell-theme="dark"] select,
html[data-pradell-theme="dark"] textarea,
html[data-pradell-theme="dark"] .form-control,
html[data-pradell-theme="dark"] .form-select {
    background: #0b1725 !important;
    color: #edf3fa !important;
    border-color: #30465f !important;
}

html[data-pradell-theme="dark"] input::placeholder,
html[data-pradell-theme="dark"] textarea::placeholder {
    color: #788da4 !important;
}

html[data-pradell-theme="dark"] option {
    background: #0b1725;
    color: #edf3fa;
}

/* =========================================================
   BADGES
   ========================================================= */

html[data-pradell-theme="dark"] .badge {
    background: #1a2d43;
    color: #dce8f5;
}

/* =========================================================
   PREMIUM DASHBOARD
   ========================================================= */

html[data-pradell-theme="dark"] .pd-panel {
    box-shadow: 0 12px 30px rgba(0,0,0,.22) !important;
}

html[data-pradell-theme="dark"] .pipeline-flow > div {
    background: linear-gradient(
        180deg,
        #132337,
        #0d1a2a
    ) !important;

    border-color: var(--pd-dark-border) !important;
}

html[data-pradell-theme="dark"] .donut-center {
    background: var(--pd-dark-surface) !important;
}

/* =========================================================
   AI RESEARCH
   ========================================================= */

html[data-pradell-theme="dark"] .research-jobs-panel {
    box-shadow: 0 12px 30px rgba(0,0,0,.20) !important;
}

html[data-pradell-theme="dark"] .research-alert.error {
    background: #361a20 !important;
    color: #ffb5bd !important;
    border-color: #71323d !important;
}

html[data-pradell-theme="dark"] .status-review {
    background: #3a2c0e !important;
    color: #ffd878 !important;
}

/* =========================================================
   TOP BAR
   ========================================================= */

html[data-pradell-theme="dark"] .enterprise-topbar {
    box-shadow: 0 6px 22px rgba(0,0,0,.22);
}

html[data-pradell-theme="dark"] .global-search-results {
    background: var(--pd-dark-surface) !important;
    border-color: var(--pd-dark-border) !important;
    color: var(--pd-dark-text) !important;
}

/* =========================================================
   BUTTON SAFETY
   Do NOT globally darken primary/action buttons.
   ========================================================= */

html[data-pradell-theme="dark"] .btn-light {
    background: #1b2d42 !important;
    color: #e5eef8 !important;
    border-color: #30475f !important;
}

/* =========================================================
   EMPTY STATES
   ========================================================= */

html[data-pradell-theme="dark"] .empty {
    background: #101e2e !important;
    color: var(--pd-dark-muted) !important;
}

/* =========================================================
   SCROLLBAR
   ========================================================= */

html[data-pradell-theme="dark"] {
    scrollbar-color: #38516c #0b1624;
}

html[data-pradell-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html[data-pradell-theme="dark"] ::-webkit-scrollbar-track {
    background: #0b1624;
}

html[data-pradell-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #38516c;
    border-radius: 10px;
}

html[data-pradell-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #4a6684;
}


/* =========================================================
   PRADELL SLA NOTIFICATIONS V1
   ========================================================= */

.pradell-notification-bell {
    position: relative;
    text-decoration: none;
}

.pradell-notification-bell .notification-dot {
    min-width: 18px;
    height: 18px;

    padding: 0 5px;

    align-items: center;
    justify-content: center;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 900;

    background: #ef4444;
    color: #ffffff;

    border: 2px solid #ffffff;
}


.notification-page {
    max-width: 1250px;
    margin: 0 auto;
}


.notification-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 22px;
}


.notification-eyebrow {
    display: inline-block;

    margin-bottom: 6px;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1.4px;

    color: #1687e8;
}


.notification-page-head h1 {
    margin: 0;

    font-size: 30px;
    font-weight: 900;

    color: #10233e;
}


.notification-page-head p {
    margin: 5px 0 0;

    color: #72869d;
}


.notification-read-all {
    border: 0;

    padding: 11px 16px;

    border-radius: 11px;

    background: #0f7be8;
    color: #ffffff;

    font-weight: 800;
}


.notification-list {
    display: grid;
    gap: 12px;
}


.notification-card {
    display: grid;

    grid-template-columns:
        46px
        minmax(0,1fr)
        auto;

    gap: 14px;

    align-items: center;

    padding: 17px;

    background: #ffffff;

    border:
        1px solid #dfe9f4;

    border-radius: 15px;

    box-shadow:
        0 7px 20px rgba(21,60,96,.05);
}


.notification-card.unread {
    border-left:
        4px solid #1687e8;
}


.notification-card.read {
    opacity: .78;
}


.notification-severity {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 12px;
}


.notification-severity.warning {
    background: #fff4cf;
    color: #b57900;
}


.notification-severity.critical {
    background: #ffe0e4;
    color: #d8283f;
}


.notification-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}


.notification-title-row strong {
    font-size: 15px;
    color: #142943;
}


.notification-new {
    padding: 3px 6px;

    border-radius: 999px;

    background: #e6f4ff;
    color: #0c78d4;

    font-size: 8px;
    font-weight: 900;
}


.notification-body p {
    margin: 5px 0;

    color: #536b84;
}


.notification-reason {
    margin-top: 7px;

    font-size: 12px;

    color: #3d5570;
}


.notification-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 9px;

    font-size: 10px;

    color: #8496a9;
}


.notification-actions {
    display: flex;
    flex-direction: column;
    gap: 7px;
}


.notification-open,
.notification-mark-read {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 90px;

    padding: 8px 11px;

    border-radius: 9px;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}


.notification-open {
    background: #e9f4ff;
    color: #0878d7;
}


.notification-mark-read {
    border: 1px solid #d8e4ef;

    background: #ffffff;

    color: #4f6780;
}


.notification-empty {
    padding: 55px 20px;

    text-align: center;

    background: #ffffff;

    border:
        1px solid #e1eaf3;

    border-radius: 16px;
}


.notification-empty i {
    font-size: 32px;

    color: #7d94ab;
}


/* ---------------- DARK ---------------- */

html[data-pradell-theme="dark"]
.notification-page-head h1,

html[data-pradell-theme="dark"]
.notification-title-row strong {

    color: #f4f8fc !important;
}


html[data-pradell-theme="dark"]
.notification-page-head p,

html[data-pradell-theme="dark"]
.notification-body p,

html[data-pradell-theme="dark"]
.notification-reason {

    color: #a9bbce !important;
}


html[data-pradell-theme="dark"]
.notification-card,

html[data-pradell-theme="dark"]
.notification-empty {

    background: #101f30 !important;

    border-color: #293e55 !important;

    color: #e8eef7 !important;
}


html[data-pradell-theme="dark"]
.notification-mark-read {

    background: #17283b;

    color: #d7e4f1;

    border-color: #31475e;
}


html[data-pradell-theme="dark"]
.pradell-notification-bell
.notification-dot {

    border-color: #0d1928;
}


@media (max-width: 800px) {

    .notification-card {

        grid-template-columns:
            42px
            1fr;
    }


    .notification-actions {

        grid-column:
            1 / -1;

        flex-direction: row;
    }


    .notification-page-head {

        align-items: flex-start;

        flex-direction: column;
    }
}