:root {
    color-scheme: light;
    --bg: #f4f6f8;
    --surface: #ffffff;
    --surface-2: #eef2f6;
    --text: #17202a;
    --muted: #667085;
    --line: #d9e0e8;
    --primary: #176b87;
    --primary-dark: #0f4d64;
    --accent: #2f9e8f;
    --danger: #b42318;
    --success: #067647;
    --shadow: 0 14px 32px rgba(17, 24, 39, .07);
    --sidebar: #f7f9fb;
    --sidebar-soft: #edf3f6;
    --sidebar-ink: #1f2d3a;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: "Instrument Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body.mobile-menu-open { overflow: hidden; }
body.view-switching .content { opacity: .45; transform: translateY(4px); transition: opacity .14s ease, transform .14s ease; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

.app-shell { display: grid; min-height: 100vh; grid-template-columns: 272px 1fr; transition: grid-template-columns .2s ease; }
body.sidebar-collapsed .app-shell { grid-template-columns: 86px 1fr; }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; border-right: 1px solid var(--line); background: white; color: var(--text); padding: 24px; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 12px; }
.brand-mark { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 8px; background: var(--primary); color: white; font-weight: 800; box-shadow: inset 0 -10px 20px rgba(0,0,0,.12); }
.brand strong, .brand small, .client-brand small, .client-brand b, .sidebar-footer strong, .sidebar-footer small { display: block; }
.brand small, .client-brand small, .sidebar-footer small, .muted { color: var(--muted); font-size: 12px; }
.client-brand { display: flex; align-items: center; gap: 12px; margin-top: 22px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; padding: 12px; }
.client-brand img, .client-brand > strong { width: 42px !important; height: 42px !important; max-width: 42px !important; max-height: 42px !important; flex: 0 0 42px; border-radius: 8px; background: white; object-fit: contain; }
.client-brand > strong { display: grid; place-items: center; color: var(--primary-dark); font-size: 20px; }
.client-brand b { margin-top: 2px; color: var(--text); font-size: 13px; line-height: 1.25; }
.nav { display: grid; gap: 10px; align-content: start; flex: 1 1 auto; margin-top: 34px; min-height: 0; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; }
.menu-search { display: grid; gap: 7px; margin-bottom: 4px; }
.menu-search span { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.menu-search input { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; color: var(--text); padding: 10px 11px; transition: border .14s ease, box-shadow .14s ease, background .14s ease; }
.menu-search input:focus { border-color: #8bc7d2; background: white; box-shadow: 0 0 0 3px rgba(23, 107, 135, .12); outline: 0; }
.menu-search input::placeholder { color: var(--muted); }
.nav-group { display: grid; gap: 5px; border-top: 1px solid var(--line); padding-top: 9px; }
.nav-section { margin: 4px 12px 5px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.nav-link { position: relative; display: flex; align-items: center; width: 100%; min-height: 42px; border: 0; border-radius: 8px; background: transparent; color: #475467; cursor: pointer; padding: 11px 12px; overflow: hidden; font-weight: 700; line-height: 1.25; text-align: left; }
.nav-link.active, .nav-link:hover { background: #eaf7f5; color: var(--primary-dark); box-shadow: none; }
.nav-link.active::before { position: absolute; left: 0; width: 3px; height: 22px; border-radius: 999px; background: var(--accent); content: ""; }
.nav-link svg, .nav-sub svg, .mobile-bottom-nav svg, .button svg, .btn svg, .install-link svg, .sidebar-toggle svg { width: 18px; height: 18px; flex: 0 0 18px; }
.nav-link span { min-width: 0; margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-accordion-row { display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 4px; align-items: center; }
.nav-accordion-row .nav-link { min-width: 0; }
.nav-accordion-title { font-family: inherit; }
.nav-accordion-row [data-nav-accordion-toggle] { display: grid; width: 34px; height: 38px; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; color: var(--muted); cursor: pointer; }
.nav-accordion-row [data-nav-accordion-toggle]::before { content: ">"; font-size: 18px; font-weight: 900; line-height: 1; transition: transform .15s ease; }
.nav-accordion.open .nav-accordion-row [data-nav-accordion-toggle]::before { transform: rotate(90deg); }
.nav-sub { display: grid; gap: 2px; margin: -2px 0 4px 28px; }
.nav-accordion:not(.open) .nav-sub { display: none; }
.nav-sub a { display: flex; align-items: center; gap: 8px; border-radius: 8px; color: var(--muted); font-size: 13px; font-weight: 700; padding: 8px 10px; }
.nav-sub a.active, .nav-sub a:hover { background: #f3faf8; color: var(--primary-dark); }
.sidebar-footer { flex: 0 0 auto; margin-top: 28px; }
.install-link { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; color: var(--text); cursor: pointer; padding: 12px; text-align: left; }
.install-link:hover { background: var(--surface-2); }
body.sidebar-collapsed .sidebar { padding: 18px; }
body.sidebar-collapsed .brand { justify-content: center; }
body.sidebar-collapsed .brand > span:not(.brand-mark), body.sidebar-collapsed .client-brand div, body.sidebar-collapsed .menu-search, body.sidebar-collapsed .nav-section, body.sidebar-collapsed .nav-sub, body.sidebar-collapsed .nav-accordion-row [data-nav-accordion-toggle], body.sidebar-collapsed .nav-link span, body.sidebar-collapsed .sidebar-footer { display: none; }
body.sidebar-collapsed .client-brand { justify-content: center; padding: 8px; }
body.sidebar-collapsed .nav-link { justify-content: center; min-height: 42px; padding: 10px; }
body.sidebar-collapsed .nav-link svg { width: 20px; height: 20px; }
body.sidebar-collapsed .nav-link::after { content: none; }
.mobile-overlay { position: fixed; inset: 0; z-index: 30; display: none; background: rgba(16, 24, 32, .5); }
.mobile-overlay.open { display: block; }
.button-icon { display: inline-grid; width: 18px; height: 18px; place-items: center; }
.mobile-menu-button, .mobile-bottom-nav { display: none; }
.sidebar-toggle { display: inline-grid; width: 42px; height: 42px; place-items: center; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--text); cursor: pointer; font-weight: 900; }

.main { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 84px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .9); backdrop-filter: blur(16px); padding: 22px 32px; }
.topbar h1, .title { margin: 0; font-size: 28px; line-height: 1.1; }
.eyebrow { margin: 0 0 4px; color: var(--primary); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.work-tabs-shell { position: sticky; top: 84px; z-index: 19; display: grid; grid-template-columns: minmax(0, 1fr) 38px; gap: 8px; align-items: end; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .92); padding: 8px 28px 0; backdrop-filter: blur(14px); }
.work-tabs-shell[hidden] { display: none; }
.work-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 0; scrollbar-width: thin; }
.work-tabs::-webkit-scrollbar { height: 6px; }
.work-tabs::-webkit-scrollbar-thumb { border-radius: 999px; background: #cbd5df; }
.work-tab { display: inline-flex; align-items: center; flex: 0 0 auto; max-width: 230px; min-height: 36px; gap: 7px; border: 1px solid var(--line); border-bottom-color: #c8d5df; border-radius: 8px 8px 0 0; background: #f8fafc; color: #475467; padding: 8px 7px 8px 10px; font-size: 13px; font-weight: 800; box-shadow: 0 8px 18px rgba(17, 24, 39, .04); transition: background .14s ease, color .14s ease, border .14s ease, transform .14s ease; }
.work-tab:hover { transform: translateY(-1px); background: white; color: var(--primary-dark); }
.work-tab.active { border-color: #a9d8df; border-bottom-color: white; background: white; color: var(--primary-dark); box-shadow: 0 -1px 0 white inset, 0 10px 20px rgba(17, 24, 39, .05); }
.work-tab span { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-tab svg { width: 16px; height: 16px; flex: 0 0 16px; }
.work-tab button, .work-tabs-clear { display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; padding: 4px; }
.work-tab button:hover, .work-tabs-clear:hover { background: rgba(15, 77, 100, .08); }
.work-tabs-clear { width: 34px; height: 34px; margin-bottom: 5px; border: 1px solid var(--line); background: white; color: var(--muted); }
.work-tabs-clear svg { width: 16px; height: 16px; }
.content { padding: 28px; }
.user-menu { display: flex; align-items: center; gap: 12px; }
.user-chip { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 8px 10px; transition: border .16s ease, box-shadow .16s ease; }
.user-chip:hover { border-color: #b9dce5; box-shadow: 0 8px 20px rgba(17, 24, 39, .06); }
.user-avatar { display: grid; width: 34px !important; height: 34px !important; min-width: 34px; max-width: 34px; min-height: 34px; max-height: 34px; place-items: center; overflow: hidden; border-radius: 8px; background: var(--surface-2); color: var(--primary-dark); font-weight: 800; line-height: 1; }
.user-avatar img { display: block; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: var(--avatar-fit, cover); object-position: var(--avatar-position, center center); }
.avatar { display: grid; width: 34px !important; height: 34px !important; min-width: 34px; max-width: 34px; min-height: 34px; max-height: 34px; place-items: center; overflow: hidden; border-radius: 8px; background: var(--surface-2); color: var(--primary-dark); font-size: 15px; font-weight: 850; line-height: 1; }
.avatar img { display: block; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: var(--avatar-fit, cover); object-position: var(--avatar-position, center center); background: white; }
.avatar-sm { width: 34px !important; height: 34px !important; min-width: 34px; max-width: 34px; min-height: 34px; max-height: 34px; flex: 0 0 34px; }
.user-chip strong, .user-chip small { display: block; }
.user-chip small { color: var(--muted); }

.topbar + .content .topbar { position: static; min-height: auto; padding: 0; margin-bottom: 18px; border: 0; background: transparent; backdrop-filter: none; }
.page-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-bottom: 16px; }
.grid { display: grid; gap: 16px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.stat-card { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 18px; box-shadow: var(--shadow); }
.stat-card span, .stat-card small { display: block; color: var(--muted); }
.stat-card strong { display: block; margin: 7px 0; font-size: 28px; line-height: 1.1; color: var(--primary-dark); }
.card { background: white; border: 1px solid var(--line); border-radius: 8px; padding: 18px; box-shadow: var(--shadow); }
.card h2, .card h3 { letter-spacing: 0; }
.report-card { display: grid; align-content: start; gap: 12px; min-height: 170px; }
.report-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 8px; background: #e9f5f7; color: var(--primary-dark); }
.report-icon svg { width: 22px; height: 22px; }
.automation-card { display: grid; gap: 12px; align-content: start; }
.task-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.task-meta span { display: block; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; padding: 10px; color: var(--muted); font-size: 12px; }
.task-meta strong { display: block; margin-bottom: 4px; color: var(--text); font-size: 12px; text-transform: uppercase; }
.task-meta code { white-space: normal; word-break: break-word; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tab { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 8px; background: white; color: #344054; padding: 9px 12px; font-weight: 800; }
.tab.active, .tab:hover { border-color: #b8dce2; background: #e9f5f7; color: var(--primary-dark); }
.tab svg { width: 17px; height: 17px; }
.risk-list { display: grid; gap: 12px; }
.risk-item { border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: #f8fafc; }
.risk-item strong, .risk-item span { display: block; }
.risk-item .risk-value { color: var(--primary-dark); font-size: 26px; font-weight: 900; }
.risk-item.ok { border-color: #abefc6; background: #f3fbf6; }
.risk-item.warning { border-color: #fedf89; background: #fff9eb; }
.risk-item.danger { border-color: #fecdca; background: #fff3f0; }
.stat { font-size: 34px; font-weight: 800; margin-top: 6px; }
.button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; border: 0; border-radius: 8px; padding: 10px 14px; cursor: pointer; font-weight: 800; }
.button.primary, .btn { background: var(--primary); color: white; }
.button.secondary, .btn.secondary { background: var(--surface-2); color: #20332d; }
.button.danger, .btn.danger { background: var(--danger); color: white; }
.full { width: 100%; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px; border-bottom: 1px solid #e6ebe5; text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: 12px; text-transform: uppercase; }
input, textarea, select { width: 100%; border: 1px solid #cfd8d2; border-radius: 8px; background: white; padding: 10px 12px; }
textarea { min-height: 120px; resize: vertical; }
label { display: grid; gap: 6px; font-weight: 700; font-size: 14px; }
form.inline { display: inline; }
.badge { display: inline-flex; border-radius: 999px; padding: 4px 9px; background: #e9f5f7; color: var(--primary-dark); font-size: 12px; font-weight: 800; }
.alert { margin-bottom: 16px; border-radius: 8px; padding: 12px 14px; }
.alert.success { border: 1px solid #abefc6; background: #edfdf3; color: var(--success); }
.alert.error { border: 1px solid #fecdca; background: #fff3f0; color: var(--danger); }
.app-footer { display: flex; justify-content: space-between; gap: 16px; padding: 0 28px 24px; color: var(--muted); font-size: 12px; }

.login-page, .guest-page { min-height: 100vh; display: grid; place-items: center; padding: 32px; background: radial-gradient(circle at 22% 18%, rgba(47, 158, 143, .12), transparent 30%), #eef3f5; }
.login-panel { display: grid; grid-template-columns: minmax(0, 1.12fr) 410px; gap: 0; width: min(1120px, 100%); border: 1px solid var(--line); border-radius: 8px; background: white; box-shadow: 0 24px 70px rgba(17, 24, 39, .12); overflow: hidden; }
.login-copy, .login-card { background: white; padding: 38px; }
.guest-page .login-card { border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.login-copy { display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--line); background: linear-gradient(180deg, #ffffff, #f4f9fa); }
.login-brand-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.login-badge { display: inline-flex; align-items: center; gap: 7px; width: fit-content; border-radius: 999px; background: #e9f5f7; color: var(--primary-dark); padding: 7px 12px; font-size: 12px; font-weight: 800; }
.login-badge svg { width: 15px; height: 15px; }
.login-logo img { width: 168px; max-width: 100%; max-height: 64px; object-fit: contain; }
.login-copy h1 { max-width: 680px; margin: 34px 0 12px; font-size: 38px; line-height: 1.06; }
.login-copy p { max-width: 600px; color: var(--muted); font-size: 16px; line-height: 1.65; }
.login-workflow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 24px; }
.login-workflow div { position: relative; display: grid; min-height: 92px; align-content: center; justify-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 12px 8px; text-align: center; font-weight: 850; }
.login-workflow div:not(:last-child)::after { position: absolute; right: -9px; top: calc(50% - 5px); width: 10px; height: 10px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); background: white; transform: rotate(45deg); content: ""; }
.login-workflow svg { width: 22px; height: 22px; color: var(--primary-dark); }
.login-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.login-feature-grid div { display: grid; gap: 7px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; padding: 14px; }
.login-feature-grid svg { width: 20px; height: 20px; color: var(--primary-dark); }
.login-feature-grid strong, .login-feature-grid small { display: block; }
.login-feature-grid small { color: var(--muted); line-height: 1.45; }
.login-footer-note { margin-top: 28px; color: var(--muted); font-size: 12px; }
.login-panel .login-card { align-self: stretch; display: grid; align-content: center; box-shadow: none; border: 0; border-radius: 0; }
.login-card-header h2 { margin: 0 0 6px; font-size: 26px; }
.login-card-header small, .login-security small { color: var(--muted); }
.field { margin-top: 16px; }
.check { display: flex; align-items: center; gap: 8px; margin: 16px 0; }
.check input { width: auto; }
.login-security { display: flex; gap: 10px; margin-top: 18px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; padding: 12px; }
.login-security svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--primary-dark); }
.login-security strong, .login-security small { display: block; }
.settings-section { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 18px; }
.settings-brand-layout { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start; }
.settings-preview { border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; padding: 14px; }
.settings-preview > span { display: block; margin-bottom: 10px; color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.workspace-card { display: flex; align-items: center; min-width: 0; gap: 12px; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 12px; overflow: hidden; }
.workspace-card img, .workspace-card > strong { display: grid; width: 52px !important; height: 52px !important; max-width: 52px !important; max-height: 52px !important; min-width: 52px !important; min-height: 52px !important; flex: 0 0 52px; place-items: center; border-radius: 8px; background: white; object-fit: contain; }
.workspace-card div { min-width: 0; }
.workspace-card small, .workspace-card b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-card.preview { margin-top: 0; background: white; }
.setting-check, .notification-mail-option { margin-top: 16px; }
.setting-check input, .notification-mail-option input { width: auto; }
.field-error { color: var(--danger); font-size: 12px; }
.line-items { display: grid; gap: 10px; }
.line-item { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; align-items: end; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; padding: 12px; }
.best-price { border-left: 3px solid var(--success); padding-left: 8px; color: var(--success); font-weight: 800; }
.wide-field { grid-column: 1 / -1; }
.selected-hint { display: block; width: fit-content; border-radius: 999px; background: #e9f5f7; color: var(--primary-dark); padding: 6px 10px; font-size: 12px; font-weight: 800; }
.supplier-closed-card { width: min(560px, 100%); }
.score-value { display: inline-grid; width: 44px; height: 32px; place-items: center; border-radius: 8px; background: #e9f5f7; color: var(--primary-dark); }
.card-subsection { margin-top: 18px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; padding: 14px; }
.template-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .75fr); gap: 16px; align-items: start; }
.mail-preview { position: sticky; top: 96px; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 14px; }
.mail-preview-label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.mail-preview-subject { border-bottom: 1px solid var(--line); padding-bottom: 10px; font-weight: 800; }
.mail-preview-body { margin-top: 10px; color: #344054; line-height: 1.55; white-space: pre-wrap; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section-heading h3 { margin: 0 0 4px; font-size: 18px; }
.section-heading p { margin: 0; }
.responsive-table { width: 100%; overflow-x: auto; }
.responsive-table table { min-width: 760px; background: white; }
.responsive-table input[type="radio"], .responsive-table input[type="checkbox"] { width: auto; }
.responsive-table::-webkit-scrollbar { height: 8px; }
.responsive-table::-webkit-scrollbar-thumb { border-radius: 999px; background: #cbd5df; }
.profile-shell { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; align-items: start; }
.profile-summary { position: sticky; top: 104px; text-align: center; }
.profile-avatar-large { display: grid; width: 112px !important; height: 112px !important; max-width: 112px !important; max-height: 112px !important; place-items: center; overflow: hidden; margin: 0 auto 16px; border: 1px solid #d6e8ed; border-radius: 8px; background: #eef5f6; color: var(--primary-dark); font-size: 34px; font-weight: 850; }
.profile-avatar-large img { display: block; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: var(--avatar-fit, cover); object-position: var(--avatar-position, center center); background: white; }
.profile-summary h2 { margin: 0 0 6px; }
.profile-summary p { margin: 0; color: var(--muted); }
.profile-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.profile-meta span { border-radius: 999px; background: #eef5f6; color: var(--primary-dark); padding: 6px 9px; font-size: 12px; font-weight: 800; }
.help-hero { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: stretch; margin-bottom: 16px; border: 1px solid #cfe5eb; border-radius: 8px; background: linear-gradient(135deg, #ffffff, #edf8fa); padding: 24px; box-shadow: var(--shadow); }
.help-hero h2 { max-width: 760px; margin: 8px 0 10px; font-size: 34px; line-height: 1.08; letter-spacing: 0; color: var(--primary-dark); }
.help-hero p { max-width: 760px; margin: 0; color: #475467; line-height: 1.7; }
.help-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.help-kicker { display: inline-flex; width: fit-content; border-radius: 999px; background: white; color: var(--primary-dark); padding: 7px 12px; font-size: 12px; font-weight: 800; }
.help-hero-panel { display: grid; align-content: center; gap: 8px; border: 1px solid #d6e8ed; border-radius: 8px; background: white; padding: 16px; }
.help-hero-panel strong { color: var(--primary-dark); }
.help-hero-panel span { color: var(--muted); line-height: 1.55; }
.help-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.help-shortcuts a { border: 1px solid var(--line); border-radius: 8px; background: white; padding: 14px; box-shadow: 0 8px 20px rgba(17, 24, 39, .04); }
.help-shortcuts a:hover { border-color: #b9dce5; background: #f7fbfc; }
.help-shortcuts strong, .help-shortcuts span { display: block; }
.help-shortcuts strong { color: var(--primary-dark); }
.help-shortcuts span { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.help-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; }
.help-toc { position: sticky; top: 104px; display: grid; max-height: calc(100vh - 128px); gap: 5px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: white; padding: 14px; box-shadow: var(--shadow); }
.help-toc strong { margin-bottom: 4px; color: var(--primary-dark); }
.help-toc a { border-radius: 8px; padding: 7px 9px; color: #475467; font-size: 13px; font-weight: 750; }
.help-toc a:hover { background: #e9f5f7; color: var(--primary-dark); }
.help-document { max-width: 1040px; line-height: 1.78; }
.help-meta { width: fit-content; margin-bottom: 14px; border-radius: 999px; background: #eef5f6; color: var(--primary-dark); padding: 6px 10px; font-size: 12px; font-weight: 800; }
.help-document h1 { margin: 0 0 16px; font-size: 32px; color: var(--primary-dark); }
.help-document h2 { margin: 28px 0 10px; border-top: 1px solid var(--line); padding-top: 20px; font-size: 24px; color: #17202a; }
.help-document h3 { margin: 20px 0 8px; font-size: 18px; color: var(--primary-dark); }
.help-document p, .help-document li { color: #344054; }
.help-document ul, .help-document ol { padding-left: 22px; }
.help-document code { border-radius: 6px; background: #f2f4f7; padding: 2px 6px; color: var(--primary-dark); }
.help-document blockquote { margin: 16px 0; border-left: 4px solid var(--primary); background: #f8fafc; padding: 10px 14px; color: #475467; }
.process-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.process-step { position: relative; display: grid; gap: 9px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfd; padding: 16px; min-height: 138px; }
.process-step:not(:last-child)::after { position: absolute; right: -24px; top: 50%; width: 34px; height: 2px; background: var(--accent); content: ""; }
.process-step:not(:last-child)::before { position: absolute; right: -25px; top: calc(50% - 5px); width: 10px; height: 10px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); transform: rotate(45deg); content: ""; }
.process-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 8px; background: #e9f5f7; color: var(--primary-dark); }
.process-icon svg { width: 20px; height: 20px; }
.process-step strong { color: var(--primary-dark); font-size: 16px; }
.action-inbox { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.action-inbox-item { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfd; padding: 12px; color: #17202a; box-shadow: 0 8px 18px rgba(17, 24, 39, .03); }
.action-inbox-item:hover { border-color: #b9dce5; background: #f7fbfc; transform: translateY(-1px); }
.action-inbox-item strong, .action-inbox-item small { display: block; min-width: 0; }
.action-inbox-item small { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.action-inbox-item em { border-radius: 999px; background: #e9f5f7; color: var(--primary-dark); padding: 5px 8px; font-size: 11px; font-style: normal; font-weight: 850; white-space: nowrap; }
.action-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 8px; background: white; color: var(--primary-dark); border: 1px solid #d6e8ed; }
.action-icon svg { width: 19px; height: 19px; }
.fishbone { position: relative; display: grid; gap: 10px; margin-top: 12px; padding-left: 18px; }
.fishbone::before { position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; border-radius: 999px; background: #d6e8ed; content: ""; }
.fishbone-item { position: relative; display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfd; padding: 12px; }
.fishbone-item::before { position: absolute; left: -16px; top: 18px; width: 12px; height: 12px; border: 2px solid var(--accent); border-radius: 999px; background: white; content: ""; }
.fishbone-date { color: var(--muted); font-size: 12px; font-weight: 800; }
.fishbone-title { display: flex; align-items: center; gap: 8px; font-weight: 850; color: var(--primary-dark); }
.fishbone-title svg { width: 17px; height: 17px; }
.order-builder { display: grid; gap: 14px; }
.order-builder-item { border: 1px solid var(--line); border-radius: 8px; background: #fbfcfd; padding: 14px; }
.order-offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 10px; }
.order-offer-option { display: grid; gap: 5px; border: 1px solid #d9e0e8; border-radius: 8px; background: white; padding: 12px; cursor: pointer; }
.order-offer-option:hover { border-color: #b9dce5; background: #f7fbfc; }
.order-offer-option input { width: auto; }
.order-offer-option strong { color: var(--primary-dark); }
.empty-state { display: grid; justify-items: center; gap: 8px; border: 1px dashed #c9d8df; border-radius: 8px; background: #f8fafc; padding: 28px; text-align: center; }
.empty-state.compact { justify-items: start; padding: 18px; text-align: left; }
.empty-state svg { width: 28px; height: 28px; color: var(--primary-dark); }
.empty-state span { max-width: 680px; color: var(--muted); line-height: 1.55; }
.permission-layout { display: grid; grid-template-columns: minmax(220px, .85fr) minmax(240px, .95fr) minmax(280px, 1.2fr); gap: 14px; align-items: start; }
.permission-panel { min-height: 100%; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfd; padding: 14px; }
.choice-list, .project-permission-list { display: grid; gap: 8px; max-height: 420px; overflow: auto; padding-right: 2px; }
.choice-row { display: flex; align-items: flex-start; gap: 10px; border: 1px solid #d9e0e8; border-radius: 8px; background: white; padding: 10px; font-weight: 750; }
.choice-row.compact { padding: 8px 10px; }
.choice-row input { width: auto; margin-top: 2px; }
.choice-row span, .choice-row strong, .choice-row small { display: block; min-width: 0; }
.choice-row small { margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.project-permission-group { display: grid; gap: 8px; border: 1px solid #e2e8ef; border-radius: 8px; background: white; padding: 10px; }
.project-permission-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.project-permission-header span { display: flex; gap: 6px; }
.project-permission-header .button { min-height: 32px; padding: 7px 9px; font-size: 12px; }
.project-permission-list.is-disabled { background: #f6f8fa; border: 1px dashed #d7e0e7; border-radius: 8px; padding: 10px; }
.project-permission-list.is-disabled .empty-state { border-color: transparent; background: transparent; padding: 12px; }
.choice-row:has(input:disabled) { color: var(--muted); background: #f8fafc; }
.choice-row:has(input:disabled) input { cursor: not-allowed; }

@media (max-width: 900px) {
    body { padding-bottom: 76px; }
    .app-shell, .login-panel, .grid-4, .grid-3, .grid-2, .settings-brand-layout, .template-editor-grid, .help-hero, .help-layout, .profile-shell, .help-shortcuts, .process-flow, .permission-layout { grid-template-columns: 1fr; }
    .mail-preview { position: static; }
    .help-toc, .profile-summary { position: static; }
    .help-hero h2 { font-size: 28px; }
    .line-item { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .stat-card { padding: 14px; }
    .stat-card strong { font-size: 24px; }
    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 40;
        width: min(320px, calc(100vw - 48px));
        height: 100vh;
        transform: translateX(-105%);
        transition: transform .2s ease;
        box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
    }
    body.mobile-menu-open .sidebar { transform: translateX(0); }
    .topbar { align-items: center; flex-direction: row; min-height: 72px; }
    .work-tabs-shell { top: 72px; grid-template-columns: minmax(0, 1fr) 36px; padding: 7px 20px; }
    .work-tab { max-width: 190px; min-height: 32px; padding: 6px 6px 6px 9px; font-size: 12px; }
    .work-tab span { max-width: 120px; }
    .topbar + .content .topbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }
    .topbar + .content .topbar > div { width: 100%; }
    .topbar + .content .topbar > div:last-child {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .topbar + .content .topbar .button,
    .topbar + .content .topbar .btn { flex: 1 1 180px; }
    .sidebar-toggle { display: none; }
    .user-menu { display: none; }
    .app-footer { align-items: flex-start; flex-direction: column; }
    .content, .topbar { padding: 20px; }
    .topbar h1, .title { font-size: 23px; }
    .card { padding: 14px; overflow-x: auto; }
    .card h2 { font-size: 22px; line-height: 1.15; }
    .section-heading {
        align-items: flex-start;
        flex-direction: column;
    }
    .section-heading .button,
    .section-heading .btn { width: 100%; }
    .page-actions { justify-content: stretch; }
    .page-actions .button { flex: 1 1 190px; }
    .responsive-table { margin: 0 -2px; padding-bottom: 2px; }
    .responsive-table table { min-width: 680px; }
    .card > table { min-width: 680px; }
    th, td { padding: 10px; }
    .line-item { padding: 10px; }
    .line-item .button,
    .line-item .btn { width: 100%; }
    .mobile-menu-button {
        display: inline-grid;
        flex: 0 0 auto;
        width: 42px;
        height: 42px;
        place-items: center;
        gap: 4px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: white;
        padding: 10px;
    }
    .mobile-menu-button span {
        display: block;
        width: 18px;
        height: 2px;
        border-radius: 2px;
        background: var(--primary-dark);
    }
    .mobile-bottom-nav {
        position: fixed;
        right: 10px;
        bottom: 10px;
        left: 10px;
        z-index: 50;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        gap: 4px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: rgba(255, 255, 255, .94);
        box-shadow: 0 16px 40px rgba(15, 23, 42, .16);
        padding: 7px;
        backdrop-filter: blur(10px);
    }
    .mobile-bottom-nav a {
        display: grid;
        min-width: 0;
        place-items: center;
        gap: 2px;
        border-radius: 8px;
        color: #475467;
        padding: 6px 2px;
        font-size: 12px;
        font-weight: 800;
    }
    .mobile-bottom-nav a.active {
        background: #e9f5f7;
        color: var(--primary-dark);
    }
    .process-step:not(:last-child)::after { right: auto; left: 34px; top: auto; bottom: -15px; width: 2px; height: 20px; }
    .process-step:not(:last-child)::before { right: auto; left: 30px; top: auto; bottom: -18px; transform: rotate(135deg); }
.fishbone-item { grid-template-columns: 1fr; }
    .login-copy h1 { font-size: 32px; }
    .login-copy { border-right: 0; border-bottom: 1px solid var(--line); }
    .login-brand-row { align-items: flex-start; flex-direction: column; }
    .login-workflow, .login-feature-grid { grid-template-columns: 1fr 1fr; }
    .login-workflow div:not(:last-child)::after { content: none; }
}

@media (max-width: 560px) {
    body { padding-bottom: 82px; }
    .content, .topbar { padding: 16px; }
    .work-tabs-shell { top: 72px; padding: 6px 16px; }
    .work-tab { max-width: 168px; }
    .work-tab span { max-width: 102px; }
    .topbar h1, .title { font-size: 21px; }
    .eyebrow { font-size: 11px; }
    .stats-grid { grid-template-columns: 1fr; }
    .card { padding: 12px; }
    .button, .btn { width: 100%; min-height: 38px; padding: 9px 12px; }
    .project-permission-header { align-items: flex-start; flex-direction: column; }
    .project-permission-header span,
    .project-permission-header .button { width: 100%; }
    form.inline .button,
    form.inline .btn { width: auto; }
    .responsive-table table,
    .card > table { min-width: 620px; }
    input, textarea, select { padding: 9px 10px; }
    .mobile-bottom-nav { right: 8px; bottom: 8px; left: 8px; }
    .login-page, .guest-page { padding: 14px; }
    .login-copy, .login-card { padding: 22px; }
    .login-workflow, .login-feature-grid { grid-template-columns: 1fr; }
}

.breadcrumb-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    border-bottom: 1px solid var(--line);
    background: #fff;
    padding: 8px 28px;
    color: #667085;
    font-size: 13px;
}
.breadcrumb-bar svg { width: 15px; height: 15px; flex: 0 0 auto; }
.breadcrumb-bar strong { color: #24312e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-group:has(.nav-link.active) > .nav-section { color: var(--primary); }
.nav-link.active { position: relative; background: #e6f5f2; color: #153d38; }
.nav-link.active::before { content:""; position:absolute; inset:8px auto 8px 0; width:3px; border-radius:2px; background:#17a28d; }
.nav-link.active svg { color:#148878; }
.drawer-backdrop { position:fixed; inset:0; z-index:90; background:rgba(15,23,42,.34); opacity:0; pointer-events:none; transition:.2s; }
.form-drawer { position:fixed; z-index:91; top:0; right:0; bottom:0; width:min(620px,100vw); overflow:auto; background:#fff; border-left:1px solid var(--line); box-shadow:-20px 0 50px rgba(15,23,42,.14); padding:24px; transform:translateX(102%); transition:.24s ease; }
.drawer-open .drawer-backdrop { opacity:1; pointer-events:auto; }
.drawer-open .form-drawer { transform:translateX(0); }
.drawer-header,.section-heading,.page-intro { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.drawer-header { position:sticky; top:-24px; z-index:2; margin:-24px -24px 18px; border-bottom:1px solid var(--line); background:#fff; padding:20px 24px; }
.empty-state { display:grid; place-items:center; gap:8px; min-height:180px; color:#667085; text-align:center; }
.empty-state svg { width:38px; height:38px; color:#179683; }
.empty-state h3,.empty-state p { margin:0; }
.actions { display:flex; gap:5px; align-items:center; }
.table-wrap { overflow:auto; }
@media(max-width:760px){.breadcrumb-bar{padding:8px 16px}.breadcrumb-bar a,.breadcrumb-bar svg:nth-of-type(2),.breadcrumb-bar span{display:none}.form-drawer{width:100%;padding:16px}.drawer-header{top:-16px;margin:-16px -16px 16px;padding:16px}.page-intro{align-items:stretch;flex-direction:column}.page-intro .button{width:100%}}

/* Compact operational workspace */
@media (min-width: 981px) {
    .app-shell { grid-template-columns: 238px minmax(0, 1fr); }
    body.sidebar-collapsed .app-shell { grid-template-columns: 72px minmax(0, 1fr); }
    .sidebar { padding: 16px 14px; }
    .brand { gap: 9px; }
    .brand-mark { width: 36px; height: 36px; }
    .brand strong { font-size: 14px; }
    .client-brand { gap: 9px; margin-top: 14px; padding: 8px; }
    .client-brand img, .client-brand > strong { width: 34px !important; height: 34px !important; max-width: 34px !important; max-height: 34px !important; flex-basis: 34px; }
    .nav { gap: 5px; margin-top: 16px; }
    .nav-group { gap: 2px; padding-top: 6px; }
    .nav-section { margin: 3px 9px; font-size: 10px; }
    .nav-link { min-height: 34px; padding: 7px 9px; font-size: 13px; }
    .nav-link svg { width: 16px; height: 16px; flex-basis: 16px; }
    .menu-search { gap: 4px; }
    .menu-search input { padding: 8px 9px; font-size: 13px; }
    .sidebar-footer { margin-top: 10px; }
    .install-link { padding: 8px; }
    .topbar { min-height: 68px; gap: 16px; padding: 13px 22px; }
    .topbar h1, .title { font-size: 23px; }
    .eyebrow { margin-bottom: 2px; font-size: 10px; }
    .sidebar-toggle { width: 36px; height: 36px; }
    .user-chip { padding: 5px 8px; }
    .breadcrumb-bar { min-height: 34px; padding: 6px 22px; font-size: 12px; }
    .content { padding: 20px 22px; }
    .card { padding: 14px; }
    .card h2 { margin-top: 0; font-size: 18px; line-height: 1.2; }
    .card h3 { font-size: 15px; }
    .grid { gap: 12px; }
    .stats-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
    .stat-card { padding: 13px; }
    .stat-card strong { margin: 4px 0; font-size: 23px; }
    th, td { padding: 9px 10px; }
    input, textarea, select { padding: 8px 10px; }
    textarea { min-height: 92px; }
    label { gap: 4px; font-size: 13px; }
    .button, .btn { min-height: 36px; padding: 8px 12px; font-size: 13px; }
    .page-intro { margin-bottom: 14px; }
    .page-intro h2 { margin: 0 0 4px; font-size: 20px; }
    .page-intro p { margin: 0; }
    .breadcrumb-bar + .content > .topbar {
        position: static;
        min-height: auto;
        margin-bottom: 14px;
        border: 0;
        background: transparent;
        padding: 0;
        backdrop-filter: none;
    }
    .breadcrumb-bar + .content > .topbar .title { font-size: 20px; }
}

@media (min-width: 981px) and (max-width: 1250px) {
    .user-chip small { display: none; }
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Product workspace: consistent density and proportions */
:root {
    --workspace-gutter: clamp(16px, 2vw, 28px);
    --control-height: 38px;
    --content-width: 1680px;
}

html { font-size: 15px; }
body { font-size: 14px; line-height: 1.45; }
.main { display: flex; width: 100%; max-width: 100vw; min-width: 0; min-height: 100vh; flex-direction: column; overflow-x: hidden; }
.content { width: min(100%, var(--content-width)); margin: 0 auto; flex: 1 0 auto; padding: 18px var(--workspace-gutter) 28px; }
.topbar, .breadcrumb-bar, .work-tabs-shell { padding-right: var(--workspace-gutter); padding-left: var(--workspace-gutter); }
.topbar { min-height: 64px; padding-top: 10px; padding-bottom: 10px; }
.topbar h1, .title { font-size: 22px; line-height: 1.15; }
.breadcrumb-bar { min-height: 32px; padding-top: 5px; padding-bottom: 5px; font-size: 11px; }
.work-tabs-shell { top: 64px; width: 100%; max-width: 100vw; min-width: 0; overflow: hidden; padding-top: 6px; }
.work-tabs { width: 100%; min-width: 0; }
.work-tab { min-height: 32px; padding-top: 6px; padding-bottom: 6px; font-size: 12px; }
.app-footer { width: min(100%, var(--content-width)); margin: 0 auto; padding: 0 var(--workspace-gutter) 18px; }

.nav { gap: 3px; margin-top: 14px; }
.nav-group { gap: 2px; padding-top: 5px; }
.nav-section {
    position: relative;
    min-height: 28px;
    margin: 0;
    border-radius: 6px;
    padding: 7px 26px 6px 9px;
    cursor: pointer;
    user-select: none;
}
.nav-section::after {
    position: absolute;
    top: 50%;
    right: 9px;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    content: "";
    transform: translateY(-65%) rotate(45deg);
    transition: transform .16s ease;
}
.nav-section:hover, .nav-section:focus-visible { background: #f0f5f7; color: var(--primary-dark); outline: 0; }
.nav-group.is-open > .nav-section::after { transform: translateY(-30%) rotate(225deg); }
.nav-group:not(.is-open) > :not(.nav-section) { display: none; }
.nav-group:has(.nav-link.active) > .nav-section { color: var(--primary-dark); }
.nav-link { min-height: 32px; padding: 6px 9px; font-size: 12.5px; }
.nav-link span { margin-left: 7px; }
.menu-search input { min-height: 36px; }
body.sidebar-collapsed .nav-group:not(.is-open) > :not(.nav-section) { display: flex; }
body.sidebar-collapsed .nav-section { display: none; }

h1, h2, h3, h4, p { overflow-wrap: anywhere; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
.page-intro { align-items: center; margin-bottom: 12px; }
.page-intro h2 { margin: 0 0 3px; font-size: 19px; }
.page-intro p { max-width: 880px; margin: 0; color: var(--muted); line-height: 1.5; }
.content > .topbar { position: static; min-height: auto; margin-bottom: 12px; border: 0; background: transparent; padding: 0; backdrop-filter: none; }
.content > .topbar .title { font-size: 19px; }
.grid { gap: 12px; }
.grid-4 { grid-template-columns: repeat(4, minmax(180px, 1fr)); }
.stats-grid { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; }
.card, .stat-card { border-color: #dce3e9; box-shadow: 0 5px 16px rgba(17, 24, 39, .045); }
.card { padding: 14px; }
.card + .card, .card + .grid, .grid + .card { margin-top: 12px; }
.card h2 { margin: 0 0 10px; font-size: 17px; }
.card h3 { margin: 0 0 8px; font-size: 15px; }
.stat-card { min-width: 0; padding: 12px 13px; }
.stat-card strong { margin: 3px 0; font-size: 22px; }
.stat-card span, .stat-card small { overflow: hidden; text-overflow: ellipsis; }

input, textarea, select { min-height: var(--control-height); padding: 8px 10px; font-size: 13px; }
textarea { min-height: 84px; }
label { gap: 4px; font-size: 12.5px; }
.button, .btn { min-height: var(--control-height); padding: 8px 12px; font-size: 12.5px; }
.button svg, .btn svg { width: 16px; height: 16px; }
.logout-button { padding-right: 10px; padding-left: 10px; }

.responsive-table, .table-wrap { max-width: 100%; overflow-x: auto; border-radius: 6px; }
table { font-size: 12.5px; }
th, td { padding: 8px 9px; }
th { position: sticky; top: 0; z-index: 1; background: #f8fafb; font-size: 10.5px; letter-spacing: .02em; white-space: nowrap; }
td { max-width: 360px; }
td .button, td .btn { min-height: 32px; padding: 6px 9px; }
pre { max-width: 100%; overflow: auto; border-radius: 7px; background: #f6f8fa; padding: 12px; font-size: 12px; }

.login-page { min-height: 100dvh; padding: clamp(14px, 3vh, 28px); background: #edf2f4; }
.login-panel { grid-template-columns: minmax(0, 1.18fr) minmax(330px, 390px); width: min(1040px, 100%); max-height: calc(100dvh - 28px); overflow: auto; box-shadow: 0 18px 55px rgba(17, 24, 39, .11); }
.login-copy, .login-card { padding: clamp(26px, 3vw, 38px); }
.login-copy h1 { margin: 24px 0 9px; font-size: clamp(28px, 3vw, 36px); }
.login-copy p { margin: 0; font-size: 14px; line-height: 1.55; }
.login-workflow { margin-top: 18px; }
.login-workflow div { min-height: 76px; padding: 10px 7px; font-size: 12px; }
.login-feature-grid { margin-top: 12px; }
.login-feature-grid div { padding: 11px; }
.login-footer-note { margin-top: 18px; }
.login-panel .login-card { min-width: 0; }

.help-hero { grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: 12px; margin-bottom: 12px; padding: 18px; }
.help-hero h2 { margin: 6px 0 7px; font-size: 25px; }
.help-hero p { line-height: 1.5; }
.help-shortcuts { gap: 8px; margin-bottom: 12px; }
.help-shortcuts a { padding: 11px; }
.help-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 12px; }
.help-toc { top: 112px; max-height: calc(100vh - 132px); padding: 10px; }
.help-document { max-width: none; padding: clamp(16px, 2.2vw, 30px); line-height: 1.65; }
.help-document h1 { font-size: 25px; }
.help-document h2 { margin-top: 22px; padding-top: 16px; font-size: 20px; }
.help-document h3 { font-size: 16px; }

.profile-shell { grid-template-columns: 250px minmax(0, 1fr); gap: 12px; }
.profile-avatar-large { width: 88px !important; height: 88px !important; max-width: 88px !important; max-height: 88px !important; }
.settings-brand-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 14px; }
.workspace-card img, .workspace-card > strong { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; max-width: 44px !important; max-height: 44px !important; }
.setup-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.setup-step { display: flex; min-width: 0; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafb; padding: 10px; color: var(--muted); }
.setup-step > span { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border: 1px solid #cfd9e1; border-radius: 50%; background: white; font-size: 12px; font-weight: 850; }
.setup-step strong, .setup-step small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setup-step strong { color: #344054; font-size: 12.5px; }
.setup-step small { margin-top: 1px; font-size: 11px; }
.setup-step.is-current { border-color: #9ed4dc; background: #edf8fa; }
.setup-step.is-current > span { border-color: var(--primary); background: var(--primary); color: white; }
.setup-step.is-complete > span { border-color: #a6e1d3; background: #eaf8f4; color: #067647; }
.definition-create { margin-bottom: 14px; }
.definition-basic-form { display: grid; grid-template-columns: minmax(180px, 1.1fr) minmax(180px, 1.4fr) minmax(170px, 1fr) minmax(120px, .7fr) auto; gap: 10px; align-items: end; }
.definition-list { display: grid; gap: 10px; margin-top: 16px; }
.definition-card { display: grid; gap: 12px; }
.definition-card-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.definition-title { display: flex; min-width: 0; align-items: center; gap: 10px; }
.definition-title h3, .definition-title p { margin: 0; }
.definition-title p { margin-top: 2px; color: var(--muted); font-size: 12px; }
.definition-status, .definition-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.definition-actions { border-top: 1px solid #edf0f3; border-bottom: 1px solid #edf0f3; padding: 9px 0; }
.definition-actions small { color: var(--muted); }
.success-badge { background: #ecfdf3; color: #067647; }
.warning-badge { background: #fff7e8; color: #8a4b08; }
.text-danger { color: var(--danger) !important; }
.mapping-editor > summary, .definition-editor > summary, .optional-mappings > summary { display: flex; width: fit-content; align-items: center; gap: 7px; cursor: pointer; color: var(--primary-dark); font-weight: 800; }
.mapping-editor > summary svg, .definition-editor > summary svg { width: 17px; height: 17px; }
.mapping-editor[open] > summary, .definition-editor[open] > summary { margin-bottom: 12px; }
.definition-meta-form { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)) auto; gap: 9px; align-items: end; border: 1px solid #dfe7ec; border-radius: 8px; background: #f9fbfc; padding: 12px; }
.mapping-section { border: 1px solid #dfe7ec; border-radius: 8px; background: #f9fbfc; padding: 12px; }
.mapping-section h4, .mapping-section p { margin: 0 0 7px; }
.secondary-mapping-section { margin-top: 10px; background: white; }
.mapping-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 9px; }
.mapping-grid label span b { color: var(--danger); }
.optional-mappings { margin-top: 10px; }
.optional-mappings[open] > summary { margin-bottom: 10px; }
.mapping-footer { display: grid; grid-template-columns: auto minmax(190px, 1fr) auto; gap: 10px; align-items: end; margin-top: 12px; }
.column-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.column-chips code { border: 1px solid #d7e2e7; border-radius: 6px; background: #f5f9fa; padding: 5px 8px; color: var(--primary-dark); }
.app-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.pagination-summary, .pagination-current { color: var(--muted); font-size: 12px; font-weight: 750; white-space: nowrap; }
.pagination-actions { display: flex; align-items: center; gap: 6px; }
.pagination-button { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--line); border-radius: 7px; background: white; color: var(--primary-dark); padding: 7px 10px; font-size: 12px; font-weight: 800; }
.pagination-button:hover { border-color: #a9d8df; background: #f1f9fa; }
.pagination-button.is-disabled { cursor: not-allowed; background: #f6f8fa; color: #98a2b3; }
.pagination-button svg { width: 15px !important; height: 15px !important; max-width: 15px !important; max-height: 15px !important; flex: 0 0 15px; }
.pagination-current { border-radius: 6px; background: #f2f5f7; padding: 7px 9px; }
.token-reveal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 1.3fr) auto; gap: 12px; align-items: center; margin-bottom: 12px; border-color: #9ed4dc; background: #f4fbfc; }
.token-reveal h2, .token-reveal p { margin: 5px 0 0; }
.token-reveal code { overflow: auto; border: 1px solid #cfe5eb; border-radius: 7px; background: white; padding: 11px; font-size: 12px; }
.compact-guide { display: grid; gap: 8px; margin: 0; padding-left: 22px; color: #344054; }
.agent-list { display: grid; gap: 12px; margin-top: 14px; }
.agent-card { display: grid; gap: 12px; }
.agent-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.agent-meta span { border: 1px solid var(--line); border-radius: 7px; background: #f8fafb; padding: 9px; color: var(--muted); font-size: 12px; }
.agent-meta b { display: block; margin-bottom: 2px; color: var(--text); }

/* Stock integration hub */
.integration-stats { margin-bottom: 18px; }
.integration-stats .stat-card { min-height: 92px; }
.integration-stats .stat-card.has-warning { border-color: #f3c7a5; background: #fffaf5; }
.integration-stats .stat-card.has-warning strong { color: #b54708; }
.integration-heading { margin: 4px 0 10px; }
.integration-heading h3, .integration-heading p { margin: 0; }
.integration-heading p { margin-top: 3px; }
.integration-source-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.integration-source-card { display: grid; min-height: 196px; align-content: start; gap: 13px; margin: 0 !important; padding: 16px; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
a.integration-source-card:hover { border-color: #9ecfd7; box-shadow: 0 12px 26px rgba(15, 77, 100, .09); transform: translateY(-2px); }
.integration-source-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 7px; background: #e8f5f6; color: var(--primary-dark); }
.integration-source-icon svg { width: 21px; height: 21px; }
.integration-source-copy { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 12px; }
.integration-source-copy h3 { margin: 0 0 5px; font-size: 15px; }
.integration-source-copy p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.integration-source-status { flex: 0 0 auto; border-radius: 7px; background: #f1f6f7; padding: 7px 9px; text-align: right; }
.integration-source-status b, .integration-source-status small { display: block; white-space: nowrap; }
.integration-source-status b { color: var(--primary-dark); font-size: 12px; }
.integration-source-status small { margin-top: 1px; color: var(--muted); font-size: 10.5px; }
.integration-source-action { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; border-top: 1px solid #e8edf0; padding-top: 11px; color: var(--primary-dark); font-size: 12px; font-weight: 800; }
.integration-source-action svg { width: 16px; height: 16px; }
.integration-quick-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 11px 13px; }
.integration-quick-actions > div:first-child strong, .integration-quick-actions > div:first-child small { display: block; }
.integration-quick-actions > div:first-child strong { font-size: 12.5px; }
.integration-quick-actions > div:first-child small { margin-top: 2px; color: var(--muted); font-size: 10.5px; }
.integration-quick-actions > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.integration-quick-actions a { display: inline-flex; min-height: 32px; align-items: center; gap: 6px; border-radius: 7px; background: #f2f6f7; color: #29414a; padding: 7px 9px; font-size: 11.5px; font-weight: 800; }
.integration-quick-actions a:hover { background: #e7f4f5; color: var(--primary-dark); }
.integration-quick-actions svg { width: 15px; height: 15px; }

/* Compact list filtering */
.smart-filter-shell { padding: 0 !important; overflow: hidden; }
.smart-filter-header { min-height: 58px; display: grid; grid-template-columns: minmax(180px, auto) minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 14px; background: #fff; }
.smart-filter-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.smart-filter-title strong, .smart-filter-title small { display: block; }
.smart-filter-title strong { font-size: 14px; color: #20343d; }
.smart-filter-title small { margin-top: 1px; color: var(--muted); font-size: 11px; }
.smart-filter-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; border-radius: 7px; background: #e8f5f6; color: #0f7182; }
.smart-filter-icon svg { width: 17px; height: 17px; }
.smart-filter-summary { overflow: hidden; color: #61717d; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.smart-filter-actions { display: flex; align-items: center; gap: 7px; }
.filter-clear { color: #9b3b3b; font-size: 12px; font-weight: 700; text-decoration: none; }
.filter-toggle { min-width: 86px; height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #dbe4e8; border-radius: 7px; background: #f6f9fa; color: #2c4049; cursor: pointer; font-weight: 700; font-size: 12px; }
.filter-toggle svg { width: 15px; height: 15px; transition: transform .18s ease; }
.smart-filter-shell.is-filter-open .filter-toggle svg { transform: rotate(180deg); }
.smart-filter-form { display: none !important; margin: 0 !important; border-top: 1px solid var(--line); padding: 14px !important; background: #fbfcfd; }
.smart-filter-shell.is-filter-open .smart-filter-form { display: grid !important; }

/* ERP Agent management */
.agent-card .stats-grid { grid-template-columns: repeat(4, minmax(120px, 1fr)); }
.agent-card .stat-card { min-height: 78px; padding: 12px; }
.agent-card .definition-card-header { gap: 12px; }
.agent-card details { border: 1px solid var(--line); border-radius: 7px; background: #fbfcfd; padding: 0 12px 12px; }
.agent-card details summary { padding: 12px 0; cursor: pointer; color: #24414c; font-weight: 750; }
.agent-card .definition-actions { border: 0; padding: 0; justify-content: flex-end; }
.token-reveal code { min-width: 0; max-width: 100%; white-space: nowrap; }
.page-intro .inline-actions { flex: 0 0 auto; }
.process-builder > summary { cursor: pointer; list-style: none; margin: 0; }
.process-builder > summary::-webkit-details-marker { display: none; }
.process-builder > summary .button svg { transition: transform .2s ease; }
.process-builder[open] > summary .button svg { transform: rotate(180deg); }
.process-builder > .order-builder { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 16px; }
.order-filters { margin: 14px 0; }
.delivery-progress { width: 128px; max-width: 100%; height: 6px; overflow: hidden; border-radius: 3px; background: #e5ecef; margin-bottom: 6px; }
.delivery-progress span { display: block; height: 100%; background: #18a57b; }
.delivery-progress.large { width: 100%; height: 10px; margin: 16px 0; }
.delivery-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.delivery-metrics div { border: 1px solid var(--line); border-radius: 7px; background: #f8fafb; padding: 10px; }
.delivery-metrics span, .delivery-metrics strong { display: block; }
.delivery-metrics span { color: var(--muted); font-size: 11px; }
.delivery-metrics strong { margin-top: 3px; font-size: 19px; }
.document-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 16px; border-bottom: 1px solid var(--line); padding: 4px 0 18px; }
.document-hero h2 { margin: 8px 0 3px; font-size: 26px; }
.document-hero p { margin: 0; color: var(--muted); }
.document-number { text-align: right; }
.document-number small, .document-number strong { display: block; }
.document-number small { color: var(--muted); text-transform: uppercase; font-size: 10px; }
.document-number strong { margin-top: 3px; font-size: 20px; }
.detail-list { display: grid; gap: 0; margin: 12px 0 0; }
.detail-list div { display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: 12px; border-bottom: 1px solid #edf1f3; padding: 9px 0; }
.detail-list dt { color: var(--muted); }
.detail-list dd { margin: 0; font-weight: 700; }

/* Printable procurement documents */
.print-document { margin: 0; background: #e9eef0; color: #1c2d35; font-family: Inter, "Segoe UI", Arial, sans-serif; }
.print-sheet { width: min(960px, calc(100% - 32px)); min-height: 1120px; margin: 24px auto; background: #fff; box-shadow: 0 18px 50px rgba(25, 45, 55, .12); padding: 38px; }
.print-toolbar { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.print-header { display: flex; justify-content: space-between; gap: 28px; border-bottom: 3px solid #117789; padding-bottom: 20px; }
.print-brand { color: #117789; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.print-header h1 { margin: 6px 0 3px; font-size: 28px; }
.print-header p { margin: 0; color: #71818a; }
.print-reference { min-width: 180px; text-align: right; }
.print-reference small, .print-reference strong, .print-reference span { display: block; }
.print-reference small { color: #71818a; font-size: 10px; }
.print-reference strong { margin: 4px 0; font-size: 20px; }
.print-info-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 24px 0; border: 1px solid #dce5e8; }
.print-info-grid div { min-height: 72px; border-right: 1px solid #dce5e8; padding: 12px; }
.print-info-grid div:last-child { border-right: 0; }
.print-info-grid span, .print-info-grid strong { display: block; }
.print-info-grid span { margin-bottom: 5px; color: #71818a; font-size: 10px; text-transform: uppercase; }
.print-table { width: 100%; border-collapse: collapse; }
.print-table th { background: #edf6f7; color: #31505b; font-size: 11px; text-transform: uppercase; }
.print-table th, .print-table td { border: 1px solid #dce5e8; padding: 12px; text-align: left; }
.print-note { margin-top: 22px; border: 1px solid #dce5e8; padding: 14px; }
.print-note span { color: #71818a; font-size: 10px; text-transform: uppercase; }
.print-note p { min-height: 38px; margin: 8px 0 0; }
.print-totals { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.print-totals div { min-width: 220px; border: 1px solid #dce5e8; background: #f6fafb; padding: 12px; text-align: right; }
.print-totals span, .print-totals strong { display: block; }
.print-totals span { color: #71818a; font-size: 10px; text-transform: uppercase; }
.print-totals strong { margin-top: 4px; font-size: 18px; }
.signature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 90px; }
.signature-grid div { border-top: 1px solid #83939b; padding-top: 8px; text-align: center; }
.signature-grid span, .signature-grid strong { display: block; }
.signature-grid span { color: #71818a; font-size: 10px; text-transform: uppercase; }
.signature-grid strong { margin-top: 5px; }

@media (min-width: 981px) {
    .app-shell { grid-template-columns: 224px minmax(0, 1fr); }
    .sidebar { padding: 14px 12px; }
    .brand strong { font-size: 13px; }
    .client-brand { margin-top: 11px; }
}

@media (min-width: 901px) and (max-width: 1180px) {
    .app-shell { grid-template-columns: 204px minmax(0, 1fr); }
    .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .user-chip small { display: none; }
    .content { padding-right: 16px; padding-left: 16px; }
    .definition-basic-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .definition-meta-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mapping-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .integration-source-grid { grid-template-columns: 1fr; }
    .integration-source-card { min-height: 0; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; }
    .integration-source-action { align-self: stretch; border-top: 0; border-left: 1px solid #e8edf0; padding: 0 0 0 12px; }
}

@media (max-width: 900px) {
    html { font-size: 14px; }
    .content { padding: 14px 14px 24px; }
    .topbar { min-height: 60px; padding: 9px 14px; }
    .work-tabs-shell { top: 60px; padding-right: 14px; padding-left: 14px; }
    .breadcrumb-bar { display: none; }
    .topbar h1, .title { font-size: 19px; }
    .content > .topbar { align-items: stretch; flex-direction: column; gap: 9px; }
    .content > .topbar > div:last-child { display: flex; flex-wrap: wrap; gap: 7px; }
    .card { padding: 12px; overflow: visible; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .responsive-table, .table-wrap { margin-right: -12px; margin-left: -12px; border-right: 1px solid var(--line); border-left: 1px solid var(--line); padding: 0 12px 4px; }
    .help-hero, .help-layout, .profile-shell { grid-template-columns: 1fr; }
    .help-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .help-toc { position: static; max-height: 220px; }
    .login-panel { max-height: none; }
    .setup-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .definition-basic-form, .definition-meta-form, .mapping-footer { grid-template-columns: 1fr; }
    .definition-card-header { align-items: flex-start; flex-direction: column; }
    .token-reveal, .agent-meta { grid-template-columns: 1fr 1fr; }
    .agent-card .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .smart-filter-header { grid-template-columns: minmax(0, 1fr) auto; }
    .smart-filter-summary { grid-column: 1 / -1; grid-row: 2; }
    .document-hero { align-items: flex-start; flex-direction: column; }
    .document-number { text-align: left; }
    .print-info-grid { grid-template-columns: 1fr 1fr; }
    .print-info-grid div:nth-child(2) { border-right: 0; }
    .integration-source-grid { grid-template-columns: 1fr; }
    .integration-source-card { min-height: 0; }
    .integration-quick-actions { align-items: stretch; flex-direction: column; }
    .integration-quick-actions > div:last-child { justify-content: flex-start; }
}

@media (max-width: 560px) {
    .work-tabs-shell { display: none !important; }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .help-shortcuts { grid-template-columns: 1fr; }
    .login-copy { display: none; }
    .login-panel { display: block; width: min(420px, 100%); }
    .login-card { min-height: calc(100dvh - 28px); }
    .page-actions .button, .page-actions .btn { flex: 1 1 100%; }
    .section-heading { gap: 8px; }
    .setup-steps, .mapping-grid { grid-template-columns: 1fr; }
    .app-pagination { align-items: stretch; flex-direction: column; }
    .pagination-actions { justify-content: space-between; }
    .pagination-button span { display: none; }
    .token-reveal, .agent-meta { grid-template-columns: 1fr; }
    .agent-card .stats-grid { grid-template-columns: 1fr 1fr; }
    .smart-filter-header { gap: 8px; padding: 9px 10px; }
    .smart-filter-summary { display: none; }
    .filter-clear { display: none; }
    .filter-toggle { min-width: 76px; }
    .delivery-metrics { grid-template-columns: 1fr; }
    .detail-list div { grid-template-columns: 1fr; gap: 2px; }
    .integration-source-copy { flex-direction: column; }
    .integration-source-status { text-align: left; }
    .integration-quick-actions a { flex: 1 1 calc(50% - 6px); }
    .print-sheet { width: 100%; min-height: 0; margin: 0; padding: 20px; box-shadow: none; }
    .print-header, .signature-grid { grid-template-columns: 1fr; flex-direction: column; }
    .print-reference { text-align: left; }
    .print-info-grid { grid-template-columns: 1fr; }
    .print-info-grid div { border-right: 0; border-bottom: 1px solid #dce5e8; }
}

@media print {
    .print-document { background: #fff; }
    .print-sheet { width: 100%; min-height: 0; margin: 0; box-shadow: none; padding: 0; }
    .print-toolbar { display: none; }
}

/* Mobile workspace chrome */
@media (max-width: 900px) {
    .main > .topbar { min-height: 48px; gap: 9px; padding: 6px 12px; }
    .main > .topbar .eyebrow { display: none; }
    .main > .topbar h1 { font-size: 17px; line-height: 1.1; }
    .mobile-menu-button { width: 34px; height: 34px; padding: 7px; }
    .work-tabs-shell { top: 48px; grid-template-columns: minmax(0, 1fr) 30px; gap: 5px; padding: 4px 10px 0; }
    .work-tabs { scrollbar-width: none; }
    .work-tabs::-webkit-scrollbar { display: none; }
    .work-tab { max-width: 150px; min-height: 29px; gap: 5px; padding: 4px 4px 4px 7px; font-size: 11px; }
    .work-tab span { max-width: 92px; }
    .work-tab svg { width: 14px; height: 14px; flex-basis: 14px; }
    .work-tab button { width: 20px; height: 20px; padding: 2px; }
    .work-tabs-clear { width: 28px; height: 28px; margin-bottom: 1px; }
}

@media (max-width: 560px) {
    .work-tabs-shell { top: 48px; padding: 4px 8px 0; }
    .work-tab { max-width: 142px; }
    .work-tab span { max-width: 86px; }
}