@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap");

:root {
    --bg-main: #07111d;
    --bg-surface: #0f1f33;
    --bg-card: #132740;
    --bg-card-alt: #102236;
    --line-soft: #2a3f58;
    --line-strong: #3e5d7d;
    --text-main: #e9f4ff;
    --text-muted: #a7bdd3;
    --text-strong: #ffffff;
    --accent: #20c7b0;
    --accent-2: #64d8ff;
    --status-ok: #1fc788;
    --status-warn: #f7b23b;
    --status-critical: #ff6b6b;
    --focus-ring: #ffd77a;
    --shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
    --body-grad-1: rgba(32, 199, 176, 0.2);
    --body-grad-2: rgba(100, 216, 255, 0.18);
    --body-grad-3: #030810;
    --body-grad-4: #081628;
    --body-grad-5: #030811;
    --grid-line: rgba(255, 255, 255, 0.025);
    --grid-opacity: 0.25;
    --sidebar-grad-top: rgba(15, 31, 51, 0.92);
    --sidebar-grad-bottom: rgba(8, 20, 33, 0.95);
    --sidebar-header-bg: rgba(19, 39, 64, 0.66);
    --nav-hover-bg: rgba(100, 216, 255, 0.08);
    --nav-active-start: rgba(32, 199, 176, 0.24);
    --nav-active-end: rgba(100, 216, 255, 0.2);
    --nav-active-border: rgba(100, 216, 255, 0.46);
    --input-bg: rgba(19, 39, 64, 0.75);
    --input-text: #ffffff;
    --button-grad-a: rgba(100, 216, 255, 0.25);
    --button-grad-b: rgba(32, 199, 176, 0.25);
    --button-text: #ffffff;
    --user-chip-bg: rgba(31, 199, 136, 0.12);
    --user-chip-border: rgba(31, 199, 136, 0.5);
    --user-chip-text: #b6ffd8;
    --assistant-border: rgba(100, 216, 255, 0.36);
    --assistant-grad-a: rgba(100, 216, 255, 0.12);
    --assistant-grad-b: rgba(32, 199, 176, 0.1);
    --assistant-text: #d9f4ff;
    --card-grad-top: rgba(19, 39, 64, 0.94);
    --card-grad-bottom: rgba(16, 34, 54, 0.94);
    --module-focus-border: rgba(100, 216, 255, 0.75);
    --module-focus-outline: rgba(100, 216, 255, 0.5);
    --module-focus-shadow: rgba(0, 0, 0, 0.36);
    --kpi-bg: rgba(7, 17, 29, 0.64);
    --item-bg: rgba(7, 17, 29, 0.55);
    --item-hover-bg: rgba(100, 216, 255, 0.12);
    --item-selected-bg: rgba(100, 216, 255, 0.16);
    --panel-bg: rgba(7, 17, 29, 0.6);
    --doc-bg: rgba(7, 17, 29, 0.58);
    --table-head-bg: rgba(100, 216, 255, 0.08);
    --table-head-text: #daeeff;
    --status-ok-text: #bcffe0;
    --status-ok-border: rgba(31, 199, 136, 0.45);
    --status-ok-bg: rgba(31, 199, 136, 0.18);
    --status-warn-text: #ffe8b7;
    --status-warn-border: rgba(247, 178, 59, 0.45);
    --status-warn-bg: rgba(247, 178, 59, 0.18);
    --status-critical-text: #ffd2d2;
    --status-critical-border: rgba(255, 107, 107, 0.52);
    --status-critical-bg: rgba(255, 107, 107, 0.17);
    --trend-up: #98ffd0;
    --trend-down: #ffb5b5;
    --trend-steady: #ffe39d;
    --role-accent: #64d8ff;
    --role-accent-soft: rgba(100, 216, 255, 0.2);
    --project-accent: #5ad1ff;
    --project-accent-soft: rgba(90, 209, 255, 0.2);
    --source-card-bg: rgba(7, 17, 29, 0.68);
}

[data-role="dev"] {
    --role-accent: #64d8ff;
    --role-accent-soft: rgba(100, 216, 255, 0.2);
}

[data-role="pm"] {
    --role-accent: #f2b84b;
    --role-accent-soft: rgba(242, 184, 75, 0.24);
}

[data-role="support"] {
    --role-accent: #7ef5c8;
    --role-accent-soft: rgba(126, 245, 200, 0.22);
}

[data-role="security"] {
    --role-accent: #ff7a7a;
    --role-accent-soft: rgba(255, 122, 122, 0.24);
}

[data-project="atlas"] {
    --project-accent: #5ad1ff;
    --project-accent-soft: rgba(90, 209, 255, 0.2);
}

[data-project="nimbus"] {
    --project-accent: #f6b54d;
    --project-accent-soft: rgba(246, 181, 77, 0.2);
}

[data-project="helios"] {
    --project-accent: #7ef5c8;
    --project-accent-soft: rgba(126, 245, 200, 0.2);
}

[data-theme="light"] {
    --bg-main: #edf4fb;
    --bg-surface: #ffffff;
    --bg-card: #ffffff;
    --bg-card-alt: #f4f9ff;
    --line-soft: #c3d6e7;
    --line-strong: #78a0c1;
    --text-main: #17384f;
    --text-muted: #4b6b84;
    --text-strong: #0c263d;
    --accent: #0ca28e;
    --accent-2: #0d7ec9;
    --focus-ring: #b67800;
    --shadow: 0 14px 32px rgba(31, 72, 107, 0.14);
    --body-grad-1: rgba(12, 162, 142, 0.12);
    --body-grad-2: rgba(13, 126, 201, 0.1);
    --body-grad-3: #f9fcff;
    --body-grad-4: #ecf4ff;
    --body-grad-5: #f6fbff;
    --grid-line: rgba(23, 56, 79, 0.05);
    --grid-opacity: 0.5;
    --sidebar-grad-top: rgba(239, 247, 255, 0.96);
    --sidebar-grad-bottom: rgba(228, 240, 251, 0.96);
    --sidebar-header-bg: rgba(255, 255, 255, 0.8);
    --nav-hover-bg: rgba(13, 126, 201, 0.1);
    --nav-active-start: rgba(12, 162, 142, 0.16);
    --nav-active-end: rgba(13, 126, 201, 0.14);
    --nav-active-border: rgba(13, 126, 201, 0.52);
    --input-bg: rgba(255, 255, 255, 0.95);
    --input-text: #13344e;
    --button-grad-a: rgba(13, 126, 201, 0.2);
    --button-grad-b: rgba(12, 162, 142, 0.18);
    --button-text: #0c263d;
    --user-chip-bg: rgba(31, 199, 136, 0.12);
    --user-chip-border: rgba(22, 145, 100, 0.44);
    --user-chip-text: #0f6d49;
    --assistant-border: rgba(13, 126, 201, 0.4);
    --assistant-grad-a: rgba(13, 126, 201, 0.11);
    --assistant-grad-b: rgba(12, 162, 142, 0.1);
    --assistant-text: #154565;
    --card-grad-top: rgba(255, 255, 255, 0.95);
    --card-grad-bottom: rgba(243, 249, 255, 0.98);
    --module-focus-border: rgba(13, 126, 201, 0.62);
    --module-focus-outline: rgba(13, 126, 201, 0.33);
    --module-focus-shadow: rgba(31, 72, 107, 0.17);
    --kpi-bg: rgba(255, 255, 255, 0.9);
    --item-bg: rgba(248, 252, 255, 0.94);
    --item-hover-bg: rgba(13, 126, 201, 0.1);
    --item-selected-bg: rgba(13, 126, 201, 0.15);
    --panel-bg: rgba(255, 255, 255, 0.88);
    --doc-bg: rgba(255, 255, 255, 0.84);
    --table-head-bg: rgba(13, 126, 201, 0.1);
    --table-head-text: #154565;
    --status-ok-text: #0e6947;
    --status-ok-border: rgba(22, 145, 100, 0.5);
    --status-ok-bg: rgba(31, 199, 136, 0.16);
    --status-warn-text: #7f5300;
    --status-warn-border: rgba(182, 124, 0, 0.48);
    --status-warn-bg: rgba(247, 178, 59, 0.2);
    --status-critical-text: #8c2424;
    --status-critical-border: rgba(179, 48, 48, 0.45);
    --status-critical-bg: rgba(255, 107, 107, 0.2);
    --trend-up: #1f8c5d;
    --trend-down: #b24343;
    --trend-steady: #8b6b1e;
    --role-accent: #0d7ec9;
    --role-accent-soft: rgba(13, 126, 201, 0.18);
    --project-accent: #0d7ec9;
    --project-accent-soft: rgba(13, 126, 201, 0.18);
    --source-card-bg: rgba(255, 255, 255, 0.92);
}

* {
    box-sizing: border-box;
}

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

body {
    font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 15% 20%, var(--body-grad-1), transparent 35%),
        radial-gradient(circle at 85% 10%, var(--body-grad-2), transparent 32%),
        linear-gradient(145deg, var(--body-grad-3) 0%, var(--body-grad-4) 48%, var(--body-grad-5) 100%);
    color: var(--text-main);
}

body.overlay-open {
    overflow: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 56px 56px;
    opacity: var(--grid-opacity);
}

.app-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: 100vh;
}

.sidebar {
    background: linear-gradient(180deg, var(--sidebar-grad-top), var(--sidebar-grad-bottom));
    border-right: 1px solid var(--line-soft);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sidebar-header {
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    background: var(--sidebar-header-bg);
    padding: 1rem;
}

.logo-lockup {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logo-mark {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
}

.logo-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.eyebrow {
    margin: 0;
    color: var(--accent-2);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    font-size: 0.72rem;
}

.logo {
    margin: 0.2rem 0 0.35rem;
    font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text-strong);
}

.tagline {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.86rem;
    line-height: 1.4;
}

.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.nav-item {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--text-main);
    padding: 0.65rem 0.72rem;
    font: inherit;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    transition: 180ms ease;
}

.nav-item::before {
    content: "";
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    background: currentColor;
    mask: var(--nav-icon) no-repeat center / contain;
    -webkit-mask: var(--nav-icon) no-repeat center / contain;
    opacity: 0.9;
}

.nav-item[data-nav-target="projects"] {
    --nav-icon: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"/></svg>");
}

.nav-item[data-nav-target="overview"] {
    --nav-icon: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 16a8 8 0 1 1 16 0\"/><path d=\"M12 12l3 3\"/><path d=\"M7 16h10\"/></svg>");
}

.nav-item[data-nav-target="documentation"] {
    --nav-icon: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 5h12a4 4 0 0 1 4 4v10H8a4 4 0 0 0-4 4V5z\"/><path d=\"M8 5v14\"/></svg>");
}

.nav-item[data-nav-target="sources"] {
    --nav-icon: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><ellipse cx=\"12\" cy=\"5\" rx=\"8\" ry=\"3\"/><path d=\"M4 5v10c0 1.7 3.6 3 8 3s8-1.3 8-3V5\"/><path d=\"M4 10c0 1.7 3.6 3 8 3s8-1.3 8-3\"/></svg>");
}

.nav-item[data-nav-target="monitoring"] {
    --nav-icon: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 12h4l3-6 4 12 3-6h4\"/></svg>");
}

.nav-item[data-nav-target="alerting"] {
    --nav-icon: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 8a6 6 0 1 0-12 0c0 7-3 7-3 7h18s-3 0-3-7\"/><path d=\"M13.7 21a2 2 0 0 1-3.4 0\"/></svg>");
}

.nav-item[data-nav-target="updates"] {
    --nav-icon: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 12a9 9 0 1 1-3-6.7\"/><path d=\"M21 3v6h-6\"/></svg>");
}

.nav-item[data-nav-target="impact"] {
    --nav-icon: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"7\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/><path d=\"M12 2v3\"/><path d=\"M12 19v3\"/><path d=\"M2 12h3\"/><path d=\"M19 12h3\"/></svg>");
}

.nav-item[data-nav-target="tickets"] {
    --nav-icon: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 8a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v3a2 2 0 0 0 0 4v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-3a2 2 0 0 0 0-4V8z\"/><path d=\"M9 8v8\"/></svg>");
}

.nav-item[data-nav-target="features"] {
    --nav-icon: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2l1.8 4.4L18 8l-4.2 1.6L12 14l-1.8-4.4L6 8l4.2-1.6L12 2z\"/><path d=\"M5 15l1 2.4L8.5 18l-2.5 1-1 2.4-1-2.4-2.5-1L4 17.4 5 15z\"/><path d=\"M18.5 15l1 2.4L22 18l-2.5 1-1 2.4-1-2.4-2.5-1 2.5-.6 1-2.4z\"/></svg>");
}

.nav-item:hover {
    transform: translateX(3px);
    border-color: var(--line-strong);
    background: var(--nav-hover-bg);
}

.nav-item.is-active {
    background: linear-gradient(90deg, var(--nav-active-start), var(--nav-active-end));
    border-color: var(--nav-active-border);
    color: var(--text-strong);
}

.sidebar-bottom {
    margin-top: auto;
    position: sticky;
    bottom: 1rem;
    border-color: var(--nav-active-border);
    background: linear-gradient(90deg, rgba(32, 199, 176, 0.24), rgba(100, 216, 255, 0.24));
    color: var(--text-strong);
    font-weight: 600;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2);
}

.sidebar-link {
    margin-top: auto;
    color: var(--accent-2);
    text-decoration: none;
    font-size: 0.9rem;
    border-top: 1px solid var(--line-soft);
    padding-top: 0.9rem;
}

.sidebar-link:hover {
    text-decoration: underline;
}

.main-content {
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-x: hidden;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.search-form {
    flex: 1;
    min-width: 280px;
    display: flex;
    gap: 0.6rem;
}

.search-form input {
    width: 100%;
    background: var(--input-bg);
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    padding: 0.68rem 0.78rem;
    color: var(--input-text);
    font-size: 0.95rem;
}

.search-form input::placeholder {
    color: var(--text-muted);
}

.search-form button {
    border: 1px solid var(--accent-2);
    background: linear-gradient(120deg, var(--button-grad-a), var(--button-grad-b));
    color: var(--button-text);
    border-radius: 10px;
    padding: 0.62rem 0.85rem;
    font: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.topbar-controls {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.topbar-controls select {
    background: var(--input-bg);
    border: 1px solid var(--line-soft);
    color: var(--text-main);
    border-radius: 8px;
    padding: 0.45rem 0.55rem;
    font: inherit;
}

#projectSelect {
    min-width: 150px;
}

.role-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.35rem;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    background: var(--input-bg);
}

.role-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-right: 0.1rem;
}

.role-button {
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    font-size: 0.82rem;
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    cursor: pointer;
    transition: 160ms ease;
}

.role-button:hover {
    border-color: var(--line-strong);
    background: var(--item-hover-bg);
}

.role-button.is-active {
    border-color: var(--role-accent);
    background: var(--role-accent-soft);
    color: var(--text-strong);
}

.theme-toggle {
    border: 1px solid var(--line-soft);
    background: var(--input-bg);
    color: var(--text-main);
    border-radius: 8px;
    padding: 0.45rem 0.6rem;
    font: inherit;
    cursor: pointer;
    transition: 160ms ease;
}

.theme-toggle:hover {
    border-color: var(--line-strong);
    background: var(--item-hover-bg);
}

.checks-trigger {
    border: 1px solid var(--accent-2);
    background: linear-gradient(120deg, var(--button-grad-a), var(--button-grad-b));
    color: var(--button-text);
    border-radius: 8px;
    padding: 0.45rem 0.7rem;
    font: inherit;
    cursor: pointer;
    transition: 160ms ease;
    white-space: nowrap;
}

.checks-trigger:hover {
    border-color: var(--line-strong);
    filter: brightness(1.05);
}

.user-chip {
    background: var(--user-chip-bg);
    border: 1px solid var(--user-chip-border);
    color: var(--user-chip-text);
    padding: 0.45rem 0.58rem;
    border-radius: 999px;
    font-weight: 600;
}

.assistant-label {
    margin: 0;
    color: var(--accent-2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 600;
}

.assistant-response {
    margin: 0;
    padding: 0.72rem 0.88rem;
    border: 1px solid var(--assistant-border);
    border-radius: 12px;
    background: linear-gradient(120deg, var(--assistant-grad-a), var(--assistant-grad-b));
    color: var(--assistant-text);
}

.checks-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 10, 20, 0.62);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
    z-index: 40;
}

.ask-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 10, 20, 0.62);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
    z-index: 40;
}

.ask-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.ask-spinner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: var(--item-bg);
    color: var(--text-main);
}

.ask-spinner-text {
    font-size: 0.92rem;
    color: var(--text-strong);
}

.ask-result-text {
    margin: 0 0 0.6rem;
    color: var(--text-main);
}

.ask-result-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.ask-result-table th,
.ask-result-table td {
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
}

.ask-result-table th {
    color: var(--table-head-text);
    background: var(--table-head-bg);
    font-weight: 600;
}

.issue-action-row {
    margin-top: 0.75rem;
    display: flex;
    justify-content: flex-end;
}

.issue-create-btn {
    border: 1px solid var(--project-accent);
    background: linear-gradient(120deg, var(--button-grad-a), var(--button-grad-b));
    color: var(--button-text);
    border-radius: 12px;
    padding: 0.62rem 1.05rem;
    font: inherit;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 12px 28px var(--module-focus-shadow);
    transition: transform 160ms ease, filter 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.issue-create-btn:hover {
    border-color: var(--accent-2);
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 16px 34px var(--module-focus-shadow);
}

.issue-create-btn:active {
    transform: translateY(0);
    filter: brightness(1.02);
}

.issue-create-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

.is-hidden {
    display: none !important;
}

.checks-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.checks-dialog {
    width: min(720px, 92vw);
    max-height: 85vh;
    background: linear-gradient(180deg, var(--card-grad-top), var(--card-grad-bottom));
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.checks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.checks-header h2 {
    margin: 0;
    font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
    color: var(--text-strong);
}

.checks-close {
    border: 1px solid var(--line-soft);
    background: var(--input-bg);
    color: var(--text-main);
    border-radius: 999px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.checks-subtitle {
    margin: 0;
    color: var(--text-muted);
}

.checks-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-height: 45vh;
    overflow: auto;
}

.check-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    border: 1px solid var(--line-soft);
    background: var(--item-bg);
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
}

.status-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--line-strong);
    flex: 0 0 auto;
}

.status-icon.is-running {
    border-color: var(--accent-2);
    border-top-color: transparent;
    animation: spin 0.9s linear infinite;
}

.status-icon.is-done {
    border-color: var(--status-ok);
    background: var(--status-ok);
}

.check-label {
    flex: 1;
    color: var(--text-main);
}

.check-state {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.checks-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.checks-status {
    color: var(--text-strong);
    font-weight: 600;
}

.checks-start {
    border: 1px solid var(--accent-2);
    background: linear-gradient(120deg, var(--button-grad-a), var(--button-grad-b));
    color: var(--button-text);
    border-radius: 10px;
    padding: 0.55rem 0.8rem;
    font: inherit;
    cursor: pointer;
    transition: 160ms ease;
}

.checks-start:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    padding: 0.4rem 0;
}

.page-title {
    margin: 0;
    font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
    font-size: 1.6rem;
    color: var(--text-strong);
}

.page-subtitle {
    margin: 0.2rem 0 0;
    color: var(--text-muted);
}

.page-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.project-badge {
    border-radius: 999px;
    padding: 0.24rem 0.58rem;
    border: 1px solid var(--project-accent);
    background: var(--project-accent-soft);
    color: var(--text-strong);
    font-weight: 600;
    font-size: 0.75rem;
    white-space: nowrap;
}

.project-domain {
    color: var(--text-muted);
    font-size: 0.85rem;
}

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

.project-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.project-card {
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    padding: 0.9rem;
    text-decoration: none;
    color: inherit;
    background: linear-gradient(180deg, var(--card-grad-top), var(--card-grad-bottom));
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    transition: border-color 180ms ease, transform 180ms ease, box-shadow 200ms ease;
}

.project-card:hover {
    border-color: var(--project-accent);
    transform: translateY(-2px);
}

.project-card.is-active {
    border-color: var(--project-accent);
    box-shadow: 0 0 0 1px var(--project-accent-soft), 0 16px 34px rgba(0, 0, 0, 0.32);
}

.project-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.traffic-light {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    border: 1px solid var(--line-soft);
    background: var(--item-bg);
}

.traffic-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    opacity: 0.35;
}

.traffic-dot.is-green {
    background: var(--status-ok);
}

.traffic-dot.is-yellow {
    background: var(--status-warn);
}

.traffic-dot.is-red {
    background: var(--status-critical);
}

.traffic-dot.is-on {
    opacity: 1;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
}

.project-card h3 {
    margin: 0;
    font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
    color: var(--text-strong);
}

.project-card .project-domain {
    margin: 0;
}

.project-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.project-kpis span {
    display: block;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.project-kpis strong {
    display: block;
    color: var(--text-strong);
    font-size: 1.05rem;
}

.project-action {
    margin-top: auto;
    color: var(--project-accent);
    font-weight: 600;
    font-size: 0.85rem;
}

.span-2 {
    grid-column: 1 / -1;
}

.module-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    grid-template-areas:
        "overview monitoring alerting"
        "updates impact sources"
        "documentation tickets .";
}

[data-role="dev"] .module-grid {
    grid-template-areas:
        "overview monitoring alerting"
        "updates impact sources"
        "documentation tickets .";
}

[data-role="pm"] .module-grid {
    grid-template-areas:
        "overview impact documentation"
        "tickets sources alerting"
        "monitoring updates .";
}

[data-role="support"] .module-grid {
    grid-template-areas:
        "monitoring alerting tickets"
        "documentation sources overview"
        "updates impact .";
}

[data-role="security"] .module-grid {
    grid-template-areas:
        "updates alerting impact"
        "monitoring sources documentation"
        "overview tickets .";
}

.module-grid .module-overview {
    grid-area: overview;
}

.module-grid .module-monitoring {
    grid-area: monitoring;
}

.module-grid .module-alerting {
    grid-area: alerting;
}

.module-grid .module-sources {
    grid-area: sources;
}

.module-grid .module-documentation {
    grid-area: documentation;
}

.module-grid .module-updates {
    grid-area: updates;
}

.module-grid .module-impact {
    grid-area: impact;
}

.module-grid .module-tickets {
    grid-area: tickets;
}

.module-card {
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    background: linear-gradient(180deg, var(--card-grad-top), var(--card-grad-bottom));
    box-shadow: var(--shadow);
    padding: 1rem;
    animation: card-enter 320ms ease both;
    transition: border-color 180ms ease, box-shadow 220ms ease;
}

.module-card.module-focus {
    border-color: var(--module-focus-border);
    box-shadow: 0 0 0 1px var(--module-focus-outline), 0 16px 34px var(--module-focus-shadow);
}

.module-card.role-muted {
    opacity: 0.6;
    filter: saturate(0.8);
}

.module-card.role-hidden {
    display: none !important;
}

.module-card h2,
.module-card h3 {
    font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
    margin-top: 0;
    color: var(--text-strong);
}

.module-card p {
    color: var(--text-muted);
}

.module-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
}

.status-badge {
    border-radius: 999px;
    padding: 0.26rem 0.58rem;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}

.status-ok {
    color: var(--status-ok-text);
    border-color: var(--status-ok-border);
    background: var(--status-ok-bg);
}

.status-warn {
    color: var(--status-warn-text);
    border-color: var(--status-warn-border);
    background: var(--status-warn-bg);
}

.status-critical {
    color: var(--status-critical-text);
    border-color: var(--status-critical-border);
    background: var(--status-critical-bg);
}

.kpi-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.role-context {
    margin-top: 0.85rem;
    border: 1px dashed var(--line-strong);
    border-radius: 12px;
    padding: 0.7rem;
    background: var(--panel-bg);
}

.source-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    margin-top: 0.6rem;
}

.source-card {
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 0.6rem;
    background: var(--source-card-bg);
}

.source-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.4rem;
}

.source-card h3 {
    margin: 0;
    font-size: 0.95rem;
}

.source-card p {
    margin: 0.3rem 0 0.5rem;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.source-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.source-tag {
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    padding: 0.15rem 0.45rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    background: var(--item-bg);
}
.role-context-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.role-context h3 {
    margin: 0;
    font-size: 1rem;
}

.role-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 999px;
    border: 1px solid var(--role-accent);
    background: var(--role-accent-soft);
    color: var(--text-strong);
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    font-weight: 600;
}

.role-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.role-chip {
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--item-bg);
}

.kpi-tile {
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 0.7rem;
    background: var(--kpi-bg);
}

.kpi-tile p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.84rem;
}

.kpi-tile strong {
    display: block;
    margin-top: 0.2rem;
    font-size: 1.3rem;
    color: var(--text-strong);
}

.trend {
    font-size: 0.78rem;
    font-weight: 600;
}

.trend.up {
    color: var(--trend-up);
}

.trend.down {
    color: var(--trend-down);
}

.trend.steady {
    color: var(--trend-steady);
}

.split-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 0.8rem;
}

.interactive-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.interactive-item {
    width: 100%;
    text-align: left;
    border-radius: 10px;
    border: 1px solid var(--line-soft);
    background: var(--item-bg);
    color: var(--text-main);
    font: inherit;
    padding: 0.58rem 0.65rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.52rem;
    transition: 160ms ease;
}

.interactive-item:hover,
.table-button:hover {
    border-color: var(--line-strong);
    background: var(--item-hover-bg);
}

.interactive-item.is-selected,
.table-button.is-selected {
    border-color: var(--nav-active-border);
    background: var(--item-selected-bg);
    color: var(--text-strong);
}

.dot {
    width: 0.58rem;
    height: 0.58rem;
    border-radius: 50%;
    flex: 0 0 auto;
}

.dot.critical {
    background: var(--status-critical);
}

.dot.warn {
    background: var(--status-warn);
}

.dot.ok {
    background: var(--status-ok);
}

.detail-panel {
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 0.78rem;
    background: var(--panel-bg);
}

.alerting-panel .channel-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.alerting-panel .channel-pill {
    border-radius: 10px;
    border: 1px solid var(--line-soft);
    padding: 0.25rem 0.4rem;
    font-size: 0.75rem;
    background: var(--item-bg);
    color: var(--text-main);
    text-align: center;
}

.alerting-panel .channel-pill.active {
    border-color: var(--role-accent);
    background: var(--role-accent-soft);
    color: var(--text-strong);
}

.alert-toggle {
    margin-top: 0.5rem;
    border-radius: 8px;
    border: 1px solid var(--line-soft);
    background: var(--item-bg);
    color: var(--text-main);
    padding: 0.35rem 0.6rem;
    font: inherit;
    cursor: pointer;
}

.alert-toggle:hover {
    border-color: var(--line-strong);
    background: var(--item-hover-bg);
}

.detail-panel.panel-updated {
    animation: panel-pulse 220ms ease;
}

.detail-panel strong {
    color: var(--text-strong);
}

.detail-panel ul {
    padding-left: 1.1rem;
    margin: 0.55rem 0 0;
}

.detail-panel li {
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}

.doc-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.doc-block {
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: var(--doc-bg);
    padding: 0.72rem;
}

.doc-block ul {
    margin: 0;
    padding-left: 1.1rem;
}

.doc-block li {
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}

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

.updates-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 440px;
    font-size: 0.88rem;
}

.updates-table th,
.updates-table td {
    border-bottom: 1px solid var(--line-soft);
    padding: 0.48rem;
    text-align: left;
    color: var(--text-main);
}

.updates-table thead th {
    color: var(--table-head-text);
    background: var(--table-head-bg);
}

.table-button {
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    padding: 0.22rem 0.45rem;
    cursor: pointer;
    transition: 160ms ease;
}

.pill {
    display: inline-flex;
    border-radius: 999px;
    padding: 0.16rem 0.45rem;
    border: 1px solid transparent;
    font-size: 0.75rem;
    font-weight: 600;
}

.pill.critical {
    background: var(--status-critical-bg);
    border-color: var(--status-critical-border);
    color: var(--status-critical-text);
}

.pill.warn {
    background: var(--status-warn-bg);
    border-color: var(--status-warn-border);
    color: var(--status-warn-text);
}

.ticket-kpis {
    margin-bottom: 0.7rem;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
}

input:focus-visible,
button:focus-visible,
select:focus-visible,
a:focus-visible,
.module-card:focus-visible,
.table-wrap:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

@keyframes card-enter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

@keyframes panel-pulse {
    from {
        transform: translateY(4px);
        border-color: rgba(100, 216, 255, 0.78);
    }

    to {
        transform: translateY(0);
        border-color: var(--line-soft);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1240px) {
    .module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "overview monitoring"
            "alerting updates"
            "impact sources"
            "documentation tickets";
    }

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

    [data-role="dev"] .module-grid {
        grid-template-areas:
            "overview monitoring"
            "alerting updates"
            "impact sources"
            "documentation tickets";
    }

    [data-role="pm"] .module-grid {
        grid-template-areas:
            "overview impact"
            "documentation tickets"
            "sources alerting"
            "monitoring updates";
    }

    [data-role="support"] .module-grid {
        grid-template-areas:
            "monitoring alerting"
            "tickets documentation"
            "sources overview"
            "updates impact";
    }

    [data-role="security"] .module-grid {
        grid-template-areas:
            "updates alerting"
            "impact monitoring"
            "sources documentation"
            "overview tickets";
    }
}

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

    .sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--line-soft);
    }

    .nav-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sidebar-link {
        margin-top: 0.4rem;
    }

    .module-grid {
        grid-template-columns: 1fr;
        grid-template-areas: none;
    }

    .module-card {
        grid-area: auto;
    }

    .split-layout,
    .doc-layout {
        grid-template-columns: 1fr;
    }

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

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

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

    .role-switch {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .alerting-panel .channel-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .main-content {
        padding: 0.8rem;
    }

    .search-form {
        min-width: 0;
        flex-direction: column;
    }

    .search-form button {
        width: 100%;
    }

    .topbar-controls {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .nav-list {
        grid-template-columns: 1fr;
    }

    .kpi-row {
        grid-template-columns: 1fr;
    }
}

@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;
    }
}