/* ——————————————————————————————————————————————
   Фирменный слой «Лихо не буди».
   Чёрная бумага, красные чернила, готический логотип.
   Подключается после styles.css и переопределяет токены.
   —————————————————————————————————————————————— */

:root{
  color-scheme:dark;

  --accent:#D2231B;              /* красный с обложек курсов */
  --accent-dark:#8E140F;
  --accent-soft:#2A0F0D;
  --blue:var(--accent);          /* базовые стили зовут акцент так */
  --blue-dark:var(--accent-dark);
  --blue-soft:var(--accent-soft);

  --bg:#0B0A0A;
  --panel:#100E0E;
  --panel-2:#171313;

  --line:#2A2320;
  --line-2:#1E1A18;
  --ink:#E9E4DE;                 /* цвет чернил логотипа */
  --ink-2:#8E8479;
  --ink-3:#B7ADA4;
  --hover:#1B1616;

  --sh-1:0 1px 2px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.4);
  --sh-2:0 2px 6px rgba(0,0,0,.6),0 8px 24px rgba(0,0,0,.45);
  --sh-3:0 10px 40px rgba(0,0,0,.7);

  --font:"Inter","Helvetica Neue",Arial,sans-serif;
  --font-display:"Old Standard TT","Times New Roman",serif;
}

body{background:var(--bg);color:var(--ink)}

/* бумажное зерно поверх фона */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}
/* .shell без z-index: иначе он создаёт свой контекст наложения и затемнение
   шторки оказывается ПОВЕРХ самой шторки, а выпадашка поиска — под сеткой */
.appbar{position:relative;z-index:10}   /* выше плашек сетки: у них z-index 2 */
.shell{position:relative}

/* —————————————————————— поверхности —————————————————————— */
.appbar{
  background:var(--panel);border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(210,35,27,.35);
}
.sidebar{background:var(--panel)}
.content{border-left-color:var(--line)}
.day-cell{background:transparent;border-right-color:var(--line)}
.day-cell.out{background:rgba(255,255,255,.014)}
.day-cell.drop{background:var(--accent-soft)}
.week-row{border-bottom-color:var(--line)}
.dow-row,.tl-head,.tl-allday{border-bottom-color:var(--line)}
.tl-col,.tl-gutter,.tl-corner,.ad-cell{border-color:var(--line)}
.tl-line{border-top-color:var(--line)}

.gbtn{background:transparent;border-color:var(--line);color:var(--ink)}
.gbtn:hover{background:var(--hover)}
.gbtn-filled{background:var(--accent);border-color:var(--accent);color:#fff}
.gbtn-filled:hover{background:#e2372e;box-shadow:var(--sh-1)}
.view-select{
  background-color:transparent;border-color:var(--line);color:var(--ink);
  text-align:center;text-align-last:center;padding-left:26px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23B7ADA4' d='M7 10l5 5 5-5z'/></svg>");
}
.view-select:hover{background-color:var(--hover)}
.view-select option{background:var(--panel-2);color:var(--ink);text-align:center;text-align-last:center}
.search-input{background:var(--panel-2);border-color:var(--line);color:var(--ink)}
.search-results{background:var(--panel-2);box-shadow:var(--sh-2);z-index:60}
.search-results li{color:var(--ink)}
.search-results li:hover{background:var(--hover)}

.create-btn{
  background:var(--panel-2);border-color:var(--line);color:var(--ink);box-shadow:var(--sh-1);
}
.create-btn:hover{background:var(--hover);box-shadow:var(--sh-2)}
.create-btn svg path{fill:var(--accent)}
.fab{
  background:var(--panel-2);border:1px solid var(--line);
  color:var(--accent);box-shadow:var(--sh-2);
}
.fab:active{background:var(--hover)}

.input{background:var(--panel-2);border-color:var(--line);color:var(--ink)}
.input:focus{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.input::placeholder{color:#6E6259}
.dialog{background:var(--panel);border:1px solid var(--line);box-shadow:var(--sh-3)}
.overlay{background:rgba(0,0,0,.72)}
.days button{background:transparent;border-color:var(--line);color:var(--ink-3)}
.days button:hover{background:var(--hover)}
.days button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.toast{background:var(--panel-2);border:1px solid var(--line);color:var(--ink)}
.tbtn{color:var(--ink-3)}                 /* «Отмена» — нейтральная */
.tbtn:hover{background:var(--hover);color:var(--ink)}
.tbtn-primary{color:var(--accent)}
.tbtn-primary:hover{background:var(--accent-soft);color:var(--accent)}
.tbtn-danger{color:#E2725E}
.tbtn-danger:hover{background:#2A1412}

/* —————————————————————— типографика —————————————————————— */
.period{font-family:var(--font-display);font-size:24px;letter-spacing:.01em}
.dialog-head h3,.auth-card h1{font-family:var(--font-display)}
.cal-head,.mini-title,.ag-date .d,.tl-dnum{font-family:var(--font-display)}
.ycard h4{font-family:var(--font-display);font-weight:400;color:var(--ink)}
.dow-row div,.tl-dow{letter-spacing:.18em;color:var(--ink-2)}
.cal-name{color:var(--ink-3)}

/* —————————————————————— логотип —————————————————————— */
.logo{gap:10px;margin-left:6px}
.logo-img{height:34px;width:auto;display:block;opacity:.95}
.logo-badge,.logo-txt{display:none}
.admin-tag{
  background:var(--accent-soft);color:#E4675C;border:1px solid #4A1512;
  text-transform:uppercase;letter-spacing:.14em;
}
.ab-link{color:var(--ink-3)}
.ab-link:hover{background:var(--hover);color:var(--ink)}

/* —————————————————————— «сегодня», выделения —————————————————————— */
.day-num.today,.mini-cell.today,.ag-day.today .ag-date .d,
.tl-daycol.today .tl-dnum,.ygrid .yd.today{background:var(--accent);color:#fff}
.mini-cell.sel:not(.today){background:var(--accent-soft);color:#E4675C}
.tl-daycol.today .tl-dow{color:var(--accent)}
.now-line{border-top-color:var(--accent)}
.now-line::before{background:var(--accent)}

.day-num:hover,.mini-cell:hover,.more:hover,
.cal-list li:hover,.ag-item:hover,.ycard:hover,
.ygrid .yd:hover:not(.yh){background:var(--hover)}
.ygrid .yd{color:var(--ink-3)}
.ygrid .yd.out{color:#4A423C}
.ygrid .yh{color:var(--ink-2)}
.ag-day{border-bottom-color:var(--line-2)}
.ag-item{background:transparent}

/* —————————————————————— вход и настройка —————————————————————— */
.auth-page{
  background:
    radial-gradient(circle at 50% 40%, rgba(210,35,27,.32), rgba(11,10,10,.97) 60%),
    url("/img/cat.jpg") center 35% / cover no-repeat,
    var(--bg);
}
.auth-card{
  background:rgba(16,14,14,.93);border:1px solid var(--line);
  box-shadow:var(--sh-3);
}
.auth-logo{flex-direction:column;align-items:center;gap:14px;margin-bottom:22px}
.auth-logo .logo-img{height:62px}
.auth-card h1{text-align:center;font-size:24px}
.auth-card .hint{text-align:center}
.auth-card a{color:#E4675C}
.auth-error{background:#2A1412;color:#E2725E}
.code{background:var(--panel-2);color:var(--ink-3)}




/* ——————————————————————————————————————————————
   Декор: шапка с логотипом по центру, тернистые орнаменты,
   фактура сетки, печатные плашки мероприятий.
   —————————————————————————————————————————————— */

/* тернистая ветвь-разделитель и угловой орнамент */
:root{
  --thorn:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 18'><g fill='none' stroke='%23D2231B' stroke-width='1.3' stroke-linecap='round'><path d='M6 9 C 40 2 70 16 104 9'/><path d='M136 9 C 170 2 200 16 234 9'/><path d='M30 6 l-5-4 M58 12 l6 4 M86 6 l-5-4 M154 6 l-5-4 M182 12 l6 4 M210 6 l-5-4'/></g><path d='M120 3 l4 6 -4 6 -4-6z' fill='%23D2231B'/></svg>");
  --corner:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><g fill='none' stroke='%23D2231B' stroke-width='1.3' stroke-linecap='round'><path d='M4 58 L4 10 C4 6 6 4 10 4 L58 4'/><path d='M4 26 l7 -5 M4 42 l7 5 M22 4 l5 7 M40 4 l-5 7'/></g><circle cx='4' cy='4' r='2.6' fill='%23D2231B'/></svg>");
}

/* —————————————————————— брендовая шапка —————————————————————— */
.brandbar{
  position:relative;z-index:1;flex:none;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 16px 5px;
  background:
    radial-gradient(120% 160% at 50% -30%, rgba(210,35,27,.30), transparent 64%),
    var(--panel);
  border-bottom:1px solid var(--line);
}
.brandbar .logo-img{
  height:54px;opacity:1;
  filter:drop-shadow(0 0 22px rgba(210,35,27,.40)) drop-shadow(0 2px 2px rgba(0,0,0,.7));
}
.brandbar .brandbar-sub{
  display:none;                          /* название сайта не спорит с логотипом */
}
.brandbar::after{
  content:"";width:210px;height:11px;margin-top:0;opacity:.6;
  background:var(--thorn) center/contain no-repeat;
}
.appbar .logo{display:none}                 /* на десктопе логотип живёт в брендовой шапке */
.appbar{background:transparent;box-shadow:none;border-bottom:1px solid var(--line)}
.appbar::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(210,35,27,.55),transparent);
}

/* —————————————————————— фактура сетки —————————————————————— */
.content{position:relative}
.content::before{                        /* лёгкая тень по краям, сетку не глушит */
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(140% 120% at 50% 10%, transparent 72%, rgba(0,0,0,.22));
}
.dow-row{
  border-bottom-color:rgba(210,35,27,.32);
  background:linear-gradient(180deg, rgba(210,35,27,.05), transparent);
}
.dow-row div{font-size:10px}
.week-row .day-cell:nth-child(6),
.week-row .day-cell:nth-child(7){background:rgba(233,228,222,.022)}
.day-cell.out{background:rgba(0,0,0,.16)}
.day-cell:has(.day-num.today){
  background:radial-gradient(120% 80% at 50% 0%, rgba(210,35,27,.14), transparent 72%);
}
.tl-col:nth-last-child(-n+2){background:rgba(233,228,222,.018)}

/* печатные плашки мероприятий */
.chip.solid{
  border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.45), 0 1px 0 rgba(233,228,222,.06);
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.chip.plain:hover{background:var(--hover)}
.ev{
  border-radius:3px;border-color:var(--bg);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.45);
  text-shadow:0 1px 0 rgba(0,0,0,.3);
}
.ev:hover{box-shadow:inset 0 0 0 1px rgba(0,0,0,.45), 0 2px 10px rgba(0,0,0,.5)}

/* —————————————————————— сайдбар и год —————————————————————— */
.cal-hint::before{
  content:"";display:block;height:14px;margin:2px 0 10px;opacity:.45;
  background:var(--thorn) left/contain no-repeat;
}
.cal-head{position:relative;padding-bottom:8px}
.cal-head::after{
  content:"";position:absolute;left:12px;right:8px;bottom:2px;height:1px;
  background:linear-gradient(90deg,rgba(210,35,27,.45),transparent);
}
.ycard h4{position:relative;padding-bottom:7px}
.ycard h4::after{
  content:"";position:absolute;left:6px;bottom:0;width:24px;height:2px;
  background:var(--accent);opacity:.85;
}
.ag-empty{font-family:var(--font-display);font-style:italic;font-size:16px}
.ag-day.today{background:linear-gradient(90deg, rgba(210,35,27,.10), transparent 42%)}

/* —————————————————————— мелочи —————————————————————— */
::selection{background:rgba(210,35,27,.6);color:#fff}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#2A2320;border-radius:6px;border:2px solid var(--panel)}
*::-webkit-scrollbar-thumb:hover{background:#3C312C}
.toast{border-left:3px solid var(--accent)}
.dialog{position:relative;overflow:visible}
.dialog::before{
  content:"";position:absolute;left:-1px;top:-1px;width:52px;height:52px;
  background:var(--corner) center/contain no-repeat;opacity:.5;pointer-events:none;
}
.dialog-body{overflow:auto;max-height:calc(94vh - 64px)}

/* —————————————————————— вход: кошка под формой —————————————————————— */
.auth-page{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:36px 16px 0;overflow:hidden;
  background:
    radial-gradient(circle at 50% 82%, rgba(210,35,27,.22), rgba(11,10,10,.98) 58%),
    var(--bg);
}
.auth-card{flex:none;position:relative;overflow:visible}
.auth-card::before,.auth-card::after{
  content:"";position:absolute;width:56px;height:56px;pointer-events:none;
  background:var(--corner) center/contain no-repeat;opacity:.55;
}
.auth-card::before{left:-1px;top:-1px}
.auth-card::after{right:-1px;bottom:-1px;transform:rotate(180deg)}
.auth-page::after{
  content:"";display:block;flex:1 1 auto;width:min(760px,108vw);
  min-height:200px;margin-top:10px;
  background:url("/img/cat.jpg") center 46% / cover no-repeat;
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 52%, #000 42%, transparent 78%);
  mask-image:radial-gradient(ellipse 62% 58% at 50% 52%, #000 42%, transparent 78%);
}



/* соседние месяцы приглушаем цифрой, а не заливкой */
.day-cell.out .day-num{color:#5A514A}
.day-cell{transition:background .12s ease}
.day-cell:hover{background:rgba(233,228,222,.03)}
.chip{transition:transform .1s ease, filter .12s ease}
.chip:hover{transform:translateY(-1px)}

/* ——————————————————————————————————————————————
   Телефон: компактная брендовая шапка, оформленная
   шторка и акценты — чтобы и в кармане было «Лихо».
   —————————————————————————————————————————————— */
@media (max-width:600px){
  /* логотип остаётся по центру, только мельче */
  .brandbar{display:flex;padding:7px 12px 4px;gap:2px}
  .brandbar .logo-img{height:40px}
  .brandbar::after{width:172px;height:10px;margin-top:0}
  .appbar .logo{display:none}
  .appbar{padding:0 6px}
  .period{font-size:15px}
  .view-select{max-width:84px;padding:0 18px 0 18px;font-size:11px;background-size:14px}
  .ic{width:34px;height:34px}
  .content::before{display:none}

  /* шторка: логотип сверху, тернистая ветвь снизу */
  .sidebar{padding-top:14px}
  .sidebar::before{
    content:"";display:block;flex:none;height:34px;margin:0 8px 12px;
    background:url("/img/logo.png") center/contain no-repeat;opacity:.95;
  }
  .sidebar::after{
    content:"";display:block;flex:none;height:14px;margin:16px 12px 4px;opacity:.5;
    background:var(--thorn) center/contain no-repeat;
  }
  .cal-hint::before{display:none}

  /* сетка месяца: чуть выразительнее */
  .dow-row{background:linear-gradient(180deg, rgba(210,35,27,.10), transparent)}
  .dow-row div{color:var(--ink-3)}
  .week-row .day-cell:nth-child(6),
  .week-row .day-cell:nth-child(7){background:rgba(233,228,222,.03)}
  .day-cell:has(.day-num.today){
    background:radial-gradient(120% 90% at 50% 0%, rgba(210,35,27,.20), transparent 76%);
  }
  .chip{height:19px;line-height:19px}

  /* «Выйти» и «Сайт» — иконками, чтобы название месяца влезало целиком */
  .ab-link,#btn-logout{                   /* id перебивает класс — пишем оба */
    width:34px;padding:0;font-size:0;border-radius:50%;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23B7ADA4' d='M10 17l1.4-1.4-2.6-2.6H20v-2H8.8l2.6-2.6L10 7l-5 5 5 5zm10 3H12v-2h8V6h-8V4h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2z'/></svg>") center/18px no-repeat;
  }
  .ab-link[href]{display:none}          /* «Сайт» — только на широком экране */

  /* плавающая кнопка — с красным ободком */
  .fab{
    border-color:rgba(210,35,27,.5);
    box-shadow:0 0 0 1px rgba(210,35,27,.22), var(--sh-2);
  }

  /* вход */
  .auth-page{padding:18px 12px 0}
  .auth-card{padding:18px 16px}
  .auth-logo .logo-img{height:52px}
  .auth-page::after{min-height:150px;margin-top:0}
}

/* на узких телефонах год в заголовке не помещается — он виден в мини-календаре */
@media (max-width:480px){
  #period-year{display:none}
}

/* —————————————————————— карточка мероприятия (просмотр) —————————————————————— */
.view-bar{height:3px;border-radius:2px;background:var(--c,var(--accent));margin:0 0 6px}
.view-when{font-size:15px;color:var(--ink);margin:0}
.view-cal{display:flex;align-items:center;gap:8px;color:var(--ink-2);font-size:13px;margin:0}
.view-cal::before{
  content:"";width:10px;height:10px;border-radius:3px;background:var(--c,var(--accent));flex:none;
}
.view-where,.view-desc{color:var(--ink-3);font-size:14px;margin:0;white-space:pre-wrap}
.view-desc{color:var(--ink-2)}
#view-overlay .dialog-head h3{padding-right:36px}

/* название месяца ставим по центру панели, кнопки остаются по краям */
@media (min-width:601px){
  .period{
    position:absolute;left:50%;transform:translateX(-50%);
    margin:0;max-width:44%;text-align:center;pointer-events:none;
  }
}