/* =========================================================
   Live Calendar — base.css
   Базовые стили, reset, variables, typography
========================================================= */

/* =========================
   CSS Variables
========================= */

:root{
  color-scheme:dark;

  /* Core */

  --bg:#0b0d12;
  --bg2:#10131a;

  --fg:#ffffff;

  --muted:rgba(255,255,255,.72);
  --muted2:rgba(255,255,255,.55);
  --muted3:rgba(255,255,255,.38);

  /* Panels */

  --panel:rgba(255,255,255,.04);
  --panel2:rgba(255,255,255,.025);
  --panel3:rgba(255,255,255,.018);

  /* Inputs */

  --input:rgba(255,255,255,.04);
  --input2:rgba(255,255,255,.03);

  /* Borders */

  --border:rgba(255,255,255,.14);
  --border2:rgba(255,255,255,.18);
  --borderSoft:rgba(255,255,255,.08);

  /* Accent */

  --accent:#8ab4ff;
  --accent2:#5f9dff;

  /* Status */

  --ok:#6CFFB2;
  --warn:#FFD56C;
  --bad:#FF6B6B;

  /* Radius */

  --r-xs:10px;
  --r-sm:14px;
  --r-md:18px;
  --r-lg:22px;
  --r-xl:28px;
  --r-pill:999px;

  /* Shadows */

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

  --shadow:
    0 18px 50px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);

  --shadow-lg:
    0 30px 90px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.08);

  /* Animation */

  --ease:cubic-bezier(.2,.8,.2,1);

  /* Typography */

  --font:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

  --mono:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  /* Content widths */

  --content:760px;
  --wide:1180px;
}

/* =========================
   Reset
========================= */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
}

html,
body{
  margin:0;
  padding:0;
  min-height:100%;
}

body{
  background:var(--bg);
  color:var(--fg);

  font-family:var(--font);

  font-size:16px;
  line-height:1.5;

  overflow-x:hidden;

  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

  -webkit-tap-highlight-color:transparent;
}

/* =========================
   Selection
========================= */

::selection{
  background:rgba(138,180,255,.26);
  color:#fff;
}

::-moz-selection{
  background:rgba(138,180,255,.26);
  color:#fff;
}

/* =========================
   Scrollbar
========================= */

*{
  scrollbar-width:thin;
  scrollbar-color:
    rgba(255,255,255,.18)
    transparent;
}

*::-webkit-scrollbar{
  width:10px;
  height:10px;
}

*::-webkit-scrollbar-track{
  background:transparent;
}

*::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.14);
  border-radius:999px;
}

*::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,.22);
}

/* =========================
   Typography
========================= */

h1,
h2,
h3,
h4,
h5,
h6{
  margin:0;
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.03em;
}

p{
  margin:0;
}

small{
  font-size:12px;
}

strong{
  font-weight:800;
}

code,
pre,
kbd,
samp{
  font-family:var(--mono);
}

code{
  font-size:.95em;
}

/* =========================
   Links
========================= */

a{
  color:var(--accent);
  text-decoration:none;

  transition:
    opacity .18s ease,
    color .18s ease;
}

a:hover{
  color:#a5c6ff;
  text-decoration:none;
}

a:active{
  opacity:.8;
}

/* =========================
   Images
========================= */

img,
svg,
video,
canvas{
  display:block;
  max-width:100%;
}

img{
  height:auto;
}

/* =========================
   Forms
========================= */

button,
input,
textarea,
select{
  font:inherit;
  color:inherit;
}

button{
  border:0;
  background:none;
  padding:0;
}

button,
[role="button"]{
  cursor:pointer;
}

input,
textarea,
select{
  appearance:none;
  -webkit-appearance:none;
}

textarea{
  resize:vertical;
}

fieldset{
  margin:0;
  padding:0;
  border:0;
}

label{
  display:block;
}

input:disabled,
textarea:disabled,
button:disabled{
  cursor:not-allowed;
}

/* =========================
   Focus states
========================= */

:focus{
  outline:none;
}

:focus-visible{
  outline:2px solid rgba(138,180,255,.75);
  outline-offset:2px;
}

/* =========================
   HR
========================= */

hr{
  border:0;
  height:1px;

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

/* =========================
   Tables
========================= */

table{
  width:100%;
  border-collapse:collapse;
}

th,
td{
  text-align:left;
}

/* =========================
   Lists
========================= */

ul,
ol{
  margin:0;
  padding:0;
  list-style:none;
}

/* =========================
   Helpers
========================= */

.hidden{
  display:none !important;
}

.block{
  display:block !important;
}

.inline{
  display:inline !important;
}

.inlineBlock{
  display:inline-block !important;
}

.flex{
  display:flex !important;
}

.grid{
  display:grid !important;
}

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

.flex1{
  flex:1;
}

.w100{
  width:100%;
}

.h100{
  height:100%;
}

.relative{
  position:relative;
}

.absolute{
  position:absolute;
}

.fixed{
  position:fixed;
}

.sticky{
  position:sticky;
}

.noSelect{
  user-select:none;
}

.pointer{
  cursor:pointer;
}

.round{
  border-radius:50%;
}

/* =========================
   Opacity helpers
========================= */

.o0{ opacity:0; }
.o25{ opacity:.25; }
.o50{ opacity:.5; }
.o75{ opacity:.75; }
.o100{ opacity:1; }

/* =========================
   Text helpers
========================= */

.tCenter{ text-align:center; }
.tLeft{ text-align:left; }
.tRight{ text-align:right; }

.upper{ text-transform:uppercase; }
.lower{ text-transform:lowercase; }

.bold{ font-weight:700; }
.black{ font-weight:900; }

.nowrap{
  white-space:nowrap;
}

.break{
  word-break:break-word;
}

.ellipsis{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* =========================
   Background helpers
========================= */

.bgPanel{
  background:var(--panel);
}

.bgPanel2{
  background:var(--panel2);
}

.bgPanel3{
  background:var(--panel3);
}

/* =========================
   Border helpers
========================= */

.border{
  border:1px solid var(--border);
}

.borderSoft{
  border:1px solid var(--borderSoft);
}

/* =========================
   Radius helpers
========================= */

.rSm{
  border-radius:var(--r-sm);
}

.rMd{
  border-radius:var(--r-md);
}

.rLg{
  border-radius:var(--r-lg);
}

.rXl{
  border-radius:var(--r-xl);
}

.rPill{
  border-radius:var(--r-pill);
}

/* =========================
   Shadow helpers
========================= */

.shadowSm{
  box-shadow:var(--shadow-sm);
}

.shadow{
  box-shadow:var(--shadow);
}

.shadowLg{
  box-shadow:var(--shadow-lg);
}

/* =========================
   Transition helpers
========================= */

.transition{
  transition:all .18s var(--ease);
}

.transitionSlow{
  transition:all .35s var(--ease);
}

/* =========================
   Container helpers
========================= */

.container{
  width:100%;
  max-width:var(--wide);
  margin:0 auto;
}

.content{
  width:100%;
  max-width:var(--content);
  margin:0 auto;
}

/* =========================
   Safe area
========================= */

.safeTop{
  padding-top:env(safe-area-inset-top);
}

.safeBottom{
  padding-bottom:env(safe-area-inset-bottom);
}

/* =========================
   Mobile
========================= */

.mobileOnly{
  display:none !important;
}

.desktopOnly{
  display:block !important;
}

/* =========================
   Reduced motion
========================= */

@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

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

@media(max-width:720px){

  body{
    font-size:15px;
  }
}

@media(max-width:560px){

  .mobileOnly{
    display:block !important;
  }

  .desktopOnly{
    display:none !important;
  }
}

@media(max-width:390px){

  body{
    font-size:14px;
  }
}