:root{
  --bg:#f4f4f5;
  --card:#ffffff;
  --text:#151515;
  --muted:#6b7280;
  --primary:#e11d2e;
  --primary-600:#cf1828;
  --radius:16px;
  --shadow:0 6px 16px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif}
.container{max-width:960px;margin:0 auto;padding:16px}
.header{
  background:linear-gradient(135deg,#7b2ff7,#f107a3,#fb5a3d);
  color:#fff;
  padding:14px 16px;
  border-bottom-left-radius:20px;border-bottom-right-radius:20px;
  box-shadow:var(--shadow);
  position:sticky;top:0;z-index:10;
}
.header .brand{font-weight:900;font-size:38px;letter-spacing:.5px}
.sub{opacity:.9;margin-top:4px}
.search-bar{display:flex;gap:8px;margin:12px 0}
.search-bar input{
  flex:1;border:0;background:#ffffff; padding:12px 14px;border-radius:12px;box-shadow:var(--shadow);
  font-size:16px;
}
.categories{display:flex;gap:8px;overflow:auto;padding-bottom:6px}
.chip{border:1px solid #e5e7eb;background:#fff;color:#111;padding:8px 12px;border-radius:999px;white-space:nowrap;cursor:pointer}
.chip.active{background:#111;color:#fff;border-color:#111}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:8px}
.card{background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:14px}
.card h3{margin:0 0 6px 0;font-size:18px}
.meta{color:var(--muted);font-size:13px;margin-bottom:8px}
.price{font-weight:700;margin-top:6px}
.controls{display:flex;align-items:center;gap:8px;margin-top:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:12px;padding:10px 12px;cursor:pointer}
.btn.primary{background:var(--primary);color:#fff}
.btn.primary:active{background:var(--primary-600)}
.btn.ghost{background:#f3f4f6;color:#111}
.counter{display:inline-flex;align-items:center;gap:10px;background:#f3f4f6;border-radius:12px;padding:6px 10px}
.counter button{border:0;background:transparent;font-size:18px;cursor:pointer}
.badge{
  position:relative;
}
.badge .counter-dot{
  position:absolute;right:-10px;bottom:-6px;
  background:var(--primary);
  color:#fff;border-radius:999px;
  font-size:12px;line-height:1;padding:4px 6px;min-width:24px;text-align:center;
  box-shadow:var(--shadow);
}
.navbar{
  position:fixed;left:0;right:0;bottom:0;background:#fff;
  border-top-left-radius:16px;border-top-right-radius:16px;box-shadow:0 -8px 20px rgba(0,0,0,.08);
  padding:10px 16px;display:flex;justify-content:space-around;align-items:center;gap:12px;
}
.nav-item{flex:1;text-align:center;padding:8px;border-radius:12px;color:#111;text-decoration:none}
.nav-item.active{background:#111;color:#fff}
.section-title{font-weight:800;font-size:20px;margin:16px 0 8px}
/* Cart */
.table{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:8px}
.row{display:grid;grid-template-columns:1.2fr .8fr .6fr .8fr;align-items:center;padding:10px;border-bottom:1px solid #f0f0f0}
.row:last-child{border-bottom:0}
.th{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.row .qty{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.total{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:14px;margin-top:14px;display:flex;justify-content:space-between;align-items:center}
.danger{background:#fee2e2;color:#991b1b}
.inline{display:inline-flex;gap:8px;align-items:center}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:50}
.modal{background:#fff;border-radius:16px;padding:20px;min-width:280px;text-align:center;box-shadow:var(--shadow)}
.modal h2{margin:0 0 8px 0}
.close-x{position:absolute;right:12px;top:8px;font-size:24px;cursor:pointer}
/* Admin */
.admin-wrap{display:grid;grid-template-columns:1fr;gap:12px}
.admin-controls{display:flex;gap:8px;flex-wrap:wrap}
.order-card{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:12px}
.order-num{font-weight:800;font-size:28px}
.order-actions{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.status-badge{font-size:12px;padding:4px 8px;border-radius:999px;background:#f3f4f6;color:#111}
/* Display page */
.display-root{height:100vh;display:grid;grid-template-columns:1fr 1fr}
.panel{
  padding:24px;color:#fff;display:flex;flex-direction:column;
}
.panel.left{
  background:linear-gradient(180deg,#ff5a7a,#fb4d3d 60%,#ff8e3d);
}
.panel.right{
  background:linear-gradient(180deg,#1fa2ff,#12d8fa 60%,#a6ffcb);
}
.panel h1{margin:0 0 8px 0;font-size:44px;display:flex;align-items:center;gap:12px}
.big-list{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
.big-num{
  font-weight:900;font-size:72px;line-height:1;
  text-shadow:0 4px 16px rgba(0,0,0,.25);
}
.fullscreen-btn{
  position:fixed;right:16px;top:16px;background:rgba(0,0,0,.5);color:#fff;padding:8px 10px;border-radius:12px;cursor:pointer
}
@media(min-width:960px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* === Custom font (place your file at assets/fonts/TemaDisplay.woff2) === */
@font-face{
  font-family:'TemaDisplay';
  src: url('../fonts/TemaDisplay.woff2') format('woff2');
  font-display: swap;
}
.card h3{ font-family:'TemaDisplay', system-ui,-apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif }

/* === Admin 2‑column layout + aside === */
.admin-grid{
  display:grid; gap:16px;
  grid-template-columns: 1fr;
}
@media(min-width:1024px){
  .admin-grid{ grid-template-columns: 2fr 1fr; align-items:start }
}
.aside{
  position:sticky; top:90px; align-self:start;
  display:flex; flex-direction:column; gap:12px;
}
.widget{ background:#fff; border-radius:16px; box-shadow:var(--shadow); padding:12px }
.widget h3{ margin:0 0 8px 0 }
.stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.stat{ background:#f8fafc; border-radius:12px; padding:10px }
.stat .label{ color:var(--muted); font-size:12px }
.stat .value{ font-weight:800; font-size:18px }

.row-actions{ display:flex; gap:8px; flex-wrap:wrap }

/* === Auth modal for admin === */
.auth-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:100 }
.auth-box{ background:#fff; border-radius:16px; padding:20px; width:min(420px, 92vw); box-shadow:var(--shadow) }
.auth-box h2{ margin:0 0 10px 0 }
.auth-box input{ width:100%; padding:12px; border:1px solid #e5e7eb; border-radius:12px; margin-top:8px }
.auth-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:10px }
.muted{ color:var(--muted) }

/* === Right aligned export controls === */
.btn.small{ padding:8px 10px; border-radius:10px; font-size:14px }
.btn.block{ width:100% }
.filter-row{ display:flex; flex-wrap:wrap; gap:8px }
.badge-pill{ background:#f3f4f6; padding:6px 10px; border-radius:999px; font-size:12px }

/* Reserve space for bottom navbar */
body{ padding-bottom: 90px }
.container{ padding-bottom: 90px }

/* Menu editor */
.editor{ background:#fff; border-radius:16px; box-shadow:var(--shadow); padding:12px }
.editor h3{ margin:0 0 10px 0 }
.cat-row{ display:flex; align-items:center; gap:8px; margin:8px 0; flex-wrap:wrap }
.cat-row input{ padding:8px 10px; border:1px solid #e5e7eb; border-radius:10px }
.item-row{ display:grid; grid-template-columns:1.2fr .6fr .6fr auto; gap:8px; margin:6px 0; align-items:center }
.item-row input{ padding:8px 10px; border:1px solid #e5e7eb; border-radius:10px; width:100% }
.editor .list{ margin-left:6px; padding-left:6px; border-left:3px solid #f1f5f9 }
.editor .muted{ color:var(--muted) }

/* === Timer style === */
.elapsed{ font-variant-numeric: tabular-nums; font-weight:700 }
/* Active red for range buttons */
.btn.small.ghost.active{ background: var(--primary); color:#fff }
/* Grouped section headers on index */
.section-header{ margin:16px 0 6px; font-size:18px; font-weight:800; color:#111; display:flex; align-items:center; gap:8px }
.section-header::before{ content:''; display:block; width:6px; height:18px; background:#111; border-radius:3px }
/* Instagram icon link */
.insta-link{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; color:#fff; text-decoration:none }
.insta-link svg{ width:20px; height:20px; }
/* White auth overlay to hide content */
.auth-backdrop{ background:#fff !important }
/* Display break overlay */
.break-overlay{ position:fixed; inset:0; background:#111; color:#fff; display:none; align-items:center; justify-content:center; z-index:60 }
.break-overlay .msg{ text-align:center }
.break-overlay h1{ font-size:52px; margin:0 0 10px 0 }
.break-overlay p{ opacity:.85; font-size:18px }
/* Admin bottom tabs */
.tabsbar{ position:fixed; left:0; right:0; bottom:0; background:#fff; box-shadow:0 -8px 20px rgba(0,0,0,.08); border-top-left-radius:16px; border-top-right-radius:16px; display:flex; gap:8px; padding:10px 16px; z-index:30 }
.tab{ flex:1; text-align:center; padding:10px; border-radius:12px; cursor:pointer }
.tab.active{ background:#111; color:#fff }
/* Hide editor by default container */
#adminEditor{ display:none }
/* красная подсветка активного периода */
.btn.small.ghost.active{ background: var(--primary); color:#fff }
/* вкладки внизу */
.tabsbar{ position:fixed; left:0; right:0; bottom:0; background:#fff; box-shadow:0 -8px 20px rgba(0,0,0,.08); border-top-left-radius:16px; border-top-right-radius:16px; display:flex; gap:8px; padding:10px 16px; z-index:30 }
.tab{ flex:1; text-align:center; padding:10px; border-radius:12px; cursor:pointer }
.tab.active{ background:#111; color:#fff }
/* белый фон авторизации (ничего не видно за ним) */
.auth-backdrop{ background:#fff !important }
/* таймеры */
.elapsed{ font-variant-numeric: tabular-nums; font-weight:700 }
/* === Break overlay (перерыв) с плавным градиентом === */
.break-overlay{
  position:fixed; inset:0;
  display:none; align-items:center; justify-content:center;
  z-index:60; color:#fff; text-align:center; padding:4vw;
  background: linear-gradient(135deg,#ff3b30,#ff6a00,#ff3b30,#ff8a00);
  background-size: 300% 300%;
  animation: gradShift 18s ease-in-out infinite;
}
.break-overlay .msg h1{
  margin:0 0 .4em 0;
  font-weight: 900;
  font-size: clamp(48px, 9vw, 120px);
  line-height: 1.05;
  text-shadow: 0 6px 24px rgba(0,0,0,.25);
}
.break-overlay .msg p{
  margin:0; opacity:.95;
  font-size: clamp(18px, 2.6vw, 28px);
}

/* плавное «перетекание» градиента */
@keyframes gradShift{
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}
.poster-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
.poster{ background:#fff; border-radius:16px; box-shadow:var(--shadow); overflow:hidden }
.poster img{ width:100%; height:200px; object-fit:cover; display:block }
.poster .info{ padding:10px }
.poster .info h3{ margin:0 0 6px 0; font-size:18px }
@media(min-width:960px){
  .poster-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
/* --- Poster (horizontal list) --- */
.poster-list{ display:flex; flex-direction:column; gap:12px }
.movie{
  background:#fff; border-radius:16px; box-shadow:var(--shadow);
  display:flex; gap:14px; padding:12px; align-items:center;
}
.movie .poster{
  width:120px; height:170px; flex:0 0 120px;
  border-radius:12px; object-fit:cover; background:#eee;
}
.movie .info{ flex:1 }
.movie .info h3{ margin:0 0 4px 0; font-size:18px }
.movie .meta{ color:var(--muted); font-size:13px }

/* stars (★★★★★ with partial fill) */
.stars{ position:relative; display:inline-block; line-height:1; font-size:18px }
.stars .bg{ color:#e5e7eb }
.stars .fg{
  color:#f59e0b; position:absolute; left:0; top:0;
  white-space:nowrap; overflow:hidden
}

@media(min-width:960px){
  .movie .poster{ width:160px; height:220px; flex-basis:160px }
}
/* --- Poster (horizontal) --- */
.poster-list{ display:flex; flex-direction:column; gap:16px }
.movie{ background:#fff; border-radius:16px; box-shadow:var(--shadow); border:2px solid #e5e7eb;
        display:flex; gap:14px; align-items:stretch; overflow:hidden }
.movie .left{ position:relative }
.movie .poster{ width:120px; height:170px; object-fit:cover; border-radius:12px; margin:10px }
.pill{ position:absolute; top:10px; left:10px; background:#0f2840; color:#fff; border-radius:10px;
       padding:6px 10px; font-weight:800; font-size:14px }
.pill.price{ left:auto; right:10px; background:#facc15; color:#111 }
.movie .info{ flex:1; padding:10px 12px; display:flex; flex-direction:column; gap:6px }
.movie .info h3{ margin:0; font-size:18px }
.meta-row{ display:flex; align-items:center; gap:8px }
.age{ border:1px solid #d1d5db; border-radius:6px; padding:2px 6px; font-size:12px; color:#6b7280; margin-left:auto }
.stars{ position:relative; display:inline-block; line-height:1; font-size:18px }
.stars .bg{ color:#e5e7eb }
.stars .fg{ color:#f59e0b; position:absolute; left:0; top:0; white-space:nowrap; overflow:hidden }
.movie .desc{ color:var(--muted); font-size:13px; line-height:1.35 }

/* CTA */
.cta{ display:flex; align-items:center; justify-content:space-between; padding:12px; background:#0f2840; color:#fff }
.btn-cta{ background:#facc15; color:#111; padding:10px 14px; border-radius:10px; text-decoration:none; font-weight:800 }
.btn-cta.gray{ background:#e5e7eb; color:#6b7280 }

/* movie page */
.movie-hero{ background:linear-gradient(135deg,#eef2ff,#fde68a); border-radius:20px; padding:18px; text-align:center }
.movie-hero img{ width:min(360px,80vw); border-radius:16px }
.time-badge{ display:inline-block; background:#0f2840; color:#fff; padding:6px 10px; border-radius:10px; font-weight:800 }
.footer-cta{ display:flex; gap:8px; margin-top:14px }
.footer-cta .left{ flex:1; background:#0f2840; color:#fff; padding:12px; border-radius:12px; text-align:center }
.footer-cta .right{ background:#facc15; color:#111; padding:12px; border-radius:12px; text-align:center; font-weight:800 }
.footer-cta .right.gray{ background:#e5e7eb; color:#6b7280 }

@media(min-width:960px){
  .movie .poster{ width:160px; height:220px }
}
/* --- Poster (horizontal list) --- */
.poster-list{ display:flex; flex-direction:column; gap:16px }
.movie{
  background:#fff; border-radius:16px; box-shadow:var(--shadow);
  border:2px solid #e5e7eb; display:flex; gap:14px; overflow:hidden; align-items:stretch
}
.movie .poster{ width:120px; height:170px; object-fit:cover; border-radius:12px; margin:10px }
.movie .info{ flex:1; padding:10px 12px; display:flex; flex-direction:column; gap:6px }
.movie .info h3{ margin:0; font-size:18px }
.meta-row{ display:flex; align-items:center; gap:8px }
.age{ border:1px solid #d1d5db; border-radius:6px; padding:2px 6px; font-size:12px; color:#6b7280; margin-left:auto }
.movie .desc{ color:var(--muted); font-size:13px; line-height:1.35 }

/* stars (★★★★★ with partial fill) */
.stars{ position:relative; display:inline-block; line-height:1; font-size:18px }
.stars .bg{ color:#e5e7eb }
.stars .fg{ color:#f59e0b; position:absolute; left:0; top:0; white-space:nowrap; overflow:hidden }

/* CTA бар внизу карточки */
.cta{ margin-top:auto; display:flex; align-items:center; justify-content:space-between;
      padding:12px; background:#0f2840; color:#fff }
.btn-cta{ background:#ffffff; color:#111; padding:10px 14px; border-radius:10px; text-decoration:none; font-weight:800 }

/* movie page */
.movie-hero{ background:linear-gradient(135deg,#eef2ff,#fde68a); border-radius:20px; padding:18px; text-align:center }
.movie-hero img{ width:min(360px,80vw); border-radius:16px }

@media(min-width:960px){
  .movie .poster{ width:160px; height:220px }
}
/* === Tema Afisha — цвета и компоненты === */
:root{
  --cta-bg:#0f0f0f;        /* фон нижней плашки */
  --cta-fg:#ffffff;        /* текст на плашке */
  --cta-btn:#e11d2e;       /* кнопка */
  --cta-btn-fg:#ffffff;
  --cta-btn-hover:#cf1828;
  --stars:#ffb000;
  --time-pill:#111;        /* бейдж времени */
  --time-pill-fg:#fff;
}

/* Список карточек фильмов (горизонтально) */
.poster-list{ display:flex; flex-direction:column; gap:16px }
.movie{
  background:#fff; border-radius:16px; box-shadow:var(--shadow);
  border:2px solid #e5e7eb; display:flex; gap:14px; overflow:hidden; align-items:stretch;
}
.movie .poster{ width:120px; height:170px; object-fit:cover; border-radius:12px; margin:10px; background:#eee }
.movie .info{ flex:1; padding:10px 12px; display:flex; flex-direction:column; gap:6px }
.movie .info h3{ margin:0; font-size:18px }
.meta-row{ display:flex; align-items:center; gap:8px }
.age{ border:1px solid #d1d5db; border-radius:6px; padding:2px 6px; font-size:12px; color:#6b7280; margin-left:auto }
.movie .desc{
  color:#6b7280; font-size:13px; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Звёзды */
.stars{ position:relative; display:inline-block; line-height:1; font-size:18px }
.stars .bg{ color:#e5e7eb }
.stars .fg{ color:var(--stars); position:absolute; left:0; top:0; white-space:nowrap; overflow:hidden }

/* Бейдж времени */
.time-tag{
  display:inline-block; background:var(--time-pill); color:var(--time-pill-fg);
  border-radius:10px; padding:3px 8px; font-weight:800; font-size:12px
}

/* Нижняя плашка и кнопка */
.cta{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between;
  padding:14px; background:var(--cta-bg); color:var(--cta-fg); border-radius:12px;
}
.btn-cta{
  background:var(--cta-btn); color:var(--cta-btn-fg);
  padding:10px 14px; border-radius:10px; text-decoration:none; font-weight:800
}
.btn-cta:hover{ background:var(--cta-btn-hover) }

/* Состояние «уже идёт» */
.movie.live .cta{ background:#0f3e1a }
.movie.live .btn-cta{ background:#22c55e; color:#0a0a0a }
.movie.live .btn-cta:hover{ background:#16a34a }

/* Страница фильма */
.movie-hero{ background:linear-gradient(135deg,#eef2ff,#fde68a); border-radius:20px; padding:18px; text-align:center }
.movie-hero img{ width:min(360px,80vw); border-radius:16px }

@media(min-width:960px){
  .movie .poster{ width:160px; height:220px }
}