/* All visual changes are opt-in through one root attribute. Classic rules stay intact. */
.modern-only, .ws-classic-toggle, .ws-search-dialog:not([open]), .ws-announcement { display: none; }
html[data-design="classic"] .ws-classic-toggle {
  display: inline-flex; align-items: center; gap: 8px; position: fixed; bottom: 16px; left: 16px; z-index: 900;
  padding: 11px 16px; border: 1px solid #cbd5e1; border-radius: 12px; color: #16634d; background: #fff;
  font: 600 12px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; cursor: pointer; box-shadow: 0 4px 20px #172f261a;
}
html[data-design="modern"] {
  --ws-ink: #192d29; --ws-muted: #6b7e78; --ws-green: #147d60; --ws-pale: #eaf4ee;
  --ws-line: #e4ebe6; --ws-bg: #f5f7f4; --ws-sidebar: 248px;
  scroll-padding-top: 90px; color-scheme: light;
}
html[data-design="modern"] body { margin: 0; background: var(--ws-bg); color: var(--ws-ink); font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
html[data-design="modern"] .modern-only { display: block; }
html[data-design="modern"] .legacy-nav { display: none; }
html[data-design="modern"] :where(button, input, select, textarea) { font-family: inherit; }
html[data-design="modern"] :where(button, a, input, select, textarea):focus-visible { outline: 3px solid #3ba887; outline-offset: 3px; }
html[data-design="modern"] :where(button, a) { -webkit-tap-highlight-color: transparent; }
html[data-design="modern"] button { touch-action: manipulation; }
html[data-design="modern"] .ws-skip { position: fixed; top: -80px; left: 16px; z-index: 2000; background: #147d60; color: #fff; padding: 12px 20px; border-radius: 10px; }
html[data-design="modern"] .ws-skip:focus { top: 12px; }
html[data-design="modern"] .ws-sidebar { position: fixed; inset: 0 auto 0 0; width: var(--ws-sidebar); z-index: 1100; background: #fff; border-right: 1px solid var(--ws-line); display: flex; flex-direction: column; }
html[data-design="modern"] .ws-brand { flex-shrink: 0; display: flex; align-items: center; gap: 11px; padding: 25px 23px 21px; color: var(--ws-ink); text-decoration: none; font-size: 21px; font-weight: 750; letter-spacing: -.7px; }
html[data-design="modern"] .ws-brand small { display: block; color: #87968f; font-size: 8px; font-weight: 650; letter-spacing: 1.3px; margin-top: 3px; }
html[data-design="modern"] .ws-logo { display: inline-flex; align-items: center; justify-content: center; position: relative; height: 41px; width: 41px; flex-shrink: 0; color: #fff; background: #197a5d; border-radius: 12px; font-size: 28px; font-weight: 800; letter-spacing: -2px; box-shadow: 0 4px 9px #147d6020; }
html[data-design="modern"] .ws-logo > span { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #b6e68e; bottom: 9px; right: 6px; border: 2px solid #197a5d; }
html[data-design="modern"] .ws-store { display: flex; align-items: center; gap: 10px; margin: 0 17px 11px; padding: 12px; border: 1px solid var(--ws-line); border-radius: 12px; background: #fafcf9; }
html[data-design="modern"] .ws-store-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; color: #577260; background: #eaf1e7; }
html[data-design="modern"] .ws-store strong { display: block; font-size: 12px; font-weight: 650; }
html[data-design="modern"] .ws-store small { display: block; font-size: 10px; color: var(--ws-muted); margin-top: 1px; }
html[data-design="modern"] .ws-store-dot { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: #519878; }
html[data-design="modern"] .ws-navigation { overflow-y: auto; overscroll-behavior: contain; padding: 0 13px 18px; scrollbar-width: thin; scrollbar-color: #dce5de transparent; flex: 1; }
html[data-design="modern"] .ws-nav-label { font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #82938a; padding: 19px 12px 7px; }
html[data-design="modern"] .ws-nav-link { display: flex; align-items: center; gap: 11px; padding: 9px 12px; margin: 2px 0; border-radius: 9px; color: #63716b; text-decoration: none; font-size: 12px; font-weight: 550; min-height: 39px; transition: background .15s, color .15s; }
html[data-design="modern"] .ws-nav-link svg { height: 18px; width: 18px; flex-shrink: 0; color: #84928c; }
html[data-design="modern"] .ws-nav-link:hover { background: #f3f7f3; color: #1c6b50; }
html[data-design="modern"] .ws-nav-link.is-active { color: #146b4c; background: #eaf4ed; font-weight: 700; }
html[data-design="modern"] .ws-nav-link.is-active svg { color: #21825d; }
html[data-design="modern"] .ws-active-dot { width: 5px; height: 5px; border-radius: 50%; background: #21825d; margin-left: auto; }
html[data-design="modern"] .ws-sidebar-footer { flex-shrink: 0; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--ws-line); padding: 15px 21px; }
html[data-design="modern"] .ws-avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; border: 1px solid #d4e5d8; background: #edf4e9; border-radius: 50%; color: #4b7059; font-size: 12px; font-weight: 700; }
html[data-design="modern"] .ws-sidebar-footer strong { font-size: 12px; font-weight: 650; }
html[data-design="modern"] .ws-sidebar-footer small { display: block; font-size: 10px; color: var(--ws-muted); }
html[data-design="modern"] .ws-icon-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; padding: 0; border: 0; background: transparent; border-radius: 9px; color: #718378; cursor: pointer; text-decoration: none; }
html[data-design="modern"] .ws-icon-btn:hover { color: #147d60; background: #eef4ed; }
html[data-design="modern"] .ws-sidebar-footer > .ws-icon-btn { margin-left: auto; }
html[data-design="modern"] .ws-topbar { height: 74px; padding: 0 36px; margin-left: var(--ws-sidebar); display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #ffffffed; border-bottom: 1px solid var(--ws-line); position: sticky; top: 0; z-index: 700; backdrop-filter: blur(14px); }
html[data-design="modern"] .ws-topbar-left, html[data-design="modern"] .ws-topbar-actions { display: flex; align-items: center; gap: 18px; min-width: 0; }
html[data-design="modern"] .ws-breadcrumb { color: #85928c; font-size: 11px; white-space: nowrap; }
html[data-design="modern"] .ws-breadcrumb > span { color: #bec8c0; padding: 0 12px; }
html[data-design="modern"] .ws-breadcrumb strong { color: #40574c; font-weight: 550; }
html[data-design="modern"] .ws-search-trigger { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 8px; color: #7d8b83; font-size: 11px; cursor: pointer; }
html[data-design="modern"] .ws-search-trigger svg { width: 16px; }
html[data-design="modern"] kbd { border: 1px solid #e1e8e2; border-radius: 5px; font-family: inherit; font-size: 9px; padding: 1px 5px; color: #8e9b92; }
html[data-design="modern"] .ws-design-toggle { background: #fff; border: 1px solid #dde5df; border-radius: 8px; padding: 8px 11px; font-size: 10px; color: #67796c; cursor: pointer; white-space: nowrap; }
html[data-design="modern"] .ws-design-toggle:hover { border-color: #6a9e7e; color: #147d60; }
html[data-design="modern"] .ws-page-heading { margin-left: var(--ws-sidebar); padding: 34px 38px 25px; display: flex; gap: 20px; align-items: center; justify-content: space-between; }
html[data-design="modern"] .ws-eyebrow { color: #849488; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; margin-bottom: 7px; }
html[data-design="modern"] .ws-page-heading h1 { color: #20372c; font-size: clamp(23px, 2.1vw, 31px); letter-spacing: -1px; line-height: 1.2; font-weight: 700; margin: 0 0 8px; }
html[data-design="modern"] .ws-page-heading p { color: #7f8d83; font-size: 12px; margin: 0; }
html[data-design="modern"] .ws-heading-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
html[data-design="modern"] .ws-primary { display: inline-flex; align-items: center; gap: 9px; background: #197a5b; border: 1px solid #197a5b; color: #fff; padding: 10px 15px; border-radius: 10px; text-decoration: none; font-size: 11px; font-weight: 600; white-space: nowrap; box-shadow: 0 3px 5px #197a5b0d; }
html[data-design="modern"] .ws-primary:hover { background: #106349; }
html[data-design="modern"] .ws-primary svg { width: 15px; height: 15px; }
html[data-design="modern"] .ws-date { font-size: 10px; color: #7c8e80; text-transform: capitalize; }
html[data-design="modern"] .container { margin: 0 0 0 var(--ws-sidebar); max-width: none; padding: 0 38px 44px; min-width: 0; }
html[data-design="modern"] .container > * { max-width: 1500px; margin-left: auto; margin-right: auto; }
html[data-design="modern"] .container :where(h1) { font-size: 21px; color: #20372c; letter-spacing: -.5px; }
/* Section headings already appear in the new workspace header. Keep original headings in classic. */
html[data-design="modern"] .container > h1,
html[data-design="modern"] .container > div > h1,
html[data-design="modern"] .container :where(.pg, .fp) > .hdr { display: none; }
html[data-design="modern"] .container :where(.cards, .db-g3, .db-g2, .g4, .g3, .g2) { gap: 17px; }
html[data-design="modern"] .container :where(.db, .fp, .pg) { gap: 22px; }
html[data-design="modern"] .container :where(.card, .kpi, .pc, .blk, .section, .sum-card, .brk, .filter-wrap, .cl-wrap, .inv-wrap) { border: 1px solid var(--ws-line); border-radius: 15px; background: #fff; box-shadow: 0 3px 12px #243d2c03; }
html[data-design="modern"] .container :where(.card, .kpi, .pc) { padding: 22px 23px; }
html[data-design="modern"] .container :where(.kpi-lbl, .pc-lbl, .card .label) { font-size: 10px; font-weight: 600; letter-spacing: .65px; color: #738577; margin-bottom: 13px; }
html[data-design="modern"] .container :where(.kpi-val, .card .value) { font-size: clamp(27px, 2.7vw, 39px); font-weight: 650; letter-spacing: -1.4px; line-height: 1.15; font-variant-numeric: tabular-nums; color: #243e2e; }
html[data-design="modern"] .container .kpi-val.pos { color: #16825e; }
html[data-design="modern"] .container .kpi-val.neg { color: #ce534c; }
html[data-design="modern"] .container .db-g3 > .kpi:first-child { background: linear-gradient(120deg, #eff7ed, #fff 85%); border-color: #d4e6d2; }
html[data-design="modern"] .container :where(.kpi-tag, .pc-chg, .badge, .tag) { border-radius: 6px; font-size: 10px; padding: 3px 7px; font-weight: 650; }
html[data-design="modern"] .container :where(.kpi-sub, .card .sub, .month-sub) { font-size: 11px; color: #849187; }
html[data-design="modern"] .container :where(.blk-hd) { border-color: #edf1eb; padding-bottom: 15px; margin-bottom: 17px; gap: 12px; }
html[data-design="modern"] .container :where(.blk-title, .blk-ttl) { font-size: 13px; color: #344e3d; font-weight: 650; }
html[data-design="modern"] .container :where(.month-cell) { padding: 21px 24px; }
html[data-design="modern"] .container :where(.month-val) { font-size: 29px; font-weight: 650; letter-spacing: -.8px; }
html[data-design="modern"] .container :where(.eff-score) { font-size: 55px; font-weight: 650; letter-spacing: -2px; }
html[data-design="modern"] .container :where(.eff-bar-bg, .goal-track) { background: #eef3eb; border-radius: 20px; }
html[data-design="modern"] .container :where(.issue, .rec) { border-radius: 11px; padding: 17px; }
html[data-design="modern"] .container :where(.issue-txt, .rec-txt) { line-height: 1.75; }
html[data-design="modern"] .container :where(.issue-btn, .rec-btn, .blk-a) { border-radius: 8px; padding: 7px 12px; min-height: 33px; }
html[data-design="modern"] .container table { font-size: 12px; }
html[data-design="modern"] .container canvas { max-width: 100%; }
html[data-design="modern"] .container th { background: #f6f8f4; color: #718170; font-weight: 600; font-size: 10px; padding: 12px 14px; border-bottom-color: var(--ws-line); }
html[data-design="modern"] .container td { padding: 12px 14px; border-bottom-color: #edf1eb; }
html[data-design="modern"] .container tr:hover td { background: #f6faf3; }
html[data-design="modern"] .container :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) { border-radius: 9px; border: 1px solid #dce5dc; color: #324d3b; accent-color: #197a5b; }
html[data-design="modern"] .container :where(input, select, textarea):focus { border-color: #499a72; }
html[data-design="modern"] .container :where(.act-btn, .flt-btn, .sup-tab, .grp-btn, .action-btn) { border-radius: 9px; }
html[data-design="modern"] .container .flt-btn.flt-active { background: #197a5b; border-color: #197a5b; }
html[data-design="modern"] .container .search-inp { min-height: 46px; }
html[data-design="modern"] .container .sum-card { padding: 14px 18px; min-width: 130px; }
html[data-design="modern"] .container .sum-card .val { font-size: 24px; font-weight: 650; letter-spacing: -.5px; }
html[data-design="modern"] .container .sys { border-color: var(--ws-line); border-radius: 10px; background: #f0f5ed; }
html[data-design="modern"] .container .cashier-hero { background: #1c654f; border-radius: 20px; box-shadow: none; padding: 38px; }
html[data-design="modern"] .container .debt-detail { min-width: 0; }
html[data-design="modern"] .container #histScroll { overflow-x: auto; }
html[data-design="modern"] .container .settings-form { max-width: 850px; padding: 24px; background: #fff; border: 1px solid var(--ws-line); border-radius: 15px; }
html[data-design="modern"] .container .btn-save { background: #197a5b; }
html[data-design="modern"] .ws-drawer-close, html[data-design="modern"] .ws-menu-toggle, html[data-design="modern"] .ws-bottom-nav, html[data-design="modern"] .ws-backdrop { display: none; }
/* Search is ordinary in-page navigation, available to both roles with the same links as their menu. */
.ws-search-dialog { padding: 0; width: min(520px, calc(100vw - 32px)); max-height: min(620px, 85dvh); margin: 12vh auto auto; color: #243e2f; background: #fff; border: 1px solid #dbe6db; border-radius: 18px; box-shadow: 0 24px 80px #142d3433; font: 14px/1.5 'Segoe UI', sans-serif; }
.ws-search-dialog::backdrop { background: #192c2859; backdrop-filter: blur(3px); }
.ws-search-heading { display: flex; align-items: center; justify-content: space-between; padding: 17px 19px 10px; }
.ws-search-field { display: flex; align-items: center; gap: 11px; padding: 0 18px; margin: 0 17px 11px; border: 1px solid #d6e3d6; border-radius: 10px; color: #64806d; }
.ws-search-field input { padding: 12px 0; flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; }
.ws-search-results { max-height: 340px; overflow-y: auto; padding: 0 10px; }
.ws-search-results a { display: flex; gap: 12px; align-items: center; padding: 11px; color: #47624d; text-decoration: none; border-radius: 9px; font-size: 13px; }
.ws-search-results a:hover, .ws-search-results a:focus { background: #edf5e9; outline-offset: -2px; }
.ws-search-results a svg { width: 18px; height: 18px; }
.ws-search-results p { padding: 20px 12px; color: #7c8c7f; }
.ws-search-hint { border-top: 1px solid #e5ece2; padding: 11px 20px; margin-top: 11px; font-size: 10px; color: #81917e; }
.ws-announcement.is-visible { display: block; position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%); z-index: 2000; padding: 12px 20px; border-radius: 12px; background: #203e2d; color: #fff; box-shadow: 0 6px 25px #203e2d20; font: 12px/1.5 'Segoe UI', sans-serif; max-width: calc(100vw - 32px); text-align: center; }
/* Recommendations: short overview first, detailed actions underneath. */
html[data-design="modern"] .advice-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
html[data-design="modern"] .advice-summary a { display: flex; align-items: center; gap: 15px; padding: 21px; border: 1px solid #e3eade; border-radius: 14px; background: #fff; color: #304d3a; text-decoration: none; }
html[data-design="modern"] .advice-summary a:hover { border-color: #9ac4a1; }
html[data-design="modern"] .advice-number { font-size: 31px; font-weight: 650; letter-spacing: -1px; color: #b67c28; min-width: 35px; }
html[data-design="modern"] .advice-summary strong { display: block; font-size: 12px; font-weight: 650; }
html[data-design="modern"] .advice-summary small { color: #82917f; font-size: 10px; }
html[data-design="modern"] .advice-tabs { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 2px; }
html[data-design="modern"] .advice-tabs a { text-decoration: none; padding: 7px 13px; border: 1px solid #dfe8db; border-radius: 20px; background: #fff; color: #5c735d; font-size: 11px; }
html[data-design="modern"] .advice-tabs a:hover { color: #147d60; border-color: #7cae87; background: #eef6e9; }
/* Standalone sign-in uses the same preference and controls. */
html[data-design="modern"] body.ws-login { display: flex; gap: clamp(50px, 8vw, 140px); padding: 40px; justify-content: center; align-items: center; min-height: 100dvh; background: #f4f7f0; overflow: auto; }
html[data-design="modern"] body.ws-login::before { width: 45vw; height: 100%; inset: 0 auto 0 0; border-radius: 0; background: #e6efdf; opacity: .6; }
html[data-design="modern"] body.ws-login::after { display: none; }
html[data-design="modern"] .ws-login-intro { position: relative; z-index: 1; max-width: 440px; }
html[data-design="modern"] .ws-login-intro .ws-brand { padding: 0; font-size: 25px; margin-bottom: 65px; }
html[data-design="modern"] .ws-login-intro h2 { font-size: clamp(32px, 4vw, 48px); font-weight: 650; line-height: 1.16; letter-spacing: -2px; margin-bottom: 20px; color: #254531; }
html[data-design="modern"] .ws-login-intro > p { font-size: 14px; line-height: 1.85; color: #758771; max-width: 360px; }
html[data-design="modern"] .ws-login-features { display: flex; flex-direction: column; gap: 13px; margin-top: 31px; color: #5b765c; font-size: 12px; }
html[data-design="modern"] .ws-login-features span::before { content: '✓'; display: inline-grid; place-items: center; width: 23px; height: 23px; background: #dcebd4; border-radius: 7px; margin-right: 12px; color: #448453; font-weight: 700; }
html[data-design="modern"] .ws-login .login-card { width: 370px; max-width: 100%; padding: 34px; flex-shrink: 0; background: #fff; border: 1px solid #e0e8d9; box-shadow: 0 16px 60px #2b432914; border-radius: 25px; backdrop-filter: none; position: relative; z-index: 1; }
html[data-design="modern"] .ws-login .logo-icon { font-size: 0; background: #eaf3e4; color: #197a5b; border-radius: 15px; box-shadow: none; }
html[data-design="modern"] .ws-login .logo-icon::after { content: 'А'; font-size: 31px; font-weight: 750; }
html[data-design="modern"] .ws-login .logo h1 { color: #284632; font-size: 24px; letter-spacing: -.8px; }
html[data-design="modern"] .ws-login .logo p { color: #84917d; font-size: 11px; letter-spacing: 1.2px; }
html[data-design="modern"] .ws-login .pin-label { color: #6e826a; font-size: 12px; }
html[data-design="modern"] .ws-login .pin-dot { border-color: #cad9c2; background: #f5f8f1; }
html[data-design="modern"] .ws-login .pin-dot.filled { background: #197a5b; border-color: #197a5b; box-shadow: 0 0 0 4px #197a5b0d; }
html[data-design="modern"] .ws-login .key { background: #f6f8f2; border: 1px solid #e6ece0; color: #385a40; border-radius: 13px; box-shadow: none; font-size: 23px; }
html[data-design="modern"] .ws-login .key:hover { background: #e8f1e0; border-color: #bad1ad; }
html[data-design="modern"] .ws-login .key:active { background: #daebcf; }
html[data-design="modern"] .ws-login .key.muted { visibility: hidden; }
html[data-design="modern"] .ws-login .footer-note { color: #8a9884; font-size: 10px; }
html[data-design="modern"] .ws-login .error-msg { color: #aa4940; background: #fff2ec; border-color: #f3d8cf; }
html[data-design="modern"] .ws-login-design { position: fixed; top: 22px; right: 24px; z-index: 2; }
@media (min-width: 1900px) {
  html[data-design="modern"] .container { padding-left: max(38px, calc((100vw - 1748px) / 2)); padding-right: max(38px, calc((100vw - 1748px) / 2)); }
}
@media (max-width: 1200px) and (min-width: 1101px) {
  html[data-design="modern"] { --ws-sidebar: 225px; }
  html[data-design="modern"] .ws-topbar { padding: 0 24px; }
  html[data-design="modern"] .ws-page-heading { padding: 28px 24px 22px; }
  html[data-design="modern"] .container { padding-left: 24px; padding-right: 24px; }
  html[data-design="modern"] .ws-search-trigger kbd { display: none; }
  html[data-design="modern"] .container .db-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  html[data-design="modern"] .container .kpi { padding: 18px 15px; }
}
@media (max-width: 1100px) {
  html[data-design="modern"] .ws-sidebar { transform: translateX(-100%); transition: transform .2s ease; width: 268px; max-width: calc(100vw - 44px); }
  html[data-design="modern"] .ws-topbar { margin-left: 0; padding: 0 24px; }
  html[data-design="modern"] .ws-menu-toggle { display: inline-flex; }
  html[data-design="modern"] .ws-drawer-close { display: inline-flex; position: absolute; top: 22px; right: 8px; }
  html[data-design="modern"] .ws-brand { padding-left: 18px; padding-right: 35px; }
  html[data-design="modern"] .ws-sidebar .ws-brand { font-size: 19px; }
  html[data-design="modern"] .ws-page-heading { margin-left: 0; padding: 28px 24px 22px; }
  html[data-design="modern"] .container { margin-left: 0; padding: 0 24px 38px; }
  html[data-design="modern"] .ws-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 1050; background: #1a322750; backdrop-filter: blur(2px); }
  html[data-design="modern"] body.ws-menu-open { overflow: hidden; }
  html[data-design="modern"] .ws-menu-open .ws-sidebar { transform: translateX(0); }
}
@media (max-width: 700px) {
  html[data-design="modern"] .ws-topbar { height: 62px; padding: 0 13px; gap: 8px; }
  html[data-design="modern"] .ws-topbar-left, html[data-design="modern"] .ws-topbar-actions { gap: 7px; }
  html[data-design="modern"] .ws-breadcrumb { font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
  html[data-design="modern"] .ws-breadcrumb > span, html[data-design="modern"] .ws-breadcrumb > strong { display: none; }
  html[data-design="modern"] .ws-search-trigger { padding: 5px; }
  html[data-design="modern"] .ws-search-trigger span, html[data-design="modern"] .ws-search-trigger kbd, html[data-design="modern"] .ws-top-avatar { display: none; }
  html[data-design="modern"] .ws-design-toggle { font-size: 10px; padding: 7px 9px; }
  html[data-design="modern"] .ws-page-heading { padding: 23px 17px 20px; align-items: flex-start; gap: 10px; }
  html[data-design="modern"] .ws-page-heading h1 { font-size: 25px; letter-spacing: -.8px; }
  html[data-design="modern"] .ws-page-heading p { font-size: 11px; max-width: 280px; }
  html[data-design="modern"] .ws-eyebrow { font-size: 8px; letter-spacing: 1.1px; }
  html[data-design="modern"] .ws-heading-actions { display: none; }
  html[data-design="modern"] .container { padding: 0 15px calc(98px + env(safe-area-inset-bottom)); }
  html[data-design="modern"] .container :where(.db, .pg, .fp) { gap: 15px; }
  html[data-design="modern"] .container :where(.db-g3, .g3, .g2, .db-g2) { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  html[data-design="modern"] .container :where(.cards, .g4) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html[data-design="modern"] .container .cards[style*="grid-template-columns"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html[data-design="modern"] .container :where(.card, .kpi, .pc) { padding: 18px; border-radius: 13px; }
  html[data-design="modern"] .container :where(.kpi-val, .card .value) { font-size: 31px; }
  html[data-design="modern"] .container :where(.blk, .section) { border-radius: 13px; }
  html[data-design="modern"] .container :where(.rec, .issue) { flex-wrap: wrap; gap: 10px; padding: 13px; }
  html[data-design="modern"] .container :where(.rec-body, .issue-body) { flex: 1 1 calc(100% - 48px); }
  html[data-design="modern"] .container :where(.rec-btn, .issue-btn) { margin-left: 42px; }
  html[data-design="modern"] .container :where(.blk-hd) { flex-wrap: wrap; }
  html[data-design="modern"] .container .month-cell { padding: 16px; }
  html[data-design="modern"] .container .month-val { font-size: 25px; }
  html[data-design="modern"] .container .eff-layout { flex-direction: column; gap: 16px !important; }
  html[data-design="modern"] .container .eff-layout > div { width: 100%; }
  html[data-design="modern"] .container .eff-layout > div:first-child { display: flex; align-items: center; gap: 14px; text-align: left !important; }
  html[data-design="modern"] .container .eff-row { flex-wrap: wrap; gap: 6px; }
  html[data-design="modern"] .container .sum-card { padding: 12px 15px; }
  html[data-design="modern"] .container .settings-form { padding: 18px; }
  html[data-design="modern"] .container .debt-summary { flex-direction: column; }
  html[data-design="modern"] .container .debt-workspace { flex-direction: column; height: auto !important; }
  html[data-design="modern"] .container .debt-client-list { width: 100% !important; max-height: 340px; border-bottom: 1px solid var(--ws-line); }
  html[data-design="modern"] .container .debt-detail { min-height: 360px; }
  html[data-design="modern"] .container .debt-detail #histScroll { max-height: 420px; }
  html[data-design="modern"] .container :where(.section) { overflow-x: auto; }
  html[data-design="modern"] .container :where(th, td) { padding: 10px; }
  html[data-design="modern"] .ws-bottom-nav { display: flex; align-items: center; justify-content: space-around; position: fixed; inset: auto 0 0; z-index: 850; padding: 7px 6px calc(7px + env(safe-area-inset-bottom)); background: #fffffffa; border-top: 1px solid #e0e9dc; backdrop-filter: blur(12px); }
  html[data-design="modern"] .ws-bottom-nav :where(a, button) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #81917c; background: transparent; border: 0; text-decoration: none; font-size: 9px; padding: 7px 10px; border-radius: 10px; min-width: 52px; cursor: pointer; line-height: 1.2; }
  html[data-design="modern"] .ws-bottom-nav [aria-current="page"] { color: #197a5b; background: #ecf4e6; font-weight: 650; }
  html[data-design="modern"] .container .mob-fab { bottom: calc(80px + env(safe-area-inset-bottom)); }
  html[data-design="modern"] .advice-summary { gap: 8px; }
  html[data-design="modern"] .advice-summary a { padding: 13px 9px; flex-direction: column; align-items: flex-start; gap: 6px; border-radius: 12px; }
  html[data-design="modern"] .advice-number { font-size: 26px; }
  html[data-design="modern"] .advice-summary strong { font-size: 10px; line-height: 1.4; }
  html[data-design="modern"] .advice-summary small { display: none; }
  html[data-design="modern"] .advice-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 5px; }
  html[data-design="modern"] .advice-tabs a { flex-shrink: 0; }
  .ws-announcement.is-visible { bottom: 86px; }
  html[data-design="modern"] body.ws-login { padding: 65px 16px 24px; }
  html[data-design="modern"] .ws-login-intro { display: none; }
  html[data-design="modern"] .ws-login .login-card { width: 350px; padding: 28px; }
  html[data-design="modern"] .ws-login-design { top: 17px; right: 17px; }
}
@media (prefers-reduced-motion: reduce) { html[data-design="modern"] *, html[data-design="modern"] *::before, html[data-design="modern"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media print {
  html[data-design="modern"] :where(.ws-sidebar, .ws-topbar, .ws-bottom-nav, .ws-page-heading, .ws-search-dialog, .ws-backdrop, .ws-classic-toggle, .ws-announcement) { display: none !important; }
  html[data-design="modern"] .container { margin: 0; padding: 0; }
  html[data-design="modern"] body { background: #fff; }
}