:root {
  --bg:#fff4d6; --card:#fff; --ink:#1c1917; --text:#1c1917; --muted:#7c7466; --accent:#ff5d8f;
  --yellow:#ffd23f; --orange:#ff8a3d; --green:#a3e635; --brown:#a0522d; --pink:#f9a8d4; --sky:#7dd3fc;
  --essen:#ffe08a; --essen-b:#ff8a3d; --stuhlgang:#e8c9a8; --stuhlgang-b:#a0522d; --darmwinde:#d9f99d; --darmwinde-b:#65a30d; --bauch:#ffc7d6;
  --shadow:4px 4px 0 var(--ink); --shadow-sm:3px 3px 0 var(--ink);
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:15px/1.45 Inter, system-ui, sans-serif; background:var(--bg); color:var(--text); position:relative; min-height:100vh; }
body::before { content:""; position:fixed; inset:0; z-index:-1; opacity:.16; pointer-events:none;
  background-image:url(art/poop.svg), url(art/cloud.svg), url(art/apple.svg), url(art/sausage.svg), url(art/gut.svg), url(art/cloud.svg), url(art/apple.svg), url(art/poop.svg);
  background-repeat:no-repeat;
  background-size:110px, 130px, 100px, 140px, 160px, 110px, 90px, 90px;
  background-position:4% 12%, 92% 8%, 88% 55%, 6% 60%, 50% 95%, 20% 92%, 30% 35%, 75% 88%; }
h1,h2,h3,button,.brand,.logo,.kinds span { font-family:Fredoka, Inter, system-ui, sans-serif; }
button, input { font:inherit; }
button { padding:.5rem 1rem; border:2.5px solid var(--ink); background:#fff; border-radius:999px; cursor:pointer; font-weight:600; color:var(--ink); box-shadow:var(--shadow-sm); transition:transform .08s, box-shadow .08s; }
button:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
button.primary { background:var(--accent); color:#fff; }
button.danger { background:#fff; color:#b91c1c; }
input[type=text], input[type=datetime-local] { padding:.6rem .8rem; border:2.5px solid var(--ink); border-radius:12px; background:#fff; outline:none; }
input[type=text]:focus, input[type=datetime-local]:focus { box-shadow:var(--shadow-sm); }
.err { color:#b91c1c; margin:.2rem 0 0; font-size:.9rem; font-weight:600; }

/* Gate */
#gate { display:flex; min-height:100vh; min-height:100dvh; align-items:center; justify-content:center; padding:1.5rem; }
#gate form { display:flex; flex-direction:column; gap:.7rem; width:100%; max-width:360px; background:var(--card); padding:1.4rem 1.6rem 1.8rem; border:3px solid var(--ink); border-radius:24px; box-shadow:6px 6px 0 var(--ink); }
.hero { display:flex; justify-content:center; align-items:flex-end; gap:0; height:120px; margin-bottom:.4rem; }
.hero img { display:block; }
.h-poop { width:120px; z-index:1; }
.h-apple { width:80px; margin-right:-18px; transform:rotate(-10deg); }
.h-cloud { width:110px; margin-left:-20px; margin-bottom:26px; transform:rotate(8deg); }
#gate .brand { font-size:2.4rem; font-weight:700; letter-spacing:-.02em; text-align:center; line-height:1; color:var(--ink); }
#gate .tag { color:var(--muted); text-align:center; margin:-.2rem 0 .6rem; font-weight:500; }
#gate label { font-weight:600; }
#gate input { font-size:1.1rem; }
#gate button { padding:.75rem; font-size:1.05rem; }

/* Header */
header { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; padding:.6rem 1rem; background:var(--yellow); border-bottom:3px solid var(--ink); position:sticky; top:0; z-index:2; }
.logo { display:flex; align-items:center; gap:.35rem; font-weight:700; font-size:1.25rem; color:var(--ink); text-decoration:none; margin-right:.4rem; }
.logo img { width:30px; }
.quick { display:flex; gap:.35rem; }
.q-essen { background:var(--essen); }
.q-stuhlgang { background:var(--stuhlgang); }
.q-darmwinde { background:var(--darmwinde); }
.q-bauch { background:var(--bauch); }
header .nav { display:flex; gap:.25rem; margin-left:.4rem; }
header .nav button { padding:.45rem .8rem; }
#week-label { font-weight:600; font-size:.9rem; }
.export { margin-left:auto; color:var(--ink); text-decoration:underline; font-size:.85rem; font-weight:600; }

/* Form */
#entry-form { margin:.9rem 1rem 0; padding:.9rem; background:var(--card); border:3px solid var(--ink); border-radius:18px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:.7rem; }
#entry-form .row { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
#f-text { flex:1; min-width:200px; }
.kinds { display:flex; gap:.25rem; background:var(--bg); padding:.2rem; border-radius:999px; border:2.5px solid var(--ink); }
.kinds input { display:none; }
.kinds span { display:inline-block; padding:.35rem .8rem; border-radius:999px; cursor:pointer; color:var(--muted); font-weight:600; }
.kinds input:checked + span { background:var(--ink); color:#fff; }
.rating button { font-size:1.7rem; line-height:1; padding:.05rem .2rem; border:0; background:none; box-shadow:none; opacity:.2; filter:grayscale(1); }
.rating button img { width:1.7rem; height:1.7rem; display:block; }
.rating button.on { opacity:1; filter:none; transform:scale(1.1); }
.rating .hint { color:var(--muted); font-size:.8rem; margin-left:.4rem; }

/* Week */
#week { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:.7rem; padding:.9rem 1rem 2rem; }
.day { scroll-margin-top:4.5rem; background:var(--card); border:3px solid var(--ink); border-radius:18px; box-shadow:var(--shadow); overflow:hidden; }
.day.today { background:#fffbea; }
.day h3 { margin:0; padding:.55rem .8rem; font-size:1rem; font-weight:600; border-bottom:2.5px solid var(--ink); background:var(--sky); }
.day.today h3 { background:var(--accent); color:#fff; }
.slot { padding:.45rem .55rem; min-height:3.4rem; }
.slot + .slot { border-top:2px dashed #d6cfc0; }
.slot .name { font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:.25rem; font-weight:700; }
.e { display:block; width:100%; text-align:left; padding:.35rem .55rem; margin:.25rem 0; border:2px solid var(--ink); border-radius:10px; background:var(--essen); font-size:.88rem; font-family:Inter, system-ui, sans-serif; font-weight:500; box-shadow:2px 2px 0 var(--ink); }
.e.stuhlgang { background:var(--stuhlgang); }
.e.darmwinde { background:var(--darmwinde); }
.e.bauch { background:var(--bauch); }
.e time { color:var(--muted); font-size:.75rem; margin-right:.35rem; font-variant-numeric:tabular-nums; }
.e .r { margin-right:.35rem; letter-spacing:-.1em; white-space:nowrap; }
.e .r img { width:.95rem; height:.95rem; vertical-align:-.15em; margin-right:-.15em; }

@media (max-width: 900px) {
  #week { grid-template-columns:1fr; }
  .slot { min-height:0; }
  header { padding:.6rem .8rem; }
  .logo { width:100%; font-size:1.3rem; }
  .quick { width:100%; }
  .quick button { flex:1; padding:.6rem .1rem; font-size:.88rem; white-space:nowrap; }
  .export { margin-left:auto; }
  body::before { background-size:70px, 90px, 60px, 90px, 110px, 70px, 60px, 60px; }
}