:root {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #172033;
    background: #f4f6fa;
    line-height: 1.45;
    --nav: #111827;
    --nav-soft: #1f2937;
    --blue: #315efb;
    --blue-dark: #2447c6;
    --border: #e1e6ef;
    --muted: #687386;
    --card: #fff;
    --danger: #b4232d;
    --success: #21834a;
    --sidebar: 250px
}

* {
    box-sizing: border-box
}

html,
body {
    margin: 0;
    min-height: 100%
}

body {
    background: #f4f6fa
}

a {
    color: #3157cc;
    text-decoration: none
}

button,
input,
select {
    font: inherit
}

button,
.button {
    border: 0;
    border-radius: 9px;
    padding: 10px 15px;
    background: var(--blue);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: .16s ease
}

button:hover,
.button:hover {
    background: var(--blue-dark)
}

button:disabled {
    cursor: not-allowed;
    opacity: .45
}

.secondary {
    background: #edf0f5;
    color: #293548
}

.secondary:hover {
    background: #dfe4ec
}

.danger {
    background: var(--danger)
}

.safe {
    background: var(--success)
}

.danger-text {
    color: var(--danger) !important
}

.compact {
    padding: 7px 11px;
    font-size: .87rem
}

.link {
    background: none;
    color: #3157cc;
    padding: 4px;
    text-decoration: none;
    font-weight: 650
}

.link:hover {
    background: #eef2ff
}

.app-shell {
    min-height: 100vh
}

.sidebar {
    position: fixed;
    z-index: 40;
    inset: 0 auto 0 0;
    width: var(--sidebar);
    display: flex;
    flex-direction: column;
    background: var(--nav);
    color: #fff;
    transition: width .2s ease, transform .2s ease
}

.sidebar-head {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-bottom: 1px solid #ffffff12
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 800;
    font-size: 1.08rem;
    white-space: nowrap
}

.brand-mark {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, #6282ff, #315efb);
    font-size: .78rem;
    box-shadow: 0 5px 16px #315efb55
}

.sidebar-collapse {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 8px;
    background: #ffffff12;
    color: #d7dfed;
    font-size: 1.3rem
}

.sidebar-collapse:hover {
    background: #ffffff22
}

.sidebar-nav {
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px
}

.nav-item {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 9px;
    padding: 10px 12px;
    color: #c7d0dd;
    background: transparent;
    text-decoration: none;
    text-align: left;
    white-space: nowrap
}

.nav-item:hover {
    background: #ffffff0d;
    color: #fff
}

.nav-item.active {
    background: #315efb;
    color: #fff;
    box-shadow: 0 7px 18px #0003
}

.nav-icon {
    width: 22px;
    text-align: center;
    font-size: 1.15rem;
    flex: none
}

.sidebar-foot {
    margin-top: auto;
    padding: 14px 12px 18px;
    border-top: 1px solid #ffffff12
}

.parent-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 6px;
    overflow: hidden
}

.parent-profile small {
    display: block;
    max-width: 155px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #9ca8b8
}

.avatar {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #3b4960;
    font-weight: 800;
    flex: none
}

.sidebar-foot form {
    margin: 0
}

.logout {
    border: 0;
    cursor: pointer
}

.app-main {
    min-height: 100vh;
    margin-left: var(--sidebar);
    transition: margin-left .2s ease
}

.container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 38px clamp(20px, 4vw, 56px) 60px
}

.mobile-header {
    display: none
}

.sidebar-overlay {
    display: none
}

.sidebar-collapsed .sidebar {
    width: 74px
}

.sidebar-collapsed .app-main {
    margin-left: 74px
}

.sidebar-collapsed .brand-name,
.sidebar-collapsed .nav-label {
    display: none
}

.sidebar-collapsed .sidebar-head {
    padding: 0 20px
}

.sidebar-collapsed .sidebar-collapse {
    position: absolute;
    left: 60px;
    transform: rotate(180deg);
    background: #28344a
}

.sidebar-collapsed .nav-item {
    justify-content: center;
    padding: 10px
}

.sidebar-collapsed .parent-profile {
    justify-content: center;
    padding: 8px 0
}

.guest-header {
    height: 70px;
    background: var(--nav);
    display: flex;
    align-items: center;
    padding: 0 max(20px, calc((100% - 1040px)/2))
}

.guest-container {
    max-width: 1040px;
    margin: 0 auto;
    padding: 32px 18px
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px;
    margin-bottom: 20px;
    box-shadow: 0 5px 20px #26354d0a
}

.auth-card {
    max-width: 440px;
    margin: 50px auto
}

h1,
h2,
h3 {
    line-height: 1.18;
    margin-top: 0;
    color: #141c2b
}

h1 {
    font-size: clamp(1.8rem, 3vw, 2.45rem);
    margin-bottom: 7px
}

h2 {
    font-size: 1.15rem;
    margin-bottom: 8px
}

p {
    margin-top: 0
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: .11em;
    font-size: .74rem;
    font-weight: 800;
    color: #315efb;
    margin: 0 0 8px
}

.back-link {
    display: inline-block;
    margin-bottom: 18px;
    color: #657086
}

.page-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 22px;
    margin-bottom: 28px
}

.page-heading p:not(.eyebrow) {
    color: var(--muted);
    margin-bottom: 0
}

.section-heading,
.group-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px
}

.section-heading p,
.group-heading p {
    color: var(--muted);
    margin: 0
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px
}

.stat-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 5px 20px #26354d0a
}

.stat-card>span {
    display: block;
    color: var(--muted);
    font-size: .86rem;
    font-weight: 650
}

.stat-card strong {
    display: block;
    font-size: 2rem;
    line-height: 1.2;
    margin: 8px 0 3px
}

.stat-card small {
    color: #87909f
}

.positive {
    color: var(--success)
}

.negative {
    color: var(--danger)
}

.content-grid {
    display: grid;
    gap: 20px
}

.two-column {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)
}

.content-grid>.card {
    margin: 0
}

.notice {
    padding: 13px 16px;
    background: #fff7cf;
    border: 1px solid #ead472;
    border-radius: 10px;
    margin-bottom: 18px
}

.notice.error {
    background: #ffeaec;
    border-color: #e6a2a7;
    color: #8c1821
}

.notice.success {
    background: #e8f7ee;
    border-color: #a7ddba;
    color: #176536
}

.error {
    color: #a51f2a
}

.control,
.row,
.device-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px
}

.control p {
    margin-bottom: 0;
    color: var(--muted)
}

.control select {
    min-width: 170px
}

.rows,
.device-list {
    border-top: 1px solid var(--border)
}

.row,
.device-row {
    padding: 12px 2px;
    border-bottom: 1px solid var(--border)
}

.device-row.linked {
    color: inherit
}

.device-row.linked:hover {
    background: #f8f9fc
}

.grow {
    flex: 1;
    min-width: 0
}

.check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500
}

.check input {
    width: auto;
    margin: 0
}

.check small,
.row small,
.device-row small {
    display: block;
    color: var(--muted)
}

.status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    flex: none
}

.status-dot.online,
.status.online span {
    background: #2aa354
}

.status-dot.offline,
.status.offline span {
    background: #a0a8b4
}

.inline-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 9px;
    align-items: end;
    margin-top: 14px
}

.inline-form.one-input {
    grid-template-columns: 1fr auto
}

label {
    display: block;
    font-weight: 650;
    margin: 12px 0
}

input,
select {
    display: block;
    width: 100%;
    border: 1px solid #b9c2d0;
    border-radius: 9px;
    padding: 10px 11px;
    font: inherit;
    margin-top: 5px;
    background: #fff;
    color: #172033
}

input:focus,
select:focus {
    outline: 3px solid #315efb1f;
    border-color: #5576ef
}

.pill {
    font-size: .73rem;
    background: #edf0f5;
    color: #526071;
    border-radius: 14px;
    padding: 4px 8px;
    white-space: nowrap
}

.selection-bar {
    position: sticky;
    top: 12px;
    z-index: 8
}

.selection-bar small {
    display: block;
    color: var(--muted)
}

.selection-actions {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) auto auto minmax(140px, 1fr) auto;
    gap: 8px;
    align-items: center;
    margin-top: 14px
}

.selection-actions input {
    margin: 0
}

.group-panel {
    padding: 0;
    overflow: hidden
}

.group-heading {
    padding: 17px 20px;
    background: #fafbfc;
    border-bottom: 1px solid var(--border)
}

.group-heading h2 {
    margin: 0
}

.group-heading>.check {
    margin: 0
}

.group-rename {
    display: flex;
    gap: 8px;
    flex: 1;
    max-width: 430px
}

.group-rename input {
    margin: 0
}

.group-panel .device-list {
    border: 0;
    padding: 0 20px
}

.device-select {
    margin: 0
}

.empty-state {
    color: var(--muted);
    padding: 20px;
    text-align: center
}

.room-builder {
    margin-top: 26px
}

.device-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0
}

.device-chip {
    background: #edf0f5;
    color: #354155;
    padding: 8px 11px;
    font-weight: 650
}

.device-chip:hover {
    background: #e2e7ef
}

.device-chip.selected {
    background: #315efb;
    color: #fff;
    box-shadow: 0 0 0 3px #315efb22
}

.room-scroll {
    overflow: auto;
    border: 1px solid #cfd7e4;
    border-radius: 12px;
    background: #dfe5ee;
    padding: 12px
}

.room-grid {
    min-width: 900px;
    display: grid;
    grid-template-columns: repeat(20, minmax(40px, 1fr));
    gap: 3px
}

.room-cell {
    aspect-ratio: 1;
    padding: 2px;
    background: #f8fafc;
    color: #42506a;
    border: 1px solid #d4dbe6;
    border-radius: 4px;
    font-size: .62rem;
    overflow: hidden
}

.room-cell:hover {
    background: #e9edff;
    border-color: #758df0
}

.room-cell.occupied {
    background: #dfe6ff;
    border-color: #7890ec;
    color: #203d9b
}

.room-cell span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.device-filter {
    min-width: 240px;
    margin: 0
}

.compact-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.pair-code {
    font-size: 2rem;
    letter-spacing: .2em;
    text-align: center
}

.pair-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start
}

.pair-form-card {
    width: 100%
}

.pair-form-card h2 {
    margin-bottom: 8px
}

.pair-form-card form {
    margin-top: 22px
}

.pair-form-card button {
    width: 100%;
    justify-content: center
}

.pair-step {
    display: inline-flex;
    margin-bottom: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #fff0e6;
    color: #b94f1f;
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em
}

.pair-security-note {
    margin: 16px 0 0;
    padding-top: 15px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: .86rem
}

.paired-devices-card {
    min-width: 0
}

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

.pair-devices-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 650px
}

.pair-devices-table th,
.pair-devices-table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: middle
}

.pair-devices-table th {
    background: #faf6f1;
    color: var(--muted);
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase
}

.pair-devices-table tbody tr:last-child td {
    border-bottom: 0
}

.pair-devices-table td strong,
.pair-devices-table td small {
    display: block
}

.pair-devices-table td small {
    color: var(--muted);
    margin-top: 3px
}

.pair-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap
}

.pair-status i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9b918a
}

.pair-status.online i {
    background: #32945e;
    box-shadow: 0 0 0 3px #e5f4eb
}

.pair-open {
    font-weight: 750;
    color: #c45624
}

.pair-empty {
    padding: 34px 20px;
    text-align: center
}

.pair-empty strong,
.pair-empty span {
    display: block
}

.pair-empty span {
    margin-top: 5px;
    color: var(--muted)
}


.wide {
    display: block;
    text-align: center;
    margin-top: 12px
}

.two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px
}

.actions {
    display: flex;
    gap: 9px
}

.device-state {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 13px;
    font-weight: 750
}

.small-stat {
    font-size: 1.15rem !important;
    margin-top: 13px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

@media(max-width:1050px) {
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .selection-actions {
        grid-template-columns: 1fr auto auto
    }

    .selection-actions input:nth-of-type(2) {
        grid-column: 1
    }

    .two-column {
        grid-template-columns: 1fr
    }
}

@media(max-width:760px) {
    .sidebar {
        width: 250px;
        transform: translateX(-100%)
    }

    .app-main,
    .sidebar-collapsed .app-main {
        margin-left: 0
    }

    .sidebar-collapsed .sidebar {
        width: 250px
    }

    .sidebar-collapsed .brand-name,
    .sidebar-collapsed .nav-label {
        display: inline
    }

    .sidebar-collapsed .nav-item {
        justify-content: flex-start;
        padding: 10px 12px
    }

    .sidebar-collapsed .parent-profile {
        justify-content: flex-start;
        padding: 8px 10px
    }

    .sidebar-collapsed .sidebar-collapse {
        position: static;
        transform: none
    }

    .sidebar-mobile-open .sidebar {
        transform: translateX(0)
    }

    .sidebar-overlay {
        position: fixed;
        z-index: 30;
        inset: 0;
        border: 0;
        border-radius: 0;
        background: #0b122080;
        padding: 0
    }

    .sidebar-mobile-open .sidebar-overlay {
        display: block
    }

    .mobile-header {
        height: 62px;
        display: flex;
        align-items: center;
        gap: 14px;
        background: var(--nav);
        padding: 0 16px
    }

    .mobile-header>button {
        background: #ffffff12;
        padding: 7px 10px
    }

    .container {
        padding: 25px 16px 45px
    }

    .page-heading {
        display: block
    }

    .page-heading>.button,
    .page-heading>.device-filter {
        width: 100%;
        margin-top: 16px
    }

    .group-heading {
        align-items: stretch;
        flex-direction: column
    }

    .group-rename {
        max-width: none
    }

    .selection-bar {
        position: static
    }

    .selection-actions {
        grid-template-columns: 1fr 1fr
    }

    .selection-actions input {
        grid-column: 1/-1 !important
    }

    .control {
        display: block
    }

    .control .toggle {
        width: 100%;
        margin-top: 12px
    }

    .inline-form {
        grid-template-columns: 1fr
    }

    .inline-form.one-input {
        grid-template-columns: 1fr
    }

    .compact-stats {
        grid-template-columns: 1fr
    }

    .guest-header {
        padding: 0 16px
    }
}

@media(max-width:480px) {
    .stats-grid {
        grid-template-columns: 1fr
    }

    .selection-actions {
        grid-template-columns: 1fr
    }

    .group-rename {
        display: block
    }

    .group-rename button {
        width: 100%;
        margin-top: 8px
    }

    .device-row {
        gap: 9px
    }

    .device-row .link {
        display: none
    }
}

.selection-actions {
    grid-template-columns: minmax(140px, 1fr) auto minmax(140px, 1fr) auto auto minmax(140px, 1fr) auto
}

.selection-actions select {
    margin: 0
}

@media(max-width:1050px) {
    .selection-actions {
        grid-template-columns: 1fr auto auto
    }

    .selection-actions input,
    .selection-actions select {
        margin: 0
    }
}

@media(max-width:760px) {
    .selection-actions {
        grid-template-columns: 1fr 1fr
    }

    .selection-actions input,
    .selection-actions select {
        grid-column: 1/-1 !important
    }
}

@media(max-width:480px) {
    .selection-actions {
        grid-template-columns: 1fr
    }
}

/* Application background and navigation */
:root {
    --sidebar: 276px;
    --shell-navy: #101728;
    --shell-navy-2: #151f34;
    --shell-line: rgba(255, 255, 255, .08);
    --shell-text: #f7f9fd;
    --shell-muted: #8f9bb0;
    --shell-accent: #6d83ff
}

body {
    background: #f5f7fb
}

.app-main {
    position: relative;
    isolation: isolate;
    background: linear-gradient(145deg, #f7f9fc 0%, #f3f6fb 48%, #f8f9fc 100%)
}

.app-main::before {
    content: "";
    position: fixed;
    z-index: -2;
    inset: 0 0 0 var(--sidebar);
    pointer-events: none;
    background: radial-gradient(circle at 16% 2%, rgba(92, 118, 255, .09), transparent 28rem), radial-gradient(circle at 92% 15%, rgba(60, 184, 165, .07), transparent 24rem);
    transition: inset .22s ease
}

.app-main::after {
    content: "";
    position: fixed;
    z-index: -1;
    inset: 0 0 0 var(--sidebar);
    pointer-events: none;
    opacity: .32;
    background-image: linear-gradient(rgba(31, 49, 82, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(31, 49, 82, .025) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(to bottom, black, transparent 72%);
    transition: inset .22s ease
}

.container {
    position: relative;
    z-index: 1
}

.sidebar {
    width: var(--sidebar);
    overflow: visible;
    background: linear-gradient(180deg, var(--shell-navy) 0%, var(--shell-navy-2) 58%, #101827 100%);
    border-right: 1px solid rgba(255, 255, 255, .06);
    box-shadow: 18px 0 50px rgba(20, 30, 50, .08);
    transition: width .22s cubic-bezier(.4, 0, .2, 1), transform .22s ease
}

.sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 0 0, rgba(109, 131, 255, .16), transparent 18rem)
}

.sidebar-head {
    position: relative;
    height: 88px;
    padding: 0 22px;
    border-color: var(--shell-line)
}

.sidebar .brand {
    position: relative;
    gap: 12px;
    min-width: 0
}

.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    flex: none;
    background: linear-gradient(145deg, #758bff, #526cf2);
    box-shadow: 0 9px 28px rgba(74, 99, 235, .35), inset 0 1px rgba(255, 255, 255, .25)
}

.brand-mark svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.brand-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: opacity .14s ease
}

.brand-copy strong {
    font-size: 1rem;
    letter-spacing: -.01em;
    color: var(--shell-text)
}

.brand-copy small {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--shell-muted);
    margin-top: 2px
}

.sidebar-collapse {
    position: absolute;
    z-index: 3;
    right: -14px;
    top: 30px;
    width: 29px;
    height: 29px;
    border: 1px solid #dbe1ec;
    border-radius: 50%;
    background: #fff;
    color: #506078;
    box-shadow: 0 5px 16px rgba(36, 51, 78, .16)
}

.sidebar-collapse:hover {
    background: #f7f9fc;
    color: #263550;
    transform: scale(1.04)
}

.sidebar-collapse svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .22s ease
}

.sidebar-nav {
    position: relative;
    padding: 22px 14px;
    gap: 6px
}

.nav-section-label {
    margin: 0 10px 8px;
    color: #68758c;
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .14em;
    white-space: nowrap;
    overflow: hidden
}

.nav-section-secondary {
    margin-top: 20px;
    padding-top: 17px;
    border-top: 1px solid var(--shell-line)
}

.nav-item {
    position: relative;
    min-height: 58px;
    padding: 8px 10px;
    gap: 11px;
    border: 1px solid transparent;
    border-radius: 13px;
    color: #aeb9ca;
    transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease
}

.nav-item:hover {
    color: #f6f8fc;
    background: rgba(255, 255, 255, .055);
    border-color: rgba(255, 255, 255, .045);
    transform: translateX(2px)
}

.nav-item.active {
    color: #fff;
    background: linear-gradient(105deg, rgba(91, 115, 244, .28), rgba(91, 115, 244, .13));
    border-color: rgba(126, 147, 255, .2);
    box-shadow: inset 3px 0 #7c91ff, 0 8px 24px rgba(0, 0, 0, .1)
}

.nav-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex: none;
    background: rgba(255, 255, 255, .045);
    transition: background .16s ease, color .16s ease
}

.nav-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.nav-item.active .nav-icon {
    background: linear-gradient(145deg, #6d83ff, #536cf0);
    box-shadow: 0 7px 18px rgba(54, 76, 204, .34)
}

.nav-label {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    line-height: 1.2
}

.nav-label strong {
    font-size: .88rem;
    font-weight: 720;
    color: inherit
}

.nav-label small {
    font-size: .69rem;
    color: #78869b;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.nav-item.active .nav-label small,
.nav-item:hover .nav-label small {
    color: #aab6d2
}

.nav-count {
    min-width: 24px;
    height: 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    color: #9eabc0;
    font-size: .67rem;
    font-weight: 800
}

.nav-item.active .nav-count {
    background: rgba(126, 147, 255, .24);
    color: #d9e0ff
}

.sidebar-foot {
    position: relative;
    padding: 15px 14px 18px;
    border-color: var(--shell-line)
}

.parent-profile {
    height: 59px;
    padding: 8px 9px;
    margin: 0 0 7px;
    border: 1px solid rgba(255, 255, 255, .055);
    border-radius: 13px;
    background: rgba(255, 255, 255, .03)
}

.avatar {
    width: 37px;
    height: 37px;
    background: linear-gradient(145deg, #34435d, #26344d);
    color: #dfe5f1;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07)
}

.profile-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.25
}

.profile-copy strong {
    max-width: 158px;
    color: #e9edf5;
    font-size: .82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.profile-copy small {
    max-width: 158px;
    color: #758299;
    font-size: .67rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 3px
}

.logout {
    min-height: 43px;
    color: #929fb2
}

.logout:hover {
    color: #ffb9bf;
    background: rgba(220, 65, 77, .09);
    border-color: rgba(220, 65, 77, .12)
}

.logout .nav-icon {
    height: 31px;
    background: transparent
}

.sidebar-collapsed .sidebar {
    width: 86px
}

.sidebar-collapsed .app-main {
    margin-left: 86px
}

.sidebar-collapsed .app-main::before,
.sidebar-collapsed .app-main::after {
    inset: 0 0 0 86px
}

.sidebar-collapsed .brand-copy,
.sidebar-collapsed .nav-label,
.sidebar-collapsed .nav-count,
.sidebar-collapsed .nav-section-label,
.sidebar-collapsed .profile-copy {
    display: none
}

.sidebar-collapsed .sidebar-head {
    padding: 0 22px
}

.sidebar-collapsed .sidebar-collapse {
    left: auto;
    right: -14px;
    transform: none
}

.sidebar-collapsed .sidebar-collapse:hover {
    transform: scale(1.04)
}

.sidebar-collapsed .sidebar-collapse svg {
    transform: rotate(180deg)
}

.sidebar-collapsed .nav-item {
    justify-content: center;
    padding: 8px;
    transform: none
}

.sidebar-collapsed .nav-item::after {
    content: attr(data-label);
    position: absolute;
    left: 64px;
    top: 50%;
    z-index: 50;
    transform: translate(8px, -50%);
    padding: 7px 10px;
    border-radius: 8px;
    background: #172033;
    color: #fff;
    font-size: .73rem;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 8px 20px rgba(18, 28, 45, .2);
    transition: .14s ease
}

.sidebar-collapsed .nav-item:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%)
}

.sidebar-collapsed .parent-profile {
    justify-content: center;
    padding: 8px
}

.sidebar-collapsed .sidebar-foot {
    padding-inline: 14px
}

.guest-header {
    background: linear-gradient(100deg, var(--shell-navy), var(--shell-navy-2));
    border-bottom: 1px solid rgba(255, 255, 255, .07)
}

.guest-container {
    position: relative
}

.mobile-header svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round
}

@media(max-width:760px) {
    :root {
        --sidebar: 276px
    }

    .app-main::before,
    .app-main::after,
    .sidebar-collapsed .app-main::before,
    .sidebar-collapsed .app-main::after {
        inset: 62px 0 0
    }

    .sidebar,
    .sidebar-collapsed .sidebar {
        width: min(86vw, 310px);
        box-shadow: 28px 0 70px rgba(5, 12, 25, .3)
    }

    .sidebar-head,
    .sidebar-collapsed .sidebar-head {
        padding: 0 20px
    }

    .sidebar-collapse {
        display: none
    }

    .sidebar-collapsed .brand-copy,
    .sidebar-collapsed .nav-label,
    .sidebar-collapsed .nav-count,
    .sidebar-collapsed .nav-section-label,
    .sidebar-collapsed .profile-copy {
        display: flex
    }

    .sidebar-collapsed .nav-section-label {
        display: block
    }

    .sidebar-collapsed .nav-item {
        justify-content: flex-start;
        padding: 8px 10px
    }

    .sidebar-collapsed .nav-item::after {
        display: none
    }

    .sidebar-collapsed .parent-profile {
        justify-content: flex-start;
        padding: 8px 9px
    }

    .mobile-header {
        position: sticky;
        z-index: 20;
        top: 0;
        justify-content: flex-start;
        background: rgba(16, 23, 40, .96);
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        box-shadow: 0 8px 24px rgba(26, 37, 58, .08);
        backdrop-filter: blur(14px)
    }

    .mobile-header>button {
        width: 38px;
        height: 38px;
        background: rgba(255, 255, 255, .07)
    }

    .mobile-header .brand {
        font-size: .96rem
    }

    .mobile-header .brand-mark {
        width: 34px;
        height: 34px;
        border-radius: 10px
    }

    .mobile-header .brand-mark svg {
        width: 18px;
        height: 18px
    }

    .mobile-page-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #7187ff;
        margin-left: auto;
        box-shadow: 0 0 0 5px rgba(113, 135, 255, .12)
    }

    .sidebar-overlay {
        background: rgba(7, 13, 24, .62);
        backdrop-filter: blur(2px)
    }
}

/* Warm Riba palette */
:root {
    --blue: #df6b31;
    --blue-dark: #bf5220;
    --border: #e8e0d7;
    --muted: #786f67;
    --card: #fffdf9;
    --nav: #fffdf9;
    --nav-soft: #faf5ee;
    --shell-navy: #fffdf9;
    --shell-navy-2: #faf6ef;
    --shell-line: rgba(80, 59, 42, .1);
    --shell-text: #2f2925;
    --shell-muted: #93857a;
    --shell-accent: #df6b31;
    --danger: #bc4147;
    --success: #34835b
}

body {
    color: #332d29;
    background: #f6f1ea
}

a {
    color: #bd5728
}

h1,
h2,
h3 {
    color: #2f2925
}

.secondary {
    color: #594b42;
    background: #f0e9e2
}

.secondary:hover {
    background: #e7ddd3
}

.link {
    color: #bd5728
}

.link:hover {
    background: #fff0e5
}

.app-main {
    background: linear-gradient(145deg, #faf7f2 0%, #f5efe7 50%, #fbf8f4 100%)
}

.app-main::before {
    background: radial-gradient(circle at 13% 1%, rgba(229, 112, 52, .13), transparent 29rem), radial-gradient(circle at 91% 13%, rgba(232, 178, 87, .1), transparent 25rem)
}

.app-main::after {
    opacity: .4;
    background-image: linear-gradient(rgba(116, 85, 61, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(116, 85, 61, .025) 1px, transparent 1px)
}

.sidebar {
    color: #332d29;
    background: linear-gradient(180deg, #fffdf9 0%, #fbf7f1 63%, #f8f2eb 100%);
    border-right-color: #e7ddd2;
    box-shadow: 15px 0 45px rgba(91, 68, 48, .08)
}

.sidebar::before {
    background: radial-gradient(circle at 0 0, rgba(232, 112, 51, .1), transparent 18rem)
}

.brand-mark {
    background: linear-gradient(145deg, #ef8a4c, #d95d28);
    box-shadow: 0 9px 25px rgba(205, 85, 36, .25), inset 0 1px rgba(255, 255, 255, .35)
}

.brand-copy strong {
    color: #302924
}

.brand-copy small {
    color: #9a897c
}

.sidebar-collapse {
    border-color: #e2d7cb;
    background: #fffdf9;
    color: #765f50;
    box-shadow: 0 5px 16px rgba(84, 61, 43, .14)
}

.sidebar-collapse:hover {
    background: #fff7ef;
    color: #b84e20
}

.nav-section-label {
    color: #a39488
}

.nav-item {
    color: #756a62
}

.nav-item:hover {
    color: #3b302a;
    background: #f8eee4;
    border-color: #f0dfcf
}

.nav-item.active {
    color: #9f421c;
    background: linear-gradient(105deg, #fff0e4, #fce7d7);
    border-color: #f1d1ba;
    box-shadow: inset 3px 0 #df6b31, 0 8px 22px rgba(155, 76, 31, .07)
}

.nav-icon {
    background: #f5eee7;
    color: #817268
}

.nav-item.active .nav-icon {
    color: #fff;
    background: linear-gradient(145deg, #eb8246, #d75d29);
    box-shadow: 0 7px 17px rgba(198, 79, 31, .24)
}

.nav-label small {
    color: #9c9086
}

.nav-item.active .nav-label small,
.nav-item:hover .nav-label small {
    color: #a46d50
}

.nav-count {
    background: #f2e9e1;
    color: #89776a
}

.nav-item.active .nav-count {
    background: #f5d8c4;
    color: #9f421c
}

.parent-profile {
    background: rgba(255, 255, 255, .6);
    border-color: #e9dfd5
}

.avatar {
    color: #a94b22;
    background: linear-gradient(145deg, #f8e5d7, #efd4c1);
    box-shadow: inset 0 0 0 1px #e9c7af
}

.profile-copy strong {
    color: #41352e
}

.profile-copy small {
    color: #9b8c81
}

.logout {
    color: #87786d
}

.logout:hover {
    color: #b3343d;
    background: #fcebed;
    border-color: #f4d4d7
}

.sidebar-collapsed .nav-item::after {
    background: #49382e;
    color: #fffaf5;
    box-shadow: 0 8px 20px rgba(80, 56, 40, .18)
}

.guest-header {
    background: linear-gradient(100deg, #fffdf9, #f8efe5);
    border-bottom-color: #e6dbcf;
    box-shadow: 0 5px 18px rgba(88, 64, 45, .06)
}

.guest-header .brand {
    color: #352b26
}

input:focus,
select:focus {
    outline-color: rgba(223, 107, 49, .16);
    border-color: #dd7b49
}

.eyebrow {
    color: #c75b29
}

.device-chip.selected {
    background: #df6b31;
    box-shadow: 0 0 0 3px rgba(223, 107, 49, .16)
}

.room-cell:hover {
    background: #fff0e5;
    border-color: #df8a5e
}

.room-cell.occupied {
    background: #fbe0cc;
    border-color: #df8a5e;
    color: #8f3b19
}

@media(max-width:760px) {

    .sidebar,
    .sidebar-collapsed .sidebar {
        box-shadow: 28px 0 70px rgba(67, 46, 32, .24)
    }

    .mobile-header {
        background: rgba(255, 252, 247, .96);
        border-bottom-color: #e7ddd3;
        box-shadow: 0 8px 24px rgba(89, 66, 48, .09)
    }

    .mobile-header .brand {
        color: #352b26
    }

    .mobile-header>button {
        color: #6e5749;
        background: #f5e9de
    }

    .mobile-page-dot {
        background: #df6b31;
        box-shadow: 0 0 0 5px rgba(223, 107, 49, .12)
    }

    .sidebar-overlay {
        background: rgba(55, 39, 29, .45)
    }
}

.dashboard-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.dashboard-stats .stat-card {
    min-height: 145px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.dashboard-stats .stat-card strong {
    font-size: 2.25rem
}

@media(max-width:800px) {
    .dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:480px) {
    .dashboard-stats {
        grid-template-columns: 1fr
    }
}

/* Devices canvas */
.devices-canvas-page {
    min-width: 0
}

.canvas-heading {
    margin-bottom: 18px
}

.canvas-summary {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 15px;
    border: 1px solid #eadfd4;
    border-radius: 13px;
    background: rgba(255, 253, 249, .82);
    box-shadow: 0 8px 25px rgba(95, 65, 43, .06)
}

.canvas-summary strong {
    font-size: 1.35rem;
    color: #b64c20
}

.canvas-summary span {
    color: #837368;
    font-size: .78rem;
    font-weight: 700
}

.canvas-toolbar {
    position: relative;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 64px;
    padding: 11px 14px;
    border: 1px solid #e7dcd1;
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    background: rgba(255, 253, 249, .92);
    box-shadow: 0 -4px 20px rgba(88, 62, 43, .035);
    backdrop-filter: blur(10px)
}

.group-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.group-toggle svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.group-toggle:disabled {
    cursor: not-allowed;
    opacity: .42;
    filter: grayscale(.35)
}

.selection-count {
    font-size: .8rem;
    font-weight: 700;
    color: #6f6056
}

.canvas-help {
    margin-left: auto;
    color: #9a8b80;
    font-size: .75rem
}

.canvas-error {
    margin: 0;
    border-radius: 0
}

.canvas-viewport {
    position: relative;
    height: calc(100vh - 255px);
    min-height: 570px;
    overflow: auto;
    border: 1px solid #e2d5c8;
    border-radius: 0 0 16px 16px;
    background: #f9f4ed;
    box-shadow: 0 18px 48px rgba(82, 57, 39, .09);
    overscroll-behavior: contain
}

.device-canvas {
    position: relative;
    width: 3650px;
    height: 2600px;
    background-color: #f8f2e9;
    background-image: radial-gradient(circle, #cbbbab 1.2px, transparent 1.3px), linear-gradient(rgba(169, 142, 119, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(169, 142, 119, .055) 1px, transparent 1px);
    background-size: 24px 24px, 120px 120px, 120px 120px;
    user-select: none
}

.group-frame {
    position: absolute;
    z-index: 1;
    border: 2px dashed rgba(218, 101, 46, .44);
    border-radius: 19px;
    background: rgba(235, 126, 70, .055);
    pointer-events: none
}

.group-frame-label {
    position: absolute;
    left: 13px;
    top: -14px;
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 4px 11px;
    border: 1px solid #edc7ad;
    border-radius: 999px;
    background: #fff7ef;
    color: #a7461f;
    font-size: .71rem;
    font-weight: 800;
    box-shadow: 0 4px 11px rgba(123, 68, 35, .08);
    pointer-events: auto
}

.group-frame-label:hover {
    background: #ffe9d9
}

.device-node {
    position: absolute;
    z-index: 3;
    width: 156px;
    min-height: 96px;
    padding: 10px 10px 9px;
    border: 1px solid #e5d9cd;
    border-radius: 15px;
    background: #fffdfa;
    box-shadow: 0 9px 26px rgba(73, 51, 37, .11), 0 2px 5px rgba(73, 51, 37, .06);
    cursor: grab;
    touch-action: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .08s linear
}

.device-node:hover,
.device-node.menu-open {
    z-index: 10;
    border-color: #dfa377;
    box-shadow: 0 13px 34px rgba(116, 62, 30, .16), 0 2px 6px rgba(73, 51, 37, .07)
}

.device-node.selected {
    border-color: #df6b31;
    box-shadow: 0 0 0 3px rgba(223, 107, 49, .15), 0 14px 30px rgba(109, 58, 30, .15)
}

.device-node.dragging {
    z-index: 20;
    cursor: grabbing;
    transition: none
}

.device-monitor {
    display: flex;
    justify-content: center
}

.monitor-screen {
    position: relative
}

.monitor-screen svg {
    display: block;
    width: 48px;
    height: 34px;
    fill: #f2e6db;
    stroke: #6e5b4f;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round
}

.device-status {
    display: inline-block;
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: #aaa097;
    box-shadow: 0 0 0 3px rgba(130, 119, 111, .12)
}

.monitor-screen .device-status {
    position: absolute;
    z-index: 2;
    right: -4px;
    top: -4px;
    border: 2px solid #fff;
    width: 18px;
    height: 18px;
    box-shadow: none
}

.device-status.online {
    background: #3a9b6a;
    box-shadow: 0 0 0 3px rgba(58, 155, 106, .14)
}

.monitor-screen .device-status.online {
    box-shadow: none
}

.node-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    margin-top: 6px;
    text-align: center
}

.node-copy strong {
    display: block;
    max-width: 132px;
    overflow: hidden;
    color: #3c312b;
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap
}

.node-copy span {
    display: block;
    max-width: 132px;
    margin-top: 3px;
    overflow: hidden;
    color: #9a8b80;
    font-size: .62rem;
    text-overflow: ellipsis;
    white-space: nowrap
}

.node-check {
    position: absolute;
    top: 8px;
    left: 8px;
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 50%;
    background: #df6b31;
    color: white;
    font-size: .7rem;
    font-weight: 900
}

.node-actions {
    position: absolute;
    z-index: 30;
    top: calc(100% + 8px);
    left: 0;
    width: 172px;
    padding: 6px;
    border: 1px solid #e2d6ca;
    border-radius: 12px;
    background: #fffdf9;
    box-shadow: 0 18px 45px rgba(60, 41, 28, .19)
}

.node-actions button,
.node-actions a {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 9px;
    padding: 8px 9px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #54463e;
    font-family: inherit;
    font-size: .75rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer
}

.node-actions button:hover,
.node-actions a:hover {
    background: #faeee4;
    color: #a7451d
}

.node-actions span {
    display: inline-grid;
    width: 18px;
    height: 18px;
    place-items: center;
    color: #b86236;
    font-size: .85rem
}

.node-actions .remove {
    color: #b63f46
}

.node-actions .remove:hover {
    background: #fcedee;
    color: #a82f37
}

.canvas-empty {
    position: absolute;
    top: 145px;
    left: 50vw;
    width: 340px;
    padding: 35px;
    transform: translateX(-50%);
    border: 1px dashed #dac9ba;
    border-radius: 20px;
    background: rgba(255, 253, 249, .78);
    text-align: center
}

.canvas-empty h2 {
    font-size: 1.05rem
}

.canvas-empty p {
    margin: 8px 0 20px;
    color: #8d7d72;
    font-size: .8rem
}

.empty-monitor {
    display: grid;
    width: 58px;
    height: 46px;
    margin: 0 auto 15px;
    place-items: center;
    border: 2px solid #c99877;
    border-radius: 7px;
    color: #c36332;
    font-size: 1.5rem
}

.modal-backdrop {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(54, 39, 30, .44);
    backdrop-filter: blur(4px)
}

.canvas-modal {
    width: min(790px, 100%);
    max-height: min(760px, 90vh);
    overflow: auto;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 20px;
    background: #fffdf9;
    box-shadow: 0 30px 90px rgba(52, 34, 23, .3)
}

.small-modal {
    width: min(480px, 100%)
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px
}

.modal-header h2 {
    margin: 2px 0 0;
    font-size: 1.35rem
}

.modal-close {
    display: grid;
    width: 35px;
    height: 35px;
    flex: none;
    place-items: center;
    padding: 0;
    border: 1px solid #e5d9ce;
    border-radius: 50%;
    background: #faf4ed;
    color: #79685d;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer
}

.modal-close:hover {
    background: #f3e7dc;
    color: #a64922
}

.modal-status-line {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    border-radius: 11px;
    background: #f8f2eb;
    color: #594b42;
    font-size: .79rem;
    font-weight: 750
}

.modal-status-line small {
    margin-left: auto;
    color: #96867a;
    font-weight: 500
}

.activity-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 21px
}

.activity-columns h3,
.activity-actions h3 {
    margin: 0 0 9px;
    font-size: .83rem
}

.activity-actions {
    margin-top: 18px
}

.modal-list {
    overflow: hidden;
    border: 1px solid #eadfd4;
    border-radius: 12px
}

.modal-list>div {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    border-bottom: 1px solid #eee5dc
}

.modal-list>div:last-child {
    border-bottom: 0
}

.modal-list strong {
    font-size: .73rem;
    color: #4d4038
}

.modal-list small {
    margin-top: 3px;
    color: #95857a;
    font-size: .65rem
}

.modal-empty {
    margin: 0;
    padding: 20px 12px;
    color: #95857a;
    font-size: .73rem;
    text-align: center
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 23px;
    padding-top: 17px;
    border-top: 1px solid #eee4da
}

.canvas-modal label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 14px;
    color: #66564c;
    font-size: .75rem;
    font-weight: 750
}

.canvas-modal input,
.canvas-modal select {
    width: 100%
}

.danger-text {
    color: #b64047
}

.field-error {
    display: block;
    margin-top: 5px;
    color: #b64047
}

@media(max-width:760px) {
    .canvas-heading {
        align-items: flex-start
    }

    .canvas-summary {
        display: none
    }

    .canvas-toolbar {
        flex-wrap: wrap
    }

    .canvas-help {
        width: 100%;
        margin-left: 0
    }

    .canvas-viewport {
        height: calc(100vh - 292px);
        min-height: 480px
    }

    .activity-columns {
        grid-template-columns: 1fr
    }

    .modal-backdrop {
        padding: 12px
    }

    .canvas-modal {
        padding: 18px;
        border-radius: 16px
    }

    .modal-status-line {
        flex-wrap: wrap
    }

    .modal-status-line small {
        width: 100%;
        margin-left: 17px
    }
}

/* Full-screen, zoomable device workspace */
body:has(.devices-canvas-page) {
    overflow: hidden
}

.container:has(.devices-canvas-page) {
    width: 100%;
    max-width: none;
    height: 100vh;
    padding: 20px 22px;
    overflow: hidden
}

.devices-canvas-page {
    display: flex;
    height: calc(100vh - 40px);
    min-height: 0;
    flex-direction: column
}

.canvas-heading {
    flex: none;
    margin-bottom: 12px
}

.canvas-heading h1 {
    font-size: clamp(1.55rem, 2vw, 2rem)
}

.canvas-heading .eyebrow {
    margin-bottom: 4px
}

.canvas-toolbar {
    flex: none;
    min-height: 58px
}

.canvas-viewport {
    height: auto;
    min-height: 0;
    flex: 1;
    overflow: hidden;
    cursor: grab;
    touch-action: none
}

.canvas-viewport.panning {
    cursor: grabbing
}

.device-canvas {
    zoom: 1;
    transform: translate(18px, 18px) scale(.7);
    transform-origin: 0 0;
    background-color: #f7efe5;
    background-image: linear-gradient(to right, rgba(121, 88, 64, .32) 1px, transparent 1px), linear-gradient(to bottom, rgba(121, 88, 64, .32) 1px, transparent 1px), conic-gradient(from 90deg, #fffaf4 25%, #efdfcf 0 50%, #fffaf4 0 75%, #efdfcf 0);
    background-position: 0 0, 0 0, 0 0;
    background-size: 180px 126px, 180px 126px, 360px 252px;
    box-shadow: 0 0 0 1px rgba(121, 88, 64, .25)
}

.zoom-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid #e4d7cb;
    border-radius: 11px;
    background: #f8f1ea
}

.zoom-controls button {
    width: 33px;
    height: 31px;
    padding: 0;
    border-radius: 8px;
    background: #fffdf9;
    color: #795f4e;
    font-size: 1.2rem;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(84, 57, 40, .08)
}

.zoom-controls button:hover {
    background: #f7e6d9;
    color: #ad481f
}

.zoom-controls output {
    min-width: 43px;
    color: #78685e;
    font-size: .69rem;
    font-weight: 800;
    text-align: center
}

.canvas-help {
    white-space: nowrap
}

@media(max-width:760px) {
    .container:has(.devices-canvas-page) {
        height: calc(100vh - 62px);
        padding: 12px
    }

    .devices-canvas-page {
        height: calc(100vh - 86px)
    }

    .canvas-heading {
        display: none
    }

    .canvas-toolbar {
        border-radius: 13px 13px 0 0
    }

    .canvas-help {
        order: 4;
        width: auto;
        margin-right: auto
    }

    .zoom-controls {
        margin-left: auto
    }

    .canvas-viewport {
        height: auto;
        min-height: 0
    }
}

/* Canvas interaction polish */
.selection-count {
    padding: 6px 10px;
    border: 1px solid #eadfd4;
    border-radius: 999px;
    background: #faf5ef;
    color: #79695f;
    white-space: nowrap
}

.canvas-saving {
    margin-left: 2px;
    color: #b65a2d;
    font-size: .72rem;
    font-weight: 750
}

.canvas-viewport:focus-visible {
    outline: 3px solid rgba(223, 107, 49, .2);
    outline-offset: -3px
}

.canvas-viewport.panning .device-canvas {
    pointer-events: none
}

.canvas-viewport.panning .device-node {
    cursor: grabbing
}

.device-node.selected {
    z-index: 5
}

.device-node.selected .monitor-screen svg {
    fill: #f8ddca;
    stroke: #a94b22
}

.device-node:focus-visible {
    outline: 3px solid rgba(223, 107, 49, .25);
    outline-offset: 3px
}

.zoom-controls {
    flex: none;
    box-shadow: 0 4px 13px rgba(85, 58, 40, .06)
}

.zoom-controls button:focus-visible {
    outline: 2px solid rgba(223, 107, 49, .38);
    outline-offset: 1px
}

.group-toggle span {
    white-space: nowrap
}

.node-actions {
    animation: canvas-menu-in .12s ease-out
}

.modal-backdrop {
    animation: canvas-fade-in .14s ease-out
}

.canvas-modal {
    animation: canvas-modal-in .16s ease-out
}

@keyframes canvas-menu-in {
    from {
        opacity: 0;
        transform: translateY(-4px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes canvas-fade-in {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes canvas-modal-in {
    from {
        opacity: 0;
        transform: translateY(6px) scale(.99)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

@media(prefers-reduced-motion:reduce) {

    .node-actions,
    .modal-backdrop,
    .canvas-modal {
        animation: none
    }

    .device-node {
        transition: none
    }
}

@media(max-width:980px) {
    .canvas-help {
        display: none
    }

    .canvas-saving {
        margin-left: auto
    }
}

@media(max-width:760px) {
    .canvas-toolbar {
        gap: 8px
    }

    .selection-count {
        font-size: .7rem
    }

    .group-toggle {
        padding-inline: 11px
    }

    .canvas-saving {
        display: none
    }
}

/* Bounded canvas and consistent node menu alignment */
.device-canvas {
    width: 3600px;
    height: 2520px
}

.node-actions button,
.node-actions a {
    justify-content: flex-start
}

.node-actions span {
    flex: none
}

/* Explicit grouping workflow */
.selection-tools {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    color: #84766d;
    font-size: .75rem
}

.selection-tools.has-selection {
    padding: 4px 6px 4px 4px;
    border: 1px solid #e6d9cd;
    border-radius: 12px;
    background: #faf4ed
}

.selection-tools .selection-count {
    border: 0;
    background: #fffdf9
}

.selection-tools .selection-count strong {
    color: #a94a22
}

.selection-guidance {
    padding-inline: 4px;
    white-space: nowrap
}

.selection-action svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.clear-selection {
    padding: 6px 8px;
    background: transparent;
    color: #836f62;
    font-size: .72rem
}

.clear-selection:hover {
    background: #f0e4d9;
    color: #9e421d
}

.node-actions-divider {
    height: 1px;
    margin: 5px 3px;
    background: #eee2d7
}

.grouping-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px
}

.grouping-summary span {
    padding: 5px 9px;
    border: 1px solid #eaded2;
    border-radius: 999px;
    background: #faf5ef;
    color: #725f53;
    font-size: .68rem;
    font-weight: 700
}

.group-mode-options {
    display: grid;
    gap: 9px;
    margin: 3px 0 17px
}

.group-mode-option {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 10px !important;
    margin: 0 !important;
    padding: 12px;
    border: 1px solid #e4d8cd;
    border-radius: 12px;
    background: #fcf8f3;
    cursor: pointer
}

.group-mode-option:hover {
    border-color: #dfb18f;
    background: #fff8f2
}

.group-mode-option.active {
    border-color: #df7a48;
    background: #fff1e6;
    box-shadow: 0 0 0 2px rgba(223, 107, 49, .1)
}

.group-mode-option input {
    width: auto !important;
    margin: 3px 0 0 !important;
    accent-color: #df6b31
}

.group-mode-option span {
    display: flex;
    flex-direction: column
}

.group-mode-option strong {
    color: #493a32;
    font-size: .78rem
}

.group-mode-option small {
    margin-top: 3px;
    color: #8d7d72;
    font-size: .68rem;
    font-weight: 500
}

.modal-note {
    margin: 14px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #faf1e7;
    color: #806a5a;
    font-size: .72rem
}

@media(max-width:980px) {
    .selection-guidance {
        display: none
    }
}

@media(max-width:760px) {
    .selection-tools {
        flex: 1;
        overflow-x: auto
    }

    .selection-tools.has-selection {
        max-width: calc(100% - 112px)
    }

    .selection-tools .secondary {
        white-space: nowrap
    }

    .zoom-controls {
        margin-left: 0
    }
}

/* Expandable Devices navigation */
.nav-device-group {
    width: 100%
}

.nav-parent {
    border: 0;
    font-family: inherit;
    cursor: pointer
}

.nav-parent .nav-count {
    margin-left: auto
}

.nav-chevron {
    width: 16px;
    height: 16px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .16s ease
}

.nav-device-group.open .nav-chevron {
    transform: rotate(90deg)
}

.nav-submenu {
    display: none;
    margin: 3px 0 7px 49px;
    padding-left: 12px;
    border-left: 1px solid #e4d8cd
}

.nav-device-group.open .nav-submenu {
    display: grid;
    gap: 3px
}

.nav-subitem {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 6px 9px;
    border-radius: 8px;
    color: #817268;
    font-size: .75rem;
    font-weight: 700
}

.nav-subitem>span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #c6b7aa
}

.nav-subitem small {
    margin-left: auto;
    padding: 2px 6px;
    border-radius: 999px;
    background: #f1e6dc;
    color: #907b6c;
    font-size: .62rem
}

.nav-subitem:hover {
    background: #f8eee4;
    color: #9f421c
}

.nav-subitem.active {
    background: #fff0e4;
    color: #a3441d
}

.nav-subitem.active>span {
    background: #df6b31;
    box-shadow: 0 0 0 3px rgba(223, 107, 49, .13)
}

.sidebar-collapsed .nav-submenu {
    display: none
}

.sidebar-collapsed .nav-chevron {
    display: none
}

/* Groups management */
.create-group-card {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(320px, 520px);
    align-items: center;
    gap: 24px
}

.create-group-card p {
    margin: 0;
    color: var(--muted);
    font-size: .82rem
}

.create-group-card form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px
}

.create-group-card input {
    margin: 0
}

.create-group-card .field-error {
    grid-column: 2
}

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

.group-card {
    display: flex;
    min-height: 260px;
    flex-direction: column;
    padding: 19px;
    border: 1px solid #e6dbd0;
    border-radius: 16px;
    background: #fffdf9;
    box-shadow: 0 8px 28px rgba(84, 58, 40, .07)
}

.group-card-head {
    display: flex;
    align-items: center;
    gap: 11px
}

.group-card-head h2 {
    margin: 0;
    font-size: 1rem
}

.group-card-head p {
    margin: 4px 0 0;
    color: #93847a;
    font-size: .7rem
}

.group-card-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: none;
    place-items: center;
    border-radius: 12px;
    background: #fae8da;
    color: #b34f24
}

.group-card-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round
}

.group-more {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 9px;
    background: #f6eee7;
    color: #846f61
}

.group-more:hover {
    background: #eddfd3;
    color: #aa4820
}

.group-members {
    display: flex;
    min-height: 70px;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px;
    margin: 18px 0
}

.group-members span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 27px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #f7f1eb;
    color: #6f6056;
    font-size: .66rem;
    font-weight: 700
}

.group-members .status-dot {
    width: 6px;
    height: 6px
}

.group-members .empty-group-message {
    background: transparent;
    color: #9a8c82;
    font-weight: 500
}

.group-card-stats {
    display: flex;
    gap: 12px;
    padding: 11px 0;
    border-top: 1px solid #eee5dc;
    color: #8b7b70;
    font-size: .69rem
}

.group-card footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 13px
}

.groups-empty {
    grid-column: 1/-1;
    padding: 55px;
    border: 1px dashed #d9c9bb;
    border-radius: 17px;
    background: rgba(255, 253, 249, .7);
    text-align: center
}

.groups-empty .group-card-icon {
    margin: 0 auto 14px
}

.groups-empty p {
    color: #8e7d71
}

.group-picker-empty{
padding:24px
}

.group-picker-empty {
    text-align: center;
    padding: 25px;
    border: 1px dashed #ddcec1;
    border-radius: 13px;
    background: #faf6f1
}

.group-picker-empty strong {
    display: block;
    color: #4f4037
}

.group-picker-empty p {
    margin: 7px 0 16px;
    color: #8e7d72;
    font-size: .75rem
}

.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
}

@media(max-width:1100px) {
    .groups-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:760px) {
    .nav-submenu {
        margin-left: 49px
    }

    .create-group-card {
        grid-template-columns: 1fr
    }

    .create-group-card form {
        grid-template-columns: 1fr
    }

    .groups-grid {
        grid-template-columns: 1fr
    }

    .groups-empty {
        padding: 35px 20px
    }
}

/* Open node menus must stay above every computer and group frame. */
.device-node.menu-open {
    z-index: 1000 !important
}

.device-node.menu-open .node-actions {
    z-index: 1001
}

.groups-drawer-scrim,
.groups-drawer-scrim:hover,
.groups-drawer-scrim:focus,
.groups-drawer-scrim:active {
    background: rgba(45, 32, 24, .32) !important;
    background-color: rgba(45, 32, 24, .32) !important;
    box-shadow: none !important;
    filter: none !important;
    outline: 0;
    transition: opacity .16s ease !important;
    backdrop-filter: blur(2px)
}

/* Groups drawer inside the Devices canvas */
.canvas-heading-actions {
    display: flex;
    align-items: center;
    gap: 10px
}

.groups-drawer-toggle {
    height: 46px;
    padding: 0 14px;
    border: 1px solid #e4d6ca;
    border-radius: 13px;
    background: #fffdf9;
    color: #6e594c;
    box-shadow: 0 8px 25px rgba(95, 65, 43, .06)
}

.groups-drawer-toggle:hover,
.groups-drawer-toggle.active {
    border-color: #df9b72;
    background: #fff0e5;
    color: #a5451e
}

.groups-drawer-toggle svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round
}

.groups-drawer-toggle>span {
    display: grid;
    min-width: 21px;
    height: 21px;
    place-items: center;
    border-radius: 999px;
    background: #f2e5da;
    font-size: .65rem
}

.groups-drawer {
    position: fixed;
    z-index: 850;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(430px, 92vw);
    padding: 20px;
    overflow-y: auto;
    background: #fbf7f1;
    border-left: 1px solid #dfd1c5;
    box-shadow: -24px 0 70px rgba(60, 40, 28, .2);
    transform: translateX(105%);
    visibility: hidden;
    transition: transform .22s ease, visibility .22s
}

.groups-drawer.open {
    transform: translateX(0);
    visibility: visible
}

.groups-drawer-scrim {
    position: fixed;
    z-index: 840;
    inset: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(55, 39, 29, .25);
    backdrop-filter: blur(1px)
}

.groups-drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 17px
}

.groups-drawer-head h2 {
    margin: 0;
    font-size: 1.45rem
}

.groups-drawer-head .eyebrow {
    margin-bottom: 4px
}

.groups-drawer-head>div>span {
    color: #8f7e72;
    font-size: .72rem
}

.drawer-create-group {
    padding: 14px;
    margin-bottom: 16px;
    border: 1px solid #e5d8cc;
    border-radius: 14px;
    background: #fffdf9
}

.drawer-create-group>label {
    margin: 0 0 8px;
    font-size: .75rem
}

.drawer-create-group>div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 7px
}

.drawer-create-group input {
    min-width: 0;
    margin: 0
}

.groups-drawer-list {
    display: grid;
    gap: 12px
}

.drawer-group-card {
    min-height: 230px;
    padding: 16px
}

.drawer-group-card .group-members {
    min-height: 55px;
    margin: 14px 0
}

.drawer-groups-empty{
padding:30px;
}

.drawer-groups-empty {
    padding: 34px 20px;
    border: 1px dashed #d9c9bb;
    border-radius: 15px;
    background: #fffdf980;
    text-align: center
}

.drawer-groups-empty .group-card-icon {
    margin: 0 auto 12px
}

.drawer-groups-empty strong {
    display: block
}

.drawer-groups-empty p {
    margin: 7px 0 0;
    color: #8e7d72;
    font-size: .74rem
}

.group-frame-label {
    pointer-events: none
}

@media(max-width:760px) {
    .canvas-heading {
        display: flex;
        justify-content: flex-end
    }

    .canvas-heading>div:first-child {
        display: none
    }

    .canvas-heading-actions {
        width: 100%;
        justify-content: flex-end
    }

    .canvas-heading-actions .canvas-summary {
        display: flex;
        margin-right: auto
    }

    .groups-drawer {
        padding: 16px
    }

    .groups-drawer-toggle {
        height: 42px
    }

    .drawer-create-group>div {
        grid-template-columns: 1fr auto
    }
}

.drawer-group-card.focused {
    border-color: #df7a48;
    box-shadow: 0 0 0 3px rgba(223, 107, 49, .14), 0 14px 34px rgba(84, 58, 40, .12)
}

/* Computer and group restriction details */
.restriction-page {
    max-width: 1280px;
    margin: 0 auto
}

.restriction-header {
    margin-bottom: 25px
}

.restriction-header .back-link {
    margin-bottom: 25px
}

.restriction-header .eyebrow {
    margin-bottom: 7px
}

.restriction-header h1 {
    margin-bottom: 7px
}

.restriction-header>p:last-child {
    margin: 0;
    color: var(--muted)
}

.restriction-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
    margin-bottom: 24px
}

.restriction-summary-grid.group-summary-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr))
}

.summary-card {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 13px;
    padding: 17px;
    border: 1px solid #e7dcd1;
    border-radius: 15px;
    background: #fffdf9;
    box-shadow: 0 6px 21px rgba(88, 61, 42, .055)
}

.summary-card>div {
    min-width: 0
}

.summary-card small {
    display: block;
    color: #88796f;
    font-size: .68rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .055em
}

.summary-card strong {
    display: block;
    margin: 3px 0 2px;
    color: #342b26;
    font-size: 1.55rem;
    line-height: 1.15
}

.summary-card strong.summary-text {
    overflow: hidden;
    font-size: .93rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap
}

.summary-card p {
    margin: 0;
    overflow: hidden;
    color: #9a8a7f;
    font-size: .67rem;
    text-overflow: ellipsis;
    white-space: nowrap
}

.summary-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: none;
    place-items: center;
    border-radius: 12px;
    background: #f4e9df;
    color: #9c6547;
    font-size: .85rem;
    font-weight: 850
}

.summary-icon.apps {
    background: #fce5d7;
    color: #ae4c20
}

.summary-icon.websites {
    background: #f7e8c8;
    color: #986319
}

.summary-icon.activity {
    background: #e9e7f9;
    color: #6553a5;
    font-size: 1.15rem
}

.summary-icon.online {
    background: #e0f2e7;
    color: #2e8257
}

.summary-icon.offline {
    background: #eeeae6;
    color: #968980
}

.summary-icon.computers {
    background: #e2ecf4;
    color: #456b86;
    font-size: 1.1rem
}

.summary-card.health-healthy .summary-icon.activity {
    background: #e0f2e7;
    color: #2e8257
}

.summary-card.health-healthy .summary-text {
    color: #2e7651
}

.summary-card.health-delayed {
    border-color: #ead5ab;
    background: #fffdf5
}

.summary-card.health-delayed .summary-icon.activity {
    background: #f8eac8;
    color: #94691f
}

.summary-card.health-delayed .summary-text {
    color: #8b621c
}

.summary-card.health-attention {
    border-color: #ecc5c1;
    background: #fff9f8
}

.summary-card.health-attention .summary-icon.activity {
    background: #f7dfdc;
    color: #a74640
}

.summary-card.health-attention .summary-text {
    color: #9e3e39
}

.restriction-tabs {
    position: relative;
    display: flex;
    gap: 4px;
    margin-bottom: 17px;
    padding: 5px;
    border: 1px solid #e2d7cc;
    border-radius: 14px;
    background: #eee6df;
    overflow-x: auto;
    box-shadow: inset 0 1px 3px rgba(75, 52, 37, .05)
}

.restriction-tabs button {
    min-width: max-content;
    flex: 1;
    padding: 10px 15px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #77685f;
    font-size: .77rem;
    box-shadow: none
}

.restriction-tabs button:hover {
    background: rgba(255, 255, 255, .55);
    color: #9f421c
}

.restriction-tabs button.active {
    border-color: #e5d7cb;
    background: #fffdf9;
    color: #a54820;
    box-shadow: 0 3px 10px rgba(84, 58, 40, .1)
}

.restriction-tab-content {
    animation: restriction-tab-in .14s ease-out
}

@keyframes restriction-tab-in {
    from {
        opacity: .45;
        transform: translateY(3px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.tab-panel-grid {
    display: grid;
    grid-template-columns: minmax(280px, .72fr) minmax(430px, 1.28fr);
    gap: 17px
}

.tab-panel-grid>.card {
    margin: 0
}

.restriction-toggle-card {
    align-items: flex-start
}

.restriction-toggle-card .eyebrow {
    margin-bottom: 7px
}

.restriction-toggle-card h2 {
    margin-bottom: 7px
}

.restriction-toggle-card>div>p:last-child,
.restriction-list-card .section-heading p {
    color: var(--muted);
    font-size: .77rem
}

.restriction-list-card {
    margin-bottom: 0
}

.count-badge {
    display: grid;
    min-width: 31px;
    height: 31px;
    place-items: center;
    border-radius: 999px;
    background: #f5e8dd;
    color: #aa4b22;
    font-size: .72rem;
    font-weight: 850
}

.restriction-items {
    margin-top: 18px;
    border-top: 1px solid #eee4db
}

.restriction-item {
    display: flex;
    min-height: 62px;
    align-items: center;
    gap: 11px;
    padding: 10px 2px;
    border-bottom: 1px solid #eee4db
}

.restriction-item .check {
    margin: 0
}

.restriction-item .check>input {
    accent-color: #d75f2a
}

.restriction-item strong {
    display: block;
    color: #443730;
    font-size: .79rem
}

.restriction-item small {
    display: block;
    margin-top: 2px;
    color: #94847a;
    font-size: .67rem
}

.restriction-icon {
    display: grid;
    width: 34px;
    height: 34px;
    flex: none;
    place-items: center;
    border-radius: 9px;
    background: #fae8da;
    color: #aa4b22;
    font-size: .7rem;
    font-weight: 850
}

.app-icon {
    background: #f0e8df;
    color: #796354
}

.rule-state {
    padding: 4px 7px;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 800
}

.rule-state.blocked {
    background: #fbe2e3;
    color: #a93840
}

.rule-state.paused {
    background: #eeeae6;
    color: #81756d
}

.restriction-add-form {
    padding-top: 2px
}

.restriction-add-form button {
    white-space: nowrap
}

.task-manager-card {
    padding: 0;
    overflow: hidden
}

.task-manager-heading {
    padding: 20px 22px;
    border-bottom: 1px solid #eae0d7
}

.task-manager-heading h2 {
    margin-bottom: 5px
}

.task-manager-heading p {
    font-size: .76rem
}

.live-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 999px;
    background: #e5f3ea;
    color: #347552;
    font-size: .65rem;
    font-weight: 800
}

.live-indicator i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3b9969;
    box-shadow: 0 0 0 3px rgba(59, 153, 105, .12)
}

.process-table-head,
.process-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.5fr) minmax(150px, 1fr) 110px 125px;
    align-items: center;
    gap: 15px
}

.process-table-head {
    padding: 10px 22px;
    background: #faf6f1;
    color: #9a8a7f;
    font-size: .63rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .055em
}

.process-row {
    min-height: 72px;
    padding: 11px 22px;
    border-top: 1px solid #eee5dc
}

.process-app {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px
}

.process-app>span:last-child {
    min-width: 0
}

.process-app strong {
    display: block;
    overflow: hidden;
    color: #42362f;
    font-size: .79rem;
    text-overflow: ellipsis;
    white-space: nowrap
}

.process-app small {
    display: block;
    overflow: hidden;
    margin-top: 3px;
    color: #97877c;
    font-size: .65rem;
    text-overflow: ellipsis;
    white-space: nowrap
}

.process-icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: none;
    place-items: center;
    border-radius: 10px;
    background: linear-gradient(145deg, #f7e6d9, #eed5c2);
    color: #a54a22;
    font-size: .76rem;
    font-weight: 850
}

.process-device {
    display: flex;
    align-items: center;
    gap: 7px;
    overflow: hidden;
    color: #66574e;
    font-size: .72rem;
    text-overflow: ellipsis;
    white-space: nowrap
}

.process-count {
    color: #88786e;
    font-size: .7rem
}

.process-action {
    width: 125px
}

.task-empty {
    padding: 55px 20px;
    text-align: center
}

.task-empty>span {
    display: grid;
    width: 46px;
    height: 46px;
    margin: 0 auto 13px;
    place-items: center;
    border-radius: 50%;
    background: #e4f2e9;
    color: #33805a;
    font-size: 1.2rem
}

.task-empty strong {
    display: block;
    color: #463a33;
    font-size: .87rem
}

.task-empty p {
    margin: 6px 0 0;
    color: #96867b;
    font-size: .72rem
}

.member-list-card {
    margin-bottom: 0
}

.member-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px
}

.member-card {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px;
    border: 1px solid #eadfd5;
    border-radius: 13px;
    background: #fdf9f5
}

.computer-avatar {
    display: grid;
    width: 39px;
    height: 39px;
    flex: none;
    place-items: center;
    border-radius: 11px;
    background: #f3e3d6;
    color: #a84c24;
    font-size: .76rem;
    font-weight: 850
}

.member-card strong {
    display: block;
    font-size: .78rem
}

.member-card small {
    display: block;
    color: #97877c;
    font-size: .65rem
}

.member-status {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    color: #8c7d73;
    font-size: .62rem
}

.member-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #a79e98
}

.member-status.online i {
    background: #369464
}

.member-status.online {
    color: #347c57
}

.settings-card {
    margin-bottom: 0
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px
}

.settings-row h2 {
    margin-bottom: 7px
}

.settings-row p {
    margin: 0;
    color: var(--muted);
    font-size: .77rem
}

.settings-row label {
    min-width: 190px;
    margin: 0
}

.settings-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin-top: 22px;
    padding-top: 17px;
    border-top: 1px solid #eee4db
}

.settings-meta span {
    color: #908077;
    font-size: .7rem
}

.settings-meta strong {
    color: #55473f
}

.focus-mode-card {
    margin-bottom: 16px;
    border-color: #ead8ca;
    background: linear-gradient(135deg, #fff 0%, #fff8f2 100%)
}

.focus-mode-card.focus-active {
    border-color: #e19572;
    box-shadow: 0 0 0 3px rgba(223, 107, 49, .08)
}

.focus-mode-card .settings-row>div {
    min-width: 0
}

.focus-mode-card .settings-row>button {
    min-width: 170px;
    flex: none
}

.focus-mode-card .eyebrow {
    margin-bottom: 5px;
    color: #c45d2d
}

.focus-mode-card .primary-sites-state {
    margin-top: 18px
}

.feature-settings-card {
    margin-bottom: 16px
}

.feature-settings-card .section-heading {
    margin-bottom: 14px
}

.feature-settings-card .section-heading p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: .78rem
}

.feature-settings-table {
    overflow: hidden;
    border: 1px solid #eee4db;
    border-radius: 14px;
    background: #fff
}

.feature-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 16px;
    border-bottom: 1px solid #f1e8e0
}

.feature-settings-row:last-child {
    border-bottom: 0
}

.feature-settings-row>div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px
}

.feature-settings-row strong {
    color: #493c35;
    font-size: .82rem
}

.feature-settings-row small {
    color: var(--muted);
    font-size: .7rem
}

.feature-switch {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 82px;
    padding: 5px 9px 5px 6px;
    border: 1px solid #d9cec5;
    border-radius: 999px;
    background: #f2eee9;
    color: #807269
}

.feature-switch span {
    position: relative;
    width: 31px;
    height: 18px;
    border-radius: 999px;
    background: #b8ada5;
    transition: .18s
}

.feature-switch span:after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    content: "";
    transition: .18s
}

.feature-switch b {
    min-width: 20px;
    font-size: .68rem
}

.feature-switch.enabled {
    border-color: #efb18d;
    background: #fff4ec;
    color: #b85122
}

.feature-switch.enabled span {
    background: var(--accent)
}

.feature-switch.enabled span:after {
    transform: translateX(13px)
}

@media(max-width:1150px) {
    .restriction-summary-grid.group-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .restriction-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .tab-panel-grid {
        grid-template-columns: 1fr
    }

    .process-table-head,
    .process-row {
        grid-template-columns: minmax(190px, 1.4fr) minmax(130px, 1fr) 90px 120px
    }
}

@media(max-width:760px) {
    .restriction-header .back-link {
        margin-bottom: 18px
    }

    .restriction-summary-grid,
    .restriction-summary-grid.group-summary-grid {
        grid-template-columns: 1fr 1fr
    }

    .summary-card {
        padding: 13px
    }

    .summary-icon {
        width: 36px;
        height: 36px
    }

    .summary-card strong {
        font-size: 1.25rem
    }

    .restriction-tabs button {
        flex: none
    }

    .restriction-item {
        flex-wrap: wrap
    }

    .restriction-item .link {
        margin-left: auto
    }

    .process-table-head {
        display: none
    }

    .process-row {
        grid-template-columns: 1fr auto;
        padding: 13px 16px
    }

    .process-app {
        grid-column: 1/-1
    }

    .process-device,
    .process-count {
        align-self: center
    }

    .process-action {
        grid-column: 1/-1;
        width: 100%
    }

    .member-grid {
        grid-template-columns: 1fr
    }

    .settings-row {
        align-items: stretch;
        flex-direction: column
    }

    .settings-row label {
        width: 100%
    }

    .settings-meta {
        flex-direction: column
    }

    .tab-panel-grid {
        display: block
    }

    .tab-panel-grid>.card {
        margin-bottom: 14px
    }
}

@media(max-width:460px) {

    .restriction-summary-grid,
    .restriction-summary-grid.group-summary-grid {
        grid-template-columns: 1fr
    }

    .summary-card p {
        white-space: normal
    }
}

/* Website restriction workflow */
.website-settings-stack {
    display: grid;
    gap: 17px
}

.website-settings-stack>.card {
    margin: 0
}

.primary-sites-card {
    padding: 20px 22px
}

.primary-sites-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
}

.primary-sites-check {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 13px;
    margin: 0;
    cursor: pointer
}

.primary-sites-check>input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none
}

.primary-check-visual {
    display: grid;
    width: 41px;
    height: 41px;
    flex: none;
    place-items: center;
    border: 1px solid #dfd3c8;
    border-radius: 12px;
    background: #f6efe8;
    color: transparent;
    font-size: 1rem;
    font-weight: 900;
    transition: .15s ease
}

.primary-sites-check>input:checked+.primary-check-visual {
    border-color: #d96a34;
    background: #df6b31;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(223, 107, 49, .12)
}

.primary-sites-check>input:focus-visible+.primary-check-visual {
    outline: 3px solid rgba(223, 107, 49, .2);
    outline-offset: 2px
}

.primary-sites-check strong {
    display: block;
    color: #3f332d;
    font-size: .9rem
}

.primary-sites-check small {
    display: block;
    margin-top: 4px;
    color: #8f8076;
    font-size: .72rem;
    font-weight: 500
}

.primary-preview-button {
    flex: none
}

.primary-preview-button>span {
    display: inline-grid;
    min-width: 24px;
    height: 20px;
    place-items: center;
    padding: 0 6px;
    border-radius: 999px;
    background: #e5d9cf;
    color: #756259;
    font-size: .62rem
}

.primary-sites-state {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 14px 0 0;
    padding-top: 13px;
    border-top: 1px solid #eee4db;
    color: #93847a;
    font-size: .68rem
}

.primary-sites-state i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #aaa19b
}

.primary-sites-state.enabled {
    color: #347b57
}

.primary-sites-state.enabled i {
    background: #399565;
    box-shadow: 0 0 0 3px rgba(57, 149, 101, .12)
}

.manual-sites-card {
    padding: 22px
}

.manual-sites-card .section-heading .eyebrow {
    margin-bottom: 5px
}

.manual-site-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;
    margin-top: 20px;
    padding: 16px;
    border: 1px solid #eadfd5;
    border-radius: 13px;
    background: #fbf7f2
}

.manual-site-form label {
    margin: 0;
    color: #5d4d44;
    font-size: .72rem
}

.manual-site-form input {
    margin-top: 6px
}

.manual-site-form small {
    display: block;
    margin-top: 6px;
    color: #97887e;
    font-size: .65rem;
    font-weight: 500
}

.manual-site-form>button {
    margin-bottom: 20px;
    white-space: nowrap
}

.manual-domain-list {
    margin-top: 18px
}

.primary-sites-modal {
    display: flex;
    width: min(720px, 100%);
    height: min(760px, 90vh);
    overflow: hidden;
    flex-direction: column
}

.primary-sites-modal .modal-header {
    flex: none
}

.primary-sites-modal .modal-header p:last-child {
    margin: 6px 0 0;
    color: #918177;
    font-size: .72rem
}

.primary-site-search {
    flex: none;
    margin: 0 0 12px !important
}

.primary-site-search>span {
    font-size: .7rem
}

.primary-site-search input {
    margin-top: 6px
}

.primary-sites-results-meta {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 8px;
    color: #77675e;
    font-size: .68rem;
    font-weight: 750
}

.primary-sites-results-meta small {
    color: #9b8c82;
    font-weight: 500
}

.primary-sites-list {
    min-height: 170px;
    flex: 1;
    overflow-y: auto;
    border: 1px solid #e6dbd0;
    border-radius: 12px;
    background: #faf6f1;
    scrollbar-color: #d8c7ba transparent;
    scrollbar-width: thin
}

.primary-sites-list>div {
    padding: 6px 11px;
    border-bottom: 1px solid #eee5dc;
    color: #54463e;
    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: .69rem;
    line-height: 1.25
}

.primary-sites-list>div:last-child {
    border-bottom: 0
}

.primary-sites-list>div:nth-child(even) {
    background: rgba(255, 255, 255, .55)
}

.primary-sites-modal .modal-footer {
    flex: none
}

@media(max-width:760px) {
    .primary-sites-control {
        align-items: stretch;
        flex-direction: column
    }

    .primary-preview-button {
        width: 100%
    }

    .manual-site-form {
        grid-template-columns: 1fr
    }

    .manual-site-form>button {
        width: 100%;
        margin: 0
    }

    .primary-sites-modal {
        height: min(760px, 94vh)
    }
}

.manual-application-form {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 20px;
    padding: 16px;
    border: 1px solid #eadfd5;
    border-radius: 13px;
    background: #fbf7f2
}

.manual-application-form>div,
.manual-application-form input {
    width: 100%
}

.manual-application-form label {
    margin: 0;
    color: #5d4d44;
    font-size: .72rem
}

.manual-application-form button {
    justify-self: start;
    white-space: nowrap
}

.required-label {
    display: inline-block;
    margin-left: 5px;
    padding: 2px 5px;
    border-radius: 999px;
    background: #f9dfce;
    color: #a54a22;
    font-size: .55rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em
}

.primary-applications-list>div {
    display: grid;
    grid-template-columns: minmax(160px, .7fr) minmax(220px, 1fr);
    column-gap: 28px
}

.primary-applications-list strong {
    color: #493b33;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: .71rem
}

.primary-applications-list small {
    overflow: hidden;
    padding-left: 20px;
    border-left: 1px solid #dfd3c8;
    color: #8c7b70;
    font-size: .67rem;
    text-overflow: ellipsis;
    white-space: nowrap
}

.ip-icon {
    background: #e2ecf4;
    color: #456b86;
    font-size: .58rem
}

.ip-settings-stack .manual-site-form {
    align-items: end
}

.ip-settings-stack .manual-site-form>button {
    height: 42px;
    margin-bottom: 0;
    align-self: end
}

@media(max-width:760px) {
    .manual-application-form button {
        width: 100%
    }

    .primary-applications-list>div {
        grid-template-columns: 1fr;
        gap: 6px
    }

    .primary-applications-list small {
        padding-left: 0;
        border-left: 0
    }

    .application-settings-stack .restriction-item .rule-state {
        margin-left: 45px
    }
}

/* Task Manager */
.task-manager-card {
    padding: 0;
    overflow: hidden
}

.task-manager-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 24px 19px;
    border-bottom: 1px solid #eadfd5;
    background: linear-gradient(135deg, #fffdf9, #fff9f3)
}

.task-manager-heading .eyebrow {
    margin-bottom: 5px;
    color: #bd5528
}

.task-manager-heading h2 {
    margin-bottom: 6px;
    font-size: 1.25rem
}

.task-manager-heading>div:first-child>p:last-child {
    max-width: 700px;
    margin: 0;
    color: #8c7d73;
    font-size: .75rem
}

.task-refresh-status {
    display: flex;
    flex: none;
    align-items: flex-end;
    flex-direction: column;
    gap: 5px
}

.task-refresh-status>span {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #e5f3ea;
    color: #347552;
    font-size: .65rem;
    font-weight: 850
}

.task-refresh-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3b9969;
    box-shadow: 0 0 0 3px rgba(59, 153, 105, .12)
}

.task-refresh-status small {
    color: #9a8a7f;
    font-size: .61rem
}

.task-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid #eae0d7;
    background: #fff
}

.task-summary>div {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 24px;
    border-right: 1px solid #eee5dc
}

.task-summary>div:last-child {
    border-right: 0
}

.task-summary span {
    color: #8d7d73;
    font-size: .67rem;
    font-weight: 700
}

.task-summary strong {
    color: #42362f;
    font-size: 1rem
}

.task-summary strong small {
    margin-left: 2px;
    color: #9b8b81;
    font-size: .65rem
}

.task-status-text {
    font-size: .73rem !important
}

.task-status-text.online {
    color: #317d56
}

.task-status-text.offline {
    color: #9a615f
}

.task-safety-note {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 24px;
    border-bottom: 1px solid #eee5dc;
    background: #fffaf0
}

.task-safety-note>span {
    display: grid;
    width: 19px;
    height: 19px;
    flex: none;
    place-items: center;
    border-radius: 50%;
    background: #f0d9b9;
    color: #885d25;
    font-family: Georgia, serif;
    font-size: .7rem;
    font-weight: 800
}

.task-safety-note p {
    margin: 0;
    color: #816f61;
    font-size: .67rem
}

.task-safety-note strong {
    color: #604c3d
}

.process-mobile-label {
    display: none
}

.process-action-heading {
    text-align: center
}

.single-processes .process-table-head,
.single-processes .process-row {
    grid-template-columns: minmax(260px, 1fr) 125px 125px
}

.process-row {
    transition: background .14s ease
}

.process-row:hover {
    background: #fffaf5
}

.process-row.pending {
    background: #fffaf0
}

.process-row.device-offline {
    background: #fbfaf9
}

.process-row.device-offline .process-app,
.process-row.device-offline .process-device,
.process-row.device-offline .process-count {
    opacity: .68
}

.process-count {
    display: flex;
    align-items: baseline;
    gap: 5px
}

.process-count strong {
    color: #55463e;
    font-size: .82rem
}

.process-count>span:last-child {
    color: #95857a;
    font-size: .65rem
}

.process-action {
    justify-self: end
}

.process-action.is-pending {
    background: #9b745d
}

.button-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: task-spin .75s linear infinite
}

@keyframes task-spin {
    to {
        transform: rotate(360deg)
    }
}

.task-empty>span svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.task-refresh-status.delayed>span {
    background: #f7ebcb;
    color: #8b641f
}

.task-refresh-status.delayed i {
    background: #d2952f;
    box-shadow: 0 0 0 3px rgba(210, 149, 47, .14)
}

.task-refresh-status.attention>span {
    background: #f6dfdc;
    color: #a34640
}

.task-refresh-status.attention i {
    background: #ca5b54;
    box-shadow: 0 0 0 3px rgba(202, 91, 84, .14)
}

.process-actions {
    display: flex;
    justify-self: end;
    gap: 7px
}

.process-icon-action {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    padding: 0;
    border: 1px solid #e1d6cd;
    border-radius: 10px;
    background: #fff;
    color: #77675e;
    cursor: pointer
}

.process-icon-action svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.process-icon-action.end:hover {
    border-color: #dfa4a0;
    background: #fff0ef;
    color: #a83f3a
}

.process-icon-action.block:hover {
    border-color: #e0a17d;
    background: #fff3eb;
    color: #b75122
}

.process-icon-action.is-pending {
    border-color: #b97853;
    background: #b97853;
    color: #fff
}

.process-icon-action.is-blocked {
    border-color: #d8e6dc;
    background: #eef6f0;
    color: #488061
}

.process-icon-action:disabled {
    cursor: not-allowed;
    opacity: .65
}

.process-confirm-modal .modal-header p:last-child {
    margin: 5px 0 0;
    color: #94847a;
    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: .7rem
}

.process-confirm-details {
    display: grid;
    gap: 13px
}

.process-confirm-details>span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 11px 13px;
    border: 1px solid #eadfd5;
    border-radius: 11px;
    background: #faf6f1;
    color: #8b7b70;
    font-size: .7rem
}

.process-confirm-details strong {
    color: #4d4038
}

.process-confirm-details p {
    margin: 0;
    padding: 13px;
    border-radius: 11px;
    background: #fff5ec;
    color: #765f50;
    font-size: .75rem;
    line-height: 1.5
}

.restriction-confirm-modal>p {
    margin: 0;
    padding: 14px;
    border: 1px solid #eadfd5;
    border-radius: 12px;
    background: #faf6f1;
    color: #66564c;
    font-size: .78rem;
    line-height: 1.55
}

.activity-overview-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px
}

.activity-computers-card,
.login-attempts-card {
    padding: 0;
    overflow: hidden
}

.activity-computers-card>.section-heading,
.login-attempts-card>.section-heading {
    padding: 21px 23px;
    border-bottom: 1px solid #eee4da;
    background: linear-gradient(135deg, #fffdf9, #fff9f3)
}

.activity-computers-card>.section-heading h2,
.login-attempts-card>.section-heading h2 {
    margin-bottom: 5px
}

.activity-computers-card>.section-heading p,
.login-attempts-card>.section-heading p {
    font-size: .76rem
}

.activity-table {
    overflow-x: auto
}

.activity-table-head,
.activity-table-row {
    display: grid;
    grid-template-columns: minmax(230px, 1.5fr) minmax(145px, .85fr) minmax(110px, .62fr) minmax(110px, .62fr) minmax(150px, .85fr);
    align-items: center;
    gap: 16px;
    min-width: 850px
}

.activity-table-head {
    padding: 10px 23px;
    border-bottom: 1px solid #eee4da;
    background: #faf6f1;
    color: #8d7d72;
    font-size: .65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em
}

.activity-table-row {
    padding: 14px 23px;
    border-bottom: 1px solid #f0e7df
}

.activity-table-row:last-child {
    border-bottom: 0
}

.activity-table-row:hover {
    background: #fffaf5
}

.activity-table-row>div>strong {
    display: block;
    color: #4b3e36;
    font-size: .8rem
}

.activity-table-row>div>small {
    display: block;
    margin-top: 3px;
    color: #998a80;
    font-size: .64rem
}

.activity-computer-cell {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px
}

.activity-computer-cell>div {
    min-width: 0
}

.activity-computer-cell strong,
.activity-computer-cell small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.activity-health-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    border-radius: 999px;
    background: #e8f4ec;
    color: #347a56;
    font-size: .66rem;
    font-weight: 800
}

.activity-health-pill i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3a9868
}

.activity-health-pill.delayed {
    background: #faedcf;
    color: #8c651f
}

.activity-health-pill.delayed i {
    background: #d29731
}

.activity-health-pill.attention {
    background: #f8e3e1;
    color: #a3443f
}

.activity-health-pill.attention i {
    background: #ca5c55
}

.login-attempt-list {
    padding: 0 23px
}

.login-attempt-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #f0e7df
}

.login-attempt-row:last-child {
    border-bottom: 0
}

.login-attempt-icon {
    display: grid;
    width: 32px;
    height: 32px;
    flex: none;
    place-items: center;
    border-radius: 10px;
    background: #f8e3e1;
    color: #ad4540;
    font-weight: 900
}

.login-attempt-row strong {
    display: block;
    color: #4b3e36;
    font-size: .79rem
}

.login-attempt-row small {
    display: block;
    margin-top: 3px;
    color: #95857b;
    font-size: .66rem
}

.login-attempt-meta {
    display: flex;
    flex: none;
    align-items: flex-end;
    flex-direction: column;
    gap: 5px
}

.login-attempt-meta time {
    color: #95857b;
    font-size: .64rem
}

.lockout-pill {
    padding: 4px 7px;
    border-radius: 999px;
    background: #f8e3e1;
    color: #a33f3a;
    font-size: .61rem;
    font-weight: 850
}

.activity-list-note {
    margin: 0;
    padding: 11px 23px;
    border-top: 1px solid #eee4da;
    background: #faf6f1;
    color: #918177;
    font-size: .65rem;
    text-align: center
}

@media(max-width:900px) {
    .activity-overview-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:600px) {
    .activity-overview-stats {
        grid-template-columns: 1fr
    }

    .activity-computers-card>.section-heading,
    .login-attempts-card>.section-heading {
        padding: 18px
    }

    .login-attempt-list {
        padding: 0 18px
    }

    .login-attempt-row {
        align-items: flex-start
    }

    .login-attempt-meta {
        align-items: flex-start
    }

    .login-attempt-row {
        flex-wrap: wrap
    }

    .login-attempt-meta {
        width: 100%;
        padding-left: 44px
    }
}

.activity-computer-cell strong,
.activity-computer-cell small {
    display: block
}

.activity-computer-cell small {
    margin-top: 3px;
    color: #998a80;
    font-size: .64rem
}

@media(max-width:900px) {

    .group-processes .process-table-head,
    .group-processes .process-row {
        grid-template-columns: minmax(190px, 1.35fr) minmax(125px, .85fr) 90px 110px
    }

    .single-processes .process-table-head,
    .single-processes .process-row {
        grid-template-columns: minmax(200px, 1fr) 95px 110px
    }

    .process-action {
        width: 110px
    }
}

@media(max-width:760px) {
    .task-manager-heading {
        align-items: stretch;
        flex-direction: column;
        gap: 13px;
        padding: 18px
    }

    .task-refresh-status {
        align-items: flex-start
    }

    .task-summary>div {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
        padding: 12px 14px
    }

    .task-safety-note {
        align-items: flex-start;
        padding: 10px 16px
    }

    .process-table-head {
        display: none !important
    }

    .group-processes .process-row,
    .single-processes .process-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        padding: 15px 16px
    }

    .process-app {
        grid-column: 1/-1
    }

    .process-device,
    .process-count {
        grid-column: auto;
        align-self: center
    }

    .process-device {
        min-width: 0
    }

    .process-device>span:last-child {
        overflow: hidden;
        text-overflow: ellipsis
    }

    .process-count {
        justify-content: flex-end
    }

    .process-actions {
        align-self: center
    }

    .task-empty {
        padding: 42px 18px
    }
}

@media(max-width:460px) {
    .task-summary {
        grid-template-columns: 1fr
    }

    .task-summary>div {
        align-items: center;
        flex-direction: row;
        border-right: 0;
        border-bottom: 1px solid #eee5dc
    }

    .task-summary>div:last-child {
        border-bottom: 0
    }

    .group-processes .process-row {
        grid-template-columns: 1fr
    }

    .process-device,
    .process-count {
        grid-column: 1;
        justify-content: flex-start
    }

    .process-mobile-label {
        display: inline;
        color: #a09187 !important;
        font-size: .59rem !important;
        font-weight: 800 !important;
        text-transform: uppercase;
        letter-spacing: .04em
    }

    .process-device .process-mobile-label {
        margin-right: 3px
    }

    .process-action {
        grid-column: 1
    }
}

/* Activity history */
.history-card {
    padding: 0;
    overflow: hidden
}

.history-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px 19px;
    border-bottom: 1px solid #eadfd5;
    background: linear-gradient(135deg, #fffdf9, #fff9f3)
}

.history-heading .eyebrow {
    margin-bottom: 5px;
    color: #bd5528
}

.history-heading h2 {
    margin-bottom: 6px;
    font-size: 1.25rem
}

.history-heading>div>p:last-child {
    margin: 0;
    color: #8c7d73;
    font-size: .75rem
}

.history-retention {
    flex: none;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f1e7dd;
    color: #806d60;
    font-size: .64rem;
    font-weight: 800
}

.history-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid #eae0d7
}

.history-summary>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 24px;
    border-right: 1px solid #eee5dc
}

.history-summary>div:last-child {
    border-right: 0
}

.history-summary span {
    color: #8d7d73;
    font-size: .67rem;
    font-weight: 700
}

.history-summary strong {
    color: #42362f;
    font-size: .9rem
}

.history-privacy-note {
    padding: 10px 24px;
    border-bottom: 1px solid #eadfd5;
    background: #faf6f1;
    color: #8b7a70;
    font-size: .66rem
}

.history-table-head,
.history-row {
    display: grid;
    grid-template-columns: minmax(280px, 1.7fr) minmax(130px, .8fr) 115px 100px;
    align-items: center;
    gap: 16px
}

.single-processes+.history-card {


}

.history-table-head {
    padding: 10px 24px;
    background: #faf6f1;
    color: #9a8a7f;
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em
}

.history-row {
    min-height: 70px;
    padding: 11px 24px;
    border-top: 1px solid #eee5dc
}

.history-activity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px
}

.history-activity>div {
    min-width: 0
}

.history-icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: none;
    place-items: center;
    border-radius: 10px;
    background: #f3e3d6;
    color: #a54a22;
    font-size: .73rem;
    font-weight: 850
}

.history-row.browser .history-icon {
    background: #e2ecf4;
    color: #456b86
}

.history-activity strong {
    display: block;
    overflow: hidden;
    color: #42362f;
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap
}

.history-activity small {
    display: block;
    overflow: hidden;
    margin-top: 3px;
    color: #97877c;
    font-size: .64rem;
    text-overflow: ellipsis;
    white-space: nowrap
}

.history-kind {
    margin-right: 6px;
    padding: 2px 5px;
    border-radius: 999px;
    background: #f2e7dd;
    color: #886d5b;
    font-size: .55rem;
    font-weight: 800;
    text-transform: uppercase
}

.history-row.browser .history-kind {
    background: #e5edf3;
    color: #4e7088
}

.history-device,
.history-row time,
.history-duration {
    overflow: hidden;
    color: #74645b;
    font-size: .69rem;
    text-overflow: ellipsis;
    white-space: nowrap
}

.history-duration {
    font-weight: 800;
    color: #574940
}

.history-mobile-label {
    display: none
}

.history-empty {
    padding: 55px 20px;
    text-align: center
}

.history-empty>span {
    display: grid;
    width: 46px;
    height: 46px;
    margin: 0 auto 13px;
    place-items: center;
    border-radius: 50%;
    background: #f3e5da;
    color: #a6532d;
    font-weight: 850
}

.history-empty strong {
    display: block;
    color: #463a33;
    font-size: .87rem
}

.history-empty p {
    margin: 6px 0 0;
    color: #96867b;
    font-size: .72rem
}

.single-history .history-table-head,
.single-history .history-row {
    grid-template-columns: minmax(280px, 1fr) 125px 100px
}

@media(max-width:900px) {

    .history-table-head,
    .history-row {
        grid-template-columns: minmax(220px, 1.4fr) minmax(110px, .7fr) 105px 85px
    }
}

@media(max-width:760px) {
    .history-heading {
        flex-direction: column;
        padding: 18px
    }

    .history-summary>div {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
        padding: 12px 14px
    }

    .history-privacy-note {
        padding: 10px 16px
    }

    .history-table-head {
        display: none
    }

    .history-row,
    .single-history .history-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 9px;
        padding: 14px 16px
    }

    .history-activity {
        grid-column: 1/-1
    }

    .history-device {
        grid-column: 1/-1
    }

    .history-mobile-label {
        display: inline;
        margin-right: 6px;
        color: #a09187;
        font-size: .57rem;
        font-weight: 800;
        text-transform: uppercase
    }

    .history-duration {
        text-align: right
    }
}

@media(max-width:460px) {
    .history-summary {
        grid-template-columns: 1fr
    }

    .history-summary>div {
        align-items: center;
        flex-direction: row;
        border-right: 0;
        border-bottom: 1px solid #eee5dc
    }

    .history-summary>div:last-child {
        border-bottom: 0
    }
}

.history-kind {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center
}

.history-kind.running {
    background: #e2f1e8;
    color: #327650
}

.executable-line {
    display: flex !important;
    min-width: 0;
    align-items: center;
    gap: 4px
}

.executable-line>span:not(.history-kind) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.application-info-link {
    display: inline-grid;
    width: 18px;
    height: 18px;
    flex: none;
    place-items: center;
    border-radius: 50%;
    color: #8b7668;
    transition: .14s ease
}

.application-info-link:hover {
    background: #f0e4da;
    color: #ad4b22
}

.application-info-link svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round
}

/* Grouped application history */
.history-app-list {
    background: #fff
}

.history-app-group {
    border-top: 1px solid #eee5dc
}

.history-app-group:first-child {
    border-top: 0
}

.history-app-group>summary {
    display: grid;
    grid-template-columns: 42px minmax(190px, 1fr) 72px 130px 115px 74px 22px;
    min-height: 76px;
    align-items: center;
    gap: 13px;
    padding: 12px 22px;
    cursor: pointer;
    list-style: none;
    transition: background .14s ease
}

.history-app-group>summary::-webkit-details-marker {
    display: none
}

.history-app-group>summary:hover {
    background: #fffaf5
}

.history-app-group[open]>summary {
    background: #fff8f1;
    border-bottom: 1px solid #eadfd5
}

.history-app-main {
    min-width: 0
}

.history-app-main>strong {
    display: block;
    overflow: hidden;
    color: #42362f;
    font-size: .8rem;
    text-overflow: ellipsis;
    white-space: nowrap
}

.history-app-main .executable-line {
    margin-top: 4px;
    color: #97877c;
    font-size: .64rem
}

.history-app-observations {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: #938278;
    font-size: .61rem
}

.history-app-observations strong {
    color: #55463e;
    font-size: .86rem
}

.history-app-last,
.history-app-total {
    min-width: 0
}

.history-app-last small,
.history-app-total small {
    display: block;
    color: #9a8a7f;
    font-size: .56rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .035em
}

.history-app-last strong,
.history-app-total strong {
    display: block;
    overflow: hidden;
    margin-top: 3px;
    color: #625249;
    font-size: .67rem;
    text-overflow: ellipsis;
    white-space: nowrap
}

.history-chevron {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: #8d796b;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .16s ease
}

.history-app-group[open] .history-chevron {
    transform: rotate(180deg)
}

.history-session-panel {
    padding: 0 22px 12px;
    background: #fbf7f2
}

.history-session-head,
.history-session-row {
    display: grid;
    align-items: center;
    gap: 13px
}

.group-history .history-session-head,
.group-history .history-session-row {
    grid-template-columns: minmax(130px, 1fr) 110px 110px 115px 80px
}

.single-history .history-session-head,
.single-history .history-session-row {
    grid-template-columns: 110px 110px 115px 80px
}

.history-session-head {
    padding: 9px 12px 7px;
    color: #a09085;
    font-size: .56rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em
}

.history-session-row {
    min-height: 48px;
    padding: 8px 12px;
    border: 1px solid #eadfd5;
    border-radius: 10px;
    background: #fff;
    margin-bottom: 6px;
    color: #6e5e55;
    font-size: .68rem
}

.history-session-row:last-child {
    margin-bottom: 0
}

.history-session-row>span,
.history-session-row time {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.history-session-row>span>small,
.history-session-row time>small {
    display: none
}

.history-session-row strong {
    color: #4f4139
}

.history-session-row .history-kind {
    display: inline-flex;
    width: max-content;
    margin: 0
}

@media(max-width:1050px) {
    .history-app-group>summary {
        grid-template-columns: 42px minmax(170px, 1fr) 65px 110px 100px 70px 20px
    }

    .history-app-last small,
    .history-app-total small {
        font-size: .52rem
    }
}

@media(max-width:760px) {
    .history-app-group>summary {
        grid-template-columns: 38px minmax(0, 1fr) auto 20px;
        gap: 10px;
        padding: 13px 16px
    }

    .history-app-group>summary .history-icon {
        width: 38px;
        height: 38px
    }

    .history-app-observations,
    .history-app-last {
        display: none
    }

    .history-app-total {
        grid-column: 2;
        grid-row: 2
    }

    .history-app-total small {
        display: inline;
        margin-right: 5px
    }

    .history-app-total strong {
        display: inline
    }

    .history-app-group>summary>.history-kind {
        grid-column: 3;
        grid-row: 1
    }

    .history-chevron {
        grid-column: 4;
        grid-row: 1
    }

    .history-session-panel {
        padding: 8px 12px 12px
    }

    .history-session-head {
        display: none
    }

    .group-history .history-session-row,
    .single-history .history-session-row {
        grid-template-columns: 1fr 1fr;
        gap: 9px 14px;
        padding: 11px
    }

    .history-session-row>span,
    .history-session-row time {
        white-space: normal
    }

    .history-session-row>span>small,
    .history-session-row time>small {
        display: block;
        margin-bottom: 2px;
        color: #a09085;
        font-size: .54rem;
        font-weight: 800;
        text-transform: uppercase
    }

    .history-session-row .history-kind {
        margin-top: 2px
    }
}

/* Task Manager performance */
.performance-card {
    margin-top: 17px;
    padding: 0;
    overflow: hidden
}

.performance-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px 19px;
    border-bottom: 1px solid #eadfd5;
    background: linear-gradient(135deg, #fffdf9, #fff9f3)
}

.performance-heading .eyebrow {
    margin-bottom: 5px;
    color: #bd5528
}

.performance-heading h2 {
    margin-bottom: 6px;
    font-size: 1.25rem
}

.performance-heading>div>p:last-child {
    margin: 0;
    color: #8c7d73;
    font-size: .75rem
}

.performance-snapshot {
    flex: none;
    padding: 6px 10px;
    border-radius: 999px;
    background: #e7edf3;
    color: #526b7f;
    font-size: .64rem;
    font-weight: 800
}

.performance-device {
    padding: 20px 22px;
    border-top: 1px solid #eee5dc
}

.performance-device:first-child {
    border-top: 0
}

.performance-device-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 14px
}

.performance-device-heading>div {
    display: flex;
    align-items: center;
    gap: 8px
}

.performance-device-heading strong {
    color: #463930;
    font-size: .82rem
}

.performance-device-heading small,
.performance-measured {
    color: #97877c;
    font-size: .63rem
}

.performance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px
}

.performance-metric {
    min-width: 0;
    padding: 14px;
    border: 1px solid #eadfd5;
    border-radius: 12px;
    background: #fdf9f5
}

.performance-metric>div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.performance-metric>div:first-child>span {
    color: #817066;
    font-size: .65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em
}

.performance-metric>div:first-child>strong {
    overflow: hidden;
    color: #40342e;
    font-size: .9rem;
    text-overflow: ellipsis;
    white-space: nowrap
}

.performance-metric>small {
    display: block;
    overflow: hidden;
    margin-top: 8px;
    color: #99897e;
    font-size: .61rem;
    text-overflow: ellipsis;
    white-space: nowrap
}

.performance-meter {
    height: 6px;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: #e9e0d8
}

.performance-meter i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #df6b31;
    transition: width .25s ease
}

.performance-metric.memory .performance-meter i {
    background: #6759b5
}

.performance-metric.disk .performance-meter i {
    background: #3f7e9e
}

.performance-metric.gpu .performance-meter i {
    background: #398966
}

.performance-metric.internet.connected {
    border-color: #cce3d5;
    background: #f5fbf7
}

.performance-metric.internet.connected>div:first-child>strong {
    color: #307750
}

.performance-metric.network>div:first-child>strong {
    font-size: .75rem
}

.performance-measured {
    margin: 11px 2px 0;
    text-align: right
}

.performance-empty {
    padding: 30px 20px;
    border: 1px dashed #decec1;
    border-radius: 12px;
    background: #faf6f1;
    text-align: center
}

.performance-empty strong {
    display: block;
    color: #594a41;
    font-size: .8rem
}

.performance-empty p {
    margin: 5px 0 0;
    color: #97877c;
    font-size: .68rem
}

@media(max-width:760px) {
    .performance-heading {
        align-items: stretch;
        flex-direction: column;
        padding: 18px
    }

    .performance-snapshot {
        align-self: flex-start
    }

    .performance-device {
        padding: 16px
    }

    .performance-device-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px
    }

    .performance-grid {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:460px) {
    .performance-grid {
        grid-template-columns: 1fr
    }
}

.timetable-stack{display:grid;gap:17px}.timetable-stack>.card{margin:0}.timetable-heading-card{display:flex;align-items:center;justify-content:space-between;gap:24px;background:linear-gradient(135deg,#fff,#fff8f1)}.timetable-heading-card h2{margin-bottom:6px}.timetable-heading-card p:last-child{max-width:720px;margin:0;color:#8c7d73;font-size:.76rem}.timetable-modes-card .section-heading{margin-bottom:16px}.timetable-mode-list{border-top:1px solid #eee4da}.timetable-mode-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 2px;border-bottom:1px solid #eee4da}.timetable-mode-row strong,.timetable-mode-row small{display:block}.timetable-mode-row strong{color:#493c34;font-size:.79rem}.timetable-mode-row small{margin-top:3px;color:#94847a;font-size:.67rem}.timetable-mode-row select{width:175px;flex:none;margin:0}.timetable-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.timetable-card{display:flex;min-height:245px;flex-direction:column;margin:0;padding:0;overflow:hidden}.timetable-card.disabled{opacity:.68}.timetable-card>header{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:16px 18px;border-bottom:1px solid #eee4da;background:#faf6f1}.timetable-clock{display:flex;align-items:center;gap:8px}.timetable-clock strong{font-size:1.08rem}.timetable-clock span{color:#9a8a80;font-size:.65rem;text-transform:uppercase}.timetable-card-body{padding:18px}.timetable-card-body h3{margin-bottom:12px;font-size:1rem}.timetable-days,.timetable-controls{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}.timetable-days span{display:grid;min-width:37px;height:27px;place-items:center;border-radius:8px;background:#f4ebe3;color:#765e50;font-size:.64rem;font-weight:800}.timetable-controls span{padding:5px 8px;border-radius:999px;background:#fff0e6;color:#a64b23;font-size:.64rem;font-weight:800}.overnight-note{display:block;margin-top:12px;color:#8d7c71;font-size:.65rem}.timetable-card>footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding:13px 18px;border-top:1px solid #eee4da}.timetable-empty{grid-column:1/-1;margin:0;padding:45px;text-align:center}.timetable-empty strong{display:block}.timetable-empty p{margin:7px 0 17px;color:#938379;font-size:.75rem}.timetable-modal{width:min(650px,100%)}.timetable-time-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.optional-label{color:#9a8a80;font-size:.65rem;font-weight:500}.timetable-fieldset{margin:18px 0 0;padding:0;border:0}.timetable-fieldset legend{margin-bottom:9px;color:#66564c;font-size:.75rem;font-weight:800}.timetable-day-picker{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.timetable-day-picker label{margin:0}.timetable-day-picker input{position:absolute;width:1px;opacity:0}.timetable-day-picker span{display:grid;height:38px;place-items:center;border:1px solid #e2d6ca;border-radius:9px;background:#faf6f1;color:#78675d;font-size:.68rem;font-weight:800;cursor:pointer}.timetable-day-picker input:checked+span{border-color:#d86430;background:#df6b31;color:#fff}.timetable-control-picker{display:grid;grid-template-columns:1fr 1fr;gap:8px}.timetable-control-picker label{display:flex;align-items:flex-start;gap:10px;margin:0;padding:12px;border:1px solid #e5d9ce;border-radius:11px;background:#fdf9f5;cursor:pointer}.timetable-control-picker input{width:auto;flex:none;margin:3px 0 0;accent-color:#df6b31}.timetable-control-picker strong,.timetable-control-picker small{display:block}.timetable-control-picker strong{font-size:.75rem}.timetable-control-picker small{margin-top:3px;color:#94847a;font-size:.62rem;line-height:1.35}.timetable-modal-note{margin:17px 0 0;padding:11px 13px;border-radius:10px;background:#fff4e9;color:#765f50;font-size:.68rem;line-height:1.5}
@media(max-width:760px){.timetable-heading-card{align-items:stretch;flex-direction:column}.timetable-heading-card button{width:100%}.timetable-list{grid-template-columns:1fr}.timetable-mode-row{align-items:stretch;flex-direction:column}.timetable-mode-row select{width:100%}.timetable-time-fields,.timetable-control-picker{grid-template-columns:1fr}.timetable-day-picker{grid-template-columns:repeat(4,1fr)}}
.timetable-modal{display:flex;max-height:min(760px,90vh);flex-direction:column;padding:0;overflow:hidden}.timetable-modal>.modal-header{flex:none;margin:0;padding:24px 24px 18px;border-bottom:1px solid #eee4da}.timetable-modal-body{min-height:0;overflow-y:auto;padding:4px 24px 20px;overscroll-behavior:contain;scrollbar-gutter:stable}.timetable-modal-body>label:first-child{margin-top:14px}.timetable-modal>.modal-footer{flex:none;margin:0;padding:17px 24px 24px;background:#fffdf9}.timetable-day-picker label{cursor:pointer}.timetable-day-picker input:focus-visible+span{outline:3px solid rgba(223,107,49,.2);outline-offset:2px}
@media(max-width:760px){.timetable-modal>.modal-header{padding:18px 18px 15px}.timetable-modal-body{padding:3px 18px 17px}.timetable-modal>.modal-footer{padding:15px 18px 18px}}