/* depth.css — the Lunaro panels' depth layer, loaded after client.css when the theme is Lunaro.
   Every effect here carries a meaning:
   - light comes from the top-left: surfaces catch it on their top edge, the background glows lilac there
   - glass (blur) is for things that float over the page: the menu, the top and tab bars, drawers, dialogs, cards
   - lilac = where you are and what has focus; amber = the one thing to do; green/amber/red glows = live status
   - corner marks frame a card; they light up while you're working inside it
   - motion says something happened: a page arrives, a message lands, a build runs, something new waits
   Corners stay square (README "Panel design rules"). prefers-reduced-motion turns every animation off.
   Speed rules: real blur (backdrop-filter) only on the small fixed bars and the confirm dialog, never on cards, the
   menu or anything that slides; the glass look elsewhere is painted gradients. Nothing animates forever except by
   opacity or transform (the GPU does those without repainting); no box-shadow or filter animations; nothing holds a
   page back on arrival. */

html[data-theme=lunaro] {
  --glass: color-mix(in srgb, #16223a 82%, transparent);
  --glass-strong: color-mix(in srgb, #121c31 86%, transparent);
  --edge: rgba(201, 216, 255, .10);
  --edge-2: rgba(201, 216, 255, .18);
  --edge-hot: rgba(201, 216, 255, .42);
  --catch: rgba(255, 255, 255, .055);          /* the top edge catching the light */
  --lilac-glow: rgba(201, 216, 255, .55);
  --amber-glow: rgba(255, 170, 90, .6);
  --ease-out: cubic-bezier(.2, .75, .25, 1);
}
html[data-theme=lunaro] body { background: #0b1322; }

/* ---- the room: a lit backdrop with a faint grid, slowly drifting light ---- */
html[data-theme=lunaro] .sky {
  background:
    radial-gradient(1100px 700px at 8% -12%, rgba(118, 138, 255, .17), transparent 62%),
    radial-gradient(800px 520px at 100% -5%, rgba(201, 216, 255, .07), transparent 60%),
    radial-gradient(900px 640px at 92% 112%, rgba(255, 158, 84, .075), transparent 62%),
    linear-gradient(180deg, #0f1a2f 0%, #0c1526 55%, #0a1120 100%);
}
html[data-theme=lunaro] .sky::before {
  display: block; content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201, 216, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 216, 255, .035) 1px, transparent 1px);
  background-size: 40px 40px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 20% 0%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 70% at 20% 0%, #000 0%, transparent 75%);
}
html[data-theme=lunaro] .sky::after {
  display: block; content: ""; position: absolute; left: -20%; top: -30%; width: 70%; height: 70%;
  background: radial-gradient(closest-side, rgba(150, 120, 255, .09), rgba(150, 120, 255, .03) 55%, transparent);
}

/* ---- the menu: a glass column with a lit right edge ---- */
html[data-theme=lunaro] .side {
  background: linear-gradient(180deg, #172338 0%, #111a2d 100%);
  border-right: 1px solid var(--edge);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .025), 18px 0 50px -36px rgba(0, 0, 0, .9);
}
html[data-theme=lunaro] .side::after {
  content: ""; position: absolute; top: 0; right: -1px; bottom: 0; width: 1px; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(201, 216, 255, .45) 18%, rgba(201, 216, 255, .08) 60%, transparent 100%);
}
html[data-theme=lunaro] .side .brand-mark { filter: drop-shadow(0 0 10px rgba(201, 216, 255, .35)); }
html[data-theme=lunaro] .menu a, html[data-theme=lunaro] .menu button.link { position: relative; transition: background-color .12s, color .12s; }
html[data-theme=lunaro] .menu a:hover, html[data-theme=lunaro] .menu button.link:hover {
  background: linear-gradient(90deg, rgba(201, 216, 255, .085), rgba(201, 216, 255, .015) 85%); color: var(--text);
}
html[data-theme=lunaro] .menu a:hover .ni { color: var(--lilac); }
html[data-theme=lunaro] .menu a[aria-current="page"], html[data-theme=lunaro] .menu a[aria-current="page"]:hover {
  color: #fff;
  background: linear-gradient(90deg, rgba(201, 216, 255, .20) 0%, rgba(201, 216, 255, .06) 65%, rgba(201, 216, 255, .02) 100%);
  box-shadow: inset 0 0 0 1px rgba(201, 216, 255, .11), inset 0 1px 0 rgba(255, 255, 255, .06);
}
html[data-theme=lunaro] .menu a[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px; height: auto; margin: 0; opacity: 1;
  background: var(--lilac); box-shadow: 0 0 8px 1px var(--lilac-glow), 0 0 18px 2px rgba(201, 216, 255, .25);
}
html[data-theme=lunaro] .menu a[aria-current="page"] .ni { color: var(--lilac); filter: drop-shadow(0 0 6px rgba(201, 216, 255, .6)); opacity: 1; }
html[data-theme=lunaro] .modes { background: rgba(0, 0, 0, .18); border-color: var(--edge); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }
html[data-theme=lunaro] .modes a.on, html[data-theme=lunaro] .modes a[aria-current="page"] {
  background: linear-gradient(180deg, rgba(201, 216, 255, .22), rgba(201, 216, 255, .10)); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 14px -4px var(--lilac-glow);
}
html[data-theme=lunaro] .side-foot { border-top-color: var(--edge); }

/* phone bars: glass over the page */
html[data-theme=lunaro] .topbar, html[data-theme=lunaro] .tabbar {
  background: linear-gradient(180deg, rgba(20, 31, 52, .80), rgba(14, 22, 39, .72));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
html[data-theme=lunaro] .topbar { border-bottom: 1px solid var(--edge); box-shadow: 0 10px 30px -22px rgba(0, 0, 0, .9); }
html[data-theme=lunaro] .tabbar { border-top: 1px solid var(--edge); box-shadow: 0 -10px 30px -22px rgba(0, 0, 0, .9); }
html[data-theme=lunaro] .tabbar a[aria-current="page"]::before {
  content: ""; position: absolute; top: -1px; left: 22%; right: 22%; height: 2px;
  background: var(--lilac); box-shadow: 0 0 10px 1px var(--lilac-glow);
}
html[data-theme=lunaro] .tabbar a[aria-current="page"] .ni { filter: drop-shadow(0 0 6px rgba(201, 216, 255, .55)); }

/* ---- page heads: a lit title over a rule that fades out ---- */
html[data-theme=lunaro] .pagehead {
  position: relative; margin-bottom: 18px; padding-bottom: 16px;
  background: linear-gradient(90deg, rgba(201, 216, 255, .38), rgba(201, 216, 255, .10) 35%, transparent 80%) left bottom / 100% 1px no-repeat;
}
html[data-theme=lunaro] .pagehead h1 {
  background: linear-gradient(92deg, #ffffff 0%, #e6edff 45%, #b9c9f5 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 0 18px rgba(201, 216, 255, .16));
}
html[data-theme=lunaro] .kicker::before, html[data-theme=lunaro] .eyebrow::before {
  content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 8px 1px 0; vertical-align: middle;
  background: var(--lilac); box-shadow: 0 0 8px var(--lilac-glow);
}

/* ---- surfaces: glass panes that catch the light on top, framed by corner marks ---- */
html[data-theme=lunaro] .card, html[data-theme=lunaro] .stat, html[data-theme=lunaro] .tile,
html[data-theme=lunaro] .quiet-line, html[data-theme=lunaro] .login, html[data-theme=lunaro] .drawer .box {
  background:
    linear-gradient(90deg, transparent 0%, rgba(201, 216, 255, .30) 30%, rgba(201, 216, 255, .08) 75%, transparent 100%) left top / 100% 1px no-repeat,
    linear-gradient(180deg, var(--catch) 0%, rgba(255, 255, 255, .012) 38%, rgba(0, 0, 0, .06) 100%),
    var(--glass);
  border-color: var(--edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 1px 0 rgba(0, 0, 0, .3), 0 16px 30px -24px rgba(0, 0, 0, .85);
}
html[data-theme=lunaro] .card::before, html[data-theme=lunaro] .card::after {
  display: block; content: ""; position: absolute; width: 10px; height: 10px; pointer-events: none;
  border: 0 solid rgba(201, 216, 255, .45); transition: border-color .15s;
}
html[data-theme=lunaro] .card::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
html[data-theme=lunaro] .card::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
html[data-theme=lunaro] .card:focus-within::before, html[data-theme=lunaro] .card:focus-within::after { width: 18px; height: 18px; border-color: var(--lilac); }
html[data-theme=lunaro] .card:focus-within { border-color: var(--edge-2); }
html[data-theme=lunaro] .card.hello, html[data-theme=lunaro] .card.hello::before, html[data-theme=lunaro] .card.hello::after {
  background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: transparent;
}
html[data-theme=lunaro] .card.hello::before, html[data-theme=lunaro] .card.hello::after { display: none; }
html[data-theme=lunaro] .card-head, html[data-theme=lunaro] .card > h2:first-child { position: relative; }

/* things you can click lift their edge and glow; plain cards don't, so a glow always means "this does something" */
html[data-theme=lunaro] a.stat, html[data-theme=lunaro] .tile { position: relative; transition: border-color .12s; }
html[data-theme=lunaro] a.stat:hover, html[data-theme=lunaro] .tile:hover {
  border-color: var(--edge-hot); text-decoration: none; transform: none;
  background:
    linear-gradient(90deg, transparent 0%, rgba(201, 216, 255, .55) 30%, rgba(201, 216, 255, .15) 75%, transparent 100%) left top / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(201, 216, 255, .08) 0%, rgba(255, 255, 255, .015) 45%, rgba(0, 0, 0, .06) 100%),
    var(--glass);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 0 1px rgba(201, 216, 255, .08), 0 0 26px -8px rgba(201, 216, 255, .35), 0 22px 44px -30px rgba(0, 0, 0, .85);
}
html[data-theme=lunaro] .tile .t-go { transition: transform .18s var(--ease-out); display: inline-block; }
html[data-theme=lunaro] .tile:hover .t-go { transform: translateX(4px); color: #fff; }
html[data-theme=lunaro] .stat .s-num, html[data-theme=lunaro] .stat strong, html[data-theme=lunaro] .numline b {
  text-shadow: 0 0 22px rgba(201, 216, 255, .28); font-variant-numeric: tabular-nums;
}

/* the one thing to do: warm, lit from inside, a sheen passes over it on hover */
html[data-theme=lunaro] .tile.primary, html[data-theme=lunaro] .tile.primary:hover {
  overflow: hidden; color: var(--accent-text); border-color: #ffc489;
  background:
    radial-gradient(600px 160px at 15% 0%, rgba(255, 255, 255, .35), transparent 60%),
    linear-gradient(135deg, #ffcf96 0%, #ffb66a 45%, #ff9a4d 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(120, 50, 0, .25), 0 18px 46px -18px var(--amber-glow);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-theme=lunaro] .tile.primary .t-sub, html[data-theme=lunaro] .tile.primary p { color: rgba(26, 18, 6, .78); }
html[data-theme=lunaro] .tile.primary::after, html[data-theme=lunaro] .btn.primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: translateX(-150%) skewX(-18deg);
}
html[data-theme=lunaro] .tile.primary:hover::after, html[data-theme=lunaro] .btn.primary:hover::after { animation: d-sheen .75s var(--ease-out); }
@keyframes d-sheen { to { transform: translateX(350%) skewX(-18deg); } }

/* things waiting for you: a warm wash from the edge they're marked on */
html[data-theme=lunaro] .att {
  background: linear-gradient(90deg, rgba(255, 209, 102, .10), rgba(255, 209, 102, 0) 55%), var(--glass);
  border-color: var(--edge); border-left-color: var(--warn);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), -6px 0 18px -10px rgba(255, 209, 102, .55);
}
html[data-theme=lunaro] .att.bad { background: linear-gradient(90deg, rgba(255, 142, 142, .12), rgba(255, 142, 142, 0) 55%), var(--glass); border-left-color: var(--bad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), -6px 0 18px -10px rgba(255, 142, 142, .6); }
html[data-theme=lunaro] .att.ok { background: linear-gradient(90deg, rgba(143, 227, 180, .09), rgba(143, 227, 180, 0) 55%), var(--glass); border-left-color: var(--ok); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), -6px 0 18px -10px rgba(143, 227, 180, .5); }

/* ---- buttons: glass you press; the main one is lit ---- */
html[data-theme=lunaro] .btn {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  border-color: var(--edge-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 1px 0 rgba(0, 0, 0, .3);
  transition: border-color .12s, transform .06s;
}
html[data-theme=lunaro] .btn:hover {
  background: linear-gradient(180deg, rgba(201, 216, 255, .12), rgba(201, 216, 255, .04));
  border-color: var(--edge-hot); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px rgba(201, 216, 255, .06), 0 0 20px -6px rgba(201, 216, 255, .45);
}
html[data-theme=lunaro] .btn:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4); }
html[data-theme=lunaro] .btn.primary, html[data-theme=lunaro] .btn.primary:hover {
  color: var(--accent-text); border-color: #ffc489;
  background: linear-gradient(180deg, #ffcc90 0%, #ffb366 55%, #ffa04f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(120, 50, 0, .28), 0 8px 24px -10px var(--amber-glow);
}
html[data-theme=lunaro] .btn.primary:hover { filter: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(120, 50, 0, .28), 0 0 0 1px rgba(255, 184, 107, .25), 0 10px 30px -8px var(--amber-glow); }
html[data-theme=lunaro] .btn.primary:active { filter: none; background: linear-gradient(180deg, #ffb366, #ff9f4c); box-shadow: inset 0 2px 4px rgba(120, 50, 0, .35); }
html[data-theme=lunaro] .btn.danger:hover, html[data-theme=lunaro] .btn.bad:hover { border-color: rgba(255, 142, 142, .6); box-shadow: 0 0 20px -6px rgba(255, 142, 142, .55); }

/* ---- fields: sunk into the glass; focus lights them ---- */
html[data-theme=lunaro] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
html[data-theme=lunaro] select, html[data-theme=lunaro] textarea {
  background: linear-gradient(180deg, rgba(0, 0, 0, .26), rgba(0, 0, 0, .14));
  border-color: rgba(201, 216, 255, .13);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .03);
  transition: border-color .12s;
}
html[data-theme=lunaro] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):hover,
html[data-theme=lunaro] select:hover, html[data-theme=lunaro] textarea:hover { border-color: rgba(201, 216, 255, .24); }
html[data-theme=lunaro] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):focus,
html[data-theme=lunaro] select:focus, html[data-theme=lunaro] textarea:focus {
  outline: none; border-color: var(--lilac);
  background: linear-gradient(180deg, rgba(0, 0, 0, .30), rgba(10, 18, 34, .2));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4), 0 0 0 3px rgba(201, 216, 255, .13), 0 0 22px -6px var(--lilac-glow);
}
html[data-theme=lunaro] input[type=checkbox], html[data-theme=lunaro] input[type=radio] { accent-color: var(--accent); }
html[data-theme=lunaro] input[type=checkbox]:checked, html[data-theme=lunaro] input[type=radio]:checked { filter: drop-shadow(0 0 5px rgba(255, 184, 107, .55)); }
html[data-theme=lunaro] :focus-visible { outline-color: var(--lilac); }

/* ---- tabs: the open one is lit from below ---- */
html[data-theme=lunaro] .tabs a { position: relative; background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)); border-color: var(--edge); transition: border-color .12s, color .12s; }
html[data-theme=lunaro] .tabs a:hover { border-color: var(--edge-2); }
html[data-theme=lunaro] .tabs a[aria-current="page"] {
  background: linear-gradient(180deg, rgba(201, 216, 255, .08), rgba(201, 216, 255, .20)); border-color: rgba(201, 216, 255, .22); color: #fff;
  box-shadow: inset 0 -2px 0 var(--lilac), 0 6px 18px -10px var(--lilac-glow);
}

/* ---- tables: a lit header rule; rows you can open show a bar on hover ---- */
html[data-theme=lunaro] .ctable thead th { border-bottom: 1px solid rgba(201, 216, 255, .16); }
html[data-theme=lunaro] .ctable thead th:first-child { border-bottom-color: rgba(201, 216, 255, .34); }
html[data-theme=lunaro] .ctable tbody tr {  }
html[data-theme=lunaro] .ctable tbody tr:hover { background: linear-gradient(90deg, rgba(201, 216, 255, .07), rgba(201, 216, 255, .015) 70%, transparent); }
html[data-theme=lunaro] .ctable tbody tr[data-drawer] { cursor: pointer; }
html[data-theme=lunaro] .ctable tbody tr[data-drawer]:hover { box-shadow: inset 2px 0 0 var(--lilac); }
html[data-theme=lunaro] .amt, html[data-theme=lunaro] .num, html[data-theme=lunaro] .inv-sum { font-variant-numeric: tabular-nums; }

/* ---- status: lights that glow; running things breathe; new things call ---- */
html[data-theme=lunaro] .status.live::before, html[data-theme=lunaro] .status.s-success::before, html[data-theme=lunaro] .strip li.ok i,
html[data-theme=lunaro] .sdot, html[data-theme=lunaro] .ok-dot, html[data-theme=lunaro] .c-dot.ok { box-shadow: 0 0 0 2px rgba(143, 227, 180, .14), 0 0 8px 1px rgba(143, 227, 180, .7); }
html[data-theme=lunaro] .status.s-failed::before, html[data-theme=lunaro] .strip li.bad i, html[data-theme=lunaro] .c-dot.bad { box-shadow: 0 0 0 2px rgba(255, 142, 142, .15), 0 0 8px 1px rgba(255, 142, 142, .75); animation: d-alarm 1.6s ease-in-out infinite; }
html[data-theme=lunaro] .strip li.warn i, html[data-theme=lunaro] .c-dot.warn, html[data-theme=lunaro] .status.s-queued::before { box-shadow: 0 0 0 2px rgba(255, 209, 102, .14), 0 0 8px 1px rgba(255, 209, 102, .6); }
html[data-theme=lunaro] .status.s-building::before, html[data-theme=lunaro] .status.s-doing::before { box-shadow: 0 0 0 2px rgba(201, 216, 255, .14), 0 0 8px 1px rgba(201, 216, 255, .6); animation: d-alarm 1.4s ease-in-out infinite; }
@keyframes d-alarm { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
html[data-theme=lunaro] .strip li { background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)), var(--glass); border-color: var(--edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
html[data-theme=lunaro] .badge, html[data-theme=lunaro] .menu .badge {
  background: linear-gradient(180deg, #ffcc90, #ffa04f); color: var(--accent-text); border: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 12px -2px var(--amber-glow);
}
html[data-theme=lunaro] .tab-dot { box-shadow: 0 0 8px 1px var(--amber-glow); animation: d-alarm 2s ease-in-out infinite; }
html[data-theme=lunaro] .pill { background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)); border-color: var(--edge-2); }

/* ---- charts and meters: bars of light ---- */
html[data-theme=lunaro] .chart .bar, html[data-theme=lunaro] .spark .sp-bar {
  background: linear-gradient(180deg, #dbe5ff 0%, rgba(201, 216, 255, .55) 60%, rgba(201, 216, 255, .22) 100%);
  box-shadow: 0 0 12px -2px rgba(201, 216, 255, .45); opacity: 1;
}
html[data-theme=lunaro] .chart.money .bar { background: linear-gradient(180deg, #ffd3a0, rgba(255, 170, 90, .45)); box-shadow: 0 0 12px -2px var(--amber-glow); }
html[data-theme=lunaro] .meter > * , html[data-theme=lunaro] .meter span, html[data-theme=lunaro] .meter i { background: linear-gradient(90deg, rgba(201, 216, 255, .5), var(--lilac)); box-shadow: 0 0 10px -1px var(--lilac-glow); }

/* ---- floating layers: heavier glass and a shadow underneath ---- */
html[data-theme=lunaro] .drawer, html[data-theme=lunaro] dialog.confirm, html[data-theme=lunaro] .rowact.pop .pop-body {
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01) 30%), #121c31;
  border-color: var(--edge-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 30px 80px -20px rgba(0, 0, 0, .85), 0 0 0 1px rgba(0, 0, 0, .3);
}
html[data-theme=lunaro] .drawer { animation: d-slide .2s var(--ease-out); }
html[data-theme=lunaro] dialog.confirm[open] { animation: d-pop .22s var(--ease-out); }
html[data-theme=lunaro] dialog.confirm::backdrop { background: rgba(6, 10, 20, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
html[data-theme=lunaro] .backdrop { background: rgba(6, 10, 20, .6); }
@keyframes d-slide { from { transform: translateX(28px); opacity: 0; } }
@keyframes d-pop { from { transform: translateY(6px) scale(.98); opacity: 0; } }

/* ---- arrival: the page is there at once; only a flash message lands ---- */
html[data-theme=lunaro] .flash { position: relative; animation: d-land .3s var(--ease-out); }
html[data-theme=lunaro] .flash.ok-msg, html[data-theme=lunaro] .ok-msg { box-shadow: 0 0 0 1px rgba(143, 227, 180, .25), 0 0 24px -8px rgba(143, 227, 180, .5); }
html[data-theme=lunaro] .flash.error, html[data-theme=lunaro] .error { box-shadow: 0 0 0 1px rgba(255, 142, 142, .25), 0 0 24px -8px rgba(255, 142, 142, .5); }
@keyframes d-land { from { opacity: 0; transform: translateY(-6px); } }

/* ---- small things ---- */
html[data-theme=lunaro] ::selection { background: rgba(201, 216, 255, .32); }
html[data-theme=lunaro] * { scrollbar-width: thin; scrollbar-color: rgba(201, 216, 255, .22) transparent; }
html[data-theme=lunaro] ::-webkit-scrollbar { width: 9px; height: 9px; }
html[data-theme=lunaro] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(201, 216, 255, .30), rgba(201, 216, 255, .14)); border: 2px solid transparent; background-clip: padding-box; }
html[data-theme=lunaro] code, html[data-theme=lunaro] .keybox { background: rgba(0, 0, 0, .28); border-color: var(--edge); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); }
html[data-theme=lunaro] .foot { border-top: 0; background: linear-gradient(90deg, transparent, rgba(201, 216, 255, .14) 50%, transparent) center top / 100% 1px no-repeat; }

/* no glass where a browser can't blur: keep the panes solid enough to read */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme=lunaro] .topbar, html[data-theme=lunaro] .tabbar { background: #131d33; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme=lunaro] *, html[data-theme=lunaro] *::before, html[data-theme=lunaro] *::after { animation: none !important; transition-duration: 0s !important; }
}

@media print {
  html[data-theme=lunaro] .card, html[data-theme=lunaro] .stat, html[data-theme=lunaro] .tile { background: #fff; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html[data-theme=lunaro] .card::before, html[data-theme=lunaro] .card::after { display: none; }
  html[data-theme=lunaro] .pagehead h1 { color: #000; background: none; filter: none; }
}

/* the phone menu slides on the GPU: its own layer, no blur under it */
@media (max-width: 860px) {
  html[data-theme=lunaro] .side { will-change: transform; transition: transform .18s cubic-bezier(.2, .8, .25, 1); box-shadow: 18px 0 40px -20px rgba(0, 0, 0, .8); }
}