/* Nattpass UI polish layer — loaded after the legacy inline styles. */
:root{
  --np-bg:#07101d;
  --np-surface:#0d1826;
  --np-surface-2:#101f31;
  --np-border:#29425f;
  --np-border-strong:#3a5878;
  --np-text:#f5f7fb;
  --np-muted:#9fb0c4;
  --np-accent:#ffd34d;
  --np-good:#6fe29b;
  --np-shadow:0 18px 46px rgba(0,0,0,.28);
  --np-shadow-soft:0 10px 28px rgba(0,0,0,.18);
}

html{scroll-behavior:smooth;background:var(--np-bg)}
body{overflow-x:hidden;background:radial-gradient(circle at 50% -160px,#11243a 0,#07101d 420px);line-height:1.5}
body:not(.public-home) main.wrap{max-width:1220px;padding-top:28px;padding-bottom:110px}
body:not(.public-home) #ov,
body:not(.public-home) #customer,
body:not(.public-home) #admin{animation:npFadeIn .2s ease-out}

.top{z-index:60;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:box-shadow .2s ease,border-color .2s ease,background .2s ease}
.top.ui-scrolled{box-shadow:0 10px 32px rgba(0,0,0,.34);border-bottom-color:#36516f;background:#07101df7}
.logo{white-space:nowrap;text-shadow:0 2px 18px rgba(255,211,77,.12)}

button,.btn{transition:transform .14s ease,box-shadow .14s ease,filter .14s ease,border-color .14s ease;background-color .14s ease}
button:not(:disabled):active,.btn:active{transform:translateY(1px) scale(.99)}
button:disabled,.btn[aria-disabled="true"]{cursor:not-allowed;opacity:.58;filter:saturate(.7)}
button.is-busy{cursor:progress!important;position:relative}
button:focus-visible,.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid rgba(255,211,77,.48);outline-offset:2px
}

.field input,.field select,.field textarea,.searchbar input,
input,select,textarea{transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
.field input:focus,.field select:focus,.field textarea:focus,.searchbar input:focus,
input:focus,select:focus,textarea:focus{border-color:#6d8fb2;box-shadow:0 0 0 3px rgba(83,126,168,.18);background:#0a1726}
textarea{resize:vertical;min-height:92px}
::placeholder{color:#70849a;opacity:1}

.card{box-shadow:var(--np-shadow-soft);border-color:#28415c}
.empty{background:rgba(9,20,33,.48)}
.section{scroll-margin-top:86px}
.eyebrow,.tag{letter-spacing:1px}
.muted{line-height:1.55}

/* Logged-in app: stronger hierarchy without changing the existing content model. */
body:not(.public-home) main.wrap>section>h2{font-size:clamp(28px,4vw,40px);letter-spacing:-.02em;margin:6px 0 8px}
body:not(.public-home) .card h3{margin-top:2px}
body:not(.public-home) .grid{gap:16px}
body:not(.public-home) .quick{margin:14px 0 18px}
body:not(.public-home) .quick button{border:1px solid #38516e;background:#132338;color:#fff}
body:not(.public-home) .quick button:first-child{background:#ffd34d;color:#07101d;border-color:#ffd34d}
body:not(.public-home) .salary{box-shadow:var(--np-shadow);position:relative;overflow:hidden}
body:not(.public-home) .salary:after{content:'';position:absolute;width:180px;height:180px;border-radius:50%;right:-80px;top:-90px;background:rgba(255,211,77,.06);pointer-events:none}

.plannerstats>div,.kpi{border:1px solid rgba(74,103,134,.26);background:linear-gradient(145deg,#0b1725,#0a1421)}
.plannerstats>div b,.kpi b{font-variant-numeric:tabular-nums}
.passes article,.searchitem{transition:border-color .16s ease,background .16s ease,transform .16s ease}

/* Public landing: tighter premium consistency. */
body.public-home .desktopLanding,
body.public-home .hero{isolation:isolate}
body.public-home .salesSection,
body.public-home .pricingSection,
body.public-home .salesBand,
body.public-home .finalCta{box-shadow:var(--np-shadow-soft)}
body.public-home .priceCard{box-shadow:0 22px 60px rgba(0,0,0,.32)}
body.public-home .showcaseCard{border-color:#314b67}
body.public-home .desktopNav a{position:relative}
body.public-home .desktopNav a:after{content:'';position:absolute;left:0;right:100%;bottom:-7px;height:2px;background:#ffd34d;transition:right .18s ease}
body.public-home .desktopNav a:hover:after{right:0}

/* Dialogs and feedback. */
.applyConfirm{backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.applyConfirmCard{max-height:min(86vh,780px);overflow:auto;box-shadow:0 30px 90px rgba(0,0,0,.58)}
.applyConfirmClose{min-width:44px;min-height:44px}
.toast{border:1px solid rgba(7,16,29,.16);box-shadow:0 16px 50px rgba(0,0,0,.36);animation:npToastIn .18s ease-out}

/* Details fields become a deliberate advanced-settings surface. */
details{border:1px solid #263e57;border-radius:12px;background:#0a1523;margin:12px 0;padding:0 12px}
summary{cursor:pointer;padding:12px 2px;font-weight:800;list-style:none;color:#c5d0dc}
summary::-webkit-details-marker{display:none}
summary:after{content:'+';float:right;color:#ffd34d;font-size:20px;line-height:1}
details[open] summary:after{content:'−'}
details[open] summary{border-bottom:1px solid #20364e;margin-bottom:10px}

/* Calendar: clearer selected and hover states. */
.calendar{align-items:stretch}
.calday{min-height:42px;border-radius:9px;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.calday.selected{box-shadow:0 0 0 2px rgba(255,211,77,.22),0 8px 18px rgba(0,0,0,.18)}

@media (hover:hover) and (pointer:fine){
  button:not(:disabled):hover,.btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.2);filter:brightness(1.035)}
  .secondary:not(:disabled):hover{border-color:#547597;background:#1a2d45}
  .card:hover{border-color:#33516e}
  .passes article:hover,.searchitem:hover{border-color:#456989;background:#102035}
  .calday:hover{border-color:#557898}
  body.public-home .showcaseCard:hover{transform:translateY(-3px);border-color:#4a6785;box-shadow:0 24px 58px rgba(0,0,0,.3)}
}

@media(min-width:851px){
  body:not(.public-home) main.wrap{padding-left:28px;padding-right:28px}
  body:not(.public-home) .card{padding:22px}
  body:not(.public-home) #customer>.grid,
  body:not(.public-home) #admin>.grid{align-items:start}
  .login.card{box-shadow:0 26px 80px rgba(0,0,0,.36)}
}

@media(max-width:850px){
  body{background:linear-gradient(180deg,#07101d 0,#081421 54%,#07101d 100%)}
  .top{min-height:62px;align-items:center;gap:8px}
  .top #session{min-width:0;justify-content:flex-end}
  .top #session button{min-height:42px}
  body:not(.public-home) main.wrap{padding:18px 16px calc(112px + env(safe-area-inset-bottom));max-width:none}
  body:not(.public-home) .section{margin-top:24px}
  body:not(.public-home) .card{border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.16)}
  body:not(.public-home) .grid{gap:12px}
  .row>*{min-width:0}
  .applyConfirmCard{max-height:calc(100dvh - 34px);border-radius:18px}
  .calendar{gap:5px}
  .calday{padding:8px 2px;min-height:40px;border-radius:8px;font-size:13px}
}

@media(max-width:650px){
  body{font-size:15px}
  button,.btn{min-height:44px}
  input,select,textarea{font-size:16px}
  .top{padding-left:14px;padding-right:14px}
  .top .logo{font-size:17px;letter-spacing:1.5px}
  .top #session{gap:6px}
  .top #session button{padding:9px 10px;font-size:12px;white-space:nowrap}
  .mobileNav:not(.hidden){z-index:1000;gap:4px;padding:7px calc(7px + env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) calc(7px + env(safe-area-inset-left));background:rgba(7,16,29,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 -10px 34px rgba(0,0,0,.34)}
  .mobileNav button{min-height:54px;padding:7px 2px;border:1px solid transparent}
  .mobileNav button b{font-size:19px;line-height:1.05;margin-bottom:3px}
  .mobileNav button.active{border-color:#2d4763;box-shadow:inset 0 0 0 1px rgba(255,211,77,.04)}
  .plannerstats{gap:7px}
  .plannerstats>div{padding:11px 8px}
  .quick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .quick button{width:100%;font-size:12px;padding:8px}
  .passes article{border-radius:15px}
  body.public-home .heroCtas{grid-template-columns:1fr 1fr}
  body.public-home .heroCtas button{min-height:48px}
  body.public-home .salesSection,
  body.public-home .pricingSection,
  body.public-home .salesBand,
  body.public-home .finalCta{border-radius:18px}
}

@media(max-width:420px){
  .top #session button{padding:8px 9px}
  body.public-home .heroCtas{grid-template-columns:1fr}
  .quick{grid-template-columns:1fr}
  .plannerstats{grid-template-columns:1fr 1fr}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

@keyframes npFadeIn{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes npToastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}