:root {
    color-scheme: dark;
    font-family: Inter, "Segoe UI", sans-serif;
    background: #080a14;
    color: #e9eaf7;
    font-synthesis: none;
    text-rendering: optimizeLegibility;

    --bg: #080a14;
    --panel: #101220;
    --panel-raised: #17192c;
    --border: #25294a;
    --text: #e9eaf7;
    --muted: #999cb8;
    --accent: #a8b0fa;
    --accent-bg: #25294a;
}



* {
    box-sizing: border-box;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    background: var(--bg);
    color: var(--text);
}

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

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* Shared branding */

.brand-line {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    width: fit-content;
}

.brand-icon {
    display: grid;
    width: 39px;
    height: 39px;
    place-items: center;
    border: 1px solid #373d6a;
    border-radius: 12px;
    background: linear-gradient(145deg, #25294a, #12152b);
    color: #bac0fb;
    font-size: 19px;
    font-weight: 750;
}

.brand-name {
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -1.2px;
}

.brand-period {
    color: var(--accent);
}

.eyebrow {
    margin: 0;
    color: #8b90b6;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.16em;
}

/* Login page */

.login-body {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 36px 18px;
    background:
        radial-gradient(ellipse at 50% 35%, #151932 0%, transparent 53%),
        var(--bg);
}

.login-layout {
    display: flex;
    width: min(440px, 100%);
    flex-direction: column;
    align-items: center;
}

.login-layout > .brand-line {
    margin-bottom: 30px;
}

.login-card {
    width: 100%;
    padding: 34px;
    border: 1px solid var(--border);
    border-radius: 19px;
    background: rgba(12, 14, 29, 0.96);
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.25);
}

.login-card h1 {
    margin: 13px 0 8px;
    font-size: 31px;
    font-weight: 650;
    letter-spacing: -1.2px;
}

.muted {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

.login-form {
    display: flex;
    flex-direction: column;
    margin-top: 28px;
}

.login-form label {
    margin: 0 0 8px;
    color: #d6d8e8;
    font-size: 12px;
    font-weight: 650;
}

.login-form input {
    width: 100%;
    height: 45px;
    margin-bottom: 20px;
    padding: 0 13px;
    border: 1px solid #25294a;
    border-radius: 9px;
    background: #090b17;
    color: var(--text);
    outline: none;
}

.login-form input:focus {
    border-color: #717ff8;
    box-shadow: 0 0 0 3px rgba(113, 127, 248, 0.12);
}

.button-primary {
    display: flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 3px;
    border: 1px solid #919bf9;
    border-radius: 9px;
    background: #96a0fa;
    color: #0e1022;
    font-size: 13px;
    font-weight: 750;
    transition: background 150ms ease, transform 150ms ease;
}

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

.alert-error {
    margin-top: 20px;
    padding: 12px 13px;
    border: 1px solid #713b46;
    border-radius: 9px;
    background: #2a171e;
    color: #ffb5bf;
    font-size: 12px;
    line-height: 1.6;
}

.login-footnote {
    margin: 23px 0 0;
    color: #7a81af;
    font-size: 11px;
    line-height: 1.6;
    text-align: center;
}

.page-footer {
    margin-top: 28px;
    color: #7980b3;
    font-size: 9px;
    font-weight: 650;
    letter-spacing: 0.14em;
}

/* Main application layout */

.app-body {
    background:
        radial-gradient(ellipse at 80% 0%, rgba(34, 38, 72, 0.14), transparent 40%),
        var(--bg);
}

.app-shell {
    display: grid;
    min-height: 100vh;
    grid-template-columns: 242px minmax(0, 1fr);
}

.sidebar {
    position: sticky;
    top: 0;
    display: flex;
    height: 100vh;
    flex-direction: column;
    padding: 25px 15px 18px;
    border-right: 1px solid #161933;
    background: #090b17;
}

.sidebar > .brand-line {
    margin: 0 8px 43px;
}

.nav-section {
    margin-bottom: 27px;
}

.nav-heading {
    margin: 0 10px 11px;
    color: #7980b3;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.14em;
}

.nav-item {
    display: flex;
    min-height: 39px;
    align-items: center;
    gap: 11px;
    margin: 3px 0;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #969abc;
    font-size: 12px;
}

.nav-item.active {
    border-color: #25294a;
    background: #14172f;
    color: #c6cbfc;
}

.nav-icon {
    display: inline-grid;
    width: 18px;
    place-items: center;
    color: #979bbc;
    font-size: 16px;
}

.nav-disabled {
    color: #5d659e;
    cursor: default;
}

.nav-disabled .nav-icon {
    color: #535a91;
}

.nav-soon {
    margin-left: auto;
    color: #575e97;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: 0.04em;
}

.sidebar-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 16px 9px 4px;
    border-top: 1px solid #161933;
    color: #7b81ae;
    font-size: 10px;
}

.connection-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #60d7a1;
    box-shadow: 0 0 10px rgba(96, 215, 161, 0.2);
}

.version-label {
    margin-left: auto;
    color: #7980b3;
}

.main-content {
    width: 100%;
    max-width: 1600px;
    min-width: 0;
    margin: 0 auto;
    padding: 34px clamp(22px, 4vw, 58px) 23px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 34px;
}

.topbar h1 {
    margin: 8px 0 0;
    font-size: 26px;
    font-weight: 650;
    letter-spacing: -0.8px;
}

.account-area {
    display: flex;
    align-items: center;
    gap: 10px;
}

.account-avatar {
    display: grid;
    width: 37px;
    height: 37px;
    place-items: center;
    border: 1px solid #333964;
    border-radius: 50%;
    background: #181b37;
    color: #bcc2fb;
    font-size: 13px;
    font-weight: 700;
}

.account-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.account-name {
    color: #e3e5f0;
    font-size: 12px;
    font-weight: 650;
}

.account-role {
    color: #7a80ae;
    font-size: 10px;
}

.button-logout {
    margin-left: 10px;
    padding: 9px 12px;
    border: 1px solid #25294a;
    border-radius: 8px;
    background: #0d1021;
    color: #b1b4cb;
    font-size: 11px;
}

.button-logout:hover {
    border-color: #5e669f;
    color: white;
}

/* Dashboard welcome panel */

.welcome-panel {
    position: relative;
    overflow: hidden;
    padding: clamp(24px, 3vw, 39px);
    border: 1px solid #25294a;
    border-radius: 15px;
    background:
        radial-gradient(ellipse at 88% 15%, rgba(85, 92, 147, 0.20), transparent 42%),
        linear-gradient(115deg, #101328, #0d0f20);
}

.welcome-content {
    position: relative;
    z-index: 1;
    max-width: 560px;
}

.welcome-panel h2 {
    margin: 17px 0 12px;
    font-size: clamp(27px, 3vw, 39px);
    font-weight: 650;
    letter-spacing: -1.5px;
    line-height: 1.18;
}

.welcome-description {
    max-width: 500px;
    margin: 0;
    color: #a0a4c2;
    font-size: 13px;
    line-height: 1.85;
}

.environment-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 25px;
    padding: 9px 12px;
    border: 1px solid #272c52;
    border-radius: 999px;
    background: rgba(10, 12, 25, 0.55);
    color: #c1c5e8;
    font-size: 10px;
}

.welcome-symbol {
    position: absolute;
    top: -37px;
    right: 20px;
    color: rgba(137, 147, 233, 0.065);
    font-size: clamp(170px, 22vw, 300px);
    font-weight: 800;
    letter-spacing: -0.1em;
    line-height: 1;
    pointer-events: none;
}

/* Feature cards */

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 15px;
    margin: 37px 0 18px;
}

.section-heading h2 {
    margin: 7px 0 0;
    font-size: 19px;
    font-weight: 650;
    letter-spacing: -0.4px;
}

.section-count {
    padding-bottom: 3px;
    color: #7a80af;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

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

.feature-card {
    display: flex;
    min-height: 205px;
    flex-direction: column;
    padding: 21px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: linear-gradient(145deg, #0d0f20, #0b0d1b);
    transition: border-color 150ms ease, transform 150ms ease;
}

.feature-card:hover {
    transform: translateY(-2px);
    border-color: #2d325b;
}

.feature-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.feature-icon {
    display: inline-grid;
    min-width: 40px;
    height: 36px;
    place-items: center;
    padding: 0 7px;
    border: 1px solid #282d53;
    border-radius: 9px;
    background: #151932;
    color: #adb5fb;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.feature-icon-mail {
    border-color: #2f345e;
    background: #191c38;
    color: #bbc1fb;
}

.feature-icon-notes {
    border-color: #2e335c;
    background: #191d39;
    color: #bcc2fb;
}

.feature-icon-files {
    border-color: #25294a;
    background: #1a2d2b;
    color: #a8dfcd;
}

.feature-status {
    color: #7b81ae;
    font-size: 9px;
}

.feature-card h3 {
    margin: 20px 0 8px;
    font-size: 15px;
    font-weight: 650;
}

.feature-card p {
    margin: 0 0 20px;
    color: #8c91b6;
    font-size: 11px;
    line-height: 1.8;
}

.feature-footer {
    margin-top: auto;
    color: #7a81af;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: 0.11em;
}

.dashboard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 28px;
    padding-top: 17px;
    border-top: 1px solid #161933;
    color: #797faf;
    font-size: 9px;
}

/* Smaller desktop windows */

@media (max-width: 900px) {
    .app-shell {
        grid-template-columns: 205px minmax(0, 1fr);
    }

    .sidebar {
        padding-right: 10px;
        padding-left: 10px;
    }

    .main-content {
        padding-right: 22px;
        padding-left: 22px;
    }

    .account-details {
        display: none;
    }

    .welcome-symbol {
        right: -25px;
    }
}

@media (max-width: 650px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
        height: auto;
    }

    .sidebar > .brand-line {
        margin-bottom: 20px;
    }

    .nav-section {
        margin-bottom: 12px;
    }

    .sidebar-bottom {
        margin-top: 10px;
    }

    .main-content {
        padding: 22px 15px;
    }

    .topbar {
        align-items: start;
    }

    .topbar h1 {
        font-size: 22px;
    }

    .welcome-symbol {
        display: none;
    }

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

    .login-card {
        padding: 25px 21px;
    }
}:root {
    color-scheme: dark;
    font-family: Inter, "Segoe UI", sans-serif;
    background: #080a14;
    color: #e9eaf7;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    background:
        radial-gradient(ellipse at 50% 42%, #13162e 0%, transparent 55%),
        #070812;
}

.welcome {
    width: min(560px, calc(100% - 40px));
    text-align: center;
    padding: 48px 24px;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 28px;
    border: 1px solid #323863;
    border-radius: 17px;
    background: #151831;
    color: #a4acfa;
    font-size: 28px;
    font-weight: 700;
}

.eyebrow {
    color: #868bb3;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
}

h1 {
    margin: 14px 0;
    font-size: clamp(48px, 10vw, 76px);
    letter-spacing: -0.07em;
}

h1 span {
    color: #8490f9;
}

.subtitle {
    color: #999dbd;
    font-size: 15px;
}

.status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 32px;
    padding: 11px 15px;
    border: 1px solid #263b35;
    border-radius: 999px;
    background: #111c1a;
    color: #b3dccc;
    font-size: 12px;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #64d6a2;
}

.next-step {
    margin-top: 48px;
    color: #797fb2;
    font-size: 12px;
}



/* ===========================
   Nexus Notes Module
   =========================== */

.notes-page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
}

.notes-page-heading h2 {
    margin: 10px 0 8px;
    font-size: 30px;
    font-weight: 650;
    letter-spacing: -1px;
}

.notes-muted {
    color: var(--muted, #8086b1);
    font-size: 12px;
    line-height: 1.8;
}

.notes-success {
    margin-bottom: 20px;
    padding: 12px 15px;
    border: 1px solid #285541;
    border-radius: 9px;
    background: #11251c;
    color: #a8e4c3;
    font-size: 12px;
}

.notes-alert {
    margin-bottom: 20px;
}

.notes-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
    padding: 12px;
    border: 1px solid var(--border, #191d39);
    border-radius: 12px;
    background: var(--panel, #0c0e1d);
}

.notes-search-wrap {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: 8px;
}

.search-symbol {
    padding-left: 4px;
    color: #888db4;
    font-size: 22px;
}

.notes-input,
.notes-textarea,
.notes-select {
    width: 100%;
    border: 1px solid #25294a;
    border-radius: 8px;
    background: #090b17;
    color: #e7e8f2;
    font: inherit;
    font-size: 12px;
}

.notes-input,
.notes-select {
    min-height: 41px;
    padding: 0 12px;
}

.notes-input:focus,
.notes-textarea:focus,
.notes-select:focus {
    border-color: #717ff8;
    outline: none;
    box-shadow: 0 0 0 3px rgba(113, 127, 248, 0.1);
}

.notes-search {
    min-width: 0;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.notes-search:focus {
    border-color: transparent;
    box-shadow: none;
}

.notes-select {
    width: auto;
    max-width: 190px;
}

.button-secondary {
    display: inline-flex;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border: 1px solid #25294a;
    border-radius: 8px;
    background: #0f1125;
    color: #c1c4d9;
    font-size: 11px;
    text-decoration: none;
    white-space: nowrap;
}

.button-secondary:hover {
    border-color: #474e81;
    color: #ffffff;
}

.filter-button {
    min-height: 41px;
}

.new-note-button {
    display: inline-flex;
    min-height: 41px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 15px;
    border: 1px solid #919bf9;
    border-radius: 9px;
    background: #96a0fa;
    color: #0e1022;
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
}

.new-note-button:hover {
    background: #b4bbfb;
}

.notes-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin: 0 0 15px;
}

.notes-list-heading h2 {
    margin: 0;
    font-size: 17px;
}

.notes-list-heading > span {
    color: #8086b1;
    font-size: 10px;
}

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

.note-card {
    display: flex;
    min-width: 0;
    min-height: 225px;
    flex-direction: column;
    padding: 20px;
    border: 1px solid #191d39;
    border-radius: 12px;
    background: linear-gradient(145deg, #0d0f20, #0b0d1b);
}

.note-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.note-type-label {
    color: #a2abfa;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.note-date {
    color: #7980af;
    font-size: 9px;
}

.note-card h3 {
    overflow-wrap: anywhere;
    margin: 17px 0 8px;
    font-size: 15px;
    line-height: 1.5;
}

.note-card h3 a:hover,
.note-edit-link:hover {
    color: #919bf9;
}

.note-preview {
    display: -webkit-box;
    overflow: hidden;
    margin: 0 0 14px;
    color: #8c91b6;
    font-size: 11px;
    line-height: 1.8;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.note-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 17px;
}

.note-tag {
    padding: 5px 8px;
    border: 1px solid #25294a;
    border-radius: 5px;
    background: #13162d;
    color: #adb4f3;
    font-size: 9px;
}

.note-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 13px;
    border-top: 1px solid #181c37;
}

.note-card-actions form {
    margin: 0;
}

.note-edit-link {
    color: #acb4fb;
    font-size: 11px;
    font-weight: 650;
}

.note-delete-button {
    padding: 6px 9px;
    border: 1px solid #50303a;
    border-radius: 6px;
    background: #0f1124;
    color: #e7a2ad;
    font-size: 10px;
    cursor: pointer;
}

.notes-empty {
    display: flex;
    min-height: 270px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 35px 22px;
    border: 1px dashed #25294a;
    border-radius: 13px;
    background: rgba(12, 14, 29, 0.6);
    text-align: center;
}

.empty-note-icon {
    display: grid;
    width: 47px;
    height: 47px;
    place-items: center;
    margin-bottom: 15px;
    border: 1px solid #282d53;
    border-radius: 12px;
    background: #151932;
    color: #adb5fb;
    font-size: 21px;
}

.notes-empty h3 {
    margin: 0 0 9px;
    font-size: 16px;
}

.notes-empty p {
    max-width: 420px;
    margin: 0 0 21px;
    color: #8086b1;
    font-size: 12px;
    line-height: 1.8;
}

.note-editor {
    display: flex;
    flex-direction: column;
    padding: clamp(20px, 3vw, 32px);
    border: 1px solid #191d39;
    border-radius: 13px;
    background: #0c0e1d;
}

.note-editor label {
    margin: 18px 0 8px;
    color: #d6d8e8;
    font-size: 12px;
    font-weight: 650;
}

.note-editor label:first-of-type {
    margin-top: 0;
}

.notes-textarea {
    min-height: 290px;
    padding: 12px;
    resize: vertical;
    line-height: 1.8;
}

.field-hint {
    margin: 8px 0 0;
    color: #7a80af;
    font-size: 10px;
}

.editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 25px;
    padding-top: 18px;
    border-top: 1px solid #191d39;
}

.editor-save {
    min-width: 115px;
    padding: 0 15px;
}

@media (max-width: 850px) {
    .notes-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .notes-page-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .notes-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .notes-select {
        width: 100%;
        max-width: none;
    }

    .notes-search-wrap {
        min-height: 40px;
    }

    .filter-button {
        width: 100%;
    }
}


/* ===========================
   Nexus Domain & DNS Toolkit
   =========================== */

.domain-intro {
    position: relative;
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
    padding: 27px 30px;
    border: 1px solid #25294a;
    border-radius: 14px;
    background:
        radial-gradient(ellipse at 90% 20%, rgba(85, 92, 147, 0.2), transparent 45%),
        linear-gradient(115deg, #101328, #0d0f20);
}

.domain-intro h2 {
    margin: 12px 0 9px;
    font-size: clamp(25px, 3vw, 34px);
    font-weight: 650;
    letter-spacing: -1.1px;
}

.domain-intro p:not(.eyebrow) {
    max-width: 560px;
    margin: 0;
    color: #a0a4c2;
    font-size: 12px;
    line-height: 1.8;
}

.domain-intro-symbol {
    color: rgba(137, 147, 233, 0.15);
    font-size: clamp(40px, 7vw, 86px);
    font-weight: 800;
    letter-spacing: -0.08em;
}

.domain-search-panel {
    margin-bottom: 28px;
    padding: 21px;
    border: 1px solid var(--border, #191d39);
    border-radius: 12px;
    background: var(--panel, #0c0e1d);
}

.domain-search-panel > label {
    display: block;
    margin-bottom: 9px;
    color: #d6d8e8;
    font-size: 11px;
    font-weight: 650;
}

.domain-search-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.domain-input,
.domain-select {
    min-width: 0;
    min-height: 45px;
    border: 1px solid #25294a;
    border-radius: 8px;
    background: #090b17;
    color: var(--text, #e7e8f2);
    font: inherit;
    font-size: 12px;
}

.domain-input {
    flex: 1;
    padding: 0 13px;
}

.domain-select {
    width: 100px;
    padding: 0 10px;
}

.domain-input:focus,
.domain-select:focus {
    border-color: #717ff8;
    outline: none;
    box-shadow: 0 0 0 3px rgba(113, 127, 248, 0.1);
}

.domain-submit {
    min-height: 45px;
    flex-shrink: 0;
    padding: 0 16px;
    border-radius: 8px;
}

.domain-hint {
    margin: 10px 0 0;
    color: #797fae;
    font-size: 10px;
    line-height: 1.7;
}

.domain-hint code,
.domain-empty code {
    color: #b6bcf1;
}

.domain-alert {
    margin-bottom: 20px;
}

.domain-result-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin: 28px 0 16px;
}

.domain-result-heading h2 {
    margin: 8px 0 0;
    overflow-wrap: anywhere;
    font-size: 21px;
    font-weight: 650;
    letter-spacing: -0.4px;
}

.domain-record-badge,
.domain-panel-icon {
    padding: 7px 9px;
    border: 1px solid #272c52;
    border-radius: 6px;
    background: #14172f;
    color: #aeb6fb;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.domain-result-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
}

.domain-panel {
    min-width: 0;
    padding: 21px;
    border: 1px solid var(--border, #191d39);
    border-radius: 12px;
    background: linear-gradient(145deg, #0d0f20, #0b0d1b);
}

.domain-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 21px;
}

.domain-panel-heading h3 {
    margin: 7px 0 0;
    font-size: 16px;
    font-weight: 650;
}

.domain-panel-icon {
    color: #b0b3cb;
    background: #101327;
    border-color: #25294a;
}

.domain-info-list {
    display: flex;
    flex-direction: column;
}

.domain-info-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 0;
    border-bottom: 1px solid #191d39;
}

.domain-info-row:first-child {
    padding-top: 0;
}

.domain-info-row > span {
    color: #8086b1;
    font-size: 10px;
}

.domain-info-row > strong {
    overflow-wrap: anywhere;
    color: #e3e5f0;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.65;
}

.domain-subheading {
    margin: 20px 0 10px;
    color: #bfc2d7;
    font-size: 11px;
    font-weight: 700;
}

.domain-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.domain-chip {
    max-width: 100%;
    padding: 6px 8px;
    overflow-wrap: anywhere;
    border: 1px solid #272c52;
    border-radius: 6px;
    background: #14172f;
    color: #b7bdf0;
    font-size: 9px;
}

.domain-footnote {
    margin: 18px 0 0;
    color: #7a80af;
    font-size: 10px;
    line-height: 1.8;
}

.domain-muted {
    color: #8086b1;
    font-size: 11px;
    line-height: 1.7;
}

.domain-unavailable {
    padding: 16px;
    border: 1px solid #25294a;
    border-radius: 9px;
    background: #0d0f1f;
}

.domain-unavailable strong {
    display: block;
    margin-bottom: 8px;
    color: #dbddf4;
    font-size: 12px;
}

.domain-unavailable p {
    margin: 5px 0 0;
    color: #898eb5;
    font-size: 11px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.dns-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 15px;
}

.dns-status-row > span:first-child {
    color: #8086b1;
    font-size: 10px;
}

.dns-status-pill {
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 750;
}

.dns-status-ok {
    border: 1px solid #285541;
    background: #11251c;
    color: #a8e4c3;
}

.dns-status-warning {
    border: 1px solid #6a4e2c;
    background: #291f14;
    color: #efc38a;
}

.dns-record-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dns-record {
    min-width: 0;
    padding: 12px;
    border: 1px solid #1d213f;
    border-radius: 8px;
    background: #0a0c18;
}

.dns-record-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
    color: #939cf0;
    font-size: 9px;
    font-weight: 700;
}

.dns-record-meta span:last-child {
    color: #7a80af;
    font-weight: 400;
}

.dns-record-name {
    margin-bottom: 7px;
    color: #c4c6da;
    font-size: 10px;
    overflow-wrap: anywhere;
}

.dns-record-value {
    display: block;
    color: #a8d8c1;
    font-family: Consolas, "Courier New", monospace;
    font-size: 11px;
    line-height: 1.75;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.domain-empty {
    display: flex;
    min-height: 250px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    border: 1px dashed #25294a;
    border-radius: 13px;
    background: rgba(12, 14, 29, 0.6);
    text-align: center;
}

.domain-empty-icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    margin-bottom: 15px;
    border: 1px solid #282d53;
    border-radius: 12px;
    background: #151932;
    color: #adb5fb;
    font-size: 27px;
}

.domain-empty h3 {
    margin: 0 0 8px;
    font-size: 16px;
}

.domain-empty p {
    max-width: 440px;
    margin: 0 0 13px;
    color: #8086b1;
    font-size: 12px;
    line-height: 1.8;
}

.domain-empty > span {
    color: #7a80ae;
    font-size: 10px;
}

@media (max-width: 950px) {
    .domain-result-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .domain-search-row {
        flex-wrap: wrap;
    }

    .domain-input {
        flex-basis: 100%;
    }

    .domain-select {
        flex: 1;
    }

    .domain-submit {
        flex: 2;
    }

    .domain-intro-symbol {
        display: none;
    }
}

/* Shared desktop application layout */
@media (min-width: 1000px) {
    .app-shell {
        grid-template-columns: 250px minmax(0, 1fr);
        min-height: 100vh;
    }

    .sidebar {
        position: sticky;
        top: 0;
        width: 250px;
        min-width: 250px;
        height: 100vh;
    }

    .main-content {
        width: 100%;
        max-width: none;
        min-width: 0;
        margin: 0;
    }
}


/* Fix: keep the application shell full-width and consistent */
body.app-body {
    display: block;
    width: 100%;
    min-height: 100vh;
    margin: 0;
}

@media (min-width: 1000px) {
    body.app-body .app-shell {
        display: grid;
        width: 100%;
        max-width: none;
        min-height: 100vh;
        margin: 0;
        grid-template-columns: 250px minmax(0, 1fr);
        align-items: stretch;
    }

    body.app-body .sidebar {
        position: sticky;
        top: 0;
        width: auto;
        min-width: 0;
        height: 100vh;
        align-self: start;
    }

    body.app-body .main-content {
        width: 100%;
        max-width: none;
        min-width: 0;
        margin: 0;
    }
}


/* =========================================================
   Midnight Indigo — safe theme override
   Append this block to the VERY END of public/assets/css/app.css.
   It intentionally changes presentation only; no PHP behavior.
   ========================================================= */

:root {
    color-scheme: dark;
    --bg: #080a14;
    --panel: #101220;
    --panel-raised: #17192c;
    --border: #25294a;
    --text: #e9eaf7;
    --muted: #999cb8;
    --accent: #a8b0fa;
    --accent-bg: #25294a;
}

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

.app-body {
    background:
        radial-gradient(ellipse at 78% 0%, rgba(80, 91, 189, 0.16), transparent 38%),
        radial-gradient(ellipse at 5% 85%, rgba(44, 51, 117, 0.08), transparent 32%),
        var(--bg);
}

.login-body {
    background:
        radial-gradient(ellipse at 50% 25%, rgba(80, 91, 194, 0.20), transparent 50%),
        var(--bg);
}

/* Shared branding and headings */
.brand-icon {
    border-color: #454c7f;
    background: linear-gradient(145deg, #2a2f56, #12152b);
    color: #e1e3fd;
    box-shadow: 0 0 26px rgba(104, 115, 213, 0.10);
}

.brand-period,
.note-card h3 a:hover,
.note-edit-link:hover {
    color: var(--accent);
}

.eyebrow {
    color: #a2a6c3;
}

/* Sidebar */
.sidebar {
    border-right-color: #171b35;
    background: linear-gradient(180deg, #0d0f1f 0%, #0a0c18 100%);
}

.nav-heading {
    color: #787faf;
}

.nav-item {
    color: #a6aac5;
    transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}

.nav-item[href]:hover {
    border-color: #25294a;
    background: rgba(81, 88, 142, 0.12);
    color: #e9ebfe;
}

.nav-item.active {
    border-color: #393f6d;
    background: linear-gradient(100deg, rgba(82, 89, 144, 0.30), rgba(42, 48, 87, 0.18));
    color: #d4d8fd;
    box-shadow: inset 2px 0 0 #9fa8fa, 0 0 22px rgba(89, 99, 192, 0.07);
}

.nav-icon {
    color: #a5ace7;
}

.nav-disabled,
.nav-disabled .nav-icon {
    color: #5d649d;
}

.sidebar-bottom,
.dashboard-footer {
    border-color: #171b35;
}

.sidebar-bottom {
    color: #8f94b8;
}

/* Top bar and account controls */
.account-name {
    color: #e8eafa;
}

.account-avatar {
    border-color: #393f6d;
    background: linear-gradient(145deg, #1e2343, #13162c);
    color: #d3d7fd;
}

.button-logout,
.button-secondary {
    border-color: #25294a;
    background: #11142a;
    color: #c9ccdf;
}

.button-logout:hover,
.button-secondary:hover {
    border-color: #797fad;
    background: #171b35;
    color: #ffffff;
}

/* Primary actions */
.button-primary,
.new-note-button {
    border-color: #b1b8fb;
    background: linear-gradient(135deg, #acb4fb, #8791ec);
    color: #0e1022;
    box-shadow: 0 5px 18px rgba(104, 115, 213, 0.12);
}

.button-primary:hover,
.new-note-button:hover {
    border-color: #cacffc;
    background: linear-gradient(135deg, #c8cdfc, #9aa3f4);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline-color: var(--accent);
}

/* Dashboard and Domain & DNS hero panels */
.welcome-panel,
.domain-intro {
    border-color: #292f55;
    background:
        radial-gradient(ellipse at 88% 13%, rgba(119, 130, 231, 0.19), transparent 42%),
        radial-gradient(ellipse at 18% 100%, rgba(59, 66, 113, 0.13), transparent 48%),
        linear-gradient(115deg, #12152b, #0c0e1e 78%);
    box-shadow: inset 0 1px 0 rgba(226, 229, 254, 0.025);
}

.welcome-panel h2,
.domain-intro h2 {
    color: #eef0fe;
}

.welcome-description,
.domain-intro p:not(.eyebrow) {
    color: #b4b7ce;
}

.welcome-symbol,
.domain-intro-symbol {
    color: rgba(150, 159, 244, 0.13);
}

.environment-badge {
    border-color: #2c3159;
    background: rgba(11, 13, 26, 0.64);
    color: #ccd0ef;
}

/* Cards and panels used across Overview, Notes, and DNS */
.feature-card,
.note-card,
.note-editor,
.domain-search-panel,
.domain-panel {
    border-color: var(--border);
    background: linear-gradient(145deg, #0f1124, #0b0d1c);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
}

.feature-card:hover {
    border-color: #404778;
    box-shadow: 0 12px 30px rgba(55, 61, 107, 0.10);
}

.feature-icon,
.empty-note-icon,
.domain-empty-icon {
    border-color: #373d6a;
    background: #171a34;
    color: #bdc4fc;
}

.feature-icon-mail,
.feature-icon-notes,
.feature-icon-files {
    border-color: #373d6a;
    background: #171a34;
    color: #cdd1fc;
}

.feature-status,
.feature-footer,
.section-count {
    color: #8e93b8;
}

.feature-card p,
.note-preview,
.notes-muted,
.notes-list-heading > span {
    color: #a2a6c3;
}

/* Form controls */
.login-form input,
.notes-input,
.notes-textarea,
.notes-select,
.domain-input,
.domain-select {
    border-color: #25294a;
    background: #090b17;
    color: var(--text);
}

.login-form input:focus,
.notes-input:focus,
.notes-textarea:focus,
.notes-select:focus,
.domain-input:focus,
.domain-select:focus {
    border-color: #878fd8;
    box-shadow: 0 0 0 3px rgba(159, 168, 250, 0.13);
}

.notes-search {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.notes-search:focus {
    border-color: transparent;
    box-shadow: none;
}

.login-form label,
.domain-search-panel > label,
.note-editor label {
    color: #d9dbe9;
}

/* Notes tags, links, and empty state */
.note-type-label,
.note-edit-link {
    color: #bcc2fb;
}

.note-tag,
.domain-record-badge,
.domain-panel-icon,
.domain-chip {
    border-color: #2a2f56;
    background: #13162d;
    color: #cacffc;
}

.note-card-actions,
.editor-actions,
.domain-info-row {
    border-color: #1b1f3c;
}

.notes-empty,
.domain-empty {
    border-color: #272c51;
    background: rgba(13, 15, 31, 0.72);
}

/* DNS details */
.domain-info-row > strong {
    color: #e3e5f6;
}

.domain-info-row > span,
.domain-footnote,
.domain-muted,
.domain-hint,
.domain-empty p {
    color: #979cbd;
}

.dns-record {
    border-color: #25294a;
    background: #0a0c18;
}

.dns-record-meta {
    color: #b8bffb;
}

.dns-record-name {
    color: #c9ccdf;
}

.domain-unavailable {
    border-color: #25294a;
    background: #0d0f1f;
}

.domain-unavailable strong {
    color: #dee0f5;
}

/* Preserve success and warning colors as status signals. */
.notes-success,
.dns-status-ok {
    border-color: #285541;
    background: #11251c;
    color: #a8e4c3;
}

.alert-error {
    border-color: #713b46;
    background: #2a171e;
    color: #ffb5bf;
}

@media (prefers-reduced-motion: reduce) {
    .nav-item,
    .feature-card,
    .button-primary {
        transition: none;
    }
}


/* ===========================
   Mail Diagnostics module
   =========================== */

.mail-intro {
    position: relative;
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
    padding: 27px 30px;
    border: 1px solid color-mix(in srgb, var(--accent, #919bf9) 24%, var(--border, #191d39));
    border-radius: 14px;
    background:
        radial-gradient(ellipse at 91% 18%, rgba(127, 139, 248, 0.14), transparent 45%),
        linear-gradient(115deg, var(--panel-raised, #0f1125), var(--panel, #0c0e1d));
}

.mail-intro h2 {
    margin: 12px 0 9px;
    font-size: clamp(25px, 3vw, 34px);
    font-weight: 650;
    letter-spacing: -1.1px;
}

.mail-intro p:not(.eyebrow) {
    max-width: 560px;
    margin: 0;
    color: var(--muted, #8086b1);
    font-size: 12px;
    line-height: 1.8;
}

.mail-intro-symbol {
    color: color-mix(in srgb, var(--accent, #919bf9) 17%, transparent);
    font-size: clamp(68px, 9vw, 112px);
    font-weight: 800;
    letter-spacing: -0.08em;
    line-height: 1;
}

.mail-search-panel {
    margin-bottom: 28px;
    padding: 21px;
    border: 1px solid var(--border, #191d39);
    border-radius: 12px;
    background: var(--panel, #0c0e1d);
}

.mail-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 16px;
}

.mail-field {
    min-width: 0;
}

.mail-field label {
    display: block;
    margin-bottom: 9px;
    color: var(--text, #e7e8f2);
    font-size: 11px;
    font-weight: 650;
}

.mail-field label span {
    color: var(--muted, #8086b1);
    font-weight: 400;
}

.mail-input {
    width: 100%;
    min-height: 45px;
    padding: 0 13px;
    border: 1px solid var(--border, #25294a);
    border-radius: 8px;
    background: var(--bg, #070812);
    color: var(--text, #e7e8f2);
    font: inherit;
    font-size: 12px;
}

.mail-input:focus {
    border-color: var(--accent, #919bf9);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #919bf9) 13%, transparent);
}

.mail-field-hint {
    margin: 8px 0 0;
    color: var(--muted, #8086b1);
    font-size: 10px;
    line-height: 1.7;
}

.mail-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 17px;
    padding-top: 15px;
    border-top: 1px solid var(--border, #191d39);
}

.mail-form-actions .mail-field-hint {
    margin: 0;
}

.mail-form-actions .domain-submit {
    min-height: 43px;
}

.mail-result-heading {
    margin-top: 28px;
}

.mail-result-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px;
}

.mail-panel {
    min-width: 0;
    padding: 21px;
    border: 1px solid var(--border, #191d39);
    border-radius: 12px;
    background: linear-gradient(145deg, var(--panel-raised, #0f1125), var(--panel, #0c0e1d));
}

.mail-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
}

.mail-panel-heading h3 {
    margin: 7px 0 0;
    font-size: 16px;
    font-weight: 650;
}

.mail-status {
    flex-shrink: 0;
    padding: 6px 8px;
    border: 1px solid var(--border, #25294a);
    border-radius: 6px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.mail-status--good {
    border-color: #285541;
    background: #11251c;
    color: #a8e4c3;
}

.mail-status--warning {
    border-color: #6a4e2c;
    background: #291f14;
    color: #efc38a;
}

.mail-status--bad {
    border-color: #713b46;
    background: #2a171e;
    color: #ffb5bf;
}

.mail-status--info {
    border-color: #292f55;
    background: #101327;
    color: #bec1d6;
}

.mail-result-message {
    margin: 0 0 14px;
    color: var(--muted, #8086b1);
    font-size: 11px;
    line-height: 1.8;
}

.mail-mx-list,
.mail-record-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.mail-mx-record {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 12px;
    border: 1px solid var(--border, #191d39);
    border-radius: 8px;
    background: var(--bg, #070812);
}

.mail-priority {
    flex-shrink: 0;
    padding: 5px 6px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--accent, #919bf9) 11%, transparent);
    color: var(--accent, #919bf9);
    font-size: 9px;
    font-weight: 700;
}

.mail-mx-record code {
    padding-top: 4px;
    color: var(--text, #e7e8f2);
    font-size: 11px;
    overflow-wrap: anywhere;
}

.mail-record-value {
    display: block;
    max-width: 100%;
    margin: 0;
    padding: 12px;
    overflow-x: auto;
    border: 1px solid var(--border, #191d39);
    border-radius: 8px;
    background: var(--bg, #070812);
    color: #a8d8c1;
    font-family: Consolas, "Courier New", monospace;
    font-size: 10px;
    line-height: 1.8;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.mail-record-name {
    margin: 0 0 10px;
    overflow-wrap: anywhere;
    color: var(--muted, #8086b1);
    font-size: 10px;
}

.mail-record-name code,
.mail-guidance code,
.mail-empty code {
    color: var(--accent, #919bf9);
    overflow-wrap: anywhere;
}

.mail-mini-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.mail-mini-facts span {
    padding: 7px 9px;
    border: 1px solid var(--border, #191d39);
    border-radius: 7px;
    color: var(--muted, #8086b1);
    font-size: 9px;
}

.mail-mini-facts strong {
    margin-left: 4px;
    color: var(--text, #e7e8f2);
    font-weight: 700;
}

.mail-guidance {
    margin: 13px 0 0;
    color: var(--muted, #8086b1);
    font-size: 10px;
    line-height: 1.8;
}

.mail-subheading {
    margin: 13px 0 8px;
    color: var(--text, #e7e8f2);
    font-size: 10px;
    font-weight: 700;
}

.mail-disclaimer {
    margin: 18px 0 0;
    color: var(--muted, #8086b1);
    font-size: 10px;
    line-height: 1.8;
}

.mail-empty {
    margin-top: 4px;
}

@media (max-width: 950px) {
    .mail-result-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .mail-intro-symbol {
        display: none;
    }

    .mail-form-grid {
        grid-template-columns: 1fr;
    }

    .mail-form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .mail-form-actions .domain-submit {
        width: 100%;
    }

    .mail-panel-heading {
        align-items: flex-start;
    }
}


/* Context-aware repair suggestions */
.mail-recommendation {
    margin-top: 18px;
    padding: 14px;
    border: 1px solid rgba(159, 168, 250, 0.28);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(57, 63, 109, 0.18), rgba(13, 15, 31, 0.55));
}
.mail-recommendation > strong {
    display: block;
    color: #cbd0fc;
    font-size: 12px;
    font-weight: 700;
}
.mail-recommendation p {
    margin: 7px 0 0;
    color: var(--muted, #979cbd);
    font-size: 12px;
    line-height: 1.7;
}
.mail-recommendation-record {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    margin: 10px 0 0;
    padding: 10px;
    border: 1px solid rgba(159, 168, 250, 0.2);
    border-radius: 7px;
    background: rgba(5, 6, 13, 0.65);
    color: #daddfd;
    font-size: 11px;
}

/* Guided record repair workspace */
.mail-repair-wizard { margin: 28px 0; padding: 24px; border: 1px solid rgba(159, 168, 250, .22); border-radius: 16px; background: linear-gradient(145deg, rgba(30, 34, 66, .28), rgba(13, 15, 31, .82)); }
.mail-repair-heading, .mail-repair-output-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.mail-repair-heading h2 { margin: 0 0 8px; font-size: 22px; }
.mail-repair-heading p:not(.eyebrow) { max-width: 720px; margin: 0; color: var(--muted, #979cbd); font-size: 13px; line-height: 1.7; }
.mail-repair-step { flex:0 0 auto; padding:7px 10px; border:1px solid rgba(159, 168, 250, .25); border-radius:999px; color:#cbd0fc; font-size:10px; font-weight:700; letter-spacing:.07em; }
.mail-repair-form-grid { display:grid; grid-template-columns: .7fr 1.3fr .8fr; gap:14px; margin-top:22px; }
.mail-repair-wizard .mail-field { min-width:0; }
.mail-repair-wizard .mail-field label { display:block; margin-bottom:7px; color:var(--text, #ecedfa); font-size:12px; font-weight:650; }
.mail-repair-wizard .mail-field label span { color:var(--muted, #979cbd); font-weight:400; }
.mail-repair-wizard .mail-input { width:100%; min-width:0; box-sizing:border-box; padding:11px 12px; border:1px solid rgba(159, 168, 250, .22); border-radius:9px; background:rgba(5, 6, 13, .7); color:var(--text, #ecedfa); font:inherit; font-size:13px; }
.mail-repair-wizard .mail-input:focus { outline:2px solid rgba(159, 168, 250, .45); outline-offset:1px; }
.mail-repair-textarea { resize:vertical; margin-top:0; }
.mail-repair-current-field { margin-top:16px; }
.mail-repair-options { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px; }
.mail-repair-options[hidden], .mail-repair-selector-field[hidden], .mail-repair-output[hidden], .mail-repair-feedback[hidden] { display:none; }
.mail-repair-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.mail-repair-actions button, .mail-copy-button { border:1px solid rgba(159, 168, 250, .3); border-radius:9px; padding:10px 14px; background:#1e2242; color:#ecedfa; font-size:12px; font-weight:700; cursor:pointer; }
.mail-repair-actions button:disabled { opacity:.4; cursor:not-allowed; }
.mail-repair-actions .button-secondary { background:rgba(13, 15, 31, .9); }
.mail-repair-feedback { margin-top:15px; padding:13px 15px; border:1px solid rgba(159, 168, 250, .2); border-radius:10px; white-space:pre-line; color:var(--text, #ecedfa); font-size:12px; line-height:1.7; }
.mail-repair-feedback--warning { border-color:rgba(245, 184, 85, .4); background:rgba(120, 75, 12, .12); }
.mail-repair-feedback--error { border-color:rgba(255, 107, 129, .4); background:rgba(120, 20, 40, .13); }
.mail-repair-feedback--success { border-color:rgba(100, 210, 160, .35); background:rgba(20, 100, 70, .12); }
.mail-repair-output { margin-top:20px; padding-top:20px; border-top:1px solid rgba(159, 168, 250, .2); }
.mail-repair-output-heading h3 { margin:0; font-size:17px; }
.mail-repair-output-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:14px; margin-top:16px; }
.mail-copy-field { display:flex; align-items:stretch; gap:7px; }
.mail-copy-field .mail-input { flex:1; }
.mail-copy-field textarea { resize:vertical; }
.mail-copy-button { flex:0 0 auto; align-self:flex-start; }
.mail-copy-all { margin-top:12px; }
@media (max-width:760px) { .mail-repair-form-grid, .mail-repair-options, .mail-repair-output-grid { grid-template-columns:1fr; } .mail-repair-heading, .mail-repair-output-heading { flex-direction:column; } .mail-repair-wizard { padding:17px; } }


/* Den File Vault — Milestone 1 */
.vault-intro{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:28px 30px;margin:24px 0;background:linear-gradient(135deg,rgba(159, 168, 250, .12),rgba(30, 34, 66, .18));border:1px solid var(--border-color,rgba(159, 168, 250, .2));border-radius:20px}
.vault-intro h2{margin:0 0 10px;font-size:clamp(1.5rem,3vw,2rem)}
.vault-intro p:not(.eyebrow){max-width:620px;color:var(--text-muted,#9da1c0);margin:0;line-height:1.65}
.vault-usage{min-width:150px;padding:16px 18px;border:1px solid var(--border-color,rgba(159, 168, 250, .2));border-radius:14px;background:rgba(8, 9, 20, .45);display:flex;flex-direction:column;gap:5px}
.vault-usage span,.vault-usage small{color:var(--text-muted,#9da1c0);font-size:.8rem}.vault-usage strong{font-size:1.45rem;color:var(--text-primary,#ecedfa)}
.vault-alert,.vault-success{margin:16px 0;padding:13px 16px;border-radius:12px}.vault-success{border:1px solid rgba(100, 210, 160, .3);background:rgba(60, 160, 110, .1);color:#9fe4c2}
.vault-toolbar{display:flex;flex-direction:column;gap:18px;padding:18px 0;border-bottom:1px solid var(--border-color,rgba(159, 168, 250, .16))}
.vault-breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:.9rem}.vault-breadcrumbs span{color:var(--text-muted,#777dac)}.vault-breadcrumbs a{color:var(--text-primary,#ecedfa);text-decoration:none}.vault-breadcrumbs a:hover{color:var(--accent,#9fa8fa)}
.vault-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.vault-upload-form,.vault-folder-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.vault-file-input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.vault-upload-form label.button-primary{cursor:pointer;display:inline-flex;align-items:center}.vault-folder-form input,.vault-menu-panel input,.vault-menu-panel select{min-width:150px;max-width:100%;padding:9px 11px;border:1px solid var(--border-color,rgba(159, 168, 250, .25));border-radius:9px;background:var(--input-bg,#0d0f1f);color:var(--text-primary,#ecedfa)}
.vault-hint{font-size:.8rem;color:var(--text-muted,#868cb4);margin:14px 0 20px;line-height:1.6}
.vault-empty{padding:56px 24px;text-align:center;border:1px dashed var(--border-color,rgba(159, 168, 250, .25));border-radius:18px;margin-top:18px}.vault-empty-icon{font-size:2rem;color:var(--accent,#9fa8fa)}.vault-empty h3{margin:14px 0 8px}.vault-empty p{color:var(--text-muted,#9da1c0);margin:0}
.vault-table-wrap{width:100%;overflow-x:auto;border:1px solid var(--border-color,rgba(159, 168, 250, .18));border-radius:15px;margin:12px 0 24px}.vault-table{width:100%;border-collapse:collapse;min-width:760px}.vault-table th,.vault-table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--border-color,rgba(159, 168, 250, .12));font-size:.86rem}.vault-table th{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted,#9da1c0);background:rgba(30, 34, 66, .16)}.vault-table tbody tr:last-child td{border-bottom:0}.vault-table tbody tr:hover{background:rgba(159, 168, 250, .035)}
.vault-name-cell{display:flex;align-items:center;gap:10px;min-width:200px}.vault-item-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:0 0 32px;border-radius:9px;background:rgba(159, 168, 250, .1);color:var(--accent,#9fa8fa)}.vault-item-icon.is-folder{background:rgba(159, 168, 250, .14)}.vault-item-name{color:var(--text-primary,#ecedfa);font-weight:600;overflow-wrap:anywhere}.vault-name-cell a{text-decoration:none}.vault-name-cell a:hover{color:var(--accent,#9fa8fa)}
.vault-row-actions{display:flex;align-items:center;gap:12px}.vault-action-link{color:var(--accent,#9fa8fa);text-decoration:none;white-space:nowrap}.vault-menu{position:relative}.vault-menu summary{cursor:pointer;color:var(--text-muted,#acafc8);white-space:nowrap}.vault-menu-panel{position:absolute;z-index:10;right:0;top:26px;width:min(320px,80vw);padding:14px;display:grid;gap:14px;background:var(--panel-bg,#0d0f1f);border:1px solid var(--border-color,rgba(159, 168, 250, .25));border-radius:12px;box-shadow:0 18px 45px rgba(0, 0, 0, .35)}.vault-menu-panel form{display:grid;gap:8px}.vault-menu-panel label{display:grid;gap:6px;font-size:.78rem;color:var(--text-muted,#9da1c0)}.vault-menu-panel button{justify-self:start;border:1px solid var(--border-color,rgba(159, 168, 250, .25));border-radius:8px;padding:7px 10px;background:rgba(159, 168, 250, .1);color:var(--text-primary,#ecedfa);cursor:pointer}.vault-menu-panel .vault-delete-button{color:#ff9caa;border-color:rgba(255, 120, 140, .3)}
@media(max-width:760px){.vault-intro{flex-direction:column;padding:22px}.vault-usage{width:100%;box-sizing:border-box}.vault-actions,.vault-upload-form,.vault-folder-form{width:100%}.vault-folder-form input{flex:1;min-width:130px}.vault-upload-form .button-primary,.vault-folder-form .button-secondary{min-height:40px}}



/* Den File Vault refresh: card grid, upload selection previews, floating menus, themed scrollbars */
.vault-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin:14px 0 28px;align-items:stretch}
.vault-card{position:relative;min-width:0;border:1px solid rgba(159, 168, 250, .18);border-radius:15px;background:rgba(11, 13, 26, .62);overflow:visible;transition:border-color .18s ease,transform .18s ease,background .18s ease}
.vault-card:hover{border-color:rgba(159, 168, 250, .42);background:rgba(16, 19, 40, .8);transform:translateY(-2px)}
.vault-card-preview{height:178px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border-radius:14px 14px 0 0;background:linear-gradient(145deg,rgba(159, 168, 250, .09),rgba(19, 22, 45, .5));text-decoration:none}
.vault-image-preview img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}.vault-image-preview:hover img{transform:scale(1.035)}
.vault-image-open{position:absolute;inset:auto 10px 10px auto;padding:6px 9px;border-radius:8px;background:rgba(7, 8, 18, .82);color:#f0f1fe;font-size:.75rem;opacity:0;transition:opacity .15s}.vault-image-preview:hover .vault-image-open,.vault-image-preview:focus-visible .vault-image-open{opacity:1}
.vault-folder-art svg{width:88px;height:72px;fill:#8b94e8;filter:drop-shadow(0 10px 18px rgba(0, 0, 0, .2))}.vault-folder-art .folder-flap{fill:#aab2fb}
.vault-file-art{width:68px;height:82px;border:1px solid rgba(170, 178, 251, .42);border-radius:9px;background:rgba(159, 168, 250, .1);display:flex;align-items:center;justify-content:center;color:#bbc1fb;font-weight:750;font-size:.72rem;letter-spacing:.04em;overflow:hidden;padding:5px;text-align:center}
.vault-card-info{padding:13px;display:flex;align-items:flex-start;gap:8px;justify-content:space-between;min-width:0}.vault-card-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;width:100%;min-width:0}.vault-card-title-wrap{display:flex;flex-direction:column;gap:7px;min-width:0}.vault-card-name{color:var(--text-primary,#ecedfa);font-size:.88rem;font-weight:650;line-height:1.35;overflow-wrap:anywhere;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.vault-card-name:hover{color:#b1b8fb}.vault-card-meta{font-size:.74rem;color:var(--text-muted,#9da1c0);line-height:1.35}
.vault-row-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}.vault-action-link{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:rgba(159, 168, 250, .08);font-size:1.1rem}.vault-menu{position:relative}.vault-menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;width:29px;height:28px;border-radius:8px;border:1px solid transparent;color:#c0c2d7;font-size:.82rem;letter-spacing:.05em}.vault-menu summary::-webkit-details-marker{display:none}.vault-menu[open] summary,.vault-menu summary:hover{background:rgba(159, 168, 250, .13);border-color:rgba(159, 168, 250, .22)}
.vault-menu-panel{position:absolute;z-index:100;right:0;top:calc(100% + 8px);width:min(320px,calc(100vw - 36px));max-height:min(70vh,560px);overflow-y:auto;overscroll-behavior:contain;padding:15px;display:grid;gap:15px;background:#0e1022;border:1px solid rgba(159, 168, 250, .3);border-radius:13px;box-shadow:0 20px 55px rgba(0, 0, 0, .55)}.vault-menu-panel form{display:grid;gap:8px}.vault-menu-panel label{display:grid;gap:6px;font-size:.78rem;color:var(--text-muted,#9da1c0)}.vault-menu-panel input,.vault-menu-panel select{width:100%;min-width:0}.vault-menu-panel button{justify-self:start;border:1px solid rgba(159, 168, 250, .25);border-radius:8px;padding:8px 11px;background:rgba(159, 168, 250, .1);color:var(--text-primary,#ecedfa);cursor:pointer}.vault-menu-panel .vault-delete-button{color:#ff9caa;border-color:rgba(255, 120, 140, .3)}
.vault-upload-form{position:relative}.vault-upload-queue{flex-basis:100%;width:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;margin-top:8px}.vault-upload-queue[hidden]{display:none}.vault-upload-preview{min-width:0;display:flex;align-items:center;gap:9px;padding:8px;border:1px solid rgba(159, 168, 250, .2);border-radius:10px;background:rgba(159, 168, 250, .06)}.vault-upload-preview img{width:42px;height:42px;object-fit:cover;border-radius:7px;flex:0 0 42px}.vault-upload-file-icon{width:42px;height:42px;flex:0 0 42px;border-radius:7px;background:rgba(159, 168, 250, .12);color:#bbc1fb;display:grid;place-items:center;font-size:.65rem;font-weight:700}.vault-upload-file-details{min-width:0;display:flex;flex-direction:column;gap:3px;flex:1}.vault-upload-file-name{font-size:.78rem;color:#ecedfa;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vault-upload-file-size{font-size:.7rem;color:#9da1c0}.vault-upload-remove{border:0;background:transparent;color:#ff9caa;cursor:pointer;padding:5px;font-size:1rem}.vault-upload-summary{grid-column:1/-1;color:#9da1c0;font-size:.75rem;padding:2px 1px}
html{scrollbar-color:rgba(159, 168, 250, .48) rgba(10, 11, 24, .85);scrollbar-width:thin}*{scrollbar-width:thin;scrollbar-color:rgba(159, 168, 250, .42) rgba(10, 11, 24, .7)}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-track{background:rgba(10, 11, 24, .75);border-radius:999px}*::-webkit-scrollbar-thumb{background:rgba(159, 168, 250, .36);border:2px solid rgba(10, 11, 24, .75);border-radius:999px}*::-webkit-scrollbar-thumb:hover{background:rgba(170, 178, 251, .65)}
@media(max-width:760px){.vault-grid{grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:11px}.vault-card-preview{height:145px}.vault-card-info{padding:10px}.vault-menu-panel{position:fixed;top:50%;left:50%;right:auto;transform:translate(-50%,-50%);width:min(360px,calc(100vw - 28px));max-height:78vh;z-index:999}.vault-upload-queue{grid-template-columns:1fr}}


.wssl-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:28px 0 24px;padding:30px;border:1px solid rgba(159, 168, 250, .24);border-radius:22px;background:linear-gradient(120deg,rgba(59, 65, 113, .25),rgba(16, 18, 38, .82));}
.wssl-hero h2{margin:0 0 8px;font-size:clamp(26px,3vw,34px);letter-spacing:-.04em}.wssl-hero p:not(.eyebrow){max-width:700px;color:var(--text-muted,#9ca0bf);margin:0;line-height:1.65}.wssl-hero-icon{display:grid;place-items:center;flex:0 0 76px;height:76px;border:1px solid rgba(159, 168, 250, .28);border-radius:22px;background:rgba(159, 168, 250, .1);color:#a9b2fb;font-weight:800;letter-spacing:.12em}
.wssl-form{padding:22px;border:1px solid var(--border-color,rgba(159, 168, 250, .22));border-radius:18px;background:rgba(10, 11, 24, .58)}.wssl-form>label{display:block;margin-bottom:10px;font-weight:650}.wssl-form-row{display:flex;gap:10px}.wssl-form-row input{min-width:0;flex:1;padding:13px 15px;border:1px solid var(--border-color,rgba(159, 168, 250, .25));border-radius:10px;background:var(--input-bg,#0d0f1f);color:var(--text-primary,#ecedfa);font:inherit}.wssl-form-row input:focus{outline:2px solid rgba(159, 168, 250, .35);outline-offset:1px}.wssl-privacy-note,.wssl-disclaimer{font-size:12px;color:var(--text-muted,#9ca0bf);line-height:1.6}.wssl-alert{margin-top:16px}.wssl-results{margin-top:30px}.wssl-results-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.wssl-results-heading h2{margin:0;overflow-wrap:anywhere}.wssl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.wssl-card{min-width:0;padding:20px;border:1px solid var(--border-color,rgba(159, 168, 250, .2));border-radius:16px;background:rgba(11, 13, 27, .72)}.wssl-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.wssl-category{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#a0a6dd;font-weight:750}.wssl-status{display:inline-flex;align-items:center;padding:5px 9px;border:1px solid transparent;border-radius:999px;font-size:11px;font-weight:750}.wssl-status-good{color:#8ce0b4;background:rgba(42, 151, 98, .12);border-color:rgba(87, 205, 145, .24)}.wssl-status-warn{color:#f1cb86;background:rgba(185, 130, 42, .12);border-color:rgba(240, 190, 94, .24)}.wssl-status-bad{color:#ff9baf;background:rgba(190, 54, 84, .12);border-color:rgba(255, 110, 145, .24)}.wssl-status-neutral{color:#bbbed3;background:rgba(145, 149, 185, .1);border-color:rgba(159, 168, 250, .18)}.wssl-card h3{margin:0 0 9px;font-size:17px}.wssl-card>p{margin:0;color:var(--text-muted,#9ca0bf);font-size:13px;line-height:1.65;overflow-wrap:anywhere}.wssl-card dl{display:grid;gap:0;margin:16px 0 0;border-top:1px solid rgba(159, 168, 250, .13)}.wssl-card dl>div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid rgba(159, 168, 250, .09);font-size:12px}.wssl-card dt{color:var(--text-muted,#9ca0bf)}.wssl-card dd{margin:0;text-align:right;overflow-wrap:anywhere;max-width:60%;color:var(--text-primary,#ecedfa)}.wssl-disclaimer{margin-top:18px}.wssl-empty{margin-top:26px}
@media(max-width:760px){.wssl-hero{padding:22px}.wssl-hero-icon{flex-basis:54px;height:54px;border-radius:16px}.wssl-grid{grid-template-columns:minmax(0,1fr)}.wssl-form-row{flex-direction:column}.wssl-form-row .button-primary{justify-content:center}.wssl-results-heading{align-items:flex-start}}


/* Den Game Hub — Milestone 1 */
.gamehub-intro {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 26px;
    margin: 24px 0;
    border: 1px solid rgba(139, 150, 249, .22);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(92, 107, 246, .12), rgba(15, 18, 38, .85));
}

.gamehub-intro h2 { margin: 5px 0 8px; }
.gamehub-intro p { max-width: 650px; }

.gamehub-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px;
    align-items: stretch;
    margin: 14px 0 28px;
}

.gamehub-card {
    min-width: 0;
    padding: 22px;
    border: 1px solid rgba(139, 150, 249, .22);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(21, 24, 49, .96), rgba(12, 14, 29, .96));
    box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
}

.gamehub-card-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 12px;
}

.gamehub-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 14px;
    background: linear-gradient(145deg, #5b68db, #2a2f56);
    color: #ffffff;
    font-weight: 800;
}

.gamehub-card h3 { margin: 0; font-size: 1.05rem; }
.gamehub-tagline { min-height: 42px; font-size: .88rem; opacity: .75; }

.gamehub-empty {
    padding: 15px;
    border: 1px dashed rgba(139, 150, 249, .25);
    border-radius: 12px;
    background: rgba(255, 255, 255, .025);
    font-size: .9rem;
    line-height: 1.6;
}

.gamehub-event {
    padding: 13px 0;
    border-top: 1px solid rgba(255, 255, 255, .09);
    overflow-wrap: anywhere;
}

.gamehub-event h4 { margin: 0 0 6px; font-size: .95rem; }
.gamehub-meta { font-size: .8rem; opacity: .75; line-height: 1.7; }
.gamehub-event a { color: #aeb6fb; text-decoration: underline; }

.gamehub-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.gamehub-notice,
.gamehub-error {
    padding: 12px 15px;
    margin-bottom: 16px;
    border-radius: 12px;
}

.gamehub-notice {
    background: rgba(88, 180, 130, .12);
    border: 1px solid rgba(88, 180, 130, .28);
}

.gamehub-error {
    background: rgba(220, 80, 100, .12);
    border: 1px solid rgba(220, 80, 100, .28);
}

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

@media (max-width: 700px) {
    .gamehub-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .gamehub-intro {
        align-items: flex-start;
        flex-direction: column;
    }
}

.gamehub-icon-large {
    width: 66px;
    height: 66px;
    font-size: 1.25rem;
}


/*Nikke*/
.gamehub-intro {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 26px;
    border: 1px solid rgba(139, 150, 249, .22);
    border-radius: 20px;
    background:
        radial-gradient(ellipse at 80% 10%, rgba(92, 107, 246, .18), transparent 55%),
        rgba(15, 18, 38, .72);
    margin-bottom: 28px;
}

.gamehub-intro h2 { margin: 5px 0 8px; }
.gamehub-intro p { max-width: 650px; }

.gamehub-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.gamehub-card {
    min-width: 0;
    padding: 22px;
    border: 1px solid rgba(139, 150, 249, .2);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(21, 24, 49, .96), rgba(12, 14, 29, .96));
    box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
}

.gamehub-card-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 12px;
}

.gamehub-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(145deg, #5b68db, #2a2f56);
    color: #ffffff;
    font-weight: 800;
    flex-shrink: 0;
}

.gamehub-card h3 { margin: 0; font-size: 1.05rem; }
.gamehub-tagline { font-size: .88rem; opacity: .75; min-height: 42px; }

.gamehub-event {
    padding: 13px 0;
    border-top: 1px solid rgba(255, 255, 255, .09);
    overflow-wrap: anywhere;
}

.gamehub-event h4 { margin: 0 0 6px; font-size: .95rem; }
.gamehub-meta { font-size: .8rem; opacity: .75; line-height: 1.7; }
.gamehub-event a { color: #aeb6fb; text-decoration: underline; }
.gamehub-post {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 0;
    border-top: 1px solid rgba(255, 255, 255, .09);
}

.gamehub-post > a:first-child {
    display: block;
    width: 100%;
}

.gamehub-post-thumb {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
}
.gamehub-post h4 { margin: 0 0 7px; font-size: .92rem; line-height: 1.4; }
.gamehub-post a { color: #aeb6fb; text-decoration: none; }
.gamehub-post a:hover { text-decoration: underline; }
.gamehub-post-summary { margin: 0 0 7px; font-size: .82rem; opacity: .78; }
@media (max-width: 420px) {
    .gamehub-post {
        grid-template-columns: 1fr;
    }

    .gamehub-post-thumb {
        width: 100%;
    }
}

.gamehub-empty {
    padding: 15px;
    border: 1px dashed rgba(139, 150, 249, .22);
    border-radius: 12px;
    background: rgba(255, 255, 255, .025);
    font-size: .9rem;
    opacity: .8;
}

.gamehub-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.gamehub-notice,
.gamehub-error {
    padding: 12px 15px;
    border-radius: 12px;
    margin-bottom: 16px;
}

.gamehub-notice {
    background: rgba(88, 180, 130, .12);
    border: 1px solid rgba(88, 180, 130, .28);
}

.gamehub-error {
    background: rgba(220, 80, 100, .12);
    border: 1px solid rgba(220, 80, 100, .28);
}

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

@media (max-width: 700px) {
    .gamehub-grid { grid-template-columns: 1fr; }
    .gamehub-intro { align-items: flex-start; flex-direction: column; }
}


.gamehub-event-image-link {
    display: block;
    margin-bottom: 12px;
    overflow: hidden;
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
}

.gamehub-event-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
    transition: transform .2s ease;
}

.gamehub-event-image-link:hover .gamehub-event-image {
    transform: scale(1.03);
}

.gamehub-event-image-genshin {
    object-fit: contain;
    aspect-ratio: auto;
    max-height: 320px;
}

/* Den Overview: compact quick launch and Genshin banner showcase */
.overview-greeting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 8px 0 30px;
    padding: 28px 30px;
    border: 1px solid var(--border, #292f50);
    border-radius: 20px;
    background: linear-gradient(115deg, rgba(37, 41, 74, .72), rgba(17, 21, 43, .92) 65%, rgba(12, 14, 30, .96));
}
.overview-greeting h2 { margin: 5px 0 8px; font-size: clamp(1.5rem, 2.5vw, 2.15rem); letter-spacing: -.035em; }
.overview-greeting .muted { margin: 0; }
.overview-greeting-mark { color: #c6c9ff; font-size: 3.6rem; font-weight: 800; letter-spacing: -.1em; opacity: .85; padding-right: 12px; }
.overview-greeting-mark span { color: var(--accent, #a5acf5); }
.overview-section-heading { margin-bottom: 14px; }
.overview-section-heading h2 { margin-bottom: 0; }
.quick-launch-section, .overview-banners { margin-bottom: 32px; }
.quick-launch-bar {
    display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap;
    width: 100%; max-width: none; padding: 10px; justify-content: space-evenly;
    border: 1px solid var(--border, #292f50); border-radius: 18px;
    background: rgba(17, 21, 43, .78);
}
.quick-launch-item {
    display: flex; flex: 1 1 76px; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
    min-width: 64px; min-height: 78px; padding: 7px 4px; border-radius: 12px;
    color: var(--muted, #929bb8); text-decoration: none; font-size: .72rem; font-weight: 600;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.quick-launch-item:hover, .quick-launch-item:focus-visible { background: rgba(165, 172, 245, .12); color: var(--text, #e7eaf2); transform: translateY(-2px); outline: none; }
.quick-launch-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(165, 172, 245, .18); border-radius: 12px; background: linear-gradient(145deg, #292f58, #191e3a); color: #c6c9ff; font-size: 1.35rem; }
.overview-text-link { color: var(--accent, #a5acf5); font-size: .84rem; text-decoration: none; }
.overview-text-link:hover { text-decoration: underline; }
.overview-banner-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.overview-banner-card { min-width: 0; overflow: hidden; padding: 14px; border: 1px solid var(--border, #292f50); border-radius: 18px; background: linear-gradient(155deg, rgba(25, 30, 58, .9), rgba(13, 16, 32, .96)); }
.overview-banner-label { margin-bottom: 12px; color: var(--accent, #a5acf5); font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.overview-banner-image-link { display: block; overflow: hidden; border-radius: 12px; background: rgba(0, 0, 0, .18); }
.overview-banner-image { display: block; width: 100%; max-height: 290px; aspect-ratio: 16 / 9; object-fit: contain; transition: transform .2s ease; }
.overview-banner-image-link:hover .overview-banner-image { transform: scale(1.02); }
.overview-banner-card h3 { margin: 12px 2px 3px; font-size: .98rem; line-height: 1.45; }
.overview-banner-empty { display: flex; min-height: 190px; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 22px; border: 1px dashed rgba(165, 172, 245, .2); border-radius: 12px; text-align: center; background: rgba(8, 10, 20, .35); }
.overview-banner-empty p { margin: 0; color: var(--text, #e7eaf2); }
.overview-banner-empty span:last-child { color: var(--muted, #929bb8); font-size: .78rem; }
.overview-banner-empty-icon { color: var(--accent, #a5acf5); font-size: 2rem; }
.overview-banner-note { margin: 12px 2px 0; color: var(--muted, #929bb8); font-size: .75rem; line-height: 1.5; }
/* Expandable Game Hub sidebar navigation */
.nav-expandable { margin: 0; }
.nav-expandable > summary { display: flex; align-items: center; list-style: none; cursor: pointer; }
.nav-expandable > summary::-webkit-details-marker { display: none; }
.nav-expandable-label { flex: 1; }
.nav-chevron { margin-left: auto; font-size: 1rem; transition: transform .18s ease; }
.nav-expandable[open] .nav-chevron { transform: rotate(180deg); }
.nav-subitems { display: grid; gap: 3px; margin: 4px 0 8px 34px; padding-left: 12px; border-left: 1px solid var(--border, #292f50); }
.nav-subitem { display: block; padding: 8px 10px; border-radius: 8px; color: var(--muted, #929bb8); text-decoration: none; font-size: .84rem; transition: color .15s ease, background .15s ease; }
.nav-subitem:hover, .nav-subitem:focus-visible { color: var(--text, #e7eaf2); background: rgba(165, 172, 245, .1); outline: none; }
.gamehub-card[id] { scroll-margin-top: 24px; }
@media (max-width: 760px) {
    .overview-greeting { padding: 22px; }
    .overview-banner-grid { grid-template-columns: 1fr; }
    .quick-launch-bar { width: 100%; justify-content: space-around; }
    .quick-launch-item { width: 66px; }
}


/* Den Game Hub: single-game announcement feed layout */
.gamehub-grid.gamehub-grid-single {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    max-width: none;
}
.gamehub-grid.gamehub-grid-single > .gamehub-card {
    width: 100%;
    min-width: 0;
}
.gamehub-grid-single .gamehub-post {
    display: grid !important;
    grid-template-columns: minmax(240px, 38%) minmax(0, 1fr) !important;
    align-items: start;
    gap: 22px;
    min-width: 0;
}
.gamehub-grid-single .gamehub-post > a {
    display: block;
    min-width: 0;
    width: 100%;
}
.gamehub-grid-single .gamehub-post-thumb {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.gamehub-grid-single .gamehub-post > div,
.gamehub-grid-single .gamehub-event-content {
    min-width: 0;
    overflow-wrap: anywhere;
}
.gamehub-grid-single .gamehub-event-layout {
    display: grid;
    grid-template-columns: minmax(240px, 38%) minmax(0, 1fr);
    align-items: start;
    gap: 22px;
}
.gamehub-grid-single .gamehub-event-image-link {
    width: 100%;
    min-width: 0;
    margin: 0;
    align-self: start;
}
.gamehub-grid-single .gamehub-event-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.gamehub-grid-single .gamehub-event-image-genshin {
    object-fit: contain;
    aspect-ratio: auto;
    max-height: 320px;
}
.gamehub-grid-single .gamehub-event-content h4 {
    margin-top: 0;
    overflow-wrap: anywhere;
}
.gamehub-grid-single .gamehub-event-content p {
    overflow-wrap: anywhere;
}
@media (max-width: 760px) {
    .gamehub-grid-single .gamehub-post,
    .gamehub-grid-single .gamehub-event-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .gamehub-grid-single .gamehub-post-thumb,
    .gamehub-grid-single .gamehub-event-image {
        max-width: 100%;
    }
}



:root {
    color-scheme: dark;
    font-family: Inter, "Segoe UI", sans-serif;
    background: #080a14;
    color: #e9eaf7;
    font-synthesis: none;
    text-rendering: optimizeLegibility;

    --bg: #080a14;
    --panel: #101220;
    --panel-raised: #17192c;
    --border: #25294a;
    --text: #e9eaf7;
    --muted: #999cb8;
    --accent: #a8b0fa;
    --accent-bg: #25294a;
}



* {
    box-sizing: border-box;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    background: var(--bg);
    color: var(--text);
}

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

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* Shared branding */

.brand-line {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    width: fit-content;
}

.brand-icon {
    display: grid;
    width: 39px;
    height: 39px;
    place-items: center;
    border: 1px solid #373d6a;
    border-radius: 12px;
    background: linear-gradient(145deg, #25294a, #12152b);
    color: #bac0fb;
    font-size: 19px;
    font-weight: 750;
}

.brand-name {
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -1.2px;
}

.brand-period {
    color: var(--accent);
}

.eyebrow {
    margin: 0;
    color: #8b90b6;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.16em;
}

/* Login page */

.login-body {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 36px 18px;
    background:
        radial-gradient(ellipse at 50% 35%, #151932 0%, transparent 53%),
        var(--bg);
}

.login-layout {
    display: flex;
    width: min(440px, 100%);
    flex-direction: column;
    align-items: center;
}

.login-layout > .brand-line {
    margin-bottom: 30px;
}

.login-card {
    width: 100%;
    padding: 34px;
    border: 1px solid var(--border);
    border-radius: 19px;
    background: rgba(12, 14, 29, 0.96);
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.25);
}

.login-card h1 {
    margin: 13px 0 8px;
    font-size: 31px;
    font-weight: 650;
    letter-spacing: -1.2px;
}

.muted {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

.login-form {
    display: flex;
    flex-direction: column;
    margin-top: 28px;
}

.login-form label {
    margin: 0 0 8px;
    color: #d6d8e8;
    font-size: 12px;
    font-weight: 650;
}

.login-form input {
    width: 100%;
    height: 45px;
    margin-bottom: 20px;
    padding: 0 13px;
    border: 1px solid #25294a;
    border-radius: 9px;
    background: #090b17;
    color: var(--text);
    outline: none;
}

.login-form input:focus {
    border-color: #717ff8;
    box-shadow: 0 0 0 3px rgba(113, 127, 248, 0.12);
}

.button-primary {
    display: flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 3px;
    border: 1px solid #919bf9;
    border-radius: 9px;
    background: #96a0fa;
    color: #0e1022;
    font-size: 13px;
    font-weight: 750;
    transition: background 150ms ease, transform 150ms ease;
}

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

.alert-error {
    margin-top: 20px;
    padding: 12px 13px;
    border: 1px solid #713b46;
    border-radius: 9px;
    background: #2a171e;
    color: #ffb5bf;
    font-size: 12px;
    line-height: 1.6;
}

.login-footnote {
    margin: 23px 0 0;
    color: #7a81af;
    font-size: 11px;
    line-height: 1.6;
    text-align: center;
}

.page-footer {
    margin-top: 28px;
    color: #7980b3;
    font-size: 9px;
    font-weight: 650;
    letter-spacing: 0.14em;
}

/* Main application layout */

.app-body {
    background:
        radial-gradient(ellipse at 80% 0%, rgba(34, 38, 72, 0.14), transparent 40%),
        var(--bg);
}

.app-shell {
    display: grid;
    min-height: 100vh;
    grid-template-columns: 242px minmax(0, 1fr);
}

.sidebar {
    position: sticky;
    top: 0;
    display: flex;
    height: 100vh;
    flex-direction: column;
    padding: 25px 15px 18px;
    border-right: 1px solid #161933;
    background: #090b17;
}

.sidebar > .brand-line {
    margin: 0 8px 43px;
}

.nav-section {
    margin-bottom: 27px;
}

.nav-heading {
    margin: 0 10px 11px;
    color: #7980b3;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.14em;
}

.nav-item {
    display: flex;
    min-height: 39px;
    align-items: center;
    gap: 11px;
    margin: 3px 0;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #969abc;
    font-size: 12px;
}

.nav-item.active {
    border-color: #25294a;
    background: #14172f;
    color: #c6cbfc;
}

.nav-icon {
    display: inline-grid;
    width: 18px;
    place-items: center;
    color: #979bbc;
    font-size: 16px;
}

.nav-disabled {
    color: #5d659e;
    cursor: default;
}

.nav-disabled .nav-icon {
    color: #535a91;
}

.nav-soon {
    margin-left: auto;
    color: #575e97;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: 0.04em;
}

.sidebar-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 16px 9px 4px;
    border-top: 1px solid #161933;
    color: #7b81ae;
    font-size: 10px;
}

.connection-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #60d7a1;
    box-shadow: 0 0 10px rgba(96, 215, 161, 0.2);
}

.version-label {
    margin-left: auto;
    color: #7980b3;
}

.main-content {
    width: 100%;
    max-width: 1600px;
    min-width: 0;
    margin: 0 auto;
    padding: 34px clamp(22px, 4vw, 58px) 23px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 34px;
}

.topbar h1 {
    margin: 8px 0 0;
    font-size: 26px;
    font-weight: 650;
    letter-spacing: -0.8px;
}

.account-area {
    display: flex;
    align-items: center;
    gap: 10px;
}

.account-avatar {
    display: grid;
    width: 37px;
    height: 37px;
    place-items: center;
    border: 1px solid #333964;
    border-radius: 50%;
    background: #181b37;
    color: #bcc2fb;
    font-size: 13px;
    font-weight: 700;
}

.account-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.account-name {
    color: #e3e5f0;
    font-size: 12px;
    font-weight: 650;
}

.account-role {
    color: #7a80ae;
    font-size: 10px;
}

.button-logout {
    margin-left: 10px;
    padding: 9px 12px;
    border: 1px solid #25294a;
    border-radius: 8px;
    background: #0d1021;
    color: #b1b4cb;
    font-size: 11px;
}

.button-logout:hover {
    border-color: #5e669f;
    color: white;
}

/* Dashboard welcome panel */

.welcome-panel {
    position: relative;
    overflow: hidden;
    padding: clamp(24px, 3vw, 39px);
    border: 1px solid #25294a;
    border-radius: 15px;
    background:
        radial-gradient(ellipse at 88% 15%, rgba(85, 92, 147, 0.20), transparent 42%),
        linear-gradient(115deg, #101328, #0d0f20);
}

.welcome-content {
    position: relative;
    z-index: 1;
    max-width: 560px;
}

.welcome-panel h2 {
    margin: 17px 0 12px;
    font-size: clamp(27px, 3vw, 39px);
    font-weight: 650;
    letter-spacing: -1.5px;
    line-height: 1.18;
}

.welcome-description {
    max-width: 500px;
    margin: 0;
    color: #a0a4c2;
    font-size: 13px;
    line-height: 1.85;
}

.environment-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 25px;
    padding: 9px 12px;
    border: 1px solid #272c52;
    border-radius: 999px;
    background: rgba(10, 12, 25, 0.55);
    color: #c1c5e8;
    font-size: 10px;
}

.welcome-symbol {
    position: absolute;
    top: -37px;
    right: 20px;
    color: rgba(137, 147, 233, 0.065);
    font-size: clamp(170px, 22vw, 300px);
    font-weight: 800;
    letter-spacing: -0.1em;
    line-height: 1;
    pointer-events: none;
}

/* Feature cards */

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 15px;
    margin: 37px 0 18px;
}

.section-heading h2 {
    margin: 7px 0 0;
    font-size: 19px;
    font-weight: 650;
    letter-spacing: -0.4px;
}

.section-count {
    padding-bottom: 3px;
    color: #7a80af;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

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

.feature-card {
    display: flex;
    min-height: 205px;
    flex-direction: column;
    padding: 21px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: linear-gradient(145deg, #0d0f20, #0b0d1b);
    transition: border-color 150ms ease, transform 150ms ease;
}

.feature-card:hover {
    transform: translateY(-2px);
    border-color: #2d325b;
}

.feature-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.feature-icon {
    display: inline-grid;
    min-width: 40px;
    height: 36px;
    place-items: center;
    padding: 0 7px;
    border: 1px solid #282d53;
    border-radius: 9px;
    background: #151932;
    color: #adb5fb;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.feature-icon-mail {
    border-color: #2f345e;
    background: #191c38;
    color: #bbc1fb;
}

.feature-icon-notes {
    border-color: #2e335c;
    background: #191d39;
    color: #bcc2fb;
}

.feature-icon-files {
    border-color: #25294a;
    background: #1a2d2b;
    color: #a8dfcd;
}

.feature-status {
    color: #7b81ae;
    font-size: 9px;
}

.feature-card h3 {
    margin: 20px 0 8px;
    font-size: 15px;
    font-weight: 650;
}

.feature-card p {
    margin: 0 0 20px;
    color: #8c91b6;
    font-size: 11px;
    line-height: 1.8;
}

.feature-footer {
    margin-top: auto;
    color: #7a81af;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: 0.11em;
}

.dashboard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 28px;
    padding-top: 17px;
    border-top: 1px solid #161933;
    color: #797faf;
    font-size: 9px;
}

/* Smaller desktop windows */

@media (max-width: 900px) {
    .app-shell {
        grid-template-columns: 205px minmax(0, 1fr);
    }

    .sidebar {
        padding-right: 10px;
        padding-left: 10px;
    }

    .main-content {
        padding-right: 22px;
        padding-left: 22px;
    }

    .account-details {
        display: none;
    }

    .welcome-symbol {
        right: -25px;
    }
}

@media (max-width: 650px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
        height: auto;
    }

    .sidebar > .brand-line {
        margin-bottom: 20px;
    }

    .nav-section {
        margin-bottom: 12px;
    }

    .sidebar-bottom {
        margin-top: 10px;
    }

    .main-content {
        padding: 22px 15px;
    }

    .topbar {
        align-items: start;
    }

    .topbar h1 {
        font-size: 22px;
    }

    .welcome-symbol {
        display: none;
    }

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

    .login-card {
        padding: 25px 21px;
    }
}:root {
    color-scheme: dark;
    font-family: Inter, "Segoe UI", sans-serif;
    background: #080a14;
    color: #e9eaf7;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    background:
        radial-gradient(ellipse at 50% 42%, #13162e 0%, transparent 55%),
        #070812;
}

.welcome {
    width: min(560px, calc(100% - 40px));
    text-align: center;
    padding: 48px 24px;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 28px;
    border: 1px solid #323863;
    border-radius: 17px;
    background: #151831;
    color: #a4acfa;
    font-size: 28px;
    font-weight: 700;
}

.eyebrow {
    color: #868bb3;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
}

h1 {
    margin: 14px 0;
    font-size: clamp(48px, 10vw, 76px);
    letter-spacing: -0.07em;
}

h1 span {
    color: #8490f9;
}

.subtitle {
    color: #999dbd;
    font-size: 15px;
}

.status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 32px;
    padding: 11px 15px;
    border: 1px solid #263b35;
    border-radius: 999px;
    background: #111c1a;
    color: #b3dccc;
    font-size: 12px;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #64d6a2;
}

.next-step {
    margin-top: 48px;
    color: #797fb2;
    font-size: 12px;
}



/* ===========================
   Nexus Notes Module
   =========================== */

.notes-page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
}

.notes-page-heading h2 {
    margin: 10px 0 8px;
    font-size: 30px;
    font-weight: 650;
    letter-spacing: -1px;
}

.notes-muted {
    color: var(--muted, #8086b1);
    font-size: 12px;
    line-height: 1.8;
}

.notes-success {
    margin-bottom: 20px;
    padding: 12px 15px;
    border: 1px solid #285541;
    border-radius: 9px;
    background: #11251c;
    color: #a8e4c3;
    font-size: 12px;
}

.notes-alert {
    margin-bottom: 20px;
}

.notes-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
    padding: 12px;
    border: 1px solid var(--border, #191d39);
    border-radius: 12px;
    background: var(--panel, #0c0e1d);
}

.notes-search-wrap {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: 8px;
}

.search-symbol {
    padding-left: 4px;
    color: #888db4;
    font-size: 22px;
}

.notes-input,
.notes-textarea,
.notes-select {
    width: 100%;
    border: 1px solid #25294a;
    border-radius: 8px;
    background: #090b17;
    color: #e7e8f2;
    font: inherit;
    font-size: 12px;
}

.notes-input,
.notes-select {
    min-height: 41px;
    padding: 0 12px;
}

.notes-input:focus,
.notes-textarea:focus,
.notes-select:focus {
    border-color: #717ff8;
    outline: none;
    box-shadow: 0 0 0 3px rgba(113, 127, 248, 0.1);
}

.notes-search {
    min-width: 0;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.notes-search:focus {
    border-color: transparent;
    box-shadow: none;
}

.notes-select {
    width: auto;
    max-width: 190px;
}

.button-secondary {
    display: inline-flex;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border: 1px solid #25294a;
    border-radius: 8px;
    background: #0f1125;
    color: #c1c4d9;
    font-size: 11px;
    text-decoration: none;
    white-space: nowrap;
}

.button-secondary:hover {
    border-color: #474e81;
    color: #ffffff;
}

.filter-button {
    min-height: 41px;
}

.new-note-button {
    display: inline-flex;
    min-height: 41px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 15px;
    border: 1px solid #919bf9;
    border-radius: 9px;
    background: #96a0fa;
    color: #0e1022;
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
}

.new-note-button:hover {
    background: #b4bbfb;
}

.notes-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin: 0 0 15px;
}

.notes-list-heading h2 {
    margin: 0;
    font-size: 17px;
}

.notes-list-heading > span {
    color: #8086b1;
    font-size: 10px;
}

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

.note-card {
    display: flex;
    min-width: 0;
    min-height: 225px;
    flex-direction: column;
    padding: 20px;
    border: 1px solid #191d39;
    border-radius: 12px;
    background: linear-gradient(145deg, #0d0f20, #0b0d1b);
}

.note-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.note-type-label {
    color: #a2abfa;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.note-date {
    color: #7980af;
    font-size: 9px;
}

.note-card h3 {
    overflow-wrap: anywhere;
    margin: 17px 0 8px;
    font-size: 15px;
    line-height: 1.5;
}

.note-card h3 a:hover,
.note-edit-link:hover {
    color: #919bf9;
}

.note-preview {
    display: -webkit-box;
    overflow: hidden;
    margin: 0 0 14px;
    color: #8c91b6;
    font-size: 11px;
    line-height: 1.8;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.note-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 17px;
}

.note-tag {
    padding: 5px 8px;
    border: 1px solid #25294a;
    border-radius: 5px;
    background: #13162d;
    color: #adb4f3;
    font-size: 9px;
}

.note-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 13px;
    border-top: 1px solid #181c37;
}

.note-card-actions form {
    margin: 0;
}

.note-edit-link {
    color: #acb4fb;
    font-size: 11px;
    font-weight: 650;
}

.note-delete-button {
    padding: 6px 9px;
    border: 1px solid #50303a;
    border-radius: 6px;
    background: #0f1124;
    color: #e7a2ad;
    font-size: 10px;
    cursor: pointer;
}

.notes-empty {
    display: flex;
    min-height: 270px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 35px 22px;
    border: 1px dashed #25294a;
    border-radius: 13px;
    background: rgba(12, 14, 29, 0.6);
    text-align: center;
}

.empty-note-icon {
    display: grid;
    width: 47px;
    height: 47px;
    place-items: center;
    margin-bottom: 15px;
    border: 1px solid #282d53;
    border-radius: 12px;
    background: #151932;
    color: #adb5fb;
    font-size: 21px;
}

.notes-empty h3 {
    margin: 0 0 9px;
    font-size: 16px;
}

.notes-empty p {
    max-width: 420px;
    margin: 0 0 21px;
    color: #8086b1;
    font-size: 12px;
    line-height: 1.8;
}

.note-editor {
    display: flex;
    flex-direction: column;
    padding: clamp(20px, 3vw, 32px);
    border: 1px solid #191d39;
    border-radius: 13px;
    background: #0c0e1d;
}

.note-editor label {
    margin: 18px 0 8px;
    color: #d6d8e8;
    font-size: 12px;
    font-weight: 650;
}

.note-editor label:first-of-type {
    margin-top: 0;
}

.notes-textarea {
    min-height: 290px;
    padding: 12px;
    resize: vertical;
    line-height: 1.8;
}

.field-hint {
    margin: 8px 0 0;
    color: #7a80af;
    font-size: 10px;
}

.editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 25px;
    padding-top: 18px;
    border-top: 1px solid #191d39;
}

.editor-save {
    min-width: 115px;
    padding: 0 15px;
}

@media (max-width: 850px) {
    .notes-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .notes-page-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .notes-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .notes-select {
        width: 100%;
        max-width: none;
    }

    .notes-search-wrap {
        min-height: 40px;
    }

    .filter-button {
        width: 100%;
    }
}


/* ===========================
   Nexus Domain & DNS Toolkit
   =========================== */

.domain-intro {
    position: relative;
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
    padding: 27px 30px;
    border: 1px solid #25294a;
    border-radius: 14px;
    background:
        radial-gradient(ellipse at 90% 20%, rgba(85, 92, 147, 0.2), transparent 45%),
        linear-gradient(115deg, #101328, #0d0f20);
}

.domain-intro h2 {
    margin: 12px 0 9px;
    font-size: clamp(25px, 3vw, 34px);
    font-weight: 650;
    letter-spacing: -1.1px;
}

.domain-intro p:not(.eyebrow) {
    max-width: 560px;
    margin: 0;
    color: #a0a4c2;
    font-size: 12px;
    line-height: 1.8;
}

.domain-intro-symbol {
    color: rgba(137, 147, 233, 0.15);
    font-size: clamp(40px, 7vw, 86px);
    font-weight: 800;
    letter-spacing: -0.08em;
}

.domain-search-panel {
    margin-bottom: 28px;
    padding: 21px;
    border: 1px solid var(--border, #191d39);
    border-radius: 12px;
    background: var(--panel, #0c0e1d);
}

.domain-search-panel > label {
    display: block;
    margin-bottom: 9px;
    color: #d6d8e8;
    font-size: 11px;
    font-weight: 650;
}

.domain-search-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.domain-input,
.domain-select {
    min-width: 0;
    min-height: 45px;
    border: 1px solid #25294a;
    border-radius: 8px;
    background: #090b17;
    color: var(--text, #e7e8f2);
    font: inherit;
    font-size: 12px;
}

.domain-input {
    flex: 1;
    padding: 0 13px;
}

.domain-select {
    width: 100px;
    padding: 0 10px;
}

.domain-input:focus,
.domain-select:focus {
    border-color: #717ff8;
    outline: none;
    box-shadow: 0 0 0 3px rgba(113, 127, 248, 0.1);
}

.domain-submit {
    min-height: 45px;
    flex-shrink: 0;
    padding: 0 16px;
    border-radius: 8px;
}

.domain-hint {
    margin: 10px 0 0;
    color: #797fae;
    font-size: 10px;
    line-height: 1.7;
}

.domain-hint code,
.domain-empty code {
    color: #b6bcf1;
}

.domain-alert {
    margin-bottom: 20px;
}

.domain-result-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin: 28px 0 16px;
}

.domain-result-heading h2 {
    margin: 8px 0 0;
    overflow-wrap: anywhere;
    font-size: 21px;
    font-weight: 650;
    letter-spacing: -0.4px;
}

.domain-record-badge,
.domain-panel-icon {
    padding: 7px 9px;
    border: 1px solid #272c52;
    border-radius: 6px;
    background: #14172f;
    color: #aeb6fb;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.domain-result-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
}

.domain-panel {
    min-width: 0;
    padding: 21px;
    border: 1px solid var(--border, #191d39);
    border-radius: 12px;
    background: linear-gradient(145deg, #0d0f20, #0b0d1b);
}

.domain-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 21px;
}

.domain-panel-heading h3 {
    margin: 7px 0 0;
    font-size: 16px;
    font-weight: 650;
}

.domain-panel-icon {
    color: #b0b3cb;
    background: #101327;
    border-color: #25294a;
}

.domain-info-list {
    display: flex;
    flex-direction: column;
}

.domain-info-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 0;
    border-bottom: 1px solid #191d39;
}

.domain-info-row:first-child {
    padding-top: 0;
}

.domain-info-row > span {
    color: #8086b1;
    font-size: 10px;
}

.domain-info-row > strong {
    overflow-wrap: anywhere;
    color: #e3e5f0;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.65;
}

.domain-subheading {
    margin: 20px 0 10px;
    color: #bfc2d7;
    font-size: 11px;
    font-weight: 700;
}

.domain-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.domain-chip {
    max-width: 100%;
    padding: 6px 8px;
    overflow-wrap: anywhere;
    border: 1px solid #272c52;
    border-radius: 6px;
    background: #14172f;
    color: #b7bdf0;
    font-size: 9px;
}

.domain-footnote {
    margin: 18px 0 0;
    color: #7a80af;
    font-size: 10px;
    line-height: 1.8;
}

.domain-muted {
    color: #8086b1;
    font-size: 11px;
    line-height: 1.7;
}

.domain-unavailable {
    padding: 16px;
    border: 1px solid #25294a;
    border-radius: 9px;
    background: #0d0f1f;
}

.domain-unavailable strong {
    display: block;
    margin-bottom: 8px;
    color: #dbddf4;
    font-size: 12px;
}

.domain-unavailable p {
    margin: 5px 0 0;
    color: #898eb5;
    font-size: 11px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.dns-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 15px;
}

.dns-status-row > span:first-child {
    color: #8086b1;
    font-size: 10px;
}

.dns-status-pill {
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 750;
}

.dns-status-ok {
    border: 1px solid #285541;
    background: #11251c;
    color: #a8e4c3;
}

.dns-status-warning {
    border: 1px solid #6a4e2c;
    background: #291f14;
    color: #efc38a;
}

.dns-record-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dns-record {
    min-width: 0;
    padding: 12px;
    border: 1px solid #1d213f;
    border-radius: 8px;
    background: #0a0c18;
}

.dns-record-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
    color: #939cf0;
    font-size: 9px;
    font-weight: 700;
}

.dns-record-meta span:last-child {
    color: #7a80af;
    font-weight: 400;
}

.dns-record-name {
    margin-bottom: 7px;
    color: #c4c6da;
    font-size: 10px;
    overflow-wrap: anywhere;
}

.dns-record-value {
    display: block;
    color: #a8d8c1;
    font-family: Consolas, "Courier New", monospace;
    font-size: 11px;
    line-height: 1.75;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.domain-empty {
    display: flex;
    min-height: 250px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    border: 1px dashed #25294a;
    border-radius: 13px;
    background: rgba(12, 14, 29, 0.6);
    text-align: center;
}

.domain-empty-icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    margin-bottom: 15px;
    border: 1px solid #282d53;
    border-radius: 12px;
    background: #151932;
    color: #adb5fb;
    font-size: 27px;
}

.domain-empty h3 {
    margin: 0 0 8px;
    font-size: 16px;
}

.domain-empty p {
    max-width: 440px;
    margin: 0 0 13px;
    color: #8086b1;
    font-size: 12px;
    line-height: 1.8;
}

.domain-empty > span {
    color: #7a80ae;
    font-size: 10px;
}

@media (max-width: 950px) {
    .domain-result-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .domain-search-row {
        flex-wrap: wrap;
    }

    .domain-input {
        flex-basis: 100%;
    }

    .domain-select {
        flex: 1;
    }

    .domain-submit {
        flex: 2;
    }

    .domain-intro-symbol {
        display: none;
    }
}

/* Shared desktop application layout */
@media (min-width: 1000px) {
    .app-shell {
        grid-template-columns: 250px minmax(0, 1fr);
        min-height: 100vh;
    }

    .sidebar {
        position: sticky;
        top: 0;
        width: 250px;
        min-width: 250px;
        height: 100vh;
    }

    .main-content {
        width: 100%;
        max-width: none;
        min-width: 0;
        margin: 0;
    }
}


/* Fix: keep the application shell full-width and consistent */
body.app-body {
    display: block;
    width: 100%;
    min-height: 100vh;
    margin: 0;
}

@media (min-width: 1000px) {
    body.app-body .app-shell {
        display: grid;
        width: 100%;
        max-width: none;
        min-height: 100vh;
        margin: 0;
        grid-template-columns: 250px minmax(0, 1fr);
        align-items: stretch;
    }

    body.app-body .sidebar {
        position: sticky;
        top: 0;
        width: auto;
        min-width: 0;
        height: 100vh;
        align-self: start;
    }

    body.app-body .main-content {
        width: 100%;
        max-width: none;
        min-width: 0;
        margin: 0;
    }
}


/* =========================================================
   Midnight Indigo — safe theme override
   Append this block to the VERY END of public/assets/css/app.css.
   It intentionally changes presentation only; no PHP behavior.
   ========================================================= */

:root {
    color-scheme: dark;
    --bg: #080a14;
    --panel: #101220;
    --panel-raised: #17192c;
    --border: #25294a;
    --text: #e9eaf7;
    --muted: #999cb8;
    --accent: #a8b0fa;
    --accent-bg: #25294a;
}

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

.app-body {
    background:
        radial-gradient(ellipse at 78% 0%, rgba(80, 91, 189, 0.16), transparent 38%),
        radial-gradient(ellipse at 5% 85%, rgba(44, 51, 117, 0.08), transparent 32%),
        var(--bg);
}

.login-body {
    background:
        radial-gradient(ellipse at 50% 25%, rgba(80, 91, 194, 0.20), transparent 50%),
        var(--bg);
}

/* Shared branding and headings */
.brand-icon {
    border-color: #454c7f;
    background: linear-gradient(145deg, #2a2f56, #12152b);
    color: #e1e3fd;
    box-shadow: 0 0 26px rgba(104, 115, 213, 0.10);
}

.brand-period,
.note-card h3 a:hover,
.note-edit-link:hover {
    color: var(--accent);
}

.eyebrow {
    color: #a2a6c3;
}

/* Sidebar */
.sidebar {
    border-right-color: #171b35;
    background: linear-gradient(180deg, #0d0f1f 0%, #0a0c18 100%);
}

.nav-heading {
    color: #787faf;
}

.nav-item {
    color: #a6aac5;
    transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}

.nav-item[href]:hover {
    border-color: #25294a;
    background: rgba(81, 88, 142, 0.12);
    color: #e9ebfe;
}

.nav-item.active {
    border-color: #393f6d;
    background: linear-gradient(100deg, rgba(82, 89, 144, 0.30), rgba(42, 48, 87, 0.18));
    color: #d4d8fd;
    box-shadow: inset 2px 0 0 #9fa8fa, 0 0 22px rgba(89, 99, 192, 0.07);
}

.nav-icon {
    color: #a5ace7;
}

.nav-disabled,
.nav-disabled .nav-icon {
    color: #5d649d;
}

.sidebar-bottom,
.dashboard-footer {
    border-color: #171b35;
}

.sidebar-bottom {
    color: #8f94b8;
}

/* Top bar and account controls */
.account-name {
    color: #e8eafa;
}

.account-avatar {
    border-color: #393f6d;
    background: linear-gradient(145deg, #1e2343, #13162c);
    color: #d3d7fd;
}

.button-logout,
.button-secondary {
    border-color: #25294a;
    background: #11142a;
    color: #c9ccdf;
}

.button-logout:hover,
.button-secondary:hover {
    border-color: #797fad;
    background: #171b35;
    color: #ffffff;
}

/* Primary actions */
.button-primary,
.new-note-button {
    border-color: #b1b8fb;
    background: linear-gradient(135deg, #acb4fb, #8791ec);
    color: #0e1022;
    box-shadow: 0 5px 18px rgba(104, 115, 213, 0.12);
}

.button-primary:hover,
.new-note-button:hover {
    border-color: #cacffc;
    background: linear-gradient(135deg, #c8cdfc, #9aa3f4);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline-color: var(--accent);
}

/* Dashboard and Domain & DNS hero panels */
.welcome-panel,
.domain-intro {
    border-color: #292f55;
    background:
        radial-gradient(ellipse at 88% 13%, rgba(119, 130, 231, 0.19), transparent 42%),
        radial-gradient(ellipse at 18% 100%, rgba(59, 66, 113, 0.13), transparent 48%),
        linear-gradient(115deg, #12152b, #0c0e1e 78%);
    box-shadow: inset 0 1px 0 rgba(226, 229, 254, 0.025);
}

.welcome-panel h2,
.domain-intro h2 {
    color: #eef0fe;
}

.welcome-description,
.domain-intro p:not(.eyebrow) {
    color: #b4b7ce;
}

.welcome-symbol,
.domain-intro-symbol {
    color: rgba(150, 159, 244, 0.13);
}

.environment-badge {
    border-color: #2c3159;
    background: rgba(11, 13, 26, 0.64);
    color: #ccd0ef;
}

/* Cards and panels used across Overview, Notes, and DNS */
.feature-card,
.note-card,
.note-editor,
.domain-search-panel,
.domain-panel {
    border-color: var(--border);
    background: linear-gradient(145deg, #0f1124, #0b0d1c);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
}

.feature-card:hover {
    border-color: #404778;
    box-shadow: 0 12px 30px rgba(55, 61, 107, 0.10);
}

.feature-icon,
.empty-note-icon,
.domain-empty-icon {
    border-color: #373d6a;
    background: #171a34;
    color: #bdc4fc;
}

.feature-icon-mail,
.feature-icon-notes,
.feature-icon-files {
    border-color: #373d6a;
    background: #171a34;
    color: #cdd1fc;
}

.feature-status,
.feature-footer,
.section-count {
    color: #8e93b8;
}

.feature-card p,
.note-preview,
.notes-muted,
.notes-list-heading > span {
    color: #a2a6c3;
}

/* Form controls */
.login-form input,
.notes-input,
.notes-textarea,
.notes-select,
.domain-input,
.domain-select {
    border-color: #25294a;
    background: #090b17;
    color: var(--text);
}

.login-form input:focus,
.notes-input:focus,
.notes-textarea:focus,
.notes-select:focus,
.domain-input:focus,
.domain-select:focus {
    border-color: #878fd8;
    box-shadow: 0 0 0 3px rgba(159, 168, 250, 0.13);
}

.notes-search {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.notes-search:focus {
    border-color: transparent;
    box-shadow: none;
}

.login-form label,
.domain-search-panel > label,
.note-editor label {
    color: #d9dbe9;
}

/* Notes tags, links, and empty state */
.note-type-label,
.note-edit-link {
    color: #bcc2fb;
}

.note-tag,
.domain-record-badge,
.domain-panel-icon,
.domain-chip {
    border-color: #2a2f56;
    background: #13162d;
    color: #cacffc;
}

.note-card-actions,
.editor-actions,
.domain-info-row {
    border-color: #1b1f3c;
}

.notes-empty,
.domain-empty {
    border-color: #272c51;
    background: rgba(13, 15, 31, 0.72);
}

/* DNS details */
.domain-info-row > strong {
    color: #e3e5f6;
}

.domain-info-row > span,
.domain-footnote,
.domain-muted,
.domain-hint,
.domain-empty p {
    color: #979cbd;
}

.dns-record {
    border-color: #25294a;
    background: #0a0c18;
}

.dns-record-meta {
    color: #b8bffb;
}

.dns-record-name {
    color: #c9ccdf;
}

.domain-unavailable {
    border-color: #25294a;
    background: #0d0f1f;
}

.domain-unavailable strong {
    color: #dee0f5;
}

/* Preserve success and warning colors as status signals. */
.notes-success,
.dns-status-ok {
    border-color: #285541;
    background: #11251c;
    color: #a8e4c3;
}

.alert-error {
    border-color: #713b46;
    background: #2a171e;
    color: #ffb5bf;
}

@media (prefers-reduced-motion: reduce) {
    .nav-item,
    .feature-card,
    .button-primary {
        transition: none;
    }
}


/* ===========================
   Mail Diagnostics module
   =========================== */

.mail-intro {
    position: relative;
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
    padding: 27px 30px;
    border: 1px solid color-mix(in srgb, var(--accent, #919bf9) 24%, var(--border, #191d39));
    border-radius: 14px;
    background:
        radial-gradient(ellipse at 91% 18%, rgba(127, 139, 248, 0.14), transparent 45%),
        linear-gradient(115deg, var(--panel-raised, #0f1125), var(--panel, #0c0e1d));
}

.mail-intro h2 {
    margin: 12px 0 9px;
    font-size: clamp(25px, 3vw, 34px);
    font-weight: 650;
    letter-spacing: -1.1px;
}

.mail-intro p:not(.eyebrow) {
    max-width: 560px;
    margin: 0;
    color: var(--muted, #8086b1);
    font-size: 12px;
    line-height: 1.8;
}

.mail-intro-symbol {
    color: color-mix(in srgb, var(--accent, #919bf9) 17%, transparent);
    font-size: clamp(68px, 9vw, 112px);
    font-weight: 800;
    letter-spacing: -0.08em;
    line-height: 1;
}

.mail-search-panel {
    margin-bottom: 28px;
    padding: 21px;
    border: 1px solid var(--border, #191d39);
    border-radius: 12px;
    background: var(--panel, #0c0e1d);
}

.mail-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 16px;
}

.mail-field {
    min-width: 0;
}

.mail-field label {
    display: block;
    margin-bottom: 9px;
    color: var(--text, #e7e8f2);
    font-size: 11px;
    font-weight: 650;
}

.mail-field label span {
    color: var(--muted, #8086b1);
    font-weight: 400;
}

.mail-input {
    width: 100%;
    min-height: 45px;
    padding: 0 13px;
    border: 1px solid var(--border, #25294a);
    border-radius: 8px;
    background: var(--bg, #070812);
    color: var(--text, #e7e8f2);
    font: inherit;
    font-size: 12px;
}

.mail-input:focus {
    border-color: var(--accent, #919bf9);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #919bf9) 13%, transparent);
}

.mail-field-hint {
    margin: 8px 0 0;
    color: var(--muted, #8086b1);
    font-size: 10px;
    line-height: 1.7;
}

.mail-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 17px;
    padding-top: 15px;
    border-top: 1px solid var(--border, #191d39);
}

.mail-form-actions .mail-field-hint {
    margin: 0;
}

.mail-form-actions .domain-submit {
    min-height: 43px;
}

.mail-result-heading {
    margin-top: 28px;
}

.mail-result-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px;
}

.mail-panel {
    min-width: 0;
    padding: 21px;
    border: 1px solid var(--border, #191d39);
    border-radius: 12px;
    background: linear-gradient(145deg, var(--panel-raised, #0f1125), var(--panel, #0c0e1d));
}

.mail-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
}

.mail-panel-heading h3 {
    margin: 7px 0 0;
    font-size: 16px;
    font-weight: 650;
}

.mail-status {
    flex-shrink: 0;
    padding: 6px 8px;
    border: 1px solid var(--border, #25294a);
    border-radius: 6px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.mail-status--good {
    border-color: #285541;
    background: #11251c;
    color: #a8e4c3;
}

.mail-status--warning {
    border-color: #6a4e2c;
    background: #291f14;
    color: #efc38a;
}

.mail-status--bad {
    border-color: #713b46;
    background: #2a171e;
    color: #ffb5bf;
}

.mail-status--info {
    border-color: #292f55;
    background: #101327;
    color: #bec1d6;
}

.mail-result-message {
    margin: 0 0 14px;
    color: var(--muted, #8086b1);
    font-size: 11px;
    line-height: 1.8;
}

.mail-mx-list,
.mail-record-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.mail-mx-record {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 12px;
    border: 1px solid var(--border, #191d39);
    border-radius: 8px;
    background: var(--bg, #070812);
}

.mail-priority {
    flex-shrink: 0;
    padding: 5px 6px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--accent, #919bf9) 11%, transparent);
    color: var(--accent, #919bf9);
    font-size: 9px;
    font-weight: 700;
}

.mail-mx-record code {
    padding-top: 4px;
    color: var(--text, #e7e8f2);
    font-size: 11px;
    overflow-wrap: anywhere;
}

.mail-record-value {
    display: block;
    max-width: 100%;
    margin: 0;
    padding: 12px;
    overflow-x: auto;
    border: 1px solid var(--border, #191d39);
    border-radius: 8px;
    background: var(--bg, #070812);
    color: #a8d8c1;
    font-family: Consolas, "Courier New", monospace;
    font-size: 10px;
    line-height: 1.8;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.mail-record-name {
    margin: 0 0 10px;
    overflow-wrap: anywhere;
    color: var(--muted, #8086b1);
    font-size: 10px;
}

.mail-record-name code,
.mail-guidance code,
.mail-empty code {
    color: var(--accent, #919bf9);
    overflow-wrap: anywhere;
}

.mail-mini-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.mail-mini-facts span {
    padding: 7px 9px;
    border: 1px solid var(--border, #191d39);
    border-radius: 7px;
    color: var(--muted, #8086b1);
    font-size: 9px;
}

.mail-mini-facts strong {
    margin-left: 4px;
    color: var(--text, #e7e8f2);
    font-weight: 700;
}

.mail-guidance {
    margin: 13px 0 0;
    color: var(--muted, #8086b1);
    font-size: 10px;
    line-height: 1.8;
}

.mail-subheading {
    margin: 13px 0 8px;
    color: var(--text, #e7e8f2);
    font-size: 10px;
    font-weight: 700;
}

.mail-disclaimer {
    margin: 18px 0 0;
    color: var(--muted, #8086b1);
    font-size: 10px;
    line-height: 1.8;
}

.mail-empty {
    margin-top: 4px;
}

@media (max-width: 950px) {
    .mail-result-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .mail-intro-symbol {
        display: none;
    }

    .mail-form-grid {
        grid-template-columns: 1fr;
    }

    .mail-form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .mail-form-actions .domain-submit {
        width: 100%;
    }

    .mail-panel-heading {
        align-items: flex-start;
    }
}


/* Context-aware repair suggestions */
.mail-recommendation {
    margin-top: 18px;
    padding: 14px;
    border: 1px solid rgba(159, 168, 250, 0.28);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(57, 63, 109, 0.18), rgba(13, 15, 31, 0.55));
}
.mail-recommendation > strong {
    display: block;
    color: #cbd0fc;
    font-size: 12px;
    font-weight: 700;
}
.mail-recommendation p {
    margin: 7px 0 0;
    color: var(--muted, #979cbd);
    font-size: 12px;
    line-height: 1.7;
}
.mail-recommendation-record {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    margin: 10px 0 0;
    padding: 10px;
    border: 1px solid rgba(159, 168, 250, 0.2);
    border-radius: 7px;
    background: rgba(5, 6, 13, 0.65);
    color: #daddfd;
    font-size: 11px;
}

/* Guided record repair workspace */
.mail-repair-wizard { margin: 28px 0; padding: 24px; border: 1px solid rgba(159, 168, 250, .22); border-radius: 16px; background: linear-gradient(145deg, rgba(30, 34, 66, .28), rgba(13, 15, 31, .82)); }
.mail-repair-heading, .mail-repair-output-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.mail-repair-heading h2 { margin: 0 0 8px; font-size: 22px; }
.mail-repair-heading p:not(.eyebrow) { max-width: 720px; margin: 0; color: var(--muted, #979cbd); font-size: 13px; line-height: 1.7; }
.mail-repair-step { flex:0 0 auto; padding:7px 10px; border:1px solid rgba(159, 168, 250, .25); border-radius:999px; color:#cbd0fc; font-size:10px; font-weight:700; letter-spacing:.07em; }
.mail-repair-form-grid { display:grid; grid-template-columns: .7fr 1.3fr .8fr; gap:14px; margin-top:22px; }
.mail-repair-wizard .mail-field { min-width:0; }
.mail-repair-wizard .mail-field label { display:block; margin-bottom:7px; color:var(--text, #ecedfa); font-size:12px; font-weight:650; }
.mail-repair-wizard .mail-field label span { color:var(--muted, #979cbd); font-weight:400; }
.mail-repair-wizard .mail-input { width:100%; min-width:0; box-sizing:border-box; padding:11px 12px; border:1px solid rgba(159, 168, 250, .22); border-radius:9px; background:rgba(5, 6, 13, .7); color:var(--text, #ecedfa); font:inherit; font-size:13px; }
.mail-repair-wizard .mail-input:focus { outline:2px solid rgba(159, 168, 250, .45); outline-offset:1px; }
.mail-repair-textarea { resize:vertical; margin-top:0; }
.mail-repair-current-field { margin-top:16px; }
.mail-repair-options { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px; }
.mail-repair-options[hidden], .mail-repair-selector-field[hidden], .mail-repair-output[hidden], .mail-repair-feedback[hidden] { display:none; }
.mail-repair-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.mail-repair-actions button, .mail-copy-button { border:1px solid rgba(159, 168, 250, .3); border-radius:9px; padding:10px 14px; background:#1e2242; color:#ecedfa; font-size:12px; font-weight:700; cursor:pointer; }
.mail-repair-actions button:disabled { opacity:.4; cursor:not-allowed; }
.mail-repair-actions .button-secondary { background:rgba(13, 15, 31, .9); }
.mail-repair-feedback { margin-top:15px; padding:13px 15px; border:1px solid rgba(159, 168, 250, .2); border-radius:10px; white-space:pre-line; color:var(--text, #ecedfa); font-size:12px; line-height:1.7; }
.mail-repair-feedback--warning { border-color:rgba(245, 184, 85, .4); background:rgba(120, 75, 12, .12); }
.mail-repair-feedback--error { border-color:rgba(255, 107, 129, .4); background:rgba(120, 20, 40, .13); }
.mail-repair-feedback--success { border-color:rgba(100, 210, 160, .35); background:rgba(20, 100, 70, .12); }
.mail-repair-output { margin-top:20px; padding-top:20px; border-top:1px solid rgba(159, 168, 250, .2); }
.mail-repair-output-heading h3 { margin:0; font-size:17px; }
.mail-repair-output-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:14px; margin-top:16px; }
.mail-copy-field { display:flex; align-items:stretch; gap:7px; }
.mail-copy-field .mail-input { flex:1; }
.mail-copy-field textarea { resize:vertical; }
.mail-copy-button { flex:0 0 auto; align-self:flex-start; }
.mail-copy-all { margin-top:12px; }
@media (max-width:760px) { .mail-repair-form-grid, .mail-repair-options, .mail-repair-output-grid { grid-template-columns:1fr; } .mail-repair-heading, .mail-repair-output-heading { flex-direction:column; } .mail-repair-wizard { padding:17px; } }


/* Den File Vault — Milestone 1 */
.vault-intro{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:28px 30px;margin:24px 0;background:linear-gradient(135deg,rgba(159, 168, 250, .12),rgba(30, 34, 66, .18));border:1px solid var(--border-color,rgba(159, 168, 250, .2));border-radius:20px}
.vault-intro h2{margin:0 0 10px;font-size:clamp(1.5rem,3vw,2rem)}
.vault-intro p:not(.eyebrow){max-width:620px;color:var(--text-muted,#9da1c0);margin:0;line-height:1.65}
.vault-usage{min-width:150px;padding:16px 18px;border:1px solid var(--border-color,rgba(159, 168, 250, .2));border-radius:14px;background:rgba(8, 9, 20, .45);display:flex;flex-direction:column;gap:5px}
.vault-usage span,.vault-usage small{color:var(--text-muted,#9da1c0);font-size:.8rem}.vault-usage strong{font-size:1.45rem;color:var(--text-primary,#ecedfa)}
.vault-alert,.vault-success{margin:16px 0;padding:13px 16px;border-radius:12px}.vault-success{border:1px solid rgba(100, 210, 160, .3);background:rgba(60, 160, 110, .1);color:#9fe4c2}
.vault-toolbar{display:flex;flex-direction:column;gap:18px;padding:18px 0;border-bottom:1px solid var(--border-color,rgba(159, 168, 250, .16))}
.vault-breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:.9rem}.vault-breadcrumbs span{color:var(--text-muted,#777dac)}.vault-breadcrumbs a{color:var(--text-primary,#ecedfa);text-decoration:none}.vault-breadcrumbs a:hover{color:var(--accent,#9fa8fa)}
.vault-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.vault-upload-form,.vault-folder-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.vault-file-input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.vault-upload-form label.button-primary{cursor:pointer;display:inline-flex;align-items:center}.vault-folder-form input,.vault-menu-panel input,.vault-menu-panel select{min-width:150px;max-width:100%;padding:9px 11px;border:1px solid var(--border-color,rgba(159, 168, 250, .25));border-radius:9px;background:var(--input-bg,#0d0f1f);color:var(--text-primary,#ecedfa)}
.vault-hint{font-size:.8rem;color:var(--text-muted,#868cb4);margin:14px 0 20px;line-height:1.6}
.vault-empty{padding:56px 24px;text-align:center;border:1px dashed var(--border-color,rgba(159, 168, 250, .25));border-radius:18px;margin-top:18px}.vault-empty-icon{font-size:2rem;color:var(--accent,#9fa8fa)}.vault-empty h3{margin:14px 0 8px}.vault-empty p{color:var(--text-muted,#9da1c0);margin:0}
.vault-table-wrap{width:100%;overflow-x:auto;border:1px solid var(--border-color,rgba(159, 168, 250, .18));border-radius:15px;margin:12px 0 24px}.vault-table{width:100%;border-collapse:collapse;min-width:760px}.vault-table th,.vault-table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--border-color,rgba(159, 168, 250, .12));font-size:.86rem}.vault-table th{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted,#9da1c0);background:rgba(30, 34, 66, .16)}.vault-table tbody tr:last-child td{border-bottom:0}.vault-table tbody tr:hover{background:rgba(159, 168, 250, .035)}
.vault-name-cell{display:flex;align-items:center;gap:10px;min-width:200px}.vault-item-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:0 0 32px;border-radius:9px;background:rgba(159, 168, 250, .1);color:var(--accent,#9fa8fa)}.vault-item-icon.is-folder{background:rgba(159, 168, 250, .14)}.vault-item-name{color:var(--text-primary,#ecedfa);font-weight:600;overflow-wrap:anywhere}.vault-name-cell a{text-decoration:none}.vault-name-cell a:hover{color:var(--accent,#9fa8fa)}
.vault-row-actions{display:flex;align-items:center;gap:12px}.vault-action-link{color:var(--accent,#9fa8fa);text-decoration:none;white-space:nowrap}.vault-menu{position:relative}.vault-menu summary{cursor:pointer;color:var(--text-muted,#acafc8);white-space:nowrap}.vault-menu-panel{position:absolute;z-index:10;right:0;top:26px;width:min(320px,80vw);padding:14px;display:grid;gap:14px;background:var(--panel-bg,#0d0f1f);border:1px solid var(--border-color,rgba(159, 168, 250, .25));border-radius:12px;box-shadow:0 18px 45px rgba(0, 0, 0, .35)}.vault-menu-panel form{display:grid;gap:8px}.vault-menu-panel label{display:grid;gap:6px;font-size:.78rem;color:var(--text-muted,#9da1c0)}.vault-menu-panel button{justify-self:start;border:1px solid var(--border-color,rgba(159, 168, 250, .25));border-radius:8px;padding:7px 10px;background:rgba(159, 168, 250, .1);color:var(--text-primary,#ecedfa);cursor:pointer}.vault-menu-panel .vault-delete-button{color:#ff9caa;border-color:rgba(255, 120, 140, .3)}
@media(max-width:760px){.vault-intro{flex-direction:column;padding:22px}.vault-usage{width:100%;box-sizing:border-box}.vault-actions,.vault-upload-form,.vault-folder-form{width:100%}.vault-folder-form input{flex:1;min-width:130px}.vault-upload-form .button-primary,.vault-folder-form .button-secondary{min-height:40px}}



/* Den File Vault refresh: card grid, upload selection previews, floating menus, themed scrollbars */
.vault-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin:14px 0 28px;align-items:stretch}
.vault-card{position:relative;min-width:0;border:1px solid rgba(159, 168, 250, .18);border-radius:15px;background:rgba(11, 13, 26, .62);overflow:visible;transition:border-color .18s ease,transform .18s ease,background .18s ease}
.vault-card:hover{border-color:rgba(159, 168, 250, .42);background:rgba(16, 19, 40, .8);transform:translateY(-2px)}
.vault-card-preview{height:178px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border-radius:14px 14px 0 0;background:linear-gradient(145deg,rgba(159, 168, 250, .09),rgba(19, 22, 45, .5));text-decoration:none}
.vault-image-preview img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}.vault-image-preview:hover img{transform:scale(1.035)}
.vault-image-open{position:absolute;inset:auto 10px 10px auto;padding:6px 9px;border-radius:8px;background:rgba(7, 8, 18, .82);color:#f0f1fe;font-size:.75rem;opacity:0;transition:opacity .15s}.vault-image-preview:hover .vault-image-open,.vault-image-preview:focus-visible .vault-image-open{opacity:1}
.vault-folder-art svg{width:88px;height:72px;fill:#8b94e8;filter:drop-shadow(0 10px 18px rgba(0, 0, 0, .2))}.vault-folder-art .folder-flap{fill:#aab2fb}
.vault-file-art{width:68px;height:82px;border:1px solid rgba(170, 178, 251, .42);border-radius:9px;background:rgba(159, 168, 250, .1);display:flex;align-items:center;justify-content:center;color:#bbc1fb;font-weight:750;font-size:.72rem;letter-spacing:.04em;overflow:hidden;padding:5px;text-align:center}
.vault-card-info{padding:13px;display:flex;align-items:flex-start;gap:8px;justify-content:space-between;min-width:0}.vault-card-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;width:100%;min-width:0}.vault-card-title-wrap{display:flex;flex-direction:column;gap:7px;min-width:0}.vault-card-name{color:var(--text-primary,#ecedfa);font-size:.88rem;font-weight:650;line-height:1.35;overflow-wrap:anywhere;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.vault-card-name:hover{color:#b1b8fb}.vault-card-meta{font-size:.74rem;color:var(--text-muted,#9da1c0);line-height:1.35}
.vault-row-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}.vault-action-link{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:rgba(159, 168, 250, .08);font-size:1.1rem}.vault-menu{position:relative}.vault-menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;width:29px;height:28px;border-radius:8px;border:1px solid transparent;color:#c0c2d7;font-size:.82rem;letter-spacing:.05em}.vault-menu summary::-webkit-details-marker{display:none}.vault-menu[open] summary,.vault-menu summary:hover{background:rgba(159, 168, 250, .13);border-color:rgba(159, 168, 250, .22)}
.vault-menu-panel{position:absolute;z-index:100;right:0;top:calc(100% + 8px);width:min(320px,calc(100vw - 36px));max-height:min(70vh,560px);overflow-y:auto;overscroll-behavior:contain;padding:15px;display:grid;gap:15px;background:#0e1022;border:1px solid rgba(159, 168, 250, .3);border-radius:13px;box-shadow:0 20px 55px rgba(0, 0, 0, .55)}.vault-menu-panel form{display:grid;gap:8px}.vault-menu-panel label{display:grid;gap:6px;font-size:.78rem;color:var(--text-muted,#9da1c0)}.vault-menu-panel input,.vault-menu-panel select{width:100%;min-width:0}.vault-menu-panel button{justify-self:start;border:1px solid rgba(159, 168, 250, .25);border-radius:8px;padding:8px 11px;background:rgba(159, 168, 250, .1);color:var(--text-primary,#ecedfa);cursor:pointer}.vault-menu-panel .vault-delete-button{color:#ff9caa;border-color:rgba(255, 120, 140, .3)}
.vault-upload-form{position:relative}.vault-upload-queue{flex-basis:100%;width:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;margin-top:8px}.vault-upload-queue[hidden]{display:none}.vault-upload-preview{min-width:0;display:flex;align-items:center;gap:9px;padding:8px;border:1px solid rgba(159, 168, 250, .2);border-radius:10px;background:rgba(159, 168, 250, .06)}.vault-upload-preview img{width:42px;height:42px;object-fit:cover;border-radius:7px;flex:0 0 42px}.vault-upload-file-icon{width:42px;height:42px;flex:0 0 42px;border-radius:7px;background:rgba(159, 168, 250, .12);color:#bbc1fb;display:grid;place-items:center;font-size:.65rem;font-weight:700}.vault-upload-file-details{min-width:0;display:flex;flex-direction:column;gap:3px;flex:1}.vault-upload-file-name{font-size:.78rem;color:#ecedfa;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vault-upload-file-size{font-size:.7rem;color:#9da1c0}.vault-upload-remove{border:0;background:transparent;color:#ff9caa;cursor:pointer;padding:5px;font-size:1rem}.vault-upload-summary{grid-column:1/-1;color:#9da1c0;font-size:.75rem;padding:2px 1px}
html{scrollbar-color:rgba(159, 168, 250, .48) rgba(10, 11, 24, .85);scrollbar-width:thin}*{scrollbar-width:thin;scrollbar-color:rgba(159, 168, 250, .42) rgba(10, 11, 24, .7)}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-track{background:rgba(10, 11, 24, .75);border-radius:999px}*::-webkit-scrollbar-thumb{background:rgba(159, 168, 250, .36);border:2px solid rgba(10, 11, 24, .75);border-radius:999px}*::-webkit-scrollbar-thumb:hover{background:rgba(170, 178, 251, .65)}
@media(max-width:760px){.vault-grid{grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:11px}.vault-card-preview{height:145px}.vault-card-info{padding:10px}.vault-menu-panel{position:fixed;top:50%;left:50%;right:auto;transform:translate(-50%,-50%);width:min(360px,calc(100vw - 28px));max-height:78vh;z-index:999}.vault-upload-queue{grid-template-columns:1fr}}


.wssl-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:28px 0 24px;padding:30px;border:1px solid rgba(159, 168, 250, .24);border-radius:22px;background:linear-gradient(120deg,rgba(59, 65, 113, .25),rgba(16, 18, 38, .82));}
.wssl-hero h2{margin:0 0 8px;font-size:clamp(26px,3vw,34px);letter-spacing:-.04em}.wssl-hero p:not(.eyebrow){max-width:700px;color:var(--text-muted,#9ca0bf);margin:0;line-height:1.65}.wssl-hero-icon{display:grid;place-items:center;flex:0 0 76px;height:76px;border:1px solid rgba(159, 168, 250, .28);border-radius:22px;background:rgba(159, 168, 250, .1);color:#a9b2fb;font-weight:800;letter-spacing:.12em}
.wssl-form{padding:22px;border:1px solid var(--border-color,rgba(159, 168, 250, .22));border-radius:18px;background:rgba(10, 11, 24, .58)}.wssl-form>label{display:block;margin-bottom:10px;font-weight:650}.wssl-form-row{display:flex;gap:10px}.wssl-form-row input{min-width:0;flex:1;padding:13px 15px;border:1px solid var(--border-color,rgba(159, 168, 250, .25));border-radius:10px;background:var(--input-bg,#0d0f1f);color:var(--text-primary,#ecedfa);font:inherit}.wssl-form-row input:focus{outline:2px solid rgba(159, 168, 250, .35);outline-offset:1px}.wssl-privacy-note,.wssl-disclaimer{font-size:12px;color:var(--text-muted,#9ca0bf);line-height:1.6}.wssl-alert{margin-top:16px}.wssl-results{margin-top:30px}.wssl-results-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.wssl-results-heading h2{margin:0;overflow-wrap:anywhere}.wssl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.wssl-card{min-width:0;padding:20px;border:1px solid var(--border-color,rgba(159, 168, 250, .2));border-radius:16px;background:rgba(11, 13, 27, .72)}.wssl-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.wssl-category{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#a0a6dd;font-weight:750}.wssl-status{display:inline-flex;align-items:center;padding:5px 9px;border:1px solid transparent;border-radius:999px;font-size:11px;font-weight:750}.wssl-status-good{color:#8ce0b4;background:rgba(42, 151, 98, .12);border-color:rgba(87, 205, 145, .24)}.wssl-status-warn{color:#f1cb86;background:rgba(185, 130, 42, .12);border-color:rgba(240, 190, 94, .24)}.wssl-status-bad{color:#ff9baf;background:rgba(190, 54, 84, .12);border-color:rgba(255, 110, 145, .24)}.wssl-status-neutral{color:#bbbed3;background:rgba(145, 149, 185, .1);border-color:rgba(159, 168, 250, .18)}.wssl-card h3{margin:0 0 9px;font-size:17px}.wssl-card>p{margin:0;color:var(--text-muted,#9ca0bf);font-size:13px;line-height:1.65;overflow-wrap:anywhere}.wssl-card dl{display:grid;gap:0;margin:16px 0 0;border-top:1px solid rgba(159, 168, 250, .13)}.wssl-card dl>div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid rgba(159, 168, 250, .09);font-size:12px}.wssl-card dt{color:var(--text-muted,#9ca0bf)}.wssl-card dd{margin:0;text-align:right;overflow-wrap:anywhere;max-width:60%;color:var(--text-primary,#ecedfa)}.wssl-disclaimer{margin-top:18px}.wssl-empty{margin-top:26px}
@media(max-width:760px){.wssl-hero{padding:22px}.wssl-hero-icon{flex-basis:54px;height:54px;border-radius:16px}.wssl-grid{grid-template-columns:minmax(0,1fr)}.wssl-form-row{flex-direction:column}.wssl-form-row .button-primary{justify-content:center}.wssl-results-heading{align-items:flex-start}}


/* Den Game Hub — Milestone 1 */
.gamehub-intro {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 26px;
    margin: 24px 0;
    border: 1px solid rgba(139, 150, 249, .22);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(92, 107, 246, .12), rgba(15, 18, 38, .85));
}

.gamehub-intro h2 { margin: 5px 0 8px; }
.gamehub-intro p { max-width: 650px; }

.gamehub-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px;
    align-items: stretch;
    margin: 14px 0 28px;
}

.gamehub-card {
    min-width: 0;
    padding: 22px;
    border: 1px solid rgba(139, 150, 249, .22);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(21, 24, 49, .96), rgba(12, 14, 29, .96));
    box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
}

.gamehub-card-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 12px;
}

.gamehub-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 14px;
    background: linear-gradient(145deg, #5b68db, #2a2f56);
    color: #ffffff;
    font-weight: 800;
}

.gamehub-card h3 { margin: 0; font-size: 1.05rem; }
.gamehub-tagline { min-height: 42px; font-size: .88rem; opacity: .75; }

.gamehub-empty {
    padding: 15px;
    border: 1px dashed rgba(139, 150, 249, .25);
    border-radius: 12px;
    background: rgba(255, 255, 255, .025);
    font-size: .9rem;
    line-height: 1.6;
}

.gamehub-event {
    padding: 13px 0;
    border-top: 1px solid rgba(255, 255, 255, .09);
    overflow-wrap: anywhere;
}

.gamehub-event h4 { margin: 0 0 6px; font-size: .95rem; }
.gamehub-meta { font-size: .8rem; opacity: .75; line-height: 1.7; }
.gamehub-event a { color: #aeb6fb; text-decoration: underline; }

.gamehub-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.gamehub-notice,
.gamehub-error {
    padding: 12px 15px;
    margin-bottom: 16px;
    border-radius: 12px;
}

.gamehub-notice {
    background: rgba(88, 180, 130, .12);
    border: 1px solid rgba(88, 180, 130, .28);
}

.gamehub-error {
    background: rgba(220, 80, 100, .12);
    border: 1px solid rgba(220, 80, 100, .28);
}

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

@media (max-width: 700px) {
    .gamehub-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .gamehub-intro {
        align-items: flex-start;
        flex-direction: column;
    }
}

.gamehub-icon-large {
    width: 66px;
    height: 66px;
    font-size: 1.25rem;
}


/*Nikke*/
.gamehub-intro {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 26px;
    border: 1px solid rgba(139, 150, 249, .22);
    border-radius: 20px;
    background:
        radial-gradient(ellipse at 80% 10%, rgba(92, 107, 246, .18), transparent 55%),
        rgba(15, 18, 38, .72);
    margin-bottom: 28px;
}

.gamehub-intro h2 { margin: 5px 0 8px; }
.gamehub-intro p { max-width: 650px; }

.gamehub-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.gamehub-card {
    min-width: 0;
    padding: 22px;
    border: 1px solid rgba(139, 150, 249, .2);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(21, 24, 49, .96), rgba(12, 14, 29, .96));
    box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
}

.gamehub-card-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 12px;
}

.gamehub-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(145deg, #5b68db, #2a2f56);
    color: #ffffff;
    font-weight: 800;
    flex-shrink: 0;
}

.gamehub-card h3 { margin: 0; font-size: 1.05rem; }
.gamehub-tagline { font-size: .88rem; opacity: .75; min-height: 42px; }

.gamehub-event {
    padding: 13px 0;
    border-top: 1px solid rgba(255, 255, 255, .09);
    overflow-wrap: anywhere;
}

.gamehub-event h4 { margin: 0 0 6px; font-size: .95rem; }
.gamehub-meta { font-size: .8rem; opacity: .75; line-height: 1.7; }
.gamehub-event a { color: #aeb6fb; text-decoration: underline; }
.gamehub-post {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 0;
    border-top: 1px solid rgba(255, 255, 255, .09);
}

.gamehub-post > a:first-child {
    display: block;
    width: 100%;
}

.gamehub-post-thumb {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
}
.gamehub-post h4 { margin: 0 0 7px; font-size: .92rem; line-height: 1.4; }
.gamehub-post a { color: #aeb6fb; text-decoration: none; }
.gamehub-post a:hover { text-decoration: underline; }
.gamehub-post-summary { margin: 0 0 7px; font-size: .82rem; opacity: .78; }
@media (max-width: 420px) {
    .gamehub-post {
        grid-template-columns: 1fr;
    }

    .gamehub-post-thumb {
        width: 100%;
    }
}

.gamehub-empty {
    padding: 15px;
    border: 1px dashed rgba(139, 150, 249, .22);
    border-radius: 12px;
    background: rgba(255, 255, 255, .025);
    font-size: .9rem;
    opacity: .8;
}

.gamehub-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.gamehub-notice,
.gamehub-error {
    padding: 12px 15px;
    border-radius: 12px;
    margin-bottom: 16px;
}

.gamehub-notice {
    background: rgba(88, 180, 130, .12);
    border: 1px solid rgba(88, 180, 130, .28);
}

.gamehub-error {
    background: rgba(220, 80, 100, .12);
    border: 1px solid rgba(220, 80, 100, .28);
}

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

@media (max-width: 700px) {
    .gamehub-grid { grid-template-columns: 1fr; }
    .gamehub-intro { align-items: flex-start; flex-direction: column; }
}


.gamehub-event-image-link {
    display: block;
    margin-bottom: 12px;
    overflow: hidden;
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
}

.gamehub-event-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
    transition: transform .2s ease;
}

.gamehub-event-image-link:hover .gamehub-event-image {
    transform: scale(1.03);
}

.gamehub-event-image-genshin {
    object-fit: contain;
    aspect-ratio: auto;
    max-height: 320px;
}

/* Den Overview: compact quick launch and Genshin banner showcase */
.overview-greeting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 8px 0 30px;
    padding: 28px 30px;
    border: 1px solid var(--border, #292f50);
    border-radius: 20px;
    background: linear-gradient(115deg, rgba(37, 41, 74, .72), rgba(17, 21, 43, .92) 65%, rgba(12, 14, 30, .96));
}
.overview-greeting h2 { margin: 5px 0 8px; font-size: clamp(1.5rem, 2.5vw, 2.15rem); letter-spacing: -.035em; }
.overview-greeting .muted { margin: 0; }
.overview-greeting-mark { color: #c6c9ff; font-size: 3.6rem; font-weight: 800; letter-spacing: -.1em; opacity: .85; padding-right: 12px; }
.overview-greeting-mark span { color: var(--accent, #a5acf5); }
.overview-section-heading { margin-bottom: 14px; }
.overview-section-heading h2 { margin-bottom: 0; }
.quick-launch-section, .overview-banners { margin-bottom: 32px; }
.quick-launch-bar {
    display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap;
    width: 100%; max-width: none; padding: 10px; justify-content: space-evenly;
    border: 1px solid var(--border, #292f50); border-radius: 18px;
    background: rgba(17, 21, 43, .78);
}
.quick-launch-item {
    display: flex; flex: 1 1 76px; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
    min-width: 64px; min-height: 78px; padding: 7px 4px; border-radius: 12px;
    color: var(--muted, #929bb8); text-decoration: none; font-size: .72rem; font-weight: 600;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.quick-launch-item:hover, .quick-launch-item:focus-visible { background: rgba(165, 172, 245, .12); color: var(--text, #e7eaf2); transform: translateY(-2px); outline: none; }
.quick-launch-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(165, 172, 245, .18); border-radius: 12px; background: linear-gradient(145deg, #292f58, #191e3a); color: #c6c9ff; font-size: 1.35rem; }
.overview-text-link { color: var(--accent, #a5acf5); font-size: .84rem; text-decoration: none; }
.overview-text-link:hover { text-decoration: underline; }
.overview-banner-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.overview-banner-card { min-width: 0; overflow: hidden; padding: 14px; border: 1px solid var(--border, #292f50); border-radius: 18px; background: linear-gradient(155deg, rgba(25, 30, 58, .9), rgba(13, 16, 32, .96)); }
.overview-banner-label { margin-bottom: 12px; color: var(--accent, #a5acf5); font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.overview-banner-image-link { display: block; overflow: hidden; border-radius: 12px; background: rgba(0, 0, 0, .18); }
.overview-banner-image { display: block; width: 100%; max-height: 290px; aspect-ratio: 16 / 9; object-fit: contain; transition: transform .2s ease; }
.overview-banner-image-link:hover .overview-banner-image { transform: scale(1.02); }
.overview-banner-card h3 { margin: 12px 2px 3px; font-size: .98rem; line-height: 1.45; }
.overview-banner-empty { display: flex; min-height: 190px; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 22px; border: 1px dashed rgba(165, 172, 245, .2); border-radius: 12px; text-align: center; background: rgba(8, 10, 20, .35); }
.overview-banner-empty p { margin: 0; color: var(--text, #e7eaf2); }
.overview-banner-empty span:last-child { color: var(--muted, #929bb8); font-size: .78rem; }
.overview-banner-empty-icon { color: var(--accent, #a5acf5); font-size: 2rem; }
.overview-banner-note { margin: 12px 2px 0; color: var(--muted, #929bb8); font-size: .75rem; line-height: 1.5; }
/* Expandable Game Hub sidebar navigation */
.nav-expandable { margin: 0; }
.nav-expandable > summary { display: flex; align-items: center; list-style: none; cursor: pointer; }
.nav-expandable > summary::-webkit-details-marker { display: none; }
.nav-expandable-label { flex: 1; }
.nav-chevron { margin-left: auto; font-size: 1rem; transition: transform .18s ease; }
.nav-expandable[open] .nav-chevron { transform: rotate(180deg); }
.nav-subitems { display: grid; gap: 3px; margin: 4px 0 8px 34px; padding-left: 12px; border-left: 1px solid var(--border, #292f50); }
.nav-subitem { display: block; padding: 8px 10px; border-radius: 8px; color: var(--muted, #929bb8); text-decoration: none; font-size: .84rem; transition: color .15s ease, background .15s ease; }
.nav-subitem:hover, .nav-subitem:focus-visible { color: var(--text, #e7eaf2); background: rgba(165, 172, 245, .1); outline: none; }
.gamehub-card[id] { scroll-margin-top: 24px; }
@media (max-width: 760px) {
    .overview-greeting { padding: 22px; }
    .overview-banner-grid { grid-template-columns: 1fr; }
    .quick-launch-bar { width: 100%; justify-content: space-around; }
    .quick-launch-item { width: 66px; }
}


/* Den Game Hub: single-game announcement feed layout */
.gamehub-grid.gamehub-grid-single {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    max-width: none;
}
.gamehub-grid.gamehub-grid-single > .gamehub-card {
    width: 100%;
    min-width: 0;
}
.gamehub-grid-single .gamehub-post {
    display: grid !important;
    grid-template-columns: minmax(240px, 38%) minmax(0, 1fr) !important;
    align-items: start;
    gap: 22px;
    min-width: 0;
}
.gamehub-grid-single .gamehub-post > a {
    display: block;
    min-width: 0;
    width: 100%;
}
.gamehub-grid-single .gamehub-post-thumb {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.gamehub-grid-single .gamehub-post > div,
.gamehub-grid-single .gamehub-event-content {
    min-width: 0;
    overflow-wrap: anywhere;
}
.gamehub-grid-single .gamehub-event-layout {
    display: grid;
    grid-template-columns: minmax(240px, 38%) minmax(0, 1fr);
    align-items: start;
    gap: 22px;
}
.gamehub-grid-single .gamehub-event-image-link {
    width: 100%;
    min-width: 0;
    margin: 0;
    align-self: start;
}
.gamehub-grid-single .gamehub-event-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.gamehub-grid-single .gamehub-event-image-genshin {
    object-fit: contain;
    aspect-ratio: auto;
    max-height: 320px;
}
.gamehub-grid-single .gamehub-event-content h4 {
    margin-top: 0;
    overflow-wrap: anywhere;
}
.gamehub-grid-single .gamehub-event-content p {
    overflow-wrap: anywhere;
}
@media (max-width: 760px) {
    .gamehub-grid-single .gamehub-post,
    .gamehub-grid-single .gamehub-event-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .gamehub-grid-single .gamehub-post-thumb,
    .gamehub-grid-single .gamehub-event-image {
        max-width: 100%;
    }
}


/* Genshin banner board + history page */
.overview-banner-board { display: grid; gap: 20px; }
.overview-banner-group { min-width: 0; padding: 16px; border: 1px solid var(--border, #292f50); border-radius: 20px; background: rgba(14, 17, 35, .48); }
.overview-banner-group-title { margin: 0 0 14px; color: var(--accent, #a5acf5); font-size: .76rem; font-weight: 800; letter-spacing: .13em; }
.overview-banner-grid-characters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.overview-banner-grid-lower { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }
.overview-banner-card h4 { margin: 10px 2px 2px; font-size: .9rem; line-height: 1.45; }
.overview-banner-empty { min-height: 190px; }
.overview-banner-empty-compact { min-height: 130px; }
.banner-history-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.banner-history-filter { padding: 9px 14px; border: 1px solid var(--border, #292f50); border-radius: 999px; color: var(--muted, #929bb8); text-decoration: none; font-size: .82rem; }
.banner-history-filter:hover, .banner-history-filter.is-active { color: var(--text, #e7eaf2); border-color: rgba(165, 172, 245, .55); background: rgba(165, 172, 245, .12); }
.banner-history-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.banner-history-card { overflow: hidden; min-width: 0; border: 1px solid var(--border, #292f50); border-radius: 16px; background: linear-gradient(155deg, rgba(25, 30, 58, .9), rgba(13, 16, 32, .96)); }
.banner-history-image { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: rgba(0, 0, 0, .18); }
.banner-history-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.banner-history-no-image { display: grid; place-items: center; color: var(--muted, #929bb8); font-size: .85rem; }
.banner-history-card-body { padding: 14px; }
.banner-history-kind { color: var(--accent, #a5acf5); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.banner-history-card h3 { margin: 7px 0; font-size: .96rem; line-height: 1.45; }
.banner-history-card p { margin: 0; color: var(--muted, #929bb8); font-size: .8rem; }
.banner-history-empty { display: flex; min-height: 280px; flex-direction: column; align-items: center; justify-content: center; padding: 32px; border: 1px dashed rgba(165, 172, 245, .25); border-radius: 18px; text-align: center; background: rgba(14, 17, 35, .45); }
.banner-history-empty h2 { margin: 12px 0 8px; }
.banner-history-empty p { max-width: 620px; color: var(--muted, #929bb8); line-height: 1.6; }
.banner-history-back { display: inline-block; margin-top: 10px; text-decoration: none; }
@media (max-width: 760px) { .overview-banner-grid-characters, .overview-banner-grid-lower, .banner-history-grid { grid-template-columns: 1fr; } .overview-banner-group { padding: 12px; } }



:root {
    color-scheme: dark;
    font-family: Inter, "Segoe UI", sans-serif;
    background: #080a14;
    color: #e9eaf7;
    font-synthesis: none;
    text-rendering: optimizeLegibility;

    --bg: #080a14;
    --panel: #101220;
    --panel-raised: #17192c;
    --border: #25294a;
    --text: #e9eaf7;
    --muted: #999cb8;
    --accent: #a8b0fa;
    --accent-bg: #25294a;
}



* {
    box-sizing: border-box;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    background: var(--bg);
    color: var(--text);
}

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

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* Shared branding */

.brand-line {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    width: fit-content;
}

.brand-icon {
    display: grid;
    width: 39px;
    height: 39px;
    place-items: center;
    border: 1px solid #373d6a;
    border-radius: 12px;
    background: linear-gradient(145deg, #25294a, #12152b);
    color: #bac0fb;
    font-size: 19px;
    font-weight: 750;
}

.brand-name {
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -1.2px;
}

.brand-period {
    color: var(--accent);
}

.eyebrow {
    margin: 0;
    color: #8b90b6;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.16em;
}

/* Login page */

.login-body {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 36px 18px;
    background:
        radial-gradient(ellipse at 50% 35%, #151932 0%, transparent 53%),
        var(--bg);
}

.login-layout {
    display: flex;
    width: min(440px, 100%);
    flex-direction: column;
    align-items: center;
}

.login-layout > .brand-line {
    margin-bottom: 30px;
}

.login-card {
    width: 100%;
    padding: 34px;
    border: 1px solid var(--border);
    border-radius: 19px;
    background: rgba(12, 14, 29, 0.96);
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.25);
}

.login-card h1 {
    margin: 13px 0 8px;
    font-size: 31px;
    font-weight: 650;
    letter-spacing: -1.2px;
}

.muted {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

.login-form {
    display: flex;
    flex-direction: column;
    margin-top: 28px;
}

.login-form label {
    margin: 0 0 8px;
    color: #d6d8e8;
    font-size: 12px;
    font-weight: 650;
}

.login-form input {
    width: 100%;
    height: 45px;
    margin-bottom: 20px;
    padding: 0 13px;
    border: 1px solid #25294a;
    border-radius: 9px;
    background: #090b17;
    color: var(--text);
    outline: none;
}

.login-form input:focus {
    border-color: #717ff8;
    box-shadow: 0 0 0 3px rgba(113, 127, 248, 0.12);
}

.button-primary {
    display: flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 3px;
    border: 1px solid #919bf9;
    border-radius: 9px;
    background: #96a0fa;
    color: #0e1022;
    font-size: 13px;
    font-weight: 750;
    transition: background 150ms ease, transform 150ms ease;
}

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

.alert-error {
    margin-top: 20px;
    padding: 12px 13px;
    border: 1px solid #713b46;
    border-radius: 9px;
    background: #2a171e;
    color: #ffb5bf;
    font-size: 12px;
    line-height: 1.6;
}

.login-footnote {
    margin: 23px 0 0;
    color: #7a81af;
    font-size: 11px;
    line-height: 1.6;
    text-align: center;
}

.page-footer {
    margin-top: 28px;
    color: #7980b3;
    font-size: 9px;
    font-weight: 650;
    letter-spacing: 0.14em;
}

/* Main application layout */

.app-body {
    background:
        radial-gradient(ellipse at 80% 0%, rgba(34, 38, 72, 0.14), transparent 40%),
        var(--bg);
}

.app-shell {
    display: grid;
    min-height: 100vh;
    grid-template-columns: 242px minmax(0, 1fr);
}

.sidebar {
    position: sticky;
    top: 0;
    display: flex;
    height: 100vh;
    flex-direction: column;
    padding: 25px 15px 18px;
    border-right: 1px solid #161933;
    background: #090b17;
}

.sidebar > .brand-line {
    margin: 0 8px 43px;
}

.nav-section {
    margin-bottom: 27px;
}

.nav-heading {
    margin: 0 10px 11px;
    color: #7980b3;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.14em;
}

.nav-item {
    display: flex;
    min-height: 39px;
    align-items: center;
    gap: 11px;
    margin: 3px 0;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #969abc;
    font-size: 12px;
}

.nav-item.active {
    border-color: #25294a;
    background: #14172f;
    color: #c6cbfc;
}

.nav-icon {
    display: inline-grid;
    width: 18px;
    place-items: center;
    color: #979bbc;
    font-size: 16px;
}

.nav-disabled {
    color: #5d659e;
    cursor: default;
}

.nav-disabled .nav-icon {
    color: #535a91;
}

.nav-soon {
    margin-left: auto;
    color: #575e97;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: 0.04em;
}

.sidebar-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 16px 9px 4px;
    border-top: 1px solid #161933;
    color: #7b81ae;
    font-size: 10px;
}

.connection-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #60d7a1;
    box-shadow: 0 0 10px rgba(96, 215, 161, 0.2);
}

.version-label {
    margin-left: auto;
    color: #7980b3;
}

.main-content {
    width: 100%;
    max-width: 1600px;
    min-width: 0;
    margin: 0 auto;
    padding: 34px clamp(22px, 4vw, 58px) 23px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 34px;
}

.topbar h1 {
    margin: 8px 0 0;
    font-size: 26px;
    font-weight: 650;
    letter-spacing: -0.8px;
}

.account-area {
    display: flex;
    align-items: center;
    gap: 10px;
}

.account-avatar {
    display: grid;
    width: 37px;
    height: 37px;
    place-items: center;
    border: 1px solid #333964;
    border-radius: 50%;
    background: #181b37;
    color: #bcc2fb;
    font-size: 13px;
    font-weight: 700;
}

.account-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.account-name {
    color: #e3e5f0;
    font-size: 12px;
    font-weight: 650;
}

.account-role {
    color: #7a80ae;
    font-size: 10px;
}

.button-logout {
    margin-left: 10px;
    padding: 9px 12px;
    border: 1px solid #25294a;
    border-radius: 8px;
    background: #0d1021;
    color: #b1b4cb;
    font-size: 11px;
}

.button-logout:hover {
    border-color: #5e669f;
    color: white;
}

/* Dashboard welcome panel */

.welcome-panel {
    position: relative;
    overflow: hidden;
    padding: clamp(24px, 3vw, 39px);
    border: 1px solid #25294a;
    border-radius: 15px;
    background:
        radial-gradient(ellipse at 88% 15%, rgba(85, 92, 147, 0.20), transparent 42%),
        linear-gradient(115deg, #101328, #0d0f20);
}

.welcome-content {
    position: relative;
    z-index: 1;
    max-width: 560px;
}

.welcome-panel h2 {
    margin: 17px 0 12px;
    font-size: clamp(27px, 3vw, 39px);
    font-weight: 650;
    letter-spacing: -1.5px;
    line-height: 1.18;
}

.welcome-description {
    max-width: 500px;
    margin: 0;
    color: #a0a4c2;
    font-size: 13px;
    line-height: 1.85;
}

.environment-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 25px;
    padding: 9px 12px;
    border: 1px solid #272c52;
    border-radius: 999px;
    background: rgba(10, 12, 25, 0.55);
    color: #c1c5e8;
    font-size: 10px;
}

.welcome-symbol {
    position: absolute;
    top: -37px;
    right: 20px;
    color: rgba(137, 147, 233, 0.065);
    font-size: clamp(170px, 22vw, 300px);
    font-weight: 800;
    letter-spacing: -0.1em;
    line-height: 1;
    pointer-events: none;
}

/* Feature cards */

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 15px;
    margin: 37px 0 18px;
}

.section-heading h2 {
    margin: 7px 0 0;
    font-size: 19px;
    font-weight: 650;
    letter-spacing: -0.4px;
}

.section-count {
    padding-bottom: 3px;
    color: #7a80af;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

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

.feature-card {
    display: flex;
    min-height: 205px;
    flex-direction: column;
    padding: 21px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: linear-gradient(145deg, #0d0f20, #0b0d1b);
    transition: border-color 150ms ease, transform 150ms ease;
}

.feature-card:hover {
    transform: translateY(-2px);
    border-color: #2d325b;
}

.feature-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.feature-icon {
    display: inline-grid;
    min-width: 40px;
    height: 36px;
    place-items: center;
    padding: 0 7px;
    border: 1px solid #282d53;
    border-radius: 9px;
    background: #151932;
    color: #adb5fb;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.feature-icon-mail {
    border-color: #2f345e;
    background: #191c38;
    color: #bbc1fb;
}

.feature-icon-notes {
    border-color: #2e335c;
    background: #191d39;
    color: #bcc2fb;
}

.feature-icon-files {
    border-color: #25294a;
    background: #1a2d2b;
    color: #a8dfcd;
}

.feature-status {
    color: #7b81ae;
    font-size: 9px;
}

.feature-card h3 {
    margin: 20px 0 8px;
    font-size: 15px;
    font-weight: 650;
}

.feature-card p {
    margin: 0 0 20px;
    color: #8c91b6;
    font-size: 11px;
    line-height: 1.8;
}

.feature-footer {
    margin-top: auto;
    color: #7a81af;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: 0.11em;
}

.dashboard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 28px;
    padding-top: 17px;
    border-top: 1px solid #161933;
    color: #797faf;
    font-size: 9px;
}

/* Smaller desktop windows */

@media (max-width: 900px) {
    .app-shell {
        grid-template-columns: 205px minmax(0, 1fr);
    }

    .sidebar {
        padding-right: 10px;
        padding-left: 10px;
    }

    .main-content {
        padding-right: 22px;
        padding-left: 22px;
    }

    .account-details {
        display: none;
    }

    .welcome-symbol {
        right: -25px;
    }
}

@media (max-width: 650px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
        height: auto;
    }

    .sidebar > .brand-line {
        margin-bottom: 20px;
    }

    .nav-section {
        margin-bottom: 12px;
    }

    .sidebar-bottom {
        margin-top: 10px;
    }

    .main-content {
        padding: 22px 15px;
    }

    .topbar {
        align-items: start;
    }

    .topbar h1 {
        font-size: 22px;
    }

    .welcome-symbol {
        display: none;
    }

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

    .login-card {
        padding: 25px 21px;
    }
}:root {
    color-scheme: dark;
    font-family: Inter, "Segoe UI", sans-serif;
    background: #080a14;
    color: #e9eaf7;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    background:
        radial-gradient(ellipse at 50% 42%, #13162e 0%, transparent 55%),
        #070812;
}

.welcome {
    width: min(560px, calc(100% - 40px));
    text-align: center;
    padding: 48px 24px;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 28px;
    border: 1px solid #323863;
    border-radius: 17px;
    background: #151831;
    color: #a4acfa;
    font-size: 28px;
    font-weight: 700;
}

.eyebrow {
    color: #868bb3;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
}

h1 {
    margin: 14px 0;
    font-size: clamp(48px, 10vw, 76px);
    letter-spacing: -0.07em;
}

h1 span {
    color: #8490f9;
}

.subtitle {
    color: #999dbd;
    font-size: 15px;
}

.status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 32px;
    padding: 11px 15px;
    border: 1px solid #263b35;
    border-radius: 999px;
    background: #111c1a;
    color: #b3dccc;
    font-size: 12px;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #64d6a2;
}

.next-step {
    margin-top: 48px;
    color: #797fb2;
    font-size: 12px;
}



/* ===========================
   Nexus Notes Module
   =========================== */

.notes-page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
}

.notes-page-heading h2 {
    margin: 10px 0 8px;
    font-size: 30px;
    font-weight: 650;
    letter-spacing: -1px;
}

.notes-muted {
    color: var(--muted, #8086b1);
    font-size: 12px;
    line-height: 1.8;
}

.notes-success {
    margin-bottom: 20px;
    padding: 12px 15px;
    border: 1px solid #285541;
    border-radius: 9px;
    background: #11251c;
    color: #a8e4c3;
    font-size: 12px;
}

.notes-alert {
    margin-bottom: 20px;
}

.notes-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
    padding: 12px;
    border: 1px solid var(--border, #191d39);
    border-radius: 12px;
    background: var(--panel, #0c0e1d);
}

.notes-search-wrap {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: 8px;
}

.search-symbol {
    padding-left: 4px;
    color: #888db4;
    font-size: 22px;
}

.notes-input,
.notes-textarea,
.notes-select {
    width: 100%;
    border: 1px solid #25294a;
    border-radius: 8px;
    background: #090b17;
    color: #e7e8f2;
    font: inherit;
    font-size: 12px;
}

.notes-input,
.notes-select {
    min-height: 41px;
    padding: 0 12px;
}

.notes-input:focus,
.notes-textarea:focus,
.notes-select:focus {
    border-color: #717ff8;
    outline: none;
    box-shadow: 0 0 0 3px rgba(113, 127, 248, 0.1);
}

.notes-search {
    min-width: 0;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.notes-search:focus {
    border-color: transparent;
    box-shadow: none;
}

.notes-select {
    width: auto;
    max-width: 190px;
}

.button-secondary {
    display: inline-flex;
    min-height: 39px;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border: 1px solid #25294a;
    border-radius: 8px;
    background: #0f1125;
    color: #c1c4d9;
    font-size: 11px;
    text-decoration: none;
    white-space: nowrap;
}

.button-secondary:hover {
    border-color: #474e81;
    color: #ffffff;
}

.filter-button {
    min-height: 41px;
}

.new-note-button {
    display: inline-flex;
    min-height: 41px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 15px;
    border: 1px solid #919bf9;
    border-radius: 9px;
    background: #96a0fa;
    color: #0e1022;
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
}

.new-note-button:hover {
    background: #b4bbfb;
}

.notes-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin: 0 0 15px;
}

.notes-list-heading h2 {
    margin: 0;
    font-size: 17px;
}

.notes-list-heading > span {
    color: #8086b1;
    font-size: 10px;
}

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

.note-card {
    display: flex;
    min-width: 0;
    min-height: 225px;
    flex-direction: column;
    padding: 20px;
    border: 1px solid #191d39;
    border-radius: 12px;
    background: linear-gradient(145deg, #0d0f20, #0b0d1b);
}

.note-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.note-type-label {
    color: #a2abfa;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.note-date {
    color: #7980af;
    font-size: 9px;
}

.note-card h3 {
    overflow-wrap: anywhere;
    margin: 17px 0 8px;
    font-size: 15px;
    line-height: 1.5;
}

.note-card h3 a:hover,
.note-edit-link:hover {
    color: #919bf9;
}

.note-preview {
    display: -webkit-box;
    overflow: hidden;
    margin: 0 0 14px;
    color: #8c91b6;
    font-size: 11px;
    line-height: 1.8;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.note-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 17px;
}

.note-tag {
    padding: 5px 8px;
    border: 1px solid #25294a;
    border-radius: 5px;
    background: #13162d;
    color: #adb4f3;
    font-size: 9px;
}

.note-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 13px;
    border-top: 1px solid #181c37;
}

.note-card-actions form {
    margin: 0;
}

.note-edit-link {
    color: #acb4fb;
    font-size: 11px;
    font-weight: 650;
}

.note-delete-button {
    padding: 6px 9px;
    border: 1px solid #50303a;
    border-radius: 6px;
    background: #0f1124;
    color: #e7a2ad;
    font-size: 10px;
    cursor: pointer;
}

.notes-empty {
    display: flex;
    min-height: 270px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 35px 22px;
    border: 1px dashed #25294a;
    border-radius: 13px;
    background: rgba(12, 14, 29, 0.6);
    text-align: center;
}

.empty-note-icon {
    display: grid;
    width: 47px;
    height: 47px;
    place-items: center;
    margin-bottom: 15px;
    border: 1px solid #282d53;
    border-radius: 12px;
    background: #151932;
    color: #adb5fb;
    font-size: 21px;
}

.notes-empty h3 {
    margin: 0 0 9px;
    font-size: 16px;
}

.notes-empty p {
    max-width: 420px;
    margin: 0 0 21px;
    color: #8086b1;
    font-size: 12px;
    line-height: 1.8;
}

.note-editor {
    display: flex;
    flex-direction: column;
    padding: clamp(20px, 3vw, 32px);
    border: 1px solid #191d39;
    border-radius: 13px;
    background: #0c0e1d;
}

.note-editor label {
    margin: 18px 0 8px;
    color: #d6d8e8;
    font-size: 12px;
    font-weight: 650;
}

.note-editor label:first-of-type {
    margin-top: 0;
}

.notes-textarea {
    min-height: 290px;
    padding: 12px;
    resize: vertical;
    line-height: 1.8;
}

.field-hint {
    margin: 8px 0 0;
    color: #7a80af;
    font-size: 10px;
}

.editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 25px;
    padding-top: 18px;
    border-top: 1px solid #191d39;
}

.editor-save {
    min-width: 115px;
    padding: 0 15px;
}

@media (max-width: 850px) {
    .notes-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .notes-page-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .notes-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .notes-select {
        width: 100%;
        max-width: none;
    }

    .notes-search-wrap {
        min-height: 40px;
    }

    .filter-button {
        width: 100%;
    }
}


/* ===========================
   Nexus Domain & DNS Toolkit
   =========================== */

.domain-intro {
    position: relative;
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
    padding: 27px 30px;
    border: 1px solid #25294a;
    border-radius: 14px;
    background:
        radial-gradient(ellipse at 90% 20%, rgba(85, 92, 147, 0.2), transparent 45%),
        linear-gradient(115deg, #101328, #0d0f20);
}

.domain-intro h2 {
    margin: 12px 0 9px;
    font-size: clamp(25px, 3vw, 34px);
    font-weight: 650;
    letter-spacing: -1.1px;
}

.domain-intro p:not(.eyebrow) {
    max-width: 560px;
    margin: 0;
    color: #a0a4c2;
    font-size: 12px;
    line-height: 1.8;
}

.domain-intro-symbol {
    color: rgba(137, 147, 233, 0.15);
    font-size: clamp(40px, 7vw, 86px);
    font-weight: 800;
    letter-spacing: -0.08em;
}

.domain-search-panel {
    margin-bottom: 28px;
    padding: 21px;
    border: 1px solid var(--border, #191d39);
    border-radius: 12px;
    background: var(--panel, #0c0e1d);
}

.domain-search-panel > label {
    display: block;
    margin-bottom: 9px;
    color: #d6d8e8;
    font-size: 11px;
    font-weight: 650;
}

.domain-search-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.domain-input,
.domain-select {
    min-width: 0;
    min-height: 45px;
    border: 1px solid #25294a;
    border-radius: 8px;
    background: #090b17;
    color: var(--text, #e7e8f2);
    font: inherit;
    font-size: 12px;
}

.domain-input {
    flex: 1;
    padding: 0 13px;
}

.domain-select {
    width: 100px;
    padding: 0 10px;
}

.domain-input:focus,
.domain-select:focus {
    border-color: #717ff8;
    outline: none;
    box-shadow: 0 0 0 3px rgba(113, 127, 248, 0.1);
}

.domain-submit {
    min-height: 45px;
    flex-shrink: 0;
    padding: 0 16px;
    border-radius: 8px;
}

.domain-hint {
    margin: 10px 0 0;
    color: #797fae;
    font-size: 10px;
    line-height: 1.7;
}

.domain-hint code,
.domain-empty code {
    color: #b6bcf1;
}

.domain-alert {
    margin-bottom: 20px;
}

.domain-result-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin: 28px 0 16px;
}

.domain-result-heading h2 {
    margin: 8px 0 0;
    overflow-wrap: anywhere;
    font-size: 21px;
    font-weight: 650;
    letter-spacing: -0.4px;
}

.domain-record-badge,
.domain-panel-icon {
    padding: 7px 9px;
    border: 1px solid #272c52;
    border-radius: 6px;
    background: #14172f;
    color: #aeb6fb;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.domain-result-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
}

.domain-panel {
    min-width: 0;
    padding: 21px;
    border: 1px solid var(--border, #191d39);
    border-radius: 12px;
    background: linear-gradient(145deg, #0d0f20, #0b0d1b);
}

.domain-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 21px;
}

.domain-panel-heading h3 {
    margin: 7px 0 0;
    font-size: 16px;
    font-weight: 650;
}

.domain-panel-icon {
    color: #b0b3cb;
    background: #101327;
    border-color: #25294a;
}

.domain-info-list {
    display: flex;
    flex-direction: column;
}

.domain-info-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 0;
    border-bottom: 1px solid #191d39;
}

.domain-info-row:first-child {
    padding-top: 0;
}

.domain-info-row > span {
    color: #8086b1;
    font-size: 10px;
}

.domain-info-row > strong {
    overflow-wrap: anywhere;
    color: #e3e5f0;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.65;
}

.domain-subheading {
    margin: 20px 0 10px;
    color: #bfc2d7;
    font-size: 11px;
    font-weight: 700;
}

.domain-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.domain-chip {
    max-width: 100%;
    padding: 6px 8px;
    overflow-wrap: anywhere;
    border: 1px solid #272c52;
    border-radius: 6px;
    background: #14172f;
    color: #b7bdf0;
    font-size: 9px;
}

.domain-footnote {
    margin: 18px 0 0;
    color: #7a80af;
    font-size: 10px;
    line-height: 1.8;
}

.domain-muted {
    color: #8086b1;
    font-size: 11px;
    line-height: 1.7;
}

.domain-unavailable {
    padding: 16px;
    border: 1px solid #25294a;
    border-radius: 9px;
    background: #0d0f1f;
}

.domain-unavailable strong {
    display: block;
    margin-bottom: 8px;
    color: #dbddf4;
    font-size: 12px;
}

.domain-unavailable p {
    margin: 5px 0 0;
    color: #898eb5;
    font-size: 11px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.dns-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 15px;
}

.dns-status-row > span:first-child {
    color: #8086b1;
    font-size: 10px;
}

.dns-status-pill {
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 750;
}

.dns-status-ok {
    border: 1px solid #285541;
    background: #11251c;
    color: #a8e4c3;
}

.dns-status-warning {
    border: 1px solid #6a4e2c;
    background: #291f14;
    color: #efc38a;
}

.dns-record-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dns-record {
    min-width: 0;
    padding: 12px;
    border: 1px solid #1d213f;
    border-radius: 8px;
    background: #0a0c18;
}

.dns-record-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
    color: #939cf0;
    font-size: 9px;
    font-weight: 700;
}

.dns-record-meta span:last-child {
    color: #7a80af;
    font-weight: 400;
}

.dns-record-name {
    margin-bottom: 7px;
    color: #c4c6da;
    font-size: 10px;
    overflow-wrap: anywhere;
}

.dns-record-value {
    display: block;
    color: #a8d8c1;
    font-family: Consolas, "Courier New", monospace;
    font-size: 11px;
    line-height: 1.75;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.domain-empty {
    display: flex;
    min-height: 250px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    border: 1px dashed #25294a;
    border-radius: 13px;
    background: rgba(12, 14, 29, 0.6);
    text-align: center;
}

.domain-empty-icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    margin-bottom: 15px;
    border: 1px solid #282d53;
    border-radius: 12px;
    background: #151932;
    color: #adb5fb;
    font-size: 27px;
}

.domain-empty h3 {
    margin: 0 0 8px;
    font-size: 16px;
}

.domain-empty p {
    max-width: 440px;
    margin: 0 0 13px;
    color: #8086b1;
    font-size: 12px;
    line-height: 1.8;
}

.domain-empty > span {
    color: #7a80ae;
    font-size: 10px;
}

@media (max-width: 950px) {
    .domain-result-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .domain-search-row {
        flex-wrap: wrap;
    }

    .domain-input {
        flex-basis: 100%;
    }

    .domain-select {
        flex: 1;
    }

    .domain-submit {
        flex: 2;
    }

    .domain-intro-symbol {
        display: none;
    }
}

/* Shared desktop application layout */
@media (min-width: 1000px) {
    .app-shell {
        grid-template-columns: 250px minmax(0, 1fr);
        min-height: 100vh;
    }

    .sidebar {
        position: sticky;
        top: 0;
        width: 250px;
        min-width: 250px;
        height: 100vh;
    }

    .main-content {
        width: 100%;
        max-width: none;
        min-width: 0;
        margin: 0;
    }
}


/* Fix: keep the application shell full-width and consistent */
body.app-body {
    display: block;
    width: 100%;
    min-height: 100vh;
    margin: 0;
}

@media (min-width: 1000px) {
    body.app-body .app-shell {
        display: grid;
        width: 100%;
        max-width: none;
        min-height: 100vh;
        margin: 0;
        grid-template-columns: 250px minmax(0, 1fr);
        align-items: stretch;
    }

    body.app-body .sidebar {
        position: sticky;
        top: 0;
        width: auto;
        min-width: 0;
        height: 100vh;
        align-self: start;
    }

    body.app-body .main-content {
        width: 100%;
        max-width: none;
        min-width: 0;
        margin: 0;
    }
}


/* =========================================================
   Midnight Indigo — safe theme override
   Append this block to the VERY END of public/assets/css/app.css.
   It intentionally changes presentation only; no PHP behavior.
   ========================================================= */

:root {
    color-scheme: dark;
    --bg: #080a14;
    --panel: #101220;
    --panel-raised: #17192c;
    --border: #25294a;
    --text: #e9eaf7;
    --muted: #999cb8;
    --accent: #a8b0fa;
    --accent-bg: #25294a;
}

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

.app-body {
    background:
        radial-gradient(ellipse at 78% 0%, rgba(80, 91, 189, 0.16), transparent 38%),
        radial-gradient(ellipse at 5% 85%, rgba(44, 51, 117, 0.08), transparent 32%),
        var(--bg);
}

.login-body {
    background:
        radial-gradient(ellipse at 50% 25%, rgba(80, 91, 194, 0.20), transparent 50%),
        var(--bg);
}

/* Shared branding and headings */
.brand-icon {
    border-color: #454c7f;
    background: linear-gradient(145deg, #2a2f56, #12152b);
    color: #e1e3fd;
    box-shadow: 0 0 26px rgba(104, 115, 213, 0.10);
}

.brand-period,
.note-card h3 a:hover,
.note-edit-link:hover {
    color: var(--accent);
}

.eyebrow {
    color: #a2a6c3;
}

/* Sidebar */
.sidebar {
    border-right-color: #171b35;
    background: linear-gradient(180deg, #0d0f1f 0%, #0a0c18 100%);
}

.nav-heading {
    color: #787faf;
}

.nav-item {
    color: #a6aac5;
    transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}

.nav-item[href]:hover {
    border-color: #25294a;
    background: rgba(81, 88, 142, 0.12);
    color: #e9ebfe;
}

.nav-item.active {
    border-color: #393f6d;
    background: linear-gradient(100deg, rgba(82, 89, 144, 0.30), rgba(42, 48, 87, 0.18));
    color: #d4d8fd;
    box-shadow: inset 2px 0 0 #9fa8fa, 0 0 22px rgba(89, 99, 192, 0.07);
}

.nav-icon {
    color: #a5ace7;
}

.nav-disabled,
.nav-disabled .nav-icon {
    color: #5d649d;
}

.sidebar-bottom,
.dashboard-footer {
    border-color: #171b35;
}

.sidebar-bottom {
    color: #8f94b8;
}

/* Top bar and account controls */
.account-name {
    color: #e8eafa;
}

.account-avatar {
    border-color: #393f6d;
    background: linear-gradient(145deg, #1e2343, #13162c);
    color: #d3d7fd;
}

.button-logout,
.button-secondary {
    border-color: #25294a;
    background: #11142a;
    color: #c9ccdf;
}

.button-logout:hover,
.button-secondary:hover {
    border-color: #797fad;
    background: #171b35;
    color: #ffffff;
}

/* Primary actions */
.button-primary,
.new-note-button {
    border-color: #b1b8fb;
    background: linear-gradient(135deg, #acb4fb, #8791ec);
    color: #0e1022;
    box-shadow: 0 5px 18px rgba(104, 115, 213, 0.12);
}

.button-primary:hover,
.new-note-button:hover {
    border-color: #cacffc;
    background: linear-gradient(135deg, #c8cdfc, #9aa3f4);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline-color: var(--accent);
}

/* Dashboard and Domain & DNS hero panels */
.welcome-panel,
.domain-intro {
    border-color: #292f55;
    background:
        radial-gradient(ellipse at 88% 13%, rgba(119, 130, 231, 0.19), transparent 42%),
        radial-gradient(ellipse at 18% 100%, rgba(59, 66, 113, 0.13), transparent 48%),
        linear-gradient(115deg, #12152b, #0c0e1e 78%);
    box-shadow: inset 0 1px 0 rgba(226, 229, 254, 0.025);
}

.welcome-panel h2,
.domain-intro h2 {
    color: #eef0fe;
}

.welcome-description,
.domain-intro p:not(.eyebrow) {
    color: #b4b7ce;
}

.welcome-symbol,
.domain-intro-symbol {
    color: rgba(150, 159, 244, 0.13);
}

.environment-badge {
    border-color: #2c3159;
    background: rgba(11, 13, 26, 0.64);
    color: #ccd0ef;
}

/* Cards and panels used across Overview, Notes, and DNS */
.feature-card,
.note-card,
.note-editor,
.domain-search-panel,
.domain-panel {
    border-color: var(--border);
    background: linear-gradient(145deg, #0f1124, #0b0d1c);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
}

.feature-card:hover {
    border-color: #404778;
    box-shadow: 0 12px 30px rgba(55, 61, 107, 0.10);
}

.feature-icon,
.empty-note-icon,
.domain-empty-icon {
    border-color: #373d6a;
    background: #171a34;
    color: #bdc4fc;
}

.feature-icon-mail,
.feature-icon-notes,
.feature-icon-files {
    border-color: #373d6a;
    background: #171a34;
    color: #cdd1fc;
}

.feature-status,
.feature-footer,
.section-count {
    color: #8e93b8;
}

.feature-card p,
.note-preview,
.notes-muted,
.notes-list-heading > span {
    color: #a2a6c3;
}

/* Form controls */
.login-form input,
.notes-input,
.notes-textarea,
.notes-select,
.domain-input,
.domain-select {
    border-color: #25294a;
    background: #090b17;
    color: var(--text);
}

.login-form input:focus,
.notes-input:focus,
.notes-textarea:focus,
.notes-select:focus,
.domain-input:focus,
.domain-select:focus {
    border-color: #878fd8;
    box-shadow: 0 0 0 3px rgba(159, 168, 250, 0.13);
}

.notes-search {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.notes-search:focus {
    border-color: transparent;
    box-shadow: none;
}

.login-form label,
.domain-search-panel > label,
.note-editor label {
    color: #d9dbe9;
}

/* Notes tags, links, and empty state */
.note-type-label,
.note-edit-link {
    color: #bcc2fb;
}

.note-tag,
.domain-record-badge,
.domain-panel-icon,
.domain-chip {
    border-color: #2a2f56;
    background: #13162d;
    color: #cacffc;
}

.note-card-actions,
.editor-actions,
.domain-info-row {
    border-color: #1b1f3c;
}

.notes-empty,
.domain-empty {
    border-color: #272c51;
    background: rgba(13, 15, 31, 0.72);
}

/* DNS details */
.domain-info-row > strong {
    color: #e3e5f6;
}

.domain-info-row > span,
.domain-footnote,
.domain-muted,
.domain-hint,
.domain-empty p {
    color: #979cbd;
}

.dns-record {
    border-color: #25294a;
    background: #0a0c18;
}

.dns-record-meta {
    color: #b8bffb;
}

.dns-record-name {
    color: #c9ccdf;
}

.domain-unavailable {
    border-color: #25294a;
    background: #0d0f1f;
}

.domain-unavailable strong {
    color: #dee0f5;
}

/* Preserve success and warning colors as status signals. */
.notes-success,
.dns-status-ok {
    border-color: #285541;
    background: #11251c;
    color: #a8e4c3;
}

.alert-error {
    border-color: #713b46;
    background: #2a171e;
    color: #ffb5bf;
}

@media (prefers-reduced-motion: reduce) {
    .nav-item,
    .feature-card,
    .button-primary {
        transition: none;
    }
}


/* ===========================
   Mail Diagnostics module
   =========================== */

.mail-intro {
    position: relative;
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
    padding: 27px 30px;
    border: 1px solid color-mix(in srgb, var(--accent, #919bf9) 24%, var(--border, #191d39));
    border-radius: 14px;
    background:
        radial-gradient(ellipse at 91% 18%, rgba(127, 139, 248, 0.14), transparent 45%),
        linear-gradient(115deg, var(--panel-raised, #0f1125), var(--panel, #0c0e1d));
}

.mail-intro h2 {
    margin: 12px 0 9px;
    font-size: clamp(25px, 3vw, 34px);
    font-weight: 650;
    letter-spacing: -1.1px;
}

.mail-intro p:not(.eyebrow) {
    max-width: 560px;
    margin: 0;
    color: var(--muted, #8086b1);
    font-size: 12px;
    line-height: 1.8;
}

.mail-intro-symbol {
    color: color-mix(in srgb, var(--accent, #919bf9) 17%, transparent);
    font-size: clamp(68px, 9vw, 112px);
    font-weight: 800;
    letter-spacing: -0.08em;
    line-height: 1;
}

.mail-search-panel {
    margin-bottom: 28px;
    padding: 21px;
    border: 1px solid var(--border, #191d39);
    border-radius: 12px;
    background: var(--panel, #0c0e1d);
}

.mail-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 16px;
}

.mail-field {
    min-width: 0;
}

.mail-field label {
    display: block;
    margin-bottom: 9px;
    color: var(--text, #e7e8f2);
    font-size: 11px;
    font-weight: 650;
}

.mail-field label span {
    color: var(--muted, #8086b1);
    font-weight: 400;
}

.mail-input {
    width: 100%;
    min-height: 45px;
    padding: 0 13px;
    border: 1px solid var(--border, #25294a);
    border-radius: 8px;
    background: var(--bg, #070812);
    color: var(--text, #e7e8f2);
    font: inherit;
    font-size: 12px;
}

.mail-input:focus {
    border-color: var(--accent, #919bf9);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #919bf9) 13%, transparent);
}

.mail-field-hint {
    margin: 8px 0 0;
    color: var(--muted, #8086b1);
    font-size: 10px;
    line-height: 1.7;
}

.mail-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 17px;
    padding-top: 15px;
    border-top: 1px solid var(--border, #191d39);
}

.mail-form-actions .mail-field-hint {
    margin: 0;
}

.mail-form-actions .domain-submit {
    min-height: 43px;
}

.mail-result-heading {
    margin-top: 28px;
}

.mail-result-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px;
}

.mail-panel {
    min-width: 0;
    padding: 21px;
    border: 1px solid var(--border, #191d39);
    border-radius: 12px;
    background: linear-gradient(145deg, var(--panel-raised, #0f1125), var(--panel, #0c0e1d));
}

.mail-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
}

.mail-panel-heading h3 {
    margin: 7px 0 0;
    font-size: 16px;
    font-weight: 650;
}

.mail-status {
    flex-shrink: 0;
    padding: 6px 8px;
    border: 1px solid var(--border, #25294a);
    border-radius: 6px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.mail-status--good {
    border-color: #285541;
    background: #11251c;
    color: #a8e4c3;
}

.mail-status--warning {
    border-color: #6a4e2c;
    background: #291f14;
    color: #efc38a;
}

.mail-status--bad {
    border-color: #713b46;
    background: #2a171e;
    color: #ffb5bf;
}

.mail-status--info {
    border-color: #292f55;
    background: #101327;
    color: #bec1d6;
}

.mail-result-message {
    margin: 0 0 14px;
    color: var(--muted, #8086b1);
    font-size: 11px;
    line-height: 1.8;
}

.mail-mx-list,
.mail-record-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.mail-mx-record {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 12px;
    border: 1px solid var(--border, #191d39);
    border-radius: 8px;
    background: var(--bg, #070812);
}

.mail-priority {
    flex-shrink: 0;
    padding: 5px 6px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--accent, #919bf9) 11%, transparent);
    color: var(--accent, #919bf9);
    font-size: 9px;
    font-weight: 700;
}

.mail-mx-record code {
    padding-top: 4px;
    color: var(--text, #e7e8f2);
    font-size: 11px;
    overflow-wrap: anywhere;
}

.mail-record-value {
    display: block;
    max-width: 100%;
    margin: 0;
    padding: 12px;
    overflow-x: auto;
    border: 1px solid var(--border, #191d39);
    border-radius: 8px;
    background: var(--bg, #070812);
    color: #a8d8c1;
    font-family: Consolas, "Courier New", monospace;
    font-size: 10px;
    line-height: 1.8;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.mail-record-name {
    margin: 0 0 10px;
    overflow-wrap: anywhere;
    color: var(--muted, #8086b1);
    font-size: 10px;
}

.mail-record-name code,
.mail-guidance code,
.mail-empty code {
    color: var(--accent, #919bf9);
    overflow-wrap: anywhere;
}

.mail-mini-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.mail-mini-facts span {
    padding: 7px 9px;
    border: 1px solid var(--border, #191d39);
    border-radius: 7px;
    color: var(--muted, #8086b1);
    font-size: 9px;
}

.mail-mini-facts strong {
    margin-left: 4px;
    color: var(--text, #e7e8f2);
    font-weight: 700;
}

.mail-guidance {
    margin: 13px 0 0;
    color: var(--muted, #8086b1);
    font-size: 10px;
    line-height: 1.8;
}

.mail-subheading {
    margin: 13px 0 8px;
    color: var(--text, #e7e8f2);
    font-size: 10px;
    font-weight: 700;
}

.mail-disclaimer {
    margin: 18px 0 0;
    color: var(--muted, #8086b1);
    font-size: 10px;
    line-height: 1.8;
}

.mail-empty {
    margin-top: 4px;
}

@media (max-width: 950px) {
    .mail-result-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .mail-intro-symbol {
        display: none;
    }

    .mail-form-grid {
        grid-template-columns: 1fr;
    }

    .mail-form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .mail-form-actions .domain-submit {
        width: 100%;
    }

    .mail-panel-heading {
        align-items: flex-start;
    }
}


/* Context-aware repair suggestions */
.mail-recommendation {
    margin-top: 18px;
    padding: 14px;
    border: 1px solid rgba(159, 168, 250, 0.28);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(57, 63, 109, 0.18), rgba(13, 15, 31, 0.55));
}
.mail-recommendation > strong {
    display: block;
    color: #cbd0fc;
    font-size: 12px;
    font-weight: 700;
}
.mail-recommendation p {
    margin: 7px 0 0;
    color: var(--muted, #979cbd);
    font-size: 12px;
    line-height: 1.7;
}
.mail-recommendation-record {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    margin: 10px 0 0;
    padding: 10px;
    border: 1px solid rgba(159, 168, 250, 0.2);
    border-radius: 7px;
    background: rgba(5, 6, 13, 0.65);
    color: #daddfd;
    font-size: 11px;
}

/* Guided record repair workspace */
.mail-repair-wizard { margin: 28px 0; padding: 24px; border: 1px solid rgba(159, 168, 250, .22); border-radius: 16px; background: linear-gradient(145deg, rgba(30, 34, 66, .28), rgba(13, 15, 31, .82)); }
.mail-repair-heading, .mail-repair-output-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.mail-repair-heading h2 { margin: 0 0 8px; font-size: 22px; }
.mail-repair-heading p:not(.eyebrow) { max-width: 720px; margin: 0; color: var(--muted, #979cbd); font-size: 13px; line-height: 1.7; }
.mail-repair-step { flex:0 0 auto; padding:7px 10px; border:1px solid rgba(159, 168, 250, .25); border-radius:999px; color:#cbd0fc; font-size:10px; font-weight:700; letter-spacing:.07em; }
.mail-repair-form-grid { display:grid; grid-template-columns: .7fr 1.3fr .8fr; gap:14px; margin-top:22px; }
.mail-repair-wizard .mail-field { min-width:0; }
.mail-repair-wizard .mail-field label { display:block; margin-bottom:7px; color:var(--text, #ecedfa); font-size:12px; font-weight:650; }
.mail-repair-wizard .mail-field label span { color:var(--muted, #979cbd); font-weight:400; }
.mail-repair-wizard .mail-input { width:100%; min-width:0; box-sizing:border-box; padding:11px 12px; border:1px solid rgba(159, 168, 250, .22); border-radius:9px; background:rgba(5, 6, 13, .7); color:var(--text, #ecedfa); font:inherit; font-size:13px; }
.mail-repair-wizard .mail-input:focus { outline:2px solid rgba(159, 168, 250, .45); outline-offset:1px; }
.mail-repair-textarea { resize:vertical; margin-top:0; }
.mail-repair-current-field { margin-top:16px; }
.mail-repair-options { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px; }
.mail-repair-options[hidden], .mail-repair-selector-field[hidden], .mail-repair-output[hidden], .mail-repair-feedback[hidden] { display:none; }
.mail-repair-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.mail-repair-actions button, .mail-copy-button { border:1px solid rgba(159, 168, 250, .3); border-radius:9px; padding:10px 14px; background:#1e2242; color:#ecedfa; font-size:12px; font-weight:700; cursor:pointer; }
.mail-repair-actions button:disabled { opacity:.4; cursor:not-allowed; }
.mail-repair-actions .button-secondary { background:rgba(13, 15, 31, .9); }
.mail-repair-feedback { margin-top:15px; padding:13px 15px; border:1px solid rgba(159, 168, 250, .2); border-radius:10px; white-space:pre-line; color:var(--text, #ecedfa); font-size:12px; line-height:1.7; }
.mail-repair-feedback--warning { border-color:rgba(245, 184, 85, .4); background:rgba(120, 75, 12, .12); }
.mail-repair-feedback--error { border-color:rgba(255, 107, 129, .4); background:rgba(120, 20, 40, .13); }
.mail-repair-feedback--success { border-color:rgba(100, 210, 160, .35); background:rgba(20, 100, 70, .12); }
.mail-repair-output { margin-top:20px; padding-top:20px; border-top:1px solid rgba(159, 168, 250, .2); }
.mail-repair-output-heading h3 { margin:0; font-size:17px; }
.mail-repair-output-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:14px; margin-top:16px; }
.mail-copy-field { display:flex; align-items:stretch; gap:7px; }
.mail-copy-field .mail-input { flex:1; }
.mail-copy-field textarea { resize:vertical; }
.mail-copy-button { flex:0 0 auto; align-self:flex-start; }
.mail-copy-all { margin-top:12px; }
@media (max-width:760px) { .mail-repair-form-grid, .mail-repair-options, .mail-repair-output-grid { grid-template-columns:1fr; } .mail-repair-heading, .mail-repair-output-heading { flex-direction:column; } .mail-repair-wizard { padding:17px; } }


/* Den File Vault — Milestone 1 */
.vault-intro{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:28px 30px;margin:24px 0;background:linear-gradient(135deg,rgba(159, 168, 250, .12),rgba(30, 34, 66, .18));border:1px solid var(--border-color,rgba(159, 168, 250, .2));border-radius:20px}
.vault-intro h2{margin:0 0 10px;font-size:clamp(1.5rem,3vw,2rem)}
.vault-intro p:not(.eyebrow){max-width:620px;color:var(--text-muted,#9da1c0);margin:0;line-height:1.65}
.vault-usage{min-width:150px;padding:16px 18px;border:1px solid var(--border-color,rgba(159, 168, 250, .2));border-radius:14px;background:rgba(8, 9, 20, .45);display:flex;flex-direction:column;gap:5px}
.vault-usage span,.vault-usage small{color:var(--text-muted,#9da1c0);font-size:.8rem}.vault-usage strong{font-size:1.45rem;color:var(--text-primary,#ecedfa)}
.vault-alert,.vault-success{margin:16px 0;padding:13px 16px;border-radius:12px}.vault-success{border:1px solid rgba(100, 210, 160, .3);background:rgba(60, 160, 110, .1);color:#9fe4c2}
.vault-toolbar{display:flex;flex-direction:column;gap:18px;padding:18px 0;border-bottom:1px solid var(--border-color,rgba(159, 168, 250, .16))}
.vault-breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:.9rem}.vault-breadcrumbs span{color:var(--text-muted,#777dac)}.vault-breadcrumbs a{color:var(--text-primary,#ecedfa);text-decoration:none}.vault-breadcrumbs a:hover{color:var(--accent,#9fa8fa)}
.vault-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.vault-upload-form,.vault-folder-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.vault-file-input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.vault-upload-form label.button-primary{cursor:pointer;display:inline-flex;align-items:center}.vault-folder-form input,.vault-menu-panel input,.vault-menu-panel select{min-width:150px;max-width:100%;padding:9px 11px;border:1px solid var(--border-color,rgba(159, 168, 250, .25));border-radius:9px;background:var(--input-bg,#0d0f1f);color:var(--text-primary,#ecedfa)}
.vault-hint{font-size:.8rem;color:var(--text-muted,#868cb4);margin:14px 0 20px;line-height:1.6}
.vault-empty{padding:56px 24px;text-align:center;border:1px dashed var(--border-color,rgba(159, 168, 250, .25));border-radius:18px;margin-top:18px}.vault-empty-icon{font-size:2rem;color:var(--accent,#9fa8fa)}.vault-empty h3{margin:14px 0 8px}.vault-empty p{color:var(--text-muted,#9da1c0);margin:0}
.vault-table-wrap{width:100%;overflow-x:auto;border:1px solid var(--border-color,rgba(159, 168, 250, .18));border-radius:15px;margin:12px 0 24px}.vault-table{width:100%;border-collapse:collapse;min-width:760px}.vault-table th,.vault-table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--border-color,rgba(159, 168, 250, .12));font-size:.86rem}.vault-table th{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted,#9da1c0);background:rgba(30, 34, 66, .16)}.vault-table tbody tr:last-child td{border-bottom:0}.vault-table tbody tr:hover{background:rgba(159, 168, 250, .035)}
.vault-name-cell{display:flex;align-items:center;gap:10px;min-width:200px}.vault-item-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:0 0 32px;border-radius:9px;background:rgba(159, 168, 250, .1);color:var(--accent,#9fa8fa)}.vault-item-icon.is-folder{background:rgba(159, 168, 250, .14)}.vault-item-name{color:var(--text-primary,#ecedfa);font-weight:600;overflow-wrap:anywhere}.vault-name-cell a{text-decoration:none}.vault-name-cell a:hover{color:var(--accent,#9fa8fa)}
.vault-row-actions{display:flex;align-items:center;gap:12px}.vault-action-link{color:var(--accent,#9fa8fa);text-decoration:none;white-space:nowrap}.vault-menu{position:relative}.vault-menu summary{cursor:pointer;color:var(--text-muted,#acafc8);white-space:nowrap}.vault-menu-panel{position:absolute;z-index:10;right:0;top:26px;width:min(320px,80vw);padding:14px;display:grid;gap:14px;background:var(--panel-bg,#0d0f1f);border:1px solid var(--border-color,rgba(159, 168, 250, .25));border-radius:12px;box-shadow:0 18px 45px rgba(0, 0, 0, .35)}.vault-menu-panel form{display:grid;gap:8px}.vault-menu-panel label{display:grid;gap:6px;font-size:.78rem;color:var(--text-muted,#9da1c0)}.vault-menu-panel button{justify-self:start;border:1px solid var(--border-color,rgba(159, 168, 250, .25));border-radius:8px;padding:7px 10px;background:rgba(159, 168, 250, .1);color:var(--text-primary,#ecedfa);cursor:pointer}.vault-menu-panel .vault-delete-button{color:#ff9caa;border-color:rgba(255, 120, 140, .3)}
@media(max-width:760px){.vault-intro{flex-direction:column;padding:22px}.vault-usage{width:100%;box-sizing:border-box}.vault-actions,.vault-upload-form,.vault-folder-form{width:100%}.vault-folder-form input{flex:1;min-width:130px}.vault-upload-form .button-primary,.vault-folder-form .button-secondary{min-height:40px}}



/* Den File Vault refresh: card grid, upload selection previews, floating menus, themed scrollbars */
.vault-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin:14px 0 28px;align-items:stretch}
.vault-card{position:relative;min-width:0;border:1px solid rgba(159, 168, 250, .18);border-radius:15px;background:rgba(11, 13, 26, .62);overflow:visible;transition:border-color .18s ease,transform .18s ease,background .18s ease}
.vault-card:hover{border-color:rgba(159, 168, 250, .42);background:rgba(16, 19, 40, .8);transform:translateY(-2px)}
.vault-card-preview{height:178px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border-radius:14px 14px 0 0;background:linear-gradient(145deg,rgba(159, 168, 250, .09),rgba(19, 22, 45, .5));text-decoration:none}
.vault-image-preview img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}.vault-image-preview:hover img{transform:scale(1.035)}
.vault-image-open{position:absolute;inset:auto 10px 10px auto;padding:6px 9px;border-radius:8px;background:rgba(7, 8, 18, .82);color:#f0f1fe;font-size:.75rem;opacity:0;transition:opacity .15s}.vault-image-preview:hover .vault-image-open,.vault-image-preview:focus-visible .vault-image-open{opacity:1}
.vault-folder-art svg{width:88px;height:72px;fill:#8b94e8;filter:drop-shadow(0 10px 18px rgba(0, 0, 0, .2))}.vault-folder-art .folder-flap{fill:#aab2fb}
.vault-file-art{width:68px;height:82px;border:1px solid rgba(170, 178, 251, .42);border-radius:9px;background:rgba(159, 168, 250, .1);display:flex;align-items:center;justify-content:center;color:#bbc1fb;font-weight:750;font-size:.72rem;letter-spacing:.04em;overflow:hidden;padding:5px;text-align:center}
.vault-card-info{padding:13px;display:flex;align-items:flex-start;gap:8px;justify-content:space-between;min-width:0}.vault-card-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;width:100%;min-width:0}.vault-card-title-wrap{display:flex;flex-direction:column;gap:7px;min-width:0}.vault-card-name{color:var(--text-primary,#ecedfa);font-size:.88rem;font-weight:650;line-height:1.35;overflow-wrap:anywhere;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.vault-card-name:hover{color:#b1b8fb}.vault-card-meta{font-size:.74rem;color:var(--text-muted,#9da1c0);line-height:1.35}
.vault-row-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}.vault-action-link{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:rgba(159, 168, 250, .08);font-size:1.1rem}.vault-menu{position:relative}.vault-menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;width:29px;height:28px;border-radius:8px;border:1px solid transparent;color:#c0c2d7;font-size:.82rem;letter-spacing:.05em}.vault-menu summary::-webkit-details-marker{display:none}.vault-menu[open] summary,.vault-menu summary:hover{background:rgba(159, 168, 250, .13);border-color:rgba(159, 168, 250, .22)}
.vault-menu-panel{position:absolute;z-index:100;right:0;top:calc(100% + 8px);width:min(320px,calc(100vw - 36px));max-height:min(70vh,560px);overflow-y:auto;overscroll-behavior:contain;padding:15px;display:grid;gap:15px;background:#0e1022;border:1px solid rgba(159, 168, 250, .3);border-radius:13px;box-shadow:0 20px 55px rgba(0, 0, 0, .55)}.vault-menu-panel form{display:grid;gap:8px}.vault-menu-panel label{display:grid;gap:6px;font-size:.78rem;color:var(--text-muted,#9da1c0)}.vault-menu-panel input,.vault-menu-panel select{width:100%;min-width:0}.vault-menu-panel button{justify-self:start;border:1px solid rgba(159, 168, 250, .25);border-radius:8px;padding:8px 11px;background:rgba(159, 168, 250, .1);color:var(--text-primary,#ecedfa);cursor:pointer}.vault-menu-panel .vault-delete-button{color:#ff9caa;border-color:rgba(255, 120, 140, .3)}
.vault-upload-form{position:relative}.vault-upload-queue{flex-basis:100%;width:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;margin-top:8px}.vault-upload-queue[hidden]{display:none}.vault-upload-preview{min-width:0;display:flex;align-items:center;gap:9px;padding:8px;border:1px solid rgba(159, 168, 250, .2);border-radius:10px;background:rgba(159, 168, 250, .06)}.vault-upload-preview img{width:42px;height:42px;object-fit:cover;border-radius:7px;flex:0 0 42px}.vault-upload-file-icon{width:42px;height:42px;flex:0 0 42px;border-radius:7px;background:rgba(159, 168, 250, .12);color:#bbc1fb;display:grid;place-items:center;font-size:.65rem;font-weight:700}.vault-upload-file-details{min-width:0;display:flex;flex-direction:column;gap:3px;flex:1}.vault-upload-file-name{font-size:.78rem;color:#ecedfa;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vault-upload-file-size{font-size:.7rem;color:#9da1c0}.vault-upload-remove{border:0;background:transparent;color:#ff9caa;cursor:pointer;padding:5px;font-size:1rem}.vault-upload-summary{grid-column:1/-1;color:#9da1c0;font-size:.75rem;padding:2px 1px}
html{scrollbar-color:rgba(159, 168, 250, .48) rgba(10, 11, 24, .85);scrollbar-width:thin}*{scrollbar-width:thin;scrollbar-color:rgba(159, 168, 250, .42) rgba(10, 11, 24, .7)}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-track{background:rgba(10, 11, 24, .75);border-radius:999px}*::-webkit-scrollbar-thumb{background:rgba(159, 168, 250, .36);border:2px solid rgba(10, 11, 24, .75);border-radius:999px}*::-webkit-scrollbar-thumb:hover{background:rgba(170, 178, 251, .65)}
@media(max-width:760px){.vault-grid{grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:11px}.vault-card-preview{height:145px}.vault-card-info{padding:10px}.vault-menu-panel{position:fixed;top:50%;left:50%;right:auto;transform:translate(-50%,-50%);width:min(360px,calc(100vw - 28px));max-height:78vh;z-index:999}.vault-upload-queue{grid-template-columns:1fr}}


.wssl-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:28px 0 24px;padding:30px;border:1px solid rgba(159, 168, 250, .24);border-radius:22px;background:linear-gradient(120deg,rgba(59, 65, 113, .25),rgba(16, 18, 38, .82));}
.wssl-hero h2{margin:0 0 8px;font-size:clamp(26px,3vw,34px);letter-spacing:-.04em}.wssl-hero p:not(.eyebrow){max-width:700px;color:var(--text-muted,#9ca0bf);margin:0;line-height:1.65}.wssl-hero-icon{display:grid;place-items:center;flex:0 0 76px;height:76px;border:1px solid rgba(159, 168, 250, .28);border-radius:22px;background:rgba(159, 168, 250, .1);color:#a9b2fb;font-weight:800;letter-spacing:.12em}
.wssl-form{padding:22px;border:1px solid var(--border-color,rgba(159, 168, 250, .22));border-radius:18px;background:rgba(10, 11, 24, .58)}.wssl-form>label{display:block;margin-bottom:10px;font-weight:650}.wssl-form-row{display:flex;gap:10px}.wssl-form-row input{min-width:0;flex:1;padding:13px 15px;border:1px solid var(--border-color,rgba(159, 168, 250, .25));border-radius:10px;background:var(--input-bg,#0d0f1f);color:var(--text-primary,#ecedfa);font:inherit}.wssl-form-row input:focus{outline:2px solid rgba(159, 168, 250, .35);outline-offset:1px}.wssl-privacy-note,.wssl-disclaimer{font-size:12px;color:var(--text-muted,#9ca0bf);line-height:1.6}.wssl-alert{margin-top:16px}.wssl-results{margin-top:30px}.wssl-results-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.wssl-results-heading h2{margin:0;overflow-wrap:anywhere}.wssl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.wssl-card{min-width:0;padding:20px;border:1px solid var(--border-color,rgba(159, 168, 250, .2));border-radius:16px;background:rgba(11, 13, 27, .72)}.wssl-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.wssl-category{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#a0a6dd;font-weight:750}.wssl-status{display:inline-flex;align-items:center;padding:5px 9px;border:1px solid transparent;border-radius:999px;font-size:11px;font-weight:750}.wssl-status-good{color:#8ce0b4;background:rgba(42, 151, 98, .12);border-color:rgba(87, 205, 145, .24)}.wssl-status-warn{color:#f1cb86;background:rgba(185, 130, 42, .12);border-color:rgba(240, 190, 94, .24)}.wssl-status-bad{color:#ff9baf;background:rgba(190, 54, 84, .12);border-color:rgba(255, 110, 145, .24)}.wssl-status-neutral{color:#bbbed3;background:rgba(145, 149, 185, .1);border-color:rgba(159, 168, 250, .18)}.wssl-card h3{margin:0 0 9px;font-size:17px}.wssl-card>p{margin:0;color:var(--text-muted,#9ca0bf);font-size:13px;line-height:1.65;overflow-wrap:anywhere}.wssl-card dl{display:grid;gap:0;margin:16px 0 0;border-top:1px solid rgba(159, 168, 250, .13)}.wssl-card dl>div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid rgba(159, 168, 250, .09);font-size:12px}.wssl-card dt{color:var(--text-muted,#9ca0bf)}.wssl-card dd{margin:0;text-align:right;overflow-wrap:anywhere;max-width:60%;color:var(--text-primary,#ecedfa)}.wssl-disclaimer{margin-top:18px}.wssl-empty{margin-top:26px}
@media(max-width:760px){.wssl-hero{padding:22px}.wssl-hero-icon{flex-basis:54px;height:54px;border-radius:16px}.wssl-grid{grid-template-columns:minmax(0,1fr)}.wssl-form-row{flex-direction:column}.wssl-form-row .button-primary{justify-content:center}.wssl-results-heading{align-items:flex-start}}


/* Den Game Hub — Milestone 1 */
.gamehub-intro {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 26px;
    margin: 24px 0;
    border: 1px solid rgba(139, 150, 249, .22);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(92, 107, 246, .12), rgba(15, 18, 38, .85));
}

.gamehub-intro h2 { margin: 5px 0 8px; }
.gamehub-intro p { max-width: 650px; }

.gamehub-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px;
    align-items: stretch;
    margin: 14px 0 28px;
}

.gamehub-card {
    min-width: 0;
    padding: 22px;
    border: 1px solid rgba(139, 150, 249, .22);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(21, 24, 49, .96), rgba(12, 14, 29, .96));
    box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
}

.gamehub-card-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 12px;
}

.gamehub-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 14px;
    background: linear-gradient(145deg, #5b68db, #2a2f56);
    color: #ffffff;
    font-weight: 800;
}

.gamehub-card h3 { margin: 0; font-size: 1.05rem; }
.gamehub-tagline { min-height: 42px; font-size: .88rem; opacity: .75; }

.gamehub-empty {
    padding: 15px;
    border: 1px dashed rgba(139, 150, 249, .25);
    border-radius: 12px;
    background: rgba(255, 255, 255, .025);
    font-size: .9rem;
    line-height: 1.6;
}

.gamehub-event {
    padding: 13px 0;
    border-top: 1px solid rgba(255, 255, 255, .09);
    overflow-wrap: anywhere;
}

.gamehub-event h4 { margin: 0 0 6px; font-size: .95rem; }
.gamehub-meta { font-size: .8rem; opacity: .75; line-height: 1.7; }
.gamehub-event a { color: #aeb6fb; text-decoration: underline; }

.gamehub-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.gamehub-notice,
.gamehub-error {
    padding: 12px 15px;
    margin-bottom: 16px;
    border-radius: 12px;
}

.gamehub-notice {
    background: rgba(88, 180, 130, .12);
    border: 1px solid rgba(88, 180, 130, .28);
}

.gamehub-error {
    background: rgba(220, 80, 100, .12);
    border: 1px solid rgba(220, 80, 100, .28);
}

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

@media (max-width: 700px) {
    .gamehub-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .gamehub-intro {
        align-items: flex-start;
        flex-direction: column;
    }
}

.gamehub-icon-large {
    width: 66px;
    height: 66px;
    font-size: 1.25rem;
}


/*Nikke*/
.gamehub-intro {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 26px;
    border: 1px solid rgba(139, 150, 249, .22);
    border-radius: 20px;
    background:
        radial-gradient(ellipse at 80% 10%, rgba(92, 107, 246, .18), transparent 55%),
        rgba(15, 18, 38, .72);
    margin-bottom: 28px;
}

.gamehub-intro h2 { margin: 5px 0 8px; }
.gamehub-intro p { max-width: 650px; }

.gamehub-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.gamehub-card {
    min-width: 0;
    padding: 22px;
    border: 1px solid rgba(139, 150, 249, .2);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(21, 24, 49, .96), rgba(12, 14, 29, .96));
    box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
}

.gamehub-card-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 12px;
}

.gamehub-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(145deg, #5b68db, #2a2f56);
    color: #ffffff;
    font-weight: 800;
    flex-shrink: 0;
}

.gamehub-card h3 { margin: 0; font-size: 1.05rem; }
.gamehub-tagline { font-size: .88rem; opacity: .75; min-height: 42px; }

.gamehub-event {
    padding: 13px 0;
    border-top: 1px solid rgba(255, 255, 255, .09);
    overflow-wrap: anywhere;
}

.gamehub-event h4 { margin: 0 0 6px; font-size: .95rem; }
.gamehub-meta { font-size: .8rem; opacity: .75; line-height: 1.7; }
.gamehub-event a { color: #aeb6fb; text-decoration: underline; }
.gamehub-post {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 0;
    border-top: 1px solid rgba(255, 255, 255, .09);
}

.gamehub-post > a:first-child {
    display: block;
    width: 100%;
}

.gamehub-post-thumb {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
}
.gamehub-post h4 { margin: 0 0 7px; font-size: .92rem; line-height: 1.4; }
.gamehub-post a { color: #aeb6fb; text-decoration: none; }
.gamehub-post a:hover { text-decoration: underline; }
.gamehub-post-summary { margin: 0 0 7px; font-size: .82rem; opacity: .78; }
@media (max-width: 420px) {
    .gamehub-post {
        grid-template-columns: 1fr;
    }

    .gamehub-post-thumb {
        width: 100%;
    }
}

.gamehub-empty {
    padding: 15px;
    border: 1px dashed rgba(139, 150, 249, .22);
    border-radius: 12px;
    background: rgba(255, 255, 255, .025);
    font-size: .9rem;
    opacity: .8;
}

.gamehub-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.gamehub-notice,
.gamehub-error {
    padding: 12px 15px;
    border-radius: 12px;
    margin-bottom: 16px;
}

.gamehub-notice {
    background: rgba(88, 180, 130, .12);
    border: 1px solid rgba(88, 180, 130, .28);
}

.gamehub-error {
    background: rgba(220, 80, 100, .12);
    border: 1px solid rgba(220, 80, 100, .28);
}

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

@media (max-width: 700px) {
    .gamehub-grid { grid-template-columns: 1fr; }
    .gamehub-intro { align-items: flex-start; flex-direction: column; }
}


.gamehub-event-image-link {
    display: block;
    margin-bottom: 12px;
    overflow: hidden;
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
}

.gamehub-event-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
    transition: transform .2s ease;
}

.gamehub-event-image-link:hover .gamehub-event-image {
    transform: scale(1.03);
}

.gamehub-event-image-genshin {
    object-fit: contain;
    aspect-ratio: auto;
    max-height: 320px;
}

/* Den Overview: compact quick launch and Genshin banner showcase */
.overview-greeting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 8px 0 30px;
    padding: 28px 30px;
    border: 1px solid var(--border, #292f50);
    border-radius: 20px;
    background: linear-gradient(115deg, rgba(37, 41, 74, .72), rgba(17, 21, 43, .92) 65%, rgba(12, 14, 30, .96));
}
.overview-greeting h2 { margin: 5px 0 8px; font-size: clamp(1.5rem, 2.5vw, 2.15rem); letter-spacing: -.035em; }
.overview-greeting .muted { margin: 0; }
.overview-greeting-mark { color: #c6c9ff; font-size: 3.6rem; font-weight: 800; letter-spacing: -.1em; opacity: .85; padding-right: 12px; }
.overview-greeting-mark span { color: var(--accent, #a5acf5); }
.overview-section-heading { margin-bottom: 14px; }
.overview-section-heading h2 { margin-bottom: 0; }
.quick-launch-section, .overview-banners { margin-bottom: 32px; }
.quick-launch-bar {
    display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap;
    width: 100%; max-width: none; padding: 10px; justify-content: space-evenly;
    border: 1px solid var(--border, #292f50); border-radius: 18px;
    background: rgba(17, 21, 43, .78);
}
.quick-launch-item {
    display: flex; flex: 1 1 76px; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
    min-width: 64px; min-height: 78px; padding: 7px 4px; border-radius: 12px;
    color: var(--muted, #929bb8); text-decoration: none; font-size: .72rem; font-weight: 600;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.quick-launch-item:hover, .quick-launch-item:focus-visible { background: rgba(165, 172, 245, .12); color: var(--text, #e7eaf2); transform: translateY(-2px); outline: none; }
.quick-launch-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(165, 172, 245, .18); border-radius: 12px; background: linear-gradient(145deg, #292f58, #191e3a); color: #c6c9ff; font-size: 1.35rem; }
.overview-text-link { color: var(--accent, #a5acf5); font-size: .84rem; text-decoration: none; }
.overview-text-link:hover { text-decoration: underline; }
.overview-banner-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.overview-banner-card { min-width: 0; overflow: hidden; padding: 14px; border: 1px solid var(--border, #292f50); border-radius: 18px; background: linear-gradient(155deg, rgba(25, 30, 58, .9), rgba(13, 16, 32, .96)); }
.overview-banner-label { margin-bottom: 12px; color: var(--accent, #a5acf5); font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.overview-banner-image-link { display: block; overflow: hidden; border-radius: 12px; background: rgba(0, 0, 0, .18); }
.overview-banner-image { display: block; width: 100%; max-height: 290px; aspect-ratio: 16 / 9; object-fit: contain; transition: transform .2s ease; }
.overview-banner-image-link:hover .overview-banner-image { transform: scale(1.02); }
.overview-banner-card h3 { margin: 12px 2px 3px; font-size: .98rem; line-height: 1.45; }
.overview-banner-empty { display: flex; min-height: 190px; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 22px; border: 1px dashed rgba(165, 172, 245, .2); border-radius: 12px; text-align: center; background: rgba(8, 10, 20, .35); }
.overview-banner-empty p { margin: 0; color: var(--text, #e7eaf2); }
.overview-banner-empty span:last-child { color: var(--muted, #929bb8); font-size: .78rem; }
.overview-banner-empty-icon { color: var(--accent, #a5acf5); font-size: 2rem; }
.overview-banner-note { margin: 12px 2px 0; color: var(--muted, #929bb8); font-size: .75rem; line-height: 1.5; }
/* Expandable Game Hub sidebar navigation */
.nav-expandable { margin: 0; }
.nav-expandable > summary { display: flex; align-items: center; list-style: none; cursor: pointer; }
.nav-expandable > summary::-webkit-details-marker { display: none; }
.nav-expandable-label { flex: 1; }
.nav-chevron { margin-left: auto; font-size: 1rem; transition: transform .18s ease; }
.nav-expandable[open] .nav-chevron { transform: rotate(180deg); }
.nav-subitems { display: grid; gap: 3px; margin: 4px 0 8px 34px; padding-left: 12px; border-left: 1px solid var(--border, #292f50); }
.nav-subitem { display: block; padding: 8px 10px; border-radius: 8px; color: var(--muted, #929bb8); text-decoration: none; font-size: .84rem; transition: color .15s ease, background .15s ease; }
.nav-subitem:hover, .nav-subitem:focus-visible { color: var(--text, #e7eaf2); background: rgba(165, 172, 245, .1); outline: none; }
.gamehub-card[id] { scroll-margin-top: 24px; }
@media (max-width: 760px) {
    .overview-greeting { padding: 22px; }
    .overview-banner-grid { grid-template-columns: 1fr; }
    .quick-launch-bar { width: 100%; justify-content: space-around; }
    .quick-launch-item { width: 66px; }
}


/* Den Game Hub: single-game announcement feed layout */
.gamehub-grid.gamehub-grid-single {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    max-width: none;
}
.gamehub-grid.gamehub-grid-single > .gamehub-card {
    width: 100%;
    min-width: 0;
}
.gamehub-grid-single .gamehub-post {
    display: grid !important;
    grid-template-columns: minmax(240px, 38%) minmax(0, 1fr) !important;
    align-items: start;
    gap: 22px;
    min-width: 0;
}
.gamehub-grid-single .gamehub-post > a {
    display: block;
    min-width: 0;
    width: 100%;
}
.gamehub-grid-single .gamehub-post-thumb {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.gamehub-grid-single .gamehub-post > div,
.gamehub-grid-single .gamehub-event-content {
    min-width: 0;
    overflow-wrap: anywhere;
}
.gamehub-grid-single .gamehub-event-layout {
    display: grid;
    grid-template-columns: minmax(240px, 38%) minmax(0, 1fr);
    align-items: start;
    gap: 22px;
}
.gamehub-grid-single .gamehub-event-image-link {
    width: 100%;
    min-width: 0;
    margin: 0;
    align-self: start;
}
.gamehub-grid-single .gamehub-event-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.gamehub-grid-single .gamehub-event-image-genshin {
    object-fit: contain;
    aspect-ratio: auto;
    max-height: 320px;
}
.gamehub-grid-single .gamehub-event-content h4 {
    margin-top: 0;
    overflow-wrap: anywhere;
}
.gamehub-grid-single .gamehub-event-content p {
    overflow-wrap: anywhere;
}
@media (max-width: 760px) {
    .gamehub-grid-single .gamehub-post,
    .gamehub-grid-single .gamehub-event-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .gamehub-grid-single .gamehub-post-thumb,
    .gamehub-grid-single .gamehub-event-image {
        max-width: 100%;
    }
}


/* Genshin banner board + history page */
.overview-banner-board { display: grid; gap: 20px; }
.overview-banner-group { min-width: 0; padding: 16px; border: 1px solid var(--border, #292f50); border-radius: 20px; background: rgba(14, 17, 35, .48); }
.overview-banner-group-title { margin: 0 0 14px; color: var(--accent, #a5acf5); font-size: .76rem; font-weight: 800; letter-spacing: .13em; }
.overview-banner-grid-characters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.overview-banner-grid-lower { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }
.overview-banner-card h4 { margin: 10px 2px 2px; font-size: .9rem; line-height: 1.45; }
.overview-banner-dates { margin: 6px 2px 0; color: var(--muted, #a8afd2); font-size: .78rem; line-height: 1.5; }
.overview-banner-empty > span:not(.overview-banner-empty-icon) { display: block; margin-top: 6px; color: var(--muted, #a8afd2); font-size: .78rem; line-height: 1.45; }
.overview-banner-empty { min-height: 190px; }
.overview-banner-empty-compact { min-height: 130px; }
.banner-history-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.banner-history-filter { padding: 9px 14px; border: 1px solid var(--border, #292f50); border-radius: 999px; color: var(--muted, #929bb8); text-decoration: none; font-size: .82rem; }
.banner-history-filter:hover, .banner-history-filter.is-active { color: var(--text, #e7eaf2); border-color: rgba(165, 172, 245, .55); background: rgba(165, 172, 245, .12); }
.banner-history-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.banner-history-card { overflow: hidden; min-width: 0; border: 1px solid var(--border, #292f50); border-radius: 16px; background: linear-gradient(155deg, rgba(25, 30, 58, .9), rgba(13, 16, 32, .96)); }
.banner-history-image { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: rgba(0, 0, 0, .18); }
.banner-history-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.banner-history-no-image { display: grid; place-items: center; color: var(--muted, #929bb8); font-size: .85rem; }
.banner-history-card-body { padding: 14px; }
.banner-history-kind { color: var(--accent, #a5acf5); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.banner-history-card h3 { margin: 7px 0; font-size: .96rem; line-height: 1.45; }
.banner-history-card p { margin: 0; color: var(--muted, #929bb8); font-size: .8rem; }
.banner-history-empty { display: flex; min-height: 280px; flex-direction: column; align-items: center; justify-content: center; padding: 32px; border: 1px dashed rgba(165, 172, 245, .25); border-radius: 18px; text-align: center; background: rgba(14, 17, 35, .45); }
.banner-history-empty h2 { margin: 12px 0 8px; }
.banner-history-empty p { max-width: 620px; color: var(--muted, #929bb8); line-height: 1.6; }
.banner-history-back { display: inline-block; margin-top: 10px; text-decoration: none; }
@media (max-width: 760px) { .overview-banner-grid-characters, .overview-banner-grid-lower, .banner-history-grid { grid-template-columns: 1fr; } .overview-banner-group { padding: 12px; } }



/* Genshin character banner timeline */
.banner-timeline {
    margin-top: 24px;
}

.banner-timeline-heading h2 {
    margin-bottom: 6px;
}

.banner-timeline-year {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin: 24px 0 36px;
    padding: 12px;
    border: 1px solid var(--border-color, rgba(180, 150, 255, 0.2));
    border-radius: 14px;
}

.banner-timeline-year strong {
    font-size: 1.3rem;
}

.banner-timeline-year a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    background: rgba(155, 123, 234, 0.12);
    font-size: 1.6rem;
}

.banner-timeline-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.banner-timeline-month {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 24px;
}

.banner-timeline-month-label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-top: 12px;
    font-weight: 700;
}

.banner-timeline-year-label {
    color: var(--text-muted, #9c95ae);
    font-size: 0.85rem;
    font-weight: 400;
}

.banner-timeline-items {
    display: flex;
    flex-direction: column;
    gap: 22px;
    border-left: 2px solid rgba(155, 123, 234, 0.35);
    padding-left: 24px;
}

.banner-timeline-card {
    position: relative;
    display: grid;
    grid-template-columns: 135px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.banner-timeline-date {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 12px;
    font-size: 0.85rem;
}

.banner-timeline-date span {
    color: var(--text-muted, #9c95ae);
}

.banner-timeline-dot {
    position: absolute;
    left: -31px;
    top: 16px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #a78bfa;
    box-shadow: 0 0 14px rgba(167, 139, 250, 0.45);
}

.banner-timeline-content {
    overflow: hidden;
    min-width: 0;
    border: 1px solid var(--border-color, rgba(180, 150, 255, 0.2));
    border-radius: 14px;
    background: var(--card-bg, rgba(255, 255, 255, 0.025));
}

.banner-timeline-content .banner-history-image {
    overflow: hidden;
    aspect-ratio: 16 / 6;
}

.banner-timeline-content .banner-history-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-timeline-content .banner-history-card-body {
    padding: 18px;
}

@media (max-width: 760px) {
    .banner-timeline-month {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .banner-timeline-month-label {
        padding-top: 0;
    }

    .banner-timeline-card {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .banner-timeline-date {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
}



/* Genshin timeline: side-by-side banner cards */
.banner-timeline-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    border-left: 2px solid rgba(155, 123, 234, 0.35);
    padding-left: 24px;
    align-items: start;
}

.banner-timeline-items .banner-timeline-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    position: relative;
}

.banner-timeline-items .banner-timeline-date {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    padding-top: 0;
}

.banner-timeline-items .banner-timeline-content {
    width: 100%;
    min-width: 0;
}

.banner-timeline-items .banner-timeline-content .banner-history-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.banner-timeline-items .banner-timeline-content .banner-history-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-timeline-items .banner-timeline-dot {
    left: -31px;
    top: 5px;
}

@media (max-width: 760px) {
    .banner-timeline-items {
        grid-template-columns: 1fr;
    }
}


/* Game Hub logo sizing */
.gamehub-card-head .gamehub-icon {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.gamehub-card-head .gamehub-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

:root {
    --ease-out: cubic-bezier(0.22, 0.8, 0.24, 1);
    --dur-fast: 140ms;
    --dur-base: 220ms;
    --dur-slow: 300ms;
    /* Lets height animate to and from "auto" (used by the sidebar dropdown). */
    interpolate-size: allow-keywords;
}
 
@media (prefers-reduced-motion: no-preference) {
    /* Smooth in-page jumps such as #genshin-impact. */
    html {
        scroll-behavior: smooth;
    }
 
    /* Cross-fade between pages instead of a hard cut. */
    @view-transition {
        navigation: auto;
    }
}
 
/* Only the page content fades; the sidebar is captured separately and stays put. */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 160ms;
    animation-timing-function: ease-out;
}
 
.sidebar {
    view-transition-name: app-sidebar;
}
 
::view-transition-old(app-sidebar),
::view-transition-new(app-sidebar) {
    animation: none;
    mix-blend-mode: normal;
}
 
/* Game Hub sidebar dropdown: animate open and close instead of snapping. */
.nav-expandable::details-content {
    height: 0;
    overflow: clip;
    opacity: 0;
    transition:
        height var(--dur-slow) var(--ease-out),
        opacity var(--dur-base) ease,
        content-visibility var(--dur-slow) allow-discrete;
}
 
.nav-expandable[open]::details-content {
    height: auto;
    opacity: 1;
}
 
.nav-chevron {
    transition: transform var(--dur-slow) var(--ease-out);
}
 
/* One consistent easing for hover states. Box-shadow and background colors were
   not in the old transition lists, so they used to snap. */
.nav-item,
.nav-subitem,
.quick-launch-item,
.button-secondary,
.button-logout,
.banner-history-filter,
.feature-card,
.vault-card {
    transition-property: color, background-color, border-color, box-shadow, transform, opacity;
    transition-duration: var(--dur-base);
    transition-timing-function: var(--ease-out);
}
 
/* Gradients cannot be transitioned directly, so the primary button's gradient
   is built from two registered colors that can. */
@property --btn-a {
    syntax: "<color>";
    inherits: false;
    initial-value: #acb4fb;
}
 
@property --btn-b {
    syntax: "<color>";
    inherits: false;
    initial-value: #8791ec;
}
 
.button-primary,
.new-note-button {
    background: linear-gradient(135deg, var(--btn-a), var(--btn-b));
    transition:
        --btn-a var(--dur-base) ease,
        --btn-b var(--dur-base) ease,
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) ease,
        border-color var(--dur-base) ease;
}
 
.button-primary:hover,
.new-note-button:hover {
    --btn-a: #c8cdfc;
    --btn-b: #9aa3f4;
    background: linear-gradient(135deg, var(--btn-a), var(--btn-b));
}
 
/* Small press feedback. These come last so they win over the hover transforms. */
.button-primary:active,
.new-note-button:active,
.button-secondary:active,
.button-logout:active,
.quick-launch-item:active {
    transform: scale(0.97);
    transition-duration: var(--dur-fast);
}
 
/* Respect "reduce motion" everywhere. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}