/* =====================================================================
   Visual layer: glassmorphism + modern minimal + pastel.
   Loaded after app.css and only overrides look & feel (layout stays in app.css).
   Text colours are kept dark enough for comfortable contrast on frosted panels.
   ===================================================================== */
:root {
  --theme: #5B6CF0; --theme-hover: #4A5AE0; --theme-soft: #ECEEFF; --theme-line: #C9CFFB;
  --text: #1E2235; --text-2: #4A5066; --muted: #6E748A; --placeholder: #9AA0B4;
  --page: #F4F5FB; --panel: rgba(255, 255, 255, .66); --panel-2: rgba(246, 247, 253, .78); --readonly: rgba(236, 238, 248, .8);
  --hover: rgba(91, 108, 240, .06); --selected: rgba(91, 108, 240, .11);
  --line: rgba(30, 34, 53, .09); --line-2: rgba(30, 34, 53, .06); --input: rgba(30, 34, 53, .14);
  /* pastel families: soft background + readable foreground */
  --blue: #3F6FD8; --blue-soft: #E4EEFF; --green: #2E9D72; --green-text: #237A58; --green-soft: #DDF5EA;
  --orange: #C7672C; --orange-soft: #FFEBDD; --yellow: #9A7400; --yellow-soft: #FFF5D1; --red: #CF3F55; --red-soft: #FFE4E8;
  --violet: #6B4FD0; --violet-soft: #EEE8FF; --teal: #1F8E86; --cyan: #1C83A8; --grey-tag: #5B6175;
  --glass: rgba(255, 255, 255, .62); --glass-strong: rgba(255, 255, 255, .86); --glass-border: rgba(255, 255, 255, .75);
  --glass-shadow: 0 8px 30px rgba(70, 76, 140, .08), 0 1px 2px rgba(70, 76, 140, .06);
  --shadow-pane: var(--glass-shadow); --shadow-widget: 0 4px 18px rgba(70, 76, 140, .07);
  --shadow-pop: 0 12px 40px rgba(50, 56, 110, .16), 0 2px 6px rgba(50, 56, 110, .08);
  --shadow-dialog: 0 24px 70px rgba(40, 44, 90, .22), 0 2px 8px rgba(40, 44, 90, .08);
  --r: 8px; --r-lg: 14px;
  --font: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bg-image: radial-gradient(1100px 620px at 8% -10%, #E9E3FF 0%, transparent 60%), radial-gradient(900px 600px at 105% 0%, #DDF4EC 0%, transparent 55%),
    radial-gradient(800px 600px at 80% 110%, #FFE7DB 0%, transparent 55%), radial-gradient(700px 520px at -5% 100%, #DFEBFF 0%, transparent 55%), linear-gradient(180deg, #F7F7FC, #F2F4FA);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --theme: #8E9BFF; --theme-hover: #A3AEFF; --theme-soft: rgba(142, 155, 255, .16); --theme-line: rgba(142, 155, 255, .4);
    --text: #E8EAF4; --text-2: #B9BED2; --muted: #9298AE; --placeholder: #6E7490;
    --page: #12131C; --panel: rgba(30, 32, 46, .62); --panel-2: rgba(38, 40, 58, .7); --readonly: rgba(255, 255, 255, .06);
    --hover: rgba(142, 155, 255, .08); --selected: rgba(142, 155, 255, .16);
    --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .06); --input: rgba(255, 255, 255, .16);
    --blue: #8FB4FF; --blue-soft: rgba(110, 150, 255, .16); --green: #6FD3A8; --green-text: #7ADBB0; --green-soft: rgba(80, 200, 150, .15);
    --orange: #FFB07A; --orange-soft: rgba(255, 150, 90, .15); --yellow: #F2CF63; --yellow-soft: rgba(240, 200, 80, .14); --red: #FF8B9C; --red-soft: rgba(255, 110, 130, .15);
    --violet: #B9A6FF; --violet-soft: rgba(170, 150, 255, .16); --teal: #6FD6CC; --cyan: #7CCFF0; --grey-tag: #A9AFC4;
    --glass: rgba(28, 30, 44, .58); --glass-strong: rgba(30, 32, 48, .92); --glass-border: rgba(255, 255, 255, .08);
    --glass-shadow: 0 10px 34px rgba(0, 0, 0, .35);
    --bg-image: radial-gradient(1000px 600px at 5% -10%, rgba(120, 100, 255, .22), transparent 60%), radial-gradient(900px 600px at 105% 0%, rgba(60, 190, 160, .14), transparent 55%),
      radial-gradient(800px 600px at 80% 110%, rgba(255, 140, 110, .12), transparent 55%), linear-gradient(180deg, #13141D, #0F1018);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --theme: #8E9BFF; --theme-hover: #A3AEFF; --theme-soft: rgba(142, 155, 255, .16); --theme-line: rgba(142, 155, 255, .4);
  --text: #E8EAF4; --text-2: #B9BED2; --muted: #9298AE; --placeholder: #6E7490;
  --page: #12131C; --panel: rgba(30, 32, 46, .62); --panel-2: rgba(38, 40, 58, .7); --readonly: rgba(255, 255, 255, .06);
  --hover: rgba(142, 155, 255, .08); --selected: rgba(142, 155, 255, .16);
  --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .06); --input: rgba(255, 255, 255, .16);
  --blue: #8FB4FF; --blue-soft: rgba(110, 150, 255, .16); --green: #6FD3A8; --green-text: #7ADBB0; --green-soft: rgba(80, 200, 150, .15);
  --orange: #FFB07A; --orange-soft: rgba(255, 150, 90, .15); --yellow: #F2CF63; --yellow-soft: rgba(240, 200, 80, .14); --red: #FF8B9C; --red-soft: rgba(255, 110, 130, .15);
  --violet: #B9A6FF; --violet-soft: rgba(170, 150, 255, .16); --teal: #6FD6CC; --cyan: #7CCFF0; --grey-tag: #A9AFC4;
  --glass: rgba(28, 30, 44, .58); --glass-strong: rgba(30, 32, 48, .92); --glass-border: rgba(255, 255, 255, .08);
  --glass-shadow: 0 10px 34px rgba(0, 0, 0, .35);
  --bg-image: radial-gradient(1000px 600px at 5% -10%, rgba(120, 100, 255, .22), transparent 60%), radial-gradient(900px 600px at 105% 0%, rgba(60, 190, 160, .14), transparent 55%),
    radial-gradient(800px 600px at 80% 110%, rgba(255, 140, 110, .12), transparent 55%), linear-gradient(180deg, #13141D, #0F1018);
  color-scheme: dark;
}

/* ---------- base typography ---------- */
html, body { background: var(--page); }
body { font-family: var(--font); font-size: 14px; line-height: 1.55; letter-spacing: -.003em; background-image: var(--bg-image); background-attachment: fixed; color: var(--text); }
b, strong { font-weight: 600; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.01em; }
a { color: var(--theme); }
::selection { background: var(--theme-soft); }
* { scrollbar-width: thin; scrollbar-color: rgba(100, 108, 150, .22) transparent; }
:root[data-theme="dark"] * { scrollbar-color: rgba(210, 215, 240, .16) transparent; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) * { scrollbar-color: rgba(210, 215, 240, .16) transparent; } }
/* hscroll.js: the horizontal scrollbar of a wide table kept in sight at the bottom of what can be seen — clear glass, no band */
.hs-float { position: fixed; z-index: 340; height: 10px; overflow-x: auto; overflow-y: hidden; border-radius: 5px; background: transparent; scrollbar-width: thin; scrollbar-color: rgba(100, 108, 150, .24) transparent; transition: scrollbar-color .15s; }
.hs-float:hover { scrollbar-color: rgba(100, 108, 150, .4) transparent; }
.hs-float > div { height: 1px; }
:root[data-theme="dark"] .hs-float { scrollbar-color: rgba(210, 215, 240, .18) transparent; }
:root[data-theme="dark"] .hs-float:hover { scrollbar-color: rgba(210, 215, 240, .32) transparent; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hs-float { scrollbar-color: rgba(210, 215, 240, .18) transparent; } :root:not([data-theme="light"]) .hs-float:hover { scrollbar-color: rgba(210, 215, 240, .32) transparent; } }
@media print { .hs-float { display: none !important; } }

/* ---------- glass surfaces ---------- */
/* blur only on leaf surfaces: a backdrop-filter on the page / dialog would become the containing block
   of fixed-position children (nested dialogs, viewers) and trap them inside */
.pop, .toast, .wg, .board-col { -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); }
.shell { gap: 0; }
.side { margin: 10px 0 10px 10px; border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); padding-top: 10px; }
.pane { margin: 10px; border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); }
:root[data-theme="dark"] .pane { border-color: var(--glass-border); }
.pane-head { height: 56px; background: transparent; border-bottom: 1px solid var(--line-2); padding: 0 14px 0 20px; }
.pane-title { font-weight: 600; font-size: 15px; }
.pane-body.dash { background: transparent; padding: 14px; }
.dialog { background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 18px; }
.mask { background: rgba(30, 32, 60, .28); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dlg-h { height: 56px; border-bottom-color: var(--line-2); } .dlg-h h2 { font-weight: 600; }
.dlg-f, .rec-bar { border-color: var(--line-2); }
.rec-side { background: transparent; border-left-color: var(--line-2); }
.pop { background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 12px; }
.toast { background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 12px; }

/* ---------- sidebar ---------- */
.app-icon { background: linear-gradient(135deg, #8EA2FF, #6C7BF2 55%, #8ED8C4); border-radius: 10px; box-shadow: 0 4px 12px rgba(91, 108, 240, .3); }
.app-name { font-weight: 600; }
.side-search input { background: rgba(255, 255, 255, .55); border: 1px solid var(--line-2); border-radius: 10px; }
:root[data-theme="dark"] .side-search input { background: rgba(255, 255, 255, .05); }
.node { height: 38px; border-radius: 10px; color: var(--text-2); font-size: 14px; }
.node:hover { background: var(--hover); color: var(--text); }
.node.on { background: var(--theme-soft); color: var(--theme); font-weight: 600; box-shadow: inset 3px 0 0 var(--theme); }
.nav-sep { background: var(--line-2); }
.side-foot { border-top-color: var(--line-2); }

/* ---------- buttons & inputs ---------- */
.btn { height: 34px; border-radius: 10px; border-color: var(--input); background: rgba(255, 255, 255, .7); font-weight: 500; }
:root[data-theme="dark"] .btn { background: rgba(255, 255, 255, .05); }
.btn:hover { border-color: var(--theme); color: var(--theme); background: var(--glass-strong); }
.btn.primary { background: linear-gradient(135deg, #6E7DF4, #5B6CF0); border-color: transparent; color: #fff; box-shadow: 0 4px 14px rgba(91, 108, 240, .28); }
.btn.primary:hover { background: linear-gradient(135deg, #5F6EEA, #4A5AE0); color: #fff; }
.btn.text, .btn.link { background: none; box-shadow: none; }
.btn.text:hover { background: var(--hover); }
.btn.sm { height: 28px; border-radius: 8px; }
.inp { height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .75); border-color: var(--input); }
:root[data-theme="dark"] .inp { background: rgba(255, 255, 255, .05); }
.inp:focus { box-shadow: 0 0 0 3px var(--theme-soft); }
.inp.sm { height: 30px; border-radius: 8px; }
.inp:disabled, .inp[readonly] { background: var(--readonly); }
.ro { border-radius: 10px; background: var(--readonly); }
.icon-btn { border-radius: 8px; }
.avatar { background: linear-gradient(135deg, #8EA2FF, #6C7BF2); }

/* ---------- tags: pastel background + readable text (no saturated blocks) ---------- */
.tag { height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--grey-tag); background: rgba(91, 97, 117, .1); }
.tag.green, .tag.lt.green { color: var(--green-text); background: var(--green-soft); }
.tag.orange, .tag.lt.orange { color: var(--orange); background: var(--orange-soft); }
.tag.yellow { color: var(--yellow); background: var(--yellow-soft); }
.tag.red, .tag.lt.red { color: var(--red); background: var(--red-soft); }
.tag.blue, .tag.lt.blue { color: var(--blue); background: var(--blue-soft); }
.tag.violet, .tag.lt.violet { color: var(--violet); background: var(--violet-soft); }
.tag.teal, .tag.cyan, .tag.lt.teal, .tag.lt.cyan { color: var(--teal); background: rgba(40, 170, 160, .13); }
.tag.lt { color: var(--text-2); background: var(--readonly); }
.docs-b { border-radius: 999px; }
.prog { height: 6px; background: rgba(91, 108, 240, .1); border-radius: 99px; }
.prog-bar { background: linear-gradient(90deg, #8FD9C3, #7E92F5); border-radius: 99px; }
.prog-bar.over { background: linear-gradient(90deg, #FFD08A, #FFB27A); }

/* ---------- tables: light, airy; codes are regular weight (no heavy bold columns) ---------- */
.grid-wrap { border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .45); }
:root[data-theme="dark"] .grid-wrap { background: rgba(255, 255, 255, .02); }
.grid { font-size: 13.5px; }
.grid th { background: rgba(247, 248, 253, .92); color: var(--text-2); font-weight: 500; font-size: 12.5px; border-right: 0; border-bottom: 1px solid var(--line); line-height: 32px; }
:root[data-theme="dark"] .grid th { background: rgba(40, 42, 60, .95); }
.grid th:hover { background: rgba(236, 238, 255, .95); }
.grid td { background: transparent; border-right: 0; border-bottom: 1px solid var(--line-2); padding: 8px 12px; }
.grid td.sticky-l, .grid th.sticky-l { background: rgba(250, 250, 255, .96); }
:root[data-theme="dark"] .grid td.sticky-l { background: rgba(30, 32, 46, .96); }
.grid tr.click:hover td { background: rgba(91, 108, 240, .05); }
:root[data-theme="dark"] .grid tr.click:hover td { background: var(--hover); }
.grid tr.sel td { background: var(--theme-soft) !important; }
.grid tfoot td { background: rgba(244, 245, 252, .97); font-weight: 600; }
:root[data-theme="dark"] .grid tfoot td { background: rgba(36, 38, 54, .97); }
/* codes / numbers inside table bodies stay regular weight so no column looks heavy */
.grid tbody td b, .tbl tbody td b, .board-card b, .mb-card b, .doc-list b, .bill-pick tbody b, .sub tbody b { font-weight: 400; }
.tbl { font-size: 13.5px; }
.tbl th { background: rgba(247, 248, 253, .85); color: var(--text-2); font-weight: 500; font-size: 12.5px; }
:root[data-theme="dark"] .tbl th { background: rgba(255, 255, 255, .04); }
.tbl-box { border-radius: 12px; border-color: var(--line); background: rgba(255, 255, 255, .4); }
:root[data-theme="dark"] .tbl-box { background: transparent; }
.grid-foot { color: var(--text-2); }
.pager button, .pager .pg { border-radius: 8px; border-color: var(--line); background: rgba(255, 255, 255, .6); }
.sub { border-radius: 12px; border-color: var(--line); background: rgba(255, 255, 255, .4); }
.sub th { background: rgba(247, 248, 253, .85); color: var(--text-2); font-weight: 500; font-size: 12.5px; }

/* ---------- section separators: minimal label with accent bar (instead of solid block) ---------- */
.sep { border-bottom: 1px solid var(--line); margin: 18px 0 12px; }
.sep-label { background: none; color: var(--text); font-weight: 600; font-size: 14.5px; line-height: 30px; padding: 0 0 0 12px; position: relative; }
.sep-label::before { content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 4px; border-radius: 4px; background: linear-gradient(180deg, #8EA2FF, #8ED8C4); }
.sep-tail { display: none; }
.fld-l { font-weight: 500; color: var(--text); }
.fld-hint { color: var(--muted); }

/* ---------- KPI cards & widgets ---------- */
.kpi-mini { background: rgba(255, 255, 255, .62); border: 1px solid var(--glass-border); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow-widget); }
:root[data-theme="dark"] .kpi-mini { background: rgba(255, 255, 255, .04); }
.kpi-mini .l { color: var(--text-2); font-size: 12.5px; } .kpi-mini .v { font-weight: 600; font-size: 20px; letter-spacing: -.01em; }
.kpi-mini .s { color: var(--muted); }
.wg { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 16px; box-shadow: var(--shadow-widget); }
.wg-h h3 { font-weight: 600; font-size: 14.5px; color: var(--text); }
/* group headings on the dashboard: clearly readable, not faded placeholders */
.wg.title { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; min-height: 0; padding: 14px 4px 2px; align-items: flex-start; justify-content: flex-start; }
.wg.title span { font-size: 17px; font-weight: 600; color: var(--text); letter-spacing: -.01em; text-align: left; display: flex; align-items: center; gap: 10px; }
.wg.title span::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: linear-gradient(135deg, #8EA2FF, #8ED8C4); }
.big-n { font-weight: 600; }

/* ---------- tabs ---------- */
.tabs-u { border-bottom-color: var(--line); } .tab-u.on { font-weight: 600; }
.tab-f { border-radius: 10px 10px 0 0; background: rgba(255, 255, 255, .45); border-color: var(--line); }
.tab-f.on { background: var(--glass-strong); color: var(--theme); }

/* module tabs in the page header (form | data | board), like the reference platform */
.mtabs { display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 12px; background: rgba(91, 108, 240, .07); border: 1px solid var(--line-2); }
.mtab { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 9px; color: var(--text-2); font-weight: 500; font-size: 13.5px; white-space: nowrap; text-decoration: none !important; cursor: pointer; border: 0; background: none; }
.mtab:hover { color: var(--text); background: rgba(255, 255, 255, .55); }
.mtab.on { background: var(--glass-strong); color: var(--theme); box-shadow: 0 2px 8px rgba(70, 76, 140, .12); }
:root[data-theme="dark"] .mtab:hover { background: rgba(255, 255, 255, .06); }
@media (max-width: 760px) { .mtab { padding: 0 9px; } .mtab .mt-l { display: none; } .mtab.on .mt-l { display: inline; } }

/* ---------- misc surfaces ---------- */
.board-col { background: rgba(255, 255, 255, .42); border: 1px solid var(--glass-border); border-radius: 14px; }
.board-card { background: rgba(255, 255, 255, .85); border-color: var(--line-2); border-radius: 12px; }
:root[data-theme="dark"] .board-card, :root[data-theme="dark"] .board-col { background: rgba(255, 255, 255, .04); }
.upload { border-radius: 12px; background: rgba(255, 255, 255, .45); }
.alert-bar { border-radius: 10px; }
.period { border-radius: 10px; background: rgba(255, 255, 255, .6); }
.period.on { background: var(--theme-soft); border-color: var(--theme-line); }
.period.on .period-l { color: var(--theme); }
.search-box .inp { border-radius: 10px; }
.task-sum { border-radius: 16px; border-color: var(--glass-border); background: var(--glass); }
.qc-opt { border-radius: 999px; }
.doc-card, .imp-tile, .imp-card { border-radius: 14px; background: rgba(255, 255, 255, .6); }
:root[data-theme="dark"] .doc-card, :root[data-theme="dark"] .imp-tile { background: rgba(255, 255, 255, .04); }
.nt-card { background: rgba(255, 255, 255, .7); border-radius: 12px; }
.tax-card { border-radius: 14px; }

/* ---------- column filter (header funnel + popover) ---------- */
.grid th .cf { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 4px; border-radius: 6px; color: var(--muted); vertical-align: middle; opacity: 0; transition: opacity .12s; }
.grid th:hover .cf, .grid th .cf.on { opacity: 1; }
.grid th .cf:hover { background: var(--hover); color: var(--theme); }
.grid th .cf.on { color: var(--theme); background: var(--theme-soft); }
.cf-pop { position: fixed; z-index: 120; width: 280px; background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 14px; box-shadow: var(--shadow-pop); padding: 10px; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); font-size: 13px; cursor: default; }
.cf-pop .cf-h { font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.cf-list { max-height: 230px; overflow: auto; margin: 8px 0; display: flex; flex-direction: column; gap: 1px; }
.cf-list label { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-list label:hover { background: var(--hover); }
.cf-list .cnt { margin-left: auto; color: var(--muted); font-size: 12px; }
.cf-row { display: flex; gap: 6px; align-items: center; }
.cf-f { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; }
.cf-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 8px; }
.cf-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 6px 0 10px; border-radius: 999px; background: var(--theme-soft); color: var(--theme); font-size: 12.5px; }
.cf-chip button { border: 0; background: none; color: inherit; padding: 0 4px; font-size: 12px; opacity: .7; } .cf-chip button:hover { opacity: 1; }
/* "Đang lọc n cột" above a filtered detail table (tabletools.js) */
.cf-chips.tt-chips { padding: 0 0 6px; }

@media (max-width: 860px) {
  .side { margin: 0; border-radius: 0; }
  .pane { margin: 6px; border-radius: 14px; }
}
@media (prefers-reduced-transparency: reduce) {
  .pop, .wg, .mask { -webkit-backdrop-filter: none; backdrop-filter: none; }
  :root { --glass: rgba(255, 255, 255, .95); --panel: #fff; }
}

/* summary strip above data lists */
.sum-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; padding: 14px 16px 0; }
.sum-strip .kpi-mini.click { cursor: pointer; } .sum-strip .kpi-mini.click:hover { border-color: var(--theme-line); }
.pane-body.withsum { display: flex; flex-direction: column; }
.pane-body.withsum > .list { flex: 1; height: auto; min-height: 420px; }
.sum-strip { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.sum-strip .kpi-mini { padding: 9px 12px; } .sum-strip .kpi-mini .v { font-size: 18px; }
/* what the cards are counted on when they follow the list's filters (Q-08): one quiet line above them, not repeated per card */
/* a full-row item in the auto-fit grid would keep its empty tracks and squeeze the cards: with the scope line the strip wraps as flex */
.sum-strip:has(> .sum-scope) { display: flex; flex-wrap: wrap; }
.sum-strip:has(> .sum-scope) > .kpi-mini { flex: 1 1 140px; min-width: 0; }
.sum-strip .sum-scope { flex: 0 0 100%; display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 11.5px; color: var(--muted); margin-bottom: -2px; }
.btn.secondary { background: var(--theme-soft); border-color: transparent; color: var(--theme); }
.btn.secondary:hover { background: var(--theme-line); color: var(--theme); }
.form-foot { background: rgba(255, 255, 255, .55); border-top: 1px solid var(--line-2); }
:root[data-theme="dark"] .form-foot { background: rgba(255, 255, 255, .03); }
/* dialogs: nearly opaque so the list behind never shows through text; the blur lives on the dim backdrop */
.dialog, .viewer { background: rgba(252, 252, 255, .97); }
:root[data-theme="dark"] .dialog, :root[data-theme="dark"] .viewer { background: rgba(28, 30, 44, .98); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dialog, :root:not([data-theme="light"]) .viewer { background: rgba(28, 30, 44, .98); } }
.mask { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.rec-side { background: rgba(246, 247, 253, .7); }
:root[data-theme="dark"] .rec-side { background: rgba(255, 255, 255, .02); }

/* =====================================================================
   iOS-like refinement: clearer glass (real backdrop blur), airy light colours,
   hairline separators, system-style controls.
   The blur sits on a ::before layer so the panel itself never becomes the
   containing block of fixed children (nested dialogs / viewers keep working).
   ===================================================================== */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Be Vietnam Pro", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --theme: #2F7BF6; --theme-hover: #1F6AE6; --theme-soft: rgba(47, 123, 246, .11); --theme-line: rgba(47, 123, 246, .32);
  --text: #111318; --text-2: #3C4150; --muted: #6C7080; --placeholder: #A0A4B0;
  --line: rgba(60, 60, 67, .13); --line-2: rgba(60, 60, 67, .08); --input: rgba(60, 60, 67, .16);
  --hover: rgba(120, 120, 128, .08); --selected: rgba(47, 123, 246, .11);
  --readonly: rgba(118, 118, 128, .08); --fill: rgba(118, 118, 128, .1);
  --glass: rgba(255, 255, 255, .52); --glass-strong: rgba(255, 255, 255, .78); --glass-border: rgba(255, 255, 255, .7);
  --glass-shadow: 0 1px 1px rgba(0, 0, 0, .02), 0 10px 32px rgba(40, 50, 90, .07);
  --shadow-widget: 0 1px 2px rgba(0, 0, 0, .03), 0 6px 20px rgba(40, 50, 90, .05);
  --blur: blur(30px) saturate(185%);
  /* brighter wallpaper so the frosted panels have colour to refract */
  --bg-image: radial-gradient(42vw 42vw at 4% 2%, rgba(176, 196, 255, .75) 0%, transparent 70%), radial-gradient(38vw 38vw at 98% 6%, rgba(168, 232, 214, .7) 0%, transparent 70%),
    radial-gradient(40vw 40vw at 88% 96%, rgba(255, 207, 186, .65) 0%, transparent 70%), radial-gradient(36vw 36vw at 8% 98%, rgba(222, 200, 255, .65) 0%, transparent 70%),
    radial-gradient(30vw 30vw at 50% 45%, rgba(255, 255, 255, .9) 0%, transparent 70%), linear-gradient(160deg, #F7F9FF, #F4F5FA 50%, #FAF7F5);
}
:root[data-theme="dark"] {
  --theme: #4C9AFF; --theme-hover: #6AAAFF; --theme-soft: rgba(76, 154, 255, .16); --theme-line: rgba(76, 154, 255, .4);
  --text: #F2F3F7; --text-2: #C7CAD6; --muted: #9195A3; --line: rgba(84, 84, 88, .55); --line-2: rgba(84, 84, 88, .35); --input: rgba(120, 120, 128, .3);
  --hover: rgba(120, 120, 128, .16); --readonly: rgba(118, 118, 128, .2); --fill: rgba(118, 118, 128, .24);
  --glass: rgba(30, 30, 34, .5); --glass-strong: rgba(36, 36, 40, .78); --glass-border: rgba(255, 255, 255, .08);
  --bg-image: radial-gradient(42vw 42vw at 4% 2%, rgba(80, 100, 220, .45) 0%, transparent 70%), radial-gradient(38vw 38vw at 98% 6%, rgba(40, 160, 140, .3) 0%, transparent 70%),
    radial-gradient(40vw 40vw at 88% 96%, rgba(220, 110, 90, .25) 0%, transparent 70%), radial-gradient(36vw 36vw at 8% 98%, rgba(140, 90, 220, .3) 0%, transparent 70%), linear-gradient(160deg, #0E0F14, #121318);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --theme: #4C9AFF; --theme-hover: #6AAAFF; --theme-soft: rgba(76, 154, 255, .16); --theme-line: rgba(76, 154, 255, .4);
    --text: #F2F3F7; --text-2: #C7CAD6; --muted: #9195A3; --line: rgba(84, 84, 88, .55); --line-2: rgba(84, 84, 88, .35); --input: rgba(120, 120, 128, .3);
    --hover: rgba(120, 120, 128, .16); --readonly: rgba(118, 118, 128, .2); --fill: rgba(118, 118, 128, .24);
    --glass: rgba(30, 30, 34, .5); --glass-strong: rgba(36, 36, 40, .78); --glass-border: rgba(255, 255, 255, .08);
    --bg-image: radial-gradient(42vw 42vw at 4% 2%, rgba(80, 100, 220, .45) 0%, transparent 70%), radial-gradient(38vw 38vw at 98% 6%, rgba(40, 160, 140, .3) 0%, transparent 70%),
      radial-gradient(40vw 40vw at 88% 96%, rgba(220, 110, 90, .25) 0%, transparent 70%), radial-gradient(36vw 36vw at 8% 98%, rgba(140, 90, 220, .3) 0%, transparent 70%), linear-gradient(160deg, #0E0F14, #121318);
  }
}
body { font-family: var(--font); -webkit-font-smoothing: antialiased; letter-spacing: -.008em; }

/* --- real frosted glass on big surfaces (blur on a pseudo layer) --- */
.side, .pane, .dialog, .viewer { position: relative; isolation: isolate; background: transparent !important; border: 1px solid var(--glass-border); }
.side::before, .pane::before, .dialog::before, .viewer::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.dialog::before, .viewer::before { background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(40px) saturate(190%); backdrop-filter: blur(40px) saturate(190%); }
:root[data-theme="dark"] .dialog::before, :root[data-theme="dark"] .viewer::before { background: rgba(32, 32, 36, .84); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dialog::before, :root:not([data-theme="light"]) .viewer::before { background: rgba(32, 32, 36, .84); } }
.side { border-radius: 20px; box-shadow: var(--glass-shadow); }
.pane { border-radius: 20px; box-shadow: var(--glass-shadow); }
.dialog { border-radius: 20px; box-shadow: 0 30px 80px rgba(20, 24, 50, .18), 0 2px 8px rgba(20, 24, 50, .06); }
.mask { background: rgba(20, 22, 40, .16); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); }
.pane-head { border-bottom: 1px solid var(--line-2); background: rgba(255, 255, 255, .18); }
:root[data-theme="dark"] .pane-head { background: transparent; }
.rec-side { background: rgba(255, 255, 255, .25); border-left: 1px solid var(--line-2); }
.dlg-h, .dlg-f, .rec-bar { border-color: var(--line-2); }

/* leaf cards: lighter, crisper */
.kpi-mini, .wg, .doc-card, .imp-tile, .imp-card, .nt-card, .board-card, .task-sum { background: rgba(255, 255, 255, .58); border: 1px solid rgba(255, 255, 255, .8); box-shadow: var(--shadow-widget);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
:root[data-theme="dark"] .kpi-mini, :root[data-theme="dark"] .wg, :root[data-theme="dark"] .doc-card, :root[data-theme="dark"] .board-card, :root[data-theme="dark"] .task-sum { background: rgba(44, 44, 48, .5); border-color: rgba(255, 255, 255, .06); }
.wg { border-radius: 18px; } .kpi-mini { border-radius: 16px; }
.wg.title { background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* --- sidebar like iPadOS --- */
.node { height: 36px; border-radius: 10px; color: var(--text); font-weight: 400; }
.node:hover { background: var(--hover); }
.node.on { background: var(--theme-soft); color: var(--theme); font-weight: 600; box-shadow: none; }
.node.on .ei { filter: saturate(1.2); }
.side-search input { background: var(--fill); border: 0; border-radius: 10px; height: 34px; }
.side-search input:focus { background: rgba(255, 255, 255, .85); box-shadow: 0 0 0 3px var(--theme-soft); }
.app-icon { background: linear-gradient(160deg, #6FB1FF, #2F7BF6); box-shadow: 0 4px 12px rgba(47, 123, 246, .3); }

/* --- controls: filled inputs, flat solid primary, segmented tabs --- */
.btn { background: rgba(255, 255, 255, .7); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 1px 1px rgba(0, 0, 0, .03); font-weight: 500; }
.btn:hover { background: #fff; border-color: var(--line); color: var(--theme); }
:root[data-theme="dark"] .btn { background: var(--fill); } :root[data-theme="dark"] .btn:hover { background: rgba(120, 120, 128, .32); }
.btn.primary { background: var(--theme); border-color: transparent; color: #fff; box-shadow: 0 2px 8px rgba(47, 123, 246, .25); }
.btn.primary:hover { background: var(--theme-hover); color: #fff; }
.btn.secondary { background: var(--theme-soft); color: var(--theme); border-color: transparent; box-shadow: none; }
.btn.text, .btn.link { border-color: transparent; box-shadow: none; background: none; }
.inp { background: var(--fill); border: 1px solid transparent; border-radius: 10px; }
.inp:hover { border-color: transparent; background: rgba(118, 118, 128, .14); }
.inp:focus { background: rgba(255, 255, 255, .92); border-color: var(--theme); box-shadow: 0 0 0 3px var(--theme-soft); }
.inp.inp-bad, .inp.inp-bad:focus { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
:root[data-theme="dark"] .inp:focus { background: rgba(0, 0, 0, .25); }
.inp:disabled, .inp[readonly], .ro { background: var(--readonly); }
.sel-data { background: var(--fill); border-color: transparent; box-shadow: none; }
.sel-data:hover { background: rgba(118, 118, 128, .14); }
.mtabs { background: var(--fill); border: 0; padding: 2px; border-radius: 10px; }
.mtab { height: 30px; border-radius: 8px; color: var(--text); }
.mtab:hover { background: rgba(255, 255, 255, .45); }
.mtab.on { background: #fff; color: var(--text); font-weight: 600; box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 1px 1px rgba(0, 0, 0, .04); }
:root[data-theme="dark"] .mtab.on { background: rgba(99, 99, 102, .7); color: #fff; }
.period { background: var(--fill); border: 0; }
.period.on { background: var(--theme-soft); }
.tabs-u .tab-u.on { color: var(--theme); border-bottom-color: var(--theme); }

/* --- tables: clean white rows, inset hairlines --- */
.grid-wrap { background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .85); border-radius: 14px; box-shadow: var(--shadow-widget); }
:root[data-theme="dark"] .grid-wrap { background: rgba(44, 44, 48, .35); border-color: rgba(255, 255, 255, .06); }
.grid th { background: rgba(250, 250, 252, .9); color: var(--muted); font-weight: 500; font-size: 12px; text-transform: none; border-bottom: 1px solid var(--line-2); }
:root[data-theme="dark"] .grid th { background: rgba(40, 40, 44, .92); }
.grid td { border-bottom: 1px solid var(--line-2); }
.grid tr.click:hover td { background: rgba(47, 123, 246, .045); }
.grid td.sticky-l, .grid th.sticky-l { background: rgba(252, 252, 254, .96); }
.grid tfoot td { background: rgba(248, 248, 251, .97); }
.tbl-box, .sub { background: rgba(255, 255, 255, .55); border-color: rgba(255, 255, 255, .85); box-shadow: 0 1px 2px rgba(0, 0, 0, .02); }
:root[data-theme="dark"] .tbl-box, :root[data-theme="dark"] .sub { background: rgba(44, 44, 48, .3); border-color: rgba(255, 255, 255, .06); }
.tbl th, .sub th { background: rgba(250, 250, 252, .8); color: var(--muted); font-size: 12px; }
:root[data-theme="dark"] .tbl th, :root[data-theme="dark"] .sub th { background: rgba(255, 255, 255, .03); }

/* --- tags: soft tinted capsules --- */
.tag { font-weight: 500; }
.sep { border-bottom-color: var(--line-2); }
.sep-label::before { background: var(--theme); }
.wg.title span::before { background: var(--theme); border-radius: 50%; width: 8px; height: 8px; }
.prog { background: var(--fill); }
.prog-bar { background: linear-gradient(90deg, #6FB1FF, #2F7BF6); }
.avatar { background: linear-gradient(160deg, #6FB1FF, #2F7BF6); }
.pop, .cf-pop, .toast { background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%); border: 1px solid rgba(255, 255, 255, .8); border-radius: 14px; }
:root[data-theme="dark"] .pop, :root[data-theme="dark"] .cf-pop, :root[data-theme="dark"] .toast { background: rgba(40, 40, 44, .82); border-color: rgba(255, 255, 255, .08); }
.pop-item { border-radius: 8px; }
.form-foot { background: rgba(255, 255, 255, .35); }
/* phone: the sidebar is an off-canvas drawer (fixed), keep that positioning and give it a near-opaque glass */
@media (max-width: 820px) {
  .side { position: fixed; margin: 0; border-radius: 0 20px 20px 0; }
  .side::before { background: rgba(255, 255, 255, .86); }
  :root[data-theme="dark"] .side::before { background: rgba(30, 30, 34, .9); }
  .pane { margin: 6px; border-radius: 16px; }
}
.legend i, .hbar .track i { background: linear-gradient(90deg, #8CC2FF, #3D84F7) !important; }
.chart rect { rx: 6px; }

/* =====================================================================
   Clarity & type pass: clearer (less milky) glass, lighter wallpaper,
   smaller and finer type. Inter (SF-like, compact capitals, full Vietnamese)
   replaces the wider Be Vietnam Pro, so ALL-CAPS data no longer looks oversized.
   ===================================================================== */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --glass: rgba(255, 255, 255, .34); --glass-border: rgba(255, 255, 255, .62);
  --blur: blur(40px) saturate(160%) brightness(1.04);
  --fill: rgba(118, 118, 128, .07); --readonly: rgba(118, 118, 128, .06);
  --line: rgba(60, 60, 67, .11); --line-2: rgba(60, 60, 67, .07);
  --bg-image: radial-gradient(44vw 44vw at 2% 0%, rgba(186, 206, 255, .55) 0%, transparent 70%), radial-gradient(40vw 40vw at 100% 4%, rgba(178, 236, 220, .5) 0%, transparent 70%),
    radial-gradient(42vw 42vw at 90% 100%, rgba(255, 216, 198, .45) 0%, transparent 70%), radial-gradient(38vw 38vw at 6% 100%, rgba(228, 212, 255, .45) 0%, transparent 70%),
    linear-gradient(160deg, #FBFCFF, #F8F9FC 50%, #FDFBFA);
}
:root[data-theme="dark"] { --glass: rgba(28, 28, 32, .4); --blur: blur(40px) saturate(150%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --glass: rgba(28, 28, 32, .4); --blur: blur(40px) saturate(150%); } }

/* inner surfaces: thin clear glass instead of stacked milky whites */
.kpi-mini, .wg, .doc-card, .imp-tile, .imp-card, .board-card, .task-sum { background: rgba(255, 255, 255, .42); border-color: rgba(255, 255, 255, .7); box-shadow: 0 1px 2px rgba(0, 0, 0, .025), 0 4px 16px rgba(40, 50, 90, .04); }
.grid-wrap, .tbl-box, .sub { background: rgba(255, 255, 255, .4); border-color: rgba(255, 255, 255, .7); }
.grid th, .tbl th, .sub th { background: rgba(255, 255, 255, .72); }
.grid td.sticky-l, .grid th.sticky-l { background: rgba(255, 255, 255, .9); }
.grid tfoot td { background: rgba(255, 255, 255, .88); }
.pane-head { background: transparent; }
.rec-side { background: rgba(255, 255, 255, .18); }
.btn { background: rgba(255, 255, 255, .55); }
.mask { background: rgba(20, 22, 40, .1); }
:root[data-theme="dark"] .grid th, :root[data-theme="dark"] .tbl th { background: rgba(40, 40, 44, .85); }
:root[data-theme="dark"] .grid td.sticky-l, :root[data-theme="dark"] .grid tfoot td { background: rgba(34, 34, 38, .95); }
:root[data-theme="dark"] .kpi-mini, :root[data-theme="dark"] .wg, :root[data-theme="dark"] .grid-wrap, :root[data-theme="dark"] .tbl-box { background: rgba(44, 44, 48, .32); border-color: rgba(255, 255, 255, .06); }

/* --- type scale: 13px base, finer weights --- */
body { font-size: 13px; line-height: 1.5; letter-spacing: -.006em; font-feature-settings: "cv11", "ss03"; }
b, strong { font-weight: 600; }
.app-name { font-size: 14px; font-weight: 600; }
.pane-title { font-size: 14px; font-weight: 600; }
.node { font-size: 13px; height: 34px; }
.btn { font-size: 13px; height: 32px; } .btn.sm { font-size: 12px; height: 26px; }
.inp { font-size: 13px; height: 32px; } .inp.sm { font-size: 12px; height: 28px; }
.mtab { font-size: 12.5px; height: 28px; }
.grid { font-size: 12.5px; } .grid th { font-size: 11.5px; line-height: 30px; } .grid td { padding: 7px 12px; line-height: 19px; }
.tbl, .sub table { font-size: 12.5px; } .tbl th, .sub th { font-size: 11.5px; } .tbl td { padding: 6px 10px; }
.tag { font-size: 11.5px; height: 20px; padding: 0 7px; }
.fld-l { font-size: 12.5px; font-weight: 500; } .fld-hint { font-size: 11.5px; }
.ro { font-size: 13px; }
.sep-label { font-size: 13px; }
.dlg-h h2 { font-size: 15px; }
.kpi-mini .l { font-size: 11.5px; } .kpi-mini .v { font-size: 17px; font-weight: 600; } .kpi-mini .s { font-size: 11.5px; }
.sum-strip .kpi-mini .v { font-size: 16px; }
.wg-h h3 { font-size: 13px; } .wg.title span { font-size: 15px; }
.big-n { font-size: 40px; font-weight: 500; letter-spacing: -.03em; } .big-s { font-size: 12px; }
.task-sum .n { font-size: 22px; font-weight: 600; }
.small, .muted.small { font-size: 11.5px; }
.grid-foot, .pager { font-size: 12px; }
.period, .period .inp.sm { font-size: 12.5px; }
.cf-pop { font-size: 12.5px; }
.toast { font-size: 13px; }
.chart text { font-size: 11px; }
@media (max-width: 1100px) { .big-n { font-size: 34px; } }

/* ===== Sidebar sections + material plan ===== */
.nav-sec { font-size: 11px; font-weight: 500; color: var(--muted); padding: 12px 20px 4px; letter-spacing: .02em; white-space: nowrap; overflow: hidden; }
.shell.collapsed .nav-sec { visibility: hidden; height: 8px; padding: 0; }
.pad-x { padding: 12px 16px 24px; }
.pad-x > .tabs-u { overflow-y: hidden; }
.plan-grp { margin-bottom: 16px; }
.plan-grp-h { display: flex; align-items: center; gap: 8px; padding: 0 2px 6px; min-width: 0; }
.plan-sup { font-weight: 600; white-space: nowrap; }
.plan-grp-h .clip { max-width: 360px; }
.mat-cell { display: flex; gap: 6px; align-items: center; }

/* import: map unknown codes inline */
.imp-map { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 8px 0 12px; background: rgba(255, 196, 120, .08); }
.imp-map-h { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
.imp-map .tbl td { padding: 4px 8px; }

/* ===== Compact entry forms (Thêm mới) — dense 4-column layout ===== */
.form-page { max-width: 1320px; container-type: inline-size; }
.form-page .form-body { padding: 10px 20px 16px; }
.form-page .form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 14px; row-gap: 0; }
.form-page .fld { padding: 0 0 10px; display: flex; flex-direction: column; }
.form-page .fld.half { grid-column: span 2; }
.form-page .fld-l { padding: 0 0 3px; line-height: 18px; font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.form-page .fld-l .req { margin-left: 0; }
.form-page .fld-hint { order: 3; margin: 3px 0 0; font-size: 11px; line-height: 15px; }
.form-page .fld.span2 > .fld-hint { order: 0; }
.form-page .ro { min-height: 32px; line-height: 22px; }
.form-page textarea.inp { min-height: 0; }
.form-page .sep { margin: 8px 0 10px; padding-bottom: 2px; }
.form-page .sep:first-child { margin-top: 0; }
.form-page .sep-label { font-size: 12.5px; line-height: 24px; color: var(--text); }
.form-page .sep-label::before { top: 6px; bottom: 6px; width: 3px; }
.form-page .sub td { padding: 3px 4px; }
.form-page .sub-actions { margin-top: 4px; }
.form-foot { padding: 8px 20px; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); }
:root[data-theme="dark"] .form-foot { background: rgba(30, 30, 34, .82); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .form-foot { background: rgba(30, 30, 34, .82); } }
@container (max-width: 980px) { .form-page .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .form-page .fld.half { grid-column: span 3; } }
@container (max-width: 720px) { .form-page .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-page .fld.half { grid-column: span 2; } }
@container (max-width: 460px) { .form-page .form-grid { grid-template-columns: minmax(0, 1fr); } .form-page .fld.half { grid-column: auto; } }
/* a wide line table inside a field scrolls in its own box instead of widening the whole form (phones) */
.form-grid > * { min-width: 0; }

/* ===== Version 2 pages ===== */
.warn-t { color: var(--orange); } .ok-t { color: var(--green-text, var(--green)); }
.sec-h { font-size: 13px; font-weight: 600; color: var(--text); margin: 4px 0 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--readonly); color: var(--text-2); font-size: 12px; text-decoration: none; }
a.chip:hover { background: var(--hover); color: var(--theme); }
/* packaging check grouped by finished product */
.plan-list { display: grid; gap: 8px; }
.plan-row { border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .45); overflow: hidden; }
:root[data-theme="dark"] .plan-row { background: rgba(255, 255, 255, .03); }
.plan-row.st-buy { box-shadow: inset 3px 0 0 var(--red); } .plan-row.st-transfer, .plan-row.st-wait { box-shadow: inset 3px 0 0 var(--orange); } .plan-row.st-ok { box-shadow: inset 3px 0 0 var(--green); } .plan-row.st-coming { box-shadow: inset 3px 0 0 var(--blue); }
.plan-h, .prod-h { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; flex-wrap: wrap; }
.plan-h:hover, .prod-h:hover { background: var(--hover); }
.plan-h:focus-visible, .prod-h:focus-visible { outline: 2px solid var(--theme); outline-offset: -2px; }
/* the product keeps a readable width; on a narrow screen what follows it ("còn làm", status) goes to the next line */
.plan-p { display: flex; flex-direction: column; min-width: 140px; flex: 1 1 180px; } .plan-p .clip { max-width: 420px; }
.plan-t { margin: 0 10px 10px; } .plan-t .tbl td, .plan-t .tbl th { padding-top: 5px; padding-bottom: 5px; }
.caret { width: 12px; color: var(--muted); font-size: 11px; }
/* stock by product */
.prod-cards { display: grid; gap: 8px; } .prod-card { border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .42); overflow: hidden; }
:root[data-theme="dark"] .prod-card { background: rgba(255, 255, 255, .03); }
.pc-n { display: flex; flex-direction: column; align-items: flex-end; min-width: 110px; } .pc-n small { color: var(--muted); font-size: 11px; } .pc-n b { font-weight: 600; font-variant-numeric: tabular-nums; }
/* factory cards (money) */
.fac-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.fac-card { text-align: left; font: inherit; color: inherit; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: rgba(255, 255, 255, .5); cursor: pointer; display: grid; gap: 6px; }
:root[data-theme="dark"] .fac-card { background: rgba(255, 255, 255, .04); }
.fac-card:hover { border-color: var(--theme-line); box-shadow: var(--shadow-widget); } .fac-card:focus-visible { outline: 2px solid var(--theme); }
.fc-h { display: flex; gap: 8px; align-items: baseline; min-width: 0; } .fc-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; } .fc-row b { font-variant-numeric: tabular-nums; }
.fc-f { font-size: 12px; color: var(--theme); }
.tbl.stmt tfoot td { background: var(--readonly); }
/* reconciliation run */
.run-t tr.has-diff td { background: rgba(255, 170, 90, .07); } .run-t .inp.sm { height: 28px; }
/* BOM cards */
.bom-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; align-items: start; }
/* Quy tắc mã: the short abbreviation lists side by side instead of four full-width two-column tables */
.abbr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.abbr-card { min-width: 0; }
.bom-card { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; background: rgba(255, 255, 255, .5); min-width: 0; overflow: hidden; }
/* the norm column keeps its own width and wraps its conversion line, so a card never spills into the next one */
.bom-card .tbl { width: 100%; table-layout: fixed; border-collapse: collapse; }
.bom-card .tbl td:first-child { overflow: hidden; }
.bom-card .tbl td:last-child { width: 132px; white-space: normal; text-align: right; vertical-align: top; }
.bom-card .tbl td:last-child .conv-note, .bom-card .tbl td:last-child > div { white-space: normal; overflow-wrap: anywhere; }
:root[data-theme="dark"] .bom-card { background: rgba(255, 255, 255, .04); }
.bom-card.empty-b { border-style: dashed; } .bom-card .bc-h { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; margin-bottom: 6px; }
.bom-card .tbl td { padding: 4px 6px; } .bom-card .clip { max-width: 220px; }
/* supplier profile checklist */
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 6px 16px; margin-bottom: 8px; }
.chk-row { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 10px; background: var(--readonly); }
.chk-row.done { background: var(--green-soft); }
/* COA ticks inside the receipt table */
.coa-pick summary { cursor: pointer; font-size: 12px; color: var(--theme); }
.coa-pick[open] > div { position: absolute; z-index: 20; background: var(--glass-strong, #fff); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: grid; gap: 4px; box-shadow: var(--shadow-pop); min-width: 260px; }

/* =====================================================================
   Glass pass: more transparent surfaces. Less white in every layer, stronger blur + saturation behind
   (that is what keeps text readable on clear glass), a touch more colour in the wallpaper so the glass shows.
   ===================================================================== */
:root {
  --glass: rgba(255, 255, 255, .14); --glass-border: rgba(255, 255, 255, .5);
  --blur: blur(30px) saturate(190%);
  --bg-image: radial-gradient(62vw 62vw at 0% 0%, rgba(140, 172, 255, .72) 0%, transparent 72%), radial-gradient(56vw 56vw at 100% 2%, rgba(120, 220, 196, .64) 0%, transparent 72%),
    radial-gradient(60vw 60vw at 92% 100%, rgba(255, 182, 156, .62) 0%, transparent 72%), radial-gradient(56vw 56vw at 4% 100%, rgba(198, 170, 255, .64) 0%, transparent 72%),
    radial-gradient(40vw 40vw at 50% 50%, rgba(170, 200, 255, .32) 0%, transparent 75%), linear-gradient(160deg, #EEF3FF, #EEF2F8 50%, #F8F1EE);
}
:root[data-theme="dark"] { --glass: rgba(24, 24, 28, .24); --glass-border: rgba(255, 255, 255, .07); --blur: blur(30px) saturate(170%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --glass: rgba(24, 24, 28, .24); --glass-border: rgba(255, 255, 255, .07); --blur: blur(30px) saturate(170%); } }

/* cards and tables: thin clear glass with their own blur */
.kpi-mini, .wg, .doc-card, .imp-tile, .imp-card, .nt-card, .board-card, .task-sum { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); }
.grid-wrap, .tbl-box, .sub { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); }
.grid th, .tbl th, .sub th { background: rgba(255, 255, 255, .34); }
/* frozen cells and totals: same tint as their row, a strong blur hides what scrolls under them (no lighter strip) */
.grid td.sticky-l { background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); }
.grid th.sticky-l { background: rgba(255, 255, 255, .34); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); }
.grid tfoot td { background: rgba(255, 255, 255, .34); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); }
.grid tr.click:hover td.sticky-l, .grid tr.sel td.sticky-l { background: rgba(47, 123, 246, .06); }
/* the tick column keeps its width when the table has many columns, box centred with room on both sides */
.grid .ck { width: 40px; min-width: 40px; max-width: 40px; padding: 0 !important; text-align: center; }
.grid .ck input[type="checkbox"] { margin: 0; vertical-align: middle; }
.rec-side { background: rgba(255, 255, 255, .08); }
.btn { background: rgba(255, 255, 255, .38); }
.btn:hover { background: rgba(255, 255, 255, .7); }
.inp:focus { background: rgba(255, 255, 255, .8); }
.mask { background: rgba(20, 22, 40, .06); -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%); }
.dialog::before, .viewer::before { background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(44px) saturate(200%) brightness(1.05); backdrop-filter: blur(44px) saturate(200%) brightness(1.05); }
.pop, .cf-pop, .toast { background: rgba(255, 255, 255, .6); }
.form-foot { background: rgba(255, 255, 255, .4); }
:root[data-theme="dark"] .kpi-mini, :root[data-theme="dark"] .wg, :root[data-theme="dark"] .doc-card, :root[data-theme="dark"] .board-card, :root[data-theme="dark"] .task-sum,
:root[data-theme="dark"] .grid-wrap, :root[data-theme="dark"] .tbl-box, :root[data-theme="dark"] .sub { background: rgba(44, 44, 48, .2); border-color: rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .grid th, :root[data-theme="dark"] .tbl th { background: rgba(40, 40, 44, .55); }
:root[data-theme="dark"] .grid td.sticky-l { background: rgba(34, 34, 38, .2); }
:root[data-theme="dark"] .grid th.sticky-l, :root[data-theme="dark"] .grid tfoot td { background: rgba(40, 40, 44, .55); }
:root[data-theme="dark"] .dialog::before, :root[data-theme="dark"] .viewer::before { background: rgba(30, 30, 34, .62); }
:root[data-theme="dark"] .pop, :root[data-theme="dark"] .cf-pop, :root[data-theme="dark"] .toast { background: rgba(40, 40, 44, .66); }
:root[data-theme="dark"] .form-foot { background: rgba(30, 30, 34, .55); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dialog::before, :root:not([data-theme="light"]) .viewer::before { background: rgba(30, 30, 34, .62); }
  :root:not([data-theme="light"]) .form-foot { background: rgba(30, 30, 34, .55); }
}
/* phone drawer sits over the page content: a little more body there */
@media (max-width: 820px) {
  .side::before { background: rgba(255, 255, 255, .62); }
  :root[data-theme="dark"] .side::before { background: rgba(30, 30, 34, .72); }
}
/* reduced transparency in the OS settings: back to solid surfaces */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: rgba(255, 255, 255, .9); }
  .dialog::before, .viewer::before { background: rgba(255, 255, 255, .96); }
  .kpi-mini, .wg, .grid-wrap, .tbl-box, .sub { background: rgba(255, 255, 255, .9); }
  /* dark: the same solid surfaces in dark colours (the dark rules above are more specific than the light ones here) */
  :root[data-theme="dark"] { --glass: rgba(28, 30, 44, .97); --glass-strong: rgba(30, 32, 48, .98); --panel: #1C1E2B; --panel-2: #222536; }
  :root[data-theme="dark"] .dialog::before, :root[data-theme="dark"] .viewer::before { background: rgba(28, 30, 42, .98); }
  :root[data-theme="dark"] .kpi-mini, :root[data-theme="dark"] .wg, :root[data-theme="dark"] .doc-card, :root[data-theme="dark"] .board-card, :root[data-theme="dark"] .task-sum,
  :root[data-theme="dark"] .grid-wrap, :root[data-theme="dark"] .tbl-box, :root[data-theme="dark"] .sub { background: rgba(36, 38, 54, .96); }
  :root[data-theme="dark"] .side::before { background: rgba(24, 26, 36, .98); }
  /* solid surfaces need no frosted glass (frozen columns and floating table heads keep theirs: rows scroll under them) */
  .dialog, .dialog::before, .viewer, .viewer::before, .side, .side::before, .pop, .wg, .mask, .kpi-mini, .tbl-box, .grid-wrap, .sub { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* frozen columns (list "đóng băng cột"): clear glass like the tick column; a strong blur turns what scrolls under them into soft colour, never readable text */
.grid td.frz, .grid th.frz { position: sticky; z-index: 1; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
.grid th.frz { z-index: 3; background: rgba(255, 255, 255, .38); }
.grid tfoot td.frz { background: rgba(255, 255, 255, .38); }
.grid tr.click:hover td.frz, .grid tr.sel td.frz { background: rgba(47, 123, 246, .07); }
.grid tr.sel td.frz { background: var(--theme-soft) !important; }
.grid .frz-last { box-shadow: 1px 0 0 rgba(255, 255, 255, .7), 6px 0 10px -6px rgba(20, 30, 60, .18); }
.grid th .cf.pin { margin-left: 2px; }
:root[data-theme="dark"] .grid td.frz { background: rgba(34, 34, 38, .24); }
:root[data-theme="dark"] .grid th.frz, :root[data-theme="dark"] .grid tfoot td.frz { background: rgba(40, 40, 44, .55); }
:root[data-theme="dark"] .grid .frz-last { box-shadow: 1px 0 0 rgba(255, 255, 255, .08), 6px 0 10px -6px rgba(0, 0, 0, .5); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .grid td.frz { background: rgba(34, 34, 38, .24); }
  :root:not([data-theme="light"]) .grid th.frz, :root:not([data-theme="light"]) .grid tfoot td.frz { background: rgba(40, 40, 44, .55); }
}

/* (i) notes: a small round "i" next to a heading or field name; the explanation opens in a glass bubble on click */
.info-i { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 6px; padding: 0; border-radius: 50%; border: 1px solid rgba(47, 123, 246, .45);
  background: rgba(255, 255, 255, .5); color: var(--theme); font: italic 600 10.5px/1 Georgia, 'Times New Roman', serif; cursor: pointer; vertical-align: 1px; flex: none; transition: background .12s, color .12s; }
.info-i:hover, .info-i.on { background: var(--theme); color: #fff; border-color: var(--theme); }
.info-i:focus-visible { outline: 2px solid var(--theme); outline-offset: 2px; }
.info-bubble { position: fixed; z-index: 9999; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.5; color: var(--text);
  background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .85); box-shadow: 0 10px 30px rgba(20, 30, 60, .16);
  -webkit-backdrop-filter: blur(28px) saturate(190%); backdrop-filter: blur(28px) saturate(190%); animation: info-in .12s ease-out; }
.info-bubble .info-t { font-weight: 600; margin-bottom: 4px; }
.info-bubble .info-b { color: var(--text-2); white-space: normal; }
.info-bubble a { color: var(--theme); }
@keyframes info-in { from { opacity: 0; transform: translateY(-3px); } }
.note-line { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; margin: 6px 0; }
.note-line .info-i { margin-left: 0; }
.fld-l .info-i { margin-left: 5px; }
.form-page .fld-l { overflow: visible; }
.pane-title + .info-i { margin-left: 8px; }
.sep { align-items: center; }
:root[data-theme="dark"] .info-i { background: rgba(40, 40, 44, .6); }
:root[data-theme="dark"] .info-bubble { background: rgba(40, 40, 44, .78); border-color: rgba(255, 255, 255, .08); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .info-i { background: rgba(40, 40, 44, .6); }
  :root:not([data-theme="light"]) .info-bubble { background: rgba(40, 40, 44, .78); border-color: rgba(255, 255, 255, .08); }
}
/* column widths: drag the right edge of a header (a thin line shows where); narrowed text ends with "…" */
.grid th { position: sticky; }
.grid th .col-rs { position: absolute; top: 0; right: -4px; bottom: 0; width: 9px; cursor: col-resize; z-index: 5; touch-action: none; }
.grid th .col-rs::after { content: ''; position: absolute; top: 7px; bottom: 7px; left: 4px; width: 2px; border-radius: 2px; background: transparent; transition: background .12s; }
.grid th:hover .col-rs::after { background: rgba(47, 123, 246, .28); }
.grid th .col-rs:hover::after, body.col-resizing .grid th .col-rs::after { background: var(--theme); }
.grid th.cw, .grid td.cw { overflow: hidden; text-overflow: ellipsis; }
.grid td.cw > * { overflow: hidden; text-overflow: ellipsis; }
body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-select: none !important; }
/* column order: a header being dragged follows the mouse; a theme-coloured bar marks where it will land */
.grid th.col-drag { z-index: 6; opacity: .9; background: rgba(255, 255, 255, .85); box-shadow: 0 6px 18px rgba(20, 30, 60, .18); cursor: grabbing; transition: none; }
.grid th.col-drop-l { box-shadow: inset 3px 0 0 var(--theme); }
.grid th.col-drop-r { box-shadow: inset -3px 0 0 var(--theme); }
body.col-moving, body.col-moving * { cursor: grabbing !important; user-select: none !important; }
:root[data-theme="dark"] .grid th.col-drag { background: rgba(50, 50, 56, .9); }
/* column menu: tick to show, ▲▼ to move */
.cols-pop { min-width: 300px; }
.pop-cols { max-height: min(340px, 50vh); overflow: auto; padding: 2px 4px; }
.pop-row { display: flex; align-items: center; gap: 2px; padding: 1px 6px; border-radius: 8px; }
.pop-row:hover { background: var(--hover); }
.pop-row label { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 0; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pop-row.off label { color: var(--muted); }
.pop-row .icon-btn { width: 24px; height: 24px; font-size: 9px; color: var(--muted); }
.pop-row .icon-btn:hover:not(:disabled) { color: var(--theme); }
.pop-row .icon-btn:disabled { opacity: .25; }
/* sticky header row: glass with a strong blur, so rows scrolling under it never show through as readable text */
.grid thead th { background: rgba(255, 255, 255, .42); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); }
:root[data-theme="dark"] .grid thead th { background: rgba(40, 40, 44, .6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .grid thead th { background: rgba(40, 40, 44, .6); } }
/* column filter list: each value keeps its full row height (the list scrolls instead of squeezing rows together) */
.cf-list label { flex: none; min-height: 28px; line-height: 20px; }
.cf-list label > span.clip { overflow: hidden; text-overflow: ellipsis; }
/* header cell: name on the left, filter / pin icons grouped at the right edge (a long name ends with "…" instead of pushing them) */
.grid th .th-in { display: flex; align-items: center; gap: 10px; min-width: 0; }
.grid th .th-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid th.num .th-l { text-align: right; }
.grid th .th-tools { flex: none; display: inline-flex; align-items: center; gap: 2px; margin-left: auto; }
.grid th .th-tools .cf, .grid th .th-tools .cf.pin { margin-left: 0; }
/* the page's own preset filter (e.g. "Chỉ PO chưa kết", a card clicked above the list): a chip like a column filter, ✕ removes it */
.cf-chip.preset { background: rgba(47, 123, 246, .1); color: var(--theme); }
/* (i) next to a tab name: on the tab's text line, close to its tab */
.tabs-u { align-items: center; }
.tabs-u .info-i { align-self: center; margin: 0 8px 0 -4px; }
/* warehouse chooser in the stock list toolbar */
.wh-pick { display: inline-flex; align-items: center; gap: 6px; }
.wh-pick .inp { width: auto; min-width: 220px; max-width: 340px; }
@media (max-width: 640px) { .wh-pick { width: 100%; } .wh-pick .inp { flex: 1; min-width: 0; max-width: none; } }
/* role permission table (Quản lý ứng dụng → Phân quyền) */
.perm-intro { margin: 0 0 12px; line-height: 1.5; }
.perm-tbl td, .perm-tbl th { vertical-align: middle; }
.perm-tbl .perm-c { text-align: center; width: 72px; padding-left: 4px; padding-right: 4px; }
.perm-tbl th.perm-c { white-space: normal; line-height: 1.25; }
.perm-tbl td:first-child { min-width: 190px; }
.perm-tbl .perm-c input { width: 16px; height: 16px; cursor: pointer; }
.perm-tbl .perm-c input:disabled { cursor: default; opacity: .55; }
.perm-tbl tr.perm-sec td { font-weight: 600; background: var(--glass-2, rgba(127,127,127,.08)); padding-top: 10px; }

/* ---------- phones: page header, form footer, date fields, pop-ups ---------- */
@media (max-width: 820px) {
  /* row 1: menu · title · search / bell / account; row 2: view tabs and filters */
  .pane-head { flex-wrap: wrap; row-gap: 8px; height: auto; min-height: 52px; padding-top: 8px; padding-bottom: 8px; }
  .pane-head > * { order: 4; }
  .pane-head > .mobile-top, .pane-head > a.icon-btn { order: 0; }
  .pane-head > .pane-title { order: 1; flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pane-head > .info-i { order: 1; }
  .pane-head > .head-icons { order: 2; margin-left: auto; }
  .pane-head::after { content: ''; order: 3; flex-basis: 100%; height: 0; }
  .pane-head > .vsep, .pane-head > .grow { display: none; }
  .pane-head > .mtabs { max-width: 100%; overflow-x: auto; }
  /* form footer: the buttons share one row */
  .form-page .form-foot { flex-wrap: nowrap; gap: 6px; }
  .form-page .form-foot .grow { display: none; }
  .form-page .form-foot .btn { flex: 1 1 0; min-width: 0; padding-left: 4px; padding-right: 4px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .form-page .form-foot .btn.wide { flex: 1.3 1 0; }
}
/* iOS draws date fields wider than the box and centred: same width and alignment as the other fields */
@supports (-webkit-touch-callout: none) {
  input[type="date"].inp, input[type="datetime-local"].inp, input[type="month"].inp { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; display: block; text-align: left; }
  input[type="date"]::-webkit-date-and-time-value, input[type="datetime-local"]::-webkit-date-and-time-value { text-align: left; }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mtab.on { background: rgba(99, 99, 102, .7); color: #fff; } }

/* data tables show at least ~15–18 rows before they scroll (row ≈ 35px, header ≈ 37px) */
.pane-body.withsum > .list { min-height: 780px; }
@media (max-width: 820px) {
  /* phones: the page scrolls to the table, the table itself holds 18 rows and then scrolls */
  .pane-body > .list, .pane-body.withsum > .list { height: auto; min-height: 0; flex: none; }
  .pane-body > .list > .grid-wrap { flex: none; max-height: calc(37px + 35px * 18); min-height: 160px; }
}

/* dashboard figures: a full amount of money (long) gets a smaller size so it stays on one line */
.big-n.mid { font-size: 32px; }
.big-n.long { font-size: 26px; letter-spacing: -.02em; }
@media (max-width: 820px) { .big-n.mid { font-size: 34px; } .big-n.long { font-size: 28px; } }

/* =====================================================================
   Colour palette "Hoa xanh" (data-palette="floral"): watercolour flowers on pale blue paper, slate-blue ink,
   peach accents. Independent of light / dark; the font stays the same.
   ===================================================================== */
:root[data-palette="floral"] {
  --theme: #56679A; --theme-hover: #475888; --theme-soft: rgba(86, 103, 154, .12); --theme-line: rgba(86, 103, 154, .34);
  --selected: rgba(86, 103, 154, .13); --text: #2E3550; --text-2: #4F5873; --muted: #747C96;
  --page: #EEF2F8;
  --bg-image: radial-gradient(48vw 40vw at 0% 0%, rgba(196, 210, 236, .7) 0%, transparent 70%), radial-gradient(42vw 36vw at 100% 100%, rgba(246, 222, 206, .55) 0%, transparent 70%),
    radial-gradient(40vw 34vw at 100% 0%, rgba(214, 226, 244, .6) 0%, transparent 70%), linear-gradient(170deg, #F4F7FC, #EEF2F8 55%, #F6F1EE);
}
:root[data-palette="floral"][data-theme="dark"] {
  --theme: #9FB2E0; --theme-hover: #B3C3EA; --theme-soft: rgba(159, 178, 224, .16); --theme-line: rgba(159, 178, 224, .4);
  --selected: rgba(159, 178, 224, .16); --text: #E9ECF6; --text-2: #C3CADF; --muted: #98A0B8;
  --page: #161B29;
  --bg-image: radial-gradient(48vw 40vw at 0% 0%, rgba(70, 92, 150, .45) 0%, transparent 70%), radial-gradient(42vw 36vw at 100% 100%, rgba(140, 100, 90, .28) 0%, transparent 70%),
    radial-gradient(40vw 34vw at 100% 0%, rgba(60, 80, 130, .35) 0%, transparent 70%), linear-gradient(170deg, #1A2030, #161B29 55%, #1C1A22);
}
/* the flower garland along the top and bottom of the window, behind everything */
:root[data-palette="floral"] body::before, :root[data-palette="floral"] body::after, :root[data-palette="vibe"] body::before, :root[data-palette="vibe"] body::after {
  content: ''; position: fixed; left: 0; right: 0; height: min(24vw, 260px); pointer-events: none; z-index: 0;
  background-repeat: no-repeat; background-size: cover;
}
:root[data-palette="floral"] body::before, :root[data-palette="vibe"] body::before { top: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 300' preserveAspectRatio='xMidYMin slice'%3E%3Cg transform='translate(40 150) rotate(20)' opacity='0.45'%3E%3Cpath d='M0 0 Q 28 -70 0 -140' stroke='%23A3AE98' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='25.457987064189247' cy='-28' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 25.457987064189247 -28)'/%3E%3Cellipse cx='7.457987064189247' cy='-34' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 7.457987064189247 -34)'/%3E%3Cellipse cx='35.6295824562643' cy='-56' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 35.6295824562643 -56)'/%3E%3Cellipse cx='17.6295824562643' cy='-62' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 17.6295824562643 -62)'/%3E%3Cellipse cx='35.6295824562643' cy='-84' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 35.6295824562643 -84)'/%3E%3Cellipse cx='17.629582456264302' cy='-90' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 17.629582456264302 -90)'/%3E%3Cellipse cx='25.45798706418925' cy='-112' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 25.45798706418925 -112)'/%3E%3Cellipse cx='7.4579870641892505' cy='-118' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 7.4579870641892505 -118)'/%3E%3C/g%3E%3Cg transform='translate(170 120) rotate(-25)' opacity='0.45'%3E%3Cpath d='M0 0 Q 24 -60 0 -120' stroke='%23C9A98A' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='23.106846055019354' cy='-24' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 23.106846055019354 -24)'/%3E%3Cellipse cx='5.106846055019355' cy='-30' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 5.106846055019355 -30)'/%3E%3Cellipse cx='31.825356391083684' cy='-48' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 31.825356391083684 -48)'/%3E%3Cellipse cx='13.825356391083684' cy='-54' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 13.825356391083684 -54)'/%3E%3Cellipse cx='31.825356391083687' cy='-72' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 31.825356391083687 -72)'/%3E%3Cellipse cx='13.825356391083687' cy='-78' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 13.825356391083687 -78)'/%3E%3Cellipse cx='23.106846055019357' cy='-96' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 23.106846055019357 -96)'/%3E%3Cellipse cx='5.106846055019357' cy='-102' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 5.106846055019357 -102)'/%3E%3C/g%3E%3Cg transform='translate(330 90) rotate(15)' opacity='0.45'%3E%3Cpath d='M0 0 Q 22 -55 0 -110' stroke='%23A3AE98' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='21.931275550434407' cy='-22' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 21.931275550434407 -22)'/%3E%3Cellipse cx='3.9312755504344086' cy='-28' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 3.9312755504344086 -28)'/%3E%3Cellipse cx='29.923243358493377' cy='-44' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 29.923243358493377 -44)'/%3E%3Cellipse cx='11.923243358493377' cy='-50' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 11.923243358493377 -50)'/%3E%3Cellipse cx='29.92324335849338' cy='-66' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 29.92324335849338 -66)'/%3E%3Cellipse cx='11.92324335849338' cy='-72' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 11.92324335849338 -72)'/%3E%3Cellipse cx='21.931275550434414' cy='-88' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 21.931275550434414 -88)'/%3E%3Cellipse cx='3.931275550434412' cy='-94' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 3.931275550434412 -94)'/%3E%3C/g%3E%3Cg transform='translate(1290 130) rotate(-20)' opacity='0.45'%3E%3Cpath d='M0 0 Q 26 -65 0 -130' stroke='%23A3AE98' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='24.2824165596043' cy='-26' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 24.2824165596043 -26)'/%3E%3Cellipse cx='6.282416559604302' cy='-32' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 6.282416559604302 -32)'/%3E%3Cellipse cx='33.727469423673995' cy='-52' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 33.727469423673995 -52)'/%3E%3Cellipse cx='15.727469423673991' cy='-58' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 15.727469423673991 -58)'/%3E%3Cellipse cx='33.727469423673995' cy='-78' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 33.727469423673995 -78)'/%3E%3Cellipse cx='15.727469423673995' cy='-84' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 15.727469423673995 -84)'/%3E%3Cellipse cx='24.282416559604304' cy='-104' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 24.282416559604304 -104)'/%3E%3Cellipse cx='6.282416559604304' cy='-110' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 6.282416559604304 -110)'/%3E%3C/g%3E%3Cg transform='translate(1150 110) rotate(25)' opacity='0.45'%3E%3Cpath d='M0 0 Q 24 -60 0 -120' stroke='%23C9A98A' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='23.106846055019354' cy='-24' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 23.106846055019354 -24)'/%3E%3Cellipse cx='5.106846055019355' cy='-30' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 5.106846055019355 -30)'/%3E%3Cellipse cx='31.825356391083684' cy='-48' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 31.825356391083684 -48)'/%3E%3Cellipse cx='13.825356391083684' cy='-54' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 13.825356391083684 -54)'/%3E%3Cellipse cx='31.825356391083687' cy='-72' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 31.825356391083687 -72)'/%3E%3Cellipse cx='13.825356391083687' cy='-78' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 13.825356391083687 -78)'/%3E%3Cellipse cx='23.106846055019357' cy='-96' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 23.106846055019357 -96)'/%3E%3Cellipse cx='5.106846055019357' cy='-102' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 5.106846055019357 -102)'/%3E%3C/g%3E%3Cg transform='translate(980 80) rotate(-10)' opacity='0.45'%3E%3Cpath d='M0 0 Q 20 -50 0 -100' stroke='%23A3AE98' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='20.755705045849464' cy='-20' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 20.755705045849464 -20)'/%3E%3Cellipse cx='2.7557050458494636' cy='-26' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 2.7557050458494636 -26)'/%3E%3Cellipse cx='28.02113032590307' cy='-40' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 28.02113032590307 -40)'/%3E%3Cellipse cx='10.02113032590307' cy='-46' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 10.02113032590307 -46)'/%3E%3Cellipse cx='28.021130325903073' cy='-60' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 28.021130325903073 -60)'/%3E%3Cellipse cx='10.021130325903073' cy='-66' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 10.021130325903073 -66)'/%3E%3Cellipse cx='20.755705045849467' cy='-80' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 20.755705045849467 -80)'/%3E%3Cellipse cx='2.7557050458494654' cy='-86' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 2.7557050458494654 -86)'/%3E%3C/g%3E%3Cg transform='translate(620 60) rotate(10)' opacity='0.3'%3E%3Cpath d='M0 0 Q 18 -45 0 -90' stroke='%23A3AE98' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='19.580134541264517' cy='-18' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 19.580134541264517 -18)'/%3E%3Cellipse cx='1.580134541264517' cy='-24' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 1.580134541264517 -24)'/%3E%3Cellipse cx='26.119017293312762' cy='-36' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 26.119017293312762 -36)'/%3E%3Cellipse cx='8.119017293312762' cy='-42' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 8.119017293312762 -42)'/%3E%3Cellipse cx='26.119017293312766' cy='-54' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 26.119017293312766 -54)'/%3E%3Cellipse cx='8.119017293312766' cy='-60' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 8.119017293312766 -60)'/%3E%3Cellipse cx='19.58013454126452' cy='-72' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 19.58013454126452 -72)'/%3E%3Cellipse cx='1.5801345412645187' cy='-78' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 1.5801345412645187 -78)'/%3E%3C/g%3E%3Cg transform='translate(820 55) rotate(-15)' opacity='0.3'%3E%3Cpath d='M0 0 Q 18 -45 0 -90' stroke='%23C9A98A' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='19.580134541264517' cy='-18' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 19.580134541264517 -18)'/%3E%3Cellipse cx='1.580134541264517' cy='-24' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 1.580134541264517 -24)'/%3E%3Cellipse cx='26.119017293312762' cy='-36' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 26.119017293312762 -36)'/%3E%3Cellipse cx='8.119017293312762' cy='-42' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 8.119017293312762 -42)'/%3E%3Cellipse cx='26.119017293312766' cy='-54' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 26.119017293312766 -54)'/%3E%3Cellipse cx='8.119017293312766' cy='-60' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 8.119017293312766 -60)'/%3E%3Cellipse cx='19.58013454126452' cy='-72' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 19.58013454126452 -72)'/%3E%3Cellipse cx='1.5801345412645187' cy='-78' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 1.5801345412645187 -78)'/%3E%3C/g%3E%3Cg transform='translate(70 60) rotate(10)' opacity='0.55'%3E%3Cellipse cx='0' cy='-25.3' rx='19.32' ry='27.599999999999998' fill='%237D93C9' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-25.3' rx='19.32' ry='27.599999999999998' fill='%237D93C9' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-25.3' rx='19.32' ry='27.599999999999998' fill='%237D93C9' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-25.3' rx='19.32' ry='27.599999999999998' fill='%237D93C9' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-25.3' rx='19.32' ry='27.599999999999998' fill='%237D93C9' transform='rotate(288)'/%3E%3Ccircle r='9.200000000000001' fill='%23E7C46A'/%3E%3Ccircle r='4.14' fill='%23394670' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(190 30) rotate(30)' opacity='0.6'%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(288)'/%3E%3Ccircle r='6.800000000000001' fill='%23E7C46A'/%3E%3Ccircle r='3.06' fill='%23394670' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(150 120) rotate(5)' opacity='0.6'%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(288)'/%3E%3Ccircle r='5.2' fill='%23E7C46A'/%3E%3Ccircle r='2.34' fill='%23394670' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(290 50) rotate(40)' opacity='0.6'%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(288)'/%3E%3Ccircle r='6' fill='%23E7C46A'/%3E%3Ccircle r='2.6999999999999997' fill='%23394670' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(25 175) rotate(22)' opacity='0.45'%3E%3Cellipse cx='0' cy='-15.400000000000002' rx='11.76' ry='16.8' fill='%235C70A8' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-15.400000000000002' rx='11.76' ry='16.8' fill='%235C70A8' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-15.400000000000002' rx='11.76' ry='16.8' fill='%235C70A8' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-15.400000000000002' rx='11.76' ry='16.8' fill='%235C70A8' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-15.400000000000002' rx='11.76' ry='16.8' fill='%235C70A8' transform='rotate(288)'/%3E%3Ccircle r='5.6000000000000005' fill='%23E7C46A'/%3E%3Ccircle r='2.52' fill='%23394670' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(400 25) rotate(0)' opacity='0.5'%3E%3Cellipse cx='0' cy='-13.200000000000001' rx='10.08' ry='14.399999999999999' fill='%23A9BCDD' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-13.200000000000001' rx='10.08' ry='14.399999999999999' fill='%23A9BCDD' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-13.200000000000001' rx='10.08' ry='14.399999999999999' fill='%23A9BCDD' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-13.200000000000001' rx='10.08' ry='14.399999999999999' fill='%23A9BCDD' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-13.200000000000001' rx='10.08' ry='14.399999999999999' fill='%23A9BCDD' transform='rotate(288)'/%3E%3Ccircle r='4.800000000000001' fill='%23E7C46A'/%3E%3Ccircle r='2.16' fill='%23394670' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(520 18) rotate(15)' opacity='0.45'%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(288)'/%3E%3Ccircle r='3.6' fill='%23E7C46A'/%3E%3Ccircle r='1.6199999999999999' fill='%23394670' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(1380 70) rotate(-12)' opacity='0.55'%3E%3Cellipse cx='0' cy='-26.400000000000002' rx='20.16' ry='28.799999999999997' fill='%237D93C9' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-26.400000000000002' rx='20.16' ry='28.799999999999997' fill='%237D93C9' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-26.400000000000002' rx='20.16' ry='28.799999999999997' fill='%237D93C9' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-26.400000000000002' rx='20.16' ry='28.799999999999997' fill='%237D93C9' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-26.400000000000002' rx='20.16' ry='28.799999999999997' fill='%237D93C9' transform='rotate(288)'/%3E%3Ccircle r='9.600000000000001' fill='%23E7C46A'/%3E%3Ccircle r='4.32' fill='%23394670' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(1250 35) rotate(18)' opacity='0.6'%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(288)'/%3E%3Ccircle r='6.800000000000001' fill='%23E7C46A'/%3E%3Ccircle r='3.06' fill='%23394670' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(1300 150) rotate(0)' opacity='0.6'%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(288)'/%3E%3Ccircle r='5.2' fill='%23E7C46A'/%3E%3Ccircle r='2.34' fill='%23394670' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(1140 45) rotate(-30)' opacity='0.6'%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(288)'/%3E%3Ccircle r='6' fill='%23E7C46A'/%3E%3Ccircle r='2.6999999999999997' fill='%23394670' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(1420 190) rotate(8)' opacity='0.45'%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%235C70A8' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%235C70A8' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%235C70A8' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%235C70A8' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%235C70A8' transform='rotate(288)'/%3E%3Ccircle r='5.2' fill='%23E7C46A'/%3E%3Ccircle r='2.34' fill='%23394670' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(1030 20) rotate(0)' opacity='0.5'%3E%3Cellipse cx='0' cy='-12.100000000000001' rx='9.24' ry='13.2' fill='%23A9BCDD' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-12.100000000000001' rx='9.24' ry='13.2' fill='%23A9BCDD' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-12.100000000000001' rx='9.24' ry='13.2' fill='%23A9BCDD' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-12.100000000000001' rx='9.24' ry='13.2' fill='%23A9BCDD' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-12.100000000000001' rx='9.24' ry='13.2' fill='%23A9BCDD' transform='rotate(288)'/%3E%3Ccircle r='4.4' fill='%23E7C46A'/%3E%3Ccircle r='1.98' fill='%23394670' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(920 12) rotate(15)' opacity='0.45'%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(288)'/%3E%3Ccircle r='3.6' fill='%23E7C46A'/%3E%3Ccircle r='1.6199999999999999' fill='%23394670' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(720 10) rotate(0)' opacity='0.35'%3E%3Cellipse cx='0' cy='-8.8' rx='6.72' ry='9.6' fill='%237D93C9' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-8.8' rx='6.72' ry='9.6' fill='%237D93C9' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-8.8' rx='6.72' ry='9.6' fill='%237D93C9' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-8.8' rx='6.72' ry='9.6' fill='%237D93C9' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-8.8' rx='6.72' ry='9.6' fill='%237D93C9' transform='rotate(288)'/%3E%3Ccircle r='3.2' fill='%23E7C46A'/%3E%3Ccircle r='1.44' fill='%23394670' opacity='.5'/%3E%3C/g%3E%3C/svg%3E"); background-position: top center; }
:root[data-palette="floral"] body::after, :root[data-palette="vibe"] body::after { bottom: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 300' preserveAspectRatio='xMidYMin slice'%3E%3Cg transform='translate(0 300) scale(1 -1)'%3E%3Cg transform='translate(40 150) rotate(20)' opacity='0.45'%3E%3Cpath d='M0 0 Q 28 -70 0 -140' stroke='%23A3AE98' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='25.457987064189247' cy='-28' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 25.457987064189247 -28)'/%3E%3Cellipse cx='7.457987064189247' cy='-34' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 7.457987064189247 -34)'/%3E%3Cellipse cx='35.6295824562643' cy='-56' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 35.6295824562643 -56)'/%3E%3Cellipse cx='17.6295824562643' cy='-62' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 17.6295824562643 -62)'/%3E%3Cellipse cx='35.6295824562643' cy='-84' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 35.6295824562643 -84)'/%3E%3Cellipse cx='17.629582456264302' cy='-90' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 17.629582456264302 -90)'/%3E%3Cellipse cx='25.45798706418925' cy='-112' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 25.45798706418925 -112)'/%3E%3Cellipse cx='7.4579870641892505' cy='-118' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 7.4579870641892505 -118)'/%3E%3C/g%3E%3Cg transform='translate(170 120) rotate(-25)' opacity='0.45'%3E%3Cpath d='M0 0 Q 24 -60 0 -120' stroke='%23C9A98A' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='23.106846055019354' cy='-24' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 23.106846055019354 -24)'/%3E%3Cellipse cx='5.106846055019355' cy='-30' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 5.106846055019355 -30)'/%3E%3Cellipse cx='31.825356391083684' cy='-48' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 31.825356391083684 -48)'/%3E%3Cellipse cx='13.825356391083684' cy='-54' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 13.825356391083684 -54)'/%3E%3Cellipse cx='31.825356391083687' cy='-72' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 31.825356391083687 -72)'/%3E%3Cellipse cx='13.825356391083687' cy='-78' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 13.825356391083687 -78)'/%3E%3Cellipse cx='23.106846055019357' cy='-96' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 23.106846055019357 -96)'/%3E%3Cellipse cx='5.106846055019357' cy='-102' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 5.106846055019357 -102)'/%3E%3C/g%3E%3Cg transform='translate(330 90) rotate(15)' opacity='0.45'%3E%3Cpath d='M0 0 Q 22 -55 0 -110' stroke='%23A3AE98' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='21.931275550434407' cy='-22' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 21.931275550434407 -22)'/%3E%3Cellipse cx='3.9312755504344086' cy='-28' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 3.9312755504344086 -28)'/%3E%3Cellipse cx='29.923243358493377' cy='-44' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 29.923243358493377 -44)'/%3E%3Cellipse cx='11.923243358493377' cy='-50' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 11.923243358493377 -50)'/%3E%3Cellipse cx='29.92324335849338' cy='-66' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 29.92324335849338 -66)'/%3E%3Cellipse cx='11.92324335849338' cy='-72' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 11.92324335849338 -72)'/%3E%3Cellipse cx='21.931275550434414' cy='-88' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 21.931275550434414 -88)'/%3E%3Cellipse cx='3.931275550434412' cy='-94' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 3.931275550434412 -94)'/%3E%3C/g%3E%3Cg transform='translate(1290 130) rotate(-20)' opacity='0.45'%3E%3Cpath d='M0 0 Q 26 -65 0 -130' stroke='%23A3AE98' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='24.2824165596043' cy='-26' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 24.2824165596043 -26)'/%3E%3Cellipse cx='6.282416559604302' cy='-32' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 6.282416559604302 -32)'/%3E%3Cellipse cx='33.727469423673995' cy='-52' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 33.727469423673995 -52)'/%3E%3Cellipse cx='15.727469423673991' cy='-58' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 15.727469423673991 -58)'/%3E%3Cellipse cx='33.727469423673995' cy='-78' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 33.727469423673995 -78)'/%3E%3Cellipse cx='15.727469423673995' cy='-84' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 15.727469423673995 -84)'/%3E%3Cellipse cx='24.282416559604304' cy='-104' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 24.282416559604304 -104)'/%3E%3Cellipse cx='6.282416559604304' cy='-110' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 6.282416559604304 -110)'/%3E%3C/g%3E%3Cg transform='translate(1150 110) rotate(25)' opacity='0.45'%3E%3Cpath d='M0 0 Q 24 -60 0 -120' stroke='%23C9A98A' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='23.106846055019354' cy='-24' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 23.106846055019354 -24)'/%3E%3Cellipse cx='5.106846055019355' cy='-30' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 5.106846055019355 -30)'/%3E%3Cellipse cx='31.825356391083684' cy='-48' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 31.825356391083684 -48)'/%3E%3Cellipse cx='13.825356391083684' cy='-54' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 13.825356391083684 -54)'/%3E%3Cellipse cx='31.825356391083687' cy='-72' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 31.825356391083687 -72)'/%3E%3Cellipse cx='13.825356391083687' cy='-78' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 13.825356391083687 -78)'/%3E%3Cellipse cx='23.106846055019357' cy='-96' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 23.106846055019357 -96)'/%3E%3Cellipse cx='5.106846055019357' cy='-102' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 5.106846055019357 -102)'/%3E%3C/g%3E%3Cg transform='translate(980 80) rotate(-10)' opacity='0.45'%3E%3Cpath d='M0 0 Q 20 -50 0 -100' stroke='%23A3AE98' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='20.755705045849464' cy='-20' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 20.755705045849464 -20)'/%3E%3Cellipse cx='2.7557050458494636' cy='-26' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 2.7557050458494636 -26)'/%3E%3Cellipse cx='28.02113032590307' cy='-40' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 28.02113032590307 -40)'/%3E%3Cellipse cx='10.02113032590307' cy='-46' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 10.02113032590307 -46)'/%3E%3Cellipse cx='28.021130325903073' cy='-60' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 28.021130325903073 -60)'/%3E%3Cellipse cx='10.021130325903073' cy='-66' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 10.021130325903073 -66)'/%3E%3Cellipse cx='20.755705045849467' cy='-80' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 20.755705045849467 -80)'/%3E%3Cellipse cx='2.7557050458494654' cy='-86' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 2.7557050458494654 -86)'/%3E%3C/g%3E%3Cg transform='translate(620 60) rotate(10)' opacity='0.3'%3E%3Cpath d='M0 0 Q 18 -45 0 -90' stroke='%23A3AE98' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='19.580134541264517' cy='-18' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 19.580134541264517 -18)'/%3E%3Cellipse cx='1.580134541264517' cy='-24' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 1.580134541264517 -24)'/%3E%3Cellipse cx='26.119017293312762' cy='-36' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 26.119017293312762 -36)'/%3E%3Cellipse cx='8.119017293312762' cy='-42' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 8.119017293312762 -42)'/%3E%3Cellipse cx='26.119017293312766' cy='-54' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 26.119017293312766 -54)'/%3E%3Cellipse cx='8.119017293312766' cy='-60' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 8.119017293312766 -60)'/%3E%3Cellipse cx='19.58013454126452' cy='-72' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 19.58013454126452 -72)'/%3E%3Cellipse cx='1.5801345412645187' cy='-78' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 1.5801345412645187 -78)'/%3E%3C/g%3E%3Cg transform='translate(820 55) rotate(-15)' opacity='0.3'%3E%3Cpath d='M0 0 Q 18 -45 0 -90' stroke='%23C9A98A' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='19.580134541264517' cy='-18' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 19.580134541264517 -18)'/%3E%3Cellipse cx='1.580134541264517' cy='-24' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 1.580134541264517 -24)'/%3E%3Cellipse cx='26.119017293312762' cy='-36' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 26.119017293312762 -36)'/%3E%3Cellipse cx='8.119017293312762' cy='-42' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 8.119017293312762 -42)'/%3E%3Cellipse cx='26.119017293312766' cy='-54' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 26.119017293312766 -54)'/%3E%3Cellipse cx='8.119017293312766' cy='-60' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 8.119017293312766 -60)'/%3E%3Cellipse cx='19.58013454126452' cy='-72' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 19.58013454126452 -72)'/%3E%3Cellipse cx='1.5801345412645187' cy='-78' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 1.5801345412645187 -78)'/%3E%3C/g%3E%3Cg transform='translate(70 60) rotate(10)' opacity='0.55'%3E%3Cellipse cx='0' cy='-25.3' rx='19.32' ry='27.599999999999998' fill='%237D93C9' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-25.3' rx='19.32' ry='27.599999999999998' fill='%237D93C9' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-25.3' rx='19.32' ry='27.599999999999998' fill='%237D93C9' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-25.3' rx='19.32' ry='27.599999999999998' fill='%237D93C9' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-25.3' rx='19.32' ry='27.599999999999998' fill='%237D93C9' transform='rotate(288)'/%3E%3Ccircle r='9.200000000000001' fill='%23E7C46A'/%3E%3Ccircle r='4.14' fill='%23394670' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(190 30) rotate(30)' opacity='0.6'%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(288)'/%3E%3Ccircle r='6.800000000000001' fill='%23E7C46A'/%3E%3Ccircle r='3.06' fill='%23394670' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(150 120) rotate(5)' opacity='0.6'%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(288)'/%3E%3Ccircle r='5.2' fill='%23E7C46A'/%3E%3Ccircle r='2.34' fill='%23394670' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(290 50) rotate(40)' opacity='0.6'%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(288)'/%3E%3Ccircle r='6' fill='%23E7C46A'/%3E%3Ccircle r='2.6999999999999997' fill='%23394670' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(25 175) rotate(22)' opacity='0.45'%3E%3Cellipse cx='0' cy='-15.400000000000002' rx='11.76' ry='16.8' fill='%235C70A8' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-15.400000000000002' rx='11.76' ry='16.8' fill='%235C70A8' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-15.400000000000002' rx='11.76' ry='16.8' fill='%235C70A8' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-15.400000000000002' rx='11.76' ry='16.8' fill='%235C70A8' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-15.400000000000002' rx='11.76' ry='16.8' fill='%235C70A8' transform='rotate(288)'/%3E%3Ccircle r='5.6000000000000005' fill='%23E7C46A'/%3E%3Ccircle r='2.52' fill='%23394670' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(400 25) rotate(0)' opacity='0.5'%3E%3Cellipse cx='0' cy='-13.200000000000001' rx='10.08' ry='14.399999999999999' fill='%23A9BCDD' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-13.200000000000001' rx='10.08' ry='14.399999999999999' fill='%23A9BCDD' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-13.200000000000001' rx='10.08' ry='14.399999999999999' fill='%23A9BCDD' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-13.200000000000001' rx='10.08' ry='14.399999999999999' fill='%23A9BCDD' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-13.200000000000001' rx='10.08' ry='14.399999999999999' fill='%23A9BCDD' transform='rotate(288)'/%3E%3Ccircle r='4.800000000000001' fill='%23E7C46A'/%3E%3Ccircle r='2.16' fill='%23394670' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(520 18) rotate(15)' opacity='0.45'%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(288)'/%3E%3Ccircle r='3.6' fill='%23E7C46A'/%3E%3Ccircle r='1.6199999999999999' fill='%23394670' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(1380 70) rotate(-12)' opacity='0.55'%3E%3Cellipse cx='0' cy='-26.400000000000002' rx='20.16' ry='28.799999999999997' fill='%237D93C9' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-26.400000000000002' rx='20.16' ry='28.799999999999997' fill='%237D93C9' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-26.400000000000002' rx='20.16' ry='28.799999999999997' fill='%237D93C9' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-26.400000000000002' rx='20.16' ry='28.799999999999997' fill='%237D93C9' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-26.400000000000002' rx='20.16' ry='28.799999999999997' fill='%237D93C9' transform='rotate(288)'/%3E%3Ccircle r='9.600000000000001' fill='%23E7C46A'/%3E%3Ccircle r='4.32' fill='%23394670' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(1250 35) rotate(18)' opacity='0.6'%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(288)'/%3E%3Ccircle r='6.800000000000001' fill='%23E7C46A'/%3E%3Ccircle r='3.06' fill='%23394670' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(1300 150) rotate(0)' opacity='0.6'%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(288)'/%3E%3Ccircle r='5.2' fill='%23E7C46A'/%3E%3Ccircle r='2.34' fill='%23394670' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(1140 45) rotate(-30)' opacity='0.6'%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(288)'/%3E%3Ccircle r='6' fill='%23E7C46A'/%3E%3Ccircle r='2.6999999999999997' fill='%23394670' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(1420 190) rotate(8)' opacity='0.45'%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%235C70A8' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%235C70A8' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%235C70A8' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%235C70A8' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%235C70A8' transform='rotate(288)'/%3E%3Ccircle r='5.2' fill='%23E7C46A'/%3E%3Ccircle r='2.34' fill='%23394670' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(1030 20) rotate(0)' opacity='0.5'%3E%3Cellipse cx='0' cy='-12.100000000000001' rx='9.24' ry='13.2' fill='%23A9BCDD' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-12.100000000000001' rx='9.24' ry='13.2' fill='%23A9BCDD' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-12.100000000000001' rx='9.24' ry='13.2' fill='%23A9BCDD' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-12.100000000000001' rx='9.24' ry='13.2' fill='%23A9BCDD' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-12.100000000000001' rx='9.24' ry='13.2' fill='%23A9BCDD' transform='rotate(288)'/%3E%3Ccircle r='4.4' fill='%23E7C46A'/%3E%3Ccircle r='1.98' fill='%23394670' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(920 12) rotate(15)' opacity='0.45'%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(288)'/%3E%3Ccircle r='3.6' fill='%23E7C46A'/%3E%3Ccircle r='1.6199999999999999' fill='%23394670' opacity='.5'/%3E%3C/g%3E%3Cg transform='translate(720 10) rotate(0)' opacity='0.35'%3E%3Cellipse cx='0' cy='-8.8' rx='6.72' ry='9.6' fill='%237D93C9' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-8.8' rx='6.72' ry='9.6' fill='%237D93C9' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-8.8' rx='6.72' ry='9.6' fill='%237D93C9' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-8.8' rx='6.72' ry='9.6' fill='%237D93C9' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-8.8' rx='6.72' ry='9.6' fill='%237D93C9' transform='rotate(288)'/%3E%3Ccircle r='3.2' fill='%23E7C46A'/%3E%3Ccircle r='1.44' fill='%23394670' opacity='.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-position: bottom center; }
:root[data-palette="floral"][data-theme="dark"] body::before, :root[data-palette="floral"][data-theme="dark"] body::after { opacity: .42; }
:root[data-palette="floral"] #app, :root[data-palette="vibe"] #app { position: relative; z-index: 1; }
/* fixed blue accents follow the palette */
:root[data-palette="floral"] .avatar, :root[data-palette="floral"] .app-icon { background: linear-gradient(160deg, #8FA2D2, #56679A); }
:root[data-palette="floral"] .prog-bar { background: linear-gradient(90deg, #A9BBE2, #56679A); }
:root[data-palette="floral"] .legend i, :root[data-palette="floral"] .hbar .track i { background: linear-gradient(90deg, #F2C7A8, #8FA2D2) !important; }
:root[data-palette="floral"] .wg.title span::before, :root[data-palette="floral"] .sep-label::before { background: #E3A985; }
:root[data-palette="floral"][data-theme="dark"] .avatar, :root[data-palette="floral"][data-theme="dark"] .app-icon { background: linear-gradient(160deg, #A9BBE2, #6C7EB4); }

/* colour choice in the account menu */
.pop-sub { padding: 6px 10px 2px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pop-item.pal { display: flex; align-items: center; gap: 8px; }
.pal-sw { width: 16px; height: 16px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 1px 2px rgba(0, 0, 0, .15); }
.pal-ck { margin-left: auto; color: var(--theme); font-weight: 600; }

:root[data-palette="floral"] .pane::before, :root[data-palette="vibe"] .pane::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 300'%3E%3Cg transform='translate(40 150) rotate(20)' opacity='0.25'%3E%3Cpath d='M0 0 Q 28 -70 0 -140' stroke='%23A3AE98' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='25.457987064189247' cy='-28' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 25.457987064189247 -28)'/%3E%3Cellipse cx='7.457987064189247' cy='-34' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 7.457987064189247 -34)'/%3E%3Cellipse cx='35.6295824562643' cy='-56' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 35.6295824562643 -56)'/%3E%3Cellipse cx='17.6295824562643' cy='-62' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 17.6295824562643 -62)'/%3E%3Cellipse cx='35.6295824562643' cy='-84' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 35.6295824562643 -84)'/%3E%3Cellipse cx='17.629582456264302' cy='-90' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 17.629582456264302 -90)'/%3E%3Cellipse cx='25.45798706418925' cy='-112' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 25.45798706418925 -112)'/%3E%3Cellipse cx='7.4579870641892505' cy='-118' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 7.4579870641892505 -118)'/%3E%3C/g%3E%3Cg transform='translate(170 120) rotate(-25)' opacity='0.25'%3E%3Cpath d='M0 0 Q 24 -60 0 -120' stroke='%23C9A98A' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='23.106846055019354' cy='-24' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 23.106846055019354 -24)'/%3E%3Cellipse cx='5.106846055019355' cy='-30' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 5.106846055019355 -30)'/%3E%3Cellipse cx='31.825356391083684' cy='-48' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 31.825356391083684 -48)'/%3E%3Cellipse cx='13.825356391083684' cy='-54' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 13.825356391083684 -54)'/%3E%3Cellipse cx='31.825356391083687' cy='-72' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 31.825356391083687 -72)'/%3E%3Cellipse cx='13.825356391083687' cy='-78' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 13.825356391083687 -78)'/%3E%3Cellipse cx='23.106846055019357' cy='-96' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 23.106846055019357 -96)'/%3E%3Cellipse cx='5.106846055019357' cy='-102' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 5.106846055019357 -102)'/%3E%3C/g%3E%3Cg transform='translate(330 90) rotate(15)' opacity='0.25'%3E%3Cpath d='M0 0 Q 22 -55 0 -110' stroke='%23A3AE98' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='21.931275550434407' cy='-22' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 21.931275550434407 -22)'/%3E%3Cellipse cx='3.9312755504344086' cy='-28' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 3.9312755504344086 -28)'/%3E%3Cellipse cx='29.923243358493377' cy='-44' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 29.923243358493377 -44)'/%3E%3Cellipse cx='11.923243358493377' cy='-50' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 11.923243358493377 -50)'/%3E%3Cellipse cx='29.92324335849338' cy='-66' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 29.92324335849338 -66)'/%3E%3Cellipse cx='11.92324335849338' cy='-72' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 11.92324335849338 -72)'/%3E%3Cellipse cx='21.931275550434414' cy='-88' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 21.931275550434414 -88)'/%3E%3Cellipse cx='3.931275550434412' cy='-94' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 3.931275550434412 -94)'/%3E%3C/g%3E%3Cg transform='translate(1290 130) rotate(-20)' opacity='0.25'%3E%3Cpath d='M0 0 Q 26 -65 0 -130' stroke='%23A3AE98' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='24.2824165596043' cy='-26' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 24.2824165596043 -26)'/%3E%3Cellipse cx='6.282416559604302' cy='-32' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 6.282416559604302 -32)'/%3E%3Cellipse cx='33.727469423673995' cy='-52' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 33.727469423673995 -52)'/%3E%3Cellipse cx='15.727469423673991' cy='-58' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 15.727469423673991 -58)'/%3E%3Cellipse cx='33.727469423673995' cy='-78' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 33.727469423673995 -78)'/%3E%3Cellipse cx='15.727469423673995' cy='-84' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 15.727469423673995 -84)'/%3E%3Cellipse cx='24.282416559604304' cy='-104' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 24.282416559604304 -104)'/%3E%3Cellipse cx='6.282416559604304' cy='-110' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 6.282416559604304 -110)'/%3E%3C/g%3E%3Cg transform='translate(1150 110) rotate(25)' opacity='0.25'%3E%3Cpath d='M0 0 Q 24 -60 0 -120' stroke='%23C9A98A' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='23.106846055019354' cy='-24' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 23.106846055019354 -24)'/%3E%3Cellipse cx='5.106846055019355' cy='-30' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 5.106846055019355 -30)'/%3E%3Cellipse cx='31.825356391083684' cy='-48' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 31.825356391083684 -48)'/%3E%3Cellipse cx='13.825356391083684' cy='-54' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 13.825356391083684 -54)'/%3E%3Cellipse cx='31.825356391083687' cy='-72' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 31.825356391083687 -72)'/%3E%3Cellipse cx='13.825356391083687' cy='-78' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 13.825356391083687 -78)'/%3E%3Cellipse cx='23.106846055019357' cy='-96' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 23.106846055019357 -96)'/%3E%3Cellipse cx='5.106846055019357' cy='-102' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 5.106846055019357 -102)'/%3E%3C/g%3E%3Cg transform='translate(980 80) rotate(-10)' opacity='0.25'%3E%3Cpath d='M0 0 Q 20 -50 0 -100' stroke='%23A3AE98' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='20.755705045849464' cy='-20' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 20.755705045849464 -20)'/%3E%3Cellipse cx='2.7557050458494636' cy='-26' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 2.7557050458494636 -26)'/%3E%3Cellipse cx='28.02113032590307' cy='-40' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 28.02113032590307 -40)'/%3E%3Cellipse cx='10.02113032590307' cy='-46' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 10.02113032590307 -46)'/%3E%3Cellipse cx='28.021130325903073' cy='-60' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 28.021130325903073 -60)'/%3E%3Cellipse cx='10.021130325903073' cy='-66' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 10.021130325903073 -66)'/%3E%3Cellipse cx='20.755705045849467' cy='-80' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 20.755705045849467 -80)'/%3E%3Cellipse cx='2.7557050458494654' cy='-86' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 2.7557050458494654 -86)'/%3E%3C/g%3E%3Cg transform='translate(620 60) rotate(10)' opacity='0.17'%3E%3Cpath d='M0 0 Q 18 -45 0 -90' stroke='%23A3AE98' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='19.580134541264517' cy='-18' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 19.580134541264517 -18)'/%3E%3Cellipse cx='1.580134541264517' cy='-24' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 1.580134541264517 -24)'/%3E%3Cellipse cx='26.119017293312762' cy='-36' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 26.119017293312762 -36)'/%3E%3Cellipse cx='8.119017293312762' cy='-42' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 8.119017293312762 -42)'/%3E%3Cellipse cx='26.119017293312766' cy='-54' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 26.119017293312766 -54)'/%3E%3Cellipse cx='8.119017293312766' cy='-60' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 8.119017293312766 -60)'/%3E%3Cellipse cx='19.58013454126452' cy='-72' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 19.58013454126452 -72)'/%3E%3Cellipse cx='1.5801345412645187' cy='-78' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 1.5801345412645187 -78)'/%3E%3C/g%3E%3Cg transform='translate(820 55) rotate(-15)' opacity='0.17'%3E%3Cpath d='M0 0 Q 18 -45 0 -90' stroke='%23C9A98A' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='19.580134541264517' cy='-18' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 19.580134541264517 -18)'/%3E%3Cellipse cx='1.580134541264517' cy='-24' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 1.580134541264517 -24)'/%3E%3Cellipse cx='26.119017293312762' cy='-36' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 26.119017293312762 -36)'/%3E%3Cellipse cx='8.119017293312762' cy='-42' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 8.119017293312762 -42)'/%3E%3Cellipse cx='26.119017293312766' cy='-54' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 26.119017293312766 -54)'/%3E%3Cellipse cx='8.119017293312766' cy='-60' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 8.119017293312766 -60)'/%3E%3Cellipse cx='19.58013454126452' cy='-72' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 19.58013454126452 -72)'/%3E%3Cellipse cx='1.5801345412645187' cy='-78' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 1.5801345412645187 -78)'/%3E%3C/g%3E%3Cg transform='translate(70 60) rotate(10)' opacity='0.30'%3E%3Cellipse cx='0' cy='-25.3' rx='19.32' ry='27.599999999999998' fill='%237D93C9' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-25.3' rx='19.32' ry='27.599999999999998' fill='%237D93C9' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-25.3' rx='19.32' ry='27.599999999999998' fill='%237D93C9' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-25.3' rx='19.32' ry='27.599999999999998' fill='%237D93C9' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-25.3' rx='19.32' ry='27.599999999999998' fill='%237D93C9' transform='rotate(288)'/%3E%3Ccircle r='9.200000000000001' fill='%23E7C46A'/%3E%3Ccircle r='4.14' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(190 30) rotate(30)' opacity='0.33'%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(288)'/%3E%3Ccircle r='6.800000000000001' fill='%23E7C46A'/%3E%3Ccircle r='3.06' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(150 120) rotate(5)' opacity='0.33'%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(288)'/%3E%3Ccircle r='5.2' fill='%23E7C46A'/%3E%3Ccircle r='2.34' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(290 50) rotate(40)' opacity='0.33'%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(288)'/%3E%3Ccircle r='6' fill='%23E7C46A'/%3E%3Ccircle r='2.6999999999999997' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(25 175) rotate(22)' opacity='0.25'%3E%3Cellipse cx='0' cy='-15.400000000000002' rx='11.76' ry='16.8' fill='%235C70A8' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-15.400000000000002' rx='11.76' ry='16.8' fill='%235C70A8' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-15.400000000000002' rx='11.76' ry='16.8' fill='%235C70A8' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-15.400000000000002' rx='11.76' ry='16.8' fill='%235C70A8' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-15.400000000000002' rx='11.76' ry='16.8' fill='%235C70A8' transform='rotate(288)'/%3E%3Ccircle r='5.6000000000000005' fill='%23E7C46A'/%3E%3Ccircle r='2.52' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(400 25) rotate(0)' opacity='0.28'%3E%3Cellipse cx='0' cy='-13.200000000000001' rx='10.08' ry='14.399999999999999' fill='%23A9BCDD' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-13.200000000000001' rx='10.08' ry='14.399999999999999' fill='%23A9BCDD' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-13.200000000000001' rx='10.08' ry='14.399999999999999' fill='%23A9BCDD' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-13.200000000000001' rx='10.08' ry='14.399999999999999' fill='%23A9BCDD' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-13.200000000000001' rx='10.08' ry='14.399999999999999' fill='%23A9BCDD' transform='rotate(288)'/%3E%3Ccircle r='4.800000000000001' fill='%23E7C46A'/%3E%3Ccircle r='2.16' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(520 18) rotate(15)' opacity='0.25'%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(288)'/%3E%3Ccircle r='3.6' fill='%23E7C46A'/%3E%3Ccircle r='1.6199999999999999' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(1380 70) rotate(-12)' opacity='0.30'%3E%3Cellipse cx='0' cy='-26.400000000000002' rx='20.16' ry='28.799999999999997' fill='%237D93C9' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-26.400000000000002' rx='20.16' ry='28.799999999999997' fill='%237D93C9' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-26.400000000000002' rx='20.16' ry='28.799999999999997' fill='%237D93C9' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-26.400000000000002' rx='20.16' ry='28.799999999999997' fill='%237D93C9' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-26.400000000000002' rx='20.16' ry='28.799999999999997' fill='%237D93C9' transform='rotate(288)'/%3E%3Ccircle r='9.600000000000001' fill='%23E7C46A'/%3E%3Ccircle r='4.32' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(1250 35) rotate(18)' opacity='0.33'%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(288)'/%3E%3Ccircle r='6.800000000000001' fill='%23E7C46A'/%3E%3Ccircle r='3.06' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(1300 150) rotate(0)' opacity='0.33'%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(288)'/%3E%3Ccircle r='5.2' fill='%23E7C46A'/%3E%3Ccircle r='2.34' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(1140 45) rotate(-30)' opacity='0.33'%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(288)'/%3E%3Ccircle r='6' fill='%23E7C46A'/%3E%3Ccircle r='2.6999999999999997' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(1420 190) rotate(8)' opacity='0.25'%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%235C70A8' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%235C70A8' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%235C70A8' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%235C70A8' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%235C70A8' transform='rotate(288)'/%3E%3Ccircle r='5.2' fill='%23E7C46A'/%3E%3Ccircle r='2.34' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(1030 20) rotate(0)' opacity='0.28'%3E%3Cellipse cx='0' cy='-12.100000000000001' rx='9.24' ry='13.2' fill='%23A9BCDD' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-12.100000000000001' rx='9.24' ry='13.2' fill='%23A9BCDD' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-12.100000000000001' rx='9.24' ry='13.2' fill='%23A9BCDD' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-12.100000000000001' rx='9.24' ry='13.2' fill='%23A9BCDD' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-12.100000000000001' rx='9.24' ry='13.2' fill='%23A9BCDD' transform='rotate(288)'/%3E%3Ccircle r='4.4' fill='%23E7C46A'/%3E%3Ccircle r='1.98' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(920 12) rotate(15)' opacity='0.25'%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(288)'/%3E%3Ccircle r='3.6' fill='%23E7C46A'/%3E%3Ccircle r='1.6199999999999999' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(720 10) rotate(0)' opacity='0.19'%3E%3Cellipse cx='0' cy='-8.8' rx='6.72' ry='9.6' fill='%237D93C9' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-8.8' rx='6.72' ry='9.6' fill='%237D93C9' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-8.8' rx='6.72' ry='9.6' fill='%237D93C9' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-8.8' rx='6.72' ry='9.6' fill='%237D93C9' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-8.8' rx='6.72' ry='9.6' fill='%237D93C9' transform='rotate(288)'/%3E%3Ccircle r='3.2' fill='%23E7C46A'/%3E%3Ccircle r='1.44' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 300'%3E%3Cg transform='translate(1440 300) scale(-1 -1)'%3E%3Cg transform='translate(40 150) rotate(20)' opacity='0.25'%3E%3Cpath d='M0 0 Q 28 -70 0 -140' stroke='%23A3AE98' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='25.457987064189247' cy='-28' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 25.457987064189247 -28)'/%3E%3Cellipse cx='7.457987064189247' cy='-34' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 7.457987064189247 -34)'/%3E%3Cellipse cx='35.6295824562643' cy='-56' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 35.6295824562643 -56)'/%3E%3Cellipse cx='17.6295824562643' cy='-62' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 17.6295824562643 -62)'/%3E%3Cellipse cx='35.6295824562643' cy='-84' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 35.6295824562643 -84)'/%3E%3Cellipse cx='17.629582456264302' cy='-90' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 17.629582456264302 -90)'/%3E%3Cellipse cx='25.45798706418925' cy='-112' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 25.45798706418925 -112)'/%3E%3Cellipse cx='7.4579870641892505' cy='-118' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 7.4579870641892505 -118)'/%3E%3C/g%3E%3Cg transform='translate(170 120) rotate(-25)' opacity='0.25'%3E%3Cpath d='M0 0 Q 24 -60 0 -120' stroke='%23C9A98A' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='23.106846055019354' cy='-24' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 23.106846055019354 -24)'/%3E%3Cellipse cx='5.106846055019355' cy='-30' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 5.106846055019355 -30)'/%3E%3Cellipse cx='31.825356391083684' cy='-48' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 31.825356391083684 -48)'/%3E%3Cellipse cx='13.825356391083684' cy='-54' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 13.825356391083684 -54)'/%3E%3Cellipse cx='31.825356391083687' cy='-72' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 31.825356391083687 -72)'/%3E%3Cellipse cx='13.825356391083687' cy='-78' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 13.825356391083687 -78)'/%3E%3Cellipse cx='23.106846055019357' cy='-96' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 23.106846055019357 -96)'/%3E%3Cellipse cx='5.106846055019357' cy='-102' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 5.106846055019357 -102)'/%3E%3C/g%3E%3Cg transform='translate(330 90) rotate(15)' opacity='0.25'%3E%3Cpath d='M0 0 Q 22 -55 0 -110' stroke='%23A3AE98' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='21.931275550434407' cy='-22' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 21.931275550434407 -22)'/%3E%3Cellipse cx='3.9312755504344086' cy='-28' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 3.9312755504344086 -28)'/%3E%3Cellipse cx='29.923243358493377' cy='-44' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 29.923243358493377 -44)'/%3E%3Cellipse cx='11.923243358493377' cy='-50' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 11.923243358493377 -50)'/%3E%3Cellipse cx='29.92324335849338' cy='-66' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 29.92324335849338 -66)'/%3E%3Cellipse cx='11.92324335849338' cy='-72' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 11.92324335849338 -72)'/%3E%3Cellipse cx='21.931275550434414' cy='-88' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 21.931275550434414 -88)'/%3E%3Cellipse cx='3.931275550434412' cy='-94' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 3.931275550434412 -94)'/%3E%3C/g%3E%3Cg transform='translate(1290 130) rotate(-20)' opacity='0.25'%3E%3Cpath d='M0 0 Q 26 -65 0 -130' stroke='%23A3AE98' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='24.2824165596043' cy='-26' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 24.2824165596043 -26)'/%3E%3Cellipse cx='6.282416559604302' cy='-32' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 6.282416559604302 -32)'/%3E%3Cellipse cx='33.727469423673995' cy='-52' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 33.727469423673995 -52)'/%3E%3Cellipse cx='15.727469423673991' cy='-58' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 15.727469423673991 -58)'/%3E%3Cellipse cx='33.727469423673995' cy='-78' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 33.727469423673995 -78)'/%3E%3Cellipse cx='15.727469423673995' cy='-84' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 15.727469423673995 -84)'/%3E%3Cellipse cx='24.282416559604304' cy='-104' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 24.282416559604304 -104)'/%3E%3Cellipse cx='6.282416559604304' cy='-110' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 6.282416559604304 -110)'/%3E%3C/g%3E%3Cg transform='translate(1150 110) rotate(25)' opacity='0.25'%3E%3Cpath d='M0 0 Q 24 -60 0 -120' stroke='%23C9A98A' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='23.106846055019354' cy='-24' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 23.106846055019354 -24)'/%3E%3Cellipse cx='5.106846055019355' cy='-30' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 5.106846055019355 -30)'/%3E%3Cellipse cx='31.825356391083684' cy='-48' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 31.825356391083684 -48)'/%3E%3Cellipse cx='13.825356391083684' cy='-54' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 13.825356391083684 -54)'/%3E%3Cellipse cx='31.825356391083687' cy='-72' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 31.825356391083687 -72)'/%3E%3Cellipse cx='13.825356391083687' cy='-78' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 13.825356391083687 -78)'/%3E%3Cellipse cx='23.106846055019357' cy='-96' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 23.106846055019357 -96)'/%3E%3Cellipse cx='5.106846055019357' cy='-102' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 5.106846055019357 -102)'/%3E%3C/g%3E%3Cg transform='translate(980 80) rotate(-10)' opacity='0.25'%3E%3Cpath d='M0 0 Q 20 -50 0 -100' stroke='%23A3AE98' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='20.755705045849464' cy='-20' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 20.755705045849464 -20)'/%3E%3Cellipse cx='2.7557050458494636' cy='-26' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 2.7557050458494636 -26)'/%3E%3Cellipse cx='28.02113032590307' cy='-40' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 28.02113032590307 -40)'/%3E%3Cellipse cx='10.02113032590307' cy='-46' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 10.02113032590307 -46)'/%3E%3Cellipse cx='28.021130325903073' cy='-60' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 28.021130325903073 -60)'/%3E%3Cellipse cx='10.021130325903073' cy='-66' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 10.021130325903073 -66)'/%3E%3Cellipse cx='20.755705045849467' cy='-80' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 20.755705045849467 -80)'/%3E%3Cellipse cx='2.7557050458494654' cy='-86' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 2.7557050458494654 -86)'/%3E%3C/g%3E%3Cg transform='translate(620 60) rotate(10)' opacity='0.17'%3E%3Cpath d='M0 0 Q 18 -45 0 -90' stroke='%23A3AE98' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='19.580134541264517' cy='-18' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 19.580134541264517 -18)'/%3E%3Cellipse cx='1.580134541264517' cy='-24' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 1.580134541264517 -24)'/%3E%3Cellipse cx='26.119017293312762' cy='-36' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 26.119017293312762 -36)'/%3E%3Cellipse cx='8.119017293312762' cy='-42' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 8.119017293312762 -42)'/%3E%3Cellipse cx='26.119017293312766' cy='-54' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 26.119017293312766 -54)'/%3E%3Cellipse cx='8.119017293312766' cy='-60' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 8.119017293312766 -60)'/%3E%3Cellipse cx='19.58013454126452' cy='-72' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 19.58013454126452 -72)'/%3E%3Cellipse cx='1.5801345412645187' cy='-78' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 1.5801345412645187 -78)'/%3E%3C/g%3E%3Cg transform='translate(820 55) rotate(-15)' opacity='0.17'%3E%3Cpath d='M0 0 Q 18 -45 0 -90' stroke='%23C9A98A' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='19.580134541264517' cy='-18' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 19.580134541264517 -18)'/%3E%3Cellipse cx='1.580134541264517' cy='-24' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 1.580134541264517 -24)'/%3E%3Cellipse cx='26.119017293312762' cy='-36' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 26.119017293312762 -36)'/%3E%3Cellipse cx='8.119017293312762' cy='-42' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 8.119017293312762 -42)'/%3E%3Cellipse cx='26.119017293312766' cy='-54' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 26.119017293312766 -54)'/%3E%3Cellipse cx='8.119017293312766' cy='-60' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 8.119017293312766 -60)'/%3E%3Cellipse cx='19.58013454126452' cy='-72' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 19.58013454126452 -72)'/%3E%3Cellipse cx='1.5801345412645187' cy='-78' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 1.5801345412645187 -78)'/%3E%3C/g%3E%3Cg transform='translate(70 60) rotate(10)' opacity='0.30'%3E%3Cellipse cx='0' cy='-25.3' rx='19.32' ry='27.599999999999998' fill='%237D93C9' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-25.3' rx='19.32' ry='27.599999999999998' fill='%237D93C9' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-25.3' rx='19.32' ry='27.599999999999998' fill='%237D93C9' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-25.3' rx='19.32' ry='27.599999999999998' fill='%237D93C9' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-25.3' rx='19.32' ry='27.599999999999998' fill='%237D93C9' transform='rotate(288)'/%3E%3Ccircle r='9.200000000000001' fill='%23E7C46A'/%3E%3Ccircle r='4.14' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(190 30) rotate(30)' opacity='0.33'%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(288)'/%3E%3Ccircle r='6.800000000000001' fill='%23E7C46A'/%3E%3Ccircle r='3.06' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(150 120) rotate(5)' opacity='0.33'%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(288)'/%3E%3Ccircle r='5.2' fill='%23E7C46A'/%3E%3Ccircle r='2.34' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(290 50) rotate(40)' opacity='0.33'%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(288)'/%3E%3Ccircle r='6' fill='%23E7C46A'/%3E%3Ccircle r='2.6999999999999997' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(25 175) rotate(22)' opacity='0.25'%3E%3Cellipse cx='0' cy='-15.400000000000002' rx='11.76' ry='16.8' fill='%235C70A8' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-15.400000000000002' rx='11.76' ry='16.8' fill='%235C70A8' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-15.400000000000002' rx='11.76' ry='16.8' fill='%235C70A8' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-15.400000000000002' rx='11.76' ry='16.8' fill='%235C70A8' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-15.400000000000002' rx='11.76' ry='16.8' fill='%235C70A8' transform='rotate(288)'/%3E%3Ccircle r='5.6000000000000005' fill='%23E7C46A'/%3E%3Ccircle r='2.52' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(400 25) rotate(0)' opacity='0.28'%3E%3Cellipse cx='0' cy='-13.200000000000001' rx='10.08' ry='14.399999999999999' fill='%23A9BCDD' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-13.200000000000001' rx='10.08' ry='14.399999999999999' fill='%23A9BCDD' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-13.200000000000001' rx='10.08' ry='14.399999999999999' fill='%23A9BCDD' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-13.200000000000001' rx='10.08' ry='14.399999999999999' fill='%23A9BCDD' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-13.200000000000001' rx='10.08' ry='14.399999999999999' fill='%23A9BCDD' transform='rotate(288)'/%3E%3Ccircle r='4.800000000000001' fill='%23E7C46A'/%3E%3Ccircle r='2.16' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(520 18) rotate(15)' opacity='0.25'%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(288)'/%3E%3Ccircle r='3.6' fill='%23E7C46A'/%3E%3Ccircle r='1.6199999999999999' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(1380 70) rotate(-12)' opacity='0.30'%3E%3Cellipse cx='0' cy='-26.400000000000002' rx='20.16' ry='28.799999999999997' fill='%237D93C9' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-26.400000000000002' rx='20.16' ry='28.799999999999997' fill='%237D93C9' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-26.400000000000002' rx='20.16' ry='28.799999999999997' fill='%237D93C9' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-26.400000000000002' rx='20.16' ry='28.799999999999997' fill='%237D93C9' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-26.400000000000002' rx='20.16' ry='28.799999999999997' fill='%237D93C9' transform='rotate(288)'/%3E%3Ccircle r='9.600000000000001' fill='%23E7C46A'/%3E%3Ccircle r='4.32' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(1250 35) rotate(18)' opacity='0.33'%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(288)'/%3E%3Ccircle r='6.800000000000001' fill='%23E7C46A'/%3E%3Ccircle r='3.06' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(1300 150) rotate(0)' opacity='0.33'%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(288)'/%3E%3Ccircle r='5.2' fill='%23E7C46A'/%3E%3Ccircle r='2.34' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(1140 45) rotate(-30)' opacity='0.33'%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(288)'/%3E%3Ccircle r='6' fill='%23E7C46A'/%3E%3Ccircle r='2.6999999999999997' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(1420 190) rotate(8)' opacity='0.25'%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%235C70A8' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%235C70A8' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%235C70A8' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%235C70A8' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%235C70A8' transform='rotate(288)'/%3E%3Ccircle r='5.2' fill='%23E7C46A'/%3E%3Ccircle r='2.34' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(1030 20) rotate(0)' opacity='0.28'%3E%3Cellipse cx='0' cy='-12.100000000000001' rx='9.24' ry='13.2' fill='%23A9BCDD' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-12.100000000000001' rx='9.24' ry='13.2' fill='%23A9BCDD' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-12.100000000000001' rx='9.24' ry='13.2' fill='%23A9BCDD' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-12.100000000000001' rx='9.24' ry='13.2' fill='%23A9BCDD' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-12.100000000000001' rx='9.24' ry='13.2' fill='%23A9BCDD' transform='rotate(288)'/%3E%3Ccircle r='4.4' fill='%23E7C46A'/%3E%3Ccircle r='1.98' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(920 12) rotate(15)' opacity='0.25'%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(288)'/%3E%3Ccircle r='3.6' fill='%23E7C46A'/%3E%3Ccircle r='1.6199999999999999' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(720 10) rotate(0)' opacity='0.19'%3E%3Cellipse cx='0' cy='-8.8' rx='6.72' ry='9.6' fill='%237D93C9' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-8.8' rx='6.72' ry='9.6' fill='%237D93C9' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-8.8' rx='6.72' ry='9.6' fill='%237D93C9' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-8.8' rx='6.72' ry='9.6' fill='%237D93C9' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-8.8' rx='6.72' ry='9.6' fill='%237D93C9' transform='rotate(288)'/%3E%3Ccircle r='3.2' fill='%23E7C46A'/%3E%3Ccircle r='1.44' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: top center, bottom center; background-size: 100% auto, 100% auto;
}
:root[data-palette="floral"] .side::before, :root[data-palette="vibe"] .side::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 300'%3E%3Cg transform='translate(1440 300) scale(-1 -1)'%3E%3Cg transform='translate(40 150) rotate(20)' opacity='0.25'%3E%3Cpath d='M0 0 Q 28 -70 0 -140' stroke='%23A3AE98' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='25.457987064189247' cy='-28' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 25.457987064189247 -28)'/%3E%3Cellipse cx='7.457987064189247' cy='-34' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 7.457987064189247 -34)'/%3E%3Cellipse cx='35.6295824562643' cy='-56' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 35.6295824562643 -56)'/%3E%3Cellipse cx='17.6295824562643' cy='-62' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 17.6295824562643 -62)'/%3E%3Cellipse cx='35.6295824562643' cy='-84' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 35.6295824562643 -84)'/%3E%3Cellipse cx='17.629582456264302' cy='-90' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 17.629582456264302 -90)'/%3E%3Cellipse cx='25.45798706418925' cy='-112' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 25.45798706418925 -112)'/%3E%3Cellipse cx='7.4579870641892505' cy='-118' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 7.4579870641892505 -118)'/%3E%3C/g%3E%3Cg transform='translate(170 120) rotate(-25)' opacity='0.25'%3E%3Cpath d='M0 0 Q 24 -60 0 -120' stroke='%23C9A98A' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='23.106846055019354' cy='-24' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 23.106846055019354 -24)'/%3E%3Cellipse cx='5.106846055019355' cy='-30' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 5.106846055019355 -30)'/%3E%3Cellipse cx='31.825356391083684' cy='-48' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 31.825356391083684 -48)'/%3E%3Cellipse cx='13.825356391083684' cy='-54' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 13.825356391083684 -54)'/%3E%3Cellipse cx='31.825356391083687' cy='-72' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 31.825356391083687 -72)'/%3E%3Cellipse cx='13.825356391083687' cy='-78' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 13.825356391083687 -78)'/%3E%3Cellipse cx='23.106846055019357' cy='-96' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 23.106846055019357 -96)'/%3E%3Cellipse cx='5.106846055019357' cy='-102' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 5.106846055019357 -102)'/%3E%3C/g%3E%3Cg transform='translate(330 90) rotate(15)' opacity='0.25'%3E%3Cpath d='M0 0 Q 22 -55 0 -110' stroke='%23A3AE98' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='21.931275550434407' cy='-22' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 21.931275550434407 -22)'/%3E%3Cellipse cx='3.9312755504344086' cy='-28' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 3.9312755504344086 -28)'/%3E%3Cellipse cx='29.923243358493377' cy='-44' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 29.923243358493377 -44)'/%3E%3Cellipse cx='11.923243358493377' cy='-50' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 11.923243358493377 -50)'/%3E%3Cellipse cx='29.92324335849338' cy='-66' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 29.92324335849338 -66)'/%3E%3Cellipse cx='11.92324335849338' cy='-72' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 11.92324335849338 -72)'/%3E%3Cellipse cx='21.931275550434414' cy='-88' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 21.931275550434414 -88)'/%3E%3Cellipse cx='3.931275550434412' cy='-94' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 3.931275550434412 -94)'/%3E%3C/g%3E%3Cg transform='translate(1290 130) rotate(-20)' opacity='0.25'%3E%3Cpath d='M0 0 Q 26 -65 0 -130' stroke='%23A3AE98' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='24.2824165596043' cy='-26' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 24.2824165596043 -26)'/%3E%3Cellipse cx='6.282416559604302' cy='-32' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 6.282416559604302 -32)'/%3E%3Cellipse cx='33.727469423673995' cy='-52' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 33.727469423673995 -52)'/%3E%3Cellipse cx='15.727469423673991' cy='-58' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 15.727469423673991 -58)'/%3E%3Cellipse cx='33.727469423673995' cy='-78' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 33.727469423673995 -78)'/%3E%3Cellipse cx='15.727469423673995' cy='-84' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 15.727469423673995 -84)'/%3E%3Cellipse cx='24.282416559604304' cy='-104' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 24.282416559604304 -104)'/%3E%3Cellipse cx='6.282416559604304' cy='-110' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 6.282416559604304 -110)'/%3E%3C/g%3E%3Cg transform='translate(1150 110) rotate(25)' opacity='0.25'%3E%3Cpath d='M0 0 Q 24 -60 0 -120' stroke='%23C9A98A' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='23.106846055019354' cy='-24' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 23.106846055019354 -24)'/%3E%3Cellipse cx='5.106846055019355' cy='-30' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 5.106846055019355 -30)'/%3E%3Cellipse cx='31.825356391083684' cy='-48' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 31.825356391083684 -48)'/%3E%3Cellipse cx='13.825356391083684' cy='-54' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 13.825356391083684 -54)'/%3E%3Cellipse cx='31.825356391083687' cy='-72' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 31.825356391083687 -72)'/%3E%3Cellipse cx='13.825356391083687' cy='-78' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 13.825356391083687 -78)'/%3E%3Cellipse cx='23.106846055019357' cy='-96' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 23.106846055019357 -96)'/%3E%3Cellipse cx='5.106846055019357' cy='-102' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 5.106846055019357 -102)'/%3E%3C/g%3E%3Cg transform='translate(980 80) rotate(-10)' opacity='0.25'%3E%3Cpath d='M0 0 Q 20 -50 0 -100' stroke='%23A3AE98' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='20.755705045849464' cy='-20' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 20.755705045849464 -20)'/%3E%3Cellipse cx='2.7557050458494636' cy='-26' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 2.7557050458494636 -26)'/%3E%3Cellipse cx='28.02113032590307' cy='-40' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 28.02113032590307 -40)'/%3E%3Cellipse cx='10.02113032590307' cy='-46' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 10.02113032590307 -46)'/%3E%3Cellipse cx='28.021130325903073' cy='-60' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 28.021130325903073 -60)'/%3E%3Cellipse cx='10.021130325903073' cy='-66' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 10.021130325903073 -66)'/%3E%3Cellipse cx='20.755705045849467' cy='-80' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 20.755705045849467 -80)'/%3E%3Cellipse cx='2.7557050458494654' cy='-86' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 2.7557050458494654 -86)'/%3E%3C/g%3E%3Cg transform='translate(620 60) rotate(10)' opacity='0.17'%3E%3Cpath d='M0 0 Q 18 -45 0 -90' stroke='%23A3AE98' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='19.580134541264517' cy='-18' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 19.580134541264517 -18)'/%3E%3Cellipse cx='1.580134541264517' cy='-24' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 1.580134541264517 -24)'/%3E%3Cellipse cx='26.119017293312762' cy='-36' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 26.119017293312762 -36)'/%3E%3Cellipse cx='8.119017293312762' cy='-42' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 8.119017293312762 -42)'/%3E%3Cellipse cx='26.119017293312766' cy='-54' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 26.119017293312766 -54)'/%3E%3Cellipse cx='8.119017293312766' cy='-60' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 8.119017293312766 -60)'/%3E%3Cellipse cx='19.58013454126452' cy='-72' rx='10' ry='4' fill='%23A3AE98' transform='rotate(-30 19.58013454126452 -72)'/%3E%3Cellipse cx='1.5801345412645187' cy='-78' rx='10' ry='4' fill='%23A3AE98' transform='rotate(30 1.5801345412645187 -78)'/%3E%3C/g%3E%3Cg transform='translate(820 55) rotate(-15)' opacity='0.17'%3E%3Cpath d='M0 0 Q 18 -45 0 -90' stroke='%23C9A98A' stroke-width='1.6' fill='none'/%3E%3Cellipse cx='19.580134541264517' cy='-18' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 19.580134541264517 -18)'/%3E%3Cellipse cx='1.580134541264517' cy='-24' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 1.580134541264517 -24)'/%3E%3Cellipse cx='26.119017293312762' cy='-36' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 26.119017293312762 -36)'/%3E%3Cellipse cx='8.119017293312762' cy='-42' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 8.119017293312762 -42)'/%3E%3Cellipse cx='26.119017293312766' cy='-54' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 26.119017293312766 -54)'/%3E%3Cellipse cx='8.119017293312766' cy='-60' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 8.119017293312766 -60)'/%3E%3Cellipse cx='19.58013454126452' cy='-72' rx='10' ry='4' fill='%23C9A98A' transform='rotate(-30 19.58013454126452 -72)'/%3E%3Cellipse cx='1.5801345412645187' cy='-78' rx='10' ry='4' fill='%23C9A98A' transform='rotate(30 1.5801345412645187 -78)'/%3E%3C/g%3E%3Cg transform='translate(70 60) rotate(10)' opacity='0.30'%3E%3Cellipse cx='0' cy='-25.3' rx='19.32' ry='27.599999999999998' fill='%237D93C9' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-25.3' rx='19.32' ry='27.599999999999998' fill='%237D93C9' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-25.3' rx='19.32' ry='27.599999999999998' fill='%237D93C9' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-25.3' rx='19.32' ry='27.599999999999998' fill='%237D93C9' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-25.3' rx='19.32' ry='27.599999999999998' fill='%237D93C9' transform='rotate(288)'/%3E%3Ccircle r='9.200000000000001' fill='%23E7C46A'/%3E%3Ccircle r='4.14' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(190 30) rotate(30)' opacity='0.33'%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(288)'/%3E%3Ccircle r='6.800000000000001' fill='%23E7C46A'/%3E%3Ccircle r='3.06' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(150 120) rotate(5)' opacity='0.33'%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(288)'/%3E%3Ccircle r='5.2' fill='%23E7C46A'/%3E%3Ccircle r='2.34' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(290 50) rotate(40)' opacity='0.33'%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(288)'/%3E%3Ccircle r='6' fill='%23E7C46A'/%3E%3Ccircle r='2.6999999999999997' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(25 175) rotate(22)' opacity='0.25'%3E%3Cellipse cx='0' cy='-15.400000000000002' rx='11.76' ry='16.8' fill='%235C70A8' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-15.400000000000002' rx='11.76' ry='16.8' fill='%235C70A8' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-15.400000000000002' rx='11.76' ry='16.8' fill='%235C70A8' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-15.400000000000002' rx='11.76' ry='16.8' fill='%235C70A8' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-15.400000000000002' rx='11.76' ry='16.8' fill='%235C70A8' transform='rotate(288)'/%3E%3Ccircle r='5.6000000000000005' fill='%23E7C46A'/%3E%3Ccircle r='2.52' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(400 25) rotate(0)' opacity='0.28'%3E%3Cellipse cx='0' cy='-13.200000000000001' rx='10.08' ry='14.399999999999999' fill='%23A9BCDD' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-13.200000000000001' rx='10.08' ry='14.399999999999999' fill='%23A9BCDD' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-13.200000000000001' rx='10.08' ry='14.399999999999999' fill='%23A9BCDD' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-13.200000000000001' rx='10.08' ry='14.399999999999999' fill='%23A9BCDD' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-13.200000000000001' rx='10.08' ry='14.399999999999999' fill='%23A9BCDD' transform='rotate(288)'/%3E%3Ccircle r='4.800000000000001' fill='%23E7C46A'/%3E%3Ccircle r='2.16' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(520 18) rotate(15)' opacity='0.25'%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(288)'/%3E%3Ccircle r='3.6' fill='%23E7C46A'/%3E%3Ccircle r='1.6199999999999999' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(1380 70) rotate(-12)' opacity='0.30'%3E%3Cellipse cx='0' cy='-26.400000000000002' rx='20.16' ry='28.799999999999997' fill='%237D93C9' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-26.400000000000002' rx='20.16' ry='28.799999999999997' fill='%237D93C9' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-26.400000000000002' rx='20.16' ry='28.799999999999997' fill='%237D93C9' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-26.400000000000002' rx='20.16' ry='28.799999999999997' fill='%237D93C9' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-26.400000000000002' rx='20.16' ry='28.799999999999997' fill='%237D93C9' transform='rotate(288)'/%3E%3Ccircle r='9.600000000000001' fill='%23E7C46A'/%3E%3Ccircle r='4.32' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(1250 35) rotate(18)' opacity='0.33'%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-18.700000000000003' rx='14.28' ry='20.4' fill='%23F2C7A8' transform='rotate(288)'/%3E%3Ccircle r='6.800000000000001' fill='%23E7C46A'/%3E%3Ccircle r='3.06' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(1300 150) rotate(0)' opacity='0.33'%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%23A9BCDD' transform='rotate(288)'/%3E%3Ccircle r='5.2' fill='%23E7C46A'/%3E%3Ccircle r='2.34' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(1140 45) rotate(-30)' opacity='0.33'%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-16.5' rx='12.6' ry='18' fill='%23F4D6CC' transform='rotate(288)'/%3E%3Ccircle r='6' fill='%23E7C46A'/%3E%3Ccircle r='2.6999999999999997' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(1420 190) rotate(8)' opacity='0.25'%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%235C70A8' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%235C70A8' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%235C70A8' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%235C70A8' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-14.3' rx='10.92' ry='15.6' fill='%235C70A8' transform='rotate(288)'/%3E%3Ccircle r='5.2' fill='%23E7C46A'/%3E%3Ccircle r='2.34' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(1030 20) rotate(0)' opacity='0.28'%3E%3Cellipse cx='0' cy='-12.100000000000001' rx='9.24' ry='13.2' fill='%23A9BCDD' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-12.100000000000001' rx='9.24' ry='13.2' fill='%23A9BCDD' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-12.100000000000001' rx='9.24' ry='13.2' fill='%23A9BCDD' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-12.100000000000001' rx='9.24' ry='13.2' fill='%23A9BCDD' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-12.100000000000001' rx='9.24' ry='13.2' fill='%23A9BCDD' transform='rotate(288)'/%3E%3Ccircle r='4.4' fill='%23E7C46A'/%3E%3Ccircle r='1.98' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(920 12) rotate(15)' opacity='0.25'%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-9.9' rx='7.56' ry='10.799999999999999' fill='%23F2C7A8' transform='rotate(288)'/%3E%3Ccircle r='3.6' fill='%23E7C46A'/%3E%3Ccircle r='1.6199999999999999' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3Cg transform='translate(720 10) rotate(0)' opacity='0.19'%3E%3Cellipse cx='0' cy='-8.8' rx='6.72' ry='9.6' fill='%237D93C9' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-8.8' rx='6.72' ry='9.6' fill='%237D93C9' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-8.8' rx='6.72' ry='9.6' fill='%237D93C9' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-8.8' rx='6.72' ry='9.6' fill='%237D93C9' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-8.8' rx='6.72' ry='9.6' fill='%237D93C9' transform='rotate(288)'/%3E%3Ccircle r='3.2' fill='%23E7C46A'/%3E%3Ccircle r='1.44' fill='%23394670' opacity='0.28'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: bottom center; background-size: 220% auto; }
:root[data-palette="floral"][data-theme="dark"] .pane::before, :root[data-palette="floral"][data-theme="dark"] .side::before, :root[data-palette="vibe"] .pane::before, :root[data-palette="vibe"] .side::before { background-blend-mode: soft-light; }
:root[data-palette="floral"] { --bar-a: #B9C8E8; --bar-b: #6E80B4; }
:root[data-palette="floral"][data-theme="dark"] { --bar-a: #B3C3EA; --bar-b: #7A8CC0; }

/* SO page per ORD: ORD picker, product × SO matrix */
.so-ord-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.so-ord-pick .inp { min-width: 260px; max-width: 100%; width: auto; flex: 0 1 auto; }
.so-matrix td { vertical-align: top; }
.so-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.so-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 12px; white-space: nowrap; text-decoration: none;
  color: var(--text); background: var(--fill, rgba(118, 118, 128, .1)); border: 1px solid var(--line); }
.so-chip:hover { border-color: var(--theme-line); background: var(--theme-soft); }
.so-chip.run { border-color: var(--theme-line); }
.so-chip.done { background: var(--green-soft); border-color: transparent; }
@media (max-width: 820px) { .so-ord-pick .inp { min-width: 0; width: 100%; } .so-matrix { overflow-x: auto; } }

/* order tree (ORD → group → product → SO → receipts), read across with merged cells like the order sheet */
.tree-tbl { border-collapse: separate; border-spacing: 0; }
.tree-tbl td, .tree-tbl th { border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); vertical-align: middle; }
/* merged cells stay as clear as the rest of the table (no tinted band): the borders already group them */
.tree-tbl td.tr-g { background: transparent; min-width: 96px; }
.tree-tbl td.tr-l { background: transparent; min-width: 150px; }
.tree-tbl td.tr-l .pcell { margin-top: 4px; justify-content: flex-end; }
.tree-tbl td.tr-s { min-width: 120px; }
.tree-tbl td.tr-r { white-space: nowrap; }
.tree-tbl td.num { white-space: nowrap; }
.ok-t { color: var(--green-text); }
.tree-box { overflow-x: auto; }
.tree-tbl td.tr-g, .tree-tbl td.tr-l { vertical-align: top; }
.tree-tbl td.tr-g > a, .tree-tbl td.tr-g > b { position: sticky; top: 44px; }
.tree-tbl td.tr-c { vertical-align: top; }
.tree-tbl td.tr-c > .tr-in { will-change: transform; transition: transform .08s linear; }
.tree-tbl td.tr-g > a, .tree-tbl td.tr-g > b { position: static; }
.tree-tbl .tr-ordq { margin-top: 8px; font-size: 15px; }
/* a real tree (MergeTable columns[0].tree): the parent's own row (▸ / ▾), its rows under it with ├ / └ in the first column */
.tree-tbl tr.mt-tree-h > td { background: rgba(127, 127, 127, .07); border-top: 1px solid var(--line); vertical-align: top; }
.tree-tbl .tree-h { display: flex; gap: 4px; align-items: flex-start; }
.tree-tbl .tree-c { display: flex; gap: 6px; align-items: flex-start; padding-left: 14px; }
.tree-tbl .tree-b { min-width: 0; flex: 1; }
.tree-tbl .tree-ln { color: var(--muted); flex: none; line-height: 1.45; }
.tree-tbl tr.mt-tree-c > td[data-col="0"]:only-child, .tree-tbl tr.mt-tree-c > td[data-col="0"] > .tree-ln { padding-left: 14px; }
.tree-tg { border: 0; background: none; cursor: pointer; padding: 0 4px; font-size: 13px; line-height: 1.45; color: inherit; flex: none; }
.tree-tg.all { padding: 0 4px 0 0; }
/* cards above a table in a padded page keep a gap from it */
.pane-body.pad > .sum-strip { margin-bottom: 14px; }
.tree-tbl thead th { white-space: nowrap; padding-top: 10px; padding-bottom: 10px; }
/* status picker beside the date filter: same size as the date one */
.period.st-pick select.inp { width: 174px; }
@media (max-width: 640px) { .period.st-pick { width: 100%; } .period.st-pick select.inp { width: auto; flex: 1; min-width: 0; } }
/* notes inside the record's side panel */
.rec-side-b.side-notes { padding: 10px 12px; overflow: auto; }
.rec-side-b.side-notes .notes { display: flex; flex-direction: column; gap: 8px; }
/* merge tables: filter / pin chips; a row short of packaging */
.mt-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 6px; }
.tree-tbl tr.mt-miss td:not(.tr-c) { background: rgba(207, 63, 85, .045); }
.neg { color: var(--red); }
/* record side: notes on top (scroll on their own), the tabs Quy trình / Lịch sử / Bình luận under them */
.side-notes-top { flex: 0 1 auto; max-height: 52%; overflow: auto; padding: 12px 14px 10px; border-bottom: 1px solid var(--line-2); }
.side-notes-h { font-weight: 600; font-size: 13px; margin: 0 0 8px; }
.side-notes-top .notes { display: flex; flex-direction: column; gap: 8px; }
.side-rest { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.nt-done { font-size: 12px; gap: 5px; cursor: pointer; white-space: nowrap; margin-right: 4px; }
.nt-card.done .nt-body { text-decoration: line-through; opacity: .6; }

/* record details slide in from the right; the list stays visible (and clickable to close) on the left */
.mask.drawer-mask { place-items: stretch end; padding: 0; background: rgba(20, 22, 40, .10); -webkit-backdrop-filter: none; backdrop-filter: none; animation: fade .12s; }
.dialog.lg.drawer { width: min(1560px, 90vw); height: 100vh; max-height: none; border-radius: 18px 0 0 18px; border-right: 0; animation: drawer-in .22s cubic-bezier(.2, .8, .2, 1);
  box-shadow: -18px 0 50px rgba(20, 24, 50, .18), -2px 0 8px rgba(20, 24, 50, .06); }
.dialog.lg.drawer.full { width: 100vw; border-radius: 0; }
@keyframes drawer-in { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (max-width: 820px) { .dialog.lg.drawer { width: 100vw; border-radius: 0; } }

/* record head: status + key facts on one line, note under it */
.rec-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 2px 2px 12px; font-size: 13px; }
.rec-meta .rm-i { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.rec-meta .rm-l { color: var(--muted); font-size: 12px; }
.rec-meta .rm-note { flex-basis: 100%; color: var(--text-2); font-size: 12.5px; padding: 6px 10px; border-radius: 8px; background: rgba(118, 118, 128, .07); }
/* the sliding record stays clear glass: the page behind shows through, inner boxes are light veils, not milky */
.dialog.drawer::before { background: rgba(255, 255, 255, .34) !important; -webkit-backdrop-filter: blur(30px) saturate(190%) brightness(1.04); backdrop-filter: blur(30px) saturate(190%) brightness(1.04); }
:root[data-theme="dark"] .dialog.drawer::before { background: rgba(28, 28, 32, .5) !important; }
.dialog.drawer .kpi-mini, .dialog.drawer .tbl-box, .dialog.drawer .sub, .dialog.drawer .doc-card, .dialog.drawer .upload { background: rgba(255, 255, 255, .26); border-color: rgba(255, 255, 255, .55); }
:root[data-theme="dark"] .dialog.drawer .kpi-mini, :root[data-theme="dark"] .dialog.drawer .tbl-box, :root[data-theme="dark"] .dialog.drawer .sub, :root[data-theme="dark"] .dialog.drawer .doc-card, :root[data-theme="dark"] .dialog.drawer .upload { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .07); }
.dialog.drawer .tbl th { background: rgba(255, 255, 255, .22); }
:root[data-theme="dark"] .dialog.drawer .tbl th { background: rgba(255, 255, 255, .03); }
.dialog.drawer .rec-side { background: rgba(255, 255, 255, .12); }
:root[data-theme="dark"] .dialog.drawer .rec-side { background: rgba(255, 255, 255, .02); }
.mask.drawer-mask { background: rgba(20, 22, 40, .04); }

/* the sliding record: clearer glass (more of the page shows through) */
.dialog.drawer::before { background: rgba(255, 255, 255, .16) !important; -webkit-backdrop-filter: blur(26px) saturate(210%) brightness(1.06); backdrop-filter: blur(26px) saturate(210%) brightness(1.06); }
:root[data-theme="dark"] .dialog.drawer::before { background: rgba(24, 24, 30, .34) !important; }
.dialog.drawer .kpi-mini, .dialog.drawer .tbl-box, .dialog.drawer .sub, .dialog.drawer .doc-card, .dialog.drawer .upload, .dialog.drawer .nt-card, .dialog.drawer .notes .nt-composer, .dialog.drawer .side-notes-top textarea { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .42); }
.dialog.drawer .tbl th { background: rgba(255, 255, 255, .1); }
.dialog.drawer .rec-side { background: rgba(255, 255, 255, .05); }
.dialog.drawer .rec-meta .rm-note { background: rgba(255, 255, 255, .16); }
.dialog.drawer .dlg-h, .dialog.drawer .rec-bar { background: transparent; }

/* drawer: see-through glass — light blur so the list behind stays readable, no stacked frosting inside */
.dialog.drawer::before { background: rgba(255, 255, 255, .12) !important; -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%); }
:root[data-theme="dark"] .dialog.drawer::before { background: rgba(20, 20, 28, .3) !important; }
.dialog.drawer .kpi-mini, .dialog.drawer .doc-card, .dialog.drawer .nt-card { -webkit-backdrop-filter: none; backdrop-filter: none; }
.dialog.drawer .nt-comp, .dialog.drawer .what, .dialog.drawer .dc-thumb { background: rgba(255, 255, 255, .16); }
.dialog.drawer .btn:not(.primary) { background: rgba(255, 255, 255, .2); }
.dialog.drawer .inp { background: rgba(255, 255, 255, .14); }
:root[data-theme="dark"] .dialog.drawer .kpi-mini, :root[data-theme="dark"] .dialog.drawer .tbl-box, :root[data-theme="dark"] .dialog.drawer .sub, :root[data-theme="dark"] .dialog.drawer .doc-card, :root[data-theme="dark"] .dialog.drawer .upload, :root[data-theme="dark"] .dialog.drawer .nt-card, :root[data-theme="dark"] .dialog.drawer .nt-comp, :root[data-theme="dark"] .dialog.drawer .what, :root[data-theme="dark"] .dialog.drawer .inp, :root[data-theme="dark"] .dialog.drawer .btn:not(.primary) { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }

/* drawer: the list behind keeps scrolling/clicking; left edge drags the width */
.mask.drawer-mask { pointer-events: none; }
.mask.drawer-mask > .dialog.drawer { pointer-events: auto; position: relative; max-width: calc(100vw - 120px); }
.drawer-grip { position: absolute; left: -4px; top: 0; bottom: 0; width: 10px; cursor: ew-resize; z-index: 3; }
.drawer-grip::after { content: ""; position: absolute; left: 3px; top: 50%; width: 4px; height: 44px; margin-top: -22px; border-radius: 4px; background: rgba(120, 125, 150, .35); opacity: 0; transition: opacity .15s; }
.dialog.drawer:hover .drawer-grip::after, .drawer-dragging .drawer-grip::after { opacity: 1; }
.drawer-dragging, .drawer-dragging * { cursor: ew-resize !important; user-select: none !important; }
.drawer-dragging .dialog.drawer { transition: none; animation: none; }
.mask.drawer-mask.no-anim, .dialog.drawer.no-anim { animation: none; } /* the loading frame already slid in: the record takes its place without a second slide */
@media (max-width: 760px) { .drawer-grip { display: none; } .mask.drawer-mask { pointer-events: auto; } }
@media (max-width: 760px) { .mask.drawer-mask > .dialog.lg.drawer { width: 100vw !important; max-width: 100vw; border-radius: 0; } }

/* plain tables (.tbl): filter + pin icons in each header, pinned columns stay while scrolling sideways */
.tbl th .tt { display: inline-flex; gap: 1px; margin-left: 4px; vertical-align: middle; opacity: 0; transition: opacity .12s; }
.tbl th:hover .tt, .tbl th .tt:has(.on) { opacity: 1; }
.tbl th .tt-b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; color: var(--muted); cursor: pointer; line-height: 0; }
.tbl th .tt-b:hover { background: var(--hover); color: var(--text); }
.tbl th .tt-b.on { color: var(--theme); background: var(--theme-soft); }
.tbl th .tt-b:not(.on) + .tt-b.on, .tbl th .tt-b.on { opacity: 1; }
.tbl tr.tt-hide { display: none; }
.tbl td.tfrz, .tbl th.tfrz { position: sticky; z-index: 1; background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }
.tbl th.tfrz { z-index: 3; background: rgba(255, 255, 255, .7); }
.tbl .tfrz-last { box-shadow: 1px 0 0 rgba(255, 255, 255, .7), 6px 0 10px -6px rgba(20, 30, 60, .18); }
:root[data-theme="dark"] .tbl td.tfrz { background: rgba(34, 34, 38, .6); }
:root[data-theme="dark"] .tbl th.tfrz { background: rgba(40, 40, 44, .8); }
:root[data-theme="dark"] .tbl .tfrz-last { box-shadow: 1px 0 0 rgba(255, 255, 255, .08), 6px 0 10px -6px rgba(0, 0, 0, .5); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tbl td.tfrz { background: rgba(34, 34, 38, .6); }
  :root:not([data-theme="light"]) .tbl th.tfrz { background: rgba(40, 40, 44, .8); }
}
/* touch screens have no hover: the tools stay out of the way of the name, a tap on the header shows them; a filter or pin that is on
   always shows (only that button) */
@media (hover: none) {
  .tbl th .tt { visibility: hidden; }
  .tbl th:focus-within .tt { visibility: visible; opacity: 1; }
  .tbl th .tt:has(.on) { visibility: visible; background: none; }
  .tbl th:not(:focus-within) .tt .tt-b:not(.on) { display: none; }
}
.tbl thead th:focus { outline: none; }
@media print { .tbl th .tt { display: none !important; } .tbl .tfrz { position: static !important; box-shadow: none !important; } }

/* a narrowed drawer gives the room to the record: side column shrinks, then moves under the record */
.dialog.drawer { container-type: inline-size; container-name: rec; }
@container rec (max-width: 1000px) { .rec-body { grid-template-columns: minmax(0, 1fr) 260px; } }
@container rec (max-width: 780px) {
  .rec-body { grid-template-columns: 1fr; grid-template-rows: auto auto; overflow: auto; }
  .rec-main { overflow: visible; }
  .rec-side { border-left: 0; border-top: 1px solid var(--line-2); min-height: 380px; }
}

/* note-like fields of a record (ORD/PO/SO note, short-delivery reason…): shown as a note, edited / deleted in place */
.note-f { flex-basis: 100%; display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; margin-top: 6px; padding: 7px 10px; border-radius: 10px; background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .5); font-size: 13px; line-height: 1.45; }
.note-f .nf-l { flex: none; font-size: 11.5px; font-weight: 500; color: var(--muted); padding: 1px 7px; border-radius: 6px; background: rgba(120, 125, 150, .1); }
.note-f .nf-v { flex: 1; min-width: 120px; }
.note-f .nf-tools { flex: none; display: inline-flex; gap: 2px; margin-left: auto; opacity: .45; transition: opacity .12s; }
.note-f:hover .nf-tools { opacity: 1; }
.note-f textarea { flex-basis: 100%; min-height: 54px; }
.note-f .nf-act { flex-basis: 100%; display: flex; gap: 6px; justify-content: flex-end; }
.note-f.t-warn { background: rgba(255, 149, 0, .08); border-color: rgba(255, 149, 0, .25); }
.note-f.t-warn .nf-l { color: var(--orange, #c25e00); background: rgba(255, 149, 0, .14); }
.note-f.compact { margin-top: 4px; padding: 3px 4px 3px 6px; font-size: 12px; gap: 6px; white-space: normal; }
.note-f.compact .nf-l { font-size: 11px; padding: 0 6px; }
.note-f.compact .icon-btn.sm { width: 22px; height: 22px; }
:root[data-theme="dark"] .note-f { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); }
@media (hover: none) { .note-f .nf-tools { opacity: 1; } }
.note-f.compact { flex-wrap: nowrap; align-items: center; max-width: 100%; }
.note-f.compact .nf-v { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-f.compact:has(textarea) { flex-wrap: wrap; }
.note-f.t-warn, .dialog.drawer .note-f.t-warn { background: rgba(255, 149, 0, .1); border-color: rgba(255, 149, 0, .3); }
.note-f.t-warn .nf-v { color: #b45309; }
:root[data-theme="dark"] .note-f.t-warn .nf-v { color: #fbbf24; }
.note-f.compact { max-width: 340px; }

/* in-app confirm */
.ask-mask { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; background: rgba(20, 22, 40, .14); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade .12s; }
.ask { width: min(380px, 100%); padding: 18px 18px 14px; border-radius: 16px; background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .85); box-shadow: 0 18px 50px rgba(20, 30, 60, .22); -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%); }
.ask-msg { font-size: 14px; line-height: 1.5; margin-bottom: 14px; }
.ask-f { display: flex; gap: 8px; justify-content: flex-end; }
:root[data-theme="dark"] .ask { background: rgba(40, 40, 44, .78); border-color: rgba(255, 255, 255, .1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ask { background: rgba(40, 40, 44, .78); border-color: rgba(255, 255, 255, .1); } }

/* no coloured side stripes anywhere: status is told by its tag, not by a bar on the edge */
.plan-row.st-buy, .plan-row.st-transfer, .plan-row.st-wait, .plan-row.st-ok, .plan-row.st-coming { box-shadow: none; }
.nt-card, .mb-card.late, .board-card.late { border-left-width: 1px; }
.mb-card.late, .board-card.late { border-left-color: var(--line); }
.node.on { box-shadow: none; }
.nt-card[class*=' t-'] { border-left-color: inherit; border-color: rgba(255, 255, 255, .5); }
:root[data-theme='dark'] .nt-card[class*=' t-'] { border-color: rgba(255, 255, 255, .1); }

/* quick look (peek.js): a record of another module stacked on top of the drawer you were in */
.dialog.drawer.peek { box-shadow: -18px 0 50px rgba(20, 30, 60, .2); animation: drawer-in .2s; }
.dialog.drawer.peek::before { background: rgba(255, 255, 255, .42) !important; }
:root[data-theme="dark"] .dialog.drawer.peek::before { background: rgba(24, 24, 30, .6) !important; }
.peek-tag { flex: none; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; color: var(--theme); background: var(--theme-soft); margin-right: 8px; }
.dialog.drawer.peek .dlg-h .btn.sm { margin-left: auto; margin-right: 4px; }
.dialog.drawer.peek .dlg-h .btn.sm + .icon-btn { margin-left: 0; }

/* header row stays in view: a long table scrolls inside its own box (up to ~3/4 of the screen), its header pinned on top */
/* (no inner vertical scroll: the page scrolls, the header follows it, see tabletools.js) */
.tbl thead th, .tree-tbl thead th { position: relative; z-index: 2; will-change: transform; background: rgba(248, 249, 253, .82); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); }
.tbl thead th.tfrz, .tree-tbl thead th.frz { z-index: 4; }
.dialog.drawer .tbl thead th { background: rgba(255, 255, 255, .62); }
:root[data-theme="dark"] .tbl thead th, :root[data-theme="dark"] .tree-tbl thead th, :root[data-theme="dark"] .dialog.drawer .tbl thead th { background: rgba(36, 36, 40, .85); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tbl thead th, :root:not([data-theme="light"]) .tree-tbl thead th { background: rgba(36, 36, 40, .85); } }
@media print { .tbl-box { max-height: none !important; overflow: visible !important; } }
thead.tt-floating th { box-shadow: 0 6px 10px -8px rgba(20, 30, 60, .25); }

/* a header row that follows the page keeps its glass; the box is cut just above it (tabletools.js) so a small gap shows the page, as at rest */

/* every table header has the same glass as the main lists (the one the owner liked): rest or following the page */
.tbl thead th, .tree-tbl thead th, .dialog.drawer .tbl thead th { background: rgba(255, 255, 255, .42); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border-bottom: 1px solid rgba(60, 60, 67, .07); }
thead.tt-floating th { box-shadow: none; }
:root[data-theme="dark"] .tbl thead th, :root[data-theme="dark"] .tree-tbl thead th, :root[data-theme="dark"] .dialog.drawer .tbl thead th { background: rgba(40, 40, 44, .55); border-bottom-color: rgba(255, 255, 255, .06); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tbl thead th, :root:not([data-theme="light"]) .tree-tbl thead th { background: rgba(40, 40, 44, .55); } }
thead.tt-floating th:first-child { border-top-left-radius: var(--tt-r, 12px); } thead.tt-floating th:last-child { border-top-right-radius: var(--tt-r, 12px); }

/* a table inside a dashboard block: light header in the block's own glass, no second frosted bar */
.wg .tbl-box { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .5); }
.wg .tbl thead th { background: rgba(255, 255, 255, .22); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid rgba(60, 60, 67, .06); }
:root[data-theme="dark"] .wg .tbl-box { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .wg .tbl thead th { background: rgba(255, 255, 255, .04); }

/* dashboard board: blocks the person arranges (layout.js) */
.bd-grid { align-items: stretch; }
.bd-item { position: relative; display: flex; min-width: 0; }
.bd-item > .wg { flex: 1; min-width: 0; }
.bd-item.fixed-h { align-self: start; }
.bd-item.fixed-h > .wg { overflow: hidden; }
.bd-item.fixed-h > .wg .wg-b { overflow: auto; }
.bd-item.fixed-h > .wg .wg-b > .tbl-box, .bd-item.fixed-h > .wg .wg-b > .alist { max-height: none !important; }
.bd-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 8px 10px 8px 14px; border-radius: 14px; background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); position: sticky; top: 0; z-index: 5; }
.bd-hint { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; }
.bd-act { display: inline-flex; gap: 6px; margin-left: auto; }
.bd-grid.editing .bd-item { cursor: grab; touch-action: none; }
.bd-grid.editing .bd-item > * { pointer-events: none; }
.bd-grid.editing .bd-item > .bd-x, .bd-grid.editing .bd-item > .bd-rs { pointer-events: auto; }
.bd-grid.editing .bd-item::after { content: ""; position: absolute; inset: 0; border-radius: 18px; border: 1.5px dashed rgba(47, 123, 246, .45); background: rgba(47, 123, 246, .03); pointer-events: none; }
.bd-grid.editing .bd-item:hover::after { border-color: var(--theme); background: rgba(47, 123, 246, .06); }
.bd-item.bd-drag { z-index: 20; opacity: .85; cursor: grabbing; box-shadow: 0 18px 40px rgba(20, 30, 60, .25); border-radius: 18px; transition: none; }
.bd-item.bd-drop-before::before, .bd-item.bd-drop-after::before { content: ""; position: absolute; top: 4px; bottom: 4px; width: 4px; border-radius: 4px; background: var(--theme); z-index: 6; }
.bd-item.bd-drop-before::before { left: -7px; } .bd-item.bd-drop-after::before { right: -7px; }
.bd-x { position: absolute; top: 8px; right: 8px; z-index: 6; width: 24px; height: 24px; border-radius: 8px; border: 0; background: rgba(255, 255, 255, .85); color: var(--muted); font-size: 12px; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.bd-x:hover { color: var(--red); }
.bd-size { position: absolute; left: 10px; bottom: 8px; z-index: 6; font-size: 11px; color: var(--theme); background: rgba(255, 255, 255, .85); padding: 1px 7px; border-radius: 6px; pointer-events: none; }
.bd-rs { position: absolute; right: 2px; bottom: 2px; z-index: 6; width: 20px; height: 20px; cursor: nwse-resize; border-radius: 0 0 16px 0; background: linear-gradient(135deg, transparent 50%, var(--theme) 50%, var(--theme) 58%, transparent 58%, transparent 70%, var(--theme) 70%, var(--theme) 78%, transparent 78%); opacity: .8; }
.bd-resizing, .bd-resizing * { cursor: nwse-resize !important; user-select: none !important; }
:root[data-theme="dark"] .bd-bar { background: rgba(40, 40, 44, .6); border-color: rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .bd-x, :root[data-theme="dark"] .bd-size { background: rgba(40, 40, 44, .9); }
@media (max-width: 760px) { .bd-hint { display: none; } }

/* edit tools of a block: one small pill sitting on the block's top edge (never over its title or links) */
.bd-tools { position: absolute; top: -11px; right: 14px; z-index: 7; display: inline-flex; align-items: center; gap: 4px; padding: 2px 3px 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 8px rgba(20, 30, 60, .14); pointer-events: auto; }
.bd-tools .bd-size { position: static; padding: 0; background: none; font-size: 11px; color: var(--theme); white-space: nowrap; }
.bd-tools .bd-x { position: static; width: 20px; height: 20px; border-radius: 50%; box-shadow: none; background: transparent; font-size: 11px; line-height: 20px; padding: 0; }
.bd-tools .bd-x:hover { background: rgba(255, 59, 48, .1); }
.bd-grid.editing .bd-item > .bd-tools { pointer-events: auto; }
.bd-grid.editing { padding-top: 6px; row-gap: 18px; }
:root[data-theme="dark"] .bd-tools { background: rgba(40, 40, 44, .95); }

/* role permissions: the permission column takes a third, the role columns share the rest evenly (no bunching on the right) */
.perm-tbl { table-layout: fixed; width: 100%; }
.perm-tbl col.perm-k { width: 34%; }
.perm-tbl .perm-c { width: auto; }
.perm-tbl th.perm-c { text-align: center; white-space: normal; }
.perm-tbl th.perm-c .th-l, .perm-tbl th.perm-c > * { justify-content: center; }
.perm-tbl td:first-child { min-width: 0; }

/* "Xem với tư cách" */
.viewas-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 16px 0; padding: 8px 10px 8px 14px; border-radius: 12px; font-size: 13px; color: #8a4b00; background: rgba(255, 179, 64, .16); border: 1px solid rgba(255, 149, 0, .3); }
.viewas-bar .btn { margin-left: auto; }
:root[data-theme="dark"] .viewas-bar { color: #ffc46b; background: rgba(255, 149, 0, .12); }
.viewas-pick { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .4); border: 1px solid rgba(255, 255, 255, .7); }
.viewas-pick > div { flex: 1; min-width: 240px; }
.viewas-pick select { width: 200px; }
:root[data-theme="dark"] .viewas-pick { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .08); }

/* ===== ONE rule for every table in the app: main lists (.grid), plain tables (.tbl), the order tree ===== */
.grid thead th, .tbl thead th { height: 38px; padding-top: 0; padding-bottom: 0; padding-left: 12px; padding-right: 12px; font-size: 11.5px; font-weight: 500; color: var(--muted); line-height: 1.3; vertical-align: middle; }
.grid tbody td, .tbl tbody td, .grid tfoot td, .tbl tfoot td { padding: 7px 12px; vertical-align: middle; }
.tbl-box, .grid-wrap { border-radius: 14px; }
.tbl thead th { position: relative; }
.tbl thead th.tfrz { position: sticky; }
/* header tools sit at the right edge of the header (as in the main lists), shown on hover / when on */
.tbl th .tt { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); margin: 0; gap: 2px; padding: 2px 2px 2px 8px; border-radius: 7px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .9) 8px); }
:root[data-theme="dark"] .tbl th .tt { background: linear-gradient(90deg, rgba(40, 40, 44, 0), rgba(40, 40, 44, .95) 8px); }
.tbl th .tt-b { width: 20px; height: 20px; border-radius: 6px; }
/* the column name (tabletools.js .tt-l) gives way to the tools while they show: cut with "…", the column keeps its width
   (a % max-width does not count when the table sizes its columns); a right-aligned name moves left of them */
.tbl th .tt-l { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; position: relative; }
.tbl th { --tt-w: 0px; }
.tbl th:focus-within, .tbl th:has(> .tt .on) { --tt-w: 48px; }
@media (hover: hover) { .tbl th:hover { --tt-w: 48px; } }
@media (hover: none) { .tbl th:not(:focus-within):has(> .tt .on) { --tt-w: 24px; } }
.tbl th .tt-l { max-width: calc(100% - var(--tt-w)); }
.tbl th[data-tta="r"] .tt-l { right: var(--tt-w); }
.tbl th[data-tta="c"] .tt-l { right: calc(var(--tt-w) / 2); }
/* column width handle, identical to the main lists */
.tt-rs { position: absolute; top: 0; right: -4px; bottom: 0; width: 9px; cursor: col-resize; z-index: 5; touch-action: none; }
.tt-rs::after { content: ''; position: absolute; top: 9px; bottom: 9px; left: 4px; width: 2px; border-radius: 2px; background: transparent; transition: background .12s; }
.tbl th:hover .tt-rs::after { background: rgba(47, 123, 246, .28); }
.tt-rs:hover::after, body.col-resizing .tbl th .tt-rs::after { background: var(--theme); }
.tbl td.tcw { overflow: hidden; text-overflow: ellipsis; }
.tbl td.tcw > * { overflow: hidden; text-overflow: ellipsis; }
.perm-tbl thead th { height: auto; padding-top: 8px; padding-bottom: 8px; }
@media print { .tt, .tt-rs { display: none !important; } }

/* v3: module tabs in the page head (modules.js) — text tabs, never hidden on a phone, scroll sideways when long */
.mod-tabs { overflow-x: auto; scrollbar-width: none; max-width: 100%; flex-wrap: nowrap; }
.mod-tabs::-webkit-scrollbar { display: none; }
.mod-tabs .mtab { white-space: nowrap; }
.mod-tabs .mtab .mt-l { display: inline !important; }
/* a long tab row scrolls, the module name beside it is never cut to "Danh …" (Danh mục has 11 tabs since R56/R57) */
@media (min-width: 821px) { .pane-head > .pane-title { flex-shrink: 0; } }
@media (max-width: 760px) { .pane-head .mod-tabs { order: 10; flex-basis: 100%; margin-top: 6px; } .pane-head:has(.mod-tabs) { flex-wrap: wrap; } .pane-head .mod-tabs + * { } }
/* the factory statement names its KM programmes in one line (they are kept in the factory's record) */
.km-line { margin-top: 14px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .35); border: 1px solid rgba(255, 255, 255, .6); font-size: 13px; display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }
.km-line a { margin-left: auto; }
:root[data-theme="dark"] .km-line { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .08); }
/* the bell: alerts in a pop-up list */
.alert-pop { width: min(420px, calc(100vw - 24px)); }
.alert-pop .alist { max-height: 60vh; overflow: auto; margin: 0; }
.km-line .km-l { font-weight: 600; flex: none; } .km-line .km-list { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
.mod-tabs.more { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.mod-tabs.less { -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%); mask-image: linear-gradient(90deg, transparent, #000 15%); }
.mod-tabs.less.more { -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.viewas-bar .va-p { font-size: 12px; padding: 2px 8px; border-radius: 7px; background: rgba(255, 255, 255, .45); } .viewas-bar .va-l { font-weight: 600; }
:root[data-theme='dark'] .viewas-bar .va-p { background: rgba(255, 255, 255, .06); }
.perm-tbl tr.perm-a td:first-child b { color: var(--theme); font-weight: 500; }

/* v3: forms and "Thêm…" dialogs slide in from the right as side sheets (the page stays in view behind) */
.mask.form-mask { place-items: stretch end; padding: 0; background: rgba(20, 22, 40, .05); -webkit-backdrop-filter: none; backdrop-filter: none; animation: fade .12s; }
.mask.form-mask > .dialog { height: 100vh; max-height: 100vh; margin: 0; border-radius: 18px 0 0 18px; animation: drawer-in .22s; display: flex; flex-direction: column; }
.mask.form-mask > .dialog.sheet { width: min(560px, 100vw); }
.mask.form-mask > .dialog.sheet.md { width: min(760px, 100vw); }
.mask.form-mask > .dialog.sheet.lg { width: min(1000px, 100vw); }
.mask.form-mask > .dialog.sheet.full { width: 100vw; border-radius: 0; }
.mask.form-mask > .dialog .dlg-b { flex: 1; min-height: 0; overflow: auto; }
.mask.form-mask > .dialog .dlg-f { flex: none; }
.dialog.form-drawer { width: min(1180px, 86vw); }
.dialog.form-drawer > .form-page { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; max-width: none; margin: 0; }
.dialog.form-drawer > .form-page > .form-body { flex: 1; }
.dialog.form-drawer > .form-page > .form-foot { position: sticky; bottom: 0; }
@media (max-width: 760px) { .mask.form-mask > .dialog { width: 100vw !important; border-radius: 0; } }
.mask.form-mask > .dialog.lg.drawer.form-drawer { width: min(1180px, 86vw); }
@media (max-width: 760px) { .mask.form-mask > .dialog.lg.drawer.form-drawer { width: 100vw; } }

/* print preview (print.js): the document shown inside the app, "In" sends it to the printer */
.print-mask { position: fixed; inset: 0; z-index: 450; display: grid; place-items: center; padding: 20px; background: rgba(20, 22, 40, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade .12s; }
.print-sheet { width: min(960px, 100%); height: min(92vh, 1200px); display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 24px 60px rgba(20, 30, 60, .3); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); }
.print-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 16px; font-size: 13.5px; }
.print-frame { flex: 1; width: 100%; border: 0; background: #fff; }
:root[data-theme="dark"] .print-sheet { background: rgba(40, 40, 44, .85); border-color: rgba(255, 255, 255, .1); }
@media (max-width: 760px) { .print-mask { padding: 0; } .print-sheet { height: 100vh; border-radius: 0; } }

/* record header: a grid of facts (label above value), columns aligned — v3 */
.rec-meta { display: block !important; padding: 0 !important; background: none !important; border: 0 !important; margin-bottom: 12px; }
.rm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, .22); border: 1px solid rgba(60, 60, 67, .1); }
.rm-c { padding: 8px 12px; min-width: 0; border-right: 1px solid rgba(60, 60, 67, .08); border-bottom: 1px solid rgba(60, 60, 67, .08); margin: 0 -1px -1px 0; }
.rm-c .rm-l { display: block; font-size: 11px; color: var(--muted); margin: 0 0 2px; letter-spacing: .01em; }
.rm-c .rm-v { font-size: 13.5px; font-weight: 500; color: var(--text); line-height: 1.35; overflow-wrap: anywhere; }
.rm-c.rm-wide { grid-column: 1 / -1; }
.rm-c.rm-wide .rm-v { font-weight: 400; font-size: 13px; color: var(--text-2, var(--text)); }
.rec-meta .note-f { margin-top: 8px; }
:root[data-theme="dark"] .rm-grid { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .rm-c { border-color: rgba(255, 255, 255, .06); }

/* the tick column: same background as its row, and it scrolls with the table — it is pinned (and then opaque enough
   to read across) only when the person pins columns; it never sits as a tinted band over the first column */
.grid td.ck, .grid th.ck { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.grid th.ck { background: inherit; }
.grid td.ck.sticky-l { background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); }
.grid th.ck.sticky-l { background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); }
:root[data-theme="dark"] .grid td.ck.sticky-l, :root[data-theme="dark"] .grid th.ck.sticky-l { background: rgba(34, 34, 38, .6); }
.grid thead th.ck:not(.sticky-l) { background: rgba(255, 255, 255, .42); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); }
:root[data-theme='dark'] .grid thead th.ck:not(.sticky-l) { background: rgba(40, 40, 44, .55); }
/* the totals row: "Tổng" sits in the tick-column cell, which keeps the totals row's own tint (every data column shows its sum) */
.grid tfoot td.ck { background: rgba(255, 255, 255, .34); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); font-size: 12px; white-space: nowrap; }
:root[data-theme="dark"] .grid tfoot td.ck { background: rgba(40, 40, 44, .55); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .grid tfoot td.ck { background: rgba(40, 40, 44, .55); } }

/* ===== choice list drawn by the app (Select, ui.js): glass, rounded, airy — never the operating system's list ===== */
.inp.sel { display: inline-flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--text); padding-right: 30px; position: relative; min-width: 0; }
.inp.sel.sm { width: auto; min-width: 120px; }
.inp.sel.sel-auto { width: auto; }
.inp.sel .sel-v { flex: 1; min-width: 0; }
.inp.sel.ph .sel-v { color: var(--muted); }
.inp.sel .sel-c { position: absolute; right: 11px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); opacity: .55; transition: transform .15s, margin .15s; }
.inp.sel.open .sel-c { transform: rotate(225deg); margin-top: -1px; }
.inp.sel.open, .inp.sel:focus-visible { border-color: var(--theme); box-shadow: 0 0 0 3px rgba(47, 123, 246, .14); outline: none; }
.inp.sel:disabled { cursor: default; opacity: .6; }
.sel-pop { position: fixed; z-index: 600; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; padding: 6px;
  background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .85); box-shadow: 0 18px 44px rgba(20, 30, 60, .2), 0 2px 6px rgba(20, 30, 60, .08);
  -webkit-backdrop-filter: blur(28px) saturate(190%); backdrop-filter: blur(28px) saturate(190%); animation: sel-in .12s ease-out; font-size: 13.5px; }
.sel-pop.up { animation-name: sel-up; }
@keyframes sel-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes sel-up { from { opacity: 0; transform: translateY(4px); } }
.sel-q { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 0 10px; height: 34px; border-radius: 10px; background: rgba(118, 118, 128, .08); color: var(--muted); }
.sel-q input { flex: 1; border: 0; background: none; outline: none; font: inherit; color: var(--text); min-width: 0; }
.sel-list { overflow: auto; overscroll-behavior: contain; min-height: 0; }
.sel-o { display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-height: 34px; border-radius: 9px; cursor: pointer; color: var(--text); }
.sel-o .clip { flex: 1; min-width: 0; }
.sel-o.hi { background: rgba(47, 123, 246, .09); }
.sel-o.on { color: var(--theme); font-weight: 600; }
.sel-o.on svg { flex: none; color: var(--theme); }
.sel-o.empty { color: var(--muted); font-style: italic; }
.sel-g { padding: 10px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.sel-g:first-child { padding-top: 4px; }
:root[data-theme="dark"] .sel-pop { background: rgba(40, 40, 46, .82); border-color: rgba(255, 255, 255, .1); box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
:root[data-theme="dark"] .sel-o.hi { background: rgba(120, 160, 255, .16); }
:root[data-theme="dark"] .sel-q { background: rgba(255, 255, 255, .06); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sel-pop { background: rgba(40, 40, 46, .82); border-color: rgba(255, 255, 255, .1); } }
@media (max-width: 760px) { .sel-o { min-height: 42px; } }
.sel-pop { width: max-content; }
.sel-o .clip { flex: 1 1 auto; }
.sel-o.empty { font-style: normal; color: var(--muted); justify-content: flex-start; }
.sel-o.empty.on { color: var(--muted); font-weight: 500; }
.sel-o .clip { max-width: none; }
.sel-o.sel-none { color: var(--muted); }
.sel-o.sel-none.on { font-weight: 500; }

/* ===== date field drawn by the app (DateInput, ui.js): dd/mm/yyyy, glass calendar ===== */
.date-in { position: relative; display: inline-flex; align-items: center; width: 100%; min-width: 0; }
.date-in.sm { width: 132px; }
.date-in > .inp { width: 100%; padding-right: 32px; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.date-in .date-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.date-in .date-btn:hover, .date-in.open .date-btn { color: var(--theme); background: rgba(47, 123, 246, .08); }
.date-in.open > .inp { border-color: var(--theme); box-shadow: 0 0 0 3px rgba(47, 123, 246, .14); }
.cal-pop { position: fixed; z-index: 600; width: 280px; padding: 10px; border-radius: 16px; font-size: 13px;
  background: rgba(255, 255, 255, .74); border: 1px solid rgba(255, 255, 255, .85); box-shadow: 0 18px 44px rgba(20, 30, 60, .2), 0 2px 6px rgba(20, 30, 60, .08);
  -webkit-backdrop-filter: blur(28px) saturate(190%); backdrop-filter: blur(28px) saturate(190%); animation: sel-in .12s ease-out; }
.cal-pop.up { animation-name: sel-up; }
.cal-h { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 8px; }
.cal-h b { font-weight: 600; }
.cal-nav { width: 30px; height: 30px; border: 0; border-radius: 9px; background: none; font-size: 18px; line-height: 1; color: var(--text); cursor: pointer; }
.cal-nav:hover { background: rgba(118, 118, 128, .12); }
.cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-w { text-align: center; font-size: 11px; font-weight: 600; color: var(--muted); padding: 4px 0 6px; }
.cal-d { height: 34px; border: 0; border-radius: 10px; background: none; font: inherit; color: var(--text); cursor: pointer; font-variant-numeric: tabular-nums; }
.cal-d:hover { background: rgba(47, 123, 246, .1); }
.cal-d.today { box-shadow: inset 0 0 0 1.5px var(--theme); color: var(--theme); font-weight: 600; }
.cal-d.on { background: var(--theme); color: #fff; font-weight: 600; box-shadow: none; }
.cal-f { display: flex; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(60, 60, 67, .08); }
:root[data-theme="dark"] .cal-pop { background: rgba(40, 40, 46, .84); border-color: rgba(255, 255, 255, .1); box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
:root[data-theme="dark"] .cal-f { border-color: rgba(255, 255, 255, .08); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cal-pop { background: rgba(40, 40, 46, .84); border-color: rgba(255, 255, 255, .1); } }
td .date-in { min-width: 120px; }

.pop-item.danger { color: var(--red, #e5484d); }

/* thumbnails / detailed list switch (document library) */
.view-seg { display: inline-flex; padding: 2px; gap: 2px; border-radius: 10px; background: rgba(118, 118, 128, .1); }
.view-seg button { width: 30px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.view-seg button.on { background: rgba(255, 255, 255, .85); color: var(--theme); box-shadow: 0 1px 3px rgba(20, 30, 60, .12); }
:root[data-theme="dark"] .view-seg button.on { background: rgba(255, 255, 255, .14); }

/* links under the sign-in card: forgot password / back */
.login-links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 4px; font-size: 13px; }
.login-links a { color: var(--theme); text-decoration: none; }
.login-links a:hover { text-decoration: underline; }

/* password shown under its field (the field itself stays a password field) */
.pw-show { margin-top: 5px; padding: 4px 8px; border-radius: 8px; font: 13px/1.5 ui-monospace, Consolas, monospace; letter-spacing: .04em; background: rgba(118, 118, 128, .08); word-break: break-all; }
.pw-sp { color: var(--muted); }
.pw-caps { margin-top: 4px; font-size: 12px; color: var(--orange); }

/* a record opened to read (ViewEdit): its fields read as plain text until "Sửa" */
fieldset.ve { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.ve:disabled .inp, fieldset.ve:disabled .sel-data { background: transparent !important; border-color: transparent !important; box-shadow: none !important;
  color: var(--text) !important; -webkit-text-fill-color: var(--text); opacity: 1; cursor: default; padding-left: 0; }
fieldset.ve:disabled .sel-c, fieldset.ve:disabled .date-btn, fieldset.ve:disabled .sel-data .x, fieldset.ve:disabled .sel-data > svg { display: none; }
fieldset.ve:disabled .inp::placeholder { color: transparent; }
fieldset.ve:disabled .chk { opacity: 1; cursor: default; }
fieldset.ve:disabled .req { display: none; }

/* record header: a few facts of one kind in one cell (payment account, contacts) */
.kv-lines { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; align-items: baseline; }
.kv-lines .k { font-size: 12px; color: var(--muted); }
.kv-lines .mono { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.ct-lines { display: flex; flex-direction: column; gap: 4px; }
.ct-lines .ct { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.ct-lines .ct .icon-btn { margin-left: auto; opacity: .55; }
.ct-lines .ct:hover .icon-btn { opacity: 1; }

.rm-c.rm-2 { grid-column: span 2; }
.kv-lines .mono { white-space: nowrap; }

/* column list of the "Cột" menu: a grip to drag a row up / down, a line where it lands */
.pop-row { position: relative; }
.pop-row .grip { display: grid; place-items: center; width: 22px; height: 26px; margin-right: 2px; border-radius: 6px; color: var(--muted); cursor: grab; touch-action: none; flex: none; }
.pop-row .grip:hover, .pop-row .grip:focus-visible { color: var(--theme); background: rgba(47, 123, 246, .08); outline: none; }
.pop-row.dragging { opacity: .45; }
body.col-moving .pop-row .grip { cursor: grabbing; }
.pop-row.drop-before::before, .pop-row.drop-after::after { content: ''; position: absolute; left: 6px; right: 6px; height: 2px; border-radius: 2px; background: var(--theme); }
.pop-row.drop-before::before { top: -1px; }
.pop-row.drop-after::after { bottom: -1px; }

/* smooth reordering of the column list: others slide, the held row floats and follows the pointer */
.pop-cols.sorting .pop-row { transition: transform .16s cubic-bezier(.2, .8, .2, 1); }
.pop-cols.sorting .pop-row.lifted { transition: none; z-index: 2; background: var(--surface, rgba(255, 255, 255, .92)); box-shadow: 0 8px 22px rgba(20, 30, 60, .18), 0 1px 3px rgba(20, 30, 60, .1); }
.pop-cols.sorting .pop-row.lifted.settling { transition: transform .16s cubic-bezier(.2, .8, .2, 1), box-shadow .16s; box-shadow: none; }
.pop-cols.sorting .pop-row:hover { background: transparent; }
.pop-cols.sorting .pop-row.lifted:hover { background: var(--surface, rgba(255, 255, 255, .92)); }
:root[data-theme="dark"] .pop-cols.sorting .pop-row.lifted { background: rgba(48, 50, 60, .96); box-shadow: 0 8px 22px rgba(0, 0, 0, .45); }
.pop-cols.sorting { user-select: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pop-cols.sorting .pop-row.lifted { background: rgba(48, 50, 60, .96); box-shadow: 0 8px 22px rgba(0, 0, 0, .45); } }

/* 16/10 audit: a list column empty on every row of the page is not shown (ui.js ListView marks its cells) */
.grid .col-empty { display: none; }
/* 16/10 audit: the record header keeps two columns of cells on a phone instead of one long column */
@media (max-width: 600px) { .rm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rm-c.rm-2 { grid-column: 1 / -1; } }
/* 16/10: the preview's split print button (main part prints, menu = paper size) */
.print-paper { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; white-space: nowrap; }
.paper-pop .pop-item { color: var(--text); font-size: 13px; }
.paper-pop .pop-item.on { color: var(--theme); }
.split-btn { display: inline-flex; align-items: stretch; }
.split-btn > .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.split-btn .split-caret { border-top-left-radius: 0; border-bottom-left-radius: 0; padding: 0 9px; margin-left: 1px; height: 100%; }
/* the paper menu opens over the white sheet: a firmer glass so its items stay readable */
.pop.paper-pop { background: rgba(255, 255, 255, .92); }
:root[data-theme="dark"] .pop.paper-pop { background: rgba(36, 37, 42, .95); }
.print-h > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 16/10: the preview's free "Ghi chú" (printed under the table, not saved) */
.print-note { display: flex; align-items: flex-start; gap: 10px; padding: 0 12px 10px 16px; }
.print-note .pn-l { display: inline-flex; align-items: center; gap: 4px; flex: none; padding-top: 7px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.print-note textarea { flex: 1; min-width: 0; min-height: 34px; max-height: 120px; resize: vertical; }
@media (max-width: 600px) { .print-h > b { font-size: 12.5px; } .print-paper .split-btn > .btn:first-child { padding: 0 9px; } }
/* DocPeek (docpeek.js): a record's files from its number — a reading preview beside the number (desktop), paperclip + card /
   sheet (touch). --dp-w / --dp-h: the large preview's box, set by docpeek.js from the room beside the number */
.pop.dp-card { position: fixed; right: auto; z-index: 350; min-width: 0; width: calc(var(--dp-w, 420px) + 18px); max-width: calc(100vw - 16px); max-height: calc(100vh - 16px);
  padding: 8px; border-radius: 14px; box-shadow: var(--shadow-pop); display: flex; flex-direction: column; gap: 7px; animation: dp-in .16s ease-out; cursor: default; }
@keyframes dp-in { from { opacity: 0; transform: scale(.985); } }
.dp-main { position: relative; display: block; flex: none; width: 100%; height: var(--dp-h, 520px); padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: rgba(127, 127, 127, .1); cursor: zoom-in; }
.dp-main:focus-visible { outline: 2px solid var(--theme); outline-offset: 2px; }
.dp-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.dp-main .dp-hi { opacity: 0; transition: opacity .18s; }
.dp-main .dp-hi.on { opacity: 1; }
.dp-spin { position: absolute; top: 10px; right: 10px; }
.dp-ic { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px; font-size: 12.5px; color: var(--text-2); text-align: center; }
.dp-ic small { color: var(--muted); }
.dp-fn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-cap { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 0 2px; font-size: 13px; line-height: 1.4; }
.dp-t, .dp-s { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-s { color: var(--text-2); }
.dp-n { flex: none; margin-left: auto; padding-left: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dp-strip { position: relative; display: flex; gap: 6px; margin: -2px; padding: 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.dp-th { position: relative; width: 46px; height: 58px; flex: none; padding: 0; border-radius: 7px; border: 1px solid var(--glass-border); background: rgba(127, 127, 127, .08); overflow: hidden;
  display: grid; place-items: center; cursor: zoom-in; opacity: .7; transition: opacity .12s, border-color .12s; }
.dp-th img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.dp-th .doc-ic { width: 22px; height: 26px; font-size: 8px; }
.dp-th:hover, .dp-th.on { opacity: 1; }
.dp-th.on { border-color: var(--theme); box-shadow: 0 0 0 1px var(--theme); }
.dp-th:focus-visible { outline: none; opacity: 1; border-color: var(--theme); box-shadow: 0 0 0 2px rgba(47, 123, 246, .35); }
.dp-more { position: absolute; inset: auto 3px 3px auto; padding: 1px 5px; border-radius: 8px; font-size: 10.5px; font-weight: 600; color: #fff; background: rgba(20, 22, 40, .62); }
:root[data-theme="dark"] .dp-main { background: rgba(255, 255, 255, .05); }
:root[data-theme="dark"] .dp-th { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .08); }
.dp-clip { display: inline-flex; align-items: center; gap: 1px; margin-left: 4px; padding: 1px 5px; min-height: 20px; border: 0; border-radius: 9px; font-size: 11px; line-height: 1; color: var(--theme); background: rgba(47, 123, 246, .1); vertical-align: middle; cursor: pointer; }
.dp-sheet-mask { position: fixed; inset: 0; z-index: 350; background: rgba(20, 22, 40, .14); display: flex; align-items: flex-end; animation: fade .12s; }
.pop.dp-card.sheet { position: relative; left: 0; top: 0; width: 100%; max-width: none; max-height: none; border-radius: 16px 16px 0 0; padding: 10px 14px calc(14px + env(safe-area-inset-bottom)); }
.dp-card.sheet .dp-main { height: min(62vh, 140vw); }
.dp-card.sheet .dp-th { width: 52px; height: 66px; }
.dp-sh-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* ===== 16/10: the "Tổng" row of every table (ListView, MergeTable): the table's own glass, a line above, bold figures. It stays at
   the bottom of a list that scrolls inside its box (app.css: tfoot sticky); a table the page scrolls simply ends with it ===== */
.grid tfoot td { border-top: 1px solid var(--line); font-weight: 600; font-variant-numeric: tabular-nums; }
.grid tfoot td.num { white-space: nowrap; }
.grid tfoot td.sum-l { white-space: normal; line-height: 1.3; }
.grid tfoot .sum-n { font-weight: 400; font-size: 12px; color: var(--muted); white-space: nowrap; }
.grid .sum-u, .vtree .sum-u { margin-left: 4px; font-weight: 400; font-size: 12px; color: var(--muted); }
.grid .sum-mix, .vtree .sum-mix { font-weight: 400; color: var(--muted); cursor: help; }
/* the label moves to the tick column only when the first column is hidden as empty */
.grid tfoot .sum-ck { display: none; }
.grid tfoot tr.sum-ck-on .sum-ck { display: inline; }
/* MergeTable: a light "Cộng" row closes a parent with several rows (no tint: a dashed line above it, figures in semibold) */
.tree-tbl tr.mt-sub td { border-top: 1px dashed var(--line); font-weight: 600; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tree-tbl tr.mt-sub td.num { white-space: nowrap; }
.tree-tbl tr.mt-sub td.sum-l { font-weight: 500; color: var(--muted); }
/* a click on a child row opens it: the parent's merged cells stay clear and are not a click target */
.tree-tbl tr.click td.tr-c { cursor: default; }
/* !important: the dark ":root[data-theme=dark] .grid tr.click:hover td" rule is more specific and painted the merged cell too
   (owner 17/10/2026: hovering an SO row coloured the whole first column) */
.tree-tbl tr.click:hover td.tr-c:not(.frz):not([rowspan="1"]) { background: transparent !important; }
.tree-tbl tr.click:hover td.tr-c.frz { background: rgba(255, 255, 255, .16); }
:root[data-theme="dark"] .tree-tbl tr.click:hover td.tr-c.frz { background: rgba(34, 34, 38, .24); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tree-tbl tr.click:hover td.tr-c.frz { background: rgba(34, 34, 38, .24); } }
/* MergeTable toolbar (period, Xuất, Xem trước & in, search): above the table, inside the page's own padding */
.toolbar.mt-bar { padding: 0 0 10px; }
@media (max-width: 820px) { .toolbar.mt-bar { padding: 0 0 8px; } }
/* phone cards (VTree): a child row that opens, the "Cộng" of a parent, the "Tổng" card at the end */
.vt-leaf.click { cursor: pointer; border-radius: 10px; }
.vt-leaf.click:active, .vt-leaf.click:hover { background: rgba(47, 123, 246, .05); }
.vt-sum { padding: 6px 4px; display: flex; flex-direction: column; gap: 3px; border-top: 1px dashed var(--line); font-weight: 600; }
.vt-sum .vt-k { font-weight: 500; }
.vt-total { display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 14px; font-weight: 600;
  background: rgba(255, 255, 255, .34); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); }
.vt-total .vt-k { font-weight: 500; }
:root[data-theme="dark"] .vt-total { background: rgba(40, 40, 44, .55); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vt-total { background: rgba(40, 40, 44, .55); } }
/* a merged table printed as on screen (printRecord): no tools, no sliding text, no pinned glass */
.print-rec .th-tools, .print-rec .col-rs, .print-rec .mt-chips, .print-rec .mt-bar { display: none !important; }
.print-rec .tree-tbl td.tr-c > .tr-in, .print-rec .tree-tbl thead th { transform: none !important; }
.print-rec .grid .frz, .print-rec .grid tfoot td { position: static !important; background: transparent !important; }
.print-rec .mt-print-scope { margin: 0 0 8px; color: #333; font-style: italic; }
@media print { .tree-tbl td.tr-c > .tr-in { transform: none !important; } }
/* ===== R48 Định mức BOM: the quick picks of a product line, one folding section per line (cards as before), "Ngừng dùng" last ===== */
.bom-chips { margin: 0 0 6px; }
.bom-chips .chip { border: 1px solid var(--line); background: rgba(255, 255, 255, .38); cursor: pointer; font: inherit; font-size: 12.5px; line-height: 1.5; padding: 3px 11px; color: var(--text-2); }
.bom-chips .chip:hover { color: var(--theme); border-color: var(--theme-line); }
.bom-chips .chip:focus-visible { outline: 2px solid var(--theme); outline-offset: 1px; }
.bom-chips .chip.on { border-color: var(--theme-line); background: rgba(0, 184, 153, .12); color: var(--theme); font-weight: 600; }
.bom-chips .cnt { margin-left: 6px; color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 400; }
.bom-chips .chip.on .cnt { color: inherit; }
.bom-sec { margin: 0 0 6px; }
.bom-sec-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; padding: 9px 4px 7px; margin: 0 0 8px; background: none; border: 0;
  border-bottom: 1px solid var(--line); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.bom-sec-h b { font-size: 14.5px; font-weight: 600; }
.bom-sec-h:hover b { color: var(--theme); }
.bom-sec-h:focus-visible { outline: 2px solid var(--theme); outline-offset: 2px; border-radius: 8px; }
.bom-sec-c { font-size: 12px; color: var(--muted); letter-spacing: .02em; }
.bom-sec-n { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.bom-sec.stop .bom-sec-h b { color: var(--text-2); font-weight: 500; }
.bom-sec > .bom-cards { margin-bottom: 8px; }
:root[data-theme="dark"] .bom-chips .chip:not(.on) { background: rgba(255, 255, 255, .05); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bom-chips .chip:not(.on) { background: rgba(255, 255, 255, .05); } }
@media (max-width: 820px) { .tools-r.bom-tools { flex-wrap: wrap; } .tools-r.bom-tools .search-box { order: -1; flex: 1 1 100%; } }
@media (max-width: 420px) { .bom-cards { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================
   Glass pass 2 (owner, 16/10/2026: "toàn bộ themes ấy, trong hơn nữa"): every surface about 40% less white / less dark than the
   first glass pass; the blur behind stays (it is what keeps text readable on clear glass). Kept last so it wins over the
   per-component rules above. "Reduced transparency" in the OS settings still gets solid surfaces (rules further up).
   ===================================================================== */
:root { --glass: rgba(255, 255, 255, .08); --glass-border: rgba(255, 255, 255, .42); --panel: rgba(255, 255, 255, .26); --panel-2: rgba(246, 247, 253, .3); --readonly: rgba(236, 238, 248, .32); }
/* less frosting: the wallpaper shows through instead of melting into milky white */
.side::before, .pane::before { -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); }
.dialog.drawer::before, .dialog::before, .viewer::before { -webkit-backdrop-filter: blur(10px) saturate(170%); backdrop-filter: blur(10px) saturate(170%); }
.kpi-mini, .wg, .doc-card, .imp-tile, .imp-card, .nt-card, .board-card, .task-sum { -webkit-backdrop-filter: blur(8px) saturate(160%); backdrop-filter: blur(8px) saturate(160%); }
.rm-grid { background: rgba(255, 255, 255, .1); }
.plan-row { background: rgba(255, 255, 255, .12); }
.dialog .grid th, .dialog .tbl th, .dialog .sub th, .dialog table th { background: rgba(255, 255, 255, .22); }
:root[data-theme="dark"] .rm-grid, :root[data-theme="dark"] .plan-row { background: rgba(44, 44, 48, .14); }
:root[data-theme="dark"] .dialog .grid th, :root[data-theme="dark"] .dialog .tbl th, :root[data-theme="dark"] .dialog table th { background: rgba(40, 40, 44, .36); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rm-grid, :root:not([data-theme="light"]) .plan-row { background: rgba(44, 44, 48, .14); } :root:not([data-theme="light"]) .dialog .grid th, :root:not([data-theme="light"]) .dialog .tbl th, :root:not([data-theme="light"]) .dialog table th { background: rgba(40, 40, 44, .36); } }
:root[data-theme="dark"] { --glass: rgba(24, 24, 28, .14); --glass-border: rgba(255, 255, 255, .06); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --glass: rgba(24, 24, 28, .14); --glass-border: rgba(255, 255, 255, .06); } }
.kpi-mini, .wg, .doc-card, .imp-tile, .imp-card, .nt-card, .board-card, .task-sum { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .45); }
.grid-wrap, .tbl-box, .sub { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .4); }
.grid th, .tbl th, .sub th { background: rgba(255, 255, 255, .2); }
.grid td.sticky-l { background: rgba(255, 255, 255, .06); }
.grid th.sticky-l, .grid tfoot td { background: rgba(255, 255, 255, .2); }
.rec-side { background: rgba(255, 255, 255, .04); }
.btn { background: rgba(255, 255, 255, .22); }
.btn:hover { background: rgba(255, 255, 255, .48); }
.dialog::before, .viewer::before { background: rgba(255, 255, 255, .32); }
.pop, .cf-pop, .toast { background: rgba(255, 255, 255, .42); }
.form-foot { background: rgba(255, 255, 255, .24); }
:root[data-theme="dark"] .kpi-mini, :root[data-theme="dark"] .wg, :root[data-theme="dark"] .doc-card, :root[data-theme="dark"] .board-card, :root[data-theme="dark"] .task-sum,
:root[data-theme="dark"] .grid-wrap, :root[data-theme="dark"] .tbl-box, :root[data-theme="dark"] .sub { background: rgba(44, 44, 48, .12); border-color: rgba(255, 255, 255, .05); }
:root[data-theme="dark"] .grid th, :root[data-theme="dark"] .tbl th, :root[data-theme="dark"] .grid th.sticky-l, :root[data-theme="dark"] .grid tfoot td { background: rgba(40, 40, 44, .36); }
:root[data-theme="dark"] .grid td.sticky-l { background: rgba(34, 34, 38, .12); }
:root[data-theme="dark"] .dialog::before, :root[data-theme="dark"] .viewer::before { background: rgba(30, 30, 34, .42); }
:root[data-theme="dark"] .pop, :root[data-theme="dark"] .cf-pop, :root[data-theme="dark"] .toast { background: rgba(40, 40, 44, .48); }
:root[data-theme="dark"] .form-foot { background: rgba(30, 30, 34, .36); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kpi-mini, :root:not([data-theme="light"]) .wg, :root:not([data-theme="light"]) .doc-card, :root:not([data-theme="light"]) .board-card, :root:not([data-theme="light"]) .task-sum,
  :root:not([data-theme="light"]) .grid-wrap, :root:not([data-theme="light"]) .tbl-box, :root:not([data-theme="light"]) .sub { background: rgba(44, 44, 48, .12); border-color: rgba(255, 255, 255, .05); }
  :root:not([data-theme="light"]) .grid th, :root:not([data-theme="light"]) .tbl th, :root:not([data-theme="light"]) .grid th.sticky-l, :root:not([data-theme="light"]) .grid tfoot td { background: rgba(40, 40, 44, .36); }
  :root:not([data-theme="light"]) .dialog::before, :root:not([data-theme="light"]) .viewer::before { background: rgba(30, 30, 34, .42); }
  :root:not([data-theme="light"]) .pop, :root:not([data-theme="light"]) .cf-pop, :root:not([data-theme="light"]) .toast { background: rgba(40, 40, 44, .48); }
  :root:not([data-theme="light"]) .form-foot { background: rgba(30, 30, 34, .36); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: rgba(255, 255, 255, .9); }
  .dialog::before, .viewer::before { background: rgba(255, 255, 255, .96); }
  .kpi-mini, .wg, .grid-wrap, .tbl-box, .sub { background: rgba(255, 255, 255, .9); }
  :root[data-theme="dark"] { --glass: rgba(28, 30, 44, .97); }
  :root[data-theme="dark"] .dialog::before, :root[data-theme="dark"] .viewer::before { background: rgba(28, 30, 42, .98); }
  :root[data-theme="dark"] .kpi-mini, :root[data-theme="dark"] .wg, :root[data-theme="dark"] .doc-card, :root[data-theme="dark"] .board-card, :root[data-theme="dark"] .task-sum,
  :root[data-theme="dark"] .grid-wrap, :root[data-theme="dark"] .tbl-box, :root[data-theme="dark"] .sub { background: rgba(36, 38, 54, .96); }
}

/* =====================================================================
   R64 (owner 16/10/2026): phone toolbars ("Lọc" sheet + chips + Tổng card + one-row pager), the record side column folding to
   a slim rail, record drawers wider by default. Same clear glass as "Glass pass 2" above (surfaces ~12–32% white, blur 8–10px).
   ===================================================================== */
/* the record's side column (Lưu ý · Quy trình · Lịch sử · Bình luận) folds to a rail */
.rec-side { position: relative; }
.rec-side .side-fold { position: absolute; top: 6px; right: 8px; z-index: 3; opacity: .5; }
.rec-side .side-fold:hover, .rec-side .side-fold:focus-visible { opacity: 1; }
.rec-body.side-off { grid-template-columns: minmax(0, 1fr) 40px; }
.rec-side.rec-rail { padding: 0; min-height: 0; background: rgba(255, 255, 255, .04); }
.rail-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; padding: 14px 0; border: 0; background: transparent; color: var(--text-2); cursor: pointer; font: inherit; }
.rail-btn:hover, .rail-btn:focus-visible { color: var(--theme); background: rgba(255, 255, 255, .1); outline: none; }
.rail-l { writing-mode: vertical-rl; font-size: 12.5px; letter-spacing: .02em; white-space: nowrap; }
@container rec (max-width: 780px) { .rec-body.side-off { grid-template-columns: 1fr; } .rec-side.rec-rail { min-height: 0; } .rail-btn { flex-direction: row; justify-content: center; padding: 10px; } .rail-l { writing-mode: horizontal-tb; } }
@media (max-width: 820px) { .rec-body.side-off { grid-template-columns: 1fr; } .rec-side.rec-rail { min-height: 0; } .rail-btn { flex-direction: row; justify-content: center; padding: 10px; } .rail-l { writing-mode: horizontal-tb; } }
/* phones: one "Lọc" button next to the search box, its badge the number of filters on */
.f-btn { flex: none; }
.f-btn .f-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: var(--theme); color: #fff; font-size: 11px; font-weight: 600; line-height: 1; }
.f-btn.on { color: var(--theme); border-color: var(--theme-line); }
.toolbar.ph-bar .tools-r { flex-wrap: nowrap; width: 100%; margin-left: 0; }
.toolbar.ph-bar .tools-r .search-box { flex: 1 1 auto; width: auto; min-width: 0; }
/* the bottom sheet with the pickers: clear glass, stays mounted while closed */
.fsheet-mask { position: fixed; inset: 0; z-index: 300; display: flex; align-items: flex-end; background: rgba(20, 22, 40, .14); visibility: hidden; opacity: 0; transition: opacity .15s, visibility 0s .15s; }
.fsheet-mask.open { visibility: visible; opacity: 1; transition: opacity .15s; }
.fsheet { position: relative; width: 100%; max-height: 78vh; overflow: auto; border-radius: 18px 18px 0 0; padding: 10px 14px calc(16px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .32); border: 1px solid rgba(255, 255, 255, .42); border-bottom: 0; -webkit-backdrop-filter: blur(10px) saturate(170%); backdrop-filter: blur(10px) saturate(170%);
  box-shadow: 0 -12px 40px rgba(20, 22, 40, .16); transform: translateY(100%); transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.fsheet-mask.open .fsheet { transform: none; }
.fsheet-h { display: flex; align-items: center; gap: 8px; padding: 2px 0 10px; }
.fsheet-b { display: flex; flex-direction: column; gap: 8px; }
.fsheet-b > .period, .fsheet-b > .so-ord-pick, .fsheet-b > .st-pick { width: 100%; display: flex; flex-wrap: wrap; align-items: center; }
.fsheet-b > .period .inp, .fsheet-b > .period select.inp { flex: 1 1 auto; min-width: 0; width: auto; max-width: none; }
:root[data-theme="dark"] .fsheet { background: rgba(30, 30, 34, .42); border-color: rgba(255, 255, 255, .06); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fsheet { background: rgba(30, 30, 34, .42); border-color: rgba(255, 255, 255, .06); } }
/* the Tổng of a list on a phone: a card under the table (row count and every figure that adds up), one-row pager */
.ph-total { display: flex; flex-direction: column; gap: 3px; margin: 8px 12px 0; padding: 9px 12px; border: 1px solid rgba(255, 255, 255, .42); border-radius: 14px; font-weight: 600;
  background: rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(8px) saturate(160%); backdrop-filter: blur(8px) saturate(160%); }
.ph-total .vt-k { font-weight: 500; }
:root[data-theme="dark"] .ph-total { background: rgba(40, 40, 44, .36); border-color: rgba(255, 255, 255, .06); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ph-total { background: rgba(40, 40, 44, .36); border-color: rgba(255, 255, 255, .06); } }
@media (max-width: 767px) {
  .list .grid tfoot { display: none; }
  .grid-foot { flex-wrap: nowrap; gap: 6px; padding: 8px 12px; }
  .grid-foot .gf-n.ph-hide { display: none; }
  .grid-foot > .btn { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .grid-foot .pager { gap: 2px; flex: none; }
  .grid-foot .pager button, .grid-foot .pager .pg { width: 26px; min-width: 26px; height: 26px; padding: 0 4px; }
}
@media (prefers-reduced-transparency: reduce) {
  .fsheet { background: rgba(255, 255, 255, .96); }
  :root[data-theme="dark"] .fsheet { background: rgba(28, 30, 42, .98); }
  .ph-total { background: rgba(255, 255, 255, .9); }
}

/* ORD drawer › Các đợt nhận thành phẩm: the SO line in one left cell, deliveries beside it (fits the drawer) */
.ord-rcp-so { min-width: 136px; max-width: 210px; white-space: normal; line-height: 1.35; }
.ord-rcp-so .small { margin-top: 2px; }
/* drawer tables: the filter / pin icons float over the header instead of widening every column (they show on hover, or when the
   column is filtered / pinned), and cells are a little tighter — so a record's tables fit its drawer */
.dialog .grid th { position: relative; }
.dialog .grid th .th-in { gap: 4px; }
.dialog .grid th .th-tools { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); padding: 1px 2px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .12s; background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dialog .grid th:hover .th-tools, .dialog .grid th:focus-within .th-tools, .dialog .grid th .th-tools:has(.cf.on) { opacity: 1; pointer-events: auto; }
:root[data-theme="dark"] .dialog .grid th .th-tools { background: rgba(30, 30, 36, .55); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dialog .grid th .th-tools { background: rgba(30, 30, 36, .55); } }
.dialog .grid th, .dialog .grid td { padding-left: 7px; padding-right: 7px; }
@media (hover: none) { .dialog .grid th .th-tools { position: static; transform: none; opacity: 1; pointer-events: auto; background: transparent; } }
/* a unit after a summed figure always has its space ("660.000 Chai", never "660.000Chai") — phone Tổng cards and any other place */
.sum-u { margin-left: 4px; }

/* owner 17/10/2026: a cell with several facts lists them as aligned label – value lines (KvList in ui.js) */
.kv-cell { margin-top: 6px; font-size: 13px; gap: 2px 10px; }
.kv-cell:first-child { margin-top: 0; }
.kv-num .v { text-align: right; font-variant-numeric: tabular-nums; }
/* owner 18/10/2026 ("đưa số cùng kích thước như chữ"): in a table cell a list's values are the size of its labels */
td .kv-cell .v, .vt-v .kv-cell .v { font-size: 12px; }
.kv-row { display: contents; }
/* a label always reads from the left, also in a right-aligned number column or the phone card's value side */
.kv-cell .k { white-space: nowrap; text-align: left; }
.kv-cell .chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.kv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
/* in a computer table a value stays on one line and its column grows to fit it (the value's width counts: no min-width: 0), so a
   figure or a factory PXK number is never cut off or run into the next column; only a row of chips wraps */
@media (min-width: 768px) { td .kv-cell .v { white-space: nowrap; } td .kv-cell .v .chips { white-space: normal; } }
/* on a phone card the list takes the full width under its heading (never squeezed beside it) and a long value wraps */
.vt-kv:has(> .vt-v > .kv-cell) { flex-direction: column; gap: 2px; }
.vt-kv:has(> .vt-v > .kv-cell) > .vt-v { text-align: left; }
.vt-v .kv-cell .v { overflow-wrap: anywhere; }

/* 17/10/2026 (owner, H3): low stock is only a small amber ★ beside the figure, its why behind a tap (LowStar in ui.js) — never a
   band, a stripe or a line of text. Theme tokens, so it reads in light and dark alike */
.low-star { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 4px; padding: 0; border: 0; border-radius: 6px; flex: none;
  background: transparent; color: var(--yellow); font-size: 13px; line-height: 1; vertical-align: 1px; cursor: pointer; transition: background .12s; }
.low-star:hover, .low-star.on { background: var(--yellow-soft); }
.low-star:focus-visible { outline: 2px solid var(--yellow); outline-offset: 1px; }
.low-pop .low-pop-h { display: block; margin-bottom: 6px; font-weight: 600; color: var(--text); }
.low-pop .kv-cell { margin-top: 0; }
/* GIAO NHẬN: "•" where the PXK number is not written yet */
.pxk-dot { display: inline-block; min-width: 10px; color: var(--orange); font-weight: 700; text-align: center; }
/* GIAO NHẬN trees (Chuyến → PXK → mã hàng → hóa đơn): a child row is set in from its parent, by depth (--gn-l, 1 at first); on a
   cell or a row the indent adds to the cell's own padding (and wins over the tighter cells of a drawer) */
.gn-child { padding-left: calc(16px * var(--gn-l, 1)); }
.grid td.gn-child, .tbl td.gn-child, .grid tr.gn-child > td:first-child, .tbl tr.gn-child > td:first-child { padding-left: calc(12px + 16px * var(--gn-l, 1)); }
@media (max-width: 767px) {
  .gn-child { padding-left: calc(10px * var(--gn-l, 1)); }
  .grid td.gn-child, .tbl td.gn-child, .grid tr.gn-child > td:first-child, .tbl tr.gn-child > td:first-child { padding-left: calc(10px + 10px * var(--gn-l, 1)); }
}
/* Kết đơn / Kết lô (CloseAsk in ui.js): what is still open is a warning list; the button never waits on it */
.close-intro { margin: 0 0 10px; }
.close-warn ul { margin: 0; padding-left: 18px; }
.close-warn li + li { margin-top: 3px; }
.alert-bar.close-ok { background: var(--green-soft); color: var(--green-text, var(--green)); }

/* =====================================================================
   Colour palette "Tím hồng" (data-palette="vibe"; owner 17/10/2026 from vibelaicuocdoi.com: "màu trong rất đẹp"): a plum night
   with a mauve sky and a pink glow, see-through dark glass with a light rim, warm cream text, pink / lavender accents, cream pill
   buttons. Always shown dark (main.js / theme-init.js force data-theme="dark"); the light block below only serves a printout or a
   page opened before the scripts run.
   ===================================================================== */
:root[data-palette="vibe"] {
  --theme: #A2477E; --theme-hover: #8C3A6C; --theme-soft: rgba(162, 71, 126, .1); --theme-line: rgba(162, 71, 126, .32);
  --hover: rgba(162, 71, 126, .06); --selected: rgba(162, 71, 126, .12);
  --text: #2A1020; --text-2: #5A3B4E; --muted: #85697A; --page: #F7F1F5;
  --violet: #7A4FC0; --violet-soft: #F0E7FB;
  --glass: rgba(255, 255, 255, .58); --glass-strong: rgba(255, 255, 255, .86); --glass-border: rgba(255, 255, 255, .8);
  --bg-image: radial-gradient(70vw 42vw at 50% -12%, rgba(201, 170, 224, .55), transparent 70%), radial-gradient(60vw 40vw at 50% 112%, rgba(244, 182, 210, .55), transparent 70%),
    linear-gradient(180deg, #F3ECF6, #F8F1F5 60%, #FBF3F6);
  --bar-a: #F4B6D2; --bar-b: #A2477E;
}
:root[data-palette="vibe"][data-theme="dark"] {
  --theme: #F4B6D2; --theme-hover: #F8CBE0; --theme-soft: rgba(244, 182, 210, .14); --theme-line: rgba(244, 182, 210, .38);
  --hover: rgba(244, 182, 210, .07); --selected: rgba(244, 182, 210, .14);
  --text: #F1ECE6; --text-2: #CFC4CB; --muted: #A2949E; --placeholder: #7A6C77;
  --page: #08060A; --panel: rgba(18, 14, 21, .66); --panel-2: rgba(25, 20, 29, .72); --readonly: rgba(255, 255, 255, .06);
  --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .06); --input: rgba(255, 255, 255, .16);
  --violet: #C9A7F0; --violet-soft: rgba(201, 167, 240, .15);
  --glass: rgba(14, 11, 17, .66); --glass-strong: rgba(22, 18, 26, .92); --glass-border: rgba(255, 255, 255, .12);
  --glass-shadow: 0 10px 34px rgba(0, 0, 0, .45);
  --bg-image: radial-gradient(80vw 46vw at 50% -14%, rgba(120, 84, 140, .34), transparent 70%), radial-gradient(56vw 34vw at 50% 108%, rgba(190, 96, 150, .2), transparent 70%),
    linear-gradient(180deg, #170F1C 0%, #0C090F 38%, #08060A 100%);
  --bar-a: #F4B6D2; --bar-b: #C9A7F0;
}
/* buttons as on the site: the main one a cream pill with dark ink, the others see-through dark with a light rim */
:root[data-palette="vibe"][data-theme="dark"] .btn.primary { background: #F1ECE6; color: #0D0B10; box-shadow: none; }
:root[data-palette="vibe"][data-theme="dark"] .btn.primary:hover { background: #fff; color: #0D0B10; }
:root[data-palette="vibe"][data-theme="dark"] .btn:not(.primary):not(.text):not(.link) { background: rgba(21, 18, 25, .55); border-color: rgba(255, 255, 255, .3); }
:root[data-palette="vibe"][data-theme="dark"] .mtab.on { background: rgba(244, 182, 210, .16); color: #F8CBE0; }
/* the blue-grey dark surfaces of the base theme take the plum tint (darker since 17/10 evening) */
:root[data-palette="vibe"][data-theme="dark"] .grid th { background: rgba(24, 19, 28, .96); }
:root[data-palette="vibe"][data-theme="dark"] .grid td.sticky-l { background: rgba(17, 13, 20, .97); }
:root[data-palette="vibe"][data-theme="dark"] .grid tfoot td { background: rgba(21, 17, 25, .97); }
:root[data-palette="vibe"][data-theme="dark"] .dialog, :root[data-palette="vibe"][data-theme="dark"] .viewer { background: rgba(15, 12, 18, .98); }
:root[data-palette="vibe"][data-theme="dark"] .dialog::before, :root[data-palette="vibe"][data-theme="dark"] .viewer::before { background: rgba(17, 13, 20, .86); }
:root[data-palette="vibe"] .avatar, :root[data-palette="vibe"] .app-icon { background: linear-gradient(160deg, #F4B6D2, #A2477E); }
:root[data-palette="vibe"][data-theme="dark"] .avatar, :root[data-palette="vibe"][data-theme="dark"] .app-icon { background: linear-gradient(160deg, #F4B6D2, #C9A7F0); color: #2A1020; }
:root[data-palette="vibe"] .prog-bar { background: linear-gradient(90deg, #F4B6D2, #C9A7F0); }

/* "Tím hồng" wears the watercolour flowers of "Hoa xanh" too (owner 17/10: "cho hoa xanh vào tím hồng"), toned to one pink-mauve
   shade so they sit on the plum night (the same images, recoloured by a filter: no second copy of the drawings) */
:root[data-palette="vibe"] body::before, :root[data-palette="vibe"] body::after { opacity: .5; filter: grayscale(1) sepia(1) hue-rotate(280deg) saturate(2.2) brightness(.95); }
:root[data-palette="vibe"] .pane::before, :root[data-palette="vibe"] .side::before { filter: grayscale(1) sepia(1) hue-rotate(280deg) saturate(2) brightness(.9); opacity: .55; }

/* Wide tree tables that must fit the pane (KẾ HOẠCH MUA, GIAO NHẬN bao bì; sweep 17/10 at 1596px): the wrapper is no box of its own;
   a long header wraps onto two lines and the filter / pin icons drop under it when the column is narrow, instead of pushing the last
   columns past the right edge */
.fit-cols { display: contents; }
.fit-cols .tree-tbl thead th { white-space: normal; }
.fit-cols .tree-tbl thead th .th-in { flex-wrap: wrap; row-gap: 2px; }
.fit-cols .tree-tbl thead th .th-l { flex: 1 1 auto; min-width: min-content; white-space: normal; line-height: 16px; }
/* owner 18/10/2026 ("căn dòng tiêu đề cũng lỗi"): the icons dropping under the label in a narrow column lifted that label above its
   neighbours, and a wrapped number header did not line up with its figures. Every header sits on the bottom line, the icons stay
   beside the label (the label wraps instead), a number column's header is right-aligned over its figures */
/* owner 18/10/2026 ("căn lề trên dưới trái phải như này à?"): one-line and two-line headings sit on one middle line */
.fit-cols .tree-tbl thead th { vertical-align: middle; }
.fit-cols .tree-tbl thead th .th-in { flex-wrap: nowrap; align-items: flex-end; }
.fit-cols .tree-tbl thead th.num .th-l { text-align: right; }
/* a name column of a fit table keeps a fixed room: its long names end in … (the full name on hover) instead of widening the table */
.fit-cols .tree-tbl td.fc-name { max-width: 180px; }
/* 18/10/2026: a tree read across keeps every column on screen (GIAO NHẬN: SO, day, PXK / PNK, product … HĐ, nhà xe): 8px each side */
@media (min-width: 768px) { .fit-cols .tree-tbl th, .fit-cols .tree-tbl td { padding-left: 8px; padding-right: 8px; } }
.fit-cols .tree-tbl td.fc-name .clip { max-width: 100%; }
/* the filter / pin icons float over the header's corner (as in a drawer's table): shown on hover, focus or while the column is
   filtered, so a narrow number column keeps its whole width for its label instead of breaking it word by word */
.fit-cols .tree-tbl thead th .th-tools { position: absolute; right: 4px; top: 4px; padding: 1px 2px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .12s;
  background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fit-cols .tree-tbl thead th:hover .th-tools, .fit-cols .tree-tbl thead th:focus-within .th-tools, .fit-cols .tree-tbl thead th .th-tools:has(.cf.on) { opacity: 1; pointer-events: auto; }
:root[data-theme="dark"] .fit-cols .tree-tbl thead th .th-tools { background: rgba(30, 30, 36, .55); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fit-cols .tree-tbl thead th .th-tools { background: rgba(30, 30, 36, .55); } }
@media (hover: none) { .fit-cols .tree-tbl thead th .th-tools { position: static; opacity: 1; pointer-events: auto; background: transparent; } }

/* module tab row too long for the head (Danh mục, 11 tabs): two arrows beside it slide it (ui.js slideTabs); they show only
   while some tabs are hidden, so a module whose tabs fit looks as before; a phone swipes the row as before */
.mt-arrs { display: none; align-items: center; gap: 2px; margin-left: 4px; flex: none; }
.mod-tabs.more + .mt-arrs, .mod-tabs.less + .mt-arrs { display: inline-flex; }
.mt-arrs .icon-btn { width: 28px; height: 28px; border: 1px solid var(--line-2); color: var(--theme); }
.mod-tabs:not(.less) + .mt-arrs .mt-prev, .mod-tabs:not(.more) + .mt-arrs .mt-next { opacity: .35; pointer-events: none; }
@media (max-width: 760px) { .mt-arrs { display: none !important; } }

/* Shared table fixes (sweep 17/10 night). 1) Every header row stays solid over the rows scrolling under it, on pages and in drawers,
   in every theme and mode (the PO drawer read "Mã hàng" over "BB.BVS.MKY…"; the light side of the drawing themes let rows show
   through): the header's own tint laid on the page colour, so it looks as before but nothing shows through. !important because a
   dozen older theme rules (drawer, dark, palettes) each set their own see-through header; screen only, the print keeps its own */
:root { --th-tint: rgba(255, 255, 255, .62); }
:root[data-theme="dark"] { --th-tint: rgba(40, 40, 44, .62); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --th-tint: rgba(40, 40, 44, .62); } }
:root[data-art] { --th-tint: var(--th-solid); }
:root[data-palette="vibe"][data-theme="dark"] { --th-tint: rgba(24, 19, 28, .96); }
@media screen {
  .grid thead th, .tree-tbl thead th, .tbl thead th, .sub thead th, .dialog table thead th {
    background: linear-gradient(var(--th-tint), var(--th-tint)), var(--page) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
/* 2) a MergeTable straight in a page without padding (SO, Tổng hợp công nợ, Việc của tôi…) keeps the 16px side gutter of the
   lists and the cards above it, instead of touching the frame */
.pane-body:not(.pad):not(.dash) > .mt-wrap { padding: 12px 16px 16px; }
/* 3) the last column's resize grip stays inside the table (it stuck out 4px and gave every table a useless sideways scrollbar) */
.grid th:last-child .col-rs { right: 0; width: 6px; }
/* 4) Cam tươi, light side: links and accent text in a deeper orange (#E9851B on near-white read 2.4:1; #A35200 reads 4.9:1), the
   buttons, bars and icon keep the bright orange */
html:root[data-palette="citrus"][data-theme="light"] { --theme: #A35200; --theme-hover: #8F4800; --accent-strong: #8F4800; --tab-on-ink: #A35200; }
html:root[data-palette="citrus"][data-theme="light"] .avatar, html:root[data-palette="citrus"][data-theme="light"] .app-icon { background: #E9851B; }
/* 5) Hoa xanh (both sides) and Tím hồng: tables and cards sit on a calm, nearly solid surface so the watercolour flowers stay around
   them, not behind the figures (owner: tables clear and clean) */
:root[data-palette="floral"] .tbl-box, :root[data-palette="floral"] .grid-wrap, :root[data-palette="floral"] .sub,
:root[data-palette="vibe"] .tbl-box, :root[data-palette="vibe"] .grid-wrap, :root[data-palette="vibe"] .sub { background: rgba(255, 255, 255, .86); }
:root[data-palette="floral"][data-theme="dark"] .tbl-box, :root[data-palette="floral"][data-theme="dark"] .grid-wrap, :root[data-palette="floral"][data-theme="dark"] .sub { background: rgba(26, 32, 48, .9); }
:root[data-palette="vibe"][data-theme="dark"] .tbl-box, :root[data-palette="vibe"][data-theme="dark"] .grid-wrap, :root[data-palette="vibe"][data-theme="dark"] .sub { background: rgba(17, 13, 20, .9); }
@media (prefers-color-scheme: dark) {
  :root[data-palette="floral"]:not([data-theme="light"]) .tbl-box, :root[data-palette="floral"]:not([data-theme="light"]) .grid-wrap, :root[data-palette="floral"]:not([data-theme="light"]) .sub { background: rgba(26, 32, 48, .9); }
  :root[data-palette="vibe"]:not([data-theme="light"]) .tbl-box, :root[data-palette="vibe"]:not([data-theme="light"]) .grid-wrap, :root[data-palette="vibe"]:not([data-theme="light"]) .sub { background: rgba(17, 13, 20, .9); }
}
/* SO drawer › Giá thành ước tính (so.js .so-cost, table of finctl.js SoCostPanel): "Khoản" and "Nguồn giá" wrap so the table fits
   the drawer (it was 9px wider: the last digit of Thành tiền was cut), and the Tổng label stays on one line */
.so-cost .grid tbody td[data-col="1"], .so-cost .grid tbody td[data-col="5"] { white-space: normal; min-width: 96px; }
.so-cost .grid tfoot td.sum-l { white-space: nowrap; }

/* SO tab down to the PXK (18/10/2026) */
/* the PXK number stays on one line (owner: a PXK number broken over lines is unreadable); the PNK · day · lot line wraps */
.tree-tbl td.so-pxk { min-width: 190px; }
.tree-tbl td.so-pxk .muted.small, .tree-tbl td.so-pxk .muted.small * { white-space: normal !important; }

/* KẾ HOẠCH MUA (owner 18/10/2026: "thực sự không chấp nhận được"): the chain fits a ~1000px table box (window ~1347px) with no
   sideways scroll — the kind of packaging 170px and wrapping, ĐVT narrow, the PO cell wraps under its whole figure, the item's name
   (alone in its cell) wraps */
.pl-fit .tree-tbl td.pl-prod { min-width: 150px; width: 170px; max-width: 170px; white-space: normal; }
.pl-fit .tree-tbl td.pl-item, .pl-fit .tree-tbl td.pl-todo { white-space: normal; }
.pl-fit .tree-tbl td.pl-po { white-space: normal; min-width: 128px; }
.pl-fit .tree-tbl td.pl-todo { min-width: 150px; }
.pl-fit .tree-tbl td.pl-item { min-width: 150px; }
/* its toolbar is ONE row at that width (the mock: Xem · ORD · Lập PO · Lập phiếu chuyển · Cả mã không phải mua · Xuất Excel · Tìm):
   a picker as wide as its value, a shorter search box */
@media (min-width: 768px) {
  .pl-fit .toolbar .period .sel.sm { min-width: 0; width: auto; max-width: 200px; }
  .pl-fit .toolbar .search-box { width: 160px; }
}
/* =====================================================================
   Thư viện giao diện (owner 17/10/2026). Each theme takes the colours, glass, cards, table, tabs and buttons of the preview page the
   owner approved ("mày mở file xem thử … tự xem lại rồi tự làm lại đi"): the values below are read from that page (scratch script
   theme-from-demo.mjs), so the app looks as the preview did. Drawings from themes.js (--theme-art) lie behind the frames.
   ===================================================================== */
:root[data-art] body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: var(--theme-art) center / cover no-repeat; }
:root[data-art] #app { position: relative; z-index: 1; }
:root[data-art] .pane, :root[data-art] .side { background: transparent; border: 1px solid var(--rim); box-shadow: var(--glass-shadow); }
:root[data-art] .pane::before, :root[data-art] .side::before { background: var(--glass); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
:root[data-art] .kpi-mini { background: var(--card); border: 1px solid var(--rim); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-art] .grid-wrap, :root[data-art] .tbl-box { background: var(--card); border: 1px solid var(--rim); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-art] .grid th, :root[data-art] .tbl th { background: var(--th-solid); color: var(--muted); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* the sticky header stays solid over the rows scrolling under it (owner 17/10, Cam tươi tối: the rows showed through the header);
   these match the base dark rules selector for selector, and come later */
:root[data-art] .grid thead th, :root[data-art] .tree-tbl thead th, :root[data-art] .tbl thead th, :root[data-art] .grid th.frz, :root[data-art] .grid th.sticky-l,
:root[data-art] .grid thead th.ck:not(.sticky-l) { background: var(--th-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-art] .grid tfoot td, :root[data-art] .grid tfoot td.frz, :root[data-art] .grid tfoot td.ck { background: var(--foot); }
:root[data-art] .grid td.sticky-l { background: var(--stick); }
:root[data-art] .grid tfoot td { background: var(--foot); }
:root[data-art] .dialog, :root[data-art] .viewer, :root[data-art] .dialog::before, :root[data-art] .viewer::before { background: var(--dlg); }
:root[data-art] .btn:not(.text):not(.link) { border-radius: 999px; background: var(--btn2); border-color: var(--rim2); color: var(--text); }
:root[data-art] .btn.primary { background: var(--btn); color: var(--btn-ink); border-color: transparent; box-shadow: none; }
:root[data-art] .btn.primary:hover { background: var(--btn); color: var(--btn-ink); filter: brightness(1.08); }
:root[data-art] .mtabs { background: var(--soft2); border-color: transparent; }
:root[data-art] .mtab.on { background: var(--tab-on); color: var(--tab-on-ink); }
:root[data-art] .node.on { background: var(--soft); color: var(--accent-strong); box-shadow: none; }
:root[data-art] .avatar, :root[data-art] .app-icon { background: var(--theme); color: var(--theme-ink, #fff); }
:root[data-palette="sea"] .pane, :root[data-palette="sea"] .side { outline: 2px dashed rgba(255, 255, 255, .85); outline-offset: -7px; }
:root[data-palette="sea"][data-theme="dark"] .pane, :root[data-palette="sea"][data-theme="dark"] .side { outline-color: rgba(180, 210, 245, .35); }
:root[data-palette="sea"][data-theme="light"] {
  --theme: #1D3A6E; --theme-hover: #1D3A6E; --theme-ink: #fff; --theme-soft: rgba(29, 58, 110, .1); --theme-line: rgba(29, 58, 110, .3);
  --text: #17325F; --text-2: #2D4C80; --muted: #5A7299; --line: rgba(29, 58, 110, .1); --line-2: rgba(29, 58, 110, .1); --hover: rgba(29, 58, 110, .1); --selected: rgba(29, 58, 110, .1);
  --page: #CFE3F8; --bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='%23FFFFFF' opacity='.85'%3E%3Cpath d='M30 40l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3Cpath d='M160 30l1.5 4.5 4.5 1.5-4.5 1.5-1.5 4.5-1.5-4.5-4.5-1.5 4.5-1.5z'/%3E%3Cpath d='M120 170l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3C/g%3E%3Cpath d='M190 120a12 12 0 1 0 8 20 10 10 0 1 1-8-20z' fill='%23FFFFFF' opacity='.8'/%3E%3Cpath d='M60 140a9 9 0 1 0 6 15 7.5 7.5 0 1 1-6-15z' fill='%231D3A6E' opacity='.35'/%3E%3C/svg%3E"), radial-gradient(40% 35% at 15% 20%, rgba(255,255,255,.55), transparent 70%), radial-gradient(35% 30% at 85% 75%, rgba(140, 185, 240, .55), transparent 70%), radial-gradient(30% 28% at 60% 10%, rgba(255,255,255,.4), transparent 70%), linear-gradient(170deg, #CFE3F8, #B7D3F2 60%, #C9DDF5);
  --glass: rgba(255, 255, 255, .36); --glass-strong: rgba(255, 255, 255, .9); --glass-border: rgba(255, 255, 255, .85); --glass-shadow: 0 10px 30px rgba(29, 58, 110, .12);
  --panel: rgba(255, 255, 255, .55); --panel-2: rgba(255, 255, 255, .55); --card: rgba(255, 255, 255, .55); --rim: rgba(255, 255, 255, .85); --rim2: rgba(29, 58, 110, .3);
  --th-solid: rgba(255, 255, 255, .92); --stick: rgba(255, 255, 255, .9); --foot: rgba(255, 255, 255, .9); --dlg: rgba(255, 255, 255, .96);
  --accent-strong: #1D3A6E; --soft: rgba(29, 58, 110, .1); --soft2: rgba(255,255,255,.5); --tab-on: #fff; --tab-on-ink: #1D3A6E;
  --btn: #1D3A6E; --btn-ink: #fff; --btn2: rgba(255,255,255,.7); --bar-a: #1D3A6E; --bar-b: #1D3A6E; color-scheme: light;
}
:root[data-palette="sea"][data-theme="dark"] {
  --theme: #8DB8EC; --theme-hover: #A9CCF2; --theme-ink: #0A1A33; --theme-soft: rgba(141, 184, 236, .15); --theme-line: rgba(150, 190, 240, .38);
  --text: #E3EEFF; --text-2: #B4C8EA; --muted: #8BA3C9; --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .08); --hover: rgba(141, 184, 236, .15); --selected: rgba(141, 184, 236, .15);
  --page: #0A1A33; --bg-image: radial-gradient(1.5px 1.5px at 20% 12%, #fff 60%, transparent), radial-gradient(1.5px 1.5px at 70% 8%, #fff 60%, transparent), radial-gradient(60% 40% at 50% 100%, rgba(80, 140, 230, .25), transparent 70%), linear-gradient(170deg, #0A1A33 0%, #0E2A52 60%, #0C2246 100%);
  --glass: rgba(10, 26, 51, .38); --glass-strong: rgba(10, 26, 51, .94); --glass-border: rgba(150, 190, 240, .2);
  --panel: rgba(14, 34, 66, .5); --panel-2: rgba(14, 34, 66, .5); --card: rgba(14, 34, 66, .5); --rim: rgba(150, 190, 240, .2); --rim2: rgba(150, 190, 240, .38);
  --th-solid: rgba(10, 26, 51, .97); --stick: rgba(10, 26, 51, .95); --foot: rgba(10, 26, 51, .95); --dlg: rgba(10, 26, 51, .97);
  --accent-strong: #A9CCF2; --soft: rgba(141, 184, 236, .15); --soft2: rgba(255, 255, 255, .05); --tab-on: rgba(141, 184, 236, .22); --tab-on-ink: #DCEBFF;
  --btn: #DCEBFF; --btn-ink: #0A1A33; --btn2: rgba(255, 255, 255, .04); --bar-a: #A9CCF2; --bar-b: #8DB8EC; color-scheme: dark;
}
:root[data-palette="nightflower"][data-theme="dark"] {
  --theme: #5FD4FF; --theme-hover: #7FDEFF; --theme-ink: #04112E; --theme-soft: rgba(95, 212, 255, .14); --theme-line: rgba(110, 200, 255, .4);
  --text: #E6ECFF; --text-2: #BAC6F2; --muted: #8E9AD0; --line: rgba(255,255,255,.07); --line-2: rgba(255,255,255,.07); --hover: rgba(95, 212, 255, .14); --selected: rgba(95, 212, 255, .14);
  --page: #05072A; --bg-image: radial-gradient(6px 6px at 18% 82%, #9FF0FF 50%, transparent), radial-gradient(5px 5px at 30% 90%, #7FB8FF 50%, transparent), radial-gradient(7px 7px at 46% 86%, #A9F4FF 50%, transparent), radial-gradient(5px 5px at 62% 92%, #8FC8FF 50%, transparent), radial-gradient(6px 6px at 78% 84%, #9FF0FF 50%, transparent), radial-gradient(5px 5px at 90% 93%, #7FB8FF 50%, transparent), radial-gradient(40px 30px at 18% 82%, rgba(80, 200, 255, .35), transparent), radial-gradient(46px 34px at 46% 86%, rgba(80, 200, 255, .32), transparent), radial-gradient(40px 30px at 78% 84%, rgba(80, 200, 255, .32), transparent), radial-gradient(80% 40% at 50% 100%, rgba(60, 90, 255, .45), transparent 70%), radial-gradient(1.5px 1.5px at 20% 12%, #fff 60%, transparent), radial-gradient(1.5px 1.5px at 70% 8%, #fff 60%, transparent), radial-gradient(1px 1px at 45% 20%, #fff 60%, transparent), linear-gradient(180deg, #05072A 0%, #0A0F45 55%, #0B1460 100%);
  --glass: rgba(8, 12, 48, .34); --glass-strong: rgba(5, 7, 42, .94); --glass-border: rgba(110, 170, 255, .2);
  --panel: rgba(12, 18, 64, .5); --panel-2: rgba(12, 18, 64, .5); --card: rgba(12, 18, 64, .5); --rim: rgba(110, 170, 255, .2); --rim2: rgba(110, 200, 255, .4);
  --th-solid: rgba(5, 7, 42, .97); --stick: rgba(5, 7, 42, .95); --foot: rgba(5, 7, 42, .95); --dlg: rgba(5, 7, 42, .97);
  --accent-strong: #7FDEFF; --soft: rgba(95, 212, 255, .14); --soft2: rgba(255,255,255,.05); --tab-on: rgba(95, 212, 255, .2); --tab-on-ink: #C7F1FF;
  --btn: #5FD4FF; --btn-ink: #04112E; --btn2: rgba(255,255,255,.04); --bar-a: #7FDEFF; --bar-b: #5FD4FF; color-scheme: dark;
}
:root[data-palette="nightflower"][data-theme="light"] {
  --theme: #3D55D8; --theme-hover: #2E44B8; --theme-ink: #FFFFFF; --theme-soft: rgba(61, 85, 216, .1); --theme-line: rgba(61, 85, 216, .3);
  --text: #1C2560; --text-2: #3A4683; --muted: #6B76A8; --line: rgba(28, 37, 96, .1); --line-2: rgba(28, 37, 96, .1); --hover: rgba(61, 85, 216, .1); --selected: rgba(61, 85, 216, .1);
  --page: #F1F2FF; --bg-image: radial-gradient(80% 40% at 50% 100%, rgba(120, 140, 255, .25), transparent 70%), linear-gradient(180deg, #F1F2FF 0%, #E4E8FF 55%, #D9DFFF 100%);
  --glass: rgba(255, 255, 255, .36); --glass-strong: rgba(255, 255, 255, .9); --glass-border: rgba(255, 255, 255, .85); --glass-shadow: 0 10px 30px rgba(40, 50, 140, .12);
  --panel: rgba(255, 255, 255, .55); --panel-2: rgba(255, 255, 255, .55); --card: rgba(255, 255, 255, .55); --rim: rgba(255, 255, 255, .85); --rim2: rgba(61, 85, 216, .3);
  --th-solid: rgba(255, 255, 255, .92); --stick: rgba(255, 255, 255, .9); --foot: rgba(255, 255, 255, .9); --dlg: rgba(255, 255, 255, .96);
  --accent-strong: #2E44B8; --soft: rgba(61, 85, 216, .1); --soft2: rgba(255, 255, 255, .5); --tab-on: #FFFFFF; --tab-on-ink: #2E44B8;
  --btn: #3D55D8; --btn-ink: #FFFFFF; --btn2: rgba(255, 255, 255, .7); --bar-a: #2E44B8; --bar-b: #3D55D8; color-scheme: light;
}
:root[data-palette="lantern"][data-theme="dark"] {
  --theme: #6FE3C1; --theme-hover: #8CEBD0; --theme-ink: #032420; --theme-soft: rgba(111, 227, 193, .14); --theme-line: rgba(160, 240, 210, .38);
  --text: #E7F6F1; --text-2: #BFE3D8; --muted: #8FBFB3; --line: rgba(255,255,255,.07); --line-2: rgba(255,255,255,.07); --hover: rgba(111, 227, 193, .14); --selected: rgba(111, 227, 193, .14);
  --page: #05252B; --bg-image: radial-gradient(14px 20px at 22% 16%, #FFF6D6 45%, transparent), radial-gradient(10px 14px at 58% 9%, #FFF3C8 45%, transparent), radial-gradient(12px 17px at 84% 20%, #FFF6D6 45%, transparent), radial-gradient(60px 70px at 22% 16%, rgba(255, 236, 170, .3), transparent), radial-gradient(50px 60px at 58% 9%, rgba(255, 236, 170, .25), transparent), radial-gradient(56px 66px at 84% 20%, rgba(255, 236, 170, .28), transparent), repeating-linear-gradient(180deg, transparent 0 14px, rgba(160, 240, 210, .05) 14px 15px), radial-gradient(90% 30% at 50% 100%, rgba(80, 200, 220, .28), transparent 70%), linear-gradient(90deg, rgba(120, 200, 150, .18) 0 2px, transparent 2px 100%) 0 0 / 46px 120px no-repeat, linear-gradient(180deg, #05252B 0%, #0A3A40 60%, #0B4A55 100%);
  --glass: rgba(4, 34, 38, .34); --glass-strong: rgba(5, 37, 43, .94); --glass-border: rgba(160, 240, 210, .18);
  --panel: rgba(6, 44, 50, .48); --panel-2: rgba(6, 44, 50, .48); --card: rgba(6, 44, 50, .48); --rim: rgba(160, 240, 210, .18); --rim2: rgba(160, 240, 210, .38);
  --th-solid: rgba(5, 37, 43, .97); --stick: rgba(5, 37, 43, .95); --foot: rgba(5, 37, 43, .95); --dlg: rgba(5, 37, 43, .97);
  --accent-strong: #8CEBD0; --soft: rgba(111, 227, 193, .14); --soft2: rgba(255,255,255,.05); --tab-on: rgba(255, 238, 180, .18); --tab-on-ink: #FFF1C4;
  --btn: #FFF1C4; --btn-ink: #1F2A1A; --btn2: rgba(255,255,255,.04); --bar-a: #8CEBD0; --bar-b: #6FE3C1; color-scheme: dark;
}
:root[data-palette="lantern"][data-theme="light"] {
  --theme: #1E8A6E; --theme-hover: #16705A; --theme-ink: #FFFFFF; --theme-soft: rgba(30, 138, 110, .1); --theme-line: rgba(30, 138, 110, .3);
  --text: #12352D; --text-2: #2E5A50; --muted: #5E8A7F; --line: rgba(18, 53, 45, .1); --line-2: rgba(18, 53, 45, .1); --hover: rgba(30, 138, 110, .1); --selected: rgba(30, 138, 110, .1);
  --page: #E9F6F0; --bg-image: radial-gradient(60px 70px at 18% 12%, rgba(255, 220, 130, .35), transparent), radial-gradient(56px 66px at 84% 16%, rgba(255, 220, 130, .3), transparent), linear-gradient(180deg, #E9F6F0 0%, #DCF0E8 55%, #D0EBE1 100%);
  --glass: rgba(255, 255, 255, .36); --glass-strong: rgba(255, 255, 255, .9); --glass-border: rgba(255, 255, 255, .85); --glass-shadow: 0 10px 30px rgba(20, 80, 60, .1);
  --panel: rgba(255, 255, 255, .55); --panel-2: rgba(255, 255, 255, .55); --card: rgba(255, 255, 255, .55); --rim: rgba(255, 255, 255, .85); --rim2: rgba(30, 138, 110, .3);
  --th-solid: rgba(255, 255, 255, .92); --stick: rgba(255, 255, 255, .9); --foot: rgba(255, 255, 255, .9); --dlg: rgba(255, 255, 255, .96);
  --accent-strong: #16705A; --soft: rgba(30, 138, 110, .1); --soft2: rgba(255, 255, 255, .5); --tab-on: #FFFFFF; --tab-on-ink: #16705A;
  --btn: #1E8A6E; --btn-ink: #FFFFFF; --btn2: rgba(255, 255, 255, .7); --bar-a: #16705A; --bar-b: #1E8A6E; color-scheme: light;
}
:root[data-palette="citrus"][data-theme="light"] {
  --theme: #E9851B; --theme-hover: #C9690B; --theme-ink: #fff; --theme-soft: rgba(233, 133, 27, .12); --theme-line: rgba(233, 133, 27, .35);
  --text: #3A2A12; --text-2: #5A4526; --muted: #7D6A4A; --line: rgba(58, 42, 18, .08); --line-2: rgba(58, 42, 18, .08); --hover: rgba(233, 133, 27, .12); --selected: rgba(233, 133, 27, .12);
  --page: #E4F2E8; --bg-image: radial-gradient(70px 70px at 88% 18%, rgba(247, 165, 49, .55) 55%, rgba(255, 215, 130, .5) 58%, transparent 62%), radial-gradient(90px 90px at 8% 88%, rgba(247, 165, 49, .5) 55%, rgba(255, 215, 130, .45) 58%, transparent 62%), radial-gradient(48px 48px at 70% 92%, rgba(247, 165, 49, .45) 55%, rgba(255, 215, 130, .4) 58%, transparent 62%), repeating-radial-gradient(circle at 30% 30%, rgba(255,255,255,.0) 0 18px, rgba(255,255,255,.35) 19px 20px, rgba(255,255,255,0) 21px 40px), radial-gradient(60% 40% at 30% 20%, rgba(255, 255, 240, .6), transparent 70%), linear-gradient(160deg, #E4F2E8 0%, #D5EBDF 50%, #E9F3E2 100%);
  --glass: rgba(255, 255, 255, .34); --glass-strong: rgba(255, 255, 255, .9); --glass-border: rgba(255, 255, 255, .85); --glass-shadow: 0 10px 30px rgba(120, 90, 30, .1);
  --panel: rgba(255, 255, 255, .55); --panel-2: rgba(255, 255, 255, .55); --card: rgba(255, 255, 255, .55); --rim: rgba(255, 255, 255, .85); --rim2: rgba(233, 133, 27, .35);
  --th-solid: rgba(255, 255, 255, .92); --stick: rgba(255, 255, 255, .9); --foot: rgba(255, 255, 255, .9); --dlg: rgba(255, 255, 255, .96);
  --accent-strong: #C9690B; --soft: rgba(233, 133, 27, .12); --soft2: rgba(255,255,255,.55); --tab-on: #fff; --tab-on-ink: #C9690B;
  --btn: #E9851B; --btn-ink: #fff; --btn2: rgba(255,255,255,.7); --bar-a: #C9690B; --bar-b: #E9851B; color-scheme: light;
}
:root[data-palette="citrus"][data-theme="dark"] {
  --theme: #F7A531; --theme-hover: #FDBB45; --theme-ink: #2A1A05; --theme-soft: rgba(247, 165, 49, .14); --theme-line: rgba(247, 165, 49, .38);
  --text: #F3EDE0; --text-2: #D4CBB4; --muted: #A59D86; --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .08); --hover: rgba(247, 165, 49, .14); --selected: rgba(247, 165, 49, .14);
  --page: #0F2318; --bg-image: radial-gradient(60% 40% at 30% 20%, rgba(250, 190, 90, .12), transparent 70%), linear-gradient(160deg, #0F2318 0%, #163222 55%, #11281B 100%);
  --glass: rgba(15, 35, 24, .38); --glass-strong: rgba(15, 35, 24, .94); --glass-border: rgba(247, 165, 49, .2);
  --panel: rgba(20, 44, 30, .5); --panel-2: rgba(20, 44, 30, .5); --card: rgba(20, 44, 30, .5); --rim: rgba(247, 165, 49, .2); --rim2: rgba(247, 165, 49, .38);
  --th-solid: rgba(15, 35, 24, .97); --stick: rgba(15, 35, 24, .95); --foot: rgba(15, 35, 24, .95); --dlg: rgba(15, 35, 24, .97);
  --accent-strong: #FDBB45; --soft: rgba(247, 165, 49, .14); --soft2: rgba(255, 255, 255, .05); --tab-on: rgba(247, 165, 49, .2); --tab-on-ink: #FFE2B0;
  --btn: #F7A531; --btn-ink: #2A1A05; --btn2: rgba(255, 255, 255, .04); --bar-a: #FDBB45; --bar-b: #F7A531; color-scheme: dark;
}
/* the gallery: one card per theme, its drawing on its own wash */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.theme-card { display: grid; gap: 4px; text-align: left; padding: 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass); cursor: pointer; font: inherit; color: var(--text); }
.theme-card:hover { border-color: var(--theme-line); }
.theme-card.on { border-color: var(--theme); box-shadow: 0 0 0 2px var(--theme-soft); }
.tc-pic { position: relative; display: block; height: 92px; border-radius: 10px; overflow: hidden; }
.tc-pic i { position: absolute; left: 10px; bottom: 10px; width: 28px; height: 10px; border-radius: 999px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }
.tc-n { font-weight: 600; font-size: 13px; } .tc-s { font-size: 11.5px; color: var(--muted); }

/* GIAO NHẬN of PO (18/10/2026): the PXK cell wraps inside its column */
.fit-cols .tree-tbl td.gn-pxk { max-width: 170px; white-space: normal; }
/* KẾ HOẠCH MUA (18/10/2026): the item's code (a long one breaks at its dots) and its name under it, inside 210px */
.fit-cols .tree-tbl td.pl-item { max-width: 210px; }
.fit-cols .tree-tbl td.pl-item .pl-name { white-space: normal; }
.fit-cols .tree-tbl td.pl-item .clip { max-width: 100%; }
/* GIAO NHẬN of PO (18/10/2026): a long item code breaks at its dots, never cut off */
.fit-cols .tree-tbl td.fc-name .kv-head .clip { white-space: normal; }

/* owner 18/10/2026: a receipt's invoice row ends with its state and "+ Hóa đơn" on one line (ORD FLOWS, tree.js) */
.inv-st { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.inv-st:not(:first-child) { margin-top: 3px; }
.inv-st .btn.link { padding: 0; }

/* owner 18/10/2026 ("tất cả các nút tạo mới … đưa hết về đầu dòng của dòng lọc, toàn bộ các modun"): on every table's row of filters
   the create buttons (btn primary: Lập ORD, Lập PO, Nhập SO, Nhận hàng…) come first, never between the filters */
.toolbar > .btn.primary, .toolbar > *:not(.tools-r):has(svg[data-i="plus"]) { order: -1; }

/* the partner pickers' "Thêm mới" (ui.js SelectData) under the picker */
.btn.link.sel-add { padding: 0; margin-top: 4px; display: inline-flex; }

/* owner 18/10/2026: a form opened over another form (a partner added from the warehouse form…) covers it: the one under is dimmed and
   the new one is solid, the two never read through each other */


/* beside: the form under stays readable (not dimmed); the new one is the solid panel on its left */
.form-mask.stacked.beside { background: rgba(10, 12, 24, .12); }

/* TableKit (tablekit.js): the hand-drawn tables get the shared tables' column edge, filter and pin */

table.tk th.tk-th { position: relative; }
table.tk th .tk-tools { display: inline-flex; gap: 1px; margin-left: 4px; vertical-align: middle; opacity: 0; transition: opacity .12s; }
table.tk th:hover .tk-tools, table.tk th .tk-tools:has(.on) { opacity: 1; }
table.tk th .tk-tools .cf { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; color: var(--muted); cursor: pointer; }
table.tk th .tk-tools .cf:hover { background: var(--hover); color: var(--theme); }
table.tk th .tk-tools .cf.on { color: var(--theme); background: var(--theme-soft); opacity: 1; }
table.tk th .tk-rs { position: absolute; top: 0; right: -4px; bottom: 0; width: 9px; cursor: col-resize; z-index: 3; touch-action: none; }
table.tk th .tk-rs::after { content: ''; position: absolute; top: 6px; bottom: 6px; left: 4px; width: 2px; border-radius: 2px; background: transparent; }
table.tk th:hover .tk-rs::after { background: rgba(47, 123, 246, .28); }
table.tk th .tk-rs:hover::after, body.col-resizing table.tk th .tk-rs::after { background: var(--theme); }
table.tk tr.tk-hide { display: none; }
.tk-pop { padding: 8px; border-radius: 12px; }
.tk-pop .tk-vals { max-height: 240px; overflow: auto; display: flex; flex-direction: column; gap: 2px; margin: 6px 0; }
.tk-pop .tk-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
@media (hover: none) { table.tk th .tk-tools { opacity: 1; } }
@media print { table.tk th .tk-tools, table.tk th .tk-rs { display: none !important; } }

/* owner 18/10/2026 ("rà lại TOÀN BỘ khung phụ … trình bày lan man, bố cục vô lý … làm gọn"): every side panel reads the same, compact —
   the record's facts as "label  value" pairs in columns (no boxes, no empty space), a long text on a line of its own under them;
   a table with nothing in it is one muted line (no header, no frame), a one-row table has no "Tổng"; sections closer together */
.dialog .tbl-box:has(> table > tbody > tr:only-child > td.empty) { border: 0 !important; background: none !important; box-shadow: none !important; }
.dialog .tbl-box:has(> table > tbody > tr:only-child > td.empty) :is(thead, tfoot) { display: none; }
.dialog td.empty { text-align: left !important; padding: 2px 0 !important; color: var(--muted); font-size: 12.5px; background: none !important; }
.dialog table:has(> tbody > tr:only-child) > tfoot { display: none; }
.dialog .mt-bar:has(+ .tbl-box > table > tbody > tr:only-child > td.empty) { display: none; }

/* a card reading 0 is left out wherever it is drawn (tablekit.js marks it) */
.kpi-mini.kz { display: none !important; }

/* the (i) of a norm (common.js ConvNote): beside the quantity; amber when something in it needs checking */
.norm-i { display: inline-flex; vertical-align: middle; margin-left: 4px; }
.norm-i.warn .info-i { color: var(--yellow); border-color: var(--yellow); }

/* the BOM form: a shared piece typed as "1 for n products" (master.js BomEditor) */
.per-one { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.per-one .inp { width: 64px; height: 26px; padding: 0 6px; }

/* ===== owner 18/10/2026: "QUY TẮC CỦA TAO: GLASSY VÀ TRANSPARENT!" =====
   every floating layer (the (i) note bubble, menus and pickers, the confirm box, a column filter, a drawer opened over another, a pinned
   column) is glass in the app's own tint — translucent with the page blurred behind it, never an opaque or near-black fill.
   One tint for all of them, light and dark, so they read as one family; this block comes last and wins over the older fills */
:root { --float-bg: rgba(255, 255, 255, .5); --float-border: rgba(255, 255, 255, .7); --float-blur: blur(26px) saturate(180%); --tk-pin-bg: rgba(255, 255, 255, .58); }
:root[data-theme="dark"] { --float-bg: rgba(20, 32, 68, .42); --float-border: rgba(160, 190, 255, .16); --tk-pin-bg: rgba(20, 32, 68, .5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --float-bg: rgba(20, 32, 68, .42); --float-border: rgba(160, 190, 255, .16); --tk-pin-bg: rgba(20, 32, 68, .5); } }
:is(.info-bubble, .pop, .cf-pop, .ask, .sel-pop, .cal-pop, .tk-pop, .print-sheet, .pop.paper-pop, .bd-tools, .toast),
:root[data-theme="dark"] :is(.info-bubble, .pop, .cf-pop, .ask, .sel-pop, .cal-pop, .tk-pop, .print-sheet, .pop.paper-pop, .bd-tools, .toast) {
  background: var(--float-bg) !important; border-color: var(--float-border) !important;
  -webkit-backdrop-filter: var(--float-blur) !important; backdrop-filter: var(--float-blur) !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.info-bubble, .pop, .cf-pop, .ask, .sel-pop, .cal-pop, .tk-pop, .print-sheet, .pop.paper-pop, .bd-tools, .toast) { background: var(--float-bg) !important; border-color: var(--float-border) !important; } }
.info-bubble { width: max-content; }
/* a drawer over a drawer when the window has no room beside: glass with a stronger blur (the one under it is not read through) */
.form-mask.stacked:not(.beside) { background: rgba(10, 16, 40, .18); }
.form-mask.stacked:not(.beside) .dialog.drawer::before { background: var(--float-bg) !important; -webkit-backdrop-filter: blur(44px) saturate(170%) !important; backdrop-filter: blur(44px) saturate(170%) !important; }

/* a BOM norm on one line: the figure, its "1/n" chip, its (i) (master.js PerOne) */
.qty-line { display: flex; align-items: center; gap: 6px; }
.qty-line .inp:first-child { flex: 1 1 auto; min-width: 0; }
.per-one-chip { flex: none; height: 24px; padding: 0 7px; border-radius: 8px; border: 1px solid var(--float-border); background: var(--float-bg); color: var(--muted); font-size: 12px; cursor: pointer; }
.per-one-chip.on { color: var(--theme); border-color: var(--theme); font-weight: 600; }
.per-one-chip:hover { color: var(--theme); }
.per-one-in { width: 58px !important; flex: none; height: 26px; }

/* a norm's note typed inside its (i) (common.js ConvNote editNote); the (i) of a line with a note is marked */
.norm-note { display: block; width: 260px; max-width: 70vw; margin-top: 6px; resize: vertical; font-size: 12.5px; }
.norm-i.has-note .info-i { color: var(--theme); border-color: var(--theme); background: var(--theme-soft); }

/* a BOM card's head: Sửa and ⋮ on one line, the tags under the name never over the lines below */
.bom-card .bc-h > .nowrap { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.bom-card .bc-h > div:first-child { min-width: 0; }
.bom-card .sheet-ok { height: 22px; padding: 0 8px; font-size: 11.5px; margin-left: 4px; }

/* owner 18/10/2026 ("là mày fix khung phụ dữ chưa?? càng làm càng vớ vẩn"): the facts packed from the left in even columns (never
   stretched over the width), a section's own action on its head, the upload row slim (glass, no big frame) */
.sep .sep-act { margin-left: auto; display: inline-flex; align-items: center; }
.sep .sep-act .btn { padding: 0 2px; }
.dialog .upload { padding: 4px 6px; border: 1px dashed var(--float-border); background: transparent; border-radius: 10px; }

/* RecMeta groups: each group a column with its title; the facts as label / value rows aligned inside it */

/* RecMeta groups (owner 18/10/2026: the small glass cells as they were, the facts only put in order): each group one band of the same
   cells, the groups one under the other (Đơn hàng · Giao nhận · Thanh toán…) */
.rm-groups { display: flex; flex-direction: column; gap: 6px; }
.rm-groups .rm-grid { margin: 0; }/* RecMeta groups as boxes: one glass box per group (the same glass as the facts' cells), its facts as label / value lines */
.rm-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; align-items: start; }
.rm-box { padding: 8px 12px 9px; border-radius: 12px; background: rgba(255, 255, 255, .22); border: 1px solid rgba(60, 60, 67, .1); min-width: 0;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
:root[data-theme="dark"] .rm-box { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .09); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rm-box { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .09); } }
.rm-bt { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.rm-row { display: flex; align-items: baseline; gap: 10px; padding: 2px 0; }
.rm-row .rm-l { flex: none; width: 104px; font-size: 12px; color: var(--muted); }
.rm-row .rm-v { min-width: 0; font-size: 13.5px; font-weight: 500; color: var(--text); overflow-wrap: anywhere; line-height: 1.4; }
/* narrow sections side by side (ui.js SecRow) */
.sec-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0 20px; align-items: start; }
.sec-row > * { min-width: 0; }

/* owner 18/10/2026 ("lỗi này tao nhắc mày ít nhất 3 đến 4 lần rồi"): on every page the cards, the row of filters and the table start on
   one left edge — a padded page keeps its own padding (the cards add none), a page whose body has none gives its table the cards' 16px */
.pane-body.pad > .sum-strip { padding-left: 0; padding-right: 0; }
.pane-body.withsum > .mt-wrap, .pane-body.withsum > .fit-cols > .mt-wrap, .pane-body.withsum > div:not([class]) > .mt-wrap { padding-left: 16px; padding-right: 16px; }

/* the boxes of a record's head: one row, the same height */
.rm-boxes { align-items: stretch; margin-bottom: 12px; }
/* owner 18/10/2026 ("rà soát toàn bộ … hệ thống lại"): the head's boxes sit on fixed tracks — one box is one track wide, never
   stretched over the drawer; the system note (Diễn giải) is a box of the row */
.rm-boxes { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.rm-box .rm-v.pre { white-space: pre-wrap; font-size: 13px; }

/* HỒ SƠ of Đơn hàng / PO (owner 18/10/2026): each paper a small glass chip — green done, orange missing (a button that adds it) */
.hs-slots { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.hs-ok, .hs-miss { display: inline-flex; align-items: baseline; gap: 4px; font-size: 12px; line-height: 1.3; padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; }
.hs-ok { color: var(--green); background: var(--green-soft); }
.hs-miss { color: var(--orange); background: var(--orange-soft); border-color: rgba(255,149,0,.28); cursor: pointer; font: inherit; font-size: 12px; }
.hs-miss:hover:not([disabled]) { border-color: var(--orange); }
.hs-miss[disabled] { cursor: default; opacity: .85; }
.hs-miss .hs-note { opacity: .8; font-size: 11px; }
/* owner 18/10/2026 ("2 khối này dính sát nhau … rất nhiều bảng dính lỗi này"): one even gap under every strip of total cards,
   whatever comes next (the filter row, a table, a tab bar) */
.sum-strip { margin-bottom: 14px; }
.sum-strip + * { margin-top: 0 !important; }