:root{
  --pink:#e75480;
  --pink2:#ff9fc4;
  --pale:#fff0f7;
  --pale2:#ffe2ef;
  --rose:#9b244b;
  --dark:#2b1220;
  --muted:#765666;
  --card:#ffffff;
  --ok:#1f8f55;
  --warn:#c07600;
  --danger:#c93b5f;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:var(--dark);background:linear-gradient(145deg,#ffbdd9,#ffe8f2 55%,#ffd4e7)}
body{padding-bottom:86px}
.appTop{
  position:sticky;top:0;z-index:10;
  background:linear-gradient(135deg,var(--pink),var(--pink2));
  color:#fff;text-align:center;padding:14px 12px;font-weight:900;letter-spacing:.3px;
  box-shadow:0 8px 22px rgba(155,36,75,.18)
}
.wrap{max-width:820px;margin:0 auto;padding:14px}
.hero{
  background:linear-gradient(135deg,#fff,#fff6fa);
  border-radius:28px;
  padding:20px;
  box-shadow:0 12px 34px rgba(155,36,75,.16);
  margin:14px 0;
}
.card{
  background:var(--card);
  border-radius:22px;
  padding:17px;
  margin:12px 0;
  box-shadow:0 8px 24px rgba(155,36,75,.12);
}
h1,h2,h3{margin:6px 0 12px}
h1{font-size:28px}
h2{font-size:22px}
h3{font-size:18px}
p{line-height:1.35}
.small{font-size:13px;color:var(--muted)}
.big{font-size:42px;font-weight:900;color:var(--pink);line-height:1}
.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 10px;border-radius:999px;background:var(--pale2);color:var(--rose);font-size:12px;font-weight:900
}
.badge.ok{background:#eaf8ef;color:var(--ok)}
.badge.warn{background:#fff4df;color:#946100}
.badge.danger{background:#fff0f4;color:var(--danger)}
button{
  border:0;border-radius:14px;padding:12px 15px;background:var(--pink);color:white;font-weight:900;font-size:15px;margin:4px 2px
}
button.secondary{background:#9b6070}
button.ok{background:var(--ok)}
button.danger{background:var(--danger)}
button.ghost{background:white;color:var(--pink);border:1px solid #f0a7c0}
button:disabled{opacity:.5}
input,select,textarea{
  width:100%;padding:12px;border:1px solid #f3bdd1;border-radius:14px;font-size:16px;margin:6px 0 12px;background:#fff
}
textarea{min-height:80px}
.page{display:none}
.page.active{display:block}
.loginGrid{display:grid;grid-template-columns:1fr;gap:10px}
.task{
  border:1px solid #f5c1d4;background:#fff8fb;border-radius:18px;padding:14px;margin:10px 0
}
.taskHeader{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.timelineItem{
  border-left:4px solid var(--pink);padding:10px 10px 10px 14px;background:#fff8fb;border-radius:12px;margin:10px 0
}
.timelineItem b{color:var(--rose)}
.nav{
  position:fixed;bottom:0;left:0;right:0;background:var(--pink);display:none;z-index:20;padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -8px 22px rgba(155,36,75,.2)
}
.nav button{flex:1;border-radius:0;background:transparent;padding:12px 4px;font-size:12px;margin:0}
.nav.show{display:flex}
.notice{padding:12px;border-radius:16px;background:#fff0f6;color:#8a1d49;font-weight:900;margin:10px 0}
.notice.ok{background:#effaf3;color:#19693b}
.notice.warn{background:#fff8e8;color:#946100}
.statGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{background:#fff7fb;border:1px solid #f5c1d4;border-radius:18px;padding:14px;text-align:center}
.stat strong{font-size:26px;color:var(--pink)}
.hidden{display:none!important}
.photoPreview{max-width:100%;border-radius:15px;margin-top:8px}

.hero-card{
background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,225,238,.92));
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.5);
border-radius:28px;
box-shadow:0 18px 45px rgba(231,84,128,.18);
}
.big-lock{font-size:68px;display:inline-block;animation:floatlock 3.5s ease-in-out infinite}
.countdown{font-size:1.8rem;font-weight:700;letter-spacing:.04em}
.task-card,.activity-card{
border-radius:20px;
background:rgba(255,255,255,.7);
backdrop-filter:blur(14px);
padding:14px;
margin:.5rem 0;
}
@keyframes floatlock{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-8px)}
}


/* v2.9 remove duplicated overview/streak cards */
#wearerHome > .hero,
#keyholderHome > .hero{display:none!important}
.lockStatusCard{
  position:relative;
  overflow:hidden;
  margin:0 0 16px;
  padding:22px 18px;
  border-radius:30px;
  background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(255,224,239,.96));
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 18px 45px rgba(203,40,104,.18);
  backdrop-filter:blur(18px);
}
.lockStatusCard:before{
  content:"";position:absolute;inset:-60px -40px auto auto;width:170px;height:170px;border-radius:999px;
  background:radial-gradient(circle,rgba(255,98,163,.25),transparent 68%);
}
.lockStatusBadge{display:inline-flex;border-radius:999px;background:#fff;color:#c42b70;padding:8px 12px;font-weight:950;font-size:12px;letter-spacing:.08em}
.lockStatusCard h2{font-size:25px;line-height:1.05;margin:14px 0 8px;color:#661536}
.lockBig{font-size:30px;line-height:1.12;font-weight:950;color:#c42b70;margin:12px 0 4px}
.lockSub{font-size:13px;font-weight:800;color:#8f4d66;margin-bottom:14px}
.lockStatusGrid{display:grid;grid-template-columns:1fr;gap:10px}
.lockTile{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.8);border-radius:22px;padding:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.65)}
.lockTile strong{display:block;color:#5f1230;font-size:17px;line-height:1.25}
.lockTile span{display:block;margin-top:4px;color:#9d5870;font-size:12px;font-weight:900}
.v29LockIcon{font-size:70px;line-height:1;text-align:center;margin:8px 0 12px;animation:v29FloatLock 3.6s ease-in-out infinite;filter:drop-shadow(0 12px 18px rgba(196,43,112,.22))}
@keyframes v29FloatLock{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.035)}}
/* v3.2 contrast polish */
.lockStatusCard{
  color:#fff !important;
  background:
    radial-gradient(circle at 88% 10%, rgba(255,255,255,.25), transparent 26%),
    linear-gradient(135deg,#8f1849 0%,#d82474 50%,#ff6aa6 100%) !important;
}

.lockStatusCard *,
.lockStatusCard h2,
.lockStatusCard .lockBig,
.lockStatusCard .lockSub,
.lockStatusCard .lockTile,
.lockStatusCard .lockTile strong,
.lockStatusCard .lockTile span{
  color:#fff !important;
}

.lockStatusCard .lockSub,
.lockStatusCard .lockTile span{
  opacity:.9 !important;
}

.lockStatusCard .lockTile{
  background:rgba(255,255,255,.18) !important;
  border-color:rgba(255,255,255,.45) !important;
}
/* ===========================
   v3.3 Dashboard Card Polish
=========================== */

.lockStatusCard{
    position:relative;
    overflow:hidden;
    border-radius:28px !important;
    box-shadow:
        0 18px 45px rgba(231,84,128,.28),
        inset 0 1px 0 rgba(255,255,255,.25) !important;
    transition:transform .25s ease, box-shadow .25s ease;
}

.lockStatusCard:active{
    transform:scale(.985);
}

.lockStatusCard::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top right,
        rgba(255,255,255,.28),
        transparent 35%);
    pointer-events:none;
}

.lockStatusCard h2{
    letter-spacing:.4px;
}

.lockTile{
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.15);
}
/* ===========================
   v3.3.1 Premium App Feel
=========================== */

body{
  background:
    radial-gradient(circle at top, rgba(255,159,196,.38), transparent 34%),
    linear-gradient(180deg,#fff0f7 0%,#fff7fb 48%,#ffffff 100%);
}

.card,
.hero-card,
.lockStatusCard{
  transform:translateZ(0);
}

.card{
  border-radius:26px !important;
  border:1px solid rgba(255,255,255,.72) !important;
  background:rgba(255,255,255,.82) !important;
  backdrop-filter:blur(18px);
}

.lockStatusCard{
  margin-top:18px !important;
  margin-bottom:22px !important;
}

.lockBig{
  font-size:34px !important;
  line-height:1.12 !important;
}

.v29LockIcon,
.big-lock{
  animation:keyheldPremiumFloat 3.6s ease-in-out infinite;
}

@keyframes keyheldPremiumFloat{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-6px) scale(1.04)}
}

.sectionTitle,
.card h2,
.card h3{
  letter-spacing:-.03em;
}

.nav,
.bottomNav{
  box-shadow:0 -12px 35px rgba(231,84,128,.28);
  backdrop-filter:blur(18px);
}