:root {
  --sm-primary: #3A9E74;
  --sm-primary-dark: #27724F;
  --sm-text: #111;
  --sm-muted: #9aa0a6;
  --sm-line: #d4d8dc;
  --sm-bg: #fff;
  --sm-soft: #f1f6f3;
}
@media (prefers-color-scheme: dark) {
  body.sm-app { --sm-text: #f2f3f4; --sm-muted: #8b9197; --sm-line: #3a3f44; --sm-bg: #16191b; --sm-soft: #1f2a25; }
}
/* Regole generali solo per la vista app a tutto schermo (body.sm-app): non devono toccare il tema */
.sm-root, .sm-root * { box-sizing: border-box; }
body.sm-app {
  -webkit-text-size-adjust: 100%;
  margin: 0;
  background: var(--sm-bg);
  color: var(--sm-text);
  font: 17px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.sm-wrap { max-width: 520px; margin: 0 auto; padding: 0 20px 32px; min-height: 100vh; }

.sm-head { padding: 22px 0 4px; text-align: center; }
.sm-school { font-weight: 700; font-size: 15px; color: var(--sm-primary-dark); }
.sm-kicker { font-size: 13px; color: var(--sm-muted); }
@media (prefers-color-scheme: dark) { .sm-school { color: var(--sm-primary); } }

.sm-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.sm-arrow {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--sm-line); background: var(--sm-bg); color: var(--sm-text);
  font-size: 30px; line-height: 1; padding: 0 0 4px; cursor: pointer;
}
.sm-arrow:active { background: var(--sm-soft); }
.sm-date { position: relative; flex: 1; text-align: center; font-weight: 700; font-size: 22px; cursor: pointer; padding: 8px 0; }
.sm-date span { border-bottom: 2px dotted var(--sm-primary); }
.sm-date input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.sm-sub { min-height: 36px; margin: 6px 0 10px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--sm-muted); }
.sm-chip {
  border: 0; border-radius: 999px; background: var(--sm-primary); color: #fff;
  font: inherit; font-size: 14px; padding: 6px 14px; cursor: pointer;
}

.sm-card { border-top: 1px solid var(--sm-line); padding-top: 18px; transition: opacity .15s; }
#sm-app.loading .sm-card { opacity: .35; }
.sm-row { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.sm-ico {
  flex: none; width: 64px; height: 64px; border-radius: 50%;
  border: 1.5px solid var(--sm-line); background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.sm-ico img { width: 80%; height: 80%; object-fit: contain; }
.sm-course { color: var(--sm-muted); font-size: 18px; }
.sm-dish { font-size: 20px; }
.sm-all { margin-top: 2px; font-size: 13px; color: var(--sm-muted); }
.sm-note { background: var(--sm-soft); border-radius: 10px; padding: 10px 14px; font-size: 15px; margin: 4px 0 0; }
.sm-msg { text-align: center; padding: 36px 8px; }
.sm-msg strong { font-size: 20px; }
.sm-msg p { color: var(--sm-muted); margin: 10px 0 0; }
.sm-big { font-size: 56px; line-height: 1.2; }
.sm-err { background: #fdecea; color: #8a1c13; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 15px; }
.sm-info { background: var(--sm-soft); border-radius: 10px; padding: 10px 14px; margin: 8px 0 0; font-size: 15px; text-align: center; }
.sm-foot { margin-top: 28px; text-align: center; font-size: 12px; color: var(--sm-muted); }

/* Vista incastonata nel layout del sito (desktop) */
.sm-embedwrap { width: 80%; margin: 0 auto; }
.sm-embed { max-width: 560px; margin: 0 auto 30px; color: var(--sm-text); font-size: 17px; line-height: 1.4; }
.sm-embed .sm-arrow, .sm-embed .sm-chip { text-transform: none; letter-spacing: normal; box-shadow: none; }
.sm-embed .sm-arrow { background: var(--sm-bg); color: var(--sm-text); border: 1px solid var(--sm-line); }
.sm-embed .sm-chip { background: var(--sm-primary); color: #fff; border: 0; }
.sm-embed .sm-sub, .sm-embed .sm-msg p { color: var(--sm-muted); }