/* =========================================================
   Live Calendar — layout.css
   Сетка, контейнеры, header/footer, spacing, responsive
========================================================= */

/* =========================
   Root layout
========================= */

.wrap{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:
    max(16px, env(safe-area-inset-top))
    18px
    max(64px, env(safe-area-inset-bottom));
}

.main{
  width:100%;
  max-width:760px;
  margin:0 auto;
  padding-top:22px;
}

/* =========================
   Hero / page titles
========================= */

.pageHeader{
  margin-bottom:24px;
}

.h1{
  margin:0;
  font-size:48px;
  line-height:1.02;
  letter-spacing:-0.05em;
  font-weight:900;
  color:#fff;
}

.h2{
  margin:0;
  font-size:34px;
  line-height:1.08;
  letter-spacing:-0.04em;
  font-weight:850;
  color:#fff;
}

.h3{
  margin:0;
  font-size:24px;
  line-height:1.18;
  letter-spacing:-0.03em;
  font-weight:800;
  color:#fff;
}

.sub{
  margin:10px 0 0;
  color:rgba(255,255,255,.72);
  font-size:15px;
  line-height:1.6;
  max-width:640px;
}

.lead{
  font-size:17px;
  line-height:1.7;
  color:rgba(255,255,255,.82);
}

/* =========================
   Header / topbar
========================= */

.topbar{
  position:sticky;
  top:0;
  z-index:40;

  margin:0 0 18px;

  background:rgba(11,13,18,.55);

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  border-radius:22px;

  border:1px solid rgba(255,255,255,.05);

  box-shadow:
    0 10px 34px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.05);

  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    opacity .25s ease;
}

.topbar.is-hidden{
  transform:translateY(-120%);
  opacity:0;
  pointer-events:none;
}

.topbarInner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  min-height:72px;
  padding:12px;
}

.logoWrap{
  display:flex;
  align-items:center;
  gap:12px;
}

.logo{
  width:48px;
  height:48px;

  border-radius:18px;

  border:1px solid rgba(255,255,255,.18);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.09),
      rgba(255,255,255,.05)
    );

  display:grid;
  place-items:center;

  font-size:18px;
  font-weight:900;
  letter-spacing:-.03em;

  color:#fff;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -18px 40px rgba(0,0,0,.28);
}

.logoText{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.logoTitle{
  font-size:15px;
  font-weight:850;
  color:#fff;
  letter-spacing:-.02em;
}

.logoSub{
  font-size:12px;
  color:rgba(255,255,255,.52);
}

.centerNav{
  flex:1;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  flex-wrap:wrap;
}

.spacer{
  width:48px;
  flex:0 0 48px;
}

.divider{
  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.10),
      transparent
    );
}

/* =========================
   Navigation
========================= */

.navRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:42px;

  padding:10px 16px;

  border-radius:999px;

  border:1px solid rgba(255,255,255,.16);

  background:rgba(255,255,255,.03);

  color:#fff;
  text-decoration:none;

  font-size:14px;
  font-weight:800;

  transition:
    border-color .18s cubic-bezier(.2,.8,.2,1),
    background .18s cubic-bezier(.2,.8,.2,1),
    transform .18s cubic-bezier(.2,.8,.2,1);
}

.pill:hover{
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.05);
  text-decoration:none;
}

.pill:active{
  transform:translateY(1px);
}

.pill.active{
  border-color:rgba(138,180,255,.55);
  background:rgba(138,180,255,.12);
}

/* =========================
   Modes
========================= */

.modeRow{
  display:flex;
  gap:12px;
  margin:14px 0 10px;
}

.modeHint{
  color:rgba(255,255,255,.55);
  font-size:13px;
  margin-bottom:14px;
}

/* =========================
   Layout grids
========================= */

.grid{
  display:grid;
  gap:14px;
}

.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.grid3{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:14px;
}

.grid4{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}

.split2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.split3{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px;
}

.row{
  display:flex;
  gap:12px;
}

.rowInline{
  display:flex;
  align-items:center;
  gap:12px;
}

.col{
  display:flex;
  flex-direction:column;
}

.flex1{
  flex:1;
}

.center{
  display:flex;
  align-items:center;
  justify-content:center;
}

.between{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* =========================
   Sections
========================= */

.section{
  margin-top:20px;
}

.sectionLarge{
  margin-top:34px;
}

.sectionHeader{
  margin-bottom:14px;
}

.sectionTitle{
  font-size:22px;
  font-weight:850;
  letter-spacing:-.03em;
  color:#fff;
}

.sectionSub{
  margin-top:6px;
  color:rgba(255,255,255,.62);
  font-size:14px;
  line-height:1.55;
}

/* =========================
   Actions
========================= */

.actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

/* =========================
   Footer
========================= */

.footer{
  max-width:760px;
  margin:28px auto 0;
}

.footerDivider{
  height:1px;

  margin-bottom:14px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.10),
      transparent
    );
}

.footerRow{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;

  flex-wrap:wrap;
}

.footerLinks{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.footerLinks a{
  font-size:13px;
  color:rgba(255,255,255,.60);
}

.footerLinks a:hover{
  color:#fff;
}

.footerCopy{
  font-size:12px;
  color:rgba(255,255,255,.42);
}

/* =========================
   Preview layout
========================= */

.previewPanel{
  margin-top:14px;
}

.previewMeta{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  flex-wrap:wrap;
}

/* =========================
   Sidebar layouts
========================= */

.pageGrid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:18px;
}

.sidebar{
  position:sticky;
  top:92px;
  align-self:start;
}

/* =========================
   Utility spacing
========================= */

.mt4{ margin-top:4px; }
.mt6{ margin-top:6px; }
.mt8{ margin-top:8px; }
.mt10{ margin-top:10px; }
.mt12{ margin-top:12px; }
.mt14{ margin-top:14px; }
.mt16{ margin-top:16px; }
.mt20{ margin-top:20px; }
.mt24{ margin-top:24px; }
.mt28{ margin-top:28px; }
.mt32{ margin-top:32px; }

.mb4{ margin-bottom:4px; }
.mb6{ margin-bottom:6px; }
.mb8{ margin-bottom:8px; }
.mb10{ margin-bottom:10px; }
.mb12{ margin-bottom:12px; }
.mb14{ margin-bottom:14px; }
.mb16{ margin-bottom:16px; }
.mb20{ margin-bottom:20px; }
.mb24{ margin-bottom:24px; }
.mb28{ margin-bottom:28px; }
.mb32{ margin-bottom:32px; }

.pt12{ padding-top:12px; }
.pt16{ padding-top:16px; }
.pb12{ padding-bottom:12px; }
.pb16{ padding-bottom:16px; }

/* =========================
   Width helpers
========================= */

.w100{
  width:100%;
}

.max720{
  max-width:720px;
}

.max760{
  max-width:760px;
}

.max980{
  max-width:980px;
}

/* =========================
   Visibility
========================= */

.hidden{
  display:none !important;
}

.invisible{
  visibility:hidden !important;
}

.mobileOnly{
  display:none !important;
}

/* =========================
   Responsive
========================= */

@media(max-width:980px){

  .pageGrid{
    grid-template-columns:1fr;
  }

  .sidebar{
    position:static;
  }

  .grid4{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:700px){

  .grid3,
  .split3{
    grid-template-columns:1fr;
  }

  .topbarInner{
    min-height:auto;
  }

  .centerNav{
    justify-content:flex-start;
  }
}

@media(max-width:560px){

  .wrap{
    padding:
      max(14px, env(safe-area-inset-top))
      12px
      max(56px, env(safe-area-inset-bottom));
  }

  .main{
    padding-top:18px;
  }

  .h1{
    font-size:42px;
  }

  .h2{
    font-size:30px;
  }

  .h3{
    font-size:22px;
  }

  .actions{
    grid-template-columns:1fr;
  }

  .grid2,
  .split2{
    grid-template-columns:1fr;
  }

  .row,
  .rowInline{
    flex-direction:column;
    align-items:stretch;
  }

  .footerRow{
    flex-direction:column;
  }

  .previewMeta{
    flex-direction:column;
  }

  .topbar{
    border-radius:18px;
  }

  .topbarInner{
    padding:10px;
  }

  .logo{
    width:44px;
    height:44px;
    border-radius:16px;
  }

  .spacer{
    display:none;
  }

  .mobileOnly{
    display:block !important;
  }

  .desktopOnly{
    display:none !important;
  }
}

@media(max-width:390px){

  .h1{
    font-size:36px;
  }

  .h2{
    font-size:26px;
  }

  .pill{
    padding:9px 12px;
    font-size:13px;
  }

  .modeRow{
    gap:8px;
  }
}