:root {
  --bg: #f5f6f8; --card: #fff; --ink: #1c2330; --muted: #667085; --line: #e3e6eb;
  --accent: #2456d6; --good: #0f7b4b; --bad: #b42318; --warn: #a15c00;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #12151b; --card: #1a1f28; --ink: #e8ebf0; --muted: #98a2b3; --line: #2b323d; --accent: #6f95ff; --good: #4cc38a; --bad: #f97066; --warn: #f0b155; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: var(--bg); color: var(--ink); }
.hidden { display: none !important; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 10px 20px; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.spacer { flex: 1; }
main { max-width: 1280px; margin: 0 auto; padding: 20px; }
h2 { margin: 0 0 12px; font-size: 18px; } h3 { margin: 18px 0 8px; font-size: 15px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.login { display: grid; place-items: center; min-height: 100vh; }
.login-card { width: 340px; display: grid; gap: 12px; }
.login-card h1 { margin: 0; font-size: 20px; }
label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
input, select, textarea { font: inherit; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--ink); }
textarea { min-height: 64px; resize: vertical; }
.btn { font: inherit; padding: 7px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--ink); cursor: pointer; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.link { border: 0; background: none; color: var(--accent); padding: 0; text-decoration: underline; }
.error { color: var(--bad); margin: 0; min-height: 1em; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.filters label { min-width: 140px; }
.crumbs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; color: var(--muted); }
.crumbs a { color: var(--accent); cursor: pointer; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 8px 0 4px; }
.stat { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--card); }
.stat .n { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat .l { font-size: 12px; color: var(--muted); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.scroll { overflow-x: auto; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 12px; border: 1px solid var(--line); }
.pill.interested { color: var(--good); border-color: var(--good); }
.pill.not_interested, .pill.invalid_number, .pill.wrong_number { color: var(--bad); border-color: var(--bad); }
.pill.follow_up_required { color: var(--warn); border-color: var(--warn); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 14px 0 10px; }
.tab { padding: 8px 12px; cursor: pointer; border-bottom: 2px solid transparent; color: var(--muted); }
.tab.active { color: var(--ink); border-color: var(--accent); }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: grid; place-items: center; z-index: 20; padding: 16px; }
.modal-box { background: var(--card); border-radius: 12px; padding: 20px; width: min(640px, 100%); max-height: 90vh; overflow: auto; }
.form-grid { display: grid; gap: 12px; }
.form-grid.two { grid-template-columns: 1fr 1fr; }
.muted { color: var(--muted); }
.hist-item { border-left: 3px solid var(--line); padding: 4px 0 4px 12px; margin: 8px 0; }
.hist-item.latest { border-color: var(--accent); }

/* ---- theme switch (applies to all panels) ---- */
:root[data-theme="dark"] { --bg: #12151b; --card: #1a1f28; --ink: #e8ebf0; --muted: #98a2b3; --line: #2b323d; --accent: #8b5cf6; --good: #4cc38a; --bad: #f97066; --warn: #f0b155; }
:root[data-theme="light"] { --bg: #f5f6f8; --card: #fff; --ink: #1c2330; --muted: #667085; --line: #e3e6eb; --accent: #6d3fe0; --good: #0f7b4b; --bad: #b42318; --warn: #a15c00; }

/* ---- user panel shell ---- */
.shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.side { background: var(--card); border-right: 1px solid var(--line); padding: 0 0 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; padding: 18px 20px; font-size: 18px; font-weight: 700; }
.logo { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #f97316, #6366f1); color: #fff; font-size: 18px; }
.nav { display: flex; align-items: center; gap: 12px; padding: 11px 20px; cursor: pointer; color: var(--muted); }
.nav:hover { color: var(--ink); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.nav.active { color: var(--ink); background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 3px 0 var(--accent); }
.ic { width: 20px; height: 20px; flex: none; }
.content { min-width: 0; }
.bar { display: flex; align-items: center; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--line); background: var(--card); position: sticky; top: 0; z-index: 4; }
.icon-btn { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 6px; }
.icon-btn:hover { color: var(--ink); }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 600; font-size: 13px; }
.page { padding: 24px; max-width: 1180px; }
.quick { position: relative; border: 1px solid var(--line); background: var(--card); border-radius: 14px; padding: 28px 18px 16px; margin: 10px 0 20px; }
.quick-tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; padding: 3px 14px; border-radius: 99px; font-size: 13px; font-weight: 600; }
.quick-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.quick-row a { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 10px; background: var(--bg); cursor: pointer; }
.quick-row a:hover { outline: 1px solid var(--accent); }
.welcome h2 { font-size: 20px; } .welcome li { margin: 10px 0; line-height: 1.6; }
.nowrap { white-space: nowrap; }
@media (max-width: 800px) { .shell { grid-template-columns: 1fr; } }

/* ---- admin shell, dashboard ---- */
.grp-h { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 20px; background: none; border: 0; color: var(--ink); font: inherit; cursor: pointer; text-align: left; }
.grp-h:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.grp-h span { flex: 1; } .grp-h.off { cursor: default; color: var(--muted); }
.chev { margin-left: auto; width: 16px; height: 16px; transition: transform .15s; color: var(--muted); }
.grp.open .chev { transform: rotate(180deg); }
.grp-items { display: none; padding-bottom: 6px; } .grp.open .grp-items { display: block; }
.sub { display: flex; align-items: center; justify-content: space-between; padding: 8px 20px 8px 52px; color: var(--muted); cursor: pointer; font-size: 13.5px; }
.sub:hover { color: var(--ink); } .sub.active { color: var(--ink); background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 3px 0 var(--accent); }
.sub.off { cursor: not-allowed; opacity: .6; }
.soon { font-style: normal; font-size: 10.5px; border: 1px solid var(--line); border-radius: 99px; padding: 1px 7px; color: var(--muted); }
.dash-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.range { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 6px 12px; }
.range input { border: 0; background: transparent; padding: 4px; color: var(--ink); font: inherit; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 14px; margin-bottom: 20px; }
.kpi { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.kl { color: var(--muted); font-size: 13px; } .kv { color: var(--accent); font-size: 30px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kic { width: 26px; height: 26px; color: var(--accent); flex: none; }
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 16px; }
.chart-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.chart-card h3 { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 17px; }
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--line); stroke-width: 1; } .chart .tick { fill: var(--muted); font-size: 10.5px; }
.chart .area { fill: color-mix(in srgb, #3b82f6 40%, transparent); } .chart .line { fill: none; stroke: #3b82f6; stroke-width: 1.8; }
.chart .pt { fill: #3b82f6; } .chart .swatch { fill: color-mix(in srgb, #3b82f6 40%, transparent); stroke: #3b82f6; }
.chart .legend text { fill: var(--muted); font-size: 11px; }

.menu-btn { display: none; font-size: 20px; line-height: 1; }
@media (max-width: 800px) {
  .menu-btn { display: inline-block; }
  .side.admin, .side.drawer { display: none; }
  .side.admin.open, .side.drawer.open { display: block; position: fixed; inset: 0 auto 0 0; width: min(270px, 82vw); height: 100vh; overflow-y: auto; z-index: 30; box-shadow: 0 0 40px rgba(0,0,0,.5); }
  .side.admin .brand, .side.drawer .brand { display: flex; }
  .side.drawer .nav span { display: inline; }
  .page { padding: 16px; }
  .dash-top { flex-wrap: wrap; }
  .range input { width: 128px; }
}

/* Manage Leads */
.sub.hasic { justify-content: flex-start; gap: 12px; padding-left: 22px; }
.sub.hasic .sic { width: 18px; height: 18px; flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.chip { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 99px; padding: 6px 14px; font: inherit; font-size: 13px; cursor: pointer; }
.chip strong { font-variant-numeric: tabular-nums; margin-left: 4px; }
.chip.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.pager { display: flex; align-items: center; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.pager .muted { margin-right: auto; }
.hb { display: grid; grid-template-columns: 130px 1fr 52px; gap: 10px; align-items: center; margin: 7px 0; font-size: 13px; }
.hb .ht { height: 10px; background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 99px; overflow: hidden; }
.hb .hf { height: 100%; background: var(--accent); border-radius: 99px; }
.hb .hn { text-align: right; font-variant-numeric: tabular-nums; }
.tgroup { border-top: 1px solid var(--line); padding: 8px 0; }
.tg-h { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.urow { display: flex; gap: 12px; align-items: center; padding: 4px 0 4px 24px; flex-wrap: wrap; }
.urow > label { min-width: 170px; display: inline-flex; flex-direction: row; align-items: center; gap: 8px; }
.urow input[type=checkbox], .tg-h input[type=checkbox], .inl input[type=checkbox], .inl input[type=radio] { width: auto; margin: 0; } .urow .muted { flex: 1; min-width: 140px; } .urow .cnt { width: 96px; }
.card.ok { border-color: var(--good); color: var(--good); }
.card.sticky { position: sticky; bottom: 0; z-index: 5; }
.inl { display: inline-flex; align-items: center; gap: 6px; flex-direction: row; }
.nowrap { white-space: nowrap; }
.ulist { max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
.ulist > div { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0; } .ulist > div > strong { flex-basis: 100%; }
@media (max-width: 800px) { .hb { grid-template-columns: 96px 1fr 44px; } .urow { padding-left: 0; } }

/* Distribute dialog */
.modal-box { position: relative; }
.modal-box .x { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--ink) 12%, transparent); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
.mc { text-align: center; } .big { font-size: 18px; line-height: 2; }
.gbtns { display: grid; gap: 12px; margin: 18px 0 6px; }
.gbtn { border: 0; border-radius: 6px; padding: 10px 14px; font: inherit; font-weight: 600; font-size: 14px; color: #fff; cursor: pointer; }
.gbtn:disabled { opacity: .45; cursor: not-allowed; } .gbtn em { font-weight: 400; font-style: normal; font-size: 11px; margin-left: 6px; }
.g-green { background: #6bd49b; color: #0b3a22; } .g-yellow { background: #f3c244; color: #3a2a00; } .g-blue { background: #5bb6ee; } .g-teal { background: #4fae9e; } .g-pink { background: #cc3fa0; } .g-indigo { background: #4b45d9; }
.c-blue { color: #5ba8f5; } .c-green { color: #52d6a0; } .c-orange { color: #f5b042; } .c-pink { color: #e04fb0; }

/* Upload Fresh Leads */
.up-tiles { display: flex; justify-content: center; align-items: center; gap: clamp(24px, 8vw, 120px); padding: 36px 8px; flex-wrap: wrap; border: 2px dashed transparent; border-radius: 12px; }
.up-tiles.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.up-tile { background: none; border: 0; padding: 0; cursor: pointer; opacity: .92; transition: transform .12s, opacity .12s; }
.up-tile:hover, .up-tile:focus-visible { transform: translateY(-3px); opacity: 1; }
.up-svg { width: clamp(140px, 22vw, 260px); height: auto; display: block; }
.sep { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.modes { display: grid; gap: 10px; }
.mode { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; cursor: pointer; }
.mode:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.mode input { position: absolute; opacity: 0; pointer-events: none; }
.mode .dot { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--c); margin-top: 2px; position: relative; }
.mode:has(input:checked) .dot::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--c); }

/* Auto-assign form */
.sgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; }
@media (max-width: 900px) { .sgrid { grid-template-columns: 1fr; } }
.lbl { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.daychips { display: flex; flex-wrap: wrap; gap: 6px; }
.dchip { border: 1px solid var(--line); background: none; color: var(--ink); border-radius: 99px; padding: 5px 11px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.dchip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.card.flat { margin: 16px 0 0; box-shadow: none; }
.switch { display: inline-flex; flex-direction: row; align-items: center; gap: 10px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .knob { width: 38px; height: 22px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 25%, transparent); position: relative; transition: background .15s; flex: none; }
.switch .knob::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch input:checked + .knob { background: var(--accent); } .switch input:checked + .knob::after { transform: translateX(16px); }
.switch input:focus-visible + .knob { outline: 2px solid var(--accent); outline-offset: 2px; }
.tag { display: inline-block; border-radius: 99px; background: color-mix(in srgb, var(--ink) 12%, transparent); padding: 1px 9px; font-size: 12px; margin-left: 4px; }
.stat-pill { display: inline-block; border-radius: 99px; padding: 2px 12px; font-size: 13px; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.stat-pill.on { background: #5fd6a0; color: #0c3b27; }
.btn.sm { padding: 4px 10px; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.btn.danger { color: #ef6a6a; border-color: #ef6a6a; }
.sgrid label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.sgrid input, .sgrid select { width: 100%; height: 40px; box-sizing: border-box; margin: 0; }

/* Manage Feedback */
.fbnote { font-size: 13px; margin: 0 0 12px; }
.fbbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.fbbar .spacer { flex: 1; } .fbbar .grow { flex: 1 1 260px; min-width: 0; }
.fbbar select, .fbbar input { height: 38px; box-sizing: border-box; }
.searchjoin { display: flex; flex: 2 1 320px; min-width: 0; } .searchjoin select { border-radius: 7px 0 0 7px; } .searchjoin input { flex: 1; min-width: 0; border-radius: 0 7px 7px 0; border-left: 0; }
.npager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0 12px; font-size: 14px; }
.npager strong { margin-right: 8px; }
.pgb { min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.pgb.on { background: var(--accent); border-color: var(--accent); color: #fff; } .pgb:disabled { opacity: .4; cursor: default; }
.dots { color: var(--muted); padding: 0 4px; }
.goto { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; } .goto input { width: 64px; height: 34px; box-sizing: border-box; }
.fbtable th { font-size: 12px; letter-spacing: .06em; color: var(--muted); text-align: center; } .fbtable td { text-align: center; padding: 14px 10px; }
.fbtable tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.linkbtn { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; } .linkbtn:hover { text-decoration: underline; color: var(--accent); }
.stars { color: #f5b82e; letter-spacing: 2px; white-space: nowrap; } .stars .off { color: color-mix(in srgb, var(--ink) 25%, transparent); }
.starpick { display: flex; gap: 4px; } .star { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: color-mix(in srgb, var(--ink) 28%, transparent); padding: 2px; } .star.on { color: #f5b82e; }
@media (max-width: 700px) { .fbbar > * { flex: 1 1 100%; } .fbbar .spacer { display: none; } }

.clearable { position: relative; display: flex; flex: 1; min-width: 0; } .clearable input { width: 100%; padding-right: 30px; }
.clearable.hr input { padding-right: 56px; }
.xbtn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--ink) 18%, transparent); color: var(--ink); font-size: 11px; line-height: 1; cursor: pointer; padding: 0; }
.xbtn:hover { background: color-mix(in srgb, var(--ink) 32%, transparent); }
.clearable.hr .xbtn { right: 30px; }
.searchjoin .clearable { flex: 1; } .searchjoin .clearable input { border-radius: 0 7px 7px 0; }

.nuhead { flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.btn.pink { color: #e0449b; border-color: #e0449b; background: none; font-weight: 600; }
.btn.primary { font-weight: 600; }
.iconbtn { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 6px; border-radius: 6px; vertical-align: middle; } .iconbtn:hover { color: #ef6a6a; background: color-mix(in srgb, var(--ink) 10%, transparent); }
.callbtn { text-decoration: none; margin-left: 8px; font-size: 18px; vertical-align: middle; }

/* Date range picker */
.rp { position: relative; display: inline-block; }
.rp-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; white-space: nowrap; }
.rp-btn:hover, .rp-btn[aria-expanded="true"] { border-color: var(--accent); }
.rp-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; display: flex; gap: 16px; padding: 14px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); max-width: calc(100vw - 24px); }
.rp-side { display: flex; flex-direction: column; gap: 2px; min-width: 120px; padding-right: 14px; border-right: 1px solid var(--line); }
.rp-p { text-align: left; background: none; border: 0; color: var(--accent); font: inherit; padding: 8px 6px; border-radius: 6px; cursor: pointer; } .rp-p:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.rp-cal { min-width: 0; }
.rp-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.rp-hint { font-size: 12px; color: var(--muted); text-align: center; flex: 1; }
.rp-arrow { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: none; color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; } .rp-arrow:hover { border-color: var(--accent); }
.rp-months { display: flex; gap: 20px; }
.rp-m { width: 252px; }
.rp-mh { text-align: center; font-weight: 600; letter-spacing: .06em; font-size: 13px; padding: 6px 0 8px; }
.rp-w, .rp-g { display: grid; grid-template-columns: repeat(7, 1fr); }
.rp-w span { text-align: center; font-size: 11px; color: var(--muted); padding: 4px 0; }
.rp-g > span { height: 34px; }
.rp-d { height: 34px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; border-radius: 0; position: relative; }
.rp-d:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.rp-d.mid { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.rp-d.start, .rp-d.end { background: var(--accent); color: #fff; font-weight: 700; }
.rp-d.start { border-radius: 17px 0 0 17px; } .rp-d.end { border-radius: 0 17px 17px 0; } .rp-d.start.end { border-radius: 17px; }
.rp-d.today::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; opacity: .8; }
.rp-d:focus-visible, .rp-p:focus-visible, .rp-arrow:focus-visible, .rp-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 700px) {
  .rp { display: block; } .rp-btn { width: 100%; }
  .rp-pop { position: fixed; top: auto; left: 0 !important; right: 0; bottom: 0; max-width: none; flex-direction: column; gap: 10px; border-radius: 16px 16px 0 0; max-height: 88vh; overflow-y: auto; box-shadow: 0 -10px 40px rgba(0, 0, 0, .45); padding-bottom: 20px; }
  .rp-side { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 8px; gap: 4px; }
  .rp-m { width: 100%; }
}

/* date picker: month + year dropdowns with the arrows at the outer edges */
.rp-mh { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 0 10px; letter-spacing: 0; }
.rp-sel { height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .06em; cursor: pointer; }
.rp-mh .rp-arrow { flex: none; }
.rp-hint { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
@media (max-width: 700px) { .rp-m { width: 100%; } .rp-pop { flex-direction: column; } .rp-side { flex-direction: row; flex-wrap: wrap; border-right: 0; padding-right: 0; } }

/* Lead Feedback Analytics */
.lfabar { flex-wrap: wrap; } .lfabar .spacer { flex: 1; } .lfabar select { height: 40px; min-width: 150px; box-sizing: border-box; }
.chart-card.wide { margin-bottom: 18px; position: relative; } .chart-card { position: relative; } .chart-card h3 .muted { font-size: 13px; font-weight: 400; margin-left: 8px; }
.donut { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: center; }
.dn-svg { width: 230px; max-width: 100%; flex: none; } .dn-seg { transition: stroke-width .12s; } .dn-seg:hover { stroke-width: 40; }
.dn-n { font-size: 26px; font-weight: 700; fill: currentColor; } .dn-l { font-size: 11px; fill: currentColor; opacity: .6; }
.dn-leg { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 13px; min-width: 190px; }
.dn-leg li { display: grid; grid-template-columns: 12px 1fr auto 38px; align-items: center; gap: 8px; } .dn-leg .muted { text-align: right; }
.dn-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: #4a90e2; }
.ctip { position: absolute; z-index: 5; pointer-events: none; background: #11151c; color: #fff; border-radius: 6px; padding: 8px 10px; font-size: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.4); white-space: nowrap; }
.ctip.hidden { display: none; } .ctip strong { display: block; margin-bottom: 4px; } .ctip .dn-sw { margin-right: 6px; vertical-align: -1px; }
.rp-mh { gap: 6px; flex-wrap: nowrap; } .rp-sel { padding: 0 6px; min-width: 0; } .rp-sel[data-k="m"] { width: 92px; } .rp-sel[data-k="y"] { width: 76px; }
.rp-mh .rp-arrow { width: 34px; height: 36px; }
.rp-pop .rp-mh .rp-sel { width: auto !important; min-width: 0 !important; flex: 0 0 auto; } .rp-pop .rp-sel[data-k="m"] { width: 88px !important; } .rp-pop .rp-sel[data-k="y"] { width: 72px !important; }

/* ---------- Manage Account ---------- */
.agrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
@media (max-width: 800px) { .agrid { grid-template-columns: 1fr; } }
.agrid label[hidden] { display: none; }
.hint { font-size: 12px; font-weight: 400; margin-top: 2px; }
.tlbox { padding: 16px; }
.seg { display: inline-flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.segb { border: 1px solid var(--line); background: none; color: var(--ink); border-radius: 8px; padding: 9px 16px; font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .02em; cursor: pointer; }
.segb.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.segb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.narrow { max-width: 280px; }
.example { margin: 10px 0 0; font-size: 13px; min-height: 1.2em; }
.ovbox { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.ovnote { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.ovrow { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 14px; align-items: end; margin-top: 12px; }
@media (max-width: 700px) { .ovrow { grid-template-columns: 1fr 1fr; } .ovrow .btn { grid-column: 1 / -1; } }
.card.flat.warn { border-color: var(--warn); }
table.prod td { vertical-align: middle; } table.prod th, table.prod td { padding-left: 8px; padding-right: 8px; }
.acimg { display: inline-flex; width: 56px; height: 44px; object-fit: contain; border-radius: 6px; background: color-mix(in srgb, var(--ink) 8%, transparent); align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.badge { border: 0; border-radius: 6px; padding: 5px 12px; font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .03em; cursor: pointer; }
.badge.active { background: #5fd6a0; color: #0c3b27; }
.badge.hold { background: #ef4b5f; color: #fff; }
.badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.icon-btn.done { color: var(--good); }
table.prod .icon-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.rs-done { color: var(--good); font-weight: 700; } .rs-skip { color: var(--warn); font-weight: 700; } .rs-bad { color: var(--bad); font-weight: 700; } .rs-wait { color: var(--warn); }

/* ---------- User panel: Account Link, Wallet ---------- */
.newtag { font-style: normal; font-size: 11px; font-weight: 700; margin-left: 8px; padding: 2px 9px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 80%, transparent); color: var(--bg, #12151c); }
.walletchip { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 10px; background: color-mix(in srgb, var(--ink) 12%, transparent); color: var(--ink); padding: 9px 16px; font: inherit; font-weight: 700; cursor: pointer; }
.walletchip .ic { width: 18px; height: 18px; }
.acfilter { max-width: 480px; margin-bottom: 16px; }
.ptitle { font-size: 20px; margin: 0 0 6px; letter-spacing: .01em; }
table.ulist th, table.ulist td { padding: 14px 10px; }
.sharebtn { background: #5fd6a0; border-color: #5fd6a0; color: #0c3b27; font-weight: 700; }
.vlink { font-size: 12px; }
.sharebox { display: flex; gap: 8px; } .sharebox input { flex: 1; min-width: 0; }
.wstats { margin-bottom: 16px; }
.wrow { align-items: end; } .wrow label { max-width: 260px; }
.lnk { cursor: pointer; text-decoration: underline; }
.vlink { color: var(--accent); }

/* ---------- Converted Leads ---------- */
.cvprod { display: inline-flex; align-items: center; gap: 8px; }
.acimg.sm { width: 34px; height: 26px; }
table.cvtable td { vertical-align: middle; }
table.cvtable td:last-child { white-space: nowrap; }
textarea { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); resize: vertical; }

/* user panel FAQ */
.faq { border-top: 1px solid var(--line, rgba(128,128,128,.25)); padding: 10px 2px; }
.faq:first-of-type { border-top: 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq p { margin: 8px 0 2px; color: var(--muted, #8b93a7); }

/* Payouts */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.mcbar { margin-top: 12px; align-items: center; flex-wrap: wrap; gap: 10px; }
.mcbar input { min-width: 240px; flex: 1 1 240px; max-width: 360px; }
.pobatch .row { align-items: center; flex-wrap: wrap; gap: 10px; }
.pobatch .pople { margin: 8px 0 12px; line-height: 1.7; }

.scrollY { max-height: 360px; overflow-y: auto; }
.scrollY thead th { position: sticky; top: 0; background: var(--card); }

/* corner pop-ups */
#toasts { position: fixed; top: 16px; right: 16px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border-radius: 10px; color: #fff; background: #1f9d63; box-shadow: 0 8px 24px rgba(0,0,0,.28); font-size: 14px; line-height: 1.4; animation: toastIn .22s ease-out; }
.toast.error { background: #d64545; }
.toast.out { opacity: 0; transform: translateX(16px); transition: opacity .22s, transform .22s; }
.toast .tick { flex: none; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.25); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.toast .tmsg { flex: 1; word-break: break-word; }
.toast .tx { flex: none; background: transparent; border: 0; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; opacity: .8; padding: 0 2px; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Naukrigo logo */
.brand { padding: 14px 18px; }
.brandlogo { display: block; height: 38px; width: auto; max-width: 100%; }
.loginlogo { display: block; height: 56px; width: auto; max-width: 80%; margin: 0 auto 14px; }
/* light logo on light theme, light-text variant on dark theme (no background plate) */
.logo-d { display: none !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-l { display: none !important; } :root:not([data-theme="light"]) .logo-d { display: block !important; } }
:root[data-theme="dark"] .logo-l { display: none !important; } :root[data-theme="dark"] .logo-d { display: block !important; }
.brandlogo { height: 38px; }

/* Team Member */
.grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.tree { list-style: none; margin: 8px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); }
.tree li { padding: 4px 0; }
.stack { display: grid; gap: 12px; }
p.ok { color: var(--good); }

/* Phone layout */
.scrim { display: none; }
.mobbrand { display: none; }
@media (max-width: 800px) {
  .scrim.on { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 25; }
  .mobbrand { display: block; height: 28px; width: auto; margin-left: 8px; }
  .bar { padding: 10px 12px; gap: 8px; }
  .bar strong { font-size: 14px; line-height: 1.2; min-width: 0; }
  .bar .btn { white-space: nowrap; padding: 8px 10px; font-size: 13px; }
  .page { padding: 12px; }
  .card { padding: 12px; }
  h2 { font-size: 20px; }
  .modal-box { width: calc(100vw - 24px); max-width: none; max-height: 90vh; overflow-y: auto; }
  .chips { flex-wrap: wrap; }
  .walletchip { padding: 6px 8px; }
}

/* Team Member drill-down */
.countbtn { min-width: 34px; border: 0; border-radius: 8px; padding: 4px 10px; font-weight: 700; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); cursor: pointer; }
.countbtn:hover { background: var(--accent); color: #fff; }
.mtl { display: grid; gap: 6px; min-width: 190px; } .mtl .row { gap: 6px; flex-wrap: nowrap; }
.pill.ok { color: var(--good); border-color: var(--good); }
.editgrid { grid-template-columns: 1fr 1fr; } .editgrid .full { grid-column: 1 / -1; }
@media (max-width: 700px) { .editgrid { grid-template-columns: 1fr; } }
.tree2 details { margin: 4px 0; } .tree2 summary { cursor: pointer; padding: 8px 10px; border-radius: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tree2 summary:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.tree2 .tkids { margin-left: 14px; padding-left: 14px; border-left: 2px solid var(--line); }
.tree2 .tcount { margin-left: auto; font-size: 12px; color: var(--muted); }
.tree2 .tleaf { padding: 6px 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.modal-box:has(.editgrid) { width: min(780px, 100%); }

/* Team leader row details */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--muted); } .dot.g { background: var(--good); } .dot.a { background: var(--warn); }
.statusSel { background: color-mix(in srgb, var(--good) 14%, transparent); border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; color: var(--ink); }
.statusSel.hold { background: color-mix(in srgb, var(--warn) 22%, transparent); }
.openleads { display: grid; gap: 6px; justify-items: start; } .openleads .row { gap: 6px; flex-wrap: nowrap; }

/* click-to-sort table headers (ascending, descending, ascending ...) */
th.sortable { cursor: pointer; user-select: none; } th.sortable:hover { color: var(--text, inherit); }
th.sortable .sarr { display: inline-block; min-width: 1.1em; margin-left: 4px; font-weight: 700; }
th.sortable.sorted { color: var(--brand, var(--text, inherit)); }

/* HR list extras */
.cnt { display: inline-block; min-width: 26px; text-align: center; padding: 1px 9px; border-radius: 999px; border: 1px solid; font-weight: 700; font-size: 12px; }
.cnt.y { color: #d6a42b; border-color: #d6a42b; } .cnt.g { color: #3fb68b; border-color: #3fb68b; } .cnt.b { color: #4aa3e8; border-color: #4aa3e8; }
.pill.warn { background: rgba(214,164,43,.18); color: #d6a42b; }
.btn.att-p { background: #3fb68b; color: #06281e; border-color: transparent; font-weight: 700; } .btn.att-a { background: #1b1f27; color: #e8ebf0; border: 1px solid #4a5263; font-weight: 700; }
.rolebtn { font-weight: 700; } .atsum { margin: 10px 0; }

/* =====================================================================================================
   Cinematic motion (see motion.js). All of it is switched off by prefers-reduced-motion at the end.
   ===================================================================================================== */
@keyframes nfPageIn { from { opacity: 0; filter: blur(8px); transform: translateY(16px); } to { opacity: 1; filter: blur(0); transform: none; } }
#main.pg-in { animation: nfPageIn .44s cubic-bezier(.22, 1, .36, 1) both; will-change: opacity, transform, filter; }

/* cards: tilt, lift, light reflection, neon edge */
.kpi, .chart-card, .stat { --rx: 0deg; --ry: 0deg; --ty: 0px; --mx: 50%; --my: 50%; --lit: 0;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--ty)); transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease, border-color .3s ease; will-change: transform;
  background-image: radial-gradient(260px circle at var(--mx) var(--my), rgba(255, 255, 255, calc(.11 * var(--lit))), transparent 62%); }
.kpi.tilting, .chart-card.tilting, .stat.tilting { transition: transform .09s linear, box-shadow .3s ease, border-color .3s ease; }
.kpi:hover, .chart-card:hover, .stat:hover { --ty: -3px; }
:root[data-theme="dark"] .kpi:hover, :root[data-theme="dark"] .chart-card:hover, :root[data-theme="dark"] .stat:hover { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--ty)); }
:root[data-theme="dark"] .chart-card:hover, :root[data-theme="dark"] .stat:hover { border-color: rgba(0, 212, 255, .38); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 12px 36px rgba(0, 140, 255, .20); }

/* sidebar: an indicator that grows in when an item becomes active */
.nav.active, .sub.active { position: relative; }
.nav.active::before, .sub.active::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 3px; background: linear-gradient(180deg, #3b82f6, #8b5cf6); box-shadow: 0 0 10px rgba(99, 140, 255, .7); transform-origin: center; animation: nfInd .35s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes nfInd { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
:root[data-theme="dark"] .nav.active, :root[data-theme="dark"] .sub.active { box-shadow: 0 0 18px rgba(59, 130, 246, .18); }
.nav, .sub { transition: background .25s ease, color .2s ease, transform .2s ease; } .nav:hover, .sub:hover { transform: translateX(2px); }

/* buttons */
.btn, .pgb, .iconbtn { transition: transform .15s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease, background .25s ease, border-color .25s ease, filter .2s; }
.btn:hover, .pgb:hover { transform: translateY(-1px) scale(1.025); } .btn:active, .pgb:active { transform: scale(.965); }
:root[data-theme="dark"] .btn.primary:hover { box-shadow: 0 6px 26px rgba(255, 122, 24, .5); filter: brightness(1.08); }

/* modals and dropdowns: fade + slight scale in, and out */
#modal { transition: opacity .17s ease; } #modal.closing { opacity: 0; pointer-events: none; }
#modal:not(.hidden):not(.closing) .modal-box { animation: nfPop .24s cubic-bezier(.22, 1, .36, 1) both; }
#modal.closing .modal-box { transform: scale(.985) translateY(4px); transition: transform .17s ease; }

/* charts draw themselves: the line first, then the area and the points */
.chart .line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: nfDrawLine 1.3s cubic-bezier(.4, 0, .2, 1) .1s forwards; }
.chart .area { opacity: 0; animation: nfFade .8s ease .55s forwards; }
.chart .pt { opacity: 0; animation: nfFade .5s ease 1.1s forwards; }
:root[data-theme="dark"] .chart .line { animation: nfDrawLine 1.3s cubic-bezier(.4, 0, .2, 1) .1s forwards; }
@keyframes nfDrawLine { to { stroke-dashoffset: 0; } } @keyframes nfFade { to { opacity: 1; } }
.chart .pt { cursor: pointer; transition: r .15s; } .chart .pt:hover { r: 5; }
.nf-tip { position: fixed; z-index: 90; pointer-events: none; padding: 6px 10px; border-radius: 10px; font-size: 12px; font-weight: 600; color: #f1f3f7; background: rgba(10, 18, 40, .88); border: 1px solid rgba(0, 212, 255, .35); box-shadow: 0 8px 24px rgba(0, 0, 0, .35), 0 0 14px rgba(0, 212, 255, .18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; white-space: nowrap; }
.nf-tip.on { opacity: 1; transform: none; }

/* thin loading bar: only while a request is really running; also a reusable skeleton */
.nf-load { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 100; opacity: 0; transition: opacity .2s; pointer-events: none; background: linear-gradient(90deg, transparent, #3b82f6, #00d4ff, #8b5cf6, transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: nfLoad 1.2s ease-in-out infinite; }
.nf-load.on { opacity: 1; } @keyframes nfLoad { from { background-position: -50% 0; } to { background-position: 150% 0; } }
.skeleton { border-radius: 10px; background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.12) 37%, rgba(255,255,255,.05) 63%); background-size: 400% 100%; animation: nfShimmer 1.4s ease infinite; color: transparent !important; }
@keyframes nfShimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  #main.pg-in, .chart .line, .chart .area, .chart .pt, .nav.active::before, .sub.active::before, #modal .modal-box, .nf-load, .skeleton { animation: none !important; }
  .chart .line { stroke-dasharray: none; stroke-dashoffset: 0; } .chart .area, .chart .pt { opacity: 1; }
  .kpi, .chart-card, .stat { transform: none !important; } .btn:hover, .btn:active, .pgb:hover, .nav:hover, .sub:hover { transform: none; }
}

/* =====================================================================================================
   SOFT PINK + WHITE + LAVENDER theme, light (primary) and dark (plum), with a live animated background.
   Tokens first; everything else uses them. The animated layer is #nf-bg in index.html (one copy, never re-created).
   ===================================================================================================== */
@property --nf1 { syntax: '<color>'; inherits: true; initial-value: #f8e5ee; }
@property --nf2 { syntax: '<color>'; inherits: true; initial-value: #f2edfa; }
@property --nf3 { syntax: '<color>'; inherits: true; initial-value: #ffe9dc; }
@property --nf4 { syntax: '<color>'; inherits: true; initial-value: #e8a6c4; }
@property --nf5 { syntax: '<color>'; inherits: true; initial-value: #a991cf; }
:root, :root[data-theme="light"] {
  --bg: #f8f5fa; --card: #ffffff; --ink: #47394b; --muted: #847487; --muted2: #a79aaa; --line: #f0e6ed; --num: #47394b;
  --accent: #d77fa9; --accent2: #e8a6c4; --accent-ink: #b45c88; --lav: #a991cf; --lav-bg: #f2edfa; --pink-bg: #fff0f5; --rose: #f8e5ee;
  --orange: #d77fa9; --green: #5fae94; --good: #3f9d7a; --bad: #cf5670; --warn: #bf873a;
  --glass: rgba(255, 255, 255, .72); --glass-line: rgba(232, 166, 196, .32); --field: rgba(255, 255, 255, .8); --field-line: #ecdde6;
  --shadow: 0 10px 34px rgba(215, 127, 169, .12); --shadow-hi: 0 18px 44px rgba(215, 127, 169, .22);
  --head-bg: rgba(242, 237, 250, .7); --row-hover: rgba(255, 240, 245, .9); --pop: rgba(255, 255, 255, .92);
  --nf1: #f8e5ee; --nf2: #f2edfa; --nf3: #ffe9dc; --nf4: #e8a6c4; --nf5: #a991cf; --nf-a: .55; --nf-wave: .34;
  --font: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #17121f; --card: #231b2e; --ink: #ece4f0; --muted: #b6a8bd; --muted2: #8f8197; --line: #3a2e47; --num: #f6eef9;
  --accent: #e58db5; --accent2: #cf7aa4; --accent-ink: #f1a8c8; --lav: #b9a3e3; --lav-bg: #2b2140; --pink-bg: #33202f; --rose: #3a2433;
  --orange: #e58db5; --green: #6fc4a5; --good: #6fc4a5; --bad: #ef7f93; --warn: #e0a95a;
  --glass: rgba(37, 28, 50, .62); --glass-line: rgba(229, 141, 181, .20); --field: rgba(255, 255, 255, .05); --field-line: #4a3a5a;
  --shadow: 0 10px 34px rgba(0, 0, 0, .35); --shadow-hi: 0 18px 44px rgba(229, 141, 181, .18);
  --head-bg: rgba(185, 163, 227, .10); --row-hover: rgba(229, 141, 181, .10); --pop: rgba(35, 27, 46, .94);
  --nf1: #2a1b3a; --nf2: #1d2a4d; --nf3: #3a2036; --nf4: #b8628f; --nf5: #7b5fc4; --nf-a: .55; --nf-wave: .26; color-scheme: dark;
}
:root { transition: --nf1 .9s ease, --nf2 .9s ease, --nf3 .9s ease, --nf4 .9s ease, --nf5 .9s ease; }

html { background: var(--bg); }
body { background: transparent; background-image: none; color: var(--ink); font-family: var(--font); transition: color .4s ease; }
html { transition: background-color .5s ease; }

/* ---- the live background: wide blobs sliding left and right, flowing ribbons, floating particles ---- */
#nf-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; background: linear-gradient(160deg, color-mix(in srgb, var(--nf1) 35%, var(--bg)), var(--bg) 55%, color-mix(in srgb, var(--nf2) 40%, var(--bg))); }
#nf-bg .nfb { position: absolute; border-radius: 50%; will-change: transform; opacity: var(--nf-a); }
.nfb1 { width: 62vmax; height: 62vmax; left: -18vmax; top: -22vmax; background: radial-gradient(circle at 50% 50%, var(--nf1), transparent 66%); animation: nfSlide1 46s ease-in-out infinite alternate; }
.nfb2 { width: 54vmax; height: 54vmax; right: -16vmax; top: 4vmax; background: radial-gradient(circle at 50% 50%, var(--nf2), transparent 66%); animation: nfSlide2 58s ease-in-out infinite alternate; }
.nfb3 { width: 48vmax; height: 48vmax; left: 10vmax; bottom: -22vmax; background: radial-gradient(circle at 50% 50%, var(--nf3), transparent 66%); animation: nfSlide3 52s ease-in-out infinite alternate; }
.nfb4 { width: 34vmax; height: 34vmax; left: 30vmax; top: 8vmax; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--nf4) 55%, transparent), transparent 66%); opacity: .38; animation: nfSlide4 40s ease-in-out infinite alternate; }
.nfb5 { width: 30vmax; height: 30vmax; right: 6vmax; bottom: -6vmax; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--nf5) 50%, transparent), transparent 66%); opacity: .34; animation: nfSlide5 48s ease-in-out infinite alternate; }
@keyframes nfSlide1 { from { transform: translate3d(-8vw, 0, 0) scale(1); } to { transform: translate3d(70vw, 12vh, 0) scale(1.12); } }
@keyframes nfSlide2 { from { transform: translate3d(8vw, 0, 0) scale(1.05); } to { transform: translate3d(-72vw, 14vh, 0) scale(.94); } }
@keyframes nfSlide3 { from { transform: translate3d(-6vw, 0, 0) scale(.96); } to { transform: translate3d(64vw, -16vh, 0) scale(1.1); } }
@keyframes nfSlide4 { from { transform: translate3d(-34vw, 6vh, 0) scale(1); } to { transform: translate3d(42vw, 30vh, 0) scale(1.18); } }
@keyframes nfSlide5 { from { transform: translate3d(20vw, -4vh, 0) scale(1.1); } to { transform: translate3d(-58vw, -22vh, 0) scale(.9); } }
#nf-bg .nfw { position: absolute; left: 0; width: 200%; height: 46vh; will-change: transform; opacity: var(--nf-wave); }
.nfw1 { bottom: -4vh; fill: var(--nf4); animation: nfWaveL 54s linear infinite; }
.nfw2 { bottom: -10vh; fill: var(--nf5); opacity: calc(var(--nf-wave) * .75) !important; animation: nfWaveR 74s linear infinite; }
.nfw3 { bottom: 6vh; height: 34vh; fill: var(--nf3); opacity: calc(var(--nf-wave) * .9) !important; animation: nfWaveL 92s linear infinite; }
@keyframes nfWaveL { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes nfWaveR { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
#nf-bg .nfp { position: absolute; left: var(--x); bottom: -6vh; width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle, #fff, color-mix(in srgb, var(--nf4) 70%, transparent) 60%, transparent 72%); opacity: 0; will-change: transform, opacity; animation: nfRise var(--d) linear var(--dl) infinite; }
:root[data-theme="dark"] #nf-bg .nfp { background: radial-gradient(circle, #f6dff0, color-mix(in srgb, var(--nf5) 70%, transparent) 60%, transparent 72%); }
@keyframes nfRise { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 12% { opacity: .85; } 85% { opacity: .6; } 100% { transform: translate3d(var(--dx), -112vh, 0); opacity: 0; } }

/* ---- surfaces ---- */
.card, .stat, .kpi, .chart-card, .login-card { background: var(--glass); border: 1px solid var(--glass-line); border-radius: 18px; box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }
:root[data-theme="dark"] .card, :root[data-theme="dark"] .stat, :root[data-theme="dark"] .kpi, :root[data-theme="dark"] .chart-card, :root[data-theme="dark"] .login-card { box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .07); }
.card { padding: 18px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); background: color-mix(in srgb, var(--card) 70%, transparent); }
.side, .bar, .topbar { background: color-mix(in srgb, var(--card) 66%, transparent); border-color: var(--glass-line); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); box-shadow: none; }
.side { border-right: 1px solid var(--glass-line); } .bar, .topbar { border-bottom: 1px solid var(--glass-line); }
.modal-box, .rp-pop { background: var(--pop); border: 1px solid var(--glass-line); border-radius: 20px; box-shadow: 0 28px 80px rgba(70, 40, 80, .28); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
#modal { background: rgba(60, 40, 70, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
:root[data-theme="dark"] #modal { background: rgba(10, 6, 16, .5); }

/* ---- type ---- */
h2, h3, .big, .kpi .kv, .stat .n { color: var(--ink); -webkit-text-fill-color: currentColor; background: none; }
h2::after { background: linear-gradient(90deg, var(--accent), var(--lav)); width: 34px; opacity: 1; }
.muted, label, .kl, .stat .l, thead th, th { color: var(--muted); }
a, .btn.link, .crumbs a { color: var(--accent-ink); }
.kpi .kv, .stat .n { color: var(--num); text-shadow: none; font-weight: 800; letter-spacing: -.02em; }

/* ---- menus ---- */
.nav, .sub { color: var(--muted); border-radius: 12px; }
.nav .ic, .nav .sic, .sub .sic { color: var(--lav); filter: none; }
.nav:hover, .sub:hover { color: var(--ink); background: color-mix(in srgb, var(--accent2) 16%, transparent); transform: translateX(2px); }
.nav.active, .sub.active { color: var(--accent-ink); font-weight: 700; background: linear-gradient(90deg, color-mix(in srgb, var(--accent2) 30%, transparent), color-mix(in srgb, var(--accent2) 6%, transparent)); box-shadow: none; }
:root[data-theme="dark"] .nav.active, :root[data-theme="dark"] .sub.active { color: #ffd6e8; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, var(--accent) 5%, transparent)); }
.nav.active .ic, .sub.active .sic { color: var(--accent) !important; }
.nav.active::before, .sub.active::before { background: linear-gradient(180deg, var(--accent2), var(--lav)); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent); }

/* ---- buttons and fields ---- */
.btn, .pgb, .rp-btn, .chip, .iconbtn { background: var(--field); border: 1px solid var(--field-line); color: var(--ink); border-radius: 12px; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.btn:hover, .pgb:hover, .rp-btn:hover { border-color: var(--accent2); background: color-mix(in srgb, var(--accent2) 16%, var(--card)); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 18%, transparent); }
.btn.primary { background: linear-gradient(135deg, #e8a6c4 0%, #d77fa9 55%, #c96b97 100%); border-color: transparent; color: #fff; text-shadow: 0 1px 0 rgba(120, 40, 80, .25); box-shadow: 0 6px 18px rgba(215, 127, 169, .38); }
.btn.primary:hover { filter: brightness(1.05); box-shadow: 0 9px 24px rgba(215, 127, 169, .5); background: linear-gradient(135deg, #e8a6c4 0%, #d77fa9 55%, #c96b97 100%); }
:root[data-theme="dark"] .btn.primary { background: linear-gradient(135deg, #e58db5, #cf6f9c 60%, #b95c88); box-shadow: 0 6px 20px rgba(229, 141, 181, .28); }
.btn.link { background: none; border: 0; box-shadow: none; }
input, select, textarea { background: var(--field); border: 1px solid var(--field-line); color: var(--ink); border-radius: 12px; transition: border-color .25s ease, box-shadow .25s ease, background .25s ease; -webkit-backdrop-filter: none; backdrop-filter: none; }
input::placeholder, textarea::placeholder { color: var(--muted2); opacity: 1; }
input:focus, select:focus, textarea:focus, .btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }
input:invalid:not(:placeholder-shown) { border-color: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 14%, transparent); }
.searchjoin select, .searchjoin input { background: transparent; border-color: transparent; box-shadow: none; }
option, optgroup { background: var(--card); color: var(--ink); }
.pgb.on, .segb.on, .dchip.on { background: linear-gradient(135deg, var(--accent2), var(--accent)); border-color: transparent; color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 38%, transparent); }
.chip.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent2) 22%, transparent); }
.statusSel { background: var(--field); border-color: var(--field-line); }

/* ---- tables ---- */
table { border-collapse: separate; border-spacing: 0; }
thead th { background: var(--head-bg); color: var(--muted); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; border-bottom: 1px solid var(--glass-line); }
thead th:first-child { border-top-left-radius: 12px; } thead th:last-child { border-top-right-radius: 12px; }
td { border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent); color: var(--ink); }
tbody tr { transition: background .25s ease; } tbody tr:hover { background: var(--row-hover); }
th.sortable:hover, th.sortable.sorted { color: var(--accent-ink); }
.pill { background: color-mix(in srgb, var(--lav) 14%, transparent); border-color: transparent; color: var(--muted); }
.pill.ok, .pill.interested { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good); border-color: transparent; }
.pill.not_interested, .pill.invalid_number, .pill.wrong_number { background: color-mix(in srgb, var(--bad) 13%, transparent); color: var(--bad); border-color: transparent; }
.pill.follow_up_required, .pill.warn { background: color-mix(in srgb, var(--warn) 17%, transparent); color: var(--warn); border-color: transparent; }
.cnt { background: color-mix(in srgb, currentColor 10%, transparent); border: 0; }
.cnt.y { color: var(--warn); } .cnt.g { color: var(--good); } .cnt.b { color: var(--lav); }
.btn.att-p { background: color-mix(in srgb, var(--good) 22%, transparent); color: var(--good); border-color: transparent; } .btn.att-a { background: color-mix(in srgb, var(--lav) 14%, transparent); color: var(--muted); border-color: var(--field-line); }

/* ---- KPI tiles and charts: pink first, lavender for the supporting ones ---- */
.kpi { position: relative; overflow: hidden; --k: var(--accent); }
.kpis .kpi:nth-child(4n+2) { --k: var(--lav); } .kpis .kpi:nth-child(4n+3) { --k: var(--accent2); } .kpis .kpi:nth-child(4n+4) { --k: #8e7bc0; }
.kpi::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--k) 30%, transparent), transparent 70%); opacity: .8; pointer-events: none; }
.kpi .kic { color: var(--k); filter: none; transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
.kpi:hover .kic { transform: scale(1.18) rotate(-6deg); }
.stat::before, .stats .stat:nth-child(n)::before { background: linear-gradient(180deg, var(--accent2), var(--lav)); opacity: 1; }
.kpi:hover, .chart-card:hover, .stat:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); box-shadow: var(--shadow-hi), inset 0 1px 0 rgba(255, 255, 255, .6); }
:root[data-theme="dark"] .kpi:hover, :root[data-theme="dark"] .chart-card:hover, :root[data-theme="dark"] .stat:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); box-shadow: var(--shadow-hi), inset 0 1px 0 rgba(255, 255, 255, .07); }
.chart-card h3 { border-image: linear-gradient(90deg, var(--accent2), transparent) 1; }
.chart-card .chart .line, :root[data-theme="dark"] .chart-card .chart .line { stroke: var(--accent); filter: none; stroke-width: 2.2; }
.chart-card .chart .area { fill: none; } .chart .gs1, :root[data-theme="dark"] .chart .gs1, :root:not([data-theme="dark"]) .chart .gs1 { stop-color: var(--accent2); stop-opacity: .5; } .chart .gs2, :root[data-theme="dark"] .chart .gs2, :root:not([data-theme="dark"]) .chart .gs2 { stop-color: var(--lav); stop-opacity: 0; }
.chart-card .chart .pt, :root[data-theme="dark"] .chart-card .chart .pt { fill: var(--accent); stroke: var(--card); stroke-width: 1.5; }
.chart-card .chart .swatch, :root[data-theme="dark"] .chart-card .chart .swatch { fill: color-mix(in srgb, var(--accent2) 60%, transparent); stroke: var(--accent); }
.chart .tick, .chart .legend text, :root[data-theme="dark"] .chart .tick, :root[data-theme="dark"] .chart .legend text { fill: var(--muted); }
.chart .grid, :root[data-theme="dark"] .chart .grid { stroke: color-mix(in srgb, var(--line) 90%, transparent); }
.nf-tip { background: var(--pop); color: var(--ink); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 10px 28px rgba(120, 60, 100, .22); }

/* ---- loading: soft pink shimmer (light) / lavender (dark), only during real requests ---- */
.nf-load { background: linear-gradient(90deg, transparent, var(--accent2), var(--accent), var(--lav), transparent); background-size: 50% 100%; background-repeat: no-repeat; }
.skeleton { background: linear-gradient(90deg, rgba(232, 166, 196, .16) 25%, rgba(232, 166, 196, .34) 37%, rgba(232, 166, 196, .16) 63%); background-size: 400% 100%; }
:root[data-theme="dark"] .skeleton { background: linear-gradient(90deg, rgba(185, 163, 227, .10) 25%, rgba(185, 163, 227, .22) 37%, rgba(185, 163, 227, .10) 63%); background-size: 400% 100%; }

/* theme switch: surfaces ease between palettes */
.card, .stat, .kpi, .chart-card, .side, .bar, .topbar, .btn, input, select, td, th { transition-property: background-color, border-color, color, box-shadow, transform; transition-duration: .35s; }
.kpi, .chart-card, .stat { transition-duration: .5s, .3s, .3s, .3s, .5s; }

/* phones: lighter background, fewer particles; reduced motion: calm static background */
@media (max-width: 700px) { #nf-bg .nfp:nth-of-type(n+9) { display: none; } .card, .kpi, .chart-card, .side, .bar { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } }
@media (prefers-reduced-motion: reduce) { #nf-bg .nfb, #nf-bg .nfw { animation: none !important; } #nf-bg .nfp { display: none; } :root { transition: none; } }

/* looping background video sits above the CSS fallback layers and fades in once it is really playing */
#nf-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease; pointer-events: none; }
#nf-bg.video-on #nf-video { opacity: 1; }
#nf-bg.video-on .nfb, #nf-bg.video-on .nfw, #nf-bg.video-on .nfp { animation-play-state: paused; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { #nf-video { display: none; } }

/* ===== iOS "liquid glass": very transparent panels, background clearly visible through them ===== */
:root, :root[data-theme="light"] {
  --glass: rgba(255, 255, 255, .26); --glass-line: rgba(255, 255, 255, .62); --pop: rgba(255, 255, 255, .55);
  --head-bg: rgba(255, 255, 255, .18); --row-hover: rgba(255, 255, 255, .34); --field: rgba(255, 255, 255, .30); --field-line: rgba(255, 255, 255, .7);
  --lg-glow: rgba(215, 127, 169, .16);
}
:root[data-theme="dark"] {
  --glass: rgba(255, 255, 255, .07); --glass-line: rgba(255, 255, 255, .20); --pop: rgba(44, 32, 60, .55);
  --head-bg: rgba(255, 255, 255, .06); --row-hover: rgba(255, 255, 255, .09); --field: rgba(255, 255, 255, .08); --field-line: rgba(255, 255, 255, .22);
  --lg-glow: rgba(0, 0, 0, .35);
}
.card, .stat, .kpi, .chart-card, .login-card, .quick {
  background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%), var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(190%) brightness(1.04); backdrop-filter: blur(24px) saturate(190%) brightness(1.04);
  border: 1px solid var(--glass-line);
  box-shadow: 0 10px 34px var(--lg-glow), inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 0 rgba(255, 255, 255, .12), inset 0 0 22px rgba(255, 255, 255, .06);
}
:root[data-theme="dark"] .card, :root[data-theme="dark"] .stat, :root[data-theme="dark"] .kpi, :root[data-theme="dark"] .chart-card, :root[data-theme="dark"] .login-card, :root[data-theme="dark"] .quick {
  background: linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 55%), var(--glass);
  box-shadow: 0 10px 34px var(--lg-glow), inset 0 1px 0 rgba(255, 255, 255, .30), inset 0 0 22px rgba(255, 255, 255, .03);
}
.side, .bar, .topbar { background: var(--glass); -webkit-backdrop-filter: blur(28px) saturate(190%); backdrop-filter: blur(28px) saturate(190%); }
.modal-box, .rp-pop { -webkit-backdrop-filter: blur(34px) saturate(190%); backdrop-filter: blur(34px) saturate(190%); }
table, .table-wrap, tbody tr, tbody td { background: transparent; }
thead th, .scrollY thead th { background: var(--head-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
/* text stays crisp over the see-through panels */
:root[data-theme="light"] body { --ink: #3a2c40; --muted: #6e5f73; }
.kpi .n, .stat .n, h1, h2, h3 { text-shadow: 0 1px 8px rgba(255, 255, 255, .35); }
:root[data-theme="dark"] .kpi .n, :root[data-theme="dark"] .stat .n, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3 { text-shadow: 0 1px 10px rgba(0, 0, 0, .35); }
/* background: livelier and more visible */
#nf-video { filter: saturate(1.25) contrast(1.05); }
.nfb1 { animation-duration: 24s; } .nfb2 { animation-duration: 30s; } .nfb3 { animation-duration: 27s; } .nfb4 { animation-duration: 21s; opacity: .55; } .nfb5 { animation-duration: 25s; opacity: .5; }
.nfw1 { animation-duration: 28s; } .nfw2 { animation-duration: 38s; } .nfw3 { animation-duration: 46s; }
@media (prefers-reduced-motion: reduce) { #nf-video { display: none; } }

/* ===== clearer glass: white fill almost gone, only blur + edge highlights remain ===== */
:root, :root[data-theme="light"] { --glass: rgba(255, 255, 255, .09); --glass-line: rgba(255, 255, 255, .75); --pop: rgba(255, 255, 255, .34); --head-bg: rgba(255, 255, 255, .06); --row-hover: rgba(255, 255, 255, .20); --field: rgba(255, 255, 255, .16); --lg-glow: rgba(215, 127, 169, .12); }
:root[data-theme="dark"] { --glass: rgba(255, 255, 255, .035); --glass-line: rgba(255, 255, 255, .22); --pop: rgba(44, 32, 60, .38); --head-bg: rgba(255, 255, 255, .03); --row-hover: rgba(255, 255, 255, .06); --field: rgba(255, 255, 255, .05); }
.card, .stat, .kpi, .chart-card, .login-card, .quick { background: linear-gradient(135deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, .06) 100%), var(--glass); -webkit-backdrop-filter: blur(16px) saturate(200%); backdrop-filter: blur(16px) saturate(200%); }
:root[data-theme="dark"] .card, :root[data-theme="dark"] .stat, :root[data-theme="dark"] .kpi, :root[data-theme="dark"] .chart-card, :root[data-theme="dark"] .login-card, :root[data-theme="dark"] .quick { background: linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 45%), var(--glass); }
.side, .bar, .topbar { background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(200%); backdrop-filter: blur(20px) saturate(200%); }
:root[data-theme="light"] body { --ink: #2f2335; --muted: #5f5065; }
:root[data-theme="light"] .kpi .n, :root[data-theme="light"] .stat .n, :root[data-theme="light"] .card, :root[data-theme="light"] td, :root[data-theme="light"] th { text-shadow: 0 0 10px rgba(255, 255, 255, .55); }

/* ===== single look: fully transparent panels, only a marked border; text stays solid; background animation runs ===== */
.card, .stat, .kpi, .chart-card, .login-card, .quick, .side, .bar, .topbar, .range, .rp-btn, .btn, .pgb, .chip, .iconbtn, input, select, textarea, thead th, .scrollY thead th {
  background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important;
}
.card, .stat, .kpi, .chart-card, .login-card, .quick, .range { border: 1.5px solid rgba(215, 127, 169, .55) !important; }
.side { border-right: 1.5px solid rgba(215, 127, 169, .55) !important; } .bar, .topbar { border-bottom: 1.5px solid rgba(215, 127, 169, .55) !important; }
.btn, .pgb, .rp-btn, .chip, input, select, textarea { border: 1.2px solid rgba(169, 145, 207, .65) !important; }
.btn:hover, .pgb:hover, .rp-btn:hover, .chip:hover { background: rgba(255, 255, 255, .22) !important; }
tbody tr:hover td { background: rgba(255, 255, 255, .18); }
thead th { border-bottom: 1.2px solid rgba(215, 127, 169, .5) !important; }
/* pop-ups need a little blur so text on top of other text stays readable (still no fill) */
.modal-box, .rp-pop { background: rgba(255, 255, 255, .10) !important; border: 1.5px solid rgba(215, 127, 169, .6) !important; -webkit-backdrop-filter: blur(22px) saturate(180%) !important; backdrop-filter: blur(22px) saturate(180%) !important; }
option, optgroup { background: #fff; }
/* text: solid and a little stronger so it reads on the moving background */
body { --ink: #2a1f30; --muted: #54465b; color: #2a1f30; }
.kpi .n, .stat .n, h1, h2, h3, td, th, label, .card { text-shadow: 0 0 8px rgba(255, 255, 255, .7); }
/* main action buttons keep their pink fill so white text stays readable; popup fields keep a visible edge */
.btn.primary, .btn.primary:hover { background: linear-gradient(135deg, #e8a6c4 0%, #d77fa9 55%, #c96b97 100%) !important; border-color: transparent !important; box-shadow: 0 6px 18px rgba(215, 127, 169, .35) !important; }
.modal-box input, .modal-box select, .modal-box textarea, .rp-pop input, .rp-pop select { background: rgba(255, 255, 255, .35) !important; border: 1.2px solid rgba(169, 145, 207, .8) !important; color: #2a1f30; }
.modal-box { background: rgba(255, 255, 255, .22) !important; }

/* ===== phone menu: the drawer is frosted glass, the page behind it is blurred, the drawer is in focus ===== */
@media (max-width: 800px) {
  .scrim.on { background: rgba(60, 40, 70, .18) !important; -webkit-backdrop-filter: blur(12px) saturate(120%) !important; backdrop-filter: blur(12px) saturate(120%) !important; z-index: 25; }
  .side.admin.open, .side.drawer.open { background: rgba(255, 255, 255, .62) !important; -webkit-backdrop-filter: blur(30px) saturate(190%) !important; backdrop-filter: blur(30px) saturate(190%) !important; border-right: 1.5px solid rgba(215, 127, 169, .7) !important; box-shadow: 14px 0 50px rgba(70, 40, 80, .25) !important; z-index: 40 !important; isolation: isolate; }
  .side.open .brand, .side.open .brandlogo, .side.open .nav { position: relative; z-index: 1; }
  .side.open .nav a, .side.open .nav button, .side.open .nav span, .side.open .nav-item { color: #1f1424; font-weight: 600; text-shadow: none; }
  .side.open .nav .active, .side.open [aria-current="page"] { background: rgba(215, 127, 169, .28) !important; color: #8f2f63; }
  .bar { z-index: 4; }
}
/* bolder, near-black text everywhere; the boxes stay see-through */
body { --ink: #1a1220; --muted: #3d3042; color: #1a1220; font-weight: 500; }
td, th, label, .nav a, .nav button, .card, .stat, .kpi { font-weight: 600; }
.kpi .n, .stat .n, h1, h2, h3, strong, b, thead th { font-weight: 800; }
.card, .stat, .kpi, .chart-card, .login-card, .quick, .range { border-color: rgba(215, 127, 169, .5) !important; }
.side .sub, .side .nav, .side .grp-items a, .side .grp-items button { color: #1a1220 !important; font-weight: 600; }
.side .sub.active, .side .nav.active { color: #8f2f63 !important; font-weight: 700; }
.side .sub.off { opacity: .6; }

/* ===== analytics motion: staggered rise-in, shine sweep, pop on numbers, growing bars ===== */
@keyframes nfRiseIn { 0% { opacity: 0; transform: translateY(26px) scale(.95); filter: blur(10px); } 60% { opacity: 1; transform: translateY(-4px) scale(1.012); filter: blur(0); } 100% { opacity: 1; transform: none; filter: blur(0); } }
@keyframes nfRowIn { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes nfShine { from { transform: translateX(-130%) skewX(-18deg); } to { transform: translateX(260%) skewX(-18deg); } }
@keyframes nfPop { 0% { transform: scale(.7); opacity: 0; } 55% { transform: scale(1.14); opacity: 1; } 100% { transform: scale(1); } }
@keyframes nfBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes nfFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.nf-rise { animation: nfRiseIn .8s cubic-bezier(.2, .9, .25, 1.05) backwards; animation-delay: calc(var(--i, 0) * 75ms); }
tbody tr.nf-rise { animation: nfRowIn .55s cubic-bezier(.2, .8, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.stat, .kpi, .chart-card { position: relative; overflow: hidden; }
.stat.nf-rise::after, .kpi.nf-rise::after, .chart-card.nf-rise::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent); animation: nfShine 1.1s ease-out backwards; animation-delay: calc(var(--i, 0) * 75ms + 350ms); }
.stat.nf-rise .n, .kpi.nf-rise .kv { display: inline-block; transform-origin: left center; animation: nfPop .7s cubic-bezier(.3, 1.4, .5, 1) backwards; animation-delay: calc(var(--i, 0) * 75ms + 200ms); }
.stat.nf-rise .l { animation: nfRowIn .6s ease backwards; animation-delay: calc(var(--i, 0) * 75ms + 380ms); }
.stat { transition: transform .35s cubic-bezier(.2, .8, .3, 1), border-color .3s; }
.stat:hover { border-color: rgba(215, 127, 169, .95) !important; }
.stat::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 3px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, #e8a6c4, #a991cf); transform-origin: left; animation: nfBar .9s cubic-bezier(.2, .8, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 75ms + 250ms); }
.kpi svg, .stat .ic { animation: nfFloat 4.5s ease-in-out infinite; }
.obar { height: 5px; margin-top: 5px; border-radius: 9px; background: rgba(169, 145, 207, .18); overflow: hidden; }
.obar i { display: block; height: 100%; width: var(--w); border-radius: 9px; background: linear-gradient(90deg, #e8a6c4, #a991cf); transform-origin: left; animation: nfBar 1s cubic-bezier(.2, .8, .3, 1) backwards .35s; }
@media (prefers-reduced-motion: reduce) { .nf-rise, .nf-rise *, .stat::before, .obar i, .kpi svg { animation: none !important; } }

/* ===== FINAL: no added colours on surfaces. Everything is see-through; only the background animation carries colour ===== */
.card, .stat, .kpi, .chart-card, .login-card, .quick, .range, .side, .bar, .topbar, .btn, .pgb, .rp-btn, .chip, .iconbtn, input, select, textarea, thead th, .modal-box, .rp-pop, .side.open, .scrim.on, .btn.primary, .btn.primary:hover, .modal-box input, .modal-box select, .modal-box textarea, .rp-pop input, .rp-pop select, .kpi *, .side .sub.active, .side .nav.active, .side.open .nav .active {
  background: transparent !important; background-image: none !important; box-shadow: none !important; text-shadow: none !important;
}
.kpi::before, .kpi::after, .stat::after, .chart-card::after, .card::after, .card::before { background: none !important; }
.stat::before { background: rgba(40, 25, 50, .45) !important; }
.obar i { background: rgba(40, 25, 50, .55); }
/* one neutral marking line on every box */
.card, .stat, .kpi, .chart-card, .login-card, .quick, .range, .modal-box, .rp-pop { border: 1.2px solid rgba(40, 25, 50, .32) !important; }
.btn, .pgb, .rp-btn, .chip, input, select, textarea, .modal-box input, .modal-box select, .modal-box textarea { border: 1.2px solid rgba(40, 25, 50, .38) !important; color: #1a1220 !important; }
.btn.primary { border: 1.6px solid rgba(40, 25, 50, .75) !important; color: #1a1220 !important; font-weight: 800; }
.btn:hover, .pgb:hover, .rp-btn:hover, .chip:hover { background: transparent !important; border-color: rgba(40, 25, 50, .85) !important; }
.side, .bar, .topbar { border-color: rgba(40, 25, 50, .28) !important; }
.side .sub.active, .side .nav.active, .side .active { color: #1a1220 !important; border-left: 3px solid rgba(40, 25, 50, .8); font-weight: 800; }
/* the only effect behind boxes is blur (no tint): drawer, pop-ups, dropdowns */
.modal-box, .rp-pop { -webkit-backdrop-filter: blur(18px) !important; backdrop-filter: blur(18px) !important; }
@media (max-width: 800px) {
  .side.admin.open, .side.drawer.open { -webkit-backdrop-filter: blur(22px) !important; backdrop-filter: blur(22px) !important; border-right: 1.2px solid rgba(40, 25, 50, .4) !important; }
  .scrim.on { -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important; }
}
/* every text black and bold */
body, .side .sub, .side .nav, td, th, label, p, span, .l, .tick { color: #1a1220; }
.chart .tick, .chart .legend text { fill: #1a1220; font-weight: 600; }
.chart .grid { stroke: rgba(40, 25, 50, .15); }
.chart .line { stroke: #1a1220; } .chart .area { fill: rgba(40, 25, 50, .10); } .chart .pt { fill: #1a1220; }

/* ===== reference look: dimmed moving background, white bold text, outlined pill buttons, round coloured icons ===== */
#nf-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(24, 18, 34, .62), rgba(24, 18, 34, .50)); }
body, td, th, label, p, span, .l, .kl, .kv, h1, h2, h3, strong, b, .side .sub, .side .nav, .bar, .stat .n, .stat .l { color: #fff !important; text-shadow: 0 1px 10px rgba(0, 0, 0, .45) !important; }
.muted, .tick, small { color: rgba(255, 255, 255, .78) !important; }
.chart .tick, .chart .legend text { fill: #fff; } .chart .grid { stroke: rgba(255, 255, 255, .18); }
.chart .line { stroke: #ff8a4c; } .chart .area { fill: rgba(255, 138, 76, .16); } .chart .pt { fill: #fff; }
.card, .stat, .kpi, .chart-card, .login-card, .quick, .range, .modal-box, .rp-pop { border: 1.2px solid rgba(255, 255, 255, .38) !important; }
.side, .bar, .topbar { border-color: rgba(255, 255, 255, .28) !important; }
/* pill buttons with a coloured outline, like "GET STARTED" */
.btn, .pgb, .rp-btn, .chip { border-radius: 999px !important; border: 1.6px solid #a6a8ff !important; color: #fff !important; font-weight: 800; letter-spacing: .04em; padding-left: 16px; padding-right: 16px; }
.btn.primary { border: 1.6px solid #ff7a45 !important; color: #fff !important; }
.btn:hover, .pgb:hover, .rp-btn:hover, .chip:hover { border-color: #fff !important; background: rgba(255, 255, 255, .08) !important; transform: translateY(-1px); }
input, select, textarea { color: #fff !important; border-color: rgba(255, 255, 255, .45) !important; } ::placeholder { color: rgba(255, 255, 255, .6); }
option, optgroup { background: #2a2038; color: #fff; }
/* round solid icon badges, orange / lavender alternating */
.kpi .ic, .kpi svg.ic { box-sizing: content-box; width: 22px; height: 22px; padding: 12px; border-radius: 50%; color: #fff !important; background: #f2733c !important; }
.kpi:nth-child(even) .ic { background: #8f93f2 !important; }
.side .sub.active, .side .nav.active, .side .active { color: #fff !important; border-left-color: #ff7a45; }
.stat::before { background: #ff7a45 !important; } .stat:nth-child(even)::before { background: #8f93f2 !important; }
.obar { background: rgba(255, 255, 255, .18); } .obar i { background: linear-gradient(90deg, #ff7a45, #8f93f2) !important; }
thead th { color: rgba(255, 255, 255, .85) !important; border-bottom-color: rgba(255, 255, 255, .35) !important; }
tbody td { border-color: rgba(255, 255, 255, .14) !important; }
.modal-box, .rp-pop { -webkit-backdrop-filter: blur(22px) !important; backdrop-filter: blur(22px) !important; }
.modal-box { background: rgba(24, 18, 34, .35) !important; }
@media (max-width: 800px) { .side.admin.open, .side.drawer.open { background: rgba(24, 18, 34, .5) !important; -webkit-backdrop-filter: blur(24px) !important; backdrop-filter: blur(24px) !important; } }
/* darker background so the white text sits well: deep plum/navy tone, the animation stays visible */
#nf-bg { background: #120d1c; }
#nf-video { filter: brightness(.62) saturate(1.3) contrast(1.1); }
#nf-bg .nfb, #nf-bg .nfw { filter: brightness(.7) saturate(1.2); }
#nf-bg::after { background: linear-gradient(180deg, rgba(14, 10, 24, .6), rgba(14, 10, 24, .5)); }
@media (max-width: 800px) { .side.admin.open, .side.drawer.open { background: rgba(14, 10, 24, .55) !important; } }

/* ===== FINAL 2: bright animated background again (no dimming), black bold text and black outlined buttons; sticky headers blur what scrolls beneath ===== */
#nf-bg { background: transparent; }
#nf-bg::after { display: none !important; }
#nf-video { filter: saturate(1.25) contrast(1.05); }
#nf-bg .nfb, #nf-bg .nfw { filter: none; }
body, td, th, label, p, span, .l, .kl, .kv, h1, h2, h3, strong, b, .side .sub, .side .nav, .bar, .stat .n, .stat .l, .muted, small, .side a, .side button { color: #0b0710 !important; text-shadow: 0 0 8px rgba(255, 255, 255, .55) !important; }
td, th, .kv, .stat .n, td.num { font-weight: 800; }
.chart .tick, .chart .legend text { fill: #0b0710; } .chart .grid { stroke: rgba(11, 7, 16, .16); }
.chart .line { stroke: #0b0710; } .chart .area { fill: rgba(11, 7, 16, .09); } .chart .pt { fill: #0b0710; }
.card, .stat, .kpi, .chart-card, .login-card, .quick, .range, .modal-box, .rp-pop { border: 1.2px solid rgba(11, 7, 16, .35) !important; }
.side, .bar, .topbar { border-color: rgba(11, 7, 16, .3) !important; }
/* every button, cross (x), arrows and icon buttons: black text + black edge so they stay visible on transparency */
.btn, .pgb, .rp-btn, .chip, .btn.primary, .iconbtn, .icon-btn, button, .modal-x, [data-close], .close, .x { color: #0b0710 !important; border-color: #0b0710 !important; }
button, .icon-btn, .iconbtn { text-shadow: none !important; font-weight: 800; }
.btn:hover, .pgb:hover, .rp-btn:hover, .chip:hover { border-color: #0b0710 !important; background: rgba(255, 255, 255, .35) !important; }
button svg, .icon-btn svg { stroke: #0b0710; }
input, select, textarea { color: #0b0710 !important; border-color: rgba(11, 7, 16, .55) !important; font-weight: 700; } ::placeholder { color: rgba(11, 7, 16, .55); }
option, optgroup { background: #fff; color: #0b0710; }
thead th { color: #0b0710 !important; border-bottom-color: rgba(11, 7, 16, .45) !important; }
tbody td { border-color: rgba(11, 7, 16, .14) !important; }
.side .sub.active, .side .nav.active, .side .active { color: #0b0710 !important; }
.obar { background: rgba(11, 7, 16, .12); }
/* sticky header and sticky table head: heavy blur (no colour) so rows scrolling under them never show through as text */
.bar, .topbar { -webkit-backdrop-filter: blur(26px) saturate(160%) !important; backdrop-filter: blur(26px) saturate(160%) !important; background: rgba(255, 255, 255, .30) !important; z-index: 20 !important; }
.scrollY thead th, thead th { -webkit-backdrop-filter: blur(22px) !important; backdrop-filter: blur(22px) !important; background: rgba(255, 255, 255, .30) !important; }
.modal-box { background: rgba(255, 255, 255, .22) !important; }
@media (max-width: 800px) { .side.admin.open, .side.drawer.open { background: rgba(255, 255, 255, .22) !important; -webkit-backdrop-filter: blur(26px) !important; backdrop-filter: blur(26px) !important; } }

/* universe canvas is only drawn when <html data-bg="space"> */
#nf-space { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
html[data-bg="space"] #nf-space { display: block; }
html[data-bg="space"] #nf-video, html[data-bg="space"] #nf-bg .nfb, html[data-bg="space"] #nf-bg .nfw, html[data-bg="space"] #nf-bg .nfp { display: none !important; }

/* small badges ("New") keep a solid pink pill with white text on the night sky */
.side .tag, .side .nav .tag, .tag.new { background: #0b0710 !important; color: #fff !important; border: 0 !important; }

/* ===== FINAL 4: no animation anywhere. Static soft background, transparent iPhone-style glass, black bold text ===== */
*, *::before, *::after { animation: none !important; }
#nf-video, #nf-space { display: none !important; }
#nf-bg .nfp { display: none !important; }
#nf-bg { background: linear-gradient(160deg, #fdf2f8 0%, #f8f3fc 45%, #fbe9f2 100%) !important; }
#nf-bg .nfb { opacity: .55 !important; } #nf-bg .nfw { opacity: .35 !important; }
.nf-rise, .pg-in, .stat::before, .obar i { opacity: 1 !important; transform: none !important; filter: none !important; }
.chart .line { stroke-dashoffset: 0 !important; }
.chart .tick, .chart .legend text { fill: #0b0710 !important; opacity: 1 !important; }
.chart .legend, .chart .legend * { opacity: 1 !important; }
.kpi, .stat, .chart-card, .card { transform: none !important; }

#nf-bg .nfw { display: none !important; }
.avatar { background: #0b0710 !important; color: #fff !important; }
.chart .line, .chart-card .chart .line { stroke: #0b0710 !important; }
.chart .area, .chart-card .chart .area { fill: rgba(11, 7, 16, .08) !important; }
.chart .pt, .chart-card .chart .pt { fill: #fff !important; stroke: #0b0710 !important; }
.chart .swatch { fill: rgba(11, 7, 16, .2) !important; stroke: #0b0710 !important; }
.chart .tick, .chart .legend text, .chart-card .chart text { fill: #0b0710 !important; font-weight: 700; }

/* ===== dark mode (static, transparent glass, white bold text). Light mode keeps the rules above. ===== */
:root[data-theme="dark"] body, :root[data-theme="dark"] td, :root[data-theme="dark"] th, :root[data-theme="dark"] label, :root[data-theme="dark"] p, :root[data-theme="dark"] span, :root[data-theme="dark"] .l, :root[data-theme="dark"] .kl, :root[data-theme="dark"] .kv, :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] strong, :root[data-theme="dark"] b, :root[data-theme="dark"] .side .sub, :root[data-theme="dark"] .side .nav, :root[data-theme="dark"] .bar, :root[data-theme="dark"] .stat .n, :root[data-theme="dark"] .stat .l, :root[data-theme="dark"] .muted, :root[data-theme="dark"] small, :root[data-theme="dark"] .side a, :root[data-theme="dark"] .side button, :root[data-theme="dark"] .tick { color: #fff !important; text-shadow: 0 1px 8px rgba(0,0,0,.6) !important; }
:root[data-theme="dark"] .card, :root[data-theme="dark"] .stat, :root[data-theme="dark"] .kpi, :root[data-theme="dark"] .chart-card, :root[data-theme="dark"] .login-card, :root[data-theme="dark"] .quick, :root[data-theme="dark"] .range, :root[data-theme="dark"] .modal-box, :root[data-theme="dark"] .rp-pop { border: 1.2px solid rgba(255,255,255,.34) !important; }
:root[data-theme="dark"] .side, :root[data-theme="dark"] .bar, :root[data-theme="dark"] .topbar { border-color: rgba(255,255,255,.25) !important; }
:root[data-theme="dark"] .btn, :root[data-theme="dark"] .pgb, :root[data-theme="dark"] .rp-btn, :root[data-theme="dark"] .chip, :root[data-theme="dark"] .btn.primary, :root[data-theme="dark"] .iconbtn, :root[data-theme="dark"] .icon-btn, :root[data-theme="dark"] button, :root[data-theme="dark"] .modal-x, :root[data-theme="dark"] [data-close], :root[data-theme="dark"] .close, :root[data-theme="dark"] .x { color: #fff !important; border-color: #fff !important; }
:root[data-theme="dark"] .btn:hover, :root[data-theme="dark"] .pgb:hover, :root[data-theme="dark"] .rp-btn:hover, :root[data-theme="dark"] .chip:hover { border-color: #fff !important; background: rgba(255,255,255,.14) !important; }
:root[data-theme="dark"] button svg, :root[data-theme="dark"] .icon-btn svg { stroke: #fff; }
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { color: #fff !important; border-color: rgba(255,255,255,.55) !important; }
:root[data-theme="dark"] ::placeholder { color: rgba(255,255,255,.6); }
:root[data-theme="dark"] option, :root[data-theme="dark"] optgroup { background: #1a1424; color: #fff; }
:root[data-theme="dark"] thead th { color: #fff !important; border-bottom-color: rgba(255,255,255,.4) !important; }
:root[data-theme="dark"] tbody td { border-color: rgba(255,255,255,.13) !important; }
:root[data-theme="dark"] .side .sub.active, :root[data-theme="dark"] .side .nav.active, :root[data-theme="dark"] .side .active { color: #fff !important; }
:root[data-theme="dark"] .obar { background: rgba(255,255,255,.16); }
:root[data-theme="dark"] .bar, :root[data-theme="dark"] .topbar, :root[data-theme="dark"] thead th, :root[data-theme="dark"] .scrollY thead th { background: rgba(8,6,16,.35) !important; }
:root[data-theme="dark"] .modal-box { background: rgba(8,6,16,.5) !important; }
:root[data-theme="dark"] .chart .line, :root[data-theme="dark"] .chart-card .chart .line { stroke: #ffb27a !important; }
:root[data-theme="dark"] .chart .area, :root[data-theme="dark"] .chart-card .chart .area { fill: rgba(255,178,122,.13) !important; }
:root[data-theme="dark"] .chart .pt, :root[data-theme="dark"] .chart-card .chart .pt { fill: #fff !important; stroke: #000 !important; }
:root[data-theme="dark"] .chart .swatch { fill: rgba(255,178,122,.45) !important; stroke: #ffb27a !important; }
:root[data-theme="dark"] .chart .tick, :root[data-theme="dark"] .chart .legend text, :root[data-theme="dark"] .chart-card .chart text { fill: #fff !important; }
:root[data-theme="dark"] .chart .grid { stroke: rgba(255,255,255,.16) !important; }
:root[data-theme="dark"] .avatar { background: #3b4a6b !important; color: #fff !important; }
:root[data-theme="dark"] .side .tag, :root[data-theme="dark"] .side .nav .tag, :root[data-theme="dark"] .tag.new { background: #e8508f !important; color: #fff !important; }
:root[data-theme="dark"] #nf-bg { background: linear-gradient(160deg, #0b0813 0%, #120d1d 50%, #0a0711 100%) !important; }
:root[data-theme="dark"] #nf-bg .nfb { opacity: .35 !important; }
:root[data-theme="dark"] .stat::before { background: #ff7a45 !important; }
@media (max-width: 800px) { :root[data-theme="dark"] .side.admin.open, :root[data-theme="dark"] .side.drawer.open { background: rgba(8,6,16,.55) !important; } }
:root[data-theme="dark"] .scrim.on { background: rgba(0,0,0,.25) !important; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; } .icon-btn svg { width: 20px; height: 20px; }
:root[data-theme="dark"] .soon, :root[data-theme="dark"] em { color: rgba(255,255,255,.75) !important; }
:root[data-theme="light"] ::placeholder, :root[data-theme="light"] .modal-box ::placeholder { color: rgba(11,7,16,.72) !important; opacity: 1; }
:root[data-theme="dark"] ::placeholder { color: rgba(255,255,255,.75) !important; opacity: 1; }

/* ===== dark mode = true black: no plum tint, no glow, no coloured badges; boxes stay see-through with a thin white edge ===== */
:root[data-theme="dark"] #nf-bg { background: #000 !important; }
:root[data-theme="dark"] #nf-bg .nfb, :root[data-theme="dark"] #nf-bg .nfw, :root[data-theme="dark"] #nf-bg .nfp { display: none !important; }
:root[data-theme="dark"] html, html[data-theme="dark"] { background: #000; }
:root[data-theme="dark"] .kpi .ic, :root[data-theme="dark"] .kpi:nth-child(even) .ic, :root[data-theme="dark"] .kpi svg.ic { background: transparent !important; border: 1.4px solid rgba(255,255,255,.7); color: #fff !important; }
:root[data-theme="dark"] .stat::before, :root[data-theme="dark"] .stat:nth-child(even)::before { background: rgba(255,255,255,.6) !important; }
:root[data-theme="dark"] .obar i { background: #fff !important; }
:root[data-theme="dark"] .chart .line, :root[data-theme="dark"] .chart-card .chart .line { stroke: #fff !important; }
:root[data-theme="dark"] .chart .area, :root[data-theme="dark"] .chart-card .chart .area { fill: rgba(255,255,255,.08) !important; }
:root[data-theme="dark"] .chart .swatch { fill: rgba(255,255,255,.3) !important; stroke: #fff !important; }
:root[data-theme="dark"] .avatar { background: #fff !important; color: #000 !important; text-shadow: none !important; }
:root[data-theme="dark"] .side .tag, :root[data-theme="dark"] .side .nav .tag, :root[data-theme="dark"] .tag.new { background: #fff !important; color: #000 !important; text-shadow: none !important; }
:root[data-theme="dark"] .side .sub.active, :root[data-theme="dark"] .side .nav.active, :root[data-theme="dark"] .side .active { border-left-color: #fff; }
:root[data-theme="dark"] .bar, :root[data-theme="dark"] .topbar, :root[data-theme="dark"] thead th, :root[data-theme="dark"] .scrollY thead th { background: rgba(0,0,0,.4) !important; }
:root[data-theme="dark"] .modal-box { background: rgba(0,0,0,.55) !important; }
@media (max-width: 800px) { :root[data-theme="dark"] .side.admin.open, :root[data-theme="dark"] .side.drawer.open { background: rgba(0,0,0,.6) !important; } }
:root[data-theme="dark"] .side svg, :root[data-theme="dark"] .side .ic { color: #fff; stroke: #fff; }

/* ===== dark mode = ordinary dashboard dark: soft charcoal background, slightly lighter panels, neutral greys ===== */
:root[data-theme="dark"] #nf-bg { background: #0f1218 !important; }
html[data-theme="dark"] { background: #0f1218; }
:root[data-theme="dark"] .card, :root[data-theme="dark"] .stat, :root[data-theme="dark"] .kpi, :root[data-theme="dark"] .chart-card, :root[data-theme="dark"] .login-card, :root[data-theme="dark"] .quick, :root[data-theme="dark"] .range { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.10) !important; }
:root[data-theme="dark"] .side { background: #141820 !important; border-right: 1px solid rgba(255,255,255,.08) !important; }
:root[data-theme="dark"] .bar, :root[data-theme="dark"] .topbar { background: rgba(20,24,32,.82) !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; }
:root[data-theme="dark"] thead th, :root[data-theme="dark"] .scrollY thead th { background: #171b24 !important; }
:root[data-theme="dark"] tbody td { border-color: rgba(255,255,255,.07) !important; }
:root[data-theme="dark"] .modal-box, :root[data-theme="dark"] .rp-pop { background: #1a1f29 !important; border: 1px solid rgba(255,255,255,.12) !important; }
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.22) !important; }
:root[data-theme="dark"] option, :root[data-theme="dark"] optgroup { background: #1a1f29; }
:root[data-theme="dark"] .btn, :root[data-theme="dark"] .pgb, :root[data-theme="dark"] .rp-btn, :root[data-theme="dark"] .chip, :root[data-theme="dark"] .btn.primary { border-color: rgba(255,255,255,.55) !important; }
:root[data-theme="dark"] body, :root[data-theme="dark"] td, :root[data-theme="dark"] th, :root[data-theme="dark"] label, :root[data-theme="dark"] p, :root[data-theme="dark"] span, :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] strong, :root[data-theme="dark"] .kv, :root[data-theme="dark"] .stat .n { color: #eceff4 !important; text-shadow: none !important; }
:root[data-theme="dark"] .chart .tick, :root[data-theme="dark"] .chart .legend text, :root[data-theme="dark"] .chart-card .chart text { fill: #c3c9d4 !important; }
:root[data-theme="dark"] .chart .grid { stroke: rgba(255,255,255,.08) !important; }
:root[data-theme="dark"] .chart .line, :root[data-theme="dark"] .chart-card .chart .line { stroke: #7da2ff !important; }
:root[data-theme="dark"] .chart .area, :root[data-theme="dark"] .chart-card .chart .area { fill: rgba(125,162,255,.12) !important; }
:root[data-theme="dark"] .chart .pt, :root[data-theme="dark"] .chart-card .chart .pt { stroke: #0f1218 !important; fill: #7da2ff !important; }
:root[data-theme="dark"] .chart .swatch { fill: rgba(125,162,255,.35) !important; stroke: #7da2ff !important; }
:root[data-theme="dark"] .obar i { background: #7da2ff !important; }
:root[data-theme="dark"] .kpi .ic, :root[data-theme="dark"] .kpi:nth-child(even) .ic, :root[data-theme="dark"] .kpi svg.ic { border: 0; background: rgba(125,162,255,.16) !important; color: #9db8ff !important; }
:root[data-theme="dark"] .stat::before, :root[data-theme="dark"] .stat:nth-child(even)::before { background: #7da2ff !important; }
:root[data-theme="dark"] .side .sub.active, :root[data-theme="dark"] .side .nav.active, :root[data-theme="dark"] .side .active { background: rgba(125,162,255,.14) !important; border-left-color: #7da2ff; }
:root[data-theme="dark"] .side .sub, :root[data-theme="dark"] .side .nav { color: #d6dae3 !important; }
:root[data-theme="dark"] .side svg, :root[data-theme="dark"] .side .ic { color: #aab3c5; stroke: #aab3c5; }
@media (max-width: 800px) { :root[data-theme="dark"] .side.admin.open, :root[data-theme="dark"] .side.drawer.open { background: rgba(20,24,32,.94) !important; } }

/* ===== dark mode: real see-through glass. A soft static backdrop sits behind, every panel/popup/menu is translucent + blurred ===== */
:root[data-theme="dark"] #nf-bg { background: radial-gradient(60vmax 50vmax at 12% 8%, rgba(70, 110, 230, .30), transparent 60%), radial-gradient(55vmax 45vmax at 90% 20%, rgba(150, 90, 230, .24), transparent 60%), radial-gradient(60vmax 50vmax at 55% 100%, rgba(230, 100, 150, .16), transparent 62%), #0d1017 !important; }
:root[data-theme="dark"] .card, :root[data-theme="dark"] .stat, :root[data-theme="dark"] .kpi, :root[data-theme="dark"] .chart-card, :root[data-theme="dark"] .login-card, :root[data-theme="dark"] .quick, :root[data-theme="dark"] .range { background: rgba(255,255,255,.035) !important; -webkit-backdrop-filter: blur(16px) saturate(150%) !important; backdrop-filter: blur(16px) saturate(150%) !important; border: 1px solid rgba(255,255,255,.16) !important; }
:root[data-theme="dark"] .side { background: rgba(255,255,255,.035) !important; -webkit-backdrop-filter: blur(22px) saturate(150%) !important; backdrop-filter: blur(22px) saturate(150%) !important; }
:root[data-theme="dark"] .bar, :root[data-theme="dark"] .topbar { background: rgba(255,255,255,.05) !important; -webkit-backdrop-filter: blur(26px) saturate(150%) !important; backdrop-filter: blur(26px) saturate(150%) !important; }
:root[data-theme="dark"] thead th, :root[data-theme="dark"] .scrollY thead th { background: rgba(255,255,255,.05) !important; -webkit-backdrop-filter: blur(20px) !important; backdrop-filter: blur(20px) !important; }
/* pop-ups, dialogs, dropdown panels: translucent (no solid black page) */
:root[data-theme="dark"] .modal-box, :root[data-theme="dark"] .rp-pop, :root[data-theme="dark"] [class*="pop"], :root[data-theme="dark"] [class*="menu-panel"], :root[data-theme="dark"] [class*="dropdown"], :root[data-theme="dark"] [class*="suggest"] { background: rgba(255,255,255,.07) !important; -webkit-backdrop-filter: blur(30px) saturate(170%) !important; backdrop-filter: blur(30px) saturate(170%) !important; border: 1px solid rgba(255,255,255,.22) !important; box-shadow: 0 18px 60px rgba(0,0,0,.35) !important; }
:root[data-theme="dark"] #modal { background: rgba(0,0,0,.18) !important; -webkit-backdrop-filter: blur(7px) !important; backdrop-filter: blur(7px) !important; }
@media (max-width: 800px) { :root[data-theme="dark"] .side.admin.open, :root[data-theme="dark"] .side.drawer.open { background: rgba(255,255,255,.07) !important; -webkit-backdrop-filter: blur(30px) saturate(170%) !important; backdrop-filter: blur(30px) saturate(170%) !important; } }
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: rgba(255,255,255,.06) !important; }
/* text: normal light default, with colour on headings and labels so it is not flat */
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] .modal-box h3, :root[data-theme="dark"] .modal-box h2 { color: #a9c1ff !important; }
:root[data-theme="dark"] h3, :root[data-theme="dark"] .kl, :root[data-theme="dark"] .stat .l, :root[data-theme="dark"] label { color: #d0bcff !important; }
:root[data-theme="dark"] thead th { color: #ffd29a !important; }
:root[data-theme="dark"] .side .sub, :root[data-theme="dark"] .side .nav { color: #e9ecf3 !important; }
:root[data-theme="dark"] .side .sub.active, :root[data-theme="dark"] .side .nav.active { color: #a9c1ff !important; }

/* ===== custom transparent drop-down (selectui.js) ===== */
select.nsel-src { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; pointer-events: none !important; overflow: hidden; }
.nsel-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer; font: inherit; font-weight: 700; padding: 7px 10px; border-radius: 12px; background: transparent !important; box-shadow: none !important; min-height: 36px; max-width: 100%; }
.nsel-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nsel-btn svg { flex: none; transition: transform .15s; } .nsel-btn.open svg { transform: rotate(180deg); }
.nsel-btn:disabled { opacity: .5; cursor: not-allowed; }
:root[data-theme="light"] .nsel-btn { color: #0b0710 !important; border: 1.2px solid rgba(11,7,16,.5) !important; }
:root[data-theme="dark"] .nsel-btn { color: #eceff4 !important; border: 1.2px solid rgba(255,255,255,.28) !important; background: rgba(255,255,255,.05) !important; }
.nsel-panel { position: fixed; z-index: 200; overflow-y: auto; padding: 6px; border-radius: 14px; -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%); }
:root[data-theme="light"] .nsel-panel { background: rgba(255,255,255,.34); border: 1.2px solid rgba(11,7,16,.3); color: #0b0710; box-shadow: 0 14px 40px rgba(70,40,80,.18); }
:root[data-theme="dark"] .nsel-panel { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.24); color: #eceff4; box-shadow: 0 16px 50px rgba(0,0,0,.4); }
.nsel-opt { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 9px; cursor: pointer; font-weight: 700; white-space: nowrap; }
.nsel-opt i { width: 14px; font-style: normal; flex: none; }
.nsel-opt:hover { background: rgba(127,127,127,.2); } .nsel-opt.on { background: rgba(127,127,127,.14); } .nsel-opt.dis { opacity: .4; cursor: not-allowed; }
.nsel-grp { padding: 8px 12px 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; font-weight: 800; }

/* dark mode: the company logo sits on its own soft dark plate with a light edge glow so it never melts into the coloured backdrop */
:root[data-theme="dark"] .side .brand, :root[data-theme="dark"] .loginlogo-wrap { background: rgba(6, 8, 14, .55) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; margin: 12px 12px 8px; padding: 8px 12px; }
:root[data-theme="dark"] .brandlogo, :root[data-theme="dark"] .loginlogo { filter: drop-shadow(0 0 1px rgba(255,255,255,.9)) drop-shadow(0 0 10px rgba(255,255,255,.28)); }
:root[data-theme="dark"] #nf-bg { background: radial-gradient(60vmax 50vmax at 30% 70%, rgba(70, 110, 230, .26), transparent 60%), radial-gradient(55vmax 45vmax at 90% 20%, rgba(150, 90, 230, .24), transparent 60%), radial-gradient(60vmax 50vmax at 55% 100%, rgba(230, 100, 150, .16), transparent 62%), #0d1017 !important; }

/* logo back to its default look; the dark theme itself is fixed so the logo reads: no neon behind the sidebar, sidebar a little darker */
:root[data-theme="dark"] .side .brand, :root[data-theme="dark"] .loginlogo-wrap { background: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; border-radius: 0; margin: 0; padding: revert; }
:root[data-theme="dark"] .brandlogo, :root[data-theme="dark"] .loginlogo { filter: none; }
:root[data-theme="dark"] #nf-bg { background: radial-gradient(55vmax 45vmax at 80% 25%, rgba(110, 90, 230, .26), transparent 60%), radial-gradient(60vmax 50vmax at 60% 100%, rgba(60, 120, 220, .18), transparent 62%), radial-gradient(45vmax 40vmax at 100% 80%, rgba(230, 100, 150, .12), transparent 62%), #0b0e14 !important; }
:root[data-theme="dark"] .side { background: rgba(8, 10, 16, .62) !important; }
@media (max-width: 800px) { :root[data-theme="dark"] .side.admin.open, :root[data-theme="dark"] .side.drawer.open { background: rgba(8, 10, 16, .7) !important; } }

/* ===== sidebar: ☰ opens/closes it on every screen, Log out sits at the bottom-left corner ===== */
.menu-btn, .icon-btn.menu-btn { display: inline-flex !important; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0 !important; border-radius: 12px !important; margin-right: 6px; }
.side { display: flex; flex-direction: column; }
.side-foot { margin-top: auto; position: sticky; bottom: 0; padding: 12px; z-index: 2; }
.side-foot .btn { width: 100%; justify-content: center; text-align: center; }
@media (max-width: 800px) { .side.admin, .side.drawer { display: none !important; } .side.admin.open, .side.drawer.open { display: flex !important; } }
@media (min-width: 801px) { .side-off .shell { grid-template-columns: 1fr !important; } .side-off .side.admin, .side-off .side.drawer { display: none !important; } }
/* ===== light mode: a richer static backdrop so the see-through panels can actually be seen; popups are glass, not paper ===== */
:root[data-theme="light"] #nf-bg { background: radial-gradient(55vmax 45vmax at 12% 10%, rgba(215, 127, 169, .30), transparent 60%), radial-gradient(55vmax 45vmax at 88% 22%, rgba(169, 145, 207, .34), transparent 60%), radial-gradient(60vmax 50vmax at 50% 105%, rgba(255, 185, 140, .26), transparent 62%), #fbf1f7 !important; }
:root[data-theme="light"] #nf-bg .nfb { display: none !important; }
:root[data-theme="light"] .nsel-panel { background: rgba(255,255,255,.12) !important; -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%); border: 1.2px solid rgba(11,7,16,.32); }
:root[data-theme="light"] .modal-box, :root[data-theme="light"] .rp-pop { background: rgba(255,255,255,.12) !important; -webkit-backdrop-filter: blur(34px) saturate(180%) !important; backdrop-filter: blur(34px) saturate(180%) !important; }
:root[data-theme="light"] #modal { background: rgba(255,255,255,.08) !important; -webkit-backdrop-filter: blur(7px) !important; backdrop-filter: blur(7px) !important; }
:root[data-theme="light"] .nsel-btn, :root[data-theme="light"] input, :root[data-theme="light"] select, :root[data-theme="light"] textarea { background: rgba(255,255,255,.06) !important; }
:root[data-theme="light"] .nsel-opt:hover { background: rgba(11,7,16,.08); } :root[data-theme="light"] .nsel-opt.on { background: rgba(11,7,16,.06); }
:root[data-theme="light"] .card, :root[data-theme="light"] .stat, :root[data-theme="light"] .kpi, :root[data-theme="light"] .chart-card, :root[data-theme="light"] .quick, :root[data-theme="light"] .range { background: rgba(255,255,255,.06) !important; -webkit-backdrop-filter: blur(16px) saturate(160%) !important; backdrop-filter: blur(16px) saturate(160%) !important; }
:root[data-theme="light"] .side { background: rgba(255,255,255,.08) !important; -webkit-backdrop-filter: blur(22px) saturate(160%) !important; backdrop-filter: blur(22px) saturate(160%) !important; }
:root[data-theme="light"] .bar, :root[data-theme="light"] .topbar { background: rgba(255,255,255,.14) !important; }
@media (max-width: 800px) { :root[data-theme="light"] .side.admin.open, :root[data-theme="light"] .side.drawer.open { background: rgba(255,255,255,.14) !important; -webkit-backdrop-filter: blur(30px) saturate(170%) !important; backdrop-filter: blur(30px) saturate(170%) !important; } }
.side-close { display: none; position: absolute; top: 14px; right: 12px; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 10px !important; z-index: 3; }
@media (max-width: 800px) { .side.open .side-close { display: inline-flex; } }

/* distribute-leads summary lines (Total HR / Receive / Not receive / Remaining): same transparent popup, stronger readable colours */
.c-blue, .c-green, .c-orange, .c-pink { font-weight: 800 !important; text-shadow: none !important; }
:root[data-theme="light"] .c-blue { color: #1746c4 !important; } :root[data-theme="light"] .c-green { color: #0a6b49 !important; }
:root[data-theme="light"] .c-orange { color: #a14a00 !important; } :root[data-theme="light"] .c-pink { color: #b0124f !important; }
:root[data-theme="dark"] .c-blue { color: #8fb5ff !important; } :root[data-theme="dark"] .c-green { color: #5eead4 !important; }
:root[data-theme="dark"] .c-orange { color: #ffc266 !important; } :root[data-theme="dark"] .c-pink { color: #ff9ec7 !important; }
#gsBody > div { font-weight: 800; }
:root[data-theme="light"] #gsBody > div:not([class]) { color: #0b0710 !important; }
:root[data-theme="light"] .modal-box h2, :root[data-theme="light"] .modal-box h3 { color: #0b0710 !important; text-shadow: none !important; }
:root[data-theme="dark"] #gsBody > div:not([class]) { color: #fff !important; }
/* Log out strip at the bottom of the sidebar: blurs whatever menu rows scroll under it, so nothing overlaps */
.side-foot { -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); border-top: 1px solid rgba(127,127,127,.28); background: rgba(255,255,255,.12); }
:root[data-theme="dark"] .side-foot { background: rgba(8,10,16,.35); }

/* pop-up open: the page behind is dimmed a little and blurred (easier on the eyes); the pop-up itself is brighter but still glass, no colour */
:root[data-theme="light"] #modal { background: rgba(30, 24, 38, .26) !important; -webkit-backdrop-filter: blur(8px) brightness(.82) !important; backdrop-filter: blur(8px) brightness(.82) !important; }
:root[data-theme="dark"] #modal { background: rgba(0, 0, 0, .38) !important; -webkit-backdrop-filter: blur(8px) brightness(.75) !important; backdrop-filter: blur(8px) brightness(.75) !important; }
:root[data-theme="light"] .modal-box, :root[data-theme="light"] .rp-pop { background: rgba(255, 255, 255, .42) !important; -webkit-backdrop-filter: blur(30px) saturate(100%) brightness(1.18) !important; backdrop-filter: blur(30px) saturate(100%) brightness(1.18) !important; border: 1.2px solid rgba(255, 255, 255, .85) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .8) !important; }
:root[data-theme="dark"] .modal-box, :root[data-theme="dark"] .rp-pop { background: rgba(255, 255, 255, .12) !important; -webkit-backdrop-filter: blur(30px) saturate(100%) brightness(1.25) !important; backdrop-filter: blur(30px) saturate(100%) brightness(1.25) !important; border: 1px solid rgba(255, 255, 255, .3) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, .5) !important; }
:root[data-theme="light"] .nsel-panel { background: rgba(255, 255, 255, .40) !important; -webkit-backdrop-filter: blur(30px) brightness(1.15) !important; backdrop-filter: blur(30px) brightness(1.15) !important; }

/* sidebar = three parts: logo (fixed) / menu (scrolls) / Log out (fixed at the bottom-left). The menu can never run under the Log out button. */
.side, .side.admin.open, .side.drawer.open { overflow: hidden !important; }
.side > nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.side > .brand { flex: none; }
.side-foot { position: static !important; margin-top: 0 !important; flex: none; padding: 10px 12px 12px; -webkit-backdrop-filter: none; backdrop-filter: none; background: transparent !important; border-top: 1px solid rgba(127,127,127,.28); }
.side-foot .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border-radius: 999px !important; }

/* Moderator access dialog: switch on the left, text on the right */
label.chk{display:flex!important;align-items:flex-start;gap:12px;padding:8px 0}
label.chk input[type=checkbox]{flex:0 0 auto;width:18px;height:18px;margin:3px 0 0;accent-color:#111}
:root[data-theme="dark"] label.chk input[type=checkbox]{accent-color:#6ea8ff}
label.chk span{display:block}

/* Attendance calendar */
.attcal{width:min(920px,88vw);position:relative}
.attcal .cal-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 6px;padding-right:34px}
.attcal .cal-head h2{margin:0 6px 0 0}
.attcal .calwho,.attcal .calrange,.attcal .calsum{margin:10px 0;font-weight:600}
.attcal .c-hr{color:#6d3df0}.attcal .c-tl{color:#4a2fd0}
:root[data-theme="dark"] .attcal .c-hr,:root[data-theme="dark"] .attcal .c-tl{color:#9d8cff}
.attcal .bdg{display:inline-block;min-width:26px;text-align:center;padding:2px 9px;border-radius:7px;color:#fff;font-weight:700}
.attcal .bdg.t{background:#5b34e0}.attcal .bdg.p{background:#2fa56b}.attcal .bdg.a{background:#d9453d}
.attcal .calgrid{width:100%;border-collapse:collapse;table-layout:fixed;margin-top:12px}
.attcal .calgrid th{text-align:center;font-size:12px;font-weight:600;padding:6px 0;background:transparent!important;position:static}
.attcal .calgrid td{height:64px;vertical-align:top;padding:6px;border:1px solid rgba(120,120,140,.45)}
.attcal .calgrid td.off{background:transparent}
.attcal .dayc,.attcal .dayn{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;border-radius:50%;font-weight:700;font-size:13px}
.attcal .dayc{color:#fff}.attcal .dayc.p{background:#2fa56b}.attcal .dayc.a{background:#b8322c}
.attcal .dayn{opacity:.55}
@media (max-width:600px){.attcal .calgrid td{height:44px;padding:3px}.attcal .dayc,.attcal .dayn{min-width:24px;height:24px;font-size:11px}}
#modalBox:has(.attcal){width:min(940px,94vw)!important;max-width:94vw!important;overflow:auto}
.attcal{width:100%}
.attcal .icon-btn{font-size:22px;line-height:1;width:34px;height:34px}
.attcal .icon-btn:disabled{opacity:.3;cursor:default}
.attcal .calgrid th{color:inherit;opacity:.8;text-transform:none;border:0}

/* TL deactivate dialog */
.dz-h{display:flex;align-items:center;gap:10px}.dz-h svg{color:#e0605a}
.dz-pick{display:block;width:100%;text-align:left;padding:16px 18px;border-radius:14px;border:1px solid transparent;font:inherit;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:.2px}
.dz-pick strong{font-weight:800}
.dz-pick.block{background:#f2c04b;color:#3a2a00}.dz-pick.del{background:#e97a77;color:#4a0d0b}
.dz-rs{border:0;padding:0;margin:0}.dz-rs legend{font-weight:700;font-size:17px;margin-bottom:6px}
.dz-r{display:flex!important;align-items:center;gap:14px;padding:10px 12px;border-radius:12px;cursor:pointer;font-weight:600}
.dz-r:hover{background:rgba(120,120,140,.14)}
.dz-r input{flex:0 0 auto;width:20px;height:20px;margin:0;accent-color:#5b34e0}
.dz-det{white-space:pre-wrap}.dz-img{max-width:100%;max-height:60vh;border-radius:12px}
.pill.bad{background:rgba(217,69,61,.16);color:#c0342d}:root[data-theme="dark"] .pill.bad{color:#ff8a84}
#modalBox textarea{width:100%}

/* Deactivated users list (review) */
.dzreason{min-width:210px;max-width:320px;white-space:normal}
.dzreason .muted{margin-top:4px;font-size:12px;line-height:1.35}
a.lnk{text-decoration:underline;font-weight:700;color:#5b34e0;cursor:pointer}
:root[data-theme="dark"] a.lnk{color:#9d8cff}
#dzBulk{align-items:center;gap:12px}
.dztbl .dzreason{min-width:170px;max-width:230px}
.dztbl td,.dztbl th{padding-left:8px;padding-right:8px}

/* Restore = green */
.btn[data-dzrestore],#rsForm .btn.primary{background:#2fa56b!important;border-color:#2fa56b!important;color:#fff!important;font-weight:700}
.btn[data-dzrestore]:hover,#rsForm .btn.primary:hover{background:#278f5d!important;border-color:#278f5d!important}

/* Deactivated HR: view-only notice, and the admin's two review tabs */
.deact-banner{margin:0;padding:12px 18px;background:#d9453d;color:#fff;font-weight:600;line-height:1.4}
.deact-banner strong{font-weight:800}
.dztabs{display:flex;gap:10px;margin:10px 0 12px;flex-wrap:wrap}
.dztab{padding:9px 18px;border-radius:999px;border:1.5px solid currentColor;background:transparent;color:inherit;font:inherit;font-weight:700;cursor:pointer;opacity:.75}
.dztab.on{background:#111;color:#fff;border-color:#111;opacity:1}
:root[data-theme="dark"] .dztab.on{background:#6ea8ff;color:#06101f;border-color:#6ea8ff}
.deact-banner,.deact-banner *{color:#fff!important}
.dztab.on,.dztab.on *{color:#fff!important}
:root[data-theme="dark"] .dztab.on,:root[data-theme="dark"] .dztab.on *{color:#06101f!important}

/* ===== Sidebar hover: the item under the cursor grows a little, its neighbours a touch ===== */
.side .sub,.side .grp-h,.side .nav{transition:transform .16s ease,background-color .16s ease,box-shadow .16s ease;transform-origin:left center;will-change:transform}
.side .sub:not(.off):hover,.side .grp-h:hover,.side .nav:hover{transform:scale(1.07);background:rgba(120,120,150,.14);position:relative;z-index:2}
.side .sub:not(.off):has(+ .sub:hover),.side .sub:hover + .sub:not(.off){transform:scale(1.025)}
.side .grp-h.off:hover{transform:none;background:none}

/* ===== Glass for the newer screens ===== */
.deact-banner{background:rgba(217,69,61,.55)!important;backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid rgba(255,255,255,.35)}
.dz-pick{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.dz-pick.block{background:rgba(242,192,75,.30)!important;border-color:rgba(242,192,75,.85)!important;color:#5a4000!important}
.dz-pick.del{background:rgba(233,122,119,.28)!important;border-color:rgba(233,122,119,.85)!important;color:#8a1c18!important}
:root[data-theme="dark"] .dz-pick.block{color:#ffd978!important}
:root[data-theme="dark"] .dz-pick.del{color:#ffb0ad!important}
.btn[data-dzrestore],#rsForm .btn.primary{background:rgba(47,165,107,.26)!important;border:1.5px solid #2fa56b!important;color:#17653f!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn[data-dzrestore]:hover,#rsForm .btn.primary:hover{background:rgba(47,165,107,.42)!important}
:root[data-theme="dark"] .btn[data-dzrestore],:root[data-theme="dark"] #rsForm .btn.primary{color:#7be0ab!important}
.dztab{background:rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.dztab.on{background:rgba(91,52,224,.18)!important;border-color:#5b34e0!important}
.dztab.on,.dztab.on *{color:#3b1fa8!important}
:root[data-theme="dark"] .dztab.on{background:rgba(110,168,255,.22)!important;border-color:#6ea8ff!important}
:root[data-theme="dark"] .dztab.on,:root[data-theme="dark"] .dztab.on *{color:#cfe0ff!important}
.attcal .calgrid thead,.attcal .calgrid th{background:transparent!important}
.attcal .calgrid td{background:rgba(255,255,255,.06)}
.attcal .bdg{backdrop-filter:blur(6px);opacity:.92}
#modalBox input[type=file]{background:rgba(255,255,255,.10)!important;border:1px solid rgba(120,120,140,.55)!important;color:inherit;border-radius:12px;padding:8px}
#modalBox input[type=file]::file-selector-button{background:rgba(120,120,150,.22);color:inherit;border:1px solid rgba(120,120,140,.55);border-radius:10px;padding:6px 12px;margin-right:10px;font:inherit;font-weight:700;cursor:pointer;backdrop-filter:blur(6px)}
#modalBox textarea,#modalBox select{background:rgba(255,255,255,.10)!important;backdrop-filter:blur(6px)}
.dzreason .pill,.pill.bad,.pill.warn,.pill.ok{backdrop-filter:blur(4px)}

/* ===== Dropdown lists: truly see-through glass (nothing white/solid behind the text) ===== */
:root[data-theme="light"] .nsel-panel{background:rgba(255,255,255,.10)!important;-webkit-backdrop-filter:blur(26px) saturate(170%)!important;backdrop-filter:blur(26px) saturate(170%)!important;border:1.3px solid rgba(11,7,16,.38)!important;box-shadow:0 14px 40px rgba(70,40,80,.22)!important}
:root[data-theme="dark"] .nsel-panel{background:rgba(255,255,255,.05)!important;-webkit-backdrop-filter:blur(26px) saturate(150%)!important;backdrop-filter:blur(26px) saturate(150%)!important;border:1px solid rgba(255,255,255,.3)!important}
:root[data-theme="light"] .nsel-opt:hover,:root[data-theme="light"] .nsel-opt.on{background:rgba(11,7,16,.09)!important}
:root[data-theme="dark"] .nsel-opt:hover,:root[data-theme="dark"] .nsel-opt.on{background:rgba(255,255,255,.12)!important}

/* Date-range popover: glass too */
.rp-pop{-webkit-backdrop-filter:blur(26px) saturate(170%)!important;backdrop-filter:blur(26px) saturate(170%)!important}
:root[data-theme="light"] .rp-pop{background:rgba(255,255,255,.14)!important;border:1.3px solid rgba(11,7,16,.38)!important;color:#0b0710!important;box-shadow:0 14px 40px rgba(70,40,80,.22)!important}
:root[data-theme="dark"] .rp-pop{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.3)!important;color:#eceff4!important}
.rp-pop .rp-sel{background:rgba(255,255,255,.12)!important}

/* Popups: more see-through, still readable */
:root[data-theme="light"] #modalBox{background:rgba(255,255,255,.26)!important;-webkit-backdrop-filter:blur(30px) saturate(1.5) brightness(1.08)!important;backdrop-filter:blur(30px) saturate(1.5) brightness(1.08)!important}
:root[data-theme="dark"] #modalBox{background:rgba(255,255,255,.08)!important;-webkit-backdrop-filter:blur(30px) saturate(1.4) brightness(1.2)!important;backdrop-filter:blur(30px) saturate(1.4) brightness(1.2)!important}

/* Sidebar: glass, see-through */
:root[data-theme="dark"] .side,:root[data-theme="dark"] aside.side{background:rgba(255,255,255,.06)!important;-webkit-backdrop-filter:blur(28px) saturate(1.5) brightness(1.15)!important;backdrop-filter:blur(28px) saturate(1.5) brightness(1.15)!important}
:root[data-theme="light"] .side,:root[data-theme="light"] aside.side{background:rgba(255,255,255,.22)!important;-webkit-backdrop-filter:blur(28px) saturate(1.5)!important;backdrop-filter:blur(28px) saturate(1.5)!important}

/* Clear glass: text behind stays visible (light blur, low tint) */
:root[data-theme="light"] .nsel-panel,:root[data-theme="light"] .rp-pop{background:rgba(255,255,255,.06)!important;-webkit-backdrop-filter:blur(3px) saturate(1.3)!important;backdrop-filter:blur(3px) saturate(1.3)!important;border:1px solid rgba(255,255,255,.55)!important;box-shadow:0 8px 30px rgba(0,0,0,.12)!important}
:root[data-theme="dark"] .nsel-panel,:root[data-theme="dark"] .rp-pop{background:rgba(255,255,255,.03)!important;-webkit-backdrop-filter:blur(3px) saturate(1.3)!important;backdrop-filter:blur(3px) saturate(1.3)!important;border:1px solid rgba(255,255,255,.18)!important}
:root[data-theme="light"] #modalBox,:root[data-theme="light"] #confirmBox{background:rgba(255,255,255,.10)!important;-webkit-backdrop-filter:blur(5px) saturate(1.3)!important;backdrop-filter:blur(5px) saturate(1.3)!important}
:root[data-theme="dark"] #modalBox,:root[data-theme="dark"] #confirmBox{background:rgba(255,255,255,.04)!important;-webkit-backdrop-filter:blur(5px) saturate(1.3)!important;backdrop-filter:blur(5px) saturate(1.3)!important}
:root[data-theme="light"] .side,:root[data-theme="light"] aside.side{background:rgba(255,255,255,.10)!important;-webkit-backdrop-filter:blur(6px) saturate(1.3)!important;backdrop-filter:blur(6px) saturate(1.3)!important}
:root[data-theme="dark"] .side,:root[data-theme="dark"] aside.side{background:rgba(255,255,255,.03)!important;-webkit-backdrop-filter:blur(6px) saturate(1.3)!important;backdrop-filter:blur(6px) saturate(1.3)!important}
/* dim layer behind popups: no dark/blur wash */


/* Reference look: page behind popup blurred, popup itself clear tinted glass */
#modal,.modal{-webkit-backdrop-filter:blur(14px) saturate(1.2)!important;backdrop-filter:blur(14px) saturate(1.2)!important;background:rgba(30,26,40,.18)!important}
:root[data-theme="light"] #modalBox,:root[data-theme="light"] #confirmBox{background:rgba(255,255,255,.16)!important;-webkit-backdrop-filter:blur(4px) saturate(1.2)!important;backdrop-filter:blur(4px) saturate(1.2)!important;border:1.5px solid rgba(255,255,255,.85)!important}
:root[data-theme="dark"] #modalBox,:root[data-theme="dark"] #confirmBox{background:rgba(255,255,255,.07)!important;-webkit-backdrop-filter:blur(4px) saturate(1.2)!important;backdrop-filter:blur(4px) saturate(1.2)!important;border:1.5px solid rgba(255,255,255,.4)!important}

/* Hierarchy: find anyone */
.lkcard{margin-bottom:14px}
.lkin{display:block;width:100%;margin:10px 0}
.lkrow{padding:10px 0;border-top:1px solid rgba(128,128,128,.25)}
.lkmeta{font-size:13px;margin-top:3px}
.lkhist{margin-top:4px;font-size:13px}
.pill.bad{color:#c0392b}

/* Leaderboard & Rewards */
.lb{display:flex;flex-direction:column;gap:14px}
.lbhero{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 26px;border-radius:20px;border:1px solid rgba(255,255,255,.5);background:rgba(120,90,200,.10);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lbhero small{letter-spacing:.28em;font-weight:700;color:#5b3fd6;font-size:12px}
.lbhero h2{margin:6px 0 4px;font-size:30px}.lbhero p{margin:0;opacity:.75}
.lbmonth{background:#5b3fd6;color:#fff;border-radius:999px;padding:8px 18px;font-weight:700;white-space:nowrap}
.lbrew{padding:22px 26px;border-radius:20px;color:#fff;background:linear-gradient(135deg,#8e2fb5,#5a2bc0 60%,#3b2f9c)}
.lbrew h3{margin:10px 0 2px;font-size:28px;color:#fff}.lbrew p{margin:0 0 14px;opacity:.9}.lbrew .muted{color:rgba(255,255,255,.8)}
.lbrew .btn{color:#fff;border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.12)}
.lbtag{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.12em;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35)}
.lbchips{display:flex;flex-wrap:wrap;gap:10px}
.lbchips>div{padding:10px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12)}
.lbchips small{display:block;font-size:11px;letter-spacing:.12em;opacity:.85}.lbchips b{font-size:22px}
.lbme{padding:12px 18px;border-radius:14px;border:1px solid rgba(91,63,214,.4);background:rgba(91,63,214,.10)}
.lbme.one{border-color:#d9a21b;background:rgba(230,170,30,.18);font-size:17px}
.lbtabs{display:flex;gap:0;width:max-content;border-radius:12px;overflow:hidden;border:1px solid rgba(128,128,128,.3)}
.lbtabs button{border:0;background:transparent;padding:11px 22px;font-weight:700;cursor:pointer;color:inherit}
.lbtabs button.on{background:#d63a9c;color:#fff}
.lbpills{display:flex;flex-wrap:wrap;gap:10px}
.lbpills button{border-radius:12px;padding:10px 18px;font-weight:700;border:1px solid rgba(128,128,128,.4);background:transparent;color:inherit;cursor:pointer}
.lbpills button.on{background:#5b3fd6;color:#fff;border-color:#5b3fd6}
.lbtools input{flex:1;min-width:200px}
.lbpod{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.lbcard{position:relative;border-radius:20px;padding:20px 24px;color:#fff;min-height:200px;display:flex;flex-direction:column;gap:6px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.lbcard.c1{background:linear-gradient(135deg,#b7862b,#8a4f1b)}.lbcard.c2{background:linear-gradient(135deg,#59647a,#2f2f78)}.lbcard.c3{background:linear-gradient(135deg,#a02a35,#5c1620)}
.lbcard.me{outline:3px solid #fff}
.lbcard h3{margin:10px 0 0;font-size:26px;color:#fff}.lbcard p{margin:0;opacity:.85}
.lbstar{position:absolute;right:22px;top:20px;font-size:26px}
.lbfoot{margin-top:auto;border-top:1px solid rgba(255,255,255,.25);padding-top:12px;display:flex;justify-content:space-between;align-items:flex-end}
.lbfoot small{letter-spacing:.14em;font-weight:700;opacity:.85}.lbfoot b{font-size:30px}
.lbwin{font-weight:800;font-size:14px;opacity:.95}
.lbm{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;font-weight:800;border:1px solid rgba(128,128,128,.4)}
.lbm.g{background:#e0a830;color:#fff;border:0}.lbm.s{background:#5f6b82;color:#fff;border:0}.lbm.b{background:#d4452f;color:#fff;border:0}
.lbt td,.lbt th{text-align:center}.lbt td:nth-child(2){font-weight:700}
.lbamt{display:inline-block;padding:4px 12px;border-radius:8px;background:rgba(128,128,128,.14);font-weight:800}
.lbamt.win{background:rgba(91,63,214,.16);color:#5b3fd6}
:root[data-theme="dark"] .lbamt.win{color:#a99bff}
.lbt tr.me td{background:rgba(91,63,214,.12)}
.lbcard h3,.lbcard p,.lbcard b,.lbcard small,.lbrew h3,.lbrew p{color:#fff!important}
.lbcard .lbtag{align-self:flex-start}.lbcard{min-height:230px}
.lbt td{vertical-align:middle}
.lbme b{color:inherit}
.lbstar{color:#fff!important}

/* Leaderboard: calmer colours, easy on the eyes */
.lb *{text-shadow:none!important}
:root[data-theme="light"] .lbhero{background:rgba(255,255,255,.35)!important}
:root[data-theme="light"] .lbhero small{color:#6b5bb5}
.lbmonth{background:rgba(110,95,200,.85)!important;color:#fff!important}
:root[data-theme="light"] .lbrew{background:linear-gradient(135deg,rgba(150,125,225,.28),rgba(120,150,230,.22))!important;border:1px solid rgba(255,255,255,.6);color:#2a2540!important}
:root[data-theme="dark"] .lbrew{background:linear-gradient(135deg,rgba(130,105,210,.28),rgba(90,110,200,.20))!important;border:1px solid rgba(255,255,255,.14);color:#eceaf8!important}
:root[data-theme="light"] .lbrew h3,:root[data-theme="light"] .lbrew p,:root[data-theme="light"] .lbrew .muted,:root[data-theme="light"] .lbchips small,:root[data-theme="light"] .lbchips b{color:#2a2540!important}
:root[data-theme="dark"] .lbrew h3,:root[data-theme="dark"] .lbrew p,:root[data-theme="dark"] .lbrew .muted,:root[data-theme="dark"] .lbchips small,:root[data-theme="dark"] .lbchips b{color:#eceaf8!important}
.lbrew .lbtag{color:inherit!important;background:rgba(255,255,255,.28);border-color:rgba(120,100,200,.35)}
:root[data-theme="light"] .lbrew .btn{color:#3d3380!important;border-color:rgba(90,70,190,.5);background:rgba(255,255,255,.5)}
:root[data-theme="dark"] .lbrew .btn{color:#eceaf8!important;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.08)}
.lbchips>div{background:rgba(255,255,255,.35);border-color:rgba(120,100,200,.3)}
:root[data-theme="dark"] .lbchips>div{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)}
.lbtabs button.on{background:rgba(120,100,200,.85)!important;color:#fff!important}
.lbpills button.on{background:rgba(110,95,200,.85)!important;border-color:transparent!important;color:#fff!important}
.lbcard.c1{background:linear-gradient(135deg,#c9a24e,#a47a34)!important}
.lbcard.c2{background:linear-gradient(135deg,#7e8aa3,#5d6a8a)!important}
.lbcard.c3{background:linear-gradient(135deg,#c0725f,#9a4f47)!important}
.lbcard{box-shadow:0 6px 18px rgba(0,0,0,.10)!important}
.lbcard .lbtag{color:#fff!important;background:rgba(255,255,255,.2)}
.lbamt.win{background:rgba(120,100,200,.16)!important}
:root[data-theme] .lbcard h3,:root[data-theme] .lbcard p,:root[data-theme] .lbcard b,:root[data-theme] .lbcard small{color:#fff!important}

/* Hall of Champions (winner list) */
.lbhall{text-align:center}
.lbhall>h2{margin:6px 0 0;font-size:32px;background:linear-gradient(90deg,#d4789a,#9a7fd8);-webkit-background-clip:text;background-clip:text;color:transparent}
.lbstage{display:flex;align-items:center;gap:10px;margin-top:14px;padding:22px 14px;border-radius:22px;border:1px solid rgba(255,255,255,.35);background:rgba(130,105,210,.10)}
.lbmid{flex:1;min-width:0}.lbmid>h3{margin:0 0 16px}
.lbmid .lbpod{text-align:left}
.lbarr{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(128,128,128,.4);background:rgba(255,255,255,.2);color:inherit;cursor:pointer;font-size:15px}
.lbarr:disabled{opacity:.3;cursor:default}
.lbline{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:5px 0}
.lbline b{font-size:22px}.lbline.sm b{font-size:15px}.lbline.sm{opacity:.9;border-top:1px solid rgba(255,255,255,.25);margin-top:6px;padding-top:10px}
.lbdots{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
.lbdots button{width:10px;height:10px;border-radius:50%;border:0;padding:0;background:rgba(128,128,128,.4);cursor:pointer}
.lbdots button.on{width:28px;border-radius:6px;background:rgba(120,100,200,.9)}
.lbmid .scroll{margin-top:16px}

/* Rewards Setup */
.rsgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.rspanel{padding:18px;border-radius:16px;border:1px solid rgba(128,128,128,.3);background:rgba(255,255,255,.12)}
.rsshow{display:flex;align-items:center;gap:10px;margin:12px 0;font-weight:600}
.rspills{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.rspills button{border-radius:10px;padding:6px 12px;font-weight:700;border:1px solid rgba(128,128,128,.4);background:transparent;color:inherit;cursor:pointer}
.rspills button.on{background:rgba(110,95,200,.85);color:#fff;border-color:transparent}
.rsrow{display:flex;align-items:center;gap:12px;margin:8px 0}.rsrow>span:first-child{min-width:70px;font-weight:700}
.rsin{flex:1;display:flex;align-items:stretch;border:1px solid rgba(128,128,128,.4);border-radius:10px;overflow:hidden}
.rsin i{font-style:normal;padding:10px 14px;background:rgba(128,128,128,.15)}.rsin input{flex:1;border:0!important;background:transparent!important;min-width:0}
.rsx{border:0;background:transparent;color:inherit;font-size:16px;cursor:pointer;opacity:.7}.rsx:disabled{opacity:.2;cursor:default}
.rsadd{border:0;background:transparent;color:inherit;font-weight:700;cursor:pointer;padding:6px 0}
.rsdates{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:12px 0}
.lboffer{background:linear-gradient(135deg,rgba(214,150,80,.28),rgba(200,110,130,.22))!important}
:root[data-theme="light"] .lboffer .lbchips small,:root[data-theme="light"] .lboffer .lbchips b,:root[data-theme="light"] .lboffer h3,:root[data-theme="light"] .lboffer p{color:#3a2a20!important}
.lbrow2{margin:10px 0}

/* Leaderboard & Rewards: transparent glass everywhere (tinted, text behind stays visible) */
.lb .lbhero,.lb .lbrew,.lb .lboffer,.lb .lbme,.lb .lbstage,.lb .rspanel,.lb .card,.lb .lbchips>div,.lb .lbcard{-webkit-backdrop-filter:blur(6px) saturate(1.3)!important;backdrop-filter:blur(6px) saturate(1.3)!important}
:root[data-theme="light"] .lb .lbhero{background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.7)!important}
:root[data-theme="dark"] .lb .lbhero{background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.18)!important}
:root[data-theme="light"] .lb .lbrew{background:rgba(150,125,225,.14)!important;border:1px solid rgba(255,255,255,.7)!important}
:root[data-theme="dark"] .lb .lbrew{background:rgba(150,125,225,.08)!important;border:1px solid rgba(255,255,255,.18)!important}
:root[data-theme="light"] .lb .lboffer{background:rgba(220,150,90,.16)!important}
:root[data-theme="dark"] .lb .lboffer{background:rgba(220,150,90,.09)!important}
:root[data-theme="light"] .lb .lbchips>div{background:rgba(255,255,255,.16)!important;border-color:rgba(255,255,255,.7)!important}
:root[data-theme="dark"] .lb .lbchips>div{background:rgba(255,255,255,.04)!important;border-color:rgba(255,255,255,.2)!important}
:root[data-theme="light"] .lb .lbstage{background:rgba(255,255,255,.12)!important}
:root[data-theme="dark"] .lb .lbstage{background:rgba(255,255,255,.03)!important}
:root[data-theme="light"] .lb .rspanel{background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.7)!important}
:root[data-theme="dark"] .lb .rspanel{background:rgba(255,255,255,.03)!important;border-color:rgba(255,255,255,.18)!important}
:root[data-theme="light"] .lb .card{background:rgba(255,255,255,.14)!important}
:root[data-theme="dark"] .lb .card{background:rgba(255,255,255,.035)!important}
/* podium: tinted glass instead of solid gradients; text follows the theme */
.lb .lbcard{box-shadow:0 6px 20px rgba(0,0,0,.08)!important}
:root[data-theme="light"] .lb .lbcard.c1{background:linear-gradient(135deg,rgba(214,170,70,.38),rgba(214,170,70,.16))!important;border:1px solid rgba(255,255,255,.7)}
:root[data-theme="light"] .lb .lbcard.c2{background:linear-gradient(135deg,rgba(120,140,180,.34),rgba(120,140,180,.14))!important;border:1px solid rgba(255,255,255,.7)}
:root[data-theme="light"] .lb .lbcard.c3{background:linear-gradient(135deg,rgba(210,110,90,.34),rgba(210,110,90,.14))!important;border:1px solid rgba(255,255,255,.7)}
:root[data-theme="dark"] .lb .lbcard.c1{background:linear-gradient(135deg,rgba(214,170,70,.26),rgba(214,170,70,.07))!important;border:1px solid rgba(255,255,255,.2)}
:root[data-theme="dark"] .lb .lbcard.c2{background:linear-gradient(135deg,rgba(130,150,200,.24),rgba(130,150,200,.06))!important;border:1px solid rgba(255,255,255,.2)}
:root[data-theme="dark"] .lb .lbcard.c3{background:linear-gradient(135deg,rgba(220,120,100,.24),rgba(220,120,100,.06))!important;border:1px solid rgba(255,255,255,.2)}
:root[data-theme="light"] .lb .lbcard h3,:root[data-theme="light"] .lb .lbcard p,:root[data-theme="light"] .lb .lbcard b,:root[data-theme="light"] .lb .lbcard small,:root[data-theme="light"] .lb .lbcard span:not(.lbtag),:root[data-theme="light"] .lb .lbcard .lbwin{color:#2a2540!important}
:root[data-theme="dark"] .lb .lbcard h3,:root[data-theme="dark"] .lb .lbcard p,:root[data-theme="dark"] .lb .lbcard b,:root[data-theme="dark"] .lb .lbcard small,:root[data-theme="dark"] .lb .lbcard span:not(.lbtag),:root[data-theme="dark"] .lb .lbcard .lbwin{color:#f1eefb!important}
:root[data-theme="light"] .lb .lbcard .lbtag{color:#2a2540!important;background:rgba(255,255,255,.35)}
:root[data-theme="dark"] .lb .lbcard .lbtag{color:#f1eefb!important;background:rgba(255,255,255,.12)}
:root[data-theme="light"] .lb .lbcard .lbstar{color:#9a7a2a!important}
:root[data-theme="dark"] .lb .lbcard .lbstar{color:#f0d37a!important}
.lb .lbfoot,.lb .lbline.sm{border-color:rgba(128,128,128,.35)!important}
.lb .lbtabs,.lb .lbpills button:not(.on),.lb .lbarr{background:rgba(255,255,255,.08)!important}
:root[data-theme="light"] .lb .lbt tr.me td{background:rgba(110,95,200,.10)!important}
/* sidebar items of Leaderboard & Rewards: glass too */
:root[data-theme="light"] .side .sub.active,:root[data-theme="light"] .side .nav.active{background:rgba(120,100,200,.10)!important}
:root[data-theme="dark"] .side .sub.active,:root[data-theme="dark"] .side .nav.active{background:rgba(255,255,255,.06)!important}

/* Popups: transparent, but the text right behind them is properly blurred (readable popup text) */
:root[data-theme] .nsel-panel,:root[data-theme] .rp-pop,:root[data-theme] #modalBox,:root[data-theme] #confirmBox{-webkit-backdrop-filter:blur(18px) saturate(1.25)!important;backdrop-filter:blur(18px) saturate(1.25)!important}
:root[data-theme="light"] .nsel-panel,:root[data-theme="light"] .rp-pop{background:rgba(255,255,255,.16)!important}
:root[data-theme="dark"] .nsel-panel,:root[data-theme="dark"] .rp-pop{background:rgba(255,255,255,.06)!important}
:root[data-theme="light"] #modalBox,:root[data-theme="light"] #confirmBox{background:rgba(255,255,255,.14)!important}
:root[data-theme="dark"] #modalBox,:root[data-theme="dark"] #confirmBox{background:rgba(255,255,255,.05)!important}

/* nothing behind the popup: fully transparent, no blur */
:root[data-theme] .nsel-panel.glass-empty,:root[data-theme] .rp-pop.glass-empty{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}
/* flat menu (moderator / team leader) */
#anav .sub.flat{display:flex;align-items:center;gap:12px;padding:10px 14px;margin:2px 0}
#anav .sub.flat{padding-left:16px!important}
#anav .sub.flat.active{padding-left:14px!important}

/* An open date-range popup must sit above the cards that follow it (every page, every role) */
:root[data-theme] *:has(> .rp-pop),:root[data-theme] *:has(> * > .rp-pop),:root[data-theme] *:has(> * > * > .rp-pop){overflow:visible!important}
:root[data-theme] .card:has(.rp-pop),:root[data-theme] .fbbar:has(.rp-pop),:root[data-theme] .filters:has(.rp-pop),:root[data-theme] .tbar:has(.rp-pop),:root[data-theme] div:has(> .rp > .rp-pop),:root[data-theme] div:has(> .rp-pop){position:relative!important;z-index:80!important}
:root[data-theme] .rp-pop{z-index:90!important}
/* a glass popup can only blur what is outside its glass ancestors: while it is open, the card holding it stops being a blur layer */
:root[data-theme] :has(.rp-pop),:root[data-theme] :has(.nsel-panel){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* Popup dialogs: crisp, readable text (no glow), a little more body behind the words */
#modalBox,#modalBox *,#confirmBox,#confirmBox *{text-shadow:none!important}
:root[data-theme="light"] #modalBox,:root[data-theme="light"] #confirmBox{background:rgba(255,255,255,.34)!important}
:root[data-theme="dark"] #modalBox,:root[data-theme="dark"] #confirmBox{background:rgba(24,22,36,.38)!important}
:root[data-theme="light"] #modalBox,:root[data-theme="light"] #modalBox label,:root[data-theme="light"] #modalBox p,:root[data-theme="light"] #modalBox strong,:root[data-theme="light"] #modalBox h2,:root[data-theme="light"] #modalBox span{color:#14101f!important}
:root[data-theme="light"] #modalBox .muted,:root[data-theme="light"] #modalBox .muted *{color:#3f3a52!important}
:root[data-theme="dark"] #modalBox,:root[data-theme="dark"] #modalBox label,:root[data-theme="dark"] #modalBox p,:root[data-theme="dark"] #modalBox strong,:root[data-theme="dark"] #modalBox h2,:root[data-theme="dark"] #modalBox span{color:#f3f1fb!important}
:root[data-theme="dark"] #modalBox .muted,:root[data-theme="dark"] #modalBox .muted *{color:#c9c4dc!important}

/* Activity Logs */
.alfilters{flex-wrap:wrap;gap:10px;margin:10px 0}.alfilters #alq{flex:1;min-width:220px}
.alf{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.altable td,.altable th{text-align:left}.altable .aldet{min-width:280px}
.alact{font-weight:800;font-size:12px;letter-spacing:.04em;white-space:nowrap}
.alact.bad{color:#b4443b}.alact.good{color:#2f7d4f}
:root[data-theme="dark"] .alact.bad{color:#ff9a90}:root[data-theme="dark"] .alact.good{color:#7fdca1}
.altable td{font-weight:500;vertical-align:top}
.altable td:nth-child(2),.altable td:last-child,.altable td:nth-child(3){white-space:nowrap}
.altable .aldet{min-width:320px;white-space:normal}

/* Auto clear (✕) button in text boxes */
.xw { position: relative; max-width: 100%; }
.xhost > input { padding-right: 30px; }
.xhost.xlist > input { padding-right: 52px; }
.xhost > .xauto { display: none; right: 8px; }
.xhost.xhas > .xauto { display: inline-flex; align-items: center; justify-content: center; }
.xhost.xlist > .xauto { right: 30px; }
.clearable.xhost > .xauto { right: 8px; } .clearable.hr.xhost > .xauto { right: 30px; }

/* Salary Received */
.salstats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.salstats .stat { position: relative; padding: 20px 22px; border-radius: 26px; border: 1.5px solid; background: transparent; }
.salstats .l { font-size: 12px; letter-spacing: .28em; font-weight: 700; }
.salstats .n { font-size: 34px; font-weight: 800; margin-top: 10px; }
.salstats .pill { position: absolute; right: 18px; bottom: 18px; padding: 2px 12px; border: 1.5px solid; border-radius: 999px; font-size: 14px; }
.sal-life { color: #2f8f63; border-color: color-mix(in srgb, #2f8f63 55%, transparent) !important; } .sal-acc { color: #2f78b5; border-color: color-mix(in srgb, #2f78b5 55%, transparent) !important; }
.paidvia { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: color-mix(in srgb, #3aa0e8 28%, transparent); }
.paidvia.bank { background: color-mix(in srgb, #8a6be0 26%, transparent); }
@media (max-width: 700px) { .salstats { grid-template-columns: 1fr; } .salstats .n { font-size: 28px; } }
.salstats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sal-bonus { color: #b9791c; border-color: color-mix(in srgb, #d9962b 55%, transparent) !important; }
.salbonus { color: #b9791c; }
[data-theme="dark"] .salbonus { color: #f0b455; }
@media (max-width: 900px) { .salstats { grid-template-columns: 1fr; } }
.salstats .pill { position: static; display: inline-block; margin-top: 10px; font-size: 13px; }
#salBody table th, #salBody table td { padding-left: 8px; padding-right: 8px; font-size: 13px; }
#salBody table th { letter-spacing: 0; }

/* ---------- Login / Register page ---------- */
.login { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); place-items: stretch; min-height: 100vh; padding: 0; }
.login.hidden { display: none; }
.auth-brand { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 56px clamp(28px, 6vw, 88px); }
.auth-logo { height: 54px; width: auto; max-width: 260px; align-self: flex-start; }
.auth-brand h1 { margin: 0; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.12; letter-spacing: -.02em; max-width: 14em; }
.auth-points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; max-width: 30em; }
.auth-points li { display: grid; gap: 2px; padding: 12px 16px; border-radius: 16px; background: var(--glass); border: 1.2px solid var(--glass-line); }
.auth-points b { font-size: 15px; } .auth-points span { font-size: 13.5px; opacity: .75; }
.auth-panel { display: grid; place-items: center; padding: 28px 20px; }
.auth-card { width: min(420px, 100%); padding: 26px 26px 22px; gap: 14px; }
@media (min-width: 861px) { .auth-mlogo { display: none !important; } }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.auth-tabs button { border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; padding: 9px 0; border-radius: 10px; cursor: pointer; opacity: .7; }
.auth-tabs button.on { background: var(--glass); opacity: 1; box-shadow: 0 1px 6px rgba(0, 0, 0, .12); }
.auth-form { display: grid; gap: 12px; } .auth-form form { display: grid; gap: 12px; }
.auth-form h2 { margin: 6px 0 0; font-size: 21px; } .auth-form p { margin: 0; }
.auth-form label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; }
.auth-form input, .auth-form select { width: 100%; }
.auth-form .hidden { display: none; }
.btn.wide { width: 100%; padding: 11px 14px; }
.auth-sw { text-align: center; font-size: 13.5px; }
.pw { position: relative; display: block; } .pw input { padding-right: 62px; }
.pwtog { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: inherit; font: inherit; font-size: 12.5px; font-weight: 700; opacity: .7; cursor: pointer; padding: 4px 6px; }
.pwtog:hover { opacity: 1; }
.auth-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; padding: 0; counter-reset: s; }
.auth-steps li { counter-increment: s; text-align: center; font-size: 12.5px; font-weight: 600; opacity: .55; padding-top: 6px; border-top: 3px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.auth-steps li::before { content: counter(s) '. '; }
.auth-steps li.on, .auth-steps li.done { opacity: 1; border-top-color: #d77fa9; }
.auththeme { position: absolute; top: 16px; right: 16px; z-index: 2; }
.ok { color: #1f8a5b; }
@media (max-width: 860px) {
  .login { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-panel { padding: 56px 14px 24px; min-height: 100vh; align-items: start; }
}
.auththeme { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--glass); border: 1.2px solid var(--glass-line) !important; }

/* "Registration received" page for an HR who is waiting for approval */
.pendpage { min-height: 100vh; display: grid; place-items: start center; padding: 28px 16px 48px; position: relative; }
.pendpage.hidden { display: none; }
.pendout { position: absolute; top: 16px; right: 16px; }
.pendwrap { width: min(720px, 100%); display: grid; gap: 6px; }
.pendcard { padding: 24px 26px; display: grid; gap: 12px; }
.pendhead { display: flex; gap: 14px; align-items: center; }
.pendhead h1 { margin: 0; font-size: 24px; } .pendhead p { margin: 2px 0 0; }
.pendtick { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; font-weight: 800; color: #fff; background: var(--good); }
.pendcard h3 { margin: 8px 0 0; font-size: 15px; }
.pendsteps { margin: 0; padding-left: 22px; display: grid; gap: 8px; line-height: 1.5; }
.pendterms { margin: 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.5; font-size: 14px; }
.pendnote { border-left: 4px solid var(--warn); padding: 8px 14px; border-radius: 8px; background: color-mix(in srgb, var(--warn) 10%, transparent); }
.pendnote h3 { margin: 0 0 2px; } .pendnote p { margin: 0; line-height: 1.5; }
.pendcard .row { margin-top: 6px; align-items: center; }

/* Login / register / waiting page: fully clear glass. Nothing sits behind these cards that needs blurring, so no fill and no blur, only a thin edge. */
:root:root .login .auth-card, :root:root .login .auth-points li, :root:root .pendcard { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; }
:root:root .login .auth-points li, :root:root .pendcard { border: 1.2px solid var(--glass-line) !important; }
:root:root .login .auth-tabs { background: transparent; border: 1px solid var(--glass-line); }
:root:root .login .auth-tabs button.on { background: color-mix(in srgb, var(--ink) 9%, transparent); box-shadow: none; }
:root:root .login .auth-form input, :root:root .login .auth-form select { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
:root:root .login .auththeme, :root:root .pendout { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

.auth-forgot { text-align: right; margin-top: -4px; font-size: 13px; } .auth-forgot a { font-weight: 600; }
.auth-join { display: grid; gap: 2px; justify-items: center; text-align: center; margin-top: 4px; font-size: 13.5px; }
.auth-join span { opacity: .75; } .auth-join a { font-weight: 700; }
.linkbtn { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* Sign-in pages, round 2: no tabs, red glass buttons, clear glass card, new left side */
:root:root .login .auth-card, :root:root .pendcard {
  background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .03) 55%, rgba(255, 255, 255, .10)) !important;
  border: 1.2px solid rgba(255, 255, 255, .8) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 18px 50px rgba(120, 70, 150, .10) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
:root:root .login .auth-points li { background: rgba(255, 255, 255, .06) !important; border: 1.2px solid rgba(255, 255, 255, .75) !important; display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px; }
.auth-points li svg { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 12px; color: #e11d48; background: rgba(225, 29, 72, .10); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.auth-points li div { display: grid; gap: 3px; } .auth-points li b { font-size: 16px; } .auth-points li span { font-size: 14px; line-height: 1.5; }
.auth-lead { margin: 4px 0 8px; max-width: 580px; font-size: 16px; line-height: 1.65; opacity: .85; }
:root:root .login .auth-form input, :root:root .login .auth-form select { background: transparent !important; border: 1.2px solid rgba(60, 40, 80, .30); }
.login input:-webkit-autofill, .login input:-webkit-autofill:hover, .login input:-webkit-autofill:focus { -webkit-text-fill-color: var(--ink) !important; caret-color: var(--ink); transition: background-color 600000s 0s, color 600000s 0s; }
:root:root .login .btn.primary { background: rgba(225, 29, 72, .13) !important; color: #be123c !important; border: 1.5px solid rgba(225, 29, 72, .70) !important; font-weight: 800; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 8px 24px rgba(225, 29, 72, .14) !important; }
:root:root .login .btn.primary:hover:not(:disabled) { background: rgba(225, 29, 72, .24) !important; }
:root:root .login .btn.primary:disabled { opacity: .55; }
:root:root .auth-join a { color: #e11d48; font-weight: 800; }
.auth-join { margin-top: -2px; }
.auth-form .error:empty, .auth-form .ok:empty { display: none; }

/* phone browsers: the fixed live background must cover the tallest viewport (toolbar hidden), or a pale band shows at the bottom */
#nf-bg { inset: auto; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; }
.login, .auth-panel { min-height: 100vh; min-height: 100svh; }

/* round 3: balanced sizes on desktop (smaller left text, a bit larger sign-in card), no zoom-in on phones */
@media (min-width: 861px) {
  .auth-brand { gap: 16px; padding: 40px clamp(28px, 5vw, 72px); }
  .auth-logo { height: 46px; }
  .auth-brand h1 { font-size: clamp(26px, 2.5vw, 36px); }
  .auth-lead { font-size: 14px; line-height: 1.6; max-width: 480px; margin: 0 0 4px; }
  .auth-points { gap: 10px; max-width: 26em; }
  :root:root .login .auth-points li { padding: 10px 14px; gap: 12px; }
  .auth-points li svg { width: 34px; height: 34px; padding: 8px; }
  .auth-points li div { gap: 1px; } .auth-points li b { font-size: 14px; } .auth-points li span { font-size: 12.5px; line-height: 1.45; }
  .auth-card { width: min(460px, 100%); padding: 32px 32px 28px; }
  .auth-card h2 { font-size: 26px; }
  .auth-form input, .auth-form select { font-size: 15px; padding-top: 12px; padding-bottom: 12px; }
}
@media (max-width: 860px) { input, select, textarea { font-size: 16px !important; } }

/* ===== round 4: real frosted glass on the sign-in, register, forgot and waiting pages ===== */
.login, .pendpage { position: relative; isolation: isolate; overflow: hidden; }
.login::before, .login::after, .pendpage::before, .pendpage::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(26px); }
.login::before, .pendpage::before { width: min(62vw, 720px); height: min(62vw, 720px); left: -14vw; top: -16vh; background: radial-gradient(circle at 35% 35%, #ff5d8f 0%, rgba(255, 93, 143, .55) 38%, rgba(255, 93, 143, 0) 70%); }
.login::after, .pendpage::after { width: min(70vw, 820px); height: min(70vw, 820px); right: -18vw; bottom: -22vh; background: radial-gradient(circle at 60% 40%, #7c5cff 0%, rgba(124, 92, 255, .50) 40%, rgba(124, 92, 255, 0) 70%); }
.auth-panel, .auth-brand, .pendcard { position: relative; z-index: 1; }
.auth-panel::before { content: ""; position: absolute; z-index: -1; width: min(34vw, 340px); height: min(34vw, 340px); left: 8%; bottom: 6%; border-radius: 50%; filter: blur(24px); background: radial-gradient(circle at 40% 40%, #ffb347 0%, rgba(255, 179, 71, .45) 40%, rgba(255, 179, 71, 0) 70%); pointer-events: none; }
:root:root .login .auth-card, :root:root .pendcard {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 255, 255, .46), rgba(255, 255, 255, .16) 45%, rgba(255, 255, 255, .30)) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%) !important; backdrop-filter: blur(22px) saturate(170%) !important;
  border: 1px solid rgba(255, 255, 255, .85) !important;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .35), inset 0 0 40px rgba(255, 255, 255, .18), 0 24px 60px rgba(90, 40, 140, .22) !important;
}
:root:root .login .auth-card::before, :root:root .pendcard::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 32%); opacity: .55; }
:root:root .login .auth-card > *, :root:root .pendcard > * { position: relative; z-index: 1; }
:root:root .login .auth-points li {
  background: linear-gradient(135deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .12)) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important; backdrop-filter: blur(16px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, .8) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 10px 28px rgba(90, 40, 140, .14) !important;
}
:root:root .login .auth-form input, :root:root .login .auth-form select {
  background: rgba(255, 255, 255, .30) !important; border: 1px solid rgba(255, 255, 255, .85) !important;
  box-shadow: inset 0 1px 3px rgba(90, 40, 140, .12), 0 1px 0 rgba(255, 255, 255, .6) !important;
  -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important;
}
:root:root .login .auth-form input:focus { background: rgba(255, 255, 255, .45) !important; border-color: #fff !important; box-shadow: inset 0 1px 3px rgba(90, 40, 140, .12), 0 0 0 3px rgba(225, 29, 72, .22) !important; }
:root:root .login .btn.primary, :root:root .pendcard .btn.primary {
  background: linear-gradient(180deg, rgba(255, 90, 120, .62), rgba(225, 29, 72, .50)) !important; color: #fff !important; text-shadow: 0 1px 6px rgba(120, 0, 30, .35);
  border: 1px solid rgba(255, 255, 255, .85) !important;
  -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .75), inset 0 -8px 16px rgba(160, 10, 50, .18), 0 10px 26px rgba(225, 29, 72, .32) !important;
}
:root:root .login .btn.primary:hover:not(:disabled) { background: linear-gradient(180deg, rgba(255, 105, 135, .78), rgba(225, 29, 72, .66)) !important; }
:root:root .login .auth-steps li, :root:root .login #regSteps li { background: rgba(255, 255, 255, .35); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root:root .login .auth-card, :root:root .pendcard { background: rgba(255, 255, 255, .72) !important; }
}
@media (prefers-reduced-transparency: reduce) { :root:root .login .auth-card, :root:root .pendcard { background: rgba(255, 255, 255, .85) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } }
@media (max-width: 860px) {
  .login::before, .pendpage::before { width: 110vw; height: 110vw; left: -30vw; top: 4vh; }
  .login::after, .pendpage::after { width: 120vw; height: 120vw; right: -40vw; bottom: auto; top: 38vh; }
  .auth-panel::before { width: 60vw; height: 60vw; left: auto; right: -10vw; bottom: auto; top: 6vh; }
}

/* round 5: softer colour behind the glass, clearer see-through card */
.login::before, .login::after, .pendpage::before, .pendpage::after { opacity: .42; }
.auth-panel::before { opacity: .38; }
:root:root .login .auth-card, :root:root .pendcard { background: linear-gradient(135deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .16)) !important; -webkit-backdrop-filter: blur(14px) saturate(140%) !important; backdrop-filter: blur(14px) saturate(140%) !important; }
:root:root .login .auth-points li { background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .05)) !important; -webkit-backdrop-filter: blur(10px) saturate(140%) !important; backdrop-filter: blur(10px) saturate(140%) !important; }
:root:root .login .auth-form input, :root:root .login .auth-form select { background: rgba(255, 255, 255, .16) !important; }
:root:root .login .auth-form input:focus { background: rgba(255, 255, 255, .30) !important; }
:root:root .login .btn.primary, :root:root .pendcard .btn.primary { background: linear-gradient(180deg, rgba(255, 90, 120, .45), rgba(225, 29, 72, .34)) !important; }
.login h1, .login h2, .login p, .login label, .login .auth-points b, .login .auth-points span { text-shadow: 0 1px 8px rgba(255, 255, 255, .75), 0 0 2px rgba(255, 255, 255, .5); }
:root:root .login .btn.primary { text-shadow: 0 1px 6px rgba(120, 0, 30, .45); }
:root:root .login .btn.primary, :root:root .pendcard .btn.primary { color: #9f1239 !important; text-shadow: 0 1px 6px rgba(255, 255, 255, .8) !important; font-weight: 800; }

/* round 6: the fields are see-through glass too, also when the browser auto-fills them (no white / blue fill) */
:root:root .login .auth-form input, :root:root .login .auth-form select { background: rgba(255, 255, 255, .06) !important; background-color: rgba(255, 255, 255, .06) !important; }
:root:root .login .auth-form input:focus { background: rgba(255, 255, 255, .14) !important; background-color: rgba(255, 255, 255, .14) !important; }
:root:root .login input:-webkit-autofill, :root:root .login input:-webkit-autofill:hover, :root:root .login input:-webkit-autofill:focus, :root:root .login input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--ink) !important; caret-color: var(--ink);
  transition: background-color 600000s 0s, color 600000s 0s !important;
  -webkit-box-shadow: inset 0 1px 3px rgba(90, 40, 140, .12) !important; box-shadow: inset 0 1px 3px rgba(90, 40, 140, .12) !important;
}
:root:root .login input:autofill { background-color: transparent !important; filter: none; }
/* round 7: even less colour behind the glass */
.login::before, .login::after, .pendpage::before, .pendpage::after { opacity: .28; }
.auth-panel::before { opacity: .24; }

/* round 8: table cells stay on one line (a long name never drops to a second line); the table scrolls sideways instead */
.scroll table td, .scroll table th { white-space: nowrap; }
.scroll table td.aldet, .scroll table td.dzreason, .scroll table td.wrap, .scroll table .dzreason, .scroll table .aldet { white-space: normal; }

/* error / success lines on the sign-in pages are clearly coloured */
:root:root .login .error { color: #be123c !important; font-weight: 700; }
:root:root .login .ok { color: #0f7a4a !important; font-weight: 700; }

/* waiting page on phones: Sign out sits in its own row above the logo; the tick sits above the heading */
@media (max-width: 860px) {
  .pendout { position: static; justify-self: end; margin: 0 0 6px; }
  .pendpage { padding-top: 16px; }
}
@media (max-width: 520px) {
  .pendhead { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pendhead h1 { font-size: 22px; }
  .pendcard { padding: 20px 18px; }
}