:root {
            --bg: #f3f6f9;
            --panel: #fcfdff;
            --text: #1d2938;
            --muted: #5f7084;
            --line: #d6dfe7;
            --brand: #19766f;
            --brand-dark: #185f5a;
            --accent: #3b6fa8;
            --warning: #a9702e;
            --danger: #c94f55;
            --shadow: 0 8px 24px rgba(29, 41, 56, .055);
        }
        [data-theme="dark"] {
            --bg: #18212b;
            --panel: #202b36;
            --text: #d2d8de;
            --muted: #98a6b3;
            --line: #35424f;
            --brand: #4c9f97;
            --brand-dark: #7fc2bb;
            --accent: #7898bd;
            --warning: #c99a5b;
            --danger: #cc7777;
            --shadow: 0 14px 32px rgba(7, 12, 18, .16);
        }
        * { box-sizing: border-box; }
        html, body { max-width: 100%; overflow-x: hidden; }
        html { color-scheme: light; background: var(--bg); }
        html[data-theme="dark"] { color-scheme: dark; }
        body {
            margin: 0;
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
            color: var(--text);
            background: var(--bg);
        }
        @keyframes fadeUp {
            from { opacity: .72; transform: translateY(5px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes growBar {
            from { transform: scaleY(.08); }
            to { transform: scaleY(1); }
        }
        @keyframes panelIn {
            from { opacity: 0; transform: translateY(-6px); }
            to { opacity: 1; transform: translateY(0); }
        }
        a { color: var(--brand-dark); font-weight: 700; text-decoration: none; }
        html.theme-transition body,
        html.theme-transition body > header,
        html.theme-transition main,
        html.theme-transition .card,
        html.theme-transition form,
        html.theme-transition .table-wrap,
        html.theme-transition table,
        html.theme-transition th,
        html.theme-transition td,
        html.theme-transition input,
        html.theme-transition select,
        html.theme-transition textarea,
        html.theme-transition .searchable-select-trigger,
        html.theme-transition .searchable-select-panel,
        html.theme-transition .nav-panel,
        html.theme-transition .profile-panel,
        html.theme-transition .notification-panel {
            transition: background-color .32s ease, color .32s ease, border-color .32s ease, box-shadow .32s ease;
        }
        body > header {
            position: sticky;
            top: 0;
            z-index: 200;
            overflow: visible;
            background: rgba(252, 253, 255, .94);
            border-bottom: 1px solid rgba(219, 227, 236, .85);
            backdrop-filter: blur(14px);
        }
        [data-theme="dark"] body > header { background: rgba(24, 33, 43, .94); border-bottom-color: var(--line); }
        .topbar {
            max-width: 1280px;
            margin: 0 auto;
            padding: 12px 22px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            min-height: 72px;
            overflow: visible;
        }
        .brand { display: flex; align-items: center; gap: 12px; flex: 0 1 360px; min-width: 210px; color: inherit; text-decoration: none; }
        .brand:hover h1 { color: var(--brand-dark); }
        .brand-mark {
            width: 40px;
            height: 40px;
            border-radius: 999px;
            display: grid;
            place-items: center;
            background: #1f2937;
            color: white;
            font-weight: 900;
            box-shadow: 0 12px 24px rgba(15, 118, 110, .22);
            overflow: hidden;
        }
        .brand-mark img { width: 100%; height: 100%; display: block; object-fit: cover; }
        .brand h1 { margin: 0; font-size: 18px; line-height: 1.1; letter-spacing: 0; }
        .brand small { color: var(--muted); font-weight: 700; display: block; max-width: 330px; line-height: 1.25; }
.main-menu { display: flex; gap: 6px; flex: 1 1 auto; flex-wrap: nowrap; align-items: center; justify-content: center; min-width: 0; }
.nav-dropdown { position: relative; z-index: 210; }
.nav-dropdown summary { list-style: none; }
.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown summary::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    margin-left: 8px;
    color: currentColor;
    opacity: .72;
    transition: transform .16s ease;
}
.nav-dropdown[open] summary::after { transform: rotate(180deg); }
.nav-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 230px;
    display: grid;
    gap: 4px;
    padding: 10px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    z-index: 220;
    animation: panelIn .16s ease both;
}
.nav-panel .menu-link { justify-content: flex-start; }
.nav-panel .menu-link { min-height: 36px; padding: 8px 10px; border-radius: 6px; }
.profile-menu { position: relative; display: flex; gap: 10px; flex: 0 0 auto; align-items: center; justify-content: flex-end; }
        .notification-bell {
            position: relative;
            display: grid;
            width: 40px;
            height: 40px;
            flex: 0 0 40px;
            border: 1px solid var(--line);
            border-radius: 999px;
            place-items: center;
            background: var(--panel);
            color: #334155;
            text-decoration: none;
            box-shadow: 0 7px 18px rgba(15, 23, 42, .1);
            transition: transform .18s ease, background .18s ease, color .18s ease;
        }
        .notification-bell:hover,
        .notification-bell.active { transform: translateY(-1px); background: #e6f3ef; color: var(--brand-dark); }
        .notification-bell svg { width: 20px; height: 20px; }
        .notification-bell > span {
            position: absolute;
            top: -6px;
            right: -7px;
            min-width: 20px;
            padding: 3px 5px;
            border: 2px solid var(--panel);
            border-radius: 999px;
            background: #dc2626;
            color: #fff;
            font-size: 9px;
            font-weight: 900;
            line-height: 1;
            text-align: center;
        }
        .notification-dropdown { position: static; }
        .notification-dropdown > summary { list-style: none; cursor: pointer; }
        .notification-dropdown > summary::-webkit-details-marker { display: none; }
        .notification-panel {
            position: absolute;
            right: 54px;
            top: calc(100% + 10px);
            width: min(390px, calc(100vw - 28px));
            padding: 14px;
            border: 1px solid var(--line);
            border-radius: 10px;
            background: var(--panel);
            box-shadow: var(--shadow);
            z-index: 260;
            animation: panelIn .16s ease both;
        }
        .notification-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 2px 10px; border-bottom: 1px solid var(--line); }
        .notification-panel-head span { min-width: 26px; padding: 3px 7px; border-radius: 999px; background: var(--soft); color: var(--brand-dark); font-size: 11px; font-weight: 900; text-align: center; }
        .notification-panel-list { display: grid; max-height: min(430px, 60vh); margin: 8px 0 12px; overflow-y: auto; }
        .notification-panel-list form { margin: 0; }
        .notification-panel-list button { display: grid; width: 100%; gap: 3px; padding: 10px 8px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
        .notification-panel-list button:hover { border-radius: 7px; background: var(--soft); }
        .notification-panel-list strong { font-size: 13px; }
        .notification-panel-list span { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
        .notification-panel-list time { color: var(--muted); font-size: 10px; }
        .notification-panel > .button { width: 100%; }
        [data-theme="dark"] .notification-bell { background: #111827; color: #cbd5e1; }
        [data-theme="dark"] .notification-bell:hover,
        [data-theme="dark"] .notification-bell.active { background: #163b38; color: #99f6e4; }
        .menu-toggle { display: none; }
        .menu-button {
            display: none;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: white;
            color: #334155;
            min-height: 40px;
            padding: 8px 12px;
            font-weight: 900;
            cursor: pointer;
        }
        [data-theme="dark"] .menu-button,
        [data-theme="dark"] .profile-panel,
        [data-theme="dark"] .main-menu,
        [data-theme="dark"] input,
        [data-theme="dark"] select,
        [data-theme="dark"] textarea,
        [data-theme="dark"] .table-wrap {
            background: var(--panel);
            color: var(--text);
        }
        .menu-link, .button {
            background: var(--brand);
            color: white;
            border: 0;
            border-radius: 8px;
            padding: 10px 14px;
            text-decoration: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 40px;
            font: inherit;
            font-weight: 800;
            white-space: nowrap;
            box-shadow: 0 8px 18px rgba(15, 118, 110, .18);
            transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
        }
        .button:hover { transform: translateY(-1px); box-shadow: 0 12px 22px rgba(15, 118, 110, .22); }
        .button-icon { width: 18px; height: 18px; flex: 0 0 18px; }
        .menu-link { background: transparent; color: #334155; box-shadow: none; position: relative; }
        [data-theme="dark"] .menu-link { color: #b8c2cb; }
        .menu-link:hover, .menu-link.active { background: #e6f3ef; color: var(--brand-dark); }
        .menu-link.secondary, .button.secondary { background: #445366; color: white; box-shadow: none; }
        .profile-card {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 44px;
            justify-content: flex-end;
            border: 0;
            background: transparent;
            cursor: pointer;
            padding: 0;
            color: var(--text);
        }
        .profile-dropdown { position: static; }
        .profile-dropdown summary { list-style: none; }
        .profile-dropdown summary::-webkit-details-marker { display: none; }
        .profile-panel {
            position: absolute;
            right: 0;
            top: calc(100% + 10px);
            width: min(300px, calc(100vw - 28px));
            background: white;
            border: 1px solid var(--line);
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 18px;
            z-index: 20;
            animation: panelIn .16s ease both;
        }
        .profile-panel .button { width: 100%; }
        .profile-panel-head {
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: center;
            margin: 0 0 16px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--line);
            text-align: center;
        }
        .profile-panel-identity { width: 100%; min-width: 0; }
        .profile-panel-identity > strong {
            display: block;
            font-size: 17px;
            line-height: 1.35;
            overflow-wrap: anywhere;
        }
        .profile-panel-identity > span:not(.badge) {
            display: block;
            margin: 5px 0 10px;
            overflow: hidden;
            color: var(--muted);
            font-size: 13px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .role-avatar {
            width: 44px;
            height: 44px;
            flex: 0 0 44px;
            padding: 2px;
            overflow: hidden;
            border: 2px solid transparent;
            border-radius: 50%;
            background: var(--panel);
            box-shadow: 0 3px 12px rgba(15, 23, 42, .14);
        }
        .role-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 50%; }
        .role-avatar--large { width: 82px; height: 82px; flex-basis: 82px; padding: 3px; }
        .role-avatar--admin { border-color: #93c5fd; }
        .role-avatar--pengelola { border-color: #5eead4; }
        .role-avatar--pengguna { border-color: #d8b4fe; }
        .role-avatar--verifikator { border-color: #86efac; }
        .avatar-picker {
            margin: 18px 0;
            padding: 16px;
            border: 1px solid var(--line);
            border-radius: 14px;
        }
        .avatar-picker legend { padding: 0 7px; font-weight: 800; }
        .avatar-picker .muted { margin: 0 0 14px; }
        .avatar-picker-options { display: flex; flex-wrap: wrap; gap: 12px; }
        .avatar-choice {
            position: relative;
            min-width: 150px;
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 0;
            padding: 12px 16px;
            border: 2px solid var(--line);
            border-radius: 14px;
            background: var(--panel);
            cursor: pointer;
            transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
        }
        .avatar-choice:hover { transform: translateY(-2px); }
        .avatar-choice:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(15, 118, 110, .12); }
        .avatar-choice input { position: absolute; opacity: 0; pointer-events: none; }
        .avatar-choice > span { font-weight: 800; }
        .avatar-choice:focus-within { outline: 3px solid rgba(15, 118, 110, .2); outline-offset: 2px; }
        .profile-panel-actions { display: grid; gap: 9px; }
        .profile-panel-actions form { margin: 0; padding: 0; border: 0; box-shadow: none; background: transparent; }
        .avatar {
            width: 38px;
            height: 38px;
            border-radius: 999px;
            display: grid;
            place-items: center;
            background: #e5edf7;
            color: #315c8b;
            font-weight: 900;
        }
        .theme-toggle {
            position: relative;
            width: 40px;
            height: 40px;
            flex: 0 0 40px;
            padding: 0;
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: 999px;
            background: #fff7d6;
            color: #b45309;
            cursor: pointer;
            box-shadow: 0 7px 18px rgba(180, 83, 9, .14);
            transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .2s ease;
        }
        .theme-toggle:hover { transform: translateY(-1px) scale(1.04); }
        .theme-toggle:focus-visible { outline: 3px solid rgba(15, 118, 110, .25); outline-offset: 2px; }
        .theme-icon {
            position: absolute;
            inset: 9px;
            width: 20px;
            height: 20px;
            transform-origin: center;
            transition: opacity .45s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
        }
        .theme-icon-sun { opacity: 1; transform: rotate(0deg) scale(1); }
        .theme-icon-moon { opacity: 0; transform: rotate(-100deg) scale(.35); }
        [data-theme="dark"] .theme-toggle {
            background: #172033;
            color: #bfdbfe;
            border-color: #334155;
            box-shadow: 0 7px 18px rgba(15, 23, 42, .3);
        }
        [data-theme="dark"] .theme-icon-sun { opacity: 0; transform: rotate(100deg) scale(.35); }
        [data-theme="dark"] .theme-icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }
        .theme-toggle[data-transition] { animation: themeSwitch .55s ease; }
        .theme-toggle[data-transition="dark"] .theme-icon-sun { animation: sunSet .55s ease both; }
        .theme-toggle[data-transition="dark"] .theme-icon-moon { animation: moonRise .55s ease both; }
        .theme-toggle[data-transition="light"] .theme-icon-moon { animation: moonSet .55s ease both; }
        .theme-toggle[data-transition="light"] .theme-icon-sun { animation: sunRise .55s ease both; }
        @keyframes themeSwitch { 0%, 100% { transform: scale(1); } 50% { transform: scale(.86); } }
        @keyframes sunSet { from { opacity: 1; transform: rotate(0) translateY(0) scale(1); } to { opacity: 0; transform: rotate(130deg) translateY(18px) scale(.25); } }
        @keyframes moonRise { from { opacity: 0; transform: rotate(-130deg) translateY(18px) scale(.25); } to { opacity: 1; transform: rotate(0) translateY(0) scale(1); } }
        @keyframes moonSet { from { opacity: 1; transform: rotate(0) translateY(0) scale(1); } to { opacity: 0; transform: rotate(-130deg) translateY(18px) scale(.25); } }
        @keyframes sunRise { from { opacity: 0; transform: rotate(130deg) translateY(18px) scale(.25); } to { opacity: 1; transform: rotate(0) translateY(0) scale(1); } }
        .profile-text { line-height: 1.15; text-align: right; }
        .profile-text strong { display: block; font-size: 13px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .profile-text span { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: capitalize; }
        main { max-width: 1280px; margin: 28px auto; padding: 0 22px 42px; }
        h2 { margin: 26px 0 14px; font-size: 24px; letter-spacing: 0; }
        h3 { margin: 6px 0 0; font-size: 24px; letter-spacing: 0; }
        .grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
        .analytics-grid { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); align-items: start; }
        .card, table, form {
            background: var(--panel);
            border: 1px solid var(--line);
            border-radius: 8px;
            box-shadow: var(--shadow);
            animation: fadeUp .3s cubic-bezier(.22, 1, .36, 1) both;
        }
        .card { min-width: 0; max-width: 100%; padding: 20px; }
        .card p { margin: 0; }
        .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; min-width: 0; flex-wrap: wrap; }
        .card-head > * { min-width: 0; }
        .card-head h3 { margin: 0; font-size: 20px; line-height: 1.2; }
        .button.compact { min-height: 32px; padding: 6px 10px; font-size: 12px; white-space: nowrap; }
        .metric { border-top: 4px solid var(--brand); }
        .metric:nth-child(2) { border-top-color: var(--accent); }
        .metric:nth-child(3) { border-top-color: var(--warning); }
        .metric-link { color: var(--text); text-decoration: none; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
        .metric-link span { margin-top: 9px; color: var(--brand-dark); font-size: 12px; font-weight: 900; }
        .metric-link:hover,
        .metric-link:focus-visible { transform: translateY(-2px); border-color: var(--brand); box-shadow: 0 12px 24px rgba(15, 23, 42, .12); }
        .dashboard-metrics { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
        .dashboard-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 16px; margin: 18px 0 4px; align-items: stretch; }
        .attention-list { display: grid; gap: 10px; margin-top: 12px; }
        .attention-item { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; }
        .attention-item strong { display: block; line-height: 1.25; }
        .attention-item span:not(.badge) { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; }
        .quick-actions { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 12px; }
        .quick-action { display: block; padding: 13px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; text-decoration: none; color: var(--text); transition: border-color .16s ease, transform .16s ease, background .16s ease; }
        .quick-action:hover { border-color: var(--brand); background: #f0fdfa; transform: translateY(-1px); }
        .quick-action strong { display: block; }
        .quick-action span { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; }
        .compact-empty { padding: 14px; }
        .dashboard-filter { margin: 18px 0; }
        .dashboard-chart-card { margin-bottom: 16px; }
        .dashboard-analytics {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
            align-items: stretch;
        }
        .dashboard-analytics > .card { min-width: 0; height: 100%; }
        .dashboard-analytics > .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
        .dashboard-table-scroll {
            width: 100%;
            max-width: 100%;
            overflow-x: auto;
            scrollbar-gutter: auto;
        }
        .dashboard-recent-card { margin-top: 18px; overflow: hidden; }
        .dashboard-recent-card .card-head { align-items: center; margin-bottom: 14px; }
        .dashboard-recent-card .card-head p { margin-top: 5px; line-height: 1.4; }
        .dashboard-recent-card .dashboard-table-scroll { border: 1px solid var(--line); border-radius: 8px; }
        .dashboard-history-table { width: 100%; min-width: 860px; border: 0; border-radius: 0; table-layout: fixed; box-shadow: none; }
        .dashboard-history-table th,
        .dashboard-history-table td { padding: 11px 12px; vertical-align: middle; }
        .dashboard-history-table th:nth-child(1) { width: 120px; }
        .dashboard-history-table th:nth-child(2) { width: 220px; }
        .dashboard-history-table th:nth-child(3) { width: 90px; }
        .dashboard-history-table th:nth-child(4) { width: 120px; }
        .dashboard-history-table th:nth-child(5),
        .dashboard-history-table th:nth-child(6) { width: 110px; }
        .dashboard-history-table th:nth-child(7) { width: 190px; }
        .dashboard-history-table td:nth-child(2) strong,
        .dashboard-history-user { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .dashboard-history-table td:nth-child(5),
        .dashboard-history-table td:nth-child(6) { white-space: nowrap; }
        .dashboard-table-scroll .compact-table {
            width: 100%;
            min-width: 520px;
            table-layout: fixed;
        }
        .compact-table th, .compact-table td { padding: 11px 10px; }
        .compact-table th:first-child,
        .compact-table td:first-child {
            width: auto;
            min-width: 0;
            max-width: none;
        }
        .compact-table td:first-child strong,
        .compact-table td:first-child span:not(.badge) {
            display: block;
            max-width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .compact-table td:first-child strong { line-height: 1.25; }
        .compact-table td:first-child span:not(.badge) { color: var(--muted); font-size: 12px; margin-top: 3px; }
        .compact-table td:first-child .badge { width: max-content; margin-top: 5px; }
        .compact-table th:not(:first-child),
        .compact-table td:not(:first-child) {
            width: 110px;
            min-width: 110px;
            white-space: nowrap;
            word-break: normal;
            overflow-wrap: normal;
            text-align: right;
        }
        .table-wrap {
            width: 100%;
            max-width: 100%;
            border: 1px solid var(--line);
            border-radius: 8px;
            overflow-x: auto;
            overflow-y: hidden;
            background: white;
            box-shadow: var(--shadow);
            scrollbar-gutter: auto;
        }
        table {
            width: 100%;
            min-width: 100%;
            border-collapse: collapse;
            box-shadow: none;
            border: 0;
            border-radius: 0;
        }
        th, td {
            padding: 14px 16px;
            border-bottom: 1px solid #edf2f7;
            text-align: left;
            vertical-align: top;
            white-space: normal;
            overflow-wrap: break-word;
            word-break: break-word;
        }
        .table-wrap table { width: 100%; min-width: 100%; }
        .table-wrap th,
        .table-wrap td {
            max-width: none;
            white-space: nowrap;
            overflow-wrap: normal;
            word-break: normal;
        }
        .card table td { padding: 10px 8px; }
        .card table td:last-child { text-align: right; }
        th { background: #f2f5f8; font-size: 12px; text-transform: uppercase; color: #5f7084; letter-spacing: .04em; }
        [data-theme="dark"] th { background: #273440; color: #9eabb6; }
        [data-theme="dark"] tr:hover td { background: #25323d; }
        tr:hover td { background: #f4f8f7; transition: background .16s ease; }
        form { min-width: 0; max-width: 100%; padding: 22px; }
        .filter-form { margin-bottom: 16px; padding: 16px; box-shadow: none; position: relative; }
        form.searchable-select-active {
            position: relative;
            z-index: 110;
            overflow: visible;
        }
        .filter-panel summary { cursor: pointer; font-weight: 900; list-style: none; }
        .filter-panel summary::-webkit-details-marker { display: none; }
        .filter-panel-body { margin-top: 14px; }
        label { display: block; margin: 14px 0 7px; font-weight: 800; color: #334155; }
        input, select, textarea {
            width: 100%;
            border: 1px solid #cbd5e1;
            border-radius: 8px;
            padding: 11px 12px;
            font: inherit;
            background: #fff;
            color: var(--text);
            outline: none;
        }
        input[type="checkbox"] { width: auto; margin-right: 8px; accent-color: var(--brand); }
        [data-theme="dark"] .qr-grid,
        [data-theme="dark"] .qr-cell.off { background: #fff; }
        [data-theme="dark"] .qr-cell.on { background: #0f172a; }
        input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(15, 118, 110, .12); }
        .searchable-select { position: relative; width: 100%; }
        .searchable-select.open { z-index: 120; }
        .searchable-select-native {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            opacity: 0;
            pointer-events: none;
        }
        .searchable-select-trigger {
            width: 100%;
            min-height: 44px;
            padding: 10px 38px 10px 12px;
            border: 1px solid #cbd5e1;
            border-radius: 8px;
            background: #fff;
            color: var(--text);
            font: inherit;
            text-align: left;
            cursor: pointer;
            position: relative;
        }
        [data-theme="dark"] .searchable-select-trigger,
        [data-theme="dark"] .searchable-select-panel { background: var(--panel); border-color: var(--line); }
        .searchable-select-trigger::after {
            content: "";
            position: absolute;
            right: 14px;
            top: 50%;
            width: 8px;
            height: 8px;
            border-right: 2px solid currentColor;
            border-bottom: 2px solid currentColor;
            transform: translateY(-70%) rotate(45deg);
            transition: transform .2s ease;
        }
        .searchable-select.open .searchable-select-trigger::after { transform: translateY(-30%) rotate(225deg); }
        .searchable-select-trigger.placeholder { color: var(--muted); }
        .searchable-select-trigger:focus {
            outline: none;
            border-color: var(--brand);
            box-shadow: 0 0 0 4px rgba(15, 118, 110, .12);
        }
        .searchable-select-trigger:disabled { cursor: not-allowed; opacity: .65; }
        .searchable-select-panel {
            position: absolute;
            z-index: 100;
            top: calc(100% + 6px);
            left: 0;
            right: 0;
            padding: 8px;
            border: 1px solid #cbd5e1;
            border-radius: 10px;
            background: #fff;
            box-shadow: 0 14px 36px rgba(15, 23, 42, .18);
        }
        .searchable-select-panel[hidden] { display: none; }
        .searchable-select-search { margin: 0 0 8px; }
        .searchable-select-options { max-height: 260px; overflow-y: auto; }
        .searchable-select-option {
            display: block;
            width: 100%;
            padding: 10px;
            border: 0;
            border-radius: 7px;
            background: transparent;
            color: var(--text);
            font: inherit;
            text-align: left;
            cursor: pointer;
        }
        .searchable-select-option:hover,
        .searchable-select-option:focus { background: rgba(15, 118, 110, .1); outline: none; }
        .searchable-select-option.selected { background: var(--brand); color: #fff; font-weight: 700; }
        .searchable-select-option:disabled { cursor: not-allowed; opacity: .5; }
        .searchable-select-empty { margin: 0; padding: 12px 10px; color: var(--muted); }
        textarea { min-height: 104px; resize: vertical; }
        .row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); min-width: 0; }
        .grid > *, .row > *, .dashboard-split > *, .dashboard-analytics > * { min-width: 0; }
        .category-cascade { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
        .category-cascade select { min-width: 0; }
        .item-code-grid { display: grid; gap: 10px; grid-template-columns: repeat(6, minmax(90px, 1fr)); align-items: end; }
        .item-code-grid label { font-size: 12px; margin-top: 0; }
        .item-code-grid select,
        .item-code-grid input { min-width: 0; }
        .session-modal-backdrop {
            position: fixed;
            inset: 0;
            z-index: 80;
            display: grid;
            place-items: center;
            padding: 20px;
            background: rgba(15, 23, 42, .42);
            backdrop-filter: blur(8px);
        }
        .session-modal {
            width: min(680px, 100%);
            border: 1px solid var(--line);
            border-radius: 14px;
            padding: 22px;
            background: var(--panel);
            box-shadow: 0 24px 80px rgba(15, 23, 42, .28);
        }
        .confirm-modal-backdrop {
            position: fixed;
            inset: 0;
            z-index: 1000;
            display: grid;
            place-items: center;
            padding: 20px;
            background: rgba(15, 23, 42, .55);
            backdrop-filter: blur(7px);
            animation: confirm-backdrop-in .16s ease both;
        }
        .confirm-modal-backdrop[hidden] { display: none; }
        .confirm-modal {
            display: grid;
            grid-template-columns: 48px minmax(0, 1fr);
            gap: 14px 16px;
            width: min(480px, 100%);
            padding: 22px;
            border: 1px solid var(--line);
            border-radius: 16px;
            background: var(--panel);
            box-shadow: 0 28px 90px rgba(15, 23, 42, .35);
            animation: confirm-modal-in .2s ease both;
        }
        .confirm-modal-icon {
            display: grid;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            place-items: center;
            background: var(--soft);
            color: var(--brand-dark);
            font-size: 22px;
            font-weight: 900;
        }
        .confirm-modal.is-danger .confirm-modal-icon { background: #f7e6e8; color: #9f3741; }
        .confirm-modal-copy h2 { margin: 1px 0 7px; font-size: 20px; }
        .confirm-modal-copy p { margin: 0; color: var(--muted); line-height: 1.55; }
        .confirm-modal-actions { display: flex; grid-column: 1 / -1; justify-content: flex-end; gap: 10px; margin-top: 5px; }
        .confirm-modal-actions .button { min-width: 110px; }
        @keyframes confirm-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
        @keyframes confirm-modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
        .session-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
        .session-modal-head h2 { margin: 0; font-size: 22px; }
        .session-summary-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .session-summary-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 13px 14px;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: #f8fafc;
            color: inherit;
            text-decoration: none;
        }
        [data-theme="dark"] .session-summary-item { background: #111827; }
        .session-summary-item strong { font-size: 24px; color: var(--brand-dark); }
        .actions {
            display: flex;
            max-width: none;
            gap: 9px;
            flex-wrap: wrap;
            align-items: center;
        }
        td.actions { min-width: 132px; }
        td.actions .button {
            max-width: 100%;
            white-space: normal;
            text-align: center;
            overflow-wrap: break-word;
        }
        td.actions form { max-width: 100%; }
        .movement-table .truncate-cell {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .sortable-heading {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            color: inherit;
            text-decoration: none;
            white-space: nowrap;
        }
        .sortable-heading:hover,
        .sortable-heading:focus-visible { color: var(--brand); text-decoration: underline; }
        .sortable-heading.active { color: var(--brand-dark); }
        .action-table th:last-child,
        .action-table td:last-child {
            position: sticky;
            right: 0;
            z-index: 2;
            background: var(--panel);
            box-shadow: -10px 0 14px -14px rgba(15, 23, 42, .65);
        }
        .action-table th:last-child { min-width: 125px; z-index: 3; background: #f2f5f8; }
        .action-table td:last-child { min-width: 125px; }
        .action-table td[colspan]:last-child {
            position: static;
            min-width: 0;
            box-shadow: none;
        }
        .action-table td.actions { display: table-cell; }
        .action-table td.actions > * { display: inline-flex; margin: 0 5px 5px 0; vertical-align: top; }
        .action-table td.actions > *:last-child { margin-right: 0; }
        [data-theme="dark"] .action-table th:last-child { background: #273440; }
        .action-table tr:hover td:last-child { background: #f4f8f7; }
        [data-theme="dark"] .action-table tr:hover td:last-child { background: #25323d; }
        .page-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; min-width: 0; flex-wrap: wrap; }
        .page-head > * { min-width: 0; max-width: 100%; }
        .page-head h2 { margin: 0; }
        .page-subtitle { margin: 6px 0 0 !important; line-height: 1.45; }
        .form-actions { margin-top: 16px; }
        .field-hint { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.4; }
        .reference-import-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
        .reference-import-grid > * { min-width: 0; }
        .csv-header-example { display: block; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); color: var(--text); }
        .import-notes { margin: 16px 0 0; padding-left: 20px; color: var(--muted); }
        .import-notes li + li { margin-top: 7px; }
        .data-exchange-list { display: grid; gap: 16px; }
        .data-exchange-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr); gap: 22px; padding: 20px; scroll-margin-top: 110px; }
        .data-exchange-card:target { border-color: color-mix(in srgb, var(--brand) 65%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent), var(--shadow); }
        .data-exchange-copy { min-width: 0; }
        .data-exchange-copy h3 { margin: 4px 0 8px; }
        .data-exchange-copy p { margin: 0 0 16px; line-height: 1.5; }
        .data-exchange-card form { margin: 0; padding: 16px; box-shadow: none; }
        .checkbox-row { display: flex; align-items: center; gap: 9px; width: max-content; max-width: 100%; font-weight: 700; }
        .checkbox-row input { flex: 0 0 auto; width: auto; margin: 0; }
        .badge { border-radius: 999px; padding: 5px 10px; font-size: 12px; font-weight: 900; display: inline-flex; align-items: center; white-space: nowrap; }
        .badge.low { background: #f7e6e8; color: #8a3039; }
        .badge.ok { background: #e4f2e9; color: #28613e; }
        .badge.in { background: #e5edf7; color: #315c8b; }
        .badge.out { background: #f5e9df; color: #854a27; }
        .badge.role { background: #e5f0ee; color: var(--brand-dark); }
        .badge.pending { background: #f4eed8; color: #76591e; }
        .badge.approved { background: #e4f2e9; color: #28613e; }
        .badge.rejected { background: #f7e6e8; color: #8a3039; }
        .badge.fulfilled { background: #e3eff2; color: #2b606c; }
        .badge.cancelled { background: #f7e6e8; color: #8a3039; }
        .badge.corrected { background: #eee7f7; color: #68428a; }
        .badge.neutral { background: var(--soft); color: var(--muted); }
        .nav-badge { margin-left: 6px; background: #f7e6e8; color: #8a3039; border-radius: 999px; padding: 2px 7px; font-size: 11px; font-weight: 900; }
        .alert { padding: 13px 15px; border-radius: 8px; margin-bottom: 16px; font-weight: 700; }
        .alert.success { background: #e8f3ec; color: #28613e; border: 1px solid #bad8c5; }
        .alert.error { background: #f8eaeb; color: #8a3039; border: 1px solid #e4c0c4; }
        .alert.correction-notice { background: #f4eff9; color: #68428a; border: 1px solid #d8c8e8; }
        .back-row { display: flex; justify-content: flex-start; margin: 0 0 16px; }
        .pagination { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 16px 0 0; padding: 0; list-style: none; }
        .page-link {
            min-width: 34px;
            min-height: 34px;
            padding: 6px 10px;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: var(--panel);
            color: var(--text);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 900;
            line-height: 1;
            box-shadow: none;
        }
        .page-item.active .page-link { background: var(--brand); border-color: var(--brand); color: white; }
        .page-item.disabled .page-link { color: var(--muted); cursor: not-allowed; opacity: .55; }
        .page-link:hover { border-color: var(--brand); color: var(--brand-dark); }
        .muted { color: var(--muted); }
        img, video, svg { max-width: 100%; }
        pre, code { max-width: 100%; overflow-wrap: anywhere; }
        pre,
        .csv-header-example {
            border: 1px solid var(--line) !important;
            background: #eef3f6 !important;
            color: #243447 !important;
            font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
            line-height: 1.55;
            white-space: pre-wrap;
            word-break: break-word;
        }
        [data-theme="dark"] pre,
        [data-theme="dark"] .csv-header-example {
            border-color: #40505e !important;
            background: #18242f !important;
            color: #d8e2ea !important;
        }
        .danger { background: var(--danger); box-shadow: 0 8px 18px rgba(220, 38, 38, .18); }
.mini-bars { display: grid; grid-template-columns: repeat(7, minmax(34px, 1fr)); gap: 10px; align-items: end; min-height: 164px; overflow-x: auto; }
.wide-bars { grid-template-columns: repeat(auto-fit, minmax(38px, 1fr)); overflow-x: auto; }
.monthly-bars { grid-template-columns: repeat(6, 1fr); }
.chart-tabs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; margin-bottom: 12px; }
.chart-tab { border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 8px; min-height: 34px; padding: 7px 11px; font-weight: 900; cursor: pointer; }
.chart-tab.active { background: var(--brand); color: white; border-color: var(--brand); }
.chart-panel { display: none; }
.chart-panel.active { display: block; }
.report-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
    gap: 16px;
    overflow: hidden;
}
.report-filter-grid { display: grid; grid-template-columns: minmax(260px, .65fr) minmax(0, 2.35fr); gap: 14px; margin-bottom: 18px; align-items: stretch; }
.report-filter-card { height: 100%; margin: 0; padding: 18px; }
.report-filter-card .section-head { margin-top: 0; }
.report-filter-card label { margin-top: 8px; }
.report-trend-fields { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 10px; align-items: end; }
.report-filter-note { display: grid; gap: 3px; margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--warning); border-radius: 6px; background: color-mix(in srgb, var(--warning) 10%, var(--panel)); }
.report-filter-note strong { font-size: 12px; }
.report-filter-note span { color: var(--muted); font-size: 11px; line-height: 1.45; }
.report-card {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
.report-card .card-head { min-width: 0; flex-wrap: wrap; }
.report-card .card-head h3 { min-width: 0; overflow-wrap: break-word; }
.report-card .card-head .actions { margin-left: auto; }
.report-card .table-wrap {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-top: 10px;
    overflow-x: auto;
    box-shadow: none;
}
.simple-report-table { overflow-x: auto; }
.simple-report-table table { width: max-content; min-width: 100%; table-layout: auto; }
.simple-report-table th,
.simple-report-table td { padding: 10px 12px; }
.simple-report-table th { white-space: nowrap; }
.simple-report-table td { min-width: 0; overflow-wrap: anywhere; }
.report-preview-table table { width: 100%; min-width: 0; table-layout: auto; }
.report-detail-table td { max-width: 280px; }
.simple-report-table th:last-child,
.simple-report-table td:last-child { text-align: right; }
.table-wrap .readable-table { width: 100%; table-layout: auto; }
.readable-table td {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}
.readable-table th:first-child,
.readable-table td:first-child { white-space: nowrap; }
.table-wrap .dashboard-history-table { min-width: 850px; }
.table-wrap .audit-table { min-width: 820px; }
.table-wrap .notification-log-table { min-width: 720px; }
.table-wrap .stock-opname-table {
    width: 100%;
    min-width: 960px;
    table-layout: auto;
}
.table-wrap .item-request-table { min-width: 820px; }
.table-wrap .import-preview-table { min-width: 1320px; }
.item-request-table th:nth-child(2),
.item-request-table td:nth-child(2) {
    min-width: 250px;
    max-width: 360px;
    white-space: normal;
    overflow-wrap: anywhere;
}
.unit-symbol { display: inline-flex; padding: 4px 8px; border-radius: 6px; background: var(--soft); color: var(--brand-dark); font-weight: 800; }
.detail-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.detail-summary-card { display: grid; min-height: 108px; padding: 17px; align-content: start; gap: 9px; }
.detail-summary-card p { margin: 0; font-size: 13px; }
.detail-summary-card > strong { font-size: 17px; line-height: 1.35; overflow-wrap: anywhere; }
.detail-panel { margin-top: 16px; }
.section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: 4px 0 14px; flex-wrap: wrap; }
.section-head h3 { margin: 0; font-size: 18px; }
.section-head p { margin: 5px 0 0; line-height: 1.4; }
.detail-table-wrap { width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; }
.detail-data-table { width: 100%; table-layout: fixed; }
.detail-data-table th { width: 215px; }
.detail-data-table th,
.detail-data-table td { padding: 11px 13px; vertical-align: top; }
.detail-data-table td:last-child { text-align: left; overflow-wrap: anywhere; }
.review-panel { margin-top: 20px; }
.document-card { width: min(780px, 100%); margin: 24px auto; padding: 24px; }
.document-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.document-head h2 { margin: 0; font-size: 23px; }
.document-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 18px 0 22px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.document-summary-grid > div { display: grid; min-width: 0; gap: 5px; padding: 13px 15px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.document-summary-grid > div:nth-child(2n) { border-right: 0; }
.document-summary-grid > div:nth-last-child(-n + 2) { border-bottom: 0; }
.document-summary-grid span { color: var(--muted); font-size: 12px; font-weight: 700; }
.document-summary-grid strong { overflow-wrap: anywhere; }
.document-qr-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line); }
.document-qr-copy h3 { margin: 0 0 8px; font-size: 17px; }
.document-qr-copy a { display: block; color: var(--brand-dark); font-size: 11px; font-weight: 700; overflow-wrap: anywhere; }
.document-qr { display: grid; width: 142px; height: 142px; padding: 7px; border: 1px solid var(--line); border-radius: 8px; place-items: center; background: #fff; }
.document-qr svg { display: block; width: 126px; height: 126px; }
.verification-detail-card { width: min(820px, 100%); margin-inline: auto; }
.verification-detail-head { align-items: center; }
.notification-summary-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.notification-list-head { margin-top: 28px; }
.notification-list-head { align-items: flex-end; }
.notification-toolbar {
    display: flex;
    flex: 1 1 660px;
    justify-content: flex-end;
    align-items: center;
    gap: 9px;
    max-width: none;
    flex-wrap: wrap;
}
.notification-filter-form {
    display: grid;
    grid-template-columns: minmax(170px, 1.2fr) minmax(145px, .9fr) minmax(135px, .8fr) auto auto;
    align-items: center;
    gap: 8px;
    flex: 1 1 560px;
    padding: 0;
}
.notification-filter-form input,
.notification-filter-form select { min-height: 38px; padding: 8px 10px; }
.notification-filter-form .button,
.notification-read-all-form .button { min-height: 38px; padding: 8px 12px; white-space: nowrap; }
.notification-read-all-form { margin: 0; padding: 0; }
.notification-list-head,
.notification-list { width: 100%; max-width: none; margin-inline: 0; }
.notification-list {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .05);
}
.notification-list-columns,
.notification-item {
    grid-template-columns: 145px minmax(150px, .65fr) minmax(260px, 1.7fr) 92px 28px;
    gap: 16px;
}
.notification-list-columns {
    display: grid;
    align-items: center;
    padding: 13px 18px;
    border-bottom: 1px solid var(--line);
    background: #f2f5f8;
    color: #5f7084;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
[data-theme="dark"] .notification-list-columns { background: #273440; color: #9eabb6; }
.notification-entry-form { margin: 0; padding: 0; max-width: none; }
.notification-entry-form + .notification-entry-form { border-top: 1px solid var(--line); }
.notification-item {
    display: grid;
    align-items: center;
    width: 100%;
    min-height: 76px;
    padding: 13px 18px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .18s ease, padding-left .18s ease;
}
.notification-item:hover,
.notification-item:focus-visible { padding-left: 22px; outline: none; background: var(--soft); }
.notification-time {
    display: grid;
    gap: 2px;
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 11px;
    white-space: nowrap;
}
.notification-time strong { color: var(--text); font-size: 12px; }
.notification-type { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 12px; font-weight: 800; }
.notification-marker {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border: 2px solid var(--panel);
    border-radius: 999px;
    background: var(--brand);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 35%, transparent);
}
.notification-marker.pending { background: #c28a24; }
.notification-marker.low,
.notification-marker.rejected,
.notification-marker.cancelled { background: var(--danger); }
.notification-marker.approved,
.notification-marker.fulfilled { background: #347a55; }
.notification-marker.corrected { background: #8060a0; }
.notification-marker.verification { background: #3b82f6; }
.notification-content { display: grid; min-width: 0; gap: 4px; }
.notification-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.notification-title-row > strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.notification-message { overflow: hidden; color: var(--muted); font-size: 13px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.notification-read-status { justify-self: start; }
.notification-open-arrow { color: var(--muted); font-size: 18px; transition: transform .18s ease, color .18s ease; }
.notification-item:hover .notification-open-arrow { color: var(--brand); transform: translateX(3px); }
.notification-item.is-unread { background: color-mix(in srgb, var(--soft) 45%, transparent); }
.notification-item.is-read { opacity: .78; }
.notification-item.is-read .notification-marker { opacity: .45; }
.table-wrap .item-history-table { min-width: 1050px; }
.categories-table td:nth-child(4),
.locations-table td:nth-child(2),
.units-table td:first-child {
    min-width: 180px;
    max-width: 300px;
    white-space: normal;
    overflow-wrap: anywhere;
}
.table-wrap .movement-table { width: 100%; min-width: 985px; table-layout: fixed; }
.movement-table th,
.movement-table td { padding: 11px 10px; vertical-align: middle; }
.movement-table th:nth-child(1) { width: 105px; }
.movement-table th:nth-child(2) { width: 190px; }
.movement-table th:nth-child(3) { width: 82px; }
.movement-table th:nth-child(4) { width: 205px; }
.movement-table th:nth-child(5) { width: 130px; }
.movement-table th:nth-child(6) { width: 160px; }
.movement-table th:nth-child(7) { width: 170px; }
.movement-table .movement-status { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.movement-table .actions { white-space: nowrap; }
.movement-table .button { min-height: 36px; padding: 7px 11px; }
.movement-table th:first-child,
.movement-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--panel);
    box-shadow: 10px 0 14px -14px rgba(15, 23, 42, .55);
}
.movement-table th:first-child { z-index: 3; background: #f2f5f8; }
.movement-table tr:hover td:first-child { background: #f4f8f7; }
[data-theme="dark"] .movement-table th:first-child { background: #273440; }
[data-theme="dark"] .movement-table tr:hover td:first-child { background: #25323d; }
.help-dot {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-left: 6px;
    border-radius: 999px;
    background: #e6f3ef;
    color: var(--brand-dark);
    font-size: 12px;
    font-weight: 900;
    cursor: help;
}
        .bar-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; align-items: end; height: 130px; }
        .bar { border-radius: 6px 6px 0 0; min-height: 8px; }
        .bar { transform-origin: bottom; animation: growBar .55s ease both; }
        .bar.in { background: #2563eb; }
        .bar.out { background: #f97316; }
        .bar-label { font-size: 10px; color: var(--muted); margin-top: 6px; text-align: center; white-space: nowrap; line-height: 1.1; }
        .auth-shell { max-width: 980px; margin: 46px auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: 18px; align-items: stretch; }
        .auth-intro { background: #0f766e; color: white; border-radius: 8px; padding: 34px 28px; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
        .auth-intro h2 { margin: 0 auto; max-width: 560px; font-size: 25px; line-height: 1.28; font-weight: 900; }
        .auth-intro p { color: #d9fbf2; line-height: 1.6; }
        body.login-page {
            min-height: 100vh;
            position: relative;
            overflow-x: hidden;
            background: linear-gradient(135deg, #edf4f5 0%, #f8fafc 54%, #e8f1f0 100%);
        }
        body.login-page::before {
            position: fixed;
            z-index: 0;
            bottom: -54px;
            left: -34px;
            width: clamp(250px, 28vw, 430px);
            aspect-ratio: 1;
            background: url('/images/login-warehouse-decoration.png') center / contain no-repeat;
            content: '';
            opacity: .88;
            pointer-events: none;
        }
        .login-decorations {
            position: fixed;
            z-index: 0;
            inset: 0;
            overflow: hidden;
            pointer-events: none;
        }
        .login-decoration { position: absolute; display: block; object-fit: contain; }
        .login-decoration-lamps {
            top: 76px;
            right: 3vw;
            width: clamp(190px, 21vw, 340px);
            opacity: .55;
        }
        .login-decoration-boxes {
            right: -46px;
            bottom: -52px;
            width: clamp(220px, 23vw, 360px);
            opacity: .62;
        }
        .login-decoration-trolley {
            top: 30%;
            left: -38px;
            width: clamp(120px, 10vw, 175px);
            opacity: .38;
            transform: rotate(-2deg);
        }
        .login-decoration-pallet {
            bottom: -58px;
            left: 50%;
            width: clamp(230px, 24vw, 380px);
            opacity: .28;
            transform: translateX(-50%);
        }
        .login-decoration-safety {
            top: 34%;
            right: -34px;
            width: clamp(110px, 9vw, 160px);
            opacity: .34;
        }
        .login-page header {
            position: relative;
            z-index: 2;
            background: rgba(255, 255, 255, .9);
            backdrop-filter: blur(10px);
        }
        .login-page main { position: relative; z-index: 1; }
        .login-page .login-auth-shell {
            position: relative;
            z-index: 1;
            min-height: calc(100vh - 190px);
            align-items: center;
        }
        .login-page .auth-intro {
            background: linear-gradient(145deg, rgba(15, 118, 110, .96), rgba(13, 95, 91, .92));
            border: 1px solid rgba(255, 255, 255, .28);
            backdrop-filter: blur(8px);
        }
        .login-page .auth-form-card {
            padding: 30px;
            border: 1px solid rgba(203, 213, 225, .9);
            border-radius: 12px;
            background: rgba(255, 255, 255, .95);
            box-shadow: 0 22px 55px rgba(15, 23, 42, .18);
            backdrop-filter: blur(12px);
        }
        .login-page .auth-form-card > h2 { margin-top: 0; }
        .login-page .auth-form-card form {
            padding: 0;
            border: 0;
            background: transparent;
            box-shadow: none;
        }
        [data-theme="dark"] body.login-page {
            background: linear-gradient(135deg, #1b2a32 0%, #22313a 55%, #1d3435 100%);
        }
        [data-theme="dark"] body.login-page::before { opacity: .48; filter: saturate(.75) brightness(.72); }
        [data-theme="dark"] .login-decoration { filter: saturate(.72) brightness(.7); }
        [data-theme="dark"] .login-decoration-lamps { opacity: .38; filter: saturate(.65) brightness(.78); }
        [data-theme="dark"] .login-decoration-boxes { opacity: .42; }
        [data-theme="dark"] .login-decoration-trolley,
        [data-theme="dark"] .login-decoration-safety { opacity: .24; }
        [data-theme="dark"] .login-decoration-pallet { opacity: .18; }
        [data-theme="dark"] .login-page header { background: rgba(25, 36, 45, .92); }
        [data-theme="dark"] .login-page .auth-form-card {
            border-color: rgba(103, 124, 139, .5);
            background: rgba(31, 42, 52, .95);
        }
        .auth-visual { margin: 26px auto 0; width: min(220px, 70%); aspect-ratio: 1; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 10px; box-shadow: 0 18px 36px rgba(0, 0, 0, .18); }
        .auth-visual img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 999px; }
        .icon { width: 17px; height: 17px; margin-right: 8px; flex: 0 0 auto; }
        .empty-state { padding: 34px 18px; text-align: center; color: var(--muted); }
        .empty-state.compact { padding: 20px 14px; }
        .empty-state strong { display: block; color: var(--text); }
        .empty-state p { margin: 6px 0 0; }
        .empty-state svg { width: 70px; height: 70px; color: #94a3b8; margin-bottom: 10px; }
        .qr-grid { display: grid; grid-template-columns: repeat(21, 8px); grid-auto-rows: 8px; gap: 0; width: max-content; padding: 10px; background: white; border: 1px solid var(--line); border-radius: 8px; }
        .qr-cell.on { background: #0f172a; }
        .qr-cell.off { background: #fff; }
        .print-only { display: none; }
        .receipt-subtitle { margin: 5px 0 0; }
        .receipt-detail { max-width: 960px; margin: 0 auto; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); }
        .receipt-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 24px; background: linear-gradient(135deg, #0f766e, #115e59); color: white; }
        .receipt-detail-head h3 { margin: 7px 0 2px; font-size: 25px; }
        .receipt-detail-head p { margin: 0; color: #ccfbf1; }
        .receipt-eyebrow { font-size: 11px; font-weight: 900; letter-spacing: .1em; }
        .receipt-number { flex: 0 0 auto; text-align: right; }
        .receipt-number span { display: block; color: #ccfbf1; font-size: 12px; }
        .receipt-number strong { display: block; margin-top: 4px; font-size: 22px; }
        .receipt-statuses { display: flex; gap: 8px; flex-wrap: wrap; padding: 16px 24px; border-bottom: 1px solid var(--line); }
        .receipt-review { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: end; margin: 20px 24px 8px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); }
        .receipt-review h4 { margin: 0 0 5px; }
        .receipt-review p { margin: 0; color: var(--muted); }
        .receipt-review form { margin: 0; }
        .receipt-review .receipt-reject-form { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; align-items: end; }
        .receipt-reject-form label { grid-column: 1 / -1; }
        .receipt-reject-form textarea { min-height: 68px; resize: vertical; }
        .receipt-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 8px 24px; }
        .receipt-detail-grid > div { min-width: 0; padding: 15px 0; border-bottom: 1px solid var(--line); }
        .receipt-detail-grid > div:nth-child(odd) { padding-right: 24px; }
        .receipt-detail-grid > div:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--line); }
        .receipt-detail-grid span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 12px; font-weight: 800; }
        .receipt-detail-grid strong { display: block; line-height: 1.4; overflow-wrap: anywhere; }
        .receipt-detail-grid .receipt-detail-wide { grid-column: 1 / -1; padding-inline: 0; border-left: 0; }
        .receipt-verification { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; align-items: center; margin: 24px; padding: 18px; border: 1px dashed #5eead4; border-radius: 10px; background: #f0fdfa; }
        [data-theme="dark"] .receipt-verification { background: #263a3a; }
        .receipt-verification svg { display: block; width: 140px; height: 140px; padding: 5px; background: white; }
        .receipt-verification p { margin: 7px 0 0; color: var(--muted); line-height: 1.55; }

        .boarding-pass { width: 70mm; margin: 0 auto; overflow: hidden; border: .45mm solid #000; color: #000; background: #fff; font: 9pt/1.25 Arial, sans-serif; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
        .boarding-head { display: flex; justify-content: space-between; align-items: center; padding: 4mm; }
        .boarding-head div { display: grid; gap: 1mm; }
        .boarding-head div > strong { font-size: 16pt; letter-spacing: .04em; }
        .boarding-head span, .boarding-head b { font-size: 8pt; letter-spacing: .12em; }
        .boarding-head b { padding: 2mm; border: 1.5px solid #000; font-size: 13pt; }
        .boarding-officer { display: grid; gap: 1mm; padding: 4mm; border-top: .35mm solid #000; border-bottom: .35mm solid #000; color: #000; background: #fff; text-align: center; }
        .boarding-officer small, .boarding-info small, .boarding-item > small, .boarding-gate small { font-size: 7pt; letter-spacing: .1em; }
        .boarding-officer strong { overflow-wrap: anywhere; font-size: 15pt; }
        .boarding-officer span { color: #000; font-size: 8pt; }
        .boarding-info { display: grid; grid-template-columns: repeat(2, 1fr); border-bottom: .35mm solid #000; }
        .boarding-info div { display: grid; gap: 1mm; padding: 3mm 4mm; border-right: .35mm solid #000; border-bottom: .35mm solid #000; }
        .boarding-info div:nth-child(even) { border-right: 0; }
        .boarding-info div:nth-last-child(-n+2) { border-bottom: 0; }
        .boarding-item { display: grid; gap: 1.2mm; padding: 4mm; }
        .boarding-item > strong { font-size: 13pt; overflow-wrap: anywhere; }
        .boarding-item > span { font-family: monospace; }
        .boarding-item dl { display: grid; gap: 1.5mm; margin: 2mm 0 0; }
        .boarding-item dl div { display: grid; grid-template-columns: 20mm 1fr; gap: 2mm; }
        .boarding-item dt { color: #000; }
        .boarding-item dd { margin: 0; text-align: right; font-weight: 700; overflow-wrap: anywhere; }
        .boarding-gate { display: grid; grid-template-columns: 27mm minmax(0, 1fr); align-items: center; gap: 3mm; padding: 4mm; border-top: .6mm dashed #000; }
        .boarding-qr svg { display: block; width: 26mm; height: 26mm; }
        .boarding-gate > div:last-child { display: grid; gap: 2mm; }
        .boarding-gate > div:last-child strong { font-size: 12pt; }
        .boarding-gate > div:last-child span { font-size: 8pt; }
        .boarding-pass footer { padding: 2.5mm; border-top: .35mm solid #000; text-align: center; font-size: 7pt; }
        .public-verification { width: min(760px, 100%); margin: 0 auto; }
        .verification-card { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); }
        .verification-head { position: static; z-index: auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; padding: 26px; border-bottom: 1px solid var(--line); background: var(--panel); }
        [data-theme="dark"] .verification-head { background: var(--panel); }
        .verification-head h2 { margin: 5px 0; font-size: 25px; }
        .verification-head p { margin: 0; color: var(--muted); }
        .verification-brand { color: var(--brand-dark); font-size: 12px; font-weight: 900; letter-spacing: .12em; }
        .verification-seal { flex: 0 0 auto; padding: 8px 12px; border-radius: 999px; font-size: 12px; font-weight: 900; white-space: nowrap; }
        .verification-seal.ok { background: #e4f2e9; color: #28613e; }
        .verification-seal.pending { background: #f4eed8; color: #76591e; }
        .verification-seal.rejected { background: #f7e6e8; color: #8a3039; }
        .verification-summary { margin: 20px 26px 0; padding: 15px 16px; border: 1px solid; border-radius: 10px; }
        .verification-summary.ok { border-color: #bad8c5; background: #edf6f0; color: #28613e; }
        .verification-summary.pending { border-color: #dfd0a0; background: #f8f4e7; color: #76591e; }
        .verification-summary.rejected { border-color: #e4c0c4; background: #faeff0; color: #8a3039; }
        [data-theme="dark"] .verification-summary { background: transparent; }
        .verification-summary p { margin: 5px 0 0; line-height: 1.45; }
        .verification-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 20px 26px 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--line); }
        .verification-cell { min-width: 0; padding: 14px 16px; background: var(--panel); }
        .verification-fields .verification-wide,
        .verification-fields .verification-item { grid-column: 1 / -1; }
        .verification-item { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 0; padding: 0; }
        .verification-item-name,
        .verification-item-quantity { min-width: 0; padding: 14px 16px; }
        .verification-item-name dd { overflow-wrap: anywhere; word-break: normal; }
        .verification-item-quantity { border-left: 1px solid var(--line); text-align: left; }
        .verification-item-quantity dd { overflow-wrap: anywhere; }
        .verification-fields dt { margin-bottom: 5px; color: var(--muted); font-size: 12px; font-weight: 800; }
        .verification-fields dd { margin: 0; font-weight: 800; overflow-wrap: anywhere; }
        .verification-fingerprint { display: grid; gap: 5px; margin: 20px 26px 0; padding: 15px 16px; border: 1px dashed var(--line); border-radius: 10px; text-align: center; }
        .verification-fingerprint span, .verification-fingerprint small { color: var(--muted); font-size: 11px; }
        .verification-fingerprint code { color: var(--text); font-size: 14px; font-weight: 900; letter-spacing: .06em; }
        .verification-footer { position: static; display: grid; gap: 14px; margin-top: 22px; padding: 20px 26px; border-top: 1px solid var(--line); background: #f8fafc; text-align: center; }
        [data-theme="dark"] .verification-footer { background: #25313c; }
        .verification-footer p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
        .verification-footer .actions { justify-content: center; }
        .item-image-field { display: grid; grid-template-columns: minmax(0, 1fr) 150px; align-items: start; gap: 18px; margin-top: 14px; }
        .item-image-preview { display: block; width: 150px; aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: 10px; background: #fff; object-fit: contain; }
        .item-image-remove { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 700; }
        .item-image-remove input { width: auto; }
        .eyebrow { margin: 0 0 6px; color: var(--brand-dark); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
        .item-detail-head { align-items: flex-start; }
        .item-detail-head h2 { max-width: 880px; overflow-wrap: anywhere; }
        .item-detail-code { margin: 6px 0 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; overflow-wrap: anywhere; }
        .item-detail-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 12px; }
        .item-summary-card { display: grid; min-height: 126px; padding: 18px; align-content: start; gap: 9px; }
        .item-summary-card p { margin: 0; font-size: 13px; }
        .item-summary-card > strong { font-size: 18px; line-height: 1.3; overflow-wrap: anywhere; }
        .item-summary-stock { border-top: 4px solid var(--brand); }
        .item-summary-stock > strong { color: var(--brand-dark); font-size: 28px; line-height: 1; }
        .item-summary-stock > strong span { font-size: 16px; }
        .item-summary-stock small { color: var(--muted); }
        .item-summary-badges { display: flex; gap: 7px; flex-wrap: wrap; }
        .item-access-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; width: min(820px, 100%); margin: 18px auto 28px; padding: 22px 26px; }
        .item-access-copy { min-width: 0; }
        .item-access-copy h3 { margin: 0 0 7px; font-size: 18px; }
        .item-access-copy .muted { max-width: 520px; margin: 0 0 12px; line-height: 1.5; }
        .item-access-copy a { display: block; color: var(--brand-dark); font-size: 12px; font-weight: 800; overflow-wrap: anywhere; }
        .item-access-qr { display: grid; width: 156px; height: 156px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; place-items: center; background: #fff; }
        .item-access-qr svg { display: block; width: 138px; height: 138px; }
        .item-description-card { margin: 22px 0; }
        .item-description-card > p:last-child { margin-bottom: 0; line-height: 1.6; }
        .item-detail-image-wrap { display: grid; width: min(420px, 100%); margin: 0 0 18px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; place-items: center; background: var(--panel); }
        .item-detail-image { display: block; width: 100%; max-height: 320px; object-fit: contain; }
        .catalog-head { margin-bottom: 14px; }
        .catalog-filter { display: grid; grid-template-columns: minmax(240px, 1.4fr) minmax(190px, .8fr) minmax(130px, .45fr) auto; align-items: end; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); }
        .catalog-filter .actions { flex-wrap: nowrap; }
        .catalog-result-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 22px 0 12px; }
        .catalog-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
        .catalog-card { display: flex; min-width: 0; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease; flex-direction: column; }
        .catalog-card:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(15, 23, 42, .11); }
        .catalog-image { position: relative; display: grid; width: 100%; aspect-ratio: 4 / 3; place-items: center; overflow: hidden; border-bottom: 1px solid var(--line); background: #f8fafc; color: var(--muted); }
        [data-theme="dark"] .catalog-image { background: #25313c; }
        .catalog-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
        .catalog-placeholder { display: grid; justify-items: center; gap: 8px; }
        .catalog-placeholder svg { width: 52px; height: 52px; opacity: .55; }
        .catalog-placeholder small { font-size: 12px; font-weight: 700; }
        .catalog-stock-badge { position: absolute; top: 10px; right: 10px; padding: 6px 9px; border-radius: 999px; font-size: 11px; font-weight: 900; }
        .catalog-stock-badge.low { background: #f7e6e8; color: #8a3039; }
        .catalog-body { display: flex; flex: 1; gap: 8px; padding: 16px; flex-direction: column; }
        .catalog-category { overflow: hidden; color: var(--brand-dark); font-size: 11px; font-weight: 900; letter-spacing: .04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
        .catalog-name { color: var(--text); font-size: 17px; font-weight: 900; line-height: 1.3; overflow-wrap: anywhere; }
        .catalog-code { color: var(--muted); font-family: monospace; font-size: 11px; overflow-wrap: anywhere; }
        .catalog-body > p { display: -webkit-box; min-height: 2.8em; margin: 0; overflow: hidden; color: var(--muted); font-size: 13px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
        .catalog-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
        .catalog-meta span { color: var(--muted); font-size: 12px; }
        .catalog-meta strong { white-space: nowrap; }
        .catalog-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-top: 4px; }
        .catalog-actions .button { justify-content: center; width: 100%; padding-inline: 10px; }
        .catalog-actions .button:only-child { grid-column: 1 / -1; }
        .catalog-empty { grid-column: 1 / -1; }
        .thermal-receipt {
            width: min(80mm, 100%);
            margin: 24px auto;
            padding: 7mm 6mm;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: #fff;
            color: #111827;
            font-family: "Courier New", ui-monospace, monospace;
            font-size: 12px;
            line-height: 1.35;
            box-shadow: var(--shadow);
        }
        .thermal-print-page main {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
        }
        .thermal-print-page main > .page-head,
        .thermal-print-page main > .back-row,
        .thermal-print-page main > .alert {
            width: min(720px, 100%);
        }
        .thermal-print-page main > .back-row { align-self: center; }
        .thermal-header { display: grid; gap: 3px; text-align: center; }
        .thermal-header strong { font-family: inherit; font-size: 20px; letter-spacing: .04em; }
        .thermal-header span { font-size: 10px; }
        .thermal-divider { margin: 10px 0; border-top: 1px dashed #334155; }
        .thermal-meta { display: grid; gap: 5px; margin: 0; }
        .thermal-meta > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 8px; }
        .thermal-meta dt { color: #475569; }
        .thermal-meta dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
        .thermal-item { display: grid; gap: 3px; }
        .thermal-item strong { font-size: 14px; overflow-wrap: anywhere; }
        .thermal-item span { overflow-wrap: anywhere; }
        .thermal-label { color: #475569; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
        .thermal-totals dd { font-weight: 700; }
        .thermal-notes { grid-template-columns: 1fr !important; }
        .thermal-notes dd { text-align: left; }
        .thermal-qr { display: grid; width: 100%; justify-items: center; gap: 6px; text-align: center; }
        .thermal-qr > * { margin-inline: auto; }
        .thermal-qr svg { width: 38mm; height: 38mm; }
        .thermal-qr span { font-size: 10px; }
        .thermal-footer { display: grid; gap: 4px; margin-top: 12px; text-align: center; }
        .thermal-footer span { font-size: 9px; }
        .qr-scanner { display: grid; gap: 14px; align-content: start; }
        .scanner-frame {
            position: relative;
            width: 100%;
            aspect-ratio: 4 / 3;
            overflow: hidden;
            border-radius: 8px;
            background: #0f172a;
            border: 1px solid var(--line);
        }
        .scanner-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
        .scanner-guide {
            position: absolute;
            inset: 18%;
            border: 3px solid rgba(20, 184, 166, .95);
            border-radius: 8px;
            box-shadow: 0 0 0 999px rgba(15, 23, 42, .28);
            pointer-events: none;
        }
        @media print {
            body > header, .no-print { display: none !important; }
            body { background: white; }
            main { max-width: none; margin: 0; padding: 0; }
            .card, table, form, .table-wrap { box-shadow: none; }
            .receipt-page { width: 80mm; }
            .receipt-page main { display: block; width: 80mm; margin: 0; padding: 5mm; }
            .receipt-page main > *:not(.boarding-pass) { display: none !important; }
            .receipt-page .boarding-pass { display: block !important; }
            .thermal-print-page { width: 80mm; }
            .thermal-print-page main { display: block; width: 80mm; }
            .thermal-print-page main > *:not(.thermal-receipt) { display: none !important; }
            .thermal-receipt {
                width: 80mm;
                max-width: 80mm;
                margin: 0;
                padding: 4mm;
                border: 0;
                border-radius: 0;
                box-shadow: none;
                color: #000;
                print-color-adjust: exact;
                -webkit-print-color-adjust: exact;
            }
            .thermal-divider { border-color: #000; }
            .thermal-meta dt, .thermal-label { color: #000; }
        }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                scroll-behavior: auto !important;
                animation-duration: .01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: .01ms !important;
            }
        }
        .logout-form { padding: 0; border: 0; box-shadow: none; background: transparent; }
        @media (max-width: 1400px) {
            .catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        }
        @media (max-width: 1180px) {
            .topbar { gap: 10px; padding-inline: 16px; }
            .brand { flex-basis: 250px; min-width: 185px; }
            .brand small { max-width: 220px; font-size: 11px; }
            .menu-link, .button { min-height: 36px; padding: 8px 10px; font-size: 14px; }
            .profile-card { min-width: 150px; }
            .profile-text strong { max-width: 115px; }
            .icon { width: 15px; height: 15px; margin-right: 6px; }
            .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        }
        @media (max-width: 1040px) {
            .brand { flex-basis: auto; min-width: 150px; }
            .brand small { display: none; }
            .brand h1 { font-size: 17px; }
            .profile-text strong, .profile-text span { display: none; }
            .profile-card { min-width: 0; }
            .dashboard-analytics { grid-template-columns: 1fr; }
            .dashboard-analytics > .card:last-child:nth-child(odd) { grid-column: auto; }
        }
        @media (max-width: 900px) {
            .item-code-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
            .topbar { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; min-height: 0; }
            .brand { min-width: 0; }
            .brand small { display: none; }
            .menu-button { display: inline-flex; align-items: center; justify-content: center; grid-column: 1; grid-row: 1; }
            .brand { grid-column: 2; grid-row: 1; }
            .profile-menu { grid-column: 3; grid-row: 1; }
            .main-menu {
                display: none;
                grid-column: 1 / -1;
                width: 100%;
                flex: none;
                padding: 12px;
                background: white;
                border: 1px solid var(--line);
                border-radius: 8px;
                box-shadow: var(--shadow);
            }
            .menu-toggle:checked ~ .main-menu { display: grid; grid-template-columns: 1fr; }
            .main-menu .menu-link, .main-menu .button { justify-content: flex-start; width: 100%; box-shadow: none; }
            .nav-dropdown { width: 100%; }
            .nav-panel { position: static; box-shadow: none; border: 0; padding: 4px 0 0 18px; }
            .nav-dropdown > summary { width: 100%; }
            .profile-card { justify-content: flex-end; min-width: 0; }
            .profile-text { text-align: left; }
            .profile-text strong, .profile-text span { display: none; }
            .profile-panel { right: 0; }
        }
        @media (max-width: 760px) {
            .reference-import-grid { grid-template-columns: 1fr; }
            .data-exchange-card { grid-template-columns: 1fr; }
            .topbar { padding: 10px 14px; }
            main { margin-top: 18px; padding: 0 14px 34px; }
            .brand h1 { font-size: 16px; }
            .brand-mark { width: 36px; height: 36px; }
            .menu-link, .button { width: auto; }
            .page-head { align-items: flex-start; flex-direction: column; }
            .page-head .button { width: 100%; }
            .filter-form .button, form .button { width: 100%; }
            .filter-panel:not([open]) { padding: 14px 16px; }
            .actions { width: 100%; }
            .auth-shell { grid-template-columns: 1fr; margin-top: 16px; }
            .auth-intro { padding: 22px; }
            .auth-intro h2 { font-size: 21px; }
            body.login-page {
                background: linear-gradient(160deg, #edf4f5, #f8fafc 58%, #e8f1f0);
            }
            body.login-page::before { width: 230px; bottom: -46px; left: -70px; opacity: .3; }
            [data-theme="dark"] body.login-page::before { opacity: .2; }
            .login-decoration-lamps { top: 68px; right: -34px; width: 180px; opacity: .2; }
            .login-decoration-boxes { right: -72px; bottom: -42px; width: 210px; opacity: .24; }
            .login-decoration-trolley,
            .login-decoration-pallet,
            .login-decoration-safety { display: none; }
            .login-page .login-auth-shell { min-height: auto; }
            .login-page .auth-form-card { padding: 22px; }
            .auth-visual { width: min(190px, 68%); }
            .grid { grid-template-columns: 1fr; }
            .item-code-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .session-modal { padding: 18px; }
            .session-modal-head { flex-direction: column; }
            .session-summary-grid { grid-template-columns: 1fr; }
            .dashboard-split { grid-template-columns: 1fr; }
            .report-filter-grid { grid-template-columns: 1fr; }
            .report-trend-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .dashboard-analytics { grid-template-columns: 1fr; }
            .attention-item { align-items: flex-start; flex-direction: column; }
            .quick-actions { grid-template-columns: 1fr; }
            .mini-bars { gap: 6px; }
            th, td { padding: 12px 10px; }
            .table-wrap { overflow-x: auto; }
            .receipt-detail-head { flex-direction: column; padding: 20px; }
            .receipt-number { text-align: left; }
            .receipt-statuses { padding-inline: 20px; }
            .receipt-review { grid-template-columns: 1fr; margin-inline: 20px; }
            .receipt-review .receipt-reject-form { grid-template-columns: 1fr; }
            .receipt-detail-grid { grid-template-columns: 1fr; padding-inline: 20px; }
            .receipt-detail-grid > div:nth-child(odd),
            .receipt-detail-grid > div:nth-child(even) { padding-inline: 0; border-left: 0; }
            .receipt-verification { grid-template-columns: 1fr; justify-items: center; margin: 20px; text-align: center; }
            .verification-head { flex-direction: column; padding: 20px; }
            .verification-summary, .verification-fields, .verification-fingerprint { margin-inline: 20px; }
            .verification-fields { grid-template-columns: 1fr; }
            .verification-fields .verification-cell { grid-column: 1; }
            .verification-item { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .verification-footer { padding-inline: 20px; }
            .catalog-filter { grid-template-columns: 1fr; }
            .catalog-filter .actions { width: 100%; }
            .catalog-result-head { align-items: flex-start; flex-direction: column; gap: 4px; }
            .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .notification-panel { right: 0; }
            .notification-toolbar { width: 100%; justify-content: flex-start; }
            .notification-filter-form { grid-template-columns: 1fr 1fr; flex-basis: 100%; }
            .notification-filter-form input { grid-column: 1 / -1; }
            .notification-read-all-form { width: auto; }
            .notification-list-columns { display: none; }
            .notification-item { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 13px 14px; }
            .notification-time { grid-column: 1; grid-row: 1; display: flex; gap: 6px; }
            .notification-type { grid-column: 1; grid-row: 2; }
            .notification-content { grid-column: 1; grid-row: 3; }
            .notification-read-status { grid-column: 2; grid-row: 1; }
            .notification-open-arrow { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
            .notification-title-row > strong,
            .notification-message { white-space: normal; }
        }

        @media (max-width: 520px) {
            .report-trend-fields { grid-template-columns: 1fr; }
            .detail-summary-grid { grid-template-columns: 1fr; }
            .detail-summary-card { min-height: 0; }
            .detail-data-table th { width: 38%; }
            .detail-data-table th,
            .detail-data-table td { padding: 10px; }
            .document-card { padding: 17px; }
            .document-head { align-items: flex-start; flex-direction: column; }
            .document-summary-grid { grid-template-columns: 1fr; }
            .document-summary-grid > div { border-right: 0; }
            .document-summary-grid > div:nth-last-child(-n + 2) { border-bottom: 1px solid var(--line); }
            .document-summary-grid > div:last-child { border-bottom: 0; }
            .document-qr-row { grid-template-columns: 1fr; text-align: center; }
            .document-qr { margin-inline: auto; }
            .item-detail-head .actions,
            .item-detail-head .actions .button { width: 100%; }
            .item-detail-summary { grid-template-columns: 1fr; }
            .item-summary-card { min-height: 0; }
            .item-access-card { grid-template-columns: 1fr; padding: 18px; text-align: center; }
            .item-access-copy .muted { margin-inline: auto; }
            .item-access-qr { margin-inline: auto; }
            .notification-filter-form { grid-template-columns: 1fr; }
            .notification-filter-form input { grid-column: auto; }
            .notification-filter-form .button,
            .notification-read-all-form,
            .notification-read-all-form .button { width: 100%; }
            .verification-item { grid-template-columns: 1fr; align-items: start; gap: 0; }
            .verification-item-quantity { border-top: 1px solid var(--line); border-left: 0; text-align: left; }
            .item-image-field { grid-template-columns: 1fr; }
            .item-image-preview { width: 100%; max-width: 220px; }
            .catalog-grid { grid-template-columns: 1fr; }
        }
        .selection-information {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin: 14px 0 18px;
            padding: 14px 16px;
            border: 1px solid var(--line);
            border-left: 4px solid var(--brand);
            border-radius: 10px;
            background: var(--panel);
        }
        .selection-information[hidden] { display: none; }
        .selection-information span { color: var(--muted); }
        .selection-information strong { text-align: right; }
        .table-cell-meta {
            display: block;
            margin-top: 4px;
            color: var(--muted);
            font-size: 13px;
            font-weight: 400;
            line-height: 1.4;
        }
        .icon-action {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            min-width: 42px;
            height: 42px;
            padding: 0;
            border: 0;
            border-radius: 10px;
            color: #fff;
            background: #435466;
            box-shadow: 0 6px 14px rgba(15, 23, 42, .12);
            cursor: pointer;
            transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
        }
        .icon-action:hover, .icon-action:focus-visible {
            transform: translateY(-2px);
            box-shadow: 0 10px 18px rgba(15, 23, 42, .2);
            filter: brightness(1.08);
        }
        .icon-action svg { width: 21px; height: 21px; flex: none; }
        .icon-action--incoming { background: #347a55; }
        .icon-action--outgoing, .icon-action--danger { background: #bd555b; }
        .icon-action--edit { background: #9a7435; }
        .global-tooltip {
            position: fixed;
            z-index: 2147483647;
            width: max-content;
            max-width: min(220px, calc(100vw - 16px));
            padding: 6px 9px;
            border-radius: 6px;
            color: #fff;
            background: #0f172a;
            font-size: 12px;
            font-weight: 600;
            line-height: 1.25;
            text-align: center;
            pointer-events: none;
            box-shadow: 0 8px 22px rgba(15, 23, 42, .28);
            animation: tooltip-in .14s ease both;
        }
        .global-tooltip[hidden] { display: none; }
        @keyframes tooltip-in {
            from { opacity: 0; transform: translateY(3px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
        td.actions .icon-action { width: 42px; max-width: 42px; }
        .catalog-actions { display: flex; justify-content: center; }
        .catalog-actions .icon-action { width: 44px; min-width: 44px; }
        .transaction-steps { align-items: start; }
        .transaction-step { position: relative; }
        .transaction-step-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            margin: 0 6px 7px 0;
            border-radius: 50%;
            color: #fff;
            background: var(--brand);
            font-size: 12px;
            font-weight: 800;
            vertical-align: middle;
        }
        .transaction-step > label { display: inline-block; }
        .transaction-step:has(select:disabled) .transaction-step-number,
        .transaction-step:has(input:disabled) .transaction-step-number { background: #94a3b8; }
        .transaction-summary {
            margin: 18px 0;
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: 12px;
            background: var(--panel);
        }
        .transaction-summary[hidden] { display: none; }
        .transaction-summary-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 15px 18px;
            border-bottom: 1px solid var(--line);
            background: color-mix(in srgb, var(--brand) 8%, var(--panel));
        }
        .transaction-summary-head > div { min-width: 0; }
        .transaction-summary-head span:first-child,
        .transaction-summary-grid span { display: block; color: var(--muted); font-size: 13px; }
        .transaction-summary-head strong { display: block; margin-top: 3px; overflow-wrap: anywhere; }
        .transaction-summary-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
        .transaction-summary-grid > div { padding: 15px 18px; border-right: 1px solid var(--line); }
        .transaction-summary-grid > div:last-child { border-right: 0; }
        .transaction-summary-grid strong { display: block; margin-top: 5px; overflow-wrap: anywhere; }
        .transaction-summary > .muted { margin: 0; padding: 0 18px 15px; }
        @media (max-width: 760px) {
            .transaction-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .transaction-summary-grid > div:nth-child(2) { border-right: 0; }
            .transaction-summary-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
        }
        @media (max-width: 480px) {
            .transaction-summary-head { align-items: flex-start; flex-direction: column; }
            .transaction-summary-grid { grid-template-columns: 1fr; }
            .transaction-summary-grid > div { border-right: 0; border-bottom: 1px solid var(--line); }
            .transaction-summary-grid > div:last-child { border-bottom: 0; }
        }
        .filter-visibility {
            width: min(100%, 280px);
            margin-top: 14px;
        }
        :where(a, button, summary, [tabindex]):focus-visible {
            outline: 3px solid rgba(25, 118, 111, .22);
            outline-offset: 2px;
        }

        /* Softer night palette: reduce glare while preserving status meaning. */
        [data-theme="dark"] label { color: #b8c2cb; }
        [data-theme="dark"] input,
        [data-theme="dark"] select,
        [data-theme="dark"] textarea,
        [data-theme="dark"] .searchable-select-trigger { border-color: var(--line); }
        [data-theme="dark"] input::placeholder,
        [data-theme="dark"] textarea::placeholder { color: #7f8c98; }
        [data-theme="dark"] input:focus,
        [data-theme="dark"] select:focus,
        [data-theme="dark"] textarea:focus,
        [data-theme="dark"] .searchable-select-trigger:focus { box-shadow: 0 0 0 3px rgba(76, 159, 151, .18); }
        [data-theme="dark"] .menu-link:hover,
        [data-theme="dark"] .menu-link.active { background: #2b4142; color: #9acbc6; }
        [data-theme="dark"] .menu-link.secondary,
        [data-theme="dark"] .button.secondary { background: #465461; color: #d9dee3; }
        [data-theme="dark"] .notification-bell { background: #27333e; color: #aeb9c3; }
        [data-theme="dark"] .notification-bell:hover,
        [data-theme="dark"] .notification-bell.active { background: #2d4645; color: #9dc5c0; }
        [data-theme="dark"] .badge.low,
        [data-theme="dark"] .badge.rejected,
        [data-theme="dark"] .catalog-stock-badge.low,
        [data-theme="dark"] .nav-badge { background: #4b3337; color: #d6a1a7; }
        [data-theme="dark"] .badge.ok,
        [data-theme="dark"] .badge.approved { background: #30473c; color: #a6c8b3; }
        [data-theme="dark"] .badge.in { background: #334457; color: #adc0d6; }
        [data-theme="dark"] .badge.out { background: #4a3b31; color: #d2b195; }
        [data-theme="dark"] .badge.role { background: #304746; color: #a4c7c2; }
        [data-theme="dark"] .badge.pending { background: #4a432f; color: #d1be8d; }
        [data-theme="dark"] .badge.fulfilled { background: #30454d; color: #a7c2ca; }
        [data-theme="dark"] .badge.cancelled { background: #4b3337; color: #d6a1a7; }
        [data-theme="dark"] .badge.corrected { background: #42364e; color: #c8afd9; }
        [data-theme="dark"] .alert.success { border-color: #486958; background: #30473c; color: #b3cfbd; }
        [data-theme="dark"] .alert.error { border-color: #70484d; background: #4b3337; color: #ddb0b5; }
        [data-theme="dark"] .alert.correction-notice { border-color: #665276; background: #3d3347; color: #ccb8db; }
        [data-theme="dark"] .verification-seal.ok { background: #30473c; color: #a6c8b3; }
        [data-theme="dark"] .verification-seal.pending { background: #4a432f; color: #d1be8d; }
        [data-theme="dark"] .verification-seal.rejected { background: #4b3337; color: #d6a1a7; }
        [data-theme="dark"] .verification-summary.ok { border-color: #486958; color: #b3cfbd; }
        [data-theme="dark"] .verification-summary.pending { border-color: #716642; color: #d1be8d; }
        [data-theme="dark"] .verification-summary.rejected { border-color: #70484d; color: #ddb0b5; }
        [data-theme="dark"] .icon-action { background: #4a5865; box-shadow: 0 5px 12px rgba(7, 12, 18, .14); }
        [data-theme="dark"] .icon-action--incoming { background: #47765b; }
        [data-theme="dark"] .icon-action--outgoing,
        [data-theme="dark"] .icon-action--danger { background: #925b5b; }
        [data-theme="dark"] .icon-action--edit { background: #8b7048; }
        [data-theme="dark"] .global-tooltip { background: #2b3742; color: #d9dee3; }
        [data-theme="dark"] .transaction-summary-head { background: #263a3a; }
        [data-theme="dark"] .attention-item,
        [data-theme="dark"] .quick-action,
        [data-theme="dark"] .session-summary-item { background: #26323d; }
        [data-theme="dark"] .quick-action:hover { border-color: #5f918c; background: #2a3c3d; }
        [data-theme="dark"] .help-dot { background: #304746; color: #a4c7c2; }