:root{
  --primary:#d94f4f;
  --secondary:#f7e8d0;
  --accent:#2a9d8f;
  --ink:#3a2a1a;
  --paper:#fdf6e8;
  --pencil:#7a6a58;
  --marker:#26221c;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  --tab-h:64px;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}

html,body{height:100%;}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(circle at 12% 10%, rgba(42,157,143,.10), transparent 38%),
    radial-gradient(circle at 88% 24%, rgba(217,79,79,.10), transparent 38%),
    var(--secondary);
  color:var(--ink);
  overflow:hidden;
  position:relative;
}

/* ---- Zine spread: a stapled vertical spine down the center ---- */
#zine-spine{
  position:fixed;
  top:0;bottom:0;left:50%;
  width:14px;
  transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, rgba(0,0,0,.16) 8%, rgba(0,0,0,.28) 30%, rgba(0,0,0,.16) 50%, rgba(0,0,0,.26) 72%, rgba(0,0,0,.12) 92%, transparent);
  z-index:1;
  pointer-events:none;
}
#zine-spine::after{
  content:"";
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(90deg);
  width:10px;height:34px;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 1px, transparent 1px 3px);
  box-shadow:0 0 3px rgba(0,0,0,.3);
}

/* ---- Pages (content areas) ---- */
#app{
  position:fixed;
  top:0;bottom:0;left:0;right:0;
  padding-top:var(--safe-t);
  padding-bottom:calc(var(--tab-h) + var(--safe-b) + 8px);
  z-index:2;
}
.page{
  display:none;
  height:100%;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:18px 16px 24px;
  scrollbar-width:none;
}
.page::-webkit-scrollbar{display:none;}
.page.active{display:block;animation:pageIn .28s ease;}

@keyframes pageIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* ---- Typography helpers ---- */
.marker{font-weight:800;letter-spacing:.2px;color:var(--marker);}
.pencil{color:var(--pencil);}

/* ---- Random paper rotation ---- */
.tilt{-webkit-transform:rotate(-.6deg);transform:rotate(-.6deg);}

/* ================= TABS ================= */
#tabbar{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:10;
  display:flex;
  gap:6px;
  padding:6px 8px calc(var(--safe-b) + 8px);
  background:linear-gradient(180deg, rgba(247,232,208,.0), rgba(247,232,208,.9) 30%);
}
.tab{
  position:relative;
  flex:1;
  border:none;
  cursor:pointer;
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  color:var(--ink);
  padding:12px 4px 8px;
  border-radius:8px 10px 0 8px;
  letter-spacing:.2px;
  box-shadow:0 1px 0 rgba(0,0,0,.15), inset 0 0 0 1px rgba(0,0,0,.06);
  transition:transform .15s ease;
}
.tab:nth-child(1){background:#f2c1b8;transform:rotate(-1deg);}
.tab:nth-child(2){background:#f4d78e;transform:rotate(.8deg);}
.tab:nth-child(3){background:#bcd7cf;transform:rotate(-.7deg);}
.tab:nth-child(4){background:#dfc3e3;transform:rotate(1.2deg);}

/* ragged torn top edge */
.tab::before{
  content:"";
  position:absolute;top:-3px;left:0;right:0;height:5px;
  background:
    linear-gradient(135deg, transparent 0 40%, var(--secondary) 40% 60%, transparent 60%),
    linear-gradient(45deg, transparent 0 40%, var(--secondary) 40% 60%, transparent 60%);
  background-size:10px 5px;
}
/* active tab: lifted corner + glossy glue smear */
.tab[aria-current="true"]{
  transform:translateY(-4px) rotate(0deg);
  box-shadow:0 4px 8px rgba(0,0,0,.2), inset 0 0 0 1px rgba(0,0,0,.06);
}
.tab[aria-current="true"]::after{
  content:"";
  position:absolute;left:0;bottom:-4px;width:26px;height:14px;
  background:radial-gradient(circle at 30% 40%, rgba(255,255,255,.75), rgba(255,255,255,.0) 60%);
  filter:blur(.5px);
  opacity:.85;
}
.tab:active{transform:scale(.97);}

/* ================= PAPER SCRAP CARD ================= */
.scrap{
  position:relative;
  background:var(--paper);
  padding:14px 16px;
  margin-bottom:14px;
  border-radius:8px 12px 6px 14px / 10px 7px 12px 8px;
  box-shadow:0 3px 6px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.05);
}
/* white glue residue around edges */
.scrap::before{
  content:"";
  position:absolute;inset:-3px;
  border-radius:inherit;
  background:radial-gradient(circle at 15% 20%, rgba(255,255,255,.5), transparent 40%),
             radial-gradient(circle at 85% 75%, rgba(255,255,255,.42), transparent 42%),
             radial-gradient(circle at 50% 10%, rgba(255,255,255,.4), transparent 35%);
  z-index:-1;
  filter:blur(1px);
  opacity:.9;
  pointer-events:none;
}
/* ragged/irregular edge top-left */
.scrap::after{
  content:"";
  position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(135deg, transparent 0 42%, rgba(0,0,0,.05) 42% 58%, transparent 58%);
  background-size:8px 4px;
}

.scrap-word{font-size:20px;font-weight:800;color:var(--marker);line-height:1.2;}
.scrap-trans{font-size:14px;color:var(--pencil);margin-top:3px;}
.scrap-cat{font-size:11px;color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin-top:6px;}

/* tiny colored dot sticker in corner */
.dot{
  position:absolute;top:9px;right:10px;
  width:12px;height:12px;border-radius:50%;
  box-shadow:inset -2px -2px 3px rgba(0,0,0,.18), 0 0 2px rgba(0,0,0,.2);
  border:1px solid rgba(0,0,0,.1);
}
.dot-food{background:#e05a5a;}
.dot-travel{background:#5b9bd5;}
.dot-daily{background:#e8c84a;}
.dot-auto{background:#9aa5a0;}

/* ---- swipe-to-edit/delete on scraps ---- */
.swipe-wrap{position:relative;border-radius:10px;overflow:hidden;}
.swipe-actions{
  position:absolute;top:0;right:0;bottom:0;
  display:flex;align-items:stretch;
}
.swipe-action{
  border:none;cursor:pointer;
  color:#fff;font-weight:700;font-size:13px;
  padding:0 18px;display:flex;align-items:center;
}
.swipe-action.edit{background:var(--accent);}
.swipe-action.del{background:var(--primary);border-radius:0 6px 6px 0;}
.swipe-scrap{
  position:relative;
  background:var(--paper);
  z-index:2;
  transform:translateX(0);
  transition:transform .22s ease;
  cursor:pointer;
  border-radius:10px;
  padding:14px 16px;margin-bottom:14px;
  box-shadow:0 3px 6px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.05);
}
.swipe-wrap.open .swipe-scrap{transform:translateX(-120px);}
.swipe-scrap.static{transform:rotate(-.7deg);}

/* ================= HOME ================= */
.counter-row{display:flex;gap:12px;margin-top:6px;}
.counter{
  flex:1;
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  padding:22px 10px 12px;
  background:var(--paper);
  border-radius:6px 12px 8px 10px;
  box-shadow:0 2px 5px rgba(0,0,0,.2), inset 0 0 0 1px rgba(0,0,0,.05);
}
.counter-label{
  font-size:11px;font-weight:700;color:var(--pencil);
  text-transform:uppercase;letter-spacing:.5px;
}
.counter-num{
  font-family:"Comic Sans MS","Chalkboard SE",cursive;
  font-size:40px;font-weight:800;color:var(--primary);
  line-height:1;margin-top:4px;
}
/* paper clip flag */
.counter::before{
  content:"";
  position:absolute;top:-7px;left:50%;transform:translateX(-50%);
  width:44px;height:16px;
  background:linear-gradient(180deg,#e8e2d0,#cfc7b2);
  border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 2px 3px rgba(0,0,0,.25);
}
.counter::after{ /* glint */
  content:"";
  position:absolute;top:-4px;left:calc(50% - 10px);
  width:5px;height:5px;border-radius:50%;
  background:#fff;filter:blur(1px);opacity:.9;
}

/* glue stick quick action */
.glue-btn{
  display:flex;align-items:center;gap:12px;
  width:100%;margin-top:18px;
  padding:14px 16px;
  background:linear-gradient(180deg,#e89b4e,#d9822f);
  border:none;border-radius:6px 14px 10px 8px;
  color:#fff;font-family:inherit;font-weight:800;font-size:15px;
  cursor:pointer;
  box-shadow:0 3px 6px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.35);
}
.glue-btn .glue-tube{
  width:22px;height:42px;border-radius:6px;
  background:linear-gradient(90deg,#f0b266,#f8d39a 60%,#e89b4e);
  position:relative;
  box-shadow:inset -2px -2px 3px rgba(0,0,0,.2), inset 1px 1px 0 rgba(255,255,255,.5);
}
.glue-btn .glue-tube::after{
  content:"";position:absolute;top:-6px;left:-2px;right:-2px;height:6px;
  background:#fff;opacity:.8;border-radius:2px 2px 0 0;
}
.glue-btn:active{transform:scale(.97);}

.section-title{
  font-family:"Comic Sans MS","Chalkboard SE",cursive;
  font-size:16px;font-weight:800;color:var(--ink);
  margin:22px 0 12px;
  display:flex;align-items:center;gap:8px;
}
.section-title::before{content:"";flex:1;height:1px;background:rgba(58,42,26,.25);}

.today-list .scrap{margin-bottom:10px;}

/* ================= EMPTY STATE ================= */
.empty{
  text-align:center;padding:40px 20px;color:var(--pencil);
}
.empty .glue-illus{
  width:34px;height:70px;margin:0 auto 16px;border-radius:8px;
  background:linear-gradient(90deg,#f0b266,#f8d39a 60%,#e89b4e);
  position:relative;
  box-shadow:inset -2px -2px 3px rgba(0,0,0,.2);
}
.empty .glue-illus::after{content:"";position:absolute;top:-8px;left:-3px;right:-3px;height:8px;background:#fff;opacity:.8;}
.empty p{font-size:14px;line-height:1.5;font-family:"Comic Sans MS","Chalkboard SE",cursive;}

/* ================= SEARCH ================= */
.search{
  width:100%;
  padding:12px 14px;
  font-family:inherit;font-size:14px;
  background:var(--paper);
  border:none;
  border-radius:8px;
  box-shadow:inset 0 1px 0 rgba(0,0,0,.05), inset 0 0 0 1px rgba(0,0,0,.08);
  margin-bottom:16px;
  color:var(--ink);
}
.search::placeholder{color:var(--pencil);font-style:italic;}

/* floating + button */
.fab{
  position:fixed;
  right:18px;
  bottom:calc(var(--tab-h) + var(--safe-b) + 18px);
  z-index:9;
  width:58px;height:58px;
  border:none;cursor:pointer;
  border-radius:8px 12px 6px 10px;
  background:var(--paper);
  box-shadow:0 4px 10px rgba(0,0,0,.25), inset 0 0 0 1px rgba(0,0,0,.06);
  font-size:30px;font-weight:800;color:var(--primary);
  display:flex;align-items:center;justify-content:center;
}
.fab::after{
  content:"";position:absolute;inset:-4px;
  background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.5), transparent 45%);
  filter:blur(1px);z-index:-1;
}
.fab:active{transform:scale(.94);}

/* ================= CATEGORIES GRID ================= */
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:10px;}
.chip{
  position:relative;
  background:var(--paper);
  padding:18px 14px;
  border:none;cursor:pointer;
  border-radius:6px 12px 8px 10px;
  box-shadow:0 3px 6px rgba(0,0,0,.16), inset 0 0 0 1px rgba(0,0,0,.05);
  text-align:left;
  font-family:inherit;
  color:var(--ink);
  transition:transform .12s ease;
}
.chip:nth-child(odd){transform:rotate(-1deg);}
.chip:nth-child(even){transform:rotate(.8deg);}
.chip:active{transform:scale(.96);}
.chip-name{font-weight:800;font-size:16px;}
.chip-count{font-size:12px;color:var(--pencil);margin-top:4px;}
.chip-dot{width:12px;height:12px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:middle;}

/* ================= PRACTICE ================= */
.practice-wrap{max-width:420px;margin:0 auto;padding-top:14px;}
.p-count{text-align:center;font-size:12px;color:var(--pencil);margin-bottom:18px;font-family:"Comic Sans MS","Chalkboard SE",cursive;}
.p-card{
  position:relative;
  background:var(--paper);
  border-radius:8px 14px 6px 16px / 10px 7px 14px 8px;
  box-shadow:0 5px 12px rgba(0,0,0,.22), inset 0 0 0 1px rgba(0,0,0,.05);
  padding:30px 22px;
  min-height:220px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;
  cursor:pointer;
  transition:transform .18s ease;
  transform:rotate(.6deg);
}
.p-card:active{transform:scale(.985);}
.p-card .scrap-word{font-size:34px;}
.p-reveal{
  margin-top:18px;
  padding-top:16px;
  border-top:2px dashed rgba(58,42,26,.25);
  display:none;
}
.p-card.revealed .p-reveal{display:block;animation:pageIn .3s ease;}
.p-reveal .p-trans{font-size:18px;color:var(--ink);font-weight:600;}
.p-reveal .p-note{font-size:13px;color:var(--pencil);font-style:italic;margin-top:10px;line-height:1.5;}
.p-hint{font-size:11px;color:var(--pencil);margin-top:18px;font-style:italic;}
.p-next{
  margin-top:22px;width:100%;
  padding:14px;border:none;cursor:pointer;
  background:var(--accent);color:#fff;
  font-family:inherit;font-weight:800;font-size:16px;
  border-radius:8px;
  box-shadow:0 3px 6px rgba(0,0,0,.2);
}
.p-next:active{transform:scale(.97);}
.p-shuffle{
  display:block;margin:14px auto 0;
  background:none;border:none;color:var(--pencil);
  font-family:inherit;font-size:12px;cursor:pointer;text-decoration:underline;
}

/* ================= FORM SHEET ================= */
.sheet{
  position:fixed;inset:0;z-index:20;
}
.sheet-scrim{position:absolute;inset:0;background:rgba(58,42,26,.45);animation:pageIn .2s ease;}
.sheet-card{
  position:absolute;left:0;right:0;bottom:0;
  background:var(--secondary);
  border-radius:18px 18px 0 0;
  padding:20px 18px calc(var(--safe-b) + 20px);
  max-height:88vh;
  overflow-y:auto;
  box-shadow:0 -6px 20px rgba(0,0,0,.3);
  animation:sheetUp .28s ease;
}
@keyframes sheetUp{from{transform:translateY(100%);}to{transform:none;}}
.form-title{
  font-family:"Comic Sans MS","Chalkboard SE",cursive;
  font-size:20px;font-weight:800;color:var(--ink);
  margin-bottom:16px;text-align:center;
}
.rule-field{
  display:block;margin-bottom:18px;
}
.rule-field span{
  display:block;font-size:12px;font-weight:700;color:var(--pencil);
  margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px;
}
.rule-field em{font-weight:400;text-transform:none;font-style:italic;}
.rule-field input,.rule-field textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:2px solid #c9b08e;
  padding:8px 2px;
  font-family:inherit;font-size:16px;color:var(--ink);
  outline:none;
  line-height:1.3;
}
.rule-field textarea{resize:none;}
.rule-field input:focus,.rule-field textarea:focus{border-bottom-color:var(--primary);}
.form-actions{display:flex;gap:12px;margin-top:20px;}
.form-actions button{
  flex:1;padding:13px;border:none;border-radius:8px;
  font-family:inherit;font-weight:800;font-size:15px;cursor:pointer;
}
.btn-ghost{background:#e6d6bc;color:var(--ink);}
.btn-glue{background:linear-gradient(180deg,#e89b4e,#d9822f);color:#fff;box-shadow:0 3px 6px rgba(0,0,0,.2);}
.btn-glue:active,.btn-ghost:active{transform:scale(.97);}

/* tear-off X corner (delete) */
.tear-off{
  position:absolute;top:-10px;right:-6px;
  width:34px;height:34px;
  border:none;cursor:pointer;
  background:var(--primary);color:#fff;
  font-size:15px;font-weight:800;
  border-radius:0 8px 4px 8px;
  box-shadow:0 2px 4px rgba(0,0,0,.25);
  font-family:inherit;
}
.tear-off:active{transform:scale(.9);}

.field-error{border-bottom-color:var(--primary)!important;}
.error-msg{color:var(--primary);font-size:12px;margin:-10px 0 12px;display:none;}
.error-msg.show{display:block;}

.toast{
  position:fixed;left:50%;bottom:calc(var(--tab-h) + var(--safe-b) + 20px);
  transform:translateX(-50%);
  background:var(--ink);color:#fff;
  padding:10px 18px;border-radius:20px;
  font-size:13px;z-index:30;
  opacity:0;transition:opacity .25s ease;
  pointer-events:none;
  box-shadow:0 4px 10px rgba(0,0,0,.3);
  max-width:80vw;text-align:center;
}
.toast.show{opacity:1;}