/* Signed-in app in the landing / sign-in "night shift" theme (2026-11-02). Loaded after style.css on every
   signed-in page; applies only where base.html puts `ns` on <html> (pages listed in its `ns_pages`, converted one
   at a time). Those pages are always dark: base.html forces data-theme="dark", so every component keeps its
   readable dark variant from style.css, and this file retunes the palette and surfaces to match landing.css:
   ground #040a18, glass-edged navy panels, electric blue #2463eb for actions, light blue #8cc3ff for highlights,
   headings lit white to blue-grey. Markup and behaviour are unchanged; only CSS. */

/* --- Palette ------------------------------------------------------------------------------------------------ */
/* :root.ns[data-theme] beats style.css's `:root[data-theme="dark"] :is(.page-dashboard, …)` page tokens. */
:root.ns, :root.ns[data-theme] body {
  color-scheme: dark;
  --g: #040a18; --g2: #071229;
  --line: rgba(140, 170, 235, .13); --line-2: rgba(140, 195, 255, .24);
  --sky: #8cc3ff; --blue-2: #3b78f6;
  --panel: linear-gradient(155deg, rgba(16, 32, 62, .74), rgba(7, 18, 41, .9));
  --panel-edge: inset 0 1px 0 rgba(255, 255, 255, .04);
  --bg: #040a18; --card: #0a1631; --fill: #111e3b; --fill-2: #1a2a4f; --fill-soft: #0c1934; --sheet: #071229;
  --hair: rgba(140, 170, 235, .1); --hair-2: rgba(140, 170, 235, .16);
  --text: #eef3ff; --text-2: rgba(214, 226, 255, .66); --text-3: rgba(196, 212, 255, .42);
  --ink: #8cc3ff; --on-ink: #061433; --ink-hover: #b8dcff;
  --accent: #8cc3ff; --blue: #5b9bff;
  --accent-soft: rgba(36, 99, 235, .14); --accent-soft-2: rgba(36, 99, 235, .24);
  --dot: rgba(140, 170, 235, .08);
  --brand: #0b1f4b; --brand-hi: #8cc3ff;
  --switch-on: #2463eb;
  --field-bg: rgba(4, 10, 24, .7); --field-line: rgba(140, 195, 255, .24);
  --badge-base: #0a1631;
  --cta: #2463eb; --cta-hover: #3b78f6;
  --cta-edge: inset 0 1px 0 rgba(255, 255, 255, .25);
  --cta-glow: 0 8px 28px -12px rgba(36, 99, 235, .8);
  --ai-bg: rgba(36, 99, 235, .16); --ai-bg-hover: rgba(36, 99, 235, .24);
  --ai-line: rgba(140, 195, 255, .3); --ai-line-hover: rgba(140, 195, 255, .45); --ai-chip: #2463eb;
  --float: rgba(7, 18, 41, .78); --float-line: var(--line); --pill-on: rgba(36, 99, 235, .14);
  --glass: rgba(7, 18, 41, .78); --glass-rim: rgba(140, 170, 235, .16);
  --glass-pill: rgba(36, 99, 235, .24);
  --shadow-glass: 0 16px 40px -8px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .06);
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, .04), 0 24px 64px -32px rgba(0, 0, 0, .8);
  --shadow-press: inset 0 1px 0 rgba(255, 255, 255, .04);
  --shadow-float: 0 12px 36px -6px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .05);
  --shadow-lg: 0 -12px 60px rgba(0, 0, 0, .6);
  --toast-ok: #1a3d8f;
  --ease-ns: cubic-bezier(.16, 1, .3, 1);
}
:root.ns ::selection { background: rgba(36, 99, 235, .55); color: #fff; }
:root.ns :focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }

/* --- Ground: one blue light from the top and a fine grid fading out (landing hero) ------------------------- */
:root.ns body::before { height: 620px; background-image:
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(36, 99, 235, .2), transparent 70%),
    linear-gradient(rgba(140, 170, 235, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 170, 235, .05) 1px, transparent 1px);
  background-size: 100% 100%, 56px 56px, 56px 56px;
  -webkit-mask-image: linear-gradient(#000, rgba(0, 0, 0, .5) 45%, transparent);
  mask-image: linear-gradient(#000, rgba(0, 0, 0, .5) 45%, transparent); }
@media (min-width: 1024px) { :root.ns body.app::before { inset-inline-start: var(--sidebar); } }

/* --- Type: headings lit from above, like the landing's ------------------------------------------------------- */
:root.ns .top h1 { font-weight: 600; letter-spacing: -.04em; padding-bottom: .06em;
  background: linear-gradient(180deg, #ffffff 30%, #b9c8ea 100%); -webkit-background-clip: text; background-clip: text;
  color: transparent; }
:root.ns:lang(he) .top h1 { letter-spacing: -.015em; }
:root.ns .section-title.big h2 { font-weight: 600; letter-spacing: -.03em; color: var(--text); }
:root.ns:lang(he) .section-title.big h2 { letter-spacing: -.01em; }
:root.ns .group-foot { color: var(--text-3); }

/* --- Surfaces: glass-edged navy panels ------------------------------------------------------------------------ */
:root.ns :is(.group, .cat, .carousel > .job, .carousel > .empty, .term, .empty) {
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
:root.ns .sheet .group { background: rgba(255, 255, 255, .025); box-shadow: none; }
:root.ns .group > :is(.cell, .field, .toggle, .step) ~ :is(.cell, .field, .toggle, .step)::before { background: var(--line); }
:root.ns .cell-icon { background: rgba(140, 170, 235, .1); color: var(--sky); }
:root.ns a.cell:active, :root.ns button.cell:active, :root.ns .step:active { background: rgba(255, 255, 255, .04); }
@media (hover: hover) {
  :root.ns :is(a.cell, button.cell, a.step):hover { background: rgba(255, 255, 255, .03); }
  :root.ns :is(.cat, .carousel > .job) { transition: border-color .2s ease, translate .3s var(--ease-ns), box-shadow .3s ease; }
  :root.ns :is(.cat, .carousel > .job):hover { border-color: rgba(140, 195, 255, .32); translate: 0 -2px;
    box-shadow: var(--panel-edge), 0 24px 50px -24px rgba(0, 0, 0, .9), 0 0 40px -24px rgba(36, 99, 235, .8); }
}

/* --- Buttons: blue pill for the action, glass ghost for the rest (landing .ya-btn / .ya-btn-ghost) ------------- */
:root.ns :is(.btn.primary, button.primary):not(.act) { border-radius: 999px; background: var(--cta); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 28px -12px rgba(36, 99, 235, .8); }
@media (hover: hover) { :root.ns :is(.btn.primary, button.primary):not(.act, :disabled):hover { background: var(--cta-hover);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 36px -10px rgba(59, 120, 246, .95); } }
:root.ns :is(button, .btn):not(:where(.primary, .accent, .danger, .ghost, .cell, .act, .install-x, .icon-btn, .ai-card, .role-x,
  .install-link, .rs-chip, .rs-card, .company-opt, .job-menu-item, .shot-x, .car-btn, .side-link)) {
  border-radius: 999px; background: rgba(255, 255, 255, .04); color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px var(--line-2); }
@media (hover: hover) {
  :root.ns :is(button, .btn):not(:where(.primary, .accent, .danger, .ghost, .cell, .act, .install-x, .icon-btn, .ai-card, .role-x,
    .install-link, .rs-chip, .rs-card, .company-opt, .job-menu-item, .shot-x, .car-btn, .side-link)):hover {
    background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(140, 195, 255, .45); }
}
:root.ns .see-all { height: 32px; border-radius: 999px; background: rgba(255, 255, 255, .04); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13.5px !important; }
@media (hover: hover) { :root.ns .see-all:hover { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(140, 195, 255, .45); } }
:root.ns .car-btn { background: rgba(255, 255, 255, .04) !important; box-shadow: inset 0 0 0 1px var(--line-2); }
:root.ns .round-btn { background: rgba(255, 255, 255, .04); border-color: var(--line-2); box-shadow: none; color: var(--text); }
:root.ns .switch { background: rgba(140, 170, 235, .18); box-shadow: inset 0 0 0 1px var(--line); }
:root.ns input:checked + .switch { background: var(--cta); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 4px 16px -6px rgba(36, 99, 235, .9); }

/* --- Shell: sidebar (desktop) ---------------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  :root.ns .sidebar { background: rgba(4, 10, 24, .72); border-inline-end-color: var(--line);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  :root.ns .sidebar .brand { font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
  :root.ns .side-nav a, :root.ns .side-nav button.side-link { color: var(--text-2); }
  :root.ns .side-nav a:hover, :root.ns .side-nav button.side-link:hover { background: rgba(255, 255, 255, .04); color: var(--text); }
  :root.ns .side-nav a.on { color: var(--text); }
  :root.ns .side-nav a.on .ic { color: var(--sky); }
  :root.ns .side-pill { background: linear-gradient(90deg, rgba(36, 99, 235, .22), rgba(36, 99, 235, .1));
    box-shadow: inset 0 0 0 1px rgba(140, 195, 255, .2); }
  :root.ns[dir="rtl"] .side-pill { background: linear-gradient(270deg, rgba(36, 99, 235, .22), rgba(36, 99, 235, .1)); }
  :root.ns .side-label { color: var(--text-3); text-transform: none; }
  :root.ns .side-me { background: var(--panel); border: 1px solid var(--line); }
  :root.ns .side-me:hover, :root.ns .side-me.on { background: rgba(255, 255, 255, .05); }
  :root.ns .sidebar .lang-switch { background: rgba(255, 255, 255, .03); border-color: var(--line-2); color: var(--text-2); }
}
:root.ns .avatar { background: rgba(140, 170, 235, .14); color: var(--text); }

/* --- Shell: tab bar, More sheet, compact title bar (phone) ----------------------------------------------------- */
:root.ns .tabbar a { color: var(--text-3); }
:root.ns .tabbar a.on { color: var(--sky); }
:root.ns .tab-pill { box-shadow: inset 0 0 0 1px rgba(140, 195, 255, .2); }
:root.ns .sheet { border-top: 1px solid var(--line-2); background: linear-gradient(180deg, #0a1734, var(--g2) 140px); }
:root.ns .sheet-me { background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
:root.ns .sheet-backdrop { background: rgba(2, 5, 14, .6); }
:root.ns .mini-bar { background: rgba(4, 10, 24, .86); border-bottom-color: var(--line); }

/* Solid accent fills elsewhere in style.css carry white text: in night shift the accent is light blue, so those
   use the action blue instead. */
:root.ns :is(.btn.accent, button.accent) { border-radius: 999px; background: var(--cta); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 28px -12px rgba(36, 99, 235, .8); }
@media (hover: hover) { :root.ns :is(.btn.accent, button.accent):hover { background: var(--cta-hover); filter: none; } }
:root.ns .choice input:checked + .choice-mark { background: var(--cta); border-color: var(--cta); }
:root.ns :is(.ai-card.locked .cell-icon, .setup-switch .auto-toggle .cell-icon) { background: var(--cta); }

/* --- Notices ------------------------------------------------------------------------------------------------- */
:root.ns :is(.plan-banner, .install-card, .note.info) { background: var(--panel); border: 1px solid var(--line-2);
  box-shadow: var(--panel-edge), 0 0 50px -30px rgba(36, 99, 235, .9); }
:root.ns :is(.plan-banner, .install-card) .cell-icon { background: rgba(36, 99, 235, .2); color: var(--sky); }
:root.ns .plan-banner .btn:not(.primary), :root.ns .install-card .btn:not(.primary) { background: rgba(255, 255, 255, .04); }
:root.ns .announce { border: 1px solid var(--line-2); }

/* --- Home ---------------------------------------------------------------------------------------------------- */
/* Status card: the big count lit like a heading, a blue light in its corner, the tick ring in light blue. */
:root.ns .hero { background: radial-gradient(ellipse 80% 90% at 100% 0%, rgba(36, 99, 235, .26), transparent 60%), var(--panel) !important;
  border: 1px solid var(--line-2);
  box-shadow: var(--panel-edge), 0 30px 70px -30px rgba(0, 0, 0, .9), 0 0 80px -40px rgba(36, 99, 235, .9); }
:root.ns[dir="rtl"] .hero { background: radial-gradient(ellipse 80% 90% at 0% 0%, rgba(36, 99, 235, .26), transparent 60%), var(--panel) !important; }
:root.ns .hero::before { background: repeating-conic-gradient(rgba(140, 195, 255, .16) 0 1deg, transparent 1deg 4deg); }
:root.ns .hero-count .hero-num { font-weight: 600; letter-spacing: -.06em; padding-bottom: .04em;
  background: linear-gradient(180deg, #ffffff 35%, #9fb6e6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root.ns .hero .chip { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); }
:root.ns .hero .chip.state-running { background: rgba(36, 99, 235, .2); box-shadow: inset 0 0 0 1px rgba(140, 195, 255, .3); color: var(--sky); }
:root.ns .track { background: rgba(4, 10, 24, .45); box-shadow: inset 0 0 0 1px var(--line); }
:root.ns .dial-track { stroke: rgba(140, 170, 235, .16); }
:root.ns .dial-fill { stroke: var(--sky); }
:root.ns .track .hero-live b { font-weight: 600; }

/* Autopilot switch: a panel, lit blue when on. */
:root.ns .o-auto .group { border-color: var(--line); }
:root.ns .o-auto .group:has(input:checked) { background: radial-gradient(ellipse 70% 120% at 0% 50%, rgba(36, 99, 235, .24), transparent 70%), var(--panel);
  border-color: rgba(140, 195, 255, .35); }
:root.ns .auto-toggle .cell-main { font-weight: 600; }
:root.ns .auto-toggle .cell-icon { background: rgba(140, 170, 235, .1); color: var(--sky); box-shadow: inset 0 0 0 1px var(--line); }
:root.ns .o-auto .group:has(input:checked) .cell-icon { background: var(--cta); color: #fff; box-shadow: 0 6px 20px -8px rgba(36, 99, 235, .9); }
:root.ns .auto-armed { border-color: rgba(140, 195, 255, .45) !important;
  box-shadow: 0 0 0 4px rgba(36, 99, 235, .14), var(--shadow-card) !important; }
:root.ns .auto-armed .auto-toggle .cell-main small { color: var(--sky); }

/* Admin run buttons */
:root.ns .act { background: var(--panel); color: var(--sky); border: 1px solid var(--line); box-shadow: var(--panel-edge); }
@media (hover: hover) { :root.ns .act:not(:disabled):hover { background: rgba(36, 99, 235, .14); border-color: rgba(140, 195, 255, .35); } }
:root.ns .act.primary { background: var(--cta); color: #fff; border-color: var(--cta); box-shadow: var(--cta-edge), var(--cta-glow); }
:root.ns .act:is(:disabled, .locked) { background: rgba(255, 255, 255, .02); color: var(--text-3); }
:root.ns .act-hint { color: var(--text-3); }

/* Overview cards */
:root.ns .cat b { font-weight: 600; color: var(--text); }
:root.ns .cat-ic { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }

/* Job cards (carousel) and list thumbnails: one quiet glass tile for every company, the colour kept only as a soft
   tint in the initial. (The owner's flat red / green / purple banners fought the night palette; a coloured glow
   per company was too loud, 2026-11-02.) */
:root.ns .t0 { --tc: #9aa6ff; } :root.ns .t1 { --tc: #7db8ff; } :root.ns .t2 { --tc: #5fdcaa; }
:root.ns .t3 { --tc: #ffab78; } :root.ns .t4 { --tc: #ff8a95; } :root.ns .t5 { --tc: #d0a8ff; }
:root.ns :is(.thumb, .logo):is(.t0, .t1, .t2, .t3, .t4, .t5) { color: color-mix(in srgb, var(--tc) 55%, #dfe7f7);
  background: linear-gradient(160deg, rgba(150, 180, 240, .1), rgba(150, 180, 240, .03) 60%), #0b1631;
  box-shadow: inset 0 0 0 1px rgba(140, 170, 235, .14), inset 0 1px 0 rgba(255, 255, 255, .06); }
:root.ns .thumb-letter { font-weight: 600; text-shadow: none; }
:root.ns .thumb-logo { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
:root.ns .thumb .badge { box-shadow: 0 0 0 2px var(--bg); }
:root.ns .carousel .thumb { box-shadow: inset 0 -1px 0 var(--line);
  background: radial-gradient(ellipse 80% 120% at 50% 0%, rgba(140, 170, 235, .1), transparent 70%), #0a1430; }
:root.ns .carousel .thumb::before { background:
  linear-gradient(rgba(140, 170, 235, .05) 1px, transparent 1px),
  linear-gradient(90deg, rgba(140, 170, 235, .05) 1px, transparent 1px);
  background-size: 18px 18px; -webkit-mask-image: linear-gradient(#000, transparent 95%); mask-image: linear-gradient(#000, transparent 95%); }
:root.ns .carousel .thumb .badge { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
:root.ns .carousel .job-title { font-weight: 600; }
:root.ns .carousel > .locked-row { background: rgba(36, 99, 235, .12); border: 1px solid var(--line-2); color: var(--sky); }

/* Setup checklist */
:root.ns .setup-head h2 { font-weight: 600; }
:root.ns .ring-bg { stroke: rgba(140, 170, 235, .16); }
:root.ns .ring-fg { stroke: var(--sky); }
:root.ns .step .tick { border-color: rgba(140, 170, 235, .3); }
:root.ns .step.done .tick { background: var(--cta); border-color: var(--cta); color: #fff; }

/* Recent activity rows */
:root.ns .feed-title { font-weight: 600; }

/* Live output (admins) */
:root.ns .term { background: rgba(2, 6, 16, .85); }
:root.ns .term-head { border-bottom-color: var(--line); }

/* Empty states */
:root.ns .empty-ic { background: rgba(140, 170, 235, .1); color: var(--sky); }

/* --- Lists (Applications, and every page with .job rows or filter pills) ------------------------------------- */
:root.ns .seg a { background: rgba(255, 255, 255, .03); border-color: var(--line-2); color: var(--text-2); }
@media (hover: hover) { :root.ns .seg a:not(.on):hover { background: rgba(255, 255, 255, .07); color: var(--text); border-color: rgba(140, 195, 255, .4); } }
:root.ns .seg a.on { background: rgba(36, 99, 235, .22); border-color: rgba(140, 195, 255, .5); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 22px -10px rgba(36, 99, 235, .9); }
:root.ns .seg a em { color: var(--text-3); }
:root.ns .seg a.on em { color: var(--sky); opacity: 1; }
:root.ns .day { font-weight: 600; letter-spacing: -.02em; color: var(--text); }
:root.ns .day span { color: var(--text-3); }
:root.ns .job + .job::before, :root.ns .job-wrap + .job::before, :root.ns :is(.job, .job-wrap) + .job-wrap > .job::before { background: var(--line); }
/* Applications list: every application is its own glass card (the separators go). */
:root.ns .page-applications .job-list:not(.app-one) { gap: 8px; }
:root.ns .page-applications .job-list:not(.app-one) > .job, :root.ns .page-applications .job-list > .job-wrap > .job {
  padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: var(--panel-edge); }
:root.ns .page-applications .job-list :is(.job, .job-wrap > .job)::before { content: none; }
:root.ns .page-applications .job-list > .job-wrap > .job .job-main { padding-inline-end: 36px; }
:root.ns .page-applications .job-menu { top: 12px; inset-inline-end: 8px; }
:root.ns .page-applications .day { margin: 26px 4px 4px; }
:root.ns .page-applications .day:first-child { margin-top: 4px; }
:root.ns .page-applications .thumb { margin-bottom: 6px; }
@media (hover: hover) {
  :root.ns .page-applications .job-list:not(.app-one) a.job { transition: border-color .2s ease, translate .3s var(--ease-ns), box-shadow .3s ease; }
  :root.ns .page-applications .job-list:not(.app-one) a.job:hover { border-color: rgba(140, 195, 255, .32); translate: 0 -1px;
    box-shadow: var(--panel-edge), 0 20px 40px -24px rgba(0, 0, 0, .9), 0 0 40px -26px rgba(36, 99, 235, .9); }
  :root.ns a.job:hover .job-title { text-decoration-color: var(--sky); }
}
:root.ns .job-org { color: var(--text-2); }
:root.ns .job-detail { color: var(--text-3); }
:root.ns .job-menu > summary { color: var(--text-3); }
:root.ns .job-menu[open] > summary, :root.ns .job-menu > summary:hover { background: rgba(255, 255, 255, .06); color: var(--text); }
:root.ns .job-menu-pop { background: linear-gradient(155deg, #10203e, #081329); border: 1px solid var(--line-2); border-radius: 14px;
  box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .9); }
:root.ns .job-menu-item { background: none; color: var(--text); }
@media (hover: hover) { :root.ns .job-menu-item:hover { background: rgba(255, 107, 107, .1); } }
:root.ns .show-more { margin-top: 18px; }
:root.ns .page-applications .group-foot { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }

/* --- One application (application.html) -------------------------------------------------------------------- */
:root.ns .back { color: var(--sky); }
@media (hover: hover) { :root.ns .back:hover { color: #fff; } }
:root.ns .app-one .job { padding: 18px 18px 20px; border: 1px solid var(--line-2); border-radius: 20px;
  background: radial-gradient(ellipse 60% 140% at 0% 0%, rgba(36, 99, 235, .22), transparent 70%), var(--panel);
  box-shadow: var(--panel-edge), 0 30px 70px -34px rgba(0, 0, 0, .9); }
:root.ns[dir="rtl"] .app-one .job { background: radial-gradient(ellipse 60% 140% at 100% 0%, rgba(36, 99, 235, .22), transparent 70%), var(--panel); }
:root.ns .app-place { margin: 12px 6px 4px; color: var(--text-2); }
:root.ns .app-one .job-title { font-size: 22px; font-weight: 600; letter-spacing: -.03em;
  background: linear-gradient(180deg, #ffffff 30%, #b9c8ea 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root.ns .app-go { min-height: 52px; margin: 8px 0 10px; }
:root.ns .app-next { background: radial-gradient(ellipse 70% 120% at 0% 0%, rgba(79, 214, 155, .1), transparent 70%), var(--panel); }
:root.ns[dir="rtl"] .app-next { background: radial-gradient(ellipse 70% 120% at 100% 0%, rgba(79, 214, 155, .1), transparent 70%), var(--panel); }
:root.ns .app-next .app-next-when { color: var(--green); }
:root.ns .app-about .day { margin-top: 28px; margin-bottom: 10px; }
:root.ns .app-ad p { color: var(--text-2); line-height: 1.7; }
:root.ns .page-applications .job-list .meta { flex-wrap: wrap; row-gap: 2px; }
:root.ns .page-applications .job-list .meta bdi { flex: none; }
@media (max-width: 520px) {
  :root.ns .page-applications .job-list:not(.app-one) > .job, :root.ns .page-applications .job-list > .job-wrap > .job {
    gap: 12px; padding: 12px 12px 14px; }
  :root.ns .page-applications .job-list:not(.app-one) .thumb { width: 54px; height: 54px; font-size: 21px; border-radius: 13px; }
  :root.ns .page-applications .job-list > .job-wrap > .job .job-main { padding-inline-end: 28px; }
  :root.ns .page-applications .job-menu { top: 8px; inset-inline-end: 2px; }
}
:root.ns .group .empty { background: none; border: 0; box-shadow: none; }

/* --- Inbox (inbox.html) ------------------------------------------------------------------------------------- */
:root.ns details.reply + details.reply { border-top-color: var(--line); }
@media (hover: hover) { :root.ns details.reply > summary:hover { background: rgba(255, 255, 255, .03); } }
/* Unread: a blue light from the reading side and a glowing dot. */
:root.ns details.reply.new > summary { background: linear-gradient(90deg, rgba(36, 99, 235, .13), transparent 65%); }
:root.ns[dir="rtl"] details.reply.new > summary { background: linear-gradient(270deg, rgba(36, 99, 235, .13), transparent 65%); }
:root.ns .new-dot { background: var(--sky); box-shadow: 0 0 0 3px rgba(140, 195, 255, .14), 0 0 12px rgba(140, 195, 255, .7); }
:root.ns details.reply.new :is(.reply-who, .feed-sub) { color: #fff; }
:root.ns .reply-who { color: var(--text); }
:root.ns .reply-job { color: var(--text-3); }
:root.ns .feed-meta small { color: var(--text-3); }
/* Open: the message reads on a darker inset under its header. */
:root.ns details.reply[open] { background: rgba(2, 6, 16, .35); }
:root.ns details.reply[open] > summary { background: rgba(36, 99, 235, .08); box-shadow: inset 0 -1px 0 var(--line); }
:root.ns details.reply[open] > summary + * { margin-top: 14px; }
:root.ns .reply-body { color: var(--text-2); line-height: 1.65; }
:root.ns .reply-body a { color: var(--sky); }
:root.ns .reply-frame iframe { border-color: var(--line-2); border-radius: 14px; }
:root.ns .reply-from { color: var(--text-3); }
:root.ns .reply-answer { background: rgba(255, 255, 255, .03); border: 1px solid var(--line); border-radius: 12px; }
:root.ns .compose-in { border-top-color: var(--line); }
:root.ns .compose input[type=file]::file-selector-button { border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-2); }
:root.ns .mark-all { margin-bottom: -4px; }
:root.ns .page-inbox .day { margin: 26px 4px 10px; }
:root.ns .page-inbox .day:first-of-type { margin-top: 8px; }

/* --- Setup steps, plans, public pages ------------------------------------------------------------------------ */
:root.ns .step-badge { background: var(--cta); color: #fff; box-shadow: 0 4px 14px -4px rgba(36, 99, 235, .9); }
:root.ns .setup-bar .on .setup-seg { background: var(--sky); }
/* Plans: the Pro column and every buy button in the action blue (the light-blue ink fill read as a disabled block). */
:root.ns .pc-head > span.pc-pro { background: var(--cta); color: #fff; }
:root.ns .pc-row > span.pc-pro { background: rgba(36, 99, 235, .1); color: var(--sky); }
:root.ns :is(button, a).pro-cta, :root.ns #get-pro .pro-cta { background: var(--cta); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 32px -10px rgba(36, 99, 235, .95); }
@media (hover: hover) { :root.ns :is(button, a).pro-cta:hover { background: var(--cta-hover); } }
:root.ns .popular-tag { background: var(--cta); color: #fff; }
:root.ns .plan-opt { background: var(--panel); border-color: var(--line); }
:root.ns .plan-opt:has(input:checked) { border-color: var(--sky); background: radial-gradient(ellipse 80% 120% at 50% 0%, rgba(36, 99, 235, .2), transparent 70%), var(--panel);
  box-shadow: 0 0 0 4px rgba(140, 195, 255, .12), var(--shadow-card); }
:root.ns .plan-opt:has(input:checked) .plan-radio { border-color: var(--sky); }
/* Public pages (legal, guides, errors, pending) */
:root.ns .legal { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
:root.ns .legal :is(h1, h2) { color: #fff; }
:root.ns .legal h1 { background: linear-gradient(180deg, #ffffff 30%, #b9c8ea 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root.ns .pending-icon { background: rgba(245, 177, 66, .1); box-shadow: inset 0 0 0 1px rgba(245, 177, 66, .3), 0 0 50px -10px rgba(245, 177, 66, .35); }
:root.ns .auth-hero h1 { background: linear-gradient(180deg, #ffffff 30%, #b9c8ea 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root.ns .public-bar .lang-switch { background: rgba(255, 255, 255, .04); border-color: var(--line-2); }

/* Social studio (social.html, its own full-screen layout): glass day columns and side boxes, today lit softly in blue,
   the open post's card outlined in sky; the frosted top bar and the panel sit on the night ground. */
:root.ns .st-bar { background: rgba(4, 10, 24, .72); border-bottom-color: var(--line); }
:root.ns .st-title h1 { font-weight: 600; background: linear-gradient(180deg, #ffffff 30%, #b9c8ea 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
:root.ns .st-switch .toggle { background: var(--panel); border-color: var(--line); box-shadow: var(--panel-edge); }
:root.ns .st-day { background: var(--panel); border-color: var(--line); box-shadow: var(--panel-edge); }
:root.ns .st-day.today { border-color: rgba(140, 195, 255, .38);
  box-shadow: var(--panel-edge), 0 0 0 1px rgba(140, 195, 255, .1), 0 0 44px -22px rgba(36, 99, 235, .95); }
:root.ns .st-day.today h2 span { color: var(--sky); }
:root.ns .st-card { background: rgba(4, 10, 24, .55); border-color: var(--line); }
@media (hover: hover) { :root.ns .st-card:hover { border-color: var(--line-2); background: rgba(16, 32, 62, .6); } }
:root.ns .st-card.on { border-color: rgba(140, 195, 255, .55); background: rgba(36, 99, 235, .14); }
:root.ns .st-slot { border-color: rgba(140, 170, 235, .2); color: var(--text-2); }
@media (hover: hover) { :root.ns .st-slot:hover { border-color: rgba(140, 195, 255, .5); color: var(--sky); background: rgba(36, 99, 235, .08); } }
:root.ns .st-panel { background: rgba(4, 10, 24, .6); border-inline-start-color: var(--line); }
:root.ns :is(.st-box, .st-edit, .st-new) { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--panel-edge); }
:root.ns .st-box .st-card { background: rgba(4, 10, 24, .55); }
:root.ns .st-caption-read { background: rgba(4, 10, 24, .55); border: 1px solid var(--line); }
:root.ns .st-row { border-top-color: var(--line); }
:root.ns .st-box details summary { color: var(--sky); }
:root.ns .st-media { background: #0b1631; }
@media (max-width: 760px) {
  :root.ns .st-panel { background: none; }
  :root.ns .studio.has-panel .st-panel { background: radial-gradient(ellipse 120% 50% at 50% 0%, rgba(36, 99, 235, .16), transparent 70%), var(--g); }
}