.demo-topbar {position:sticky;top:0;z-index:10;gap:16px;background:#fff}
.demo-logo {display:flex;align-items:center;background:#101b2d;border-radius:9px;padding:5px 8px}
.demo-logo img {display:block;width:106px;height:32px;object-fit:contain}
.demo-brand-title {display:grid;line-height:1.15;font-size:16px;font-weight:800}
.demo-brand-title small {font-size:9px;letter-spacing:.08em;color:#718097}
.demo-workspace {display:grid;grid-template-columns:248px minmax(0,1fr);min-height:calc(100vh - 68px);background:#f5f7fb;color:#14243a}
.demo-sidebar {background:#101b2d;color:#dce6f3;padding:30px 16px}
.demo-sidebar nav {display:grid;gap:5px}
.demo-sidebar p {margin:0 12px 8px;color:#9caec4;font-size:10px;letter-spacing:.14em;font-weight:800}
.demo-sidebar a {padding:11px 13px;border-radius:10px;color:#c7d4e5;font-weight:600}
.demo-sidebar a:hover,.demo-sidebar a:focus-visible,.demo-sidebar .demo-active {background:#253b58;color:#fff}
.demo-main.page-shell {width:100%;max-width:1640px;min-width:0;margin:0 auto;padding:clamp(20px,3vw,46px)}
.demo-main [id] {scroll-margin-top:95px}
.demo-page-heading {display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:24px}
.demo-page-heading h1 {margin:0;font-size:clamp(25px,3vw,38px);letter-spacing:-.04em}
.demo-page-heading p,.demo-card p,.demo-card small {color:#65758a}
.demo-page-heading p {margin:8px 0 0}
.demo-stats {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:22px}
.demo-card {min-width:0;padding:20px;background:#fff;border:1px solid #e5eaf1;border-radius:17px;box-shadow:0 12px 40px rgba(19,40,69,.065)}
.demo-card h2 {margin:0 0 12px;font-size:18px}
.demo-stats .demo-card {display:grid;align-content:start;gap:7px}
.demo-stats .demo-card span {color:#52657d;font-size:13px}
.demo-stats strong {font-size:28px;line-height:1.1}
.demo-stats .demo-status,.demo-stats .demo-theme {font-size:20px}
.demo-status {color:#168969}
.demo-dashboard-grid {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.demo-dashboard-stack {display:grid;gap:20px}
.demo-banner {background:#192b44;color:#fff;padding:28px}
.demo-banner h2 {font-size:25px}
.demo-banner p {color:#d1deed}
.demo-actions,.demo-preview-heading {display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.demo-preview-heading {justify-content:space-between;margin-bottom:12px}
.demo-preview-heading h2 {margin:0}
.demo-phone {display:block;width:min(100%,295px);height:465px;margin:0 auto 12px;background:#111820;border:8px solid #1c2a3b;border-radius:27px}
.demo-phone-empty {height:auto;min-height:270px;padding:20px;color:#fff;display:grid;align-content:center;justify-items:center;gap:16px;text-align:center}
.demo-device-link {overflow-wrap:anywhere}
@media (max-width:1100px){.demo-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:880px){.demo-workspace{grid-template-columns:minmax(0,1fr)}.demo-sidebar{padding:12px 16px}.demo-sidebar nav{display:flex;flex-wrap:wrap;align-items:center}.demo-sidebar p{margin:0 10px 0 0}}
@media (max-width:650px){.demo-dashboard-grid{grid-template-columns:minmax(0,1fr)}.demo-page-heading{align-items:start;flex-direction:column}.demo-topbar{position:static}.demo-card{padding:14px}}

.demo-invite-header.topbar {width:100%;max-width:none;justify-content:flex-start;padding-inline:clamp(18px,3vw,46px)}
.demo-invite-main.page-shell {width:100%;max-width:1320px;margin-inline:auto;padding:clamp(22px,3vw,48px) clamp(16px,3vw,40px)}
.demo-invite-grid {display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(16px,2vw,30px);align-items:stretch}
.demo-invite-hero,.demo-invite-card {border-radius:20px;padding:clamp(24px,3vw,42px)}
.demo-invite-hero {position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:48px;color:#fff;background:linear-gradient(145deg,#111b2c,#203955)}
.demo-invite-hero::after {content:"";position:absolute;z-index:-1;right:-185px;bottom:-190px;width:400px;aspect-ratio:1;border:1px solid rgba(255,255,255,.08);border-radius:50%;box-shadow:0 0 0 60px rgba(255,255,255,.035),0 0 0 125px rgba(255,255,255,.022)}
.demo-invite-eyebrow,.demo-invite-hero small {font-size:11px;font-weight:750;letter-spacing:.17em}
.demo-invite-hero .demo-invite-eyebrow,.demo-invite-hero small {color:#a8c4e0}
.demo-invite-hero h1 {margin:12px 0;font-size:clamp(31px,4vw,53px);font-weight:850;line-height:1.04;letter-spacing:-.045em;color:#fff}
.demo-invite-hero p {max-width:39ch;color:#c4d9ec}
.demo-invite-card {background:#fff;border:1px solid #e5eaf1;box-shadow:0 14px 50px rgba(19,40,69,.07)}
.demo-invite-step {display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:14px;border-bottom:4px solid #2a709c;color:#456483}
.demo-invite-step span:last-child {background:#e9f1fc;border-radius:20px;padding:5px 10px;font-size:12px;font-weight:700}
.demo-invite-card h2 {margin:0;font-size:clamp(23px,3vw,32px);line-height:1.15;letter-spacing:-.035em;color:#14243a}
.demo-invite-card > p,.demo-invite-form small {color:#61768f}
.demo-invite-form {margin-top:24px}
.demo-invite-form label {font-size:13px}
.demo-invite-form label input {width:100%;min-height:43px}
.demo-invite-form .button-primary {background:#16273e}
.demo-invite-links {display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:15px;color:#365d83;font-size:13px}
.demo-invite-links a {text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){.demo-invite-grid{grid-template-columns:minmax(0,1fr)}.demo-invite-hero{gap:20px}.demo-invite-hero h1 br{display:none}}

.demo-topbar .demo-brand-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: normal;
}

.demo-topbar .demo-brand-title small {
    font-weight: 500;
    letter-spacing: .02em;
}

@media (min-width: 901px) {
    .demo-topbar .topnav {
        margin-inline-start: 24px;
    }
}

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

@media (max-width: 880px) {
    .demo-topbar:has(.mobile-panel-menu) {
        position: relative;
        justify-content: space-between;
    }

    .demo-topbar:has(.mobile-panel-menu) > .topnav,
    .demo-topbar:has(.mobile-panel-menu) > .top-actions,
    .demo-workspace > .demo-sidebar {
        display: none;
    }

    .mobile-panel-menu {
        display: block;
    }

    .mobile-panel-menu summary {
        list-style: none;
        cursor: pointer;
        padding: 9px 12px;
        border: 1px solid #dbe4ef;
        border-radius: 9px;
        color: #203a55;
        font-size: 14px;
        font-weight: 700;
    }

    .mobile-panel-menu summary::-webkit-details-marker {
        display: none;
    }

    .mobile-panel-links {
        position: absolute;
        inset: 100% 12px auto;
        max-height: 70vh;
        overflow: auto;
        border-radius: 12px;
        background: #101b2d;
        box-shadow: 0 12px 28px #101b2d33;
    }

    .mobile-panel-links .demo-sidebar nav,
    .mobile-panel-actions {
        display: grid;
        gap: 4px;
    }

    .mobile-panel-actions {
        padding: 0 16px 14px;
    }

    .mobile-panel-actions a {
        padding: 10px 13px;
        color: #dce6f3;
    }

    .mobile-panel-actions form {
        padding: 4px 13px;
    }
}