@charset "UTF-8";
  
:root{
  --bg:#f7f8f4;
  --surface:#fff;
  --ink:#233e36;
  --muted:#727d77;
  --green:#214d3f;
  --accent:#d4bb81;
  --line:#e4e8e0;
  --soft:#edf2e9;
  --danger:#9b3e36;
  font-family:"Segoe UI",Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-synthesis:none;
  font-size:15px;
  line-height:1.55}

*{
  box-sizing:border-box}
body{
  margin:0}
button,input,select{
  font:inherit}
button,a,input,select{
  -webkit-tap-highlight-color:transparent}
button,a{
  touch-action:manipulation}
a{
  color:inherit;
  text-decoration:none}
button{
  cursor:pointer}
button:disabled{
  cursor:not-allowed;
  opacity:.45}
button{
  color:inherit}
button,input,select{
  border-radius:9px}
input,select{
  accent-color:var(--green)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:3px solid #b48735;
  outline-offset:4px}
h1,h2,h3,p{
  margin-top:0}
h1{
  font-size:2.5rem;
  line-height:1.15;
  font-weight:600;
  letter-spacing:-1.2px;
  margin-bottom:12px}
h1:focus{
  outline:none}
h2{
  font-size:1.45rem;
  font-weight:600;
  line-height:1.35;
  letter-spacing:-.35px;
  margin-bottom:12px}
h3{
  font-size:1.08rem;
  font-weight:600;
  margin-bottom:8px}
p{
  margin-bottom:16px}
small,.small{
  font-size:.82rem}
svg.icon{
  width:21px;
  height:21px;
  flex-shrink:0;
  vertical-align:middle}
.muted{
  color:var(--muted)}
.capitalize{
  text-transform:capitalize}
.full{
  width:100%}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0}
.skip-link{
  position:fixed;
  top:-80px;
  left:20px;
  z-index:100;
  background:var(--green);
  color:white;
  padding:12px 20px}
.skip-link:focus{
  top:12px}

.sidebar{
  width:244px;
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  background:#f0f3ec;
  border-right:1px solid var(--line);
  padding:39px 21px 20px;
  display:flex;
  flex-direction:column;
  z-index:5}
.brand{
  display:flex;
  align-items:center;
  gap:13px;
  padding:0 13px;
  font-size:1.55rem;
  font-weight:600;
  letter-spacing:-.5px;
  margin-bottom:56px}
.brand-mark{
  width:35px;
  height:42px;
  color:var(--green);
  flex-shrink:0}
.brand small{
  display:block;
  font-size:.69rem;
  font-weight:400;
  letter-spacing:.25px;
  color:var(--muted);
  margin-top:1px}
.nav-label{
  font-size:.65rem;
  letter-spacing:1.8px;
  padding-left:17px;
  color:#7a877d;
  margin-bottom:15px}
.nav-item{
  display:flex;
  align-items:center;
  gap:13px;
  border-radius:10px;
  padding:14px 17px;
  color:#69776d;
  margin-bottom:6px;
  font-size:.93rem;
  transition:background .16s}
.nav-item:hover{
  background:#e5ecdf}
.nav-item.active{
  color:white;
  background:var(--green);
  box-shadow:0 4px 10px #214d3f10}
.nav-dot{
  margin-left:auto;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#dbcb9f}
.sidebar-bottom{
  margin-top:auto}
.sidebar-note{
  padding:24px 17px 39px;
  color:#75816f}
.sidebar-note>.icon{
  color:#859576;
  margin-bottom:13px}
.sidebar-note p{
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.1rem;
  line-height:1.55;
  margin-bottom:9px;
  color:#536750}
.sidebar-note span{
  font-size:.72rem}
.prototype-label{
  display:block;
  text-align:center;
  font-size:.58rem;
  letter-spacing:1px;
  color:#7a8478;
  border-top:1px solid #dfe5d8;
  margin-top:17px;
  padding-top:20px}
.workspace{
  margin-left:244px}
.topbar{
  height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 45px;
  background:#fff;
  border-bottom:1px solid var(--line)}
.breadcrumb{
  color:var(--muted);
  font-size:.82rem}
.breadcrumb span{
  margin:0 11px;
  color:#bcc2ba}
.breadcrumb strong{
  font-weight:500;
  color:var(--ink)}
.topbar-actions{
  display:flex;
  align-items:center;
  gap:25px}
.city-button{
  display:flex;
  align-items:center;
  gap:8px;
  border:0;
  background:transparent;
  font-size:.86rem;
  padding:9px 2px}
.city-button .icon{
  width:17px;
  height:17px;
  color:#687c69}
.chevron{
  color:#95a18f;
  margin-left:8px}
.icon-link,.icon-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  min-height:38px;
  background:transparent;
  border:1px solid transparent;
  border-radius:9px;
  color:var(--muted)}
.icon-link:hover,.icon-button:hover{
  background:var(--soft);
  color:var(--ink)}
.demo-banner{
  display:flex;
  align-items:center;
  gap:9px;
  background:#f7f0df;
  color:#736241;
  font-size:.73rem;
  padding:10px 45px;
  min-height:38px}
.demo-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#a79059;
  flex-shrink:0}
.demo-banner a{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap}
.demo-banner .icon{
  width:14px;
  height:14px}
.storage-warning{
  background:#ffe8d7;
  color:#633513;
  padding:12px 45px;
  font-size:.9rem}
main{
  max-width:1340px;
  margin:0 auto;
  padding:37px 45px 45px}
.page-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:22px;
  margin-bottom:30px}
.eyebrow{
  font-size:.62rem;
  letter-spacing:1.7px;
  font-weight:600;
  color:#7b8b70;
  margin-bottom:10px}
.subheading{
  color:var(--muted);
  font-size:.89rem;
  margin-bottom:0}
.date-label{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:.81rem;
  color:#4f6155;
  text-align:right}
.date-label>.icon{
  width:17px;
  color:#84917b}
.date-label small{
  display:block;
  font-size:.7rem;
  color:var(--muted);
  margin-top:4px;
  text-transform:capitalize}
.welcome-card{
  position:relative;
  overflow:hidden;
  border-radius:17px;
  background:#244f41;
  color:white;
  min-height:284px;
  padding:34px 36px;
  margin-bottom:26px}
.welcome-copy{
  position:relative;
  z-index:1}
.welcome-card h2{
  font-family:Georgia,"Times New Roman",serif;
  font-size:2.08rem;
  line-height:1.22;
  font-weight:400;
  letter-spacing:-.2px;
  margin:18px 0 14px;
  color:#f6f4e9}
.welcome-card p{
  font-size:.8rem;
  line-height:1.7;
  color:#cad8c9;
  margin-bottom:22px}
.pill{
  display:inline-flex;
  align-items:center;
  border-radius:20px;
  padding:5px 11px;
  background:#f2f3ec;
  color:#7c866c;
  font-size:.68rem;
  white-space:nowrap}
.pill.light{
  color:#c5d4b9;
  border:1px solid #72957840;
  background:#76936c16;
  font-size:.63rem;
  padding:4px 9px;
  letter-spacing:.15px}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:var(--green);
  border:1px solid var(--green);
  color:white;
  padding:11px 17px;
  min-height:44px;
  border-radius:8px;
  font-weight:500;
  font-size:.82rem;
  line-height:1.4;
  transition:background .15s}
.button .icon{
  width:17px;
  height:17px}
.button:hover{
  background:#153d30}
.button.secondary{
  background:#fff;
  color:var(--green);
  border-color:#dfe6d9}
.button.secondary:hover{
  background:#f0f4eb}
.button.cream{
  background:#e9dfbc;
  border-color:#e9dfbc;
  color:#254636;
  font-size:.77rem}
.button.cream:hover{
  background:#f4ebcf}
.button.cream .icon:last-child{
  margin-left:15px}
.button.square{
  padding:8px;
  min-width:40px}
.button-group{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap}
.arch-art{
  position:absolute;
  right:3%;
  top:6px;
  width:290px;
  height:100%;
  opacity:.85;
  overflow:hidden}
.arch{
  position:absolute;
  border:1px solid #c7cf9a35;
  border-bottom:0;
  border-radius:140px 140px 0 0;
  bottom:-12px}
.arch-one{
  width:250px;
  height:250px;
  right:8px}
.arch-two{
  width:211px;
  height:229px;
  right:27px}
.arch-three{
  width:172px;
  height:208px;
  right:47px;
  background:linear-gradient(165deg,#aabb8340,transparent 75%)}
.art-moon{
  position:absolute;
  top:62px;
  right:87px;
  width:48px;
  height:48px;
  border-radius:50%;
  box-shadow:10px 7px 0 0 #d5cb98;
  transform:rotate(-22deg);
  z-index:1}
.art-line{
  position:absolute;
  bottom:29px;
  right:0;
  width:280px;
  height:1px;
  background:#bfcd9b28;
  box-shadow:0 15px 0 #bfcd9b28,0 30px 0 #bfcd9b28;
  z-index:2}
.art-star{
  position:absolute;
  color:#d9cd93;
  font-size:25px;
  font-family:Georgia,serif}
.star-one{
  top:40px;
  right:202px}
.star-two{
  top:110px;
  right:34px;
  font-size:16px}
.today-grid{
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:25px}
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:27px}
.section-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:21px}
.section-heading h2{
  margin-bottom:0;
  font-size:1.2rem}
.section-heading .eyebrow{
  margin-bottom:7px}
.schedule-place{
  display:flex;
  align-items:center;
  gap:7px;
  padding-bottom:17px;
  border-bottom:1px solid var(--line);
  font-size:.78rem}
.schedule-place .icon{
  width:16px;
  height:16px;
  color:#8a9981}
.schedule-place strong{
  font-weight:500}
.schedule-place>span{
  font-size:.64rem;
  color:var(--muted);
  margin-left:auto}
.prayer-row{
  display:flex;
  align-items:center;
  gap:16px;
  min-height:51px;
  border-bottom:1px solid #edf0e9;
  font-size:.9rem}
.prayer-order{
  color:#95a28c;
  font-size:.66rem;
  font-variant-numeric:tabular-nums}
.prayer-time{
  margin-left:auto;
  color:#88967f;
  letter-spacing:1px;
  font-size:.96rem;
  font-variant-numeric:tabular-nums}
.missing-label{
  font-size:.59rem;
  color:#858d7e}
.source-note{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--muted);
  font-size:.71rem;
  padding-top:18px}
.source-note>.icon{
  width:15px;
  height:15px;
  color:#91a082;
  margin-top:2px}
.source-note p{
  margin:0}
.source-note a{
  color:#536d51;
  font-size:.7rem;
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:5px}
.source-note a .icon{
  width:13px;
  height:13px}
.habits-card{
  display:flex;
  flex-direction:column}
.empty-habits{
  text-align:center;
  padding:19px 0 23px;
  flex:1}
.soft-icon{
  width:43px;
  height:43px;
  border-radius:12px;
  background:#edf2e7;
  color:#779166;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px}
.soft-icon .icon{
  width:22px;
  height:22px}
.empty-habits .soft-icon{
  width:52px;
  height:52px;
  background:#f1f5eb}
.empty-habits h3{
  font-size:1rem}
.empty-habits p{
  font-size:.77rem;
  color:var(--muted);
  line-height:1.7;
  margin-bottom:20px}
.empty-habits .button{
  font-size:.74rem;
  min-height:40px}
.privacy-line{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border-top:1px solid var(--line);
  padding-top:16px;
  color:#8a9482;
  font-size:.67rem}
.privacy-line .icon{
  width:13px;
  height:13px}
.tools-section{
  margin-top:31px}
.tools-section>.section-heading{
  margin-bottom:17px}
.tools-section h2{
  font-size:1.15rem}
.tool-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:19px}
.tool-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:23px 24px;
  transition:border-color .16s,transform .16s}
.tool-card:hover{
  border-color:#9ab38b;
  transform:translateY(-2px)}
.tool-card h3{
  font-size:1.04rem;
  margin-bottom:6px}
.tool-card p{
  font-size:.76rem;
  line-height:1.6;
  color:var(--muted);
  min-height:36px;
  margin-bottom:16px}
.tool-card .soft-icon{
  margin-bottom:14px}
.soft-icon.sand{
  background:#f7f0df;
  color:#a89258}
.soft-icon.lavender{
  background:#f1eef6;
  color:#a399b9}
.tool-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#68805b;
  font-size:.68rem}
.tool-bottom .icon{
  width:15px;
  height:15px}
.site-footer{
  max-width:1340px;
  margin:0 auto;
  padding:0 45px 25px;
  display:flex;
  justify-content:space-between;
  font-size:.66rem;
  color:#8e9788;
  gap:16px}
.footer-separator{
  margin:0 7px}
.site-footer>a{
  color:#6b7f62}
.quiet-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center}
.quiet-card p{
  color:var(--muted);
  font-size:.88rem}
.today-habits{
  flex:1;
  margin-bottom:12px}
.habit-today{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  padding:15px 0;
  text-align:left;
  font-size:.91rem;
  overflow-wrap:anywhere}
.check-box{
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #c8d5bf;
  width:24px;
  height:24px;
  border-radius:7px;
  color:#fff;
  flex-shrink:0}
.habit-today.done .check-box{
  background:var(--green);
  border-color:var(--green)}
.habit-today.done{
  color:#6b7c65}
.two-column{
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:24px}
.two-column>.card>p{
  color:var(--muted);
  font-size:.9rem}
.map-placeholder{
  min-height:345px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius:10px;
  padding:24px;
  background:linear-gradient(90deg,#8a9c7510 1px,transparent 1px),linear-gradient(#8a9c7510 1px,transparent 1px),#f2f5ee;
  background-size:35px 35px;
  color:#4d6849}
.map-placeholder .map-circle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:74px;
  height:74px;
  border-radius:50%;
  border:1px solid #c7d4bc;
  background:#e8eedf;
  margin-bottom:20px}
.map-circle>.icon{
  width:35px;
  height:35px}
.map-placeholder h2{
  font-size:1.35rem;
  margin:17px 0 9px}
.map-placeholder p{
  font-size:.83rem;
  margin-bottom:0;
  color:#71816a}
.steps{
  list-style:none;
  counter-reset:step;
  padding:0;
  margin:26px 0 0}
.steps li{
  counter-increment:step;
  position:relative;
  padding:0 0 17px 40px}
.steps li:before{
  content:counter(step);
  position:absolute;
  left:0;
  top:0;
  border-radius:50%;
  background:var(--soft);
  width:25px;
  height:25px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#6d865c;
  font-size:.8rem}
.steps strong{
  font-size:.91rem;
  font-weight:600}
.steps p{
  font-size:.83rem;
  color:var(--muted);
  line-height:1.6;
  margin-top:6px;
  margin-bottom:6px}
.notice{
  padding:15px 17px;
  border-radius:9px;
  background:#f7f3e9;
  color:#78694f;
  font-size:.81rem;
  line-height:1.7}
.storage-card{
  display:flex;
  align-items:center;
  gap:18px;
  padding:22px 25px;
  border:1px solid #dce5d5;
  border-radius:12px;
  background:#edf2e8;
  margin-bottom:24px}
.storage-card>.icon{
  width:26px;
  height:26px;
  color:#708566}
.storage-card>div{
  flex:1}
.storage-card strong{
  font-size:.91rem;
  font-weight:600}
.storage-card p{
  color:#6a7a63;
  font-size:.8rem;
  margin:5px 0 0}
.storage-card .small{
  font-size:.71rem}
.check-label{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.8rem;
  max-width:195px;
  cursor:pointer}
input[type=checkbox]{
  width:19px;
  height:19px;
  flex-shrink:0;
  cursor:pointer}
.tracker-card .section-heading h2{
  font-size:1.05rem}
.tracker-card .button{
  font-size:.73rem}
.table-scroll{
  overflow:auto}
.tracker-table{
  width:100%;
  border-collapse:collapse;
  text-align:center;
  min-width:635px}
.tracker-table th{
  font-weight:500;
  font-size:.8rem;
  padding:13px 6px}
.tracker-table th:first-child{
  text-align:left;
  width:26%;
  overflow-wrap:anywhere;
  max-width:190px}
.tracker-table thead th{
  color:var(--muted);
  font-size:.74rem;
  border-bottom:1px solid var(--line)}
.tracker-table thead strong{
  display:block;
  font-size:.9rem;
  font-weight:500;
  margin-top:6px;
  color:var(--ink)}
.tracker-table .current-day{
  background:#e9efdf;
  border-radius:7px}
.tracker-table td{
  padding:14px 5px;
  border-bottom:1px solid #f0f2ed}
.tracker-table tbody th{
  border-bottom:1px solid #f0f2ed}
.day-check{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #e1e6d9;
  background:#f9faf6;
  color:#9ba591;
  font-size:1.2rem}
.day-check.checked{
  background:var(--green);
  border-color:var(--green);
  color:white}
.text-button{
  border:0;
  background:transparent;
  padding:8px 0;
  font-size:.8rem;
  font-weight:500;
  text-decoration:underline;
  text-decoration-color:#c4cebc;
  text-underline-offset:4px}
.text-button:hover{
  text-decoration-color:currentColor}
.text-button.danger{
  color:var(--danger);
  text-decoration-color:#e6beb6}
.large-empty{
  text-align:center;
  padding:55px 15px}
.large-empty h2{
  font-size:1.35rem}
.large-empty p{
  color:var(--muted);
  font-size:.85rem}
.card-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  border-top:1px solid var(--line);
  padding-top:16px;
  margin-top:17px}
.card-footer .button-group{
  gap:20px}
.card-footer .small{
  font-size:.73rem}
.calendar-layout{
  grid-template-columns:1.45fr 1fr}
.calendar-layout .button{
  font-size:.71rem}
.calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:7px}
.weekday{
  text-align:center;
  color:#87927e;
  font-size:.74rem;
  padding:14px 0}
.calendar-day{
  position:relative;
  border:1px solid transparent;
  background:transparent;
  aspect-ratio:1.1;
  border-radius:10px;
  font-size:.97rem;
  min-height:42px}
.calendar-day:hover{
  background:#eff3e9}
.calendar-day.is-today{
  border-color:#a7bb96}
.calendar-day.selected{
  background:var(--green);
  color:white}
.today-dot{
  display:block;
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:currentColor;
  bottom:6px;
  left:calc(50% - 2px)}
.calendar-footnote{
  margin:25px 0 0;
  border-top:1px solid var(--line);
  padding-top:16px;
  font-size:.7rem}
.date-detail{
  border-top:1px solid var(--line);
  padding-top:25px;
  margin-top:22px}
.date-detail>.icon{
  color:#8b9c79;
  margin-bottom:15px}
.date-detail h3{
  font-size:1rem}
.date-detail p{
  font-size:.83rem;
  color:var(--muted)}
.print-warning{
  margin-bottom:20px}
.print-controls{
  display:grid;
  grid-template-columns:1fr 1.5fr 1fr 1fr;
  gap:18px;
  margin-bottom:25px}
.print-controls label,.field{
  display:flex;
  flex-direction:column;
  gap:9px;
  font-size:.81rem;
  font-weight:500}
.print-controls p{
  grid-column:1/-1;
  margin:0;
  font-weight:400}
.field{
  margin:22px 0 14px}
input:not([type=checkbox]),select{
  width:100%;
  max-width:100%;
  min-height:44px;
  padding:10px 12px;
  border:1px solid #d8e0d0;
  background:#fff;
  color:var(--ink);
  font-size:.85rem}
.paper-preview{
  padding:42px 44px;
  background:white;
  max-width:880px;
  margin:auto;
  box-shadow:0 4px 30px #203c2610;
  border:1px solid #e1e5dc;
  font-size:var(--print-font)}
.paper-top{
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:9pt;
  letter-spacing:1px;
  margin-bottom:28px;
  color:#6d7c62}
.paper-preview h2{
  font-size:1.55em;
  margin-bottom:8px}
.paper-preview>p{
  font-size:.7em}
.paper-source{
  color:#62725d;
  font-size:.6em!important;
  line-height:1.6}
.print-table{
  width:100%;
  border-collapse:collapse;
  font-variant-numeric:tabular-nums;
  text-align:center;
  margin:23px 0;
  font-size:.76em;
  table-layout:fixed}
.print-table th,.print-table td{
  border-bottom:1px solid #dfe6d6;
  padding:10px 4px;
  font-weight:400;
  overflow-wrap:anywhere}
.print-table thead th{
  background:#f1f4ed;
  color:#54694a;
  font-weight:600;
  font-size:.85em}
.print-table th:first-child{
  text-align:left;
  width:18%}
.settings-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px}
.unavailable-settings{
  display:grid;
  grid-template-columns:1fr;
  gap:5px;
  border-top:1px solid var(--line);
  padding-top:20px;
  margin-top:23px;
  font-size:.83rem}
.unavailable-settings span{
  color:var(--muted);
  font-size:.75rem}
.unavailable-settings strong{
  font-weight:500;
  margin-bottom:13px}
.text-link{
  font-size:.79rem;
  color:#628057;
  display:inline-flex;
  align-items:center;
  gap:7px}
.text-link .icon{
  width:15px;
  height:15px}
.option-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  border-bottom:1px solid var(--line);
  padding:19px 0;
  cursor:pointer}
.option-row strong{
  font-size:.9rem;
  font-weight:500;
  display:block}
.option-row small{
  color:var(--muted);
  font-size:.75rem;
  display:block;
  margin-top:4px}
.option-row:last-of-type{
  margin-bottom:20px}
.integrations-card{
  margin-top:25px}
.integration-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:25px}
.integration-grid h3{
  font-size:1rem}
.integration-grid p{
  font-size:.8rem;
  color:var(--muted);
  margin-bottom:0}
.data-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  margin-top:25px}
.data-card p{
  font-size:.81rem;
  color:var(--muted);
  margin-bottom:0;
  max-width:520px}
.data-card .button-group{
  flex-direction:column;
  align-items:flex-start;
  min-width:205px}
.data-card h2{
  font-size:1.15rem}
.toast{
  position:fixed;
  z-index:20;
  bottom:24px;
  left:calc(50% + 80px);
  transform:translateX(-50%);
  padding:13px 20px;
  max-width:600px;
  width:max-content;
  border-radius:10px;
  background:#233f35;
  color:#fff;
  box-shadow:0 7px 35px #12302126;
  font-size:.86rem}
.toast[hidden]{
  display:none}
dialog{
  border:1px solid var(--line);
  border-radius:18px;
  padding:29px;
  max-width:475px;
  width:calc(100% - 32px);
  color:var(--ink);
  box-shadow:0 25px 100px #102d3940}
dialog::backdrop{
  background:#102a225c;
  backdrop-filter:blur(3px)}
dialog .section-heading{
  margin-bottom:12px}
dialog p{
  font-size:.9rem;
  color:var(--muted)}
dialog .small{
  font-size:.8rem}
.dialog-buttons{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:17px;
  margin-top:24px}
.danger-fill{
  background:#97483c;
  border-color:#97483c}
.danger-fill:hover{
  background:#773127}
.large-text{
  font-size:18px}
.high-contrast{
  --muted:#45594b;
  --line:#abbba3;
  --ink:#162e21;
  --green:#143a28}
.high-contrast .eyebrow,.high-contrast .nav-label,.high-contrast .prototype-label,.high-contrast .small,.high-contrast .tool-bottom,.high-contrast .prayer-time,.high-contrast .missing-label,.high-contrast .privacy-line,.high-contrast .prayer-order{
  color:#475c3d}
.high-contrast .welcome-card .pill{
  color:white}

@media(min-width:1600px){
  main{
  padding-top:45px}
.welcome-card{
  min-height:315px}
.welcome-card h2{
  font-size:2.5rem}
.arch-art{
  right:6%;
  width:330px}
.arch-one{
  width:295px;
  height:290px}
.arch-two{
  width:256px;
  height:268px}
.arch-three{
  width:217px;
  height:246px}
.art-moon{
  right:110px;
  top:60px}
.star-one{
  right:242px}
}

@media(max-width:1150px){
  .sidebar{
  width:210px;
  padding:30px 13px 18px}
.brand{
  font-size:1.35rem;
  padding-left:10px}
.brand small{
  font-size:.62rem}
.workspace{
  margin-left:210px}
main{
  padding:30px}
.topbar{
  padding:0 30px}
.demo-banner{
  padding:10px 30px}
.site-footer{
  padding:0 30px 24px}
.today-grid{
  gap:18px}
.card{
  padding:22px}
.welcome-card{
  padding:30px}
.arch-art{
  right:-50px;
  opacity:.5}
.welcome-copy{
  max-width:75%}
.welcome-card h2{
  font-size:1.95rem}
.tool-card{
  padding:19px}
.tool-grid{
  gap:14px}
.integration-grid{
  grid-template-columns:1fr 1fr}
.storage-card{
  flex-wrap:wrap}
.storage-card>.check-label{
  margin-left:43px;
  max-width:none}
.two-column{
  grid-template-columns:1fr 1fr}
.calendar-layout{
  grid-template-columns:1fr}
.calendar-layout aside{
  display:block}
.print-controls{
  grid-template-columns:1fr 1fr}
.card-footer{
  align-items:flex-start;
  flex-direction:column}
.date-label{
  font-size:.74rem}
.date-label>.icon{
  display:none}
.paper-preview{
  padding:30px}
.print-table{
  font-size:.64em}
}

@media(max-width:850px){
  .sidebar{
  width:80px;
  padding:26px 10px}
.brand{
  padding:0;
  justify-content:center;
  margin-bottom:32px}
.brand>span,.nav-label,.nav-item>span,.sidebar-note,.prototype-label{
  display:none}
.nav-item{
  justify-content:center;
  padding:16px 12px}
.sidebar .icon{
  width:23px;
  height:23px}
.workspace{
  margin-left:80px}
.today-grid{
  grid-template-columns:1fr}
.habits-card .empty-habits{
  padding:20px 0}
.topbar{
  height:70px}
.welcome-copy{
  max-width:85%}
.toast{
  left:calc(50% + 40px);
  max-width:calc(100% - 120px)}
.page-heading{
  gap:14px}
.page-heading h1{
  font-size:2.1rem}
.page-heading .date-label{
  white-space:nowrap}
.settings-grid{
  grid-template-columns:1fr}
.two-column{
  grid-template-columns:1fr}
.data-card{
  align-items:flex-start;
  flex-direction:column}
.data-card .button-group{
  flex-direction:row;
  align-items:center}
.tracker-card .section-heading{
  flex-wrap:wrap}
.calendar-layout>.card .section-heading{
  flex-wrap:wrap}
.large-text .tool-grid{
  grid-template-columns:1fr}
.large-text .page-heading{
  align-items:flex-start;
  flex-direction:column}
}

@media(max-width:600px){
  .sidebar{
  top:auto;
  bottom:0;
  left:0;
  right:0;
  height:72px;
  width:100%;
  padding:7px 5px calc(7px + env(safe-area-inset-bottom));
  background:#fff;
  border-top:1px solid var(--line);
  border-right:0;
  display:block;
  box-sizing:content-box;
  height:54px}
.sidebar .brand,.sidebar-bottom{
  display:none}
.sidebar nav{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:2px}
.nav-item{
  padding:7px 1px;
  margin:0;
  gap:4px;
  flex-direction:column;
  border-radius:8px;
  font-size:.57rem;
  line-height:1.3;
  white-space:nowrap;
  min-height:52px}
.nav-item>span:not(.nav-dot){
  display:block}
.sidebar .icon{
  width:19px;
  height:19px}
.nav-item.active{
  background:#edf3e7;
  color:var(--green);
  box-shadow:none}
.workspace{
  margin-left:0}
.topbar{
  height:61px;
  padding:0 20px}
.breadcrumb{
  font-size:.7rem}
.breadcrumb span{
  margin:0 6px}
.topbar-actions{
  gap:10px}
.city-button{
  font-size:.74rem}
.city-button .chevron{
  display:none}
.topbar-actions>.icon-link{
  min-width:32px}
.demo-banner{
  font-size:.64rem;
  padding:9px 20px;
  align-items:flex-start;
  line-height:1.5;
  gap:7px}
.demo-dot{
  margin-top:5px}
.demo-banner a{
  display:none}
main{
  padding:26px 20px 27px}
.page-heading{
  align-items:flex-start;
  margin-bottom:23px;
  flex-wrap:wrap;
  gap:16px}
.page-heading h1{
  font-size:2.05rem;
  margin-bottom:9px}
.eyebrow{
  font-size:.56rem;
  letter-spacing:1.6px}
.subheading{
  font-size:.8rem;
  line-height:1.6}
.date-label{
  text-align:left;
  font-size:.74rem}
.date-label>span{
  display:flex;
  gap:8px;
  align-items:center}
.date-label small{
  font-size:.69rem;
  margin:0}
.date-label>span:after{
  content:' ';
  display:block}
.welcome-card{
  padding:25px 24px;
  min-height:294px;
  border-radius:13px;
  margin-bottom:20px}
.welcome-copy{
  max-width:100%}
.welcome-card h2{
  font-size:1.85rem;
  margin-top:19px}
.welcome-card p{
  font-size:.73rem;
  max-width:240px;
  line-height:1.65}
.welcome-card .pill{
  font-size:.55rem}
.arch-art{
  right:-127px;
  top:30px;
  opacity:.32}
.welcome-card .button{
  font-size:.73rem;
  padding:11px 13px}
.desktop-break{
  display:none}
.card{
  padding:22px 20px;
  border-radius:12px}
.today-grid{
  gap:20px}
.section-heading h2{
  font-size:1.17rem}
.schedule-place>span{
  font-size:.6rem}
.prayer-row{
  gap:12px}
.prayer-time{
  font-size:.91rem}
.missing-label{
  font-size:.57rem}
.tools-section{
  margin-top:27px}
.tools-section>.section-heading>.small{
  display:none}
.tool-grid{
  grid-template-columns:1fr;
  gap:13px}
.tool-card{
  display:grid;
  grid-template-columns:45px 1fr;
  column-gap:16px;
  padding:18px 20px;
  align-items:center}
.tool-card .soft-icon{
  grid-column:1;
  grid-row:1/4;
  margin:0}
.tool-card h3{
  grid-column:2;
  margin-bottom:2px;
  font-size:1rem}
.tool-card p{
  grid-column:2;
  min-height:0;
  font-size:.73rem;
  margin-bottom:6px}
.tool-bottom{
  grid-column:2;
  font-size:.64rem}
.site-footer{
  padding:0 20px 100px;
  flex-direction:column;
  gap:6px;
  font-size:.62rem}
.toast{
  left:20px;
  right:20px;
  width:auto;
  max-width:none;
  transform:none;
  bottom:86px;
  font-size:.79rem}
.storage-warning{
  padding:10px 20px;
  font-size:.8rem}
.storage-card{
  padding:18px;
  gap:12px;
  align-items:flex-start}
.storage-card>.icon{
  width:21px;
  height:21px}
.storage-card strong{
  font-size:.86rem}
.storage-card p{
  font-size:.75rem}
.storage-card>.check-label{
  margin-left:33px;
  font-size:.75rem}
.tracker-card .section-heading h2{
  font-size:.95rem}
.tracker-card .button-group{
  gap:8px}
.tracker-card .button{
  min-height:39px}
.tracker-table{
  min-width:620px}
.card-footer .button-group{
  gap:18px}
.integration-grid{
  grid-template-columns:1fr}
.map-placeholder{
  padding:18px;
  min-height:330px}
.map-placeholder h2{
  font-size:1.17rem}
.map-placeholder p{
  font-size:.79rem}
.calendar-grid{
  gap:3px}
.calendar-day{
  font-size:.85rem}
.calendar-layout .section-heading h2{
  font-size:1.03rem}
.print-controls{
  padding:18px;
  gap:15px;
  grid-template-columns:1fr}
.print-controls label{
  font-size:.8rem}
.paper-preview{
  padding:20px 12px;
  overflow-x:auto;
  font-size:14pt!important}
.paper-top{
  font-size:7pt;
  letter-spacing:.3px;
  gap:5px}
.print-table{
  font-size:.68em}
.print-table td,.print-table th{
  padding:8px 2px}
.paper-preview>p{
  font-size:.65em}
.print-warning{
  font-size:.75rem}
.page-heading>.button{
  font-size:.78rem}
.option-row strong{
  font-size:.85rem}
.large-text .page-heading h1{
  font-size:1.85rem}
.large-text .breadcrumb{
  display:none}
.large-text .topbar-actions{
  width:auto;
  justify-content:flex-end}
.large-text .nav-item{
  font-size:.51rem}
.large-text .welcome-card h2{
  font-size:1.65rem}
.large-text .prayer-row{
  gap:8px}
.large-text .missing-label{
  display:none}
.large-text .schedule-place{
  flex-wrap:wrap}
.large-text .schedule-place>span{
  width:100%;
  margin-left:24px}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important}
}

@media print{
  html{
  background:white;
  font-size:12pt}
body{
  margin:0;
  color:#000;
  background:#fff}
body:not([data-route=print]) main:before{
  content:'ДЕМО · Источники расписания не подключены';
  display:block;
  border:1px solid #777;
  padding:10px;
  margin-bottom:15px}
.sidebar,.topbar,.demo-banner,.storage-warning,.page-heading,.print-controls,.print-warning,.site-footer,.toast,dialog,.skip-link{
  display:none!important}
.workspace{
  margin:0}
main{
  padding:0;
  margin:0;
  max-width:none}
.paper-preview{
  box-shadow:none;
  border:0;
  margin:0;
  padding:0;
  max-width:none;
  overflow:visible;
  font-size:var(--print-font)!important;
  color:#000}
.paper-preview h2{
  font-size:1.35em}
.paper-top{
  font-size:9pt;
  color:#333}
.paper-source{
  color:#333;
  font-size:.6em!important}
.print-table{
  font-size:.8em;
  table-layout:fixed}
.print-table th,.print-table td{
  padding:7px 4px;
  color:#000;
  border-bottom:1px solid #777}
.print-table thead{
  display:table-header-group}
.print-table thead th{
  background:#eee!important;
  color:#000;
  font-size:.8em}
.print-table tr{
  break-inside:avoid;
  page-break-inside:avoid}
.paper-top,h2{
  break-after:avoid}
p{
  orphans:3;
  widows:3}
.paper-preview>p{
  font-size:.7em}
.paper-top span:last-child{
  font-weight:bold}
*{
  -webkit-print-color-adjust:exact;
  print-color-adjust:exact}
}

/* Prevent grid content and the mobile dock from widening the viewport. */
.two-column>.card,.settings-grid>.card,.tool-card{
  min-width:0}

.calendar-grid{
  grid-template-columns:repeat(7,minmax(0,1fr))}

@media(max-width:600px){
  .sidebar{
  box-sizing:border-box;
  height:calc(72px + env(safe-area-inset-bottom))}
.calendar-day{
  min-width:0;
  padding:3px}
.calendar-layout .button-group{
  gap:8px}
}

@media print{
  .print-table{
  font-size:1em}
.print-table thead th{
  font-size:.8em}
.print-table th,.print-table td{
  padding:7px 3px}
}


.print-table .print-context th{
  font-size:9pt;
  background:white;
  text-align:left;
  font-weight:400;
  line-height:1.5;
  letter-spacing:0;
  padding:12px 3px;
  width:auto}

@media print{
  html:root,body,#app,.workspace,main{
  background:white!important}
.print-table .print-context th{
  font-size:9pt;
  background:white!important}
}