:root {
            --body-bg: #eef3f8;
            --body-accent: #d7e3f2;
            --panel-bg: #ffffff;
            --panel-soft: #f5f8fc;
            --panel-alt-bg: #edf4fb;
            --surface-raised: #ffffff;
            --surface-border: #d7e1ec;
            --surface-border-strong: #7aa2ee;
            --text-primary: #0f172a;
            --text-muted: #6b7a90;
            --text-soft: #94a3b8;
            --primary: #2459c5;
            --primary-hover: #1948a8;
            --primary-soft: #e1ebff;
            --hero-bg: linear-gradient(160deg, #0f1722 0%, #163258 52%, #0b1017 100%);
            --hero-orb: rgba(255, 255, 255, .06);
            --hero-orb-soft: rgba(255, 255, 255, .04);
            --success-bg: #ecfdf3;
            --success-border: #a7f3d0;
            --success-text: #166534;
            --warning-bg: #fff7ed;
            --warning-border: #fdba74;
            --warning-text: #c2410c;
            --danger-bg: #fef2f2;
            --danger-border: #fca5a5;
            --danger-text: #dc2626;
            --shadow: 0 20px 48px rgba(15, 23, 42, .12);
            --shadow-soft: 0 18px 42px rgba(15, 23, 42, .08);
            --loader-ring: #e2e8f0;
        }

        html[data-theme="dark"] {
            color-scheme: dark;
            --body-bg: #0f1722;
            --body-accent: #111a24;
            --panel-bg: #141b24;
            --panel-soft: #1a2330;
            --panel-alt-bg: #101720;
            --surface-raised: #1d2733;
            --surface-border: #2d3746;
            --surface-border-strong: #5f7aa6;
            --text-primary: #eef2f7;
            --text-muted: #7f8ca1;
            --text-soft: #b3bece;
            --primary: #6b88b6;
            --primary-hover: #87a4d3;
            --primary-soft: rgba(107, 136, 182, .18);
            --hero-bg: linear-gradient(160deg, #0f1722 0%, #152032 52%, #0b1017 100%);
            --hero-orb: rgba(148, 163, 184, .06);
            --hero-orb-soft: rgba(148, 163, 184, .04);
            --success-bg: rgba(22, 101, 52, .24);
            --success-border: rgba(113, 197, 146, .30);
            --success-text: #b7efc9;
            --warning-bg: rgba(120, 87, 38, .26);
            --warning-border: rgba(176, 142, 99, .28);
            --warning-text: #e7d0a0;
            --danger-bg: rgba(106, 50, 50, .26);
            --danger-border: rgba(176, 99, 99, .28);
            --danger-text: #f0c1c1;
            --shadow: 0 22px 54px rgba(0, 0, 0, .34);
            --shadow-soft: 0 18px 42px rgba(0, 0, 0, .26);
            --loader-ring: #2d3746;
        }

        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

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

        body.shell-body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            background:
                radial-gradient(circle at 12% 18%, rgba(37, 99, 235, 0.12), transparent 28%),
                radial-gradient(circle at 88% 82%, rgba(59, 130, 246, 0.08), transparent 24%),
                linear-gradient(180deg, var(--body-bg) 0%, color-mix(in srgb, var(--body-bg) 92%, var(--body-accent)) 100%);
            color: var(--text-primary);
        }

        html[data-theme="light"] body.shell-body {
            background:
                radial-gradient(circle at top left, rgba(36, 89, 197, .12), transparent 20%),
                radial-gradient(circle at 92% 16%, rgba(125, 162, 238, .12), transparent 18%),
                linear-gradient(180deg, #edf2f7 0%, #f7f9fc 38%, #eef3f8 100%);
        }

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

        img {
            max-width: 100%;
            display: block;
        }

        button {
            font: inherit;
        }

        .theme-toggle {
            position: fixed;
            top: 1.25rem;
            right: 1.25rem;
            width: 46px;
            height: 46px;
            border: 1px solid var(--surface-border);
            border-radius: 999px;
            background: color-mix(in srgb, var(--panel-bg) 84%, transparent);
            color: var(--text-primary);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            cursor: pointer;
            box-shadow: var(--shadow);
            backdrop-filter: blur(14px);
            transition: transform .18s ease, border-color .18s ease, background .18s ease;
            z-index: 40;
        }

        .theme-toggle:hover {
            transform: translateY(-1px);
            border-color: var(--primary);
        }

        .auth-shell {
            min-height: 100vh;
            display: flex;
        }

        .left-panel {
            flex: 0 0 48%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: var(--panel-alt-bg);
            padding: 3rem 4rem;
        }

        .logo-circle {
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.25rem;
        }

        .logo-circle img {
            width: 80px;
            height: 80px;
        }

        .login-title {
            font-size: 1.6rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 2rem;
        }

        .login-form {
            width: 100%;
            max-width: 360px;
        }

        .form-group {
            width: 100%;
            margin-bottom: 1rem;
        }

        .input-wrap {
            position: relative;
            display: flex;
            align-items: center;
            background: var(--panel-bg);
            border: 1.5px solid var(--surface-border);
            border-radius: 8px;
            transition: border-color .2s, box-shadow .2s;
        }

        .input-wrap:focus-within {
            border-color: var(--primary);
            box-shadow: none;
        }

        .input-wrap .icon-left {
            padding: 0 .75rem;
            color: var(--text-muted);
            font-size: .9rem;
            pointer-events: none;
        }

        .input-wrap input {
            flex: 1;
            border: none;
            background: transparent;
            padding: .75rem .5rem .75rem 0;
            font-size: .95rem;
            color: var(--text-primary);
            outline: none;
            box-shadow: none;
        }

        .input-wrap input:focus {
            border: none;
            box-shadow: none;
        }

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

        .input-wrap .toggle-pw {
            padding: 0 .75rem;
            background: none;
            border: none;
            cursor: pointer;
            color: var(--text-muted);
            font-size: .9rem;
            transition: color .2s;
        }

        .input-wrap .toggle-pw:hover {
            color: var(--text-soft);
        }

        #errorMsg,
        #successMsg {
            font-size: .85rem;
            border-radius: 7px;
            padding: .65rem .9rem;
            margin-bottom: .75rem;
            width: 100%;
        }

        #errorMsg {
            background: var(--danger-bg);
            border: 1px solid var(--danger-border);
            color: var(--danger-text);
        }

        #successMsg {
            background: var(--success-bg);
            border: 1px solid var(--success-border);
            color: var(--success-text);
        }

        .btn-login {
            width: 100%;
            padding: .8rem;
            background: var(--primary);
            color: #fff;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: background .2s, transform .1s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: .5rem;
            margin-top: .5rem;
        }

        .btn-login:hover:not(:disabled) {
            background: var(--primary-hover);
        }

        .btn-login:active:not(:disabled) {
            transform: scale(.98);
        }

        .btn-login:disabled {
            opacity: .65;
            cursor: not-allowed;
        }

        .footer-note {
            margin-top: 2rem;
            font-size: .78rem;
            color: var(--text-muted);
            text-align: center;
        }

        #login-loader {
            position: fixed;
            inset: 0;
            background: color-mix(in srgb, var(--body-bg) 92%, transparent);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            opacity: 0;
            visibility: hidden;
            transition: opacity .35s ease, visibility .35s ease;
        }

        #login-loader.visible {
            opacity: 1;
            visibility: visible;
        }

        #login-loader img {
            width: 80px;
            height: 80px;
            margin-bottom: 1.75rem;
            animation: ll-pulse 1.6s ease-in-out infinite;
        }

        #login-loader .ll-spinner {
            width: 36px;
            height: 36px;
            border: 3px solid var(--loader-ring);
            border-top-color: var(--primary);
            border-radius: 50%;
            animation: ll-spin .75s linear infinite;
        }

        #login-loader .ll-text {
            margin-top: 1rem;
            font-size: .82rem;
            color: var(--text-soft);
            letter-spacing: .03em;
        }

        .right-panel {
            flex: 1;
            background: linear-gradient(160deg, #0a6ef7 0%, #0061ff 52%, #041e41 100%);
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 4rem 4.5rem;
            color: #fff;
            position: relative;
            overflow: hidden;
        }

        .right-panel::before {
            content: '';
            position: absolute;
            width: 420px;
            height: 420px;
            border-radius: 50%;
            background: var(--hero-orb);
            top: -120px;
            right: -120px;
        }

        .right-panel::after {
            content: '';
            position: absolute;
            width: 280px;
            height: 280px;
            border-radius: 50%;
            background: var(--hero-orb-soft);
            bottom: -80px;
            left: -60px;
        }

        .rp-eyebrow,
        .eyebrow {
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--text-muted);
        }

        .right-panel .rp-eyebrow {
            color: rgba(255,255,255,.65);
            margin-bottom: .9rem;
        }

        .rp-heading {
            font-size: 2.1rem;
            font-weight: 800;
            line-height: 1.25;
            margin-bottom: 1rem;
            max-width: 560px;
        }

        .rp-desc {
            font-size: .92rem;
            color: rgba(255,255,255,.75);
            line-height: 1.6;
            max-width: 420px;
            margin-bottom: 2rem;
        }

        .feature-badges {
            display: flex;
            gap: .65rem;
            flex-wrap: wrap;
            margin-bottom: 2rem;
        }

        .badge {
            background: rgba(255,255,255,.15);
            border: 1px solid rgba(255,255,255,.22);
            border-radius: 8px;
            padding: .5rem .9rem;
            backdrop-filter: blur(6px);
        }

        .badge-title {
            font-size: .82rem;
            font-weight: 700;
            color: #fff;
        }

        .badge-sub {
            font-size: .72rem;
            color: rgba(255,255,255,.65);
            margin-top: .1rem;
        }

        .rp-bullets {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: .65rem;
        }

        .rp-bullets li {
            display: flex;
            align-items: center;
            gap: .6rem;
            font-size: .88rem;
            color: rgba(255,255,255,.82);
        }

        .bullet-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255,255,255,.75);
            flex-shrink: 0;
        }

        .app-shell {
            min-height: 100vh;
            display: grid;
            grid-template-columns: 322px minmax(0, 1fr);
            background:
                radial-gradient(circle at 0 0, rgba(36, 89, 197, .08), transparent 28%),
                linear-gradient(180deg, #eef3f8 0%, #f6f8fb 100%);
            position: relative;
            transition: grid-template-columns .34s cubic-bezier(.22, 1, .36, 1), background .24s ease;
        }

        .app-shell::before {
            display: none;
        }

        html[data-theme="light"] .app-shell {
            background:
                radial-gradient(circle at 0 0, rgba(36, 89, 197, .08), transparent 28%),
                linear-gradient(180deg, #eef3f8 0%, #f6f8fb 100%);
        }

        .sidebar-overlay {
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.62);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity .2s ease, visibility .2s ease;
            z-index: 32;
        }

        .sidebar {
            position: sticky;
            top: 0;
            height: 100vh;
            padding: 18px 18px 18px 20px;
            color: var(--text-soft);
            z-index: 40;
            transition: transform .34s cubic-bezier(.22, 1, .36, 1), padding .28s ease;
            will-change: transform;
        }

        .sidebar-panel {
            height: 100%;
            display: flex;
            flex-direction: column;
            border-radius: 28px;
            background: rgba(255, 255, 255, .92);
            border: 1px solid rgba(197, 208, 221, .72);
            box-shadow: 0 24px 60px rgba(15, 23, 42, .10);
            backdrop-filter: blur(18px);
            overflow: hidden;
            transition: background .24s ease, border-color .24s ease, box-shadow .28s ease, border-radius .28s ease;
        }

        .sidebar-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            min-height: 88px;
            padding: 1.25rem 1.2rem .95rem;
        }

        .sidebar-close,
        .sidebar-toggle {
            width: 38px;
            height: 38px;
            border-radius: 999px;
            border: 1px solid rgba(197, 208, 221, .92);
            background: rgba(255, 255, 255, .94);
            color: var(--text-soft);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
            transition: background .18s ease, border-color .18s ease, color .18s ease, transform .22s cubic-bezier(.22, 1, .36, 1);
        }

        .sidebar-close:hover,
        .sidebar-toggle:hover {
            background: #f4f8ff;
            border-color: rgba(36, 89, 197, .20);
            color: var(--text-primary);
            transform: translateY(-1px);
        }

        .sidebar-close {
            display: none;
        }

        .sidebar-brand {
            display: flex;
            align-items: center;
            gap: 14px;
            min-width: 0;
            transition: gap .28s ease;
        }

        .sidebar-brand-mark {
            width: 44px;
            height: 44px;
            border-radius: 0;
            background: transparent;
            border: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            box-shadow: none;
            overflow: visible;
        }

        .sidebar-brand-mark img {
            width: 44px;
            height: 44px;
            filter: none;
        }

        .sidebar-brand-copy {
            min-width: 0;
        }

        .sidebar-brand-copy strong {
            display: block;
            font-size: 1.02rem;
            line-height: 1.1;
            color: var(--text-primary);
        }

        .sidebar-brand-copy span {
            display: block;
            margin-top: .24rem;
            font-size: .75rem;
            color: var(--text-muted);
        }

        .sidebar-nav {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 1.15rem;
            padding: .4rem 1rem 1rem;
            overflow-y: auto;
            overflow-x: hidden;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .sidebar-nav::-webkit-scrollbar {
            width: 0;
            height: 0;
            display: none;
        }

        .sidebar-section {
            display: grid;
            gap: .62rem;
        }

        .sidebar-section-title {
            padding: 0 .55rem;
            font-size: .68rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .12em;
            color: #9aa7b7;
        }

        .sidebar-section.is-active .sidebar-section-title {
            color: #7f8fa6;
        }

        .sidebar-section-items {
            display: grid;
            gap: 8px;
        }

        .sidebar-link-wrap {
            display: grid;
            gap: 4px;
        }

        .sidebar-link-row {
            display: flex;
            align-items: stretch;
            gap: 6px;
            min-width: 0;
        }

        .sidebar-link-row > .sidebar-link,
        .sidebar-link-row > .sidebar-link.is-disabled {
            flex: 1;
            min-width: 0;
        }

        .sidebar-link-toggle {
            flex-shrink: 0;
            align-self: center;
            width: 34px;
            height: 34px;
            margin-right: 2px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            border: 1px solid rgba(197, 208, 221, .88);
            background: rgba(255, 255, 255, .96);
            color: #64748b;
            cursor: pointer;
            box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
            transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
        }

        .sidebar-link-toggle:hover {
            background: #f8fbff;
            border-color: rgba(36, 89, 197, .24);
            color: #2459c5;
            transform: translateY(-1px);
        }

        .sidebar-link-toggle:focus-visible {
            outline: 2px solid rgba(36, 89, 197, .35);
            outline-offset: 2px;
        }

        .sidebar-link-toggle i {
            font-size: .72rem;
            line-height: 1;
            transition: transform .22s cubic-bezier(.22, 1, .36, 1);
        }

        .sidebar-link-wrap.is-open > .sidebar-link-row .sidebar-link-toggle {
            background: #eef4ff;
            border-color: rgba(122, 162, 238, .42);
            color: #2459c5;
            box-shadow: 0 10px 20px rgba(36, 89, 197, .12);
        }

        .sidebar-link-wrap.is-open > .sidebar-link-row .sidebar-link-toggle i {
            transform: rotate(180deg);
        }

        .sidebar-submenu {
            display: grid;
            gap: .55rem;
            margin: 2px 0 4px 12px;
            padding: 6px 0 6px 12px;
            border-left: 2px solid rgba(197, 208, 221, .55);
        }

        .sidebar-submenu[hidden] {
            display: none !important;
        }

        .sidebar-link-wrap.is-open > .sidebar-submenu {
            animation: sidebar-submenu-in .2s ease;
        }

        @keyframes sidebar-submenu-in {
            from {
                opacity: 0;
                transform: translateY(-4px);
            }

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

        .sidebar-submenu-group {
            display: grid;
            gap: .45rem;
        }

        .sidebar-submenu-title {
            font-size: .65rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .12em;
            color: #9aa7b7;
        }

        .sidebar-submenu-items {
            display: grid;
            gap: 6px;
        }

        .sidebar-sublink {
            display: grid;
            grid-template-columns: 30px minmax(0, 1fr);
            align-items: center;
            gap: 10px;
            min-height: 42px;
            padding: 7px 10px;
            border-radius: 14px;
            color: var(--text-soft);
            border: 1px solid transparent;
            background: transparent;
            text-decoration: none;
            transition: background .22s ease, border-color .22s ease, color .22s ease, transform .22s ease;
        }

        .sidebar-sublink:hover {
            background: #f7f9fc;
            border-color: rgba(197, 208, 221, .72);
            color: var(--text-primary);
            transform: translateX(3px);
        }

        .sidebar-sublink.is-active {
            background: #eef4ff;
            border-color: rgba(122, 162, 238, .38);
            color: var(--text-primary);
            box-shadow: 0 10px 24px rgba(36, 89, 197, .08);
        }

        .sidebar-sublink.is-disabled {
            opacity: .42;
            cursor: not-allowed;
        }

        .sidebar-sublink-icon {
            width: 30px;
            height: 30px;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: .84rem;
            color: #7f8fa6;
            background: #f3f5f8;
            border: 1px solid rgba(197, 208, 221, .64);
        }

        .sidebar-sublink-label {
            font-size: .86rem;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .sidebar-link {
            position: relative;
            display: grid;
            grid-template-columns: 40px minmax(0, 1fr);
            align-items: center;
            gap: 12px;
            min-height: 56px;
            padding: 8px 12px;
            border-radius: 18px;
            color: var(--text-soft);
            border: 1px solid transparent;
            background: transparent;
            transition: background .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease, transform .28s cubic-bezier(.22, 1, .36, 1);
        }

        .sidebar-link::before {
            content: '';
            position: absolute;
            left: 8px;
            top: 10px;
            bottom: 10px;
            width: 3px;
            border-radius: 999px;
            background: transparent;
        }

        .sidebar-link:hover {
            background: #f7f9fc;
            border-color: rgba(197, 208, 221, .72);
            color: var(--text-primary);
            transform: translateX(4px);
        }

        .sidebar-link.is-active {
            background: #eef4ff;
            border-color: rgba(122, 162, 238, .38);
            color: var(--text-primary);
            box-shadow: 0 10px 24px rgba(36, 89, 197, .08);
        }

        .sidebar-link.is-active::before {
            background: var(--primary);
        }

        .sidebar-link.is-disabled {
            opacity: .42;
            cursor: not-allowed;
        }

        .sidebar-link.is-disabled:hover {
            background: transparent;
            border-color: transparent;
            color: var(--text-soft);
        }

        .sidebar-link-icon {
            width: 40px;
            height: 40px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 1rem;
            color: #7f8fa6;
            background: #f3f5f8;
            border: 1px solid rgba(197, 208, 221, .64);
            transition: background .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .24s cubic-bezier(.22, 1, .36, 1);
        }

        .sidebar-link:hover .sidebar-link-icon {
            color: var(--text-primary);
            border-color: rgba(197, 208, 221, .9);
            transform: scale(1.04);
        }

        .sidebar-link.is-active .sidebar-link-icon {
            color: #fff;
            background: linear-gradient(145deg, #4f8ff3 0%, #2459c5 100%);
            border-color: transparent;
            box-shadow: 0 12px 22px rgba(36, 89, 197, .22);
        }

        .sidebar-link-body {
            display: grid;
            gap: 3px;
            min-width: 0;
            flex: 1;
            transition: opacity .18s ease, transform .24s cubic-bezier(.22, 1, .36, 1);
        }

        .sidebar-link-label {
            font-size: .93rem;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .sidebar-link-meta {
            font-size: .74rem;
            color: var(--text-muted);
        }

        .sidebar-link.is-active .sidebar-link-meta {
            color: #6f86ad;
        }

        .sidebar-footer {
            margin-top: auto;
            position: relative;
            padding: 1rem 1rem 1.1rem;
            border-top: 1px solid rgba(197, 208, 221, .68);
            background: rgba(248, 250, 252, .96);
        }

        .sidebar-user-trigger {
            display: grid;
            grid-template-columns: 42px minmax(0, 1fr) auto;
            align-items: center;
            gap: 12px;
            padding: 10px 12px;
            border-radius: 16px;
            background: rgba(255, 255, 255, .94);
            border: 1px solid rgba(197, 208, 221, .86);
            color: var(--text-primary);
            width: 100%;
            cursor: pointer;
            text-align: left;
            box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
            transition: background .2s ease, border-color .2s ease, box-shadow .22s ease, transform .24s cubic-bezier(.22, 1, .36, 1);
        }

        .sidebar-user-trigger:hover,
        .sidebar-user-trigger[aria-expanded="true"] {
            background: #f9fbff;
            border-color: rgba(122, 162, 238, .40);
            box-shadow: 0 12px 28px rgba(36, 89, 197, .08);
            transform: translateY(-1px);
        }

        .sidebar-user-avatar {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: linear-gradient(145deg, #4f8ff3 0%, #2459c5 100%);
            display: grid;
            place-items: center;
            font-weight: 800;
            font-size: .82rem;
            color: #fff;
            flex-shrink: 0;
            overflow: hidden;
        }

        .sidebar-user-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }

        .sidebar-user-copy {
            min-width: 0;
            display: grid;
            gap: 2px;
            flex: 1;
        }

        .sidebar-user-copy strong {
            font-size: .92rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .sidebar-user-copy span {
            font-size: .76rem;
            color: var(--text-muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .sidebar-user-chevron {
            font-size: .75rem;
            color: var(--text-muted);
            flex-shrink: 0;
            margin-left: auto;
            transition: transform .24s cubic-bezier(.22, 1, .36, 1), color .18s ease;
        }

        .sidebar-user-trigger[aria-expanded="true"] .sidebar-user-chevron {
            transform: rotate(180deg);
            color: var(--primary);
        }

        .sidebar-user-dropdown {
            position: absolute;
            left: 1rem;
            right: 1rem;
            bottom: calc(100% + 10px);
            border-radius: 16px;
            background: rgba(255, 255, 255, .98);
            border: 1px solid rgba(197, 208, 221, .86);
            box-shadow: 0 18px 40px rgba(15, 23, 42, .14);
            overflow: hidden;
            z-index: 4;
        }

        .sidebar-user-dropdown[hidden] {
            display: none;
        }

        .sidebar-user-dropdown a {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 14px;
            font-size: .875rem;
            font-weight: 500;
            color: var(--text-soft);
            transition: background .14s ease, color .14s ease;
        }

        .sidebar-user-dropdown a:hover {
            background: #f5f8ff;
            color: var(--text-primary);
        }

        .sidebar-user-dropdown a i {
            width: 16px;
            text-align: center;
            font-size: .84rem;
            color: var(--text-muted);
            flex-shrink: 0;
            transition: color .14s ease;
        }

        .sidebar-user-dropdown a:hover i {
            color: var(--primary);
        }

        body.sidebar-collapsed:not(.sidebar-hover-open) .app-shell {
            grid-template-columns: 112px minmax(0, 1fr);
        }

        body.sidebar-collapsed:not(.sidebar-hover-open) .app-shell::before {
            display: none;
        }

        body.sidebar-collapsed:not(.sidebar-hover-open) .sidebar-head {
            padding-left: .8rem;
            padding-right: .8rem;
            justify-content: center;
        }

        body.sidebar-collapsed:not(.sidebar-hover-open) .sidebar-brand {
            justify-content: center;
            gap: 0;
        }

        body.sidebar-collapsed:not(.sidebar-hover-open) .sidebar-brand-copy,
        body.sidebar-collapsed:not(.sidebar-hover-open) .sidebar-section-title,
        body.sidebar-collapsed:not(.sidebar-hover-open) .sidebar-link-body,
        body.sidebar-collapsed:not(.sidebar-hover-open) .sidebar-link-toggle,
        body.sidebar-collapsed:not(.sidebar-hover-open) .sidebar-submenu,
        body.sidebar-collapsed:not(.sidebar-hover-open) .sidebar-user-copy,
        body.sidebar-collapsed:not(.sidebar-hover-open) .sidebar-user-chevron,
        body.sidebar-collapsed:not(.sidebar-hover-open) .sidebar-user-dropdown {
            display: none;
        }

        body.sidebar-collapsed:not(.sidebar-hover-open) .sidebar-nav {
            padding-left: .8rem;
            padding-right: .8rem;
        }

        body.sidebar-collapsed:not(.sidebar-hover-open) .sidebar-link {
            grid-template-columns: 1fr;
            justify-items: center;
            padding: 10px 8px;
            width: 100%;
            min-height: 58px;
            border-radius: 18px;
        }

        body.sidebar-collapsed:not(.sidebar-hover-open) .sidebar-link:hover {
            transform: none;
        }

        body.sidebar-collapsed:not(.sidebar-hover-open) .sidebar-link::before {
            display: none;
        }

        body.sidebar-collapsed:not(.sidebar-hover-open) .sidebar-footer {
            padding-left: .8rem;
            padding-right: .8rem;
        }

        body.sidebar-collapsed:not(.sidebar-hover-open) .sidebar-user-trigger {
            grid-template-columns: 1fr;
            justify-content: center;
            justify-items: center;
            padding: 10px 6px;
            border-radius: 18px;
        }

        html[data-theme="dark"] .app-shell {
            background:
                radial-gradient(circle at 0 0, rgba(116, 143, 183, .10), transparent 24%),
                linear-gradient(180deg, #0b1017 0%, #111926 100%);
        }

        html[data-theme="dark"] .sidebar {
            color: #b7c1ce;
        }

        html[data-theme="dark"] .sidebar-panel {
            background: rgba(17, 19, 23, .94);
            border-color: rgba(52, 60, 72, .92);
            box-shadow: 0 28px 70px rgba(0, 0, 0, .34);
        }

        html[data-theme="dark"] .sidebar-close,
        html[data-theme="dark"] .sidebar-toggle {
            background: rgba(24, 28, 35, .96);
            border-color: rgba(52, 60, 72, .92);
            color: #a8b2c0;
            box-shadow: none;
        }

        html[data-theme="dark"] .sidebar-close:hover,
        html[data-theme="dark"] .sidebar-toggle:hover {
            background: rgba(35, 42, 54, .96);
            border-color: rgba(95, 122, 166, .34);
            color: #eef2f7;
        }

        html[data-theme="dark"] .sidebar-brand-copy strong {
            color: #eef2f7;
        }

        html[data-theme="dark"] .sidebar-brand-mark {
            background: transparent;
            box-shadow: none;
        }

        html[data-theme="dark"] .sidebar-brand-mark img {
            filter: none;
        }

        html[data-theme="dark"] .sidebar-brand-copy span,
        html[data-theme="dark"] .sidebar-section-title,
        html[data-theme="dark"] .sidebar-link-meta,
        html[data-theme="dark"] .sidebar-user-copy span,
        html[data-theme="dark"] .sidebar-user-chevron,
        html[data-theme="dark"] .sidebar-user-dropdown a i {
            color: #7f8ca1;
        }

        html[data-theme="dark"] .sidebar-link {
            color: #d3dae3;
        }

        html[data-theme="dark"] .sidebar-submenu {
            border-left-color: rgba(148, 163, 184, .18);
        }

        html[data-theme="dark"] .sidebar-submenu-title {
            color: #94a3b8;
        }

        html[data-theme="dark"] .sidebar-link-toggle {
            background: rgba(15, 23, 42, .82);
            border-color: rgba(96, 165, 250, .18);
            color: #cbd5e1;
            box-shadow: none;
        }

        html[data-theme="dark"] .sidebar-link-toggle:hover,
        html[data-theme="dark"] .sidebar-link-wrap.is-open > .sidebar-link-row .sidebar-link-toggle {
            background: rgba(37, 99, 235, .22);
            border-color: rgba(96, 165, 250, .34);
            color: #eff6ff;
        }

        html[data-theme="dark"] .sidebar-sublink {
            color: #d3dae3;
        }

        html[data-theme="dark"] .sidebar-sublink:hover {
            background: rgba(23, 28, 35, .96);
            border-color: rgba(52, 60, 72, .92);
            color: #eef2f7;
        }

        html[data-theme="dark"] .sidebar-sublink.is-active {
            background: rgba(32, 45, 66, .84);
            border-color: rgba(95, 122, 166, .24);
            color: #eef2f7;
            box-shadow: 0 12px 22px rgba(0, 0, 0, .18);
        }

        html[data-theme="dark"] .sidebar-sublink-icon {
            background: rgba(24, 28, 35, .94);
            border-color: rgba(52, 60, 72, .92);
            color: #93a0b2;
        }

        html[data-theme="dark"] .sidebar-link:hover {
            background: rgba(23, 28, 35, .96);
            border-color: rgba(52, 60, 72, .92);
            color: #eef2f7;
        }

        html[data-theme="dark"] .sidebar-link-icon {
            background: rgba(24, 28, 35, .94);
            border-color: rgba(52, 60, 72, .92);
            color: #93a0b2;
        }

        html[data-theme="dark"] .sidebar-link:hover .sidebar-link-icon {
            color: #eef2f7;
            border-color: rgba(95, 122, 166, .24);
        }

        html[data-theme="dark"] .sidebar-link.is-active {
            background: rgba(32, 45, 66, .84);
            border-color: rgba(95, 122, 166, .30);
            box-shadow: 0 14px 30px rgba(0, 0, 0, .22);
        }

        html[data-theme="dark"] .sidebar-footer {
            background: rgba(17, 19, 23, .98);
            border-top-color: rgba(52, 60, 72, .92);
        }

        html[data-theme="dark"] .sidebar-user-trigger {
            background: rgba(24, 28, 35, .94);
            border-color: rgba(52, 60, 72, .92);
            color: #eef2f7;
            box-shadow: none;
        }

        html[data-theme="dark"] .sidebar-user-trigger:hover,
        html[data-theme="dark"] .sidebar-user-trigger[aria-expanded="true"] {
            background: rgba(31, 38, 49, .96);
            border-color: rgba(95, 122, 166, .32);
        }

        html[data-theme="dark"] .sidebar-user-dropdown {
            background: rgba(24, 28, 35, .98);
            border-color: rgba(52, 60, 72, .92);
            box-shadow: 0 18px 40px rgba(0, 0, 0, .34);
        }

        html[data-theme="dark"] .sidebar-user-dropdown a {
            color: #d3dae3;
        }

        html[data-theme="dark"] .sidebar-user-dropdown a:hover {
            background: rgba(32, 45, 66, .70);
            color: #eef2f7;
        }

        .app-main {
            min-width: 0;
            background: color-mix(in srgb, var(--body-bg) 92%, transparent);
        }

        html[data-theme="light"] .app-main {
            background: linear-gradient(180deg, rgba(248, 250, 252, .82) 0%, rgba(237, 243, 248, .96) 100%);
        }

        .app-main-inner {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            background: color-mix(in srgb, var(--panel-bg) 96%, transparent);
        }

        html[data-theme="light"] .app-main-inner {
            background: linear-gradient(180deg, rgba(255, 255, 255, .74) 0%, rgba(255, 255, 255, .90) 100%);
        }

        .topbar,
        .toolbar,
        .footerbar {
            padding: 1rem 1.5rem;
        }

        .topbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            min-height: 78px;
            border-bottom: 1px solid var(--surface-border);
            background: color-mix(in srgb, var(--panel-bg) 94%, var(--panel-soft));
            position: sticky;
            top: 0;
            z-index: 18;
        }

        html[data-theme="light"] .topbar {
            background: rgba(255, 255, 255, .84);
            border-bottom-color: rgba(148, 163, 184, .22);
            box-shadow: 0 12px 28px rgba(15, 23, 42, .05);
            backdrop-filter: blur(14px);
        }

        .topbar-main {
            display: flex;
            align-items: center;
            gap: 14px;
            min-width: 0;
        }

        .topbar-title {
            display: flex;
            align-items: center;
            min-width: 0;
        }

        .topbar-title strong {
            font-size: 1.08rem;
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .toolbar-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .toolbar-dropdown {
            position: relative;
        }

        .toolbar-icon {
            position: relative;
            width: 40px;
            height: 40px;
            border-radius: 999px;
            border: 1px solid var(--surface-border);
            background: color-mix(in srgb, var(--panel-bg) 92%, var(--panel-soft));
            color: var(--text-soft);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: var(--shadow-soft);
            transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
        }

        .toolbar-icon:hover,
        .toolbar-icon.is-active {
            transform: translateY(-1px);
            border-color: color-mix(in srgb, var(--primary) 30%, var(--surface-border));
            background: var(--primary-soft);
            color: var(--text-primary);
        }

        .toolbar-icon-badge {
            position: absolute;
            top: -3px;
            right: -2px;
            min-width: 18px;
            height: 18px;
            padding: 0 4px;
            border-radius: 999px;
            background: #ef4444;
            color: #fff;
            font-size: .68rem;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 2px solid var(--panel-bg);
        }

        .toolbar-icon-badge[hidden] {
            display: none;
        }

        .toolbar-notification-dropdown {
            position: absolute;
            top: calc(100% + 12px);
            right: 0;
            width: min(360px, calc(100vw - 28px));
            display: grid;
            gap: 12px;
            padding: 14px;
            border-radius: 24px;
            border: 1px solid var(--surface-border);
            background: color-mix(in srgb, var(--panel-bg) 97%, var(--panel-soft));
            box-shadow: 0 24px 48px rgba(15, 23, 42, .16);
            z-index: 24;
        }

        .toolbar-notification-dropdown[hidden],
        .toolbar-notification-list[hidden],
        .toolbar-notification-empty[hidden] {
            display: none;
        }

        .toolbar-notification-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding-bottom: 2px;
        }

        .toolbar-notification-head strong {
            color: var(--text-primary);
            font-size: .96rem;
        }

        .toolbar-notification-head span,
        .toolbar-notification-empty {
            color: var(--text-soft);
            font-size: .8rem;
            line-height: 1.5;
        }

        .toolbar-notification-list {
            display: grid;
            gap: 10px;
            max-height: 420px;
            overflow-y: auto;
            padding-right: 2px;
        }

        .toolbar-notification-item {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            gap: 12px;
            align-items: start;
            padding: 12px;
            border-radius: 18px;
            border: 1px solid color-mix(in srgb, var(--surface-border) 74%, transparent);
            background: color-mix(in srgb, var(--panel-soft) 34%, var(--panel-bg));
        }

        .toolbar-notification-icon {
            width: 40px;
            height: 40px;
            border-radius: 14px;
            display: grid;
            place-items: center;
            background: var(--primary-soft);
            color: var(--primary);
            flex-shrink: 0;
        }

        .toolbar-notification-copy {
            display: grid;
            gap: 4px;
            min-width: 0;
        }

        .toolbar-notification-copy strong {
            color: var(--text-primary);
            font-size: .92rem;
            line-height: 1.3;
        }

        .toolbar-notification-copy p,
        .toolbar-notification-copy small {
            margin: 0;
            color: var(--text-soft);
            line-height: 1.45;
        }

        .toolbar-notification-copy p {
            font-size: .85rem;
        }

        .toolbar-notification-copy small {
            font-size: .76rem;
        }

        .topbar-kicker,
        .eyebrow {
            text-transform: uppercase;
            letter-spacing: 0.16em;
            font-size: 0.72rem;
            color: var(--text-muted);
            font-weight: 700;
        }

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

        .panel-actions,
        .panel-header,
        .filter-bar,
        .metric-strip,
        .form-grid,
        .form-actions,
        .table-actions {
            display: flex;
            gap: 14px;
            flex-wrap: wrap;
        }

        .toolbar {
            border-bottom: 1px solid var(--surface-border);
            background: color-mix(in srgb, var(--panel-bg) 98%, transparent);
        }

        html[data-theme="light"] .toolbar {
            background: linear-gradient(180deg, rgba(255, 255, 255, .90) 0%, rgba(247, 250, 255, .94) 100%);
            border-bottom-color: rgba(148, 163, 184, .18);
        }

        .page-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
        }

        .page-toolbar-copy {
            min-width: 0;
        }

        .page-toolbar h1 {
            margin-top: .7rem;
            font-size: clamp(1.9rem, 2.6vw, 2.85rem);
            line-height: 1.02;
        }

        .page-toolbar p {
            margin-top: .75rem;
            max-width: 720px;
            color: var(--text-soft);
            font-size: 1rem;
            line-height: 1.6;
        }

        .page-toolbar-actions {
            display: flex;
            align-items: center;
            gap: 16px;
            flex-shrink: 0;
        }

        .app-content {
            padding: 1.5rem;
            display: grid;
            gap: 20px;
        }

        .footerbar {
            border-top: 1px solid var(--surface-border);
            color: var(--text-muted);
            font-size: .9rem;
            background: color-mix(in srgb, var(--panel-bg) 98%, transparent);
        }

        .grid {
            display: grid;
            gap: 20px;
        }

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

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

        .split {
            display: grid;
            gap: 20px;
        }

        .panel-stack {
            display: grid;
            gap: 20px;
        }

        .card,
        .metric {
            background: color-mix(in srgb, var(--panel-bg) 96%, transparent);
            border: 1px solid color-mix(in srgb, var(--surface-border) 86%, transparent);
            border-radius: 24px;
            box-shadow: var(--shadow-soft);
        }

        html[data-theme="light"] .card,
        html[data-theme="light"] .metric {
            background: linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(247, 250, 255, .98) 100%);
            border-color: rgba(148, 163, 184, .24);
            box-shadow: 0 18px 38px rgba(15, 23, 42, .07);
        }

        .card {
            padding: 22px;
        }

        .metric {
            padding: 16px 18px;
            flex: 1 1 160px;
        }

        .metric strong {
            display: block;
            font-size: 1.6rem;
            margin-top: 6px;
        }

        .stat-value {
            margin: 12px 0 8px;
            font-size: 2.1rem;
            font-weight: 700;
        }

        .table-wrap {
            overflow: auto;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            text-align: left;
            padding: 14px 12px;
            border-bottom: 1px solid color-mix(in srgb, var(--surface-border) 74%, transparent);
            vertical-align: top;
        }

        th {
            font-size: .8rem;
            text-transform: uppercase;
            letter-spacing: .08em;
            color: var(--text-muted);
            font-weight: 700;
        }

        .tag,
        .status-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border-radius: 999px;
            padding: 6px 11px;
            font-size: .81rem;
            font-weight: 800;
            border: 1px solid transparent;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 16px rgba(15, 23, 42, .08);
        }

        .tag,
        .status-pill {
            background: color-mix(in srgb, var(--primary-soft) 100%, var(--panel-bg));
            color: var(--primary-hover);
            border-color: color-mix(in srgb, var(--primary) 42%, transparent);
        }

        .tag.warning,
        .status-pill.warn {
            background: color-mix(in srgb, var(--warning-bg) 96%, var(--panel-bg));
            color: var(--warning-text);
            border-color: color-mix(in srgb, var(--warning-border) 96%, transparent);
        }

        .tag.danger,
        .status-pill.off {
            background: color-mix(in srgb, var(--danger-bg) 96%, var(--panel-bg));
            color: var(--danger-text);
            border-color: color-mix(in srgb, var(--danger-border) 96%, transparent);
        }

        .status-pill.ok {
            background: rgba(220, 252, 231, .96);
            color: #166534;
            border-color: rgba(74, 222, 128, .44);
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border: 1px solid var(--primary);
            background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 94%, #ffffff) 0%, var(--primary-hover) 100%);
            color: #fff;
            padding: 11px 16px;
            border-radius: 14px;
            font-weight: 800;
            cursor: pointer;
            box-shadow: 0 14px 28px color-mix(in srgb, var(--primary) 28%, transparent);
            transition: transform 0.14s ease, background .14s ease, opacity 0.14s ease, box-shadow .14s ease, border-color .14s ease;
        }

        .btn:hover {
            transform: translateY(-2px);
            opacity: 1;
            background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 100%, #ffffff) 0%, color-mix(in srgb, var(--primary-hover) 92%, #0f172a) 100%);
            box-shadow: 0 18px 34px color-mix(in srgb, var(--primary) 34%, transparent);
        }

        .btn-secondary {
            background: color-mix(in srgb, var(--primary-soft) 92%, var(--panel-bg));
            color: var(--primary-hover);
            border-color: color-mix(in srgb, var(--primary) 44%, var(--surface-border));
            box-shadow: 0 10px 20px color-mix(in srgb, var(--primary) 10%, transparent);
        }

        .btn-secondary:hover {
            background: color-mix(in srgb, var(--primary-soft) 100%, var(--panel-bg));
            box-shadow: 0 14px 24px color-mix(in srgb, var(--primary) 16%, transparent);
        }

        .btn-danger {
            background: linear-gradient(135deg, color-mix(in srgb, var(--danger-text) 92%, #ffffff) 0%, color-mix(in srgb, var(--danger-text) 82%, #7f1d1d) 100%);
            border-color: color-mix(in srgb, var(--danger-text) 88%, #ffffff);
            color: #fff;
            box-shadow: 0 14px 28px color-mix(in srgb, var(--danger-text) 26%, transparent);
        }

        .btn-sm {
            padding: 8px 12px;
            font-size: .88rem;
            border-radius: 12px;
        }

        .field,
        .field-inline {
            display: grid;
            gap: 8px;
        }

        .form-grid {
            align-items: start;
        }

        .field {
            min-width: min(100%, 260px);
            flex: 1 1 280px;
        }

        .field-inline {
            align-items: center;
            grid-template-columns: auto 1fr;
        }

        label {
            font-weight: 700;
            color: var(--text-primary);
        }

        input,
        select,
        textarea {
            width: 100%;
            padding: 12px 14px;
            border-radius: 14px;
            border: 1px solid var(--surface-border);
            background: color-mix(in srgb, var(--panel-bg) 96%, transparent);
            color: var(--text-primary);
            font: inherit;
            outline: none;
            transition: border-color .18s ease, box-shadow .18s ease;
        }

        input:focus,
        select:focus,
        textarea:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(59, 130, 246, .18);
        }

        textarea {
            min-height: 120px;
            resize: vertical;
        }

        .search-box {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            flex: 1 1 360px;
        }

        .search-box input,
        .search-box select {
            flex: 1 1 200px;
        }

        .filter-bar,
        .panel-header,
        .form-actions {
            align-items: center;
            justify-content: space-between;
        }

        .filter-bar {
            margin-bottom: 18px;
        }

        .alert {
            border-radius: 18px;
            padding: 14px 18px;
            border: 1px solid transparent;
        }

        .alert ul {
            margin: 10px 0 0 18px;
            padding: 0;
        }

        .alert-success {
            background: var(--success-bg);
            border-color: var(--success-border);
            color: var(--success-text);
        }

        .alert-danger {
            background: var(--danger-bg);
            border-color: var(--danger-border);
            color: var(--danger-text);
        }

        .app-toast-stack {
            position: fixed;
            top: clamp(16px, 3vw, 24px);
            right: clamp(16px, 3vw, 24px);
            width: min(360px, calc(100vw - 32px));
            display: grid;
            gap: 12px;
            z-index: 60;
            pointer-events: none;
            justify-items: end;
        }

        .app-toast {
            pointer-events: auto;
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            gap: 14px;
            align-items: start;
            width: 100%;
            padding: 15px 15px 15px 14px;
            border-radius: 22px;
            border: 1px solid var(--surface-border);
            background: color-mix(in srgb, var(--panel-bg) 97%, var(--panel-soft));
            box-shadow: 0 22px 42px rgba(15, 23, 42, .16);
            opacity: 0;
            transform: translateX(12px);
            transition: opacity .18s ease, transform .18s ease;
        }

        .app-toast.is-visible {
            opacity: 1;
            transform: translateX(0);
        }

        .app-toast.is-closing {
            opacity: 0;
            transform: translateX(12px);
        }

        .app-toast-icon {
            width: 42px;
            height: 42px;
            display: grid;
            place-items: center;
            border-radius: 14px;
            flex-shrink: 0;
        }

        .app-toast-body {
            display: grid;
            gap: 4px;
            min-width: 0;
        }

        .app-toast-body strong {
            color: var(--text-primary);
            font-size: .95rem;
            line-height: 1.25;
        }

        .app-toast-body p,
        .app-toast-body ul {
            margin: 0;
            color: var(--text-soft);
            font-size: .86rem;
            line-height: 1.5;
        }

        .app-toast-body ul {
            padding-left: 18px;
        }

        .app-toast-close {
            width: 32px;
            height: 32px;
            border: 0;
            border-radius: 999px;
            background: transparent;
            color: var(--text-soft);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background .16s ease, color .16s ease;
        }

        .app-toast-close:hover {
            background: color-mix(in srgb, var(--panel-soft) 72%, transparent);
            color: var(--text-primary);
        }

        .app-toast-success {
            border-color: var(--success-border);
        }

        .app-toast-success .app-toast-icon {
            background: var(--success-bg);
            color: var(--success-text);
        }

        .app-toast-danger {
            border-color: var(--danger-border);
        }

        .app-toast-danger .app-toast-icon {
            background: var(--danger-bg);
            color: var(--danger-text);
        }

        .app-toast-info .app-toast-icon,
        .app-toast-warning .app-toast-icon {
            background: var(--primary-soft);
            color: var(--primary);
        }

        .metric-strip {
            margin-bottom: 18px;
        }

        .empty-state {
            padding: 26px;
            border-radius: 18px;
            border: 1px dashed var(--surface-border);
            color: var(--text-soft);
            text-align: center;
            background: color-mix(in srgb, var(--panel-bg) 92%, transparent);
        }

        .section-note {
            margin-top: 8px;
            font-size: .92rem;
            color: var(--text-soft);
        }

        .page-cluster {
            gap: 18px;
        }

        .feature-panel {
            padding: 0;
            overflow: hidden;
        }

        .users-page {
            gap: 22px;
        }

        html[data-theme="light"] .users-page {
            gap: 24px;
        }

        .users-mobile-hub {
            display: none;
            gap: 12px;
        }

        .users-mobile-hub-head {
            position: relative;
            overflow: hidden;
            display: grid;
            gap: 12px;
            padding: 18px;
            border-radius: 24px;
            border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--surface-border));
            background:
                radial-gradient(circle at top right, rgba(56, 189, 248, .18), transparent 36%),
                linear-gradient(145deg, color-mix(in srgb, var(--primary-soft) 34%, var(--panel-bg)) 0%, color-mix(in srgb, var(--panel-bg) 96%, transparent) 100%);
            box-shadow: 0 16px 28px rgba(15, 23, 42, .10);
        }

        .users-mobile-hub-head::after {
            content: '';
            position: absolute;
            inset: auto -48px -62px auto;
            width: 170px;
            height: 170px;
            border-radius: 50%;
            background: rgba(96, 165, 250, .16);
            filter: blur(6px);
            pointer-events: none;
        }

        .users-mobile-hub-head > * {
            position: relative;
            z-index: 1;
        }

        .users-filter-drawer {
            display: block;
        }

        .users-filter-drawer > summary {
            display: none;
            list-style: none;
        }

        .users-filter-drawer > summary::-webkit-details-marker {
            display: none;
        }

        @media (min-width: 769px) {
            .users-mobile-hub {
                display: none;
            }

            .users-filter-drawer > summary {
                display: none;
            }

            details.users-filter-drawer:not([open]) > .users-filter-drawer-panel,
            details.users-filter-drawer > .users-filter-drawer-panel,
            details.users-filter-drawer:not([open]) > .users-table-filter,
            details.users-filter-drawer > .users-table-filter {
                display: block;
            }
        }

        .users-filter-drawer-panel {
            display: grid;
            gap: 14px;
        }

        .users-filter-toggle-copy {
            display: grid;
            gap: 4px;
        }

        .users-filter-toggle-copy strong {
            font-size: 1rem;
            line-height: 1.12;
            color: var(--text-primary);
        }

        .users-filter-toggle-copy small {
            color: var(--text-soft);
            line-height: 1.5;
        }

        .users-filter-toggle-icon {
            width: 40px;
            height: 40px;
            display: inline-grid;
            place-items: center;
            border-radius: 14px;
            border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
            background: color-mix(in srgb, var(--primary-soft) 82%, var(--panel-bg));
            color: var(--primary);
            transition: transform .18s ease;
        }

        .users-mobile-fab {
            display: none;
        }

        .users-mobile-kicker {
            font-size: .72rem;
            letter-spacing: .16em;
            text-transform: uppercase;
            color: var(--text-muted);
            font-weight: 800;
        }

        .users-mobile-hub-copy {
            display: grid;
            gap: 8px;
        }

        .users-mobile-hub-copy strong {
            font-size: 1.22rem;
            line-height: 1.08;
            color: var(--text-primary);
        }

        .users-mobile-hub-copy p {
            margin: 0;
            color: var(--text-soft);
            line-height: 1.55;
        }

        .users-mobile-hub-stats {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 12px;
        }

        .users-mobile-hub-stat {
            display: grid;
            gap: 6px;
            padding: 14px;
            border-radius: 18px;
            border: 1px solid color-mix(in srgb, var(--surface-border) 82%, transparent);
            background: color-mix(in srgb, var(--panel-bg) 96%, transparent);
            box-shadow: 0 12px 24px rgba(15, 23, 42, .08);
        }

        .users-mobile-hub-stat span,
        .users-mobile-hub-stat small {
            color: var(--text-muted);
        }

        .users-mobile-hub-stat span {
            font-size: .72rem;
            font-weight: 800;
            letter-spacing: .12em;
            text-transform: uppercase;
        }

        .users-mobile-hub-stat strong {
            font-size: 1.25rem;
            line-height: 1;
            color: var(--text-primary);
        }

        .users-mobile-hub-stat small {
            font-size: .78rem;
            line-height: 1.4;
        }

        .users-overview-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            padding: 10px 18px;
            border-radius: 12px;
            border: 1px solid color-mix(in srgb, var(--surface-border) 60%, transparent);
            background: color-mix(in srgb, var(--panel-bg) 60%, transparent);
        }

        .users-overview-stats {
            display: flex;
            align-items: center;
            gap: 0;
        }

        .users-stat {
            display: flex;
            align-items: baseline;
            gap: 5px;
            padding: 4px 14px;
        }

        .users-stat:first-child { padding-left: 2px; }

        .users-stat strong {
            font-size: 1rem;
            font-weight: 700;
            color: var(--text-primary);
        }

        .users-stat span {
            font-size: .78rem;
            color: var(--text-muted);
        }

        .users-stat-sep {
            display: block;
            width: 1px;
            height: 14px;
            background: color-mix(in srgb, var(--surface-border) 80%, transparent);
            flex-shrink: 0;
        }

        .users-overview-actions {
            display: flex;
            justify-content: flex-end;
            flex: 0 0 auto;
        }

        .users-filter-kicker {
            font-size: .72rem;
            letter-spacing: .16em;
            text-transform: uppercase;
            color: var(--text-muted);
            font-weight: 800;
        }

        .users-filter-copy {
            color: var(--text-soft);
            line-height: 1.55;
            margin: 0;
        }

        .users-filter-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            padding: 0;
            overflow: hidden;
        }

        .users-filter-card {
            align-items: stretch;
            padding: 0;
            overflow: hidden;
        }

        .users-table-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            padding: 18px 24px;
            border-bottom: 1px solid color-mix(in srgb, var(--surface-border) 72%, transparent);
        }

        html[data-theme="light"] .users-table-toolbar {
            background: linear-gradient(180deg, rgba(247, 250, 255, .96) 0%, rgba(240, 245, 251, .88) 100%);
            border-bottom-color: rgba(148, 163, 184, .18);
        }

        .users-table-toolbar-copy {
            display: grid;
            gap: 6px;
            max-width: 520px;
        }

        .users-table-toolbar-meta {
            display: flex;
            align-items: center;
            gap: 16px;
            flex-shrink: 0;
        }

        .users-table-filter {
            margin: 0 20px 20px;
            padding: 16px 18px;
            background: color-mix(in srgb, var(--panel-soft) 62%, var(--panel-bg));
        }

        html[data-theme="light"] .users-table-filter {
            border: 1px solid rgba(148, 163, 184, .20);
            border-radius: 20px;
            background: linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(244, 248, 253, .98) 100%);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92);
        }

        .users-filter-shell {
            width: 100%;
            margin: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
            padding: 24px;
        }

        .users-filter-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 18px;
        }

        .feature-head,
        .hero-body,
        .table-footer {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 18px;
            flex-wrap: wrap;
        }

        .feature-head,
        .hero-body {
            padding: 24px;
        }

        .feature-head-tight {
            padding-bottom: 16px;
        }

        .feature-aside,
        .filter-actions,
        .action-set,
        .pill-row {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: nowrap;
        }

        .feature-aside {
            justify-content: flex-end;
        }

        .section-kicker,
        .summary-label {
            font-size: .74rem;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--primary);
            font-weight: 800;
        }

        .section-heading,
        .hero-title {
            margin: 10px 0 6px;
            font-size: clamp(1.55rem, 2.4vw, 2.55rem);
            line-height: 1.05;
        }

        .section-copy,
        .hero-copy p,
        .summary-copy {
            margin: 0;
            color: var(--text-soft);
            line-height: 1.65;
        }

        .hero-card {
            position: relative;
            overflow: hidden;
            background:
                radial-gradient(circle at top right, rgba(56, 189, 248, .18), transparent 34%),
                linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, var(--panel-bg)) 0%, color-mix(in srgb, var(--panel-bg) 84%, transparent) 100%);
        }

        .hero-card::after {
            content: '';
            position: absolute;
            inset: auto -90px -100px auto;
            width: 240px;
            height: 240px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .06);
            pointer-events: none;
        }

        .hero-copy {
            position: relative;
            z-index: 1;
            max-width: 760px;
        }

        .stat-chip,
        .table-meta-chip {
            display: inline-flex;
            flex-direction: column;
            gap: 4px;
            padding: 12px 16px;
            border-radius: 18px;
            border: 1px solid color-mix(in srgb, var(--surface-border) 88%, transparent);
            background: color-mix(in srgb, var(--panel-bg) 94%, transparent);
            color: var(--text-soft);
            min-width: 160px;
        }

        .stat-chip strong,
        .table-meta-chip {
            color: var(--text-primary);
            font-weight: 800;
        }

        .stat-chip strong {
            font-size: 1.5rem;
            line-height: 1;
        }

        .stat-chip-strong {
            min-width: 220px;
        }

        .dashboard-page {
            gap: 22px;
        }

        .dashboard-hero {
            padding: 24px;
            border-radius: 28px;
        }

        .dashboard-hero-grid {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
            gap: 18px;
            align-items: stretch;
        }

        .dashboard-hero-actions {
            display: flex;
            align-items: center;
            gap: 14px;
            flex-wrap: wrap;
            margin-top: 20px;
        }

        .dashboard-hero-caption {
            color: var(--text-muted);
            font-size: .86rem;
            line-height: 1.5;
        }

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

        .dashboard-hero-chip {
            min-width: 0;
            justify-content: center;
            border-radius: 20px;
            box-shadow: 0 14px 30px rgba(15, 23, 42, .10);
        }

        .dashboard-hero-chip span,
        .dashboard-hero-chip small {
            line-height: 1.5;
        }

        .dashboard-metrics {
            display: grid;
            gap: 16px;
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .dashboard-metric-card {
            display: grid;
            gap: 16px;
        }

        .dashboard-metric-head {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .dashboard-metric-icon {
            width: 44px;
            height: 44px;
            display: inline-grid;
            place-items: center;
            border-radius: 14px;
            font-size: 1rem;
            border: 1px solid transparent;
        }

        .dashboard-metric-icon-blue {
            color: #1d4ed8;
            background: rgba(59, 130, 246, .16);
            border-color: rgba(59, 130, 246, .26);
        }

        .dashboard-metric-icon-emerald {
            color: #047857;
            background: rgba(16, 185, 129, .16);
            border-color: rgba(16, 185, 129, .24);
        }

        .dashboard-metric-icon-cyan {
            color: #0f766e;
            background: rgba(6, 182, 212, .16);
            border-color: rgba(6, 182, 212, .24);
        }

        .dashboard-metric-icon-amber {
            color: #b45309;
            background: rgba(245, 158, 11, .16);
            border-color: rgba(245, 158, 11, .26);
        }

        .dashboard-metric-icon-slate {
            color: var(--text-secondary);
            background: color-mix(in srgb, var(--panel-soft) 92%, var(--panel-bg));
            border-color: color-mix(in srgb, var(--surface-border) 90%, transparent);
        }

        .dashboard-metric-value {
            font-size: 2rem;
            line-height: 1;
            font-weight: 800;
            color: var(--text-primary);
        }

        .dashboard-metric-copy {
            margin: 0;
            line-height: 1.6;
        }

        .dashboard-content-grid {
            display: grid;
            gap: 18px;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        }

        .dashboard-panel {
            display: grid;
            gap: 18px;
        }

        .dashboard-panel-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 14px;
        }

        .dashboard-panel-title {
            margin: 8px 0 0;
            font-size: 1.15rem;
            line-height: 1.2;
        }

        .dashboard-panel-badge {
            display: inline-flex;
            align-items: center;
            padding: 8px 12px;
            border-radius: 999px;
            border: 1px solid color-mix(in srgb, var(--surface-border) 80%, transparent);
            background: color-mix(in srgb, var(--panel-bg) 94%, transparent);
            color: var(--text-muted);
            font-size: .76rem;
            font-weight: 800;
            letter-spacing: .06em;
            text-transform: uppercase;
            white-space: nowrap;
        }

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

        .dashboard-list-item {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            gap: 12px;
            align-items: center;
            padding: 14px;
            border-radius: 20px;
            border: 1px solid color-mix(in srgb, var(--surface-border) 82%, transparent);
            background: color-mix(in srgb, var(--panel-bg) 96%, transparent);
        }

        .dashboard-list-icon {
            width: 42px;
            height: 42px;
            display: inline-grid;
            place-items: center;
            border-radius: 14px;
            font-size: .94rem;
        }

        .dashboard-list-icon-movement {
            color: #0f766e;
            background: rgba(20, 184, 166, .16);
            border: 1px solid rgba(20, 184, 166, .26);
        }

        .dashboard-list-icon-maintenance {
            color: #b45309;
            background: rgba(245, 158, 11, .16);
            border: 1px solid rgba(245, 158, 11, .26);
        }

        .dashboard-list-copy {
            min-width: 0;
            display: grid;
            gap: 5px;
        }

        .dashboard-list-title-row {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .dashboard-list-copy p,
        .dashboard-list-copy small {
            margin: 0;
            color: var(--text-soft);
        }

        .dashboard-list-copy p {
            font-size: .92rem;
            line-height: 1.5;
        }

        .dashboard-list-copy small {
            font-size: .82rem;
            line-height: 1.45;
        }

        .dashboard-list-time {
            color: var(--text-muted);
            font-size: .78rem;
            font-weight: 700;
            white-space: nowrap;
        }

        .dashboard-empty {
            padding: 18px;
            border-radius: 18px;
            border: 1px dashed color-mix(in srgb, var(--surface-border) 86%, transparent);
            background: color-mix(in srgb, var(--panel-bg) 94%, transparent);
            color: var(--text-soft);
            line-height: 1.6;
        }

        html[data-theme="light"] .dashboard-hero-chip,
        html[data-theme="light"] .dashboard-list-item,
        html[data-theme="light"] .users-mobile-hub-stat {
            box-shadow: 0 16px 30px rgba(15, 23, 42, .07);
        }

        .filter-shell {
            padding: 18px;
            border-radius: 22px;
            border: 1px solid color-mix(in srgb, var(--surface-border) 86%, transparent);
            background: color-mix(in srgb, var(--panel-bg) 96%, transparent);
            margin: 0 24px 24px;
        }

        .filter-grid {
            display: grid;
            gap: 14px;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: end;
        }

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

        .filter-grid-users {
            grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
        }

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

        .filter-actions {
            justify-content: flex-end;
        }

        .filter-actions-auto {
            justify-content: space-between;
            gap: 14px;
        }

        .filter-auto-status {
            color: var(--text-soft);
            font-size: .86rem;
            line-height: 1.5;
        }

        .filter-submit-fallback {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        .filter-actions-wide {
            align-self: end;
        }

        .table-shell {
            margin: 0 24px 24px;
            border-radius: 22px;
            border: 1px solid color-mix(in srgb, var(--surface-border) 86%, transparent);
            overflow: hidden;
            background: color-mix(in srgb, var(--panel-bg) 98%, transparent);
        }

        html[data-theme="light"] .table-shell {
            border-color: rgba(148, 163, 184, .22);
            background: linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(248, 251, 255, .98) 100%);
        }

        .users-table-shell {
            margin: 0;
            border-radius: 24px;
            box-shadow: 0 20px 42px rgba(15, 23, 42, .08);
        }

        html[data-theme="light"] .users-table-shell {
            box-shadow: 0 30px 68px rgba(15, 23, 42, .08);
        }

        .users-empty-state {
            margin: 0 20px 20px;
        }

        .data-table {
            min-width: 980px;
        }

        .users-data-table {
            min-width: 980px;
        }

        .data-table thead th {
            background: color-mix(in srgb, var(--panel-bg) 92%, var(--surface-raised));
        }

        .users-data-table thead th {
            padding-top: 18px;
            padding-bottom: 18px;
            font-size: .76rem;
            letter-spacing: .14em;
            color: var(--text-muted);
        }

        html[data-theme="light"] .users-data-table thead th {
            background: #f4f7fb;
            color: #7a8aa0;
            border-bottom-color: rgba(148, 163, 184, .20);
        }

        .data-table tbody tr {
            transition: background .16s ease;
        }

        html[data-theme="light"] .users-data-table tbody tr:nth-child(odd) td {
            background: rgba(255, 255, 255, .96);
        }

        html[data-theme="light"] .users-data-table tbody tr:nth-child(even) td {
            background: rgba(249, 251, 254, .94);
        }

        .data-table tbody tr:hover {
            background: color-mix(in srgb, var(--panel-bg) 86%, var(--primary-soft));
        }

        html[data-theme="light"] .users-data-table tbody tr:hover td {
            background: rgba(239, 245, 255, .96);
        }

        .identity-cell,
        .identity-stack {
            display: flex;
            gap: 12px;
            align-items: flex-start;
        }

        .identity-stack {
            flex-direction: column;
            gap: 6px;
        }

        .identity-avatar {
            position: relative;
            flex: 0 0 48px;
            width: 48px;
            height: 48px;
            border-radius: 16px;
            overflow: hidden;
            display: grid;
            place-items: center;
            background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 62%, #fff));
            color: #fff;
            font-weight: 800;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
        }

        html[data-theme="light"] .identity-avatar {
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42), 0 10px 24px rgba(36, 89, 197, .18);
        }

        .identity-avatar.has-photo > span {
            opacity: 0;
        }

        .identity-avatar img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .identity-body {
            display: grid;
            gap: 4px;
        }

        .users-identity-body {
            gap: 6px;
        }

        .identity-headline {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .identity-name {
            font-size: 1rem;
        }

        .identity-handle,
        .identity-role,
        .table-empty {
            color: var(--text-soft);
            font-size: .9rem;
        }

        .contact-stack {
            display: grid;
            gap: 8px;
            min-width: 220px;
        }

        .users-identity-meta {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            color: var(--text-secondary);
            font-size: .9rem;
        }

        .users-identity-meta span {
            position: relative;
        }

        .users-identity-meta span + span::before {
            content: '';
            display: inline-block;
            width: 4px;
            height: 4px;
            margin-right: 10px;
            border-radius: 999px;
            vertical-align: middle;
            background: color-mix(in srgb, var(--text-muted) 80%, transparent);
        }

        .users-inline-badge {
            display: inline-flex;
            align-items: center;
            padding: 4px 9px;
            border-radius: 999px;
            background: color-mix(in srgb, var(--primary-soft) 74%, var(--panel-bg));
            color: var(--primary);
            font-size: .74rem;
            font-weight: 800;
            border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
        }

        html[data-theme="light"] .users-inline-badge {
            background: linear-gradient(135deg, #e0ebff 0%, #f8fbff 100%);
            border: 1px solid rgba(36, 89, 197, .16);
        }

        .info-line {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--text-secondary);
            line-height: 1.45;
        }

        .info-line i {
            width: 14px;
            color: var(--primary);
        }

        .pill {
            display: inline-flex;
            align-items: center;
            border-radius: 999px;
            padding: 6px 11px;
            font-size: .8rem;
            font-weight: 700;
            border: 1px solid transparent;
        }

        .pill-primary,
        .pill-blue {
            background: color-mix(in srgb, var(--primary-soft) 88%, var(--panel-bg));
            color: var(--primary-hover);
            border-color: color-mix(in srgb, var(--primary) 30%, transparent);
        }

        .pill-rose {
            background: color-mix(in srgb, var(--danger-bg) 70%, var(--panel-bg));
            color: #d946ef;
            border-color: rgba(217, 70, 239, .26);
        }

        .pill-amber {
            background: var(--warning-bg);
            color: var(--warning-text);
            border-color: var(--warning-border);
        }

        .pill-slate {
            background: color-mix(in srgb, var(--text-soft) 10%, var(--panel-bg));
            color: var(--text-secondary);
            border-color: color-mix(in srgb, var(--text-soft) 16%, transparent);
        }

        .profile-badge,
        .users-unit-chip {
            display: inline-flex;
            align-items: center;
            padding: 8px 13px;
            border-radius: 999px;
            border: 1px solid transparent;
            font-size: .8rem;
            font-weight: 900;
            letter-spacing: .01em;
            white-space: nowrap;
        }

        .profile-badge {
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 16px rgba(15, 23, 42, .06);
        }

        .profile-badge-amber {
            color: #7b4700;
            background: color-mix(in srgb, var(--warning-bg) 100%, var(--panel-bg));
            border-color: color-mix(in srgb, var(--warning-border) 96%, transparent);
        }

        .profile-badge-blue {
            color: #0f4bad;
            background: color-mix(in srgb, var(--primary-soft) 100%, var(--panel-bg));
            border-color: color-mix(in srgb, var(--primary) 46%, transparent);
        }

        .profile-badge-violet {
            color: #4f3cc5;
            background: rgba(99, 102, 241, .30);
            border-color: rgba(99, 102, 241, .44);
        }

        .profile-badge-teal {
            color: #0b6b64;
            background: rgba(20, 184, 166, .30);
            border-color: rgba(13, 148, 136, .44);
        }

        .profile-badge-slate,
        .users-unit-chip {
            color: var(--text-secondary);
            background: color-mix(in srgb, var(--panel-soft) 92%, var(--panel-bg));
            border-color: color-mix(in srgb, var(--surface-border) 94%, transparent);
        }

        .action-circle {
            width: 38px;
            height: 38px;
            display: inline-grid;
            place-items: center;
            padding: 0;
            border-radius: 50%;
            border: 1px solid color-mix(in srgb, var(--surface-border) 88%, transparent);
            background: color-mix(in srgb, var(--panel-bg) 96%, transparent);
            color: var(--text-secondary);
            cursor: pointer;
            appearance: none;
            font: inherit;
            box-shadow: 0 10px 20px rgba(15, 23, 42, .08);
            transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
        }

        html[data-theme="light"] .action-circle {
            box-shadow: 0 10px 20px rgba(15, 23, 42, .05);
        }

        .action-circle:hover {
            transform: translateY(-2px);
            box-shadow: 0 14px 24px rgba(15, 23, 42, .14);
        }

        .action-circle:disabled {
            opacity: .46;
            cursor: not-allowed;
            transform: none;
        }

        .action-circle-primary {
            color: var(--primary-hover);
            border-color: color-mix(in srgb, var(--primary) 48%, transparent);
            background: linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 100%, var(--panel-bg)) 0%, color-mix(in srgb, var(--primary-soft) 84%, #ffffff) 100%);
        }

        .action-circle-muted {
            color: var(--text-secondary);
        }

        .action-circle-warm {
            color: var(--warning-text);
            border-color: color-mix(in srgb, var(--warning-border) 100%, transparent);
            background: linear-gradient(135deg, color-mix(in srgb, var(--warning-bg) 100%, var(--panel-bg)) 0%, color-mix(in srgb, var(--warning-bg) 86%, #ffffff) 100%);
        }

        .action-circle-success {
            color: var(--success-text);
            border-color: color-mix(in srgb, var(--success-border) 100%, transparent);
            background: linear-gradient(135deg, color-mix(in srgb, var(--success-bg) 100%, var(--panel-bg)) 0%, color-mix(in srgb, var(--success-bg) 84%, #ffffff) 100%);
        }

        .action-circle-danger {
            color: var(--danger-text);
            border-color: color-mix(in srgb, var(--danger-border) 100%, transparent);
            background: linear-gradient(135deg, color-mix(in srgb, var(--danger-bg) 100%, var(--panel-bg)) 0%, color-mix(in srgb, var(--danger-bg) 86%, #ffffff) 100%);
        }

        .action-circle-blue {
            color: #1e40af;
            border-color: rgba(59, 130, 246, .44);
            background: linear-gradient(135deg, rgba(219, 234, 254, .96) 0%, rgba(191, 219, 254, .86) 100%);
        }

        .action-circle-yellow {
            color: #854d0e;
            border-color: rgba(202, 138, 4, .44);
            background: linear-gradient(135deg, rgba(254, 249, 195, .96) 0%, rgba(253, 230, 138, .88) 100%);
        }

        .action-circle-orange {
            color: #9a3412;
            border-color: rgba(249, 115, 22, .44);
            background: linear-gradient(135deg, rgba(255, 237, 213, .96) 0%, rgba(253, 186, 116, .78) 100%);
        }

        .action-circle-purple {
            color: #4f3cc5;
            border-color: rgba(139, 92, 246, .44);
            background: linear-gradient(135deg, rgba(237, 233, 254, .96) 0%, rgba(221, 214, 254, .88) 100%);
        }

        .action-form {
            margin: 0;
        }

        .users-action-set {
            justify-content: flex-end;
        }

        .table-row-current td {
            background: color-mix(in srgb, var(--primary-soft) 22%, var(--panel-bg));
        }

        html[data-theme="light"] .table-row-current td {
            background: rgba(232, 240, 255, .98) !important;
        }

        .table-row-current td:first-child {
            box-shadow: inset 4px 0 0 color-mix(in srgb, var(--primary) 78%, transparent);
        }

        .table-footer {
            padding: 18px 24px 0;
            color: var(--text-soft);
        }

        .users-table-footer {
            padding-top: 20px;
            border-top: 1px solid color-mix(in srgb, var(--surface-border) 76%, transparent);
            background: color-mix(in srgb, var(--panel-bg) 98%, transparent);
        }

        html[data-theme="light"] .users-table-footer {
            background: linear-gradient(180deg, rgba(255, 255, 255, .78) 0%, rgba(246, 249, 252, .96) 100%);
            border-top-color: rgba(148, 163, 184, .18);
        }

        .table-footer-copy {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }

        .table-meta-chip-inline {
            min-width: auto;
            flex-direction: row;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 14px;
            font-size: .78rem;
            letter-spacing: .01em;
            color: var(--text-muted);
            background: color-mix(in srgb, var(--panel-soft) 36%, var(--panel-bg));
            border-color: color-mix(in srgb, var(--surface-border) 60%, transparent);
            white-space: nowrap;
        }

        .table-meta-chip-inline strong {
            font-size: .94rem;
            line-height: 1;
            color: var(--text-secondary);
        }

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

        .pager-compact {
            justify-content: flex-end;
        }

        .pager-group {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .pager-link {
            min-width: 40px;
            height: 40px;
            padding: 0 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 14px;
            border: 1px solid color-mix(in srgb, var(--surface-border) 86%, transparent);
            background: color-mix(in srgb, var(--panel-bg) 96%, transparent);
            color: var(--text-secondary);
            font-weight: 700;
            box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
            transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
        }

        .pager-link:hover {
            transform: translateY(-1px);
            border-color: color-mix(in srgb, var(--primary) 24%, transparent);
            background: color-mix(in srgb, var(--primary-soft) 48%, var(--panel-bg));
            color: var(--primary);
        }

        .pager-link.current {
            border-color: var(--primary);
            background: var(--primary-soft);
            color: var(--primary);
            box-shadow: 0 14px 28px rgba(37, 99, 235, .14);
        }

        .pager-link-arrow {
            gap: 10px;
            padding-inline: 16px;
        }

        .pager-link-number {
            min-width: 42px;
            padding-inline: 0;
        }

        .pager-link.disabled {
            opacity: .46;
            pointer-events: none;
            box-shadow: none;
        }

        .pager-gap {
            min-width: 28px;
            text-align: center;
            color: var(--text-muted);
            font-weight: 700;
        }

        .notice-strip {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 14px 18px;
            border-radius: 18px;
            border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--surface-border));
            background: color-mix(in srgb, var(--primary-soft) 40%, var(--panel-bg));
            color: var(--text-secondary);
        }

        html[data-theme="light"] .notice-strip {
            background: linear-gradient(180deg, rgba(245, 249, 255, .94) 0%, rgba(235, 243, 255, .90) 100%);
            border-color: rgba(122, 162, 238, .24);
        }

        .notice-strip i {
            color: var(--primary);
        }

        .users-notice-strip {
            border-radius: 22px;
        }

        html[data-theme="dark"] body.shell-body {
            background:
                radial-gradient(circle at 16% 14%, rgba(107, 136, 182, .10), transparent 20%),
                radial-gradient(circle at 84% 82%, rgba(61, 78, 102, .12), transparent 18%),
                linear-gradient(180deg, #0b1017 0%, #0f141d 36%, #0b1017 100%);
        }

        html[data-theme="dark"] .app-shell {
            background: linear-gradient(180deg, #0a0f15 0%, #0d131a 100%);
        }

        html[data-theme="dark"] .app-main {
            background: linear-gradient(180deg, rgba(10, 15, 22, .92) 0%, rgba(12, 17, 24, .98) 100%);
        }

        html[data-theme="dark"] .app-main-inner {
            background: linear-gradient(180deg, rgba(16, 22, 31, .92) 0%, rgba(12, 17, 24, .98) 100%);
        }

        html[data-theme="dark"] .topbar {
            background: rgba(14, 19, 27, .86);
            border-bottom-color: rgba(148, 163, 184, .10);
            box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
            backdrop-filter: blur(16px);
        }

        html[data-theme="dark"] .toolbar {
            background: linear-gradient(180deg, rgba(17, 23, 32, .92) 0%, rgba(15, 20, 28, .96) 100%);
            border-bottom-color: rgba(148, 163, 184, .08);
        }

        html[data-theme="dark"] .card,
        html[data-theme="dark"] .metric {
            background: linear-gradient(180deg, rgba(21, 28, 38, .98) 0%, rgba(17, 24, 34, .98) 100%);
            border-color: rgba(148, 163, 184, .10);
            box-shadow: 0 20px 40px rgba(0, 0, 0, .24);
        }

        html[data-theme="dark"] .users-overview-card {
            background: rgba(18, 25, 35, .60);
            border-color: rgba(148, 163, 184, .10);
        }

        html[data-theme="dark"] .users-table-toolbar {
            background: linear-gradient(180deg, rgba(20, 27, 38, .96) 0%, rgba(17, 24, 34, .98) 100%);
            border-bottom-color: rgba(148, 163, 184, .08);
        }

        html[data-theme="dark"] .users-table-filter {
            background: linear-gradient(180deg, rgba(18, 25, 35, .96) 0%, rgba(16, 22, 31, .98) 100%);
            border: 1px solid rgba(148, 163, 184, .10);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
        }

        html[data-theme="dark"] .table-shell {
            border-color: rgba(148, 163, 184, .10);
            background: linear-gradient(180deg, rgba(18, 25, 35, .98) 0%, rgba(15, 21, 30, .98) 100%);
        }

        html[data-theme="dark"] .users-data-table thead th {
            background: rgba(17, 23, 32, .98);
            color: #7f8ca1;
            border-bottom-color: rgba(148, 163, 184, .10);
        }

        html[data-theme="dark"] .users-data-table tbody tr:nth-child(odd) td {
            background: rgba(21, 28, 38, .98);
        }

        html[data-theme="dark"] .users-data-table tbody tr:nth-child(even) td {
            background: rgba(18, 25, 35, .98);
        }

        html[data-theme="dark"] .users-data-table tbody tr:hover td {
            background: rgba(28, 37, 49, .98);
        }

        html[data-theme="dark"] .identity-avatar {
            background: linear-gradient(135deg, #5e7dab, #354861);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10), 0 10px 20px rgba(0, 0, 0, .24);
        }

        html[data-theme="dark"] .profile-badge-amber {
            color: #f0d7a8;
            background: rgba(137, 101, 42, .72);
            border-color: rgba(208, 173, 104, .50);
            box-shadow: 0 10px 18px rgba(76, 55, 20, .28);
        }

        html[data-theme="dark"] .profile-badge-blue {
            color: #e4edfa;
            background: rgba(83, 112, 156, .76);
            border-color: rgba(146, 173, 217, .50);
            box-shadow: 0 10px 18px rgba(35, 52, 79, .30);
        }

        html[data-theme="dark"] .profile-badge-violet {
            color: #ddd4ff;
            background: rgba(96, 83, 158, .76);
            border-color: rgba(157, 141, 229, .48);
            box-shadow: 0 10px 18px rgba(49, 38, 89, .28);
        }

        html[data-theme="dark"] .profile-badge-teal {
            color: #d1f0ea;
            background: rgba(42, 124, 117, .76);
            border-color: rgba(104, 181, 173, .46);
            box-shadow: 0 10px 18px rgba(19, 63, 59, .28);
        }

        html[data-theme="dark"] .profile-badge-slate,
        html[data-theme="dark"] .users-unit-chip {
            color: #e0e7f2;
            background: rgba(41, 52, 67, .96);
            border-color: rgba(148, 163, 184, .22);
        }

        /* Unit chip — blue palette (light) */
        .users-unit-chip.unit-chip-blue-1 { color: #1e40af; background: rgba(219, 234, 254, .96); border-color: rgba(59, 130, 246, .40); }
        .users-unit-chip.unit-chip-blue-2 { color: #1d4ed8; background: rgba(191, 219, 254, .90); border-color: rgba(37,  99, 235, .44); }
        .users-unit-chip.unit-chip-blue-3 { color: #0369a1; background: rgba(186, 230, 253, .96); border-color: rgba(14, 165, 233, .40); }
        .users-unit-chip.unit-chip-blue-4 { color: #1e3a5f; background: rgba(147, 197, 253, .72); border-color: rgba(59, 130, 246, .55); }
        .users-unit-chip.unit-chip-blue-5 { color: #312e81; background: rgba(199, 210, 254, .90); border-color: rgba(99, 102, 241, .40); }
        .users-unit-chip.unit-chip-blue-6 { color: #164e63; background: rgba(207, 250, 254, .96); border-color: rgba(6,  182, 212, .40); }
        .users-unit-chip.unit-chip-blue-7 { color: #0c4a6e; background: rgba(224, 242, 254, .96); border-color: rgba(14, 165, 233, .48); }
        .users-unit-chip.unit-chip-blue-8 { color: #1e3799; background: rgba(235, 245, 255, .92); border-color: rgba(99, 130, 230, .44); }

        /* Unit chip — blue palette (dark) */
        html[data-theme="dark"] .users-unit-chip.unit-chip-blue-1 { color: #93c5fd; background: rgba(30,  58, 138, .42); border-color: rgba(59,  130, 246, .30); }
        html[data-theme="dark"] .users-unit-chip.unit-chip-blue-2 { color: #bfdbfe; background: rgba(29,  78, 216, .36); border-color: rgba(37,   99, 235, .34); }
        html[data-theme="dark"] .users-unit-chip.unit-chip-blue-3 { color: #7dd3fc; background: rgba(3,  105, 161, .38); border-color: rgba(14,  165, 233, .32); }
        html[data-theme="dark"] .users-unit-chip.unit-chip-blue-4 { color: #a5b4fc; background: rgba(49,  46, 129, .42); border-color: rgba(99,  102, 241, .32); }
        html[data-theme="dark"] .users-unit-chip.unit-chip-blue-5 { color: #e0f2fe; background: rgba(3,  105, 161, .30); border-color: rgba(14,  165, 233, .26); }
        html[data-theme="dark"] .users-unit-chip.unit-chip-blue-6 { color: #a5f3fc; background: rgba(22,  78,  99, .44); border-color: rgba(6,   182, 212, .34); }
        html[data-theme="dark"] .users-unit-chip.unit-chip-blue-7 { color: #7dd3fc; background: rgba(12,  74, 110, .44); border-color: rgba(14,  165, 233, .30); }
        html[data-theme="dark"] .users-unit-chip.unit-chip-blue-8 { color: #c7d2fe; background: rgba(30,  55, 153, .38); border-color: rgba(99,  130, 230, .32); }

        html[data-theme="dark"] .action-circle {
            border-color: rgba(148, 163, 184, .12);
            background: rgba(24, 32, 43, .98);
            color: #c3cede;
            box-shadow: 0 12px 22px rgba(0, 0, 0, .22);
        }

        html[data-theme="dark"] .action-circle-primary {
            color: #e8eff9;
            border-color: rgba(146, 173, 217, .44);
            background: linear-gradient(135deg, rgba(106, 134, 180, .92) 0%, rgba(73, 98, 135, .86) 100%);
            box-shadow: 0 12px 22px rgba(30, 44, 69, .34);
        }

        html[data-theme="dark"] .action-circle-warm {
            color: #f0d7a8;
            border-color: rgba(208, 173, 104, .42);
            background: linear-gradient(135deg, rgba(154, 117, 54, .90) 0%, rgba(114, 85, 39, .82) 100%);
            box-shadow: 0 12px 22px rgba(82, 58, 18, .32);
        }

        html[data-theme="dark"] .action-circle-success {
            color: #e3eefb;
            border-color: rgba(146, 173, 217, .42);
            background: linear-gradient(135deg, rgba(105, 136, 182, .90) 0%, rgba(73, 98, 135, .82) 100%);
            box-shadow: 0 12px 22px rgba(30, 44, 69, .32);
        }

        html[data-theme="dark"] .action-circle-danger {
            color: #ffd6d6;
            border-color: rgba(220, 130, 130, .44);
            background: linear-gradient(135deg, rgba(153, 70, 70, .92) 0%, rgba(114, 53, 53, .84) 100%);
            box-shadow: 0 12px 22px rgba(86, 27, 27, .34);
        }

        html[data-theme="dark"] .action-circle-blue {
            color: #93c5fd;
            border-color: rgba(59, 130, 246, .34);
            background: linear-gradient(135deg, rgba(30, 58, 138, .52) 0%, rgba(29, 78, 216, .40) 100%);
            box-shadow: 0 12px 22px rgba(10, 25, 65, .34);
        }

        html[data-theme="dark"] .toolbar-notification-dropdown,
        html[data-theme="dark"] .app-toast {
            box-shadow: 0 26px 52px rgba(0, 0, 0, .34);
        }

        html[data-theme="dark"] .toolbar-notification-item {
            background: rgba(24, 32, 43, .92);
            border-color: rgba(148, 163, 184, .12);
        }

        html[data-theme="dark"] .toolbar-notification-icon {
            background: rgba(44, 70, 109, .46);
            color: #c8dcfb;
        }

        html[data-theme="dark"] .app-toast-close:hover {
            background: rgba(51, 65, 85, .52);
        }

        html[data-theme="dark"] .action-circle-yellow {
            color: #fde047;
            border-color: rgba(202, 138, 4, .38);
            background: linear-gradient(135deg, rgba(113, 85, 0, .60) 0%, rgba(133, 77, 14, .48) 100%);
            box-shadow: 0 12px 22px rgba(80, 55, 0, .32);
        }

        html[data-theme="dark"] .action-circle-orange {
            color: #fdba74;
            border-color: rgba(249, 115, 22, .36);
            background: linear-gradient(135deg, rgba(154, 52, 18, .56) 0%, rgba(180, 75, 22, .44) 100%);
            box-shadow: 0 12px 22px rgba(100, 30, 5, .34);
        }

        html[data-theme="dark"] .action-circle-purple {
            color: #c4b5fd;
            border-color: rgba(139, 92, 246, .36);
            background: linear-gradient(135deg, rgba(67, 50, 155, .56) 0%, rgba(88, 60, 190, .44) 100%);
            box-shadow: 0 12px 22px rgba(30, 15, 90, .34);
        }

        html[data-theme="dark"] .tag,
        html[data-theme="dark"] .status-pill {
            background: rgba(83, 112, 156, .70);
            color: #e8eff9;
            border-color: rgba(146, 173, 217, .44);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 8px 16px rgba(25, 39, 60, .26);
        }

        html[data-theme="dark"] .tag.warning,
        html[data-theme="dark"] .status-pill.warn {
            background: rgba(137, 101, 42, .70);
            color: #f0d7a8;
            border-color: rgba(208, 173, 104, .42);
        }

        html[data-theme="dark"] .tag.danger,
        html[data-theme="dark"] .status-pill.off {
            background: rgba(138, 61, 61, .72);
            color: #ffd6d6;
            border-color: rgba(220, 130, 130, .44);
        }

        html[data-theme="dark"] .status-pill.ok {
            background: rgba(20, 83, 45, .54);
            color: #86efac;
            border-color: rgba(74, 222, 128, .36);
        }

        html[data-theme="dark"] .btn {
            background: linear-gradient(135deg, #8aa7d2 0%, #6784b0 55%, #58729a 100%);
            border-color: rgba(146, 173, 217, .46);
            box-shadow: 0 18px 34px rgba(24, 36, 54, .34);
        }

        html[data-theme="dark"] .btn:hover {
            background: linear-gradient(135deg, #9ab3d8 0%, #7590bb 55%, #617aa3 100%);
            box-shadow: 0 22px 38px rgba(24, 36, 54, .40);
        }

        html[data-theme="dark"] .btn-secondary {
            background: linear-gradient(135deg, rgba(53, 72, 97, .92) 0%, rgba(34, 46, 62, .96) 100%);
            color: #e8eff9;
            border-color: rgba(126, 151, 191, .36);
            box-shadow: 0 12px 22px rgba(0, 0, 0, .20);
        }

        html[data-theme="dark"] .btn-secondary:hover {
            background: linear-gradient(135deg, rgba(70, 92, 123, .96) 0%, rgba(44, 58, 78, .98) 100%);
        }

        html[data-theme="dark"] .users-create-trigger,
        html[data-theme="dark"] .users-filter-clear-btn {
            background: linear-gradient(135deg, #8aa7d2 0%, #6784b0 55%, #58729a 100%);
            color: #f8fbff;
            border-color: rgba(146, 173, 217, .46);
            box-shadow: 0 18px 34px rgba(24, 36, 54, .34);
        }

        html[data-theme="dark"] .users-create-trigger:hover,
        html[data-theme="dark"] .users-filter-clear-btn:hover {
            background: linear-gradient(135deg, #9ab3d8 0%, #7590bb 55%, #617aa3 100%);
            box-shadow: 0 22px 38px rgba(24, 36, 54, .40);
        }

        html[data-theme="dark"] .btn-danger {
            background: linear-gradient(135deg, #bb6262 0%, #944747 55%, #7f3d3d 100%);
            border-color: rgba(220, 130, 130, .44);
            box-shadow: 0 18px 34px rgba(62, 18, 18, .34);
        }

        html[data-theme="dark"] .table-row-current td {
            background: rgba(30, 41, 56, .98) !important;
        }

        html[data-theme="dark"] .users-table-footer {
            background: linear-gradient(180deg, rgba(18, 25, 35, .96) 0%, rgba(15, 21, 30, .98) 100%);
            border-top-color: rgba(148, 163, 184, .08);
        }

        html[data-theme="light"] .users-table-toolbar-meta .table-meta-chip-inline,
        html[data-theme="light"] .table-footer-copy .table-meta-chip-inline {
            background: rgba(255, 255, 255, .68);
            border-color: rgba(148, 163, 184, .18);
        }

        html[data-theme="dark"] .users-table-toolbar-meta .table-meta-chip-inline,
        html[data-theme="dark"] .table-footer-copy .table-meta-chip-inline {
            background: rgba(23, 31, 43, .76);
            border-color: rgba(148, 163, 184, .12);
            color: #93a3b8;
        }

        html[data-theme="dark"] .table-meta-chip-inline strong {
            color: #d0d9e4;
        }

        html[data-theme="dark"] .notice-strip {
            background: linear-gradient(180deg, rgba(22, 30, 41, .96) 0%, rgba(17, 24, 34, .98) 100%);
            border-color: rgba(107, 136, 182, .16);
            color: #c8d2e0;
        }

        .confirm-modal-backdrop {
            position: fixed;
            inset: 0;
            display: grid;
            place-items: center;
            padding: 24px;
            background: rgba(15, 23, 42, .48);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity .18s ease, visibility .18s ease;
            z-index: 60;
        }

        .drawer-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, .32);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity .18s ease, visibility .18s ease;
            z-index: 58;
        }

        .drawer-backdrop.is-open {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .drawer-panel {
            position: absolute;
            top: 0;
            right: 0;
            width: min(100%, 620px);
            height: 100%;
            padding: 28px 28px 26px;
            overflow-y: auto;
            border-left: 1px solid color-mix(in srgb, var(--surface-border) 82%, transparent);
            background: color-mix(in srgb, var(--panel-bg) 99%, transparent);
            box-shadow: -24px 0 60px rgba(15, 23, 42, .16);
            transform: translateX(100%);
            transition: transform .22s ease;
        }

        .user-create-drawer {
            display: grid;
            align-content: start;
            gap: 18px;
            background:
                radial-gradient(circle at top right, color-mix(in srgb, var(--primary-soft) 72%, transparent) 0%, transparent 34%),
                color-mix(in srgb, var(--panel-bg) 99%, transparent);
        }

        .drawer-backdrop.is-open .drawer-panel {
            transform: translateX(0);
        }

        .drawer-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 18px;
            margin-bottom: 20px;
        }

        .user-create-drawer-head {
            position: sticky;
            top: -28px;
            z-index: 2;
            margin-bottom: 2px;
            padding-bottom: 18px;
            border-bottom: 1px solid color-mix(in srgb, var(--surface-border) 78%, transparent);
            background: linear-gradient(180deg, color-mix(in srgb, var(--panel-bg) 99%, transparent) 0%, color-mix(in srgb, var(--panel-bg) 97%, transparent) 85%, rgba(255, 255, 255, 0) 100%);
        }

        .user-password-drawer-head {
            position: sticky;
            top: -28px;
            z-index: 2;
            margin-bottom: 2px;
            padding-bottom: 18px;
            border-bottom: 1px solid rgba(139, 92, 246, .22);
            background: linear-gradient(180deg, rgba(237, 233, 254, .98) 0%, rgba(237, 233, 254, .92) 80%, rgba(237, 233, 254, 0) 100%);
        }

        .user-password-drawer-head .drawer-title {
            color: #3b0764;
        }

        .user-password-drawer-head .drawer-copy {
            color: #6d28d9;
        }

        .user-edit-drawer-head {
            position: sticky;
            top: -28px;
            z-index: 2;
            margin-bottom: 2px;
            padding-bottom: 18px;
            border-bottom: 1px solid rgba(217, 119, 6, .22);
            background: linear-gradient(180deg, rgba(254, 243, 199, .98) 0%, rgba(254, 243, 199, .92) 80%, rgba(254, 243, 199, 0) 100%);
        }

        .user-edit-drawer-head .drawer-title {
            color: #78350f;
        }

        .user-edit-drawer-head .drawer-copy {
            color: #b45309;
        }

        .btn-amber {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 55%, #b45309 100%);
            border-color: rgba(180, 83, 9, .56);
            color: #fff;
            box-shadow: 0 18px 34px rgba(120, 53, 15, .24);
        }

        .btn-amber:hover {
            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 55%, #d97706 100%);
        }

        .btn-purple {
            background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 55%, #5b21b6 100%);
            border-color: rgba(109, 40, 217, .56);
            color: #fff;
            box-shadow: 0 18px 34px rgba(91, 33, 182, .26);
        }

        .btn-purple:hover {
            background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 55%, #6d28d9 100%);
        }

        .drawer-title {
            margin: 0;
            font-size: 1.55rem;
            line-height: 1.1;
            color: var(--text-primary);
        }

        .drawer-copy {
            margin: 10px 0 0;
            color: var(--text-soft);
            line-height: 1.6;
            max-width: 34rem;
        }

        .drawer-feedback,
        .users-page-flash {
            display: grid;
            gap: 12px;
        }

        .drawer-feedback {
            margin-bottom: 18px;
        }

        .user-create-drawer form.panel-stack {
            gap: 18px;
        }

        .drawer-form-shell {
            display: grid;
            gap: 16px;
        }

        .drawer-form-section {
            display: grid;
            gap: 16px;
            padding: 18px;
            border-radius: 22px;
            border: 1px solid color-mix(in srgb, var(--surface-border) 74%, transparent);
            background: linear-gradient(180deg, color-mix(in srgb, var(--panel-soft) 84%, var(--panel-bg)) 0%, color-mix(in srgb, var(--panel-bg) 99%, transparent) 100%);
            box-shadow: 0 16px 32px rgba(15, 23, 42, .08);
        }

        .drawer-form-section-primary {
            background: linear-gradient(145deg, color-mix(in srgb, var(--primary-soft) 72%, var(--panel-bg)) 0%, color-mix(in srgb, var(--panel-bg) 99%, transparent) 100%);
            border-color: color-mix(in srgb, var(--primary) 20%, transparent);
        }

        .drawer-form-section-highlight {
            background: linear-gradient(145deg, color-mix(in srgb, var(--success-bg) 90%, var(--panel-bg)) 0%, color-mix(in srgb, var(--panel-bg) 99%, transparent) 100%);
            border-color: color-mix(in srgb, var(--success-border) 92%, transparent);
        }

        .drawer-form-section-head {
            display: grid;
            gap: 8px;
        }

        .drawer-form-section-head h4 {
            margin: 0;
            font-size: 1.02rem;
            line-height: 1.2;
            color: var(--text-primary);
        }

        .drawer-form-section-head p {
            margin: 0;
            color: var(--text-soft);
            font-size: .92rem;
            line-height: 1.55;
        }

        .drawer-form-section-kicker {
            font-size: .72rem;
            font-weight: 800;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--primary);
        }

        .users-page-flash:empty {
            display: none;
        }

        .drawer-actions {
            position: sticky;
            bottom: 0;
            padding-top: 18px;
            border-top: 1px solid color-mix(in srgb, var(--surface-border) 70%, transparent);
            background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, color-mix(in srgb, var(--panel-bg) 98%, transparent) 36%);
        }

        .user-create-drawer .drawer-form-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px;
        }

        .user-create-drawer .field,
        .user-create-drawer .field-inline,
        .user-create-drawer .form-actions {
            min-width: 0;
        }

        .user-create-drawer .field-span-full,
        .user-create-drawer .field-inline,
        .user-create-drawer .form-actions {
            grid-column: 1 / -1;
        }

        .user-create-drawer .field-hint {
            color: var(--text-muted);
            font-size: .79rem;
            line-height: 1.5;
        }

        .drawer-upload-field {
            padding: 18px;
            border-radius: 18px;
            border: 1px dashed color-mix(in srgb, var(--primary) 26%, transparent);
            background: linear-gradient(145deg, color-mix(in srgb, var(--primary-soft) 34%, var(--panel-bg)) 0%, color-mix(in srgb, var(--panel-bg) 99%, transparent) 100%);
        }

        .drawer-upload-shell {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            gap: 16px;
            align-items: center;
        }

        .drawer-upload-avatar {
            position: relative;
            width: 88px;
            height: 88px;
            border-radius: 999px;
            overflow: hidden;
            display: grid;
            place-items: center;
            border: 2px solid color-mix(in srgb, var(--primary) 18%, transparent);
            background: linear-gradient(145deg, color-mix(in srgb, var(--primary-soft) 78%, var(--panel-bg)) 0%, color-mix(in srgb, var(--panel-bg) 98%, transparent) 100%);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34), 0 14px 28px rgba(15, 23, 42, .08);
        }

        .drawer-upload-avatar img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .drawer-upload-avatar-placeholder {
            display: grid;
            place-items: center;
            width: 100%;
            height: 100%;
            color: var(--primary);
            font-size: 2rem;
        }

        .drawer-upload-copy {
            display: grid;
            gap: 6px;
            min-width: 0;
        }

        .drawer-upload-copy strong {
            color: var(--text-primary);
            font-size: 1rem;
        }

        .drawer-upload-copy span {
            color: var(--text-soft);
            font-size: .88rem;
            line-height: 1.55;
        }

        .drawer-upload-filename {
            color: var(--text-muted);
            font-size: .8rem;
            word-break: break-word;
        }

        .drawer-upload-input {
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            padding: 0;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        .drawer-upload-trigger {
            white-space: nowrap;
        }

        .drawer-upload-field.has-file {
            border-color: rgba(34, 197, 94, .34);
            background: linear-gradient(145deg, rgba(220, 252, 231, .78) 0%, color-mix(in srgb, var(--panel-bg) 99%, transparent) 100%);
        }

        .drawer-toggle-field {
            align-items: flex-start;
            gap: 14px;
            padding: 16px 18px;
            border-radius: 18px;
            border: 1px solid rgba(34, 197, 94, .26);
            background: linear-gradient(135deg, rgba(220, 252, 231, .90) 0%, rgba(240, 253, 244, .98) 100%);
        }

        .drawer-toggle-field input[type="checkbox"] {
            width: 18px;
            height: 18px;
            margin-top: 4px;
            accent-color: #16a34a;
        }

        .drawer-toggle-field label {
            display: block;
            margin-bottom: 4px;
            color: #166534;
        }

        .drawer-toggle-field .field-hint {
            color: #15803d;
        }

        html[data-theme="dark"] .drawer-backdrop {
            background: rgba(3, 8, 15, .52);
        }

        html[data-theme="dark"] .drawer-panel {
            background: linear-gradient(180deg, rgba(18, 25, 35, .98) 0%, rgba(14, 20, 29, .99) 100%);
            border-left-color: rgba(148, 163, 184, .12);
            box-shadow: -26px 0 70px rgba(0, 0, 0, .34);
        }

        html[data-theme="dark"] .user-create-drawer-head {
            border-bottom-color: rgba(148, 163, 184, .12);
            background: linear-gradient(180deg, rgba(18, 25, 35, .99) 0%, rgba(18, 25, 35, .95) 85%, rgba(18, 25, 35, 0) 100%);
        }

        html[data-theme="dark"] .user-password-drawer-head {
            border-bottom-color: rgba(139, 92, 246, .26);
            background: linear-gradient(180deg, rgba(28, 18, 50, .99) 0%, rgba(28, 18, 50, .95) 85%, rgba(28, 18, 50, 0) 100%);
        }

        html[data-theme="dark"] .user-password-drawer-head .drawer-title {
            color: #d8b4fe;
        }

        html[data-theme="dark"] .user-password-drawer-head .drawer-copy {
            color: #a78bfa;
        }

        html[data-theme="dark"] .user-edit-drawer-head {
            border-bottom-color: rgba(245, 158, 11, .28);
            background: linear-gradient(180deg, rgba(55, 32, 4, .99) 0%, rgba(55, 32, 4, .95) 85%, rgba(55, 32, 4, 0) 100%);
        }

        html[data-theme="dark"] .user-edit-drawer-head .drawer-title {
            color: #fde68a;
        }

        html[data-theme="dark"] .user-edit-drawer-head .drawer-copy {
            color: #fbbf24;
        }

        html[data-theme="dark"] .btn-amber {
            background: linear-gradient(135deg, rgba(245, 158, 11, .92) 0%, rgba(180, 83, 9, .84) 100%);
            border-color: rgba(251, 191, 36, .36);
            box-shadow: 0 18px 34px rgba(120, 53, 15, .38);
        }

        html[data-theme="dark"] .btn-purple {
            background: linear-gradient(135deg, rgba(139, 92, 246, .92) 0%, rgba(109, 40, 217, .84) 100%);
            border-color: rgba(167, 139, 250, .36);
            box-shadow: 0 18px 34px rgba(76, 29, 149, .38);
        }

        html[data-theme="dark"] .drawer-form-section {
            box-shadow: 0 18px 36px rgba(0, 0, 0, .18);
        }

        html[data-theme="dark"] .drawer-upload-field {
            background: linear-gradient(145deg, rgba(33, 46, 63, .96) 0%, rgba(23, 32, 45, .98) 100%);
            border-color: rgba(107, 136, 182, .26);
        }

        html[data-theme="dark"] .drawer-upload-avatar {
            border-color: rgba(107, 136, 182, .24);
            background: linear-gradient(145deg, rgba(34, 48, 66, .98) 0%, rgba(23, 33, 46, .98) 100%);
            box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .08), 0 16px 28px rgba(0, 0, 0, .22);
        }

        html[data-theme="dark"] .drawer-upload-avatar-placeholder {
            color: #8aa7d2;
        }

        html[data-theme="dark"] .drawer-upload-field.has-file {
            border-color: rgba(74, 222, 128, .28);
            background: linear-gradient(145deg, rgba(20, 83, 45, .42) 0%, rgba(18, 25, 35, .98) 100%);
        }

        html[data-theme="dark"] .drawer-toggle-field {
            border-color: rgba(74, 222, 128, .28);
            background: linear-gradient(135deg, rgba(20, 83, 45, .52) 0%, rgba(21, 128, 61, .18) 100%);
        }

        html[data-theme="dark"] .drawer-toggle-field label,
        html[data-theme="dark"] .drawer-toggle-field .field-hint {
            color: #86efac;
        }

        html[data-theme="dark"] .drawer-actions {
            background: linear-gradient(180deg, rgba(20, 27, 37, 0) 0%, rgba(14, 20, 29, .98) 36%);
        }

        .confirm-modal-backdrop.is-open {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        body.modal-open {
            overflow: hidden;
        }

        .confirm-modal {
            width: min(100%, 460px);
            display: grid;
            gap: 18px;
            padding: 24px;
            border-radius: 26px;
            border: 1px solid color-mix(in srgb, var(--surface-border) 80%, transparent);
            background: color-mix(in srgb, var(--panel-bg) 98%, transparent);
            box-shadow: 0 26px 72px rgba(15, 23, 42, .22);
        }

        .confirm-modal-head {
            display: grid;
            gap: 10px;
        }

        .confirm-modal-kicker {
            font-size: .72rem;
            font-weight: 800;
            letter-spacing: .16em;
            text-transform: uppercase;
            color: var(--text-muted);
        }

        .confirm-modal-title {
            margin: 0;
            font-size: 1.35rem;
            line-height: 1.15;
            color: var(--text-primary);
        }

        .confirm-modal-copy {
            margin: 0;
            color: var(--text-soft);
            line-height: 1.65;
        }

        .confirm-modal-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 12px;
            flex-wrap: wrap;
        }

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

        .detail-card {
            display: grid;
            gap: 14px;
        }

        .detail-list {
            display: grid;
            gap: 14px;
        }

        .detail-list div {
            padding: 14px 16px;
            border-radius: 18px;
            border: 1px solid color-mix(in srgb, var(--surface-border) 82%, transparent);
            background: color-mix(in srgb, var(--panel-bg) 96%, transparent);
        }

        .detail-list dt {
            margin-bottom: 6px;
            font-size: .78rem;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--text-muted);
        }

        .detail-list dd {
            margin: 0;
            color: var(--text-primary);
            line-height: 1.55;
        }

        .password-checklist {
            display: grid;
            gap: 12px;
            padding: 18px 20px;
            border-radius: 22px;
            border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--surface-border));
            background: color-mix(in srgb, var(--primary-soft) 26%, var(--panel-bg));
        }

        .password-checklist:not(.is-visible) {
            display: none;
        }

        .password-checklist-inline {
            margin-top: 2px;
        }

        .checklist-list {
            margin: 0;
            padding-left: 0;
            display: grid;
            gap: 8px;
            color: var(--text-secondary);
            list-style: none;
        }

        .checklist-list li {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 14px;
            border: 1px solid color-mix(in srgb, var(--danger-border) 82%, transparent);
            background: color-mix(in srgb, var(--danger-bg) 86%, var(--panel-bg));
            color: var(--danger-text);
            font-weight: 600;
            line-height: 1.45;
            transition: background .18s ease, border-color .18s ease, color .18s ease;
        }

        .checklist-list li > span {
            color: inherit;
        }

        .checklist-list li::before {
            content: '\2715';
            display: inline-grid;
            place-items: center;
            width: 20px;
            height: 20px;
            flex: 0 0 20px;
            border-radius: 999px;
            background: color-mix(in srgb, var(--danger-text) 12%, transparent);
            color: currentColor;
            font-size: .78rem;
            font-weight: 800;
        }

        .checklist-list li.is-met {
            border-color: rgba(34, 197, 94, .38);
            background: linear-gradient(135deg, rgba(220, 252, 231, .96) 0%, rgba(240, 253, 244, .98) 100%);
            color: #15803d !important;
        }

        .checklist-list li.is-met > span {
            color: #15803d !important;
        }

        .checklist-list li.is-met::before {
            content: '\2713';
            background: rgba(21, 128, 61, .12);
            color: #15803d;
        }

        .checklist-list li.is-pending {
            border-color: color-mix(in srgb, var(--surface-border) 86%, transparent);
            background: color-mix(in srgb, var(--panel-bg) 98%, transparent);
            color: var(--text-soft);
        }

        .checklist-list li.is-pending > span {
            color: var(--text-soft);
        }

        .checklist-list li.is-pending::before {
            content: '\2022';
            background: color-mix(in srgb, var(--surface-border) 56%, transparent);
            color: var(--text-muted);
        }

        html[data-theme="dark"] .checklist-list li.is-met {
            border-color: rgba(74, 222, 128, .28);
            background: linear-gradient(135deg, rgba(20, 83, 45, .52) 0%, rgba(21, 128, 61, .18) 100%);
            color: #86efac !important;
        }

        html[data-theme="dark"] .checklist-list li.is-met > span {
            color: #86efac !important;
        }

        html[data-theme="dark"] .checklist-list li.is-met::before {
            background: rgba(134, 239, 172, .12);
            color: #86efac;
        }
        }

        .summary-grid {
            display: grid;
            gap: 14px;
            grid-template-columns: repeat(5, minmax(0, 1fr));
        }

        .summary-card {
            position: relative;
            min-height: 128px;
            overflow: hidden;
            display: grid;
            gap: 14px;
        }

        .summary-card::after {
            content: '';
            position: absolute;
            width: 88px;
            height: 88px;
            right: -18px;
            bottom: -28px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .08);
            pointer-events: none;
        }

        .summary-top {
            display: flex;
            gap: 12px;
            align-items: flex-start;
        }

        .summary-icon {
            width: 40px;
            height: 40px;
            border-radius: 14px;
            display: grid;
            place-items: center;
            color: #fff;
        }

        .summary-icon-blue,
        .summary-card-blue {
            background: linear-gradient(135deg, rgba(37, 99, 235, .16), transparent 70%);
        }

        .summary-icon-blue {
            background-color: #2494f2;
        }

        .summary-icon-amber,
        .summary-card-amber {
            background: linear-gradient(135deg, rgba(245, 158, 11, .16), transparent 70%);
        }

        .summary-icon-amber {
            background-color: #f59e0b;
        }

        .summary-icon-cyan,
        .summary-card-cyan {
            background: linear-gradient(135deg, rgba(6, 182, 212, .16), transparent 70%);
        }

        .summary-icon-cyan {
            background-color: #0ea5e9;
        }

        .summary-icon-rose,
        .summary-card-rose {
            background: linear-gradient(135deg, rgba(244, 63, 94, .16), transparent 70%);
        }

        .summary-icon-rose {
            background-color: #ef4444;
        }

        .summary-icon-green,
        .summary-card-green {
            background: linear-gradient(135deg, rgba(34, 197, 94, .16), transparent 70%);
        }

        .summary-icon-green {
            background-color: #22c55e;
        }

        .summary-value {
            font-size: 2.3rem;
            line-height: 1;
        }

        .data-accent-link {
            color: var(--primary);
            font-weight: 800;
        }

        @media (max-width: 1280px) {
            .summary-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }

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

        @keyframes ll-pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: .7; transform: scale(.93); }
        }

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

        @media (max-width: 1080px) {
            .grid.cols-2,
            .grid.cols-4,
            .split,
            .summary-grid {
                grid-template-columns: 1fr;
            }

            .feature-head,
            .hero-body,
            .table-footer,
            .users-filter-head {
                flex-direction: column;
                align-items: stretch;
            }

            .users-table-toolbar {
                flex-direction: column;
                align-items: stretch;
                gap: 14px;
            }

            .filter-grid,
            .filter-grid-stretched,
            .filter-grid-users {
                grid-template-columns: 1fr;
            }

            .filter-field-wide {
                grid-column: auto;
            }

            .feature-aside,
            .filter-actions {
                justify-content: flex-start;
            }

            .filter-actions-auto {
                justify-content: space-between;
            }

            .users-overview-actions {
                flex: 0 0 auto;
                justify-content: flex-end;
            }

            .users-table-toolbar-meta {
                justify-content: flex-start;
            }

            .filter-shell,
            .table-shell {
                margin-left: 18px;
                margin-right: 18px;
            }

            .users-table-filter {
                margin-left: 18px;
                margin-right: 18px;
            }

            .app-shell {
                grid-template-columns: 1fr;
            }

            .app-shell::before {
                display: none;
            }

            .sidebar {
                position: fixed;
                inset: 0 auto 0 0;
                width: min(296px, calc(100vw - 32px));
                max-width: 100%;
                transform: translateX(-100%);
                transition: transform .34s cubic-bezier(.22, 1, .36, 1);
            }

            body.nav-open {
                overflow: hidden;
            }

            body.nav-open .sidebar {
                transform: translateX(0);
            }

            body.nav-open .sidebar-overlay {
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
            }

            .app-main {
                padding: 0;
            }

            .app-main-inner {
                min-height: 100vh;
                border-radius: 0;
                border-left: 0;
                border-right: 0;
            }

            body.sidebar-collapsed .app-shell {
                grid-template-columns: 1fr;
            }

            .sidebar-close {
                display: inline-flex;
            }

            body.sidebar-collapsed .sidebar-brand-copy {
                display: block;
            }

            body.sidebar-collapsed .sidebar-section-title {
                display: block;
            }

            body.sidebar-collapsed .sidebar-link-body {
                display: flex;
            }

            body.sidebar-collapsed .sidebar-user-copy {
                display: grid;
            }

            body.sidebar-collapsed .sidebar-user-chevron {
                display: flex;
            }

            body.sidebar-collapsed .sidebar-user-trigger {
                flex-direction: row;
                justify-content: flex-start;
                padding: 10px 12px;
                border-radius: 12px;
            }
        }

        @media (max-width: 768px) {
            .auth-shell {
                display: block;
            }

            .left-panel {
                min-height: 100vh;
                padding: 3rem 1.5rem 2rem;
            }

            .login-form {
                max-width: 100%;
            }

            .right-panel {
                display: none;
            }

            .topbar,
            .toolbar,
            .footerbar,
            .app-content {
                padding-left: 1rem;
                padding-right: 1rem;
            }

            .topbar,
            .panel-actions,
            .panel-header,
            .filter-bar,
            .form-actions {
                flex-direction: column;
            }

            .panel-actions > * {
                width: 100%;
            }

            .topbar {
                align-items: stretch;
            }

            .toolbar-actions {
                justify-content: flex-start;
            }

            .page-toolbar {
                gap: 16px;
            }

            .page-toolbar h1 {
                font-size: clamp(1.6rem, 5.8vw, 2rem);
                line-height: 1.08;
            }

            .page-toolbar p {
                font-size: .94rem;
                line-height: 1.55;
            }

            .search-box {
                width: 100%;
                flex-basis: 100%;
            }

            .users-data-table,
            .users-data-table tbody,
            .users-data-table tr,
            .users-data-table td {
                display: block;
                width: 100%;
            }

            .users-data-table {
                min-width: 100%;
            }

            .users-data-table thead {
                display: none;
            }

            .users-data-table tbody {
                display: grid;
                gap: 14px;
                padding: 16px;
            }

            .users-data-table tbody tr {
                overflow: hidden;
                border-radius: 20px;
                border: 1px solid color-mix(in srgb, var(--surface-border) 76%, transparent);
                background: color-mix(in srgb, var(--panel-bg) 98%, transparent);
                box-shadow: 0 16px 32px rgba(15, 23, 42, .08);
            }

            .users-data-table tbody td {
                display: grid;
                grid-template-columns: minmax(96px, 124px) minmax(0, 1fr);
                gap: 14px;
                align-items: start;
                padding: 12px 16px;
                border-bottom: 1px solid color-mix(in srgb, var(--surface-border) 68%, transparent);
                background: transparent !important;
            }

            .users-data-table tbody td::before {
                content: attr(data-label);
                font-size: .68rem;
                font-weight: 800;
                letter-spacing: .08em;
                text-transform: uppercase;
                color: var(--text-muted);
                padding-top: 2px;
            }

            .users-data-table tbody td:first-child {
                grid-template-columns: 1fr;
                gap: 10px;
                padding-top: 16px;
            }

            .users-data-table tbody td:first-child::before {
                content: none;
            }

            .users-data-table tbody td:last-child {
                border-bottom: 0;
            }

            html[data-theme="light"] .users-data-table tbody tr:nth-child(odd) td,
            html[data-theme="light"] .users-data-table tbody tr:nth-child(even) td,
            html[data-theme="light"] .users-data-table tbody tr:hover td,
            html[data-theme="dark"] .users-data-table tbody tr:nth-child(odd) td,
            html[data-theme="dark"] .users-data-table tbody tr:nth-child(even) td,
            html[data-theme="dark"] .users-data-table tbody tr:hover td {
                background: transparent !important;
            }

            .table-row-current {
                box-shadow: inset 4px 0 0 color-mix(in srgb, var(--primary) 78%, transparent), 0 16px 32px rgba(15, 23, 42, .08);
            }

            .table-row-current td:first-child {
                box-shadow: none;
            }

            .users-action-set,
            .action-set,
            .pill-row {
                justify-content: flex-start;
                flex-wrap: wrap;
            }

            .users-table-footer {
                padding: 16px;
            }

            .users-identity-meta {
                display: grid;
                gap: 4px;
            }

            .users-identity-meta span + span::before {
                display: none;
            }

            .drawer-panel {
                width: 100%;
                padding: 22px 18px;
            }

            .user-create-drawer .drawer-form-grid {
                grid-template-columns: 1fr;
            }

            .drawer-upload-shell {
                grid-template-columns: 1fr;
                justify-items: flex-start;
            }

            .drawer-upload-trigger {
                width: 100%;
                justify-content: center;
            }

            .pager,
            .pager-group,
            .table-footer-copy {
                width: 100%;
            }

            .confirm-modal-actions {
                justify-content: stretch;
            }

            .confirm-modal-actions > * {
                width: 100%;
            }

            .pager-compact {
                justify-content: flex-start;
            }

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

            .theme-toggle {
                top: 1rem;
                right: 1rem;
            }
        }

        @media (max-width: 960px) {
            .page-toolbar {
                flex-direction: column;
                align-items: stretch;
            }

            .page-toolbar-actions {
                width: 100%;
                flex-wrap: wrap;
                justify-content: space-between;
            }

            .users-overview-stats {
                flex: 1 1 auto;
                flex-wrap: wrap;
            }

            .filter-shell,
            .table-shell,
            .users-table-filter {
                margin-left: 14px;
                margin-right: 14px;
            }
        }

        @media (max-width: 640px) {
            .sidebar {
                width: min(282px, calc(100vw - 20px));
                padding: 10px;
            }

            .sidebar-panel {
                border-radius: 22px;
            }

            .sidebar-head {
                min-height: 76px;
                padding: 1rem .95rem .8rem;
            }

            .sidebar-brand {
                gap: 10px;
            }

            .sidebar-brand-mark,
            .sidebar-brand-mark img {
                width: 38px;
                height: 38px;
            }

            .sidebar-nav {
                padding: .15rem .8rem .85rem;
                gap: .95rem;
            }

            .sidebar-link {
                min-height: 50px;
                padding: 7px 10px;
                border-radius: 16px;
            }

            .sidebar-link-icon {
                width: 36px;
                height: 36px;
                border-radius: 12px;
                font-size: .92rem;
            }

            .topbar,
            .toolbar,
            .footerbar,
            .app-content {
                padding-left: .9rem;
                padding-right: .9rem;
            }

            .topbar {
                min-height: auto;
                gap: 10px;
            }

            .topbar-title strong {
                font-size: 1rem;
            }

            .toolbar-actions {
                flex-wrap: wrap;
                gap: 8px;
            }

            .toolbar-icon {
                width: 36px;
                height: 36px;
            }

            .toolbar-icon-badge {
                min-width: 16px;
                height: 16px;
                font-size: .62rem;
            }

            .page-toolbar {
                gap: 14px;
            }

            .page-toolbar h1 {
                margin-top: .35rem;
                font-size: clamp(1.42rem, 6.6vw, 1.9rem);
                line-height: 1.08;
            }

            .page-toolbar p {
                margin-top: .55rem;
                font-size: .92rem;
                line-height: 1.5;
            }

            .page-toolbar-actions {
                gap: 12px;
            }

            .users-overview-stats {
                width: 100%;
                justify-content: space-between;
                gap: 10px;
            }

            .users-stat {
                gap: 3px;
            }

            .users-stat strong {
                font-size: 1.18rem;
            }

            .users-stat span {
                font-size: .72rem;
            }

            .card {
                padding: 16px;
                border-radius: 18px;
            }

            .metric {
                padding: 14px 15px;
            }

            .metric strong {
                font-size: 1.35rem;
            }

            .stat-value,
            .summary-value {
                font-size: 1.72rem;
            }

            .btn {
                padding: 10px 14px;
                border-radius: 12px;
                font-size: .94rem;
            }

            .btn-sm {
                padding: 7px 11px;
                font-size: .82rem;
            }

            input,
            select,
            textarea {
                padding: 11px 12px;
                border-radius: 12px;
                font-size: .95rem;
            }

            th,
            td {
                padding: 11px 10px;
            }

            th {
                font-size: .72rem;
            }

            .table-wrap {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }

            .data-table,
            .users-data-table {
                min-width: 100%;
            }

            .users-table-shell {
                border-radius: 20px;
            }

            .users-empty-state {
                margin: 0 14px 14px;
            }

            .users-data-table,
            .users-data-table tbody,
            .users-data-table tr,
            .users-data-table td {
                display: block;
                width: 100%;
            }

            .users-data-table thead {
                display: none;
            }

            .users-data-table tbody {
                display: grid;
                gap: 14px;
                padding: 14px;
            }

            .users-data-table tbody tr {
                overflow: hidden;
                border-radius: 18px;
                border: 1px solid color-mix(in srgb, var(--surface-border) 78%, transparent);
                background: color-mix(in srgb, var(--panel-bg) 98%, transparent);
                box-shadow: 0 14px 30px rgba(15, 23, 42, .08);
            }

            .users-data-table tbody td {
                display: grid;
                grid-template-columns: minmax(92px, 108px) minmax(0, 1fr);
                gap: 12px;
                align-items: start;
                padding: 11px 14px;
                border-bottom: 1px solid color-mix(in srgb, var(--surface-border) 68%, transparent);
                background: transparent !important;
            }

            .users-data-table tbody td::before {
                content: attr(data-label);
                font-size: .66rem;
                font-weight: 800;
                letter-spacing: .08em;
                text-transform: uppercase;
                color: var(--text-muted);
                padding-top: 2px;
            }

            .users-data-table tbody td:first-child {
                grid-template-columns: 1fr;
                gap: 10px;
                padding-top: 14px;
            }

            .users-data-table tbody td:first-child::before {
                content: none;
            }

            .users-data-table tbody td:last-child {
                border-bottom: 0;
            }

            html[data-theme="light"] .users-data-table tbody tr:nth-child(odd) td,
            html[data-theme="light"] .users-data-table tbody tr:nth-child(even) td,
            html[data-theme="light"] .users-data-table tbody tr:hover td,
            html[data-theme="dark"] .users-data-table tbody tr:nth-child(odd) td,
            html[data-theme="dark"] .users-data-table tbody tr:nth-child(even) td,
            html[data-theme="dark"] .users-data-table tbody tr:hover td {
                background: transparent !important;
            }

            .table-row-current {
                box-shadow: inset 4px 0 0 color-mix(in srgb, var(--primary) 78%, transparent), 0 14px 30px rgba(15, 23, 42, .08);
            }

            .table-row-current td:first-child {
                box-shadow: none;
            }

            .identity-cell {
                gap: 10px;
            }

            .identity-avatar {
                flex-basis: 42px;
                width: 42px;
                height: 42px;
                border-radius: 14px;
            }

            .identity-name {
                font-size: .95rem;
            }

            .identity-handle,
            .identity-role,
            .users-identity-meta,
            .contact-stack,
            .info-line {
                font-size: .84rem;
            }

            .users-identity-meta {
                gap: 6px;
            }

            .profile-badge,
            .users-unit-chip,
            .users-inline-badge,
            .pill,
            .status-pill {
                padding: 6px 10px;
                font-size: .72rem;
            }

            .users-action-set,
            .action-set,
            .pill-row {
                justify-content: flex-start;
                flex-wrap: wrap;
                gap: 8px;
            }

            .action-circle {
                width: 34px;
                height: 34px;
                box-shadow: 0 8px 16px rgba(15, 23, 42, .08);
            }

            .table-footer,
            .users-table-footer {
                padding: 14px;
            }

            .table-footer-copy {
                gap: 8px;
                font-size: .82rem;
            }

            .drawer-panel {
                padding: 18px 14px;
            }

            .left-panel {
                padding: 2.4rem 1.2rem 1.5rem;
            }

            .logo-circle,
            .logo-circle img {
                width: 68px;
                height: 68px;
            }

            .login-title {
                font-size: 1.4rem;
                margin-bottom: 1.5rem;
            }

            .footer-note {
                margin-top: 1.5rem;
                font-size: .74rem;
            }
        }

        @media (max-width: 480px) {
            .sidebar {
                width: min(268px, calc(100vw - 14px));
                padding: 8px;
            }

            .sidebar-panel {
                border-radius: 18px;
            }

            .sidebar-head {
                min-height: 70px;
                padding: .9rem .85rem .75rem;
            }

            .sidebar-brand-copy strong {
                font-size: .94rem;
            }

            .sidebar-brand-copy span {
                font-size: .68rem;
            }

            .topbar,
            .toolbar,
            .footerbar,
            .app-content {
                padding-left: .75rem;
                padding-right: .75rem;
            }

            .page-toolbar h1 {
                font-size: 1.28rem;
            }

            .page-toolbar p {
                font-size: .86rem;
            }

            .card {
                padding: 14px;
                border-radius: 16px;
            }

            .users-overview-stats {
                gap: 8px;
            }

            .users-data-table tbody {
                padding: 10px;
                gap: 10px;
            }

            .users-data-table tbody tr {
                border-radius: 16px;
            }

            .users-data-table tbody td {
                grid-template-columns: 1fr;
                gap: 6px;
                padding: 10px 12px;
            }

            .users-data-table tbody td::before {
                padding-top: 0;
            }

            .identity-cell {
                align-items: flex-start;
            }

            .identity-name {
                font-size: .92rem;
            }

            .action-circle {
                width: 32px;
                height: 32px;
                font-size: .84rem;
            }

            .btn {
                font-size: .9rem;
            }

            input,
            select,
            textarea {
                font-size: .92rem;
            }

            .left-panel {
                padding: 2rem 1rem 1.25rem;
            }

            .logo-circle,
            .logo-circle img {
                width: 62px;
                height: 62px;
            }

            .login-title {
                font-size: 1.28rem;
                margin-bottom: 1.3rem;
            }
        }

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

            .dashboard-content-grid,
            .dashboard-hero-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .topbar-title {
                display: none;
            }

            .users-mobile-hub {
                display: grid;
            }

            .users-page {
                gap: 14px;
            }

            .page-toolbar {
                gap: 10px;
            }

            .page-toolbar p {
                margin-top: .4rem;
                font-size: .9rem;
                line-height: 1.45;
            }

            .users-mobile-hub-head {
                position: relative;
                overflow: hidden;
                display: grid;
                gap: 12px;
                padding: 16px;
                border-radius: 22px;
                border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--surface-border));
                background:
                    radial-gradient(circle at top right, rgba(56, 189, 248, .18), transparent 36%),
                    linear-gradient(145deg, color-mix(in srgb, var(--primary-soft) 34%, var(--panel-bg)) 0%, color-mix(in srgb, var(--panel-bg) 96%, transparent) 100%);
                box-shadow: 0 16px 28px rgba(15, 23, 42, .10);
            }

            .users-mobile-hub-head::after {
                content: '';
                position: absolute;
                inset: auto -48px -62px auto;
                width: 170px;
                height: 170px;
                border-radius: 50%;
                background: rgba(96, 165, 250, .16);
                filter: blur(6px);
                pointer-events: none;
            }

            .users-mobile-hub-head > * {
                position: relative;
                z-index: 1;
            }

            .page-toolbar-actions[data-toolbar-stats] {
                display: none;
            }

            .users-filter-drawer {
                display: grid;
                gap: 10px;
                padding: 14px 14px 0;
            }

            .users-filter-drawer > summary {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
                padding: 14px 16px;
                border-radius: 20px;
                border: 1px solid color-mix(in srgb, var(--surface-border) 82%, transparent);
                background: color-mix(in srgb, var(--panel-bg) 96%, transparent);
                cursor: pointer;
                box-shadow: 0 12px 24px rgba(15, 23, 42, .08);
            }

            details.users-filter-drawer[open] > summary .users-filter-toggle-icon {
                transform: rotate(180deg);
            }

            details.users-filter-drawer:not([open]) .users-filter-drawer-panel,
            details.users-filter-drawer:not([open]) .users-table-filter {
                display: none;
            }

            .modern-page-surface--filters .modern-page-surface-head {
                display: none;
            }

            .modern-page-surface--filters .users-filter-drawer {
                padding: 0;
            }

            .users-filter-drawer-panel .users-table-filter {
                padding: 16px;
                border-radius: 24px;
                backdrop-filter: blur(16px);
            }

            .users-table-filter {
                padding: 16px;
                border-radius: 24px;
                backdrop-filter: blur(16px);
            }

            .filter-auto-status {
                display: inline-flex;
                align-items: center;
                padding: 10px 12px;
                border-radius: 14px;
                border: 1px solid color-mix(in srgb, var(--surface-border) 82%, transparent);
                background: color-mix(in srgb, var(--panel-bg) 94%, transparent);
            }

            .filter-actions-auto .btn,
            .users-filter-clear-btn {
                width: 100%;
            }

            .users-mobile-fab {
                position: fixed;
                right: 1rem;
                bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
                z-index: 52;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 58px;
                height: 58px;
                padding: 0;
                border-radius: 50%;
                box-shadow: 0 18px 36px rgba(37, 99, 235, .28);
                transition: opacity .18s ease, transform .22s cubic-bezier(.22, 1, .36, 1);
            }

            .users-mobile-fab span {
                display: none;
            }

            .users-mobile-fab i {
                margin: 0;
                font-size: 1.1rem;
            }

            body.nav-open .users-mobile-fab {
                opacity: 0;
                pointer-events: none;
                transform: translateY(18px);
            }

            .dashboard-hero {
                padding: 20px;
                border-radius: 24px;
            }

            .dashboard-hero-actions,
            .dashboard-panel-head,
            .dashboard-list-item {
                grid-template-columns: 1fr;
                flex-direction: column;
                align-items: stretch;
            }

            .dashboard-panel-badge {
                align-self: flex-start;
            }

            .dashboard-list-item {
                display: grid;
            }

            .dashboard-list-time {
                white-space: normal;
            }
        }

        @media (max-width: 640px) {
            .users-mobile-hub-copy strong {
                font-size: 1.06rem;
            }

            .users-mobile-hub-stats {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .users-mobile-hub-stat {
                padding: 12px;
                border-radius: 16px;
            }

            .users-filter-drawer {
                padding-left: 12px;
                padding-right: 12px;
            }

            .dashboard-metrics {
                grid-template-columns: 1fr;
            }

            .dashboard-hero-side {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 480px) {
            .users-filter-drawer {
                padding-left: 10px;
                padding-right: 10px;
            }

            .users-filter-drawer > summary {
                padding: 13px 14px;
                border-radius: 18px;
            }

            .users-mobile-fab {
                right: .75rem;
                width: 54px;
                height: 54px;
            }

            .dashboard-hero {
                padding: 18px 16px;
            }

            .dashboard-metric-value {
                font-size: 1.7rem;
            }

            .dashboard-list-item {
                padding: 12px;
                border-radius: 18px;
            }
        }

        .module-page {
            gap: 22px;
        }

        .module-hero {
            padding: 24px;
            border-radius: 28px;
        }

        .module-hero-grid {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
            gap: 18px;
            align-items: stretch;
        }

        .module-hero-copy {
            max-width: 760px;
        }

        .module-hero-side {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px;
        }

        .module-tabs-card {
            padding: 0;
            overflow: hidden;
        }

        .module-panel {
            padding: 0;
            overflow: hidden;
        }

        .module-panel-title {
            margin: 10px 0 6px;
            font-size: 1.28rem;
            line-height: 1.12;
            color: var(--text-primary);
        }

        .module-panel-body {
            padding: 0 24px 24px;
        }

        .module-tab-nav,
        .module-subtabs {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .module-tab-link,
        .module-subtab-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 44px;
            padding: 0 16px;
            border-radius: 999px;
            border: 1px solid color-mix(in srgb, var(--surface-border) 88%, transparent);
            background: color-mix(in srgb, var(--panel-bg) 96%, transparent);
            color: var(--text-soft);
            font-weight: 700;
            text-decoration: none;
            transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
        }

        .module-tab-link:hover,
        .module-subtab-link:hover,
        .module-tab-link.is-active,
        .module-subtab-link.is-active {
            border-color: color-mix(in srgb, var(--primary) 32%, transparent);
            background: var(--primary-soft);
            color: var(--text-primary);
            transform: translateY(-1px);
        }

        .module-filter-shell {
            width: 100%;
            margin: 0;
            border-radius: 22px;
            border: 1px solid color-mix(in srgb, var(--surface-border) 80%, transparent);
            background: color-mix(in srgb, var(--panel-soft) 62%, var(--panel-bg));
            padding: 22px;
        }

        .module-filter-actions {
            align-self: end;
        }

        .module-filter-actions .btn {
            width: 100%;
        }

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

        .module-form-fieldset {
            min-width: 0;
            margin: 0;
            padding: 0;
            border: 0;
            display: grid;
            gap: 16px;
        }

        .module-form-fieldset[disabled] {
            opacity: .62;
        }

        .module-schema-grid,
        .module-metric-grid,
        .module-rule-grid {
            display: grid;
            gap: 14px;
        }

        .module-schema-grid {
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        }

        .module-metric-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

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

        .module-schema-chip,
        .module-rule-card,
        .module-callout,
        .module-empty,
        .module-metric-card,
        .module-timeline-item {
            border-radius: 22px;
            border: 1px solid color-mix(in srgb, var(--surface-border) 82%, transparent);
            background: color-mix(in srgb, var(--panel-bg) 96%, transparent);
        }

        .module-schema-chip {
            display: grid;
            gap: 4px;
            padding: 14px 16px;
        }

        .module-schema-chip span {
            color: var(--text-muted);
            font-size: .76rem;
            text-transform: uppercase;
            letter-spacing: .12em;
            font-weight: 800;
        }

        .module-schema-chip strong {
            color: var(--text-primary);
            font-size: .98rem;
        }

        .module-schema-chip.is-ready {
            border-color: rgba(34, 197, 94, .26);
            background: linear-gradient(145deg, rgba(220, 252, 231, .78) 0%, color-mix(in srgb, var(--panel-bg) 98%, transparent) 100%);
        }

        .module-schema-chip.is-pending {
            border-color: rgba(245, 158, 11, .24);
            background: linear-gradient(145deg, rgba(255, 247, 237, .88) 0%, color-mix(in srgb, var(--panel-bg) 98%, transparent) 100%);
        }

        .module-metric-card {
            padding: 18px;
        }

        .module-metric-value {
            font-size: clamp(1.8rem, 2.4vw, 2.5rem);
            line-height: 1;
            color: var(--text-primary);
            font-weight: 800;
            margin: 10px 0 8px;
        }

        .module-rule-card {
            display: grid;
            gap: 10px;
            padding: 18px;
            box-shadow: 0 16px 28px rgba(15, 23, 42, .08);
        }

        .module-rule-card strong {
            color: var(--text-primary);
            font-size: 1rem;
        }

        .module-rule-card p,
        .module-callout p,
        .module-empty,
        .module-timeline-item p {
            margin: 0;
            color: var(--text-soft);
            line-height: 1.6;
        }

        .module-rule-icon,
        .module-timeline-marker {
            width: 42px;
            height: 42px;
            border-radius: 14px;
            display: inline-grid;
            place-items: center;
            background: var(--primary-soft);
            color: var(--primary);
        }

        .module-callout,
        .module-empty {
            padding: 18px;
        }

        .module-callout strong,
        .module-empty strong,
        .module-timeline-item strong {
            display: block;
            margin-bottom: 8px;
            color: var(--text-primary);
        }

        .module-callout-primary {
            border-color: rgba(59, 130, 246, .20);
            background: linear-gradient(145deg, rgba(239, 246, 255, .92) 0%, color-mix(in srgb, var(--panel-bg) 98%, transparent) 100%);
        }

        .module-callout-warning {
            border-color: rgba(245, 158, 11, .20);
            background: linear-gradient(145deg, rgba(255, 247, 237, .92) 0%, color-mix(in srgb, var(--panel-bg) 98%, transparent) 100%);
        }

        .module-callout-danger {
            border-color: rgba(239, 68, 68, .20);
            background: linear-gradient(145deg, rgba(254, 242, 242, .92) 0%, color-mix(in srgb, var(--panel-bg) 98%, transparent) 100%);
        }

        .module-note-list {
            margin: 0;
            padding-left: 18px;
            color: var(--text-soft);
            line-height: 1.6;
        }

        .module-split {
            display: grid;
            grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
            gap: 18px;
        }

        .module-table-wrap {
            overflow: auto;
            border-radius: 22px;
            border: 1px solid color-mix(in srgb, var(--surface-border) 78%, transparent);
        }

        .module-table {
            width: 100%;
            border-collapse: collapse;
            min-width: 720px;
            background: color-mix(in srgb, var(--panel-bg) 98%, transparent);
        }

        .module-table th,
        .module-table td {
            padding: 14px 16px;
            text-align: left;
            vertical-align: top;
            border-bottom: 1px solid color-mix(in srgb, var(--surface-border) 70%, transparent);
        }

        .module-table th {
            font-size: .76rem;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--text-muted);
            font-weight: 800;
            background: color-mix(in srgb, var(--panel-soft) 56%, var(--panel-bg));
        }

        .module-table td strong {
            display: block;
            color: var(--text-primary);
            margin-bottom: 4px;
        }

        .module-table td small {
            color: var(--text-soft);
        }

        .module-table tbody tr:last-child td {
            border-bottom: 0;
        }

        .module-status {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 32px;
            padding: 0 12px;
            border-radius: 999px;
            font-size: .78rem;
            font-weight: 800;
            letter-spacing: .02em;
        }

        .module-status-success {
            color: #166534;
            background: rgba(220, 252, 231, .96);
        }

        .module-status-warning {
            color: #9a6700;
            background: rgba(254, 243, 199, .96);
        }

        .module-status-danger {
            color: #b42318;
            background: rgba(254, 226, 226, .96);
        }

        .module-status-neutral {
            color: #1e3a5f;
            background: rgba(219, 234, 254, .92);
        }

        .module-timeline {
            display: grid;
            gap: 12px;
        }

        .module-timeline-item {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            gap: 14px;
            align-items: start;
            padding: 16px;
        }

        /* Configuracoes: drawer de adicao */
        .cfg-add-drawer {
            display: none;
            padding: 20px 28px 4px;
            border-bottom: 1px solid color-mix(in srgb, var(--surface-border) 60%, transparent);
        }

        .cfg-add-drawer.is-open {
            display: block;
        }

        .cfg-add-form-inner {
            padding-bottom: 18px;
        }

        .cfg-add-actions {
            display: flex;
            gap: 10px;
            align-items: flex-end;
            padding-top: 4px;
        }

        .cfg-inline-search {
            display: flex;
            gap: 6px;
            align-items: center;
        }

        .cfg-inline-search input[type="search"] {
            height: 2.25rem;
            padding: 0 10px;
            border-radius: 8px;
            border: 1px solid var(--surface-border);
            background: var(--input-bg, var(--panel-bg));
            color: var(--text);
            font-size: .875rem;
        }

        html[data-theme="dark"] .module-filter-shell,
        html[data-theme="dark"] .module-schema-chip,
        html[data-theme="dark"] .module-rule-card,
        html[data-theme="dark"] .module-callout,
        html[data-theme="dark"] .module-empty,
        html[data-theme="dark"] .module-metric-card,
        html[data-theme="dark"] .module-timeline-item,
        html[data-theme="dark"] .module-table {
            background: rgba(18, 25, 35, .96);
        }

        html[data-theme="dark"] .module-schema-chip.is-ready {
            background: rgba(20, 83, 45, .34);
            border-color: rgba(74, 222, 128, .18);
        }

        html[data-theme="dark"] .module-schema-chip.is-pending {
            background: rgba(133, 77, 14, .30);
            border-color: rgba(251, 191, 36, .18);
        }

        html[data-theme="dark"] .module-callout-primary {
            background: rgba(30, 58, 138, .28);
            border-color: rgba(96, 165, 250, .18);
        }

        html[data-theme="dark"] .module-callout-warning {
            background: rgba(120, 53, 15, .28);
            border-color: rgba(251, 191, 36, .18);
        }

        html[data-theme="dark"] .module-callout-danger {
            background: rgba(127, 29, 29, .28);
            border-color: rgba(248, 113, 113, .18);
        }

        html[data-theme="dark"] .module-status-success {
            color: #86efac;
            background: rgba(20, 83, 45, .44);
        }

        html[data-theme="dark"] .module-status-warning {
            color: #fcd34d;
            background: rgba(120, 53, 15, .42);
        }

        html[data-theme="dark"] .module-status-danger {
            color: #fca5a5;
            background: rgba(127, 29, 29, .42);
        }

        html[data-theme="dark"] .module-status-neutral {
            color: #bfdbfe;
            background: rgba(30, 58, 138, .40);
        }

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

        @media (max-width: 768px) {
            .module-hero,
            .module-panel-body,
            .module-filter-shell {
                padding-left: 16px;
                padding-right: 16px;
            }

            .module-hero-side,
            .module-metric-grid {
                grid-template-columns: 1fr;
            }

            .field-span-2 {
                grid-column: auto;
            }

            .module-tab-link,
            .module-subtab-link {
                width: 100%;
            }

            .module-table {
                min-width: 620px;
            }
        }

        @media (max-width: 640px) {
            .module-hero {
                padding: 20px 16px;
            }

            .module-panel-title {
                font-size: 1.1rem;
            }

            .module-schema-grid,
            .module-rule-grid {
                grid-template-columns: 1fr;
            }
        }
/* =============================================
   EXTENSOES: estoque / movimentos / configuracoes
   ============================================= */

/* ---- Aba tab: contador inline ---- */
.module-tab-count {
    margin-left: auto;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--primary-soft) 80%, transparent);
    color: var(--text-soft);
    white-space: nowrap;
}

/* ---- Drawer estatico (entrada / saida de estoque) ---- */
.drawer-backdrop-static {
    width: 100%;
    padding: 24px 16px;
    box-sizing: border-box;
}

.drawer-panel-static {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    background: var(--panel-bg);
    border: 1px solid color-mix(in srgb, var(--surface-border) 80%, transparent);
    border-radius: 20px;
    padding: 28px 28px 20px;
    box-shadow: 0 2px 12px color-mix(in srgb, var(--shadow-color, #000) 8%, transparent);
    box-sizing: border-box;
}

.drawer-panel-static .drawer-head {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--surface-border) 60%, transparent);
}

@media (max-width: 768px) {
    .drawer-panel-static {
        max-width: 100%;
        border-radius: 16px;
        padding: 20px 16px 16px;
    }
    .drawer-backdrop-static {
        padding: 12px 0;
    }
}

/* ---- Metricas de relatorio (estoque) ---- */
.cfg-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 24px;
}

.cfg-metric-card {
    background: color-mix(in srgb, var(--panel-soft) 70%, var(--panel-bg));
    border: 1px solid color-mix(in srgb, var(--surface-border) 70%, transparent);
    border-radius: 16px;
    padding: 20px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cfg-metric-card .confirm-modal-kicker {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}

.cfg-metric-value {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--text-primary);
    letter-spacing: -.02em;
}

.cfg-metric-value-warn {
    color: var(--amber, #f59e0b);
}

.cfg-metric-card small {
    font-size: .78rem;
    color: var(--text-soft);
    line-height: 1.3;
}

@media (max-width: 900px) {
    .cfg-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .cfg-metrics-grid {
        grid-template-columns: 1fr;
        padding: 16px;
    }
}

/* ================================================
   Equipamentos Modal
   ================================================ */

.equip-modal-backdrop {
  z-index: 1100;
}

.equip-modal {
  width: min(100%, 640px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.equip-modal-body {
  overflow-y: auto;
  padding: 0 1.5rem 1rem;
  flex: 1;
  min-height: 80px;
}

.equip-modal-loading {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 0;
  color: var(--color-muted, #888);
  font-size: .9rem;
}

.equip-modal-empty {
  padding: 1rem 0;
  color: var(--color-muted, #888);
  font-size: .9rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
}

.equip-modal-count {
  margin: .75rem 0 0;
  font-size: .8rem;
  color: var(--color-muted, #888);
  text-align: right;
}

.equip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.equip-list-item {
  display: grid;
  grid-template-columns: 2.2rem 1fr auto auto;
  align-items: center;
  gap: .5rem .75rem;
  padding: .65rem .75rem;
  border-radius: .5rem;
  background: var(--color-surface-alt, #f8f8f8);
  border: 1px solid var(--color-border, #e5e5e5);
}

.equip-list-icon {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: .45rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  flex-shrink: 0;
}

.equip-list-icon--equip {
  background: #dbeafe;
  color: #2563eb;
}

.equip-list-icon--acess {
  background: #fef3c7;
  color: #d97706;
}

.equip-list-body {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}

.equip-list-name {
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.equip-list-meta {
  font-size: .78rem;
  color: var(--color-muted, #888);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.equip-list-badge {
  font-size: .7rem;
  font-weight: 600;
  padding: .2rem .5rem;
  border-radius: 999px;
  white-space: nowrap;
}

.equip-list-badge--equip {
  background: #dbeafe;
  color: #2563eb;
}

.equip-list-badge--acess {
  background: #fef3c7;
  color: #d97706;
}

.equip-list-code {
  font-size: .75rem;
  color: var(--color-muted, #888);
  font-family: monospace;
  white-space: nowrap;
}
/* ================================================
   Salas de Aula — Barra de stats
   ================================================ */

.salas-stat-bar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: .6rem 1rem;
  border-radius: .6rem;
  background: var(--color-surface-alt, color-mix(in srgb, var(--panel-bg) 92%, transparent));
  border: 1px solid var(--surface-border, #e5e5e5);
  flex-wrap: wrap;
}

.salas-stat-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .875rem;
  font-weight: 500;
  padding: .3rem .75rem;
  border-radius: 999px;
}

.salas-stat-item strong {
  font-size: 1.05rem;
  font-weight: 700;
}

.salas-stat--ok {
  background: var(--success-bg, #d1fae5);
  color: var(--success-text, #065f46);
}

.salas-stat--off {
  background: color-mix(in srgb, #fef3c7 80%, transparent);
  color: #92400e;
}

.salas-stat-total {
  margin-left: auto;
  font-size: .82rem;
  color: var(--text-soft, #888);
}

/* ================================================
   Equipamentos Modal — Cards detalhados
   ================================================ */

.equip-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: .6rem;
  background: var(--color-surface-alt, #f8f8f8);
  border: 1px solid var(--surface-border, #e5e5e5);
  overflow: hidden;
}

.equip-card-head {
  display: flex;
  align-items: center;
  gap: .6rem .75rem;
  padding: .75rem .9rem;
  flex-wrap: wrap;
}

.equip-card-title {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}

.equip-card-title strong {
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.3;
}

.equip-card-sub {
  font-size: .78rem;
  color: var(--text-soft, #888);
}

.equip-sit-badge {
  font-size: .7rem;
  font-weight: 600;
  padding: .2rem .55rem;
  border-radius: 999px;
  white-space: nowrap;
}

.equip-sit--ok  { background: #d1fae5; color: #065f46; }
.equip-sit--uso { background: #fef3c7; color: #92400e; }
.equip-sit--man { background: #ffedd5; color: #9a3412; }
.equip-sit--des { background: #f3f4f6; color: #6b7280; }

.equip-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0;
  border-top: 1px solid var(--surface-border, #e5e5e5);
  padding: .55rem .9rem .65rem;
  background: color-mix(in srgb, var(--panel-bg, #fff) 60%, transparent);
}

.equip-detail-row {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .3rem .4rem;
}

.equip-detail-row--full {
  grid-column: 1 / -1;
}

.equip-detail-row > span:first-child {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-soft, #888);
}

.equip-detail-row > strong,
.equip-detail-row > span:last-child {
  font-size: .82rem;
  font-weight: 500;
  word-break: break-word;
}

/* ================================================
   Salas — Equipamentos: contagem e sem itens
   ================================================ */

.salas-stat--sem {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.equip-btn-has {
  position: relative;
}

.equip-count-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--primary, #2563eb);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  pointer-events: none;
}

.equip-sem-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .75rem;
  font-weight: 600;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
  padding: .25rem .6rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* ================================================================
   SALA DESC — subtitle under sala name
================================================================ */
.identity-body {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.sala-desc {
  font-size: .83rem;
  color: var(--text-secondary, #64748b);
  font-weight: 500;
  line-height: 1.55;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.salas-cards-table {
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0 16px;
}

.salas-cards-table thead {
    display: none;
}

.salas-cards-table tbody tr {
    background: transparent;
}

.salas-cards-table tbody tr:hover td {
    background: transparent !important;
}

.salas-card-cell {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.salas-card-desktop {
    display: flex;
}

.salas-desktop-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px 24px;
    border-radius: 24px;
    border: 1px solid #dbe3ee;
    border-left: 5px solid transparent;
    background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,250,252,.96) 100%);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.salas-desktop-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(15, 23, 42, .12);
}

.users-table-row[data-sala-status="disponivel"] .salas-desktop-card { border-left-color: #16a34a; }
.users-table-row[data-sala-status="em_uso"] .salas-desktop-card { border-left-color: #f59e0b; }
.users-table-row[data-sala-status="reservada"] .salas-desktop-card { border-left-color: #2563eb; }
.users-table-row[data-sala-status="manutencao"] .salas-desktop-card,
.users-table-row[data-sala-status="interditada"] .salas-desktop-card { border-left-color: #dc2626; }

.salas-desktop-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.salas-desktop-body {
    gap: 10px;
}

.salas-desktop-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.salas-desktop-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr);
    gap: 16px;
}

.salas-desktop-block {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    background: rgba(255,255,255,.92);
}

.salas-desktop-block--inventory {
    background: linear-gradient(135deg, #f8fbff 0%, #edf4ff 100%);
    border-color: #dbeafe;
}

.salas-desktop-block-label {
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #64748b;
}

.sala-status-pill--desktop {
    gap: .45rem;
    padding: .5rem .82rem;
    font-size: .74rem;
    box-shadow: none;
}

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

.salas-location-unit {
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 800;
    color: var(--text-primary, #0f172a);
}

.salas-desktop-inventory {
    display: grid;
    gap: 8px;
}

.salas-desktop-inventory-text {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .96rem;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    line-height: 1.45;
}

.salas-desktop-inventory-text i {
    color: #3b82f6;
    flex-shrink: 0;
}

.salas-desktop-inventory-text.is-empty {
    color: #64748b;
}

.salas-desktop-inventory-text.is-empty i {
    color: #94a3b8;
}

.salas-desktop-inventory-note {
    font-size: .82rem;
    line-height: 1.5;
    color: #64748b;
}

.salas-desktop-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 4px;
    border-top: 1px dashed #dbe3ee;
}

.salas-desktop-action-form {
    margin: 0;
}

.salas-desktop-action {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .74rem 1rem;
    border-radius: 14px;
    border: 1px solid #d5dfec;
    background: #fff;
    color: #334155;
    font-size: .84rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}

.salas-desktop-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}

.salas-desktop-action--inventory {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #bfdbfe;
}

.salas-desktop-action--inventory:hover {
    color: #1e40af;
    background: #dbeafe;
    border-color: #93c5fd;
}

.salas-desktop-action--status.is-open {
    color: #854d0e;
    background: #fef3c7;
    border-color: #fcd34d;
}

.salas-desktop-action--status.is-open:hover {
    background: #fde68a;
    border-color: #f59e0b;
}

.salas-desktop-action--status.is-locked {
    color: #166534;
    background: #dcfce7;
    border-color: #86efac;
}

.salas-desktop-action--status.is-locked:hover {
    background: #bbf7d0;
    border-color: #4ade80;
}

.salas-desktop-action--edit:hover {
    border-color: #94a3b8;
    background: #f8fafc;
    color: #0f172a;
}

@media (max-width: 1100px) {
    .salas-desktop-grid {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
     SALAS MOBILE CARD
================================================================ */
.salas-mobile-card {
    display: none;
}

.sala-status-pill--mobile {
    gap: .45rem;
    padding: .48rem .75rem;
    font-size: .73rem;
    border-width: 1px;
    box-shadow: none;
}

.salas-mobile-status-dot {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.users-mobile-hub-stat--ok strong {
    color: #166534;
}

.users-mobile-hub-stat--off strong {
    color: #b45309;
}

.users-mobile-hub-stat--neutral strong {
    color: #334155;
}

/* ================================================================
   MODAL TABS (equip modal)
================================================================ */
.modal-tabs {
  display: flex;
  border-bottom: 2px solid var(--border, #e5e7eb);
  padding: 0 1.25rem;
  gap: .25rem;
  margin-top: -.25rem;
}
.modal-tab {
  padding: .55rem .9rem;
  font-size: .82rem;
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary, #6b7280);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s;
}
.modal-tab:hover {
  color: var(--text-primary, #111827);
}
.modal-tab.active {
  color: var(--primary, #2563eb);
  border-bottom-color: var(--primary, #2563eb);
}
.tab-pane {
  display: none;
}
.tab-pane.active {
  display: block;
}

/* ================================================================
   EDIT SALA MODAL (ESM)
================================================================ */
.esm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.esm-backdrop[hidden] { display: none; }

.esm-backdrop.is-open { animation: esm-fade-in .15s ease both; }
.esm-backdrop.is-open .esm-box { animation: esm-scale-in .2s cubic-bezier(.34,1.56,.64,1) both; }

@keyframes esm-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes esm-scale-in {
  from { transform: scale(.93) translateY(10px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);    opacity: 1; }
}

.esm-box {
  background: #f8fafc;
  border-radius: 1rem;
  box-shadow: 0 24px 64px rgba(0,0,0,.2), 0 4px 16px rgba(0,0,0,.08);
  width: 100%;
  max-width: 440px;
  overflow: hidden;
}

/* Header */
.esm-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  padding: 1.2rem 1.2rem .95rem;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}
.esm-header-info {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
}
.esm-kicker {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #2563eb;
}
.esm-kicker i { font-size: .72rem; }
.esm-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.esm-close-x {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  width: 1.9rem;
  height: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .5rem;
  font-size: .95rem;
  transition: background .15s, color .15s;
  margin-top: -.1rem;
}
.esm-close-x:hover { background: #f1f5f9; color: #334155; }

/* Body */
.esm-body {
  padding: 1.15rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: #f8fafc;
}
.esm-field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.esm-label {
  display: flex;
  align-items: center;
  gap: .38rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #475569;
}
.esm-label i {
  font-size: .75rem;
  color: #94a3b8;
}
.esm-char-count {
  margin-left: auto;
  font-size: .68rem;
  font-weight: 500;
  color: #94a3b8;
  text-transform: none;
  letter-spacing: 0;
}

/* Select */
.esm-select-row {
  display: flex;
  align-items: center;
  gap: .65rem;
}
.esm-select {
  flex: 1;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  padding: .6rem 2.2rem .6rem .8rem;
  font-size: .875rem;
  border: 1.5px solid #e2e8f0;
  border-radius: .6rem;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  color: #0f172a;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.esm-select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.esm-status-badge {
  padding: .28rem .7rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  background: #ecfdf5;
  color: #065f46;
  transition: background .18s, color .18s;
}
.esm-status-badge.em-uso {
  background: #fee2e2;
  color: #991b1b;
}

/* Textarea */
.esm-textarea {
  padding: .6rem .8rem;
  font-size: .875rem;
  border: 1.5px solid #e2e8f0;
  border-radius: .6rem;
  background: #fff;
  color: #0f172a;
  resize: none;
  line-height: 1.55;
  min-height: 68px;
  overflow-y: hidden;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.esm-textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.esm-textarea::placeholder { color: #94a3b8; }

/* Error */
.esm-error {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .6rem .85rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: .55rem;
  font-size: .82rem;
  color: #dc2626;
  line-height: 1.45;
}
.esm-error[hidden] { display: none; }
.esm-error i { font-size: .82rem; margin-top: .12rem; flex-shrink: 0; }

/* Footer */
.esm-footer {
  display: flex;
  justify-content: flex-end;
  gap: .55rem;
  padding: .9rem 1.2rem;
  background: #fff;
  border-top: 1px solid #e2e8f0;
}
.esm-btn {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  padding: .58rem 1.1rem;
  font-size: .875rem;
  font-weight: 600;
  border-radius: .6rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  line-height: 1;
  transition: background .15s, border-color .15s, box-shadow .15s, opacity .15s;
}
.esm-btn:disabled { opacity: .6; cursor: not-allowed; }
.esm-btn-cancel {
  background: #f1f5f9;
  color: #334155;
  border-color: #e2e8f0;
}
.esm-btn-cancel:hover:not(:disabled) {
  background: #e2e8f0;
  border-color: #cbd5e1;
}
.esm-btn-save {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
  box-shadow: 0 1px 4px rgba(37,99,235,.28);
}
.esm-btn-save:hover:not(:disabled) {
  background: #1d4ed8;
  border-color: #1d4ed8;
  box-shadow: 0 2px 8px rgba(37,99,235,.38);
}



/* ================================================================
   HISTORY TIMELINE (historico tab)
================================================================ */
.hist-list {
  list-style: none;
  margin: 0;
  padding: .75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.hist-card {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: .6rem;
  background: var(--surface, #fff);
  overflow: hidden;
}
.hist-card-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .85rem;
  background: var(--surface-alt, #f9fafb);
  border-bottom: 1px solid var(--border, #e5e7eb);
  flex-wrap: wrap;
}
.hist-card-id {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-secondary, #6b7280);
  flex: 1;
}
.hist-status-badge {
  font-size: .72rem;
  font-weight: 600;
  padding: .2rem .55rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.hist-st--aberto     { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.hist-st--andamento  { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.hist-st--resolvido  { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.hist-st--cancelado  { background: #f9fafb; color: #6b7280; border: 1px solid #e5e7eb; }

.hist-prio-badge {
  font-size: .7rem;
  font-weight: 700;
  padding: .15rem .5rem;
  border-radius: 999px;
  text-transform: uppercase;
}
.hist-prio--baixa   { background: #f0fdf4; color: #15803d; }
.hist-prio--media   { background: #fffbeb; color: #b45309; }
.hist-prio--alta    { background: #fff7ed; color: #c2410c; }
.hist-prio--critica { background: #fef2f2; color: #dc2626; }

.hist-card-body {
  padding: .6rem .85rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem .75rem;
  font-size: .8rem;
}
.hist-card-row {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.hist-card-row > span:first-child,
.hist-card-row > time:first-child {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-secondary, #6b7280);
}
.hist-card-row--full {
  grid-column: 1 / -1;
}

.hist-timeline {
  list-style: none;
  margin: 0;
  padding: .5rem .85rem .7rem;
  border-top: 1px solid var(--border, #e5e7eb);
  display: flex;
  flex-direction: column;
  gap: .45rem;
  position: relative;
}
.hist-timeline::before {
  content: '';
  position: absolute;
  left: 1.35rem;
  top: .7rem;
  bottom: .7rem;
  width: 2px;
  background: var(--border, #e5e7eb);
}
.hist-timeline-item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: .6rem;
  row-gap: .1rem;
  position: relative;
}
.hist-step-badge {
  grid-column: 1;
  grid-row: 1;
  font-size: .68rem;
  font-weight: 700;
  background: var(--primary, #2563eb);
  color: #fff;
  border-radius: 999px;
  padding: .15rem .5rem;
  white-space: nowrap;
  align-self: center;
}
.hist-step-trans {
  grid-column: 2;
  grid-row: 1;
  font-size: .75rem;
  color: var(--text-secondary, #6b7280);
  font-style: italic;
  align-self: center;
}
.hist-step-desc {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  font-size: .78rem;
  color: var(--text-primary, #111827);
  line-height: 1.4;
}
.hist-step-time {
  grid-column: 1 / -1;
  font-size: .68rem;
  color: var(--text-secondary, #6b7280);
  padding-left: .1rem;
}

/* ================================================================
   ACTION-CIRCLE SECONDARY (edit button)
================================================================ */
.action-circle-secondary {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
}
.action-circle-secondary:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
  color: #111827;
}

/* ================================================================
   PREDIO COLOR CODING (salas de aula)
================================================================ */
/* Paleta: 0-blue 1-emerald 2-amber 3-violet 4-red 5-pink 6-cyan 7-teal */
:root {
  --pc-0: #3b82f6; --pc-0-bg: #eff6ff; --pc-0-fg: #1e40af;
  --pc-1: #10b981; --pc-1-bg: #ecfdf5; --pc-1-fg: #065f46;
  --pc-2: #d97706; --pc-2-bg: #fffbeb; --pc-2-fg: #92400e;
  --pc-3: #7c3aed; --pc-3-bg: #f5f3ff; --pc-3-fg: #4c1d95;
  --pc-4: #dc2626; --pc-4-bg: #fef2f2; --pc-4-fg: #991b1b;
  --pc-5: #db2777; --pc-5-bg: #fdf2f8; --pc-5-fg: #831843;
  --pc-6: #0891b2; --pc-6-bg: #ecfeff; --pc-6-fg: #164e63;
  --pc-7: #0d9488; --pc-7-bg: #f0fdfa; --pc-7-fg: #134e4a;
}

/* Left accent on first cell of each row driven by status */
.users-table-row[data-sala-status] > td:first-child {
    border-left: 4px solid transparent;
}
.users-table-row[data-sala-status="disponivel"] > td:first-child { border-left-color: #16a34a; }
.users-table-row[data-sala-status="em_uso"] > td:first-child { border-left-color: #f59e0b; }
.users-table-row[data-sala-status="reservada"] > td:first-child { border-left-color: #2563eb; }
.users-table-row[data-sala-status="manutencao"] > td:first-child,
.users-table-row[data-sala-status="interditada"] > td:first-child { border-left-color: #dc2626; }

/* Predio chip colored dot */
.predio-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.predio-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #9ca3af;
}
.predio-chip[data-predio-idx="0"] { background: var(--pc-0-bg); color: var(--pc-0-fg); border-color: transparent; }
.predio-chip[data-predio-idx="0"] .predio-dot { background: var(--pc-0); }
.predio-chip[data-predio-idx="1"] { background: var(--pc-1-bg); color: var(--pc-1-fg); border-color: transparent; }
.predio-chip[data-predio-idx="1"] .predio-dot { background: var(--pc-1); }
.predio-chip[data-predio-idx="2"] { background: var(--pc-2-bg); color: var(--pc-2-fg); border-color: transparent; }
.predio-chip[data-predio-idx="2"] .predio-dot { background: var(--pc-2); }
.predio-chip[data-predio-idx="3"] { background: var(--pc-3-bg); color: var(--pc-3-fg); border-color: transparent; }
.predio-chip[data-predio-idx="3"] .predio-dot { background: var(--pc-3); }
.predio-chip[data-predio-idx="4"] { background: var(--pc-4-bg); color: var(--pc-4-fg); border-color: transparent; }
.predio-chip[data-predio-idx="4"] .predio-dot { background: var(--pc-4); }
.predio-chip[data-predio-idx="5"] { background: var(--pc-5-bg); color: var(--pc-5-fg); border-color: transparent; }
.predio-chip[data-predio-idx="5"] .predio-dot { background: var(--pc-5); }
.predio-chip[data-predio-idx="6"] { background: var(--pc-6-bg); color: var(--pc-6-fg); border-color: transparent; }
.predio-chip[data-predio-idx="6"] .predio-dot { background: var(--pc-6); }
.predio-chip[data-predio-idx="7"] { background: var(--pc-7-bg); color: var(--pc-7-fg); border-color: transparent; }
.predio-chip[data-predio-idx="7"] .predio-dot { background: var(--pc-7); }

@media (max-width: 768px) {
    .users-mobile-hub {
        display: grid;
        gap: 12px;
    }

    .users-mobile-hub-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .users-mobile-hub-stat {
        min-height: 98px;
        align-content: start;
    }

    .users-data-table tbody tr {
        border-radius: 22px;
        overflow: hidden;
    }

    .users-data-table tbody td.salas-card-cell {
        display: block;
        padding: 0;
        border-bottom: 0;
    }

    .users-data-table tbody td.salas-card-cell::before {
        content: none;
    }

    .salas-card-desktop {
        display: none;
    }

    .salas-mobile-card {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 18px 16px;
    }

    .salas-mobile-card-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
    }

    .salas-mobile-card-copy {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }

    .salas-mobile-title {
        font-size: 1rem;
        font-weight: 800;
        line-height: 1.15;
        color: var(--text-primary, #0f172a);
        word-break: break-word;
    }

    .salas-mobile-unit {
        font-size: .82rem;
        color: var(--text-soft, #64748b);
        line-height: 1.4;
    }

    .salas-mobile-location {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        font-size: .84rem;
        color: var(--text-secondary, #475569);
    }

    .salas-mobile-location-item {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
    }

    .salas-mobile-location-item i {
        color: #94a3b8;
        flex-shrink: 0;
    }

    .salas-mobile-inventory {
        display: grid;
        gap: 6px;
        padding: 11px 12px;
        border-radius: 14px;
        border: 1px solid color-mix(in srgb, var(--surface-border) 82%, transparent);
        background: color-mix(in srgb, var(--panel-bg) 96%, transparent);
    }

    .salas-mobile-inventory-label {
        font-size: .7rem;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--text-muted, #94a3b8);
    }

    .salas-mobile-inventory-value {
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        font-size: .88rem;
        font-weight: 600;
        color: var(--text-secondary, #334155);
        line-height: 1.45;
    }

    .salas-mobile-inventory-value i {
        color: #94a3b8;
        flex-shrink: 0;
    }

    .salas-mobile-inventory-value.is-empty {
        color: #64748b;
    }

    .salas-mobile-desc {
        margin: 0;
        font-size: .82rem;
        line-height: 1.5;
        color: var(--text-soft, #64748b);
    }

    .salas-mobile-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 2px;
    }

    .salas-mobile-action-form {
        display: flex;
        flex: 1 1 180px;
    }

    .salas-mobile-action {
        width: 100%;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .45rem;
        padding: .72rem .95rem;
        border-radius: 12px;
        border: 1px solid color-mix(in srgb, var(--surface-border) 82%, transparent);
        background: color-mix(in srgb, var(--panel-bg) 98%, transparent);
        color: var(--text-secondary, #334155);
        font-size: .82rem;
        font-weight: 700;
        cursor: pointer;
        text-align: center;
        box-shadow: 0 10px 18px rgba(15, 23, 42, .06);
    }

    .salas-mobile-action strong {
        font-size: .8rem;
        line-height: 1;
    }

    .salas-mobile-action--status.is-open {
        background: #fffbeb;
        border-color: #fcd34d;
        color: #92400e;
    }

    .salas-mobile-action--status.is-locked {
        background: #ecfdf5;
        border-color: #86efac;
        color: #166534;
    }

    .salas-mobile-action--edit {
        flex: 1 1 120px;
        background: #fff;
    }

    .salas-mobile-action--equip {
        flex: 1 1 150px;
        background: #eff6ff;
        border-color: #bfdbfe;
        color: #1d4ed8;
    }
}

@media (max-width: 520px) {
    .salas-mobile-card-head {
        flex-direction: column;
        align-items: stretch;
    }

    .salas-mobile-actions {
        flex-direction: column;
    }

    .salas-mobile-action-form,
    .salas-mobile-action,
    .salas-mobile-action--edit,
    .salas-mobile-action--equip {
        flex: 1 1 auto;
    }
}

/* ================================================================
   BOTAO PDF + MODAL DE PROGRESSO (PRM)
================================================================ */

/* Botao Gerar Relatorio PDF na stat-bar */
.salas-pdf-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  padding: .45rem .95rem;
  font-size: .78rem;
  font-weight: 700;
  background: #fff5f5;
  color: #dc2626;
  border: 1.5px solid #fecaca;
  border-radius: .6rem;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.salas-pdf-btn:hover {
  background: #fee2e2;
  border-color: #f87171;
  box-shadow: 0 1px 4px rgba(220,38,38,.15);
}
.salas-pdf-btn i { font-size: .85rem; }

/* ================================================================
   MODAL RELATORIO PDF (.prm-*)
     Full-screen: filtros → progresso → preview (iframe)
================================================================ */

.prm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(15, 23, 42, .7);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem;
}
.prm-backdrop[hidden] { display: none; }
.prm-backdrop.is-open { animation: esm-fade-in .15s ease both; }
.prm-backdrop.is-open .prm-box { animation: esm-scale-in .2s cubic-bezier(.34,1.56,.64,1) both; }

.prm-box {
    width: calc(100vw - 1rem);
    height: calc(100vh - 1rem);
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 28px 70px rgba(0, 0, 0, .28), 0 8px 18px rgba(0, 0, 0, .12);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.prm-header {
    padding: 1.15rem 1.35rem 1rem;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 46%, #2563eb 100%);
    color: #fff;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-shrink: 0;
}
.prm-header-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.prm-kicker {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.8);
}
.prm-title {
    margin: 0;
    font-size: 1.42rem;
    line-height: 1.1;
    font-weight: 800;
    color: #fff;
}
.prm-subtitle {
    margin: 0;
    max-width: 56rem;
    font-size: .88rem;
    line-height: 1.55;
    color: rgba(255,255,255,.82);
}
.prm-header-side {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
}
.prm-header-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .45rem;
    max-width: 34rem;
}
.prm-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .52rem .8rem;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.14);
    color: #fff;
    font-size: .77rem;
    font-weight: 600;
    white-space: nowrap;
}
.prm-close-x {
    width: 2.15rem;
    height: 2.15rem;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: .7rem;
    background: rgba(255,255,255,.08);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
}
.prm-close-x:hover {
    background: rgba(255,255,255,.16);
}

.prm-active-filters {
    padding: .75rem 1.35rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    flex-shrink: 0;
}
.prm-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .42rem .75rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: #334155;
    font-size: .77rem;
    font-weight: 600;
}
.prm-filter-chip strong { font-weight: 800; }
.prm-filter-chip.is-empty {
    background: #eef2f7;
    color: #64748b;
}

.prm-panel {
    flex: 1;
    min-height: 0;
}

.prm-layout {
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(320px, .9fr);
    min-height: 0;
}

.prm-stage {
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.prm-sidebar {
    min-height: 0;
    overflow-y: auto;
    padding: 1.25rem 1.2rem;
    border-left: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #f8fafc 0%, #eff6ff 100%);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.prm-sidebar-kicker {
    font-size: .72rem;
    font-weight: 800;
    color: #2563eb;
    text-transform: uppercase;
    letter-spacing: .12em;
}
.prm-sidebar-title {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
    color: #0f172a;
}
.prm-sidebar-block {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .95rem 1rem;
    border-radius: .9rem;
    background: rgba(255,255,255,.84);
    border: 1px solid #dbe3ee;
}
.prm-sidebar-label {
    font-size: .7rem;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.prm-sidebar-value {
    font-size: .95rem;
    line-height: 1.4;
    color: #0f172a;
}
.prm-sidebar-copy {
    margin: 0;
    font-size: .84rem;
    line-height: 1.6;
    color: #475569;
}
.prm-chip-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.prm-panel-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.prm-panel-body--progress {
    justify-content: center;
}

.prm-panel-footer {
    padding: .95rem 1.35rem;
    border-top: 1px solid #e2e8f0;
    background: #fff;
    display: flex;
    justify-content: flex-end;
    gap: .65rem;
    flex-shrink: 0;
}
.prm-panel-footer--preview {
    background: #fff;
}

.prm-panel-desc {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .9rem 1rem;
    border-radius: .95rem;
    border: 1px solid #dbe3ee;
    background: linear-gradient(135deg, #f8fafc 0%, #eef4ff 100%);
    color: #334155;
    font-size: .9rem;
    line-height: 1.55;
}
.prm-panel-desc i {
    color: #2563eb;
    font-size: 1rem;
}

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

.prm-field {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.prm-field-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 700;
    color: #374151;
}
.prm-field-label i { color: #64748b; }

.prm-select,
.prm-input {
    width: 100%;
    padding: .72rem 2.45rem .72rem .85rem;
    border: 1.5px solid #cbd5e1;
    border-radius: .8rem;
    background-color: #fff;
    font-size: .9rem;
    color: #0f172a;
}
.prm-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .8rem center;
    background-size: 1rem;
    cursor: pointer;
}
.prm-input {
    padding-right: .85rem;
}
.prm-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .8;
}
.prm-select:focus,
.prm-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.14);
}

.prm-check-field {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .85rem .95rem;
    border-radius: .9rem;
    border: 1.5px solid #cbd5e1;
    background: #fff;
    cursor: pointer;
}
.prm-check-field:hover {
    border-color: #93c5fd;
    background: #f8fbff;
}
.prm-check {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.prm-check-custom {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: .35rem;
    border: 2px solid #cbd5e1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.prm-check-ico {
    display: none;
    font-size: .72rem;
    color: #fff;
}
.prm-check:checked + .prm-check-custom {
    background: #2563eb;
    border-color: #2563eb;
}
.prm-check:checked + .prm-check-custom .prm-check-ico {
    display: block;
}
.prm-check-label {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .86rem;
    font-weight: 700;
    color: #334155;
}
.prm-check-label i { color: #64748b; }

.prm-track {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
.prm-step {
    display: flex;
    gap: .95rem;
    align-items: flex-start;
}
.prm-step-left {
    width: 2.55rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}
.prm-step-dot {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #94a3b8;
    font-size: 1rem;
    transition: background .2s, color .2s, box-shadow .2s;
}
.prm-step-line {
    width: 2px;
    flex: 1;
    min-height: 1.7rem;
    margin: .3rem 0;
    background: #dbe3ee;
}
.prm-step--last .prm-step-line { display: none; }
.prm-step-right {
    flex: 1;
    padding-top: .45rem;
    padding-bottom: 1.15rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.prm-step-label {
    font-size: .96rem;
    font-weight: 700;
    color: #94a3b8;
}
.prm-step-sub {
    font-size: .82rem;
    color: #94a3b8;
    line-height: 1.45;
}
.prm-step-indicator {
    width: 1.35rem;
    height: 1.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding-top: .55rem;
    color: #16a34a;
}
.prm-step--wait { opacity: .42; }
.prm-step--active { opacity: 1; }
.prm-step--active .prm-step-dot {
    background: #dbeafe;
    color: #2563eb;
    box-shadow: 0 0 0 5px rgba(59,130,246,.14);
}
.prm-step--active .prm-step-label { color: #1d4ed8; }
.prm-step--active .prm-step-sub { color: #3b82f6; }
.prm-step--active .prm-step-indicator,
.prm-step--active .prm-step-line { color: #2563eb; background: #bfdbfe; }
.prm-step--done { opacity: 1; }
.prm-step--done .prm-step-dot {
    background: #dcfce7;
    color: #16a34a;
}
.prm-step--done .prm-step-label { color: #15803d; }
.prm-step--done .prm-step-sub { color: #4d7c0f; }
.prm-step--done .prm-step-line { background: #86efac; }

.prm-hint {
    margin: .25rem auto 0;
    max-width: 700px;
    text-align: center;
    font-size: .88rem;
    color: #64748b;
    line-height: 1.55;
}

.prm-panel--preview {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.prm-preview-topbar {
    padding: 1rem 1.35rem;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-shrink: 0;
}
.prm-preview-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}
.prm-preview-kicker {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #2563eb;
}
.prm-preview-title {
    margin: 0;
    font-size: 1.08rem;
    color: #0f172a;
}
.prm-preview-tools {
    display: flex;
    align-items: flex-start;
}
.prm-chip-cloud--preview {
    gap: .4rem;
}
.prm-preview-wrap {
    flex: 1;
    min-height: 0;
    padding: .85rem 1.35rem 0;
    background: linear-gradient(180deg, #eaf1fb 0%, #dbe7f5 100%);
}
.prm-iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 1px solid #dbe3ee;
    border-radius: 1rem 1rem 0 0;
    background: #fff;
    box-shadow: 0 18px 42px rgba(15,23,42,.12);
}

.prm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 42px;
    padding: .7rem 1.05rem;
    border-radius: .8rem;
    border: 1px solid transparent;
    font-size: .86rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
}
.prm-btn:disabled {
    opacity: .7;
    cursor: not-allowed;
}
.prm-btn-cancel,
.prm-btn-secondary {
    background: #fff;
    border-color: #cbd5e1;
    color: #475569;
}
.prm-btn-cancel:hover,
.prm-btn-secondary:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
}
.prm-btn-gerar {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}
.prm-btn-gerar:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    box-shadow: 0 8px 20px rgba(220,38,38,.22);
}
.prm-btn-download {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}
.prm-btn-download:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    box-shadow: 0 8px 20px rgba(37,99,235,.22);
}

html[data-theme="dark"] .salas-desktop-action {
    background: rgba(18, 25, 35, .94);
    border-color: rgba(94, 111, 134, .42);
    color: #d9e3f0;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .24);
}

html[data-theme="dark"] .salas-desktop-action:hover {
    background: rgba(24, 32, 43, .98);
    border-color: rgba(126, 151, 191, .42);
    color: #eef2f7;
}

html[data-theme="dark"] .salas-desktop-action--inventory {
    background: rgba(30, 58, 138, .32);
    border-color: rgba(96, 165, 250, .28);
    color: #bfdbfe;
}

html[data-theme="dark"] .salas-desktop-action--inventory:hover {
    background: rgba(30, 64, 175, .38);
    border-color: rgba(147, 197, 253, .36);
    color: #dbeafe;
}

html[data-theme="dark"] .salas-desktop-action--status.is-open {
    background: rgba(120, 53, 15, .42);
    border-color: rgba(245, 158, 11, .28);
    color: #fcd34d;
}

html[data-theme="dark"] .salas-desktop-action--status.is-open:hover {
    background: rgba(146, 64, 14, .48);
    border-color: rgba(251, 191, 36, .34);
}

html[data-theme="dark"] .salas-desktop-action--status.is-locked {
    background: rgba(20, 83, 45, .42);
    border-color: rgba(74, 222, 128, .28);
    color: #86efac;
}

html[data-theme="dark"] .salas-desktop-action--status.is-locked:hover {
    background: rgba(21, 94, 49, .48);
    border-color: rgba(134, 239, 172, .34);
}

html[data-theme="dark"] .salas-mobile-action {
    background: rgba(18, 25, 35, .96);
    border-color: rgba(94, 111, 134, .42);
    color: #d9e3f0;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .20);
}

html[data-theme="dark"] .salas-mobile-action--status.is-open {
    background: rgba(120, 53, 15, .42);
    border-color: rgba(245, 158, 11, .28);
    color: #fcd34d;
}

html[data-theme="dark"] .salas-mobile-action--status.is-locked {
    background: rgba(20, 83, 45, .42);
    border-color: rgba(74, 222, 128, .28);
    color: #86efac;
}

html[data-theme="dark"] .salas-mobile-action--edit {
    background: rgba(18, 25, 35, .96);
}

html[data-theme="dark"] .salas-mobile-action--equip {
    background: rgba(30, 58, 138, .32);
    border-color: rgba(96, 165, 250, .28);
    color: #bfdbfe;
}

html[data-theme="dark"] .users-mobile-hub-stat--ok strong {
    color: #86efac;
}

html[data-theme="dark"] .users-mobile-hub-stat--off strong {
    color: #fcd34d;
}

html[data-theme="dark"] .users-mobile-hub-stat--neutral strong {
    color: #d9e3f0;
}

html[data-theme="dark"] .modal-tabs {
    border-bottom-color: rgba(94, 111, 134, .32);
}

html[data-theme="dark"] .modal-tab {
    color: #91a0b5;
}

html[data-theme="dark"] .modal-tab:hover {
    color: #eef2f7;
}

html[data-theme="dark"] .modal-tab.active {
    color: #8aa7d2;
    border-bottom-color: #8aa7d2;
}

html[data-theme="dark"] .esm-box {
    background: #141b24;
    box-shadow: 0 28px 70px rgba(0, 0, 0, .42), 0 8px 18px rgba(0, 0, 0, .18);
}

html[data-theme="dark"] .esm-header,
html[data-theme="dark"] .esm-footer {
    background: #18212d;
    border-color: rgba(94, 111, 134, .32);
}

html[data-theme="dark"] .esm-kicker {
    color: #8aa7d2;
}

html[data-theme="dark"] .esm-title {
    color: #eef2f7;
}

html[data-theme="dark"] .esm-close-x {
    color: #91a0b5;
}

html[data-theme="dark"] .esm-close-x:hover {
    background: rgba(51, 65, 85, .46);
    color: #eef2f7;
}

html[data-theme="dark"] .esm-body {
    background: #141b24;
}

html[data-theme="dark"] .esm-label {
    color: #c7d2e0;
}

html[data-theme="dark"] .esm-label i,
html[data-theme="dark"] .esm-char-count {
    color: #7f8ca1;
}

html[data-theme="dark"] .esm-select,
html[data-theme="dark"] .esm-textarea {
    background-color: #0f1722;
    border-color: rgba(94, 111, 134, .38);
    color: #eef2f7;
}

html[data-theme="dark"] .esm-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23cbd5e1' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html[data-theme="dark"] .esm-select:focus,
html[data-theme="dark"] .esm-textarea:focus {
    border-color: #8aa7d2;
    box-shadow: 0 0 0 3px rgba(138, 167, 210, .18);
}

html[data-theme="dark"] .esm-textarea::placeholder {
    color: #7f8ca1;
}

html[data-theme="dark"] .esm-status-badge {
    background: rgba(20, 83, 45, .38);
    color: #86efac;
}

html[data-theme="dark"] .esm-status-badge.em-uso {
    background: rgba(127, 29, 29, .38);
    color: #fecaca;
}

html[data-theme="dark"] .esm-error {
    background: rgba(127, 29, 29, .28);
    border-color: rgba(248, 113, 113, .24);
    color: #fecaca;
}

html[data-theme="dark"] .esm-btn-cancel {
    background: rgba(30, 41, 56, .92);
    color: #e2e8f0;
    border-color: rgba(94, 111, 134, .38);
}

html[data-theme="dark"] .esm-btn-cancel:hover:not(:disabled) {
    background: rgba(51, 65, 85, .74);
    border-color: rgba(126, 151, 191, .32);
}

html[data-theme="dark"] .esm-btn-save {
    background: linear-gradient(135deg, #8aa7d2 0%, #6784b0 55%, #58729a 100%);
    border-color: rgba(146, 173, 217, .46);
    box-shadow: 0 14px 28px rgba(24, 36, 54, .34);
}

html[data-theme="dark"] .esm-btn-save:hover:not(:disabled) {
    background: linear-gradient(135deg, #9ab3d8 0%, #7590bb 55%, #617aa3 100%);
    border-color: rgba(168, 190, 223, .52);
}

html[data-theme="dark"] .hist-card {
    --surface: rgba(18, 25, 35, .96);
    --surface-alt: rgba(24, 32, 43, .92);
    --border: rgba(94, 111, 134, .34);
    --text-secondary: #8b9ab0;
    --text-primary: #e5ebf5;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
}

html[data-theme="dark"] .hist-st--aberto {
    background: rgba(30, 58, 138, .32);
    color: #93c5fd;
    border-color: rgba(96, 165, 250, .24);
}

html[data-theme="dark"] .hist-st--andamento {
    background: rgba(120, 53, 15, .34);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, .24);
}

html[data-theme="dark"] .hist-st--resolvido {
    background: rgba(20, 83, 45, .34);
    color: #86efac;
    border-color: rgba(74, 222, 128, .24);
}

html[data-theme="dark"] .hist-st--cancelado {
    background: rgba(51, 65, 85, .52);
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, .22);
}

html[data-theme="dark"] .hist-prio--baixa {
    background: rgba(20, 83, 45, .34);
    color: #86efac;
}

html[data-theme="dark"] .hist-prio--media {
    background: rgba(120, 53, 15, .34);
    color: #fbbf24;
}

html[data-theme="dark"] .hist-prio--alta {
    background: rgba(154, 52, 18, .34);
    color: #fdba74;
}

html[data-theme="dark"] .hist-prio--critica {
    background: rgba(127, 29, 29, .34);
    color: #fca5a5;
}

html[data-theme="dark"] .hist-step-badge {
    background: #6784b0;
    color: #f8fbff;
}

html[data-theme="dark"] .action-circle-secondary {
    background: linear-gradient(135deg, rgba(53, 72, 97, .92) 0%, rgba(34, 46, 62, .96) 100%);
    color: #e8eff9;
    border-color: rgba(126, 151, 191, .36);
}

html[data-theme="dark"] .action-circle-secondary:hover {
    background: linear-gradient(135deg, rgba(70, 92, 123, .96) 0%, rgba(44, 58, 78, .98) 100%);
    border-color: rgba(146, 173, 217, .40);
    color: #f8fbff;
}

html[data-theme="dark"] .salas-pdf-btn {
    background: rgba(127, 29, 29, .26);
    color: #fecaca;
    border-color: rgba(248, 113, 113, .24);
}

html[data-theme="dark"] .salas-pdf-btn:hover {
    background: rgba(153, 27, 27, .34);
    border-color: rgba(248, 113, 113, .32);
    box-shadow: 0 8px 20px rgba(62, 18, 18, .30);
}

html[data-theme="dark"] .prm-box {
    background: #141b24;
    box-shadow: 0 36px 80px rgba(0, 0, 0, .48), 0 10px 24px rgba(0, 0, 0, .20);
}

html[data-theme="dark"] .prm-active-filters,
html[data-theme="dark"] .prm-panel-footer,
html[data-theme="dark"] .prm-panel-footer--preview,
html[data-theme="dark"] .prm-preview-topbar {
    background: #18212d;
    border-color: rgba(94, 111, 134, .32);
}

html[data-theme="dark"] .prm-filter-chip {
    background: rgba(51, 65, 85, .75);
    color: #e2e8f0;
}

html[data-theme="dark"] .prm-filter-chip.is-empty {
    background: rgba(30, 41, 56, .72);
    color: #8b9ab0;
}

html[data-theme="dark"] .prm-stage {
    background: #141b24;
}

html[data-theme="dark"] .prm-sidebar {
    background: linear-gradient(180deg, #111926 0%, #0f1722 100%);
    border-color: rgba(94, 111, 134, .32);
}

html[data-theme="dark"] .prm-sidebar-kicker,
html[data-theme="dark"] .prm-preview-kicker {
    color: #8aa7d2;
}

html[data-theme="dark"] .prm-sidebar-title,
html[data-theme="dark"] .prm-sidebar-value,
html[data-theme="dark"] .prm-preview-title {
    color: #eef2f7;
}

html[data-theme="dark"] .prm-sidebar-block {
    background: rgba(18, 25, 35, .94);
    border-color: rgba(94, 111, 134, .30);
}

html[data-theme="dark"] .prm-sidebar-label,
html[data-theme="dark"] .prm-sidebar-copy,
html[data-theme="dark"] .prm-hint,
html[data-theme="dark"] .prm-field-label i,
html[data-theme="dark"] .prm-check-label i,
html[data-theme="dark"] .prm-step-label,
html[data-theme="dark"] .prm-step-sub {
    color: #8b9ab0;
}

html[data-theme="dark"] .prm-panel-desc {
    background: linear-gradient(135deg, rgba(30, 41, 56, .92) 0%, rgba(22, 31, 44, .98) 100%);
    border-color: rgba(94, 111, 134, .30);
    color: #d9e3f0;
}

html[data-theme="dark"] .prm-panel-desc i,
html[data-theme="dark"] .prm-field-label,
html[data-theme="dark"] .prm-check-label {
    color: #d9e3f0;
}

html[data-theme="dark"] .prm-select,
html[data-theme="dark"] .prm-input,
html[data-theme="dark"] .prm-check-field {
    background: #0f1722;
    border-color: rgba(94, 111, 134, .38);
    color: #eef2f7;
}

html[data-theme="dark"] .prm-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

html[data-theme="dark"] .prm-select:focus,
html[data-theme="dark"] .prm-input:focus {
    border-color: #8aa7d2;
    box-shadow: 0 0 0 3px rgba(138, 167, 210, .18);
}

html[data-theme="dark"] .prm-check-field:hover {
    border-color: rgba(126, 151, 191, .42);
    background: rgba(30, 41, 56, .92);
}

html[data-theme="dark"] .prm-check-custom {
    border-color: rgba(126, 151, 191, .42);
}

html[data-theme="dark"] .prm-check:checked + .prm-check-custom {
    background: #6784b0;
    border-color: #6784b0;
}

html[data-theme="dark"] .prm-step-dot {
    background: rgba(30, 41, 56, .92);
    color: #8b9ab0;
}

html[data-theme="dark"] .prm-step-line {
    background: rgba(94, 111, 134, .30);
}

html[data-theme="dark"] .prm-step--active .prm-step-dot {
    background: rgba(48, 79, 126, .52);
    color: #bfdbfe;
    box-shadow: 0 0 0 5px rgba(96, 165, 250, .12);
}

html[data-theme="dark"] .prm-step--active .prm-step-label {
    color: #bfdbfe;
}

html[data-theme="dark"] .prm-step--active .prm-step-sub {
    color: #dbeafe;
}

html[data-theme="dark"] .prm-step--active .prm-step-indicator,
html[data-theme="dark"] .prm-step--active .prm-step-line {
    color: #8aa7d2;
    background: rgba(96, 165, 250, .34);
}

html[data-theme="dark"] .prm-step--done .prm-step-dot {
    background: rgba(20, 83, 45, .42);
    color: #86efac;
}

html[data-theme="dark"] .prm-step--done .prm-step-label {
    color: #86efac;
}

html[data-theme="dark"] .prm-step--done .prm-step-sub {
    color: #bbf7d0;
}

html[data-theme="dark"] .prm-step--done .prm-step-line {
    background: rgba(74, 222, 128, .30);
}

html[data-theme="dark"] .prm-preview-wrap {
    background: linear-gradient(180deg, #101927 0%, #0d141f 100%);
}

html[data-theme="dark"] .prm-iframe {
    border-color: rgba(94, 111, 134, .30);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .24);
}

html[data-theme="dark"] .prm-btn-cancel,
html[data-theme="dark"] .prm-btn-secondary {
    background: rgba(30, 41, 56, .92);
    border-color: rgba(94, 111, 134, .38);
    color: #e2e8f0;
}

html[data-theme="dark"] .prm-btn-cancel:hover,
html[data-theme="dark"] .prm-btn-secondary:hover {
    background: rgba(51, 65, 85, .74);
    border-color: rgba(126, 151, 191, .32);
    color: #f8fbff;
}

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

    .prm-sidebar {
        border-left: 0;
        border-top: 1px solid #e2e8f0;
    }
}

@media (max-width: 768px) {
    .prm-box {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }

    .prm-backdrop {
        padding: 0;
    }

    .prm-header {
        flex-direction: column;
        align-items: stretch;
        padding: 1rem;
    }

    .prm-header-side {
        justify-content: space-between;
        align-items: center;
    }

    .prm-header-meta {
        justify-content: flex-start;
    }

    .prm-active-filters,
    .prm-panel-body,
    .prm-panel-footer,
    .prm-preview-topbar,
    .prm-preview-wrap {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .prm-filter-grid--split {
        grid-template-columns: 1fr;
    }

    .prm-preview-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .prm-preview-tools {
        width: 100%;
    }

    .prm-preview-tools .prm-btn {
        width: 100%;
    }

    .prm-panel-footer {
        flex-direction: column-reverse;
    }

    .prm-panel-footer .prm-btn {
        width: 100%;
    }
}

/* ================================================================
   EQUIPAMENTOS HUB
================================================================ */

.equip-hub-page {
    gap: 1rem;
}

.equip-hub-hero,
.equip-hub-detail-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .18);
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.12), transparent 24%),
        linear-gradient(145deg, #0f172a 0%, #14233a 52%, #133b52 100%);
    color: #fff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .16);
}

.equip-hub-hero {
    padding: 1.6rem;
}

.equip-hub-detail-hero {
    display: grid;
    gap: 1.15rem;
    padding: 1.5rem;
}

.equip-hub-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
    gap: 1.2rem;
    align-items: stretch;
}

html[data-theme="light"] .equip-hub-hero,
html[data-theme="light"] .equip-hub-detail-hero {
    background:
        radial-gradient(circle at top right, rgba(219, 234, 254, .28), transparent 28%),
        linear-gradient(135deg, #2459c5 0%, #1d6eff 52%, #0f766e 100%);
    border-color: rgba(148, 163, 184, .18);
    box-shadow: 0 22px 48px rgba(36, 89, 197, .18);
}

html[data-theme="dark"] .equip-hub-hero,
html[data-theme="dark"] .equip-hub-detail-hero {
    background:
        radial-gradient(circle at top right, rgba(148, 163, 184, .12), transparent 28%),
        linear-gradient(135deg, #0f172a 0%, #16263a 50%, #124a4a 100%);
    border-color: rgba(148, 163, 184, .14);
    box-shadow: 0 24px 54px rgba(0, 0, 0, .28);
}

.equip-hub-hero::after,
.equip-hub-detail-hero::after {
    content: '';
    position: absolute;
    right: -54px;
    bottom: -54px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
}

.equip-hub-hero .eyebrow,
.equip-hub-detail-hero .eyebrow {
    color: rgba(255,255,255,.72);
}

.equip-hub-hero-copy,
.equip-hub-detail-head,
.equip-hub-detail-topline,
.equip-hub-detail-summary,
.equip-hub-detail-actions,
.equip-hub-detail-meta,
.equip-hub-hero-board,
.equip-hub-hero-meta {
    position: relative;
    z-index: 1;
}

.equip-hub-hero-copy strong,
.equip-hub-detail-title {
    display: block;
    margin-top: .45rem;
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.2;
}

.equip-hub-hero-copy strong {
    max-width: 18ch;
    font-size: 1.72rem;
}

.equip-hub-detail-title {
    margin: .35rem 0 .55rem;
}

.equip-hub-detail-topline {
    display: flex;
    justify-content: space-between;
    gap: 1.2rem;
    align-items: flex-start;
}

.equip-hub-hero .section-note,
.equip-hub-detail-copy {
    margin-top: .65rem;
    max-width: 68rem;
    color: rgba(255,255,255,.76);
    line-height: 1.7;
}

.equip-hub-detail-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .8rem;
}

.equip-hub-detail-stat {
    display: grid;
    gap: .3rem;
    min-width: 0;
    padding: .9rem 1rem;
    border-radius: 18px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
}

.equip-hub-detail-stat span {
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.58);
}

.equip-hub-detail-stat strong {
    font-size: .98rem;
    line-height: 1.35;
    color: #fff;
}

.equip-hub-detail-stat--alert {
    background: rgba(249, 115, 22, .16);
    border-color: rgba(251, 146, 60, .34);
}

.equip-hub-hero-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: 1rem;
}

.equip-hub-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .68rem .84rem;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.16);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1;
}

.equip-hub-hero-pill i {
    font-size: .88rem;
    color: rgba(255,255,255,.92);
}

.equip-hub-hero-board {
    display: grid;
    gap: 1rem;
    align-content: start;
    padding: 1.05rem;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.08) 100%);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(14px);
}

.equip-hub-hero-board-head {
    display: grid;
    gap: .32rem;
}

.equip-hub-hero-board-kicker {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.72);
}

.equip-hub-hero-board-head p {
    font-size: .88rem;
    line-height: 1.55;
    color: rgba(255,255,255,.78);
}

.equip-hub-hero-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
    align-content: start;
}

.equip-hub-metric {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.05rem;
    min-width: 0;
    border-radius: 20px;
    background: rgba(255,255,255,.11);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter: blur(10px);
}

.equip-hub-metric-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.16);
    font-size: 1rem;
    color: rgba(255,255,255,.96);
}

.equip-hub-metric-icon i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1em;
    height: 1.1em;
    line-height: 1;
}

.equip-hub-metric > div {
    min-width: 0;
}

.equip-hub-metric strong,
.equip-hub-metric span {
    display: block;
}

.equip-hub-metric strong {
    font-size: 1.48rem;
    line-height: 1;
    color: #fff;
}

.equip-hub-metric span {
    margin-top: .24rem;
    font-size: .82rem;
    color: rgba(255,255,255,.84);
}

.equip-hub-shell {
    display: grid;
    gap: 1rem;
}

.equip-hub-filter {
    align-items: center;
}

.equip-hub-table-wrap {
    border: 1px solid rgba(203, 213, 225, .88);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(248, 250, 252, .88) 0%, rgba(255, 255, 255, .96) 100%);
    overflow: hidden;
}

.equip-hub-table {
    width: 100%;
    min-width: 1120px;
    border-collapse: separate;
    border-spacing: 0;
}

.equip-hub-table thead th {
    padding: 1rem .95rem;
    border-bottom: 1px solid rgba(203, 213, 225, .86);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
    background: rgba(241, 245, 249, .92);
    white-space: nowrap;
}

.equip-hub-table tbody td {
    padding: 1rem .95rem;
    border-bottom: 1px solid rgba(226, 232, 240, .92);
    vertical-align: top;
    background: rgba(255,255,255,.96);
}

.equip-hub-table tbody tr:hover td {
    background: rgba(239, 245, 255, .96);
}

.equip-hub-col-actions {
    text-align: center;
}

.equip-hub-table tbody tr:last-child td {
    border-bottom: 0;
}

.equip-hub-id-stack,
.equip-hub-main,
.equip-hub-location,
.equip-hub-owner,
.equip-hub-status,
.equip-hub-updated {
    display: grid;
    gap: .32rem;
}

.equip-hub-id-stack strong,
.equip-hub-main strong,
.equip-hub-location strong,
.equip-hub-owner strong,
.equip-hub-updated strong {
    font-size: .95rem;
    color: var(--text-primary);
}

.equip-hub-id-stack span,
.equip-hub-location span,
.equip-hub-owner span,
.equip-hub-status small,
.equip-hub-updated span,
.equip-hub-location small {
    color: var(--text-muted);
    font-size: .8rem;
    line-height: 1.45;
}

.equip-hub-subline,
.equip-hub-chip-row,
.equip-hub-detail-meta,
.equip-maint-history-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.equip-hub-subline {
    margin-top: .15rem;
}

.equip-hub-subline span,
.equip-hub-chip,
.equip-hub-action span {
    font-size: .79rem;
}

.equip-hub-chip {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    padding: .46rem .72rem;
    border-radius: 999px;
    background: #f1f5f9;
    border: 1px solid rgba(203, 213, 225, .95);
    color: #334155;
    font-weight: 700;
}

.equip-hub-chip--alert {
    background: #fff7ed;
    border-color: #fdba74;
    color: #b45309;
}

.equip-hub-detail-hero .equip-hub-chip {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.16);
    color: #fff;
}

.equip-hub-detail-hero .equip-hub-chip--alert {
    background: rgba(249,115,22,.18);
    border-color: rgba(251,146,60,.42);
    color: #ffedd5;
}

.equip-ops-hero {
    gap: 0;
}

.equip-ops-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.24fr) minmax(320px, .76fr);
    gap: 1.2rem;
}

.equip-ops-hero-main,
.equip-ops-hero-side,
.equip-ops-status-row,
.equip-ops-meta-grid,
.equip-ops-action-row,
.equip-ops-location-path,
.equip-asset-overview,
.equip-asset-kpi-grid,
.equip-asset-kpi-body,
.equip-asset-info-grid-shell,
.equip-asset-info-grid,
.equip-asset-timeline,
.equip-asset-timeline-body {
    display: grid;
    gap: 1rem;
}

.equip-ops-status-row,
.equip-ops-action-row,
.equip-asset-trace-route,
.equip-asset-timeline-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.equip-ops-status {
    display: inline-flex;
    align-items: center;
    gap: .58rem;
    padding: .78rem 1.05rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter: blur(10px);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.equip-ops-status--success {
    background: rgba(34, 197, 94, .18);
    color: #dcfce7;
}

.equip-ops-status--warning {
    background: rgba(245, 158, 11, .18);
    color: #fef3c7;
}

.equip-ops-status--info {
    background: rgba(59, 130, 246, .18);
    color: #dbeafe;
}

.equip-ops-status--danger {
    background: rgba(239, 68, 68, .18);
    color: #fee2e2;
}

.equip-ops-status--violet {
    background: rgba(139, 92, 246, .18);
    color: #ede9fe;
}

.equip-ops-status-meta {
    display: inline-flex;
    align-items: center;
    padding: .48rem .78rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.84);
    font-size: .82rem;
    font-weight: 700;
}

.equip-ops-copy {
    max-width: none;
}

.equip-ops-meta-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem;
}

.equip-ops-meta-card {
    display: grid;
    gap: .32rem;
    min-width: 0;
    padding: 1rem 1.05rem;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.07) 100%);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(12px);
}

.equip-ops-meta-card span {
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.66);
}

.equip-ops-meta-card strong {
    color: #fff;
    font-size: 1rem;
    line-height: 1.35;
}

.equip-ops-meta-card small {
    color: rgba(255,255,255,.78);
    line-height: 1.45;
}

.equip-ops-meta-card--alert {
    background: linear-gradient(180deg, rgba(249, 115, 22, .22) 0%, rgba(194, 65, 12, .12) 100%);
    border-color: rgba(251, 146, 60, .34);
}

.equip-ops-action-row {
    display: flex;
    gap: .7rem;
}

.equip-ops-hero-side {
    align-content: start;
}

.equip-ops-visual-card,
.equip-ops-location-card {
    display: grid;
    gap: 1rem;
    padding: 1.05rem;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.08) 100%);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(14px);
}

.equip-ops-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.equip-ops-card-head strong {
    display: block;
    color: #fff;
}

.equip-ops-visual-frame {
    min-height: 180px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    gap: .8rem;
    padding: 1rem;
    text-align: center;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.22), rgba(255,255,255,.04) 48%),
        linear-gradient(145deg, rgba(15, 23, 42, .34), rgba(15, 23, 42, .14));
    border: 1px solid rgba(255,255,255,.14);
}

.equip-ops-visual-ring {
    width: 74px;
    height: 74px;
    border-radius: 22px;
    display: inline-grid;
    place-items: center;
    background: rgba(255,255,255,.14);
    color: #fff;
    font-size: 1.7rem;
}

.equip-ops-visual-initials {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: .16em;
    color: #fff;
}

.equip-ops-visual-body {
    display: grid;
    gap: .35rem;
}

.equip-ops-visual-body strong {
    color: #fff;
    font-size: 1rem;
}

.equip-ops-visual-body p {
    margin: 0;
    color: rgba(255,255,255,.76);
    line-height: 1.6;
}

.equip-ops-visual-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.equip-ops-location-path {
    gap: .75rem;
}

.equip-ops-location-node {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: .85rem .95rem;
    border-radius: 20px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
}

.equip-ops-location-step {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255,255,255,.15);
    color: #fff;
    font-size: .82rem;
    font-weight: 900;
}

.equip-ops-location-node strong {
    display: block;
    color: #fff;
}

.equip-ops-location-node small,
.equip-ops-location-copy {
    color: rgba(255,255,255,.78);
    line-height: 1.5;
}

.equip-ops-location-copy {
    margin: 0;
}

.equip-detail-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, .8fr);
    gap: 1rem;
    padding: 1.35rem;
    border: 1px solid rgba(226, 232, 240, .96);
    background: linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(248,250,252,.98) 100%);
    box-shadow: 0 18px 38px rgba(15, 23, 42, .06);
}

.equip-detail-shell-main,
.equip-detail-shell-side,
.equip-detail-shell-grid,
.equip-detail-side-grid,
.equip-detail-shell-copyblock {
    display: grid;
    gap: 1rem;
}

.equip-detail-shell-top,
.equip-detail-shell-title-row,
.equip-detail-shell-actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.equip-detail-shell-title {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.7rem;
    line-height: 1.18;
}

.equip-detail-shell-copy {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.65;
    max-width: 62rem;
}

.equip-detail-shell-section,
.equip-detail-shell-item,
.equip-detail-side-item,
.equip-detail-visual {
    border-radius: 22px;
    border: 1px solid rgba(226, 232, 240, .96);
    background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(248,250,252,.94) 100%);
}

.equip-detail-shell-section,
.equip-detail-shell-item,
.equip-detail-side-item {
    padding: 1rem 1.05rem;
}

.equip-detail-shell-section {
    min-width: min(100%, 280px);
}

.equip-detail-shell-grid,
.equip-detail-side-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.equip-detail-shell-item span,
.equip-detail-shell-section span,
.equip-detail-side-item span {
    display: block;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.equip-detail-shell-item strong,
.equip-detail-shell-section strong,
.equip-detail-side-item strong {
    display: block;
    margin-top: .28rem;
    color: var(--text-primary);
    line-height: 1.4;
}

.equip-detail-shell-item small,
.equip-detail-shell-section small,
.equip-detail-side-item small {
    display: block;
    margin-top: .28rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.equip-detail-visual {
    display: grid;
    place-items: center;
    gap: .75rem;
    min-height: 170px;
    padding: 1.2rem;
    text-align: center;
    background:
        radial-gradient(circle at top, rgba(36, 89, 197, .12), transparent 55%),
        linear-gradient(180deg, rgba(248,250,252,.98) 0%, rgba(241,245,249,.96) 100%);
}

.equip-detail-visual-icon {
    width: 64px;
    height: 64px;
    display: inline-grid;
    place-items: center;
    border-radius: 20px;
    background: rgba(36, 89, 197, .08);
    color: var(--primary);
    font-size: 1.4rem;
}

.equip-detail-visual strong {
    color: var(--text-primary);
    font-size: 1.8rem;
    letter-spacing: .16em;
}

.equip-detail-visual p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

.equip-detail-side-item--alert {
    border-color: rgba(251, 146, 60, .46);
    background: linear-gradient(180deg, rgba(255, 247, 237, .98) 0%, rgba(255, 237, 213, .88) 100%);
}

.equip-overview-dashboard {
    display: grid;
    gap: 1rem;
}

.equip-overview-head,
.equip-overview-panel,
.equip-overview-metric {
    border: 1px solid rgba(226, 232, 240, .96);
    border-radius: 8px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
}

.equip-overview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
}

.equip-overview-title,
.equip-overview-actions,
.equip-overview-panel-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.equip-overview-title {
    align-items: flex-start;
    min-width: 0;
}

.equip-overview-title h2 {
    margin: .2rem 0 .18rem;
    color: var(--text-primary);
    font-size: 1.3rem;
    line-height: 1.25;
}

.equip-overview-title p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.5;
}

.equip-overview-device {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(36, 89, 197, .09);
    color: var(--primary);
    font-size: 1rem;
}

.equip-overview-actions {
    justify-content: flex-end;
}

.equip-overview-actions .btn {
    min-height: 38px;
}

.equip-overview-actions .equip-ops-status {
    min-height: 38px;
    padding: .62rem .82rem;
    box-shadow: none;
}

.equip-overview-actions .equip-ops-status--success {
    background: #dcfce7;
    border-color: #bbf7d0;
    color: #166534;
}

.equip-overview-actions .equip-ops-status--warning {
    background: #fef3c7;
    border-color: #fde68a;
    color: #92400e;
}

.equip-overview-actions .equip-ops-status--info {
    background: #dbeafe;
    border-color: #bfdbfe;
    color: #1e40af;
}

.equip-overview-actions .equip-ops-status--danger {
    background: #fee2e2;
    border-color: #fecaca;
    color: #991b1b;
}

.equip-overview-actions .equip-ops-status--violet {
    background: #ede9fe;
    border-color: #ddd6fe;
    color: #5b21b6;
}

.equip-overview-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .75rem;
}

.equip-overview-metric {
    display: grid;
    gap: .28rem;
    min-width: 0;
    padding: .9rem;
}

.equip-overview-metric span,
.equip-overview-data-grid span,
.equip-overview-data-list span {
    display: block;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.equip-overview-metric strong {
    color: var(--text-primary);
    font-size: 1.2rem;
    line-height: 1.15;
}

.equip-overview-metric small {
    color: var(--text-muted);
    line-height: 1.45;
}

.equip-overview-metric--status {
    border-left: 4px solid #22c55e;
}

.equip-overview-metric.is-alert {
    border-color: #fdba74;
    border-left: 4px solid #f97316;
    background: #fff7ed;
}

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

.equip-overview-panel {
    display: grid;
    gap: .9rem;
    min-width: 0;
    padding: 1rem;
}

.equip-overview-panel--wide {
    grid-column: span 2;
}

.equip-overview-panel-head {
    justify-content: space-between;
    align-items: flex-start;
}

.equip-overview-panel-head strong {
    display: block;
    margin-top: .18rem;
    color: var(--text-primary);
    font-size: 1rem;
}

.equip-overview-panel-link {
    color: var(--primary);
    font-size: .82rem;
    font-weight: 800;
    text-decoration: none;
}

.equip-overview-panel-link:hover {
    text-decoration: underline;
}

.equip-overview-data-grid,
.equip-overview-data-list {
    display: grid;
    gap: .7rem;
}

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

.equip-overview-data-grid > div,
.equip-overview-data-list > div {
    min-width: 0;
    padding: .8rem;
    border: 1px solid rgba(226, 232, 240, .92);
    border-radius: 8px;
    background: #f8fafc;
}

.equip-overview-data-grid strong,
.equip-overview-data-list strong {
    display: block;
    margin-top: .26rem;
    color: var(--text-primary);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.equip-overview-route {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
    padding: .8rem;
    border: 1px solid rgba(191, 219, 254, .95);
    border-radius: 8px;
    background: #eff6ff;
}

.equip-overview-route span {
    color: var(--text-secondary);
}

.equip-overview-route strong {
    color: var(--text-primary);
}

.equip-overview-route i {
    color: var(--primary);
}

.equip-overview-call-state {
    display: grid;
    gap: .3rem;
    padding: .85rem;
    border: 1px solid rgba(187, 247, 208, .95);
    border-radius: 8px;
    background: #f0fdf4;
}

.equip-overview-call-state.is-alert {
    border-color: #fdba74;
    background: #fff7ed;
}

.equip-overview-call-state strong {
    color: var(--text-primary);
}

.equip-overview-call-state span {
    color: var(--text-muted);
    line-height: 1.45;
}

.module-tab-nav--equip-detail {
    gap: .7rem;
    padding: .35rem;
    border-radius: 26px;
    border: 1px solid rgba(226, 232, 240, .94);
    background: linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(248,250,252,.98) 100%);
    box-shadow: 0 18px 38px rgba(15, 23, 42, .06);
    overflow-x: auto;
}

.module-tab-nav--equip-detail .module-tab-link {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: .95rem 1rem;
    border-radius: 20px;
    border: 1px solid transparent;
    color: var(--text-secondary);
    font-weight: 800;
    white-space: nowrap;
}

.module-tab-nav--equip-detail .module-tab-link i {
    font-size: 1rem;
}

.module-tab-nav--equip-detail .module-tab-link small {
    min-width: 1.8rem;
    height: 1.8rem;
    padding: 0 .45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(148, 163, 184, .12);
    color: var(--text-secondary);
    font-size: .74rem;
    font-weight: 900;
}

.module-tab-nav--equip-detail .module-tab-link.is-active {
    border-color: rgba(59, 130, 246, .22);
    background: linear-gradient(135deg, rgba(36, 89, 197, .16) 0%, rgba(14, 165, 233, .10) 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 14px 28px rgba(36, 89, 197, .12);
    color: var(--text-primary);
}

.module-tab-nav--equip-detail .module-tab-link.is-active small {
    background: rgba(36, 89, 197, .14);
    color: var(--primary);
}

.equip-asset-overview {
    gap: 1rem;
}

.equip-asset-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.equip-asset-kpi {
    display: flex;
    align-items: center;
    gap: .9rem;
    min-width: 0;
    padding: 1rem 1.05rem;
    border-radius: 24px;
    border: 1px solid rgba(226, 232, 240, .94);
    background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,250,252,.95) 100%);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .05);
}

.equip-asset-kpi--status {
    background: linear-gradient(180deg, rgba(239, 246, 255, .96) 0%, rgba(255,255,255,.99) 100%);
}

.equip-asset-kpi-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    border-radius: 16px;
    font-size: 1.1rem;
}

.equip-asset-kpi-icon--success {
    background: rgba(34, 197, 94, .12);
    color: #15803d;
}

.equip-asset-kpi-icon--warning,
.equip-asset-kpi-icon--amber {
    background: rgba(245, 158, 11, .12);
    color: #b45309;
}

.equip-asset-kpi-icon--info,
.equip-asset-kpi-icon--blue {
    background: rgba(59, 130, 246, .12);
    color: #1d4ed8;
}

.equip-asset-kpi-icon--danger {
    background: rgba(239, 68, 68, .12);
    color: #b91c1c;
}

.equip-asset-kpi-icon--violet {
    background: rgba(139, 92, 246, .12);
    color: #6d28d9;
}

.equip-asset-kpi-icon--teal,
.equip-asset-timeline-marker--teal {
    background: rgba(20, 184, 166, .12);
    color: #0f766e;
}

.equip-asset-kpi-body {
    min-width: 0;
    gap: .24rem;
}

.equip-asset-kpi-body span,
.equip-asset-info-grid span {
    display: block;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.equip-asset-kpi-body strong {
    font-size: 1.2rem;
    line-height: 1.15;
    color: var(--text-primary);
}

.equip-asset-kpi-body small {
    color: var(--text-muted);
    line-height: 1.45;
}

.equip-asset-info-grid-shell {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.equip-asset-info-card {
    min-height: 100%;
}

.equip-asset-info-grid {
    gap: .75rem;
}

.equip-asset-info-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.equip-asset-info-grid > div {
    padding: .95rem 1rem;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(248, 250, 252, .96) 0%, rgba(241, 245, 249, .94) 100%);
    border: 1px solid rgba(226, 232, 240, .98);
}

.equip-asset-info-grid strong {
    display: block;
    margin-top: .25rem;
    color: var(--text-primary);
    line-height: 1.45;
}

.equip-asset-info-card--trace {
    display: grid;
    gap: 1rem;
}

.equip-asset-trace-route {
    padding: 1rem 1.05rem;
    border-radius: 22px;
    border: 1px solid rgba(191, 219, 254, .94);
    background: linear-gradient(135deg, rgba(36, 89, 197, .08) 0%, rgba(14, 165, 233, .05) 100%);
}

.equip-asset-trace-route span,
.equip-asset-trace-route strong {
    font-size: .95rem;
}

.equip-asset-trace-route span,
.equip-asset-trace-note {
    color: var(--text-secondary);
}

.equip-asset-trace-route strong {
    color: var(--text-primary);
}

.equip-asset-trace-route i {
    color: var(--primary);
}

.equip-asset-trace-note {
    margin: 0;
    line-height: 1.6;
}

.equip-asset-timeline-card {
    overflow: hidden;
}

.equip-asset-timeline {
    gap: 1rem;
}

.equip-asset-timeline-item {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 1rem;
    align-items: flex-start;
}

.equip-asset-timeline-marker {
    position: relative;
    width: 54px;
    min-height: 54px;
    display: inline-grid;
    place-items: center;
    border-radius: 18px;
    font-size: 1.02rem;
}

.equip-asset-timeline-item:not(:last-child) .equip-asset-timeline-marker::after {
    content: '';
    position: absolute;
    top: 58px;
    bottom: -18px;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(148, 163, 184, .44) 0%, rgba(226, 232, 240, .12) 100%);
}

.equip-asset-timeline-marker--blue {
    background: rgba(59, 130, 246, .12);
    color: #1d4ed8;
}

.equip-asset-timeline-marker--amber {
    background: rgba(245, 158, 11, .12);
    color: #b45309;
}

.equip-asset-timeline-marker--green {
    background: rgba(34, 197, 94, .12);
    color: #15803d;
}

.equip-asset-timeline-marker--violet {
    background: rgba(139, 92, 246, .12);
    color: #6d28d9;
}

.equip-asset-timeline-body {
    gap: .6rem;
    padding: 1rem 1.05rem;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,250,252,.95) 100%);
    border: 1px solid rgba(226, 232, 240, .98);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}

.equip-asset-timeline-head {
    justify-content: space-between;
    gap: 1rem;
}

.equip-asset-timeline-head strong {
    color: var(--text-primary);
}

.equip-asset-timeline-head span {
    font-size: .82rem;
    color: var(--text-muted);
}

.equip-asset-timeline-body p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.6;
}
.equip-history-stack {
    display: grid;
    gap: 1rem;
}

html[data-theme="dark"] .module-tab-nav--equip-detail {
    background: linear-gradient(180deg, rgba(20, 27, 36, .96) 0%, rgba(15, 23, 34, .96) 100%);
    border-color: rgba(94, 111, 134, .3);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .22);
}

html[data-theme="dark"] .module-tab-nav--equip-detail .module-tab-link {
    color: #c8d5e3;
}

html[data-theme="dark"] .module-tab-nav--equip-detail .module-tab-link small {
    background: rgba(71, 85, 105, .36);
    color: #dbe4f0;
}

html[data-theme="dark"] .module-tab-nav--equip-detail .module-tab-link.is-active {
    background: linear-gradient(135deg, rgba(36, 89, 197, .26) 0%, rgba(14, 165, 233, .14) 100%);
    border-color: rgba(96, 165, 250, .28);
    color: #eef2f7;
}

html[data-theme="dark"] .equip-asset-kpi,
html[data-theme="dark"] .equip-asset-info-grid > div,
html[data-theme="dark"] .equip-asset-trace-route,
html[data-theme="dark"] .equip-asset-timeline-body {
    border-color: rgba(94, 111, 134, .3);
    background: linear-gradient(180deg, rgba(18, 25, 35, .98) 0%, rgba(15, 23, 34, .96) 100%);
    box-shadow: none;
}

html[data-theme="dark"] .equip-asset-kpi--status {
    background: linear-gradient(180deg, rgba(15, 39, 69, .96) 0%, rgba(18, 25, 35, .96) 100%);
}

html[data-theme="dark"] .equip-asset-kpi-body strong,
html[data-theme="dark"] .equip-asset-info-grid strong,
html[data-theme="dark"] .equip-asset-trace-route strong,
html[data-theme="dark"] .equip-asset-timeline-head strong {
    color: #eef2f7;
}

html[data-theme="dark"] .equip-asset-kpi-body small,
html[data-theme="dark"] .equip-asset-kpi-body span,
html[data-theme="dark"] .equip-asset-info-grid span,
html[data-theme="dark"] .equip-asset-trace-route span,
html[data-theme="dark"] .equip-asset-trace-note,
html[data-theme="dark"] .equip-asset-timeline-head span,
html[data-theme="dark"] .equip-asset-timeline-body p {
    color: #8b9ab0;
}

html[data-theme="dark"] .equip-asset-timeline-item:not(:last-child) .equip-asset-timeline-marker::after {
    background: linear-gradient(180deg, rgba(71, 85, 105, .68) 0%, rgba(30, 41, 59, .1) 100%);
}

html[data-theme="dark"] .equip-detail-shell,
html[data-theme="dark"] .equip-detail-shell-section,
html[data-theme="dark"] .equip-detail-shell-item,
html[data-theme="dark"] .equip-detail-side-item,
html[data-theme="dark"] .equip-detail-visual {
    border-color: rgba(94, 111, 134, .3);
    background: linear-gradient(180deg, rgba(18, 25, 35, .98) 0%, rgba(15, 23, 34, .96) 100%);
    box-shadow: none;
}

html[data-theme="dark"] .equip-detail-visual {
    background:
        radial-gradient(circle at top, rgba(59, 130, 246, .16), transparent 55%),
        linear-gradient(180deg, rgba(18, 25, 35, .98) 0%, rgba(15, 23, 34, .96) 100%);
}

html[data-theme="dark"] .equip-detail-shell-title,
html[data-theme="dark"] .equip-detail-shell-item strong,
html[data-theme="dark"] .equip-detail-shell-section strong,
html[data-theme="dark"] .equip-detail-side-item strong,
html[data-theme="dark"] .equip-detail-visual strong {
    color: #eef2f7;
}

html[data-theme="dark"] .equip-detail-shell-copy,
html[data-theme="dark"] .equip-detail-shell-item span,
html[data-theme="dark"] .equip-detail-shell-item small,
html[data-theme="dark"] .equip-detail-shell-section span,
html[data-theme="dark"] .equip-detail-shell-section small,
html[data-theme="dark"] .equip-detail-side-item span,
html[data-theme="dark"] .equip-detail-side-item small,
html[data-theme="dark"] .equip-detail-visual p {
    color: #8b9ab0;
}

html[data-theme="dark"] .equip-detail-visual-icon {
    background: rgba(59, 130, 246, .12);
    color: #93c5fd;
}

html[data-theme="dark"] .equip-detail-side-item--alert {
    border-color: rgba(251, 146, 60, .28);
    background: linear-gradient(180deg, rgba(77, 47, 18, .46) 0%, rgba(18, 25, 35, .96) 100%);
}

html[data-theme="dark"] .equip-overview-head,
html[data-theme="dark"] .equip-overview-panel,
html[data-theme="dark"] .equip-overview-metric {
    border-color: rgba(94, 111, 134, .3);
    background: rgba(18, 25, 35, .98);
    box-shadow: none;
}

html[data-theme="dark"] .equip-overview-device {
    background: rgba(59, 130, 246, .12);
    color: #93c5fd;
}

html[data-theme="dark"] .equip-overview-title h2,
html[data-theme="dark"] .equip-overview-metric strong,
html[data-theme="dark"] .equip-overview-panel-head strong,
html[data-theme="dark"] .equip-overview-data-grid strong,
html[data-theme="dark"] .equip-overview-data-list strong,
html[data-theme="dark"] .equip-overview-route strong,
html[data-theme="dark"] .equip-overview-call-state strong {
    color: #eef2f7;
}

html[data-theme="dark"] .equip-overview-title p,
html[data-theme="dark"] .equip-overview-metric span,
html[data-theme="dark"] .equip-overview-metric small,
html[data-theme="dark"] .equip-overview-data-grid span,
html[data-theme="dark"] .equip-overview-data-list span,
html[data-theme="dark"] .equip-overview-route span,
html[data-theme="dark"] .equip-overview-call-state span {
    color: #8b9ab0;
}

html[data-theme="dark"] .equip-overview-data-grid > div,
html[data-theme="dark"] .equip-overview-data-list > div {
    border-color: rgba(94, 111, 134, .28);
    background: rgba(24, 33, 45, .96);
}

html[data-theme="dark"] .equip-overview-route {
    border-color: rgba(96, 165, 250, .28);
    background: rgba(30, 64, 175, .16);
}

html[data-theme="dark"] .equip-overview-call-state {
    border-color: rgba(34, 197, 94, .24);
    background: rgba(20, 83, 45, .18);
}

html[data-theme="dark"] .equip-overview-metric.is-alert,
html[data-theme="dark"] .equip-overview-call-state.is-alert {
    border-color: rgba(251, 146, 60, .28);
    background: rgba(77, 47, 18, .4);
}

html[data-theme="dark"] .equip-overview-panel-link {
    color: #93c5fd;
}

.equip-hub-actions {
    justify-content: center;
    gap: .5rem;
}

.equip-hub-actions .action-circle {
    flex-shrink: 0;
}

.equip-hub-table td.equip-hub-col-actions {
    min-width: 12rem;
}

.equip-hub-actions .action-circle:disabled {
    opacity: .82;
    filter: saturate(.78);
}

.equip-hub-table--compact {
    min-width: 920px;
}

.equip-hub-detail-head {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.equip-hub-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    align-items: flex-start;
    justify-content: flex-end;
}

.equip-hub-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.equip-hub-detail-card {
    min-height: 100%;
}

.equip-hub-detail-list {
    display: grid;
    gap: .75rem;
}

.equip-hub-detail-list--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.equip-hub-detail-list > div {
    padding: .95rem 1rem;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(248, 250, 252, .94) 0%, rgba(241, 245, 249, .92) 100%);
    border: 1px solid rgba(226, 232, 240, .98);
}

.equip-hub-detail-list span,
.equip-maint-step span {
    display: block;
    margin-bottom: .3rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.equip-hub-detail-list strong,
.equip-maint-step strong {
    display: block;
    color: var(--text-primary);
    line-height: 1.45;
}

.equip-maint-history {
    display: grid;
    gap: 1rem;
}

.equip-maint-table-wrap {
    border-radius: 8px;
    border: 1px solid rgba(226, 232, 240, .94);
    background: #fff;
    overflow-x: auto;
}

.equip-maint-table {
    width: 100%;
    min-width: 900px;
    border-collapse: separate;
    border-spacing: 0;
}

.equip-maint-table thead th {
    padding: .75rem .85rem;
    border-bottom: 1px solid rgba(203, 213, 225, .86);
    background: rgba(241, 245, 249, .92);
    color: #64748b;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.equip-maint-table tbody td {
    padding: .78rem .85rem;
    border-bottom: 1px solid rgba(226, 232, 240, .92);
    background: rgba(255,255,255,.96);
    color: var(--text-primary);
    vertical-align: middle;
}

.equip-maint-table-row {
    cursor: pointer;
}

.equip-maint-table-row:hover td {
    background: rgba(239, 245, 255, .96);
}

.equip-maint-table-row.is-open td {
    background: rgba(232, 240, 254, .92);
    border-bottom-color: transparent;
}

.equip-maint-table-detail-row td {
    padding: 0 1rem 1rem;
    background: rgba(248, 250, 252, .96);
}

.equip-maint-table-detail {
    padding-top: .15rem;
}

.equip-maint-row-toggle {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.equip-maint-row-toggle:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary) 44%, transparent);
    outline-offset: 6px;
    border-radius: 18px;
}

.equip-maint-row-chevron {
    flex: 0 0 .78rem;
    width: .78rem;
    height: .78rem;
    margin-top: .62rem;
    border-right: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    transform: rotate(-45deg);
    transition: transform .16s ease, border-color .16s ease;
}

.equip-maint-table-row.is-open .equip-maint-row-chevron {
    transform: rotate(45deg);
}

.equip-maint-row-main {
    min-width: 0;
    display: grid;
    gap: .18rem;
}

.equip-maint-row-main strong {
    display: block;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.equip-maint-row-title {
    display: block;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}

.equip-maint-row-main small {
    color: var(--text-muted);
    line-height: 1.5;
}

.equip-maint-row-actions {
    min-width: 210px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .42rem;
    align-items: center;
}

.equip-maint-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .38rem;
    min-height: 36px;
    padding: .52rem .62rem;
    border-radius: 8px;
    border: 1px solid rgba(37, 99, 235, .2);
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.equip-maint-row-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(37, 99, 235, .14);
}

.equip-maint-row-action--ghost {
    background: #fff;
    color: #1d4ed8;
}

.equip-maint-row-action--primary {
    background: linear-gradient(135deg, #2459c5 0%, #1d4ed8 100%);
    color: #fff;
    border-color: rgba(29, 78, 216, .46);
}

.equip-maint-row-actions small,
.equip-maint-row-muted {
    grid-column: 1 / -1;
    color: var(--text-muted);
    font-size: .74rem;
    line-height: 1.35;
}

.equip-maint-row-muted {
    display: inline-flex;
    align-items: center;
    padding: .48rem .62rem;
    border-radius: 8px;
    border: 1px solid rgba(226, 232, 240, .94);
    background: rgba(248, 250, 252, .94);
    font-weight: 800;
}

.equip-maint-overview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
    margin-bottom: 1rem;
}

.equip-maint-overview-card,
.equip-maint-section {
    border-radius: 8px;
    border: 1px solid rgba(226, 232, 240, .94);
    background: #fff;
}

.equip-maint-overview-card {
    display: grid;
    gap: .32rem;
    padding: 1rem 1.1rem;
}

.equip-maint-overview-card span,
.equip-maint-overview-card small {
    color: var(--text-muted);
}

.equip-maint-overview-card span {
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.equip-maint-overview-card strong {
    font-size: 1.7rem;
    line-height: 1;
    color: var(--text-primary);
}

.equip-maint-overview-card--active {
    border-color: rgba(251, 191, 36, .38);
    background: linear-gradient(180deg, rgba(255, 251, 235, .95) 0%, rgba(255,255,255,.98) 100%);
}

.equip-maint-overview-card--closed {
    border-color: rgba(191, 219, 254, .62);
    background: linear-gradient(180deg, rgba(239, 246, 255, .92) 0%, rgba(255,255,255,.98) 100%);
}

.equip-maint-section {
    display: grid;
    gap: .75rem;
    padding: .85rem;
}

.equip-maint-section + .equip-maint-section {
    margin-top: 1rem;
}

.equip-maint-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.equip-maint-section--active {
    border-color: rgba(251, 191, 36, .34);
    background: #fffdf7;
}

.equip-maint-section--closed {
    border-color: rgba(191, 219, 254, .58);
    background: #f8fbff;
}

.equip-maint-history-card {
    padding: .9rem;
    border-radius: 8px;
    border: 1px solid rgba(226, 232, 240, .95);
    background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248, 250, 252, .98) 100%);
}

.equip-maint-command-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
    margin-bottom: .9rem;
}

.equip-maint-command-strip > div {
    min-width: 0;
    padding: .78rem .85rem;
    border-radius: 8px;
    border: 1px solid rgba(226, 232, 240, .95);
    background: rgba(255, 255, 255, .9);
}

.equip-maint-command-strip span,
.equip-maint-block-head span {
    display: block;
    margin-bottom: .22rem;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.equip-maint-command-strip strong,
.equip-maint-block-head strong {
    display: block;
    color: var(--text-primary);
    line-height: 1.35;
}

.equip-maint-command-strip small,
.equip-maint-block-head p {
    display: block;
    margin: .18rem 0 0;
    color: var(--text-muted);
    line-height: 1.45;
}

.equip-maint-block-head {
    display: grid;
    gap: .14rem;
    margin: .95rem 0 .55rem;
}

.equip-maint-block-head--action {
    margin-top: 0;
}

.equip-maint-block-head--timeline {
    margin-top: 1rem;
}

.equip-maint-action-panel {
    margin-top: 1rem;
    padding: .85rem;
    border-radius: 8px;
    border: 1px solid rgba(191, 219, 254, .9);
    background: linear-gradient(180deg, rgba(239, 246, 255, .72) 0%, rgba(248, 250, 252, .96) 100%);
}

.equip-maint-action-panel:focus {
    outline: 3px solid rgba(37, 99, 235, .2);
    outline-offset: 2px;
}

.equip-maint-action-empty {
    margin-top: .7rem;
}

.equip-maint-actions-board {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.equip-maint-actions-board--dual {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.equip-maint-transition-card {
    display: grid;
    gap: .95rem;
    padding: .9rem;
    border-radius: 8px;
    border: 1px solid rgba(191, 219, 254, .9);
    background: linear-gradient(180deg, rgba(239, 246, 255, .88) 0%, rgba(248, 250, 252, .95) 100%);
}

.equip-maint-transition-head {
    display: grid;
    gap: .3rem;
}

.equip-maint-transition-head h4 {
    margin: 0;
    color: var(--text-primary);
}

.equip-maint-transition-head p {
    display: none;
}

.equip-maint-action-panel .equip-maint-transition-head p {
    display: block;
    margin: .15rem 0 0;
    color: var(--text-muted);
    line-height: 1.45;
}

.equip-maint-transition-card--comment {
    border-color: rgba(148, 163, 184, .38);
    background: linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(248, 250, 252, .96) 100%);
}

.equip-maint-transition-actions {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    flex-wrap: wrap;
}

.equip-maint-transition-card textarea {
    min-height: 110px;
    resize: vertical;
}

.equip-maint-history-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.equip-maint-history-steps {
    position: relative;
    display: grid;
    gap: .55rem;
    margin-top: .75rem;
    padding-left: .45rem;
}

.equip-maint-step {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: .8rem;
    align-items: start;
}

.equip-maint-step-dot {
    position: relative;
    width: 14px;
    height: 14px;
    margin-top: .45rem;
    border-radius: 50%;
    background: #2459c5;
    box-shadow: 0 0 0 5px rgba(36, 89, 197, .12);
}

.equip-maint-step:not(:last-child) .equip-maint-step-dot::after {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    width: 2px;
    height: calc(100% + 18px);
    transform: translateX(-50%);
    background: rgba(148, 163, 184, .46);
}

.equip-maint-step-body {
    padding: .72rem .8rem;
    border-radius: 8px;
    border: 1px solid rgba(226, 232, 240, .94);
    background: #fff;
}

.equip-maint-step-body.is-open {
    border-color: rgba(59, 130, 246, .28);
    box-shadow: 0 16px 36px rgba(37, 99, 235, .12);
}

.equip-maint-step-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .85rem;
    margin-bottom: .45rem;
}

.equip-maint-step-summary {
    display: grid;
    gap: .2rem;
}

.equip-maint-step-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    padding: .58rem .9rem;
    border-radius: 999px;
    border: 1px solid rgba(59, 130, 246, .18);
    background: linear-gradient(135deg, rgba(239, 246, 255, .96) 0%, rgba(219, 234, 254, .98) 100%);
    color: #1d4ed8;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.equip-maint-step-trigger:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(37, 99, 235, .12);
}

.equip-maint-step-trigger:focus-visible {
    outline: 3px solid rgba(59, 130, 246, .2);
    outline-offset: 2px;
}

.equip-maint-step-detail {
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid rgba(226, 232, 240, .9);
    display: grid;
    gap: .9rem;
}

.equip-maint-step-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem;
}

.equip-maint-step-detail-grid > div,
.equip-maint-step-detail-card,
.equip-maint-step-flow-item {
    padding: .9rem 1rem;
    border-radius: 16px;
    border: 1px solid rgba(226, 232, 240, .94);
    background: linear-gradient(180deg, rgba(248, 250, 252, .96) 0%, rgba(255, 255, 255, .98) 100%);
}

.equip-maint-step-detail-grid span,
.equip-maint-step-flow-item span,
.equip-maint-step-flow-item small {
    display: block;
    color: var(--text-muted);
    font-size: .8rem;
    line-height: 1.5;
}

.equip-maint-step-detail-grid strong,
.equip-maint-step-detail-card strong,
.equip-maint-step-flow-item strong {
    display: block;
    color: var(--text-primary);
    line-height: 1.45;
}

.equip-maint-step-detail-card {
    display: grid;
    gap: .55rem;
}

.equip-maint-step-detail-card p,
.equip-maint-step-flow-item p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.6;
}

.equip-maint-step-detail-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.equip-maint-step-flow {
    display: grid;
    gap: .65rem;
}

.equip-maint-step-flow-item {
    display: grid;
    gap: .3rem;
}

.equip-maint-step-flow-item.is-current {
    border-color: rgba(59, 130, 246, .28);
    background: linear-gradient(180deg, rgba(239, 246, 255, .98) 0%, rgba(255, 255, 255, .98) 100%);
    box-shadow: inset 0 0 0 1px rgba(147, 197, 253, .35);
}

.equip-maint-step-body p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.55;
}

.equip-maint-backdrop,
.equip-qr-backdrop,
.equip-scan-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, .68);
    backdrop-filter: blur(7px);
}

.equip-maint-backdrop[hidden],
.equip-qr-backdrop[hidden],
.equip-scan-backdrop[hidden] {
    display: none;
}

.search-box--qr {
    align-items: stretch;
    flex-wrap: nowrap;
}

.search-box--qr input {
    flex: 1 1 auto;
    min-width: 0;
}

.equip-search-qr-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    min-height: 48px;
    border-radius: 14px;
    border: 1px solid rgba(15, 118, 110, .35);
    background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
    color: #0f766e;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

.equip-search-qr-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(15, 118, 110, .18);
}

.equip-scan-modal {
    width: min(520px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow: hidden;
    border-radius: 22px;
    background: var(--panel-bg);
    border: 1px solid rgba(203, 213, 225, .82);
    box-shadow: 0 36px 84px rgba(15, 23, 42, .28);
}

.equip-scan-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 12px;
}

.equip-scan-head h2 {
    margin: 4px 0 0;
    font-size: 1.2rem;
}

.equip-scan-head p {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: .9rem;
    line-height: 1.45;
}

.equip-scan-body {
    padding: 0 20px 20px;
}

.equip-scan-video,
.equip-scan-reader-host {
    width: 100%;
    min-height: 280px;
    border-radius: 16px;
    overflow: hidden;
    background: #0f172a;
}

.equip-scan-video {
    object-fit: cover;
    display: block;
}

.equip-scan-reader-host #equipScanReader {
    width: 100%;
}

.equip-maint-modal {
    width: min(900px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow: hidden;
    border-radius: 26px;
    background: var(--panel-bg);
    border: 1px solid rgba(203, 213, 225, .82);
    box-shadow: 0 36px 84px rgba(15, 23, 42, .28);
}

.equip-qr-modal {
    width: min(1240px, calc(100vw - 2rem));
    height: min(920px, calc(100vh - 2rem));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border-radius: 26px;
    background: var(--panel-bg);
    border: 1px solid rgba(203, 213, 225, .82);
    box-shadow: 0 36px 84px rgba(15, 23, 42, .28);
}

.equip-maint-form {
    gap: 0;
}

.equip-maint-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem 1.4rem 1rem;
    background: linear-gradient(145deg, #0f172a 0%, #163258 60%, #2459c5 100%);
    color: #fff;
}

.equip-maint-head h2 {
    margin: .35rem 0 .4rem;
    font-size: 1.35rem;
}

.equip-maint-head p {
    margin: 0;
    color: rgba(255,255,255,.82);
}
.equip-maint-modal--request {
    width: min(1080px, calc(100vw - 2rem));
}
.equip-maint-request-shell {
    display: grid;
    gap: 1rem;
    padding: 1.15rem 1.4rem 0;
}
.equip-maint-request-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.24fr) minmax(280px, .76fr);
    gap: 1rem;
}
.equip-maint-request-panel {
    display: grid;
    gap: .95rem;
    padding: 1rem 1.05rem;
    border-radius: 22px;
    border: 1px solid rgba(226, 232, 240, .94);
    background: linear-gradient(180deg, rgba(248,250,252,.98) 0%, rgba(255,255,255,.98) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
}
.equip-maint-request-panel--operator {
    background: linear-gradient(180deg, rgba(239,246,255,.98) 0%, rgba(255,255,255,.98) 100%);
    border-color: rgba(191, 219, 254, .88);
}
.equip-maint-request-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.equip-maint-request-panel-head strong,
.equip-maint-request-panel > strong {
    display: block;
    color: var(--text-primary);
    line-height: 1.3;
}
.equip-maint-request-metrics,
.equip-maint-request-meta {
    display: grid;
    gap: .75rem;
}
.equip-maint-request-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.equip-maint-request-metrics > div,
.equip-maint-request-meta > div {
    padding: .9rem .95rem;
    border-radius: 18px;
    border: 1px solid rgba(226, 232, 240, .94);
    background: rgba(255,255,255,.86);
}
.equip-maint-request-metrics span,
.equip-maint-request-meta span {
    display: block;
    margin-bottom: .24rem;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.equip-maint-request-metrics strong,
.equip-maint-request-meta strong {
    display: block;
    color: var(--text-primary);
    line-height: 1.4;
}
.equip-maint-request-metrics small,
.equip-maint-request-meta small,
.equip-maint-request-note {
    color: var(--text-muted);
    line-height: 1.55;
}
.equip-maint-request-note {
    margin: 0;
}

.equip-qr-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem 1.4rem 1rem;
    background: linear-gradient(145deg, #312e81 0%, #4338ca 55%, #0f766e 100%);
    color: #fff;
}

.equip-qr-head h2 {
    margin: .35rem 0 .4rem;
    font-size: 1.35rem;
}

.equip-qr-head p {
    margin: 0;
    color: rgba(255,255,255,.82);
}

.equip-qr-head-actions {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.equip-qr-head-actions .btn {
    white-space: nowrap;
}

.equip-maint-close {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 14px;
    background: rgba(255,255,255,.12);
    color: #fff;
    cursor: pointer;
}

.equip-qr-frame-shell {
    min-height: 0;
    background:
        linear-gradient(180deg, rgba(15, 23, 42, .05) 0%, rgba(15, 23, 42, .02) 100%),
        #f8fafc;
}

.equip-qr-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #fff;
}

.equip-maint-alert {
    margin: 1rem 1.4rem 0;
    padding: .9rem 1rem;
    border-radius: 14px;
    border: 1px solid #fecaca;
    background: #fff1f2;
    color: #b91c1c;
}

.equip-maint-grid,
.equip-maint-inline,
.equip-maint-actions {
    padding-left: 1.4rem;
    padding-right: 1.4rem;
}

.equip-maint-grid {
    padding-top: 1.2rem;
    padding-bottom: 1rem;
}
.equip-maint-grid--request {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 0;
}

.equip-maint-grid .field-full {
    grid-column: 1 / -1;
}

.equip-maint-inline {
    padding-bottom: .85rem;
}

.equip-maint-actions {
    padding-top: 0;
    padding-bottom: 1.35rem;
}

.equip-maint-form .text-danger {
    display: block;
    margin-top: .38rem;
    color: #b91c1c;
}

html[data-theme="dark"] .equip-hub-table-wrap,
html[data-theme="dark"] .equip-maint-modal,
html[data-theme="dark"] .equip-qr-modal,
html[data-theme="dark"] .equip-maint-overview-card,
html[data-theme="dark"] .equip-maint-section,
html[data-theme="dark"] .equip-maint-table-wrap,
html[data-theme="dark"] .equip-maint-history-card,
html[data-theme="dark"] .equip-maint-command-strip > div,
html[data-theme="dark"] .equip-maint-action-panel,
html[data-theme="dark"] .equip-hub-detail-list > div,
html[data-theme="dark"] .equip-maint-step-body,
html[data-theme="dark"] .equip-maint-transition-card {
    border-color: rgba(94, 111, 134, .32);
}

html[data-theme="dark"] .equip-hub-table-wrap {
    background: linear-gradient(180deg, rgba(18, 25, 35, .96) 0%, rgba(15, 23, 34, .96) 100%);
}

html[data-theme="dark"] .equip-maint-overview-card,
html[data-theme="dark"] .equip-maint-section,
html[data-theme="dark"] .equip-maint-table-wrap {
    background: linear-gradient(180deg, rgba(18, 25, 35, .96) 0%, rgba(15, 23, 34, .98) 100%);
}

html[data-theme="dark"] .equip-maint-overview-card--active,
html[data-theme="dark"] .equip-maint-section--active {
    background: linear-gradient(180deg, rgba(120, 53, 15, .22) 0%, rgba(18, 25, 35, .98) 72%);
    border-color: rgba(251, 191, 36, .24);
}

html[data-theme="dark"] .equip-maint-overview-card--closed,
html[data-theme="dark"] .equip-maint-section--closed {
    background: linear-gradient(180deg, rgba(30, 64, 175, .18) 0%, rgba(18, 25, 35, .98) 72%);
    border-color: rgba(96, 165, 250, .26);
}

html[data-theme="dark"] .equip-maint-table thead th {
    background: rgba(24, 33, 45, .96);
    color: #8b9ab0;
    border-bottom-color: rgba(94, 111, 134, .32);
}

html[data-theme="dark"] .equip-maint-table tbody td {
    background: rgba(18, 25, 35, .94);
    color: #dbe5f3;
    border-bottom-color: rgba(94, 111, 134, .24);
}

html[data-theme="dark"] .equip-maint-table-row:hover td {
    background: rgba(24, 34, 46, .98);
}

html[data-theme="dark"] .equip-maint-table-row.is-open td {
    background: rgba(20, 31, 45, .98);
}

html[data-theme="dark"] .equip-maint-table-detail-row td {
    background: linear-gradient(180deg, rgba(13, 19, 28, .98) 0%, rgba(15, 23, 34, .98) 100%);
}

html[data-theme="dark"] .equip-maint-overview-card strong,
html[data-theme="dark"] .equip-maint-section-head strong,
html[data-theme="dark"] .equip-maint-row-title {
    color: #eef2f7;
}

html[data-theme="dark"] .equip-maint-overview-card span,
html[data-theme="dark"] .equip-maint-overview-card small,
html[data-theme="dark"] .equip-maint-section .section-note,
html[data-theme="dark"] .equip-maint-row-main strong,
html[data-theme="dark"] .equip-maint-row-main small,
html[data-theme="dark"] .equip-maint-row-actions small,
html[data-theme="dark"] .equip-maint-row-muted,
html[data-theme="dark"] .equip-maint-command-strip span,
html[data-theme="dark"] .equip-maint-command-strip small,
html[data-theme="dark"] .equip-maint-block-head span,
html[data-theme="dark"] .equip-maint-block-head p {
    color: #8b9ab0;
}

html[data-theme="dark"] .equip-maint-row-chevron {
    border-color: #7fb3ff;
}

html[data-theme="dark"] .equip-maint-row-toggle:focus-visible {
    outline-color: rgba(127, 179, 255, .42);
}

html[data-theme="dark"] .equip-hub-table thead th {
    background: rgba(24, 33, 45, .96);
    color: #8b9ab0;
    border-bottom-color: rgba(94, 111, 134, .32);
}

html[data-theme="dark"] .equip-hub-table tbody td {
    background: rgba(20, 27, 36, .96);
    border-bottom-color: rgba(94, 111, 134, .24);
}

html[data-theme="dark"] .equip-hub-table tbody tr:hover td {
    background: rgba(28, 37, 49, .98);
}

html[data-theme="dark"] .equip-hub-chip {
    background: rgba(30, 41, 56, .82);
    border-color: rgba(94, 111, 134, .32);
    color: #d9e3f0;
}

html[data-theme="dark"] .equip-hub-chip--alert {
    background: rgba(120, 53, 15, .34);
    border-color: rgba(251, 191, 36, .26);
    color: #fcd34d;
}

html[data-theme="dark"] .equip-hub-id-stack strong,
html[data-theme="dark"] .equip-hub-main strong,
html[data-theme="dark"] .equip-hub-location strong,
html[data-theme="dark"] .equip-hub-owner strong,
html[data-theme="dark"] .equip-hub-updated strong,
html[data-theme="dark"] .equip-hub-detail-list strong,
html[data-theme="dark"] .equip-maint-step strong {
    color: #eef2f7;
}

html[data-theme="dark"] .equip-hub-id-stack span,
html[data-theme="dark"] .equip-hub-location span,
html[data-theme="dark"] .equip-hub-owner span,
html[data-theme="dark"] .equip-hub-status small,
html[data-theme="dark"] .equip-hub-updated span,
html[data-theme="dark"] .equip-hub-location small,
html[data-theme="dark"] .equip-hub-detail-list span,
html[data-theme="dark"] .equip-maint-step span,
html[data-theme="dark"] .equip-maint-step-body p {
    color: #8b9ab0;
}

html[data-theme="dark"] .equip-hub-detail-list > div,
html[data-theme="dark"] .equip-maint-history-card,
html[data-theme="dark"] .equip-maint-command-strip > div,
html[data-theme="dark"] .equip-maint-step-body,
html[data-theme="dark"] .equip-maint-transition-card {
    background: rgba(18, 25, 35, .96);
}

html[data-theme="dark"] .equip-maint-row-action--ghost,
html[data-theme="dark"] .equip-maint-row-muted {
    background: rgba(24, 33, 45, .94);
    border-color: rgba(94, 111, 134, .32);
}

html[data-theme="dark"] .equip-maint-row-action--ghost {
    color: #bfdbfe;
}

html[data-theme="dark"] .equip-maint-command-strip strong,
html[data-theme="dark"] .equip-maint-block-head strong {
    color: #eef2f7;
}

html[data-theme="dark"] .equip-maint-action-panel {
    background: linear-gradient(180deg, rgba(30, 64, 175, .16) 0%, rgba(18, 25, 35, .96) 100%);
}

html[data-theme="dark"] .equip-maint-action-panel .equip-maint-transition-head p {
    color: #8b9ab0;
}

html[data-theme="dark"] .equip-maint-step-body.is-open,
html[data-theme="dark"] .equip-maint-step-trigger,
html[data-theme="dark"] .equip-maint-step-detail-grid > div,
html[data-theme="dark"] .equip-maint-step-detail-card,
html[data-theme="dark"] .equip-maint-step-flow-item {
    border-color: rgba(94, 111, 134, .32);
}

html[data-theme="dark"] .equip-maint-step-trigger {
    background: linear-gradient(135deg, rgba(30, 64, 175, .28) 0%, rgba(30, 41, 59, .92) 100%);
    color: #bfdbfe;
}

html[data-theme="dark"] .equip-maint-step-detail {
    border-top-color: rgba(94, 111, 134, .32);
}

html[data-theme="dark"] .equip-maint-step-detail-grid > div,
html[data-theme="dark"] .equip-maint-step-detail-card,
html[data-theme="dark"] .equip-maint-step-flow-item {
    background: linear-gradient(180deg, rgba(24, 33, 45, .96) 0%, rgba(18, 25, 35, .98) 100%);
}

html[data-theme="dark"] .equip-maint-step-flow-item.is-current {
    background: linear-gradient(180deg, rgba(30, 64, 175, .24) 0%, rgba(18, 25, 35, .98) 100%);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .18);
}

html[data-theme="dark"] .equip-maint-alert {
    background: rgba(127, 29, 29, .28);
    border-color: rgba(248, 113, 113, .24);
    color: #fecaca;
}
html[data-theme="dark"] .equip-maint-request-panel,
html[data-theme="dark"] .equip-maint-request-metrics > div,
html[data-theme="dark"] .equip-maint-request-meta > div {
    border-color: rgba(94, 111, 134, .32);
    background: linear-gradient(180deg, rgba(18, 25, 35, .96) 0%, rgba(15, 23, 34, .96) 100%);
    box-shadow: none;
}
html[data-theme="dark"] .equip-maint-request-panel--operator {
    background: linear-gradient(180deg, rgba(15, 39, 69, .96) 0%, rgba(18, 25, 35, .96) 100%);
}
html[data-theme="dark"] .equip-maint-request-panel-head strong,
html[data-theme="dark"] .equip-maint-request-panel > strong,
html[data-theme="dark"] .equip-maint-request-metrics strong,
html[data-theme="dark"] .equip-maint-request-meta strong {
    color: #eef2f7;
}
html[data-theme="dark"] .equip-maint-request-metrics span,
html[data-theme="dark"] .equip-maint-request-meta span,
html[data-theme="dark"] .equip-maint-request-metrics small,
html[data-theme="dark"] .equip-maint-request-meta small,
html[data-theme="dark"] .equip-maint-request-note {
    color: #8b9ab0;
}

html[data-theme="dark"] .equip-qr-frame-shell {
    background:
        linear-gradient(180deg, rgba(8, 15, 28, .88) 0%, rgba(8, 15, 28, .94) 100%),
        rgba(8, 15, 28, .94);
}

@media (max-width: 1180px) {
    .equip-overview-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

    .equip-ops-hero-grid {
        grid-template-columns: 1fr;
    }

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

    .equip-asset-info-grid-shell {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .equip-asset-info-card--trace {
        grid-column: 1 / -1;
    }

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

    .equip-hub-detail-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .equip-maint-table {
        min-width: 860px;
    }

    .equip-maint-command-strip {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .equip-overview-head {
        flex-direction: column;
    }

    .equip-overview-actions {
        justify-content: flex-start;
    }

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

    .equip-overview-panel--wide {
        grid-column: span 1;
    }

    .equip-overview-grid {
        grid-template-columns: 1fr;
    }

    .equip-detail-shell {
        grid-template-columns: 1fr;
    }

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

    .equip-asset-info-grid-shell,
    .equip-asset-info-grid--two {
        grid-template-columns: 1fr;
    }

    .equip-maint-request-grid,
    .equip-maint-request-metrics,
    .equip-maint-grid--request {
        grid-template-columns: 1fr;
    }

    .equip-hub-hero-grid,
    .equip-hub-detail-hero {
        grid-template-columns: 1fr;
    }

    .equip-hub-hero-meta,
    .equip-hub-detail-list--two {
        grid-template-columns: 1fr;
    }

    .equip-hub-hero-copy strong {
        max-width: none;
    }

    .equip-hub-detail-topline,
    .equip-hub-detail-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .equip-hub-detail-summary {
        grid-template-columns: 1fr;
    }

    .equip-hub-detail-grid {
        grid-template-columns: 1fr;
    }

    .equip-maint-overview {
        grid-template-columns: 1fr;
    }

    .equip-maint-history-head {
        flex-direction: column;
    }

    .equip-maint-section-head {
        flex-direction: column;
    }

    .equip-maint-actions-board--dual {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .equip-overview-actions,
    .equip-overview-actions .btn {
        width: 100%;
    }

    .equip-overview-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .equip-overview-actions .equip-ops-status {
        justify-content: center;
    }

    .equip-overview-metrics,
    .equip-overview-data-grid {
        grid-template-columns: 1fr;
    }

    .equip-detail-shell-top,
    .equip-detail-shell-title-row,
    .equip-detail-shell-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .equip-detail-shell-grid,
    .equip-detail-side-grid {
        grid-template-columns: 1fr;
    }

    .equip-maint-request-shell,
    .equip-maint-head {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .equip-maint-request-panel-head {
        flex-direction: column;
    }

    .module-tab-nav--equip-detail .module-tab-link {
        padding: .85rem .9rem;
        flex: 0 0 auto;
    }

    .equip-ops-meta-grid,
    .equip-asset-kpi-grid {
        grid-template-columns: 1fr;
    }

    .equip-ops-action-row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .equip-ops-action-row .btn {
        width: 100%;
    }

    .equip-ops-visual-frame {
        min-height: 148px;
    }

    .equip-asset-timeline-item {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: .85rem;
    }

    .equip-asset-timeline-marker {
        width: 42px;
        min-height: 42px;
        border-radius: 14px;
    }

    .equip-asset-timeline-item:not(:last-child) .equip-asset-timeline-marker::after {
        top: 46px;
    }

    .equip-hub-hero {
        padding: 1.15rem;
    }

    .equip-hub-hero-board {
        padding: .95rem;
    }

    .equip-hub-hero-copy strong,
    .equip-hub-detail-title {
        font-size: 1.42rem;
    }

    .equip-hub-filter {
        align-items: stretch;
    }

    .equip-hub-table,
    .equip-hub-table--compact {
        min-width: 0;
    }

    .equip-hub-table thead {
        display: none;
    }

    .equip-hub-table,
    .equip-hub-table tbody,
    .equip-hub-table tr,
    .equip-hub-table td {
        display: block;
        width: 100%;
    }

    .equip-hub-table tbody {
        padding: .85rem;
        display: grid;
        gap: .85rem;
    }

    .equip-hub-table tbody tr {
        border: 1px solid rgba(203, 213, 225, .92);
        border-radius: 20px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 14px 32px rgba(15, 23, 42, .06);
    }

    .equip-hub-table tbody td {
        border-bottom: 1px solid rgba(226, 232, 240, .92);
        padding: .9rem 1rem;
    }

    .equip-hub-table tbody td:last-child {
        border-bottom: 0;
    }

    .equip-hub-table tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: .45rem;
        font-size: .7rem;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    .equip-hub-detail-actions,
    .equip-maint-actions {
        grid-template-columns: 1fr;
        display: grid;
    }

    .equip-hub-detail-actions .btn,
    .equip-maint-actions .btn {
        width: 100%;
    }

    .equip-hub-actions {
        display: flex;
        justify-content: flex-start;
    }

    .equip-hub-table td.equip-hub-col-actions {
        min-width: 0;
    }

    .equip-maint-backdrop,
    .equip-qr-backdrop {
        padding: 0;
    }

    .equip-maint-modal,
    .equip-qr-modal {
        width: 100vw;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
    }

    .equip-maint-grid,
    .equip-maint-inline,
    .equip-maint-actions,
    .equip-maint-head,
    .equip-qr-head {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .equip-maint-grid {
        grid-template-columns: 1fr;
    }

    .equip-maint-step-head,
    .equip-maint-step-detail-stack {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .equip-maint-step-trigger {
        width: 100%;
    }

    .equip-qr-head,
    .equip-qr-head-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .equip-qr-head-actions .btn,
    .equip-qr-head-actions .equip-maint-close {
        width: 100%;
    }

    html[data-theme="dark"] .equip-hub-table tbody tr {
        background: rgba(20, 27, 36, .96);
        border-color: rgba(94, 111, 134, .32);
        box-shadow: 0 14px 32px rgba(0, 0, 0, .18);
    }
}

.modern-page-shell {
    display: grid;
    gap: 1rem;
}

.modern-page-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .85fr);
    gap: 1rem;
    align-items: stretch;
}

.modern-page-hero,
.modern-page-side,
.modern-page-metric,
.modern-page-surface {
    border-radius: 24px;
    border: 1px solid color-mix(in srgb, var(--surface-border) 78%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--panel-bg) 97%, #ffffff) 0%, color-mix(in srgb, var(--panel-bg) 90%, #f8fafc) 100%);
    box-shadow: 0 20px 42px rgba(15, 23, 42, .08);
}

.modern-page-hero {
    display: grid;
    gap: 1rem;
    padding: 1.45rem;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--primary-soft) 72%, transparent), transparent 42%),
        linear-gradient(145deg, color-mix(in srgb, var(--panel-bg) 98%, #ffffff), color-mix(in srgb, var(--panel-bg) 90%, #f8fafc));
}

.modern-page-hero h2,
.modern-page-side h3,
.modern-page-surface-head h3 {
    margin: 0;
}

.modern-page-hero p,
.modern-page-side p,
.modern-page-surface-head p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.6;
}

.modern-page-chip-row,
.modern-page-list-meta,
.modern-page-surface-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

.modern-page-chip {
    display: inline-flex;
    align-items: center;
    padding: .42rem .78rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--panel-bg) 86%, #e2e8f0);
    border: 1px solid color-mix(in srgb, var(--surface-border) 86%, transparent);
    color: var(--text-primary);
    font-size: .78rem;
    font-weight: 700;
}

.modern-page-side,
.modern-page-surface {
    display: grid;
    gap: .95rem;
    padding: 1.25rem;
}

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

.modern-page-side-meta div {
    display: grid;
    gap: .24rem;
    padding: .85rem .95rem;
    border-radius: 18px;
    background: color-mix(in srgb, var(--panel-bg) 86%, #f8fafc);
    border: 1px solid color-mix(in srgb, var(--surface-border) 84%, transparent);
}

.modern-page-side-meta span {
    color: var(--text-muted);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.modern-page-side-meta strong {
    color: var(--text-primary);
    line-height: 1.35;
}

.modern-page-side .btn,
.modern-page-side .btn-secondary {
    width: 100%;
    justify-content: center;
}

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

.modern-page-metric {
    display: grid;
    gap: .35rem;
    padding: 1rem 1.1rem;
}

.modern-page-metric strong {
    font-size: 1.7rem;
    line-height: 1;
    color: var(--text-primary);
}

.modern-page-metric small {
    color: var(--text-muted);
    line-height: 1.45;
}

.modern-page-surface-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.modern-page-nav-wrap .module-tab-nav {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.modern-page-filter-form .filter-grid,
.modern-page-filter-form .filter-grid-users {
    align-items: end;
}

.modern-page-filter-form .filter-actions,
.modern-page-filter-form .filter-actions-wide {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: flex-start;
}

.users-active-filters {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid color-mix(in srgb, var(--surface-border) 82%, transparent);
}

.modern-page-surface--filters .users-active-filters {
    margin-top: 4px;
    padding: 14px 0 2px;
    border-top: 1px solid color-mix(in srgb, var(--surface-border) 82%, transparent);
}

.prm-filter-chip--link {
    text-decoration: none;
    transition: background-color .14s ease, color .14s ease, box-shadow .14s ease;
}

.prm-filter-chip--link:hover,
.prm-filter-chip--link:focus-visible {
    background: color-mix(in srgb, var(--primary-soft) 72%, #e2e8f0);
    color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 24%, transparent);
}

.prm-filter-chip--link .fa-xmark {
    font-size: .72rem;
    opacity: .72;
}

html[data-theme="dark"] .prm-filter-chip--link:hover,
html[data-theme="dark"] .prm-filter-chip--link:focus-visible {
    background: rgba(59, 130, 246, .18);
    color: #dbeafe;
}

@media (max-width: 980px) {
    .modern-page-toolbar {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 720px) {
    .modern-page-metrics,
    .modern-page-side-meta {
        grid-template-columns: 1fr;
    }

    .modern-page-surface-head {
        flex-direction: column;
    }

    .modern-page-filter-form .filter-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

.area-tech-title-cell {
    gap: 0;
}

.area-tech-title-cell .identity-body {
    max-width: 820px;
}

.area-tech-editor-surface,
.area-tech-reader-surface {
    gap: 1.4rem;
}

.area-tech-blog-article {
    width: min(100%, 1060px);
    margin: 0 auto;
}

.area-tech-editor-head,
.area-tech-reader-head {
    align-items: center;
}

.area-tech-editor-form {
    display: grid;
    gap: 18px;
}

.area-tech-title-field {
    min-width: 0;
    width: 100%;
}

.area-tech-editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
    gap: 18px;
    align-items: start;
}

.area-tech-editor-main {
    min-width: 0;
}

.area-tech-editor-panel {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--surface-border) 88%, transparent);
    border-radius: 8px;
    background: var(--panel-bg);
}

.area-tech-editor-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--surface-border) 72%, transparent);
    background: color-mix(in srgb, var(--panel-bg) 96%, #eef2f7);
}

.area-tech-editor-panel-head > div:first-child {
    display: grid;
    gap: 4px;
}

.area-tech-editor-panel-head strong {
    color: var(--text-primary);
    font-size: 1rem;
}

.area-tech-editor-panel-head span,
.area-tech-editor-footer {
    color: var(--text-muted);
    font-size: .86rem;
}

.area-tech-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.area-tech-editor-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--surface-border) 86%, transparent);
    background: var(--panel-bg);
    color: var(--text-primary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .14s ease, background .14s ease, color .14s ease;
}

.area-tech-editor-tool:hover {
    border-color: color-mix(in srgb, var(--primary) 42%, var(--surface-border));
    background: color-mix(in srgb, var(--primary-soft) 56%, var(--panel-bg));
}

.area-tech-editor-tool--icon {
    width: 38px;
    padding-inline: 0;
    flex: 0 0 38px;
}

.area-tech-editor-tool.is-active,
.area-tech-editor-tool[aria-pressed="true"] {
    color: #fff;
    border-color: color-mix(in srgb, var(--primary) 84%, transparent);
    background: var(--primary);
}

.area-tech-editor-field {
    display: grid;
    gap: 8px;
    padding: 0;
}

.area-tech-editor-textarea {
    min-height: 470px;
    border: 0;
    border-radius: 0;
    font: .94rem/1.65 Consolas, "Liberation Mono", Menlo, monospace;
    tab-size: 4;
    white-space: pre;
    background: color-mix(in srgb, var(--panel-bg) 98%, #ffffff);
    resize: vertical;
}

.area-tech-editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-top: 1px solid color-mix(in srgb, var(--surface-border) 72%, transparent);
}

.area-tech-editor-aside {
    display: grid;
    gap: 14px;
    position: sticky;
    top: 86px;
}

.area-tech-publish-box {
    display: grid;
    gap: 5px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--surface-border) 82%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--panel-bg) 96%, #f8fafc);
}

.area-tech-publish-box strong {
    color: var(--text-primary);
    font-size: .95rem;
}

.area-tech-publish-box span {
    color: var(--text-muted);
    font-size: .84rem;
    line-height: 1.45;
}

.area-tech-status-field {
    margin: 0;
}

.area-tech-meta-list {
    display: grid;
    gap: 10px;
    margin: 0;
}

.area-tech-meta-list div {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--surface-border) 78%, transparent);
    background: color-mix(in srgb, var(--panel-bg) 94%, #f8fafc);
}

.area-tech-meta-list dt,
.area-tech-meta-list dd {
    margin: 0;
}

.area-tech-meta-list dt {
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 800;
}

.area-tech-meta-list dd {
    color: var(--text-primary);
    font-weight: 800;
}

.area-tech-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 18px;
    border-top: 1px solid color-mix(in srgb, var(--surface-border) 70%, transparent);
}

.area-tech-post-actions,
.area-tech-reader-meta {
    display: flex;
    gap: .65rem;
    flex-wrap: wrap;
}

.area-tech-blog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 0 0 18px;
    border-bottom: 1px solid color-mix(in srgb, var(--surface-border) 72%, transparent);
}

.area-tech-reader-title {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.area-tech-kicker {
    color: var(--primary);
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.area-tech-reader-title h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(1.55rem, 2.4vw, 2.4rem);
    line-height: 1.14;
}

.area-tech-blog-byline {
    display: flex;
    align-items: center;
    gap: 8px 14px;
    flex-wrap: wrap;
    min-width: 0;
}

.area-tech-blog-byline span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.45;
}

.area-tech-status-pill {
    min-height: 26px;
    padding: 3px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--danger, #dc2626) 10%, var(--panel-bg));
    color: var(--danger, #dc2626) !important;
}

.area-tech-status-pill.is-active {
    background: color-mix(in srgb, var(--success, #16a34a) 12%, var(--panel-bg));
    color: var(--success, #16a34a) !important;
}

.area-tech-reader-content {
    display: grid;
    gap: 16px;
}

.area-tech-text-block {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--surface-border) 80%, transparent);
    border-left: 4px solid color-mix(in srgb, var(--primary) 58%, var(--surface-border));
    border-radius: 8px;
    background: color-mix(in srgb, var(--panel-bg) 96%, #f8fafc);
    color: var(--text-secondary);
}

.area-tech-block-label,
.area-tech-code-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    color: var(--primary);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.area-tech-text-body,
.area-tech-article-body {
    line-height: 1.75;
    color: var(--text-secondary);
}

.area-tech-article-body {
    display: grid;
    gap: 14px;
    padding: 4px 2px 8px;
    font-size: 1rem;
}

.area-tech-article-body > :first-child {
    margin-top: 0;
}

.area-tech-article-body h1,
.area-tech-article-body h2,
.area-tech-article-body h3,
.area-tech-article-body h4,
.area-tech-article-body h5,
.area-tech-article-body h6 {
    margin: 0;
    color: var(--text-primary);
    font-weight: 900;
    line-height: 1.35;
}

.area-tech-article-body h3 {
    font-size: 1.12rem;
}

.area-tech-article-body p,
.area-tech-article-body li {
    margin: 0;
}

.area-tech-article-body ul,
.area-tech-article-body ol {
    margin: 0;
    padding-left: 1.35rem;
}

.area-tech-article-body code {
    padding: .12rem .42rem;
    border-radius: 4px;
    background: color-mix(in srgb, var(--panel-bg) 82%, #e2e8f0);
    color: var(--text-primary);
    font: .92em/1.5 Consolas, "Liberation Mono", Menlo, monospace;
}

.area-tech-article-body pre {
    margin: 0;
    overflow: auto;
    padding: 16px 18px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--surface-border) 88%, transparent);
    background: color-mix(in srgb, var(--panel-bg) 95%, #f8fafc);
    color: #0f172a;
    font: .94rem/1.7 Consolas, "Liberation Mono", Menlo, monospace;
    white-space: pre-wrap;
}

.area-tech-article-body pre code {
    padding: 0;
    border-radius: 0;
    background: transparent;
    font: inherit;
}

.area-tech-text-body strong {
    color: var(--text-primary);
    font-weight: 900;
}

.area-tech-text-body em {
    font-style: italic;
}

.area-tech-text-body u {
    text-underline-offset: 3px;
}

.area-tech-reader-divider {
    width: 100%;
    height: 1px;
    margin: 2px 0;
    border: 0;
    background: color-mix(in srgb, var(--surface-border) 82%, transparent);
}

.area-tech-code-card {
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--surface-border) 88%, transparent);
    background: color-mix(in srgb, var(--panel-bg) 95%, #f8fafc);
    cursor: copy;
    outline: none;
    transition: border-color .14s ease, box-shadow .14s ease;
}

.area-tech-code-card:hover,
.area-tech-code-card:focus-visible {
    border-color: rgba(147, 197, 253, .62);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .16);
}

.area-tech-code-card.is-copied {
    border-color: rgba(74, 222, 128, .58);
}

.area-tech-code-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--surface-border) 76%, transparent);
    background: color-mix(in srgb, var(--panel-bg) 88%, #e2e8f0);
    color: var(--text-primary);
    font-size: .78rem;
    font-weight: 900;
}

.area-tech-copy-state {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--primary-soft) 74%, var(--panel-bg));
    color: var(--primary);
}

.area-tech-code-card.is-copied .area-tech-copy-state {
    background: color-mix(in srgb, var(--success, #16a34a) 14%, var(--panel-bg));
    color: var(--success, #16a34a);
}

.area-tech-code-block {
    margin: 0;
    max-height: 620px;
    overflow: auto;
    padding: 18px;
    color: #0f172a;
    font: .94rem/1.7 Consolas, "Liberation Mono", Menlo, monospace;
    white-space: pre;
}

.area-tech-code-block code {
    font: inherit;
}

html[data-theme="dark"] .area-tech-editor-panel,
html[data-theme="dark"] .area-tech-meta-list div,
html[data-theme="dark"] .area-tech-publish-box,
html[data-theme="dark"] .area-tech-text-block {
    background: rgba(14, 20, 29, .99);
    border-color: rgba(148, 163, 184, .14);
}

html[data-theme="dark"] .area-tech-article-body code {
    background: rgba(30, 41, 59, .88);
    color: #e2e8f0;
}

html[data-theme="dark"] .area-tech-article-body pre {
    border-color: rgba(71, 85, 105, .78);
    background: #111827;
    color: #e2e8f0;
}

html[data-theme="dark"] .area-tech-editor-textarea {
    background: rgba(10, 16, 25, .96);
    border-color: rgba(148, 163, 184, .18);
}

html[data-theme="dark"] .area-tech-editor-panel-head,
html[data-theme="dark"] .area-tech-editor-footer,
html[data-theme="dark"] .area-tech-editor-actions,
html[data-theme="dark"] .area-tech-blog-head {
    border-color: rgba(148, 163, 184, .14);
}

html[data-theme="dark"] .area-tech-editor-panel-head {
    background: rgba(15, 23, 42, .68);
}

html[data-theme="dark"] .area-tech-editor-tool {
    color: #c8dcfb;
    border-color: rgba(96, 165, 250, .28);
    background: rgba(44, 70, 109, .38);
}

html[data-theme="dark"] .area-tech-editor-tool.is-active,
html[data-theme="dark"] .area-tech-editor-tool[aria-pressed="true"] {
    color: #fff;
    background: linear-gradient(135deg, rgba(59, 130, 246, .88) 0%, rgba(30, 64, 175, .82) 100%);
}

html[data-theme="dark"] .area-tech-code-card {
    border-color: rgba(71, 85, 105, .78);
    background: #111827;
}

html[data-theme="dark"] .area-tech-code-head {
    border-color: rgba(148, 163, 184, .18);
    background: rgba(3, 7, 18, .74);
}

html[data-theme="dark"] .area-tech-code-block {
    color: #e2e8f0;
}

html[data-theme="dark"] .area-tech-copy-state {
    background: rgba(59, 130, 246, .14);
    color: #dbeafe;
}

html[data-theme="dark"] .area-tech-code-card.is-copied .area-tech-copy-state {
    background: rgba(34, 197, 94, .16);
    color: #bbf7d0;
}

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

    .area-tech-editor-aside {
        position: static;
    }
}

@media (max-width: 640px) {
    .area-tech-editor-panel-head,
    .area-tech-blog-head,
    .area-tech-reader-head {
        align-items: stretch;
        flex-direction: column;
    }

    .area-tech-editor-toolbar,
    .area-tech-editor-tool,
    .area-tech-post-actions .btn,
    .area-tech-editor-actions .btn {
        width: 100%;
    }

    .area-tech-editor-textarea {
        min-height: 340px;
    }

    .area-tech-editor-tool--icon {
        width: 44px;
        flex-basis: 44px;
    }
}