/* ============================================================
   Kades Cup Bentar — jadwal, klasemen, top skor
   Layout mengikuti referensi app skor: dasar putih, kartu
   membulat, bottom navbar. Aksen merah tua & kuning tua.
   Semua kelas & variabel diawali prefix "kiosweb-"
   ============================================================ */

:root {
  /* Latar layar putih keabu (#F8F8F8 seperti referensi), kartu putih murni.
     --kiosweb-fill untuk isian bulat (logo tim, avatar) supaya tetap kebaca
     di atas latar yang sudah abu. */
  --kiosweb-bg: #F8F8F8;
  --kiosweb-page: #EDEDEF;
  --kiosweb-fill: #F0F0F2;
  --kiosweb-surface: #FFFFFF;
  --kiosweb-ink: #17181C;
  --kiosweb-ink-2: #71747C;
  --kiosweb-ink-3: #A0A3AB;
  --kiosweb-line: #EDEEF1;

  --kiosweb-red: #8E1220;
  --kiosweb-red-dark: #3F0710;
  --kiosweb-gold: #B8860B;
  --kiosweb-gold-light: #F0C24B;
  --kiosweb-blue: #1D4ED8;

  --kiosweb-radius: 22px;
  --kiosweb-radius-sm: 16px;
  --kiosweb-shadow: 0 1px 2px rgba(23, 24, 28, .04), 0 14px 30px -22px rgba(23, 24, 28, .4);

  --kiosweb-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--kiosweb-page);
  color: var(--kiosweb-ink);
  font-family: var(--kiosweb-font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

.kiosweb-app {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 0 18px calc(104px + env(safe-area-inset-bottom));
  background: var(--kiosweb-bg);
}

.kiosweb-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

:where(a, button, label, summary):focus-visible {
  outline: 2px solid var(--kiosweb-red);
  outline-offset: 2px;
  border-radius: 10px;
}

.kiosweb-app > input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}

/* ---------- Header ---------- */

.kiosweb-header {
  padding: 20px 0 16px;
  text-align: center;
}

.kiosweb-title {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
}

/* ---------- Baris tanggal + strip hari ---------- */

.kiosweb-datebar {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--kiosweb-ink-2);
}

/* 7 hari sekaligus: tanggal aktif selalu jatuh di kolom tengah. */
.kiosweb-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  padding-bottom: 4px;
}

.kiosweb-day {
  min-width: 0;
  padding: 8px 2px 9px;
  text-align: center;
  text-decoration: none;
  border-radius: 14px;
}

.kiosweb-day-name {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--kiosweb-ink-3);
}

.kiosweb-day-num {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  font-weight: 700;
  color: var(--kiosweb-ink);
  font-variant-numeric: tabular-nums;
}

.kiosweb-day.kiosweb-is-active { background: var(--kiosweb-red); }
.kiosweb-day.kiosweb-is-active .kiosweb-day-name { color: rgba(255, 255, 255, .72); }
.kiosweb-day.kiosweb-is-active .kiosweb-day-num { color: #fff; }

/* ---------- Judul bagian ---------- */

.kiosweb-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 22px 0 12px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.kiosweb-section-title small {
  font-size: 12px;
  font-weight: 600;
  color: var(--kiosweb-ink-3);
}

.kiosweb-section-title a {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--kiosweb-red);
  text-decoration: none;
}

/* ---------- Kartu laga berjalan ---------- */

.kiosweb-board {
  position: relative;
  padding: 20px 18px 20px;
  color: #fff;
  border-radius: var(--kiosweb-radius);
  overflow: hidden;
  background: linear-gradient(150deg, #7C101D 0%, var(--kiosweb-red-dark) 100%);
}

.kiosweb-board::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 8%, rgba(255, 255, 255, .10), transparent 38%),
    radial-gradient(circle at 12% 96%, rgba(240, 194, 75, .12), transparent 42%);
  pointer-events: none;
}

/* Siluet bola, pengganti logo liga yang jadi motif kartu di referensi. */
.kiosweb-board::after {
  content: "";
  position: absolute;
  top: -36px; right: -40px;
  width: 196px; height: 196px;
  opacity: .07;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23fff' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='50' cy='50' r='46'/%3E%3Cpath d='M50 34L65.2 45.05L59.4 62.95H40.6L34.8 45.05Z' fill='%23fff'/%3E%3Cpath d='M50 34V4M65.2 45.05L94 35.7M59.4 62.95L77 87.2M40.6 62.95L23 87.2M34.8 45.05L6 35.7'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

.kiosweb-board-head {
  position: relative;
  text-align: center;
  margin-bottom: 18px;
}

.kiosweb-venue { font-size: 14.5px; font-weight: 700; }

.kiosweb-round {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: rgba(255, 255, 255, .6);
}

.kiosweb-board-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 12px;
}

.kiosweb-side { text-align: center; }

.kiosweb-badge {
  width: 50px; height: 50px;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 800;
  color: var(--kiosweb-red);
  background: #fff;
  border-radius: 50%;
}

.kiosweb-badge img {
  width: 100%; height: 100%;
  padding: 5px;
  object-fit: contain;
}

.kiosweb-club {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
}

/* Kolom tengah dibuat setinggi logo & nama tim, jadi skor sejajar dengan
   baris logo dan menit sejajar dengan baris nama tim. */
.kiosweb-side-score .kiosweb-score {
  height: 50px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.kiosweb-clock {
  display: block;
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--kiosweb-gold-light);
  font-variant-numeric: tabular-nums;
}

/* ---------- Daftar laga ---------- */

.kiosweb-fixtures { display: grid; gap: 10px; }

.kiosweb-fixture {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--kiosweb-surface);
  border: 1px solid var(--kiosweb-line);
  border-radius: var(--kiosweb-radius-sm);
  box-shadow: var(--kiosweb-shadow);
}

.kiosweb-fixture-team {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 700;
}

/* Nama tim panjang dibiarkan turun baris, jangan dipotong "Garuda Mu…" */
.kiosweb-fixture-team > span:first-child {
  min-width: 0;
  line-height: 1.25;
}

.kiosweb-fixture-team.kiosweb-away {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.kiosweb-dot {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--kiosweb-ink-2);
  background: var(--kiosweb-fill);
  border-radius: 50%;
  overflow: hidden;
}

.kiosweb-dot img {
  width: 100%; height: 100%;
  padding: 2px;
  object-fit: contain;
}

.kiosweb-kickoff {
  min-width: 52px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--kiosweb-gold);
  font-variant-numeric: tabular-nums;
}

.kiosweb-kickoff.kiosweb-done { color: var(--kiosweb-ink); }

/* Tanggal turun ke baris sendiri selebar kartu, jadi skor tetap sebaris
   dengan nama tim dan logo. */
.kiosweb-fixture-date {
  grid-column: 1 / -1;
  margin-top: 2px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--kiosweb-ink-3);
}

/* Kepala hari: tanggal + garis penutup, plus penanda hari ini / babak. */
.kiosweb-dayhead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--kiosweb-ink-2);
}

.kiosweb-dayhead span { flex: 0 0 auto; }

.kiosweb-dayhead::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--kiosweb-line);
}

.kiosweb-dayhead em {
  order: 3;
  flex: 0 0 auto;
  padding: 3px 9px;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--kiosweb-red);
  background: rgba(142, 18, 32, .09);
  border-radius: 999px;
}

.kiosweb-dayhead .kiosweb-tag-alt {
  color: var(--kiosweb-blue);
  background: rgba(29, 78, 216, .09);
}

/* Keterangan di bawah tiap kartu jadwal. */
.kiosweb-fixture-meta {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding-top: 9px;
  border-top: 1px solid var(--kiosweb-line);
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--kiosweb-ink-3);
}

.kiosweb-fixture-meta b {
  color: var(--kiosweb-red);
  font-weight: 700;
}

.kiosweb-fixture--live { border-left: 3px solid var(--kiosweb-red); }

/* ---------- Klasemen ---------- */

.kiosweb-card {
  background: var(--kiosweb-surface);
  border: 1px solid var(--kiosweb-line);
  border-radius: var(--kiosweb-radius-sm);
  box-shadow: var(--kiosweb-shadow);
  overflow: hidden;
}

.kiosweb-card + .kiosweb-card { margin-top: 12px; }

.kiosweb-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--kiosweb-line);
  font-size: 13.5px;
  font-weight: 800;
}

.kiosweb-group-head span {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--kiosweb-ink-3);
}

.kiosweb-table-wrap {
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.kiosweb-standings {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.kiosweb-standings th,
.kiosweb-standings td {
  padding: 11px 7px;
  text-align: center;
  white-space: nowrap;
}

.kiosweb-standings thead th {
  padding-top: 12px;
  padding-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--kiosweb-ink-3);
}

.kiosweb-standings tbody tr { border-top: 1px solid var(--kiosweb-line); }

/* Penanda nasib tim: biru = lolos, merah = tersingkir. */
.kiosweb-col-team {
  width: 100%;
  min-width: 172px;
  padding-left: 13px !important;
  text-align: left !important;
}

.kiosweb-standings tbody .kiosweb-col-team { border-left: 3px solid var(--kiosweb-red); }
.kiosweb-standings tbody .kiosweb-qualify .kiosweb-col-team { border-left-color: var(--kiosweb-blue); }

.kiosweb-team-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.kiosweb-team-logo {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  object-fit: contain;
}

.kiosweb-rank {
  flex: 0 0 auto;
  width: 18px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--kiosweb-ink-3);
  text-align: center;
}


.kiosweb-pts {
  font-weight: 800;
  padding-right: 16px !important;
}

/* Di HP kolom Mn/S/K disembunyikan supaya Poin tidak kegeser keluar kartu. */
@media (max-width: 439px) {
  .kiosweb-col-opt { display: none; }
}

.kiosweb-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 14px 2px 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--kiosweb-ink-2);
}

.kiosweb-legend span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.kiosweb-legend span::before {
  content: "";
  width: 3px; height: 14px;
  border-radius: 2px;
  background: var(--kiosweb-red);
}

.kiosweb-legend .kiosweb-lolos::before { background: var(--kiosweb-blue); }

/* ---------- Top skor ---------- */

.kiosweb-scorer-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kiosweb-scorer {
  display: grid;
  grid-template-columns: 18px 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
}

.kiosweb-scorer + .kiosweb-scorer { border-top: 1px solid var(--kiosweb-line); }

/* Foto pemain: kepalanya sengaja keluar dari lingkaran, badannya duduk
   di dalam. Kartunya pakai .kiosweb-card--open supaya tidak terpotong. */
.kiosweb-avatar {
  position: relative;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--kiosweb-ink-2);
  background: var(--kiosweb-fill);
  border-radius: 50%;
}

/* Separuh bawah foto dipangkas mengikuti lingkaran (radial), separuh atas
   dibiarkan bebas supaya kepala & bola tetap keluar. Lingkaran avatar
   44px duduk di dasar foto: pusatnya di 34px, jari-jari 22px. */
.kiosweb-avatar img {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 52px;
  height: 56px;
  max-width: none;
  object-fit: contain;
  object-position: bottom center;
  -webkit-mask-image:
    linear-gradient(#000 0 34px, transparent 34px),
    radial-gradient(circle 22px at 26px 34px, #000 99%, transparent 100%);
  mask-image:
    linear-gradient(#000 0 34px, transparent 34px),
    radial-gradient(circle 22px at 26px 34px, #000 99%, transparent 100%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

.kiosweb-card--open { overflow: visible; }

.kiosweb-scorer-name { display: block; font-size: 14px; font-weight: 700; line-height: 1.25; }
.kiosweb-scorer-club { display: block; font-size: 12px; color: var(--kiosweb-ink-2); }

.kiosweb-goals {
  font-size: 15px;
  font-weight: 800;
  color: var(--kiosweb-gold);
  font-variant-numeric: tabular-nums;
}

.kiosweb-goals small {
  font-size: 11px;
  font-weight: 600;
  color: var(--kiosweb-ink-3);
}

/* ---------- Panel ---------- */

.kiosweb-panel { display: none; }

#kiosweb-nav-beranda:checked ~ .kiosweb-panels #kiosweb-panel-beranda,
#kiosweb-nav-jadwal:checked ~ .kiosweb-panels #kiosweb-panel-jadwal,
#kiosweb-nav-klasemen:checked ~ .kiosweb-panels #kiosweb-panel-klasemen,
#kiosweb-nav-topskor:checked ~ .kiosweb-panels #kiosweb-panel-topskor { display: block; }

/* ---------- Bottom navbar ---------- */

/* Bar melayang liquid glass ala iOS, pola sama dengan kw-bnav halogameshop */
.kiosweb-bottomnav {
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 7px;
  max-width: calc(100vw - 20px);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .035)),
    rgba(19, 18, 21, .76);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, .5),
    0 2px 8px rgba(0, 0, 0, .3),
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -1px 0 rgba(255, 255, 255, .04);
  transition: padding .28s ease, gap .28s ease;
}

.kiosweb-navitem {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 58px;
  height: 48px;
  border-radius: 24px;
  cursor: pointer;
  color: rgba(255, 255, 255, .62);
  -webkit-tap-highlight-color: transparent;
  transition: color .2s ease, background .25s ease, box-shadow .25s ease,
              width .28s ease, height .28s ease,
              transform .14s cubic-bezier(.2, .7, .3, 1.4);
}

.kiosweb-navitem:active { transform: scale(.88); }

.kiosweb-navitem svg {
  width: 22px; height: 22px;
  stroke-width: 1.8;
  transition: width .28s ease, height .28s ease;
}

/* Menciut saat halaman digulir ke bawah, mengembang lagi saat digulir naik. */
.kiosweb-bottomnav--mini { padding: 4px; gap: 0; }
.kiosweb-bottomnav--mini .kiosweb-navitem { width: 46px; height: 38px; border-radius: 19px; }
.kiosweb-bottomnav--mini .kiosweb-navitem svg { width: 20px; height: 20px; }

#kiosweb-nav-beranda:checked ~ .kiosweb-bottomnav [for="kiosweb-nav-beranda"],
#kiosweb-nav-jadwal:checked ~ .kiosweb-bottomnav [for="kiosweb-nav-jadwal"],
#kiosweb-nav-klasemen:checked ~ .kiosweb-bottomnav [for="kiosweb-nav-klasemen"],
#kiosweb-nav-topskor:checked ~ .kiosweb-bottomnav [for="kiosweb-nav-topskor"] {
  color: #fff;
}

/* Tanda aktif: ikonnya berubah jadi versi terisi, bukan pakai latar pill. */
.kiosweb-navitem .kiosweb-ico-fill { display: none; }

#kiosweb-nav-beranda:checked ~ .kiosweb-bottomnav [for="kiosweb-nav-beranda"] .kiosweb-ico-line,
#kiosweb-nav-jadwal:checked ~ .kiosweb-bottomnav [for="kiosweb-nav-jadwal"] .kiosweb-ico-line,
#kiosweb-nav-klasemen:checked ~ .kiosweb-bottomnav [for="kiosweb-nav-klasemen"] .kiosweb-ico-line,
#kiosweb-nav-topskor:checked ~ .kiosweb-bottomnav [for="kiosweb-nav-topskor"] .kiosweb-ico-line { display: none; }

#kiosweb-nav-beranda:checked ~ .kiosweb-bottomnav [for="kiosweb-nav-beranda"] .kiosweb-ico-fill,
#kiosweb-nav-jadwal:checked ~ .kiosweb-bottomnav [for="kiosweb-nav-jadwal"] .kiosweb-ico-fill,
#kiosweb-nav-klasemen:checked ~ .kiosweb-bottomnav [for="kiosweb-nav-klasemen"] .kiosweb-ico-fill,
#kiosweb-nav-topskor:checked ~ .kiosweb-bottomnav [for="kiosweb-nav-topskor"] .kiosweb-ico-fill { display: block; }

#kiosweb-nav-beranda:focus-visible ~ .kiosweb-bottomnav [for="kiosweb-nav-beranda"],
#kiosweb-nav-jadwal:focus-visible ~ .kiosweb-bottomnav [for="kiosweb-nav-jadwal"],
#kiosweb-nav-klasemen:focus-visible ~ .kiosweb-bottomnav [for="kiosweb-nav-klasemen"],
#kiosweb-nav-topskor:focus-visible ~ .kiosweb-bottomnav [for="kiosweb-nav-topskor"] {
  outline: 2px solid rgba(255, 255, 255, .85);
  outline-offset: -3px;
  border-radius: 27px;
}

/* ---------- Sponsor ---------- */

.kiosweb-sponsors {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--kiosweb-line);
}

/* minmax(0,1fr) + min-width:0 — tanpa ini logo memaksa kolom selebar
   ukuran aslinya dan gridnya jebol keluar container. */
.kiosweb-sponsor-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.kiosweb-sponsor {
  min-width: 0;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  padding: 10px;
  background: var(--kiosweb-surface);
  border: 1px solid var(--kiosweb-line);
  border-radius: 12px;
}

.kiosweb-sponsor img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 359px) {
  .kiosweb-sponsor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 520px) {
  .kiosweb-app {
    margin: 20px auto;
    min-height: 0;
    border-radius: 28px;
    box-shadow: 0 30px 60px -40px rgba(23, 24, 28, .55);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ============================================================
   Penyesuaian versi aplikasi
   Di mockup keempat tab hidup dalam satu halaman (radio :checked).
   Di aplikasi tiap menu jadi halaman sendiri demi SEO, jadi panel
   selalu tampil dan status menu aktif ditandai kelas dari PHP.
   ============================================================ */

.kiosweb-panel { display: block; }

.kiosweb-bottomnav .kiosweb-navitem { text-decoration: none; }

.kiosweb-navitem.kiosweb-is-current { color: #fff; }
.kiosweb-navitem.kiosweb-is-current .kiosweb-ico-line { display: none; }
.kiosweb-navitem.kiosweb-is-current .kiosweb-ico-fill { display: block; }

.kiosweb-navitem:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .85);
  outline-offset: -3px;
  border-radius: 27px;
}

/* Hari pada strip tanggal yang tidak ada lagagnya dibuat redup, biar
   kelihatan mana yang bisa diklik. */
.kiosweb-day.kiosweb-is-empty { opacity: .38; }

.kiosweb-empty {
  margin: 14px 0;
  padding: 18px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--kiosweb-ink-2);
  background: var(--kiosweb-surface);
  border: 1px solid var(--kiosweb-line);
  border-radius: var(--kiosweb-radius-sm);
}