/* ═══════════════════════════════════════════════════════════════════════
   Workway design system — assets/nw.css                          [UICORE lane]
   One DOM, two skins: body.sk-cl (Classic, default) · body.sk-lx (Lightning)
   Three modes: body.md-auto (follows prefers-color-scheme) · md-light · md-dark
   Every class is nw- prefixed. Tokens: --bg --card --brd --brd2 --txt --mut --mut2
   --acc --acc-h --hov --thead --zebra (+ --cl-side --cl-sec --cl-sec-txt --cl-detailbar
   on Classic), --nw-brand/--nw-brand-h, --ok --warn --bad.

   TABLE OF CONTENTS
    1. Reset & base
    2. Tokens — Lightning (light/dark), Classic (light/dark), brand, semantic, accent override
    3. Typography, links, utilities
    4. Tiles, avatars, glyphs, pills, checks, chips
    5. Buttons
    6. Inputs & forms (inputs, date/number wrappers, multipick, picklist filter, lookup, rows, save bar)
    7. Menus, app launcher, More ▾ menu
    8. Toast, flash notices, modal / confirm
    9. Lightning chrome (global bar, tab strip, main)
   10. Classic chrome (top row, boxed + flat tab strips, frame, sidebar, main, fixed chrome)
   11. Page header, breadcrumbs, cards, card tab strip
   12. Record page (header, highlights, body grid, sections, fields, sidebar region, Classic bars)
   13. Related lists, widget rows, activity timeline, notes / rich text
   14. Lists & tables (list head, table, dense, grouped, totals, pager, controls, kanban)
   15. Home (hero, object grid, KPI tiles, dash panels, admin cards)
   16. Setup rail, empty states, skeletons, misc components
   17. Login page
   18. Locked (read-only) palette + editing state
   19. Responsive breakpoints (1100 · 980 · 900 · 861+ · 860 · 761+ · 760 · 700 · 640 · 480)
   20. Print & reduced motion
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── 1. Reset & base ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-spacing: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.25; }
p { margin: 0 0 8px; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.nw-skip { position: absolute; left: -9999px; top: 8px; z-index: 100001; padding: 8px 12px; background: var(--card); color: var(--txt); border: 1px solid var(--brd2); border-radius: 6px; }
.nw-skip:focus { left: 8px; }
.nw-sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ─── 2. Tokens ────────────────────────────────────────────────────────── */
:root { --nw-brand: #0060d8; --nw-brand-h: #004fb3; --ok: #2e844a; --warn: #a96404; --bad: #ba0517; --nw-chrome-h: 0px; --nw-sticky-top: 0px; }
body.sk-lx {
    --bg: #f3f2f2; --card: #ffffff; --brd: #dddbda; --brd2: #c9c7c5; --txt: #181818; --mut: #706e6b; --mut2: #b0adab;
    --acc: #0176d3; --acc-h: #014486; --hov: #f3f2f2; --thead: #fafaf9; --zebra: #eef2f8;
    --nw-chrome-h: 94px; --nw-sticky-top: 94px;
    background: var(--bg); color: var(--txt);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.5; min-height: 100vh;
}
body.sk-lx.md-dark {
    --bg: #1a1b1e; --card: #26272b; --brd: #43444b; --brd2: #55565e; --txt: #e8e8e9; --mut: #a5a6ac; --mut2: #6b6c72;
    --acc: #1b96ff; --acc-h: #57a3fd; --hov: #2f3035; --thead: #232428; --zebra: #32353d; --nw-brand: #5b9cff; --nw-brand-h: #82b4ff; --ok: #6fd08c; --warn: #f4b26a; --bad: #f28b95;
}
@media (prefers-color-scheme: dark) {
    body.sk-lx.md-auto {
        --bg: #1a1b1e; --card: #26272b; --brd: #43444b; --brd2: #55565e; --txt: #e8e8e9; --mut: #a5a6ac; --mut2: #6b6c72;
        --acc: #1b96ff; --acc-h: #57a3fd; --hov: #2f3035; --thead: #232428; --zebra: #32353d; --nw-brand: #5b9cff; --nw-brand-h: #82b4ff; --ok: #6fd08c; --warn: #f4b26a; --bad: #f28b95;
    }
}
body.sk-cl {
    --bg: #ffffff; --card: #ffffff; --brd: #e0e3e5; --brd2: #b5b5b5; --txt: #333333; --mut: #666666; --mut2: #999999;
    --acc: #236fbd; --acc-h: #015ba7; --hov: #f5f8fb; --thead: #f2f3f3; --zebra: #e9eff6;
    --cl-side: #f3f3f3; --cl-sec: #e8eef7; --cl-sec-txt: #16325c; --cl-detailbar: #efefef;
    background: var(--bg); color: var(--txt);
    font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.45; min-height: 100vh;
}
body.sk-cl.md-dark {
    --bg: #1e1f21; --card: #26272a; --brd: #3d3f43; --brd2: #55575c; --txt: #d6d7d9; --mut: #9b9da2; --mut2: #6d6f74;
    --acc: #4f9ce0; --acc-h: #6fb3f2; --hov: #2c2e32; --thead: #2c2e32; --zebra: #32353d;
    --cl-side: #232427; --cl-sec: #2c3340; --cl-sec-txt: #b9cdea; --cl-detailbar: #2c2e32; --nw-brand: #5b9cff; --nw-brand-h: #82b4ff; --ok: #6fd08c; --warn: #f4b26a; --bad: #f28b95;
}
@media (prefers-color-scheme: dark) {
    body.sk-cl.md-auto {
        --bg: #1e1f21; --card: #26272a; --brd: #3d3f43; --brd2: #55575c; --txt: #d6d7d9; --mut: #9b9da2; --mut2: #6d6f74;
        --acc: #4f9ce0; --acc-h: #6fb3f2; --hov: #2c2e32; --thead: #2c2e32; --zebra: #32353d;
        --cl-side: #232427; --cl-sec: #2c3340; --cl-sec-txt: #b9cdea; --cl-detailbar: #2c2e32; --nw-brand: #5b9cff; --nw-brand-h: #82b4ff; --ok: #6fd08c; --warn: #f4b26a; --bad: #f28b95;
    }
}
/* Setup › Company accent_style=brand: the skin accent becomes the Workway blue */
body.nw-acc-brand { --acc: var(--nw-brand); --acc-h: var(--nw-brand-h); }

/* ─── 3. Typography, links, utilities ──────────────────────────────────── */
body.sk-lx a { color: var(--acc); text-decoration: none; }
body.sk-cl a { color: var(--acc-h); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted, .nw-muted { color: var(--mut); }
.nw-empty { color: var(--mut2); font-style: italic; }
.nw-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; }
.nw-right { text-align: right; } .nw-center { text-align: center; } .nw-nowrap { white-space: nowrap; }
.nw-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nw-stack { display: flex; flex-direction: column; gap: 8px; }
.nw-spring { flex: 1 1 auto; }
.nw-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.nw-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.nw-eyebrow { font-size: 12px; color: var(--mut); }
.nw-kbd { display: inline-block; padding: 1px 6px; border: 1px solid var(--brd2); border-bottom-width: 2px; border-radius: 4px; background: var(--hov); font: 600 11px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--txt); }
.nw-hr { border: 0; border-top: 1px solid var(--brd); margin: 12px 0; }
.nw-mb { margin-bottom: 12px; } .nw-mt { margin-top: 12px; }
.nw-ok { color: var(--ok); } .nw-warn { color: var(--warn); } .nw-bad { color: var(--bad); }
.nw-bal-due { color: #ea001e; font-weight: 700; }
.nw-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #e11d48; color: #fff; font-size: 11px; font-weight: 800; line-height: 1; }
.nw-tag { display: inline-block; padding: 1px 7px; border-radius: 4px; border: 1px solid var(--brd2); font-size: 11px; color: var(--mut); background: var(--card); }

/* ─── 4. Tiles, avatars, glyphs, pills, checks, chips ──────────────────── */
.nw-tile { display: inline-flex; align-items: center; justify-content: center; background: var(--tile, #8a8af2); border-radius: 5px; flex: none; vertical-align: middle; }
.nw-glyph { vertical-align: -3px; flex: none; }
.nw-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--nw-brand); color: #fff; font-weight: 700; flex: none; vertical-align: middle; letter-spacing: .2px; }
.nw-userref { display: inline-flex; align-items: center; gap: 6px; }
.nw-pill { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; background: var(--hov); color: var(--mut); white-space: nowrap; line-height: 1.6; vertical-align: middle; }
.nw-pill-ok   { background: rgba(45,132,49,.14);  color: var(--ok); }
.nw-pill-warn { background: rgba(254,147,57,.18); color: var(--warn); }
.nw-pill-bad  { background: rgba(234,0,30,.12);   color: var(--bad); }
.nw-pill-info { background: rgba(1,118,211,.13);  color: var(--acc); }
.nw-pill-acc  { background: var(--acc); color: #fff; }
.nw-pill-mut  { background: var(--hov); color: var(--mut); }
.nw-check { display: inline-flex; width: 16px; height: 16px; border: 1px solid var(--brd2); border-radius: 3px; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; color: #fff; background: var(--card); vertical-align: middle; line-height: 1; }
.nw-check.on { background: var(--acc); border-color: var(--acc); }
.nw-mp-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.nw-mp-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--hov); border: 1px solid var(--brd); font-size: 11.5px; line-height: 1.4; }
.nw-urlbtn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 12px; border: 1px solid var(--acc); border-radius: 4px; color: var(--acc) !important; text-decoration: none !important; font-weight: 600; font-size: 12.5px; background: var(--card); max-width: 100%; white-space: nowrap; overflow: hidden; }
.nw-urlbtn > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nw-urlbtn:hover { background: var(--hov); }
.nw-copyurl { cursor: copy; }
.nw-copyurl.copied { background: #cdefc4 !important; color: #1e5b2e !important; border-color: #2e844a !important; }
.nw-num-val { font-variant-numeric: tabular-nums; }

/* ─── 5. Buttons ───────────────────────────────────────────────────────── */
.nw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; cursor: pointer; text-decoration: none !important; vertical-align: middle; line-height: 1; user-select: none; }
body.sk-lx .nw-btn { height: 32px; padding: 0 16px; border-radius: 4px; font-size: 13px; font-weight: 400; border: 1px solid var(--brd2); background: var(--card); color: var(--acc); }
body.sk-lx .nw-btn:hover { background: var(--hov); }
body.sk-lx .nw-btn-primary { background: var(--acc); border-color: var(--acc); color: #fff; font-weight: 600; }
body.sk-lx .nw-btn-primary:hover { background: var(--acc-h); border-color: var(--acc-h); }
body.sk-lx .nw-btn-sm { height: 26px; padding: 0 10px; font-size: 12px; }
body.sk-cl .nw-btn { padding: 4px 12px; border: 1px solid var(--brd2); border-radius: 3px; background: linear-gradient(#fefefe, #e8e8e9); color: #333; font: bold 11px Arial, Helvetica, sans-serif; line-height: 1.3; }
body.sk-cl.md-dark .nw-btn { background: linear-gradient(#4a4c51, #37393d); color: #e2e3e5; }
@media (prefers-color-scheme: dark) { body.sk-cl.md-auto .nw-btn { background: linear-gradient(#4a4c51, #37393d); color: #e2e3e5; } }
body.sk-cl .nw-btn:hover { filter: brightness(.96); }
body.sk-cl .nw-btn-primary { background: var(--acc); border-color: var(--acc); color: #fff; }
body.sk-cl .nw-btn-sm { padding: 3px 9px; font-size: 10.5px; }
.nw-btn-danger { color: var(--bad) !important; border-color: var(--bad) !important; }
body.sk-lx .nw-btn-danger.nw-btn-primary, body.sk-cl .nw-btn-danger.nw-btn-primary { background: #ba0517 !important; color: #fff !important; border-color: #ba0517 !important; }
.nw-btn-brand { background: var(--nw-brand) !important; border-color: var(--nw-brand) !important; color: #fff !important; }
.nw-btn-brand:hover { background: var(--nw-brand-h) !important; border-color: var(--nw-brand-h) !important; }
.nw-btn-icon { padding: 0 !important; width: 32px; }
body.sk-cl .nw-btn-icon { width: 26px; height: 26px; }
.nw-btn-link { background: none !important; border: 0 !important; color: var(--acc) !important; padding: 0 4px !important; height: auto !important; }
.nw-btn[disabled], .nw-btn.busy, .nw-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.nw-btngroup { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.nw-iconbtn { display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; padding: 7px; border-radius: 4px; color: var(--mut); cursor: pointer; }
.nw-iconbtn:hover { background: var(--hov); color: var(--txt); }
.nw-seg { display: inline-flex; border: 1px solid var(--brd2); border-radius: 6px; overflow: hidden; }
.nw-seg > a, .nw-seg > button { padding: 5px 12px; font-size: 12px; background: var(--card); color: var(--txt); border: 0; border-right: 1px solid var(--brd2); text-decoration: none !important; cursor: pointer; }
.nw-seg > :last-child { border-right: 0; }
.nw-seg > .on { background: var(--acc); color: #fff; font-weight: 600; }

/* ─── 6. Inputs & forms ────────────────────────────────────────────────── */
.nw-input, select.nw-input, textarea.nw-input { width: 100%; font: inherit; color: var(--txt); background: var(--card); max-width: 100%; }
body.sk-lx .nw-input { height: 32px; padding: 0 10px; border: 1px solid var(--brd2); border-radius: 4px; }
body.sk-lx textarea.nw-input { height: auto; padding: 8px 10px; }
body.sk-lx .nw-input:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 3px var(--acc); }
body.sk-cl .nw-input { border: 1px solid var(--brd2); border-radius: 3px; padding: 4px 6px; }
body.sk-cl .nw-input:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 2px var(--acc); }
textarea.nw-input { min-height: 70px; resize: vertical; line-height: 1.45; }
select.nw-input { appearance: none; -webkit-appearance: none; padding-right: 26px; background-image: linear-gradient(45deg, transparent 50%, var(--mut) 50%), linear-gradient(135deg, var(--mut) 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
select.nw-input[multiple], select.nw-input[size] { height: auto; background-image: none; padding-right: 6px; }
.nw-input::placeholder { color: var(--mut2); }
.nw-input[disabled], .nw-input[readonly] { background: var(--hov); color: var(--mut); }
.nw-input.nw-sm { height: 26px; padding: 0 8px; font-size: 12px; }
.nw-input.nw-num { text-align: right; font-variant-numeric: tabular-nums; }
.nw-checkbox, input[type="checkbox"].nw-checkbox { width: 16px; height: 16px; cursor: pointer; accent-color: var(--acc); margin: 0; vertical-align: middle; flex: none; }
.nw-checkwrap { display: inline-flex; align-items: center; min-height: 32px; }
body.sk-cl .nw-checkwrap { min-height: 24px; }
.nw-datewrap { display: inline-flex; align-items: center; gap: 4px; width: 100%; }
.nw-datewrap .nw-input { flex: 1 1 auto; min-width: 0; }
.nw-dateclear, .nw-lookup-clear { flex: 0 0 auto; width: 22px; height: 22px; border: 1px solid var(--brd2); border-radius: 4px; background: var(--card); color: var(--mut); font-size: 11px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.nw-dateclear:hover, .nw-lookup-clear:hover { background: var(--hov); color: var(--bad); border-color: var(--bad); }
.nw-numwrap { display: flex; align-items: center; gap: 4px; width: 100%; }
.nw-numwrap .nw-input { flex: 1 1 auto; min-width: 0; }
.nw-input-affix { color: var(--mut); font-size: 12px; flex: none; }
.nw-multipick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 10px; max-height: 180px; overflow-y: auto; width: 100%; border: 1px solid var(--brd2); border-radius: 4px; padding: 6px 8px; background: var(--card); }
.nw-mp-opt { display: flex; align-items: center; gap: 5px; font-size: 12px; cursor: pointer; white-space: nowrap; }
.nw-pickwrap { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.nw-pickfilter { font-size: 12px !important; }
.nw-pickwrap select[size] { overflow-y: auto; }
.nw-edit-compound { display: grid; gap: 6px; }
.nw-readonly { min-height: 32px; display: flex; align-items: center; padding: 0 2px; color: var(--mut); }
body.sk-cl .nw-readonly { min-height: 24px; }
/* Lookup typeahead (record.js drives it; markup from nw_input_html) */
.nw-lookup { position: relative; display: block; width: 100%; }
.nw-lookup > .nw-glyph { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--mut2); pointer-events: none; }
.nw-lookup--poly { display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr); gap: 6px; }
.nw-lookup--poly > .nw-glyph { left: auto; right: calc(62% + 6px); display: none; }
.nw-lookup--poly .nw-lookup-input { padding-left: 10px; }
.nw-lookup--poly .nw-lookup-menu { left: auto; right: 0; width: 62%; }
.nw-lookup .nw-lookup-input { padding-left: 28px; padding-right: 30px; }
.nw-lookup[data-filled] .nw-lookup-input { font-weight: 600; color: var(--acc-h); }
.nw-lookup .nw-lookup-clear { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); }
.nw-lookup-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 10001; background: var(--card); border: 1px solid var(--brd2); border-radius: 6px; box-shadow: 0 10px 26px rgba(0,0,0,.18); max-height: 280px; overflow-y: auto; padding: 4px 0; }
.nw-lookup-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; font-size: 13px; color: var(--txt); }
.nw-lookup-item:hover, .nw-lookup-item.on, .nw-lookup-item[aria-selected="true"] { background: var(--hov); }
.nw-lookup-item .nw-lookup-sub { display: block; font-size: 11.5px; color: var(--mut); }
.nw-lookup-none, .nw-lookup-new { padding: 8px 10px; font-size: 12.5px; color: var(--mut); }
.nw-lookup-new { color: var(--acc); cursor: pointer; font-weight: 600; }
/* Form rows (new.php, setup forms) */
.nw-form { display: block; }
.nw-form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 6px 14px; padding: 7px 0; border-bottom: 1px dotted var(--brd); align-items: start; }
.nw-form-row:last-child { border-bottom: 0; }
.nw-form-row--stack { grid-template-columns: 1fr; }
.nw-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.nw-form-grid[data-cols="1"] { grid-template-columns: 1fr; }
.nw-form-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nw-label { display: block; font-size: 12px; color: var(--mut); font-weight: 600; padding-top: 7px; }
body.sk-cl .nw-label { text-align: right; font-size: 11.5px; font-weight: normal; padding-top: 5px; }
.nw-form-row--stack .nw-label, .nw-login .nw-label { text-align: left; padding-top: 0; }
.nw-req { color: var(--bad); font-weight: 700; }
.nw-control { min-width: 0; }
.nw-help { font-size: 11.5px; color: var(--mut); margin-top: 3px; }
.nw-help-tip { color: var(--mut2); cursor: help; }
.nw-ferr { color: var(--bad); font-size: 12px; margin-top: 3px; font-weight: 600; }
.nw-form-row[data-error] .nw-input, .nw-field[data-error] .nw-input { border-color: var(--bad) !important; box-shadow: 0 0 2px var(--bad); }
.nw-form-actions { display: flex; gap: 10px; align-items: center; padding: 14px 0 0; flex-wrap: wrap; }
.nw-form-note { font-size: 11.5px; color: var(--mut); margin-left: auto; }
/* Docked save bar */
.nw-savebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998; display: flex; justify-content: center; align-items: center; gap: 10px; padding: 10px; background: var(--card); border-top: 1px solid var(--brd); box-shadow: 0 -3px 10px rgba(0,0,0,.14); padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.nw-savebar .nw-save-err { color: var(--bad); font-size: 12.5px; max-width: 480px; font-weight: 600; }
.nw-savebar .nw-save-err:empty { display: none; }
body.nw-editing { padding-bottom: 60px; }

/* ─── 7. Menus, app launcher, More ▾ ───────────────────────────────────── */
.nw-menu-wrap { position: relative; display: inline-flex; align-items: center; }
.nw-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 10000; min-width: 250px; max-width: min(420px, calc(100vw - 16px)); background: var(--card); border: 1px solid var(--brd); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.18); padding: 6px 0; font-size: 13px; color: var(--txt); text-align: left; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
.nw-menu.nw-menu--fixed { position: fixed; top: auto; right: auto; max-height: min(80vh, calc(100vh - 60px)); overflow-y: auto; }
.nw-menu--left { right: auto; left: 0; }
.nw-menu > a, .nw-menu > button, .nw-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 16px; color: var(--txt) !important; text-decoration: none !important; white-space: nowrap; background: none; border: 0; text-align: left; font: inherit; cursor: pointer; }
.nw-menu > a:hover, .nw-menu > button:hover, .nw-menu-item:hover, .nw-menu > a.on { background: var(--hov); }
.nw-menu > a .nw-glyph, .nw-menu-item .nw-glyph { color: var(--mut); }
.nw-menu-head { padding: 8px 16px 10px; border-bottom: 1px solid var(--brd); margin-bottom: 4px; display: flex; flex-direction: column; gap: 1px; }
.nw-menu-head span { color: var(--mut); font-size: 11.5px; }
.nw-menu-head .nw-menu-role { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
.nw-menu-sub { padding: 8px 16px 2px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--mut); }
.nw-menu-div { border-top: 1px solid var(--brd); margin: 6px 0; }
.nw-menu-modes { display: flex; gap: 4px; padding: 4px 14px 8px; }
.nw-menu-modes a { padding: 4px 12px; border: 1px solid var(--brd); border-radius: 20px; font-size: 12px; color: var(--txt) !important; text-decoration: none !important; }
.nw-menu-modes a.on { background: var(--acc); border-color: var(--acc); color: #fff !important; }
.nw-menu-danger { color: var(--bad) !important; font-weight: 700; }
.nw-menu-mobile { display: none; }
.nw-menu-search { display: flex; align-items: center; gap: 6px; margin: 4px 12px 8px; padding: 0 10px; height: 34px; border: 1px solid var(--brd2); border-radius: 6px; background: var(--card); color: var(--mut); }
.nw-menu-search input { flex: 1; border: 0; background: none; outline: none; min-width: 0; color: var(--txt); }
.nw-menu-check { width: 16px; color: var(--acc); }
/* App launcher (waffle) */
.nw-waffle { background: none; border: 0; cursor: pointer; padding: 8px; border-radius: 4px; display: inline-flex; }
.nw-waffle:hover, .nw-waffle[aria-expanded="true"] { background: var(--hov); }
.nw-waffle-grid { display: grid; grid-template-columns: repeat(3, 4px); gap: 2.5px; }
.nw-waffle-grid i { width: 4px; height: 4px; border-radius: 50%; background: var(--mut); }
.nw-waffle-menu { min-width: 330px; max-width: min(460px, calc(100vw - 16px)); padding: 8px 8px 10px; }
.nw-waffle-head { display: flex; align-items: baseline; justify-content: space-between; padding: 6px 8px 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--mut); }
.nw-waffle-head a { font-size: 11.5px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.nw-waffle-grid-items, .nw-waffle-menu .nw-waffle-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.nw-waffle-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 8px; text-decoration: none !important; color: var(--txt) !important; font-size: 12px; text-align: center; line-height: 1.2; }
.nw-waffle-item:hover { background: var(--hov); }
/* Classic More ▾ overflow */
.nw-more-menu { position: fixed; z-index: 99999; min-width: 230px; max-height: 70vh; overflow-y: auto; }
.nw-more-item { display: block; padding: 8px 14px; text-decoration: none !important; color: var(--txt) !important; font-size: 13px; }
.nw-more-item:hover { background: var(--hov); }
.nw-more-item.active { background: var(--acc); color: #fff !important; }

/* ─── 8. Toast, flash, modal ───────────────────────────────────────────── */
#nw-toast { position: fixed; left: 50%; top: 18px; transform: translateX(-50%); background: #2e844a; color: #fff; padding: 10px 22px; border-radius: 6px; font-size: 13px; font-weight: 600; box-shadow: 0 4px 14px rgba(0,0,0,.25); z-index: 99999; opacity: 0; transition: opacity .2s ease; pointer-events: none; max-width: calc(100vw - 32px); text-align: center; }
#nw-toast.show { opacity: 1; }
#nw-toast.err { background: #ba0517; }
.nw-flash { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; border-radius: 8px; margin: 0 0 12px; border: 1px solid; font-size: 13px; line-height: 1.45; }
.nw-flash > span { flex: 1 1 auto; }
.nw-flash .nw-glyph { margin-top: 2px; }
.nw-flash-info { background: color-mix(in srgb, var(--acc) 10%, var(--card)); border-color: color-mix(in srgb, var(--acc) 35%, var(--card)); color: var(--acc-h); }
.nw-flash-ok   { background: color-mix(in srgb, #2e844a 12%, var(--card)); border-color: color-mix(in srgb, #2e844a 40%, var(--card)); color: var(--ok); }
.nw-flash-warn { background: color-mix(in srgb, #fe9339 14%, var(--card)); border-color: color-mix(in srgb, #fe9339 45%, var(--card)); color: var(--warn); }
.nw-flash-bad  { background: color-mix(in srgb, #ba0517 10%, var(--card)); border-color: color-mix(in srgb, #ba0517 35%, var(--card)); color: var(--bad); }
.nw-flash-x { background: none; border: 0; color: inherit; opacity: .6; padding: 0 2px; margin-left: auto; cursor: pointer; }
.nw-flash-x:hover { opacity: 1; }
.nw-modal { position: fixed; inset: 0; background: rgba(10,14,18,.55); z-index: 100000; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; overflow-y: auto; }
.nw-modal-card { background: var(--card); color: var(--txt); border-radius: 12px; width: 720px; max-width: 100%; max-height: 88vh; overflow-y: auto; box-shadow: 0 18px 60px rgba(0,0,0,.35); display: flex; flex-direction: column; }
.nw-modal-card--sm { width: 440px; } .nw-modal-card--lg { width: 960px; }
.nw-modal-head { position: sticky; top: 0; background: var(--card); padding: 14px 18px; font-size: 15px; font-weight: 700; border-bottom: 1px solid var(--brd); display: flex; align-items: center; gap: 10px; z-index: 1; border-radius: 12px 12px 0 0; }
.nw-modal-x { margin-left: auto; border: 0; background: none; cursor: pointer; color: var(--mut); padding: 4px; border-radius: 4px; display: inline-flex; }
.nw-modal-x:hover { background: var(--hov); color: var(--txt); }
.nw-modal-body { padding: 16px 18px; font-size: 13px; line-height: 1.5; white-space: pre-line; }
.nw-modal-foot { display: flex; gap: 10px; justify-content: flex-end; align-items: center; padding: 12px 18px; border-top: 1px solid var(--brd); }
body.nw-modal-open { overflow: hidden; }

/* ─── 9. Lightning chrome ──────────────────────────────────────────────── */
.nw-brand { display: inline-flex; align-items: center; gap: 7px; text-decoration: none !important; flex: none; min-width: 0; }
.nw-brand .nw-logo { height: 28px; width: auto; display: block; }
.nw-brand .nw-mark { display: none; height: 28px; width: 28px; }
/* Dark-mode logo swap: both wordmarks are in the DOM, CSS picks one (never hides the brand element itself) */
.nw-logo.nw-logo-dark { display: none; }
body.md-dark .nw-logo.nw-logo-light { display: none; } body.md-dark .nw-logo.nw-logo-dark { display: block; }
@media (prefers-color-scheme: dark) { body.md-auto .nw-logo.nw-logo-light { display: none; } body.md-auto .nw-logo.nw-logo-dark { display: block; } }
.nw-lx-global { position: sticky; top: 0; z-index: 9990; display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 12px; background: var(--card); border-bottom: 1px solid var(--brd); }
.nw-search { display: flex; align-items: center; gap: 8px; color: var(--mut); position: relative; }
.nw-lx-search { flex: 1; max-width: 440px; margin: 0 auto; background: var(--bg); border: 1px solid var(--brd); border-radius: 4px; padding: 0 12px; height: 32px; }
.nw-lx-search:focus-within { border-color: var(--acc); box-shadow: 0 0 3px var(--acc); background: var(--card); }
.nw-lx-search input { flex: 1; border: 0; background: none; outline: none; font: inherit; color: var(--txt); min-width: 0; }
.nw-search input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
.nw-lx-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.nw-search-toggle { display: none; }
.nw-gear { color: var(--mut); }
.nw-gear[aria-expanded="true"] { background: var(--hov); color: var(--txt); }
.nw-avatar-btn { width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer; background: var(--nw-brand); color: #fff; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.nw-avatar-btn:hover, .nw-avatar-btn[aria-expanded="true"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--nw-brand) 30%, transparent); }
.nw-lx-nav { position: sticky; top: 50px; z-index: 9980; display: flex; align-items: stretch; height: 44px; padding: 0 8px; background: var(--card); border-bottom: 1px solid var(--brd); overflow-x: auto; scrollbar-width: none; }
.nw-lx-nav::-webkit-scrollbar { display: none; }
.nw-lx-tab { display: flex; align-items: center; padding: 0 14px; color: var(--txt) !important; text-decoration: none !important; font-size: 13px; font-weight: 400; white-space: nowrap; border-bottom: 3px solid transparent; border-top: 3px solid transparent; flex: none; }
.nw-lx-tab:hover { border-bottom-color: var(--brd2); }
.nw-lx-tab.active { border-bottom-color: var(--acc); color: var(--acc-h) !important; font-weight: 700; }
.nw-main { display: block; min-width: 0; }
.nw-lx-main { padding: 14px 16px 80px; max-width: 1500px; margin: 0 auto; }
body.nw-wide .nw-lx-main { max-width: none; }
.nw-main--bare { padding: 14px 16px; }

/* ─── 10. Classic chrome ───────────────────────────────────────────────── */
.nw-cl-top { display: flex; align-items: center; gap: 16px; padding: 8px 14px; min-height: 50px; background: var(--card); border-bottom: 1px solid var(--brd); flex-wrap: wrap; }
.nw-cl-search { gap: 6px; }
.nw-cl-search > .nw-glyph { display: none; }
.nw-cl-search input { border: 1px solid var(--brd2); background: var(--card); color: var(--txt); padding: 4px 8px; font: inherit; width: 190px; border-radius: 3px; height: 26px; }
.nw-cl-search input:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 2px var(--acc); }
.nw-cl-links { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; }
.nw-cl-userlink { font-weight: bold; text-decoration: none !important; }
.nw-cl-sep { color: var(--mut2); }
/* Boxed (faithful Classic) tab strip */
.nw-cl-tabs { display: flex; align-items: flex-end; gap: 3px; padding: 8px 10px 0; background: var(--bg); overflow-x: auto; scrollbar-width: none; }
.nw-cl-tabs::-webkit-scrollbar { display: none; }
.nw-cl-tab { padding: 5px 14px; border: 1px solid var(--brd2); border-bottom: 0; border-radius: 4px 4px 0 0; background: var(--cl-side); color: var(--acc-h) !important; text-decoration: none !important; font-size: 12px; font-weight: bold; white-space: nowrap; flex: none; }
.nw-cl-tab:hover { background: var(--hov); }
.nw-cl-tab.active { background: var(--acc); border-color: var(--acc); color: #fff !important; }
.nw-cl-band { height: 4px; background: var(--acc); }
/* Flat variant (Setup › Company classic_tabs=flat) */
.nw-cl-tabs--flat { height: 40px; padding: 0 10px; gap: 0; align-items: stretch; background: var(--card); border-bottom: 1px solid var(--brd); }
.nw-cl-tabs--flat .nw-cl-tab { display: flex; align-items: center; background: none; border: 0; border-radius: 0; padding: 0 12px; margin: 0; font: 400 13px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: var(--txt) !important; }
.nw-cl-tabs--flat .nw-cl-tab:hover { background: var(--hov); }
.nw-cl-tabs--flat .nw-cl-tab.active { font-weight: 700; color: var(--txt) !important; box-shadow: inset 0 -3px 0 var(--acc); }
.nw-cl-band--flat { height: 0; }
/* Frame */
.nw-cl-frame { display: flex; align-items: stretch; min-height: calc(100vh - 110px); }
.nw-cl-sidebar { width: 180px; flex: none; background: var(--cl-side); border-right: 1px solid var(--brd); padding: 34px 10px 10px; position: relative; transition: width .14s ease; }
.nw-side-box { background: var(--card); border: 1px solid var(--brd); border-radius: 3px; margin-bottom: 12px; overflow: hidden; }
.nw-side-head { background: var(--cl-sec); color: var(--cl-sec-txt); font-weight: bold; font-size: 12px; padding: 5px 9px; border-bottom: 1px solid var(--brd); }
.nw-side-body { padding: 7px 9px; display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.nw-side-body a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw-side-body a small { color: var(--mut); font-size: 10.5px; margin-left: 4px; }
.nw-side-empty { color: var(--mut2); font-style: italic; }
.nw-side-createnew .nw-side-body { padding: 7px; }
.nw-newsel { width: 100%; font: inherit; font-size: 11.5px; padding: 4px 6px; border: 1px solid var(--brd2); border-radius: 3px; background: var(--card); color: var(--txt); }
.nw-railtoggle { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border: 0; border-radius: 6px; cursor: pointer; z-index: 2; background: var(--hov); color: var(--mut); font-size: 12px; display: flex; align-items: center; justify-content: center; }
.nw-railtoggle:hover { background: var(--brd); color: var(--txt); }
html.nw-side-collapsed .nw-cl-sidebar { width: 30px; padding: 34px 4px 4px; }
html.nw-side-collapsed .nw-cl-sidebar .nw-side-box { display: none; }
.nw-cl-main { flex: 1; min-width: 0; padding: 12px 16px 60px; background: var(--bg); }

/* ─── 11. Page header, breadcrumbs, cards, tab strip ───────────────────── */
.nw-crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--mut); margin: 0 0 8px; }
.nw-crumbs a { color: var(--mut); } .nw-crumbs a:hover { color: var(--acc); }
.nw-crumbs [aria-current] { color: var(--txt); font-weight: 600; }
.nw-crumb-sep { color: var(--mut2); }
.nw-page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; }
body.sk-cl .nw-page-head { padding: 0 0 10px; }
.nw-page-head-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nw-page-head-txt { min-width: 0; }
.nw-page-title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.25; word-break: break-word; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nw-page-title .nw-menu-wrap button { background: none; border: 0; cursor: pointer; font-size: 12px; color: var(--mut); padding: 4px; display: inline-flex; }
.nw-page-sub { font-size: 13px; color: var(--mut); margin-top: 2px; }
.nw-page-meta { font-size: 12px; color: var(--mut); margin-top: 2px; }
.nw-page-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nw-card { background: var(--card); border: 1px solid var(--brd); border-radius: 8px; box-shadow: 0 2px 2px rgba(0,0,0,.05); margin-bottom: 12px; }
body.sk-cl .nw-card { border-radius: 3px; box-shadow: none; }
.nw-card-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--brd); }
body.sk-cl .nw-card-head { background: var(--cl-sec); color: var(--cl-sec-txt); padding: 5px 10px; }
.nw-card-title { font-size: 14px; font-weight: 700; }
body.sk-cl .nw-card-title { font-size: 12px; }
.nw-card-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; font-size: 12px; font-weight: normal; }
.nw-card-body { padding: 12px 16px; }
body.sk-cl .nw-card-body { padding: 10px 12px; }
.nw-card--flush .nw-card-body { padding: 0; }
.nw-tabstrip { display: flex; border-bottom: 1px solid var(--brd); padding: 0 16px; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.nw-tabstrip::-webkit-scrollbar { display: none; }
.nw-tabbtn { background: none; border: 0; cursor: pointer; font: inherit; font-size: 13px; padding: 10px 14px; color: var(--txt); border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; text-decoration: none !important; }
.nw-tabbtn:hover { border-bottom-color: var(--brd2); }
.nw-tabbtn.active { border-bottom-color: var(--acc); font-weight: 700; color: var(--acc-h); }
.nw-tabbtn .nw-tab-count { color: var(--mut); font-weight: 400; font-size: 11.5px; margin-left: 4px; }
.nw-tabpane[hidden] { display: none; }
body.sk-cl .nw-tabstrip { padding: 0 8px; }

/* ─── 12. Record page ──────────────────────────────────────────────────── */
.nw-rechead { padding: 12px 16px; }
.nw-rechead-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nw-rechead-id { min-width: 0; display: flex; align-items: center; gap: 12px; }
.nw-recname { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.25; word-break: break-word; }
.nw-recactions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.nw-highlights { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--brd); }
.nw-highlight { padding: 2px 20px 2px 0; margin-right: 20px; border-right: 1px solid var(--brd); min-width: 0; max-width: 260px; }
.nw-highlight:last-child { border-right: 0; }
.nw-hl-label { font-size: 12px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nw-hl-value { font-size: 13.5px; font-weight: 600; word-break: break-word; }
.nw-hl-value .nw-empty { font-weight: 400; }
.nw-recbody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 12px; align-items: start; }
.nw-recbody > * { min-width: 0; }
/* Sections + fields (shared DOM) */
body.sk-lx .nw-sections { padding: 4px 16px 16px; }
.nw-sec-title { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
body.sk-lx .nw-sec-title { font-size: 13px; font-weight: 700; margin: 14px 0 2px; }
body.sk-lx .nw-sec-title::before { content: '▾'; font-size: 10px; color: var(--mut); transition: transform .12s ease; }
body.sk-lx .nw-sec.collapsed > .nw-sec-title::before { transform: rotate(-90deg); }
body.sk-cl .nw-sec-title { background: var(--cl-sec); color: var(--cl-sec-txt); font-size: 12px; font-weight: bold; padding: 5px 10px; margin: 14px -12px 0; }
.nw-sec.collapsed > .nw-sec-body, .nw-sec.collapsed > .nw-widget { display: none; }
body.sk-cl .nw-sec.collapsed > .nw-sec-title::after { content: " ▸"; color: var(--mut); }
.nw-sec-title .nw-sec-count { color: var(--mut); font-weight: 400; font-size: 12px; }
.nw-sec-title .nw-sec-actions { margin-left: auto; display: inline-flex; gap: 6px; font-weight: normal; font-size: 12px; }
.nw-sec-body { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
body.sk-cl .nw-sec-body { column-gap: 40px; padding-top: 4px; }
.nw-sec-body[data-cols="1"] { grid-template-columns: 1fr; }
.nw-sec-body[data-cols="3"] { grid-template-columns: 1fr 1fr 1fr; }
.nw-field { min-width: 0; }
body.sk-lx .nw-field { position: relative; padding: 6px 26px 4px 0; border-bottom: 1px solid var(--brd); }
body.sk-lx .nw-field-label { font-size: 12px; color: var(--mut); }
body.sk-lx .nw-field-value { font-size: 13px; word-break: break-word; min-height: 19px; }
body.sk-cl .nw-field { display: grid; grid-template-columns: 38% 62%; gap: 10px; padding: 4px 0; border-bottom: 1px dotted var(--brd); position: relative; align-items: baseline; }
body.sk-cl .nw-field-label { text-align: right; color: var(--mut); font-size: 11.5px; padding-top: 1px; word-break: break-word; }
body.sk-cl .nw-field-value { font-size: 12px; word-break: break-word; min-height: 16px; padding-right: 18px; }
body.sk-cl .nw-field[data-editable="1"] .nw-field-value { border-bottom: 1px dashed transparent; }
body.sk-cl .nw-field[data-editable="1"]:hover .nw-field-value { border-bottom-color: var(--brd2); cursor: text; }
.nw-pencil { position: absolute; background: none; border: 0; cursor: pointer; color: var(--mut2); padding: 2px 4px; border-radius: 4px; opacity: 0; display: inline-flex; }
body.sk-lx .nw-pencil { right: 2px; bottom: 6px; }
body.sk-cl .nw-pencil { right: 0; top: 3px; }
.nw-field:hover .nw-pencil, .nw-pencil:focus-visible { opacity: 1; }
.nw-pencil:hover { color: var(--acc); background: var(--hov); }
body.nw-editing .nw-pencil { display: none; }
.nw-field.nw-blank { border-bottom: 0 !important; min-height: 34px; pointer-events: none; }
body.sk-cl .nw-field.nw-blank { min-height: 26px; }
.nw-field .nw-input { margin-top: 2px; }
.nw-field.hidden-empty, .nw-sec.hidden-empty { display: none !important; }
.nw-hide-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mut); cursor: pointer; user-select: none; white-space: nowrap; padding: 10px 16px 10px 8px; }
.nw-hide-toggle input { margin: 0; }
body.sk-cl .nw-hide-toggle { padding: 0 2px; font-size: 11px; }
/* Layout with sidebar region */
.nw-has-side { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0 24px; align-items: start; }
.nw-lmain, .nw-lside { min-width: 0; }
.nw-lside .nw-sec { background: var(--card); border: 1px solid var(--brd); border-radius: 8px; padding: 2px 12px 10px; margin-bottom: 12px; }
body.sk-cl .nw-lside .nw-sec { border-radius: 3px; }
.nw-lside .nw-sec-body { grid-template-columns: 1fr !important; }
body.sk-lx .nw-lside .nw-sec-title { margin-top: 8px; }
.nw-jumps { display: none; }
/* Classic record bars */
.nw-cl-rectitle { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.nw-cl-rectitle-id { min-width: 0; }
.nw-cl-rec-eyebrow { font-size: 11px; color: var(--mut); }
.nw-cl-recname { margin: 0; font-size: 18px; font-weight: bold; word-break: break-word; }
.nw-cl-reclinks { margin-left: auto; font-size: 11px; color: var(--mut); white-space: nowrap; }
.nw-cl-detailbar { background: var(--cl-detailbar); border: 1px solid var(--brd); padding: 5px 9px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; border-radius: 3px 3px 0 0; }
.nw-cl-detailbar-label { font-weight: bold; font-size: 12px; margin-right: 8px; color: var(--txt); }
.nw-cl-detailwrap { border: 1px solid var(--brd); border-top: 0; border-radius: 0 0 3px 3px; padding: 2px 12px 12px; background: var(--card); margin-bottom: 16px; }
.nw-cl-highlights { display: flex; flex-wrap: wrap; gap: 4px 30px; padding: 8px 16px; margin: 0 0 8px; background: var(--card); border: 1px solid var(--brd2); border-radius: 6px; }
.nw-cl-hl-label { font-size: 10.5px; color: var(--mut); text-transform: uppercase; letter-spacing: .3px; }
.nw-cl-hl-value { font-size: 13px; font-weight: 600; }
.nw-cl-hl-value .nw-empty { font-weight: 400; }
.nw-cl-actionsbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nw-ab-spring { flex: 1 1 auto; }
.nw-conv-banner { background: #f0fdf4; border: 1px solid #86efac; color: #14532d; border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; font-size: 13px; }
.nw-conv-banner a { color: #14532d; font-weight: 700; text-decoration: underline; }

/* ─── 13. Related lists, widget rows, timeline, notes ──────────────────── */
.nw-rel-card { background: var(--card); border: 1px solid var(--brd); border-radius: 8px; box-shadow: 0 2px 2px rgba(0,0,0,.05); margin-bottom: 12px; overflow: hidden; }
.nw-rel-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; }
.nw-rel-title { font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.nw-rel-count { color: var(--mut); font-size: 12px; font-weight: 400; }
.nw-rel-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; }
.nw-rel-viewall { font-size: 12px; }
.nw-rel-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.nw-rel-table th { text-align: left; padding: 6px 12px; background: var(--thead); color: var(--mut); font-weight: 700; font-size: 12px; border-top: 1px solid var(--brd); border-bottom: 1px solid var(--brd); white-space: nowrap; }
.nw-rel-table td { padding: 7px 12px; border-bottom: 1px solid var(--brd); vertical-align: top; }
.nw-rel-table tr:last-child td { border-bottom: 0; }
.nw-rel-table tr.clickable { cursor: pointer; }
.nw-rel-table tr.clickable:hover { background: var(--hov); }
.nw-rel-table td .nw-sub { display: block; font-size: 11.5px; color: var(--mut); margin-top: 2px; }
.nw-rel-empty { padding: 16px; color: var(--mut); font-size: 12.5px; }
.nw-rel-foot { padding: 8px 16px; border-top: 1px solid var(--brd); font-size: 12px; text-align: center; }
body.sk-cl .nw-rel-card { border-radius: 3px; box-shadow: none; margin-bottom: 14px; }
body.sk-cl .nw-rel-head { background: var(--cl-sec); color: var(--cl-sec-txt); padding: 5px 10px; }
body.sk-cl .nw-rel-title { font-size: 12px; }
body.sk-cl .nw-rel-count { font-weight: normal; }
body.sk-cl .nw-rel-actions, body.sk-cl .nw-rel-viewall { font-size: 11px; }
body.sk-cl .nw-rel-table { font-size: 11.5px; }
body.sk-cl .nw-rel-table th { padding: 4px 9px; font-size: 11px; }
body.sk-cl .nw-rel-table td { padding: 5px 9px; }
/* Widget rows (notes, files, history cards) */
.nw-widget { min-height: 34px; }
.nw-w-list { display: flex; flex-direction: column; }
.nw-w-row { display: flex; align-items: flex-start; gap: 8px; padding: 7px 2px; border-bottom: 1px solid var(--brd); font-size: 12.5px; line-height: 1.4; }
.nw-w-row:last-child { border-bottom: 0; }
.nw-w-ic { flex: 0 0 auto; font-size: 14px; line-height: 1.3; display: inline-flex; }
.nw-w-main { flex: 1 1 auto; min-width: 0; }
.nw-w-line { display: block; color: var(--txt); overflow-wrap: anywhere; }
.nw-w-sub { display: block; font-size: 11px; color: var(--mut); margin-top: 1px; overflow-wrap: anywhere; }
.nw-w-side { flex: 0 0 auto; text-align: right; max-width: 45%; display: flex; gap: 4px; align-items: center; }
.nw-w-when { font-size: 11px; color: var(--mut); white-space: nowrap; }
.nw-w-empty, .nw-w-err { padding: 10px 2px; font-size: 12px; color: var(--mut); font-style: italic; }
.nw-w-err { color: var(--bad); font-style: normal; }
.nw-w-more { display: inline-block; margin-top: 8px; font-size: 11.5px; font-weight: 700; color: var(--acc); text-decoration: none; }
.nw-w-more:hover { text-decoration: underline; }
.nw-w-act { border: 0; background: none; cursor: pointer; opacity: .5; padding: 2px 4px; border-radius: 4px; display: inline-flex; color: var(--txt); }
.nw-w-act:hover { opacity: 1; background: var(--hov); }
.nw-w-act.nw-w-del:hover { background: rgba(234,0,30,.12); color: var(--bad); }
.nw-updrop { border: 2px dashed var(--brd2); border-radius: 8px; padding: 14px; text-align: center; color: var(--mut); font-size: 12px; cursor: pointer; margin-bottom: 10px; transition: border-color .12s ease, background .12s ease; }
.nw-updrop:hover, .nw-updrop.over { border-color: var(--acc); background: var(--hov); color: var(--txt); }
/* Activity timeline */
.nw-timeline { position: relative; padding-left: 30px; margin: 4px 0; }
.nw-timeline::before { content: ''; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px; background: var(--brd); }
.nw-tl-item { position: relative; padding: 4px 0 12px; }
.nw-tl-ic { position: absolute; left: -30px; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--card); border: 2px solid var(--brd); display: flex; align-items: center; justify-content: center; }
.nw-tl-ic .nw-tile { border-radius: 50%; }
.nw-tl-title { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nw-tl-meta { font-size: 11.5px; color: var(--mut); margin-top: 1px; }
.nw-tl-body { font-size: 12.5px; color: var(--txt); margin-top: 4px; white-space: pre-wrap; }
.nw-tl-item.done .nw-tl-title { color: var(--mut); }
.nw-tl-item.overdue .nw-tl-meta { color: var(--bad); font-weight: 600; }
.nw-tl-day { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--mut); margin: 10px 0 6px; }
/* Notes / long text / rich text */
.nw-notes { white-space: pre-wrap; word-break: break-word; background: var(--hov); border: 1px solid var(--brd); border-left: 3px solid var(--acc); border-radius: 6px; padding: 8px 10px; margin-top: 2px; font-size: 12.5px; line-height: 1.55; text-align: left; max-height: 260px; overflow-y: auto; }
body.sk-cl .nw-notes { border-radius: 3px; font-size: 12px; }
.nw-notes.nw-rich { white-space: normal; }
.nw-rich img { max-width: 100%; height: auto; border-radius: 4px; }
.nw-rich table { border-collapse: collapse; max-width: 100%; }
.nw-rich td, .nw-rich th { border: 1px solid var(--brd2); padding: 4px 8px; }
.nw-rich p { margin: 0 0 6px; } .nw-rich ul, .nw-rich ol { margin: 4px 0 6px; padding-left: 20px; }
.nw-rich-edit { min-height: 90px; max-height: 420px; overflow-y: auto; background: var(--card); line-height: 1.5; font-size: 13px; padding: 8px 10px; }
.nw-rich-edit:focus { outline: 2px solid var(--acc); outline-offset: -1px; }

/* ─── 14. Lists & tables ───────────────────────────────────────────────── */
.nw-listhead { padding: 12px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nw-listhead-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nw-list-eyebrow { font-size: 12px; color: var(--mut); }
.nw-viewname { margin: 0; font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.nw-viewname .nw-menu-wrap button, .nw-viewname > button { background: none; border: 0; cursor: pointer; font-size: 12px; color: var(--mut); padding: 4px; display: inline-flex; }
.nw-list-meta { font-size: 12px; color: var(--mut); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.nw-listtools { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nw-listtools input[type="search"], .nw-listtools input[type="text"] { height: 32px; border: 1px solid var(--brd2); border-radius: 4px; padding: 0 12px; font: inherit; background: var(--card); color: var(--txt); min-width: 200px; }
.nw-listtools input:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 3px var(--acc); }
.nw-cl-listtitle { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.nw-cl-listtitle h1 { margin: 0; font-size: 18px; font-weight: bold; }
.nw-cl-viewbar { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12px; flex-wrap: wrap; }
.nw-cl-viewbar select, .nw-cl-viewbar input { border: 1px solid var(--brd2); background: var(--card); color: var(--txt); font: inherit; padding: 3px 6px; border-radius: 3px; }
.nw-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nw-tablewrap.nw-fits { overflow: visible; }
.nw-table { width: 100%; border-collapse: collapse; }
body.sk-lx .nw-table { font-size: 13px; }
body.sk-lx .nw-table th { text-align: left; padding: 7px 12px; background: var(--thead); border-top: 1px solid var(--brd); border-bottom: 1px solid var(--brd); font-weight: 700; font-size: 12.5px; color: var(--txt); white-space: nowrap; }
body.sk-lx .nw-table td { padding: 7px 12px; border-bottom: 1px solid var(--brd); vertical-align: top; }
body.sk-lx .nw-table tbody tr:hover { background: var(--hov); }
body.sk-lx .nw-table tbody tr.nw-alt { background: var(--zebra); }
body.sk-lx .nw-table tfoot td { background: var(--thead); font-weight: 700; border-top: 2px solid var(--brd2); }
body.sk-cl .nw-table { font-size: 11.5px; border: 1px solid var(--brd); }
body.sk-cl .nw-table th { text-align: left; padding: 5px 9px; background: var(--thead); border: 1px solid var(--brd); font-size: 11px; font-weight: bold; color: var(--txt); white-space: nowrap; }
body.sk-cl .nw-table td { padding: 5px 9px; border-bottom: 1px solid var(--brd); vertical-align: top; }
body.sk-cl .nw-table tbody tr.nw-alt { background: var(--zebra); }
body.sk-cl .nw-table tfoot td { background: var(--thead); font-weight: bold; border-top: 2px solid var(--brd2); }
.nw-table th a { color: inherit !important; text-decoration: none !important; display: inline-flex; align-items: center; gap: 4px; }
.nw-table th a:hover { color: var(--acc) !important; }
.nw-table th.sorted a { color: var(--acc-h) !important; }
.nw-table th .nw-sort-ic { font-size: 10px; color: var(--mut); }
.nw-table .nw-num { text-align: right; }
.nw-table tbody td.nw-num, .nw-table td.nw-nowrap { white-space: nowrap; }
.nw-table td.nw-namecell a, .nw-table td .nw-namelink { font-weight: 600; }
.nw-table td .nw-sub { display: block; font-size: 11.5px; color: var(--mut); margin-top: 1px; }
.nw-table .nw-rowcheck { width: 30px; text-align: center; padding-left: 8px !important; padding-right: 4px !important; }
.nw-table tbody tr.selected { background: color-mix(in srgb, var(--acc) 10%, var(--card)) !important; }
.nw-table .nw-row-actions { opacity: 0; display: inline-flex; gap: 2px; }
.nw-table tr:hover .nw-row-actions, .nw-table tr:focus-within .nw-row-actions { opacity: 1; }
.nw-table td.nw-empty-row { text-align: center; color: var(--mut); padding: 26px !important; }
.nw-tablewrap.nw-fits .nw-table thead th { position: sticky; top: var(--nw-sticky-top, 0); z-index: 4; box-shadow: inset 0 -1px 0 var(--brd), inset 0 1px 0 var(--brd); }
.nw-table.nw-dense { font-size: 11px !important; }
.nw-table.nw-dense th { padding: 4px 5px !important; font-size: 10px !important; line-height: 1.15; }
.nw-table.nw-dense td { padding: 3px 5px !important; line-height: 1.25; }
.nw-table.nw-dense .nw-check { width: 13px; height: 13px; font-size: 10px; }
.nw-table tbody tr.nw-grouprow > td { background: color-mix(in srgb, var(--acc) 14%, var(--card)); border-top: 1px solid var(--brd2); border-bottom: 1px solid var(--brd2); padding: 5px 8px; white-space: nowrap; }
.nw-grouprow .nw-glabel { font-weight: 800; font-size: 12px; color: var(--txt); }
.nw-grouprow .nw-gcount { margin-left: 10px; padding: 1px 8px; border-radius: 999px; background: var(--acc); color: #fff; font-size: 10.5px; font-weight: 700; }
.nw-totals-label { font-weight: 700; }
.nw-totals .nw-avg, .nw-table tfoot .nw-avg { display: block; font-weight: 400; font-size: 11px; color: var(--mut); }
.nw-pager { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 12.5px; color: var(--mut); flex-wrap: wrap; }
.nw-pager a { font-weight: 600; }
.nw-pager a.disabled { pointer-events: none; opacity: .45; }
.nw-pager .nw-spring { flex: 1; }
.nw-listctl { display: inline-flex; align-items: center; gap: 6px; }
.nw-listctl select { font: inherit; font-size: 11px; padding: 1px 4px; border-radius: 3px; border: 1px solid var(--brd2); background: var(--card); color: var(--txt); }
.nw-listctl-sep { color: var(--brd2); }
.nw-filterchip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: var(--hov); border: 1px solid var(--brd); font-size: 11.5px; }
.nw-filterchip a { color: var(--mut) !important; text-decoration: none !important; }
.nw-bulkbar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: color-mix(in srgb, var(--acc) 10%, var(--card)); border-bottom: 1px solid var(--brd); font-size: 12.5px; }
/* Kanban */
.nw-kanban { display: flex; gap: 12px; overflow-x: auto; align-items: flex-start; padding: 4px 2px 12px; -webkit-overflow-scrolling: touch; }
.nw-kcol { flex: 0 0 270px; background: var(--hov); border: 1px solid var(--brd); border-radius: 8px; min-width: 0; }
.nw-kcol.over { outline: 2px dashed var(--acc); outline-offset: -2px; }
.nw-kcol-head { padding: 10px 12px; display: flex; align-items: baseline; gap: 6px; font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--brd); }
.nw-kcol-count { color: var(--mut); font-weight: 400; font-size: 12px; }
.nw-kcol-sum { margin-left: auto; font-size: 11.5px; color: var(--mut); font-weight: 600; }
.nw-kcards { padding: 8px; display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 280px); overflow-y: auto; min-height: 40px; }
.nw-kcard { background: var(--card); border: 1px solid var(--brd); border-radius: 6px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(0,0,0,.06); cursor: grab; }
.nw-kcard.dragging { opacity: .5; }
.nw-kcard-title { font-size: 13px; font-weight: 600; word-break: break-word; }
.nw-kcard-sub { font-size: 12px; color: var(--mut); margin-top: 2px; }
.nw-kcard-meta { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 11.5px; color: var(--mut); margin-top: 6px; }

/* ─── 15. Home ─────────────────────────────────────────────────────────── */
.nw-home-hero { padding: 18px 20px; }
.nw-home-hero h1 { margin: 0 0 2px; font-size: 20px; }
.nw-home-hero p { margin: 0; color: var(--mut); }
body.sk-cl .nw-home-hero { padding: 0 0 14px; }
body.sk-cl .nw-home-hero h1 { font-size: 18px; }
.nw-homegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 14px; }
.nw-homecard { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--card); border: 1px solid var(--brd); border-radius: 8px; box-shadow: 0 2px 2px rgba(0,0,0,.05); color: var(--txt) !important; text-decoration: none !important; }
.nw-homecard:hover { box-shadow: 0 3px 8px rgba(0,0,0,.12); }
body.sk-cl .nw-homecard { border-radius: 3px; box-shadow: none; }
.nw-homecard-title { font-size: 14px; font-weight: 700; display: block; }
.nw-homecard-sub { font-size: 12px; color: var(--mut); display: block; }
.nw-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.nw-kpi { background: var(--card); border: 1px solid var(--brd); border-radius: 8px; padding: 14px 16px; text-decoration: none !important; color: var(--txt) !important; display: block; min-width: 0; }
body.sk-cl .nw-kpi { border-radius: 3px; }
a.nw-kpi:hover { border-color: var(--acc); }
.nw-kpi-label { font-size: 11.5px; color: var(--mut); text-transform: uppercase; letter-spacing: .4px; font-weight: 700; }
.nw-kpi-num { font-size: 26px; font-weight: 900; letter-spacing: -.5px; line-height: 1.2; margin-top: 2px; color: var(--nw-brand); font-variant-numeric: tabular-nums; }
.nw-kpi-num.ok { color: var(--ok); } .nw-kpi-num.warn { color: var(--warn); } .nw-kpi-num.bad { color: var(--bad); } .nw-kpi-num.plain { color: var(--txt); }
.nw-kpi-sub { font-size: 11.5px; color: var(--mut); margin-top: 2px; }
.nw-dash { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 0 16px; }
.nw-dash-panel { background: var(--card); border: 1px solid var(--brd); border-radius: 8px; padding: 12px 14px 8px; box-shadow: 0 2px 2px rgba(0,0,0,.05); }
body.sk-cl .nw-dash-panel { border-radius: 4px; box-shadow: none; }
.nw-dash-title { font-size: 14px; font-weight: 700; }
.nw-dash-sub { font-size: 11px; color: var(--mut); margin: 1px 0 8px; }
.nw-dash-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.nw-dash-yr { font-size: 12px; font-weight: 700; width: 34px; flex: none; }
.nw-dash-bar { flex: 1 1 auto; height: 16px; background: var(--hov); border-radius: 3px; overflow: hidden; }
.nw-dash-bar > span { display: block; height: 100%; background: color-mix(in srgb, var(--acc) 45%, var(--card)); border-radius: 3px; }
.nw-dash-bar > span.cur { background: var(--acc); }
.nw-dash-val { flex: none; min-width: 116px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nw-dash-chip { font-size: 10px; font-weight: 700; border: 1px solid; border-radius: 999px; padding: 1px 7px; }
.nw-dash-chip.up { color: var(--ok); border-color: color-mix(in srgb, #2e844a 40%, var(--card)); background: color-mix(in srgb, #2e844a 10%, var(--card)); }
.nw-dash-chip.down { color: var(--bad); border-color: color-mix(in srgb, #b83c3c 40%, var(--card)); background: color-mix(in srgb, #b83c3c 8%, var(--card)); }
.nw-dash-tools { display: flex; justify-content: flex-end; gap: 4px; font-size: 11px; color: var(--mut); margin: 0 0 6px; }
.nw-homegrid--admin { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.nw-admincard { background: var(--card); border: 1px solid var(--brd2); border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.nw-admincard-title { font-size: 14.5px; font-weight: 800; letter-spacing: .2px; }
.nw-admincard-sub { font-size: 12.5px; color: var(--mut); line-height: 1.45; flex: 1; }
.nw-admincard-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.nw-group-label { font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--mut); margin: 18px 0 10px; padding-bottom: 4px; border-bottom: 1px solid var(--brd2); }

/* ─── 16. Setup rail, empty states, skeletons, misc ────────────────────── */
.nw-setup { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
.nw-setup-rail { background: var(--card); border: 1px solid var(--brd); border-radius: 8px; padding: 8px 0; position: sticky; top: calc(var(--nw-chrome-h) + 12px); }
body.sk-cl .nw-setup-rail { border-radius: 3px; position: static; }
.nw-setup-rail-head { padding: 10px 14px 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--mut); }
.nw-setup-rail a { display: flex; align-items: center; gap: 8px; padding: 7px 14px; font-size: 13px; color: var(--txt) !important; text-decoration: none !important; border-left: 3px solid transparent; }
.nw-setup-rail a:hover { background: var(--hov); }
.nw-setup-rail a.active { background: color-mix(in srgb, var(--acc) 12%, var(--card)); color: var(--acc-h) !important; font-weight: 700; border-left-color: var(--acc); }
.nw-setup-main { min-width: 0; }
.nw-empty-state { text-align: center; padding: 40px 20px; color: var(--mut); }
.nw-empty-ic { margin-bottom: 12px; display: flex; justify-content: center; }
.nw-empty-title { font-size: 15px; font-weight: 700; color: var(--txt); }
.nw-empty-sub { font-size: 13px; margin-top: 4px; }
.nw-empty-actions { margin-top: 14px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.nw-skel { display: flex; flex-direction: column; gap: 8px; padding: 10px 2px; }
.nw-skel span { display: block; height: 11px; border-radius: 6px; background: var(--hov); animation: nw-pulse 1.2s ease-in-out infinite; }
.nw-skel span:nth-child(2) { width: 82%; animation-delay: .15s; }
.nw-skel span:nth-child(3) { width: 64%; animation-delay: .3s; }
@keyframes nw-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.nw-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--brd2); border-top-color: var(--acc); border-radius: 50%; animation: nw-spin .7s linear infinite; vertical-align: middle; }
@keyframes nw-spin { to { transform: rotate(360deg); } }
.nw-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 16px; border-bottom: 1px solid var(--brd); }
.nw-list-plain { list-style: none; margin: 0; padding: 0; }
.nw-list-plain li { padding: 6px 0; border-bottom: 1px solid var(--brd); }
.nw-list-plain li:last-child { border-bottom: 0; }
.nw-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; font-size: 12.5px; }
.nw-dl dt { color: var(--mut); } .nw-dl dd { margin: 0; }
.nw-progress { height: 6px; background: var(--hov); border-radius: 999px; overflow: hidden; }
.nw-progress > span { display: block; height: 100%; background: var(--acc); border-radius: 999px; }
.nw-beta-pill { position: fixed; right: 16px; bottom: 16px; z-index: 99900; background: var(--acc); color: #fff; font-weight: 700; font-size: 12px; padding: 8px 16px; border-radius: 50px; text-decoration: none !important; box-shadow: 0 4px 14px rgba(0,0,0,.2); }

/* ─── 17. Login page ───────────────────────────────────────────────────── */
body.nw-login-page { background: var(--bg); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 13px; }
.nw-login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; gap: 16px; }
.nw-login-card { width: 380px; max-width: 100%; background: var(--card); border: 1px solid var(--brd); border-radius: 12px; padding: 28px 28px 24px; box-shadow: 0 10px 40px rgba(0,0,0,.08); }
.nw-brandbar { border-top: 3px solid var(--nw-brand); }
.nw-login-brand { display: flex; justify-content: center; margin-bottom: 6px; }
.nw-login-brand .nw-logo { height: 38px; width: auto; }
.nw-login-tagline { text-align: center; color: var(--mut); font-size: 13px; margin: 0 0 18px; }
.nw-login-form .nw-label, body.sk-cl .nw-login-form .nw-label { margin-top: 12px; margin-bottom: 4px; padding-top: 0; text-align: left; font-weight: 600; font-size: 12px; }
.nw-login-demo code { white-space: nowrap; }
.nw-login-form .nw-input { height: 38px; padding: 0 12px; border: 1px solid var(--brd2); border-radius: 6px; }
.nw-login-form .nw-input:focus { border-color: var(--nw-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nw-brand) 25%, transparent); outline: none; }
.nw-pwwrap { position: relative; }
.nw-pwwrap .nw-input { padding-right: 40px; }
.nw-pwtoggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--mut); padding: 6px; border-radius: 4px; cursor: pointer; display: inline-flex; }
.nw-pwtoggle:hover { color: var(--txt); background: var(--hov); }
.nw-login-remember { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-top: 12px; color: var(--txt); cursor: pointer; }
.nw-login-submit { width: 100%; height: 38px !important; margin-top: 16px; font-size: 14px !important; border-radius: 6px !important; }
.nw-login-submit:focus-visible { outline-color: var(--nw-brand); }
.nw-login-demo { margin-top: 14px; font-size: 12px; color: var(--mut); background: var(--hov); border-radius: 6px; padding: 8px 10px; text-align: center; }
.nw-login-demo code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--txt); }
.nw-login-foot { font-size: 12px; color: var(--mut); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; }
.nw-login-modes { display: inline-flex; gap: 4px; }
.nw-login-modes a { padding: 2px 9px; border: 1px solid var(--brd); border-radius: 20px; font-size: 11px; color: var(--mut); text-decoration: none !important; }
.nw-login-modes a.on { background: var(--acc); border-color: var(--acc); color: #fff; }
.nw-login-page .nw-flash { margin-bottom: 4px; }

/* ─── 18. Locked palette + editing state ───────────────────────────────── */
body.md-light.nw-locked main, body.md-auto.nw-locked main { --bg: #cfcdcd; --card: #dedcdc; --brd: #b3b0ae; --brd2: #9e9b98; --hov: #d3d1d1; background: var(--bg); }
body.md-dark.nw-locked main { --bg: #0e0f11; --card: #151619; --brd: #2c2d33; --brd2: #3a3b42; --hov: #1b1c20; background: var(--bg); }
@media (prefers-color-scheme: dark) { body.md-auto.nw-locked main { --bg: #0e0f11; --card: #151619; --brd: #2c2d33; --brd2: #3a3b42; --hov: #1b1c20; background: var(--bg); } }
body.nw-locked .nw-recname, body.nw-locked .nw-cl-recname, body.nw-locked .nw-field-value, body.nw-locked .nw-hl-value, body.nw-locked .nw-cl-hl-value { color: var(--mut); }
body.nw-locked .nw-field-value a { color: inherit; }
body.nw-locked .nw-sec-title::before { content: "READ-ONLY"; display: inline-block; margin-right: 8px; padding: 1px 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .6px; line-height: 14px; color: var(--mut); border: 1px solid var(--brd2); border-radius: 3px; vertical-align: 1px; transform: none !important; }
body.nw-locked .nw-pencil { display: none !important; }
body.nw-locked .nw-conv-banner { filter: none; opacity: 1; }

/* ─── 19. Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1100px) { .nw-dash { grid-template-columns: 1fr; } }
@media (max-width: 980px) { .nw-recbody { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
    .nw-sec-body, body.sk-cl .nw-sec-body { grid-template-columns: 1fr; }
    .nw-sec-body[data-cols="3"] { grid-template-columns: 1fr 1fr; }
    .nw-form-grid, .nw-form-grid[data-cols="3"] { grid-template-columns: 1fr; }
    .nw-has-side { grid-template-columns: 1fr; }
    .nw-lside { order: 2; }
    .nw-jumps { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 8px 12px; margin: 0; border-bottom: 1px solid var(--brd); background: var(--card); }
    .nw-jumps a { flex: none; font-size: 12px; padding: 4px 11px; border-radius: 12px; border: 1px solid var(--brd); text-decoration: none !important; color: var(--txt) !important; background: var(--hov); white-space: nowrap; }
    .nw-setup { grid-template-columns: 1fr; }
    .nw-setup-rail { position: static; display: flex; flex-wrap: wrap; padding: 6px; gap: 2px; }
    .nw-setup-rail-head { display: none; }
    .nw-setup-rail a { border-left: 0; border-radius: 6px; padding: 6px 10px; font-size: 12.5px; }
    .nw-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Classic desktop: fixed chrome — only the main column scrolls */
@media (min-width: 861px) {
    body.sk-cl:not(.nw-login-page) { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
    body.sk-cl > * { flex: 0 0 auto; }
    body.sk-cl .nw-cl-frame { flex: 1 1 auto; min-height: 0; overflow: hidden; }
    body.sk-cl .nw-cl-sidebar { overflow-y: auto; }
    body.sk-cl .nw-cl-main { overflow-y: auto; min-width: 0; }
    body.sk-cl .nw-cl-recsticky { position: sticky; z-index: 30; background: var(--bg); box-shadow: 0 3px 8px rgba(0,0,0,.06); top: -12px; margin: -12px -16px 0; padding: 12px 16px 6px; }
    body.sk-cl .nw-savebar { position: sticky; bottom: 0; margin: 0 -16px -60px; }
}
@media (max-width: 860px) { .nw-cl-sidebar { display: none; } }
@media (min-width: 761px) { .nw-cl-tabs { overflow: visible; } }
@media (max-width: 760px) {
    body.sk-lx { --nw-chrome-h: 50px; --nw-sticky-top: 0px; }
    .nw-menu-mobile { display: block; }
    .nw-search-toggle { display: inline-flex; }
    /* Header keeps brand + name/avatar; the search box hides until the magnifier opens it as a full-width row */
    .nw-lx-search, .nw-cl-search { display: none; order: 10; flex-basis: 100%; max-width: none; margin: 0; }
    #nw-header.nw-search-open .nw-lx-search, #nw-header.nw-search-open .nw-cl-search { display: flex; }
    .nw-cl-search input { flex: 1; width: auto; min-width: 0; }
    .nw-cl-top { gap: 10px; padding: 8px 10px; row-gap: 8px; }
    .nw-cl-links { gap: 6px; }
    .nw-cl-links .nw-cl-toplink, .nw-cl-links .nw-cl-sep { display: none; }
    .nw-cl-tabs { padding: 8px 8px 0; -webkit-overflow-scrolling: touch; }
    .nw-lx-global { flex-wrap: wrap; height: auto; row-gap: 6px; padding: 6px 10px; min-height: 50px; }
    .nw-lx-nav { top: auto; position: static; -webkit-overflow-scrolling: touch; }
    .nw-cl-tabs, .nw-lx-nav { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%); }
    .nw-menu { max-width: calc(100vw - 16px); }
    .nw-sec-body[data-cols], body.sk-cl .nw-sec-body[data-cols] { grid-template-columns: 1fr; }
    .nw-modal { padding: 12px 8px; align-items: flex-end; }
    .nw-modal-card { max-height: 92vh; border-radius: 12px; }
    .nw-waffle-menu { position: fixed !important; left: 8px !important; right: 8px !important; max-width: none; }
}
@media (max-width: 700px) {
    .nw-lx-main { padding: 10px 8px 90px; }
    .nw-recactions { width: 100%; margin-left: 0; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
    .nw-recactions::-webkit-scrollbar { display: none; }
    .nw-listhead { flex-direction: column; align-items: stretch; }
    .nw-listtools { margin-left: 0; }
    .nw-listtools form { flex: 1; }
    .nw-listtools input[type="search"] { min-width: 0; width: 100%; }
    .nw-tabstrip { flex-wrap: nowrap; padding: 0 10px; }
    .nw-hide-toggle { flex-basis: 100%; padding: 6px 0 8px; margin-left: 0; }
    .nw-cl-main { padding: 10px 8px 70px; }
    .nw-cl-viewbar { margin-left: 0; }
    .nw-cl-detailbar { row-gap: 5px; }
    .nw-cl-detailbar .nw-hide-toggle { flex-basis: 100%; }
    body.sk-cl .nw-field { grid-template-columns: 1fr; gap: 1px; }
    body.sk-cl .nw-field-label { text-align: left; font-size: 10.5px; }
    .nw-form-row { grid-template-columns: 1fr; gap: 2px; }
    body.sk-cl .nw-label { text-align: left; padding-top: 0; }
    .nw-label { padding-top: 0; }
    .nw-savebar { padding: 8px; }
    .nw-page-actions { margin-left: 0; width: 100%; }
    .nw-grid-2, .nw-grid-3 { grid-template-columns: 1fr; }
    .nw-kcol { flex-basis: 240px; }
}
@media (max-width: 640px) {
    .nw-brand .nw-logo { display: none !important; }
    .nw-brand .nw-mark { display: block; }
    .nw-highlight { max-width: 100%; border-right: 0; margin-right: 0; padding-right: 0; flex: 1 1 45%; }
    .nw-cl-top { gap: 8px; }
    .nw-menu-head span { font-size: 11px; }
}
@media (max-width: 480px) {
    .nw-waffle-menu .nw-waffle-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .nw-waffle-item { padding: 8px 4px; font-size: 11px; }
    #nw-toast { top: 10px; padding: 8px 14px; font-size: 12.5px; }
}

/* ─── 20. Print & reduced motion ───────────────────────────────────────── */
@media print {
    .nw-lx-global, .nw-lx-nav, .nw-cl-top, .nw-cl-tabs, .nw-cl-band, .nw-cl-sidebar, .nw-savebar, #nw-toast, .nw-menu, .nw-modal, .nw-pencil, .nw-recactions, .nw-page-actions, .nw-crumbs, .nw-skip { display: none !important; }
    body.sk-cl, body.sk-lx { height: auto !important; overflow: visible !important; display: block !important; background: #fff !important; color: #000 !important; }
    .nw-cl-frame, .nw-cl-main { overflow: visible !important; display: block !important; padding: 0 !important; }
    .nw-card, .nw-rel-card { box-shadow: none !important; break-inside: avoid; }
    .nw-tablewrap { overflow: visible !important; }
    a { color: inherit !important; text-decoration: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}