/* [project]/app/globals.css [app-client] (css) */
@font-face {
  font-family: Open Sans Condensed;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/osc-300.woff2") format("woff2");
}

@font-face {
  font-family: Open Sans Condensed;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/osc-700.woff2") format("woff2");
}

@font-face {
  font-family: Open Sans;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/os-400.woff2") format("woff2");
}

@font-face {
  font-family: Open Sans;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/os-600.woff2") format("woff2");
}

@font-face {
  font-family: Open Sans;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/os-700.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter/latin.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter/latin-ext.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Noto Sans Arabic;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/noto-sans-arabic/arabic.woff2?v=2") format("woff2");
  unicode-range: U+6??, U+750-77F, U+870-88E, U+890-891, U+898-8E1, U+8E3-8FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: Noto Sans Arabic;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/noto-sans-arabic/latin.woff2?v=2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Noto Sans Arabic;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/noto-sans-arabic/latin-ext.woff2?v=2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Noto Sans Arabic;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/noto-sans-arabic/combining.woff2?v=2") format("woff2");
  unicode-range: U+300-36F, U+1AB0-1AFF, U+1DC0-1DFF, U+20D0-20FF, U+FE2?;
}

@font-face {
  font-family: Noto Sans Arabic;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/noto-sans-arabic/symbols.woff2?v=2") format("woff2");
  unicode-range: U+2190-21FF, U+22??, U+23??, U+25??, U+26??;
}

html[lang="ar"] {
  --sans: "Noto Sans Arabic", "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

html[lang="ar"], html[lang="ar"] :not(code):not(pre):not(kbd):not(samp):not(.mono) {
  letter-spacing: normal !important;
  font-family: Noto Sans Arabic, Segoe UI, ui-sans-serif, system-ui, -apple-system, sans-serif !important;
}

:root {
  --sans-ar: "Noto Sans Arabic";
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #fff;
  --bg-subtle: #f8fafc;
  --bg-muted: #f1f5f9;
  --fg: #0f172a;
  --fg-secondary: #475569;
  --fg-muted: #94a3b8;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-subtle: #eff6ff;
  --accent-fg: #fff;
  --destructive: #dc2626;
  --destructive-subtle: #fef2f2;
  --success: #16a34a;
  --success-subtle: #f0fdf4;
  --warning: #d97706;
  --warning-subtle: #fffbeb;
  --radius: 9px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px #0f172a0a, 0 1px 3px #0f172a0f;
  --shadow-md: 0 2px 4px #0f172a0a, 0 6px 16px -4px #0f172a1a;
  --shadow-lg: 0 4px 8px #0f172a0a, 0 16px 40px -8px #0f172a24;
  --ring: 0 0 0 3px #2563eb29;
  --err: var(--destructive);
  --txt-dim: var(--fg-secondary);
  --sans: "Inter", "Noto Sans Arabic", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html, body {
  height: 100%;
}

body {
  font-family: var(--sans);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

button {
  font-family: inherit;
}

button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

::selection {
  background: var(--accent-subtle);
  color: var(--accent-hover);
}

h1, h2, h3 {
  font-weight: 600;
}

.kiosk {
  background: var(--bg);
  flex-direction: column;
  min-height: 100vh;
  padding: 44px 60px;
  display: flex;
  position: relative;
}

.title {
  letter-spacing: -.02em;
  color: var(--fg);
  margin-bottom: 6px;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
}

.title:after {
  content: "";
  background: var(--accent);
  border-radius: 999px;
  width: 40px;
  height: 3px;
  margin-top: 14px;
  margin-bottom: 28px;
  display: block;
}

.home {
  background: #0a0a0a;
  flex-direction: column;
  min-height: 100vh;
  display: flex;
}

.flags {
  z-index: 2;
  background: #0a0a0a;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  padding: 16px 32px;
  display: flex;
  position: relative;
}

.brand {
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-secondary);
  margin-right: auto;
  font-size: 15px;
  font-weight: 600;
}

.brand b {
  color: var(--accent);
  font-weight: 600;
}

.flag {
  cursor: pointer;
  opacity: .55;
  background: #ffffff0d;
  border: 0;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  line-height: 1;
  transition: opacity .15s, transform .15s;
  display: flex;
  overflow: hidden;
}

.flag img {
  opacity: 0;
  transition: opacity .25s;
}

.flag img.ready {
  opacity: 1;
}

.flag:hover {
  opacity: .9;
  transform: translateY(-2px);
}

.flag.sel {
  opacity: 1;
  transform: translateY(-2px);
}

.flag img {
  object-fit: cover;
  border-radius: 999px;
  width: 100%;
  height: 100%;
  display: block;
}

.halves {
  flex: 1;
  gap: 3px;
  padding: 0;
  display: flex;
}

.half {
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: inherit;
  appearance: none;
  background: #0a0a0a;
  border: 0;
  border-radius: 0;
  flex: 1;
  align-items: flex-end;
  width: 100%;
  padding: 7% 6%;
  transition: filter .25s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.half:hover {
  filter: brightness(1.06);
  box-shadow: var(--shadow-md);
}

.half:before {
  content: "";
  position: absolute;
  inset: 0;
}

.half:after {
  content: "";
  background: #2563eb00;
  transition: background .2s;
  position: absolute;
  inset: 0;
}

.half:active:after {
  background: #2563eb2e;
}

.half.book:before {
  background: linear-gradient(#0f172a14 30%, #0f172ac7 100%), url("/img/booking-cedar.jpg") center / cover no-repeat;
}

.half.mybook:before {
  background: linear-gradient(#0f172a14 30%, #0f172ac7 100%), url("/img/my-bookings.jpg") center / cover no-repeat;
}

.halftitle {
  z-index: 1;
  letter-spacing: -.02em;
  color: #fff;
  text-shadow: 0 1px 12px #0f172a59;
  max-width: 6em;
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 600;
  line-height: 1.15;
  position: relative;
}

.halftitle .sub {
  letter-spacing: 0;
  text-transform: none;
  color: #ffffffe0;
  margin-top: 12px;
  font-family: Open Sans, sans-serif;
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 400;
  display: block;
}

.dash {
  border-top: 3px solid #fff;
  border-radius: 999px;
  width: 40px;
  margin-bottom: 18px;
  display: block;
}

.grid {
  flex: 1;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-content: start;
  gap: 20px;
  display: grid;
}

.card {
  cursor: pointer;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  flex-direction: column;
  transition: transform .2s, border-color .2s, box-shadow .2s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.cardvisual {
  background-position: center;
  background-size: cover;
  flex-shrink: 0;
  height: 200px;
  position: relative;
  overflow: hidden;
}

.cardvisual.art {
  background-image: var(--card-art);
}

.cardvisual.logo {
  background: radial-gradient(120% 90% at 50% -20%, #1e2a4a 0%, #0000 60%), radial-gradient(100% 60% at 50% 115%, #2563eb38 0%, #0000 60%), #0b0f1a;
}

.cardvisual.logo:after {
  content: "";
  pointer-events: none;
  background: radial-gradient(130% 100% at 50% 45%, #0000 60%, #00000059 100%);
  position: absolute;
  inset: 0;
}

.cardvisual .cardlogo {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform .4s;
  display: block;
}

.card:hover .cardlogo {
  transform: scale(1.04);
}

.cardvisual .cardletter {
  color: #0f172a2e;
  justify-content: center;
  align-items: center;
  font-size: 72px;
  font-weight: 600;
  line-height: 1;
  display: flex;
  position: absolute;
  inset: 0;
}

.cardplaque {
  text-align: start;
  background: var(--bg);
  border-top: 1px solid var(--border);
  flex-direction: column;
  flex: 1;
  align-items: stretch;
  gap: 7px;
  padding: 15px 16px 16px;
  display: flex;
  position: relative;
}

.cardhead {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.cardgo {
  bottom: 14px;
  background: var(--accent-subtle);
  width: 32px;
  height: 32px;
  color: var(--accent);
  opacity: 0;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  transition: opacity .18s, transform .18s;
  display: flex;
  position: absolute;
  inset-inline-end: 14px;
  transform: translateX(-6px);
}

.card:hover .cardgo {
  opacity: 1;
  transform: translateX(0);
}

[dir="rtl"] .cardgo svg {
  transform: scaleX(-1);
}

.card .band {
  letter-spacing: -.01em;
  color: var(--fg);
  font-size: 18px;
  font-weight: 600;
}

.card .cuisine {
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent);
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  display: inline-flex;
}

.carddesc {
  color: var(--fg-secondary);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  padding-inline-end: 40px;
  font-size: 13.5px;
  line-height: 1.55;
  display: -webkit-box;
  overflow: hidden;
}

.row {
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 44px;
  margin-bottom: 28px;
  padding-bottom: 28px;
  display: flex;
}

.row:last-of-type {
  border-bottom: none;
  margin-bottom: 20px;
}

.label {
  letter-spacing: -.01em;
  min-width: 190px;
  color: var(--fg);
  padding-top: 6px;
  font-size: 20px;
  font-weight: 600;
}

.daycols {
  display: flex;
}

.daycol {
  text-align: center;
  border-right: 1px solid var(--border);
  padding: 0 28px;
}

.daycol:last-child {
  border-right: none;
}

.daycol .dow {
  letter-spacing: .06em;
  color: var(--fg-muted);
  font-size: 13px;
  font-weight: 500;
}

.daycol .dom {
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  margin: 4px 0 2px;
  font-size: 38px;
  font-weight: 600;
}

.daycol .mon {
  letter-spacing: .06em;
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
}

.slotbtn {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 100%;
  color: var(--fg);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  margin-top: 10px;
  padding: 12px 20px;
  font-size: 18px;
  font-weight: 500;
  transition: border-color .15s, background .15s, color .15s;
  display: block;
}

.slotbtn:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
}

.slotbtn:disabled {
  color: var(--fg-muted);
  border-color: var(--border);
  background: var(--bg-subtle);
  cursor: not-allowed;
  text-decoration: line-through;
}

.slotbtn.sel {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle);
}

.slotarea {
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  display: block;
}

.chips {
  flex-wrap: wrap;
  gap: 12px;
  display: flex;
}

.chip {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  border-radius: var(--radius-lg);
  cursor: pointer;
  min-width: 138px;
  box-shadow: var(--shadow-sm);
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 22px;
  font-size: 15px;
  font-weight: 500;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
  display: flex;
}

.chip:hover {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
  box-shadow: var(--shadow-md);
}

.chip.sel {
  border-color: var(--accent);
  background: var(--accent-subtle);
  color: var(--accent);
}

.chip.small {
  min-width: 100px;
  padding: 13px 16px;
  font-size: 13px;
}

.stepper {
  align-items: center;
  gap: 20px;
  display: flex;
}

.stepper button {
  background: var(--bg);
  width: 56px;
  height: 56px;
  color: var(--fg);
  border: 1px solid var(--border);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  transition: border-color .15s, background .15s, color .15s;
  display: inline-flex;
}

.stepper button:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle);
}

.stepper span {
  text-align: center;
  font-variant-numeric: tabular-nums;
  min-width: 48px;
  font-size: 34px;
  font-weight: 600;
}

.bottom {
  justify-content: flex-end;
  align-items: center;
  margin-top: auto;
  padding-top: 32px;
  display: flex;
}

.back {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
  cursor: pointer;
  width: 72px;
  height: 72px;
  box-shadow: var(--shadow-sm);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  line-height: 1;
  transition: border-color .15s, background .15s, color .15s, transform .12s;
  display: inline-flex;
}

.back:active {
  transform: scale(.94);
}

.back:hover {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
}

.reserve {
  background: var(--accent);
  color: var(--accent-fg);
  border: 1px solid var(--accent);
  letter-spacing: .01em;
  cursor: pointer;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 14px 36px;
  font-size: 16px;
  font-weight: 600;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .12s;
  display: inline-flex;
  box-shadow: 0 1px 2px #0f172a14, inset 0 1px #ffffff1f;
}

.reserve:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #2563eb47;
}

.reserve:active:not(:disabled) {
  box-shadow: var(--shadow-sm);
  transform: translateY(0)scale(.985);
}

.reserve:disabled {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
}

.change {
  color: var(--accent);
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 1px solid #0000;
  align-items: center;
  gap: 6px;
  padding-bottom: 2px;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
}

.change:hover {
  border-bottom-color: var(--accent);
}

.note {
  color: var(--fg-secondary);
  margin-top: 10px;
  font-size: 14px;
}

.error {
  color: var(--destructive);
  margin-top: 16px;
  font-size: 15px;
}

.idgrid {
  grid-template-columns: 1fr 1.15fr;
  align-items: start;
  gap: 56px;
  display: grid;
}

.idfield {
  margin-bottom: 36px;
}

.idlabel {
  letter-spacing: .02em;
  color: var(--fg-secondary);
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
}

.idlabel svg {
  color: var(--fg-muted);
}

.idbox {
  border: 1px solid var(--border);
  background: var(--bg);
  width: 330px;
  min-height: 68px;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-sm);
  border-radius: 10px;
  align-items: center;
  padding: 0 20px;
  font-size: 28px;
  font-weight: 600;
  transition: border-color .15s, box-shadow .15s;
  display: flex;
}

.idbox:hover {
  border-color: var(--border-strong);
}

.idsummary {
  letter-spacing: -.01em;
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.5;
}

.keypad {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 560px;
  display: grid;
}

.keypad button {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  font-variant-numeric: tabular-nums;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  padding: 18px 0;
  font-size: 28px;
  font-weight: 500;
  transition: border-color .12s, background .12s, transform .12s;
  display: flex;
}

.keypad button:hover {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
}

.keypad button:active {
  background: var(--bg-muted);
  transform: scale(.98);
}

.calwrap {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: fit-content;
  box-shadow: var(--shadow-md);
  --rdp-accent-color: var(--accent);
  --rdp-accent-background-color: var(--accent-subtle);
  --rdp-today-color: var(--accent);
  --rdp-selected-border: 2px solid var(--accent);
  --rdp-day-height: 46px;
  --rdp-day-width: 46px;
  --rdp-day_button-height: 42px;
  --rdp-day_button-width: 42px;
  color: var(--fg);
  margin-top: 14px;
  padding: 16px;
  font-size: 15px;
}

.calwrap .rdp-chevron {
  fill: var(--fg-secondary);
}

.calwrap .rdp-selected .rdp-day_button {
  background: var(--accent);
  color: var(--accent-fg);
  border-radius: 8px;
}

.calwrap.id2cal {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: #fff;
  --rdp-selected-border: 0;
  --rdp-today-color: #fff;
  --rdp-accent-color: #fff;
  --rdp-accent-background-color: #ffffff24;
  --rdp-day-height: 40px;
  --rdp-day-width: 40px;
  --rdp-day_button-height: 36px;
  --rdp-day_button-width: 36px;
  width: min(88vw, var(--cal-w));
  background: #ffffff24;
  border: 1px solid #fff3;
  padding: 14px;
  font-size: 14px;
  box-shadow: 0 24px 60px #00000080;
}

.calwrap.id2cal .rdp-month_caption {
  justify-content: center;
  position: relative;
}

.calwrap.id2cal .rdp-month_caption, .calwrap.id2cal .rdp-caption_label {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
}

.calwrap.id2cal .rdp-nav {
  z-index: 3;
  pointer-events: none;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 4px;
  display: flex;
  position: absolute;
  inset: 0;
}

.calwrap.id2cal .rdp-button_previous, .calwrap.id2cal .rdp-button_next {
  pointer-events: auto;
  position: static;
}

.calwrap.id2cal .rdp-caption_label {
  pointer-events: none;
}

.calwrap.id2cal .rdp-weekday {
  color: #ffffffb3;
  font-size: 15px;
  font-weight: 700;
}

.calwrap.id2cal .rdp-day_button {
  color: #fff;
  border-radius: 10px;
  font-weight: 700;
}

.calwrap.id2cal .rdp-chevron {
  fill: #ffffffd9;
}

.calwrap.id2cal .rdp-button_previous:hover .rdp-chevron, .calwrap.id2cal .rdp-button_next:hover .rdp-chevron {
  fill: #fff;
}

.calwrap.id2cal .rdp-today:not(.rdp-selected) .rdp-day_button {
  color: #fff;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px #ffffff73;
}

.calwrap.id2cal .rdp-selected .rdp-day_button, .calwrap.id2cal .rdp-selected .rdp-day_button:hover {
  font-weight: 700;
  color: #0f172a !important;
  background: #fff !important;
  border: 0 !important;
}

.calwrap.id2cal .rdp-disabled {
  opacity: .3;
}

.confirm {
  text-align: center;
  margin: auto;
}

.confirm .check {
  border: 1px solid var(--success);
  width: 112px;
  height: 112px;
  color: var(--success);
  background: var(--success-subtle);
  box-shadow: 0 0 0 8px var(--success-subtle);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  margin: 0 auto 28px;
  display: flex;
}

.confirm .big {
  letter-spacing: -.02em;
  margin-bottom: 16px;
  font-size: 34px;
  font-weight: 600;
}

.confirm .sub {
  color: var(--fg-secondary);
  font-size: 17px;
  line-height: 1.8;
}

.badge {
  border: 1px solid var(--border);
  color: var(--accent);
  background: var(--accent-subtle);
  border-radius: 999px;
  margin-top: 24px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  display: inline-block;
}

.paxstep {
  align-items: center;
  gap: 18px;
  display: inline-flex;
}

.paxstep .paxbtn {
  cursor: pointer;
  color: #fff;
  background: #ffffff1f;
  border: 1px solid #ffffff4d;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  transition: background .15s, transform .12s;
  display: inline-flex;
}

.paxstep .paxbtn:hover:not(:disabled) {
  background: #fff3;
}

.paxstep .paxbtn:active:not(:disabled) {
  transform: scale(.94);
}

.paxstep .paxbtn:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.confirm2 {
  text-align: center;
  color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 48px 24px;
  display: flex;
  position: relative;
}

.confirm2 .c2card {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background: #ffffff1a;
  border: 1px solid #ffffff2e;
  border-radius: 24px;
  width: min(560px, 94vw);
  padding: 40px 36px 32px;
  animation: .5s cubic-bezier(.2, .8, .2, 1) both c2rise;
  box-shadow: 0 30px 80px #00000073;
}

@keyframes c2rise {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.confirm2 .c2check {
  color: #fff;
  background: #ffffff29;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  width: 92px;
  height: 92px;
  margin: 0 auto 22px;
  animation: .55s cubic-bezier(.2, .8, .2, 1) .1s both c2pop;
  display: flex;
  box-shadow: 0 0 0 10px #ffffff0f, inset 0 0 0 1px #ffffff40;
}

@keyframes c2pop {
  0% {
    opacity: 0;
    transform: scale(.5);
  }

  60% {
    transform: scale(1.08);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.confirm2 .c2title {
  letter-spacing: -.02em;
  text-shadow: 0 2px 20px #0006;
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 700;
}

.confirm2 .c2rest {
  color: #ffffffeb;
  margin-top: 8px;
  font-size: 17px;
  font-weight: 600;
}

.confirm2 .c2cuisine {
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff9;
  margin-top: 3px;
  font-size: 11px;
}

.confirm2 .c2guest {
  color: #ffffffe6;
  margin-top: 6px;
  font-size: 16px;
  font-weight: 600;
}

.confirm2 .c2rows {
  text-align: left;
  flex-direction: column;
  margin: 22px 0 2px;
  display: flex;
}

.confirm2 .c2row {
  border-bottom: 1px solid #ffffff1a;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 2px;
  display: flex;
}

.confirm2 .c2row:last-child {
  border-bottom: 0;
}

.confirm2 .c2row > span {
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff9;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
}

.confirm2 .c2row > span svg {
  opacity: .85;
}

.confirm2 .c2row > b {
  color: #fff;
  text-align: right;
  font-size: 17px;
  font-weight: 700;
}

.confirm2 .c2row.charge > span {
  color: color-mix(in srgb, var(--brand, #fff) 55%, #fff);
}

html[lang="ar"] .confirm2 .c2rows {
  text-align: right;
}

html[lang="ar"] .confirm2 .c2row {
  direction: rtl;
  justify-content: flex-start;
  gap: 9px;
}

html[lang="ar"] .confirm2 .c2row > span:after {
  content: ":";
  margin-inline-start: -3px;
}

html[lang="ar"] .confirm2 .c2row > b {
  text-align: right;
}

html[lang="ar"] .confirm2 .c2note {
  direction: rtl;
}

html[lang="ar"] .dtpipe {
  display: none;
}

html[lang="ar"] .dtsep {
  margin: 0 6px;
}

html[lang="ar"] .confirm2 .c2row > span {
  text-transform: none;
  font-size: 15px;
  font-weight: 500;
}

html[lang="ar"] .confirm2 .c2note {
  font-size: 14px;
}

html[lang="ar"] .confirm2 .c2ref {
  direction: rtl;
  font-size: 13.5px;
}

.confirm2 .c2note {
  color: #ffffffbd;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.5;
  display: flex;
}

.confirm2 .c2note svg {
  opacity: .8;
  flex-shrink: 0;
}

.confirm2 .c2charge {
  background: color-mix(in srgb, var(--brand, #2563eb) 40%, #ffffff1f);
  color: #fff;
  border: 1px solid #ffffff3d;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  margin: 16px auto 0;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
}

.confirm2 .c2ref {
  letter-spacing: .06em;
  color: #fff9;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 12px;
  display: flex;
}

.confirm2 .c2ref svg {
  opacity: .7;
  flex-shrink: 0;
}

.confirm2 .c2ref b {
  color: #ffffffe6;
  font-variant-numeric: tabular-nums;
}

.confirm2 .c2actions {
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
  display: flex;
}

.confirm2 .c2done, .confirm2 .c2new {
  cursor: pointer;
  border-radius: 999px;
  padding: 14px 30px;
  font-size: 16px;
  font-weight: 700;
  transition: transform .12s, background .15s, border-color .15s;
}

.confirm2 .c2done {
  color: #0f172a;
  background: #fff;
  border: 1px solid #fff;
}

.confirm2 .c2done:hover {
  background: #eef2f7;
}

.confirm2 .c2new {
  color: #fff;
  background: #ffffff1a;
  border: 1px solid #ffffff52;
}

.confirm2 .c2new:hover {
  background: #ffffff2e;
}

.confirm2 .c2done:active, .confirm2 .c2new:active {
  transform: scale(.97);
}

.bookinglist {
  flex-direction: column;
  gap: 12px;
  max-width: 780px;
  display: flex;
}

.bookingrow {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  box-shadow: var(--shadow-sm);
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  display: flex;
}

.brtitle {
  letter-spacing: -.01em;
  font-size: 19px;
  font-weight: 600;
}

.brsub {
  color: var(--fg-secondary);
  text-transform: capitalize;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 14px;
  display: flex;
}

.brsub svg {
  color: var(--fg-muted);
}

.cancelbtn {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--destructive);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  border-radius: 8px;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  transition: background .15s, border-color .15s, transform .12s;
  display: inline-flex;
}

.cancelbtn:active {
  transform: scale(.97);
}

.cancelbtn:hover {
  background: var(--destructive-subtle);
  border-color: var(--destructive);
}

.alogin {
  background: var(--bg-subtle);
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-size: 14px;
  display: flex;
}

.acard {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 400px;
  box-shadow: var(--shadow-md);
  flex-direction: column;
  gap: 16px;
  padding: 40px 36px;
  display: flex;
}

.acard h1 {
  letter-spacing: -.01em;
  margin-bottom: 4px;
  font-size: 22px;
  font-weight: 600;
}

.acard label {
  color: var(--fg-secondary);
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
}

.acard input, .admin input, .admin select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg);
  font-size: 14px;
  font-family: var(--sans);
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  padding: 8px 12px;
  transition: border-color .15s, box-shadow .15s;
}

.acard input:focus, .admin input:focus, .admin select:focus {
  border-color: var(--accent);
  box-shadow: var(--ring);
  outline: none;
}

.admin input[type="number"], .admin input[type="time"] {
  font-variant-numeric: tabular-nums;
}

.admin input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.admin input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.admin input[type="number"] {
  appearance: textfield;
}

.abtn {
  background: linear-gradient(180deg, #2f6bef, var(--accent));
  color: var(--accent-fg);
  cursor: pointer;
  white-space: nowrap;
  border: none;
  border-radius: 7px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: fit-content;
  height: 32px;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 600;
  transition: filter .14s, box-shadow .14s, transform .1s;
  display: inline-flex;
  box-shadow: 0 1px 2px #0f172a1f, inset 0 1px #ffffff29;
}

.abtn svg {
  width: 15px;
  height: 15px;
}

.abtn:hover:not(:disabled) {
  filter: brightness(1.06);
  box-shadow: 0 4px 12px -2px #2563eb66, inset 0 1px #ffffff29;
}

.abtn:active:not(:disabled) {
  filter: brightness(.97);
  transform: translateY(.5px);
}

.abtn:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #2563eb66;
}

.abtn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.abtn.ghost {
  color: var(--fg);
  border: 1px solid var(--border-strong);
  background: none;
}

.abtn.ghost:hover:not(:disabled) {
  background: var(--bg-subtle);
  color: var(--fg);
}

.abtn svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
}

.aerror {
  color: var(--destructive);
  font-size: 13.5px;
}

.amuted {
  color: var(--fg-secondary);
  font-size: 13.5px;
}

.awarn {
  color: var(--warning);
  background: var(--warning-subtle);
  border-radius: var(--radius);
  border: 1px solid #d9770640;
  margin-bottom: 14px;
  padding: 8px 12px;
  font-size: 13px;
}

.achk {
  color: var(--fg-secondary);
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  display: flex;
}

.optrow {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  display: grid;
}

.optcard {
  border: 1px solid var(--border);
  background: var(--bg);
  cursor: pointer;
  border-radius: 8px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  transition: border-color .15s;
  display: flex;
}

.optcard:hover {
  border-color: var(--border-strong);
}

.optcard span {
  flex-direction: column;
  line-height: 1.2;
  display: flex;
}

.optcard b {
  color: var(--fg);
  font-size: 13px;
  font-weight: 600;
}

.optcard em {
  color: var(--fg-muted);
  margin-top: 2px;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
}

.edit-summary {
  background: color-mix(in srgb, var(--accent) 4%, #fff);
  border: 1px solid var(--border);
  border-radius: 8px;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 4px;
  padding: 12px;
  display: grid;
}

.edit-stat {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  display: flex;
}

.edit-stat-num {
  color: var(--fg);
  font-size: 14px;
  font-weight: 700;
}

.edit-stat-num.tnum {
  font-variant-numeric: tabular-nums;
}

.edit-stat-lbl {
  color: var(--fg-muted);
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: 10.5px;
  font-weight: 500;
}

.umodal.xwide {
  width: 1040px;
  max-width: 95vw;
}

.umodal.xwide .umodalbody {
  padding: 24px 28px;
  overflow: visible;
}

.umodal.xwide .umodalhead {
  padding: 20px 28px 16px;
  font-size: 17px;
}

.umodal.xwide .umodalfoot {
  padding: 16px 28px;
}

.edit-split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 0;
  display: grid;
}

.edit-col {
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  display: flex;
}

.edit-split .edit-col:first-child {
  padding-right: 26px;
}

.edit-split .edit-seats-col {
  border-left: 1px solid var(--border);
  padding-left: 26px;
}

.edit-split .optrow {
  grid-template-columns: 1fr 1fr;
}

.edit-split .optcard {
  padding: 9px 11px;
}

.edit-split .optcard em {
  display: none;
}

.timingform .edit-split .ffield > span {
  flex: 0 0 110px !important;
}

.timingform .edit-split .ffield > :not(span) {
  flex: auto !important;
  width: auto !important;
  max-width: none !important;
}

.timingform .edit-split .ffield > .unitfield {
  flex: auto !important;
}

.timingform .edit-split .ffield > .unitfield > input, .timingform .edit-split .ffield > .numinput {
  flex: 0 0 110px !important;
  width: 110px !important;
}

.edit-seats-hd {
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  display: flex;
}

.edit-seats-title {
  color: var(--fg-secondary);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 12px;
  font-weight: 600;
}

.edit-seats-badges {
  gap: 6px;
  display: flex;
}

.edit-badge {
  background: var(--bg-muted);
  color: var(--fg-secondary);
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
}

.edit-badge svg {
  opacity: 1;
  flex-shrink: 0;
}

.edit-badge.accent {
  background: var(--accent-subtle);
  color: var(--accent);
}

.seatgrid.tight .seatgrid-hd, .seatgrid.tight .seatgrid-row {
  grid-template-columns: 20px 1fr 1fr 52px 40px 28px;
  gap: 6px;
}

.seatgrid.tight .timewrap.adm {
  width: 100%;
}

.seatgrid.tight .seatgrid-pax {
  text-align: center;
  width: 100%;
}

.seatgrid.tight .switch {
  width: 34px;
  height: 19px;
}

.seatgrid.tight .switch .knob {
  width: 13px;
  height: 13px;
}

.seatgrid.tight .switch.on .knob {
  left: 17px;
}

.seatgrid.tight .seatgrid-row.off {
  opacity: .5;
}

.seatgrid.tight .seatgrid-row.off .timewrap.adm, .seatgrid.tight .seatgrid-row.off .seatgrid-pax {
  pointer-events: none;
}

.edit-addseat {
  border: 1px dashed var(--border-strong);
  width: 100%;
  color: var(--accent);
  cursor: pointer;
  background: none;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px;
  font-size: 12.5px;
  font-weight: 600;
  transition: all .12s;
  display: inline-flex;
}

.edit-addseat:hover {
  background: var(--accent-subtle);
  border-color: var(--accent);
}

.seatgrid.tight .seatgrid-row.bad .timewrap.adm .timebtn {
  border-color: var(--destructive);
  background: var(--destructive-subtle);
}

.edit-warn {
  background: var(--destructive-subtle);
  color: var(--destructive);
  border-radius: 8px;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
}

.edit-warn svg {
  flex-shrink: 0;
}

.edit-split .optrow:has(.optcard:only-child) {
  grid-template-columns: 1fr;
}

.edit-split .optcard:only-child em {
  display: block;
}

.admin {
  background: var(--bg-subtle);
  min-height: 100vh;
  font-size: 14px;
  font-family: "Open Sans", var(--sans);
  --accent: #374151;
  --accent-hover: #1f2937;
  --accent-subtle: #f0f1f3;
  --accent-fg: #fff;
  --ring: 0 0 0 3px #3741512e;
  display: flex;
}

.admin input, .admin select, .admin textarea, .admin button {
  font-family: inherit;
}

.admin input[type="checkbox"], .admin input[type="radio"] {
  accent-color: var(--accent);
}

.daychips {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.daychip {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg-secondary);
  cursor: pointer;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 600;
  transition: all .12s;
}

.daychip:hover {
  border-color: var(--border-strong);
}

.daychip.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.minstay-foot {
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  color: var(--fg-secondary);
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 12px 16px 4px;
  padding: 12px 14px;
  font-size: 13px;
  display: flex;
}

.minstay-foot .achk {
  color: var(--fg);
  gap: 8px;
  font-weight: 600;
}

.admin .abtn:not(.ghost):not(.danger) {
  background: linear-gradient(180deg, #4b5563, var(--accent));
}

.admin .abtn.danger {
  background: var(--destructive);
}

.admin .abtn.danger:hover:not(:disabled) {
  background: #b91c1c;
}

.admin .abtn.ghost {
  background: none;
}

.admin .abtn:focus-visible {
  outline-color: #37415166;
}

.admin .switch:focus-visible {
  outline-color: #37415159;
}

.admin .brandmark {
  background: linear-gradient(145deg, #4b5563, #374151);
  border-radius: 8px;
  box-shadow: 0 2px 6px -1px #37415180, inset 0 1px #ffffff38;
}

.admin .abtn, .admin .rowbtn, .admin .backbtn, .admin .capform .abtn, .admin .edit-addseat, .admin .seatgrid-del, .admin .abtn.ghost {
  border-radius: 0 !important;
}

.aside {
  background: var(--bg);
  border-right: 1px solid var(--border);
  flex-direction: column;
  flex-shrink: 0;
  width: 240px;
  height: 100vh;
  padding: 12px 0 0;
  transition: width .15s;
  display: flex;
  position: sticky;
  top: 0;
}

.atitle {
  letter-spacing: -.01em;
  padding: 0 20px 2px;
  font-size: 16px;
  font-weight: 600;
}

.asub {
  color: var(--fg-muted);
  border-bottom: 1px solid var(--border);
  padding: 0 20px 16px;
  font-size: 12px;
}

.brand {
  align-items: center;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.brandmark {
  width: 30px;
  height: 30px;
  color: var(--accent-fg);
  background: linear-gradient(145deg, #3b82f6, #1d4ed8);
  border-radius: 9px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  box-shadow: 0 2px 6px -1px #2563eb80, inset 0 1px #ffffff38;
}

.brandname {
  letter-spacing: -.01em;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
}

.anav {
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
  flex-direction: column;
  flex: 1;
  gap: 3px;
  padding: 8px 10px 12px;
  display: flex;
  overflow-y: auto;
}

.anav::-webkit-scrollbar {
  width: 6px;
}

.anav::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
}

.anav :is(button, a) {
  color: var(--fg-secondary);
  text-align: left;
  cursor: pointer;
  width: 100%;
  min-height: 34px;
  font-size: 13.5px;
  font-weight: 450;
  font-family: var(--sans);
  background: none;
  border: none;
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  text-decoration: none;
  transition: background .12s, color .12s;
  display: flex;
  position: relative;
}

.anav :is(button, a):hover {
  color: var(--fg);
  background: var(--bg-muted);
}

.anav :is(button, a).sel {
  color: var(--accent);
  background: var(--accent-subtle);
  font-weight: 500;
}

.anav :is(button, a).sel:before {
  content: "";
  background: var(--accent);
  border-radius: 999px;
  width: 2.5px;
  height: 16px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.anav .aicon {
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 26px;
  display: flex;
}

.auser {
  border-top: 1px solid var(--border);
  color: var(--fg-muted);
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: 12px;
  display: flex;
}

.alink {
  color: var(--accent);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  font-family: var(--sans);
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid #0000;
  align-items: center;
  gap: 5px;
  padding: 0;
  text-decoration: none;
  display: inline-flex;
}

.alink:hover {
  color: var(--accent-hover);
}

.amain {
  flex: 1;
  min-width: 0;
}

.apanel {
  padding: 20px 24px;
}

.hmmsg {
  color: var(--success, #16a34a);
  margin: 6px 0 12px;
  font-size: 13px;
  font-weight: 600;
  display: inline-block;
}

.hmblock {
  margin-bottom: 26px;
}

.hmh {
  color: var(--fg);
  margin: 8px 0 12px;
  font-size: 17px;
  font-weight: 600;
}

.hmcols {
  gap: 16px;
  display: grid;
}

@media (min-width: 820px) {
  .hmcols {
    grid-template-columns: 1fr 1fr;
  }
}

.hmedcard {
  background: var(--panel, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  padding: 16px;
}

.hmct {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-secondary, #64748b);
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
}

.hmrow {
  border-top: 1px solid var(--border-subtle, #f1f5f9);
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  display: flex;
}

.hmrow:first-of-type {
  border-top: 0;
}

.hmrow.add {
  border-top: 1px dashed var(--border, #e5e7eb);
  margin-top: 6px;
  padding-top: 12px;
}

.hminp {
  background: var(--bg-subtle, #f8fafc);
  border: 1px solid var(--border, #e5e7eb);
  min-width: 0;
  font: inherit;
  color: var(--fg);
  border-radius: 8px;
  flex: 1;
  padding: 8px 10px;
  font-size: 14px;
}

.hminp.sm {
  flex: 0 0 110px;
}

.hminp.xs {
  flex: 0 0 76px;
}

.hmsave {
  background: var(--accent, #2563eb);
  color: #fff;
  font: inherit;
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
}

.hmadd {
  background: var(--fg, #0f172a);
  color: #fff;
  font: inherit;
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
}

.hmadd:disabled {
  opacity: .4;
  cursor: default;
}

.hmdel {
  color: var(--fg-secondary, #94a3b8);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border: 0;
  padding: 4px 6px;
  font-size: 13px;
}

.hmdel:hover {
  color: var(--destructive, #dc2626);
}

.hmstatus {
  border: 1px solid var(--border, #e5e7eb);
  background: var(--bg-subtle, #f8fafc);
  border-radius: 14px;
  margin-bottom: 22px;
  padding: 18px;
}

.hmstatus.on {
  border-color: color-mix(in srgb, var(--success, #16a34a) 45%, var(--border));
  background: color-mix(in srgb, var(--success, #16a34a) 8%, var(--panel, #fff));
}

.hmstatushead {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  display: flex;
}

.hmstatustitle {
  color: var(--fg);
  font-size: 16px;
  font-weight: 700;
}

.hmbig {
  font: inherit;
  cursor: pointer;
  color: #fff;
  background: var(--fg, #0f172a);
  white-space: nowrap;
  border: 0;
  border-radius: 10px;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 700;
}

.hmbig.on {
  background: var(--destructive, #dc2626);
}

.hmbig:not(.on) {
  background: var(--success, #16a34a);
}

.hmgrid2 {
  gap: 16px;
  margin-top: 16px;
  display: grid;
}

.gbadge {
  background: var(--bg-muted, #eef2f7);
  color: var(--fg-secondary, #64748b);
  border-radius: 999px;
  align-items: center;
  gap: 3px;
  margin-right: 5px;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 600;
  display: inline-flex;
}

.gdetailrow > td {
  background: var(--bg-subtle);
  padding: 8px 12px !important;
}

.gdetailline {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.gchip {
  background: var(--bg-muted, #eef2f7);
  color: var(--fg-secondary, #64748b);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 12.5px;
  font-weight: 600;
}

.abtn.success {
  color: #fff;
  background: #16a34a !important;
}

.abtn.success:hover:not(:disabled) {
  filter: none;
  box-shadow: 0 3px 10px -2px #16a34a73;
  background: #15803d !important;
}

.abtn.dangerline {
  border: 1px solid #dc262673;
  color: #dc2626 !important;
  background: none !important;
}

.abtn.dangerline:hover:not(:disabled) {
  filter: none;
  box-shadow: none;
  border-color: #dc2626;
  background: #dc262614 !important;
}

:root:not([data-theme="light"]) .abtn.dangerline {
  border-color: #fca5a580;
  color: #fca5a5 !important;
}

.gcount {
  background: var(--bg-muted, #eef2f7);
  height: 24px;
  color: var(--fg-secondary, #64748b);
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  align-items: center;
  padding: 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  display: inline-flex;
}

.gfilter {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 14px;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-bottom: 14px;
  padding: 13px 18px;
  display: flex;
  box-shadow: 0 1px 2px #1018280a;
}

.gfilter-grp {
  align-items: center;
  gap: 10px;
  display: inline-flex;
}

.gfilter-grp + .gfilter-grp {
  border-inline-start: 1px solid var(--border, #e6e8ec);
  padding-inline-start: 22px;
}

.gfilter-lab {
  color: var(--fg-secondary, #64748b);
  font-size: 12.5px;
  font-weight: 600;
}

.gfilter-date {
  border: 1px solid var(--border, #e2e8f0);
  background: var(--bg-card, #fff);
  height: 34px;
  color: var(--fg, #1e293b);
  font: inherit;
  border-radius: 8px;
  padding: 0 8px;
  font-size: 13px;
}

.gfilter .datewrap.adm .datebtn {
  border-radius: 8px;
  height: 34px;
}

.gfilter .datewrap.adm:before {
  top: 17px;
}

.gfilter-df {
  min-width: 232px;
  display: inline-block;
}

.gfilter-to {
  color: var(--fg-secondary, #94a3b8);
  font-size: 12px;
}

.gfilter-clear {
  color: var(--accent, #2563eb);
  cursor: pointer;
  background: none;
  border: 0;
  font-size: 12.5px;
  font-weight: 600;
}

.gfilter-chk {
  color: var(--fg-secondary, #64748b);
  cursor: pointer;
  border: 1px solid var(--border, #e2e8f0);
  -webkit-user-select: none;
  user-select: none;
  border-radius: 999px;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 500;
  transition: background .12s, border-color .12s, color .12s;
  display: inline-flex;
}

.gfilter-chk:hover {
  border-color: var(--border-strong, #cbd5e1);
  color: var(--fg, #1e293b);
}

.gfilter-chk:has(input:checked) {
  background: var(--accent-subtle, #eff6ff);
  border-color: color-mix(in srgb, var(--accent, #2563eb) 45%, var(--border, #e2e8f0));
  color: var(--fg, #1e293b);
  font-weight: 600;
}

.gfilter-chk input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.gfilter-dot {
  width: 9px;
  height: 9px;
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 8%, transparent);
  border-radius: 999px;
  display: inline-block;
}

.gfilter-dot.st-in {
  background: #22c55e;
}

.gfilter-dot.st-res {
  background: #eab308;
}

.gfilter-dot.st-out {
  background: #f27878;
}

.gfilter-preset {
  min-width: 118px;
}

.gscroll {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong, #cbd5e1) transparent;
  overflow-x: auto;
}

.gscroll::-webkit-scrollbar {
  height: 8px;
}

.gscroll::-webkit-scrollbar-track {
  background: none;
}

.gscroll::-webkit-scrollbar-thumb {
  background: var(--border-strong, #cbd5e1);
  border-radius: 999px;
}

.gscroll::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent, #2563eb) 40%, var(--border-strong, #cbd5e1));
}

.grow > td {
  transition: background .1s;
}

.grow.gst-res > td {
  background: #eab3081f;
}

.grow.gst-out > td {
  background: #f2787821;
}

.grow.gst-in > td {
  background: none;
}

.grow.gst-in:hover > td {
  background: color-mix(in srgb, var(--accent, #2563eb) 5%, transparent);
}

.grow.gst-res:hover > td {
  background: #eab30833;
}

.grow.gst-out:hover > td {
  background: #f2787836;
}

.gviewseg {
  background: var(--bg-muted, #eef2f7);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 9px;
  gap: 2px;
  padding: 2px;
  display: inline-flex;
}

.gviewseg button {
  width: 30px;
  height: 26px;
  color: var(--fg-secondary, #64748b);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  transition: background .12s, color .12s;
  display: inline-flex;
}

.gviewseg button:hover {
  color: var(--fg, #1e293b);
}

.gviewseg button.on {
  background: var(--bg-card, #fff);
  color: var(--accent, #b8860b);
  box-shadow: 0 1px 2px #00000014;
}

.gdense th, .gdense td {
  padding: 6px 9px;
  font-size: 12.5px;
}

.gdense .gbadge {
  margin-right: 0;
  padding: 1px 6px;
}

.summeta {
  color: var(--fg-secondary, #64748b);
  font-size: 12px;
}

@keyframes sumspin {
  to {
    transform: rotate(360deg);
  }
}

.sumcards {
  grid-template-columns: repeat(6, 1fr);
  align-items: start;
  gap: 14px;
  margin-bottom: 18px;
  display: grid;
}

.sumcard {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e6e8ec);
  border-radius: 16px;
  grid-column: span 2;
  transition: box-shadow .18s, border-color .18s, transform .18s;
  overflow: hidden;
  box-shadow: 0 1px 2px #1018280a, 0 1px 3px #10182808;
}

.sumcard:hover {
  border-color: color-mix(in srgb, var(--accent, #2563eb) 30%, var(--border, #e6e8ec));
  box-shadow: 0 6px 18px #10182814;
}

.sumcard:nth-child(4) {
  grid-column: 2 / span 2;
}

.sumcard:nth-child(5) {
  grid-column: 4 / span 2;
}

@media (max-width: 1100px) {
  .sumcards {
    grid-template-columns: repeat(2, 1fr);
  }

  .sumcard, .sumcard:nth-child(4), .sumcard:nth-child(5) {
    grid-column: span 1;
  }
}

@media (max-width: 640px) {
  .sumcards {
    grid-template-columns: 1fr;
  }

  .sumcard, .sumcard:nth-child(4), .sumcard:nth-child(5) {
    grid-column: span 1;
  }
}

.sumcard.open {
  box-shadow: 0 6px 18px #10182814;
}

.sumcard {
  --sum-cols: minmax(104px, 1.35fr) repeat(5, 1fr) 24px;
}

.sumcard-top {
  grid-template-columns: var(--sum-cols);
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  align-items: center;
  column-gap: 10px;
  width: 100%;
  min-height: 74px;
  padding: 14px 20px;
  display: grid;
}

.sumcard-name {
  color: var(--fg, #1f2733);
  letter-spacing: -.01em;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.sumstat {
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  display: flex;
}

.sumstat-lab {
  color: var(--fg-secondary, #64748b);
  letter-spacing: .01em;
  font-size: 11.5px;
  font-weight: 600;
}

.sumstat-val {
  color: var(--fg, #0f172a);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  font-size: 23px;
  font-weight: 700;
  line-height: 1;
}

.sumcard-chev {
  color: var(--fg-secondary, #9aa3af);
  justify-self: end;
  transition: transform .18s, color .15s;
}

.sumcard:hover .sumcard-chev {
  color: var(--accent, #2563eb);
}

.sumnat {
  border-top: 1px solid var(--border, #eceef1);
  max-height: 264px;
  overflow-y: auto;
}

.sumnat-row {
  grid-template-columns: var(--sum-cols);
  border-bottom: 1px solid var(--border, #f0f2f5);
  align-items: center;
  column-gap: 10px;
  padding: 9px 20px;
  transition: background .1s;
  display: grid;
}

.sumnat-row:last-child {
  border-bottom: 0;
}

.sumnat-row:not(.sumnat-head):hover {
  background: color-mix(in srgb, var(--accent, #2563eb) 5%, transparent);
}

.sumnat-head {
  z-index: 1;
  background: var(--bg-subtle, #f7f8fa);
  position: sticky;
  top: 0;
}

.sumnat-nat {
  text-align: left;
  color: var(--fg, #1f2733);
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
}

.natflag {
  object-fit: cover;
  border-radius: 2.5px;
  flex: none;
  width: 19px;
  height: 14px;
  box-shadow: 0 0 0 1px #10182814;
}

.sumnat-c {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--fg, #1f2733);
  font-size: 13.5px;
}

.sumnat-head .sumnat-nat, .sumnat-head .sumnat-c {
  letter-spacing: .01em;
  color: var(--fg-secondary, #64748b);
  font-size: 11.5px;
  font-weight: 600;
}

.sumlegend {
  color: var(--fg-secondary, #64748b);
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  display: flex;
}

.sumlegend .sumdot:not(:first-child) {
  margin-left: 12px;
}

.sumdot {
  vertical-align: -1px;
  border-radius: 999px;
  width: 11px;
  height: 11px;
  margin-right: 5px;
  display: inline-block;
}

.sumdot.st-in {
  background: var(--bg-card, #fff);
  border: 1.5px solid var(--border, #cbd2dc);
}

.sumdot.st-res {
  background: #f6d34a;
}

.sumdot.st-out {
  background: #f2a3a3;
}

.sumvip-row.st-out > td {
  background: #f2787829;
}

.sumvip-row.st-res > td {
  background: #f6d34a38;
}

.sumvip-row.st-in > td {
  background: none;
}

.sumshort {
  border: 1px solid var(--border, #e2e8f0);
  background: var(--bg-card, #fff);
  height: 28px;
  color: var(--fg-secondary, #64748b);
  cursor: pointer;
  border-radius: 8px;
  align-items: center;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 600;
  transition: all .12s;
  display: inline-flex;
}

.sumshort:hover {
  color: var(--fg, #1e293b);
  border-color: color-mix(in srgb, var(--accent, #2563eb) 40%, var(--border, #e2e8f0));
}

.sumshort.on {
  background: var(--accent, #2563eb);
  border-color: var(--accent, #2563eb);
  color: #fff;
}

.sumvip th, .sumvip td {
  border-bottom: 1px solid var(--border, #eef1f5);
  padding: 13px 14px;
}

.sumvip thead th {
  border-bottom: 1.5px solid var(--border, #e2e8f0);
  white-space: normal;
  vertical-align: bottom;
  background: var(--bg-subtle, #f7f8fa);
  color: var(--fg-secondary, #64748b);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
}

.sumvip thead th:first-child {
  border-top-left-radius: 8px;
}

.sumvip thead th:last-child {
  border-top-right-radius: 8px;
}

.sumsortth {
  white-space: normal;
}

.sumsortarrow {
  vertical-align: middle;
  margin-left: 3px;
  display: inline-flex;
}

.sumvip.short th, .sumvip.short td {
  padding: 6px 14px;
}

.sumfoot {
  color: var(--fg-secondary, #64748b);
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 4px;
  padding: 14px 16px;
  font-size: 12.5px;
  display: flex;
}

.sumfoot-rpp {
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.sumfoot-range {
  font-variant-numeric: tabular-nums;
}

.sumfoot .pager {
  gap: 2px;
  margin-left: auto;
}

.sumfoot .pager li:first-child a, .sumfoot .pager li:last-child a {
  color: var(--fg-secondary, #64748b);
}

.sumfoot .pager li:first-child a:hover, .sumfoot .pager li:last-child a:hover {
  color: var(--accent, #2563eb);
  background: var(--bg-muted);
}

.sumfoot .pager li.disabled a {
  opacity: .35;
}

.sumvip-detail > td {
  padding: 11px 16px !important;
}

.sumvline {
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  display: flex;
}

.sumvline-lead {
  color: var(--fg-secondary, #94a3b8);
  flex: none;
}

.sumvitem {
  color: var(--fg, #1f2733);
  white-space: nowrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  display: inline-flex;
}

.sumvitem.strong {
  font-weight: 700;
}

.sumvk {
  color: var(--fg-secondary, #94a3b8);
  margin-right: 3px;
  font-size: 11.5px;
  font-weight: 600;
}

.sumstat-pill {
  white-space: nowrap;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 2px 9px 2px 7px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
}

.sumstat-dot {
  border-radius: 999px;
  flex: none;
  width: 8px;
  height: 8px;
}

.sumstat-pill.st-in {
  color: #15803d;
  background: #22c55e1a;
  border-color: #22c55e59;
}

.sumstat-pill.st-in .sumstat-dot {
  background: #22c55e;
}

.sumstat-pill.st-res {
  color: #a16207;
  background: #eab3081f;
  border-color: #eab30866;
}

.sumstat-pill.st-res .sumstat-dot {
  background: #eab308;
}

.sumstat-pill.st-out {
  color: #b91c1c;
  background: #f2787824;
  border-color: #f2787866;
}

.sumstat-pill.st-out .sumstat-dot {
  background: #f27878;
}

:root:not([data-theme="light"]) .sumstat-pill.st-in {
  color: #4ade80;
}

:root:not([data-theme="light"]) .sumstat-pill.st-res {
  color: #facc15;
}

:root:not([data-theme="light"]) .sumstat-pill.st-out {
  color: #fca5a5;
}

.sumvspacer {
  flex: 40px;
}

.sumvip-detail.st-out > td {
  background: #f278781a;
}

.sumvip-detail.st-res > td {
  background: #f6d34a1f;
}

.sumact {
  border: 1px solid var(--border, #e2e8f0);
  background: var(--bg-card, #fff);
  width: 28px;
  height: 26px;
  color: var(--fg-secondary, #64748b);
  cursor: pointer;
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  transition: color .12s, border-color .12s;
  display: inline-flex;
}

.sumact:hover {
  color: var(--accent, #b8860b);
  border-color: var(--accent, #b8860b);
}

:root[data-theme="dark"] .sumvip-row.st-out > td, :root:not([data-theme="light"]) .sumvip-row.st-out > td {
  background: #f2787824;
}

:root[data-theme="dark"] .sumvip-row.st-res > td, :root:not([data-theme="light"]) .sumvip-row.st-res > td {
  background: #f6d34a1f;
}

.gprofile {
  flex-direction: column;
  gap: 14px;
  display: flex;
}

.gphead {
  align-items: center;
  gap: 16px;
  display: flex;
}

.gpavatar {
  background: var(--accent-subtle);
  width: 54px;
  height: 54px;
  color: var(--accent);
  border-radius: 999px;
  flex: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.gpname {
  font-size: 18px;
  font-weight: 700;
}

.gpmeta {
  color: var(--fg-secondary);
  margin-top: 3px;
  font-size: 13px;
}

.gpaccomp, .gpconf {
  color: var(--fg-secondary);
  margin-top: 2px;
  font-size: 12.5px;
}

@media (min-width: 720px) {
  .hmgrid2 {
    grid-template-columns: 1fr 1fr;
  }
}

.hmfield {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.hmlab {
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fg-secondary, #64748b);
  font-size: 12px;
  font-weight: 700;
}

.hmhint {
  color: var(--fg-secondary, #94a3b8);
  font-size: 12px;
  line-height: 1.4;
}

.hmarea {
  resize: vertical;
  min-height: 44px;
  line-height: 1.4;
}

.hmradio {
  border: 1px solid var(--border, #e5e7eb);
  background: var(--panel, #fff);
  border-radius: 9px;
  display: inline-flex;
  overflow: hidden;
}

.hmrad {
  font: inherit;
  cursor: pointer;
  color: var(--fg-secondary, #64748b);
  background: none;
  border: 0;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
}

.hmrad + .hmrad {
  border-left: 1px solid var(--border, #e5e7eb);
}

.hmrad.on {
  background: var(--accent, #2563eb);
  color: #fff;
}

.hmvenues {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  display: grid;
}

.hmvenue {
  border: 1px solid var(--border, #e5e7eb);
  background: var(--panel, #fff);
  font: inherit;
  cursor: pointer;
  text-align: left;
  border-radius: 10px;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  display: flex;
}

.hmvenue.on {
  border-color: var(--accent, #2563eb);
  background: var(--accent-subtle, #eff6ff);
}

.hmvdot {
  background: var(--border, #cbd5e1);
  border-radius: 50%;
  flex: none;
  width: 10px;
  height: 10px;
}

.hmvenue.on .hmvdot {
  background: var(--accent, #2563eb);
}

.hmvname {
  min-width: 0;
  color: var(--fg);
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
}

.hmvstate {
  color: var(--fg-secondary, #94a3b8);
  font-size: 12px;
  font-weight: 700;
}

.hmvenue.on .hmvstate {
  color: var(--accent, #2563eb);
}

.hmcover {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.hmcoverimg {
  border: 1px solid var(--border, #e5e7eb);
  background: var(--bg-subtle, #f8fafc);
  aspect-ratio: 16 / 7;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.hmcoverimg img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.hmrowp {
  flex-wrap: wrap;
}

.hmthumb {
  background: var(--bg-subtle, #f1f5f9);
  border-radius: 8px;
  flex: 0 0 46px;
  justify-content: center;
  align-items: center;
  width: 46px;
  height: 46px;
  display: flex;
  overflow: hidden;
}

.hmthumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.hmthumbx {
  opacity: .5;
  font-size: 18px;
}

.hmfields {
  flex: 1;
  gap: 8px;
  min-width: 180px;
  display: flex;
}

.hmrowact {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  display: flex;
}

.hmhero {
  color: #fff;
  text-align: center;
  background: radial-gradient(120% 130% at 50% -10%, #5a2b44 0%, #2a1220 55%, #1a0b14 100%) center / cover;
  border-radius: 16px;
  max-width: 940px;
  margin: 6px auto 22px;
  padding: 30px 26px;
}

.hmherobadge {
  letter-spacing: .04em;
  opacity: .9;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  display: inline-block;
}

.hmherotitle {
  font-family: Georgia, Times New Roman, serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
}

.hmherosub {
  opacity: .86;
  margin-top: 8px;
  max-width: 520px;
  margin-inline: auto;
  font-size: 14px;
}

.tilesub {
  color: var(--fg-secondary, #94a3b8);
  letter-spacing: .02em;
  margin-top: 4px;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 600;
  display: block;
}

.rbadge.hmon {
  background: color-mix(in srgb, var(--success, #16a34a) 16%, transparent);
  color: var(--success, #16a34a);
}

.hmopscard {
  margin-top: 14px;
}

.hmbandlabel {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-secondary, #64748b);
  margin: 20px 2px 8px;
  font-size: 11px;
  font-weight: 700;
}

.hmgauge {
  border-radius: 50%;
  flex-shrink: 0;
  place-items: center;
  width: 64px;
  height: 64px;
  display: grid;
}

.hmgauge i {
  background: var(--panel, #fff);
  border-radius: 50%;
  width: 46px;
  height: 46px;
}

.fbl {
  color: var(--fg-secondary, #64748b);
  align-self: center;
  font-size: 12px;
  font-weight: 600;
}

.hmactions {
  gap: 4px;
  display: flex;
}

.dkstatus.st-completed {
  color: var(--fg-secondary, #64748b);
  background: var(--bg-muted, #f1f5f9);
}

.iconbtn.danger:hover {
  color: var(--destructive, #dc2626);
  border-color: var(--destructive, #dc2626);
}

.hmtimetable td {
  vertical-align: middle;
}

.hmtimetable .timewrap.adm {
  min-width: 108px;
}

.hmtimetable .hminp.xs {
  width: 64px;
}

.hmtimeact {
  align-items: center;
  gap: 6px;
  display: flex;
}

.hmcap {
  color: var(--fg-secondary, #64748b);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  font-weight: 700;
}

.hmaddrow td {
  border-top: 2px dashed var(--border, #e5e7eb);
  padding-top: 12px;
}

.hmmenugroup {
  margin-bottom: 16px;
}

.hmmenuhd {
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  display: flex;
}

.hmmenuhd .hmct {
  margin-bottom: 0;
}

.hmmenuar {
  color: var(--fg-secondary, #64748b);
  font-size: 13px;
  font-weight: 600;
}

.hmmenucount {
  color: var(--fg-secondary, #94a3b8);
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 700;
}

.hmdish {
  border-top: 1px solid var(--border-subtle, #f1f5f9);
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  display: flex;
}

.hmdish:first-of-type {
  border-top: 0;
}

.hmdish.add {
  border-top: 1px dashed var(--border, #e5e7eb);
  margin-top: 6px;
  padding-top: 14px;
}

.hmdishfields {
  flex-direction: column;
  flex: 1;
  gap: 6px;
  min-width: 0;
  display: flex;
}

.hmbi {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  display: grid;
}

@media (max-width: 720px) {
  .hmbi {
    grid-template-columns: 1fr;
  }
}

.hminp.cat {
  max-width: 240px;
  font-size: 12.5px;
}

.hminp.sub {
  color: var(--fg-secondary, #475569);
  font-size: 12.5px;
}

.hminp.rtl {
  text-align: right;
}

.hmthumbimg {
  object-fit: cover;
  vertical-align: middle;
  border-radius: 8px;
  width: 44px;
  height: 44px;
}

.hmmenu {
  margin-bottom: 22px;
}

.hmmenutitle {
  color: var(--fg);
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 8px 0 12px;
  font-size: 15px;
  font-weight: 700;
  display: flex;
}

.hmmenutitle em {
  color: var(--fg-secondary, #64748b);
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
}

.hmmenumeta {
  color: var(--fg-secondary, #64748b);
  font-size: 12.5px;
  font-weight: 600;
}

.hmmenuhead {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 8px 0 12px;
  display: flex;
}

.hmmenuhl {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  display: flex;
}

.hmmenuname {
  color: var(--fg);
  font-size: 17px;
  font-weight: 700;
}

.hmempty {
  text-align: center;
  color: var(--fg-secondary, #94a3b8);
  border: 1px dashed var(--border, #e5e7eb);
  border-radius: 12px;
  margin-bottom: 14px;
  padding: 22px;
  font-size: 13.5px;
}

.abtn.sm {
  padding: 6px 12px;
  font-size: 13px;
}

.hmlangtabs {
  border-bottom: 1px solid var(--border, #e5e7eb);
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  display: flex;
}

.hmlangtab {
  border: 1px solid var(--border, #e5e7eb);
  background: var(--panel, #fff);
  font: inherit;
  cursor: pointer;
  color: var(--fg-secondary, #64748b);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 600;
}

.hmlangtab.on {
  background: var(--accent, #2563eb);
  color: #fff;
  border-color: var(--accent, #2563eb);
}

.hmlangtab.has:not(.on) {
  border-color: color-mix(in srgb, var(--success, #16a34a) 45%, var(--border));
  color: var(--fg);
}

.hmlangtab.has:after {
  content: " •";
  color: var(--success, #16a34a);
}

.hmlangtab.on.has:after {
  color: #fff;
}

.apanel h2 {
  letter-spacing: -.01em;
  color: var(--fg);
  margin: 18px 0 10px;
  font-size: 16px;
  font-weight: 600;
}

.abar {
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  display: flex;
}

.atable {
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 100%;
  box-shadow: var(--shadow-sm);
  font-size: 13.5px;
  overflow: hidden;
}

.atable th {
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
  height: 42px;
  color: var(--fg-secondary);
  letter-spacing: -.01em;
  background: var(--bg-subtle);
  white-space: nowrap;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 600;
  transition: background .12s, color .12s;
}

.atable thead th:hover {
  background: var(--bg-subtle);
  color: var(--fg);
}

.atable th.sorted {
  color: var(--accent);
}

.atable th .sorthint {
  color: var(--fg-muted);
  vertical-align: -1px;
}

.atable th.sorted svg {
  color: var(--accent);
}

.atable td {
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  padding: 8px 12px;
}

.atable tr:last-child td {
  border-bottom: none;
}

.atable tbody tr {
  transition: background .12s;
}

.atable tr:hover td {
  background: var(--bg-subtle);
}

.asmall {
  color: var(--fg-secondary);
  font-size: 12.5px;
}

.ahead2 {
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 12px 16px;
  display: flex;
}

.asub2 {
  color: var(--fg-muted);
  margin-top: 2px;
  font-size: 12px;
}

.railbtn {
  color: var(--fg-muted);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 6px;
  flex-shrink: 0;
  padding: 6px;
  transition: background .12s, color .12s;
  display: flex;
}

.railbtn:hover {
  background: var(--bg-muted);
  color: var(--fg);
}

.agroupbtn {
  text-align: left;
  cursor: pointer;
  width: 100%;
  color: var(--fg-muted);
  letter-spacing: .01em;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--sans);
  background: none;
  border: none;
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 7px 10px 3px;
  transition: color .12s;
  display: flex;
}

.agroupbtn:hover {
  color: var(--fg-secondary);
}

.agroupbtn .glabel {
  flex: 1;
  min-width: 0;
}

.agroupbtn .gchev {
  opacity: .45;
  color: var(--fg-muted);
  flex-shrink: 0;
  transition: transform .15s, opacity .12s;
}

.agroupbtn:hover .gchev {
  opacity: 1;
}

.agroupbtn .gchev.rot {
  opacity: .8;
  transform: rotate(90deg);
}

.anavdiv {
  background: var(--border);
  height: 1px;
  margin: 6px 12px;
}

.anavgroup {
  display: contents;
}

.navmodule .aicon, .anav :is(button, a).navmodule.sel .aicon {
  color: var(--accent);
}

.anav :is(button, a).subitem {
  min-height: 32px;
  padding-left: 12px;
  font-size: 13px;
}

.anav :is(button, a).subitem .aicon {
  width: 24px;
  color: var(--fg-muted);
}

.anav :is(button, a).subitem:hover .aicon, .anav :is(button, a).subitem.sel .aicon {
  color: inherit;
}

.railsep {
  background: var(--border);
  height: 1px;
  margin: 7px 10px;
}

.aside.rail {
  width: 56px;
}

.aside.rail .ahead2 {
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 0 10px;
}

.aside.rail .anav {
  flex-direction: column;
  gap: 4px;
  padding: 10px 8px 14px;
  display: flex;
}

.aside.rail .anav :is(button, a) {
  border-radius: 10px;
  justify-content: center;
  width: 40px;
  min-height: 40px;
  margin-inline: auto;
  padding: 0;
}

.aside.rail .anav :is(button, a).sel:before {
  display: none;
}

.aside.rail .aicon {
  width: auto;
}

.aside.rail .anav :is(button, a) svg {
  width: 19px;
  height: 19px;
}

.aside.rail .anav :is(button, a).subitem {
  min-height: 34px;
}

.aside.rail .auser {
  justify-content: center;
  padding: 10px 0;
}

.uploadbtn {
  cursor: pointer;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--accent);
  white-space: nowrap;
  background: var(--bg);
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  transition: all .15s;
  display: inline-flex;
}

.uploadbtn:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.uploaderr {
  color: var(--destructive, #dc2626);
  vertical-align: middle;
  max-width: 320px;
  margin-left: 10px;
  font-size: 12px;
  font-weight: 500;
  display: inline-block;
}

.rlogo {
  justify-content: center;
  margin: 4px 0 14px;
  display: flex;
}

.hmhubstatus {
  text-align: center;
  margin: 0 0 22px;
}

.rlogo img {
  object-fit: contain;
  background: linear-gradient(160deg, #172033 0%, #0b0f1a 100%);
  border: 1px solid #ffffff12;
  border-radius: 18px;
  max-width: min(560px, 72%);
  height: 112px;
  padding: 24px 52px;
  box-shadow: 0 14px 36px -12px #00000073, inset 0 1px #ffffff0f;
}

.tileboard {
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 16px;
  max-width: 940px;
  margin: 0 auto;
  display: grid;
}

.tile {
  border: 1px solid var(--border);
  cursor: pointer;
  color: var(--accent);
  text-align: center;
  font-size: 13.5px;
  font-family: var(--sans);
  background: #fff;
  border-radius: 16px;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  padding: 24px 14px 18px;
  text-decoration: none;
  transition: transform .16s, box-shadow .16s, border-color .16s;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px #1018280d;
}

.tile:before {
  content: "";
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  height: 3px;
  transition: opacity .16s;
  position: absolute;
  inset: 0 0 auto;
}

.tile > svg {
  box-sizing: content-box;
  width: 34px;
  height: 34px;
  color: var(--accent);
  background: none;
  padding: 8px 0;
  transition: transform .16s, color .16s;
}

.tile span {
  color: var(--fg);
  letter-spacing: -.01em;
  font-weight: 600;
  line-height: 1.3;
}

.tile:hover {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -12px #10182838;
}

.tile:hover:before {
  opacity: .9;
}

.tile:hover > svg {
  color: var(--accent);
  transform: scale(1.1);
}

.fsection {
  color: var(--fg-secondary);
  align-items: center;
  gap: 10px;
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 600;
  display: flex;
}

.fsection:after {
  content: "";
  background: var(--border);
  flex: 1;
  height: 1px;
}

.fsection span {
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg-muted);
  font-size: 11.5px;
  font-weight: 400;
}

.fgrid2 {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  display: grid;
}

.timingform .ffield {
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

.timingform .ffield > span {
  text-align: right;
  color: var(--fg);
  flex: 0 0 155px;
  font-size: 13px;
  font-weight: 600;
}

.timingform .ffield > span:not(:has(.req)):after {
  content: " :";
}

.timingform .ffield > :not(span) {
  flex: 0 0 264px;
  min-width: 0;
  max-width: 264px;
}

.unitfield {
  align-items: center;
  gap: 8px;
  display: flex;
}

.unitfield input {
  flex: 1;
  min-width: 0;
}

.timingform .ffield > .unitfield {
  flex: none !important;
  width: auto !important;
  max-width: none !important;
}

.timingform .ffield > .unitfield > input {
  flex: 0 0 120px !important;
  width: 120px !important;
}

.timingform .ffield > .numinput {
  flex: 0 0 120px !important;
  width: 120px !important;
  max-width: 120px !important;
}

.unitfield span {
  color: var(--fg-muted);
  white-space: nowrap;
  font-size: 12.5px;
}

.req {
  color: var(--destructive);
  font-weight: 700;
}

.capform {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 12px;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 16px;
  padding: 16px 18px;
  display: flex;
}

.capform > .ffield, .capform > label {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.capform .ffield > span {
  color: var(--fg-secondary);
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 600;
}

.capform .ffield > span:after {
  content: " :";
}

.capform .ffield select, .capform .ffield input {
  box-sizing: border-box;
  height: 36px;
  border-radius: 0 !important;
}

.capform .datewrap.adm .datebtn {
  height: 36px;
  border-radius: 0 !important;
}

.capform .abtn {
  border-radius: 0;
  height: 36px;
  padding: 0 14px;
}

.tsel {
  position: relative;
}

.tsel-btn {
  background: var(--bg);
  border: 1px solid var(--border);
  width: 100%;
  height: 34px;
  color: var(--fg);
  text-align: left;
  font: inherit;
  cursor: pointer;
  border-radius: 8px;
  align-items: center;
  padding: 0 32px 0 12px;
  font-size: 13px;
  transition: border-color .12s, box-shadow .12s;
  display: flex;
  position: relative;
}

.tsel-btn:hover {
  border-color: var(--border-strong);
}

.tsel-btn:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
  outline: none;
}

.tsel-btn .ph {
  color: var(--fg-muted);
}

.tsel-btn span:not(.ph) {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.tsel-chev {
  color: var(--fg-muted);
  pointer-events: none;
  transition: transform .12s;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

.tsel-menu {
  z-index: 2000;
  background: var(--bg-card, var(--bg));
  border: 1px solid var(--border);
  box-sizing: border-box;
  border-radius: 10px;
  flex-direction: column;
  max-height: 320px;
  padding: 5px;
  font-family: inherit;
  display: flex;
  overflow: hidden;
  box-shadow: 0 10px 28px #10182829;
}

.tsel-search {
  border: 1px solid var(--border, #e2e8f0);
  color: var(--fg-muted, #94a3b8);
  border-radius: 8px;
  flex: none;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
  padding: 6px 9px;
  display: flex;
}

.tsel-search input {
  min-width: 0;
  font: inherit;
  color: var(--fg, #1e293b);
  background: none;
  border: 0;
  outline: none;
  flex: 1;
  font-size: 13px;
}

.tsel-opts {
  min-height: 0;
  overflow-y: auto;
}

.tsel-empty {
  color: var(--fg-muted, #94a3b8);
  padding: 10px 11px;
  font-size: 12.5px;
}

.tsel-item {
  text-align: left;
  width: 100%;
  font: inherit;
  color: var(--fg);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border: 0;
  border-radius: 7px;
  padding: 8px 11px;
  font-size: 13px;
  transition: background .1s, color .1s;
  display: block;
}

.tsel-item:hover {
  background: var(--accent-subtle);
  color: var(--accent);
}

.tsel-item.sel {
  background: var(--bg-muted, #eef2f7);
  color: var(--fg, #1e293b);
  font-weight: 700;
}

.tsel-item.sel:hover {
  background: var(--bg-muted, #eef2f7);
  color: var(--fg, #1e293b);
}

.capform .ffield select {
  appearance: none;
  background-color: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  font: inherit;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-position: right 11px center;
  background-repeat: no-repeat;
  background-size: 14px;
  padding: 0 34px 0 12px;
  font-size: 13px;
  transition: border-color .12s, box-shadow .12s;
}

.capform .ffield select:hover {
  border-color: var(--border-strong);
}

.capform .ffield select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
  outline: none;
}

.capovmsg, .capovtable {
  margin: 0 16px 16px;
}

.capov-head {
  color: var(--fg-secondary);
  align-items: center;
  gap: 7px;
  font-weight: 600;
  display: inline-flex;
}

.capov-head svg {
  color: var(--accent);
}

.capov-head em {
  color: var(--fg-muted);
  margin-left: 2px;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
}

.capov-empty {
  color: var(--fg-muted);
  border: 1px dashed var(--border);
  background: var(--bg-subtle);
  border-radius: 12px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0 16px 18px;
  padding: 26px;
  font-size: 13px;
  display: flex;
}

.capov-empty svg {
  color: var(--fg-muted);
  opacity: .7;
}

.capov-list {
  flex-direction: column;
  gap: 8px;
  margin: 0 16px 16px;
  display: flex;
}

.capov-item {
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 10px;
  grid-template-columns: 130px 1fr auto 32px;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  transition: border-color .12s;
  display: grid;
}

.capov-item:hover {
  border-color: var(--border-strong);
}

.capov-date {
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
}

.capov-date svg {
  color: var(--fg-muted);
}

.capov-seat {
  color: var(--fg-secondary);
  font-size: 13px;
}

.capov-seat em {
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  font-style: normal;
}

.capov-pax {
  background: var(--accent-subtle);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
}

.namechips {
  gap: 6px;
  margin-top: 7px;
  display: flex;
}

.namechip {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg-secondary);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
  font-family: var(--sans);
  border-radius: 999px;
  padding: 3px 13px;
  transition: background .14s, border-color .14s, color .14s;
}

.namechip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.namechip.on {
  background: var(--accent-subtle);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.seatcaps {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 3.5%, #fff);
  border-radius: 0;
  margin: 2px 0 4px;
  padding: 8px 10px;
}

.timingform input, .timingform select, .timingform .seatcap, .timingform .seatcap-del, .timingform .seatgrid-del, .timingform .seatdot, .timingform .seatdot2 {
  border-radius: 0 !important;
}

.seatcaps-hd {
  color: var(--fg);
  margin-bottom: 10px;
  font-size: 12.5px;
  font-weight: 600;
}

.seatcaps-hd span {
  color: var(--fg-secondary);
  font-size: 11.5px;
  font-weight: 400;
}

.seatcaps-grid {
  grid-template-columns: repeat(auto-fill, minmax(64px, max-content));
  gap: 6px;
  display: grid;
}

.seatcap {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  flex-direction: column;
  gap: 2px;
  min-width: 64px;
  padding: 4px 8px;
  transition: border-color .15s, box-shadow .15s;
  display: flex;
}

.seatcap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.seatcap.cur {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, #fff);
}

.seatcap.new {
  border-style: dashed;
  padding-top: 8px;
  position: relative;
}

.seatcap-name {
  text-align: center;
  border: 0;
  border-bottom: 1px solid var(--border);
  width: 100%;
  color: var(--fg);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--sans);
  background: none;
  padding: 2px 0;
}

.seatcap-name:focus {
  border-bottom-color: var(--accent);
  outline: none;
}

.seatcap-del {
  width: 17px;
  height: 17px;
  color: var(--fg-muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: inline-flex;
  position: absolute;
  top: 3px;
  right: 3px;
}

.seatcap-del:hover {
  color: var(--destructive);
  background: var(--destructive-subtle);
}

.seatgrid-hd, .seatgrid-row {
  grid-template-columns: 28px 120px 120px 80px 34px;
  justify-content: start;
  align-items: center;
  gap: 9px;
  display: grid;
}

.seatnum {
  color: var(--fg-secondary);
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 600;
}

.seatgrid-hd {
  color: var(--fg-secondary);
  padding: 0 4px 7px;
  font-size: 12px;
  font-weight: 600;
}

.seatgrid-hd span {
  text-align: left;
  padding-left: 0;
}

.seatgrid-hd span:first-child {
  text-align: center;
}

.seatgrid-hd span:nth-child(4) {
  text-align: left;
}

.seatgrid-row {
  border-top: 1px solid var(--border);
  padding: 9px 4px;
}

.seatgrid-row.cur .seatdot2 {
  background: var(--accent);
}

.seatgrid-name {
  align-items: center;
  gap: 9px;
  min-width: 0;
  display: flex;
}

.seatgrid-name input {
  flex: 1;
  min-width: 0;
  font-weight: 500;
}

.seatdot2 {
  background: var(--border-strong);
  border-radius: 50%;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
}

.seatdot2.new {
  background: var(--success);
}

.seatgrid-pax {
  text-align: center;
  font-weight: 600;
}

.seatgrid-del {
  border: 1px solid var(--border);
  background: var(--bg);
  width: 34px;
  height: 34px;
  color: var(--fg-muted);
  cursor: pointer;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  transition: all .15s;
  display: inline-flex;
}

.seatgrid-del:hover {
  color: var(--destructive);
  border-color: var(--destructive);
  background: var(--destructive-subtle);
}

.seatgrid-foot {
  border-top: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  margin-top: 2px;
  padding: 13px 4px 2px;
  display: flex;
}

.seatgrid-foot b {
  color: var(--fg);
  font-size: 14px;
}

.sessionrow {
  cursor: pointer;
}

.sessionrow:hover td {
  background: var(--accent-subtle) !important;
}

.sesschev {
  color: var(--fg-muted);
  vertical-align: middle;
  transition: transform .15s;
}

.sesschev.open {
  color: var(--accent);
  transform: rotate(90deg);
}

.seatsubrow td {
  background: var(--bg-subtle);
}

.seatsubrow td:first-child, .seatsubrow td:nth-child(2) {
  position: relative;
}

.seatdot {
  background: var(--border-strong);
  border-radius: 999px;
  width: 5px;
  height: 5px;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
}

.seatcap-lbl {
  letter-spacing: .01em;
  color: var(--accent);
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  font-weight: 600;
}

.seatcap input {
  text-align: center;
  font-variant-numeric: tabular-nums;
  background: none;
  border: 0;
  width: 100%;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
}

.seatcap input:focus {
  outline: none;
}

.seatcaps-total {
  border-top: 1px dashed var(--border);
  color: var(--fg-secondary);
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 11px;
  padding-top: 10px;
  font-size: 12.5px;
  display: flex;
}

.seatcaps-total b {
  color: var(--fg);
  font-size: 13.5px;
}

.tile:active {
  transform: translateY(-1px);
}

.photogrid {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
  max-width: 940px;
  display: grid;
}

.photocell {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  height: 130px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.photocell img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.photocell.add {
  box-shadow: none;
  color: var(--fg-muted);
  border-style: dashed;
  justify-content: center;
  align-items: center;
  display: flex;
}

.photodefault {
  background: var(--accent);
  color: var(--accent-fg);
  border: none;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  position: absolute;
  bottom: 6px;
  left: 6px;
}

.photodefault.btn {
  color: var(--accent);
  border: 1px solid var(--accent);
  cursor: pointer;
  opacity: 0;
  background: #fffffff2;
  transition: all .15s;
}

.photocell:hover .photodefault.btn {
  opacity: 1;
}

.photodel {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--destructive);
  cursor: pointer;
  opacity: 0;
  background: #fffffff2;
  padding: 5px 7px;
  transition: all .15s;
  display: flex;
  position: absolute;
  top: 6px;
  right: 6px;
}

.photocell:hover .photodel {
  opacity: 1;
}

.photocell[draggable="true"] {
  cursor: grab;
}

.photocell[draggable="true"]:active {
  cursor: grabbing;
}

.photopos {
  color: #fff;
  background: #0f172ad1;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  position: absolute;
  top: 6px;
  left: 6px;
}

.photomove {
  opacity: 0;
  gap: 4px;
  transition: all .15s;
  display: flex;
  position: absolute;
  bottom: 6px;
  right: 6px;
}

.photocell:hover .photomove {
  opacity: 1;
}

.photomove button {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  width: 26px;
  height: 26px;
  color: var(--fg);
  cursor: pointer;
  background: #fffffff2;
  justify-content: center;
  align-items: center;
  display: flex;
}

.photomove button:disabled {
  opacity: .35;
  cursor: default;
}

.agroup {
  color: var(--fg-muted);
  padding: 16px 20px 6px 12px;
  font-size: 11px;
  font-weight: 600;
}

.rpills {
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  display: flex;
}

.rpill {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg-secondary);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13.5px;
  font-weight: 500;
  transition: all .15s;
}

.rpill:hover {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
}

.rpill.sel {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}

.rpill.off {
  opacity: .5;
  text-decoration: line-through;
}

.rpill.add {
  color: var(--accent);
  border-style: dashed;
}

.rmanage {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
  padding: 16px 20px;
}

.subtabs {
  border-bottom: 1px solid var(--border);
  gap: 2px;
  margin-bottom: 20px;
  display: flex;
}

.subtabs button {
  color: var(--fg-secondary);
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 2px solid #0000;
  align-items: center;
  gap: 8px;
  margin-bottom: -1px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 500;
  transition: all .15s;
  display: flex;
}

.subtabs button:hover {
  color: var(--fg);
}

.subtabs button.sel {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.rhead {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  display: flex;
  position: relative;
}

.rhead:after {
  content: "";
  background: linear-gradient(90deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 35%, transparent) 34%, var(--border) 34%, var(--border) 100%);
  border-radius: 2px;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.rname {
  letter-spacing: -.01em;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 600;
  display: flex;
}

.rname-editicon {
  width: 24px;
  height: 24px;
  color: var(--fg-muted);
  cursor: pointer;
  opacity: .55;
  background: none;
  border: 0;
  border-radius: 999px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  transition: color .12s, background .12s, opacity .12s;
  display: inline-flex;
}

.rname-editicon:hover {
  color: var(--accent);
  background: var(--accent-subtle);
  opacity: 1;
}

.rcuisine {
  color: var(--fg-muted);
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
}

.rbadge {
  background: var(--accent-subtle);
  color: var(--accent);
  font-family: var(--sans);
  border: 1px solid #0000;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 500;
  display: inline-block;
}

.rbadge.off {
  background: var(--destructive-subtle);
  color: var(--destructive);
}

.aoff {
  opacity: .55;
  text-decoration: line-through;
}

.hcards {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
  display: grid;
}

.hcard {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  transition: all .15s;
  display: flex;
}

.hcard:hover {
  border-color: var(--border-strong);
}

.hcard.add {
  border-style: dashed;
  border-color: var(--border-strong);
  color: var(--accent);
  cursor: pointer;
  min-height: 84px;
  box-shadow: none;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
}

.hcard.add:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.hlogo {
  border: 1px solid var(--border);
  color: #93c5fd;
  background: #0b0f1a;
  border-radius: 10px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 52px;
  display: flex;
  overflow: hidden;
}

.hlogo img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.hbody {
  flex: 1;
  min-width: 0;
}

.hname {
  align-items: center;
  gap: 10px;
  font-size: 15.5px;
  font-weight: 600;
  display: flex;
}

.hstats {
  color: var(--fg-secondary);
  gap: 16px;
  margin-top: 5px;
  font-size: 12.5px;
  display: flex;
}

.hstats span {
  align-items: center;
  gap: 5px;
  display: inline-flex;
}

.rblocks {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  display: grid;
}

.rblock {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 12px 14px;
  transition: all .15s;
  position: relative;
}

.rblock:hover {
  border-color: var(--border-strong);
}

.rblock.warn {
  border-color: var(--destructive);
  background: var(--destructive-subtle);
}

.rblock.add {
  border-style: dashed;
  border-color: var(--border-strong);
  box-shadow: none;
}

.rrange {
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  font-weight: 600;
}

.rarrow {
  color: var(--accent);
  font-size: 15px;
}

.rcount {
  color: var(--fg-secondary);
  margin-top: 2px;
  font-size: 12px;
}

.rblock.warn .rcount {
  color: var(--destructive);
}

.ractions {
  opacity: 0;
  gap: 8px;
  transition: all .15s;
  display: flex;
  position: absolute;
  top: 8px;
  right: 10px;
}

.rblock:hover .ractions {
  opacity: 1;
}

.rblockedit {
  align-items: center;
  gap: 6px;
  display: flex;
}

.rblockedit input {
  width: 74px;
  padding: 6px 8px;
  font-size: 13.5px;
}

.rblockedit span {
  color: var(--accent);
}

.statgrid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
  display: grid;
}

.stat {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
  padding: 14px;
}

.stat:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.statval {
  font-variant-numeric: tabular-nums;
  font-size: 26px;
  font-weight: 600;
}

.statlabel {
  color: var(--fg-secondary);
  font-size: 12.5px;
}

.statsub {
  color: var(--fg-muted);
  font-size: 11.5px;
}

.occlist {
  flex-direction: column;
  gap: 8px;
  max-width: 760px;
  display: flex;
}

.occrow {
  grid-template-columns: 150px 1fr 120px;
  align-items: center;
  gap: 14px;
  display: grid;
}

.occname {
  font-weight: 500;
}

.occtrack {
  background: var(--bg-muted);
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
}

.occfill {
  background: var(--accent);
  border-radius: 999px;
  height: 100%;
}

.occnum {
  color: var(--fg-secondary);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
}

.weekbars {
  align-items: flex-end;
  gap: 14px;
  max-width: 560px;
  display: flex;
}

.weekbar {
  text-align: center;
  flex: 1;
}

.weekcol {
  background: var(--bg-muted);
  border-radius: 6px;
  align-items: flex-end;
  height: 90px;
  display: flex;
  overflow: hidden;
}

.weekfill {
  background: var(--accent);
  width: 100%;
}

.weekpax {
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
}

.weekday {
  color: var(--fg-muted);
  font-size: 11.5px;
}

.dk {
  flex-direction: column;
  gap: 16px;
  display: flex;
}

.dkhero {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  padding: 4px 2px 2px;
  display: flex;
}

.dkgreet {
  letter-spacing: -.02em;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
}

.dkdate {
  color: var(--fg-secondary);
  margin-top: 4px;
  font-size: 13px;
}

.dkchip {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg-secondary);
  box-shadow: var(--shadow-sm);
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
}

.dkchip svg {
  color: var(--accent);
}

.dkkpis {
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  display: grid;
}

.dkkpi {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  font-family: var(--sans);
  color: var(--fg);
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px 14px;
  transition: border-color .15s, box-shadow .15s;
  display: flex;
}

.dkkpi:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.dkkpi.ring {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.dkkpil {
  color: var(--fg-secondary);
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  display: flex;
}

.dkkpil svg {
  color: var(--fg-muted);
}

.dkkpiv {
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.1;
}

.dkdelta {
  font-variant-numeric: tabular-nums;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  display: inline-flex;
}

.dkdelta.up {
  color: var(--success);
}

.dkdelta.down {
  color: var(--destructive);
}

.dkdelta.flat {
  color: var(--fg-muted);
}

.dkring {
  flex-shrink: 0;
  width: 74px;
  height: 74px;
}

.dkringbg {
  fill: none;
  stroke: var(--bg-muted);
  stroke-width: 5px;
}

.dkringfg {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5px;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s cubic-bezier(.22, 1, .36, 1);
}

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

.dkq {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg-secondary);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
  font-family: var(--sans);
  border-radius: 999px;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  transition: all .15s;
  display: inline-flex;
}

.dkq b {
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.dkq:hover {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
  color: var(--fg);
}

.dkq.warn b {
  color: var(--destructive);
}

.dkpanel {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px 18px;
}

.dkpanelhead {
  color: var(--fg);
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
}

.dkpanelhead.sub {
  color: var(--fg-secondary);
  margin: 12px 0 10px;
}

.dklegend {
  color: var(--fg-secondary);
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 400;
  display: inline-flex;
}

.dklegend .dot {
  border-radius: 50%;
  width: 8px;
  height: 8px;
  margin-left: 10px;
  display: inline-block;
}

.dklegend .dot.gold {
  background: var(--accent);
}

.dklegend .dot.red {
  background: var(--destructive);
}

.dkchart {
  opacity: 0;
  width: 100%;
  height: auto;
  transition: opacity .5s;
  display: block;
}

.dkchart.in {
  opacity: 1;
}

.dkaxis {
  stroke: var(--border);
  stroke-width: 1px;
}

.dkline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2px;
  stroke-linejoin: round;
}

.dkbadline {
  fill: none;
  stroke: #dc262680;
  stroke-width: 1.2px;
  stroke-dasharray: 3 3;
}

.dkdot {
  fill: #fff;
  stroke: var(--accent);
  stroke-width: 1.4px;
}

.dkdot:hover, .dkdot.today {
  fill: var(--accent);
}

.dktoday {
  stroke: var(--border-strong);
  stroke-width: 1px;
  stroke-dasharray: 2 3;
}

.dktodaytxt {
  letter-spacing: 1px;
  fill: var(--fg-muted);
  font-size: 8px;
  font-family: var(--sans);
  font-weight: 600;
}

.dkxlab {
  fill: var(--fg-muted);
  font-size: 8.5px;
  font-family: var(--sans);
}

.dkgrid2 {
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 16px;
  display: grid;
}

.dkocc {
  flex-direction: column;
  gap: 11px;
  display: flex;
}

.dkoccrow {
  grid-template-columns: minmax(90px, 150px) 1fr 108px 64px;
  align-items: center;
  gap: 12px;
  display: grid;
}

.dkoccrow.isclosed {
  opacity: .55;
}

.dkoccname {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 500;
  overflow: hidden;
}

.dkocctrack {
  background: var(--bg-muted);
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
}

.dkoccfill {
  background: linear-gradient(90deg, #60a5fa, var(--accent));
  border-radius: 999px;
  height: 100%;
  transition: width .9s cubic-bezier(.22, 1, .36, 1);
}

.dkoccnum {
  color: var(--fg-secondary);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 12px;
}

.dkpill {
  text-align: center;
  border: 1px solid #0000;
  border-radius: 999px;
  padding: 3px 0;
  font-size: 11px;
  font-weight: 500;
}

.dkpill.closed {
  color: var(--fg-muted);
  border-color: var(--border);
}

.dkpill.quiet {
  color: var(--fg-secondary);
  background: var(--bg-muted);
}

.dkpill.filling {
  color: var(--accent);
  background: var(--accent-subtle);
}

.dkpill.busy {
  color: var(--accent-fg);
  background: var(--accent);
}

.dkmix {
  align-items: center;
  gap: 22px;
  display: flex;
}

.dkdonut {
  opacity: 0;
  flex-shrink: 0;
  width: 132px;
  height: 132px;
  transition: opacity .6s .1s;
}

.dkdonut.in {
  opacity: 1;
}

.dkdonutbg {
  fill: none;
  stroke: var(--bg-muted);
  stroke-width: 12px;
}

.dkdonutseg {
  fill: none;
  stroke-width: 12px;
}

.dkdonutnum {
  fill: var(--fg);
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  font-weight: 600;
  font-family: var(--sans);
}

.dkdonutlab {
  fill: var(--fg-muted);
  font-size: 7.5px;
  font-family: var(--sans);
}

.dkmixlegend {
  flex-direction: column;
  flex: 1;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.dkmixrow {
  cursor: pointer;
  font-family: var(--sans);
  color: var(--fg);
  text-align: left;
  background: none;
  border: none;
  align-items: center;
  gap: 10px;
  padding: 4px 2px;
  font-size: 13.5px;
  transition: all .15s;
  display: flex;
}

.dkmixrow:hover {
  color: var(--accent);
}

.dkmixrow i {
  border-radius: 3px;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
}

.dkmixrow span {
  flex: 1;
}

.dkmixrow b {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.dksep {
  border-top: 1px solid var(--border);
  margin-top: 16px;
}

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

.dkboard {
  color: var(--fg-secondary);
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
}

.dkboard b {
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.dkfeed {
  flex-direction: column;
  display: flex;
}

.dkfeedrow {
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 2px;
  display: flex;
}

.dkfeedrow:last-child {
  border-bottom: none;
}

.dkfname {
  font-size: 14px;
  font-weight: 600;
}

.dkfsub {
  color: var(--fg-secondary);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  font-size: 12.5px;
}

.dkfeedside {
  flex-direction: column;
  flex-shrink: 0;
  align-items: flex-end;
  gap: 4px;
  display: flex;
}

.dkwhen {
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
}

.dkstatus {
  text-transform: capitalize;
  border: 1px solid #0000;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
}

.dkstatus.st-confirmed {
  color: var(--accent);
  background: var(--accent-subtle);
}

.dkstatus.st-cancelled {
  color: var(--destructive);
  background: var(--destructive-subtle);
}

.dkstatus.st-no_show {
  color: var(--accent-fg);
  background: var(--destructive);
}

.dkstatus.st-seated {
  color: var(--success);
  background: var(--success-subtle);
}

.dktop {
  flex-direction: column;
  gap: 13px;
  display: flex;
}

.dktoprow {
  align-items: center;
  gap: 14px;
  display: flex;
}

.dkrank {
  color: var(--fg-muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  width: 26px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}

.dktopbody {
  flex: 1;
  min-width: 0;
}

.dktopname {
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  display: flex;
}

.dktopname span {
  font-size: 13.5px;
  font-weight: 500;
}

.dktopname b {
  color: var(--fg-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 400;
}

.dktoptrack {
  background: var(--bg-muted);
  border-radius: 999px;
  height: 5px;
  margin-top: 6px;
  overflow: hidden;
}

.dktopfill {
  background: linear-gradient(90deg, #60a5fa, var(--accent));
  border-radius: 999px;
  height: 100%;
  transition: width .9s cubic-bezier(.22, 1, .36, 1);
}

@media (max-width: 1024px) {
  .kiosk {
    padding: 30px 34px;
  }

  .title {
    font-size: 26px;
  }

  .label {
    min-width: 150px;
    font-size: 18px;
  }

  .row {
    gap: 26px;
    margin-bottom: 22px;
    padding-bottom: 22px;
  }

  .cardvisual {
    height: 160px;
  }

  .cardplaque {
    gap: 5px;
    padding: 16px 12px;
  }

  .card .band {
    font-size: 16px;
  }

  .carddesc {
    font-size: 13px;
  }

  .daycol {
    padding: 0 18px;
  }

  .slotbtn {
    padding: 10px 14px;
    font-size: 16px;
  }

  .idgrid {
    gap: 30px;
  }

  .keypad {
    max-width: 430px;
  }

  .keypad button {
    padding: 14px 0;
    font-size: 24px;
  }

  .halftitle {
    font-size: 30px;
  }

  .aside {
    width: 210px;
  }

  .dkkpis {
    grid-template-columns: 1fr 1fr;
  }

  .dkgrid2 {
    grid-template-columns: 1fr;
  }

  .dkgreet {
    font-size: 20px;
  }
}

@media (max-width: 640px) {
  .kiosk {
    padding: 20px 16px;
  }

  .title {
    font-size: 22px;
  }

  .title:after {
    margin-bottom: 18px;
  }

  .grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .cardvisual {
    height: 100px;
  }

  .cardvisual .cardletter {
    font-size: 40px;
  }

  .cardplaque {
    gap: 4px;
    padding: 12px 8px;
  }

  .card .band {
    font-size: 14px;
  }

  .card .cuisine {
    font-size: 10px;
  }

  .carddesc {
    display: none;
  }

  .halves {
    flex-direction: column;
    gap: 12px;
    padding: 0 16px 16px;
  }

  .half {
    padding: 30px 22px;
  }

  .half:hover {
    flex: 1;
  }

  .halftitle {
    font-size: 24px;
  }

  .halftitle .sub {
    font-size: 13px;
  }

  .flag {
    width: 36px;
    height: 36px;
    font-size: 11px;
  }

  .row {
    flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
    padding-bottom: 18px;
  }

  .label {
    min-width: 0;
    font-size: 17px;
  }

  .daycols {
    width: 100%;
    overflow-x: auto;
  }

  .daycol {
    flex: 1;
    min-width: 86px;
    padding: 0 14px;
  }

  .daycol .dom {
    font-size: 26px;
  }

  .slotbtn {
    padding: 9px 8px;
    font-size: 14px;
  }

  .chips {
    gap: 10px;
  }

  .chip {
    min-width: 96px;
    padding: 12px 14px;
    font-size: 13px;
  }

  .chip.small {
    min-width: 76px;
    padding: 10px 12px;
    font-size: 12px;
  }

  .stepper button {
    width: 48px;
    height: 48px;
  }

  .stepper span {
    font-size: 26px;
  }

  .idgrid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .idbox {
    width: 100%;
    min-height: 58px;
    font-size: 22px;
  }

  .idfield {
    margin-bottom: 20px;
  }

  .idsummary {
    margin-bottom: 14px;
    font-size: 18px;
  }

  .keypad {
    gap: 8px;
    max-width: 100%;
  }

  .keypad button {
    padding: 13px 0;
    font-size: 22px;
  }

  .calwrap {
    --rdp-day-height: 40px;
    --rdp-day-width: 40px;
    --rdp-day_button-height: 38px;
    --rdp-day_button-width: 38px;
    padding: 10px;
    font-size: 14px;
  }

  .bottom {
    padding-top: 18px;
  }

  .back {
    width: 56px;
    height: 56px;
  }

  .reserve {
    padding: 13px 28px;
    font-size: 14px;
  }

  .confirm .big {
    font-size: 24px;
  }

  .confirm .sub {
    font-size: 15px;
  }

  .bookingrow {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
  }

  .brtitle {
    font-size: 16px;
  }

  .admin {
    flex-direction: column;
  }

  .aside {
    border-right: none;
    border-bottom: 1px solid var(--border);
    flex-flow: wrap;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 10px;
    position: static;
  }

  .atitle {
    padding: 0 10px;
    font-size: 15px;
  }

  .asub {
    display: none;
  }

  .anav {
    flex-flow: wrap;
    gap: 2px;
    padding: 0;
  }

  .anav :is(button, a) {
    padding: 8px 10px;
  }

  .anav .aicon {
    display: none;
  }

  .auser {
    border-top: none;
    flex-direction: row;
    align-items: center;
    padding: 0 10px;
  }

  .apanel {
    padding: 16px 12px;
    overflow-x: auto;
  }

  .atable {
    font-size: 12.5px;
  }

  .dkkpis {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .dkkpiv {
    font-size: 26px;
  }

  .dkring {
    width: 58px;
    height: 58px;
  }

  .dkoccrow {
    grid-template-columns: minmax(70px, 110px) 1fr 84px;
  }

  .dkoccrow .dkpill {
    display: none;
  }

  .dkmix {
    flex-direction: column;
    align-items: flex-start;
  }
}

[dir="rtl"] .back svg {
  transform: scaleX(-1);
}

[dir="rtl"] .daycol {
  border-right: none;
  border-left: 1px solid var(--border);
}

[dir="rtl"] .daycol:last-child {
  border-left: none;
}

[dir="rtl"] .aside {
  border-right: none;
  border-left: 1px solid var(--border);
}

.pagehead {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  display: flex;
}

.pagehead h1 {
  letter-spacing: -.01em;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  display: flex;
}

.pagedesc {
  color: var(--fg-muted);
  margin-top: 2px;
  font-size: 13px;
}

.pageact {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.acard2 {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
  overflow: hidden;
}

.cardbar {
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg-subtle), var(--bg));
  color: var(--fg);
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  font-size: 13.5px;
  font-weight: 550;
  display: flex;
}

.cardfoot {
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  display: flex;
}

.cardfoot.end {
  justify-content: flex-end;
}

.cardpad {
  padding: 16px;
}

.acard2 .atable, .atable.flush {
  box-shadow: none;
  border: none;
  border-radius: 0;
  width: 100%;
  margin: 0;
}

.acard2 .atable tr:last-child td {
  border-bottom: none;
}

.mlauto {
  margin-left: auto;
}

.formgrid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  padding: 16px;
  display: grid;
}

.ffield {
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  font-size: 13px;
  display: flex;
}

.ffield > span {
  color: var(--fg-secondary);
  font-size: 13px;
  font-weight: 500;
}

.ffield input, .ffield select, .ffield textarea {
  width: 100%;
}

.ffield .achk {
  padding: 8px 0;
}

.ffield.grow {
  grid-column: 1 / -1;
}

.toast {
  background: var(--accent-subtle);
  color: var(--accent-hover);
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 500;
  display: inline-flex;
}

.toast.err {
  background: var(--destructive-subtle);
  color: var(--destructive);
}

.aempty {
  color: var(--fg-muted);
  text-align: center;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 16px;
  font-size: 13px;
  display: flex;
}

.aempty svg {
  color: var(--fg-muted);
  flex-shrink: 0;
}

.atable.settings td {
  padding: 10px 16px;
}

.atable.settings td:first-child {
  color: var(--fg);
  width: 60%;
  font-weight: 500;
}

.atable.settings .shelp {
  color: var(--fg-muted);
  margin-top: 1px;
  font-size: 12px;
  font-weight: 400;
  display: block;
}

.atable.settings td:last-child {
  text-align: right;
}

.atable.settings td:last-child input:not([type="checkbox"]), .atable.settings td:last-child select {
  text-align: left;
  max-width: 260px;
}

.topbar {
  z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 20px;
  display: flex;
  position: sticky;
  top: 0;
}

.topbar .crumbs {
  color: var(--fg-muted);
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  display: flex;
}

.topbar .crumbs b {
  color: var(--fg);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
  overflow: hidden;
}

.topbar .tuser {
  color: var(--fg-secondary);
  align-items: center;
  gap: 12px;
  margin-left: auto;
  font-size: 13px;
  display: flex;
}

.backbtn {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg-secondary);
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  transition: all .12s;
  display: inline-flex;
}

.backbtn:hover:not(:disabled) {
  background: var(--bg-subtle);
  color: var(--fg);
  border-color: var(--border-strong);
}

.backbtn:disabled {
  opacity: .4;
  cursor: default;
}

.aversion {
  color: var(--fg-muted);
  font-size: 12px;
}

.pager {
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.pager li {
  display: block;
}

.pager li a {
  min-width: 32px;
  height: 32px;
  color: var(--fg-secondary);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  font-variant-numeric: tabular-nums;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  padding: 0 6px;
  font-size: 13px;
  transition: background .12s, color .12s;
  display: flex;
}

.pager li a:hover {
  background: var(--bg-muted);
  color: var(--fg);
}

.pager li.sel a, .pager li.selected a {
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
}

.pager li.disabled a {
  opacity: .4;
  cursor: default;
  pointer-events: none;
}

.pager li.break a {
  pointer-events: none;
}

.pagenum {
  min-width: 32px;
  height: 32px;
  color: var(--fg-secondary);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  background: none;
  border: 1px solid #0000;
  border-radius: 6px;
  font-size: 13px;
}

.pagenum:hover {
  background: var(--bg-muted);
}

.pagenum.sel {
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
}

.searchbox {
  align-items: center;
  width: 280px;
  max-width: 100%;
  display: inline-flex;
  position: relative;
}

.searchbox > svg {
  color: var(--fg-muted);
  pointer-events: none;
  position: absolute;
  left: 10px;
}

.admin .searchbox input {
  width: 100%;
  padding-left: 32px;
  padding-right: 28px;
}

.searchbox button {
  color: var(--fg-muted);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 4px;
  padding: 2px;
  display: flex;
  position: absolute;
  right: 6px;
}

.searchbox button:hover {
  color: var(--fg);
  background: var(--bg-muted);
}

.backbtn.sm {
  width: 24px;
  height: 24px;
  margin-right: 2px;
}

.segmented {
  background: var(--bg-muted);
  border-radius: 10px;
  gap: 2px;
  padding: 3px;
  display: inline-flex;
}

.segmented button {
  color: var(--fg-secondary);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 13.5px;
  font-weight: 500;
  transition: background .15s, color .15s, box-shadow .15s;
}

.segmented button:hover {
  color: var(--fg);
}

.segmented button.sel {
  background: var(--bg);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
}

.pagehead.sub {
  margin-bottom: 14px;
}

.pagehead.sub h1 {
  font-size: 16px;
}

.uavatar {
  letter-spacing: .02em;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 999px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
}

.ucell {
  align-items: center;
  gap: 10px;
  display: flex;
}

.uname {
  font-weight: 500;
  line-height: 1.25;
}

.uhandle {
  color: var(--fg-muted);
  font-size: 12px;
}

.ubadges {
  flex-wrap: wrap;
  gap: 4px;
  display: flex;
}

.rbadge.solid {
  background: var(--accent);
  color: var(--accent-fg);
}

.upill {
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  display: inline-block;
}

.upill.on {
  background: var(--success-subtle);
  color: var(--success);
}

.upill.off {
  background: var(--bg-muted);
  color: var(--fg-muted);
}

.usection {
  border-bottom: 1px solid var(--border);
  padding: 16px;
}

.usection:last-child {
  border-bottom: none;
}

.usection h3 {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
}

.usection .shint {
  color: var(--fg-muted);
  margin-top: -6px;
  margin-bottom: 10px;
  font-size: 12px;
}

.usection.danger h3 {
  color: var(--destructive);
}

.usecfoot {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  display: flex;
}

.abtn.danger {
  background: var(--destructive);
}

.abtn.danger:hover:not(:disabled) {
  background: #b91c1c;
}

.fielderr {
  color: var(--destructive);
  margin-top: 2px;
  font-size: 12px;
}

.matrixdot {
  color: var(--border-strong);
  font-size: 16px;
  line-height: 1;
}

.matrixcheck {
  color: var(--accent);
}

.atable.matrix th {
  z-index: 5;
  position: sticky;
  top: 52px;
}

.atable.matrix td {
  text-align: center;
}

.atable.matrix td:first-child {
  text-align: left;
}

.permname {
  font-weight: 500;
}

.permdesc {
  color: var(--fg-muted);
  margin-top: 1px;
  font-size: 12px;
  font-weight: 400;
}

.switch {
  border: 1px solid var(--border-strong);
  background: var(--bg-muted);
  cursor: pointer;
  border-radius: 999px;
  width: 40px;
  height: 22px;
  padding: 0;
  transition: background .18s, border-color .18s;
  position: relative;
}

.switch .knob {
  background: #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  transition: left .18s;
  position: absolute;
  top: 2px;
  left: 2px;
  box-shadow: 0 1px 3px #00000040;
}

.switch.on {
  background: var(--accent);
  border-color: var(--accent);
}

.switch.on .knob {
  left: 20px;
}

.switch:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #2563eb59;
}

.pmsstats {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
  display: grid;
}

.pmsstat {
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  border-radius: 12px;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  display: flex;
}

.pmsval {
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 600;
}

.pmslabel {
  color: var(--fg-muted);
  margin-top: 2px;
  font-size: 11.5px;
}

.statusdot {
  border-radius: 50%;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
}

.statusdot.ok {
  background: var(--success);
  box-shadow: 0 0 0 4px var(--success-subtle);
}

.statusdot.error {
  background: var(--destructive);
  box-shadow: 0 0 0 4px var(--destructive-subtle);
}

.statusdot.running {
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-subtle);
  animation: 1.2s infinite pulse;
}

.statusdot.idle {
  background: var(--fg-muted);
}

@keyframes pulse {
  50% {
    opacity: .4;
  }
}

.spin {
  animation: 1s linear infinite spinner;
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

.cardbar.iconed {
  gap: 12px;
}

.cicon {
  background: var(--accent-subtle);
  width: 28px;
  height: 28px;
  color: var(--accent);
  border-radius: 8px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.cicon.lg {
  border-radius: 10px;
  width: 40px;
  height: 40px;
}

.ctitle {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.ctitle b {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
}

.ctitle .csub {
  color: var(--fg-muted);
  font-size: 12px;
}

.acard2.hoverable {
  transition: border-color .15s, box-shadow .15s;
}

.acard2.hoverable:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.monochip {
  background: var(--bg-muted);
  color: var(--fg-secondary);
  white-space: nowrap;
  border-radius: 6px;
  padding: 4px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
}

.pmshero {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 16px;
  display: flex;
}

.pmsstate {
  align-items: center;
  gap: 14px;
  display: flex;
}

.pmsstate .txt {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.pmsstate .big {
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 600;
  display: flex;
}

.pmsstate .ago {
  color: var(--fg-muted);
  font-size: 12.5px;
}

.pmsnums {
  flex-wrap: wrap;
  gap: 32px;
  display: flex;
}

.pmsnum .n {
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
}

.pmsnum .l {
  color: var(--fg-muted);
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font-size: 12px;
  display: inline-flex;
}

.errbanner {
  background: var(--destructive-subtle);
  color: var(--destructive);
  border-top: 1px solid var(--border);
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13px;
  display: flex;
}

.autosync {
  align-items: center;
  gap: 12px;
  padding: 16px;
  font-size: 13.5px;
  display: flex;
}

.autosync .amuted {
  font-variant-numeric: tabular-nums;
}

.tlrow {
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 13px;
  display: flex;
}

.tlrow:last-child {
  border-bottom: none;
}

.tldot {
  border-radius: 999px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  display: inline-flex;
}

.tldot.ok {
  background: var(--success-subtle);
  color: var(--success);
}

.tldot.err {
  background: var(--destructive-subtle);
  color: var(--destructive);
}

.tltext {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.tltime {
  color: var(--fg-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.usermenu {
  margin-left: auto;
  position: relative;
}

.utrigger {
  cursor: pointer;
  color: var(--fg-secondary);
  font-size: 13px;
  font-family: var(--sans);
  background: none;
  border: none;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  transition: background .12s;
  display: inline-flex;
}

.utrigger:hover {
  background: var(--bg-muted);
}

.utrigger .uavatar {
  border: 1px solid var(--border);
  transition: box-shadow .15s;
}

.utrigger:hover .uavatar {
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.umenu {
  z-index: 60;
  background: var(--bg);
  border: 1px solid var(--border);
  width: 240px;
  box-shadow: var(--shadow-md);
  border-radius: 12px;
  padding: 6px;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
}

.umenuhead {
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  padding: 10px 10px 12px;
  display: flex;
}

.umenuhead .uname {
  font-size: 13.5px;
}

.umenuitem {
  cursor: pointer;
  width: 100%;
  color: var(--fg);
  font-size: 13.5px;
  font-family: var(--sans);
  text-align: left;
  background: none;
  border: none;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  transition: background .12s;
  display: flex;
}

.umenuitem:hover {
  background: var(--bg-muted);
}

.umenuitem svg {
  color: var(--fg-muted);
}

.umenuitem.destructive, .umenuitem.destructive svg {
  color: var(--destructive);
}

.umodal-overlay {
  z-index: 100;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: #0f172a70;
  justify-content: center;
  align-items: center;
  padding: 16px;
  animation: .18s uoverlayin;
  display: flex;
  position: fixed;
  inset: 0;
}

@keyframes uoverlayin {
  from {
    opacity: 0;
  }
}

.umodal {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 420px;
  max-width: 100%;
  animation: .22s cubic-bezier(.22, 1, .36, 1) umodalin;
  overflow: hidden;
  box-shadow: 0 28px 64px -20px #10182866, 0 0 0 1px #10182808;
}

@keyframes umodalin {
  from {
    opacity: 0;
    transform: translateY(12px)scale(.98);
  }
}

.umodal.wide {
  width: 760px;
  max-width: 92vw;
}

.umodal.wide .umodalbody {
  overflow: visible;
}

.umodalhead {
  border-bottom: 1px solid var(--border);
  letter-spacing: -.01em;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 17px 20px;
  font-size: 15.5px;
  font-weight: 650;
  display: flex;
  position: relative;
}

.umodalhead:after {
  content: "";
  background: linear-gradient(90deg, var(--accent), transparent 70%);
  opacity: .5;
  height: 2px;
  position: absolute;
  bottom: -1px;
  left: 20px;
  right: 20px;
}

.umodalbody {
  flex-direction: column;
  gap: 8px;
  max-height: 72vh;
  padding: 14px 20px;
  display: flex;
  overflow-y: auto;
}

.umodalbody.timingform {
  gap: 6px;
  padding: 12px 20px;
}

.timingform .fsection {
  margin: 6px 0 2px;
}

.timingform .fgrid2 {
  grid-template-columns: 1fr;
  gap: 6px !important;
}

.timingform .ffield {
  gap: 12px;
}

.umodalbody input {
  width: 100%;
}

.umodalfoot {
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  display: flex;
}

.uok {
  color: var(--success);
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
}

@media (max-width: 640px) {
  .utrigger .uname-inline {
    display: none;
  }
}

.hgroup {
  color: var(--fg-muted);
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 400;
  display: inline-flex;
}

.cardnote {
  background: var(--success-subtle);
  color: var(--success);
  border-top: 1px solid var(--border);
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13px;
  display: flex;
}

.cardnote.err {
  background: var(--destructive-subtle);
  color: var(--destructive);
}

.cardnote.inline {
  background: none;
  border: none;
  padding: 0;
  font-weight: 500;
}

.setpage {
  flex-direction: column;
  gap: 16px;
  max-width: 760px;
  display: flex;
}

.setsection {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.setbar {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  display: flex;
}

.setinfo h3 {
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  display: flex;
}

.setinfo p {
  color: var(--fg-muted);
  margin: 4px 0 0;
  font-size: 13px;
}

.setinfo.pad {
  padding: 18px 20px 0;
}

.setbody {
  padding: 14px 20px 18px;
}

.setfoot {
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  display: flex;
}

.setresult {
  color: var(--success);
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
}

.setresult.err {
  color: var(--destructive);
}

.setnote {
  background: var(--success-subtle);
  color: var(--success);
  border-top: 1px solid var(--border);
  padding: 10px 20px;
  font-size: 13px;
}

.setnote.err {
  background: var(--destructive-subtle);
  color: var(--destructive);
}

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

.setrow {
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  font-size: 13px;
  display: flex;
}

.setrow:last-child {
  border-bottom: none;
}

.setrow .ago {
  color: var(--fg-muted);
  margin-left: auto;
  font-size: 12.5px;
}

.setrow .okic {
  color: var(--success);
}

.setrow .erric {
  color: var(--destructive);
}

.setbar.compact {
  padding: 10px 20px;
}

.setbar.compact h3 {
  font-size: 14px;
}

.agroupbtn.holds {
  color: var(--accent);
}

.agroupbtn.holds .gchev {
  opacity: 1;
  color: var(--accent);
}

.anav :is(button, a).indent {
  border-left: 1px solid var(--border);
  border-radius: 0 6px 6px 0;
  width: calc(100% - 22px);
  margin-left: 22px;
  padding-left: 12px;
  font-size: 13px;
}

.anav :is(button, a).indent.sel {
  border-left-color: var(--accent);
}

.anav :is(button, a).indent.sel:before {
  display: none;
}

.anav :is(button, a).indent .aicon {
  width: 18px;
}

.anav :is(button, a).indent .aicon svg {
  width: 18px;
  height: 18px;
}

[dir="rtl"] .anav :is(button, a).sel:before {
  left: auto;
  right: 0;
}

[dir="rtl"] .anav :is(button, a).indent {
  border-left: none;
  border-right: 1px solid var(--border);
  border-radius: 6px 0 0 6px;
  margin-left: 0;
  margin-right: 22px;
  padding-left: 10px;
  padding-right: 12px;
}

[dir="rtl"] .anav :is(button, a).indent.sel {
  border-right-color: var(--accent);
}

[dir="rtl"] .agroupbtn .gchev {
  transform: scaleX(-1);
}

[dir="rtl"] .agroupbtn .gchev.rot {
  transform: scaleX(-1)rotate(-90deg);
}

.atable.dense td {
  padding: 6px 12px;
}

.atable.dense th {
  height: 38px;
}

.atable.dense td input:not([type="checkbox"]), .atable.dense td select {
  height: 28px;
  padding: 2px 8px;
  font-size: 13px;
}

.addinline {
  flex: 1;
  align-items: center;
  gap: 8px;
  display: flex;
}

.addinline input {
  height: 30px;
  padding: 3px 10px;
  font-size: 13px;
}

.chargewarn {
  background: var(--warning-subtle);
  border: 1px solid #d9770659;
  border-radius: 10px;
  flex-direction: column;
  gap: 4px;
  max-width: 640px;
  margin-top: 8px;
  padding: 14px 18px;
  display: flex;
}

.chargewarn b {
  color: var(--warning);
  font-size: 15px;
  font-weight: 600;
}

.chargewarn span {
  color: #92400e;
  font-size: 14px;
  line-height: 1.5;
}

.cardcharge {
  background: var(--warning-subtle);
  color: #92400e;
  letter-spacing: .2px;
  white-space: nowrap;
  border: 1px solid #d9770666;
  border-radius: 999px;
  flex-shrink: 0;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
}

[dir="rtl"] .cardcharge {
  left: 10px;
  right: auto;
}

.menuwrap {
  flex-direction: column;
  gap: 22px;
  max-width: 860px;
  display: flex;
  overflow-y: auto;
}

.menucat h2 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
}

.menuitem {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
  padding: 12px 16px;
  display: flex;
}

.mi-name {
  font-size: 15.5px;
  font-weight: 500;
}

.mi-desc {
  color: var(--fg-muted);
  margin-top: 2px;
  font-size: 13px;
}

.mi-price {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: 14.5px;
  font-weight: 600;
}

.mi-qty {
  align-items: center;
  gap: 10px;
  display: flex;
}

.mi-qty button {
  border: 1px solid var(--border-strong);
  background: var(--bg);
  cursor: pointer;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  display: flex;
}

.mi-qty button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.mi-qty span {
  text-align: center;
  font-variant-numeric: tabular-nums;
  min-width: 22px;
  font-weight: 600;
}

.menutotal {
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 600;
}

.maint {
  color: #fff;
  background: #08080c;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 34px;
  min-height: 100vh;
  padding: 40px 24px;
  display: flex;
  position: relative;
}

.maintcard {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 560px;
  display: flex;
}

.mainticon {
  color: #fff;
  background: #ffffff0f;
  border: 1px solid #ffffff24;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 96px;
  height: 96px;
  margin-bottom: 20px;
  animation: 2.4s ease-in-out infinite maintpulse;
  display: flex;
}

@keyframes maintpulse {
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 0 14px #ffffff0a;
  }
}

.maintcard h1 {
  letter-spacing: -.01em;
  color: #fff;
  margin: 10px 0 6px;
  font-size: 32px;
  font-weight: 700;
}

.maintcard p {
  color: #ffffff9e;
  max-width: 480px;
  font-size: 16px;
  line-height: 1.7;
}

.maintbar {
  background: #ffffff1f;
  border-radius: 999px;
  width: 180px;
  height: 3px;
  margin-top: 26px;
  overflow: hidden;
}

.maintbar span {
  background: #ffffffbf;
  border-radius: 999px;
  width: 40%;
  height: 100%;
  animation: 1.8s ease-in-out infinite alternate maintslide;
  display: block;
}

.maintfooter {
  flex-direction: column;
  align-items: center;
  gap: 16px;
  display: flex;
}

.maintqrbox {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  display: flex;
}

.maintqrbox .maintqr {
  background: #fff;
  border-radius: 12px;
  width: 128px;
  height: 128px;
  padding: 8px;
  box-shadow: 0 8px 26px #0006;
}

.maintqrcap {
  color: #fff9;
  font-size: 13px;
}

.maintwa {
  color: #08120c;
  background: #25d366;
  border-radius: 999px;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .12s, filter .15s;
  display: inline-flex;
  box-shadow: 0 8px 24px #25d36640;
}

.maintwa:hover {
  filter: brightness(1.06);
}

.maintwa:active {
  transform: scale(.97);
}

.maintbrand {
  flex-direction: column;
  align-items: center;
  gap: 7px;
  display: flex;
}

.maintbrandname {
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.maintby {
  color: #ffffff8c;
  font-size: 14px;
}

.maintstaff {
  cursor: pointer;
  color: #ffffff47;
  letter-spacing: .04em;
  background: none;
  border: 0;
  padding: 6px 8px;
  font-size: 12px;
  position: absolute;
  bottom: 16px;
  right: 20px;
}

.maintstaff:hover {
  color: #fff9;
}

.maintstaffmask {
  z-index: 50;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: #0009;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}

.maintstaffbox {
  background: #16161c;
  border: 1px solid #ffffff1f;
  border-radius: 16px;
  flex-direction: column;
  gap: 12px;
  width: min(360px, 90vw);
  padding: 26px 24px;
  display: flex;
  box-shadow: 0 30px 80px #0009;
}

.maintstafftitle {
  color: #fff;
  text-align: center;
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: 700;
}

.maintstaffin {
  color: #fff;
  width: 100%;
  font: inherit;
  background: #ffffff0d;
  border: 1px solid #ffffff29;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
}

.maintstaffin::placeholder {
  color: #fff6;
}

.maintstaffin:focus {
  border-color: #fff6;
  outline: none;
}

.maintstafferr {
  color: #f87171;
  text-align: center;
  font-size: 13px;
}

.maintstaffbtns {
  gap: 10px;
  margin-top: 4px;
  display: flex;
}

.maintstaffbtns button {
  color: #fffc;
  font: inherit;
  cursor: pointer;
  background: none;
  border: 1px solid #ffffff29;
  border-radius: 10px;
  flex: 1;
  padding: 11px;
  font-weight: 600;
}

.maintstaffbtns button.prim {
  color: #111;
  background: #fff;
  border-color: #fff;
}

.maintstaffbtns button:disabled {
  opacity: .5;
  cursor: default;
}

.maintheart {
  color: #e0245e;
  animation: 1.3s ease-in-out infinite heartbeat;
  display: inline-block;
}

@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
  }

  12% {
    transform: scale(1.35);
  }

  24% {
    transform: scale(1);
  }

  36% {
    transform: scale(1.22);
  }

  50% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .maintheart {
    animation: none;
  }
}

@keyframes maintslide {
  from {
    transform: translateX(-30%);
  }

  to {
    transform: translateX(280%);
  }
}

.sharewrap {
  flex-direction: column;
  gap: 26px;
  max-width: 720px;
  margin-top: 8vh;
  display: flex;
}

.shareq {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.4;
}

.sharebtns {
  flex-wrap: wrap;
  gap: 16px;
  display: flex;
}

.sharelist {
  flex-wrap: wrap;
  gap: 10px;
  display: flex;
}

.sharechip {
  background: var(--accent-subtle);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 500;
  display: inline-flex;
}

.sharechip button {
  color: inherit;
  cursor: pointer;
  background: none;
  border: none;
  display: flex;
}

.tinput {
  width: 100%;
  font: inherit;
  color: var(--fg);
  background: none;
  border: 1px solid #0000;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 13px;
}

.tinput:hover {
  border-color: var(--border);
}

.tinput:focus {
  border-color: var(--accent);
  background: var(--bg);
  outline: none;
}

.accomp {
  letter-spacing: -.01em;
  color: var(--fg-secondary);
  margin-top: 4px;
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 500;
}

.staygrid {
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  display: flex;
}

.staycell {
  text-align: center;
  background: var(--bg);
  border: 1px solid var(--border);
  min-width: 108px;
  box-shadow: var(--shadow-sm);
  border-radius: 12px;
  padding: 10px 14px 9px;
  transition: border-color .15s, box-shadow .15s;
}

.staycell:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.staycell i {
  color: var(--accent);
  justify-content: center;
  align-items: center;
  margin: 0 auto 4px;
  display: flex;
}

.staycell i svg {
  width: 19px;
  height: 19px;
}

.staycell span {
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--fg-secondary);
  font-size: 10px;
  font-weight: 600;
  display: block;
}

.staycell b {
  color: var(--fg);
  margin-top: 2px;
  font-size: 16px;
  font-weight: 600;
  display: block;
}

@media (max-width: 640px) {
  .staycell {
    min-width: 92px;
    padding: 8px 10px 7px;
  }

  .staycell b {
    font-size: 14px;
  }
}

.errmask {
  z-index: 60;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #0609106b;
  justify-content: center;
  align-items: center;
  padding: 24px;
  animation: .2s errfade;
  display: flex;
  position: fixed;
  inset: 0;
  overflow-y: auto;
}

.errpop {
  --accent: #f87171;
  --accent-2: #ef4444;
  background: radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 58%),
    linear-gradient(180deg, #1e2739f5, #111827f7);
  -webkit-backdrop-filter: blur(28px) saturate(1.3);
  backdrop-filter: blur(28px) saturate(1.3);
  text-align: center;
  color: #fff;
  border: 1px solid #ffffff1f;
  border-radius: 28px;
  width: min(440px, 100vw - 48px);
  padding: 44px 40px 34px;
  animation: .34s cubic-bezier(.22, 1, .36, 1) errpopin;
  position: relative;
  overflow: hidden;
  box-shadow: 0 40px 90px -20px #0009, 0 0 0 1px #0003, inset 0 1px #ffffff29;
}

.errpop.warn {
  --accent: var(--brand, #2563eb);
  --accent-2: var(--brand, #2563eb);
}

.errpop:before {
  content: "";
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .85;
  height: 2px;
  position: absolute;
  top: 0;
  left: 22%;
  right: 22%;
}

.erricon {
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent) 28%, transparent), color-mix(in srgb, var(--accent) 12%, transparent));
  width: 78px;
  height: 78px;
  color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 8px 30px -6px color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  margin: 4px auto 24px;
  display: flex;
  position: relative;
}

.erricon-halo {
  pointer-events: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 999px;
  animation: 2.2s ease-out infinite errhalo;
  position: absolute;
  inset: -6px;
}

.errtitle {
  color: #fff;
  letter-spacing: -.015em;
  font-size: 24.25px;
  font-weight: 650;
}

.errmsg {
  color: #fff;
  max-width: 34ch;
  margin-top: 12px;
  margin-left: auto;
  margin-right: auto;
  font-size: 17.3px;
  line-height: 1.62;
}

.errok {
  cursor: pointer;
  color: #fff;
  width: 100%;
  height: 54px;
  font: inherit;
  letter-spacing: .01em;
  background: none;
  border: 1px solid #ffffff47;
  border-radius: 14px;
  margin-top: 26px;
  font-size: 18px;
  font-weight: 600;
  transition: background .15s, border-color .15s, transform .12s;
  position: relative;
}

.errok:hover {
  background: #ffffff14;
  border-color: #ffffff80;
}

.errok:active {
  transform: scale(.985);
}

@keyframes errfade {
  from {
    opacity: 0;
  }
}

@keyframes errpopin {
  from {
    opacity: 0;
    transform: translateY(18px)scale(.955);
  }
}

@keyframes errhalo {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 34%, transparent);
  }

  70%, 100% {
    box-shadow: 0 0 0 16px #0000;
  }
}

@media (prefers-reduced-motion: reduce) {
  .erricon-halo {
    animation: none;
  }
}

.errhint {
  color: #ffffffb3;
  background: #ffffff0f;
  border: 1px solid #ffffff14;
  border-radius: 12px;
  margin-top: 16px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.55;
}

.welcomebg {
  background: linear-gradient(#f8fafc59, #f8fafc8c), url("/img/dining-room.webp") center / cover no-repeat fixed;
}

.welcomecard {
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  background: #fffc;
  border: 1px solid #ffffffa6;
  border-radius: 24px;
  padding: 34px 40px 30px;
  box-shadow: 0 20px 56px #0f172a2e, inset 0 1px #fffc;
}

.welcomecard .staycell {
  background: #ffffffb8;
}

@media (max-width: 640px) {
  .welcomecard {
    border-radius: 18px;
    padding: 22px 18px 20px;
  }
}

.nextbtn {
  gap: 8px;
  padding: 12px 26px;
  font-size: 16px;
}

.nextbtn svg {
  transition: transform .18s;
}

.nextbtn:hover svg, .nextbtn:active svg {
  transform: translateX(4px);
}

.nextbtn:active {
  transform: scale(.98);
}

[dir="rtl"] .nextbtn svg {
  transform: scaleX(-1);
}

[dir="rtl"] .nextbtn:hover svg, [dir="rtl"] .nextbtn:active svg {
  transform: scaleX(-1)translateX(4px);
}

.glasswrap {
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  background: #fffc;
  border: 1px solid #ffffffa6;
  border-radius: 24px;
  padding: 28px 32px;
  box-shadow: 0 20px 56px #0f172a2e, inset 0 1px #fffc;
}

.glasswrap .idbox, .glasswrap .keypad button {
  background: #ffffffd9;
}

@media (max-width: 640px) {
  .glasswrap {
    border-radius: 18px;
    padding: 18px 14px;
  }
}

.nextcircle {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
  cursor: pointer;
  width: 72px;
  height: 72px;
  box-shadow: var(--shadow-sm);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  line-height: 1;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s, transform .12s;
  display: inline-flex;
}

.nextcircle:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
}

.nextcircle:active:not(:disabled) {
  transform: scale(.94);
}

.nextcircle:disabled {
  cursor: not-allowed;
  color: var(--border-strong);
}

[dir="rtl"] .nextcircle svg {
  transform: scaleX(-1);
}

@media (max-width: 640px) {
  .nextcircle {
    width: 56px;
    height: 56px;
  }
}

.pageheadright {
  align-items: center;
  gap: 14px;
  margin-left: auto;
  display: flex;
}

.transexp td {
  background: var(--bg-subtle);
}

.transgrid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px 16px;
  padding: 6px 2px;
  display: grid;
}

.transgrid label {
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--fg-secondary);
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 600;
  display: block;
}

.tinput.boxed {
  border-color: var(--border);
  background: var(--bg);
}

.hlogo.noimg {
  color: var(--accent);
  background: none;
  border: none;
}

.agroupbtn .gicon {
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 26px;
  display: inline-flex;
}

.filterbar {
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  padding: 12px 16px;
  display: flex;
}

.filterbar .ffilter {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.filterbar .ffilter.grow {
  flex: 180px;
  min-width: 160px;
}

.filterbar .ffilter.w110 {
  width: 110px;
}

.filterbar .ffilter.w130 {
  width: 140px;
}

.filterbar label {
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fg-secondary);
  font-size: 11px;
  font-weight: 600;
}

.filterbar input, .filterbar select {
  border: 1px solid var(--border);
  height: 32px;
  font: inherit;
  background: var(--bg);
  color: var(--fg);
  border-radius: 6px;
  width: 100%;
  padding: 0 10px;
  font-size: 13px;
}

.filterbar input:focus, .filterbar select:focus {
  border-color: var(--accent);
  outline: none;
}

.filterbar .dirbtn {
  justify-content: center;
  width: 34px;
  height: 32px;
  padding: 0;
}

.dietpill {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--fg-secondary);
  white-space: nowrap;
  border-radius: 999px;
  margin: 1px 3px 1px 0;
  padding: 2px 8px;
  font-size: 11px;
  display: inline-block;
}

.chargepill {
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11.5px;
  font-weight: 600;
  display: inline-block;
}

.chargepill.free {
  background: var(--success-subtle);
  color: var(--success);
}

.chargepill.comp {
  background: var(--bg-muted);
  color: var(--fg-secondary);
}

.chargepill.chargeable {
  background: var(--warning-subtle);
  color: #92400e;
}

.rowacts {
  white-space: nowrap;
}

.rowbtn {
  background: var(--bg);
  border: 1px solid var(--border);
  cursor: pointer;
  color: var(--fg-secondary);
  border-radius: 6px;
  margin-inline-end: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  transition: border-color .12s, color .12s, background .12s;
}

.rowbtn:hover {
  border-color: var(--border-strong);
  color: var(--fg);
  background: var(--bg-subtle);
}

.rowbtn.danger {
  color: var(--destructive);
}

.rowbtn.danger:hover {
  border-color: var(--destructive);
  background: var(--destructive-subtle);
}

.rowbtn {
  vertical-align: middle;
  align-items: center;
  gap: 5px;
  display: inline-flex;
}

.rowbtn.ok {
  color: var(--success);
}

.rowbtn.ok:hover {
  border-color: var(--success);
  background: var(--success-subtle);
}

.srcpill {
  letter-spacing: .03em;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 10.5px;
  font-weight: 600;
  display: inline-block;
}

.srcpill.kiosk {
  background: var(--accent-subtle);
  color: var(--accent);
}

.srcpill.admin {
  background: var(--bg-muted);
  color: var(--fg-secondary);
}

.nowrap {
  white-space: nowrap;
}

.prefs {
  max-width: 220px;
}

.chargetxt {
  font-weight: 500;
}

.chargetxt.free {
  color: var(--success);
}

.chargetxt.chargeable {
  color: #b45309;
}

.chargetxt.comp {
  color: var(--fg-secondary);
}

input[type="time"] {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-variant-numeric: tabular-nums;
  border-radius: 8px;
  min-width: 106px;
  padding: 7px 10px;
  font-size: 13.5px;
  transition: border-color .12s, box-shadow .12s;
}

input[type="time"]:hover {
  border-color: var(--border-strong);
}

input[type="time"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
  outline: none;
}

input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: .55;
  cursor: pointer;
  filter: grayscale();
}

input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

input[type="time"]::-webkit-datetime-edit-hour-field:focus {
  background: var(--accent-subtle);
  color: var(--accent-hover);
  border-radius: 4px;
}

input[type="time"]::-webkit-datetime-edit-minute-field:focus {
  background: var(--accent-subtle);
  color: var(--accent-hover);
  border-radius: 4px;
}

input[type="time"]::-webkit-datetime-edit-ampm-field:focus {
  background: var(--accent-subtle);
  color: var(--accent-hover);
  border-radius: 4px;
}

.tnum {
  font-variant-numeric: tabular-nums;
}

.cellok {
  color: var(--success);
}

.cellmuted {
  color: var(--fg-muted);
}

tr.editing td {
  background: var(--bg-subtle);
}

.menurow .menurowbtns {
  flex-wrap: wrap;
  gap: 10px;
  display: flex;
}

.menupdfbtn {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  font: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 500;
  transition: border-color .15s, box-shadow .15s, transform .12s;
  display: inline-flex;
}

.menupdfbtn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.menupdfbtn:active {
  transform: scale(.97);
}

.menupdfbtn.sel {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle);
}

.pdfmask {
  z-index: 80;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: #0f172ab8;
  justify-content: center;
  align-items: center;
  padding: 24px;
  animation: .18s errfade;
  display: flex;
  position: fixed;
  inset: 0;
}

.pdfframe {
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 960px;
  height: 90vh;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 64px #0f172a66;
}

.pdfframe iframe {
  border: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.pdfclose {
  z-index: 2;
  cursor: pointer;
  background: #ffffffe6;
  border: 1px solid #0000001a;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  display: flex;
  position: absolute;
  top: 12px;
  right: 12px;
}

.pdfclose:hover {
  background: #fff;
}

.pricebox {
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 8px;
  align-items: stretch;
  width: fit-content;
  max-width: 160px;
  height: 32px;
  transition: border-color .15s, box-shadow .15s;
  display: inline-flex;
}

.pricebox:hover {
  border-color: var(--border-strong);
}

.pricebox:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.pricebox input {
  text-align: right;
  font-variant-numeric: tabular-nums;
  width: 82px;
  color: var(--fg);
  background: none;
  border: 0;
  padding: 0 10px;
  font-size: 13.5px;
}

.pricebox input:focus {
  box-shadow: none;
  outline: none;
}

.pricebox em {
  color: var(--fg-muted);
  border-left: 1px solid var(--border);
  letter-spacing: .08em;
  background: none;
  align-items: center;
  padding: 0 10px;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  display: inline-flex;
}

.nospin::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.nospin::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.nospin {
  -moz-appearance: textfield;
}

.iconbtn {
  width: 28px;
  height: 28px;
  color: var(--fg-secondary);
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  transition: background .12s, border-color .12s, color .12s;
  display: inline-flex;
}

.iconbtn:hover {
  background: var(--bg-subtle);
  border-color: var(--border);
  color: var(--fg);
}

.iconbtn.danger:hover {
  background: var(--destructive-subtle);
  border-color: var(--destructive);
  color: var(--destructive);
}

.abtn.danger {
  background: var(--destructive);
  border-color: var(--destructive);
  color: #fff;
}

.abtn.danger:hover:not(:disabled) {
  background: #b91c1c;
  border-color: #b91c1c;
}

.menuhead {
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  display: flex;
}

.menutitle {
  color: var(--fg);
  letter-spacing: -.01em;
  font-size: 16px;
  font-weight: 600;
}

.menusub {
  color: var(--fg-secondary);
  margin-top: 2px;
  font-size: 12.5px;
}

.menutrans .descarea {
  resize: vertical;
  width: 100%;
  min-height: 46px;
  font: inherit;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  line-height: 1.5;
}

.menutrans .descarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
  outline: none;
}

.skel {
  background: var(--bg-subtle);
  background: linear-gradient(90deg, var(--bg-subtle) 25%, var(--bg-muted) 50%, var(--bg-subtle) 75%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: 1.4s ease-in-out infinite skelshimmer;
  display: inline-block;
}

.skel-line {
  border-radius: 4px;
}

@keyframes skelshimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.crumbtop {
  color: var(--fg-muted);
  letter-spacing: .01em;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 12.5px;
  display: flex;
}

.crumbtop .cur {
  color: var(--fg-secondary);
  font-weight: 500;
}

.utrigger.compact {
  background: none;
  border: 1px solid #0000;
  border-radius: 999px;
  padding: 4px;
}

.utrigger.compact:hover {
  border-color: var(--border);
  background: var(--bg-subtle);
}

.addres {
  max-width: 1200px;
}

.addres-grid {
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  gap: 20px;
  display: grid;
}

@media (max-width: 1000px) {
  .addres-grid {
    grid-template-columns: 1fr;
  }
}

.addres .section {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 12px;
  padding: 16px 18px;
}

.addres .steplabel {
  letter-spacing: .02em;
  color: var(--fg-secondary);
  text-transform: uppercase;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
}

.addres .stepnum {
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.typegrid {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  display: grid;
}

.typecard {
  border: 1px solid var(--border);
  background: var(--bg);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--fg-secondary);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color .12s, background .12s;
}

.typecard:hover {
  border-color: var(--border-strong);
}

.typecard.sel {
  border-color: var(--accent);
  background: var(--accent-subtle);
  color: var(--fg);
}

.typecard .tname {
  color: var(--fg);
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: 600;
}

.typecard .tdesc {
  font-size: 12px;
}

.roomfield label {
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fg-secondary);
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 600;
  display: block;
}

.roominput {
  align-items: center;
  display: flex;
  position: relative;
}

.roominput input {
  width: 100%;
  height: 40px;
  font: inherit;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  border-radius: 8px;
  padding: 0 40px 0 36px;
  font-size: 15px;
  transition: border-color .12s, box-shadow .12s;
}

.roominput input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
  outline: none;
}

.roominput .rlens {
  color: var(--fg-muted);
  pointer-events: none;
  position: absolute;
  left: 12px;
}

.roominput .rspin {
  color: var(--fg-muted);
  animation: .9s linear infinite spin;
  position: absolute;
  right: 12px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.stepperctl {
  border: 1px solid var(--border);
  border-radius: 8px;
  align-items: center;
  gap: 4px;
  height: 32px;
  display: inline-flex;
  overflow: hidden;
}

.stepperctl button {
  background: var(--bg);
  cursor: pointer;
  width: 32px;
  height: 32px;
  color: var(--fg-secondary);
  border: 0;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.stepperctl button:hover {
  background: var(--bg-subtle);
  color: var(--fg);
}

.stepperctl span {
  text-align: center;
  font-variant-numeric: tabular-nums;
  min-width: 40px;
  font-weight: 600;
}

.slotgrid {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  display: grid;
}

.slotpick {
  border: 1px solid var(--border);
  background: var(--bg);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--fg);
  border-radius: 8px;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  transition: border-color .12s, background .12s;
  display: flex;
}

.slotpick b {
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}

.slotpick span {
  color: var(--fg-secondary);
  font-size: 11px;
}

.slotpick:hover:not(:disabled) {
  border-color: var(--accent);
}

.slotpick.sel {
  border-color: var(--accent);
  background: var(--accent-subtle);
  color: var(--fg);
}

.slotpick:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.addres-side {
  position: sticky;
  top: 74px;
}

.summary {
  border-top: 1px dashed var(--border);
  margin-bottom: 14px;
  padding-top: 10px;
}

.summary .srow {
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
  display: flex;
}

.summary .srow span {
  color: var(--fg-secondary);
}

.summary .srow b {
  color: var(--fg);
  text-align: right;
  font-weight: 600;
}

.abtn.wide {
  justify-content: center;
  width: 100%;
  padding: 12px 18px;
}

.guestcard .gname {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
  display: flex;
}

.guestcard .gmeta {
  color: var(--fg-secondary);
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  display: flex;
}

.guestcard .gmeta span {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.guestcard .gmeta svg {
  color: var(--fg-muted);
}

.guestcard .gmeta {
  flex-direction: column;
  gap: 0;
  display: flex;
}

.guestcard .grow {
  border-bottom: 1px dashed var(--border);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  display: flex;
}

.guestcard .grow:last-child {
  border-bottom: 0;
}

.guestcard .glabel {
  color: var(--fg-secondary);
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
}

.guestcard .glabel svg {
  color: var(--fg-muted);
}

.guestcard .grow b {
  color: var(--fg);
  text-align: right;
  font-size: 13px;
  font-weight: 600;
}

@keyframes adatein {
  from {
    opacity: 0;
    transform: translateY(-4px)scale(.98);
  }
}

@keyframes fpopen {
  from {
    opacity: 0;
    transform: translateY(-4px)scale(.98);
  }
}

.crumbline {
  color: var(--fg-muted);
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  display: flex;
}

.crumbline .cur {
  color: var(--fg-secondary);
  font-weight: 500;
}

.crumbline svg {
  color: var(--fg-muted);
}

.crumbline.right {
  margin-bottom: 0;
}

@keyframes rdpin {
  from {
    opacity: 0;
    transform: translateY(-4px)scale(.98);
  }
}

.datewrap.adm {
  width: 100%;
  position: relative;
}

.datewrap.adm:before {
  content: "";
  z-index: 1;
  pointer-events: none;
  background: var(--fg-muted);
  width: 15px;
  height: 15px;
  position: absolute;
  top: 18px;
  left: 11px;
  transform: translateY(-50%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
}

.datewrap.adm .datebtn {
  background: var(--bg);
  border: 1px solid var(--border);
  width: 100%;
  height: 36px;
  color: var(--fg);
  text-align: left;
  font: inherit;
  cursor: pointer;
  border-radius: 0;
  align-items: center;
  padding: 0 12px 0 32px;
  font-size: 13px;
  transition: border-color .12s, box-shadow .12s;
  display: flex;
}

.datewrap.adm .datebtn:hover {
  border-color: var(--border-strong);
}

.datewrap.adm .datebtn:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
  outline: none;
}

.datewrap.adm .datebtn .ph {
  color: var(--fg-muted);
}

.timewrap.adm {
  width: 120px;
  display: inline-block;
  position: relative;
  overflow: visible;
}

.timingform .ffield .timewrap.adm {
  flex: 0 0 120px !important;
  width: 120px !important;
  max-width: 120px !important;
}

.seatgrid-row .timewrap.adm {
  flex: auto !important;
  width: 100% !important;
}

.timewrap.adm:before {
  content: "";
  z-index: 1;
  pointer-events: none;
  background: var(--fg-muted);
  width: 15px;
  height: 15px;
  position: absolute;
  top: 18px;
  left: 11px;
  transform: translateY(-50%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") center / contain no-repeat;
}

.timewrap.adm .timebtn {
  background: var(--bg);
  border: 1px solid var(--border);
  width: 100%;
  height: 36px;
  color: var(--fg);
  text-align: left;
  font: inherit;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
  align-items: center;
  padding: 0 12px 0 32px;
  font-size: 13px;
  transition: border-color .12s, box-shadow .12s;
  display: flex;
  border-radius: 0 !important;
}

.timewrap.adm .timebtn:hover {
  border-color: var(--border-strong);
}

.timewrap.adm .timebtn:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
  outline: none;
}

.timewrap.adm .timebtn .ph {
  color: var(--fg-muted);
}

.timewrap.adm .admtime {
  z-index: 100;
  background: var(--bg);
  border: 1px solid var(--border);
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
  overscroll-behavior: contain;
  border-radius: 0;
  width: 100%;
  max-height: 190px;
  padding: 0;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  overflow: hidden auto;
  box-shadow: 0 8px 24px -8px #0f172a1f, 0 2px 6px -2px #0f172a0f;
}

.timewrap.adm .admtime::-webkit-scrollbar {
  width: 5px;
}

.timewrap.adm .admtime::-webkit-scrollbar-track {
  background: none;
  margin: 4px 0;
}

.timewrap.adm .admtime::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  background-clip: padding-box;
  border: 1px solid #0000;
  border-radius: 999px;
}

.timewrap.adm .admtime::-webkit-scrollbar-thumb:hover {
  background: var(--fg-muted);
  background-clip: padding-box;
  border: 1px solid #0000;
}

.timewrap.adm .admtime .timeitem {
  border: 0;
  border-bottom: 1px solid var(--border);
  width: 100%;
  color: var(--fg);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  background: none;
  border-radius: 0;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 12px 7px 32px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  transition: background .1s, color .1s;
  display: flex;
  position: relative;
}

.timewrap.adm .admtime .timeitem:last-child {
  border-bottom: 0;
}

.timewrap.adm .admtime .timeitem:before {
  content: "";
  background: var(--fg-muted);
  width: 12px;
  height: 12px;
  transition: background .1s;
  position: absolute;
  top: 50%;
  left: 11px;
  transform: translateY(-50%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") center / contain no-repeat;
}

.timewrap.adm .admtime .timeitem:hover:before, .timewrap.adm .admtime .timeitem[data-selected="true"]:before {
  background: currentColor;
}

.timewrap.adm .admtime .timeitem:hover {
  background: var(--accent-subtle);
  color: var(--accent);
}

.timewrap.adm .admtime .timeitem[data-selected="true"] {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 2px color-mix(in srgb,var(--accent) 40%,transparent);
}

.timewrap.adm .admtime .timeitem[data-selected="true"]:hover {
  background: var(--accent-hover);
}

.admcal, .tsel-menu {
  --accent: #374151;
  --accent-hover: #1f2937;
  --accent-subtle: #f0f1f3;
  --accent-fg: #fff;
}

.admcal {
  z-index: 2000;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  box-sizing: border-box;
  border-radius: 8px;
  padding: 6px 8px 8px;
}

.admcal .rdp {
  --rdp-accent-color: var(--accent);
  --rdp-accent-background-color: var(--accent-subtle);
  --rdp-today-color: var(--accent);
  --rdp-day-height: 22px;
  --rdp-day_button-height: 22px;
  --rdp-day_button-width: 24px;
  --rdp-day_button-border: 0;
  --rdp-nav_button-height: 22px;
  --rdp-nav_button-width: 22px;
  --rdp-nav-height: 24px;
  --rdp-weekday-padding: 0;
  --rdp-months-gap: 0;
  --rdp-animation_duration: 0s;
  width: 100%;
  color: var(--fg);
  margin: 0;
  font-size: 12px;
}

.admcal .rdp [class*="rdp-slide"] {
  animation: none !important;
}

.admcal .rdp-months {
  margin: 0;
  padding: 0;
  display: block;
  width: 100% !important;
  max-width: none !important;
}

.admcal .rdp-month {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.admcal .rdp-month_grid {
  table-layout: fixed;
  border-spacing: 0;
  border-collapse: collapse;
  width: 100%;
  margin: 0;
  padding: 0;
}

.admcal .rdp-month {
  position: relative;
}

.admcal .rdp-month_caption {
  height: var(--rdp-nav-height);
  justify-content: center;
  margin-bottom: 0;
}

.admcal .rdp-month_grid {
  margin-top: 2px;
}

.admcal .rdp-caption_label {
  color: var(--fg);
  letter-spacing: -.01em;
  font-size: 13px;
  font-weight: 700;
}

.admcal .rdp-button_previous, .admcal .rdp-button_next {
  border-radius: 0;
  justify-content: center;
  align-items: center;
  width: 24px;
  transition: background .12s;
  display: inline-flex;
  height: var(--rdp-nav-height) !important;
  position: absolute !important;
  top: 0 !important;
}

.admcal .rdp-button_previous {
  inset-inline-start: 0 !important;
}

.admcal .rdp-button_next {
  inset-inline-end: 0 !important;
}

.admcal .rdp-button_previous:hover, .admcal .rdp-button_next:hover {
  background: var(--accent-subtle);
}

.admcal .rdp-chevron {
  fill: var(--fg-secondary);
  width: 12px;
  height: 12px;
  transition: fill .12s;
}

.admcal .rdp-button_previous:hover .rdp-chevron, .admcal .rdp-button_next:hover .rdp-chevron {
  fill: var(--accent);
}

.admcal .rdp-weekday {
  min-width: 0;
  color: var(--fg-muted);
  text-transform: capitalize;
  letter-spacing: .02em;
  opacity: 1;
  height: 18px;
  padding: 0;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 18px;
  width: 14.2857% !important;
}

.admcal .rdp-weeks, .admcal .rdp-month_grid tbody {
  line-height: 0;
}

.admcal .rdp-week {
  height: 35px !important;
}

.admcal .rdp-day {
  vertical-align: middle;
  min-width: 0;
  position: relative;
  width: 14.2857% !important;
  height: 35px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 35px !important;
}

.admcal .rdp-day_button {
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  width: var(--rdp-day_button-width);
  height: var(--rdp-day_button-height);
  border: 0;
  border-radius: 0;
  font-size: 12.5px;
  font-weight: 600;
  transition: background .12s, color .12s;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  justify-content: center !important;
  align-items: center !important;
  width: 34px !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  display: flex !important;
}

.admcal .rdp-day_button:hover {
  background: var(--accent-subtle);
  color: var(--accent);
}

.admcal .rdp-today:not(.rdp-selected) .rdp-day_button {
  color: var(--accent);
  box-shadow: inset 0 0 0 1.5px var(--accent);
  background: none;
  border-radius: 0;
  font-weight: 700;
}

.admcal .rdp-selected {
  font-size: inherit;
  font-weight: inherit;
}

.admcal .rdp-selected .rdp-day_button, .admcal .rdp-selected .rdp-day_button:hover {
  box-shadow: none;
  border: 0;
  font-size: 12.5px;
  font-weight: 700;
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 0 !important;
}

.admcal .rdp-today.rdp-selected .rdp-day_button {
  box-shadow: none;
}

.admcal .rdp-disabled {
  opacity: .4;
}

.admcal .rdp-disabled .rdp-day_button {
  color: var(--fg-muted);
  cursor: default;
  box-shadow: none;
  pointer-events: none;
  background: none;
  font-weight: 500;
}

.admcal .rdp-disabled .rdp-day_button:hover {
  color: var(--fg-muted);
  background: none;
}

.admcal .rdp-outside .rdp-day_button, .admcal .rdp-hidden .rdp-day_button {
  visibility: hidden;
  pointer-events: none;
}

.phleft {
  min-width: 0;
}

.pheyebrow {
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #b45309;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 600;
}

.phtitle {
  letter-spacing: -.015em;
  color: var(--fg);
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.phbar {
  background: #d97706;
  border-radius: 999px;
  width: 44px;
  height: 3px;
  margin-top: 8px;
  display: block;
}

.pagehead.sub .phtitle {
  font-size: 15px;
  font-weight: 600;
}

.hcard.addcard {
  border: 1.5px dashed var(--border-strong);
  background: var(--bg-subtle);
  cursor: pointer;
  color: var(--fg-secondary);
  font: inherit;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 96px;
  transition: border-color .15s, background .15s, color .15s;
  display: flex;
}

.hcard.addcard:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
  color: var(--accent);
}

.addcardico {
  background: var(--bg);
  border: 1px solid var(--border);
  width: 40px;
  height: 40px;
  color: var(--accent);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  transition: transform .15s;
  display: flex;
}

.hcard.addcard:hover .addcardico {
  border-color: var(--accent);
  transform: scale(1.08);
}

.addcardtxt {
  font-size: 13.5px;
  font-weight: 600;
}

.rgrid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  display: grid;
}

.rcard {
  text-align: left;
  cursor: pointer;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font: inherit;
  color: var(--fg);
  box-shadow: var(--shadow-sm);
  flex-direction: column;
  padding: 0;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  display: flex;
  overflow: hidden;
}

.rcard:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.rcard.inactive {
  opacity: .6;
}

.rcardbanner {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  justify-content: center;
  align-items: center;
  height: 132px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.rcardbanner img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.rcardph {
  color: #ffffff80;
}

.rcard:hover .rcardbanner img {
  transition: transform .4s;
  transform: scale(1.04);
}

.rcardoff {
  color: #fff;
  background: #dc2626eb;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  position: absolute;
  top: 10px;
  left: 10px;
}

.rcardbody {
  flex: 1;
  padding: 14px 16px 12px;
}

.rcardtop {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.rcardname {
  color: var(--fg);
  letter-spacing: -.01em;
  font-size: 15.5px;
  font-weight: 600;
}

.rcardcuisine {
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-subtle);
  border-radius: 999px;
  flex-shrink: 0;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
}

.rcarddesc {
  color: var(--fg-secondary);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.55;
  display: -webkit-box;
  overflow: hidden;
}

.rcarddesc.muted {
  color: var(--fg-muted);
  font-style: italic;
}

.rsettings {
  max-width: 780px;
  position: relative;
}

.rsetgroup {
  margin-bottom: 10px;
}

.rsetgrouphd {
  letter-spacing: 0;
  text-transform: none;
  width: 100%;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  transition: border-color .12s, background .12s;
  display: flex;
}

.rsetgrouphd:hover {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
}

.rsetgrouphd:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.rsetgroup:not(.collapsed) .rsetgrouphd {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.rsetgroup:not(.collapsed) .rsetcard {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.rsetchev {
  color: var(--fg-muted);
  flex-shrink: 0;
  transition: transform .15s;
}

.rsetchev.open {
  color: var(--accent);
  transform: rotate(90deg);
}

.rsetcount {
  letter-spacing: 0;
  color: var(--fg-muted);
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 500;
}

.rsetcard {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.rsetrow {
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 20px;
  padding: 10px 18px 10px 35px;
  display: flex;
}

.rsetrow:first-child {
  border-top: 0;
}

.rsetrow.clickable {
  cursor: pointer;
}

.rsetrow.clickable:hover {
  background: var(--bg-subtle);
}

.rsetrow.disabled {
  opacity: .45;
}

.rsetrow.disabled .rsetctl {
  pointer-events: none;
}

.rsetlabel {
  flex: 200px;
  min-width: 0;
}

.rsetname {
  color: var(--fg);
  font-size: 13px;
  font-weight: 500;
}

.rsetctl {
  flex-shrink: 0;
  align-items: center;
  display: flex;
}

.rsetnum {
  box-sizing: border-box;
  text-align: right;
  border-radius: 0;
  width: 88px;
  height: 36px;
  font-size: 13px;
}

@media (max-width: 460px) {
  .rsetctl {
    flex-basis: 100%;
    justify-content: flex-start;
  }
}

.rset-toast {
  z-index: 60;
  position: fixed;
  bottom: 24px;
  right: 24px;
}

.crumblink {
  cursor: pointer;
  font: inherit;
  color: var(--fg-muted);
  background: none;
  border: 0;
  padding: 0;
  transition: color .12s;
}

.crumblink:hover {
  color: var(--accent);
  text-decoration: underline;
}

.crumbtop .crumbsep {
  color: var(--fg-muted);
}

.mosaic {
  background: #0b0f1a;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.mosaicgrid {
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
  gap: 6px;
  width: 100%;
  height: 100%;
  display: grid;
}

.mosaicgrid.n1 {
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
}

.mosaicgrid.n1 .mtile.feature {
  grid-area: 1 / 1 / -1 / -1;
}

.mosaicgrid.n2 {
  grid-template-rows: 1fr;
  grid-template-columns: repeat(2, 1fr);
}

.mosaicgrid.n2 .mtile.feature {
  grid-area: auto;
}

.mosaicgrid.n3 {
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: 1.4fr 1fr;
}

.mosaicgrid.n3 .mtile.feature {
  grid-area: 1 / 1 / 3 / 2;
}

.mosaicgrid.n4 {
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
}

.mosaicgrid.n4 .mtile.feature {
  grid-area: auto;
}

.mosaicgrid.n5 {
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(3, 1fr);
}

.mosaicgrid.n5 .mtile.feature {
  grid-area: 1 / 1 / 3 / 2;
}

.mosaicgrid.n6 {
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(3, 1fr);
}

.mosaicgrid.n6 .mtile.feature {
  grid-area: auto;
}

.mtile {
  cursor: pointer;
  color: #fff;
  background-position: center;
  background-size: cover;
  border: 0;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  font-family: inherit;
  transition: filter .25s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.mtile:after {
  content: "";
  background: #2563eb00;
  transition: background .2s;
  position: absolute;
  inset: 0;
}

.mtile:active:after {
  background: #2563eb2e;
}

.mtile:hover {
  filter: brightness(1.06);
}

.mtile.feature {
  grid-area: 1 / 1 / 3 / 2;
}

.mtilename {
  z-index: 1;
  text-align: center;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 2px 18px #0f172a8c;
  margin: auto;
  padding: 0 20px;
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 700;
  position: relative;
}

.mcharge {
  z-index: 2;
  letter-spacing: .02em;
  color: #fff;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: #d97706eb;
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 12px;
  font-weight: 600;
  position: absolute;
  top: 14px;
  right: 14px;
  box-shadow: 0 4px 14px #0f172a59;
}

.mosaicback {
  z-index: 5;
  color: #0f172a;
  cursor: pointer;
  background: #ffffffeb;
  border: 0;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  display: flex;
  position: fixed;
  bottom: 20px;
  left: 20px;
  box-shadow: 0 6px 20px #0f172a4d;
}

.mosaicback:active {
  transform: scale(.94);
}

@media (max-width: 820px) {
  .mosaicgrid, .mosaicgrid.n1, .mosaicgrid.n2, .mosaicgrid.n3, .mosaicgrid.n4, .mosaicgrid.n5, .mosaicgrid.n6 {
    grid-template-rows: none;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
  }

  .mosaicgrid.n1 {
    grid-template-columns: 1fr;
  }

  .mosaicgrid .mtile.feature, .mtile.feature {
    grid-area: auto;
  }

  .mosaicgrid.n1 .mtile.feature {
    grid-column: 1 / -1;
  }
}

.rintro2 {
  color: #fff;
  background-color: #080b14;
  background-position: center;
  background-size: cover;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.rintro2:before {
  content: "";
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg, #060910f0 0%, #060910c7 30%, #0609104d 54%, #0609101a 100%);
  position: absolute;
  inset: 0;
}

.rintro2 .steplogo {
  z-index: 5;
  max-width: 30vw;
  height: clamp(46px, 5vw, 68px);
  top: 5vh;
  left: 5vw;
  transform: none;
}

.ri2gallery {
  z-index: 2;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  gap: 14px;
  width: 46vw;
  height: 76vh;
  display: grid;
  position: absolute;
  top: 50%;
  right: 4.5vw;
  transform: translateY(-50%);
}

.ri2gallery[data-count="2"] {
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr;
}

.ri2gallery[data-count="3"] {
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1.3fr 1fr;
}

.ri2gallery[data-count="3"] .ri2photo:first-child {
  grid-row: 1 / span 2;
}

.ri2gallery[data-count="4"] {
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

.ri2gallery[data-count="5"] {
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1.5fr 1fr 1fr;
}

.ri2gallery[data-count="5"] .ri2photo:first-child {
  grid-row: 1 / span 2;
}

.ri2photo {
  object-fit: cover;
  border: 1px solid #ffffff1a;
  border-radius: 16px;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  animation: .6s cubic-bezier(.22, 1, .36, 1) both ri2photoin;
  box-shadow: 0 22px 55px #00000080;
}

.ri2photo:nth-child(2) {
  animation-delay: 70ms;
}

.ri2photo:nth-child(3) {
  animation-delay: .14s;
}

.ri2photo:nth-child(4) {
  animation-delay: .21s;
}

.ri2photo:nth-child(5) {
  animation-delay: .28s;
}

.ri2left {
  z-index: 3;
  max-width: 42vw;
  position: absolute;
  top: 50%;
  left: 5vw;
  transform: translateY(-50%);
}

.ri2left > * {
  animation: .55s cubic-bezier(.22, 1, .36, 1) both ri2in;
}

.ri2left > :nth-child(2) {
  animation-delay: 60ms;
}

.ri2left > :nth-child(3) {
  animation-delay: .12s;
}

.ri2left > :nth-child(4) {
  animation-delay: .18s;
}

.ri2cuisine {
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand);
  background: #ffffffeb;
  border-radius: 999px;
  margin-bottom: 18px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 700;
  display: inline-block;
}

.ri2logo {
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 3px 20px #00000073);
  width: auto;
  max-width: min(38vw, 520px);
  height: clamp(72px, 11vh, 132px);
  margin: 0 0 20px;
  display: block;
}

.ri2accent {
  background: var(--brand);
  border-radius: 999px;
  width: 68px;
  height: 4px;
  margin: 0 0 22px;
  display: block;
}

.ri2name {
  letter-spacing: -.02em;
  text-shadow: 0 2px 22px #0000008c;
  text-wrap: balance;
  margin: 0 0 16px;
  font-size: clamp(34px, 4.6vw, 60px);
  font-weight: 700;
}

.ri2desc {
  color: #ffffffe6;
  text-shadow: 0 1px 10px #0006;
  max-width: 34ch;
  margin: 0;
  font-size: clamp(17px, 1.9vw, 24px);
  line-height: 1.6;
}

.rintro2.nogallery:before {
  background: linear-gradient(#060910b8 0%, #060910db 100%);
}

.rintro2.nogallery .ri2left {
  text-align: center;
  max-width: min(70vw, 780px);
  left: 50%;
  transform: translate(-50%, -50%);
}

.rintro2.nogallery .ri2logo {
  object-position: center;
  margin-left: auto;
  margin-right: auto;
}

.rintro2.nogallery .ri2accent {
  width: 88px;
  margin-left: auto;
  margin-right: auto;
}

.rintro2.nogallery .ri2desc {
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}

html[lang="ar"] .ri2logo {
  object-position: right center;
}

html[lang="ar"] .ri2accent {
  margin-left: auto;
  margin-right: 0;
}

html[lang="ar"] .rintro2.nogallery .ri2logo {
  object-position: center;
}

html[lang="ar"] .rintro2.nogallery .ri2accent {
  margin-left: auto;
  margin-right: auto;
}

@keyframes ri2in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ri2photoin {
  from {
    opacity: 0;
    transform: scale(1.04);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ri2left > *, .ri2photo {
    animation: none;
  }
}

.ri2menus {
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
  display: flex;
}

.ri2menubtn {
  color: #fff;
  font: inherit;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: #ffffff1f;
  border: 1px solid #ffffff40;
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 500;
  transition: background .15s;
  display: inline-flex;
}

.ri2menubtn:hover {
  background: #ffffff38;
}

.ri2charge {
  color: #fdba74;
  letter-spacing: .01em;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: #d9770626;
  border: 1px solid #d977068c;
  border-radius: 999px;
  align-items: center;
  margin-top: 28px;
  padding: 10px 18px;
  font-size: clamp(13px, 1.3vw, 16px);
  font-weight: 600;
  display: inline-flex;
}

.ri2back, .back, .mosaicback {
  z-index: 20;
  cursor: pointer;
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #0f172a8c;
  border: 0;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  transition: background .15s, transform .12s;
  display: flex;
  position: fixed;
  bottom: 34px;
  left: 34px;
  box-shadow: 0 8px 24px #0000004d;
}

.ri2back svg, .back svg, .mosaicback svg {
  stroke-width: 2.5px;
  width: 30px;
  height: 30px;
}

.ri2back:hover, .back:hover, .mosaicback:hover {
  background: #0f172ab8;
}

.ri2back:active, .back:active, .mosaicback:active {
  transform: scale(.94);
}

.ri2next {
  z-index: 5;
  cursor: pointer;
  color: #fff;
  min-width: 150px;
  height: 66px;
  font: inherit;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #0f172a8c;
  border: 0;
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 0 32px;
  font-size: 20px;
  font-weight: 600;
  transition: transform .12s, background .15s;
  display: inline-flex;
  position: absolute;
  bottom: 34px;
  right: 34px;
  box-shadow: 0 8px 24px #0000004d;
}

.ri2next svg {
  stroke-width: 2.5px;
  width: 26px;
  height: 26px;
}

.ri2next:hover {
  background: #0f172ab8;
}

.ri2next:active {
  transform: scale(.97);
}

html[lang="ar"] .ri2next svg, [dir="rtl"] .ri2back svg {
  transform: scaleX(-1);
}

.ri2back {
  border-radius: 14px;
  gap: 10px;
  width: auto;
  min-width: 0;
  height: 66px;
  padding: 0 26px;
}

.ri2back svg {
  width: 24px;
  height: 24px;
}

.ri2back:after {
  content: "Back";
  font-size: inherit;
  color: #fff;
  white-space: nowrap;
  letter-spacing: .01em;
  font-weight: 600;
}

html[lang="fr"] .ri2back:after {
  content: "Retour";
}

html[lang="de"] .ri2back:after {
  content: "Zurück";
}

html[lang="ru"] .ri2back:after {
  content: "Назад";
}

html[lang="ar"] .ri2back:after {
  content: "رجوع";
}

html[lang="it"] .ri2back:after {
  content: "Indietro";
}

html[lang="cs"] .ri2back:after {
  content: "Zpět";
}

html[lang="pl"] .ri2back:after {
  content: "Wstecz";
}

.ri2back, .ri2next {
  background: #ffffff21;
  border: 1px solid #ffffff52;
  box-shadow: 0 8px 22px #00000047;
}

.ri2next:not(:disabled) {
  background: #ffffff38;
  border-color: #ffffff6b;
}

.ri2back:hover, .ri2next:hover:not(:disabled) {
  background: #ffffff4d;
  border-color: #ffffff8c;
}

.ri2next:disabled {
  opacity: .5;
}

.hmmenu .ri2back {
  background: #2e152499;
}

.hmmenu .ri2back:hover {
  background: #2e1524cc;
}

.hmmenu .ri2next {
  background: #2e152499;
}

.hmmenu .ri2next:hover {
  background: #2e1524cc;
}

.idpage2 {
  color: #fff;
  background-color: #080b14;
  background-position: center;
  background-size: cover;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.id2left {
  z-index: 3;
  width: auto;
  position: absolute;
  top: 8vh;
  left: 5vw;
}

.id2fields {
  --cal-w: calc(7 * 40px + 2 * 14px + 2px);
  width: min(88vw, var(--cal-w));
}

.id2fields .id2field {
  width: 100%;
}

.id2title {
  letter-spacing: -.01em;
  text-shadow: 0 2px 16px #0006;
  white-space: nowrap;
  margin: 0 0 6vh;
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 600;
}

.id2field {
  margin-bottom: 4vh;
  position: relative;
}

.id2label {
  color: #fffffff2;
  margin-bottom: 14px;
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 500;
}

.id2box {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  color: #fff;
  font-variant-numeric: tabular-nums;
  background: #ffffff0f;
  border: 1px solid #ffffff8c;
  border-radius: 4px;
  align-items: center;
  width: 100%;
  min-height: 78px;
  padding: 0 22px;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 500;
  display: flex;
}

.id2box.asbtn {
  cursor: pointer;
  font: inherit;
  text-align: left;
  font-size: clamp(24px, 2.6vw, 34px);
}

.id2box.asbtn:hover {
  border-color: #fff;
}

input.id2box {
  appearance: none;
  cursor: text;
  outline: none;
}

input.id2box::placeholder {
  color: #ffffff59;
}

input.id2box:focus {
  background: #ffffff1f;
  border-color: #fff;
}

.id2cal {
  z-index: 20;
  margin-top: 8px;
  position: absolute;
}

.id2guest {
  color: #fff;
  background: #16a34ae6;
  border-radius: 999px;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 12px 20px;
  font-size: 17px;
  font-weight: 500;
  display: inline-flex;
}

.id2keypad {
  z-index: 3;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  width: min(46vw, 620px);
  display: grid;
  position: absolute;
  top: 50%;
  right: 6vw;
  transform: translateY(-50%);
}

.id2keypad button {
  color: #0f172a;
  height: 12vh;
  min-height: 90px;
  font: inherit;
  cursor: pointer;
  background: #fff;
  border: 0;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 500;
  transition: background .12s, transform 80ms;
  display: flex;
  box-shadow: 0 6px 18px #00000040;
}

.id2keypad button:hover {
  background: #f1f5f9;
}

.id2keypad button:active {
  transform: scale(.96);
}

.ri2next:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.id2ask {
  z-index: 3;
  text-align: left;
  width: min(52vw, 720px);
  position: absolute;
  top: 50%;
  right: 5vw;
  transform: translateY(-50%);
}

.id2askq {
  text-shadow: 0 2px 16px #00000080;
  margin: 0 0 6vh;
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 500;
  line-height: 1.2;
}

.id2askbtns {
  flex-wrap: wrap;
  gap: 26px;
  display: flex;
}

.id2askbtn {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  color: #fff;
  font: inherit;
  letter-spacing: .02em;
  text-transform: uppercase;
  cursor: pointer;
  background: #ffffff0d;
  border: 1.5px solid #ffffffa6;
  border-radius: 4px;
  padding: 22px 40px;
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 500;
  transition: background .15s, border-color .15s;
}

.id2askbtn:hover {
  background: #ffffff29;
  border-color: #fff;
}

.id2askbtn:active {
  transform: scale(.98);
}

.id2chips {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  display: flex;
}

.id2chip {
  color: #fff;
  background: #ffffff29;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 16px;
  font-weight: 500;
  display: inline-flex;
}

.id2chip button {
  color: #fffc;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  display: flex;
}

.id2right2 {
  z-index: 3;
  width: min(52vw, 620px);
  position: absolute;
  top: 8vh;
  right: 5vw;
}

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

.wl2in {
  z-index: 2;
  text-align: center;
  color: #fff;
  max-width: 92vw;
  position: relative;
}

.wl2check {
  color: #fde68a;
  background: radial-gradient(circle at 50% 45%, #fbbf2452, #d977061a 70%);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  width: 104px;
  height: 104px;
  margin: 0 auto 28px;
  animation: .7s cubic-bezier(.22, 1.4, .4, 1) both wl2in;
  display: flex;
  position: relative;
  overflow: visible;
}

.wl2check:before {
  content: "";
  z-index: 0;
  filter: blur(10px);
  background: radial-gradient(circle, #fbbf2447, #0000 62%);
  border-radius: 999px;
  animation: 5s ease-in-out infinite wl2aura;
  position: absolute;
  inset: -18px;
}

.wl2check svg {
  z-index: 2;
  filter: drop-shadow(0 0 10px #fbbf24a6);
  animation: 3.4s ease-in-out infinite wl2twinkle;
  position: relative;
}

.wl2spark {
  z-index: 1;
  filter: blur(.6px) drop-shadow(0 0 6px #fbbf24e6);
  opacity: 0;
  width: 9px;
  height: 9px;
  animation: wl2firefly calc(4s + var(--i) * .4s) ease-in-out calc(var(--i) * .5s) infinite;
  background: radial-gradient(circle at 40% 35%, #fff, #fcd34d 55%, #0000 72%);
  border-radius: 999px;
  position: absolute;
  top: 50%;
  left: 50%;
}

@keyframes wl2in {
  0% {
    opacity: 0;
    transform: scale(0)rotate(-24deg);
  }

  100% {
    opacity: 1;
    transform: scale(1)rotate(0);
  }
}

@keyframes wl2aura {
  0%, 100% {
    opacity: .85;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.18);
  }
}

@keyframes wl2twinkle {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .92;
    transform: scale(1.1);
  }
}

@keyframes wl2firefly {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%)scale(.4);
  }

  20% {
    opacity: .9;
  }

  50% {
    opacity: 1;
    transform: translate(calc(-50% + cos(var(--i) * 36deg) * 46px),
                     calc(-50% + sin(var(--i) * 36deg) * 46px - 6px)) scale(1);
  }

  80% {
    opacity: .5;
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + cos(var(--i) * 36deg) * 66px),
                     calc(-50% + sin(var(--i) * 36deg) * 66px - 16px)) scale(.5);
  }
}

@keyframes wl2cork {
  0%, 6% {
    opacity: 1;
    transform: translate(-50%)rotate(0);
  }

  38% {
    opacity: 0;
    transform: translate(150px, -130px)rotate(520deg);
  }

  38.01%, 100% {
    opacity: 0;
    transform: translate(-50%)rotate(0);
  }
}

@keyframes wl2bubble {
  0%, 5% {
    opacity: 0;
    transform: translate(-50%)scale(.3);
  }

  12% {
    opacity: 1;
  }

  40% {
    transform: translate(calc(-50% + sin(var(--i) * 40deg) * 80px),
                calc(cos(var(--i) * 40deg) * -80px - 20px))
      scale(.2);
    opacity: 0;
  }

  100% {
    opacity: 0;
    transform: translate(-50%)scale(.3);
  }
}

.wl2welcome {
  color: #ffffffe6;
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 400;
}

.wl2name {
  letter-spacing: -.02em;
  text-shadow: 0 2px 20px #0006;
  margin: 2px 0 0;
  font-size: clamp(24.75px, 3.33vw, 43.65px);
  font-weight: 700;
}

.wl2accomp {
  color: #ffffffd1;
  margin-top: 8px;
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 500;
}

.wl2grid {
  margin-top: 32px;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  gap: 12px;
  width: min(100%, 540px);
  margin-inline: auto;
  display: grid;
}

.wl2cell {
  text-align: center;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: #ffffff1a;
  border: 1px solid #ffffff2e;
  border-radius: 14px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 0;
  min-height: 98px;
  padding: 12px 16px;
  display: flex;
}

.wl2cell i {
  color: #fff;
  justify-content: center;
  align-items: center;
  margin: 0 auto 6px;
  display: flex;
}

.wl2cell span {
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #ffffffb3;
  font-size: 10.5px;
  font-weight: 600;
  display: block;
}

.wl2cell b {
  color: #fff;
  margin-top: 3px;
  font-size: 18px;
  font-weight: 600;
  display: block;
}

.wl2rest {
  color: #ffffffeb;
  margin-top: 26px;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 500;
}

.wlm {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  display: grid;
}

.wlmleft {
  z-index: 2;
  text-align: center;
  color: #fff;
  place-self: center;
  max-width: 560px;
  padding: 4vh 3vw;
  position: relative;
}

.wlmnoavail {
  text-align: center;
  color: #ffffffeb;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: 100%;
  display: flex;
}

.wlmnoavail .nadot {
  color: #ffffffd9;
  background: #ffffff14;
  border: 1px solid #ffffff29;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  width: 84px;
  height: 84px;
  display: flex;
}

.wlmnoavail p {
  text-wrap: balance;
  max-width: 26ch;
  margin: 0;
  font-size: clamp(19px, 2.1vw, 27px);
  font-weight: 500;
  line-height: 1.55;
}

.wlmnoavail .ri2next {
  justify-content: center;
  min-width: 160px;
  margin-top: 4px;
}

.wlmloading {
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 140px;
  display: flex;
}

.wlmspin {
  border: 3px solid #fff3;
  border-top-color: #ffffffd9;
  border-radius: 999px;
  width: 34px;
  height: 34px;
  animation: .8s linear infinite wlmspin;
}

@keyframes wlmspin {
  to {
    transform: rotate(360deg);
  }
}

.verifyloading {
  z-index: 40;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  background: #080b148c;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  display: flex;
  position: fixed;
  inset: 0;
}

.verifyloadingtxt {
  color: #fff;
  letter-spacing: .02em;
  font-size: 16px;
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .verifyloading .wlmspin, .wlmspin {
    animation: none;
  }
}

.wlmright {
  z-index: 2;
  color: #fff;
  border-left: 1px solid #ffffff1f;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 4vh 5vw;
  display: flex;
  position: relative;
}

.wlmright .id2askq {
  text-shadow: 0 2px 16px #00000080;
  margin: 0 0 5vh;
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 500;
  line-height: 1.2;
}

.wlmright .id2askbtns {
  flex-wrap: wrap;
  gap: 20px;
  display: flex;
}

.id2askbtn.primary {
  color: #0f172a;
  background: #fff;
  border-color: #fff;
}

.id2askbtn.primary:hover {
  background: #f1f5f9;
}

.whenp {
  color: #fff;
}

.steplogo {
  z-index: 4;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px #0006);
  width: auto;
  max-width: 52vw;
  height: clamp(54px, 6vw, 82px);
  position: absolute;
  top: 3vh;
  left: 50%;
  transform: translateX(-50%);
}

.whentitle {
  z-index: 3;
  letter-spacing: -.01em;
  text-shadow: 0 2px 16px #0006;
  margin: 0;
  padding-bottom: 12px;
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 600;
  position: absolute;
  top: 7vh;
  left: 5vw;
}

.whentitle:after {
  content: "";
  background: #fff6;
  border-radius: 999px;
  width: 48px;
  height: 3px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.whencharge {
  z-index: 3;
  white-space: nowrap;
  color: #fcd34d;
  text-align: center;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #fbbf2424;
  border: 1px solid #fbbf2466;
  border-radius: 999px;
  width: max-content;
  padding: 12px 26px;
  font-size: clamp(13px, 1.15vw, 16px);
  line-height: 1.5;
  position: absolute;
  bottom: 4.5vh;
  left: 50%;
  transform: translateX(-50%);
}

.whencharge b {
  color: #fde68a;
  white-space: nowrap;
}

.whencharge .chargesep {
  opacity: .7;
  margin: 0 8px;
}

.boardbadge {
  letter-spacing: .01em;
  white-space: nowrap;
  color: #6ee7b7;
  background: #34c77b24;
  border: 1px solid #34c77b59;
  border-radius: 999px;
  align-items: center;
  margin-top: 12px;
  padding: 7px 16px;
  font-size: 13.5px;
  font-weight: 600;
  display: inline-flex;
}

.boardbadge.pay {
  color: #fcd34d;
  background: #fbbf2424;
  border-color: #fbbf2466;
}

.whenrow {
  z-index: 3;
  align-items: flex-start;
  gap: 4vw;
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.whenlabel {
  color: #ffffffe6;
  padding-top: 30px;
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 400;
}

.whencols {
  display: flex;
}

.whencol {
  text-align: center;
  border-left: 1px solid #ffffff24;
  padding: 0 3vw;
}

.whencol:first-child {
  border-left: 0;
}

.whendow {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ffffffd9;
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 500;
}

.whendom {
  margin: 6px 0;
  font-size: clamp(40px, 4.6vw, 64px);
  font-weight: 300;
  line-height: 1;
}

.whenmon {
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #ffffffbf;
  font-size: clamp(16px, 1.6vw, 22px);
}

.whenslots {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  display: flex;
}

.whenslot {
  color: #fff;
  min-width: 150px;
  font: inherit;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: #ffffff0d;
  border: 1px solid #ffffff29;
  border-radius: 14px;
  padding: 12px 22px;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 400;
  transition: background .15s, color .15s, border-color .15s, transform .12s;
}

.whenslot:hover:not(:disabled) {
  background: #ffffff21;
  border-color: #ffffff52;
}

.whenslot:active:not(:disabled) {
  transform: scale(.97);
}

.whenslot.sel {
  color: #0f172a;
  background: #fff;
  border-color: #fff;
  font-weight: 600;
  box-shadow: 0 8px 22px #0000004d;
}

.whenslot.full {
  opacity: .6;
  background: #ffffff05;
  border-color: #ffffff14;
}

.whenslot .whenarea {
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff9;
  margin-top: 2px;
  font-size: 13px;
  display: block;
}

.whenslot.sel .whenarea {
  color: var(--fg-muted);
}

.whenslot.full {
  cursor: not-allowed;
}

.whenfull, .whennoavail {
  color: #f87171;
  max-width: 120px;
  font-size: 15px;
  line-height: 1.4;
  display: block;
}

.whenempty {
  color: #ffffffd1;
  text-shadow: 0 1px 10px #0006;
  align-self: center;
  max-width: 30ch;
  font-size: clamp(17px, 1.9vw, 24px);
  line-height: 1.6;
}

.detp {
  color: #fff;
  overflow-y: auto;
}

.detrows {
  z-index: 3;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background: #ffffff0b;
  border: 1px solid #ffffff1a;
  border-radius: 22px;
  flex-direction: column;
  gap: 0;
  width: fit-content;
  min-width: min(560px, 90vw);
  max-width: 90vw;
  max-height: 74vh;
  padding: 6px 36px;
  display: flex;
  position: absolute;
  top: 15vh;
  left: 5vw;
  overflow-y: auto;
  box-shadow: 0 24px 60px #00000059;
}

.detrow {
  border-top: 1px solid #ffffff14;
  grid-template-columns: 190px auto;
  align-items: center;
  column-gap: 48px;
  padding: 6px 0;
  display: grid;
}

.detrow:first-child {
  border-top: 0;
}

.detlabel {
  color: #fff;
  font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 500;
}

.detval {
  color: #fff;
  align-items: center;
  gap: 26px;
  font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 500;
  display: flex;
}

.detwhen {
  color: #fff;
  font-size: clamp(16px, 1.6vw, 21px);
  font-weight: 500;
}

.detwhen b {
  font-weight: 500;
}

.detwhen {
  white-space: nowrap;
}

.dtsep {
  color: #fff;
  margin: 0 9px;
  display: inline;
}

.dtpipe {
  vertical-align: middle;
  background: #ffffff52;
  width: 1px;
  height: .85em;
  margin-inline-end: 9px;
  display: inline-block;
}

.detchange {
  cursor: pointer;
  color: #fff;
  font: inherit;
  text-underline-offset: 4px;
  background: none;
  border: 0;
  align-items: center;
  gap: 8px;
  font-size: clamp(18px, 2vw, 26px);
  text-decoration: underline;
  display: inline-flex;
}

.detstepper {
  border: 1px solid #fff6;
  border-radius: 8px;
  align-items: center;
  gap: 4px;
  display: inline-flex;
  overflow: hidden;
}

.detstepper button {
  color: #fff;
  cursor: pointer;
  background: #ffffff14;
  border: 0;
  justify-content: center;
  align-items: center;
  width: 54px;
  height: 54px;
  display: flex;
}

.detstepper button:hover {
  background: #ffffff2e;
}

.detstepper span {
  text-align: center;
  min-width: 60px;
  font-size: 28px;
  font-weight: 500;
}

.detchips {
  flex-wrap: wrap;
  gap: 16px;
  display: flex;
}

.detchip {
  color: #ffffffeb;
  min-width: 128px;
  font: inherit;
  cursor: pointer;
  background: #ffffff0d;
  border: 1px solid #ffffff29;
  border-radius: 14px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 9px;
  padding: 15px 18px;
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 500;
  transition: background .15s, border-color .15s, transform .12s;
  display: flex;
}

.detchip:active {
  transform: scale(.97);
}

.detchip:hover {
  background: #ffffff24;
}

.detchip.sel {
  color: #0f172a;
  background: #fff;
  border-color: #fff;
  box-shadow: 0 6px 18px #00000047;
}

.detchip.sm {
  border-radius: 11px;
  min-width: 96px;
  padding: 11px 13px;
  font-size: 13.5px;
}

.detchips.small {
  max-width: 70vw;
}

.detpax {
  color: #fff;
  font-size: clamp(16px, 1.6vw, 21px);
  font-weight: 500;
}

.rsettext {
  align-items: center;
  gap: 12px;
  display: flex;
}

.rsettext input[type="text"] {
  border: 1px solid var(--border, #d9dee7);
  min-width: 320px;
  font: inherit;
  border-radius: 8px;
  padding: 8px 10px;
}

.rsetbgprev {
  object-fit: cover;
  border: 1px solid var(--border, #d9dee7);
  border-radius: 8px;
  width: 72px;
  height: 48px;
}

.id2tiles {
  flex-direction: column;
  gap: 20px;
  margin-top: 5vh;
  display: flex;
}

.id2tilewrap {
  position: relative;
}

.id2tile {
  text-align: center;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  width: 100%;
  font: inherit;
  cursor: default;
  background: #ffffff0f;
  border: 1px solid #ffffff29;
  border-radius: 18px;
  padding: 22px 26px 20px;
  transition: background .15s, border-color .15s;
  display: block;
}

.id2tile.asbtn {
  cursor: pointer;
}

.id2tile.asbtn:hover {
  background: #ffffff1c;
  border-color: #ffffff52;
}

.id2tile i {
  color: #ffffffd9;
  justify-content: center;
  align-items: center;
  margin: 0 auto 8px;
  display: flex;
}

.id2tile span {
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff9;
  font-size: 12px;
  font-weight: 600;
  display: block;
}

.id2tile b {
  color: #fff;
  font-variant-numeric: tabular-nums;
  min-height: 40px;
  margin-top: 6px;
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 600;
  display: block;
}

.id2tile.filled {
  background: #ffffff1a;
  border-color: #fff6;
}

.compcards {
  flex-direction: column;
  gap: 12px;
  margin-bottom: 26px;
  display: flex;
}

.compcard {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #ffffff14;
  border: 1px solid #ffffff29;
  border-radius: 14px;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  animation: .25s cubic-bezier(.22, 1, .36, 1) compin;
  display: flex;
}

.compcheck {
  color: #34d399;
  background: #34d39933;
  border-radius: 999px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  display: flex;
  box-shadow: 0 0 0 5px #34d39914;
}

.compinfo {
  flex: auto;
  min-width: 0;
}

.comproom {
  color: #fff;
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 600;
}

.compname {
  color: #ffffffb8;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 2px;
  font-size: clamp(13px, 1.3vw, 16px);
  overflow: hidden;
}

.compremove {
  cursor: pointer;
  color: #ffffffb3;
  background: #ffffff14;
  border: 0;
  border-radius: 999px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  transition: background .15s, color .15s;
  display: flex;
}

.compremove:hover {
  color: #f87171;
  background: #f8717133;
}

@keyframes compin {
  from {
    opacity: 0;
    transform: translateY(10px)scale(.97);
  }
}

.halficon {
  color: #fff;
  filter: drop-shadow(0 2px 10px #0006);
  margin-bottom: 18px;
  display: block;
}

.halficon svg {
  display: block;
}

.mylistp {
  color: #fff;
  flex-direction: column;
  padding: 7vh 5vw 13vh;
  display: flex;
  overflow: hidden;
}

.mylisthead {
  flex: none;
  margin-bottom: 3.5vh;
}

.mylisthi {
  color: #ffffffe6;
  margin-top: 10px;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 300;
}

.mylistempty {
  color: #ffffffb3;
  font-size: clamp(20px, 2.2vw, 30px);
}

.mylist {
  flex-direction: column;
  flex: auto;
  gap: 10px;
  width: min(94vw, 820px);
  padding-right: 6px;
  display: flex;
  overflow-y: auto;
}

.mlrow {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: #ffffff12;
  border: 1px solid #ffffff24;
  border-radius: 14px;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  display: flex;
  box-shadow: 0 14px 34px #0000004d;
}

.mldate {
  text-align: center;
  color: #fff;
  background: linear-gradient(#ffffff26, #ffffff0d);
  border: 1px solid #ffffff29;
  border-radius: 12px;
  flex: none;
  width: 58px;
  padding: 7px 0 8px;
  line-height: 1;
}

.mldateDow {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff9;
  font-size: 11px;
  font-weight: 600;
  display: block;
}

.mldateDay {
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  margin: 2px 0 1px;
  font-size: 24px;
  font-weight: 700;
  display: block;
}

.mldateMon {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ffffffc7;
  font-size: 12px;
  font-weight: 600;
  display: block;
}

.mlinfo {
  flex: auto;
  min-width: 0;
}

.mltitle {
  color: #fff;
  letter-spacing: -.01em;
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 600;
}

.mlmeta {
  color: #ffffffb8;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 5px;
  font-size: clamp(12.5px, 1.25vw, 14px);
  display: flex;
}

.mlmeta span {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.mlmeta svg {
  opacity: .75;
}

.mliso {
  color: #ffffff80;
  font-variant-numeric: tabular-nums;
}

.mlbadges {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 7px;
  display: flex;
}

.mlbadge {
  letter-spacing: .02em;
  text-transform: capitalize;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  display: inline-block;
}

.mlbadge.ok {
  color: #6ee7b7;
  background: #34d3992e;
  border: 1px solid #34d3994d;
}

.mlbadge.muted {
  color: #ffffffb3;
  background: #ffffff1a;
  border: 1px solid #ffffff29;
}

.mlbadge.charge {
  color: #fcd34d;
  text-transform: none;
  background: #fbbf2429;
  border: 1px solid #fbbf244d;
}

.mlcancel {
  color: #fca5a5;
  font: inherit;
  letter-spacing: .01em;
  cursor: pointer;
  background: #f871711a;
  border: 1.5px solid #f8717173;
  border-radius: 999px;
  flex: none;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  font-size: 15px;
  font-weight: 600;
  transition: background .15s, color .15s, border-color .15s, transform .12s;
  display: inline-flex;
}

.mlcancel:hover {
  color: #fff;
  background: #ef4444;
  border-color: #ef4444;
  box-shadow: 0 8px 20px #ef444459;
}

.mlcancel:active {
  transform: scale(.96);
}

.mylistparty {
  color: #ffffffd9;
  background: #ffffff14;
  border: 1px solid #ffffff24;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 16px;
  font-size: clamp(14px, 1.4vw, 18px);
  display: inline-flex;
}

.mylistparty svg {
  opacity: .75;
}

.mltitlerow {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  display: flex;
}

.mltitlerow .mlbadge {
  text-transform: capitalize;
}

.mlcuisine {
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff9;
  border: 1px solid #fff3;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
}

.mlrow.off {
  background: #f8717112;
  border-color: #f8717138;
  position: relative;
  overflow: hidden;
}

.mlrow.off:before {
  content: "";
  background: #f87171;
  width: 4px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.mlrow.off .mltitle, .mlrow.off .mlmeta {
  color: #ffffff9e;
}

.mlrow.off .mldate {
  background: linear-gradient(#f8717133, #f8717114);
  border-color: #f871714d;
}

.mlrow.off .mldateDay, .mlrow.off .mldateDow, .mlrow.off .mldateMon {
  color: #ffffff8c;
}

.mlbadge.cancelled {
  color: #fca5a5;
  text-transform: capitalize;
  background: #f8717129;
  border: 1px solid #f8717152;
}

.mlcancelled {
  color: #fca5a5e6;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: clamp(12px, 1.2vw, 14px);
  display: inline-flex;
}

.mlcancelled svg {
  opacity: .85;
}

.mlstamp {
  color: #ffffff73;
  align-items: center;
  gap: 5px;
  font-size: clamp(11px, 1.1vw, 12.5px);
  display: inline-flex;
}

.mlstamp svg {
  opacity: .8;
}

.mlstamp.cancel {
  color: #fca5a5eb;
}

.confbtns {
  gap: 12px;
  margin-top: 28px;
  display: flex;
}

.confkeep, .confyes {
  height: 54px;
  font: inherit;
  letter-spacing: .01em;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  transition: background .15s, border-color .15s, color .15s, transform .12s;
  display: inline-flex;
}

.confkeep {
  color: #0f172a;
  background: #fff;
}

.confkeep:hover {
  background: #eef2f7;
}

.confyes {
  color: #f87171;
  background: none;
  border: 1.5px solid #f871718c;
}

.confyes:hover {
  color: #fff;
  background: #ef4444;
  border-color: #ef4444;
}

.confkeep:active, .confyes:active {
  transform: scale(.97);
}

.menup {
  color: #fff;
  flex-direction: column;
  display: flex;
}

.menup .menuhead {
  text-align: center;
  border-bottom: none;
  flex: none;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  padding: 5vh 5vw 2.5vh;
}

.menup .menusub {
  color: #ffffffd9;
  margin-top: 8px;
  font-size: 20px;
  font-weight: 600;
}

.menuscroll {
  flex: auto;
  padding: 0 5vw 3vh;
  overflow-y: auto;
}

.mcat {
  margin-bottom: 30px;
}

.mcathd {
  letter-spacing: .01em;
  text-transform: none;
  color: #fff;
  border-bottom: 2px solid #ffffff47;
  border-radius: 1px;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  padding-bottom: 8px;
  font-size: clamp(15.5px, 1.4vw, 18.5px);
  font-weight: 600;
  display: inline-flex;
}

.mitems {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 10px;
  display: grid;
}

.mitem {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #ffffff0f;
  border: 1px solid #ffffff1f;
  border-radius: 12px;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  transition: background .15s, border-color .15s;
  display: flex;
}

.mitem.on {
  background: #ffffff21;
  border-color: #ffffff8c;
}

.mi-info {
  flex: auto;
  min-width: 0;
}

.mi-name {
  color: #fff;
  font-size: clamp(14.5px, 1.25vw, 16.5px);
  font-weight: 600;
}

.mi-desc {
  color: #fff9;
  margin-top: 3px;
  font-size: clamp(11.5px, 1vw, 13px);
  line-height: 1.4;
}

.mi-price {
  color: #fff;
  font-variant-numeric: tabular-nums;
  flex: none;
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 700;
}

.mi-price span {
  color: #fff9;
  font-size: .7em;
  font-weight: 500;
}

.mi-qty {
  flex: none;
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

.mitem .mi-qty button {
  cursor: pointer;
  color: #fff;
  background: #ffffff24;
  border: 1.5px solid #ffffff6b;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  transition: background .15s, border-color .15s, transform .12s;
  display: flex;
}

.mitem .mi-qty button svg {
  width: 17px;
  height: 17px;
}

.mitem .mi-qty button:hover {
  color: #fff;
  background: #ffffff47;
  border-color: #fff9;
}

.mitem .mi-qty button:active {
  transform: scale(.92);
}

.mitem .mi-plus {
  background: #ffffff3d;
}

.mi-count {
  text-align: center;
  color: #fff;
  font-variant-numeric: tabular-nums;
  min-width: 24px;
  font-size: 16px;
  font-weight: 700;
}

.menubar {
  background: linear-gradient(#060a1400, #060a1480);
  border-top: 1px solid #ffffff1a;
  flex: none;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 5vw;
  display: flex;
}

.menubarright {
  align-items: center;
  gap: 16px;
  display: flex;
}

.menustatic {
  position: static;
}

.menup .menutotal {
  color: #fff;
  font-variant-numeric: tabular-nums;
  align-items: baseline;
  gap: 14px;
  font-size: clamp(16px, 1.7vw, 21px);
  font-weight: 700;
  display: inline-flex;
}

.menup .menutotal .mttotal {
  border-inline-start: 1px solid #ffffff47;
  padding-inline-start: 14px;
}

.menuskip {
  color: #fff;
  font: inherit;
  text-align: center;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #0f172a8c;
  border: 0;
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  height: 66px;
  padding: 0 32px;
  font-size: 20px;
  font-weight: 600;
  transition: background .15s, transform .12s;
  display: inline-flex;
  box-shadow: 0 8px 24px #0000004d;
}

.menuskip:hover {
  background: #0f172ab8;
}

.menuskip:active {
  transform: scale(.97);
}

html, body {
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

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

@supports (height: 100dvh) {
  .home, .maint, .kiosk, .mosaic, .confirm2 {
    min-height: 100dvh;
  }

  .idpage2 {
    height: 100dvh;
  }
}

.ri2back, .mosaicback {
  left: max(24px, env(safe-area-inset-left));
}

.ri2next {
  right: max(24px, env(safe-area-inset-right));
}

.ri2back, .ri2next, .mosaicback {
  bottom: max(24px, env(safe-area-inset-bottom));
}

.flags {
  padding-right: max(32px, env(safe-area-inset-right));
  padding-top: max(16px, env(safe-area-inset-top));
}

.revp .detrow.revrow {
  align-items: flex-start;
}

.revp .revorder {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  display: flex;
}

.revp .revitem {
  color: #fff;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  font-size: 19px;
  display: flex;
}

.revp .revitem + .revitem {
  border-top: 1px solid #ffffff12;
}

.revp .revitem .revqty {
  text-align: center;
  color: #fff;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
  background: #ffffff1f;
  border: 1px solid #ffffff24;
  border-radius: 9px;
  flex: none;
  min-width: 38px;
  padding: 3px 9px;
  font-size: 15px;
  font-weight: 700;
}

.revp .revitem .revname {
  flex: 1;
  font-weight: 500;
}

.revp .revitem .revprice {
  color: #ffffffd9;
  font-variant-numeric: tabular-nums;
  flex: none;
  font-weight: 600;
}

.revp .revstep {
  flex: none;
  align-items: center;
  gap: 10px;
  display: inline-flex;
}

.revp .revstepbtn {
  color: #fff;
  cursor: pointer;
  background: #ffffff14;
  border: 1px solid #ffffff29;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  transition: background .15s, border-color .15s, transform .1s;
  display: inline-flex;
}

.revp .revstepbtn:hover {
  background: color-mix(in srgb, var(--brand, #2563eb) 55%, transparent);
  border-color: color-mix(in srgb, var(--brand, #2563eb) 70%, #fff);
}

.revp .revstepbtn:active {
  transform: scale(.9);
}

.revp .revstep .revqty {
  text-align: center;
  font-variant-numeric: tabular-nums;
  background: none;
  border: none;
  min-width: 1.4em;
  padding: 0;
  font-size: 17px;
  font-weight: 700;
}

.revp .revtotalbar {
  color: #fff;
  border-top: 1px solid #ffffff24;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding: 16px 2px 4px;
  font-size: 18px;
  display: flex;
}

.revp .revtotalbar b {
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 700;
}

.revp .revnote {
  z-index: 4;
  pointer-events: none;
  color: #fff;
  text-align: center;
  justify-content: center;
  align-items: center;
  height: 66px;
  margin: 0;
  padding: 0 clamp(170px, 22vw, 260px);
  font-size: 20px;
  font-weight: 600;
  display: flex;
  position: absolute;
  bottom: 34px;
  left: 0;
  right: 0;
}

html[lang="ar"] .revp .revnote {
  font-size: 20px;
}

.mi-photo {
  object-fit: cover;
  background: #ffffff14;
  border-radius: 10px;
  flex: none;
  width: 46px;
  height: 46px;
}

.mi-photo.ph {
  color: #ffffff8c;
  background: none;
  border: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.mitem.mitem-full {
  grid-column: 1 / -1;
  align-items: flex-start;
}

.hmmenu .hm-cols {
  align-items: flex-start;
  gap: 20px;
  display: flex;
}

.hmmenu .hm-col {
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
}

.hmmenu .mi-photo {
  background: none;
  border-radius: 0;
}

.hmmenu .mitems {
  grid-template-columns: 1fr;
}

.hmmenu .hm-notewrap {
  justify-content: center;
  margin-top: 14px;
  display: flex;
}

.hmmenu .hm-note {
  color: #f4d9df;
  letter-spacing: .01em;
  background: linear-gradient(#d9808f2e, #c25f741f);
  border: 1px solid #d9808f66;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  font-size: 13.5px;
  font-weight: 600;
  display: inline-flex;
}

.hmmenu .hm-note svg {
  color: #e58a9a;
}

@media (max-width: 820px) {
  .hmmenu .hm-cols {
    flex-direction: column;
  }
}

.hmmenu .mcat {
  margin-bottom: 11px;
}

.hmmenu .mcathd {
  margin-bottom: 7px;
  padding-bottom: 6px;
  font-size: clamp(14px, 1.2vw, 16px);
}

.hmmenu .mitem {
  gap: 11px;
  padding: 8px 12px;
}

.hmmenu .mitem.mitem-full {
  padding: 11px 13px;
}

.hmmenu .mi-photo, .hmmenu .mi-photo.ph {
  width: 38px;
  height: 38px;
}

.hmmenu .mi-name {
  font-size: clamp(13.5px, 1.1vw, 15px);
}

.hmmenu .mi-desc {
  margin-top: 2px;
  font-size: clamp(11px, .95vw, 12.5px);
}

.hmmenu .hm-opts {
  margin-top: 9px;
}

.hmmenu .hm-opts + .hm-opts {
  margin-top: 10px;
}

.hmmenu .hm-optlabel {
  margin-bottom: 7px;
}

.hmmenu .hm-optchip {
  border-radius: 10px;
  padding: 7px 13px;
  font-size: 12.5px;
}

.hmmenu .hm-optchips {
  gap: 6px;
}

.hm-mhero {
  text-align: center;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: #ffffff0b;
  border: 1px solid #e2b2963d;
  border-radius: 18px;
  max-width: 600px;
  margin: 6px auto 24px;
  padding: 24px 24px 22px;
  animation: .5s cubic-bezier(.2, .8, .2, 1) both hmfadeup;
}

.hm-mhero-kicker {
  color: var(--hm-gold, #e3b48c);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
}

.hm-mhero-title {
  color: #fff;
  margin: 8px 0 0;
  font-size: clamp(27px, 3.6vw, 38px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.1;
}

.hm-mhero-accent {
  background: linear-gradient(90deg, var(--hm-gold, #e3b48c), #e58a9a);
  border-radius: 2px;
  width: 46px;
  height: 2px;
  margin: 14px auto 0;
  display: block;
}

.hm-mhero-guest {
  color: #f6ece7;
  margin-top: 14px;
  font-size: 15px;
}

.hm-mhero-loc {
  color: var(--hm-gold, #e3b48c);
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
}

@keyframes hmfadeup {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.menup .mitem {
  transition: background .15s, border-color .15s, transform .12s;
}

.menup .mitem:active {
  transform: scale(.99);
}

.hm-optchip:active {
  transform: scale(.95);
}

@media (prefers-reduced-motion: reduce) {
  .hm-mhero, .menup .mcat {
    animation: none;
  }
}

.menup .hm-locbadge {
  color: var(--hm-gold, #e3b48c);
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  display: inline-block;
}

.menuhero {
  flex-direction: column;
  align-items: center;
  gap: 1px;
  display: flex;
}

.menuhero:after {
  content: "";
  background: color-mix(in srgb, var(--brand, #fff) 75%, #fff);
  border-radius: 999px;
  width: 60px;
  height: 3px;
  margin-top: 16px;
}

.menukicker {
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ffffff8c;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
}

.menuheroname {
  letter-spacing: -.01em;
  color: #fff;
  margin: 3px 0 0;
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 700;
  line-height: 1.05;
}

.menulogo {
  object-fit: contain;
  width: auto;
  max-width: min(80vw, 560px);
  height: clamp(54px, 6vw, 82px);
  margin: 10px 0 2px;
  display: block;
}

.menuherocuisine {
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand, #2563eb);
  background: #fffffff0;
  border-radius: 999px;
  margin-top: 8px;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 700;
  display: inline-block;
}

.langbar {
  z-index: 40;
  top: max(18px, env(safe-area-inset-top));
  right: max(20px, env(safe-area-inset-right));
  position: absolute;
}

html[lang="ar"] .langbar {
  right: auto;
  left: max(20px, env(safe-area-inset-left));
}

.langtoggle {
  z-index: 2;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #0a0d1480;
  border: 1px solid #ffffff47;
  border-radius: 999px;
  width: 46px;
  height: 46px;
  padding: 3px;
  transition: transform .12s, border-color .15s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 18px #0000004d;
}

.langtoggle:hover {
  border-color: #ffffff80;
}

.langtoggle:active {
  transform: scale(.94);
}

.langtoggle img {
  object-fit: cover;
  opacity: 0;
  border-radius: 999px;
  width: 100%;
  height: 100%;
  transition: opacity .25s;
  display: block;
}

.langtoggle img.ready {
  opacity: 1;
}

.langmask {
  z-index: 1;
  position: fixed;
  inset: 0;
}

.langflyout {
  z-index: 3;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: #0a0d14b8;
  border: 1px solid #ffffff24;
  border-radius: 26px;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: min(84vw, 460px);
  padding: 8px;
  animation: .18s langin;
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  box-shadow: 0 16px 44px #00000073;
}

html[lang="ar"] .langflyout {
  justify-content: flex-start;
  left: 0;
  right: auto;
}

@keyframes langin {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.langflag {
  cursor: pointer;
  opacity: .55;
  background: #ffffff0d;
  border: 0;
  border-radius: 999px;
  width: 46px;
  height: 46px;
  padding: 0;
  transition: opacity .15s, transform .15s;
  overflow: hidden;
}

.langflag:hover {
  opacity: .9;
  transform: translateY(-1px);
}

.langflag.sel {
  opacity: 1;
  box-shadow: 0 0 0 2px #fff;
}

.langflag img {
  object-fit: cover;
  opacity: 0;
  width: 100%;
  height: 100%;
  transition: opacity .25s;
  display: block;
}

.langflag img.ready {
  opacity: 1;
}

.mcaticon {
  color: #ffffff8c;
  flex: none;
}

.revp .revcat {
  margin-bottom: 12px;
}

.revp .revcat:last-child {
  margin-bottom: 0;
}

.revp .revcatname {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ffffff9e;
  margin-top: 4px;
  margin-bottom: 6px;
  font-size: 13.5px;
  font-weight: 700;
}

html[lang="ar"] .revp .revcatname {
  letter-spacing: 0;
  text-transform: none;
  color: #ffffffad;
  font-size: 17px;
}

.hm-serif, .hm-title, .hm-tile-title, .hm-cd, .hm-line b {
  font-family: var(--sans);
}

.hmp {
  --hm-gold: #e3b48c;
  --hm-rose: #e58a9a;
  --hm-ink: #f6ece7;
  --hm-soft: #d8c3bb;
  --hm-line: #e2b2962e;
  color: var(--hm-ink);
  text-align: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: max(5vh, 34px) 20px 110px;
  display: flex;
  overflow-y: auto;
}

.hm-logo {
  letter-spacing: .16em;
  color: var(--hm-gold);
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 600;
}

.hm-title {
  margin: 10px 8px 0;
  font-size: clamp(30px, 4.6vw, 46px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.08;
}

.hm-accent {
  background: linear-gradient(90deg, var(--hm-gold), var(--hm-rose));
  border-radius: 2px;
  width: 46px;
  height: 2px;
  margin: 14px auto 16px;
  display: block;
}

.hm-sub {
  color: var(--hm-soft);
  max-width: 40ch;
  margin: 0 auto 22px;
  font-size: 15px;
}

.hm-tiles {
  flex-direction: column;
  gap: 14px;
  width: min(94vw, 520px);
  display: flex;
}

.hm-tile {
  text-align: left;
  border: 1px solid var(--hm-line);
  width: 100%;
  color: inherit;
  font: inherit;
  cursor: pointer;
  background: linear-gradient(#ffffff0d, #ffffff03);
  border-radius: 20px;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  transition: border-color .2s, transform .12s;
  display: flex;
  position: relative;
}

.hm-tile:hover {
  border-color: #e58a9a80;
}

.hm-tile:active {
  transform: scale(.99);
}

.hm-tile.done {
  opacity: .72;
}

.hm-tile-ico {
  flex: none;
  font-size: 30px;
}

.hm-tile-body {
  flex-direction: column;
  flex: 1;
  gap: 3px;
  display: flex;
}

.hm-tile-title {
  font-size: 22px;
  font-weight: 600;
}

.hm-tile-sub {
  color: var(--hm-soft);
  font-size: 13px;
}

.hm-go {
  color: var(--hm-gold);
  flex: none;
  font-size: 22px;
}

.hm-badge {
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 999px;
  width: fit-content;
  margin-top: 8px;
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 700;
  display: inline-block;
}

.hm-badge.ok {
  color: #c7f7d8;
  background: #46b46e29;
  border: 1px solid #46b46e66;
}

.hm-badge.done {
  color: var(--hm-soft);
  border: 1px solid var(--hm-line);
  background: #ffffff0f;
}

.hm-courses {
  text-align: left;
  width: min(94vw, 480px);
}

.hm-course {
  border-top: 1px solid var(--hm-line);
  padding: 11px 4px;
}

.hm-course:first-child {
  border-top: 0;
}

.hm-course.haspic {
  text-align: left;
  align-items: center;
  gap: 14px;
  display: flex;
}

.hm-cphoto {
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
  width: 62px;
  height: 62px;
  box-shadow: 0 2px 8px #00000059;
}

.hm-course.haspic .hm-ctext {
  flex: 1;
  min-width: 0;
}

.hm-groupname {
  font-family: var(--sans);
  color: #fff;
  border-bottom: 2px solid var(--hm-gold, #e3b48c);
  align-items: center;
  gap: 9px;
  margin: 28px 0 12px;
  padding-bottom: 8px;
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 600;
  display: inline-flex;
}

.hm-cdesc {
  color: #ffffff9e;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.4;
}

.mitem.mitem-full {
  padding: 15px 17px;
}

.mitem-full > .mi-photo.ph {
  display: none;
}

.mitem-full .mi-name {
  font-size: 16px;
}

.hm-opts {
  margin-top: 13px;
}

.hm-opts + .hm-opts {
  margin-top: 15px;
}

.hm-optlabel {
  letter-spacing: .01em;
  color: #ffffff8c;
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
}

.hm-optlabel:after {
  content: "";
  background: #ffffff1a;
  flex: 1;
  height: 1px;
}

.hm-optchips {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.hm-optchip {
  color: #ffffffe6;
  font: inherit;
  cursor: pointer;
  background: #ffffff0a;
  border: 1px solid #ffffff29;
  border-radius: 12px;
  align-items: center;
  padding: 9px 16px;
  font-size: 13.5px;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .1s;
  display: inline-flex;
}

.hm-optchip:hover {
  color: #fff;
  background: #ffffff17;
  border-color: #ffffff4d;
}

.hm-optchip.on {
  color: #0f172a;
  background: #fff;
  border-color: #fff;
  font-weight: 600;
  box-shadow: 0 6px 18px #00000047;
}

.hm-optchip.on:before {
  content: "✓";
  opacity: .95;
  margin-right: 8px;
  font-size: 11px;
  font-weight: 700;
}

html[lang="ar"] .hm-optchip.on:before {
  margin-left: 8px;
  margin-right: 0;
}

.hm-tile-sub {
  color: #ffffff8c;
  margin-top: 2px;
  font-size: 12px;
  display: block;
}

.hm-locnote {
  color: var(--hm-gold, #e3b48c);
  letter-spacing: .02em;
  margin: 2px 0 16px;
  font-size: 13.5px;
  font-weight: 600;
  display: inline-block;
}

.hmp .hm-menusec {
  text-align: start;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 clamp(12px, 3vw, 32px);
}

.hm-mgrid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 10px;
  display: grid;
}

.hm-mcard {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  text-align: left;
  background: #ffffff0f;
  border: 1px solid #ffffff1f;
  border-radius: 12px;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  display: flex;
}

.hm-mcard.wide {
  grid-column: 1 / -1;
  align-items: flex-start;
}

.hm-mphoto {
  object-fit: cover;
  background: #ffffff14;
  border-radius: 10px;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
}

.hm-mphoto.ph {
  color: #ffffff8c;
  box-shadow: none;
  background: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.hm-minfo {
  flex: auto;
  min-width: 0;
}

.hm-mname {
  font-family: var(--sans);
  color: #fff;
  font-size: clamp(14.5px, 1.25vw, 16.5px);
  font-weight: 600;
  line-height: 1.25;
}

.hm-mdesc {
  color: #fff9;
  margin-top: 3px;
  font-size: clamp(11.5px, 1vw, 13px);
  line-height: 1.4;
}

.hm-secicon {
  color: #ffffff8c;
  flex-shrink: 0;
}

html[lang="ar"] .hmp .hm-mcard, html[lang="ar"] .hmp .hm-minfo, html[lang="ar"] .hmp .hm-mname, html[lang="ar"] .hmp .hm-mdesc, html[lang="ar"] .hmp .hm-optlabel, html[lang="ar"] .hmp .hm-groupname, html[lang="ar"] .hmp .hm-cdesc {
  text-align: right;
}

.hm-cn {
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hm-gold);
  font-size: 10px;
  font-weight: 700;
}

.hm-cd {
  margin-top: 2px;
  font-size: 19px;
}

.hm-note {
  color: var(--hm-soft);
  margin-top: 16px;
  font-size: 13px;
}

.hm-datebtn {
  border: 1px solid var(--hm-line);
  color: var(--hm-ink);
  font: inherit;
  cursor: pointer;
  background: #ffffff0d;
  border-radius: 14px;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  font-size: 18px;
  display: inline-flex;
}

.hm-calback {
  z-index: 55;
  background: #0f080c99;
  position: fixed;
  inset: 0;
}

.hm-cal {
  z-index: 60;
  max-height: 92vh;
  margin: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  overflow-y: auto;
  transform: translate(-50%, -50%);
}

.hmwhen .steplogo {
  width: auto;
  height: clamp(116px, 12vw, 172px);
}

.hm-whenbox {
  z-index: 3;
  flex-direction: column;
  align-items: center;
  width: min(92vw, 780px);
  display: flex;
  position: absolute;
  top: 26vh;
  left: 50%;
  transform: translateX(-50%);
}

.hm-whenbox .hm-daychips {
  justify-content: center;
  width: auto;
  margin: 0 auto 30px;
  padding: 0;
}

.hm-whenbox .hm-timerows {
  width: auto;
  margin: 0;
  padding: 0;
}

.hm-whenbox .hm-timerow {
  justify-content: center;
}

.hmmenu .steplogo {
  width: auto;
  height: clamp(116px, 12vw, 172px);
}

.hmmenu .menuscroll {
  padding-top: 25vh;
}

.hm-reviewlogo {
  object-fit: contain;
  filter: drop-shadow(0 2px 10px #0000004d);
  width: auto;
  max-width: 82vw;
  height: clamp(96px, 10vw, 150px);
  margin: 0 auto 4px;
  display: block;
}

.hmreview .steplogo {
  width: auto;
  height: clamp(116px, 12vw, 172px);
}

.hmreview .detlabel {
  align-items: center;
  gap: 9px;
  display: inline-flex;
}

.hmreview .detlabel svg {
  color: var(--hm-gold, #e3b48c);
  opacity: .92;
  flex: none;
}

.hmreview .revitem {
  padding: 5px 0;
  font-size: 15px;
}

.hmreview .revcat {
  margin-bottom: 10px;
}

.hmreview .revpick {
  color: var(--hm-gold, #e3b48c);
  flex: none;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  display: inline-flex;
}

.hmreview .revpick svg {
  color: var(--hm-gold, #e3b48c);
  flex: none;
}

.hm-daychips {
  box-sizing: border-box;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  margin: 4px 0 30px;
  padding-inline: 5vw;
  display: flex;
}

.hm-daychip {
  color: #fff;
  cursor: pointer;
  opacity: .5;
  background: none;
  border: 0;
  border-left: 1px solid #ffffff24;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 3vw;
  transition: opacity .15s;
  display: flex;
  position: relative;
}

.hm-daychip:first-child {
  border-left: 0;
}

.hm-daychip:hover {
  opacity: .85;
}

.hm-daychip.sel {
  opacity: 1;
}

.hm-daychip.sel .hm-daychip-dom {
  color: #fff;
}

.hm-daychip.sel:after {
  content: "";
  background: #ffffffb3;
  border-radius: 999px;
  width: 34px;
  height: 3px;
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
}

.hm-daychip-dow {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ffffffd9;
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 500;
}

.hm-daychip-dom {
  margin: 6px 0;
  font-size: clamp(40px, 4.6vw, 64px);
  font-weight: 300;
  line-height: 1;
}

.hm-daychip-mon {
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #ffffffbf;
  font-size: clamp(16px, 1.6vw, 22px);
}

.hm-timerows {
  box-sizing: border-box;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding-inline: 5vw;
  display: flex;
}

.hm-timerow {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 12px;
  display: flex;
}

.hm-timeslot {
  color: #fff;
  cursor: pointer;
  background: #ffffff0d;
  border: 1px solid #ffffff29;
  border-radius: 14px;
  flex: none;
  min-width: 132px;
  padding: 16px 10px;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 400;
  transition: background .15s, border-color .15s, transform .1s;
}

.hm-timeslot:hover {
  background: #ffffff1a;
  border-color: #ffffff4d;
}

.hm-timeslot:active {
  transform: scale(.96);
}

.hm-timeslot.sel {
  color: #0f172a;
  background: #fff;
  border-color: #fff;
  font-weight: 600;
  box-shadow: 0 8px 22px #0000004d;
}

.hm-slots {
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: min(94vw, 480px);
  margin-top: 16px;
  display: flex;
}

.hm-slot {
  border: 1px solid var(--hm-line);
  font: inherit;
  color: var(--hm-ink);
  cursor: pointer;
  background: #ffffff08;
  border-radius: 15px;
  padding: 13px 22px;
  font-size: 20px;
  font-weight: 600;
  transition: all .15s;
}

.hm-slot small {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hm-soft);
  margin-top: 2px;
  font-size: 10px;
  font-weight: 600;
  display: block;
}

.hm-slot.sel {
  color: #1a0e14;
  background: #fff;
  border-color: #fff;
}

.hm-slot.sel small {
  color: var(--hm-gold);
}

.hm-bell {
  width: 88px;
  height: 88px;
  color: var(--hm-rose);
  background: radial-gradient(circle, #e58a9a66, #0000 70%);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  margin: 18px auto 4px;
  font-size: 38px;
  display: flex;
}

.hm-summary {
  text-align: left;
  width: min(94vw, 440px);
  margin-top: 2px;
}

.hm-line {
  border-top: 1px solid var(--hm-line);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  font-size: 14px;
  display: flex;
}

.hm-line:first-child {
  border-top: 0;
}

.hm-line span {
  color: var(--hm-soft);
}

.hm-line b {
  font-size: 18px;
  font-weight: 600;
}

.hm-choices {
  text-align: left;
  border: 1px solid var(--hm-line);
  background: #ffffff0d;
  border-radius: 14px;
  width: min(94vw, 440px);
  margin-top: 14px;
  padding: 6px 16px 12px;
}

.hm-choices-hd {
  letter-spacing: .01em;
  color: #fff9;
  padding: 12px 0 6px;
  font-size: 13px;
  font-weight: 600;
}

.hm-choice {
  border-top: 1px solid var(--hm-line);
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 8px 0;
  font-size: 14px;
  display: flex;
}

.hm-choice span {
  color: var(--hm-soft);
  flex: none;
}

.hm-choice b {
  text-align: right;
  font-weight: 600;
}

.hmcard {
  text-align: start;
  color: #f6ece7;
  width: 100%;
  max-width: 380px;
  font: inherit;
  cursor: pointer;
  background: linear-gradient(135deg, #e3b48c33, #e58a9a2b);
  border: 1px solid #e58a9a73;
  border-radius: 15px;
  align-items: center;
  gap: 12px;
  margin: 20px auto 22px;
  padding: 11px 14px;
  transition: transform .15s, box-shadow .25s;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 22px #e58a9a24;
}

.hmcard:before {
  content: "";
  pointer-events: none;
  background: radial-gradient(130% 120% at 100% 0, #e58a9a38, #0000 62%);
  position: absolute;
  inset: 0;
}

.hmcard:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px #e58a9a42;
}

.hmcard:active {
  transform: scale(.99);
}

.hmcard-ico {
  color: #fff;
  background: linear-gradient(150deg, #e58a9a, #c25f74);
  border-radius: 999px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  display: flex;
  position: relative;
  box-shadow: 0 4px 12px #c25f7459;
}

.hmcard-ico svg {
  width: 18px;
  height: 18px;
}

.hmcard-body {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-width: 0;
  display: flex;
  position: relative;
}

.hmcard-titlerow {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.hmcard-title {
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.15;
}

.hmcard-sub {
  color: #e6cfc7;
  font-size: 13px;
}

.hmcard-badge {
  letter-spacing: .02em;
  color: #fff;
  background: linear-gradient(140deg, #e58a9a, #c25f74);
  border-radius: 999px;
  flex: none;
  padding: 3px 10px;
  font-size: 10.5px;
  font-weight: 700;
  box-shadow: 0 2px 8px #c25f7459;
}

.hmcard-go {
  color: #f6ece7a6;
  flex: none;
  display: inline-flex;
  position: relative;
}

.hmcard-go svg {
  width: 17px;
  height: 17px;
}

html[lang="ar"] .hmcard-go svg {
  transform: scaleX(-1);
}

html[lang="ar"] .idpage2, html[lang="ar"] .rintro2 {
  direction: rtl;
}

html[lang="ar"] .id2left, html[lang="ar"] .ri2left, html[lang="ar"] .whentitle, html[lang="ar"] .detrows {
  left: auto;
  right: 5vw;
}

html[lang="ar"] .whentitle:after, html[lang="ar"] .ri2name:after {
  left: auto;
  right: 0;
}

html[lang="ar"] .rintro2 .steplogo {
  left: auto;
  right: 5vw;
}

html[lang="ar"] .rintro2:before {
  background: linear-gradient(260deg, #060910f0 0%, #060910c7 30%, #0609104d 54%, #0609101a 100%);
}

html[lang="ar"] .ri2gallery {
  left: 4.5vw;
  right: auto;
}

html[lang="ar"] .whenrow {
  left: auto;
  right: 5vw;
  transform: translateY(-50%);
}

html[lang="ar"] .id2keypad {
  left: 6vw;
  right: auto;
}

html[lang="ar"] .ri2back, html[lang="ar"] .back, html[lang="ar"] .mosaicback {
  left: auto;
  right: max(24px, env(safe-area-inset-right));
}

html[lang="ar"] .ri2next {
  right: auto;
  left: max(24px, env(safe-area-inset-left));
}

html[lang="ar"] .ri2back svg, html[lang="ar"] .back svg, html[lang="ar"] .mosaicback svg {
  transform: scaleX(-1);
}

html[lang="ar"] .whentitle, html[lang="ar"] .id2title {
  font-size: clamp(24px, 2.9vw, 38px);
}

html[lang="ar"] .wl2name {
  font-size: clamp(22px, 3vw, 40px);
}

html[lang="ar"] .whencol {
  border-left: 0;
  border-right: 1px solid #ffffff24;
}

html[lang="ar"] .whencol:first-child {
  border-right: 0;
}

html[lang="ar"] .wl2cell b, html[lang="ar"] .mliso, html[lang="ar"] .mlstamp {
  unicode-bidi: bidi-override;
  display: inline-block;
  direction: ltr !important;
}

html[lang="ar"] .id2keypad, html[lang="ar"] .keypad {
  direction: ltr;
}

.isonum {
  direction: ltr;
  unicode-bidi: bidi-override;
  display: inline-block;
}

html[lang="ar"] .id2keypad > span {
  grid-area: 4 / 3;
}

html[lang="ar"] .id2keypad > button:nth-last-child(2) {
  grid-area: 4 / 2;
}

html[lang="ar"] .id2keypad > button:last-child {
  grid-area: 4 / 1;
}

html[lang="ar"] input.id2box {
  text-align: right;
}

html[lang="ar"] .id2box.asbtn {
  text-align: right;
  justify-content: flex-start;
}

html[lang="ar"] .whendow {
  white-space: nowrap;
  font-size: clamp(13px, 1.4vw, 18px);
}

html[lang="ar"] .whencol {
  padding: 0 2vw;
}

html[lang="ar"] .calwrap.id2cal .rdp-weekday {
  letter-spacing: 0;
  font-size: 10.5px;
}

html[lang="ar"] .calwrap.id2cal .rdp-chevron {
  transform: scaleX(-1);
}

.calwrap.id2cal .rdp-weekdays {
  border-bottom: 1px solid #ffffff14;
}

.calwrap.id2cal .rdp-weekday {
  color: #ffffff80;
  padding-bottom: 9px;
  font-weight: 600;
}

.calwrap.id2cal .rdp-day_button {
  border-radius: 999px;
  transition: background .12s, color .12s, transform .1s;
}

.calwrap.id2cal .rdp-day_button:hover {
  background: #ffffff29;
}

.calwrap.id2cal .rdp-day_button:active {
  transform: scale(.9);
}

.calwrap.id2cal .rdp-today:not(.rdp-selected) .rdp-day_button {
  box-shadow: inset 0 0 0 1.5px #ffffff8c;
}

.calwrap.id2cal .rdp-selected .rdp-day_button, .calwrap.id2cal .rdp-selected .rdp-day_button:hover {
  box-shadow: 0 5px 16px #0000006b !important;
}

.calwrap.id2cal .rdp-button_previous, .calwrap.id2cal .rdp-button_next {
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  transition: background .12s;
  display: inline-flex;
}

.calwrap.id2cal .rdp-button_previous:hover, .calwrap.id2cal .rdp-button_next:hover {
  background: #ffffff1f;
}

.calwrap.id2cal .rdp-month_grid {
  margin-top: 6px;
}

.calwrap.id2cal .rdp-day {
  text-align: center;
  padding: 0;
}

.calwrap.id2cal .rdp-day_button {
  margin: 0 auto;
}

html[lang="ar"] .menukicker {
  letter-spacing: 0;
  font-size: 15px;
}

html[lang="ar"] .mcathd, html[lang="ar"] .menuherocuisine {
  letter-spacing: 0;
}

/* [project]/app/tasks.css [app-client] (css) */
.tkdot {
  border-radius: 999px;
  width: 9px;
  height: 9px;
  display: inline-block;
}

.tkdot.tk-new {
  background: var(--accent, #374151);
}

.tkdot.tk-prog {
  background: #eab308;
}

.tkdot.tk-done {
  background: #22c55e;
}

.tkdot.tk-cxl {
  background: #94a3b8;
}

.tkalert-overlay {
  z-index: 3000;
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
  background: #0f172a57;
  justify-content: center;
  align-items: center;
  padding: 20px;
  animation: .2s tkfade;
  display: flex;
  position: fixed;
  inset: 0;
}

@keyframes tkfade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.tkalert {
  text-align: left;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-left: 5px solid #f59e0b;
  border-radius: 16px;
  flex-direction: column;
  gap: 12px;
  width: min(390px, 100vw - 40px);
  padding: 16px 18px;
  animation: .3s cubic-bezier(.2, .9, .3, 1.2) tkpop;
  display: flex;
  box-shadow: 0 8px 16px -8px #10182824, 0 28px 64px -12px #10182852;
}

@keyframes tkpop {
  from {
    opacity: 0;
    transform: scale(.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.tkalert-head {
  align-items: center;
  gap: 10px;
  display: flex;
}

.tkalert-ico {
  background: color-mix(in srgb, currentColor 12%, #fff);
  color: #d97706;
  transform-origin: 50% 20%;
  border-radius: 50%;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  display: inline-flex;
}

.tkalert.ev-new .tkalert-ico {
  animation: 1s ease-in-out infinite tkbellring;
}

.tkalert.ev-done {
  border-left-color: #16a34a;
}

.tkalert.ev-done .tkalert-ico {
  color: #16a34a;
}

.tkalert.ev-reopen {
  border-left-color: #f97316;
}

.tkalert.ev-reopen .tkalert-ico {
  color: #ea580c;
}

.tkalert.ev-cxl {
  border-left-color: #dc2626;
}

.tkalert.ev-cxl .tkalert-ico {
  color: #dc2626;
}

.tkalert.ev-prog, .tkalert.ev-test {
  border-left-color: #0284c7;
}

.tkalert.ev-prog .tkalert-ico, .tkalert.ev-test .tkalert-ico {
  color: #0284c7;
}

@keyframes tkbellring {
  0%, 70%, 100% {
    transform: rotate(0);
  }

  78% {
    transform: rotate(14deg);
  }

  86% {
    transform: rotate(-11deg);
  }

  94% {
    transform: rotate(6deg);
  }
}

.tkalert-txt {
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  display: flex;
}

.tkalert-txt b {
  color: var(--fg, #0f172a);
  font-size: 14.5px;
  font-weight: 700;
}

.tkalert-txt span {
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 10.5px;
  font-weight: 700;
}

.tkalert-rows {
  background: var(--bg-subtle, #f8fafc);
  border: 1px solid var(--border, #eef1f5);
  border-radius: 10px;
  flex-direction: column;
  padding: 3px 12px;
  display: flex;
}

.tkalert-rows:empty {
  display: none;
}

.tkalert-row {
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 6px 0;
  font-size: 12.5px;
  display: flex;
}

.tkalert-row + .tkalert-row {
  border-top: 1px dotted var(--border, #e2e8f0);
}

.tkalert-row > b {
  font-variant-numeric: tabular-nums;
}

.tkalert-row > span {
  color: var(--fg-secondary, #64748b);
  flex: none;
}

.tkalert-row > b {
  color: var(--fg, #0f172a);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
}

.tkalert-acts {
  gap: 8px;
  margin-top: 2px;
  display: flex;
}

.tkalert-open {
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--sans);
  background: #374151;
  border: 0;
  border-radius: 10px;
  flex: 1;
  padding: 10px 22px;
  transition: background .12s, box-shadow .12s;
  box-shadow: 0 2px 8px -2px #37415173, inset 0 1px #ffffff1f;
}

.tkalert-open:active {
  box-shadow: 0 1px 3px -1px #37415166;
}

.tkalert-open:focus-visible, .tkalert-dismiss:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #64748b;
}

.tkalert-open:hover {
  background: #1f2937;
}

.tkalert-dismiss {
  color: #64748b;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--sans);
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 16px;
  transition: background .12s, color .12s, border-color .12s;
}

.tkalert-dismiss:hover {
  color: #334155;
  background: #f8fafc;
  border-color: #cbd5e1;
}

@keyframes tkslide {
  from {
    opacity: 0;
    transform: translateX(60px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes tkring {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent, #374151) 45%, transparent);
  }

  70% {
    box-shadow: 0 0 0 12px #0000;
  }

  100% {
    box-shadow: 0 0 #0000;
  }
}

.tkcard.tkfresh {
  animation: 1.8s ease-in-out 3 tkglow;
}

@keyframes tkglow {
  0%, 100% {
    box-shadow: 0 1px 3px #1018280f;
  }

  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, #374151) 22%, transparent);
  }
}

.tkstats {
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
  display: grid;
}

.tkstat {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  cursor: pointer;
  font: inherit;
  text-align: start;
  border-radius: 12px;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 16px;
  transition: border-color .15s, box-shadow .15s, background .15s, color .15s;
  display: flex;
}

.tkstat:hover {
  border-color: var(--border-strong, #cbd5e1);
  box-shadow: 0 2px 8px #1018280f;
}

.tkstat:focus-visible {
  outline: 2px solid var(--accent, #374151);
  outline-offset: 2px;
}

.tkstat.on {
  border-color: color-mix(in srgb, var(--accent, #374151) 40%, var(--border, #e2e8f0));
  box-shadow: 0 1px 3px #1018280f;
}

.tkstat.on.tk-prog {
  border-color: #eab3088c;
}

.tkstat.on.tk-done {
  border-color: #22c55e80;
}

.tkstat.on.tk-cxl {
  border-color: var(--border-strong, #cbd5e1);
}

.tkstat-n {
  color: var(--fg, #0f172a);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.tkstat-l {
  color: var(--fg-secondary, #64748b);
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
}

.tklist {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.tkrow1 {
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  display: flex;
}

.tkrow2 {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
  padding-inline-start: 2px;
  display: flex;
}

.tkrow1 .tkpill, .tkrow1 .tkdur, .tkrow2 .tkchip {
  height: 22px;
}

.tkrow1 .tkpill {
  padding: 0 10px 0 8px;
}

.tkrow1 .tkdur, .tkrow2 .tkchip {
  padding: 0 10px;
}

.tkrow2 .mlauto {
  margin-inline-start: auto;
}

.tkempty {
  background: var(--bg-card, #fff);
  border: 1px dashed var(--border-strong, #cbd5e1);
  color: var(--fg-secondary, #64748b);
  border-radius: 14px;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 44px 20px;
  display: flex;
}

.tkempty b {
  color: var(--fg, #1e293b);
  font-size: 15px;
}

.tkempty span {
  font-size: 13px;
}

.tkempty .abtn {
  margin-top: 6px;
}

.tkcard {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-inline-start-width: 4px;
  border-radius: 12px;
  transition: box-shadow .15s, border-color .15s;
  position: relative;
  overflow: hidden;
}

.tkbadge-corner {
  top: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: 0 0 7px 7px;
  position: absolute;
  inset-inline-end: 12px;
}

.tkcard.tk-new {
  border-inline-start-color: var(--accent, #374151);
}

.tkcard.tk-prog {
  border-inline-start-color: #eab308;
}

.tkcard.tk-done {
  border-inline-start-color: #22c55e;
}

.tkcard.tk-cxl {
  opacity: .75;
  border-inline-start-color: #94a3b8;
}

.tkcard.open {
  box-shadow: 0 6px 18px #10182817;
}

.tktop {
  cursor: pointer;
  text-align: start;
  width: 100%;
  font: inherit;
  background: none;
  border: 0;
  flex-direction: column;
  align-items: stretch;
  padding: 13px 16px;
  display: flex;
}

.tkpill.tk-new {
  background: var(--accent-subtle, #f0f1f3);
  border-color: color-mix(in srgb, var(--accent, #374151) 35%, transparent);
  color: var(--accent, #374151);
}

.tkpill.tk-new .sumstat-dot {
  background: var(--accent, #374151);
}

.tkpill.tk-prog {
  color: #a16207;
  background: #eab3081f;
  border-color: #eab30866;
}

.tkpill.tk-prog .sumstat-dot {
  background: #eab308;
}

.tkpill.tk-done {
  color: #15803d;
  background: #22c55e1a;
  border-color: #22c55e59;
}

.tkpill.tk-done .sumstat-dot {
  background: #22c55e;
}

.tkpill.tk-cxl {
  background: var(--bg-muted, #eef2f7);
  border-color: var(--border, #e2e8f0);
  color: var(--fg-secondary, #64748b);
}

.tkpill.tk-cxl .sumstat-dot {
  background: #94a3b8;
}

.tkflame {
  color: #f97316;
  flex: none;
}

.tkdur {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  border: 1px solid #0000;
  border-radius: 999px;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
}

.tkdur.d0 {
  color: #475569;
  background: #cbd5e1;
  border-color: #cbd5e1;
}

.tkdur.d1 {
  color: #fff;
  background: #1e6fd8;
  border-color: #1e6fd8;
}

.tkdur.d2 {
  color: #3d2f00;
  background: #f5c518;
  border-color: #f5c518;
}

.tkdur.d3 {
  color: #fff;
  background: #ed8b2b;
  border-color: #ed8b2b;
}

.tkdur.d4 {
  color: #fff;
  background: #e8352a;
  border-color: #e8352a;
}

.tkdur.d5 {
  color: #fff;
  background: #1a1a1a;
  border-color: #1a1a1a;
}

.tkdur-lg {
  padding: 0;
  background: none !important;
  border: 0 !important;
}

.tkdur-lg.d0 {
  color: #15803d;
}

.tkdur-lg.d1 {
  color: #a16207;
}

.tkdur-lg.d2 {
  color: #c2410c;
}

.tkdur-lg.d3 {
  color: #dc2626;
}

.tkdur-lg.d4 {
  color: var(--fg, #0f172a);
}

:root[data-theme="dark"] .tkdur-lg.d4 {
  color: #fff;
}

:root[data-theme="dark"] .tkdur.d4 {
  background: #000;
  border-color: #334155;
}

.tktitle {
  color: var(--fg, #1e293b);
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
}

.tkref {
  color: var(--fg-muted, #94a3b8);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.tkchips {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.tkchip {
  background: var(--bg-muted, #eef2f7);
  color: var(--fg-secondary, #64748b);
  white-space: nowrap;
  border-radius: 999px;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
}

.tkchip.tkguest {
  background: var(--accent-subtle, #f0f1f3);
  color: var(--accent, #374151);
}

.tkchip.tkdue {
  color: #c2410c;
  background: #f973161a;
}

.tkchip.tkdue.over {
  color: #b91c1c;
  background: #dc262621;
  font-weight: 700;
}

.tkmeta {
  color: var(--fg-secondary, #64748b);
  align-items: center;
  gap: 12px;
  margin-inline-start: auto;
  display: inline-flex;
}

.tkcom {
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
}

.tkwhen {
  white-space: nowrap;
  font-size: 12px;
}

.tkchev {
  transition: transform .15s;
}

.tkbody {
  border-top: 1px solid var(--border, #eef1f5);
  padding: 14px 18px;
}

.tkdetails {
  color: var(--fg, #1e293b);
  white-space: pre-wrap;
  margin: 0 0 12px;
  font-size: 13px;
}

.tkactions {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  display: flex;
}

.tkactions .abtn, .admin .tkactions .abtn, .admin .tkactions .abtn.ghost {
  height: 32px;
  box-shadow: none;
  padding: 0 15px;
  font-size: 12.5px;
  border-radius: 999px !important;
}

.tknew, .admin .tknew {
  height: 34px;
  padding: 0 16px;
  border-radius: 999px !important;
}

.tkthread {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.tkmsg {
  background: var(--bg-subtle, #f8fafc);
  border: 1px solid var(--border, #eef1f5);
  border-radius: 12px;
  gap: 10px;
  padding: 10px 12px;
  display: flex;
}

.tkavatar {
  background: var(--accent-subtle, #f0f1f3);
  width: 30px;
  height: 30px;
  color: var(--accent, #374151);
  border-radius: 999px;
  flex: none;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  display: flex;
}

.tkmsg-main {
  flex: 1;
  min-width: 0;
}

.tkmsg-head {
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
  font-size: 12.5px;
  display: flex;
}

.tksugg {
  z-index: 50;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  overscroll-behavior: contain;
  border-radius: 11px;
  max-height: 240px;
  margin-top: 5px;
  padding: 5px;
  animation: .12s tksuggin;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow-y: auto;
  box-shadow: 0 12px 32px #10182829;
}

@keyframes tksuggin {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tksugg {
    animation: none;
  }
}

.tksugg-item {
  text-align: start;
  width: 100%;
  font: inherit;
  color: var(--fg, #1e293b);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 7px;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  font-size: 13px;
  display: flex;
}

.tksugg-item:hover {
  background: var(--accent-subtle, #f0f1f3);
}

.tksugg-t {
  font-family: var(--sans);
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 auto;
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
}

.tksugg-hint {
  color: var(--fg-muted, #94a3b8);
  padding: 10px 12px;
  font-size: 12.5px;
}

.tksugg-ar {
  min-width: 0;
  color: var(--fg-secondary, #475569);
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: rtl;
  unicode-bidi: isolate;
  flex: 1;
  padding-left: 16px;
  font-family: Noto Sans Arabic, Segoe UI, ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.7;
  overflow: hidden;
}

.tksugg-n {
  text-align: center;
  min-width: 20px;
  color: var(--fg-secondary, #64748b);
  background: var(--bg-subtle, #f1f5f9);
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  flex: none;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
}

.tksugg-create {
  color: var(--accent, #374151);
  border-top: 1px solid var(--border, #eef1f5);
  border-radius: 0 0 7px 7px;
  margin-top: 2px;
  font-weight: 600;
}

.tkloc {
  max-height: 280px;
}

.tkloc-grp {
  color: var(--fg, #1e293b);
  font-weight: 700;
}

.tkloc-grp .tksugg-n {
  font-weight: 600;
}

.tkloc-item {
  color: var(--fg-secondary, #475569);
  padding-inline-start: 34px;
}

.tkloc-item:hover {
  color: var(--fg, #1e293b);
}

.tkroomhint {
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font-size: 12.5px;
  display: inline-flex;
}

.tkroomhint.ok {
  color: #15803d;
  font-weight: 600;
}

.tkroomhint.bad {
  color: #dc2626;
  font-weight: 600;
}

.tkmsg-head b {
  color: var(--fg, #1e293b);
}

.tkmsg-del {
  color: var(--fg-muted, #94a3b8);
  cursor: pointer;
  background: none;
  border: 0;
  margin-inline-start: auto;
  padding: 2px;
}

.tkmsg-del:hover {
  color: #dc2626;
}

.tkmsg-edit {
  color: var(--fg-muted, #94a3b8);
  cursor: pointer;
  background: none;
  border: 0;
  margin-inline-start: auto;
  padding: 2px;
}

.tkmsg-edit:hover {
  color: var(--accent, #374151);
}

.tkmsg-edit + .tkmsg-del {
  margin-inline-start: 0;
}

.tkmsg-body {
  color: var(--fg, #1e293b);
  white-space: pre-wrap;
  font-size: 13px;
}

.tkrespond {
  gap: 8px;
  margin-top: 4px;
  display: flex;
}

.tkrespond .hminp {
  border-radius: 999px;
  flex: 1;
  height: 34px;
  padding: 0 14px;
}

.tkrespond .abtn, .admin .tkrespond .abtn, .admin .tkrespond .abtn.ghost {
  height: 34px;
  box-shadow: none;
  padding: 0 15px;
  border-radius: 999px !important;
}

.tkmodal .umodalhead:after {
  display: none;
}

.tkmodal .umodalhead {
  padding: 16px 24px;
}

.tkmodal .umodalbody {
  gap: 14px;
  padding: 20px 24px 16px;
}

.tkmodal .umodalfoot {
  padding: 14px 24px;
}

.tkmhead {
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.tkmhead b {
  letter-spacing: -.01em;
  color: var(--fg, #0f172a);
  font-size: 16px;
  font-weight: 700;
}

.tkmhead span {
  color: var(--fg-secondary, #64748b);
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 500;
}

.tkmodal .hminp {
  border-radius: 9px;
  height: 38px !important;
}

.tkmodal textarea.hminp {
  border-radius: 9px;
  min-height: 84px;
  padding-top: 9px;
  height: auto !important;
}

.tkmodal .tkf2 {
  align-items: start;
}

.tkmodal .tkf {
  justify-content: flex-start;
}

.tkmodal .tkloc {
  max-height: min(230px, 32vh);
}

.tkmodal .tsel-btn, .tkmodal .datewrap.adm .datebtn {
  border-radius: 9px;
  height: 38px;
}

.tkmodal .datewrap.adm:before {
  top: 19px;
}

.tkmodal .tkf > span {
  letter-spacing: 0;
}

.tkmodal .tkhi {
  margin-top: -2px;
}

.tkseg {
  background: var(--bg-muted, #eef2f7);
  border-radius: 9px;
  gap: 3px;
  margin-inline: auto 10px;
  padding: 3px;
  display: inline-flex;
}

.tkseg button {
  color: var(--fg-secondary, #64748b);
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 7px;
  padding: 5px 14px;
  font-size: 12.5px;
  font-weight: 600;
  transition: all .12s;
}

.tkseg button.on {
  background: var(--bg-card, #fff);
  color: var(--accent, #374151);
  box-shadow: 0 1px 2px #00000014;
}

.tkform {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.tkf {
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  display: flex;
}

.tkf > span {
  color: var(--fg-secondary, #64748b);
  font-size: 12px;
  font-weight: 600;
}

.tkf2 {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  display: grid;
}

.tkduerow {
  grid-template-columns: minmax(0, 1fr) auto;
}

.tkduefields {
  align-items: center;
  gap: 8px;
  display: flex;
}

.tkduefields .datewrap {
  flex: auto;
  min-width: 0;
}

.tkduefields .datebtn {
  white-space: nowrap;
  width: 100%;
}

.tkhi {
  align-self: flex-start;
}

.tkfrow2 {
  border-top: 1px solid var(--border, #eef1f5);
  flex-wrap: wrap;
  flex: 100%;
  padding-top: 12px;
  border-inline-start: 0 !important;
  padding-inline-start: 0 !important;
}

.hmcoverimg.empty {
  color: var(--fg-secondary, #94a3b8);
  font-size: 13px;
}

.rolerow {
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  display: flex;
}

.rolerow:last-child {
  border-bottom: none;
}

.rolerow > label {
  cursor: pointer;
  flex: 1;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  display: flex;
}

.rolerow select {
  max-width: 240px;
}

.emptybig {
  text-align: center;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 48px 24px;
}

.emptybigico {
  background: var(--accent-subtle);
  width: 64px;
  height: 64px;
  color: var(--accent);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  margin: 0 auto 14px;
  display: flex;
}

.emptybigh {
  color: var(--fg);
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 600;
}

.emptybigp {
  color: var(--fg-secondary);
  margin-bottom: 18px;
  font-size: 13px;
}

.tkdm-grp {
  border: 1px solid var(--border, #e6e8ec);
  background: var(--bg-card, #fff);
  border-radius: 14px;
  flex-direction: column;
  gap: 2px;
  height: fit-content;
  padding: 10px 12px;
  transition: box-shadow .15s;
  display: flex;
  box-shadow: 0 1px 2px #1018280a;
}

.tkdm-grp:hover {
  box-shadow: 0 4px 14px #10182812;
}

.tkdm-row {
  align-items: center;
  gap: 8px;
  display: flex;
}

.tkdm-row:not(.sub) .tkdm-name {
  font-size: 13px;
  font-weight: 700;
}

.tkdm-name {
  flex: 1;
  transition: border-color .12s, background .12s;
  background: none !important;
  border-color: #0000 !important;
  border-radius: 8px !important;
  height: 32px !important;
}

.tkdm-row:hover .tkdm-name, .tkdm-name:focus {
  border-color: var(--border, #e2e8f0) !important;
  background: var(--bg-card, #fff) !important;
}

.tkdm-row.sub {
  border-inline-start: 2px solid var(--border, #eceef1);
  margin-inline-start: 14px;
  padding-inline-start: 12px;
}

.tkdm-row.off .tkdm-name {
  opacity: .5;
  text-decoration: line-through;
}

.tkdm-act {
  flex: none;
  padding: 3px 10px;
  font-size: 12px;
}

.tkdm-row.addrow {
  margin-top: 4px;
}

.tkdm-row.addrow .tkdm-name {
  font-size: 12.5px;
  border: 1px dashed var(--border-strong, #cbd5e1) !important;
  height: 30px !important;
}

.tkdm-row.addrow .tkdm-name:focus {
  border-style: solid !important;
}

.tkdm-row.addrow .abtn, .admin .tkdm-row.addrow .abtn, .admin .tkdm-row.addrow .abtn.ghost {
  height: 30px;
  box-shadow: none;
  padding: 0 14px;
  font-size: 12px;
  border-radius: 999px !important;
}

.tkdm-embed {
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  align-items: start;
  gap: 12px;
  padding: 16px;
  display: grid;
}

.tkdm-embed > .tkdm-row.addrow {
  grid-column: 1 / -1;
  max-width: 480px;
}

.tkphotos {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.tkdrop {
  border: 1.5px dashed var(--border-strong, #cbd5e1);
  background: var(--bg-subtle, #f8fafc);
  border-radius: 10px;
  transition: border-color .12s, background .12s, box-shadow .12s;
  position: relative;
}

.tkdrop:focus-within {
  border-color: var(--accent, #374151);
  box-shadow: 0 0 0 3px #3741511a;
}

.tkdrop:hover {
  border-color: var(--accent, #374151);
  background: var(--bg-card, #fff);
}

.tkdrop-inner {
  color: var(--fg-secondary, #64748b);
  cursor: pointer;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 18px 12px;
  font-size: 13px;
  display: flex;
}

.tkdrop-inner svg {
  color: var(--fg-muted, #94a3b8);
}

.tkdrop-inner u {
  color: var(--accent, #374151);
  font-weight: 600;
}

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

.tkthumb {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  width: 74px;
  height: 74px;
  position: relative;
  overflow: hidden;
}

.tkthumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.tkthumb button {
  top: 3px;
  color: #fff;
  cursor: pointer;
  background: #0f172aa6;
  border: 0;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  display: flex;
  position: absolute;
  inset-inline-end: 3px;
}

.tkthumb button:hover {
  background: #dc2626;
}

.rolegrid {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  align-items: start;
  gap: 12px;
  display: grid;
}

.rolecard {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e6e8ec);
  border-radius: 14px;
  flex-direction: column;
  gap: 11px;
  padding: 14px 16px;
  transition: box-shadow .15s;
  display: flex;
  box-shadow: 0 1px 2px #1018280a;
}

.rolecard:hover {
  box-shadow: 0 4px 14px #10182812;
}

.rolehead {
  align-items: center;
  gap: 9px;
  display: flex;
}

.rolename {
  color: var(--fg, #0f172a);
  font-size: 14px;
  font-weight: 600;
}

.rolecode {
  color: var(--fg-muted, #94a3b8);
  font-size: 12px;
}

.rolehead .gcount {
  gap: 5px;
  margin-inline-start: auto;
  display: inline-flex;
}

.roleperms {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.roleperm {
  border: 1px dashed var(--border-strong, #cbd5e1);
  color: var(--fg-muted, #94a3b8);
  font: inherit;
  cursor: pointer;
  background: none;
  border-radius: 999px;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 600;
  transition: all .12s;
  display: inline-flex;
}

.roleperm:hover {
  color: var(--fg, #1e293b);
  border-color: var(--fg-muted, #94a3b8);
}

.roleperm.on {
  border-style: solid;
  border-color: color-mix(in srgb, var(--accent, #374151) 45%, transparent);
  background: var(--accent-subtle, #f0f1f3);
  color: var(--fg, #1e293b);
}

.pweye {
  inset-inline-end: 9px;
  width: 24px;
  height: 24px;
  color: var(--fg-muted, #94a3b8);
  cursor: pointer;
  background: none;
  border: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  bottom: 8px;
}

.pweye:hover {
  color: var(--fg, #1e293b);
}

.scopewrap {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 10px;
  display: grid;
}

.scopecol {
  flex-direction: column;
  gap: 9px;
  display: flex;
}

.scopecol > b {
  color: var(--fg, #1e293b);
  font-size: 12.5px;
}

.scopelist {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.tkstamps {
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 2px 0 12px;
  display: flex;
}

.tkstamp {
  color: var(--fg-secondary, #64748b);
  font-size: 12.5px;
}

.tkstamp b {
  color: var(--fg, #1e293b);
  font-weight: 600;
}

.tkstamp.ok b {
  color: #15803d;
}

.tkstamp.bad b {
  color: #b91c1c;
}

.tkassignbox {
  border: 1px solid var(--border, #e6e8ec);
  background: var(--bg-subtle, #f8fafc);
  border-radius: 12px;
  margin: 0 0 14px;
  padding: 11px 13px;
}

.tkassign-top {
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
  display: flex;
}

.tkassign-top > .abtn {
  margin-inline-start: auto;
}

.tkassign-panel {
  border: 1px solid var(--border, #e2e8f0);
  background: var(--bg-card, #fff);
  border-radius: 12px;
  margin-top: 10px;
  overflow: hidden;
}

.tkassign-plus {
  color: var(--fg-muted, #94a3b8);
}

.tkassign-list {
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  display: flex;
}

.tkassign-empty {
  border: 1px dashed var(--border-strong, #cbd5e1);
  color: var(--fg-muted, #94a3b8);
  cursor: pointer;
  font-size: 12.5px;
  font: inherit;
  background: none;
  border-radius: 8px;
  padding: 8px 12px;
}

.tkassign-empty:hover {
  color: var(--accent, #374151);
  border-color: var(--accent, #374151);
}

.tkavatar.sm {
  flex: none;
  width: 24px;
  height: 24px;
  font-size: 10px;
}

.tkdetailmodal .tkmhead {
  align-items: center;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.tkdetailmodal .tkmhead b {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  overflow: hidden;
}

.tkdetailmodal .tkmhead .tkref {
  flex: none;
}

.tkdetailbody {
  flex-direction: column;
  gap: 13px;
  max-height: min(72vh, 720px);
  display: flex;
  overflow-y: auto;
}

.tkdetailbody .tkchipsrow {
  flex-wrap: wrap;
  gap: 7px;
  display: flex;
}

.tkdetailbody .tkactions {
  margin-bottom: 0;
}

.tkdetailbody .tkthread {
  margin-top: 2px;
}

.tkcard:hover {
  box-shadow: 0 3px 12px #10182814;
}

.tkcard .tkchev {
  transition: transform .12s;
}

.tkcard:hover .tkchev {
  transform: translateX(2px);
}

.empgrid {
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 12px;
  display: grid;
}

.empcard {
  text-align: start;
  border: 1px solid var(--border, #e6e8ec);
  background: var(--bg-card, #fff);
  cursor: pointer;
  font: inherit;
  border-radius: 14px;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  transition: box-shadow .12s, border-color .12s;
  display: flex;
}

.empcard:hover {
  border-color: var(--border-strong, #cbd5e1);
  box-shadow: 0 4px 14px #10182814;
}

.empcard.off {
  opacity: .55;
}

.empav {
  background: var(--accent-subtle, #f0f1f3);
  width: 40px;
  height: 40px;
  color: var(--accent, #374151);
  border-radius: 999px;
  flex: none;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  display: flex;
}

.empmain {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.empname {
  color: var(--fg, #1e293b);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
}

.empmeta {
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin-top: 1px;
  display: flex;
}

.empposition {
  color: #374151;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
}

.empcode {
  color: #64748b;
  background: var(--bg-subtle, #f1f5f9);
  font-variant-numeric: tabular-nums;
  border-radius: 5px;
  flex: none;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
}

.empdept {
  color: var(--fg-secondary, #94a3b8);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
  font-size: 12px;
  overflow: hidden;
}

.empstats {
  border-inline-start: 1px solid var(--border, #eef1f5);
  min-width: 52px;
  color: var(--fg-secondary, #64748b);
  flex-direction: column;
  flex: none;
  align-items: flex-end;
  gap: 2px;
  padding-inline-start: 10px;
  font-size: 12px;
  display: flex;
}

.empstats b {
  color: var(--fg, #1e293b);
  font-size: 14px;
}

.empstats b.ok {
  color: #15803d;
}

.empstatgrid {
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px;
  display: grid;
}

.empstat {
  border: 1px solid var(--border, #e6e8ec);
  text-align: center;
  border-radius: 12px;
  flex-direction: column;
  gap: 3px;
  padding: 12px;
  display: flex;
}

.empstat b {
  color: var(--fg, #0f172a);
  font-size: 22px;
  font-weight: 700;
}

.empstat b.ok {
  color: #15803d;
}

.empstat span {
  color: var(--fg-secondary, #64748b);
  font-size: 12px;
}

.emptasks {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.emptaskrow {
  border: 1px solid var(--border, #eef1f5);
  border-radius: 10px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  display: flex;
}

.emptask-t {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  color: var(--fg, #1e293b);
  flex: 1;
  font-size: 13px;
  overflow: hidden;
}

.emptask-dur {
  color: var(--fg-secondary, #64748b);
  font-variant-numeric: tabular-nums;
  flex: none;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  display: inline-flex;
}

.empedit {
  border: 1px solid var(--border, #e6e8ec);
  background: var(--bg-subtle, #f8fafc);
  border-radius: 12px;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px;
  display: grid;
}

.empedit .tkf {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.empedit .tkf.full {
  grid-column: 1 / -1;
}

.empedit .tkf > span {
  color: var(--fg-secondary, #64748b);
  font-size: 12px;
  font-weight: 600;
}

.tkprio {
  background: color-mix(in srgb, currentColor 9%, transparent);
  white-space: nowrap;
  border-radius: 999px;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
}

.tktable td .tkprio {
  border-radius: 6px;
}

.tkpriodot {
  border-radius: 999px;
  width: 7px;
  height: 7px;
  display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
  .tkalert, .tkalert-ico, .tkcard.tkfresh, .tkbell.ring {
    animation: none;
  }
}

@media (max-width: 560px) {
  .tkduerow {
    grid-template-columns: 1fr;
  }

  .tkduefields .datewrap {
    flex: 1;
    min-width: 150px;
  }

  .tkf2 {
    grid-template-columns: 1fr;
  }
}

.tkdetailmodal {
  border-radius: 18px;
  width: min(660px, 100vw - 40px);
  overflow: hidden;
}

.tkdetailmodal .umodalhead {
  border-bottom: 1px solid var(--border, #eceef1);
  align-items: center;
  padding: 18px 22px 15px;
}

.tkdetailmodal .tkmhead {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.tkdetailmodal .tkmhead b {
  letter-spacing: -.01em;
  max-width: 100%;
  font-size: 16px;
  font-weight: 700;
}

.tkdetailmodal .tkmhead .tkref {
  color: var(--fg-muted, #94a3b8);
  background: var(--bg-subtle, #f1f5f9);
  letter-spacing: .02em;
  border-radius: 6px;
  flex: none;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
}

.tkdetailbody {
  gap: 16px;
  max-height: min(74vh, 740px);
  padding: 18px 22px 20px;
}

.tkdetailbody .tkchipsrow {
  gap: 8px;
}

.tkdetailbody .tkchip {
  border: 1px solid #0000;
  padding: 4px 11px;
  font-size: 12px;
}

.tkdetailbody .tkdetails {
  color: var(--fg, #1e293b);
  background: var(--bg-subtle, #f8fafc);
  border: 1px solid var(--border, #eef1f5);
  border-radius: 12px;
  margin: 0;
  padding: 11px 14px;
  font-size: 13px;
  line-height: 1.6;
}

.tkdetailbody .tkactions {
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  padding-top: 2px;
}

.tkdur-lg {
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 999px !important;
  padding: 5px 13px !important;
}

.tkdur-lg.d0 {
  background: #15803d1a !important;
}

.tkdur-lg.d1 {
  background: #a162071c !important;
}

.tkdur-lg.d2 {
  background: #c2410c1c !important;
}

.tkdur-lg.d3 {
  background: #dc26261a !important;
}

.tkdur-lg.d4 {
  background: #0f172a14 !important;
}

:root[data-theme="dark"] .tkdur-lg.d4 {
  background: #ffffff1f !important;
}

.tkassignbox {
  border-radius: 14px;
  padding: 12px 14px;
}

.tkassign-empty {
  text-align: center;
  border-radius: 10px;
  width: 100%;
  padding: 12px;
}

.tkassign-empty:hover {
  background: var(--bg-card, #fff);
}

.tkdetailbody .tkthread {
  border-top: 1px solid var(--border, #eef1f5);
  margin-top: 2px;
  padding-top: 14px;
}

.tkdetailbody .tkrespond .hminp {
  border-radius: 999px;
  height: 40px;
  padding: 0 16px;
}

.tkdetailbody .tkrespond .abtn {
  height: 40px;
}

.tkdot.tk-test {
  background: #6366f1;
}

.tkdot.tk-conf {
  background: #14b8a6;
}

.tkdot.tk-reopen {
  background: #f97316;
}

.tkcard.tk-test {
  border-inline-start-color: #6366f1;
}

.tkcard.tk-conf {
  border-inline-start-color: #14b8a6;
}

.tkcard.tk-reopen {
  border-inline-start-color: #f97316;
}

.tkstat.on.tk-test {
  border-color: #6366f180;
}

.tkstat.on.tk-conf {
  border-color: #14b8a680;
}

.tkstat.on.tk-reopen {
  border-color: #f9731680;
}

.tkpill.tk-test {
  color: #4f46e5;
  background: #6366f11c;
  border-color: #6366f166;
}

.tkpill.tk-test .sumstat-dot {
  background: #6366f1;
}

.tkpill.tk-conf {
  color: #0f766e;
  background: #14b8a61f;
  border-color: #14b8a666;
}

.tkpill.tk-conf .sumstat-dot {
  background: #14b8a6;
}

.tkpill.tk-reopen {
  color: #c2410c;
  background: #f973161f;
  border-color: #f9731666;
}

.tkpill.tk-reopen .sumstat-dot {
  background: #f97316;
}

.tkstats {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  display: grid;
}

.tkfilter {
  gap: 10px 16px;
  margin-bottom: 12px;
  padding: 10px 14px;
}

.tkfilter .gfilter-grp {
  gap: 8px;
}

.tkfilter .gfilter-grp + .gfilter-grp {
  padding-inline-start: 16px;
}

.tkfilter .gfilter-lab {
  color: var(--fg-muted, #94a3b8);
  font-size: 12px;
}

.tkfilter .gfilter-df {
  min-width: 150px;
}

.tkfilter .searchbox input {
  border-radius: 8px;
  height: 34px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 13px;
}

.tkfilter .gfilter-clear {
  height: 28px;
  color: var(--fg-secondary, #64748b);
  border-radius: 999px;
  align-items: center;
  padding: 0 10px;
  transition: background .12s, color .12s;
  display: inline-flex;
}

.tkfilter .gfilter-clear:hover {
  background: var(--bg-muted, #eef2f7);
  color: var(--fg, #1e293b);
}

.tkviewtog {
  border: 1px solid var(--border, #e2e8f0);
  background: var(--bg-muted, #eef2f7);
  border-radius: 999px;
  align-items: center;
  gap: 2px;
  padding: 3px;
  display: inline-flex;
}

.tkviewtog button {
  cursor: pointer;
  height: 26px;
  color: var(--fg-muted, #94a3b8);
  background: none;
  border: 0;
  border-radius: 999px;
  align-items: center;
  padding: 0 11px;
  transition: color .12s, background .12s, box-shadow .12s;
  display: inline-flex;
}

.tkviewtog button:hover:not(.on) {
  color: var(--fg-secondary, #475569);
}

.tkviewtog button.on {
  background: var(--bg-card, #fff);
  color: var(--fg, #1e293b);
  box-shadow: 0 1px 2px #10182824;
}

.tkbulk {
  background: var(--accent-subtle, #f0f1f3);
  border: 1px solid color-mix(in srgb, var(--accent, #374151) 25%, transparent);
  border-radius: 12px;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  padding: 10px 16px;
  font-size: 13px;
  display: flex;
}

.tkbulk b {
  font-size: 15px;
}

.tkbulk-acts {
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
  display: inline-flex;
}

.tktable {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 13px;
}

.tktable thead th {
  text-align: start;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--fg-secondary, #64748b);
  background: var(--bg-subtle, #f8fafc);
  border-bottom: 1px solid var(--border-strong, #dbe2ea);
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  padding: 9px 12px;
  font-size: 11px;
  font-weight: 600;
}

.tktable thead th:first-child {
  border-start-start-radius: 11px;
}

.tktable thead th:last-child {
  border-start-end-radius: 11px;
}

.gscroll:has( > .tktable) {
  border: 1px solid var(--border, #e6e8ec);
  background: var(--bg-card, #fff);
  border-radius: 12px;
  box-shadow: 0 1px 2px #1018280a;
}

.tktable tbody td {
  border-bottom: 1px solid var(--border, #eef1f5);
  vertical-align: middle;
  padding: 9px 12px;
}

.tktable tbody tr:last-child td {
  border-bottom: 0;
}

.tkcolchk input {
  width: 14px;
  height: 14px;
  accent-color: var(--accent, #374151);
  cursor: pointer;
  vertical-align: middle;
}

.tktable tbody tr {
  cursor: pointer;
  transition: background .1s;
}

.tktable tbody tr:hover {
  background: var(--bg-subtle, #f8fafc);
}

.tktable tbody tr:focus-visible {
  outline: 2px solid var(--accent, #374151);
  outline-offset: -2px;
  background: var(--bg-subtle, #f8fafc);
}

.tktable tbody tr.sel {
  background: var(--accent-subtle, #f0f1f3);
}

.tktable tbody tr.sel td:first-child {
  box-shadow: inset 3px 0 0 var(--accent, #374151);
}

.tktable tbody tr.sel:hover {
  background: color-mix(in srgb, var(--accent, #374151) 9%, var(--bg-card, #fff));
}

.tkcolchk, .tktable thead th.tkcolchk {
  text-align: center;
  width: 34px;
}

.tktbl-title {
  color: var(--fg, #1e293b);
  align-items: center;
  gap: 8px;
  font-weight: 600;
  display: flex;
}

.tkbadge-new {
  color: #fff;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: #16a34a;
  border-radius: 999px;
  flex: none;
  align-items: center;
  gap: 3px;
  padding: 1px 7px 1px 5px;
  font-size: 10px;
  font-weight: 700;
  animation: 1.4s ease-in-out infinite tknewpulse;
  display: inline-flex;
}

.tkbadge-new svg {
  animation: 2.4s ease-in-out infinite tknewspin;
}

@keyframes tknewpulse {
  0%, 100% {
    box-shadow: 0 0 #16a34a80;
  }

  50% {
    box-shadow: 0 0 0 4px #16a34a00;
  }
}

@keyframes tknewspin {
  0%, 70%, 100% {
    transform: rotate(0)scale(1);
  }

  80% {
    transform: rotate(18deg)scale(1.18);
  }

  90% {
    transform: rotate(-12deg)scale(1.1);
  }
}

.tktable tbody tr.tktbl-fresh {
  animation: 2.2s ease-out tkrowfresh;
}

.tktable tbody tr.tktbl-fresh td {
  background: #f2fbf5;
}

.tktable tbody tr.tktbl-fresh:hover td {
  background: #e9f8ee;
}

@keyframes tkrowfresh {
  0% {
    background: #16a34a2e;
  }

  100% {
    background: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tkbadge-new, .tkbadge-new svg, .tktable tbody tr.tktbl-fresh {
    animation: none;
  }
}

.tktbl-title .tkref {
  color: var(--fg-muted, #94a3b8);
  background: var(--bg-subtle, #f1f5f9);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
}

.tktbl-sub {
  color: var(--fg-secondary, #64748b);
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 12px;
  display: inline-flex;
}

.tktbl-subar {
  direction: rtl;
  unicode-bidi: isolate;
  font-family: Noto Sans Arabic, Segoe UI, ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
}

.tktbl-dept {
  color: var(--fg, #1e293b);
  font-size: 12.5px;
  font-weight: 600;
}

.tktbl-hotel {
  color: var(--fg, #1e293b);
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 600;
}

.tktbl-top {
  align-items: center;
  gap: 8px;
  padding: 0 2px 10px;
  display: flex;
}

.tktbl-foot {
  color: #64748b;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding: 14px 4px 2px;
  font-size: 12.5px;
  font-weight: 500;
  display: flex;
}

.tkpg-size {
  color: #64748b;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  display: inline-flex;
}

.tkpg-info {
  font-variant-numeric: tabular-nums;
}

.tkpg-nav {
  align-items: center;
  gap: 4px;
  margin-inline-start: auto;
  display: inline-flex;
}

.tkpg-btn {
  border: 1px solid var(--border, #e2e8f0);
  background: var(--bg-card, #fff);
  width: 30px;
  height: 30px;
  color: var(--fg-secondary, #475569);
  cursor: pointer;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  transition: background .12s, border-color .12s;
  display: inline-flex;
}

.tkpg-btn:hover:not(:disabled) {
  color: #374151;
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.tkpg-btn:disabled {
  opacity: .4;
  cursor: default;
}

.tkpg-num {
  border: 1px solid var(--border, #e2e8f0);
  background: var(--bg-card, #fff);
  min-width: 30px;
  height: 30px;
  color: var(--fg-secondary, #475569);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  border-radius: 8px;
  padding: 0 6px;
  font-size: 12.5px;
  font-weight: 600;
  transition: background .12s, border-color .12s, color .12s;
}

.tkpg-num:hover {
  color: #374151;
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.tkpg-num.on {
  color: #fff;
  background: #374151;
  border-color: #374151;
  box-shadow: 0 1px 2px #0f172a33;
}

.tkpg-btn:focus-visible, .tkpg-num:focus-visible {
  outline: 2px solid var(--accent, #374151);
  outline-offset: 1px;
}

.tkpg-gap {
  color: #94a3b8;
  padding: 0 4px;
}

.tkcolid {
  white-space: nowrap;
}

.tktbl-emptyrow td {
  padding: 0 !important;
}

.tktbl-emptyrow:hover {
  background: none !important;
}

.tkempty-inline {
  border: none;
  padding: 40px 20px;
}

.tkcolid .tkref {
  color: #374151;
  background: var(--bg-subtle, #f1f5f9);
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
}

.tktbl-date {
  color: var(--fg-secondary, #64748b);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
}

.tktbl-logged > .tklogbox {
  border: 1px solid var(--border, #e2e8f0);
  background: var(--bg-card, #fff);
  font-variant-numeric: tabular-nums;
  height: 22px;
  color: var(--fg-secondary, #475569);
  white-space: nowrap;
  border-radius: 6px;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
}

.tktbl-logged > .tklogbox > svg {
  color: inherit;
  opacity: 1;
  stroke-width: 2.1px;
  flex: none;
  margin-inline-start: -1px;
}

.tktbl-logged > .tklogbox.d0 {
  color: #475569;
  background: #cbd5e1;
  border-color: #cbd5e1;
}

.tktbl-logged > .tklogbox.d1 {
  color: #fff;
  background: #1e6fd8;
  border-color: #1e6fd8;
}

.tktbl-logged > .tklogbox.d2 {
  color: #3d2f00;
  background: #f5c518;
  border-color: #f5c518;
}

.tktbl-logged > .tklogbox.d3 {
  color: #fff;
  background: #ed8b2b;
  border-color: #ed8b2b;
}

.tktbl-logged > .tklogbox.d4 {
  color: #fff;
  background: #e8352a;
  border-color: #e8352a;
}

.tktbl-logged > .tklogbox.d5 {
  color: #fff;
  background: #1a1a1a;
  border-color: #1a1a1a;
}

.tktbl-legend {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 2px;
  display: flex;
}

.tkleg-lab {
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted, #94a3b8);
  font-size: 11px;
  font-weight: 700;
}

.tkleg-bar {
  border-radius: 6px;
  display: flex;
  overflow: hidden;
  box-shadow: 0 1px 3px #0000001f;
}

.tkleg-seg {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 700;
}

.tkleg-seg.d0 {
  color: #475569;
  background: #cbd5e1;
}

.tkleg-seg.d1 {
  color: #fff;
  background: #1e6fd8;
}

.tkleg-seg.d2 {
  color: #3d2f00;
  background: #f5c518;
}

.tkleg-seg.d3 {
  color: #fff;
  background: #ed8b2b;
}

.tkleg-seg.d4 {
  color: #fff;
  background: #e8352a;
}

.tkleg-seg.d5 {
  color: #fff;
  background: #1a1a1a;
}

.tktbl-assign {
  color: var(--fg, #1e293b);
  max-width: 200px;
  font-size: 12.5px;
}

.tktbl-assignlist {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.tktbl-assignchip {
  color: var(--fg, #1e293b);
  white-space: nowrap;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  display: inline-flex;
}

.tktbl-assignav {
  background: var(--bg-muted, #e2e8f0);
  width: 18px;
  height: 18px;
  color: var(--fg-secondary, #475569);
  border: 1px solid var(--border-strong, #cbd5e1);
  border-radius: 999px;
  flex: none;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.tktbl-unassigned {
  color: var(--muted, #94a3b8);
  align-items: center;
  font-size: 12.5px;
  font-style: italic;
  display: inline-flex;
}

.tkdetail2 {
  border-radius: 16px;
  flex-direction: column;
  width: min(880px, 100vw - 40px);
  max-height: min(88vh, 860px);
  padding: 0;
  display: flex;
  overflow: hidden;
}

.tkd2-head {
  color: #fff;
  background: linear-gradient(100deg, #374151, #4b5563);
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  display: flex;
}

.tkd2-htxt {
  flex: 1;
  min-width: 0;
}

.tkd2-htxt b {
  text-wrap: balance;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  display: block;
}

.tkd2-htxt span {
  letter-spacing: .01em;
  color: #ffffffb8;
  opacity: 1;
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 500;
  display: block;
}

.tkd2-x {
  color: #ffffffbf;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  transition: background .12s, color .12s, transform .12s;
  display: flex;
}

.tkd2-x:hover {
  color: #fff;
  background: #ffffff29;
}

.tkd2-x:active {
  transform: scale(.94);
}

.tkd2-x:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #ffffffa6;
}

.tkd2-body {
  flex: 1;
  grid-template-columns: 1fr 300px;
  gap: 0;
  min-height: 0;
  display: grid;
  overflow: visible;
}

.tkd2-main {
  flex-direction: column;
  gap: 16px;
  max-height: calc(88vh - 78px);
  padding: 18px 22px;
  display: flex;
  overflow-y: auto;
}

.tkd2-side {
  background: var(--bg-subtle, #f8fafc);
  border-inline-start: 1px solid var(--border, #eceef1);
  max-height: calc(88vh - 78px);
  padding: 16px 18px;
  overflow-y: auto;
}

.tkd2-side.menuopen {
  max-height: none !important;
  overflow: visible !important;
}

.tkd2-sec {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.tkd2-h {
  letter-spacing: 0;
  color: var(--fg, #1e293b);
  font-size: 13px;
  font-weight: 700;
}

.tkd2-main .tkdetails {
  color: var(--fg, #1e293b);
  background: var(--bg-subtle, #f8fafc);
  border: 1px solid var(--border, #eef1f5);
  border-radius: 12px;
  margin: 0;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.6;
}

.tkd2-main .tkactions {
  margin: 0;
}

.tkd2-sideh {
  color: var(--fg, #0f172a);
  font-size: 13px;
  font-weight: 700;
}

.tkd2-created {
  color: var(--fg-secondary, #64748b);
  border-bottom: 1px dashed var(--border, #e2e8f0);
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  font-size: 12px;
  display: flex;
}

.tkd2-created b {
  color: var(--fg, #1e293b);
  font-weight: 600;
}

.tkd2-rows {
  flex-direction: column;
  gap: 11px;
  display: flex;
}

.tkd2-sidesec {
  border-top: 1px dashed var(--border, #e2e8f0);
  margin-top: 14px;
  padding-top: 14px;
}

.tkd2-sidesec .tkassignbox {
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
}

@media (max-width: 720px) {
  .tkd2-body {
    display: block;
    overflow-y: auto;
  }

  .tkd2-main, .tkd2-side {
    max-height: none;
    overflow: visible;
  }

  .tkd2-side {
    border-inline-start: 0;
    border-top: 1px solid var(--border, #eceef1);
  }
}

.tkcolnum, .tktable thead th.tkcolnum {
  text-align: center;
  width: 38px;
  color: var(--fg-muted, #94a3b8);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.tktable th.tksortable {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  white-space: nowrap;
}

.tktable th.tksortable:hover {
  color: var(--fg, #1e293b);
}

.tktable th.tksortable.active {
  color: var(--accent, #374151);
}

.tksortcaret {
  opacity: 0;
  margin-inline-start: 5px;
  font-size: 9px;
  transition: opacity .12s;
  display: inline-block;
}

.tktable th.tksortable:hover .tksortcaret {
  opacity: .6;
}

.tktable th.tksortable.active .tksortcaret {
  opacity: 1;
}

.tkd2-h {
  align-items: center;
  gap: 7px;
  display: flex;
}

.tkd2-hedit {
  color: var(--fg-muted, #94a3b8);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 2px;
  display: inline-flex;
}

.tkd2-hedit:hover {
  color: var(--accent, #374151);
}

.tkloggedval {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.tkloggedval.d0 {
  color: #15803d;
}

.tkloggedval.d1 {
  color: #1e6fd8;
}

.tkloggedval.d2 {
  color: #b45309;
}

.tkloggedval.d3 {
  color: #c2410c;
}

.tkloggedval.d4 {
  color: #dc2626;
}

.tkloggedval.d5 {
  color: var(--fg, #0f172a);
}

.tkchk {
  flex-direction: column;
  gap: 9px;
  display: flex;
}

.tkchk-prog {
  align-items: center;
  gap: 10px;
  display: flex;
}

.tkchk-bar {
  background: var(--bg-muted, #eef2f7);
  border-radius: 999px;
  flex: 1;
  height: 7px;
  overflow: hidden;
}

.tkchk-bar span {
  background: #16a34a;
  border-radius: 999px;
  height: 100%;
  transition: width .2s;
  display: block;
}

.tkchk-count {
  color: var(--fg-secondary, #64748b);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 600;
}

.tkchk-list {
  flex-direction: column;
  gap: 3px;
  display: flex;
}

.tkchk-item {
  border-radius: 8px;
  align-items: center;
  gap: 9px;
  padding: 5px 4px;
  display: flex;
}

.tkchk-item:hover {
  background: var(--bg-subtle, #f8fafc);
}

.tkchk-box {
  border: 1.6px solid var(--border-strong, #cbd5e1);
  background: var(--bg-card, #fff);
  cursor: pointer;
  color: #fff;
  border-radius: 6px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 19px;
  height: 19px;
  display: flex;
}

.tkchk-item.done .tkchk-box {
  background: #16a34a;
  border-color: #16a34a;
}

.tkchk-txt {
  color: var(--fg, #1e293b);
  flex: 1;
  font-size: 13px;
}

.tkchk-item.done .tkchk-txt {
  color: var(--fg-muted, #94a3b8);
  text-decoration: line-through;
}

.tkchk-del {
  color: var(--fg-muted, #cbd5e1);
  cursor: pointer;
  opacity: 0;
  background: none;
  border: 0;
  flex: none;
  padding: 2px;
  transition: opacity .1s;
}

.tkchk-item:hover .tkchk-del {
  opacity: 1;
}

.tkchk-del:hover {
  color: #dc2626;
}

.tkchk-add {
  gap: 8px;
  margin-top: 2px;
  display: flex;
}

.tkchk-add .hminp {
  flex: 1;
  height: 34px;
}

.tkd2-sidelbl {
  color: var(--fg-secondary, #64748b);
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
}

.tkfiledrop {
  border: 1.5px dashed var(--border-strong, #cbd5e1);
  background: var(--bg-card, #fff);
  border-radius: 12px;
  transition: border-color .12s, background .12s;
}

.tkfiledrop:hover {
  border-color: var(--accent, #374151);
}

.tkfiledrop label {
  cursor: pointer;
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 20px 12px;
  display: flex;
}

.tkfiledrop label > svg {
  color: var(--fg-muted, #94a3b8);
  margin-bottom: 3px;
}

.tkfiledrop label > span {
  color: var(--fg-secondary, #475569);
  font-size: 12.5px;
  font-weight: 600;
}

.tkfiledrop label > em {
  color: var(--fg-muted, #94a3b8);
  font-size: 11px;
  font-style: normal;
}

.tkassign-none {
  color: #dc2626 !important;
  border-color: #dc26264d !important;
}

.tkassign-none:hover {
  background: #dc26260d !important;
  border-color: #dc2626 !important;
}

.tkassignbox {
  background: none;
  border: 0;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  display: flex;
}

.tkassign-lab {
  color: var(--fg-secondary, #64748b);
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
}

.tkassign-dd {
  position: relative;
}

.tkassign-trigger {
  border: 1px solid var(--border, #e2e8f0);
  background: var(--bg-card, #fff);
  width: 100%;
  height: 38px;
  color: var(--fg-secondary, #64748b);
  font: inherit;
  cursor: pointer;
  border-radius: 9px;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  font-size: 13px;
  display: flex;
}

.tkassign-trigger:hover:not(:disabled) {
  border-color: var(--border-strong, #cbd5e1);
}

.tkassign-trigger:disabled {
  cursor: default;
  opacity: .7;
}

.tkassign-trigger > svg {
  color: var(--fg-muted, #94a3b8);
  flex: none;
}

.tkassign-menu {
  inset-inline: 0;
  z-index: 40;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 11px;
  position: absolute;
  top: calc(100% + 5px);
  overflow: hidden;
  box-shadow: 0 12px 32px #10182829;
}

.tkassign-search {
  border-bottom: 1px solid var(--border, #eef1f5);
  padding: 8px;
}

.tkassign-search input {
  border: 1px solid var(--border, #e2e8f0);
  width: 100%;
  height: 32px;
  font: inherit;
  background: var(--bg-subtle, #f8fafc);
  color: var(--fg, #1e293b);
  border-radius: 8px;
  padding: 0 10px;
  font-size: 13px;
}

.tkassign-opts {
  max-height: 200px;
  padding: 5px;
  overflow-y: auto;
}

.tkassign-opt {
  cursor: pointer;
  width: 100%;
  font: inherit;
  color: var(--fg, #1e293b);
  text-align: start;
  background: none;
  border: 0;
  border-radius: 8px;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  font-size: 13px;
  display: flex;
}

.tkassign-opt:hover {
  background: var(--bg-subtle, #f1f5f9);
}

.tkassign-opt.on {
  background: var(--accent-subtle, #f0f1f3);
  font-weight: 600;
}

.tkassign-opt .tkassign-nm {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
  overflow: hidden;
}

.tkassign-pos {
  color: var(--fg-muted, #94a3b8);
  font-size: 11px;
  font-weight: 500;
}

.tkassign-opt.on > svg {
  color: #16a34a;
}

.tkassign-none {
  color: #dc2626;
  font-size: 12.5px;
  font-weight: 500;
}

.tkassign-list {
  flex-wrap: wrap;
  gap: 7px;
  display: flex;
}

.tkchip-emp {
  border: 1px solid var(--border, #e2e8f0);
  background: var(--bg-card, #fff);
  color: var(--fg, #1e293b);
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 3px 6px 3px 3px;
  font-size: 12.5px;
  font-weight: 500;
  display: inline-flex;
}

.tkchip-emp button {
  background: var(--bg-subtle, #f1f5f9);
  width: 18px;
  height: 18px;
  color: var(--fg-muted, #94a3b8);
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.tkchip-emp button:hover {
  color: #dc2626;
  background: #fee2e2;
}

.tkavatar.sm.tkav-ico {
  background: var(--accent-subtle, #f0f1f3);
  color: var(--accent, #374151);
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.tktable td .tkpill {
  border-width: 1px;
  border-radius: 6px;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 600;
  background: var(--bg-card, #fff) !important;
}

.tktable td .tkpill .sumstat-dot {
  width: 6px;
  height: 6px;
}

.tktable td .tkpill.tk-new {
  color: #64748b;
  border-color: #cbd5e1;
}

.tktable td .tkpill.tk-prog {
  color: #a16207;
  border-color: #eab30880;
}

.tktable td .tkpill.tk-test {
  color: #4f46e5;
  border-color: #4f46e566;
}

.tktable td .tkpill.tk-done {
  color: #15803d;
  border-color: #15803d66;
}

.tktable td .tkpill.tk-conf {
  color: #0f766e;
  border-color: #0f766e66;
}

.tktable td .tkpill.tk-reopen {
  color: #c2410c;
  border-color: #f9731673;
}

.tktable td .tkpill.tk-cxl {
  color: #94a3b8;
  border-color: #e2e8f0;
}

.tkdetail2 {
  border-radius: 18px;
  box-shadow: 0 24px 60px -12px #10182859;
}

.tkd2-head {
  padding: 18px 24px;
  box-shadow: inset 0 -1px #ffffff1f;
}

.tkd2-head b {
  letter-spacing: -.01em;
}

.tkd2-body {
  background: var(--bg-card, #fff);
}

.tkd2-main {
  gap: 20px;
  padding: 20px 24px;
}

.tkd2-h {
  letter-spacing: 0;
  padding-inline-start: 11px;
  font-size: 13px;
  position: relative;
}

.tkd2-h:before {
  content: "";
  inset-inline-start: 0;
  background: var(--accent, #374151);
  opacity: .55;
  border-radius: 999px;
  width: 3px;
  position: absolute;
  top: 1px;
  bottom: 1px;
}

.tkd2-side {
  padding: 18px 20px;
}

.tkd2-sideh {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-secondary, #64748b);
  font-size: 11px;
  font-weight: 700;
}

.tkd2-sidelbl, .tkassign-lab {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-muted, #94a3b8);
  font-size: 11px;
}

.tkd2-row > span:first-of-type {
  font-weight: 500;
}

.tkd2-side .tkpill {
  padding: 3px 11px;
  font-size: 12px;
  font-weight: 600;
}

.tkd2-main .tkactions {
  border-bottom: 1px solid var(--border, #eef1f5);
  margin-bottom: 0;
  padding-bottom: 4px;
}

.apanel, .tkdetail2, .tkmodal, .tktable, .tkassign-menu, .tksugg {
  font-family: var(--sans);
}

.tkd2-rows {
  gap: 0;
}

.tkd2-row {
  border-bottom: 1px dotted var(--border, #dfe3e8);
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  display: flex;
}

.tkd2-row:last-child {
  border-bottom: 0;
}

.tkd2-row > svg {
  color: var(--fg-muted, #94a3b8);
  flex: none;
}

.tkd2-row > span:first-of-type {
  width: auto;
  color: var(--fg-secondary, #64748b);
  flex: none;
  font-weight: 500;
}

.tkd2-row > span:first-of-type:after {
  content: ":";
}

.tkd2-row > b, .tkd2-row > .tkd2-status {
  text-align: start;
  color: var(--fg, #1e293b);
  font-variant-numeric: tabular-nums;
  flex: none;
  font-weight: 600;
}

.tkd2-row > b.tkover {
  color: #dc2626;
}

.tkd2-status {
  font-size: 13px;
}

.tkd2-status.tk-new {
  color: #64748b;
}

.tkd2-status.tk-prog {
  color: #ca8a04;
}

.tkd2-status.tk-test {
  color: #4f46e5;
}

.tkd2-status.tk-done {
  color: #16a34a;
}

.tkd2-status.tk-conf {
  color: #0f766e;
}

.tkd2-status.tk-reopen {
  color: #ea580c;
}

.tkd2-status.tk-cxl {
  color: #94a3b8;
}

.tkd2-date {
  color: var(--fg, #334155) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

.tkd2-date.tkover {
  color: #dc2626 !important;
  font-weight: 600 !important;
}

.tkd2-sidehrow {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  display: flex;
}

.tkd2-more {
  position: relative;
}

.tkd2-morebtn {
  color: var(--fg-secondary, #64748b);
  cursor: pointer;
  letter-spacing: 0;
  background: none;
  border: 0;
  padding: 0 6px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.tkd2-morebtn:hover {
  color: var(--accent, #374151);
}

.tkd2-moremenu {
  inset-inline-end: 0;
  z-index: 50;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  transform-origin: top;
  border-radius: 10px;
  width: max-content;
  min-width: 150px;
  max-width: 100%;
  padding: 4px;
  animation: .13s cubic-bezier(.2, .8, .3, 1) tkmenuin;
  position: absolute;
  top: calc(100% + 4px);
  box-shadow: 0 4px 10px -4px #10182814, 0 12px 32px #1018282e;
}

@keyframes tkmenuin {
  from {
    opacity: 0;
    transform: translateY(-4px)scale(.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tkd2-moremenu {
    animation: none;
  }
}

.tkd2-moremenu button {
  cursor: pointer;
  width: 100%;
  font: inherit;
  color: var(--fg, #1e293b);
  text-align: start;
  background: none;
  border: 0;
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 9px;
  font-size: 13px;
  display: flex;
}

.tkd2-moremenu button:hover {
  background: var(--bg-subtle, #f1f5f9);
}

.tkd2-moremenu button.danger {
  color: #dc2626;
}

.tkd2-moremenu button.danger:hover {
  background: #fee2e2;
}

.tkd2-menuh {
  color: var(--fg, #1e293b);
  padding: 4px 8px 5px;
  font-size: 12px;
  font-weight: 700;
}

.tkd2-strow {
  position: relative;
}

.tkd2-stbtn {
  cursor: pointer;
  font: inherit;
  background: none;
  border: 0;
  align-items: center;
  gap: 5px;
  padding: 0;
  display: inline-flex;
}

.tkd2-stbtn > .tkst-ic {
  flex: none;
}

.tkd2-stbtn > svg {
  opacity: .6;
}

.tkd2-stmenu {
  inset-inline: auto 0;
  border-radius: 10px;
  width: max-content;
  min-width: 132px;
  max-width: 100%;
  max-height: 300px;
  padding: 4px;
  top: calc(100% + 4px);
  overflow-y: auto;
}

.tkd2-stmenu .tkst-opt {
  cursor: pointer;
  width: 100%;
  font: inherit;
  text-align: start;
  background: none;
  border: 0;
  border-radius: 6px;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 8px;
  display: flex;
}

.tkd2-stmenu .tkst-opt:hover {
  background: var(--bg-subtle, #f1f5f9);
}

.tkd2-stmenu .tkdot {
  border-radius: 999px;
  flex: none;
  width: 9px;
  height: 9px;
  display: inline-block;
}

.tkd2-stmenu .tkst-mk {
  color: var(--fg-muted, #94a3b8);
  font-size: 12.5px;
}

.tkd2-stmenu .tkd2-status {
  font-size: 12.5px;
  font-weight: 600;
}

.tkd2-stbtn > svg.flip {
  transform: rotate(180deg);
}

.tkst-ic.tk-new {
  color: #64748b;
}

.tkst-ic.tk-prog {
  color: #ca8a04;
}

.tkst-ic.tk-test {
  color: #4f46e5;
}

.tkst-ic.tk-done {
  color: #16a34a;
}

.tkst-ic.tk-conf {
  color: #0f766e;
}

.tkst-ic.tk-reopen {
  color: #ea580c;
}

.tkst-ic.tk-cxl {
  color: #94a3b8;
}

.tkd2-related {
  color: var(--fg-muted, #94a3b8);
  margin-bottom: 2px;
  font-size: 12.5px;
  font-weight: 500;
}

.tkd2-related b {
  color: var(--fg-secondary, #64748b);
  font-weight: 600;
}

.tkd2-relval {
  color: var(--fg, #1e293b);
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
}

.tkbell {
  width: 36px;
  height: 36px;
  color: var(--fg-secondary, #64748b);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  transition: background .12s, color .12s;
  display: inline-flex;
  position: relative;
}

.tkbell:hover {
  background: var(--bg-subtle, #f1f5f9);
  color: var(--fg, #1e293b);
}

.tkbell-badge {
  top: 3px;
  color: #fff;
  text-align: center;
  min-width: 17px;
  height: 17px;
  box-shadow: 0 0 0 2px var(--bg-card, #fff);
  background: #ef4444;
  border-radius: 999px;
  padding: 0 4px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 17px;
  position: absolute;
  inset-inline-end: 3px;
}

.tkbellwrap {
  display: inline-flex;
  position: relative;
}

.tkbell.ring {
  color: #dc2626;
  transform-origin: 50% 3px;
  animation: .9s ease-in-out 3 tkbellring;
}

.tkbellmenu {
  top: calc(100% + 8px);
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  z-index: 60;
  width: 340px;
  max-width: calc(100vw - 32px);
  font-family: var(--sans);
  border-radius: 12px;
  position: absolute;
  inset-inline-end: 0;
  overflow: hidden;
  box-shadow: 0 12px 34px #0f172a29;
}

.tkbellhead {
  border-bottom: 1px solid var(--border, #eef1f5);
  color: var(--fg, #1e293b);
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
}

.tkbellcount {
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
}

.tkbelllist {
  max-height: 380px;
  overflow-y: auto;
}

.tkbellitem {
  text-align: start;
  border: 0;
  border-bottom: 1px solid var(--border, #f1f5f9);
  cursor: pointer;
  background: none;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  transition: background .1s;
  display: flex;
}

.tkbellitem:hover {
  background: var(--bg-subtle, #f8fafc);
}

.tkbelldot {
  border-radius: 999px;
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 5px;
}

.tkbelltxt {
  flex-direction: column;
  flex: auto;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.tkbelltitle {
  color: var(--fg, #1e293b);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
}

.tkbellmeta {
  color: var(--fg-muted, #94a3b8);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  overflow: hidden;
}

.tkbellwhen {
  color: var(--fg-muted, #94a3b8);
  white-space: nowrap;
  flex: none;
  font-size: 11px;
}

.tkbellempty {
  color: var(--fg-muted, #94a3b8);
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 30px 20px;
  font-size: 12.5px;
  display: flex;
}

.tkbellall {
  background: var(--bg-subtle, #f8fafc);
  border: 0;
  border-top: 1px solid var(--border, #eef1f5);
  width: 100%;
  color: var(--accent, #374151);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--sans);
  padding: 11px;
  transition: background .1s;
  display: block;
}

.tkbellall:hover {
  background: #eef2f6;
}

.tkdetail2 {
  width: min(840px, 100vw - 40px);
}

.tkd2-body {
  grid-template-columns: 1fr 296px;
}

.tkd2-h {
  align-items: center;
  gap: 7px;
  padding-inline-start: 0;
  display: inline-flex;
}

.tkd2-h:before {
  display: none;
}

.tkd2-h > svg {
  color: var(--accent, #374151);
  flex: none;
  width: 16px;
  height: 16px;
}

.tkd2-relval {
  align-items: center;
  gap: 7px;
  display: inline-flex;
}

.tkd2-relval > svg {
  color: var(--fg-muted, #94a3b8);
  flex: none;
}

.tkd2-empty {
  border: 1px dashed var(--border-strong, #cbd5e1);
  font: inherit;
  color: var(--fg-muted, #94a3b8);
  cursor: pointer;
  background: none;
  border-radius: 9px;
  align-items: center;
  gap: 6px;
  padding: 9px 13px;
  font-size: 12.5px;
  display: inline-flex;
}

.tkd2-empty:hover {
  color: var(--accent, #374151);
  border-color: var(--accent, #374151);
  background: var(--bg-subtle, #f8fafc);
}

.tkd2-activity {
  flex-direction: column;
  gap: 0;
  margin-top: 4px;
  display: flex;
}

.tkd2-ev {
  gap: 10px;
  padding-bottom: 12px;
  display: flex;
  position: relative;
}

.tkd2-ev:not(:last-child):before {
  content: "";
  inset-inline-start: 4px;
  background: var(--border, #e2e8f0);
  width: 1px;
  position: absolute;
  top: 12px;
  bottom: 0;
}

.tkd2-evdot {
  background: var(--bg-card, #fff);
  border: 2px solid var(--border-strong, #cbd5e1);
  box-sizing: border-box;
  z-index: 1;
  border-radius: 999px;
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 3px;
}

.tkd2-evdot.ok {
  border-color: #16a34a;
}

.tkd2-evdot.bad {
  border-color: #dc2626;
}

.tkd2-evdot.prog {
  border-color: #eab308;
}

.tkd2-evdot.reopen {
  border-color: #f97316;
}

.tkd2-ev > div {
  color: var(--fg, #334155);
  font-size: 12.5px;
  line-height: 1.45;
}

.tkd2-ev b {
  color: var(--fg, #0f172a);
  font-weight: 600;
}

.tkd2-evtime {
  color: var(--fg-muted, #94a3b8);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
  font-size: 11.5px;
  display: block;
}

.tkd2-descval {
  color: var(--fg, #1e293b);
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.tkdetail2, .tkdetail2 input, .tkdetail2 textarea, .tkdetail2 button, .tkdetail2 select {
  font-family: var(--sans);
}

.tkd2-main {
  gap: 0;
}

.tkd2-main > .tkd2-sec {
  border-bottom: 1px solid var(--border, #eef1f5);
  padding: 16px 0;
}

.tkd2-main > .tkd2-sec:first-child {
  padding-top: 2px;
}

.tkd2-main > .tkd2-sec:last-child {
  border-bottom: 0;
  padding-bottom: 2px;
}

.tkd2-h {
  color: var(--fg, #0f172a);
  margin-bottom: 9px;
  font-size: 13px;
}

.tkd2-relval {
  font-size: 14px;
  font-weight: 600;
}

.tkd2-svc {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 13px;
  margin: 0;
  display: flex;
}

.tkd2-svc-en {
  font-family: var(--sans);
  color: var(--fg, #1e293b);
  font-size: 14px;
  font-weight: 600;
}

.tkd2-svc-ar {
  color: var(--accent, #374151);
  border-left: 1px solid var(--border-strong, #cbd5e1);
  direction: rtl;
  unicode-bidi: isolate;
  padding-left: 13px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.7;
  font-family: "Noto Sans Arabic", var(--sans) !important;
}

.tkd2-relval > svg {
  color: var(--accent, #374151);
}

.tkd2-main .tkthread {
  background: none;
  border: 0;
  padding: 0;
}

.tkd2-main .tkmsg {
  background: var(--bg-subtle, #f8fafc);
  border: 1px solid var(--border, #eef1f5);
  border-radius: 12px;
  padding: 10px 12px;
}

.tkd2-main .tkrespond {
  margin-top: 10px;
}

.tkd2-main .tkrespond .hminp {
  border-radius: 10px;
  height: 40px;
  transition: border-color .12s, box-shadow .12s, background .12s;
}

.tkd2-main .tkrespond .hminp:focus {
  background: var(--bg-card, #fff);
  border-color: #64748b;
  outline: none;
  box-shadow: 0 0 0 3px #3741511a;
}

.tkd2-main .tkmsg .tkmsg-edit, .tkd2-main .tkmsg .tkmsg-del {
  opacity: 0;
  transition: opacity .12s;
}

.tkd2-main .tkmsg:hover .tkmsg-edit, .tkd2-main .tkmsg:hover .tkmsg-del, .tkd2-main .tkmsg .tkmsg-edit:focus-visible, .tkd2-main .tkmsg .tkmsg-del:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .tkd2-main .tkmsg .tkmsg-edit, .tkd2-main .tkmsg .tkmsg-del {
    opacity: 1;
  }
}

.tknewmodal {
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 30px 70px #0f172a47;
}

.tknew-head {
  color: #fff;
  background: linear-gradient(100deg, #374151, #4b5563);
  align-items: center;
  gap: 13px;
  padding: 18px 24px;
  display: flex;
}

.tknew-headtxt {
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.tknew-headtxt b {
  letter-spacing: -.01em;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.tknew-headtxt > span {
  color: #ffffffb3;
  font-size: 12.5px;
}

.tknew-head .tkd2-x {
  color: #fff;
  background: #ffffff1f;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  margin-inline-start: auto;
  transition: background .12s;
  display: inline-flex;
}

.tknew-head .tkd2-x:hover {
  background: #ffffff3d;
}

.tknew-head .tkd2-x:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #ffffffa6;
}

.tknewbody {
  background: #fff;
  gap: 0 !important;
  padding: 0 !important;
}

.tknewbody > .toast, .tknewbody > div[class*="toast"] {
  margin: 16px 24px 0;
}

.tknewsec {
  border-bottom: 1px solid #f1f5f9;
  padding: 18px 24px;
}

.tknewsec:last-child {
  border-bottom: 0;
  padding-bottom: 22px;
}

.tknewsec-h {
  color: #334155;
  letter-spacing: -.01em;
  align-items: center;
  gap: 9px;
  margin-bottom: 15px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
}

.tknewsec-h svg {
  color: #475569;
  box-sizing: border-box;
  background: #f1f5f9;
  border-radius: 8px;
  flex: none;
  width: 28px;
  height: 28px;
  padding: 6px;
}

.tknewg2 {
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  display: grid;
}

.tknewg3 {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  display: grid;
}

.tknewg3 .tkf, .tknewg2 .tkf {
  gap: 7px;
  min-width: 0;
}

.tknewg2 .tkf.full {
  grid-column: 1 / -1;
}

.tknewbody .tkf > span:first-child {
  color: #475569;
  letter-spacing: 0;
  font-size: 12.5px;
  font-weight: 600;
}

.tknewbody .hminp, .tknewbody .tsel-btn, .tknewbody .datebtn {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  min-height: 42px;
  font-size: 13.5px;
  transition: border-color .12s, box-shadow .12s;
}

.tknewbody .hminp:hover, .tknewbody .tsel-btn:hover, .tknewbody .datebtn:hover {
  border-color: #cbd5e1;
}

.tknewbody .hminp:focus, .tknewbody textarea.hminp:focus, .tknewbody .tsel-btn:focus-visible {
  border-color: #64748b;
  outline: none;
  box-shadow: 0 0 0 3px #3741511a;
}

.tknewbody textarea.hminp {
  resize: vertical;
  min-height: 84px;
  padding-top: 10px;
}

.tknewmodal .umodalfoot {
  background: #f8fafc;
  border-top: 1px solid #eef1f5;
  padding: 15px 24px;
}

.tknewmodal .umodalfoot .abtn {
  min-height: 40px;
  padding: 0 20px;
  font-weight: 600;
  border-radius: 10px !important;
}

.tknew-submit {
  background: #374151;
  border-color: #374151;
  box-shadow: 0 2px 8px #37415140;
}

.admin .tknewmodal .abtn:hover:not(:disabled) {
  box-shadow: 0 2px 8px #0f172a24, inset 0 1px #ffffff29;
}

.admin .tknewmodal .tknew-submit:hover:not(:disabled) {
  background: #1f2937;
  box-shadow: 0 4px 12px -2px #37415173, inset 0 1px #ffffff29;
}

@media (max-width: 560px) {
  .tknewg2, .tknewg3 {
    grid-template-columns: 1fr;
  }
}

.tkstat {
  gap: 6px;
  padding: 12px 14px;
}

.tkstat-top {
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  display: flex;
}

.tkstat-ic {
  border-radius: 8px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  display: inline-flex;
}

.tkstat-ic.tk-new {
  color: #64748b;
  background: #64748b1f;
}

.tkstat-ic.tk-prog {
  color: #ca8a04;
  background: #eab30824;
}

.tkstat-ic.tk-test {
  color: #4f46e5;
  background: #6366f121;
}

.tkstat-ic.tk-done {
  color: #16a34a;
  background: #16a34a21;
}

.tkstat-ic.tk-conf {
  color: #0f766e;
  background: #14b8a624;
}

.tkstat-ic.tk-reopen {
  color: #ea580c;
  background: #f9731624;
}

.tkstat-ic.tk-cxl {
  color: #94a3b8;
  background: #94a3b826;
}

.tkstat-n {
  letter-spacing: -.02em;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.tkstat-l {
  color: var(--fg-secondary, #64748b);
  font-size: 12px;
  font-weight: 500;
}

.tkstat:not(.on) {
  background: var(--bg-subtle, #f8fafc);
}

.tkstat:not(.on) .tkstat-ic {
  background: var(--bg-muted, #eef2f7);
  color: var(--fg-muted, #94a3b8);
}

.tkstat:not(.on) .tkstat-n, .tkstat:not(.on) .tkstat-l {
  color: var(--fg-muted, #94a3b8);
}

.tkd2-descedit {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.tkd2-descedit textarea {
  border-radius: 10px;
}

.tkd2-descbtns {
  gap: 8px;
  display: flex;
}

.tkd2-descbtns .abtn, .admin .tkd2-descbtns .abtn.ghost {
  height: 32px;
  box-shadow: none;
  padding: 0 16px;
  font-size: 12.5px;
  border-radius: 999px !important;
}

.tksummary-h {
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--fg-muted, #94a3b8);
  margin-bottom: 8px;
  font-size: 11.5px;
  font-weight: 700;
}

.tkstat-mine {
  color: var(--fg-muted, #94a3b8);
  font-size: 12px;
}

.tkstat-mine b {
  color: var(--fg-secondary, #64748b);
  font-weight: 700;
}

.tkstat-ic.tk-hipri {
  color: #ea580c;
  background: #f9731624;
}

.tkstat.tk-hipri.on {
  border-color: #f9731680;
}

.tdash {
  animation: .2s tdashin;
}

@keyframes tdashin {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

.tdash-head {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 18px;
  display: flex;
}

.tdash-head h2 {
  letter-spacing: -.02em;
  color: var(--fg, #0f172a);
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.tdash-sub {
  color: var(--fg-muted, #94a3b8);
  font-size: 12.5px;
}

.tdash-filters {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.tdash-kpis {
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
  display: grid;
}

.tdash-kpi {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #eef1f5);
  border-radius: 16px;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px 15px;
  transition: box-shadow .15s, border-color .15s, transform .15s;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px #1018280a;
}

.tdash-kpi:hover {
  border-color: var(--border-strong, #dde3ea);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px #10182812;
}

.tdash-kpi:before {
  content: "";
  background: var(--kpi, #94a3b8);
  width: 3px;
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
}

.tdash-kpi-ic {
  top: 13px;
  background: color-mix(in srgb, var(--kpi) 11%, transparent);
  width: 28px;
  height: 28px;
  color: var(--kpi);
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  position: absolute;
  inset-inline-end: 13px;
}

.tdash-kpi-ic svg {
  width: 15px;
  height: 15px;
}

.tdash-kpi-v {
  color: var(--fg, #0f172a);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.1;
}

.tdash-kpi-l {
  color: var(--fg-muted, #8b93a2);
  text-transform: uppercase;
  letter-spacing: .07em;
  order: -1;
  margin-bottom: 2px;
  padding-inline-end: 44px;
  font-size: 11px;
  font-weight: 700;
}

.tdash-kpi-sub {
  color: var(--fg-muted, #94a3b8);
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
  font-size: 11.5px;
}

.tone-slate {
  --kpi: #475569;
}

.tone-blue {
  --kpi: #0284c7;
}

.tone-green {
  --kpi: #16a34a;
}

.tone-red {
  --kpi: #dc2626;
}

.tone-amber {
  --kpi: #d97706;
}

.tone-gray {
  --kpi: #94a3b8;
}

.tdash-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  display: grid;
}

.tdash-card {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #eef1f5);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 1px 2px #1018280a;
}

.tdash-card.tdash-wide {
  grid-column: span 2;
}

.tdash-cardh {
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fg-secondary, #64748b);
  border-bottom: 1px solid var(--border, #f1f5f9);
  align-items: center;
  gap: 7px;
  margin: -16px -18px 14px;
  padding: 10px 18px 9px;
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
}

.tdash-cardh svg {
  color: #94a3b8;
  flex: none;
  width: 14px;
  height: 14px;
}

.tdash-cardh-leg {
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg-muted, #94a3b8);
  align-items: center;
  gap: 5px;
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
}

.tdash-cardh-leg i {
  border-radius: 3px;
  width: 9px;
  height: 9px;
  margin-inline-start: 6px;
  display: inline-block;
}

.tdash-donutwrap {
  align-items: center;
  gap: 14px;
  display: flex;
}

.tdash-donut {
  flex: none;
  width: 118px;
  height: 118px;
}

.tdash-donut-n {
  fill: var(--fg, #0f172a);
  font-size: 26px;
  font-weight: 700;
}

.tdash-donut-l {
  fill: var(--fg-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10px;
}

.tdash-legendlist {
  flex-direction: column;
  flex: 1;
  gap: 6px;
  min-width: 0;
  display: flex;
}

.tdash-leg {
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  display: flex;
}

.tdash-leg-dot {
  border-radius: 3px;
  flex: none;
  width: 9px;
  height: 9px;
}

.tdash-leg-l {
  color: var(--fg-secondary, #475569);
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  overflow: hidden;
}

.tdash-leg b {
  font-variant-numeric: tabular-nums;
  color: var(--fg, #1e293b);
}

.tdash-leg-p {
  text-align: end;
  min-width: 34px;
  color: var(--fg-muted, #94a3b8);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.tdash-gauge {
  align-items: center;
  gap: 12px;
  display: flex;
}

.tdash-ring {
  flex: none;
  width: 116px;
  height: 116px;
}

.tdash-ring-n {
  fill: #16a34a;
  font-size: 22px;
  font-weight: 700;
}

.tdash-ring-l {
  fill: var(--fg-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10px;
}

.tdash-gauge-meta {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.tdash-gauge-meta div {
  flex-direction: column;
  display: flex;
}

.tdash-gauge-meta b {
  color: var(--fg, #1e293b);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
}

.tdash-gauge-meta b.warn {
  color: #ea580c;
}

.tdash-gauge-meta span {
  color: var(--fg-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: .07em;
  order: -1;
  font-size: 10.5px;
  font-weight: 700;
}

.tdash-trend-svg {
  width: 100%;
  height: 150px;
}

.tdash-brow {
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
  display: flex;
}

.tdash-brow:last-child {
  margin-bottom: 0;
}

.tdash-brow-l {
  color: var(--fg-secondary, #475569);
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 0 92px;
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
}

.tdash-brow-bar {
  background: var(--bg-subtle, #f1f5f9);
  border-radius: 999px;
  flex: 1;
  height: 10px;
  overflow: hidden;
}

.tdash-brow-f {
  background: var(--accent, #374151);
  border-radius: 999px;
  min-width: 3px;
  height: 100%;
  display: block;
  position: relative;
}

.tdash-brow-done {
  background: #16a34a;
  border-radius: 999px;
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
}

.tdash-brow-n {
  text-align: end;
  min-width: 26px;
  color: var(--fg, #1e293b);
  font-variant-numeric: tabular-nums;
  flex: none;
  font-size: 13px;
  font-weight: 700;
}

.tdash-lrow {
  border-bottom: 1px solid var(--border, #f4f6f8);
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 13px;
  display: flex;
}

.tdash-lrow:last-child {
  border-bottom: 0;
}

.tdash-lrank {
  background: var(--bg-subtle, #f1f5f9);
  color: #64748b;
  border-radius: 999px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.tdash-lrank.top {
  color: #fff;
  background: #374151;
}

.tdash-lname {
  color: var(--fg, #1e293b);
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  font-weight: 600;
  overflow: hidden;
}

.tdash-lstat {
  color: var(--fg-secondary, #64748b);
  flex: none;
  font-size: 12px;
}

.tdash-lstat b.ok, .trep-table td.ok, .trep-sum.tone-green .trep-sum-v {
  color: #16a34a;
}

@media (max-width: 900px) {
  .tdash-grid {
    grid-template-columns: 1fr 1fr;
  }

  .tdash-card.tdash-wide {
    grid-column: span 2;
  }
}

@media (max-width: 620px) {
  .tdash-grid {
    grid-template-columns: 1fr;
  }

  .tdash-card.tdash-wide {
    grid-column: span 1;
  }
}

.trep-summary {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
  display: grid;
}

.trep-sum {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #eef1f5);
  border-inline-start: 3px solid var(--kpi, #94a3b8);
  border-radius: 16px;
  flex-direction: column;
  gap: 2px;
  padding: 13px 16px 14px;
  transition: box-shadow .15s, border-color .15s;
  display: flex;
}

.trep-sum:hover {
  border-color: var(--border-strong, #dde3ea);
  box-shadow: 0 3px 10px #1018280f;
}

.trep-sum-v {
  color: var(--fg, #0f172a);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  display: block;
}

.trep-sum-l {
  color: var(--fg-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: .07em;
  order: -1;
  font-size: 11px;
  font-weight: 700;
}

.trep-cols {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  display: grid;
}

.trep-block {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #eef1f5);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 1px 2px #1018280a;
}

.trep-block.trep-full {
  grid-column: 1 / -1;
}

.trep-blockh {
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fg-secondary, #64748b);
  border-bottom: 1px solid var(--border, #f1f5f9);
  align-items: center;
  gap: 7px;
  margin: -16px -18px 12px;
  padding: 10px 18px 9px;
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
}

.trep-blockh svg {
  color: #94a3b8;
  flex: none;
  width: 14px;
  height: 14px;
}

.trep-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 13px;
}

.trep-table th {
  text-align: start;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fg-secondary, #64748b);
  background: var(--bg-subtle, #f8fafc);
  border-bottom: 1px solid var(--border, #e2e8f0);
  padding: 7px 8px;
  font-size: 11px;
  font-weight: 700;
}

.trep-table th:first-child {
  border-start-start-radius: 8px;
}

.trep-table th:last-child {
  border-start-end-radius: 8px;
}

.trep-table tbody tr:last-child td {
  border-bottom: 0;
}

.trep-table th.num, .trep-table td.num {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.trep-table td {
  border-bottom: 1px solid var(--border, #f4f6f8);
  color: var(--fg, #1e293b);
  padding: 8px;
}

.trep-table tbody tr:hover {
  background: var(--bg-subtle, #f8fafc);
}

.trep-table td.nm {
  align-items: center;
  gap: 8px;
  font-weight: 600;
  display: flex;
}

.trep-table td.muted {
  color: var(--fg-muted, #94a3b8);
}

.trep-rank {
  background: var(--bg-subtle, #f1f5f9);
  color: #64748b;
  border-radius: 999px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.trep-table .barcell {
  width: 130px;
}

.trep-bar {
  background: var(--bg-subtle, #f1f5f9);
  border-radius: 999px;
  height: 9px;
  display: flex;
  overflow: hidden;
}

.trep-bar-done {
  background: #16a34a;
}

.trep-bar-open {
  background: #93c5fd;
}

@media (max-width: 720px) {
  .trep-cols {
    grid-template-columns: 1fr;
  }
}

.tksubnav {
  flex-direction: column;
  gap: 1px;
  margin: 2px 0 4px;
  padding-inline-start: 14px;
  display: flex;
}

.tksubnav-i {
  width: 100%;
  font: inherit;
  color: var(--fg-secondary, #64748b);
  cursor: pointer;
  text-align: start;
  background: none;
  border: 0;
  border-radius: 8px;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 500;
  transition: background .12s, color .12s;
  display: flex;
}

.tksubnav-i:hover {
  color: var(--fg, #e2e8f0);
  background: #ffffff0f;
}

.tksubnav-i svg {
  color: currentColor;
  opacity: .8;
  flex: none;
}

.tksubnav-i.sel {
  color: #fff;
  background: #ffffff1a;
  font-weight: 600;
}

.tknav-toggle {
  width: 22px;
  height: 22px;
  color: inherit;
  opacity: .7;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  margin-inline-start: auto;
  display: inline-flex;
}

.tknav-toggle:hover {
  opacity: 1;
  background: #ffffff1a;
}

.tknav-toggle svg {
  transition: transform .18s;
}

.tknav-toggle svg.flip {
  transform: rotate(180deg);
}

.tdash-filters .datewrap.adm .datebtn {
  border-radius: 10px;
  height: 38px;
  padding: 0 12px 0 34px;
}

.tdash-filters .datewrap.adm .datebtn:hover {
  border-color: #cbd5e1;
}

.tdash-filters .tsel-btn {
  border-radius: 10px;
  height: 38px;
}

.tdash-filters .abtn.tknew, .admin .tdash-filters .abtn.tknew {
  height: 38px;
  border-radius: 10px !important;
}

.tdash-filters .gfilter-lab {
  color: var(--fg-muted, #94a3b8);
  font-size: 12px;
  font-weight: 600;
}

.trep-tabs {
  background: var(--bg-subtle, #f1f5f9);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 11px;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px;
  display: inline-flex;
}

.trep-tab {
  font: inherit;
  color: var(--fg-secondary, #64748b);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 600;
  transition: background .12s, color .12s;
  display: inline-flex;
}

.trep-tab svg {
  opacity: .7;
}

.trep-tab:hover {
  color: var(--fg, #334155);
}

.trep-tab.on {
  color: #fff;
  background: #374151;
}

.trep-tab.on svg {
  opacity: 1;
}

.trep-picker {
  align-items: center;
  gap: 9px;
  display: inline-flex;
}

.trep-picker > svg {
  color: #64748b;
  flex: none;
}

.trep-picker .tsel-btn {
  border-radius: 10px;
  height: 40px;
  font-size: 14px;
  font-weight: 600;
}

.trep-empty {
  text-align: center;
  background: var(--bg-card, #fff);
  border: 1px dashed var(--border-strong, #cbd5e1);
  border-radius: 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 64px 20px;
  display: flex;
}

.trep-empty svg {
  color: #cbd5e1;
}

.trep-empty b {
  color: var(--fg, #334155);
  font-size: 15px;
}

.trep-empty span {
  color: var(--fg-muted, #94a3b8);
  font-size: 13px;
}

.trep-scroll {
  overflow-x: auto;
}

.trep-rate {
  text-align: center;
  border-radius: 999px;
  min-width: 42px;
  padding: 2px 7px;
  font-size: 12px;
  font-weight: 700;
  display: inline-block;
}

.trep-rate.good {
  color: #15803d;
  background: #dcfce7;
}

.trep-rate.mid {
  color: #b45309;
  background: #fef3c7;
}

.trep-rate.low {
  color: #b91c1c;
  background: #fee2e2;
}

.trep-pos {
  color: var(--fg-muted, #94a3b8);
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  display: block;
}

.trep-table td.nm {
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.gsc {
  border: 1px solid var(--border, #eef1f5);
  background: #fff;
  border-radius: 16px;
  padding: 24px 26px;
  box-shadow: 0 1px 2px #1018280a;
}

.gsc-title {
  text-align: center;
  letter-spacing: -.01em;
  color: #111827;
  margin-bottom: 14px;
  font-size: 18px;
  font-weight: 700;
}

.gsc-legend {
  border-radius: 6px;
  justify-content: center;
  gap: 0;
  width: fit-content;
  margin: 0 auto 22px;
  display: flex;
  overflow: hidden;
  box-shadow: 0 1px 3px #0000001f;
}

.gsc-legend span {
  padding: 7px 16px;
  font-size: 12.5px;
  font-weight: 700;
}

.gsc-sec {
  margin-bottom: 18px;
}

.gsc-h {
  color: #1f2937;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 700;
}

.gsc-scroll {
  overflow-x: auto;
}

.gsc-matrix {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 0 0 1px #cbd5e1;
}

.gsc-matrix th {
  color: #fff;
  border: 0;
  text-align: center;
  white-space: nowrap;
  background: #374151;
  border-inline-end: 1px solid #5b6472;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
}

.gsc-matrix th:last-child {
  border-inline-end: 0;
}

.gsc-matrix td {
  border: 0;
  border-inline-end: 1px solid #cbd5e1;
  text-align: center;
  color: #1e293b;
  border-top: 1px solid #cbd5e1;
  padding: 13px 14px;
  font-size: 15px;
  font-weight: 700;
}

.gsc-matrix td:last-child {
  border-inline-end: 0;
}

.gsc-banner {
  color: #fff;
  background: #374151;
  border-radius: 6px;
  margin: 6px 0 12px;
  padding: 14px 20px;
  font-size: 20px;
  font-weight: 700;
}

.gsc-items {
  border-collapse: collapse;
  width: 100%;
  font-size: 12.5px;
}

.gsc-items th {
  color: #fff;
  white-space: nowrap;
  background: #374151;
  border: 1px solid #4b5563;
  padding: 7px 9px;
  font-size: 11px;
  font-weight: 700;
}

.gsc-items td {
  color: #1e293b;
  vertical-align: middle;
  border: 1px solid #cbd5e1;
  padding: 7px 9px;
}

.gsc-items td.c {
  text-align: center;
}

.gsc-items td.mono {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 12px;
}

.gsc-items tbody tr:nth-child(2n) {
  background: #f8fafc;
}

.gsc-items tbody tr:hover {
  background: #eef2f6;
}

.gsc-svc {
  min-width: 220px;
}

.gsc-ar {
  color: #475569;
  direction: rtl;
  unicode-bidi: isolate;
  font-family: Noto Sans Arabic, Segoe UI, ui-sans-serif, system-ui, sans-serif;
  display: inline-block;
}

.gsc-sub {
  color: #94a3b8;
  font-style: normal;
}

.gsc-dur {
  text-align: center;
  border-radius: 0;
  min-width: 54px;
  font-weight: 700;
}

.gsc-annual {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
}

.gsc-annual th {
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background: #374151;
  border: 1px solid #4b5563;
  padding: 9px 7px;
  font-size: 11px;
  font-weight: 700;
}

.gsc-annual th.svc {
  text-align: start;
  min-width: 180px;
}

.gsc-annual th.ytd {
  background: #1f2937;
}

.gsc-annual td {
  color: #1e293b;
  text-align: center;
  font-variant-numeric: tabular-nums;
  border: 1px solid #cbd5e1;
  padding: 8px 7px;
}

.gsc-annual td.c {
  font-weight: 600;
}

.gsc-annual td.z {
  color: #cbd5e1;
  font-weight: 400;
}

.gsc-annual td.ytd {
  background: #f1f5f9;
  font-weight: 700;
}

.gsc-annual td.gsc-svc {
  text-align: start;
  font-weight: 600;
}

.gsc-annual tbody tr:nth-child(2n) td:not(.ytd) {
  background: #f8fafc;
}

.gsc-top10 th.svc, .gsc-top10 td.gsc-svc {
  text-align: start;
}

.gsc-top10 th.svc {
  min-width: 260px;
}

.gsc-id {
  color: #374151;
  font-weight: 700;
}

.gsc-items td.gsc-id {
  font-variant-numeric: tabular-nums;
}

.tkmg {
  flex-direction: column;
  gap: 14px;
  display: flex;
}

.tkmg-tabs {
  background: var(--bg-subtle, #f1f5f9);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  gap: 4px;
  width: fit-content;
  padding: 4px;
  display: inline-flex;
}

.tkmg-tabs button {
  font: inherit;
  color: var(--fg-secondary, #64748b);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 7px;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
}

.tkmg-tabs button.on {
  background: var(--bg-card, #fff);
  color: var(--accent, #374151);
  box-shadow: 0 1px 2px #00000014;
}

.tkmg-bar {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  display: flex;
}

.tkmg-filter {
  min-width: 220px;
}

.tkmg-search {
  border: 1px solid var(--border, #e2e8f0);
  background: var(--bg-card, #fff);
  height: 38px;
  color: var(--fg-muted, #94a3b8);
  border-radius: 9px;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  transition: border-color .12s, box-shadow .12s;
  display: inline-flex;
}

.tkmg-search:hover {
  border-color: var(--border-strong, #cbd5e1);
}

.tkmg-search:focus-within {
  color: var(--fg-secondary, #64748b);
  border-color: #64748b;
  box-shadow: 0 0 0 3px #3741511a;
}

.tkmg-bar .tsel-btn {
  background: var(--bg-card, #fff);
  border-radius: 9px;
  height: 38px;
}

.tkmg-add, .admin .tkmg-add, .admin .abtn.tkmg-add {
  height: 38px;
}

.tkmg-search input {
  font: inherit;
  color: var(--fg, #1e293b);
  background: none;
  border: 0;
  outline: 0;
  width: 200px;
  font-size: 13px;
}

.tkmg-count {
  color: var(--fg-secondary, #64748b);
  font-size: 12.5px;
}

.tkmg-add {
  margin-inline-start: auto;
}

.tkmg-tblwrap {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  overflow-x: auto;
  box-shadow: 0 1px 2px #1018280a;
}

.tkmg-table thead th:first-child {
  border-start-start-radius: 12px;
  padding-inline-start: 16px;
}

.tkmg-table thead th:last-child {
  border-start-end-radius: 12px;
}

.tkmg-table tbody td:first-child {
  padding-inline-start: 16px;
}

.tkmg-table tbody tr:last-child td {
  border-bottom: 0;
}

.tkmg-table tbody tr:last-child td:first-child {
  border-end-start-radius: 12px;
}

.tkmg-table tbody tr:last-child td:last-child {
  border-end-end-radius: 12px;
}

.tkmg-table tbody tr {
  cursor: default;
}

.tkmg-table td {
  vertical-align: middle;
}

.tkmg-table tr.tkmg-off td {
  opacity: .45;
}

.tkmg-ar {
  color: var(--fg-secondary, #475569);
  direction: rtl;
  unicode-bidi: isolate;
  font-family: Noto Sans Arabic, Segoe UI, ui-sans-serif, system-ui, sans-serif;
  font-size: 13.5px;
}

.tkmg-toggle {
  border: 1px solid var(--border, #cbd5e1);
  cursor: pointer;
  background: #e2e8f0;
  border-radius: 999px;
  width: 34px;
  height: 20px;
  padding: 0;
  transition: background .15s, border-color .15s;
  position: relative;
}

.tkmg-toggle > span {
  background: #fff;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  transition: left .15s;
  position: absolute;
  top: 2px;
  left: 2px;
  box-shadow: 0 1px 2px #0003;
}

.tkmg-toggle.on {
  background: var(--accent, #374151);
  border-color: var(--accent, #374151);
}

.tkmg-toggle.on > span {
  left: 16px;
}

.tkmg-toggle.sm {
  width: 30px;
  height: 18px;
}

.tkmg-toggle.sm > span {
  width: 12px;
  height: 12px;
}

.tkmg-toggle.sm.on > span {
  left: 14px;
}

.tkmg-toggle > span {
  transition: left .15s, width .15s;
}

.tkmg-toggle:hover:not(.on) {
  border-color: var(--border-strong, #94a3b8);
}

.tkmg-toggle.on:hover {
  background: #1f2937;
  border-color: #1f2937;
}

.tkmg-toggle:active > span {
  width: 17px;
}

.tkmg-toggle.on:active > span {
  left: 13px;
}

.tkmg-toggle.sm:active > span {
  width: 15px;
}

.tkmg-toggle.sm.on:active > span {
  left: 11px;
}

.tkmg-acts {
  white-space: nowrap;
  text-align: end;
}

.tkmg-acts button, .tkmg-dacts button {
  color: var(--fg-muted, #94a3b8);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 5px;
}

.tkmg-acts button:hover, .tkmg-dacts button:hover {
  background: var(--bg-subtle, #f1f5f9);
  color: var(--fg, #1e293b);
}

.tkmg-acts button.danger:hover, .tkmg-dacts button.danger:hover {
  color: #dc2626;
  background: #fef2f2;
}

.tkmg-dlist {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.tkmg-dgroup {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  overflow: hidden;
}

.tkmg-drow {
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  display: flex;
}

.tkmg-drow.sub {
  border-top: 1px solid var(--border, #eef1f5);
  background: var(--bg-subtle, #fafbfc);
  padding-inline-start: 34px;
  position: relative;
}

.tkmg-drow.sub:before {
  content: "";
  inset-inline-start: 25px;
  background: var(--border-strong, #dbe2ea);
  width: 1.5px;
  position: absolute;
  top: -1px;
  bottom: 0;
}

.tkmg-drow.tkmg-off .tkmg-dname, .tkmg-drow.tkmg-off .tkmg-ar {
  opacity: .45;
}

.tkmg-dtogl {
  width: 22px;
  height: 22px;
  color: var(--fg-muted, #94a3b8);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 6px;
  flex: none;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.tkmg-dtogl:hover {
  background: var(--bg-subtle, #f1f5f9);
}

.tkmg-dtogl svg {
  transition: transform .18s;
}

.tkmg-dtogl .flip90 {
  transform: rotate(90deg);
}

.tkmg-dname {
  color: var(--fg, #1e293b);
  font-size: 13.5px;
  font-weight: 600;
}

.tkmg-dcount {
  color: var(--fg-secondary, #64748b);
  background: var(--bg-subtle, #f1f5f9);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
}

.tkmg-dacts {
  align-items: center;
  gap: 4px;
  margin-inline-start: auto;
  display: inline-flex;
}

.tkmg-addsub {
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
}

.tkmg-modal {
  border-radius: 16px;
  width: min(480px, 100vw - 40px);
  padding: 0;
  overflow: hidden;
}

.tkmg-form {
  flex-direction: column;
  gap: 13px;
  padding: 18px 22px 20px;
  display: flex;
}

.tkmg-lab {
  color: var(--fg-secondary, #475569);
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
}

.tkmg-arinp {
  font-family: Noto Sans Arabic, Segoe UI, ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
}

.tkmg-2col {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  display: grid;
}

.tkmg-err {
  color: #dc2626;
  font-size: 12.5px;
}

.tkmg-btns {
  justify-content: flex-end;
  gap: 10px;
  margin-top: 2px;
  display: flex;
}

@media (max-width: 640px) {
  .tkmg-2col {
    grid-template-columns: 1fr;
  }

  .tkmg-search input {
    width: 120px;
  }
}

.tkmg-head {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  padding-bottom: 2px;
  display: flex;
}

.tkmg-headtxt h3 {
  letter-spacing: -.01em;
  color: var(--fg, #0f172a);
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.tkmg-headtxt p {
  color: var(--fg-secondary, #64748b);
  max-width: 52ch;
  margin: 3px 0 0;
  font-size: 13px;
}

.tkmg-stats {
  flex-wrap: wrap;
  gap: 10px;
  display: flex;
}

.tkmg-stat {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  cursor: pointer;
  min-width: 104px;
  font: inherit;
  text-align: start;
  border-radius: 12px;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 10px 14px;
  transition: border-color .14s, box-shadow .14s, background .14s;
  display: flex;
}

.tkmg-stat:hover {
  border-color: var(--border-strong, #cbd5e1);
  box-shadow: 0 2px 8px #1018280d;
}

.tkmg-stat:focus-visible {
  outline: 2px solid var(--accent, #374151);
  outline-offset: 2px;
}

.tkmg-stat.on {
  border-color: color-mix(in srgb, var(--accent, #374151) 42%, var(--border, #e2e8f0));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #374151) 28%, transparent);
}

.tkmg-stat-ic {
  background: var(--accent-subtle, #f0f1f3);
  width: 26px;
  height: 26px;
  color: var(--accent, #374151);
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  margin-bottom: 4px;
  display: inline-flex;
}

.tkmg-stat b {
  letter-spacing: -.02em;
  color: var(--fg, #0f172a);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.tkmg-stat-l {
  color: var(--fg-secondary, #64748b);
  font-size: 11.5px;
  font-weight: 500;
}

.tkmg-chip {
  background: var(--bg-subtle, #f1f5f9);
  border: 1px solid var(--border, #e8edf3);
  max-width: 100%;
  color: var(--fg-secondary, #475569);
  white-space: nowrap;
  border-radius: 7px;
  align-items: center;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
}

.tkmg-chip.sub {
  color: var(--fg-muted, #64748b);
  background: none;
  border-style: dashed;
  font-weight: 500;
}

.tkmg-used {
  background: var(--accent-subtle, #f0f1f3);
  min-width: 22px;
  color: var(--accent, #374151);
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  justify-content: center;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
}

.tkmg-empty {
  text-align: center;
  color: var(--fg-muted, #94a3b8);
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 40px 20px;
  display: flex;
}

.tkmg-empty b {
  color: var(--fg-secondary, #475569);
  font-size: 14px;
  font-weight: 600;
}

.tkmg-empty span {
  font-size: 12.5px;
}

.tkmg-tabs {
  padding: 5px;
}

.tkmg-tabs button {
  padding: 8px 18px;
}

.tkmg-tabs button:hover:not(.on) {
  color: var(--fg, #1e293b);
}

.tkmg-dgroup > .tkmg-drow:first-child {
  background: var(--bg-subtle, #fafbfc);
}

.tkmg-dgroup > .tkmg-drow:first-child .tkmg-dname {
  font-weight: 700;
}

.tkmg-dgroup:hover {
  border-color: var(--border-strong, #cbd5e1);
}

@media (max-width: 700px) {
  .tkmg-head {
    align-items: stretch;
  }

  .tkmg-stats {
    width: 100%;
  }

  .tkmg-stat {
    flex: 1;
    min-width: 0;
  }
}

.tkmg-perpage {
  min-width: 120px;
}

.tkmg-perpage .tsel-btn {
  background: var(--bg-card, #fff);
  border-radius: 9px;
  height: 38px;
}

.tkmg-foot {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  display: flex;
}

.tkmg-foot .tkpg-cur {
  color: var(--fg-secondary, #64748b);
  font-variant-numeric: tabular-nums;
  padding: 0 4px;
  font-size: 12.5px;
  font-weight: 600;
}

.tdash-head, .tkmg-head {
  border-bottom: 1px solid var(--border, #eef1f5);
  align-items: center;
  gap: 14px 20px;
  margin-bottom: 16px;
  padding-bottom: 14px;
}

.tdash-head h2, .tkmg-headtxt h3 {
  letter-spacing: -.01em;
  color: var(--fg, #0f172a);
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.trep-headleft {
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  display: flex;
}

.trep-headleft h2 {
  letter-spacing: -.01em;
  color: var(--fg, #0f172a);
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.trep-headleft h2:after {
  content: "";
}

.tdash-kpi {
  border-radius: 12px;
  padding: 13px 15px 14px;
  box-shadow: 0 1px 2px #1018280a;
}

.tdash-kpi:hover {
  transform: none;
  box-shadow: 0 2px 8px #1018280f;
}

.tdash-kpi:before {
  display: none;
}

.tdash-kpi-ic {
  top: 12px;
  border-radius: 8px;
  width: 28px;
  height: 28px;
  inset-inline-end: 12px;
}

.tdash-kpi-v {
  letter-spacing: -.02em;
  font-size: 24px;
  line-height: 1;
}

.tdash-kpi-l {
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg-secondary, #64748b);
  order: 0;
  margin-bottom: 0;
  padding-inline-end: 40px;
  font-size: 12px;
  font-weight: 500;
}

.tdash-kpi-sub {
  margin-top: 4px;
}

.tdash-kpis {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.tkmg-stat b {
  font-size: 24px;
}

.tkmg-stat-ic {
  width: 28px;
  height: 28px;
}

.tkmg-bar .tsel-btn, .tkmg-perpage .tsel-btn, .tdash-filters .tsel-btn, .tdash-filters .datewrap.adm .datebtn {
  height: 38px;
}

/* [project]/app/orders.css [app-client] (css) */
.ordgrid3 {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  align-items: start;
  gap: 16px;
  margin-top: 4px;
  display: grid;
}

.ordgrid3 .hmfield {
  min-width: 0;
}

.ordgrid3 .hminp, .ordgrid3 .unitfield {
  box-sizing: border-box;
  width: 100%;
}

.ordmod .hmct {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13.5px;
}

.ordmod .hmlab {
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg);
  font-size: 13px;
  font-weight: 600;
}

/* [project]/app/mobile.css [app-client] (css) */
@media (max-width: 900px) {
  .rintro2 {
    overflow-y: auto;
  }

  .rintro2 .steplogo {
    margin: 20px auto 0;
    display: block;
    position: static;
  }

  .ri2gallery {
    grid-auto-rows: 30vw;
    width: auto;
    height: auto;
    margin: 16px;
    position: static;
    transform: none;
    grid-template-rows: none !important;
    grid-template-columns: 1fr 1fr !important;
  }

  .ri2gallery .ri2photo:first-child {
    grid-area: auto / 1 / auto / span 2;
  }

  .ri2left {
    max-width: none;
    padding: 8px 24px 120px;
    position: static;
    transform: none;
  }

  .idpage2 {
    min-height: 100dvh;
    position: absolute;
    overflow-y: auto;
  }

  .idpage2 .steplogo {
    max-width: 62vw;
    height: clamp(42px, 9vw, 60px);
    margin: 22px auto 2px;
    display: block;
    position: static;
    top: auto;
    left: auto;
    transform: none;
  }

  .id2left {
    width: min(92vw, 440px);
    margin: 16px auto 0;
    padding: 0 20px 150px;
    position: static;
    top: auto;
    left: auto;
  }

  .id2title {
    white-space: normal;
    margin-bottom: 5vh;
    font-size: clamp(24px, 6.5vw, 34px);
  }

  .id2fields, .id2fields .id2field {
    width: 100%;
  }

  .id2label {
    margin-bottom: 10px;
    font-size: 17px;
  }

  .id2box {
    min-height: 58px;
    padding: 0 18px;
    font-size: 22px;
  }

  .id2box.asbtn {
    font-size: 22px;
  }

  .id2keypad {
    display: none;
  }

  .id2cal {
    justify-content: center;
    margin-top: 10px;
    display: flex;
    position: static;
  }

  .mosaic {
    min-height: 100dvh;
    position: absolute;
    overflow-y: auto;
  }

  .mosaicgrid {
    grid-auto-rows: 42vw;
    gap: 8px;
    height: auto;
    min-height: 100dvh;
    grid-template-rows: none !important;
    grid-template-columns: 1fr !important;
  }

  .mosaicgrid .mtile.feature {
    grid-area: auto !important;
  }

  .wlm {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .wlmleft {
    max-width: none;
    padding: 3vh 20px 2vh;
  }

  .wl2name {
    font-size: clamp(26px, 7.5vw, 40px);
  }

  .wl2grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 18px;
    display: grid;
  }

  .wl2cell {
    min-width: 0;
    padding: 12px 8px;
  }

  .wl2cell span {
    font-size: 11.5px;
  }

  .wl2cell b {
    font-size: 16px;
  }

  .wlmright {
    text-align: center;
    align-items: center;
    padding: 1vh 20px 4vh;
    border-left: 0 !important;
  }

  .wlmright .id2askq {
    text-align: center;
    margin: 0 0 3vh;
    font-size: clamp(22px, 6vw, 32px);
  }

  .whenp .whentitle {
    z-index: auto;
    text-align: center;
    width: min(94vw, 480px);
    margin: 4px auto 2px;
    padding-bottom: 10px;
    font-size: clamp(22px, 6vw, 30px);
    position: relative;
    top: auto;
    left: auto;
    right: auto;
  }

  .whenp .whentitle:after {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .whenrow {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    width: min(94vw, 480px);
    margin: 12px auto 0;
    padding-bottom: 130px;
    position: static;
    transform: none;
  }

  .whenlabel {
    text-align: center;
    padding-top: 0;
    font-size: clamp(24px, 6vw, 32px);
  }

  .whencol {
    background: #ffffff0b;
    border: 1px solid #ffffff1f;
    border-radius: 16px;
    padding: 16px 14px;
    border-left: 0 !important;
  }

  .whendow, .whenmon {
    font-size: 14px;
  }

  .whendom {
    margin: 2px 0;
    font-size: 32px;
  }

  .whenslots {
    flex-flow: wrap;
    justify-content: center;
    align-self: stretch;
    gap: 8px;
    margin-top: 14px;
  }

  .whenslot {
    flex: 84px;
    min-width: 0;
    padding: 13px 10px;
    font-size: 18px;
    font-weight: 600;
  }

  .whenslot .whenarea {
    letter-spacing: .06em;
    opacity: .85;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 600;
  }

  html[lang="ar"] .whenslot {
    font-family: Noto Sans Arabic, ui-sans-serif, sans-serif;
    font-size: 20px;
    font-weight: 700;
  }

  html[lang="ar"] .whenslot .whenarea {
    letter-spacing: 0;
    letter-spacing: 0;
    font-size: 12px;
  }

  .detrows {
    width: min(94vw, 480px);
    min-width: 0;
    max-height: none;
    margin: 16px auto 0;
    padding: 8px 20px 130px;
    position: static;
    top: auto;
    left: auto;
    overflow: visible;
  }

  .detrow {
    grid-template-columns: 1fr;
    gap: 4px 0;
    padding: 12px 0;
  }

  .menuhead {
    padding: 3vh 20px 2vh;
  }

  .menuscroll {
    padding: 0 18px 3vh;
  }

  .detval {
    flex-wrap: wrap;
    gap: 12px;
    font-size: 18px;
  }

  .detchips {
    gap: 10px;
  }

  .detchips.small {
    max-width: none;
  }

  .whencharge {
    white-space: normal;
    text-align: center;
    width: auto;
    max-width: 92vw;
    margin: 0 auto 8px;
    padding: 8px 16px;
    font-size: 12.5px;
    line-height: 1.4;
    position: static;
    bottom: auto;
    left: auto;
    right: auto;
    transform: none;
  }

  html[lang="ar"] .whencharge {
    left: auto;
    right: auto;
  }

  .menuheroname {
    font-size: clamp(24px, 6.5vw, 34px);
  }

  .menuherocuisine {
    font-size: 11px;
  }

  .revp .revitem {
    gap: 10px;
    font-size: 16px;
  }

  .revp .revitem .revname, .revp .revtotalbar {
    font-size: 16px;
  }

  .revp .revtotalbar b {
    font-size: 20px;
  }

  .confirm2 {
    padding: 32px 18px;
  }

  .confirm2 .c2card {
    padding: 30px 22px 26px;
  }

  .wlm {
    grid-template-columns: 1fr;
  }

  .wlmright {
    text-align: center;
    border-top: 1px solid #ffffff1f;
    border-left: 0;
    align-items: center;
  }

  .home .flags {
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 7px;
    padding: 12px 10px;
    overflow-x: auto;
  }

  .home .flags::-webkit-scrollbar {
    display: none;
  }

  .home .flag {
    flex: none;
    width: 36px;
    height: 36px;
  }

  .home .halves {
    flex-direction: column;
    gap: 3px;
  }

  .home .half {
    min-height: 34vh;
    padding: 9% 8%;
  }

  .home, .home .halves, .home .half {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .home .half:before, .home .half:after {
    left: 0;
    right: 0;
  }

  .ri2back, .back, .mosaicback {
    left: max(14px, env(safe-area-inset-left));
    bottom: calc(14px + env(safe-area-inset-bottom));
    width: 52px;
    height: 52px;
    position: fixed;
  }

  .ri2back svg, .back svg, .mosaicback svg {
    width: 26px;
    height: 26px;
  }

  .ri2next.ri2arrow {
    left: auto;
    right: max(14px, env(safe-area-inset-right));
    bottom: calc(14px + env(safe-area-inset-bottom));
    color: #fff;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: #0f172a8c;
    justify-content: center;
    min-width: 0;
    position: fixed;
    box-shadow: 0 8px 24px #0000004d;
  }

  .ri2next.ri2arrow:hover {
    background: #0f172ab8;
  }

  html[lang="ar"] .ri2next.ri2arrow {
    right: auto;
    left: max(14px, env(safe-area-inset-left));
  }

  html[lang="ar"] .ri2back, html[lang="ar"] .back, html[lang="ar"] .mosaicback {
    left: auto;
    right: max(14px, env(safe-area-inset-right));
  }

  .ri2next.ri2arrow:focus-visible, .ri2back:focus-visible, .back:focus-visible, .mosaicback:focus-visible, .menuskip:focus-visible, .id2askbtn:focus-visible {
    outline-offset: 3px;
    outline: 2px solid #fff;
  }

  .ri2next:not(.ri2arrow) {
    min-width: 0;
    max-width: calc(100vw - 96px);
    height: 52px;
    padding: 0 22px;
    font-size: 16px;
  }

  .menup .menubar {
    left: 0;
    right: 0;
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 21;
    pointer-events: none;
    background: none;
    border-top: 0;
    justify-content: center;
    align-items: center;
    gap: 10px;
    height: 52px;
    margin: 0;
    padding: 0 78px;
    position: fixed;
  }

  .menup .menubar > * {
    pointer-events: auto;
  }

  .menup .menubar .menutotal {
    white-space: nowrap;
    text-align: center;
    font-size: 14px;
  }

  .menup .menubar .menubarright {
    flex: none;
    align-items: center;
    display: flex;
  }

  .menup .menubar .menuskip {
    border-radius: 12px;
    height: 48px;
    padding: 0 22px;
    font-size: 16px;
  }

  .menup .menuscroll {
    padding-bottom: calc(160px + env(safe-area-inset-bottom));
  }

  .menup:after {
    content: "";
    z-index: 15;
    pointer-events: none;
    background: linear-gradient(#080b1400 0%, #080b14db 58%, #080b14f7 100%);
    height: 170px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .menup .menubar, .menup .menustatic {
    z-index: 21;
  }

  .mitem .mi-qty button, .revp .revstepbtn {
    width: 44px;
    height: 44px;
  }

  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .idpage2.detp, .idpage2.whenp {
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }

  .revp .revnote {
    z-index: auto;
    max-width: min(94vw, 480px);
    height: auto;
    margin: 8px auto 4px;
    padding: 4px 20px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    position: static;
    bottom: auto;
    left: auto;
    right: auto;
  }

  html[lang="ar"] .revp .revnote {
    font-size: 14.5px;
  }

  .whencharge {
    white-space: normal;
    width: fit-content;
    max-width: 92vw;
    margin: 0 auto 10px;
    padding: 8px 16px;
    font-size: 12.5px;
    line-height: 1.4;
    position: static;
    inset: auto;
    transform: none;
  }

  .detp .whentitle {
    z-index: auto;
    text-align: center;
    width: min(94vw, 480px);
    margin: 4px auto 2px;
    padding-bottom: 10px;
    font-size: clamp(22px, 6vw, 30px);
    position: relative;
    top: auto;
    left: auto;
    right: auto;
  }

  .detp .whentitle:after, html[lang="ar"] .whenp .whentitle:after, html[lang="ar"] .detp .whentitle:after {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .detrows {
    width: min(94vw, 480px);
    min-width: 0;
    max-width: 94vw;
    max-height: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: none;
    border: 0;
    margin: 10px auto 0;
    padding: 4px 18px 16px;
    position: static;
    top: auto;
    left: auto;
    right: auto;
    overflow: visible;
    transform: none;
  }

  .detrow {
    column-gap: 0;
    padding: 14px 0;
    display: block;
  }

  .detrow:has(.detval) {
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: baseline;
    gap: 10px;
    display: flex;
  }

  .detrow:has(.detval) .detlabel {
    flex: none;
    margin-bottom: 0;
  }

  .detrow:has(.detval) .detval {
    flex: 0 auto;
  }

  .detlabel {
    margin-bottom: 10px;
    font-size: 16px;
  }

  .detval {
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    display: flex;
  }

  .detwhen {
    white-space: normal;
    font-size: 18px;
  }

  .detchips {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    display: grid;
  }

  .detchips.small {
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    max-width: none;
  }

  .detchip {
    width: 100%;
    min-width: 0;
    padding: 14px 8px;
  }

  .detchip.sm {
    width: 100%;
    min-width: 0;
  }

  .detrow > .detchips {
    flex-wrap: nowrap;
    gap: 8px;
    display: flex;
  }

  .detrow > .detchips .detchip {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding: 14px 6px;
  }

  .whenrow {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    width: min(94vw, 480px);
    margin: 12px auto 0;
    padding-bottom: 16px;
    position: static;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
  }

  html[lang="ar"] .whenrow {
    left: auto;
    right: auto;
    transform: none;
  }

  .whencols {
    flex-direction: column;
    gap: 12px;
  }

  .idpage2.wlm {
    height: 100dvh;
    overflow-y: auto;
  }

  .wlm {
    align-content: start;
    align-items: start;
  }

  .wlmleft {
    place-self: start stretch;
    max-width: none;
    padding: 1.5vh 20px 1vh;
  }

  .wlmright {
    text-align: center;
    border-top: 1px solid #ffffff1f;
    border-left: 0;
    justify-content: flex-start;
    align-items: center;
    padding: 2vh 20px 56px;
  }

  .wlmright .id2askq {
    margin: 0 0 20px;
    font-size: clamp(20px, 5.5vw, 27px);
  }

  .wlmright .id2askbtns {
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }

  .id2askbtn {
    width: 100%;
    padding: 15px 20px;
    font-size: 17px;
  }
}

@media (max-width: 560px) {
  .confirm2 .c2card {
    padding: 30px 20px 26px;
  }

  .confirm2 .c2actions {
    flex-direction: column-reverse;
  }

  .confirm2 .c2done, .confirm2 .c2new {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .idpage2 {
    padding: 20px 16px;
  }

  .id2keypad button {
    font-size: 22px;
  }

  .langtoggle, .langflag {
    width: 40px;
    height: 40px;
  }
}

/* [project]/app/honeymoon.css [app-client] (css) */
.hm-choice b {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.hm-choice b svg {
  color: var(--hm-gold, #e3b48c);
  flex: none;
}

.hmcard:focus-visible, .hm-tile:focus-visible, .hm-optchip:focus-visible, .hm-timeslot:focus-visible, .hm-daychip:focus-visible {
  outline-offset: 3px;
  outline: 2px solid #f2c4cd;
}

.hm-optchip {
  min-height: 44px;
}

.hm-optlabel {
  color: #ffffffb8;
}

.hm-tile-sub {
  color: #ffffffbd;
}

.hmmenu .mi-desc {
  color: #ffffffbf;
}

.hm-locnote {
  color: #ffffffd9;
}

.hm-title {
  background: linear-gradient(#fff 0%, #ffe9ee 52%, #f4c8d2 100%);
  color: #0000;
  letter-spacing: -.005em;
  text-wrap: balance;
  filter: drop-shadow(0 3px 22px #e58a9a47);
  -webkit-background-clip: text;
  background-clip: text;
}

.hm-accent {
  position: relative;
  background: none !important;
  border-radius: 0 !important;
  width: clamp(150px, 22vw, 210px) !important;
  height: 12px !important;
  margin: 15px auto 18px !important;
}

.hm-accent:before {
  content: "";
  background: linear-gradient(90deg, #0000, #e3b48cbf 24%, #e58a9abf 50%, #e3b48cbf 76%, #0000);
  width: 100%;
  height: 1.5px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.hm-accent:after {
  content: "";
  background: var(--hm-rose, #e58a9a);
  width: 8px;
  height: 8px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)rotate(45deg);
  box-shadow: 0 0 10px #e58a9ab3;
}

.hm-locnote {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: var(--hm-gold, #e3b48c);
  background: #e3b48c1a;
  border: 1px solid #e3b48c6b;
  border-radius: 999px;
  padding: 6px 15px 6px 13px;
  font-weight: 600;
}

.hm-locnote .hm-inlineico {
  opacity: .9;
}

.hm-tile {
  text-align: start;
}

.hm-tile-body {
  align-items: flex-start;
}

.hm-tile-title, .hm-tile-sub {
  text-align: start;
  width: 100%;
}

.hm-logo, .hm-locnote {
  align-items: center;
  gap: 7px;
  display: inline-flex;
}

.hm-inlineico {
  flex: none;
}

.hm-tile-ico svg {
  display: block;
}

.hm-momentslogo {
  object-fit: contain;
  filter: drop-shadow(0 3px 14px #0000004d);
  width: auto;
  max-width: 82vw;
  height: clamp(120px, 15vw, 200px);
  margin: 0 auto 6px;
  display: block;
}

.hm-pagelogo {
  object-fit: contain;
  filter: drop-shadow(0 3px 14px #00000047);
  width: auto;
  max-width: 80vw;
  height: clamp(112px, 14vw, 172px);
  margin: 0 auto 4px;
  display: block;
}

.hmmoments, .hm-decor {
  isolation: isolate;
  position: relative;
}

.hmmoments:before, .hmmoments:after, .hm-decor:before, .hm-decor:after {
  content: "";
  pointer-events: none;
  z-index: -1;
  filter: blur(72px);
  border-radius: 999px;
  position: absolute;
}

.hmmoments:before, .hm-decor:before {
  background: radial-gradient(circle, #e58a9a61, #0000 68%);
  width: 360px;
  height: 360px;
  animation: 15s ease-in-out infinite hm-orb1;
  top: 6%;
  left: -7%;
}

.hmmoments:after, .hm-decor:after {
  background: radial-gradient(circle, #e3b48c4d, #0000 68%);
  width: 320px;
  height: 320px;
  animation: 18s ease-in-out infinite hm-orb2;
  bottom: 4%;
  right: -6%;
}

@keyframes hm-orb1 {
  0%, 100% {
    transform: translate(0);
  }

  50% {
    transform: translate(34px, 26px);
  }
}

@keyframes hm-orb2 {
  0%, 100% {
    transform: translate(0);
  }

  50% {
    transform: translate(-28px, -20px);
  }
}

.hm-petals {
  pointer-events: none;
  inset: 0;
  overflow: hidden;
  z-index: -1 !important;
  position: absolute !important;
}

.hm-petal {
  color: #e58a9a73;
  top: 100%;
  left: calc(1% + var(--i) * 5%);
  animation: 14s linear infinite hm-rise;
  animation-delay: calc(var(--i) * -.9s);
  animation-duration: calc(11s + var(--i) * .4s);
  position: absolute;
}

.hm-petal:nth-child(2n) {
  color: #e3b48c57;
}

.hm-stars {
  pointer-events: none;
  z-index: -1;
  background-image: radial-gradient(1.6px 1.6px at 15% 22%, #ffffffb3, #0000), radial-gradient(1.6px 1.6px at 82% 28%, #ffece799, #0000), radial-gradient(1.4px 1.4px at 42% 12%, #ffffff8c, #0000), radial-gradient(1.9px 1.9px at 68% 66%, #e3b48c99, #0000), radial-gradient(1.4px 1.4px at 25% 74%, #ffffff8c, #0000), radial-gradient(1.7px 1.7px at 90% 80%, #e58a9a99, #0000), radial-gradient(1.4px 1.4px at 8% 52%, #ffece780, #0000), radial-gradient(1.6px 1.6px at 55% 88%, #ffffff8c, #0000), radial-gradient(1.5px 1.5px at 34% 44%, #e3b48c80, #0000), radial-gradient(1.5px 1.5px at 76% 48%, #ffffff80, #0000);
  animation: 4.5s ease-in-out infinite hm-twinkle;
  position: absolute;
  inset: 0;
}

@keyframes hm-twinkle {
  0%, 100% {
    opacity: .45;
  }

  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hm-stars {
    opacity: .6;
    animation: none;
  }
}

@keyframes hm-rise {
  0% {
    opacity: 0;
    transform: translateY(0)rotate(0)scale(.9);
  }

  12% {
    opacity: .5;
  }

  88% {
    opacity: .5;
  }

  100% {
    opacity: 0;
    transform: translateY(-112vh)translateX(28px)rotate(45deg)scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hmmoments:before, .hmmoments:after, .hm-decor:before, .hm-decor:after {
    animation: none;
  }

  .hm-petal {
    animation: none;
    display: none;
  }
}

.idpage2.hmmoments {
  padding-top: max(2.5vh, 16px) !important;
}

.hmmoments .hm-momentslogo {
  margin-top: 0;
}

.hm-greet {
  letter-spacing: .04em;
  color: #e58a9a;
  margin: 4px auto 2px;
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 500;
}

.hm-couple {
  direction: ltr;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 4px auto 14px;
  display: inline-flex;
}

.hm-couple-name {
  color: #fff;
  letter-spacing: .01em;
  text-shadow: 0 2px 22px #e58a9a73;
  font-size: clamp(19px, 2.3vw, 31px);
  font-weight: 700;
}

.hm-couple-heart {
  color: #e58a9a;
  filter: drop-shadow(0 0 9px #e58a9a99);
  transform-origin: center;
  flex: none;
  animation: 1.5s ease-in-out infinite hm-heartbeat;
}

@media (prefers-reduced-motion: reduce) {
  .hm-couple-heart {
    animation: none;
  }
}

.hm-welcome-msg {
  text-align: center;
  max-width: 62ch;
  color: var(--hm-soft, #d8c3bb);
  margin: 0 auto 26px;
  font-size: clamp(13.5px, 1.25vw, 16px);
  line-height: 1.6;
}

html[lang="ar"] .hm-welcome-msg {
  font-size: clamp(15px, 1.35vw, 17.5px);
  line-height: 1.85;
}

.hm-momentcards {
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  width: min(94vw, 720px);
  margin: 8px auto 0;
  display: grid;
}

.hm-mcard {
  text-align: center;
  color: #fff;
  font: inherit;
  cursor: pointer;
  background: linear-gradient(160deg, #ffffff0f, #e58a9a0f);
  border: 1px solid #e58a9a52;
  border-radius: 20px;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 26px 20px 20px;
  transition: transform .16s, box-shadow .22s, border-color .2s;
  display: flex;
  position: relative;
  box-shadow: 0 8px 26px #00000038;
}

.hm-mcard:hover {
  border-color: #e58a9a99;
  transform: translateY(-3px);
  box-shadow: 0 16px 38px #00000052;
}

.hm-mcard:active {
  transform: scale(.99);
}

.hm-mcard:disabled {
  cursor: default;
}

.hm-mcard.done {
  opacity: .82;
}

.hm-mcard:focus-visible {
  outline-offset: 3px;
  outline: 2px solid #f2c4cd;
}

.hm-mcard-emblem {
  width: 78px;
  height: 78px;
  color: var(--hm-gold, #e3b48c);
  background: #e3b48c14;
  border: 1.5px solid #e3b48c80;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  margin-bottom: 2px;
  display: flex;
}

.hm-mcard-name {
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 700;
  line-height: 1.15;
}

.hm-mcard-desc {
  color: #ffffffbd;
  max-width: 28ch;
  font-size: clamp(12.5px, 1.1vw, 14px);
  line-height: 1.5;
}

.hm-mcard-loc {
  color: var(--hm-gold, #e3b48c);
  direction: ltr;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
}

.hm-mcard-loc svg {
  flex: none;
}

html[lang="ar"] .hm-mcard-loc {
  direction: rtl;
}

.hm-mcard-status {
  margin-top: 4px;
}

.hm-vcard {
  justify-content: center;
  gap: 14px;
  min-height: 180px;
}

.hm-vcard-logo {
  object-fit: contain;
  filter: drop-shadow(0 4px 14px #00000047);
  width: auto;
  max-width: 88%;
  height: clamp(88px, 12vw, 128px);
}

@media (max-width: 640px) {
  .hm-momentcards {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .hm-mcard {
    padding: 22px 18px 18px;
  }
}

html[lang="ar"] .hmcard-sub {
  font-size: 14px;
}

html[lang="ar"] .hmcard-title {
  font-size: 17px;
}

@keyframes hm-heartbeat {
  0%, 100% {
    transform: scale(1);
  }

  14% {
    transform: scale(1.22);
  }

  28% {
    transform: scale(1);
  }

  42% {
    transform: scale(1.14);
  }

  56% {
    transform: scale(1);
  }
}

.hmcard-ico svg {
  transform-origin: center;
  animation: 1.6s ease-in-out infinite hm-heartbeat;
}

.hmcard:hover .hmcard-ico svg {
  animation-duration: 1.1s;
}

@media (prefers-reduced-motion: reduce) {
  .hmcard-ico svg {
    animation: none;
  }
}

.hmcard {
  isolation: isolate;
}

.hmcard:after {
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, #0000, #ffffff21, #0000);
  width: 40%;
  animation: 5s ease-in-out infinite hm-shine;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -55%;
  transform: skewX(-18deg);
}

@keyframes hm-shine {
  0%, 62% {
    left: -55%;
  }

  100% {
    left: 130%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hmcard:after {
    opacity: 0;
    animation: none;
  }
}

@media (max-width: 820px) {
  .hmwhen .steplogo, .hmmenu .steplogo, .hmreview .steplogo {
    height: clamp(74px, 20vw, 118px);
    margin: 0 auto 6px;
    position: static;
    top: auto;
    left: auto;
    transform: none;
  }

  .hmp.hmwhen, .idpage2.hmwhen {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: max(2vh, 16px) 4vw 132px;
    display: flex;
    overflow-y: auto;
  }

  .hmwhen .whentitle {
    text-align: center;
    margin: 8px auto 20px;
    font-size: clamp(22px, 6.5vw, 34px);
    position: static;
    top: auto;
    left: auto;
    right: auto;
  }

  .hmwhen .whentitle:after {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .hm-whenbox {
    width: min(96vw, 560px);
    margin: 0 auto;
    position: static;
    top: auto;
    left: auto;
    transform: none;
  }

  .hm-daychips {
    justify-content: center;
  }

  .hm-daychip {
    padding: 6px 14px;
  }

  .hm-daychip-dom {
    font-size: clamp(30px, 10vw, 46px);
  }

  .hm-timerow {
    justify-content: center;
  }

  .hm-timeslot {
    flex: 21%;
    min-width: 0;
    padding: 13px 4px;
    font-size: clamp(16px, 5vw, 24px);
  }

  .hmmenu.menup, .idpage2.hmmenu {
    padding: 0;
  }

  .hmmenu .menuhead {
    position: static;
  }

  .hmmenu .whentitle {
    text-align: center;
    margin: 6px auto 16px;
    font-size: clamp(20px, 6vw, 30px);
    position: static;
    top: auto;
    left: auto;
    right: auto;
  }

  .hmmenu .whentitle:after {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .hmmenu .menuscroll {
    padding-top: 2vh;
  }

  .hmmenu .hm-cols {
    flex-direction: column;
    gap: 0;
  }

  .hmmenu .hm-col {
    width: 100%;
  }

  .hmreview {
    flex-direction: column;
    align-items: center;
    padding: max(2vh, 16px) 4vw 132px;
    display: flex;
    overflow-y: auto;
  }

  .hmreview .whentitle {
    text-align: center;
    margin: 8px auto;
    font-size: clamp(22px, 6.5vw, 34px);
    position: static;
    top: auto;
    left: auto;
    right: auto;
  }

  .hmreview .whentitle:after {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .hmreview .revnote {
    text-align: center;
    margin: 0 auto 14px;
    position: static;
    top: auto;
    left: auto;
    right: auto;
  }

  .hmreview .detrows {
    width: min(96vw, 560px);
    min-width: 0;
    max-width: 96vw;
    max-height: none;
    margin: 0 auto;
    padding: 4px 20px;
    position: static;
    top: auto;
    left: auto;
    right: auto;
  }

  .hmreview .detrow {
    grid-template-columns: minmax(90px, auto) 1fr;
    column-gap: 16px;
  }

  .hmreview .detval {
    text-align: end;
    justify-content: flex-end;
  }

  .hm-summary, .hm-choices {
    width: min(96vw, 460px);
  }
}

@media (max-width: 430px) {
  .hm-timeslot {
    flex: 44%;
  }

  .hmreview .detrow {
    grid-template-columns: 1fr;
    row-gap: 2px;
    padding: 8px 0;
  }

  .hmreview .detval {
    text-align: start;
    justify-content: flex-start;
  }
}

@media (max-height: 560px) and (min-width: 821px) {
  .hm-whenbox {
    top: 24vh;
  }

  .hmmenu .menuscroll {
    padding-top: 20vh;
  }
}

.ri2back, .ri2next.ri2arrow {
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
  color: #fff !important;
  direction: ltr !important;
  background: #ffffff1a !important;
  border: 1px solid #ffffff3d !important;
  border-radius: 12px !important;
  gap: 5px !important;
  width: auto !important;
  min-width: 0 !important;
  height: 46px !important;
  padding: 0 13px !important;
  font-size: 16.5px !important;
  font-weight: 600 !important;
  box-shadow: 0 3px 12px #0003 !important;
}

.ri2back svg, .ri2next.ri2arrow svg {
  stroke-width: 2.25px !important;
  width: 1em !important;
  height: 1em !important;
}

.ri2next.ri2arrow:not(:disabled) {
  color: #fff !important;
  background: #ffffff1a !important;
  border-color: #ffffff3d !important;
}

.ri2next.ri2arrow:after {
  content: "" !important;
  background: currentColor !important;
  flex: none !important;
  width: 1em !important;
  height: 1em !important;
  display: inline-block !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012h14'/%3E%3Cpath%20d='m12%205%207%207-7%207'/%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012h14'/%3E%3Cpath%20d='m12%205%207%207-7%207'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.ri2back:hover, .ri2next.ri2arrow:hover:not(:disabled) {
  background: #fff3 !important;
  border-color: #ffffff6b !important;
}

.ri2next.ri2arrow:disabled {
  opacity: 1 !important;
  color: #ffffff9e !important;
  cursor: not-allowed !important;
  background: #ffffff0f !important;
  border-color: #ffffff2e !important;
}

html[lang="ar"] .ri2next.ri2arrow:after {
  transform: scaleX(-1) !important;
}

html[lang="ar"] .ri2back {
  left: max(24px, env(safe-area-inset-left)) !important;
  right: auto !important;
}

html[lang="ar"] .ri2next.ri2arrow {
  right: max(24px, env(safe-area-inset-right)) !important;
  left: auto !important;
}

html[lang="ar"] .ri2back svg, html[lang="ar"] .ri2next.ri2arrow:after {
  transform: none !important;
}

.hm-go svg {
  display: block;
}

html[lang="ar"] .hm-go svg {
  transform: scaleX(-1);
}

/*# sourceMappingURL=app_1nj19s4._.css.map*/