:root {
  color-scheme: light;
  --green-950: #133b2a;
  --green-800: #225b40;
  --green-650: #347958;
  --green-100: #e7f1ea;
  --cream: #f6f5ef;
  --paper: #ffffff;
  --ink: #1c2922;
  --muted: #607168;
  --line: #d9e0db;
  --amber: #a76511;
  --red: #a53e3e;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--cream); }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
.topbar { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 24px; color: white; background: var(--green-950); }
.brand { color: white; text-decoration: none; font-size: 19px; font-weight: 800; letter-spacing: .03em; }
.brand span { font-weight: 400; }
.role-picker { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.role-picker select { padding: 8px 32px 8px 10px; border: 1px solid #7e9b8a; border-radius: 8px; color: white; background: var(--green-800); }
.layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: calc(100vh - 64px); }
.sidebar { padding: 24px 14px; border-right: 1px solid var(--line); background: #edf1ed; }
.sidebar a { display: block; padding: 10px 12px; margin-bottom: 4px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.sidebar a.active { color: var(--green-950); background: #d3e4d8; font-weight: 700; }
.sidebar a.locked { color: #718078; background: transparent; }
.sidebar a.locked::after { content: " · bloccato"; font-size: 11px; }
main { width: 100%; max-width: 1160px; padding: 32px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 24px; }
h1 { margin: 0 0 6px; font-size: clamp(25px, 3vw, 34px); line-height: 1.1; }
h2 { margin: 0 0 14px; font-size: 18px; }
h3 { margin: 0 0 8px; font-size: 15px; }
p { color: var(--muted); }
.eyebrow { margin-bottom: 7px; color: var(--green-650); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.card { padding: 20px; border: 1px solid var(--line); border-radius: 13px; background: var(--paper); box-shadow: 0 2px 9px rgba(20, 49, 34, .04); }
.stat strong { display: block; font-size: 28px; }
.stat span { color: var(--muted); }
.primary, .secondary, .danger { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 14px; border-radius: 9px; font-weight: 700; text-decoration: none; }
.primary { border: 1px solid var(--green-800); color: white; background: var(--green-800); }
.secondary { border: 1px solid #aab8af; color: var(--ink); background: white; }
.danger { border: 1px solid #d8aaaa; color: var(--red); background: #fff7f7; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid #e8ece9; }
.row:last-child { border-bottom: 0; }
.meta { color: var(--muted); font-size: 13px; }
.badge { display: inline-block; padding: 4px 9px; border-radius: 99px; color: var(--green-950); background: var(--green-100); font-size: 12px; white-space: nowrap; }
.badge.warning { color: #734807; background: #fff0d5; }
.badge.alert { color: #832f2f; background: #fde4e4; }
.action { padding: 18px; margin-bottom: 12px; border-left: 4px solid var(--green-650); border-radius: 9px; background: var(--green-100); }
.action p { margin: 5px 0 16px; }
.progress { height: 8px; overflow: hidden; margin: 10px 0; border-radius: 99px; background: #dce4de; }
.progress span { display: block; width: var(--progress, 40%); height: 100%; background: var(--green-650); }
.timeline { padding-left: 20px; border-left: 2px solid #c7d4cb; }
.event { position: relative; padding: 0 0 22px; }
.event::before { content: ""; position: absolute; top: 4px; left: -26px; width: 10px; height: 10px; border-radius: 50%; background: var(--green-650); }
.weekly-weight { margin: 20px 0; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--green-100); }
.assessment-checklist { display: grid; gap: 6px; margin: 18px 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #f8faf8; }
.assessment-checklist legend { padding: 0 7px; font-weight: 750; }
.assessment-checklist .check { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 10px; padding: 9px 10px; border-radius: 8px; font-weight: 600; cursor: pointer; }
.assessment-checklist .check:hover { background: var(--green-100); }
.assessment-checklist .check input { width: 20px; height: 20px; margin: 1px 0 0; padding: 0; }
.assessment-checklist .check span { line-height: 1.35; }
.login-card { max-width: 520px; margin: 40px auto; }
.questionnaire { display: grid; gap: 16px; }
.questionnaire details summary { cursor: pointer; font-size: 18px; font-weight: 750; }
.questionnaire details[open] summary { margin-bottom: 18px; }
.questionnaire fieldset { margin: 16px 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
.questionnaire legend { padding: 0 6px; font-weight: 650; }
.sticky-actions { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.96); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
label { color: var(--ink); font-weight: 600; }
input, select, textarea { width: 100%; padding: 10px 11px; margin-top: 6px; border: 1px solid #afbbb3; border-radius: 8px; color: var(--ink); background: white; }
textarea { min-height: 88px; resize: vertical; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
.choices label { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-weight: 400; }
.choices input { width: auto; margin: 0; }
.button-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.empty { padding: 28px; text-align: center; border: 1px dashed #aab8af; border-radius: 10px; color: var(--muted); }
hr { margin: 22px 0; border: 0; border-top: 1px solid var(--line); }
.guide { margin-bottom: 18px; }
.guide ol { display: grid; gap: 10px; padding-left: 24px; }
.guide li { padding-left: 6px; }
.guide li strong, .guide li span { display: block; }
.guide li span, .card li { color: var(--muted); line-height: 1.5; }
.review-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 12px 16px; border: 1px solid #d7b66d; border-radius: 14px; background: #fff5dc; color: #624a17; }
.review-banner span { color: #786231; }
@media (max-width: 640px) { .review-banner { align-items: flex-start; flex-direction: column; gap: 4px; } }
.card ul { padding-left: 22px; }
.card ul li { margin-bottom: 8px; }
.diary-preview { margin-top: 18px; }
.questionnaire-review { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.questionnaire-review > div { padding: 13px 0; border-bottom: 1px solid #e8ece9; }
.questionnaire-review p { margin: 5px 0 0; white-space: pre-wrap; }
.scale-tip { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 24px; margin-bottom: 18px; background: var(--green-100); }
.scale-tip p { margin-bottom: 0; }
.scale-tip details { align-self: center; padding: 13px; border: 1px solid #bfd1c4; border-radius: 10px; background: rgba(255,255,255,.7); }
.scale-tip summary { cursor: pointer; font-weight: 750; }
.scale-tip ul { margin-bottom: 0; }
.toast { position: fixed; right: 20px; bottom: 20px; max-width: 340px; padding: 12px 16px; border-radius: 9px; color: white; background: var(--green-950); opacity: 0; transform: translateY(12px); pointer-events: none; transition: .2s; }
.toast.show { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .topbar { align-items: flex-start; flex-direction: column; }
  .role-picker { width: 100%; align-items: flex-start; flex-direction: column; color: white; }
  .role-picker select { width: 100%; min-height: 48px; }
  .layout { grid-template-columns: 1fr; }
  .sidebar { display: flex; gap: 4px; padding: 9px; overflow-x: auto; scrollbar-width: none; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar::-webkit-scrollbar { display: none; }
  .sidebar a { flex: 0 0 auto; margin: 0; }
  main { padding: 20px 15px 34px; }
  .grid, .stats, .form-grid, .scale-tip, .questionnaire-review { grid-template-columns: 1fr; }
  .page-head { flex-direction: column; }
  .row { align-items: flex-start; }
  .action { display: flow-root; padding: 18px 16px; }
  .action .primary { max-width: 100%; }
}

@media (max-width: 420px) {
  .topbar { gap: 12px; padding: 12px 16px 16px; }
  main { padding-inline: 12px; }
  .card { padding: 17px 15px; }
  .row { gap: 10px; }
  .row .badge { flex: 0 0 auto; }
}

/* Identità visiva GDMI Nutrizione */
:root {
  --green-950: #173f2d;
  --green-900: #244c38;
  --green-800: #315d46;
  --green-650: #4a765e;
  --green-100: #e7efe9;
  --cream: #f4f1e8;
  --paper: #fffefa;
  --ink: #15251d;
  --muted: #66766d;
  --line: #d7ddd7;
  --amber: #99611b;
  --red: #9b3d3d;
}
body { background: radial-gradient(circle at 85% 0, #eef2ea 0, transparent 28rem), var(--cream); }
.topbar {
  min-height: 82px;
  padding: 12px clamp(18px, 4vw, 48px);
  border-bottom: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(120deg, #123a29, #315d46);
  box-shadow: 0 6px 24px rgba(21, 54, 39, .16);
}
.brand { display: inline-flex; align-items: center; gap: 13px; color: white; }
.brand img { width: 58px; height: 58px; border: 2px solid rgba(255,255,255,.8); border-radius: 50%; object-fit: cover; box-shadow: 0 3px 12px rgba(0,0,0,.18); }
.brand > span { display: grid; line-height: 1; }
.brand strong { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: 27px; letter-spacing: .045em; }
.brand small { margin-top: 5px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.role-picker { color: rgba(255,255,255,.76); font-weight: 650; letter-spacing: .02em; }
.role-picker select { min-height: 44px; padding-inline: 14px 38px; border-color: rgba(255,255,255,.32); border-radius: 12px; background: rgba(255,255,255,.1); }
.layout { grid-template-columns: 246px minmax(0, 1fr); min-height: calc(100vh - 82px); }
.sidebar { padding: 28px 18px; border-color: #d5dcd5; background: rgba(248,247,241,.88); backdrop-filter: blur(14px); }
.sidebar a { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 10px 13px; margin-bottom: 6px; border: 1px solid transparent; border-radius: 12px; font-size: 14px; font-weight: 650; transition: background .16s, color .16s, transform .16s; }
.sidebar a:hover { color: var(--green-950); background: #edf2ed; transform: translateX(2px); }
.sidebar a.active { border-color: #c8d8cc; color: white; background: var(--green-900); box-shadow: 0 5px 14px rgba(25,64,45,.14); }
.nav-icon { display: inline-grid; flex: 0 0 26px; width: 26px; height: 26px; place-items: center; border-radius: 8px; color: var(--green-800); background: var(--green-100); font-size: 17px; font-weight: 800; }
.sidebar a.active .nav-icon { color: var(--green-950); background: white; }
main { max-width: 1240px; padding: 42px clamp(24px, 4vw, 52px) 64px; }
.page-head { margin-bottom: 30px; }
.page-head h1 { max-width: 820px; color: var(--green-950); font-size: clamp(32px, 4vw, 48px); font-weight: 850; letter-spacing: -.04em; }
.page-head p { margin: 10px 0 0; font-size: 16px; }
.eyebrow { color: var(--green-650); font-size: 11px; letter-spacing: .17em; }
h2 { color: var(--green-950); font-size: 20px; letter-spacing: -.015em; }
p { line-height: 1.55; }
.grid { gap: 22px; }
.stats { gap: 18px; margin-bottom: 22px; }
.card { padding: 24px; border-color: rgba(60,91,72,.18); border-radius: 18px; background: rgba(255,254,250,.96); box-shadow: 0 10px 30px rgba(29,57,42,.055); }
.card:hover { border-color: rgba(49,93,70,.28); }
.stat { position: relative; overflow: hidden; }
.stat::after { content: ""; position: absolute; top: 0; right: 0; width: 54px; height: 4px; background: var(--green-650); }
.stat strong { color: var(--green-950); font-size: 34px; }
.primary, .secondary, .danger { min-height: 44px; padding: 10px 17px; border-radius: 11px; transition: transform .15s, box-shadow .15s, background .15s; }
.primary { gap: 12px; border-color: var(--green-900); background: var(--green-900); box-shadow: 0 5px 14px rgba(25,64,45,.14); }
.primary:hover { background: var(--green-950); box-shadow: 0 7px 18px rgba(25,64,45,.2); transform: translateY(-1px); }
.secondary:hover { border-color: var(--green-650); color: var(--green-950); background: var(--green-100); }
.row { min-height: 54px; padding: 15px 0; }
.badge { padding: 6px 11px; font-weight: 700; }
.action { position: relative; overflow: hidden; padding: clamp(24px, 4vw, 38px); margin-bottom: 22px; border: 0; border-radius: 22px; color: white; background: linear-gradient(125deg, #173f2d, #315d46); box-shadow: 0 16px 34px rgba(23,63,45,.18); }
.action::after { content: ""; position: absolute; right: -65px; bottom: -100px; width: 260px; height: 260px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; }
.action-label { position: relative; z-index: 1; margin-bottom: 10px; color: #d4e3d8; font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.action h2 { position: relative; z-index: 1; max-width: 700px; margin-bottom: 8px; color: white; font-size: clamp(25px, 3vw, 36px); }
.action p { position: relative; z-index: 1; max-width: 670px; margin: 0 0 22px; color: rgba(255,255,255,.78); }
.action .primary { position: relative; z-index: 1; justify-content: space-between; min-width: min(100%, 240px); color: var(--green-950); background: white; box-shadow: none; }
.action .primary:hover { background: #f3f0e7; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 4px; }
.section-heading h2 { margin: 0; }
.educator-card { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 18px; background: linear-gradient(145deg, #f0f5ef, #fffefa); }
.educator-card h2 { margin-bottom: 8px; }
.educator-card p { margin-bottom: 0; }
.educator-mark { display: grid; width: 62px; height: 62px; place-items: center; border: 1px solid #bdd0c2; border-radius: 50%; color: white; background: var(--green-800); font-size: 20px; font-weight: 850; letter-spacing: .04em; }
input, select, textarea { min-height: 44px; padding: 11px 13px; border-color: #aab8af; border-radius: 10px; background: #fff; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--green-650); box-shadow: 0 0 0 3px rgba(74,118,94,.16); }
.questionnaire { gap: 18px; }
.questionnaire details summary { color: var(--green-950); font-size: 20px; }
.questionnaire .intro { border-left: 4px solid var(--green-650); }
.choices label { border-radius: 10px; background: #fbfcfa; }
.sticky-actions { padding: 14px; border-radius: 15px; box-shadow: 0 -8px 24px rgba(30,57,43,.08); }
.review-banner { border-color: #dcc27e; background: #fff5d8; }
.toast { border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.16); }

@media (max-width: 760px) {
  .topbar { min-height: 76px; align-items: center; flex-direction: row; padding: 10px 14px; }
  .brand { gap: 9px; }
  .brand img { width: 49px; height: 49px; }
  .brand strong { font-size: 21px; }
  .brand small { font-size: 9px; }
  .role-picker { width: min(52%, 230px); align-items: stretch; gap: 3px; flex-direction: column; font-size: 9px; text-transform: uppercase; }
  .role-picker select { min-height: 42px; margin: 0; font-size: 13px; text-transform: none; }
  .layout { display: block; min-height: calc(100vh - 76px); }
  .sidebar { position: fixed; z-index: 20; right: 0; bottom: 0; left: 0; display: flex; gap: 3px; padding: 7px 8px max(7px, env(safe-area-inset-bottom)); overflow-x: auto; border-top: 1px solid #d7ddd7; border-right: 0; border-bottom: 0; background: rgba(255,254,250,.96); box-shadow: 0 -8px 24px rgba(29,57,42,.09); backdrop-filter: blur(18px); scrollbar-width: none; }
  .sidebar a { flex: 0 0 76px; min-height: 58px; margin: 0; padding: 6px 4px; flex-direction: column; justify-content: center; gap: 4px; border-radius: 12px; font-size: 10px; line-height: 1.05; text-align: center; }
  .sidebar a:hover { transform: none; }
  .sidebar a.active { border-color: #c8d8cc; color: var(--green-950); background: var(--green-100); box-shadow: none; }
  .nav-icon { width: 25px; height: 25px; flex-basis: 25px; background: transparent; font-size: 19px; }
  .sidebar a.active .nav-icon { color: var(--green-950); background: transparent; }
  .sidebar a.locked::after { content: ""; }
  main { padding: 25px 14px 104px; }
  .page-head { margin-bottom: 22px; }
  .page-head h1 { font-size: clamp(30px, 9vw, 40px); }
  .page-head p { font-size: 14px; }
  .card { padding: 20px 17px; border-radius: 16px; }
  .action { padding: 25px 20px; border-radius: 20px; }
  .action h2 { font-size: 27px; }
  .action .primary { width: 100%; }
  .educator-card { grid-template-columns: 52px 1fr; }
  .educator-mark { width: 52px; height: 52px; font-size: 17px; }
  .sticky-actions { bottom: 76px; }
}

@media (max-width: 420px) {
  .topbar { gap: 9px; padding: 9px 11px; }
  .brand > span { display: none; }
  .role-picker { width: calc(100% - 62px); }
  main { padding-inline: 11px; }
  .row { gap: 9px; }
}