:root{
  --bg:#0b0c10; --card:#13151a; --text:#e8ecf1; --muted:#9aa4af; --brand:#4aa3ff; --accent:#6ae3b2; --danger:#ff6b6b; --border:#232734;
  --shadow:0 6px 24px rgba(0,0,0,.35);
}
:root[data-theme="light"]{
  --bg:#f7f8fa; --card:#ffffff; --text:#0f172a; --muted:#475569; --brand:#2563eb; --accent:#059669; --danger:#b91c1c; --border:#e2e8f0;
  --shadow:0 6px 24px rgba(2,6,23,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial}
.wrap{max-width:1100px;margin:0 auto;padding:24px}

header{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-bottom:8px}
.title{display:flex;gap:12px;align-items:center}
.logoImg{width:48px;height:auto;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.toggle{appearance:none;border:1px solid var(--border);background:var(--card);color:var(--text);padding:8px 12px;border-radius:12px;cursor:pointer;box-shadow:var(--shadow)}

.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
h1{font-size:24px;margin:0}
h2{font-size:18px;margin:0 0 8px}
label{font-weight:600;display:block;margin:14px 0 6px}
input[type="number"], select, input[type="date"], input[type="text"]{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:var(--bg);color:var(--text)}
input[type="range"]{width:100%}
.row{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.row > div{flex:1 1 240px;min-width:220px}
.muted{color:var(--muted);font-size:14px}
.divider{height:1px;background:var(--border);margin:12px -16px}

.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:12px}
.pill{border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.05));border-radius:14px;padding:10px 12px}
.pill h3{margin:0 0 6px;font-size:15px;color:var(--muted);font-weight:600}
.big{font-size:24px;font-weight:800}
.headline{font-size:26px;font-weight:900;line-height:1.15;margin:0 0 4px}
.primary{outline:2px solid var(--brand);}
.btn{appearance:none;border:1px solid var(--border);background:var(--brand);color:white;padding:10px 14px;border-radius:12px;cursor:pointer}
.btn.secondary{background:transparent;color:var(--text)}

.cardlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.gift{border:1px solid var(--border);border-radius:12px;padding:12px}
.gift h4{margin:0 0 6px}
.link{background:none;border:0;color:var(--brand);cursor:pointer;text-decoration:underline;padding:0}
.hero{margin:4px 0 0 60px}
.warn{background:rgba(255,107,107,.1);border:1px solid var(--danger);color:var(--danger);padding:8px 10px;border-radius:10px;margin:8px 0}

/* Plan lanes */
.plan{margin-top:12px}
.lane{border:1px solid var(--border);border-radius:12px;padding:12px;margin:8px 0;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.04))}
.lane h4{margin:0 0 6px;font-size:15px;color:var(--muted)}
.lane ul{margin:0;padding-left:18px}
.lane li{margin:4px 0}

/* Splash */
.splash{
  position:fixed; inset:0; display:grid; place-items:center;
  background:radial-gradient(1000px 500px at 20% 10%, rgba(255,255,255,.06), transparent),
             radial-gradient(1000px 500px at 80% 90%, rgba(255,255,255,.05), transparent),
             var(--bg);
  z-index:9999; transition:opacity .5s ease; opacity:1;
}
.splash.hide{ opacity:0; pointer-events:none }
.splash .logoWrap{ display:grid; place-items:center; border-radius:20px; filter:drop-shadow(0 6px 16px rgba(0,0,0,.45)); }
.splash .logoWrap img {
  width: auto;
  height: auto;
  max-width: 60vw;   /* scale relative to viewport width */
  max-height: 60vh;  /* scale relative to viewport height */
  image-rendering: auto;
}
/* Support both class and id for the splash container */
#splash,
.splash {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  /* keep your existing gradient/background via the class rule */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  z-index: 9999;
}

#splash.hide,
.splash.hide {
  opacity: 0;
  pointer-events: none;
}

/* Constrain the logo robustly on all devices */
#splash .logoWrap img,
.splash .logoWrap img {
  width: auto;
  height: auto;
  max-width: clamp(160px, 60vw, 420px);
  max-height: 60vh;
  object-fit: contain;
  image-rendering: auto;
}

/* Make the logo a bit smaller on very short screens (e.g., landscape phones) */
@media (max-height: 540px) {
  #splash .logoWrap img,
  .splash .logoWrap img {
    max-width: clamp(140px, 50vw, 360px);
    max-height: 50vh;
  }
}

/* Respect reduced-motion preferences (optional) */
@media (prefers-reduced-motion: reduce) {
  #splash,
  .splash {
    transition: none !important;
  }
}