/* ===================== LIQUID GLASS UI =====================
   Loaded after styles.css. Turns the sidebar into a sliding "liquid glass" drawer on every screen
   size (opened from the menu button in the top bar; picking any menu item closes it and shows that
   page -- the closing is handled by wireMobileSidebarDrawer() in app.js), gives every card a
   frosted-glass look, and puts a soft, faded, blurred colour field behind everything so the glass
   has something to refract. Light look by default; dark glass for dark mode and the dark schemes. */

:root{
  --glass-bg: rgba(255,255,255,0.42);
  --glass-bg-strong: rgba(255,255,255,0.62);
  --glass-border: rgba(255,255,255,0.70);
  --glass-edge: rgba(120,110,90,0.18);
  --glass-shine: rgba(255,255,255,0.85);
  --glass-shadow: 0 18px 40px -18px rgba(60,48,30,0.30), 0 2px 6px rgba(60,48,30,0.06);
  --glass-blur: 18px;
  --glass-pill: rgba(60,56,48,0.10);
  --glass-pill-strong: rgba(60,56,48,0.16);
  --field-1: rgba(236,178,120,0.38);
  --field-2: rgba(170,176,160,0.36);
  --field-3: rgba(214,196,170,0.40);
  --field-4: rgba(150,146,140,0.22);
  --drawer-ease: cubic-bezier(.22,1.2,.36,1);
}
[data-theme="dark"], [data-scheme="night"], [data-scheme="coffee"]{
  --glass-bg: rgba(40,34,30,0.45);
  --glass-bg-strong: rgba(40,34,30,0.68);
  --glass-border: rgba(255,255,255,0.12);
  --glass-edge: rgba(0,0,0,0.35);
  --glass-shine: rgba(255,255,255,0.14);
  --glass-shadow: 0 18px 44px -16px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.3);
  --glass-pill: rgba(255,255,255,0.08);
  --glass-pill-strong: rgba(255,255,255,0.14);
  --field-1: rgba(232,160,85,0.20);
  --field-2: rgba(120,130,120,0.16);
  --field-3: rgba(160,120,90,0.18);
  --field-4: rgba(0,0,0,0.25);
}

/* ---------- Faded, blurred background field ---------- */
body{ position:relative; }
body::before{
  content:""; position:fixed; inset:-10vmax; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38vmax 30vmax at 12% 18%, var(--field-1), transparent 70%),
    radial-gradient(34vmax 28vmax at 88% 10%, var(--field-2), transparent 70%),
    radial-gradient(40vmax 32vmax at 80% 85%, var(--field-3), transparent 70%),
    radial-gradient(30vmax 26vmax at 10% 90%, var(--field-4), transparent 70%);
  filter: blur(40px) saturate(1.1);
}
body::after{
  /* a very faint Sri Yantra watermark, faded into the field */
  content:""; position:fixed; right:-6vmax; bottom:-8vmax; width:58vmax; height:58vmax;
  z-index:-1; pointer-events:none; opacity:0.07;
  background:url("print-assets/sriyantra-mark.svg") center/contain no-repeat;
  filter: blur(0.6px);
}

/* ---------- Layout: content uses the full width; the sidebar becomes a drawer everywhere ---------- */
.app-shell{ display:block !important; }
.main-area{ width:100%; min-width:0; }

.mobile-topbar{
  display:flex !important;
  position:sticky; top:0; z-index:30;
  align-items:center; gap:14px;
  padding:10px 18px;
  margin:10px 12px 0;
  border-radius:20px;
  background:var(--glass-bg-strong);
  border:1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-shine), var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
}
.sidebar-menu-btn{
  width:46px; height:46px; border-radius:50%;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-shine), 0 4px 14px -6px rgba(0,0,0,0.25);
  transition: transform .2s ease, background .2s ease;
}
.sidebar-menu-btn:hover{ transform: scale(1.05); background:var(--glass-bg-strong); }
.sidebar-menu-btn:active{ transform: scale(0.96); }
@media (min-width:1024px){ .top-controls{ position:fixed !important; top:22px !important; right:28px !important; z-index:31 !important; } }

/* ---------- The liquid-glass drawer ---------- */
.sidebar{
  position:fixed !important; top:12px; left:12px; bottom:12px; z-index:40;
  width:300px !important; max-width:calc(100vw - 24px); height:auto !important; min-height:0 !important;
  flex:0 0 auto !important;
  padding:18px 14px !important;
  border-radius:26px;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.08) 45%, rgba(255,255,255,0.18) 100%),
    var(--glass-bg) !important;
  border:1px solid var(--glass-border) !important;
  box-shadow: inset 0 1px 0 var(--glass-shine), inset 0 -1px 0 var(--glass-edge), 0 30px 60px -20px rgba(40,30,20,0.45) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.6);
  backdrop-filter: blur(26px) saturate(1.6);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  transform: translateX(calc(-100% - 30px)) scale(0.96);
  opacity:0;
  transition: transform .5s var(--drawer-ease), opacity .3s ease;
}
.sidebar.mobile-open{ transform: translateX(0) scale(1); opacity:1; }
/* liquid highlight that sweeps across the glass as it slides in */
.sidebar::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.35) 45%, transparent 60%);
  background-size: 250% 100%; background-position: 120% 0;
  opacity:0;
}
.sidebar.mobile-open::before{ animation: glassSweep 1.1s ease .15s 1 both; }
@keyframes glassSweep{ 0%{opacity:0; background-position:120% 0;} 30%{opacity:1;} 100%{opacity:0; background-position:-40% 0;} }

.sidebar-brand-row{ display:flex !important; align-items:center; justify-content:space-between; border-bottom:1px solid var(--glass-edge); margin-bottom:12px; padding-bottom:8px; }
.sidebar-brand{ border-bottom:none !important; margin-bottom:0 !important; padding:4px 0 !important; }
.sidebar-close-btn{
  display:flex !important; border-radius:50%; width:38px; height:38px;
  background:var(--glass-pill); border:1px solid var(--glass-border);
}
.sidebar-close-btn:hover{ background:var(--glass-pill-strong); }

.nav-group-label{ border-radius:12px; }
.nav-group-label:hover{ background:var(--glass-pill) !important; }
.nav-item{
  border-radius:14px !important; border-left:none !important;
  padding:10px 14px !important; min-height:42px;
  transition: background .2s ease, transform .15s ease;
}
.nav-item:hover{ background:var(--glass-pill) !important; transform: translateX(3px); }
.nav-item.active{
  background:var(--glass-pill-strong) !important;
  box-shadow: inset 0 1px 0 var(--glass-shine), 0 4px 12px -8px rgba(0,0,0,0.35);
  color:var(--ink) !important;
}
/* items float in one after another when the drawer opens */
.sidebar .nav-group{ opacity:0; transform: translateX(-14px); transition: opacity .35s ease, transform .45s var(--drawer-ease); }
.sidebar.mobile-open .nav-group{ opacity:1; transform:none; }
.sidebar.mobile-open .nav-group:nth-child(1){ transition-delay:.08s; }
.sidebar.mobile-open .nav-group:nth-child(2){ transition-delay:.13s; }
.sidebar.mobile-open .nav-group:nth-child(3){ transition-delay:.18s; }
.sidebar.mobile-open .nav-group:nth-child(4){ transition-delay:.23s; }
.sidebar.mobile-open .nav-group:nth-child(5){ transition-delay:.28s; }
.sidebar-footer{ border-top:1px solid var(--glass-edge) !important; }

/* Fade the page behind the open drawer */
.sidebar-backdrop{
  display:block;
  background: rgba(40,34,26,0.22) !important;
  -webkit-backdrop-filter: blur(6px) saturate(0.8);
  backdrop-filter: blur(6px) saturate(0.8);
  animation: fadeIn .3s ease both;
}
.sidebar-backdrop[hidden]{ display:none !important; }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }

/* ---------- Glass cards ("decks") ---------- */
.card, .modal-box{
  position:relative;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.30), rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.14)),
    var(--glass-bg) !important;
  border:1px solid var(--glass-border) !important;
  border-radius:22px !important;
  box-shadow: inset 0 1px 0 var(--glass-shine), inset 0 -1px 0 var(--glass-edge), var(--glass-shadow) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.45);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.45);
}
.card h2{ border-bottom-color: var(--glass-edge) !important; }
/* inner tiles become lighter glass chips */
.stat, .sign-badge, .chart-box, .disclosure, .match-person-block{
  background: var(--glass-pill) !important;
  border:1px solid var(--glass-border) !important;
  border-radius:14px !important;
  box-shadow: inset 0 1px 0 var(--glass-shine);
}
.chart-box{ background: rgba(255,255,255,0.55) !important; }
[data-theme="dark"] .chart-box, [data-scheme="night"] .chart-box, [data-scheme="coffee"] .chart-box{ background: rgba(0,0,0,0.18) !important; }

.identity-bar{
  margin:10px 12px 0; border-radius:16px;
  background:var(--glass-bg-strong) !important;
  border:1px solid var(--glass-border) !important;
  box-shadow: inset 0 1px 0 var(--glass-shine), var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  top:78px !important;
}
.lang-toggle, .scheme-select, .theme-toggle-btn{
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  background: var(--glass-bg) !important; border-color: var(--glass-border) !important;
}
.modal-overlay{ -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* ---------- Printing is unaffected ---------- */
@media print{
  body::before, body::after{ display:none !important; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .sidebar, .sidebar .nav-group, .nav-item{ transition:none !important; }
  .sidebar.mobile-open::before{ animation:none; }
}

/* ===================== BROWN LIQUID-GLASS LOOK (default theme) =====================
   Inspired by the warm, out-of-focus brown/amber interior in the reference image: a deep brown
   gradient with blurred amber light, smoky brown glass panels, cream text and a cream "pill" for
   the selected item. Applies to the default look; dark mode and the named colour schemes keep
   their own palettes. */
html:not([data-theme]):not([data-scheme]){
  --bg-deep:#2A1911;
  --bg-panel:#3A2519;
  --bg-panel-2:#43291C;
  --gold:#E8904E;
  --gold-soft:#F2AE72;
  --maroon:#F2AE72;
  --ink:#F7EEE5;
  --ink-dim:#D2BDAA;
  --line:rgba(255,232,210,0.16);
  --good:#A6D9A0;
  --retro:#FFA08C;

  --chart-bg:rgba(34,20,13,0.45);
  --chart-panel:rgba(58,37,25,0.6);
  --chart-line:rgba(255,228,200,0.30);
  --chart-accent:#F2AE72;
  --chart-text:#F7EEE5;
  --chart-dim:#D2BDAA;
  --chart-faint:#9C8270;
  --chart-highlight:rgba(242,174,114,0.22);
  --chart-highlight-2:rgba(242,174,114,0.12);
  --chart-highlight-3:rgba(242,174,114,0.17);
  --chart-retro:#FFA08C;
  --chart-good:#A6D9A0;

  --bg-glow-1:transparent;
  --bg-glow-2:transparent;
  --btn-text:#2A1911;

  --glass-bg: rgba(110,72,48,0.28);
  --glass-bg-strong: rgba(66,41,27,0.55);
  --glass-border: rgba(255,232,210,0.20);
  --glass-edge: rgba(0,0,0,0.28);
  --glass-shine: rgba(255,240,225,0.22);
  --glass-shadow: 0 24px 50px -22px rgba(0,0,0,0.65), 0 2px 8px rgba(0,0,0,0.25);
  --glass-pill: rgba(255,238,220,0.09);
  --glass-pill-strong: rgba(255,238,220,0.16);
  --hl-gray-1: rgba(255,238,220,0.06);
  --hl-gray-2: rgba(255,238,220,0.11);
  --hl-gray-3: rgba(255,238,220,0.16);
  color-scheme: dark;
}
html:not([data-theme]):not([data-scheme]) body{
  background:
    linear-gradient(140deg, #22140D 0%, #3B2317 32%, #5A3520 58%, #3A2317 82%, #1F120B 100%) fixed !important;
  color:var(--ink);
}
html:not([data-theme]):not([data-scheme]) body::before{
  background:
    radial-gradient(26vmax 22vmax at 78% 14%, rgba(255,170,90,0.55), transparent 70%),
    radial-gradient(20vmax 18vmax at 92% 48%, rgba(230,130,60,0.35), transparent 70%),
    radial-gradient(34vmax 26vmax at 18% 22%, rgba(150,90,55,0.45), transparent 70%),
    radial-gradient(30vmax 24vmax at 30% 88%, rgba(200,120,70,0.30), transparent 70%),
    radial-gradient(22vmax 18vmax at 62% 70%, rgba(255,200,140,0.18), transparent 70%);
  filter: blur(46px) saturate(1.2);
}
html:not([data-theme]):not([data-scheme]) body::after{ opacity:0.06; filter: invert(1) sepia(1) saturate(2) hue-rotate(-10deg) blur(0.5px); }

/* selected items: cream pill with dark text, like the reference's "Living room" chip */
html:not([data-theme]):not([data-scheme]) .nav-item.active,
html:not([data-theme]):not([data-scheme]) .lang-btn.active,
html:not([data-theme]):not([data-scheme]) .style-btn.active{
  background: rgba(255,244,232,0.92) !important; color:#2A1911 !important; border-color:transparent !important;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,0.6) !important;
}
html:not([data-theme]):not([data-scheme]) .nav-item:hover,
html:not([data-theme]):not([data-scheme]) .nav-group-label:hover,
html:not([data-theme]):not([data-scheme]) tbody tr:hover,
html:not([data-theme]):not([data-scheme]) .combo-list .item:hover,
html:not([data-theme]):not([data-scheme]) .toggle:hover{ background: var(--hl-gray-2) !important; }
html:not([data-theme]):not([data-scheme]) .akshar-hit{ background:#F2AE72 !important; color:#2A1911 !important; }
html:not([data-theme]):not([data-scheme]) .akshar-hit-row td{ background: rgba(242,174,114,0.12) !important; }
html:not([data-theme]):not([data-scheme]) .hamburger-bar{ background: var(--ink); }
html:not([data-theme]):not([data-scheme]) .chart-box{ background: rgba(28,16,10,0.35) !important; }
html:not([data-theme]):not([data-scheme]) .card{
  background:
    linear-gradient(160deg, rgba(255,235,215,0.14), rgba(255,235,215,0.02) 50%, rgba(255,235,215,0.07)),
    var(--glass-bg) !important;
}
html:not([data-theme]):not([data-scheme]) .sidebar{
  background:
    linear-gradient(160deg, rgba(255,235,215,0.16) 0%, rgba(255,235,215,0.03) 45%, rgba(255,235,215,0.08) 100%),
    rgba(70,44,30,0.40) !important;
}
html:not([data-theme]):not([data-scheme]) .sidebar-backdrop{ background: rgba(15,8,4,0.35) !important; }
/* form fields: smoky glass wells */
html:not([data-theme]):not([data-scheme]) .field input,
html:not([data-theme]):not([data-scheme]) .field select,
html:not([data-theme]):not([data-scheme]) .dms-row input,
html:not([data-theme]):not([data-scheme]) .dms-row select,
html:not([data-theme]):not([data-scheme]) .time-24 input,
html:not([data-theme]):not([data-scheme]) .tz-group select,
html:not([data-theme]):not([data-scheme]) .varga-select-row select,
html:not([data-theme]):not([data-scheme]) .scheme-select{
  background: rgba(20,12,8,0.35) !important; color: var(--ink) !important; border-color: var(--glass-border) !important;
}
html:not([data-theme]):not([data-scheme]) option{ background:#3A2519; color:#F7EEE5; }
html:not([data-theme]):not([data-scheme]) ::placeholder{ color: rgba(247,238,229,0.45); }

/* ===================== SHINING CORNER (default brown theme) =====================
   Like the reference glass cards: light catches the bottom-right corner. Each panel gets
   (1) a rim that brightens toward the bottom-right edge, and (2) a soft glow pooled in that corner. */
html:not([data-theme]):not([data-scheme]) :is(.card, .stat, .sign-badge, .chart-box){
  position:relative; isolation:isolate;
}
/* .identity-bar and .modal-box keep their own sticky/fixed positioning (which already anchors the glow) */
html:not([data-theme]):not([data-scheme]) :is(.modal-box, .identity-bar){ isolation:isolate; }
/* (1) the glowing rim — a gradient border drawn with a mask so only the 1.5px edge shows */
html:not([data-theme]):not([data-scheme]) :is(.card, .modal-box, .identity-bar, .stat, .sign-badge, .chart-box)::before,
html:not([data-theme]):not([data-scheme]) .sidebar::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  pointer-events:none; z-index:2;
  background: linear-gradient(135deg,
      rgba(255,240,225,0.38) 0%, rgba(255,240,225,0.06) 22%,
      rgba(255,240,225,0) 55%, rgba(255,214,168,0.35) 78%,
      rgba(255,236,205,0.95) 94%, #FFF6E8 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* (2) the light pooled in the corner, plus a small specular glint on the curve */
html:not([data-theme]):not([data-scheme]) :is(.card, .modal-box, .identity-bar)::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
  background:
    radial-gradient(10px 10px at calc(100% - 9px) calc(100% - 9px), rgba(255,250,240,0.85), transparent 70%),
    radial-gradient(140px 110px at 100% 100%, rgba(255,205,150,0.30), transparent 70%),
    radial-gradient(360px 240px at 100% 100%, rgba(242,160,90,0.14), transparent 72%);
  mix-blend-mode: screen;
}
/* smaller tiles: a gentler version */
html:not([data-theme]):not([data-scheme]) :is(.stat, .sign-badge, .chart-box)::before{ padding:1px; opacity:0.8; }
html:not([data-theme]):not([data-scheme]) :is(.stat, .sign-badge)::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
  background: radial-gradient(70px 55px at 100% 100%, rgba(255,205,150,0.22), transparent 70%);
  mix-blend-mode: screen;
}
/* the drawer shines at its bottom-right as well */
html:not([data-theme]):not([data-scheme]) .sidebar{
  box-shadow: inset -30px -40px 60px -40px rgba(255,200,140,0.35), 0 30px 60px -20px rgba(0,0,0,0.6) !important;
}
/* keep the corner light still when the card is collapsed/hovered; hide it in print */
@media print{
  :is(.card, .modal-box, .identity-bar, .stat, .sign-badge, .chart-box)::before,
  :is(.card, .modal-box, .identity-bar, .stat, .sign-badge, .chart-box)::after,
  .sidebar::after{ display:none !important; }
}

/* ===================== GOLDEN LOGO (all themes) ===================== */
.app-logo-mark{ color:#E3B23C !important; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.35)); }
.app-logo-yantra [stroke]{ stroke:url(#logoGold); }
.app-logo-yantra circle[fill="currentColor"]{ fill:url(#logoGold); }
.app-logo-bija, .app-logo-line1, .app-logo-line2{
  background: linear-gradient(135deg, #FFF1A8 0%, #F2C84B 38%, #C9961E 65%, #F8DC7A 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:#E3B23C !important;
}
.app-logo-line1{ font-weight:700; }
.app-logo-name{ filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35)); }
/* the printed PDF keeps its single #B33F40 colour */
@media print{
  #printRoot .app-logo-mark, #printRoot .app-logo-name{ filter:none; }
  #printRoot .app-logo-yantra [stroke]{ stroke:#B33F40; }
  #printRoot .app-logo-yantra circle[fill="currentColor"]{ fill:#B33F40; }
  #printRoot .app-logo-bija, #printRoot .app-logo-line1, #printRoot .app-logo-line2{
    background:none; -webkit-text-fill-color:#B33F40;
  }
}

/* ===================== IDENTITY BAR TEXT ALIGNED WITH THE CARDS =====================
   The cards sit in .wrap (max 1180px, 20px side padding => 1140px column, 24px inner padding).
   The name / date / time line uses the same centred column so it starts where the card text starts. */
.identity-bar .identity-left{
  width:100%; max-width:1140px; margin:0 auto; padding-left:24px; box-sizing:border-box;
}
@media (max-width:767px){
  .identity-bar .identity-left{ padding-left:0; }
}

/* ===================== TEXT SIZES ===================== */
/* All tables in the app: 18px text (header cells included). The printed PDF keeps its own sizes. */
@media screen{
  :not(#printRoot *) > table:not(#printRoot *),
  table:not(#printRoot *) th, table:not(#printRoot *) td,
  table:not(#printRoot *) th :is(span, b, strong, i, em, small, a, div, label, button),
  table:not(#printRoot *) td :is(span, b, strong, i, em, small, a, div, label, button){ font-size:18px !important; }
  table:not(#printRoot *) caption{ font-size:18px !important; }

  /* Logo wording: Shreem 21px, Academy 20px (sidebar and top bar) */
  .app-logo .app-logo-line1, .app-logo--compact .app-logo-line1{ font-size:21px !important; }
  .app-logo .app-logo-line2, .app-logo--compact .app-logo-line2{ font-size:20px !important; }
}

/* ===================== WATERMARK: sriyantra-mark.svg, centred ===================== */
body::after{
  content:""; position:fixed; z-index:-1; pointer-events:none;
  left:50% !important; top:50% !important; right:auto !important; bottom:auto !important;
  width:min(82vmin, 760px) !important; height:min(82vmin, 760px) !important;
  transform:translate(-50%, -50%);
  background:url("print-assets/sriyantra-mark.svg") center/contain no-repeat !important;
}
html:not([data-theme]):not([data-scheme]) body::after{
  opacity:0.15;
  /* the grey mark is tinted a warm cream so it reads softly on the brown background */
  filter: invert(1) sepia(1) saturate(1.6) hue-rotate(-12deg) brightness(1.05) blur(0.3px);
}

/* ===================== NO BACKGROUND WATERMARK ===================== */
body::after, html:not([data-theme]):not([data-scheme]) body::after{ content:none !important; display:none !important; background:none !important; }

/* ===================== IDENTITY BAR: flush under the title bar, same width as the cards ===================== */
.identity-bar{
  margin:0 auto !important;
  width:calc(100% - 40px);            /* .wrap side padding is 20px */
  max-width:1140px;                   /* .wrap 1180px minus padding = card width */
  box-sizing:border-box;
  padding:10px 24px !important;       /* card inner padding, so text lines up with card titles */
  top:var(--topbar-h, 68px) !important;
}
.identity-bar .identity-left{ max-width:none !important; padding-left:0 !important; margin:0 !important; }
@media (max-width:767px){
  .identity-bar{ width:calc(100% - 24px); padding:8px 14px !important; }  /* .wrap 12px, card 14px */
}

/* ===================== PREVIOUS / NEXT PAGER (bottom of every screen) ===================== */
.screen-pager{
  display:flex; justify-content:space-between; align-items:stretch; gap:14px;
  margin:26px 0 8px;
}
.pager-btn{
  display:flex; flex-direction:column; gap:3px; min-width:0; max-width:48%;
  padding:12px 20px; border-radius:16px; cursor:pointer; font:inherit; color:var(--ink);
  background: linear-gradient(160deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04)), var(--glass-bg);
  border:1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-shine), var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  transition: transform .15s ease, background-color .15s ease;
}
.pager-btn[hidden]{ display:none; }
.pager-prev{ align-items:flex-start; text-align:left; margin-right:auto; }
.pager-next{ align-items:flex-end; text-align:right; margin-left:auto; }
.pager-btn:hover{ transform:translateY(-1px); background-color: var(--hl-gray-2, rgba(128,128,128,0.12)); }
.pager-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.pager-dir{ font-size:0.8rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-dim); }
.pager-name{ font-family:var(--font-display); font-size:1.1rem; color:var(--gold-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
@media (max-width:767px){
  .pager-btn{ padding:10px 14px; }
  .pager-name{ font-size:1rem; }
}
@media print{ .screen-pager{ display:none !important; } }

/* logo links to the Shreem Academy home page */
a.app-logo { text-decoration: none; color: inherit; cursor: pointer; }
a.app-logo:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 8px; }