/*
 * ═══════════════════════════════════════════════════════════════
 *  Digias Public Pages — Aurora Bento Glass (2026)
 *  Home · Prices · Commands · Status
 *  Concept: compact masthead + glass bento workspace (not sweep-hero)
 * ═══════════════════════════════════════════════════════════════
 */

:root {
    --pub-glass: rgba(84, 126, 114, 0.10);
    --pub-glass-strong: rgba(84, 126, 114, 0.16);
    --pub-border: rgba(255, 255, 255, 0.12);
    --pub-blur: 28px;
    --pub-radius: 18px;
    --pub-shadow: 0 8px 32px rgba(0, 0, 0, 0.48);
    --pub-inset: inset 0 1px 0 rgba(255, 255, 255, 0.10);
    --pub-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Shared public canvas ── */
#page-home,
#page-home.active,
.page.route-page,
.page.route-page.active {
    background: transparent !important;
}

#page-home .home-system,
.page.route-page {
    position: relative;
    z-index: 1;
    color: #fff;
}

#page-home .home-system {
    background: transparent !important;
}

/* ── HOME — layered aurora + bento glass ── */
#page-home .sys-hero {
    min-height: auto !important;
    padding: calc(72px + 32px) 24px 48px !important;
    display: block !important;
}

#page-home .sys-hero::before {
    background:
        radial-gradient(ellipse 90% 60% at 50% -20%, rgba(84, 126, 114, 0.24), transparent 62%),
        radial-gradient(ellipse 40% 35% at 85% 30%, rgba(84, 126, 114, 0.12), transparent 55%) !important;
}

#page-home .sys-hero-inner {
    max-width: 1180px !important;
    gap: 32px !important;
}

#page-home .sys-hero-badge,
#page-home .sys-tag,
#page-home .sys-section-kicker,
.dp-welcome-kicker {
    background: var(--pub-glass) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--pub-border) !important;
    box-shadow: var(--pub-inset) !important;
}

#page-home .sys-hero-preview,
#page-home .sys-stat-card,
#page-home .sys-feature-card,
#page-home .sys-split-visual,
#page-home .dp-welcome-card,
#page-home .dp-welcome-item,
#page-home .dp-product-card,
#page-home .dp-panel-preview,
#page-home .dp-panel-widget,
#page-home .sys-mod-card,
#page-home .sys-chart-card,
#page-home .pricing-card,
#page-home .faq-item,
#page-home .support-card {
    background: var(--pub-glass) !important;
    backdrop-filter: blur(var(--pub-blur)) saturate(140%) !important;
    -webkit-backdrop-filter: blur(var(--pub-blur)) saturate(140%) !important;
    border: 1px solid var(--pub-border) !important;
    border-radius: var(--pub-radius) !important;
    box-shadow: var(--pub-shadow), var(--pub-inset) !important;
    transition: transform 0.3s var(--pub-ease), border-color 0.3s var(--pub-ease), box-shadow 0.3s var(--pub-ease) !important;
}

#page-home .sys-stat-card:hover,
#page-home .sys-feature-card:hover,
#page-home .dp-welcome-item:hover,
#page-home .dp-product-card:hover,
#page-home .faq-item:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(84, 126, 114, 0.32) !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.52), 0 0 28px rgba(84, 126, 114, 0.10), var(--pub-inset) !important;
}

#page-home .sys-preview-metric,
#page-home .sys-preview-ticker span,
#page-home .sys-preview-chart,
#page-home .dp-panel-sidebar,
#page-home .dp-panel-topbar {
    background: rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#page-home .sys-hero-copy h1 {
    font-size: clamp(32px, 5vw, 48px) !important;
    letter-spacing: -0.03em !important;
    line-height: 1.12 !important;
}

#page-home .sys-section {
    padding: 48px 24px !important;
}

#page-home .sys-section-head h2 {
    font-size: clamp(24px, 3.5vw, 32px) !important;
    letter-spacing: -0.02em !important;
}

#page-home .dp-products-grid {
    gap: 16px !important;
}

#page-home .dp-product-card.featured {
    border-color: rgba(84, 126, 114, 0.35) !important;
    box-shadow: var(--pub-shadow), 0 0 36px rgba(84, 126, 114, 0.12), var(--pub-inset) !important;
}

/* ── ROUTE PAGES — Studio Console (new layout concept) ── */
.page.route-page {
    background: transparent !important;
}

.route-shell {
    width: min(1140px, calc(100% - 28px)) !important;
    padding: calc(64px + env(safe-area-inset-top, 0px)) 0 72px !important;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Compact masthead — replaces heavy sweep hero */
.route-hero {
    min-height: 0 !important;
    padding: 28px 32px !important;
    display: flex !important;
    flex-direction: column;
    gap: 14px !important;
    align-content: stretch !important;
    background: var(--pub-glass) !important;
    backdrop-filter: blur(var(--pub-blur)) saturate(150%) !important;
    -webkit-backdrop-filter: blur(var(--pub-blur)) saturate(150%) !important;
    border: 1px solid var(--pub-border) !important;
    border-radius: var(--pub-radius) !important;
    box-shadow: var(--pub-shadow), var(--pub-inset) !important;
    overflow: visible !important;
}

.route-hero::before,
.route-hero::after {
    display: none !important;
}

.route-kicker {
    padding: 6px 14px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    background: rgba(84, 126, 114, 0.14) !important;
    border: 1px solid rgba(84, 126, 114, 0.28) !important;
    color: #547E72 !important;
}

.route-hero h1 {
    font-size: clamp(26px, 4vw, 38px) !important;
    font-weight: 900 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.15 !important;
    max-width: none !important;
    color: #fff !important;
}

.route-hero p {
    font-size: 15px !important;
    line-height: 1.65 !important;
    max-width: 62ch !important;
    color: #b8c2c8 !important;
}

.route-actions {
    margin-top: 8px !important;
    gap: 10px !important;
}

/* Metrics as inline bento chips */
.route-metrics {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
}

.route-metric {
    background: var(--pub-glass) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid var(--pub-border) !important;
    border-radius: 14px !important;
    padding: 18px 20px !important;
    box-shadow: var(--pub-inset) !important;
    transition: border-color 0.25s var(--pub-ease), transform 0.25s var(--pub-ease) !important;
}

.route-metric:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(84, 126, 114, 0.32) !important;
}

.route-metric strong {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: #547E72 !important;
    margin-bottom: 6px !important;
}

.route-metric span {
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: #b8c2c8 !important;
}

/* Glass workspace panels */
.route-section {
    background: var(--pub-glass) !important;
    backdrop-filter: blur(var(--pub-blur)) saturate(140%) !important;
    -webkit-backdrop-filter: blur(var(--pub-blur)) saturate(140%) !important;
    border: 1px solid var(--pub-border) !important;
    border-radius: var(--pub-radius) !important;
    padding: 28px !important;
    box-shadow: var(--pub-shadow), var(--pub-inset) !important;
}

.route-section-head h2 {
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: #fff !important;
}

.route-section-head p {
    color: #b8c2c8 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/* ── PRICES — catalog cards ── */
.price-calc-card {
    background: rgba(0, 0, 0, 0.32) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid var(--pub-border) !important;
    border-radius: 16px !important;
    padding: 24px !important;
}

.duration-btn {
    background: rgba(0, 0, 0, 0.40) !important;
    border: 1px solid var(--pub-border) !important;
    backdrop-filter: blur(12px) !important;
    transition: all 0.22s var(--pub-ease) !important;
}

.duration-btn.active,
.duration-btn:hover {
    background: rgba(84, 126, 114, 0.20) !important;
    border-color: rgba(84, 126, 114, 0.35) !important;
    color: #fff !important;
}

.route-pricing-grid,
.pricing-grid {
    gap: 16px !important;
}

.pricing-card {
    background: var(--pub-glass) !important;
    backdrop-filter: blur(var(--pub-blur)) !important;
    border: 1px solid var(--pub-border) !important;
    border-radius: var(--pub-radius) !important;
    box-shadow: var(--pub-shadow), var(--pub-inset) !important;
    transition: transform 0.28s var(--pub-ease), box-shadow 0.28s var(--pub-ease) !important;
}

.pricing-card:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(84, 126, 114, 0.35) !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.52), 0 0 28px rgba(84, 126, 114, 0.12) !important;
}

/* ── COMMANDS — unified terminal workspace ── */
.route-commands-browser,
.commands-browser {
    display: grid !important;
    grid-template-columns: 280px minmax(0, 1fr) !important;
    gap: 0 !important;
    margin-top: 0 !important;
    background: rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(var(--pub-blur)) !important;
    border: 1px solid var(--pub-border) !important;
    border-radius: var(--pub-radius) !important;
    overflow: hidden !important;
    box-shadow: var(--pub-shadow), var(--pub-inset) !important;
    min-height: 520px;
}

.commands-panel {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 20px !important;
}

.commands-panel:first-child {
    background: rgba(0, 0, 0, 0.28) !important;
    border-inline-end: 1px solid var(--pub-border) !important;
    position: sticky !important;
    top: 72px !important;
    align-self: start !important;
}

.commands-search {
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid var(--pub-border) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    margin-bottom: 14px !important;
}

.commands-tabs {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    max-height: 400px;
    overflow-y: auto;
}

.commands-tabs button,
.command-tab {
    text-align: start !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #b8c2c8 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all 0.2s var(--pub-ease) !important;
}

.commands-tabs button:hover,
.command-tab:hover {
    background: rgba(84, 126, 114, 0.10) !important;
    color: #fff !important;
}

.commands-tabs button.active,
.command-tab.active {
    background: rgba(84, 126, 114, 0.18) !important;
    border-color: rgba(84, 126, 114, 0.28) !important;
    color: #fff !important;
}

.commands-list-head {
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.commands-list-head h3 {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #fff !important;
}

.commands-count {
    background: rgba(84, 126, 114, 0.14) !important;
    border: 1px solid rgba(84, 126, 114, 0.28) !important;
    color: #547E72 !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
}

.command-item {
    background: rgba(0, 0, 0, 0.30) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    margin-bottom: 8px !important;
    transition: border-color 0.2s var(--pub-ease), background 0.2s var(--pub-ease) !important;
}

.command-item:hover {
    border-color: rgba(84, 126, 114, 0.30) !important;
    background: rgba(84, 126, 114, 0.08) !important;
}

.route-tip-grid {
    gap: 12px !important;
    margin-top: 0 !important;
}

.route-tip {
    background: var(--pub-glass) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid var(--pub-border) !important;
    border-radius: 14px !important;
    padding: 16px 18px !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

.route-tip i {
    color: #547E72 !important;
}

/* ── STATUS — monitoring board ── */
#page-status .route-hero {
    gap: 12px !important;
}

.status-updated {
    font-size: 13px !important;
    color: #8a969e !important;
}

.status-refresh-btn {
    background: var(--pub-glass) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid var(--pub-border) !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 10px 18px !important;
    transition: all 0.22s var(--pub-ease) !important;
}

.status-refresh-btn:hover {
    border-color: rgba(84, 126, 114, 0.35) !important;
    background: rgba(84, 126, 114, 0.14) !important;
    box-shadow: 0 0 20px rgba(84, 126, 114, 0.10) !important;
}

.status-error-banner {
    background: rgba(84, 126, 114, 0.12) !important;
    border: 1px solid var(--pub-border) !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
}

.status-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 14px !important;
    margin-top: 0 !important;
}

.status-card {
    background: var(--pub-glass) !important;
    backdrop-filter: blur(var(--pub-blur)) saturate(140%) !important;
    -webkit-backdrop-filter: blur(var(--pub-blur)) saturate(140%) !important;
    border: 1px solid var(--pub-border) !important;
    border-radius: var(--pub-radius) !important;
    padding: 22px !important;
    min-height: 150px !important;
    box-shadow: var(--pub-shadow), var(--pub-inset) !important;
    transition: transform 0.28s var(--pub-ease), border-color 0.28s var(--pub-ease) !important;
}

.status-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(84, 126, 114, 0.32) !important;
}

.status-card-head h3 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #fff !important;
}

.status-badge {
    background: rgba(84, 126, 114, 0.14) !important;
    border: 1px solid rgba(84, 126, 114, 0.28) !important;
    color: #547E72 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

.status-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #547E72;
    box-shadow: 0 0 8px rgba(84, 126, 114, 0.60);
}

/* ── Shared buttons on public pages ── */
.btn-hero-primary {
    background: linear-gradient(135deg, rgba(84, 126, 114, 0.55), rgba(84, 126, 114, 0.30)) !important;
    border: 1px solid rgba(84, 126, 114, 0.35) !important;
    box-shadow: 0 0 28px rgba(84, 126, 114, 0.14), var(--pub-inset) !important;
}

.btn-hero-outline {
    background: var(--pub-glass) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid var(--pub-border) !important;
}

.btn-hero-primary:hover,
.btn-hero-outline:hover {
    transform: translateY(-2px) !important;
}

/* ── Mobile ── */
@media (max-width: 900px) {
    .route-metrics {
        grid-template-columns: 1fr !important;
    }

    .route-commands-browser,
    .commands-browser {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
    }

    .commands-panel:first-child {
        position: relative !important;
        top: auto !important;
        border-inline-end: none !important;
        border-bottom: 1px solid var(--pub-border) !important;
    }

    .commands-tabs {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        max-height: none !important;
        padding-bottom: 4px;
    }

    .commands-tabs button,
    .command-tab {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    #page-home .sys-hero-inner {
        grid-template-columns: 1fr !important;
        text-align: center;
    }

    #page-home .sys-hero-actions,
    #page-home .sys-hero-tags {
        justify-content: center !important;
    }

    #page-home .sys-stats-strip {
        grid-template-columns: 1fr 1fr !important;
    }

    .route-tip-grid {
        grid-template-columns: 1fr !important;
    }

    .route-shell {
        width: calc(100% - 20px) !important;
        padding-top: calc(60px + env(safe-area-inset-top, 0px)) !important;
    }

    .route-hero {
        padding: 22px 20px !important;
    }

    .route-section {
        padding: 20px 18px !important;
    }
}

@media (max-width: 480px) {
    #page-home .sys-stats-strip {
        grid-template-columns: 1fr !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .route-metric:hover,
    .pricing-card:hover,
    .status-card:hover,
    #page-home .dp-product-card:hover {
        transform: none !important;
    }
}