/* Myyslot workspace: shared visual system and responsive application layouts. */
:root {
  --blue: #2855df;
  --blue-light: #edf2ff;
  --ink: #18243c;
  --muted: #616f86;
  --line: #e2e7ef;
  --bg: #f4f6fa;
  --green: #126c51;
  --radius: 16px;
  --sidebar-width: 242px;
}
html { scroll-padding-top: 90px; -webkit-tap-highlight-color: #2855df18; }
body { font-size: 14px; line-height: 1.65; }
h1,h2,h3 { text-wrap: balance; }
h1 { font-size: 28px; letter-spacing: -.7px; }
.icon { display: inline-block; flex-shrink: 0; vertical-align: middle; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 12px 20px; background: #fff; border: 2px solid var(--blue); border-radius: 8px; }
.skip-link:focus { top: 12px; }
.workspace:focus,.auth-main:focus { outline: none; }
.sidebar { width: var(--sidebar-width); padding: 28px 16px 18px; background: #fff; }
.sidebar .brand-lockup { padding: 0 16px 20px; border-bottom: 1px solid var(--line); }
.sidebar .brand-lockup img { width: 174px; }
.brand-lockup small { color: #64728b; font-size: 10px; letter-spacing: 2px; margin-top: 4px; }
.sidebar nav { padding: 0 0 12px; flex: 1; overscroll-behavior: contain; }
.nav-label { margin: 22px 16px 9px; color: #6f7c91; font-size: 11px; letter-spacing: 1.2px; }
.sidebar nav a,.mobile-drawer nav a { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 3px 0; padding: 10px 16px; border-radius: 9px; font-size: 13px; font-weight: 550; color: #55647c; }
.sidebar nav a:hover,.mobile-drawer nav a:hover { background: #f3f6fb; text-decoration: none; color: var(--ink); }
.sidebar nav a.active,.mobile-drawer nav a.active { background: #edf2ff; color: #234fd4; font-weight: 650; box-shadow: inset 3px 0 #2855df; }
.sidebar-note { display: flex; gap: 10px; align-items: center; padding: 17px 12px 0; border-top: 1px solid var(--line); font-size: 11px; color: #61718c; }
.sidebar-note .icon { width: 17px; height: 17px; }
.sidebar-note small { padding: 0; font-size: 10px; color: #718096; margin: 2px 0 0; }
.app-main { margin-left: var(--sidebar-width); min-width: 0; min-height: 100vh; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; height: 72px; min-height: 72px; padding: 0 34px; background: #fffffffa; }
.topbar-location { display: flex; align-items: center; gap: 16px; min-width: 0; font-size: 12px; }
.topbar-brand { color: #33425c; font-size: 11px; font-weight: 750; letter-spacing: 1.3px; }
.breadcrumb-divider { color: #bac3d3; }
.current-location { color: #66758b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-actions { gap: 10px; }
.role { background: #f5f7fb; color: #55647c; padding: 4px 9px; font-size: 11px; }
.user-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #edf2ff; color: var(--blue); font-weight: 700; font-size: 12px; }
.username { max-width: 120px; }
.text-button { min-height: 40px; padding: 8px; color: #58677f; }
.workspace { width: 100%; max-width: 1600px; padding: 32px 34px 40px; flex: 1; }
.workspace-footer { display: flex; gap: 16px; padding: 20px 34px; color: #697990; font-size: 11px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.workspace-footer>span:first-child { font-size: 10px; font-weight: 750; letter-spacing: 1.5px; }
.workspace-footer a { margin-left: auto; color: #63738d; }
.page-heading { gap: 20px; margin-bottom: 26px; align-items: center; }
.page-heading>div:first-child { flex: 1; min-width: 0; }
.page-heading p { font-size: 13px; max-width: 800px; line-height: 1.8; }
.eyebrow { font-size: 10px; letter-spacing: 1.7px; margin-bottom: 10px; }
.heading-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.button { font-size: 13px; min-height: 44px; padding: 10px 17px; border-radius: 9px; gap: 8px; box-shadow: 0 2px 3px #17213a06; transition: background .15s, border-color .15s; }
.button.secondary { border-color: #d7dfeb; color: #3c4c66; }
.button.secondary:hover { border-color: #afbed8; background: #f5f8fe; }
.button:disabled { cursor: wait; opacity: .72; }
.subtle-link { font-size: 13px; }
.icon-button { width: 44px; height: 44px; padding: 10px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); }
.icon-button:hover { background: #edf2ff; }
.menu-toggle { display: none; }
.stats { gap: 16px; margin-bottom: 24px; }
.stat { padding: 23px 24px 20px; box-shadow: 0 3px 8px #15274803; position: relative; }
.stat>span { font-size: 12px; color: #63718b; }
.stat>strong { font-size: clamp(24px,2.25vw,34px); letter-spacing: -.7px; margin: 14px 0 8px; font-weight: 650; }
.stat>strong small { font-size: 12px; }
.stat p { font-size: 11px; color: #69778d; }
.stat.accent { background: #2855df; border-color: #2855df; box-shadow: 0 5px 12px #2855df18; }
.stat.accent>span,.stat.accent p { color: #e0e8ff; }
.stat-link { color: inherit; text-decoration: none; display: block; }
.stat-link:hover { text-decoration: none; }
.stat-link:hover strong { text-decoration: underline; text-underline-offset: 5px; }
.stat-foot { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.stat-foot .icon { width: 15px; height: 15px; }
.section-label { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 12px; }
.section-label h2 { font-size: 14px; margin: 0; }
.section-label>span { font-size: 11px; color: var(--muted); }
.quick-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-bottom: 24px; }
.quick-action { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 13px; background: #fff; padding: 18px; color: var(--ink); min-width: 0; }
.quick-action:hover { border-color: #a9bcec; background: #fcfdff; text-decoration: none; }
.quick-action>.icon { width: 36px; height: 36px; padding: 8px; box-sizing: content-box; border-radius: 11px; background: #f0f4ff; color: var(--blue); }
.quick-action>span { flex: 1; min-width: 0; }
.quick-action b { display: block; font-size: 14px; }
.quick-action small { display: block; color: #67758b; font-size: 11px; margin-top: 3px; }
.quick-action .quick-arrow { width: 16px; height: 16px; padding: 0; background: none; }
.schedule-strip { padding: 15px 20px; background: #eaf0fa; border-color: #dfe7f4; font-size: 12px; color: #556782; gap: 12px 24px; }
.panel { box-shadow: 0 3px 8px #15274802; }
.panel-heading { padding: 22px 24px; flex-wrap: wrap; }
.panel-heading h2 { font-size: 16px; }
.panel-heading p { font-size: 12px; line-height: 1.7; }
.panel-heading>div { min-width: 0; }
table { font-size: 13px; }
th { padding: 13px 20px; font-size: 11px; color: #586a84; font-weight: 600; background: #f7f9fc; }
td { padding: 19px 20px; border-color: #edf0f5; }
td small { font-size: 11px; color: #66758c; }
tbody tr:hover { background: #f9fbff; }
.numeric { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
td.numeric,th.numeric { text-align: right; }
td.numeric small { text-align: right; max-width: none; }
.badge { font-size: 11px; padding: 4px 9px; border-radius: 6px; font-weight: 550; background: #eef1f6; color: #566780; }
.badge.published { background: #fff4dc; color: #895b12; }
.badge.partial { background: #eef1ff; color: #4257af; }
.badge.settled { background: #e8f5ee; color: #126344; }
.statement-table { min-width: 770px; }
.table-scroll-hint { display: none; margin: 0; padding: 8px 20px; border-bottom: 1px solid var(--line); background: #f7f9fd; color: #60718d; font-size: 11px; }
.table-wrap.is-scrollable>.table-scroll-hint { display: block; }
.table-wrap { position: relative; min-width: 0; }
.table-wrap:focus-visible { outline-offset: -3px; }
.filters { padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: 13px; gap: 14px; margin-bottom: 20px; }
.filters label { font-size: 12px; color: #4e607b; }
.filters .search-field { flex: 1; min-width: 220px; }
.filters select,.filters input { margin-top: 7px; font-size: 13px; }
.filter-summary { color: #62728c; font-size: 12px; margin: -5px 0 15px; }
.filter-chips { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 18px; padding-bottom: 4px; }
.filter-chips a { display: inline-flex; min-height: 40px; align-items: center; padding: 8px 13px; border: 1px solid #dce3ee; border-radius: 8px; color: #596b85; font-size: 12px; background: #fff; white-space: nowrap; }
.filter-chips a:hover,.filter-chips a[aria-current] { color: var(--blue); border-color: #b4c4fa; background: #edf2ff; text-decoration: none; }
.form-panel { max-width: 820px; padding: 30px 32px; }
.field { margin-bottom: 23px; min-width: 0; }
.field>label,.share-panel label { font-size: 13px; color: #33445e; margin-bottom: 8px; }
.required { color: #b34840; }
input:not([type=checkbox]):not([type=hidden]),select,textarea { border-color: #ced7e5; min-height: 46px; border-radius: 8px; padding: 11px 13px; font-size: 14px; background: #fff; color: #1b2c46; }
input:hover,select:hover,textarea:hover { border-color: #acbbd3; }
input:focus,select:focus,textarea:focus { border-color: var(--blue); }
input[readonly] { background: #f7f9fc; color: #55647b; }
input:disabled,select:disabled,textarea:disabled { background: #f1f3f7; color: #61718b; cursor: not-allowed; }
input[type=file] { padding: 10px; background: #f8faff; border-style: dashed; }
input[type=file]::file-selector-button { padding: 8px 12px; border: 1px solid #ccd8ed; border-radius: 6px; margin-right: 12px; background: #fff; color: #274ca9; cursor: pointer; }
.check-label { min-height: 40px; font-size: 13px; line-height: 1.7; cursor: pointer; }
.help { font-size: 12px; color: #65748c; margin-top: 7px; }
.errorlist { font-size: 13px; color: #ad3333; }
[aria-invalid=true] { border-color: #b84343!important; background: #fffafa!important; }
.field-error { border-left: 3px solid #b84343; padding-left: 14px; }
.form-actions { padding-top: 24px; gap: 12px; }
.notice { padding: 16px 20px; font-size: 13px; background: #edf3ff; color: #395786; line-height: 1.8; }
.message { font-size: 13px; }
.message.warning { color: #805411; border-color: #efddad; background: #fff8e8; }
.warning-text { color: #91600f; font-size: 13px; }
.tags span,.tag { font-size: 11px; color: #586983; }
.empty { padding: 50px 24px; }
.empty p,.guide-panel p { font-size: 13px; color: #65738b; }
.empty h3 { font-size: 17px; }
.agent-grid { grid-template-columns: repeat(auto-fit,minmax(min(280px,100%),1fr)); }
.agent-card { padding: 25px; }
.agent-card p,.agent-card-footer,.staff-scope,.permission-list { font-size: 12px; }
.agent-card-footer { margin-top: auto; padding-top: 17px; }
.agent-card { display: flex; flex-direction: column; }
.agent-card-top { margin-bottom: 18px; }
.staff-scope { line-height: 1.8; }
.scope-options label { min-height: 42px; font-size: 13px; cursor: pointer; padding: 6px 8px; border-radius: 6px; }
.scope-options label:hover { background: #f1f5ff; }
.scope-fieldset { padding: 16px; }
.scope-options { overscroll-behavior: contain; }
.vault-table { min-width: 1180px; }
.vault-table td { vertical-align: top; }
.vault-table td:first-child { min-width: 160px; }
.vault-table .vault-note { max-width: 200px; }
.vault-table .actions { gap: 8px; flex-direction: column; align-items: flex-start; }
.vault-table .actions a { white-space: nowrap; min-height: 30px; }
.vault-account { font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: 12px; overflow-wrap: anywhere; }
.vault-authenticator { min-width: 140px; max-width: 190px; }
.vault-authenticator .badge { margin-bottom: 4px; }
.password-mask { color: #637189; letter-spacing: 1px; }
.vault-memo p { font-size: 13px; }
.bill-banner { background: #224aca; padding: 28px 30px; }
.bill-banner strong { font-size: clamp(30px,3vw,42px); }
.bill-banner small { font-size: 12px; color: #e3eaff; }
.bill-banner span { color: #e0e8ff; }
.bill-balance strong { font-size: 28px; }
.bill-actions { padding: 4px 0; gap: 10px; }
.bill-summary { font-size: 12px; }
.bill-summary b { font-size: 16px; }
.bill-note,.payment-row,.attachment-row,.issue>p { font-size: 13px; }
.payment-row small,.issue small { font-size: 11px; }
.rule-row,.rule-summary { font-size: 12px; }
.batch-context { gap: 16px 30px; }
.batch-context span { font-size: 12px; color: #61718a; }
.batch-context b { color: var(--ink); font-size: 20px; font-variant-numeric: tabular-nums; }
.batch-estimate { font-size: 13px; line-height: 1.8; color: #264f9f; }
details summary { font-size: 13px; min-height: 38px; padding: 6px 0; font-weight: 550; }
.stepper { display: flex; margin: 0 0 26px; padding: 0; gap: 24px; list-style: none; flex-wrap: wrap; }
.stepper li { display: flex; align-items: center; gap: 9px; color: #677790; font-size: 12px; }
.stepper b { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; border: 1px solid #ccd6e6; font-size: 11px; }
.stepper li[aria-current] { color: #244dc8; font-weight: 650; }
.stepper li[aria-current] b { border-color: #2855df; color: #fff; background: #2855df; }
.upload-layout { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(240px,1fr); gap: 24px; align-items: start; }
.upload-layout .form-panel { width: 100%; }
.upload-guide { padding: 26px; background: #edf2fb; border: 1px solid #e0e7f3; border-radius: 14px; }
.upload-guide h2 { font-size: 16px; }
.upload-guide ol { margin: 18px 0 0; padding-left: 20px; }
.upload-guide li { padding: 0 0 18px 4px; font-size: 13px; color: #5b6d89; }
.upload-guide b { display: block; color: #2c405f; margin-bottom: 4px; }
.auth-main { max-width: 1220px; padding: 40px; }
.auth-layout { min-height: calc(100dvh - 80px); gap: 88px; }
.auth-intro { padding: 30px 5px; }
.auth-intro h1 { font-size: 52px; line-height: 1.35; }
.auth-intro p { color: #616f86; }
.auth-intro>small { color: #6b7890; font-size: 11px; }
.auth-card { padding: 42px; border-radius: 20px; box-shadow: 0 12px 38px #23396006; }
.auth-card>p { font-size: 13px; }
.auth-foot { color: #66758c; font-size: 12px!important; }
.auth-lines { color: #6c7e99; }
.auth-lines b { color: #485d7d; }
.mobile-drawer { width: min(320px,88vw); height: 100dvh; max-height: 100dvh; margin: 0; padding: 18px 16px max(24px,env(safe-area-inset-bottom)); border: 0; border-right: 1px solid var(--line); background: #fff; color: var(--ink); overscroll-behavior: contain; }
.mobile-drawer::backdrop { background: #17294466; }
.drawer-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 10px; border-bottom: 1px solid var(--line); }
body:has(.mobile-drawer[open]) { overflow: hidden; }
@media(min-width:1500px) { .workspace { padding: 40px 48px; } .topbar { padding: 0 48px; } }
@media(max-width:1180px) {
  :root { --sidebar-width: 216px; }
  .sidebar { padding: 24px 12px 16px; }
  .sidebar .brand-lockup { padding-left: 12px; padding-right: 12px; }
  .workspace { padding: 28px 24px; }
  .topbar { padding: 0 24px; }
  .stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .stat { padding: 20px 18px; }
  .quick-action { padding: 16px 13px; gap: 9px; }
  .quick-action>.icon { width: 24px; height: 24px; }
  .quick-action b { font-size: 13px; }
  .quick-action small { font-size: 11px; }
  .quick-action .quick-arrow { display: none; }
  .auth-layout { gap: 48px; }
}
@media(max-width:900px) {
  .sidebar { display: none; }
  .app-main { margin-left: 0; }
  .menu-toggle { display: inline-flex; }
  .topbar { height: 64px; min-height: 64px; }
  .workspace { padding: 28px 24px 40px; }
  .stat>strong { font-size: 26px; }
  .topbar-location { gap: 12px; }
  .upload-layout { grid-template-columns: 1fr; }
  .upload-guide ol { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
  .upload-guide li { padding-bottom: 0; }
  .auth-intro h1 { font-size: 44px; }
}
@media(max-width:680px) {
  h1,.page-heading h1 { font-size: 25px; }
  .workspace { padding: 24px 16px 32px; }
  .topbar { padding: 0 max(16px,env(safe-area-inset-right)); gap: 8px; }
  .topbar-location { gap: 10px; }
  .topbar-brand,.breadcrumb-divider { display: none; }
  .current-location { font-size: 13px; font-weight: 600; color: #33445f; max-width: 120px; }
  .username { max-width: 70px; }
  .role { display: none; }
  .user-actions { gap: 4px; }
  .user-avatar { width: 27px; height: 27px; }
  .page-heading { flex-wrap: wrap; gap: 16px; margin-bottom: 22px; align-items: flex-start; }
  .page-heading>div:first-child { flex-basis: 100%; }
  .page-heading p { font-size: 12px; }
  .page-heading .button { min-height: 44px; font-size: 13px; padding: 10px 15px; }
  .heading-actions { width: 100%; }
  .heading-actions .button { flex: 1; }
  .stats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .stat { padding: 18px 15px; border-radius: 12px; }
  .stat>strong { font-size: 24px; margin: 10px 0 7px; }
  .stat>strong small { font-size: 11px; }
  .stat>span { font-size: 12px; }
  .stat p { font-size: 11px; }
  .quick-grid { grid-template-columns: 1fr; gap: 9px; }
  .quick-action { padding: 13px 16px; }
  .quick-action>.icon { width: 22px; height: 22px; padding: 9px; }
  .quick-action b { font-size: 13px; }
  .quick-action .quick-arrow { display: block; width: 16px; height: 16px; padding: 0; }
  .section-label>span { font-size: 11px; }
  .schedule-strip { padding: 16px; gap: 9px 14px; font-size: 11px; }
  .schedule-strip>div { width: 100%; }
  .panel-heading { padding: 19px 18px; gap: 10px; }
  .panel-heading p { max-width: none; }
  .panel-heading .subtle-link { font-size: 12px; }
  .padded,.guide-panel { padding: 20px 18px; }
  .filters { padding: 16px; gap: 12px; }
  .filters label { min-width: 0; flex: 1 1 130px; }
  .filters .search-field { min-width: 0; flex-basis: 100%; }
  .filters select,.filters input { font-size: 16px; }
  .vault-filters select { min-width: 0; }
  .form-panel { padding: 24px 20px; }
  .form-actions .button { flex: 1; }
  input:not([type=checkbox]):not([type=hidden]),select,textarea { font-size: 16px; }
  .form-grid,.detail-grid { grid-template-columns: 1fr; }
  .statement-table { min-width: 0; display: block; }
  .statement-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .statement-table tbody { display: block; }
  .statement-table tr { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px 12px; padding: 19px 18px; border-bottom: 1px solid var(--line); }
  .statement-table tr:last-child { border-bottom: 0; }
  .statement-table td { display: block; border: 0; padding: 0; font-size: 13px; min-width: 0; text-align: left; }
  .statement-table td:before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 11px; color: #687991; font-weight: 400; }
  .statement-table td.numeric small { text-align: left; font-size: 11px; }
  .statement-table td:first-child { grid-column: 1/-1; }
  .statement-table td:first-child:before,.statement-table td:last-child:before { display: none; }
  .statement-table td:first-child b { font-size: 16px; }
  .statement-table td:last-child { align-self: end; text-align: right; }
  .statement-table td:nth-child(6) { grid-column: 1; }
  .statement-table td:last-child a { display: inline-flex; padding: 7px 0 7px 14px; min-height: 40px; align-items: center; }
  .statement-table td small { margin: 0; }
  .bill-banner { padding: 23px; flex-direction: column; gap: 20px; }
  .bill-balance { width: 100%; border-left: 0; padding: 18px 0 0; border-top: 1px solid #ffffff30; text-align: left; }
  .bill-actions .button { min-height: 44px; font-size: 13px; }
  .bill-banner strong { font-size: 34px; }
  .bill-balance strong { font-size: 27px; }
  .batch-context { flex-direction: column; }
  .batch-context b { font-size: 23px; }
  .stepper { gap: 12px; margin-bottom: 22px; }
  .stepper li { gap: 6px; font-size: 11px; }
  .upload-guide ol { display: block; }
  .upload-guide li { padding-bottom: 18px; }
  .upload-guide li:last-child { padding-bottom: 0; }
  .workspace-footer { padding: 20px 16px max(24px,env(safe-area-inset-bottom)); gap: 10px; font-size: 10px; }
  .workspace-footer a { font-size: 11px; }
  .auth-main { padding: 26px 20px; }
  .auth-layout { min-height: auto; gap: 28px; max-width: 460px; grid-template-columns: 1fr; }
  .auth-intro { padding: 0; }
  .auth-card { padding: 30px 24px; }
  .auth-intro .brand-lockup img { width: 200px; }
  .auth-intro>div,.auth-intro>small { display: none; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition: none!important; animation: none!important; scroll-behavior: auto!important; } }
@media print { .sidebar,.topbar,.workspace-footer,.skip-link,.bill-actions,.menu-toggle { display: none!important; } .app-main { margin: 0; } .workspace { padding: 0; } .panel,.stat { box-shadow: none; break-inside: avoid; } }

/* Account cards retain every authorized field on small screens. */
.table-wrap table:not(.statement-table):not(.vault-table) { min-width: 640px; }
.table-wrap .bill-table { min-width: 760px; }
@media(max-width:680px) {
  .stat .currency { display: block; font-size: 10px; letter-spacing: .5px; margin-bottom: 5px; }
  .vault-table { min-width: 0; display: block; }
  .vault-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .vault-table tbody { display: block; }
  .vault-table tr { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px 12px; padding: 22px 18px; border-bottom: 1px solid var(--line); }
  .vault-table tr:last-child { border-bottom: 0; }
  .vault-table td { display: block; padding: 0; border: 0; min-width: 0!important; max-width: none; font-size: 13px; }
  .vault-table td:before { content: attr(data-label); display: block; font-size: 11px; font-family: var(--font); color: #677890; margin-bottom: 4px; }
  .vault-table td:first-child,.vault-table td:nth-child(8),.vault-table td:last-child { grid-column: 1/-1; }
  .vault-table td:first-child:before,.vault-table td:last-child:before { display: none; }
  .vault-table td:first-child b { font-size: 17px; }
  .vault-table td:last-child .actions { flex-direction: row; align-items: center; gap: 20px; padding-top: 10px; border-top: 1px solid var(--line); }
  .vault-table .actions a { display: inline-flex; align-items: center; min-height: 40px; }
  .vault-table td:nth-child(7) { grid-row: 5; }
  .vault-table td:nth-child(9) { grid-row: 5; grid-column: 2; }
}

/* Reference refinement: a compact, blue enterprise workspace. */
:root { --blue:#2865e8; --blue-light:#ecf3ff; --ink:#24324b; --muted:#63738c; --bg:#f0f4fa; --line:#e6ecf5; --radius:12px; --sidebar-width:208px; }
.app-body { background:var(--bg); }
.sidebar { padding:23px 12px 16px; }
.sidebar .brand-lockup { padding:0 13px 20px; border-bottom:0; }
.sidebar .brand-lockup img { width:155px; }
.sidebar .brand-lockup small { font-size:9px; letter-spacing:1.7px; }
.nav-label { margin:17px 14px 7px; font-size:10px; color:#75849a; }
.sidebar nav a { min-height:40px; padding:9px 13px; font-size:12px; gap:11px; margin:2px 0; }
.sidebar nav a .icon { width:17px; height:17px; }
.sidebar nav a.active { box-shadow:none; background:#eaf2ff; color:#2764df; }
.sidebar-note { font-size:10px; padding:14px 8px 0; }
.sidebar-note small { font-size:9px; }
.topbar { height:64px; min-height:64px; padding:0 24px; background:#fff; }
.topbar-search { display:flex; align-items:center; gap:9px; margin-left:auto; margin-right:18px; width:280px; min-width:150px; padding:0 9px 0 12px; background:#f6f8fc; border:1px solid #edf0f6; border-radius:8px; color:#8594ac; }
.topbar-search input[type=search] { min-height:34px; padding:6px 0; font-size:12px; border:0; background:transparent; min-width:0; outline-offset:4px; }
.topbar-search>.icon { width:16px; height:16px; }
.topbar-search button { display:grid; place-items:center; color:#647ca2; background:transparent; border:0; min-width:30px; height:34px; padding:4px; }
.topbar-search button .icon { width:15px; height:15px; }
.workspace { padding:24px; max-width:1700px; }
.page-heading h1 { font-size:25px; font-weight:650; }
.page-heading p { font-size:12px; }
.panel { border-color:#e6ecf5; box-shadow:0 2px 7px #273f6502; border-radius:12px; }
.panel-heading { padding:19px 21px; }
.panel-heading h2 { font-size:15px; }
.button { border-radius:8px; font-size:12px; }
.badge.published { background:#edf3ff; color:#3265bd; }
.badge.partial { background:#fff5df; color:#9a6a17; }
.badge.settled { background:#e8f7f0; color:#24805f; }
.dashboard-heading { margin-bottom:18px; }
.dashboard-heading h1 { font-size:24px; margin-bottom:5px; }
.dashboard-heading p { font-size:11px; color:#75839a; }
.heading-separator { padding:0 7px; color:#b4c1d4; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1fr) 252px; gap:18px; align-items:start; }
.dashboard-primary,.dashboard-aside { min-width:0; }
.dashboard-primary>.panel,.dashboard-aside>.panel { margin-bottom:18px; }
.welcome-card { position:relative; display:flex; align-items:center; justify-content:space-between; overflow:hidden; min-height:164px; padding:18px 26px; margin-bottom:18px; border:1px solid #dfeafa; border-radius:13px; background:linear-gradient(110deg,#e8f2ff 0%,#eaf3ff 43%,#f4f8ff 100%); }
.welcome-copy { position:relative; z-index:1; min-width:0; }
.welcome-kicker { font-size:9px; color:#6688b5; font-weight:650; letter-spacing:1.1px; }
.welcome-kicker>span { padding-left:9px; font-size:9px; font-weight:400; letter-spacing:0; }
.welcome-copy h2 { font-size:24px; margin:8px 0 7px; letter-spacing:-.4px; color:#223d65; overflow-wrap:anywhere; }
.welcome-copy p { font-size:12px; color:#6982a3; line-height:1.85; margin-bottom:13px; }
.welcome-tag { display:inline-flex; align-items:center; gap:5px; padding:3px 8px; background:#ffffff8c; border:1px solid #dce9fb; color:#5c7ba5; border-radius:5px; font-size:10px; }
.welcome-tag .icon { width:12px; height:12px; }
.workspace-art { width:260px; height:160px; flex-shrink:0; margin:-14px -10px -10px 4px; }
.dashboard-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.metric-card { display:block; padding:16px; background:#fff; border:1px solid #e5ebf5; border-radius:11px; color:var(--ink); min-width:0; }
.metric-card:hover { text-decoration:none; }
a.metric-card:hover { border-color:#b6ccef; background:#fcfdff; }
.metric-label { display:flex; align-items:center; justify-content:space-between; gap:5px; font-size:11px; color:#75839a; }
.metric-label .icon { width:22px; height:22px; padding:4px; border-radius:6px; background:#edf4ff; color:#568ce4; }
.metric-card>strong { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px; margin:9px 0 6px; font-size:25px; line-height:1.3; letter-spacing:-.6px; font-weight:650; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.metric-card strong small { font-size:10px; color:#72819a; font-weight:500; letter-spacing:0; }
.metric-card p { font-size:10px; color:#8490a4; margin:0; }
.metric-blue { background:linear-gradient(140deg,#fff,#f6faff); }
.metric-teal .icon { color:#49a79f; background:#e9f8f4; }
.metric-violet .icon { color:#8d80d9; background:#f1edfc; }
.metric-amber .icon { color:#d1a14d; background:#fff5e3; }
.analytics-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(190px,1fr); gap:16px; margin-bottom:18px; align-items:stretch; }
.analytics-grid>.panel { margin:0; }
.dashboard-shell .panel-heading { padding:18px 19px 13px; }
.dashboard-shell .panel-heading h2 { font-size:14px; }
.dashboard-shell .panel-heading p { font-size:10px; color:#8490a3; margin-top:5px; }
.period-chip { font-size:9px; color:#7286a4; background:#f5f8fd; border:1px solid #e7edf6; border-radius:5px; padding:3px 7px; }
.trend-totals { display:flex; gap:24px; padding:0 20px 8px; flex-wrap:wrap; }
.trend-totals>div { min-width:0; }
.trend-totals span { display:block; color:#7d8ba1; font-size:10px; }
.trend-totals b { display:block; font-size:17px; font-weight:650; font-variant-numeric:tabular-nums; margin-top:3px; }
.chart-legend { display:flex; align-items:center; gap:15px; padding:2px 20px; font-size:10px; color:#74869f; }
.chart-legend span { display:flex; align-items:center; gap:5px; }
.chart-legend small { margin-left:auto; font-size:9px; }
.legend-dot { display:inline-block; width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.legend-dot.incoming,.legend-dot.published { background:#6597ed; }
.legend-dot.outgoing,.legend-dot.settled { background:#6cc8c1; }
.legend-dot.draft { background:#c7d4e9; }
.legend-dot.partial { background:#eac172; }
.settlement-chart { width:100%; height:auto; display:block; max-height:155px; padding:0 10px; }
.chart-grid { fill:none; stroke:#edf1f7; stroke-dasharray:4 4; }
.chart-line { fill:none; stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.chart-line.incoming { stroke:#6597ed; }
.chart-line.outgoing { stroke:#6cc8c1; }
.chart-point.incoming { fill:white; stroke:#6597ed; stroke-width:2; }
.chart-point.outgoing { fill:white; stroke:#6cc8c1; stroke-width:2; }
.chart-area { fill:#eaf2ff; opacity:.8; }
.chart-axis { fill:#8d9bb1; font-family:var(--font); font-size:10px; }
.chart-data { margin:0; border-top:1px solid #edf1f7; padding:0 17px; }
.chart-data summary { margin:0; padding:9px 0; min-height:34px; font-size:10px; font-weight:400; color:#7990b2; }
.dashboard-shell .chart-data .table-wrap table { min-width:0; font-size:11px; }
.chart-data th,.chart-data td { padding:9px 6px; font-size:10px; }
.chart-empty { display:flex; min-height:152px; align-items:center; justify-content:center; flex-direction:column; gap:8px; color:#95a9c6; padding:18px; text-align:center; }
.chart-empty>.icon { width:28px; height:28px; }
.chart-empty b { font-size:12px; color:#6c819f; font-weight:500; }
.chart-empty span { font-size:10px; }
.donut-wrap { display:flex; justify-content:center; padding:0 15px 3px; }
.status-donut { width:130px; height:130px; }
.donut-track,.donut-segment { fill:none; stroke-width:13; }
.donut-track { stroke:#edf2f9; }
.donut-segment.draft { stroke:#c7d4e9; }
.donut-segment.published { stroke:#6597ed; }
.donut-segment.partial { stroke:#eac172; }
.donut-segment.settled { stroke:#6cc8c1; }
.donut-number { fill:#30445f; font-size:27px; font-weight:650; font-family:var(--font); }
.donut-caption { fill:#91a0b6; font-size:10px; font-family:var(--font); }
.status-legend { margin:0; padding:2px 20px 15px; list-style:none; }
.status-legend li { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:11px; padding:4px 0; }
.status-legend li>span { display:flex; align-items:center; gap:8px; color:#7c8da7; }
.status-legend b { font-weight:550; font-variant-numeric:tabular-nums; }
.status-legend small { font-size:9px; font-weight:400; color:#8a97aa; }
.dashboard-aside .panel-heading { padding-bottom:9px; }
.aside-overline { font-size:9px; color:#8a9ab2; }
.todo-items { padding:0 17px 8px; }
.todo-items>a,.todo-row { display:flex; align-items:center; gap:9px; padding:12px 0; color:var(--ink); }
.todo-items>a:hover { text-decoration:none; color:var(--blue); }
.todo-items>a>span:nth-child(2),.todo-row>span:nth-child(2) { flex:1; min-width:0; }
.todo-items b { display:block; font-size:11px; font-weight:550; }
.todo-items small { display:block; font-size:9px; color:#8b99af; margin-top:3px; }
.todo-items strong { font-size:15px; font-weight:600; color:#57749c; }
.todo-items>a>.icon { width:12px; height:12px; color:#9aaecb; }
.todo-icon { display:grid; place-items:center; width:29px; height:29px; border-radius:8px; background:#edf4ff; color:#648ed5; flex-shrink:0; }
.todo-icon .icon { width:15px; height:15px; }
.todo-icon.draft { color:#8e88cc; background:#f1effb; }
.todo-icon.partial { color:#c1a05d; background:#fff6e7; }
.aside-link { display:flex; align-items:center; justify-content:space-between; padding:12px 17px; border-top:1px solid #edf1f7; font-size:10px; color:#6d88b1; }
.aside-link .icon { width:13px; height:13px; }
.shortcut-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 6px; padding:15px 15px 23px; }
.shortcut-grid a { display:flex; align-items:center; flex-direction:column; gap:8px; font-size:10px; color:#70819b; text-align:center; }
.shortcut-grid a:hover { color:var(--blue); text-decoration:none; }
.shortcut-icon { display:grid; place-items:center; width:35px; height:35px; border-radius:10px; background:#edf4ff; color:#739be0; }
.shortcut-icon .icon { width:18px; height:18px; }
.shortcut-icon.teal { color:#6fb7aa; background:#edf8f4; }
.shortcut-icon.violet { color:#9b8cd7; background:#f3effc; }
.shortcut-icon.amber { color:#d0af6c; background:#fff7e9; }
.shortcut-icon.slate { color:#8c9bb2; background:#f0f4f9; }
.calendar-panel .panel-heading>.icon { width:15px; height:15px; color:#9baec9; }
.calendar-panel ol { list-style:none; margin:0; padding:4px 20px 0; }
.calendar-panel li { display:flex; align-items:flex-start; gap:11px; padding:10px 0; }
.calendar-panel b { font-size:11px; color:#62758f; font-weight:550; }
.calendar-panel small { display:block; font-size:10px; color:#91a0b5; margin-top:3px; }
.schedule-dot { width:7px; height:7px; border:2px solid #a8c6f5; border-radius:50%; margin-top:7px; background:#edf4ff; }
.schedule-dot.violet { border-color:#c7b9ed; background:#f5efff; }
.schedule-dot.teal { border-color:#a2d8ca; background:#ecfaf7; }
.calendar-panel>p { padding:9px 20px 16px; margin:0; font-size:9px; color:#8799b2; }
.workspace-tip { padding:18px 15px; border-radius:12px; background:#e6eefb; color:#7890b3; text-align:center; }
.workspace-tip>.icon { width:28px; height:28px; margin-bottom:9px; color:#88a8d8; }
.workspace-tip b { display:block; font-size:11px; font-weight:500; }
.workspace-tip p { font-size:9px; margin:7px 0 0; color:#8fa1bb; }
.dashboard-shell .table-wrap table.dashboard-table { min-width:520px; font-size:12px; }
.dashboard-table th { background:#f8fafd; font-size:10px; padding:11px 18px; }
.dashboard-table td { padding:13px 18px; }
.dashboard-table td:first-child { display:flex; align-items:center; gap:10px; }
.dashboard-table td:first-child div { min-width:0; }
.dashboard-table td:first-child b { font-weight:550; }
.dashboard-table td small { font-size:9px; margin-top:3px; }
.dashboard-table td.numeric b { font-weight:550; }
.dashboard-table .subtle-link { font-size:11px; }
.dashboard-table .badge { font-size:9px; padding:3px 7px; }
.mini-avatar { display:grid; place-items:center; width:29px; height:29px; border-radius:8px; color:#7f9fc9; background:#edf3fc; font-size:12px; flex-shrink:0; }
.staff-overview-body { padding:0 21px 17px; }
.staff-overview-body .tags { margin:0 0 10px; min-height:0; }
.staff-overview-body p { margin:0; font-size:11px; color:var(--muted); }
@media(min-width:1500px) { .workspace { padding:30px 34px; } .topbar { padding:0 34px; } .dashboard-grid { grid-template-columns:minmax(0,1fr) 280px; gap:20px; } .welcome-card { min-height:185px; } .workspace-art { width:300px; height:180px; } .metric-card { padding:20px; } .metric-card>strong { font-size:30px; } .settlement-chart { max-height:205px; } }
@media(max-width:1180px) { :root { --sidebar-width:198px; } .workspace { padding:22px; } .topbar { padding:0 22px; } .sidebar .brand-lockup { padding-left:10px; padding-right:10px; } .sidebar .brand-lockup img { width:150px; } .dashboard-grid { grid-template-columns:minmax(0,1fr) 228px; gap:14px; } .metric-card { padding:13px 12px; } .metric-card>strong { font-size:21px; } .workspace-art { width:200px; height:145px; } .welcome-card { padding:18px 22px; } .welcome-copy h2 { font-size:23px; } .analytics-grid { grid-template-columns:minmax(0,1.45fr) minmax(170px,1fr); gap:12px; } .trend-totals { gap:10px; padding-left:17px; padding-right:17px; } .trend-totals b { font-size:15px; } .todo-items { padding-left:13px; padding-right:13px; } .topbar-search { width:240px; margin-right:10px; } }
@media(max-width:1100px) { .dashboard-grid { grid-template-columns:1fr; } .dashboard-aside { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } .dashboard-aside>.panel { margin:0; } .workspace-tip { grid-column:1/-1; } .metric-card>strong { font-size:25px; } .workspace-art { width:270px; height:160px; } .analytics-grid { grid-template-columns:minmax(0,1.7fr) minmax(220px,1fr); } }
@media(max-width:900px) { .workspace { padding:23px; } .topbar-search { width:260px; } .dashboard-aside { grid-template-columns:repeat(2,minmax(0,1fr)); } .dashboard-aside>.calendar-panel { grid-column:1/-1; } .calendar-panel ol { display:flex; justify-content:space-between; gap:20px; } }
@media(max-width:680px) {
 .workspace { padding:21px 16px 32px; }
 .topbar { padding:0 16px; }
 .topbar-search { display:none; }
 .dashboard-heading { margin-bottom:17px; }
 .dashboard-heading h1 { font-size:23px; }
 .dashboard-heading p { font-size:10px; }
 .dashboard-heading .heading-actions .button { padding:10px 12px; font-size:12px; }
 .welcome-card { padding:22px 20px; min-height:180px; margin-bottom:14px; }
 .welcome-copy { max-width:80%; }
 .welcome-kicker { font-size:8px; letter-spacing:.7px; }
 .welcome-kicker>span { display:none; }
 .welcome-copy h2 { font-size:22px; }
 .welcome-copy p { font-size:11px; }
 .workspace-art { position:absolute; width:180px; height:140px; right:-36px; bottom:-16px; opacity:.5; }
 .welcome-tag { font-size:9px; }
 .dashboard-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
 .metric-card { padding:15px; }
 .metric-label { font-size:11px; }
 .metric-card>strong { font-size:clamp(19px,5.7vw,25px); margin:10px 0 6px; gap:4px; }
 .metric-card p { font-size:9px; }
 .analytics-grid { grid-template-columns:1fr; gap:14px; margin-bottom:14px; }
 .trend-totals { gap:25px; }
 .trend-totals b { font-size:17px; }
 .settlement-chart { max-height:none; }
 .distribution-panel { display:grid; grid-template-columns:140px minmax(0,1fr); }
 .distribution-panel .panel-heading { grid-column:1/-1; }
 .donut-wrap { padding:0 0 14px 6px; }
 .status-legend { padding:0 20px 14px 8px; align-self:center; }
 .status-legend li { padding:6px 0; }
 .dashboard-aside { display:block; }
 .dashboard-aside>.panel { margin-bottom:14px; }
 .shortcut-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .calendar-panel ol { display:block; }
 .workspace-tip { margin-top:14px; }
 .dashboard-primary>.panel { margin-bottom:14px; }
 .dashboard-shell .table-wrap table.dashboard-table { min-width:0; display:block; }
 .dashboard-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 .dashboard-table tbody { display:block; }
 .dashboard-table tr { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:13px 8px; padding:17px; border-bottom:1px solid var(--line); }
 .dashboard-table tr:last-child { border:0; }
 .dashboard-table td { display:block; padding:0; border:0; min-width:0; font-size:11px; }
 .dashboard-table td:first-child { gap:8px; }
 .dashboard-table td:first-child b { display:block; overflow-wrap:anywhere; }
 .dashboard-table td.numeric { align-self:center; white-space:normal; }
 .dashboard-table td.numeric small { font-size:9px; }
 .dashboard-table td:last-child { text-align:right; }
 .dashboard-table td:last-child a { display:inline-flex; min-height:34px; align-items:center; }
 .mini-avatar { width:26px; height:26px; }
}
/* Keep account actions on one line when the preview sits in a narrow panel. */
.user-actions { flex-shrink:0; }
.user-actions .role,.user-actions .username,.user-actions .text-button { white-space:nowrap; }
@media(min-width:681px) and (max-width:900px) { .topbar-brand,.breadcrumb-divider { display:none; } .topbar-location { gap:10px; } .topbar-search { width:220px; min-width:140px; margin-right:5px; } }
@media(min-width:681px) and (max-width:760px) { .dashboard-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Owner cleanup keeps destructive actions explicit and reviewable. */
.cleanup-scope { margin: 20px 0; }
.cleanup-scope label { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; }
.cleanup-scope input[type="radio"] { flex: 0 0 auto; width: auto; margin-top: 5px; }
.button.danger { background: #b42318; border-color: #b42318; color: #fff; }
.button.danger:hover { background: #912018; }

/* Keep private 4D fields together across the batch money grid. */
.internal-lottery-fields { grid-column: 1 / -1; width: 100%; min-width: 0; }
.internal-lottery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px 20px; }
.internal-lottery-grid > .check-field { grid-column: 1 / -1; }
.internal-lottery-grid > .field { min-width: 0; margin-bottom: 0; }