:root {
    --bg:#02060b;
    --panel:#08121d;
    --panel2:#0c1825;
    --text:#f4f7fb;
    --muted:#8c9bad;
    --blue:#1683ff;
    --cyan:#39cfff;
    --green:#31d081;
    --red:#ff6464;
    --border:rgba(255,255,255,.09);
}

* {
    box-sizing:border-box;
}

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

body {
    background:var(--bg);
    color:var(--text);

    font-family:
        "Segoe UI Variable",
        "Segoe UI",
        Arial,
        sans-serif;

    -webkit-font-smoothing:antialiased;
}

a {
    color:inherit;
    text-decoration:none;
}

button,
input {
    font:inherit;
}


/* AUTH */

.auth-layout {
    min-height:100vh;

    display:grid;
    grid-template-columns:1.05fr .95fr;
}


/* LEFT IMAGE */

.auth-visual {
    min-height:100vh;

    position:relative;

    background-image:
        url("/assets/auth-background.webp");

    background-size:cover;
    background-position:center;
}

.auth-visual::after {
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(2,6,11,.18),
            rgba(2,6,11,.62)
        ),
        linear-gradient(
            to top,
            rgba(2,6,11,.85),
            transparent 55%
        );
}

.auth-branding {
    position:absolute;

    z-index:2;

    left:70px;
    right:70px;
    bottom:65px;
}

.auth-branding h1 {
    margin:18px 0 8px;

    max-width:620px;

    font-size:48px;
    line-height:1.05;

    letter-spacing:-2px;
}

.auth-branding p {
    max-width:540px;

    color:#c0c9d4;

    font-size:16px;
    line-height:1.7;
}


/* BRAND */

.brand {
    display:flex;
    align-items:center;
    gap:13px;
}

.brand-icon {
    width:53px;
    height:53px;

    display:grid;
    place-items:center;

    border-radius:14px;

    color:white;

    font-size:17px;
    font-weight:900;

    background:
        linear-gradient(145deg,#13263c,#07111d);

    border:
        1px solid rgba(57,207,255,.22);
}

.brand-text {
    display:flex;
    flex-direction:column;
}

.brand-text strong {
    font-size:18px;
}

.brand-text strong span {
    color:var(--cyan);
}

.brand-text small {
    margin-top:4px;

    color:#6f8197;

    font-size:7px;
    font-weight:700;

    letter-spacing:2.2px;
}


/* FORM SIDE */

.auth-main {
    min-height:100vh;

    padding:50px 9%;

    display:flex;
    flex-direction:column;
    justify-content:center;

    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(22,131,255,.07),
            transparent 25%
        ),
        var(--bg);
}

.auth-top {
    position:absolute;
    top:35px;
    right:4%;

    color:#8393a7;
    font-size:13px;
}

.auth-top a {
    color:#49b9ff;
    font-weight:600;
}

.auth-card {
    width:100%;
    max-width:465px;

    margin:auto;
}

.auth-card h2 {
    margin:30px 0 7px;

    font-size:40px;
    line-height:1.08;
    letter-spacing:-1.7px;
}

.auth-description {
    margin:0 0 31px;

    color:var(--muted);

    font-size:15px;
    line-height:1.65;
}


/* FORMS */

.field {
    margin-bottom:17px;
}

.field label {
    display:block;

    margin-bottom:7px;

    color:#c1cad5;

    font-size:12px;
    font-weight:600;
}

.field input {
    width:100%;
    height:51px;

    padding:0 15px;

    color:white;

    background:#07111c;

    border:1px solid #203248;

    border-radius:9px;

    outline:none;

    transition:.2s;
}

.field input:focus {
    border-color:#278dff;

    box-shadow:
        0 0 0 3px rgba(22,131,255,.09);
}

.field-hint {
    display:block;

    margin-top:6px;

    color:#64778d;

    font-size:10px;
}

.form-row {
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:15px;

    margin:7px 0 21px;
}

.checkbox {
    display:flex;
    align-items:center;

    gap:9px;

    color:#9ba9ba;

    font-size:12px;
}

.checkbox input {
    width:16px;
    height:16px;

    accent-color:var(--blue);
}

.primary-button {
    width:100%;
    height:51px;

    border:0;
    border-radius:9px;

    cursor:pointer;

    color:white;

    background:
        linear-gradient(135deg,#1989ff,#0766e7);

    font-weight:650;

    box-shadow:
        0 14px 32px rgba(22,131,255,.16);

    transition:.2s;
}

.primary-button:hover {
    transform:translateY(-1px);
}

.primary-button:disabled {
    opacity:.55;
    cursor:wait;
    transform:none;
}

.secondary-link {
    color:#49b9ff;

    font-size:12px;
    font-weight:600;
}

.form-message {
    min-height:22px;

    margin:16px 0;

    color:#ff8585;

    font-size:12px;
    line-height:1.5;
}

.form-message.success {
    color:#54d997;
}


/* CODE INPUT */

.code-input {
    height:67px !important;

    text-align:center;

    font-size:29px;

    font-weight:700;

    letter-spacing:14px;
}


/* FOOTER AUTH */

.auth-footer {
    margin-top:30px;

    padding-top:22px;

    border-top:1px solid var(--border);

    color:#586b81;

    font-size:10px;
}


/* DASHBOARD */

.dashboard-shell {
    min-height:100vh;

    display:grid;

    grid-template-columns:260px 1fr;

    background:#03080d;
}


/* SIDEBAR */

.sidebar {
    position:fixed;

    width:260px;
    height:100vh;

    padding:27px 20px;

    background:#050b12;

    border-right:1px solid var(--border);
}

.sidebar-brand {
    padding:0 7px 29px;

    border-bottom:1px solid var(--border);
}

.sidebar-menu {
    padding-top:24px;
}

.menu-title {
    margin:21px 10px 9px;

    color:#52667e;

    font-size:8px;
    font-weight:800;

    letter-spacing:1.7px;
}

.nav-item {
    width:100%;

    padding:11px 13px;

    margin:3px 0;

    display:flex;
    align-items:center;

    gap:11px;

    border:0;
    border-radius:9px;

    cursor:pointer;

    color:#91a1b4;

    background:transparent;

    text-align:left;

    font-size:13px;
}

.nav-item:hover,
.nav-item.active {
    color:white;

    background:#0b1826;
}

.nav-item .icon {
    width:21px;

    color:#36bfff;

    text-align:center;
}


/* DASH CONTENT */

.dashboard-main {
    grid-column:2;

    min-height:100vh;
}

.dashboard-header {
    height:76px;

    padding:0 38px;

    display:flex;
    align-items:center;
    justify-content:flex-end;

    border-bottom:1px solid var(--border);

    background:rgba(3,8,13,.85);
}

.user-menu {
    display:flex;
    align-items:center;

    gap:12px;
}

.user-avatar {
    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    border-radius:50%;

    color:white;

    background:#0f2943;

    font-size:12px;
    font-weight:700;
}

.user-meta strong,
.user-meta span {
    display:block;
}

.user-meta strong {
    font-size:12px;
}

.user-meta span {
    margin-top:2px;

    color:#6f8197;

    font-size:9px;
}

.logout-button {
    margin-left:18px;

    padding:8px 11px;

    color:#8fa0b3;

    background:transparent;

    border:1px solid var(--border);

    border-radius:8px;

    cursor:pointer;

    font-size:10px;
}


/* CONTENT */

.dashboard-content {
    max-width:1300px;

    margin:auto;

    padding:52px 45px;
}

.dashboard-title {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;

    gap:25px;
}

.dashboard-title h1 {
    margin:0;

    font-size:38px;
    letter-spacing:-1.5px;
}

.dashboard-title p {
    margin:7px 0 0;

    color:var(--muted);
}

.add-device {
    min-height:43px;

    padding:0 17px;

    color:white;

    background:#117af1;

    border:0;
    border-radius:8px;

    cursor:pointer;

    font-size:11px;
    font-weight:600;
}


/* STATS */

.stats {
    margin-top:36px;

    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:14px;
}

.stat-card {
    padding:23px;

    border-radius:14px;

    border:1px solid var(--border);

    background:#07111b;
}

.stat-card span {
    color:#708399;

    font-size:10px;
}

.stat-card strong {
    display:block;

    margin-top:7px;

    color:white;

    font-size:27px;
}


/* EMPTY DEVICE */

.devices-section {
    margin-top:42px;
}

.devices-section h2 {
    font-size:19px;
}

.empty-devices {
    min-height:310px;

    margin-top:15px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-align:center;

    border-radius:16px;

    border:1px dashed #21364c;

    background:
        radial-gradient(
            circle,
            rgba(22,131,255,.05),
            transparent 45%
        );
}

.empty-icon {
    width:65px;
    height:65px;

    display:grid;
    place-items:center;

    border-radius:17px;

    color:#4ac2ff;

    background:#0b2033;

    font-size:25px;
}

.empty-devices h3 {
    margin:18px 0 7px;

    font-size:19px;
}

.empty-devices p {
    max-width:400px;

    margin:0;

    color:#75879c;

    font-size:13px;
    line-height:1.6;
}


/* MOBILE */

@media(max-width:900px) {

    .auth-layout {
        grid-template-columns:1fr;
    }

    .auth-visual {
        display:none;
    }

    .auth-main {
        padding:40px 25px;
    }

    .auth-card {
        max-width:470px;
    }

    .dashboard-shell {
        display:block;
    }

    .sidebar {
        display:none;
    }

    .dashboard-main {
        display:block;
    }

    .dashboard-header {
        padding:0 18px;
    }

    .dashboard-content {
        padding:35px 18px;
    }

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

    .dashboard-title {
        align-items:flex-start;
        flex-direction:column;
    }

}


/* =====================================================
   REAL DASHBOARD V2
===================================================== */

.content-section-title {
    margin-bottom:18px;

    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:25px;
}

.content-section-title h2 {
    margin:0;

    color:white;

    font-size:20px;
}

.content-section-title p {
    margin:4px 0 0;

    color:#72859b;

    font-size:12px;
}


/* DEVICES */

.device-grid {
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:15px;
}

.device-card {
    min-height:300px;

    padding:23px;

    border-radius:16px;

    background:
        linear-gradient(
            145deg,
            #091520,
            #06101a
        );

    border:
        1px solid var(--border);
}

.device-card-top {
    display:flex;

    align-items:center;
    justify-content:space-between;
}

.device-icon {
    width:50px;
    height:50px;

    display:grid;
    place-items:center;

    border-radius:13px;

    color:#5ecaff;

    background:#0b2135;

    border:
        1px solid rgba(57,207,255,.14);

    font-size:12px;
    font-weight:800;
}

.device-state {
    display:flex;

    align-items:center;

    gap:6px;

    font-size:10px;

    font-weight:650;
}

.device-state span {
    width:7px;
    height:7px;

    border-radius:50%;
}

.device-state.online {
    color:#4cdb95;
}

.device-state.online span {
    background:#31d081;

    box-shadow:
        0 0 10px rgba(49,208,129,.6);
}

.device-state.offline {
    color:#8292a5;
}

.device-state.offline span {
    background:#576a80;
}

.device-card h3 {
    margin:
        23px 0 2px;

    color:white;

    font-size:20px;
}

.device-type {
    color:#58c4ff;

    font-size:10px;

    font-weight:650;
}

.device-info {
    margin-top:23px;

    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:14px;
}

.device-info span,
.device-info strong {
    display:block;
}

.device-info span {
    color:#61768d;

    font-size:9px;

    text-transform:uppercase;

    letter-spacing:.8px;
}

.device-info strong {
    margin-top:3px;

    color:#aab6c5;

    font-size:11px;

    font-weight:600;

    word-break:break-word;
}

.empty-add-button {
    width:auto;

    margin-top:20px;
}


/* LOCATIONS */

.location-grid {
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:15px;
}

.location-card {
    min-height:145px;

    padding:22px;

    display:flex;

    gap:17px;

    align-items:flex-start;

    border-radius:15px;

    background:#07111b;

    border:
        1px solid var(--border);
}

.location-icon {
    width:48px;
    height:48px;

    flex:0 0 auto;

    display:grid;
    place-items:center;

    border-radius:12px;

    background:#0b2033;

    color:#46c1ff;

    font-size:21px;
}

.location-card h3 {
    margin:2px 0 4px;

    color:white;

    font-size:17px;
}

.location-card p {
    margin:0;

    color:#8b9bae;

    font-size:12px;
}

.location-card span {
    display:block;

    margin-top:7px;

    color:#5e7289;

    font-size:9px;
}


/* SECURITY */

.trusted-browser-list {
    display:flex;

    flex-direction:column;

    gap:10px;
}

.trusted-browser {
    min-height:92px;

    padding:17px 19px;

    display:flex;

    align-items:center;

    gap:16px;

    border-radius:13px;

    background:#07111b;

    border:
        1px solid var(--border);
}

.trusted-browser-icon {
    width:45px;
    height:45px;

    flex:0 0 auto;

    display:grid;
    place-items:center;

    border-radius:11px;

    color:#4cc4ff;

    background:#0b2033;
}

.trusted-browser-copy {
    flex:1;
}

.trusted-browser-copy h3 {
    margin:0;

    color:white;

    font-size:14px;
}

.trusted-browser-copy p {
    margin:3px 0;

    color:#8494a7;

    font-size:11px;
}

.trusted-browser-copy small {
    color:#5f738a;

    font-size:9px;
}

.revoke-browser {
    padding:8px 12px;

    color:#ff9292;

    background:transparent;

    border:
        1px solid rgba(255,100,100,.25);

    border-radius:7px;

    cursor:pointer;

    font-size:10px;
}

.browser-revoked {
    color:#66798e;

    font-size:8px;

    font-weight:800;

    letter-spacing:1px;
}

.empty-small {
    padding:30px;

    border-radius:12px;

    color:#718398;

    background:#07111b;

    border:
        1px dashed #20354b;

    font-size:12px;
}


/* MODAL */

.modal-backdrop {
    position:fixed;

    inset:0;

    z-index:5000;

    padding:20px;

    display:flex;

    align-items:center;
    justify-content:center;

    background:
        rgba(0,3,7,.80);

    backdrop-filter:
        blur(8px);
}

.modal {
    width:min(510px,100%);

    max-height:
        calc(100vh - 40px);

    overflow:auto;

    padding:28px;

    border-radius:18px;

    background:
        #07111b;

    border:
        1px solid #1d3045;

    box-shadow:
        0 35px 90px rgba(0,0,0,.5);
}

.modal-header {
    margin-bottom:24px;

    display:flex;

    align-items:flex-start;
    justify-content:space-between;

    gap:20px;
}

.modal-header h2 {
    margin:5px 0 0;

    color:white;

    font-size:26px;

    letter-spacing:-1px;
}

.modal-eyebrow {
    color:#43bfff;

    font-size:8px;

    font-weight:800;

    letter-spacing:2px;
}

.modal-close {
    width:35px;
    height:35px;

    flex:0 0 auto;

    display:grid;
    place-items:center;

    border:0;

    border-radius:8px;

    cursor:pointer;

    color:#95a5b6;

    background:#0d1b29;

    font-size:22px;
}

.modal-description {
    margin:
        -8px 0 24px;

    color:#8293a6;

    font-size:13px;

    line-height:1.6;
}

.modal-form {
    margin-top:10px;
}

.select-input {
    width:100%;
    height:51px;

    padding:0 14px;

    color:white;

    background:#07111c;

    border:
        1px solid #203248;

    border-radius:9px;

    outline:none;
}

.pairing-input {
    text-transform:uppercase;

    letter-spacing:1.5px;

    font-weight:650;
}

.inline-action {
    padding:0;

    color:#47bfff;

    background:transparent;

    border:0;

    cursor:pointer;

    font-size:11px;
}

.modal-actions {
    margin-top:25px;

    display:grid;

    grid-template-columns:
        .8fr 1.2fr;

    gap:10px;
}

.modal-primary {
    height:49px;
}

.modal-secondary {
    height:49px;

    color:#9eacbc;

    background:#0b1723;

    border:
        1px solid #1c3045;

    border-radius:9px;

    cursor:pointer;
}


/* PLACEHOLDER */

.coming-soon {
    min-height:350px;

    margin-top:40px;

    display:flex;

    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-align:center;

    border-radius:16px;

    border:
        1px dashed #20364c;
}

.coming-soon h3 {
    margin:
        17px 0 5px;

    color:white;
}

.coming-soon p {
    max-width:350px;

    color:#718398;

    font-size:12px;
}


/* ERRORS */

.fatal-error {
    width:min(500px,calc(100% - 40px));

    margin:100px auto;

    padding:35px;

    text-align:center;

    color:white;

    border-radius:16px;

    background:#07111b;

    border:
        1px solid var(--border);
}

.fatal-error p {
    color:#ff8d8d;
}

.fatal-error .primary-button {
    max-width:200px;
}


/* RESPONSIVE */

@media(max-width:1150px) {

    .device-grid,
    .location-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

}

@media(max-width:700px) {

    .device-grid,
    .location-grid {
        grid-template-columns:1fr;
    }

    .device-info {
        grid-template-columns:1fr;
    }

    .content-section-title {
        align-items:flex-start;

        flex-direction:column;
    }

    .modal-actions {
        grid-template-columns:1fr;
    }

}


/* ============================================================
   CENTRALHOMEBYTE ACCOUNT / PUBLIC ID V3
============================================================ */

.chb-device-access {
    margin-top:16px;
    padding-top:13px;
    border-top:1px solid #15283a;
}

.chb-access-badge {
    display:inline-flex;
    align-items:center;
    min-height:25px;
    padding:0 9px;
    border-radius:999px;
    font-size:10px;
    font-weight:700;
    letter-spacing:.04em;
}

.chb-access-badge.owned {
    color:#7ac8ff;
    background:rgba(17,122,241,.12);
    border:1px solid rgba(17,122,241,.25);
}

.chb-access-badge.shared {
    color:#aee9cc;
    background:rgba(56,190,130,.10);
    border:1px solid rgba(56,190,130,.25);
}

.chb-section-count {
    min-width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border-radius:10px;
    color:#8ecfff;
    background:#0b2033;
    border:1px solid #19344b;
    font-size:12px;
    font-weight:700;
}

.chb-empty-shared {
    min-height:110px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:25px;
    border-radius:14px;
    border:1px dashed #21364c;
    color:#71859b;
    background:#07111b;
    text-align:center;
    font-size:13px;
}

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

.chb-account-card {
    padding:22px;
    border-radius:14px;
    border:1px solid var(--border);
    background:#07111b;
}

.chb-account-card strong {
    display:block;
    margin-top:8px;
    color:white;
    font-size:15px;
    word-break:break-word;
}

.chb-account-card small {
    display:block;
    margin-top:10px;
    color:#708399;
    font-size:11px;
    line-height:1.55;
}

.chb-account-label {
    display:block;
    color:#708399;
    font-size:10px;
    font-weight:700;
    letter-spacing:.07em;
}

.chb-id-card {
    grid-column:1 / -1;
}

.chb-id-row {
    margin-top:10px;
    display:flex;
    align-items:center;
    gap:12px;
}

.chb-id-row code {
    flex:1;
    min-width:0;
    padding:14px 15px;
    border-radius:9px;
    border:1px solid #19344b;
    color:#7fd5ff;
    background:#050c13;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;
    font-size:14px;
    letter-spacing:.035em;
    overflow-wrap:anywhere;
}

.chb-copy-id {
    min-height:45px;
    padding:0 16px;
    border:1px solid #225078;
    border-radius:9px;
    color:#9ddcff;
    background:#0b2033;
    cursor:pointer;
    font-weight:600;
}

.chb-copy-id:hover {
    background:#0e2a43;
}

.chb-copy-id:disabled {
    cursor:default;
    opacity:.8;
}

@media(max-width:700px) {

    .chb-account-grid {
        grid-template-columns:1fr;
    }

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

    .chb-copy-id {
        width:100%;
    }
}


/* ============================================================
   DEVICE SHARING V5
============================================================ */

.chb-device-access {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.chb-share-device {
    min-height:30px;
    padding:0 12px;
    border-radius:8px;
    border:1px solid #225078;
    color:#9ddcff;
    background:#0b2033;
    cursor:pointer;
    font-size:11px;
    font-weight:600;
}

.chb-share-device:hover {
    background:#0e2a43;
}

.chb-share-permissions {
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:5px;
}

.chb-share-permissions-title {
    color:#708399;
    font-size:10px;
    font-weight:700;
    letter-spacing:.07em;
}

.chb-permission-row {
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:13px;
    border:1px solid #172a3d;
    border-radius:10px;
    background:#07111b;
    cursor:pointer;
}

.chb-permission-row input {
    margin-top:3px;
}

.chb-permission-row strong {
    display:block;
    color:#eaf4ff;
    font-size:12px;
}

.chb-permission-row small {
    display:block;
    margin-top:4px;
    color:#708399;
    line-height:1.45;
}

.chb-invitation-list {
    display:flex;
    flex-direction:column;
    gap:12px;
}

.chb-invitation-card {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    padding:20px;
    border:1px solid #19344b;
    border-radius:14px;
    background:#07111b;
}

.chb-invitation-copy h3 {
    margin:6px 0;
    color:white;
    font-size:16px;
}

.chb-invitation-copy p {
    margin:0 0 12px;
    color:#8093a8;
    font-size:12px;
}

.chb-invitation-label {
    color:#65c4ff;
    font-size:9px;
    font-weight:700;
    letter-spacing:.08em;
}

.chb-invitation-meta {
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:5px;
}

.chb-invitation-meta span {
    min-width:48px;
    color:#61778d;
    font-size:10px;
}

.chb-invitation-meta code {
    color:#8ccfff;
    font-size:11px;
}

.chb-invitation-actions {
    display:flex;
    gap:9px;
}

.chb-accept-share,
.chb-reject-share {
    min-height:38px;
    padding:0 14px;
    border-radius:8px;
    cursor:pointer;
    font-size:11px;
    font-weight:600;
}

.chb-accept-share {
    border:1px solid #176fc6;
    color:white;
    background:#117af1;
}

.chb-reject-share {
    border:1px solid #3a4550;
    color:#b4c0cc;
    background:#101820;
}

@media(max-width:700px) {

    .chb-invitation-card {
        align-items:stretch;
        flex-direction:column;
    }

    .chb-invitation-actions {
        width:100%;
    }

    .chb-accept-share,
    .chb-reject-share {
        flex:1;
    }
}


/* ============================================================
   DYNAMIC SHARING V6
============================================================ */

.chb-device-type-badge {
    display:inline-flex;
    margin:0 0 18px;
    padding:6px 10px;
    border:1px solid #1c3b56;
    border-radius:999px;
    color:#7fcfff;
    background:#081a29;
    font-size:10px;
    font-weight:700;
}

.chb-share-section {
    margin-top:8px;
}

.chb-share-section[hidden] {
    display:none !important;
}

.chb-share-profile-list {
    display:flex;
    flex-direction:column;
    gap:9px;
    margin-top:10px;
}

.chb-share-profile {
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:14px;
    border:1px solid #172a3d;
    border-radius:11px;
    background:#07111b;
    cursor:pointer;
}

.chb-share-profile:hover {
    border-color:#225078;
    background:#091825;
}

.chb-share-profile input {
    margin-top:3px;
}

.chb-share-profile strong {
    display:block;
    color:#edf6ff;
    font-size:12px;
}

.chb-share-profile small {
    display:block;
    margin-top:4px;
    color:#71859a;
    font-size:11px;
    line-height:1.45;
}

.chb-required-permission {
    display:inline-block;
    margin-top:6px;
    color:#63bfff;
    font-size:9px;
    font-style:normal;
    font-weight:700;
    letter-spacing:.04em;
}

.chb-share-info {
    margin-top:16px;
    padding:13px 14px;
    border:1px solid #183752;
    border-radius:10px;
    background:#071725;
}

.chb-share-info strong {
    color:#8dd4ff;
    font-size:11px;
}

.chb-share-info p {
    margin:6px 0 0;
    color:#71869b;
    font-size:11px;
    line-height:1.55;
}


/* ============================================================
   NOTIFICATION PREFERENCES V7
============================================================ */

.chb-device-actions {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.chb-notification-device {
    min-height:30px;
    padding:0 12px;
    border-radius:8px;
    border:1px solid #33485c;
    color:#b5c8db;
    background:#0b1722;
    cursor:pointer;
    font-size:11px;
    font-weight:600;
}

.chb-notification-device:hover {
    border-color:#47708f;
    background:#0e202f;
}

.chb-notification-groups {
    display:flex;
    flex-direction:column;
    gap:18px;
    margin-top:8px;
}

.chb-notification-group {
    display:flex;
    flex-direction:column;
    gap:8px;
}

.chb-notification-group-title {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.chb-notification-group-title > span {
    color:#698298;
    font-size:10px;
    font-weight:700;
    letter-spacing:.08em;
}

.chb-notification-all {
    padding:0;
    border:0;
    color:#5dbdff;
    background:transparent;
    cursor:pointer;
    font-size:10px;
}

.chb-notification-event-list {
    display:flex;
    flex-direction:column;
    gap:8px;
}

.chb-notification-event {
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:13px;
    border:1px solid #172a3d;
    border-radius:10px;
    background:#07111b;
    cursor:pointer;
}

.chb-notification-event:hover {
    border-color:#23445f;
}

.chb-notification-event input {
    margin-top:3px;
}

.chb-notification-event strong {
    display:block;
    color:#ecf6ff;
    font-size:12px;
}

.chb-notification-event small {
    display:block;
    margin-top:4px;
    color:#72869a;
    font-size:11px;
    line-height:1.45;
}

.chb-notification-empty {
    padding:18px;
    border:1px dashed #294055;
    border-radius:10px;
    color:#74899d;
    background:#08121c;
    font-size:12px;
    line-height:1.5;
}

@media(max-width:700px) {

    .chb-device-access {
        align-items:flex-start;
        flex-direction:column;
    }

    .chb-device-actions {
        width:100%;
    }

    .chb-notification-device,
    .chb-share-device {
        flex:1;
    }
}


/* ============================================================
   NOTIFICATION CHANNELS V8
============================================================ */

.chb-notification-event {
    display:flex;
    flex-direction:column;
    gap:12px;
}

.chb-notification-main {
    display:flex;
    align-items:flex-start;
    gap:12px;
    cursor:pointer;
}

.chb-notification-main input {
    margin-top:3px;
}

.chb-notification-main strong {
    display:block;
    color:#ecf6ff;
    font-size:12px;
}

.chb-notification-main small {
    display:block;
    margin-top:4px;
    color:#72869a;
    font-size:11px;
    line-height:1.45;
}

.chb-notification-channels {
    display:flex;
    align-items:center;
    gap:14px;
    padding-top:10px;
    margin-left:26px;
    border-top:1px solid #14283a;
}

.chb-channel-title {
    color:#60798f;
    font-size:10px;
}

.chb-channel-option {
    display:flex;
    align-items:center;
    gap:6px;
    color:#a8bbcc;
    font-size:11px;
    cursor:pointer;
}

.chb-channel-option input:disabled + span {
    opacity:.35;
}

@media(max-width:600px) {

    .chb-notification-channels {
        align-items:flex-start;
        flex-wrap:wrap;
    }

    .chb-channel-title {
        width:100%;
    }
}