:root{
  --primary:#2D9F7C;
  --primary-dark:#237A5F;
  --accent:#4ECDC4;
  --success:#52C41A;
  --error:#F5222D;
  --bg-main:#E8F3EF;
  --bg-card:#FFFFFF;
  --text-main:#1A3A2E;
  --text-dim:#5A7D6F;
  --input-bg:#F4FAF8;
  --border-light:#C8E0D7;
  --shadow:rgba(45,159,124,.2);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

[hidden]{display:none!important}

body{
  min-height:100vh;
  overflow-x:hidden;
  background:var(--bg-main);
  color:var(--text-main);
  font-family:"Rubik","Manrope",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:20px;
  line-height:1.5;
  position:relative;
}

a{
  color:inherit;
  text-decoration:none;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  background:
    radial-gradient(circle at 15% 25%,rgba(45,159,124,.25) 0%,transparent 35%),
    radial-gradient(circle at 85% 75%,rgba(78,205,196,.2) 0%,transparent 40%),
    radial-gradient(circle at 50% 50%,rgba(82,196,26,.15) 0%,transparent 45%),
    radial-gradient(circle at 70% 30%,rgba(45,159,124,.12) 0%,transparent 50%);
  animation:gradientPulse 20s ease-in-out infinite;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  background-image:
    linear-gradient(45deg,rgba(45,159,124,.05) 25%,transparent 25%),
    linear-gradient(-45deg,rgba(45,159,124,.05) 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,rgba(78,205,196,.04) 75%),
    linear-gradient(-45deg,transparent 75%,rgba(78,205,196,.04) 75%);
  background-size:60px 60px;
  background-position:0 0,0 30px,30px -30px,-30px 0;
  animation:patternSlide 40s linear infinite;
  opacity:.5;
}

@keyframes gradientPulse{
  0%,100%{transform:translate(0,0) scale(1) rotate(0deg);opacity:1}
  33%{transform:translate(40px,-40px) scale(1.15) rotate(120deg);opacity:.85}
  66%{transform:translate(-30px,35px) scale(.92) rotate(240deg);opacity:.92}
}

@keyframes patternSlide{
  0%{background-position:0 0,0 30px,30px -30px,-30px 0}
  100%{background-position:60px 60px,60px 90px,90px 30px,30px 60px}
}

.ambient{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

.ambient span{
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle,rgba(45,159,124,.6),rgba(78,205,196,.3),transparent);
  box-shadow:0 0 20px rgba(45,159,124,.4);
  animation:floatParticle 25s infinite ease-in-out;
}

.ambient span:nth-child(1){left:8%;top:18%;width:14px;height:14px;animation-duration:22s}
.ambient span:nth-child(2){left:82%;top:38%;width:18px;height:18px;animation-duration:28s;animation-delay:4s}
.ambient span:nth-child(3){left:48%;top:62%;width:10px;height:10px;animation-duration:32s;animation-delay:8s}
.ambient span:nth-child(4){left:22%;top:78%;width:16px;height:16px;animation-duration:26s;animation-delay:2s}
.ambient span:nth-child(5){left:78%;top:12%;width:12px;height:12px;animation-duration:30s;animation-delay:6s}
.ambient span:nth-child(6){left:38%;top:32%;width:14px;height:14px;animation-duration:24s;animation-delay:10s}
.ambient span:nth-child(7){left:65%;top:55%;width:11px;height:11px;animation-duration:27s;animation-delay:5s}
.ambient span:nth-child(8){left:15%;top:45%;width:13px;height:13px;animation-duration:29s;animation-delay:7s}

@keyframes floatParticle{
  0%,100%{transform:translate(0,0) scale(1);opacity:.4}
  25%{transform:translate(60px,-90px) scale(1.3);opacity:.7}
  50%{transform:translate(-40px,70px) scale(.85);opacity:.5}
  75%{transform:translate(80px,50px) scale(1.15);opacity:.6}
}

.pin-screen{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(232,243,239,.99);
  backdrop-filter:blur(20px);
}

.pin-card,.panel{
  position:relative;
  overflow:hidden;
  background:var(--bg-card);
  border-radius:32px;
  box-shadow:
    0 12px 32px var(--shadow),
    0 0 0 2px rgba(45,159,124,.1),
    0 25px 70px rgba(45,159,124,.12),
    inset 0 1px 0 rgba(255,255,255,.8);
}

.pin-card{
  width:100%;
  max-width:500px;
  padding:40px 36px;
  text-align:center;
  animation:pinCardPop 1s cubic-bezier(.68,-.55,.265,1.55);
  box-shadow:
    0 16px 48px var(--shadow),
    0 0 0 2px rgba(45,159,124,.15),
    0 30px 90px rgba(45,159,124,.18);
}

.pin-card::before,.panel::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:8px;
  background:linear-gradient(90deg,var(--primary),var(--accent),var(--success),var(--accent),var(--primary));
  background-size:400% 100%;
  animation:shimmerRush 6s ease-in-out infinite;
}

@keyframes shimmerRush{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

@keyframes cardBounce{
  from{opacity:0;transform:translateY(40px) scale(.9) rotate(2deg)}
  to{opacity:1;transform:translateY(0) scale(1) rotate(0deg)}
}

@keyframes pinCardPop{
  from{opacity:0;transform:scale(.7) translateY(60px) rotate(-8deg)}
  to{opacity:1;transform:scale(1) translateY(0) rotate(0deg)}
}

.pin-title{
  margin:12px 0 14px;
  background:linear-gradient(135deg,#1B4D3E 0%,var(--primary) 50%,var(--accent) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  font-family:"Manrope",system-ui,sans-serif;
  font-size:36px;
  font-weight:900;
  letter-spacing:-1px;
  line-height:1.1;
}

.pin-subtitle{
  margin-bottom:26px;
  color:var(--text-dim);
  font-size:22px;
  font-weight:700;
}

.app-shell{
  position:relative;
  z-index:1;
  width:min(760px,100%);
  min-height:100vh;
  margin:0 auto;
  padding:20px 18px 38px;
}

.hero{
  padding:20px 0 24px;
  text-align:center;
  animation:slideDown 1s cubic-bezier(.68,-.55,.265,1.55);
}

@keyframes slideDown{
  from{opacity:0;transform:translateY(-60px) scale(.85) rotate(-5deg)}
  to{opacity:1;transform:translateY(0) scale(1) rotate(0deg)}
}

.hero h1{
  position:relative;
  margin-bottom:12px;
  background:linear-gradient(135deg,#1B4D3E 0%,var(--primary) 40%,var(--accent) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  font-family:"Manrope",system-ui,sans-serif;
  font-size:46px;
  font-weight:900;
  letter-spacing:-1.5px;
  line-height:1.1;
  filter:drop-shadow(0 0 12px rgba(45,159,124,.28));
  animation:textFloat 4s ease-in-out infinite;
}

.hero h1::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;
  width:120px;
  height:4px;
  transform:translateX(-50%);
  border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--primary),var(--accent),transparent);
  animation:lineExpand 4s ease-in-out infinite;
}

@keyframes textFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}

@keyframes lineExpand{
  0%,100%{width:100px;opacity:.6}
  50%{width:140px;opacity:1}
}

.hero p{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:var(--text-dim);
  font-size:22px;
  font-weight:800;
}

.status-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:10px;
  background:linear-gradient(135deg,var(--success),var(--primary));
  color:#fff;
  font-size:18px;
  box-shadow:0 4px 12px rgba(45,159,124,.4);
}

.panel{
  margin-bottom:22px;
  padding:28px 24px;
  animation:cardBounce 1s cubic-bezier(.68,-.55,.265,1.55) .2s backwards;
}

.menu-panel{
  width:min(380px,100%);
  margin:0 auto 22px;
  padding:48px 28px;
  border-radius:22px;
}

.panel > *{position:relative;z-index:1}

.panel-glow{
  position:absolute;
  z-index:0;
  border-radius:50%;
  pointer-events:none;
}

.glow-one{
  width:220px;
  height:220px;
  right:-90px;
  top:-90px;
  background:radial-gradient(circle,rgba(45,159,124,.15),rgba(78,205,196,.08),transparent 65%);
}

.glow-two{
  width:180px;
  height:180px;
  left:-70px;
  bottom:-70px;
  background:radial-gradient(circle,rgba(78,205,196,.12),rgba(82,196,26,.06),transparent 65%);
}

.glow-three{
  width:140px;
  height:140px;
  right:8%;
  top:45%;
  background:radial-gradient(circle,rgba(82,196,26,.1),rgba(45,159,124,.05),transparent 65%);
}

h2{
  margin-bottom:14px;
  color:var(--text-main);
  font-family:"Manrope",system-ui,sans-serif;
  font-size:34px;
  font-weight:900;
  letter-spacing:-1px;
  line-height:1.1;
}

.lead{
  margin-bottom:20px;
  color:var(--text-dim);
  font-size:21px;
  font-weight:800;
  line-height:1.3;
}

.menu-grid,.med-list,.food-list,.suggestions{
  display:grid;
  gap:14px;
}

.menu-card,.primary-btn,.secondary-btn,.submit-btn{
  width:100%;
  border:0;
  border-radius:20px;
  cursor:pointer;
  font-family:"Manrope",system-ui,sans-serif;
  font-weight:900;
  transition:all .45s cubic-bezier(.68,-.55,.265,1.55);
}

.menu-card,.primary-btn{
  padding:24px;
  background:linear-gradient(135deg,#1B4D3E 0%,var(--primary) 30%,var(--accent) 100%);
  color:#fff;
  font-size:28px;
  letter-spacing:-.8px;
  text-shadow:0 2px 8px rgba(0,0,0,.2);
  box-shadow:0 8px 24px rgba(45,159,124,.45),0 0 40px rgba(45,159,124,.2);
}

.submit-btn{
  margin-top:32px;
  margin-bottom:16px;
  padding:24px;
  background:linear-gradient(135deg,#1B4D3E 0%,var(--primary) 30%,var(--accent) 100%);
  color:#fff;
  font-size:28px;
  letter-spacing:-.8px;
  text-shadow:0 2px 8px rgba(0,0,0,.2);
  box-shadow:
    0 8px 24px rgba(45,159,124,.45),
    0 0 40px rgba(45,159,124,.2),
    inset 0 1px 0 rgba(255,255,255,.3);
  position:relative;
  overflow:hidden;
}

.submit-btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,transparent 0%,rgba(255,255,255,.25) 50%,transparent 100%);
  transform:translateX(-100%) skewX(-15deg);
  transition:transform .8s;
}

.submit-btn:hover::before{
  transform:translateX(100%) skewX(-15deg);
}

.submit-btn:hover{
  box-shadow:
    0 16px 40px rgba(45,159,124,.55),
    0 0 60px rgba(45,159,124,.3),
    inset 0 1px 0 rgba(255,255,255,.4);
  transform:translateY(-5px) scale(1.03);
}

.submit-btn:active{
  transform:translateY(-2px) scale(1.01);
}

.submit-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none!important;
}

.submit-btn.loading::after{
  content:"";
  position:absolute;
  width:28px;
  height:28px;
  right:24px;
  top:50%;
  border:5px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .7s linear infinite;
  transform:translateY(-50%);
}

@keyframes spin{
  to{transform:translateY(-50%) rotate(360deg)}
}

.menu-card{
  min-height:104px;
  display:grid;
  align-content:center;
  gap:8px;
  text-align:left;
}

.menu-panel .menu-card{
  padding:24px;
  font-size:28px;
  text-align:center;
}

.menu-card span{
  display:block;
  font-size:30px;
  line-height:1.1;
}

.menu-panel .menu-card span{
  font-size:30px;
}

.menu-card small{
  display:block;
  color:rgba(255,255,255,.86);
  font-size:17px;
  font-weight:800;
  line-height:1.25;
}

.secondary-btn{
  margin-bottom:16px;
  padding:18px;
  border:3px solid var(--border-light);
  background:linear-gradient(135deg,var(--input-bg),#fff);
  color:var(--text-main);
  font-size:22px;
  box-shadow:0 4px 12px rgba(45,159,124,.12);
}

.menu-card:hover,.primary-btn:hover,.secondary-btn:hover{
  transform:translateY(-5px) scale(1.02);
}

.pin-input,input,select,textarea{
  width:100%;
  border:3px solid var(--border-light);
  border-radius:20px;
  background:var(--input-bg);
  color:var(--text-main);
  outline:none;
  font:inherit;
  font-weight:800;
  box-shadow:0 4px 12px rgba(45,159,124,.08),inset 0 1px 3px rgba(0,0,0,.05);
  transition:all .45s cubic-bezier(.68,-.55,.265,1.55);
}

.pin-input{
  padding:26px 30px;
  font-size:40px;
  font-weight:900;
  text-align:center;
  letter-spacing:4px;
  box-shadow:0 4px 12px rgba(45,159,124,.12);
}

input,select{
  min-height:72px;
  padding:16px 20px;
  font-size:30px;
}

textarea{
  min-height:120px;
  padding:18px 22px;
  resize:vertical;
  font-size:22px;
  font-weight:650;
}

input:focus,select:focus,textarea:focus{
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 8px rgba(45,159,124,.18),0 12px 28px rgba(45,159,124,.25);
  transform:translateY(-3px) scale(1.02);
}

.pin-input:focus{
  border-color:var(--primary);
  background:#fff;
  box-shadow:
    0 0 0 8px rgba(45,159,124,.18),
    0 12px 28px rgba(45,159,124,.25);
  transform:scale(1.03);
}

.field-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

label,.full-label{
  display:grid;
  gap:10px;
  margin-bottom:18px;
}

label span,.full-label span{
  color:var(--text-main);
  font-family:"Manrope",system-ui,sans-serif;
  font-size:21px;
  font-weight:900;
}

.section{display:none}
.section.active{display:block}

.message{
  display:none;
  margin-top:16px;
  padding:18px 20px;
  border-radius:20px;
  font-size:19px;
  font-weight:850;
}

.message.show{display:block}

.message-success{
  border:2px solid rgba(82,196,26,.35);
  background:rgba(82,196,26,.12);
  color:#237804;
}

.message-error{
  border:2px solid rgba(245,34,45,.35);
  background:rgba(245,34,45,.12);
  color:#A8071A;
}

.med-form{
  display:grid;
  gap:16px;
  margin-bottom:22px;
  padding:18px;
  border:2px solid var(--border-light);
  border-radius:20px;
  background:rgba(244,250,248,.78);
}

.med-form-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.med-form label,.med-time-input{
  gap:6px;
  margin-bottom:0;
}

.med-form label span,.med-time-box > span,.med-time-input span{
  color:var(--text-main);
  font-size:15px;
  font-weight:900;
}

.med-form input,.med-form select,.med-time-input input{
  min-height:50px;
  border-width:2px;
  border-radius:14px;
  padding:10px 12px;
  font-size:18px;
}

.med-time-box{
  display:grid;
  gap:10px;
}

.med-time-fields{
  display:grid;
  grid-template-columns:repeat(6,minmax(92px,1fr));
  gap:10px;
}

.med-actions{
  display:grid;
  grid-template-columns:minmax(0,1fr) 170px 170px;
  gap:12px;
  align-items:center;
}

.med-submit,.med-reset,.med-cancel,.med-notify-btn{
  min-height:50px;
  margin:0;
  padding:12px 16px;
  border-radius:14px;
  font-size:17px;
}

.med-day{
  display:grid;
  gap:14px;
}

.med-day-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
}

.med-day-head h3{
  margin:0 0 4px;
  color:var(--text-main);
  font-family:"Manrope",system-ui,sans-serif;
  font-size:25px;
  font-weight:900;
}

.med-day-head p{
  margin:0;
  color:var(--text-dim);
  font-size:16px;
  font-weight:850;
}

.med-notify-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  width:min(360px,100%);
}

.med-next{
  padding:12px 14px;
  border:2px solid rgba(78,205,196,.36);
  border-radius:16px;
  background:rgba(78,205,196,.1);
  color:var(--primary-dark);
  font-size:16px;
  font-weight:850;
}

.med-list article,.food-list article,.suggestion{
  padding:16px;
  border:2px solid var(--border-light);
  border-radius:20px;
  background:#fff;
}

.med-compact{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  overflow:visible;
  padding-bottom:0;
}

.med-item{
  width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:12px 14px!important;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}

.med-item.is-taken{
  border-color:rgba(82,196,26,.55);
  background:rgba(82,196,26,.1);
}

.med-check{
  min-height:0;
  display:grid;
  grid-template-columns:64px 24px minmax(120px,1.2fr) minmax(90px,.8fr) minmax(130px,1fr) 86px;
  align-items:center;
  gap:10px;
  text-align:left;
  cursor:pointer;
}

.med-checkbox{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.med-checkmark{
  width:24px;
  height:24px;
  flex:0 0 24px;
  border:2px solid var(--border-light);
  border-radius:6px;
  background:var(--input-bg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.med-checkbox:checked + .med-checkmark{
  border-color:var(--success);
  background:var(--success);
  box-shadow:0 8px 18px rgba(82,196,26,.24);
}

.med-checkbox:checked + .med-checkmark::after{
  content:"";
  display:block;
  width:6px;
  height:12px;
  margin:2px auto 0;
  border:solid #fff;
  border-width:0 3px 3px 0;
  transform:rotate(45deg);
}

.med-checkbox:focus-visible + .med-checkmark{
  outline:3px solid rgba(78,205,196,.35);
  outline-offset:2px;
}

.med-time{
  min-height:0;
  display:flex!important;
  align-items:center;
  justify-content:flex-start;
  line-height:1.15;
}

.med-card-actions{
  display:flex;
  justify-content:flex-end;
}

.med-bot-card{
  grid-column:1 / -1;
}

.med-list span,.metric-grid span,.food-list span,.suggestion span{
  display:block;
  color:var(--text-dim);
  font-size:15px;
  font-weight:900;
}

.med-list strong{
  display:block;
  margin:0;
  color:var(--text-main);
  font-size:16px;
  line-height:1.15;
}

.med-list em{
  display:block;
  color:var(--text-main);
  font-size:14px;
  font-style:normal;
  font-weight:800;
  line-height:1.15;
}

.med-condition{
  display:block;
  min-height:0;
  color:var(--text-dim)!important;
  font-size:12px!important;
  font-weight:850!important;
  line-height:1.15;
}

.food-list strong,.suggestion strong{
  display:block;
  margin:4px 0;
  color:var(--text-main);
  font-size:20px;
}

.med-list small{
  color:var(--primary-dark);
  font-size:13px;
  font-weight:850;
  line-height:1.15;
}

.med-edit-btn{
  min-height:42px;
  margin:0;
  padding:8px 12px;
  border-radius:12px;
  font-size:14px;
}

.med-item.is-taken small{
  color:#237804;
}

.med-empty{
  grid-column:1 / -1;
  color:var(--text-dim);
  font-weight:850;
}

.metric-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-bottom:20px;
}

.metric-grid div{
  padding:18px;
  border:2px solid var(--border-light);
  border-radius:20px;
  background:var(--input-bg);
}

.metric-grid strong{
  display:block;
  margin-top:6px;
  color:var(--primary-dark);
  font-size:32px;
  line-height:1;
}

.suggestion{
  width:100%;
  text-align:left;
  cursor:pointer;
}

.food-list button{
  justify-self:start;
  margin-top:8px;
  border:0;
  border-radius:12px;
  padding:10px 14px;
  background:rgba(245,34,45,.12);
  color:#A8071A;
  font-weight:900;
  cursor:pointer;
}

#xeSection{
  width:min(1460px,calc(100vw - 36px));
  margin-left:50%;
  transform:translateX(-50%);
}

.xe-calculator{
  color:#10301f;
  font-size:18px;
}

.xe-notice{
  margin-bottom:22px;
  padding:18px 20px;
  border:2px solid #8ddd9f;
  border-radius:8px;
  background:#fafffb;
  color:#17492e;
  font-weight:650;
}

.xe-summary-grid,.xe-meal-dashboard,.xe-workbench,.xe-charts,.xe-source-grid{
  display:grid;
  gap:16px;
}

.xe-summary-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-bottom:22px;
}

.xe-meal-dashboard{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
  margin-bottom:22px;
}

.xe-meal-card,.xe-meal-total-card,.xe-metric,.xe-panel{
  border:1px solid #bce8ce;
  border-radius:8px;
  background:#fff;
  box-shadow:0 18px 45px rgba(16,48,31,.12);
}

.xe-meal-card,.xe-meal-total-card{
  min-height:154px;
  padding:18px;
  color:#10301f;
  text-align:left;
}

.xe-meal-card{
  display:grid;
  gap:8px;
  cursor:pointer;
}

.xe-meal-card.active{
  border:3px solid #0a8f4d;
  background:#edfff1;
}

.xe-meal-card span,.xe-meal-total-card span{
  color:#49685a;
  font-size:15px;
  font-weight:850;
}

.xe-meal-card strong,.xe-meal-total-card strong{
  display:block;
  font-size:32px;
  line-height:1;
  color:#05633d;
}

.xe-meal-card em,.xe-meal-card small,.xe-meal-total-card small{
  display:block;
  color:#315643;
  font-style:normal;
  font-size:14px;
  font-weight:750;
  line-height:1.25;
}

.xe-meal-total-card{
  display:grid;
  gap:10px;
  align-content:center;
  background:#123d28;
}

.xe-meal-total-card span,.xe-meal-total-card strong,.xe-meal-total-card small{
  color:#fff;
}

.xe-metric{
  padding:20px;
}

.xe-metric span,.xe-norms span,.xe-dose-box span,.xe-source-grid span,.xe-calculator label span{
  color:#49685a;
  font-size:15px;
  font-weight:750;
}

.xe-metric strong{
  display:block;
  margin-top:8px;
  color:#05633d;
  font-size:38px;
  line-height:1;
}

.xe-metric.xe-accent{
  background:#123d28;
}

.xe-metric.xe-accent span,.xe-metric.xe-accent strong{
  color:#fff;
}

.xe-workbench{
  grid-template-columns:minmax(0,1.6fr) minmax(320px,.8fr);
  gap:20px;
  align-items:start;
}

.xe-panel{
  padding:24px;
}

.xe-panel-head{
  margin-bottom:18px;
}

.xe-panel-head h2{
  margin-bottom:8px;
  color:#10301f;
  font-size:28px;
  letter-spacing:0;
}

.xe-panel-head p{
  margin-bottom:0;
  color:#49685a;
  font-weight:600;
}

.xe-panel-head.xe-inline{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
}

.xe-field-grid,.xe-formula-panel,.xe-product-entry{
  display:grid;
  gap:14px;
}

.xe-field-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.xe-formula-panel{
  grid-template-columns:180px 180px minmax(0,1fr);
  margin-top:14px;
  padding:16px;
  border:1px solid #bce8ce;
  border-radius:8px;
  background:#f4fff6;
}

.xe-formula-panel span,.xe-formula-panel strong{
  display:block;
}

.xe-formula-panel span{
  margin-bottom:6px;
  color:#49685a;
  font-size:14px;
  font-weight:800;
}

.xe-formula-panel strong{
  color:#05633d;
  font-size:18px;
}

.xe-calculator label{
  display:grid;
  gap:8px;
}

.xe-calculator input,.xe-calculator select{
  height:52px;
  border:2px solid #a7dabb;
  border-radius:8px;
  padding:0 14px;
  background:#fbfffc;
  color:#10301f;
  font-size:18px;
  font-weight:750;
  box-shadow:none;
}

.xe-calculator input:focus,.xe-calculator select:focus{
  border-color:#0a8f4d;
  box-shadow:0 0 0 4px rgba(10,143,77,.14);
}

.xe-product-entry{
  grid-template-columns:minmax(0,1.2fr) 170px 150px;
  margin-top:18px;
  align-items:end;
}

.xe-suggestions{
  display:grid;
  gap:8px;
}

.xe-suggestions.loading::after{
  content:"Идет поиск в Open Food Facts...";
  color:#49685a;
  font-size:14px;
  font-weight:800;
}

.xe-suggestions-title,.xe-suggestions-empty{
  color:#49685a;
  font-size:14px;
  font-weight:800;
}

.xe-suggestion-item{
  min-height:auto;
  padding:12px;
  border:1px solid #bce8ce;
  border-radius:8px;
  background:#f6fff8;
  color:#10301f;
  text-align:left;
}

.xe-suggestion-item strong,.xe-suggestion-item span{
  display:block;
}

.xe-suggestion-item strong{
  margin-bottom:4px;
  font-size:16px;
}

.xe-suggestion-item span{
  color:#49685a;
  font-size:14px;
  font-weight:750;
}

.xe-primary,.xe-secondary{
  border:0;
  border-radius:8px;
  min-height:52px;
  padding:0 18px;
  cursor:pointer;
  font-size:18px;
  font-weight:850;
}

.xe-primary{
  background:#0a8f4d;
  color:#fff;
}

.xe-secondary{
  width:100%;
  margin-top:18px;
  background:#b8f26b;
  color:#16351f;
}

.xe-table-wrap{
  margin-top:18px;
  overflow:auto;
  border:1px solid #bce8ce;
  border-radius:8px;
}

.xe-table-wrap table{
  width:100%;
  min-width:640px;
  border-collapse:collapse;
}

.xe-table-wrap th,.xe-table-wrap td{
  padding:14px 12px;
  border-bottom:1px solid #bce8ce;
  text-align:left;
}

.xe-table-wrap th{
  background:#eafff0;
  color:#17492e;
  font-size:15px;
}

.xe-table-wrap td{
  font-weight:700;
}

.xe-delete{
  width:40px;
  height:40px;
  min-height:40px;
  padding:0;
  border:0;
  border-radius:8px;
  background:#ffe7e7;
  color:#c83b3b;
  cursor:pointer;
  font-size:22px;
  font-weight:900;
}

.xe-dose-box{
  padding:22px;
  border:2px solid #99dc9d;
  border-radius:8px;
  background:linear-gradient(135deg,#f1fff5,#d6ffd8);
}

.xe-dose-box strong{
  display:block;
  margin:8px 0;
  color:#05633d;
  font-size:52px;
  line-height:1;
}

.xe-dose-box p{
  margin-bottom:0;
  color:#244a34;
  font-weight:700;
}

.xe-norms{
  display:grid;
  gap:12px;
  margin-top:18px;
}

.xe-norms div{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:14px 0;
  border-bottom:1px solid #bce8ce;
}

.xe-norms strong{
  color:#05633d;
  text-align:right;
}

.xe-charts{
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:22px;
}

.xe-source-panel{
  margin-top:22px;
}

.xe-source-grid{
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.xe-source-grid div{
  padding:18px;
  border:1px solid #bce8ce;
  border-radius:8px;
  background:#f6fff8;
}

.xe-source-grid strong,.xe-source-grid span{
  display:block;
}

.xe-source-grid strong{
  margin-bottom:8px;
  color:#05633d;
  font-size:20px;
}

@media(max-width:640px){
  body{font-size:18px}
  .app-shell{padding:16px 12px 30px}
  .hero h1{font-size:38px}
  .hero p{font-size:19px}
  .pin-title{font-size:32px}
  .panel{padding:24px 20px;border-radius:28px}
  .menu-panel{width:min(340px,100%);padding:42px 24px;border-radius:20px}
  .field-grid,.metric-grid{grid-template-columns:1fr}
  input,select{font-size:28px}
  .primary-btn,.menu-card{font-size:24px;padding:20px}
  .menu-card span{font-size:25px}
  .menu-panel .menu-card{font-size:24px;padding:20px}
  .menu-panel .menu-card span{font-size:25px}
  .med-form input,.med-form select,.med-time-input input{min-height:50px;font-size:18px}
  .med-submit,.med-reset,.med-cancel,.med-notify-btn{font-size:17px;padding:12px 16px}
  .med-form-grid,.med-actions,.med-notify-actions{grid-template-columns:1fr}
  .med-time-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .med-day-head{display:grid}
  .med-notify-actions{width:100%}
  .med-item{grid-template-columns:1fr;gap:10px}
  .med-check{grid-template-columns:54px 24px minmax(0,1fr)}
  .med-check strong,.med-check em,.med-condition,.med-list small{grid-column:3}
  .med-card-actions{justify-content:stretch}
  .med-edit-btn{width:100%}
}

@media(max-width:980px){
  .med-form-grid,.xe-summary-grid,.xe-workbench,.xe-charts,.xe-source-grid,.xe-meal-dashboard{
    grid-template-columns:1fr;
  }

  .xe-product-entry,.xe-field-grid,.xe-formula-panel{
    grid-template-columns:1fr;
  }
}

@media(max-width:560px){
  #xeSection{
    width:min(100%,calc(100vw - 24px));
  }

  .xe-calculator{
    font-size:16px;
  }

  .xe-metric strong{
    font-size:32px;
  }

  .xe-dose-box strong{
    font-size:42px;
  }
}