:root{
  --pink-1:#ffe3f1;
  --pink-2:#ffc2df;
  --pink-3:#ff9ecb;
  --pink-4:#ff6fb5;
  --pink-5:#e0468f;
  --purple:#b388ff;
  --cream:#fff6fb;
  --ink:#6b3a55;
  --ink-soft:#a86f8f;
  --mint:#b8f2e6;
  --gold:#ffd86b;
  --red:#ff7a7a;
  --yellow:#ffd86b;
  --green:#6be09a;
  --shadow:0 8px 24px rgba(255,111,181,.25);
  --shadow-lg:0 14px 40px rgba(224,70,143,.30);
  --radius:26px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Quicksand',system-ui,sans-serif;
  color:var(--ink);
  min-height:100vh;
  background:
    radial-gradient(circle at 12% 8%, #fff0f8 0%, transparent 45%),
    radial-gradient(circle at 88% 12%, #f3e7ff 0%, transparent 40%),
    linear-gradient(160deg,#ffd9ee 0%,#ffe9f6 45%,#f6e9ff 100%);
  background-attachment:fixed;
  padding:clamp(14px,3vw,40px);
}
h1,h2,h3,.brand,button,.tab,.pill,.cal-title,.section-title{font-family:'Baloo 2','Quicksand',sans-serif}

.deco{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.deco span{position:absolute;font-size:clamp(22px,3vw,40px);opacity:.32;animation:float 9s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-22px) rotate(8deg)}}

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

/* ---- login ---- */
.login-screen{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card{background:var(--cream);border:3px solid #fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);
  padding:34px 30px;width:min(380px,100%);text-align:center}
.login-card .brand{font-size:40px;margin-bottom:4px}
.login-card p{color:var(--ink-soft);font-weight:600;margin-bottom:22px;font-size:14px}
.login-card input{width:100%;margin-bottom:12px}
.login-card .btn{width:100%;justify-content:center}
.login-err{color:var(--pink-5);font-weight:700;font-size:14px;margin-bottom:12px;min-height:18px}

/* ---- header ---- */
header.app-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:8px;flex-wrap:wrap}
.brand{font-family:'Baloo 2';font-weight:800;line-height:1;color:var(--pink-4);
  text-shadow:2px 3px 0 #fff, 4px 6px 0 rgba(255,111,181,.35);letter-spacing:.5px}
header.app-head .brand{font-size:clamp(26px,5vw,42px)}
.tagline{color:var(--ink-soft);font-weight:600;font-size:14px;text-align:center;margin-bottom:18px}

.usermenu{display:flex;align-items:center;gap:10px}
.role-badge{font-family:'Baloo 2';font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.5px;
  padding:6px 12px;border-radius:20px;color:#fff}
.role-badge.admin{background:linear-gradient(135deg,var(--purple),#8b5cf6)}
.role-badge.viewer{background:linear-gradient(135deg,var(--pink-3),var(--pink-4))}
.whoami{font-weight:700;color:var(--ink)}
.icon-btn{border:none;cursor:pointer;background:#fff;color:var(--pink-4);width:38px;height:38px;border-radius:50%;
  box-shadow:0 4px 12px rgba(255,111,181,.2);font-size:16px;transition:.15s}
.icon-btn:hover{transform:translateY(-2px)}

/* ---- stats ---- */
.points-banner{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:18px 0 24px}
.stat{background:linear-gradient(150deg,#fff,#fff0f8);border:3px solid #fff;box-shadow:var(--shadow);
  border-radius:var(--radius);padding:16px 26px;text-align:center;min-width:140px}
.stat .num{font-family:'Baloo 2';font-size:38px;font-weight:800;color:var(--pink-4);line-height:1}
.stat .lbl{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--ink-soft);margin-top:4px}
.stat.balance .num{color:var(--purple)}
.stat.spent .num{color:var(--pink-5)}
.stat.streak .num{color:#f5883a}
.stat.bonus .num{color:#e0468f}

.give-row{display:flex;justify-content:center;margin:-8px 0 20px}
.bonus-item{display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:14px;
  padding:9px 14px;margin-bottom:8px;font-weight:600;box-shadow:0 3px 8px rgba(255,111,181,.1)}
.bonus-item .amt{font-family:'Baloo 2';font-weight:800;white-space:nowrap}
.bonus-item .amt.pos{color:#1fa564}
.bonus-item .amt.neg{color:#d64545}
.bonus-item .bnote{flex:1;margin:0 10px;color:var(--ink);word-break:break-word}
.bonus-item .when{font-size:11px;color:var(--ink-soft);font-weight:600;white-space:nowrap}
.bonus-item .bdel{background:none;border:none;cursor:pointer;color:var(--ink-soft);opacity:.5;font-size:14px;margin-left:8px}
.bonus-item .bdel:hover{opacity:1;color:var(--pink-5)}

/* ---- legend ---- */
.legend{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.legend .item{display:flex;align-items:center;gap:7px;font-weight:700;font-size:13px;color:var(--ink-soft);
  background:rgba(255,255,255,.7);padding:6px 14px;border-radius:20px}
.legend .swatch{width:16px;height:16px;border-radius:6px}
.sw-red{background:var(--red)}.sw-yellow{background:var(--yellow)}.sw-green{background:var(--green)}

/* ---- tabs ---- */
.tabs{display:flex;gap:10px;justify-content:center;margin-bottom:22px;flex-wrap:wrap}
.tab{border:none;cursor:pointer;font-size:16px;font-weight:700;padding:11px 24px;border-radius:40px;color:var(--ink-soft);
  background:rgba(255,255,255,.7);box-shadow:0 4px 12px rgba(255,111,181,.15);transition:.2s}
.tab:hover{transform:translateY(-2px)}
.tab.active{background:linear-gradient(135deg,var(--pink-3),var(--pink-4));color:#fff;box-shadow:var(--shadow)}

.panel{display:none;animation:pop .35s ease}
.panel.active{display:block}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.card{background:var(--cream);border-radius:var(--radius);box-shadow:var(--shadow);border:3px solid #fff;padding:clamp(16px,3vw,26px)}

/* ---- calendar ---- */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:10px;flex-wrap:wrap}
.cal-title{font-size:26px;font-weight:800;color:var(--pink-4)}
.nav-btn{border:none;cursor:pointer;background:linear-gradient(135deg,var(--pink-2),var(--pink-3));color:#fff;font-size:20px;
  width:44px;height:44px;border-radius:50%;box-shadow:var(--shadow);display:grid;place-items:center;transition:.15s;font-weight:800}
.nav-btn:hover{transform:scale(1.1)}
.today-btn{border:none;cursor:pointer;background:var(--mint);color:#2a7c6a;font-weight:700;padding:9px 18px;border-radius:30px;
  box-shadow:0 4px 12px rgba(120,200,180,.4);margin-top:6px}

.weekdays,.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.weekdays{margin-bottom:8px}
.weekdays div{text-align:center;font-weight:700;color:var(--ink-soft);font-size:13px;text-transform:uppercase;letter-spacing:.5px}
.day{background:#fff;border-radius:16px;min-height:80px;padding:8px;border:3px solid transparent;transition:.15s;position:relative;
  display:flex;flex-direction:column;gap:4px;overflow:hidden}
.day.can-edit{cursor:pointer}
.day.can-edit:hover{border-color:var(--pink-3);transform:translateY(-2px);box-shadow:var(--shadow)}
.day.empty{background:transparent;cursor:default}
.day.empty:hover{transform:none;border-color:transparent;box-shadow:none}
.day.today{outline:3px dashed var(--purple);outline-offset:-3px}
.day .dnum{font-weight:800;font-size:15px;align-self:flex-end;font-family:'Baloo 2'}
.day.s-red{background:linear-gradient(160deg,#fff,#ffe0e0)}
.day.s-yellow{background:linear-gradient(160deg,#fff,#fff4d6)}
.day.s-green{background:linear-gradient(160deg,#fff,#dcf7e8)}
.day .badge{margin-top:auto;font-size:11px;font-weight:800;padding:2px 8px;border-radius:10px;align-self:flex-start;color:#fff}
.day.s-red .badge{background:var(--red)}
.day.s-yellow .badge{background:#e0a800}
.day.s-green .badge{background:#1fa564}
.day .pt{position:absolute;bottom:6px;right:8px;font-size:11px;font-weight:800;color:#1fa564}
.day .pt.minus{color:#d64545}

/* ---- modal ---- */
.overlay{position:fixed;inset:0;background:rgba(107,58,85,.35);backdrop-filter:blur(4px);display:none;place-items:center;z-index:50;padding:16px}
.overlay.open{display:grid;animation:pop .2s ease}
.modal{background:var(--cream);border-radius:var(--radius);box-shadow:var(--shadow-lg);width:min(440px,100%);max-height:88vh;overflow:auto;border:3px solid #fff}
.modal-head{background:linear-gradient(135deg,var(--pink-3),var(--pink-4));color:#fff;padding:18px 22px;font-family:'Baloo 2';
  font-size:22px;font-weight:800;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0}
.close-x{cursor:pointer;background:rgba(255,255,255,.3);border:none;color:#fff;width:34px;height:34px;border-radius:50%;font-size:18px;font-weight:800}
.modal-body{padding:22px}
.modal-body h4{font-family:'Baloo 2';font-weight:700;margin-bottom:12px;color:var(--ink-soft);font-size:15px}

.color-picker{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px}
.color-opt{border:3px solid transparent;cursor:pointer;border-radius:18px;padding:16px;text-align:center;font-family:'Baloo 2';
  font-weight:800;font-size:16px;color:#fff;transition:.15s}
.color-opt:hover{transform:translateY(-2px)}
.color-opt.sel{border-color:var(--ink);box-shadow:var(--shadow)}
.color-opt.red{background:var(--red)}
.color-opt.yellow{background:#e0a800}
.color-opt.green{background:#1fa564}
.color-opt.clear{background:#c9b7c4;color:#fff}
.color-opt small{display:block;font-family:'Quicksand';font-weight:600;font-size:11px;opacity:.9;margin-top:2px}

/* ---- inputs / buttons ---- */
input,select{font-family:'Quicksand';font-weight:600;font-size:15px;border:2px solid var(--pink-2);border-radius:14px;
  padding:11px 14px;outline:none;color:var(--ink);background:#fff;transition:.15s}
input:focus,select:focus{border-color:var(--pink-4);box-shadow:0 0 0 4px rgba(255,158,203,.25)}
input::placeholder{color:#d9a9c4}
.btn{border:none;cursor:pointer;font-family:'Baloo 2';font-weight:700;font-size:15px;padding:11px 20px;border-radius:16px;color:#fff;
  background:linear-gradient(135deg,var(--pink-3),var(--pink-4));box-shadow:var(--shadow);transition:.15s;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;filter:grayscale(.4)}
.btn.purple{background:linear-gradient(135deg,var(--purple),#8b5cf6)}
.btn.ghost{background:#fff;color:var(--pink-4);border:2px solid var(--pink-2);box-shadow:none}
.btn.sm{padding:8px 14px;font-size:13px}

/* ---- rewards ---- */
.section-title{font-size:24px;font-weight:800;color:var(--pink-4);margin-bottom:4px;display:flex;align-items:center;gap:8px}
.section-sub{color:var(--ink-soft);font-weight:600;margin-bottom:18px;font-size:14px}
.reward-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:20px}
.reward{background:#fff;border-radius:20px;padding:18px;text-align:center;box-shadow:0 5px 14px rgba(255,111,181,.15);
  border:2px solid #fff;transition:.2s;position:relative;display:flex;flex-direction:column;gap:8px}
.reward:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.reward.locked{opacity:.62}
.reward .emoji{font-size:44px}
.reward .rname{font-family:'Baloo 2';font-weight:800;font-size:18px}
.reward .cost{font-weight:800;color:#c98a00;background:#fff8e6;border-radius:20px;padding:4px 12px;display:inline-block;margin:0 auto;font-size:14px}
.reward .cost.streak{color:#c2410c;background:#ffe6d3}
.reward .adminrow{display:flex;gap:6px;justify-content:center;margin-top:4px}
.reward .mini{background:none;border:none;cursor:pointer;color:var(--ink-soft);opacity:.6;font-size:15px}
.reward .mini:hover{opacity:1;color:var(--pink-5)}

.rform{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:#fff5fb;border-radius:18px;padding:14px;margin-bottom:20px;border:2px dashed var(--pink-2)}
.rform input.emo{width:64px;text-align:center;font-size:20px}
.rform input.nm{flex:1;min-width:140px}
.rform input.ct{width:100px}

.redeem-log{margin-top:22px}
.log-item{display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:14px;padding:10px 16px;margin-bottom:8px;font-weight:600;box-shadow:0 3px 8px rgba(255,111,181,.1)}
.log-item .when{font-size:12px;color:var(--ink-soft);font-weight:600}
.empty-note{text-align:center;color:var(--ink-soft);font-weight:600;padding:16px;font-size:14px}

.readonly-hint{text-align:center;color:var(--ink-soft);font-weight:600;font-size:13px;background:rgba(255,255,255,.6);
  border-radius:16px;padding:10px;margin-bottom:16px}

/* ---- naughty list ---- */
.rform input.ndate{width:190px;padding-right:10px}
.naughty-entry{background:#fff;border-radius:20px;padding:16px 18px;margin-bottom:14px;box-shadow:0 5px 14px rgba(255,111,181,.15);border:2px solid #fff}
.naughty-head{display:flex;align-items:flex-start;gap:10px;justify-content:space-between}
.naughty-date{font-family:'Baloo 2';font-weight:800;font-size:13px;color:#fff;background:linear-gradient(135deg,var(--purple),#8b5cf6);
  padding:4px 12px;border-radius:20px;white-space:nowrap;flex-shrink:0}
.naughty-text{font-weight:700;font-size:16px;color:var(--ink);margin:2px 0;flex:1;word-break:break-word}
.naughty-del{background:none;border:none;cursor:pointer;color:var(--ink-soft);opacity:.55;font-size:15px;flex-shrink:0}
.naughty-del:hover{opacity:1;color:var(--pink-5)}

.replies{margin-top:12px;border-top:2px dashed var(--pink-2);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.reply{display:flex;align-items:flex-start;gap:8px;background:#fff5fb;border-radius:14px;padding:9px 12px}
.reply.admin{background:#f3ecff}
.reply .who{font-family:'Baloo 2';font-weight:800;font-size:12px;padding:2px 9px;border-radius:14px;color:#fff;white-space:nowrap;flex-shrink:0}
.reply .who.admin{background:linear-gradient(135deg,var(--purple),#8b5cf6)}
.reply .who.viewer{background:linear-gradient(135deg,var(--pink-3),var(--pink-4))}
.reply .rtext{flex:1;font-weight:600;font-size:14px;word-break:break-word}
.reply .rwhen{font-size:11px;color:var(--ink-soft);font-weight:600;white-space:nowrap;flex-shrink:0}
.reply .rdelmini{background:none;border:none;cursor:pointer;color:var(--ink-soft);opacity:.5;font-size:13px}
.reply .rdelmini:hover{opacity:1;color:var(--pink-5)}
.no-replies{font-size:13px;color:var(--ink-soft);font-weight:600}

.reply-box{display:flex;gap:8px;margin-top:10px}
.reply-box input{flex:1;min-width:0}

/* ---- sticker book ---- */
.binder{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.sticker{background:#fff;border-radius:18px;padding:10px;box-shadow:0 5px 14px rgba(255,111,181,.16);
  border:3px solid #fff;display:flex;flex-direction:column;gap:8px;position:relative;cursor:grab}
.sticker:active{cursor:grabbing}
.sticker.dragging{opacity:.35}
.sticker.dragover{border-color:var(--pink-4);transform:scale(1.03)}
.sticker .simg{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;background:#ffe9f6;display:block}
.sticker .sdesc{font-size:13px;font-weight:600;color:var(--ink);text-align:center;word-break:break-word;min-height:18px;line-height:1.3}
.sticker .sdesc.empty{color:var(--ink-soft);font-style:italic;font-weight:500}
.sticker .sctl{display:flex;justify-content:center;gap:4px;flex-wrap:wrap}
.sticker .sctl button{background:#fff5fb;border:none;cursor:pointer;color:var(--pink-4);width:30px;height:30px;
  border-radius:9px;font-size:14px;font-weight:800;transition:.15s;display:grid;place-items:center}
.sticker .sctl button:hover{background:var(--pink-2);color:#fff}
.sticker .sctl button:disabled{opacity:.35;cursor:not-allowed}
.add-sticker{border:3px dashed var(--pink-2);border-radius:18px;display:grid;place-items:center;min-height:190px;cursor:pointer;
  color:var(--pink-4);font-family:'Baloo 2';font-weight:800;text-align:center;background:#fff8fc;transition:.15s;padding:10px;font-size:15px}
.add-sticker:hover{border-color:var(--pink-4);background:#fff0f8;transform:translateY(-2px)}
.add-sticker .plus{font-size:40px;line-height:1;margin-bottom:6px}
.add-sticker.locked{opacity:.6;cursor:not-allowed}
.add-sticker.locked:hover{transform:none;border-color:var(--pink-2);background:#fff8fc}

.s-modal-img{width:100%;max-height:300px;object-fit:contain;border-radius:14px;margin-bottom:14px;background:#ffe9f6}
.modal-body textarea{font-family:'Quicksand';font-weight:600;font-size:15px;border:2px solid var(--pink-2);border-radius:14px;
  padding:11px 14px;outline:none;color:var(--ink);background:#fff;width:100%;resize:vertical;transition:.15s}
.modal-body textarea:focus{border-color:var(--pink-4);box-shadow:0 0 0 4px rgba(255,158,203,.25)}
.s-modal-actions{display:flex;gap:8px;justify-content:space-between}

/* ---- toast ---- */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(120px);
  background:linear-gradient(135deg,var(--pink-4),var(--purple));color:#fff;font-weight:700;font-family:'Baloo 2';
  padding:14px 26px;border-radius:40px;box-shadow:var(--shadow-lg);z-index:99;transition:.4s cubic-bezier(.2,1.4,.4,1);font-size:16px;max-width:90vw;text-align:center}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.err{background:linear-gradient(135deg,#ff7a7a,#e0468f)}

footer{text-align:center;color:var(--ink-soft);font-weight:600;font-size:13px;margin-top:28px;padding-bottom:10px}

.hidden{display:none !important}

/* ============ PHONE ============ */
@media(max-width:640px){
  body{padding:10px}

  /* header: brand on top, user controls centered below */
  header.app-head{justify-content:center;text-align:center;gap:8px 12px;margin-bottom:6px}
  header.app-head .brand{font-size:30px;width:100%}
  .usermenu{width:100%;justify-content:center;flex-wrap:wrap}
  .tagline{font-size:13px;margin-bottom:14px}

  /* stats: 2 per row, compact */
  .points-banner{gap:8px;margin:14px 0 18px;flex-wrap:wrap}
  .stat{min-width:0;flex:1 1 42%;padding:12px 6px;border-width:2px}
  .stat .num{font-size:26px}
  .stat .lbl{font-size:9px;letter-spacing:.3px}

  /* legend: full-width stacked chips */
  .legend{gap:6px;margin-bottom:14px}
  .legend .item{width:100%;justify-content:center;font-size:13px;padding:8px 12px}

  .tabs{gap:8px;margin-bottom:16px}
  .tab{flex:1;padding:12px 8px;font-size:15px;text-align:center}

  .card{padding:12px;border-width:2px}

  /* calendar */
  .cal-head{margin-bottom:12px}
  .cal-title{font-size:21px}
  .nav-btn{width:40px;height:40px;font-size:18px}
  .today-btn{padding:7px 14px;font-size:13px}
  .weekdays,.grid{gap:4px}
  .weekdays div{font-size:10px;letter-spacing:0}
  .day{min-height:52px;padding:4px;border-width:2px;border-radius:12px;gap:2px}
  .day .dnum{font-size:13px}
  /* color is shown by a stronger tint + the point value; hide the text badge to save room */
  .day .badge{display:none}
  .day.s-red{background:#ffd6d6}
  .day.s-yellow{background:#fff1c9}
  .day.s-green{background:#cdf3de}
  .day .pt{font-size:11px;bottom:3px;right:5px}
  .day.today{outline-width:2px}

  /* reward shop */
  .reward-grid{grid-template-columns:1fr 1fr;gap:10px}
  .reward{padding:14px 10px}
  .reward .emoji{font-size:36px}
  .reward .rname{font-size:16px}
  .rform{padding:12px;gap:8px}
  .rform input.emo{width:56px}
  .rform input.nm{flex:1 1 100%;order:-1}
  .rform input.ndate{flex:1 1 100%}
  .reply-box{flex-wrap:wrap}
  .reply .rwhen{display:none}

  /* modals: use the width, keep controls comfy */
  .overlay{padding:10px}
  .modal-body{padding:18px}
  .color-picker{grid-template-columns:1fr 1fr;gap:10px}
  .color-opt{padding:14px 8px;font-size:15px}

  .section-title{font-size:21px}

  /* deco paws are distracting on tiny screens */
  .deco{opacity:.5}
}

/* ============ SMALL PHONE ============ */
@media(max-width:380px){
  .stat .num{font-size:22px}
  .day{min-height:46px}
  .day .dnum{font-size:12px}
  .day .pt{font-size:10px}
  .reward-grid{grid-template-columns:1fr}
  .color-picker{grid-template-columns:1fr}
  .usermenu .whoami{width:100%;text-align:center}
}

/* nicer tap feedback + no sticky hover on touch devices */
@media(hover:none){
  .tab:hover,.day.can-edit:hover,.reward:hover,.btn:hover,.nav-btn:hover,.icon-btn:hover{transform:none}
  .day.can-edit:active{transform:scale(.97)}
  .btn:active{transform:scale(.97)}
}