/* TallyPrime look & feel. Colours were sampled from TallyPrime (Educational) on 6-Oct-2026; font is Arial.
   Loaded after the base styles and overrides tokens + a few layouts only — no behaviour lives here.
   Remove its <link> in index.html to get the original Growthh skin back. Product name and logo stay our own. */

:root {
  --font-sans: Arial, 'Liberation Sans', 'Helvetica Neue', Helvetica, sans-serif;
  --font-mono: var(--font-sans);

  /* Tally palette (light) */
  --t-chrome: #1d3231;          /* top menu bar */
  --t-chrome-text: #ffffff;
  --t-search: #e9f3f9;
  --t-search-text: #4d5d66;
  --t-goto: #e0f1fb;            /* highlighted "Go To" item */
  --t-strip: #86bee4;           /* screen title strip */
  --t-strip-text: #0f1f2b;
  --t-rail: #ddf1fa;            /* right button bar */
  --t-rail-btn: #ffffff;
  --t-rail-line: #c3dbe8;
  --t-key: #1a8fd0;             /* "F2:" key captions */
  --t-chev: #3c5fa8;
  --t-btn-line: #5aa5d6;        /* outlined buttons */
  --t-btn-default: #ffc42e;     /* the default / focused button */
  --t-panel: #e0f1fb;           /* Gateway box, "List of …" panels */
  --t-panel-head: #2967af;
  --t-panel-head-text: #ffffff;
  --t-panel-line: #97c7f8;
  --t-section: #3d8fc6;         /* MASTERS / TRANSACTIONS labels */
  --t-label: #2c6aa8;           /* CURRENT PERIOD labels */
  --t-hotkey: #1f5f94;          /* hot letter in menu items */
  --t-rule: #9cbad2;
  --t-divider: #c9c9c9;
  --t-focus-bg: #fce9ae;        /* the field being edited */
  --t-focus-line: #0586ca;
  --t-row-active: #fcedc0;      /* the voucher line being edited */
  --t-dim: #b4bcbf;             /* screen behind a dialog */
  --t-bottom: #b5d1e2;          /* bottom button bar frame */
  --t-vch-payment: #fdfaf3;
  --t-vch-receipt: #f1f9fb;
  --t-vch-contra: #f9f9f9;
  --t-vch-journal: #f7f6fb;
  --t-vch-sales: #f2fee8;
  --t-vch-purchase: #fff4fc;

  /* Semantic tokens mapped onto Tally */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-2: #ffffff;
  --color-surface-3: #f2f7fa;
  --color-sunken: #eef3f6;
  --color-border: #c9c9c9;
  --color-border-strong: #9fb0ba;
  --color-text: #000000;
  --color-text-2: #2b2b2b;
  --color-text-3: #5c6770;
  --color-primary: #2967af;
  --color-primary-hover: #1f5590;
  --color-on-primary: #ffffff;
  --color-primary-soft: #e0f1fb;
  --color-primary-line: #97c7f8;
  --color-selected: #fdc52e;    /* Tally's amber cursor bar */
  --color-selected-edge: #fdc52e;
  --color-focus: #0586ca;
  --color-chrome: #1d3231;
  --color-on-chrome: #ffffff;
  --color-on-chrome-2: #b8c8c7;
  --color-grid: #e3e3e3;
  --shadow-1: none;
  --shadow-2: 0 2px 6px rgb(0 0 0 / 0.18);
  --shadow-3: 0 6px 20px rgb(0 0 0 / 0.25);

  /* Square, dense, desktop-like */
  --radius-sm: 0; --radius: 0; --radius-lg: 0;
  --btn-radius: 0; --input-radius: 0; --card-radius: 0;
  --topbar-h: 66px; --strip-h: 14px; --statusbar-h: 30px; --actionbar-w: 160px;
  --control-h: 26px; --control-h-sm: 22px; --row-h: 24px;
  --table-head-bg: var(--color-surface);
}
@media (pointer: coarse) {
  :root { --control-h: 44px; --control-h-sm: 40px; --row-h: 44px; }
}

/* Dark mode keeps working: same layout, dark steps for the Tally-only tokens. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --t-chrome: #101d1c; --t-search: #1b2a2a; --t-search-text: #9fb2b1; --t-goto: #23415a; --t-strip: #1f3a52; --t-strip-text: #dbe8f3;
    --t-rail: #10151c; --t-rail-btn: #1b222c; --t-rail-line: #2a3442; --t-key: #60a5fa; --t-chev: #93c5fd; --t-btn-line: #3b6f99; --t-btn-default: #d9a520;
    --t-panel: #13202e; --t-panel-line: #2a3f5a; --t-section: #7fb3dc; --t-label: #7fb3dc; --t-hotkey: #93c5fd; --t-rule: #2a3f5a; --t-divider: #2a3442;
    --t-focus-bg: #3a2e0c; --t-focus-line: #60a5fa; --t-row-active: #3a2e0c; --t-dim: #05080b; --t-bottom: #2a3442;
    --t-vch-payment: #1d1b15; --t-vch-receipt: #131d24; --t-vch-contra: #181a1d; --t-vch-journal: #191826; --t-vch-sales: #15201a; --t-vch-purchase: #22161f;
  }
}
:root[data-theme='dark'] {
  --t-chrome: #101d1c; --t-search: #1b2a2a; --t-search-text: #9fb2b1; --t-goto: #23415a; --t-strip: #1f3a52; --t-strip-text: #dbe8f3;
  --t-rail: #10151c; --t-rail-btn: #1b222c; --t-rail-line: #2a3442; --t-key: #60a5fa; --t-chev: #93c5fd; --t-btn-line: #3b6f99; --t-btn-default: #d9a520;
  --t-panel: #13202e; --t-panel-line: #2a3f5a; --t-section: #7fb3dc; --t-label: #7fb3dc; --t-hotkey: #93c5fd; --t-rule: #2a3f5a; --t-divider: #2a3442;
  --t-focus-bg: #3a2e0c; --t-focus-line: #60a5fa; --t-row-active: #3a2e0c; --t-dim: #05080b; --t-bottom: #2a3442;
  --t-vch-payment: #1d1b15; --t-vch-receipt: #131d24; --t-vch-contra: #181a1d; --t-vch-journal: #191826; --t-vch-sales: #15201a; --t-vch-purchase: #22161f;
}

body { font-size: 14px; }

/* ── Shell: Tally has no left sidebar (it slides in from ☰), a title strip, a right rail and a bottom bar ── */
.app:not(.app--bare) {
  grid-template: 'top top' var(--topbar-h) 'strip act' var(--strip-h) 'main act' minmax(0, 1fr) 'status act' var(--statusbar-h) / minmax(0, 1fr) var(--actionbar-w);
}
.app:not(.app--bare) .titlestrip { display: grid; }
.sidebar {
  position: fixed; top: var(--topbar-h); bottom: 0; left: 0; width: min(270px, 85vw);
  transform: translateX(-105%); transition: transform var(--duration) var(--ease-out); box-shadow: var(--shadow-3);
}
.app.nav-open .sidebar { transform: none; }
.topbar .nav-toggle { display: inline-flex; }
.sidebar .menu__item[aria-current='page'] { background: var(--t-panel); color: var(--t-panel-head); border-left-color: var(--t-panel-head); }

/* Top bar: brand | search on row 1, context keys on row 2 */
.topbar {
  display: grid; grid-template-columns: auto auto 1fr auto 1fr auto auto auto; grid-template-rows: 34px 32px;
  align-items: center; column-gap: 2px; padding: 0 8px; background: var(--t-chrome); color: var(--t-chrome-text);
}
.topbar .nav-toggle { grid-area: 1 / 1 / 3 / 2; }
.topbar .brand { grid-area: 1 / 2 / 3 / 3; border-right: 0; padding-right: 18px; font-size: 18px; font-weight: 700; }
.topbar .search {
  grid-area: 1 / 4; width: min(410px, 34vw); height: 24px; margin: 0; padding: 0 8px; gap: 6px;
  background: var(--t-search); color: var(--t-search-text); border: 1px solid transparent; font-size: 13.5px;
}
.topbar .search:hover { background: var(--t-search); border-color: var(--t-btn-line); }
.topbar [data-act='theme'] { grid-area: 1 / 6; }
.topbar [data-act='keys'] { grid-area: 1 / 7; }
.topbar [data-act='user'] { grid-area: 1 / 8; }
.topmenu { grid-area: 2 / 3 / 3 / -1; display: flex; align-items: center; gap: 22px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.topmenu .ctx { height: 24px; padding: 0 6px; gap: 3px; border: 0; color: var(--t-chrome-text); font-size: 13.5px; flex: none; }
.topmenu .ctx:hover { background: rgb(255 255 255 / 0.08); border-color: transparent; }
.topmenu .ctx > .icon, .topmenu .ctx__label small { display: none; }
.topmenu .ctx__label b { font-weight: 400; max-width: 260px; }
.topmenu .ctx .kbd { order: -1; color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.topmenu .ctx--goto { background: var(--t-goto); color: var(--color-text); padding: 0 14px; }
.topmenu .ctx--goto:hover { background: var(--t-goto); outline: 1px solid var(--t-btn-line); }
.topmenu .ctx[disabled] { opacity: 0.55; cursor: default; }

/* Title strip */
.titlestrip {
  grid-area: strip; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 6px;
  background: var(--t-strip); color: var(--t-strip-text); font: 700 10.5px/14px var(--font-sans); white-space: nowrap; overflow: hidden;
}
.titlestrip__co { text-align: center; }
.titlestrip__x { justify-self: end; height: 14px; padding: 0 3px; border: 0; background: none; color: inherit; font: 700 15px/12px var(--font-sans); cursor: pointer; }

/* Right rail: white key buttons with a ‹ cell, groups separated by gaps */
.actionbar { background: var(--t-rail); border-left: 0; padding: 4px; }
.actionbar__gap { height: 18px; flex: none; }
.act {
  position: relative; flex: none; min-height: 24px; margin-bottom: 4px; padding: 2px 20px 2px 5px; gap: 2px;
  background: var(--t-rail-btn); border: 1px solid var(--t-rail-line); color: var(--color-text); font-size: 13px; line-height: 1.2;
}
.act::after {
  content: '‹'; position: absolute; top: -1px; right: -1px; bottom: -1px; width: 13px; display: grid; place-items: center;
  border: 1px solid var(--t-rail-line); color: var(--t-chev); font-weight: 700;
}
.act:hover { background: var(--t-panel); }
.act[disabled], .act[disabled] .kbd { color: #9a9a9a; }
.act[disabled]::after { color: #c9c9c9; }
.act .kbd { min-width: 0; }
.act--sep { margin-top: auto; }

/* Bottom bar: Tally's row of key buttons */
.statusbar { align-items: stretch; gap: 2px; padding: 3px 2px; background: var(--t-bottom); border-top: 0; font-size: 13px; color: var(--color-text); }
.bbtn {
  flex: 1 1 0; min-width: 0; max-width: 132px; display: flex; align-items: center; gap: 2px; padding: 0 6px;
  background: var(--color-surface); border: 0; color: var(--color-text); font: inherit; white-space: nowrap; overflow: hidden; cursor: pointer;
}
.bbtn:hover:not(.bbtn--blank) { background: var(--t-panel); }
.bbtn--blank { cursor: default; }
.bbtn .kbd { text-decoration: underline; text-underline-offset: 2px; }

/* Key captions everywhere read like Tally's "F2:" */
.kbd {
  min-width: 0; height: auto; padding: 0; border: 0; background: none;
  color: var(--t-key); font: 700 13px/1 var(--font-sans); text-transform: none;
}
.btn .kbd, .act .kbd, .bbtn .kbd, .ctx .kbd, .chip .kbd { order: -1; margin: 0; }
.btn .kbd::after, .act .kbd::after, .bbtn .kbd::after, .ctx .kbd::after, .chip .kbd::after { content: ':'; display: inline-block; }

/* ── Content areas ── */
.view { background: var(--color-bg); }
.page { max-width: none; padding: 10px 14px 24px; }
.view-head { align-items: center; margin-bottom: 10px; }
.view-head .crumbs { display: none; }
.view-head h1 { font-size: 15px; font-weight: 700; letter-spacing: 0; }
.view-head .sub { font-size: 12.5px; margin-top: 1px; }

.btn { padding: 0 10px; border: 1px solid var(--t-btn-line); background: var(--color-surface); color: var(--color-text); font-weight: 400; font-size: 13px; gap: 3px; }
.btn:hover { background: var(--t-panel); }
.btn--primary { border-color: var(--t-btn-default); box-shadow: inset 0 0 0 1px var(--t-btn-default); background: var(--color-surface); color: var(--color-text); }
.btn--primary:hover { background: var(--color-surface); border-color: var(--t-btn-default); filter: brightness(0.98); }
.btn--primary .kbd { color: var(--t-key); border: 0; }
.btn--primary.is-loading::after { border-color: var(--color-text); border-right-color: transparent; }
.btn--ghost { border-color: transparent; background: transparent; }
.btn--danger { color: var(--color-danger); border-color: var(--color-danger); }

.chip { height: 24px; border-radius: 0; border: 1px solid var(--t-btn-line); background: var(--color-surface); color: var(--color-text); font-size: 12.5px; font-weight: 400; gap: 2px; }
.chip[aria-pressed='true'] { background: var(--t-panel-head); border-color: var(--t-panel-head); color: var(--t-panel-head-text); font-weight: 700; }
.chip[aria-pressed='true'] .kbd { color: inherit; }

.card { border: 1px solid var(--t-divider); box-shadow: none; }
.card__head { min-height: 24px; padding: 3px 10px; background: var(--t-panel-head); color: var(--t-panel-head-text); border-bottom: 0; }
.card__head h2, .card__head h3 { font-size: 13.5px; font-weight: 400; }
.card__head a, .card__head .muted, .card__head .t-xs { color: inherit; }
.card__head .btn { color: var(--color-text); }
.card__body { padding: 10px; }
.stat { padding: 8px 10px; gap: 2px; }
.stat__label { color: var(--t-label); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.02em; font-weight: 400; }
.stat__label .icon { display: none; }
.stat__value { font-size: 18px; font-weight: 700; letter-spacing: 0; }
.kpis { gap: 8px; }
.kpis .card { border-color: var(--t-panel-line); }
.kpis .card:hover { background: var(--t-panel); border-color: var(--t-panel-line); }

/* Tables read like Tally reports: no row lines, bold headers between rules, amber cursor */
.table { font-size: 13.5px; }
.table th, .table td { padding: 0 8px; }
.table td { border-bottom: 0; }
.table th { height: 24px; background: var(--color-surface); color: var(--color-text); font-size: 13.5px; font-weight: 700; text-transform: none; letter-spacing: 0; border-top: 1px solid var(--t-divider); border-bottom: 1px solid var(--t-divider); }
.table tbody tr:hover td { background: transparent; }
.table tbody tr.is-active td { background: var(--color-selected); }
.table tbody tr.is-active td:first-child { box-shadow: none; }
.table tfoot td { background: var(--color-surface); border-top: 1px solid var(--color-text); }
.table .sub td { color: var(--color-text); font-style: italic; font-size: 13.5px; }
.table--compact th, .table--compact td { height: 22px; }
.toolbar { padding: 6px 8px; border-bottom: 1px solid var(--t-divider); }
.toolbar .input, .toolbar .select { width: auto; height: 26px; border: 1px solid var(--color-border-strong); background: var(--color-surface); font-weight: 400; }
.tabs { border-bottom-color: var(--t-divider); }
.tab { height: 30px; font-weight: 400; font-size: 13.5px; }
.tab[aria-selected='true'] { font-weight: 700; }

.report-head { padding: 6px 8px 8px; border-bottom: 1px solid var(--t-divider); }
.report-head h2 { font-size: 15px; }
.report-head .meta { color: var(--color-text); font-size: 13px; margin-top: 1px; }
.tform .table th:first-child { letter-spacing: 0.25em; }
.tform > section + section { border-left: 1px solid var(--t-divider); }
.tform-total { background: var(--color-surface); border-top: 1px solid var(--t-divider); }
.tform-total > div > span:first-child { letter-spacing: 0.25em; }
.tform-total > div + div { border-left-color: var(--t-divider); }

/* Menus and "List of …" panels */
.menu__section { color: var(--t-section); font-size: 10.5px; font-weight: 400; letter-spacing: 0.02em; }
.menu__item { border-left: 0; }
.menu__item.is-active { background: var(--color-selected); }
.hk { color: var(--t-hotkey); font-weight: 700; text-decoration: none; }
.gateway__menu .menu__item:hover:not(.is-active), .dialog .menu__item:hover:not(.is-active) { background: transparent; } /* the amber cursor follows the mouse instead */
.table .twisty { display: none; } /* Tally shows no expand arrows; Enter / click still expands */

/* Forms: "Label   : value" rows, the field being edited turns yellow */
.field { display: grid; grid-template-columns: minmax(110px, 40%) minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 1px; }
.field > label, .field > .label { display: flex; justify-content: space-between; gap: 4px; color: var(--color-text); font-size: 13.5px; font-weight: 400; }
.field > label::after, .field > .label::after { content: ':'; }
.field .req { margin-right: auto; }
.field__hint, .field__error, .field .party-info { grid-column: 2; }
.field__hint { font-style: italic; }
.input, .select, .textarea { height: 22px; padding: 0 4px; border: 1px solid transparent; background-color: transparent; font-size: 13.5px; font-weight: 700; }
.textarea { height: auto; min-height: 44px; padding: 2px 4px; }
.select { padding-right: 18px; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--t-rail-line); }
.input:focus, .select:focus, .textarea:focus { background-color: var(--t-focus-bg); border-color: var(--t-focus-line); box-shadow: none; }
.input::placeholder, .textarea::placeholder { font-weight: 400; color: var(--color-text-3); }
.form-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 3px 40px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-section { padding: 10px 0; border-top-color: var(--t-divider); }
.form-section > h3 { margin-bottom: 6px; color: var(--color-text); font-size: 13.5px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.seg { background: var(--color-surface); border-color: var(--t-btn-line); }
.seg button[aria-pressed='true'] { background: var(--t-panel-head); color: var(--t-panel-head-text); }

/* Dialogs and the Go To list */
.dialog { border: 1px solid var(--color-border-strong); }
.dialog::backdrop { background: rgb(150 160 164 / 0.6); }
.dialog__head { padding: 5px 12px; background: var(--t-panel-head); color: var(--t-panel-head-text); border-bottom: 0; }
.dialog__head h2 { font-size: 14px; font-weight: 400; }
.dialog__head .btn--ghost { color: inherit; }
.dialog__body { padding: 12px; }
.dialog__foot { padding: 8px 12px; background: var(--color-surface); }
.palette { border-color: var(--t-panel-line); }
.palette .dialog__body { background: var(--t-panel); }
.palette__input { padding: 6px 8px; background: var(--color-surface); border-bottom-color: var(--t-panel-line); }
.palette__input input { height: 26px; padding: 0 6px; background: var(--t-focus-bg); border: 1px solid var(--t-focus-line); font-size: 14px; }

/* ── Gateway: info on the left, the Gateway box on the right (as in Tally) ── */
.gw { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 44%); min-height: 100%; }
.gw__info { min-width: 0; padding: 30px 22px 24px; border-right: 1px solid var(--t-divider); }
.gw__pair { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.gw__pair small, .gw__labels small { display: block; margin-bottom: 4px; color: var(--t-label); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.02em; }
.gw__pair b { font-size: 13.5px; }
.gw__right { text-align: right; }
.gw__labels { display: flex; justify-content: space-between; margin: 26px -22px 0; padding: 4px 22px 1px; border-top: 1px solid var(--t-rule); border-bottom: 1px solid var(--t-rule); }
.gw__company { padding: 14px 0 20px; }
.gw__scope { margin-top: 2px; color: var(--color-text-3); font-size: 12.5px; }
.gw__menuwrap { display: flex; justify-content: center; align-items: flex-start; min-width: 0; padding: 76px 24px 24px; }
.gateway__menu { width: 100%; max-width: 345px; position: static; background: var(--t-panel); border: 1px solid var(--t-panel-line); padding-bottom: 28px; }
.gw__head { padding: 4px 0 4px 30%; background: var(--t-panel-head); color: var(--t-panel-head-text); font-size: 13.5px; }
.gateway__menu .menu { padding: 8px 0 0; }
.gateway__menu .menu__section { padding: 16px 0 6px 30%; text-transform: uppercase; }
.gateway__menu .menu__item { height: 17px; padding: 0 0 0 30%; font-size: 13.5px; }
.gw__sep { height: 22px; }
.gw .dash-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 10px; }

/* ── Voucher screen: tinted per type, blue type tag, label : value fields ── */
.view:has(.vch[data-vtype]) { background: var(--t-vch-journal); }
.view:has(.vch[data-vtype='payment']) { background: var(--t-vch-payment); }
.view:has(.vch[data-vtype='receipt']) { background: var(--t-vch-receipt); }
.view:has(.vch[data-vtype='contra']) { background: var(--t-vch-contra); }
.view:has(.vch[data-vtype='sales']), .view:has(.vch[data-vtype='credit_note']) { background: var(--t-vch-sales); }
.view:has(.vch[data-vtype='purchase']), .view:has(.vch[data-vtype='debit_note']) { background: var(--t-vch-purchase); }
.vch { max-width: none; }
.vch .card, .vch .table th, .vch .table tfoot td, .vch .dialog__foot { background: transparent; }
.vch .card { border: 0; }
.vch__types { margin-bottom: 8px; }
.vch__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; padding: 4px 6px 10px; border-bottom: 0; }
.vch__head .field { grid-template-columns: auto minmax(120px, auto); }
.vch__head .field:nth-of-type(3) { margin-left: auto; }
.vch__title { flex-direction: row; align-items: center; gap: 10px; }
.vch__title > .t-xs { display: none; }
.vch__title h2 { padding: 1px 26px; background: var(--t-panel-head); color: var(--t-panel-head-text); font-size: 14px; font-weight: 700; }
.vch__party { grid-template-columns: minmax(0, 620px); gap: 1px; padding: 4px 6px 8px; background: transparent; border-bottom: 0; }
.party-info { color: var(--color-text-3); font-style: italic; gap: 12px; }
.vch-lines td { padding: 1px 6px; }
.vch-lines td:first-child { padding-left: 6px; }
.vch-lines .input, .vch-lines .select { height: 22px; font-weight: 400; }
.vch-lines tbody tr:focus-within td { background: var(--t-row-active); }
.vch__foot { padding: 10px 6px; border-top: 1px solid var(--t-divider); }
.totals .grand { font-size: 15px; font-weight: 700; border-top-color: var(--color-text); }

/* ── Full-screen pages ── */
.auth__brand { background: var(--t-chrome); }
.select-co { background: var(--t-dim); }
.select-co__head { height: 46px; background: var(--t-chrome); }
.select-co .view-head { margin: 0 0 10px; padding: 8px 12px; background: var(--color-surface); border: 1px solid var(--color-border-strong); }
.co-list__head { display: flex; justify-content: space-between; padding: 4px 10px; background: var(--t-panel-head); color: var(--t-panel-head-text); font-size: 14px; }
.co-list { gap: 0; background: var(--t-panel); border: 1px solid var(--t-panel-line); border-top: 0; }
.co-card { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 10px; background: transparent; border: 0; border-bottom: 1px solid var(--t-panel-line); }
.co-card:hover { border-color: var(--t-panel-line); }
.co-card.is-active { background: var(--color-selected); border-left: 0; }
.co-card__mark { display: none; }
.co-card h3 { font-size: 14px; }
.co-card .badge { background: var(--color-surface); }

/* ── Responsive: rail hides under 1280px (keys still work), stack under 1024px ── */
@media (max-width: 1279px) {
  .app:not(.app--bare) { grid-template: 'top' var(--topbar-h) 'strip' var(--strip-h) 'main' minmax(0, 1fr) 'status' var(--statusbar-h) / minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  .gw { grid-template-columns: minmax(0, 1fr); }
  .gw__menuwrap { order: -1; padding: 12px; }
  .gw__info { border-right: 0; padding-top: 12px; }
  .topbar .search { width: auto; }
}
@media (max-width: 767px) {
  .topbar { grid-template-columns: auto auto 1fr auto auto; }
  .topbar .search { display: none; }
  .topbar [data-act='theme'] { grid-area: 1 / 4; }
  .topbar [data-act='user'] { grid-area: 1 / 5; }
  .topmenu { gap: 8px; }
  .topmenu .ctx__label b { max-width: 120px; }
  .field { grid-template-columns: minmax(0, 1fr); }
  .field > label::after { content: ''; }
  .field__hint, .field__error, .field .party-info { grid-column: 1; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .bbtn { padding: 0 3px; }
}