@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;600;700&family=Inter:wght@400;500;600;700&display=swap');
*{box-sizing:border-box;margin:0;padding:0;}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
button{font-family:inherit;}
a:focus{outline:none;}
.back{transition:transform .12s,background .12s;}
.back.pressed{background:rgba(255,255,255,.22);transform:scale(.92);}
button:focus{outline:none;}
body{background:#f0fafa;font-family:'Inter',system-ui,sans-serif;color:#0c4a6e;min-height:100vh;overflow-x:hidden;}

.header{background:linear-gradient(135deg,#0b3d5c 0%,#1479a6 100%);padding:22px 20px 18px;color:white;display:flex;align-items:center;gap:14px;}
.header .back{width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:transparent;color:white;font-size:20px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;text-decoration:none;}
.brand{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#7dd3fc;margin-bottom:4px;}
.title{font-family:'Lora',Georgia,serif;font-size:clamp(18px,5vw,24px);font-weight:700;line-height:1.2;}
.sub{font-size:12px;color:#bae6fd;line-height:1.5;margin-top:4px;}

.wrap{max-width:520px;margin:0 auto;padding:18px 16px 40px;}
.wrap.cal{padding:18px 10px 40px;}

/* početna */
.home-hero{background:linear-gradient(135deg,#0b3d5c 0%,#1479a6 100%);color:white;padding:34px 20px 30px;text-align:center;}
.home-hero img{height:92px;width:auto;margin-bottom:12px;}
.home-hero .logotype{font-family:'Lora',Georgia,serif;font-size:clamp(22px,6.4vw,30px);letter-spacing:.14em;font-weight:600;line-height:1.1;}
.home-hero .city{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:#7dd3fc;font-weight:700;margin-top:10px;}
.home-hero .sub{font-size:13px;margin-top:6px;}
.cards{display:grid;gap:14px;}
.card{display:flex;align-items:center;gap:16px;background:white;border:none;border-radius:16px;padding:18px 18px;box-shadow:0 3px 14px rgba(12,74,110,.10);text-decoration:none;color:inherit;transition:transform .12s,box-shadow .15s;}
.card{transition:transform .2s cubic-bezier(.2,.7,.3,1),background .2s,box-shadow .2s;}
.card .card-arrow{transition:transform .2s cubic-bezier(.2,.7,.3,1);}
.card.pressed{transform:scale(.985);background:#cfe6f4;box-shadow:0 1px 4px rgba(12,74,110,.08);}
.card.pressed .card-arrow{transform:translateX(4px);}
.card img{width:64px;height:64px;object-fit:contain;flex-shrink:0;}
.card-title{font-family:'Lora',Georgia,serif;font-size:20px;font-weight:700;color:#0c4a6e;}
.card-sub{font-size:13px;color:#64748b;margin-top:3px;line-height:1.4;}
.card-arrow{margin-left:auto;color:#0891b2;font-size:22px;}
.molitva-zaziv{font-family:'Lora',Georgia,serif;font-style:italic;font-size:15px;line-height:1.6;color:#0c4a6e;text-align:center;padding:26px 16px 0;}

/* traka s brojkama */
.stat-line{font-size:12px;color:#0369a1;text-align:center;padding:7px 12px;background:#e0f2fe;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.stat-line b{color:#0c4a6e;}

/* kalendar posta */
.month-nav{display:flex;align-items:center;justify-content:space-between;margin:4px 0 12px;}
.month-nav button{width:36px;height:36px;border-radius:10px;border:1.5px solid #a5f3fc;background:white;color:#0891b2;font-size:18px;cursor:pointer;transition:transform .12s;}
.month-nav button:active{transform:scale(.94);}
.month-nav button:disabled{opacity:.3;}
.month-name{font-family:'Lora',Georgia,serif;font-size:19px;font-weight:700;}
.weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;margin-bottom:5px;}
.weekdays span{text-align:center;font-size:10px;color:#64748b;text-transform:uppercase;letter-spacing:.05em;font-weight:600;}
.days.loading{opacity:.45;pointer-events:none;}
.days{transition:opacity .2s;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;}
.day{min-height:54px;min-width:0;border-radius:10px;border:2px dashed #a5f3fc;background:white;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .15s;}
.day:active{background:#ecfeff;}
.day .num{font-size:14px;font-weight:600;color:#0c4a6e;line-height:1;}
.day .cnt{font-size:13px;font-weight:700;color:#0891b2;line-height:1;margin-top:4px;min-height:13px;}
.day.blank{border:none;background:transparent;cursor:default;}
.day.off{border-color:#f1f5f9;background:#f8fafc;cursor:default;}
.day.off .num{color:#cbd5e1;}
.day.covered{border:2px solid #0891b2;}
.day.today .num{background:#1479a6;color:white;border-radius:999px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;}
.legend{display:flex;gap:14px;justify-content:center;margin-top:14px;font-size:11px;color:#64748b;flex-wrap:wrap;}
.legend span{display:flex;align-items:center;gap:5px;}
.legend .sw{width:14px;height:14px;border-radius:4px;border:2px dashed #a5f3fc;background:white;}
.legend .sw.covered{border:2px solid #0891b2;}

/* modal (kao kod bdijenja) */
.overlay{display:none;position:fixed;inset:0;background:rgba(12,74,110,.25);backdrop-filter:blur(3px);z-index:50;align-items:flex-end;justify-content:center;}
.overlay.show{display:flex;}
.modal{background:white;border-radius:20px 20px 0 0;border-top:2px solid #a5f3fc;padding:24px 24px 36px;width:100%;max-width:480px;box-shadow:0 -8px 40px rgba(8,145,178,.2);animation:slideUp .25s ease;}
@keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){.modal{animation:none;}}
.modal-handle{width:40px;height:4px;background:#e2e8f0;border-radius:2px;margin:0 auto 18px;}
.modal-tag{font-size:10px;font-weight:700;color:#0891b2;letter-spacing:.1em;text-transform:uppercase;margin-bottom:5px;}
.modal-title{font-family:'Lora',Georgia,serif;font-size:20px;font-weight:700;color:#0c4a6e;margin-bottom:4px;}
.modal-sub{font-size:13px;color:#64748b;margin-bottom:14px;line-height:1.5;}
.names{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.nm{display:flex;align-items:center;justify-content:space-between;background:#ecfeff;border:1.5px solid #a5f3fc;border-radius:10px;padding:10px 12px;font-size:14px;font-weight:600;color:#0e7490;}
.nm button{border:none;background:transparent;color:#94a3b8;font-size:18px;cursor:pointer;padding:0 4px;line-height:1;}
.nm button:active{color:#ef4444;}
.names-empty{font-size:13px;color:#94a3b8;text-align:center;padding:10px 0 16px;}
.modal input{width:100%;padding:14px;border:2px solid #a5f3fc;border-radius:12px;font-size:16px;color:#0c4a6e;margin-bottom:12px;outline:none;font-family:inherit;}
.modal input:focus{border-color:#0891b2;}
.modal-btns{display:flex;gap:8px;}
.btn-main{flex:1;padding:14px;background:#1479a6;color:white;border:none;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;}
.btn-sec{padding:14px 18px;border:1px solid #e2e8f0;border-radius:12px;background:white;color:#64748b;font-size:15px;cursor:pointer;}
.btn-danger{flex:1;padding:14px;background:#ef4444;color:white;border:none;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;}
button:disabled{opacity:.6;cursor:default;}
.warn-icon{text-align:center;font-size:40px;margin-bottom:8px;}
.confirm-text{text-align:center;font-size:14px;color:#64748b;line-height:1.7;margin-bottom:20px;}
.confirm-text strong{color:#0c4a6e;font-size:17px;}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#0e7490;color:white;padding:12px 24px;border-radius:24px;font-size:13px;font-weight:600;max-width:90vw;text-align:center;z-index:100;box-shadow:0 4px 24px rgba(8,145,178,.4);opacity:0;transition:opacity .3s;pointer-events:none;}
.toast.show{opacity:1;}
.toast.bad{background:#b91c1c;}
.banner{display:none;font-size:12px;text-align:center;padding:8px 16px;line-height:1.5;}
.banner.show{display:block;}
.banner.demo{background:#fef3c7;color:#92400e;}
.banner.err{background:#fee2e2;color:#991b1b;}

/* molitva dana */
.day-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.day-nav button{width:40px;height:40px;border-radius:12px;border:1.5px solid #a5f3fc;background:white;color:#0891b2;font-size:20px;cursor:pointer;}
.day-nav button:disabled{opacity:.3;}
.day-big{text-align:center;}
.day-big .n{font-family:'Lora',Georgia,serif;font-size:26px;font-weight:700;line-height:1.1;}
.day-big .d{font-size:13px;color:#64748b;margin-top:3px;}
.pdf-card{background:white;border:none;box-shadow:0 3px 14px rgba(12,74,110,.10);border-radius:16px;padding:22px 18px;text-align:center;}
.pdf-card img{height:70px;margin-bottom:8px;}
.pdf-title{font-family:'Lora',Georgia,serif;font-size:19px;font-weight:700;margin-bottom:4px;}
.pdf-sub{font-size:13px;color:#64748b;margin-bottom:18px;line-height:1.5;}
.btn-big{display:block;width:100%;padding:16px;background:#1479a6;color:white;border:none;border-radius:12px;font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;}
.btn-big.ghost{background:white;color:#1479a6;border:2px solid #1479a6;margin-top:10px;}
.pdf-missing{background:#fef3c7;color:#92400e;border-radius:12px;padding:14px;font-size:14px;line-height:1.5;}
.pdf-frame{width:100%;height:70vh;border:2px solid #a5f3fc;border-radius:16px;margin-top:14px;background:white;}
.dots{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:20px;}
.dot{width:26px;height:26px;border-radius:8px;border:1.5px solid #a5f3fc;background:white;font-size:11px;font-weight:600;color:#0c4a6e;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.dot.on{background:#1479a6;color:white;border-color:#1479a6;}
.dot.none{color:#cbd5e1;border-style:dashed;cursor:default;}
.dot.future{color:#cbd5e1;background:#f8fafc;border-color:#e2e8f0;cursor:default;}

/* čitač molitve u stranici */
.citac{display:none;margin-top:14px;}
.citac.show{display:block;}
.citac-str{display:block;width:100%;margin:0 auto 10px;border-radius:12px;box-shadow:0 3px 14px rgba(12,74,110,.12);background:white;}
.citac-info{text-align:center;color:#64748b;font-size:14px;padding:20px;}

/* post: tjedni kao na bdijenju */
.week-nav{background:#0c4a6e;padding:10px 12px;display:flex;align-items:center;gap:8px;}
.arr-btn{width:30px;height:30px;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:transparent;color:#7dd3fc;cursor:pointer;font-size:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:transform .12s;}
.arr-btn:active{transform:scale(.94);}
.arr-btn:disabled{opacity:.3;cursor:default;}
.pills{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0;}
.pills::-webkit-scrollbar{display:none;}
.pill{transition:background .25s,color .25s,border-color .25s,transform .12s;padding:5px 12px;border-radius:20px;border:1px solid rgba(255,255,255,.2);background:transparent;font-size:12px;color:#bae6fd;cursor:pointer;white-space:nowrap;flex-shrink:0;}
.pill:active{transform:scale(.94);}
.pill.on{background:white;color:#0891b2;font-weight:700;border-color:white;}
@keyframes inR{from{transform:translateX(48px);opacity:0;}to{transform:none;opacity:1;}}
@keyframes inL{from{transform:translateX(-48px);opacity:0;}to{transform:none;opacity:1;}}
.anim-r{animation:inR .32s cubic-bezier(.2,.7,.3,1);}
.anim-l{animation:inL .32s cubic-bezier(.2,.7,.3,1);}
@media (prefers-reduced-motion:reduce){.anim-r,.anim-l{animation:none;}}
.dani{display:flex;flex-direction:column;gap:8px;}
.dan{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 16px;border-radius:12px;border:2px dashed #a5f3fc;background:white;cursor:pointer;text-align:left;transition:background .15s;}
.dan:active{background:#ecfeff;}
.dan-ime{font-size:16px;font-weight:700;color:#0c4a6e;}
.dan-datum{font-size:12px;color:#64748b;margin-top:2px;}
.dan-r{font-size:14px;font-weight:700;color:#0891b2;}
.dan.covered{border:2px solid #0891b2;background:#ecfeff;}
.dan.covered .dan-r{color:#0891b2;font-size:19px;line-height:1;}
.dan.off{border-color:#f1f5f9;background:#f8fafc;cursor:default;}
.dan.off .dan-ime,.dan.off .dan-datum,.dan.off .dan-r{color:#cbd5e1;}
.dan.today .dan-ime::after{content:'danas';margin-left:8px;font-size:10px;font-weight:700;color:white;background:#0891b2;border-radius:999px;padding:2px 7px;vertical-align:middle;}