:root { --touch: 56px; }
.touch-btn { min-height: var(--touch); font-size: 1.1rem; }
.site-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; grid-auto-rows: 1fr; }
.kiosk-frame { width: 100%; height: calc(100vh - 76px); border: 0; }
.topbar { position: sticky; top: 0; z-index: 1000; background: #fff; border-bottom: 1px solid #eaeaea; }
/* --- Kiosk home (interface borne) --- */
.kiosk-home { user-select: none; }
.kiosk-shell { min-height: 100vh; display: flex; flex-direction: column; }
.kiosk-top { position: sticky; top: 0; z-index: 1000; background: rgba(255,255,255,.92); backdrop-filter: blur(6px); }
.kiosk-title { font-size: 1.15rem; font-weight: 700; letter-spacing: .2px; }
.kiosk-subtitle { font-size: .95rem; }
.kiosk-clock { font-size: 1.25rem; font-weight: 700; line-height: 1; }
.kiosk-date { font-size: .9rem; }
.brand-mark {
  width: 48px; height: 48px; border-radius: 16px;
  display: grid; place-items: center;
  background: #0d6efd; color: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.10);
}
.kiosk-panel {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.kiosk-alert { border-radius: 16px; }
.kiosk-grid { gap: 16px; }
.site-card {
  display: block;
  text-decoration: none;
  border: 1px solid #e9ecef;
  background: #fff;
  border-radius: 18px;
  padding: 0;
  box-shadow: 0 10px 26px rgba(0,0,0,.05);
  transition: transform .06s ease, box-shadow .12s ease, border-color .12s ease;
}
.site-card:active { transform: scale(.99); }
.site-card:hover { border-color: #d9e6ff; box-shadow: 0 14px 34px rgba(0,0,0,.08); }
.site-card-inner {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 16px;
  min-height: 96px;
}
.site-icon {
  width: 56px; height: 56px;
  border-radius: 18px;
  display: grid; place-items: center;
  background: #f1f5ff;
  color: #0d6efd;
  font-weight: 800;
  font-size: 1.25rem;
}
.site-title { font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.site-url { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; }
.site-cta { display: flex; align-items: center; justify-content: end; }

/* Touch comfort */
.touch-btn, .btn, .form-control { touch-action: manipulation; }
@media (max-width: 576px) {
  .site-card-inner { grid-template-columns: 52px 1fr; grid-template-areas: "icon content" "cta cta"; }
  .site-cta { justify-content: start; padding-top: 6px; }
  .site-url { max-width: 78vw; }
}
/* --- Kiosk UI fixes: sizing + touch comfort --- */
.site-card { height: 100%; }
.site-card-inner { height: 100%; }
.site-content { min-width: 0; }
.site-url { max-width: 100%; }

/* Make CTA button more touch-friendly */
.site-cta .btn { font-size: 1rem; padding: .55rem 1rem; border-radius: 999px; }

/* Small screens: stack CTA full width */
@media (max-width: 576px) {
  .site-card-inner { grid-template-columns: 52px 1fr; }
  .site-cta { grid-column: 1 / -1; justify-content: stretch; }
  .site-cta .btn { width: 100%; }
}

/* Very large screens: slightly bigger cards */
@media (min-width: 1200px) {
  .site-grid { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
  .site-card-inner { min-height: 110px; }
}