/* Shared light interface. Theme aliases keep existing profile preferences usable. */
:root,
body[data-theme='sky'],
body[data-theme='midnight'] {
    --bg: #f2f8ff;
    --bg-soft: #ffffff;
    --surface: #ffffff;
    --surface-soft: #f6faff;
    --surface-border: #dce9f7;
    --text-main: #17304d;
    --text-muted: #668099;
    --primary: #1685e8;
    --primary-hover: #096fcb;
    --primary-rgb: 22, 133, 232;
    --input-bg: #f8fbff;
    --input-bg-focus: #ffffff;
}

body[data-theme='pearl'],
body[data-theme='graphite'] {
    --bg: #f6f9fc;
    --bg-soft: #ffffff;
    --surface: #ffffff;
    --surface-soft: #f9fbfe;
    --surface-border: #dfe8f1;
    --text-main: #21364c;
    --text-muted: #708398;
    --primary: #2e83d7;
    --primary-hover: #176dbb;
    --primary-rgb: 46, 131, 215;
    --input-bg: #f9fbfe;
    --input-bg-focus: #ffffff;
}

body[data-theme='ocean'] {
    --bg: #f0fbfc;
    --bg-soft: #ffffff;
    --surface: #ffffff;
    --surface-soft: #f5fcfd;
    --surface-border: #d2eaed;
    --text-main: #183c4a;
    --text-muted: #62828c;
    --primary: #1298af;
    --primary-hover: #0e7e92;
    --primary-rgb: 18, 152, 175;
    --input-bg: #f7fdfd;
    --input-bg-focus: #ffffff;
}

html { color-scheme: light; }
body,
button,
input,
select,
textarea { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
body {
    background: radial-gradient(circle at 75% -14%, rgba(var(--primary-rgb), .11), transparent 38%), var(--bg);
    color: var(--text-main);
}
::-webkit-scrollbar-track { background: #edf5fc; }
::-webkit-scrollbar-thumb { background: #bed7ec; border-color: #edf5fc; }

.panel,
.tilt-card {
    border-radius: 20px;
    border-color: var(--surface-border);
    background: var(--surface);
    box-shadow: 0 14px 35px rgba(38, 91, 144, .055);
}
.panel-soft { background: var(--surface-soft); border-color: var(--surface-border); }
.section-title,
.kpi-value { color: var(--text-main); }
.kpi-label {
    color: #70869b;
    font-family: 'DM Mono', monospace;
    font-size: .69rem;
    letter-spacing: .08em;
}
.badge-tech {
    border-color: #cde7fb;
    background: #edf8ff;
    color: #1269ad;
    font-family: 'DM Mono', monospace;
    letter-spacing: .035em;
}
.badge-online { border-color: #bcebd7; background: #edfbf4; color: #157753; }
.badge-offline { border-color: #ffd2d1; background: #fff4f3; color: #b74744; }
.status-text-online { color: #187d59; }
.status-text-offline { color: #b74744; }
.outline-btn {
    background: #ffffff;
    border-color: #d7e6f5;
    color: #28516e;
}
.outline-btn:hover { background: #f0f8ff; border-color: #b8d9f4; color: #1269ad; }
.magic-btn { background: var(--primary); border-color: var(--primary); color: #ffffff; }
.input-dark {
    background: var(--input-bg);
    border-color: #d5e5f3;
    color: var(--text-main);
}
.input-dark::placeholder { color: #8ca1b3; }
.input-dark:focus { background: var(--input-bg-focus); }
.range-blue { background: linear-gradient(90deg, #8ed6ff, var(--primary)); }

.app-content { max-width: 1560px; padding-bottom: 3rem; }
.app-content :is(h1, h2, h3, h4).text-white,
.app-content :is(p, span, div, td, strong, label).text-white { color: var(--text-main) !important; }
.app-content :is(.text-slate-100, .text-slate-200, .text-zinc-100, .text-zinc-200) { color: #29455f !important; }
.app-content :is(.text-slate-300, .text-zinc-300) { color: #47637e !important; }
.app-content :is(.text-slate-400, .text-zinc-400) { color: #678098 !important; }
.app-content :is(.text-slate-500, .text-zinc-500) { color: #8297aa !important; }
.app-content [class*='bg-black/'] { background-color: #f7fbff !important; }
.app-content [class*='border-white/'] { border-color: #deebf6 !important; }
.app-content .magic-btn,
.app-content .danger-btn,
.app-content .manage-btn { color: #ffffff !important; }
.app-content .remove-btn { color: #ad4949 !important; }
.app-content .remove-btn:hover { color: #9b3030 !important; }
.app-content .dashboard-bot-grid > article:hover { box-shadow: 0 18px 38px rgba(41, 103, 161, .09); }

.app-sidebar {
    background: #ffffff;
    border-color: #dfeaf4;
    box-shadow: 16px 0 34px rgba(28, 68, 108, .09);
}
.sidebar-brand-card { border-bottom-color: #e6eef6; }
.sidebar-brand-domain { color: #17304d; font-weight: 800; letter-spacing: -.04em; }
.sidebar-brand-sub { color: #7190aa; font-family: 'DM Mono', monospace; letter-spacing: .08em; }
.sidebar-brand-icon {
    border-color: #bfe4ff;
    background: linear-gradient(145deg, #d8f1ff, #eef8ff);
    color: #0878ce;
}
.sidebar-account { background: #f4f9fe; border-color: #e0edf8; }
.sidebar-account-icon { background: #e8f4fe; border-color: #cce6fa; color: #167bc3; }
.sidebar-account p.text-slate-400 { color: #7690a6 !important; }
.sidebar-account p.text-slate-100 { color: #17304d !important; }
.sidebar-section-label { color: #8da3b6; font-family: 'DM Mono', monospace; }
.sidebar-link { color: #557087; border-radius: 11px; }
.sidebar-link:hover { color: #1269ad; background: #f0f8ff; border-color: #d3e9fa; }
.sidebar-link.is-active {
    color: #0874c9;
    background: #e8f5ff;
    border-color: #c7e6fc;
    font-weight: 700;
}
.mobile-menu-toggle,
.sidebar-close { background: #ffffff; color: #1b4b72; border-color: #d4e8f8; }
.page-loader { background: rgba(226, 242, 253, .65); }
.page-loader-spinner { border-color: #d8ebfa; border-top-color: var(--primary); }

.news-banner {
    border-color: #c8e5f9;
    background: #eff9ff;
    color: #2b5675;
}
.news-banner-icon { border-color: #bee0f7; }
.news-banner-title { color: #1269ad; font-family: 'DM Mono', monospace; }
.news-banner-text { color: #365a74; }
.news-banner-success { border-color: #bfecd8; background: #effbf5; }
.news-banner-success .news-banner-title,
.news-banner-success .news-banner-text { color: #197b56; }
.news-banner-warning { border-color: #f7dfb4; background: #fffaf0; }
.news-banner-warning .news-banner-title,
.news-banner-warning .news-banner-text { color: #9f6b19; }

/* Dashboard is deliberately compact: status first, bot list second, news alongside. */
.dashboard-page { display: grid; gap: 1.4rem; }
.dash-eyebrow { color: #1784cb; font: 500 .7rem 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .16em; }
.dash-title { color: #17304d; font-size: clamp(2rem, 3vw, 2.9rem); line-height: 1.12; font-weight: 800; letter-spacing: -.055em; overflow-wrap: anywhere; }
.dash-lead { color: #678098; font-size: .94rem; line-height: 1.6; }
.dash-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.dash-head-actions { display: flex; align-items: center; gap: .65rem; }
.dash-notify-button {
    position: relative; display: grid; place-items: center; width: 43px; height: 43px;
    border: 1px solid #d9e9f6; border-radius: 13px; color: #397396; background: #ffffff;
}
.dash-notify-button:hover { background: #eef8ff; border-color: #b7dff8; }
.dash-notify-count {
    position: absolute; top: -5px; right: -5px; display: grid; place-items: center;
    min-width: 19px; height: 19px; padding: 0 4px; border-radius: 999px;
    background: #ef6265; color: #ffffff; font-size: .65rem; font-weight: 800;
}
.dash-notification-popover {
    position: absolute; z-index: 30; right: 0; top: calc(100% + 9px);
    width: min(350px, calc(100vw - 2rem)); padding: 1rem; border: 1px solid #dce9f7;
    border-radius: 17px; background: #ffffff; box-shadow: 0 22px 50px rgba(24, 66, 108, .17);
}
.dash-notification-item { padding: .8rem; border: 1px solid #e2ecf6; border-radius: 12px; background: #f8fbff; }
.dash-notification-item + .dash-notification-item { margin-top: .5rem; }
.dash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.dash-kpi { min-height: 132px; padding: 1.15rem 1.2rem; border: 1px solid #dce9f7; border-radius: 19px; background: #ffffff; box-shadow: 0 12px 28px rgba(38, 91, 144, .045); }
.dash-kpi-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; }
.dash-kpi-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #e9f6ff; color: #1685e8; }
.dash-kpi-icon.online { background: #e8f9ef; color: #229b69; }
.dash-kpi-icon.offline { background: #fff1ef; color: #db7770; }
.dash-kpi-label { color: #7590a4; font-size: .78rem; font-weight: 600; }
.dash-kpi-value { display: block; margin-top: .5rem; color: #17304d; font-size: 2rem; line-height: 1; font-weight: 800; letter-spacing: -.055em; }
.dash-layout { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(280px, .8fr); gap: 1rem; align-items: start; }
.dash-card { border: 1px solid #dce9f7; border-radius: 20px; background: #ffffff; box-shadow: 0 14px 35px rgba(38, 91, 144, .05); overflow: hidden; }
.dash-card-header { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: 1.25rem 1.3rem; border-bottom: 1px solid #e8eff6; }
.dash-card-title { color: #17304d; font-size: 1.08rem; font-weight: 800; letter-spacing: -.025em; }
.dash-card-caption { margin-top: .25rem; color: #8298aa; font-size: .78rem; }
.dash-search { max-width: 250px; padding: .55rem .75rem; font-size: .79rem; }
.dash-bot-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(100px, .5fr) auto; align-items: center; gap: .7rem; min-height: 82px; padding: .95rem 1.3rem; border-bottom: 1px solid #edf2f7; transition: background .16s ease; }
.dash-bot-row:last-child { border-bottom: 0; }
.dash-bot-row:hover { background: #f7fbff; }
.dash-bot-identity { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.dash-bot-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 43px; height: 43px; border-radius: 12px; color: #1685e8; background: linear-gradient(145deg, #d9f0ff, #f0f9ff); }
.dash-bot-name { color: #193853; font-size: .91rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-bot-meta { color: #8ca0b0; font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-bot-host { color: #698398; font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-bot-end { display: flex; align-items: center; gap: .7rem; }
.dash-manage-link { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #d7eaf8; border-radius: 10px; color: #1977b9; background: #f5fbff; }
.dash-manage-link:hover { background: #e7f5ff; }
.dash-empty { padding: 2.4rem 1.3rem; text-align: center; }
.dash-empty-icon { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 1rem; border-radius: 17px; color: #1685e8; background: #e9f6ff; }
.dash-side-stack { display: grid; gap: 1rem; }
.dash-news-list { display: grid; gap: .75rem; padding: 1rem 1.2rem 1.25rem; }
.dash-news-item { border: 1px solid #deebf6; border-radius: 14px; background: #f8fbff; padding: .9rem 1rem; }
.dash-news-item[data-kind='update'] { border-color: #cae4f8; background: #f1f9ff; }
.dash-news-item[data-kind='maintenance'] { border-color: #f5e2bf; background: #fffbf3; }
.dash-news-date { display: block; margin-bottom: .35rem; color: #8299ac; font: 500 .65rem 'DM Mono', monospace; }
.dash-news-title { color: #213e58; font-size: .84rem; font-weight: 800; }
.dash-news-body { margin-top: .3rem; color: #607c93; font-size: .78rem; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.dash-quick-links { display: grid; gap: .5rem; padding: 1rem 1.2rem 1.2rem; }
.dash-quick-link { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .8rem .85rem; border: 1px solid #e1edf7; border-radius: 12px; color: #285873; background: #f8fbff; font-size: .81rem; font-weight: 700; }
.dash-quick-link:hover { color: #0874c9; background: #eaf6ff; border-color: #c7e4f9; }
.dash-quick-link i:first-child { color: #1685e8; margin-right: .55rem; }

@media (max-width: 1160px) {
    .dash-layout { grid-template-columns: minmax(0, 1fr); }
    .dash-side-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) { .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
    .dash-page-head { align-items: stretch; }
    .dash-head-actions { width: 100%; justify-content: space-between; }
    .dash-kpis { gap: .6rem; }
    .dash-kpi { min-height: 112px; padding: .9rem; }
    .dash-kpi-value { font-size: 1.6rem; }
    .dash-card-header { align-items: stretch; flex-direction: column; }
    .dash-search { max-width: none; }
    .dash-bot-row { grid-template-columns: minmax(0, 1fr) auto; padding: .85rem 1rem; }
    .dash-bot-host { display: none; }
    .dash-bot-end { gap: .35rem; }
    .dash-side-stack { grid-template-columns: 1fr; }
}

/* Every signed-in page uses the same sidebar column and content spacing. */
.app-shell { width: 100%; min-height: 100vh; }
.app-content { width: 100%; min-width: 0; }
.sidebar-footer-actions { display: grid; gap: .55rem; }
.sidebar-theme-form { margin: 0; }
.sidebar-theme-button {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .7rem;
    min-height: 43px; padding: .55rem .75rem; border: 1px solid var(--surface-border);
    border-radius: 10px; background: var(--surface-soft); color: var(--text-main);
    font-size: .78rem; font-weight: 700; cursor: pointer;
}
.sidebar-theme-button:hover { border-color: rgba(var(--primary-rgb), .55); }
.sidebar-theme-label { display: inline-flex; align-items: center; gap: .55rem; }
.sidebar-theme-label i { width: 1.1rem; color: var(--primary); }
.sidebar-theme-track {
    flex: 0 0 auto; display: flex; align-items: center; width: 31px; height: 18px;
    padding: 2px; border-radius: 999px; background: #bdd4e7;
}
.sidebar-theme-track span { display: block; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(20, 48, 73, .2); }
body[data-theme='dark'] .sidebar-theme-track { justify-content: flex-end; background: #238bd0; }
.error-page { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 100vh; }
.error-page-guest { max-width: 960px; margin: 0 auto; padding: 2rem; }
.error-page-title { margin-top: 1rem; color: var(--text-main); font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 800; letter-spacing: -.045em; }
.error-page-copy { margin-top: .75rem; color: var(--text-muted); }

@media (min-width: 1024px) {
    .app-shell { display: grid; grid-template-columns: 268px minmax(0, 1fr); align-items: start; }
    .app-content {
        grid-column: 2; grid-row: 1; max-width: 1560px; margin: 0 auto;
        padding: 1.7rem 2rem 3rem;
    }
    .app-sidebar {
        grid-column: 1; grid-row: 1; order: 0; position: sticky; top: 0;
        width: 268px; min-width: 268px; height: 100vh; height: 100dvh;
        transform: none; box-shadow: none; overflow-y: auto;
    }
    #sidebarToggleOpen, #sidebarMobileOverlay { display: none; }
}
@media (max-width: 1023px) {
    .app-content { padding: 4.25rem 1rem 2.5rem; }
    .app-sidebar { width: min(86vw, 300px); }
}

/* Simple, non-blocking page transition indicator. */
.page-loader { background: var(--primary); box-shadow: none; backdrop-filter: none; }
.page-loader.is-visible { background: var(--primary); }

/* The dark palette covers shared surfaces and legacy utility-heavy views. */
body[data-theme='dark'] {
    --bg: #0c1626;
    --bg-soft: #111f32;
    --surface: #17283e;
    --surface-soft: #1b3048;
    --surface-border: #304963;
    --text-main: #eaf3fc;
    --text-muted: #a5b9cd;
    --primary: #258cd2;
    --primary-hover: #1678bc;
    --primary-rgb: 37, 140, 210;
    --input-bg: #111f32;
    --input-bg-focus: #172b43;
    --danger: #f1787b;
    --danger-hover: #db6069;
    color-scheme: dark;
    background: radial-gradient(circle at 76% -14%, rgba(46, 147, 215, .12), transparent 40%), var(--bg);
}
body[data-theme='dark'] ::-webkit-scrollbar-track { background: #101e31; }
body[data-theme='dark'] ::-webkit-scrollbar-thumb { background: #3a536d; border-color: #101e31; }
body[data-theme='dark'] .panel,
body[data-theme='dark'] .tilt-card,
body[data-theme='dark'] .dash-card { border-color: var(--surface-border); background: var(--surface); box-shadow: 0 14px 35px rgba(0, 6, 17, .16); }
body[data-theme='dark'] .panel-soft { border-color: var(--surface-border); background: var(--surface-soft); }
body[data-theme='dark'] .kpi-label { color: #9bb2ca; }
body[data-theme='dark'] .badge-tech { background: #1a3853; border-color: #376a91; color: #a7d9ff; }
body[data-theme='dark'] .badge-online { background: #123d36; border-color: #26765a; color: #a3efc8; }
body[data-theme='dark'] .badge-offline { background: #492a38; border-color: #9a5261; color: #ffc4c5; }
body[data-theme='dark'] .outline-btn { color: #d5e8f8; background: #1a2d43; border-color: #38516c; }
body[data-theme='dark'] .outline-btn:hover { color: #fff; background: #223b56; border-color: #5685a9; }
body[data-theme='dark'] .input-dark { color: #eaf3fc; background: var(--input-bg); border-color: #3a526e; }
body[data-theme='dark'] .input-dark::placeholder { color: #8299ae; }
body[data-theme='dark'] .input-dark:focus { background: var(--input-bg-focus); }
body[data-theme='dark'] .app-content :is(.text-slate-100, .text-slate-200, .text-zinc-100, .text-zinc-200) { color: #e0edfa !important; }
body[data-theme='dark'] .app-content :is(.text-slate-300, .text-zinc-300) { color: #c1d3e5 !important; }
body[data-theme='dark'] .app-content :is(.text-slate-400, .text-zinc-400) { color: #9fb5cb !important; }
body[data-theme='dark'] .app-content :is(.text-slate-500, .text-zinc-500) { color: #8aa4ba !important; }
body[data-theme='dark'] .app-content [class*='bg-black/'] { background-color: #112239 !important; }
body[data-theme='dark'] .app-content [class*='border-white/'] { border-color: #344d65 !important; }
body[data-theme='dark'] .app-content .remove-btn { color: #ffb9c1 !important; }
body[data-theme='dark'] .section-title,
body[data-theme='dark'] .kpi-value { color: var(--text-main); }

body[data-theme='dark'] .app-sidebar { background: #101e31; border-color: #2a4059; }
body[data-theme='dark'] .sidebar-brand-card { border-bottom-color: #2b425d; }
body[data-theme='dark'] .sidebar-brand-domain { color: #edf6ff; }
body[data-theme='dark'] .sidebar-brand-sub,
body[data-theme='dark'] .sidebar-section-label { color: #859db5; }
body[data-theme='dark'] .sidebar-brand-icon { color: #a7dcff; border-color: #3b6b92; background: #193b5a; }
body[data-theme='dark'] .sidebar-account { background: #172c43; border-color: #304963; }
body[data-theme='dark'] .sidebar-account-icon { background: #23425f; border-color: #3d6686; color: #a2d5ff; }
body[data-theme='dark'] .sidebar-account p.text-slate-400 { color: #a1b6c9 !important; }
body[data-theme='dark'] .sidebar-account p.text-slate-100 { color: #eff7ff !important; }
body[data-theme='dark'] .sidebar-link { color: #bfd1e3; }
body[data-theme='dark'] .sidebar-link:hover { color: #e8f5ff; background: #1b3954; border-color: #385f7f; }
body[data-theme='dark'] .sidebar-link.is-active { color: #b8e2ff; background: #1b4667; border-color: #3a7097; }
body[data-theme='dark'] .sidebar-theme-track { background: #2b7eb4; }
body[data-theme='dark'] .mobile-menu-toggle,
body[data-theme='dark'] .sidebar-close { background: #192f47; color: #e5f3ff; border-color: #3a5671; }
body[data-theme='dark'] .app-sidebar-overlay { background: rgba(3, 10, 20, .72); }

body[data-theme='dark'] .dash-eyebrow { color: #79c8ff; }
body[data-theme='dark'] .dash-title,
body[data-theme='dark'] .dash-card-title,
body[data-theme='dark'] .dash-kpi-value,
body[data-theme='dark'] .dash-bot-name,
body[data-theme='dark'] .dash-news-title { color: #eaf3fc; }
body[data-theme='dark'] .dash-lead,
body[data-theme='dark'] .dash-card-caption,
body[data-theme='dark'] .dash-kpi-label,
body[data-theme='dark'] .dash-bot-host,
body[data-theme='dark'] .dash-news-body { color: #a6bad0; }
body[data-theme='dark'] .dash-kpi,
body[data-theme='dark'] .dash-notification-popover { background: var(--surface); border-color: var(--surface-border); box-shadow: 0 18px 40px rgba(0, 6, 17, .2); }
body[data-theme='dark'] .dash-card-header,
body[data-theme='dark'] .dash-bot-row { border-color: #2b405a; }
body[data-theme='dark'] .dash-bot-row:hover { background: #1b3048; }
body[data-theme='dark'] .dash-notify-button,
body[data-theme='dark'] .dash-manage-link,
body[data-theme='dark'] .dash-quick-link { background: #1b3048; border-color: #3a5671; color: #b4ddfb; }
body[data-theme='dark'] .dash-notify-button:hover,
body[data-theme='dark'] .dash-manage-link:hover,
body[data-theme='dark'] .dash-quick-link:hover { background: #234460; border-color: #5c91b6; color: #e5f4ff; }
body[data-theme='dark'] .dash-kpi-icon,
body[data-theme='dark'] .dash-bot-avatar,
body[data-theme='dark'] .dash-empty-icon { color: #9ad2fc; background: #244663; }
body[data-theme='dark'] .dash-kpi-icon.online { color: #9aeac4; background: #1b4a3e; }
body[data-theme='dark'] .dash-kpi-icon.offline { color: #ffbec1; background: #512e3c; }
body[data-theme='dark'] .dash-notification-item,
body[data-theme='dark'] .dash-news-item { background: #1b3048; border-color: #3a536d; }
body[data-theme='dark'] .dash-news-item[data-kind='update'] { background: #193b55; border-color: #3b6b8f; }
body[data-theme='dark'] .dash-news-item[data-kind='maintenance'] { background: #3a3142; border-color: #766077; }
body[data-theme='dark'] .dash-bot-meta,
body[data-theme='dark'] .dash-news-date { color: #91a9bf; }

/* Tabler-inspired application frame. Views keep their own content and controls. */
body[data-theme='sky'],
body[data-theme='midnight'] {
    --bg: #f4f7fb;
    --surface-soft: #f8fafd;
    --surface-border: #dfe7f0;
    --text-main: #27374e;
    --text-muted: #687b93;
}
body[data-theme='dark'] {
    --bg: #141c2a;
    --bg-soft: #192335;
    --surface: #202d40;
    --surface-soft: #26354a;
    --surface-border: #34465e;
    --text-main: #e9f1fc;
    --text-muted: #a7b8ca;
    --input-bg: #192638;
    --input-bg-focus: #22374d;
}
body { background: var(--bg); }
.app-shell { min-height: 100vh; min-height: 100dvh; }
.app-content { align-self: start; }
.app-content > * { animation: appContentArrive .28s ease both; }
@keyframes appContentArrive {
    from { opacity: .65; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.app-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
    min-width: 0; min-height: 72px; padding: .75rem 1.8rem;
    background: var(--surface); border-bottom: 1px solid var(--surface-border);
    position: sticky; top: 0; z-index: 45;
}
.app-topbar-leading, .app-topbar-actions, .app-topbar-heading,
.app-topbar-account { display: flex; align-items: center; min-width: 0; }
.app-topbar-leading { gap: .9rem; }
.app-topbar-heading { flex-direction: column; align-items: flex-start; gap: .2rem; }
.app-topbar-crumb { display: flex; align-items: center; gap: .5rem; color: var(--text-muted); font-size: .68rem; line-height: 1.3; }
.app-topbar-crumb a { color: var(--text-muted); text-decoration: none; }
.app-topbar-crumb a:hover { color: var(--primary); }
.app-topbar-crumb i { font-size: .48rem; opacity: .65; }
.app-topbar-crumb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-topbar-title { display: block; max-width: 36vw; color: var(--text-main); font-size: .95rem; line-height: 1.3; font-weight: 800; letter-spacing: -.025em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-topbar-actions { flex: 0 0 auto; gap: .55rem; }
.app-topbar-theme-form { margin: 0; }
.app-topbar-icon {
    position: relative; display: inline-flex; align-items: center; justify-content: center; width: 37px; height: 37px;
    padding: 0; border: 1px solid var(--surface-border); border-radius: 9px;
    background: var(--surface); color: var(--text-muted); text-decoration: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.app-topbar-icon:hover { background: var(--surface-soft); color: var(--primary); border-color: rgba(var(--primary-rgb), .32); transform: translateY(-1px); }
.app-topbar-unread-badge {
    position: absolute; top: -6px; right: -6px; display: grid; place-items: center;
    min-width: 17px; height: 17px; padding: 0 3px; border-radius: 999px;
    background: #e55e66; color: #fff; font-size: .55rem; font-weight: 800;
    line-height: 1; border: 2px solid var(--surface);
}
.app-topbar-unread-badge[hidden] { display: none !important; }
.app-topbar-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    min-height: 37px; padding: 0 .85rem; border: 1px solid var(--primary); border-radius: 9px;
    background: var(--primary); color: #fff; font-size: .76rem; font-weight: 700; text-decoration: none;
    box-shadow: 0 3px 9px rgba(var(--primary-rgb), .13);
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.app-topbar-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); transform: translateY(-1px); }
.app-topbar-account {
    gap: .55rem; max-width: 180px; min-height: 37px; padding-left: .55rem;
    border-left: 1px solid var(--surface-border); color: var(--text-main);
    font-size: .75rem; font-weight: 700; text-decoration: none;
}
.app-topbar-account:hover { color: var(--primary); }
.app-topbar-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 31px; height: 31px; border-radius: 9px; background: rgba(var(--primary-rgb), .12); color: var(--primary); }
.app-topbar-account-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-topbar-account-arrow { color: var(--text-muted); font-size: .55rem; }
.app-topbar-menu { display: none; flex: 0 0 auto; width: 36px; height: 36px; padding: 0; align-items: center; justify-content: center; border-radius: 9px; box-shadow: none; }

.app-sidebar { background: var(--surface); border-color: var(--surface-border); }
.app-sidebar-inner { padding: 1.1rem .8rem 1rem; }
.sidebar-brand-card { padding: .6rem .65rem 1.35rem; border-bottom: 1px solid var(--surface-border); }
.sidebar-brand-icon { width: 38px; height: 38px; border-radius: 10px; }
.sidebar-brand-domain { font-size: .88rem; letter-spacing: -.025em; }
.sidebar-brand-sub { font-size: .6rem; letter-spacing: .09em; }
.app-sidebar-main { padding-top: .9rem; }
.sidebar-nav { order: 1; gap: 1.15rem; margin-top: 0; }
.sidebar-nav-group { gap: .12rem; }
.sidebar-section-label { padding: 0 .8rem .33rem; font-family: 'Plus Jakarta Sans', sans-serif; font-size: .59rem; font-weight: 800; letter-spacing: .11em; }
.sidebar-link {
    position: relative; min-height: 39px; padding: .57rem .75rem; border-radius: 9px;
    color: var(--text-muted); font-size: .76rem; font-weight: 650;
}
.sidebar-link-label { gap: .7rem; }
.sidebar-link-label i { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; font-size: .83rem; opacity: .85; }
.sidebar-link > i:last-child { display: none; }
.sidebar-link.is-active { background: rgba(var(--primary-rgb), .09); border-color: transparent; color: var(--primary); box-shadow: none; }
.sidebar-link.is-active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 5px; background: var(--primary); }
.sidebar-account { order: 3; margin-top: auto; padding: .75rem .65rem; border: 0; border-top: 1px solid var(--surface-border); border-radius: 0; background: transparent; }
.sidebar-footer-actions { order: 4; margin-top: 0 !important; padding-top: .2rem !important; }
.sidebar-theme-button { min-height: 40px; border-radius: 9px; background: var(--surface-soft); font-size: .74rem; }
.sidebar-footer-actions .outline-btn { min-height: 40px; border-radius: 9px; font-size: .74rem; }
.sidebar-account p.text-slate-400 { font-size: .62rem; }
.sidebar-account p.text-slate-100 { font-size: .77rem; }
.panel, .tilt-card { border-radius: 12px; box-shadow: 0 2px 8px rgba(33, 67, 107, .035); }
.magic-btn, .outline-btn, .danger-btn { border-radius: 9px; }
.input-dark { border-radius: 9px; }
.app-content.create-page .create-header,
.app-content.manage-page .manage-hero {
    border-color: var(--surface-border); border-radius: 12px;
    background: var(--surface); box-shadow: 0 2px 8px rgba(33, 67, 107, .035);
}
.app-content.create-page .create-card,
.app-content.manage-page .manage-nav {
    border-color: var(--surface-border); border-radius: 12px;
    background: var(--surface); box-shadow: 0 2px 8px rgba(33, 67, 107, .035);
}
body[data-theme='dark'] .app-content.create-page .create-header,
body[data-theme='dark'] .app-content.manage-page .manage-hero,
body[data-theme='dark'] .app-content.create-page .create-card,
body[data-theme='dark'] .app-content.manage-page .manage-nav {
    border-color: var(--surface-border); background: var(--surface); box-shadow: none;
}

@media (min-width: 1024px) {
    .app-shell { display: grid; grid-template-columns: 268px minmax(0, 1fr); grid-template-rows: 72px minmax(0, 1fr); align-items: start; }
    .app-topbar { grid-column: 2; grid-row: 1; }
    .app-content { grid-column: 2; grid-row: 2; width: 100%; max-width: 1560px; padding: 1.8rem 2rem 3rem; margin: 0 auto; }
    .app-sidebar { grid-column: 1; grid-row: 1 / 3; position: sticky; top: 0; width: 268px; min-width: 268px; height: 100vh; height: 100dvh; transform: none; box-shadow: none; z-index: 46; }
    #sidebarToggleOpen, #sidebarMobileOverlay { display: none; }
}
@media (max-width: 1023px) {
    .app-shell { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 64px minmax(0, 1fr); }
    .app-topbar { grid-column: 1; grid-row: 1; min-height: 64px; padding: .65rem 1rem; }
    .app-topbar-menu { display: inline-flex; }
    .app-content { grid-column: 1; grid-row: 2; padding: 1.25rem 1rem 2.5rem; }
    .app-sidebar { position: fixed; grid-column: auto; grid-row: auto; width: min(86vw, 300px); z-index: 70; }
}
@media (max-width: 640px) {
    .app-topbar { gap: .5rem; padding-inline: .75rem; }
    .app-topbar-leading { gap: .55rem; }
    .app-topbar-title { max-width: 33vw; font-size: .82rem; }
    .app-topbar-crumb { font-size: .6rem; gap: .33rem; }
    .app-topbar-actions { gap: .3rem; }
    .app-topbar-icon { width: 32px; height: 32px; }
    .app-topbar-primary { width: 32px; min-height: 32px; padding: 0; }
    .app-topbar-primary span, .app-topbar-account-name, .app-topbar-account-arrow { display: none; }
    .app-topbar-account { max-width: none; padding-left: .3rem; }
    .app-topbar-avatar { width: 29px; height: 29px; }
}
@media (prefers-reduced-motion: reduce) {
    .app-content > * { animation: none !important; }
}