:root {
    --shell-navy: #13213b;
    --shell-slate: #223458;
    --shell-blue: #0077cc;
    --shell-blue-dark: #0063ab;
    --shell-blue-soft: #eaf4ff;
    --shell-ink: #1f2a44;
    --shell-muted: #4b5f7a;
    --shell-border: #dfe7f1;
    --shell-surface: rgba(255, 255, 255, 0.92);
    --shell-surface-strong: #ffffff;
    --shell-background: #f3f7fb;
    --shell-shadow: 0 22px 44px rgba(19, 33, 59, 0.08);
    --shell-shadow-soft: 0 12px 26px rgba(19, 33, 59, 0.06);
}

body {
    background:
        radial-gradient(circle at top right, rgba(0, 119, 204, 0.08), transparent 24%),
        linear-gradient(180deg, #f9fbfe 0%, var(--shell-background) 44%, #edf2f7 100%);
    color: var(--shell-ink);
}

body > .topbar {
    background: rgba(255, 255, 255, 0.84);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(223, 231, 241, 0.95);
    box-shadow: 0 10px 24px rgba(19, 33, 59, 0.04);
}

body > .topbar .wrap {
    max-width: 1200px;
    padding-top: 18px;
    padding-bottom: 18px;
}

.logo,
.sidebar-logo {
    font-weight: 900;
    letter-spacing: 0.9px;
}

.logo span,
.sidebar-logo span {
    color: var(--shell-blue);
}

.nav {
    gap: 14px;
}

.nav a {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.2px;
}

.nav .btn-main,
.nav .btn-main:visited,
.nav .btn-primary,
.nav .btn-primary:visited {
    color: #ffffff;
}

.nav .btn-outline,
.nav .btn-outline:visited,
.nav .btn-secondary,
.nav .btn-secondary:visited {
    color: var(--shell-navy);
}

.btn,
.search button,
.submit-btn,
.banner-cta,
.tbl-btn {
    min-height: 44px;
    border-radius: 12px;
}

.btn-main,
.btn-primary,
.search button,
.submit-btn,
.banner-cta {
    background: var(--shell-navy);
    color: #ffffff;
    box-shadow: 0 12px 28px rgba(19, 33, 59, 0.16);
}

.btn-main:hover,
.btn-primary:hover,
.search button:hover,
.submit-btn:hover,
.banner-cta:hover {
    background: var(--shell-blue);
    color: #ffffff;
}

.btn-outline,
.btn-secondary,
.tbl-btn {
    background: rgba(255, 255, 255, 0.9);
    color: var(--shell-navy);
    border: 1px solid var(--shell-border);
}

.btn-outline:hover,
.btn-secondary:hover,
.tbl-btn:hover {
    background: #f6f9fc;
}

.hero,
.stat-card,
.listing-table-wrap,
.inquiry-card,
.tenant-card,
.profile-card,
.modal,
.page-heading,
.page-aside,
.form-section,
.price-box,
.card {
    box-shadow: var(--shell-shadow);
}

.hero {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    padding: 52px 34px;
}

.hero::after {
    content: "";
    position: absolute;
    inset: auto -12% -22% auto;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 64%);
    pointer-events: none;
}

.search,
.card,
.price-box {
    border: 1px solid rgba(223, 231, 241, 0.98);
}

.card,
.price-box {
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
}

.price-box .label,
.stat-label,
.nav-section-label,
label,
label.field-label {
    letter-spacing: 0.7px;
}

.app-shell {
    grid-template-columns: 272px 1fr;
    background: transparent;
}

.sidebar {
    background: linear-gradient(180deg, #13213b 0%, #172849 60%, #1c3055 100%);
    box-shadow: 20px 0 40px rgba(19, 33, 59, 0.14);
}

.sidebar-header,
.sidebar-footer {
    border-color: rgba(255, 255, 255, 0.08);
}

.sidebar-user {
    margin-top: 14px;
}

.user-role {
    color: #94a6c1;
}

.nav-item {
    gap: 8px;
    padding: 12px 14px;
    border-radius: 14px;
    color: #d4deed;
    font-weight: 700;
}

.nav-item:hover,
.sign-out-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.nav-item.active {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(122, 179, 255, 0.18);
}

.nav-icon,
.empty-state-icon,
.banner-icon,
.verification-status span {
    display: none !important;
}

.sign-out-btn {
    min-height: 44px;
    border-radius: 12px;
    color: #d4deed;
    font-weight: 700;
}

.main-content > .topbar {
    background: rgba(255, 255, 255, 0.84);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(223, 231, 241, 0.92);
    box-shadow: 0 10px 30px rgba(19, 33, 59, 0.04);
}

.page-title {
    font-size: 24px;
    letter-spacing: -0.8px;
}

.page-section {
    padding: 34px 32px 40px;
}

.stats-grid {
    gap: 18px;
}

.stat-card,
.listing-table-wrap,
.tenant-card,
.profile-card,
.modal,
.inquiry-card {
    border: 1px solid rgba(223, 231, 241, 0.96);
}

.stat-card {
    border-radius: 18px;
    padding: 22px;
}

.listing-table-wrap,
.profile-card,
.tenant-card,
.inquiry-card,
.modal {
    border-radius: 20px;
}

.inquiry-card,
.tenant-card,
.profile-card {
    box-shadow: var(--shell-shadow-soft);
}

.section-hdr h2,
.profile-card h3,
.modal-title {
    letter-spacing: -0.3px;
}

.invensure-banner {
    border-radius: 22px;
    padding: 24px 26px;
    box-shadow: var(--shell-shadow);
}

.invensure-banner .banner-text .title {
    font-size: 18px;
    letter-spacing: -0.4px;
}

.invensure-banner .banner-cta {
    padding: 10px 18px;
}

.empty-state {
    padding: 54px 28px;
}

.empty-state::before {
    content: "";
    display: inline-block;
    width: 52px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--shell-navy), var(--shell-blue));
    margin-bottom: 18px;
}

.empty-state h3 {
    font-size: 20px;
}

footer {
    color: var(--shell-muted);
}

@media (max-width: 980px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .main-content > .topbar {
        padding-left: 20px;
        padding-right: 20px;
    }

    .page-section {
        padding: 24px 20px 32px;
    }
}