@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Regular.ttf') format('truetype');
    font-weight: 400 700; font-style: normal; font-display: swap;
}

:root {
    color-scheme: light;
    --bg: #eaeef4; --surface: #ffffff; --surface-2: #f6f8fb;
    --stripe: color-mix(in srgb, var(--surface-2) 55%, transparent);
    --border: #d8dfe9; --border-strong: #c5cedb;
    --text: #16202d; --muted: #5c6b7e; --faint: #8a97a8;
    --accent: #1b4d8f; --accent-strong: #163f76; --on-accent: #ffffff;
    --accent-soft: rgba(27, 77, 143, .085); --accent-line: rgba(27, 77, 143, .22);
    --seal: #b08319; --seal-soft: rgba(176, 131, 25, .14);
    --ok: #1f7a43; --ok-soft: rgba(31, 122, 67, .12); --ok-line: color-mix(in srgb, var(--ok) 35%, transparent);
    --bad: #bb2d2d; --bad-soft: rgba(187, 45, 45, .10); --bad-line: color-mix(in srgb, var(--bad) 32%, transparent);
    --warn: #9a6310; --warn-soft: rgba(154, 99, 16, .12); --warn-line: color-mix(in srgb, var(--warn) 35%, transparent);
    --role-chief: #6d3fc4; --role-chief-soft: rgba(109, 63, 196, .14);
    --role-net: #0c6f86; --role-net-soft: rgba(12, 111, 134, .14);
    --hover: rgba(20, 35, 60, .045); --track: rgba(20, 35, 60, .09); --shadow: rgba(22, 40, 70, .12);
    --side-bg: #274a40; --side-bg-2: #214138; --side-text: #edf3ef; --side-muted: #a6c5b6; --side-faint: #779e8b;
    --side-border: rgba(255, 255, 255, .08); --side-hover: rgba(255, 255, 255, .055);
    --side-active-bg: rgba(205, 168, 58, .14); --side-active-text: #ffffff; --side-marker: #c8a448; --side-brand: #ffffff;
    --r: 6px; --r-sm: 5px; --rail: 238px;
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b1813; --surface: #102019; --surface-2: #16291f;
    --border: #213a30; --border-strong: #2c4a3b;
    --text: #e3ebe5; --muted: #94a99c; --faint: #6d8478;
    --accent: #5690df; --accent-strong: #6fa3ec; --on-accent: #08120e;
    --accent-soft: rgba(86, 144, 223, .14); --accent-line: rgba(86, 144, 223, .28);
    --seal: #d9b757; --seal-soft: rgba(217, 183, 87, .16);
    --ok: #46c47b; --ok-soft: rgba(70, 196, 123, .15);
    --bad: #e9645f; --bad-soft: rgba(233, 100, 95, .15);
    --warn: #e0a23c; --warn-soft: rgba(224, 162, 60, .15);
    --role-chief: #b89bf0; --role-chief-soft: rgba(184, 155, 240, .16);
    --role-net: #5fd0e6; --role-net-soft: rgba(95, 208, 230, .16);
    --hover: rgba(255, 255, 255, .045); --track: rgba(255, 255, 255, .07); --shadow: rgba(0, 0, 0, .55);
    --side-bg: #18352c; --side-bg-2: #133026; --side-text: #e7f1eb; --side-muted: #9cc0ac; --side-faint: #6a9482;
    --side-border: rgba(255, 255, 255, .08); --side-hover: rgba(255, 255, 255, .05);
    --side-active-bg: rgba(216, 189, 94, .15); --side-active-text: #ffffff; --side-marker: #d8bd5e; --side-brand: #f4faf6;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    background: var(--bg); color: var(--text);
    font-size: 14px; line-height: 1.7; -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent-soft); }
body.nav-open { overflow: hidden; }

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

.topbar, .hamburger, .nav-backdrop { display: none; }

.sidebar {
    width: var(--rail); flex-shrink: 0; display: flex; flex-direction: column;
    background: var(--side-bg); color: var(--side-text);
    border-inline-start: 1px solid var(--side-border);
    padding: 0 0 14px; position: sticky; top: 0; align-self: flex-start;
    height: 100vh; overflow-y: auto;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 8px; }

.brand {
    display: flex; flex-direction: row; align-items: center; gap: 11px;
    padding: 18px 16px 16px; margin-bottom: 8px; background: var(--side-bg-2);
    border-bottom: 1px solid var(--side-border); border-top: 2px solid var(--side-marker); position: relative;
}
.brand-logo { flex-shrink: 0; display: inline-flex; line-height: 0; width: 38px; height: 38px; align-items: center; justify-content: center; background: #fff; border-radius: 7px; padding: 5px; }
.brand-img { height: 26px; width: auto; display: block; }
.brand-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brand-title { font-size: 12.5px; font-weight: 700; color: var(--side-brand); line-height: 1.5; letter-spacing: .1px; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.brand-acr { direction: ltr; font-size: 9.5px; font-weight: 800; letter-spacing: 1px; color: var(--side-marker); line-height: 1.5; border: 1px solid color-mix(in srgb, var(--side-marker) 45%, transparent); border-radius: 4px; padding: 1px 5px; }
.brand small { color: var(--side-muted); font-size: 10.5px; line-height: 1.6; }

.nav { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px 4px; }
.nav-item { display: block; padding: 9px 12px; border-radius: var(--r-sm); color: var(--side-text); text-decoration: none; font-size: 13px; line-height: 1.4; border-inline-start: 3px solid transparent; transition: background .14s ease, color .14s ease; }
.nav-item:hover { background: var(--side-hover); }
.nav-item.active { background: var(--side-active-bg); border-inline-start-color: var(--side-marker); color: var(--side-active-text); font-weight: 700; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.nav-group { display: block; margin-top: 12px; }
.nav-group > summary {
    list-style: none; display: flex; align-items: center; justify-content: space-between;
    padding: 9px 12px 7px; margin-bottom: 4px; border-radius: var(--r-sm);
    border-top: 1px solid var(--side-border); border-inline-start: 3px solid transparent;
    font-size: 13px; font-weight: 600; color: var(--side-text);
    cursor: pointer; transition: background .14s ease, color .14s ease;
}
.nav-group > summary:hover { background: var(--side-hover); }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::after { content: ""; width: 6px; height: 6px; border-inline-end: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-bottom: 2px; transition: transform .18s ease; opacity: .8; }
.nav-group[open] > summary::after { transform: rotate(-135deg); margin-bottom: -2px; }

.nav-sub { position: relative; display: block; padding: 8px 28px 8px 12px; margin: 1px 0; color: var(--side-muted); text-decoration: none; font-size: 12.5px; line-height: 1.45; border-inline-start: 2px solid transparent; border-radius: 0 var(--r-sm) var(--r-sm) 0; transition: color .14s ease, background .14s ease, border-color .14s ease; }
.nav-sub::before { content: ""; position: absolute; inset-inline-start: 15px; top: 50%; width: 4px; height: 4px; border-radius: 1px; background: var(--side-faint); opacity: .75; transform: translateY(-50%); transition: background .14s ease, opacity .14s ease; }
.nav-sub:hover { background: var(--side-hover); color: var(--side-text); }
.nav-sub:hover::before { background: var(--side-muted); opacity: 1; }
.nav-sub.active { background: var(--side-active-bg); color: var(--side-active-text); font-weight: 700; border-inline-start-color: var(--side-marker); }
.nav-sub.active::before { background: var(--side-marker); opacity: 1; }
.nav-sub-list { overflow: hidden; }

.content { flex: 1; min-width: 0; padding: 26px 28px; max-width: 1500px; }
@media (prefers-reduced-motion: no-preference) {
    .content { animation: occ-page .3s ease-out; }
    @keyframes occ-page { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

.side-foot { margin-top: auto; padding: 14px 12px 0; border-top: 1px solid var(--side-border); }
.side-clock { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 12px; border: 1px solid var(--side-border); border-radius: var(--r-sm); background: var(--side-bg-2); }
.side-clock-chip { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--side-marker); background: var(--side-active-bg); }
.side-clock-body { display: flex; flex-direction: column; line-height: 1.45; min-width: 0; }
.side-clock-date { font-size: 12.5px; font-weight: 700; color: var(--side-text); white-space: nowrap; }
.side-clock-time { font-size: 12px; color: var(--side-muted); font-variant-numeric: tabular-nums; direction: ltr; letter-spacing: .3px; }
.side-version { text-align: center; font-size: 11px; color: var(--side-muted); letter-spacing: .3px; padding: 10px 10px 2px; }
.side-brand { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--side-border); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.side-brand-cap { direction: ltr; font-size: 9px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--side-muted); opacity: .75; }
.side-brand-card { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 150px; padding: 12px 18px; background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(0, 0, 0, .04); transition: transform .16s ease, box-shadow .16s ease; }
.side-brand-card:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(0, 0, 0, .04); }
.side-brand-card img { display: block; width: 100%; height: auto; max-height: 46px; object-fit: contain; }
.side-account { display: flex; align-items: center; gap: 10px; padding: 9px 10px; margin-bottom: 8px; border: 1px solid var(--side-border); border-radius: var(--r-sm); background: var(--side-bg-2); }
.side-avatar { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: #1c1505; background: linear-gradient(135deg, var(--side-marker), #b88f30); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.side-account-meta { display: flex; flex-direction: column; line-height: 1.4; min-width: 0; }
.side-account-name { font-size: 13px; font-weight: 700; color: var(--side-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-account-status { font-size: 11px; color: var(--side-muted); display: flex; align-items: center; gap: 5px; }
.side-account-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); flex-shrink: 0; }
.logout-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--side-border); background: transparent; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--side-muted); padding: 9px 12px; border-radius: var(--r-sm); cursor: pointer; transition: background .14s ease, border-color .14s ease, color .14s ease; }
.logout-btn .logout-ic { width: 15px; height: 15px; flex-shrink: 0; }
.logout-btn:hover { background: rgba(201, 64, 58, .15); border-color: rgba(201, 64, 58, .45); color: #ff9a94; }
.theme-toggle { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--side-border); background: transparent; color: var(--side-muted); font: inherit; font-size: 12.5px; font-weight: 500; padding: 9px 12px; border-radius: var(--r-sm); cursor: pointer; margin-bottom: 10px; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.theme-toggle:hover { border-color: var(--side-marker); color: var(--side-text); background: var(--side-hover); }
.theme-toggle .ti { color: var(--side-marker); flex-shrink: 0; }
.theme-toggle .ti-sun { display: none; }
[data-theme="dark"] .theme-toggle .ti-moon { display: none; }
[data-theme="dark"] .theme-toggle .ti-sun { display: inline; }

@media (max-width: 760px) {
    .layout { flex-direction: column; }
    .topbar { display: flex; align-items: center; gap: 12px; height: 58px; box-sizing: border-box; padding: 9px 14px; background: var(--side-bg); color: var(--side-text); border-bottom: 2px solid var(--side-marker); position: sticky; top: 0; z-index: 70; }
    .topbar-title { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--side-brand); }
    .topbar-logo { height: 26px; width: auto; display: block; background: #fff; border-radius: 5px; padding: 3px; }
    .hamburger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 0 9px; border: 1px solid var(--side-border); border-radius: var(--r-sm); background: var(--side-hover); cursor: pointer; }
    .hamburger span { display: block; width: 100%; height: 2px; background: var(--side-text); border-radius: 2px; transition: transform .22s ease, opacity .18s ease; }
    body.nav-open .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    body.nav-open .hamburger span:nth-child(2) { opacity: 0; }
    body.nav-open .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .sidebar { position: fixed; top: 0; bottom: 0; right: 0; width: min(82vw, 290px); height: 100vh; padding: 0 0 18px; border-inline-start: 1px solid var(--side-border); box-shadow: -14px 0 40px rgba(0, 0, 0, .4); transform: translateX(100%); transition: transform .25s ease; overflow-y: auto; z-index: 60; }
    .sidebar .brand { display: flex; padding-top: 18px; }
    body.nav-open .sidebar { transform: translateX(0); }
    .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(6, 14, 11, .55); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; z-index: 50; }
    body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }
    .content { padding: 16px 14px; }
}

.field { width: 100%; padding: 10px 12px; margin-bottom: 14px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: inherit; outline: none; transition: border-color .12s ease, box-shadow .12s ease; }
.field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field::placeholder { color: var(--faint); }
.field.is-invalid { border-color: var(--bad); }
.field.is-invalid:focus { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.field-error { display: none; margin: -10px 0 12px; font-size: 12px; line-height: 1.6; color: var(--bad); }
.field-error.show { display: block; }
.form-error { display: none; margin-bottom: 14px; padding: 10px 12px; border: 1px solid var(--bad-line); border-radius: var(--r-sm); background: var(--bad-soft); color: var(--bad); font-size: 12.5px; line-height: 1.8; }
.form-error.show { display: block; }
.color-field { width: 48px; height: 38px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; }
.search-input { width: 100%; max-width: 360px; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: inherit; outline: none; transition: border-color .12s ease, box-shadow .12s ease; }
.search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search-input::placeholder { color: var(--faint); }
.filter-select { padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: inherit; outline: none; cursor: pointer; max-width: 230px; transition: border-color .12s ease; }
.filter-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.select-sm { padding: 5px 8px; font-size: 12px; font-weight: 600; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font-family: inherit; cursor: pointer; outline: none; transition: border-color .12s ease, box-shadow .12s ease; }
.select-sm:hover { border-color: var(--accent); }
.select-sm:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.search-input, .filter-select, .jdate-input, .ss-input {
    height: calc(1.7em + 20px);
    box-sizing: border-box;
}
.form-label { display: block; font-size: 12.5px; margin: 0 0 6px; color: var(--muted); font-weight: 600; }
.form-label .opt { color: var(--faint); font-weight: 400; }
.check-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.check-row input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.check-row label { font-size: 13px; cursor: pointer; user-select: none; }
.jdate-input { padding: 9px 12px; margin-bottom: 0 !important; width: auto; max-width: 190px; cursor: pointer; background: var(--surface); }
@media (max-width: 760px) {
    .toolbar .filter-select { flex: 1 1 calc(50% - 4px); max-width: none; }
    .jdate-input { flex: 1 1 calc(50% - 4px); max-width: none; }
}

.page-title { font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 16px; }
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar-spacer { flex: 1; }
.toolbar-dates { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.toolbar-dates .jdate-input { max-width: 170px; }
.toolbar-exports { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; }
@media (max-width: 767px) {
    .toolbar { gap: 8px; }
    .toolbar-spacer { display: none; }
    .toolbar-dates { flex: 1 1 100%; }
    .toolbar-dates .jdate-input { max-width: none; }
    .toolbar-exports { flex-wrap: wrap; gap: 8px; }
}

.card, .table-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; box-shadow: 0 1px 2px rgba(22, 40, 70, .04); }
@media (max-width: 767px) { .table-card { overflow-x: auto; } }
.table { width: 100%; border-collapse: collapse; }
.table th {
    text-align: right; padding: 11px 16px; background: var(--surface-2); color: var(--muted);
    font-size: 12px; font-weight: 700; line-height: 1.35; letter-spacing: .2px;
    white-space: nowrap; border-bottom: 1px solid var(--border-strong);
}
.table td { padding: 11px 16px; font-variant-numeric: tabular-nums; }
.table tbody tr { border-bottom: 1px solid var(--border); transition: background-color .12s ease; }
.table tbody tr:last-child { border-bottom: 0; }
.table tbody tr:nth-child(even) { background: var(--stripe); }
.table tbody tr:hover { background: var(--accent-soft); }
.empty, .table td.empty { padding: 30px 16px; text-align: center; color: var(--muted); }
.table td.total, .table th.total { border-top: 2px solid var(--border-strong); background: var(--accent-soft); font-weight: 700; }
.table .col-ops { width: 1%; white-space: nowrap; }

.btn, .btn-primary, .btn-danger, .btn-soft, .btn-ok, .btn-edit, .btn-delete, .btn-toggle, .pager-btn {
    display: inline-flex; align-items: center; justify-content: center;
    font: inherit; cursor: pointer; border-radius: var(--r-sm);
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
    padding: 9px 16px; transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}
.btn:hover { background: var(--hover); border-color: var(--accent); }
.btn-primary { padding: 9px 18px; font-weight: 600; white-space: nowrap; border-color: var(--accent-strong); background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-strong); box-shadow: 0 2px 8px var(--accent-soft); }
.btn-danger { font-weight: 600; border-color: color-mix(in srgb, var(--bad) 55%, transparent); background: var(--bad); color: #fff; }
.btn-danger:hover { filter: brightness(1.1); }

.btn-soft { padding: 9px 18px; font-weight: 600; white-space: nowrap; border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.btn-soft:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.btn-ok { font-weight: 600; white-space: nowrap; border-color: var(--ok-line); background: var(--ok-soft); color: var(--ok); }
.btn-ok:hover { background: color-mix(in srgb, var(--ok) 18%, transparent); }

.btn-sm { padding: 5px 12px; font-size: 12px; font-weight: 600; }
.btn-block { width: 100%; }

.btn-edit, .btn-delete, .btn-toggle { padding: 5px 12px; font-size: 12px; font-weight: 600; }
.btn-toggle { margin-inline-end: 6px; }

.btn-toggle-off { border-color: var(--warn); color: var(--warn); }
.btn-toggle-off:hover { background: var(--warn-soft); }

.btn-toggle-on { border-color: color-mix(in srgb, var(--ok) 55%, transparent); color: var(--ok); }
.btn-toggle-on:hover { background: var(--ok-soft); }
.btn-edit { color: var(--accent); margin-inline-end: 6px; }
.btn-edit:hover { background: var(--accent-soft); border-color: var(--accent); }
.btn-delete { border-color: var(--bad-line); background: var(--bad-soft); color: var(--bad); }
.btn-delete:hover { background: color-mix(in srgb, var(--bad) 18%, transparent); }
.btn:disabled, .btn-primary:disabled, .btn-danger:disabled,
.btn-soft:disabled, .btn-ok:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn-soft:disabled:hover { background: var(--accent-soft); }
.btn-ok:disabled:hover { background: var(--ok-soft); }
.pager-btn { padding: 7px 18px; font-size: 13px; }
.pager-btn:enabled:hover { border-color: var(--accent); color: var(--accent); }
.pager-btn:disabled { opacity: .45; cursor: default; }
@media (max-width: 767px) { .btn-block-mobile { width: 100%; } }

.setting-form { max-width: 780px; }
.setting-card { padding: 20px 22px; }
.setting-foot { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.setting-foot p { flex: 1; font-size: 12px; line-height: 1.7; color: var(--muted); }
.setting-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.setting-group + .setting-group { margin-top: 22px; }
.setting-title { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--accent); font-size: 12.5px; font-weight: 700; letter-spacing: .2px; }
.setting-title::before { content: ""; display: inline-block; width: 4px; height: 13px; border-radius: 2px; background: var(--accent); }
.setting-row { display: flex; align-items: center; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.setting-row:last-child { border-bottom: 0; }
.setting-main { flex: 1 1 auto; min-width: 0; }
.setting-main label { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.5; cursor: pointer; }
.setting-hint { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.5; color: var(--faint); }
.setting-control { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; }
.setting-range { min-width: 64px; text-align: end; font-size: 11px; color: var(--faint); white-space: nowrap; }
.setting-unit { min-width: 40px; text-align: start; font-size: 12.5px; color: var(--muted); }
.setting-control .field { width: 92px; margin-bottom: 0; text-align: center; }
@media (max-width: 560px) {
    .setting-row { flex-wrap: wrap; row-gap: 8px; }
    .setting-main, .setting-control { flex: 1 1 100%; }
    .setting-control { justify-content: flex-end; }
    .setting-range { order: -1; }
}

.pill { display: inline-block; padding: 2px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pill-ok { background: var(--ok-soft); color: var(--ok); }
.pill-bad { background: var(--bad-soft); color: var(--bad); }
.pill-warn { background: var(--warn-soft); color: var(--warn); }
.pill-accent { background: var(--accent-soft); color: var(--accent); }
.pill-chief { background: var(--role-chief-soft); color: var(--role-chief); }
.pill-net { background: var(--role-net-soft); color: var(--role-net); }
.pill-muted { background: var(--track); color: var(--muted); }

.meter { height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; }
.meter > span { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--accent); transition: width .2s ease, background-color .2s ease; }
.meter-ok > span { background: var(--ok); }
.meter-bad > span { background: var(--bad); }
.meter-idle > span { background: var(--track); }

.alloc-list { display: flex; flex-direction: column; gap: 8px; }
.alloc-scroll { max-height: 380px; overflow-y: auto; padding-inline-end: 4px; }
.alloc-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); }
.alloc-row-reserve { background: var(--role-chief-soft); }
.alloc-row-wallet { background: var(--warn-soft); }
.alloc-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--accent); }
.alloc-row-reserve .alloc-dot { background: var(--role-chief); }
.alloc-row-wallet .alloc-dot { background: var(--warn); }
.alloc-name { flex: 1; min-width: 130px; font-size: 13px; }
.alloc-pct { display: inline-flex; align-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); }
.alloc-pct > input { width: 64px; padding: 6px 0; border: 0; outline: none; background: transparent; color: inherit; font: inherit; text-align: center; font-variant-numeric: tabular-nums; }
.alloc-pct > span { align-self: stretch; display: flex; align-items: center; padding: 0 8px; border-inline-start: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.alloc-count { min-width: 78px; padding: 4px 10px; border-radius: 999px; background: var(--track); font-size: 12px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }

.step-list { display: flex; flex-direction: column; gap: 8px; }
.step-row { display: flex; align-items: flex-start; gap: 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); }
.step-ico { width: 24px; height: 24px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; font-size: 13px; background: var(--track); color: var(--muted); }
.step-ico-run { background: var(--accent-soft); color: var(--accent); }
.step-ico-ok { background: var(--ok-soft); color: var(--ok); }
.step-ico-fail { background: var(--bad-soft); color: var(--bad); }
.step-body { flex: 1; min-width: 0; }
.step-name { font-size: 13px; }
.step-detail { display: block; font-size: 12px; color: var(--muted); }
.step-count { flex-shrink: 0; padding: 2px 8px; border-radius: 999px; background: var(--track); font-size: 12px; font-variant-numeric: tabular-nums; }

.line-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }
.line-chip::before { content: ""; width: 11px; height: 11px; border-radius: 3px; background: var(--lc); flex-shrink: 0; }

.switch { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.switch > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.switch > .switch-track {
    position: relative; flex-shrink: 0; width: 36px; height: 20px; border-radius: 999px;
    background: var(--track); transition: background .14s ease;
}

.switch > .switch-track::after {
    content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: inset-inline-start .14s ease;
}
.switch > input:checked + .switch-track { background: var(--accent); }
.switch > input:checked + .switch-track::after { inset-inline-start: 18px; }
.switch > input:focus-visible + .switch-track { box-shadow: 0 0 0 3px var(--accent-soft); }
.switch > input:disabled + .switch-track { opacity: .5; }
.switch-sm > .switch-track { width: 32px; height: 18px; }
.switch-sm > .switch-track::after { width: 14px; height: 14px; }
.switch-sm > input:checked + .switch-track::after { inset-inline-start: 16px; }
.switch-label { font-size: 13px; }

.perm-list { border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); max-height: 288px; overflow: hidden auto; }
.perm-list > * + * { border-top: 1px solid var(--border); }
.perm-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; transition: background .12s ease; }
.perm-row:hover, .perm-sec > summary:hover { background: var(--hover); }
.perm-sec > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; user-select: none; transition: background .12s ease; }
.perm-sec > summary::-webkit-details-marker { display: none; }
.perm-caret { width: 14px; height: 14px; flex-shrink: 0; color: var(--faint); transition: transform .16s ease; }
.perm-sec[open] .perm-caret { transform: rotate(-90deg); }
.perm-sec-name { flex: 1; font-size: 13px; }
.perm-badge { font-size: 11px; color: var(--faint); white-space: nowrap; }
.perm-acts { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 4px 12px 12px; background: var(--surface-2); }

.avatar { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 7px; font-size: 13px; font-weight: 700; color: #fff; background: #5b6878; }
.avatar-muted { background: #5b6878; }
.avatar-chief { background: var(--role-chief); }
.avatar-accent { background: var(--accent); }
.avatar-net { background: var(--role-net); }

.kpi-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 1px; margin-bottom: 16px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; box-shadow: 0 1px 2px rgba(22, 40, 70, .04); }
.kpi-grid-2 { --cols: 2; }
.kpi-card { display: flex; flex-direction: column; gap: 5px; padding: 15px 18px; background: var(--surface); }
.kpi-card-icon { flex-direction: row; align-items: center; gap: 12px; }
.kpi-icon { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; font-size: 18px; background: var(--accent-soft); color: var(--accent); }
.kpi-icon-ok { background: var(--ok-soft); color: var(--ok); }
.kpi-icon-lg { width: 44px; height: 44px; border-radius: var(--r-sm); font-size: 20px; }
.kpi-body { display: flex; flex-direction: column; }
.kpi-num { font-size: 22px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-num-accent { color: var(--accent); }
.kpi-num-ok { color: var(--ok); }
.kpi-num-bad { color: var(--bad); }
.kpi-label { font-size: 12px; color: var(--muted); }
@media (max-width: 560px) { .kpi-grid { grid-template-columns: 1fr; } }

.section-heading { position: relative; margin: 0; padding-inline-start: 11px; font-size: 15px; font-weight: 700; }
.section-heading::before { content: ""; position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 14px; border-radius: 2px; background: var(--accent); }

.legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--muted); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-style: normal; }
.legend-item::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 3px var(--dot-soft); }
.legend-ok { --dot: var(--ok); --dot-soft: var(--ok-soft); }
.legend-bad { --dot: var(--bad); --dot-soft: var(--bad-soft); }

.line-card { margin-bottom: 12px; background: var(--surface); border: 1px solid var(--border); border-inline-start: 4px solid var(--lc); border-radius: var(--r); overflow: hidden; box-shadow: 0 1px 2px rgba(22, 40, 70, .04); transition: box-shadow .16s ease; }
.line-card:hover { box-shadow: 0 8px 24px var(--shadow); }
.line-card-body { padding: 16px; }
.line-badge { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 17px; font-weight: 700; color: #fff; background: var(--lc); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.line-meter { width: 124px; height: 6px; margin-top: 7px; border-radius: 6px; background: var(--track); overflow: hidden; }
.line-meter > span { display: block; height: 100%; border-radius: 6px; background: var(--lc); }
.line-track { margin-top: 16px; padding: 12px 8px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--stripe); min-width: 0; overflow-x: auto; overflow-y: hidden; }
.line-track-inner { position: relative; display: flex; flex-direction: row-reverse; justify-content: flex-start; min-width: min-content; }
.line-track-inner::before { content: ""; position: absolute; top: 10px; inset-inline: 20px; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--lc) 45%, transparent); }
.station-node { position: relative; flex: 1; min-width: 76px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.station-dot { position: relative; z-index: 2; width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--surface); background: var(--dot); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--dot-soft); transition: transform .16s ease; }
.station-name { max-width: 82px; font-size: 11px; line-height: 1.35; text-align: center; transition: color .14s ease; }
.station-node:hover .station-dot { transform: scale(1.25); }
a.station-node:hover .station-name { color: var(--accent); }
.station-on { --dot: var(--ok); --dot-soft: var(--ok-soft); }
.station-off { --dot: var(--bad); --dot-soft: var(--bad-soft); color: var(--bad); }
@media (prefers-reduced-motion: no-preference) { .station-dot { animation: occ-pop .35s ease-out backwards; } }
@keyframes occ-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); font-size: 12px; white-space: nowrap; }
.chip-sq { border-radius: var(--r-sm); }
.chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: radial-gradient(120% 90% at 50% -10%, var(--accent-soft), transparent 60%), var(--bg); }
.login-card { width: 100%; max-width: 360px; display: flex; flex-direction: column; padding: 30px 26px 26px; background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: var(--r); box-shadow: 0 18px 50px var(--shadow); }
.login-head { text-align: center; margin-bottom: 24px; }
.login-logo { width: 84px; height: 84px; margin: 0 auto 16px; padding: 14px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--border); border-radius: 50%; box-shadow: 0 6px 18px var(--shadow); }
.login-logo img { display: block; width: 100%; height: auto; }
.login-org { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.5; color: var(--text); }
.login-sub { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }

.alert-error {
    background: var(--bad-soft); color: var(--bad); font-size: 12.5px;
    padding: 9px 12px; margin-bottom: 14px; border-radius: var(--r-sm);
    border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent);
}

.table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; transition: color .12s ease; }
.table th.sortable:hover { color: var(--accent); }
.table th.sortable::after { content: "\2195"; margin-inline-start: 6px; font-size: 10px; opacity: .4; }
.table th.sortable:hover::after { opacity: .7; }
.table th.sortable.asc::after { content: "\25B2"; opacity: 1; color: var(--accent); }
.table th.sortable.desc::after { content: "\25BC"; opacity: 1; color: var(--accent); }

select.searchable { display: none; }
.ss-wrap { position: relative; margin-bottom: 0; width: 210px; }
.ss-input { padding: 9px 12px; margin-bottom: 0; cursor: text; }
.ss-menu { display: none; position: absolute; z-index: 10; inset-inline: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-sm); max-height: 220px; overflow-y: auto; box-shadow: 0 10px 28px var(--shadow); }
.ss-wrap.open .ss-menu { display: block; }
.ss-item { padding: 9px 12px; cursor: pointer; font-size: 13px; }
.ss-item:hover { background: var(--accent-soft); }
.ss-empty { padding: 12px; text-align: center; color: var(--muted); font-size: 13px; }
.toolbar .ss-wrap { width: 180px; margin-bottom: 0; }
.toolbar .ss-input { margin-bottom: 0; }

.modal-overlay { position: fixed; inset: 0; background: rgba(8, 18, 14, .55); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 50; backdrop-filter: blur(1.5px); }
.modal-overlay.open { display: flex; }
.modal { width: 100%; max-width: 430px; max-height: calc(100dvh - 32px); overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: var(--r); overflow-x: hidden; box-shadow: 0 24px 60px var(--shadow); animation: modal-in .15s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.modal-head h3 { font-size: 15px; margin: 0; font-weight: 700; }
.modal-close { border: none; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
.modal-close:hover { color: var(--bad); }
.modal-body { padding: 18px; }
.modal-body .field { margin-bottom: 16px; }
.modal-foot { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--border); background: var(--surface-2); }
.modal-lg { max-width: 560px; }
.modal-xl { max-width: min(1180px, calc(100vw - 40px)); }
.modal-body-scroll { max-height: 56vh; overflow-y: auto; }
@media (max-width: 760px) { .modal-overlay { padding: 12px; } .modal { max-width: 100%; } .modal-foot button { flex: 1; } }

.matrix-summary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.matrix-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.matrix-tools .field { width: 150px; margin-bottom: 0; }
.matrix-tools .field.matrix-filter { width: 190px; }
.matrix-scroll { max-height: 56vh; overflow: auto; border: 1px solid var(--border); border-radius: var(--r); overscroll-behavior: contain; }

.matrix-table { border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 12px; }
.matrix-table th, .matrix-table td { width: 132px; border-bottom: 1px solid var(--border); border-inline-end: 1px solid var(--border); }
.matrix-table th { padding: 6px 8px; background: var(--surface-2); font-weight: 600; text-align: center; }
.matrix-table th > span { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.matrix-table thead th { position: sticky; top: 0; z-index: 5; }
.matrix-table th.matrix-corner { inset-inline-start: 0; z-index: 6; width: 168px; color: var(--muted); }
.matrix-table th.matrix-row-head { position: sticky; inset-inline-start: 0; z-index: 3; width: 168px; padding-inline-end: 34px; text-align: start; white-space: nowrap; }
.matrix-table th.matrix-row-head > span { max-width: 100%; }
.matrix-row-fill { position: absolute; inset-inline-end: 7px; top: 50%; transform: translateY(-50%); padding: 1px 7px; border: 1px solid var(--accent-line); border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: 11px; line-height: 1.6; cursor: pointer; }
.matrix-row-fill:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.matrix-table td { padding: 0; background: var(--surface); }
.matrix-table td.matrix-self { text-align: center; color: var(--faint); background: var(--track); }
.matrix-table input { width: 100%; padding: 6px 8px; border: 0; background: transparent; color: inherit; font: inherit; text-align: center; }
.matrix-table input:focus { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--accent-soft); }
.matrix-table input::-webkit-outer-spin-button, .matrix-table input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.matrix-table input { -moz-appearance: textfield; appearance: textfield; }
.matrix-table input:placeholder-shown { background: color-mix(in srgb, var(--bad) 8%, transparent); }
.matrix-table tbody tr:hover th.matrix-row-head { color: var(--accent); }

.messages { position: fixed; top: 16px; left: 16px; z-index: 200; display: flex; flex-direction: column; gap: 10px; width: 330px; max-width: calc(100vw - 32px); pointer-events: none; }
.toast { pointer-events: auto; padding: 12px 14px; border-radius: var(--r-sm); font-size: 13px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-inline-start: 4px solid var(--accent); box-shadow: 0 12px 34px var(--shadow); animation: toast-in .25s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.toast.success { border-inline-start-color: var(--ok); }
.toast.error { border-inline-start-color: var(--bad); }

.page-loader { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000; pointer-events: none; }
.page-loader-fill { display: block; height: 100%; width: 0; background: var(--seal); box-shadow: 0 0 10px var(--seal), 0 0 4px var(--seal); opacity: 0; border-end-end-radius: 3px; border-start-end-radius: 3px; }

#region { position: relative; }
.occ-loading-overlay { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; min-height: 120px; border-radius: var(--r); background: color-mix(in srgb, var(--surface) 62%, transparent); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); animation: occ-overlay-in .14s ease; }
.occ-spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--accent-soft); border-top-color: var(--accent); animation: occ-spin .7s linear infinite; }
@keyframes occ-spin { to { transform: rotate(360deg); } }
@keyframes occ-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .occ-spinner { animation-duration: 1.4s; } .occ-loading-overlay { animation: none; } }

.occ-skeleton { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; box-shadow: 0 1px 2px rgba(22, 40, 70, .04); }
.occ-skeleton .sk-row { display: flex; align-items: center; gap: 18px; padding: 0 16px; height: 46px; border-bottom: 1px solid var(--border); }
.occ-skeleton .sk-row:last-child { border-bottom: 0; }
.occ-skeleton .sk-head { height: 44px; background: var(--surface-2); }
.sk-bar { height: 11px; border-radius: 6px; background: var(--track); position: relative; overflow: hidden; }
.sk-bar::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 9%, transparent), transparent); animation: sk-shimmer 1.25s infinite; }
@keyframes sk-shimmer { 100% { transform: translateX(100%); } }
.occ-reveal > * { animation: occ-reveal-in .32s ease both; }
@keyframes occ-reveal-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sk-bar::after { animation: none; } .occ-reveal > * { animation: none; } }

@keyframes occ-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.line-anim { animation: occ-rise .5s cubic-bezier(.22, .61, .36, 1) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
@media (prefers-reduced-motion: reduce) { .line-anim { animation: none; } }

.jdp { position: absolute; z-index: 200; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r); box-shadow: 0 14px 36px var(--shadow); padding: 12px; width: 252px; direction: rtl; }
.jdp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.jdp-title { font-size: 13px; font-weight: 700; color: var(--text); }
.jdp-nav { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); width: 28px; height: 28px; line-height: 1; cursor: pointer; color: var(--text); font-size: 16px; }
.jdp-nav:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.jdp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.jdp-wd { font-size: 11px; color: var(--muted); text-align: center; padding: 4px 0; font-weight: 600; }
.jdp-day { text-align: center; padding: 6px 0; font-size: 12.5px; border-radius: var(--r-sm); cursor: pointer; color: var(--text); }
.jdp-day:hover { background: var(--accent-soft); color: var(--accent); }
.jdp-day.empty { visibility: hidden; cursor: default; }
.jdp-day.today { box-shadow: inset 0 0 0 1px var(--accent); }
.jdp-day.selected { background: var(--accent); color: #fff; }
.jdp-time { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.jdp-time-label { font-size: 12px; color: var(--muted); }
.jdp-time-grp { display: inline-flex; align-items: center; gap: 4px; }
.jdp-tsel { font: inherit; font-size: 12.5px; padding: 5px 6px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); cursor: pointer; outline: none; min-width: 46px; text-align: center; }
.jdp-tsel:focus { border-color: var(--accent); }
.jdp-time-sep { color: var(--muted); font-weight: 600; }
.jdp-foot { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.jdp-foot button { background: none; border: none; color: var(--accent); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 4px; }
.jdp-foot .clear { color: var(--bad); }

.issue-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; box-shadow: 0 1px 2px rgba(22, 40, 70, .04); }
.issue-success-icon { width: 48px; height: 48px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; font-size: 22px; font-weight: 700; }
.issue-stepper { list-style: none; display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.issue-stepper::-webkit-scrollbar { display: none; }
.issue-step { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px; font-size: 12px; font-weight: 600; color: var(--faint); flex-shrink: 0; transition: background .14s ease, color .14s ease; }
.issue-step.is-current { background: var(--accent); color: var(--on-accent); padding-inline-end: 12px; }
.issue-step.is-done { color: var(--ok); }
.issue-step-num { width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; font-size: 11px; background: var(--track); flex-shrink: 0; }
.issue-step.is-current .issue-step-num { background: rgba(255,255,255,.22); }
.issue-step.is-done .issue-step-num { background: color-mix(in srgb, var(--ok) 22%, transparent); }
.issue-step-title { display: none; white-space: nowrap; }
.issue-step.is-current .issue-step-title { display: inline; }
.issue-step-sep { width: 10px; height: 1px; background: var(--border-strong); flex-shrink: 0; }
.issue-alert { margin: 0; padding: 12px 16px; border-radius: 8px; border: 1px solid var(--bad-line); background: var(--bad-soft); color: var(--bad); font-size: 13px; }
.issue-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.issue-field-head label { font-size: 13px; font-weight: 600; color: var(--muted); }
.issue-hint { font-size: 12px; color: var(--faint); margin-top: 8px; }
.issue-field-error { font-size: 12px; color: var(--bad); margin-top: 8px; }
.issue-search { width: 100%; font: inherit; font-size: 13px; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); outline: none; }
.issue-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.issue-scan-wrap { position: relative; }
.issue-scan-icon { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; display: inline-flex; }
.issue-scan-input { width: 100%; font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 18px; letter-spacing: .12em; text-align: center; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); outline: none; }
.issue-scan-input.has-icon { text-align: start; padding-inline-start: 44px; letter-spacing: .08em; }
.issue-scan-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.issue-scan-input::placeholder { font-family: inherit; font-size: 13px; letter-spacing: normal; color: var(--faint); }
.issue-reader-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--accent); font-weight: 600; }
.issue-reader-badge.is-live { color: var(--accent); }
.issue-reader-badge.is-off { color: var(--faint); }
.issue-reader-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--accent); animation: issue-pulse 1.2s ease-in-out infinite; }
.issue-reader-badge.is-off .issue-reader-dot { display: none; }
@keyframes issue-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.issue-tariff-list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.issue-tariff-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.issue-tariff-item:last-child { border-bottom: 0; }
.issue-tariff-item:hover { background: var(--hover); }
.issue-tariff-item.is-selected { background: var(--accent-soft); }
.issue-check { width: 20px; height: 20px; border-radius: 999px; border: 1px solid var(--border-strong); display: grid; place-items: center; font-size: 11px; flex-shrink: 0; color: var(--on-accent); }
.issue-tariff-item.is-selected .issue-check { background: var(--accent); border-color: var(--accent); }
.issue-tariff-name { display: block; font-size: 13px; font-weight: 600; }
.issue-tariff-meta { display: block; margin-top: 2px; font-size: 11px; color: var(--faint); }
.issue-tariff-price { flex-shrink: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.issue-free-pill { display: inline-block; border-radius: 6px; background: var(--ok-soft); color: var(--ok); padding: 2px 8px; font-size: 11px; font-weight: 600; }
.issue-empty { text-align: center; padding: 28px 12px; color: var(--muted); font-size: 13px; }
.issue-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 8px 0; }
.issue-row-label { font-size: 13px; color: var(--muted); }
.issue-row-value { font-size: 13px; font-weight: 600; text-align: end; word-break: break-all; }
.issue-mini-card { border: 1px solid var(--border); border-radius: 8px; padding: 4px 12px; background: var(--surface-2); }
.issue-write-box { border: 1px solid var(--border); border-radius: 8px; padding: 28px 16px; text-align: center; }
.issue-write-box { padding: 40px 16px; }
.issue-confirm-ring { width: 96px; height: 96px; margin: 0 auto 16px; border-radius: 999px; border: 2px solid var(--accent); color: var(--accent); display: grid; place-items: center; animation: issue-pulse 1.4s ease-in-out infinite; }
.issue-serial-mono { margin-top: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--muted); direction: ltr; }
.issue-spinner { width: 28px; height: 28px; margin: 0 auto 12px; border-radius: 999px; border: 2px solid var(--border-strong); border-top-color: var(--accent); display: block; animation: issue-spin .7s linear infinite; }
@keyframes issue-spin { to { transform: rotate(360deg); } }
.issue-reader-catcher { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.issue-write-box { position: relative; }
.issue-link { border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; transition: background .14s ease, color .14s ease; }
.issue-link:hover { background: var(--hover); color: var(--text); }
.issue-pick-list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.issue-pick-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.issue-pick-item:last-child { border-bottom: 0; }
.issue-pick-item:hover { background: var(--hover); }
.issue-pick-item.is-selected { background: var(--accent-soft); }
.issue-pick-item.is-selected .issue-check { background: var(--accent); border-color: var(--accent); }
.issue-pick-name { display: block; font-size: 13px; font-weight: 600; }
.issue-pick-meta { display: block; margin-top: 2px; font-size: 11px; color: var(--faint); }
.issue-pick-side { flex-shrink: 0; font-size: 12px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.issue-photo-pill { flex-shrink: 0; border-radius: 6px; background: var(--ok-soft); color: var(--ok); padding: 2px 8px; font-size: 10px; font-weight: 600; }
.issue-photo-stage { width: 210px; aspect-ratio: 3 / 4; margin: 0 auto; border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; }
.issue-photo-media { width: 100%; height: 100%; object-fit: cover; display: block; }
video.issue-photo-media { transform: scaleX(-1); }
.issue-photo-empty { display: grid; justify-items: center; gap: 10px; color: var(--faint); font-size: 12px; padding: 12px; text-align: center; }
.issue-photo-file { position: relative; overflow: hidden; cursor: pointer; }
.issue-photo-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.issue-review-photo { display: flex; justify-content: center; padding-bottom: 12px; }
.issue-review-photo img { width: 96px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-strong); }
.badge-preview { box-shadow: 0 8px 26px rgba(16, 35, 58, .22); }
.hidden { display: none !important; }