:root{
  --bgImage: none;
  --bg:#0b1220;
  --card:#0f1b2f;
  --card2:#0b1629;
  --text:#e9f0ff;
  --muted:#a8b3c7;
  --accent:var(--accentHex);
  --danger:#ff4d4d;
  --ok:#27c26a;
  --border:rgba(255,255,255,.12);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius:18px;
  --radius2:26px;
  --tap:48px;
  --bgTop:#071022;
  --bgBottom:#0b1220;
  --accentHex:var(--accentHex);
  --accentRgb:45,125,255;
}
*{box-sizing:border-box;}
/*
  NOTE (v34):
  Android Chrome can report a "virtual" 100vh when the URL bar is shown/hidden,
  which may cause the background and/or scrollable content to look cut off.
  Use svh/dvh + safe-area padding to keep the layout stable.
*/

:root{
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* approximate fixed bars heights for scroll calculations */
  --topbar-h: 64px;
  --bottomnav-h: 86px;
}

html,body{
  margin:0;
  padding:0;
  height:100%;
  min-height:100%;
  color: var(--text);
  background-image: var(--bgImage), linear-gradient(180deg,var(--bgTop),var(--bgBottom));
  background-size: cover, auto;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
}

/* Prefer stable viewport units when available */
body{
  min-height: 100vh;   /* fallback */
  min-height: 100svh;  /* stable viewport height */
  min-height: 100dvh;  /* dynamic viewport height (newer browsers) */
}

/* Parent mode: keep normal page scroll (fix: parent mode became non-scrollable in v35) */
body.parentMode{ overflow-y:auto; }

@media (max-width: 980px){
  html,body{ background-attachment: scroll, scroll; }
}

a{color:var(--text);text-decoration:none;}

.container{
  max-width:820px;
  margin:0 auto;
  padding:18px;
  /* keep content above fixed bottom nav + device safe area */
  padding-bottom: calc(18px + 86px + var(--safe-bottom));
}
.h1{font-size:36px;font-weight:900;letter-spacing:.02em;margin:8px 0 14px;}
.sub{color:var(--muted);margin-top:-6px;margin-bottom:16px;}
.card{background:radial-gradient(1200px 500px at 0% -20%,rgba(var(--accentRgb),.22),transparent 60%),linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--border);border-radius:var(--radius2);box-shadow:var(--shadow);padding:16px;}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.grow{flex:1;}
.label{font-size:13px;color:var(--muted);margin:0 0 6px 2px;}
.input, select, textarea{
  width:100%;
  background:rgba(0,0,0,.18);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px 14px;
  outline:none;
}
textarea{min-height:84px;resize:vertical;}
.pill{
  background:rgba(0,0,0,.18);
  border:1px solid var(--border);
  border-radius:999px;
  padding:10px 14px;
  display:inline-flex; align-items:center; gap:8px;
}
.points{font-size:34px;font-weight:900;}
.btn{
  height:var(--tap);
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  color:var(--text);
  padding:0 16px;
  border-radius:16px;
  font-weight:800;
}
.btn.primary{background:rgba(var(--accentRgb),.95);border-color:rgba(var(--accentRgb),.95);}
.btn.danger{background:rgba(255,77,77,.18);border-color:rgba(255,77,77,.5);}
.btn:active{transform:translateY(1px);}
.hr{height:1px;background:var(--border);margin:14px 0;}
.list{display:flex;flex-direction:column;gap:10px;}
.item{
  border:1px solid var(--border);
  background:rgba(0,0,0,.12);
  border-radius:18px;
  padding:12px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  justify-content:space-between;
}
.item .meta{color:var(--muted);font-size:12px;margin-top:3px;}
.badge{padding:6px 10px;border-radius:999px;font-weight:900;font-size:13px;border:1px solid var(--border);}
.badge.ok{background:rgba(39,194,106,.15);border-color:rgba(39,194,106,.4);}
.badge.zero{background:rgba(255,255,255,.06);}
.navbar{
  position:fixed;left:0;right:0;bottom:0;
  background:rgba(7,16,34,.8);
  backdrop-filter: blur(10px);
  border-top:1px solid var(--border);
}
.navbar .inner{
  max-width:820px;
  margin:0 auto;
  display:flex;
  gap:10px;
  padding:10px 14px;
  padding-bottom: calc(10px + var(--safe-bottom));
}
.navbtn{
  flex:1;
  height:76px;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  color:var(--text);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;
}
.navbtn.active{background:rgba(var(--accentRgb),.22);border-color:rgba(var(--accentRgb),.5);}
.bottom-pad{height: calc(86px + var(--safe-bottom));}
.small{font-size:12px;color:var(--muted);}
.grid,.calendarGrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.cell{
  min-height:56px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:6px;
  background:rgba(0,0,0,.10);
}
.dow{font-size:12px;color:var(--muted);text-align:center;padding:6px 0;}
.daynum{font-weight:900;font-size:13px;color:var(--text);}
.sum{margin-top:8px;font-size:12px;color:var(--muted);}
@media (max-width:420px){
  .h1{font-size:30px;}
  .points{font-size:30px;}
}
.ver{font-size:14px;opacity:.6;margin-left:8px;}

.avatar{
  width:44px;height:44px;border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  margin-right:10px;
  flex:0 0 auto;
}
.avatar svg{width:26px;height:26px;opacity:.95}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:rgba(0,0,0,.12);font-size:12px;color:var(--muted)}
.modalBack{
  position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:16px;z-index:50;
}
.modal{
  width:min(520px,100%);max-height:80vh;overflow:auto;
  background:rgba(6,10,18,.94);border:1px solid var(--border);border-radius:20px;
  padding:16px;box-shadow:0 18px 60px rgba(0,0,0,.45);
}
.modal h3{margin:0 0 10px 0;font-size:18px}
.modal .closeRow{display:flex;justify-content:flex-end}
.modal .closeBtn{border:1px solid var(--border);background:rgba(255,255,255,.05);color:var(--text);padding:8px 10px;border-radius:14px}
.kidMeta{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.selSmall{min-width:160px}
.disabled{opacity:.45;pointer-events:none}


/* v16 theming (galaxy) */
body{
  position:relative;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:-40px;
  z-index:-2;
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(var(--accentRgb),.35), transparent 60%),
    radial-gradient(900px 700px at 80% 30%, rgba(var(--accentRgb),.22), transparent 55%),
    radial-gradient(800px 600px at 30% 85%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(3px 3px at 10% 15%, rgba(255,255,255,.18) 45%, transparent 46%),
    radial-gradient(2px 2px at 40% 25%, rgba(255,255,255,.14) 45%, transparent 46%),
    radial-gradient(2px 2px at 70% 18%, rgba(255,255,255,.14) 45%, transparent 46%),
    radial-gradient(2px 2px at 85% 55%, rgba(255,255,255,.12) 45%, transparent 46%),
    radial-gradient(2px 2px at 20% 65%, rgba(255,255,255,.12) 45%, transparent 46%),
    radial-gradient(2px 2px at 55% 78%, rgba(255,255,255,.10) 45%, transparent 46%),
    linear-gradient(180deg, rgba(4,10,18,1) 0%, rgba(2,8,14,1) 100%);
  filter:saturate(1.1);
}
body.theme-son{ --accentRgb: 74,169,255; }
body.theme-daughter{ --accentRgb: 255,72,162; }

/* header */
.topbar{
  position:sticky; top:0; z-index:20;
  padding:14px 16px;
  backdrop-filter: blur(14px);
  background: rgba(10,16,28,.55);
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:space-between;
}
.appTitle{ font-weight:900; font-size:22px; letter-spacing:.5px; }
.appVer{ font-size:.68em; font-weight:800; opacity:.75; margin-left:10px; padding:4px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); display:inline-flex; align-items:center; }
.iconBtn{
  width:36px; height:36px; border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color:var(--text);
  font-size:20px;
}
.iconBtn:active{ transform: translateY(1px); }

.modeBtn{
  height:36px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color:var(--text);
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:900;
}
.modeKanji{
  width:22px;
  height:22px;
  border-radius:8px;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.10);
  font-size:13px;
}
.modeText{ font-size:13px; }

/* cards */
.card.glass{
  background: linear-gradient(180deg, rgba(26,52,92,.55) 0%, rgba(12,22,40,.72) 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.cardLink{
  width:100%;
  text-align:left;
  border-radius:16px;
  padding:14px 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(var(--accentRgb), .18);
  color:var(--text);
}
.pointsLine{
  font-weight:900;
  font-size:18px;
}
#pointsBig{ font-size:26px; margin-left:6px; }
.ptUnit{ font-size:16px; margin-left:4px; opacity:.9; }
.chev{ font-size:26px; opacity:.8; padding-left:8px; }
.miniIcon{
  width:28px; height:28px;
  border-radius:999px;
  display:grid; place-items:center;
  position:relative;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.22), rgba(255,255,255,.08) 45%, rgba(0,0,0,.18) 100%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.14),
    inset 0 -10px 16px rgba(0,0,0,.22),
    0 6px 14px rgba(0,0,0,.30);
}
.miniIcon::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:999px;
  background:
    radial-gradient(circle at 25% 20%, rgba(var(--accentRgb),.50), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(var(--accentRgb),.22), transparent 62%);
  opacity:.9;
  z-index:-1;
}
.miniIcon::after{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  pointer-events:none;
}
.miniIcon svg{ width:18px; height:18px; }

.avatar.big{
  width:76px;
  height:76px;
  border-radius:999px;
  position:relative;
  overflow:visible;
  /* glassy medallion */
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.32), rgba(255,255,255,.10) 42%, rgba(0,0,0,.22) 100%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  backdrop-filter: blur(14px) saturate(1.35);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.22),
    inset 0 -20px 30px rgba(0,0,0,.28),
    0 14px 30px rgba(0,0,0,.38);
  cursor:default;
}
.avatar.big::before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:999px;
  background:
    radial-gradient(circle at 25% 20%, rgba(var(--accentRgb),.60), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(var(--accentRgb),.26), transparent 62%);
  filter: blur(.2px);
  opacity:.95;
  box-shadow:
    0 0 25px rgba(var(--accentRgb), .42),
    0 0 62px rgba(var(--accentRgb), .22);
  animation: ringPulse 3.6s ease-in-out infinite;
  z-index:-1;
}
.avatar.big::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:999px;
  /* inner glass rim + specular highlight */
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.24) 0%,
      rgba(255,255,255,.10) 18%,
      transparent 55%);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.10),
    inset 0 10px 18px rgba(255,255,255,.06);
  mix-blend-mode: screen;
  opacity:.92;
  pointer-events:none;
}
.avatar.big svg{ width:39px; height:39px; position:relative; z-index:3; }

/* Decorative medallion effects */
/* Inner rotating wedge highlight (A) */
.avatar.big .medallionInnerGlint{
  position:absolute;
  /* inner rotating wedge (legacy) */
  inset:2px;
  border-radius:999px;
  pointer-events:none;
  z-index:2;

  /* bright wedge inside the glass */
  background:
    conic-gradient(from 10deg,
      transparent 0 300deg,
      rgba(255,255,255,.00) 300deg,
      rgba(255,255,255,.38) 316deg,
      rgba(255,255,255,.08) 336deg,
      transparent 350deg 360deg);

  /* keep it inside (not a ring) */
  -webkit-mask: radial-gradient(circle, rgba(255,255,255,1) 0 80%, transparent 84% 100%);
  mask: radial-gradient(circle, rgba(255,255,255,1) 0 80%, transparent 84% 100%);

  opacity:.32;
  filter: blur(.5px);
  mix-blend-mode: screen;

  animation: innerGlintRotate 5.6s linear infinite;
}

@keyframes innerGlintRotate{
  0%{ transform: rotate(0deg); opacity:.22; }
  50%{ transform: rotate(180deg); opacity:.36; }
  100%{ transform: rotate(360deg); opacity:.22; }
}

/* Rotating flare (no horizontal “light bar” sweep) */
.avatar.big .medallionGlint{
  position:absolute;
  inset:-3px;
  border-radius:999px;
  pointer-events:none;
  z-index:4;

  /* a thin bright arc that rotates around the rim */
  background:
    conic-gradient(from 0deg,
      transparent 0 300deg,
      rgba(255,255,255,.00) 300deg,
      rgba(255,255,255,.55) 316deg,
      rgba(255,255,255,.00) 332deg,
      transparent 332deg 360deg);

  /* show it as a ring (hide the center) */
  -webkit-mask: radial-gradient(circle, transparent 0 62%, rgba(255,255,255,1) 64% 100%);
  mask: radial-gradient(circle, transparent 0 62%, rgba(255,255,255,1) 64% 100%);

  opacity:.55;
  filter: blur(.5px);
  mix-blend-mode: screen;

  animation: glintRotate 4.8s linear infinite;
}

/* secondary softer arc for depth */
.avatar.big .medallionGlint::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    conic-gradient(from 120deg,
      transparent 0 320deg,
      rgba(255,255,255,.00) 320deg,
      rgba(255,255,255,.28) 334deg,
      rgba(255,255,255,.00) 346deg,
      transparent 346deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 58%, rgba(255,255,255,1) 61% 100%);
  mask: radial-gradient(circle, transparent 0 58%, rgba(255,255,255,1) 61% 100%);
  opacity:.35;
  filter: blur(.55px);
  mix-blend-mode: screen;
  animation: glintRotate2 6.2s linear infinite;
}

@keyframes glintRotate{
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(360deg); }
}

@keyframes glintRotate2{
  0%{ transform: rotate(0deg); opacity:.22; }
  50%{ transform: rotate(180deg); opacity:.38; }
  100%{ transform: rotate(360deg); opacity:.22; }
}

@keyframes ringPulse{
  0%, 100%{ opacity:.80; transform: scale(1); }
  50%{ opacity:1; transform: scale(1.025); }
}



/* Decorative medallion effects (v53 reset + recommended composite)
   - Prism ring (rainbow, soft)
   - Bloom (subtle lens bloom)
   - Arc flare (single highlight arc rotating on the ring)
   No particle sparkles. No horizontal sweep bar.
*/

/* Safety: if old markup remains anywhere, hide legacy layers */
.avatar.big .medallionInnerGlint,
.avatar.big .medallionGlint,
.avatar.big .sparkle{ display:none !important; }

.avatar.big .medallionPrism,
.avatar.big .medallionBloom,
.avatar.big .medallionArcFlare{
  position:absolute;
  inset:-20px;
  border-radius:999px;
  pointer-events:none;
}

/* Prism ring: D-ish rainbow edge, softened. */
.avatar.big .medallionPrism{
  background: conic-gradient(
    from 210deg,
    rgba(255, 50, 90, .85),
    rgba(255, 160, 50, .80),
    rgba(255, 240, 80, .78),
    rgba(80, 255, 170, .72),
    rgba(60, 170, 255, .78),
    rgba(150, 90, 255, .86),
    rgba(255, 50, 90, .85)
  );
  -webkit-mask: radial-gradient(circle, transparent 0 62%, rgba(255,255,255,1) 64% 78%, transparent 80% 100%);
  mask: radial-gradient(circle, transparent 0 62%, rgba(255,255,255,1) 64% 78%, transparent 80% 100%);
  filter: blur(.8px) saturate(1.25);
  opacity:.80;
  mix-blend-mode: screen;
  animation: prismHue 7.5s linear infinite;
}

/* Lens bloom: subtle halo + slight chroma haze */
.avatar.big .medallionBloom{
  inset:-20px;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.32), transparent 58%),
    radial-gradient(circle at 78% 70%, rgba(80,170,255,.16), transparent 62%),
    radial-gradient(circle at 18% 80%, rgba(255,80,150,.10), transparent 68%);
  filter: blur(1.7px);
  opacity:.65;
  mix-blend-mode: screen;
  animation: bloomPulse 4.2s ease-in-out infinite;
}

/* Arc flare: rotating highlight arc on the ring (NOT a sweeping bar) */
.avatar.big .medallionArcFlare{
  inset:-17px;
  background: conic-gradient(
    from 0deg,
    transparent 0 320deg,
    rgba(255,255,255,0) 320deg,
    rgba(255,255,255,.82) 342deg,
    rgba(255,255,255,.18) 354deg,
    transparent 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 0 64%, rgba(255,255,255,1) 66% 76%, transparent 78% 100%);
  mask: radial-gradient(circle, transparent 0 64%, rgba(255,255,255,1) 66% 76%, transparent 78% 100%);
  filter: blur(.5px);
  opacity:.72;
  mix-blend-mode: screen;
  animation: arcSpin 3.8s linear infinite;
}

@keyframes arcSpin{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }
@keyframes prismHue{
  0%{ filter: blur(.6px) saturate(1.25) hue-rotate(0deg); opacity:.78; }
  50%{ filter: blur(.7px) saturate(1.35) hue-rotate(18deg); opacity:.86; }
  100%{ filter: blur(.6px) saturate(1.25) hue-rotate(0deg); opacity:.78; }
}
@keyframes bloomPulse{
  0%,100%{ opacity:.55; transform: scale(1); }
  50%{ opacity:.78; transform: scale(1.01); }
}

@media (prefers-reduced-motion: reduce){
  .avatar.big .medallionPrism,
  .avatar.big .medallionBloom,
  .avatar.big .medallionArcFlare{ animation:none; }
}

/* tabs */
.tabs{
  display:flex;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  overflow:hidden;
}
.tabBtn{
  flex:1;
  padding:10px 12px;
  font-weight:900;
  color:rgba(255,255,255,.85);
  background:transparent;
  border:0;
}
.tabBtn.active{
  color:#08101d;
  background: rgba(var(--accentRgb), .95);
}
.tabBtn:not(.active){ border-right:1px solid rgba(255,255,255,.08); }
.tabBtn:last-child{ border-right:0; }

/* segmented tabs (parent mode) */
.segTabs{
  display:flex;
  gap:8px;
  padding:8px;
  margin:6px 2px 6px;
  border-radius:18px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
}
.segBtn{
  flex:1;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.85);
  font-weight:900;
}
.segBtn.active{
  color:#08101d;
  background: rgba(var(--accentRgb), .95);
  box-shadow: 0 10px 28px rgba(var(--accentRgb), .25);
}

/* parent panel placeholder */
.parentPanel{
  margin-top:14px;
  padding:12px;
  border-radius:16px;
  border:1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
}

/* Parent mode scroll container (only the panel scrolls) */
body.parentMode .parentPanel{
  max-height: calc(100dvh - var(--topbar-h) - var(--bottomnav-h) - var(--safe-bottom) - 28px);
  overflow:auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.parentHint{ font-size:12px; color:rgba(255,255,255,.75); }

/* nav - glow by theme */
/* ===== v18: bottom nav = "one glass plate", active glows & pops, inactive sinks ===== */
.bottomNav{
  position:fixed;
  left:0; right:0; bottom:0;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:transparent;
  z-index:60;
}
.bottomNavInner{
  max-width:820px;
  margin:0 auto;
  display:flex;
  gap:10px;
  padding:12px 14px;
  border-radius:22px;
  background:rgba(7,16,34,.65);
  backdrop-filter: blur(16px);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.25);
}

.navBtn{
  flex:1;
  height:52px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  letter-spacing:.02em;
  user-select:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -6px 12px rgba(0,0,0,.20);
  opacity:.75;
  transform: translateY(1px);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, opacity .12s ease, border-color .12s ease;
}
.navBtn:active{
  transform: translateY(2px) scale(.99);
}
.navBtn.active{
  opacity:1;
  transform: translateY(-1px);
  border-color: rgba(var(--accentRgb), .55);
  background:
    radial-gradient(120% 140% at 30% 20%, rgba(255,255,255,.18), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(var(--accentRgb), .30), rgba(var(--accentRgb), .12));
  box-shadow:
    0 10px 22px rgba(0,0,0,.32),
    0 0 0 1px rgba(var(--accentRgb), .25),
    0 0 26px rgba(var(--accentRgb), .45),
    inset 0 1px 0 rgba(255,255,255,.12);
  color:#fff;
}

/* page content spacer so nav doesn't overlap */
.bottomPad{height:110px;}


/* v20 SPA nav glass */
.glassNav{position:fixed;left:14px;right:14px;bottom:14px;z-index:50;}
.glassNav{display:flex;gap:10px;justify-content:space-between;padding:10px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(14px);}
.glassNav .navItem{flex:1;border-radius:14px;padding:10px 8px;border:1px solid transparent;background:rgba(255,255,255,.06);color:rgba(255,255,255,.85);font-weight:900;}
.glassNav .navItem.active{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.18);box-shadow:0 10px 24px rgba(0,0,0,.35);color:#fff;}
body{padding-bottom:92px;}


.bgPreview{width:110px;height:110px;border-radius:18px;border:1px solid var(--border);background:rgba(255,255,255,.06);background-image: var(--bgPreviewImg, none);background-size:cover;background-position:center;box-shadow:0 10px 25px rgba(0,0,0,.35);}

input::placeholder, textarea::placeholder{ color: rgba(233,243,255,.55); }

input, textarea, select{ color: var(--text); }


/* v29 Parent mode indicator */
.parentBadge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:10px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.06em;
  color:rgba(255,255,255,.95);
  border:1px solid rgba(255,255,255,.14);
  background:rgba(10,16,28,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

/* Parent toggle: only show label when ON */
.modeBtn .modeText{ display:none; }
.modeBtn.on .modeText{ display:inline; }
.modeBtn.on{
  border-color: rgba(255,255,255,.26);
  background: rgba(20,40,70,.55);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 12px 30px rgba(0,0,0,.28),
    0 0 26px rgba(66,153,255,.35);
}
.modeBtn.on .modeKanji{
  filter: drop-shadow(0 0 10px rgba(66,153,255,.45));
}

/* v30 Parent mode fixed pill + pending list */
.parentPill{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.06em;
  color:#fff;
  cursor:pointer;
  border:1px solid rgba(255,215,115,.22);
  background: rgba(255,255,255,.06);
  box-shadow: 0 10px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.parentPill.on{
  border-color: rgba(255,215,115,.36);
  background: linear-gradient(180deg, rgba(255,215,115,.26), rgba(255,215,115,.10));
  box-shadow:
    0 10px 24px rgba(0,0,0,.28),
    0 0 26px rgba(255,215,115,.26),
    inset 0 1px 0 rgba(255,255,255,.14);
}

.pendingCard{
  margin: 12px 0;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.pendingTitle{font-weight:900;font-size:18px;}
.pendingMeta{margin-top:6px;color:rgba(255,255,255,.72);font-size:12px;line-height:1.35;}

.chipRow{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.chip{
  border-radius:999px;
  padding:8px 10px;
  font-weight:900;
  font-size:13px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}
.chip.active{
  border-color: rgba(var(--accentRgb), .42);
  background: rgba(var(--accentRgb), .18);
  box-shadow: 0 0 22px rgba(var(--accentRgb), .28);
}

.otherWrap{margin-top:10px;display:flex;gap:10px;align-items:center;}
.otherWrap .input{flex:1;}

.actionRow{display:flex;gap:12px;margin-top:12px;}
.actionRow .btn{flex:1;}

/* align close button in topbar */
#btnParentClose{margin-right:10px;}