:root {
    --bg: #f3f7f3;
    --surface: #ffffff;
    --surface-soft: #f7faf7;
    --surface-green: #eef7ef;
    --text: #17211a;
    --muted: #68736b;
    --border: #dfe8e0;
    --green-950: #12351f;
    --green-900: #174b2c;
    --green-800: #1c5e35;
    --green-700: #237542;
    --green-600: #2d8a4d;
    --green-500: #3ca45e;
    --green-100: #e8f5eb;
    --amber: #d78c18;
    --amber-bg: #fff7e8;
    --red: #c94b4b;
    --red-bg: #fff0f0;
    --blue: #377bb5;
    --shadow:
        0 10px 30px
        rgba(25, 72, 42, 0.07);
    --shadow-soft:
        0 7px 22px
        rgba(25, 72, 42, .045);
    --shadow-hover:
        0 13px 34px
        rgba(25, 72, 42, .075);
    --radius-xl: 18px;
    --radius-lg: 14px;
    --radius-md: 10px;
    --control-height: 40px;
    --focus-ring:
        0 0 0 3px
        rgba(60, 164, 94, .11);
}

* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    background: var(--bg);
    scroll-behavior: smooth;
    color-scheme: light;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background:
        radial-gradient(
            circle at 85% 5%,
            rgba(78, 146, 87, 0.08),
            transparent 28%
        ),
        var(--bg);
    font-family:
        Inter,
        "Microsoft YaHei",
        "PingFang SC",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    min-height: 100vh;
    color: var(--text);
    font-size: 14px;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.guest-preview{max-width:1240px;margin:0 auto;padding:28px 22px 48px}.guest-preview-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;padding:6px 0 20px}.guest-preview-head h1{margin:3px 0 8px;font-size:32px;letter-spacing:-.04em}.guest-preview-head p{margin:0;color:var(--muted)}.guest-preview-chip{display:inline-flex;align-items:center;min-height:34px;padding:0 13px;border:1px solid #b8d9bf;border-radius:999px;background:var(--green-100);color:var(--green-800);font-size:13px;font-weight:750;white-space:nowrap}.guest-preview-note{margin-bottom:18px;padding:14px 16px;border:1px solid #e7d4a2;border-radius:12px;background:#fffaf0;color:#755b25}.guest-empty-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.guest-empty-card{min-height:158px;padding:19px;border:1px solid var(--border);border-radius:var(--radius-lg);background:linear-gradient(135deg,#fff,#f7faf8);box-shadow:var(--shadow-soft)}.guest-empty-card-large{grid-column:span 2;min-height:280px}.guest-empty-card-wide{grid-column:span 3;min-height:216px}.guest-empty-label{display:block;margin-bottom:22px;color:#91a096;font-size:13px;font-weight:700}.guest-empty-value{width:54%;height:34px;border-radius:8px;background:linear-gradient(90deg,#eef3ef,#f8faf8,#eef3ef)}.guest-empty-lines{display:grid;gap:15px}.guest-empty-lines i{display:block;height:11px;border-radius:999px;background:linear-gradient(90deg,#edf2ee,#f9fbf9,#edf2ee)}.guest-empty-lines i:nth-child(2){width:78%}.guest-empty-lines i:nth-child(3){width:58%}.guest-empty-lines i:nth-child(4){width:88%}.guest-account-action{display:grid;gap:7px;margin:0 0 18px;padding:20px;border:1px solid #c8e0cd;border-radius:14px;background:var(--green-100)}.guest-account-action strong{font-size:17px}.guest-account-action span{color:var(--muted)}.guest-account-action div{display:flex;flex-wrap:wrap;gap:10px;margin-top:5px}.guest-primary-link,.guest-secondary-link{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 14px;border-radius:9px;font-weight:750;text-decoration:none}.guest-primary-link{background:var(--green-700);color:#fff}.guest-secondary-link{border:1px solid #b9cfbd;background:#fff;color:var(--green-800)}@media(max-width:760px){.guest-preview{padding:22px 14px 36px}.guest-preview-head{display:grid}.guest-empty-card-grid{grid-template-columns:1fr}.guest-empty-card-large,.guest-empty-card-wide{grid-column:auto;min-height:170px}.guest-preview-head h1{font-size:27px}}

/* Keep the basic user navigation safe even if the account lookup is delayed
   or an older browser still has the preceding common.js in cache. */
body[data-viewer-mode="viewer"] [data-admin-only]{display:none!important}

::selection {
    background: #dceddf;
    color: #17371f;
}

button,
input,
select,
textarea,
a {
    -webkit-tap-highlight-color:
        transparent;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
    outline: none;
    box-shadow:
        var(--focus-ring);
}

.side-nav a:focus-visible {
    box-shadow:
        inset 3px 0 0
        #79ce86,
        0 0 0 3px
        rgba(121, 206, 134, .13);
}

* {
    scrollbar-width: thin;
    scrollbar-color:
        #b9c9bc
        transparent;
}

*::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background:
        #b9c9bc;
    background-clip:
        padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background:
        #9daf9f;
    background-clip:
        padding-box;
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    transform: none;
    width: 244px;
    display: flex;
    flex-direction: column;
    padding: 22px 16px 18px;
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            #123c23 0%,
            #0e321d 48%,
            #0b2918 100%
        );
    color: #fff;
    box-shadow:
        12px 0 34px
        rgba(12, 47, 25, .08);
    z-index: 50;
}

.sidebar::before {
    content: "";
    position: absolute;
    inset: auto -50px -110px -55px;
    height: 260px;
    opacity: .22;
    background:
        repeating-linear-gradient(
            -18deg,
            transparent 0,
            transparent 22px,
            rgba(107, 184, 116, .20) 23px,
            rgba(107, 184, 116, .20) 25px
        );
    transform:
        rotate(-2deg);
    pointer-events: none;
}

.sidebar::after {
    content: "";
    position: absolute;
    inset: 0;
    border-right: 1px solid
        rgba(255,255,255,.04);
    pointer-events: none;
}

.sidebar-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}

.sidebar-glow-one {
    top: -90px;
    right: -88px;
    width: 220px;
    height: 220px;
    background:
        radial-gradient(
            circle,
            rgba(84, 169, 99, .16),
            transparent 68%
        );
}

.sidebar-glow-two {
    left: -120px;
    bottom: 100px;
    width: 250px;
    height: 250px;
    background:
        radial-gradient(
            circle,
            rgba(51, 134, 79, .13),
            transparent 69%
        );
}

.brand {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 3px 7px 18px;
    z-index: 1;
}

.brand-mark {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    flex: 0 0 56px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.brand-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
    filter:
        drop-shadow(
            0 5px 13px
            rgba(0,0,0,.16)
        );
}

.brand-copy {
    min-width: 0;
}

.brand-title-row {
    display: flex;
    align-items: center;
    gap: 7px;
}

.brand-title {
    overflow: hidden;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .015em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-account-name {
    max-width: 86px;
    overflow: hidden;
    color: var(--muted, #748078);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-admin-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 18px;
    padding: 0 5px;
    border: 1px solid
        rgba(142, 213, 151, .25);
    border-radius: 5px;
    background:
        rgba(93, 175, 106, .12);
    color:
        rgba(189, 235, 195, .88);
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .08em;
}

.brand-subtitle {
    margin-top: 4px;
    overflow: hidden;
    color:
        rgba(255,255,255,.53);
    font-size: 9px;
    font-weight: 650;
    letter-spacing: .085em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.brand-divider {
    position: relative;
    height: 1px;
    margin: 0 8px 14px;
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.13),
            rgba(255,255,255,.025)
        );
    z-index: 1;
}

.nav-section-label {
    position: relative;
    display: flex;
    align-items: center;
    padding: 5px 11px 9px;
    color:
        rgba(255,255,255,.38);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .13em;
    z-index: 1;
}

.side-nav {
    position: relative;
    display: grid;
    gap: 7px;
    z-index: 1;
}

.side-nav a {
    position: relative;
    display: grid;
    grid-template-columns:
        34px minmax(0, 1fr) 7px;
    gap: 9px;
    align-items: center;
    min-height: 54px;
    padding: 7px 10px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 13px;
    color:
        rgba(255,255,255,.70);
    text-decoration: none;
    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease;
}

.side-nav a::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background:
        linear-gradient(
            100deg,
            rgba(104, 194, 119, .14),
            rgba(104, 194, 119, .04)
        );
    transition:
        opacity .18s ease;
    pointer-events: none;
}

.side-nav a:hover {
    border-color:
        rgba(255,255,255,.055);
    background:
        rgba(255,255,255,.045);
    color: #fff;
    transform:
        translateX(1px);
}

.side-nav a:hover::before {
    opacity: .55;
}

.side-nav a.active {
    border-color:
        rgba(119, 204, 132, .13);
    background:
        rgba(76, 159, 91, .17);
    color: #fff;
    box-shadow:
        inset 3px 0 0
        #79ce86,
        0 7px 20px
        rgba(0,0,0,.07);
}

.side-nav a.active::before {
    opacity: 1;
}

.nav-icon {
    position: relative;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid
        rgba(255,255,255,.07);
    border-radius: 10px;
    background:
        rgba(255,255,255,.045);
    color:
        rgba(226, 245, 229, .78);
    font-size: 16px;
    line-height: 1;
    z-index: 1;
}

.side-nav a.active .nav-icon {
    border-color:
        rgba(134, 216, 146, .18);
    background:
        rgba(103, 191, 117, .16);
    color: #dff6e3;
}

.nav-copy {
    position: relative;
    min-width: 0;
    z-index: 1;
}

.nav-title {
    display: block;
    overflow: hidden;
    font-size: 13px;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-desc {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color:
        rgba(255,255,255,.37);
    font-size: 8px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.side-nav a.active .nav-desc {
    color:
        rgba(223, 246, 227, .52);
}

.nav-active-dot {
    position: relative;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    opacity: 0;
    background: #83d88f;
    box-shadow:
        0 0 0 4px
        rgba(131,216,143,.08);
    transition:
        opacity .18s ease;
    z-index: 1;
}

.side-nav a.active .nav-active-dot {
    opacity: 1;
}

.sidebar-foot {
    position: relative;
    margin-top: auto;
    padding: 13px;
    border: 1px solid
        rgba(255,255,255,.08);
    border-radius: 14px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.025)
        );
    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.025);
    z-index: 1;
}

.sidebar-foot-head {
    display: flex;
    align-items: center;
    gap: 7px;
}

.sidebar-foot-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #67c979;
    box-shadow:
        0 0 0 4px
        rgba(103,201,121,.09);
}

.sidebar-foot-title {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .02em;
}

.sidebar-foot-project {
    margin-top: 10px;
    color:
        rgba(255,255,255,.77);
    font-size: 11px;
    font-weight: 720;
}

.sidebar-foot-text {
    margin-top: 4px;
    color:
        rgba(255,255,255,.42);
    font-size: 9px;
    line-height: 1.55;
}

.sidebar-foot-version {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 11px;
    padding-top: 9px;
    border-top: 1px solid
        rgba(255,255,255,.06);
    color:
        rgba(255,255,255,.28);
    font-size: 7px;
    font-weight: 750;
    letter-spacing: .075em;
}

.sidebar-foot-version span:last-child {
    color:
        rgba(140, 217, 152, .68);
}


.container {
    width: calc(100% - 244px);
    max-width: none;
    min-width: 0;
    min-height: 100vh;
    margin: 0 0 0 244px;
    padding:
        clamp(22px, 2vw, 34px)
        clamp(20px, 2.2vw, 42px)
        max(50px, env(safe-area-inset-bottom));
}

.page-kicker {
    margin-bottom: 7px;
    color: var(--green-700);
    font-size: 10px;
    font-weight: 820;
    letter-spacing: .14em;
    line-height: 1.3;
    text-transform: uppercase;
}

h1 {
    margin: 0;
    color: #26342b;
    font-size:
        clamp(27px, 2.1vw, 32px);
    font-weight: 820;
    line-height: 1.16;
    letter-spacing: -.035em;
}

h2 {
    margin: 0 0 15px;
    color: #2f3d34;
    font-size: 18px;
    font-weight: 810;
    line-height: 1.25;
    letter-spacing: -.018em;
}

.page-subtitle {
    max-width: 820px;
    margin-top: 8px;
    color: #6f7b73;
    font-size: 13px;
    line-height: 1.68;
}

.panel,
.chart-box {
    margin-top: 18px;
    padding: 20px;
    border: 1px solid #dfe7e0;
    border-radius: var(--radius-xl);
    background:
        rgba(255,255,255,.965);
    box-shadow:
        var(--shadow-soft);
}

.panel {
    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.panel:hover {
    border-color: #d6e1d8;
}

.muted {
    color: #78847c;
    font-size: 11px;
    line-height: 1.55;
}

.notice {
    margin: 14px 0;
    padding: 13px 15px;
    border: 1px solid #d8eadb;
    border-left: 4px solid
        var(--green-600);
    border-radius: 12px;
    background: #f1f8f2;
    color: #35563d;
    font-size: 13px;
    line-height: 1.7;
}

.danger-notice {
    border-color: #f2d3d3;
    border-left-color: var(--red);
    background: var(--red-bg);
    color: #7e3535;
}

button {
    min-height: 38px;
    padding: 7px 13px;
    border: 1px solid #ccd7ce;
    border-radius: var(--radius-md);
    background: #fff;
    color: #35423a;
    font: inherit;
    font-size: 11px;
    font-weight: 720;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
    transition:
        transform .14s ease,
        border-color .14s ease,
        background .14s ease,
        color .14s ease,
        box-shadow .14s ease;
}

button:hover {
    transform: translateY(-1px);
    border-color:
        #94bea0;
    background: #fbfdfb;
    box-shadow:
        0 6px 18px
        rgba(37, 117, 66, .065);
}

button:active {
    transform: translateY(0);
    box-shadow: none;
}

button.primary {
    border-color:
        var(--green-700);
    background:
        var(--green-700);
    color: #fff;
}

button.primary:hover {
    background:
        var(--green-800);
}

button.danger {
    border-color: var(--red);
    background: var(--red);
    color: #fff;
}

button.warning {
    border-color: var(--amber);
    background: var(--amber);
    color: #fff;
}

button:disabled {
    transform: none;
    opacity: .48;
    cursor: not-allowed;
    box-shadow: none;
}

input,
select,
textarea {
    width: 100%;
    min-height: var(--control-height);
    border: 1px solid #cfd9d1;
    border-radius: var(--radius-md);
    background: #fff;
    padding: 8px 11px;
    color: #334038;
    font: inherit;
    font-size: 11px;
    line-height: 1.35;
    outline: none;
    transition:
        border-color .14s ease,
        box-shadow .14s ease,
        background .14s ease;
}

input::placeholder,
textarea::placeholder {
    color: #a0aaa2;
    opacity: 1;
}

input:focus,
select:focus,
textarea:focus {
    border-color:
        #6eae7d;
    box-shadow:
        var(--focus-ring);
}

input:disabled,
select:disabled,
textarea:disabled {
    background: #f4f6f4;
    color: #919a93;
    cursor: not-allowed;
}

textarea {
    min-height: 78px;
    resize: vertical;
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 14px;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 900px;
}

th,
td {
    padding: 10px 10px;
    border-bottom:
        1px solid #edf1ed;
    text-align: left;
    white-space: nowrap;
    font-variant-numeric:
        tabular-nums;
}

th {
    background: #f5f8f5;
    color: #637068;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .012em;
}

td {
    background: #fff;
    color: #46534b;
    font-size: 10px;
}

tr:last-child td {
    border-bottom: 0;
}

tbody tr:hover td {
    background: #fbfdfb;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eef1ef;
    font-size: 11px;
    font-weight: 700;
}

.badge.active {
    background: var(--green-100);
    color: var(--green-800);
}

.badge.removed {
    background: var(--red-bg);
    color: #a63e3e;
}

.toolbar {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.grid-2 {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.grid-3 {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.field label {
    display: block;
    margin-bottom: 6px;
    color: #66736a;
    font-size: 10px;
    font-weight: 760;
}

.message {
    min-height: 0;
    margin-top: 12px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 10px;
    line-height: 1.55;
}

.message:empty {
    display: none;
}

.message.ok,
.message.error {
    display: block;
    padding: 9px 11px;
    border-radius: 9px;
}

.message.ok {
    border: 1px solid #d7e8da;
    background: #f3f9f4;
    color: var(--green-700);
}

.message.error {
    border: 1px solid #efd3d3;
    background: #fff5f5;
    color: var(--red);
}

.section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

a {
    color: inherit;
}

img {
    max-width: 100%;
}

table button {
    white-space: nowrap;
}

.badge {
    min-height: 23px;
    padding: 3px 8px;
    font-size: 9px;
}

.toolbar {
    gap: 7px;
}

.section-head {
    gap: 15px;
}

@media (hover: none) {
    button:hover,
    .side-nav a:hover {
        transform: none;
        box-shadow: none;
    }
}

@media (max-width: 980px) {
    .sidebar {
        position: sticky;
        top: 0;
        width: auto;
        min-height: 0;
        padding: 10px 14px;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        overflow: hidden;
        box-shadow:
            0 8px 24px
            rgba(12, 47, 25, .10);
    }

    .sidebar::before,
    .sidebar-glow,
    .brand-divider {
        display: none;
    }

    .brand {
        min-width: max-content;
        padding: 0;
    }

    .brand-subtitle,
    .brand-admin-chip,
    .nav-section-label,
    .sidebar-foot {
        display: none;
    }

    .brand-mark {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .brand-title {
        font-size: 14px;
    }

    .side-nav {
        display: flex;
        flex: 1;
        gap: 5px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .side-nav::-webkit-scrollbar {
        display: none;
    }

    .side-nav a {
        grid-template-columns:
            28px auto;
        min-width: max-content;
        min-height: 40px;
        padding: 5px 9px;
        border-radius: 10px;
        white-space: nowrap;
        transform: none;
    }

    .nav-icon {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        font-size: 14px;
    }

    .nav-desc,
    .nav-active-dot {
        display: none;
    }

    .nav-title {
        font-size: 12px;
    }

    .side-nav a.active {
        box-shadow:
            inset 0 -2px 0
            #79ce86;
    }

   .container {
        min-height: auto;
        margin-left: 0;
        padding:
            22px
            clamp(15px, 3vw, 22px)
            max(40px, env(safe-area-inset-bottom));
    }

    .panel,
    .chart-box {
        margin-top: 15px;
    }
}

@media (max-width: 720px) {
    .brand {
        display: none;
    }

    .sidebar {
        padding:
            8px 10px;
        overflow-x: auto;
    }

    .side-nav {
        width: max-content;
        flex: 0 0 auto;
    }

    .side-nav a {
        min-height: 38px;
    }

    h1 {
        font-size: 25px;
    }

    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }

    .panel,
    .chart-box {
        padding: 15px;
        border-radius: 14px;
    }

    .page-kicker {
        font-size: 9px;
    }

    .page-subtitle {
        font-size: 11px;
    }

    button {
        min-height: 39px;
    }

    input,
    select,
    textarea {
        min-height: 41px;
    }

    .section-head {
        gap: 10px;
    }
}

@media (max-width: 460px) {
   .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    h1 {
        font-size: 25px;
    }

    h2 {
        font-size: 16px;
    }

    .panel,
    .chart-box {
        padding: 13px;
        border-radius: 13px;
    }

    .toolbar {
        width: 100%;
    }

    .toolbar > button {
        flex: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

@keyframes pageEnter {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.container {
    animation:
        pageEnter .18s ease-out both;
    transform: none;
}


.nav-notification-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 5px;
    padding: 0 5px;
    border-radius: 999px;
    background: #d95a55;
    color: #fff;
    font-size: 8px;
    font-weight: 850;
    line-height: 1;
    vertical-align: 1px;
    box-shadow: 0 0 0 3px rgba(217, 90, 85, .12);
}

.nav-notification-badge[hidden] {
    display: none;
}


/* M2.8.2.3 · mobile responsive hardening */
@media (max-width: 980px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .sidebar {
        inset: auto;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
    }

    .container {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
    }

    .container > * {
        max-width: 100%;
        min-width: 0;
    }

    .table-wrap,
    .recent-table-shell,
    .accounts-table-wrap {
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
}

@media (max-width: 720px) {
    .sidebar {
        padding:
            max(8px, env(safe-area-inset-top))
            max(10px, env(safe-area-inset-right))
            8px
            max(10px, env(safe-area-inset-left));
        scrollbar-width: none;
        -ms-overflow-style: none;
        overscroll-behavior-x: contain;
    }

    .sidebar::-webkit-scrollbar,
    .side-nav::-webkit-scrollbar {
        display: none;
    }

    .side-nav {
        max-width: 100%;
        scroll-snap-type: x proximity;
        scroll-padding-inline: 6px;
    }

    .side-nav a {
        scroll-snap-align: start;
        min-height: 44px;
        padding: 5px 9px;
    }

    .nav-icon {
        width: 30px;
        height: 30px;
    }

    .container {
        padding:
            18px
            max(14px, env(safe-area-inset-right))
            max(44px, env(safe-area-inset-bottom))
            max(14px, env(safe-area-inset-left));
    }

    .panel,
    .chart-box {
        width: 100%;
        min-width: 0;
    }

    button {
        min-height: 44px;
        font-size: 12px;
        touch-action: manipulation;
    }

    input,
    select,
    textarea {
        min-height: 44px;
        font-size: 16px;
    }

    .table-wrap,
    .recent-table-shell,
    .accounts-table-wrap {
        scrollbar-width: thin;
    }
}

@media (max-width: 460px) {
    .container {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }

    .side-nav a {
        gap: 6px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .nav-title {
        font-size: 11px;
    }
}


/* M2.8.2.4 · phone bottom icon navigation */
.nav-icon-notification {
    position: relative;
}

.nav-icon-notification .nav-notification-badge {
    position: absolute;
    top: -5px;
    right: -7px;
    z-index: 3;
    margin: 0;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    font-size: 8px;
    box-shadow:
        0 0 0 2px #123c23,
        0 2px 8px rgba(0, 0, 0, .18);
}

@media (max-width: 720px) {
    body {
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
    }

    .sidebar {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 100;
        width: 100%;
        max-width: 100%;
        min-height: 0;
        padding:
            7px
            max(8px, env(safe-area-inset-right))
            max(7px, env(safe-area-inset-bottom))
            max(8px, env(safe-area-inset-left));
        display: block;
        overflow: hidden;
        background:
            linear-gradient(
                180deg,
                rgba(15, 55, 31, .97) 0%,
                rgba(10, 42, 24, .99) 100%
            );
        border-top: 1px solid rgba(255,255,255,.08);
        box-shadow:
            0 -10px 30px rgba(8, 39, 20, .16);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .sidebar::after {
        display: none;
    }

    .brand,
    .brand-divider,
    .nav-section-label,
    .sidebar-foot,
    .sidebar-glow {
        display: none !important;
    }

    .side-nav {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 1px 3px;
        scroll-snap-type: x proximity;
        scroll-padding-inline: 4px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .side-nav::-webkit-scrollbar {
        display: none;
    }

    .side-nav a {
        position: relative;
        flex: 0 0 58px;
        width: 58px;
        min-width: 58px;
        min-height: 54px;
        padding: 5px;
        display: grid;
        grid-template-columns: 1fr;
        place-items: center;
        gap: 0;
        overflow: visible;
        border: 1px solid transparent;
        border-radius: 15px;
        color: rgba(226, 245, 229, .72);
        scroll-snap-align: center;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .side-nav a::before {
        border-radius: 14px;
    }

    .side-nav a:hover {
        transform: none;
    }

    .side-nav .nav-copy,
    .side-nav .nav-title,
    .side-nav .nav-desc,
    .side-nav .nav-active-dot {
        display: none !important;
    }

    .side-nav .nav-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        border-color: rgba(255,255,255,.08);
        background: rgba(255,255,255,.045);
        color: rgba(226,245,229,.78);
        font-size: 19px;
        transition:
            transform .18s ease,
            background .18s ease,
            border-color .18s ease,
            color .18s ease,
            box-shadow .18s ease;
    }

    .side-nav a.active {
        border-color: rgba(126, 215, 141, .12);
        background: rgba(86, 175, 102, .14);
        box-shadow:
            inset 0 2px 0 #7fd88c,
            0 4px 16px rgba(0,0,0,.10);
    }

    .side-nav a.active .nav-icon {
        border-color: rgba(149, 226, 160, .28);
        background: rgba(100, 193, 115, .22);
        color: #e7faea;
        transform: translateY(-1px);
        box-shadow:
            0 5px 14px rgba(0,0,0,.10);
    }

    .nav-icon-notification .nav-notification-badge {
        top: -4px;
        right: -5px;
        box-shadow:
            0 0 0 2px #0d321d,
            0 2px 8px rgba(0,0,0,.20);
    }

    .container {
        padding-bottom:
            max(
                28px,
                env(safe-area-inset-bottom)
            );
    }
}

@media (max-width: 380px) {
    .side-nav {
        gap: 4px;
    }

    .side-nav a {
        flex-basis: 54px;
        width: 54px;
        min-width: 54px;
    }

    .side-nav .nav-icon {
        width: 38px;
        height: 38px;
    }
}


/* M2.8.2.5 · mobile navigation labels + visual refinement */
.nav-mobile-title {
    display: none;
}

@media (max-width: 720px) {
    body {
        padding-bottom: calc(88px + env(safe-area-inset-bottom));
    }

    .sidebar {
        padding:
            6px
            max(8px, env(safe-area-inset-right))
            max(6px, env(safe-area-inset-bottom))
            max(8px, env(safe-area-inset-left));
        background:
            linear-gradient(
                180deg,
                rgba(15, 57, 32, .965) 0%,
                rgba(9, 40, 23, .99) 100%
            );
        border-top: 1px solid rgba(183, 224, 190, .12);
        box-shadow:
            0 -12px 34px rgba(7, 36, 18, .18);
    }

    .side-nav {
        gap: 5px;
        padding: 1px 4px 2px;
        scroll-padding-inline: 10px;
    }

    .side-nav a {
        flex: 0 0 66px;
        width: 66px;
        min-width: 66px;
        min-height: 68px;
        padding: 5px 4px 4px;
        grid-template-columns: 1fr;
        grid-template-rows: 44px 13px;
        place-items: center;
        align-content: center;
        gap: 3px;
        border-radius: 16px;
    }

    .side-nav .nav-copy,
    .side-nav .nav-title,
    .side-nav .nav-desc,
    .side-nav .nav-active-dot {
        display: none !important;
    }

    .side-nav .nav-mobile-title {
        display: block;
        width: 100%;
        overflow: hidden;
        color: rgba(222, 240, 226, .60);
        font-size: 9.5px;
        font-weight: 720;
        line-height: 1;
        letter-spacing: .01em;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        transition:
            color .18s ease,
            transform .18s ease;
    }

    .side-nav .nav-icon {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        border-color: rgba(218, 242, 222, .10);
        background: rgba(255,255,255,.038);
        color: rgba(228, 246, 231, .78);
        font-size: 21px;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.025);
    }

    .side-nav a.active {
        border-color: rgba(131, 219, 145, .15);
        background:
            linear-gradient(
                180deg,
                rgba(92, 183, 108, .18),
                rgba(64, 148, 79, .10)
            );
        box-shadow:
            inset 0 2px 0 rgba(127, 216, 140, .92),
            0 5px 18px rgba(0,0,0,.11);
    }

    .side-nav a.active .nav-icon {
        border-color: rgba(151, 228, 163, .31);
        background:
            linear-gradient(
                145deg,
                rgba(106, 203, 122, .27),
                rgba(70, 163, 87, .20)
            );
        color: #f0fff2;
        transform: translateY(-1px);
        box-shadow:
            0 5px 16px rgba(0,0,0,.12),
            inset 0 1px 0 rgba(255,255,255,.07);
    }

    .side-nav a.active .nav-mobile-title {
        color: #effff1;
        font-weight: 820;
        transform: translateY(-1px);
    }

    .nav-icon-notification .nav-notification-badge {
        top: -5px;
        right: -6px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        font-size: 8px;
        box-shadow:
            0 0 0 2px #0d321d,
            0 3px 9px rgba(0,0,0,.24);
    }

    .container {
        padding-top: 17px;
    }
}

@media (max-width: 380px) {
    .side-nav {
        gap: 3px;
    }

    .side-nav a {
        flex-basis: 62px;
        width: 62px;
        min-width: 62px;
        min-height: 66px;
    }

    .side-nav .nav-icon {
        width: 42px;
        height: 42px;
        font-size: 20px;
    }

    .side-nav .nav-mobile-title {
        font-size: 9px;
    }
}


/* M2.8.2.6 · mobile bottom-nav alignment polish */
@media (max-width: 720px) {
    .side-nav a {
        grid-template-rows: 46px 14px;
        align-content: center;
        row-gap: 2px;
    }

    .side-nav .nav-icon {
        align-self: center;
        justify-self: center;
    }

    .side-nav .nav-mobile-title {
        align-self: end;
        justify-self: stretch;
        height: 14px;
        line-height: 14px;
        color: rgba(226, 243, 230, .68);
    }

    .side-nav a.active .nav-mobile-title {
        transform: none;
    }

    .nav-icon-notification .nav-notification-badge {
        top: -6px;
        right: -7px;
    }
}


/* M2.8.2.8 · desktop minimal light sidebar */
@media (min-width: 981px) {
    .sidebar {
        width: 220px;
        padding: 18px 13px 14px;
        overflow: hidden;
        background: rgba(252, 254, 252, .98);
        color: var(--text);
        border-right: 1px solid #e3ebe4;
        box-shadow:
            5px 0 22px rgba(28, 61, 37, .035);
    }

    .sidebar::before,
    .sidebar::after,
    .sidebar-glow {
        display: none;
    }

    .brand {
        gap: 10px;
        padding: 2px 8px 15px;
    }

    .brand-mark {
        width: 45px;
        height: 45px;
        flex-basis: 45px;
    }

    .brand-logo {
        filter: none;
    }

    .brand-title-row {
        gap: 6px;
    }

    .brand-title {
        color: #1f3526;
        font-size: 17px;
        font-weight: 820;
        letter-spacing: 0;
    }

    .brand-admin-chip {
        min-height: 17px;
        padding: 0 5px;
        border-color: #dbe8dd;
        border-radius: 5px;
        background: #f1f7f2;
        color: #4f7058;
        font-size: 6.5px;
    }

    .brand-subtitle {
        margin-top: 3px;
        color: #87948a;
        font-size: 8px;
        font-weight: 700;
        letter-spacing: .07em;
    }

    .brand-divider {
        height: 1px;
        margin: 0 7px 11px;
        background: #e8eee9;
    }

    .nav-section-label {
        display: none;
    }

    .side-nav {
        gap: 4px;
    }

    .side-nav a {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 9px;
        min-height: 45px;
        padding: 5px 8px;
        border: 1px solid transparent;
        border-radius: 10px;
        color: #67736a;
    }

    .side-nav a::before {
        display: none;
    }

    .side-nav a:hover {
        border-color: #e5ece6;
        background: #f7faf7;
        color: #243b2b;
        transform: none;
    }

    .side-nav a.active {
        border-color: #dbe9dd;
        background: #edf6ef;
        color: #1d6337;
        box-shadow: none;
    }

    .nav-icon {
        width: 32px;
        height: 32px;
        border: 1px solid #e4ebe5;
        border-radius: 9px;
        background: #f8faf8;
        color: #708078;
        font-size: 15px;
    }

    .side-nav a:hover .nav-icon {
        border-color: #d8e5da;
        background: #f1f7f2;
        color: #42634d;
    }

    .side-nav a.active .nav-icon {
        border-color: #cce3d0;
        background: #e3f2e6;
        color: #237542;
    }

    .nav-title {
        color: inherit;
        font-size: 12px;
        font-weight: 740;
    }

    .nav-active-dot {
        display: none;
    }

    .nav-notification-badge {
        border-color: #fff;
    }

    .sidebar-foot {
        margin-top: auto;
        padding: 10px 8px 2px;
        border: 0;
        border-top: 1px solid #e8eee9;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .sidebar-foot-head,
    .sidebar-foot-project,
    .sidebar-foot-text {
        display: none;
    }

    .sidebar-foot-version {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
        color: #a0aaa2;
        font-size: 6.5px;
        letter-spacing: .065em;
    }

    .sidebar-foot-version span:last-child {
        color: #6f8f77;
    }

    .container {
        width: calc(100% - 220px);
        margin-left: 220px;
        padding-left: clamp(24px, 2.4vw, 42px);
        padding-right: clamp(24px, 2.4vw, 42px);
    }

    .side-nav a:focus-visible {
        box-shadow:
            0 0 0 3px rgba(60, 164, 94, .10);
    }
}


/* M2.8.2.9 · desktop notification badge clipping + softer color */
@media (min-width: 981px) {
    .side-nav a {
        overflow: visible;
    }

    .nav-icon-notification {
        overflow: visible;
    }

    .nav-icon-notification .nav-notification-badge {
        top: -7px;
        right: -8px;
        min-width: 19px;
        height: 19px;
        padding: 0 5px;
        border: 1px solid #efbbb6;
        background: #f8d8d5;
        color: #a94b45;
        font-size: 8px;
        font-weight: 850;
        box-shadow:
            0 0 0 2px rgba(255,255,255,.96),
            0 3px 8px rgba(119, 54, 49, .08);
    }

    .side-nav a.active .nav-icon-notification .nav-notification-badge {
        border-color: #edb7b1;
        background: #f6d2cf;
        color: #9f413b;
        box-shadow:
            0 0 0 2px #edf6ef,
            0 3px 8px rgba(119, 54, 49, .07);
    }
}


/* M2.8.2.10 · desktop navigation grouping + centered content */
@media (min-width: 981px) {
    body {
        background: #f5f7f5;
    }

    .sidebar {
        width: 210px;
        padding: 17px 12px 13px;
        background: rgba(250, 252, 250, .99);
        border-right-color: #e5eae6;
        box-shadow:
            4px 0 18px rgba(29, 57, 37, .025);
    }

    .brand {
        padding-left: 7px;
        padding-right: 7px;
        padding-bottom: 14px;
    }

    .brand-mark {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .brand-title {
        font-size: 16px;
    }

    .brand-subtitle {
        font-size: 7.5px;
    }

    .brand-divider {
        margin-left: 6px;
        margin-right: 6px;
        margin-bottom: 10px;
    }

    /*
     * Keep primary workspace navigation grouped at the top.
     * Account-related actions live in a separate visual group at the bottom,
     * similar to a compact console/profile area.
     */
    .side-nav {
        display: flex;
        flex: 1 1 auto;
        min-height: 0;
        flex-direction: column;
        gap: 4px;
    }

    #accountsNavLink {
        margin-top: auto;
    }

    #accountsNavLink[hidden] + a[data-path="/account"] {
        margin-top: auto;
    }

    #accountsNavLink::after,
    #accountsNavLink[hidden] + a[data-path="/account"]::after {
        content: "";
        position: absolute;
        top: -9px;
        right: 8px;
        left: 8px;
        height: 1px;
        background: #e5ebe6;
        pointer-events: none;
    }

    #accountsNavLink,
    .side-nav a[data-path="/account"] {
        color: #68746b;
    }

    #accountsNavLink:hover,
    .side-nav a[data-path="/account"]:hover {
        background: #f6f8f6;
    }

    #accountsNavLink.active,
    .side-nav a[data-path="/account"].active {
        background: #edf5ef;
        color: #236d3d;
    }

    .sidebar-foot {
        margin-top: 7px;
        padding: 8px 7px 1px;
    }

    /*
     * The content area remains responsive but no longer expands endlessly
     * on large desktop monitors. Every page's top-level sections line up
     * on the same centered content column.
     */
    .container {
        width: calc(100% - 210px);
        margin-left: 210px;
        padding:
            28px
            clamp(26px, 3vw, 54px)
            58px;
    }

    .container > * {
        width: 100%;
        max-width: 1360px;
        margin-left: auto;
        margin-right: auto;
    }

    .panel,
    .chart-box {
        box-shadow:
            0 6px 18px rgba(29, 63, 39, .035);
    }
}

@media (min-width: 1600px) {
    .container {
        padding-left: 64px;
        padding-right: 64px;
    }
}


/* M2.8.2.11 · desktop balance + bottom account group */
@media (min-width: 981px) {
    .side-nav-account-group {
        position: relative;
        display: grid;
        gap: 4px;
        margin-top: auto;
        padding-top: 13px;
    }

    .side-nav-account-group::before {
        content: "";
        position: absolute;
        top: 5px;
        right: 8px;
        left: 8px;
        height: 1px;
        background: #e5ebe6;
    }

    /* Cancel the older single-link auto-margin/separator behavior. */
    #accountsNavLink,
    #accountsNavLink[hidden] + a[data-path="/account"] {
        margin-top: 0;
    }

    #accountsNavLink::after,
    #accountsNavLink[hidden] + a[data-path="/account"]::after {
        display: none;
    }

    .sidebar-foot {
        margin-top: 5px;
        padding-top: 6px;
    }

    .container {
        padding-top: 34px;
        padding-left: clamp(34px, 3.6vw, 64px);
        padding-right: clamp(34px, 3.6vw, 64px);
    }

    .container > * {
        max-width: 1260px;
    }

    .panel,
    .chart-box {
        border-color: #e1e8e2;
        box-shadow:
            0 5px 16px rgba(28, 60, 37, .028);
    }
}

/* On tablet/phone the wrapper must not become a separate flex item. */
@media (max-width: 980px) {
    .side-nav-account-group {
        display: contents;
    }
}

@media (min-width: 1700px) {
    .container > * {
        max-width: 1280px;
    }
}


/* M2.8.2.12 · narrow desktop sidebar + seamless sliding content */
@media (min-width: 981px) {
    .sidebar {
        width: 184px;
        padding:
            15px 10px 12px;
    }

    .brand {
        gap: 8px;
        padding:
            2px 6px 12px;
    }

    .brand-mark {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .brand-title {
        font-size: 14px;
    }

    .brand-admin-chip {
        padding: 0 4px;
        font-size: 6px;
    }

    .brand-subtitle {
        font-size: 7px;
        letter-spacing: .055em;
    }

    .brand-divider {
        margin:
            0 5px 9px;
    }

    .side-nav {
        gap: 3px;
    }

    .side-nav a {
        grid-template-columns:
            29px minmax(0, 1fr);
        gap: 7px;
        min-height: 41px;
        padding: 4px 7px;
        border-radius: 9px;
    }

    .nav-icon {
        width: 29px;
        height: 29px;
        border-radius: 8px;
        font-size: 14px;
    }

    .nav-title {
        font-size: 11px;
    }

    .side-nav-account-group {
        gap: 3px;
    }

    .sidebar-foot {
        padding-left: 6px;
        padding-right: 6px;
    }

    .container {
        width: calc(100% - 184px);
        margin-left: 184px;
        padding-left:
            clamp(38px, 4vw, 72px);
        padding-right:
            clamp(38px, 4vw, 72px);
    }

    .container > * {
        max-width: 1220px;
    }

    .soft-app-host {
        position: relative;
        display: grid;
        align-items: start;
        overflow-x: clip;
    }

    .soft-app-host > .soft-direct-content,
    .soft-app-host > .soft-page-frame {
        grid-area: 1 / 1;
        width: 100%;
        max-width: 1220px;
        margin-right: auto;
        margin-left: auto;
    }

    .soft-direct-content {
        opacity: 1;
        transform: translateX(0);
        transition:
            opacity .22s ease,
            transform .26s cubic-bezier(.2,.7,.2,1);
    }

    .soft-page-frame {
        display: block;
        min-height: 420px;
        overflow: hidden;
        border: 0;
        outline: 0;
        background: transparent;
        opacity: 0;
        transform: translateX(30px);
        pointer-events: none;
        transition:
            opacity .22s ease,
            transform .28s cubic-bezier(.2,.7,.2,1);
    }

    .soft-page-frame.enter-from-left {
        transform: translateX(-30px);
    }

    .soft-page-frame.enter-from-right {
        transform: translateX(30px);
    }

    .soft-page-frame.is-current {
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto;
    }

    .soft-page-frame.leave-left,
    .soft-direct-content.leave-left {
        opacity: 0;
        transform: translateX(-24px);
        pointer-events: none;
    }

    .soft-page-frame.leave-right,
    .soft-direct-content.leave-right {
        opacity: 0;
        transform: translateX(24px);
        pointer-events: none;
    }

    @media (prefers-reduced-motion: reduce) {
        .soft-direct-content,
        .soft-page-frame {
            transition: none;
        }
    }
}


/*
 * The embedded document is a clean content surface.
 * Its own sidebar is removed because the persistent sidebar belongs
 * to the top-level shell.
 */
html.embedded-page,
html.embedded-page body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
}

html.embedded-page .sidebar {
    display: none !important;
}

html.embedded-page .container {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

html.embedded-page .container > *,
html.embedded-page .soft-direct-content {
    width: 100%;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

html.embedded-page .soft-app-host {
    display: block;
    overflow: visible;
}


/* Mobile/tablet stays on the proven native page + bottom-nav mode. */
@media (max-width: 980px) {
    .soft-app-host {
        display: block;
    }

    .soft-page-frame {
        display: none;
    }
}


/* M2.8.2.13 · desktop page rhythm + adaptive content widths */
@media (min-width: 981px) {
    html {
        --desktop-content-max: 1220px;
    }

    html[data-page-kind="dashboard"] {
        --desktop-content-max: 1200px;
    }

    html[data-page-kind="devices"] {
        --desktop-content-max: 1320px;
    }

    html[data-page-kind="device-detail"] {
        --desktop-content-max: 1280px;
    }

    html[data-page-kind="operations"] {
        --desktop-content-max: 1240px;
    }

    html[data-page-kind="notifications"] {
        --desktop-content-max: 1260px;
    }

    html[data-page-kind="data-center"] {
        --desktop-content-max: 1420px;
    }

    html[data-page-kind="sensor-settings"] {
        --desktop-content-max: 1120px;
    }

    html[data-page-kind="pending-channels"] {
        --desktop-content-max: 1180px;
    }

    html[data-page-kind="accounts"] {
        --desktop-content-max: 1080px;
    }

    html[data-page-kind="account"] {
        --desktop-content-max: 980px;
    }

    .sidebar {
        width: 172px;
        padding:
            14px 9px 11px;
    }

    .brand {
        gap: 7px;
        padding:
            2px 5px 11px;
    }

    .brand-mark {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .brand-title {
        font-size: 13px;
    }

    .brand-subtitle {
        font-size: 6.7px;
    }

    .side-nav a {
        grid-template-columns:
            28px minmax(0, 1fr);
        gap: 6px;
        min-height: 39px;
        padding: 4px 6px;
    }

    .nav-icon {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    .nav-title {
        font-size: 10.5px;
    }

    .container {
        width: calc(100% - 172px);
        margin-left: 172px;
        padding:
            32px
            clamp(38px, 4vw, 72px)
            58px;
    }

    .container > *,
    .soft-app-host > .soft-direct-content,
    .soft-app-host > .soft-page-frame {
        width: 100%;
        max-width:
            var(--desktop-content-max);
        margin-right: auto;
        margin-left: auto;
    }

    /*
     * Page header system:
     * one strong title, one short description, one page-level action area.
     * Dashboard keeps its own branded hero.
     */
    .product-page-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 28px;
        min-height: 76px;
        margin-bottom: 20px;
        padding: 0 1px;
    }

    .product-page-header h1 {
        margin: 0;
        color: #1f3025;
        font-size: 29px;
        font-weight: 820;
        line-height: 1.12;
        letter-spacing: -.026em;
    }

    .product-page-header h1 + p,
    .product-page-header .page-subtitle,
    .product-page-header .subtitle,
    .product-page-header .header-subtitle,
    .product-page-header .page-description {
        max-width: 720px;
        margin-top: 8px;
        color: #748078;
        font-size: 12px;
        line-height: 1.65;
    }

    .product-page-header button,
    .product-page-header .btn,
    .product-page-header a[class*="btn"] {
        min-height: 40px;
        border-radius: 10px;
    }

    /*
     * Flatter surface hierarchy:
     * outer sections remain white; inner cards become quiet, near-flat tiles.
     */
    .panel,
    .chart-box,
    .devices-panel,
    .device-ops-overview {
        border-color: #e4e9e5;
        border-radius: 15px;
        box-shadow:
            0 3px 10px rgba(28, 60, 37, .022);
    }

    .container [class$="-card"] {
        box-shadow:
            0 2px 7px rgba(28, 60, 37, .018);
    }

    .panel [class$="-card"],
    .chart-box [class$="-card"],
    .devices-panel [class$="-card"],
    .device-ops-overview [class$="-card"] {
        border-color: #e8ede9;
        background: #fafcfb;
        box-shadow: none;
    }

    .section-head,
    .panel-head,
    .card-head {
        gap: 18px;
    }

    button,
    .btn {
        box-shadow: none;
    }
}

/*
 * Embedded soft-navigation documents are content-only surfaces.
 * Keep the parent shell responsible for width.
 */
html.embedded-page {
    --desktop-content-max: none;
}

html.embedded-page .product-page-header {
    margin-top: 0;
}


/* Preserve the existing mobile layout exactly. */
@media (max-width: 980px) {
    .product-page-header {
        display: block;
    }
}


/* M2.8.2.14 · mobile design-system + camera safe area */
@media (max-width: 980px) {
    :root {
        --mobile-safe-top:
            max(
                env(safe-area-inset-top),
                10px
            );
    }

    html,
    body {
        background: #f4f7f4;
    }

    /*
     * Reserve the cutout / front-camera area for low-information UI.
     * The strip intentionally contains no text, counters or buttons.
     */
    body {
        padding-top:
            var(--mobile-safe-top);
    }

    body::before {
        content: "";
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 145;
        height:
            var(--mobile-safe-top);
        pointer-events: none;
        background:
            linear-gradient(
                180deg,
                #edf5ef 0%,
                #f4f7f4 100%
            );
        border-bottom:
            1px solid
            rgba(43, 91, 57, .045);
    }

    .container {
        background: transparent;
    }

    body .container .panel,
    body .container .chart-box {
        border-color: #e3e9e4;
        background: #fff;
        box-shadow:
            0 2px 8px
            rgba(29, 61, 38, .025);
    }
}


@media (max-width: 720px) {
    body {
        /*
         * Keep enough space for the fixed bottom navigation,
         * including iPhone/Android gesture-safe space.
         */
        padding-bottom:
            calc(
                84px +
                env(safe-area-inset-bottom)
            );
    }

    .container {
        padding:
            14px
            max(
                13px,
                env(safe-area-inset-right)
            )
            28px
            max(
                13px,
                env(safe-area-inset-left)
            );
    }

    .container > *,
    .soft-direct-content > * {
        width: 100%;
        max-width: 620px;
        margin-right: auto;
        margin-left: auto;
    }

    /*
     * Mobile page header = the desktop hierarchy compressed for phone.
     * Dashboard retains its branded hero, all other pages use this.
     */
    body .product-page-header {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 11px;
        min-height: 0;
        margin-bottom: 15px;
        padding:
            8px 0 7px 13px;
        background:
            linear-gradient(
                90deg,
                rgba(52, 146, 80, .055),
                rgba(52, 146, 80, .012) 58%,
                transparent 90%
            );
    }

    body .product-page-header::before {
        content: "";
        position: absolute;
        top: 8px;
        bottom: 7px;
        left: 0;
        width: 3px;
        border-radius: 999px;
        background:
            linear-gradient(
                180deg,
                #59b970,
                #2e7c49
            );
    }

    body .product-page-header h1 {
        margin: 0;
        color: #203428;
        font-size: 25px;
        font-weight: 820;
        line-height: 1.16;
        letter-spacing: -.028em;
    }

    body .product-page-header .page-kicker {
        margin-bottom: 5px;
        color: #358653;
        font-size: 8.5px;
        font-weight: 800;
        letter-spacing: .13em;
    }

    body .product-page-header h1 + p,
    body .product-page-header .page-subtitle,
    body .product-page-header .subtitle,
    body .product-page-header .header-subtitle,
    body .product-page-header .page-description,
    body .product-page-header p {
        max-width: none;
        margin-top: 6px;
        color: #6e7a72;
        font-size: 11.5px;
        line-height: 1.62;
    }

    body .product-page-header > :last-child {
        max-width: 100%;
    }

    body .product-page-header button,
    body .product-page-header .btn,
    body .product-page-header a[class*="btn"],
    body .product-page-header .button-like,
    body .product-page-header .button-link {
        min-height: 42px;
        border-radius: 11px;
    }

    body .product-page-header
    [class$="-actions"],
    body .product-page-header
    [class$="-meta"],
    body .product-page-header
    [class*="header-actions"],
    body .product-page-header
    [class*="hero-actions"] {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        align-items: center;
        gap: 7px;
    }

    /*
     * Flatter mobile surfaces:
     * outer card = white workspace; inner tile = soft neutral.
     */
    body .container .panel,
    body .container .chart-box {
        border-radius: 14px;
    }

    body .container [class$="-card"] {
        border-color: #e5ebe6;
        border-radius: 14px;
        box-shadow: none;
    }

    body .container .panel [class$="-card"],
    body .container .chart-box [class$="-card"] {
        background: #fafcfb;
    }

    body .container button,
    body .container .btn,
    body .container .button-like,
    body .container .button-link {
        border-radius: 10px;
        box-shadow: none;
    }

    /*
     * Bottom navigation now matches the desktop light sidebar.
     * Green is an active-state accent instead of a full dark background.
     */
    .sidebar {
        border-top:
            1px solid #dde6df;
        background:
            rgba(250, 252, 250, .965);
        box-shadow:
            0 -8px 24px
            rgba(28, 58, 36, .075);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .side-nav {
        padding-top: 2px;
    }

    .side-nav a {
        color: #667269;
        border-color: transparent;
        background: transparent;
    }

    .side-nav .nav-icon {
        border-color: #e1e8e2;
        background: #f7f9f7;
        color: #68796e;
        box-shadow: none;
    }

    .side-nav .nav-mobile-title {
        color: #7a857d;
        font-weight: 720;
    }

    .side-nav a.active {
        border-color: #dbe9dd;
        background: #edf6ef;
        box-shadow:
            inset 0 2px 0
            rgba(75, 164, 96, .72);
    }

    .side-nav a.active .nav-icon {
        border-color: #cfe4d3;
        background: #e4f2e7;
        color: #237542;
        box-shadow: none;
        transform: translateY(-1px);
    }

    .side-nav a.active .nav-mobile-title {
        color: #236d3d;
        font-weight: 820;
    }

    .nav-icon-notification
    .nav-notification-badge {
        border:
            1px solid #efbbb6;
        background: #f8d8d5;
        color: #a34a44;
        box-shadow:
            0 0 0 2px
            rgba(250,252,250,.98),
            0 2px 6px
            rgba(119,54,49,.08);
    }

    /*
     * Tables remain usable on phones without forcing every page to
     * become card-based.
     */
    .table-wrap,
    .recent-table-shell,
    .accounts-table-wrap {
        border-radius: 12px;
        background: #fff;
    }

    /*
     * Inputs follow the desktop minimalist treatment but retain a
     * 44px touch target and 16px text to avoid iOS focus zoom.
     */
    input,
    select,
    textarea {
        border-color: #dfe7e1;
        border-radius: 10px;
        background: #fff;
    }

    input:focus,
    select:focus,
    textarea:focus {
        border-color: #75a982;
        box-shadow:
            0 0 0 3px
            rgba(70, 149, 90, .09);
    }
}


@media (max-width: 390px) {
    .container {
        padding-right:
            max(
                11px,
                env(safe-area-inset-right)
            );
        padding-left:
            max(
                11px,
                env(safe-area-inset-left)
            );
    }

    body .product-page-header h1 {
        font-size: 23px;
    }

    .side-nav a {
        flex-basis: 61px;
        width: 61px;
        min-width: 61px;
    }

    .side-nav .nav-mobile-title {
        font-size: 8.8px;
    }
}


/* M2.8.2.15 · mobile/tablet seamless page sliding */
@media (max-width: 980px) {
    .soft-app-host {
        position: relative;
        display: grid;
        align-items: start;
        overflow-x: clip;
        min-width: 0;
    }

    .soft-app-host > .soft-direct-content,
    .soft-app-host > .soft-page-frame {
        grid-area: 1 / 1;
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    .soft-direct-content {
        opacity: 1;
        transform: translateX(0);
        transition:
            opacity .16s ease,
            transform .22s cubic-bezier(.2,.72,.2,1);
        will-change: opacity, transform;
    }

    .soft-page-frame {
        display: block;
        width: 100%;
        min-width: 0;
        min-height: 420px;
        overflow: hidden;
        border: 0;
        outline: 0;
        background: transparent;
        opacity: 0;
        transform: translateX(22px);
        pointer-events: none;
        transition:
            opacity .16s ease,
            transform .24s cubic-bezier(.2,.72,.2,1);
        will-change: opacity, transform;
    }

    .soft-page-frame.enter-from-left {
        transform: translateX(-22px);
    }

    .soft-page-frame.enter-from-right {
        transform: translateX(22px);
    }

    .soft-page-frame.is-current {
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto;
    }

    .soft-page-frame.leave-left,
    .soft-direct-content.leave-left {
        opacity: 0;
        transform: translateX(-18px);
        pointer-events: none;
    }

    .soft-page-frame.leave-right,
    .soft-direct-content.leave-right {
        opacity: 0;
        transform: translateX(18px);
        pointer-events: none;
    }

    /*
     * A very quiet loading rail appears inside the content area while
     * the next page is fetched. No text or important information is put
     * near the camera/notch safe zone.
     */
    .soft-app-host::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        z-index: 8;
        width: 34%;
        max-width: 150px;
        height: 2px;
        border-radius: 999px;
        opacity: 0;
        pointer-events: none;
        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(57, 143, 82, .48),
                transparent
            );
        transform:
            translateX(-50%)
            scaleX(.35);
        transform-origin: center;
        transition:
            opacity .12s ease,
            transform .2s ease;
    }

    .soft-app-host.is-soft-navigating::before {
        opacity: 1;
        transform:
            translateX(-50%)
            scaleX(1);
    }

    /*
     * Embedded child pages are content-only. The parent owns the camera
     * safe area and the fixed bottom navigation, so the child must not
     * reserve those spaces a second time.
     */
    html.embedded-page {
        --mobile-safe-top: 0px !important;
    }

    html.embedded-page body::before {
        display: none !important;
    }

    html.embedded-page body {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    html.embedded-page .container {
        padding:
            0 !important;
    }

    html.embedded-page .product-page-header {
        margin-top: 0 !important;
    }

    @media (prefers-reduced-motion: reduce) {
        .soft-direct-content,
        .soft-page-frame,
        .soft-app-host::before {
            transition: none !important;
        }
    }
}


/* Slightly shorter travel distance on narrow phones. */
@media (max-width: 430px) {
    .soft-page-frame {
        transform: translateX(18px);
    }

    .soft-page-frame.enter-from-left {
        transform: translateX(-18px);
    }

    .soft-page-frame.enter-from-right {
        transform: translateX(18px);
    }

    .soft-page-frame.leave-left,
    .soft-direct-content.leave-left {
        transform: translateX(-14px);
    }

    .soft-page-frame.leave-right,
    .soft-direct-content.leave-right {
        transform: translateX(14px);
    }
}


/* M2.8.2.16 · product shell, skeleton, drawer and accessibility */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.skip-link {
    position: fixed;
    top: 8px;
    left: 50%;
    z-index: 1000;
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid #b7d2bd;
    border-radius: 10px;
    background: #fff;
    color: #225f38;
    font-weight: 800;
    text-decoration: none;
    transform:
        translate(-50%, -140%);
    transition:
        transform .16s ease;
}

.skip-link:focus {
    transform:
        translate(-50%, 0);
}

.app-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 104px;
    padding: 22px 18px;
    border: 1px dashed #dce5de;
    border-radius: 13px;
    background: #fafcfb;
    color: #657269;
    text-align: left;
}

.app-state-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    border-radius: 10px;
    background: #edf5ef;
    color: #39784b;
    font-size: 15px;
    font-weight: 900;
}

.app-state-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.app-state-copy strong {
    color: #39473e;
    font-size: 12px;
    font-weight: 820;
}

.app-state-copy span {
    max-width: 540px;
    color: #7b877f;
    font-size: 10px;
    line-height: 1.6;
}

.app-state-error {
    border-color: #ecd9d7;
    background: #fffafa;
}

.app-state-error .app-state-icon {
    background: #f9e7e5;
    color: #a84e47;
}

.app-state-success .app-state-icon {
    background: #e8f5eb;
    color: #2c7b46;
}

.app-state-loading .app-state-icon {
    animation:
        appStatePulse 1.1s ease-in-out
        infinite alternate;
}

@keyframes appStatePulse {
    from {
        opacity: .45;
        transform: scale(.94);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* Soft-navigation skeleton */
.soft-nav-skeleton {
    position: relative;
    z-index: 7;
    grid-area: 1 / 1;
    width: 100%;
    max-width:
        var(--desktop-content-max, 1220px);
    margin-right: auto;
    margin-left: auto;
    padding: 1px 0 12px;
    background:
        linear-gradient(
            180deg,
            rgba(244,247,244,.96),
            rgba(244,247,244,.9)
        );
    opacity: 1;
    transition:
        opacity .14s ease;
    pointer-events: none;
}

.soft-nav-skeleton.is-leaving {
    opacity: 0;
}

.soft-skeleton-header,
.soft-skeleton-cards,
.soft-skeleton-panels {
    display: grid;
}

.soft-skeleton-header {
    gap: 8px;
    margin-bottom: 22px;
}

.soft-skeleton-kicker,
.soft-skeleton-title,
.soft-skeleton-copy,
.soft-skeleton-cards span,
.soft-skeleton-panels span,
.soft-skeleton-table span {
    overflow: hidden;
    border-radius: 8px;
    background:
        linear-gradient(
            90deg,
            #e8ede9 0%,
            #f5f7f5 48%,
            #e8ede9 100%
        );
    background-size: 220% 100%;
    animation:
        softSkeletonMove 1.1s linear
        infinite;
}

.soft-skeleton-kicker {
    width: 92px;
    height: 8px;
}

.soft-skeleton-title {
    width: min(260px, 62%);
    height: 31px;
}

.soft-skeleton-copy {
    width: min(540px, 82%);
    height: 12px;
}

.soft-skeleton-cards {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 14px;
}

.soft-skeleton-cards span {
    height: 88px;
    border-radius: 13px;
}

.soft-skeleton-panels {
    grid-template-columns:
        1fr 1fr;
    gap: 12px;
}

.soft-skeleton-panels span {
    height: 190px;
    border-radius: 14px;
}

.soft-skeleton-table {
    display: grid;
    grid-template-columns:
        90px 1.25fr 1fr 110px;
    gap: 1px 10px;
    padding: 13px;
    border: 1px solid #e2e8e3;
    border-radius: 14px;
    background: #fff;
}

.soft-skeleton-table span {
    height: 28px;
    border-radius: 5px;
}

@keyframes softSkeletonMove {
    from {
        background-position: 100% 0;
    }
    to {
        background-position: -120% 0;
    }
}


/* Parent-level device detail drawer */
.iot-device-drawer {
    position: fixed;
    inset: 0 0 0 172px;
    z-index: 420;
    display: grid;
    grid-template-columns: 1fr auto;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity .18s ease;
}

html.sidebar-collapsed
.iot-device-drawer {
    left: 58px;
}

.iot-device-drawer.show {
    opacity: 1;
    pointer-events: auto;
}

.iot-device-drawer-backdrop {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background:
        rgba(27, 42, 32, .17);
    box-shadow: none;
    backdrop-filter: blur(1.5px);
}

.iot-device-drawer-panel {
    grid-column: 2;
    grid-row: 1;
    width: min(690px, 72vw);
    height: 100%;
    display: flex;
    flex-direction: column;
    border-left:
        1px solid #dfe6e0;
    background: #f7faf7;
    box-shadow:
        -22px 0 54px
        rgba(19, 45, 27, .12);
    transform:
        translateX(34px);
    transition:
        transform .24s
        cubic-bezier(.2,.72,.2,1);
}

.iot-device-drawer.show
.iot-device-drawer-panel {
    transform: translateX(0);
}

.iot-device-drawer-head {
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 16px;
    border-bottom:
        1px solid #e2e8e3;
    background:
        rgba(255,255,255,.94);
}

.iot-device-drawer-head > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.iot-device-drawer-kicker {
    color: #77837b;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.iot-device-drawer-head strong {
    overflow: hidden;
    color: #26382c;
    font-size: 15px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.iot-device-drawer-close {
    width: 40px;
    height: 40px;
    min-height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    flex: 0 0 40px;
    border-radius: 10px;
    background: #f7f9f7;
    box-shadow: none;
    font-size: 22px;
}

.iot-device-drawer-body {
    position: relative;
    min-height: 0;
    flex: 1;
}

.iot-device-drawer-loading {
    position: absolute;
    inset: 20px;
    z-index: 1;
}

.iot-device-drawer-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #f7faf7;
    opacity: 0;
    transition:
        opacity .16s ease;
}

.iot-device-drawer.frame-ready
.iot-device-drawer-loading {
    display: none;
}

.iot-device-drawer.frame-ready
.iot-device-drawer-frame {
    opacity: 1;
}

body.device-drawer-open {
    overflow: hidden;
}


/* Keyboard / touch / fixed-nav safety */
html {
    scroll-padding-top: 18px;
}

button,
[role="button"],
a,
input,
select,
textarea {
    scroll-margin:
        12px 0 110px;
}

@media (max-width: 980px) {
    .sidebar-collapse-toggle {
        display: none !important;
    }

    .soft-nav-skeleton {
        max-width: 620px;
        padding:
            2px 0 10px;
        background:
            rgba(244,247,244,.96);
    }

    .soft-skeleton-cards {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .soft-skeleton-cards span {
        height: 78px;
    }

    .soft-skeleton-panels {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .soft-skeleton-panels span {
        height: 150px;
    }

    .soft-skeleton-table {
        grid-template-columns:
            58px 1fr 90px;
    }

    .soft-skeleton-table span:nth-child(4n) {
        display: none;
    }

    html {
        scroll-padding-top:
            calc(
                max(
                    env(safe-area-inset-top),
                    10px
                ) +
                16px
            );
        scroll-padding-bottom:
            calc(
                96px +
                env(safe-area-inset-bottom)
            );
    }
}

@media (max-width: 720px) {
    button,
    .btn,
    .button-like,
    .button-link,
    .notification-action-button,
    .device-detail-link,
    input:not([type="checkbox"]):not([type="radio"]),
    select {
        min-height: 44px;
    }

    textarea {
        min-height: 96px;
    }

    input,
    select,
    textarea {
        font-size: max(16px, 1em);
    }

    .app-state {
        min-height: 96px;
        padding: 18px 14px;
    }

    .app-state-copy strong {
        font-size: 12px;
    }

    .app-state-copy span {
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .soft-nav-skeleton *,
    .app-state-loading .app-state-icon,
    .iot-device-drawer,
    .iot-device-drawer-panel {
        animation: none !important;
        transition: none !important;
    }
}


/* M2.8.2.17 · fixed desktop brand area, no collapse control */
@media (min-width: 981px) {
    .brand {
        gap: 7px;
        padding:
            2px 5px 11px;
    }

    .brand-copy {
        min-width: 0;
        flex: 1 1 auto;
    }

    .brand-title-row {
        min-width: 0;
        gap: 5px;
    }

    .brand-title {
        overflow: visible;
        white-space: nowrap;
        text-overflow: clip;
    }

    .brand-subtitle {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .sidebar-collapse-toggle {
        display: none !important;
    }

    /*
     * M2.8.2.16 may have left an old local browser preference behind.
     * The class no longer changes layout; sidebar stays in normal mode.
     */
    html.sidebar-collapsed .sidebar {
        width: 172px;
    }

    html.sidebar-collapsed .container {
        width: calc(100% - 172px);
        margin-left: 172px;
    }

    html.sidebar-collapsed .brand-copy,
    html.sidebar-collapsed .nav-copy,
    html.sidebar-collapsed .brand-divider,
    html.sidebar-collapsed .sidebar-foot,
    html.sidebar-collapsed .nav-section-label {
        display: initial;
    }

    html.sidebar-collapsed .brand-copy,
    html.sidebar-collapsed .nav-copy {
        display: block;
    }

    html.sidebar-collapsed .brand-divider {
        display: block;
    }

    html.sidebar-collapsed .sidebar-foot {
        display: block;
    }

    html.sidebar-collapsed .side-nav a {
        width: auto;
        min-height: 39px;
        margin-right: 0;
        margin-left: 0;
        padding: 4px 6px;
        grid-template-columns:
            28px minmax(0, 1fr);
        justify-items: stretch;
        border-radius: 9px;
    }

    html.sidebar-collapsed .side-nav a .nav-icon {
        width: 28px;
        height: 28px;
    }

    html.sidebar-collapsed .iot-device-drawer {
        left: 172px;
    }
}

/* v47 · sidebar information hierarchy
 * Primary monitoring functions stay together; device/configuration tools form
 * a quieter secondary group. Routes and permission attributes are unchanged.
 */
.side-nav-primary-group,
.side-nav-secondary-group {
    display: grid;
    gap: 3px;
}

.side-nav-primary-group {
    padding: 2px;
    border-radius: 12px;
    background:
        linear-gradient(
            180deg,
            rgba(44, 139, 79, .045),
            rgba(44, 139, 79, .012)
        );
}

.side-nav-primary-group > a {
    font-weight: 780;
}

.side-nav-secondary-label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
    margin: 7px 7px 1px;
    color: rgba(62, 83, 70, .52);
    font-size: 8px;
    font-weight: 760;
    letter-spacing: .11em;
    white-space: nowrap;
}

.side-nav-secondary-label::after {
    content: "";
    height: 1px;
    flex: 1;
    background:
        linear-gradient(
            90deg,
            rgba(72, 102, 82, .16),
            rgba(72, 102, 82, 0)
        );
}

@media (max-width: 980px) {
    .side-nav-primary-group,
    .side-nav-secondary-group {
        display: contents;
    }

    .side-nav-secondary-label {
        display: none;
    }
}

/* v48 · desktop sidebar refinement
 * Goal: calmer hierarchy, consistent line icons, tighter rhythm and a more
 * product-like active state without changing routes or permissions.
 */
@media (min-width: 981px) {
    .sidebar {
        width: 184px;
        padding: 14px 10px 11px;
        background: rgba(251, 253, 251, .985);
        border-right: 1px solid rgba(62, 91, 70, .10);
        box-shadow:
            5px 0 20px rgba(29, 55, 35, .022);
    }

    .brand {
        min-height: 56px;
        gap: 9px;
        padding: 1px 7px 11px;
        align-items: center;
    }

    .brand-mark {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
    }

    .brand-title-row {
        gap: 5px;
        align-items: center;
    }

    .brand-title {
        font-size: 14.5px;
        font-weight: 800;
        letter-spacing: -.01em;
    }

    .brand-admin-chip {
        min-height: 16px;
        padding: 0 5px;
        border-color: #dbe8dd;
        border-radius: 999px;
        background: #f3f8f4;
        color: #55715d;
        font-size: 6px;
        font-weight: 800;
        letter-spacing: .06em;
    }

    .brand-subtitle {
        margin-top: 2px;
        color: #8a968d;
        font-size: 7px;
        font-weight: 650;
        letter-spacing: .045em;
    }

    .brand-divider {
        margin: 0 6px 8px;
        background: rgba(73, 101, 81, .10);
    }

    .side-nav {
        gap: 0;
    }

    .side-nav-primary-group,
    .side-nav-secondary-group {
        display: grid;
        gap: 3px;
    }

    .side-nav-primary-group {
        padding: 0;
        border-radius: 0;
        background: transparent;
    }

    .side-nav-primary-group > a {
        font-weight: inherit;
    }

    .side-nav a {
        position: relative;
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 8px;
        min-height: 42px;
        padding: 5px 8px 5px 7px;
        border: 1px solid transparent;
        border-radius: 10px;
        color: #647169;
        transition:
            background-color .16s ease,
            border-color .16s ease,
            color .16s ease;
    }

    .side-nav a::before {
        content: "";
        position: absolute;
        display: block;
        left: 0;
        top: 11px;
        width: 2px;
        height: 20px;
        border-radius: 999px;
        background: transparent;
        opacity: 0;
        transition:
            opacity .16s ease,
            background-color .16s ease;
    }

    .side-nav a:hover {
        border-color: rgba(73, 105, 83, .09);
        background: rgba(243, 248, 244, .82);
        color: #2f4937;
    }

    .side-nav a.active {
        border-color: rgba(72, 145, 92, .16);
        background:
            linear-gradient(
                90deg,
                rgba(232, 245, 235, .94),
                rgba(241, 248, 243, .76)
            );
        color: #176b36;
        box-shadow: none;
    }

    .side-nav a.active::before {
        background: #2d9650;
        opacity: 1;
    }

    .nav-icon {
        width: 30px;
        height: 30px;
        border: 1px solid rgba(79, 105, 86, .12);
        border-radius: 9px;
        background: rgba(249, 251, 249, .94);
        color: #738078;
        font-size: 0;
        box-shadow: none;
    }

    .nav-icon svg {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.65;
        stroke-linecap: round;
        stroke-linejoin: round;
        vector-effect: non-scaling-stroke;
    }

    .side-nav a:hover .nav-icon {
        border-color: rgba(71, 122, 84, .16);
        background: #f3f8f4;
        color: #496653;
    }

    .side-nav a.active .nav-icon {
        border-color: rgba(52, 146, 79, .20);
        background: #eaf6ed;
        color: #218045;
    }

    .nav-title {
        font-size: 11px;
        font-weight: 690;
        letter-spacing: -.005em;
    }

    .side-nav-primary-group .nav-title {
        font-weight: 760;
    }

    .side-nav-secondary-label {
        min-height: 20px;
        margin: 13px 7px 4px;
        color: rgba(69, 88, 75, .52);
        font-size: 7px;
        font-weight: 760;
        letter-spacing: .10em;
    }

    .side-nav-secondary-label::after {
        background:
            linear-gradient(
                90deg,
                rgba(75, 101, 82, .13),
                rgba(75, 101, 82, 0)
            );
    }

    .side-nav-secondary-group {
        gap: 2px;
    }

    .side-nav-secondary-group a {
        min-height: 40px;
        color: #6b756e;
    }

    .side-nav-secondary-group .nav-icon {
        width: 29px;
        height: 29px;
    }

    .side-nav-account-group {
        gap: 2px;
        padding-top: 12px;
    }

    .side-nav-account-group::before {
        top: 5px;
        right: 7px;
        left: 7px;
        background: rgba(73, 101, 81, .12);
    }

    .side-nav-account-group a {
        min-height: 40px;
        color: #6b756e;
    }

    .side-nav-account-group .nav-icon {
        width: 29px;
        height: 29px;
        background: transparent;
    }

    .sidebar-foot {
        margin-top: 3px;
        padding: 6px 7px 1px;
        border-top-color: rgba(73, 101, 81, .09);
    }

    .sidebar-foot-version {
        color: #a2aca5;
        font-size: 6px;
        letter-spacing: .08em;
    }

    .sidebar-foot-version span:last-child {
        color: #78917f;
        font-weight: 760;
    }

    .nav-icon-notification .nav-notification-badge {
        top: -6px;
        right: -7px;
    }

    .container {
        width: calc(100% - 184px);
        margin-left: 184px;
    }
}

@media (max-width: 980px) {
    .nav-icon svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
}