@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
    --ow-ink: #07131f;
    --ow-night: #0b1f2e;
    --ow-panel: #102b3d;
    --ow-panel-2: #15384c;
    --ow-line: rgba(177, 220, 235, .18);
    --ow-copy: #e8f5f8;
    --ow-muted: #9fc0ca;
    --ow-cyan: #55d6d2;
    --ow-cyan-dark: #1e999d;
    --ow-coral: #ff8f70;
    --ow-yellow: #ffd166;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    background: radial-gradient(circle at 80% -10%, rgba(85, 214, 210, .16), transparent 34rem), var(--ow-ink) !important;
    color: var(--ow-copy) !important;
    font-family: 'DM Sans', sans-serif !important;
    line-height: 1.65;
}
body::before {
    background-image: linear-gradient(rgba(177,220,235,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(177,220,235,.035) 1px, transparent 1px);
    background-size: 44px 44px;
    content: '';
    inset: 0;
    pointer-events: none;
    position: fixed;
    z-index: -1;
}
h1, h2, h3, .logo, .sidebar-brand { font-family: 'Space Grotesk', sans-serif !important; letter-spacing: -.02em; }
a { color: var(--ow-cyan); }
header {
    background: rgba(11, 31, 46, .96) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ow-line) !important;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.container { margin: 0 auto; max-width: 1100px; padding: 0 24px; }
.nav { align-items: center; display: flex; height: 72px; justify-content: space-between; }
.logo { color: var(--ow-copy) !important; font-size: 1.2rem; font-weight: 700; letter-spacing: .3px; text-decoration: none; }
.logo span { color: var(--ow-cyan) !important; }
.links { align-items: center; display: flex; gap: 22px; }
.links a { color: var(--ow-muted) !important; font-size: .95rem; text-decoration: none; }
.links a:hover { background: transparent !important; color: var(--ow-copy) !important; }
.top-bar { background: linear-gradient(90deg, var(--ow-cyan), var(--ow-coral)) !important; height: 4px !important; }
.card, .updates, .hero, .feature-card, .plus-section, .add-bot, .add-beacon, .content-container, .container > .container {
    background: rgba(16, 43, 61, .82) !important;
    border-color: var(--ow-line) !important;
    box-shadow: 0 18px 60px rgba(0,0,0,.16);
}
.hero { position: relative; overflow: hidden; }
.hero::after { background: var(--ow-coral); border-radius: 50%; content: ''; filter: blur(1px); height: 9px; position: absolute; right: 12%; top: 16%; width: 9px; }
.hero h1, .section-title, h1, h2, h3 { color: var(--ow-copy) !important; }
.hero p, .card p, .feature-card p, .section-subtitle, .update-text, .plus-section p, .add-bot p, .add-beacon p, .sidebar-footer, footer, .content-container p { color: var(--ow-muted) !important; }
.button, .btn { background: var(--ow-cyan) !important; border: 0 !important; border-radius: 7px !important; color: var(--ow-ink) !important; font-weight: 700; }
.button:hover, .btn:hover { background: #8ce8df !important; box-shadow: 0 8px 24px rgba(85,214,210,.22); transform: translateY(-2px); }
.btn-secondary { background: transparent !important; border: 1px solid var(--ow-line) !important; color: var(--ow-copy) !important; }
.btn-secondary:hover { border-color: var(--ow-cyan) !important; }
.sidebar, sidebar { background: rgba(7, 19, 31, .92) !important; border-color: var(--ow-line) !important; }
.sidebar-brand span, .sidebar-brand span:last-child, .logo span { color: var(--ow-cyan) !important; }
.sidebar-menu a, .links a, .footer-links a { color: var(--ow-muted) !important; }
.sidebar-menu a:hover, .sidebar-menu a.active, .links a:hover, .footer-links a:hover { background: rgba(85,214,210,.1) !important; color: var(--ow-copy) !important; border-color: var(--ow-cyan) !important; }
.auth-link { align-items: center; display: inline-flex; gap: 8px; }
.auth-profile { color: var(--ow-copy) !important; font-weight: 700; }
.auth-avatar { border: 2px solid var(--ow-cyan); border-radius: 50%; height: 28px; object-fit: cover; width: 28px; }
.section, .main-content { position: relative; }
footer { border-color: var(--ow-line) !important; }

body:has(.app-layout) { display: block !important; min-height: 100vh; }
.app-layout { display: block !important; margin-top: 0 !important; }
.top-bar { display: none !important; }
sidebar, .sidebar { display: none !important; }
.main-content { margin-left: 0 !important; padding: 0 24px !important; width: auto !important; }
.main-content > .hero, .main-content > .content-container { margin: 0 auto !important; max-width: 1100px !important; width: 100% !important; }
.main-content > .hero { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 80px 0 60px !important; text-align: left !important; }
.main-content > .hero h1 { font-size: 3rem !important; margin-bottom: 10px !important; }
.main-content > .hero p { max-width: 700px; }
.main-content > .section { max-width: 1100px !important; margin: 0 auto !important; padding: 32px 0 !important; }
.main-content > footer { max-width: 1100px !important; margin: 60px auto 0 !important; }
.main-content > .content-container { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 80px 0 32px !important; text-align: left !important; }
.main-content > .content-container h1 { font-size: 3rem !important; margin-bottom: 10px !important; }
.main-content > .content-container > div:not(.hidden) { max-width: 700px; }
.features-grid, .modules-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; }
.feature-card, .module-card { border-radius: 12px !important; padding: 24px !important; }
.plus-section, .add-bot, .add-beacon { border-radius: 12px !important; padding: 32px !important; text-align: left !important; }
body > .container { max-width: 1100px !important; padding: 80px 24px 32px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
body > .container h1 { border-bottom: 0 !important; font-size: 3rem !important; padding-bottom: 0 !important; }
body > nav { max-width: 1100px !important; padding: 0 24px; }
.docs-shell { max-width: 1100px !important; }
.docs-hero h1 { font-size: 3rem !important; }

@media (max-width: 768px) {
    .container { padding-left: 18px !important; padding-right: 18px !important; }
    .hero h1 { font-size: 2.25rem !important; }
    .nav { height: auto; min-height: 72px; }
    .links { flex-wrap: wrap; gap: 10px 14px; justify-content: flex-end; }
    .main-content { padding: 0 18px !important; }
    .main-content > .hero, .main-content > .content-container { padding: 50px 0 !important; }
    .main-content > .hero h1, .main-content > .content-container h1, body > .container h1, .docs-hero h1 { font-size: 2.25rem !important; }
}