:root{
  --bg:#f6f4ef;
  --paper:#ffffff;
  --ink:#26262e;
  --soft:#6a6675;
  --line:#e7e3d9;
  --blue:#1e3a6e;        /* błękit maryjny */
  --blue-soft:#3d5a97;
  --gold:#b98a2e;
  --gold-soft:#d8b45f;
  --shadow:0 14px 40px rgba(30,58,110,.09),0 2px 8px rgba(0,0,0,.03);
}
*,::before,::after{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;min-height:100vh;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;
  display:flex;justify-content:center;
  padding:0 0 max(28px,env(safe-area-inset-bottom));
}
.app{width:100%;max-width:480px;min-height:100vh;background:var(--bg);position:relative}

/* ---------- Nagłówek ---------- */
.top{
  background:linear-gradient(160deg,var(--blue) 0%,var(--blue-soft) 100%);
  color:#fff;padding:calc(26px + env(safe-area-inset-top)) 22px 30px;
  border-radius:0 0 26px 26px;box-shadow:var(--shadow);text-align:center;
}
.top .kicker{font-size:.64rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-soft);font-weight:700}
.top h1{margin:8px 0 4px;font-family:Georgia,"Times New Roman",serif;font-weight:600;font-size:1.9rem;letter-spacing:.01em}
.top .sub{margin:0;color:#cdd6e8;font-size:.9rem}
.top .rule{width:52px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-soft),transparent);margin:14px auto 0}

/* pasek postępu */
.progress{margin:18px 20px 0;padding:14px 16px;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.progress .lbl{display:flex;justify-content:space-between;font-size:.78rem;color:var(--soft);margin-bottom:8px}
.progress .lbl b{color:var(--blue);font-weight:700}
.bar{height:8px;border-radius:8px;background:#ece8df;overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,var(--gold-soft),var(--gold));transition:width .6s ease}

/* ---------- Lista dni ---------- */
.days{padding:18px 20px 8px;display:grid;gap:11px}
.section-title{margin:14px 4px 2px;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);font-weight:700}
.day-card{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:15px 16px;cursor:pointer;color:var(--ink);font:inherit;
  transition:transform .12s,box-shadow .18s,border-color .18s;
}
.day-card:hover{border-color:var(--gold-soft);box-shadow:var(--shadow);transform:translateY(-1px)}
.day-card:active{transform:scale(.995)}
.day-card .num{
  flex:0 0 44px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  font-family:Georgia,serif;font-weight:700;font-size:1.15rem;color:#fff;
  background:linear-gradient(145deg,var(--blue-soft),var(--blue));
}
.day-card .body{flex:1;min-width:0}
.day-card .dlabel{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:700}
.day-card .dtheme{font-weight:600;font-size:1.02rem;line-height:1.25;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.day-card .chev{color:#c7c2b5;font-size:1.2rem;flex:0 0 auto}
.day-card.done .num{background:linear-gradient(145deg,var(--gold-soft),var(--gold))}
.day-card.done .num::after{content:'✓';font-size:1.1rem}
.day-card.done .num span{display:none}

/* zablokowane */
.day-card.locked{cursor:default;opacity:.7;background:#f3f1ea}
.day-card.locked:hover{transform:none;box-shadow:none;border-color:var(--line)}
.day-card.locked .num{background:#d9d4c7;color:#fff}
.day-card.locked .dtheme{color:var(--soft)}
.day-card.locked .chev{font-size:1rem}

/* ---------- Widok dnia ---------- */
.view{display:none;padding:0 0 30px;animation:fade .4s ease both}
.view.show{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dtop{background:linear-gradient(160deg,var(--blue),var(--blue-soft));color:#fff;
  padding:calc(20px + env(safe-area-inset-top)) 22px 26px;border-radius:0 0 26px 26px;box-shadow:var(--shadow)}
.back{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);border:none;color:#fff;
  font:inherit;font-size:.86rem;padding:8px 14px;border-radius:20px;cursor:pointer;margin-bottom:14px}
.back:hover{background:rgba(255,255,255,.24)}
.dtop .dday{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-soft);font-weight:700}
.dtop h2{margin:6px 0 0;font-family:Georgia,serif;font-weight:600;font-size:1.6rem;line-height:1.18}

.block{margin:18px 20px 0;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow)}
.block .h{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:800}
.block .h .ic{font-size:1rem}
.verse{font-family:Georgia,serif;font-size:1.12rem;line-height:1.55;color:var(--blue);font-style:italic}
.verse .ref{display:block;margin-top:10px;font-family:inherit;font-style:normal;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);font-weight:700}
.text{margin:0;color:var(--ink);font-size:1rem}
.prayer-name{margin:0 0 8px;font-weight:700;color:var(--blue);font-size:.95rem}
.prayer-text{margin:0;color:var(--ink);font-size:1rem;white-space:pre-line;line-height:1.7}
.practice{background:linear-gradient(150deg,#fbf6ea,#f6edd6);border-color:#eaddb8}
.practice .text{color:#5c4a1e}

/* dzwonek medytacji */
.chime{display:inline-flex;align-items:center;gap:8px;margin-top:14px;background:var(--blue);color:#fff;border:none;
  font:inherit;font-weight:600;font-size:.9rem;padding:11px 18px;border-radius:24px;cursor:pointer;transition:filter .15s,transform .12s}
.chime:hover{filter:brightness(1.08)}
.chime:active{transform:scale(.97)}

/* przycisk ukończenia */
.complete{display:flex;align-items:center;justify-content:center;gap:9px;width:calc(100% - 40px);margin:22px 20px 0;
  padding:16px;border-radius:15px;border:none;font:inherit;font-weight:800;font-size:1.02rem;color:#3a2d09;cursor:pointer;
  background:linear-gradient(135deg,#ffe6a3 0,#e7bd55 45%,#caa033 100%);
  box-shadow:0 12px 26px rgba(185,138,46,.3),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .14s,filter .14s}
.complete:hover{transform:translateY(-2px);filter:brightness(1.03)}
.complete.is-done{background:#e9e4d7;color:var(--soft);box-shadow:none;cursor:default}

/* zablokowany widok */
.lockbox{margin:40px 20px;text-align:center;color:var(--soft)}
.lockbox .big{font-size:2.6rem}
.lockbox h3{margin:12px 0 6px;color:var(--blue);font-family:Georgia,serif}

.foot{margin:26px 20px 0;text-align:center;color:#a7a291;font-size:.72rem;line-height:1.6}

/* ---------- Ekran powitalny ---------- */
.splash{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:linear-gradient(160deg,var(--blue),var(--blue-soft));color:#fff;transition:opacity .6s ease}
.splash.hide{opacity:0;pointer-events:none}
.splash .star{font-size:2.6rem}
.splash h1{margin:0;font-family:Georgia,serif;font-weight:600;font-size:2rem;letter-spacing:.02em}
.splash p{margin:0;color:#cdd6e8;font-size:.9rem;letter-spacing:.14em;text-transform:uppercase}

@media (prefers-color-scheme:dark){
  :root{--bg:#16161b;--paper:#1f1f27;--ink:#eceaf2;--soft:#a09caf;--line:#2e2e38}
  .day-card.locked{background:#1a1a20}
  .practice{background:linear-gradient(150deg,#2a2416,#241f12);border-color:#3a3320}
  .practice .text{color:#e6d6a8}
  .progress .lbl b,.verse,.prayer-name,.dtop h2,.top h1{color:inherit}
  .verse{color:var(--gold-soft)}
}