/* Skin layer: shape, depth and spacing only. It reuses the existing colour tokens (indigo accent, current light/dark palettes),
   so removing this one file restores the previous look. Loaded after app.css. */

:root{--radius:20px;--radius-sm:13px;
  --glow:0 0 0 1px color-mix(in srgb,var(--accent) 38%,transparent),0 6px 22px -6px color-mix(in srgb,var(--accent) 55%,transparent);
  --lift:0 14px 34px -14px rgba(16,24,40,.22),0 2px 6px rgba(16,24,40,.05)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--lift:0 16px 38px -14px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.03)}}
:root[data-theme="dark"]{--lift:0 16px 38px -14px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.03)}

/* soft accent glow behind the page, using the existing accent colour only */
body{background:radial-gradient(900px 480px at 8% -8%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%),
  radial-gradient(760px 420px at 100% 0%,color-mix(in srgb,var(--accent2) 7%,transparent),transparent 70%),var(--bg);background-attachment:fixed}

/* cards: rounder, borderless-feeling, lifted */
.card{border-radius:var(--radius);padding:22px;border-color:color-mix(in srgb,var(--line) 70%,transparent);box-shadow:var(--lift)}
.pcard:hover,.modcard:hover{box-shadow:var(--lift),var(--glow)}
.kpi{border-radius:var(--radius)}
.card.empty{border-radius:calc(var(--radius) + 6px)}

/* buttons: pill shaped, outlined with a quiet accent edge; primary glows */
.btn{border-radius:999px;height:40px;padding:0 20px;border:1.5px solid color-mix(in srgb,var(--accent) 28%,var(--line2));background:transparent;transition:box-shadow .15s,border-color .15s,background .15s,transform .15s}
.btn:hover{background:var(--accent-soft);border-color:var(--accent);box-shadow:var(--glow)}
.btn.p{border-color:transparent;background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--on-accent);box-shadow:0 8px 20px -8px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn.p:hover{background:linear-gradient(135deg,var(--accent),var(--accent2));filter:brightness(1.07);box-shadow:0 10px 26px -8px color-mix(in srgb,var(--accent) 80%,transparent)}
.btn.sm{height:32px;padding:0 14px;border-radius:999px}
.btn.danger{border-color:color-mix(in srgb,var(--fail) 35%,var(--line2))}
.iconbtn{border-radius:14px}
input,select,textarea{border-radius:var(--radius-sm);background:var(--surface2)}
textarea{border-radius:16px}

/* navigation */
.nav a,.nav button{border-radius:13px}
.nav a.on{box-shadow:var(--lift)}
.tabs{border-bottom:0;gap:6px;padding:4px;background:var(--surface2);border-radius:999px;width:max-content;max-width:100%}
.tabs a{border:0;margin:0;padding:8px 16px;border-radius:999px}
.tabs a.on{background:var(--surface);color:var(--text);box-shadow:var(--lift)}
.mpill{padding:8px 14px;border-color:color-mix(in srgb,var(--accent) 22%,var(--line))}
.mpill:hover{border-color:var(--accent);box-shadow:var(--glow);background:var(--accent-soft)}
.flowhint{border-radius:16px}
.topbar{border-bottom-color:transparent;backdrop-filter:blur(14px)}

/* rail: rounder buttons, glowing selected state */
.side .rail .rbtn{border-radius:16px}
.rbtn.on{box-shadow:0 0 0 3px color-mix(in srgb,#fff 22%,transparent)}
.rlogo .logo{border-radius:14px}

/* project + checklist cards */
.pcard{padding:24px}
.pfoot{border-top-color:color-mix(in srgb,var(--line) 70%,transparent)}
.flow{padding:26px}
.fstepcard{border-radius:18px;padding:16px}
.fstepcard.next{box-shadow:0 0 0 3px var(--accent-soft),var(--glow)}
.fnum{width:32px;height:32px}
.fprog{height:10px}
.howto li{border-radius:16px}
.chip{padding:3px 11px}

/* module feature tiles on the landing page: tall tiles, big faint icon, text at the bottom */
.modgroup .grid{gap:18px}
.modcard{position:relative;overflow:hidden;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:0;min-height:190px;padding:22px;border:0;border-radius:28px;color:#fff;
  background:linear-gradient(145deg,var(--tile-a,var(--accent)),var(--tile-b,var(--accent2)));box-shadow:0 18px 36px -16px color-mix(in srgb,var(--tile-a,var(--accent)) 70%,transparent)}
.modcard:hover{transform:translateY(-4px);box-shadow:0 24px 44px -16px color-mix(in srgb,var(--tile-a,var(--accent)) 80%,transparent)}
.modcard .fav{display:none}
.modcard .modbig{position:absolute;top:-10px;right:-6px;opacity:.2;color:#fff;transform:rotate(-8deg);pointer-events:none}
.modcard .modbig .ico{width:132px;height:132px;stroke-width:1.3}
.modcard b{font-size:18px;color:#fff}
.modcard .muted{color:rgba(255,255,255,.82);font-size:13px;margin-top:4px;max-width:30ch}
.modcard .modn{background:rgba(255,255,255,.2);color:#fff}
/* six tones of the one indigo/violet accent family (fixed values so white text stays readable in light and dark) */
.modgroup .modcard:nth-child(1){--tile-a:#5046e5;--tile-b:#7c3aed}
.modgroup .modcard:nth-child(2){--tile-a:#6d3df0;--tile-b:#4b3fd8}
.modgroup .modcard:nth-child(3){--tile-a:#4338ca;--tile-b:#6d28d9}
.modgroup + .modgroup .modcard:nth-child(1){--tile-a:#4f46e5;--tile-b:#6366f1}
.modgroup + .modgroup .modcard:nth-child(2){--tile-a:#7c3aed;--tile-b:#9333ea}
.modgroup + .modgroup .modcard:nth-child(3){--tile-a:#3f37c9;--tile-b:#5b50e6}

/* landing page: roomier */
.shell.bare .main{padding-top:36px}
.zone-h{font-size:22px;letter-spacing:-.01em}
.home-div{border-top-width:1px;opacity:.7}
.addcard{border-radius:var(--radius);border-width:2px}

/* ---- sidebar: two floating rounded panels instead of a flat strip ---- */
.shell{grid-template-columns:344px minmax(0,1fr)}
.shell.bare{grid-template-columns:minmax(0,1fr)}
.side{background:transparent;border-right:0;padding:14px 0 14px 14px;gap:12px}
.side .rail{border-radius:28px;height:100%;box-shadow:0 18px 40px -16px rgba(8,10,30,.55);background:linear-gradient(180deg,#2b2d33,#1f2126)}
.side .panel{border-radius:28px;background:var(--surface);box-shadow:var(--lift);padding:16px 12px 14px;border:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.rlogo .logo{box-shadow:0 8px 20px -6px color-mix(in srgb,var(--accent) 80%,transparent),inset 0 1px 0 rgba(255,255,255,.28)}
.rbtn{border-radius:18px}
.rbtn.rghost{background:rgba(255,255,255,.08)}
.rbtn.rghost:hover{background:rgba(255,255,255,.16);box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.rbtn.rtool.on{background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 8px 18px -6px color-mix(in srgb,var(--accent) 85%,transparent)}
.rbtn.rtool.on::before{display:none}
#rail-new{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 8px 18px -6px color-mix(in srgb,var(--accent) 80%,transparent)}
#rail-new:hover{filter:brightness(1.1)}

/* project header becomes a small accent tile, like the reference's "information" card */
.phead{margin:0 0 14px;padding:16px 16px 14px;border-radius:20px;color:#fff;background:linear-gradient(145deg,#5046e5,#7c3aed);box-shadow:0 14px 26px -14px rgba(80,70,229,.75)}
.phead .pname{color:#fff;font-size:17px}
.phead .pdom,.phead .muted{color:rgba(255,255,255,.8)}
.phead a{color:#fff;text-decoration:underline}

/* menu items: pill shaped, the current one glows */
.side .panel .nav a{border-radius:14px;padding:9px 12px}
.side .panel .nav a.on{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:600;box-shadow:0 10px 20px -10px color-mix(in srgb,var(--accent) 85%,transparent)}
.side .panel .nav a.on .ico{color:#fff}
.side .panel .nav a.on::before{display:none}
.side .panel .nav a:hover:not(.on){background:var(--accent-soft);color:var(--text)}
.side .panel .nav a:hover:not(.on) .ico{color:var(--accent)}
.side h4{margin:20px 12px 8px}
.nbadge{background:var(--accent2)}
.nav a.on .nbadge{background:rgba(255,255,255,.28);color:#fff}

@media (max-width:1100px){
  .shell{grid-template-columns:1fr}
  .side{width:340px;max-width:94vw;background:var(--bg);padding:12px 0 12px 12px}
}

/* ---- sidebar, round 2: one joined unit, calmer header and selection, no visible scrollbar ---- */
.shell{grid-template-columns:332px minmax(0,1fr)}
.side{gap:0;padding:14px 0 14px 14px}
.side .rail{border-radius:28px 0 0 28px;box-shadow:none;background:linear-gradient(180deg,#2b2d33,#202227)}
.side .panel{border-radius:0 28px 28px 0;border:0;box-shadow:none;background:var(--surface);padding:18px 10px 12px}
/* one shadow for the whole joined unit */
.side{filter:drop-shadow(0 16px 26px rgba(16,24,40,.16))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .side{filter:drop-shadow(0 16px 26px rgba(0,0,0,.5))}}
:root[data-theme="dark"] .side{filter:drop-shadow(0 16px 26px rgba(0,0,0,.5))}
.side .rail .rbtn.on{box-shadow:0 0 0 2px rgba(255,255,255,.55)}

/* project header: plain, no coloured tile */
.phead{margin:0 0 10px;padding:4px 12px 14px;border-radius:0;background:none;box-shadow:none;color:var(--text);border-bottom:1px solid var(--line)}
.phead .pname{color:var(--text);font-size:17px}
.phead .pdom,.phead .muted{color:var(--muted)}
.phead a{color:var(--accent);text-decoration:none}

/* menu: compact so the whole list fits without scrolling, soft tint for the current page */
.side .panel .nav a{padding:7px 12px;font-size:13.5px;gap:11px;border-radius:12px}
.side .panel .nav a.on{background:var(--accent-soft);color:var(--accent);font-weight:650;box-shadow:none}
.side .panel .nav a.on .ico{color:var(--accent)}
.side .panel .nav a.on::before{display:block;content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.nav a.on .nbadge{background:var(--accent);color:var(--on-accent)}
.side h4{margin:14px 12px 6px}
.side .panel{overflow-y:auto;scrollbar-width:none}
.side .panel::-webkit-scrollbar{display:none}
@media (max-height:760px){.side .panel .nav a{padding:5px 12px}.side h4{margin:10px 12px 4px}.phead{padding-bottom:10px}}
@media (max-width:1100px){.shell{grid-template-columns:1fr}.side{width:330px;max-width:94vw}}

/* ---- top bar: solid (content no longer shows through), with a clean edge and a little more room ---- */
.topbar{height:64px;background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--line);
  box-shadow:0 10px 18px -16px rgba(16,24,40,.35);z-index:30}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .topbar{box-shadow:0 10px 18px -16px rgba(0,0,0,.8)}}
:root[data-theme="dark"] .topbar{box-shadow:0 10px 18px -16px rgba(0,0,0,.8)}
.crumb{font-size:14px;gap:10px}
.crumb a{color:var(--muted);font-weight:500}
.crumb a:hover{color:var(--accent);text-decoration:none}
.crumb b{padding:5px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--text);box-shadow:var(--shadow);font-weight:650}
.crumb .sl{color:var(--line2)}
.segm{border-radius:999px;padding:3px;background:var(--surface);border:1px solid var(--line)}
.segm button{border-radius:999px}
.bare-email{padding:6px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line)}

/* ---- sidebar round 3: flush to the screen edges, darker "console" rail, glowing marks ---- */
.shell{grid-template-columns:316px minmax(0,1fr)}
.shell.bare{grid-template-columns:minmax(0,1fr)}
.side{padding:0;gap:0;filter:none;background:transparent;position:sticky;top:0;height:100vh}
.side::after{content:"";position:absolute;right:0;top:0;bottom:0;width:1px;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 70%,transparent),color-mix(in srgb,var(--accent2) 25%,transparent) 45%,var(--line) 85%)}
.side .rail{width:68px;border-radius:0;box-shadow:none;gap:10px;padding:14px 0 12px;
  background:radial-gradient(130% 38% at 50% 0%,rgba(124,58,237,.38),transparent 70%),linear-gradient(180deg,#181a2b,#101121)}
.side .panel{border-radius:0;box-shadow:none;border:0;padding:14px 10px 12px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 6%,var(--surface)),var(--surface) 38%)}

/* logo: a small glowing orb */
.rlogo .logo{width:40px;height:40px;border-radius:14px;box-shadow:0 0 0 1px rgba(255,255,255,.18),0 0 22px color-mix(in srgb,var(--accent2) 75%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}
.rsep{width:34px;border-top-color:rgba(255,255,255,.1)}
.rbot,.rtools{border-top-color:rgba(255,255,255,.08)}

/* rail buttons: selected ones glow */
.rbtn{border-radius:16px;width:44px;height:44px}
.rbtn.on{border-color:rgba(255,255,255,.9);box-shadow:0 0 0 3px rgba(124,58,237,.35),0 0 20px color-mix(in srgb,var(--accent) 65%,transparent)}
.rbtn.on::before{left:-12px;background:linear-gradient(180deg,#a78bfa,var(--accent));box-shadow:0 0 12px var(--accent2)}
.rbtn.rtool{width:38px;height:38px;border-radius:13px}
.rbtn.rtool.on{box-shadow:0 0 18px color-mix(in srgb,var(--accent) 70%,transparent)}
.rbtn.rghost{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.rbtn.rghost:hover{background:rgba(255,255,255,.13);border-color:rgba(167,139,250,.55);box-shadow:0 0 14px rgba(124,58,237,.4)}
#rail-new{border:0}

/* panel: tech-style labels */
.phead{padding:6px 12px 14px;margin-bottom:8px}
.phead::before{content:"PROJECT";display:block;font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--accent);margin-bottom:6px}
.side h4{display:flex;align-items:center;gap:10px;margin:16px 12px 6px;letter-spacing:.14em;font-size:10px}
.side h4::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent)}
.side .panel .nav a.on{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 16%,transparent),color-mix(in srgb,var(--accent) 3%,transparent))}
.side .panel .nav a.on::before{left:0;box-shadow:0 0 12px var(--accent);background:linear-gradient(180deg,var(--accent2),var(--accent))}
.side .panel .nav a:hover:not(.on){background:color-mix(in srgb,var(--accent) 7%,transparent)}

/* top bar: flush with the sidebar, glass edge with a gradient hairline */
.topbar{height:60px;padding:0 28px;border-bottom:0;box-shadow:none;background:var(--bg)}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 60%,transparent),var(--line) 30%,var(--line) 75%,transparent)}
.crumb b{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,var(--surface)),var(--surface));border-color:color-mix(in srgb,var(--accent) 25%,var(--line))}
.main{padding-top:26px}

@media (max-width:1100px){.shell{grid-template-columns:1fr}.side{width:316px;max-width:94vw;background:var(--bg);height:100vh}}

/* ---- "Other pages": the list scrolls on its own, invisible scrollbar, edges fade where more content exists ---- */
.side .panel{overflow:hidden}
.side .panel .scrollnav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none;
  --fu:0px;--fd:0px;padding-bottom:6px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fu),#000 calc(100% - var(--fd)),transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fu),#000 calc(100% - var(--fd)),transparent 100%);
  transition:--fu .15s}
.side .panel .scrollnav::-webkit-scrollbar{display:none;width:0;height:0}
.side .panel .scrollnav.can-up{--fu:30px}
.side .panel .scrollnav.can-down{--fd:40px}
/* a thin glowing cue under the heading while there is more above */
.side h4.has-more{color:var(--accent)}
.side h4.has-more::after{background:linear-gradient(90deg,var(--accent),transparent);box-shadow:0 0 8px var(--accent)}

/* rail on short screens: scrolls invisibly instead of letting buttons overlap (tooltips are fixed-position, so nothing clips) */
.side .rail{overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none}
.side .rail::-webkit-scrollbar{display:none;width:0}
.side .rail .rlist{flex:1 0 auto;overflow:visible}
.side .rail>*{flex-shrink:0}

/* ---- frosted glass sidebar: translucent panels that blur whatever sits behind them ---- */
:root{--glow-a:rgba(124,58,237,.34);--glow-b:rgba(80,70,229,.30);--glow-c:rgba(167,139,250,.22);
  --glass-rail-a:rgba(28,30,52,.66);--glass-rail-b:rgba(16,17,36,.60);--glass-edge:rgba(255,255,255,.14);
  --glass-panel-a:rgba(255,255,255,.62);--glass-panel-b:rgba(255,255,255,.46)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--glow-a:rgba(124,58,237,.50);--glow-b:rgba(80,70,229,.46);--glow-c:rgba(167,139,250,.24);
  --glass-panel-a:rgba(26,29,48,.58);--glass-panel-b:rgba(18,20,36,.46);--glass-edge:rgba(255,255,255,.10)}}
:root[data-theme="dark"]{--glow-a:rgba(124,58,237,.50);--glow-b:rgba(80,70,229,.46);--glow-c:rgba(167,139,250,.24);
  --glass-panel-a:rgba(26,29,48,.58);--glass-panel-b:rgba(18,20,36,.46);--glass-edge:rgba(255,255,255,.10)}

/* soft coloured light behind the sidebar so the glass has something to show */
.shell:not(.bare)::before{content:"";position:fixed;left:0;top:0;bottom:0;width:520px;z-index:0;pointer-events:none;
  background:radial-gradient(360px 340px at 70px 18%,var(--glow-a),transparent 72%),
             radial-gradient(380px 380px at 120px 84%,var(--glow-b),transparent 72%),
             radial-gradient(300px 260px at 300px 48%,var(--glow-c),transparent 72%)}
.side{z-index:5}
.content{position:relative;z-index:1}

.side .rail{background:linear-gradient(180deg,var(--glass-rail-a),var(--glass-rail-b));
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:inset -1px 0 0 var(--glass-edge),inset 0 1px 0 rgba(255,255,255,.08)}
.side .panel{background:linear-gradient(180deg,var(--glass-panel-a),var(--glass-panel-b));
  -webkit-backdrop-filter:blur(28px) saturate(1.7);backdrop-filter:blur(28px) saturate(1.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.side .panel .nav a:hover:not(.on){background:color-mix(in srgb,var(--accent) 10%,transparent)}
.phead{border-bottom-color:color-mix(in srgb,var(--text) 10%,transparent)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .side .rail{background:linear-gradient(180deg,#181a2b,#101121)}.side .panel{background:var(--surface)}}
@media (max-width:1100px){.shell:not(.bare)::before{display:none}
  .side .rail{background:linear-gradient(180deg,#181a2b,#101121)}.side .panel{background:var(--surface)}}

/* =====================================================================================================
   SIDEBAR v4: deep solid rail + clean frosted panel, curved outer edge, soft 3D finish. (Overrides the glass experiment above.)
   ===================================================================================================== */
:root{--noise:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27180%27 height=%27180%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.85%27 numOctaves=%272%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E");
  --panel-bg:linear-gradient(180deg,rgba(255,255,255,.94),rgba(244,243,255,.88));
  --panel-sheen:radial-gradient(130% 42% at 0% 0%,rgba(255,255,255,.95),transparent 62%);
  --panel-rim:inset -1px 0 0 rgba(255,255,255,.9),inset 0 1px 0 #fff;
  --panel-cast:20px 0 44px -22px rgba(40,36,110,.38);
  --item-on:linear-gradient(180deg,#fff,rgba(236,238,255,.95));
  --item-on-sh:inset 0 1px 0 #fff,0 10px 18px -10px rgba(80,70,229,.55),0 0 0 1px rgba(80,70,229,.16)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --panel-bg:linear-gradient(180deg,rgba(30,33,58,.92),rgba(20,22,42,.88));
  --panel-sheen:radial-gradient(130% 42% at 0% 0%,rgba(167,139,250,.22),transparent 62%);
  --panel-rim:inset -1px 0 0 rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.1);
  --panel-cast:20px 0 44px -22px rgba(0,0,0,.8);
  --item-on:linear-gradient(180deg,rgba(139,140,248,.26),rgba(139,140,248,.12));
  --item-on-sh:inset 0 1px 0 rgba(255,255,255,.14),0 10px 18px -10px rgba(0,0,0,.7),0 0 0 1px rgba(139,140,248,.35)}}
:root[data-theme="dark"]{
  --panel-bg:linear-gradient(180deg,rgba(30,33,58,.92),rgba(20,22,42,.88));
  --panel-sheen:radial-gradient(130% 42% at 0% 0%,rgba(167,139,250,.22),transparent 62%);
  --panel-rim:inset -1px 0 0 rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.1);
  --panel-cast:20px 0 44px -22px rgba(0,0,0,.8);
  --item-on:linear-gradient(180deg,rgba(139,140,248,.26),rgba(139,140,248,.12));
  --item-on-sh:inset 0 1px 0 rgba(255,255,255,.14),0 10px 18px -10px rgba(0,0,0,.7),0 0 0 1px rgba(139,140,248,.35)}

.shell:not(.bare)::before{display:none}
.shell{grid-template-columns:318px minmax(0,1fr)}
.shell.bare{grid-template-columns:minmax(0,1fr)}
@media (max-width:1100px){.shell{grid-template-columns:minmax(0,1fr)}}  /* the sidebar is a drawer on small screens; the fixed column above must not apply there */
.side{filter:none;padding:0;gap:0}
.side::after{display:none}
.side::before{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:0 36px 36px 0;
  background-image:var(--noise);opacity:.07;mix-blend-mode:overlay}

.side .rail{-webkit-backdrop-filter:none;backdrop-filter:none;width:68px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.10),rgba(255,255,255,0) 38%,rgba(0,0,0,.30) 100%),
    radial-gradient(150% 34% at 20% 0%,rgba(124,58,237,.55),transparent 70%),
    linear-gradient(180deg,#1f2140 0%,#15162e 55%,#0e0f21 100%);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.10),inset -1px 0 0 rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12)}
.rbtn.rghost{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04));border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 4px 8px -2px rgba(0,0,0,.55)}
.rbtn.rghost:hover{background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 8px -2px rgba(0,0,0,.55),0 0 14px rgba(124,58,237,.5)}
.rbtn:not(.rghost){box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -3px 5px rgba(0,0,0,.18),0 6px 10px -3px rgba(0,0,0,.55)}
.rbtn.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 2px rgba(255,255,255,.85),0 0 22px color-mix(in srgb,var(--accent) 65%,transparent)}
.rbtn.rtool.on{background:linear-gradient(180deg,#7c70ff,var(--accent));box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -3px 5px rgba(0,0,0,.2),0 6px 14px -4px color-mix(in srgb,var(--accent) 80%,transparent)}
#rail-new{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -3px 5px rgba(0,0,0,.2),0 8px 16px -6px color-mix(in srgb,var(--accent) 80%,transparent)}

.side .panel{border-radius:0 36px 36px 0;border:0;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  background:var(--panel-sheen),var(--panel-bg);box-shadow:var(--panel-rim),var(--panel-cast)}
.phead{border-bottom-color:color-mix(in srgb,var(--text) 9%,transparent)}
.side .panel .nav a.on{background:var(--item-on);color:var(--accent);box-shadow:var(--item-on-sh)}
.side .panel .nav a.on::before{display:none}
.side .panel .nav a:hover:not(.on){background:color-mix(in srgb,var(--accent) 9%,transparent)}

/* =====================================================================================================
   TOP BAR: brand (landing only) | centred pill navigation | round icon buttons
   ===================================================================================================== */
.topbar{height:72px;padding:0 28px;gap:18px;background:var(--bg);display:flex;align-items:center}
.tbrand{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;flex:none}
.tbrand:hover{text-decoration:none}
.tbrand .logo{width:42px;height:42px;border-radius:50%}
.tbrand b{font-size:17px;letter-spacing:-.01em}
.tnav{flex:1;display:flex;justify-content:center;gap:8px;min-width:0;overflow-x:auto;scrollbar-width:none;padding:4px 2px}
.tnav::-webkit-scrollbar{display:none}
.tpill{display:inline-flex;align-items:center;white-space:nowrap;padding:10px 20px;border-radius:999px;font-size:13.5px;font-weight:550;
  color:var(--text);background:color-mix(in srgb,var(--text) 7%,transparent);text-decoration:none;transition:background .15s,color .15s,transform .15s}
.tpill:hover{background:color-mix(in srgb,var(--text) 13%,transparent);text-decoration:none}
.tpill.on{background:var(--text);color:var(--bg);font-weight:600}
.tpill .nbadge{margin-left:8px}
.ticons{display:flex;align-items:center;gap:10px;flex:none}
.tbtn{position:relative;width:42px;height:42px;border-radius:50%;border:0;display:grid;place-items:center;color:var(--text);cursor:pointer;
  background:color-mix(in srgb,var(--text) 7%,transparent);text-decoration:none;transition:background .15s,transform .15s}
.tbtn:hover{background:color-mix(in srgb,var(--text) 14%,transparent);text-decoration:none;transform:translateY(-1px)}
.tbtn .ico{color:currentColor}
.tbtn.credpill{width:auto;padding:0 14px;display:inline-flex;align-items:center;gap:5px;font-size:13.5px;font-weight:650;white-space:nowrap}
.tbtn.credpill .credl{font-weight:500;color:var(--muted);font-size:12.5px}
.tbtn.credpill.lowc{color:var(--warn)}
.impbar{position:sticky;top:0;z-index:80;background:#b45309;color:#fff;padding:9px 16px;font-size:13.5px;text-align:center}.impbar a{color:#fff;text-decoration:underline;margin-left:10px;font-weight:700}
.tbtn.on{background:color-mix(in srgb,var(--accent) 22%,transparent)}
@media (max-width:760px){.tbtn.credpill .credl{display:none}}
.tdot{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--accent);color:var(--on-accent);font-size:10.5px;font-weight:700;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--bg)}
.tdot[hidden]{display:none}
.tavatar{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:700;font-size:15px}
.tavatar:hover{background:linear-gradient(135deg,var(--accent),var(--accent2));filter:brightness(1.08)}
.umenu-wrap{position:relative}
.umenu{position:absolute;right:0;top:52px;min-width:230px;padding:8px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-lg);z-index:60}
.umenu .umail{padding:10px 12px 2px;font-weight:650;font-size:13.5px;word-break:break-all}
.umenu a{display:block;padding:9px 12px;border-radius:12px;color:var(--text);font-size:14px;text-decoration:none}
.umenu a:hover{background:var(--accent-soft);color:var(--accent)}
.umenu[hidden]{display:none}
@media (max-width:1100px){.topbar{padding:0 14px;gap:10px}.tnav{justify-content:flex-start}.ticons{gap:8px}.tbtn{width:38px;height:38px}}
@media (max-width:640px){.tbrand b{display:none}}

/* ---- top bar: transparent, blends into the page. A soft blur fades out downward so scrolled content dissolves under the pills. ---- */
.topbar{background:transparent;border-bottom:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;isolation:isolate}
.topbar::after{display:none}
.topbar::before{content:"";position:absolute;left:0;right:0;top:0;bottom:-34px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 88%,transparent) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 55%,transparent 100%);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 58%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 58%,transparent 100%)}
.tpill,.tbtn{background:color-mix(in srgb,var(--text) 8%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.tpill.on{background:var(--text)}
.tavatar{background:linear-gradient(135deg,var(--accent),var(--accent2))}
.tdot{box-shadow:0 0 0 2px color-mix(in srgb,var(--bg) 80%,transparent)}
@media (max-width:1560px){.tnav{gap:6px;justify-content:center}.tpill{padding:9px 14px;font-size:13px}.ticons{gap:8px}.tbtn{width:40px;height:40px}.topbar{gap:12px;padding:0 20px}}
@media (max-width:1180px){.tpill{padding:8px 12px;font-size:12.5px}.tnav{justify-content:flex-start;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}}

/* =====================================================================================================
   COLOUR THEMES. Indigo is the default (no attribute). Others are chosen from the account menu and set <html data-accent="...">.
   --th-a / --th-b : the two brand colours (deep, for light mode and for tiles)      --th-a-d / --th-b-d : lighter versions for dark mode
   --th-ink1..3    : the dark rail, from top to bottom
   ===================================================================================================== */
:root{--th-a:#5046e5;--th-b:#7c3aed;--th-ink1:#1b1d36;--th-ink2:#141528;--th-ink3:#0e0f1f}
:root[data-accent="ocean"]{--th-a:#0369a1;--th-b:#0891b2;--th-a-d:#38bdf8;--th-b-d:#22d3ee;--th-ink1:#12263a;--th-ink2:#0d1c2c;--th-ink3:#08121d}
:root[data-accent="emerald"]{--th-a:#047857;--th-b:#0d9488;--th-a-d:#34d399;--th-b-d:#2dd4bf;--th-ink1:#10291f;--th-ink2:#0b1f18;--th-ink3:#07140f}
:root[data-accent="sunset"]{--th-a:#ea580c;--th-b:#db2777;--th-a-d:#fb923c;--th-b-d:#f472b6;--th-ink1:#2b1a17;--th-ink2:#1f1210;--th-ink3:#150a09}
:root[data-accent="graphite"]{--th-a:#334155;--th-b:#475569;--th-a-d:#cbd5e1;--th-b-d:#94a3b8;--th-ink1:#24272c;--th-ink2:#1a1c20;--th-ink3:#111317}

:root[data-accent]{--accent:var(--th-a);--accent2:var(--th-b);--accent-soft:color-mix(in srgb,var(--th-a) 10%,#fff);--accent-line:color-mix(in srgb,var(--th-a) 32%,#fff);
  --ring:0 0 0 3px color-mix(in srgb,var(--th-a) 22%,transparent)}
@media (prefers-color-scheme:dark){:root[data-accent]:not([data-theme="light"]){--accent:var(--th-a-d);--accent2:var(--th-b-d);--on-accent:#0b0d12;
  --accent-soft:color-mix(in srgb,var(--th-a-d) 14%,transparent);--accent-line:color-mix(in srgb,var(--th-a-d) 40%,transparent);--ring:0 0 0 3px color-mix(in srgb,var(--th-a-d) 28%,transparent)}}
:root[data-accent][data-theme="dark"]{--accent:var(--th-a-d);--accent2:var(--th-b-d);--on-accent:#0b0d12;
  --accent-soft:color-mix(in srgb,var(--th-a-d) 14%,transparent);--accent-line:color-mix(in srgb,var(--th-a-d) 40%,transparent);--ring:0 0 0 3px color-mix(in srgb,var(--th-a-d) 28%,transparent)}

/* everything that used a fixed indigo now follows the theme */
.logo{background:linear-gradient(135deg,var(--th-a),var(--th-b))}
.avatar{background:linear-gradient(135deg,var(--th-a),var(--th-b))}
.auth .hero{background:radial-gradient(1200px 600px at 10% -10%,var(--th-b) 0%,transparent 55%),radial-gradient(900px 600px at 110% 110%,var(--th-a) 0%,transparent 55%),var(--th-ink2)}
.modgroup .modcard:nth-child(1){--tile-a:var(--th-a);--tile-b:var(--th-b)}
.modgroup .modcard:nth-child(2){--tile-a:var(--th-b);--tile-b:color-mix(in srgb,var(--th-a) 76%,#000)}
.modgroup .modcard:nth-child(3){--tile-a:color-mix(in srgb,var(--th-a) 76%,#000);--tile-b:var(--th-b)}
.modgroup + .modgroup .modcard:nth-child(1){--tile-a:var(--th-a);--tile-b:color-mix(in srgb,var(--th-a) 50%,var(--th-b))}
.modgroup + .modgroup .modcard:nth-child(2){--tile-a:color-mix(in srgb,var(--th-b) 85%,#000);--tile-b:var(--th-b)}
.modgroup + .modgroup .modcard:nth-child(3){--tile-a:color-mix(in srgb,var(--th-a) 66%,#000);--tile-b:var(--th-a)}
.phead::before{color:var(--accent)}

/* =====================================================================================================
   MATT FINISH: flat tones, no glossy highlights or glow. Depth comes only from soft, diffuse shadows and a fine grain.
   ===================================================================================================== */
.side .rail{background:linear-gradient(180deg,var(--th-ink1) 0%,var(--th-ink2) 58%,var(--th-ink3) 100%);
  box-shadow:inset -1px 0 0 rgba(0,0,0,.4)}
.side::before{opacity:.10}
.rlogo .logo{box-shadow:0 2px 6px rgba(0,0,0,.35)}
.rbtn{transition:background .15s,box-shadow .15s,transform .15s}
.rbtn.rghost{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.05);box-shadow:none}
.rbtn.rghost:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.12);box-shadow:none}
.rbtn:not(.rghost){box-shadow:0 2px 5px rgba(0,0,0,.28)}
.rbtn.on{box-shadow:0 0 0 2px rgba(255,255,255,.78)}
.rbtn.on::before{background:var(--accent);box-shadow:none}
.rbtn.rtool.on{background:var(--accent);color:var(--on-accent);border-color:transparent;box-shadow:none}
#rail-new{background:var(--accent);color:var(--on-accent);box-shadow:0 2px 5px rgba(0,0,0,.28)}
#rail-new:hover{filter:brightness(1.08)}

.side .panel{background:var(--panel-bg);box-shadow:var(--panel-cast)}
.side .panel .nav a.on{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.side .panel .nav a:hover:not(.on){background:color-mix(in srgb,var(--text) 6%,transparent)}
.btn.p{box-shadow:0 4px 12px -6px color-mix(in srgb,var(--accent) 60%,transparent)}
.btn.p:hover{box-shadow:0 6px 14px -6px color-mix(in srgb,var(--accent) 70%,transparent)}

/* colour-theme picker inside the account menu */
.umenu .uthemes{padding:6px 12px 10px;border-top:1px solid var(--line);margin-top:6px}
.umenu .uthemes .ut{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:6px 0 8px}
.umenu .uthemes .sw{display:flex;gap:10px;flex-wrap:wrap}
.umenu .swatch{width:28px;height:28px;border-radius:50%;border:0;padding:0;cursor:pointer;position:relative;box-shadow:0 0 0 1px rgba(0,0,0,.12);transition:transform .15s}
.umenu .swatch:hover{transform:scale(1.12)}
.umenu .swatch.on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--text)}
/* dark panel follows the theme tint instead of a fixed navy */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .side .panel{background:linear-gradient(180deg,color-mix(in srgb,var(--th-ink1) 90%,#fff),color-mix(in srgb,var(--th-ink2) 92%,#fff))}}
:root[data-theme="dark"] .side .panel{background:linear-gradient(180deg,color-mix(in srgb,var(--th-ink1) 90%,#fff),color-mix(in srgb,var(--th-ink2) 92%,#fff))}

/* ---- "Business" theme (the default): clean white and neutral grey with a confident corporate blue, slate-blue rail ---- */
:root[data-accent="business"]{--th-a:#226db4;--th-b:#3a86d4;--th-a-d:#5aa9f5;--th-b-d:#82bdf7;--th-ink1:#1e2a38;--th-ink2:#162029;--th-ink3:#0f1720}
:root[data-accent="indigo"]{--th-a:#5046e5;--th-b:#7c3aed;--th-a-d:#8b8cf8;--th-b-d:#a78bfa;--th-ink1:#1b1d36;--th-ink2:#141528;--th-ink3:#0e0f1f}
/* calmer page backdrop for the business look: a whisper of the brand blue, nothing more */
:root[data-accent="business"] body{background:radial-gradient(900px 480px at 8% -8%,color-mix(in srgb,var(--accent) 6%,transparent),transparent 70%),var(--bg);background-attachment:fixed}

/* landing top bar: project names replace the module pills once the Modules section is reached */
.tprojects{display:none;align-items:center}
.topbar.swap .tnav:not(.tprojects){display:none}
.topbar.swap .tprojects{display:flex;animation:tfade .25s ease}
@keyframes tfade{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.tlabel{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);align-self:center;white-space:nowrap;margin-right:6px}
.tpill .tdotc{width:8px;height:8px;border-radius:50%;margin-right:9px;flex:none}
.tpill .tname{max-width:20ch;overflow:hidden;text-overflow:ellipsis}

/* editor side panel: 14 tabs as an even grid of chips (the pill track only suits a single row) */
#stabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;width:auto;max-width:none;padding:6px;border-radius:20px;background:var(--surface2);overflow:visible;margin-bottom:14px}
#stabs a{display:block;text-align:center;padding:8px 2px;font-size:12.5px;border-radius:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#stabs a.on{background:var(--surface);color:var(--accent);box-shadow:var(--lift);font-weight:650}
#stabs a:not(.on):hover{background:color-mix(in srgb,var(--text) 6%,transparent)}
@media (max-width:520px){#stabs{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ed-side{scrollbar-width:none;-ms-overflow-style:none;padding-right:0}
.ed-side::-webkit-scrollbar{display:none;width:0}

/* =====================================================================================================
   LIME theme: electric lime + near-black. Lime itself is too light for text on white, so in light mode the *accent* (text, buttons)
   is a deep olive-black with lime lettering, and lime is used for highlights, tiles and selected states. Dark mode uses lime directly.
   ===================================================================================================== */
:root[data-accent="lime"]{--th-a:#d9ff2e;--th-b:#bfe81a;--th-a-d:#d9ff2e;--th-b-d:#c6f21f;--th-ink1:#20211b;--th-ink2:#171813;--th-ink3:#0f100c;
  --accent:#1a1b17;--accent2:#3a4a0c;--on-accent:#d9ff2e;--accent-soft:color-mix(in srgb,#d9ff2e 34%,#fff);--accent-line:color-mix(in srgb,#b5d515 75%,#fff);
  --ring:0 0 0 3px rgba(185,220,20,.38);--bg:#f5f7ec}
@media (prefers-color-scheme:dark){:root[data-accent="lime"]:not([data-theme="light"]){--accent:#d9ff2e;--accent2:#c6f21f;--on-accent:#12150a;
  --accent-soft:rgba(217,255,46,.14);--accent-line:rgba(217,255,46,.42);--ring:0 0 0 3px rgba(217,255,46,.28);
  --bg:#0e0f0b;--surface:#161711;--surface2:#1b1c16;--surface3:#22231b;--line:#272820;--line2:#34362b}}
:root[data-accent="lime"][data-theme="dark"]{--accent:#d9ff2e;--accent2:#c6f21f;--on-accent:#12150a;
  --accent-soft:rgba(217,255,46,.14);--accent-line:rgba(217,255,46,.42);--ring:0 0 0 3px rgba(217,255,46,.28);
  --bg:#0e0f0b;--surface:#161711;--surface2:#1b1c16;--surface3:#22231b;--line:#272820;--line2:#34362b}

/* buttons, logo, avatar: flat, like the reference's pills */
:root[data-accent="lime"] .btn.p{background:var(--accent);color:var(--on-accent);border-color:transparent;box-shadow:none}
:root[data-accent="lime"] .btn.p:hover{background:var(--accent);filter:brightness(1.12);box-shadow:none}
:root[data-accent="lime"] .btn:not(.p):hover{background:var(--accent-soft);border-color:var(--accent-line);box-shadow:none}
:root[data-accent="lime"] .logo{background:#d9ff2e;color:#14180a;box-shadow:none}
:root[data-accent="lime"] .tavatar,:root[data-accent="lime"] .avatar{background:#d9ff2e;color:#14180a}
:root[data-accent="lime"] .tavatar:hover{background:#d9ff2e;filter:brightness(.95)}
:root[data-accent="lime"] .tpill.on{background:#1a1b17;color:#d9ff2e}
:root[data-accent="lime"] .fnext{background:#1a1b17;color:#d9ff2e}
:root[data-accent="lime"] .fstepcard.next{border-color:var(--accent);box-shadow:0 12px 28px -16px color-mix(in srgb,var(--accent) 55%,transparent)}
:root[data-accent="lime"] .fstepcard.next .fnum{background:#1a1b17;color:#d9ff2e}
@media (prefers-color-scheme:dark){:root[data-accent="lime"]:not([data-theme="light"]) .tpill.on{background:#d9ff2e;color:#14180a}
  :root[data-accent="lime"]:not([data-theme="light"]) .fnext,:root[data-accent="lime"]:not([data-theme="light"]) .fstepcard.next .fnum{background:#d9ff2e;color:#14180a}}
:root[data-accent="lime"][data-theme="dark"] .tpill.on{background:#d9ff2e;color:#14180a}
:root[data-accent="lime"][data-theme="dark"] .fnext,:root[data-accent="lime"][data-theme="dark"] .fstepcard.next .fnum{background:#d9ff2e;color:#14180a}

/* rail: near-black with lime highlights */
:root[data-accent="lime"] .rbtn.rtool.on,:root[data-accent="lime"] #rail-new{background:#d9ff2e;color:#14180a}
:root[data-accent="lime"] .rbtn.on::before{background:#d9ff2e}
:root[data-accent="lime"] .rbtn.rghost:hover{border-color:rgba(217,255,46,.45)}

/* module tiles: alternate lime and black, as in the reference */
:root[data-accent="lime"] .modcard{--tile-fg:#14180a}
:root[data-accent="lime"] .modcard,:root[data-accent="lime"] .modcard b,:root[data-accent="lime"] .modcard .muted{color:var(--tile-fg)}
:root[data-accent="lime"] .modcard .muted{opacity:.82}
:root[data-accent="lime"] .modcard .modbig{color:var(--tile-fg);opacity:.14}
:root[data-accent="lime"] .modcard .modn{background:color-mix(in srgb,var(--tile-fg) 14%,transparent);color:var(--tile-fg)}
:root[data-accent="lime"] .modgroup .modcard:nth-child(odd),:root[data-accent="lime"] .modgroup + .modgroup .modcard:nth-child(even){--tile-a:#d9ff2e;--tile-b:#bfe81a;--tile-fg:#14180a}
:root[data-accent="lime"] .modgroup .modcard:nth-child(even),:root[data-accent="lime"] .modgroup + .modgroup .modcard:nth-child(odd){--tile-a:#1c1d18;--tile-b:#2d2e26;--tile-fg:#d9ff2e}

/* light panel tint follows the active theme (it was a fixed lavender) */
:root{--panel-bg:linear-gradient(180deg,rgba(255,255,255,.95),color-mix(in srgb,var(--accent-soft) 60%,rgba(255,255,255,.9)))}

/* =====================================================================================================
   MORE CHARACTER: welcome banner, ticker strip, section motif, illustrated empty states, card watermarks
   ===================================================================================================== */
:root{--hero-bg:linear-gradient(135deg,var(--th-a),var(--th-b));--hero-fg:#fff;--hero-wave:rgba(0,0,0,.22);--hero-btn-bg:#fff;--hero-btn-fg:var(--th-a);
  --tick-bg:var(--th-ink2);--tick-fg:color-mix(in srgb,var(--th-b-d,var(--th-b)) 85%,#fff)}
:root[data-accent="lime"]{--hero-bg:#d9ff2e;--hero-fg:#14180a;--hero-wave:#1c1d18;--hero-btn-bg:#14180a;--hero-btn-fg:#d9ff2e;--tick-bg:#14180a;--tick-fg:#d9ff2e}

.hero{position:relative;overflow:hidden;border-radius:34px 34px 0 0;padding:30px 40px 82px;color:var(--hero-fg);background:var(--hero-bg)}
.hero-motif{display:flex;align-items:center;gap:10px;margin-bottom:26px}
.hero-motif i{width:16px;height:16px;border-radius:50%;background:currentColor;flex:none}
.hero-motif span{flex:1;height:1px;background:currentColor;opacity:.45;margin-left:6px}
.hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;position:relative;z-index:1}
.hero h1{font-size:clamp(28px,3.6vw,44px);font-weight:800;letter-spacing:-.025em;line-height:1.1;color:inherit}
.hero p{max-width:58ch;margin:10px 0 0;opacity:.88;font-size:15px}
.hpills{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.hpill{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:999px;background:rgba(255,255,255,.94);color:#14180a;font-size:13.5px;font-weight:550;border:1px solid rgba(0,0,0,.1);text-decoration:none}
.hpill b{font-weight:800}
a.hpill:hover{text-decoration:none;background:#fff;box-shadow:0 6px 16px -8px rgba(0,0,0,.4)}
.hero .btn.p{background:var(--hero-btn-bg);color:var(--hero-btn-fg);box-shadow:0 10px 22px -10px rgba(0,0,0,.5);height:46px;padding:0 26px;font-size:15px}
.hero .btn.p:hover{background:var(--hero-btn-bg);filter:brightness(1.06)}
.hero .wave{position:absolute;left:0;bottom:-1px;width:100%;height:56px;fill:var(--hero-wave)}
.ticker{overflow:hidden;background:var(--tick-bg);color:var(--tick-fg);border-radius:0 0 34px 34px;margin:0 0 34px;padding:14px 0}
.ttrack{display:inline-flex;align-items:center;gap:30px;white-space:nowrap;animation:tick 34s linear infinite;padding-left:30px}
.ttrack span{font-size:26px;font-weight:900;letter-spacing:.03em;text-transform:uppercase}
.ttrack i{font-style:normal;font-size:20px;opacity:.9}
@keyframes tick{to{transform:translateX(-50%)}}
@media (max-width:700px){.hero{padding:22px 22px 70px;border-radius:26px 26px 0 0}.ticker{border-radius:0 0 26px 26px}.ttrack span{font-size:20px}}

/* page headers: the two-dots-and-a-line motif above each module page title */
.main>.top::before{content:"";flex:0 0 100%;height:12px;margin-bottom:6px;
  background:radial-gradient(circle at 6px 6px,var(--text) 5px,transparent 5.5px) 0 0/12px 12px no-repeat,
             radial-gradient(circle at 6px 6px,var(--text) 5px,transparent 5.5px) 22px 0/12px 12px no-repeat,
             linear-gradient(var(--line2),var(--line2)) 46px 50%/calc(100% - 46px) 1px no-repeat;opacity:.55}

/* illustrated empty state */
.emptyart{display:flex;flex-direction:column;align-items:center;text-align:center;padding:34px 20px 30px;gap:6px}
.eart{width:116px;height:116px;margin-bottom:6px}
.eart .e1{fill:color-mix(in srgb,var(--accent) 7%,transparent);stroke:color-mix(in srgb,var(--accent) 22%,transparent);stroke-width:1.5;stroke-dasharray:3 6}
.eart .e2{fill:color-mix(in srgb,var(--accent) 11%,transparent)}
.eart .e3{fill:color-mix(in srgb,var(--accent) 16%,transparent)}
.eart .e4{fill:var(--accent)}
:root[data-accent="lime"] .eart .e2{fill:rgba(217,255,46,.45)}
:root[data-accent="lime"] .eart .e3{fill:#d9ff2e}
:root[data-accent="lime"] .eart .e4{fill:#14180a}
@media (prefers-color-scheme:dark){:root[data-accent="lime"]:not([data-theme="light"]) .eart .e4{fill:#14180a}}
.emptyart .et{font-size:17px;font-weight:700;letter-spacing:-.01em}
.emptyart .ed{color:var(--muted);max-width:52ch;font-size:13.5px}

/* project cards: faint sparkle watermark so they don't feel bare */
.pcard{position:relative;overflow:hidden}
.pcard>*{position:relative;z-index:1}

/* the wave and the ticker below it are one shape: same colour, tiny overlap so no seam shows */
.hero .wave{fill:var(--tick-bg);bottom:-2px}
.ticker{margin-top:-1px;position:relative}

/* ---- Lime theme: status colours that belong to it (olive green / golden amber / rose) instead of the teal + brown-orange used elsewhere ---- */
:root[data-accent="lime"]{--pass:#3f6212;--pass-soft:#ecfccb;--warn:#a16207;--warn-soft:#fef6d0;--fail:#be123c;--fail-soft:#ffe4e9;
  --ch-pass:#84cc16;--ch-warn:#facc15;--ch-fail:#f43f5e;--ch-warn-text:#a16207;--ch-fail-text:#be123c}
@media (prefers-color-scheme:dark){:root[data-accent="lime"]:not([data-theme="light"]){--pass:#bef264;--pass-soft:rgba(190,242,100,.14);--warn:#fcd34d;--warn-soft:rgba(252,211,77,.14);--fail:#fb7185;--fail-soft:rgba(251,113,133,.14);
  --ch-pass:#a3e635;--ch-warn:#fde047;--ch-fail:#fb7185;--ch-warn-text:#fcd34d;--ch-fail-text:#fb7185}}
:root[data-accent="lime"][data-theme="dark"]{--pass:#bef264;--pass-soft:rgba(190,242,100,.14);--warn:#fcd34d;--warn-soft:rgba(252,211,77,.14);--fail:#fb7185;--fail-soft:rgba(251,113,133,.14);
  --ch-pass:#a3e635;--ch-warn:#fde047;--ch-fail:#fb7185;--ch-warn-text:#fcd34d;--ch-fail-text:#fb7185}

/* stat-card icon badges and project avatars: solid lime with a black glyph, not a faint tint */
:root[data-accent="lime"] .kpi .l .ico,:root[data-accent="lime"] .fav{background:#d9ff2e;color:#14180a;border-color:transparent}
:root[data-accent="lime"] .kpi .l .ico{padding:6px;border-radius:10px}
/* the "Run" chips in the Optimization Center: clearly clickable instead of ghostly */
:root[data-accent="lime"] .ocell.none{border-color:color-mix(in srgb,var(--text) 25%,transparent);color:var(--text2)}
:root[data-accent="lime"] .ocell.none:hover{background:#d9ff2e;border-color:#14180a;color:#14180a}
:root[data-accent="lime"] .ocell.run{background:#1a1b17;color:#d9ff2e;border-color:transparent}

/* ===== Neon-on-black themes, generated from Lime: cyan, magenta, flame, mint ===== */
/* --- cyan --- */

/* =====================================================================================================
   LIME theme: electric lime + near-black. Lime itself is too light for text on white, so in light mode the *accent* (text, buttons)
   is a deep olive-black with lime lettering, and lime is used for highlights, tiles and selected states. Dark mode uses lime directly.
   ===================================================================================================== */
:root[data-accent="cyan"]{--th-a:#22e3ff;--th-b:#12bfe0;--th-a-d:#22e3ff;--th-b-d:#5eeaff;--th-ink1:#0f2328;--th-ink2:#0a1a1e;--th-ink3:#061013;
  --accent:#0a1d22;--accent2:#0a5566;--on-accent:#22e3ff;--accent-soft:color-mix(in srgb,#22e3ff 34%,#fff);--accent-line:color-mix(in srgb,#12bfe0 75%,#fff);
  --ring:0 0 0 3px rgba(18,191,224,.38);--bg:#f1fafc}
@media (prefers-color-scheme:dark){:root[data-accent="cyan"]:not([data-theme="light"]){--accent:#22e3ff;--accent2:#5eeaff;--on-accent:#04181d;
  --accent-soft:rgba(34,227,255,.14);--accent-line:rgba(34,227,255,.42);--ring:0 0 0 3px rgba(34,227,255,.28);
  --bg:#0a1012;--surface:#11191c;--surface2:#162023;--surface3:#1c292d;--line:#1f2c30;--line2:#2b3b40}}
:root[data-accent="cyan"][data-theme="dark"]{--accent:#22e3ff;--accent2:#5eeaff;--on-accent:#04181d;
  --accent-soft:rgba(34,227,255,.14);--accent-line:rgba(34,227,255,.42);--ring:0 0 0 3px rgba(34,227,255,.28);
  --bg:#0a1012;--surface:#11191c;--surface2:#162023;--surface3:#1c292d;--line:#1f2c30;--line2:#2b3b40}

/* buttons, logo, avatar: flat, like the reference's pills */
:root[data-accent="cyan"] .btn.p{background:var(--accent);color:var(--on-accent);border-color:transparent;box-shadow:none}
:root[data-accent="cyan"] .btn.p:hover{background:var(--accent);filter:brightness(1.12);box-shadow:none}
:root[data-accent="cyan"] .btn:not(.p):hover{background:var(--accent-soft);border-color:var(--accent-line);box-shadow:none}
:root[data-accent="cyan"] .logo{background:#22e3ff;color:#06232a;box-shadow:none}
:root[data-accent="cyan"] .tavatar,:root[data-accent="cyan"] .avatar{background:#22e3ff;color:#06232a}
:root[data-accent="cyan"] .tavatar:hover{background:#22e3ff;filter:brightness(.95)}
:root[data-accent="cyan"] .tpill.on{background:#0a1d22;color:#22e3ff}
:root[data-accent="cyan"] .fnext{background:#0a1d22;color:#22e3ff}
:root[data-accent="cyan"] .fstepcard.next{border-color:var(--accent);box-shadow:0 12px 28px -16px color-mix(in srgb,var(--accent) 55%,transparent)}
:root[data-accent="cyan"] .fstepcard.next .fnum{background:#0a1d22;color:#22e3ff}
@media (prefers-color-scheme:dark){:root[data-accent="cyan"]:not([data-theme="light"]) .tpill.on{background:#22e3ff;color:#06232a}
  :root[data-accent="cyan"]:not([data-theme="light"]) .fnext,:root[data-accent="cyan"]:not([data-theme="light"]) .fstepcard.next .fnum{background:#22e3ff;color:#06232a}}
:root[data-accent="cyan"][data-theme="dark"] .tpill.on{background:#22e3ff;color:#06232a}
:root[data-accent="cyan"][data-theme="dark"] .fnext,:root[data-accent="cyan"][data-theme="dark"] .fstepcard.next .fnum{background:#22e3ff;color:#06232a}

/* rail: near-black with lime highlights */
:root[data-accent="cyan"] .rbtn.rtool.on,:root[data-accent="cyan"] #rail-new{background:#22e3ff;color:#06232a}
:root[data-accent="cyan"] .rbtn.on::before{background:#22e3ff}
:root[data-accent="cyan"] .rbtn.rghost:hover{border-color:rgba(34,227,255,.45)}

/* module tiles: alternate lime and black, as in the reference */
:root[data-accent="cyan"] .modcard{--tile-fg:#06232a}
:root[data-accent="cyan"] .modcard,:root[data-accent="cyan"] .modcard b,:root[data-accent="cyan"] .modcard .muted{color:var(--tile-fg)}
:root[data-accent="cyan"] .modcard .muted{opacity:.82}
:root[data-accent="cyan"] .modcard .modbig{color:var(--tile-fg);opacity:.14}
:root[data-accent="cyan"] .modcard .modn{background:color-mix(in srgb,var(--tile-fg) 14%,transparent);color:var(--tile-fg)}
:root[data-accent="cyan"] .modgroup .modcard:nth-child(odd),:root[data-accent="cyan"] .modgroup + .modgroup .modcard:nth-child(even){--tile-a:#22e3ff;--tile-b:#12bfe0;--tile-fg:#06232a}
:root[data-accent="cyan"] .modgroup .modcard:nth-child(even),:root[data-accent="cyan"] .modgroup + .modgroup .modcard:nth-child(odd){--tile-a:#0a1d22;--tile-b:#14313a;--tile-fg:#22e3ff}

:root[data-accent="cyan"]{--hero-bg:#22e3ff;--hero-fg:#06232a;--hero-wave:#0a1d22;--hero-btn-bg:#06232a;--hero-btn-fg:#22e3ff;--tick-bg:#06232a;--tick-fg:#22e3ff}
:root[data-accent="cyan"] .eart .e2{fill:rgba(34,227,255,.45)}
:root[data-accent="cyan"] .eart .e3{fill:#22e3ff}
:root[data-accent="cyan"] .eart .e4{fill:#06232a}
@media (prefers-color-scheme:dark){:root[data-accent="cyan"]:not([data-theme="light"]) .eart .e4{fill:#06232a}}
/* stat-card icon badges and project avatars: solid lime with a black glyph, not a faint tint */
:root[data-accent="cyan"] .kpi .l .ico,:root[data-accent="cyan"] .fav{background:#22e3ff;color:#06232a;border-color:transparent}
:root[data-accent="cyan"] .kpi .l .ico{padding:6px;border-radius:10px}
/* the "Run" chips in the Optimization Center: clearly clickable instead of ghostly */
:root[data-accent="cyan"] .ocell.none{border-color:color-mix(in srgb,var(--text) 25%,transparent);color:var(--text2)}
:root[data-accent="cyan"] .ocell.none:hover{background:#22e3ff;border-color:#06232a;color:#06232a}
:root[data-accent="cyan"] .ocell.run{background:#0a1d22;color:#22e3ff;border-color:transparent}

/* --- magenta --- */

/* =====================================================================================================
   LIME theme: electric lime + near-black. Lime itself is too light for text on white, so in light mode the *accent* (text, buttons)
   is a deep olive-black with lime lettering, and lime is used for highlights, tiles and selected states. Dark mode uses lime directly.
   ===================================================================================================== */
:root[data-accent="magenta"]{--th-a:#ff3fa4;--th-b:#e01f87;--th-a-d:#ff3fa4;--th-b-d:#ff6cba;--th-ink1:#2a1220;--th-ink2:#1d0c16;--th-ink3:#12060e;
  --accent:#1f0a15;--accent2:#86104d;--on-accent:#ff3fa4;--accent-soft:color-mix(in srgb,#ff3fa4 34%,#fff);--accent-line:color-mix(in srgb,#e01f87 75%,#fff);
  --ring:0 0 0 3px rgba(224,31,135,.38);--bg:#fdf2f8}
@media (prefers-color-scheme:dark){:root[data-accent="magenta"]:not([data-theme="light"]){--accent:#ff3fa4;--accent2:#ff6cba;--on-accent:#22040f;
  --accent-soft:rgba(255,63,164,.14);--accent-line:rgba(255,63,164,.42);--ring:0 0 0 3px rgba(255,63,164,.28);
  --bg:#110a0e;--surface:#1a1017;--surface2:#21151d;--surface3:#2a1c25;--line:#2e1e28;--line2:#3e2a36}}
:root[data-accent="magenta"][data-theme="dark"]{--accent:#ff3fa4;--accent2:#ff6cba;--on-accent:#22040f;
  --accent-soft:rgba(255,63,164,.14);--accent-line:rgba(255,63,164,.42);--ring:0 0 0 3px rgba(255,63,164,.28);
  --bg:#110a0e;--surface:#1a1017;--surface2:#21151d;--surface3:#2a1c25;--line:#2e1e28;--line2:#3e2a36}

/* buttons, logo, avatar: flat, like the reference's pills */
:root[data-accent="magenta"] .btn.p{background:var(--accent);color:var(--on-accent);border-color:transparent;box-shadow:none}
:root[data-accent="magenta"] .btn.p:hover{background:var(--accent);filter:brightness(1.12);box-shadow:none}
:root[data-accent="magenta"] .btn:not(.p):hover{background:var(--accent-soft);border-color:var(--accent-line);box-shadow:none}
:root[data-accent="magenta"] .logo{background:#ff3fa4;color:#2a0618;box-shadow:none}
:root[data-accent="magenta"] .tavatar,:root[data-accent="magenta"] .avatar{background:#ff3fa4;color:#2a0618}
:root[data-accent="magenta"] .tavatar:hover{background:#ff3fa4;filter:brightness(.95)}
:root[data-accent="magenta"] .tpill.on{background:#1f0a15;color:#ff3fa4}
:root[data-accent="magenta"] .fnext{background:#1f0a15;color:#ff3fa4}
:root[data-accent="magenta"] .fstepcard.next{border-color:var(--accent);box-shadow:0 12px 28px -16px color-mix(in srgb,var(--accent) 55%,transparent)}
:root[data-accent="magenta"] .fstepcard.next .fnum{background:#1f0a15;color:#ff3fa4}
@media (prefers-color-scheme:dark){:root[data-accent="magenta"]:not([data-theme="light"]) .tpill.on{background:#ff3fa4;color:#2a0618}
  :root[data-accent="magenta"]:not([data-theme="light"]) .fnext,:root[data-accent="magenta"]:not([data-theme="light"]) .fstepcard.next .fnum{background:#ff3fa4;color:#2a0618}}
:root[data-accent="magenta"][data-theme="dark"] .tpill.on{background:#ff3fa4;color:#2a0618}
:root[data-accent="magenta"][data-theme="dark"] .fnext,:root[data-accent="magenta"][data-theme="dark"] .fstepcard.next .fnum{background:#ff3fa4;color:#2a0618}

/* rail: near-black with lime highlights */
:root[data-accent="magenta"] .rbtn.rtool.on,:root[data-accent="magenta"] #rail-new{background:#ff3fa4;color:#2a0618}
:root[data-accent="magenta"] .rbtn.on::before{background:#ff3fa4}
:root[data-accent="magenta"] .rbtn.rghost:hover{border-color:rgba(255,63,164,.45)}

/* module tiles: alternate lime and black, as in the reference */
:root[data-accent="magenta"] .modcard{--tile-fg:#2a0618}
:root[data-accent="magenta"] .modcard,:root[data-accent="magenta"] .modcard b,:root[data-accent="magenta"] .modcard .muted{color:var(--tile-fg)}
:root[data-accent="magenta"] .modcard .muted{opacity:.82}
:root[data-accent="magenta"] .modcard .modbig{color:var(--tile-fg);opacity:.14}
:root[data-accent="magenta"] .modcard .modn{background:color-mix(in srgb,var(--tile-fg) 14%,transparent);color:var(--tile-fg)}
:root[data-accent="magenta"] .modgroup .modcard:nth-child(odd),:root[data-accent="magenta"] .modgroup + .modgroup .modcard:nth-child(even){--tile-a:#ff3fa4;--tile-b:#e01f87;--tile-fg:#2a0618}
:root[data-accent="magenta"] .modgroup .modcard:nth-child(even),:root[data-accent="magenta"] .modgroup + .modgroup .modcard:nth-child(odd){--tile-a:#1f0a15;--tile-b:#321424;--tile-fg:#ff3fa4}

:root[data-accent="magenta"]{--hero-bg:#ff3fa4;--hero-fg:#2a0618;--hero-wave:#1f0a15;--hero-btn-bg:#2a0618;--hero-btn-fg:#ff3fa4;--tick-bg:#2a0618;--tick-fg:#ff3fa4}
:root[data-accent="magenta"] .eart .e2{fill:rgba(255,63,164,.45)}
:root[data-accent="magenta"] .eart .e3{fill:#ff3fa4}
:root[data-accent="magenta"] .eart .e4{fill:#2a0618}
@media (prefers-color-scheme:dark){:root[data-accent="magenta"]:not([data-theme="light"]) .eart .e4{fill:#2a0618}}
/* stat-card icon badges and project avatars: solid lime with a black glyph, not a faint tint */
:root[data-accent="magenta"] .kpi .l .ico,:root[data-accent="magenta"] .fav{background:#ff3fa4;color:#2a0618;border-color:transparent}
:root[data-accent="magenta"] .kpi .l .ico{padding:6px;border-radius:10px}
/* the "Run" chips in the Optimization Center: clearly clickable instead of ghostly */
:root[data-accent="magenta"] .ocell.none{border-color:color-mix(in srgb,var(--text) 25%,transparent);color:var(--text2)}
:root[data-accent="magenta"] .ocell.none:hover{background:#ff3fa4;border-color:#2a0618;color:#2a0618}
:root[data-accent="magenta"] .ocell.run{background:#1f0a15;color:#ff3fa4;border-color:transparent}

/* --- flame --- */

/* =====================================================================================================
   LIME theme: electric lime + near-black. Lime itself is too light for text on white, so in light mode the *accent* (text, buttons)
   is a deep olive-black with lime lettering, and lime is used for highlights, tiles and selected states. Dark mode uses lime directly.
   ===================================================================================================== */
:root[data-accent="flame"]{--th-a:#ff7a1a;--th-b:#e85d04;--th-a-d:#ff7a1a;--th-b-d:#ff9a4d;--th-ink1:#2b1a10;--th-ink2:#1f120a;--th-ink3:#140b06;
  --accent:#20150e;--accent2:#8f3a05;--on-accent:#ff7a1a;--accent-soft:color-mix(in srgb,#ff7a1a 34%,#fff);--accent-line:color-mix(in srgb,#e85d04 75%,#fff);
  --ring:0 0 0 3px rgba(232,93,4,.38);--bg:#fdf5ee}
@media (prefers-color-scheme:dark){:root[data-accent="flame"]:not([data-theme="light"]){--accent:#ff7a1a;--accent2:#ff9a4d;--on-accent:#200d02;
  --accent-soft:rgba(255,122,26,.14);--accent-line:rgba(255,122,26,.42);--ring:0 0 0 3px rgba(255,122,26,.28);
  --bg:#110c08;--surface:#1a1410;--surface2:#211a14;--surface3:#2a221b;--line:#2d241c;--line2:#3d3227}}
:root[data-accent="flame"][data-theme="dark"]{--accent:#ff7a1a;--accent2:#ff9a4d;--on-accent:#200d02;
  --accent-soft:rgba(255,122,26,.14);--accent-line:rgba(255,122,26,.42);--ring:0 0 0 3px rgba(255,122,26,.28);
  --bg:#110c08;--surface:#1a1410;--surface2:#211a14;--surface3:#2a221b;--line:#2d241c;--line2:#3d3227}

/* buttons, logo, avatar: flat, like the reference's pills */
:root[data-accent="flame"] .btn.p{background:var(--accent);color:var(--on-accent);border-color:transparent;box-shadow:none}
:root[data-accent="flame"] .btn.p:hover{background:var(--accent);filter:brightness(1.12);box-shadow:none}
:root[data-accent="flame"] .btn:not(.p):hover{background:var(--accent-soft);border-color:var(--accent-line);box-shadow:none}
:root[data-accent="flame"] .logo{background:#ff7a1a;color:#2a1203;box-shadow:none}
:root[data-accent="flame"] .tavatar,:root[data-accent="flame"] .avatar{background:#ff7a1a;color:#2a1203}
:root[data-accent="flame"] .tavatar:hover{background:#ff7a1a;filter:brightness(.95)}
:root[data-accent="flame"] .tpill.on{background:#20150e;color:#ff7a1a}
:root[data-accent="flame"] .fnext{background:#20150e;color:#ff7a1a}
:root[data-accent="flame"] .fstepcard.next{border-color:var(--accent);box-shadow:0 12px 28px -16px color-mix(in srgb,var(--accent) 55%,transparent)}
:root[data-accent="flame"] .fstepcard.next .fnum{background:#20150e;color:#ff7a1a}
@media (prefers-color-scheme:dark){:root[data-accent="flame"]:not([data-theme="light"]) .tpill.on{background:#ff7a1a;color:#2a1203}
  :root[data-accent="flame"]:not([data-theme="light"]) .fnext,:root[data-accent="flame"]:not([data-theme="light"]) .fstepcard.next .fnum{background:#ff7a1a;color:#2a1203}}
:root[data-accent="flame"][data-theme="dark"] .tpill.on{background:#ff7a1a;color:#2a1203}
:root[data-accent="flame"][data-theme="dark"] .fnext,:root[data-accent="flame"][data-theme="dark"] .fstepcard.next .fnum{background:#ff7a1a;color:#2a1203}

/* rail: near-black with lime highlights */
:root[data-accent="flame"] .rbtn.rtool.on,:root[data-accent="flame"] #rail-new{background:#ff7a1a;color:#2a1203}
:root[data-accent="flame"] .rbtn.on::before{background:#ff7a1a}
:root[data-accent="flame"] .rbtn.rghost:hover{border-color:rgba(255,122,26,.45)}

/* module tiles: alternate lime and black, as in the reference */
:root[data-accent="flame"] .modcard{--tile-fg:#2a1203}
:root[data-accent="flame"] .modcard,:root[data-accent="flame"] .modcard b,:root[data-accent="flame"] .modcard .muted{color:var(--tile-fg)}
:root[data-accent="flame"] .modcard .muted{opacity:.82}
:root[data-accent="flame"] .modcard .modbig{color:var(--tile-fg);opacity:.14}
:root[data-accent="flame"] .modcard .modn{background:color-mix(in srgb,var(--tile-fg) 14%,transparent);color:var(--tile-fg)}
:root[data-accent="flame"] .modgroup .modcard:nth-child(odd),:root[data-accent="flame"] .modgroup + .modgroup .modcard:nth-child(even){--tile-a:#ff7a1a;--tile-b:#e85d04;--tile-fg:#2a1203}
:root[data-accent="flame"] .modgroup .modcard:nth-child(even),:root[data-accent="flame"] .modgroup + .modgroup .modcard:nth-child(odd){--tile-a:#20150e;--tile-b:#33231a;--tile-fg:#ff7a1a}

:root[data-accent="flame"]{--hero-bg:#ff7a1a;--hero-fg:#2a1203;--hero-wave:#20150e;--hero-btn-bg:#2a1203;--hero-btn-fg:#ff7a1a;--tick-bg:#2a1203;--tick-fg:#ff7a1a}
:root[data-accent="flame"] .eart .e2{fill:rgba(255,122,26,.45)}
:root[data-accent="flame"] .eart .e3{fill:#ff7a1a}
:root[data-accent="flame"] .eart .e4{fill:#2a1203}
@media (prefers-color-scheme:dark){:root[data-accent="flame"]:not([data-theme="light"]) .eart .e4{fill:#2a1203}}
/* stat-card icon badges and project avatars: solid lime with a black glyph, not a faint tint */
:root[data-accent="flame"] .kpi .l .ico,:root[data-accent="flame"] .fav{background:#ff7a1a;color:#2a1203;border-color:transparent}
:root[data-accent="flame"] .kpi .l .ico{padding:6px;border-radius:10px}
/* the "Run" chips in the Optimization Center: clearly clickable instead of ghostly */
:root[data-accent="flame"] .ocell.none{border-color:color-mix(in srgb,var(--text) 25%,transparent);color:var(--text2)}
:root[data-accent="flame"] .ocell.none:hover{background:#ff7a1a;border-color:#2a1203;color:#2a1203}
:root[data-accent="flame"] .ocell.run{background:#20150e;color:#ff7a1a;border-color:transparent}

/* --- mint --- */

/* =====================================================================================================
   LIME theme: electric lime + near-black. Lime itself is too light for text on white, so in light mode the *accent* (text, buttons)
   is a deep olive-black with lime lettering, and lime is used for highlights, tiles and selected states. Dark mode uses lime directly.
   ===================================================================================================== */
:root[data-accent="mint"]{--th-a:#3dffb0;--th-b:#19d98c;--th-a-d:#3dffb0;--th-b-d:#6dffc6;--th-ink1:#10241b;--th-ink2:#0b1a13;--th-ink3:#06100b;
  --accent:#0b1d16;--accent2:#07613f;--on-accent:#3dffb0;--accent-soft:color-mix(in srgb,#3dffb0 34%,#fff);--accent-line:color-mix(in srgb,#19d98c 75%,#fff);
  --ring:0 0 0 3px rgba(25,217,140,.38);--bg:#f1fbf6}
@media (prefers-color-scheme:dark){:root[data-accent="mint"]:not([data-theme="light"]){--accent:#3dffb0;--accent2:#6dffc6;--on-accent:#03180f;
  --accent-soft:rgba(61,255,176,.14);--accent-line:rgba(61,255,176,.42);--ring:0 0 0 3px rgba(61,255,176,.28);
  --bg:#0a110e;--surface:#111a16;--surface2:#162019;--surface3:#1c2922;--line:#1f2c25;--line2:#2b3c33}}
:root[data-accent="mint"][data-theme="dark"]{--accent:#3dffb0;--accent2:#6dffc6;--on-accent:#03180f;
  --accent-soft:rgba(61,255,176,.14);--accent-line:rgba(61,255,176,.42);--ring:0 0 0 3px rgba(61,255,176,.28);
  --bg:#0a110e;--surface:#111a16;--surface2:#162019;--surface3:#1c2922;--line:#1f2c25;--line2:#2b3c33}

/* buttons, logo, avatar: flat, like the reference's pills */
:root[data-accent="mint"] .btn.p{background:var(--accent);color:var(--on-accent);border-color:transparent;box-shadow:none}
:root[data-accent="mint"] .btn.p:hover{background:var(--accent);filter:brightness(1.12);box-shadow:none}
:root[data-accent="mint"] .btn:not(.p):hover{background:var(--accent-soft);border-color:var(--accent-line);box-shadow:none}
:root[data-accent="mint"] .logo{background:#3dffb0;color:#04261a;box-shadow:none}
:root[data-accent="mint"] .tavatar,:root[data-accent="mint"] .avatar{background:#3dffb0;color:#04261a}
:root[data-accent="mint"] .tavatar:hover{background:#3dffb0;filter:brightness(.95)}
:root[data-accent="mint"] .tpill.on{background:#0b1d16;color:#3dffb0}
:root[data-accent="mint"] .fnext{background:#0b1d16;color:#3dffb0}
:root[data-accent="mint"] .fstepcard.next{border-color:var(--accent);box-shadow:0 12px 28px -16px color-mix(in srgb,var(--accent) 55%,transparent)}
:root[data-accent="mint"] .fstepcard.next .fnum{background:#0b1d16;color:#3dffb0}
@media (prefers-color-scheme:dark){:root[data-accent="mint"]:not([data-theme="light"]) .tpill.on{background:#3dffb0;color:#04261a}
  :root[data-accent="mint"]:not([data-theme="light"]) .fnext,:root[data-accent="mint"]:not([data-theme="light"]) .fstepcard.next .fnum{background:#3dffb0;color:#04261a}}
:root[data-accent="mint"][data-theme="dark"] .tpill.on{background:#3dffb0;color:#04261a}
:root[data-accent="mint"][data-theme="dark"] .fnext,:root[data-accent="mint"][data-theme="dark"] .fstepcard.next .fnum{background:#3dffb0;color:#04261a}

/* rail: near-black with lime highlights */
:root[data-accent="mint"] .rbtn.rtool.on,:root[data-accent="mint"] #rail-new{background:#3dffb0;color:#04261a}
:root[data-accent="mint"] .rbtn.on::before{background:#3dffb0}
:root[data-accent="mint"] .rbtn.rghost:hover{border-color:rgba(61,255,176,.45)}

/* module tiles: alternate lime and black, as in the reference */
:root[data-accent="mint"] .modcard{--tile-fg:#04261a}
:root[data-accent="mint"] .modcard,:root[data-accent="mint"] .modcard b,:root[data-accent="mint"] .modcard .muted{color:var(--tile-fg)}
:root[data-accent="mint"] .modcard .muted{opacity:.82}
:root[data-accent="mint"] .modcard .modbig{color:var(--tile-fg);opacity:.14}
:root[data-accent="mint"] .modcard .modn{background:color-mix(in srgb,var(--tile-fg) 14%,transparent);color:var(--tile-fg)}
:root[data-accent="mint"] .modgroup .modcard:nth-child(odd),:root[data-accent="mint"] .modgroup + .modgroup .modcard:nth-child(even){--tile-a:#3dffb0;--tile-b:#19d98c;--tile-fg:#04261a}
:root[data-accent="mint"] .modgroup .modcard:nth-child(even),:root[data-accent="mint"] .modgroup + .modgroup .modcard:nth-child(odd){--tile-a:#0b1d16;--tile-b:#14332a;--tile-fg:#3dffb0}

:root[data-accent="mint"]{--hero-bg:#3dffb0;--hero-fg:#04261a;--hero-wave:#0b1d16;--hero-btn-bg:#04261a;--hero-btn-fg:#3dffb0;--tick-bg:#04261a;--tick-fg:#3dffb0}
:root[data-accent="mint"] .eart .e2{fill:rgba(61,255,176,.45)}
:root[data-accent="mint"] .eart .e3{fill:#3dffb0}
:root[data-accent="mint"] .eart .e4{fill:#04261a}
@media (prefers-color-scheme:dark){:root[data-accent="mint"]:not([data-theme="light"]) .eart .e4{fill:#04261a}}
/* stat-card icon badges and project avatars: solid lime with a black glyph, not a faint tint */
:root[data-accent="mint"] .kpi .l .ico,:root[data-accent="mint"] .fav{background:#3dffb0;color:#04261a;border-color:transparent}
:root[data-accent="mint"] .kpi .l .ico{padding:6px;border-radius:10px}
/* the "Run" chips in the Optimization Center: clearly clickable instead of ghostly */
:root[data-accent="mint"] .ocell.none{border-color:color-mix(in srgb,var(--text) 25%,transparent);color:var(--text2)}
:root[data-accent="mint"] .ocell.none:hover{background:#3dffb0;border-color:#04261a;color:#04261a}
:root[data-accent="mint"] .ocell.run{background:#0b1d16;color:#3dffb0;border-color:transparent}

/* long tables inside a card scroll on their own, with the header row kept in view */
.scrollbox{max-height:360px;overflow:auto;border-radius:12px;scrollbar-width:thin}
.scrollbox.short{max-height:220px}
.scrollbox table{margin:0}
.scrollbox th{position:sticky;top:0;z-index:1;background:var(--surface2)}
.scrollbox:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px}

/* Settings → Security: both columns start on the same line, headings share one height, and the form controls line up */
.secgrid{align-items:start;gap:28px 40px}
.secgrid h3{display:flex;align-items:center;gap:10px;min-height:30px;margin:0 0 14px;font-size:15px;font-weight:650}
.secgrid .f{margin:0 0 14px}
.secgrid input{width:100%;box-sizing:border-box}
.secgrid .muted.sm{line-height:1.55}
.secgrid .chip{font-size:12px;cursor:default;user-select:none}
.sech{margin:30px 0 12px;font-size:15px;font-weight:650}

/* ---- standard symbols instead of the decorative sparkle ---- */
/* ticker separator: a plain bullet dot */
.ttrack i{font-size:0;width:11px;height:11px;border-radius:50%;background:currentColor;opacity:.9;flex:none}
/* project card watermark: a globe (the usual symbol for a website); the "+ New project" card already shows a plus, so it gets none */
.pcard::after{content:"";position:absolute;right:-22px;bottom:-34px;width:150px;height:150px;font-size:0;background:var(--accent);opacity:.07;pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.6'/%3E%3Cpath d='M2.4 12h19.2'/%3E%3Cpath d='M12 2.4c2.8 2.7 4.2 5.9 4.2 9.6s-1.4 6.9-4.2 9.6c-2.8-2.7-4.2-5.9-4.2-9.6S9.2 5.1 12 2.4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.6'/%3E%3Cpath d='M2.4 12h19.2'/%3E%3Cpath d='M12 2.4c2.8 2.7 4.2 5.9 4.2 9.6s-1.4 6.9-4.2 9.6c-2.8-2.7-4.2-5.9-4.2-9.6S9.2 5.1 12 2.4z'/%3E%3C/svg%3E") center/contain no-repeat}
.addcard::after{display:none}

/* Keyboard focus: a soft ring in the theme colour, away from the edge, so a dark button never gets a hairline in its own colour. */
.btn:focus-visible,.tpill:focus-visible,.tbtn:focus-visible,.rbtn:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 34%,transparent);outline-offset:0}

/* Neon themes: controls are a creamy shade of the page background (a step deeper, with a defined edge) instead of black in light mode.
   --ctl-* are set per mode: cream + dark text in light mode, the bright theme colour + dark text in dark mode. */
:root[data-accent="lime"]{--ctl-bg:#e6edbd;--ctl-line:#c3cf78;--ctl-ink:#1f2410}
@media (prefers-color-scheme:dark){:root[data-accent="lime"]:not([data-theme="light"]){--ctl-bg:#d9ff2e;--ctl-line:transparent;--ctl-ink:#12150a}}
:root[data-accent="lime"][data-theme="dark"]{--ctl-bg:#d9ff2e;--ctl-line:transparent;--ctl-ink:#12150a}
:root[data-accent="lime"] .btn.p{background:var(--ctl-bg);color:var(--ctl-ink);border-color:var(--ctl-line);box-shadow:0 6px 14px -9px color-mix(in srgb,var(--ctl-ink) 40%,transparent)}
:root[data-accent="lime"] .tpill.on{background:var(--ctl-bg);color:var(--ctl-ink);border-color:var(--ctl-line);box-shadow:inset 0 0 0 1.5px var(--ctl-line)}
:root[data-accent="lime"] .fnext{background:var(--ctl-bg);color:var(--ctl-ink);border-color:var(--ctl-line)}
:root[data-accent="lime"] .fstepcard.next .fnum{background:var(--ctl-bg);color:var(--ctl-ink);border-color:var(--ctl-line)}
:root[data-accent="lime"] .ocell.run{background:var(--ctl-bg);color:var(--ctl-ink);border-color:var(--ctl-line)}
:root[data-accent="lime"] .btn.p:hover{background:var(--ctl-bg);filter:none;border-color:var(--ctl-ink)}
:root[data-accent="lime"] .btn.p .ico{color:var(--ctl-ink)}
:root[data-accent="lime"] .fstepcard.next{border-color:var(--ctl-line)}
:root[data-accent="lime"] .fnext{border:0}
:root[data-accent="cyan"]{--ctl-bg:#d3eef4;--ctl-line:#8fd0df;--ctl-ink:#0a1d22}
@media (prefers-color-scheme:dark){:root[data-accent="cyan"]:not([data-theme="light"]){--ctl-bg:#22e3ff;--ctl-line:transparent;--ctl-ink:#04181d}}
:root[data-accent="cyan"][data-theme="dark"]{--ctl-bg:#22e3ff;--ctl-line:transparent;--ctl-ink:#04181d}
:root[data-accent="cyan"] .btn.p{background:var(--ctl-bg);color:var(--ctl-ink);border-color:var(--ctl-line);box-shadow:0 6px 14px -9px color-mix(in srgb,var(--ctl-ink) 40%,transparent)}
:root[data-accent="cyan"] .tpill.on{background:var(--ctl-bg);color:var(--ctl-ink);border-color:var(--ctl-line);box-shadow:inset 0 0 0 1.5px var(--ctl-line)}
:root[data-accent="cyan"] .fnext{background:var(--ctl-bg);color:var(--ctl-ink);border-color:var(--ctl-line)}
:root[data-accent="cyan"] .fstepcard.next .fnum{background:var(--ctl-bg);color:var(--ctl-ink);border-color:var(--ctl-line)}
:root[data-accent="cyan"] .ocell.run{background:var(--ctl-bg);color:var(--ctl-ink);border-color:var(--ctl-line)}
:root[data-accent="cyan"] .btn.p:hover{background:var(--ctl-bg);filter:none;border-color:var(--ctl-ink)}
:root[data-accent="cyan"] .btn.p .ico{color:var(--ctl-ink)}
:root[data-accent="cyan"] .fstepcard.next{border-color:var(--ctl-line)}
:root[data-accent="cyan"] .fnext{border:0}
:root[data-accent="magenta"]{--ctl-bg:#f7d9e8;--ctl-line:#e7a3c6;--ctl-ink:#2a0a1b}
@media (prefers-color-scheme:dark){:root[data-accent="magenta"]:not([data-theme="light"]){--ctl-bg:#ff3fa4;--ctl-line:transparent;--ctl-ink:#22040f}}
:root[data-accent="magenta"][data-theme="dark"]{--ctl-bg:#ff3fa4;--ctl-line:transparent;--ctl-ink:#22040f}
:root[data-accent="magenta"] .btn.p{background:var(--ctl-bg);color:var(--ctl-ink);border-color:var(--ctl-line);box-shadow:0 6px 14px -9px color-mix(in srgb,var(--ctl-ink) 40%,transparent)}
:root[data-accent="magenta"] .tpill.on{background:var(--ctl-bg);color:var(--ctl-ink);border-color:var(--ctl-line);box-shadow:inset 0 0 0 1.5px var(--ctl-line)}
:root[data-accent="magenta"] .fnext{background:var(--ctl-bg);color:var(--ctl-ink);border-color:var(--ctl-line)}
:root[data-accent="magenta"] .fstepcard.next .fnum{background:var(--ctl-bg);color:var(--ctl-ink);border-color:var(--ctl-line)}
:root[data-accent="magenta"] .ocell.run{background:var(--ctl-bg);color:var(--ctl-ink);border-color:var(--ctl-line)}
:root[data-accent="magenta"] .btn.p:hover{background:var(--ctl-bg);filter:none;border-color:var(--ctl-ink)}
:root[data-accent="magenta"] .btn.p .ico{color:var(--ctl-ink)}
:root[data-accent="magenta"] .fstepcard.next{border-color:var(--ctl-line)}
:root[data-accent="magenta"] .fnext{border:0}
:root[data-accent="flame"]{--ctl-bg:#f8e0c8;--ctl-line:#e9b98a;--ctl-ink:#2a1608}
@media (prefers-color-scheme:dark){:root[data-accent="flame"]:not([data-theme="light"]){--ctl-bg:#ff7a1a;--ctl-line:transparent;--ctl-ink:#1f0c00}}
:root[data-accent="flame"][data-theme="dark"]{--ctl-bg:#ff7a1a;--ctl-line:transparent;--ctl-ink:#1f0c00}
:root[data-accent="flame"] .btn.p{background:var(--ctl-bg);color:var(--ctl-ink);border-color:var(--ctl-line);box-shadow:0 6px 14px -9px color-mix(in srgb,var(--ctl-ink) 40%,transparent)}
:root[data-accent="flame"] .tpill.on{background:var(--ctl-bg);color:var(--ctl-ink);border-color:var(--ctl-line);box-shadow:inset 0 0 0 1.5px var(--ctl-line)}
:root[data-accent="flame"] .fnext{background:var(--ctl-bg);color:var(--ctl-ink);border-color:var(--ctl-line)}
:root[data-accent="flame"] .fstepcard.next .fnum{background:var(--ctl-bg);color:var(--ctl-ink);border-color:var(--ctl-line)}
:root[data-accent="flame"] .ocell.run{background:var(--ctl-bg);color:var(--ctl-ink);border-color:var(--ctl-line)}
:root[data-accent="flame"] .btn.p:hover{background:var(--ctl-bg);filter:none;border-color:var(--ctl-ink)}
:root[data-accent="flame"] .btn.p .ico{color:var(--ctl-ink)}
:root[data-accent="flame"] .fstepcard.next{border-color:var(--ctl-line)}
:root[data-accent="flame"] .fnext{border:0}
:root[data-accent="mint"]{--ctl-bg:#cfeedd;--ctl-line:#8fd3b0;--ctl-ink:#0b2218}
@media (prefers-color-scheme:dark){:root[data-accent="mint"]:not([data-theme="light"]){--ctl-bg:#3dffb0;--ctl-line:transparent;--ctl-ink:#03180f}}
:root[data-accent="mint"][data-theme="dark"]{--ctl-bg:#3dffb0;--ctl-line:transparent;--ctl-ink:#03180f}
:root[data-accent="mint"] .btn.p{background:var(--ctl-bg);color:var(--ctl-ink);border-color:var(--ctl-line);box-shadow:0 6px 14px -9px color-mix(in srgb,var(--ctl-ink) 40%,transparent)}
:root[data-accent="mint"] .tpill.on{background:var(--ctl-bg);color:var(--ctl-ink);border-color:var(--ctl-line);box-shadow:inset 0 0 0 1.5px var(--ctl-line)}
:root[data-accent="mint"] .fnext{background:var(--ctl-bg);color:var(--ctl-ink);border-color:var(--ctl-line)}
:root[data-accent="mint"] .fstepcard.next .fnum{background:var(--ctl-bg);color:var(--ctl-ink);border-color:var(--ctl-line)}
:root[data-accent="mint"] .ocell.run{background:var(--ctl-bg);color:var(--ctl-ink);border-color:var(--ctl-line)}
:root[data-accent="mint"] .btn.p:hover{background:var(--ctl-bg);filter:none;border-color:var(--ctl-ink)}
:root[data-accent="mint"] .btn.p .ico{color:var(--ctl-ink)}
:root[data-accent="mint"] .fstepcard.next{border-color:var(--ctl-line)}
:root[data-accent="mint"] .fnext{border:0}

/* phones: small text links and checkboxes get a comfortable touch area (inline padding does not move the text) */
@media (max-width:700px){
  .flowhint a{display:inline-flex;align-items:center;min-height:38px;padding:0 4px}
  .main a.sm:not(.btn):not(.card),.main p a:not(.btn):not(.card),.main li a:not(.btn):not(.card),.main .muted a:not(.btn):not(.card),.main .banner a:not(.btn):not(.card){padding:7px 2px}
  input[type=checkbox],input[type=radio]{width:20px;height:20px;min-width:20px;flex:none}
}