/* Self-hosted fonts (downloaded from Google Fonts) */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/manrope-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/spacegrotesk-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/spacegrotesk-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --bg: #060c18;
    --bg-alt: #0d1b2f;
    --card: #0f1b32;
    --card-strong: #122444;
    --border: rgba(90, 140, 220, 0.28);
    --accent: #57c0ff;
    --accent-2: #65e3bd;
    --muted: #9bb1d1;
    --ink: #e8f0ff;
    --shadow: 0 22px 50px rgba(3, 8, 16, 0.65);
    font-family: "Manrope", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
}

html {
    font-size: 16px;
    background:
        radial-gradient(1200px 800px at 8% -10%, rgba(87, 192, 255, 0.25), transparent 60%),
        radial-gradient(900px 700px at 95% 0%, rgba(42, 155, 255, 0.22), transparent 55%),
        radial-gradient(700px 500px at 20% 100%, rgba(101, 227, 189, 0.18), transparent 60%),
        linear-gradient(180deg, #050a14 0%, #070e1c 55%, #050812 100%);
}

body {
    color: var(--ink);
    background: transparent;
    margin-bottom: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body > header,
body > footer {
    flex: 0 0 auto;
}

body > .container {
    flex: 1 0 auto;
}

h1, h2, .hero-copy h1 {
    font-family: "Space Grotesk", "Manrope", sans-serif;
}

a {
    color: var(--accent);
}

::placeholder {
    color: rgba(155, 177, 209, 0.7);
}

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

.navbar {
    background: rgba(7, 12, 24, 0.92);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 18px 40px rgba(4, 10, 20, 0.45);
    backdrop-filter: blur(12px);
}

.navbar.bg-white {
    background: rgba(7, 12, 24, 0.92) !important;
}

.navbar a {
    color: var(--ink) !important;
    font-weight: 600;
}

.navbar .navbar-brand {
    color: var(--accent) !important;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.navbar .navbar-brand::before {
    content: "";
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: url("../images/keiths-kitchens-logo.svg") center / cover no-repeat;
    box-shadow: 0 8px 20px rgba(57, 183, 255, 0.35);
}

.navbar .navbar-nav {
    gap: 6px 10px;
}

.navbar .nav-link {
    padding: 6px 10px;
    border-radius: 10px;
}

@media (min-width: 576px) {
    .navbar .navbar-nav.flex-grow-1 {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .navbar .navbar-nav.flex-grow-1::-webkit-scrollbar {
        display: none;
    }

    .navbar .navbar-nav.flex-grow-1 > .nav-item {
        flex: 0 0 auto;
    }
}

.navbar .navbar-toggler {
    border-color: rgba(87, 192, 255, 0.4);
}

.navbar .navbar-toggler-icon {
    filter: invert(1);
}

.app-commandbar {
    background: rgba(6, 12, 22, 0.8);
    border-bottom: 1px solid rgba(87, 192, 255, 0.14);
    position: relative;
    z-index: 18;
    padding: 12px 0 16px;
    margin-top: 0;
}

.app-commandbar-nav {
    padding: 12px 0 8px;
}

.command-toolbar {
    position: relative;
    z-index: 2;
    margin-bottom: 12px;
}

.app-top-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.app-top-links .pill {
    text-decoration: none;
}

.app-top-links .pill.active {
    background: linear-gradient(135deg, #2958be, #1b3f98);
    border-color: #1b3f98;
    color: #ffffff;
}

.command-wrap {
    position: relative;
    width: min(100%, 1080px);
    z-index: 220;
}

.kk-app-command-layer {
    display: none;
}

.command-sheet {
    position: relative;
}

.command-sheet-top {
    display: none;
}

.command-sheet-backdrop {
    display: none;
}

.command-sheet-panel {
    position: relative;
}

.command-sheet-kicker {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(155, 177, 209, 0.8);
}

.command-sheet-title {
    margin-top: 4px;
    color: var(--ink);
    font-weight: 700;
}

.command-sheet-close {
    border: 1px solid rgba(87, 192, 255, 0.2);
    background: rgba(9, 16, 30, 0.85);
    color: var(--ink);
    border-radius: 999px;
    padding: 8px 14px;
    font-weight: 700;
}

.command-input-shell {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid rgba(87, 192, 255, 0.22);
    background: rgba(8, 14, 26, 0.82);
    box-shadow: 0 16px 34px rgba(4, 10, 20, 0.4);
    cursor: text;
}

.command-input-shell:focus-within {
    border-color: rgba(94, 225, 255, 0.6);
    box-shadow: 0 0 0 3px rgba(94, 225, 255, 0.2);
}

.command-icon {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(155, 177, 209, 0.9);
    background: rgba(12, 20, 34, 0.8);
    border: 1px solid rgba(87, 192, 255, 0.2);
    border-radius: 999px;
    padding: 4px 8px;
    pointer-events: none;
}

#app-command-input {
    border: none;
    background: transparent;
    color: var(--ink);
    font-weight: 600;
    font-size: 0.95rem;
    outline: none;
    width: 100%;
    min-width: 0;
    min-height: 34px;
}

.command-hint {
    font-size: 0.75rem;
    color: rgba(155, 177, 209, 0.8);
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(87, 192, 255, 0.2);
    background: rgba(9, 16, 30, 0.8);
    pointer-events: none;
}

.command-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    border-radius: 16px;
    padding: 10px;
    border: 1px solid rgba(87, 192, 255, 0.22);
    background: rgba(7, 12, 22, 0.95);
    box-shadow: 0 20px 46px rgba(3, 8, 16, 0.6);
    display: grid;
    gap: 8px;
    z-index: 200;
    max-height: min(72vh, 820px);
    overflow: auto;
}

.command-empty {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px dashed rgba(87, 192, 255, 0.24);
    color: var(--muted);
    font-size: 0.9rem;
    background: rgba(8, 14, 24, 0.7);
}

.command-ai-note {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(87, 192, 255, 0.18);
    background: linear-gradient(135deg, rgba(14, 24, 42, 0.94), rgba(18, 34, 58, 0.92));
    color: rgba(225, 236, 247, 0.94);
    font-size: 0.84rem;
    line-height: 1.45;
}

.kk-mobile-dock {
    display: none;
}

.kk-mobile-appbar {
    display: none;
}

body.kk-brand.app-mode .kk-app-header {
    position: relative;
    z-index: 35;
    margin: 0 0 18px;
    border-bottom: 1px solid rgba(117, 86, 57, 0.18);
    background:
        linear-gradient(180deg, rgba(251, 246, 236, 0.9), rgba(244, 234, 216, 0.82)),
        repeating-linear-gradient(
            -18deg,
            rgba(138, 98, 62, 0.05) 0 10px,
            rgba(255, 255, 255, 0) 10px 20px
        );
    box-shadow: 0 18px 34px rgba(68, 47, 27, 0.08);
}

body.kk-brand.app-mode .kk-app-header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "brand utility"
        "search search"
        "links links";
    align-items: start;
    gap: 14px 18px;
    padding: 16px 0 14px;
}

body.kk-brand.app-mode .kk-app-brand-column {
    grid-area: brand;
    min-width: 0;
    align-self: center;
}

body.kk-brand.app-mode .kk-app-brand-lockup {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 70px;
    min-width: 206px;
    padding: 14px 18px;
    border-radius: 22px;
    border: 1px solid rgba(117, 86, 57, 0.2);
    background: linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(243, 233, 215, 0.94));
    box-shadow: 0 14px 28px rgba(68, 47, 27, 0.12);
    text-decoration: none;
}

body.kk-brand.app-mode .kk-app-brand-lockup::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top left, rgba(37, 83, 186, 0.12), transparent 42%),
        radial-gradient(circle at bottom right, rgba(226, 178, 102, 0.18), transparent 46%);
    pointer-events: none;
}

body.kk-brand.app-mode .kk-app-brand-logo {
    position: relative;
    display: block;
    width: auto;
    height: 34px;
    max-width: min(240px, 100%);
}

body.kk-brand.app-mode .kk-app-command-layer {
    grid-area: search;
    display: flex;
    align-items: center;
    min-width: 0;
    position: relative;
    z-index: 2;
}

body.kk-brand.app-mode .kk-app-command-layer .command-sheet,
body.kk-brand.app-mode .kk-app-command-layer .command-wrap {
    width: 100%;
}

body.kk-brand.app-mode .kk-app-utility-row {
    grid-area: utility;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    align-self: center;
}

body.kk-brand.app-mode .kk-app-utility-row .app-ai-cta,
body.kk-brand.app-mode .kk-app-utility-row .app-request-cta {
    min-height: 50px;
    padding-inline: 18px;
    border-radius: 16px;
    white-space: nowrap;
}

body.kk-brand.app-mode .kk-app-utility-row .header-inbox-btn,
.navbar .header-inbox-btn,
.header-inbox-mobile {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

body.kk-brand.app-mode .kk-app-utility-row .header-inbox-btn,
.navbar .header-inbox-btn {
    min-height: 50px;
    padding-inline: 18px;
    border-radius: 16px;
    white-space: nowrap;
}

body.kk-brand.app-mode .kk-app-utility-row .header-inbox-btn {
    background: linear-gradient(180deg, rgba(255, 251, 245, 0.98), rgba(244, 234, 218, 0.92));
    color: #22313b;
    border-color: rgba(117, 86, 57, 0.2);
    box-shadow: 0 12px 24px rgba(68, 47, 27, 0.1);
}

body.kk-brand.app-mode .kk-app-utility-row .header-inbox-btn:hover,
body.kk-brand.app-mode .kk-app-utility-row .header-inbox-btn:focus-visible,
.navbar .header-inbox-btn:hover,
.navbar .header-inbox-btn:focus-visible,
.header-inbox-mobile:hover,
.header-inbox-mobile:focus-visible {
    color: #152028;
    border-color: rgba(49, 87, 164, 0.34);
    box-shadow: 0 16px 28px rgba(68, 47, 27, 0.14);
}

.header-inbox-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.55rem;
    height: 1.55rem;
    padding: 0 0.42rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #d64045, #9f1d22);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    box-shadow: 0 10px 18px rgba(159, 29, 34, 0.3);
}

.header-inbox-badge.mobile {
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.38rem;
    font-size: 0.72rem;
}

body.kk-brand.app-mode .kk-app-utility-row .app-hub-toggle {
    min-height: 50px;
    padding-inline: 18px;
    border-radius: 16px;
    white-space: nowrap;
    background: linear-gradient(180deg, rgba(255, 251, 245, 0.98), rgba(244, 234, 218, 0.92));
    color: #2a3944;
    border-color: rgba(117, 86, 57, 0.22);
    box-shadow: 0 12px 24px rgba(68, 47, 27, 0.1);
}

body.kk-brand.app-mode .kk-app-utility-row .app-hub-toggle:hover,
body.kk-brand.app-mode .kk-app-utility-row .app-hub-toggle:focus-visible {
    color: #1d2a31;
    border-color: rgba(49, 87, 164, 0.36);
    box-shadow: 0 16px 28px rgba(68, 47, 27, 0.14);
}

body.kk-brand.app-mode .kk-app-utility-row .app-ai-cta {
    background: linear-gradient(135deg, rgba(34, 70, 160, 0.96), rgba(22, 44, 111, 0.98));
    border-color: rgba(29, 58, 131, 0.88);
    color: #fffdf8;
    box-shadow: 0 14px 26px rgba(24, 47, 112, 0.22);
}

body.kk-brand.app-mode .kk-app-utility-row .app-ai-cta:hover,
body.kk-brand.app-mode .kk-app-utility-row .app-ai-cta:focus-visible {
    color: #ffffff;
    border-color: rgba(42, 77, 163, 0.96);
    box-shadow: 0 18px 30px rgba(24, 47, 112, 0.28);
}

body.kk-brand.app-mode .kk-app-links-shell {
    grid-area: links;
    min-width: 0;
    position: relative;
    z-index: 1;
}

body.kk-brand.app-mode .kk-app-common-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

body.kk-brand.app-mode .kk-app-common-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(117, 86, 57, 0.16);
    background: linear-gradient(180deg, rgba(255, 251, 245, 0.96), rgba(244, 234, 218, 0.92));
    color: #23333c;
    text-decoration: none;
    font-weight: 800;
    box-shadow: 0 10px 20px rgba(68, 47, 27, 0.08);
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

body.kk-brand.app-mode .kk-app-common-link:hover,
body.kk-brand.app-mode .kk-app-common-link:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(49, 87, 164, 0.34);
    box-shadow: 0 14px 24px rgba(68, 47, 27, 0.12);
    outline: none;
}

body.kk-brand.app-mode .kk-app-common-link.active {
    background: linear-gradient(135deg, #2958be, #1b3f98);
    border-color: rgba(24, 52, 128, 0.84);
    color: #ffffff;
    box-shadow: 0 16px 28px rgba(27, 63, 152, 0.24);
}

.command-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(87, 192, 255, 0.16);
    background: rgba(10, 18, 32, 0.75);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.15s ease;
}

.command-row:hover,
.command-row.active {
    border-color: rgba(94, 225, 255, 0.45);
    transform: translateY(-1px);
}

.command-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.command-topline {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.command-label {
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}

.command-meta {
    font-size: 0.78rem;
    color: var(--muted);
    min-width: 0;
    overflow-wrap: anywhere;
}

.command-path-shell {
    display: flex;
    justify-content: flex-end;
    min-width: 0;
}

.command-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(87, 192, 255, 0.24);
    background: rgba(12, 20, 34, 0.82);
    color: rgba(201, 226, 249, 0.92);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.command-path {
    font-size: 0.8rem;
    color: var(--muted);
    overflow-wrap: anywhere;
    text-align: right;
}

@media (max-width: 900px) {
    .command-input-shell {
        grid-template-columns: 1fr;
    }

    .command-icon,
    .command-hint {
        display: none;
    }

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

    .command-path-shell {
        justify-content: flex-start;
    }
}

.footer {
    background: rgba(7, 12, 24, 0.92);
    border-top: 1px solid var(--border);
    color: var(--muted);
}

.panel {
    background: linear-gradient(160deg, rgba(18, 32, 56, 0.92), rgba(8, 14, 24, 0.8));
    border-radius: 20px;
    padding: 26px 30px;
    margin-top: 24px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(87, 192, 255, 0.22);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 0% 0%, rgba(87, 192, 255, 0.18), transparent 55%);
    opacity: 0.85;
    pointer-events: none;
}

.panel > * {
    position: relative;
    z-index: 1;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.panel-header h1 {
    margin: 0;
}

.panel-header .muted {
    color: var(--muted);
    margin: 0;
}

.muted {
    color: var(--muted);
}

.muted.tiny {
    font-size: 0.9rem;
}

.search-form {
    display: flex;
    gap: 8px;
}

.search-form input {
    background: rgba(7, 14, 26, 0.8);
    border: 1px solid rgba(87, 192, 255, 0.2);
    color: var(--ink);
    padding: 8px 10px;
    border-radius: 10px;
}

.search-form button {
    background: linear-gradient(135deg, #62ccff, #2a9bff);
    color: #07101f;
    border: none;
    padding: 8px 12px;
    border-radius: 10px;
    font-weight: 700;
    box-shadow: 0 12px 24px rgba(87, 192, 255, 0.3);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.card {
    display: block;
    background: linear-gradient(160deg, rgba(16, 28, 50, 0.95), rgba(8, 14, 24, 0.78));
    border-radius: 14px;
    padding: 16px;
    color: var(--ink);
    text-decoration: none;
    border: 1px solid rgba(87, 192, 255, 0.2);
    box-shadow: 0 18px 36px rgba(5, 12, 24, 0.55);
    transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-2px);
    border-color: rgba(87, 192, 255, 0.45);
    box-shadow: 0 22px 48px rgba(5, 12, 24, 0.65);
}

.card-title {
    font-weight: 700;
    margin-bottom: 8px;
}

.card-body {
    color: var(--muted);
}

.dark-table {
    width: 100%;
    background: rgba(8, 14, 24, 0.6);
    border-collapse: collapse;
    color: var(--ink);
}

.dark-table th,
.dark-table td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(87, 192, 255, 0.12);
}

.call-popup {
    background: linear-gradient(160deg, rgba(14, 24, 44, 0.98), rgba(8, 14, 24, 0.92));
    border: 1px solid rgba(87, 192, 255, 0.32);
    color: var(--ink);
    box-shadow: var(--shadow);
}

.call-popup .modal-header {
    border-bottom: 1px solid rgba(87, 192, 255, 0.2);
}

.call-popup .modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.call-popup-meta {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 0.95rem;
}

.call-popup-divider {
    margin: 0 6px;
    color: rgba(155, 177, 209, 0.6);
}

.call-popup-summary {
    background: rgba(9, 16, 30, 0.65);
    border-radius: 12px;
    padding: 14px 16px;
    color: var(--ink);
    border: 1px solid rgba(87, 192, 255, 0.2);
}

.call-popup-followup {
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(101, 227, 189, 0.12);
    border: 1px solid rgba(101, 227, 189, 0.4);
    color: var(--ink);
}

.call-popup-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.call-popup .btn-outline-light {
    border-color: rgba(232, 240, 255, 0.55);
    color: var(--ink);
}

.order-confirm {
    background: linear-gradient(160deg, rgba(14, 24, 44, 0.98), rgba(8, 14, 24, 0.92));
    border: 1px solid rgba(87, 192, 255, 0.32);
    color: var(--ink);
    box-shadow: var(--shadow);
}

.order-confirm .modal-header,
.order-confirm .modal-footer {
    border-color: rgba(87, 192, 255, 0.2);
}

.order-confirm .modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.order-confirm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.order-confirm-block {
    background: rgba(9, 16, 30, 0.65);
    border-radius: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(87, 192, 255, 0.18);
}

.order-confirm-block span {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
    font-weight: 700;
}

.order-confirm-block strong {
    display: block;
    margin-top: 6px;
    font-size: 1.1rem;
    font-weight: 800;
}

.order-confirm-warning {
    margin: 0;
}

.dark-table th {
    background: rgba(8, 16, 28, 0.9);
    text-align: left;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    color: var(--muted);
}

.dark-table tr:hover td {
    background: rgba(15, 26, 42, 0.65);
}

.dark-table a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.dark-table a:hover {
    color: var(--accent-2);
    text-decoration: underline;
}

.order-items {
    width: 100%;
    table-layout: fixed;
    min-width: 1700px;
}

.order-items th,
.order-items td {
    padding: 14px 14px;
    overflow-wrap: anywhere;
    vertical-align: top;
}

.order-items input,
.order-items textarea {
    background: rgba(14, 26, 46, 0.96);
    border: 1px solid rgba(87, 192, 255, 0.35);
    color: #f4f9ff;
    border-radius: 12px;
    padding: 12px 14px;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    font-size: 1.15rem;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0.01em;
    caret-color: #f4f9ff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.order-items input {
    min-height: 56px;
}

.order-items textarea {
    min-height: 96px;
}

.order-items input::placeholder,
.order-items textarea::placeholder {
    color: rgba(190, 210, 240, 0.8);
}

.order-items input:focus,
.order-items textarea:focus {
    border-color: rgba(120, 210, 255, 0.7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 3px rgba(87, 192, 255, 0.22);
    background: rgba(18, 32, 58, 0.98);
    outline: none;
}

.order-items input:-webkit-autofill,
.order-items textarea:-webkit-autofill {
    -webkit-text-fill-color: #f4f9ff;
    transition: background-color 9999s ease-out;
    box-shadow: 0 0 0 1000px rgba(14, 26, 46, 0.96) inset;
}

.order-items .item-thumb {
    width: 56px;
    height: 40px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(87, 192, 255, 0.25);
    background: rgba(7, 14, 26, 0.6);
}

.order-items .item-thumb-cell {
    text-align: center;
}

.order-items th:nth-child(6),
.order-items td:nth-child(6) {
    width: 132px;
}

.order-items th:nth-child(7),
.order-items td:nth-child(7) {
    width: 148px;
}

.order-items th:nth-child(1),
.order-items td:nth-child(1) {
    width: 150px;
}

.order-items th:nth-child(2),
.order-items td:nth-child(2) {
    width: 140px;
}

.order-items th:nth-child(3),
.order-items td:nth-child(3) {
    width: 140px;
}

.order-items th:nth-child(4),
.order-items td:nth-child(4) {
    width: 170px;
}

.order-items th:nth-child(5),
.order-items td:nth-child(5) {
    width: 170px;
}

.order-items th:nth-child(8),
.order-items td:nth-child(8) {
    width: 260px;
}

.order-items th:nth-child(9),
.order-items td:nth-child(9) {
    width: 170px;
}

.order-items th:nth-child(10),
.order-items td:nth-child(10) {
    width: 80px;
}

.order-items th:nth-child(11),
.order-items td:nth-child(11) {
    width: 96px;
}

.order-items tr.row-active td {
    background: rgba(14, 24, 40, 0.75);
}

.order-items input.qty-input,
.order-items input.cost-input {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.order-items input.qty-input {
    min-width: 8ch;
}

.order-items input.cost-input {
    min-width: 10ch;
}

.item-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}

button.pill {
    cursor: pointer;
}

button.pill.danger {
    background: rgba(42, 16, 22, 0.85);
    border-color: rgba(255, 139, 139, 0.45);
    color: #ff8b8b;
}

.table-wrap {
    overflow-x: auto;
    border-radius: 14px;
    border: 1px solid rgba(87, 192, 255, 0.1);
    background: rgba(8, 14, 24, 0.6);
    padding: 6px;
}

.jobs-filter-bar,
.crm-filter-bar {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(9, 16, 28, 0.7);
    border: 1px solid rgba(87, 192, 255, 0.16);
}

.jobs-filter-bar input[type="search"],
.crm-filter-bar input[type="search"] {
    background: rgba(7, 14, 26, 0.85);
    border: 1px solid rgba(87, 192, 255, 0.22);
    color: var(--ink);
    border-radius: 10px;
    padding: 8px 10px;
}

.inventory-browse-form-card {
    margin-bottom: 12px;
}

.inventory-browse-form {
    align-items: end;
}

.inventory-browse-form-card .inventory-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

@media (max-width: 900px) {
    .inventory-browse-form {
        grid-template-columns: 1fr;
    }
}

.order-items-wrap {
    overflow-x: visible;
}

.order-items-stacked {
    min-width: 0;
    table-layout: auto;
}

.order-items-stacked thead {
    display: none;
}

.order-items-stacked tbody {
    display: block;
}

.order-items-stacked tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
    margin: 0 0 14px;
    border-radius: 16px;
    border: 1px solid rgba(87, 192, 255, 0.18);
    background: rgba(10, 18, 32, 0.7);
}

.order-items-stacked td {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
}

.order-items-stacked .item-thumb-cell {
    align-items: flex-start;
}

.order-items-stacked .cell-label {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: rgba(176, 200, 230, 0.9);
    font-weight: 700;
}

.order-items-stacked tr.row-active td {
    background: transparent;
}

@media (max-width: 1200px) {
    .order-items-stacked tr {
        grid-template-columns: minmax(0, 1fr);
    }
}

.calendar-board {
    margin-top: 12px;
    overflow-x: auto;
    border-radius: 16px;
    border: 1px solid rgba(87, 192, 255, 0.18);
    background: rgba(8, 14, 24, 0.6);
    max-height: 520px;
    overflow: auto;
}

.calendar-grid {
    display: grid;
    grid-template-columns: 220px repeat(var(--day-count), minmax(180px, 1fr));
    min-width: calc(220px + (180px * var(--day-count)));
}

.calendar-cell {
    padding: 12px;
    border-right: 1px solid rgba(87, 192, 255, 0.12);
    border-bottom: 1px solid rgba(87, 192, 255, 0.12);
    min-height: 110px;
}

.calendar-cell.header {
    background: rgba(8, 16, 28, 0.92);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 600;
    min-height: auto;
    position: sticky;
    top: 0;
    z-index: 3;
}

.calendar-cell.owner-cell {
    background: rgba(9, 16, 30, 0.85);
    position: sticky;
    left: 0;
    z-index: 2;
}

.calendar-cell.header.owner-cell {
    z-index: 4;
}

.calendar-cell.owner-cell .owner-name {
    font-weight: 700;
}

.calendar-cell.day-cell {
    min-height: 180px;
}

.calendar-event {
    background: rgba(15, 26, 42, 0.8);
    border: 1px solid rgba(87, 192, 255, 0.25);
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 8px;
}

.calendar-event .event-subject {
    font-weight: 600;
}

.calendar-event .event-time {
    font-size: 0.85rem;
    color: var(--muted);
}

.calendar-event .event-location {
    font-size: 0.8rem;
    color: rgba(155, 177, 209, 0.8);
}

.calendar-event.event-busy {
    border-color: rgba(255, 180, 87, 0.4);
    background: rgba(41, 28, 12, 0.75);
}

.calendar-event.event-away {
    border-color: rgba(255, 115, 115, 0.4);
    background: rgba(40, 16, 20, 0.7);
}

.calendar-event.event-tentative {
    border-color: rgba(131, 195, 255, 0.4);
    background: rgba(17, 28, 46, 0.78);
}

.calendar-event.event-free {
    border-color: rgba(101, 227, 189, 0.35);
    background: rgba(15, 30, 25, 0.7);
}

.calendar-empty {
    color: var(--muted);
    font-size: 0.9rem;
    opacity: 0.7;
}

.calendar-details {
    margin-top: 16px;
}

.calendar-details summary {
    cursor: pointer;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 10px;
}

.calendar-hero {
    border: 1px solid rgba(87, 192, 255, 0.35);
    box-shadow: 0 28px 60px rgba(3, 10, 24, 0.6);
}

.calendar-hero .card-header {
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.calendar-hero h2 {
    margin: 6px 0 4px;
    font-size: 1.6rem;
}

.calendar-legend {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.legend-pill {
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid rgba(87, 192, 255, 0.3);
    background: rgba(10, 18, 32, 0.8);
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.legend-pill.event-busy {
    border-color: rgba(255, 180, 87, 0.4);
}

.legend-pill.event-away {
    border-color: rgba(255, 115, 115, 0.4);
}

.legend-pill.event-tentative {
    border-color: rgba(131, 195, 255, 0.4);
}

.legend-pill.event-free {
    border-color: rgba(101, 227, 189, 0.4);
}

/* Task scheduling calendar */
.task-calendar-card {
    border: 1px solid rgba(87, 192, 255, 0.35);
    box-shadow: 0 26px 60px rgba(4, 10, 22, 0.6);
}

.task-calendar-header {
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.task-calendar-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.task-calendar-controls .pill-row {
    margin: 0;
}

.task-date-picker {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.task-date-picker label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--app-muted);
}

.task-calendar-scroll {
    margin-top: 14px;
    overflow: auto;
    border-radius: 18px;
    border: 1px solid rgba(87, 192, 255, 0.18);
    background: rgba(8, 14, 24, 0.65);
    max-height: 640px;
}

.task-calendar-grid {
    display: grid;
    grid-template-columns: repeat(var(--day-count), minmax(240px, 1fr));
    min-width: calc(240px * var(--day-count));
    gap: 14px;
    padding: 14px;
}

.task-day {
    background: rgba(10, 18, 32, 0.85);
    border: 1px solid rgba(87, 192, 255, 0.18);
    border-radius: 16px;
    padding: 14px;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.task-day:focus {
    outline: none;
    border-color: rgba(87, 192, 255, 0.5);
    box-shadow: 0 0 0 3px rgba(87, 192, 255, 0.2);
}

.task-day.is-selected {
    border-color: rgba(101, 227, 189, 0.5);
    box-shadow: 0 20px 36px rgba(5, 12, 24, 0.6);
    transform: translateY(-2px);
}

.task-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
}

.task-day-label {
    font-weight: 700;
    font-size: 1.05rem;
}

.task-day-count {
    font-size: 0.8rem;
    color: var(--app-muted);
    background: rgba(87, 192, 255, 0.12);
    border: 1px solid rgba(87, 192, 255, 0.2);
    padding: 4px 8px;
    border-radius: 999px;
}

.task-day-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.task-chip {
    display: block;
    text-decoration: none;
    background: rgba(12, 22, 40, 0.95);
    border: 1px solid rgba(87, 192, 255, 0.2);
    border-radius: 12px;
    padding: 10px 12px;
    color: var(--app-ink);
    transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.task-chip:hover {
    border-color: rgba(87, 192, 255, 0.5);
    box-shadow: 0 14px 26px rgba(5, 12, 24, 0.45);
    transform: translateY(-1px);
}

.task-chip-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.task-chip-meta {
    font-size: 0.85rem;
    color: var(--app-muted);
}

.task-empty {
    color: var(--app-muted);
    font-size: 0.9rem;
    background: rgba(7, 14, 26, 0.5);
    border: 1px dashed rgba(87, 192, 255, 0.25);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
}

.task-calendar-card[data-view="day"] .task-calendar-scroll {
    overflow-x: hidden;
}

.task-calendar-card[data-view="day"] .task-calendar-grid {
    grid-template-columns: minmax(280px, 1fr);
    min-width: 0;
}

.task-calendar-card[data-view="day"] .task-day {
    display: none;
}

.task-calendar-card[data-view="day"] .task-day.is-selected {
    display: flex;
    min-height: 320px;
}

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

.task-row {
    background: rgba(10, 18, 32, 0.75);
    border: 1px solid rgba(87, 192, 255, 0.2);
    border-radius: 16px;
    padding: 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
}

.task-row-title {
    font-size: 1.05rem;
    font-weight: 700;
}

.task-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--app-muted);
}

.task-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.task-row-actions form {
    margin: 0;
}

@media (max-width: 900px) {
    .task-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .task-row-actions {
        justify-content: flex-start;
    }
}

.pager {
    margin-top: 12px;
    color: var(--muted);
}

/* Forms */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 12px;
}

.form-card {
    background: linear-gradient(160deg, rgba(16, 28, 50, 0.94), rgba(8, 14, 24, 0.82));
    border: 1px solid rgba(87, 192, 255, 0.2);
    border-radius: 18px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 18px 36px rgba(5, 12, 24, 0.5);
}

.form-card h3 {
    margin: 0 0 6px 0;
}

.form-card input,
.form-card select,
.form-card textarea {
    background: rgba(7, 14, 26, 0.85);
    border: 1px solid rgba(87, 192, 255, 0.22);
    color: var(--ink);
    border-radius: 12px;
    padding: 12px 12px;
    width: 100%;
}

.form-card textarea {
    resize: vertical;
}

.form-card.actions {
    align-items: flex-start;
    justify-content: center;
}

.primary {
    background: linear-gradient(135deg, #62ccff, #2a9bff);
    color: #07101f;
    border: none;
    border-radius: 12px;
    padding: 12px 18px;
    cursor: pointer;
    font-weight: 800;
    box-shadow: 0 14px 30px rgba(87, 192, 255, 0.35);
}

.primary:hover {
    filter: brightness(1.05);
}

.alert {
    padding: 12px 14px;
    border-radius: 12px;
    margin-bottom: 10px;
    border: 1px solid rgba(87, 192, 255, 0.2);
}

.alert.success {
    background: rgba(16, 38, 32, 0.85);
    border-color: rgba(101, 227, 189, 0.4);
    color: #65e3bd;
}

.alert.error {
    background: rgba(42, 16, 22, 0.85);
    border-color: rgba(255, 139, 139, 0.45);
    color: #ff8b8b;
}

.hero {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: 20px;
    align-items: stretch;
}

.doors-hero {
    background: linear-gradient(135deg, rgba(87, 192, 255, 0.14), rgba(8, 14, 24, 0.85)), var(--card-strong);
}

.hero-copy h1 {
    margin: 8px 0 10px 0;
    font-size: 2rem;
    line-height: 1.3;
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--accent);
}

.pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.pill {
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(12, 22, 38, 0.8);
    border: 1px solid rgba(87, 192, 255, 0.2);
    font-weight: 600;
    color: var(--ink);
}

.hero-side {
    display: grid;
    gap: 12px;
    align-content: start;
}

.stat-card {
    background: linear-gradient(160deg, rgba(16, 28, 50, 0.94), rgba(8, 14, 24, 0.82));
    border: 1px solid rgba(87, 192, 255, 0.2);
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 16px 34px rgba(5, 12, 24, 0.5);
}

.stat-label {
    color: var(--muted);
    font-size: 0.9rem;
}

.stat-value {
    font-weight: 800;
    font-size: 1.25rem;
    margin: 4px 0;
}

.stat-note {
    color: var(--muted);
    font-size: 0.95rem;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(87, 192, 255, 0.18);
    border: 1px solid rgba(87, 192, 255, 0.3);
    color: var(--accent);
    font-weight: 700;
    font-size: 0.85rem;
}

.badge.soft {
    background: rgba(101, 227, 189, 0.12);
    border-color: rgba(101, 227, 189, 0.3);
    color: #65e3bd;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    row-gap: 8px;
}

.order-wizard {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 10px 0 12px;
}

.wizard-step {
    border: 1px solid rgba(87, 192, 255, 0.24);
    background: rgba(8, 16, 30, 0.75);
    color: #d7e6fb;
    border-radius: 14px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
    text-align: left;
    cursor: pointer;
}

.wizard-step:hover:not(:disabled) {
    border-color: rgba(120, 210, 255, 0.45);
}

.wizard-step:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.wizard-step.active {
    background: linear-gradient(135deg, rgba(41, 139, 239, 0.32), rgba(10, 28, 56, 0.9));
    border-color: rgba(120, 210, 255, 0.62);
}

.wizard-step.done {
    border-color: rgba(94, 227, 181, 0.56);
    background: linear-gradient(135deg, rgba(16, 62, 54, 0.88), rgba(7, 24, 24, 0.92));
}

.wizard-step-num {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.12);
}

.wizard-step-label {
    font-weight: 700;
    letter-spacing: 0.01em;
}

.wizard-heading {
    margin-bottom: 14px;
}

.wizard-heading h2 {
    margin: 0 0 4px;
    font-size: 1.45rem;
}

.wizard-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    margin-top: 12px;
    flex-wrap: wrap;
}

[data-step-panel][hidden] {
    display: none !important;
}

.item-builder-shell {
    display: grid;
    gap: 14px;
    margin-top: 10px;
}

.item-source-strip {
    border: 1px solid rgba(87, 192, 255, 0.22);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(14, 28, 48, 0.92), rgba(8, 17, 30, 0.88));
    padding: 14px;
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.item-source-copy {
    display: grid;
    gap: 4px;
}

.item-source-copy strong {
    color: #eaf3ff;
    font-size: 1rem;
}

.item-source-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(189, 213, 244, 0.84);
}

.item-source-bar {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: end;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(87, 192, 255, 0.16);
    background: rgba(6, 14, 24, 0.56);
}

.item-source-field {
    display: grid;
    gap: 6px;
}

.item-source-field span {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(182, 206, 237, 0.88);
}

.item-source-field input {
    min-height: 46px;
    border-radius: 12px;
    border: 1px solid rgba(87, 192, 255, 0.18);
    background: rgba(8, 16, 28, 0.88);
    color: #eaf3ff;
    padding: 0 14px;
}

.item-source-field input::placeholder {
    color: rgba(155, 177, 209, 0.72);
}

.item-source-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.item-source-status {
    color: rgba(191, 214, 241, 0.86);
}

.item-nav-strip {
    border: 1px solid rgba(87, 192, 255, 0.2);
    border-radius: 14px;
    background: rgba(9, 18, 32, 0.72);
    padding: 10px 12px;
}

.item-nav-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.item-nav-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.item-nav-chip {
    border: 1px solid rgba(87, 192, 255, 0.22);
    background: rgba(10, 20, 36, 0.78);
    color: #deebff;
    border-radius: 12px;
    padding: 8px 10px;
    display: inline-grid;
    gap: 2px;
    text-align: left;
    cursor: pointer;
    min-width: 140px;
}

.item-nav-chip.active {
    border-color: rgba(120, 210, 255, 0.65);
    box-shadow: 0 0 0 2px rgba(87, 192, 255, 0.2);
    background: linear-gradient(140deg, rgba(33, 120, 214, 0.36), rgba(10, 23, 43, 0.92));
}

.item-nav-chip-line {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.68rem;
    color: rgba(191, 214, 241, 0.78);
    font-weight: 700;
}

.item-nav-chip-title {
    font-weight: 700;
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-nav-chip-meta {
    font-size: 0.75rem;
    color: rgba(181, 205, 236, 0.85);
}

.item-card-stack {
    display: grid;
    gap: 12px;
}

.item-card {
    border: 1px solid rgba(87, 192, 255, 0.2);
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(12, 24, 42, 0.88), rgba(8, 16, 30, 0.9));
    padding: 14px;
    display: grid;
    gap: 12px;
}

.item-card.row-active {
    border-color: rgba(120, 210, 255, 0.66);
    box-shadow: 0 0 0 3px rgba(87, 192, 255, 0.18);
}

.item-card.row-collapsed {
    gap: 8px;
    padding-bottom: 12px;
}

.item-card.row-collapsed .item-card-grid,
.item-card.row-collapsed .item-card-foot {
    display: none;
}

.item-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.item-card.row-collapsed .item-card-head {
    cursor: pointer;
}

.item-card-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.item-card-summary {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
}

.item-card-summary span {
    border-radius: 999px;
    border: 1px solid rgba(87, 192, 255, 0.18);
    background: rgba(7, 14, 26, 0.62);
    padding: 5px 10px;
    font-size: 0.76rem;
    color: rgba(188, 213, 244, 0.9);
}

.item-card.row-collapsed .item-card-summary {
    display: flex;
}

.line-pill {
    border-radius: 999px;
    border: 1px solid rgba(87, 192, 255, 0.28);
    padding: 4px 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    color: rgba(188, 213, 244, 0.9);
    font-weight: 700;
    background: rgba(10, 18, 32, 0.75);
    white-space: nowrap;
}

.item-card-title {
    font-weight: 800;
    color: #eaf3ff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-card-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1.55fr) minmax(240px, 0.95fr);
    grid-template-areas:
        "identity preview"
        "ordering preview"
        "notes preview";
}

.item-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.item-field-wide {
    grid-column: span 2;
}

.item-field-note {
    font-size: 0.74rem;
    color: rgba(182, 206, 237, 0.76);
}

.item-section {
    border: 1px solid rgba(87, 192, 255, 0.18);
    border-radius: 14px;
    background: rgba(7, 14, 26, 0.62);
    padding: 12px;
    display: grid;
    gap: 10px;
    align-content: start;
}

.item-section-identity {
    grid-area: identity;
}

.item-section-ordering {
    grid-area: ordering;
}

.item-section-notes {
    grid-area: notes;
}

.item-section-head {
    display: grid;
    gap: 4px;
}

.item-section-title {
    font-weight: 800;
    color: #eaf3ff;
}

.item-section-sub {
    font-size: 0.8rem;
    color: rgba(182, 206, 237, 0.76);
}

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

.item-section-grid-single {
    grid-template-columns: minmax(0, 1fr);
}

.item-card .cell-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(182, 206, 237, 0.88);
}

.item-media {
    grid-area: preview;
    border: 1px solid rgba(87, 192, 255, 0.18);
    border-radius: 12px;
    background: rgba(7, 14, 26, 0.62);
    padding: 12px;
    display: grid;
    gap: 10px;
    align-content: start;
}

.item-thumb-lg {
    width: 100%;
    height: 168px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid rgba(87, 192, 255, 0.25);
    background: rgba(7, 14, 26, 0.9);
}

.item-card-foot {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 10px;
}

.item-card-foot strong {
    color: #eaf3ff;
    font-size: 1.04rem;
}

@media (max-width: 1200px) {
    .item-source-bar {
        grid-template-columns: minmax(0, 1fr);
    }

    .item-source-actions {
        justify-content: flex-start;
    }

    .item-card-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "identity"
            "ordering"
            "notes"
            "preview";
    }

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

@media (max-width: 760px) {
    .item-section-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .item-card-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

.split-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
    gap: 22px;
    align-items: start;
}

.stacked-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.field-grid {
    display: grid;
    gap: 16px;
}

.field-grid.two-col {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.field-grid.three-col {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.custom-species {
    display: none;
}

.summary-column {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.order-summary-bar {
    position: sticky;
    top: 18px;
    z-index: 6;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    padding: 16px 18px;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(16, 30, 54, 0.92), rgba(10, 18, 32, 0.92));
    border: 1px solid rgba(87, 192, 255, 0.25);
    box-shadow: 0 20px 40px rgba(4, 10, 22, 0.45);
    backdrop-filter: blur(10px);
}

.order-summary-bar .summary-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.order-summary-bar .summary-label {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    color: rgba(185, 210, 245, 0.85);
    font-weight: 700;
}

.order-summary-bar .summary-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: #eaf3ff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-summary-bar .summary-sub {
    font-size: 0.9rem;
    color: rgba(185, 210, 245, 0.7);
}

.order-summary-bar .summary-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.order-summary-bar .summary-actions .app-btn {
    min-width: 160px;
}

.estimate-card {
    background: linear-gradient(160deg, rgba(16, 28, 50, 0.94), rgba(8, 14, 24, 0.82));
    border: 1px solid rgba(87, 192, 255, 0.2);
    border-radius: 16px;
    padding: 16px;
    box-shadow: var(--shadow);
}

.preview-card {
    display: grid;
    gap: 12px;
}

.preview-frame {
    background: rgba(10, 18, 32, 0.8);
    border: 1px solid rgba(87, 192, 255, 0.2);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    position: relative;
    overflow: hidden;
}

.preview-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(135deg, rgba(87, 192, 255, 0.16), transparent 55%),
        repeating-linear-gradient(45deg, rgba(94, 227, 181, 0.12) 0 2px, transparent 2px 10px);
    opacity: 0.08;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.preview-frame::before {
    content: "";
    position: absolute;
    inset: -20% -140%;
    background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.34) 50%, transparent 60%);
    opacity: 0;
    pointer-events: none;
}

.preview-frame img {
    width: 100%;
    max-width: 320px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(5, 12, 24, 0.6);
    filter: saturate(0.78) contrast(0.92) blur(2px);
    opacity: 0.92;
    transform: scale(0.988);
    transition: filter 220ms ease, opacity 220ms ease, transform 220ms ease;
    position: relative;
    z-index: 1;
}

.preview-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-meter {
    height: 8px;
    border-radius: 999px;
    background: rgba(87, 192, 255, 0.18);
    overflow: hidden;
    margin-top: 2px;
}

.detail-meter span {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, #57c0ff 0%, #5ee3b5 100%);
    transition: width 220ms ease;
}

.preview-name {
    font-weight: 700;
}

.ai-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--muted);
}

.ai-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px rgba(87, 192, 255, 0.45);
}

.preview-card[data-ai="on"] .ai-dot {
    background: #5ee3b5;
    box-shadow: 0 0 10px rgba(94, 227, 181, 0.4);
}

.preview-card[data-ai="on"] .ai-status {
    color: var(--accent-2);
}

.preview-card[data-detail-level="1"] .preview-frame img {
    filter: saturate(0.86) contrast(0.95) blur(1.4px);
    opacity: 0.95;
}

.preview-card[data-detail-level="2"] .preview-frame img {
    filter: saturate(0.93) contrast(0.98) blur(0.9px);
    opacity: 0.97;
}

.preview-card[data-detail-level="3"] .preview-frame img {
    filter: saturate(1) contrast(1) blur(0.4px);
    opacity: 0.99;
}

.preview-card[data-detail-level="4"] .preview-frame img {
    filter: saturate(1.06) contrast(1.03) blur(0);
    opacity: 1;
    transform: scale(1);
}

.preview-card[data-detail-level="2"] .preview-frame::after {
    opacity: 0.12;
}

.preview-card[data-detail-level="3"] .preview-frame::after {
    opacity: 0.16;
}

.preview-card[data-detail-level="4"] .preview-frame::after {
    opacity: 0.22;
}

.preview-card[data-rendering="on"] .preview-frame::before {
    opacity: 0.58;
    animation: order-render-scan 1.1s linear infinite;
}

.preview-card[data-rendering="on"] .preview-frame img {
    filter: saturate(0.82) contrast(0.95) blur(1.35px);
    opacity: 0.94;
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 10px 0 12px 0;
}

.price-total {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--accent);
}

.price-meta {
    text-align: right;
    background: rgba(8, 14, 24, 0.65);
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(87, 192, 255, 0.2);
}

.meta-label {
    color: var(--muted);
    font-size: 0.85rem;
}

.meta-value {
    font-weight: 700;
}

.estimate-breakdown {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 6px;
}

.estimate-breakdown li {
    display: flex;
    justify-content: space-between;
    background: rgba(10, 18, 32, 0.65);
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(87, 192, 255, 0.18);
}

.timeline-card {
    background: linear-gradient(160deg, rgba(16, 28, 50, 0.94), rgba(8, 14, 24, 0.82));
    border: 1px solid rgba(87, 192, 255, 0.2);
    border-radius: 16px;
    padding: 14px;
}

.timeline-card h4 {
    margin: 0 0 10px 0;
}

.cart-editor-card .review-lines {
    max-height: 320px;
    overflow: auto;
    padding-right: 4px;
}

.review-lines {
    display: grid;
    gap: 8px;
    margin: 10px 0 2px;
}

.review-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    border: 1px solid rgba(87, 192, 255, 0.2);
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(8, 16, 30, 0.55);
}

.review-line-title {
    font-weight: 700;
    color: #eaf3ff;
}

.review-line-sub {
    color: rgba(176, 200, 230, 0.88);
    font-size: 0.85rem;
}

.review-line-metrics {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    color: rgba(200, 220, 246, 0.9);
    font-size: 0.9rem;
}

.review-line-metrics strong {
    color: #eaf3ff;
}

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

    .review-line {
        grid-template-columns: minmax(0, 1fr);
        align-items: flex-start;
    }
}

.step-list {
    margin: 0;
    padding-left: 18px;
    color: var(--muted);
    display: grid;
    gap: 6px;
}

.update-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 360px;
    overflow-y: auto;
}

.update-entry {
    background: var(--bg-alt);
    border-radius: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
}

.update-meta {
    font-size: 0.9rem;
    color: var(--muted);
    margin-bottom: 4px;
}

.meta-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}

.meta-row:last-child {
    border-bottom: none;
}

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

@media (max-width: 992px) {
    .hero,
    .split-grid {
        grid-template-columns: 1fr;
    }

    .price-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

.barcode-preview {
    background: #ffffff;
    border: 1px dashed rgba(87, 192, 255, 0.45);
    padding: 12px;
    margin: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.label-card .barcode-preview {
    width: 4in;
    max-width: 100%;
    height: 2in;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
}
.label-card .barcode-preview svg {
    width: 100%;
    height: 80px;
}
.label-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.label-lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.2;
}
.label-title {
    font-weight: 700;
}

/* Order studio refinements */
.cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.btn.ghost {
    border: 1px solid rgba(87, 192, 255, 0.22);
    background: rgba(10, 18, 32, 0.6);
    color: var(--ink);
    font-weight: 700;
    padding: 10px 14px;
    border-radius: 12px;
}

.style-stack {
    display: grid;
    gap: 10px;
}

.style-card {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 10px;
    align-items: center;
    background: linear-gradient(160deg, rgba(16, 28, 50, 0.94), rgba(8, 14, 24, 0.82));
    border: 1px solid rgba(87, 192, 255, 0.2);
    border-radius: 14px;
    padding: 10px;
}

.style-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    border: 1px solid rgba(87, 192, 255, 0.2);
    background: linear-gradient(135deg, rgba(87, 192, 255, 0.18), rgba(14, 24, 40, 0.5));
}

.style-shaker {
    background: linear-gradient(180deg, #f8f4ed 0%, #f1e9df 60%, #e9dfd1 100%), linear-gradient(90deg, #d9c7af 25%, transparent 25%), linear-gradient(0deg, #d9c7af 25%, transparent 25%);
    background-size: 100% 100%, 100% 18%, 18% 100%;
}

.style-raised {
    background: radial-gradient(circle at 30% 30%, #f7efe3, #e7d8c3 70%), linear-gradient(135deg, rgba(0,0,0,0.04), rgba(255,255,255,0.5));
}

.style-slab {
    background: linear-gradient(90deg, #e8e3db 0%, #f3eee6 50%, #e8e3db 100%);
}

.style-beaded {
    background: repeating-linear-gradient(90deg, #f2eae0 0 12px, #e8dfd2 12px 18px);
}

.style-name {
    font-weight: 700;
}

.style-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.style-option {
    border: 1px solid rgba(87, 192, 255, 0.22);
    border-radius: 14px;
    padding: 12px;
    cursor: pointer;
    display: grid;
    gap: 8px;
    background: linear-gradient(160deg, rgba(16, 28, 50, 0.94), rgba(8, 14, 24, 0.82));
    box-shadow: 0 16px 34px rgba(5, 12, 24, 0.5);
    transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

.style-option input {
    display: none;
}

.style-option.active,
.style-option:hover {
    border-color: rgba(87, 192, 255, 0.5);
    box-shadow: 0 22px 48px rgba(5, 12, 24, 0.6);
    transform: translateY(-1px);
}

.color-row {
    display: grid;
    gap: 12px;
}

.color-chips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.color-chip {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(87, 192, 255, 0.22);
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(16, 28, 50, 0.94), rgba(8, 14, 24, 0.82));
    padding: 10px;
    cursor: pointer;
    text-align: left;
}

.color-chip .chip-swatch {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(87, 192, 255, 0.22);
    background: var(--swatch, #e0d6c8);
}

.color-chip.active {
    border-color: rgba(87, 192, 255, 0.5);
    box-shadow: 0 22px 48px rgba(5, 12, 24, 0.6);
}

.color-input input {
    margin-top: 6px;
}

.value-strong {
    font-weight: 700;
    margin-bottom: 6px;
}

/* Staff dashboard */
.staff-dashboard {
    --dash-bg: #060c18;
    --dash-panel: #0b1529;
    --dash-card: #0f1b32;
    --dash-card-strong: #122441;
    --dash-border: rgba(96, 146, 235, 0.3);
    --dash-muted: #9bb1d1;
    --dash-text: #e8f0ff;
    --dash-accent: #57c0ff;
    --dash-accent-strong: #2a9bff;
    --dash-accent-soft: rgba(87, 192, 255, 0.18);
    --dash-good: #65e3bd;
    --dash-warning: #ffd38b;
    --dash-danger: #ff8b8b;
    --dash-glow: rgba(79, 178, 255, 0.35);
    font-family: "Manrope", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
    color: var(--dash-text);
}

.staff-dashboard h1,
.staff-dashboard h2 {
    font-family: "Space Grotesk", "Manrope", sans-serif;
    margin: 0;
    letter-spacing: -0.02em;
}

.staff-dashboard .dashboard-shell {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    padding: 32px;
    border: 1px solid var(--dash-border);
    background:
        radial-gradient(1200px 700px at 6% -10%, rgba(87, 192, 255, 0.28), transparent 55%),
        radial-gradient(900px 700px at 100% 0%, rgba(42, 155, 255, 0.3), transparent 55%),
        radial-gradient(700px 500px at 80% 90%, rgba(101, 227, 189, 0.15), transparent 60%),
        linear-gradient(160deg, #070f20 0%, #0a1428 45%, #050a12 100%);
    box-shadow: 0 32px 80px rgba(3, 8, 18, 0.8);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    gap: 26px;
    min-height: 86vh;
}

.staff-dashboard .dashboard-shell::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -220px;
    top: -220px;
    background: radial-gradient(circle, rgba(87, 192, 255, 0.55), transparent 65%);
    opacity: 0.85;
    pointer-events: none;
}

.staff-dashboard .dashboard-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(79, 178, 255, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(79, 178, 255, 0.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(87, 192, 255, 0.06), transparent 60%);
    background-size: 30px 30px, 30px 30px, 100% 100%;
    opacity: 0.22;
    pointer-events: none;
}

.staff-dashboard .dashboard-content,
.staff-dashboard .dashboard-status {
    position: relative;
    z-index: 1;
}

.staff-dashboard .dashboard-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.dashboard-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    border-radius: 22px;
    background: linear-gradient(140deg, rgba(17, 28, 48, 0.92), rgba(9, 16, 28, 0.7));
    border: 1px solid rgba(87, 192, 255, 0.2);
    box-shadow: 0 20px 52px rgba(5, 12, 24, 0.65);
    position: relative;
    overflow: hidden;
    animation: dash-reveal 0.6s ease both;
}

.dashboard-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 0%, rgba(87, 192, 255, 0.25), transparent 55%);
    opacity: 0.9;
    pointer-events: none;
}

.dashboard-hero > * {
    position: relative;
    z-index: 1;
}

.hero-copy {
    max-width: 620px;
}

.dashboard-hero h1 {
    font-size: clamp(2.1rem, 2.1vw + 1.6rem, 3.1rem);
    margin: 6px 0 8px 0;
    text-shadow: 0 12px 30px rgba(5, 12, 24, 0.45);
}

.dashboard-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-weight: 700;
    font-size: 0.72rem;
    color: #7fd0ff;
}

.dashboard-subtitle {
    margin: 8px 0 0 0;
    color: var(--dash-muted);
    max-width: 560px;
    line-height: 1.5;
}

.hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.hero-chip {
    background: rgba(10, 20, 36, 0.8);
    border: 1px solid rgba(87, 192, 255, 0.22);
    color: var(--dash-text);
    padding: 7px 14px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85rem;
    box-shadow: 0 10px 22px rgba(6, 14, 24, 0.35);
    backdrop-filter: blur(8px);
}

.hero-range {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.range-label {
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-weight: 700;
    font-size: 0.68rem;
    color: #7fd0ff;
}

.range-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.range-link {
    text-decoration: none;
    color: var(--dash-text);
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.82rem;
    background: rgba(14, 26, 44, 0.8);
    border: 1px solid rgba(87, 192, 255, 0.12);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.range-link:hover {
    border-color: var(--dash-accent);
    box-shadow: 0 10px 20px rgba(87, 192, 255, 0.2);
    transform: translateY(-1px);
}

.range-link.active {
    border-color: rgba(87, 192, 255, 0.5);
    background: rgba(87, 192, 255, 0.2);
    color: #eaf6ff;
}

.range-custom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 16px;
    background: rgba(14, 26, 44, 0.6);
    border: 1px solid rgba(87, 192, 255, 0.15);
}

.range-custom.active {
    border-color: rgba(87, 192, 255, 0.5);
    box-shadow: 0 12px 22px rgba(87, 192, 255, 0.18);
}

.range-field {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #c3d6ee;
}

.range-input {
    background: rgba(8, 16, 28, 0.85);
    color: #eaf6ff;
    border: 1px solid rgba(87, 192, 255, 0.2);
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 0.8rem;
}

.range-input:focus {
    outline: none;
    border-color: var(--dash-accent);
    box-shadow: 0 0 0 2px rgba(87, 192, 255, 0.2);
}

.range-apply {
    background: linear-gradient(135deg, #4fb2ff, #2a9bff);
    border: none;
    color: #0b1529;
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.78rem;
    cursor: pointer;
}

.range-apply:hover {
    filter: brightness(1.05);
}

.hero-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    align-items: center;
    width: min(420px, 100%);
}

.dash-btn {
    text-decoration: none;
    padding: 11px 16px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 0.95rem;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.dash-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.18), transparent 60%);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.dash-btn.primary {
    background: linear-gradient(135deg, #62ccff, #2a9bff);
    color: #08111d;
    box-shadow: 0 16px 34px rgba(79, 178, 255, 0.4);
}

.dash-btn.ghost {
    background: rgba(12, 20, 32, 0.75);
    border-color: rgba(87, 192, 255, 0.22);
    color: var(--dash-text);
}

.dash-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 36px rgba(10, 20, 32, 0.45);
}

.dash-btn:hover::after {
    opacity: 1;
}

.dashboard-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(10, 18, 32, 0.72);
    border: 1px solid rgba(87, 192, 255, 0.18);
    box-shadow: 0 16px 30px rgba(5, 12, 24, 0.45);
    backdrop-filter: blur(14px);
    animation: dash-reveal 0.6s ease both;
    animation-delay: 0.1s;
}

.menu-link {
    text-decoration: none;
    color: var(--dash-text);
    padding: 9px 14px;
    border-radius: 12px;
    font-weight: 600;
    background: rgba(14, 26, 44, 0.7);
    border: 1px solid rgba(87, 192, 255, 0.08);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.menu-link:hover {
    border-color: var(--dash-accent);
    box-shadow: 0 12px 24px rgba(87, 192, 255, 0.22);
    transform: translateY(-1px);
}

.menu-link.active {
    border-color: rgba(87, 192, 255, 0.5);
    background: rgba(87, 192, 255, 0.2);
    color: #eaf6ff;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.metric-card {
    background: linear-gradient(150deg, rgba(87, 192, 255, 0.12), rgba(11, 19, 34, 0.9)), var(--dash-card);
    border-radius: 18px;
    padding: 18px;
    border: 1px solid rgba(87, 192, 255, 0.2);
    box-shadow: 0 18px 44px rgba(4, 10, 20, 0.55);
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 140px;
    animation: dash-reveal 0.6s ease both;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.metric-card:hover {
    transform: translateY(-2px);
    border-color: rgba(87, 192, 255, 0.45);
    box-shadow: 0 22px 52px rgba(6, 14, 28, 0.6);
}
.metric-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 0% 0%, rgba(87, 192, 255, 0.22), transparent 55%);
    opacity: 0.8;
    pointer-events: none;
}

.dashboard-grid .metric-card:nth-child(2) { animation-delay: 0.05s; }
.dashboard-grid .metric-card:nth-child(3) { animation-delay: 0.1s; }
.dashboard-grid .metric-card:nth-child(4) { animation-delay: 0.15s; }
.dashboard-grid .metric-card:nth-child(5) { animation-delay: 0.2s; }
.dashboard-grid .metric-card:nth-child(6) { animation-delay: 0.25s; }
.dashboard-grid .metric-card:nth-child(7) { animation-delay: 0.3s; }

.metric-label {
    color: var(--dash-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
}

.metric-link {
    color: var(--dash-accent);
    font-weight: 600;
    text-decoration: none;
    margin-top: auto;
}

.metric-link:hover {
    color: var(--dash-accent-strong);
    text-decoration: underline;
}

.metric-value {
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.metric-change {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dash-muted);
}

.metric-change.up {
    color: var(--dash-good);
}

.metric-change.down {
    color: var(--dash-warning);
}

.sparkline {
    width: 100%;
    height: 40px;
}

.sparkline polyline {
    fill: none;
    stroke: var(--dash-accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
}

.card-header h2 {
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}


.dashboard-tables {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.data-card {
    background: linear-gradient(160deg, rgba(14, 24, 42, 0.9), rgba(8, 14, 24, 0.75));
    border-radius: 20px;
    padding: 20px;
    border: 1px solid rgba(87, 192, 255, 0.2);
    box-shadow: 0 20px 48px rgba(5, 12, 24, 0.65);
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: dash-reveal 0.6s ease both;
    animation-delay: 0.15s;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.data-card:hover {
    transform: translateY(-2px);
    border-color: rgba(87, 192, 255, 0.45);
    box-shadow: 0 24px 56px rgba(6, 14, 28, 0.65);
}

.data-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 0% 0%, rgba(87, 192, 255, 0.18), transparent 55%);
    opacity: 0.85;
    pointer-events: none;
}

.dash-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--dash-text);
    font-size: 0.92rem;
    line-height: 1.45;
}

.dash-table th,
.dash-table td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(79, 178, 255, 0.12);
}

.dash-table th {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    color: var(--dash-muted);
    text-align: left;
    background: rgba(11, 20, 36, 0.8);
}

.dash-table tr:hover td {
    background: rgba(15, 26, 42, 0.65);
}

.dash-table tr.selected td {
    background: rgba(24, 44, 78, 0.7);
    box-shadow: inset 0 0 0 1px rgba(87, 192, 255, 0.35);
}

.data-card .table-wrap {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(87, 192, 255, 0.1);
    background: rgba(8, 14, 24, 0.6);
}

.table-link {
    color: var(--dash-accent);
    text-decoration: none;
    font-weight: 600;
}

.table-link:hover {
    color: var(--dash-accent-strong);
    text-decoration: underline;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid rgba(79, 178, 255, 0.25);
    background: rgba(79, 178, 255, 0.12);
    color: var(--dash-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-good {
    border-color: rgba(94, 227, 181, 0.35);
    background: rgba(94, 227, 181, 0.12);
    color: #5ee3b5;
}

.status-warn {
    border-color: rgba(255, 211, 125, 0.35);
    background: rgba(255, 211, 125, 0.12);
    color: #ffd37d;
}

.status-danger {
    border-color: rgba(255, 122, 122, 0.35);
    background: rgba(255, 122, 122, 0.12);
    color: #ff8a7a;
}

.status-info {
    border-color: rgba(79, 178, 255, 0.35);
    background: rgba(79, 178, 255, 0.12);
    color: #4fb2ff;
}

.status-neutral {
    border-color: rgba(159, 177, 201, 0.35);
    background: rgba(159, 177, 201, 0.12);
    color: var(--dash-muted);
}

.empty-cell {
    padding: 18px 12px;
    text-align: center;
    color: var(--dash-muted);
}

.dashboard-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.activity-card,
.system-card {
    background: linear-gradient(160deg, rgba(16, 26, 46, 0.94), rgba(8, 14, 24, 0.78));
    border-radius: 20px;
    padding: 20px;
    border: 1px solid rgba(87, 192, 255, 0.2);
    box-shadow: 0 20px 48px rgba(5, 12, 24, 0.65);
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: dash-reveal 0.6s ease both;
    animation-delay: 0.2s;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.activity-card:hover,
.system-card:hover {
    transform: translateY(-2px);
    border-color: rgba(87, 192, 255, 0.45);
    box-shadow: 0 24px 56px rgba(6, 14, 28, 0.65);
}

.activity-card::before,
.system-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 0%, rgba(87, 192, 255, 0.18), transparent 55%);
    opacity: 0.85;
    pointer-events: none;
}

.activity-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.activity-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(12, 22, 38, 0.85);
    border: 1px solid rgba(87, 192, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(87, 192, 255, 0.06);
}

.activity-title {
    font-weight: 600;
}

.activity-meta {
    color: var(--dash-muted);
    font-size: 0.85rem;
    line-height: 1.35;
}

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

.progress-row {
    display: grid;
    grid-template-columns: 1fr 3fr auto;
    gap: 12px;
    align-items: center;
    color: var(--dash-muted);
    font-size: 0.9rem;
}

.progress-track {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: var(--value);
    background: linear-gradient(90deg, #4fb2ff, #1b8cff);
    border-radius: inherit;
    box-shadow: 0 6px 14px rgba(79, 178, 255, 0.35);
}

.progress-value {
    font-weight: 600;
    color: var(--dash-text);
}

.pulse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    background: rgba(15, 26, 42, 0.8);
    border: 1px solid rgba(79, 178, 255, 0.12);
    border-radius: 14px;
    padding: 12px;
}

.pulse-label {
    color: var(--dash-muted);
    font-size: 0.85rem;
}

.pulse-value {
    font-weight: 700;
    margin-top: 4px;
}

.dashboard-status {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 16px;
    background: linear-gradient(120deg, rgba(10, 18, 32, 0.9), rgba(6, 12, 22, 0.95));
    border: 1px solid rgba(87, 192, 255, 0.22);
    box-shadow: 0 16px 30px rgba(5, 12, 24, 0.5);
    backdrop-filter: blur(10px);
    color: var(--dash-muted);
}

.app-shell.app-home-dashboard .dashboard-toolbar {
    display: grid;
    gap: 16px;
    padding: 20px 22px;
}

.app-shell.app-home-dashboard .dashboard-toolbar-top {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.88fr);
    gap: 14px;
    align-items: start;
}

.app-shell.app-home-dashboard .dashboard-toolbar-copy {
    display: grid;
    gap: 10px;
}

.app-shell.app-home-dashboard .dashboard-toolbar-copy h1 {
    margin: 0;
    font-size: clamp(1.85rem, 3vw, 2.55rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
}

.app-shell.app-home-dashboard .dashboard-toolbar-copy .app-subtitle {
    max-width: 64ch;
    margin: 0;
    color: #596978;
    font-size: 0.98rem;
    line-height: 1.45;
}

.app-shell.app-home-dashboard .dashboard-window-card,
.app-shell.app-home-dashboard .dashboard-filter-block {
    border-radius: 18px;
    border: 1px solid rgba(117, 86, 57, 0.18);
    background: linear-gradient(160deg, rgba(255, 254, 249, 0.92), rgba(246, 237, 223, 0.9));
    box-shadow: 0 14px 28px rgba(89, 63, 37, 0.08);
}

.app-shell.app-home-dashboard .dashboard-window-card {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
}

.app-shell.app-home-dashboard .dashboard-window-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 10px;
}

.app-shell.app-home-dashboard .dashboard-window-item {
    display: grid;
    gap: 4px;
    padding: 10px 11px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(117, 86, 57, 0.12);
}

.app-shell.app-home-dashboard .dashboard-window-item span,
.app-shell.app-home-dashboard .dashboard-filter-label {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.68rem;
    font-weight: 700;
    color: #6d7d89;
}

.app-shell.app-home-dashboard .dashboard-window-item strong {
    font-size: 0.92rem;
    color: #24323d;
    line-height: 1.25;
}

.app-shell.app-home-dashboard .dashboard-filter-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
    gap: 14px;
}

.app-shell.app-home-dashboard .dashboard-filter-block {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
}

.app-shell.app-home-dashboard .dashboard-range-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.app-shell.app-home-dashboard .dashboard-range-pill {
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(117, 86, 57, 0.16);
    background: rgba(255, 255, 255, 0.72);
    color: #334553;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.app-shell.app-home-dashboard .dashboard-range-pill:hover {
    transform: translateY(-1px);
    border-color: rgba(117, 86, 57, 0.34);
    box-shadow: 0 10px 22px rgba(89, 63, 37, 0.08);
}

.app-shell.app-home-dashboard .dashboard-range-pill.is-active {
    background: linear-gradient(135deg, #9f734b, #7a5535);
    border-color: #7a5535;
    color: #fff8f0;
    box-shadow: 0 14px 28px rgba(122, 85, 53, 0.28);
}

.app-shell.app-home-dashboard .dashboard-inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: end;
}

.app-shell.app-home-dashboard .dashboard-custom-range-form label,
.app-shell.app-home-dashboard .dashboard-compare-select {
    display: grid;
    gap: 6px;
    min-width: 144px;
}

.app-shell.app-home-dashboard .dashboard-custom-range-form label span,
.app-shell.app-home-dashboard .dashboard-compare-select span {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.68rem;
    font-weight: 700;
    color: #6d7d89;
}

.app-shell.app-home-dashboard .dashboard-custom-range-form input,
.app-shell.app-home-dashboard .dashboard-compare-select select {
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(117, 86, 57, 0.24);
    background: rgba(255, 255, 255, 0.9);
    color: #24323d;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.app-shell.app-home-dashboard .dashboard-custom-range-form .app-btn,
.app-shell.app-home-dashboard .dashboard-compare-form .app-btn {
    min-height: 44px;
    border-radius: 12px;
}

.app-shell.app-home-dashboard .dashboard-helper-copy {
    margin: 0;
    max-width: 58ch;
    line-height: 1.4;
}

.app-shell.app-home-dashboard .dashboard-custom-range-panel {
    display: grid;
    gap: 10px;
}

.app-shell.app-home-dashboard .dashboard-custom-range-panel > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    list-style: none;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(117, 86, 57, 0.16);
    background: rgba(255, 255, 255, 0.74);
    color: #334553;
    font-weight: 700;
}

.app-shell.app-home-dashboard .dashboard-custom-range-panel > summary::-webkit-details-marker {
    display: none;
}

.app-shell.app-home-dashboard .dashboard-custom-range-panel[open] > summary {
    margin-bottom: 2px;
}

.app-shell.app-home-dashboard .dashboard-report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}

.app-shell.app-home-dashboard .dashboard-report-card {
    display: grid;
    gap: 8px;
    min-height: 132px;
    padding: 16px 18px;
}

.app-shell.app-home-dashboard .dashboard-report-label {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.68rem;
    font-weight: 700;
    color: #6d7d89;
}

.app-shell.app-home-dashboard .dashboard-report-card strong {
    font-size: 2.05rem;
    line-height: 1;
    color: #24323d;
}

.app-shell.app-home-dashboard .dashboard-report-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
    color: #5f6f7d;
    font-size: 0.82rem;
    line-height: 1.35;
}

.app-shell.app-home-dashboard .dashboard-report-meta .dashboard-delta {
    font-weight: 700;
}

.app-shell.app-reports-simple .app-header {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.85fr);
    gap: 18px;
    align-items: start;
}

.app-shell.app-reports-simple .app-header .app-actions {
    display: grid;
    gap: 10px;
    align-content: start;
    justify-items: stretch;
}

.app-shell.app-reports-simple .app-header .app-actions .app-btn {
    width: 100%;
    justify-content: center;
}

.app-shell.app-reports-simple .app-kpis {
    margin-top: 12px;
    gap: 10px;
}

.app-shell.app-reports-simple .app-kpi {
    min-width: 150px;
    flex: 1 1 150px;
    padding: 12px 14px;
}

.app-shell.app-reports-simple .pill-row {
    gap: 8px;
}

.app-shell.app-reports-simple .pill-row.reports-link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    width: 100%;
}

.app-shell.app-reports-simple .pill-row.reports-link-grid .pill {
    justify-content: center;
    text-align: center;
}

.app-shell.app-home-dashboard .dashboard-inventory-strip,
.app-shell.app-home-dashboard .dashboard-live-strip {
    padding: 18px 20px;
}

.app-shell.app-home-dashboard .dashboard-inventory-grid,
.app-shell.app-home-dashboard .dashboard-live-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.app-shell.app-home-dashboard .dashboard-inventory-card,
.app-shell.app-home-dashboard .dashboard-live-card {
    display: grid;
    gap: 6px;
    padding: 14px 15px;
    border-radius: 14px;
    border: 1px solid rgba(117, 86, 57, 0.16);
    background: rgba(255, 255, 255, 0.78);
    color: #24323d;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.app-shell.app-home-dashboard .dashboard-inventory-card span,
.app-shell.app-home-dashboard .dashboard-live-card span {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.68rem;
    font-weight: 700;
    color: #6d7d89;
}

.app-shell.app-home-dashboard .dashboard-inventory-card strong,
.app-shell.app-home-dashboard .dashboard-live-card strong {
    font-size: 1.55rem;
    line-height: 1.1;
    color: #24323d;
}

.app-shell.app-home-dashboard .dashboard-inventory-card p {
    margin: 0;
    color: #5f6f7d;
    font-size: 0.84rem;
    line-height: 1.35;
}

.app-shell.app-home-dashboard .dashboard-insight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.app-shell.app-home-dashboard .dashboard-breakdown-card,
.app-shell.app-home-dashboard .dashboard-recent-card {
    padding: 20px;
}

.app-shell.app-home-dashboard .dashboard-breakdown-list,
.app-shell.app-home-dashboard .dashboard-update-list {
    display: grid;
    gap: 8px;
}

.app-shell.app-home-dashboard .dashboard-breakdown-row,
.app-shell.app-home-dashboard .dashboard-update-item {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(117, 86, 57, 0.14);
    background: rgba(255, 255, 255, 0.72);
}

.app-shell.app-home-dashboard .dashboard-breakdown-empty {
    padding: 12px;
    border-radius: 12px;
    border: 1px dashed rgba(117, 86, 57, 0.18);
    background: rgba(255, 255, 255, 0.72);
    color: #5f6f7d;
}

.app-shell.app-inventory .inventory-secondary-details {
    padding: 14px 16px;
}

.app-shell.app-inventory .inventory-secondary-details > summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(87, 192, 255, 0.18);
    background: rgba(255, 255, 255, 0.8);
    color: #24323d;
    font-weight: 700;
}

.app-shell.app-inventory .inventory-secondary-details > summary::-webkit-details-marker {
    display: none;
}

.app-shell.app-inventory .inventory-secondary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.app-shell.app-inventory .inventory-secondary-card {
    padding: 18px;
}

.app-shell.app-inventory .inventory-secondary-card .card-header {
    margin-bottom: 12px;
}

.app-shell.app-inventory .inventory-secondary-card .table-wrap {
    overflow: auto;
}

.app-shell.app-inventory .inventory-secondary-card .dark-table {
    min-width: 640px;
}

.app-shell.app-inventory .inventory-secondary-card .inventory-alerts {
    display: grid;
    gap: 10px;
}

.app-shell.app-inventory .inventory-daily-activity {
    margin-top: 16px;
}

.status-left,
.status-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--dash-good);
    box-shadow: 0 0 12px rgba(94, 227, 181, 0.5);
}

@keyframes dash-reveal {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (min-width: 1200px) {
    .dashboard-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .dashboard-grid .metric-card {
        grid-column: span 4;
    }

    .dashboard-tables {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .dashboard-tables .data-card {
        grid-column: span 6;
    }
}

@media (max-width: 720px) {
    .staff-dashboard .dashboard-shell {
        padding: 20px;
    }

    .dashboard-hero {
        padding: 18px;
    }

    .hero-actions {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .dashboard-menu {
        gap: 8px;
    }

    .dashboard-status {
        justify-content: flex-start;
    }

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

    .app-shell.app-home-dashboard .dashboard-toolbar-top,
    .app-shell.app-home-dashboard .dashboard-filter-layout {
        grid-template-columns: 1fr;
    }

    .app-shell.app-home-dashboard .dashboard-toolbar,
    .app-shell.app-home-dashboard .dashboard-inventory-strip,
    .app-shell.app-home-dashboard .dashboard-live-strip,
    .app-shell.app-home-dashboard .dashboard-breakdown-card,
    .app-shell.app-home-dashboard .dashboard-recent-card {
        padding: 16px;
    }

    .app-shell.app-home-dashboard .dashboard-custom-range-form label,
    .app-shell.app-home-dashboard .dashboard-compare-select {
        min-width: 100%;
        width: 100%;
    }

    .app-shell.app-home-dashboard .dashboard-custom-range-form .app-btn,
    .app-shell.app-home-dashboard .dashboard-compare-form .app-btn {
        width: 100%;
    }

}

/* App UI */
.app-mode .navbar,
.app-mode .footer {
    display: none;
}

.staff-mode .navbar,
.staff-mode .footer {
    display: none;
}

body.staff-mode {
    background: linear-gradient(120deg, #050a14 0%, #0a1426 55%, #060b18 100%);
    color: #e8f0ff;
}

.staff-mode {
    margin-bottom: 0;
}

.staff-mode .container {
    max-width: 1700px;
    padding-left: 24px;
    padding-right: 24px;
}

.staff-mode main {
    padding-top: 8px;
}

.app-mode {
    margin-bottom: 0;
}

body.app-mode {
    background: linear-gradient(120deg, #050a14 0%, #0a1426 55%, #060b18 100%);
    color: #e8f0ff;
    position: relative;
}

body.app-mode::before {
    content: "";
    position: fixed;
    inset: -20vh -10vw;
    background:
        radial-gradient(1400px 900px at 10% -10%, rgba(87, 192, 255, 0.28), transparent 60%),
        radial-gradient(1200px 800px at 90% 0%, rgba(42, 155, 255, 0.22), transparent 65%),
        linear-gradient(140deg, rgba(8, 16, 28, 0.95), rgba(6, 12, 22, 0.9));
    opacity: 1;
    pointer-events: none;
    z-index: 0;
    animation: aurora-shift 24s ease-in-out infinite;
}

body.app-mode::after {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
        repeating-linear-gradient(60deg, rgba(87, 192, 255, 0.12) 0 1px, transparent 1px 30px),
        repeating-linear-gradient(-60deg, rgba(87, 192, 255, 0.12) 0 1px, transparent 1px 30px),
        repeating-linear-gradient(0deg, rgba(87, 192, 255, 0.08) 0 1px, transparent 1px 52px),
        linear-gradient(120deg, rgba(255, 255, 255, 0.04), transparent 45%);
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    mix-blend-mode: screen;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

body.app-mode > * {
    position: relative;
    z-index: 1;
}

body.app-mode .container::before,
body.app-mode .container::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

body.app-mode .container::before {
    background:
        repeating-linear-gradient(30deg, rgba(101, 227, 189, 0.08) 0 1px, transparent 1px 36px),
        repeating-linear-gradient(-30deg, rgba(101, 227, 189, 0.08) 0 1px, transparent 1px 36px);
    opacity: 0.25;
}

body.app-mode .container::after {
    background:
        radial-gradient(900px 600px at 15% 20%, rgba(87, 192, 255, 0.18), transparent 65%),
        radial-gradient(900px 600px at 85% 80%, rgba(101, 227, 189, 0.16), transparent 70%);
    opacity: 0.6;
}

.app-mode .container {
    max-width: 1920px;
    padding-left: 36px;
    padding-right: 36px;
}

.app-mode main {
    padding-top: 22px;
}

.app-shell {
    --app-bg: #070d1a;
    --app-card: #0f1b32;
    --app-card-alt: #122441;
    --app-ink: #e8f0ff;
    --app-muted: #9bb1d1;
    --app-border: rgba(87, 192, 255, 0.2);
    --app-accent: #57c0ff;
    --app-accent-strong: #2a9bff;
    --app-warm: #ffd38b;
    --app-teal: #65e3bd;
    --dash-text: var(--app-ink);
    --dash-muted: var(--app-muted);
    --dash-accent: var(--app-accent);
    --dash-accent-strong: var(--app-accent-strong);
    font-family: "Manrope", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
    color: var(--app-ink);
    background:
        radial-gradient(900px 600px at 10% -20%, rgba(79, 178, 255, 0.28), transparent 60%),
        radial-gradient(700px 520px at 110% 10%, rgba(101, 227, 189, 0.22), transparent 60%),
        linear-gradient(160deg, #070f20 0%, #0a1428 45%, #050a12 100%);
    border-radius: 30px;
    border: 1px solid var(--app-border);
    padding: 38px;
    display: grid;
    grid-template-columns: 205px minmax(0, 1fr);
    gap: 34px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 72px rgba(3, 8, 18, 0.7);
    backdrop-filter: blur(8px);
    animation: app-rise 0.5s ease both;
    line-height: 1.55;
}

.network-shell {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 12px 6px 32px;
}

.network-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 24px;
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(12, 22, 40, 0.95), rgba(8, 14, 24, 0.85));
    border: 1px solid rgba(87, 192, 255, 0.2);
    box-shadow: 0 18px 40px rgba(4, 10, 20, 0.45);
}

.network-meta {
    min-width: 220px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(8, 14, 24, 0.7);
    border: 1px solid rgba(87, 192, 255, 0.18);
}

.network-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 16px;
    background: rgba(8, 14, 24, 0.65);
    border: 1px solid rgba(87, 192, 255, 0.18);
}

.summary-chip {
    display: grid;
    gap: 4px;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(12, 20, 34, 0.7);
    border: 1px solid rgba(87, 192, 255, 0.2);
    min-width: 110px;
}

.summary-label {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(155, 177, 209, 0.8);
    font-weight: 700;
}

.summary-chip strong {
    font-size: 1.1rem;
}

.network-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.network-card {
    padding: 18px 20px;
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(16, 28, 50, 0.92), rgba(9, 16, 28, 0.85));
    border: 1px solid rgba(87, 192, 255, 0.2);
    box-shadow: 0 16px 32px rgba(4, 10, 20, 0.4);
}

.network-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.network-diagram {
    grid-column: 1 / -1;
    padding: 18px;
}

.topology {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    grid-template-rows: repeat(2, minmax(120px, auto));
    gap: 18px;
    padding: 18px;
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(7, 12, 24, 0.9), rgba(6, 10, 20, 0.85));
    border: 1px solid rgba(87, 192, 255, 0.18);
    overflow: hidden;
}

.topology::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(60deg, rgba(87, 192, 255, 0.12) 0 1px, transparent 1px 30px),
        repeating-linear-gradient(-60deg, rgba(87, 192, 255, 0.12) 0 1px, transparent 1px 30px),
        repeating-linear-gradient(0deg, rgba(87, 192, 255, 0.08) 0 1px, transparent 1px 52px);
    opacity: 0.25;
    pointer-events: none;
}

.topology-node {
    position: relative;
    z-index: 1;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(87, 192, 255, 0.25);
    background: rgba(12, 20, 34, 0.85);
    box-shadow: 0 14px 26px rgba(4, 10, 20, 0.35);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.topology-node.core {
    background: linear-gradient(140deg, rgba(13, 26, 44, 0.92), rgba(10, 18, 30, 0.92));
}

.topology-node.azure {
    background: linear-gradient(140deg, rgba(12, 26, 36, 0.92), rgba(9, 16, 26, 0.92));
    border-color: rgba(101, 227, 189, 0.3);
}

.topology-node.vpn {
    background: linear-gradient(140deg, rgba(20, 26, 40, 0.92), rgba(11, 18, 30, 0.92));
    border-style: dashed;
}

.node-title {
    font-weight: 700;
    letter-spacing: 0.02em;
}

.node-sub {
    color: rgba(193, 210, 235, 0.75);
    font-size: 0.9rem;
}

.node-proof {
    font-size: 0.85rem;
    color: rgba(126, 160, 205, 0.9);
}

.node-light {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 211, 125, 0.4);
    box-shadow: 0 0 12px rgba(255, 211, 125, 0.45);
}

.node-light.ok {
    background: #5ee3b5;
    box-shadow: 0 0 16px rgba(94, 227, 181, 0.7);
}

.node-light.down {
    background: #ff7a7a;
    box-shadow: 0 0 16px rgba(255, 122, 122, 0.7);
}

.node-light.neutral {
    background: rgba(155, 177, 209, 0.6);
    box-shadow: 0 0 12px rgba(155, 177, 209, 0.6);
}

.topology-node.edge {
    background: rgba(10, 16, 28, 0.9);
}

.topology-line {
    position: absolute;
    background: linear-gradient(90deg, rgba(87, 192, 255, 0.25), rgba(101, 227, 189, 0.3));
    height: 2px;
    z-index: 0;
}

.line-1 { top: 74px; left: 13%; width: 18%; }
.line-2 { top: 74px; left: 35%; width: 18%; }
.line-3 { top: 74px; left: 57%; width: 18%; }
.line-4 { top: 158px; left: 57%; width: 18%; }
.line-5 { top: 158px; left: 35%; width: 22%; }

.topology-node[data-node="internet"] { grid-column: 1; grid-row: 1; }
.topology-node[data-node="modem"] { grid-column: 2; grid-row: 1; }
.topology-node[data-node="asr"] { grid-column: 3; grid-row: 1; }
.topology-node[data-node="office-switch"] { grid-column: 4; grid-row: 1; }
.topology-node[data-node="shop-switch"] { grid-column: 5; grid-row: 1; }
.topology-node[data-node="vpn"] { grid-column: 3 / span 2; grid-row: 2; }
.topology-node[data-node="ubuntu"] { grid-column: 5; grid-row: 2; }
.topology-node[data-node="web"] { grid-column: 6; grid-row: 2; }

.network-status-list {
    display: grid;
    gap: 10px;
}

.device-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.device-filters {
    display: grid;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(9, 16, 28, 0.7);
    border: 1px solid rgba(87, 192, 255, 0.16);
}

.device-filter-group {
    display: grid;
    gap: 6px;
}

.device-filter-group input,
.device-filter-group select,
.activity-filters input,
.activity-filters select {
    background: rgba(7, 14, 26, 0.85);
    border: 1px solid rgba(87, 192, 255, 0.22);
    color: var(--ink);
    border-radius: 10px;
    padding: 8px 10px;
}

.noc-alert-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    border-color: rgba(245, 177, 67, 0.4);
    background: rgba(41, 28, 12, 0.75);
    color: #ffd697;
}

.noc-alert-banner strong {
    color: #ffb143;
}

.device-filter-row {
    margin-top: 0;
}

.device-filter-summary {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    font-weight: 600;
}

.device-card {
    text-align: left;
    border: 1px solid rgba(87, 192, 255, 0.2);
    background: rgba(8, 14, 24, 0.7);
    border-radius: 14px;
    padding: 12px 14px;
    color: #e8f0ff;
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
}

.device-card:hover {
    transform: translateY(-2px);
    border-color: rgba(87, 192, 255, 0.35);
    box-shadow: 0 12px 22px rgba(4, 10, 20, 0.4);
}

.device-status {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(155, 177, 209, 0.6);
    box-shadow: 0 0 10px rgba(155, 177, 209, 0.5);
}

.device-status.ok {
    background: #5ee3b5;
    box-shadow: 0 0 12px rgba(94, 227, 181, 0.7);
}

.device-status.down {
    background: #ff7a7a;
    box-shadow: 0 0 12px rgba(255, 122, 122, 0.7);
}

.device-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.device-title {
    font-weight: 700;
}

.device-sub {
    color: rgba(155, 177, 209, 0.8);
    font-size: 0.9rem;
}

.device-meta {
    color: rgba(205, 224, 255, 0.85);
    font-size: 0.85rem;
    margin-top: 6px;
}

.device-health {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    font-size: 0.75rem;
    color: rgba(200, 220, 245, 0.9);
}

.device-health-pill {
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    font-size: 0.68rem;
    background: rgba(80, 180, 120, 0.15);
    border: 1px solid rgba(80, 180, 120, 0.4);
    color: #7cffa3;
}

.device-health-pill.warn {
    background: rgba(245, 177, 67, 0.15);
    border-color: rgba(245, 177, 67, 0.5);
    color: #f5b143;
}

.device-health-pill.stale {
    background: rgba(239, 93, 93, 0.18);
    border-color: rgba(239, 93, 93, 0.5);
    color: #ef5d5d;
}

.device-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid rgba(255, 214, 120, 0.35);
    color: #ffd47a;
    background: rgba(23, 18, 10, 0.7);
}

.device-badge.inferred {
    border-color: rgba(255, 169, 90, 0.45);
    color: #ffb870;
    background: rgba(32, 16, 6, 0.75);
}

.device-drawer {
    position: fixed;
    inset: 0;
    background: rgba(5, 10, 18, 0.65);
    backdrop-filter: blur(8px);
    display: grid;
    place-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 60;
}

.device-drawer.open {
    opacity: 1;
    pointer-events: auto;
}

.device-drawer-card {
    width: min(520px, 90vw);
    border-radius: 18px;
    border: 1px solid rgba(87, 192, 255, 0.3);
    background: linear-gradient(160deg, rgba(12, 22, 40, 0.95), rgba(8, 14, 24, 0.9));
    padding: 18px 20px;
    box-shadow: 0 22px 46px rgba(4, 10, 20, 0.6);
}

.network-health {
    display: grid;
    gap: 12px;
}

.health-row {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(87, 192, 255, 0.2);
    background: rgba(8, 14, 24, 0.65);
}

.health-name {
    font-weight: 700;
    color: #e8f0ff;
}

.health-meta {
    color: rgba(155, 177, 209, 0.85);
    font-size: 0.85rem;
}

.health-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.85rem;
    color: rgba(205, 224, 255, 0.9);
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.drawer-title {
    font-size: 1.2rem;
    font-weight: 700;
}

.drawer-sub {
    color: rgba(155, 177, 209, 0.8);
}

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

.drawer-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(8, 14, 24, 0.7);
    border: 1px solid rgba(87, 192, 255, 0.12);
}

.drawer-actions {
    align-items: center;
}

.drawer-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.network-activity {
    display: grid;
    gap: 10px;
    max-height: 360px;
    overflow: auto;
    padding-right: 4px;
}

.activity-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.activity-filters {
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr) auto minmax(200px, 1.4fr) auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

.activity-filters .meta-label {
    margin: 0;
}

.activity-row {
    display: grid;
    grid-template-columns: 10px 1fr;
    gap: 12px;
    align-items: start;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(8, 14, 24, 0.7);
    border: 1px solid rgba(87, 192, 255, 0.12);
}

.activity-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 4px;
    background: rgba(155, 177, 209, 0.6);
    box-shadow: 0 0 8px rgba(155, 177, 209, 0.4);
}

.activity-dot.info { background: #4fb2ff; box-shadow: 0 0 10px rgba(79, 178, 255, 0.6); }
.activity-dot.warn { background: #ffd37d; box-shadow: 0 0 10px rgba(255, 211, 125, 0.6); }
.activity-dot.error { background: #ff7a7a; box-shadow: 0 0 10px rgba(255, 122, 122, 0.6); }

.activity-line {
    font-size: 0.95rem;
    color: rgba(232, 240, 255, 0.92);
}

.activity-meta {
    font-size: 0.8rem;
    color: rgba(155, 177, 209, 0.75);
    margin-top: 4px;
}

.status-row {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(8, 14, 24, 0.65);
    border: 1px solid rgba(87, 192, 255, 0.12);
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(155, 177, 209, 0.6);
}

.status-dot.ok { background: #5ee3b5; }
.status-dot.down { background: #ff7a7a; }

.status-name {
    font-weight: 600;
}

.status-sub {
    font-size: 0.85rem;
    color: rgba(155, 177, 209, 0.8);
}

.status-proof {
    font-size: 0.9rem;
    color: rgba(205, 224, 255, 0.9);
}

@media (max-width: 1100px) {
    .topology {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
        grid-template-rows: repeat(4, minmax(120px, auto));
    }

    .topology-line {
        display: none;
    }

    .topology-node[data-node="internet"] { grid-column: 1; grid-row: 1; }
    .topology-node[data-node="modem"] { grid-column: 2; grid-row: 1; }
    .topology-node[data-node="asr"] { grid-column: 1; grid-row: 2; }
    .topology-node[data-node="office-switch"] { grid-column: 2; grid-row: 2; }
    .topology-node[data-node="shop-switch"] { grid-column: 1; grid-row: 3; }
    .topology-node[data-node="vpn"] { grid-column: 2; grid-row: 3; }
    .topology-node[data-node="ubuntu"] { grid-column: 1; grid-row: 4; }
    .topology-node[data-node="web"] { grid-column: 2; grid-row: 4; }
}

.network-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 8px;
    color: rgba(232, 240, 255, 0.9);
}

.network-columns {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

@media (max-width: 900px) {
    .network-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .network-summary {
        justify-content: flex-start;
    }

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

.app-shell::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -220px;
    top: -220px;
    background: radial-gradient(circle, rgba(87, 192, 255, 0.45), transparent 65%);
    pointer-events: none;
}

.app-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(87, 192, 255, 0.15) 1px, transparent 1px),
        linear-gradient(120deg, rgba(87, 192, 255, 0.16), transparent 45%),
        linear-gradient(200deg, rgba(255, 255, 255, 0.08), transparent 55%);
    background-size: 22px 22px, 100% 100%, 100% 100%;
    opacity: 0.45;
    pointer-events: none;
}

@keyframes aurora-shift {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(1.5%, -1%, 0) scale(1.04);
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
}


.app-shell h2 {
    font-family: "Space Grotesk", "Manrope", sans-serif;
    margin: 0 0 6px 0;
    line-height: 1.25;
}

.app-shell .muted {
    color: var(--app-muted);
}

.app-rail,
.app-main {
    position: relative;
    z-index: 1;
}

.app-rail {
    background: linear-gradient(180deg, rgba(11, 22, 42, 0.98) 0%, rgba(8, 14, 24, 0.95) 100%);
    color: #eaf2ff;
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    border: 1px solid rgba(87, 192, 255, 0.18);
    box-shadow: 0 20px 42px rgba(4, 10, 20, 0.6);
}

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

.rail-logo {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: url("../images/keiths-kitchens-logo.svg") center / cover no-repeat;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-family: "Space Grotesk", "Manrope", sans-serif;
    letter-spacing: 0.5px;
    color: transparent;
    text-indent: -9999px;
    overflow: hidden;
}

.rail-title {
    font-family: "Space Grotesk", "Manrope", sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
}

.rail-subtitle {
    color: rgba(234, 242, 255, 0.7);
    font-size: 0.8rem;
}

.rail-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rail-link {
    text-decoration: none;
    color: inherit;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(10, 18, 32, 0.7);
    border: 1px solid rgba(87, 192, 255, 0.08);
    font-weight: 600;
    transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}

.rail-link:hover {
    transform: translateX(2px);
    background: rgba(87, 192, 255, 0.18);
    border-color: rgba(87, 192, 255, 0.4);
}

.rail-link.active {
    background: rgba(87, 192, 255, 0.3);
    border-color: rgba(87, 192, 255, 0.55);
}

.rail-footer {
    margin-top: auto;
    padding: 12px;
    border-radius: 14px;
    background: rgba(10, 18, 32, 0.6);
    border: 1px solid rgba(87, 192, 255, 0.12);
    font-size: 0.8rem;
    color: rgba(234, 242, 255, 0.8);
}

.rail-label {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.65rem;
    color: rgba(234, 242, 255, 0.6);
}

.rail-value {
    margin-top: 6px;
    font-weight: 600;
}

.app-main {
    display: flex;
    flex-direction: column;
    gap: 30px;
    min-width: 0;
}

.app-main > * {
    min-width: 0;
}

.app-rail-toggle {
    display: none;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid rgba(117, 86, 57, 0.24);
    border-radius: 999px;
    background: linear-gradient(140deg, rgba(255, 253, 248, 0.98), rgba(246, 238, 227, 0.96));
    color: #21313c;
    font-weight: 800;
    letter-spacing: 0.01em;
    box-shadow: 0 10px 22px rgba(89, 63, 37, 0.12);
}

.app-rail-toggle-icon {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: linear-gradient(135deg, #a4764e, #7c5635);
    color: #fffaf3;
    font-size: 0.95rem;
    line-height: 1;
}

.app-rail-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(16, 22, 31, 0.34);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
    z-index: 89;
}

.app-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.app-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--app-accent);
    margin: 0;
}

.app-header h1 {
    margin: 6px 0 6px 0;
    font-family: "Space Grotesk", "Manrope", sans-serif;
    font-size: 2.2rem;
    line-height: 1.2;
}

.app-subtitle {
    color: var(--app-muted);
    max-width: 640px;
    margin: 0;
    line-height: 1.5;
}

.app-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.context-group {
    margin-top: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(87, 192, 255, 0.18);
    background: rgba(10, 18, 32, 0.62);
}

.context-group-title {
    font-size: 0.78rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(177, 205, 235, 0.86);
    margin-bottom: 10px;
    font-weight: 700;
}

.date-presets {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.date-presets .pill.active {
    background: rgba(87, 192, 255, 0.28);
    border-color: rgba(120, 210, 255, 0.55);
    color: #eaf6ff;
}

.context-links {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.crm-workflow {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.crm-workflow .pill.active {
    background: rgba(87, 192, 255, 0.28);
    border-color: rgba(120, 210, 255, 0.55);
    color: #eaf6ff;
}

.crm-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.crm-row-actions .pill {
    white-space: nowrap;
}

.app-btn {
    text-decoration: none;
    padding: 12px 18px;
    border-radius: 14px;
    font-weight: 700;
    border: 1px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.app-btn.primary {
    background: linear-gradient(135deg, #62ccff, #2a9bff);
    color: #07101f;
    box-shadow: 0 14px 30px rgba(87, 192, 255, 0.35);
}

.app-btn.ghost {
    background: rgba(10, 18, 32, 0.75);
    border-color: rgba(87, 192, 255, 0.2);
    color: var(--app-ink);
}

.app-btn.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.app-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 32px rgba(6, 14, 28, 0.5);
}

.app-btn:focus-visible,
.rail-link:focus-visible,
.app-search button:focus-visible,
.app-search input:focus-visible,
.app-shell .pill:focus-visible,
.app-shell .dark-table a:focus-visible,
.app-shell .form-card input:focus-visible,
.app-shell .app-card input:focus-visible,
.app-shell .form-card select:focus-visible,
.app-shell .app-card select:focus-visible,
.app-shell .form-card textarea:focus-visible,
.app-shell .app-card textarea:focus-visible {
    outline: 3px solid rgba(255, 224, 138, 0.96);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(10, 18, 32, 0.95);
}

.app-shell .muted.tiny {
    color: rgba(196, 214, 238, 0.9);
}

.app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 24px;
}

.app-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.app-card {
    background: linear-gradient(160deg, rgba(16, 28, 50, 0.94), rgba(8, 14, 24, 0.82));
    border: 1px solid var(--app-border);
    border-radius: 20px;
    padding: 26px;
    box-shadow: 0 18px 40px rgba(5, 12, 24, 0.55);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.app-card.card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.app-card.soft {
    background: linear-gradient(160deg, rgba(18, 36, 66, 0.95), rgba(9, 16, 28, 0.85));
}

.app-card:hover {
    transform: translateY(-2px);
    border-color: rgba(87, 192, 255, 0.45);
    box-shadow: 0 24px 50px rgba(5, 12, 24, 0.65);
}

.app-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 16px;
}

.app-kpi {
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(87, 192, 255, 0.14);
    color: var(--app-ink);
    font-weight: 600;
    border: 1px solid rgba(87, 192, 255, 0.2);
    flex: 1 1 180px;
    min-width: 172px;
}

.app-kpi strong {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
}

.app-search {
    display: flex;
    gap: 12px;
    align-items: center;
    background: linear-gradient(160deg, rgba(14, 26, 46, 0.9), rgba(7, 14, 26, 0.7));
    border: 1px solid rgba(87, 192, 255, 0.25);
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 10px 24px rgba(4, 10, 20, 0.35);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease;
    flex: 1 1 320px;
    max-width: 560px;
    width: 100%;
}

.app-search:focus-within {
    border-color: rgba(87, 192, 255, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 0 3px rgba(87, 192, 255, 0.2);
}

.app-search input {
    border: none;
    background: transparent;
    color: var(--app-ink);
    min-width: 0;
    padding: 8px 8px;
    flex: 1 1 auto;
    outline: none;
}

.app-search input::placeholder {
    color: rgba(155, 177, 209, 0.75);
}

.app-search button {
    border: none;
    background: linear-gradient(135deg, #62ccff, #2a9bff);
    color: #07101f;
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 700;
}

.app-select {
    border: 1px solid rgba(87, 192, 255, 0.25);
    background: rgba(9, 16, 30, 0.75);
    color: var(--app-ink);
    border-radius: 12px;
    padding: 10px 12px;
    font-weight: 600;
}

.call-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.app-shell .form-card,
.app-shell .estimate-card,
.app-shell .timeline-card {
    background: linear-gradient(160deg, rgba(16, 28, 50, 0.94), rgba(8, 14, 24, 0.82));
    border: 1px solid var(--app-border);
    box-shadow: 0 18px 40px rgba(5, 12, 24, 0.55);
    border-radius: 18px;
}

.app-shell .form-card {
    padding: 24px;
}

.app-shell .primary {
    background: linear-gradient(135deg, var(--app-accent), var(--app-accent-strong));
    color: #07101f;
    box-shadow: 0 14px 30px rgba(87, 192, 255, 0.35);
}

.app-shell .step-list {
    color: var(--app-muted);
}

.app-shell .eyebrow {
    color: var(--app-accent);
}

.app-shell .form-card input:not([type="checkbox"]):not([type="radio"]),
.app-shell .app-card input:not([type="checkbox"]):not([type="radio"]),
.app-shell .form-card select,
.app-shell .app-card select,
.app-shell .form-card textarea,
.app-shell .app-card textarea {
    background: linear-gradient(180deg, rgba(12, 22, 40, 0.96), rgba(7, 14, 26, 0.85));
    border: 1px solid rgba(87, 192, 255, 0.25);
    color: var(--app-ink);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 8px 18px rgba(4, 10, 20, 0.35);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.12s ease;
    outline: none;
}

.app-shell .form-card input::placeholder,
.app-shell .app-card input::placeholder,
.app-shell .form-card textarea::placeholder,
.app-shell .app-card textarea::placeholder {
    color: rgba(155, 177, 209, 0.75);
}

.app-shell .form-card input:not([type="checkbox"]):not([type="radio"]):focus,
.app-shell .app-card input:not([type="checkbox"]):not([type="radio"]):focus,
.app-shell .form-card select:focus,
.app-shell .app-card select:focus,
.app-shell .form-card textarea:focus,
.app-shell .app-card textarea:focus {
    border-color: rgba(87, 192, 255, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 0 3px rgba(87, 192, 255, 0.2);
    background: linear-gradient(180deg, rgba(16, 30, 56, 0.98), rgba(8, 16, 30, 0.9));
}

.app-shell .order-items input,
.app-shell .order-items textarea {
    background: rgba(14, 26, 46, 0.96);
    border: 1px solid rgba(87, 192, 255, 0.35);
    color: #f4f9ff;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 1.15rem;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0.01em;
    caret-color: #f4f9ff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.app-shell .order-items input::placeholder,
.app-shell .order-items textarea::placeholder {
    color: rgba(190, 210, 240, 0.8);
}

.app-shell .order-items input:focus,
.app-shell .order-items textarea:focus {
    border-color: rgba(120, 210, 255, 0.7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 3px rgba(87, 192, 255, 0.22);
    background: rgba(18, 32, 58, 0.98);
    outline: none;
}

/* Orders page: enforce high-contrast inputs so typed text is always visible. */
.app-shell.app-orders .form-card input:not([type="checkbox"]):not([type="radio"]),
.app-shell.app-orders .app-card input:not([type="checkbox"]):not([type="radio"]),
.app-shell.app-orders .form-card select,
.app-shell.app-orders .app-card select,
.app-shell.app-orders .form-card textarea,
.app-shell.app-orders .app-card textarea {
    background: #f7f9fd;
    border-color: rgba(15, 25, 40, 0.25);
    color: #0c1422;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    padding: 14px 16px;
    min-height: 56px;
    font-size: 1.15rem;
    font-weight: 600;
}

.app-shell.app-orders .form-card input::placeholder,
.app-shell.app-orders .app-card input::placeholder,
.app-shell.app-orders .form-card textarea::placeholder,
.app-shell.app-orders .app-card textarea::placeholder {
    color: rgba(72, 86, 110, 0.8);
}

.app-shell.app-orders .form-card input:not([type="checkbox"]):not([type="radio"]):focus,
.app-shell.app-orders .app-card input:not([type="checkbox"]):not([type="radio"]):focus,
.app-shell.app-orders .form-card select:focus,
.app-shell.app-orders .app-card select:focus,
.app-shell.app-orders .form-card textarea:focus,
.app-shell.app-orders .app-card textarea:focus {
    border-color: rgba(42, 155, 255, 0.7);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(42, 155, 255, 0.18);
}

.app-shell.app-orders .order-items input,
.app-shell.app-orders .order-items textarea {
    background: #f7f9fd;
    border-color: rgba(15, 25, 40, 0.22);
    color: #0c1422;
    caret-color: #0c1422;
    text-shadow: none;
    padding: 14px 16px;
    min-height: 60px;
    font-size: 1.2rem;
    font-weight: 700;
}

.app-shell.app-orders .order-items input.qty-input,
.app-shell.app-orders .order-items input.cost-input {
    letter-spacing: 0;
    font-size: 1.24rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.app-shell.app-orders .order-items input.qty-input {
    min-width: 9ch;
}

.app-shell.app-orders .order-items input.cost-input {
    min-width: 11ch;
}

.app-shell.app-orders .order-items input::placeholder,
.app-shell.app-orders .order-items textarea::placeholder {
    color: rgba(72, 86, 110, 0.7);
}

.app-shell.app-orders .order-items input:focus,
.app-shell.app-orders .order-items textarea:focus {
    background: #ffffff;
    border-color: rgba(42, 155, 255, 0.7);
    box-shadow: 0 0 0 3px rgba(42, 155, 255, 0.18);
}

.order-complete {
    position: relative;
    border-radius: 20px;
    padding: 26px 28px;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.95), rgba(20, 40, 74, 0.95));
    color: #f1f7ff;
    border: 1px solid rgba(87, 192, 255, 0.35);
    box-shadow: 0 18px 30px rgba(7, 16, 32, 0.25);
    overflow: hidden;
    animation: order-pop 0.6s ease both;
}

.order-complete-glow {
    position: absolute;
    inset: -40% -10% auto -10%;
    height: 200%;
    background: radial-gradient(circle at top left, rgba(87, 192, 255, 0.35), transparent 60%);
    pointer-events: none;
}

.order-complete::after {
    content: "";
    position: absolute;
    inset: -40% -120%;
    background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, 0.22) 50%, transparent 60%);
    opacity: 0.6;
    animation: order-shimmer 2.4s ease 1;
    pointer-events: none;
}

.order-complete-body {
    display: flex;
    align-items: center;
    gap: 18px;
    position: relative;
    z-index: 1;
}

.order-complete-mark {
    width: 58px;
    height: 58px;
    border-radius: 999px;
    background: linear-gradient(135deg, #47d1ff, #79ffba);
    position: relative;
    flex: 0 0 auto;
    box-shadow: 0 10px 18px rgba(71, 209, 255, 0.25);
    animation: order-mark-pop 0.5s ease both;
}

.order-complete-mark::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 10px;
    border-left: 4px solid #0b1220;
    border-bottom: 4px solid #0b1220;
    left: 18px;
    top: 23px;
    transform: rotate(-45deg);
}

.order-complete-title {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.75rem;
    color: rgba(200, 230, 255, 0.9);
    margin: 0 0 4px;
}

.order-complete-id {
    margin: 0;
    font-size: 1.6rem;
    letter-spacing: 0.01em;
}

.order-complete-sub {
    margin: 6px 0 0;
    color: rgba(225, 240, 255, 0.8);
}

.order-complete-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.order-complete-stats span {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(190, 220, 255, 0.8);
}

.order-complete-stats strong {
    display: block;
    font-size: 1.05rem;
}

.order-complete-actions {
    display: flex;
    gap: 12px;
    margin-top: 18px;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}

@keyframes order-pop {
    0% { transform: translateY(8px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes order-mark-pop {
    0% { transform: scale(0.85); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes order-shimmer {
    0% { transform: translateX(-30%); opacity: 0; }
    40% { opacity: 0.65; }
    100% { transform: translateX(40%); opacity: 0; }
}

@keyframes order-render-scan {
    0% { transform: translateX(-22%); }
    100% { transform: translateX(22%); }
}

.app-shell .form-card input:not([type="checkbox"]):not([type="radio"]):disabled,
.app-shell .app-card input:not([type="checkbox"]):not([type="radio"]):disabled,
.app-shell .form-card select:disabled,
.app-shell .app-card select:disabled,
.app-shell .form-card textarea:disabled,
.app-shell .app-card textarea:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.app-shell .form-card select,
.app-shell .app-card select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(155, 177, 209, 0.8) 50%),
        linear-gradient(135deg, rgba(155, 177, 209, 0.8) 50%, transparent 50%);
    background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 38px;
}

.app-shell .form-card label:not(.pill),
.app-shell .app-card label:not(.pill) {
    color: var(--app-ink);
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    display: block;
    margin-bottom: 4px;
}

.app-shell .toggle-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--app-ink);
}

.app-shell .toggle-row input {
    margin: 0;
}

.app-shell .card-header h3 {
    font-family: "Space Grotesk", "Manrope", sans-serif;
}

.app-shell .pill {
    background: rgba(87, 192, 255, 0.14);
    border: 1px solid rgba(87, 192, 255, 0.22);
    color: var(--app-ink);
}

.app-shell .pill.soft {
    background: rgba(101, 227, 189, 0.12);
    border-color: rgba(101, 227, 189, 0.3);
}

.app-shell .alert {
    border-radius: 16px;
}

.app-shell .dark-table {
    background: transparent;
    color: var(--app-ink);
    width: 100%;
    border-collapse: collapse;
}

.app-shell .dark-table th {
    background: rgba(8, 16, 28, 0.9);
    color: var(--app-muted);
    border-bottom: 1px solid rgba(87, 192, 255, 0.2);
    padding: 14px 16px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    position: sticky;
    top: 0;
    z-index: 2;
}

.app-shell .dark-table td {
    border-bottom: 1px solid rgba(87, 192, 255, 0.12);
    padding: 14px 16px;
    font-size: 0.95rem;
}

.app-shell .dark-table a {
    color: var(--app-accent);
    font-weight: 600;
    text-decoration: none;
}

.app-shell .dark-table a:hover {
    color: var(--app-accent-strong);
    text-decoration: underline;
}

.app-shell .dark-table tr:hover td {
    background: rgba(14, 26, 44, 0.6);
}

.app-shell .dark-table tbody tr:nth-child(even) td {
    background: rgba(10, 18, 32, 0.6);
}

.app-shell .dark-table tbody tr:nth-child(even):hover td {
    background: rgba(14, 26, 44, 0.7);
}

.app-shell .dark-table tr[data-row-link] {
    cursor: pointer;
}

.app-shell .dark-table tr[data-row-link]:focus-visible td {
    outline: 2px solid rgba(255, 224, 138, 0.95);
    outline-offset: -2px;
    background: rgba(24, 38, 59, 0.92);
}

.app-shell .dense-history-list {
    display: grid;
    gap: 0.85rem;
}

.app-shell .dense-history-item {
    display: grid;
    gap: 0.8rem;
    padding: 1rem 1.05rem;
    border-radius: 18px;
    border: 1px solid rgba(87, 192, 255, 0.16);
    background: linear-gradient(180deg, rgba(12, 22, 38, 0.94), rgba(8, 16, 28, 0.84));
    box-shadow: 0 14px 24px rgba(4, 10, 20, 0.22);
    min-width: 0;
}

.app-shell .dense-history-head {
    display: grid;
    grid-template-columns: minmax(140px, auto) minmax(0, 1fr);
    gap: 0.8rem 1rem;
    align-items: start;
}

.app-shell .dense-history-stamp,
.app-shell .dense-history-summary {
    display: grid;
    gap: 0.22rem;
    min-width: 0;
}

.app-shell .dense-history-label {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--app-muted);
}

.app-shell .dense-history-when,
.app-shell .dense-history-title {
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 700;
    color: var(--app-ink);
    overflow-wrap: anywhere;
}

.app-shell .dense-history-sub {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--app-muted);
    overflow-wrap: anywhere;
}

.app-shell .dense-history-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: flex-start;
}

.app-shell .dense-history-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.65rem;
}

.app-shell .dense-history-fact {
    display: grid;
    gap: 0.18rem;
    padding: 0.72rem 0.8rem;
    border-radius: 14px;
    border: 1px solid rgba(87, 192, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    min-width: 0;
}

.app-shell .dense-history-fact span {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--app-muted);
}

.app-shell .dense-history-fact strong {
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--app-ink);
    overflow-wrap: anywhere;
}

.app-shell .dense-history-note {
    margin: 0;
    padding: 0.82rem 0.9rem;
    border-radius: 14px;
    border: 1px solid rgba(87, 192, 255, 0.1);
    background: rgba(255, 255, 255, 0.035);
    color: var(--app-ink);
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

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

    .app-shell .dense-history-facts {
        grid-template-columns: 1fr;
    }
}

.app-shell .dense-history-note.is-empty {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--app-muted);
}

@media (max-width: 820px) {
    .app-shell .dense-history-head,
    .app-shell .dense-history-facts {
        grid-template-columns: 1fr;
    }
}

.mobile-card-wrap {
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

@media (max-width: 820px) {
    .mobile-card-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
        padding: 0;
    }

    .mobile-card-wrap .responsive-card-table {
        min-width: 0;
        table-layout: auto;
    }

    .mobile-card-wrap .responsive-card-table thead {
        display: none;
    }

    .mobile-card-wrap .responsive-card-table,
    .mobile-card-wrap .responsive-card-table tbody {
        display: block;
        width: 100%;
    }

    .mobile-card-wrap .responsive-card-table tbody {
        display: grid;
        gap: 12px;
    }

    .mobile-card-wrap .responsive-card-table tr {
        display: block;
        padding: 14px;
        border-radius: 16px;
        border: 1px solid rgba(87, 192, 255, 0.16);
        background: rgba(9, 17, 30, 0.8);
    }

    .mobile-card-wrap .responsive-card-table td {
        display: grid;
        grid-template-columns: minmax(96px, 1fr) minmax(0, 2fr);
        gap: 10px;
        align-items: flex-start;
        width: 100%;
        padding: 0;
        margin: 0 0 10px;
        border: 0;
        background: transparent !important;
    }

    .mobile-card-wrap .responsive-card-table td:last-child {
        margin-bottom: 0;
    }

    .mobile-card-wrap .responsive-card-table td::before {
        content: attr(data-label);
        font-size: 0.68rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-weight: 700;
        color: rgba(185, 207, 236, 0.86);
    }

    .mobile-card-wrap .responsive-card-table td.empty-cell {
        display: block;
        margin: 0;
    }

    .mobile-card-wrap .responsive-card-table td.empty-cell::before {
        content: none;
    }

    .mobile-card-wrap .responsive-card-table tbody tr:nth-child(even) td,
    .mobile-card-wrap .responsive-card-table tbody tr:hover td {
        background: transparent !important;
    }

    .mobile-card-wrap .responsive-card-table .crm-row-actions,
    .mobile-card-wrap .responsive-card-table .inv-action-list {
        justify-content: flex-start;
    }

    .mobile-card-wrap .responsive-card-table td.inv-actions {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .mobile-card-wrap .responsive-card-table td.inv-actions::before {
        margin-bottom: 2px;
    }

    .mobile-card-wrap .responsive-card-table .inv-action-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }

    .mobile-card-wrap .responsive-card-table .inv-action-list .pill {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        white-space: normal;
    }

    .mobile-card-wrap .responsive-card-table .inv-subline {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 4px;
    }

    .mobile-card-wrap .responsive-card-table .inv-dot {
        display: none;
    }

    .mobile-card-wrap .responsive-card-table .inv-date-row {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px;
    }

    .mobile-card-wrap .responsive-card-table [data-col="dates"],
    .mobile-card-wrap .responsive-card-table [data-col="where"] {
        display: block !important;
    }

    .app-customers .app-search,
    .app-jobs .app-search,
    .app-inventory .app-search {
        flex-wrap: wrap;
        max-width: none;
    }

    .app-customers .app-search button,
    .app-jobs .app-search button,
    .app-inventory .app-search button {
        width: 100%;
    }

    .app-customers .pager,
    .app-jobs .pager,
    .app-inventory .pager {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 10px;
    }
}

.customer-job-metrics-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.customer-job-metric {
    border: 1px solid rgba(87, 192, 255, 0.22);
    border-radius: 14px;
    background: rgba(10, 18, 32, 0.75);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.customer-job-metric span {
    color: var(--app-muted);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 700;
}

.customer-job-metric strong {
    font-size: 1.05rem;
}

.customer-order-status-summary {
    margin-bottom: 12px;
    display: grid;
    gap: 8px;
}

.status-chip-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.status-chip-stack .pill {
    margin-top: 0;
}

.status-chip-stack .pill strong {
    margin-left: 4px;
}

.customer-jobs-table {
    min-width: 1420px;
    table-layout: auto;
}

.customer-jobs-table th:nth-child(1),
.customer-jobs-table td:nth-child(1) {
    min-width: 170px;
}

.customer-jobs-table th:nth-child(4),
.customer-jobs-table td:nth-child(4) {
    min-width: 120px;
}

.customer-jobs-table th:nth-child(5),
.customer-jobs-table td:nth-child(5),
.customer-jobs-table th:nth-child(6),
.customer-jobs-table td:nth-child(6),
.customer-jobs-table th:nth-child(7),
.customer-jobs-table td:nth-child(7),
.customer-jobs-table th:nth-child(8),
.customer-jobs-table td:nth-child(8),
.customer-jobs-table th:nth-child(9),
.customer-jobs-table td:nth-child(9) {
    min-width: 100px;
}

.customer-order-status-cell {
    min-width: 360px;
}

.customer-jobs-table th:nth-child(11),
.customer-jobs-table td:nth-child(11) {
    min-width: 76px;
}

.app-shell .app-details {
    border-radius: 16px;
    border: 1px solid rgba(87, 192, 255, 0.18);
    background: rgba(9, 16, 30, 0.6);
    padding: 14px 16px;
}

.app-shell .app-details summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--app-ink);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.app-shell .app-details summary::marker {
    display: none;
}

.app-shell .app-details summary::after {
    content: "▾";
    color: var(--app-muted);
    font-size: 0.9rem;
    transition: transform 0.2s ease;
}

.app-shell .app-details[open] summary::after {
    transform: rotate(180deg);
}

.app-shell .app-details + .app-details {
    margin-top: 10px;
}

.app-shell .update-entry {
    background: rgba(10, 18, 32, 0.75);
    border: 1px solid rgba(87, 192, 255, 0.18);
}

.app-shell .update-attachment a {
    color: var(--app-accent);
    font-weight: 600;
    text-decoration: none;
}

.app-shell .update-attachment a:hover {
    color: var(--app-accent-strong);
    text-decoration: underline;
}

.app-shell .update-meta {
    color: var(--app-muted);
}

.app-shell .reception-update-stack {
    display: grid;
    gap: 10px;
}

.app-shell .reception-update-block {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(87, 192, 255, 0.12);
}

.app-shell .reception-update-label,
.app-shell .reception-update-fact-label {
    color: var(--app-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.app-shell .reception-update-text {
    color: var(--app-text);
    line-height: 1.6;
    white-space: pre-line;
}

.app-shell .reception-update-facts {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.app-shell .reception-update-fact {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(87, 192, 255, 0.1);
    min-width: 0;
}

.app-shell .meta-row {
    border-bottom: 1px solid rgba(87, 192, 255, 0.12);
}

.app-shell .meta-label {
    color: var(--app-muted);
}

.app-shell .badge {
    background: rgba(87, 192, 255, 0.18);
    border-color: rgba(87, 192, 255, 0.3);
    color: var(--app-accent);
}

.app-shell .badge.soft {
    background: rgba(101, 227, 189, 0.12);
    border-color: rgba(101, 227, 189, 0.22);
    color: var(--app-teal);
}

.app-shell .drive-picker {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(8, 14, 24, 0.7);
    border: 1px solid rgba(87, 192, 255, 0.15);
}

.app-shell .drive-search {
    width: 100%;
    background: rgba(7, 14, 26, 0.9);
    border: 1px solid rgba(87, 192, 255, 0.2);
    color: var(--app-ink);
    padding: 8px 10px;
    border-radius: 12px;
}

.app-shell .drive-results {
    display: grid;
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 4px;
}

.app-shell .drive-item {
    border: 1px solid rgba(87, 192, 255, 0.16);
    background: rgba(10, 18, 32, 0.85);
    color: var(--app-ink);
    padding: 10px 12px;
    border-radius: 12px;
    text-align: left;
    display: grid;
    gap: 4px;
    cursor: pointer;
}

.app-shell .drive-item:hover {
    border-color: rgba(87, 192, 255, 0.4);
    box-shadow: 0 10px 24px rgba(5, 12, 24, 0.45);
}

.app-shell .preview-frame {
    background: rgba(10, 18, 32, 0.75);
}

.app-shell .ai-dot {
    background: var(--app-warm);
    box-shadow: 0 0 8px rgba(255, 185, 96, 0.4);
}

.app-shell .preview-card[data-ai="on"] .ai-dot {
    background: var(--app-teal);
    box-shadow: 0 0 10px rgba(36, 183, 157, 0.4);
}

.app-shell .preview-card[data-ai="on"] .ai-status {
    color: var(--app-accent-strong);
}

.app-quick-update .quick-update-form {
    position: relative;
}

.app-quick-update .quick-update-templates {
    background: rgba(9, 16, 28, 0.6);
    border: 1px dashed rgba(87, 192, 255, 0.3);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.app-quick-update .quick-update-templates .pill {
    cursor: pointer;
}

.app-quick-update .quick-update-preview {
    position: sticky;
    top: 24px;
}

.app-quick-update .preview-message {
    margin-top: 12px;
    background: rgba(7, 14, 26, 0.7);
    border: 1px dashed rgba(87, 192, 255, 0.35);
    border-radius: 12px;
    padding: 12px;
    min-height: 140px;
    white-space: pre-wrap;
}

.app-quick-update .preview-message.empty {
    color: var(--app-muted);
}

.app-quick-update .preview-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
}

/* AI reports */
.app-reports .report-console {
    display: grid;
    gap: 12px;
}

.app-reports .report-status {
    color: var(--app-muted);
    font-size: 0.9rem;
    min-height: 22px;
}

.app-reports .report-status.busy {
    color: #b8dcff;
}

.app-reports .report-status.error {
    color: #ffb3b3;
}

.app-reports .report-status-detail {
    margin-top: -2px;
    color: rgba(196, 214, 238, 0.9);
    font-size: 0.78rem;
    line-height: 1.35;
}

.app-reports .report-log {
    min-height: 260px;
    max-height: 360px;
    overflow-y: auto;
    background: rgba(7, 14, 26, 0.78);
    border: 1px solid rgba(87, 192, 255, 0.2);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.app-reports .report-msg {
    padding: 10px 12px;
    border-radius: 12px;
    line-height: 1.45;
    white-space: pre-wrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.app-reports .report-msg.user {
    align-self: flex-end;
    background: rgba(101, 227, 189, 0.16);
    border: 1px solid rgba(101, 227, 189, 0.35);
}

.app-reports .report-msg.assistant {
    align-self: flex-start;
    background: rgba(87, 192, 255, 0.16);
    border: 1px solid rgba(87, 192, 255, 0.35);
}

.app-reports .report-msg.assistant.streaming::after {
    content: " ...";
    opacity: 0.8;
}

.app-reports .report-msg.system {
    align-self: stretch;
    background: rgba(10, 18, 32, 0.7);
    border: 1px dashed rgba(87, 192, 255, 0.3);
    color: var(--app-muted);
    font-size: 0.9rem;
}

.app-reports .report-msg.warn {
    border-color: rgba(255, 208, 120, 0.45);
    background: rgba(90, 58, 13, 0.32);
    color: #ffdca4;
}

.app-reports .report-msg.error {
    border-color: rgba(255, 130, 130, 0.55);
    background: rgba(95, 30, 38, 0.42);
    color: #ffb2ba;
}

.app-reports .report-controls {
    margin-top: 6px;
}

.app-reports .report-input textarea {
    min-height: 130px;
}

.app-reports .report-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
}

.app-reports .report-actions .app-btn {
    min-width: 120px;
    text-align: center;
}

.app-reports .report-quick .report-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.app-reports .report-list-item {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(10, 18, 32, 0.7);
    border: 1px solid rgba(87, 192, 255, 0.2);
}

.app-reports .report-summary {
    margin-bottom: 12px;
}

.app-reports .report-table-wrap {
    max-height: 420px;
    overflow-y: auto;
}

.app-reports .report-table {
    table-layout: fixed;
}

.app-reports .report-table th,
.app-reports .report-table td {
    vertical-align: top;
    word-break: break-word;
    white-space: normal;
}

.app-reports .report-empty {
    color: var(--app-muted);
    background: rgba(10, 18, 32, 0.6);
    border: 1px dashed rgba(87, 192, 255, 0.25);
    border-radius: 14px;
    padding: 18px;
    text-align: center;
}

.app-reports .report-json {
    background: rgba(7, 14, 26, 0.8);
    border: 1px solid rgba(87, 192, 255, 0.2);
    border-radius: 12px;
    padding: 12px;
    color: var(--app-ink);
    font-family: "Consolas", "Menlo", "Courier New", monospace;
    font-size: 0.85rem;
    white-space: pre-wrap;
    word-break: break-word;
    min-height: 120px;
}

.app-reveal {
    animation: app-rise 0.6s ease both;
    animation-delay: var(--delay, 0s);
}

@keyframes app-rise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

@media (prefers-contrast: more) {
    .app-shell {
        --app-muted: #dce8ff;
        --app-border: rgba(214, 230, 255, 0.55);
    }

    .app-shell .pill {
        border-color: rgba(216, 232, 255, 0.6);
        background: rgba(12, 24, 44, 0.95);
    }

    .app-shell .dark-table th {
        color: #eaf5ff;
        background: #0a1628;
    }

    .app-shell .dark-table td {
        border-bottom-color: rgba(205, 224, 248, 0.32);
    }

    .app-shell .status-pill {
        filter: saturate(1.1) contrast(1.15);
    }
}

@media (max-width: 1100px) {
    .app-mode .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    body.kk-brand.app-mode .kk-app-header-inner {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "brand utility"
            "search search"
            "links links";
    }

    .app-shell {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 28px;
        border-radius: 24px;
    }

    .app-quick-update .quick-update-preview {
        position: static;
    }

    .app-rail {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .rail-nav {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (max-width: 920px) {
    .app-header {
        flex-direction: column;
    }

    .app-actions {
        width: 100%;
    }

    .app-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .order-summary-bar {
        position: static;
        grid-template-columns: 1fr;
    }

    .order-summary-bar .summary-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .app-mode .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .app-shell {
        padding: 18px;
        gap: 16px;
        border-radius: 18px;
    }

    .app-search {
        width: 100%;
    }

    .app-search input {
        min-width: 0;
        flex: 1;
    }
}

body.device-phone.app-mode {
    --mobile-dock-height: 72px;
}

body.device-phone.app-mode .kk-app-header {
    position: sticky;
    top: 0;
    z-index: 40;
    backdrop-filter: blur(18px);
}

body.device-phone.app-mode .kk-mobile-appbar {
    display: block;
    padding: 10px 0 4px;
}

body.device-phone.app-mode .kk-mobile-appbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

body.device-phone.app-mode .kk-mobile-appbar-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

body.device-phone.app-mode .kk-mobile-appbar-kicker {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(104, 77, 51, 0.78);
}

body.device-phone.app-mode .kk-mobile-appbar-title {
    display: block;
    min-width: 0;
    color: #1f2d34;
    font-size: 1rem;
    line-height: 1.15;
}

body.device-phone.app-mode .kk-mobile-appbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.device-phone.app-mode .kk-mobile-appbar-action {
    min-height: 40px;
    padding: 9px 12px;
    border-radius: 14px;
    border: 1px solid rgba(117, 86, 57, 0.16);
    background: linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(243, 233, 215, 0.94));
    color: #22313b;
    font-weight: 800;
    text-decoration: none;
}

body.device-phone.app-mode .header-inbox-mobile {
    gap: 8px;
}

body.device-phone.app-mode .kk-app-header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "brand utility"
        "search search";
    gap: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
}

body.device-phone.app-mode .kk-app-brand-column {
    min-width: 0;
}

body.device-phone.app-mode .kk-app-brand-lockup {
    width: 100%;
    min-height: 52px;
    border-radius: 18px;
    padding: 12px 14px;
    justify-content: flex-start;
}

body.device-phone.app-mode .kk-app-brand-logo {
    max-height: 30px;
}

body.device-phone.app-mode .kk-app-utility-row {
    width: auto;
}

body.device-phone.app-mode .kk-app-utility-row .app-request-cta {
    min-height: 52px;
    padding-inline: 14px;
    border-radius: 16px;
    font-size: 0.9rem;
}

body.device-phone.app-mode .kk-app-links-shell {
    display: none;
}

body.device-phone.app-mode .kk-app-command-layer {
    display: block;
}

body.device-phone.app-mode .app-mode main,
body.device-phone.app-mode main {
    padding-bottom: calc(var(--mobile-dock-height) + env(safe-area-inset-bottom, 0px) + 22px);
}

body.device-phone.app-mode .app-shell {
    padding: 16px;
    gap: 18px;
    border-radius: 22px;
    box-shadow: 0 18px 44px rgba(3, 8, 18, 0.34);
    overflow: visible;
}

body.device-phone.app-mode .app-shell::before,
body.device-phone.app-mode .app-shell::after {
    opacity: 0.28;
}

body.device-phone.app-mode .app-shell.has-mobile-rail .app-rail {
    display: flex;
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 84px);
    left: max(12px, env(safe-area-inset-left, 0px));
    width: min(84vw, 320px);
    max-height: calc(100vh - var(--mobile-dock-height) - env(safe-area-inset-bottom, 0px) - 110px);
    padding: 16px 14px;
    overflow: auto;
    z-index: 91;
    transform: translateX(calc(-100% - 18px));
    opacity: 0;
    pointer-events: none;
    transition: transform 0.24s ease, opacity 0.2s ease;
}

body.device-phone.app-mode .app-shell.has-mobile-rail.is-rail-open .app-rail {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

body.device-phone.app-mode .app-main {
    gap: 20px;
    width: 100%;
    overflow-x: clip;
}

body.device-phone.app-mode .app-header {
    gap: 16px;
}

body.device-phone.app-mode .app-header h1 {
    font-size: clamp(1.52rem, 7vw, 1.88rem);
}

body.device-phone.app-mode .app-subtitle {
    max-width: none;
    font-size: 0.96rem;
}

body.device-phone.app-mode .app-actions,
body.device-phone.app-mode .pill-row,
body.device-phone.app-mode .context-links,
body.device-phone.app-mode .crm-workflow,
body.device-phone.app-mode .date-presets {
    width: 100%;
}

body.device-phone.app-mode .app-actions .app-btn,
body.device-phone.app-mode .app-actions .pill,
body.device-phone.app-mode .pill-row .pill,
body.device-phone.app-mode .context-links .pill,
body.device-phone.app-mode .crm-workflow .pill,
body.device-phone.app-mode .date-presets .pill {
    min-height: 48px;
    width: 100%;
    justify-content: center;
}

body.device-phone.app-mode .form-grid,
body.device-phone.app-mode .app-grid {
    grid-template-columns: 1fr;
}

body.device-phone.app-mode .app-card,
body.device-phone.app-mode .form-card,
body.device-phone.app-mode .panel,
body.device-phone.app-mode .app-kpi {
    padding: 18px;
    border-radius: 18px;
    min-width: 0;
}

body.device-phone.app-mode .app-rail-toggle {
    display: none !important;
}

body.device-phone.app-mode.app-rail-open {
    overflow: hidden;
}

body.device-phone.app-mode.app-rail-open .app-rail-backdrop {
    opacity: 1;
    pointer-events: auto;
}

body.device-phone.app-mode .command-sheet {
    position: fixed;
    inset: 0;
    z-index: 1200;
    pointer-events: none;
}

body.device-phone.app-mode .command-sheet-backdrop {
    display: block;
    position: absolute;
    inset: 0;
    border: none;
    background: rgba(5, 10, 18, 0.62);
    opacity: 0;
    transition: opacity 0.2s ease;
}

body.device-phone.app-mode .command-sheet-panel {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: calc(var(--mobile-dock-height) + env(safe-area-inset-bottom, 0px) + 10px);
    max-height: calc(100vh - 120px);
    overflow: hidden;
    padding: 14px;
    border-radius: 24px;
    border: 1px solid rgba(87, 192, 255, 0.22);
    background: linear-gradient(180deg, rgba(8, 14, 26, 0.98), rgba(6, 11, 19, 0.98));
    box-shadow: 0 28px 60px rgba(3, 8, 16, 0.62);
    transform: translateY(22px);
    opacity: 0;
    transition: transform 0.22s ease, opacity 0.22s ease;
}

body.device-phone.app-mode .command-sheet-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

body.device-phone.app-mode .command-wrap {
    width: 100%;
}

body.device-phone.app-mode .command-input-shell {
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 12px 12px 12px 14px;
    border-radius: 18px;
}

body.device-phone.app-mode .command-icon {
    display: none;
}

body.device-phone.app-mode #app-command-input {
    font-size: 1rem;
    min-height: 28px;
}

body.device-phone.app-mode .command-results {
    position: static;
    margin-top: 10px;
    max-height: min(52vh, 420px);
    overflow: auto;
}

body.device-phone.app-mode .command-empty {
    margin-top: 10px;
}

body.device-phone.app-mode.command-sheet-open .command-sheet {
    pointer-events: auto;
}

body.device-phone.app-mode.command-sheet-open .command-sheet-backdrop {
    opacity: 1;
}

body.device-phone.app-mode.command-sheet-open .command-sheet-panel {
    transform: translateY(0);
    opacity: 1;
}

body.device-phone.app-mode .kk-mobile-dock {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    z-index: 1100;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
    border-radius: 22px;
    background: rgba(7, 12, 22, 0.92);
    border: 1px solid rgba(87, 192, 255, 0.18);
    box-shadow: 0 16px 34px rgba(3, 8, 16, 0.48);
    backdrop-filter: blur(16px);
}

body.device-phone.app-mode .kk-mobile-dock-link {
    min-height: 56px;
    border: 1px solid rgba(87, 192, 255, 0.12);
    border-radius: 16px;
    background: rgba(10, 18, 32, 0.82);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 8px 6px;
    text-align: center;
    font-weight: 700;
    flex-direction: column;
    gap: 5px;
}

body.device-phone.app-mode .kk-mobile-dock-link.active {
    background: linear-gradient(135deg, #2a9bff, #1b3f98);
    color: #ffffff;
    border-color: rgba(135, 209, 255, 0.58);
}

body.device-phone.app-mode .kk-app-utility-row .app-hub-toggle,
body.device-phone.app-mode .app-rail-toggle-inline,
body.device-phone.app-mode .app-rail-peek {
    display: none !important;
}

body.device-phone.app-mode .kk-mobile-dock-action {
    cursor: pointer;
}

body.device-phone.app-mode .kk-mobile-dock-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    min-height: 24px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body.device-phone.app-mode .kk-mobile-dock-link.active .kk-mobile-dock-icon {
    background: rgba(255, 255, 255, 0.18);
}

body.device-phone.app-mode .kk-mobile-dock-label {
    font-size: 0.72rem;
    line-height: 1.1;
    letter-spacing: 0.02em;
}

body.device-tablet.app-mode .kk-app-links-shell {
    order: 3;
    width: 100%;
}

body.device-tablet.app-mode .kk-app-common-links {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
}

/* Inventory dashboard */
.app-inventory .inventory-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.app-inventory .inventory-filters .pill {
    text-decoration: none;
}

.app-inventory .inventory-filters .pill.active {
    background: rgba(87, 192, 255, 0.32);
    border-color: rgba(87, 192, 255, 0.6);
    color: var(--app-ink);
}

.app-inventory .inventory-ops-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
    margin: 0 0 14px;
}

.app-inventory .inventory-ops-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-radius: 14px;
    border: 1px solid rgba(87, 192, 255, 0.18);
    background: rgba(10, 18, 32, 0.72);
    padding: 12px 14px;
}

.app-inventory .inventory-ops-label {
    font-size: 0.68rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(180, 203, 232, 0.9);
}

.app-inventory .inventory-ops-card strong {
    font-size: 1.32rem;
    line-height: 1.1;
}

.app-inventory .inventory-status {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.app-inventory .inventory-status-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(140px, 3fr) auto;
    gap: 12px;
    align-items: center;
}

.app-inventory .inventory-status-label {
    font-weight: 600;
}

.app-inventory .inventory-status-track {
    height: 8px;
    background: rgba(87, 192, 255, 0.12);
    border-radius: 999px;
    overflow: hidden;
}

.app-inventory .inventory-status-fill {
    height: 100%;
    width: var(--value);
    background: linear-gradient(90deg, #5ee3b5, #4fb2ff);
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(79, 178, 255, 0.35);
}

.app-inventory .inventory-status-value {
    font-weight: 700;
}

.app-inventory .inventory-alerts {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.app-inventory .inventory-alert {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(10, 18, 32, 0.7);
    border: 1px solid rgba(87, 192, 255, 0.16);
}

.app-inventory .inventory-alert .alert-title {
    font-weight: 600;
}

.app-inventory .inventory-alert .alert-title a {
    color: var(--app-accent);
    text-decoration: none;
}

.app-inventory .inventory-alert .alert-title a:hover {
    color: var(--app-accent-strong);
    text-decoration: underline;
}

.app-inventory .inventory-alert .alert-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--app-muted);
}

.app-inventory .inventory-alert .alert-qty {
    font-weight: 700;
    color: var(--app-ink);
}

.app-inventory .inventory-alert .alert-loc {
    color: var(--app-muted);
}

.app-inventory .inventory-table {
    width: 100%;
    table-layout: auto;
}

.app-inventory .inventory-table th,
.app-inventory .inventory-table td {
    overflow-wrap: anywhere;
    vertical-align: top;
}

.app-inventory .inventory-table-readable .inv-name {
    display: block;
    font-weight: 800;
    font-size: 1.02rem;
    color: var(--app-ink);
    text-decoration: none;
}

.app-inventory .inventory-table-readable .inv-name:hover {
    color: var(--app-accent-strong);
    text-decoration: underline;
}

.app-inventory .inventory-table-readable .inv-subline {
    margin-top: 6px;
    line-height: 1.35;
}

.app-inventory .inventory-table-readable .inv-quick-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.app-inventory .inventory-table-readable .inventory-flag {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: 1px solid rgba(87, 192, 255, 0.24);
    background: rgba(87, 192, 255, 0.14);
    color: #d8ecff;
}

.app-inventory .inventory-table-readable .inventory-flag.info {
    border-color: rgba(87, 192, 255, 0.3);
    background: rgba(87, 192, 255, 0.14);
    color: #d7ecff;
}

.app-inventory .inventory-table-readable .inventory-flag.warn {
    border-color: rgba(255, 208, 120, 0.45);
    background: rgba(90, 58, 13, 0.35);
    color: #ffdca4;
}

.app-inventory .inventory-table-readable .inventory-flag.danger {
    border-color: rgba(255, 130, 130, 0.55);
    background: rgba(95, 30, 38, 0.4);
    color: #ffb2ba;
}

.app-inventory .inventory-table-readable .inv-dot {
    margin: 0 6px;
    opacity: 0.6;
}

.app-inventory .inventory-table-readable .inv-primary {
    font-weight: 700;
    color: var(--app-ink);
}

.app-inventory .inventory-table-readable .inv-date-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.app-inventory .inventory-table-readable .inv-actions {
    text-align: right;
}

.app-inventory .inventory-table-readable .inv-action-list {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    max-width: 100%;
}

.app-inventory .inventory-table-readable .inv-action-list .pill {
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .app-inventory .inventory-table-readable [data-col="dates"] {
        display: none;
    }
}

@media (max-width: 900px) {
    .app-inventory .inventory-ops-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-inventory .inventory-table-readable [data-col="where"] {
        display: none;
    }

    .app-inventory .inventory-table-readable .inv-actions {
        text-align: left;
    }

    .app-inventory .inventory-table-readable .inv-action-list {
        justify-content: flex-start;
    }
}

@media (max-width: 620px) {
    .app-inventory .inventory-ops-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-inventory .inventory-browse-form-card .inventory-filter-actions {
        width: 100%;
    }

    .app-inventory .inventory-browse-form-card .inventory-filter-actions .primary,
    .app-inventory .inventory-browse-form-card .inventory-filter-actions .pill {
        width: 100%;
        display: inline-flex;
        justify-content: center;
        text-align: center;
    }

    .app-inventory .hub-tabs .pill {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 420px) {
    .app-inventory .mobile-card-wrap .responsive-card-table td {
        grid-template-columns: minmax(78px, 0.95fr) minmax(0, 1.4fr);
        gap: 8px;
    }

    .app-inventory .mobile-card-wrap .responsive-card-table .inv-action-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 390px) {
    .app-inventory .hub-tabs .pill {
        flex-basis: 100%;
    }
}

/* Inventory daily activity */
.app-inventory .activity-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
}

.app-inventory .activity-kpi {
    background: rgba(10, 18, 32, 0.75);
    border: 1px solid rgba(87, 192, 255, 0.18);
    border-radius: 16px;
    padding: 12px 14px;
    flex: 1 1 180px;
    min-width: 160px;
}

.app-inventory .activity-kpi span {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--app-muted);
    font-weight: 700;
}

.app-inventory .activity-kpi strong {
    display: block;
    font-size: 1.35rem;
    margin-top: 6px;
    font-weight: 800;
}

.app-inventory .activity-panels {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.app-inventory .activity-panel {
    background: rgba(8, 14, 26, 0.7);
    border: 1px solid rgba(87, 192, 255, 0.16);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.app-inventory .activity-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.app-inventory .activity-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
}

.app-inventory .activity-item {
    background: rgba(10, 18, 32, 0.8);
    border: 1px solid rgba(87, 192, 255, 0.16);
    border-radius: 12px;
    padding: 10px 12px;
    display: grid;
    gap: 4px;
}

.app-inventory .activity-title {
    font-weight: 600;
}

.app-inventory .activity-title a {
    color: var(--app-ink);
    text-decoration: none;
}

.app-inventory .activity-title a:hover {
    color: var(--app-accent-strong);
    text-decoration: underline;
}

.app-inventory .activity-meta {
    font-size: 0.85rem;
    color: var(--app-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.app-inventory .activity-note {
    font-size: 0.85rem;
    color: var(--app-muted);
}

/* Order entry recap */
.order-entry-card .entry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px 12px;
    margin-top: 6px;
}

.order-entry-card .entry-span {
    grid-column: span 2;
}

.order-entry-card .entry-value {
    font-weight: 600;
}

.order-entry-card .entry-value.empty {
    color: var(--app-muted);
}

.order-entry-actions {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

@media (max-width: 820px) {
    .order-entry-card .entry-span {
        grid-column: span 1;
    }
}

.app-inventory-detail .field-grid.compact .primary {
    width: 100%;
}

@media (max-width: 820px) {
    .app-inventory .inventory-status-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

/* Inventory install */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.photo-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border-radius: 14px;
    background: rgba(10, 18, 32, 0.7);
    border: 1px solid rgba(87, 192, 255, 0.16);
    text-decoration: none;
    color: inherit;
}

.photo-card img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 10px;
    background: rgba(10, 18, 32, 0.9);
}

.photo-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
}

@media (max-width: 820px) {
    .photo-card img {
        height: 160px;
    }
}

/* Inventory installed today */
.app-inventory-installed .app-actions {
    align-items: flex-start;
}

.app-inventory-installed .installed-nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.app-inventory-installed .installed-date-form {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(10, 18, 32, 0.72);
    border: 1px solid rgba(87, 192, 255, 0.16);
}

.app-inventory-installed .installed-date-form label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--app-muted);
}

.app-inventory-installed .installed-date-form input[type="date"] {
    min-width: 172px;
    padding: 9px 10px;
    border-radius: 10px;
    border: 1px solid rgba(87, 192, 255, 0.22);
    background: rgba(7, 14, 26, 0.85);
    color: var(--app-ink);
    font-weight: 600;
}

.app-inventory-installed .installed-date-form input[type="date"]:focus-visible {
    outline: none;
    border-color: rgba(98, 204, 255, 0.9);
    box-shadow: 0 0 0 3px rgba(98, 204, 255, 0.2);
}

.app-inventory-installed .installed-filter-form {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(10, 18, 32, 0.72);
    border: 1px solid rgba(87, 192, 255, 0.16);
}

.app-inventory-installed .installed-filter-form label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--app-muted);
}

.app-inventory-installed .installed-filter-form select {
    min-width: 180px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(87, 192, 255, 0.22);
    background: rgba(7, 14, 26, 0.9);
    color: var(--app-ink);
    font-weight: 600;
}

.app-inventory-installed .installed-filter-form select:focus-visible {
    outline: none;
    border-color: rgba(98, 204, 255, 0.9);
    box-shadow: 0 0 0 3px rgba(98, 204, 255, 0.2);
}

.app-inventory-installed .installers-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.app-inventory-installed .installer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(10, 18, 32, 0.7);
    border: 1px solid rgba(87, 192, 255, 0.16);
}

.app-inventory-installed .installer-row .installer-name {
    font-weight: 600;
}

.app-inventory-installed .installer-row .installer-count {
    font-weight: 700;
    color: var(--app-ink);
}

.app-inventory-installed .install-records {
    display: grid;
    gap: 16px;
    margin-top: 12px;
}

.app-inventory-installed .install-record {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 16px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(10, 18, 32, 0.7);
    border: 1px solid rgba(87, 192, 255, 0.16);
}

.app-inventory-installed .install-photo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border-radius: 14px;
    background: rgba(7, 14, 26, 0.7);
    border: 1px solid rgba(87, 192, 255, 0.18);
    min-height: 160px;
}

.app-inventory-installed .install-photo img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 10px;
    background: rgba(10, 18, 32, 0.9);
}

.app-inventory-installed .install-photo-placeholder {
    flex: 1;
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--app-muted);
    font-size: 0.9rem;
    padding: 12px;
    border-radius: 10px;
    background: rgba(10, 18, 32, 0.6);
    border: 1px dashed rgba(87, 192, 255, 0.2);
}

.app-inventory-installed .install-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.app-inventory-installed .install-title {
    font-size: 1.1rem;
    font-weight: 700;
}

.app-inventory-installed .install-title a {
    color: var(--app-ink);
    text-decoration: none;
}

.app-inventory-installed .install-title a:hover {
    color: var(--app-accent-strong);
    text-decoration: underline;
}

.app-inventory-installed .install-status {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.app-inventory-installed .install-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 6px 16px;
    margin-top: 10px;
}

.app-inventory-installed .install-notes {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(7, 14, 26, 0.7);
    border: 1px dashed rgba(87, 192, 255, 0.25);
    color: var(--app-muted);
}

.app-inventory-installed .install-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

@media (max-width: 900px) {
    .app-inventory-installed .app-actions {
        width: 100%;
    }

    .app-inventory-installed .installed-date-form {
        width: 100%;
    }

    .app-inventory-installed .installed-date-form input[type="date"] {
        flex: 1 1 180px;
    }

    .app-inventory-installed .installed-filter-form {
        width: 100%;
    }

    .app-inventory-installed .installed-filter-form select {
        flex: 1 1 220px;
    }

    .app-inventory-installed .install-record {
        grid-template-columns: 1fr;
    }

    .app-inventory-installed .install-photo img {
        height: 180px;
    }
}

/* Job detail items emphasis */
.items-hero {
    background: rgba(15, 20, 27, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 20px 22px;
    margin-bottom: 24px;
    box-shadow: 0 22px 40px rgba(0, 0, 0, 0.25);
}

.items-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.items-meta {
    font-size: 0.9rem;
    color: #c2c9d6;
    background: rgba(20, 33, 48, 0.65);
    padding: 8px 12px;
    border-radius: 999px;
}

.items-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin: 16px 0 18px;
}

.items-kpi {
    background: rgba(12, 18, 26, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.items-kpi strong {
    font-size: 1.4rem;
}

.items-kpi.highlight {
    border-color: rgba(229, 188, 88, 0.45);
    background: rgba(35, 29, 15, 0.9);
}

.items-tools {
    display: grid;
    grid-template-columns: minmax(180px, 1.6fr) minmax(160px, 0.8fr) minmax(200px, 1fr);
    gap: 14px;
    align-items: end;
    margin-bottom: 14px;
}

.items-tools label {
    font-size: 0.85rem;
    color: #aeb7c5;
    display: block;
    margin-bottom: 6px;
}

.items-tools input[type="search"],
.items-tools select {
    width: 100%;
}

.items-checks {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.items-checks .check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: #cbd4e1;
}

.items-table .dark-table th,
.items-table .dark-table td {
    font-size: 0.98rem;
}

.items-table .dark-table td {
    padding: 14px 12px;
}

@media (max-width: 900px) {
    .items-tools {
        grid-template-columns: 1fr;
    }
}

/* Daily ordered vs received summary */
.daily-counts {
    background: rgba(12, 18, 26, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.daily-counts-form {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.daily-counts-form input[type="date"] {
    min-width: 150px;
}

.daily-counts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 14px;
}

.daily-count {
    background: rgba(8, 12, 18, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.daily-count strong {
    font-size: 1.6rem;
}

.daily-count.highlight {
    border-color: rgba(79, 178, 255, 0.45);
    background: rgba(15, 25, 38, 0.95);
}

/* Compact barcode previews for tables */
.barcode-preview--compact {
    padding: 6px 8px;
    min-height: 44px;
    background: #ffffff;
}

.barcode-preview--compact svg {
    width: 100%;
    height: 38px;
}

/* Jobs activity + drawer */
.items-activity {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
}

.items-activity-left {
    display: grid;
    gap: 0.4rem;
}

.items-activity-label {
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.items-activity-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.items-activity-date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.items-activity-date label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.6);
}

.items-activity-date input[type='date'] {
    background: #111722;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e8eef6;
    padding: 0.4rem 0.6rem;
    border-radius: 10px;
}

.app-details.drawer summary {
    padding: 0.7rem 0.9rem;
    border-radius: 12px;
    background: rgba(15, 24, 36, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.app-details.drawer .drawer-body {
    margin-top: 0.8rem;
    display: grid;
    gap: 1rem;
}

.drawer-section {
    padding: 0.85rem 0.9rem;
    border-radius: 14px;
    background: rgba(10, 16, 26, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.field-grid.compact {
    gap: 0.8rem;
}

.drawer-section h4 {
    font-size: 0.95rem;
    margin-bottom: 0.6rem;
}

.field-grid.three-col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .field-grid.three-col {
        grid-template-columns: 1fr;
    }
}

/* Activity + NOC lite */
.activity-table td,
.activity-table th {
    vertical-align: top;
}

.activity-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    background: rgba(20, 26, 35, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.75rem;
}

.noc-lite-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.noc-tile {
    padding: 1rem;
    border-radius: 16px;
    background: rgba(12, 18, 28, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: grid;
    gap: 0.4rem;
}

.noc-tile strong {
    font-size: 1.6rem;
}

.noc-netflow {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.noc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: rgba(231, 239, 250, 0.86);
}

.noc-list li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    align-items: center;
}

.noc-list li span:last-child {
    font-weight: 600;
    color: #f4fbff;
}

.noc-refresh {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(8, 14, 24, 0.7);
    border: 1px solid rgba(87, 192, 255, 0.18);
}

.noc-refresh strong {
    font-size: 0.95rem;
}

.noc-device-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}

.noc-device-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    background: rgba(10, 16, 25, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.noc-device-row::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #8fa7c1;
    box-shadow: 0 0 10px rgba(143, 167, 193, 0.6);
}

.noc-device-row.ok::before {
    background: #29d391;
    box-shadow: 0 0 10px rgba(41, 211, 145, 0.6);
}

.noc-device-row.warn::before {
    background: #f5b143;
    box-shadow: 0 0 10px rgba(245, 177, 67, 0.6);
}

.noc-device-row.stale::before {
    background: #ef5d5d;
    box-shadow: 0 0 10px rgba(239, 93, 93, 0.6);
}

.noc-device-name {
    font-weight: 600;
    color: #f4fbff;
}

.noc-device-metrics {
    display: grid;
    gap: 0.2rem;
    font-size: 0.85rem;
    color: rgba(231, 239, 250, 0.86);
    text-align: right;
}
.noc-device-actions {
    display: flex;
    gap: 0.35rem;
    justify-content: flex-end;
    align-items: center;
    margin-top: 0.1rem;
}

.noc-device-actions .pill {
    font-size: 0.75rem;
}

.noc-device-status {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(231, 239, 250, 0.65);
}

.noc-alerts {
    grid-column: span 2;
}

.noc-alert-list {
    list-style: none;
    margin: 8px 0 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.noc-alert-row {
    display: grid;
    gap: 4px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(18, 24, 36, 0.7);
    border: 1px solid rgba(255, 190, 120, 0.2);
}

.noc-alert-label {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: #ffcc8a;
}

.noc-alert-detail {
    font-size: 0.85rem;
    color: rgba(240, 245, 255, 0.9);
}

.noc-alert-time {
    font-size: 0.75rem;
    color: rgba(170, 185, 210, 0.85);
}

.noc-summary {
    grid-column: span 2;
}

.noc-summary-body {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(8, 14, 26, 0.7);
    border: 1px solid rgba(87, 192, 255, 0.18);
    white-space: pre-wrap;
    font-size: 0.85rem;
    color: rgba(231, 239, 250, 0.92);
}

/* Footer health widget */
.footer-health {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 1rem;
    font-size: 0.8rem;
}

.footer-powered {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-left: 1rem;
}

.footer-powered-logo {
    height: 18px;
    width: auto;
    opacity: 0.92;
    filter: drop-shadow(0 8px 14px rgba(5, 12, 24, 0.6));
}

.footer-health .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #8fa7c1;
    box-shadow: 0 0 10px rgba(143, 167, 193, 0.6);
}

.footer-health.ok .status-dot {
    background: #29d391;
    box-shadow: 0 0 10px rgba(41, 211, 145, 0.6);
}

.footer-health.warn .status-dot {
    background: #f5b143;
    box-shadow: 0 0 10px rgba(245, 177, 67, 0.6);
}

.footer-health.bad .status-dot {
    background: #ef5d5d;
    box-shadow: 0 0 10px rgba(239, 93, 93, 0.6);
}

/* Home dashboard layout + KPI cards */
.app-home-dashboard .home-kpi-card {
    min-height: 132px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.app-home-dashboard .home-kpi-value {
    font-size: clamp(1.45rem, 2vw, 2rem);
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #f6fbff;
}

.app-home-dashboard .timeline-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.app-home-dashboard .timeline-list li {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(9, 18, 34, 0.55);
}

.app-home-dashboard .timeline-title {
    font-weight: 600;
    color: #e9f3ff;
}

/* Ops hub polish: calmer palette + touch-first targets. */
.app-shell.app-ops-hub {
    --app-border: rgba(124, 171, 201, 0.24);
    --app-accent: #7fb9d7;
    --app-accent-strong: #4f90b6;
    --app-teal: #8ed5bb;
    background:
        radial-gradient(860px 560px at 14% -18%, rgba(127, 185, 215, 0.25), transparent 62%),
        radial-gradient(720px 520px at 108% 14%, rgba(142, 213, 187, 0.2), transparent 64%),
        linear-gradient(160deg, #081322 0%, #0b192c 50%, #08101b 100%);
}

.app-shell.app-ops-hub .hub-tabs {
    gap: 10px;
}

.app-shell.app-ops-hub .hub-tabs .pill,
.app-shell.app-ops-hub .app-actions .app-btn,
.app-shell.app-ops-hub .rail-link {
    min-height: 46px;
}

.app-shell.app-ops-hub .hub-tabs .pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 14px;
    border: 1px solid rgba(127, 185, 215, 0.28);
    background: rgba(9, 22, 37, 0.72);
    font-weight: 700;
}

.app-shell.app-ops-hub .hub-tabs .pill.active {
    background: rgba(127, 185, 215, 0.3);
    border-color: rgba(127, 185, 215, 0.62);
    color: #f3f8ff;
}

.app-shell.app-ops-hub .app-kpi {
    background: rgba(127, 185, 215, 0.13);
    border-color: rgba(127, 185, 215, 0.24);
}

.app-shell.app-ops-hub .app-card.card-link {
    background: linear-gradient(160deg, rgba(17, 35, 58, 0.94), rgba(9, 18, 30, 0.86));
    border-color: rgba(127, 185, 215, 0.26);
}

.app-shell.app-ops-hub .app-card.card-link:hover {
    border-color: rgba(142, 213, 187, 0.42);
    box-shadow: 0 24px 52px rgba(5, 14, 26, 0.62);
}

.app-shell.app-ops-hub .app-actions {
    gap: 12px;
}

.app-shell.app-ops-hub .app-actions .app-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* PAFDS mode for Ops hub. */
.app-shell.app-ops-hub.app-ops-pafds {
    --app-border: rgba(133, 168, 196, 0.24);
    --app-accent: #8bbacb;
    --app-accent-strong: #5c90ac;
    --app-teal: #90cfbe;
    background:
        radial-gradient(860px 560px at 10% -20%, rgba(139, 186, 203, 0.24), transparent 62%),
        radial-gradient(700px 520px at 108% 18%, rgba(144, 207, 190, 0.2), transparent 64%),
        linear-gradient(160deg, #081322 0%, #0a182a 52%, #07111e 100%);
}

.app-shell.app-ops-hub.app-ops-pafds .hub-tabs .pill {
    border-color: rgba(133, 168, 196, 0.3);
    background: rgba(12, 24, 42, 0.74);
}

.app-shell.app-ops-hub.app-ops-pafds .hub-tabs .pill.active {
    background: rgba(139, 186, 203, 0.33);
    border-color: rgba(139, 186, 203, 0.62);
}

.app-shell.app-ops-hub.app-ops-pafds .app-kpi,
.app-shell.app-ops-hub.app-ops-pafds .app-card.card-link {
    border-color: rgba(133, 168, 196, 0.28);
}

@media (max-width: 900px) {
    .app-shell.app-ops-hub .hub-tabs .pill {
        flex: 1 1 calc(50% - 10px);
    }
}

@media (pointer: coarse) {
    .app-shell.app-ops-hub .hub-tabs .pill,
    .app-shell.app-ops-hub .app-actions .app-btn,
    .app-shell.app-ops-hub .rail-link {
        min-height: 52px;
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

/* PAFDS operations pages: long-session readability + touch controls. */
.app-shell.app-pafds-service,
.app-shell.app-pafds-leads,
.app-shell.app-pafds-ops {
    --app-border: rgba(133, 168, 196, 0.24);
    --app-accent: #8bbacb;
    --app-accent-strong: #5c90ac;
    background:
        radial-gradient(860px 560px at 10% -20%, rgba(139, 186, 203, 0.24), transparent 62%),
        radial-gradient(700px 520px at 108% 18%, rgba(144, 207, 190, 0.18), transparent 64%),
        linear-gradient(160deg, #081322 0%, #0a182a 52%, #07111e 100%);
}

.app-shell.app-pafds-hub {
    --app-border: rgba(133, 168, 196, 0.24);
    --app-accent: #8bbacb;
    --app-accent-strong: #5c90ac;
    background:
        radial-gradient(860px 560px at 10% -20%, rgba(139, 186, 203, 0.24), transparent 62%),
        radial-gradient(700px 520px at 108% 18%, rgba(144, 207, 190, 0.18), transparent 64%),
        linear-gradient(160deg, #081322 0%, #0a182a 52%, #07111e 100%);
}

.app-shell.app-pafds-hub .app-card-wide {
    grid-column: 1 / -1;
}

.app-shell.app-pafds-hub .pulse-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.app-shell.app-pafds-hub .pulse-tile {
    text-decoration: none;
    color: var(--app-ink);
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(133, 168, 196, 0.28);
    background: linear-gradient(150deg, rgba(13, 24, 44, 0.92), rgba(8, 16, 30, 0.85));
    box-shadow: 0 14px 30px rgba(5, 12, 24, 0.4);
    display: grid;
    gap: 4px;
    transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.app-shell.app-pafds-hub .pulse-tile strong {
    font-size: 1.3rem;
    line-height: 1.2;
}

.app-shell.app-pafds-hub .pulse-tile small {
    color: var(--app-muted);
    font-size: 0.8rem;
}

.app-shell.app-pafds-hub .pulse-tile:hover {
    transform: translateY(-2px);
    border-color: rgba(133, 168, 196, 0.44);
    box-shadow: 0 18px 34px rgba(5, 12, 24, 0.52);
}

.app-shell.app-pafds-hub .app-kpi.sla {
    min-width: 220px;
}

.app-shell.app-pafds-hub .app-kpi.sla em {
    display: block;
    margin-top: 3px;
    font-style: normal;
    font-size: 0.78rem;
    color: rgba(232, 240, 255, 0.8);
}

.app-shell.app-pafds-hub .app-kpi.sla.ok {
    border-color: rgba(101, 227, 189, 0.4);
    background: rgba(101, 227, 189, 0.12);
}

.app-shell.app-pafds-hub .app-kpi.sla.warn {
    border-color: rgba(255, 211, 125, 0.45);
    background: rgba(255, 211, 125, 0.14);
}

.app-shell.app-pafds-hub .app-kpi.sla.danger {
    border-color: rgba(255, 139, 139, 0.45);
    background: rgba(255, 139, 139, 0.15);
}

.app-shell.app-pafds-hub .dash-table .app-btn {
    padding: 7px 10px;
    border-radius: 10px;
    font-size: 0.82rem;
    min-height: 36px;
}

.app-shell.app-pafds-hub .pafds-row-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.app-shell.app-pafds-hub .app-btn,
.app-shell.app-pafds-hub .pill {
    min-height: 44px;
}

.app-shell.app-pafds-service .app-search,
.app-shell.app-pafds-leads .app-search {
    flex-wrap: wrap;
    align-items: stretch;
}

.app-shell.app-pafds-service .app-search input,
.app-shell.app-pafds-service .app-search select,
.app-shell.app-pafds-service .app-search button,
.app-shell.app-pafds-service .app-btn,
.app-shell.app-pafds-service .pill,
.app-shell.app-pafds-leads .app-search input,
.app-shell.app-pafds-leads .app-search select,
.app-shell.app-pafds-leads .app-search button,
.app-shell.app-pafds-leads .app-btn,
.app-shell.app-pafds-leads .pill {
    min-height: 44px;
}

.app-shell.app-pafds-service .app-search button,
.app-shell.app-pafds-leads .app-search button {
    border-radius: 12px;
    border: 1px solid rgba(133, 168, 196, 0.34);
    background: linear-gradient(135deg, rgba(139, 186, 203, 0.26), rgba(92, 144, 172, 0.28));
    color: #eaf5ff;
    font-weight: 700;
    padding: 10px 14px;
}

.app-shell.app-pafds-service .app-kpi,
.app-shell.app-pafds-leads .app-kpi,
.app-shell.app-pafds-ops .app-kpi {
    background: rgba(133, 168, 196, 0.13);
    border-color: rgba(133, 168, 196, 0.25);
}

.app-shell.app-pafds-ops .app-card-wide {
    grid-column: 1 / -1;
}

.app-shell.app-pafds-ops .hub-tabs {
    gap: 8px;
}

.app-shell.app-pafds-ops .dash-table td strong {
    color: #eaf4ff;
}

.app-shell.app-pafds-ops .status-pill {
    white-space: nowrap;
}

.app-shell.app-pafds-ops [data-ops-refresh-countdown] {
    font-family: var(--app-font-mono);
    letter-spacing: 0.01em;
}

.app-shell.app-pafds-ops [data-ops-auto-refresh-toggle][aria-pressed="true"] {
    border-color: rgba(101, 227, 189, 0.5);
    background: linear-gradient(135deg, rgba(101, 227, 189, 0.24), rgba(87, 192, 255, 0.2));
    color: #ecfff8;
}

.app-pafds-shell {
    --pafds-shell-bg: linear-gradient(180deg, rgba(8, 19, 34, 0.98), rgba(12, 24, 42, 0.96));
}

.app-pafds-shell header {
    position: sticky;
    top: 0;
    z-index: 40;
    backdrop-filter: blur(16px);
}

.app-pafds-shell .pafds-app-header {
    border-bottom: 1px solid rgba(133, 168, 196, 0.18);
    background:
        radial-gradient(circle at top left, rgba(73, 143, 232, 0.2), transparent 34%),
        linear-gradient(180deg, rgba(8, 19, 34, 0.98), rgba(10, 24, 42, 0.96));
    box-shadow: 0 24px 44px rgba(5, 12, 24, 0.28);
}

.app-pafds-shell .pafds-app-header-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "brand search utility"
        "links links links";
    align-items: center;
    gap: 14px 18px;
    padding: 16px 0 14px;
}

.app-pafds-shell .pafds-app-brand-column {
    grid-area: brand;
    min-width: 0;
}

.app-pafds-shell .pafds-app-brand-lockup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 68px;
    min-width: 210px;
    padding: 14px 18px;
    border-radius: 22px;
    border: 1px solid rgba(191, 219, 254, 0.18);
    background:
        radial-gradient(circle at top left, rgba(107, 165, 255, 0.18), transparent 38%),
        linear-gradient(180deg, rgba(11, 26, 46, 0.98), rgba(16, 40, 70, 0.94));
    box-shadow: 0 16px 30px rgba(4, 18, 38, 0.28);
    text-decoration: none;
}

.app-pafds-shell .pafds-app-brand-mark {
    display: block;
    width: clamp(150px, 22vw, 245px);
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 14px 24px rgba(7, 29, 52, 0.32));
}

.app-pafds-shell .pafds-app-command-layer {
    grid-area: search;
    display: grid;
    gap: 0.7rem;
    min-width: 0;
}

.app-pafds-shell .pafds-app-command-layer .command-wrap {
    margin-top: 0;
}

.app-pafds-shell .pafds-app-command-layer .command-input-shell {
    border-color: rgba(133, 168, 196, 0.24);
    background: rgba(10, 20, 36, 0.9);
}

.app-pafds-shell .pafds-app-command-layer .command-input-shell input {
    color: #f8fafc;
}

.app-pafds-shell .pafds-app-command-layer .command-input-shell input::placeholder {
    color: rgba(226, 232, 240, 0.52);
}

.app-pafds-shell .pafds-app-command-layer .command-hint,
.app-pafds-shell .pafds-app-command-layer .command-icon {
    color: rgba(226, 232, 240, 0.74);
}

.app-pafds-shell .pafds-app-utility-row {
    grid-area: utility;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
}

.app-pafds-shell .pafds-app-links-shell {
    grid-area: links;
    min-width: 0;
}

.app-pafds-shell .pafds-app-common-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.app-pafds-shell .pafds-app-common-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(148, 190, 225, 0.2);
    background: linear-gradient(180deg, rgba(14, 31, 54, 0.96), rgba(11, 24, 42, 0.92));
    color: rgba(241, 247, 255, 0.88);
    text-decoration: none;
    font-weight: 800;
    box-shadow: 0 10px 20px rgba(5, 14, 28, 0.18);
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.app-pafds-shell .pafds-app-common-link:hover,
.app-pafds-shell .pafds-app-common-link:focus-visible {
    transform: translateY(-1px);
    color: #ffffff;
    border-color: rgba(174, 211, 255, 0.34);
    box-shadow: 0 14px 24px rgba(5, 14, 28, 0.24);
}

.app-pafds-shell .pafds-app-common-link.active {
    background: linear-gradient(135deg, rgba(37, 88, 150, 0.98), rgba(20, 56, 103, 0.98));
    border-color: rgba(148, 190, 225, 0.38);
    color: #ffffff;
    box-shadow: 0 16px 28px rgba(5, 14, 28, 0.26);
}

.app-pafds-shell .pafds-site-cta {
    background: linear-gradient(180deg, rgba(13, 31, 53, 0.96), rgba(9, 22, 38, 0.92));
    color: #f6fbff;
    border-color: rgba(148, 190, 225, 0.2);
}

.app-pafds-shell .pafds-site-cta:hover,
.app-pafds-shell .pafds-site-cta:focus-visible {
    color: #ffffff;
    border-color: rgba(174, 211, 255, 0.34);
}

.app-pafds-shell .navbar.navbar-light.bg-white {
    margin-bottom: 0 !important;
    border-bottom: 1px solid rgba(133, 168, 196, 0.22) !important;
    background: var(--pafds-shell-bg) !important;
    box-shadow: 0 20px 40px rgba(5, 12, 24, 0.28) !important;
}

.app-pafds-shell .navbar .container {
    display: grid;
    gap: 0.65rem;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

.app-pafds-shell .navbar-brand {
    color: #f8fafc !important;
    font-weight: 800;
    letter-spacing: 0.02em;
    min-width: 0;
    padding: 0.1rem 0;
    gap: 0;
}

.app-pafds-shell .navbar-brand::before {
    content: none;
}

.app-pafds-shell .pafds-navbar-mark {
    display: block;
    width: clamp(150px, 22vw, 245px);
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 14px 24px rgba(7, 29, 52, 0.32));
}

.app-pafds-shell .navbar-toggler {
    border-color: rgba(191, 219, 254, 0.24);
}

.app-pafds-shell .navbar-toggler-icon {
    filter: brightness(0) invert(1);
}

.app-pafds-shell .navbar-collapse {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    align-items: center;
}

.app-pafds-shell .navbar-nav {
    gap: 0.35rem;
    align-items: center;
    min-width: 0;
    flex-wrap: wrap;
}

.app-pafds-shell .navbar-nav .nav-link {
    color: rgba(241, 247, 255, 0.84) !important;
    border-radius: 999px;
    padding: 0.5rem 0.8rem !important;
    white-space: nowrap;
}

.app-pafds-shell .navbar-nav .nav-link:hover,
.app-pafds-shell .navbar-nav .nav-link:focus-visible {
    color: #f8fafc !important;
    background: rgba(191, 219, 254, 0.12);
}

.app-pafds-shell .navbar-action-btn {
    min-height: 42px;
    padding: 0.55rem 0.95rem;
}

.app-pafds-shell .pafds-header-actions {
    margin-left: auto;
}

.app-pafds-shell .pafds-header-actions .app-ai-cta {
    background: linear-gradient(135deg, rgba(31, 78, 145, 0.96), rgba(14, 43, 86, 0.98));
    border-color: rgba(103, 168, 255, 0.26);
    color: #f8fbff;
    box-shadow: 0 14px 26px rgba(4, 18, 38, 0.28);
}

.app-pafds-shell .pafds-header-actions .app-ai-cta:hover,
.app-pafds-shell .pafds-header-actions .app-ai-cta:focus-visible {
    color: #ffffff;
    border-color: rgba(133, 191, 255, 0.42);
    box-shadow: 0 18px 30px rgba(4, 18, 38, 0.34);
}

.app-pafds-shell .app-commandbar {
    margin-top: 0;
    padding: 0.8rem 0 0.95rem;
    background: linear-gradient(180deg, rgba(9, 18, 31, 0.98), rgba(8, 16, 28, 0.95));
    border-bottom: 1px solid rgba(133, 168, 196, 0.15);
}

.app-pafds-shell .command-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
}

.app-pafds-shell .global-range-shell {
    border-color: rgba(133, 168, 196, 0.24);
    background: rgba(12, 24, 42, 0.8);
}

.app-pafds-shell .global-range-label,
.app-pafds-shell .global-range-select,
.app-pafds-shell .global-range-icon {
    color: #eaf4ff;
}

.app-pafds-shell .command-wrap {
    margin-top: 0.7rem;
}

.app-pafds-shell .command-input-shell {
    border-color: rgba(133, 168, 196, 0.24);
    background: rgba(10, 20, 36, 0.9);
}

.app-pafds-shell .command-input-shell input {
    color: #f8fafc;
}

.app-pafds-shell .command-input-shell input::placeholder {
    color: rgba(226, 232, 240, 0.52);
}

.app-pafds-shell .command-hint,
.app-pafds-shell .command-icon {
    color: rgba(226, 232, 240, 0.74);
}

.app-pafds-shell .app-top-links {
    margin-top: 0.75rem;
}

.app-shell[class*="app-pafds"] .rail-brand {
    align-items: flex-start;
}

.app-shell[class*="app-pafds"] .rail-brand > div {
    min-width: 0;
    flex: 1 1 auto;
}

.app-shell[class*="app-pafds"] .pafds-rail-logo {
    background:
        linear-gradient(145deg, rgba(9, 22, 41, 0.98), rgba(16, 55, 95, 0.92)),
        url("../images/pafds-icon-64.png") center / 68% no-repeat;
    border: 1px solid rgba(133, 168, 196, 0.28);
    box-shadow: 0 14px 28px rgba(5, 12, 24, 0.42);
}

.app-shell[class*="app-pafds"] .rail-title,
.app-shell[class*="app-pafds"] .rail-subtitle,
.app-shell[class*="app-pafds"] .card-header h3,
.app-shell[class*="app-pafds"] .app-kpi span,
.app-shell[class*="app-pafds"] .pulse-tile span,
.app-shell[class*="app-pafds"] .pulse-tile small,
.app-shell[class*="app-pafds"] .dash-table th,
.app-shell[class*="app-pafds"] .dash-table td,
.app-shell[class*="app-pafds"] .muted,
.app-shell[class*="app-pafds"] .tiny {
    overflow-wrap: anywhere;
}

.app-pafds-shell .navbar-nav .nav-link,
.app-pafds-shell .navbar-action-btn,
.app-pafds-shell .app-top-links .pill,
.app-shell[class*="app-pafds"] .app-actions .app-btn,
.app-shell[class*="app-pafds"] .pill-row .pill,
.app-shell[class*="app-pafds"] .pafds-row-actions .app-btn,
.app-shell[class*="app-pafds"] .rail-link {
    flex: 0 0 auto;
    max-width: 100%;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}

.app-pafds-shell .navbar-action-btn,
.app-shell[class*="app-pafds"] .app-actions .app-btn,
.app-shell[class*="app-pafds"] .pafds-row-actions .app-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
}

.app-pafds-shell .app-request-cta {
    gap: 0.5rem;
    padding-inline: 1rem 1.12rem;
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(23, 65, 110, 0.98), rgba(41, 98, 166, 0.96));
    border-color: rgba(148, 190, 225, 0.24);
    box-shadow: 0 14px 28px rgba(5, 14, 28, 0.24);
}

.app-pafds-shell .app-request-cta::before {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1;
}

.app-pafds-shell .app-request-cta:hover {
    background:
        linear-gradient(135deg, rgba(33, 78, 129, 0.99), rgba(59, 118, 190, 0.97));
    border-color: rgba(166, 206, 239, 0.32);
    box-shadow: 0 18px 30px rgba(5, 14, 28, 0.28);
}

.app-shell[class*="app-pafds"] .app-header {
    gap: 14px;
}

.app-shell[class*="app-pafds"] .app-kpis {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.app-shell[class*="app-pafds"] .app-kpi {
    min-width: 0;
    padding: 12px 14px;
}

.app-shell[class*="app-pafds"] .app-kpi strong {
    overflow-wrap: anywhere;
}

.app-shell[class*="app-pafds"] .app-actions {
    justify-content: flex-end;
    align-items: flex-start;
}

.app-shell.app-pafds-hub .app-card-wide {
    grid-column: 1 / -1;
}

.app-shell.app-pafds-hub .pulse-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.app-shell.app-pafds-hub .pulse-tile {
    text-decoration: none;
    color: var(--app-ink);
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(133, 168, 196, 0.28);
    background: linear-gradient(150deg, rgba(13, 24, 44, 0.92), rgba(8, 16, 30, 0.85));
    box-shadow: 0 14px 30px rgba(5, 12, 24, 0.4);
    display: grid;
    gap: 4px;
    transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.app-shell.app-pafds-hub .pulse-tile strong {
    font-size: 1.3rem;
    line-height: 1.2;
}

.app-shell.app-pafds-hub .pulse-tile small {
    color: var(--app-muted);
    font-size: 0.8rem;
}

.app-shell.app-pafds-hub .pulse-tile:hover {
    transform: translateY(-2px);
    border-color: rgba(133, 168, 196, 0.44);
    box-shadow: 0 18px 34px rgba(5, 12, 24, 0.52);
}

.app-shell.app-pafds-hub .app-kpi.sla {
    min-width: 220px;
}

.app-shell.app-pafds-hub .dash-table .app-btn {
    padding: 7px 10px;
    border-radius: 10px;
    font-size: 0.82rem;
    min-height: 36px;
}

.app-shell.app-pafds-ops .hub-tabs {
    gap: 8px;
}

.app-shell.app-pafds-ops .hub-tabs .pill {
    white-space: nowrap;
}

.app-shell.app-pafds-customers .app-search {
    gap: 0.65rem;
}

.app-shell.app-pafds-customers .app-search input,
.app-shell.app-pafds-customers .app-search select,
.app-shell.app-pafds-customers .app-search button {
    min-height: 44px;
}

.app-shell.app-pafds-status .status-hero,
.app-shell.app-pafds-status .hero-band,
.app-shell.app-pafds-status .signage-summary-band {
    border-radius: 1.25rem;
}

.app-shell.app-pafds-status .client-strip {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.app-shell.app-pafds-status .client-tile {
    gap: 0.55rem;
    padding: 0.9rem 0.95rem;
    border-radius: 1rem;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.05);
}

.app-shell.app-pafds-status .signage-detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.app-shell.app-pafds-apprequests .app-request-hero {
    padding: 1.05rem 1.15rem;
}

.app-shell.app-pafds-apprequests .app-request-grid {
    gap: 0.85rem;
}

.app-shell.app-pafds-ops .dash-table tr.row-overdue td {
    background: linear-gradient(120deg, rgba(255, 112, 112, 0.2), rgba(16, 30, 54, 0.22));
}

.app-shell.app-pafds-ops .dash-table tr.row-today td {
    background: linear-gradient(120deg, rgba(255, 207, 118, 0.14), rgba(16, 30, 54, 0.2));
}

@media (pointer: coarse) {
    .app-shell.app-pafds-hub .dash-table .app-btn {
        min-height: 44px;
    }

    .app-shell.app-pafds-hub .app-btn,
    .app-shell.app-pafds-hub .pill,
    .app-shell.app-pafds-service .app-search input,
    .app-shell.app-pafds-service .app-search select,
    .app-shell.app-pafds-service .app-search button,
    .app-shell.app-pafds-service .app-btn,
    .app-shell.app-pafds-service .pill,
    .app-shell.app-pafds-leads .app-search input,
    .app-shell.app-pafds-leads .app-search select,
    .app-shell.app-pafds-leads .app-search button,
    .app-shell.app-pafds-leads .app-btn,
    .app-shell.app-pafds-leads .pill {
        min-height: 52px;
    }
}

@media (max-width: 900px) {
    .app-pafds-shell .pafds-app-header-inner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "brand"
            "utility"
            "search"
            "links";
    }

    .app-pafds-shell .pafds-app-brand-lockup,
    .app-pafds-shell .pafds-app-utility-row,
    .app-pafds-shell .pafds-app-command-layer {
        width: 100%;
    }

    .app-pafds-shell .pafds-app-utility-row {
        justify-content: flex-start;
    }

    .app-pafds-shell .pafds-navbar-mark {
        width: clamp(138px, 44vw, 210px);
    }

    .app-pafds-shell .navbar-nav .nav-link,
    .app-pafds-shell .navbar-action-btn,
    .app-pafds-shell .app-top-links .pill,
    .app-shell[class*="app-pafds"] .app-actions .app-btn,
    .app-shell[class*="app-pafds"] .pill-row .pill,
    .app-shell[class*="app-pafds"] .pafds-row-actions .app-btn,
    .app-shell[class*="app-pafds"] .rail-link {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .app-shell.app-pafds-ops .hub-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: thin;
    }

    .app-shell.app-pafds-ops .hub-tabs .pill {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .app-shell[class*="app-pafds"] .app-actions,
    .app-shell[class*="app-pafds"] .pafds-row-actions {
        width: 100%;
    }

    .app-shell[class*="app-pafds"] .app-actions .app-btn,
    .app-shell[class*="app-pafds"] .pafds-row-actions .app-btn,
    .app-pafds-shell .navbar-action-btn {
        flex: 1 1 calc(50% - 0.5rem);
    }
}

@media (max-width: 640px) {
    .app-pafds-shell .pafds-app-brand-lockup,
    .app-pafds-shell .pafds-app-common-link,
    .app-pafds-shell .pafds-app-utility-row .navbar-action-btn {
        width: 100%;
    }

    .app-pafds-shell .pafds-app-common-links,
    .app-pafds-shell .pafds-app-utility-row {
        display: grid;
        gap: 10px;
    }

    .app-pafds-shell .pafds-navbar-mark {
        width: clamp(132px, 56vw, 180px);
    }

    .app-shell[class*="app-pafds"] .app-actions .app-btn,
    .app-shell[class*="app-pafds"] .pafds-row-actions .app-btn,
    .app-pafds-shell .navbar-action-btn,
    .app-pafds-shell .app-top-links .pill,
    .app-pafds-shell .navbar-nav .nav-link {
        flex-basis: 100%;
    }
}

.alert.warn {
    background: rgba(52, 40, 16, 0.85);
    border-color: rgba(255, 211, 125, 0.45);
    color: #ffd37d;
}

/* Hub tabs + embedded consoles (consolidated pages). */
.hub-tabs .pill {
    text-decoration: none;
}

.hub-tabs .pill.active {
    background: rgba(87, 192, 255, 0.32);
    border-color: rgba(87, 192, 255, 0.6);
    color: var(--app-ink, #e8f0ff);
}

.hub-embed {
    border-radius: 22px;
    border: 1px solid rgba(87, 192, 255, 0.18);
    background: rgba(7, 13, 26, 0.62);
    box-shadow: 0 20px 52px rgba(4, 10, 20, 0.55);
    overflow: hidden;
}

.hub-frame {
    width: 100%;
    height: clamp(680px, 78vh, 1200px);
    border: 0;
    display: block;
    background: transparent;
}

@media (max-width: 900px) {
    .hub-frame {
        height: clamp(560px, 74vh, 980px);
    }
}

/* Embedded mode (iframe-friendly): remove duplicate chrome for embedded pages. */
body.embed {
    background: transparent;
}

body.embed .app-shell {
    padding: 18px;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    grid-template-columns: 1fr;
    gap: 0;
    backdrop-filter: none;
    animation: none;
}

body.embed .app-rail {
    display: none;
}

body.embed .staff-dashboard .dashboard-shell {
    min-height: 0;
    padding: 18px;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    backdrop-filter: none;
}

body.embed .staff-dashboard .dashboard-shell::before,
body.embed .staff-dashboard .dashboard-shell::after {
    opacity: 0;
}

body.embed .dashboard-menu {
    display: none;
}

.command-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    z-index: 2;
    margin-bottom: 12px;
}

.global-range-shell {
    display: grid;
    grid-template-columns: auto auto minmax(10rem, 1fr);
    align-items: center;
    gap: 0.55rem;
    padding: 0.48rem 0.65rem;
    border-radius: 13px;
    border: 1px solid rgba(87, 192, 255, 0.36);
    background: linear-gradient(135deg, rgba(6, 14, 26, 0.95), rgba(11, 28, 46, 0.9));
    box-shadow:
        0 14px 30px rgba(2, 8, 18, 0.42),
        inset 0 0 0 1px rgba(101, 227, 189, 0.08);
    backdrop-filter: blur(8px);
}

.global-range-shell-hero {
    min-width: 20rem;
    max-width: 100%;
}

.global-range-icon {
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #d6efff;
    background: linear-gradient(155deg, rgba(87, 192, 255, 0.42), rgba(101, 227, 189, 0.35));
    border: 1px solid rgba(132, 221, 255, 0.58);
}

.global-range-label {
    margin: 0;
    font-size: 0.66rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(202, 225, 248, 0.9);
    white-space: nowrap;
}

.global-range-select {
    min-width: 10.4rem;
    height: 2.05rem;
    border: 1px solid rgba(126, 207, 255, 0.52);
    border-radius: 0.7rem;
    background: rgba(8, 16, 28, 0.92);
    color: #e9f4ff;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0 0.68rem;
    appearance: none;
    box-shadow: inset 0 0 0 1px rgba(7, 18, 34, 0.92);
}

.global-range-select:focus {
    outline: none;
    border-color: rgba(103, 225, 255, 0.92);
    box-shadow: 0 0 0 3px rgba(103, 225, 255, 0.22);
}

@media (max-width: 900px) {
    .command-toolbar {
        margin-bottom: 8px;
    }

    .global-range-shell-hero {
        width: 100%;
        min-width: 0;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "icon label"
            "select select";
        row-gap: 0.36rem;
    }

    .global-range-icon {
        grid-area: icon;
    }

    .global-range-label {
        grid-area: label;
        align-self: center;
    }

    .global-range-select {
        grid-area: select;
        width: 100%;
    }
}

/* 2026-02-24: Keith's Kitchens showroom refresh (website + webapp). */
:root {
    --kk-sand-050: #f6f2ec;
    --kk-sand-100: #ece4d8;
    --kk-sand-200: #dbcdb8;
    --kk-wood-500: #8b633f;
    --kk-wood-600: #6f4d30;
    --kk-slate-800: #25313a;
    --kk-slate-600: #4f5f6c;
    --kk-surface: #fffdf8;
    --kk-surface-2: #f8f3ea;
    --kk-line: rgba(109, 84, 58, 0.24);
    --kk-shadow: 0 20px 50px rgba(36, 28, 21, 0.18);
}

body.kk-site {
    color: var(--kk-slate-800);
    background:
        radial-gradient(1200px 680px at 0% -14%, rgba(139, 99, 63, 0.2), transparent 64%),
        radial-gradient(1000px 620px at 100% 0%, rgba(220, 197, 166, 0.42), transparent 60%),
        linear-gradient(170deg, #f9f6f1 0%, #f2ebe0 50%, #ece2d4 100%);
}

body.kk-site .navbar,
body.app-mode .navbar {
    background: rgba(252, 248, 242, 0.94) !important;
    border-bottom: 1px solid var(--kk-line);
    box-shadow: 0 16px 36px rgba(79, 53, 31, 0.12);
    backdrop-filter: blur(10px);
}

body.kk-site .navbar .nav-link,
body.app-mode .navbar .nav-link {
    color: #2f3d47 !important;
    font-weight: 650;
}

body.kk-site .navbar .nav-link:hover,
body.app-mode .navbar .nav-link:hover {
    color: var(--kk-wood-600) !important;
    background: rgba(139, 99, 63, 0.12);
}

body.kk-site .navbar .navbar-brand,
body.app-mode .navbar .navbar-brand {
    color: #202c34 !important;
    gap: 12px;
}

body.kk-site .navbar-brand-logo,
body.app-mode .navbar-brand-logo {
    height: 30px;
    width: auto;
    filter: drop-shadow(0 10px 16px rgba(79, 53, 31, 0.2));
}

body.kk-site .navbar-brand-text,
body.app-mode .navbar-brand-text {
    font-family: "Space Grotesk", "Manrope", sans-serif;
    letter-spacing: 0.02em;
    font-size: 0.92rem;
    text-transform: uppercase;
    color: #4b5b66;
}

body.kk-site .kk-site-nav .navbar-nav.flex-grow-1 {
    justify-content: center;
}

body.kk-site .kk-site-nav .navbar-nav:last-child {
    align-items: center;
    gap: 8px;
}

body.kk-site .navbar-action-btn {
    min-height: 38px;
    padding: 0.52rem 0.92rem;
    border-radius: 999px;
    font-size: 0.82rem;
    line-height: 1;
}

body.kk-site .app-commandbar {
    display: none;
}

body.app-mode {
    color: #1e2a32;
    background:
        linear-gradient(128deg, rgba(245, 238, 226, 0.92), rgba(242, 235, 222, 0.76)),
        repeating-linear-gradient(
            45deg,
            rgba(139, 99, 63, 0.045) 0 12px,
            rgba(255, 255, 255, 0) 12px 24px
        );
}

body.app-mode .app-rail {
    background: linear-gradient(180deg, rgba(114, 81, 53, 0.96), rgba(77, 54, 35, 0.96));
    border-color: rgba(237, 211, 175, 0.25);
    color: #fff6e8;
    box-shadow: 0 24px 42px rgba(53, 34, 20, 0.45);
}

body.app-mode .rail-subtitle {
    color: rgba(255, 246, 232, 0.74);
}

body.app-mode .rail-link {
    background: rgba(255, 247, 233, 0.08);
    border-color: rgba(255, 234, 201, 0.16);
}

body.app-mode .rail-link:hover {
    background: rgba(255, 235, 204, 0.2);
    border-color: rgba(255, 226, 184, 0.42);
}

body.app-mode .rail-link.active {
    background: rgba(255, 228, 187, 0.3);
    border-color: rgba(255, 220, 172, 0.56);
}

body.app-mode .rail-footer {
    background: rgba(255, 245, 228, 0.12);
    border-color: rgba(255, 225, 184, 0.25);
    color: rgba(255, 249, 239, 0.9);
}

body.app-mode .rail-label {
    color: rgba(255, 238, 211, 0.72);
}

body.app-mode .rail-logo {
    border: 1px solid rgba(255, 230, 190, 0.42);
    box-shadow: 0 10px 18px rgba(56, 35, 19, 0.45);
}

body.app-mode .text-muted,
body.app-mode .muted {
    color: #617180 !important;
}

body.app-mode .app-commandbar {
    background: rgba(247, 240, 229, 0.92);
    border-bottom: 1px solid var(--kk-line);
}

body.app-mode .app-commandbar-nav .pill {
    background: rgba(255, 251, 244, 0.96);
    border-color: rgba(117, 86, 57, 0.25);
    color: #22313c;
}

body.app-mode .command-input-shell {
    background: rgba(255, 252, 246, 0.96);
    border-color: rgba(117, 86, 57, 0.3);
    box-shadow: 0 14px 30px rgba(89, 63, 37, 0.13);
}

body.app-mode .command-icon,
body.app-mode .command-hint {
    color: #5e6e7c;
    background: rgba(244, 236, 224, 0.92);
    border-color: rgba(117, 86, 57, 0.24);
}

body.app-mode #app-command-input {
    color: #27353f;
}

body.app-mode .command-results {
    background: rgba(255, 251, 244, 0.97);
    border-color: rgba(117, 86, 57, 0.25);
    box-shadow: 0 18px 34px rgba(89, 63, 37, 0.14);
}

body.app-mode .command-row {
    background: rgba(252, 248, 241, 0.9);
    border-color: rgba(117, 86, 57, 0.2);
    color: #22313c;
}

body.app-mode .command-badge {
    background: rgba(244, 236, 224, 0.95);
    border-color: rgba(117, 86, 57, 0.22);
    color: #6b4b2d;
}

body.app-mode .command-row:hover,
body.app-mode .command-row.active {
    border-color: rgba(117, 86, 57, 0.48);
    transform: translateY(-1px);
}

body.app-mode .global-range-shell {
    border-color: rgba(117, 86, 57, 0.32);
    background: linear-gradient(135deg, rgba(251, 246, 239, 0.95), rgba(243, 233, 218, 0.95));
    box-shadow: 0 12px 24px rgba(89, 63, 37, 0.12);
}

body.app-mode .global-range-icon {
    color: #fdf8f0;
    background: linear-gradient(155deg, rgba(139, 99, 63, 0.9), rgba(111, 77, 48, 0.84));
    border-color: rgba(111, 77, 48, 0.62);
}

body.app-mode .global-range-label {
    color: #5a6976;
}

body.app-mode .global-range-select {
    border-color: rgba(117, 86, 57, 0.42);
    background: #fffaf1;
    color: #2a3944;
    box-shadow: inset 0 0 0 1px rgba(220, 199, 171, 0.72);
}

body.app-mode .app-shell {
    --app-border: rgba(117, 86, 57, 0.25);
    --app-accent: var(--kk-wood-500);
    --app-accent-strong: var(--kk-wood-600);
    --app-muted: var(--kk-slate-600);
    --app-ink: #1e2b33;
    --ui-surface: linear-gradient(150deg, rgba(255, 255, 252, 0.98), rgba(247, 240, 230, 0.95));
    --ui-surface-soft: linear-gradient(155deg, rgba(255, 250, 242, 0.96), rgba(242, 233, 219, 0.92));
    --ui-shadow-soft: 0 12px 28px rgba(89, 63, 37, 0.14);
    --ui-shadow-strong: 0 18px 34px rgba(89, 63, 37, 0.2);
    background:
        linear-gradient(165deg, rgba(255, 252, 247, 0.98), rgba(246, 239, 228, 0.92));
    border-color: rgba(117, 86, 57, 0.22);
    box-shadow: var(--kk-shadow);
}

body.app-mode .app-shell::before {
    background: radial-gradient(circle at 0% 0%, rgba(139, 99, 63, 0.18), transparent 56%);
}

body.app-mode .app-shell::after {
    background: radial-gradient(circle at 100% 0%, rgba(201, 177, 144, 0.24), transparent 58%);
}

body.app-mode .app-card,
body.app-mode .app-kpi,
body.app-mode .form-card,
body.app-mode .panel {
    background: linear-gradient(150deg, rgba(255, 255, 252, 0.96), rgba(248, 241, 231, 0.93));
    border-color: rgba(117, 86, 57, 0.2);
    box-shadow: 0 12px 28px rgba(89, 63, 37, 0.12);
}

body.app-mode .rail-link,
body.app-mode .pill,
body.app-mode .app-btn {
    border-color: rgba(117, 86, 57, 0.32);
}

body.app-mode .app-btn.primary,
body.app-mode .btn.btn-primary {
    background: linear-gradient(135deg, #a4764e, #7c5635);
    border-color: #7c5635;
    color: #fff8f0;
    box-shadow: 0 12px 24px rgba(89, 63, 37, 0.24);
}

body.app-mode .app-btn.ghost,
body.app-mode .btn.ghost {
    background: rgba(248, 239, 225, 0.78);
    border-color: rgba(117, 86, 57, 0.3);
    color: #2f3d47;
}

body.app-mode .dark-table {
    color: #24323c;
    background: rgba(255, 253, 249, 0.95);
}

body.app-mode .dark-table th {
    color: #5c6b78;
    background: rgba(246, 237, 222, 0.82);
    border-color: rgba(117, 86, 57, 0.15);
}

body.app-mode .dark-table td {
    border-color: rgba(117, 86, 57, 0.12);
}

body.app-mode .dark-table tr:hover td {
    background: rgba(244, 235, 218, 0.45);
}

body.app-mode .dark-table a {
    color: #724f33;
}

body.app-mode .dark-table a:hover {
    color: #4f3623;
}

body.app-mode .order-items input,
body.app-mode .order-items textarea,
body.app-mode .form-card input:not([type="checkbox"]):not([type="radio"]),
body.app-mode .app-card input:not([type="checkbox"]):not([type="radio"]),
body.app-mode .form-card select,
body.app-mode .app-card select,
body.app-mode .form-card textarea,
body.app-mode .app-card textarea {
    background: linear-gradient(180deg, rgba(255, 255, 253, 0.99), rgba(248, 241, 233, 0.95));
    color: #22313c;
    border-color: rgba(117, 86, 57, 0.35);
    border-radius: 16px;
    min-height: 52px;
    padding: 13px 15px;
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.45;
    caret-color: #6e4726;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84), 0 10px 20px rgba(89, 63, 37, 0.08);
}

body.app-mode .form-card input::placeholder,
body.app-mode .app-card input::placeholder,
body.app-mode .form-card textarea::placeholder,
body.app-mode .app-card textarea::placeholder {
    color: rgba(95, 112, 128, 0.78);
}

body.app-mode .form-card textarea,
body.app-mode .app-card textarea {
    resize: vertical;
}

body.app-mode .order-items input:focus,
body.app-mode .order-items textarea:focus,
body.app-mode .form-card input:not([type="checkbox"]):not([type="radio"]):focus,
body.app-mode .app-card input:not([type="checkbox"]):not([type="radio"]):focus,
body.app-mode .form-card select:focus,
body.app-mode .app-card select:focus,
body.app-mode .form-card textarea:focus,
body.app-mode .app-card textarea:focus {
    border-color: rgba(111, 77, 48, 0.58);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(249, 244, 237, 0.96));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        0 0 0 4px rgba(139, 99, 63, 0.14),
        0 14px 28px rgba(89, 63, 37, 0.12);
    transform: translateY(-1px);
}

body.app-mode .footer {
    background: rgba(246, 239, 227, 0.95);
    border-top: 1px solid var(--kk-line);
    color: #617180;
}

@keyframes kk-reveal-up {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

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

body.kk-site .kk-showcase {
    animation: kk-reveal-up 0.58s ease both;
}

body.kk-site .kk-showcase:nth-of-type(2) {
    animation-delay: 0.06s;
}

body.kk-site .kk-showcase:nth-of-type(3) {
    animation-delay: 0.12s;
}

body.kk-site .kk-showcase:nth-of-type(4) {
    animation-delay: 0.18s;
}

body.kk-site .kk-showcase {
    border-radius: 30px;
    border: 1px solid var(--kk-line);
    background: linear-gradient(145deg, rgba(255, 253, 249, 0.98), rgba(246, 239, 227, 0.96));
    box-shadow: var(--kk-shadow);
    margin-top: 22px;
    padding: clamp(20px, 3vw, 34px);
}

body.kk-site .kk-kicker {
    margin: 0 0 10px;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #6f7e89;
    font-weight: 700;
}

body.kk-site .kk-showcase h1,
body.kk-site .kk-showcase h2,
body.kk-site .kk-showcase h3 {
    color: #1c2a33;
}

body.kk-site .kk-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
    gap: 18px;
}

body.kk-site .kk-hero h1 {
    margin: 0;
    font-size: clamp(1.9rem, 4vw, 3.2rem);
    line-height: 1.08;
}

body.kk-site .kk-hero p {
    color: #4f5f6c;
    max-width: 62ch;
}

body.kk-site .kk-hero-media {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

body.kk-site .kk-hero-media-card {
    border-radius: 18px;
    border: 1px solid rgba(117, 86, 57, 0.26);
    padding: 14px;
    box-shadow: 0 12px 24px rgba(89, 63, 37, 0.12);
}

body.kk-site .kk-hero-media-card h3 {
    margin: 0;
    font-size: 1.02rem;
}

body.kk-site .kk-hero-media-card p {
    margin: 8px 0 0;
    font-size: 0.87rem;
    color: #5b6b79;
}

body.kk-site .kk-hero-media-card.wood {
    background:
        linear-gradient(155deg, rgba(197, 162, 125, 0.22), rgba(250, 239, 223, 0.9)),
        repeating-linear-gradient(
            -35deg,
            rgba(156, 113, 73, 0.12) 0 10px,
            rgba(255, 255, 255, 0) 10px 20px
        );
}

body.kk-site .kk-hero-media-card.stone {
    background:
        linear-gradient(150deg, rgba(226, 217, 205, 0.85), rgba(252, 250, 246, 0.94)),
        radial-gradient(circle at 82% 16%, rgba(139, 99, 63, 0.14), transparent 62%);
}

body.kk-site .kk-hero-actions {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

body.kk-site .kk-hero-actions .app-btn {
    min-height: 44px;
}

body.kk-site .app-btn.primary {
    background: linear-gradient(135deg, #a4764e, #7c5635);
    border-color: #7c5635;
    color: #fff8f0;
    box-shadow: 0 12px 22px rgba(89, 63, 37, 0.22);
}

body.kk-site .app-btn.ghost {
    background: rgba(255, 252, 246, 0.88);
    border-color: rgba(117, 86, 57, 0.32);
    color: #2f3d47;
}

body.kk-site .app-btn:hover {
    transform: translateY(-1px);
}

body.kk-site .kk-stat-row {
    margin-top: 16px;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.kk-site .kk-stat-row > div {
    border-radius: 16px;
    border: 1px solid rgba(117, 86, 57, 0.2);
    background: rgba(255, 250, 242, 0.86);
    padding: 10px 12px;
    display: grid;
    gap: 4px;
}

body.kk-site .kk-stat-row strong {
    font-size: 0.95rem;
}

body.kk-site .kk-stat-row span {
    font-size: 0.83rem;
    color: #647381;
}

body.kk-site .kk-hero-panel {
    border-radius: 20px;
    border: 1px solid rgba(117, 86, 57, 0.25);
    background: linear-gradient(145deg, rgba(245, 235, 219, 0.72), rgba(255, 250, 242, 0.88));
    padding: 18px;
}

body.kk-site .kk-hero-panel h2 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

body.kk-site .kk-hero-list {
    display: grid;
    gap: 10px;
}

body.kk-site .kk-hero-list article {
    border-radius: 14px;
    border: 1px solid rgba(117, 86, 57, 0.2);
    background: rgba(255, 252, 246, 0.84);
    padding: 10px 12px;
}

body.kk-site .kk-hero-list h3 {
    margin: 0 0 4px;
    font-size: 0.98rem;
}

body.kk-site .kk-hero-list p {
    margin: 0;
    font-size: 0.85rem;
    color: #617180;
}

body.kk-site .kk-showcase-header {
    margin-bottom: 12px;
}

body.kk-site .kk-showcase-header h2 {
    margin: 0;
}

body.kk-site .kk-tag {
    display: inline-flex;
    align-items: center;
    margin-bottom: 8px;
    border-radius: 999px;
    border: 1px solid rgba(117, 86, 57, 0.28);
    background: rgba(247, 238, 225, 0.82);
    color: #6e4d31;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 9px;
    font-weight: 700;
}

body.kk-site .kk-collection-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

body.kk-site .kk-collection-card {
    border-radius: 16px;
    border: 1px solid rgba(117, 86, 57, 0.2);
    background: rgba(255, 253, 248, 0.9);
    padding: 14px;
    box-shadow: 0 10px 22px rgba(89, 63, 37, 0.1);
}

body.kk-site .kk-collection-card h3 {
    margin: 0;
    font-size: 1rem;
}

body.kk-site .kk-collection-card p {
    margin: 8px 0 0;
    color: #617180;
}

body.kk-site .kk-style-grid,
body.kk-site .kk-surface-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

body.kk-site .kk-style-card,
body.kk-site .kk-surface-card {
    border-radius: 16px;
    border: 1px solid rgba(117, 86, 57, 0.22);
    background: linear-gradient(150deg, rgba(255, 253, 248, 0.96), rgba(247, 239, 227, 0.88));
    padding: 14px;
    box-shadow: 0 10px 20px rgba(89, 63, 37, 0.1);
}

body.kk-site .kk-style-card h3,
body.kk-site .kk-surface-card h3 {
    margin: 0;
    font-size: 1rem;
}

body.kk-site .kk-style-card p,
body.kk-site .kk-surface-card p {
    margin: 8px 0 0;
    color: #617180;
}

body.kk-site .kk-chip-row {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.kk-site .kk-process-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

body.kk-site .kk-process-grid article {
    border-radius: 16px;
    border: 1px solid rgba(117, 86, 57, 0.2);
    background: rgba(255, 252, 246, 0.92);
    padding: 14px;
}

body.kk-site .kk-process-grid span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: linear-gradient(145deg, #a4764e, #7c5635);
    color: #fff9f0;
    font-weight: 700;
    font-size: 0.82rem;
}

body.kk-site .kk-process-grid h3 {
    margin: 10px 0 6px;
    font-size: 1rem;
}

body.kk-site .kk-process-grid p {
    margin: 0;
    color: #617180;
}

body.kk-site .kk-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

body.kk-site .kk-actions-copy {
    max-width: 64ch;
}

body.kk-site .kk-actions h2 {
    margin: 0;
    font-size: clamp(1.35rem, 2.2vw, 1.9rem);
}

body.kk-site .kk-actions p {
    margin: 8px 0 0;
    color: #617180;
}

@media (max-width: 980px) {
    body.kk-site .kk-hero {
        grid-template-columns: 1fr;
    }

    body.kk-site .kk-hero-media {
        grid-template-columns: 1fr;
    }

    body.kk-site .kk-stat-row {
        grid-template-columns: 1fr;
    }

    body.kk-site .kk-actions {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 700px) {
    body.app-mode .navbar-brand-text,
    body.kk-site .navbar-brand-text {
        display: none;
    }

    body.kk-site .kk-site-nav .navbar-nav:last-child {
        margin-top: 10px;
    }
}

/* 2026-02-24: Keith app refinement pass (hub-wide visual consistency). */
body.app-mode .app-shell {
    grid-template-columns: minmax(214px, 248px) minmax(0, 1fr);
    gap: clamp(20px, 2.4vw, 34px);
    padding: clamp(22px, 2.6vw, 40px);
    border-radius: 34px;
    border-color: rgba(117, 86, 57, 0.26);
    background:
        radial-gradient(880px 520px at -8% -22%, rgba(163, 122, 82, 0.2), transparent 64%),
        radial-gradient(760px 500px at 108% -16%, rgba(197, 175, 143, 0.25), transparent 62%),
        linear-gradient(166deg, rgba(255, 252, 246, 0.98), rgba(246, 238, 226, 0.95));
}

body.app-mode .app-main {
    gap: clamp(20px, 2.3vw, 30px);
}

body.app-mode .app-header {
    padding: clamp(16px, 1.8vw, 22px);
    border-radius: 24px;
    border: 1px solid rgba(117, 86, 57, 0.24);
    background:
        linear-gradient(152deg, rgba(255, 253, 248, 0.96), rgba(248, 241, 231, 0.9));
    box-shadow: 0 12px 30px rgba(89, 63, 37, 0.13);
}

body.app-mode .app-header h1 {
    margin-top: 4px;
    margin-bottom: 8px;
    font-size: clamp(1.72rem, 3vw, 2.58rem);
    letter-spacing: -0.015em;
}

body.app-mode .app-subtitle {
    max-width: 72ch;
    color: #596978;
}

body.app-mode .app-actions .app-btn {
    min-height: 44px;
    border-radius: 999px;
    font-weight: 700;
}

body.app-mode .app-kpis {
    margin-top: 14px;
    gap: 10px;
}

body.app-mode .app-kpi {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 12px 14px;
    background:
        linear-gradient(150deg, rgba(255, 255, 252, 0.96), rgba(247, 239, 228, 0.9));
}

body.app-mode .app-kpi::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(124, 86, 54, 0.82), rgba(173, 133, 92, 0.15));
}

body.app-mode .app-kpi span {
    display: block;
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 0.66rem;
    color: #6d7d89;
}

body.app-mode .app-kpi strong {
    font-size: 1.14rem;
    color: #24323d;
}

body.app-mode .app-grid {
    grid-template-columns: repeat(auto-fit, minmax(298px, 1fr));
    gap: 16px;
}

body.app-mode .app-card,
body.app-mode .form-card,
body.app-mode .panel {
    border-radius: 21px;
    padding: clamp(18px, 2.1vw, 26px);
}

body.app-mode .app-card.card-link {
    position: relative;
    overflow: hidden;
}

body.app-mode .app-card.card-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(111, 77, 48, 0.92), rgba(196, 169, 131, 0.24));
}

body.app-mode .app-card.card-link:hover {
    transform: translateY(-4px);
    border-color: rgba(117, 86, 57, 0.34);
    box-shadow: 0 18px 34px rgba(89, 63, 37, 0.19);
}

body.app-mode .card-header {
    margin-bottom: 12px;
}

body.app-mode .app-shell .card-header h3 {
    font-size: 1.14rem;
    letter-spacing: 0.01em;
}

body.app-mode .pill-row {
    gap: 8px;
}

body.app-mode .pill {
    border-radius: 999px;
    padding: 0.42rem 0.74rem;
    font-weight: 650;
}

body.app-mode .hub-tabs .pill {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.app-mode .hub-tabs .pill.active {
    background: linear-gradient(135deg, #9f734b, #7a5535);
    border-color: #7a5535;
    color: #fff8f0;
}

body.app-mode .app-shell .badge.soft {
    border-radius: 999px;
    font-size: 0.7rem;
}

body.app-mode .table-wrap {
    border-radius: 16px;
    border: 1px solid rgba(117, 86, 57, 0.17);
    background: rgba(255, 252, 247, 0.86);
}

body.app-mode .dark-table th {
    background: rgba(246, 237, 222, 0.95);
    color: #5f6f7d;
}

body.app-mode .dark-table td {
    color: #24323d;
}

body.app-mode .dark-table tr:hover td {
    background: rgba(241, 230, 210, 0.55);
}

body.app-mode .app-search {
    max-width: 640px;
    border-radius: 18px;
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(255, 255, 253, 0.98), rgba(248, 241, 233, 0.95));
    border-color: rgba(117, 86, 57, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84), 0 12px 24px rgba(89, 63, 37, 0.08);
}

body.app-mode .app-search:focus-within {
    border-color: rgba(111, 77, 48, 0.58);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 0 0 4px rgba(139, 99, 63, 0.14),
        0 14px 28px rgba(89, 63, 37, 0.12);
}

body.app-mode .app-search input {
    color: #22313d;
    padding: 10px 10px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

body.app-mode .app-search input::placeholder {
    color: rgba(95, 112, 128, 0.78);
}

body.app-mode .app-search button {
    min-height: 44px;
    border-radius: 999px;
    border: 1px solid #7c5635;
    background: linear-gradient(135deg, #a4764e, #7c5635);
    color: #fff8f0;
}

body.app-mode .app-select {
    min-height: 52px;
    padding: 12px 14px;
    border-radius: 16px;
    border-color: rgba(117, 86, 57, 0.32);
    background: linear-gradient(180deg, rgba(255, 255, 253, 0.98), rgba(248, 241, 233, 0.95));
    color: #22313c;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84), 0 10px 20px rgba(89, 63, 37, 0.08);
}

body.app-mode .app-select:focus,
body.app-mode .app-select:focus-visible {
    outline: none;
    border-color: rgba(111, 77, 48, 0.58);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 0 0 4px rgba(139, 99, 63, 0.14),
        0 14px 28px rgba(89, 63, 37, 0.12);
}

body.app-mode .app-rail {
    border-radius: 24px;
    padding: 18px 16px;
}

body.app-mode .rail-nav {
    gap: 8px;
}

body.app-mode .rail-link {
    padding: 11px 12px;
    border-radius: 12px;
}

body.app-mode .app-shell.app-home-dashboard .app-header {
    border-color: rgba(135, 95, 60, 0.31);
}

body.app-mode .app-shell.app-work-hub .app-header {
    border-color: rgba(117, 86, 57, 0.31);
}

body.app-mode .app-shell.app-inventory .app-header {
    border-color: rgba(100, 122, 103, 0.34);
}

body.app-mode .app-shell.app-ops-hub .app-header {
    border-color: rgba(89, 113, 128, 0.34);
}

body.app-mode .app-shell.app-admin-hub .app-header {
    border-color: rgba(127, 99, 71, 0.34);
}

body.app-mode .app-shell.app-ops-hub {
    background:
        radial-gradient(860px 500px at -6% -24%, rgba(112, 142, 159, 0.19), transparent 64%),
        radial-gradient(740px 470px at 106% -16%, rgba(178, 205, 191, 0.18), transparent 64%),
        linear-gradient(165deg, rgba(251, 247, 240, 0.96), rgba(244, 237, 225, 0.94));
}

@media (max-width: 1100px) {
    body.app-mode .app-shell {
        grid-template-columns: 1fr;
        border-radius: 26px;
    }
}

@media (max-width: 700px) {
    body.app-mode .app-header {
        border-radius: 18px;
    }

    body.app-mode .app-actions .app-btn {
        width: 100%;
    }
}

/* 2026-02-24: SMKK readability refresh (wood-grain rail, creamy content, royal-blue accent). */
body.kk-brand.app-mode {
    --kk-royal-500: #315fc7;
    --kk-royal-600: #1f46ad;
    --kk-royal-700: #17348a;
    color: #1f2d38;
    background:
        linear-gradient(132deg, rgba(247, 238, 223, 0.96), rgba(244, 234, 216, 0.9)),
        repeating-linear-gradient(
            40deg,
            rgba(152, 112, 72, 0.06) 0 14px,
            rgba(255, 255, 255, 0) 14px 28px
        );
}

body.kk-brand.app-mode .app-shell {
    --app-accent: var(--kk-royal-600);
    --app-accent-strong: var(--kk-royal-700);
    --app-border: rgba(31, 70, 173, 0.22);
    --app-ink: #1f2d38;
    --app-muted: #5f6f7d;
    background: linear-gradient(162deg, rgba(255, 250, 242, 0.98), rgba(244, 234, 216, 0.94));
    border-color: rgba(31, 70, 173, 0.2);
    box-shadow: 0 24px 52px rgba(34, 48, 68, 0.16);
}

body.kk-brand.app-mode .app-shell::before {
    background: radial-gradient(circle at 0% 0%, rgba(31, 70, 173, 0.16), transparent 58%);
}

body.kk-brand.app-mode .app-shell::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02));
    opacity: 0.42;
}

body.kk-brand.app-mode .app-rail {
    background:
        linear-gradient(170deg, rgba(127, 91, 57, 0.98), rgba(92, 62, 36, 0.97)),
        repeating-linear-gradient(
            24deg,
            rgba(250, 226, 188, 0.16) 0 8px,
            rgba(255, 255, 255, 0) 8px 16px
        ),
        repeating-linear-gradient(
            -18deg,
            rgba(70, 47, 28, 0.22) 0 5px,
            rgba(255, 255, 255, 0) 5px 12px
        );
    border-color: rgba(255, 239, 214, 0.32);
    color: #fff9f0;
    box-shadow: 0 22px 40px rgba(66, 43, 24, 0.4);
    padding-top: 92px;
}

body.kk-brand.app-mode .app-main {
    background: linear-gradient(165deg, rgba(255, 252, 246, 0.94), rgba(246, 236, 219, 0.88));
    border: 1px solid rgba(31, 70, 173, 0.14);
    border-radius: 20px;
    padding: clamp(16px, 1.9vw, 24px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

body.kk-brand.app-mode .app-card,
body.kk-brand.app-mode .app-kpi,
body.kk-brand.app-mode .form-card,
body.kk-brand.app-mode .panel {
    background: linear-gradient(150deg, rgba(255, 255, 252, 0.97), rgba(248, 240, 227, 0.94));
    border-color: rgba(31, 70, 173, 0.14);
}

body.kk-brand.app-mode a {
    color: var(--kk-royal-600);
}

body.kk-brand.app-mode .app-btn.primary,
body.kk-brand.app-mode .btn.btn-primary,
body.kk-brand.app-mode .app-search button,
body.kk-brand.app-mode .hub-tabs .pill.active {
    background: linear-gradient(135deg, var(--kk-royal-500), var(--kk-royal-700));
    border-color: var(--kk-royal-700);
    color: #f8fbff;
    box-shadow: 0 12px 24px rgba(23, 52, 138, 0.28);
}

body.kk-brand.app-mode .rail-link.active {
    background: rgba(49, 95, 199, 0.28);
    border-color: rgba(171, 198, 255, 0.58);
}

body.kk-brand.app-mode .rail-link:hover {
    background: rgba(49, 95, 199, 0.2);
    border-color: rgba(171, 198, 255, 0.48);
}

body.kk-brand.app-mode .rail-logo {
    width: 132px;
    height: 40px;
    border-radius: 10px;
    background: rgba(242, 248, 255, 0.96) url("../images/kk-email-signature-640x180.png") left center / contain no-repeat;
    border: 1px solid rgba(194, 218, 255, 0.62);
    box-shadow: 0 8px 18px rgba(17, 37, 95, 0.3);
}

@media (max-width: 700px) {
    body.kk-brand.app-mode .app-main {
        padding: 14px;
    }

    body.kk-brand.app-mode .rail-logo {
        width: 118px;
        height: 36px;
    }
}

/* 2026-02-24: readability hardening - keep KK text black on light surfaces. */
body.kk-brand.kk-site h1,
body.kk-brand.kk-site h2,
body.kk-brand.kk-site h3,
body.kk-brand.kk-site h4,
body.kk-brand.kk-site h5,
body.kk-brand.kk-site h6,
body.kk-brand.kk-site p,
body.kk-brand.kk-site li,
body.kk-brand.kk-site label,
body.kk-brand.kk-site span,
body.kk-brand.kk-site a,
body.kk-brand.kk-site .muted,
body.kk-brand.kk-site .text-muted,
body.kk-brand.kk-site .kk-kicker,
body.kk-brand.kk-site .kk-tag {
    color: #111 !important;
}

body.kk-brand.app-mode .app-main,
body.kk-brand.app-mode .app-main h1,
body.kk-brand.app-mode .app-main h2,
body.kk-brand.app-mode .app-main h3,
body.kk-brand.app-mode .app-main h4,
body.kk-brand.app-mode .app-main h5,
body.kk-brand.app-mode .app-main h6,
body.kk-brand.app-mode .app-main p,
body.kk-brand.app-mode .app-main li,
body.kk-brand.app-mode .app-main label,
body.kk-brand.app-mode .app-main span,
body.kk-brand.app-mode .app-main a,
body.kk-brand.app-mode .app-main .muted,
body.kk-brand.app-mode .app-main .text-muted,
body.kk-brand.app-mode .app-main .app-subtitle,
body.kk-brand.app-mode .app-main .app-eyebrow,
body.kk-brand.app-mode .app-main .dark-table th,
body.kk-brand.app-mode .app-main .dark-table td {
    color: #111 !important;
}

/* 2026-02-24: force non-blue text for SMKK readability. */
body.kk-brand a,
body.kk-brand .app-main a,
body.kk-brand .app-main .dark-table a,
body.kk-brand .app-main .pill,
body.kk-brand .app-main .badge,
body.kk-brand .app-main .command-path,
body.kk-brand .app-main .app-kpi span,
body.kk-brand .app-main .rail-value {
    color: #111 !important;
}

body.kk-brand .app-main a:hover,
body.kk-brand .app-main .dark-table a:hover {
    color: #111 !important;
}

/* 2026-02-24: readability hard lock - black text in content panes, blue used as accent only. */
body.kk-brand.app-mode .app-main,
body.kk-brand.app-mode .app-main h1,
body.kk-brand.app-mode .app-main h2,
body.kk-brand.app-mode .app-main h3,
body.kk-brand.app-mode .app-main h4,
body.kk-brand.app-mode .app-main h5,
body.kk-brand.app-mode .app-main h6,
body.kk-brand.app-mode .app-main p,
body.kk-brand.app-mode .app-main li,
body.kk-brand.app-mode .app-main span,
body.kk-brand.app-mode .app-main small,
body.kk-brand.app-mode .app-main label,
body.kk-brand.app-mode .app-main strong,
body.kk-brand.app-mode .app-main em,
body.kk-brand.app-mode .app-main a,
body.kk-brand.app-mode .app-main .muted,
body.kk-brand.app-mode .app-main .text-muted,
body.kk-brand.app-mode .app-main .app-subtitle,
body.kk-brand.app-mode .app-main .app-eyebrow,
body.kk-brand.app-mode .app-main .badge,
body.kk-brand.app-mode .app-main .pill,
body.kk-brand.app-mode .app-main .dark-table th,
body.kk-brand.app-mode .app-main .dark-table td {
    color: #111 !important;
}

body.kk-brand.app-mode .app-main a:not(.app-btn):not(.pill) {
    text-decoration-color: rgba(31, 70, 173, 0.36);
}

body.kk-brand.app-mode .app-main a:not(.app-btn):not(.pill):hover {
    text-decoration-color: rgba(23, 52, 138, 0.62);
}

body.kk-brand.app-mode .app-btn.primary,
body.kk-brand.app-mode .btn.btn-primary,
body.kk-brand.app-mode .app-search button,
body.kk-brand.app-mode .hub-tabs .pill.active {
    color: #f8fbff !important;
}

body.kk-brand.app-mode .app-rail,
body.kk-brand.app-mode .app-rail .rail-title,
body.kk-brand.app-mode .app-rail .rail-subtitle,
body.kk-brand.app-mode .app-rail .rail-link,
body.kk-brand.app-mode .app-rail .rail-footer,
body.kk-brand.app-mode .app-rail .rail-label,
body.kk-brand.app-mode .app-rail .rail-value {
    color: #fff7ec !important;
}

body.kk-brand.app-mode .app-rail .rail-link.active,
body.kk-brand.app-mode .app-rail .rail-link:hover {
    border-color: rgba(175, 199, 255, 0.7);
    box-shadow: inset 0 0 0 1px rgba(49, 95, 199, 0.2);
}

body.kk-brand.app-mode .app-rail .rail-logo {
    color: transparent !important;
    text-indent: -9999px;
}

/* 2026-02-25: final polish pass (homepage + webapp readability + brand consistency). */
:root {
    --kk-royal-400: #3f73de;
    --kk-royal-500: #2e5ec6;
    --kk-royal-600: #1f46ad;
    --kk-royal-700: #17348a;
    --kk-wood-dark: #684322;
    --kk-wood-mid: #8b623f;
    --kk-wood-line: rgba(111, 77, 48, 0.32);
    --kk-cream-050: #fffaf2;
    --kk-cream-100: #f8efe1;
    --kk-cream-200: #efe2cf;
}

body.kk-brand .navbar .navbar-brand::before {
    display: none;
}

body.kk-brand .app-btn.primary,
body.kk-brand .btn.btn-primary {
    background: linear-gradient(135deg, var(--kk-royal-400), var(--kk-royal-700));
    border-color: var(--kk-royal-700);
    color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(23, 52, 138, 0.28);
}

body.kk-brand .app-btn.ghost,
body.kk-brand .btn.ghost {
    background: rgba(255, 255, 255, 0.84);
    border-color: rgba(31, 70, 173, 0.3);
    color: #111111 !important;
}

body.kk-brand.kk-site {
    color: #111111;
    background:
        radial-gradient(1200px 680px at 0% -18%, rgba(140, 102, 69, 0.18), transparent 64%),
        radial-gradient(980px 640px at 100% -10%, rgba(231, 219, 201, 0.5), transparent 62%),
        linear-gradient(170deg, #faf5ed 0%, #f3e9dc 52%, #ebddcb 100%);
}

body.kk-brand.kk-site .kk-showcase {
    border-color: rgba(111, 77, 48, 0.24);
    box-shadow: 0 16px 36px rgba(48, 34, 23, 0.12);
}

body.kk-brand.kk-site .kk-hero {
    gap: 16px;
    align-items: stretch;
}

body.kk-brand.kk-site .kk-hero-copy {
    border-radius: 24px;
    border: 1px solid var(--kk-wood-line);
    padding: clamp(18px, 2.4vw, 30px);
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.05)),
        repeating-linear-gradient(
            -22deg,
            rgba(122, 82, 50, 0.2) 0 12px,
            rgba(156, 111, 72, 0.1) 12px 24px,
            rgba(198, 159, 119, 0.1) 24px 30px
        );
    box-shadow: 0 18px 36px rgba(54, 35, 19, 0.2);
}

body.kk-brand.kk-site .kk-hero-media {
    border-radius: 24px;
    border: 1px solid rgba(111, 77, 48, 0.2);
    padding: 12px;
    background: linear-gradient(165deg, rgba(255, 252, 247, 0.98), rgba(246, 236, 219, 0.95));
}

body.kk-brand.kk-site .kk-hero-brand {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

body.kk-brand.kk-site .kk-hero-brand img {
    width: min(250px, 100%);
    height: auto;
    filter: drop-shadow(0 6px 14px rgba(17, 37, 95, 0.22));
}

body.kk-brand.kk-site .kk-hero-brand-note {
    margin: 6px 0 0;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #111111 !important;
}

body.kk-brand.kk-site .kk-hero-chip-row {
    margin-top: 12px;
}

body.kk-brand.kk-site .kk-hero-chip-row .pill {
    border: 1px solid rgba(31, 70, 173, 0.24);
    background: rgba(255, 255, 255, 0.72);
    color: #111111 !important;
}

body.kk-brand.kk-site .kk-hero-media-card,
body.kk-brand.kk-site .kk-hero-panel,
body.kk-brand.kk-site .kk-stat-row > div,
body.kk-brand.kk-site .kk-collection-card,
body.kk-brand.kk-site .kk-style-card,
body.kk-brand.kk-site .kk-surface-card,
body.kk-brand.kk-site .kk-process-grid article {
    border-color: rgba(31, 70, 173, 0.16);
    background: rgba(255, 255, 255, 0.78);
}

body.kk-brand.kk-site .kk-tag {
    border-color: rgba(31, 70, 173, 0.28);
    background: rgba(233, 240, 255, 0.68);
    color: #111111 !important;
}

body.kk-brand.kk-site h1,
body.kk-brand.kk-site h2,
body.kk-brand.kk-site h3,
body.kk-brand.kk-site h4,
body.kk-brand.kk-site h5,
body.kk-brand.kk-site h6,
body.kk-brand.kk-site p,
body.kk-brand.kk-site li,
body.kk-brand.kk-site label,
body.kk-brand.kk-site span,
body.kk-brand.kk-site a,
body.kk-brand.kk-site .muted,
body.kk-brand.kk-site .text-muted,
body.kk-brand.kk-site .kk-kicker {
    color: #111111 !important;
}

body.kk-brand.kk-site .app-btn.primary {
    color: #ffffff !important;
}

body.kk-brand.app-mode {
    color: #111111;
    background:
        radial-gradient(1200px 700px at 0% -8%, rgba(163, 114, 72, 0.22), transparent 58%),
        radial-gradient(880px 620px at 100% 0%, rgba(52, 88, 164, 0.1), transparent 56%),
        linear-gradient(90deg, rgba(143, 102, 68, 0.16) 0 23%, rgba(251, 245, 235, 0.94) 23% 100%),
        linear-gradient(170deg, #f3e8d8 0%, #efe1cd 52%, #e4d2bb 100%);
}

body.kk-brand.app-mode .app-commandbar {
    background: rgba(250, 243, 231, 0.95);
    border-bottom: 1px solid rgba(111, 77, 48, 0.25);
}

body.kk-brand.app-mode .app-commandbar-nav .pill {
    color: #111111 !important;
}

body.kk-brand.app-mode .command-input-shell {
    background: linear-gradient(180deg, rgba(255, 251, 245, 0.98), rgba(246, 237, 223, 0.95));
    border-color: rgba(117, 86, 57, 0.26);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 14px 28px rgba(89, 63, 37, 0.08);
}

body.kk-brand.app-mode .command-path,
body.kk-brand.app-mode #app-command-input,
body.kk-brand.app-mode .command-row {
    color: #111111 !important;
}

body.kk-brand.app-mode .command-icon,
body.kk-brand.app-mode .command-hint,
body.kk-brand.app-mode .command-sheet-close {
    background: linear-gradient(180deg, rgba(250, 241, 228, 0.98), rgba(239, 225, 202, 0.92));
    border-color: rgba(117, 86, 57, 0.22);
    color: #6e4d31;
}

body.kk-brand.app-mode .command-results,
body.kk-brand.app-mode .command-sheet-panel {
    background:
        linear-gradient(180deg, rgba(255, 250, 243, 0.98), rgba(245, 235, 219, 0.96)),
        repeating-linear-gradient(
            -20deg,
            rgba(150, 111, 73, 0.04) 0 10px,
            rgba(255, 255, 255, 0) 10px 20px
        );
    border-color: rgba(117, 86, 57, 0.18);
    box-shadow: 0 20px 40px rgba(89, 63, 37, 0.18);
}

body.kk-brand.app-mode .command-empty {
    border-color: rgba(117, 86, 57, 0.2);
    background: rgba(251, 246, 238, 0.88);
    color: #6b5741;
}

body.kk-brand.app-mode .command-row {
    border-color: rgba(117, 86, 57, 0.14);
    background: linear-gradient(160deg, rgba(255, 253, 248, 0.94), rgba(244, 234, 218, 0.9));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

body.kk-brand.app-mode .command-row:hover,
body.kk-brand.app-mode .command-row.active {
    border-color: rgba(117, 86, 57, 0.34);
    background: linear-gradient(160deg, rgba(249, 239, 225, 0.98), rgba(240, 226, 205, 0.94));
}

body.kk-brand.app-mode .command-badge {
    background: rgba(231, 216, 191, 0.8);
    border-color: rgba(117, 86, 57, 0.18);
    color: #6e4d31;
}

body.kk-brand.app-mode .kk-mobile-dock {
    background:
        linear-gradient(180deg, rgba(255, 248, 238, 0.96), rgba(239, 226, 202, 0.94)),
        repeating-linear-gradient(
            -18deg,
            rgba(150, 111, 73, 0.05) 0 10px,
            rgba(255, 255, 255, 0) 10px 20px
        );
    border-color: rgba(117, 86, 57, 0.22);
    box-shadow: 0 16px 34px rgba(89, 63, 37, 0.22);
}

body.kk-brand.app-mode .kk-mobile-dock-link {
    background: linear-gradient(180deg, rgba(255, 252, 247, 0.96), rgba(244, 234, 218, 0.92));
    border-color: rgba(117, 86, 57, 0.18);
    color: #3a2e23;
}

body.kk-brand.app-mode .kk-mobile-dock-link.active {
    background: linear-gradient(135deg, #8e623e, #6f4a2c);
    border-color: rgba(117, 86, 57, 0.48);
    color: #fff8ef;
}

body.kk-brand.app-mode .app-shell {
    grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
    border-color: rgba(111, 77, 48, 0.2);
    position: relative;
    overflow: hidden;
    transition: grid-template-columns 180ms ease, box-shadow 180ms ease, background 180ms ease;
    background:
        radial-gradient(circle at 14% 10%, rgba(235, 182, 104, 0.3), transparent 22%),
        radial-gradient(circle at 0% 100%, rgba(44, 87, 186, 0.22), transparent 34%),
        radial-gradient(circle at 100% 0%, rgba(33, 73, 161, 0.08), transparent 30%),
        linear-gradient(90deg, rgba(48, 31, 19, 0.98) 0 28%, rgba(251, 247, 239, 0.98) 28% 100%),
        repeating-linear-gradient(
            -18deg,
            rgba(139, 99, 63, 0.08) 0 9px,
            rgba(255, 255, 255, 0) 9px 18px
        ),
        linear-gradient(164deg, rgba(255, 252, 247, 0.98), rgba(241, 228, 208, 0.95));
    box-shadow: 0 24px 52px rgba(44, 32, 22, 0.24);
}

body.kk-brand.app-mode .app-shell.is-rail-collapsed {
    grid-template-columns: minmax(0, 1fr) !important;
    overflow-x: hidden;
    gap: 0;
    padding-inline: 0;
}

body.kk-brand.app-mode .app-rail {
    background:
        linear-gradient(180deg, rgba(74, 48, 28, 0.995), rgba(38, 25, 18, 0.99)),
        radial-gradient(circle at top left, rgba(224, 167, 90, 0.24), transparent 34%),
        radial-gradient(circle at bottom right, rgba(41, 87, 182, 0.18), transparent 32%),
        repeating-linear-gradient(
            24deg,
            rgba(247, 225, 188, 0.1) 0 8px,
            rgba(255, 255, 255, 0) 8px 16px
        ),
        repeating-linear-gradient(
            -17deg,
            rgba(17, 10, 8, 0.38) 0 6px,
            rgba(255, 255, 255, 0) 6px 12px
        );
    border-color: rgba(255, 230, 194, 0.24);
    color: #fff8ee !important;
    padding: 18px 16px 18px;
    gap: 14px;
    box-shadow: 0 24px 42px rgba(30, 18, 13, 0.54), inset -1px 0 0 rgba(255, 245, 225, 0.06), inset 0 1px 0 rgba(255, 247, 233, 0.08);
    min-width: 0;
    transition: opacity 180ms ease, transform 180ms ease, padding 180ms ease, margin 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

body.kk-brand.app-mode .app-shell.is-rail-collapsed .app-rail {
    opacity: 0;
    transform: translateX(-20px);
    padding: 0;
    margin: 0;
    border-width: 0;
    box-shadow: none;
    overflow: hidden;
    pointer-events: none;
}

body.kk-brand.app-mode .app-shell.is-rail-collapsed .app-main {
    min-width: 0;
    width: 100%;
}

body.kk-brand.app-mode .app-rail .rail-logo {
    width: 188px;
    height: 62px;
    border-radius: 14px;
    border: 1px solid rgba(255, 239, 214, 0.34);
    background: linear-gradient(180deg, rgba(255, 250, 242, 0.98), rgba(245, 233, 214, 0.94));
    box-shadow: 0 10px 20px rgba(57, 35, 18, 0.22);
}

body.kk-brand.app-mode .app-rail .rail-brand {
    position: static;
    margin: 0 0 8px;
    padding: 12px 12px 10px;
    border-radius: 18px;
    border: 1px solid rgba(255, 236, 207, 0.14);
    background: linear-gradient(180deg, rgba(255, 248, 237, 0.08), rgba(18, 11, 8, 0.08));
    box-shadow: inset 0 1px 0 rgba(255, 248, 237, 0.08);
    display: grid;
    justify-items: start;
    gap: 8px;
}

body.kk-brand.app-mode .app-rail .rail-title {
    display: none;
}

body.app-dashboard.kk-brand.app-mode .kk-app-header {
    margin-bottom: 10px;
}

body.app-dashboard.kk-brand.app-mode .kk-app-header-inner {
    grid-template-areas: "brand search utility";
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 12px 0 10px;
}

body.app-dashboard.kk-brand.app-mode .kk-app-brand-lockup {
    min-height: 58px;
    min-width: 178px;
    padding: 10px 14px;
    border-radius: 18px;
}

body.app-dashboard.kk-brand.app-mode .kk-app-brand-logo {
    height: 28px;
}

body.app-dashboard.kk-brand.app-mode .kk-app-command-layer .command-input-shell {
    min-height: 52px;
    padding: 8px 12px;
    border-radius: 16px;
}

body.app-dashboard.kk-brand.app-mode .kk-app-command-layer .command-icon,
body.app-dashboard.kk-brand.app-mode .kk-app-command-layer .command-hint {
    display: none;
}

body.app-dashboard.kk-brand.app-mode .kk-app-command-layer #app-command-input {
    font-size: 0.96rem;
    font-weight: 700;
}

body.app-dashboard.kk-brand.app-mode .kk-app-command-layer .command-hint {
    padding: 2px 7px;
}

body.app-dashboard.kk-brand.app-mode .kk-app-utility-row .app-request-cta {
    min-height: 50px;
    padding-inline: 16px;
    border-radius: 16px;
    font-size: 0.92rem;
}

body.app-dashboard.kk-brand.app-mode .app-home-dashboard {
    margin-top: 2px;
}

body.app-dashboard.kk-brand.app-mode .app-home-dashboard .dashboard-toolbar {
    padding: 18px 20px;
}

body.app-dashboard.kk-brand.app-mode .app-home-dashboard .dashboard-toolbar-top {
    gap: 10px;
}

body.app-dashboard.kk-brand.app-mode .app-home-dashboard .dashboard-toolbar-copy {
    gap: 4px;
}

body.app-dashboard.kk-brand.app-mode .app-home-dashboard .dashboard-toolbar-copy h1 {
    font-size: clamp(1.85rem, 2.6vw, 2.5rem);
}

body.app-dashboard.kk-brand.app-mode .app-home-dashboard .dashboard-toolbar-copy .app-subtitle {
    font-size: 0.96rem;
}

body.app-dashboard.kk-brand.app-mode .kk-app-links-shell {
    display: block;
}

body.app-dashboard.kk-brand.app-mode .app-home-dashboard .app-rail .rail-brand.rail-brand-dashboard {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 14px;
    background:
        linear-gradient(180deg, rgba(255, 248, 237, 0.2), rgba(255, 248, 237, 0.08)),
        radial-gradient(circle at top left, rgba(58, 103, 200, 0.18), transparent 58%);
}

body.app-dashboard.kk-brand.app-mode .app-home-dashboard .app-rail .rail-brand-badge {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(255, 236, 207, 0.28);
    background: linear-gradient(135deg, rgba(40, 88, 190, 0.96), rgba(27, 63, 152, 0.9));
    color: #fffaf3;
    font-weight: 900;
    letter-spacing: 0.08em;
    box-shadow: 0 10px 20px rgba(24, 52, 128, 0.2);
}

body.app-dashboard.kk-brand.app-mode .app-home-dashboard .app-rail .rail-brand-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

body.app-dashboard.kk-brand.app-mode .app-home-dashboard .app-rail .rail-kicker {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 244, 227, 0.76);
    font-weight: 800;
}

body.app-dashboard.kk-brand.app-mode .app-home-dashboard .app-rail .rail-title {
    display: block;
    margin: 0;
    color: #fffaf3;
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.2;
}

body.app-dashboard.kk-brand.app-mode .app-home-dashboard .app-rail .rail-subtitle {
    font-size: 0.76rem;
    line-height: 1.45;
    letter-spacing: 0.04em;
    text-transform: none;
    color: rgba(255, 244, 227, 0.86);
}

body.kk-brand.app-mode .app-rail .rail-subtitle {
    font-size: 0.69rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 244, 227, 0.82);
    font-weight: 700;
}

body.kk-brand.app-mode .app-rail .rail-brand.rail-brand-hub {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(12, 15, 22, 0.95), rgba(6, 8, 13, 1)),
        radial-gradient(circle at top left, rgba(26, 34, 52, 0.7), transparent 65%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 20px 40px rgba(5, 5, 12, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.kk-brand.app-mode .app-rail .rail-brand.rail-brand-hub .rail-brand-logo-mark {
    width: 66px;
    height: 66px;
    border-radius: 18px;
    display: block;
    border: 1px solid rgba(255, 236, 207, 0.28);
    background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(243, 233, 215, 0.94)),
        url("../images/keiths-kitchens-logo.svg") center / 84% no-repeat;
    box-shadow: 0 12px 24px rgba(24, 52, 128, 0.18);
}

body.kk-brand.app-mode .app-rail .rail-brand.rail-brand-hub .rail-brand-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

body.kk-brand.app-mode .app-rail .rail-brand.rail-brand-hub .rail-kicker {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 800;
}

body.kk-brand.app-mode .app-rail .rail-brand.rail-brand-hub .rail-title {
    display: block;
    margin: 0;
    color: #ffffff;
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.2;
}

body.kk-brand.app-mode .app-rail .rail-brand.rail-brand-hub .rail-subtitle {
    font-size: 0.76rem;
    line-height: 1.45;
    letter-spacing: 0.04em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.78);
    display: block;
}

body.kk-brand.app-mode .app-rail-toggle-inline,
body.kk-brand.app-mode .app-rail-peek {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    min-height: 42px;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 236, 207, 0.2);
    background:
        linear-gradient(180deg, rgba(255, 249, 238, 0.14), rgba(255, 249, 238, 0.06)),
        radial-gradient(circle at left center, rgba(214, 170, 96, 0.18), transparent 44%);
    color: #fff8ee;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow: 0 12px 24px rgba(17, 10, 8, 0.24), inset 0 1px 0 rgba(255, 247, 233, 0.1);
}

body.kk-brand.app-mode .app-rail-toggle-inline:hover,
body.kk-brand.app-mode .app-rail-toggle-inline:focus-visible,
body.kk-brand.app-mode .app-rail-peek:hover,
body.kk-brand.app-mode .app-rail-peek:focus-visible {
    color: #ffffff;
    border-color: rgba(255, 236, 207, 0.3);
    box-shadow: 0 16px 30px rgba(17, 10, 8, 0.32), inset 0 1px 0 rgba(255, 247, 233, 0.14);
}

body.kk-brand.app-mode .app-main > .app-rail-peek:first-child {
    margin-bottom: 2px;
}

body.kk-brand.app-mode .app-shell:not(.is-rail-collapsed) .app-rail-peek {
    display: none;
}

body.kk-brand.app-mode .app-rail .rail-nav {
    gap: 8px;
}

body.kk-brand.app-mode .app-rail .rail-hub-group {
    display: grid;
    gap: 10px;
    padding: 4px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 248, 236, 0.06), rgba(23, 14, 11, 0.12));
    border: 1px solid rgba(255, 236, 207, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 247, 233, 0.04);
}

body.kk-brand.app-mode .app-rail .rail-hub-group-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 236, 207, 0.16);
    border-radius: 15px;
    background:
        linear-gradient(180deg, rgba(255, 249, 238, 0.08), rgba(255, 249, 238, 0.03)),
        radial-gradient(circle at left center, rgba(207, 159, 84, 0.12), transparent 42%);
    color: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(10, 6, 5, 0.16), inset 0 1px 0 rgba(255, 247, 233, 0.08);
    transition: background 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

body.kk-brand.app-mode .app-rail .rail-hub-group-toggle:hover {
    transform: translateX(2px);
    background:
        linear-gradient(180deg, rgba(255, 249, 238, 0.14), rgba(255, 249, 238, 0.07)),
        radial-gradient(circle at left center, rgba(207, 159, 84, 0.16), transparent 44%);
    border-color: rgba(255, 236, 207, 0.24);
    box-shadow: 0 14px 28px rgba(10, 6, 5, 0.22), inset 0 1px 0 rgba(255, 247, 233, 0.12);
}

body.kk-brand.app-mode .app-rail .rail-hub-group-toggle:focus-visible {
    outline: 2px solid rgba(116, 165, 255, 0.72);
    outline-offset: 2px;
}

body.kk-brand.app-mode .app-rail .rail-hub-group-label {
    padding: 0 2px;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 241, 220, 0.8);
    font-weight: 800;
    flex: 1 1 auto;
    min-width: 0;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}

body.kk-brand.app-mode .app-rail .rail-hub-group.active .rail-hub-group-label,
body.kk-brand.app-mode .app-rail .rail-hub-group.is-open .rail-hub-group-label {
    color: rgba(255, 250, 244, 0.98);
}

body.kk-brand.app-mode .app-rail .rail-hub-group-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 236, 207, 0.22);
    background: linear-gradient(180deg, rgba(255, 248, 237, 0.18), rgba(255, 248, 237, 0.1));
    color: rgba(255, 248, 237, 0.96);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 247, 233, 0.12);
}

body.kk-brand.app-mode .app-rail .rail-hub-group-chevron {
    font-size: 0.98rem;
    color: rgba(255, 244, 227, 0.92);
    transition: transform 180ms ease;
}

body.kk-brand.app-mode .app-rail .rail-hub-group.is-open .rail-hub-group-chevron {
    transform: rotate(180deg);
}

body.kk-brand.app-mode .app-rail .rail-hub-group-links {
    display: grid;
    gap: 8px;
    padding: 0 4px 4px 12px;
}

body.kk-brand.app-mode .app-rail .rail-hub-group.is-open .rail-hub-group-toggle {
    background:
        linear-gradient(180deg, rgba(255, 249, 238, 0.18), rgba(255, 249, 238, 0.08)),
        radial-gradient(circle at left center, rgba(214, 170, 96, 0.2), transparent 46%);
    border-color: rgba(255, 236, 207, 0.28);
    box-shadow:
        0 18px 34px rgba(14, 8, 6, 0.24),
        inset 0 1px 0 rgba(255, 247, 233, 0.15),
        inset 3px 0 0 rgba(214, 170, 96, 0.55);
}

body.kk-brand.app-mode .app-rail .rail-link {
    border-radius: 14px;
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(255, 249, 238, 0.08), rgba(255, 249, 238, 0.03));
    border: 1px solid rgba(255, 236, 207, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 247, 233, 0.08);
}

body.kk-brand.app-mode .app-rail .rail-link:hover {
    transform: translateX(3px);
    background: linear-gradient(180deg, rgba(255, 249, 238, 0.16), rgba(255, 249, 238, 0.08));
    border-color: rgba(255, 236, 207, 0.26);
}

body.kk-brand.app-mode .app-rail .rail-link.active {
    background: linear-gradient(180deg, rgba(255, 248, 237, 0.24), rgba(255, 248, 237, 0.14));
    border-color: rgba(255, 236, 207, 0.34);
    box-shadow: 0 8px 18px rgba(57, 35, 18, 0.14);
}

body.kk-brand.app-mode .app-rail .rail-footer {
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 249, 238, 0.08), rgba(11, 7, 6, 0.14));
    border: 1px solid rgba(255, 236, 207, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 247, 233, 0.06);
}

body.kk-brand.app-mode .app-rail .rail-nav.rail-hub-stack {
    display: grid;
    gap: 12px;
}

body.kk-brand.app-mode .app-rail .rail-focus-card {
    display: grid;
    gap: 10px;
    padding: 16px 16px 15px;
    border-radius: 20px;
    border: 1px solid rgba(255, 236, 207, 0.2);
    background:
        linear-gradient(180deg, rgba(255, 249, 238, 0.14), rgba(17, 10, 8, 0.26)),
        radial-gradient(circle at top right, rgba(57, 109, 204, 0.34), transparent 42%),
        radial-gradient(circle at bottom left, rgba(227, 175, 97, 0.24), transparent 36%);
    box-shadow: 0 20px 34px rgba(18, 10, 7, 0.34), inset 0 1px 0 rgba(255, 247, 233, 0.12);
}

body.kk-brand.app-mode .app-rail .rail-focus-kicker {
    font-size: 0.64rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 241, 220, 0.72);
    font-weight: 800;
}

body.kk-brand.app-mode .app-rail .rail-focus-title {
    font-size: 1.1rem;
    line-height: 1.2;
    color: #fff9f0;
}

body.kk-brand.app-mode .app-rail .rail-focus-summary {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: rgba(255, 243, 225, 0.82);
}

body.kk-brand.app-mode .app-rail .rail-focus-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.kk-brand.app-mode .app-rail .rail-focus-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 236, 207, 0.18);
    background: rgba(255, 248, 237, 0.12);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 244, 227, 0.78);
}

body.kk-brand.app-mode .app-rail .rail-hub-section-label {
    margin-top: 2px;
    padding: 0 2px;
    font-size: 0.64rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 241, 220, 0.54);
    font-weight: 800;
}

body.kk-brand.app-mode .app-rail .rail-hub-card {
    display: grid;
    gap: 12px;
    padding: 14px 14px 13px;
    border-radius: 18px;
    border: 1px solid rgba(255, 236, 207, 0.16);
    background:
        linear-gradient(180deg, rgba(255, 249, 238, 0.12), rgba(17, 10, 8, 0.22)),
        radial-gradient(circle at top right, rgba(230, 175, 96, 0.18), transparent 44%),
        radial-gradient(circle at bottom left, rgba(46, 97, 193, 0.12), transparent 32%);
    box-shadow: 0 10px 22px rgba(18, 10, 7, 0.2), inset 0 1px 0 rgba(255, 247, 233, 0.06);
}

body.kk-brand.app-mode .app-rail .rail-hub-card.active {
    border-color: rgba(255, 236, 207, 0.34);
    background:
        linear-gradient(180deg, rgba(255, 249, 238, 0.18), rgba(17, 10, 8, 0.28)),
        radial-gradient(circle at top right, rgba(234, 184, 113, 0.24), transparent 46%),
        radial-gradient(circle at bottom left, rgba(57, 109, 204, 0.16), transparent 34%);
    box-shadow: 0 18px 30px rgba(18, 10, 7, 0.28), inset 0 1px 0 rgba(255, 247, 233, 0.12);
}

body.kk-brand.app-mode .app-rail .rail-hub-card.is-primary {
    gap: 14px;
    border-color: rgba(255, 236, 207, 0.24);
}

body.kk-brand.app-mode .app-rail .rail-hub-card.is-secondary {
    gap: 8px;
    padding: 11px 12px;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255, 249, 238, 0.09), rgba(17, 10, 8, 0.18)),
        radial-gradient(circle at top right, rgba(230, 175, 96, 0.1), transparent 40%);
}

body.kk-brand.app-mode .app-rail .rail-hub-heading {
    display: grid;
    gap: 6px;
}

body.kk-brand.app-mode .app-rail .rail-hub-kicker {
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 244, 227, 0.7);
    font-weight: 800;
}

body.kk-brand.app-mode .app-rail .rail-hub-title {
    font-size: 1rem;
    line-height: 1.2;
    color: #fff7eb;
}

body.kk-brand.app-mode .app-rail .rail-hub-context {
    font-size: 0.72rem;
    line-height: 1.45;
    color: rgba(255, 242, 222, 0.72);
    font-weight: 700;
}

body.kk-brand.app-mode .app-rail .rail-hub-summary {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(255, 243, 225, 0.8);
}

body.kk-brand.app-mode .app-rail .rail-hub-card.is-secondary .rail-hub-summary {
    font-size: 0.76rem;
    line-height: 1.38;
    color: rgba(255, 243, 225, 0.66);
}

body.kk-brand.app-mode .app-rail .rail-hub-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(76, 121, 214, 0.95), rgba(39, 84, 173, 0.96));
    border: 1px solid rgba(174, 208, 255, 0.24);
    box-shadow: 0 14px 24px rgba(18, 38, 91, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    color: #fffdf8;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

body.kk-brand.app-mode .app-rail .rail-hub-primary:hover,
body.kk-brand.app-mode .app-rail .rail-hub-primary:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 18px 30px rgba(18, 38, 91, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.24);
    filter: saturate(1.06);
    color: #ffffff;
}

body.kk-brand.app-mode .app-rail .rail-hub-tool-label {
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 239, 215, 0.54);
    font-weight: 800;
}

body.kk-brand.app-mode .app-rail .rail-hub-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

body.kk-brand.app-mode .app-rail .rail-hub-card.is-secondary .rail-hub-links {
    gap: 6px;
}

body.kk-brand.app-mode .app-rail .rail-hub-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 34px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 236, 207, 0.18);
    background: rgba(255, 248, 237, 0.14);
    color: #fff8ee;
    font-size: 0.77rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

body.kk-brand.app-mode .app-rail .rail-hub-link.active {
    border-color: rgba(255, 236, 207, 0.34);
    background: rgba(255, 248, 237, 0.26);
    box-shadow: inset 0 1px 0 rgba(255, 247, 233, 0.12);
}

body.kk-brand.app-mode .app-rail .rail-hub-card.is-secondary .rail-hub-link {
    min-height: 30px;
    padding: 6px 8px;
    font-size: 0.72rem;
}

body.kk-brand.app-mode .app-rail .rail-hub-link:hover,
body.kk-brand.app-mode .app-rail .rail-hub-link:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(255, 236, 207, 0.34);
    background: rgba(255, 248, 237, 0.22);
    color: #fffdf8;
}

body.kk-brand.app-mode .app-rail .rail-hub-meta {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 238, 214, 0.68);
}

body.kk-brand.app-mode .app-rail .rail-hub-card.is-secondary .rail-hub-meta {
    font-size: 0.66rem;
    color: rgba(255, 238, 214, 0.54);
}

body.kk-brand.app-mode .app-main {
    border: 1px solid rgba(111, 77, 48, 0.18);
    border-radius: 22px;
    padding: clamp(16px, 2vw, 24px);
    background:
        radial-gradient(circle at top right, rgba(31, 70, 173, 0.06), transparent 24%),
        linear-gradient(180deg, rgba(255, 251, 246, 0.98), rgba(246, 236, 220, 0.96)),
        repeating-linear-gradient(
            -16deg,
            rgba(150, 111, 73, 0.04) 0 12px,
            rgba(255, 255, 255, 0) 12px 24px
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 18px 34px rgba(89, 63, 37, 0.08);
}

body.device-phone.app-mode .app-rail .rail-brand.rail-brand-hub {
    padding: 12px;
    gap: 10px;
}

body.device-phone.app-mode .app-rail .rail-hub-links {
    grid-template-columns: 1fr;
}

body.kk-brand.app-mode .app-card,
body.kk-brand.app-mode .app-kpi,
body.kk-brand.app-mode .form-card,
body.kk-brand.app-mode .panel,
body.kk-brand.app-mode .table-wrap {
    border-color: rgba(117, 86, 57, 0.18);
    background:
        linear-gradient(155deg, rgba(255, 252, 247, 0.94), rgba(244, 234, 219, 0.9)),
        repeating-linear-gradient(
            -20deg,
            rgba(163, 120, 79, 0.04) 0 10px,
            rgba(255, 255, 255, 0) 10px 20px
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 10px 22px rgba(89, 63, 37, 0.09);
}

body.kk-brand.app-mode .app-kpi {
    background:
        linear-gradient(160deg, rgba(251, 243, 231, 0.96), rgba(244, 232, 214, 0.94)),
        radial-gradient(circle at top right, rgba(31, 70, 173, 0.07), transparent 30%);
}

body.kk-brand.app-mode .app-card.card-link::before {
    background: linear-gradient(90deg, rgba(124, 86, 54, 0.92), rgba(31, 70, 173, 0.22));
}

body.kk-brand.app-mode .app-main,
body.kk-brand.app-mode .app-main h1,
body.kk-brand.app-mode .app-main h2,
body.kk-brand.app-mode .app-main h3,
body.kk-brand.app-mode .app-main h4,
body.kk-brand.app-mode .app-main h5,
body.kk-brand.app-mode .app-main h6,
body.kk-brand.app-mode .app-main p,
body.kk-brand.app-mode .app-main li,
body.kk-brand.app-mode .app-main span,
body.kk-brand.app-mode .app-main small,
body.kk-brand.app-mode .app-main label,
body.kk-brand.app-mode .app-main strong,
body.kk-brand.app-mode .app-main em,
body.kk-brand.app-mode .app-main .muted,
body.kk-brand.app-mode .app-main .text-muted,
body.kk-brand.app-mode .app-main .app-subtitle,
body.kk-brand.app-mode .app-main .app-eyebrow {
    color: #111111 !important;
}

body.kk-brand.app-mode .app-main a:not(.app-btn):not(.pill) {
    color: #111111 !important;
    text-decoration: underline;
    text-decoration-color: rgba(31, 70, 173, 0.36);
}

body.kk-brand.app-mode .app-main a:not(.app-btn):not(.pill):hover {
    color: #111111 !important;
    text-decoration-color: rgba(23, 52, 138, 0.62);
}

body.kk-brand.app-mode .app-ai-strip {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) auto;
    gap: 18px;
    align-items: center;
    padding: 18px 20px;
    border-radius: 22px;
    border: 1px solid rgba(117, 86, 57, 0.18);
    background:
        linear-gradient(135deg, rgba(248, 241, 230, 0.98), rgba(255, 252, 247, 0.94)),
        radial-gradient(circle at top right, rgba(31, 70, 173, 0.08), transparent 30%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 14px 30px rgba(89, 63, 37, 0.08);
}

body.kk-brand.app-mode .app-ai-strip-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
}

body.kk-brand.app-mode .app-ai-strip-kicker {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(92, 67, 42, 0.72);
}

body.kk-brand.app-mode .app-ai-strip-copy strong {
    font-size: 1.03rem;
    line-height: 1.3;
}

body.kk-brand.app-mode .app-ai-strip-copy p {
    margin: 0;
    color: rgba(44, 37, 30, 0.8) !important;
}

body.kk-brand.app-mode .app-ai-strip-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

body.device-phone.app-mode .app-ai-strip {
    grid-template-columns: 1fr;
    padding: 16px 18px;
}

body.device-phone.app-mode .app-ai-strip-actions {
    width: 100%;
    justify-content: stretch;
}

body.device-phone.app-mode .app-ai-strip-actions .app-btn {
    width: 100%;
    justify-content: center;
}

body.kk-brand.app-mode .dark-table,
body.kk-brand.app-mode .dark-table th,
body.kk-brand.app-mode .dark-table td {
    color: #111111 !important;
}

body.kk-brand.app-mode .dark-table {
    background: linear-gradient(180deg, rgba(254, 250, 243, 0.98), rgba(247, 238, 223, 0.96));
}

body.kk-brand.app-mode .dark-table th {
    background: linear-gradient(180deg, rgba(239, 226, 205, 0.96), rgba(232, 216, 191, 0.92));
    border-color: rgba(111, 77, 48, 0.18);
}

body.kk-brand.app-mode .dark-table tr:hover td {
    background: rgba(234, 220, 198, 0.58);
}

body.kk-brand.app-mode .dark-table tbody tr:nth-child(even) td {
    background: rgba(249, 244, 235, 0.78);
}

body.kk-brand.app-mode .app-shell .form-card input:not([type="checkbox"]):not([type="radio"]),
body.kk-brand.app-mode .app-shell .app-card input:not([type="checkbox"]):not([type="radio"]),
body.kk-brand.app-mode .app-shell .form-card select,
body.kk-brand.app-mode .app-shell .app-card select,
body.kk-brand.app-mode .app-shell .form-card textarea,
body.kk-brand.app-mode .app-shell .app-card textarea {
    border-color: rgba(117, 86, 57, 0.22);
    background:
        linear-gradient(180deg, rgba(255, 251, 246, 0.98), rgba(245, 237, 225, 0.96)),
        repeating-linear-gradient(
            -20deg,
            rgba(150, 111, 73, 0.03) 0 10px,
            rgba(255, 255, 255, 0) 10px 20px
        );
    color: #1d1a17;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.86),
        0 8px 16px rgba(89, 63, 37, 0.05);
}

body.kk-brand.app-mode .app-shell .form-card input::placeholder,
body.kk-brand.app-mode .app-shell .app-card input::placeholder,
body.kk-brand.app-mode .app-shell .form-card textarea::placeholder,
body.kk-brand.app-mode .app-shell .app-card textarea::placeholder {
    color: rgba(92, 77, 62, 0.72);
}

body.kk-brand.app-mode .app-shell .form-card input:not([type="checkbox"]):not([type="radio"]):focus,
body.kk-brand.app-mode .app-shell .app-card input:not([type="checkbox"]):not([type="radio"]):focus,
body.kk-brand.app-mode .app-shell .form-card select:focus,
body.kk-brand.app-mode .app-shell .app-card select:focus,
body.kk-brand.app-mode .app-shell .form-card textarea:focus,
body.kk-brand.app-mode .app-shell .app-card textarea:focus {
    border-color: rgba(124, 86, 54, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 0 0 4px rgba(139, 99, 63, 0.12),
        0 12px 22px rgba(89, 63, 37, 0.08);
}

body.kk-brand.app-mode .app-search button,
body.kk-brand.app-mode .hub-tabs .pill.active {
    background: linear-gradient(135deg, var(--kk-royal-400), var(--kk-royal-700));
    border-color: var(--kk-royal-700);
    color: #ffffff !important;
}

body.kk-brand.app-mode .app-rail,
body.kk-brand.app-mode .app-rail .rail-title,
body.kk-brand.app-mode .app-rail .rail-subtitle,
body.kk-brand.app-mode .app-rail .rail-link,
body.kk-brand.app-mode .app-rail .rail-footer,
body.kk-brand.app-mode .app-rail .rail-label,
body.kk-brand.app-mode .app-rail .rail-value {
    color: #fff7ec !important;
}

body.kk-brand.app-mode .app-home-dashboard .dashboard-custom-range-panel {
    background:
        linear-gradient(180deg, rgba(252, 248, 241, 0.96), rgba(244, 235, 222, 0.92)) !important;
    border-color: rgba(117, 86, 57, 0.18) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 10px 22px rgba(89, 63, 37, 0.07) !important;
}

body.kk-brand.app-mode .app-home-dashboard .dashboard-inline-form input,
body.kk-brand.app-mode .app-home-dashboard .dashboard-inline-form select {
    background:
        linear-gradient(180deg, rgba(255, 251, 245, 0.98), rgba(245, 236, 223, 0.96)) !important;
    border-color: rgba(117, 86, 57, 0.18) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.84),
        0 8px 16px rgba(89, 63, 37, 0.05) !important;
}

body.kk-brand.app-mode .app-reception .reception-check-pill,
body.kk-brand.app-mode .app-reception .reception-context-card,
body.kk-brand.app-mode .app-reception .reception-slot-card,
body.kk-brand.app-mode .app-reception .reception-drive-item,
body.kk-brand.app-mode .app-reception .reception-rep-row,
body.kk-brand.app-mode .app-reception .reception-appt-card,
body.kk-brand.app-mode .app-reception .reception-agenda-item,
body.kk-brand.app-mode .app-reception .reception-intake-ai-box,
body.kk-brand.app-mode .app-reception .reception-mini-day,
body.kk-brand.app-mode .app-reception .reception-focus-item,
body.kk-brand.app-mode .app-reception .reception-rep-stat,
body.kk-brand.app-mode .app-reception .reception-rep-note {
    background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(244, 238, 228, 0.94)) !important;
    border-color: rgba(117, 86, 57, 0.16) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        0 8px 18px rgba(89, 63, 37, 0.05) !important;
}

body.kk-brand.app-mode .app-reception .reception-mini-day.outside {
    background:
        linear-gradient(180deg, rgba(243, 238, 229, 0.9), rgba(236, 230, 219, 0.82)) !important;
}

body.kk-brand.app-mode .app-reception .reception-agenda-item[open] summary,
body.kk-brand.app-mode .app-reception .reception-lane-toggle[open] summary {
    background:
        linear-gradient(180deg, rgba(248, 243, 235, 0.92), rgba(240, 234, 224, 0.86)) !important;
}

body.kk-brand.staff-mode {
    background:
        linear-gradient(165deg, #f8eee0 0%, #f3e8d7 52%, #ecdfcc 100%);
}

body.kk-brand.staff-mode .staff-dashboard {
    --dash-text: #111111;
    --dash-muted: #3f4d59;
    --dash-accent: var(--kk-royal-600);
    --dash-accent-strong: var(--kk-royal-700);
}

body.kk-brand.staff-mode .staff-dashboard .dashboard-shell {
    border-color: rgba(31, 70, 173, 0.2);
    background:
        linear-gradient(90deg, rgba(143, 102, 68, 0.18) 0 24%, rgba(255, 251, 245, 0.98) 24% 100%),
        linear-gradient(162deg, rgba(255, 252, 246, 0.98), rgba(246, 236, 220, 0.95));
    box-shadow: 0 24px 56px rgba(44, 32, 22, 0.18);
}

body.kk-brand.staff-mode .staff-dashboard .dashboard-shell::before,
body.kk-brand.staff-mode .staff-dashboard .dashboard-shell::after {
    opacity: 0.18;
}

body.kk-brand.staff-mode .staff-dashboard .dashboard-hero,
body.kk-brand.staff-mode .staff-dashboard .dashboard-menu,
body.kk-brand.staff-mode .staff-dashboard .metric-card,
body.kk-brand.staff-mode .staff-dashboard .chart-card,
body.kk-brand.staff-mode .staff-dashboard .status-card {
    border-color: rgba(31, 70, 173, 0.16);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 14px 30px rgba(53, 38, 26, 0.12);
}

body.kk-brand.staff-mode .staff-dashboard .dash-btn.primary,
body.kk-brand.staff-mode .staff-dashboard .range-link.active,
body.kk-brand.staff-mode .staff-dashboard .menu-link.active,
body.kk-brand.staff-mode .staff-dashboard .range-apply {
    background: linear-gradient(135deg, var(--kk-royal-400), var(--kk-royal-700));
    border-color: var(--kk-royal-700);
    color: #ffffff !important;
}

body.kk-brand.staff-mode .staff-dashboard,
body.kk-brand.staff-mode .staff-dashboard h1,
body.kk-brand.staff-mode .staff-dashboard h2,
body.kk-brand.staff-mode .staff-dashboard h3,
body.kk-brand.staff-mode .staff-dashboard h4,
body.kk-brand.staff-mode .staff-dashboard h5,
body.kk-brand.staff-mode .staff-dashboard h6,
body.kk-brand.staff-mode .staff-dashboard p,
body.kk-brand.staff-mode .staff-dashboard li,
body.kk-brand.staff-mode .staff-dashboard span,
body.kk-brand.staff-mode .staff-dashboard label,
body.kk-brand.staff-mode .staff-dashboard a:not(.dash-btn) {
    color: #111111 !important;
}

@media (max-width: 980px) {
    body.kk-brand.kk-site .kk-hero-brand {
        grid-template-columns: 1fr;
    }

    body.kk-brand.app-mode .app-shell {
        grid-template-columns: 1fr;
        background: linear-gradient(160deg, rgba(255, 252, 246, 0.98), rgba(245, 236, 221, 0.95));
    }

    body.kk-brand.staff-mode .staff-dashboard .dashboard-shell {
        background: linear-gradient(160deg, rgba(255, 252, 246, 0.98), rgba(245, 236, 221, 0.95));
    }
}

/* 2026-03-10: definitive Keith's Kitchens logo image overrides. */
body.kk-brand .navbar-brand-logo.kk-navbar-brand-logo,
body.kk-brand .kkx-hero-logo.kk-site-hero-logo,
body.kk-brand.app-mode .app-rail img.rail-logo.kk-rail-logo {
    display: block;
    color: inherit !important;
    text-indent: 0 !important;
    background-image: none !important;
    object-fit: contain;
    object-position: center;
}

body.kk-brand.app-mode .app-rail img.rail-logo.kk-rail-logo {
    min-width: 0;
    flex: 0 0 auto;
    max-width: 100%;
    width: 188px;
    height: 62px;
    object-fit: contain;
    object-position: left center;
}

.app-intake-shell {
    grid-template-columns: 280px minmax(0, 1fr);
}

.app-intake-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.app-intake-summary-card {
    min-width: 0;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(74, 112, 157, 0.18);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 40px rgba(18, 36, 62, 0.08);
}

.app-intake-summary-card strong {
    display: block;
    margin-top: 4px;
    font-size: 1.12rem;
    line-height: 1.3;
    color: #173256;
    word-break: break-word;
}

.app-intake-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.9fr);
    gap: 18px;
    align-items: start;
}

.app-intake-form {
    display: grid;
    gap: 18px;
}

.app-intake-sidebar {
    display: grid;
    gap: 18px;
    align-content: start;
    position: sticky;
    top: 18px;
}

.intake-intro {
    margin-bottom: 0;
    max-width: 72ch;
}

.intake-action-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.intake-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.intake-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid rgba(74, 112, 157, 0.18);
    border-radius: 14px;
    background: rgba(248, 251, 255, 0.94);
}

.intake-check input {
    margin-top: 4px;
}

.intake-check strong {
    display: block;
    margin-bottom: 3px;
    color: #173256;
}

.intake-packet-list {
    display: grid;
    gap: 12px;
}

.intake-packet-link {
    display: block;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(74, 112, 157, 0.18);
    background: rgba(248, 251, 255, 0.94);
    color: inherit;
    text-decoration: none;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.intake-packet-link:hover,
.intake-packet-link:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(18, 36, 62, 0.1);
    border-color: rgba(49, 117, 188, 0.34);
    outline: none;
}

.intake-packet-link h4 {
    margin: 0;
    color: #173256;
    font-size: 1rem;
}

.intake-packet-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.intake-mini-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 18px;
}

.intake-mini-list li {
    color: inherit;
}

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

    .app-intake-sidebar {
        position: static;
    }
}

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

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

@media (max-width: 640px) {
    .app-intake-summary {
        grid-template-columns: 1fr;
    }
}

/* Keith's Kitchens kitchen show public intake + print handout */
.kk-show-shell {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-bottom: 72px;
    color: #f5f7ff;
    background:
        radial-gradient(1000px 640px at 0% 0%, rgba(76, 121, 226, 0.22), transparent 60%),
        linear-gradient(180deg, #081223 0%, #0a1630 44%, #eef2fb 44%, #eef2fb 100%);
}

body.kk-show-focus > header,
body.kk-show-focus > footer {
    display: none;
}

body.kk-show-focus .container {
    max-width: none;
    padding: 0;
}

body.kk-show-focus main {
    padding: 0 !important;
}

.kk-show-hero {
    position: relative;
    overflow: hidden;
    padding: 42px clamp(20px, 4vw, 56px) 52px;
}

.kk-show-hero-backdrop {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(92deg, rgba(4, 9, 18, 0.82) 0%, rgba(7, 14, 28, 0.8) 36%, rgba(7, 14, 28, 0.38) 68%, rgba(7, 14, 28, 0.12) 100%),
        url('../images/kk/show/hero-signature-4k.jpg') center / cover no-repeat;
    transform: scale(1.02);
}

.kk-show-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(340px, 500px) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    width: min(1240px, 100%);
    margin: 0 auto;
}

.kk-show-intake-column {
    display: grid;
    gap: 16px;
    align-content: start;
    width: min(100%, 500px);
}

.kk-show-hero-copy,
.kk-show-side-card,
.kk-show-form-card,
.kk-show-thankyou {
    backdrop-filter: blur(12px);
}

.kk-show-kicker,
.kk-show-mini-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.kk-show-kicker {
    color: #c3d4ff;
}

.kk-show-mini-label {
    color: #84a3ff;
}

.kk-show-hero-copy {
    padding: clamp(28px, 4vw, 54px);
    min-height: 0;
    border-radius: 34px;
    border: 1px solid rgba(178, 198, 255, 0.2);
    background: linear-gradient(160deg, rgba(5, 10, 20, 0.5), rgba(5, 10, 20, 0.22));
    box-shadow: 0 30px 70px rgba(2, 8, 20, 0.45);
}

.kk-show-hero-copy h1 {
    margin: 18px 0 18px;
    max-width: 14ch;
    color: #ffffff;
    font-size: clamp(2.6rem, 5vw, 4.8rem);
    line-height: 0.96;
    letter-spacing: -0.045em;
}

.kk-show-subtitle {
    max-width: 62ch;
    margin: 0;
    color: rgba(236, 242, 255, 0.92);
    font-size: 1.06rem;
    line-height: 1.7;
}

.kk-show-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.kk-show-pill-row span {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(192, 209, 255, 0.28);
    background: rgba(11, 21, 46, 0.44);
    color: #f7f9ff;
    font-size: 0.93rem;
    font-weight: 700;
}

.kk-show-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.kk-show-side-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 28px 24px;
    border-radius: 28px;
    border: 1px solid rgba(176, 197, 255, 0.18);
    background: linear-gradient(180deg, rgba(9, 17, 36, 0.86), rgba(10, 20, 43, 0.7));
    box-shadow: 0 22px 60px rgba(2, 8, 20, 0.35);
}

.kk-show-side-card-compact {
    gap: 12px;
    padding: 18px 18px 20px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(9, 17, 36, 0.8), rgba(10, 20, 43, 0.66));
}

.kk-show-side-top h2 {
    margin: 10px 0 0;
    color: #ffffff;
    font-size: 1.7rem;
    line-height: 1.08;
}

.kk-show-side-card-compact .kk-show-side-top h2 {
    font-size: 1.35rem;
}

.kk-show-steps {
    margin: 0;
    padding-left: 1.1rem;
    color: rgba(234, 241, 255, 0.92);
    line-height: 1.7;
}

.kk-show-steps-compact {
    font-size: 0.96rem;
    line-height: 1.55;
}

.kk-show-steps li + li {
    margin-top: 8px;
}

.kk-show-contact-block {
    display: grid;
    gap: 6px;
    padding: 16px 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(205, 218, 255, 0.15);
}

.kk-show-contact-block a {
    color: #ffffff;
    font-size: 1.08rem;
    font-weight: 800;
    text-decoration: none;
}

.kk-show-contact-block span:last-child {
    color: rgba(220, 230, 255, 0.82);
}

.kk-show-contact-block-compact {
    padding: 14px 16px;
}

.kk-show-qr-preview {
    display: grid;
    gap: 12px;
    justify-items: center;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(210, 223, 255, 0.14);
}

.kk-show-qr-preview img {
    width: 176px;
    height: 176px;
    border-radius: 18px;
    background: #ffffff;
    padding: 12px;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.25);
}

.kk-show-qr-preview p {
    margin: 0;
    color: rgba(226, 235, 255, 0.82);
    text-align: center;
    line-height: 1.55;
}

.kk-show-story-strip {
    width: min(1240px, calc(100% - 40px));
    margin: -26px auto 0;
    display: grid;
    grid-template-columns: 1.05fr 0.9fr 1.05fr;
    gap: 18px;
    position: relative;
    z-index: 2;
}

.kk-show-story-panel {
    margin: 0;
    min-height: 220px;
    overflow: hidden;
    border-radius: 26px;
    border: 1px solid rgba(198, 211, 240, 0.88);
    box-shadow: 0 26px 60px rgba(5, 15, 28, 0.18);
    background: #dfe6f5;
}

.kk-show-story-panel img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.kk-show-form-wrap {
    width: min(1180px, calc(100% - 40px));
    margin: 42px auto 0;
    color: #12203e;
}

.kk-show-form-intro {
    max-width: 740px;
    margin-bottom: 20px;
}

.kk-show-form-intro h2 {
    margin: 10px 0 10px;
    color: #102149;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.kk-show-form-intro p {
    margin: 0;
    color: #45506f;
    font-size: 1rem;
    line-height: 1.7;
}

.kk-show-form-card,
.kk-show-thankyou {
    padding: clamp(22px, 4vw, 34px);
    border-radius: 30px;
    border: 1px solid rgba(166, 183, 222, 0.72);
    background:
        radial-gradient(320px 200px at 100% 0%, rgba(102, 146, 255, 0.12), transparent 70%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 247, 252, 0.98));
    box-shadow: 0 24px 60px rgba(14, 31, 60, 0.12);
}

.kk-show-form-card-hero {
    padding: 22px;
}

.kk-show-form-logo {
    width: min(220px, 68%);
    display: block;
    margin-bottom: 12px;
}

.kk-show-form-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.kk-show-form-topline-hero {
    margin-bottom: 20px;
}

.kk-show-form-topline h2 {
    margin: 8px 0 8px;
    color: #112149;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.kk-show-form-topline p {
    margin: 0;
    color: #52607d;
    font-size: 0.96rem;
    line-height: 1.55;
}

.kk-show-fast-badge {
    flex-shrink: 0;
    align-self: center;
    padding: 10px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(34, 74, 176, 0.12), rgba(84, 126, 236, 0.2));
    color: #183a88;
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.kk-show-form-promise-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.kk-show-form-promise-row span {
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(233, 239, 251, 0.96);
    border: 1px solid rgba(176, 191, 227, 0.82);
    color: #193b85;
    font-size: 0.79rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.kk-show-validation {
    margin-bottom: 18px;
    font-weight: 700;
}

.kk-show-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.kk-show-form-grid.lower {
    margin-top: 22px;
}

.kk-show-field {
    display: grid;
    gap: 8px;
}

.kk-show-field.full {
    grid-column: 1 / -1;
}

.kk-show-choice-group {
    display: grid;
    gap: 10px;
}

.kk-show-choice-label {
    color: #102149;
    font-weight: 800;
    font-size: 0.96rem;
}

.kk-show-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.kk-show-choice-grid.compact {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.kk-show-choice-pill {
    position: relative;
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(149, 167, 212, 0.86);
    background: rgba(255, 255, 255, 0.92);
    color: #182952;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.kk-show-choice-pill:hover {
    transform: translateY(-1px);
    border-color: rgba(73, 111, 214, 0.8);
    box-shadow: 0 14px 28px rgba(30, 55, 110, 0.1);
}

.kk-show-choice-pill input {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.kk-show-choice-pill:has(input:checked) {
    border-color: rgba(36, 77, 188, 0.96);
    background: linear-gradient(135deg, rgba(37, 79, 190, 0.12), rgba(88, 139, 255, 0.18));
    box-shadow: inset 0 0 0 1px rgba(36, 77, 188, 0.18);
}

.kk-show-field label,
.kk-show-scope-card legend {
    color: #102149;
    font-weight: 800;
    font-size: 0.96rem;
}

.kk-show-field .text-danger {
    color: #a73a3a !important;
    font-size: 0.86rem;
    font-weight: 700;
}

.kk-show-scope-card {
    margin: 24px 0 0;
    padding: 22px 22px 18px;
    border-radius: 24px;
    border: 1px solid rgba(171, 186, 224, 0.75);
    background: rgba(233, 239, 251, 0.82);
}

.kk-show-scope-card p {
    margin: 8px 0 0;
    color: #4d5c7c;
}

.kk-show-scope-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.kk-show-scope-pill {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 58px;
    padding: 14px 16px 14px 48px;
    border-radius: 18px;
    border: 1px solid rgba(146, 165, 212, 0.84);
    background: rgba(255, 255, 255, 0.9);
    color: #1b2950;
    font-weight: 800;
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.kk-show-scope-pill:hover {
    transform: translateY(-1px);
    border-color: rgba(73, 111, 214, 0.8);
    box-shadow: 0 14px 30px rgba(30, 55, 110, 0.1);
}

.kk-show-scope-pill input {
    position: absolute;
    left: 16px;
    width: 18px;
    height: 18px;
    accent-color: #244dbc;
}

.kk-show-scope-pill:has(input:checked) {
    border-color: rgba(36, 77, 188, 0.96);
    background: linear-gradient(135deg, rgba(37, 79, 190, 0.12), rgba(88, 139, 255, 0.18));
    box-shadow: inset 0 0 0 1px rgba(36, 77, 188, 0.18);
}

.kk-show-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.kk-show-submit-row {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding-top: 20px;
    border-top: 1px solid rgba(173, 186, 219, 0.74);
}

.kk-show-submit-row-compact {
    margin-top: 20px;
}

.kk-show-submit-copy {
    display: grid;
    gap: 4px;
}

.kk-show-submit-copy strong {
    color: #13224a;
}

.kk-show-submit-copy span {
    color: #56627f;
}

.kk-show-thankyou {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.kk-show-thankyou h3 {
    margin: 10px 0 10px;
    color: #11204a;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
}

.kk-show-thankyou p {
    margin: 0;
    max-width: 58ch;
    color: #4c5b7a;
    line-height: 1.7;
}

.kk-show-thankyou-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.kk-show-optional-card {
    margin-top: 18px;
    border-radius: 22px;
    border: 1px solid rgba(173, 186, 219, 0.8);
    background: rgba(243, 247, 253, 0.88);
    overflow: hidden;
}

.kk-show-optional-card summary {
    display: grid;
    gap: 2px;
    list-style: none;
    cursor: pointer;
    padding: 16px 18px;
    color: #12224a;
    font-weight: 800;
}

.kk-show-optional-card summary::-webkit-details-marker {
    display: none;
}

.kk-show-optional-card summary small {
    color: #5a6680;
    font-size: 0.84rem;
    font-weight: 700;
}

.kk-show-optional-card[open] summary {
    border-bottom: 1px solid rgba(173, 186, 219, 0.7);
}

.kk-show-optional-card .kk-show-form-grid {
    padding: 18px;
}

.kk-show-prize-card {
    gap: 14px;
}

.kk-show-style-band {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(205, 218, 255, 0.15);
}

.kk-show-style-band strong {
    color: #ffffff;
    font-size: 1rem;
}

.kk-show-style-band span {
    color: rgba(220, 230, 255, 0.82);
    font-size: 0.9rem;
}

.kk-show-hero-copy-side {
    display: grid;
    align-content: start;
    gap: 0;
}

.kk-show-hero-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}

.kk-show-hero-stat {
    display: grid;
    gap: 8px;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid rgba(189, 206, 255, 0.18);
    background: rgba(8, 16, 34, 0.3);
}

.kk-show-hero-stat strong {
    color: #ffffff;
    font-size: 0.98rem;
    font-weight: 800;
}

.kk-show-hero-stat span {
    color: rgba(230, 237, 255, 0.86);
    font-size: 0.92rem;
    line-height: 1.55;
}

.kk-show-hero-note {
    margin-top: 20px;
    padding: 15px 18px;
    border-radius: 18px;
    border: 1px solid rgba(189, 206, 255, 0.18);
    background: rgba(8, 16, 34, 0.28);
    color: rgba(237, 242, 255, 0.88);
    line-height: 1.6;
}

body.kk-show-print-page {
    margin: 0;
    background: #dfe5f2;
    color: #152249;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.kk-show-print-toolbar {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 18px 18px 0;
}

.kk-show-handout {
    box-sizing: border-box;
    width: min(8.5in, calc(100vw - 4px));
    min-height: 11in;
    margin: 4px auto 10px;
    padding: 0.18in;
    border-radius: 18px;
    background:
        radial-gradient(800px 420px at 0% 0%, rgba(34, 88, 220, 0.24), transparent 62%),
        linear-gradient(180deg, #f6f8fd 0%, #ebf1fb 100%);
    box-shadow: 0 32px 70px rgba(11, 24, 55, 0.2);
    display: grid;
    gap: 0.18in;
}

.kk-show-handout-top {
    display: grid;
    gap: 0.12in;
}

.kk-show-handout-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 0.09in 0.16in;
    border-radius: 999px;
    background: rgba(15, 31, 69, 0.86);
    color: #f4f7ff;
    font-size: 0.14in;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.kk-show-handout-hero-panel {
    position: relative;
    min-height: 4.95in;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(164, 182, 221, 0.85);
    box-shadow: 0 24px 48px rgba(10, 22, 48, 0.14);
    background: #dde5f3;
}

.kk-show-handout-hero-photo {
    margin: 0;
    position: absolute;
    inset: 0;
}

.kk-show-handout-hero-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.kk-show-handout-hero-overlay {
    position: relative;
    z-index: 1;
    min-height: 4.95in;
    width: min(5.65in, 76%);
    padding: 0.24in 0.28in 0.28in;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background:
        linear-gradient(90deg, rgba(6, 18, 44, 0.94) 0%, rgba(6, 18, 44, 0.9) 52%, rgba(6, 18, 44, 0.44) 80%, rgba(6, 18, 44, 0.08) 100%);
}

.kk-show-handout-logo {
    width: 3.4in;
    max-width: 100%;
    margin: 0 0 auto;
    filter: brightness(0) invert(1);
}

.kk-show-handout-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 0.14in;
}

.kk-show-handout-badge {
    padding: 0.07in 0.12in;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    color: #f7fbff;
    font-size: 0.13in;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.kk-show-handout-hero-kicker {
    padding: 0.07in 0.12in;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(247, 251, 255, 0.92);
    font-size: 0.13in;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.kk-show-handout-hero-overlay h1 {
    margin: 0.16in 0 0.1in;
    color: #ffffff;
    font-size: 0.62in;
    line-height: 0.94;
    letter-spacing: -0.04em;
}

.kk-show-handout-hero-overlay p {
    margin: 0;
    max-width: 4.45in;
    color: rgba(239, 244, 255, 0.92);
    font-size: 0.18in;
    line-height: 1.55;
}

.kk-show-handout-pill-row {
    margin-top: 0.2in;
}

.kk-show-handout-pill-row span {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.16);
    font-size: 0.13in;
}

.kk-show-handout-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3.16in;
    gap: 0.18in;
    align-items: stretch;
}

.kk-show-handout-left-stack {
    display: grid;
    gap: 0.18in;
}

.kk-show-handout-feature-card,
.kk-show-handout-qr-card,
.kk-show-handout-story-card {
    border-radius: 26px;
    border: 1px solid rgba(166, 182, 217, 0.78);
    box-shadow: 0 22px 40px rgba(12, 26, 56, 0.1);
}

.kk-show-handout-feature-card {
    padding: 0.2in 0.22in;
    background: rgba(255, 255, 255, 0.9);
}

.kk-show-handout-feature-card h2 {
    margin: 0;
    color: #0f214b;
    font-size: 0.3in;
    line-height: 1.02;
}

.kk-show-handout-steps {
    margin-top: 0.15in;
    display: grid;
    gap: 0.11in;
}

.kk-show-handout-steps div {
    display: grid;
    grid-template-columns: 0.34in 1fr;
    gap: 0.12in;
    align-items: start;
    padding: 0.12in 0.14in;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(238, 244, 255, 0.94), rgba(228, 236, 251, 0.96));
}

.kk-show-handout-steps strong {
    display: grid;
    place-items: center;
    width: 0.34in;
    height: 0.34in;
    border-radius: 50%;
    background: #1f4db7;
    color: #ffffff;
    font-size: 0.17in;
}

.kk-show-handout-steps span {
    color: #465574;
    font-size: 0.17in;
    line-height: 1.48;
}

.kk-show-handout-story-strip {
    display: grid;
    grid-template-columns: minmax(2.2in, 0.9fr) minmax(0, 1.15fr);
    gap: 0.18in;
    align-items: stretch;
}

.kk-show-handout-style-card {
    display: grid;
    align-content: start;
    gap: 0.12in;
    padding: 0.18in 0.2in;
    border-radius: 24px;
    border: 1px solid rgba(166, 182, 217, 0.78);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(240, 245, 254, 0.98));
    box-shadow: 0 22px 40px rgba(12, 26, 56, 0.1);
}

.kk-show-handout-style-kicker {
    color: #1d3f90;
    font-size: 0.13in;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.kk-show-handout-style-list {
    margin: 0;
    padding-left: 0.22in;
    color: #112149;
    font-size: 0.17in;
    font-weight: 800;
    line-height: 1.5;
}

.kk-show-handout-style-list li + li {
    margin-top: 0.05in;
}

.kk-show-handout-style-note {
    color: #4d5b79;
    font-size: 0.15in;
    line-height: 1.45;
}

.kk-show-handout-story-card {
    margin: 0;
    overflow: hidden;
    background: #dfe7f4;
}

.kk-show-handout-story-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.kk-show-handout-contact-band {
    display: grid;
    align-content: center;
    gap: 0.09in;
    padding: 0.18in 0.22in;
    border-radius: 24px;
    background: linear-gradient(180deg, #102149 0%, #19356e 100%);
    color: rgba(239, 245, 255, 0.88);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.kk-show-handout-contact-band strong {
    color: #ffffff;
    font-size: 0.24in;
    line-height: 1.05;
}

.kk-show-handout-contact-band span {
    font-size: 0.15in;
    line-height: 1.45;
}

.kk-show-handout-qr-card {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 0.13in;
    padding: 0.24in 0.22in;
    background: linear-gradient(180deg, #ffffff 0%, #f4f7ff 100%);
}

.kk-show-handout-qr-tag {
    padding: 0.07in 0.16in;
    border-radius: 999px;
    background: #113b96;
    color: #ffffff;
    font-size: 0.13in;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.kk-show-handout-qr {
    width: 3in;
    height: 3in;
    padding: 0.14in;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid rgba(165, 181, 215, 0.92);
}

.kk-show-handout-qr-card h3 {
    margin: 0.02in 0 0;
    color: #102149;
    font-size: 0.31in;
    line-height: 1.02;
    text-align: center;
}

.kk-show-handout-qr-card p {
    margin: 0;
    text-align: center;
    color: #4b5874;
    font-size: 0.16in;
    line-height: 1.48;
}

.kk-show-handout-mini-list {
    margin: 0;
    padding-left: 0.2in;
    color: #40506e;
    font-size: 0.15in;
    line-height: 1.45;
    justify-self: stretch;
}

.kk-show-handout-mini-list li + li {
    margin-top: 0.07in;
}

.kk-show-handout-url {
    width: 100%;
    padding: 0.13in 0.15in;
    border-radius: 14px;
    background: rgba(231, 238, 251, 0.92);
    color: #14316b;
    font-size: 0.17in;
    font-weight: 900;
    line-height: 1.3;
    text-align: center;
    word-break: break-word;
}

.kk-show-handout-mini {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    color: #4e5d79;
    font-size: 0.13in;
    font-weight: 800;
}

@media (max-width: 1080px) {
    .kk-show-hero-grid,
    .kk-show-story-strip,
    .kk-show-form-grid,
    .kk-show-scope-grid,
    .kk-show-submit-row,
    .kk-show-thankyou,
    .kk-show-handout-bottom,
    .kk-show-handout-story-strip {
        grid-template-columns: 1fr;
    }

    .kk-show-story-strip {
        margin-top: 18px;
    }

    .kk-show-submit-row,
    .kk-show-thankyou {
        align-items: flex-start;
    }

    .kk-show-handout,
    .kk-show-handout-hero-overlay {
        width: min(8.2in, calc(100vw - 20px));
        min-height: auto;
    }

    .kk-show-hero-stat-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .kk-show-shell {
        background:
            linear-gradient(180deg, #081223 0%, #0a1630 16%, #eef2fb 16%, #eef2fb 100%);
    }

    .kk-show-hero {
        padding: 12px 12px 24px;
    }

    .kk-show-story-strip,
    .kk-show-form-wrap {
        width: calc(100% - 24px);
    }

    .kk-show-hero-copy {
        min-height: auto;
        padding: 20px;
    }

    .kk-show-hero-copy h1 {
        max-width: none;
        font-size: 1.95rem;
    }

    .kk-show-subtitle {
        font-size: 0.92rem;
        line-height: 1.48;
    }

    .kk-show-pill-row {
        display: none;
    }

    .kk-show-hero-actions {
        margin-top: 18px;
    }

    .kk-show-side-card,
    .kk-show-form-card,
    .kk-show-thankyou {
        padding: 20px;
    }

    .kk-show-form-topline {
        flex-direction: column;
        align-items: flex-start;
    }

    .kk-show-form-logo {
        width: min(180px, 64%);
    }

    .kk-show-fast-badge {
        align-self: flex-start;
    }

    .kk-show-submit-row,
    .kk-show-thankyou,
    .kk-show-thankyou-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .kk-show-submit-row .app-btn,
    .kk-show-thankyou-actions .app-btn {
        width: 100%;
        justify-content: center;
    }

    .kk-show-story-strip {
        display: none;
    }

    .kk-show-scope-grid {
        grid-template-columns: 1fr;
    }

    .kk-show-choice-grid,
    .kk-show-choice-grid.compact {
        grid-template-columns: 1fr;
    }

    .kk-show-optional-card .kk-show-form-grid {
        padding: 16px;
    }
}

@media print {
    body.kk-show-print-page {
        background: #ffffff;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .no-print {
        display: none !important;
    }

    .kk-show-handout {
        width: auto;
        min-height: 10.7in;
        margin: 0;
        padding: 0.18in;
        border-radius: 0;
        box-shadow: none;
        background:
            radial-gradient(700px 360px at 0% 0%, rgba(34, 88, 220, 0.2), transparent 60%),
            linear-gradient(180deg, #fbfcff 0%, #eef2fb 100%);
    }

    .kk-show-handout-topbar {
        margin: 0;
    }
}

body.kk-show-print-render {
    background: #ffffff;
    margin: 0;
    overflow: hidden;
}

body.kk-show-print-render .kk-show-handout {
    width: 100vw;
    min-height: 100vh;
    margin: 0;
    padding: 0.18in;
    border-radius: 0;
    box-shadow: none;
}

.kk-show-flyer {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 0.16in;
    padding: 0.2in;
}

.kk-show-flyer-header {
    display: grid;
    gap: 0.12in;
}

.kk-show-flyer-brand-card {
    display: grid;
    grid-template-columns: 2.5in minmax(0, 1fr);
    gap: 0.18in;
    align-items: center;
    padding: 0.18in 0.22in;
    border-radius: 24px;
    border: 1px solid rgba(166, 182, 217, 0.78);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 246, 253, 0.98));
}

.kk-show-flyer-logo {
    width: 100%;
    max-width: 2.45in;
    display: block;
}

.kk-show-flyer-brand-copy {
    display: grid;
    gap: 0.06in;
}

.kk-show-flyer-kicker {
    color: #24478f;
    font-size: 0.13in;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.kk-show-flyer-brand-copy h1 {
    margin: 0;
    color: #102149;
    font-size: 0.46in;
    line-height: 0.95;
    letter-spacing: -0.04em;
}

.kk-show-flyer-brand-copy p {
    margin: 0;
    color: #3054a5;
    font-size: 0.2in;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kk-show-flyer-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.08in;
}

.kk-show-flyer-badge-row span {
    padding: 0.07in 0.14in;
    border-radius: 999px;
    background: #163676;
    color: #ffffff;
    font-size: 0.13in;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.kk-show-flyer-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.75in;
    gap: 0.16in;
    align-items: stretch;
}

.kk-show-flyer-left {
    display: grid;
    gap: 0.14in;
    grid-template-rows: 2.95in auto auto;
}

.kk-show-flyer-photo,
.kk-show-flyer-copy-card,
.kk-show-flyer-qr-card,
.kk-show-flyer-note-band {
    border-radius: 24px;
    border: 1px solid rgba(166, 182, 217, 0.78);
    box-shadow: 0 18px 32px rgba(12, 26, 56, 0.08);
}

.kk-show-flyer-photo {
    margin: 0;
    overflow: hidden;
    background: #dfe7f4;
}

.kk-show-flyer-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.kk-show-flyer-copy-card {
    padding: 0.18in 0.2in;
    background: rgba(255, 255, 255, 0.94);
}

.kk-show-flyer-copy-card h2 {
    margin: 0 0 0.1in;
    color: #102149;
    font-size: 0.28in;
    line-height: 1.02;
}

.kk-show-flyer-list {
    margin: 0;
    padding-left: 0.22in;
    color: #44526f;
    font-size: 0.16in;
    line-height: 1.45;
}

.kk-show-flyer-list li + li {
    margin-top: 0.05in;
}

.kk-show-flyer-style-band {
    display: grid;
    gap: 0.03in;
    margin-top: 0.12in;
    padding: 0.12in 0.14in;
    border-radius: 18px;
    background: rgba(232, 239, 251, 0.96);
    color: #24478f;
}

.kk-show-flyer-style-band strong {
    font-size: 0.14in;
}

.kk-show-flyer-style-band span {
    color: #42506b;
    font-size: 0.15in;
    line-height: 1.4;
}

.kk-show-flyer-note-band {
    display: grid;
    gap: 0.04in;
    padding: 0.15in 0.18in;
    background: linear-gradient(180deg, #102149 0%, #19356e 100%);
    color: #eef4ff;
}

.kk-show-flyer-note-band strong {
    font-size: 0.18in;
    line-height: 1.25;
}

.kk-show-flyer-note-band span {
    font-size: 0.14in;
    line-height: 1.35;
    color: rgba(238, 244, 255, 0.86);
}

.kk-show-flyer-qr-card {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 0.11in;
    padding: 0.18in;
    background: linear-gradient(180deg, #ffffff 0%, #f4f7ff 100%);
}

.kk-show-flyer-qr-tag {
    padding: 0.07in 0.14in;
    border-radius: 999px;
    background: #24478f;
    color: #ffffff;
    font-size: 0.13in;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.kk-show-flyer-qr {
    width: 2.2in;
    height: 2.2in;
    padding: 0.12in;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid rgba(165, 181, 215, 0.92);
}

.kk-show-flyer-qr-card h3 {
    margin: 0;
    color: #102149;
    font-size: 0.28in;
    line-height: 1.02;
    text-align: center;
}

.kk-show-flyer-qr-card p {
    margin: 0;
    color: #4b5874;
    font-size: 0.15in;
    line-height: 1.45;
    text-align: center;
}

.kk-show-flyer-steps {
    margin: 0;
    padding-left: 0.22in;
    color: #42506b;
    font-size: 0.15in;
    line-height: 1.45;
    justify-self: stretch;
}

.kk-show-flyer-steps li + li {
    margin-top: 0.05in;
}

.kk-show-flyer-url {
    width: 100%;
    padding: 0.12in 0.13in;
    border-radius: 14px;
    background: rgba(231, 238, 251, 0.92);
    color: #14316b;
    font-size: 0.15in;
    font-weight: 900;
    line-height: 1.3;
    text-align: center;
    word-break: break-word;
}

.kk-show-flyer-contact {
    display: grid;
    gap: 0.04in;
    width: 100%;
    padding-top: 0.08in;
    border-top: 1px solid rgba(173, 186, 219, 0.7);
}

.kk-show-flyer-contact strong {
    color: #102149;
    font-size: 0.17in;
}

.kk-show-flyer-contact span {
    color: #5b6782;
    font-size: 0.14in;
    line-height: 1.4;
}

.app-feedback-fab {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1080;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 12rem;
    padding: 0.85rem 1.1rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #16305f 0%, #2856a7 100%);
    color: #fff !important;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow: 0 20px 40px rgba(14, 31, 66, 0.24);
}

.app-feedback-fab:hover,
.app-feedback-fab:focus {
    color: #fff !important;
    text-decoration: none;
    transform: translateY(-1px);
}

body.kk-brand.app-mode .app-shell.app-orders .order-summary-grid > div,
body.kk-brand.app-mode .app-shell.app-orders .order-overview-context span,
body.kk-brand.app-mode .app-shell.app-orders .order-overview-lines,
body.kk-brand.app-mode .app-shell.app-orders .pending-card,
body.kk-brand.app-mode .app-shell.app-orders .review-line-card,
body.kk-brand.app-mode .app-shell.app-orders .doc-card,
body.kk-brand.app-mode .app-shell.app-orders .tracked-item-match,
body.kk-brand.app-mode .app-shell.app-orders .tracked-item-source,
body.kk-brand.app-mode .app-shell.app-orders .summary-context-bar span,
body.kk-brand.app-mode .app-shell.app-orders .tracked-item-results,
body.kk-brand.app-mode .app-shell.app-orders .tracked-item-row[data-editor-state='cart'] {
    border-color: rgba(123, 89, 58, 0.16);
    background:
        linear-gradient(160deg, rgba(255, 251, 245, 0.98), rgba(244, 234, 219, 0.9)),
        repeating-linear-gradient(-18deg, rgba(160, 117, 76, 0.035) 0 10px, rgba(255, 255, 255, 0) 10px 20px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 12px 24px rgba(88, 60, 34, 0.06);
}

body.kk-brand.app-mode .app-shell.app-orders .sheet-row,
body.kk-brand.app-mode .app-shell.app-orders .bulk-entry-stage,
body.kk-brand.app-mode .app-shell.app-orders .intake-composer,
body.kk-brand.app-mode .app-shell.app-orders .smart-pad {
    border-color: rgba(123, 89, 58, 0.16);
    background:
        radial-gradient(circle at top right, rgba(31, 70, 173, 0.05), transparent 22%),
        linear-gradient(160deg, rgba(255, 251, 246, 0.985), rgba(244, 233, 216, 0.93)),
        repeating-linear-gradient(-18deg, rgba(160, 117, 76, 0.03) 0 11px, rgba(255, 255, 255, 0) 11px 22px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 18px 34px rgba(88, 60, 34, 0.08);
}

body.kk-brand.app-mode .app-shell.app-orders .order-command-card input:not([type="checkbox"]):not([type="radio"]),
body.kk-brand.app-mode .app-shell.app-orders .order-sheet-card input:not([type="checkbox"]):not([type="radio"]),
body.kk-brand.app-mode .app-shell.app-orders .orders-context-card input:not([type="checkbox"]):not([type="radio"]),
body.kk-brand.app-mode .app-shell.app-orders .order-command-card textarea,
body.kk-brand.app-mode .app-shell.app-orders .order-sheet-card textarea {
    background:
        linear-gradient(180deg, rgba(255, 251, 246, 0.99), rgba(246, 238, 225, 0.97)),
        repeating-linear-gradient(-20deg, rgba(154, 113, 72, 0.025) 0 10px, rgba(255, 255, 255, 0) 10px 20px);
    border-color: rgba(123, 89, 58, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 8px 16px rgba(88, 60, 34, 0.05);
}

body.kk-brand.app-mode .app-shell.app-reception .reception-check-pill,
body.kk-brand.app-mode .app-shell.app-reception .reception-context-card,
body.kk-brand.app-mode .app-shell.app-reception .reception-rep-stat,
body.kk-brand.app-mode .app-shell.app-reception .reception-rep-note,
body.kk-brand.app-mode .app-shell.app-reception .reception-slot-card,
body.kk-brand.app-mode .app-shell.app-reception .reception-drive-item,
body.kk-brand.app-mode .app-shell.app-reception .reception-rep-row,
body.kk-brand.app-mode .app-shell.app-reception .reception-appt-card,
body.kk-brand.app-mode .app-shell.app-reception .reception-agenda-item,
body.kk-brand.app-mode .app-shell.app-reception .reception-intake-ai-box,
body.kk-brand.app-mode .app-shell.app-reception .reception-mini-day,
body.kk-brand.app-mode .app-shell.app-reception .reception-focus-item,
body.kk-brand.app-mode .app-shell.app-reception .reception-month-cell,
body.kk-brand.app-mode .app-shell.app-reception .reception-month-event {
    border-color: rgba(108, 92, 67, 0.16);
    background:
        linear-gradient(160deg, rgba(255, 252, 247, 0.985), rgba(241, 236, 224, 0.94)),
        repeating-linear-gradient(-18deg, rgba(141, 119, 88, 0.028) 0 9px, rgba(255, 255, 255, 0) 9px 18px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74), 0 10px 22px rgba(61, 55, 41, 0.06);
}

body.kk-brand.app-mode .app-shell.app-reception .reception-calendar-panel,
body.kk-brand.app-mode .app-shell.app-reception .reception-calendar-timeline-card,
body.kk-brand.app-mode .app-shell.app-reception .reception-timegrid-wrap,
body.kk-brand.app-mode .app-shell.app-reception .reception-month-board {
    border-color: rgba(108, 92, 67, 0.16);
    background:
        radial-gradient(circle at top right, rgba(31, 70, 173, 0.05), transparent 22%),
        linear-gradient(160deg, rgba(255, 252, 247, 0.985), rgba(241, 236, 224, 0.94)),
        repeating-linear-gradient(-18deg, rgba(141, 119, 88, 0.026) 0 10px, rgba(255, 255, 255, 0) 10px 20px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74), 0 16px 32px rgba(61, 55, 41, 0.08);
}

body.kk-brand.app-mode .app-shell.app-reception .reception-outlook-event {
    box-shadow: 0 14px 28px rgba(50, 42, 31, 0.12);
}

body.kk-brand.app-mode .app-shell.app-sales-shell .sales-header-pills .pill.soft,
body.kk-brand.app-mode .app-shell.app-sales-shell .sales-queue-item,
body.kk-brand.app-mode .app-shell.app-sales-shell .sales-card,
body.kk-brand.app-mode .app-shell.app-sales-shell .sales-history-item,
body.kk-brand.app-mode .app-shell.app-sales-shell .sales-task-item,
body.kk-brand.app-mode .app-shell.app-sales-shell .sales-consult-card,
body.kk-brand.app-mode .app-shell.app-sales-shell .sales-availability-card,
body.kk-brand.app-mode .app-shell.app-sales-shell .sales-availability-event,
body.kk-brand.app-mode .app-shell.app-sales-shell .sales-focus-card,
body.kk-brand.app-mode .app-shell.app-sales-shell .sales-panel,
body.kk-brand.app-mode .app-shell.app-sales-shell .sales-check-item,
body.kk-brand.app-mode .app-shell.app-sales-shell .sales-mini-item {
    border-color: rgba(104, 90, 66, 0.16);
    background:
        linear-gradient(160deg, rgba(255, 251, 246, 0.985), rgba(242, 236, 223, 0.93)),
        repeating-linear-gradient(-18deg, rgba(145, 118, 84, 0.028) 0 10px, rgba(255, 255, 255, 0) 10px 20px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 12px 24px rgba(61, 55, 41, 0.06);
}

body.kk-brand.app-mode .app-shell.app-sales-shell .sales-panel:not([open]) {
    background:
        linear-gradient(160deg, rgba(250, 246, 239, 0.96), rgba(240, 234, 221, 0.9)),
        repeating-linear-gradient(-18deg, rgba(145, 118, 84, 0.024) 0 10px, rgba(255, 255, 255, 0) 10px 20px);
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .app-main {
    display: grid;
    gap: 16px;
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.9fr);
    gap: 18px;
    align-items: stretch;
    padding: 26px;
    border-radius: 30px;
    border: 1px solid rgba(104, 82, 58, 0.18);
    background:
        radial-gradient(circle at top left, rgba(31, 70, 173, 0.16), transparent 30%),
        radial-gradient(circle at bottom right, rgba(194, 151, 95, 0.14), transparent 28%),
        linear-gradient(165deg, rgba(255, 250, 242, 0.98), rgba(241, 231, 213, 0.94)),
        repeating-linear-gradient(-18deg, rgba(141, 119, 88, 0.026) 0 10px, rgba(255, 255, 255, 0) 10px 20px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 20px 40px rgba(73, 54, 33, 0.12);
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-hero::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -80px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(31, 70, 173, 0.12), transparent 70%);
    animation: aurora-shift 18s ease-in-out infinite;
    pointer-events: none;
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-hero-copy,
body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-hero-side {
    position: relative;
    z-index: 1;
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-hero-side,
body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-mini-stats {
    display: grid;
    gap: 14px;
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-score-ring,
body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-mini-stat,
body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-facet-row,
body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-user-card,
body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-timeline-row,
body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-bar-shell {
    border: 1px solid rgba(110, 93, 67, 0.16);
    background:
        linear-gradient(160deg, rgba(255, 252, 247, 0.985), rgba(241, 236, 224, 0.94)),
        repeating-linear-gradient(-18deg, rgba(141, 119, 88, 0.028) 0 9px, rgba(255, 255, 255, 0) 9px 18px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74), 0 10px 22px rgba(61, 55, 41, 0.06);
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-score-ring {
    min-height: 172px;
    padding: 16px;
    border-radius: 28px;
    display: grid;
    place-items: center;
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-score-ring.tone-ok {
    box-shadow: inset 0 0 0 1px rgba(66, 160, 124, 0.16), 0 16px 30px rgba(54, 78, 63, 0.08);
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-score-ring.tone-watch {
    box-shadow: inset 0 0 0 1px rgba(202, 151, 57, 0.16), 0 16px 30px rgba(97, 74, 38, 0.08);
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-score-ring.tone-alert {
    box-shadow: inset 0 0 0 1px rgba(201, 87, 87, 0.16), 0 16px 30px rgba(97, 45, 45, 0.08);
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-score-value {
    font-size: clamp(2.7rem, 4.5vw, 4rem);
    line-height: 1;
    font-weight: 900;
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-score-label {
    margin-top: 6px;
    font-size: 0.86rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(81, 63, 45, 0.74);
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-mini-stat {
    gap: 3px;
    padding: 14px 16px;
    border-radius: 22px;
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-mini-stat strong {
    font-size: 1.36rem;
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-kpi-grid,
body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-grid {
    display: grid;
    gap: 16px;
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-grid {
    grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 0.72fr));
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-kpi-card {
    position: relative;
    min-height: 172px;
    overflow: hidden;
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-kpi-card.accent-blue {
    background:
        radial-gradient(circle at top right, rgba(31, 70, 173, 0.12), transparent 26%),
        linear-gradient(160deg, rgba(251, 245, 234, 0.985), rgba(239, 230, 213, 0.94));
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-kpi-card.accent-cyan {
    background:
        radial-gradient(circle at top right, rgba(37, 143, 167, 0.12), transparent 26%),
        linear-gradient(160deg, rgba(250, 246, 239, 0.985), rgba(236, 232, 222, 0.94));
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-kpi-card.accent-slate {
    background:
        radial-gradient(circle at top right, rgba(98, 112, 139, 0.1), transparent 26%),
        linear-gradient(160deg, rgba(249, 245, 238, 0.985), rgba(235, 231, 223, 0.94));
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-kpi-card.accent-amber {
    background:
        radial-gradient(circle at top right, rgba(181, 124, 44, 0.12), transparent 26%),
        linear-gradient(160deg, rgba(252, 245, 235, 0.985), rgba(240, 230, 214, 0.94));
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-kpi-card .sparkline {
    margin-top: 10px;
    height: 40px;
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-kpi-card .sparkline polyline {
    stroke-width: 3;
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .sparkline-errors polyline {
    stroke: #cf7a52;
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-trend-chart {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
    gap: 10px;
    align-items: end;
    min-height: 220px;
    margin-top: 10px;
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-bar-cluster,
body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-facet-list,
body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-user-list,
body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-timeline {
    display: grid;
    gap: 10px;
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-bar-cluster {
    gap: 8px;
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-bar-shell {
    position: relative;
    display: flex;
    align-items: end;
    justify-content: center;
    min-height: 150px;
    padding: 10px 8px;
    border-radius: 18px;
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-bar {
    position: absolute;
    bottom: 10px;
    border-radius: 999px;
    transform-origin: bottom;
    animation: app-rise 0.55s ease both;
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-bar.total {
    width: 26px;
    background: linear-gradient(180deg, #6aa9ff, #2b60cb);
    box-shadow: 0 10px 20px rgba(38, 104, 255, 0.16);
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-bar.error {
    width: 12px;
    background: linear-gradient(180deg, #f6c56e, #cd6d4d);
    box-shadow: 0 8px 18px rgba(214, 120, 76, 0.18);
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-bar-meta {
    display: grid;
    gap: 2px;
    text-align: center;
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-bar-meta span,
body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-mini-stat span,
body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-mini-stat small,
body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-user-main span,
body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-user-side span,
body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-timeline-topline span,
body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-timeline-event,
body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-timeline p {
    color: rgba(81, 63, 45, 0.74) !important;
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-facet-row,
body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-user-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 14px 15px;
    border-radius: 20px;
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-user-main,
body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-user-side,
body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-timeline-body {
    display: grid;
    gap: 3px;
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-user-side {
    text-align: right;
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-timeline-row {
    grid-template-columns: 132px minmax(0, 1fr);
    padding: 14px 15px;
    border-radius: 20px;
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-timeline-row.tone-ok {
    box-shadow: inset 3px 0 0 rgba(73, 145, 110, 0.72), 0 10px 22px rgba(61, 55, 41, 0.06);
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-timeline-row.tone-watch {
    box-shadow: inset 3px 0 0 rgba(205, 153, 57, 0.72), 0 10px 22px rgba(61, 55, 41, 0.06);
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-timeline-row.tone-alert {
    box-shadow: inset 3px 0 0 rgba(201, 87, 87, 0.78), 0 10px 22px rgba(61, 55, 41, 0.06);
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-timeline-when {
    font-size: 0.78rem;
    font-weight: 800;
    color: rgba(98, 74, 50, 0.72) !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-timeline-topline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: baseline;
}

@media (max-width: 1180px) {
    body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-hero,
    body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-grid {
        grid-template-columns: 1fr;
    }

    body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-hero,
    body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-kpi-grid,
    body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-grid {
        grid-template-columns: 1fr;
    }

    body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-hero {
        padding: 18px;
        border-radius: 24px;
    }

    body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-trend-chart {
        grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
    }

    body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-user-card,
    body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-timeline-row {
        grid-template-columns: 1fr;
    }

    body.kk-brand.app-mode .app-shell.app-mobile-ops .mobile-ops-user-side {
        text-align: left;
    }
}

@media (max-width: 640px) {
    .app-feedback-fab {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        min-width: 0;
    }
}

body.kk-brand.app-mode .kk-app-utility-row .app-hub-toggle,
body.kk-brand.app-mode .kk-app-utility-row .app-ai-cta,
body.kk-brand.app-mode .kk-app-utility-row .app-request-cta,
body.kk-brand.app-mode .kk-app-common-link {
    font-size: 0.98rem;
    line-height: 1.25;
    font-weight: 900;
    letter-spacing: 0.01em;
}

body.kk-brand.app-mode .kk-app-utility-row .app-hub-toggle,
body.kk-brand.app-mode .kk-app-common-link {
    color: #16222c;
}

body.kk-brand.app-mode .kk-app-utility-row .app-ai-cta,
body.kk-brand.app-mode .kk-app-utility-row .app-request-cta {
    color: #fffdf9;
}

body.kk-brand.app-mode .kk-app-utility-row .navbar-action-btn {
    min-width: 110px;
    justify-content: center;
    text-align: center;
}

body.kk-brand.app-mode .kk-app-utility-row .app-hub-toggle {
    background:
        linear-gradient(180deg, rgba(255, 253, 248, 1), rgba(244, 234, 218, 0.96)),
        repeating-linear-gradient(-18deg, rgba(145, 118, 84, 0.03) 0 10px, rgba(255, 255, 255, 0) 10px 20px);
    color: #12202a;
}

body.kk-brand.app-mode .kk-app-utility-row .app-hub-toggle,
body.kk-brand.app-mode .kk-app-utility-row .app-ai-cta {
    font-size: 1rem;
    letter-spacing: 0.015em;
}

body.kk-brand.app-mode .app-rail .rail-subtitle,
body.kk-brand.app-mode .app-rail .rail-hub-group-label,
body.kk-brand.app-mode .app-rail .rail-link,
body.kk-brand.app-mode .app-rail .rail-hub-link,
body.kk-brand.app-mode .app-rail .rail-focus-summary,
body.kk-brand.app-mode .app-rail .rail-hub-summary,
body.kk-brand.app-mode .app-rail .rail-hub-context {
    text-shadow: none;
}

body.kk-brand.app-mode .app-rail .rail-subtitle {
    font-size: 0.82rem;
    line-height: 1.45;
    letter-spacing: 0.06em;
    color: rgba(255, 249, 240, 0.92);
}

body.kk-brand.app-mode .app-rail .rail-hub-group-label {
    font-size: 0.87rem;
    line-height: 1.35;
    letter-spacing: 0.08em;
    color: rgba(255, 247, 232, 0.96);
}

body.kk-brand.app-mode .app-rail .rail-link,
body.kk-brand.app-mode .app-rail .rail-hub-link {
    font-size: 0.95rem;
    line-height: 1.4;
    color: rgba(255, 250, 242, 0.94);
}

body.kk-brand.app-mode .app-rail .rail-focus-summary,
body.kk-brand.app-mode .app-rail .rail-hub-summary,
body.kk-brand.app-mode .app-rail .rail-hub-context {
    font-size: 0.88rem;
    line-height: 1.5;
    color: rgba(248, 241, 229, 0.9);
}

/* 2026-04-08: Keith's shell readability hardening. */
body.kk-brand.app-mode .kk-app-utility-row .app-hub-toggle,
body.kk-brand.app-mode .kk-app-utility-row .app-ai-cta {
    color: #fffdf9 !important;
    border-color: rgba(24, 52, 128, 0.9) !important;
    background: linear-gradient(135deg, #2d5ec5, #173b93) !important;
    box-shadow: 0 16px 30px rgba(21, 46, 116, 0.24) !important;
}

body.kk-brand.app-mode .kk-app-utility-row .app-hub-toggle:hover,
body.kk-brand.app-mode .kk-app-utility-row .app-hub-toggle:focus-visible,
body.kk-brand.app-mode .kk-app-utility-row .app-ai-cta:hover,
body.kk-brand.app-mode .kk-app-utility-row .app-ai-cta:focus-visible {
    color: #ffffff !important;
    border-color: rgba(24, 52, 128, 1) !important;
    background: linear-gradient(135deg, #356bd7, #1a439f) !important;
}

body.kk-brand.app-mode .kk-app-common-links {
    gap: 12px;
}

body.kk-brand.app-mode .kk-app-common-link {
    color: #17232d !important;
    border-color: rgba(91, 66, 42, 0.22) !important;
    background: linear-gradient(180deg, rgba(255, 252, 248, 1), rgba(243, 233, 216, 0.96)) !important;
    box-shadow: 0 12px 22px rgba(68, 47, 27, 0.1) !important;
}

body.kk-brand.app-mode .kk-app-common-link:hover,
body.kk-brand.app-mode .kk-app-common-link:focus-visible {
    color: #111b24 !important;
    border-color: rgba(24, 52, 128, 0.42) !important;
}

body.kk-brand.app-mode .kk-app-common-link.active,
body.kk-brand.app-mode .kk-app-common-link[aria-current="page"] {
    color: #ffffff !important;
    border-color: rgba(24, 52, 128, 0.94) !important;
    background: linear-gradient(135deg, #2d5ec5, #173b93) !important;
    box-shadow: 0 18px 32px rgba(23, 59, 147, 0.24) !important;
}

body.kk-brand.app-mode .app-rail-toggle-inline,
body.kk-brand.app-mode .app-rail-peek {
    color: #fffdf8 !important;
    border-color: rgba(24, 52, 128, 0.52) !important;
    background: linear-gradient(135deg, rgba(45, 94, 197, 0.98), rgba(23, 59, 147, 0.98)) !important;
    box-shadow: 0 16px 28px rgba(21, 46, 116, 0.28) !important;
}

body.kk-brand.app-mode .app-rail .rail-subtitle,
body.kk-brand.app-mode .app-rail .rail-focus-summary,
body.kk-brand.app-mode .app-rail .rail-hub-summary,
body.kk-brand.app-mode .app-rail .rail-hub-context {
    color: rgba(255, 249, 241, 0.97) !important;
}

body.kk-brand.app-mode .app-rail .rail-hub-group-label,
body.kk-brand.app-mode .app-rail .rail-link,
body.kk-brand.app-mode .app-rail .rail-hub-link,
body.kk-brand.app-mode .app-rail .rail-title,
body.kk-brand.app-mode .app-rail .rail-label,
body.kk-brand.app-mode .app-rail .rail-value {
    color: #ffffff !important;
}

body.kk-brand.app-mode .app-rail .rail-link,
body.kk-brand.app-mode .app-rail .rail-hub-link {
    border-color: rgba(255, 239, 214, 0.22) !important;
    background: linear-gradient(180deg, rgba(255, 250, 241, 0.14), rgba(255, 250, 241, 0.06)) !important;
}

body.kk-brand.app-mode .app-rail .rail-link:hover,
body.kk-brand.app-mode .app-rail .rail-link:focus-visible,
body.kk-brand.app-mode .app-rail .rail-hub-link:hover,
body.kk-brand.app-mode .app-rail .rail-hub-link:focus-visible {
    color: #ffffff !important;
    border-color: rgba(117, 169, 255, 0.42) !important;
    background: linear-gradient(180deg, rgba(255, 250, 241, 0.22), rgba(255, 250, 241, 0.1)) !important;
}

body.kk-brand.app-mode .app-rail .rail-link.active,
body.kk-brand.app-mode .app-rail .rail-hub-link.active,
body.kk-brand.app-mode .app-rail .rail-hub-card.active {
    color: #ffffff !important;
    border-color: rgba(117, 169, 255, 0.56) !important;
    background: linear-gradient(135deg, rgba(45, 94, 197, 0.34), rgba(23, 59, 147, 0.28)) !important;
    box-shadow: 0 12px 24px rgba(21, 46, 116, 0.26) !important;
}

/* 2026-04-08 follow-up: force high-contrast shell states on Keith's shared UI. */
body.kk-brand.app-mode .kk-app-links-shell {
    padding: 0.28rem;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(17, 32, 62, 0.12), rgba(17, 32, 62, 0.04)) !important;
    box-shadow: inset 0 0 0 1px rgba(22, 47, 104, 0.08);
}

body.kk-brand.app-mode .kk-app-utility-row .navbar-action-btn,
body.kk-brand.app-mode .kk-app-common-link {
    text-shadow: none !important;
    -webkit-text-fill-color: currentColor !important;
}

body.kk-brand.app-mode .kk-app-utility-row .app-hub-toggle,
body.kk-brand.app-mode .kk-app-utility-row .app-ai-cta,
body.kk-brand.app-mode .kk-app-utility-row .app-request-cta {
    min-height: 46px;
    padding: 0.82rem 1.15rem;
    font-weight: 900 !important;
    color: #ffffff !important;
}

body.kk-brand.app-mode .kk-app-common-link {
    min-height: 44px;
    padding: 0.78rem 1.05rem;
    font-weight: 900 !important;
    color: #102235 !important;
    background: linear-gradient(180deg, rgba(255, 253, 249, 1), rgba(235, 226, 211, 0.98)) !important;
}

body.kk-brand.app-mode .kk-app-common-link:hover,
body.kk-brand.app-mode .kk-app-common-link:focus-visible {
    color: #0b1825 !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(241, 233, 220, 0.98)) !important;
    box-shadow: 0 16px 28px rgba(26, 52, 99, 0.12) !important;
}

body.kk-brand.app-mode .kk-app-common-link.active,
body.kk-brand.app-mode .kk-app-common-link[aria-current="page"] {
    color: #ffffff !important;
    background: linear-gradient(135deg, #184db5, #0e367f) !important;
    border-color: rgba(9, 31, 80, 0.95) !important;
    box-shadow: 0 18px 30px rgba(14, 54, 127, 0.28) !important;
}

body.kk-brand.app-mode .app-rail {
    background: linear-gradient(180deg, #10254a 0%, #173363 52%, #1b3d73 100%) !important;
}

body.kk-brand.app-mode .app-rail .rail-hub-group-toggle,
body.kk-brand.app-mode .app-rail .rail-hub-card,
body.kk-brand.app-mode .app-rail .rail-link,
body.kk-brand.app-mode .app-rail .rail-hub-link {
    text-shadow: none !important;
}

body.kk-brand.app-mode .app-rail .rail-hub-group-toggle {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)) !important;
    border-color: rgba(196, 218, 255, 0.18) !important;
}

body.kk-brand.app-mode .app-rail .rail-hub-group-label,
body.kk-brand.app-mode .app-rail .rail-link,
body.kk-brand.app-mode .app-rail .rail-hub-link,
body.kk-brand.app-mode .app-rail .rail-title,
body.kk-brand.app-mode .app-rail .rail-label,
body.kk-brand.app-mode .app-rail .rail-value,
body.kk-brand.app-mode .app-rail .rail-hub-title,
body.kk-brand.app-mode .app-rail .rail-hub-kicker,
body.kk-brand.app-mode .app-rail .rail-hub-tool-label {
    color: #ffffff !important;
}

body.kk-brand.app-mode .app-rail .rail-subtitle,
body.kk-brand.app-mode .app-rail .rail-focus-summary,
body.kk-brand.app-mode .app-rail .rail-hub-summary,
body.kk-brand.app-mode .app-rail .rail-hub-context,
body.kk-brand.app-mode .app-rail .rail-hub-meta {
    color: rgba(244, 248, 255, 0.94) !important;
}

body.kk-brand.app-mode .app-rail .rail-link.active,
body.kk-brand.app-mode .app-rail .rail-hub-link.active,
body.kk-brand.app-mode .app-rail .rail-hub-card.active,
body.kk-brand.app-mode .app-rail .rail-hub-group.active .rail-hub-group-toggle,
body.kk-brand.app-mode .app-rail .rail-hub-group.is-open .rail-hub-group-toggle {
    border-color: rgba(161, 201, 255, 0.72) !important;
    background: linear-gradient(135deg, rgba(63, 124, 234, 0.52), rgba(28, 74, 154, 0.48)) !important;
    box-shadow: 0 14px 26px rgba(8, 28, 69, 0.3) !important;
}

body.kk-brand.app-mode .app-rail .rail-link,
body.kk-brand.app-mode .app-rail .rail-hub-link,
body.kk-brand.app-mode .app-rail .rail-hub-group-toggle,
body.kk-brand.app-mode .app-rail .rail-hub-card {
    font-weight: 800 !important;
    color: #ffffff !important;
    text-shadow: none !important;
}

body.kk-brand.app-mode .app-rail .rail-link.active,
body.kk-brand.app-mode .app-rail .rail-link[aria-current="page"],
body.kk-brand.app-mode .app-rail .rail-hub-link.active,
body.kk-brand.app-mode .app-rail .rail-hub-link[aria-current="page"],
body.kk-brand.app-mode .app-rail .rail-hub-card.active {
    color: #ffffff !important;
    text-shadow: none !important;
}

body.kk-brand.app-mode .app-rail .rail-hub-group-links {
    gap: 10px !important;
    padding: 6px 4px 6px 8px !important;
}

body.kk-brand.app-mode .app-rail .rail-link {
    display: block !important;
    min-height: 42px !important;
    padding: 11px 14px !important;
    border-radius: 14px !important;
    border-color: rgba(192, 220, 255, 0.32) !important;
    background: linear-gradient(180deg, rgba(16, 34, 67, 0.96), rgba(11, 24, 48, 0.94)) !important;
    color: #ffffff !important;
    font-size: 0.96rem !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.015em !important;
    white-space: normal !important;
    word-break: break-word !important;
    box-shadow: 0 10px 18px rgba(4, 14, 36, 0.22) !important;
}

body.kk-brand.app-mode .app-rail .rail-link:hover,
body.kk-brand.app-mode .app-rail .rail-link:focus-visible {
    border-color: rgba(153, 201, 255, 0.58) !important;
    background: linear-gradient(180deg, rgba(37, 74, 140, 0.98), rgba(20, 46, 94, 0.96)) !important;
    box-shadow: 0 14px 24px rgba(8, 25, 61, 0.28) !important;
}

body.kk-brand.app-mode .app-rail .rail-link.active,
body.kk-brand.app-mode .app-rail .rail-link[aria-current="page"] {
    border-color: rgba(176, 214, 255, 0.74) !important;
    background: linear-gradient(135deg, rgba(65, 125, 236, 0.92), rgba(28, 74, 154, 0.92)) !important;
    box-shadow: 0 16px 26px rgba(9, 29, 72, 0.34) !important;
}

body.app-dashboard.kk-brand.app-mode .kk-app-header {
    box-shadow: 0 20px 34px rgba(10, 26, 58, 0.12) !important;
}

body.app-dashboard.kk-brand.app-mode .kk-app-utility-row .app-hub-toggle,
body.app-dashboard.kk-brand.app-mode .kk-app-utility-row .app-ai-cta,
body.app-dashboard.kk-brand.app-mode .kk-app-utility-row .app-request-cta {
    color: #ffffff !important;
    background: linear-gradient(135deg, #2456c1, #133a92) !important;
    border-color: rgba(11, 37, 93, 0.94) !important;
}

body.app-dashboard.kk-brand.app-mode .kk-app-utility-row .app-hub-toggle:hover,
body.app-dashboard.kk-brand.app-mode .kk-app-utility-row .app-hub-toggle:focus-visible,
body.app-dashboard.kk-brand.app-mode .kk-app-utility-row .app-ai-cta:hover,
body.app-dashboard.kk-brand.app-mode .kk-app-utility-row .app-ai-cta:focus-visible,
body.app-dashboard.kk-brand.app-mode .kk-app-utility-row .app-request-cta:hover,
body.app-dashboard.kk-brand.app-mode .kk-app-utility-row .app-request-cta:focus-visible {
    color: #ffffff !important;
    background: linear-gradient(135deg, #2f67db, #1747ab) !important;
    border-color: rgba(11, 37, 93, 1) !important;
}

body.app-dashboard.kk-brand.app-mode .app-home-dashboard .app-rail {
    background:
        radial-gradient(circle at top left, rgba(110, 164, 255, 0.22), transparent 28%),
        linear-gradient(180deg, rgba(18, 42, 84, 0.99), rgba(17, 35, 72, 0.99) 52%, rgba(15, 30, 62, 0.99)) !important;
    border-color: rgba(157, 196, 255, 0.24) !important;
    box-shadow: 0 28px 58px rgba(8, 19, 44, 0.36) !important;
}

body.app-dashboard.kk-brand.app-mode .app-home-dashboard .rail-brand-dashboard {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05)),
        radial-gradient(circle at top left, rgba(116, 170, 255, 0.18), transparent 52%) !important;
    border-color: rgba(184, 213, 255, 0.22) !important;
}

body.app-dashboard.kk-brand.app-mode .app-home-dashboard .rail-brand-dashboard .rail-kicker,
body.app-dashboard.kk-brand.app-mode .app-home-dashboard .rail-footer .rail-label,
body.app-dashboard.kk-brand.app-mode .app-home-dashboard .rail-hub-kicker {
    color: rgba(222, 236, 255, 0.84) !important;
}

body.app-dashboard.kk-brand.app-mode .app-home-dashboard .rail-brand-dashboard .rail-title,
body.app-dashboard.kk-brand.app-mode .app-home-dashboard .rail-brand-dashboard .rail-subtitle,
body.app-dashboard.kk-brand.app-mode .app-home-dashboard .rail-footer .rail-value,
body.app-dashboard.kk-brand.app-mode .app-home-dashboard .rail-hub-summary strong,
body.app-dashboard.kk-brand.app-mode .app-home-dashboard .rail-hub-metric,
body.app-dashboard.kk-brand.app-mode .app-home-dashboard .rail-hub-metric b,
body.app-dashboard.kk-brand.app-mode .app-home-dashboard .rail-hub-body p,
body.app-dashboard.kk-brand.app-mode .app-home-dashboard .rail-footnote,
body.app-dashboard.kk-brand.app-mode .app-home-dashboard .rail-hub-link {
    color: #ffffff !important;
}

body.app-dashboard.kk-brand.app-mode .app-home-dashboard .rail-hub-panel {
    background:
        radial-gradient(circle at top right, rgba(129, 175, 255, 0.2), transparent 36%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.05)) !important;
    border-color: rgba(190, 217, 255, 0.18) !important;
}

body.app-dashboard.kk-brand.app-mode .app-home-dashboard .rail-hub-body {
    border-top-color: rgba(190, 217, 255, 0.14) !important;
}

body.app-dashboard.kk-brand.app-mode .app-home-dashboard .rail-hub-metric {
    background: rgba(230, 240, 255, 0.12) !important;
    border-color: rgba(190, 217, 255, 0.16) !important;
}

body.app-dashboard.kk-brand.app-mode .app-home-dashboard .rail-hub-link {
    background: rgba(230, 240, 255, 0.12) !important;
    border-color: rgba(190, 217, 255, 0.2) !important;
}

body.app-dashboard.kk-brand.app-mode .app-home-dashboard .rail-hub-link-strong {
    background: linear-gradient(180deg, rgba(94, 147, 236, 0.44), rgba(44, 92, 182, 0.3)) !important;
    border-color: rgba(167, 201, 255, 0.32) !important;
}

body.app-dashboard.kk-brand.app-mode .app-home-dashboard .rail-footer {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(190, 217, 255, 0.14) !important;
}

/* 2026-04-08 final rail contrast pass: keep all Keith's left-rail surfaces dark. */
body.kk-brand.app-mode .app-rail,
body.app-dashboard.kk-brand.app-mode .app-home-dashboard .app-rail {
    background:
        radial-gradient(circle at top left, rgba(96, 150, 255, 0.2), transparent 30%),
        linear-gradient(180deg, rgba(14, 34, 70, 0.99), rgba(12, 29, 59, 0.995) 50%, rgba(10, 24, 48, 0.995)) !important;
    border-color: rgba(163, 198, 255, 0.22) !important;
}

body.kk-brand.app-mode .app-rail .rail-brand,
body.kk-brand.app-mode .app-rail .rail-focus-card,
body.kk-brand.app-mode .app-rail .rail-hub-card,
body.kk-brand.app-mode .app-rail .rail-hub-panel,
body.kk-brand.app-mode .app-rail .rail-footer,
body.kk-brand.app-mode .app-rail .rail-hub-group-toggle,
body.kk-brand.app-mode .app-rail .rail-link,
body.kk-brand.app-mode .app-rail .rail-hub-link {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)),
        linear-gradient(180deg, rgba(22, 49, 98, 0.95), rgba(16, 39, 80, 0.95)) !important;
    border-color: rgba(179, 210, 255, 0.2) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 20px rgba(6, 18, 40, 0.22) !important;
}

body.kk-brand.app-mode .app-rail .rail-hub-section-label,
body.kk-brand.app-mode .app-rail .rail-kicker,
body.kk-brand.app-mode .app-rail .rail-focus-kicker,
body.kk-brand.app-mode .app-rail .rail-hub-kicker,
body.kk-brand.app-mode .app-rail .rail-label,
body.kk-brand.app-mode .app-rail .rail-hub-group-label {
    color: rgba(214, 231, 255, 0.88) !important;
}

body.kk-brand.app-mode .app-rail .rail-title,
body.kk-brand.app-mode .app-rail .rail-focus-title,
body.kk-brand.app-mode .app-rail .rail-hub-title,
body.kk-brand.app-mode .app-rail .rail-value,
body.kk-brand.app-mode .app-rail .rail-link,
body.kk-brand.app-mode .app-rail .rail-hub-link,
body.kk-brand.app-mode .app-rail .rail-hub-tool-label {
    color: #ffffff !important;
}

body.kk-brand.app-mode .app-rail .rail-subtitle,
body.kk-brand.app-mode .app-rail .rail-focus-summary,
body.kk-brand.app-mode .app-rail .rail-hub-summary,
body.kk-brand.app-mode .app-rail .rail-hub-context,
body.kk-brand.app-mode .app-rail .rail-hub-meta,
body.kk-brand.app-mode .app-rail .rail-focus-meta,
body.kk-brand.app-mode .app-rail .rail-focus-meta span,
body.kk-brand.app-mode .app-rail .rail-hub-body p,
body.kk-brand.app-mode .app-rail .rail-footnote {
    color: rgba(236, 244, 255, 0.92) !important;
}

body.kk-brand.app-mode .app-rail .rail-link:hover,
body.kk-brand.app-mode .app-rail .rail-link:focus-visible,
body.kk-brand.app-mode .app-rail .rail-hub-link:hover,
body.kk-brand.app-mode .app-rail .rail-hub-link:focus-visible,
body.kk-brand.app-mode .app-rail .rail-hub-card:hover,
body.kk-brand.app-mode .app-rail .rail-hub-group-toggle:hover,
body.kk-brand.app-mode .app-rail .rail-hub-group-toggle:focus-visible {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)),
        linear-gradient(180deg, rgba(28, 63, 125, 0.98), rgba(20, 49, 102, 0.98)) !important;
    border-color: rgba(188, 216, 255, 0.36) !important;
    color: #ffffff !important;
}

body.kk-brand.app-mode .app-rail .rail-link.active,
body.kk-brand.app-mode .app-rail .rail-link[aria-current="page"],
body.kk-brand.app-mode .app-rail .rail-hub-link.active,
body.kk-brand.app-mode .app-rail .rail-hub-link[aria-current="page"],
body.kk-brand.app-mode .app-rail .rail-hub-card.active,
body.kk-brand.app-mode .app-rail .rail-hub-group.active .rail-hub-group-toggle,
body.kk-brand.app-mode .app-rail .rail-hub-group.is-open .rail-hub-group-toggle,
body.app-dashboard.kk-brand.app-mode .app-home-dashboard .rail-hub-link-strong {
    background:
        linear-gradient(180deg, rgba(117, 168, 255, 0.18), rgba(117, 168, 255, 0.06)),
        linear-gradient(135deg, rgba(54, 112, 218, 0.98), rgba(22, 63, 142, 0.98)) !important;
    border-color: rgba(201, 224, 255, 0.5) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 28px rgba(8, 31, 79, 0.34) !important;
}

body.app-dashboard.kk-brand.app-mode .app-home-dashboard .rail-hub-metric {
    background: rgba(214, 230, 255, 0.12) !important;
    border-color: rgba(194, 220, 255, 0.22) !important;
    color: #ffffff !important;
}

/* 2026-04-18 shared shell normalization: stable header + consistent app hub rail. */
body.kk-brand.app-mode .kk-app-header {
    margin-bottom: 20px !important;
    border-bottom: 1px solid rgba(111, 77, 48, 0.16) !important;
    background:
        linear-gradient(180deg, rgba(255, 252, 247, 0.94), rgba(244, 234, 216, 0.88)) !important;
    box-shadow: 0 18px 34px rgba(68, 47, 27, 0.08) !important;
    backdrop-filter: blur(18px);
}

body.kk-brand.app-mode .kk-app-header-inner {
    grid-template-columns: minmax(220px, 280px) minmax(340px, 1fr) auto !important;
    grid-template-areas:
        "brand search utility"
        "brand links utility" !important;
    align-items: center !important;
    gap: 14px 18px !important;
    padding: 18px 0 16px !important;
}

body.kk-brand.app-mode .kk-app-brand-column {
    display: flex;
    align-self: stretch !important;
}

body.kk-brand.app-mode .kk-app-brand-lockup {
    width: 100%;
    min-height: 108px;
    justify-content: flex-start;
    border-radius: 24px;
    background:
        linear-gradient(145deg, rgba(255, 252, 247, 0.98), rgba(238, 227, 209, 0.94)) !important;
    border: 1px solid rgba(124, 94, 61, 0.14) !important;
    box-shadow: 0 18px 34px rgba(68, 47, 27, 0.08) !important;
}

body.kk-brand.app-mode .kk-app-brand-logo {
    height: 36px;
    max-width: min(252px, 100%);
}

body.kk-brand.app-mode .kk-app-command-layer {
    align-self: stretch;
    z-index: 3;
}

body.kk-brand.app-mode .kk-app-command-layer .command-wrap {
    width: 100%;
    max-width: none;
}

body.kk-brand.app-mode .kk-app-utility-row {
    align-self: stretch;
    align-content: flex-start;
    justify-content: flex-end;
    gap: 8px;
}

body.kk-brand.app-mode .kk-app-utility-row .navbar-action-btn {
    min-width: 128px;
}

body.kk-brand.app-mode .kk-app-links-shell {
    display: grid;
    gap: 8px;
    align-self: start;
    min-width: 0;
    padding: 12px 14px 14px;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(224, 232, 234, 0.54), rgba(255, 249, 239, 0.82)) !important;
    border: 1px solid rgba(124, 94, 61, 0.12);
    box-shadow: 0 18px 30px rgba(68, 47, 27, 0.08);
}

body.kk-brand.app-mode .kk-app-links-kicker {
    padding-inline: 2px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(104, 77, 51, 0.8);
}

body.kk-brand.app-mode .kk-app-common-links {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    scrollbar-width: none;
}

body.kk-brand.app-mode .kk-app-common-links::-webkit-scrollbar {
    display: none;
}

body.kk-brand.app-mode .kk-app-common-link {
    flex: 0 0 auto;
    min-width: max-content;
}

body.kk-brand.app-mode .app-rail.app-rail-hub {
    gap: 14px;
    padding: 18px !important;
    border-radius: 34px !important;
    background:
        linear-gradient(180deg, rgba(101, 77, 50, 0.88), rgba(20, 46, 96, 0.96)) !important;
    border: 1px solid rgba(214, 192, 161, 0.12) !important;
    box-shadow: 0 28px 56px rgba(12, 24, 48, 0.28) !important;
}

body.kk-brand.app-mode .app-rail.app-rail-hub .rail-nav.rail-hub-stack {
    display: grid;
    gap: 10px;
}

body.kk-brand.app-mode .app-rail.app-rail-hub .rail-brand-hub,
body.kk-brand.app-mode .app-rail.app-rail-hub .rail-focus-card,
body.kk-brand.app-mode .app-rail.app-rail-hub .rail-hub-card {
    border-radius: 24px !important;
}

body.kk-brand.app-mode .app-rail.app-rail-hub .rail-footer {
    margin-top: 0;
}

@media (max-width: 1180px) {
    body.kk-brand.app-mode .kk-app-header-inner {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "brand utility"
            "search search"
            "links links" !important;
    }

    body.kk-brand.app-mode .kk-app-brand-lockup {
        min-height: 76px;
    }

    body.kk-brand.app-mode .kk-app-common-links {
        flex-wrap: wrap !important;
        overflow: visible;
        padding-bottom: 0;
    }
}

@media (max-width: 760px) {
    body.kk-brand.app-mode .kk-app-header-inner {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "brand utility"
            "search search"
            "links links" !important;
        gap: 12px !important;
        padding: 14px 0 14px !important;
    }

    body.kk-brand.app-mode .kk-app-brand-lockup {
        min-height: 72px;
        padding: 16px 18px;
        border-radius: 20px;
    }

    body.kk-brand.app-mode .kk-app-brand-logo {
        height: 32px;
        max-width: min(190px, 100%);
    }

    body.kk-brand.app-mode .kk-app-command-layer .command-wrap {
        min-height: 58px;
    }

    body.kk-brand.app-mode .kk-app-utility-row {
        align-self: start;
        gap: 8px;
    }

    body.kk-brand.app-mode .kk-app-utility-row .app-ai-cta,
    body.kk-brand.app-mode .kk-app-utility-row .app-request-cta {
        display: none !important;
    }

    body.kk-brand.app-mode .kk-app-utility-row .header-inbox-btn {
        min-width: 0;
        min-height: 46px;
        padding-inline: 16px;
        border-radius: 14px;
    }

    body.kk-brand.app-mode .kk-app-links-shell {
        gap: 6px;
        padding: 10px 12px 12px;
        border-radius: 20px;
    }

    body.kk-brand.app-mode .kk-app-links-kicker {
        font-size: 0.62rem;
        letter-spacing: 0.16em;
    }

    body.kk-brand.app-mode .kk-app-common-links {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 2px 1px 4px;
    }

    body.kk-brand.app-mode .kk-app-common-link {
        min-height: 40px;
        padding: 9px 14px;
        font-size: 0.92rem;
        box-shadow: 0 8px 18px rgba(68, 47, 27, 0.08);
    }

    body.kk-brand.app-mode .app-rail.app-rail-hub {
        padding: 16px !important;
        border-radius: 28px !important;
    }

    body.kk-brand.app-mode .app-rail.app-rail-hub .rail-brand-hub,
    body.kk-brand.app-mode .app-rail.app-rail-hub .rail-focus-card,
    body.kk-brand.app-mode .app-rail.app-rail-hub .rail-hub-card {
        border-radius: 20px !important;
    }
}

@media (max-width: 520px) {
    body.kk-brand.app-mode .kk-app-header {
        margin-bottom: 16px !important;
    }

    body.kk-brand.app-mode .kk-app-header-inner {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "brand"
            "utility"
            "search"
            "links" !important;
        gap: 10px !important;
    }

    body.kk-brand.app-mode .kk-app-brand-column,
    body.kk-brand.app-mode .kk-app-utility-row,
    body.kk-brand.app-mode .kk-app-command-layer,
    body.kk-brand.app-mode .kk-app-links-shell {
        width: 100%;
    }

    body.kk-brand.app-mode .kk-app-brand-lockup {
        min-height: 64px;
        padding: 14px 16px;
    }

    body.kk-brand.app-mode .kk-app-utility-row {
        justify-content: stretch;
    }

    body.kk-brand.app-mode .kk-app-utility-row .header-inbox-btn {
        width: 100%;
    }

    body.kk-brand.app-mode .kk-app-links-shell {
        padding-inline: 10px;
    }
}

@media (max-width: 1100px) {
    body.kk-brand.app-mode .app-rail.app-rail-hub {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }

    body.kk-brand.app-mode .app-rail.app-rail-hub .rail-nav,
    body.kk-brand.app-mode .app-rail.app-rail-hub .rail-nav.rail-hub-stack {
        flex-direction: column !important;
        width: 100%;
    }
}

@media (max-width: 640px) {
    body.kk-brand.app-mode .app-rail.app-rail-hub .rail-hub-links {
        grid-template-columns: 1fr !important;
    }

    body.device-phone.app-mode .kk-mobile-appbar-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

/* 2026-04-18 shell cleanup final: compact header, no duplicate phone header, readable rail. */
body.kk-brand.app-mode .kk-app-header {
    margin-bottom: 14px !important;
    border-bottom: 1px solid rgba(124, 94, 61, 0.14) !important;
    background: linear-gradient(180deg, rgba(255, 253, 249, 0.97), rgba(242, 234, 222, 0.94)) !important;
    box-shadow: 0 14px 24px rgba(68, 47, 27, 0.08) !important;
}

body.kk-brand.app-mode .kk-app-header-inner {
    grid-template-columns: 210px minmax(280px, 1fr) auto !important;
    grid-template-areas:
        "brand search utility"
        "brand links links" !important;
    gap: 10px 16px !important;
    padding: 10px 0 12px !important;
}

body.kk-brand.app-mode .kk-app-brand-lockup {
    min-height: 72px !important;
    padding: 14px 16px !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 18px rgba(68, 47, 27, 0.08) !important;
}

body.kk-brand.app-mode .kk-app-brand-logo {
    height: 30px !important;
    max-width: min(180px, 100%) !important;
}

body.kk-brand.app-mode .kk-app-command-layer .command-wrap,
body.kk-brand.app-mode .kk-app-command-layer .command-sheet,
body.kk-brand.app-mode .kk-app-command-layer .command-input-shell {
    min-height: 48px !important;
}

body.kk-brand.app-mode .kk-app-utility-row {
    align-self: center !important;
    align-content: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}

body.kk-brand.app-mode .kk-app-utility-row .navbar-action-btn {
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    font-size: 0.92rem !important;
    box-shadow: 0 10px 18px rgba(68, 47, 27, 0.08) !important;
}

body.kk-brand.app-mode .kk-app-links-shell {
    align-self: center !important;
    gap: 6px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.kk-brand.app-mode .kk-app-links-kicker {
    padding-inline: 4px !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.16em !important;
}

body.kk-brand.app-mode .kk-app-common-links {
    gap: 8px !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    padding: 0 !important;
}

body.kk-brand.app-mode .kk-app-common-link {
    min-height: 38px !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    font-size: 0.92rem !important;
    box-shadow: 0 8px 14px rgba(68, 47, 27, 0.06) !important;
}

body.kk-brand.app-mode .app-rail,
body.kk-brand.app-mode .app-rail.app-rail-hub {
    gap: 12px !important;
    padding: 18px !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, rgba(247, 243, 236, 0.98), rgba(232, 223, 211, 0.96)) !important;
    border: 1px solid rgba(124, 94, 61, 0.14) !important;
    box-shadow: 0 18px 34px rgba(68, 47, 27, 0.12) !important;
    color: #1c2a33 !important;
}

body.kk-brand.app-mode .app-rail .rail-brand,
body.kk-brand.app-mode .app-rail .rail-focus-card,
body.kk-brand.app-mode .app-rail .rail-hub-card,
body.kk-brand.app-mode .app-rail .rail-footer,
body.kk-brand.app-mode .app-rail .rail-link,
body.kk-brand.app-mode .app-rail .rail-hub-link,
body.kk-brand.app-mode .app-rail .rail-hub-primary {
    background: linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(241, 232, 220, 0.96)) !important;
    border: 1px solid rgba(124, 94, 61, 0.12) !important;
    box-shadow: 0 8px 16px rgba(68, 47, 27, 0.08) !important;
    color: #1c2a33 !important;
}

body.kk-brand.app-mode .app-rail .rail-brand,
body.kk-brand.app-mode .app-rail .rail-focus-card,
body.kk-brand.app-mode .app-rail .rail-hub-card,
body.kk-brand.app-mode .app-rail .rail-footer {
    border-radius: 18px !important;
}

body.kk-brand.app-mode .app-rail .rail-link,
body.kk-brand.app-mode .app-rail .rail-hub-link,
body.kk-brand.app-mode .app-rail .rail-hub-primary {
    min-height: 40px !important;
    border-radius: 14px !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
}

body.kk-brand.app-mode .app-rail .rail-brand-logo-mark {
    background: linear-gradient(135deg, #1f57bb, #0f3b88) !important;
    box-shadow: 0 10px 18px rgba(15, 59, 136, 0.2) !important;
}

body.kk-brand.app-mode .app-rail .rail-kicker,
body.kk-brand.app-mode .app-rail .rail-focus-kicker,
body.kk-brand.app-mode .app-rail .rail-hub-kicker,
body.kk-brand.app-mode .app-rail .rail-label,
body.kk-brand.app-mode .app-rail .rail-hub-section-label,
body.kk-brand.app-mode .app-rail .rail-hub-tool-label {
    color: rgba(101, 78, 53, 0.78) !important;
}

body.kk-brand.app-mode .app-rail .rail-title,
body.kk-brand.app-mode .app-rail .rail-focus-title,
body.kk-brand.app-mode .app-rail .rail-hub-title,
body.kk-brand.app-mode .app-rail .rail-value,
body.kk-brand.app-mode .app-rail .rail-link,
body.kk-brand.app-mode .app-rail .rail-hub-link,
body.kk-brand.app-mode .app-rail .rail-hub-primary {
    color: #18252f !important;
}

body.kk-brand.app-mode .app-rail .rail-subtitle,
body.kk-brand.app-mode .app-rail .rail-focus-summary,
body.kk-brand.app-mode .app-rail .rail-hub-summary,
body.kk-brand.app-mode .app-rail .rail-hub-context,
body.kk-brand.app-mode .app-rail .rail-focus-meta,
body.kk-brand.app-mode .app-rail .rail-focus-meta span {
    color: #5a6972 !important;
}

body.kk-brand.app-mode .app-rail .rail-link:hover,
body.kk-brand.app-mode .app-rail .rail-link:focus-visible,
body.kk-brand.app-mode .app-rail .rail-hub-link:hover,
body.kk-brand.app-mode .app-rail .rail-hub-link:focus-visible,
body.kk-brand.app-mode .app-rail .rail-hub-primary:hover,
body.kk-brand.app-mode .app-rail .rail-hub-primary:focus-visible,
body.kk-brand.app-mode .app-rail .rail-hub-card:hover,
body.kk-brand.app-mode .app-rail .rail-hub-card:focus-within {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(239, 232, 222, 0.98)) !important;
    border-color: rgba(49, 87, 164, 0.24) !important;
    box-shadow: 0 12px 22px rgba(30, 56, 101, 0.12) !important;
    transform: none !important;
}

body.kk-brand.app-mode .app-rail .rail-link.active,
body.kk-brand.app-mode .app-rail .rail-link[aria-current="page"],
body.kk-brand.app-mode .app-rail .rail-hub-link.active,
body.kk-brand.app-mode .app-rail .rail-hub-link[aria-current="page"],
body.kk-brand.app-mode .app-rail .rail-hub-card.active,
body.kk-brand.app-mode .app-rail .rail-hub-primary {
    background: linear-gradient(135deg, rgba(43, 91, 194, 0.14), rgba(14, 54, 127, 0.16)), linear-gradient(180deg, rgba(255, 252, 247, 1), rgba(238, 230, 219, 0.98)) !important;
    border-color: rgba(34, 80, 170, 0.3) !important;
    box-shadow: 0 12px 22px rgba(30, 56, 101, 0.12) !important;
    color: #12366f !important;
}

body.kk-brand.app-mode .app-rail .rail-hub-links {
    gap: 8px !important;
}

@media (max-width: 980px) {
    body.kk-brand.app-mode .kk-app-header-inner {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "brand utility"
            "search search"
            "links links" !important;
    }

    body.kk-brand.app-mode .kk-app-utility-row {
        flex-wrap: wrap !important;
    }
}

@media (max-width: 760px) {
    body.kk-brand.app-mode .kk-app-header,
    body.device-phone.app-mode .kk-app-header {
        display: none !important;
    }

    body.device-phone.app-mode .kk-mobile-appbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 42 !important;
        padding: 10px 0 10px !important;
        background: linear-gradient(180deg, rgba(255, 253, 249, 0.98), rgba(241, 232, 220, 0.95)) !important;
        border-bottom: 1px solid rgba(124, 94, 61, 0.12) !important;
        box-shadow: 0 12px 18px rgba(68, 47, 27, 0.08) !important;
    }

    body.device-phone.app-mode .kk-mobile-appbar-inner {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    body.device-phone.app-mode .kk-mobile-appbar-copy {
        gap: 2px !important;
    }

    body.device-phone.app-mode .kk-mobile-appbar-actions {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        padding-bottom: 2px !important;
    }

    body.device-phone.app-mode .kk-mobile-appbar-action {
        flex: 0 0 auto !important;
        min-height: 40px !important;
        padding: 9px 12px !important;
        border-radius: 12px !important;
        box-shadow: 0 8px 14px rgba(68, 47, 27, 0.06) !important;
    }

    body.device-phone.app-mode .app-shell,
    body.device-phone.app-mode .app-rail,
    body.device-phone.app-mode .app-rail.app-rail-hub {
        border-radius: 20px !important;
    }
}

@media (min-width: 761px) {
    body.kk-brand.app-mode .kk-app-command-layer .command-results,
    body.kk-brand.app-mode .kk-app-command-layer .command-empty {
        position: fixed !important;
        top: var(--command-results-top, 140px) !important;
        left: var(--command-results-left, 24px) !important;
        right: auto !important;
        width: min(var(--command-results-width, 680px), calc(100vw - var(--command-results-left, 24px) - 24px)) !important;
        max-height: min(58vh, 520px) !important;
        z-index: 55 !important;
    }

    body.kk-brand.app-mode .kk-app-command-layer .command-empty {
        margin-top: 0 !important;
        box-shadow: 0 18px 30px rgba(89, 63, 37, 0.14) !important;
    }
}

body.kk-brand.app-mode.app-rail-collapsed .kk-app-header {
    margin-bottom: 8px !important;
}

body.kk-brand.app-mode.app-rail-collapsed .kk-app-header-inner {
    grid-template-areas: "brand utility" !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px 16px !important;
    padding: 10px 0 8px !important;
}

body.kk-brand.app-mode.app-rail-collapsed .kk-app-command-layer,
body.kk-brand.app-mode.app-rail-collapsed .kk-app-links-shell {
    display: none !important;
}

body.kk-brand.app-mode.app-rail-collapsed .kk-app-brand-lockup {
    min-height: 54px !important;
    min-width: 176px !important;
    padding: 10px 14px !important;
    border-radius: 18px !important;
}

body.kk-brand.app-mode.app-rail-collapsed .kk-app-brand-logo {
    max-height: 28px !important;
}

body.kk-brand.app-mode.app-rail-collapsed .kk-app-utility-row {
    align-self: center !important;
}