:root {
    --sensly-green: #24785a;
    --sensly-green-dark: #124b38;
    --sensly-green-soft: #e1f1e9;
    --sensly-blue-soft: #e2f0f7;
    --sensly-amber-soft: #f8e8bd;
    --sensly-ink: #18251f;
    --sensly-muted: #65736c;
    --sensly-paper: #f6f8f4;
    --sensly-card: #ffffff;
    --sensly-border: #dfe6df;
    --sensly-shadow: 0 20px 55px rgba(26, 63, 47, .1);
    --bs-primary: var(--sensly-green);
    --bs-primary-rgb: 36, 120, 90;
    --bs-body-font-family: "Manrope", "Segoe UI", Arial, sans-serif;
    --bs-body-color: var(--sensly-ink);
    --bs-body-bg: var(--sensly-paper);
    --bs-border-color: var(--sensly-border);
}

[data-bs-theme="dark"] {
    --sensly-green: #6cc29a;
    --sensly-green-dark: #123f30;
    --sensly-green-soft: #203b30;
    --sensly-blue-soft: #1c3542;
    --sensly-amber-soft: #493b1f;
    --sensly-ink: #edf3ef;
    --sensly-muted: #abb9b1;
    --sensly-paper: #101713;
    --sensly-card: #18221d;
    --sensly-border: #2c3b33;
    --sensly-shadow: 0 20px 55px rgba(0, 0, 0, .28);
    --bs-body-color: var(--sensly-ink);
    --bs-body-bg: var(--sensly-paper);
    --bs-secondary-color: var(--sensly-muted);
    --bs-border-color: var(--sensly-border);
}

html { scroll-behavior: smooth; }
body {
    min-height: 100vh;
    background: var(--sensly-paper);
    color: var(--sensly-ink);
    font-family: var(--bs-body-font-family);
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { text-decoration: none; }
.py-lg-6 { padding-top: 6.5rem; padding-bottom: 6.5rem; }
.text-secondary { color: var(--sensly-muted) !important; }
.text-sensly, .link-sensly { color: var(--sensly-green) !important; }
.section-label {
    color: var(--sensly-green);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .13em;
}
.section-label-light { color: #b8e1ce; }

.wordmark {
    color: var(--sensly-ink);
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -.07em;
    line-height: 1;
}
.wordmark:hover { color: var(--sensly-green); }
.device-wordmark {
    color: var(--sensly-green);
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: -.04em;
}

.sensly-navbar {
    min-height: 76px;
    background: color-mix(in srgb, var(--sensly-paper) 92%, transparent);
    border-bottom: 1px solid var(--sensly-border);
    backdrop-filter: blur(14px);
}
.sensly-navbar .nav-link { color: var(--sensly-muted); font-size: .9rem; font-weight: 600; }
.sensly-navbar .nav-link:hover { color: var(--sensly-green); }
.nav-account { color: var(--sensly-muted); font-size: .88rem; font-weight: 600; text-decoration: none; }
.nav-account:hover { color: var(--sensly-green); }
.sensly-navbar form { margin: 0; }
.theme-toggle {
    min-width: 72px;
    padding: .4rem .65rem;
    color: var(--sensly-muted);
    background: var(--sensly-card);
    border: 1px solid var(--sensly-border);
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
}
.theme-dark { display: none; }
[data-bs-theme="dark"] .theme-light { display: none; }
[data-bs-theme="dark"] .theme-dark { display: inline; }

.btn-sensly {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #24785a;
    border-color: #24785a;
    border-radius: .8rem;
    font-weight: 700;
}
.btn-sensly:hover, .btn-sensly:focus { color: #fff; background: #1d654b; border-color: #1d654b; }
.btn-outline-sensly { color: var(--sensly-green); border-color: var(--sensly-green); border-radius: .7rem; font-weight: 700; }
.btn-outline-sensly:hover { color: #fff; background: #24785a; border-color: #24785a; }
.btn-lg { padding: .8rem 1.35rem; font-size: .95rem; }
.flash-wrap { z-index: 1090; margin-top: 76px; }
.alert-success { color: #15553f; background: #dcf2e8; }

.hero-section {
    background:
        radial-gradient(circle at 85% 28%, color-mix(in srgb, var(--sensly-green-soft) 80%, transparent) 0 14rem, transparent 14.1rem),
        var(--sensly-paper);
    overflow: hidden;
}
.hero-section h1 { max-width: 44rem; letter-spacing: -.055em; }
.hero-section .lead { max-width: 38rem; font-size: 1.15rem; line-height: 1.75; }
.hero-points { font-size: .82rem; }
.hero-points span { display: inline-flex; align-items: center; gap: .45rem; }
.hero-points i { width: .4rem; height: .4rem; background: var(--sensly-green); border-radius: 50%; }

.sensor-showcase { position: relative; width: min(100%, 31rem); min-height: 31rem; display: grid; place-items: center; }
.sensor-glow { position: absolute; width: 25rem; height: 25rem; background: var(--sensly-green-soft); border-radius: 50%; }
.sensor-preview {
    position: relative;
    z-index: 1;
    width: 17rem;
    height: 20rem;
    padding: 1.75rem;
    color: #18251f;
    background: linear-gradient(145deg, #fff, #f2f6f2);
    border-radius: 2.1rem 2.1rem 2.1rem .8rem;
}
.online-badge { display: inline-flex; align-items: center; gap: .35rem; color: #567064; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.online-badge i { width: .4rem; height: .4rem; background: #32966c; border-radius: 50%; }
.sensor-temperature { display: flex; align-items: baseline; gap: .5rem; margin-top: 3.2rem; font-size: 4.15rem; font-weight: 700; line-height: 1; letter-spacing: -.07em; font-variant-numeric: tabular-nums; }
.sensor-temperature small { color: #68766f; font-size: 1.45rem; letter-spacing: 0; }
.sensor-humidity { display: flex; align-items: center; gap: .4rem; margin-top: 1.5rem; color: #53675d; line-height: 1.2; }
.sensor-humidity > i { width: .45rem; height: .45rem; background: #4f7162; border-radius: 50%; }
.sensor-humidity strong, .sensor-humidity span { font-size: 1rem; line-height: 1.2; letter-spacing: 0; }
.sensor-humidity strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.sensor-room { position: absolute; right: 1.75rem; bottom: 1.5rem; left: 1.75rem; padding-top: 1rem; border-top: 1px solid #dbe4dd; font-weight: 700; }
.comfort-card { position: absolute; z-index: 2; top: 4.2rem; right: 0; display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; color: #18251f; background: #fff; border: 1px solid #e0e6e1; border-radius: .9rem; }
.comfort-check { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; color: #24785a; background: #e1f1e9; border-radius: 50%; font-weight: 800; }
.comfort-card strong, .comfort-card small { display: block; }
.comfort-card strong { font-size: .78rem; }
.comfort-card small { color: #68766f; font-size: .62rem; margin-top: .15rem; }

.trust-bar { color: var(--sensly-muted); background: var(--sensly-card); border-color: var(--sensly-border) !important; font-size: .83rem; }
.card { color: var(--sensly-ink); background: var(--sensly-card); }
.room-card, .plan-card, .dashboard-card, .device-card, .auth-card { border-radius: 1.15rem; box-shadow: var(--sensly-shadow) !important; }
.room-live, .status-line { display: inline-flex; align-items: center; gap: .45rem; color: var(--sensly-muted); font-size: .75rem; }
.room-live i, .status-line i { width: .45rem; height: .45rem; background: #3b9b6d; border-radius: 50%; }
.room-temperature { font-size: 2.7rem; letter-spacing: -.06em; }
.room-card small { font-size: .65rem; letter-spacing: .08em; }
.room-status { display: flex; align-items: center; gap: .5rem; padding-top: 1rem; border-top: 1px solid var(--sensly-border); color: var(--sensly-muted); font-size: .8rem; }
.room-status span { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; color: var(--sensly-green); background: var(--sensly-green-soft); border-radius: 50%; font-weight: 800; }
.room-status.warn span { color: #875f0d; background: var(--sensly-amber-soft); }

.steps-section { color: #fff; background: #10503a; }
.step-card { padding: 1.75rem; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .12); border-radius: 1.2rem; }
.step-card small { color: #acd3c0; font-weight: 700; }
.step-card p { color: #d5e9df; font-size: .95rem; line-height: 1.75; }
.step-icon { display: grid; place-items: center; width: 4.75rem; height: 4.75rem; border-radius: 1.35rem 1.35rem 1.35rem .45rem; font-size: 1rem; font-weight: 800; box-shadow: 0 14px 28px rgba(0, 0, 0, .16); }
.step-green { color: #103e2e; background: #7ad7ad; }
.step-amber { color: #4d3710; background: #f1d184; font-size: 1.4rem; }
.step-blue { color: #17384b; background: #91cae9; }
.plan-plus { background: var(--sensly-green-soft); }
.closing-section { color: #c4d6cc; background: #122f24; }
.site-footer { color: #91a69b; background: #0d231b; font-size: .8rem; }

.auth-shell { min-height: calc(100vh - 76px); background: radial-gradient(circle at 50% 18%, var(--sensly-green-soft), transparent 42%); }
.auth-card .form-control, .modal .form-control { min-height: 3rem; border-color: var(--sensly-border); border-radius: .7rem; background: var(--sensly-paper); }
.form-control:focus { border-color: var(--sensly-green); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--sensly-green) 18%, transparent); }
.form-label, .form-check-label { font-size: .85rem; }

.dashboard-page { background: #eff3ee; }
[data-bs-theme="dark"] .dashboard-page { background: #0e1511; }
.dashboard-shell { min-height: calc(100vh - 76px); }
.dashboard-sidebar { flex: 0 0 250px; min-height: calc(100vh - 76px); background: var(--sensly-card); border-right: 1px solid var(--sensly-border); }
.dashboard-sidebar .nav-link { padding: .7rem .8rem; color: var(--sensly-muted); font-size: .86rem; }
.dashboard-sidebar .nav-link:hover { color: var(--sensly-green); background: var(--sensly-green-soft); }
.dashboard-sidebar .nav-link.active { color: var(--sensly-green); background: var(--sensly-green-soft); font-weight: 700; }
.dashboard-sidebar .badge { color: var(--sensly-green); background: color-mix(in srgb, var(--sensly-green) 12%, transparent); }
.plan-summary { background: var(--sensly-paper); }
.dashboard-content { min-width: 0; }
.dashboard-card { overflow: hidden; }
.summary-icon { display: grid; place-items: center; flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; color: var(--sensly-green); background: var(--sensly-green-soft); border-radius: .75rem; font-weight: 800; }
.summary-blue { color: #37728b; background: var(--sensly-blue-soft); }
.metric-buttons { padding: .2rem; background: var(--sensly-paper); border-radius: .65rem; }
.metric-buttons .btn { padding: .45rem .7rem; color: var(--sensly-muted); border: 0; border-radius: .5rem !important; font-size: .72rem; }
.metric-buttons .btn.active { color: var(--sensly-ink); background: var(--sensly-card); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
#reading-chart { display: block; width: 100%; height: 235px; }
.no-readings { min-height: 275px; }
.device-tabs { background: var(--sensly-card); }
.device-tabs .nav-link { min-width: 8rem; padding: .85rem; color: var(--sensly-muted); font-size: .76rem; border-right: 1px solid var(--sensly-border); }
.device-tabs .nav-link.active { color: var(--sensly-green); background: var(--sensly-green-soft); font-weight: 700; }
.sensor-details > div { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--sensly-border); font-size: .78rem; }
.sensor-details dt { color: var(--sensly-muted); font-weight: 500; }
.sensor-details dd { margin: 0; text-align: right; }
.device-card { color: var(--sensly-ink); transition: transform .18s ease, box-shadow .18s ease; }
.device-card:hover { color: var(--sensly-ink); transform: translateY(-3px); }
.device-card.selected { outline: 2px solid var(--sensly-green); }
.humidity-reading { color: #4e8aa4; font-size: .82rem; }
.empty-state { max-width: 42rem; margin-top: 4rem; }
.empty-state p { max-width: 34rem; }
.empty-sensor { display: grid; place-items: center; width: 6.3rem; height: 7.2rem; background: var(--sensly-paper); border: 1px solid var(--sensly-border); border-radius: 1.6rem 1.6rem 1.6rem .6rem; }
.modal-content { color: var(--sensly-ink); background: var(--sensly-card); border-radius: 1.15rem; }

@media (max-width: 991.98px) {
    .py-lg-6 { padding-top: 4.5rem; padding-bottom: 4.5rem; }
    .hero-section { background: var(--sensly-paper); }
    .sensor-showcase { min-height: 26rem; }
    .dashboard-content { width: 100%; }
}

@media (max-width: 767.98px) {
    .sensly-navbar { min-height: 68px; }
    .sensly-navbar .navbar-collapse { padding: 1rem 0 .35rem; }
    .flash-wrap { margin-top: 68px; }
    .hero-section h1 { font-size: clamp(2.8rem, 13vw, 4.2rem); }
    .sensor-showcase { min-height: 24rem; }
    .sensor-glow { width: 20rem; height: 20rem; }
    .sensor-preview { width: 15rem; height: 18rem; }
    .comfort-card { right: .25rem; top: 2.5rem; }
    .step-card { padding: 1.4rem; }
}

@media (max-width: 575.98px) {
    .wordmark { font-size: 1.5rem; }
    .hero-section .lead { font-size: 1rem; }
    .sensor-showcase { min-height: 22rem; }
    .sensor-glow { width: 18rem; height: 18rem; }
    .sensor-preview { width: 14rem; height: 17rem; padding: 1.4rem; }
    .sensor-temperature { margin-top: 2.6rem; font-size: 3.5rem; }
    .sensor-room { right: 1.4rem; bottom: 1.25rem; left: 1.4rem; }
    .comfort-card { max-width: 12.5rem; }
    .comfort-card small { display: none; }
    .dashboard-content h1 { font-size: 1.55rem; }
}