:root{
      --navy:#0D1B2A;
      --grey:#F4F6F8;
      --white:#FFFFFF;
      --line:#e5e7eb;
      --red:#b91c1c;
      --amber:#b45309;
      --green:#15803d;
      --gold:#a16207;
      --ink:#111827;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    *{box-sizing:border-box;}
    body{margin:0;padding:1.5rem;background:var(--grey);color:var(--navy);}
    .wrap{
      max-width:1280px;
      margin:0 auto;
      background:var(--white);
      border-radius:16px;
      padding:2rem;
      box-shadow:0 12px 30px rgba(0,0,0,0.06);
    }

    h1{margin:0 0 .4rem;font-size:1.85rem;}
    .sub{margin:0 0 1.2rem;color:#4b5563;font-size:.98rem;line-height:1.4;}
    h2{margin:1.2rem 0 .7rem;font-size:1.15rem;}

    label{
      display:block;
      font-size:.85rem;
      font-weight:800;
      margin-bottom:.25rem;
      color:var(--ink);
    }

    input[type="number"],
    input[type="text"],
    select,
    textarea{
      width:100%;
      padding:.55rem .7rem;
      border-radius:10px;
      border:1px solid #d1d5db;
      font-size:.95rem;
      background:#fff;
    }

    textarea{min-height:150px;resize:vertical;}
    input:focus, select:focus, textarea:focus{
      outline:none;
      border-color:var(--green);
      box-shadow:0 0 0 1px rgba(21,128,61,0.18);
    }

    .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;}
    .card{background:var(--grey);border-radius:12px;padding:1rem 1.2rem;}
    .row{display:flex;justify-content:space-between;gap:1rem;margin:.25rem 0;}
    .lbl{color:#374151;}
    .val{font-weight:900;}
    .note{color:#6b7280;font-size:.86rem;margin-top:.6rem;line-height:1.4;}
    .tiny{font-size:.8rem;color:#6b7280;margin-top:.35rem;line-height:1.35;}
    .hr{height:1px;background:var(--line);margin:1rem 0;}

    .check{
      display:flex;
      gap:.55rem;
      align-items:flex-start;
      margin:.35rem 0;
    }
    .check input{margin-top:.25rem;flex:0 0 auto;}
    .check label{margin:0;font-weight:700;}

    button{
      margin-top:1rem;
      padding:.85rem 1.1rem;
      border-radius:999px;
      border:none;
      background:var(--navy);
      color:#fff;
      font-weight:900;
      cursor:pointer;
      transition:.2s;
    }
    button:hover{opacity:.92;}
    .btnRow{display:flex;gap:.7rem;flex-wrap:wrap;}
    .btnAlt{background:#1f2937;}
    .btnGreen{background:#0f766e;}

    .zone{
      display:inline-block;
      padding:.25rem .6rem;
      border-radius:999px;
      font-weight:900;
      font-size:.8rem;
      line-height:1.2;
    }
    .z-red{background:#fee2e2;color:var(--red);}
    .z-amber{background:#ffedd5;color:var(--amber);}
    .z-green{background:#dcfce7;color:var(--green);}
    .z-gold{background:#fef3c7;color:var(--gold);}

    .results{display:none;margin-top:1.2rem;}
    .day-title{font-weight:900;margin:.8rem 0 .35rem;color:var(--ink);}
    .day-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
      gap:.8rem;
      margin-bottom:.4rem;
    }

    .progress-shell{background:#f1f5f9;border-radius:14px;padding:12px;}
    .progress-track{
      position:relative;
      height:18px;
      border-radius:999px;
      background:linear-gradient(to right,
        rgba(185,28,28,0.18) 0%,
        rgba(185,28,28,0.18) 25%,
        rgba(180,83,9,0.18) 25%,
        rgba(180,83,9,0.18) 50%,
        rgba(21,128,61,0.18) 50%,
        rgba(21,128,61,0.18) 75%,
        rgba(161,98,7,0.18) 75%,
        rgba(161,98,7,0.18) 100%);
      overflow:hidden;
    }
    .progress-dot{
      position:absolute;
      top:50%;
      transform:translate(-50%,-50%);
      width:12px;
      height:12px;
      border-radius:999px;
      background:var(--navy);
      box-shadow:0 2px 8px rgba(0,0,0,0.15);
    }
    .progress-dot.net{background:#0f766e;}
    .progress-labels{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:.5rem;
      font-size:.78rem;
      color:#475569;
      margin-top:8px;
      font-weight:800;
      text-align:center;
    }

    .bad{color:var(--red);font-weight:900;}
    .warn{color:var(--amber);font-weight:900;}
    .good{color:var(--green);font-weight:900;}
    .chart-box{height:270px;position:relative;}
    @media (max-width: 900px){ .chart-box{height:240px;} }

    table{width:100%;border-collapse:collapse;font-size:.92rem;}
    th,td{
      padding:.6rem .55rem;
      border-bottom:1px solid var(--line);
      text-align:left;
      vertical-align:top;
    }
    th{font-size:.85rem;color:#475569;}

    .pdfArea{background:var(--white);padding:0;border-radius:10px;}
    .smallCaps{
      letter-spacing:.04em;
      text-transform:uppercase;
      font-size:.78rem;
      color:#64748b;
      font-weight:900;
    }

.intro-compact{
  background:#f8fafc;
  border:1px solid var(--line);
  border-radius:14px;
  padding:.9rem 1rem;
  margin:0 0 1.1rem;
}
.sub.compact{
  margin:0;
}
.details-note{
  margin-top:.55rem;
  color:#4b5563;
  font-size:.88rem;
  line-height:1.4;
}
.details-note summary{
  cursor:pointer;
  font-weight:900;
  color:var(--navy);
}
.details-note p{
  margin:.55rem 0 0;
}
.import-box, .manual-box{
  margin-top:1rem;
  padding:1rem;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}
.import-box{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:1rem;
  align-items:center;
}
.import-actions{
  display:flex;
  flex-direction:column;
  gap:.55rem;
  min-width:230px;
}
.import-actions input[type="file"]{
  font-size:.86rem;
}
.smallBtn{
  width:auto;
  margin-top:0;
  padding:.7rem 1rem;
}
.import-status{
  grid-column:1 / -1;
  padding-top:.35rem;
}
.import-status.good{color:var(--green);font-weight:800;}
.import-status.warn{color:var(--amber);font-weight:800;}
.import-status.bad{color:var(--red);font-weight:800;}
@media (max-width: 700px){
  .import-box{grid-template-columns:1fr;}
  .import-actions{min-width:0;}
}


/* HYDR-EAT clinical / traffic-light branding */







.brandName{
  font-size:2rem;
  font-weight:950;
  letter-spacing:.04em;
  color:var(--navy);
  line-height:1;
}
.brandName span{color:var(--navy);}
.brandTag{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:900;
  color:#64748b;
  margin-top:.35rem;
}

.small-import{padding:.8rem 1rem;margin:.85rem 0;background:#f8fafc;border:1px solid var(--line);border-radius:12px;}

.tab-nav{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin:1rem 0;
  padding:.45rem;
  background:#f8fafc;
  border:1px solid var(--line);
  border-radius:999px;
}
.tab-btn{
  width:auto;
  margin:0;
  padding:.62rem .95rem;
  border-radius:999px;
  background:#ffffff;
  color:var(--navy);
  border:1px solid var(--line);
}
.tab-btn.active{
  background:var(--navy);
  color:#ffffff;
  border-color:var(--navy);
}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

@media(max-width:760px){
  
  .brandName{font-size:1.65rem}
  .tab-nav{border-radius:14px}.tab-btn{flex:1 1 auto}
}
@media print{.hero,.tab-nav{display:none}.tab-panel{display:block!important}}


.traffic-card{
  background:#ffffff;
  border:1px solid var(--line);
  border-left:6px solid var(--green);
}
.water-card{border-left-color:#0f766e;}
.movement-card{border-left-color:var(--amber);}


/* Live-style HYDR-EAT shell */
body{
  background:#F4F6F8;
  color:#0D1B2A;
}

.method-label{
  display:inline-block;
  margin-bottom:.5rem;
  padding:.28rem .65rem;
  border-radius:999px;
  background:#eef2f7;
  color:#334155;
  border:1px solid #d8dee8;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.brandTag{
  margin:.15rem 0 1rem;
  color:#475569;
  font-weight:800;
  letter-spacing:.01em;
}

.section-nav{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin:1rem 0 1.2rem;
  padding:.45rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:#f8fafc;
}

.section-nav a{
  text-decoration:none;
  color:#0D1B2A;
  font-weight:900;
  font-size:.85rem;
  padding:.5rem .8rem;
  border-radius:999px;
}

.section-nav a:hover{
  background:#e5e7eb;
}

.intro-compact{
  border:1px solid var(--line);
  background:#ffffff;
  border-radius:14px;
  padding:.9rem 1rem;
}

.details-note summary{
  cursor:pointer;
  font-weight:900;
  color:#0D1B2A;
}

.details-note p{
  color:#475569;
  line-height:1.45;
}

.tab-btn.active{
  background:#0D1B2A;
  color:#fff;
}

.btnGreen{
  background:#15803d;
}

.btnAlt{
  background:#374151;
}

.card{
  border:1px solid #e5e7eb;
}

.small-import{
  opacity:.95;
}

.small-import summary{
  font-size:.9rem;
  color:#334155;
}

@media(max-width:760px){
  .section-nav{
    border-radius:14px;
  }

  .section-nav a{
    flex:1 1 auto;
    text-align:center;
  }
}


/* Final clinical/dashboard refinements */
.slim-intro{
  padding:.7rem .85rem !important;
  margin-bottom:.85rem !important;
}

.slim-intro .sub{
  font-size:.88rem !important;
  line-height:1.35 !important;
}

.slim-intro .details-note{
  font-size:.8rem !important;
  margin-top:.35rem !important;
}

.section-nav{
  position:sticky;
  top:0;
  z-index:40;
  box-shadow:0 8px 22px rgba(15,23,42,.06);
}

.csv-compact{
  display:block !important;
  padding:.65rem .8rem !important;
  margin:.75rem 0 !important;
  background:#ffffff !important;
  border:1px dashed #cbd5e1 !important;
}

.csv-compact summary{
  cursor:pointer;
  font-size:.86rem !important;
  font-weight:900 !important;
}

.csv-compact .val{
  font-size:.88rem;
}

.csv-compact .tiny{
  font-size:.76rem;
}

.csv-compact .import-actions{
  margin-top:.55rem;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  gap:.5rem;
  align-items:center;
  min-width:0;
}

.csv-compact input[type="file"]{
  max-width:260px;
  font-size:.78rem;
}

.csv-compact .smallBtn{
  padding:.55rem .85rem;
  font-size:.82rem;
}

.manual-compact{
  padding:.7rem .8rem !important;
  margin-top:.7rem !important;
  background:#f8fafc !important;
}

/* More obvious result tabs */
.tab-nav{
  position:sticky;
  top:0;
  z-index:45;

  display:flex !important;
  flex-wrap:wrap;
  gap:.65rem !important;

  margin:1.1rem 0 1.35rem !important;
  padding:.8rem !important;

  background:rgba(244,246,248,.96) !important;
  border:1px solid #cfd8e3 !important;
  border-radius:18px !important;

  box-shadow:0 12px 30px rgba(15,23,42,.08);
  backdrop-filter:blur(8px);
}

.tab-btn{
  width:auto !important;
  margin:0 !important;
  padding:.8rem 1.1rem !important;

  border-radius:999px !important;
  border:1px solid #cbd5e1 !important;

  background:#ffffff !important;
  color:#334155 !important;

  font-size:.92rem !important;
  font-weight:950 !important;
  letter-spacing:.01em;

  box-shadow:0 3px 10px rgba(15,23,42,.04);
}

.tab-btn:hover{
  background:#eef2f7 !important;
  transform:translateY(-1px);
}

.tab-btn.active{
  background:#0D1B2A !important;
  color:#ffffff !important;
  border-color:#0D1B2A !important;
  box-shadow:0 12px 24px rgba(13,27,42,.18);
}

/* Traffic-light hinting on tab order while active keeps clinical feel */
.tab-btn[data-tab="hydrationTab"].active{
  background:#0f766e !important;
  border-color:#0f766e !important;
}

.tab-btn[data-tab="movementTab"].active{
  background:#15803d !important;
  border-color:#15803d !important;
}

.tab-btn[data-tab="ladderTab"].active{
  background:#A16207 !important;
  border-color:#A16207 !important;
}

.tab-btn[data-tab="reportTab"].active{
  background:#374151 !important;
  border-color:#374151 !important;
}

@media(max-width:760px){
  .tab-nav{
    gap:.5rem !important;
    padding:.65rem !important;
    border-radius:14px !important;
  }

  .tab-btn{
    flex:1 1 calc(50% - .5rem) !important;
    text-align:center !important;
    padding:.72rem .7rem !important;
    font-size:.84rem !important;
  }

  .csv-compact .import-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .csv-compact input[type="file"]{
    max-width:100%;
  }
}


/* CSV privacy/safety reassurance */
.safety-note{
  margin-top:.7rem;
  padding:.65rem .75rem;
  border-radius:12px;
  background:#f8fafc;
  border:1px solid #dbe3ee;
  color:#334155;
  font-size:.78rem;
  line-height:1.35;
}

.safety-note strong{
  color:#0D1B2A;
}

.csv-safe-mini{
  margin-top:.35rem;
  font-size:.75rem;
  color:#15803d;
  font-weight:900;
}


/* Safety protection */
.safety-card{
  border:2px solid var(--red);
  background:#fff7f7;
}

.safety-card .smallCaps{
  color:var(--red);
}

.safety-checks{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  margin-top:1rem;
}

.safety-card .check{
  background:#ffffff;
  border:1px solid #fecaca;
  border-radius:12px;
  padding:.75rem;
}

.safety-card .check label{
  color:#111827;
  line-height:1.4;
}

.safety-card input[type="checkbox"]{
  accent-color:var(--red);
}

.protectedBox{
  margin-top:1rem;
  padding:1rem;
  border-radius:14px;
  background:#fee2e2;
  border:1px solid var(--red);
  color:#111827;
}

.protectedBox strong{
  display:block;
  color:var(--red);
  margin-bottom:.35rem;
}

.protectedBox p{
  margin:.25rem 0 0;
  line-height:1.45;
}

.protected-summary-card{
  border:2px solid var(--red) !important;
  background:#fff7f7 !important;
}

.safety-protected-pill{
  display:inline-block;
  padding:.25rem .65rem;
  border-radius:999px;
  background:#fee2e2;
  color:var(--red);
  font-weight:900;
  font-size:.78rem;
}


/* Completed-days / smaller safety protection update */
.safety-compact{
  padding:.85rem 1rem !important;
  border-width:1px !important;
  background:#fffafa !important;
}

.safety-compact summary{
  cursor:pointer;
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  align-items:center;
  color:var(--red);
  font-size:.92rem;
}

.safety-compact summary span{
  color:#64748b;
  font-size:.78rem;
  font-weight:800;
  text-transform:none;
}

.safety-compact .smallCaps{
  display:none;
}

.safety-compact .tiny{
  font-size:.78rem;
  line-height:1.35;
  margin:.55rem 0;
}

.safety-compact .safety-checks{
  gap:.45rem;
  margin-top:.55rem;
}

.safety-compact .check{
  padding:.55rem .65rem;
  border-radius:10px;
}

.safety-compact .check label{
  font-size:.82rem;
}

.safety-compact .protectedBox{
  padding:.65rem .75rem;
  margin-top:.65rem;
  border-radius:10px;
}

.safety-compact .protectedBox strong{
  font-size:.85rem;
}

.safety-compact .protectedBox p{
  font-size:.78rem;
  line-height:1.35;
}

/* Meal split chart/table */
#mealSplitBody td,
#mealSplitBody th{
  white-space:nowrap;
}

.mealGroupPill{
  display:inline-block;
  padding:.2rem .55rem;
  border-radius:999px;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  font-weight:900;
  font-size:.8rem;
}


/* Restore-first target protection */
.restore-card{
  margin-top:.85rem;
  padding:.9rem;
  border-radius:14px;
  background:#f8fafc;
  border:1px solid #dbe3ee;
}

.restore-card .smallCaps{
  color:#0D1B2A;
}

.restore-target-strong{
  color:var(--green);
  font-weight:950;
}

.restore-target-protected{
  color:var(--red);
  font-weight:950;
}


/* Restored EPK + traffic-light branding */
.brand-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  margin-bottom:.85rem;
}

.epkWord{
  color:#0D1B2A;
  font-weight:950;
  letter-spacing:-.03em;
}

.dash{
  color:#94a3b8;
  font-weight:700;
}

.traffic-brand{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:.35rem;
  padding:.55rem;
  border-radius:999px;
  background:#ffffff;
  border:1px solid #dbe3ee;
  box-shadow:0 8px 22px rgba(15,23,42,.06);
}

.traffic-dot{
  display:block;
  width:18px;
  height:18px;
  border-radius:999px;
}

.red-dot{ background:var(--red); }
.amber-dot{ background:var(--amber); }
.green-dot{ background:var(--green); }
.gold-dot{ background:var(--gold); }

.traffic-legend{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:.7rem 0 1rem;
}

.traffic-legend span{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.42rem .65rem;
  border-radius:999px;
  background:#ffffff;
  border:1px solid #e2e8f0;
  color:#334155;
  font-size:.78rem;
  font-weight:900;
}

.legend-dot{
  width:9px;
  height:9px;
  display:inline-block;
  border-radius:999px;
}

/* More visible EPK/traffic light results */
.zone{
  border:1px solid currentColor;
}

.z-red{
  background:#fee2e2 !important;
  color:var(--red) !important;
}

.z-amber{
  background:#ffedd5 !important;
  color:var(--amber) !important;
}

.z-green{
  background:#dcfce7 !important;
  color:var(--green) !important;
}

.z-gold{
  background:#fef3c7 !important;
  color:var(--gold) !important;
}

.progress-labels div:nth-child(1){
  color:var(--red);
}

.progress-labels div:nth-child(2){
  color:var(--amber);
}

.progress-labels div:nth-child(3){
  color:var(--green);
}

.progress-labels div:nth-child(4){
  color:var(--gold);
}

/* Tab active states carry traffic-light brand */
.tab-btn[data-tab="summaryTab"].active{
  background:#0D1B2A !important;
  border-color:#0D1B2A !important;
}

.tab-btn[data-tab="hydrationTab"].active{
  background:#0f766e !important;
  border-color:#0f766e !important;
}

.tab-btn[data-tab="movementTab"].active{
  background:var(--green) !important;
  border-color:var(--green) !important;
}

.tab-btn[data-tab="ladderTab"].active{
  background:var(--gold) !important;
  border-color:var(--gold) !important;
}

.tab-btn[data-tab="reportTab"].active{
  background:#374151 !important;
  border-color:#374151 !important;
}

@media(max-width:760px){
  .brand-head{
    flex-direction:column;
  }

  .traffic-brand{
    align-self:flex-start;
  }
}

.csv-import-status{
  margin-top:.45rem;
  font-size:.78rem;
  font-weight:900;
  color:#0D1B2A;
  background:#f8fafc;
  border:1px solid #dbe3ee;
  border-radius:10px;
  padding:.45rem .6rem;
}