:root{
  --bg:#EFE7DA;
  --surface:#FBF7F0;
  --surface-2:#F3EADC;
  --surface-3:#EADFCD;
  --ink:#3D352D;
  --ink-soft:#938573;
  --ink-faint:#B6A892;
  --rose:#C68A84;
  --rose-deep:#AE6E68;
  --sage:#94A07C;
  --line:#E3D7C4;
  --line-soft:#EDE4D5;
  --good:#9BB089;
  --mid:#D9B36A;
  --high:#C68A84;
  --shadow:0 24px 60px -28px rgba(80,62,44,.45);
  --shadow-card:0 8px 28px -18px rgba(80,62,44,.5);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-weight:300;
  color:var(--ink);
  background:
    radial-gradient(120% 80% at 100% 0%, #F4ECDF 0%, transparent 55%),
    radial-gradient(120% 90% at 0% 100%, #EAE0CF 0%, transparent 50%),
    var(--bg);
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:26px 14px;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23C9B894' stroke-width='1' opacity='.25'%3E%3Cpath d='M30 150 C30 110 30 90 50 70 M50 70 C40 70 32 64 30 54 M50 70 C60 68 68 62 70 52'/%3E%3Cpath d='M140 30 C140 70 140 90 120 110 M120 110 C130 110 138 116 140 126 M120 110 C110 112 102 118 100 128'/%3E%3C/g%3E%3C/svg%3E");
}

.app{
  position:relative;
  width:100%;
  max-width:430px;
  height:calc(100vh - 52px);
  max-height:900px;
  min-height:620px;
  background:var(--surface);
  border-radius:38px;
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:1px solid #F0E7D8;
}

header{
  padding:26px 24px 14px;
  background:linear-gradient(180deg,#FBF7F0 0%, #FBF7F0 70%, rgba(251,247,240,0));
  flex:0 0 auto;position:relative;z-index:5;
}
.brandrow{display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:10px;}
.leaf{width:30px;height:30px;flex:0 0 auto;}
.brand h1{font-family:'Fraunces',serif;font-weight:400;font-size:21px;letter-spacing:.2px;margin:0;line-height:1;}
.brand .sub{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--ink-faint);margin-top:3px;font-weight:400;}
.demo-badge{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--rose-deep);border:1px solid #E6CBC7;background:#F7ECEA;padding:5px 10px;border-radius:20px;font-weight:500;}

.scroll{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 22px 26px;}
.scroll::-webkit-scrollbar{width:0;}

.screen{display:none;animation:fade .4s ease both;}
.screen.active{display:block;}
@keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

.welcome{font-family:'Fraunces',serif;font-size:19px;font-weight:300;color:var(--ink);margin:10px 0 2px;line-height:1.2;}
.welcome b{font-weight:500;}
.daterow{display:flex;align-items:center;justify-content:space-between;margin:6px 0 20px;}
.daterow .greet{font-family:'Fraunces',serif;font-size:25px;font-weight:300;line-height:1.15;}
.daterow .greet .k{display:block;font-size:12px;font-family:'Hanken Grotesk';letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-faint);margin-bottom:5px;font-weight:400;}
.daterow .greet b{font-weight:300;}
input[type=date]{font-family:'Hanken Grotesk';font-size:13px;color:var(--ink-soft);border:1px solid var(--line);background:var(--surface-2);border-radius:14px;padding:9px 12px;font-weight:400;}

.card{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:22px;padding:18px 18px 20px;margin-bottom:16px;}
.card .label{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:var(--ink-soft);font-weight:500;margin-bottom:14px;}
.label .dot{width:7px;height:7px;border-radius:50%;background:var(--sage);}

.painval{display:flex;align-items:baseline;gap:10px;margin-bottom:4px;}
.painnum{font-family:'Fraunces',serif;font-size:46px;line-height:.9;font-weight:300;color:var(--ink);transition:color .3s;}
.painnum .of{font-size:18px;color:var(--ink-faint);}
.painlabel{font-size:14px;color:var(--ink-soft);font-weight:400;}
input[type=range]{-webkit-appearance:none;width:100%;height:8px;border-radius:8px;margin:14px 0 2px;background:linear-gradient(90deg,var(--good),var(--mid) 55%,var(--high));outline:none;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--rose);box-shadow:0 3px 8px rgba(120,80,70,.3);cursor:pointer;}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--rose);cursor:pointer;}

.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{font-family:'Hanken Grotesk';font-size:13px;font-weight:400;color:var(--ink-soft);background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:8px 14px;cursor:pointer;transition:all .18s;user-select:none;}
.chip:active{transform:scale(.96);}
.chip.on{background:var(--sage);border-color:var(--sage);color:#fff;font-weight:500;}
.chips.rose .chip.on{background:var(--rose);border-color:var(--rose);}
.chips.locked{opacity:.45;pointer-events:none;filter:grayscale(.25);}
.cap-hint{font-size:11.5px;color:var(--ink-faint);margin-top:9px;font-weight:400;line-height:1.4;}
.cap-sub{color:var(--ink-faint);font-weight:400;}
.chips.diet .chip.on{background:var(--mid);border-color:var(--mid);}
.chips.diet .chip.none.on{background:var(--ink-soft);border-color:var(--ink-soft);}

/* Ernährung & Schmerz (Verlauf) */
.d-row{display:grid;grid-template-columns:1.4fr 1fr 1fr .9fr;align-items:center;gap:6px;padding:10px 2px;border-bottom:1px solid var(--line-soft);}
.d-row:last-of-type{border-bottom:none;}
.d-row.d-head{padding:0 2px 6px;font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-faint);font-weight:400;}
.d-name{font-size:14px;font-weight:400;}
.d-col{text-align:center;}
.d-col b{display:block;font-family:'Fraunces',serif;font-size:19px;font-weight:300;line-height:1;}
.d-col small{display:block;font-size:10px;color:var(--ink-faint);margin-top:3px;white-space:nowrap;}
.d-diff{display:inline-block;font-size:12px;font-weight:500;padding:4px 9px;border-radius:12px;background:var(--surface-3);color:var(--ink-soft);white-space:nowrap;}
.d-diff.up{background:#F7ECEA;color:var(--rose-deep);}
.d-diff.down{background:#EEF2E6;color:#6F7F57;}
.diet-empty{font-size:13px;color:var(--ink-soft);line-height:1.6;}

.field{margin-bottom:18px;}
.field:last-child{margin-bottom:0;}
.field>.cap{font-size:13px;color:var(--ink);font-weight:500;margin-bottom:10px;}

.toggles{display:flex;flex-direction:column;gap:2px;}
.toggle{display:flex;align-items:center;justify-content:space-between;padding:13px 2px;border-bottom:1px solid var(--line-soft);}
.toggle:last-child{border-bottom:none;}
.toggle .t-txt{font-size:14px;font-weight:400;}
.toggle .t-txt small{display:block;font-size:11px;color:var(--ink-faint);margin-top:2px;}
.switch{width:46px;height:27px;border-radius:20px;background:var(--surface-3);border:1px solid var(--line);position:relative;cursor:pointer;transition:.22s;flex:0 0 auto;}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);transition:.22s;}
.switch.on{background:var(--rose);border-color:var(--rose);}
.switch.on::after{left:21px;}
.switch.sage.on{background:var(--sage);border-color:var(--sage);}

textarea, input[type=text]{width:100%;font-family:'Hanken Grotesk';font-size:14px;font-weight:300;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:13px 14px;resize:none;line-height:1.5;}
textarea:focus,input[type=text]:focus{outline:none;border-color:var(--sage);}
textarea::placeholder,input::placeholder{color:var(--ink-faint);}

.savebtn{width:100%;font-family:'Hanken Grotesk';font-size:15px;font-weight:500;letter-spacing:.3px;color:#fff;background:var(--ink);border:none;border-radius:18px;padding:16px;cursor:pointer;margin-top:4px;transition:.2s;box-shadow:var(--shadow-card);}
.savebtn:active{transform:scale(.98);}
.savebtn.saved{background:var(--sage);}
.saved-note{text-align:center;font-size:12px;color:var(--sage);margin-top:10px;height:14px;font-weight:500;letter-spacing:.5px;opacity:0;transition:.3s;}
.saved-note.show{opacity:1;}

.h-title{font-family:'Fraunces',serif;font-size:24px;font-weight:300;margin:6px 0 4px;}
.h-sub{font-size:12px;color:var(--ink-faint);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:18px;font-weight:400;}
.stats{display:flex;gap:10px;margin-bottom:16px;}
.stat{flex:1;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:18px;padding:14px 12px;text-align:center;}
.stat .v{font-family:'Fraunces',serif;font-size:27px;font-weight:300;line-height:1;}
.stat .k{font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-faint);margin-top:6px;font-weight:400;line-height:1.3;}
.chartwrap{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:22px;padding:18px 14px 10px;margin-bottom:16px;}
.chartwrap .label{margin-left:6px;}

.entrylist .ent{display:flex;align-items:center;gap:14px;padding:14px 4px;border-bottom:1px solid var(--line-soft);}
.entrylist .ent:last-child{border-bottom:none;}
.ent .pill{width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-size:19px;color:#fff;flex:0 0 auto;}
.ent .e-main{flex:1;min-width:0;}
.ent .e-date{font-size:14px;font-weight:500;}
.ent .e-meta{font-size:12px;color:var(--ink-soft);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ent .e-blood{font-size:16px;color:var(--rose);flex:0 0 auto;}

.empty{text-align:center;color:var(--ink-faint);font-size:14px;padding:40px 20px;line-height:1.6;}
.empty .leaf{margin:0 auto 14px;display:block;width:40px;height:40px;opacity:.6;}

.p-hero{text-align:center;padding:8px 0 22px;}
.p-ring{width:74px;height:74px;border-radius:50%;margin:0 auto 12px;background:var(--surface-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;}
.p-hero .name{font-family:'Fraunces',serif;font-size:22px;font-weight:300;}
.p-hero .since{font-size:12px;color:var(--ink-faint);letter-spacing:1px;margin-top:4px;}

.footer-note{font-size:10.5px;color:var(--ink-faint);text-align:center;line-height:1.6;padding:8px 26px 4px;margin-top:6px;}
.footer-note a{color:var(--ink-soft);}

nav{flex:0 0 auto;display:flex;background:var(--surface);border-top:1px solid var(--line-soft);padding:8px 14px calc(8px + env(safe-area-inset-bottom));}
nav button{flex:1;background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;padding:7px 0;color:var(--ink-faint);font-family:'Hanken Grotesk';font-size:11px;font-weight:500;letter-spacing:.3px;transition:.2s;}
nav button svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.6;}
nav button.active{color:var(--rose-deep);}

/* ---------- PDF / print report ---------- */
#report{display:none;}
/* Druckansicht: per Media Query (Browser) oder per Klasse .print-mode
   (native PDF-Renderer auf iOS/Android, gesetzt von report-export.js) */
@media print{
  body{background:#fff !important;padding:0;display:block;}
  body::before{display:none !important;}
  .app{display:none !important;}
  #report{display:block !important;}
  @page{size:A4;margin:14mm;}
}
body.print-mode{background:#fff !important;padding:0;display:block;}
body.print-mode::before{display:none !important;}
body.print-mode .app{display:none !important;}
body.print-mode #report{display:block !important;}
#report thead{display:table-header-group;}
#report{font-family:'Hanken Grotesk',sans-serif;color:#222;font-weight:400;}
#report h2{font-family:'Fraunces',serif;font-weight:400;font-size:22px;margin:0 0 2px;}
#report .r-ident{font-size:14px;color:#333;margin:2px 0 2px;font-weight:500;}
#report .r-ident .r-name{font-size:15px;font-weight:700;}
#report .r-sub{font-size:11px;color:#777;margin-bottom:18px;}
#report .r-sec{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#9a6a64;font-weight:600;margin:20px 0 8px;border-bottom:1px solid #e0d5c4;padding-bottom:4px;}
#report .r-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;font-size:12.5px;}
#report .r-grid div b{color:#555;font-weight:600;}
#report .r-summary{font-size:12.5px;line-height:1.7;}
#report table{width:100%;border-collapse:collapse;font-size:10px;margin-top:6px;}
#report th{text-align:left;background:#f3eadc;border-bottom:2px solid #c9b894;padding:5px 4px;font-size:9px;letter-spacing:.4px;text-transform:uppercase;color:#6a5d4d;}
#report td{border-bottom:1px solid #eee;padding:5px 4px;vertical-align:top;}
#report tr{break-inside:avoid;}
#report .r-foot{margin-top:22px;font-size:9.5px;color:#999;border-top:1px solid #e0d5c4;padding-top:8px;line-height:1.5;}

/* ---------- backup actions (Profil) ---------- */
.backup-actions{display:flex;flex-wrap:wrap;gap:8px;}
.backup-actions .chip{padding:11px 16px;font-weight:500;}