:root {
    font-family:"DM Sans",sans-serif;
    color:#17212f;
    background:#f5f7fb;
    font-synthesis:none;
    text-rendering:optimizeLegibility;
    --ink:#17212f;
    --muted:#778397;
    --line:#e8ecf2;
    --blue:#4169e1;
    --blue-dark:#3155c7;
    --mint:#dff5ed;
    --surface:#fff;
    --shadow:0 12px 34px rgba(30,49,79,.055)
}
* {
    box-sizing:border-box
}
body {
    margin:0;
    min-width:320px
}
button,input,select {
    font:inherit
}
button,a {
    -webkit-tap-highlight-color:transparent
}
a {
    color:inherit;
    text-decoration:none
}
.app-shell {
    min-height:100vh
}
.sidebar {
    position:fixed;
    inset:0 auto 0 0;
    width:252px;
    background:#fff;
    border-right:1px solid var(--line);
    padding:28px 18px 20px;
    display:flex;
    flex-direction:column;
    z-index:5
}
.brand {
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 9px 43px;
    font:800 19px Manrope,sans-serif;
    letter-spacing:-.8px
}
.brand-mark {
    width:37px;
    height:37px;
    border-radius:12px;
    background:#4169e1;
    color:#fff;
    display:grid;
    place-items:center;
    font:800 20px Manrope;
    box-shadow:0 6px 14px #4169e144
}
.brand-light {
    font-weight:500;
    color:#627087
}
.brand small {
    display:block;
    margin-top:3px;
    color:#a0aaba;
    font:700 8px "DM Sans";
    letter-spacing:1.25px
}
.nav-caption,.eyebrow {
    font-size:9px;
    letter-spacing:1.5px;
    font-weight:700;
    color:#a0aaba
}
.nav-caption {
    padding:0 11px 12px
}
.primary-nav {
    display:grid;
    gap:5px
}
.primary-nav a {
    display:flex;
    gap:13px;
    align-items:center;
    padding:12px 13px;
    border-radius:10px;
    color:#68768a;
    font-size:13px;
    font-weight:600;
    transition:.18s
}
.primary-nav a:hover {
    background:#f5f7fc;
    color:var(--ink)
}
.primary-nav a.active {
    background:#edf2ff;
    color:var(--blue)
}
.nav-icon {
    width:17px;
    text-align:center;
    font-size:19px;
    font-weight:400
}
.sidebar-bottom {
    margin-top:auto
}
.learning-card {
    background:#f5f7fc;
    border:1px solid #edf0f6;
    padding:16px;
    border-radius:13px
}
.learning-icon {
    display:grid;
    place-items:center;
    width:27px;
    height:27px;
    border-radius:8px;
    background:#fff;
    color:#7f68d4;
    margin-bottom:12px
}
.learning-card strong {
    font:700 12px Manrope
}
.learning-card p {
    font-size:11px;
    line-height:1.55;
    color:var(--muted);
    margin:6px 0 0
}
.sidebar-footer {
    padding:20px 6px 0;
    color:#8b96a7;
    font-size:10px;
    display:flex;
    align-items:center;
    gap:8px
}
.status-dot,.local-badge i {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#54bd8a;
    display:inline-block
}
.main-area {
    margin-left:252px;
    min-height:100vh;
    display:flex;
    flex-direction:column
}
.topbar {
    height:76px;
    border-bottom:1px solid var(--line);
    background:#ffffffc9;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 clamp(24px,5vw,70px);
    position:sticky;
    top:0;
    z-index:4;
    backdrop-filter:blur(12px)
}
.breadcrumb {
    display:flex;
    align-items:center;
    gap:12px;
    color:#9aa4b3;
    font-size:12px
}
.breadcrumb b {
    font-weight:400;
    color:#d1d7e0
}
.breadcrumb strong {
    color:#253247;
    font-weight:600
}
.topbar-actions {
    display:flex;
    align-items:center;
    gap:18px
}
.local-badge {
    border:1px solid var(--line);
    padding:8px 11px;
    border-radius:30px;
    color:#738095;
    font-size:10px;
    display:flex;
    align-items:center;
    gap:7px
}
.local-badge i {
    width:6px;
    height:6px
}
.auth-area {
    min-width:70px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:9px
}
.user-label {
    font-size:11px;
    color:#67758a
}
.button {
    border:0;
    border-radius:8px;
    padding:9px 14px;
    font-size:11px;
    font-weight:700;
    cursor:pointer;
    transition:.18s
}
.button-primary {
    background:var(--blue);
    color:white;
    box-shadow:0 5px 12px #4169e133
}
.button-primary:hover {
    background:var(--blue-dark);
    transform:translateY(-1px)
}
.button-quiet {
    background:#f0f3f9;
    color:#536178
}
.button-quiet:hover {
    background:#e7ebf4
}
.mobile-menu {
    display:none;
    border:0;
    background:none;
    font-size:20px;
    color:#536178
}
.page-content {
    width:min(1120px,100%);
    margin:0 auto;
    padding:43px clamp(24px,5vw,70px) 56px;
    flex:1
}
.page-footer {
    border-top:1px solid var(--line);
    margin:0 clamp(24px,5vw,70px);
    padding:19px 0 23px;
    display:flex;
    justify-content:space-between;
    color:#a1aaba;
    font-size:9px;
    letter-spacing:.5px
}
.page-footer span:first-child {
    font-weight:700;
    letter-spacing:1.2px
}
.page-heading {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:27px;
    gap:20px
}
.eyebrow {
    margin-bottom:10px;
    color:#7791d6
}
.page-heading h1 {
    font:800 clamp(25px,3vw,34px) Manrope,sans-serif;
    letter-spacing:-1.3px;
    margin:0;
    color:#1b2738
}
.page-heading p {
    font-size:12px;
    line-height:1.6;
    color:#8390a2;
    margin:8px 0 0
}
.date-pill {
    white-space:nowrap;
    background:white;
    border:1px solid var(--line);
    border-radius:9px;
    color:#738095;
    font-size:10px;
    padding:10px 13px
}
.stats-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:15px;
    margin-bottom:20px
}
.stat-card,.panel,.welcome-card {
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:13px;
    box-shadow:var(--shadow)
}
.stat-card {
    padding:17px 18px;
    min-height:100px;
    display:flex;
    align-items:center;
    gap:14px
}
.stat-icon {
    height:38px;
    width:38px;
    display:grid;
    place-items:center;
    border-radius:11px;
    font-size:18px;
    background:#edf2ff;
    color:#5475dc
}
.stat-icon.green {
    background:#e8f7f0;
    color:#46a77a
}
.stat-icon.amber {
    background:#fff5e4;
    color:#d99732
}
.stat-label {
    font-size:10px;
    color:#8793a4;
    margin-bottom:5px
}
.stat-value {
    font:700 17px Manrope;
    color:#273449
}
.stat-note {
    font-size:9px;
    color:#a0aaba;
    margin-top:4px
}
.dashboard-grid {
    display:grid;
    grid-template-columns:1.6fr 1fr;
    gap:16px
}
.panel {
    padding:20px
}
.panel-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px
}
.panel-heading h2 {
    font:700 13px Manrope;
    margin:0;
    color:#273449
}
.panel-heading p {
    font-size:10px;
    color:#9aa4b3;
    margin:5px 0 0
}
.text-link {
    font-size:10px;
    color:var(--blue);
    font-weight:700
}
.sensor-list {
    display:grid;
    gap:2px;
    margin-top:12px
}
.sensor-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 0;
    border-bottom:1px solid #f0f2f6
}
.sensor-row:last-child {
    border-bottom:0
}
.sensor-name {
    font-size:11px;
    font-weight:700;
    color:#3c495d
}
.sensor-id {
    font-size:9px;
    color:#a0aaba;
    margin-top:4px
}
.sensor-reading {
    text-align:right;
    font:700 12px Manrope;
    color:#334258
}
.sensor-reading small {
    display:block;
    font:400 9px "DM Sans";
    color:#9aa4b3;
    margin-top:4px
}
.empty-state {
    color:#929eae;
    font-size:11px;
    padding:18px 0
}
.welcome-card {
    padding:23px;
    min-height:180px;
    background:linear-gradient(135deg,#edf3ff 0%,#f5f8ff 58%,#fff 100%);
    position:relative;
    overflow:hidden
}
.welcome-card:after {
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    border:1px solid #dbe5ff;
    border-radius:50%;
    right:-48px;
    top:-72px;
    box-shadow:0 0 0 23px #ffffff45,0 0 0 47px #ffffff38
}
.welcome-card h2 {
    position:relative;
    z-index:1;
    font:800 19px Manrope;
    letter-spacing:-.5px;
    margin:10px 0;
    color:#273957
}
.welcome-card p {
    position:relative;
    z-index:1;
    font-size:11px;
    line-height:1.7;
    max-width:280px;
    color:#7888a1
}
.welcome-kicker {
    font-size:9px;
    letter-spacing:1.3px;
    color:#6684ce;
    font-weight:700
}
.chart-panel {
    padding:20px;
    margin-top:18px
}
.chart-toolbar {
    display:flex;
    align-items:center;
    gap:9px
}
.chart-toolbar label {
    font-size:10px;
    color:#8490a0
}
.select-control {
    border:1px solid var(--line);
    background:#fff;
    border-radius:8px;
    color:#42516a;
    padding:9px 32px 9px 11px;
    font-size:10px;
    outline:none
}
.select-control:focus,input:focus {
    border-color:#92a8f1;
    box-shadow:0 0 0 3px #4169e117
}
.chart-meta {
    display:flex;
    gap:8px;
    margin:16px 0 4px
}
.metric-chip {
    background:#f7f8fb;
    border:1px solid #edf0f5;
    border-radius:7px;
    padding:7px 9px;
    font-size:9px;
    color:#8b97a7
}
.metric-chip strong {
    color:#44536a;
    font-size:10px;
    margin-left:4px
}
.chart-status {
    font-size:9px;
    color:#9aa4b3
}
.chart-status.connected {
    color:#4caa7d
}
.chart-wrap {
    height:330px;
    min-width:0
}
.notice {
    padding:12px 14px;
    border-radius:9px;
    background:#fff8e9;
    color:#907342;
    font-size:10px;
    line-height:1.6;
    margin-top:12px
}
.fragment-panel {
    overflow:auto
}
.fragment-panel table {
    font-size:11px;
    border-collapse:collapse;
    min-width:660px;
    width:100%
}
.fragment-panel th,.fragment-panel td {
    text-align:left;
    padding:10px 9px;
    border-bottom:1px solid var(--line)
}
.fragment-panel th {
    color:#768397;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.5px
}
.fragment-panel select {
    border:1px solid var(--line);
    border-radius:6px;
    padding:7px;
    background:white;
    color:#536178
}
.about-grid {
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:16px
}
.about-copy {
    font-size:12px;
    color:#728095;
    line-height:1.8
}
.feature-list {
    display:grid;
    gap:12px;
    margin-top:21px
}
.feature-item {
    display:flex;
    gap:11px;
    align-items:flex-start
}
.feature-check {
    width:22px;
    height:22px;
    border-radius:7px;
    background:#edf2ff;
    color:var(--blue);
    display:grid;
    place-items:center;
    flex:0 0 auto
}
.feature-item strong {
    display:block;
    font-size:11px;
    color:#40506a;
    margin:2px 0 4px
}
.feature-item span {
    font-size:10px;
    line-height:1.5;
    color:#8c98a8
}
.protected-panel {
    max-width:540px
}
.login-dialog {
    border:1px solid var(--line);
    border-radius:15px;
    padding:0;
    width:min(410px,calc(100vw - 30px));
    box-shadow:0 24px 90px #14233b33
}
.login-dialog::backdrop {
    background:#18263d66;
    backdrop-filter:blur(3px)
}
.login-dialog form {
    padding:29px;
    position:relative
}
.dialog-close {
    position:absolute;
    right:18px;
    top:15px;
    border:0;
    background:none;
    font-size:24px;
    color:#8995a5;
    cursor:pointer
}
.login-dialog h2 {
    font:800 24px Manrope;
    margin:0;
    color:#1e2c40
}
.login-dialog p {
    font-size:11px;
    color:#8490a0;
    line-height:1.6;
    margin:8px 0 22px
}
.login-dialog label {
    display:block;
    font-size:10px;
    color:#56657b;
    font-weight:700;
    margin:13px 0 6px
}
.login-dialog input {
    width:100%;
    border:1px solid var(--line);
    border-radius:8px;
    padding:11px;
    font-size:12px;
    outline:none
}
.dialog-submit {
    width:100%;
    margin-top:13px;
    padding:12px
}
.form-error {
    font-size:10px;
    color:#c25252;
    min-height:16px;
    margin-top:8px
}
.loader {
    color:#8995a5;
    font-size:11px;
    padding:18px 0
}
.mobile-menu {
    cursor:pointer
}
@media(max-width:900px) {
    .sidebar {
        width:218px
    }
    .main-area {
        margin-left:218px
    }
    .dashboard-grid {
        grid-template-columns:1fr
    }
    .welcome-card {
        min-height:150px
    }
}
@media(max-width:650px) {
    .sidebar {
        transform:translateX(-100%);
        transition:transform .22s ease;
        width:260px;
        box-shadow:12px 0 30px #1e31471a
    }
    .sidebar.open {
        transform:translateX(0)
    }
    .main-area {
        margin-left:0
    }
    .topbar {
        height:64px;
        padding:0 18px;
        gap:12px
    }
    .mobile-menu {
        display:block
    }
    .breadcrumb {
        margin-right:auto;
        gap:8px
    }
    .local-badge {
        display:none
    }
    .page-content {
        padding:30px 18px 42px
    }
    .page-footer {
        margin:0 18px;
        font-size:8px
    }
    .page-heading {
        align-items:flex-start;
        flex-direction:column
    }
    .stats-grid {
        grid-template-columns:1fr;
        gap:9px
    }
    .stat-card {
        min-height:77px;
        padding:12px 14px
    }
    .chart-panel {
        padding:15px
    }
    .chart-toolbar {
        align-items:flex-start;
        flex-direction:column
    }
    .chart-wrap {
        height:290px
    }
    .about-grid {
        grid-template-columns:1fr
    }
    .page-heading h1 {
        font-size:27px
    }
}