/* Nsika application shell --------------------------------------------------
   Palette: gold #966D08, cream #EDD4AD, lavender #CFADED,
   sage #70987F, brown #6E5B3F. */
:root {
    --ns-brand-primary: #151030;
    --ns-brand-secondary: #8b5bc1;
    --ns-brand-on-primary: #ffffff;
    --ns-brand-on-secondary: #ffffff;
    --ns-rail-bg: color-mix(in srgb, var(--ns-brand-primary) 72%, var(--ns-surface));
    --ns-gold: #966d08;
    --ns-cream: #edd4ad;
    --ns-lavender: color-mix(in srgb, var(--ns-brand-secondary) 64%, white);
    --ns-sage: #70987f;
    --ns-brown: #6e5b3f;
    --ns-danger: #b44a4a;
    --ns-accent: var(--ns-brand-secondary);
    --ns-accent-strong: color-mix(in srgb, var(--ns-brand-secondary) 78%, #17131c);
    --ns-accent-soft: color-mix(in srgb, var(--ns-brand-secondary) 15%, white);
    --ns-bg: color-mix(in srgb, var(--ns-brand-primary) 4%, #f8f6f2);
    --ns-surface: color-mix(in srgb, var(--ns-brand-primary) 2%, #fffdfa);
    --ns-surface-raised: #ffffff;
    --ns-surface-muted: color-mix(in srgb, var(--ns-brand-primary) 7%, #f5f1eb);
    --ns-sidebar: color-mix(in srgb, var(--ns-brand-primary) 6%, #f4f0ea);
    --ns-text: #271f19;
    --ns-text-muted: #71675d;
    --ns-border: color-mix(in srgb, var(--ns-brand-primary) 18%, transparent);
    --ns-field-border: color-mix(in srgb, var(--ns-brand-primary) 28%, #8d8176);
    --ns-field-bg: color-mix(in srgb, #ffffff 88%, var(--ns-surface));
    --ns-field-text: #271f19;
    --ns-field-placeholder: #7a7067;
    --ns-shadow-sm: 0 2px 7px color-mix(in srgb, var(--ns-brand-primary) 12%, transparent);
    --ns-shadow-md: 0 8px 24px color-mix(in srgb, var(--ns-brand-primary) 14%, transparent);
    --ns-shadow-lg: 0 18px 48px color-mix(in srgb, var(--ns-brand-primary) 17%, transparent);
    --ns-brand-glow: 0 8px 22px color-mix(in srgb, var(--ns-brand-secondary) 25%, transparent);
    --ns-shadow: var(--ns-shadow-sm);
    --ns-focus: 0 0 0 3px color-mix(in srgb, var(--ns-brand-secondary) 42%, transparent);
    --ns-radius-sm: 10px;
    --ns-radius: 16px;
    --ns-radius-lg: 22px;
    --ns-motion: 180ms cubic-bezier(.2, .8, .2, 1);
}

html[data-theme="dark"] {
    --ns-accent: color-mix(in srgb, var(--ns-brand-secondary) 78%, white);
    --ns-accent-strong: color-mix(in srgb, var(--ns-brand-secondary) 58%, white);
    --ns-accent-soft: color-mix(in srgb, var(--ns-brand-secondary) 18%, #10102b);
    --ns-bg: #00001a;
    --ns-surface: #080824;
    --ns-surface-raised: #10102d;
    --ns-surface-muted: #161634;
    --ns-sidebar: #050520;
    --ns-rail-bg: color-mix(in srgb, var(--ns-brand-primary) 42%, #050520);
    --ns-text: #f2f2fb;
    --ns-text-muted: #aaaac2;
    --ns-danger: #f08a8a;
    --ns-border: color-mix(in srgb, var(--ns-brand-secondary) 18%, transparent);
    --ns-field-border: color-mix(in srgb, var(--ns-brand-secondary) 34%, #777792);
    --ns-field-bg: color-mix(in srgb, var(--ns-surface-raised) 88%, #080824);
    --ns-field-text: #f4f2fb;
    --ns-field-placeholder: #aaaac2;
    --ns-shadow-sm: 0 3px 9px rgba(0, 0, 0, .22);
    --ns-shadow-md: 0 10px 28px rgba(0, 0, 0, .28);
    --ns-shadow-lg: 0 20px 56px rgba(0, 0, 0, .34);
    --ns-brand-glow: 0 9px 24px color-mix(in srgb, var(--ns-brand-secondary) 28%, transparent);
    --ns-shadow: var(--ns-shadow-sm);
    --ns-focus: 0 0 0 3px color-mix(in srgb, var(--ns-brand-secondary) 28%, transparent);
}

html, body { background: var(--ns-bg); color: var(--ns-text); }
body.nsika-web-body,
body.nsika-web-body .nsika-web-shell {
    margin: 0;
    min-height: 100vh;
    background: var(--ns-bg) !important;
    color: var(--ns-text);
}
body.nsika-web-body .back-to-top {
    background: var(--ns-brand-secondary) !important;
    color: var(--ns-brand-on-secondary) !important;
    border: 1px solid color-mix(in srgb, var(--ns-brand-secondary) 60%, var(--ns-border));
    box-shadow: var(--ns-brand-glow) !important;
}
body.nsika-web-body .back-to-top:hover { background: var(--ns-brand-secondary) !important; }

/* Shared public website chrome */
body.nsika-web-body { overflow-x: hidden; font-family: Roboto, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.ns-web-nav,
#mainNav.ns-web-nav,
#mainNav.ns-web-nav.scrolled {
    position: fixed;
    z-index: 1300;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    padding: 14px 20px;
    border-bottom: 1px solid color-mix(in srgb, var(--ns-border) 72%, transparent);
    background: color-mix(in srgb, var(--ns-bg) 76%, transparent) !important;
    box-shadow: none !important;
    color: var(--ns-text) !important;
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
}
.ns-web-nav__inner { width: min(1180px, 100%); min-height: 62px; margin: 0 auto; padding: 8px 10px 8px 17px; display: flex; align-items: center; gap: 24px; border: 1px solid var(--ns-border); border-radius: 17px; background: color-mix(in srgb, var(--ns-surface-raised) 86%, transparent); box-shadow: var(--ns-shadow-md); backdrop-filter: blur(18px); }
.ns-web-nav__brand img { display: block; width: 168px; height: 42px; object-fit: contain; object-position: left center; filter: grayscale(1) contrast(1.1); }
html[data-theme="dark"] .ns-web-nav__brand img, html[data-theme="dark"] .ns-web-footer img { filter: grayscale(1) brightness(0) invert(1); }
.ns-web-nav__links { margin-left: auto; display: flex; align-items: center; gap: 24px; }
.ns-web-nav__links a { position: relative; color: var(--ns-text-muted) !important; font-size: 10px; font-weight: 750; text-decoration: none; }
.ns-web-nav__links a::after { content: ""; position: absolute; right: 50%; bottom: -8px; left: 50%; height: 2px; border-radius: 999px; background: var(--ns-brand-secondary); transition: right var(--ns-motion), left var(--ns-motion); }
.ns-web-nav__links a:hover { color: var(--ns-text) !important; }
.ns-web-nav__links a:hover::after { right: 0; left: 0; }
.ns-web-nav__actions { display: flex; align-items: center; gap: 8px; }
.ns-web-nav__theme { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--ns-border); border-radius: 11px; color: var(--ns-text); background: var(--ns-surface-muted); cursor: pointer; }
.ns-web-nav__theme .material-symbols-outlined { font-size: 18px; }
.ns-web-button { min-height: 41px; padding: 0 15px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--ns-border); border-radius: 11px; color: var(--ns-text) !important; background: var(--ns-surface-muted); font-size: 10px; font-weight: 800; text-decoration: none; transition: transform var(--ns-motion), border-color var(--ns-motion); }
.ns-web-button:hover { transform: translateY(-1px); border-color: var(--ns-brand-secondary); }
.ns-web-button--primary { border-color: var(--ns-brand-secondary); color: var(--ns-brand-on-secondary) !important; background: var(--ns-brand-secondary); box-shadow: var(--ns-brand-glow); }
.ns-web-button .material-symbols-outlined { font-size: 15px; }
.ns-web-footer { position: relative; z-index: 2; padding: 58px max(24px, calc((100vw - 1180px) / 2)) 22px; border-top: 1px solid var(--ns-border); background: var(--ns-surface-muted); color: var(--ns-text); }
.ns-web-footer::before { content: ""; position: absolute; top: -1px; left: 50%; width: min(480px, 70%); height: 1px; background: linear-gradient(90deg, transparent, var(--ns-brand-primary), var(--ns-brand-secondary), transparent); transform: translateX(-50%); }
.ns-web-footer__inner { display: grid; grid-template-columns: minmax(270px, 1.6fr) repeat(3, minmax(125px, .7fr)); gap: 46px; }
.ns-web-footer__lead img { width: 176px; height: 48px; object-fit: contain; object-position: left center; filter: grayscale(1) contrast(1.1); }
.ns-web-footer__lead p { max-width: 400px; margin: 18px 0 0; color: var(--ns-text-muted); font-size: 11px; line-height: 1.7; }
.ns-web-footer__group { display: grid; align-content: start; gap: 11px; }
.ns-web-footer__group strong { margin-bottom: 4px; color: var(--ns-text); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.ns-web-footer__group a { color: var(--ns-text-muted); font-size: 10px; text-decoration: none; }
.ns-web-footer__group a:hover { color: var(--ns-brand-secondary); }
.ns-web-footer__bottom { margin-top: 45px; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--ns-border); color: var(--ns-text-muted); font-size: 8px; letter-spacing: .04em; }
@media (max-width: 900px) { .ns-web-nav__links { display: none; } .ns-web-nav__actions { margin-left: auto; } .ns-web-footer__inner { grid-template-columns: 1.5fr repeat(2, 1fr); } .ns-web-footer__group:last-child { grid-column: 2; } }
@media (max-width: 620px) { .ns-web-nav, #mainNav.ns-web-nav, #mainNav.ns-web-nav.scrolled { padding: 8px; } .ns-web-nav__inner { min-height: 57px; padding-left: 11px; } .ns-web-nav__brand img { width: 122px; } .ns-web-button--quiet { display: none; } .ns-web-button--primary { min-height: 38px; padding-inline: 11px; } .ns-web-footer { padding-top: 40px; } .ns-web-footer__inner { grid-template-columns: 1fr 1fr; gap: 30px 20px; } .ns-web-footer__lead { grid-column: 1 / -1; } .ns-web-footer__group:last-child { grid-column: auto; } .ns-web-footer__bottom { align-items: flex-start; flex-direction: column; } }
body.nsika-app-body {
    background:
        radial-gradient(850px 520px at 100% -10%, color-mix(in srgb, var(--ns-brand-secondary) 18%, transparent), transparent 65%),
        radial-gradient(680px 480px at 0% 100%, color-mix(in srgb, var(--ns-brand-primary) 12%, transparent), transparent 65%),
        var(--ns-bg) !important;
    color: var(--ns-text);
    font-family: Roboto, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html[data-theme="dark"] body.nsika-app-body {
    background:
        radial-gradient(900px 560px at 100% -8%, rgba(34, 34, 86, .42), transparent 66%),
        radial-gradient(720px 520px at 0% 100%, rgba(18, 18, 64, .38), transparent 68%),
        #00001a !important;
}

/* Branded workspace loader ----------------------------------------------- */
#loader-overlay.nsika-loader-overlay {
    z-index: 9999;
    padding: 24px;
    color: var(--ns-text);
    background:
        radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--ns-brand-secondary) 18%, transparent), transparent 28%),
        color-mix(in srgb, var(--ns-bg) 76%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    backdrop-filter: blur(18px) saturate(135%);
    animation: nsika-loader-arrive 260ms cubic-bezier(.22, 1, .36, 1) both;
}

.nsika-loader-card {
    position: relative;
    width: min(100%, 410px);
    overflow: hidden;
    padding: 34px 32px 28px;
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius-lg);
    color: var(--ns-text);
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--ns-surface-raised) 96%, transparent),
            color-mix(in srgb, var(--ns-surface) 90%, var(--ns-accent-soft))
        );
    box-shadow: var(--ns-shadow-lg), inset 0 1px 0 color-mix(in srgb, white 12%, transparent);
    isolation: isolate;
}

.nsika-loader-card::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: -1px;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(
        from calc(315deg + var(--ns-border-orbit-angle)),
        transparent 0deg 278deg,
        color-mix(in srgb, var(--ns-brand-secondary) 32%, transparent) 304deg,
        var(--ns-brand-secondary) 328deg,
        var(--ns-brand-primary) 348deg,
        transparent 360deg
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: ns-border-perimeter-orbit 3.8s linear infinite;
}

.nsika-loader-card-glow {
    position: absolute;
    z-index: -1;
    top: -95px;
    right: -75px;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    opacity: .16;
    background: var(--ns-brand-secondary);
    filter: blur(6px);
}

.nsika-loader-visual {
    position: relative;
    display: grid;
    width: 96px;
    height: 96px;
    margin: 0 auto 24px;
    place-items: center;
}

.nsika-loader-orbit {
    position: absolute;
    inset: 0;
    border: 1px solid color-mix(in srgb, var(--ns-brand-secondary) 25%, var(--ns-border));
    border-top-color: var(--ns-brand-secondary);
    border-right-color: color-mix(in srgb, var(--ns-brand-primary) 55%, var(--ns-brand-secondary));
    border-radius: 50%;
    animation: nsika-loader-spin 1.8s linear infinite;
}

.nsika-loader-orbit-inner {
    inset: 10px;
    border-style: dashed;
    border-right-color: transparent;
    animation-direction: reverse;
    animation-duration: 2.7s;
}

.nsika-loader-mark {
    position: relative;
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 17px;
    color: var(--ns-brand-on-secondary);
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--ns-brand-secondary) 88%, white),
            var(--ns-brand-secondary)
        );
    box-shadow: var(--ns-brand-glow);
    animation: nsika-loader-breathe 1.8s ease-in-out infinite;
}

.nsika-loader-mark .material-symbols-outlined {
    font-size: 28px;
    font-variation-settings: "FILL" 0, "wght" 420, "GRAD" 0, "opsz" 32;
}

.nsika-loader-eyebrow {
    margin: 0 0 8px;
    color: var(--ns-accent-strong);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .18em;
    text-align: center;
    text-transform: uppercase;
}

.nsika-loader-title {
    margin: 0;
    color: var(--ns-text);
    font-size: 22px;
    font-weight: 780;
    letter-spacing: -.03em;
    line-height: 1.25;
    text-align: center;
}

.nsika-loader-description {
    max-width: 310px;
    margin: 9px auto 0;
    color: var(--ns-text-muted);
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
}

.nsika-loader-progress {
    position: relative;
    height: 5px;
    margin-top: 25px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ns-brand-secondary) 12%, var(--ns-surface-muted));
}

.nsika-loader-progress-bar {
    position: absolute;
    inset: 0 auto 0 0;
    width: 42%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            var(--ns-brand-primary),
            var(--ns-brand-secondary),
            color-mix(in srgb, var(--ns-brand-secondary) 68%, white)
        );
    box-shadow: 0 0 12px color-mix(in srgb, var(--ns-brand-secondary) 38%, transparent);
    animation: nsika-loader-progress 1.55s cubic-bezier(.65, 0, .35, 1) infinite;
}

.nsika-loader-status {
    display: flex;
    margin-top: 16px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--ns-text-muted);
    font-size: 10px;
    font-weight: 650;
}

.nsika-loader-status-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--ns-brand-secondary);
    box-shadow: 0 0 9px color-mix(in srgb, var(--ns-brand-secondary) 55%, transparent);
    animation: nsika-loader-pulse 1.25s ease-in-out infinite;
}

@keyframes nsika-loader-arrive {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes nsika-loader-spin {
    to { transform: rotate(360deg); }
}

@keyframes nsika-loader-breathe {
    0%, 100% { transform: scale(.96); }
    50% { transform: scale(1); }
}

@keyframes nsika-loader-progress {
    0% { left: -45%; width: 36%; }
    52% { width: 58%; }
    100% { left: 108%; width: 30%; }
}

@keyframes nsika-loader-pulse {
    0%, 100% { opacity: .42; transform: scale(.82); }
    50% { opacity: 1; transform: scale(1); }
}

@media (max-width: 480px) {
    #loader-overlay.nsika-loader-overlay { padding: 16px; }
    .nsika-loader-card { padding: 30px 22px 25px; border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    #loader-overlay.nsika-loader-overlay,
    .nsika-loader-card::before,
    .nsika-loader-orbit,
    .nsika-loader-mark,
    .nsika-loader-progress-bar,
    .nsika-loader-status-dot {
        animation: none !important;
    }

    .nsika-loader-progress-bar {
        left: 0;
        width: 64%;
    }
}

.app-shell {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 0;
    overflow: hidden;
    background: transparent;
}
.app-shell,
.app-shell * {
    text-shadow: none !important;
}
.app-content-pane {
    display: grid !important;
    grid-template-rows: 64px minmax(0, 1fr);
    flex: 1 1 0%;
    min-width: 0;
    height: calc(100% - 24px) !important;
    margin: 12px 0;
    padding: 0 !important;
    border: 1px solid var(--ns-border);
    border-radius: 0.5rem;
    background: var(--ns-surface-muted) !important;
    color: var(--ns-text);
    box-shadow: 0 16px 42px rgba(0,0,0,.08);
    overflow: hidden !important;
    transition: background-color var(--ns-motion), color var(--ns-motion), border-color var(--ns-motion);
}
#page-scroll-body {
    scrollbar-gutter: auto;
    scrollbar-color: var(--ns-border) transparent;
}
#page-scroll-body,
#page-scroll-body * {
    border: 0 !important;
}
#page-scroll-body > *:first-child { margin-top: 0 !important; }
#page-scroll-body > * {
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 100%;
    margin-inline: auto;
    box-sizing: border-box;
}
.branch-page-header {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 68px;
    padding: 8px 14px;
    overflow: hidden;
    border-radius: 16px;
    color: var(--ns-text);
    background:
        radial-gradient(circle at 94% 15%, color-mix(in srgb, var(--ns-lavender) 24%, transparent), transparent 28%),
        linear-gradient(135deg, var(--ns-surface-muted), color-mix(in srgb, var(--ns-surface) 82%, var(--ns-accent-soft)));
}
.controller-page-shell {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}
.controller-page-shell > .branch-page-header {
    width: 100%;
    flex: 0 0 auto;
}
.controller-page-shell > :not(.branch-page-header) {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    flex: 1 1 0%;
}
.controller-page-shell .title-content-wrapper {
    display: none !important;
}
.branch-page-heading {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}
.branch-page-icon {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: var(--ns-accent-strong);
    background: var(--ns-accent-soft);
}
.branch-page-icon .material-symbols-outlined { font-size: 20px; }
.branch-page-eyebrow {
    margin: 0 0 2px;
    color: var(--ns-accent-strong);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .11em;
    line-height: 1.2;
    text-transform: uppercase;
}
.branch-page-title {
    margin: 0;
    color: var(--ns-text);
    font-size: clamp(19px, 1.6vw, 22px);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.15;
}
.branch-page-description {
    display: none;
}
.branch-breadcrumb-shell {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-self: center;
    max-width: 100%;
    padding: 4px 6px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--ns-surface-muted) 72%, transparent);
}
.branch-breadcrumb {
    gap: 4px;
    color: var(--ns-text-muted);
}
.branch-breadcrumb-link,
.branch-breadcrumb-current,
.branch-breadcrumb-separator {
    display: inline-flex;
    align-items: center;
}
.branch-breadcrumb-link {
    gap: 6px;
    min-height: 30px;
    padding: 0 9px;
    border-radius: 8px;
    color: var(--ns-text-muted);
    transition: color var(--ns-motion), background-color var(--ns-motion);
}
.branch-breadcrumb-link .material-symbols-outlined { font-size: 17px; }
.branch-breadcrumb-link:hover {
    color: var(--ns-text);
    background: color-mix(in srgb, var(--ns-surface-raised) 74%, transparent);
}
.branch-breadcrumb-separator {
    flex-shrink: 0;
    color: color-mix(in srgb, var(--ns-text-muted) 58%, transparent);
}
.branch-breadcrumb-separator .material-symbols-outlined { font-size: 16px; }
.branch-breadcrumb-more {
    min-width: 30px;
    padding: 2px 7px 5px;
    border-radius: 8px;
    text-align: center;
    line-height: 1;
    letter-spacing: 2px;
    background: color-mix(in srgb, var(--ns-surface-raised) 76%, transparent);
}
.branch-breadcrumb-parent { padding: 0 6px; }
.branch-breadcrumb-current {
    gap: 7px;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 8px;
    color: var(--ns-text);
    background: var(--ns-accent-soft);
}
.branch-breadcrumb-current-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 999px;
    background: var(--ns-accent);
}

/* Branch directory: dense, single-surface list inspired by modern task boards. */
.branch-list-page,
.branch-list-page .list-view-content,
.branch-list-panel {
    height: 100%;
    min-height: 0;
}
.branch-list-panel {
    display: flex;
    flex-direction: column;
    overflow: visible;
    --branch-board: var(--ns-surface);
    --branch-board-raised: var(--ns-surface-raised);
    --branch-board-soft: var(--ns-surface-muted);
    --branch-board-border: var(--ns-border);
    --branch-board-text: var(--ns-text);
    --branch-board-muted: var(--ns-text-muted);
    --branch-board-accent: var(--ns-accent);
    --branch-board-accent-soft: var(--ns-accent-soft);
    border: 0;
    border-radius: 0;
    background: transparent;
}
.branch-list-toolbar {
    position: relative;
    z-index: 30;
    display: flex;
    min-height: 58px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 10px;
    border: 1px solid var(--branch-board-border);
    border-radius: 14px;
    background: var(--branch-board);
    box-shadow: var(--ns-shadow);
}
.branch-list-filters {
    display: flex;
    min-width: 260px;
    flex: 1 1 420px;
    align-items: center;
    gap: 8px;
}
.branch-list-filters .nsika-field {
    min-height: 36px !important;
    height: 36px !important;
    border: 1px solid var(--branch-board-border) !important;
    border-radius: 999px !important;
    background-color: var(--branch-board-raised) !important;
    color: var(--branch-board-text) !important;
    box-shadow: none !important;
}
.branch-list-filters .nsika-field[fieldname="name"] {
    min-width: 220px;
    padding-left: 38px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") !important;
    background-position: 13px center !important;
    background-repeat: no-repeat !important;
}
.branch-list-filters .select-field-wrapper {
    min-width: 185px;
}
.branch-list-toolbar-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}
.branch-toolbar-chip,
.branch-add-button {
    display: inline-flex;
    min-height: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    border: 1px solid var(--branch-board-border);
    border-radius: 999px;
    color: var(--branch-board-muted);
    background: var(--branch-board);
    font-size: 12px;
    font-weight: 600;
    transition: border-color var(--ns-motion), background-color var(--ns-motion), color var(--ns-motion);
}
.branch-toolbar-chip:hover,
.branch-toolbar-chip-active {
    border-color: color-mix(in srgb, var(--branch-board-accent) 46%, var(--branch-board-border));
    color: var(--branch-board-text);
    background: var(--branch-board-accent-soft);
}
.branch-toolbar-chip .material-symbols-outlined { color: currentColor !important; }
.branch-toolbar-chip-active { color: color-mix(in srgb, var(--branch-board-accent) 68%, white); }
.branch-list-toolbar-actions button:not(.branch-add-button).is-active {
    border-color: color-mix(in srgb, var(--ns-accent) 58%, var(--ns-border)) !important;
    color: var(--ns-accent-strong) !important;
    background: var(--ns-accent-soft) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ns-accent) 12%, transparent) !important;
}
.branch-list-toolbar-actions button:not(.branch-add-button).is-active .material-symbols-outlined {
    color: currentColor !important;
}
.branch-list-toolbar-actions .branch-add-button.is-active {
    filter: brightness(1.08);
    box-shadow: var(--ns-focus) !important;
}
.branch-toolbar-chip .material-symbols-outlined { font-size: 18px; }
.branch-toolbar-chip .branch-chip-chevron { font-size: 15px; }
.list-view-mode-wrap {
    position: relative;
    flex: 0 0 auto;
}
.list-view-mode-toggle .list-view-mode-current-label {
    white-space: nowrap;
}
.list-view-mode-wrap.is-open .list-view-mode-toggle {
    border-color: color-mix(in srgb, var(--ns-accent) 58%, var(--ns-border)) !important;
    color: var(--ns-accent-strong) !important;
    background: var(--ns-accent-soft) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ns-accent) 12%, transparent) !important;
}
.list-view-mode-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 520;
    display: grid;
    width: min(244px, 78vw);
    gap: 6px;
    visibility: hidden;
    opacity: 0;
    overflow: hidden;
    padding: 8px;
    border: 1px solid var(--ns-border) !important;
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--ns-accent) 15%, transparent), transparent 42%),
        color-mix(in srgb, var(--ns-surface-raised) 90%, transparent) !important;
    box-shadow:
        0 24px 60px color-mix(in srgb, #000 25%, transparent),
        0 8px 22px color-mix(in srgb, var(--ns-accent) 12%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 14%, transparent) !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    transform: translateY(-6px) scale(.975);
    transform-origin: top right;
    transition: opacity 170ms ease, transform 190ms cubic-bezier(.2,.85,.2,1), visibility 170ms ease;
}
.list-view-mode-wrap.is-open .list-view-mode-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
}
.list-view-mode-option {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 20px;
    min-height: 42px;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: 1px solid transparent !important;
    border-radius: 12px;
    color: var(--ns-text-muted);
    font-size: 12px;
    font-weight: 750;
    text-align: left;
    transition: color var(--ns-motion), background-color var(--ns-motion), border-color var(--ns-motion), transform var(--ns-motion), box-shadow var(--ns-motion);
}
.list-view-mode-option:hover {
    color: var(--ns-text);
    border-color: color-mix(in srgb, var(--ns-accent) 24%, var(--ns-border)) !important;
    background: color-mix(in srgb, var(--ns-accent-soft) 34%, transparent);
    transform: translateY(-1px);
}
.list-view-mode-option.is-selected {
    color: var(--ns-accent-strong) !important;
    border-color: color-mix(in srgb, var(--ns-accent) 42%, var(--ns-border)) !important;
    background: color-mix(in srgb, var(--ns-accent-soft) 64%, var(--ns-surface-raised)) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ns-accent) 14%, transparent) !important;
}
.list-view-mode-option .material-symbols-outlined {
    color: currentColor !important;
    font-size: 18px;
}
.list-view-mode-check {
    justify-self: end;
    font-size: 17px !important;
}
.branch-customize-wrap {
    position: relative;
    flex: 0 0 auto;
}
.branch-customize-toggle {
    flex: 0 0 auto;
    white-space: nowrap;
}
.branch-customize-layer {
    position: fixed;
    inset: 0;
    z-index: 2600;
    display: grid;
    place-items: center;
    padding: 76px 28px 28px clamp(120px, 22vw, 420px);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: color-mix(in srgb, var(--ns-bg) 34%, transparent);
    backdrop-filter: blur(7px) saturate(112%);
    -webkit-backdrop-filter: blur(7px) saturate(112%);
    transition: opacity 180ms ease, visibility 180ms ease;
}
.branch-customize-layer.is-open { visibility: visible; opacity: 1; pointer-events: auto; }
.branch-customize-popover {
    position: relative;
    display: flex;
    width: min(760px, 100%);
    min-height: 450px;
    max-height: min(680px, calc(100vh - 116px));
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--ns-border) !important;
    border-radius: 22px;
    outline: 1px solid color-mix(in srgb, var(--ns-surface-raised) 72%, transparent);
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--ns-accent) 13%, transparent), transparent 34%),
        color-mix(in srgb, var(--ns-surface-raised) 88%, transparent) !important;
    color: var(--ns-text);
    box-shadow:
        0 38px 110px color-mix(in srgb, #000 34%, transparent),
        0 14px 36px color-mix(in srgb, var(--ns-accent) 14%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 16%, transparent),
        inset 0 -1px 0 color-mix(in srgb, #000 9%, transparent) !important;
    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
    transform: translateY(18px) scale(.955);
    opacity: 0;
    transition: opacity 220ms ease, transform 260ms cubic-bezier(.2,.85,.2,1);
}
.branch-customize-popover::before {
    content: "";
    position: absolute;
    inset: 18px 22px -24px;
    z-index: 0;
    border-radius: 26px;
    background: color-mix(in srgb, var(--ns-accent) 22%, #000 28%);
    filter: blur(34px);
    opacity: .62;
    pointer-events: none;
}
.branch-customize-layer.is-open .branch-customize-popover { transform: translateY(0) scale(1); opacity: 1; }
.branch-customize-popover::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 5;
    padding: 1.7px;
    border-radius: 22px;
    background: conic-gradient(
        from calc(270deg + var(--branch-filter-border-angle)),
        transparent 0deg,
        transparent 246deg,
        color-mix(in srgb, var(--ns-accent) 24%, transparent) 278deg,
        var(--ns-accent) 316deg,
        color-mix(in srgb, var(--ns-lavender) 68%, white) 340deg,
        transparent 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    filter: drop-shadow(0 0 7px color-mix(in srgb, var(--ns-accent) 38%, transparent));
    animation: branch-filter-border-orbit 2.8s linear infinite;
}
.branch-customize-popover > * { position: relative; z-index: 2; }
.branch-customize-header, .branch-customize-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 20px; }
.branch-customize-header { border-bottom: 1px solid var(--ns-border) !important; }
.branch-customize-header small, .branch-customize-header strong { display: block; }
.branch-customize-header small { color: var(--ns-accent-strong); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.branch-customize-header strong { margin-top: 2px; font-size: 16px; }
.branch-customize-close, .branch-query-remove { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; color: var(--ns-text-muted); background: var(--ns-surface-muted); }
.branch-customize-tabs { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 15px 20px 0; padding: 5px; border-radius: 14px; background: color-mix(in srgb, var(--ns-surface-muted) 88%, transparent); pointer-events: auto; }
.branch-customize-tab {
    position: relative;
    z-index: 1;
    min-height: 40px;
    overflow: hidden;
    border-radius: 10px;
    color: var(--ns-text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .012em;
    transition: color var(--ns-motion), background-color var(--ns-motion), transform var(--ns-motion), box-shadow var(--ns-motion);
    pointer-events: auto;
}
.branch-customize-tab:hover { color: var(--ns-text); transform: translateY(-1px); }
.branch-customize-tab.is-active,
.branch-customize-tab[aria-selected="true"] {
    color: color-mix(in srgb, var(--ns-accent-strong) 86%, var(--ns-text)) !important;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--ns-accent-soft) 74%, var(--ns-surface-raised)), var(--ns-surface-raised)) !important;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--ns-accent) 38%, var(--ns-border)),
        inset 0 1px 0 color-mix(in srgb, white 55%, transparent),
        0 8px 20px color-mix(in srgb, var(--ns-accent) 16%, transparent) !important;
    transform: translateY(-1px);
}
.branch-customize-tab.is-active::after,
.branch-customize-tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    right: 22%;
    bottom: 3px;
    left: 22%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--ns-accent), var(--ns-lavender), transparent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--ns-accent) 48%, transparent) !important;
    animation: customize-tab-indicator-in 220ms cubic-bezier(.2,.85,.2,1) both;
}
@keyframes customize-tab-indicator-in {
    from { opacity: 0; transform: scaleX(.35); }
    to { opacity: 1; transform: scaleX(1); }
}
.branch-customize-panel { display: none; min-height: 0; padding: 18px 20px; }
.branch-customize-panel.is-active { display: block; flex: 1 1 auto; overflow-y: auto; }
.branch-customize-help { margin-bottom: 12px; color: var(--ns-text-muted); font-size: 11px; }
.branch-customize-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.branch-column-option { display: flex; min-height: 42px; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid var(--ns-border) !important; border-radius: 11px; background: var(--ns-surface); font-size: 12px; cursor: pointer; }
.branch-column-option input { position: absolute; opacity: 0; pointer-events: none; }
.branch-column-option .material-symbols-outlined { color: var(--ns-accent); font-size: 18px; }
.branch-customize-group { display: grid; gap: 12px; }
.branch-group-summary { display: flex; align-items: center; gap: 10px; padding: 12px 13px; border: 1px solid var(--ns-border) !important; border-radius: 13px; background: color-mix(in srgb, var(--ns-accent-soft) 34%, var(--ns-surface)); }
.branch-group-summary > .material-symbols-outlined { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 10px; color: var(--ns-accent); background: var(--ns-surface-raised); font-size: 19px; }
.branch-group-summary strong,
.branch-group-summary small,
.branch-group-tile-copy strong,
.branch-group-tile-copy small { display: block; }
.branch-group-summary strong { color: var(--ns-text); font-size: 12px; }
.branch-group-summary small { margin-top: 3px; color: var(--ns-text-muted); font-size: 10px; line-height: 1.35; }
.branch-group-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.branch-group-tile { position: relative; display: flex; min-height: 50px; align-items: center; gap: 9px; padding: 10px 11px; border: 1px solid var(--ns-border) !important; border-radius: 12px; background: var(--ns-surface); cursor: pointer; transition: border-color var(--ns-motion), background-color var(--ns-motion), box-shadow var(--ns-motion), transform var(--ns-motion); }
.branch-group-tile:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--ns-accent) 34%, var(--ns-border)) !important; }
.branch-group-tile.is-selected { border-color: color-mix(in srgb, var(--ns-accent) 58%, var(--ns-border)) !important; background: color-mix(in srgb, var(--ns-accent-soft) 48%, var(--ns-surface-raised)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ns-accent) 16%, transparent), 0 8px 18px color-mix(in srgb, var(--ns-accent) 12%, transparent) !important; }
.branch-group-tile input { position: absolute; opacity: 0; pointer-events: none; }
.branch-group-check { flex: 0 0 auto; color: var(--ns-accent); font-size: 19px; }
.branch-group-tile-copy { min-width: 0; }
.branch-group-tile-copy strong { overflow: hidden; color: var(--ns-text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.branch-group-tile-copy small { margin-top: 2px; overflow: hidden; color: var(--ns-text-muted); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.branch-query-rules { display: grid; gap: 8px; }
.branch-query-rule { display: grid; grid-template-columns: 70px 1.1fr 1.1fr 1fr 32px; gap: 6px; align-items: center; }
.branch-query-rule select, .branch-query-rule input { width: 100%; min-width: 0; height: 36px; padding: 0 8px; border: 1px solid var(--ns-border) !important; border-radius: 9px; outline: 0; color: var(--ns-text); background: var(--ns-surface); font-size: 11px; }
.branch-query-rule select:focus, .branch-query-rule input:focus { border-color: var(--ns-accent) !important; box-shadow: var(--ns-focus) !important; }
.branch-query-add { display: inline-flex; min-height: 36px; align-items: center; gap: 5px; margin-top: 10px; padding: 0 11px; border-radius: 9px; color: var(--ns-accent-strong); background: var(--ns-accent-soft); font-size: 11px; font-weight: 700; }
.branch-query-add .material-symbols-outlined { font-size: 16px; }
.branch-query-empty { padding: 22px; border: 1px dashed var(--ns-border) !important; border-radius: 11px; color: var(--ns-text-muted); text-align: center; font-size: 11px; }
.branch-customize-footer { margin-top: auto; border-top: 1px solid var(--ns-border) !important; background: color-mix(in srgb, var(--ns-surface-muted) 82%, transparent); }
.branch-customize-reset, .branch-customize-apply { min-height: 36px; padding: 0 14px; border-radius: 10px; font-size: 11px; font-weight: 800; }
.branch-customize-reset { color: var(--ns-text-muted); background: var(--ns-surface); }
.branch-customize-apply { color: white; background: var(--ns-accent); }
@media (max-width: 760px) {
    .branch-customize-layer { padding: 74px 14px 14px; }
    .branch-customize-popover { width: 100%; min-height: min(520px, calc(100vh - 90px)); }
    .branch-query-rule { grid-template-columns: 64px 1fr; }
    .branch-query-rule .branch-rule-value { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
    .branch-customize-popover::after { animation: none; background: var(--ns-accent); filter: none; }
    .branch-customize-popover { transition: opacity 120ms ease; }
    .branch-customize-tab::after { animation: none !important; }
}

/* Editor.js rich-text field ------------------------------------------------ */
html[data-theme] body.nsika-app-body .nsika-rich-text-shell {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: visible;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-preview {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 50px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 14px;
    border: 1px solid var(--ns-field-border) !important;
    border-radius: 12px;
    color: var(--ns-field-text) !important;
    background: var(--ns-field-bg) !important;
    text-align: left;
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 5%, transparent);
}
html[data-theme] body.nsika-app-body .nsika-rich-text-preview:hover,
html[data-theme] body.nsika-app-body .nsika-rich-text-preview:focus-visible {
    border-color: var(--ns-brand-secondary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ns-brand-secondary) 13%, transparent);
    outline: 0;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-preview-copy {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--ns-field-text);
    font-size: 13px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-preview-actions { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; color: var(--ns-accent-strong); }
html[data-theme] body.nsika-app-body .nsika-rich-text-preview-actions .material-symbols-outlined { font-size: 17px; }
html[data-theme] body.nsika-app-body .nsika-rich-text-popover {
    --ns-border-orbit-angle: 0deg;
    position: absolute;
    z-index: 2147481000;
    top: calc(100% + 10px);
    left: 0;
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    max-height: min(620px, calc(100dvh - 80px));
    flex-direction: column;
    overflow: visible;
    border: 1px solid var(--ns-border);
    border-radius: 18px;
    color: var(--ns-text);
    background: color-mix(in srgb, var(--ns-surface-raised) 96%, transparent);
    box-shadow: 0 28px 76px color-mix(in srgb, #000 38%, transparent), inset 0 1px 0 color-mix(in srgb, white 7%, transparent);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    isolation: isolate;
    transform-origin: top left;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-popover[hidden] { display: none !important; }
html[data-theme] body.nsika-app-body .nsika-rich-text-popover.is-open { animation: ns-document-tools-arrive 190ms cubic-bezier(.22, 1, .36, 1) both; }
html[data-theme] body.nsika-app-body .nsika-rich-text-popover::before {
    content: "";
    position: absolute;
    z-index: 5;
    inset: -1px;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(from calc(315deg + var(--ns-border-orbit-angle)), transparent 0deg 272deg, color-mix(in srgb, var(--ns-brand-secondary) 40%, transparent) 292deg, var(--ns-brand-secondary) 318deg, var(--ns-accent) 338deg, transparent 360deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: ns-border-perimeter-orbit 2.8s linear infinite;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-popover > * { position: relative; z-index: 6; }
html[data-theme] body.nsika-app-body .nsika-rich-text-header {
    display: flex;
    min-height: 68px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px 14px 12px 18px;
    border-bottom: 1px solid var(--ns-border);
}
html[data-theme] body.nsika-app-body .nsika-rich-text-header > div:first-child {
    flex: 1 1 130px;
    min-width: 0;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-header > div:first-child strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-header small,
html[data-theme] body.nsika-app-body .nsika-rich-text-header strong { display: block; }
html[data-theme] body.nsika-app-body .nsika-rich-text-header small { color: var(--ns-accent-strong); font-size: 9px; font-weight: 800; letter-spacing: .1em; white-space: nowrap; }
html[data-theme] body.nsika-app-body .nsika-rich-text-header strong { margin-top: 2px; color: var(--ns-text); font-size: 15px; }
html[data-theme] body.nsika-app-body .nsika-rich-text-header-actions {
    display: flex;
    flex: 1 1 380px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-modes {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--ns-border);
    border-radius: 11px;
    background: color-mix(in srgb, var(--ns-surface-muted) 82%, transparent);
}
html[data-theme] body.nsika-app-body .nsika-rich-text-header-actions button {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 11px;
    border: 1px solid var(--ns-border);
    border-radius: 10px;
    color: var(--ns-text);
    background: var(--ns-surface-muted);
    font-size: 11px;
    font-weight: 720;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-header-actions .nsika-rich-text-mode {
    min-height: 30px;
    padding-inline: 9px;
    border: 0;
    border-radius: 8px;
    background: transparent;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-header-actions .nsika-rich-text-mode.is-active {
    color: var(--ns-accent-strong);
    background: var(--ns-accent-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ns-brand-secondary) 28%, transparent);
}
html[data-theme] body.nsika-app-body .nsika-rich-text-preview-badge {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    gap: 5px;
    padding: 0 9px;
    border: 1px solid color-mix(in srgb, var(--ns-brand-secondary) 34%, var(--ns-border));
    border-radius: 999px;
    color: var(--ns-accent-strong);
    background: var(--ns-accent-soft);
    font-size: 10px;
    font-weight: 740;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-preview-badge .material-symbols-outlined { font-size: 15px; }
html[data-theme] body.nsika-app-body .nsika-rich-text-header-actions button:hover { border-color: var(--ns-brand-secondary); color: var(--ns-accent-strong); background: var(--ns-accent-soft); }
html[data-theme] body.nsika-app-body .nsika-rich-text-header-actions .material-symbols-outlined { font-size: 16px; }
html[data-theme] body.nsika-app-body .nsika-rich-text-stage {
    min-height: 0;
    flex: 1 1 auto;
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-popover.is-fullscreen {
    position: fixed !important;
    top: var(--rich-text-top, 0) !important;
    left: var(--rich-text-left, 0) !important;
    z-index: 2147483200 !important;
    width: var(--rich-text-width, 100vw) !important;
    max-width: none !important;
    height: var(--rich-text-height, 100dvh) !important;
    max-height: none !important;
    border-radius: 20px !important;
    transform-origin: center;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-popover.is-fullscreen .nsika-rich-text-stage {
    padding: clamp(12px, 1.5vw, 24px) !important;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-popover.is-fullscreen .nsika-rich-text-editor {
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100% - 2px);
    margin: 0 !important;
    padding: clamp(12px, 1.4vw, 22px) clamp(14px, 2.2vw, 34px) !important;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-editor {
    position: relative;
    width: 100%;
    min-height: 190px;
    padding: 10px 12px;
    overflow: visible;
    border: 1px solid var(--ns-field-border) !important;
    border-radius: 14px;
    color: var(--ns-field-text) !important;
    background: var(--ns-field-bg) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 5%, transparent);
    transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-editor:focus-within {
    border-color: var(--ns-brand-secondary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ns-brand-secondary) 14%, transparent);
}
html[data-theme] body.nsika-app-body .nsika-rich-text-editor .codex-editor,
html[data-theme] body.nsika-app-body .nsika-rich-text-editor .codex-editor__redactor {
    color: var(--ns-field-text) !important;
    background: transparent !important;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-editor .codex-editor__redactor { padding-bottom: 38px !important; }
html[data-theme] body.nsika-app-body .nsika-rich-text-editor :is(.ce-block__content, .ce-toolbar__content) {
    max-width: none !important;
    margin-inline: 38px 10px !important;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-editor .ce-block { margin: 0 !important; padding: 2px 0 !important; }
html[data-theme] body.nsika-app-body .nsika-rich-text-editor .ce-block + .ce-block { margin-top: 6px !important; }
html[data-theme] body.nsika-app-body .nsika-rich-text-editor :is(.ce-paragraph, .ce-header) { padding-block: 7px !important; }
html[data-theme] body.nsika-app-body .nsika-rich-text-popover.is-fullscreen .nsika-rich-text-editor :is(.ce-block__content, .ce-toolbar__content) {
    margin-inline: 44px 12px !important;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-rendered {
    width: 210mm;
    min-width: 210mm;
    min-height: 297mm;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 20mm 18mm 22mm;
    overflow-wrap: anywhere;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    color: #202124;
    background: #fff;
    box-shadow: 0 16px 46px rgba(0, 0, 0, .22);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11pt;
    line-height: 1.5;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-rendered[hidden],
html[data-theme] body.nsika-app-body .nsika-rich-text-editor[hidden] { display: none !important; }
html[data-theme] body.nsika-app-body .nsika-rich-text-rendered :is(h1, h2, h3, h4, p, ul, ol, blockquote, pre, table, aside) { margin: 0 0 10pt; }
html[data-theme] body.nsika-app-body .nsika-rich-text-rendered :is(h1, h2, h3, h4) { color: #17191c; line-height: 1.25; page-break-after: avoid; break-after: avoid-page; }
html[data-theme] body.nsika-app-body .nsika-rich-text-rendered h1 { font-size: 22pt; }
html[data-theme] body.nsika-app-body .nsika-rich-text-rendered h2 { font-size: 18pt; }
html[data-theme] body.nsika-app-body .nsika-rich-text-rendered h3 { font-size: 15pt; }
html[data-theme] body.nsika-app-body .nsika-rich-text-rendered h4 { font-size: 12pt; }
html[data-theme] body.nsika-app-body .nsika-rich-text-rendered :is(ul, ol) { padding-left: 1.5em; }
html[data-theme] body.nsika-app-body .nsika-rich-text-rendered :is(p, li, blockquote, pre, table, aside) { orphans: 3; widows: 3; }
html[data-theme] body.nsika-app-body .nsika-rich-text-rendered blockquote { padding: 10pt 12pt; border-left: 3px solid var(--ns-brand-secondary); border-radius: 0 4px 4px 0; color: #4d5156; background: #f5f6f8; }
html[data-theme] body.nsika-app-body .nsika-rich-text-rendered pre { padding: 11pt; overflow-x: auto; border-radius: 5px; color: #202124; background: #f3f4f6; white-space: pre-wrap; }
html[data-theme] body.nsika-app-body .nsika-rich-text-rendered table { width: 100%; border-collapse: collapse; }
html[data-theme] body.nsika-app-body .nsika-rich-text-rendered td { padding: 6pt; border: 1px solid #cfd2d7; }
html[data-theme] body.nsika-app-body .nsika-rich-text-popover.is-fullscreen .nsika-rich-text-rendered {
    width: 210mm;
    min-width: 210mm;
    min-height: 297mm;
    margin: 0 auto;
    padding: 20mm 18mm 22mm;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-popover.is-preview-mode .nsika-rich-text-stage {
    padding: 24px !important;
    overflow: auto !important;
    background: color-mix(in srgb, var(--ns-surface-muted) 90%, #8b8e96 10%);
}
@page { size: A4 portrait; margin: 20mm 18mm 22mm; }

/* Editor.js native UI — authoritative light/dark mode integration. */
html[data-theme] body.nsika-app-body .nsika-rich-text-popover .ce-popover,
html[data-theme] body.nsika-app-body .nsika-rich-text-popover .ce-inline-toolbar {
    --selectionColor: color-mix(in srgb, var(--ns-brand-secondary) 20%, transparent) !important;
    --inlineSelectionColor: color-mix(in srgb, var(--ns-brand-secondary) 24%, transparent) !important;
    --bg-light: var(--ns-surface-muted) !important;
    --grayText: var(--ns-text-muted) !important;
    --color-dark: var(--ns-text) !important;
    --color-line-gray: var(--ns-border) !important;
    --color-border: var(--ns-border) !important;
    --color-shadow: color-mix(in srgb, #000 34%, transparent) !important;
    --color-background: var(--ns-surface-raised) !important;
    --color-text-primary: var(--ns-text) !important;
    --color-text-secondary: var(--ns-text-muted) !important;
    --color-border-icon: var(--ns-border) !important;
    --color-border-icon-disabled: color-mix(in srgb, var(--ns-border) 55%, transparent) !important;
    --color-text-icon-active: var(--ns-accent-strong) !important;
    --color-background-icon-active: var(--ns-accent-soft) !important;
    --color-background-item-focus: color-mix(in srgb, var(--ns-brand-secondary) 14%, transparent) !important;
    --color-shadow-item-focus: color-mix(in srgb, var(--ns-brand-secondary) 18%, transparent) !important;
    --color-background-item-hover: var(--ns-accent-soft) !important;
    color: var(--ns-text) !important;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-popover .ce-popover__container {
    --ns-border-orbit-angle: 0deg;
    border: 1px solid var(--ns-border) !important;
    border-radius: 14px !important;
    color: var(--ns-text) !important;
    background: color-mix(in srgb, var(--ns-surface-raised) 96%, transparent) !important;
    box-shadow: 0 20px 52px color-mix(in srgb, #000 38%, transparent), inset 0 1px 0 color-mix(in srgb, white 7%, transparent) !important;
    backdrop-filter: blur(20px) saturate(135%);
    -webkit-backdrop-filter: blur(20px) saturate(135%);
}
html[data-theme] body.nsika-app-body .nsika-rich-text-popover .ce-popover--opened > .ce-popover__container::before {
    content: "";
    position: absolute;
    z-index: 20;
    inset: -1px;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(from calc(315deg + var(--ns-border-orbit-angle)), transparent 0deg 272deg, color-mix(in srgb, var(--ns-brand-secondary) 40%, transparent) 292deg, var(--ns-brand-secondary) 318deg, var(--ns-accent) 338deg, transparent 360deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: ns-border-perimeter-orbit 2.8s linear infinite;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-popover :is(.ce-popover__search, .cdx-search-field) {
    min-height: 38px;
    border: 1px solid var(--ns-field-border) !important;
    border-radius: 10px !important;
    color: var(--ns-field-text) !important;
    background: var(--ns-field-bg) !important;
    box-shadow: none !important;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-popover :is(.cdx-search-field__input, .ce-inline-tool-input) {
    color: var(--ns-field-text) !important;
    -webkit-text-fill-color: var(--ns-field-text) !important;
    background: transparent !important;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-popover :is(.cdx-search-field__input, .ce-inline-tool-input)::placeholder {
    color: var(--ns-field-placeholder) !important;
    -webkit-text-fill-color: var(--ns-field-placeholder) !important;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-popover .ce-popover-item {
    min-height: 38px;
    margin-block: 2px !important;
    padding: 5px 7px !important;
    border-radius: 9px !important;
    color: var(--ns-text) !important;
    background: transparent !important;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-popover .ce-popover-item:hover,
html[data-theme] body.nsika-app-body .nsika-rich-text-popover .ce-popover-item--focused {
    color: var(--ns-text) !important;
    background: var(--ns-accent-soft) !important;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-popover .ce-popover-item--active {
    color: var(--ns-accent-strong) !important;
    background: color-mix(in srgb, var(--ns-accent-soft) 88%, transparent) !important;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-popover .ce-popover-item__icon {
    border: 1px solid color-mix(in srgb, var(--ns-border) 82%, transparent) !important;
    border-radius: 8px !important;
    color: var(--ns-accent-strong) !important;
    background: color-mix(in srgb, var(--ns-surface-muted) 82%, transparent) !important;
    box-shadow: none !important;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-popover :is(.ce-popover-item__title, .ce-popover-header__text) { color: var(--ns-text) !important; }
html[data-theme] body.nsika-app-body .nsika-rich-text-popover :is(.ce-popover-item__secondary-title, .ce-popover__nothing-found-message) { color: var(--ns-text-muted) !important; }
html[data-theme] body.nsika-app-body .nsika-rich-text-popover :is(.ce-inline-toolbar, .ce-conversion-toolbar) {
    color: var(--ns-text) !important;
    background: transparent !important;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-popover :is(.ce-inline-tool, .ce-inline-toolbar__dropdown, .cdx-settings-button, .ce-toolbar__plus, .ce-toolbar__settings-btn) {
    color: var(--ns-text) !important;
    background: transparent !important;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-popover :is(.ce-inline-tool, .ce-inline-toolbar__dropdown, .cdx-settings-button, .ce-toolbar__plus, .ce-toolbar__settings-btn):hover {
    color: var(--ns-accent-strong) !important;
    background: var(--ns-accent-soft) !important;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-popover :is(.cdx-input, .tc-cell, .tc-row, .cdx-warning, .ce-code__textarea, .ce-rawtool__textarea) {
    border-color: var(--ns-field-border) !important;
    color: var(--ns-field-text) !important;
    -webkit-text-fill-color: var(--ns-field-text) !important;
    background-color: var(--ns-field-bg) !important;
    box-shadow: none !important;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-popover :is(.ce-popover__items, .nsika-rich-text-stage) {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ns-brand-secondary) 58%, transparent) transparent;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-popover :is(.ce-popover__items, .nsika-rich-text-stage)::-webkit-scrollbar { width: 7px; height: 7px; }
html[data-theme] body.nsika-app-body .nsika-rich-text-popover :is(.ce-popover__items, .nsika-rich-text-stage)::-webkit-scrollbar-thumb { border-radius: 999px; background: color-mix(in srgb, var(--ns-brand-secondary) 56%, transparent); }
html[data-theme] body.nsika-app-body .nsika-rich-text-popover .ce-popover__overlay { background: color-mix(in srgb, #050510 52%, transparent) !important; backdrop-filter: blur(3px); }
@media (prefers-reduced-motion: reduce) {
    html[data-theme] body.nsika-app-body .nsika-rich-text-popover .ce-popover--opened > .ce-popover__container::before {
        animation: none !important;
        background: var(--ns-brand-secondary);
    }
}
html[data-theme] body.nsika-app-body .nsika-rich-text-editor .ce-paragraph {
    color: var(--ns-field-text) !important;
    font-size: 13px;
    line-height: 1.7;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-editor :is(.ce-code__textarea, .ce-rawtool__textarea) {
    min-height: 110px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--ns-border) !important;
    border-radius: 10px !important;
    color: var(--ns-field-text) !important;
    background: color-mix(in srgb, var(--ns-field-bg) 88%, transparent) !important;
    line-height: 1.55 !important;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-editor .ce-paragraph[data-placeholder]:empty::before { color: var(--ns-field-placeholder) !important; }
html[data-theme] body.nsika-app-body :is(.ce-toolbar__plus, .ce-toolbar__settings-btn, .ce-inline-tool, .ce-popover-item) {
    color: var(--ns-text) !important;
    background: transparent !important;
}
html[data-theme] body.nsika-app-body :is(.ce-toolbar__plus, .ce-toolbar__settings-btn, .ce-inline-tool):hover,
html[data-theme] body.nsika-app-body .ce-popover-item:hover {
    color: var(--ns-accent-strong) !important;
    background: var(--ns-accent-soft) !important;
}
html[data-theme] body.nsika-app-body :is(.ce-popover, .ce-inline-toolbar, .ce-conversion-toolbar) {
    z-index: 2147481000 !important;
    border: 1px solid var(--ns-border) !important;
    border-radius: 14px !important;
    color: var(--ns-text) !important;
    background: color-mix(in srgb, var(--ns-surface-raised) 96%, transparent) !important;
    box-shadow: 0 18px 48px color-mix(in srgb, #000 32%, transparent) !important;
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
}
html[data-theme] body.nsika-app-body .ce-popover__search { color: var(--ns-field-text) !important; background: var(--ns-field-bg) !important; }
html[data-theme] body.nsika-app-body .nsika-rich-text-editor.has-error {
    border-color: crimson !important;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-readonly {
    color: var(--ns-text);
    background: var(--ns-surface-muted);
    line-height: 1.7;
}
html[data-theme] body.nsika-app-body .nsika-rich-text-readonly :is(h1, h2, h3, h4, p, ul, ol, blockquote, pre) { margin: .45em 0; }
html[data-theme] body.nsika-app-body .nsika-rich-text-readonly blockquote { padding-left: 12px; border-left: 3px solid var(--ns-brand-secondary); color: var(--ns-text-muted); }
@media (max-width: 760px) {
    html[data-theme] body.nsika-app-body .nsika-rich-text-header-actions button span:last-child { display: none; }
    html[data-theme] body.nsika-app-body .nsika-rich-text-editor :is(.ce-block__content, .ce-toolbar__content) { margin-inline: 34px 4px !important; }
}
html[data-theme] body.nsika-app-body .branch-list-panel .branch-add-button {
    min-width: 128px;
    padding-inline: 16px;
    border: 1px solid color-mix(in srgb, var(--ns-accent) 78%, white) !important;
    color: #fff !important;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--ns-accent) 88%, var(--ns-accent-strong)),
        var(--ns-accent)
    ) !important;
    box-shadow: 0 7px 18px color-mix(in srgb, var(--ns-accent) 24%, transparent) !important;
    font-weight: 700;
}
html[data-theme] body.nsika-app-body .branch-list-panel .branch-add-button:hover {
    border-color: color-mix(in srgb, var(--ns-accent) 65%, white) !important;
    filter: brightness(1.08);
    transform: translateY(-1px);
}
html[data-theme] body.nsika-app-body .branch-list-panel .branch-add-button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ns-accent) 30%, transparent);
    outline-offset: 2px;
}
.branch-add-button .material-symbols-outlined { font-size: 17px; }
.branch-list-surface {
    position: relative;
    z-index: 1;
    --branch-table-columns: 44px minmax(180px, 1.45fr) minmax(110px, .85fr) minmax(180px, 1.35fr) minmax(125px, .9fr) minmax(125px, .9fr) minmax(78px, .42fr);
    min-height: 0;
    flex: 1 1 auto;
    margin-top: 12px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--branch-board-border);
    border-radius: 14px;
    background: var(--branch-board);
    box-shadow: var(--ns-shadow);
}
.branch-list-surface .listview-wrapper,
.branch-list-surface .modern-listview {
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
}
.branch-list-surface .listview-wrapper {
    display: flex;
    min-height: 0;
    flex-direction: column;
}
html[data-theme] body.nsika-app-body .branch-list-surface .modern-listview {
    display: flex;
    min-height: 0 !important;
    flex-direction: column;
    border: 0 !important;
    border-radius: 14px !important;
    outline: 0;
    background: var(--branch-board) !important;
    color: var(--branch-board-text) !important;
}
html[data-theme] body.nsika-app-body .branch-list-surface .modern-list-header {
    display: grid;
    position: sticky;
    top: 0;
    z-index: 20;
    grid-template-columns: var(--branch-table-columns) !important;
    column-gap: 0 !important;
    align-items: center;
    min-height: 42px;
    flex: 0 0 42px;
    padding-inline: 10px;
    border-bottom: 1px solid var(--branch-board-border) !important;
    background: var(--branch-board-raised) !important;
    color: var(--branch-board-muted) !important;
    text-transform: uppercase;
    font-size: 10px !important;
    font-weight: 600;
    letter-spacing: .065em;
}
html[data-theme] body.nsika-app-body .branch-list-surface .modern-list-header .th {
    grid-column: span 1 / span 1 !important;
    min-width: 0;
    padding: 0 8px;
    color: var(--branch-board-muted) !important;
}
html[data-theme] body.nsika-app-body .branch-list-surface .modern-list-header .th:first-child {
    padding-inline: 0;
    justify-content: flex-start !important;
}
html[data-theme] body.nsika-app-body .branch-list-surface .modern-list-header .th:first-child .form-check,
html[data-theme] body.nsika-app-body .branch-list-surface .modern-list-row .td:first-child .form-check {
    border: 0 !important;
    justify-content: flex-start !important;
    padding: 0 !important;
}
html[data-theme] body.nsika-app-body .branch-list-surface .modern-list-header .th > div {
    justify-content: flex-start;
}
html[data-theme] body.nsika-app-body .branch-list-surface .modern-listview .lbody {
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 auto;
    overflow-y: auto;
    background: var(--branch-board) !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
html[data-theme] body.nsika-app-body .branch-list-surface .modern-listview .lbody::-webkit-scrollbar {
    width: 0;
    height: 0;
}
.branch-list-surface .is-grouped-list .modern-listview > .modern-list-header {
    display: none !important;
}
.branch-list-surface .listview-groups {
    display: grid;
    gap: 13px;
    padding: 12px;
}
.branch-list-surface .listview-group {
    overflow: hidden;
    border: 1px solid var(--branch-board-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--branch-board-raised) 42%, var(--branch-board));
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
}
.branch-list-surface .listview-group-divider {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 13px;
    border-bottom: 1px solid var(--branch-board-border);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--ns-accent) 13%, transparent), transparent 48%),
        var(--branch-board-raised);
}
.branch-list-surface .listview-group-title {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
    color: var(--branch-board-text);
    font-size: 12px;
    font-weight: 800;
}
.branch-list-surface .listview-group-title > .material-symbols-outlined {
    color: var(--ns-accent);
    font-size: 19px;
}
.branch-list-surface .listview-group-label {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
}
.branch-list-surface .listview-group-label .doc-status-wrapper {
    min-width: 0 !important;
    height: 26px !important;
}
.branch-list-surface .list-group-empty-value {
    color: var(--branch-board-muted);
    font-style: italic;
}
.branch-list-surface .listview-group-meta {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    color: var(--branch-board-muted);
    font-size: 10px;
    text-transform: uppercase;
}
.branch-list-surface .listview-group-meta strong {
    padding: 3px 8px;
    border-radius: 999px;
    color: var(--branch-board-text);
    background: var(--branch-board-accent-soft);
    text-transform: none;
}
.branch-list-surface .listview-group-scroll {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--branch-board-border) transparent;
}
.branch-list-surface .listview-group-scroll .modern-list-header {
    position: sticky !important;
    top: 0;
    z-index: 2;
    width: 100%;
    border-radius: 0 !important;
}
.branch-list-surface .listview-group-scroll::-webkit-scrollbar { height: 6px; }
.branch-list-surface .listview-group-scroll::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--branch-board-border); }
.branch-list-surface .listview-group-scroll .modern-list-row:last-child {
    border-bottom: 0 !important;
}
.branch-list-surface .listview-group-pagination {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 7px 11px;
    border-top: 1px solid var(--branch-board-border);
    color: var(--branch-board-muted);
    background: color-mix(in srgb, var(--branch-board-raised) 55%, var(--branch-board));
    font-size: 11px;
}
.branch-list-surface .listview-group-pagination-inner {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    margin-left: auto;
}
.branch-list-surface .listview-group-page-summary,
.branch-list-surface .listview-group-page-size {
    flex: 0 0 auto;
    color: var(--branch-board-muted);
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}
.branch-list-surface .listview-group-page-size {
    padding: 7px 10px;
    border: 1px solid var(--branch-board-border);
    border-radius: 999px;
    color: var(--branch-board-text);
    background: var(--branch-board);
}
.branch-list-surface .listview-group-pages {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px;
    border: 1px solid var(--branch-board-border);
    border-radius: 999px;
    background: var(--branch-board);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
}
.branch-list-surface .list-group-page-select,
.branch-list-surface .list-group-page-ellipsis {
    display: inline-grid;
    min-width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}
.branch-list-surface .list-group-page-select {
    color: var(--branch-board-muted);
    transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.branch-list-surface .list-group-page-select.is-active {
    color: #fff !important;
    background: color-mix(in srgb, var(--ns-accent) 78%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ns-accent) 58%, white), 0 5px 12px color-mix(in srgb, var(--ns-accent) 20%, transparent);
}
.branch-list-surface .list-group-page-select:not(:disabled):hover {
    color: var(--branch-board-text);
    background: color-mix(in srgb, var(--ns-accent) 12%, transparent);
    transform: translateY(-1px);
}
.branch-list-surface .list-group-page-select.is-active:hover {
    color: #fff !important;
    background: color-mix(in srgb, var(--ns-accent) 82%, transparent);
}
.branch-list-surface .list-group-page-arrow {
    color: var(--branch-board-muted);
}
.branch-list-surface .list-group-page-ellipsis {
    color: color-mix(in srgb, var(--branch-board-muted) 78%, transparent);
    pointer-events: none;
}
.branch-list-surface .list-group-page-select:disabled {
    opacity: .42;
    cursor: default;
}
.branch-list-surface .list-group-page-select .material-symbols-outlined { font-size: 17px; }
.branch-list-surface .listview-empty-grouped {
    display: grid;
    min-height: 180px;
    place-items: center;
    align-content: center;
    gap: 8px;
    color: var(--branch-board-muted);
}
.branch-list-surface .listview-empty-grouped .material-symbols-outlined {
    color: var(--ns-accent);
    font-size: 28px;
}
.branch-list-surface .is-card-view .modern-listview > .modern-list-header,
.branch-list-surface .is-kanban-view .modern-listview > .modern-list-header,
.branch-list-surface .is-tree-view .modern-listview > .modern-list-header {
    display: none !important;
}
.branch-list-surface .is-card-view .modern-listview .lbody,
.branch-list-surface .is-kanban-view .modern-listview .lbody,
.branch-list-surface .is-tree-view .modern-listview .lbody {
    padding: 13px;
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--ns-accent) 8%, transparent), transparent 28%),
        var(--branch-board) !important;
}
.listview-alt-view {
    width: 100%;
    min-height: 100%;
    color: var(--branch-board-text);
}
.listview-alt-hidden-cells {
    display: none !important;
}
.listview-alt-empty {
    display: grid;
    min-height: 260px;
    place-items: center;
    align-content: center;
    gap: 8px;
    color: var(--branch-board-muted);
    text-align: center;
}
.listview-alt-empty .material-symbols-outlined {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid var(--branch-board-border);
    border-radius: 15px;
    color: var(--ns-accent);
    background: var(--branch-board-raised);
    font-size: 25px;
}
.listview-alt-empty strong {
    color: var(--branch-board-text);
    font-size: 14px;
}
.listview-alt-empty small {
    color: var(--branch-board-muted);
    font-size: 11px;
}
.listview-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(245px, 100%), 1fr));
    gap: 12px;
}
.listview-alt-row {
    position: relative;
    border: 1px solid color-mix(in srgb, var(--branch-board-border) 86%, transparent) !important;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--branch-board-raised) 76%, transparent), color-mix(in srgb, var(--branch-board) 96%, transparent)) !important;
    color: var(--branch-board-text);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 5%, transparent),
        0 14px 30px color-mix(in srgb, #000 14%, transparent) !important;
    transition: border-color 170ms ease, background-color 170ms ease, box-shadow 190ms ease, transform 190ms cubic-bezier(.16, 1, .3, 1);
}
.listview-alt-row:hover {
    border-color: color-mix(in srgb, var(--ns-accent) 35%, var(--branch-board-border)) !important;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--ns-accent) 7%, var(--branch-board-raised)), var(--branch-board)) !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 7%, transparent),
        0 18px 38px color-mix(in srgb, #000 18%, transparent),
        0 0 0 1px color-mix(in srgb, var(--ns-accent) 8%, transparent) !important;
    transform: translateY(-2px);
}
.listview-alt-row.is-expanded {
    border-color: color-mix(in srgb, var(--ns-accent) 54%, var(--branch-board-border)) !important;
    box-shadow: var(--ns-focus), 0 18px 40px color-mix(in srgb, #000 18%, transparent) !important;
}
.listview-alt-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.listview-alt-check {
    display: inline-grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 9px;
}
.listview-alt-row .list-check {
    width: 17px !important;
    height: 17px !important;
    border-color: var(--branch-board-border) !important;
    border-radius: 5px !important;
    background: var(--branch-board) !important;
}
.listview-alt-row .list-check:checked {
    border-color: var(--ns-accent) !important;
    background: var(--ns-accent) !important;
}
.branch-list-surface .listview-alt-row-actions .modern-row-actions {
    display: flex !important;
    width: auto !important;
    min-width: 38px;
    height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
}
.listview-alt-row-actions .dropdown {
    width: 38px !important;
}
.listview-alt-row-actions .modern-list-action-btn {
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    border: 1px solid color-mix(in srgb, var(--ns-accent) 22%, var(--branch-board-border)) !important;
    border-radius: 12px !important;
    background: color-mix(in srgb, var(--branch-board-raised) 78%, transparent) !important;
    box-shadow: none !important;
}
.listview-alt-row-actions .dropdown-menu {
    z-index: 80;
}
.listview-card {
    display: grid !important;
    min-height: 188px;
    align-content: start;
    gap: 13px;
    padding: 13px;
    border-radius: 18px;
}
.listview-card-index {
    margin-right: auto;
    padding: 4px 8px;
    border-radius: 999px;
    color: var(--branch-board-muted);
    background: color-mix(in srgb, var(--branch-board-soft) 82%, transparent);
    font-size: 10px;
    font-weight: 800;
}
.listview-card-title {
    min-height: 30px;
    color: var(--branch-board-text);
    font-size: 14px;
    font-weight: 850;
    line-height: 1.35;
}
.listview-card-fields {
    display: grid;
    gap: 8px;
}
.listview-card-field {
    display: grid;
    gap: 3px;
    padding: 9px 10px;
    border: 1px solid color-mix(in srgb, var(--branch-board-border) 62%, transparent) !important;
    border-radius: 12px;
    background: color-mix(in srgb, var(--branch-board-soft) 72%, transparent);
}
.listview-card-field small,
.listview-kanban-card small {
    color: var(--branch-board-muted);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}
.listview-card-field span {
    min-width: 0;
    overflow: hidden;
    color: color-mix(in srgb, var(--branch-board-text) 78%, var(--branch-board-muted));
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.listview-kanban-board {
    display: grid;
    grid-auto-columns: minmax(258px, 1fr);
    grid-auto-flow: column;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
}
.listview-kanban-column {
    display: flex;
    min-height: 420px;
    max-height: 100%;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--branch-board-border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--branch-board-raised) 38%, var(--branch-board));
}
.listview-kanban-header {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px;
    border-bottom: 1px solid var(--branch-board-border);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--ns-accent) 12%, transparent), transparent),
        var(--branch-board-raised);
}
.listview-kanban-header > span {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    color: var(--branch-board-text);
    font-size: 12px;
    font-weight: 850;
}
.listview-kanban-header strong {
    display: grid;
    min-width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 999px;
    color: var(--ns-accent-strong);
    background: var(--ns-accent-soft);
    font-size: 11px;
}
.listview-kanban-cards {
    display: grid;
    align-content: start;
    gap: 9px;
    overflow-y: auto;
    padding: 10px;
}
.listview-kanban-card {
    display: grid !important;
    gap: 9px;
    padding: 11px;
    border-radius: 15px;
}
.listview-kanban-card strong {
    color: var(--branch-board-text);
    font-size: 12.5px;
    line-height: 1.35;
}
.listview-kanban-card small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.listview-tree {
    display: grid;
    gap: 12px;
}
.listview-tree-section {
    overflow: hidden;
    border: 1px solid var(--branch-board-border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--branch-board-raised) 34%, var(--branch-board));
}
.listview-tree-branch {
    display: flex;
    min-height: 48px;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    border-bottom: 1px solid var(--branch-board-border);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--ns-accent) 12%, transparent), transparent 55%),
        var(--branch-board-raised);
    color: var(--branch-board-text);
    font-size: 12px;
    font-weight: 850;
}
.listview-tree-branch .material-symbols-outlined {
    color: var(--ns-accent);
    font-size: 19px;
}
.listview-tree-branch strong {
    margin-left: auto;
    padding: 4px 8px;
    border-radius: 999px;
    color: var(--branch-board-text);
    background: var(--branch-board-soft);
    font-size: 10px;
}
.listview-tree-nodes {
    display: grid;
}
.listview-tree-row {
    display: grid !important;
    grid-template-columns: 30px 32px minmax(0, 1fr) auto;
    min-height: 64px;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border-width: 0 0 1px 0 !important;
    border-radius: 0;
    box-shadow: none !important;
}
.listview-tree-row:last-child {
    border-bottom: 0 !important;
}
.listview-tree-connector {
    position: relative;
    height: 100%;
}
.listview-tree-connector::before {
    content: "";
    position: absolute;
    top: -16px;
    bottom: -16px;
    left: 13px;
    width: 1px;
    background: color-mix(in srgb, var(--branch-board-border) 85%, transparent);
}
.listview-tree-connector span {
    position: absolute;
    top: 50%;
    left: 13px;
    width: 16px;
    height: 1px;
    background: color-mix(in srgb, var(--branch-board-border) 85%, transparent);
}
.listview-tree-copy {
    min-width: 0;
}
.listview-tree-copy strong {
    display: block;
    overflow: hidden;
    color: var(--branch-board-text);
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.listview-tree-copy div {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 5px;
}
.listview-tree-copy div span {
    max-width: 220px;
    overflow: hidden;
    padding: 4px 8px;
    border-radius: 999px;
    color: var(--branch-board-muted);
    background: color-mix(in srgb, var(--branch-board-soft) 78%, transparent);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.listview-alt-thumb {
    width: 34px;
    height: 28px;
    border-radius: 8px;
    object-fit: cover;
}
.listview-alt-inline-icon {
    color: var(--ns-accent);
    font-size: 18px;
}
@media (max-width: 720px) {
    .listview-kanban-board {
        grid-auto-columns: minmax(236px, 84vw);
    }
    .listview-tree-row {
        grid-template-columns: 22px 28px minmax(0, 1fr);
    }
    .listview-tree-row .listview-alt-row-actions {
        grid-column: 3;
        justify-self: start;
    }
}
.listview-selected-actions-shell {
    position: fixed;
    right: clamp(18px, 4vw, 72px);
    bottom: max(18px, env(safe-area-inset-bottom));
    left: clamp(18px, 22vw, 520px);
    z-index: 2147482000;
    display: flex;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transform: translateY(34px) scale(.985);
    filter: blur(6px);
    transition:
        opacity 220ms ease,
        transform 360ms cubic-bezier(.16, 1, .3, 1),
        filter 260ms ease;
}
.listview-selected-actions-shell.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    pointer-events: auto;
}
.listview-selected-actions-pill {
    position: relative;
    display: inline-flex;
    max-width: min(100%, 1120px);
    min-height: 58px;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    padding: 8px 12px 8px 22px;
    border: 1px solid color-mix(in srgb, var(--ns-accent) 24%, var(--ns-border)) !important;
    border-radius: 999px;
    background:
        radial-gradient(circle at 50% -60%, color-mix(in srgb, var(--ns-accent) 22%, transparent), transparent 42%),
        color-mix(in srgb, var(--ns-surface-raised) 76%, transparent) !important;
    color: var(--ns-text);
    box-shadow:
        0 28px 76px color-mix(in srgb, #000 28%, transparent),
        0 10px 28px color-mix(in srgb, var(--ns-accent) 18%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 18%, transparent),
        inset 0 -1px 0 color-mix(in srgb, #000 10%, transparent) !important;
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
}
.listview-selected-actions-pill::before {
    content: "";
    position: absolute;
    inset: 16px 28px -24px;
    z-index: 0;
    border-radius: inherit;
    background: color-mix(in srgb, var(--ns-accent) 28%, #000 26%);
    filter: blur(28px);
    opacity: .68;
    pointer-events: none;
}
.listview-selected-actions-pill::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 1;
    padding: 1.6px;
    border-radius: inherit;
    background: conic-gradient(
        from calc(270deg + var(--branch-filter-border-angle)),
        transparent 0deg,
        transparent 242deg,
        color-mix(in srgb, var(--ns-accent) 24%, transparent) 278deg,
        var(--ns-accent) 318deg,
        color-mix(in srgb, var(--ns-lavender) 68%, white) 342deg,
        transparent 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    filter: drop-shadow(0 0 9px color-mix(in srgb, var(--ns-accent) 34%, transparent));
    animation: branch-filter-border-orbit 2.8s linear infinite;
}
.listview-selected-actions-pill > * {
    position: relative;
    z-index: 2;
}
.listview-selected-count {
    flex: 0 0 auto;
    color: var(--ns-text);
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}
.listview-selected-divider {
    width: 1px;
    height: 24px;
    margin-inline: 4px;
    background: color-mix(in srgb, var(--ns-border) 78%, transparent);
}
.listview-selected-action {
    display: inline-flex;
    min-height: 38px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid transparent !important;
    border-radius: 999px;
    color: color-mix(in srgb, var(--ns-text) 86%, var(--ns-text-muted));
    font-size: 13px;
    font-weight: 750;
    white-space: nowrap;
    transition:
        color 160ms ease,
        background-color 160ms ease,
        border-color 160ms ease,
        transform 180ms cubic-bezier(.16, 1, .3, 1);
}
.listview-selected-action:hover {
    color: var(--ns-text);
    border-color: color-mix(in srgb, var(--ns-accent) 24%, transparent) !important;
    background: color-mix(in srgb, var(--ns-accent-soft) 36%, transparent);
    transform: translateY(-1px);
}
.listview-selected-action .material-symbols-outlined {
    color: currentColor !important;
    font-size: 19px;
}
.listview-selected-action.danger {
    color: color-mix(in srgb, #ff3b5f 78%, var(--ns-text));
}
.listview-selected-action.danger:hover {
    border-color: color-mix(in srgb, #ff3b5f 38%, transparent) !important;
    background: color-mix(in srgb, #ff3b5f 13%, transparent);
}
.listview-selected-clear {
    margin-left: 4px;
    color: var(--ns-text-muted);
}
@media (max-width: 900px) {
    .listview-selected-actions-shell {
        right: 12px;
        left: 12px;
    }
    .listview-selected-actions-pill {
        justify-content: flex-start;
        overflow-x: auto;
        border-radius: 22px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .listview-selected-actions-shell,
    .listview-selected-action {
        transition: opacity 120ms ease;
        transform: none !important;
        filter: none !important;
    }
    .listview-selected-actions-pill::after {
        animation: none;
    }
}
html[data-theme] body.nsika-app-body .branch-list-surface .modern-list-row {
    display: grid;
    grid-template-columns: var(--branch-table-columns) !important;
    column-gap: 0 !important;
    align-items: center;
    height: 54px !important;
    min-height: 54px !important;
    padding-inline: 10px;
    border: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--branch-board-border) 76%, transparent) !important;
    background: var(--branch-board) !important;
    color: var(--branch-board-muted) !important;
    cursor: default;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease !important;
}
html[data-theme] body.nsika-app-body .branch-list-surface .modern-list-row:nth-child(even) {
    background: color-mix(in srgb, var(--branch-board-raised) 22%, var(--branch-board)) !important;
}
html[data-theme] body.nsika-app-body .branch-list-surface .modern-list-row:hover {
    background: color-mix(in srgb, var(--ns-accent) 7%, var(--branch-board-raised)) !important;
    color: color-mix(in srgb, var(--branch-board-text) 82%, var(--branch-board-muted)) !important;
    box-shadow: inset 2px 0 0 var(--ns-accent), inset 0 1px 0 color-mix(in srgb, white 3%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--ns-accent) 12%, transparent);
}
.branch-list-surface .modern-list-row > .list-cell:nth-child(2) .list-cell-child {
    font-size: 12px;
    font-weight: 650;
    color: var(--branch-board-text);
}
.branch-list-surface .modern-list-row .td {
    grid-column: span 1 / span 1 !important;
    min-width: 0;
    padding: 0 8px !important;
    font-size: 11px;
    line-height: 1.35;
}
.branch-list-surface .modern-list-row .td:first-child {
    padding-inline: 0 !important;
    justify-content: flex-start !important;
}
.branch-list-surface .modern-list-row .list-cell-child {
    display: flex;
    height: 100%;
    align-items: center;
    border-radius: 6px;
    transition: color 160ms ease, background-color 160ms ease;
}
.branch-list-surface .modern-list-row .list-cell-child:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--ns-accent) 58%, transparent);
    outline-offset: -2px;
}
.branch-list-surface .modern-list-row .list-cell-child > .w-full.flex.items-center.justify-center {
    justify-content: flex-start !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}
.branch-type-pill {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border: 1px solid color-mix(in srgb, var(--branch-board-accent) 34%, transparent);
    border-radius: 999px;
    color: color-mix(in srgb, var(--branch-board-accent) 68%, white);
    background: var(--branch-board-accent-soft);
    font-size: 10px;
    font-weight: 700;
}
.branch-type-pill > span {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
}
.branch-type-pill.is-standard {
    border-color: color-mix(in srgb, var(--branch-board-accent) 34%, transparent);
    color: color-mix(in srgb, var(--branch-board-accent) 68%, white);
    background: var(--branch-board-accent-soft);
}
html[data-theme] body.nsika-app-body .branch-list-surface .modern-pagination {
    min-height: 58px !important;
    height: 58px !important;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 8px 14px !important;
    margin-top: auto !important;
    border-top: 1px solid var(--branch-board-border) !important;
    border-radius: 0 !important;
    outline: 0;
    background: var(--branch-board) !important;
    color: var(--branch-board-muted) !important;
}
.branch-list-surface .compact-pagination-shell {
    min-height: 42px;
    gap: 3px;
    padding: 4px 5px;
    border: 1px solid var(--branch-board-border);
    border-radius: 999px;
    background: var(--branch-board-raised);
    color: var(--branch-board-text);
    box-shadow: var(--ns-shadow);
}
.branch-list-surface .compact-pagination-pages {
    gap: 2px;
    margin: 0;
}
.branch-list-surface .compact-pagination .page-link {
    display: inline-flex;
    min-width: 30px !important;
    height: 30px !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--branch-board-muted) !important;
    font-size: 11px;
    cursor: pointer;
    transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}
.branch-list-surface .compact-pagination .page-link:hover {
    color: var(--branch-board-text) !important;
    background: color-mix(in srgb, var(--ns-accent) 12%, transparent) !important;
}
.branch-list-surface .compact-pagination .page-link.active {
    color: #fff !important;
    background: color-mix(in srgb, var(--ns-accent) 78%, transparent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ns-accent) 58%, white), 0 5px 12px color-mix(in srgb, var(--ns-accent) 20%, transparent);
}
.branch-list-surface .compact-pagination .page-link.active span {
    color: #fff !important;
    font-size: 11px !important;
}
.branch-list-surface .compact-pagination-divider {
    width: 1px;
    height: 22px;
    margin: 0 5px;
    background: var(--branch-board-border);
}
.branch-list-surface .compact-pagination-summary {
    display: inline-flex;
    min-width: max-content;
    align-items: center;
    gap: 4px;
    padding-inline: 4px;
    color: var(--branch-board-muted);
    font-size: 11px;
    white-space: nowrap;
}
.branch-list-surface .compact-pagination-summary strong {
    color: var(--branch-board-text);
    font-weight: 700;
}
.branch-list-surface .compact-pagination .page-size-select {
    width: 94px !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 28px 0 12px !important;
    border: 1px solid var(--branch-board-border) !important;
    border-radius: 999px !important;
    background-color: var(--branch-board-soft) !important;
    color: var(--branch-board-text) !important;
    font-size: 11px;
    font-weight: 600;
}
.branch-list-surface .modern-row-actions {
    display: flex !important;
    align-items: center;
    justify-content: center;
}
html[data-theme] body.nsika-app-body .branch-list-surface .modern-list-header .th:last-child,
html[data-theme] body.nsika-app-body .branch-list-surface .modern-list-row > .modern-row-actions {
    grid-column: -2 / -1 !important;
    grid-row: 1 !important;
    position: relative !important;
    z-index: 2;
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
}
.branch-list-surface .modern-list-row .list-check,
.branch-list-surface .modern-list-header .list-check {
    border-color: var(--branch-board-border) !important;
    background: var(--branch-board-raised) !important;
}
.branch-list-surface .modern-list-row .list-check:checked,
.branch-list-surface .modern-list-header .list-check:checked {
    border-color: var(--branch-board-accent) !important;
    outline-color: var(--branch-board-accent) !important;
    background: var(--branch-board-accent) !important;
}
.branch-list-toolbar .check-controlled:not(.dropdown) {
    border-color: var(--branch-board-border) !important;
    background: var(--branch-board-raised) !important;
    color: var(--branch-board-muted) !important;
    box-shadow: none !important;
}
.branch-list-toolbar .list-actions-btn .modern-list-action-btn {
    border-color: color-mix(in srgb, var(--branch-board-accent) 25%, var(--branch-board-border)) !important;
    background: var(--branch-board-accent-soft) !important;
    color: color-mix(in srgb, var(--branch-board-accent) 68%, white) !important;
}
.branch-filter-dropdown-wrap {
    position: relative;
    flex: 0 0 auto;
}
.branch-empty-actions-wrap {
    position: relative;
    flex: 0 0 auto;
}
.branch-empty-actions-layer { width: min(320px, 88vw); }
.branch-empty-actions-content { min-height: 112px; }
.list-filter-drawer-layer {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    z-index: 2147481000;
    width: min(340px, 88vw);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px) scale(.985);
    transform-origin: top right;
    transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
}

/*
 * List overlays are rendered inside legacy overflow containers. Raise the
 * complete toolbar stacking context while an overlay is open and release the
 * list-view clipping boundary so anchored menus can paint above the table.
 */
html[data-theme] body.nsika-app-body .content-group.list-view-content:has(
    .list-filter-drawer-layer.is-open,
    .branch-customize-layer.is-open,
    .list-view-mode-wrap.is-open
) {
    position: relative;
    z-index: 2147480000;
    overflow: visible !important;
}

html[data-theme] body.nsika-app-body .branch-list-toolbar:has(
    .list-filter-drawer-layer.is-open,
    .branch-customize-layer.is-open,
    .list-view-mode-wrap.is-open
) {
    z-index: 2147480000;
    overflow: visible;
}

html[data-theme] body.nsika-app-body :is(
    .branch-filter-dropdown-wrap,
    .branch-empty-actions-wrap,
    .branch-customize-wrap
):has(.is-open) {
    z-index: 2147480100;
}

html[data-theme] body.nsika-app-body .list-view-mode-wrap.is-open {
    z-index: 2147480100;
}

html[data-theme] body.nsika-app-body :is(
    .list-filter-drawer-layer,
    .branch-customize-layer,
    .list-view-mode-menu
) {
    z-index: 2147481000 !important;
}

html[data-theme] body.nsika-app-body > .branch-customize-layer {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
}
.list-filter-drawer-layer::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 28px;
    width: 12px;
    height: 12px;
    border-top: 1px solid var(--ns-border);
    border-left: 1px solid var(--ns-border);
    background: var(--ns-surface-raised);
    transform: rotate(45deg);
}
.list-filter-drawer-layer.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}
#page-scroll-body .list-filter-drawer {
    position: relative;
    display: flex;
    width: 100%;
    height: auto !important;
    max-height: min(420px, calc(100vh - 120px));
    flex-direction: column;
    padding: 16px;
    border: 1px solid var(--ns-border) !important;
    border-radius: 16px;
    outline: 1px solid color-mix(in srgb, var(--ns-surface-raised) 70%, transparent);
    background: color-mix(in srgb, var(--ns-surface-raised) 78%, transparent) !important;
    color: var(--ns-text) !important;
    box-shadow: 0 24px 60px color-mix(in srgb, var(--ns-text) 20%, transparent) !important;
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
}
#page-scroll-body .list-filter-drawer::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 2;
    padding: 1.5px;
    border-radius: 16px;
    background: conic-gradient(
        from calc(270deg + var(--branch-filter-border-angle)),
        transparent 0deg,
        transparent 250deg,
        color-mix(in srgb, var(--ns-accent) 26%, transparent) 282deg,
        var(--ns-accent) 320deg,
        color-mix(in srgb, var(--ns-accent) 36%, white) 338deg,
        transparent 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--ns-accent) 30%, transparent));
    animation: branch-filter-border-orbit 2.8s linear infinite;
}
@property --branch-filter-border-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}
@keyframes branch-filter-border-orbit {
    to { --branch-filter-border-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
    #page-scroll-body .list-filter-drawer::after {
        animation: none;
        background: var(--ns-accent);
        filter: none;
    }
}
#page-scroll-body .list-filter-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ns-border) !important;
}
.list-filter-drawer-header p {
    margin: 0 0 3px;
    color: var(--ns-accent-strong);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.list-filter-drawer-header h2 {
    margin: 0;
    color: var(--ns-text);
    font-size: 16px;
    font-weight: 750;
}
#page-scroll-body .list-filter-drawer-close {
    display: inline-flex;
    min-width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ns-border) !important;
    border-radius: 10px;
    color: var(--ns-text-muted);
    background: var(--ns-surface-muted);
}
.drawer-filter-fields {
    display: flex;
    min-height: 0;
    flex: 0 1 auto;
    flex-direction: column;
    gap: 12px;
    padding-block: 14px;
    overflow-y: auto;
}
.drawer-filter-fields:has(.select-field-wrapper[data-arial-expand="true"]) {
    overflow: visible;
}
html[data-theme] body.nsika-app-body .drawer-filter-fields .form-field {
    margin: 0 !important;
}
html[data-theme] body.nsika-app-body .drawer-filter-fields .modern-form-label {
    margin-bottom: 6px;
    color: var(--ns-text-muted) !important;
    font-size: 11px;
    font-weight: 700;
}
#page-scroll-body .drawer-filter-fields .filter-field {
    width: 100% !important;
    max-width: none !important;
    min-height: 40px !important;
    margin: 0 !important;
    border: 1px solid var(--ns-border) !important;
    border-radius: 11px !important;
    background: var(--ns-surface) !important;
    color: var(--ns-text) !important;
    box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ns-text) 5%, transparent) !important;
}
#page-scroll-body .drawer-filter-fields .filter-field:focus {
    border-color: var(--ns-accent) !important;
    box-shadow: var(--ns-focus) !important;
}
#page-scroll-body .list-filter-drawer-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--ns-border) !important;
}
#page-scroll-body .list-filter-clear,
#page-scroll-body .list-filter-done {
    min-height: 38px;
    border: 1px solid var(--ns-border) !important;
    border-radius: 11px;
    color: var(--ns-text);
    background: var(--ns-surface-muted);
    font-size: 12px;
    font-weight: 700;
}
#page-scroll-body .list-filter-done {
    border-color: var(--ns-accent) !important;
    color: #fff;
    background: var(--ns-accent);
}
@media (max-width: 1100px) {
    .branch-list-toolbar { align-items: stretch; flex-direction: column; }
    .branch-list-filters { width: 100%; flex-basis: auto; }
    .branch-list-toolbar-actions { width: 100%; flex-wrap: wrap; justify-content: flex-start; overflow: visible; }
}
@media (max-width: 700px) {
    .branch-list-filters { min-width: 0; flex-wrap: wrap; }
    .branch-list-filters .nsika-field[fieldname="name"],
    .branch-list-filters .select-field-wrapper { width: 100%; min-width: 100%; }
    .branch-toolbar-chip-secondary { display: none; }
    html[data-theme] body.nsika-app-body .branch-list-surface .modern-list-row,
    html[data-theme] body.nsika-app-body .branch-list-surface .modern-list-header { min-width: 880px; }
    .branch-list-surface .modern-listview { overflow-x: auto; }
    .branch-list-surface .compact-summary-label { display: none; }
    .branch-list-surface .compact-pagination-shell { gap: 1px; }
    .branch-list-surface .compact-pagination-summary { padding-inline: 1px; }
}
@media (max-width: 600px) {
    .branch-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        min-height: 94px;
        padding: 10px 12px;
        border-radius: 13px;
    }
    .branch-breadcrumb-shell { align-self: flex-start; }
    .branch-breadcrumb-parent { display: none; }
}

/* Sidebar */
.app-sidebar {
    width: clamp(224px, 17vw, 272px) !important;
    min-width: clamp(224px, 17vw, 272px) !important;
    margin: 12px 0 12px 12px;
    height: calc(100% - 24px) !important;
    border: 1px solid var(--ns-border) !important;
    border-radius: var(--ns-radius-lg);
    background: var(--ns-sidebar) !important;
    box-shadow: var(--ns-shadow);
    color: var(--ns-text);
}
.app-sidebar::before {
    height: 260px !important;
    background: radial-gradient(ellipse at 25% 0%, rgba(207,173,237,.28), transparent 70%) !important;
}
.sidebar-logo-area,
.sidebar-user-strip { border-color: var(--ns-border) !important; }
.sidebar-logo-area { padding: 16px 14px 13px !important; }
.sidebar-workspace-pill {
    background: var(--ns-accent-soft) !important;
    border-color: var(--ns-border) !important;
    color: var(--ns-accent-strong) !important;
}
.sidebar-section-label { color: var(--ns-text-muted) !important; }
.sidebar-search-icon { color: var(--ns-text-muted) !important; }
#sidebar-nav-search-input {
    background: var(--ns-surface) !important;
    border-color: var(--ns-border) !important;
    color: var(--ns-text) !important;
}
#sidebar-nav-search-input::placeholder { color: var(--ns-text-muted) !important; }
#sidebar-nav-search-input:focus {
    border-color: var(--ns-accent) !important;
    background: var(--ns-surface-raised) !important;
    box-shadow: var(--ns-focus) !important;
}
.module-menu-content { scrollbar-color: var(--ns-border) transparent !important; }
.module-menu-content::-webkit-scrollbar-thumb { background: var(--ns-border) !important; }
.module-menu-content .menu-card-group:hover,
.module-menu-content .sub-nav-toggler:hover { background: var(--ns-surface-muted) !important; }
.module-menu-content .menu-card-group.active-menu-card {
    background: color-mix(in srgb, var(--ns-brand-secondary) 14%, transparent) !important;
    box-shadow: inset 3px 0 0 var(--ns-brand-secondary) !important;
    color: var(--ns-text) !important;
}
.module-menu-content .menu-card-group.active-menu-card .card-title {
    color: var(--ns-text) !important;
}
.module-menu-content .menu-card-group .card-title,
.module-menu-content .menu-card-group .material-symbols-outlined,
.module-menu-content .sub-nav-toggler { color: var(--ns-text-muted) !important; }
.module-menu-content .menu-card-item-list,
.module-menu-content .sub-links { border-color: var(--ns-border) !important; }
.module-menu-content .navigation-link,
.module-menu-content .navigation-link:visited,
.module-menu-content .navigation-link:focus,
.module-menu-content .navigation-link:active,
.module-menu-content .sub-links .navigation-link {
    color: var(--ns-text) !important;
    min-height: 34px;
    border-radius: var(--ns-radius-sm);
}
.module-menu-content .navigation-link:hover {
    color: var(--ns-text) !important;
    background: var(--ns-surface-muted) !important;
}
.module-menu-content .navigation-link[data-active-nav="1"] {
    color: #fff !important;
    background: linear-gradient(135deg, var(--ns-accent), var(--ns-accent-strong)) !important;
    box-shadow: 0 7px 18px rgba(114,70,173,.22) !important;
}
.module-menu-content .sub-links .child-navigation-link {
    min-height: 30px;
    border-radius: var(--ns-radius-sm);
    color: var(--ns-text-muted) !important;
    background: transparent !important;
    box-shadow: none !important;
}
.module-menu-content .sub-links .child-navigation-link:hover {
    color: var(--ns-text) !important;
    background: var(--ns-surface-muted) !important;
}
.module-menu-content .sub-links .child-navigation-link[data-active-nav="1"] {
    color: var(--ns-accent-strong) !important;
    background: var(--ns-accent-soft) !important;
    box-shadow: inset 3px 0 0 var(--ns-accent-strong) !important;
}
html[data-theme] .module-menu-content .sub-links .child-navigation-link {
    background: color-mix(in srgb, var(--ns-brand-secondary) 10%, transparent) !important;
    color: var(--ns-text-muted) !important;
}
html[data-theme] .module-menu-content .sub-links .child-navigation-link:hover {
    background: color-mix(in srgb, var(--ns-brand-secondary) 18%, transparent) !important;
}
html[data-theme] .module-menu-content .sub-links .child-navigation-link[data-active-nav="1"] {
    background: color-mix(in srgb, var(--ns-brand-secondary) 24%, transparent) !important;
    color: var(--ns-brand-on-secondary) !important;
    box-shadow: inset 3px 0 0 var(--ns-brand-secondary) !important;
}
/* The legacy sidebar declares link colors with !important in an inline style
   block; the root qualifier keeps semantic theme colors authoritative. */
html[data-theme] .module-menu-content .navigation-link,
html[data-theme] .module-menu-content .navigation-link:visited,
html[data-theme] .module-menu-content .navigation-link:focus,
html[data-theme] .module-menu-content .navigation-link:active,
html[data-theme] .module-menu-content .sub-links .navigation-link {
    color: var(--ns-text) !important;
}
html[data-theme] .module-menu-content .navigation-link:hover {
    color: var(--ns-text) !important;
    background: var(--ns-surface-muted) !important;
}
html[data-theme] .module-menu-content .navigation-link[data-active-nav="1"] {
    color: #fff !important;
    background: linear-gradient(135deg, var(--ns-accent), var(--ns-accent-strong)) !important;
}
.sidebar-user-strip { background: rgba(110,91,63,.045) !important; }
.sidebar-user-name { color: var(--ns-text) !important; }
.sidebar-user-role { color: var(--ns-text-muted) !important; }
.sidebar-user-avatar, .sidebar-user-avatar-img, .nav-dp-icon {
    border-color: var(--ns-border) !important;
    background: var(--ns-accent-soft) !important;
    color: var(--ns-accent-strong) !important;
}
.app-shell.is-nav-collapsed .app-sidebar {
    width: 68px !important;
    min-width: 68px !important;
}

/* Top bar */
.app-topbar {
    width: auto !important;
    height: 64px !important;
    margin: 12px 12px 0 12px;
    padding: 0 14px !important;
    border: 1px solid var(--ns-border) !important;
    border-radius: var(--ns-radius) !important;
    background: color-mix(in srgb, var(--ns-surface) 92%, transparent) !important;
    color: var(--ns-text);
    box-shadow: 0 8px 30px rgba(60,45,30,.06) !important;
    backdrop-filter: blur(18px);
}
.topbar-icon-btn,
.topbar-company-chip,
.topbar-account-btn,
.topbar-breadcrumb-inner {
    background: var(--ns-surface-muted) !important;
    border-color: var(--ns-border) !important;
    color: var(--ns-text-muted) !important;
}
.topbar-icon-btn:hover,
.topbar-account-btn:hover,
.topbar-company-chip:hover {
    border-color: var(--ns-accent) !important;
    background: var(--ns-accent-soft) !important;
    color: var(--ns-accent-strong) !important;
}
.topbar-company-chip .nav-company-name,
.topbar-account-btn .nav-full-names,
.breadcrumb { color: var(--ns-text) !important; }
.topbar-account-btn .nav-designation { color: var(--ns-text-muted) !important; }
.topbar-online-dot { background: var(--ns-sage) !important; }
.theme-mode-toggle[data-theme-mode="dark"] { color: var(--ns-lavender) !important; }
.theme-mode-toggle[data-theme-mode="light"] { color: var(--ns-gold) !important; }

/* Expanded list records use the shell palette in every appearance mode. */
#page-scroll-body .list-row-details-card {
    outline: 1px solid var(--ns-border) !important;
    background: var(--ns-surface-raised) !important;
    color: var(--ns-text) !important;
    box-shadow: var(--ns-shadow) !important;
}
#page-scroll-body .list-row-document-letterhead {
    background: linear-gradient(135deg, var(--ns-surface-raised), color-mix(in srgb, var(--ns-accent-soft) 48%, var(--ns-surface-raised))) !important;
}
#page-scroll-body .list-row-document-logo-wrap,
#page-scroll-body .list-row-detail-input {
    outline: 1px solid var(--ns-border) !important;
    background: var(--ns-surface) !important;
    color: var(--ns-text) !important;
}
#page-scroll-body .list-row-detail-input:focus {
    outline-color: var(--ns-accent) !important;
    box-shadow: var(--ns-focus) !important;
}
#page-scroll-body .list-row-document-footer {
    background: var(--ns-surface-muted) !important;
    color: var(--ns-text-muted) !important;
}
#page-scroll-body .list-row-json-section {
    outline: 1px solid var(--ns-border) !important;
    background: var(--ns-surface) !important;
}
#page-scroll-body .list-row-json-heading {
    background: color-mix(in srgb, var(--ns-accent-soft) 42%, var(--ns-surface-raised)) !important;
}
#page-scroll-body .list-row-json-table,
#page-scroll-body .list-row-json-table td { color: var(--ns-text) !important; }
#page-scroll-body .list-row-json-table th { color: var(--ns-text-muted) !important; background: var(--ns-surface-muted) !important; }

/* Generic page surfaces */
.box,
.filters-wrapper,
.dropdown-content,
.dropdown-menu,
.modal-content,
.form-fields input,
.form-fields textarea,
.form-fields select {
    background-color: var(--ns-surface-raised) !important;
    border-color: var(--ns-border) !important;
    color: var(--ns-text) !important;
}
.box, .filters-wrapper {
    border-radius: var(--ns-radius) !important;
    box-shadow: 0 8px 28px rgba(60,45,30,.055);
}
.text-gray-500, .text-gray-600, .text-slate-500 { color: var(--ns-text-muted) !important; }
.bg-white { background-color: var(--ns-surface-raised) !important; }
.border { border-color: var(--ns-border) !important; }
.table, table { color: var(--ns-text); }
.table .th, table thead { background: var(--ns-surface-muted); color: var(--ns-text-muted); }
.table .body .tr, table tbody tr { border-color: var(--ns-border) !important; }
input, textarea, select { color-scheme: inherit; }
input:focus, textarea:focus, select:focus { outline-color: var(--ns-accent); }

/* Responsive shell */
@media (max-width: 1279px) {
    .app-sidebar {
        width: 78px !important;
        min-width: 78px !important;
    }
    .sidebar-workspace-pill, .sidebar-section-label, #sidebar-nav-search,
    .sidebar-user-info, .menu-card-item-list, .sub-nav-toggler, .sub-links,
    .navigation-link-label, .child-navigation-link-label, .card-title { display: none !important; }
    .module-menu-content .navigation-link { justify-content: center !important; padding: 0 !important; }
}
@media (max-width: 767px) {
    .app-sidebar { display: none !important; }
    .app-topbar { margin: 8px 8px 0; height: 58px !important; }
    .topbar-company-chip { max-width: 120px !important; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Reference navigation composition --------------------------------------- */
.app-shell {
    background: var(--ns-bg);
}
.app-rail {
    width: 76px;
    min-width: 76px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 0 14px;
    background: var(--ns-surface-raised);
    border-right: 0;
    color: var(--ns-text-muted);
    z-index: 30;
}
.app-rail-brand,
.app-rail-link {
    width: 44px;
    height: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: var(--ns-text-muted);
    text-decoration: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: color var(--ns-motion), background var(--ns-motion), transform var(--ns-motion);
}
.app-rail-brand {
    margin-bottom: 10px;
    flex-shrink: 0;
    color: #fff;
    background: linear-gradient(145deg, var(--ns-accent), var(--ns-accent-strong));
    box-shadow: 0 10px 24px rgba(114,70,173,.35);
}
.app-rail-brand .material-symbols-outlined { font-size: 25px; }
.app-rail-brand-logo {
    width: 98%;
    height: 98%;
    object-fit: cover;
    object-position: center;
}
.app-rail-brand-logo[hidden] {
    display: none !important;
}
.app-rail-brand-fallback {
    display: inline-flex;
}
.app-rail-brand.has-company-logo {
    background: #fff;
}
.app-rail-brand.has-company-logo .app-rail-brand-fallback {
    display: none;
}
.app-rail-link .material-symbols-outlined { font-size: 23px; }
.app-rail-link:hover {
    color: var(--ns-text);
    background: var(--ns-surface-muted);
    transform: translateY(-1px);
}
.primary-rail-tooltip {
    position: fixed;
    z-index: 1200;
    max-width: 220px;
    padding: 8px 11px;
    border: 1px solid color-mix(in srgb, var(--ns-brand-secondary) 34%, var(--ns-border));
    border-radius: 10px;
    color: var(--ns-text);
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--ns-brand-secondary) 12%, var(--ns-surface-raised, var(--ns-surface))) 0%,
            var(--ns-surface-raised, var(--ns-surface)) 100%
        );
    box-shadow: var(--ns-shadow-lg);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-6px, -50%) scale(.98);
    transition:
        opacity var(--ns-motion),
        visibility var(--ns-motion),
        transform var(--ns-motion);
}
.primary-rail-tooltip::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-left: 1px solid color-mix(in srgb, var(--ns-brand-secondary) 34%, var(--ns-border));
    border-bottom: 1px solid color-mix(in srgb, var(--ns-brand-secondary) 34%, var(--ns-border));
    background: inherit;
    transform: translateY(-50%) rotate(45deg);
}
.primary-rail-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%) scale(1);
}
.app-rail-link.is-active {
    color: #fff;
    background: var(--ns-brand-secondary);
}
.app-rail-modules .app-rail-link.is-active {
    position: sticky;
    top: 0;
    z-index: 4;
    flex-shrink: 0;
    isolation: isolate;
    box-shadow: var(--ns-brand-glow) !important;
}
.app-rail-modules .app-rail-link.is-active::before {
    content: "";
    position: absolute;
    inset: -5px 0;
    z-index: -1;
    background: linear-gradient(
        155deg,
        color-mix(in srgb, var(--ns-brand-secondary) 12%, var(--ns-rail-bg)) 0%,
        var(--ns-rail-bg) 46%,
        color-mix(in srgb, #00001a 14%, var(--ns-rail-bg)) 100%
    );
    border-radius: 13px;
    pointer-events: none;
}
.app-rail-modules {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 0;
    scrollbar-width: none;
}
.app-rail-modules::-webkit-scrollbar { width: 0; height: 0; }
.app-rail-separator {
    width: 34px;
    height: 1px;
    flex-shrink: 0;
    margin: 4px 0 8px;
    background: color-mix(in srgb, var(--ns-brand-on-primary) 20%, transparent);
}
.app-rail-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    padding-top: 2px;
}
.app-rail-footer .app-rail-link {
    width: 38px;
    height: 38px;
    min-height: 38px;
    border-radius: 11px;
}
.app-rail-footer .app-rail-link .material-symbols-outlined {
    font-size: 20px;
}

html[data-theme] .app-sidebar {
    width: 304px !important;
    min-width: 304px !important;
    height: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--ns-sidebar) !important;
}
.app-sidebar::before { display: none; }
.sidebar-logo-area {
    height: 94px;
    justify-content: flex-start !important;
    gap: 11px;
    padding: 0 20px !important;
    border: 0 !important;
}
.sidebar-heading-dot {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: var(--ns-accent);
    flex: 0 0 auto;
}
.sidebar-context-title {
    margin: 0;
    color: var(--ns-text);
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#sidebar-nav-search { display: none !important; }
.sidebar-section-label {
    padding: 8px 20px 12px !important;
    color: var(--ns-text-muted) !important;
    letter-spacing: .12em !important;
}
.module-menu-content {
    padding: 0 18px 20px !important;
}
html[data-theme] .module-menu-content .menu-card-group {
    min-height: 48px;
    margin: 4px 0;
    padding: 0 14px !important;
    border-radius: 10px;
}
html[data-theme] .module-menu-content .menu-card-group .card-title {
    font-size: 14px;
    font-weight: 650;
    color: var(--ns-text) !important;
}
html[data-theme] body.nsika-app-body .module-active-row > .module-header {
    color: var(--ns-brand-on-secondary) !important;
    background: color-mix(in srgb, var(--ns-brand-secondary) 88%, var(--ns-surface-muted)) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ns-brand-secondary) 42%, transparent);
}
html[data-theme] body.nsika-app-body .module-active-row > .module-header:hover {
    background: var(--ns-brand-secondary) !important;
}
html[data-theme] .module-menu-content .navigation-link,
html[data-theme] .module-menu-content .sub-links .navigation-link {
    min-height: 44px;
    height: auto;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 14px;
}
.module-menu-content .menu-card-item-list {
    margin-left: 0 !important;
    width: 100% !important;
    padding-left: 0 !important;
    border-left: 0 !important;
}
.sidebar-user-strip {
    position: relative;
    min-height: 64px;
    margin: 10px 18px 18px;
    padding: 8px 10px !important;
    border: 1px solid color-mix(in srgb, var(--ns-brand-secondary) 46%, transparent) !important;
    border-radius: 24px;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--ns-brand-secondary) 10%, var(--ns-sidebar)) 0%,
            color-mix(in srgb, var(--ns-surface-raised) 72%, transparent) 100%
        ) !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent),
        0 0 18px color-mix(in srgb, var(--ns-brand-secondary) 12%, transparent);
    overflow: hidden;
    animation: sidebar-user-border-pulse 3s ease-in-out infinite;
}
.sidebar-user-strip::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        120deg,
        color-mix(in srgb, var(--ns-brand-secondary) 18%, transparent),
        color-mix(in srgb, var(--ns-brand-secondary) 92%, transparent),
        color-mix(in srgb, var(--ns-brand-on-primary) 46%, transparent),
        color-mix(in srgb, var(--ns-brand-secondary) 18%, transparent)
    );
    background-size: 220% 100%;
    pointer-events: none;
    opacity: 1;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: sidebar-user-border-flow 3.2s linear infinite;
}
.sidebar-user-strip > * {
    position: relative;
    z-index: 1;
}
.sidebar-user-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.sidebar-user-name {
    color: var(--ns-text) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}
.sidebar-user-role {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    padding: 1px 7px;
    border-radius: 999px;
    color: color-mix(in srgb, var(--ns-brand-on-secondary) 88%, transparent) !important;
    background: color-mix(in srgb, var(--ns-brand-secondary) 22%, transparent);
    font-size: 10px !important;
    font-weight: 650;
}
.sidebar-user-avatar,
.sidebar-user-avatar-img,
.nav-dp-icon {
    border-color: color-mix(in srgb, var(--ns-brand-secondary) 40%, transparent) !important;
}
.nav-dp-icon {
    color: var(--ns-brand-on-secondary) !important;
    background: color-mix(in srgb, var(--ns-brand-secondary) 36%, transparent) !important;
}
@keyframes sidebar-user-border-flow {
    0% { background-position: 0% 50%; }
    100% { background-position: 220% 50%; }
}
@keyframes sidebar-user-border-pulse {
    0%, 100% {
        box-shadow:
            inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent),
            0 0 14px color-mix(in srgb, var(--ns-brand-secondary) 14%, transparent);
    }
    50% {
        box-shadow:
            inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent),
            0 0 0 3px color-mix(in srgb, var(--ns-brand-secondary) 18%, transparent),
            0 0 24px color-mix(in srgb, var(--ns-brand-secondary) 26%, transparent);
    }
}

html[data-theme] .app-topbar {
    height: 64px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ns-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--ns-surface-raised) !important;
}
.topbar-utility-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 0;
    border-radius: 10px;
    color: var(--ns-text-muted);
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--ns-motion), background var(--ns-motion);
}
.topbar-utility-btn:hover {
    color: var(--ns-text);
    background: var(--ns-surface-muted);
}
.topbar-utility-btn .material-symbols-outlined { font-size: 27px; }
.topbar-icon-btn {
    width: 44px !important;
    height: 44px !important;
    border: 0 !important;
    border-radius: 999px !important;
}
.topbar-search-slot {
    width: min(360px, 32vw);
    margin-left: 6px;
}
.topbar-search-slot .intro-x { max-width: none !important; }
.topbar-search-slot .search { display: block !important; }
.topbar-search-slot .search {
    --ns-topbar-search-border-width: 1px;
    position: relative;
    isolation: isolate;
    border-radius: 12px;
}
.topbar-search-slot .search::after {
    --ns-border-orbit-angle: 0deg;
    content: "";
    position: absolute;
    z-index: 2;
    inset: calc(-1 * var(--ns-topbar-search-border-width));
    padding: var(--ns-topbar-search-border-width);
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(
        from calc(315deg + var(--ns-border-orbit-angle)),
        transparent 0deg 274deg,
        color-mix(in srgb, var(--ns-brand-secondary) 30%, transparent) 296deg,
        var(--ns-brand-secondary) 320deg,
        var(--ns-accent) 340deg,
        transparent 360deg
    );
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--ns-accent) 28%, transparent));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: ns-border-perimeter-orbit 4.2s linear infinite;
}
.topbar-search-slot .search__input {
    width: 100%;
    height: 48px !important;
    padding-left: 44px !important;
    border-radius: 12px !important;
    border: 1px solid var(--ns-border) !important;
    background: var(--ns-surface) !important;
    color: var(--ns-text) !important;
    box-shadow: none !important;
}
.topbar-search-slot .search__icon {
    display: inline-flex;
    position: absolute;
    z-index: 1;
    inset: 50% auto auto 15px !important;
    width: 20px;
    height: 20px;
    margin: 0;
    align-items: center;
    justify-content: center;
    color: var(--ns-text-muted);
    font-size: 20px;
    line-height: 1;
    pointer-events: none;
    transform: translateY(-50%);
    transition: color var(--ns-motion), transform var(--ns-motion);
}
.topbar-search-slot .search:focus-within .search__icon,
.topbar-search-slot .search:hover .search__icon {
    color: var(--ns-accent);
    transform: translateY(-50%) scale(1.05);
}
.topbar-search-slot .search__input::placeholder { color: var(--ns-text-muted); }

/* Copilot activity: a bright signal traverses the neuron-shaped glyph. */
.topbar-copilot-circuit { position: relative; overflow: visible; }
.topbar-copilot-brain {
    position: relative;
    display: inline-block;
    color: color-mix(in srgb, var(--ns-text-muted) 82%, var(--ns-accent));
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--ns-accent) 18%, transparent));
}
.topbar-copilot-brain::after {
    content: "network_intel_node";
    position: absolute;
    inset: 0;
    color: transparent;
    background: linear-gradient(105deg,
        transparent 14%,
        transparent 31%,
        var(--ns-accent) 43%,
        color-mix(in srgb, white 80%, var(--ns-brand-secondary)) 50%,
        var(--ns-brand-secondary) 57%,
        transparent 69%,
        transparent 86%);
    background-size: 240% 100%;
    background-position: 130% 0;
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--ns-accent) 58%, transparent));
    font: inherit;
    font-variation-settings: inherit;
    animation: ns-topbar-neuron-signal 2.6s cubic-bezier(.45, 0, .55, 1) infinite;
}
.topbar-copilot-circuit:hover .topbar-copilot-brain::after,
.topbar-copilot-circuit[aria-expanded="true"] .topbar-copilot-brain::after {
    animation-duration: 1.35s;
}
@keyframes ns-topbar-neuron-signal {
    0%, 12% { background-position: 130% 0; opacity: .35; }
    45%, 62% { opacity: 1; }
    88%, 100% { background-position: -130% 0; opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
    .topbar-search-slot .search::after {
        animation: none;
        background: color-mix(in srgb, var(--ns-brand-secondary) 72%, transparent);
    }
}
.topbar-breadcrumb-nav { display: none !important; }
#page-scroll-body {
    flex: 1 1 0%;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    align-self: stretch;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid var(--ns-border);
    border-radius: 18px;
    background: var(--ns-surface);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
#page-scroll-body .acd-wrap { background: transparent !important; }

html[data-theme="dark"] .app-shell { background: var(--ns-bg); }
html[data-theme="dark"] .app-rail { background: var(--ns-surface-raised); }
html[data-theme="dark"] .app-sidebar { background: var(--ns-sidebar) !important; }
html[data-theme="dark"] .app-topbar { background: var(--ns-surface-raised) !important; }
html[data-theme="dark"] .app-content-pane {
    background: var(--ns-surface-raised) !important;
    border-color: var(--ns-border);
    box-shadow: 0 18px 48px rgba(0,0,0,.24);
}
html[data-theme="dark"] #page-scroll-body { background: var(--ns-surface); border-color: var(--ns-border); }
html[data-theme="dark"] .topbar-search-slot .search__input { background: var(--ns-surface) !important; border-color: var(--ns-border) !important; }

/* Nsika Copilot drawer ---------------------------------------------------- */
.workspace-body {
    position: relative;
    display: flex;
    align-items: stretch;
    flex: 1 1 0%;
    width: 100%;
    height: 100%;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
}
.workspace-body > #page-scroll-body {
    flex: 1 1 auto;
    width: auto;
}
.nsika-copilot {
    position: relative;
    width: 0;
    min-width: 0;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateX(18px);
    color: var(--ns-text);
    background: var(--ns-surface);
    box-shadow: -18px 0 42px rgba(0,0,0,.12);
    pointer-events: none;
    transition: width 240ms cubic-bezier(.2,.8,.2,1), min-width 240ms cubic-bezier(.2,.8,.2,1), opacity 180ms ease, transform 240ms cubic-bezier(.2,.8,.2,1);
}
.copilot-open .nsika-copilot {
    width: clamp(360px, 32vw, 520px);
    min-width: clamp(360px, 32vw, 520px);
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}
.copilot-header {
    position: relative;
    height: 64px;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}
.copilot-header-actions { display: flex; align-items: center; gap: 6px; }
.copilot-icon-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9px;
    color: var(--ns-text-muted);
    background: transparent;
    cursor: pointer;
}
.copilot-icon-btn:hover { color: var(--ns-text); background: var(--ns-surface-muted); }
.copilot-icon-btn .material-symbols-outlined { font-size: 23px; }
.copilot-history-toggle { display: none; }
.copilot-history-sidebar { display: none; }
.copilot-options-menu {
    position: absolute;
    top: 54px;
    right: 54px;
    z-index: 12;
    width: 210px;
    padding: 7px;
    border: 1px solid var(--ns-border);
    border-radius: 13px;
    background: var(--ns-surface-raised);
    box-shadow: var(--ns-shadow-md);
}
.copilot-options-menu[hidden], .copilot-tool-view[hidden] { display: none !important; }
.copilot-options-menu button {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 0;
    border-radius: 9px;
    color: var(--ns-text);
    background: transparent;
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.copilot-options-menu button:hover { background: var(--ns-surface-muted); }
.copilot-options-menu .material-symbols-outlined { font-size: 19px; color: var(--ns-accent); }
.copilot-tool-view {
    position: absolute;
    inset: 64px 0 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    color: var(--ns-text);
    background: var(--ns-surface);
}
.copilot-tool-view > header {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 18px;
    border-bottom: 1px solid var(--ns-border);
}
.copilot-tool-view h2 { margin: 0; font-size: 17px; font-weight: 700; }
.copilot-tool-content { flex: 1 1 auto; overflow-y: auto; padding: 18px; }
.copilot-empty-state { padding: 40px 18px; color: var(--ns-text-muted); text-align: center; }
.copilot-chat-list { display: grid; gap: 8px; }
.copilot-chat-item {
    width: 100%;
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--ns-border);
    border-radius: 12px;
    color: var(--ns-text);
    background: var(--ns-surface-raised);
    text-align: left;
    cursor: pointer;
}
.copilot-chat-item:hover { border-color: color-mix(in srgb, var(--ns-accent) 55%, var(--ns-border)); }
.copilot-chat-item small { color: var(--ns-text-muted); }
.copilot-settings, .copilot-feedback-form { display: grid; gap: 14px; }
.copilot-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px;
    border: 1px solid var(--ns-border);
    border-radius: 12px;
    background: var(--ns-surface-raised);
}
.copilot-setting-row input { accent-color: var(--ns-accent); }
.copilot-feedback-form textarea {
    width: 100%;
    min-height: 150px;
    padding: 12px;
    resize: vertical;
    border: 1px solid var(--ns-border);
    border-radius: 12px;
    color: var(--ns-text);
    background: var(--ns-surface-raised);
}
.copilot-primary-action {
    min-height: 42px;
    padding: 8px 16px;
    border: 0;
    border-radius: 12px;
    color: var(--ns-brand-on-secondary);
    background: var(--ns-brand-secondary);
    font-weight: 700;
    cursor: pointer;
}
.copilot-feedback-status { min-height: 20px; color: var(--ns-text-muted); font-size: 13px; }
.copilot-conversation {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    padding: 28px 36px 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--ns-border) transparent;
}
.copilot-welcome { max-width: 340px; }
.copilot-mark {
    width: max-content;
    min-width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 22px;
    padding: 0 12px;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(145deg, var(--ns-accent), var(--ns-accent-strong));
}
.copilot-mark .material-symbols-outlined { font-size: 22px; }
.copilot-mark strong { font-size: 14px; line-height: 1; }
.copilot-welcome h2 {
    margin: 0;
    font-size: clamp(27px, 2.2vw, 38px);
    line-height: 1.14;
    letter-spacing: 0;
    font-weight: 750;
    color: var(--ns-text);
}
.copilot-welcome p {
    margin: 14px 0 0;
    color: var(--ns-text-muted);
    font-size: 13px;
    line-height: 1.6;
}
.copilot-messages { display: flex; flex-direction: column; gap: 12px; }
.copilot-message {
    max-width: 88%;
    padding: 11px 13px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
}
.copilot-message.has-attachments { width: min(360px, 88%); max-width: min(360px, 88%); }
.copilot-message-text + .copilot-message-files { margin-top: 10px; }
.copilot-message-files { display: grid; gap: 8px; white-space: normal; }
.copilot-message-file {
    display: block;
    overflow: hidden;
    border: 1px solid var(--ns-border);
    border-radius: 12px;
    color: var(--ns-text);
    background: var(--ns-surface-raised);
    text-decoration: none;
    transition: border-color var(--ns-motion), transform var(--ns-motion);
}
button.copilot-message-file:hover {
    border-color: color-mix(in srgb, var(--ns-brand-secondary) 55%, var(--ns-border));
    transform: translateY(-1px);
}
.copilot-preview {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    color: var(--ns-text);
    background: var(--ns-surface);
}
.copilot-preview[hidden] { display: none !important; }
.copilot-preview > header {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--ns-border);
    background: var(--ns-surface-raised);
}
.copilot-preview-title { min-width: 0; display: flex; align-items: center; gap: 10px; }
.copilot-preview-title > .material-symbols-outlined { flex: 0 0 auto; color: var(--ns-accent); }
.copilot-preview-title > span:last-child { min-width: 0; }
.copilot-preview-title strong,
.copilot-preview-title small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copilot-preview-title strong { color: var(--ns-text); font-size: 13px; }
.copilot-preview-title small { margin-top: 2px; color: var(--ns-text-muted); font-size: 10px; }
.copilot-preview-open {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--ns-text-muted);
    text-decoration: none;
}
.copilot-preview-open:hover { color: var(--ns-text); background: var(--ns-surface-muted); }
.copilot-preview-body { flex: 1 1 auto; min-height: 0; overflow: auto; background: var(--ns-surface); }
.copilot-preview-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.copilot-preview-image { display: block; max-width: calc(100% - 32px); max-height: calc(100% - 32px); margin: 16px auto; object-fit: contain; }
.copilot-preview-text { min-height: 100%; margin: 0; padding: 22px; color: var(--ns-text); background: var(--ns-surface); font: 12px/1.6 ui-monospace, monospace; white-space: pre-wrap; }
.copilot-preview-state {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    color: var(--ns-text-muted);
    text-align: center;
}
.copilot-preview-state .material-symbols-outlined { margin-bottom: 14px; color: var(--ns-accent); font-size: 42px; }
.copilot-preview-state strong { color: var(--ns-text); font-size: 17px; }
.copilot-preview-state p { max-width: 520px; margin: 8px 0 0; line-height: 1.55; }
.copilot-preview-toolbar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--ns-border);
    background: var(--ns-surface-raised);
}
.copilot-preview-toolbar label { display: flex; align-items: center; gap: 8px; color: var(--ns-text-muted); font-size: 11px; }
.copilot-preview-toolbar select { min-width: 160px; height: 34px; padding: 0 30px 0 10px; border: 1px solid var(--ns-border); border-radius: 9px; color: var(--ns-text); background: var(--ns-surface); }
.copilot-preview-table-wrap { max-width: 100%; overflow: auto; }
.copilot-preview-table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 11px; }
.copilot-preview-table th,
.copilot-preview-table td { min-width: 110px; max-width: 280px; padding: 8px 10px; overflow: hidden; border-right: 1px solid var(--ns-border); border-bottom: 1px solid var(--ns-border); color: var(--ns-text); text-overflow: ellipsis; white-space: nowrap; }
.copilot-preview-table th { position: sticky; top: 55px; z-index: 1; color: var(--ns-text); background: var(--ns-surface-muted); font-weight: 700; text-align: left; }
.copilot-preview-table td { background: var(--ns-surface); }
.copilot-preview-table tr:nth-child(even) td { background: var(--ns-surface-raised); }
.copilot-preview-limit { margin: 0; padding: 8px 14px; color: var(--ns-text-muted); background: var(--ns-surface-muted); font-size: 11px; }
html.copilot-fullscreen .copilot-preview > header { min-height: 72px; padding-inline: clamp(18px, 4vw, 64px); }
.copilot-message-file img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-bottom: 1px solid var(--ns-border);
    background: var(--ns-surface-muted);
}
.copilot-message-file-row {
    min-width: 0;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 9px;
    padding: 10px;
}
.copilot-message-file-row > span:nth-child(2) { min-width: 0; }
.copilot-message-file strong,
.copilot-message-file small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copilot-message-file strong { color: var(--ns-text); font-size: 12px; line-height: 1.35; }
.copilot-message-file small { margin-top: 2px; color: var(--ns-text-muted); font-size: 10px; }
.copilot-message-file-icon { color: var(--ns-accent); font-size: 25px; }
.copilot-message-file-action { color: var(--ns-text-muted); font-size: 18px; }
.copilot-message-user { align-self: flex-end; color: #fff; background: var(--ns-accent-strong); border-bottom-right-radius: 4px; }
.copilot-message-assistant { align-self: flex-start; color: var(--ns-text); background: var(--ns-surface-muted); border-bottom-left-radius: 4px; }
.copilot-message-assistant.is-entering {
    transform-origin: left bottom;
    animation: copilot-response-enter 420ms cubic-bezier(.2,.8,.2,1) both;
}
.copilot-typing { min-width: 58px; padding: 13px 15px; }
.copilot-typing-dots { display: flex; align-items: center; gap: 5px; height: 12px; }
.copilot-typing-dots i {
    width: 6px;
    height: 6px;
    display: block;
    border-radius: 50%;
    background: var(--ns-text-muted);
    animation: copilot-thinking-dot 1.05s ease-in-out infinite;
}
.copilot-typing-dots i:nth-child(2) { animation-delay: 140ms; }
.copilot-typing-dots i:nth-child(3) { animation-delay: 280ms; }
.copilot-message-streaming::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 1em;
    margin-left: 3px;
    vertical-align: -.15em;
    background: var(--ns-accent);
    animation: copilot-cursor 850ms steps(1) infinite;
}
@keyframes copilot-cursor { 50% { opacity: 0; } }
@keyframes copilot-response-enter {
    0% { opacity: 0; transform: translateY(10px) scale(.975); filter: blur(2px); }
    65% { opacity: 1; transform: translateY(-1px) scale(1); filter: blur(0); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes copilot-thinking-dot {
    0%, 60%, 100% { opacity: .38; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
    .copilot-message-assistant.is-entering,
    .copilot-typing-dots i { animation: none !important; }
}
.copilot-action-card {
    display: grid;
    gap: 10px;
    padding: 13px;
    border: 1px solid color-mix(in srgb, var(--ns-accent) 42%, var(--ns-border));
    border-radius: 14px;
    background: var(--ns-surface-raised);
}
.copilot-action-card p { margin: 0; font-size: 13px; line-height: 1.5; }
.copilot-action-controls { display: flex; gap: 8px; }
.copilot-action-controls button { min-height: 36px; padding: 7px 13px; border-radius: 10px; cursor: pointer; }
.copilot-secondary-action { border: 1px solid var(--ns-border); color: var(--ns-text); background: transparent; }
.copilot-action-controls button:disabled { opacity: .55; cursor: wait; }
.copilot-bottom { flex: 0 0 auto; padding: 12px 18px 18px; }
.copilot-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.copilot-suggestions[hidden] { display: none !important; }
.copilot-suggestions button {
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid var(--ns-border);
    border-radius: 12px;
    color: var(--ns-text-muted);
    background: transparent;
    font-size: 12px;
    cursor: pointer;
}
.copilot-suggestions button:hover { color: var(--ns-text); background: var(--ns-surface-muted); }
.copilot-composer {
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--ns-accent) 32%, var(--ns-border));
    border-radius: 28px;
    background: var(--ns-surface-raised);
    box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--ns-accent) 8%, transparent);
}
.copilot-composer textarea {
    display: block;
    width: 100%;
    min-height: 54px;
    max-height: 150px;
    padding: 0 4px;
    resize: none;
    border: 0;
    outline: 0;
    color: var(--ns-text);
    background: transparent;
    font: inherit;
    font-size: 13px;
}
.copilot-composer textarea::placeholder { color: var(--ns-text-muted); }
.copilot-composer-footer { display: flex; align-items: center; justify-content: space-between; }
.copilot-composer-tools { display: flex; align-items: center; gap: 8px; }
.copilot-file-input { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; }
.copilot-attach-btn {
    position: relative;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ns-border);
    border-radius: 50%;
    color: var(--ns-text);
    background: transparent;
    cursor: pointer;
}
.copilot-attach-btn .material-symbols-outlined { font-size: 19px; }
.copilot-attachment-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    color: var(--ns-brand-on-secondary);
    background: var(--ns-brand-secondary);
    font-size: 10px;
    line-height: 17px;
    text-align: center;
}
.copilot-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.copilot-attachments[hidden] { display: none !important; }
.copilot-attachment-chip {
    max-width: 240px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 26px;
    align-items: center;
    gap: 7px;
    padding: 7px 8px;
    border: 1px solid var(--ns-border);
    border-radius: 11px;
    color: var(--ns-text);
    background: var(--ns-surface-muted);
}
.copilot-attachment-chip > .material-symbols-outlined { color: var(--ns-accent); font-size: 20px; }
.copilot-attachment-chip strong, .copilot-attachment-chip small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copilot-attachment-chip strong { font-size: 11px; }
.copilot-attachment-chip small { color: var(--ns-text-muted); font-size: 10px; }
.copilot-attachment-remove { width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; cursor: pointer; }
.copilot-attachment-remove .material-symbols-outlined { font-size: 16px; }
.copilot-attachment-status { min-height: 16px; margin: 0; color: #c2410c; font-size: 11px; }
.copilot-attachment-status:empty { display: none; }
.copilot-mode-btn {
    height: 36px;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 0 12px;
    border: 1px solid var(--ns-border);
    border-radius: 18px;
    color: var(--ns-text);
    background: transparent;
    font-size: 12px;
    font-weight: 600;
}
.copilot-mode-btn .material-symbols-outlined { font-size: 17px; }
.copilot-mode-menu {
    position: absolute;
    bottom: 66px;
    left: 14px;
    z-index: 20;
    width: min(440px, calc(100% - 28px));
    padding: 10px;
    border: 1px solid var(--ns-border);
    border-radius: 20px;
    background: var(--ns-surface-raised);
    box-shadow: var(--ns-shadow-lg);
}
.copilot-mode-menu[hidden] { display: none !important; }
.copilot-mode-menu button {
    width: 100%;
    min-height: 66px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 0;
    border-radius: 13px;
    color: var(--ns-text);
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.copilot-mode-menu button:hover,
.copilot-mode-menu button.is-selected { background: var(--ns-surface-muted); }
.copilot-mode-menu button.is-selected { box-shadow: inset 3px 0 0 var(--ns-brand-secondary); }
.copilot-mode-menu .material-symbols-outlined { color: var(--ns-text); font-size: 25px; }
.copilot-mode-menu strong, .copilot-mode-menu small { display: block; }
.copilot-mode-menu strong { font-size: 15px; line-height: 1.3; }
.copilot-mode-menu small { margin-top: 3px; color: var(--ns-text-muted); font-size: 12px; line-height: 1.35; }
.copilot-send-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: var(--ns-accent-strong);
    cursor: pointer;
}
.copilot-backdrop { display: none; }
#copilot-toggle[aria-expanded="true"] { color: var(--ns-lavender); background: var(--ns-accent-soft); }
html[data-theme="dark"] .nsika-copilot { background: var(--ns-surface); box-shadow: -18px 0 42px rgba(0,0,0,.32); }
html[data-theme="dark"] .copilot-composer { background: var(--ns-surface-raised); }

@media (max-width: 900px) {
    .nsika-copilot {
        position: fixed;
        top: 8px;
        right: 8px;
        bottom: 8px;
        z-index: 12000;
        height: auto;
        border-radius: 16px;
    }
    .copilot-open .nsika-copilot { width: min(420px, calc(100vw - 24px)); min-width: min(420px, calc(100vw - 24px)); }
    .copilot-backdrop {
        position: fixed;
        inset: 0;
        z-index: 11990;
        border: 0;
        background: rgba(5,5,12,.55);
        backdrop-filter: blur(3px);
    }
    .copilot-open .copilot-backdrop { display: block; }
}
@media (max-width: 480px) {
    .nsika-copilot { inset: 0; border-radius: 0; }
    .copilot-open .nsika-copilot { width: 100vw; min-width: 100vw; }
    .copilot-conversation { padding: 24px 22px 16px; }
    .copilot-bottom { padding: 10px 12px 12px; }
}

/* Full AI mode: Copilot becomes the entire application viewport. */
html.copilot-fullscreen .nsika-copilot {
    position: fixed;
    inset: 0;
    z-index: 13000;
    width: 100vw;
    min-width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0 !important;
    border-radius: 0 !important;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    box-sizing: border-box;
    background:
        radial-gradient(900px 520px at 50% -10%, color-mix(in srgb, var(--ns-brand-secondary) 10%, transparent), transparent 68%),
        var(--ns-surface);
}
html.copilot-fullscreen,
html.copilot-fullscreen body {
    overflow: hidden !important;
}
html.copilot-fullscreen .copilot-history-toggle { display: flex; }
html.copilot-fullscreen .copilot-history-sidebar {
    position: absolute;
    top: 72px;
    bottom: 0;
    left: 0;
    z-index: 11;
    width: 320px;
    display: flex;
    flex-direction: column;
    padding: 18px 14px;
    border-right: 1px solid var(--ns-border);
    background: var(--ns-surface-raised);
    opacity: 0;
    transform: translateX(-100%);
    pointer-events: none;
    transition: transform 220ms cubic-bezier(.2,.8,.2,1), opacity 160ms ease;
}
html.copilot-fullscreen .nsika-copilot.copilot-history-open .copilot-history-sidebar {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}
.copilot-history-sidebar > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 4px 16px;
}
.copilot-history-sidebar h2 { margin: 2px 0 0; color: var(--ns-text); font-size: 18px; }
.copilot-sidebar-eyebrow {
    color: var(--ns-accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.copilot-sidebar-new {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
    border: 1px solid color-mix(in srgb, var(--ns-accent) 44%, var(--ns-border));
    border-radius: 12px;
    color: var(--ns-brand-on-secondary);
    background: var(--ns-brand-secondary);
    font-weight: 700;
    cursor: pointer;
}
.copilot-sidebar-new .material-symbols-outlined { font-size: 18px; }
.copilot-history-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
html.copilot-fullscreen .copilot-conversation,
html.copilot-fullscreen .copilot-bottom,
html.copilot-fullscreen .copilot-tool-view {
    box-sizing: border-box;
    transition: margin-left 220ms cubic-bezier(.2,.8,.2,1), width 220ms cubic-bezier(.2,.8,.2,1);
}
html.copilot-fullscreen .nsika-copilot.copilot-history-open .copilot-conversation,
html.copilot-fullscreen .nsika-copilot.copilot-history-open .copilot-bottom {
    position: relative;
    width: calc(100% - 320px);
    margin-left: 320px;
}
html.copilot-fullscreen .nsika-copilot.copilot-history-open .copilot-tool-view { left: 320px; }
html.copilot-fullscreen .copilot-header {
    width: 100%;
    height: 72px;
    min-height: 72px;
    margin-inline: 0;
    padding-inline: clamp(18px, 2.5vw, 48px);
    box-sizing: border-box;
    border-bottom: 1px solid var(--ns-border);
    background: var(--ns-surface);
}
html.copilot-fullscreen .copilot-header-actions { gap: 10px; }
html.copilot-fullscreen .copilot-icon-btn { width: 42px; height: 42px; }
html.copilot-fullscreen .copilot-options-menu { top: 62px; right: 52px; }
html.copilot-fullscreen .copilot-conversation {
    width: 100%;
    margin-inline: 0;
    padding: clamp(32px, 6vh, 68px) clamp(24px, 4vw, 72px) 24px;
}
html.copilot-fullscreen .copilot-welcome {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
}
html.copilot-fullscreen .copilot-mark {
    margin-inline: auto;
}
html.copilot-fullscreen .copilot-welcome h2 {
    font-size: clamp(38px, 5vw, 64px);
    line-height: 1.06;
}
html.copilot-fullscreen .copilot-welcome p {
    max-width: 560px;
    margin: 18px auto 0;
    font-size: 15px;
}
html.copilot-fullscreen .copilot-messages {
    width: 100%;
    margin-inline: 0;
}
html.copilot-fullscreen .copilot-message {
    max-width: min(68%, 820px);
    padding: 13px 16px;
    font-size: 14px;
}
html.copilot-fullscreen .copilot-bottom {
    width: 100%;
    margin-inline: 0;
    padding: 12px clamp(24px, 4vw, 72px) clamp(18px, 3vh, 34px);
}
html.copilot-fullscreen .copilot-suggestions { justify-content: center; }
html.copilot-fullscreen .copilot-composer {
    max-width: 1464px;
    margin-inline: auto;
    padding: 16px 18px;
}
html.copilot-fullscreen .copilot-tool-view { inset: 72px 0 0; }
html.copilot-fullscreen .copilot-tool-view > header {
    width: 100%;
    min-height: 68px;
    margin-inline: 0;
    padding-inline: clamp(24px, 4vw, 72px);
    box-sizing: border-box;
}
html.copilot-fullscreen .copilot-tool-view h2 { font-size: 21px; }
html.copilot-fullscreen .copilot-tool-content {
    width: 100%;
    margin-inline: 0;
    padding: 28px clamp(24px, 4vw, 72px) 48px;
    box-sizing: border-box;
}
html.copilot-fullscreen .copilot-settings,
html.copilot-fullscreen .copilot-feedback-form,
html.copilot-fullscreen .copilot-chat-list { width: 100%; }
html.copilot-fullscreen .copilot-setting-row { min-height: 64px; padding: 14px 18px; }
html.copilot-fullscreen .copilot-setting-row input[type="checkbox"] {
    appearance: none;
    width: 42px;
    height: 24px;
    flex: 0 0 auto;
    border: 1px solid var(--ns-border);
    border-radius: 999px;
    background: var(--ns-surface-muted);
    cursor: pointer;
    transition: background var(--ns-motion), border-color var(--ns-motion);
}
html.copilot-fullscreen .copilot-setting-row input[type="checkbox"]::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    margin: 2px;
    border-radius: 50%;
    background: var(--ns-text-muted);
    transition: transform var(--ns-motion), background var(--ns-motion);
}
html.copilot-fullscreen .copilot-setting-row input[type="checkbox"]:checked {
    border-color: var(--ns-brand-secondary);
    background: var(--ns-brand-secondary);
}
html.copilot-fullscreen .copilot-setting-row input[type="checkbox"]:checked::before {
    transform: translateX(18px);
    background: var(--ns-brand-on-secondary);
}
html.copilot-fullscreen .copilot-backdrop { display: none !important; }

@media (max-width: 600px) {
    html.copilot-fullscreen .copilot-header { width: 100%; }
    html.copilot-fullscreen .copilot-conversation,
    html.copilot-fullscreen .copilot-bottom,
    html.copilot-fullscreen .copilot-tool-view > header,
    html.copilot-fullscreen .copilot-tool-content { width: 100%; }
    html.copilot-fullscreen .copilot-welcome h2 { font-size: clamp(32px, 11vw, 46px); }
    html.copilot-fullscreen .copilot-message { max-width: 88%; }
    html.copilot-fullscreen .copilot-history-sidebar { width: min(320px, 88vw); }
    html.copilot-fullscreen .nsika-copilot.copilot-history-open .copilot-conversation,
    html.copilot-fullscreen .nsika-copilot.copilot-history-open .copilot-bottom { width: 100%; margin-left: 0; }
    html.copilot-fullscreen .nsika-copilot.copilot-history-open .copilot-tool-view { left: 0; }
}

@media (min-width: 601px) and (max-width: 900px) {
    html.copilot-fullscreen .nsika-copilot.copilot-history-open .copilot-conversation,
    html.copilot-fullscreen .nsika-copilot.copilot-history-open .copilot-bottom {
        width: 100%;
        margin-left: 0;
    }
    html.copilot-fullscreen .nsika-copilot.copilot-history-open .copilot-tool-view { left: 0; }
}

/* Keep typography crisp; elevation is applied selectively below. */
.app-shell,
.app-shell *,
.app-shell *::before,
.app-shell *::after {
    text-shadow: none !important;
}

/* Collapsing hides the secondary panel; the primary icon rail stays visible. */
html[data-theme] .app-shell.is-nav-collapsed .app-sidebar {
    width: 0 !important;
    min-width: 0 !important;
    opacity: 0;
    pointer-events: none;
    border: 0 !important;
}

@media (max-width: 1279px) {
    html[data-theme] .app-sidebar {
        width: 280px !important;
        min-width: 280px !important;
    }
    .sidebar-section-label, .sidebar-user-info, .menu-card-item-list,
    .sub-nav-toggler, .sub-links, .navigation-link-label,
    .child-navigation-link-label, .card-title { display: initial !important; }
    .module-menu-content .navigation-link { justify-content: flex-start !important; }
    .topbar-company-chip { display: none !important; }
}
@media (max-width: 900px) {
    html[data-theme] .app-sidebar { display: none !important; }
    .app-rail { width: 64px; min-width: 64px; }
    .app-rail-brand, .app-rail-link { width: 42px; height: 42px; }
    .topbar-search-slot { width: min(320px, 48vw); }
    .app-content-pane { margin: 8px 0; height: calc(100% - 16px) !important; border-radius: 0.5rem; }
    #page-scroll-body { margin: 0; }
}
@media (max-width: 600px) {
    .app-rail { display: none; }
    .topbar-search-slot { flex: 1 1 auto; width: auto; }
    .topbar-account-btn, .topbar-company-chip { display: none !important; }
    html[data-theme] .app-topbar { padding: 0 10px !important; gap: 6px; }
    .app-content-pane { margin: 6px 0; height: calc(100% - 12px) !important; border-radius: 0.5rem; }
    #page-scroll-body { margin: 0; border-radius: 12px; }
}

/* Legacy component theme bridge ------------------------------------------
   Older modules were authored with fixed Tailwind white/gray/slate colors.
   These mappings keep those modules synchronized with the resolved system,
   light, or dark mode without requiring page-specific overrides. */
html[data-theme] body.nsika-app-body {
    color: var(--ns-text);
    color-scheme: light;
}
html[data-theme="dark"] body.nsika-app-body { color-scheme: dark; }
html[data-theme="light"] body.nsika-app-body { color-scheme: light; }

html[data-theme] body.nsika-app-body .bg-white,
html[data-theme] body.nsika-app-body [class*="bg-white/"],
html[data-theme] body.nsika-app-body .bg-slate-50,
html[data-theme] body.nsika-app-body [class*="bg-slate-50/"],
html[data-theme] body.nsika-app-body .bg-gray-50 {
    background-color: var(--ns-surface) !important;
}
html[data-theme] body.nsika-app-body .bg-gray-100,
html[data-theme] body.nsika-app-body .bg-gray-200,
html[data-theme] body.nsika-app-body .bg-gray-300,
html[data-theme] body.nsika-app-body .bg-slate-100,
html[data-theme] body.nsika-app-body [class*="bg-slate-100/"],
html[data-theme] body.nsika-app-body .bg-slate-200,
html[data-theme] body.nsika-app-body [class*="bg-slate-200/"] {
    background-color: var(--ns-surface-muted) !important;
}
html[data-theme="dark"] body.nsika-app-body .bg-gray-400,
html[data-theme="dark"] body.nsika-app-body .bg-gray-500,
html[data-theme="dark"] body.nsika-app-body .bg-gray-600,
html[data-theme="dark"] body.nsika-app-body .bg-gray-800,
html[data-theme="dark"] body.nsika-app-body .bg-gray-900,
html[data-theme="dark"] body.nsika-app-body .bg-slate-300,
html[data-theme="dark"] body.nsika-app-body .bg-slate-600,
html[data-theme="dark"] body.nsika-app-body .bg-slate-700,
html[data-theme="dark"] body.nsika-app-body .bg-slate-800,
html[data-theme="dark"] body.nsika-app-body .bg-slate-900,
html[data-theme="dark"] body.nsika-app-body [class*="bg-slate-900/"] {
    background-color: var(--ns-surface-raised) !important;
}

html[data-theme] body.nsika-app-body .text-black,
html[data-theme] body.nsika-app-body .text-gray-700,
html[data-theme] body.nsika-app-body .text-gray-800,
html[data-theme] body.nsika-app-body .text-gray-900,
html[data-theme] body.nsika-app-body .text-slate-600,
html[data-theme] body.nsika-app-body [class*="text-slate-600/"],
html[data-theme] body.nsika-app-body .text-slate-700,
html[data-theme] body.nsika-app-body .text-slate-750,
html[data-theme] body.nsika-app-body .text-slate-800,
html[data-theme] body.nsika-app-body .text-slate-900 {
    color: var(--ns-text) !important;
}
html[data-theme] body.nsika-app-body .text-gray-300,
html[data-theme] body.nsika-app-body .text-gray-400,
html[data-theme] body.nsika-app-body .text-gray-500,
html[data-theme] body.nsika-app-body .text-gray-600,
html[data-theme] body.nsika-app-body .text-slate-200,
html[data-theme] body.nsika-app-body .text-slate-300,
html[data-theme] body.nsika-app-body .text-slate-400,
html[data-theme] body.nsika-app-body .text-slate-500 {
    color: var(--ns-text-muted) !important;
}

html[data-theme] body.nsika-app-body .border-gray-50,
html[data-theme] body.nsika-app-body .border-gray-100,
html[data-theme] body.nsika-app-body .border-gray-150,
html[data-theme] body.nsika-app-body .border-gray-200,
html[data-theme] body.nsika-app-body .border-gray-300,
html[data-theme] body.nsika-app-body .border-gray-400,
html[data-theme] body.nsika-app-body .border-gray-600,
html[data-theme] body.nsika-app-body .border-slate-100,
html[data-theme] body.nsika-app-body .border-slate-200,
html[data-theme] body.nsika-app-body [class*="border-slate-200/"],
html[data-theme] body.nsika-app-body .border-slate-300,
html[data-theme] body.nsika-app-body [class*="border-slate-300/"],
html[data-theme] body.nsika-app-body .border-slate-400,
html[data-theme] body.nsika-app-body .border-slate-500,
html[data-theme] body.nsika-app-body [class*="border-slate-500/"],
html[data-theme] body.nsika-app-body .border-slate-600 {
    border-color: var(--ns-border) !important;
}

html[data-theme] body.nsika-app-body :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select,
    textarea,
    [contenteditable="true"]
) {
    border-color: var(--ns-border) !important;
    background-color: var(--ns-surface) !important;
    color: var(--ns-text) !important;
    caret-color: var(--ns-accent);
}
html[data-theme] body.nsika-app-body :where(input, textarea)::placeholder {
    color: var(--ns-text-muted) !important;
    opacity: .82;
}
html[data-theme] body.nsika-app-body :where(input, select, textarea):disabled {
    background-color: var(--ns-surface-muted) !important;
    color: var(--ns-text-muted) !important;
    opacity: .72;
}
html[data-theme] body.nsika-app-body :where(input[type="checkbox"], input[type="radio"], input[type="range"]) {
    accent-color: var(--ns-accent);
}

html[data-theme] body.nsika-app-body :where(
    .box,
    .report-box,
    .report-box-2,
    .modal-content,
    .dropdown-menu__content,
    .dropdown-content,
    .form-panel,
    .card
) {
    border-color: var(--ns-border) !important;
    background-color: var(--ns-surface) !important;
    color: var(--ns-text) !important;
}

/* Nsika dropdowns ---------------------------------------------------------
   The starter plugin moves .dropdown-menu into <body>, so these rules are
   scoped by theme rather than by the original page container. */
html[data-theme] :where(.dropdown) {
    --ns-dropdown-trigger-bg: color-mix(in srgb, var(--ns-surface-raised) 92%, transparent);
    --ns-dropdown-trigger-hover: color-mix(in srgb, var(--ns-surface-muted) 86%, var(--ns-surface-raised));
    --ns-dropdown-trigger-border: color-mix(in srgb, var(--ns-border) 78%, transparent);
    --ns-dropdown-menu-bg: color-mix(in srgb, var(--ns-surface-raised) 82%, var(--ns-brand-primary));
    --ns-dropdown-menu-glow: color-mix(in srgb, var(--ns-brand-primary) 10%, transparent);
}

html[data-theme] :where(.dropdown-toggle, .modern-list-action-btn, .bank-transaction-action-btn)[data-tw-toggle="dropdown"] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--ns-dropdown-trigger-border, var(--ns-border)) !important;
    border-radius: var(--ns-radius-sm) !important;
    background: var(--ns-dropdown-trigger-bg, var(--ns-surface-raised)) !important;
    color: var(--ns-text) !important;
    box-shadow: var(--ns-shadow-sm) !important;
    transition:
        transform var(--ns-motion),
        border-color var(--ns-motion),
        background var(--ns-motion),
        box-shadow var(--ns-motion),
        color var(--ns-motion) !important;
}

html[data-theme] :where(.dropdown-toggle, .modern-list-action-btn, .bank-transaction-action-btn)[data-tw-toggle="dropdown"]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--ns-accent-soft) 34%, transparent), transparent 72%);
    opacity: 0;
    transition: opacity var(--ns-motion);
}

html[data-theme] :where(.dropdown-toggle, .modern-list-action-btn, .bank-transaction-action-btn)[data-tw-toggle="dropdown"] > * {
    position: relative;
    z-index: 1;
}

html[data-theme] :where(.dropdown-toggle, .modern-list-action-btn, .bank-transaction-action-btn)[data-tw-toggle="dropdown"]:hover,
html[data-theme] :where(.dropdown-toggle, .modern-list-action-btn, .bank-transaction-action-btn)[data-tw-toggle="dropdown"]:focus-visible,
html[data-theme] :where(.dropdown-toggle, .modern-list-action-btn, .bank-transaction-action-btn)[data-tw-toggle="dropdown"][aria-expanded="true"] {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--ns-accent) 30%, var(--ns-border)) !important;
    background: var(--ns-dropdown-trigger-hover, var(--ns-surface-muted)) !important;
    color: var(--ns-text) !important;
    box-shadow: var(--ns-shadow-md) !important;
}

html[data-theme] :where(.dropdown-toggle, .modern-list-action-btn, .bank-transaction-action-btn)[data-tw-toggle="dropdown"]:hover::before,
html[data-theme] :where(.dropdown-toggle, .modern-list-action-btn, .bank-transaction-action-btn)[data-tw-toggle="dropdown"]:focus-visible::before,
html[data-theme] :where(.dropdown-toggle, .modern-list-action-btn, .bank-transaction-action-btn)[data-tw-toggle="dropdown"][aria-expanded="true"]::before {
    opacity: 1;
}

html[data-theme] :where(.dropdown-toggle, .modern-list-action-btn, .bank-transaction-action-btn)[data-tw-toggle="dropdown"] :where(i, svg, .material-symbols-outlined) {
    color: currentColor !important;
    transition: transform var(--ns-motion), color var(--ns-motion);
}

html[data-theme] :where(.dropdown-toggle, .modern-list-action-btn, .bank-transaction-action-btn)[data-tw-toggle="dropdown"][aria-expanded="true"] :where(i, svg, .material-symbols-outlined) {
    transform: translateY(-1px);
}

html[data-theme] body > .dropdown-menu {
    min-width: 12rem;
    border: 0 !important;
    border-radius: var(--ns-radius-sm) !important;
    padding: 0 !important;
    background: transparent !important;
    filter: drop-shadow(0 20px 42px color-mix(in srgb, var(--ns-brand-primary) 26%, transparent));
    transform-origin: top right;
}

/* Closed menus are restored inside their trigger wrapper by the starter
   plugin. Keep that template node out of the row's layout entirely; the
   body-mounted copy below is the only menu that should paint. */
html[data-theme] body.nsika-app-body .dropdown > .dropdown-menu {
    display: none !important;
}

html[data-theme] body.nsika-app-body > .dropdown-menu.show {
    display: block !important;
}

html[data-theme] body > .dropdown-menu.show {
    animation: none;
}

html[data-theme] body > .dropdown-menu[data-popper-placement^="top"].show {
    transform-origin: bottom right;
}

html[data-theme] body > .dropdown-menu > .dropdown-content {
    overflow: hidden;
    margin-top: 0.42rem !important;
    padding: 0.36rem 0.44rem !important;
    border: 1px solid color-mix(in srgb, var(--ns-accent) 24%, var(--ns-border)) !important;
    border-radius: 11px !important;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--ns-brand-primary) 42%, var(--ns-surface-raised) 58%), color-mix(in srgb, var(--ns-accent) 24%, var(--ns-surface) 76%)),
        var(--ns-dropdown-menu-bg, var(--ns-surface-raised)) !important;
    color: var(--ns-text) !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 24%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--ns-brand-primary) 10%, transparent),
        0 20px 48px color-mix(in srgb, var(--ns-brand-primary) 22%, transparent) !important;
    backdrop-filter: blur(24px) saturate(142%);
    -webkit-backdrop-filter: blur(24px) saturate(142%);
}

html[data-theme] body > .dropdown-menu.show > .dropdown-content {
    animation: nsika-dropdown-content-in 135ms cubic-bezier(.22, 1, .36, 1) both;
}

html[data-theme] body > .dropdown-menu[data-popper-placement^="top"].show > .dropdown-content {
    animation-name: nsika-dropdown-content-in-up;
}

html[data-theme] body > .dropdown-menu > .dropdown-content::before {
    display: none;
}

html[data-theme] body > .dropdown-menu > .dropdown-content .dropdown-header {
    padding: 0.45rem 0.55rem 0.35rem !important;
    color: var(--ns-text-muted) !important;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

html[data-theme] body > .dropdown-menu > .dropdown-content .dropdown-divider {
    height: 1px;
    margin: 0.18rem 0 !important;
    border: 0 !important;
    background: color-mix(in srgb, var(--ns-border) 72%, transparent) !important;
}

html[data-theme] body > .dropdown-menu > .dropdown-content .dropdown-item {
    position: relative;
    min-height: 36px;
    gap: 0.6rem;
    border-radius: 7px !important;
    color: color-mix(in srgb, var(--ns-text) 86%, var(--ns-text-muted)) !important;
    font-size: 0.8rem;
    font-weight: 650;
    line-height: 1.25;
    margin: 0 !important;
    padding: 0.5rem 0.62rem !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
    outline: none;
    transition:
        transform var(--ns-motion),
        background var(--ns-motion),
        color var(--ns-motion),
        box-shadow var(--ns-motion) !important;
}

html[data-theme] body > .dropdown-menu > .dropdown-content .dropdown-item::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 2px;
    height: 0;
    border-radius: 999px;
    background: var(--ns-accent);
    transform: translateY(-50%);
    transition: height var(--ns-motion);
}

html[data-theme] body > .dropdown-menu > .dropdown-content .dropdown-item:hover,
html[data-theme] body > .dropdown-menu > .dropdown-content .dropdown-item:focus-visible {
    transform: none;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--ns-accent) 72%, var(--ns-lavender)), color-mix(in srgb, var(--ns-accent) 46%, var(--ns-surface-muted))) !important;
    color: var(--ns-brand-on-secondary) !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 18%, transparent),
        0 8px 20px color-mix(in srgb, var(--ns-accent) 20%, transparent) !important;
}

html[data-theme] body > .dropdown-menu > .dropdown-content .dropdown-item:hover::before,
html[data-theme] body > .dropdown-menu > .dropdown-content .dropdown-item:focus-visible::before {
    height: 0;
}

html[data-theme] body > .dropdown-menu > .dropdown-content .dropdown-item i,
html[data-theme] body > .dropdown-menu > .dropdown-content .dropdown-item svg,
html[data-theme] body > .dropdown-menu > .dropdown-content .dropdown-item .material-symbols-outlined {
    width: 1.12rem;
    min-width: 1.12rem;
    color: color-mix(in srgb, var(--ns-accent) 64%, var(--ns-text-muted)) !important;
    transition: transform var(--ns-motion), color var(--ns-motion);
}

html[data-theme] body > .dropdown-menu > .dropdown-content .dropdown-item:hover i,
html[data-theme] body > .dropdown-menu > .dropdown-content .dropdown-item:hover svg,
html[data-theme] body > .dropdown-menu > .dropdown-content .dropdown-item:hover .material-symbols-outlined {
    transform: scale(1.03);
    color: currentColor !important;
}

html[data-theme] body > .dropdown-menu > .dropdown-content li + li {
    border-top: 1px solid color-mix(in srgb, var(--ns-brand-primary) 24%, var(--ns-border));
}

html[data-theme] body > .dropdown-menu > .dropdown-content .dropdown-footer {
    padding: 0.35rem !important;
    border-top: 1px solid color-mix(in srgb, var(--ns-border) 72%, transparent);
}

html[data-theme] body > .notification-content.dropdown-menu > .dropdown-content {
    min-width: min(360px, calc(100vw - 32px));
}

html[data-theme] :where(.nav-dropdown-actions-wrapper .dropdown-item.logout),
html[data-theme] body > .dropdown-menu > .dropdown-content .dropdown-item.logout {
    color: #e11d48 !important;
}

html[data-theme] :where(.nav-dropdown-actions-wrapper .dropdown-item.logout:hover),
html[data-theme] body > .dropdown-menu > .dropdown-content .dropdown-item.logout:hover {
    background: color-mix(in srgb, #e11d48 10%, var(--ns-surface-raised)) !important;
    color: #be123c !important;
}

@keyframes nsika-dropdown-content-in {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes nsika-dropdown-content-in-up {
    from {
        opacity: 0;
        transform: translateY(4px) scale(.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme] body > .dropdown-menu.show > .dropdown-content {
        animation: none;
    }
    html[data-theme] :where(.dropdown-toggle, .modern-list-action-btn, .bank-transaction-action-btn, .dropdown-item) {
        transition: none !important;
    }
}
html[data-theme] body.nsika-app-body :where(table, thead, tbody, tfoot, tr, th, td) {
    border-color: var(--ns-border) !important;
    color: inherit;
}
html[data-theme] body.nsika-app-body :where(th, thead) {
    color: var(--ns-text) !important;
}
html[data-theme] body.nsika-app-body :where(hr) { border-color: var(--ns-border) !important; }
/* Database-backed legacy brand utilities. */
html[data-theme] body.nsika-app-body :where(.bg-default) {
    background-color: var(--ns-brand-primary) !important;
}
html[data-theme] body.nsika-app-body [class^="bg-default/"],
html[data-theme] body.nsika-app-body [class*=" bg-default/"] {
    background-color: color-mix(in srgb, var(--ns-brand-primary) 18%, transparent) !important;
}
html[data-theme] body.nsika-app-body :where(.text-default) {
    color: var(--ns-brand-primary) !important;
}
html[data-theme] body.nsika-app-body :where(.border-default),
html[data-theme] body.nsika-app-body [class^="border-default/"],
html[data-theme] body.nsika-app-body [class*=" border-default/"] {
    border-color: var(--ns-brand-primary) !important;
}
html[data-theme] body.nsika-app-body :where(.bg-secondary_color) {
    background-color: var(--ns-brand-secondary) !important;
}
html[data-theme] body.nsika-app-body [class^="bg-secondary_color/"],
html[data-theme] body.nsika-app-body [class*=" bg-secondary_color/"] {
    background-color: color-mix(in srgb, var(--ns-brand-secondary) 18%, transparent) !important;
}
html[data-theme] body.nsika-app-body :where(.text-secondary_color) {
    color: var(--ns-brand-secondary) !important;
}
html[data-theme] body.nsika-app-body :where(.border-secondary_color),
html[data-theme] body.nsika-app-body [class^="border-secondary_color/"],
html[data-theme] body.nsika-app-body [class*=" border-secondary_color/"] {
    border-color: var(--ns-brand-secondary) !important;
}
html[data-theme] body.nsika-app-body :where(.text-theme_text_color) {
    color: var(--ns-brand-on-primary) !important;
}
html[data-theme] body.nsika-app-body [class*="hover:bg-default"]:hover,
html[data-theme] body.nsika-app-body [class*="active:bg-default"]:active,
html[data-theme] body.nsika-app-body [class*="checked:bg-default"]:checked {
    background-color: var(--ns-brand-primary) !important;
}
html[data-theme] body.nsika-app-body [class*="hover:bg-secondary_color"]:hover,
html[data-theme] body.nsika-app-body [class*="active:bg-secondary_color"]:active,
html[data-theme] body.nsika-app-body [class*="checked:bg-secondary_color"]:checked {
    background-color: var(--ns-brand-secondary) !important;
}

/* Shared list view and pagination surfaces generated by html_builder.js. */
html[data-theme] body.nsika-app-body :where(
    .listview-wrapper,
    .listview,
    .modern-listview,
    .lbody,
    .table-wrapper,
    .table-body,
    .tbody
) {
    border-color: var(--ns-border) !important;
    background-color: var(--ns-surface) !important;
    color: var(--ns-text) !important;
}
html[data-theme] body.nsika-app-body :where(.modern-list-row, .table-wrapper .tbody .table-row) {
    border-color: var(--ns-border) !important;
    background-color: var(--ns-surface-raised) !important;
    color: var(--ns-text) !important;
}
html[data-theme] body.nsika-app-body :where(.modern-list-row:nth-child(even), .modern-list-row:hover) {
    background-color: var(--ns-surface-muted) !important;
}
html[data-theme] body.nsika-app-body :where(.modern-list-row .td, .modern-list-header .th) {
    border-color: var(--ns-border) !important;
}
html[data-theme] body.nsika-app-body :where(.modern-list-header) {
    border-color: var(--ns-border) !important;
    background: color-mix(in srgb, var(--ns-surface-muted) 78%, var(--ns-bg)) !important;
    color: var(--ns-text) !important;
}
html[data-theme] body.nsika-app-body :where(
    .pagination_wrapper,
    .modern-pagination,
    .report-pagination .pagination_wrapper
) {
    border-color: var(--ns-border) !important;
    background: var(--ns-surface) !important;
    color: var(--ns-text) !important;
}
html[data-theme] body.nsika-app-body :where(
    .modern-pagination .page-link,
    .pagination_wrapper .page-link,
    .modern-pagination .form-select,
    .modern-pagination .page-jump,
    .modern-pagination .page-size-select
) {
    border-color: var(--ns-border) !important;
    background: var(--ns-surface-muted) !important;
    color: var(--ns-text) !important;
}
html[data-theme] body.nsika-app-body :where(
    .modern-pagination .page-link.active,
    .pagination_wrapper .page-link.active
) {
    background: var(--ns-accent-soft) !important;
    color: var(--ns-text) !important;
}
html[data-theme] body.nsika-app-body :where(.modern-pagination .pagination-record-summary) {
    color: var(--ns-text-muted) !important;
}
html[data-theme] body.nsika-app-body .listview-wrapper > .modern-pagination {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin-top: 8px;
    margin-bottom: 0;
    backdrop-filter: blur(14px);
    background: color-mix(in srgb, var(--ns-surface) 88%, transparent) !important;
}

/* Modern list-view finish: compact, readable, and intentionally shadow-free. */
html[data-theme] body.nsika-app-body .modern-listview {
    overflow: hidden;
    border-radius: 14px !important;
    outline: 1px solid var(--ns-border);
    outline-offset: -1px;
}
html[data-theme] body.nsika-app-body .modern-listview .lbody {
    height: clamp(300px, 52vh, 560px) !important;
    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 47px,
            color-mix(in srgb, var(--ns-border) 62%, transparent) 47px,
            color-mix(in srgb, var(--ns-border) 62%, transparent) 48px
        ),
        var(--ns-surface) !important;
    scrollbar-color: color-mix(in srgb, var(--ns-text-muted) 38%, transparent) transparent;
    scrollbar-width: thin;
}
html[data-theme] body.nsika-app-body .modern-list-header {
    height: 48px !important;
    padding-inline: 8px;
    border-radius: 0 !important;
    font-size: 12px;
    letter-spacing: .01em;
}
html[data-theme] body.nsika-app-body .modern-list-header .th {
    color: var(--ns-text) !important;
}
html[data-theme] body.nsika-app-body .modern-list-header .sort-order {
    color: var(--ns-text-muted) !important;
    opacity: .72;
}
html[data-theme] body.nsika-app-body .modern-list-row {
    height: 48px !important;
    min-height: 48px !important;
    margin: 4px 0 !important;
    border-radius: 8px;
    padding-inline: 8px;
    transition: background-color var(--ns-motion), color var(--ns-motion) !important;
}
html[data-theme] body.nsika-app-body .modern-list-row:hover {
    transform: none !important;
    background: color-mix(in srgb, var(--ns-accent-soft) 42%, var(--ns-surface-raised)) !important;
}
html[data-theme] body.nsika-app-body .modern-list-row .list-cell:first-of-type {
    color: var(--ns-text);
}
html[data-theme] body.nsika-app-body .modern-list-row .list-cell-child {
    line-height: 1.35;
}

html[data-theme] body.nsika-app-body div.main-content-wrapper {
    background: transparent !important;
}

html[data-theme] body.nsika-app-body .modern-listview .list-check {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    outline: 1px solid var(--ns-border);
    outline-offset: -1px;
    background: var(--ns-surface-muted) !important;
}
html[data-theme] body.nsika-app-body .modern-listview .list-check:checked {
    outline-color: var(--ns-accent);
    background-color: var(--ns-accent) !important;
}
html[data-theme] body.nsika-app-body :where(
    .modern-row-actions .modern-list-action-btn,
    .list-actions-btn .modern-list-action-btn
) {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    background: var(--ns-accent-soft) !important;
    color: var(--ns-accent-strong) !important;
    transition: background-color var(--ns-motion), color var(--ns-motion) !important;
}
html[data-theme] body.nsika-app-body :where(
    .modern-row-actions .modern-list-action-btn,
    .list-actions-btn .modern-list-action-btn
):hover {
    background: var(--ns-accent) !important;
    color: #fff !important;
}
html[data-theme] body.nsika-app-body .modern-list-action-btn .material-symbols-outlined {
    color: currentColor !important;
    font-size: 19px !important;
}

html[data-theme] body.nsika-app-body .branch-list-surface .modern-list-header .th:last-child {
    color: color-mix(in srgb, var(--branch-board-accent, var(--ns-accent)) 76%, white) !important;
}

html[data-theme] body.nsika-app-body .branch-list-surface .modern-list-header .th:last-child .material-symbols-outlined {
    color: color-mix(in srgb, var(--branch-board-accent, var(--ns-accent)) 82%, white) !important;
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--branch-board-accent, var(--ns-accent)) 42%, transparent));
}

html[data-theme] body.nsika-app-body .branch-list-surface .modern-row-actions .modern-list-action-btn {
    border: 1px solid color-mix(in srgb, var(--branch-board-accent, var(--ns-accent)) 62%, white 8%) !important;
    background:
        radial-gradient(circle at 28% 18%, color-mix(in srgb, white 30%, transparent), transparent 34%),
        linear-gradient(145deg,
            color-mix(in srgb, var(--branch-board-accent, var(--ns-accent)) 92%, white 8%),
            color-mix(in srgb, var(--ns-accent-strong) 76%, var(--branch-board) 24%)
        ) !important;
    color: #fff !important;
    box-shadow:
        0 12px 26px -16px color-mix(in srgb, var(--branch-board-accent, var(--ns-accent)) 86%, #000),
        0 0 0 1px color-mix(in srgb, var(--branch-board-accent, var(--ns-accent)) 18%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 24%, transparent) !important;
}

html[data-theme] body.nsika-app-body .branch-list-surface .modern-row-actions .modern-list-action-btn:hover,
html[data-theme] body.nsika-app-body .branch-list-surface .modern-row-actions .modern-list-action-btn:focus-visible,
html[data-theme] body.nsika-app-body .branch-list-surface .modern-row-actions .modern-list-action-btn[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--branch-board-accent, var(--ns-accent)) 76%, white 18%) !important;
    background:
        radial-gradient(circle at 30% 14%, color-mix(in srgb, white 38%, transparent), transparent 38%),
        linear-gradient(145deg,
            color-mix(in srgb, var(--branch-board-accent, var(--ns-accent)) 100%, white 0%),
            color-mix(in srgb, var(--ns-accent-strong) 86%, var(--branch-board) 14%)
        ) !important;
    box-shadow:
        0 18px 36px -16px color-mix(in srgb, var(--branch-board-accent, var(--ns-accent)) 92%, #000),
        0 0 22px -9px color-mix(in srgb, var(--branch-board-accent, var(--ns-accent)) 88%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 28%, transparent) !important;
    transform: translateY(-1px) scale(1.02);
}

html[data-theme] body.nsika-app-body .branch-list-surface .modern-row-actions .modern-list-action-btn .material-symbols-outlined {
    color: #fff !important;
    text-shadow: 0 1px 8px color-mix(in srgb, #000 28%, transparent);
}
html[data-theme] body.nsika-app-body .modern-pagination {
    min-height: 54px !important;
    margin: 8px 0 0 !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    outline: 1px solid var(--ns-border);
    outline-offset: -1px;
}
html[data-theme] body.nsika-app-body .modern-pagination .page-link {
    display: inline-flex;
    min-width: 34px !important;
    height: 34px !important;
    align-items: center;
    justify-content: center;
    margin-right: 4px !important;
    padding: 0 8px !important;
    border-radius: 9px !important;
}
html[data-theme] body.nsika-app-body .modern-pagination .page-link:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ns-accent-soft) 68%, var(--ns-surface-muted)) !important;
}
html[data-theme] body.nsika-app-body .modern-pagination .page-link.active {
    color: var(--ns-accent-strong) !important;
    outline: 1px solid color-mix(in srgb, var(--ns-accent) 38%, transparent);
    outline-offset: -1px;
}
html[data-theme] body.nsika-app-body :where(
    .modern-pagination .form-select,
    .modern-pagination .page-jump,
    .modern-pagination .page-size-select
) {
    min-height: 36px !important;
    border-radius: 9px !important;
}
@media (max-width: 700px) {
    html[data-theme] body.nsika-app-body .modern-listview .lbody {
        height: clamp(280px, 48vh, 460px) !important;
    }
    html[data-theme] body.nsika-app-body .modern-pagination {
        align-items: stretch !important;
    }
}

/* Authoritative required-field states; keep after generic field/theme overrides. */
html[data-theme] body.nsika-app-body .ns-form-fields .required-field-empty,
html[data-theme] body.nsika-app-body .quick-form-modal-body .required-field-empty,
html[data-theme] body.nsika-app-body .quick-form-drawer-body .required-field-empty {
    border: 2px solid crimson !important;
    border-color: crimson !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, crimson 12%, transparent) !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .required-field-complete,
html[data-theme] body.nsika-app-body .quick-form-modal-body .required-field-complete,
html[data-theme] body.nsika-app-body .quick-form-drawer-body .required-field-complete {
    border: 2px solid #22a35a !important;
    border-color: #22a35a !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #22a35a 12%, transparent) !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .required-field-empty:focus,
html[data-theme] body.nsika-app-body .ns-form-fields .required-field-empty:focus-within,
html[data-theme] body.nsika-app-body .quick-form-modal-body .required-field-empty:focus,
html[data-theme] body.nsika-app-body .quick-form-modal-body .required-field-empty:focus-within,
html[data-theme] body.nsika-app-body .quick-form-drawer-body .required-field-empty:focus,
html[data-theme] body.nsika-app-body .quick-form-drawer-body .required-field-empty:focus-within {
    border-color: crimson !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, crimson 16%, transparent) !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .required-field-complete:focus,
html[data-theme] body.nsika-app-body .ns-form-fields .required-field-complete:focus-within,
html[data-theme] body.nsika-app-body .quick-form-modal-body .required-field-complete:focus,
html[data-theme] body.nsika-app-body .quick-form-modal-body .required-field-complete:focus-within,
html[data-theme] body.nsika-app-body .quick-form-drawer-body .required-field-complete:focus,
html[data-theme] body.nsika-app-body .quick-form-drawer-body .required-field-complete:focus-within {
    border-color: #22a35a !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, #22a35a 16%, transparent) !important;
}

html[data-theme="dark"] body.nsika-app-body [style*="background-color: white"],
html[data-theme="dark"] body.nsika-app-body [style*="background-color:#fff"],
html[data-theme="dark"] body.nsika-app-body [style*="background: white"] {
    background-color: var(--ns-surface) !important;
}
html[data-theme="dark"] body.nsika-app-body [style*="color: black"],
html[data-theme="dark"] body.nsika-app-body [style*="color:#000"] {
    color: var(--ns-text) !important;
}

/* Selective elevation -----------------------------------------------------
   Depth is reserved for structural surfaces and interactive controls so the
   white-label palette stays visible without making every row look raised. */
html[data-theme] body.nsika-app-body .app-content-pane {
    box-shadow: var(--ns-shadow-lg) !important;
}
html[data-theme] body.nsika-app-body :where(.app-sidebar, .nsika-copilot) {
    box-shadow: var(--ns-shadow-md) !important;
}
html[data-theme] body.nsika-app-body :where(.app-topbar, .branch-page-header) {
    box-shadow: var(--ns-shadow-sm) !important;
}
html[data-theme] body.nsika-app-body :where(
    .branch-list-panel,
    .branch-list-surface,
    .modern-listview,
    .modal-content,
    .dropdown-menu__content,
    .dropdown-content
) {
    box-shadow: var(--ns-shadow-md) !important;
}
html[data-theme] body.nsika-app-body :where(
    .branch-list-surface .listview-group,
    .filters-wrapper,
    .branch-list-toolbar,
    .modern-pagination,
    .compact-pagination-shell,
    .box,
    .report-box,
    .report-box-2,
    .card
) {
    box-shadow: var(--ns-shadow-sm) !important;
}
html[data-theme] body.nsika-app-body :where(
    .app-rail-brand,
    .app-rail-link.is-active,
    .branch-add-button,
    .modern-list-action-btn,
    .page-link.active,
    .btn.bg-default,
    .btn.bg-secondary_color
) {
    box-shadow: var(--ns-brand-glow) !important;
}
html[data-theme] body.nsika-app-body :where(
    button,
    .btn,
    .page-link,
    .navigation-link,
    .branch-breadcrumb-link
) {
    transition:
        color var(--ns-motion),
        background-color var(--ns-motion),
        border-color var(--ns-motion),
        box-shadow var(--ns-motion),
        transform var(--ns-motion) !important;
}
html[data-theme] body.nsika-app-body :where(
    .branch-add-button,
    .modern-list-action-btn,
    .page-link:not(.pointer-events-none),
    .btn:not(:disabled)
):hover {
    transform: translateY(-1px);
}
html[data-theme] body.nsika-app-body :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea
) {
    box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ns-brand-primary) 7%, transparent) !important;
}
html[data-theme] body.nsika-app-body :where(input, select, textarea):focus {
    box-shadow: var(--ns-focus) !important;
}

/* Primary navigation rail: softened tenant color over the current theme. */
html[data-theme] body.nsika-app-body .app-rail {
    border-color: color-mix(in srgb, var(--ns-brand-on-primary) 14%, transparent) !important;
    background-color: var(--ns-rail-bg) !important;
    background-image: linear-gradient(
        155deg,
        color-mix(in srgb, var(--ns-brand-secondary) 12%, var(--ns-rail-bg)) 0%,
        var(--ns-rail-bg) 46%,
        color-mix(in srgb, #00001a 14%, var(--ns-rail-bg)) 100%
    ) !important;
    color: var(--ns-brand-on-primary) !important;
    box-shadow: var(--ns-shadow-md) !important;
}
html[data-theme] body.nsika-app-body .app-rail :where(.app-rail-link, .theme-mode-toggle) {
    color: color-mix(in srgb, var(--ns-brand-on-primary) 76%, transparent) !important;
}
html[data-theme] body.nsika-app-body .app-rail :where(.app-rail-link, .theme-mode-toggle):hover {
    color: var(--ns-brand-on-primary) !important;
    background: color-mix(in srgb, var(--ns-brand-on-primary) 13%, transparent) !important;
}
html[data-theme] body.nsika-app-body .app-rail .app-rail-brand,
html[data-theme] body.nsika-app-body .app-rail .app-rail-link.is-active {
    color: var(--ns-brand-on-secondary) !important;
    background: var(--ns-brand-secondary) !important;
    box-shadow: var(--ns-brand-glow) !important;
}
html[data-theme] body.nsika-app-body .app-rail .app-rail-brand.has-company-logo {
    background: #fff !important;
}
html[data-theme] body.nsika-app-body .app-rail .app-rail-modules .app-rail-link.is-active {
    color: var(--ns-brand-on-secondary) !important;
    background: var(--ns-brand-secondary) !important;
}
html[data-theme] body.nsika-app-body .app-rail .app-rail-footer {
    color: var(--ns-brand-on-primary);
}

/* Copilot button contrast guard. Legacy global button rules use !important,
   so keep every Copilot control bound to the resolved theme at the cascade end. */
html[data-theme] body.nsika-app-body .nsika-copilot :where(button) {
    color: var(--ns-text) !important;
}
html[data-theme] body.nsika-app-body .nsika-copilot :where(
    .copilot-icon-btn,
    .copilot-options-menu button
) {
    color: var(--ns-text-muted) !important;
    background-color: transparent !important;
}
html[data-theme] body.nsika-app-body .nsika-copilot :where(
    .copilot-icon-btn,
    .copilot-options-menu button
):hover {
    color: var(--ns-text) !important;
    background-color: var(--ns-surface-muted) !important;
}
html[data-theme] body.nsika-app-body .nsika-copilot :where(
    .copilot-sidebar-new,
    .copilot-primary-action,
    .copilot-send-btn
) {
    border-color: color-mix(in srgb, var(--ns-brand-secondary) 72%, var(--ns-border)) !important;
    color: var(--ns-brand-on-secondary) !important;
    background-color: var(--ns-brand-secondary) !important;
}
html[data-theme] body.nsika-app-body .nsika-copilot :where(
    .copilot-sidebar-new,
    .copilot-primary-action,
    .copilot-send-btn
) .material-symbols-outlined {
    color: currentColor !important;
}
html[data-theme] body.nsika-app-body .nsika-copilot .copilot-suggestions button {
    border-color: var(--ns-border) !important;
    color: var(--ns-text) !important;
    background-color: var(--ns-surface-raised) !important;
}
html[data-theme] body.nsika-app-body .nsika-copilot .copilot-suggestions button:hover {
    border-color: color-mix(in srgb, var(--ns-brand-secondary) 45%, var(--ns-border)) !important;
    color: var(--ns-text) !important;
    background-color: var(--ns-surface-muted) !important;
}
html[data-theme] body.nsika-app-body .nsika-copilot :where(.copilot-mode-btn, .copilot-chat-item) {
    border-color: var(--ns-border) !important;
    color: var(--ns-text) !important;
    background-color: var(--ns-surface-raised) !important;
}
html[data-theme] body.nsika-app-body .nsika-copilot .copilot-attach-btn,
html[data-theme] body.nsika-app-body .nsika-copilot .copilot-attachment-remove {
    border-color: var(--ns-border) !important;
    color: var(--ns-text) !important;
    background-color: transparent !important;
}
html[data-theme] body.nsika-app-body .nsika-copilot .copilot-attach-btn:hover,
html[data-theme] body.nsika-app-body .nsika-copilot .copilot-attachment-remove:hover {
    color: var(--ns-text) !important;
    background-color: var(--ns-surface-muted) !important;
}
html[data-theme] body.nsika-app-body .nsika-copilot .copilot-chat-item small {
    color: var(--ns-text-muted) !important;
}
html[data-theme] body.nsika-app-body .nsika-copilot button.copilot-message-file {
    width: 100%;
    padding: 0 !important;
    border-color: var(--ns-border) !important;
    color: var(--ns-text) !important;
    background-color: var(--ns-surface-raised) !important;
    text-align: left;
}
html[data-theme] body.nsika-app-body .nsika-copilot .copilot-composer {
    position: relative;
    overflow: visible;
    border-color: color-mix(in srgb, var(--ns-brand-secondary) 38%, var(--ns-border)) !important;
    background-color: var(--ns-surface-raised) !important;
    box-shadow: var(--ns-shadow-sm) !important;
}
html[data-theme] body.nsika-app-body .nsika-copilot .copilot-composer textarea,
html[data-theme] body.nsika-app-body .nsika-copilot .copilot-composer textarea:focus {
    min-height: 64px;
    margin: 0 !important;
    padding: 2px 4px 8px !important;
    border: 0 !important;
    outline: 0 !important;
    color: var(--ns-text) !important;
    background: transparent !important;
    box-shadow: none !important;
}
html[data-theme] body.nsika-app-body .nsika-copilot .copilot-composer-footer {
    min-height: 38px;
    margin-top: 8px;
    gap: 12px;
}
html[data-theme] body.nsika-app-body .nsika-copilot .copilot-send-btn {
    flex: 0 0 36px;
}
html[data-theme] body.nsika-app-body .nsika-copilot .copilot-mode-menu button {
    color: var(--ns-text) !important;
    background-color: transparent !important;
}
html[data-theme] body.nsika-app-body .nsika-copilot .copilot-mode-menu button:hover,
html[data-theme] body.nsika-app-body .nsika-copilot .copilot-mode-menu button.is-selected {
    color: var(--ns-text) !important;
    background-color: var(--ns-surface-muted) !important;
}
html[data-theme] body.nsika-app-body .nsika-copilot .copilot-mode-menu small {
    color: var(--ns-text-muted) !important;
}

/* Role permission matrix -------------------------------------------------- */
html[data-theme] body.nsika-app-body .permissions-wrapper {
    width: 100%;
    margin-top: 24px !important;
    color: var(--ns-text);
}
html[data-theme] body.nsika-app-body .permissions-wrapper > .flex {
    margin-bottom: 14px !important;
    padding: 14px 16px !important;
    border-radius: var(--ns-radius) !important;
    border: 1px solid var(--ns-border) !important;
    color: var(--ns-text) !important;
    background: var(--ns-surface-raised) !important;
    box-shadow: var(--ns-shadow-sm) !important;
}
html[data-theme] body.nsika-app-body .permissions-wrapper > .flex :where(.text-slate-800, .text-slate-700) { color: var(--ns-text) !important; }
html[data-theme] body.nsika-app-body .permissions-wrapper > .flex :where(.text-slate-500, .text-slate-400) { color: var(--ns-text-muted) !important; }
html[data-theme] body.nsika-app-body .role-permission-search {
    height: 40px !important;
    border: 1px solid var(--ns-border) !important;
    border-radius: 12px !important;
    color: var(--ns-text) !important;
    background: var(--ns-surface-muted) !important;
    box-shadow: none !important;
}
html[data-theme] body.nsika-app-body .role-permission-search:focus {
    border-color: var(--ns-accent) !important;
    box-shadow: var(--ns-focus) !important;
}
html[data-theme] body.nsika-app-body .role-module-permission-list {
    display: flex !important;
    width: 100%;
    flex-direction: column;
    gap: 14px !important;
}
html[data-theme] body.nsika-app-body .role-permission-module {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--ns-border) !important;
    border-radius: var(--ns-radius) !important;
    color: var(--ns-text);
    background: color-mix(in srgb, var(--ns-surface-muted) 86%, var(--ns-surface)) !important;
    box-shadow: var(--ns-shadow-sm) !important;
    transition: border-color var(--ns-motion), box-shadow var(--ns-motion), background-color var(--ns-motion);
}
html[data-theme] body.nsika-app-body .role-permission-module:hover {
    border-color: color-mix(in srgb, var(--ns-accent) 28%, var(--ns-border)) !important;
    box-shadow: var(--ns-shadow-md) !important;
}
html[data-theme] body.nsika-app-body .role-permission-module-header {
    display: flex;
    width: 100%;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 18px;
    color: var(--ns-text) !important;
    text-align: left;
    background: color-mix(in srgb, var(--ns-surface-raised) 78%, transparent) !important;
    transition: background-color var(--ns-motion), color var(--ns-motion);
}
html[data-theme] body.nsika-app-body .role-permission-module[data-collapsed="0"] > .role-permission-module-header {
    color: var(--ns-accent-strong) !important;
    background: color-mix(in srgb, var(--ns-accent-soft) 54%, var(--ns-surface-raised)) !important;
}
.role-permission-module-identity,
.role-permission-module-meta {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}
.role-permission-module-icon {
    color: var(--ns-accent-strong);
    font-size: 21px !important;
}
.role-permission-module-name {
    overflow: hidden;
    font-size: 14px;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.module-permission-feature-count,
.module-permission-summary,
.module-permission-card-stats,
.permission-card-selected-count {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    padding: 0 11px;
    border-radius: 999px;
    color: var(--ns-text-muted) !important;
    font-size: 10px;
    font-weight: 750;
    background: var(--ns-surface-raised) !important;
    box-shadow: inset 0 0 0 1px var(--ns-border) !important;
}
.module-permission-toggle-icon,
.permission-card-toggle-icon {
    color: var(--ns-text-muted);
    font-size: 19px !important;
    transition: transform 240ms cubic-bezier(.22, 1, .36, 1), color var(--ns-motion);
}
.role-permission-module-body {
    padding: 14px;
    border-top: 1px solid var(--ns-border) !important;
    background: color-mix(in srgb, var(--ns-surface-muted) 86%, transparent);
    animation: role-permission-reveal 240ms cubic-bezier(.22, 1, .36, 1) both;
}
.role-permission-module-controls {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto auto;
    align-items: end;
    gap: 16px;
    margin-bottom: 14px;
    padding: 14px;
    border-radius: 14px;
    color: var(--ns-text);
    background: var(--ns-surface-raised);
    box-shadow: inset 0 0 0 1px var(--ns-border) !important;
}
.role-permission-module-copy { display: grid; align-self: center; gap: 4px; }
.role-permission-module-copy strong { color: var(--ns-text); font-size: 13px; }
.role-permission-module-copy span { color: var(--ns-text-muted); font-size: 11px; }
.role-permission-module-stats { display: flex; align-self: center; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
html[data-theme] body.nsika-app-body .module-default-dashboard-field :where(.text-slate-500, .text-slate-400),
html[data-theme] body.nsika-app-body .role-permission-module-all :where(.text-slate-500, .text-slate-400) { color: var(--ns-text-muted) !important; }
html[data-theme] body.nsika-app-body .role-dashboard-selector,
html[data-theme] body.nsika-app-body .role-permission-module-all {
    border-color: var(--ns-border) !important;
    color: var(--ns-text) !important;
    background: var(--ns-surface-muted) !important;
    box-shadow: none !important;
}
html[data-theme] body.nsika-app-body .role-dashboard-selector :where(input, .expand-field-shrink) {
    color: var(--ns-text) !important;
    background: transparent !important;
}
html[data-theme] body.nsika-app-body .role-dashboard-selector-icon {
    color: var(--ns-accent-strong) !important;
    background: var(--ns-accent-soft) !important;
}
html[data-theme] body.nsika-app-body .role-dashboard-selector-status {
    border-color: color-mix(in srgb, var(--ns-accent) 28%, var(--ns-border)) !important;
    color: var(--ns-accent-strong) !important;
    background: var(--ns-accent-soft) !important;
}
html[data-theme] body.nsika-app-body .role-dashboard-selector .select-options-wrapper,
html[data-theme] body.nsika-app-body .role-dashboard-selector .select-options-list,
html[data-theme] body.nsika-app-body .role-dashboard-selector .select-options-pagination {
    border-color: var(--ns-border) !important;
    color: var(--ns-text) !important;
    background: var(--ns-surface-raised) !important;
}
.role-permission-card-list { display: flex; flex-direction: column; gap: 10px; }
html[data-theme] body.nsika-app-body .role-permission-card {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--ns-border) !important;
    border-radius: 15px;
    color: var(--ns-text);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--ns-accent-soft) 18%, var(--ns-surface-raised)), var(--ns-surface-raised)) !important;
    box-shadow: var(--ns-shadow-sm) !important;
    transition: border-color var(--ns-motion), box-shadow var(--ns-motion), transform var(--ns-motion);
}
html[data-theme] body.nsika-app-body .role-permission-card:hover {
    border-color: color-mix(in srgb, var(--ns-accent) 34%, var(--ns-border)) !important;
    box-shadow: var(--ns-shadow-md) !important;
}
.role-permission-card-header {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 15px;
    background: color-mix(in srgb, var(--ns-surface-raised) 88%, var(--ns-accent-soft));
}
.role-permission-card-icon {
    display: grid;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    place-items: center;
    border-radius: 9px;
    color: var(--ns-accent-strong);
    font-size: 18px !important;
    background: var(--ns-accent-soft);
}
.permission-card-name { color: var(--ns-text); font-size: 13px; font-weight: 760 !important; }
.permission-card-toggle-btn {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 9px;
    color: var(--ns-text-muted) !important;
    background: var(--ns-surface-muted) !important;
}
.permission-action-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    padding: 14px;
    border-top: 1px solid var(--ns-border) !important;
    background: color-mix(in srgb, var(--ns-surface-muted) 78%, transparent);
    animation: role-permission-reveal 200ms cubic-bezier(.22, 1, .36, 1) both;
}
.permission-action-list:not(.hidden) { display: grid !important; }
html[data-theme] body.nsika-app-body .permission-card-select-all,
html[data-theme] body.nsika-app-body .permission-item-row {
    border-color: var(--ns-border) !important;
    color: var(--ns-text) !important;
    background: var(--ns-surface-raised) !important;
}
html[data-theme] body.nsika-app-body .permission-card-select-all {
    grid-column: 1 / -1 !important;
    min-height: 58px;
    padding: 10px 14px !important;
    border-color: color-mix(in srgb, var(--ns-accent) 24%, var(--ns-border)) !important;
    background: color-mix(in srgb, var(--ns-accent-soft) 42%, var(--ns-surface-raised)) !important;
}
html[data-theme] body.nsika-app-body .permission-card-select-all .min-w-0 {
    display: grid;
    min-width: 0;
    gap: 2px;
}
html[data-theme] body.nsika-app-body .permission-card-select-all :where(span, div) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html[data-theme] body.nsika-app-body .permission-item-row {
    min-width: 0;
    min-height: 52px;
    padding: 9px 11px !important;
    border-radius: 11px !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ns-border) 72%, transparent) !important;
}
html[data-theme] body.nsika-app-body .permission-item-row:hover {
    border-color: color-mix(in srgb, var(--ns-accent) 38%, var(--ns-border)) !important;
    background: color-mix(in srgb, var(--ns-accent-soft) 40%, var(--ns-surface-raised)) !important;
}
html[data-theme] body.nsika-app-body .permission-item-row > span {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--ns-text) !important;
    font-size: 11px !important;
    font-weight: 650;
    line-height: 1.25rem !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html[data-theme] body.nsika-app-body :where(.permission-item-row, .permission-card-select-all) > .nsika-field[type="switch"] {
    width: auto !important;
    min-width: 42px;
    flex: 0 0 42px;
    justify-content: flex-end !important;
    margin-left: auto;
}
html[data-theme] body.nsika-app-body :where(.permission-item-row, .permission-card-select-all) .switch-toggler-wrapper {
    flex: 0 0 38px;
    width: 38px !important;
}
html[data-theme] body.nsika-app-body .permission-card-select-all :where(.text-slate-700),
html[data-theme] body.nsika-app-body .permission-item-row :where(.text-slate-700) { color: var(--ns-text) !important; }
html[data-theme] body.nsika-app-body .permission-card-select-all :where(.text-slate-500),
html[data-theme] body.nsika-app-body .permission-item-row :where(.text-slate-500) { color: var(--ns-text-muted) !important; }
@keyframes role-permission-reveal {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 900px) {
    .role-permission-module-controls { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
    .role-permission-module-stats { justify-content: flex-start; }
    .permission-action-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .role-permission-module-header { min-height: 58px; padding-inline: 12px; }
    .module-permission-feature-count { display: none; }
    .role-permission-module-body { padding: 9px; }
    .permission-action-list { grid-template-columns: minmax(0, 1fr); }
}

/* Shared dashboard system ------------------------------------------------- */
html[data-theme] body.nsika-app-body.ns-dashboard-page {
    --ns-dashboard-glass-bg: linear-gradient(
        145deg,
        color-mix(in srgb, var(--ns-surface-raised) 72%, transparent),
        color-mix(in srgb, var(--ns-surface) 48%, var(--ns-accent-soft))
    );
    --ns-dashboard-glass-bg-strong: linear-gradient(
        145deg,
        color-mix(in srgb, var(--ns-surface-raised) 82%, transparent),
        color-mix(in srgb, var(--ns-surface) 58%, var(--ns-accent-soft))
    );
    --ns-dashboard-glass-border: color-mix(in srgb, var(--ns-accent) 24%, rgba(255, 255, 255, .42));
    --ns-dashboard-glass-border-hot: color-mix(in srgb, var(--ns-accent) 48%, rgba(255, 255, 255, .62));
    --ns-dashboard-glass-shadow:
        0 22px 52px color-mix(in srgb, var(--ns-brand-primary) 14%, transparent),
        0 0 0 1px color-mix(in srgb, white 18%, transparent) inset;
    --ns-dashboard-glass-glow:
        0 24px 58px color-mix(in srgb, var(--ns-brand-primary) 18%, transparent),
        0 0 28px color-mix(in srgb, var(--ns-accent) 18%, transparent),
        0 0 0 1px color-mix(in srgb, white 22%, transparent) inset;
    color: var(--ns-text);
}
html[data-theme="dark"] body.nsika-app-body.ns-dashboard-page {
    --ns-dashboard-glass-bg: linear-gradient(
        145deg,
        color-mix(in srgb, var(--ns-surface-raised) 58%, transparent),
        color-mix(in srgb, var(--ns-surface) 42%, var(--ns-accent-soft))
    );
    --ns-dashboard-glass-bg-strong: linear-gradient(
        145deg,
        color-mix(in srgb, var(--ns-surface-raised) 70%, transparent),
        color-mix(in srgb, var(--ns-surface) 50%, var(--ns-accent-soft))
    );
    --ns-dashboard-glass-border: color-mix(in srgb, var(--ns-accent) 30%, rgba(255, 255, 255, .18));
    --ns-dashboard-glass-border-hot: color-mix(in srgb, var(--ns-accent) 56%, rgba(255, 255, 255, .32));
    --ns-dashboard-glass-shadow:
        0 24px 62px rgba(0, 0, 0, .32),
        0 0 0 1px rgba(255, 255, 255, .06) inset;
    --ns-dashboard-glass-glow:
        0 28px 68px rgba(0, 0, 0, .4),
        0 0 34px color-mix(in srgb, var(--ns-accent) 22%, transparent),
        0 0 0 1px rgba(255, 255, 255, .08) inset;
}
html[data-theme] body.nsika-app-body .ns-dashboard-viewport {
    position: relative;
    min-height: 0 !important;
    overflow: hidden auto !important;
    color: var(--ns-text);
    background:
        radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--ns-accent) 18%, transparent), transparent 34%),
        radial-gradient(circle at 7% 92%, color-mix(in srgb, var(--ns-brand-primary) 12%, transparent), transparent 36%),
        linear-gradient(145deg, color-mix(in srgb, var(--ns-bg) 82%, transparent), color-mix(in srgb, var(--ns-surface-muted) 72%, transparent)) !important;
    scrollbar-color: var(--ns-border) transparent;
}
html[data-theme] body.nsika-app-body .ns-dashboard-root {
    width: 100% !important;
    max-width: 1680px !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 1rem !important;
    overflow: auto !important;
    color: var(--ns-text) !important;
    background: transparent !important;
    box-sizing: border-box;
    scrollbar-color: var(--ns-border) transparent;
}
.ns-dashboard-hero {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 138px;
    overflow: hidden;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin: 0 0 18px;
    padding: clamp(22px, 2.4vw, 34px);
    flex: 0 0 auto;
    border: 1px solid var(--ns-border) !important;
    border-radius: var(--ns-radius-lg);
    color: var(--ns-text);
    background:
        radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--ns-accent) 17%, transparent), transparent 36%),
        var(--ns-dashboard-glass-bg-strong) !important;
    box-shadow: var(--ns-dashboard-glass-glow) !important;
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
}
.ns-dashboard-hero::after {
    content: "";
    position: absolute;
    top: -145px;
    right: -90px;
    width: 360px;
    height: 360px;
    border: 1px solid color-mix(in srgb, var(--ns-accent) 18%, transparent);
    border-radius: 50%;
    box-shadow:
        0 0 0 44px color-mix(in srgb, var(--ns-accent) 3%, transparent),
        0 0 0 88px color-mix(in srgb, var(--ns-brand-primary) 3%, transparent);
    pointer-events: none;
}
.ns-dashboard-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 720px;
}
.ns-dashboard-hero-eyebrow {
    margin: 0 0 7px;
    color: var(--ns-accent-strong);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.ns-dashboard-hero h1 {
    margin: 0;
    color: var(--ns-text);
    font-size: clamp(27px, 3vw, 42px);
    font-weight: 790;
    letter-spacing: -.045em;
    line-height: 1.08;
}
.ns-dashboard-hero-copy > p:last-child {
    margin: 10px 0 0;
    color: var(--ns-text-muted);
    font-size: 12px;
    line-height: 1.6;
}
.ns-dashboard-hero-status {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 220px;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border: 1px solid var(--ns-border);
    border-radius: 13px;
    background: color-mix(in srgb, var(--ns-surface-muted) 58%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
}
.ns-dashboard-hero-status > .material-symbols-outlined {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 10px;
    color: var(--ns-brand-on-secondary);
    background: var(--ns-accent);
    box-shadow: var(--ns-brand-glow);
}
.ns-dashboard-hero-status strong,
.ns-dashboard-hero-status small { display: block; }
.ns-dashboard-hero-status strong { color: var(--ns-text); font-size: 11px; }
.ns-dashboard-hero-status small { margin-top: 3px; color: var(--ns-text-muted); font-size: 9px; }
html[data-theme] body.nsika-app-body .ns-dashboard-toolbar {
    border: 1px solid var(--ns-dashboard-glass-border) !important;
    border-radius: var(--ns-radius) !important;
    color: var(--ns-text) !important;
    background: var(--ns-dashboard-glass-bg) !important;
    box-shadow: var(--ns-dashboard-glass-shadow) !important;
    -webkit-backdrop-filter: blur(20px) saturate(145%);
    backdrop-filter: blur(20px) saturate(145%);
}
html[data-theme] body.nsika-app-body .ns-dashboard-toolbar :where(.text-white, .text-black) {
    color: var(--ns-text) !important;
}
html[data-theme] body.nsika-app-body .ns-dashboard-root *,
html[data-theme] body.nsika-app-body .ns-dashboard-root *::before,
html[data-theme] body.nsika-app-body .ns-dashboard-root *::after {
    box-sizing: border-box;
}
html[data-theme] body.nsika-app-body .ns-dashboard-root :where(.ns-dashboard-surface) {
    border: 1px solid var(--ns-dashboard-glass-border) !important;
    border-radius: var(--ns-radius) !important;
    color: var(--ns-text) !important;
    background: var(--ns-dashboard-glass-bg) !important;
    box-shadow: var(--ns-dashboard-glass-shadow) !important;
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    backdrop-filter: blur(22px) saturate(145%);
    transition:
        border-color var(--ns-motion),
        box-shadow var(--ns-motion),
        transform var(--ns-motion),
        background-color var(--ns-motion);
}
html[data-theme] body.nsika-app-body .ns-dashboard-root :where(.ns-dashboard-surface):hover {
    border-color: var(--ns-dashboard-glass-border-hot) !important;
    box-shadow: var(--ns-dashboard-glass-glow) !important;
}
html[data-theme] body.nsika-app-body .ns-dashboard-root .ns-dashboard-component:not(
    [class*="header"],
    [class*="hero"],
    [class*="banner"],
    [class*="accent"],
    [class*="tone"]
) {
    border: 1px solid var(--ns-dashboard-glass-border) !important;
    border-radius: var(--ns-radius) !important;
    color: var(--ns-text) !important;
    background: var(--ns-dashboard-glass-bg) !important;
    box-shadow: var(--ns-dashboard-glass-shadow) !important;
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    backdrop-filter: blur(22px) saturate(145%);
    transition:
        border-color var(--ns-motion),
        box-shadow var(--ns-motion),
        transform var(--ns-motion);
}
html[data-theme] body.nsika-app-body .ns-dashboard-root :where(
    .ns-dashboard-surface,
    .ns-dashboard-component
):not(
    .core-panel,
    [class*="header"],
    [class*="hero"],
    [class*="banner"],
    [class*="accent"],
    [class*="tone"]
) {
    --ns-border-orbit-angle: 0deg;
    position: relative;
    isolation: isolate;
}
html[data-theme] body.nsika-app-body .ns-dashboard-root :where(
    .ns-dashboard-surface,
    .ns-dashboard-component
):not(
    .core-panel,
    [class*="header"],
    [class*="hero"],
    [class*="banner"],
    [class*="accent"],
    [class*="tone"]
)::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: -1px;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(
        from calc(315deg + var(--ns-border-orbit-angle)),
        transparent 0deg 286deg,
        color-mix(in srgb, var(--ns-brand-secondary) 24%, transparent) 306deg,
        color-mix(in srgb, var(--ns-brand-secondary) 72%, white) 329deg,
        color-mix(in srgb, var(--ns-brand-primary) 72%, var(--ns-brand-secondary)) 349deg,
        transparent 360deg
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: ns-border-perimeter-orbit 4.8s linear infinite;
}
html[data-theme] body.nsika-app-body .ns-dashboard-root .ns-dashboard-component:not(
    [class*="header"],
    [class*="hero"],
    [class*="banner"],
    [class*="accent"],
    [class*="tone"]
):hover {
    border-color: var(--ns-dashboard-glass-border-hot) !important;
    box-shadow: var(--ns-dashboard-glass-glow) !important;
    transform: translateY(-1px);
}
html[data-theme] body.nsika-app-body .ns-dashboard-root :where(
    .ns-dashboard-component[class*="kpi"],
    .ns-dashboard-config-component[data-component-type^="kpi"]
) {
    position: relative;
    overflow: hidden;
}
html[data-theme] body.nsika-app-body .ns-dashboard-root :where(
    .ns-dashboard-component[class*="kpi"],
    .ns-dashboard-config-component[data-component-type^="kpi"]
)::after {
    content: "";
    position: absolute;
    inset: auto -24px -32px auto;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ns-accent) 8%, transparent);
    pointer-events: none;
}
html[data-theme] body.nsika-app-body .ns-dashboard-root
    .ns-dashboard-config-component[data-component-type^="kpi"] > * {
    position: relative;
    z-index: 1;
}
html[data-theme] body.nsika-app-body .ns-dashboard-root :where(
    .text-slate-900, .text-slate-800, .text-slate-700,
    .text-gray-900, .text-gray-800, .text-gray-700,
    .text-black
) {
    color: var(--ns-text) !important;
}
html[data-theme] body.nsika-app-body .ns-dashboard-root :where(
    .text-slate-600, .text-slate-500, .text-slate-400,
    .text-gray-600, .text-gray-500, .text-gray-400
) {
    color: var(--ns-text-muted) !important;
}
html[data-theme] body.nsika-app-body .ns-dashboard-root :where(.border-slate-100, .border-slate-200, .border-slate-300, .border-gray-100, .border-gray-200, .border-gray-300, .border-white) {
    border-color: var(--ns-border) !important;
}
html[data-theme] body.nsika-app-body .ns-dashboard-root :where(.bg-slate-50, .bg-slate-100, .bg-gray-50, .bg-gray-100) {
    color: var(--ns-text) !important;
    background: color-mix(in srgb, var(--ns-surface-muted) 54%, transparent) !important;
}
html[data-theme] body.nsika-app-body .ns-dashboard-root :where(a[class*="border"], button[class*="border"]) {
    border-color: var(--ns-border) !important;
}
html[data-theme] body.nsika-app-body .ns-dashboard-root :where(a, button) {
    transition:
        color var(--ns-motion),
        border-color var(--ns-motion),
        background-color var(--ns-motion),
        box-shadow var(--ns-motion),
        transform var(--ns-motion);
}
html[data-theme] body.nsika-app-body .ns-dashboard-root :where(input, select, textarea) {
    border-color: var(--ns-dashboard-glass-border) !important;
    color: var(--ns-text) !important;
    background: color-mix(in srgb, var(--ns-surface-raised) 72%, transparent) !important;
    -webkit-backdrop-filter: blur(14px) saturate(135%);
    backdrop-filter: blur(14px) saturate(135%);
}
html[data-theme] body.nsika-app-body .ns-dashboard-root :where(input, select, textarea):focus {
    border-color: var(--ns-accent) !important;
    outline: 0 !important;
    box-shadow: var(--ns-focus) !important;
}
html[data-theme] body.nsika-app-body .ns-dashboard-chart {
    min-width: 0;
    color: var(--ns-text) !important;
}
html[data-theme] body.nsika-app-body .ns-dashboard-root :where(.apexcharts-text, .apexcharts-legend-text, .apexcharts-title-text, .apexcharts-subtitle-text) {
    fill: var(--ns-text-muted) !important;
    color: var(--ns-text-muted) !important;
}
html[data-theme] body.nsika-app-body .ns-dashboard-root :where(.apexcharts-gridline, .apexcharts-xaxis-tick, .apexcharts-yaxis-tick) {
    stroke: var(--ns-border) !important;
}
html[data-theme] body.nsika-app-body .ns-dashboard-root :where(.apexcharts-tooltip, .apexcharts-xaxistooltip, .apexcharts-yaxistooltip) {
    border-color: var(--ns-border) !important;
    color: var(--ns-text) !important;
    background: var(--ns-surface-raised) !important;
    box-shadow: var(--ns-shadow-md) !important;
}
html[data-theme] body.nsika-app-body .ns-dashboard-root :where(.apexcharts-tooltip-title) {
    border-color: var(--ns-border) !important;
    background: var(--ns-surface-muted) !important;
}
html[data-theme] body.nsika-app-body .ns-dashboard-root table {
    color: var(--ns-text);
    background: transparent;
}
html[data-theme] body.nsika-app-body .ns-dashboard-root :where(th, td) {
    border-color: var(--ns-border) !important;
}
html[data-theme] body.nsika-app-body .ns-dashboard-root :where(th) {
    color: var(--ns-text-muted);
    background: var(--ns-surface-muted);
}
body.nsika-app-body.ns-dashboard-page {
    --ns-dashboard-glass-bg: linear-gradient(
        145deg,
        color-mix(in srgb, var(--ns-surface-raised) 72%, transparent),
        color-mix(in srgb, var(--ns-surface) 48%, var(--ns-accent-soft))
    );
    --ns-dashboard-glass-bg-strong: linear-gradient(
        145deg,
        color-mix(in srgb, var(--ns-surface-raised) 82%, transparent),
        color-mix(in srgb, var(--ns-surface) 58%, var(--ns-accent-soft))
    );
    --ns-dashboard-glass-border: color-mix(in srgb, var(--ns-accent) 24%, rgba(255, 255, 255, .42));
    --ns-dashboard-glass-border-hot: color-mix(in srgb, var(--ns-accent) 48%, rgba(255, 255, 255, .62));
    --ns-dashboard-glass-shadow:
        0 22px 52px color-mix(in srgb, var(--ns-brand-primary) 14%, transparent),
        0 0 0 1px color-mix(in srgb, white 18%, transparent) inset;
    --ns-dashboard-glass-glow:
        0 24px 58px color-mix(in srgb, var(--ns-brand-primary) 18%, transparent),
        0 0 28px color-mix(in srgb, var(--ns-accent) 18%, transparent),
        0 0 0 1px color-mix(in srgb, white 22%, transparent) inset;
}
html[data-theme="dark"] body.nsika-app-body.ns-dashboard-page,
body.nsika-app-body.ns-dashboard-page.dark {
    --ns-dashboard-glass-bg: linear-gradient(
        145deg,
        color-mix(in srgb, var(--ns-surface-raised) 58%, transparent),
        color-mix(in srgb, var(--ns-surface) 42%, var(--ns-accent-soft))
    );
    --ns-dashboard-glass-bg-strong: linear-gradient(
        145deg,
        color-mix(in srgb, var(--ns-surface-raised) 70%, transparent),
        color-mix(in srgb, var(--ns-surface) 50%, var(--ns-accent-soft))
    );
    --ns-dashboard-glass-border: color-mix(in srgb, var(--ns-accent) 30%, rgba(255, 255, 255, .18));
    --ns-dashboard-glass-border-hot: color-mix(in srgb, var(--ns-accent) 56%, rgba(255, 255, 255, .32));
    --ns-dashboard-glass-shadow:
        0 24px 62px rgba(0, 0, 0, .32),
        0 0 0 1px rgba(255, 255, 255, .06) inset;
    --ns-dashboard-glass-glow:
        0 28px 68px rgba(0, 0, 0, .4),
        0 0 34px color-mix(in srgb, var(--ns-accent) 22%, transparent),
        0 0 0 1px rgba(255, 255, 255, .08) inset;
}
body.nsika-app-body.ns-dashboard-page .ns-dashboard-viewport {
    background:
        radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--ns-accent) 18%, transparent), transparent 34%),
        radial-gradient(circle at 7% 92%, color-mix(in srgb, var(--ns-brand-primary) 12%, transparent), transparent 36%),
        linear-gradient(145deg, color-mix(in srgb, var(--ns-bg) 82%, transparent), color-mix(in srgb, var(--ns-surface-muted) 72%, transparent)) !important;
}
body.nsika-app-body.ns-dashboard-page .ns-dashboard-root {
    color: var(--ns-text) !important;
    background: transparent !important;
}
body.nsika-app-body.ns-dashboard-page .ns-dashboard-root :where(
    .ns-dashboard-surface,
    .ns-dashboard-component,
    .ns-dashboard-layout-surface
):not(
    .ns-dashboard-hero,
    .core-overview__hero,
    [class*="nav"],
    [class*="menu"],
    [class*="header"],
    [class*="hero"],
    [class*="banner"],
    [class*="accent"],
    [class*="tone"]
) {
    position: relative;
    isolation: isolate;
    border: 1px solid var(--ns-dashboard-glass-border) !important;
    border-radius: var(--ns-radius) !important;
    color: var(--ns-text) !important;
    background: var(--ns-dashboard-glass-bg) !important;
    box-shadow: var(--ns-dashboard-glass-shadow) !important;
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    backdrop-filter: blur(22px) saturate(145%);
}
body.nsika-app-body.ns-dashboard-page .ns-dashboard-root :where(
    .ns-dashboard-surface,
    .ns-dashboard-component,
    .ns-dashboard-layout-surface
):not(
    .ns-dashboard-hero,
    .core-overview__hero,
    [class*="nav"],
    [class*="menu"],
    [class*="header"],
    [class*="hero"],
    [class*="banner"],
    [class*="accent"],
    [class*="tone"]
):hover {
    border-color: var(--ns-dashboard-glass-border-hot) !important;
    box-shadow: var(--ns-dashboard-glass-glow) !important;
}

/* Dashboard depth: glow only the component holder, never its internals. */
html[data-theme] body.nsika-app-body .ns-dashboard-root :where(
    .ns-dashboard-surface,
    .ns-dashboard-component,
    .ns-dashboard-layout-surface
):not(.ns-dashboard-glow-holder)::before {
    content: none !important;
    animation: none !important;
}
html[data-theme] body.nsika-app-body .ns-dashboard-root :where(
    .ns-dashboard-surface,
    .ns-dashboard-component,
    .ns-dashboard-layout-surface
):not(.ns-dashboard-glow-holder),
html[data-theme] body.nsika-app-body .ns-dashboard-root .ns-dashboard-glow-holder :where(
    .ns-dashboard-surface,
    .ns-dashboard-component,
    .ns-dashboard-layout-surface
):not(.ns-dashboard-glow-holder) {
    border-color: color-mix(in srgb, var(--ns-dashboard-glass-border) 42%, transparent) !important;
    box-shadow: none !important;
}
html[data-theme] body.nsika-app-body .ns-dashboard-root :where(
    .ns-dashboard-surface,
    .ns-dashboard-component,
    .ns-dashboard-layout-surface
):not(.ns-dashboard-glow-holder):hover {
    border-color: color-mix(in srgb, var(--ns-dashboard-glass-border) 56%, transparent) !important;
    box-shadow: none !important;
    transform: none !important;
}
body.nsika-app-body.ns-dashboard-page .ns-dashboard-root :where(
    .bg-white,
    .bg-slate-50,
    .bg-slate-100,
    .bg-gray-50,
    .bg-gray-100,
    [class*="bg-white/"],
    [class*="bg-slate-50/"],
    [class*="bg-gray-50/"]
) {
    color: var(--ns-text) !important;
    background: color-mix(in srgb, var(--ns-surface-raised) 56%, transparent) !important;
}
body.nsika-app-body.ns-dashboard-page .ns-dashboard-root :where(
    .text-slate-900, .text-slate-800, .text-slate-700,
    .text-gray-900, .text-gray-800, .text-gray-700,
    .text-black
) {
    color: var(--ns-text) !important;
}
body.nsika-app-body.ns-dashboard-page .ns-dashboard-root :where(
    .text-slate-600, .text-slate-500, .text-slate-400,
    .text-gray-600, .text-gray-500, .text-gray-400
) {
    color: var(--ns-text-muted) !important;
}
body.nsika-app-body.ns-dashboard-page .ns-dashboard-root :where(
    .border,
    .border-slate-100,
    .border-slate-200,
    .border-slate-300,
    .border-gray-100,
    .border-gray-200,
    .border-gray-300,
    .border-white
) {
    border-color: var(--ns-dashboard-glass-border) !important;
}
body.nsika-app-body.ns-dashboard-page .ns-dashboard-root :where(input, select, textarea) {
    border-color: var(--ns-dashboard-glass-border) !important;
    color: var(--ns-text) !important;
    background: color-mix(in srgb, var(--ns-surface-raised) 72%, transparent) !important;
    -webkit-backdrop-filter: blur(14px) saturate(135%);
    backdrop-filter: blur(14px) saturate(135%);
}
body.nsika-app-body.ns-dashboard-page .ns-dashboard-root :where(
    [class*="-card"],
    [class*="-panel"],
    [class*="-tile"],
    [class*="-widget"],
    [class*="-metric"],
    [class*="-summary"],
    [class*="-snapshot"],
    [class*="-stats"],
    [class*="-content"],
    [class*="-item"],
    .dashboard-content,
    .report-box-2,
    .intro-y,
    .box
):not(
    .ns-dashboard-hero,
    .core-overview__hero,
    [class*="nav"],
    [class*="menu"],
    [class*="header"],
    [class*="hero"],
    [class*="banner"],
    [class*="accent"],
    [class*="tone"],
    [class*="icon"],
    [class*="btn"],
    button,
    a
) {
    border-color: var(--ns-dashboard-glass-border) !important;
    color: var(--ns-text) !important;
    background: var(--ns-dashboard-glass-bg) !important;
    box-shadow: var(--ns-dashboard-glass-shadow) !important;
    -webkit-backdrop-filter: blur(20px) saturate(142%);
    backdrop-filter: blur(20px) saturate(142%);
}
body.nsika-app-body.ns-dashboard-page .ns-dashboard-root :where(
    .rounded-md,
    .rounded-lg,
    .rounded-xl,
    .rounded-2xl
):where(
    .bg-white,
    .bg-slate-50,
    .bg-slate-100,
    .bg-gray-50,
    .bg-gray-100,
    [class*="bg-white/"],
    [class*="bg-slate-50/"],
    [class*="bg-gray-50/"]
) {
    border: 1px solid var(--ns-dashboard-glass-border) !important;
    color: var(--ns-text) !important;
    background: var(--ns-dashboard-glass-bg) !important;
    box-shadow: var(--ns-dashboard-glass-shadow) !important;
    -webkit-backdrop-filter: blur(20px) saturate(142%);
    backdrop-filter: blur(20px) saturate(142%);
}

/* Config-driven dashboard controller ------------------------------------- */
.ns-config-dashboard {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    gap: 14px;
    color: var(--ns-text);
}
.ns-dashboard-config-header,
.ns-dashboard-section-header,
.ns-dashboard-config-component {
    border: 1px solid var(--ns-dashboard-glass-border);
    border-radius: var(--ns-radius);
    background: var(--ns-dashboard-glass-bg);
    box-shadow: var(--ns-dashboard-glass-shadow);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    backdrop-filter: blur(22px) saturate(145%);
}
.ns-dashboard-config-header {
    display: flex;
    min-height: 92px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px;
}
.ns-dashboard-config-eyebrow {
    color: var(--ns-accent-strong);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.ns-dashboard-config-header h2 {
    margin: 3px 0 0;
    color: var(--ns-text);
    font-size: 24px;
    font-weight: 780;
    line-height: 1.1;
}
.ns-dashboard-config-header p,
.ns-dashboard-section-description {
    margin: 6px 0 0;
    color: var(--ns-text-muted);
    font-size: 12px;
    line-height: 1.5;
}
.ns-dashboard-config-actions,
.ns-dashboard-section-actions,
.ns-dashboard-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.ns-dashboard-badge,
.ns-dashboard-action {
    min-height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--ns-dashboard-glass-border);
    border-radius: 10px;
    padding: 0 10px;
    color: var(--ns-text);
    background: color-mix(in srgb, var(--ns-surface-raised) 46%, transparent);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}
.ns-dashboard-action {
    cursor: pointer;
}
.ns-dashboard-action:hover {
    border-color: var(--ns-dashboard-glass-border-hot);
    box-shadow: 0 0 18px color-mix(in srgb, var(--ns-accent) 14%, transparent);
    transform: translateY(-1px);
}
.ns-dashboard-action .material-symbols-outlined {
    font-size: 15px;
}
.ns-dashboard-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ns-dashboard-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
}
.ns-dashboard-section-title {
    color: var(--ns-text);
    font-size: 13px;
    font-weight: 780;
}
.ns-dashboard-grid {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}
.ns-dashboard-config-component {
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
    padding: 14px;
    grid-column: span var(--ns-dashboard-span, 12) / span var(--ns-dashboard-span, 12);
}
.ns-dashboard-config-component:hover {
    border-color: var(--ns-dashboard-glass-border-hot);
    box-shadow: var(--ns-dashboard-glass-glow);
}
.ns-dashboard-no-glow,
.ns-dashboard-no-glow:hover {
    box-shadow: var(--ns-dashboard-glass-shadow) !important;
}
.ns-dashboard-no-glow::before {
    display: none !important;
}
.ns-dashboard-card {
    min-width: 0;
}
.ns-dashboard-kpi {
    display: flex;
    min-height: 108px;
    align-items: flex-start;
    gap: 12px;
}
.ns-dashboard-kpi-kpi-compact,
.ns-dashboard-kpi-kpi-stat {
    min-height: 82px;
    align-items: center;
}
.ns-dashboard-kpi-kpi-stacked {
    min-height: 120px;
    flex-direction: column;
}
.ns-dashboard-kpi-kpi-compact .ns-dashboard-kpi-value,
.ns-dashboard-kpi-kpi-stat .ns-dashboard-kpi-value {
    font-size: 20px;
}
.ns-dashboard-kpi-kpi-stacked .ns-dashboard-kpi-icon {
    margin-bottom: 2px;
}
.ns-dashboard-card-card-plain .ns-dashboard-card-header {
    margin-bottom: 8px;
}
.ns-dashboard-kpi-icon,
.ns-dashboard-card-icon {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--ns-accent-strong);
    background: color-mix(in srgb, var(--ns-accent) 13%, transparent);
}
.ns-dashboard-kpi-icon .material-symbols-outlined,
.ns-dashboard-card-icon .material-symbols-outlined {
    font-size: 18px;
}
.ns-dashboard-kpi-copy {
    min-width: 0;
    flex: 1 1 auto;
}
.ns-dashboard-kpi-label,
.ns-dashboard-metric-label,
.ns-dashboard-list-note {
    color: var(--ns-text-muted);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.ns-dashboard-kpi-value {
    margin-top: 7px;
    color: var(--ns-text);
    font-size: 24px;
    font-weight: 880;
    line-height: 1;
    word-break: break-word;
}
.ns-dashboard-kpi-note,
.ns-dashboard-metric-note {
    margin-top: 6px;
    color: var(--ns-text-muted);
    font-size: 11px;
}
.ns-dashboard-kpi-change {
    border-radius: 999px;
    padding: 4px 8px;
    color: var(--ns-accent-strong);
    background: color-mix(in srgb, var(--ns-accent) 11%, transparent);
    font-size: 11px;
    font-weight: 800;
}
.ns-dashboard-card-header {
    display: flex;
    min-height: 34px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.ns-dashboard-card-title {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    color: var(--ns-text);
    font-size: 12px;
    font-weight: 780;
}
.ns-dashboard-chart-shell {
    display: flex;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
}
.ns-dashboard-chart-target {
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}
.ns-dashboard-config-chart,
.ns-dashboard-config-chart-panel {
    height: 280px;
}
.ns-dashboard-chart-target > *,
.ns-dashboard-chart-target :where(.apexcharts-canvas, .apexcharts-svg) {
    max-width: 100% !important;
}
.ns-dashboard-config-slot {
    min-height: 180px;
}
.ns-dashboard-slot {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}
.ns-dashboard-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 10px;
}
.ns-dashboard-metric,
.ns-dashboard-list-row {
    border: 1px solid color-mix(in srgb, var(--ns-dashboard-glass-border) 72%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--ns-surface-raised) 42%, transparent);
    padding: 10px;
}
.ns-dashboard-metric-value {
    margin-top: 5px;
    color: var(--ns-text);
    font-size: 17px;
    font-weight: 850;
}
.ns-dashboard-list {
    display: grid;
    gap: 8px;
}
.ns-dashboard-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ns-dashboard-list-title {
    color: var(--ns-text);
    font-size: 12px;
    font-weight: 720;
}
.ns-dashboard-list-value {
    color: var(--ns-text);
    font-size: 12px;
    font-weight: 820;
}
.ns-dashboard-empty {
    border: 1px dashed var(--ns-dashboard-glass-border);
    border-radius: 10px;
    padding: 18px;
    color: var(--ns-text-muted);
    text-align: center;
    font-size: 12px;
}
.ns-dashboard-filter-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ns-dashboard-filter-summary .ns-dashboard-badge {
    justify-content: flex-start;
}
.ns-dashboard-filter-summary strong {
    color: var(--ns-text);
    font-weight: 820;
}
.ns-dashboard-error {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid color-mix(in srgb, #e11d48 34%, var(--ns-dashboard-glass-border));
    border-radius: var(--ns-radius);
    padding: 13px 14px;
    color: var(--ns-text);
    background: linear-gradient(135deg, color-mix(in srgb, #e11d48 10%, transparent), color-mix(in srgb, var(--ns-surface-raised) 52%, transparent));
    box-shadow: var(--ns-dashboard-glass-shadow);
}
.ns-dashboard-error .material-symbols-outlined {
    color: #e11d48;
    font-size: 20px;
}
.ns-dashboard-error strong {
    display: block;
    font-size: 12px;
}
.ns-dashboard-error p {
    margin: 3px 0 0;
    color: var(--ns-text-muted);
    font-size: 11px;
}
.ns-dashboard-loading {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ns-dashboard-skeleton {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--ns-dashboard-glass-border);
    border-radius: var(--ns-radius);
    background: var(--ns-dashboard-glass-bg);
    box-shadow: var(--ns-dashboard-glass-shadow);
}
.ns-dashboard-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, white 24%, transparent), transparent);
    transform: translateX(-100%);
    animation: ns-dashboard-skeleton 1.3s ease-in-out infinite;
}
@keyframes ns-dashboard-skeleton {
    to { transform: translateX(100%); }
}
.ns-dashboard-table-wrap {
    overflow: auto;
}
.ns-dashboard-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--ns-text);
    font-size: 12px;
}
.ns-dashboard-table th,
.ns-dashboard-table td {
    border-bottom: 1px solid var(--ns-dashboard-glass-border);
    padding: 9px 8px;
    text-align: left;
}
.ns-dashboard-table th {
    color: var(--ns-text-muted);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
@media (min-width: 640px) {
    .ns-dashboard-config-component {
        grid-column: span var(--ns-dashboard-span-sm, var(--ns-dashboard-span, 12)) / span var(--ns-dashboard-span-sm, var(--ns-dashboard-span, 12));
    }
}
@media (min-width: 768px) {
    .ns-dashboard-config-component {
        grid-column: span var(--ns-dashboard-span-md, var(--ns-dashboard-span-sm, var(--ns-dashboard-span, 12))) / span var(--ns-dashboard-span-md, var(--ns-dashboard-span-sm, var(--ns-dashboard-span, 12)));
    }
}
@media (min-width: 1024px) {
    .ns-dashboard-config-component {
        grid-column: span var(--ns-dashboard-span-lg, var(--ns-dashboard-span-md, var(--ns-dashboard-span, 12))) / span var(--ns-dashboard-span-lg, var(--ns-dashboard-span-md, var(--ns-dashboard-span, 12)));
    }
}
@media (min-width: 1280px) {
    .ns-dashboard-config-component {
        grid-column: span var(--ns-dashboard-span-xl, var(--ns-dashboard-span-lg, var(--ns-dashboard-span-md, var(--ns-dashboard-span, 12)))) / span var(--ns-dashboard-span-xl, var(--ns-dashboard-span-lg, var(--ns-dashboard-span-md, var(--ns-dashboard-span, 12))));
    }
}
@media (max-width: 900px) {
    html[data-theme] body.nsika-app-body .ns-dashboard-root {
        height: auto !important;
        min-height: 100% !important;
        overflow: visible !important;
        padding: 1rem !important;
    }
    html[data-theme] body.nsika-app-body .ns-dashboard-root > .flex {
        height: auto !important;
        flex-wrap: wrap !important;
    }
    html[data-theme] body.nsika-app-body .ns-dashboard-root > .flex > * {
        width: 100% !important;
        min-width: 0 !important;
    }
    html[data-theme] body.nsika-app-body .ns-dashboard-root > .grid {
        height: auto !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }
    html[data-theme] body.nsika-app-body .ns-dashboard-root > .grid > * {
        grid-column: 1 / -1 !important;
    }
    .ns-dashboard-hero {
        min-height: 0;
        align-items: flex-start;
        padding: 20px;
        flex-direction: column;
    }
    .ns-dashboard-hero-status {
        width: 100%;
        min-width: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    html[data-theme] body.nsika-app-body .ns-dashboard-root :where(
        .ns-dashboard-surface,
        .ns-dashboard-component
    )::before {
        animation: none !important;
    }
}

/* Generated form workspace ------------------------------------------------ */
.new-form-view-content,
.info-view-content {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    color: var(--ns-text) !important;
    background: transparent !important;
    box-shadow: none !important;
    isolation: auto;
}
.new-form-view-content > .w-full,
.info-view-content > .w-full {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    color: var(--ns-text) !important;
    background: transparent !important;
    box-shadow: none !important;
}
.new-form-view-content .ns-form-shell,
.info-view-content .ns-form-shell {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    color: var(--ns-text) !important;
    background: transparent !important;
    box-shadow: none !important;
}
.ns-form-workspace {
    width: 100%;
    min-height: 100%;
    padding: 2px;
    color: var(--ns-text);
    overflow: visible !important;
}
.ns-form-overview {
    position: sticky;
    top: 0 !important;
    z-index: 2147480000 !important;
    width: 100%;
    overflow: hidden;
    border-radius: clamp(18px, 2vw, 28px);
    color: var(--ns-text);
    background:
        radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--ns-accent) 15%, transparent), transparent 34%),
        radial-gradient(circle at 95% 4%, color-mix(in srgb, var(--ns-gold) 12%, transparent), transparent 34%),
        color-mix(in srgb, var(--ns-surface-raised) 94%, transparent);
    box-shadow: var(--ns-shadow-lg), inset 0 0 0 1px var(--ns-border) !important;
    will-change: border-radius, box-shadow;
    transition: border-radius 320ms cubic-bezier(.22, 1, .36, 1), box-shadow 320ms cubic-bezier(.22, 1, .36, 1), background-color 320ms ease;
}
.ns-form-overview:has(.ns-form-actions-popover.is-open) { overflow: visible !important; }
.ns-form-overview:has(.ns-form-details-popover.is-open) { overflow: visible !important; }
.ns-form-overview:has(.ns-form-linked-popover.is-open) { overflow: visible !important; }
.ns-form-overview:has(.ns-form-print-format [data-arial-expand="true"]) { overflow: visible !important; }
.ns-form-overview:has(.ns-form-document-popover.is-open) { overflow: visible !important; }
.new-form-view-content:has(.ns-form-workspace),
.info-view-content:has(.ns-form-workspace),
.new-form-view-content:has(.ns-form-workspace) > *,
.info-view-content:has(.ns-form-workspace) > * {
    position: relative;
    z-index: auto !important;
}
.ns-form-workspace > .ns-form-overview {
    z-index: 2147480000 !important;
}
.ns-employee-calendar-layer {
    position: fixed;
    z-index: 2147483000;
    inset: 0;
    display: flex;
    justify-content: flex-end;
    visibility: hidden;
    pointer-events: none;
}
.ns-employee-calendar-layer.is-open { visibility: visible; pointer-events: auto; }
.ns-employee-calendar-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: color-mix(in srgb, var(--ns-brand-primary) 56%, transparent);
    opacity: 0;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    transition: opacity 220ms ease;
}
.ns-employee-calendar-layer.is-open .ns-employee-calendar-backdrop { opacity: 1; }
.ns-employee-calendar-drawer {
    position: relative;
    display: flex;
    width: 80%;
    max-width: 1200px;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    border-left: 1px solid color-mix(in srgb, var(--ns-brand-secondary) 42%, var(--ns-border));
    color: var(--ns-text);
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--ns-gold) 10%, transparent), transparent 32%),
        color-mix(in srgb, var(--ns-surface-raised) 95%, transparent);
    box-shadow: -24px 0 70px color-mix(in srgb, #000 32%, transparent), inset 1px 0 0 color-mix(in srgb, white 8%, transparent);
    transform: translateX(100%);
    transition: transform 260ms cubic-bezier(.22, 1, .36, 1);
}
.ns-employee-calendar-layer.is-open .ns-employee-calendar-drawer { transform: translateX(0); }
.ns-employee-calendar-drawer:has(.ns-employee-calendar-type-select[data-arial-expand="true"]) { overflow: visible; }
.ns-employee-calendar-header {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 28px 30px 22px;
    border-bottom: 1px solid var(--ns-border);
    background: color-mix(in srgb, var(--ns-surface) 74%, transparent);
}
.ns-employee-calendar-heading { min-width: 0; }
.ns-employee-calendar-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: var(--ns-accent-strong);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .14em;
}
.ns-employee-calendar-heading h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--ns-text);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 780;
    line-height: 1.2;
}
.ns-employee-calendar-heading h2 .material-symbols-outlined { color: var(--ns-accent-strong); font-size: 24px; }
.ns-employee-calendar-heading p { margin: 8px 0 0; color: var(--ns-text-muted); font-size: 13px; line-height: 1.45; }
.ns-employee-calendar-close {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    border: 1px solid var(--ns-border);
    border-radius: 12px;
    color: var(--ns-text-muted);
    background: var(--ns-surface-muted);
    transition: color var(--ns-motion), border-color var(--ns-motion), background var(--ns-motion), transform var(--ns-motion);
}
.ns-employee-calendar-close:hover,
.ns-employee-calendar-close:focus-visible { color: var(--ns-text); border-color: var(--ns-accent); background: var(--ns-accent-soft); transform: translateY(-1px); }
.ns-employee-calendar-body { min-height: 0; flex: 1 1 auto; padding: 18px 24px 24px; overflow: hidden; }
.ns-employee-calendar-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    color: var(--ns-text-muted);
    font-size: 12px;
    font-weight: 700;
}
.ns-employee-calendar-meta:has(.ns-employee-calendar-type-select[data-arial-expand="true"]),
.ns-employee-calendar-body:has(.ns-employee-calendar-type-select[data-arial-expand="true"]) { overflow: visible; }
.ns-employee-calendar-meta:has(.ns-employee-calendar-type-select[data-arial-expand="true"]) { position: relative; z-index: 2147483100; }
.ns-employee-calendar-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.ns-employee-calendar-meta .material-symbols-outlined { color: var(--ns-accent-strong); font-size: 17px; }
.ns-employee-calendar-type-field { display: inline-flex; align-items: center; gap: 7px; color: var(--ns-text-muted); font-size: 11px; font-weight: 700; }
.ns-employee-calendar-type-select { min-width: 142px !important; min-height: 30px !important; height: 30px !important; border: 1px solid var(--ns-border) !important; border-radius: 8px !important; color: var(--ns-text) !important; background: var(--ns-surface-muted) !important; }
.ns-employee-calendar-type-select .select-field { min-height: 28px !important; padding: 0 27px 0 9px !important; border: 0 !important; color: var(--ns-text) !important; background: transparent !important; font: inherit; font-size: 11px; outline: none; }
.ns-employee-calendar-type-select:focus-within { border-color: var(--ns-accent) !important; box-shadow: var(--ns-focus); }
.ns-employee-calendar-host {
    height: calc(100% - 30px);
    min-height: 360px;
    overflow: hidden;
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius-lg);
    color: var(--ns-text);
    background: color-mix(in srgb, var(--ns-surface) 84%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ns-border) 42%, transparent), var(--ns-shadow-sm);
}
.ns-employee-calendar-host .weeks-scroll { height: 100%; }
.ns-employee-calendar-host .week { border-color: var(--ns-border) !important; background: var(--ns-surface) !important; }
.ns-employee-calendar-host .calendar-grid-bg { background-color: var(--ns-surface) !important; background-image: repeating-linear-gradient(to bottom, transparent, transparent calc(var(--hour-height) - 1px), var(--ns-border) calc(var(--hour-height) - 1px), var(--ns-border) var(--hour-height)) !important; }
.ns-employee-calendar-host .hour-row { border-color: var(--ns-border) !important; color: var(--ns-text-muted) !important; }
.ns-employee-calendar-host .week > div:first-child { border-color: var(--ns-border) !important; color: var(--ns-text) !important; background: var(--ns-surface-muted) !important; }
.ns-employee-calendar-host .week-label { color: var(--ns-text-muted); background: var(--ns-surface-muted); }
.ns-employee-calendar-host .week-label:hover { color: var(--ns-text); background: var(--ns-accent-soft); }
.ns-employee-calendar-host .week-label.active { color: var(--ns-brand-on-secondary); background: var(--ns-accent); }
.ns-employee-calendar-host .ns-events-calendar-nav-btn { border: 1px solid var(--ns-border); padding: 0; color: var(--ns-text); background: var(--ns-surface-raised); box-shadow: var(--ns-shadow-md); }
.ns-employee-calendar-host .ns-events-calendar-nav-btn:hover { background: var(--ns-accent-soft); }
.ns-employee-calendar-host .event-card { border-color: color-mix(in srgb, var(--ns-accent) 48%, var(--ns-border)); color: var(--ns-text); background: var(--ns-accent-soft); }
@media (max-width: 720px) {
    .ns-employee-calendar-drawer { width: 100%; }
    .ns-employee-calendar-header { padding: 22px 18px 18px; }
    .ns-employee-calendar-body { padding: 14px 12px 16px; }
    .ns-employee-calendar-meta { align-items: flex-start; flex-direction: column; }
    .ns-employee-calendar-host { min-height: 300px; }
}
.ns-form-completion-bar {
    position: relative;
    z-index: 12100;
    display: flex;
    min-height: 94px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 28px 30px 0;
    padding: 14px;
    border-radius: var(--ns-radius-lg);
    background: color-mix(in srgb, var(--ns-surface) 92%, transparent);
    box-shadow: inset 0 0 0 1px var(--ns-border), var(--ns-shadow-sm) !important;
    will-change: min-height, margin, padding;
    transition: min-height 320ms cubic-bezier(.22, 1, .36, 1), margin 320ms cubic-bezier(.22, 1, .36, 1), padding 320ms cubic-bezier(.22, 1, .36, 1), border-radius 320ms cubic-bezier(.22, 1, .36, 1);
}
.ns-form-icon-action.is-active {
    color: var(--ns-brand-on-secondary) !important;
    background: var(--ns-accent) !important;
    box-shadow: var(--ns-brand-glow) !important;
}
.ns-form-details-popover {
    position: absolute;
    top: calc(100% - 4px);
    right: 14px;
    z-index: 2147481000;
    width: min(340px, calc(100vw - 40px));
    padding: 16px;
    border-radius: 16px;
    color: var(--ns-text);
    background: var(--ns-surface-raised);
    box-shadow: var(--ns-shadow-lg), inset 0 0 0 1px var(--ns-border) !important;
    transform-origin: top right;
}
.ns-form-details-popover.is-open { animation: ns-form-details-arrive 180ms cubic-bezier(.22, 1, .36, 1) both; }
.ns-form-details-heading,
.ns-form-details-heading > span,
.ns-form-details-popover dl > div {
    display: flex;
    align-items: center;
}
.ns-form-details-heading { justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 800; }
.ns-form-details-heading > span { gap: 8px; }
.ns-form-details-heading .material-symbols-outlined { color: var(--ns-accent-strong); font-size: 19px; }
.ns-form-details-close {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 9px;
    color: var(--ns-text-muted) !important;
    background: var(--ns-surface-muted) !important;
}
.ns-form-details-close .material-symbols-outlined { color: currentColor; font-size: 18px; }
.ns-form-details-popover dl { display: grid; gap: 9px; margin: 14px 0 0; }
.ns-form-details-popover dl > div { justify-content: space-between; gap: 18px; padding-top: 9px; box-shadow: inset 0 1px 0 var(--ns-border); }
.ns-form-details-popover dt { color: var(--ns-text-muted); font-size: 12px; }
.ns-form-details-popover dd { min-width: 0; margin: 0; overflow: hidden; color: var(--ns-text); font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
@keyframes ns-form-details-arrive {
    from { opacity: 0; transform: translateY(-6px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.ns-form-completion-summary,
.ns-form-completion-line,
.ns-form-top-actions,
.ns-form-heading-row,
.ns-form-context,
.ns-form-quality {
    display: flex;
    align-items: center;
}
.ns-form-completion-summary { min-width: 0; flex: 1; gap: 16px; }
.ns-form-completion-icon,
.ns-form-quality-icon {
    display: grid;
    place-items: center;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 18px;
    color: var(--ns-accent-strong);
    background: var(--ns-accent-soft);
}
.ns-form-completion-copy { width: min(420px, 100%); min-width: 0; }
.ns-form-completion-line { gap: 14px; white-space: nowrap; }
.ns-form-eyebrow {
    color: var(--ns-text-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
}
.ns-form-progress-percent { font-size: 22px; line-height: 1; }
.ns-form-required-count { color: var(--ns-text-muted); font-size: 15px; }
.ns-form-progress-track {
    display: block;
    width: 100%;
    height: 8px;
    margin-top: 14px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--ns-surface-muted);
}
.ns-form-progress-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ns-accent), var(--ns-accent-strong));
    transition: width 260ms ease;
}
.ns-form-top-actions { flex: 0 0 auto; gap: 10px; }
.ns-form-info-actions { display: inline-flex; align-items: center; gap: 8px; }
.ns-form-document-tools { position: relative; flex: 0 0 auto; }
.ns-form-document-toggle.is-active {
    color: var(--ns-accent-strong) !important;
    background: var(--ns-accent-soft) !important;
    box-shadow: inset 0 0 0 1px var(--ns-brand-secondary) !important;
}
.ns-form-document-popover {
    position: absolute;
    z-index: 110;
    top: calc(100% + 12px);
    right: 0;
    width: min(360px, calc(100vw - 32px));
    padding: 16px;
    overflow: visible;
    border: 1px solid color-mix(in srgb, var(--ns-brand-secondary) 46%, var(--ns-border));
    border-radius: 18px;
    color: var(--ns-text);
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--ns-gold) 10%, transparent), transparent 36%),
        color-mix(in srgb, var(--ns-surface-raised) 94%, transparent);
    box-shadow: 0 22px 58px color-mix(in srgb, #000 34%, transparent), inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
    backdrop-filter: blur(22px) saturate(136%);
    -webkit-backdrop-filter: blur(22px) saturate(136%);
    transform-origin: top right;
}
.ns-form-document-popover[hidden] { display: none !important; }
.ns-form-document-popover.is-open { animation: ns-document-tools-arrive 190ms cubic-bezier(.22, 1, .36, 1) both; }
@keyframes ns-document-tools-arrive {
    from { opacity: 0; transform: translateY(-6px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.ns-form-document-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.ns-form-document-heading small { color: var(--ns-accent-strong); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.ns-form-document-heading h3 { margin: 2px 0 0; color: var(--ns-text); font-size: 17px; font-weight: 780; }
.ns-form-document-close {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    flex: 0 0 34px;
    border: 1px solid var(--ns-border);
    border-radius: 10px;
    color: var(--ns-text-muted);
    background: var(--ns-surface-muted);
}
.ns-form-document-close:hover { color: var(--ns-text); border-color: var(--ns-brand-secondary); background: var(--ns-accent-soft); }
.ns-form-document-close .material-symbols-outlined { font-size: 17px; }
.ns-form-print-format {
    position: relative;
    display: flex;
    width: 210px;
    min-width: 210px;
    height: 46px;
    box-sizing: border-box;
    flex: 0 0 210px;
    align-items: center;
    gap: 7px;
    padding: 0 8px 0 12px;
    border: 1px solid var(--ns-border);
    border-radius: 999px;
    color: var(--ns-text);
    background: color-mix(in srgb, var(--ns-surface-muted) 88%, transparent);
}
.ns-form-document-popover .ns-form-print-format {
    width: 100%;
    min-width: 100%;
    height: 44px;
    flex-basis: 44px;
    margin-bottom: 12px;
    border-radius: 12px;
}
.ns-form-document-popover .ns-form-print-format > .select-field-wrapper,
.ns-form-document-popover .ns-form-print-format .inner-select-field-wrapper,
.ns-form-document-popover .ns-form-print-format .select-field { height: 40px !important; }
.ns-form-document-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.ns-form-document-action {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    min-height: 54px;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--ns-border);
    border-radius: 12px;
    color: var(--ns-text) !important;
    text-align: left;
    text-decoration: none !important;
    background: color-mix(in srgb, var(--ns-surface-muted) 84%, transparent);
    transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}
.ns-form-document-action:hover { transform: translateY(-1px); border-color: var(--ns-brand-secondary); background: var(--ns-accent-soft); }
.ns-form-document-action > .material-symbols-outlined {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 10px;
    color: var(--ns-accent-strong);
    background: color-mix(in srgb, var(--ns-accent) 12%, transparent);
    font-size: 18px;
}
.ns-form-document-action > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.ns-form-document-action strong { color: var(--ns-text); font-size: 12px; font-weight: 750; }
.ns-form-document-action small { color: var(--ns-text-muted); font-size: 10px; }
.ns-form-document-action:disabled,
.ns-form-document-action.is-disabled { cursor: not-allowed; opacity: .45; transform: none; }
.ns-form-print-format > .material-symbols-outlined { flex: 0 0 auto; color: var(--ns-accent-strong); font-size: 18px; }
html[data-theme] body.nsika-app-body .ns-form-print-format > .select-field-wrapper {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}
html[data-theme] body.nsika-app-body .ns-form-print-format > .select-field-wrapper::after { display: none !important; }
html[data-theme] body.nsika-app-body .ns-form-print-format .inner-select-field-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
}
html[data-theme] body.nsika-app-body .ns-form-print-format .select-field {
    min-width: 0 !important;
    height: 38px !important;
    padding: 0 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--ns-text) !important;
    -webkit-text-fill-color: var(--ns-text) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 680;
    line-height: 38px !important;
}
.ns-form-print-format .select-options-wrapper {
    display: flex !important;
    flex-direction: column !important;
    right: 0 !important;
    left: auto !important;
    min-width: 260px !important;
    min-height: 0 !important;
    overflow: hidden !important;
    color: var(--ns-text) !important;
    background: color-mix(in srgb, var(--ns-surface-raised) 94%, transparent) !important;
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
}
.ns-form-print-format .select-options-list {
    min-height: 0 !important;
    flex: 1 1 auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}
html[data-theme] body.nsika-app-body .ns-form-document-popover .ns-form-print-format:has(
    .select-options-wrapper.expanded-top,
    .select-options-wrapper.expanded-bottom
) {
    position: relative !important;
    z-index: 2147482000 !important;
}
html[data-theme] body.nsika-app-body .ns-form-document-popover .ns-form-document-actions {
    position: relative;
    z-index: 1;
}
.ns-form-icon-action:disabled,
.ns-form-icon-action.is-disabled {
    cursor: not-allowed;
    opacity: .42;
    transform: none !important;
}
.ns-form-info-actions .ns-form-icon-action {
    text-decoration: none !important;
}
.ns-form-info-actions .ns-form-icon-action:hover {
    color: var(--ns-accent-strong) !important;
    background: var(--ns-accent-soft) !important;
    transform: translateY(-1px);
}
.ns-form-icon-action,
.ns-form-copilot-action,
.ns-form-primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border-radius: 999px;
    color: var(--ns-text) !important;
    background: var(--ns-surface-muted) !important;
    box-shadow: inset 0 0 0 1px var(--ns-border) !important;
    transition: transform 220ms cubic-bezier(.22, 1, .36, 1), opacity 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}
.ns-form-icon-action { width: 46px; }
.ns-form-icon-action .material-symbols-outlined { font-size: 20px; }
.ns-form-copilot-action { gap: 10px; padding: 0 20px; font-weight: 700; }
.ns-form-copilot-action > .material-symbols-outlined:first-child { color: var(--ns-accent-strong); }
.ns-form-chevron { font-size: 18px !important; color: var(--ns-text-muted); }
.ns-form-options-menu { position: relative; flex: 0 0 auto; }
.ns-form-actions-toggle.is-active { background: var(--ns-accent-soft) !important; box-shadow: inset 0 0 0 1px var(--ns-accent) !important; }
.ns-form-actions-popover {
    position: absolute;
    z-index: 90;
    top: calc(100% + 12px);
    right: 0;
    width: min(440px, calc(100vw - 32px));
    min-height: 0;
    padding: 18px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--ns-accent) 42%, var(--ns-border));
    border-radius: 17px;
    color: var(--ns-text);
    background: color-mix(in srgb, var(--ns-surface) 82%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    backdrop-filter: blur(18px) saturate(125%);
    box-shadow: 0 16px 42px color-mix(in srgb, #000 38%, transparent), inset 0 1px 0 color-mix(in srgb, white 7%, transparent) !important;
    transform-origin: top right;
}
@property --ns-actions-border-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
.ns-form-actions-popover::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(from var(--ns-actions-border-angle), transparent 0 34%, var(--ns-accent) 43%, var(--ns-gold) 49%, transparent 58% 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: ns-form-actions-border-spin 5s linear infinite;
}
.ns-form-actions-popover > * { position: relative; z-index: 1; }
.ns-form-actions-popover[hidden] { display: none !important; }
.ns-form-actions-popover.is-open { animation: ns-form-actions-arrive 180ms cubic-bezier(.22, 1, .36, 1) both; }
@keyframes ns-form-actions-arrive {
    from { opacity: 0; transform: translateY(-8px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ns-form-actions-border-spin { to { --ns-actions-border-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
    .ns-form-actions-popover::before { animation: none; }
}
.ns-form-actions-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ns-form-actions-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--ns-accent-strong);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
}
.ns-form-actions-header h3 { margin: 0; color: var(--ns-text); font-size: 18px; font-weight: 750; line-height: 1.15; }
.ns-form-actions-close {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    flex: 0 0 34px;
    border: 1px solid var(--ns-border);
    border-radius: 10px;
    color: var(--ns-text-muted);
    background: var(--ns-surface-muted);
    transition: color var(--ns-motion), border-color var(--ns-motion), transform var(--ns-motion);
}
.ns-form-actions-close:hover { color: var(--ns-text); border-color: var(--ns-accent); transform: translateY(-1px); }
.ns-form-actions-divider { height: 1px; margin: 13px 0 12px; background: color-mix(in srgb, var(--ns-accent) 24%, var(--ns-border)); }
.ns-form-action-group { margin-top: 15px; }
.ns-form-action-group:first-of-type { margin-top: 0; }
.ns-form-action-group-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; padding: 0 2px; }
.ns-form-action-group-heading h4 { margin: 0; color: var(--ns-text); font-size: 12px; font-weight: 750; letter-spacing: .02em; }
.ns-form-action-group-heading p { margin: 3px 0 0; color: var(--ns-text-muted); font-size: 10px; line-height: 1.35; }
.ns-form-action-group-heading > .material-symbols-outlined { color: var(--ns-accent-strong); font-size: 17px; }
.ns-form-actions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.ns-form-option-item {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 18px;
    min-width: 0;
    min-height: 44px;
    align-items: center;
    gap: 8px;
    padding: 6px 9px;
    border: 1px solid var(--ns-border);
    border-radius: 11px;
    color: var(--ns-text);
    text-align: left;
    background: color-mix(in srgb, var(--ns-surface-muted) 88%, transparent);
    transition: transform var(--ns-motion), border-color var(--ns-motion), background-color var(--ns-motion);
}
.ns-form-option-item:hover { transform: translateY(-1px); border-color: var(--ns-accent); background: var(--ns-accent-soft); }
.ns-form-option-icon { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 9px; color: var(--ns-accent-strong); background: color-mix(in srgb, var(--ns-accent-soft) 72%, transparent); font-size: 16px !important; }
.ns-form-option-label { min-width: 0; overflow: hidden; font-size: 12px; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
.ns-form-option-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.ns-form-option-description { overflow: hidden; color: var(--ns-text-muted); font-size: 10px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.ns-form-heading-actions { position: relative; display: flex; align-items: center; gap: 8px; }
.ns-form-linked-sticky-control { display: none; }
.ns-form-linked-heading-control { display: block; }
.ns-form-linked-control { position: relative; z-index: 2147480001; }
.ns-form-linked-toggle { display: inline-flex; min-height: 40px; align-items: center; gap: 6px; padding: 0 14px; border: 1px solid var(--ns-brand-secondary) !important; border-radius: 999px; color: var(--ns-brand-on-secondary) !important; background: var(--ns-brand-secondary) !important; box-shadow: var(--ns-brand-glow); transition: transform var(--ns-motion), border-color var(--ns-motion), background-color var(--ns-motion), box-shadow var(--ns-motion); }
.ns-form-linked-toggle:hover, .ns-form-linked-toggle[aria-expanded="true"] { border-color: var(--ns-accent) !important; background: var(--ns-accent) !important; color: var(--ns-brand-on-secondary) !important; transform: translateY(-1px); }
.ns-form-linked-popover { position: absolute; right: 0; top: calc(100% + 9px); z-index: 2147481000; width: min(360px, calc(100vw - 32px)); padding: 14px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ns-brand-secondary) 42%, var(--ns-border)); border-radius: 18px; color: var(--ns-text); background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--ns-accent) 12%, transparent), transparent 42%), color-mix(in srgb, var(--ns-surface-raised) 86%, transparent); box-shadow: 0 22px 58px color-mix(in srgb, #000 34%, transparent), inset 0 1px 0 color-mix(in srgb, white 8%, transparent); -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); transform-origin: top right; }
.ns-form-linked-popover.is-open { animation: ns-form-linked-arrive 180ms cubic-bezier(.22, 1, .36, 1) both; }
@keyframes ns-form-linked-arrive { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.ns-form-linked-sticky-control .ns-form-linked-popover { top: calc(100% + 9px); }
.ns-form-linked-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, var(--ns-accent) 24%, var(--ns-border)); color: var(--ns-accent-strong); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.ns-form-linked-close { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--ns-border); border-radius: 9px; color: var(--ns-text-muted); background: var(--ns-surface-muted); }
.ns-form-linked-close:hover { color: var(--ns-text); border-color: var(--ns-accent); background: var(--ns-accent-soft); }
.ns-form-linked-list { display: grid; gap: 6px; padding-top: 9px; }
.ns-form-linked-option { display: grid; grid-template-columns: 30px minmax(0, 1fr) 16px; align-items: center; gap: 8px; min-height: 46px; padding: 7px 9px; border: 1px solid var(--ns-border); border-radius: 11px; color: var(--ns-text); text-align: left; background: color-mix(in srgb, var(--ns-surface-muted) 84%, transparent); transition: transform var(--ns-motion), border-color var(--ns-motion), background-color var(--ns-motion); }
.ns-form-linked-option:hover { border-color: var(--ns-accent); background: var(--ns-accent-soft); }
.ns-form-linked-icon { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; background: var(--ns-accent-soft); font-size: 16px !important; }
.ns-form-option-arrow { color: var(--ns-text-muted); font-size: 15px !important; }
.ns-form-icon-action:hover,
.ns-form-copilot-action:hover,
.ns-form-primary-action:hover { transform: translateY(-1px); box-shadow: var(--ns-shadow-md) !important; }
.ns-form-sticky-save {
    display: none;
    opacity: 0;
    transform: translateY(6px) scale(.96);
    pointer-events: none;
}
.ns-form-overview-body {
    max-height: 420px;
    padding: 22px 30px 28px;
    overflow: hidden;
    opacity: 1;
    transform: translateY(0);
    will-change: max-height, opacity, transform;
    transition: max-height 340ms cubic-bezier(.22, 1, .36, 1), padding 340ms cubic-bezier(.22, 1, .36, 1), opacity 180ms ease, transform 300ms cubic-bezier(.22, 1, .36, 1);
}
.ns-form-overview.is-compact {
    border-radius: 18px;
    box-shadow: var(--ns-shadow-md), inset 0 0 0 1px var(--ns-border) !important;
}
.ns-form-overview.is-compact .ns-form-completion-bar {
    min-height: 68px;
    margin: 0;
    padding: 12px 18px;
    border-radius: 18px;
    box-shadow: none !important;
}
.ns-form-overview.is-compact .ns-form-completion-icon {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
    border-radius: 16px;
}
.ns-form-overview.is-compact .ns-form-overview-body {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}
.ns-form-overview.is-compact .ns-form-sticky-save {
    display: inline-flex;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    animation: ns-form-save-arrive 260ms 100ms cubic-bezier(.22, 1, .36, 1) both;
}
.ns-form-overview.is-compact .ns-form-linked-sticky-control { display: block; }
.ns-form-overview.is-compact .ns-form-linked-heading-control { display: none; }
@keyframes ns-form-save-arrive {
    from { opacity: 0; transform: translateY(7px) scale(.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.ns-form-context { flex-wrap: wrap; gap: 9px; }
.ns-form-context > span {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    border-radius: 999px;
    color: var(--ns-text-muted);
    font-size: 12px;
    font-weight: 650;
    background: color-mix(in srgb, var(--ns-surface) 88%, transparent);
    box-shadow: inset 0 0 0 1px var(--ns-border) !important;
}
.ns-form-context .ns-form-context-brand {
    color: var(--ns-accent-strong);
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    background: var(--ns-accent-soft);
}
.ns-form-context-brand .material-symbols-outlined { font-size: 18px; }
.ns-form-heading-row { justify-content: space-between; gap: 30px; margin-top: 22px; }
.ns-form-title-line {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.ns-form-title { margin: 0; color: var(--ns-text); font-size: clamp(26px, 3vw, 42px); font-weight: 760; line-height: 1.1; }
.ns-form-document-status,
.ns-form-detail-status {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    max-width: 100%;
    padding: 0 11px;
    border: 1px solid var(--ns-border);
    border-radius: 999px;
    color: var(--ns-text-muted);
    background: color-mix(in srgb, var(--ns-surface-muted) 84%, transparent);
    font-size: 12px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}
.ns-form-document-status-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 15%, transparent);
}
.ns-form-document-status.is-positive,
.ns-form-detail-status.is-positive {
    color: var(--ns-sage);
    border-color: color-mix(in srgb, var(--ns-sage) 38%, var(--ns-border));
    background: color-mix(in srgb, var(--ns-sage) 12%, var(--ns-surface-muted));
}
.ns-form-document-status.is-negative,
.ns-form-detail-status.is-negative {
    color: var(--ns-danger);
    border-color: color-mix(in srgb, var(--ns-danger) 38%, var(--ns-border));
    background: color-mix(in srgb, var(--ns-danger) 11%, var(--ns-surface-muted));
}
.ns-form-document-status.is-pending,
.ns-form-detail-status.is-pending {
    color: var(--ns-gold);
    border-color: color-mix(in srgb, var(--ns-gold) 42%, var(--ns-border));
    background: color-mix(in srgb, var(--ns-gold) 12%, var(--ns-surface-muted));
}
.ns-form-document-status.is-draft,
.ns-form-detail-status.is-draft {
    color: var(--ns-accent-strong);
    border-color: color-mix(in srgb, var(--ns-accent) 40%, var(--ns-border));
    background: color-mix(in srgb, var(--ns-accent) 11%, var(--ns-surface-muted));
}
.ns-form-detail-status {
    min-height: 24px;
    padding: 0 8px;
    font-size: 11px;
}
.ns-form-detail-status .ns-form-document-status-dot { width: 6px; height: 6px; flex-basis: 6px; }
.ns-form-description { margin: 14px 0 0; color: var(--ns-text-muted); font-size: 16px; line-height: 1.55; }
.ns-form-primary-action {
    flex: 0 0 auto;
    gap: 9px;
    min-width: 112px;
    padding: 0 22px;
    color: var(--ns-brand-on-secondary) !important;
    font-weight: 750;
    background: linear-gradient(135deg, var(--ns-accent), var(--ns-accent-strong)) !important;
    box-shadow: var(--ns-brand-glow) !important;
}
.ns-form-primary-action .material-symbols-outlined { font-size: 19px; color: currentColor !important; }
.ns-form-quality {
    gap: 15px;
    margin-top: 24px;
    padding: 18px 20px;
    border-radius: var(--ns-radius-lg);
    background: color-mix(in srgb, var(--ns-gold) 15%, var(--ns-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ns-gold) 38%, transparent) !important;
}
.ns-form-quality-icon {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: color-mix(in srgb, var(--ns-gold) 78%, var(--ns-text));
    background: color-mix(in srgb, var(--ns-gold) 22%, transparent);
}
.ns-form-quality.is-complete { background: color-mix(in srgb, var(--ns-sage) 17%, var(--ns-surface)); }
.ns-form-quality.is-complete .ns-form-quality-icon { color: var(--ns-sage); background: color-mix(in srgb, var(--ns-sage) 20%, transparent); }
.ns-form-quality strong { display: block; color: var(--ns-text); font-size: 14px; }
.ns-form-quality p { margin: 5px 0 0; color: var(--ns-text-muted); font-size: 14px; }
.ns-form-fields {
    width: 100%;
    padding: 30px 2px 44px !important;
    gap: 24px 28px !important;
    background: transparent !important;
}
.ns-form-fields .form-field { min-width: 0; margin: 0 !important; }
.ns-form-fields .form-field:not([fieldtype="table"]) {
    position: relative;
    padding: 13px 14px 14px;
    border: 1px solid var(--ns-field-border);
    border-radius: 15px;
    background: color-mix(in srgb, var(--ns-surface) 54%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 3%, transparent) !important;
    transition: border-color var(--ns-motion), background-color var(--ns-motion), box-shadow var(--ns-motion), transform var(--ns-motion);
}
.ns-form-fields .form-field:not([fieldtype="table"]):focus-within {
    border-color: var(--ns-field-border);
    background: color-mix(in srgb, var(--ns-surface) 54%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 3%, transparent) !important;
}
.ns-form-fields .form-label {
    margin: 0 0 7px !important;
    color: var(--ns-text-muted) !important;
    font-size: 11px !important;
    font-weight: 760 !important;
    letter-spacing: .035em;
}
.ns-form-fields .form-label .text-danger { margin-left: 5px !important; color: var(--ns-accent-strong) !important; }
.ns-form-fields :where(input.form-control, textarea.form-control, select.form-control, .nsika-selector, .nsika-date-picker, .nsika-time-picker, .nsika-year-picker) {
    min-height: 44px !important;
    border-radius: 11px !important;
    color: var(--ns-text) !important;
    border: 1px solid var(--ns-field-border) !important;
    background: color-mix(in srgb, var(--ns-surface-raised) 72%, transparent) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent) !important;
    transition: border-color var(--ns-motion), box-shadow var(--ns-motion), background-color var(--ns-motion);
}
.ns-form-fields :where(input.form-control, textarea.form-control, select.form-control):focus,
.ns-form-fields :where(.nsika-selector, .nsika-date-picker, .nsika-time-picker, .nsika-year-picker):focus-within {
    outline: 0 !important;
    border-color: var(--ns-field-border) !important;
    background: color-mix(in srgb, var(--ns-surface-raised) 72%, transparent) !important;
    box-shadow: none !important;
}
.ns-form-fields :where(input, textarea)::placeholder { color: var(--ns-text-muted) !important; opacity: .78; }
.ns-form-fields :where(input, textarea, select, option) {
    color: var(--ns-text) !important;
    -webkit-text-fill-color: var(--ns-text) !important;
    caret-color: var(--ns-accent) !important;
}
.ns-form-fields :where(input, textarea)::placeholder {
    color: var(--ns-text-muted) !important;
    -webkit-text-fill-color: var(--ns-text-muted) !important;
}
.ns-form-fields :where(input, textarea):-webkit-autofill,
.ns-form-fields :where(input, textarea):-webkit-autofill:hover,
.ns-form-fields :where(input, textarea):-webkit-autofill:focus,
.ns-form-fields :where(input, textarea):autofill {
    border-color: color-mix(in srgb, var(--ns-accent) 52%, var(--ns-border)) !important;
    -webkit-text-fill-color: var(--ns-text) !important;
    caret-color: var(--ns-text) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--ns-surface-raised) inset !important;
    box-shadow: 0 0 0 1000px var(--ns-surface-raised) inset !important;
    transition: background-color 9999s ease-out 0s;
}
.ns-form-fields select option { color: var(--ns-text) !important; background: var(--ns-surface-raised) !important; }
.ns-form-fields textarea.form-control { min-height: 88px !important; padding-top: 11px !important; resize: vertical !important; line-height: 1.5; }
.ns-form-fields :where(input, textarea, select, .nsika-field) { font-size: 13px !important; }
.ns-form-fields :where(input, textarea, select):disabled,
.ns-form-fields .nsika-field[disabled] { cursor: not-allowed; opacity: .62; }

/* Keep compound and enhanced fields on the same surface rhythm. */
.ns-form-fields .nsika-field-wrapper { margin: 0 !important; }
.ns-form-fields .password-field-wrapper,
.ns-form-fields .nsika-field-wrapper,
.ns-form-fields .expandable-field { border-radius: 11px; }
.ns-form-fields .hide-show-pwd {
    border-color: transparent !important;
    color: var(--ns-text-muted) !important;
    background: transparent !important;
    box-shadow: none !important;
}
.ns-form-fields .hide-show-pwd:hover { color: var(--ns-accent-strong) !important; background: var(--ns-accent-soft) !important; }
.ns-form-fields .country-code-selector { color: var(--ns-text) !important; }
.ns-form-fields .select-field-wrapper,
.ns-form-fields .select-options-wrapper,
.ns-form-fields .select-options-pagination {
    border-color: var(--ns-border) !important;
    color: var(--ns-text) !important;
    background: var(--ns-surface-raised) !important;
}
.ns-form-fields .select-field-wrapper input.select-field {
    color: var(--ns-text) !important;
    -webkit-text-fill-color: var(--ns-text) !important;
    background: transparent !important;
}
.ns-form-fields .select-options-list,
.ns-form-fields .select-options-list li,
.ns-form-fields .select-options-list li * { color: var(--ns-text) !important; }
.ns-form-fields .select-options-list li:hover,
.ns-form-fields .select-options-list li.active { background: var(--ns-accent-soft) !important; }
.ns-form-fields .expand-field-shrink { color: var(--ns-text-muted) !important; }
html[data-theme] body.nsika-app-body .nsika-selector-modal .selector-modal-card,
html[data-theme] body.nsika-app-body .nsika-selector-modal .selector-modal-pagination {
    border-color: var(--ns-border) !important;
    color: var(--ns-text) !important;
    background: color-mix(in srgb, var(--ns-surface-raised) 96%, transparent) !important;
}
html[data-theme] body.nsika-app-body .nsika-selector-modal :where(h1, h2, h3, h4, strong, .selector-modal-options-list, .selector-modal-options-list li) { color: var(--ns-text) !important; }
html[data-theme] body.nsika-app-body .nsika-selector-modal :where(p, small, .selector-modal-close, .selector-modal-clear-search) { color: var(--ns-text-muted) !important; }
html[data-theme] body.nsika-app-body .nsika-selector-modal .selector-modal-search-input {
    border-color: var(--ns-border) !important;
    color: var(--ns-text) !important;
    -webkit-text-fill-color: var(--ns-text) !important;
    background: var(--ns-surface-muted) !important;
}
html[data-theme] body.nsika-app-body .nsika-selector-modal .selector-modal-options-list li:hover,
html[data-theme] body.nsika-app-body .nsika-selector-modal .selector-modal-options-list li.active { background: var(--ns-accent-soft) !important; }

/* Read-only values should feel intentional, not like disabled inputs. */
.ns-form-fields .form-field[fieldtype="read-only"] .nsika-field,
.ns-form-fields .nsika-field[type="read-only"] {
    min-height: 44px !important;
    border: 1px dashed var(--ns-field-border) !important;
    border-radius: 11px !important;
    color: color-mix(in srgb, var(--ns-text) 88%, var(--ns-text-muted)) !important;
    background: color-mix(in srgb, var(--ns-surface-muted) 64%, transparent) !important;
}
.ns-form-fields .form-field[fieldtype="read-only"] .nsika-field *,
.ns-form-fields .nsika-field[type="read-only"] * { color: inherit !important; }

/* Checks and switches use the same restrained accent treatment. */

.ns-form-fields .ns-form-check-field {
    display: block !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.ns-form-fields .ns-form-check-card {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: start;
    gap: 13px;
    width: 100%;
    min-height: 92px;
    padding: 16px;
    border: 1px solid var(--ns-border);
    border-radius: 16px;
    color: var(--ns-text);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--ns-brand-primary) 18%, var(--ns-surface-raised) 82%),
            color-mix(in srgb, var(--ns-brand-secondary) 15%, var(--ns-surface-raised) 85%));
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 6%, transparent), var(--ns-shadow-sm);
    cursor: pointer;
    transition: border-color var(--ns-motion), background-color var(--ns-motion), box-shadow var(--ns-motion), transform var(--ns-motion);
}
.ns-form-fields .ns-form-check-card:hover {
    border-color: color-mix(in srgb, var(--ns-accent) 62%, var(--ns-border));
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--ns-brand-primary) 24%, var(--ns-surface-raised) 76%),
            color-mix(in srgb, var(--ns-brand-secondary) 23%, var(--ns-surface-raised) 77%));
    transform: translateY(-1px);
}
.ns-form-fields .ns-form-check-card:has(.ns-form-check-input:checked) {
    border-color: var(--ns-accent);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--ns-brand-primary) 29%, var(--ns-surface-raised) 71%),
            color-mix(in srgb, var(--ns-brand-secondary) 34%, var(--ns-surface-raised) 66%));
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 8%, transparent), var(--ns-brand-glow);
}
.ns-form-fields .ns-form-check-input {
    appearance: none;
    -webkit-appearance: none;
    display: grid;
    width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    place-content: center;
    margin: 0 !important;
    border: 1px solid var(--ns-border) !important;
    border-radius: 7px !important;
    outline: 0;
    background: color-mix(in srgb, var(--ns-surface-muted) 76%, transparent) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 5%, transparent) !important;
    cursor: pointer;
    transition: border-color var(--ns-motion), background-color var(--ns-motion), box-shadow var(--ns-motion), transform var(--ns-motion);
}
.ns-form-fields .ns-form-check-input::before {
    width: 12px;
    height: 7px;
    border: solid var(--ns-brand-on-secondary);
    border-width: 0 0 2px 2px;
    content: "";
    opacity: 0;
    transform: rotate(-45deg) translate(1px, -1px) scale(.7);
    transition: opacity var(--ns-motion), transform var(--ns-motion);
}
.ns-form-fields .ns-form-check-input:checked {
    border-color: var(--ns-brand-secondary) !important;
    background: linear-gradient(135deg, var(--ns-brand-primary), var(--ns-brand-secondary)) !important;
    box-shadow: var(--ns-brand-glow) !important;
}
.ns-form-fields .ns-form-check-input:checked::before { opacity: 1; transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.ns-form-fields .ns-form-check-input:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ns-accent) 34%, transparent), inset 0 1px 0 color-mix(in srgb, white 5%, transparent) !important;
}
.ns-form-fields .ns-form-check-input:disabled { cursor: not-allowed; opacity: .56; }
.ns-form-fields .ns-form-check-card:has(.ns-form-check-input:disabled) { cursor: not-allowed; opacity: .72; }
.ns-form-fields .ns-form-check-copy { display: grid; min-width: 0; gap: 5px; }
.ns-form-fields .ns-form-check-title {
    color: var(--ns-text);
    font-size: 11px;
    font-weight: 760;
    letter-spacing: .035em;
    line-height: 1.35;
}
.ns-form-fields .ns-form-check-required { margin-left: 4px; color: var(--ns-accent-strong); }
.ns-form-fields .ns-form-check-description,
.ns-form-fields .ns-form-field-description {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin: 7px 1px 0;
    color: var(--ns-text-muted);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
}
.ns-form-fields .ns-form-check-description { margin: 0; }
.ns-form-fields .ns-form-check-description .material-symbols-outlined,
.ns-form-fields .ns-form-field-description .material-symbols-outlined {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--ns-accent-strong);
    font-size: 14px;
}
	.ns-form-fields input[type="checkbox"].nsika-field:not(.ns-form-check-input) {
	    width: 20px !important;
	    height: 20px !important;
	    min-height: 20px !important;
    border: 1px solid var(--ns-border) !important;
    border-radius: 6px !important;
    background-color: color-mix(in srgb, var(--ns-surface-raised) 74%, transparent) !important;
	}
	.ns-form-fields input[type="checkbox"].nsika-field:not(.ns-form-check-input):checked { border-color: var(--ns-accent) !important; background-color: var(--ns-accent) !important; }
	.ns-form-fields .ns-checkbox-group-field {
	    width: 100%;
	    min-width: 0;
	}
	.ns-form-fields .ns-checkbox-group-list,
	.ns-form-fields .ns-checkbox-options {
	    display: grid;
	    gap: 10px;
	}
	.ns-form-fields .ns-checkbox-option-group {
	    display: grid;
	    gap: 8px;
	    min-width: 0;
	    padding: 10px;
	    border: 1px solid color-mix(in srgb, var(--ns-border) 82%, transparent);
	    border-radius: 10px;
	    background: color-mix(in srgb, var(--ns-surface-muted) 44%, transparent);
	}
	.ns-form-fields .ns-checkbox-group-title {
	    color: var(--ns-text-muted);
	    font-size: 11px;
	    font-weight: 800;
	    letter-spacing: .04em;
	    text-transform: uppercase;
	}
	.ns-form-fields .ns-checkbox-option {
	    display: grid;
	    grid-template-columns: 22px minmax(0, 1fr);
	    align-items: center;
	    gap: 9px;
	    min-height: 38px;
	    padding: 8px 10px;
	    border: 1px solid color-mix(in srgb, var(--ns-border) 78%, transparent);
	    border-radius: 9px;
	    color: var(--ns-text);
	    background: color-mix(in srgb, var(--ns-surface-raised) 78%, transparent);
	    cursor: pointer;
	    transition: border-color var(--ns-motion), background-color var(--ns-motion), transform var(--ns-motion);
	}
	.ns-form-fields .ns-checkbox-option:hover {
	    border-color: color-mix(in srgb, var(--ns-accent) 45%, var(--ns-border));
	    background: color-mix(in srgb, var(--ns-accent-soft) 36%, var(--ns-surface-raised));
	}
	.ns-form-fields .ns-checkbox-option:has(input:checked) {
	    border-color: color-mix(in srgb, var(--ns-accent) 68%, var(--ns-border));
	    background: color-mix(in srgb, var(--ns-accent-soft) 58%, var(--ns-surface-raised));
	    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ns-accent) 18%, transparent);
	}
	.ns-form-fields .ns-checkbox-option input {
	    width: 18px;
	    height: 18px;
	    margin: 0;
	    accent-color: var(--ns-accent);
	}
	.ns-form-fields .ns-checkbox-option input:focus-visible {
	    outline: 2px solid color-mix(in srgb, var(--ns-accent) 68%, transparent);
	    outline-offset: 2px;
	}
	.ns-form-fields .ns-checkbox-option span {
	    min-width: 0;
	    overflow-wrap: anywhere;
	    font-size: 13px;
	    font-weight: 650;
	}
	.ns-form-fields .ns-multi-checkbox-field .ns-checkbox-options {
	    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	}
	.ns-form-fields .nsika-field[type="switch"] { min-height: 44px; padding: 0 4px; color: var(--ns-text-muted); }
.ns-form-fields .switch-toggler-wrapper { background: color-mix(in srgb, var(--ns-border) 78%, transparent) !important; }
.ns-form-fields .switch-toggler { border-color: var(--ns-border) !important; box-shadow: var(--ns-shadow-sm) !important; }

/* Files, code, expandable and rich content share the form's panel language. */
.ns-form-fields .nsika-code-editor,
.ns-form-fields .expandable-field,
.ns-form-fields .note-editor {
    overflow: hidden;
    border: 1px solid var(--ns-field-border) !important;
    border-radius: 11px !important;
    color: var(--ns-text) !important;
    background: color-mix(in srgb, var(--ns-surface-raised) 72%, transparent) !important;
    box-shadow: none !important;
}
.ns-form-fields .file-input-wrapper { border-radius: 11px !important; background: transparent !important; }
.ns-form-fields .ns-native-file-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.ns-form-fields .ns-file-button-field {
    min-height: 46px !important;
    border: 1px solid color-mix(in srgb, var(--ns-accent) 38%, var(--ns-field-border)) !important;
    border-radius: 11px !important;
    color: var(--ns-text) !important;
    background: color-mix(in srgb, var(--ns-accent-soft) 58%, var(--ns-surface-raised)) !important;
    box-shadow: none !important;
    position: relative;
    overflow: hidden;
}
.ns-form-fields .ns-file-button-field::after {
    content: "";
    position: absolute;
    inset: 2px;
    pointer-events: none;
    border-radius: 9px;
    border: 1px dashed transparent;
    opacity: 0;
    transition: opacity .16s ease, border-color .16s ease;
}
.ns-form-fields .ns-file-button-field:hover,
.ns-form-fields .ns-file-button-field:focus-within {
    border-color: var(--ns-accent) !important;
    background: color-mix(in srgb, var(--ns-accent-soft) 72%, var(--ns-surface-raised)) !important;
    transform: translateY(-1px);
}
.ns-form-fields .ns-file-button-field:active { transform: translateY(0); }
.ns-form-fields .ns-file-button-field.is-dragging {
    border-color: var(--ns-accent) !important;
    background: color-mix(in srgb, var(--ns-accent) 18%, var(--ns-surface-raised)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ns-accent) 16%, transparent) !important;
}
.ns-form-fields .ns-file-button-field.is-dragging::after {
    border-color: color-mix(in srgb, var(--ns-accent) 68%, transparent);
    opacity: 1;
}
.ns-form-fields .ns-file-button-field.has-file {
    border-color: color-mix(in srgb, #22c55e 64%, var(--ns-field-border)) !important;
    background: color-mix(in srgb, #22c55e 8%, var(--ns-surface-raised)) !important;
}
.ns-form-fields .ns-file-button-field.is-file-drop-error {
    animation: ns-file-picker-shake .18s ease-in-out 2;
    border-color: var(--ns-danger, #ef6464) !important;
    background: color-mix(in srgb, var(--ns-danger, #ef6464) 9%, var(--ns-surface-raised)) !important;
}
.ns-form-fields .ns-file-button-field.is-picker-open {
    z-index: 120;
}
.ns-form-fields .ns-file-button-label { color: inherit !important; }
.ns-form-fields .ns-file-button-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: var(--ns-accent) !important;
    background: color-mix(in srgb, var(--ns-accent) 12%, transparent);
    transition: background .16s ease, color .16s ease, transform .16s ease;
}
.ns-form-fields .ns-file-button-field.is-dragging .ns-file-button-icon { transform: scale(1.06); }
.ns-form-fields .ns-file-button-field.has-file .ns-file-button-icon {
    color: #16a34a !important;
    background: color-mix(in srgb, #22c55e 14%, transparent);
}
.ns-form-fields .ns-file-button-field.is-file-drop-error .ns-file-button-icon {
    color: var(--ns-danger, #ef6464) !important;
    background: color-mix(in srgb, var(--ns-danger, #ef6464) 12%, transparent);
}
.ns-form-fields .ns-file-button-copy {
    display: flex;
    min-width: 88px;
    flex-direction: column;
    line-height: 1.18;
}
.ns-form-fields .ns-file-button-text {
    overflow: hidden;
    color: var(--ns-text) !important;
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ns-form-fields .ns-file-button-helper,
.ns-form-fields .ns-file-button-empty,
.ns-form-fields .file-title {
    color: var(--ns-text-muted) !important;
    font-size: 11px !important;
}
.ns-form-fields .ns-file-button-files {
    display: flex;
    min-width: 120px;
    max-width: 55%;
    justify-content: flex-end;
}
.ns-form-fields .ns-file-button-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    padding: 4px 9px;
    border: 1px solid color-mix(in srgb, var(--ns-accent) 30%, var(--ns-border));
    border-radius: 999px;
    color: var(--ns-accent) !important;
    background: color-mix(in srgb, var(--ns-accent-soft) 66%, transparent);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
.ns-form-fields .ns-file-preview-icon {
    font-size: 15px !important;
    line-height: 1;
}
.ns-form-fields .ns-file-button-files:has(.file-row) {
    display: block;
    padding-left: 8px;
}
.ns-form-fields .ns-file-clear-button {
    flex: 0 0 32px;
    margin-left: 6px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--ns-text-muted) !important;
    background: transparent;
}
.ns-form-fields .ns-file-clear-button:hover {
    border-color: color-mix(in srgb, var(--ns-danger, #ef6464) 36%, transparent);
    color: var(--ns-danger, #ef6464) !important;
    background: color-mix(in srgb, var(--ns-danger, #ef6464) 9%, transparent);
}
.ns-form-fields .file-row {
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    border: 1px solid var(--ns-border) !important;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ns-surface-raised) 86%, transparent);
}
.ns-form-fields .file-row:first-child { margin-top: 0; }
.ns-form-fields .file-row a,
.ns-form-fields .file-row button {
    border-radius: 7px !important;
}
.ns-file-picker-popover[hidden] { display: none !important; }
.ns-file-picker-popover {
    position: fixed;
    top: var(--ns-popup-top, 0);
    left: var(--ns-popup-left, 0);
    z-index: 2147479400;
    width: var(--ns-popup-width, 100vw);
    height: var(--ns-popup-height, 100dvh);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 18px;
    cursor: default;
    background:
        radial-gradient(circle at 22% 16%, color-mix(in srgb, var(--ns-accent) 16%, transparent), transparent 34%),
        color-mix(in srgb, #050510 52%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.ns-file-picker-panel {
    --ns-animated-border-width: 1px;
    --ns-animated-border-radius: 18px;
    --ns-animated-border-speed: 2.8s;
    --ns-animated-border-muted: color-mix(in srgb, var(--ns-brand-secondary) 40%, transparent);
    --ns-animated-border-primary: var(--ns-brand-secondary);
    --ns-animated-border-secondary: var(--ns-accent);
    position: relative;
    width: min(520px, 100%);
    height: auto;
    max-height: min(620px, 100%);
    min-width: 0;
    min-height: 330px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--ns-brand-secondary) 46%, var(--ns-border));
    border-radius: 18px;
    color: var(--ns-text);
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--ns-brand-secondary) 11%, transparent), transparent 38%),
        radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--ns-accent) 8%, transparent), transparent 42%),
        color-mix(in srgb, var(--ns-surface-raised) 94%, transparent);
    box-shadow: 0 24px 68px color-mix(in srgb, #000 40%, transparent), inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    animation: ns-file-picker-enter 190ms cubic-bezier(.22, 1, .36, 1) both;
}
.ns-file-picker-popover.has-preview-layout .ns-file-picker-panel {
    width: min(1100px, 100%);
    height: min(720px, 100%);
    max-height: 100%;
    padding: 22px;
}
.ns-file-picker-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ns-border);
    border-radius: 9px;
    color: var(--ns-text-muted);
    background: color-mix(in srgb, var(--ns-surface-muted) 76%, transparent);
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.ns-file-picker-close:hover {
    color: var(--ns-text);
    border-color: var(--ns-brand-secondary);
    background: var(--ns-accent-soft);
    transform: translateY(-1px);
}
.ns-file-picker-workspace {
    display: grid;
    height: auto;
    min-height: 0;
    gap: 16px;
}
.ns-file-picker-popover.has-preview-layout .ns-file-picker-workspace {
    min-height: 0;
    min-width: 0;
    grid-template-columns: minmax(300px, .42fr) minmax(0, 1.58fr);
    gap: 20px;
}
.ns-file-picker-left {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    gap: 12px;
}
.ns-file-picker-drop-target {
    --ns-animated-border-width: 2px;
    --ns-animated-border-radius: 12px;
    --ns-animated-border-speed: 1.9s;
    --ns-animated-border-muted: color-mix(in srgb, var(--ns-brand-secondary) 72%, transparent);
    --ns-animated-border-primary: var(--ns-gold, var(--ns-brand-secondary));
    --ns-animated-border-secondary: var(--ns-accent);
    position: relative;
    min-height: 294px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 34px 24px;
    overflow: hidden;
    text-align: center;
    border: 1px solid color-mix(in srgb, var(--ns-accent) 28%, var(--ns-border));
    border-radius: 12px;
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--ns-accent) 8%, transparent), transparent 42%),
        color-mix(in srgb, var(--ns-surface-muted) 62%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 6%, transparent);
}
.ns-file-picker-popover.has-preview-layout .ns-file-picker-drop-target {
    min-height: 278px;
    flex: 0 0 278px;
    padding: 28px 18px;
}
.ns-file-picker-drop-target::before {
    content: "";
    position: absolute;
    inset: 10px;
    pointer-events: none;
    border: 2px dashed color-mix(in srgb, var(--ns-text-muted) 28%, transparent);
    border-radius: 9px;
    transition: border-color .16s ease;
}
.ns-file-picker-panel::after,
.ns-file-picker-drop-target::after {
    filter: drop-shadow(0 0 7px color-mix(in srgb, var(--ns-animated-border-primary) 46%, transparent));
}
.ns-file-picker-popover.is-dragging .ns-file-picker-drop-target {
    --ns-animated-border-speed: 1.2s;
    --ns-animated-border-muted: color-mix(in srgb, var(--ns-accent) 72%, transparent);
    --ns-animated-border-primary: var(--ns-accent);
    --ns-animated-border-secondary: var(--ns-gold, var(--ns-brand-secondary));
    border-color: var(--ns-accent);
    background: color-mix(in srgb, var(--ns-accent) 9%, var(--ns-surface-raised));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ns-accent) 12%, transparent);
}
.ns-file-picker-popover.is-dragging .ns-file-picker-drop-target::before {
    border-color: color-mix(in srgb, var(--ns-accent) 74%, transparent);
}
.ns-file-picker-popover.has-file .ns-file-picker-drop-target {
    border-color: color-mix(in srgb, #22c55e 58%, var(--ns-border));
}
.ns-file-picker-popover.is-file-drop-error .ns-file-picker-drop-target {
    border-color: var(--ns-danger, #ef6464);
}
.ns-file-picker-doc-icon {
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--ns-accent) 24%, transparent);
    border-radius: 18px;
    color: var(--ns-accent);
    background: color-mix(in srgb, var(--ns-accent) 10%, transparent);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--ns-accent) 16%, transparent), inset 0 1px 0 color-mix(in srgb, white 7%, transparent);
}
.ns-file-picker-doc-icon .material-symbols-outlined {
    font-size: 40px;
}
.ns-file-picker-title {
    color: var(--ns-text);
    font-size: 16px;
    font-weight: 760;
}
.ns-file-picker-browse {
    color: var(--ns-accent);
    font: inherit;
    font-weight: 800;
    background: transparent;
}
.ns-file-picker-browse:hover { text-decoration: underline; }
.ns-file-picker-caption {
    max-width: 390px;
    color: var(--ns-text-muted);
    font-size: 12px;
    line-height: 1.55;
}
.ns-file-picker-attachments[hidden],
.ns-file-picker-preview[hidden] { display: none !important; }
.ns-file-picker-attachments {
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--ns-border) 82%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--ns-surface-muted) 70%, transparent);
}
.ns-file-picker-attachments-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 11px;
    border-bottom: 1px solid color-mix(in srgb, var(--ns-border) 74%, transparent);
    color: var(--ns-text);
    font-size: 12px;
    font-weight: 700;
}
.ns-file-picker-clear-all {
    min-height: 26px;
    padding: 0 9px;
    border: 1px solid color-mix(in srgb, var(--ns-danger, #ef6464) 32%, transparent);
    border-radius: 8px;
    color: var(--ns-danger, #ef6464);
    background: color-mix(in srgb, var(--ns-danger, #ef6464) 7%, transparent);
    font-size: 11px;
    font-weight: 700;
}
.ns-file-picker-attachments-list {
    max-height: 100%;
    height: calc(100% - 47px);
    overflow-y: auto;
    padding: 8px;
}
.ns-file-picker-attachment-row {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto 28px;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 6px 6px 6px 8px;
    border: 1px solid color-mix(in srgb, var(--ns-border) 70%, transparent);
    border-radius: 9px;
    color: var(--ns-text);
    background: color-mix(in srgb, var(--ns-surface-raised) 78%, transparent);
}
.ns-file-picker-attachment-row:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--ns-accent) 72%, transparent);
    outline-offset: 2px;
}
.ns-file-picker-attachment-row + .ns-file-picker-attachment-row { margin-top: 6px; }
.ns-file-picker-attachment-row.is-active {
    border-color: color-mix(in srgb, var(--ns-accent) 52%, var(--ns-border));
    background: color-mix(in srgb, var(--ns-accent-soft) 34%, var(--ns-surface-raised));
}
.ns-file-picker-attachment-row > .material-symbols-outlined {
    color: var(--ns-accent);
    font-size: 18px;
}
.ns-file-picker-attachment-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
}
.ns-file-picker-attachment-status {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    padding: 0 7px;
    border: 1px solid color-mix(in srgb, var(--ns-border) 64%, transparent);
    border-radius: 999px;
    color: var(--ns-text-muted);
    background: color-mix(in srgb, var(--ns-surface-muted) 70%, transparent);
    font-size: 10px;
    font-weight: 800;
}
.ns-file-picker-attachment-status.is-ready,
.ns-file-picker-attachment-status.is-uploaded {
    border-color: color-mix(in srgb, #22a35a 38%, var(--ns-border));
    color: #22a35a;
    background: color-mix(in srgb, #22a35a 9%, transparent);
}
.ns-file-picker-attachment-status.is-failed {
    border-color: color-mix(in srgb, var(--ns-danger, #ef6464) 42%, var(--ns-border));
    color: var(--ns-danger, #ef6464);
    background: color-mix(in srgb, var(--ns-danger, #ef6464) 9%, transparent);
}
.ns-file-picker-remove-file {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--ns-text-muted);
    background: transparent;
}
.ns-file-picker-remove-file:hover {
    color: var(--ns-danger, #ef6464);
    background: color-mix(in srgb, var(--ns-danger, #ef6464) 10%, transparent);
}
.ns-file-picker-preview {
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid color-mix(in srgb, var(--ns-accent) 18%, var(--ns-border));
    border-radius: 12px;
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--ns-accent) 10%, transparent), transparent 42%),
        color-mix(in srgb, var(--ns-surface-muted) 62%, transparent);
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ns-brand-secondary) 58%, transparent) transparent;
}
.ns-file-picker-preview::-webkit-scrollbar,
.ns-file-picker-preview-shell::-webkit-scrollbar,
.ns-file-preview-table-wrap::-webkit-scrollbar,
.ns-file-preview-text-wrap::-webkit-scrollbar,
.ns-file-preview-document::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}
.ns-file-picker-preview::-webkit-scrollbar-thumb,
.ns-file-picker-preview-shell::-webkit-scrollbar-thumb,
.ns-file-preview-table-wrap::-webkit-scrollbar-thumb,
.ns-file-preview-text-wrap::-webkit-scrollbar-thumb,
.ns-file-preview-document::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--ns-brand-secondary) 56%, transparent);
}
.ns-file-picker-preview-shell {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 24px;
    overflow: auto;
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    color: var(--ns-text-muted);
    text-align: center;
}
.ns-file-picker-preview-shell .material-symbols-outlined {
    color: var(--ns-accent);
    font-size: 46px;
}
.ns-file-picker-preview-shell strong {
    color: var(--ns-text);
    font-size: 16px;
}
.ns-file-picker-preview-shell small {
    font-size: 12px;
}
.ns-file-preview-media,
.ns-file-preview-frame {
    width: 100%;
    height: 100%;
    min-width: min(720px, 100%);
    min-height: 420px;
    max-width: 100%;
    max-height: 100%;
    flex: 1 1 auto;
    border: 0;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ns-surface-raised) 74%, transparent);
}
.ns-file-preview-media {
    object-fit: contain;
}
.ns-file-picker-preview-shell > .ns-file-preview-media {
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    flex: 0 0 auto;
}
.ns-file-picker-preview-shell > img.ns-file-preview-media {
    min-width: 0;
    min-height: 0;
    max-width: max-content;
}
.ns-file-preview-frame {
    display: block;
    height: max(640px, 100%);
}
.ns-file-preview-audio {
    width: min(420px, 100%);
    margin-top: 10px;
}
.ns-file-preview-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 9px;
}
.ns-file-preview-spinner,
.ns-file-upload-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid color-mix(in srgb, var(--ns-accent) 18%, transparent);
    border-top-color: var(--ns-accent);
    border-radius: 50%;
    animation: ns-file-preview-spin .8s linear infinite;
}
.ns-file-preview-table-wrap,
.ns-file-preview-text-wrap,
.ns-file-preview-document {
    width: 100%;
    min-width: 0;
    height: 100%;
    overflow: auto;
    overflow-x: auto;
    overflow-y: auto;
    color: var(--ns-text);
    text-align: left;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ns-brand-secondary) 58%, transparent) transparent;
}
.ns-file-preview-table-title {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 12px;
    color: var(--ns-text);
    background: color-mix(in srgb, var(--ns-surface-muted) 92%, transparent);
}
.ns-file-preview-table-title .material-symbols-outlined { color: var(--ns-accent); font-size: 22px; }
.ns-file-preview-truncated {
    margin-left: auto;
    color: var(--ns-text-muted);
    font-size: 11px;
    font-weight: 700;
}
.ns-file-preview-table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
}
.ns-file-preview-table :is(th, td) {
    min-width: 250px;
    max-width: 360px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--ns-border) 82%, transparent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: top;
}
.ns-file-preview-table th {
    position: sticky;
    top: 34px;
    z-index: 3;
    color: var(--ns-text);
    background: color-mix(in srgb, var(--ns-accent-soft) 52%, var(--ns-surface-raised));
    box-shadow: 0 1px 0 color-mix(in srgb, var(--ns-border) 82%, transparent);
    font-weight: 800;
}
.ns-file-preview-text-wrap pre {
    margin: 0;
    min-width: max-content;
    white-space: pre;
    color: var(--ns-text);
    font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
.ns-file-picker-popover.is-uploading .ns-file-picker-panel::before {
    content: "";
    position: absolute;
    z-index: 8;
    inset: 0;
    background: color-mix(in srgb, var(--ns-surface-raised) 70%, transparent);
    backdrop-filter: blur(3px);
}
.ns-file-picker-popover.is-uploading .ns-file-picker-panel::after {
    z-index: 10;
}
.ns-file-picker-popover.is-uploading .ns-file-picker-panel {
    pointer-events: none;
}
.ns-file-picker-upload-progress {
    position: absolute;
    z-index: 12;
    right: 22px;
    bottom: 18px;
    left: 22px;
    display: none;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--ns-accent) 44%, var(--ns-border));
    border-radius: 12px;
    color: var(--ns-text);
    background: color-mix(in srgb, var(--ns-surface-raised) 96%, transparent);
    box-shadow: 0 18px 48px color-mix(in srgb, #000 24%, transparent);
}
.ns-file-picker-popover.is-uploading .ns-file-picker-upload-progress {
    display: grid;
}
.ns-file-picker-upload-progress .ns-file-upload-spinner {
    width: 20px;
    height: 20px;
    border-width: 2px;
}
.ns-file-picker-upload-progress-label,
.ns-file-picker-upload-progress-value {
    font-size: 12px;
    font-weight: 800;
}
.ns-file-picker-upload-progress-value {
    color: var(--ns-accent-strong);
}
.ns-file-picker-upload-progress-track {
    grid-column: 1 / -1;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ns-border) 52%, transparent);
}
.ns-file-picker-upload-progress-bar {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ns-brand-secondary), var(--ns-gold, var(--ns-accent)));
    transition: width 160ms ease;
}
.ns-file-picker-popover.is-uploading .ns-file-picker-workspace::after,
.file-drop-zone.is-file-uploading .ns-file-button-label::after {
    content: "Uploading files " attr(data-upload-progress) "%";
    position: absolute;
    z-index: 9;
    top: 50%;
    left: 50%;
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 0 16px 0 46px;
    border: 1px solid color-mix(in srgb, var(--ns-accent) 44%, var(--ns-border));
    border-radius: 999px;
    color: var(--ns-text);
    background: color-mix(in srgb, var(--ns-surface-raised) 94%, transparent);
    box-shadow: 0 18px 48px color-mix(in srgb, #000 26%, transparent);
    font-size: 12px;
    font-weight: 800;
    transform: translate(-50%, -50%);
}
.ns-file-picker-popover.is-uploading .ns-file-picker-workspace::before,
.file-drop-zone.is-file-uploading .ns-file-button-label::before {
    content: "";
    position: absolute;
    z-index: 10;
    top: 50%;
    left: calc(50% - 72px);
    width: 20px;
    height: 20px;
    border: 2px solid color-mix(in srgb, var(--ns-accent) 20%, transparent);
    border-top-color: var(--ns-accent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: ns-file-upload-spin .8s linear infinite;
}
.ns-file-picker-workspace,
.ns-file-button-label {
    position: relative;
}
@keyframes ns-file-preview-spin { to { transform: rotate(360deg); } }
@keyframes ns-file-upload-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@media (max-width: 900px) {
    .ns-file-picker-popover {
        padding: 14px;
    }
    .ns-file-picker-panel {
        width: min(520px, 100%);
        max-height: min(620px, 100%);
    }
    .ns-file-picker-popover.has-preview-layout .ns-file-picker-panel {
        width: 100%;
        height: 100%;
        padding: 18px;
    }
    .ns-file-picker-popover.has-preview-layout .ns-file-picker-workspace {
        min-height: auto;
        grid-template-columns: 1fr;
    }
    .ns-file-picker-popover.has-preview-layout .ns-file-picker-drop-target {
        min-height: 220px;
    }
    .ns-file-picker-preview-shell {
        height: 360px;
    }
}
@keyframes ns-file-picker-enter {
    from { opacity: 0; transform: translateY(-6px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ns-file-picker-shake {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(3px); }
}
.ns-form-fields .note-toolbar { border-color: var(--ns-border) !important; background: color-mix(in srgb, var(--ns-surface-muted) 78%, transparent) !important; }
.ns-form-fields .note-editable { color: var(--ns-text) !important; background: transparent !important; }

/* Field buttons and validation feedback align with the shell actions. */
.ns-form-fields .button-field {
    min-height: 44px !important;
    border: 1px solid color-mix(in srgb, var(--ns-accent) 48%, var(--ns-border)) !important;
    border-radius: 11px !important;
    color: var(--ns-text) !important;
    background: var(--ns-accent-soft) !important;
    box-shadow: none !important;
}
.ns-form-fields .button-field:hover { border-color: var(--ns-accent) !important; transform: translateY(-1px); }
.ns-form-fields .field-error-wrapper { margin-top: 7px !important; }
.ns-form-fields .field-error-wrapper :where(.error-text, .material-symbols-outlined) { color: var(--ns-danger, #ef6464) !important; font-size: 11px !important; }
.ns-form-fields .form-field.field-has-error { border-color: color-mix(in srgb, var(--ns-danger, #ef6464) 68%, var(--ns-border)) !important; background: color-mix(in srgb, var(--ns-danger, #ef6464) 7%, transparent) !important; }
.ns-form-fields .required-field-empty {
    border-color: crimson !important;
}
.ns-form-fields .required-field-complete {
    border-color: #22a35a !important;
}
.ns-form-fields :where(.required-field-empty, .required-field-complete) {
    transition: border-color 220ms ease, box-shadow 220ms ease !important;
}
.ns-form-fields .required-field-empty:focus,
.ns-form-fields .required-field-empty:focus-within {
    border-color: crimson !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, crimson 12%, transparent) !important;
}
.ns-form-fields .required-field-complete:focus,
.ns-form-fields .required-field-complete:focus-within {
    border-color: #22a35a !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, #22a35a 12%, transparent) !important;
}

/* Sections and tabs remain visually connected to their contained fields. */
.ns-form-fields .section-break,
.ns-form-fields .tab-break-group {
    border-color: color-mix(in srgb, var(--ns-border) 86%, transparent) !important;
    border-radius: 15px !important;
    background: color-mix(in srgb, var(--ns-surface) 42%, transparent) !important;
}
.ns-form-fields .tab-break-group {
    padding: 18px 18px 12px !important;
    border-width: 1px !important;
    box-shadow: 0 10px 28px color-mix(in srgb, #000 6%, transparent) !important;
}
.ns-form-fields .tab-break-header {
    min-height: 44px;
    margin: 0 2px 14px !important;
    padding: 0 0 12px !important;
    border-bottom: 2px solid color-mix(in srgb, var(--ns-brand-secondary) 34%, var(--ns-border)) !important;
}
.ns-form-fields .tab-break-header-mark {
    width: 5px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 3px;
    background: var(--ns-brand-secondary) !important;
    box-shadow: 0 0 16px color-mix(in srgb, var(--ns-brand-secondary) 55%, transparent);
}
.ns-form-fields .tab-break-kicker {
    margin-bottom: 3px;
    color: var(--ns-brand-secondary) !important;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
}
.ns-form-fields .tab-break-title {
    color: var(--ns-text) !important;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
}
.ns-form-fields .tab-break-nav {
    padding: 0 0 12px;
}
.ns-form-fields .tab-break-item {
    min-height: 42px;
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 26%, transparent);
}
.ns-form-fields .tab-break-item-stats {
    display: none !important;
}
.ns-form-fields .tab-break-item.is-active .tab-break-item-stats {
    display: inline-flex !important;
}
.ns-form-fields .tab-break-item.is-active {
    box-shadow:
        0 8px 18px color-mix(in srgb, var(--ns-brand-secondary) 18%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 18%, transparent);
}
.ns-form-fields .tab-break-item-label {
    white-space: nowrap;
}
.ns-form-fields .tab-break-item-stats {
    padding-left: 2px;
}
.ns-form-fields .tab-stat-pill {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    color: var(--ns-text-muted);
    background: color-mix(in srgb, var(--ns-surface-muted) 82%, transparent);
    border: 1px solid color-mix(in srgb, var(--ns-border) 68%, transparent);
}
.ns-form-fields .tab-break-item.is-active .tab-stat-pill {
    color: var(--ns-theme-text-color, currentColor);
    background: color-mix(in srgb, white 18%, transparent);
    border-color: color-mix(in srgb, white 28%, transparent);
}
.ns-form-fields .tab-stat-progress {
    width: 42px;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ns-border) 68%, transparent);
}
.ns-form-fields .tab-stat-progress > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--ns-accent);
    transition: width 180ms ease;
}
.ns-form-fields .tab-stat-progress-label { color: var(--ns-text-muted); }
.ns-form-fields .tab-break-item.is-active .tab-stat-progress { background: color-mix(in srgb, white 24%, transparent); }
.ns-form-fields .tab-break-item.is-active .tab-stat-progress > span { background: var(--ns-brand-on-secondary); }
.ns-form-fields .tab-break-item.is-active .tab-stat-progress-label { color: var(--ns-theme-text-color, currentColor); }
@media (max-width: 640px) {
    .ns-form-fields .tab-break-item {
        width: 100%;
        justify-content: space-between;
        border-radius: 12px;
    }
    .ns-form-fields .tab-break-item-stats {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

/* Child tables inherit the same compact, translucent field treatment. */
.ns-form-fields .table-wrapper {
    overflow: hidden;
    border: 1px solid var(--ns-field-border) !important;
    border-radius: 15px !important;
    background: color-mix(in srgb, var(--ns-surface) 48%, transparent) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 3%, transparent) !important;
}
.ns-form-fields .table-wrapper .thead {
    color: var(--ns-text-muted) !important;
    background: color-mix(in srgb, var(--ns-surface-muted) 78%, transparent) !important;
}
.ns-form-fields .table-wrapper .thead .th { font-size: 11px !important; font-weight: 760 !important; letter-spacing: .025em; }
.ns-form-fields .table-wrapper .tbody .table-row {
    min-height: 46px !important;
    color: var(--ns-text) !important;
    border-color: color-mix(in srgb, var(--ns-border) 72%, transparent) !important;
    background: transparent !important;
}
.ns-form-fields .table-wrapper .tbody .table-row:hover { background: color-mix(in srgb, var(--ns-accent) 6%, transparent) !important; }
.ns-form-fields .table-wrapper .tc,
.ns-form-fields .table-wrapper .th { border-color: color-mix(in srgb, var(--ns-border) 68%, transparent) !important; }
.ns-form-fields .table-wrapper .table-field {
    min-height: 34px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    color: var(--ns-text) !important;
    background: transparent !important;
    box-shadow: none !important;
}
.ns-form-fields .table-wrapper .table-field:focus,
.ns-form-fields .table-wrapper .table-field:focus-within {
    border-color: var(--ns-brand-secondary) !important;
    background: transparent !important;
    box-shadow: none !important;
}
.ns-form-fields .table-wrapper :where(.table-search-field-input, .paginate-select) {
    min-height: 34px !important;
    border: 1px solid var(--ns-border) !important;
    border-radius: 9px !important;
    color: var(--ns-text) !important;
    background: color-mix(in srgb, var(--ns-surface-raised) 72%, transparent) !important;
}

/* Child-table visual system. Presentation only: preserve all table controls and hooks. */
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper {
    padding: 16px !important;
    border-color: color-mix(in srgb, var(--ns-field-border) 88%, transparent) !important;
    border-radius: 18px !important;
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--ns-surface-raised) 72%, transparent),
            color-mix(in srgb, var(--ns-surface) 54%, transparent)) !important;
    box-shadow:
        0 16px 40px color-mix(in srgb, #000 10%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 5%, transparent) !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper > :first-child {
    min-height: 42px;
    margin-bottom: 12px;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper > :first-child > div:first-child > div {
    margin-bottom: 2px !important;
    color: var(--ns-text) !important;
    font-size: 13px !important;
    font-weight: 760 !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper > :first-child small {
    color: var(--ns-text-muted) !important;
    font-size: 11px !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-search-field-wrapper {
    min-height: 36px !important;
    margin-bottom: 0 !important;
    border: 1px solid var(--ns-field-border) !important;
    border-radius: 11px !important;
    color: var(--ns-field-text) !important;
    background: color-mix(in srgb, var(--ns-field-bg) 88%, transparent) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent) !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-search-field-wrapper:focus-within {
    border-color: var(--ns-brand-secondary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ns-brand-secondary) 12%, transparent) !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-search-field-wrapper :where(.material-symbols-outlined, .table-search-clear) {
    color: var(--ns-text-muted) !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-scroll-controls .btn {
    border-color: var(--ns-field-border) !important;
    border-radius: 10px !important;
    color: var(--ns-text-muted) !important;
    background: color-mix(in srgb, var(--ns-field-bg) 88%, transparent) !important;
    box-shadow: none !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-scroll-controls .btn:hover {
    border-color: var(--ns-brand-secondary) !important;
    color: var(--ns-accent-strong) !important;
    background: var(--ns-accent-soft) !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-scroll-viewport {
    border: 1px solid color-mix(in srgb, var(--ns-border) 82%, transparent) !important;
    border-radius: 13px !important;
    background: color-mix(in srgb, var(--ns-surface) 44%, transparent) !important;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ns-brand-secondary) 60%, transparent) transparent;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .thead {
    min-height: 42px !important;
    height: 42px !important;
    border-bottom: 1px solid var(--ns-border) !important;
    border-radius: 12px 12px 8px 8px !important;
    color: var(--ns-text-muted) !important;
    background: color-mix(in srgb, var(--ns-surface-muted) 82%, transparent) !important;
    overflow: hidden;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .thead > .tr {
    min-height: 42px !important;
    border-radius: 12px 12px 8px 8px !important;
    color: var(--ns-text-muted) !important;
    background: transparent !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .thead .th:first-child {
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 8px !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .thead .th:last-child {
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 8px !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .thead .th {
    padding-inline: 10px !important;
    border-color: color-mix(in srgb, var(--ns-border) 74%, transparent) !important;
    color: var(--ns-text-muted) !important;
    font-size: 10px !important;
    font-weight: 780 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .thead .child-table-sort-trigger:hover {
    color: var(--ns-accent-strong) !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .tbody .table-row {
    min-height: 50px !important;
    border-color: color-mix(in srgb, var(--ns-border) 62%, transparent) !important;
    color: var(--ns-text) !important;
    background: color-mix(in srgb, var(--ns-surface-raised) 34%, transparent) !important;
    transition: background-color 160ms ease, box-shadow 160ms ease !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .tbody {
    margin-top: 4px !important;
    border-radius: 10px !important;
    overflow: hidden;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .tbody .table-row:first-child {
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .tbody .table-row:last-child {
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}
/* Child-table selectors escape table clipping, while the sticky form header remains authoritative. */
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper:has(.select-field-wrapper.table-field[data-arial-expand="true"]),
html[data-theme] body.nsika-app-body .ns-form-fields .table-scroll-viewport:has(.select-field-wrapper.table-field[data-arial-expand="true"]),
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .tbody:has(.select-field-wrapper.table-field[data-arial-expand="true"]) {
    overflow: visible !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper:has(.select-field-wrapper.table-field[data-arial-expand="true"]) {
    position: relative !important;
    z-index: 2147470000 !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-scroll-viewport:has(.select-field-wrapper.table-field[data-arial-expand="true"]) {
    position: relative !important;
    z-index: 2147470010 !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .table-row:has(.select-field-wrapper.table-field[data-arial-expand="true"]) {
    position: relative !important;
    z-index: 2147470000 !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .select-field-wrapper.table-field[data-arial-expand="true"] {
    position: relative !important;
    z-index: 2147470100 !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .select-field-wrapper.table-field[data-arial-expand="true"] > .select-options-wrapper {
    z-index: 2147470200 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(320px, calc(100dvh - 32px)) !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .select-field-wrapper.table-field[data-arial-expand="true"] > .select-options-wrapper > .select-options-list {
    min-height: 0 !important;
    max-height: 220px !important;
    flex: 0 1 auto !important;
    overflow-y: auto !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .select-field-wrapper.table-field[data-arial-expand="true"] > .select-options-wrapper > .nsika-selector-quick-form-btn {
    flex: 0 0 auto !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .tbody .table-row:nth-child(even) {
    background: color-mix(in srgb, var(--ns-surface-muted) 34%, transparent) !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .tbody .table-row:hover {
    background: color-mix(in srgb, var(--ns-accent) 8%, var(--ns-surface-raised)) !important;
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--ns-brand-secondary) 72%, transparent) !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .tbody .tc {
    min-width: 0;
    padding: 6px 8px !important;
    border-color: color-mix(in srgb, var(--ns-border) 58%, transparent) !important;
    color: var(--ns-text) !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .table-field,
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .select-field-wrapper.table-field {
    min-height: 36px !important;
    height: 36px !important;
    border: 1px solid color-mix(in srgb, var(--ns-field-border) 88%, transparent) !important;
    border-radius: 10px !important;
    color: var(--ns-field-text) !important;
    -webkit-text-fill-color: var(--ns-field-text) !important;
    background: color-mix(in srgb, var(--ns-field-bg) 90%, transparent) !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .table-field:focus,
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .table-field:focus-within,
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .select-field-wrapper.table-field:focus-within {
    border-color: var(--ns-brand-secondary) !important;
    color: var(--ns-field-text) !important;
    -webkit-text-fill-color: var(--ns-field-text) !important;
    background: color-mix(in srgb, var(--ns-field-bg) 90%, transparent) !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .row-check {
    border-color: color-mix(in srgb, var(--ns-field-border) 92%, transparent) !important;
    background-color: color-mix(in srgb, var(--ns-field-bg) 88%, transparent) !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .row-check:checked {
    border-color: var(--ns-brand-secondary) !important;
    background-color: var(--ns-brand-secondary) !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper > :last-child {
    min-height: 48px;
    margin-top: 12px !important;
    padding-top: 10px;
    border-color: color-mix(in srgb, var(--ns-border) 70%, transparent) !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .add-remove-action-btn {
    width: 42px !important;
    height: 34px !important;
    border: 1px solid var(--ns-field-border) !important;
    border-radius: 10px !important;
    color: var(--ns-text-muted) !important;
    background: color-mix(in srgb, var(--ns-field-bg) 88%, transparent) !important;
    box-shadow: none !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .add-remove-action-btn[action="add"] {
    border-color: color-mix(in srgb, var(--ns-brand-secondary) 65%, var(--ns-border)) !important;
    color: var(--ns-accent-strong) !important;
    background: var(--ns-accent-soft) !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .child-table-pagination .modern-pagination {
    margin: 0 !important;
    padding: 0 !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .child-table-pagination :where(.page-link, .page-size-select, .page-jump) {
    border-color: var(--ns-field-border) !important;
    border-radius: 9px !important;
    color: var(--ns-text-muted) !important;
    background: color-mix(in srgb, var(--ns-field-bg) 88%, transparent) !important;
    box-shadow: none !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .child-table-pagination .page-link.active {
    border-color: var(--ns-brand-secondary) !important;
    color: var(--ns-text) !important;
    background: var(--ns-accent-soft) !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .child-table-pagination :where(.compact-pagination-summary, .compact-summary-label) {
    color: var(--ns-text-muted) !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .child-table-pagination .compact-pagination-shell {
    min-height: 42px;
    gap: 3px;
    padding: 4px 5px;
    border: 1px solid var(--ns-border);
    border-radius: 999px;
    color: var(--ns-text);
    background: color-mix(in srgb, var(--ns-surface-raised) 88%, transparent);
    box-shadow: var(--ns-shadow);
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .child-table-pagination .compact-pagination-pages {
    gap: 2px;
    margin: 0;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .child-table-pagination .compact-pagination .page-link {
    min-width: 30px !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: var(--ns-text-muted) !important;
    background: transparent !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .child-table-pagination .compact-pagination .page-link:hover {
    color: var(--ns-text) !important;
    background: color-mix(in srgb, var(--ns-accent) 12%, transparent) !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .child-table-pagination .compact-pagination .page-link.active {
    color: #fff !important;
    background: color-mix(in srgb, var(--ns-accent) 78%, transparent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ns-accent) 58%, white), 0 5px 12px color-mix(in srgb, var(--ns-accent) 20%, transparent) !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .child-table-pagination .compact-pagination .page-link.active span {
    color: #fff !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .child-table-pagination .compact-pagination-divider {
    width: 1px;
    height: 22px;
    margin: 0 5px;
    background: var(--ns-border);
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .child-table-pagination .compact-pagination-summary {
    display: inline-flex;
    min-width: max-content;
    align-items: center;
    gap: 4px;
    padding-inline: 4px;
    font-size: 11px;
    white-space: nowrap;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .child-table-pagination .compact-pagination-summary strong {
    color: var(--ns-text) !important;
    font-weight: 700;
}
html[data-theme] body.nsika-app-body .ns-form-fields .table-wrapper .child-table-pagination .compact-pagination .page-size-select {
    width: 94px !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 28px 0 12px !important;
    border: 1px solid var(--ns-border) !important;
    border-radius: 999px !important;
    color: var(--ns-text) !important;
    background-color: var(--ns-surface-muted) !important;
    font-size: 11px !important;
    font-weight: 600;
}

/* Authoritative field state colors: values must remain readable in every state. */
html[data-theme] body.nsika-app-body .ns-form-fields :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
    textarea,
    select,
    .select-field-wrapper,
    .nsika-date-picker,
    .nsika-time-picker,
    .nsika-year-picker,
    .expandable-field,
    .nsika-code-editor
) {
    border-color: var(--ns-field-border) !important;
    color: var(--ns-field-text) !important;
    -webkit-text-fill-color: var(--ns-field-text) !important;
    caret-color: var(--ns-accent) !important;
    background-color: var(--ns-field-bg) !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
    textarea,
    select,
    .select-field-wrapper,
    .nsika-date-picker,
    .nsika-time-picker,
    .nsika-year-picker,
    .expandable-field,
    .nsika-code-editor
):focus,
html[data-theme] body.nsika-app-body .ns-form-fields :where(
    .select-field-wrapper,
    .nsika-date-picker,
    .nsika-time-picker,
    .nsika-year-picker
):focus-within {
    outline: 0 !important;
    border-color: var(--ns-field-border) !important;
    color: var(--ns-field-text) !important;
    -webkit-text-fill-color: var(--ns-field-text) !important;
    background-color: var(--ns-field-bg) !important;
    box-shadow: none !important;
    animation: none !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .form-field:not([fieldtype="table"]):focus-within {
    border-color: var(--ns-field-border) !important;
    color: var(--ns-field-text) !important;
    background: color-mix(in srgb, var(--ns-surface) 54%, transparent) !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .form-field:not([fieldtype="table"])::after {
    --ns-border-orbit-angle: 0deg;
    content: "";
    position: absolute;
    z-index: 2;
    inset: -1px;
    padding: 1px;
    border: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: conic-gradient(
        from calc(315deg + var(--ns-border-orbit-angle)),
        transparent 0deg 272deg,
        color-mix(in srgb, var(--ns-brand-secondary) 40%, transparent) 292deg,
        var(--ns-brand-secondary) 318deg,
        var(--ns-accent) 338deg,
        transparent 360deg
    );
    will-change: --ns-border-orbit-angle;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}
html[data-theme] body.nsika-app-body .ns-form-fields .form-field:not([fieldtype="table"]):focus-within::after {
    opacity: 1;
    animation: ns-border-perimeter-orbit 2.8s linear infinite;
}
html[data-theme] body.nsika-app-body .ns-form-fields :where(input, textarea)::placeholder {
    color: var(--ns-field-placeholder) !important;
    -webkit-text-fill-color: var(--ns-field-placeholder) !important;
    opacity: 1 !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields :where(input, textarea):disabled {
    color: var(--ns-text-muted) !important;
    -webkit-text-fill-color: var(--ns-text-muted) !important;
    background-color: var(--ns-surface-muted) !important;
    opacity: .82 !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields :where(input, textarea):-webkit-autofill,
html[data-theme] body.nsika-app-body .ns-form-fields :where(input, textarea):-webkit-autofill:hover,
html[data-theme] body.nsika-app-body .ns-form-fields :where(input, textarea):-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ns-field-text) !important;
    caret-color: var(--ns-field-text) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--ns-field-bg) inset !important;
    box-shadow: 0 0 0 1000px var(--ns-field-bg) inset !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields .select-field-wrapper input.select-field,
html[data-theme] body.nsika-app-body .ns-form-fields .select-field-wrapper input.select-field:focus {
    color: var(--ns-field-text) !important;
    -webkit-text-fill-color: var(--ns-field-text) !important;
    background: transparent !important;
    animation: none !important;
}
html[data-theme] body.nsika-app-body .ns-form-fields :where(
    .nsika-field[type="read-only"],
    .nsika-field[type="read-only"] *,
    .form-field[fieldtype="read-only"] .nsika-field,
    .form-field[fieldtype="read-only"] .nsika-field *
) {
    color: var(--ns-field-text) !important;
    -webkit-text-fill-color: var(--ns-field-text) !important;
}
@property --ns-border-orbit-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}
@keyframes ns-border-perimeter-orbit { to { --ns-border-orbit-angle: 360deg; } }

.ns-animated-border {
    --ns-animated-border-width: 1px;
    --ns-animated-border-radius: inherit;
    --ns-animated-border-speed: 2.8s;
    --ns-animated-border-opacity: 0;
    --ns-animated-border-start: 315deg;
    --ns-animated-border-muted: color-mix(in srgb, var(--ns-brand-secondary) 40%, transparent);
    --ns-animated-border-primary: var(--ns-brand-secondary);
    --ns-animated-border-secondary: var(--ns-accent);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.ns-animated-border > * {
    position: relative;
    z-index: 3;
}
.ns-animated-border::after {
    --ns-border-orbit-angle: 0deg;
    content: "";
    position: absolute;
    z-index: 2;
    inset: calc(-1 * var(--ns-animated-border-width));
    padding: var(--ns-animated-border-width);
    border-radius: var(--ns-animated-border-radius);
    pointer-events: none;
    opacity: var(--ns-animated-border-opacity);
    background: conic-gradient(
        from calc(var(--ns-animated-border-start) + var(--ns-border-orbit-angle)),
        transparent 0deg 272deg,
        var(--ns-animated-border-muted) 292deg,
        var(--ns-animated-border-primary) 318deg,
        var(--ns-animated-border-secondary) 338deg,
        transparent 360deg
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}
.ns-animated-border-active,
.ns-animated-border:hover,
.ns-animated-border:focus-within {
    --ns-animated-border-opacity: 1;
}
.ns-animated-border-active::after,
.ns-animated-border:hover::after,
.ns-animated-border:focus-within::after {
    animation: ns-border-perimeter-orbit var(--ns-animated-border-speed) linear infinite;
}
.ns-animated-border-fast { --ns-animated-border-speed: 1.4s; }
.ns-animated-border-slow { --ns-animated-border-speed: 4.8s; }
.ns-animated-border-thick { --ns-animated-border-width: 2px; }

/* Shared popover treatment: keep transient surfaces on the same animated border system. */
html[data-theme] body.nsika-app-body :where(
    .dropdown-menu,
    .dropdown-menu__content,
    .dropdown-content,
    .modal-content,
    .ce-popover,
    .ce-inline-toolbar,
    .ce-conversion-toolbar,
    .quick-form-modal-panel,
    .quick-form-drawer-panel,
    .ns-audit-panel,
    .ns-preview-panel
):not(.ns-no-animated-border) {
    --ns-animated-border-width: 1px;
    --ns-animated-border-radius: inherit;
    --ns-animated-border-speed: 3.8s;
    --ns-animated-border-opacity: 1;
    --ns-animated-border-start: 315deg;
    --ns-animated-border-muted: color-mix(in srgb, var(--ns-brand-secondary) 36%, transparent);
    --ns-animated-border-primary: var(--ns-brand-secondary);
    --ns-animated-border-secondary: var(--ns-accent);
    position: relative;
    isolation: isolate;
}
html[data-theme] body.nsika-app-body :where(
    .dropdown-menu,
    .dropdown-menu__content,
    .dropdown-content,
    .modal-content,
    .ce-popover,
    .ce-inline-toolbar,
    .ce-conversion-toolbar,
    .quick-form-modal-panel,
    .quick-form-drawer-panel,
    .ns-audit-panel,
    .ns-preview-panel
):not(.ns-no-animated-border)::after {
    --ns-border-orbit-angle: 0deg;
    content: "";
    position: absolute;
    z-index: 3;
    inset: calc(-1 * var(--ns-animated-border-width));
    padding: var(--ns-animated-border-width);
    border-radius: var(--ns-animated-border-radius);
    pointer-events: none;
    opacity: var(--ns-animated-border-opacity);
    background: conic-gradient(
        from calc(var(--ns-animated-border-start) + var(--ns-border-orbit-angle)),
        transparent 0deg 272deg,
        var(--ns-animated-border-muted) 292deg,
        var(--ns-animated-border-primary) 318deg,
        var(--ns-animated-border-secondary) 338deg,
        transparent 360deg
    ) !important;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: ns-border-perimeter-orbit var(--ns-animated-border-speed) linear infinite;
}
html[data-theme] body.nsika-app-body :where(
    .dropdown-menu,
    .dropdown-menu__content,
    .dropdown-content,
    .modal-content,
    .ce-popover,
    .ce-inline-toolbar,
    .ce-conversion-toolbar,
    .quick-form-modal-panel,
    .quick-form-drawer-panel,
    .ns-audit-panel,
    .ns-preview-panel
):not(.ns-no-animated-border) > * {
    position: relative;
    z-index: 4;
}

/* Lite Selector popover — translucent, compact and aligned with the shell. */
@property --ns-selector-border-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}
html[data-theme] body.nsika-app-body .select-options-wrapper {
    --ns-selector-border-angle: 0deg;
    gap: 0;
    padding: 7px !important;
    border: 1px solid transparent !important;
    border-radius: 16px !important;
    color: var(--ns-text) !important;
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--ns-surface-raised) 84%, transparent),
            color-mix(in srgb, var(--ns-surface) 74%, transparent)
        ) padding-box,
        conic-gradient(
            from var(--ns-selector-border-angle),
            color-mix(in srgb, var(--ns-field-border) 78%, transparent) 0deg 250deg,
            var(--ns-brand-secondary) 285deg,
            var(--ns-accent) 320deg,
            color-mix(in srgb, var(--ns-field-border) 78%, transparent) 360deg
        ) border-box !important;
    box-shadow:
        0 20px 48px color-mix(in srgb, #000 30%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 8%, transparent) !important;
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
}
html[data-theme] body.nsika-app-body .select-options-wrapper:not(.expanded-top):not(.expanded-bottom) {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-width: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 0;
    pointer-events: none;
}
html[data-theme] body.nsika-app-body .select-options-wrapper:is(.expanded-top, .expanded-bottom) {
    display: flex !important;
    min-height: 0 !important;
    max-height: min(320px, calc(100dvh - 32px)) !important;
    flex-direction: column;
    animation: ns-selector-border-orbit 5.5s linear infinite;
}
html[data-theme] body.nsika-app-body .select-options-list {
    display: block !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 2px !important;
    color: var(--ns-text) !important;
    scrollbar-width: thin;
    scrollbar-color: var(--ns-field-border) transparent;
}
html[data-theme] body.nsika-app-body .select-options-list li.option {
    min-height: 42px;
    margin: 1px 0;
    padding: 7px 10px !important;
    border: 0 !important;
    border-radius: 10px !important;
    color: var(--ns-text) !important;
    background: transparent !important;
    font-size: 13px;
    font-weight: 650;
}
html[data-theme] body.nsika-app-body .select-options-list li.option:hover,
html[data-theme] body.nsika-app-body .select-options-list li.option.active {
    color: var(--ns-text) !important;
    background: color-mix(in srgb, var(--ns-accent) 13%, transparent) !important;
}
html[data-theme] body.nsika-app-body .select-options-list li.option small {
    color: var(--ns-text-muted) !important;
    font-size: 11px !important;
    font-weight: 550 !important;
}
html[data-theme] body.nsika-app-body .select-options-pagination {
    flex: 0 0 auto;
    border-color: color-mix(in srgb, var(--ns-border) 74%, transparent) !important;
    background: transparent !important;
}
html[data-theme] body.nsika-app-body .selector-status-shell {
    display: flex;
    width: 100%;
    min-height: 28px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 8px;
    color: var(--ns-text-muted);
    font-size: 10px;
    font-weight: 650;
}
html[data-theme] body.nsika-app-body .nsika-selector-quick-form-btn {
    flex: 0 0 auto;
    border-color: color-mix(in srgb, var(--ns-brand-secondary) 58%, var(--ns-border)) !important;
    border-radius: 10px !important;
    color: var(--ns-accent-strong) !important;
    background: color-mix(in srgb, var(--ns-accent) 9%, transparent) !important;
}
html[data-theme] body.nsika-app-body .nsika-selector-quick-form-btn:hover {
    border-color: var(--ns-brand-secondary) !important;
    background: color-mix(in srgb, var(--ns-accent) 16%, transparent) !important;
}
@keyframes ns-selector-border-orbit {
    to { --ns-selector-border-angle: 360deg; }
}

/* Quick-create modal and bottom drawer -------------------------------------- */
@keyframes ns-quick-backdrop-in {
    from { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
    to { opacity: 1; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}
@keyframes ns-quick-panel-in {
    from { opacity: 0; transform: translateY(18px) scale(.975); filter: blur(8px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes ns-quick-drawer-in {
    from { transform: translateY(105%) scale(.985); }
    to { transform: translateY(0) scale(1); }
}
.quick-form-modal-layer {
    position: fixed;
    inset: 0;
    z-index: 2147479000;
    display: grid;
    place-items: center;
    padding: 22px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease, visibility 220ms ease;
}
.quick-form-modal-layer.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
.quick-form-modal-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background:
        radial-gradient(circle at 22% 16%, color-mix(in srgb, var(--ns-accent) 18%, transparent), transparent 34%),
        color-mix(in srgb, #050510 58%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.quick-form-modal-layer.is-open .quick-form-modal-backdrop { animation: ns-quick-backdrop-in 220ms ease both; }
.quick-form-modal-panel {
    position: relative;
    display: flex;
    width: min(1120px, calc(100vw - 48px));
    max-height: min(88vh, 860px);
    min-height: 300px;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--ns-brand-secondary) 44%, var(--ns-border));
    border-radius: 22px;
    color: var(--ns-text);
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--ns-gold) 10%, transparent), transparent 34%),
        radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--ns-accent) 14%, transparent), transparent 42%),
        color-mix(in srgb, var(--ns-surface-raised) 92%, transparent);
    box-shadow: 0 28px 90px color-mix(in srgb, #000 46%, transparent), inset 0 1px 0 color-mix(in srgb, white 10%, transparent);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
}
.quick-form-modal-layer.is-open .quick-form-modal-panel { animation: ns-quick-panel-in 260ms cubic-bezier(.22, 1, .36, 1) both; }
.quick-form-modal-header,
.quick-form-drawer-header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--ns-border);
}
.quick-form-modal-header p,
.quick-form-drawer-header p { margin: 0 0 3px; color: var(--ns-accent-strong); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.quick-form-modal-header h2,
.quick-form-drawer-header h2 { margin: 0; color: var(--ns-text); font-size: 20px; font-weight: 760; text-transform: capitalize; }
.quick-form-modal-close,
.quick-form-drawer-close {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid var(--ns-border);
    border-radius: 12px;
    color: var(--ns-text-muted);
    background: color-mix(in srgb, var(--ns-surface-muted) 76%, transparent);
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.quick-form-modal-close:hover,
.quick-form-drawer-close:hover {
    color: var(--ns-text);
    border-color: var(--ns-brand-secondary);
    background: var(--ns-accent-soft);
    transform: translateY(-1px);
}
.quick-form-modal-body,
.quick-form-drawer-body {
    min-height: 0;
    flex: 1 1 auto;
    padding: 22px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.quick-form-modal-body .form-fields,
.quick-form-drawer-body .form-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quick-form-modal-body .ns-form-fields .form-field:not([fieldtype="table"]),
.quick-form-drawer-body .ns-form-fields .form-field:not([fieldtype="table"]) {
    border-color: transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.quick-form-modal-body .ns-form-fields .form-field:not([fieldtype="table"]):focus-within,
.quick-form-drawer-body .ns-form-fields .form-field:not([fieldtype="table"]):focus-within {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}
.quick-form-fields-loading { grid-column: 1 / -1; min-height: 180px; display: flex; align-items: center; justify-content: center; color: var(--ns-text-muted); }
.quick-form-fields-loading .dynamic-loader { margin: 0 auto; }
.quick-form-modal-body .form-field,
.quick-form-drawer-body .form-field { margin: 0 !important; color: var(--ns-text) !important; }
.quick-form-modal-body :where(label, .field-label, .modern-form-label),
.quick-form-drawer-body :where(label, .field-label, .modern-form-label) { color: var(--ns-text-muted) !important; }
.quick-form-modal-body :where(input, textarea, select, .select-field-wrapper, .nsika-date-picker, .nsika-time-picker, .nsika-year-picker),
.quick-form-drawer-body :where(input, textarea, select, .select-field-wrapper, .nsika-date-picker, .nsika-time-picker, .nsika-year-picker) {
    min-height: 44px !important;
    border: 1px solid var(--ns-field-border) !important;
    border-radius: 11px !important;
    color: var(--ns-text) !important;
    -webkit-text-fill-color: var(--ns-text) !important;
    background: color-mix(in srgb, var(--ns-surface-raised) 72%, transparent) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent) !important;
}
.quick-form-modal-body :where(input, textarea)::placeholder,
.quick-form-drawer-body :where(input, textarea)::placeholder {
    color: var(--ns-field-placeholder) !important;
    -webkit-text-fill-color: var(--ns-field-placeholder) !important;
    opacity: 1;
}
.quick-form-modal-body :where(input, textarea, select):focus,
.quick-form-modal-body .select-field-wrapper:focus-within,
.quick-form-drawer-body :where(input, textarea, select):focus,
.quick-form-drawer-body .select-field-wrapper:focus-within {
    outline: 0 !important;
    border-color: var(--ns-field-border) !important;
    background: color-mix(in srgb, var(--ns-surface-raised) 72%, transparent) !important;
    box-shadow: none !important;
}
.quick-form-modal-footer,
.quick-form-drawer-footer {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--ns-border);
    background: color-mix(in srgb, var(--ns-surface) 78%, transparent);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
}
.quick-form-modal-cancel,
.quick-form-modal-save,
.quick-form-drawer-cancel,
.quick-form-drawer-save {
    display: inline-flex;
    min-width: 132px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding-inline: 16px;
    border: 1px solid var(--ns-border);
    border-radius: 12px;
    color: var(--ns-text);
    background: var(--ns-surface-muted);
    font-size: 13px;
    font-weight: 720;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.quick-form-modal-cancel:hover,
.quick-form-drawer-cancel:hover { border-color: var(--ns-brand-secondary); background: var(--ns-accent-soft); transform: translateY(-1px); }
.quick-form-modal-save,
.quick-form-drawer-save { border-color: var(--ns-brand-secondary); color: var(--ns-brand-on-secondary); background: var(--ns-brand-secondary); box-shadow: var(--ns-brand-glow); }
.quick-form-modal-save:hover,
.quick-form-drawer-save:hover { transform: translateY(-1px); box-shadow: 0 16px 34px color-mix(in srgb, var(--ns-brand-secondary) 30%, transparent); }
.quick-form-modal-save:disabled,
.quick-form-drawer-save:disabled { cursor: wait; opacity: .72; }
.quick-form-modal-footer .material-symbols-outlined,
.quick-form-drawer-footer .material-symbols-outlined { font-size: 18px !important; }

/* Shared custom modal and document-email composer. */
html[data-theme] body.nsika-app-body .quick-form-modal-panel:has(.ns-custom-modal) {
    width: min(1240px, calc(100vw - 40px));
    max-width: 1240px;
    max-height: min(90vh, 920px);
    min-height: 0;
    overflow: hidden;
}
html[data-theme] body.nsika-app-body .ns-custom-modal {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 0;
    max-height: inherit;
    flex-direction: column;
    color: var(--ns-text);
    background: transparent;
}
.ns-custom-modal-header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 62px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ns-border);
}
.ns-custom-modal-title { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; color: var(--ns-text); font-size: 16px; font-weight: 760; }
.ns-custom-modal-title-content { display: inline-flex !important; min-width: 0; max-width: 100%; align-items: center; gap: 9px !important; flex-wrap: wrap; line-height: 1.35; }
.ns-custom-modal-title-content > span { display: inline-flex; align-items: center; white-space: nowrap; }
.ns-custom-modal-title-content > * + * { margin-left: 9px !important; }
.ns-custom-modal-title-content .material-symbols-outlined { color: var(--ns-accent-strong); font-size: 20px; }
.ns-custom-modal-title-content strong { max-width: min(360px, 55vw); padding: 4px 8px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ns-brand-secondary) 28%, var(--ns-border)); border-radius: 8px; color: var(--ns-accent-strong); background: var(--ns-accent-soft); text-overflow: ellipsis; white-space: nowrap; }
.ns-custom-modal-close { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid var(--ns-border); border-radius: 9px; color: var(--ns-text-muted); background: var(--ns-surface-muted); cursor: pointer; }
.ns-custom-modal-close:hover { color: var(--ns-text); border-color: var(--ns-brand-secondary); background: var(--ns-accent-soft); }
.ns-custom-modal-body { min-height: 0; flex: 1 1 auto; overflow: hidden; overscroll-behavior: contain; }
.ns-custom-modal-body > .content-wrapper { min-width: 0; }
.ns-custom-modal-footer { display: flex; flex: 0 0 auto; justify-content: flex-end; gap: 9px; padding: 13px 20px; border-top: 1px solid var(--ns-border); background: color-mix(in srgb, var(--ns-surface) 80%, transparent); }
.ns-custom-modal-cancel, .ns-custom-modal-confirm { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; border: 1px solid var(--ns-border); border-radius: 10px; color: var(--ns-text); background: var(--ns-surface-muted); font-size: 12px; font-weight: 720; cursor: pointer; transition: transform var(--ns-motion), border-color var(--ns-motion), background var(--ns-motion); }
.ns-custom-modal-cancel:hover { border-color: var(--ns-brand-secondary); background: var(--ns-accent-soft); transform: translateY(-1px); }
.ns-custom-modal-confirm { border-color: var(--ns-brand-secondary); color: var(--ns-brand-on-secondary); background: var(--ns-brand-secondary); box-shadow: var(--ns-brand-glow); }
.ns-custom-modal-confirm:hover { filter: brightness(1.06); transform: translateY(-1px); }
.ns-custom-modal-confirm:disabled { cursor: wait; opacity: .7; transform: none; }
.ns-custom-modal-footer .material-symbols-outlined { font-size: 17px; }

.ns-email-compose-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr); height: min(650px, calc(90vh - 125px)); min-height: 0; gap: 0; background: var(--ns-surface); }
.ns-email-preview-panel, .ns-email-compose-panel { min-width: 0; padding: 18px; }
.ns-email-preview-panel { display: flex; min-height: 0; flex-direction: column; border-right: 1px solid var(--ns-border); background: color-mix(in srgb, var(--ns-surface-muted) 58%, transparent); }
.ns-email-preview-toolbar { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; margin-bottom: 10px; color: var(--ns-text-muted); font-size: 11px; font-weight: 760; letter-spacing: .06em; text-transform: uppercase; }
.ns-email-preview-toolbar .material-symbols-outlined { color: var(--ns-accent-strong); font-size: 17px; }
.ns-email-preview-frame { min-height: 0; flex: 1 1 auto; overflow: auto; border: 1px solid var(--ns-border); border-radius: 12px; background: #fff; box-shadow: var(--ns-shadow-sm); }
.ns-email-preview-frame .print-wrapper { width: 100% !important; min-height: 100%; }
.ns-email-compose-panel { overflow: visible; background: color-mix(in srgb, var(--ns-surface-raised) 76%, transparent); }
.ns-email-compose-heading { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
.ns-email-compose-heading > .material-symbols-outlined { color: var(--ns-accent-strong); font-size: 22px; }
.ns-email-compose-heading h1 { margin: 0; color: var(--ns-text); font-size: 18px; font-weight: 780; line-height: 1.25; }
.ns-email-compose-heading p { margin: 4px 0 0; color: var(--ns-text-muted); font-size: 11px; line-height: 1.5; }
.ns-email-compose-panel .form-field { margin: 0 0 13px; color: var(--ns-text); }
.ns-email-compose-panel .form-field > label,
.ns-email-compose-panel .form-field .field-label { display: block; margin-bottom: 6px; color: var(--ns-text-muted) !important; font-size: 11px; font-weight: 720; }
.ns-email-compose-panel .form-field :is(input, textarea, select, .form-control) { width: 100%; min-height: 42px; border: 1px solid var(--ns-field-border) !important; border-radius: 10px; color: var(--ns-field-text) !important; background: var(--ns-field-bg) !important; box-shadow: none !important; }
.ns-email-compose-panel .form-field :is(input, textarea, select, .form-control):focus { border-color: var(--ns-brand-secondary) !important; outline: 0; box-shadow: var(--ns-focus) !important; }
.ns-email-compose-panel .form-field :is(input, textarea)::placeholder { color: var(--ns-field-placeholder) !important; }
.ns-email-compose-panel .nsika-rich-text-shell { min-height: 190px; }
.ns-email-compose-panel .nsika-rich-text-preview { color: var(--ns-text); background: var(--ns-field-bg); border-color: var(--ns-field-border); }
@media (max-width: 900px) {
    html[data-theme] body.nsika-app-body .quick-form-modal-panel:has(.ns-custom-modal) { width: min(700px, calc(100vw - 24px)); max-height: 92vh; }
    .ns-email-compose-grid { grid-template-columns: 1fr; }
    .ns-email-preview-panel { min-height: 280px; max-height: 360px; border-right: 0; border-bottom: 1px solid var(--ns-border); }
    .ns-email-compose-panel { padding-top: 16px; }
}
@media (max-width: 560px) {
    .ns-custom-modal-header { padding-inline: 14px; }
    .ns-custom-modal-footer { padding-inline: 14px; }
    .ns-email-preview-panel, .ns-email-compose-panel { padding: 14px; }
    .ns-custom-modal-title { font-size: 13px; }
    .ns-custom-modal-title-content { gap: 6px !important; }
    .ns-custom-modal-title-content > * + * { margin-left: 6px !important; }
    .ns-custom-modal-title-content strong { max-width: 45vw; }
    .ns-custom-modal-cancel, .ns-custom-modal-confirm { flex: 1 1 0; padding-inline: 8px; }
}

.quick-form-drawer-layer {
    position: absolute;
    inset: 0;
    z-index: 2147479000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease, visibility 220ms ease;
}
.quick-form-drawer-layer.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
.quick-form-drawer-layer.is-underlay {
    pointer-events: none;
}
.quick-form-drawer-layer.is-underlay .quick-form-drawer-backdrop {
    opacity: 0;
}
.quick-form-drawer-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: color-mix(in srgb, #050510 56%, transparent);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.quick-form-drawer-panel {
    position: relative;
    display: flex;
    width: min(920px, calc(100% - 28px));
    max-height: min(88%, 780px);
    min-height: 320px;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--ns-brand-secondary) 52%, var(--ns-border));
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    color: var(--ns-text);
    background:
        radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--ns-accent) 14%, transparent), transparent 38%),
        color-mix(in srgb, var(--ns-surface-raised) 94%, transparent);
    box-shadow: 0 -24px 70px color-mix(in srgb, #000 42%, transparent), inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    transform: translateY(105%);
    transition: transform 280ms cubic-bezier(.22, 1, .36, 1);
}
.quick-form-drawer-layer.is-open .quick-form-drawer-panel {
    transform: translateY(0);
    animation: ns-quick-drawer-in 280ms cubic-bezier(.22, 1, .36, 1) both;
}
.quick-form-drawer-layer.is-open.is-underlay .quick-form-drawer-panel {
    transform: translateY(-48px) scale(.955);
    filter: brightness(.82) saturate(.8);
}
.quick-form-drawer-layer.is-open[data-stack-depth="1"] .quick-form-drawer-panel {
    transform: translateY(-18px) scale(.985);
    filter: brightness(.94) saturate(.92);
}
.quick-form-drawer-layer.is-open[data-stack-depth="2"] .quick-form-drawer-panel {
    transform: translateY(-34px) scale(.97);
    filter: brightness(.88) saturate(.86);
}
.quick-form-drawer-layer.is-open[data-stack-depth="3"] .quick-form-drawer-panel,
.quick-form-drawer-layer.is-open[data-stack-depth="4"] .quick-form-drawer-panel {
    transform: translateY(-48px) scale(.955);
    filter: brightness(.82) saturate(.8);
}
.quick-form-drawer-handle { display: flex; height: 22px; flex: 0 0 22px; align-items: center; justify-content: center; }
.quick-form-drawer-handle span { width: 48px; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--ns-text-muted) 56%, transparent); }

.ns-link-field-control {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: stretch;
    gap: 8px;
}
.ns-link-field-control > :first-child { min-width: 0; flex: 1 1 auto; }
.ns-link-preview-button {
    display: grid;
    width: 45px;
    min-width: 45px;
    height: 45px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--ns-brand-secondary) 42%, var(--ns-border));
    border-radius: 8px;
    color: var(--ns-accent-strong);
    background: color-mix(in srgb, var(--ns-surface-raised) 76%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
    backdrop-filter: blur(14px) saturate(135%);
    -webkit-backdrop-filter: blur(14px) saturate(135%);
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.ns-link-preview-button:hover,
.ns-link-preview-button:focus-visible {
    border-color: var(--ns-brand-secondary);
    background: var(--ns-accent-soft);
    box-shadow: var(--ns-brand-glow);
    outline: 0;
    transform: translateY(-1px);
}
.ns-link-preview-button .material-symbols-outlined { font-size: 19px !important; }
.linked-record-preview-body { display: flex; flex-direction: column; gap: 18px; }
.linked-form-preview-body { display: flex; flex-direction: column; gap: 18px; }
.linked-form-preview-form { min-width: 0; }
.linked-form-preview-form .form-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.linked-form-preview-form :where(input, textarea, select, button:not(.table-pagination-btn), [contenteditable="true"]) { pointer-events: none; }
.linked-form-preview-form :where(.add-remove-action-btn, .table-customize-columns-action, .table-reset-columns-action, .table-row-actions) { display: none !important; }
.linked-record-preview-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--ns-brand-secondary) 36%, var(--ns-border));
    border-radius: 8px;
    background: color-mix(in srgb, var(--ns-accent-soft) 58%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 7%, transparent);
}
.linked-record-preview-summary > .material-symbols-outlined { color: var(--ns-accent-strong); font-size: 22px !important; }
.linked-record-preview-summary div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.linked-record-preview-summary span { color: var(--ns-text-muted); font-size: 11px; }
.linked-record-preview-summary strong { overflow-wrap: anywhere; color: var(--ns-text); font-size: 14px; }
.linked-record-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
    margin: 0;
}
.linked-record-preview-field {
    min-width: 0;
    padding: 12px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--ns-border) 72%, transparent);
}
.linked-record-preview-field dt { margin-bottom: 5px; color: var(--ns-text-muted); font-size: 11px; font-weight: 700; }
.linked-record-preview-field dd { margin: 0; overflow-wrap: anywhere; color: var(--ns-text); font-size: 13px; line-height: 1.5; }
.linked-record-preview-field pre {
    max-height: 210px;
    margin: 0;
    overflow: auto;
    white-space: pre-wrap;
    color: inherit;
    font: inherit;
}
.linked-record-preview-empty { color: var(--ns-text-muted); font-style: italic; }
.linked-record-preview-empty-state { grid-column: 1 / -1; padding: 34px 16px; color: var(--ns-text-muted); text-align: center; }
@media (max-width: 700px) {
    .quick-form-modal-layer { padding: 12px; align-items: end; }
    .quick-form-modal-panel { width: 100%; max-height: 92vh; border-radius: 18px; }
    .quick-form-drawer-panel { width: 100%; max-height: 92%; border-radius: 20px 20px 0 0; }
    .quick-form-modal-header, .quick-form-modal-body, .quick-form-modal-footer,
    .quick-form-drawer-header, .quick-form-drawer-body, .quick-form-drawer-footer { padding-inline: 16px; }
    .quick-form-modal-body .form-fields,
    .quick-form-drawer-body .form-fields { grid-template-columns: minmax(0, 1fr); }
    .quick-form-modal-cancel, .quick-form-modal-save,
    .quick-form-drawer-cancel, .quick-form-drawer-save { min-width: 0; flex: 1 1 0; }
    .linked-record-preview-grid { grid-template-columns: minmax(0, 1fr); }
    .linked-form-preview-form .form-fields { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme] body.nsika-app-body .ns-form-fields .form-field:not([fieldtype="table"]):focus-within::after { animation: none !important; background: var(--ns-brand-secondary); opacity: 1; }
    html[data-theme] body.nsika-app-body .select-options-wrapper:is(.expanded-top, .expanded-bottom) { animation: none !important; }
    .quick-form-modal-layer, .quick-form-modal-panel, .quick-form-drawer-layer, .quick-form-drawer-panel { transition: none !important; animation: none !important; }
}

@media (max-width: 760px) {
    .ns-form-completion-bar { align-items: flex-start; margin: 14px 14px 0; }
    .ns-form-top-actions .ns-form-icon-action { display: none; }
    .ns-form-top-actions .ns-form-document-toggle { display: inline-flex; }
    .ns-form-print-format { width: 170px; }
    .ns-form-document-popover { position: fixed; top: 76px; right: 16px; left: 16px; width: auto; }
    .ns-form-copilot-action { width: 46px; padding: 0; }
    .ns-form-copilot-action > span:not(.material-symbols-outlined) { display: none; }
    .ns-form-copilot-action .ns-form-chevron { display: none; }
    .ns-form-overview-body { padding: 18px 14px 20px; }
    .ns-form-heading-row { align-items: flex-start; }
    .ns-form-description { font-size: 14px; }
    .ns-form-primary-action { min-width: 46px; width: 46px; padding: 0; }
    .ns-form-primary-action > span:last-child { display: none; }
    .ns-form-fields { grid-template-columns: minmax(0, 1fr) !important; padding-top: 20px !important; }
    .ns-form-fields .form-field { grid-column: 1 / -1 !important; }
    .ns-form-overview.is-compact .ns-form-completion-bar { padding-inline: 12px; }
    .ns-form-overview.is-compact .ns-form-required-count { display: none; }
    .ns-form-actions-popover { position: fixed; top: 76px; right: 16px; left: 16px; width: auto; max-height: calc(100dvh - 96px); overflow-y: auto; }
    .ns-form-actions-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Final field-state authority: required status must remain visible in every theme/context. */
html[data-theme] body.nsika-app-body :is(.ns-form-fields, .quick-form-modal-body, .quick-form-drawer-body) :is(.form-field, .table-wrapper, .tc) .required-field-empty {
    border: 2px solid crimson !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, crimson 14%, transparent) !important;
}
html[data-theme] body.nsika-app-body :is(.ns-form-fields, .quick-form-modal-body, .quick-form-drawer-body) :is(.form-field, .table-wrapper, .tc) .required-field-complete {
    border: 2px solid #22a35a !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #22a35a 14%, transparent) !important;
}
html[data-theme] body.nsika-app-body :is(.ns-form-fields, .quick-form-modal-body, .quick-form-drawer-body) :is(.form-field, .table-wrapper, .tc) .required-field-empty:is(:focus, :focus-within) {
    border-color: crimson !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, crimson 18%, transparent) !important;
}
html[data-theme] body.nsika-app-body :is(.ns-form-fields, .quick-form-modal-body, .quick-form-drawer-body) :is(.form-field, .table-wrapper, .tc) .required-field-complete:is(:focus, :focus-within) {
    border-color: #22a35a !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, #22a35a 18%, transparent) !important;
}

/* Audit trail — top-level, theme-aware timeline overlay. */
.ns-audit-overlay {
    position: fixed !important;
    top: var(--ns-audit-top, 0) !important;
    left: var(--ns-audit-left, 0) !important;
    width: var(--ns-audit-width, 100vw) !important;
    height: var(--ns-audit-height, 100dvh) !important;
    z-index: 2147483000 !important;
    display: flex;
    box-sizing: border-box;
    align-items: stretch;
    justify-content: flex-end;
    padding: 12px;
    overflow: hidden;
    border-radius: inherit;
    isolation: isolate;
}
.ns-audit-overlay.hidden { display: none !important; }
.ns-audit-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: color-mix(in srgb, #050510 42%, transparent);
    backdrop-filter: blur(3px) saturate(106%);
    -webkit-backdrop-filter: blur(3px) saturate(106%);
}
.ns-audit-panel {
    position: relative;
    display: flex;
    width: min(540px, calc(100% - 12px));
    max-width: calc(100% - 12px);
    height: 100%;
    flex: 0 0 min(540px, calc(100% - 12px));
    flex-direction: column;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--ns-brand-secondary) 50%, var(--ns-border));
    border-radius: 22px;
    color: var(--ns-text);
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--ns-gold) 12%, transparent), transparent 34%),
        radial-gradient(circle at 0% 8%, color-mix(in srgb, var(--ns-accent) 12%, transparent), transparent 38%),
        color-mix(in srgb, var(--ns-surface-raised) 94%, transparent);
    box-shadow: -18px 0 56px color-mix(in srgb, #000 32%, transparent), inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
    backdrop-filter: blur(24px) saturate(138%);
    -webkit-backdrop-filter: blur(24px) saturate(138%);
    animation: ns-audit-arrive 260ms cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes ns-audit-arrive {
    from { opacity: 0; transform: translateX(32px) scale(.985); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}
.ns-audit-header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--ns-border);
}
.ns-audit-heading { display: flex; min-width: 0; align-items: center; gap: 14px; }
.ns-audit-heading-icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    flex: 0 0 48px;
    border: 1px solid color-mix(in srgb, var(--ns-brand-secondary) 55%, var(--ns-border));
    border-radius: 15px;
    color: var(--ns-accent-strong) !important;
    background: var(--ns-accent-soft);
}
.ns-audit-heading small { color: var(--ns-accent-strong); font-size: 10px; font-weight: 800; letter-spacing: .11em; }
.ns-audit-heading h2 { margin: 2px 0 1px; color: var(--ns-text); font-size: 22px; font-weight: 780; line-height: 1.15; }
.ns-audit-heading p { margin: 0; overflow: hidden; color: var(--ns-text-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ns-audit-close {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    flex: 0 0 40px;
    border: 1px solid var(--ns-border);
    border-radius: 12px;
    color: var(--ns-text-muted);
    background: color-mix(in srgb, var(--ns-surface-muted) 76%, transparent);
}
.ns-audit-close:hover { border-color: var(--ns-brand-secondary); color: var(--ns-text); background: var(--ns-accent-soft); }
.ns-audit-meta {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--ns-border);
    background: color-mix(in srgb, var(--ns-surface) 44%, transparent);
}
.ns-audit-meta > div {
    display: grid;
    min-width: 0;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: auto auto;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--ns-border) 76%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--ns-surface-raised) 62%, transparent);
}
.ns-audit-meta .material-symbols-outlined { grid-row: 1 / 3; align-self: center; color: var(--ns-accent-strong); font-size: 19px; }
.ns-audit-meta small { color: var(--ns-text-muted); font-size: 9px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.ns-audit-meta strong { overflow: hidden; color: var(--ns-text); font-size: 11px; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
.ns-audit-timeline {
    min-height: 0;
    flex: 1 1 auto;
    padding: 20px 22px 36px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ns-brand-secondary) 62%, transparent) transparent;
}
.ns-audit-day { position: relative; padding-bottom: 12px; }
.ns-audit-date {
    position: relative;
    z-index: 1;
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    gap: 7px;
    margin: 0 0 12px 24px;
    padding: 5px 11px;
    border: 1px solid var(--ns-border);
    border-radius: 999px;
    color: var(--ns-text-muted);
    background: color-mix(in srgb, var(--ns-surface-raised) 94%, transparent);
    box-shadow: var(--ns-shadow-sm);
    font-size: 10px;
    font-weight: 760;
}
.ns-audit-date .material-symbols-outlined { color: var(--ns-accent-strong); font-size: 15px; }
.ns-audit-events { position: relative; padding-left: 46px; }
.ns-audit-events::before {
    content: "";
    position: absolute;
    top: -15px;
    bottom: -30px;
    left: 15px;
    width: 1px;
    background: linear-gradient(to bottom, var(--ns-brand-secondary), color-mix(in srgb, var(--ns-border) 65%, transparent));
}
.ns-audit-event { position: relative; padding-bottom: 10px; }
.ns-audit-marker {
    position: absolute;
    top: 13px;
    left: -43px;
    z-index: 2;
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 3px solid var(--ns-surface-raised);
    border-radius: 50%;
    color: var(--ns-brand-on-secondary) !important;
    background: var(--ns-brand-secondary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ns-brand-secondary) 16%, transparent);
    font-size: 13px !important;
}
.ns-audit-event--changed .ns-audit-marker { color: var(--ns-accent-strong) !important; background: color-mix(in srgb, var(--ns-accent) 24%, var(--ns-surface-raised)); }
.ns-audit-event--approved .ns-audit-marker { color: #25a86b !important; background: color-mix(in srgb, #25a86b 18%, var(--ns-surface-raised)); }
.ns-audit-event--deleted .ns-audit-marker { color: #dc5262 !important; background: color-mix(in srgb, #dc5262 18%, var(--ns-surface-raised)); }
.ns-audit-card {
    display: block;
    min-height: 54px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--ns-border) 82%, transparent);
    border-radius: 13px;
    color: var(--ns-text);
    background: color-mix(in srgb, var(--ns-surface) 56%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
}
.ns-audit-card:hover { border-color: color-mix(in srgb, var(--ns-brand-secondary) 52%, var(--ns-border)); background: color-mix(in srgb, var(--ns-accent) 7%, var(--ns-surface-raised)); }
.ns-audit-card summary {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 13px;
    cursor: pointer;
    list-style: none;
}
.ns-audit-card summary::-webkit-details-marker { display: none; }
.ns-audit-card[open] .ns-audit-expand { transform: rotate(180deg); }
.ns-audit-card-copy { min-width: 0; font-size: 12px; line-height: 1.55; }
.ns-audit-card-copy strong { color: var(--ns-text); font-weight: 760; }
.ns-audit-card-copy span { color: var(--ns-accent-strong); font-weight: 680; }
.ns-audit-card-copy .ns-audit-action-tag {
    display: table;
    margin-bottom: 3px;
    padding: 2px 7px;
    border: 1px solid color-mix(in srgb, var(--ns-brand-secondary) 34%, var(--ns-border));
    border-radius: 999px;
    color: var(--ns-accent-strong);
    background: color-mix(in srgb, var(--ns-accent) 11%, transparent);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1.35;
    text-transform: uppercase;
}
.ns-audit-card-meta { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; }
.ns-audit-card time { display: inline-flex; min-width: max-content; align-items: center; gap: 5px; color: var(--ns-text-muted); font-size: 10px; }
.ns-audit-card time .material-symbols-outlined { font-size: 14px; }
.ns-audit-expand { color: var(--ns-text-muted); font-size: 18px !important; transition: transform 180ms ease; }
.ns-audit-change {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin: 0 13px 12px;
    padding: 10px;
    border-top: 1px solid var(--ns-border);
    border-radius: 0 0 9px 9px;
    background: color-mix(in srgb, var(--ns-surface-muted) 52%, transparent);
}
.ns-audit-change > .material-symbols-outlined { color: var(--ns-accent-strong); font-size: 15px; }
.ns-audit-change div { display: flex; min-width: 0; flex-direction: column; }
.ns-audit-change small { color: var(--ns-text-muted); font-size: 9px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.ns-audit-change :is(span, strong) { overflow-wrap: anywhere; color: var(--ns-text); font-size: 11px; font-weight: 680; }
.ns-audit-empty { display: flex; min-height: 320px; align-items: center; justify-content: center; flex-direction: column; color: var(--ns-text-muted); text-align: center; }
.ns-audit-empty > .material-symbols-outlined { margin-bottom: 12px; color: var(--ns-accent-strong); font-size: 46px; }
.ns-audit-empty strong { color: var(--ns-text); font-size: 15px; }
.ns-audit-empty p { margin: 4px 0 0; font-size: 12px; }
@media (max-width: 760px) {
    .ns-audit-overlay { padding: 0; }
    .ns-audit-panel { width: 100%; height: 100%; border-width: 0; border-radius: 0; }
    .ns-audit-header { padding: 16px; }
    .ns-audit-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 16px; }
    .ns-audit-timeline { padding: 20px 16px 32px; }
    .ns-audit-card summary { align-items: flex-start; flex-direction: column; gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
    .ns-audit-panel { animation: none; }
}

/* Document preview — form-scoped overlay above the sticky form header. */
.ns-preview-overlay {
    position: fixed !important;
    top: var(--ns-preview-top, 0) !important;
    left: var(--ns-preview-left, 0) !important;
    z-index: 2147483000 !important;
    display: flex;
    width: var(--ns-preview-width, 100vw) !important;
    height: var(--ns-preview-height, 100dvh) !important;
    box-sizing: border-box;
    align-items: stretch;
    justify-content: flex-end;
    padding: 12px;
    overflow: hidden;
    isolation: isolate;
}
.ns-preview-overlay.hidden { display: none !important; }
.ns-preview-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: color-mix(in srgb, #050510 46%, transparent);
    backdrop-filter: blur(4px) saturate(108%);
    -webkit-backdrop-filter: blur(4px) saturate(108%);
}
.ns-preview-panel {
    position: relative;
    display: flex;
    width: min(1040px, calc(100% - 12px));
    max-width: calc(100% - 12px);
    height: 100%;
    flex: 0 0 min(1040px, calc(100% - 12px));
    flex-direction: column;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--ns-brand-secondary) 48%, var(--ns-border));
    border-radius: 22px;
    color: var(--ns-text);
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--ns-gold) 10%, transparent), transparent 32%),
        color-mix(in srgb, var(--ns-surface-raised) 95%, transparent);
    box-shadow: -20px 0 64px color-mix(in srgb, #000 34%, transparent), inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
    backdrop-filter: blur(22px) saturate(136%);
    -webkit-backdrop-filter: blur(22px) saturate(136%);
    animation: ns-preview-arrive 260ms cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes ns-preview-arrive {
    from { opacity: 0; transform: translateX(30px) scale(.985); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}
.ns-preview-header {
    display: flex;
    min-height: 82px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--ns-border);
}
.ns-preview-heading { display: flex; min-width: 0; align-items: center; gap: 12px; }
.ns-preview-heading-icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    flex: 0 0 44px;
    border: 1px solid color-mix(in srgb, var(--ns-brand-secondary) 48%, var(--ns-border));
    border-radius: 14px;
    color: var(--ns-accent-strong) !important;
    background: var(--ns-accent-soft);
}
.ns-preview-heading small { color: var(--ns-accent-strong); font-size: 9px; font-weight: 800; letter-spacing: .11em; }
.ns-preview-heading h2 { margin: 1px 0; color: var(--ns-text); font-size: 18px; font-weight: 780; line-height: 1.2; }
.ns-preview-heading p { margin: 0; overflow: hidden; color: var(--ns-text-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ns-preview-close {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    flex: 0 0 40px;
    border: 1px solid var(--ns-border);
    border-radius: 12px;
    color: var(--ns-text-muted);
    background: var(--ns-surface-muted);
}
.ns-preview-close:hover { border-color: var(--ns-brand-secondary); color: var(--ns-text); background: var(--ns-accent-soft); }
.ns-preview-canvas {
    min-height: 0;
    flex: 1 1 auto;
    padding: 22px;
    overflow: auto;
    overscroll-behavior: contain;
    background:
        linear-gradient(45deg, color-mix(in srgb, var(--ns-border) 22%, transparent) 25%, transparent 25%) 0 0 / 18px 18px,
        linear-gradient(-45deg, color-mix(in srgb, var(--ns-border) 22%, transparent) 25%, transparent 25%) 0 9px / 18px 18px,
        color-mix(in srgb, var(--ns-surface-muted) 78%, transparent);
}
.ns-preview-canvas > .doc-preview-content {
    width: min(820px, 100%);
    min-height: calc(100% - 2px);
    margin: 0 auto;
    padding: clamp(18px, 4vw, 42px);
    overflow: visible;
    color: #20242b;
    background: #fff;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .24);
}
@media (max-width: 760px) {
    .ns-preview-overlay { padding: 0; }
    .ns-preview-panel { width: 100%; max-width: 100%; height: 100%; flex-basis: 100%; border-width: 0; border-radius: 0; }
    .ns-preview-header { min-height: 72px; padding: 12px 14px; }
    .ns-preview-canvas { padding: 10px; }
    .ns-preview-canvas > .doc-preview-content { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .ns-preview-panel { animation: none; }
}

/* Final document-tools authority: isolate the popover from header/button utilities. */
html[data-theme] body.nsika-app-body .ns-form-document-tools {
    position: relative !important;
    display: block !important;
    width: 64px !important;
    height: 46px !important;
    flex: 0 0 64px !important;
}
html[data-theme] body.nsika-app-body .ns-form-document-tools > .ns-form-document-toggle {
    position: relative !important;
    inset: auto !important;
    width: 64px !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    gap: 2px !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 999px !important;
}
html[data-theme] body.nsika-app-body .ns-form-document-toggle > .ns-form-document-chevron {
    color: var(--ns-text-muted) !important;
    font-size: 16px !important;
    transition: transform 180ms ease, color 180ms ease !important;
}
html[data-theme] body.nsika-app-body .ns-form-document-toggle.is-active > .ns-form-document-chevron {
    color: var(--ns-accent-strong) !important;
    transform: rotate(180deg);
}
html[data-theme] body.nsika-app-body .ns-form-document-popover {
    position: absolute !important;
    z-index: 2147482000 !important;
    top: 58px !important;
    right: -4px !important;
    bottom: auto !important;
    left: auto !important;
    display: block !important;
    width: 350px !important;
    min-width: 350px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(620px, calc(100dvh - 110px)) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 16px !important;
    overflow: visible !important;
    border: 1px solid color-mix(in srgb, var(--ns-brand-secondary) 46%, var(--ns-border)) !important;
    border-radius: 18px !important;
    color: var(--ns-text) !important;
    background-color: var(--ns-surface-raised) !important;
    background-image: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--ns-brand-secondary) 10%, transparent), transparent 38%) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
    backdrop-filter: blur(22px) saturate(136%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(136%) !important;
    text-align: left !important;
    white-space: normal !important;
}
html[data-theme] body.nsika-app-body .ns-form-document-popover[hidden] { display: none !important; }
html[data-theme] body.nsika-app-body .ns-form-document-popover * { box-sizing: border-box; }
html[data-theme] body.nsika-app-body .ns-form-document-popover::before {
    --ns-border-orbit-angle: 0deg;
    content: "";
    position: absolute;
    z-index: 3;
    inset: -1px;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: conic-gradient(
        from calc(315deg + var(--ns-border-orbit-angle)),
        transparent 0deg 272deg,
        color-mix(in srgb, var(--ns-brand-secondary) 40%, transparent) 292deg,
        var(--ns-brand-secondary) 318deg,
        var(--ns-accent) 338deg,
        transparent 360deg
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}
html[data-theme] body.nsika-app-body .ns-form-document-popover.is-open::before {
    opacity: 1;
    animation: ns-border-perimeter-orbit 2.8s linear infinite;
}
html[data-theme] body.nsika-app-body .ns-form-document-popover .ns-form-document-heading {
    display: flex !important;
    width: 100% !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 0 14px !important;
}
html[data-theme] body.nsika-app-body .ns-form-document-popover .ns-form-document-heading h3 {
    display: block !important;
    margin: 3px 0 0 !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
}
html[data-theme] body.nsika-app-body .ns-form-document-popover .ns-form-print-format {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    margin: 0 0 12px !important;
    padding: 0 10px !important;
    border: 1px solid var(--ns-border) !important;
    border-radius: 12px !important;
    background: var(--ns-surface-muted) !important;
}
html[data-theme] body.nsika-app-body .ns-form-document-popover .ns-form-document-actions {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
}
html[data-theme] body.nsika-app-body .ns-form-document-popover .ns-form-document-action {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 56px !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border: 1px solid var(--ns-border) !important;
    border-radius: 12px !important;
    color: var(--ns-text) !important;
    background: var(--ns-surface-muted) !important;
    text-align: left !important;
    white-space: normal !important;
}
html[data-theme] body.nsika-app-body .ns-form-document-popover .ns-form-document-action > span:last-child {
    display: flex !important;
    min-width: 0 !important;
    flex-direction: column !important;
    line-height: 1.35 !important;
}
html[data-theme] body.nsika-app-body .ns-form-document-popover .ns-form-document-action :is(strong, small) {
    display: block !important;
    width: 100% !important;
    white-space: normal !important;
}
@media (max-width: 760px) {
    html[data-theme] body.nsika-app-body .ns-form-document-popover {
        position: fixed !important;
        top: 76px !important;
        right: 16px !important;
        left: 16px !important;
        width: auto !important;
        min-width: 0 !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    html[data-theme] body.nsika-app-body .ns-form-document-popover.is-open::before {
        animation: none !important;
        background: var(--ns-brand-secondary);
    }
}

/* Shared form-popover border orbit. */
html[data-theme] body.nsika-app-body :is(
    .ns-form-details-popover,
    .ns-form-actions-popover,
    .ns-form-document-popover
) {
    isolation: isolate;
    border: 1px solid var(--ns-border) !important;
}
html[data-theme] body.nsika-app-body :is(
    .ns-form-details-popover,
    .ns-form-actions-popover,
    .ns-form-document-popover
)::before {
    --ns-border-orbit-angle: 0deg;
    content: "";
    position: absolute;
    z-index: 3;
    inset: -1px;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    opacity: 1;
    background: conic-gradient(
        from calc(315deg + var(--ns-border-orbit-angle)),
        transparent 0deg 272deg,
        color-mix(in srgb, var(--ns-brand-secondary) 40%, transparent) 292deg,
        var(--ns-brand-secondary) 318deg,
        var(--ns-accent) 338deg,
        transparent 360deg
    ) !important;
    transform: none;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: ns-border-perimeter-orbit 2.8s linear infinite !important;
}
html[data-theme] body.nsika-app-body :is(
    .ns-form-details-popover,
    .ns-form-actions-popover,
    .ns-form-document-popover
) > * {
    position: relative;
    z-index: 4;
}
html[data-theme] body.nsika-app-body .select-options-wrapper:is(.expanded-top, .expanded-bottom) {
    animation-duration: 2.8s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
}
@media (prefers-reduced-motion: reduce) {
    html[data-theme] body.nsika-app-body :is(
        .ns-form-details-popover,
        .ns-form-actions-popover,
        .ns-form-document-popover
    )::before {
        animation: none !important;
        background: var(--ns-brand-secondary) !important;
    }
}

/* Report headers that reuse the modern workspace/list toolbar shell. */
html[data-theme] body.nsika-app-body .report-wrapper.branch-list-panel .report-head-toolbar {
    min-height: 88px;
    padding: 12px 16px;
}

html[data-theme] body.nsika-app-body .report-wrapper.branch-list-panel .report-head-toolbar .branch-list-filters {
    flex: 1 1 460px;
}

html[data-theme] body.nsika-app-body .report-wrapper.branch-list-panel .report-head-toolbar .branch-list-toolbar-actions {
    flex-wrap: wrap;
}

html[data-theme] body.nsika-app-body .report-wrapper.branch-list-panel .report-head-scrollers {
    gap: 6px;
}

html[data-theme] body.nsika-app-body .report-wrapper.branch-list-panel .report-head-scrollers .branch-toolbar-chip {
    width: 36px;
    min-width: 36px;
    padding: 0 !important;
}

html[data-theme] body.nsika-app-body .report-wrapper.branch-list-panel .report-actions-wrapper {
    min-width: max-content;
}

html[data-theme] body.nsika-app-body .report-wrapper.branch-list-panel .report-actions-wrapper .dropdown {
    width: auto !important;
}

html[data-theme] body.nsika-app-body .report-wrapper.branch-list-panel #report-actions-btn,
html[data-theme] body.nsika-app-body .report-wrapper.branch-list-panel .report-action-option.btn {
    display: inline-flex !important;
    min-height: 36px !important;
    height: 36px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 14px !important;
    border: 1px solid color-mix(in srgb, var(--branch-board-accent) 46%, var(--branch-board-border)) !important;
    border-radius: 999px !important;
    color: var(--branch-board-text) !important;
    background: var(--branch-board-accent-soft) !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

html[data-theme] body.nsika-app-body .report-wrapper.branch-list-panel #report-actions-btn .material-symbols-outlined,
html[data-theme] body.nsika-app-body .report-wrapper.branch-list-panel .report-action-option.btn .material-symbols-outlined {
    color: currentColor !important;
    font-size: 18px !important;
}

/* Floating UI must paint above page, dashboard, modal, and sticky layers. */
html[data-theme] body.nsika-app-body :is(
    .dropdown-menu.show,
    .popover.show,
    .popover.in,
    .note-popover,
    .note-hint-popover,
    .tooltip.show,
    .tooltip.in,
    [role="tooltip"],
    .tippy-box,
    .select-options-wrapper.expanded-top,
    .select-options-wrapper.expanded-bottom,
    .plugin-dropdown.active,
    .plugin-dropdown.is-open,
    .flatpickr-calendar.open,
    .lightpick,
    .yearpicker-container:not(.hide),
    .select2-container--open,
    .choices.is-open .choices__list--dropdown
) {
    z-index: 2147483000 !important;
}

html[data-theme] body.nsika-app-body > :is(
    .dropdown-menu.show,
    .popover.show,
    .popover.in,
    .tooltip.show,
    .tooltip.in,
    [role="tooltip"],
    .flatpickr-calendar.open,
    .lightpick,
    .select2-container--open
) {
    z-index: 2147483000 !important;
}

html[data-theme] body.nsika-app-body :is(
    .field-wrapper,
    .select-field-wrapper,
    .table-row
):has(:is(
    .select-options-wrapper.expanded-top,
    .select-options-wrapper.expanded-bottom
)) {
    position: relative;
    z-index: 2147482999 !important;
    overflow: visible !important;
}

html[data-theme] body.nsika-app-body :is(
    .card,
    .box,
    .form-panel,
    .table-wrapper,
    .permission-card,
    .module-permission-card-wrapper
):has(:is(
    .select-options-wrapper.expanded-top,
    .select-options-wrapper.expanded-bottom
)) {
    overflow: visible !important;
}
/* Global module launcher */
.ns-module-launcher[hidden] { display: none; }
.ns-module-launcher {
    position: fixed;
    inset: 0;
    z-index: 15000;
    display: grid;
    place-items: start center;
    padding: clamp(72px, 11vh, 132px) 18px 32px;
    opacity: 0;
    transition: opacity var(--ns-motion, 180ms ease);
}
.ns-module-launcher.is-visible { opacity: 1; }
.ns-module-launcher-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    background: color-mix(in srgb, var(--ns-bg) 70%, transparent);
    backdrop-filter: blur(12px) saturate(.75);
    -webkit-backdrop-filter: blur(12px) saturate(.75);
    cursor: default;
}
.ns-module-launcher-dialog {
    position: relative;
    width: min(900px, 100%);
    max-height: min(690px, calc(100vh - 112px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--ns-accent) 28%, var(--ns-border));
    border-radius: 22px;
    background: color-mix(in srgb, var(--ns-surface-raised) 92%, transparent);
    color: var(--ns-text);
    box-shadow: var(--ns-shadow-lg), 0 0 42px color-mix(in srgb, var(--ns-accent) 18%, transparent);
    backdrop-filter: blur(26px) saturate(1.25);
    -webkit-backdrop-filter: blur(26px) saturate(1.25);
    transform: translateY(-10px) scale(.985);
    transition: transform var(--ns-motion, 180ms ease);
}
.ns-module-launcher.is-visible .ns-module-launcher-dialog { transform: translateY(0) scale(1); }
.ns-module-launcher-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 22px 14px;
}
.ns-module-launcher-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: var(--ns-text-muted);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.ns-module-launcher-header h2 { margin: 0; color: var(--ns-text); font-size: 18px; font-weight: 750; }
.ns-module-launcher-close { width: 34px; height: 34px; flex: 0 0 34px; }
.ns-module-launcher-close .material-symbols-outlined { font-size: 19px; }
.ns-module-launcher-search {
    min-height: 48px;
    margin: 0 22px 14px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--ns-border);
    border-radius: 13px;
    background: color-mix(in srgb, var(--ns-surface-muted) 78%, transparent);
    color: var(--ns-text-muted);
    transition: border-color var(--ns-motion), box-shadow var(--ns-motion), background var(--ns-motion);
}
.ns-module-launcher-search:focus-within {
    border-color: var(--ns-accent);
    background: color-mix(in srgb, var(--ns-surface-raised) 86%, transparent);
    box-shadow: 0 0 0 3px var(--ns-accent-soft), var(--ns-brand-glow);
}
.ns-module-launcher-search > .material-symbols-outlined { font-size: 21px; }
.ns-module-launcher-search input {
    min-width: 0;
    flex: 1;
    height: 46px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ns-text);
    font: inherit;
    font-size: 14px;
}
.ns-module-launcher-search input::placeholder { color: var(--ns-text-muted); }
.ns-module-launcher kbd {
    display: inline-flex;
    min-width: 22px;
    height: 21px;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 1px solid var(--ns-border);
    border-radius: 6px;
    background: var(--ns-surface-muted);
    color: var(--ns-text-muted);
    box-shadow: inset 0 -1px 0 var(--ns-border);
    font: 650 9px/1 inherit;
}
.ns-module-launcher-results {
    min-height: 94px;
    max-height: min(480px, calc(100vh - 315px));
    overflow: auto;
    padding: 0 14px 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--ns-border) transparent;
}
.ns-module-launcher-modules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 8px;
    padding: 1px 8px 14px;
    border-bottom: 1px solid var(--ns-border);
}
.ns-module-launcher-option {
    width: auto;
    min-width: 0;
    min-height: 86px;
    display: grid;
    place-items: center;
    align-content: center;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 10px 8px;
    border: 1px solid var(--ns-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--ns-surface-muted) 66%, transparent);
    color: var(--ns-text);
    text-align: center;
    cursor: pointer;
    transition: background var(--ns-motion), border-color var(--ns-motion), transform var(--ns-motion);
}
.ns-module-launcher-option:hover,
.ns-module-launcher-option:focus-visible,
.ns-module-launcher-option.is-active {
    outline: none;
    border-color: color-mix(in srgb, var(--ns-accent) 30%, var(--ns-border));
    background: var(--ns-accent-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ns-accent) 12%, transparent), 0 8px 24px color-mix(in srgb, var(--ns-accent) 16%, transparent);
}
.ns-module-launcher-option:active { transform: scale(.995); }
.ns-module-launcher-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--ns-accent) 24%, var(--ns-border));
    border-radius: 11px;
    background: color-mix(in srgb, var(--ns-accent-soft) 72%, var(--ns-surface));
    color: var(--ns-accent-strong);
    font-size: 21px;
}
.ns-module-launcher-option > strong {
    width: 100%;
    overflow: hidden;
    color: var(--ns-text);
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ns-module-launcher-card-panel { padding: 13px 8px 2px; }
.ns-module-launcher-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 28px;
    padding: 0 4px 7px;
}
.ns-module-launcher-card-heading > span { color: var(--ns-text); font-size: 11px; font-weight: 750; }
.ns-module-launcher-card-heading small { color: var(--ns-text-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.ns-module-launcher-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}
.ns-module-launcher-card {
    min-width: 0;
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: color-mix(in srgb, var(--ns-surface-muted) 64%, transparent);
    color: var(--ns-text);
    text-align: left;
    cursor: pointer;
    transition: background var(--ns-motion), border-color var(--ns-motion), transform var(--ns-motion);
}
.ns-module-launcher-card:hover,
.ns-module-launcher-card:focus-visible {
    outline: none;
    border-color: color-mix(in srgb, var(--ns-accent) 34%, var(--ns-border));
    background: var(--ns-accent-soft);
}
.ns-module-launcher-card:active { transform: scale(.995); }
.ns-module-launcher-card:disabled { cursor: not-allowed; opacity: .55; }
.ns-module-launcher-card > .material-symbols-outlined:first-child {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--ns-accent-soft);
    color: var(--ns-accent-strong);
    font-size: 18px;
}
.ns-module-launcher-card > span:nth-child(2) { min-width: 0; flex: 1; display: grid; gap: 2px; }
.ns-module-launcher-card strong,
.ns-module-launcher-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-module-launcher-card strong { color: var(--ns-text); font-size: 11px; }
.ns-module-launcher-card small { color: var(--ns-text-muted); font-size: 9px; }
.ns-module-launcher-card-arrow { color: var(--ns-text-muted); font-size: 16px; opacity: .55; }
.ns-module-launcher-no-cards {
    grid-column: 1 / -1;
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--ns-text-muted);
    font-size: 11px;
}
.ns-module-launcher-no-cards .material-symbols-outlined { color: var(--ns-accent-strong); font-size: 20px; }
.ns-module-launcher-copy { min-width: 0; flex: 1; display: grid; gap: 3px; }
.ns-module-launcher-copy strong { overflow: hidden; color: var(--ns-text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.ns-module-launcher-copy small { overflow: hidden; color: var(--ns-text-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ns-module-launcher-arrow { color: var(--ns-text-muted); font-size: 18px; opacity: 0; transform: translateX(-4px); transition: opacity var(--ns-motion), transform var(--ns-motion); }
.ns-module-launcher-option.is-active .ns-module-launcher-arrow { opacity: 1; transform: translateX(0); }
.ns-module-launcher-empty { min-height: 170px; display: grid; place-items: center; align-content: center; gap: 6px; color: var(--ns-text-muted); font-size: 12px; text-align: center; }
.ns-module-launcher-empty .material-symbols-outlined { margin-bottom: 4px; color: var(--ns-accent-strong); font-size: 28px; }
.ns-module-launcher-empty strong { color: var(--ns-text); font-size: 13px; }
.ns-module-launcher-footer {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: 8px 18px;
    border-top: 1px solid var(--ns-border);
    background: color-mix(in srgb, var(--ns-surface-muted) 68%, transparent);
    color: var(--ns-text-muted);
    font-size: 10px;
}
.ns-module-launcher-footer span { display: inline-flex; align-items: center; gap: 4px; }
body.ns-module-launcher-open { overflow: hidden !important; }
@media (max-width: 640px) {
    .ns-module-launcher { padding: 18px 10px; place-items: center; }
    .ns-module-launcher-dialog { max-height: calc(100dvh - 36px); border-radius: 18px; }
    .ns-module-launcher-header { padding: 16px 16px 12px; }
    .ns-module-launcher-search { margin: 0 16px 12px; }
    .ns-module-launcher-results { max-height: calc(100dvh - 240px); padding-inline: 9px; }
    .ns-module-launcher-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ns-module-launcher-cards { grid-template-columns: 1fr; }
    .ns-module-launcher-footer { justify-content: center; gap: 10px; }
    .ns-module-launcher-footer span:first-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ns-module-launcher, .ns-module-launcher-dialog, .ns-module-launcher-option { transition-duration: 1ms; }
}

/* Full-screen launcher composition mirrors the product reference. */
.ns-module-launcher {
    place-items: stretch;
    padding: 0;
}
.ns-module-launcher-backdrop {
    background:
        linear-gradient(
            138deg,
            color-mix(in srgb, var(--ns-brand-primary) 38%, #070811) 0%,
            color-mix(in srgb, var(--ns-bg) 12%, #080912) 43%,
            color-mix(in srgb, var(--ns-brand-secondary) 18%, #090a14) 72%,
            color-mix(in srgb, var(--ns-brand-primary) 30%, #06070f) 100%
        );
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.ns-module-launcher-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.ns-module-launcher-header {
    position: absolute;
    inset: 24px 28px auto auto;
    z-index: 2;
    padding: 0;
}
.ns-module-launcher-header > div { display: none; }
.ns-module-launcher-close {
    width: 42px;
    height: 42px;
    border-color: transparent;
    background: transparent;
    color: color-mix(in srgb, var(--ns-text) 72%, transparent);
}
.ns-module-launcher-close:hover,
.ns-module-launcher-close:focus-visible {
    border-color: var(--ns-border);
    background: color-mix(in srgb, var(--ns-surface-muted) 64%, transparent);
    color: var(--ns-text);
}
.ns-module-launcher-close .material-symbols-outlined { font-size: 29px; font-weight: 300; }
.ns-module-launcher-search {
    width: min(620px, calc(100vw - 40px));
    min-height: 68px;
    flex: 0 0 68px;
    margin: clamp(90px, 10vh, 118px) auto 46px;
    padding: 0 24px;
    border-color: color-mix(in srgb, var(--ns-accent) 15%, var(--ns-border));
    border-radius: 17px;
    background: color-mix(in srgb, var(--ns-surface-raised) 13%, #111322);
    box-shadow: 0 12px 35px rgba(0, 0, 0, .18);
}
.ns-module-launcher-search > .material-symbols-outlined,
.ns-module-launcher-search > kbd { display: none; }
.ns-module-launcher-search input {
    height: 66px;
    color: color-mix(in srgb, var(--ns-text) 88%, white);
    font-size: 18px;
    font-weight: 550;
}
.ns-module-launcher-search input::placeholder { color: color-mix(in srgb, var(--ns-text-muted) 80%, #a6a7b5); }
.ns-module-launcher-results {
    width: min(920px, calc(100vw - 48px));
    max-height: calc(100vh - 300px);
    min-height: 0;
    margin: 0 auto;
    padding: 0 0 110px;
}
.ns-module-launcher-modules {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 0 0 42px;
    border: 0;
}
.ns-module-launcher-option {
    min-height: 96px;
    gap: 9px;
    padding: 14px 12px;
    border-color: color-mix(in srgb, var(--ns-accent) 14%, rgba(255,255,255,.11));
    border-radius: 16px;
    background: color-mix(in srgb, var(--ns-surface-raised) 13%, #111322);
    box-shadow: 0 12px 28px rgba(0,0,0,.15);
}
.ns-module-launcher-option:hover,
.ns-module-launcher-option:focus-visible,
.ns-module-launcher-option.is-active {
    border-color: color-mix(in srgb, var(--ns-accent) 75%, white 8%);
    background: color-mix(in srgb, var(--ns-accent) 16%, #151424);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ns-accent) 18%, transparent), 0 15px 42px color-mix(in srgb, var(--ns-accent) 20%, transparent);
}
.ns-module-launcher-icon {
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ns-accent);
    font-size: 30px;
}
.ns-module-launcher-option > strong {
    color: color-mix(in srgb, var(--ns-text) 90%, white);
    font-size: 12px;
}
.ns-module-launcher-card-panel { padding: 0; }
.ns-module-launcher-card-heading { display: none; }
.ns-module-launcher-cards { grid-template-columns: 1fr; gap: 10px; }
.ns-module-launcher-card {
    min-height: 72px;
    padding: 11px 16px;
    border-color: color-mix(in srgb, var(--ns-accent) 12%, rgba(255,255,255,.1));
    border-radius: 16px;
    background: color-mix(in srgb, var(--ns-surface-raised) 13%, #111322);
}
.ns-module-launcher-card:hover,
.ns-module-launcher-card:focus-visible {
    border-color: color-mix(in srgb, var(--ns-accent) 65%, white 7%);
    background: color-mix(in srgb, var(--ns-accent) 13%, #151424);
}
.ns-module-launcher-card > .material-symbols-outlined:first-child {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    background: transparent;
    color: var(--ns-accent);
    font-size: 24px;
}
.ns-module-launcher-card > span:nth-child(2) { gap: 5px; }
.ns-module-launcher-card strong { color: color-mix(in srgb, var(--ns-text) 90%, white); font-size: 14px; }
.ns-module-launcher-card small { color: color-mix(in srgb, var(--ns-text-muted) 78%, #a6a7b5); font-size: 12px; }
.ns-module-launcher-card-arrow { display: none; }
.ns-module-launcher-footer {
    position: fixed;
    inset: auto 0 28px;
    min-height: 32px;
    justify-content: center;
    gap: 12px;
    padding: 0;
    border: 0;
    background: transparent;
    color: color-mix(in srgb, var(--ns-text-muted) 82%, #a6a7b5);
    font-size: 13px;
}
.ns-module-launcher-footer kbd {
    min-width: 36px;
    height: 30px;
    border-color: color-mix(in srgb, var(--ns-accent) 12%, rgba(255,255,255,.14));
    border-radius: 5px;
    background: color-mix(in srgb, var(--ns-surface-raised) 14%, #182035);
    color: color-mix(in srgb, var(--ns-text-muted) 88%, #b3b9c8);
    font-size: 11px;
}
@media (max-width: 900px) {
    .ns-module-launcher-search { margin-top: 76px; margin-bottom: 28px; }
    .ns-module-launcher-results { max-height: calc(100vh - 225px); }
    .ns-module-launcher-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-bottom: 34px; }
    .ns-module-launcher-option { min-height: 92px; }
}
@media (max-width: 640px) {
    .ns-module-launcher { padding: 0; place-items: stretch; }
    .ns-module-launcher-dialog { max-height: none; border-radius: 0; }
    .ns-module-launcher-header { inset: 14px 12px auto auto; }
    .ns-module-launcher-search { margin: 68px auto 22px; min-height: 56px; flex-basis: 56px; }
    .ns-module-launcher-search input { height: 54px; font-size: 15px; }
    .ns-module-launcher-results { width: calc(100vw - 24px); max-height: calc(100dvh - 175px); padding-bottom: 78px; }
    .ns-module-launcher-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ns-module-launcher-cards { grid-template-columns: 1fr; }
    .ns-module-launcher-option { min-height: 88px; }
    .ns-module-launcher-icon { font-size: 27px; }
    .ns-module-launcher-card { min-height: 68px; }
    .ns-module-launcher-footer { bottom: 14px; }
}

/* Launcher isolation: this is a viewport lock screen, independent of page shells. */
html > .ns-module-launcher {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-width: 100vw;
    min-height: 100dvh;
    z-index: 2147483000 !important;
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(
            138deg,
            color-mix(in srgb, var(--ns-brand-primary) 40%, #070811) 0%,
            color-mix(in srgb, var(--ns-bg) 10%, #080912) 43%,
            color-mix(in srgb, var(--ns-brand-secondary) 19%, #090a14) 72%,
            color-mix(in srgb, var(--ns-brand-primary) 32%, #06070f) 100%
        );
}
html > .ns-module-launcher .ns-module-launcher-backdrop {
    z-index: -1;
    background: transparent;
}
html > .ns-module-launcher .ns-module-launcher-dialog {
    position: absolute;
    inset: 0;
}
html > .ns-module-launcher .ns-module-launcher-results {
    width: min(1240px, calc(100vw - 48px));
}
html > .ns-module-launcher .ns-module-launcher-modules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 10px;
    overflow: visible;
    padding: 0 0 34px;
}
html > .ns-module-launcher .ns-module-launcher-option {
    width: 100%;
    min-width: 0;
    min-height: 82px;
    gap: 7px;
    padding: 10px 8px;
}
html > .ns-module-launcher .ns-module-launcher-icon { font-size: 27px; }
html > .ns-module-launcher .ns-module-launcher-option > strong { font-size: 11px; }
html > .ns-module-launcher .ns-module-launcher-card {
    min-height: 72px;
    padding: 11px 16px;
}
html > .ns-module-launcher .ns-module-launcher-card > .material-symbols-outlined:first-child { font-size: 24px; }
html > .ns-module-launcher .ns-module-launcher-card strong { font-size: 14px; }
html > .ns-module-launcher .ns-module-launcher-card small { font-size: 12px; }
@media (max-width: 900px) {
    html > .ns-module-launcher .ns-module-launcher-results { width: calc(100vw - 32px); }
    html > .ns-module-launcher .ns-module-launcher-modules { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px; padding-bottom: 26px; }
}
@media (max-width: 520px) {
    html > .ns-module-launcher .ns-module-launcher-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html > .ns-module-launcher .ns-module-launcher-option { min-height: 76px; }
}

/* Keep module selection stationary; only menu-card content scrolls. */
html > .ns-module-launcher .ns-module-launcher-results {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
html > .ns-module-launcher .ns-module-launcher-modules { flex: 0 0 auto; }
html > .ns-module-launcher .ns-module-launcher-card-panel {
    position: relative;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow: hidden;
    padding: 0;
}
html > .ns-module-launcher .ns-module-launcher-focus-banner {
    min-height: 66px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 11px 15px;
    border: 1px solid color-mix(in srgb, var(--ns-accent) 26%, var(--ns-border));
    border-radius: 14px;
    background: linear-gradient(105deg, color-mix(in srgb, var(--ns-accent) 13%, var(--ns-surface-raised)), color-mix(in srgb, var(--ns-surface-raised) 90%, transparent));
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 7%, transparent), 0 12px 30px rgba(0,0,0,.12);
}
html > .ns-module-launcher .ns-module-launcher-focus-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--ns-accent) 34%, var(--ns-border));
    border-radius: 11px;
    background: var(--ns-accent-soft);
    color: var(--ns-accent);
    font-size: 23px;
}
html > .ns-module-launcher .ns-module-launcher-focus-copy { min-width: 0; flex: 1; display: grid; gap: 3px; }
html > .ns-module-launcher .ns-module-launcher-focus-copy strong {
    overflow: hidden;
    color: var(--ns-text);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html > .ns-module-launcher .ns-module-launcher-focus-copy small {
    overflow: hidden;
    color: var(--ns-text-muted);
    font-size: 11px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html > .ns-module-launcher .ns-module-launcher-focus-count {
    flex: 0 0 auto;
    padding: 5px 9px;
    border: 1px solid color-mix(in srgb, var(--ns-accent) 24%, var(--ns-border));
    border-radius: 999px;
    background: var(--ns-accent-soft);
    color: var(--ns-accent-strong);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
}
html > .ns-module-launcher .ns-module-launcher-card-loading,
html > .ns-module-launcher .ns-module-launcher-card-error {
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: var(--ns-text-muted);
    font-size: 12px;
}
html > .ns-module-launcher .ns-module-launcher-card-loading .material-symbols-outlined {
    color: var(--ns-accent);
    animation: ns-module-launcher-spin 850ms linear infinite;
}
html > .ns-module-launcher .ns-module-launcher-card-error { flex-wrap: wrap; }
html > .ns-module-launcher .ns-module-launcher-card-error .material-symbols-outlined { color: var(--ns-accent); }
html > .ns-module-launcher .ns-module-launcher-card-error strong { color: var(--ns-text); }
html > .ns-module-launcher .ns-module-launcher-card-error button {
    min-height: 32px;
    padding: 5px 10px;
    border: 1px solid var(--ns-border);
    border-radius: 8px;
    background: var(--ns-surface-muted);
    color: var(--ns-text);
    font-size: 11px;
}
html > .ns-module-launcher .ns-module-launcher-card-error button:hover { border-color: var(--ns-accent); background: var(--ns-accent-soft); }
@keyframes ns-module-launcher-spin { to { transform: rotate(360deg); } }
html > .ns-module-launcher .ns-module-launcher-card-scroll {
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 5px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ns-accent) 42%, transparent) transparent;
}
html > .ns-module-launcher .ns-module-launcher-card-scroll::-webkit-scrollbar { width: 5px; }
html > .ns-module-launcher .ns-module-launcher-card-scroll::-webkit-scrollbar-track { background: transparent; }
html > .ns-module-launcher .ns-module-launcher-card-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--ns-accent) 42%, transparent);
}
html > .ns-module-launcher .ns-module-launcher-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
    gap: 10px;
    padding-bottom: 10px;
}
html > .ns-module-launcher .ns-module-launcher-card {
    min-height: 76px;
    padding: 10px 12px;
}
html > .ns-module-launcher .ns-module-launcher-card.is-expanded {
    border-color: var(--ns-accent);
    background: var(--ns-accent-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ns-accent) 20%, transparent);
}
html > .ns-module-launcher .ns-module-launcher-card-arrow {
    display: inline-block;
    transition: transform var(--ns-motion), color var(--ns-motion);
}
html > .ns-module-launcher .ns-module-launcher-card.is-expanded .ns-module-launcher-card-arrow {
    color: var(--ns-accent);
    transform: rotate(180deg);
}
html > .ns-module-launcher .ns-module-launcher-menu-drawer {
    position: absolute;
    inset: 78px 0 0 auto;
    z-index: 3;
    width: min(420px, 42%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--ns-accent) 44%, var(--ns-border));
    border-radius: 16px 0 0 16px;
    background: color-mix(in srgb, var(--ns-surface-raised) 94%, #0b0d18);
    box-shadow: -24px 0 58px rgba(0,0,0,.32), var(--ns-brand-glow);
    transform: translateX(105%);
    visibility: hidden;
    transition: transform 240ms cubic-bezier(.22, 1, .36, 1), visibility 240ms;
}
html > .ns-module-launcher .ns-module-launcher-menu-drawer.is-open {
    visibility: visible;
    transform: translateX(0);
}
html > .ns-module-launcher .ns-module-launcher-menu-drawer > header {
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--ns-border);
}
html > .ns-module-launcher .ns-module-launcher-menu-drawer > header > .material-symbols-outlined { color: var(--ns-accent); font-size: 23px; }
html > .ns-module-launcher .ns-module-launcher-menu-drawer > header > div { min-width: 0; flex: 1; display: grid; gap: 2px; }
html > .ns-module-launcher .ns-module-launcher-menu-drawer > header strong { overflow: hidden; color: var(--ns-text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
html > .ns-module-launcher .ns-module-launcher-menu-drawer > header small { color: var(--ns-text-muted); font-size: 10px; }
html > .ns-module-launcher .ns-module-launcher-menu-drawer > header button {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid var(--ns-border);
    border-radius: 9px;
    background: var(--ns-surface-muted);
    color: var(--ns-text-muted);
}
html > .ns-module-launcher .ns-module-launcher-menu-drawer > header button:hover { border-color: var(--ns-accent); color: var(--ns-text); }
html > .ns-module-launcher .ns-module-launcher-menu-drawer > header button .material-symbols-outlined { font-size: 17px; }
html > .ns-module-launcher .ns-module-launcher-menu-items { min-height: 0; flex: 1; overflow-y: auto; padding: 9px; }
html > .ns-module-launcher .ns-module-launcher-menu-items > button {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--ns-text);
    font-size: 11px;
    text-align: left;
}
html > .ns-module-launcher .ns-module-launcher-menu-items > button:hover,
html > .ns-module-launcher .ns-module-launcher-menu-items > button:focus-visible { outline: none; border-color: var(--ns-border); background: var(--ns-accent-soft); }
html > .ns-module-launcher .ns-module-launcher-menu-items > button > span:nth-child(2) { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html > .ns-module-launcher .ns-module-launcher-menu-items > button > .material-symbols-outlined { color: var(--ns-accent); font-size: 17px; }
@media (max-width: 900px) {
    html > .ns-module-launcher .ns-module-launcher-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html > .ns-module-launcher .ns-module-launcher-menu-drawer { width: min(390px, 68%); }
}
@media (max-width: 560px) {
    html > .ns-module-launcher .ns-module-launcher-cards { grid-template-columns: 1fr; }
    html > .ns-module-launcher .ns-module-launcher-menu-drawer { width: 94%; }
}

html > .ns-module-launcher :where(
    .ns-module-launcher-search,
    .ns-module-launcher-option.is-active,
    .ns-module-launcher-focus-banner,
    .ns-module-launcher-card.is-expanded,
    .ns-module-launcher-menu-drawer.is-open
) {
    --ns-launcher-border-width: 1px;
    --ns-launcher-border-speed: 3.8s;
    position: relative;
    isolation: isolate;
}
html > .ns-module-launcher :where(
    .ns-module-launcher-search,
    .ns-module-launcher-option.is-active,
    .ns-module-launcher-focus-banner,
    .ns-module-launcher-card.is-expanded,
    .ns-module-launcher-menu-drawer.is-open
)::after {
    --ns-border-orbit-angle: 0deg;
    content: "";
    position: absolute;
    z-index: 3;
    inset: calc(-1 * var(--ns-launcher-border-width));
    padding: var(--ns-launcher-border-width);
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(
        from calc(315deg + var(--ns-border-orbit-angle)),
        transparent 0deg 272deg,
        color-mix(in srgb, var(--ns-brand-secondary) 36%, transparent) 292deg,
        var(--ns-brand-secondary) 318deg,
        var(--ns-accent) 338deg,
        transparent 360deg
    );
    filter: drop-shadow(0 0 7px color-mix(in srgb, var(--ns-accent) 46%, transparent));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: ns-border-perimeter-orbit var(--ns-launcher-border-speed) linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    html > .ns-module-launcher :where(
        .ns-module-launcher-search,
        .ns-module-launcher-option.is-active,
        .ns-module-launcher-focus-banner,
        .ns-module-launcher-card.is-expanded,
        .ns-module-launcher-menu-drawer.is-open
    )::after {
        animation: none;
        background: var(--ns-brand-secondary);
    }
}

/* Keep the search and selected module in the same illuminated component family. */
html > .ns-module-launcher .ns-module-launcher-search {
    border-color: color-mix(in srgb, var(--ns-accent) 28%, var(--ns-border));
    background: linear-gradient(105deg,
        color-mix(in srgb, var(--ns-accent) 7%, #111322),
        color-mix(in srgb, var(--ns-surface-raised) 16%, #111322));
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 7%, transparent), 0 12px 35px rgba(0, 0, 0, .18);
}
html > .ns-module-launcher .ns-module-launcher-search > .material-symbols-outlined {
    display: inline-flex;
    flex: 0 0 auto;
    color: color-mix(in srgb, var(--ns-text-muted) 84%, var(--ns-accent));
    font-size: 22px;
    transition: color var(--ns-motion), transform var(--ns-motion);
}
html > .ns-module-launcher .ns-module-launcher-search:focus-within {
    border-color: color-mix(in srgb, var(--ns-accent) 54%, var(--ns-border));
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 9%, transparent), 0 0 24px color-mix(in srgb, var(--ns-accent) 15%, transparent);
}
html > .ns-module-launcher .ns-module-launcher-search:focus-within > .material-symbols-outlined {
    color: var(--ns-accent);
    transform: scale(1.04);
}
html > .ns-module-launcher .ns-module-launcher-search input,
html > .ns-module-launcher .ns-module-launcher-search input:focus,
html > .ns-module-launcher .ns-module-launcher-search input:focus-visible {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
html > .ns-module-launcher .ns-module-launcher-search input::-webkit-search-cancel-button {
    opacity: .65;
    cursor: pointer;
}
html > .ns-module-launcher .ns-module-launcher-option.is-active {
    border-color: color-mix(in srgb, var(--ns-accent) 46%, var(--ns-border));
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--ns-accent) 17%, #151424),
        color-mix(in srgb, var(--ns-accent) 7%, #111322));
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 8%, transparent), 0 13px 34px color-mix(in srgb, var(--ns-accent) 15%, transparent);
}

/* The launcher is a lock-screen composition, but still belongs to the active theme. */
html[data-theme="light"] > .ns-module-launcher .ns-module-launcher-backdrop {
    background:
        linear-gradient(138deg,
            color-mix(in srgb, var(--ns-bg) 90%, var(--ns-brand-primary)) 0%,
            color-mix(in srgb, var(--ns-surface) 94%, var(--ns-accent)) 44%,
            color-mix(in srgb, var(--ns-bg) 88%, var(--ns-brand-secondary)) 72%,
            color-mix(in srgb, var(--ns-surface-muted) 92%, var(--ns-brand-primary)) 100%);
}
html[data-theme="light"] > .ns-module-launcher .ns-module-launcher-search {
    border-color: color-mix(in srgb, var(--ns-accent) 28%, var(--ns-border));
    background: color-mix(in srgb, var(--ns-surface-raised) 94%, transparent);
    box-shadow: var(--ns-shadow-md);
}
html[data-theme="light"] > .ns-module-launcher .ns-module-launcher-search:focus-within {
    background: var(--ns-surface-raised);
    box-shadow: var(--ns-shadow-md), 0 0 22px color-mix(in srgb, var(--ns-accent) 13%, transparent);
}
html[data-theme="light"] > .ns-module-launcher .ns-module-launcher-search input {
    color: var(--ns-text);
}
html[data-theme="light"] > .ns-module-launcher .ns-module-launcher-search input::placeholder {
    color: var(--ns-text-muted);
}
html[data-theme="light"] > .ns-module-launcher .ns-module-launcher-option,
html[data-theme="light"] > .ns-module-launcher .ns-module-launcher-card {
    border-color: color-mix(in srgb, var(--ns-accent) 16%, var(--ns-border));
    background: color-mix(in srgb, var(--ns-surface-raised) 88%, transparent);
    box-shadow: var(--ns-shadow-sm);
}
html[data-theme="light"] > .ns-module-launcher .ns-module-launcher-option:hover,
html[data-theme="light"] > .ns-module-launcher .ns-module-launcher-option:focus-visible,
html[data-theme="light"] > .ns-module-launcher .ns-module-launcher-option.is-active,
html[data-theme="light"] > .ns-module-launcher .ns-module-launcher-card:hover,
html[data-theme="light"] > .ns-module-launcher .ns-module-launcher-card:focus-visible,
html[data-theme="light"] > .ns-module-launcher .ns-module-launcher-card.is-expanded {
    border-color: color-mix(in srgb, var(--ns-accent) 48%, var(--ns-border));
    background: color-mix(in srgb, var(--ns-accent-soft) 58%, var(--ns-surface-raised));
    box-shadow: var(--ns-shadow-md), 0 0 24px color-mix(in srgb, var(--ns-accent) 10%, transparent);
}
html[data-theme="light"] > .ns-module-launcher .ns-module-launcher-option > strong,
html[data-theme="light"] > .ns-module-launcher .ns-module-launcher-card strong {
    color: var(--ns-text);
}
html[data-theme="light"] > .ns-module-launcher .ns-module-launcher-card small,
html[data-theme="light"] > .ns-module-launcher .ns-module-launcher-footer {
    color: var(--ns-text-muted);
}
html[data-theme="light"] > .ns-module-launcher .ns-module-launcher-focus-banner {
    border-color: color-mix(in srgb, var(--ns-accent) 24%, var(--ns-border));
    background: linear-gradient(105deg,
        color-mix(in srgb, var(--ns-accent-soft) 42%, var(--ns-surface-raised)),
        color-mix(in srgb, var(--ns-surface-raised) 94%, transparent));
    box-shadow: var(--ns-shadow-sm);
}
html[data-theme="light"] > .ns-module-launcher .ns-module-launcher-menu-drawer {
    border-color: color-mix(in srgb, var(--ns-accent) 34%, var(--ns-border));
    background: color-mix(in srgb, var(--ns-surface-raised) 96%, transparent);
    box-shadow: var(--ns-shadow-lg), -20px 0 44px color-mix(in srgb, var(--ns-text) 10%, transparent);
}
html[data-theme="light"] > .ns-module-launcher .ns-module-launcher-close {
    color: var(--ns-text-muted);
}

/* Compact keyboard legend for the launcher lock screen. */
html > .ns-module-launcher .ns-module-launcher-footer {
    inset: auto auto 22px 50%;
    width: max-content;
    max-width: calc(100vw - 24px);
    min-height: 42px;
    gap: 16px;
    padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--ns-accent) 14%, var(--ns-border));
    border-radius: 12px;
    background: color-mix(in srgb, var(--ns-surface-raised) 28%, transparent);
    color: color-mix(in srgb, var(--ns-text-muted) 84%, var(--ns-text));
    box-shadow: 0 10px 30px color-mix(in srgb, var(--ns-bg) 24%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transform: translateX(-50%);
}
html > .ns-module-launcher .ns-module-launcher-footer > span {
    gap: 6px;
    color: inherit;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
html > .ns-module-launcher .ns-module-launcher-footer > span + span {
    padding-left: 16px;
    border-left: 1px solid color-mix(in srgb, var(--ns-border) 72%, transparent);
}
html > .ns-module-launcher .ns-module-launcher-footer kbd {
    min-width: 27px;
    height: 27px;
    padding: 0 6px;
    border-color: color-mix(in srgb, var(--ns-accent) 18%, var(--ns-border));
    border-radius: 7px;
    background: color-mix(in srgb, var(--ns-surface-muted) 72%, transparent);
    color: inherit;
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--ns-text-muted) 28%, transparent);
    font-size: 10px;
    font-weight: 700;
}
html[data-theme="light"] > .ns-module-launcher .ns-module-launcher-footer {
    background: color-mix(in srgb, var(--ns-surface-raised) 86%, transparent);
    color: var(--ns-text-muted);
    box-shadow: var(--ns-shadow-sm);
}
html[data-theme="light"] > .ns-module-launcher .ns-module-launcher-footer kbd {
    background: var(--ns-surface-muted);
    color: var(--ns-text);
}
@media (max-width: 640px) {
    html > .ns-module-launcher .ns-module-launcher-footer {
        bottom: 12px;
        gap: 10px;
    }
    html > .ns-module-launcher .ns-module-launcher-footer > span + span {
        padding-left: 10px;
    }
}

/* Report compatibility boundary: replace legacy table colors and fixed heights. */
.ns-report-workspace {
    color: var(--ns-text);
    background: var(--ns-surface);
    min-width: 0;
}
.ns-report-header { margin-bottom: 16px; }
.ns-report-header .ns-report-title { font-size: 22px; overflow-wrap: anywhere; }
.ns-report-count { color: var(--ns-text-muted); font-size: 12px; white-space: nowrap; }
.ns-report-toolbar, .ns-report-toolbar-group, .ns-report-workspace .report-actions-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.ns-report-toolbar { justify-content: space-between; padding: 8px 16px 16px; }
.ns-report-toolbar-end { margin-left: auto; }
.ns-report-button, .ns-report-search {
    min-height: 36px;
    border: 1px solid var(--ns-border);
    border-radius: 6px;
    background: var(--ns-surface-muted);
    color: var(--ns-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 10px;
    font-size: 12px;
    box-shadow: var(--ns-shadow-sm);
}
.ns-report-button { cursor: pointer; transition: background var(--ns-motion); }
.ns-report-button .material-symbols-outlined, .ns-report-search .material-symbols-outlined { font-size: 18px; }
.ns-report-button:hover, .ns-report-button[aria-expanded="true"] { background: var(--ns-accent-soft); border-color: var(--ns-accent); }
.ns-report-button:active { background: var(--ns-surface-raised); }
.ns-report-button:disabled { opacity: .5; cursor: wait; }
.ns-report-button:focus-visible, .ns-report-search:focus-within, .ns-report-table-scroll:focus-visible {
    outline: 2px solid var(--ns-accent);
    outline-offset: 2px;
}
.ns-report-search { width: 220px; max-width: 100%; color: var(--ns-text-muted); }
.ns-report-search-input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--ns-text); outline: none; font-size: 12px; }
.ns-report-search-input::placeholder { color: var(--ns-text-muted); }
.ns-report-workspace .ns-report-content { padding: 0 16px 16px; overflow: auto; background: transparent; box-shadow: none; }
.ns-report-workspace .report-filters-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    padding: 12px 0 20px;
    border: 0;
    background: transparent;
}
.ns-report-workspace .report-filters-wrapper.hidden { display: none; }
.ns-report-table-scroll { width: 100%; overflow: auto; }
.ns-report-workspace .table-container { height: auto; border: 0 !important; border-radius: 6px; }
.ns-report-workspace .table-body { height: auto !important; min-height: 0; overflow: visible; width: max-content; min-width: 100%; }
.ns-report-workspace .table-container > div:has(> .header-row) { height: auto; }
.ns-report-workspace .table-body:has(> .grid) { width: 100%; }
.ns-report-workspace .table-row {
    height: auto;
    min-height: 48px;
    animation: none;
    transition: background var(--ns-motion);
    background: transparent;
    border-bottom: 1px solid var(--ns-border);
}
.ns-report-workspace .table-row:not(.grid) { display: flex; }
.ns-report-workspace .table-row:hover { background: var(--ns-accent-soft); }
.ns-report-workspace .header-row { background: var(--ns-surface-muted); color: var(--ns-text-muted); min-height: 44px; }
.ns-report-workspace .table-cell {
    border: 0 !important;
    height: auto;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 13px;
    text-align: left;
    color: inherit;
}
.ns-report-workspace .header-cell, .ns-report-workspace .header-cell .text-15 { font-size: 12px; font-weight: 600; }
.ns-report-workspace .table-row:not(.grid) .table-cell:not(:first-child) { flex: 0 0 auto; }
.ns-report-workspace .table-cell.figure { font-variant-numeric: tabular-nums; }
.ns-report-workspace .table-row:not(.grid) .table-cell:first-child { flex: 0 0 64px; }
.ns-report-workspace .report-loader { width: 100%; min-height: 220px; color: var(--ns-text-muted); }
.ns-report-workspace .report-loader small { color: var(--ns-text-muted); }
.ns-report-workspace .ns-report-search-hidden { display: none !important; }

/* HR attendance operations ------------------------------------------------ */
.ns-hr-checkin-row {
    min-height: 44px;
    padding: 8px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--ns-border);
}
.ns-hr-checkin-icon {
    margin-right: 8px;
    color: var(--ns-accent-strong);
    font-size: 17px;
}
.ns-hr-checkin-label {
    min-width: 0;
    overflow: hidden;
    color: var(--ns-text);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ns-hr-checkin-count {
    min-width: 32px;
    height: 24px;
    margin-left: 12px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ns-border);
    border-radius: 6px;
    background: var(--ns-surface-muted);
    color: var(--ns-text);
    font-size: 12px;
    font-weight: 700;
}
.ns-hr-attendance-card {
    width: 11rem;
    height: 13rem;
    margin: 8px;
    padding: 12px;
    overflow: hidden;
    border: 1px solid var(--ns-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--ns-surface-raised) 90%, transparent);
    color: var(--ns-text);
    box-shadow: var(--ns-shadow-sm);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--ns-motion), background var(--ns-motion), box-shadow var(--ns-motion), transform var(--ns-motion);
}
.ns-hr-attendance-card:hover {
    border-color: color-mix(in srgb, var(--ns-accent) 42%, var(--ns-border));
    background: color-mix(in srgb, var(--ns-accent-soft) 42%, var(--ns-surface-raised));
    box-shadow: var(--ns-shadow-md);
}
.ns-hr-attendance-card:active { transform: translateY(1px); }
.ns-hr-attendance-card:focus-visible {
    outline: none;
    box-shadow: var(--ns-focus), var(--ns-shadow-md);
}
.ns-hr-attendance-card:disabled {
    cursor: wait;
    opacity: .62;
}
.ns-hr-attendance-card__top {
    height: 28px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.ns-hr-attendance-card__employee {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    color: var(--ns-text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}
.ns-hr-attendance-card__employee .material-symbols-outlined { font-size: 15px; }
.ns-hr-attendance-card__status {
    max-width: 68px;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--ns-accent) 28%, var(--ns-border));
    border-radius: 6px;
    background: var(--ns-accent-soft);
    color: var(--ns-accent-strong);
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ns-hr-attendance-card__avatar-wrap {
    margin-top: 12px;
    display: flex;
    justify-content: center;
}
.ns-hr-attendance-card__avatar {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ns-border);
    border-radius: 8px;
    background: var(--ns-surface-muted);
    color: var(--ns-text);
    font-size: 18px;
    font-weight: 800;
}
.ns-hr-attendance-card__name-wrap { height: 42px; margin-top: 12px; }
.ns-hr-attendance-card__name {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--ns-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.ns-hr-attendance-card__role-wrap { height: 34px; margin-top: 8px; }
.ns-hr-attendance-card__role {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--ns-text-muted);
    font-size: 11px;
    line-height: 16px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.ns-hr-attendance-card__department {
    min-width: 0;
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--ns-text-muted);
    font-size: 11px;
}
.ns-hr-attendance-card__department .material-symbols-outlined { font-size: 15px; }
.ns-hr-attendance-card__department span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ns-hr-attendance-card__action {
    margin-top: 8px;
    padding-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--ns-border);
    color: var(--ns-accent-strong);
    font-size: 11px;
    font-weight: 700;
}
.ns-hr-attendance-card__action .material-symbols-outlined { font-size: 16px; }
@media (max-width: 640px) {
    .ns-report-toolbar { align-items: stretch; padding-inline: 8px; }
    .ns-report-toolbar-end { width: 100%; margin-left: 0; }
    .ns-report-search { width: 100%; }
    .ns-report-header { flex-wrap: wrap; gap: 8px; }
    .ns-report-workspace .ns-report-content { padding-inline: 8px; }
}