:root{
  --bg:#000;
  --text:#fff;
  --muted:#c9c9c9;
  --line:#2d2d2d;
  --teal:#3cbdb9;
  --orange:#f0a32f;
  --light:#d9d9d9;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Haval','TT Wellings','Montserrat','Segoe UI',Roboto,Arial,sans-serif;
  overflow:hidden;
}

/* Если есть фирменные шрифты — положите файлы в /fonts и раскомментируйте:*/
@font-face{font-family:'Haval';src:url('fonts/HavalMedium.woff2') format('woff2');font-weight:500;}
@font-face{font-family:'Haval';src:url('fonts/HavalRegular.woff2') format('woff2');font-weight:400;}
@font-face{font-family:'TT Wellings';src:url('fonts/TTWellings.woff2') format('woff2');}


.screen{height:100%;display:flex;flex-direction:column;padding:3.8rem;}

/* ---------- Шапка ---------- */
/* .topbar{display:flex;align-items:center;gap:2.5rem;margin-bottom:5.2rem;} */
/* .slogan-bar{flex:1;background:#fff;height:2.6rem;display:flex;align-items:center;overflow:hidden;} */
/* .slogan-accent{width:2.6rem;height:2.6rem;background:var(--teal);transform:skewX(-25deg);margin:0 1.2rem 0 -0.6rem;flex:none;} */
/* .slogan-text{font-size:1.3rem;color:#555;letter-spacing:.08em;white-space:nowrap;} */
/* .logo{font-size:3.4rem;font-weight:800;letter-spacing:.18em;line-height:1;} */
/* ---------- Шапка ---------- */
.topbar{display:flex;align-items:center;gap:2.5rem;margin-bottom:5.2rem;}

.slogan-bar{
  flex:1;height:2.6rem;background:#fff;display:flex;align-items:center;
  clip-path:polygon(1.5rem 0, 100% 0, 100% 100%, 0 100%);   /* скошен левый край */
}
.slogan-accent{
  flex:none;width:3.4rem;height:100%;background:var(--teal);
  clip-path:polygon(1.5rem 0, 100% 0, calc(100% - 1.5rem) 100%, 0 100%); /* параллелограмм с тем же скосом */
  margin-right:1.4rem;
}
.slogan-text{font-size:1.3rem;color:#555;letter-spacing:.08em;white-space:nowrap;}

.logo{height:3.4rem;width:auto;fill:#fff;display:block;}  /* логотип вместо текста */

/* ---------- Верхний блок ---------- */
/* ---------- Верхний блок ---------- */
.hero{
  display:flex;
  align-items:flex-start;
  gap:8rem;                 /* отступ между hero-left и hero-center */
  margin-bottom:7.4rem;
}
.hero-left,
.hero-center{ flex:none; }  /* блоки по ширине контента, не растягиваются */

.masters{ margin-left:auto; } /* карточки мастеров уходят вправо */
.welcome{font-size:4.1rem;font-weight:600;line-height:1.28;letter-spacing:.01em;}
.datetime{display:flex;align-items:center;gap:3rem;margin-top:5.2rem;}
.clock{font-size:9.5rem;font-weight:700;line-height:1;letter-spacing:.4rem;font-variant-numeric:tabular-nums;}
.date{font-size:2.9rem;font-weight:600;line-height:1.45;}
.dealer-name{font-size:3.3rem;font-weight:600;letter-spacing:.1em;line-height:1.35;text-transform:uppercase;}
.dealer-address{font-size:2.2rem;color:var(--muted);margin-top:2.6rem;font-weight:500;}

/* ---------- Мастера ---------- */
.masters{display:flex;gap:3.2rem;}
.master{width:13.8rem;}
.master-photo{width:13.8rem;height:14.6rem;object-fit:cover;object-position:center top;display:block;filter:grayscale(15%);}
.master-name{font-size:1.9rem;font-weight:700;line-height:1.25;margin-top:1.2rem;}
.master-phone{font-size:1.7rem;font-weight:700;margin-top:.7rem;white-space:nowrap;}
/* ---------- Мастера ---------- */


/* ---------- Таблица ---------- */
.board{flex:1;display:flex;flex-direction:column;min-height:0;}
.row-grid{display:grid;grid-template-columns:1.05fr 1.05fr 1.9fr 1.9fr 2.6fr 1.55fr;gap:2rem;align-items:center;}
.board-head{font-size:2.7rem;font-weight:700;line-height:1.25;padding-bottom:1.8rem;border-bottom:.25rem solid #fff;}
.board-body{flex:1;min-height:0;overflow:hidden;}   /* скролл программный, без полосы */
.row{min-height:5.6rem;border-bottom:1px solid var(--line);font-size:2.6rem;font-weight:500;animation:fade .5s ease;}
.row .cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@keyframes fade{from{opacity:0;transform:translateY(.6rem);}to{opacity:1;transform:none;}}

/* ---------- Статусы ---------- */
.status{display:flex;align-items:center;gap:1.3rem;font-weight:700;font-size:2.4rem;}
.status .sq{width:1.3rem;height:3rem;flex:none;}
.st-done{color:var(--teal);}   .st-done .sq{background:var(--teal);}
.st-work{color:var(--orange);} .st-work .sq{background:var(--orange);}
.st-wait{color:#f2f2f2;}       .st-wait .sq{background:var(--light);}