/* ============================================================================
   PM Box — the reference portal's design (the RA skin), as one skin.
   Ported from the reference portal's templates/index.html ("Base", "Sidebar (white, red accent)", "Sidebar polish",
   "Topbar (frosted light, red hover)", "Global search", "Module page head (.ph)", "Tabs / segmented toggles",
   "Accent remap") and the sign-in page (lines 1755-2300), and from static/home.css (the hero).
   Loaded LAST on every surface: the shell (shell.html), the renderer (module.html) and every custom page
   (templates/pages/*.html). It only overrides; the geometry and the behaviour stay where they were.
   The language in one paragraph: a white sidebar on a light grey ground, grey icons in soft 28px tiles, the open
   page painted red edge to edge; a frosted light top bar with white ghost buttons; one accent (red) for the primary
   action and "where am I", charcoal for a selected tab; Lato, 16 / 11 px radii, hairline strokes, soft low shadows;
   no coloured banners — a hero is an eyebrow, a big black title and a sentence, with glass stat tiles beside it.
   ============================================================================ */

/* ---------- the shell's own palette (shell.css reads --u-*) mapped onto the tokens ---------- */
:root{
  --u-navy:#161718; --u-navy-700:#2A2C31; --u-navy-100:#F1F1F2;
  --u-teal:#EB1414; --u-teal-100:#FFE2E2; --u-teal-50:#FFF0F0;
  --u-0:#FFFFFF; --u-50:#F5F5F5; --u-100:#F1F1F2; --u-200:#E4E6E7; --u-300:#D4D6DA;
  --u-400:#94969E; --u-500:#4F5158; --u-600:#4F5158; --u-900:#070916;
  --u-font:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --u-r:11px; --u-r-sm:8px; --u-e1:var(--shadow-sm); --u-ease:var(--ease);
  --navy-soft:#FFF0F0;
}
html,body{font-family:var(--font)}
body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"tnum" 1}
:where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--accent)!important;outline-offset:2px}

/* ============================================================================
   1. Sidebar — white, on its own hairline, the open page painted red
   ============================================================================ */
#sidebar{background:var(--white)!important;border-right:1px solid var(--stroke)!important;color:var(--grey)!important;width:260px}
#sidebar::before{display:none}
/* brand block: a white tile carrying the mark in red, the product name, a small outlined chip */
#sidebar .sidebar-brand{display:flex;align-items:center;gap:11px;height:56px!important;min-height:56px;flex:0 0 56px!important;padding:0 14px 0 14px!important;border-bottom:1px solid var(--stroke)!important;margin:0;position:relative;overflow:hidden}
#sidebar .sidebar-brand::before{content:"";position:absolute;left:-120px;top:-60px;width:300px;height:140px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,#E1ECFC 0%,rgba(228,238,252,.5) 36%,rgba(232,240,252,0) 80%);opacity:.9}
#sidebar .sidebar-brand>*{position:relative;z-index:1}
.sidebar-brand-icon{width:38px;height:38px;flex:0 0 auto;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--stroke);
  box-shadow:0 1px 2px rgba(7,9,22,.06),0 4px 10px -6px rgba(7,9,22,.18);color:var(--red-pure);font-size:16px;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease}
#sidebar .sidebar-brand:hover .sidebar-brand-icon{transform:translateY(-1px);box-shadow:0 1px 2px rgba(7,9,22,.06),0 8px 14px -8px rgba(7,9,22,.28)}
.sidebar-brand-icon svg{width:20px;height:20px;display:block}
#sidebar .sidebar-brand-word{display:flex;flex-direction:column;min-width:0;flex:1;overflow:hidden;white-space:nowrap;line-height:1.1;color:var(--ink)!important;font-family:var(--display);font-weight:700!important;font-size:16.5px!important;letter-spacing:-.01em!important;background:none!important;-webkit-text-fill-color:var(--ink)}
#sidebar .sidebar-brand-word small{display:block;overflow:hidden;text-overflow:ellipsis;margin-top:3px!important;font-size:9px!important;font-weight:800!important;letter-spacing:.14em!important;text-transform:uppercase;color:var(--grey-2)!important;-webkit-text-fill-color:var(--grey-2)}
.sidebar-brand-sub{margin-left:auto;flex-shrink:0;padding:2px 6px;border:1px solid var(--stroke)!important;border-radius:6px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--grey)!important;background:#fff!important}
/* the menu */
#sidebar .sidebar-nav{padding:10px 10px 16px!important;gap:1px!important;scrollbar-width:thin;scrollbar-color:var(--stroke) transparent}
#sidebar .sidebar-item,#sidebar .sidebar-group-header{gap:10px!important;min-height:40px!important;padding:6px 10px!important;border-radius:10px!important;
  font-size:14px;font-weight:600;color:var(--grey)!important;background:transparent;position:relative;transition:background .15s,color .15s}
#sidebar .sidebar-item .mod-ic,#sidebar .sidebar-group-header .mod-ic{width:28px!important;height:28px!important;flex:0 0 auto;display:inline-flex!important;align-items:center;justify-content:center;
  border-radius:8px!important;background:var(--bg)!important;color:var(--grey-2)!important;transition:background .15s,color .15s}
#sidebar .mod-ic i{color:inherit!important;opacity:1!important;font-size:13px!important;width:auto!important}
#sidebar .sidebar-item:hover,#sidebar .sidebar-group-header:hover{background:#F0F5FD!important;color:var(--ink)!important}
#sidebar .sidebar-item:hover .mod-ic,#sidebar .sidebar-group-header:hover .mod-ic{background:#DCE8F8!important;color:var(--ink)!important}
#sidebar .sidebar-group-header.open{color:var(--ink)!important}
#sidebar .sidebar-group-header .chevron{margin-left:auto;font-size:9px;color:var(--grey-2);opacity:1;width:14px;text-align:center}
/* the header of the group holding the open page: ink label, red glyph on a white tile */
#sidebar .sidebar-group-header.current,#sidebar div:has(> .sidebar-sub-items .sidebar-sub-item.active) > .sidebar-group-header{background:transparent!important;color:var(--ink)!important;font-weight:700}
#sidebar .sidebar-group-header.current .mod-ic,#sidebar div:has(> .sidebar-sub-items .sidebar-sub-item.active) > .sidebar-group-header .mod-ic{background:var(--bg)!important;color:var(--red)!important}
/* the open page is painted red edge to edge: white label and icon */
#sidebar .sidebar-item.active,#sidebar .sidebar-item.active:hover{background:var(--red)!important;color:#fff!important;font-weight:600;box-shadow:0 4px 10px -6px rgba(253,29,29,.6)}
#sidebar .sidebar-item.active .mod-ic,#sidebar .sidebar-item.active:hover .mod-ic{background:rgba(255,255,255,.2)!important;color:#fff!important}
#sidebar .sidebar-item.active::before,#sidebar .sidebar-sub-item.active::before{display:none}
/* sub pages: indented under the parent's tile */
#sidebar .sidebar-sub-items{margin:2px 0 6px 23px!important;padding-left:8px!important;gap:1px;border-left:1px solid transparent}
#sidebar .sidebar-sub-items.open{animation:sbReveal .18s ease-out}
@keyframes sbReveal{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
#sidebar .sidebar-sub-item{min-height:32px!important;padding:5px 10px!important;gap:9px!important;border-radius:8px!important;font-size:13px;font-weight:500;color:var(--grey)!important;background:transparent}
#sidebar .sidebar-sub-item i{width:16px;font-size:12px;color:var(--grey-2)!important;opacity:1;transition:color .15s}
#sidebar .sidebar-sub-item:hover{background:#F0F5FD!important;color:var(--ink)!important}
#sidebar .sidebar-sub-item:hover i{color:var(--ink)!important}
#sidebar .sidebar-sub-item.active,#sidebar .sidebar-sub-item.active:hover{background:var(--red)!important;color:#fff!important;font-weight:600;box-shadow:0 4px 10px -6px rgba(253,29,29,.6)}
#sidebar .sidebar-sub-item.active i,#sidebar .sidebar-sub-item.active:hover i{color:#fff!important}
/* captions, badges, footer */
#sidebar .sidebar-caption{padding:14px 10px 4px;font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--grey-2)}
.today-badge,#sidebar .sidebar-item.active .today-badge{background:var(--red-pure);color:#fff;font-weight:700}
#sidebar .sidebar-item.active .today-badge{background:#fff;color:var(--red-acc)}
#sidebar .nav-dot{position:absolute;top:5px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--red-pure);box-shadow:0 0 0 2px #fff;pointer-events:none}
.sidebar-footer{border-top:1px solid var(--stroke);color:var(--grey-2);font-size:11.5px;padding:12px 18px 18px}
/* the compact rail keeps the same tiles */
#sidebar.compact .sidebar-item,#sidebar.compact .sidebar-group-header{justify-content:center;padding:6px!important}
#sidebar.compact .sidebar-item.active .mod-ic{background:var(--red)!important;color:#fff!important}
#sidebar.compact .sidebar-item.active{background:transparent!important;box-shadow:none}
/* Administration: one entry folding the administration modules, each folded in turn */
#sidebar .sidebar-section-items{margin:2px 0 6px 10px!important;padding-left:6px!important;border-left:1px solid var(--stroke)}
#sidebar .sidebar-section-items .sidebar-sub-items{margin-left:20px!important}
#sidebar.compact .sidebar-section-items .sidebar-item,#sidebar.compact .sidebar-section-items .sidebar-group-header{justify-content:flex-start;padding:6px 10px!important}
#sidebar.compact .sidebar-section-items .sidebar-label,#sidebar.compact .sidebar-section-items .chevron{display:inline}

/* ============================================================================
   2. Top bar — frosted light, white ghost controls, red on hover
   ============================================================================ */
#appHeader{background:rgba(245,245,245,.72)!important;-webkit-backdrop-filter:saturate(170%) blur(12px);backdrop-filter:saturate(170%) blur(12px);
  color:var(--ink)!important;border-bottom:1px solid var(--stroke)!important;box-shadow:none}
#appHeader .hamburger-btn{width:36px;height:36px;border-radius:10px!important;background:var(--white)!important;border:1px solid var(--stroke)!important;color:var(--ink)!important;display:inline-flex;align-items:center;justify-content:center}
#appHeader .hamburger-btn:hover{background:var(--light-red)!important;color:var(--red-acc)!important}
/* the search: RA's global search box */
#appHeader .pal-btn-main{min-width:360px;height:36px;min-height:36px;padding:0 10px 0 12px;border-radius:10px;background:var(--white)!important;border:1px solid var(--stroke);color:var(--grey-2)!important;font-weight:500;font-size:13.5px;gap:8px;box-shadow:none;transition:border-color .12s,box-shadow .12s}
#appHeader .pal-btn-main:hover{border-color:#D4D6DA;box-shadow:none;color:var(--grey-2)!important}
#appHeader .pal-btn-main i{color:var(--grey-2);font-size:13px}
#appHeader .pal-btn-main kbd{font-size:11px;font-weight:600;color:var(--grey-2);border:1px solid var(--stroke);border-radius:6px;padding:1px 6px;background:#FAFAFA;line-height:18px}
/* chips: the demo clock and the network switch read as small outlined pills */
#appHeader .demo-chip{background:#fff;border:1px solid var(--stroke);color:var(--grey);font-weight:700;height:30px;padding:0 11px}
#appHeader .demo-chip i{color:var(--red-pure)}
#appHeader .offline-btn{height:30px;padding:0 11px;background:#fff;border:1px solid var(--stroke);color:var(--ok);font-weight:700}
#appHeader .offline-btn.on{background:var(--light-red);color:var(--red-acc);border-color:var(--bad-bd)}
/* Ask AI: a white ghost button, the sparkle in red (RA's "+ New") */
#appHeader .askai-btn{height:36px;padding:0 13px 0 10px;border-radius:10px;background:var(--white);border:1px solid var(--stroke);color:var(--ink);font-size:13.5px;font-weight:700;filter:none;transition:background .12s,border-color .12s}
#appHeader .askai-btn i{color:var(--red-pure)}
#appHeader .askai-btn:hover,#appHeader .askai-btn[aria-expanded="true"]{background:#F0F5FD;border-color:#DCE8F8;filter:none}
/* the persona: white ghost, charcoal avatar tile */
#appHeader .persona-btn{height:36px;min-height:36px;border-radius:10px;border:1px solid var(--stroke);background:#fff;color:var(--ink);font-weight:600;padding:0 11px 0 5px}
#appHeader .persona-btn:hover{background:#FCFCFC;border-color:#D4D6DA}
#appHeader .persona-av,.persona-av{border-radius:8px!important;background:linear-gradient(135deg,#2A2C31,#161718)!important;color:#fff!important;font-family:var(--display);font-weight:700;border:none!important;box-shadow:none!important}
#appHeader .icon-btn{width:36px;height:36px;border-radius:10px!important;background:var(--white)!important;border:1px solid var(--stroke)!important;color:var(--grey)!important}
#appHeader .icon-btn:hover{background:var(--light-red)!important;color:var(--red-acc)!important;border-color:var(--bad-bd)!important}
#appHeader #userMenuBtn{padding:0;border:none!important;background:transparent!important}
#appHeader #userMenuBtn .persona-av{width:36px;height:36px;border-radius:11px!important;font-size:14px;border:1px solid var(--stroke)!important}
#appHeader .badge{background:var(--red-pure);border:2px solid #fff;top:-6px;right:-6px}
#appHeader .badge.sync{background:var(--warn)}
/* menus: white, 12px, the floating shadow */
.dropdown,#personaMenu,.persona-menu{border-radius:12px!important;border:1px solid var(--stroke)!important;box-shadow:var(--shadow-lg)!important;background:#fff}
.persona-menu button.on,.persona-menu button:hover{background:#F0F5FD}
.acct-head{background:linear-gradient(135deg,#2A2C31,#161718)!important}
.acct .lab{background:var(--light-red)!important;color:var(--red-acc)!important}
.acct-item i{color:var(--red-acc)!important}
.acct-item:hover{background:#F0F5FD!important}
/* the launcher and the notifications keep their chrome, on the new ground */
.app-launcher-tile:hover{background:#F0F5FD}

/* ============================================================================
   3. Page head and tabs (the renderer and the custom pages)
   ============================================================================ */
.page-head{padding:22px 24px 0}
.page-eyebrow,#hdrEyebrow,#appHeader #hdrEyebrow{font-size:10.5px!important;font-weight:800!important;letter-spacing:.13em!important;text-transform:uppercase!important;color:var(--grey-2)!important}
#hdrEyebrow:not(:empty)::after{content:none}
.page-title,#hdrTitle,#appHeader #hdrTitle{font-family:var(--display);font-weight:900!important;font-size:21px!important;letter-spacing:-.01em!important;color:var(--ink)!important;line-height:1.15}
/* segmented pill: a grey trough, the active tab white with a soft shadow and a red glyph */
.tab-btn{font-weight:700!important;font-size:13.5px}
.tab-btn.active{background:#fff!important;color:var(--ink)!important;box-shadow:0 1px 1px rgba(7,9,22,.05),0 3px 10px rgba(7,9,22,.07)!important}
.tab-btn:not(.active){background:transparent!important;color:var(--grey-2)!important;border:0!important}
.tab-btn:not(.active):hover{background:rgba(255,255,255,.65)!important;color:var(--ink)!important}
.tab-btn.active i,.tab-btn.active svg{color:var(--red-pure)}
.tabs,.ph-tabs,.seg{display:inline-flex;gap:3px;background:#F5F5F5;border:1px solid var(--stroke);padding:4px;border-radius:14px}

/* ============================================================================
   4. The component kit (components.css) and the custom pages (pages.css)
   ============================================================================ */
body.kit{font-family:var(--font);font-size:14px}
/* cards: 16px, hairline, no resting shadow; lift on hover */
.tmet,.tdr,.sec,.card,.tile,.hc,.tdb-col,.pj-sec,.sec.card{border-radius:var(--radius)!important;border:1px solid var(--stroke)!important;background:#fff;box-shadow:none}
.tdr:hover,.hc:hover{transform:translateY(-1px);box-shadow:var(--hover-shadow);border-color:#D4D6DA!important}
.tmet-top b{font-weight:900;letter-spacing:-.02em}
.tmet-lbl,.tile .l,.sec h3,.teamlbl,.qlead,.fsel>b{font-weight:800;letter-spacing:.12em;color:var(--grey-2)}
.tile .v{font-weight:900;color:var(--ink);letter-spacing:-.02em}
h1{font-family:var(--display);font-weight:900;color:var(--ink);letter-spacing:-.01em}
h2{color:var(--ink)}
/* the hero: no band — eyebrow, a big black title, one sentence; the stats as glass tiles */
.tdb-hero{background:transparent!important;color:var(--ink)!important;box-shadow:none!important;border-radius:0!important;padding:14px 0 18px!important;margin-bottom:var(--s3)!important;overflow:visible!important;align-items:flex-end}
.tdb-hero::before,.tdb-hero::after{display:none}
.tdb-date{color:var(--grey-2)!important;font-size:10.5px!important;font-weight:800!important;letter-spacing:.14em!important}
.tdb-greet h2{font-family:var(--display);font-weight:900!important;font-size:34px!important;line-height:1.05!important;letter-spacing:-.03em!important;color:var(--ink)!important;margin:8px 0 0!important}
.tdb-greet p{color:var(--grey)!important;font-size:14.5px!important;line-height:1.55!important;max-width:720px;margin:10px 0 0!important;opacity:1!important}
.tdb-stats{gap:8px!important}
.tdb-stat{padding:12px 18px 11px!important;border-radius:14px!important;background:rgba(255,255,255,.72)!important;border:1px solid rgba(255,255,255,.95)!important;
  -webkit-backdrop-filter:saturate(170%) blur(10px);backdrop-filter:saturate(170%) blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--shadow-sm)!important;min-width:96px}
.tdb-stat b{color:var(--ink)!important;font-weight:900!important;font-size:28px!important;letter-spacing:-.03em!important;line-height:1!important}
.tdb-stat span{color:var(--grey-2)!important;font-size:10.5px!important;font-weight:800!important;letter-spacing:.12em!important;text-transform:uppercase}
.tdb-stat.is-hot b{color:var(--red-acc)!important}
.tdb-stat.is-good b{color:var(--ok)!important}
.tdb-stat+.tdb-stat{border-left:1px solid rgba(255,255,255,.95)!important}
/* the project page's own head */
.pj-head{background:#fff!important;color:var(--ink)!important;border:1px solid var(--stroke);box-shadow:none;border-radius:var(--radius)!important}
.pj-head::before,.pj-head::after{display:none}
.pj-head h1{font-weight:900!important;letter-spacing:-.02em!important;color:var(--ink)}
.pj-head p.desc{color:var(--grey);opacity:1!important}
.pj-head .tag,.pj-head .pj-tag,.pj-head .pj-labels>*{background:var(--bg)!important;color:var(--grey)!important;border:1px solid var(--stroke)}
.pj-head .pj-labels>.on,.pj-head .pj-labels>.is-on{background:var(--light-red)!important;color:var(--red-acc)!important;border-color:var(--bad-bd)}
/* chips, filters, quick row */
.chip{font-weight:600;border-radius:999px}
.chip.on{background:var(--charcoal)!important;border-color:transparent;color:#fff}
.search{background:#fff;border:1px solid var(--stroke);height:36px;border-radius:10px}
.search:focus-within{border-color:var(--bad-bd);box-shadow:0 0 0 3px var(--light-red)}
.fsel{height:32px;border-radius:999px;background:#fff;overflow:hidden;flex:0 1 auto;min-width:0} .fsel select{min-width:0}
.fsel.on{background:#F0F5FD!important;border-color:#DCE8F8!important}
.fsel.on>b,.fsel.on select{color:var(--ink)!important}
.fclear{color:var(--red-acc)}
/* buttons: the primary is the one red, everything else a white ghost */
.btn,.pbtn,.kbtn{font-family:var(--font);font-weight:700;border-radius:10px!important;border:1px solid var(--stroke);background:#fff;color:var(--ink)}
.btn:hover,.pbtn:hover,.kbtn:hover{background:#FAFAFA;border-color:#D4D6DA}
.btn.primary,.pbtn.primary,.kbtn.primary,.btn-primary,.btn.pri,.btn.main{background:var(--red-acc)!important;border-color:transparent!important;color:#fff!important;box-shadow:0 6px 16px rgba(253,0,36,.2)}
.btn.primary:hover,.pbtn.primary:hover,.kbtn.primary:hover,.btn-primary:hover{background:#E10020!important}
button.link,.link{color:var(--red-acc)}
/* pills (status words) */
.pill{border-radius:999px;font-weight:700}
.pill.blue{background:#F1F1F2;color:var(--ink)}
.meter{background:#E6EBF2;border-radius:6px}
.meter i{background:var(--charcoal)}
/* tables */
th{font-weight:800;letter-spacing:.08em;color:var(--grey-2)}
tr:hover td{background:#FAFBFD}
/* the record panel and the dock */
.modal,.panel,.drawer{border-radius:20px!important;border:1px solid var(--stroke)}
.actdock{border-radius:999px;background:rgba(255,255,255,.9);border:1px solid var(--stroke);box-shadow:var(--shadow-lg)}
.actdock .is-next,.actdock .on{border-color:var(--red-pure)!important;color:var(--red-acc)!important}
/* inputs */
input,select,textarea{border-radius:10px!important;border-color:var(--stroke)!important;font-family:var(--font)}
input:focus,select:focus,textarea:focus{outline:0!important;border-color:var(--bad-bd)!important;box-shadow:0 0 0 3px var(--light-red)!important}
/* toasts */
.toast,.toast-msg{background:var(--ink);border-radius:12px}

/* ============================================================================
   5. Sign-in — the RA sign-in page: a photo under a light red wash, a clear glass card
   ============================================================================ */
#loginOverlay .auth-bg,#authCeremony .auth-bg{background:#1a0d10}
#loginOverlay .auth-photo,#authCeremony .auth-photo{left:-4%;right:-4%;top:-4%;bottom:-4%;background:url('/static/img/brand/login-bg.jpg') 60% 40% / cover no-repeat;filter:none;opacity:1;animation:ra-kb 38s ease-in-out infinite alternate}
@keyframes ra-kb{from{transform:scale(1)}to{transform:scale(1.06) translate(-1%,1%)}}
#loginOverlay .auth-shade,#authCeremony .auth-shade{background:linear-gradient(100deg,rgba(18,10,12,.78) 0%,rgba(18,10,12,.52) 32%,rgba(18,10,12,.08) 60%,rgba(18,10,12,.14) 100%),linear-gradient(180deg,rgba(12,6,8,.25) 0%,rgba(12,6,8,0) 28%,rgba(12,6,8,.5) 100%)}
#loginOverlay .auth-shade::after,#authCeremony .auth-shade::after{content:"";position:absolute;inset:0;background:#FD0024;mix-blend-mode:soft-light;opacity:.22}
.auth-blob,.auth-grid,.auth-vignette{display:none!important}
.auth-grain{opacity:.09;mix-blend-mode:overlay}
.auth-wordmark-text{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:900;font-size:15px;letter-spacing:.02em;color:#fff;margin:0 0 18px}
.auth-wordmark-text::before{content:"";width:40px;height:40px;border-radius:11px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FD0024' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 3.5 7 12 11.5 20.5 7z'/%3E%3Cpath d='M3.5 7v10l8.5 4.5V11.5'/%3E%3Cpath d='M20.5 7v10L12 21.5'/%3E%3C/svg%3E") center/22px no-repeat;box-shadow:0 10px 30px -10px rgba(0,0,0,.6)}
.auth-eyebrow{font-size:10.5px!important;font-weight:800!important;letter-spacing:.16em!important;text-transform:uppercase;color:rgba(255,255,255,.72)!important}
.auth-headline{font-family:var(--display)!important;font-weight:900!important;font-size:clamp(40px,4.4vw,66px)!important;line-height:1.02!important;letter-spacing:-.025em!important;color:#fff!important;text-shadow:0 10px 40px rgba(0,0,0,.35)}
.auth-sub{color:rgba(255,255,255,.8)!important;font-size:16px!important;line-height:1.55!important}
.auth-chips li{background:rgba(255,255,255,.1)!important;border:1px solid rgba(255,255,255,.26)!important;color:#fff!important;font-weight:700;border-radius:999px}
.auth-chips li i{color:#fff}
.auth-glass,#loginOverlay .auth-card{background:linear-gradient(155deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.06) 42%,rgba(255,255,255,.04) 100%)!important;border:1px solid rgba(255,255,255,.34)!important;
  -webkit-backdrop-filter:blur(6px) brightness(.9);backdrop-filter:blur(6px) brightness(.9);box-shadow:0 40px 90px -34px rgba(20,0,6,.55),inset 0 1px 0 rgba(255,255,255,.45)!important;border-radius:28px!important}
#loginOverlay .auth-card{padding:40px 38px 30px!important}
.auth-card-mark-text{display:none}
.auth-card-title{font-family:var(--display)!important;font-weight:900!important;font-size:34px!important;letter-spacing:-.02em!important;color:#fff;margin:0 0 6px!important}
.auth-card-sub{color:rgba(255,255,255,.78)!important;font-size:14.5px!important;margin:0 0 24px!important}
.auth-btn{height:54px;border-radius:999px!important;font-family:var(--font);font-size:15.5px;font-weight:700;transition:transform .15s ease,background-color .2s ease,box-shadow .25s ease}
.auth-btn-primary{background:#fff!important;color:var(--ink)!important;box-shadow:0 14px 34px -14px rgba(20,0,6,.6)!important;border:0!important}
.auth-btn-primary:hover{transform:translateY(-1px);box-shadow:0 18px 40px -12px rgba(20,0,6,.7)!important}
.auth-sso-note{background:rgba(255,255,255,.1)!important;border:1px solid rgba(255,255,255,.22)!important;color:rgba(255,255,255,.85)!important;border-radius:14px!important}
.auth-sso-note b{color:#fff}
#personaPick label{color:rgba(255,255,255,.85)!important;font-weight:700!important;letter-spacing:.02em}
.auth-input{height:52px!important;border-radius:14px!important;border:1px solid rgba(255,255,255,.3)!important;background:rgba(255,255,255,.1)!important;color:#fff!important;font-size:15px!important}
.auth-input:focus{background:rgba(255,255,255,.16)!important;border-color:#fff!important;box-shadow:0 0 0 4px rgba(255,255,255,.18)!important}
.auth-input option{color:var(--ink)}
.auth-foot{color:rgba(255,255,255,.72)!important;font-size:12.5px!important;text-align:center}
/* the ceremony and the welcome, on the same photo */
.auth-cer-panel{border-radius:28px!important}
.auth-cer-logo{background:#fff!important;border-radius:11px!important}
.auth-wel-h1{font-family:var(--display)!important;font-weight:900!important;letter-spacing:-.03em!important;color:#fff}
.auth-wel-h2{color:rgba(255,255,255,.8)!important}
.auth-ai{border-radius:20px!important}
.auth-ai-head i{color:#fff}
.auth-done svg circle{stroke:#fff}.auth-done svg path{stroke:#fff}
.auth-done p{color:#fff;font-family:var(--display);font-weight:900}
.auth-wel-auto span{background:#fff!important}

/* ============================================================================
   6. Ask AI panel and the palette
   ============================================================================ */
/* the panel speaks the skin: a white head on a hairline, Lato, red for the spark and the send, charcoal for "you" */
#askAiPanel{font-family:var(--font);background:var(--white);border-left:1px solid var(--stroke);box-shadow:var(--shadow-lg)}
#askAiPanel .askai-head{height:56px;padding:0 12px 0 18px;background:var(--white);border-bottom:1px solid var(--stroke);color:var(--ink)}
#askAiPanel .askai-head h2{font-family:var(--display);font-size:var(--t-section);font-weight:900;letter-spacing:-.01em;color:var(--ink)}
#askAiPanel .askai-spark{color:var(--red-pure)}
#askAiPanel .askai-head>button{width:34px;height:34px;border-radius:10px;color:var(--grey-2)}
#askAiPanel .askai-head>button:hover{background:var(--n-100);color:var(--ink)}
#askAiScroll{background:var(--bg);padding:var(--s5) var(--s4)}
#askAiPanel .askai-hero{padding:var(--s4) var(--s2)}
#askAiPanel .askai-hero .askai-spark{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:var(--r-lg);background:var(--white);border:1px solid var(--stroke);box-shadow:var(--shadow-sm);font-size:22px!important}
#askAiPanel .askai-hero h3{font-family:var(--display);font-size:var(--t-title);font-weight:900;letter-spacing:-.02em;margin:14px 0 6px}
#askAiPanel .askai-hero p{font-size:var(--t-body);color:var(--ink-2);line-height:1.5;margin-bottom:var(--s5)}
#askAiPanel .askai-chips{gap:var(--s2)}
#askAiPanel .askai-chips button{border:1px solid var(--stroke);border-radius:var(--r);background:var(--white);padding:11px 14px;font-size:var(--t-body);font-weight:700;color:var(--ink);box-shadow:var(--shadow-sm);transition:border-color var(--fast),box-shadow var(--fast)}
#askAiPanel .askai-chips button:hover{background:var(--white);border-color:var(--stroke-2);color:var(--ink);box-shadow:var(--hover-shadow)}
#askAiPanel .askai-msg{font-size:var(--t-body);border-radius:var(--r-lg)}
#askAiPanel .askai-msg.user{background:var(--charcoal-grad);color:var(--white);border-bottom-right-radius:4px}
#askAiPanel .askai-msg.assistant{background:var(--white);border:1px solid var(--stroke);border-bottom-left-radius:4px;box-shadow:var(--shadow-sm)}
#askAiPanel .askai-msg.assistant.error{background:var(--bad-bg);border-color:var(--bad-bd)}
#askAiPanel .askai-msg a{color:var(--red-acc)}
#askAiPanel .askai-msg.assistant code,#askAiPanel .askai-msg.assistant pre{background:var(--n-100)}
#askAiPanel .askai-tools{color:var(--n-500)}
#askAiPanel .askai-typing{background:var(--white);border-color:var(--stroke);border-radius:var(--r-lg);border-bottom-left-radius:4px}
#askAiPanel .askai-chart{border-color:var(--stroke);border-radius:var(--r)}
#askAiPanel .askai-foot{background:var(--white);border-top:1px solid var(--stroke);padding:var(--s3) var(--s4) var(--s2)}
#askAiPanel .askai-guide{border-radius:var(--r);padding:10px 14px;font-size:var(--t-body);margin-bottom:10px}
#askAiPanel .askai-guide:hover{background:var(--light-blue);border-color:var(--light-blue-bd)}
#askAiPanel .askai-inputrow{align-items:center;border:1px solid var(--stroke);border-radius:var(--r-lg);background:var(--white);padding:6px 6px 6px 14px;transition:border-color var(--fast),box-shadow var(--fast)}
#askAiPanel .askai-inputrow:focus-within{border-color:var(--bad-bd);box-shadow:0 0 0 3px var(--light-red)}
#askAiInput,#askAiInput:focus,#askAiInput:focus-visible{border:0!important;box-shadow:none!important;outline:0!important;background:transparent;font-size:var(--t-body);color:var(--ink);padding:6px 0}
#askAiInput::placeholder{color:var(--n-500)}
#askAiSendBtn{width:36px;height:36px;border-radius:10px;background:var(--red-grad);color:var(--white)}
#askAiSendBtn:hover:not(:disabled){background:var(--red-deep)}
#askAiSendBtn:disabled{background:var(--n-300);opacity:1}
#askAiPanel .askai-note{font-size:var(--t-micro);color:var(--n-500);margin-top:var(--s2)}
#palette .pal-box{border-radius:16px;border:1px solid var(--stroke);box-shadow:var(--shadow-lg)}
#palette .pal-item.sel,#palette .pal-item:hover{background:#F0F5FD}
#palette .pal-item.sel .pal-ic{background:#fff;color:var(--red)}
#palette .pal-in input{font-family:var(--font)}

@media (prefers-reduced-motion:reduce){
  #loginOverlay .auth-photo,#authCeremony .auth-photo{animation:none}
  #sidebar .sidebar-sub-items.open{animation:none}
}

/* ============================================================================
   7. The renderer's kit (kit.scoped.css scopes under .kit, so these outrank it)
   ============================================================================ */
.kit .search,.search{background:#fff!important;border:1px solid var(--stroke)!important;height:36px;border-radius:10px!important;color:var(--grey-2)}
.kit .search:focus-within{border-color:var(--bad-bd)!important;box-shadow:0 0 0 3px var(--light-red)!important;background:#fff!important}
.kit .search input{font-family:var(--font)}
/* the segmented view switcher: a grey trough, the open view white with a soft shadow */
.views{background:#F5F5F5!important;border:1px solid var(--stroke);padding:4px!important;border-radius:14px!important;gap:3px}
.views .view{border-radius:10px!important;font-weight:700!important;font-size:13.5px!important;color:var(--grey-2)!important;background:transparent!important;border:0!important}
.views .view:hover{color:var(--ink)!important;background:rgba(255,255,255,.65)!important}
.views .view.on,.view.on{background:#fff!important;color:var(--ink)!important;box-shadow:0 1px 1px rgba(7,9,22,.05),0 3px 10px rgba(7,9,22,.07)!important}
.views .view em{font-style:normal;background:#fff;color:var(--grey);border-radius:999px;padding:1px 7px;font-size:11px;font-weight:800;margin-left:6px}
.views .view.on em{background:var(--light-red);color:var(--red-acc)}
/* buttons in the kit */
.kit .btn,.kit button.btn{font-family:var(--font);font-weight:700;border-radius:10px!important;border:1px solid var(--stroke)!important;background:#fff!important;color:var(--ink)!important;box-shadow:none}
.kit .btn:hover{background:#FAFAFA!important;border-color:#D4D6DA!important}
.kit .btn.primary,.kit .btn.main,.kit .btn-primary{background:var(--red-acc)!important;border-color:transparent!important;color:#fff!important;box-shadow:0 6px 16px rgba(253,0,36,.2)!important}
.kit .btn.primary:hover,.kit .btn.main:hover,.kit .btn-primary:hover{background:#E10020!important}
.kit .btn.danger{background:#fff!important;color:var(--red-acc)!important;border-color:var(--bad-bd)!important}
.kit .chip.on{background:var(--charcoal)!important;border-color:transparent!important;color:#fff!important}
.kit .fsel.on{background:#F0F5FD!important;border-color:#DCE8F8!important}
.kit .fsel.on>b,.kit .fsel.on select{color:var(--ink)!important}
.kit .tmet,.kit .tdr,.kit .sec,.kit .tdb-col{border-radius:var(--radius)!important;border:1px solid var(--stroke)!important}
.kit .tdr:hover{border-color:#D4D6DA!important;box-shadow:var(--hover-shadow)!important}
.kit .modal,.kit .panel{border-radius:20px!important}
.kit .grp{border-radius:var(--radius)!important;border-color:var(--stroke)!important}
.kit .scrim{background:rgba(7,9,22,.42)}
/* the workspace toggle (Workspace / List) */
.wsv,.view-toggle{background:#F5F5F5;border:1px solid var(--stroke);border-radius:12px;padding:3px}
.wsv .on,.view-toggle .on{background:#fff;color:var(--ink);box-shadow:0 1px 1px rgba(7,9,22,.05),0 3px 10px rgba(7,9,22,.07)}

/* ---- page specifics: money, logframe ---- */
.eac{background:#fff!important;color:var(--ink)!important;border:1px solid var(--stroke);border-radius:var(--radius)!important;box-shadow:none}
.eac b,.eac .big{color:var(--ink)}
.eac .lbl,.eac small{color:var(--grey-2)}
.eac .over,.eac .chip{background:var(--light-red);color:var(--red-acc)}
.vpill.on{background:var(--charcoal)!important;color:#fff!important}
.vpill.on .dot{background:#fff}
/* a selected pill anywhere in a page is charcoal; the one red thing on a page is its primary action */
.pill.on,.tog.on,.seg .on{background:var(--charcoal)!important;color:#fff!important}