:root {
  color-scheme: light;
  --primary:      #ff2d95;
  --primary-dark: #cc1f86;
  --glow:         rgba(255,45,149,.4);
  --glow-soft:    rgba(255,45,149,.16);
  --ink:          #5a2540;
  --muted:        #b06a8d;
  --title-font:   'Pacifico', cursive;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

/* ── Keyframes ── */
@keyframes floaty    { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-22px) rotate(10deg)} }
@keyframes twinkle   { 0%,100%{opacity:.35;transform:scale(.85)} 50%{opacity:1;transform:scale(1.2)} }
@keyframes pop       { 0%{transform:scale(.97);opacity:0} 60%{transform:scale(1.01)} 100%{transform:scale(1);opacity:1} }
@keyframes toastIn   { 0%{transform:translate(-50%,24px);opacity:0} 60%{transform:translate(-50%,-4px)} 100%{transform:translate(-50%,0);opacity:1} }
@keyframes spin      { to{transform:rotate(360deg)} }
@keyframes heartbeat { 0%,100%{transform:scale(1)} 30%{transform:scale(1.22)} 45%{transform:scale(1.05)} 60%{transform:scale(1.18)} }
@keyframes bounce    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes fillbar   { 0%{width:4%} 100%{width:100%} }
@keyframes shimmer   { 0%{background-position:0% 50%} 100%{background-position:300% 50%} }
@keyframes riseIn    { 0%{transform:translateY(22px);opacity:0} 100%{transform:translateY(0);opacity:1} }
@keyframes glowpulse { 0%,100%{box-shadow:0 8px 22px var(--glow),inset 0 1.5px 0 rgba(255,255,255,.55)} 50%{box-shadow:0 8px 34px var(--glow),0 0 0 4px var(--glow-soft),inset 0 1.5px 0 rgba(255,255,255,.55)} }
@keyframes fall      { 0%{transform:translateY(-15vh) rotate(0deg);opacity:0} 8%{opacity:1} 100%{transform:translateY(118vh) rotate(720deg);opacity:.85} }
@keyframes wiggle    { 0%,100%{transform:rotate(-8deg) translateY(0)} 50%{transform:rotate(8deg) translateY(-12px)} }
@keyframes rainbowspin { to{transform:translate(-50%,-50%) rotate(360deg)} }
@keyframes bounceBig { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-28px) scale(1.08)} }
@keyframes popText   { 0%{transform:scale(.55);opacity:0} 60%{transform:scale(1.1)} 100%{transform:scale(1);opacity:1} }
@keyframes shake     { 0%,100%{transform:translate(-50%,-50%) rotate(0deg)} 15%{transform:translate(calc(-50% - 12px),-50%) rotate(-3deg)} 30%{transform:translate(calc(-50% + 11px),-50%) rotate(3deg)} 45%{transform:translate(calc(-50% - 9px),-50%) rotate(-2deg)} 60%{transform:translate(calc(-50% + 8px),-50%) rotate(2deg)} 75%{transform:translate(calc(-50% - 5px),-50%) rotate(-1deg)} }
@keyframes siren     { 0%,100%{opacity:.45; transform:translate(-50%,-50%) scale(.92)} 50%{opacity:1; transform:translate(-50%,-50%) scale(1.06)} }

/* ── Page root ── */
.page-root {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: clamp(18px,4vw,46px) clamp(14px,4vw,40px) 70px;
  background:
    radial-gradient(1200px 600px at 8% -12%, #ffe9f6, transparent 60%),
    radial-gradient(1000px 620px at 112% 6%, #ffe0ef, transparent 55%),
    linear-gradient(162deg,#fff6fb 0%,#ffe9f5 52%,#ffdcef 100%);
}

.sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.page-inner {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
}

/* ── Header ── */
header {
  text-align: center;
  margin-bottom: clamp(18px,3vw,30px);
}

h1 {
  font-family: var(--title-font);
  font-weight: 400;
  margin: 0;
  line-height: 1.05;
  font-size: clamp(34px,6vw,62px);
}

.h1-shimmer {
  background: linear-gradient(90deg,#ff2d95,#ff8ac4,#cc1f86,#ff5fae,#ff2d95);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer 5s linear infinite;
  filter: drop-shadow(0 4px 14px var(--glow));
}

.header-sub {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(15px,2.2vw,20px);
  color: var(--primary);
  margin-top: 6px;
  letter-spacing: .3px;
}

.header-desc {
  margin: 10px auto 0;
  max-width: 560px;
  font-size: clamp(13px,1.6vw,15.5px);
  color: var(--muted);
  font-weight: 500;
}

/* ── Controls bar ── */
.controls {
  background: linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,244,250,.86));
  backdrop-filter: blur(10px);
  border: 1.5px solid #ffd0e6;
  border-radius: 26px;
  padding: clamp(16px,2.5vw,24px);
  box-shadow: 0 16px 40px var(--glow-soft), inset 0 1px 0 rgba(255,255,255,.9);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(12px,2vw,20px);
}

.ctrl-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ctrl-field--agenda  { flex: 1 1 150px; min-width: 130px; }
.ctrl-field--period  { flex: 1 1 170px; min-width: 150px; }
.ctrl-field--refweek { flex: 1 1 160px; min-width: 150px; }

.ctrl-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary-dark);
  text-transform: uppercase;
  letter-spacing: .6px;
  padding-left: 6px;
}

.ctrl-select-wrap {
  position: relative;
}

.ctrl-select-wrap select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid #ffbede;
  border-radius: 14px;
  padding: 11px 36px 11px 14px;
  cursor: pointer;
  box-shadow: 0 4px 12px var(--glow-soft);
}

.ctrl-chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--primary);
  font-size: 11px;
}

#run {
  flex: 0 0 auto;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 16px;
  padding: 12px 24px;
  background: linear-gradient(180deg,var(--primary),var(--primary-dark));
  animation: glowpulse 2.4s ease-in-out infinite;
  transition: transform .18s cubic-bezier(.22,1,.36,1), filter .18s ease;
}
#run:hover  { transform: translateY(-3px) scale(1.05); filter: brightness(1.09); }
#run:active { transform: translateY(0) scale(.98); }
#run:disabled { opacity: .6; cursor: wait; }

/* ── Google banner ── */
.google-banner {
  background: #fff8e1;
  border: 1px solid #f9a825;
  padding: 10px 12px;
  border-radius: 12px;
  margin: 12px 0;
  font-size: 13px;
  color: var(--ink);
}
.google-banner a { color: var(--primary-dark); }

.manual-banner {
  background: #fff3e8;
  border: 1px solid #e8920c;
  padding: 10px 12px;
  border-radius: 12px;
  margin: 12px 0;
  font-size: 13px;
  color: var(--ink);
}

/* ── Legend ── */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 8px;
  justify-content: center;
}

.legend-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
}
.lb-cabinet  { background: #0b8043; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 3px 8px rgba(11,128,67,.3); }
.lb-domicile { background: #3f51b5; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 3px 8px rgba(63,81,181,.3); }
.lb-premier  { background: rgb(230, 124, 115); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 3px 8px rgba(230,124,115,.3); }
.lb-derniere { background: #e8920c; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 3px 8px rgba(232,146,12,.3); }
.lb-preres   { background: #7a9b3f; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 3px 8px rgba(122,155,63,.3); }

/* ── Window info ── */
.window-info {
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 22px;
}
.window-info strong { color: var(--primary-dark); }
.window-info .cal-name { color: var(--primary); }

/* ── Stats grid ── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
  gap: clamp(10px,1.8vw,16px);
  margin-bottom: 30px;
}

.stat-card {
  border-radius: 22px;
  padding: 18px 18px 16px;
  text-align: center;
  background: linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,245,251,.85));
  border: 1.5px solid #ffd6e8;
  box-shadow: 0 10px 26px var(--glow-soft), inset 0 1.5px 0 rgba(255,255,255,.9);
  animation: pop .45s ease both;
  transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease;
  cursor: default;
}
.stat-card:hover { transform: translateY(-9px) scale(1.05) rotate(1.5deg); box-shadow: 0 24px 46px var(--glow); }

.stat-card--danger {
  background: linear-gradient(180deg,#fff0f5,#ffd9e8);
  border: 1.5px solid #ffb3d2;
  box-shadow: 0 12px 30px var(--glow), inset 0 1.5px 0 rgba(255,255,255,.9);
}
.stat-card--danger:hover { transform: translateY(-9px) scale(1.05) rotate(-1.5deg); box-shadow: 0 28px 54px var(--glow); }

.stat-value {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(30px,4.5vw,40px);
  color: var(--ink);
  line-height: 1;
}
.stat-card--danger .stat-value { color: var(--primary-dark); }

.stat-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .7px;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 6px;
}
.stat-card--danger .stat-label { color: var(--primary-dark); }

/* ── Empty state (rainbow card) ── */
.vc-empty {
  position: relative;
  overflow: hidden;
  text-align: center;
  border-radius: 26px;
  padding: clamp(30px,5vw,54px) 24px;
  margin-bottom: 18px;
  border: 2.5px solid transparent;
  background:
    linear-gradient(#fff,#fff0f8) padding-box,
    linear-gradient(120deg,#ff2d95,#ffab2e,#33b679,#3f51b5,#b06aff,#ff2d95) border-box;
  box-shadow: 0 18px 50px var(--glow);
  animation: pop .5s ease both;
}
.vc-empty-unicorn { font-size: clamp(58px,11vw,92px); line-height: 1; animation: wiggle 1.7s ease-in-out infinite; }
.vc-empty-title { font-family: var(--title-font); font-size: clamp(30px,6vw,52px); color: var(--primary); margin-top: 8px; filter: drop-shadow(0 3px 0 #fff); }
.vc-empty-sub { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(14px,2vw,18px); color: var(--muted); margin-top: 8px; }
.vc-empty-sub span { color: var(--primary-dark); }

/* ── Celebration overlay ── */
.vc-celebrate {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  cursor: pointer;
  background: radial-gradient(60% 50% at 50% 44%, rgba(255,205,233,.6), rgba(255,236,247,.28) 58%, rgba(255,240,248,.05) 100%);
  backdrop-filter: blur(2px);
  animation: pop .4s ease both;
}
.vc-confetti { position: absolute; inset: 0; pointer-events: none; }
.vc-confetti span {
  position: absolute;
  top: -12vh;
  will-change: transform;
  filter: drop-shadow(0 4px 8px rgba(204,31,134,.22));
}
.vc-celebrate-center {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
  pointer-events: none;
  width: 90vw;
  max-width: 680px;
}
.vc-halo {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: min(74vw,540px);
  height: min(74vw,540px);
  border-radius: 50%;
  filter: blur(8px);
  background: conic-gradient(from 0deg,
    rgba(255,45,149,.2), rgba(255,171,46,.13), rgba(51,182,121,.13),
    rgba(63,81,181,.15), rgba(176,106,255,.17), rgba(255,45,149,.2));
  animation: rainbowspin 9s linear infinite;
}
.vc-big-unicorn {
  position: relative;
  font-size: clamp(92px,21vw,180px);
  line-height: 1;
  animation: bounceBig 1.1s cubic-bezier(.3,1.4,.5,1) infinite;
  filter: drop-shadow(0 14px 26px var(--glow));
}
.vc-celebrate-title {
  position: relative;
  font-family: var(--title-font);
  font-size: clamp(42px,9vw,90px);
  color: var(--primary);
  margin-top: 2px;
  text-shadow: 0 3px 0 #fff, 0 10px 32px var(--glow);
  animation: popText .6s ease both;
}
.vc-celebrate-sub {
  position: relative;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(16px,3vw,26px);
  color: var(--primary-dark);
  margin-top: 12px;
  letter-spacing: .4px;
}
.vc-celebrate-hint {
  position: relative;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--muted);
  margin-top: 20px;
  opacity: .85;
}

/* ── Alert overlay (anomalies detected) ── */
.vc-alert {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  cursor: pointer;
  background: radial-gradient(60% 50% at 50% 44%, rgba(255,178,204,.64), rgba(255,222,236,.3) 58%, rgba(255,240,248,.05) 100%);
  backdrop-filter: blur(2px);
  animation: pop .35s ease both;
}
.vc-alert-confetti { position: absolute; inset: 0; pointer-events: none; }
.vc-alert-confetti span {
  position: absolute;
  top: -12vh;
  will-change: transform;
  filter: drop-shadow(0 4px 8px rgba(200,30,90,.22));
}
.vc-alert-center {
  position: absolute;
  top: 48%;
  left: 50%;
  text-align: center;
  pointer-events: none;
  width: 90vw;
  max-width: 680px;
  animation: shake .6s ease-in-out infinite;
}
.vc-alert-halo {
  position: absolute;
  top: 46%;
  left: 50%;
  width: min(70vw,500px);
  height: min(70vw,500px);
  border-radius: 50%;
  filter: blur(12px);
  background: radial-gradient(circle, rgba(255,45,111,.4), rgba(255,45,111,.06) 68%, transparent);
  animation: siren 1s ease-in-out infinite;
}
.vc-alert-poop {
  position: relative;
  font-size: clamp(90px,21vw,176px);
  line-height: 1;
  animation: bounceBig 1s cubic-bezier(.3,1.4,.5,1) infinite;
  filter: drop-shadow(0 14px 26px rgba(255,45,111,.42));
}
.vc-alert-title {
  position: relative;
  font-family: var(--title-font);
  font-size: clamp(40px,9vw,86px);
  color: #ff2d6f;
  margin-top: 2px;
  text-shadow: 0 3px 0 #fff, 0 10px 30px rgba(255,45,111,.45);
  animation: popText .55s ease both;
}
.vc-alert-sub {
  position: relative;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(16px,3vw,26px);
  color: #c81e5a;
  margin-top: 12px;
  letter-spacing: .3px;
}
.vc-alert-hint {
  position: relative;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--muted);
  margin-top: 20px;
  opacity: .85;
}

/* ── Output ok message ── */
.ok {
  background: linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,244,250,.86));
  border: 1.5px solid #ffd0e6;
  border-radius: 18px;
  padding: 18px 22px;
  color: var(--ink);
  font-weight: 600;
  animation: pop .45s ease both;
}

/* ── Anomaly section ── */
.anomaly-section { margin-bottom: 26px; }

.anomaly-section h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(17px,2.4vw,21px);
  color: var(--ink);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.rule-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: linear-gradient(180deg,var(--primary),var(--primary-dark));
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 10px var(--glow);
}

/* ── Anomaly card ── */
.anomaly-card {
  background: linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,247,252,.88));
  backdrop-filter: blur(8px);
  border-radius: 20px;
  border-left: 7px solid #ff2d6f;
  box-shadow: 0 12px 30px rgba(255,45,111,.22), inset 0 1.5px 0 rgba(255,255,255,.85);
  padding: clamp(14px,2vw,20px) clamp(16px,2.2vw,22px);
  margin-bottom: 12px;
  animation: riseIn .5s ease both;
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, border-left-width .2s ease;
}
.anomaly-card:hover {
  transform: translateX(7px) scale(1.012);
  box-shadow: 0 22px 46px rgba(255,45,111,.22);
  border-left-width: 11px;
}

.anomaly-card--warn {
  border-left-color: #ffab2e;
  box-shadow: 0 12px 30px rgba(255,171,46,.22), inset 0 1.5px 0 rgba(255,255,255,.85);
}
.anomaly-card--warn:hover {
  box-shadow: 0 22px 46px rgba(255,171,46,.22);
}

.anomaly-patient {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(14.5px,1.9vw,16.5px);
  color: var(--ink);
  margin-bottom: 2px;
}

.event-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 7px 0 6px;
  border-top: 1px dashed #ffd9ea;
  margin-top: 8px;
}

.ev-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 2px 6px rgba(0,0,0,.14);
}

.ev-text {
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
}
.ev-text strong { color: var(--ink); font-weight: 700; }

/* ── Loader ── */
#loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: clamp(40px,8vw,80px) 20px;
  animation: pop .35s ease both;
}

.loader-ring {
  position: relative;
  width: 118px;
  height: 118px;
}
.loader-ring-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--primary),#ffd0e6,var(--primary-dark),#ff8ac4,var(--primary));
  -webkit-mask: radial-gradient(closest-side,transparent 63%,#000 65%);
  mask: radial-gradient(closest-side,transparent 63%,#000 65%);
  animation: spin 1s linear infinite;
  box-shadow: 0 0 34px var(--glow);
}
.loader-heart {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  animation: heartbeat 1s ease-in-out infinite;
}
.loader-title {
  font-family: var(--title-font);
  font-size: clamp(22px,3.5vw,30px);
  color: var(--primary-dark);
  text-shadow: 0 2px 0 #fff;
}
.loader-dots {
  display: flex;
  gap: 11px;
}
.loader-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 4px 10px var(--glow);
  animation: bounce 1s ease-in-out infinite;
}
.loader-bar-track {
  width: min(340px,82%);
  height: 13px;
  border-radius: 999px;
  background: #ffe1ef;
  overflow: hidden;
  box-shadow: inset 0 1px 4px rgba(204,31,134,.25);
}
.loader-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg,var(--primary),var(--primary-dark));
  box-shadow: 0 0 14px var(--glow);
  animation: fillbar 1.7s cubic-bezier(.4,0,.2,1) forwards;
}
.loader-caption {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

/* ── Toast ── */
#toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 5;
  background: linear-gradient(180deg,var(--primary),var(--primary-dark));
  color: #fff;
  font-weight: 700;
  font-size: 14.5px;
  padding: 13px 24px;
  border-radius: 999px;
  box-shadow: 0 12px 30px var(--glow), inset 0 1.5px 0 rgba(255,255,255,.5);
  animation: toastIn .35s ease both;
}

/* ── Rules panel ── */
.rules-panel {
  background: linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,244,250,.84));
  border: 1.5px solid #ffd6e8;
  border-radius: 22px;
  padding: 6px 18px;
  box-shadow: 0 10px 26px var(--glow-soft);
  margin-top: 8px;
}

#rules-toggle {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--primary-dark);
  padding: 14px 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}

#rules-caret {
  display: inline-block;
  transition: transform .2s ease;
}

#rules-list {
  list-style: none;
  display: grid;
  gap: 8px;
  padding: 0 4px 0 8px;
  margin: 0 0 16px;
}

.rule-item {
  display: flex;
  gap: 9px;
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}
.rule-item strong { color: var(--primary-dark); }

.rule-item--muted {
  font-size: 13.5px;
  color: var(--muted);
}

/* ── Login screen ── */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(1200px 600px at 8% -12%, #ffe9f6, transparent 60%),
    linear-gradient(162deg,#fff6fb 0%,#ffe9f5 52%,#ffdcef 100%);
}

.login-box {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  padding: 32px 28px;
  border-radius: 26px;
  box-shadow: 0 16px 46px var(--glow-soft), inset 0 1px 0 rgba(255,255,255,.9);
  border: 1.5px solid #ffd0e6;
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.login-box h2 {
  margin: 0 0 4px;
  font-family: var(--title-font);
  font-weight: 400;
  font-size: 26px;
  background: linear-gradient(90deg,#ff2d95,#cc1f86);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.login-box h3 {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

.login-box input[type="password"] {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  padding: 11px 14px;
  border: 1.5px solid #ffbede;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  outline: none;
}
.login-box input[type="password"]:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--glow-soft); }

.login-box button[type="submit"] {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 14px;
  padding: 12px;
  background: linear-gradient(180deg,var(--primary),var(--primary-dark));
  animation: glowpulse 2.4s ease-in-out infinite;
  transition: transform .18s ease, filter .18s ease;
}
.login-box button[type="submit"]:hover { transform: translateY(-2px); filter: brightness(1.09); }

.err { color: #d93025; font-size: 13px; font-weight: 600; }

a { color: var(--primary-dark); text-decoration: none; }
a:hover { text-decoration: underline; }