:root {
  --blue: #1565c0;
  --blue-dark: #0d47a1;
  --green: #1b8a32;
  --green-soft: #e8f5e9;
  --white: #ffffff;
  --bg: #eef5fb;
  --text: #102033;
  --muted: #5b6b7a;
  --line: #d3e2ef;
  --danger: #d32f2f;
  --gold: #c9a227;
  --radius: 18px;
  --shadow: 0 10px 28px rgba(13, 71, 161, 0.1);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: "Segoe UI", system-ui, sans-serif; background: var(--bg); color: var(--text); overflow-x: hidden; }
body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
a { color: var(--blue); text-decoration: none; }
.wrap { max-width: 640px; margin: 0 auto; padding: 10px 12px 28px; min-width: 0; overflow-x: hidden; width: 100%; }
body.has-user .wrap { max-width: 640px; }
.top {
  background: #1565c0;
  border-bottom: 0;
}
body.has-user .top {
  background: #1565c0; color: #fff;
  margin: 10px 10px 0; border-radius: 28px 28px 22px 22px;
  padding: 4px 4px 8px;
}
body.has-user .brand { color: rgba(255,255,255,.85); font-size: 13px; letter-spacing: .04em; }
body.has-user .langs a { color: rgba(255,255,255,.8); font-weight: 800; }
body.has-user .langs a.on { color: #fff; }
body.has-user .lang-dot { color: rgba(255,255,255,.5); }
.top-hello { padding: 0 12px 2px; }
.top-hello .hi { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1.15; }
.top-hello .dt { color: rgba(255,255,255,.82); font-size: 12px; font-weight: 600; }
.hi-pts { color: #c8e6c9; font-weight: 800; font-size: 13px; }
body:not(.has-user) .top {
  background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
  border-bottom: 3px solid var(--green);
}
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 6px 12px 2px; }
.brand { font-weight: 800; color: var(--blue-dark); font-size: 15px; }
.nav { display: none; }
.nav a {
  display: inline-block; background: #e3f2fd; color: var(--blue-dark);
  border-radius: 10px; padding: 8px 12px; margin: 2px 2px; font-weight: 800; font-size: 14px;
}
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: #fff; border-top: 2px solid var(--line);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
}
.dock a {
  text-align: center; font-size: 11px; font-weight: 800;
  color: var(--blue-dark); padding: 6px 2px 8px; border-radius: 12px;
  min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.dock a .material-symbols-outlined { font-size: 22px; color: inherit; }
.dock a.on { background: #e3f2fd; color: var(--blue); }
.btn, button.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer;
  background: var(--blue); color: #fff; padding: 16px 16px; border-radius: 16px;
  font-size: 18px; font-weight: 800; min-height: 48px;
}
.btn.green { background: var(--green); }
.btn.red, button.btn.red { background: var(--danger); color: #fff; }
.btn.ghost { background: var(--white); color: var(--blue-dark); border: 2px solid var(--line); }
.btn.full { width: 100%; }
.langs a { margin-left: 6px; font-weight: 800; color: var(--muted); font-size: 16px; }
.langs a.on { color: var(--green); }
.card { background: var(--white); border-radius: 20px; padding: 16px; margin: 12px 0; box-shadow: var(--shadow); border: 1px solid #e8f0f8; }
.wait-card { text-align: center; }
.wait-card .big { font-size: 40px; color: var(--blue-dark); }
.grid { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.dash-shell {
  container-type: inline-size;
  container-name: dash;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "hero"
    "kpi"
    "mix"
    "go"
    "team"
    "wait"
    "live";
}
.dash-hero { grid-area: hero; margin-bottom: 0; }
.dash-kpi { grid-area: kpi; }
.dash-mix { grid-area: mix; margin-top: 0; }
.dash-go { grid-area: go; margin-top: 0; }
.dash-team { grid-area: team; margin-top: 0; }
.dash-wait { grid-area: wait; margin-top: 0; }
.dash-live { grid-area: live; }
.dash-shell.dash-v2 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dash-shell.dash-v2 > * { grid-area: auto; width: 100%; min-width: 0; position: relative; }
.hero {
  background: linear-gradient(135deg, #1565c0 0%, #1b8a32 100%);
  color: #fff; border-radius: 22px; padding: 18px 16px 16px; margin: 8px 0 14px;
  box-shadow: 0 12px 28px rgba(21,101,192,.28);
}
.hero h1, .hero .clock, .hero p { color: #fff; margin: 0; }
.hero .clock { font-size: 15px; opacity: .9; margin-bottom: 6px; }
.hero h1 { font-size: 24px; }
.hero p { opacity: .9; margin-top: 6px; font-size: 15px; }
.kpi-tile {
  text-align: center; padding: 12px 8px 14px; margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  min-height: 108px;
}
.kpi-tile .muted {
  min-height: 36px; display: flex; align-items: flex-end; justify-content: center;
  line-height: 1.15; font-size: 13px;
}
.kpi-tile .big {
  font-size: 32px; line-height: 1; color: var(--blue-dark);
  margin-top: 8px; font-variant-numeric: tabular-nums;
}
.kpi-tile.blue { border-top: 5px solid var(--blue); }
.kpi-tile.green { border-top: 5px solid var(--green); }
.kpi-tile.gold { border-top: 5px solid var(--gold); }
.confirm-col { box-shadow: var(--shadow); }
label { display: block; font-weight: 800; margin: 12px 0 6px; font-size: 16px; }
input, select, textarea {
  width: 100%; padding: 16px; border-radius: 14px; border: 2px solid var(--line); font-size: 18px; background: #fff;
}
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 52px; }
.eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: 0; background: #e3f2fd; width: 44px; height: 44px; border-radius: 10px; font-size: 18px; cursor: pointer;
}
.alert { padding: 14px; border-radius: 14px; margin: 10px 0; font-weight: 700; }
.alert.ok { background: var(--green-soft); color: var(--green); }
.alert.warn { background: #fff8e1; color: #7a5b00; }
.alert.bad { background: #ffebee; color: var(--danger); }
.staff { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.staff img, .avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: #e3f2fd; border: 3px solid var(--green); }
.muted { color: var(--muted); font-size: 14px; }
h1, h2 { margin: 0 0 8px; color: var(--blue-dark); font-size: 22px; }
body { font-size: 17px; }
.login-box { margin: 12px auto; }
.clock { text-align: center; font-size: 22px; font-weight: 800; color: var(--blue-dark); margin: 4px 0 18px; }
.joke { text-align: center; font-size: 20px; line-height: 1.45; margin: 0 0 28px; padding: 12px 8px; }
.who { margin-top: 8px; font-size: 28px !important; }
.flags { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0 22px; }
.flag {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: #f4f8fb; border: 3px solid var(--line); border-radius: 16px;
  padding: 12px 10px; min-width: 96px; min-height: 72px; font-size: 32px; color: var(--text); font-weight: 800;
}
.flag span { font-size: 13px; }
.flag.on { border-color: var(--green); background: #e8f5e9; }
.bigflags .flag { min-width: 28%; font-size: 48px; padding: 18px 8px; }
.bigflags .flag span { font-size: 16px; }
.pts { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.pts label { margin: 0; }
.pts input { display: none; }
.pts span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; min-height: 48px; text-align: center;
  padding: 12px 8px; border-radius: 14px; background: #e3f2fd; color: var(--blue-dark);
  font-weight: 800; font-size: 20px;
}
.pts input:checked + span { background: var(--green); color: #fff; }
.cust { display: flex; flex-direction: column; gap: 10px; }
.cust label {
  font-weight: 800; display: flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 14px; border: 2px solid var(--line); border-radius: 16px; margin: 0; font-size: 17px;
}
.cust input { width: 22px; height: 22px; }
.ico { font-size: 26px; width: 34px; text-align: center; }
.round { padding: 16px; border-radius: 16px; color: #fff; font-weight: 800; font-size: 18px; text-align: center; margin-bottom: 10px; }
.round.red { background: #d32f2f; }
.round.gold { background: #c9a227; color: #1a1400; }
.round.green { background: #1b8a32; }
.round.blue { background: #1565c0; }
.corner {
  position: sticky; bottom: 90px; margin-left: auto; width: fit-content;
  background: #fff; border: 3px solid var(--blue); border-radius: 16px; padding: 10px 12px;
  box-shadow: var(--shadow); font-weight: 800; text-align: right;
}
.big { font-size: 28px; }
.check-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.check-row input { width: auto; }
.footer { display: none; }
.pts .fav span { background: #fff3e0; box-shadow: inset 0 0 0 3px #c9a227; min-width: 72px; font-size: 24px; }
.pts .fav input:checked + span { background: #c9a227; color: #1a1400; }
.counts { display: flex; justify-content: space-between; gap: 6px; font-weight: 800; font-size: 18px; padding: 8px 4px 10px; }
.pts-sum { color: var(--blue-dark); }
.round.slim { font-size: 15px; padding: 10px; margin: 0 0 8px; }
.work-form { background: #fff; border-radius: 16px; padding: 12px; box-shadow: var(--shadow); }
.other { margin: 10px 0; font-size: 20px; }
.cust.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.cust.row3 label { flex-direction: column; text-align: center; padding: 10px 4px; font-size: 13px; gap: 4px; }
.cust.row3 small { font-size: 11px; line-height: 1.2; }
.row-save {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "cam save";
  gap: 8px; align-items: center; margin-top: 10px;
}
.row-save .cam-btn { grid-area: cam; }
.row-save .btn { grid-area: save; }
.photo-mini { margin: 0; font-size: 12px; width: 88px; padding: 8px; background: #e3f2fd; border-radius: 12px; text-align: center; }
.photo-mini input { font-size: 11px; padding: 4px; }
.cam-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin: 0; padding: 0;
  background: #1565c0; color: #fff; border-radius: 50%;
  box-shadow: 0 4px 12px rgba(21,101,192,.35); overflow: hidden; flex: 0 0 56px;
}
.cam-btn.big { width: 72px; height: 72px; flex-basis: 72px; }
.cam-btn svg { width: 28px; height: 28px; pointer-events: none; }
.cam-btn.big svg { width: 34px; height: 34px; }
.cam-btn input[type=file] {
  position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; cursor: pointer; font-size: 0; border: 0;
}
.hist-link { display: block; text-align: center; font-weight: 800; margin: 12px 0 0; }
@media (max-width: 420px) {
  body.has-user .top { margin: 8px 8px 0; border-radius: 22px; padding: 4px 2px 12px; }
  .top-hello .hi { font-size: 22px; }
  .wrap { padding: 8px 10px 24px; }
  .pts-big { font-size: 32px; }
  .mix-3 { gap: 6px; }
  .mix-card { padding: 10px 8px; border-radius: 16px; gap: 6px; }
  .mix-card .ic { font-size: 18px; }
  .mix-card b { font-size: 20px; }
  .mix-card small { font-size: 10px; }
  .mix-3 { gap: 6px; }
  .ico-grid { gap: 6px; }
  .ico-grid a { flex-basis: calc(25% - 6px); min-height: 64px; padding: 8px 2px 6px; font-size: 10px; }
  .ico-grid .material-symbols-outlined { font-size: 22px; }
  .grid.kpi { grid-template-columns: 1fr 1fr; }
  .kpi-tile .big { font-size: 26px; }
  .dock a { font-size: 10px; padding: 8px 2px; min-height: 48px; }
  .pts label span { min-width: 52px; font-size: 20px; }
  .emp-form { grid-template-columns: 1fr; grid-template-areas: "fields" "side"; }
  .emp-fields { grid-template-columns: 1fr; }
  .edit-staff { grid-template-columns: 1fr; }
}
.bar-row { margin: 8px 0 12px; font-weight: 800; }
.bar { height: 14px; background: #e3f2fd; border-radius: 8px; overflow: hidden; margin-top: 4px; }
.bar i { display: block; height: 100%; }
.chart { display: flex; align-items: flex-end; gap: 3px; height: 150px; overflow-x: auto; padding-bottom: 4px; }
.chart .col { flex: 1; min-width: 18px; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; }
.chart .stack { display: flex; flex-direction: column-reverse; width: 100%; border-radius: 6px 6px 2px 2px; overflow: hidden; min-height: 4px; }
.chart .stack b { display: block; min-height: 0; }
.chart .d { font-size: 9px; text-align: center; color: var(--muted); margin-top: 4px; }
.chatbox { max-height: 52vh; overflow-y: auto; padding: 8px 0; }
.bubble { background: #fff; border-radius: 16px; padding: 10px 12px; margin: 8px 40px 8px 0; box-shadow: var(--shadow); }
.bubble.mine { background: #e3f2fd; margin: 8px 0 8px 40px; }
.bubble span { color: var(--muted); font-size: 12px; font-weight: 600; }
.chat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "text send";
  gap: 8px; align-items: center;
}
.chat-form input { grid-area: text; }
.chat-form button { grid-area: send; }
.chat-form input { margin: 0; }
.emp-form { display: grid; grid-template-columns: 1fr 88px; grid-template-areas: "fields side"; gap: 12px; align-items: start; }
.emp-fields { grid-area: fields; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.emp-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.emp-fields input, .emp-fields select { width: 100%; margin: 0; }
.emp-fields .check-row { grid-column: 1 / -1; }
.emp-side { grid-area: side; display: grid; gap: 10px; justify-items: center; }
.emp-row { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.emp-head { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-start; justify-content: space-between; }
.emp-info { display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: center; min-width: 0; flex: 1 1 160px; }
.emp-meta { min-width: 0; }
.emp-meta strong { display: block; overflow-wrap: anywhere; }
.emp-info img, .emp-info .avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: #e3f2fd; flex-shrink: 0; }
.emp-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; flex: 1 1 180px; }
.emp-acts form { margin: 0; }
.emp-acts .btn, .emp-acts button { width: auto; padding: 8px 10px; font-size: 13px; white-space: nowrap; }
.emp-edit { width: 100%; background: #f7fbff; border: 1px solid var(--line); border-radius: 16px; padding: 8px 10px 12px; }
.emp-edit > summary { list-style: none; font-weight: 800; color: var(--blue); padding: 8px 4px; cursor: pointer; }
.emp-edit > summary::-webkit-details-marker { display: none; }
.edit-staff { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; align-items: end; margin-top: 8px; }
.edit-staff label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); min-width: 0; }
.edit-staff input, .edit-staff select { width: 100%; margin: 0; padding: 10px; font-size: 15px; }
.edit-staff .cam-btn { grid-column: 1 / -1; justify-self: start; }
.edit-staff .check-row { grid-column: 1 / -1; margin: 0; }
.edit-staff .emp-save { grid-column: 1 / -1; }
.confirm-board { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 88px; }
.confirm-col { min-width: 0; }
.ticket {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  grid-template-areas:
    "ava who pts"
    "typ typ time"
    "inp btn btn";
  align-items: center;
  gap: 8px 10px;
  border-radius: 18px;
  padding: 12px;
  margin: 0;
  border: 1px solid #e8f0f8;
  border-left: 8px solid var(--staff, #1565c0);
  box-shadow: 0 8px 20px rgba(21,101,192,.08);
}
.ticket .face, .ticket .avatar {
  grid-area: ava; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block;
}
.ticket .t-who { grid-area: who; }
.ticket .tile-pts { grid-area: pts; }
.ticket .t-type { grid-area: typ; }
.ticket .t-time { grid-area: time; }
.ticket .js-pts { grid-area: inp; }
.ticket .btn-ok { grid-area: btn; width: 100%; }
.ticket .t-who { min-width: 0; }
.ticket .t-who strong { display: block; font-size: 16px; line-height: 1.2; }
.ticket .t-who span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.ticket .tile-pts { font-size: 34px; font-weight: 900; color: var(--blue-dark); line-height: 1; margin: 0; }
.ticket .t-type { font-weight: 800; font-size: 14px; }
.ticket .t-time { display: flex; align-items: center; gap: 4px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.ticket .t-time .material-symbols-outlined { font-size: 18px; }
.ticket .js-pts { width: 64px; margin: 0; padding: 8px 6px; text-align: center; font-weight: 800; }
.btn-ok { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 0; padding: 12px 14px; white-space: nowrap; }
.btn-ok .material-symbols-outlined { font-size: 22px; }
.door-fab-form { margin: 0; }
.door-fab {
  position: fixed;
  right: calc(14px + env(safe-area-inset-right));
  bottom: calc(96px + env(safe-area-inset-bottom));
  z-index: 45;
  width: 56px; height: 56px; border: 0; border-radius: 18px;
  background: #1565c0; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(21,101,192,.35);
  cursor: pointer;
}
.door-fab .material-symbols-outlined { font-size: 30px; }
.door-fab.locked { background: #90a4ae; cursor: default; box-shadow: none; }
.door-open { position: fixed; right: 14px; bottom: 160px; z-index: 45; }
@media (min-width: 981px) {
  .ticket {
    grid-template-columns: 48px minmax(88px,1.3fr) auto minmax(70px,1fr) auto 64px auto;
    grid-template-areas: none;
  }
  .ticket .face, .ticket .avatar { width: 48px; height: 48px; grid-area: auto; }
  .ticket .t-who, .ticket .tile-pts, .ticket .t-type, .ticket .t-time, .ticket .js-pts, .ticket .btn-ok { grid-area: auto; }
  .ticket .btn-ok { width: auto; }
}
img, video { max-width: 100%; height: auto; }
@media (min-width: 600px) {
  .grid.kpi { grid-template-columns: 1fr 1fr 1fr; }
  .wrap { max-width: 720px; }
  h1, h2 { font-size: 26px; }
  body { font-size: 18px; }
  .btn, button.btn { min-height: 52px; padding: 16px 18px; }
  .pts span { min-height: 52px; min-width: 52px; }
  .chip { min-height: 48px; padding: 12px 18px; }
  .cust label { min-height: 52px; }
  .nav a { min-height: 48px; padding: 12px 16px; }
}
@media (min-width: 900px) {
  .dash-shell,
  .dash-shell.dash-v2 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "hero"
      "kpi"
      "mix"
      "go"
      "team"
      "wait"
      "live";
  }
  .nav { display: flex; gap: 8px; flex-wrap: wrap; padding: 8px 12px 12px; }
  .dock { display: none; }
  body { padding-bottom: 0; }
  .wrap { max-width: 1080px; }
  .grid.kpi { grid-template-columns: repeat(6, 1fr); }
  .door-fab { bottom: 22px; }
  .door-open { bottom: 86px; }
}
@media (min-width: 1200px) {
  .wrap { max-width: 1200px; }
}
@container dash (min-width: 700px) {
  .dash-shell,
  .dash-shell.dash-v2 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "hero"
      "kpi"
      "mix"
      "go"
      "team"
      "wait"
      "live";
  }
  .grid.kpi { grid-template-columns: repeat(3, 1fr); }
}
@container dash (min-width: 1000px) {
  .grid.kpi { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 900px) {
  .confirm-board { max-width: 100%; }
}
.tile-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 14px 0 24px; }
.tile {
  background: #fff; border-radius: 20px; padding: 16px;
  box-shadow: var(--shadow); border: 1px solid #e8f0f8;
}
.tile.wait { border-top: 5px solid var(--gold); }
.tile.ok { border-top: 5px solid var(--green); }
.tile-pts { font-size: 42px; font-weight: 900; color: var(--blue-dark); line-height: 1.1; }
.mix-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 10px 0; }
.mix-cell { text-align: center; background: #fff; border-radius: 12px; padding: 8px 4px; }
.mix-cell .ic { font-size: 22px; display: block; }
.mix-cell .n { font-size: 28px; font-weight: 900; line-height: 1.1; }
.mix-cell .lab { font-size: 11px; color: var(--muted); font-weight: 700; }
.rate-form { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.rate-form input { width: 72px; margin: 0; font-size: 22px; font-weight: 800; text-align: center; }
.rate-form .btn { margin: 0; padding: 10px 12px; }
.tile strong { display: block; margin: 6px 0 4px; }
.day-bar { display: flex; gap: 8px; align-items: center; margin: 8px 0 12px; }
.day-bar input { width: auto; flex: 1; }
@media (min-width: 600px) {
  .tile-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .tile-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 14px; }
.chip { border: 2px solid var(--line); background: #fff; border-radius: 999px; padding: 12px 16px; font-weight: 800; cursor: pointer; min-height: 44px; }
.chip.on { background: #e3f2fd; border-color: var(--blue); }
.pay-tile { color: inherit; text-decoration: none; display: block; }
.pay-facts { display: flex; gap: 10px; flex-wrap: wrap; font-weight: 800; margin: 8px 0; }
.today-n { font-size: 72px; font-weight: 900; color: #d32f2f; text-align: center; line-height: 1; margin: 8px 0 0; }
.today-lab { text-align: center; color: #d32f2f; font-weight: 800; font-size: 20px; margin: 4px 0 12px; }
.staff-who { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.staff-who .face { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 40px; }
.del-cust { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.del-cust input { flex: 1; margin: 0; }
.btn.trash { display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; }
.material-symbols-outlined {
  font-size: 22px;
  vertical-align: middle;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  color: inherit;
  user-select: none;
}
.btn.green .material-symbols-outlined { color: #fff; font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24; }
.btn.red .material-symbols-outlined { color: #fff; font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24; font-size: 24px; }
.nav a .material-symbols-outlined { color: #0d47a1; font-size: 18px; }
.ico-lg { font-size: 32px; color: var(--blue); }
.hist-who{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.hist-who strong{flex:1;font-size:1.05rem}.hist-time{font-size:1.45rem;font-weight:800;margin-left:auto}.hist-kunde{font-size:1.15rem;font-weight:800;margin:4px 0}
.luck-vi{background:#e8f5e9;border:2px solid #2e7d32;font-size:1.15rem;font-weight:700;line-height:1.35;margin:8px 0 12px}

body.noshot{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.noshot input,body.noshot textarea,body.noshot [contenteditable]{-webkit-user-select:text;user-select:text}
.wm{position:fixed;inset:0;pointer-events:none;z-index:40;background-repeat:repeat;background-size:480px 280px;opacity:.9}
.wm-bar{position:fixed;left:0;right:0;bottom:calc(52px + env(safe-area-inset-bottom));pointer-events:none;z-index:19;text-align:center;font-size:10px;font-weight:600;letter-spacing:.02em;color:rgba(13,71,161,.22);background:transparent;padding:2px 8px}
body.noshot-hide .wrap,body.noshot-hide header,body.noshot-hide nav{filter:blur(18px);opacity:.15}
@media print{body{display:none!important}}
img{-webkit-user-drag:none}


.who-grid{display:flex;flex-wrap:wrap;gap:8px}
.who-tile{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:12px;font-weight:800;min-width:42%}
.who-tile.on{background:#c8e6c9;color:#1b5e20}
.who-tile.off{background:#ffcdd2;color:#b71c1c}
.who-tile .face,.who-tile .avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:0 0 28px}

.dash-hello { padding: 6px 4px 10px; }
.hello-hi { font-size: 26px; font-weight: 800; color: var(--blue-dark); letter-spacing: -.02em; }
.hello-date { color: var(--muted); font-weight: 700; font-size: 14px; margin-top: 2px; }
.wait-banner {
  display: flex; align-items: center; gap: 10px;
  background: #fff4d6; color: #7a4e00; border-radius: 16px;
  padding: 14px 14px; font-weight: 800; text-decoration: none; margin: 4px 0 12px;
}
.wait-banner .material-symbols-outlined { color: #c9a227; }
.wait-go { margin-left: auto; color: #c9a227; white-space: nowrap; }
.pts-card { padding: 18px 16px 14px; }
.pts-big { font-size: 40px; font-weight: 800; color: var(--blue-dark); line-height: 1.1; }
.pts-bar { height: 8px; background: #e8eef5; border-radius: 99px; margin: 10px 0 12px; overflow: hidden; }
.pts-bar span { display: block; height: 100%; background: linear-gradient(90deg,#1565c0,#1b8a32); border-radius: 99px; }
.pts-depts { display: flex; flex-wrap: wrap; gap: 8px 12px; color: var(--muted); font-size: 13px; font-weight: 700; align-items: center; }
.pts-depts b { color: var(--text); }
.mix-3 { display: flex; flex-wrap: nowrap; gap: 10px; margin: 4px 0 14px; align-items: stretch; }
.mix-3 .mix-card { flex: 1 1 0; min-width: 0; }
.mix-card {
  background: #fff; border-radius: 20px; padding: 14px 12px;
  box-shadow: var(--shadow); border: 1px solid #e8f0f8;
  display: flex; gap: 10px; align-items: flex-start; min-width: 0;
}
.mix-card .ic { font-size: 22px; line-height: 1; flex: 0 0 auto; margin-top: 2px; }
.mix-card div { min-width: 0; }
.mix-card b { display: block; font-size: 26px; color: var(--blue-dark); line-height: 1.05; font-weight: 800; }
.mix-card small { display: block; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.25; margin-top: 2px; }
.ico-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.ico-grid a { flex: 1 1 calc(25% - 8px); max-width: calc(25% - 6px); box-sizing: border-box; }
.ico-grid a {
  background: #fff; border-radius: 16px; padding: 10px 4px 8px; text-align: center;
  box-shadow: var(--shadow); border: 1px solid #e8f0f8; color: var(--blue-dark);
  font-weight: 800; font-size: 11px; min-height: 72px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.ico-grid .material-symbols-outlined { font-size: 26px; color: var(--blue); }
.team-head { display: flex; justify-content: space-between; align-items: baseline; }
.team-head a { font-weight: 800; font-size: 14px; }
.team-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.team-row:last-child { border-bottom: 0; }
.team-row .face, .ini { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.ini { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 13px; }
.team-meta strong { display: block; font-size: 16px; }
.team-meta span { color: var(--muted); font-size: 12px; font-weight: 700; }
.team-pts { font-size: 22px; font-weight: 800; color: var(--blue-dark); }
.more-list { display: grid; gap: 8px; margin: 8px 0 16px; }
.more-item { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 14px; padding: 14px; font-weight: 800; box-shadow: var(--shadow); color: var(--blue-dark); }
.old-wait, [hidden].old-wait { display: none !important; }
@media (min-width: 900px) {
  .ico-grid a { flex-basis: calc(25% - 8px); }
}


.step { font-weight: 800; color: var(--blue-dark); margin: 12px 0 8px; font-size: 15px; }
.round.ok { background: #1b8a32; }
.round.waitc { background: #1565c0; }
.type-card input { position:absolute; opacity:0; pointer-events:none; width:0; height:0; }
.type-card {
  position: relative; cursor: pointer;
  border: 2px solid var(--line) !important;
  background: #fff;
}
.type-card .material-symbols-outlined { font-size: 28px; color: var(--blue); }
.type-card:has(input:checked) { border-color: var(--green) !important; background: #e8f5e9; }
.note-cam { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.note-cam .other { flex: 1; margin: 0; }
.cam-btn.sm { width: 44px; height: 44px; flex: 0 0 44px; box-shadow: none; }
.cam-btn.sm .material-symbols-outlined { font-size: 22px; color: #fff; }
.row-save { display: block; }

.hi-row { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; margin-top:6px; flex-wrap:wrap; }
.hi-pts { margin-top:0; flex:1; min-width:0; }
.hi-stats { display:flex; gap:6px; justify-content:flex-end; flex:0 0 auto; }
.hi-stat {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:40px; padding:4px 6px; border-radius:12px;
  background: rgba(255,255,255,.14); color:#fff;
}
.hi-stat .material-symbols-outlined { font-size:18px; color:#fff; line-height:1; }
.hi-stat b { font-size:16px; font-weight:800; line-height:1.15; }
.hi-stat small { font-size:9px; font-weight:700; opacity:.9; letter-spacing:.02em; }
@media (max-width: 420px) {
  .hi-stat { min-width:36px; padding:3px 4px; }
  .hi-stat b { font-size:14px; }
}

.staff-head { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.staff-head .sh-mid {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  align-items: flex-end; justify-content: space-between; gap: 6px;
  margin-top: 0;
}
.staff-head .dt-pts {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 1px;
  flex: 1 1 auto; min-width: 0;
}
.staff-head .hi { font-size: 20px; line-height: 1.1; }
.staff-head .hi-stats {
  flex: 0 0 auto; display: flex; flex-wrap: nowrap; gap: 3px; margin: 0; align-items: flex-end;
}
.staff-head .hi-stat { min-width: 32px; padding: 3px 4px; }
.hi-row { display: none; }

.pay-tile { position: relative; padding-top: 4px; }
.pay-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; }
.shop-box {
  position: static;
  display: flex; flex-direction: row; align-items: center;
  margin: 0; flex: 0 0 auto;
}
.shop-check {
  width: 32px; height: 32px; padding: 0; margin: 0;
  background: #fff; border: 2px solid #cfd8dc; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: none; cursor: pointer;
}
.shop-check .material-symbols-outlined { font-size: 22px; color: #fff; font-weight: 800; }
.shop-check.on { background: #1b8a32; border-color: #1b8a32; }
.shop-lab { font-size: 9px; font-weight: 800; color: #37474f; }
.clean-blink{animation:cblink 1s infinite;background:#fff3e0;border:2px solid #ef6c00;border-radius:16px;padding:12px 14px;margin:10px 0;display:block;color:#e65100;font-weight:800}
.smile-row .face, .smile-row .avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.smile-me{display:flex;align-items:center;gap:14px;padding:16px}
.smile-face{font-size:52px;line-height:1}
.smile-score{font-size:32px;font-weight:800;color:var(--blue-dark)}
.smile-lvl{font-weight:800}
.smile-lvl.gold{color:var(--gold)}
.smile-lvl.good{color:var(--green)}
.smile-lvl.warn,.smile-lvl.bad{color:var(--danger)}
.smile-row{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.smile-btns{display:flex;gap:6px}
.smile-btns button{width:44px;height:44px;border:2px solid var(--line);background:#fff;border-radius:14px;font-size:22px;cursor:pointer}
.smile-btns button.on.smile{border-color:var(--green);background:#e8f5e9}
.smile-btns button.on.ok{border-color:#90a4ae;background:#eceff1}
.smile-btns button.on.sad{border-color:var(--danger);background:#ffebee}
.smile-why{display:none;grid-column:1/-1;padding:8px 0 4px}
.smile-why.open{display:block}
.smile-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.smile-chips label{background:#e3f2fd;border-radius:999px;padding:6px 10px;font-weight:800;font-size:12px}
.smile-chips input{margin-right:4px}
.smile-rules{background:#fff8e1;border:1px solid #ffe082;border-radius:16px;padding:12px 14px;margin:10px 0}
.smile-rules li{margin:4px 0}
.smile-badge{display:inline-block;background:#e3f2fd;border-radius:999px;padding:2px 8px;font-size:11px;font-weight:800}
@keyframes cblink{0%,100%{opacity:1}50%{opacity:.45}}
.clean-card{background:#fff;border-radius:16px;padding:12px;margin:8px 0;box-shadow:0 2px 8px #0001}
.stars button{font-size:22px;background:none;border:0;cursor:pointer}
.rank-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #eee}
.clean-h1{display:flex;align-items:center;gap:8px;font-size:26px}
.clean-h1 .material-symbols-outlined{font-size:30px;color:#1565c0}
.clean-podium{display:flex;gap:8px;margin:10px 0}
.pod{flex:1;border-radius:16px;padding:12px;text-align:center}
.pod.gold{background:linear-gradient(180deg,#fff8e1,#ffe082);border:2px solid #ffb300}
.pod.gray{background:#eceff1;border:2px solid #b0bec5}
.pod .cup{font-size:36px;color:#f9a825}
.pod-lab{font-size:11px;font-weight:800;text-transform:uppercase;color:#5d4037}
.pod-who{font-size:16px;font-weight:800;margin:4px 0}
.pod-pts{font-size:18px}
.clean-card.is-today{border:2px solid #1565c0;background:#e3f2fd}
.clean-card.is-win{border-color:#f9a825;background:#fffde7}
.clean-when{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.clean-when .wd{background:#1565c0;color:#fff;border-radius:8px;padding:2px 8px;font-weight:800;font-size:13px}
.clean-when .wf{font-weight:800;font-size:16px}
.clean-when .dt{color:#546e7a;font-weight:700}
.clean-when .now{background:#e53935;color:#fff;border-radius:8px;padding:2px 8px;font-size:11px;font-weight:800}
.clean-who{font-size:22px;font-weight:800;margin:6px 0 2px;line-height:1.2}
.oktick{color:#2e7d32}
.clean-score{font-size:18px;font-weight:800;color:#f9a825;display:flex;align-items:center;gap:4px}
.stars.play{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.stars.play button{font-size:13px;font-weight:800;background:#fff8e1;border:1px solid #ffe082;border-radius:12px;padding:8px 10px}
.rank-row{display:flex;align-items:center;gap:8px;padding:10px;border-radius:12px;margin:6px 0}
.rank-row.r1{background:linear-gradient(90deg,#fff8e1,#ffe082)}
.rank-row.r2{background:#eceff1}
.rank-row.r3{background:#efebe9}
.rank-row.rlose{background:#ffebee}
.rk{display:flex;align-items:center;gap:4px;font-weight:800;min-width:48px}
.rn{flex:1;font-weight:700}
.fb-ask{font-weight:800;margin:8px 0 4px;color:#1565c0}
.star-row{display:flex;gap:6px;margin:4px 0 8px}
.star-row button{flex:1;min-height:56px;border-radius:14px;border:2px solid #ffe082;background:#fffde7;font-size:22px;font-weight:800;display:flex;flex-direction:column;align-items:center;justify-content:center}
.star-row button small{font-size:11px;color:#5d4037}
.star-row button.on{background:#ffecb3;border-color:#ff8f00;box-shadow:0 0 0 2px #ffcc80}
.chip-row{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.chip-form{display:inline}
.chip{background:#e3f2fd;border:0;border-radius:999px;padding:8px 12px;font-weight:700;font-size:13px}
.cam-fat{display:flex;align-items:center;justify-content:center;gap:8px;background:#eceff1;border-radius:14px;padding:12px;font-weight:800;margin-top:6px}
.cam-fat input{display:none}

.vani-mic{position:fixed;right:14px;bottom:92px;z-index:40;width:64px;height:64px;border-radius:50%;border:0;background:#1565c0;color:#fff;box-shadow:0 6px 16px #0003;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800}
.vani-mic .material-symbols-outlined{font-size:28px}
.vani-mic small{font-size:10px;margin-top:-2px}
.vani-mic.on{background:#c62828;animation:cblink 1s infinite}
.vani-line{font-size:13px;color:#1565c0;font-weight:700;margin:8px 4px 18px;min-height:18px}

.vani-slot{display:flex;flex-direction:column;align-items:center;gap:1px}
.vani-logo{width:36px;height:36px;object-fit:cover;border-radius:8px;display:block}
.vani-slot small{font-size:9px;font-weight:700;letter-spacing:.04em;line-height:1;color:#fff}
body:not(.has-user) .vani-slot small{color:#1565c0}

body.has-user .top.slim{margin:8px 10px 0;padding:6px 8px 8px;border-radius:18px}
body.has-user .top.slim .top-inner{display:none}
.staff-head .sh-mid{align-items:center}
.vani-slot.mid{flex:0 0 auto;margin:0 4px}
.vani-slot.mid .vani-logo{width:28px;height:28px;border-radius:7px}
.vani-slot.mid small{font-size:8px;opacity:.9}
.staff-head .hi{font-size:16px}
.staff-head .dt,.staff-head .hi-pts{font-size:11px}