/* ===== Design tokens ===== */
:root {
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --app-bg: #f5f6fa; --surface: #ffffff; --surface-2: #f8f9fc; --line: #e7e9f0; --line-strong: #d6dae4;
  --ink: #1b2130; --ink-2: #4b5563; --ink-3: #8b93a4;
  --radius: 12px; --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.05); --shadow: 0 1px 3px rgba(16,24,40,.06), 0 4px 14px rgba(16,24,40,.05); --shadow-lg: 0 18px 50px rgba(16,24,40,.18);
  --sb-w: 264px; --sb-w-min: 72px; --topbar-h: 60px;
  --sb-bg: #111827; --sb-ink: #aab3c5; --sb-ink-strong: #ffffff; --sb-line: rgba(255,255,255,.08); --sb-hover: rgba(255,255,255,.07); --sb-active: rgba(var(--brand-rgb), .28);
  --cell-y: .7rem; --cell-x: .9rem;
  --bs-body-font-family: var(--font); --bs-body-bg: var(--app-bg); --bs-body-color: var(--ink); --bs-secondary-color: var(--ink-3); --bs-border-color: var(--line);
  --bs-primary: var(--brand); --bs-primary-rgb: var(--brand-rgb); --bs-link-color: var(--brand-text); --bs-link-hover-color: var(--brand-700); --bs-link-color-rgb: var(--brand-rgb);
  --bs-border-radius: var(--radius-sm); --bs-border-radius-lg: var(--radius); --bs-heading-color: var(--ink);
}
[data-bs-theme="dark"] {
  --app-bg: #0e121b; --surface: #171c28; --surface-2: #1c2230; --line: #262d3d; --line-strong: #323b50;
  --ink: #e8ebf2; --ink-2: #b4bccd; --ink-3: #7e889c;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 1px 3px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.25);
  --sb-bg: #0b0f17; --brand-text: color-mix(in srgb, var(--brand) 55%, #fff);
  --bs-body-bg: var(--app-bg); --bs-body-color: var(--ink); --bs-border-color: var(--line); --bs-secondary-color: var(--ink-3); --bs-heading-color: var(--ink);
  --bs-link-color: var(--brand-text); --bs-link-hover-color: #fff; --bs-tertiary-bg: var(--surface-2); --bs-emphasis-color: #fff;
}
.density-compact { --cell-y: .38rem; --cell-x: .7rem; }
.density-compact .content { padding-top: 1rem; }
.density-compact .form-control, .density-compact .form-select { padding-top: .3rem; padding-bottom: .3rem; font-size: .875rem; }
.density-compact .btn { --bs-btn-padding-y: .28rem; --bs-btn-font-size: .85rem; }

html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); font-size: .9rem; background: var(--app-bg); color: var(--ink); font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-weight: 650; letter-spacing: -.01em; }
a { text-decoration: none; } a:hover { text-decoration: underline; }
::selection { background: rgba(var(--brand-rgb), .22); }
:focus-visible { outline: 2px solid rgba(var(--brand-rgb), .6); outline-offset: 2px; }
.text-muted { color: var(--ink-3) !important; }

/* ===== Sidebar ===== */
.sb { position: fixed; z-index: 1040; inset: 0 auto 0 0; width: var(--sb-w); background: var(--sb-bg); color: var(--sb-ink); display: flex; flex-direction: column; transition: width .2s ease, transform .25s ease; }
.sbs-light { --sb-bg: #ffffff; --sb-ink: #4b5563; --sb-ink-strong: #111827; --sb-line: #eceef4; --sb-hover: #f3f4f9; --sb-active: var(--brand-soft); }
[data-bs-theme="dark"] .sbs-light { --sb-bg: #121723; --sb-ink: #aab3c5; --sb-ink-strong: #fff; --sb-line: #232a3a; --sb-hover: #1b2232; --sb-active: rgba(var(--brand-rgb), .25); }
.sbs-light .sb { border-right: 1px solid var(--sb-line); }
body.sbs-brand { --sb-bg: var(--sb-brand); --sb-ink: rgba(255,255,255,.72); --sb-ink-strong: #fff; --sb-line: rgba(255,255,255,.12); --sb-hover: rgba(255,255,255,.1); --sb-active: rgba(255,255,255,.2); }
.sb-brand { display: flex; align-items: center; gap: .7rem; padding: 1rem 1.1rem; color: var(--sb-ink-strong); font-weight: 650; min-height: var(--topbar-h); border-bottom: 1px solid var(--sb-line); text-decoration: none !important; }
.sb-mark { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--brand); color: var(--brand-ink); font-weight: 700; }
.sb-logo { flex: none; width: 34px; height: 34px; border-radius: 8px; object-fit: contain; background: #fff; padding: 2px; }
.sb-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-nav { flex: 1; overflow-y: auto; padding: .75rem .65rem; scrollbar-width: thin; scrollbar-color: var(--sb-line) transparent; }
.sb-link, .sb-group-head { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .55rem .75rem; border-radius: 9px; color: var(--sb-ink); font-weight: 500; font-size: .875rem; border: 0; background: none; text-align: left; text-decoration: none !important; white-space: nowrap; }
.sb-link i, .sb-group-head .sb-gicon { flex: none; width: 1.15rem; text-align: center; font-size: 1.02rem; }
.sb-link:hover, .sb-group-head:hover { background: var(--sb-hover); color: var(--sb-ink-strong); }
.sb-link.active { background: var(--sb-active); color: var(--sb-ink-strong); font-weight: 600; }
.sb-link.active i { color: var(--brand-text); }
body.sbs-dark .sb-link.active i, body.sbs-brand .sb-link.active i { color: #fff; }
.sb-group { margin-top: .35rem; }
.sb-group-head { text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; font-weight: 650; color: var(--sb-ink); opacity: .85; }
.sb-group-head span { flex: 1; }
.sb-caret { font-size: .7rem; transition: transform .24s cubic-bezier(.4, 0, .2, 1); }
.sb-group.open .sb-caret { transform: rotate(180deg); }
.sb-items { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .24s cubic-bezier(.4, 0, .2, 1); }
.sb-items-inner { overflow: hidden; min-height: 0; padding-left: .25rem; }
.sb-group.open .sb-items { grid-template-rows: 1fr; }
.sb-items .sb-link { padding-left: .75rem; }
.sb-foot { padding: .75rem .9rem; border-top: 1px solid var(--sb-line); display: flex; flex-direction: column; gap: .5rem; }
.sb-plan { display: flex; align-items: center; gap: .5rem; color: var(--sb-ink); }
.sb-plan .badge { background: rgba(var(--brand-rgb), .3); color: var(--sb-ink-strong); font-weight: 600; }
.sb-collapse { display: none; align-items: center; gap: .6rem; border: 0; background: none; color: var(--sb-ink); padding: .35rem .4rem; border-radius: 8px; font-size: .8rem; }
.sb-collapse:hover { background: var(--sb-hover); color: var(--sb-ink-strong); }
.sb-backdrop { position: fixed; inset: 0; background: rgba(8,12,22,.5); z-index: 1035; display: none; backdrop-filter: blur(2px); }

/* ===== Shell ===== */
.shell { margin-left: var(--sb-w); min-height: 100vh; transition: margin .2s ease; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 1020; height: var(--topbar-h); display: flex; align-items: center; gap: .75rem; padding: 0 1.5rem; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.icon-btn { width: 36px; height: 36px; display: inline-grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.search-trigger { display: flex; align-items: center; gap: .6rem; min-width: 0; width: min(420px, 100%); padding: .45rem .75rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--ink-3); font-size: .85rem; text-align: left; }
.search-trigger:hover { border-color: var(--line-strong); color: var(--ink-2); }
.search-trigger kbd { margin-left: auto; }
kbd { background: var(--surface); border: 1px solid var(--line-strong); border-bottom-width: 2px; color: var(--ink-2); border-radius: 5px; padding: .05rem .35rem; font-size: .68rem; font-family: var(--font); }
.user-btn { display: flex; align-items: center; gap: .6rem; border: 0; background: transparent; padding: .25rem .4rem; border-radius: 10px; color: var(--ink); }
.user-btn:hover { background: var(--surface-2); }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--brand-ink); font-weight: 650; font-size: .85rem; }
.support-bar { background: #fbbf24; color: #1f1300; padding: .5rem 1.5rem; font-size: .85rem; }
.content { padding: 1.5rem 1.75rem 3rem; width: 100%; max-width: 1480px; margin: 0 auto; flex: 1; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.page-head h1 { font-size: 1.45rem; margin: 0; line-height: 1.2; }
.crumbs { display: flex; align-items: center; gap: .4rem; color: var(--ink-3); font-size: .85rem; min-width: 0; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
.crumbs > span:last-child, .crumbs > a:last-child { color: var(--ink); font-weight: 500; }
.crumbs a { color: var(--ink-3); } .crumbs a:hover { color: var(--brand-text); }
.crumbs i { font-size: .6rem; }
html.sb-collapsed .sb { width: var(--sb-w-min); }
html.sb-collapsed .shell { margin-left: var(--sb-w-min); }
html.sb-collapsed .sb-name, html.sb-collapsed .sb-link span, html.sb-collapsed .sb-group-head span, html.sb-collapsed .sb-caret, html.sb-collapsed .sb-plan, html.sb-collapsed .sb-collapse span { display: none; }
html.sb-collapsed .sb-brand { justify-content: center; padding-inline: 0; }
html.sb-collapsed .sb-link, html.sb-collapsed .sb-group-head { justify-content: center; padding-inline: 0; }
html.sb-collapsed .sb-items { grid-template-rows: 1fr; }
html.sb-collapsed .sb-group-head { height: 1px; padding: 0; margin: .5rem .6rem; background: var(--sb-line); overflow: hidden; opacity: 0; }
html.sb-collapsed .sb-collapse { justify-content: center; }
html.sb-collapsed .sb-collapse i { transform: rotate(180deg); }
@media (min-width: 992px) { .sb-collapse { display: flex; } }
@media (max-width: 991.98px) {
  .shell { margin-left: 0 !important; }
  .sb { transform: translateX(-100%); width: min(86vw, 300px) !important; }
  body.sb-open .sb { transform: none; box-shadow: var(--shadow-lg); } body.sb-open .sb-backdrop { display: block; }
  html.sb-collapsed .sb-name, html.sb-collapsed .sb-link span, html.sb-collapsed .sb-group-head span, html.sb-collapsed .sb-caret, html.sb-collapsed .sb-plan { display: revert; }
  html.sb-collapsed .sb-group-head { height: auto; opacity: .85; margin: 0; padding: .55rem .75rem; background: none; }
  html.sb-collapsed .sb-link, html.sb-collapsed .sb-group-head { justify-content: flex-start; padding-inline: .75rem; }
  html.sb-collapsed .sb-items { grid-template-rows: 0fr; } html.sb-collapsed .sb-group.open .sb-items { grid-template-rows: 1fr; }
  .topbar { padding: 0 .85rem; } .content { padding: 1rem .85rem 2.5rem; }
  .page-head h1 { font-size: 1.25rem; }
}

/* ===== Cards, tables, forms ===== */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); --bs-card-cap-bg: transparent; --bs-card-bg: var(--surface); --bs-card-border-color: var(--line); }
.card-header { background: transparent; border-bottom: 1px solid var(--line); font-weight: 650; padding: .85rem 1.1rem; border-radius: var(--radius) var(--radius) 0 0 !important; }
.card-body { padding: 1.1rem; }
.card > .table-responsive:first-child, .card > .table:first-child { border-radius: var(--radius); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--line); --bs-table-hover-bg: var(--surface-2); --bs-table-striped-bg: var(--surface-2); margin-bottom: 0; }
.table > :not(caption) > * > * { padding: var(--cell-y) var(--cell-x); border-bottom-color: var(--line); }
.table thead th { background: var(--surface-2); color: var(--ink-3); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 650; white-space: nowrap; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1; }
.table-responsive { border-radius: var(--radius); }
.table tbody tr:last-child td { border-bottom: 0; }
.table-light, .table-light > * { --bs-table-bg: var(--surface-2); --bs-table-color: var(--ink-2); }
tfoot td { border-top: 1px solid var(--line-strong) !important; }
.table td a { font-weight: 550; }
.table .btn-sm { --bs-btn-padding-y: .22rem; --bs-btn-padding-x: .6rem; }
.list-group { --bs-list-group-bg: transparent; --bs-list-group-border-color: var(--line); }
.form-label { font-weight: 550; font-size: .82rem; color: var(--ink-2); margin-bottom: .3rem; }
.form-control, .form-select { border-color: var(--line-strong); background-color: var(--surface); border-radius: var(--radius-sm); font-size: .9rem; color: var(--ink); }
.form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 .22rem rgba(var(--brand-rgb), .16); background-color: var(--surface); color: var(--ink); }
.form-control::placeholder { color: var(--ink-3); opacity: .8; }
.form-control:disabled, .form-control[readonly] { background-color: var(--surface-2); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-input:focus { box-shadow: 0 0 0 .22rem rgba(var(--brand-rgb), .16); border-color: var(--brand); }
.form-switch .form-check-input { width: 2.2em; height: 1.15em; }
.input-group-text { background: var(--surface-2); border-color: var(--line-strong); color: var(--ink-2); }
.btn { font-weight: 550; border-radius: var(--radius-sm); font-size: .875rem; --bs-btn-padding-x: .9rem; }
.btn-sm { font-size: .8rem; }
.btn-primary { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-color: var(--brand-ink); --bs-btn-hover-bg: var(--brand-600); --bs-btn-hover-border-color: var(--brand-600); --bs-btn-hover-color: var(--brand-ink);
  --bs-btn-active-bg: var(--brand-700); --bs-btn-active-border-color: var(--brand-700); --bs-btn-active-color: var(--brand-ink); --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand); --bs-btn-disabled-color: var(--brand-ink); --bs-btn-focus-shadow-rgb: var(--brand-rgb); box-shadow: 0 1px 2px rgba(16,24,40,.12); }
.btn-outline-primary { --bs-btn-color: var(--brand-text); --bs-btn-border-color: rgba(var(--brand-rgb), .45); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); --bs-btn-hover-color: var(--brand-ink); --bs-btn-active-bg: var(--brand-600); --bs-btn-active-border-color: var(--brand-600); --bs-btn-active-color: var(--brand-ink); }
.btn-outline-secondary { --bs-btn-color: var(--ink-2); --bs-btn-border-color: var(--line-strong); --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-border-color: var(--line-strong); --bs-btn-hover-color: var(--ink); --bs-btn-active-bg: var(--surface-2); --bs-btn-active-color: var(--ink); --bs-btn-active-border-color: var(--line-strong); background: var(--surface); }
.btn-outline-secondary.active { background: var(--brand-soft); border-color: rgba(var(--brand-rgb), .4); color: var(--brand-text); }
[data-bs-theme="dark"] .btn-outline-secondary.active { background: var(--brand-soft-dark); }
.btn-link { color: var(--ink-2); text-decoration: none; } .btn-link:hover { color: var(--ink); text-decoration: underline; }
.badge { font-weight: 600; letter-spacing: .01em; border-radius: 6px; padding: .32em .6em; }
/* soft badges */
.badge.text-bg-primary { background: rgba(var(--brand-rgb), .14) !important; color: var(--brand-text) !important; }
.badge.text-bg-secondary { background: rgba(100,116,139,.15) !important; color: #475569 !important; }
.badge.text-bg-success { background: rgba(22,163,74,.14) !important; color: #15803d !important; }
.badge.text-bg-danger { background: rgba(225,29,72,.13) !important; color: #be123c !important; }
.badge.text-bg-warning { background: rgba(245,158,11,.18) !important; color: #b45309 !important; }
.badge.text-bg-info { background: rgba(14,165,233,.15) !important; color: #0369a1 !important; }
.badge.text-bg-dark { background: rgba(30,41,59,.14) !important; color: #1e293b !important; }
.badge.text-bg-light { background: var(--surface-2) !important; color: var(--ink-2) !important; border: 1px solid var(--line); }
[data-bs-theme="dark"] .badge.text-bg-secondary { color: #cbd5e1 !important; } [data-bs-theme="dark"] .badge.text-bg-success { color: #4ade80 !important; }
[data-bs-theme="dark"] .badge.text-bg-danger { color: #fda4af !important; } [data-bs-theme="dark"] .badge.text-bg-warning { color: #fcd34d !important; }
[data-bs-theme="dark"] .badge.text-bg-info { color: #7dd3fc !important; } [data-bs-theme="dark"] .badge.text-bg-dark { color: #e2e8f0 !important; background: rgba(148,163,184,.2) !important; }
.alert { border-radius: var(--radius-sm); border: 1px solid transparent; font-size: .875rem; }
.alert-success { background: rgba(22,163,74,.1); border-color: rgba(22,163,74,.25); color: #166534; }
.alert-danger { background: rgba(225,29,72,.09); border-color: rgba(225,29,72,.25); color: #9f1239; }
.alert-warning { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.3); color: #92400e; }
.alert-info { background: rgba(14,165,233,.1); border-color: rgba(14,165,233,.25); color: #075985; }
[data-bs-theme="dark"] .alert-success { color: #86efac; } [data-bs-theme="dark"] .alert-danger { color: #fda4af; } [data-bs-theme="dark"] .alert-warning { color: #fcd34d; } [data-bs-theme="dark"] .alert-info { color: #7dd3fc; }
.dropdown-menu { border: 1px solid var(--line); border-radius: 12px; padding: .4rem; box-shadow: var(--shadow-lg); --bs-dropdown-bg: var(--surface); --bs-dropdown-link-color: var(--ink); --bs-dropdown-link-hover-bg: var(--surface-2); --bs-dropdown-link-active-bg: var(--brand); font-size: .875rem; min-width: 12rem; }
.dropdown-item { border-radius: 8px; padding: .5rem .7rem; }
.dropdown-divider { border-color: var(--line); }
.pagination { --bs-pagination-color: var(--ink-2); --bs-pagination-bg: var(--surface); --bs-pagination-border-color: var(--line); --bs-pagination-hover-bg: var(--surface-2); --bs-pagination-hover-color: var(--ink); --bs-pagination-active-bg: var(--brand); --bs-pagination-active-border-color: var(--brand); --bs-pagination-active-color: var(--brand-ink); --bs-pagination-disabled-bg: var(--surface-2); --bs-pagination-disabled-border-color: var(--line); --bs-pagination-border-radius: 8px; }
.nav-tabs { --bs-nav-tabs-border-color: var(--line); --bs-nav-tabs-link-active-bg: transparent; --bs-nav-tabs-link-active-border-color: var(--line) var(--line) var(--surface); --bs-nav-link-color: var(--ink-3); --bs-nav-link-hover-color: var(--ink); }
.nav-tabs .nav-link { font-weight: 550; font-size: .875rem; }
.nav-tabs .nav-link.active { color: var(--brand-text); border-bottom: 2px solid var(--brand); border-top-color: transparent; border-left-color: transparent; border-right-color: transparent; background: transparent; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--brand); --bs-nav-pills-link-active-color: var(--brand-ink); --bs-nav-link-color: var(--ink-2); }
.modal-content { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.bg-light { background: var(--surface-2) !important; }
.border { border-color: var(--line) !important; }
code { color: var(--brand-text); background: var(--surface-2); padding: .1rem .35rem; border-radius: 5px; font-size: .82em; }
hr { border-color: var(--line); opacity: 1; }
.progress { background: var(--surface-2); border-radius: 99px; } .progress-bar { background: var(--brand); }

/* Settings / tabs row that older pages render as .nav */
.nav-underline .nav-link.active { color: var(--brand-text); border-bottom-color: var(--brand); }

/* ===== Command palette ===== */
.palette { position: fixed; inset: 0; z-index: 2000; background: rgba(8,12,22,.55); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 1rem 1rem; }
.palette[hidden] { display: none; }
.palette-box { width: min(640px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; }
.palette-input { display: flex; align-items: center; gap: .75rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); color: var(--ink-3); }
.palette-input input { flex: 1; border: 0; background: transparent; outline: 0; font-size: 1rem; color: var(--ink); min-width: 0; }
.palette-list { max-height: min(55vh, 460px); overflow-y: auto; padding: .4rem; }
.pal-head { padding: .55rem .75rem .25rem; font-size: .68rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.pal-item { display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem; border-radius: 10px; color: var(--ink); text-decoration: none !important; cursor: pointer; }
.pal-item i { width: 1.2rem; color: var(--ink-3); text-align: center; }
.pal-item .sub { margin-left: auto; color: var(--ink-3); font-size: .75rem; white-space: nowrap; }
.pal-item.sel { background: var(--brand-soft); } [data-bs-theme="dark"] .pal-item.sel { background: var(--brand-soft-dark); }
.pal-item.sel i { color: var(--brand-text); }
.pal-empty { padding: 1.5rem; text-align: center; color: var(--ink-3); }
.palette-foot { display: flex; gap: 1rem; padding: .55rem 1rem; border-top: 1px solid var(--line); color: var(--ink-3); font-size: .75rem; background: var(--surface-2); }

/* ===== Auth pages ===== */
.auth-split { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--surface); }
.auth-hero { position: relative; overflow: hidden; color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(145deg, var(--brand-700), var(--brand) 55%, var(--brand-600)); }
.auth-hero::before, .auth-hero::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,.08); }
.auth-hero::before { width: 520px; height: 520px; right: -160px; top: -140px; } .auth-hero::after { width: 380px; height: 380px; left: -120px; bottom: -140px; }
.auth-hero > * { position: relative; z-index: 1; }
.auth-logo { display: flex; align-items: center; gap: .7rem; font-weight: 700; font-size: 1.15rem; }
.auth-logo .sb-mark { background: rgba(255,255,255,.2); color: #fff; }
.auth-hero h2 { color: #fff; font-size: 2rem; font-weight: 700; line-height: 1.2; max-width: 20ch; letter-spacing: -.02em; }
.auth-hero ul { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .7rem; opacity: .95; }
.auth-hero li i { margin-right: .6rem; }
.auth-pane { display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; background: var(--app-bg); }
.auth-card { width: 100%; max-width: 420px; }
.auth-card .card { box-shadow: var(--shadow); }
@media (max-width: 860px) { .auth-split { grid-template-columns: 1fr; } .auth-hero { display: none; } }
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; }

/* ===== Misc helpers kept from the old stylesheet ===== */
.perm-table td, .perm-table th { vertical-align: middle; }
.stat-card { }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--ink-3); }
.empty-state i { font-size: 2.2rem; display: block; margin-bottom: .5rem; opacity: .6; }
.report-table td, .report-table th { white-space: nowrap; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line-strong); cursor: pointer; display: inline-block; }
input.swatch-radio { position: absolute; opacity: 0; } input.swatch-radio:checked + .swatch { box-shadow: 0 0 0 2px var(--brand), 0 0 0 4px var(--surface); }
.opt-card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .75rem 1rem; cursor: pointer; display: block; background: var(--surface); }
input:checked + .opt-card, .opt-card.on { border-color: var(--brand); background: var(--brand-soft); }
[data-bs-theme="dark"] input:checked + .opt-card, [data-bs-theme="dark"] .opt-card.on { background: var(--brand-soft-dark); }
.widget-row { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin-bottom: .5rem; }
.widget-row .grip { color: var(--ink-3); }
.toast-wrap { position: fixed; top: 1rem; right: 1rem; z-index: 2100; display: grid; gap: .5rem; width: min(380px, calc(100vw - 2rem)); }
@media print { .sb, .topbar, .sb-backdrop, .palette, .page-head .btn, .no-print { display: none !important; } .shell { margin: 0 !important; } .content { padding: 0; max-width: none; } body { background: #fff; } }

/* Filter / search rows on list pages become a tidy toolbar */
.content > form.row.g-2, .content > form.row.g-3.mb-3 { --bs-gutter-x: .6rem; --bs-gutter-y: .5rem; margin: 0 0 1rem; padding: .65rem .75rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); align-items: center; }
.content > form.row.g-2 > [class*="col"] { padding-left: calc(var(--bs-gutter-x) * .5); padding-right: calc(var(--bs-gutter-x) * .5); }
.content > form.row.g-2 .col.text-end { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.form-check.d-flex { gap: .5rem; } .form-check.d-flex .form-check-input { float: none; margin: 0; }
.page-head + form.row { margin-top: 0; }

/* ===== Settings frame ===== */
.settings-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.settings-nav { position: sticky; top: calc(var(--topbar-h) + 1rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem; box-shadow: var(--shadow-sm); }
.settings-nav-head { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 650; color: var(--ink-3); padding: .7rem .7rem .3rem; }
.settings-nav-head:first-child { padding-top: .3rem; }
.settings-nav-link { display: flex; align-items: center; gap: .65rem; padding: .5rem .7rem; border-radius: 8px; color: var(--ink-2); font-weight: 520; font-size: .86rem; text-decoration: none !important; }
.settings-nav-link i { color: var(--ink-3); width: 1.1rem; text-align: center; }
.settings-nav-link:hover { background: var(--surface-2); color: var(--ink); }
.settings-nav-link.active { background: var(--brand-soft); color: var(--brand-text); font-weight: 650; }
[data-bs-theme="dark"] .settings-nav-link.active { background: var(--brand-soft-dark); }
.settings-nav-link.active i { color: var(--brand-text); }
.settings-body > .card { max-width: 900px; }
@media (max-width: 991.98px) {
  .settings-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .settings-nav { position: static; display: flex; overflow-x: auto; gap: .25rem; padding: .4rem; }
  .settings-nav-head { display: none; } .settings-nav-link { white-space: nowrap; }
}
.form-check-input { border-color: var(--ink-3); background-color: var(--surface); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }

/* ===== Dashboard grid ===== */
.dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.dash-w { min-width: 0; } .dash-w > .card { height: 100%; }
.span-12 { grid-column: span 12; } .span-6 { grid-column: span 6; } .span-4 { grid-column: span 4; }
@media (max-width: 1100px) { .span-4 { grid-column: span 6; } }
@media (max-width: 800px) { .span-6, .span-4 { grid-column: span 12; } }
.offcanvas { --bs-offcanvas-bg: var(--surface); --bs-offcanvas-color: var(--ink); border-color: var(--line) !important; }

/* ===== Narrow containers (phones, or wide tables in a narrow column): document line tables become stacked cards ===== */
.table-responsive:has(> #lineTable) { container-type: inline-size; }
@container (max-width: 760px) {
  #lineTable thead { display: none; }
  #lineTable, #lineTable tbody { display: block; width: 100%; }
  #lineTable tr { display: flex; flex-wrap: wrap; gap: .5rem .6rem; padding: .85rem; border-bottom: 1px solid var(--line); align-items: flex-end; }
  #lineTable td { display: block; border: 0 !important; padding: 0 !important; flex: 1 1 30%; min-width: 88px !important; }
  #lineTable td:first-child { flex: 1 1 100%; }
  #lineTable td[data-label]:not(:first-child):not(:last-child)::before { content: attr(data-label); display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin-bottom: 2px; font-weight: 600; }
  #lineTable td:last-child { flex: 0 0 auto; min-width: 0 !important; }
  #lineTable td:not(:first-child) { overflow: hidden; text-overflow: ellipsis; }
  #lineTable td:not(:first-child) * { max-width: 100%; }
  #lineTable td .form-control, #lineTable td .form-select { width: 100% !important; max-width: none !important; }
  .list-group.position-absolute { min-width: 0 !important; width: 100%; }
}
@container (max-width: 1180px) {
  #lineTable.lines-wide thead { display: none; }
  #lineTable.lines-wide, #lineTable.lines-wide tbody { display: block; width: 100%; }
  #lineTable.lines-wide tr { display: flex; flex-wrap: wrap; gap: .5rem .6rem; padding: .85rem; border-bottom: 1px solid var(--line); align-items: flex-end; }
  #lineTable.lines-wide td { display: block; border: 0 !important; padding: 0 !important; flex: 1 1 30%; min-width: 88px !important; }
  #lineTable.lines-wide td:first-child { flex: 1 1 100%; }
  #lineTable.lines-wide td[data-label]:not(:first-child):not(:last-child)::before { content: attr(data-label); display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin-bottom: 2px; font-weight: 600; }
  #lineTable.lines-wide td:last-child { flex: 0 0 auto; min-width: 0 !important; }
  #lineTable.lines-wide td:not(:first-child) { overflow: hidden; text-overflow: ellipsis; }
  #lineTable.lines-wide td:not(:first-child) * { max-width: 100%; }
  #lineTable.lines-wide td .form-control, #lineTable.lines-wide td .form-select { width: 100% !important; max-width: none !important; }
  .list-group.position-absolute { min-width: 0 !important; width: 100%; }
}
@media (max-width: 767.98px) { .table-responsive { -webkit-overflow-scrolling: touch; } }

.setup-card { border-color: rgba(var(--brand-rgb), .35); background: linear-gradient(135deg, var(--brand-soft), var(--surface) 60%); }
[data-bs-theme="dark"] .setup-card { background: linear-gradient(135deg, var(--brand-soft-dark), var(--surface) 60%); }
.setup-step { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; border-radius: 9px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none !important; font-size: .86rem; font-weight: 520; }
.setup-step:hover { border-color: var(--brand); }
.setup-step i:first-child { color: var(--ink-3); font-size: 1.05rem; }
.setup-step.done { color: var(--ink-3); } .setup-step.done span { text-decoration: line-through; } .setup-step.done i:first-child { color: #16a34a; }

/* ===== Colour-coded menu groups ===== */
.sb-group { --g: #818cf8; margin-top: .45rem; border-radius: 10px; }
.sb-group[data-group="inventory"] { --g: #38bdf8; }
.sb-group[data-group="purchase"]  { --g: #fb923c; }
.sb-group[data-group="sales"]     { --g: #4ade80; }
.sb-group[data-group="insights"]  { --g: #c084fc; }
.sbs-light .sb-group[data-group="inventory"] { --g: #0284c7; } .sbs-light .sb-group[data-group="purchase"] { --g: #ea580c; }
.sbs-light .sb-group[data-group="sales"] { --g: #16a34a; } .sbs-light .sb-group[data-group="insights"] { --g: #9333ea; }
.sb-group-head { color: var(--sb-ink-strong); opacity: 1; font-size: .74rem; letter-spacing: .07em; background: color-mix(in srgb, var(--g) 13%, transparent); }
.sb-group-head:hover { background: color-mix(in srgb, var(--g) 22%, transparent); }
.sb-group-head .sb-gicon { color: var(--g); font-size: 1.05rem; }
.sb-group.open > .sb-group-head { background: color-mix(in srgb, var(--g) 22%, transparent); }
.sb-group .sb-items-inner { margin: 0 0 0 .85rem; padding-left: .4rem; border-left: 2px solid color-mix(in srgb, var(--g) 55%, transparent); }
.sb-group.open .sb-items-inner { margin: .25rem 0 .2rem .85rem; }
.sb-group .sb-link.active { background: color-mix(in srgb, var(--g) 22%, transparent); }
.sb-group .sb-link.active i { color: var(--g); }
body.sbs-brand .sb-group .sb-link.active i, body.sbs-dark .sb-group .sb-link.active i { color: var(--g); }
html.sb-collapsed .sb-group .sb-items-inner { margin-left: 0; padding-left: 0; border-left: 0; }
html.sb-collapsed .sb-group-head { background: var(--sb-line); }

/* ===== Motion: quick, quiet, and switched off for people who prefer reduced motion ===== */
@view-transition { navigation: auto; }
.sb { view-transition-name: sidebar; } .topbar { view-transition-name: topbar; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* individual translate/scale (not transform): Popper positions dropdowns with an inline transform, which an animated transform would override */
@keyframes popIn { from { opacity: 0; translate: 0 -4px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes growX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
.page-head, .content > .alert, .content > .card, .content > form, .content > .settings-grid, .content > .row, .content > .table-responsive, .content > .d-flex { animation: fadeUp .34s cubic-bezier(.2, .7, .2, 1) backwards; }
.content > .card, .content > form { animation-delay: .04s; }
.dash-w { animation: fadeUp .4s cubic-bezier(.2, .7, .2, 1) backwards; }
.dash-w:nth-child(1) { animation-delay: .02s; } .dash-w:nth-child(2) { animation-delay: .07s; } .dash-w:nth-child(3) { animation-delay: .12s; }
.dash-w:nth-child(4) { animation-delay: .17s; } .dash-w:nth-child(5) { animation-delay: .22s; } .dash-w:nth-child(n+6) { animation-delay: .27s; }
.alert { animation: slideIn .3s ease backwards; }
.dropdown-menu.show { animation: popIn .14s ease-out; transform-origin: top right; }
.palette:not([hidden]) { animation: fadeIn .14s ease-out; } .palette:not([hidden]) .palette-box { animation: popIn .18s ease-out; }
.viz-tip { transition: opacity .1s; }
.hfill { transform-origin: left center; animation: growX .6s cubic-bezier(.2, .7, .2, 1) backwards; }
.viz-svg .line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1s ease-out .15s forwards; }
.viz-svg .end { animation: fadeIn .3s ease 1s backwards; }
.spark polyline { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .9s ease-out .3s forwards; }
.card, .btn, .form-control, .form-select, .nav-link, .page-link, .dropdown-item, .setup-step, .opt-card, .swatch, .icon-btn, .user-btn, .search-trigger, .settings-nav-link, .sb-link, .sb-group-head, .badge { transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .2s ease, transform .16s ease, opacity .16s ease; }
.card.stat:hover, .setup-step:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.table tbody tr { transition: background-color .12s ease; }
.swatch:hover { transform: scale(1.12); }
.btn.is-loading { pointer-events: none; opacity: .85; }
.btn .btn-spin { display: inline-block; width: .95em; height: .95em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .6s linear infinite; vertical-align: -.12em; margin-right: .45rem; }
.tab-content > .tab-pane.fade { transition: opacity .2s ease; }
#navbar-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--brand); z-index: 3000; box-shadow: 0 0 8px rgba(var(--brand-rgb), .6); opacity: 0; pointer-events: none; }
#navbar-progress.on { opacity: 1; width: 78%; transition: width 6s cubic-bezier(.1, .8, .2, 1); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .viz-svg .line, .spark polyline { stroke-dashoffset: 0; }
  @view-transition { navigation: none; }
}

.content > form.row { position: relative; z-index: 3; }

/* ===== Form design (order / width / help text set in Settings → Form design) ===== */
.ffgrid { display: flex; flex-wrap: wrap; margin: 0 -.75rem; }
.ffgrid .row { display: contents; }
:where(.ffgrid > *, .ffgrid .row > *) { width: 100%; padding-inline: .75rem; max-width: 100%; }
.ffgrid > .form-check { flex: 0 0 100%; }
@media (min-width: 768px) { [style*="--w:"] { flex: 0 0 auto !important; width: var(--w) !important; } }
[data-help]::after { content: attr(data-help); display: block; font-size: .74rem; color: var(--ink-3); margin-top: .3rem; line-height: 1.35; }

.col-off { display: none !important; }
/* sections and label position on real forms (set up in the Form designer) */
.ff-section { flex: 0 0 100%; width: 100%; padding: .9rem .75rem .35rem; margin-top: .35rem; }
.ff-section span { display: block; font-weight: 650; font-size: .95rem; padding-bottom: .4rem; border-bottom: 1px solid var(--line); }
.ff-section:first-child { margin-top: 0; padding-top: .1rem; }
.ff-left > :not(.ff-section):not(.row), .ff-left .row > :not(.ff-section) { display: grid; grid-template-columns: minmax(110px, 36%) minmax(0, 1fr); column-gap: .85rem; align-items: center; }
.ff-left > :not(.ff-section):not(.row) > .form-label, .ff-left .row > :not(.ff-section) > .form-label { text-align: right; margin: 0 0 1rem; color: var(--ink-2); }
.ff-left > :not(.ff-section):not(.row) > :not(.form-label), .ff-left .row > :not(.ff-section) > :not(.form-label) { grid-column: 2; margin-bottom: 1rem; }
.ff-left [data-help]::after { grid-column: 2; margin-top: -.6rem; margin-bottom: .6rem; }
@media (max-width: 767.98px) { .ff-left > :not(.ff-section):not(.row), .ff-left .row > :not(.ff-section) { display: block; } .ff-left > :not(.ff-section):not(.row) > .form-label, .ff-left .row > :not(.ff-section) > .form-label { text-align: left; margin-bottom: .3rem; } }

/* ===== Form designer (full screen, Zoho-style) ===== */
body.dz-page { background: var(--app-bg); overflow: hidden; }
.dz { --dz-bg: #0f1b3d; --dz-bg2: #14224a; --dz-line: rgba(255,255,255,.12); --dz-ink: #e6ebff; --dz-mute: #9aa8d6; height: 100vh; display: flex; flex-direction: column; }
.dz-top { height: 56px; flex: none; display: flex; align-items: center; gap: .6rem; padding: 0 1rem; background: var(--dz-bg); color: var(--dz-ink); border-bottom: 1px solid var(--dz-line); overflow-x: auto; white-space: nowrap; }
.dz-back { color: var(--dz-ink); width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; font-size: 1.2rem; } .dz-back:hover { background: rgba(255,255,255,.1); color: #fff; }
.dz-title { font-weight: 650; } .dz-sep { width: 1px; height: 22px; background: var(--dz-line); }
.dz-grow { flex: 1; }
.dz-select { background: rgba(255,255,255,.08); color: #fff; border: 1px solid var(--dz-line); border-radius: 8px; padding: .35rem 2rem .35rem .65rem; font-weight: 550; min-width: 210px; }
.dz-select option, .dz-select optgroup { color: #111; }
.dz-btn { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--dz-line); background: rgba(255,255,255,.07); color: var(--dz-ink); padding: .38rem .8rem; border-radius: 8px; font-size: .84rem; font-weight: 550; text-decoration: none !important; }
.dz-btn:hover { background: rgba(255,255,255,.15); color: #fff; } .dz-btn:disabled { opacity: .4; }
.dz-btn.on { background: #fff; color: var(--dz-bg); }
.dz-btn.light { background: #fff; color: #111; } .dz-btn.light:hover { background: #e8edff; color: #111; }
.dz-btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); } .dz-btn.primary:hover { background: var(--brand-600); }
.dz-btn.primary.soft { background: rgba(255,255,255,.14); border-color: transparent; color: #fff; }
.dz-btn.danger { color: #ffb4b4; border-color: rgba(255,120,120,.35); width: 100%; justify-content: center; } .dz-btn.danger:hover { background: rgba(255,90,90,.18); color: #fff; }
.dz-dirty { color: #ffd479; font-size: .78rem; } .dz-dirty i { font-size: .45rem; margin-right: .3rem; vertical-align: middle; }
.dz-seg { display: inline-flex; border: 1px solid var(--dz-line); border-radius: 8px; overflow: hidden; }
.dz-seg button { background: transparent; border: 0; color: var(--dz-mute); padding: .35rem .7rem; font-size: .8rem; font-weight: 550; }
.dz-seg button.on { background: #fff; color: var(--dz-bg); }
.dz-main { flex: 1; min-height: 0; display: flex; }
.dz-left { width: 292px; flex: none; background: var(--dz-bg); color: var(--dz-ink); overflow-y: auto; padding: 1rem .9rem 2rem; border-right: 1px solid var(--dz-line); }
.dz-box-title { font-weight: 650; font-size: .85rem; margin: .2rem 0 .6rem; display: flex; align-items: center; gap: .5rem; } .dz-box-title small { font-weight: 400; color: #ffb4b4; }
.dz-count { background: rgba(255,255,255,.18); border-radius: 99px; padding: 0 .5rem; font-size: .72rem; }
.dz-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; margin-bottom: .8rem; } .dz-types.off { opacity: .35; pointer-events: none; }
.dz-type { display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem; background: var(--dz-bg2); border: 1px solid var(--dz-line); border-radius: 8px; font-size: .8rem; cursor: grab; user-select: none; transition: background-color .15s, transform .15s; }
.dz-type:hover { background: rgba(255,255,255,.14); transform: translateY(-1px); } .dz-type i { font-size: 1rem; opacity: .85; flex: none; } .dz-type span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-wide { width: 100%; background: var(--dz-bg2); color: var(--dz-ink); border: 1px solid var(--dz-line); border-radius: 8px; padding: .55rem; font-size: .8rem; font-weight: 650; letter-spacing: .04em; } .dz-wide:hover { background: rgba(255,255,255,.14); }
.dz-unused { min-height: 46px; display: grid; gap: .35rem; border-radius: 8px; } .dz-unused.drop-into { outline: 2px dashed var(--brand); outline-offset: 2px; }
.dz-un { display: flex; align-items: center; gap: .55rem; padding: .45rem .6rem; background: var(--dz-bg2); border: 1px dashed var(--dz-line); border-radius: 8px; font-size: .8rem; cursor: grab; }
.dz-un span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dz-un button { background: transparent; border: 0; color: var(--dz-ink); } .dz-un button:hover { color: #fff; }
.dz-un-empty { color: var(--dz-mute); font-size: .78rem; padding: .3rem .1rem; }
.dz-help { margin-top: 1.2rem; font-size: .76rem; color: var(--dz-mute); line-height: 1.5; padding-top: .8rem; border-top: 1px solid var(--dz-line); }
.dz-center { flex: 1; min-width: 0; overflow-y: auto; padding: 1.5rem 1.5rem 4rem; }
.dz-paper { max-width: 1000px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 1.2rem 1.4rem 1.5rem; }
.dz-paper-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: .9rem; margin-bottom: .6rem; border-bottom: 1px dashed var(--line-strong); }
.dz-paper-head h2 { font-size: 1.15rem; margin: 0; } .dz-mock-buttons { display: flex; gap: .5rem; } .dz-mock-buttons span { padding: .3rem .8rem; border: 1px solid var(--line-strong); border-radius: 7px; font-size: .8rem; color: var(--ink-2); } .dz-mock-buttons .p { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.dz-sec { margin-top: 1rem; border: 1px dashed var(--line-strong); border-radius: 10px; padding: .5rem .8rem .9rem; }
.dz-sec-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .3rem 0 .6rem; }
.dz-sec-title { border: 0; background: transparent; font-weight: 650; font-size: .95rem; color: var(--ink); min-width: 0; flex: 1; outline: 0; border-bottom: 1px solid transparent; padding: .15rem 0; } .dz-sec-title:hover, .dz-sec-title:focus { border-bottom-color: var(--line-strong); }
.dz-sec-name { font-weight: 650; }
.dz-sec-tools { display: flex; gap: .25rem; opacity: .0; transition: opacity .15s; } .dz-sec:hover .dz-sec-tools, .dz-sec:focus-within .dz-sec-tools, .dz-lines:hover .dz-sec-tools { opacity: 1; }
.dz-sec-tools button { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 7px; padding: .2rem .5rem; font-size: .76rem; } .dz-sec-tools button:hover { border-color: var(--brand); color: var(--brand-text); }
.dz-hint { font-size: .76rem; color: var(--ink-3); }
.dz-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .55rem; min-height: 56px; border-radius: 8px; padding: 2px; } .dz-grid.drop-into { outline: 2px dashed var(--brand); }
.dz-drop-empty { grid-column: 1 / -1; display: grid; place-items: center; color: var(--ink-3); font-size: .82rem; border: 1.5px dashed var(--line-strong); border-radius: 8px; padding: 1rem; }
.dz-tile { grid-column: span var(--span, 12); position: relative; display: flex; align-items: center; gap: .5rem; min-height: 46px; padding: .4rem .5rem .4rem .35rem; background: var(--surface); border: 1px solid var(--line-strong); border-left-width: 1px; border-radius: 8px; cursor: grab; transition: border-color .15s, box-shadow .2s, background-color .15s, transform .15s; user-select: none; }
.dz-tile:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.dz-tile.req { border-left: 4px solid #e11d48; }
.dz-tile.sel { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .2); background: var(--brand-soft); } [data-bs-theme="dark"] .dz-tile.sel { background: var(--brand-soft-dark); }
.dz-tile.fixed { cursor: pointer; } .dz-tile.fixed .dz-grip { display: none; }
.dz-tile.dragging { opacity: .4; }
.dz-tile.drop-before { box-shadow: -5px 0 0 var(--brand); } .dz-tile.drop-after { box-shadow: 5px 0 0 var(--brand); }
.dz-grip { color: var(--ink-3); } .dz-ico { color: var(--ink-3); width: 22px; text-align: center; flex: none; }
.dz-name { flex: 1; min-width: 0; font-size: .85rem; font-weight: 520; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-star { color: #e11d48; } .dz-cf { margin-left: .5rem; font-style: normal; font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; background: var(--brand-soft); color: var(--brand-text); border-radius: 5px; padding: .08rem .35rem; }
[data-bs-theme="dark"] .dz-cf { background: var(--brand-soft-dark); }
.dz-more { border: 0; background: transparent; color: var(--ink-3); width: 26px; height: 26px; border-radius: 6px; flex: none; } .dz-more:hover { background: var(--surface-2); color: var(--ink); }
.dz-faux { display: none; }
/* preview: looks like the real form */
.dz-paper.preview .dz-sec { border: 0; padding: 0 0 .4rem; margin-top: .6rem; } .dz-paper.preview .dz-sec-head { border-bottom: 1px solid var(--line); margin-bottom: .6rem; padding-bottom: .4rem; }
.dz-paper.preview .dz-tile { display: block; border: 0; background: transparent; box-shadow: none; padding: .35rem .45rem; min-height: 0; cursor: default; }
.dz-paper.preview .dz-tile.req { border-left: 0; } .dz-paper.preview .dz-grip, .dz-paper.preview .dz-ico, .dz-paper.preview .dz-more, .dz-paper.preview .dz-cf { display: none; }
.dz-paper.preview .dz-name { display: block; font-size: .8rem; font-weight: 600; color: var(--ink-2); margin-bottom: .25rem; }
.dz-paper.preview .dz-faux { display: block; } .dz-paper.preview .dz-faux::before { content: ''; display: block; height: 34px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); }
.dz-faux small { display: block; font-size: .72rem; color: var(--ink-3); margin-top: .25rem; }
.dz-paper.preview.left .dz-tile { display: grid; grid-template-columns: 36% 1fr; gap: .8rem; align-items: center; } .dz-paper.preview.left .dz-name { text-align: right; margin: 0; } .dz-paper.preview.left .dz-faux small { margin-top: .2rem; }
.dz-paper.preview .dz-sec-tools, .dz-paper.preview .dz-drop-empty { display: none; }
.dz-lines { margin-top: 1rem; border: 1px dashed var(--line-strong); border-radius: 10px; padding: .5rem .8rem .9rem; }
.dz-table { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.dz-col { padding: .6rem .7rem; background: var(--surface-2); font-size: .8rem; font-weight: 600; border-right: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: .4rem; }
.dz-col.tog { cursor: pointer; } .dz-col.tog:hover { background: var(--brand-soft); } .dz-col.off { opacity: .45; text-decoration: line-through; }
/* right panel */
.dz-right { width: 330px; flex: none; background: var(--dz-bg); color: var(--dz-ink); overflow-y: auto; border-left: 1px solid var(--dz-line); animation: slideIn .25s ease; }
.dz-right-head { display: flex; justify-content: space-between; align-items: center; padding: .9rem 1rem; border-bottom: 1px solid var(--dz-line); } .dz-right-head > div > i { width: 34px; height: 34px; display: grid; place-items: center; background: rgba(255,255,255,.1); border-radius: 9px; }
.dz-x { background: transparent; border: 0; color: var(--dz-ink); width: 30px; height: 30px; border-radius: 6px; } .dz-x:hover { background: rgba(255,255,255,.12); }
.dz-right-body { padding: 1rem; }
.dz-lbl { display: block; font-size: .76rem; font-weight: 600; margin: .9rem 0 .3rem; color: var(--dz-mute); } .dz-lbl:first-child { margin-top: 0; }
.dz-in { width: 100%; background: rgba(255,255,255,.07); border: 1px solid var(--dz-line); color: #fff; border-radius: 8px; padding: .45rem .6rem; font-size: .86rem; } .dz-in:focus { outline: 2px solid var(--brand); border-color: transparent; } .dz-in:disabled { opacity: .55; } .dz-in option { color: #111; }
.dz-in::placeholder { color: rgba(255,255,255,.35); }
.dz-seg.w { display: grid; grid-template-columns: repeat(4, 1fr); } .dz-seg.w button { border: 1px solid var(--dz-line); margin: -1px 0 0 -1px; padding: .35rem 0; }
.dz-row { display: flex; justify-content: space-between; align-items: center; padding: .65rem 0; border-bottom: 1px solid var(--dz-line); font-size: .85rem; }
.dz-sw { position: relative; display: inline-block; width: 38px; height: 22px; margin: 0; } .dz-sw input { opacity: 0; width: 0; height: 0; }
.dz-sw i { position: absolute; inset: 0; background: rgba(255,255,255,.2); border-radius: 22px; transition: background-color .2s; } .dz-sw i::before { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform .2s; }
.dz-sw input:checked + i { background: var(--brand); } .dz-sw input:checked + i::before { transform: translateX(16px); }
.dz-note { font-size: .76rem; color: var(--dz-mute); margin-top: .5rem; line-height: 1.4; }
.dz-pop { position: absolute; z-index: 3000; min-width: 190px; background: #fff; color: #1b2130; border-radius: 10px; box-shadow: 0 12px 38px rgba(0,0,0,.28); padding: .35rem; animation: popIn .12s ease-out; }
[data-bs-theme="dark"] .dz-pop { background: #1c2230; color: #e8ebf2; }
.dz-pop button { display: flex; align-items: center; gap: .55rem; width: 100%; background: transparent; border: 0; text-align: left; padding: .5rem .65rem; font-size: .84rem; border-radius: 7px; color: inherit; } .dz-pop button:hover, .dz-pop button.on { background: rgba(var(--brand-rgb), .12); } .dz-pop button.danger { color: #e11d48; }
@media (max-width: 1100px) { .dz-left { width: 220px; } .dz-types { grid-template-columns: 1fr; } .dz-right { position: fixed; right: 0; top: 56px; bottom: 0; z-index: 50; box-shadow: -10px 0 30px rgba(0,0,0,.35); } }
@media (max-width: 760px) { .dz-main { flex-direction: column; overflow-y: auto; } .dz-left { width: 100%; max-height: 260px; } .dz-center { overflow: visible; padding: 1rem .7rem 5rem; } .dz-tile { grid-column: span 12 !important; } .dz-right { width: 100%; } .dz-top .dz-btn span { display: none; } }

/* item variants: roomy inputs (the table scrolls sideways on small screens) */
#variantTable input.form-control { min-width: 96px; } #variantTable th, #variantTable td { white-space: nowrap; }

/* ---- record pages (detail view): header, related list, overview / timeline ---- */
.rec-top { display: flex; align-items: center; gap: .85rem; margin-bottom: 1rem; flex-wrap: wrap; }
.rec-back { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-2); border: 1px solid var(--line); }
.rec-back:hover { background: var(--surface-2); color: var(--ink); }
.rec-avatar { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; font-size: 1.15rem; color: var(--brand-text); background: color-mix(in srgb, var(--brand) 14%, var(--surface)); }
.rec-title { min-width: 0; flex: 1; } .rec-title h1 { font-size: 1.35rem; margin: 0; line-height: 1.2; overflow-wrap: anywhere; }
.rec-badges { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .15rem; } .rec-badges:empty { display: none; }
.rec-actions { display: flex; align-items: center; gap: .4rem; }
.rec-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.rec-side { position: sticky; top: calc(var(--topbar-h) + 12px); display: flex; flex-direction: column; gap: 2px; font-size: .86rem; }
.rec-side-h { font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin: 0 0 .35rem .6rem; }
.rec-side a { padding: .38rem .6rem; border-radius: 7px; color: var(--ink-2); } .rec-side a:hover, .rec-side a.on { background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand-text); }
.rec-tabs { display: inline-flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; margin-bottom: 1rem; }
.rec-tabs button { border: 0; background: none; padding: .3rem 1rem; border-radius: 999px; font-size: .86rem; color: var(--ink-2); }
.rec-tabs button.on { background: var(--surface); color: var(--brand-text); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.rec-summary .card-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem 1.5rem; }
.rec-summary, .rec-sec { margin-bottom: 1rem; } .rec-sec .card-header { font-weight: 600; }
.rec-grid { display: grid; gap: .85rem 2rem; } .rec-grid.c1 { grid-template-columns: 1fr; } .rec-grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rec-grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rec-kv { display: flex; flex-direction: column; min-width: 0; } .rec-kv span { font-size: .76rem; color: var(--ink-3); } .rec-kv b { font-weight: 500; overflow-wrap: anywhere; }
.rec-tl { list-style: none; margin: 0; padding: 0 0 0 .4rem; border-left: 2px solid var(--line); }
.rec-tl li { position: relative; display: flex; gap: .6rem; padding: 0 0 1rem .9rem; } .rec-tl .dot { position: absolute; left: -7px; top: .35rem; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }
.rec-note { padding: .6rem 0; border-top: 1px solid var(--line); } .rec-note:first-of-type { border-top: 0; }
@media (max-width: 991px) { .rec-layout { grid-template-columns: minmax(0, 1fr); } .rec-layout > * { min-width: 0; } .rec-side { position: static; flex-direction: row; overflow-x: auto; gap: .3rem; padding-bottom: .4rem; } .rec-side-h { display: none; } .rec-side a { white-space: nowrap; border: 1px solid var(--line); } .rec-grid.c2, .rec-grid.c3 { grid-template-columns: 1fr; } }

/* designer: Edit page / Detail page tabs */
.page-layout-link { font-size: .8rem; font-weight: 500; margin-left: .9rem; color: var(--brand-text); vertical-align: middle; white-space: nowrap; } .page-layout-link:hover { text-decoration: underline; }
@media print { .page-layout-link { display: none; } }
.rec-actions { flex-wrap: wrap; justify-content: flex-end; } .rec-actions form { margin: 0; display: inline-block; }
.rec-actions .btn:not(.btn-sm) { padding: .32rem .75rem; font-size: .84rem; }

/* ---- profile menu ---- */
.avatar-lg { width: 42px; height: 42px; font-size: 1.05rem; flex: none; }
.dropdown-menu.pm { width: 300px; padding: 0; overflow: hidden; border-radius: 14px; }
.pm-head { display: flex; gap: .75rem; align-items: center; padding: .95rem 1rem; background: color-mix(in srgb, var(--brand) 7%, var(--surface)); border-bottom: 1px solid var(--line); }
.pm-who { min-width: 0; } .pm-name { font-weight: 650; line-height: 1.2; overflow-wrap: anywhere; } .pm-mail { font-size: .78rem; color: var(--ink-2); overflow-wrap: anywhere; } .pm-role { font-size: .72rem; color: var(--ink-3); margin-top: .1rem; }
.pm-list { padding: .35rem; }
.pm-item { display: flex; align-items: center; gap: .65rem; padding: .5rem .65rem; border-radius: 8px; color: var(--ink); font-size: .88rem; width: 100%; background: none; border: 0; text-align: left; }
.pm-item i { width: 1.1rem; text-align: center; color: var(--ink-3); } .pm-item:hover { background: var(--surface-2); color: var(--ink); } .pm-item:hover i { color: var(--brand-text); }
.pm-theme { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .6rem 1rem; border-top: 1px solid var(--line); font-size: .84rem; color: var(--ink-2); }
.pm-seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
.pm-seg button { border: 0; background: none; padding: .2rem .55rem; border-radius: 999px; font-size: .75rem; color: var(--ink-2); display: inline-flex; gap: .25rem; align-items: center; }
.pm-seg button.on { background: var(--surface); color: var(--brand-text); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.pm-foot { margin: 0; padding: .35rem; border-top: 1px solid var(--line); } .pm-out:hover, .pm-out:hover i { color: var(--bs-danger); }
@media (max-width: 400px) { .dropdown-menu.pm { width: min(300px, calc(100vw - 24px)); } }

/* ---- supplier rate list ---- */
.rl-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.rl-title { font-weight: 650; display: flex; gap: .45rem; align-items: center; } .rl-title i { color: var(--brand-text); }
.rl-sub { font-size: .78rem; color: var(--ink-3); margin-top: .1rem; } .rl-tools { display: flex; gap: .4rem; align-items: center; }
.rl-bar { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .6rem 1rem; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.rl-search { position: relative; flex: 1; max-width: 320px; } .rl-search i { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: .8rem; }
.rl-search input { width: 100%; padding: .35rem .7rem .35rem 2rem; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); font-size: .85rem; color: var(--ink); }
.rl-table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); font-weight: 600; background: transparent; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rl-table td { padding-top: .7rem; padding-bottom: .7rem; } .rl-old { color: var(--ink-3); background: color-mix(in srgb, var(--ink) 3%, transparent); }
.rl-empty { display: flex; align-items: center; gap: 1rem; padding: 1.4rem 1.2rem; } .rl-empty > i { font-size: 1.8rem; color: var(--brand-text); opacity: .7; }
.modal-content { border-radius: 14px; border: 1px solid var(--line); } .modal-body .form-label { font-size: .8rem; font-weight: 600; color: var(--ink-2); margin-bottom: .25rem; }

/* ---- tabbed activity card ---- */
.act-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; font-weight: 650; }
.act-tabs { margin: 0; } .act-n { font-size: .7rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 0 .4rem; margin-left: .15rem; color: var(--ink-3); }
.rec-tabs button.on .act-n { background: color-mix(in srgb, var(--brand) 14%, var(--surface)); color: var(--brand-text); border-color: transparent; }
.act-table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); font-weight: 600; background: transparent; }
.act-empty { display: flex; align-items: center; gap: .6rem; padding: 1.3rem 1.2rem; color: var(--ink-3); } .act-empty i { font-size: 1.2rem; }
.act-foot { padding: .6rem 1rem; border-top: 1px solid var(--line); font-size: .85rem; text-align: right; }

/* ---- Save / Cancel beside the page heading ---- */
.page-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .page-actions:empty { display: none; }
.page-head.has-actions { position: sticky; top: var(--topbar-h); z-index: 1015; background: var(--app-bg); margin: -.35rem 0 1rem; padding: .6rem 0; align-items: center; border-bottom: 1px solid transparent; }
.page-head.has-actions .page-layout-link { margin-left: .75rem; }
@media (max-width: 575px) { .page-head.has-actions { position: static; } .page-actions { width: 100%; } .page-actions .btn { flex: 1; } }

/* ---- item search panel (line editors) ---- */
.ip-list { position: absolute; left: 0; top: calc(100% + 4px); z-index: 1050; min-width: 440px; width: max-content; max-width: min(640px, 92vw); max-height: 340px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow-lg); padding: .3rem; }
.ip-list.up { top: auto; bottom: calc(100% + 4px); } .ip-list[hidden] { display: none; }
.ip-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .5rem .65rem; border-radius: 8px; cursor: pointer; }
.ip-row.on { background: color-mix(in srgb, var(--brand) 11%, transparent); }
.ip-title { font-weight: 550; font-size: .88rem; line-height: 1.25; } .ip-sub { font-size: .76rem; color: var(--ink-3); margin-top: .1rem; }
.ip-side { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; flex: none; } .ip-right { font-weight: 600; font-size: .85rem; font-variant-numeric: tabular-nums; }
.ip-tag { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 0 .45rem; color: var(--ink-2); }
.ip-msg { padding: .8rem .9rem; font-size: .84rem; color: var(--ink-3); }
@media (max-width: 575px) { .ip-list { min-width: 0; width: calc(100vw - 48px); } }

/* ---- line tables: every box on one line, nothing floats up or down ---- */
#lineTable > tbody > tr > td { vertical-align: top; padding: .6rem .5rem; }
#lineTable td .form-control-sm, #lineTable td .form-select-sm { height: 31px; }
#lineTable td input.form-control { display: inline-block; vertical-align: top; }
#lineTable td .text-muted.small:not(.form-text) { display: inline-block; line-height: 31px; margin-left: .35rem; vertical-align: top; }
#lineTable td .form-text:empty { display: none; } #lineTable td .form-text { margin-top: .2rem; }
#lineTable td.line-total, #lineTable td.text-end.line-total { line-height: 31px; padding-top: .6rem; }
#lineTable td > .btn, #lineTable td .btn-sm { height: 31px; display: inline-flex; align-items: center; }

/* ---- list pages ---- */
.page-head.has-tools { align-items: center; }
.col-picker-btn { width: 30px; height: 30px; padding: 0; display: inline-grid; place-items: center; border: 1px solid transparent; border-radius: 8px; color: var(--ink-3); background: transparent; }
.col-picker-btn:hover, .col-picker.show .col-picker-btn { background: var(--surface-2); border-color: var(--line); color: var(--brand-text); }
th.col-th { text-align: right; width: 1%; white-space: nowrap; padding-top: .3rem; padding-bottom: .3rem; } th.col-th .dropdown-menu { text-align: left; text-transform: none; letter-spacing: 0; font-weight: 400; }

/* ---- item page: variants table with expandable rolls ---- */
.var-table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); font-weight: 600; background: transparent; }
.var-rolls { margin: 0 0 .25rem; border-bottom: 1px solid var(--line); background: var(--surface-2); } .var-rolls summary { cursor: pointer; padding: .45rem 1rem; font-size: .82rem; color: var(--ink-2); list-style: none; display: flex; gap: .4rem; align-items: center; }
.var-rolls summary::-webkit-details-marker { display: none; } .var-rolls summary::after { content: '\F282'; font-family: bootstrap-icons; margin-left: auto; font-size: .7rem; transition: transform .15s; } .var-rolls[open] summary::after { transform: rotate(180deg); }
.var-rolls table { background: var(--surface); }
#variantTable input.form-control { min-width: 84px; }

/* designer: summary strip lives in the canvas, exactly where the detail page shows it */
.dz-sumbar { margin: 0 0 1rem; padding: .7rem .9rem .8rem; border: 1.5px dashed color-mix(in srgb, var(--brand) 45%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--brand) 5%, transparent); }
.dz-sumbar.drop-into { border-style: solid; background: color-mix(in srgb, var(--brand) 12%, transparent); }
.dz-sum-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .55rem; }
.dz-sum-head b { font-size: .86rem; } .dz-sum-head span { font-size: .74rem; color: var(--ink-3); flex: 1; }
.dz-sum-head button { border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: .2rem .6rem; font-size: .76rem; font-weight: 600; color: var(--brand); }
.dz-sum-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem .9rem; }
.dz-sum-chip { position: relative; padding: .35rem 1.6rem .35rem .6rem; border-radius: 8px; background: var(--card); border: 1px solid var(--line); }
.dz-sum-chip span { display: block; font-size: .7rem; color: var(--ink-3); } .dz-sum-chip b { font-weight: 500; color: var(--ink-3); }
.dz-sum-chip button { position: absolute; top: .25rem; right: .25rem; border: 0; background: none; color: var(--ink-3); line-height: 1; padding: .1rem; }
.dz-sum-chip button:hover { color: #e11d48; }
.dz-pin { margin-left: .4rem; color: var(--brand); font-size: .75rem; }
.dz-sysb { background: #fef3c7; color: #92400e; }
[data-bs-theme="dark"] .dz-sysb { background: #422006; color: #fcd34d; }
.dz-tile.sys .dz-ico { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #b45309; }
.dz-relrow { display: flex; align-items: center; gap: .6rem; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: 9px; background: var(--card); margin-bottom: .4rem; }
.dz-relrow > i { color: var(--ink-3); } .dz-relrow > span:not(.dz-lock) { flex: 1; font-weight: 600; font-size: .88rem; }
.dz-relrow.off { opacity: .55; } .dz-relrow.off > span:not(.dz-lock) { text-decoration: line-through; }
.dz-relrow button { border: 0; background: none; color: var(--ink-2); padding: .15rem .35rem; border-radius: 6px; } .dz-relrow button:hover:not(:disabled) { background: var(--bg-soft, rgba(127,127,127,.12)); }
.dz-relrow button:disabled { opacity: .3; } .dz-lock { color: var(--ink-3); padding: .15rem .35rem; }
.rl-modal-sep { margin: 1.1rem 0 .8rem; padding-top: .9rem; border-top: 1px solid var(--line); font-weight: 650; font-size: .86rem; }