:root{
  --bg:#07131b;
  --bg2:#0b1f2a;
  --bg3:#0f2c38;
  --text:#ebf7ff;
  --text-soft:#a9c5d2;
  --card:rgba(11, 24, 34, 0.82);
  --card-strong:rgba(14, 31, 43, 0.94);
  --border:#1b4250;
  --border2:#28586a;
  --glow:rgba(105, 231, 255, 0.16);

  --btn:#7ef0c5;
  --btn2:#59c7ff;
  --btnText:#041017;

  --warn:#ff7b72;
  --ok:#9cf5d0;

  --amber:#ffd166;
}

/* ---------- base ---------- */
*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:"Aptos","Segoe UI Variable","Trebuchet MS","Segoe UI",sans-serif;
  background-color:#07131b;
  background:
    radial-gradient(circle at top left, rgba(89,199,255,0.14), transparent 28%),
    radial-gradient(circle at top right, rgba(126,240,197,0.10), transparent 24%),
    linear-gradient(180deg, #081018 0%, var(--bg) 28%, #061019 100%);
  color:var(--text);
  min-height:100vh;
  letter-spacing:.01em;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.03), transparent 22%, transparent 72%, rgba(255,255,255,0.02)),
    repeating-linear-gradient(120deg, rgba(126,240,197,0.035) 0 1px, transparent 1px 22px);
  opacity:.45;
  mix-blend-mode:screen;
}

.wrap{
  max-width:1040px;
  margin:0 auto;
  padding:28px 24px 40px;
}

/* ---------- admin workspace ---------- */
body.admin-page{
  min-height:100vh;
  background:
    radial-gradient(circle at 12% 0%, rgba(126,240,197,.08), transparent 30%),
    radial-gradient(circle at 88% 6%, rgba(89,199,255,.08), transparent 32%),
    var(--bg);
}

body.admin-page .wrap{
  width:min(1560px, calc(100% - 48px));
  max-width:none;
  margin-inline:auto;
}

body.admin-page .card{
  border-color:rgba(89,199,255,.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 34%),
    rgba(4,16,24,.78);
}

body.admin-page .section-head,
body.admin-page .admin-head,
body.admin-page .wa-top{
  gap:18px;
}

body.admin-page .section-head h1,
body.admin-page .admin-head h1,
body.admin-page .wa-top h1{
  font-size:clamp(28px, 3vw, 42px);
  line-height:1.05;
}

body.admin-page .hero-actions,
body.admin-page .wa-actions{
  align-items:center;
  justify-content:flex-end;
}

body.admin-page .brand-footer{
  margin-top:18px;
}

.admin-workspace-card{
  padding:24px;
}

.admin-wide-card{
  margin-top:16px;
}

@media (max-width:760px){
  body.admin-page .wrap{
    width:100%;
    padding:18px;
  }
  body.admin-page .section-head,
  body.admin-page .admin-head,
  body.admin-page .wa-top{
    display:block;
  }
  body.admin-page .hero-actions,
  body.admin-page .wa-actions{
    justify-content:flex-start;
    margin-top:14px;
  }
  .admin-workspace-card{
    padding:18px;
  }
}

h1{
  font-size:24px;
  margin:0 0 6px;
  letter-spacing:.01em;
}

p{
  opacity:.94;
  line-height:1.5;
  color:var(--text-soft);
}

ul{ margin:8px 0 0 18px; padding:0; }
li{ margin:6px 0; }

.muted{
  opacity:1;
  font-size:12px;
  color:var(--text-soft);
}
.warn{ color:var(--warn); }
.ok{ color:var(--ok); }

.app-shell-page{
  background-color:#07131b;
}

.app-shell{
  max-width:1680px;
  display:grid;
  grid-template-columns:320px minmax(0, 1fr);
  gap:24px;
  align-items:start;
}

.app-main{
  min-width:0;
}

.app-sidebar{
  position:sticky;
  top:10px;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:20px 18px;
  border-radius:28px;
  border:1px solid rgba(89,199,255,.14);
  background:
    radial-gradient(circle at top left, rgba(126,240,197,.10), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.022), transparent 28%),
    rgba(6,17,24,.88);
  box-shadow:
    0 22px 46px rgba(3,11,18,.28),
    inset 0 1px 0 rgba(255,255,255,.03);
  height:calc(100vh - 20px);
  max-height:calc(100vh - 20px);
  min-height:calc(100vh - 20px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(89,199,255,.32) rgba(4,16,24,.18);
  z-index:20;
}

.app-sidebar::-webkit-scrollbar{ width:8px; }
.app-sidebar::-webkit-scrollbar-track{
  background:rgba(4,16,24,.18);
  border-radius:999px;
}
.app-sidebar::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(126,240,197,.28), rgba(89,199,255,.32));
  border-radius:999px;
}

.app-sidebar-brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:4px 4px 10px;
}

.app-sidebar-brand-mark{
  width:54px;
  height:54px;
  padding:7px;
  display:grid;
  place-items:center;
  border-radius:16px;
  border:1px solid rgba(89,199,255,.18);
  background:
    radial-gradient(circle at 28% 22%, rgba(89,199,255,.18), transparent 42%),
    rgba(5,18,26,.78);
  box-shadow:0 12px 24px rgba(3,11,18,.20);
}

.app-sidebar-brand-mark img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.app-sidebar-brand-title{
  font-size:20px;
  font-weight:900;
  line-height:1.1;
  margin:0;
}

.app-sidebar-brand-sub{
  margin-top:4px;
  color:var(--text-soft);
  font-size:13px;
  line-height:1.42;
}

.app-sidebar-group{
  display:grid;
  gap:8px;
}

.app-sidebar-group-title{
  padding:0 6px;
  color:#9cf5d0;
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.app-sidebar-nav{
  display:grid;
  gap:6px;
}

.app-sidebar-link{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:11px 13px;
  border-radius:17px;
  color:#eaf9ff;
  text-decoration:none;
  border:1px solid rgba(89,199,255,.08);
  background:rgba(255,255,255,.02);
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
}

.app-sidebar-link:hover,
.app-sidebar-link:focus-visible{
  transform:translateX(2px);
  border-color:rgba(126,240,197,.30);
  background:rgba(126,240,197,.06);
}

.app-sidebar-link.is-active{
  border-color:rgba(126,240,197,.36);
  background:
    linear-gradient(90deg, rgba(126,240,197,.16), transparent 80%),
    rgba(126,240,197,.06);
  box-shadow:0 0 0 1px rgba(126,240,197,.10);
}

.app-sidebar-link-num{
  width:24px;
  height:24px;
  flex:0 0 24px;
  display:grid;
  place-items:center;
  border-radius:9px;
  border:1px solid rgba(89,199,255,.16);
  background:rgba(89,199,255,.08);
  color:#dff7ff;
  font-size:11px;
  font-weight:900;
}

.app-sidebar-link-text{
  font-size:14px;
  font-weight:800;
  line-height:1.25;
}

.app-sidebar-panel{
  padding:16px;
  border-radius:20px;
  border:1px solid rgba(89,199,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 26%),
    rgba(4,16,24,.54);
}

.app-sidebar-panel-title{
  font-size:15px;
  font-weight:900;
  margin-bottom:4px;
}

.app-sidebar-panel-text{
  font-size:13px;
  line-height:1.5;
  color:var(--text-soft);
}

.app-mobile-topbar,
.app-sidebar-backdrop{
  display:none;
}

/* ---------- layout ---------- */
.topnav{
  display:flex;
  gap:10px;
  align-items:center;
  margin:10px 0 18px;
  flex-wrap:wrap;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(89,199,255,0.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.018), transparent 30%),
    rgba(6,18,26,0.52);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.02),
    0 10px 24px rgba(3,11,18,0.14);
}

.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:14px;
}

.pair-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 14px;
  margin-top:12px;
}

/* ---------- cards ---------- */
.card{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.018), transparent 26%),
    var(--card);
  border:1px solid var(--border);
  box-shadow:
    0 16px 42px rgba(3, 11, 18, 0.34),
    inset 0 1px 0 rgba(255,255,255,0.03);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-radius:18px;
  padding:18px;
  margin:14px 0;
}

.hr{
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(92, 200, 255, 0.32), transparent);
  margin:16px 0;
}

.subcard{
  background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(0,0,0,0.02)), rgba(6,18,26,0.72);
  border:1px solid var(--border2);
  border-radius:16px;
  padding:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.025);
}

.subhead{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:12px;
}

.subtitle{
  font-weight:800;
  font-size:14px;
}

/* ---------- links / buttons ---------- */
.linkbtn{
  display:inline-block;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--border2);
  color:var(--text);
  text-decoration:none;
  background:linear-gradient(180deg, rgba(17,42,54,0.88), rgba(9,22,30,0.94));
  box-shadow:0 8px 22px rgba(3, 11, 18, 0.18);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.linkbtn:hover{
  border-color:rgba(89,199,255,0.7);
  box-shadow:0 0 0 1px rgba(89,199,255,0.16), 0 12px 28px rgba(8, 25, 35, 0.28);
  transform:translateY(-1px);
}

.menu-return{
  margin:16px 0 14px;
}

.menu-return-card{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(89,199,255,0.28);
  background:
    radial-gradient(circle at right center, rgba(126,240,197,0.12), transparent 24%),
    linear-gradient(135deg, rgba(11,31,41,0.96), rgba(6,17,24,0.98));
  color:var(--text);
  text-decoration:none;
  box-shadow:
    0 16px 32px rgba(3, 11, 18, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.03);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.menu-return-card:hover{
  transform:translateY(-2px);
  border-color:rgba(126,240,197,0.52);
  box-shadow:
    0 20px 38px rgba(3, 11, 18, 0.34),
    0 0 0 1px rgba(126,240,197,0.14);
}

.menu-return-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:72px;
  height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(126,240,197,0.22);
  background:rgba(7,23,31,0.82);
  color:#dffcff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.menu-return-body{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.menu-return-title{
  font-size:16px;
  font-weight:900;
  letter-spacing:.01em;
}

.menu-return-text{
  font-size:13px;
  color:var(--text-soft);
  line-height:1.4;
}

.menu-return-arrow{
  margin-left:auto;
  font-size:24px;
  line-height:1;
  color:#9ff7ef;
  opacity:.9;
}

.page-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin:6px 0 20px;
}

.page-toolbar-left{
  flex:1 1 320px;
  min-width:0;
}

.page-toolbar-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.info-overview{
  padding-top:16px;
}

.info-overview-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-bottom:14px;
}

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

.fact-card{
  padding:16px;
  border-radius:18px;
  border:1px solid var(--border2);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.018), transparent 30%),
    rgba(7, 20, 28, 0.88);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.025);
}

.fact-card-neutral{
  border-color:rgba(89,199,255,0.24);
}

.fact-card-danger{
  border-color:rgba(239,68,68,0.5);
  background:
    linear-gradient(180deg, rgba(239,68,68,0.15), rgba(239,68,68,0.045) 42%, transparent 100%),
    rgba(16, 18, 24, 0.94);
  box-shadow:
    inset 4px 0 0 rgba(239,68,68,0.75),
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 0 0 1px rgba(239,68,68,0.08);
}

.fact-card-danger .fact-card-tag{
  border-color:rgba(239,68,68,0.54);
  background:rgba(239,68,68,0.13);
  color:#ffd7d7;
}

.fact-card-danger .fact-card-title{
  color:#fff7f7;
}

.fact-card-positive{
  border-color:rgba(126,240,197,0.26);
  background:
    linear-gradient(180deg, rgba(126,240,197,0.06), transparent 34%),
    rgba(7, 20, 28, 0.9);
}

.fact-card-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(89,199,255,0.18);
  background:rgba(8, 25, 34, 0.88);
  color:#dff7ff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.fact-card-title{
  margin-top:12px;
  font-size:16px;
  font-weight:900;
  line-height:1.2;
}

.fact-card-text{
  margin-top:8px;
  font-size:13px;
  line-height:1.5;
  color:var(--text-soft);
}

.photo-panel-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

.photo-panel{
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(89,199,255,0.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.018), transparent 28%),
    rgba(7, 20, 28, 0.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.02);
}

.photo-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:10px;
  margin-bottom:12px;
}

.photo-tight-grid{
  margin-top:0;
}

.photo-measure-grid{
  margin-top:0;
  gap:16px 14px;
}

.photo-note-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:6px;
  font-size:13px;
  line-height:1.5;
  color:var(--text-soft);
}

.btn{
  background:linear-gradient(135deg, var(--btn) 0%, var(--btn2) 100%);
  border:0;
  color:var(--btnText);
  font-weight:800;
  padding:12px 16px;
  border-radius:14px;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(89, 199, 255, 0.20);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.btn:hover{
  filter:brightness(1.04);
  transform:translateY(-1px);
  box-shadow:0 14px 32px rgba(89, 199, 255, 0.26);
}

.btn.btn-primary{
  min-width:220px;
  padding:12px 18px;
  border-radius:14px;
  letter-spacing:.2px;
}

/* ---------- inputs ---------- */
label{
  display:block;
  font-size:12px;
  opacity:1;
  color:var(--text-soft);
  margin:0 0 6px;
}

input,
select,
textarea{
  width:100%;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid var(--border2);
  background:rgba(4, 16, 23, 0.84);
  background-color:rgba(4, 16, 23, 0.84);
  color:var(--text);
  -webkit-text-fill-color:var(--text);
  appearance:none;
  -webkit-appearance:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.02);
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

textarea{
  min-height:118px;
  resize:vertical;
  line-height:1.5;
}

input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:rgba(126,240,197,0.7);
  box-shadow:0 0 0 3px rgba(126,240,197,0.12), 0 0 0 1px rgba(89,199,255,0.08);
  background:rgba(5, 18, 26, 0.96);
}

input[type="checkbox"]{
  width:28px;
  height:28px;
  min-width:28px;
  padding:0;
  margin:0;
  border-radius:9px;
  border:1px solid rgba(89,199,255,.42);
  background:rgba(2,12,18,.78);
  appearance:none;
  -webkit-appearance:none;
  display:inline-grid;
  place-items:center;
  vertical-align:middle;
  cursor:pointer;
}

input[type="checkbox"]::after{
  content:"";
  width:12px;
  height:7px;
  border-left:3px solid #041017;
  border-bottom:3px solid #041017;
  transform:rotate(-45deg) scale(0);
  transition:transform .12s ease;
  margin-top:-2px;
}

input[type="checkbox"]:checked{
  border-color:rgba(126,240,197,.82);
  background:linear-gradient(135deg, #7ef0c5, #59c7ff);
  box-shadow:0 0 0 3px rgba(126,240,197,.10);
}

input[type="checkbox"]:checked::after{
  transform:rotate(-45deg) scale(1);
}

input[type="radio"]{
  width:24px;
  height:24px;
  min-width:24px;
  padding:0;
  margin:0;
  border-radius:999px;
  border:1px solid rgba(89,199,255,.42);
  background:rgba(2,12,18,.78);
  appearance:none;
  -webkit-appearance:none;
  display:inline-grid;
  place-items:center;
  vertical-align:middle;
  cursor:pointer;
}

input[type="radio"]::after{
  content:"";
  width:10px;
  height:10px;
  border-radius:999px;
  background:#041017;
  transform:scale(0);
  transition:transform .12s ease;
}

input[type="radio"]:checked{
  border-color:rgba(126,240,197,.82);
  background:linear-gradient(135deg, #7ef0c5, #59c7ff);
  box-shadow:0 0 0 3px rgba(126,240,197,.10);
}

input[type="radio"]:checked::after{
  transform:scale(1);
}

.check-tile:has(input:checked),
.algae-check:has(input:checked){
  border-color:rgba(126,240,197,.52);
  background:rgba(126,240,197,.08);
  color:#eafff8;
}

.field{ margin:0; }

.field-label{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:12px;
}

.field-meta{
  font-size:11px;
  opacity:.55;
  letter-spacing:.2px;
}

/* ---------- micro (Fe) special ---------- */
.micro-field{
  position:relative;
  padding-top:6px;
}

.micro-head{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-bottom:6px;
}

.micro-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--border2);
  background:rgba(7, 23, 31, 0.82);
  font-size:11px;
  font-weight:900;
  letter-spacing:.3px;
  text-transform:lowercase;
  opacity:.95;
}

.micro-title{ font-size:12px; font-weight:900; opacity:.95; }
.micro-unit{ font-size:12px; opacity:.65; }

.micro-sub{
  font-size:11px;
  opacity:.6;
  margin:-2px 0 8px;
}

.micro-field input{
  max-width:180px;
}

.micro-field input:focus{
  outline:none;
  border-color:var(--btn);
  box-shadow:0 0 0 2px rgba(43,127,255,.15);
}

/* ---------- hero ---------- */
.hero-card{ padding:16px; }

.ar-topnav{
  margin:0 0 10px;
}

.ar-hero{
  padding:18px;
}

.ar-hero .hero-head{
  margin-bottom:12px;
}

.ar-hero-text{
  margin-top:6px;
  max-width:780px;
}

.ar-flow{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px;
  margin-top:12px;
}

.ar-flow-step{
  min-height:38px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--border2);
  background:rgba(5, 18, 26, 0.58);
  color:var(--text);
  font-size:12px;
  font-weight:800;
  line-height:1.2;
}

.ar-flow-step strong{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(126,240,197,0.12);
  color:#bfffee;
  font-size:11px;
  flex:0 0 auto;
}

.ar-info-compact{
  padding:0;
}

.ar-info-compact summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
}

.ar-info-compact summary::-webkit-details-marker{
  display:none;
}

.ar-info-compact .info-overview-grid,
.ar-info-compact .notice{
  margin:0 16px 16px;
}

.ar-info-compact[open] summary{
  border-bottom:1px solid var(--border2);
  margin-bottom:14px;
}

.hero-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}

.hero-title{
  font-size:17px;
  font-weight:800;
  letter-spacing:.015em;
}

.hero-badge{
  border:1px solid var(--border2);
  background:rgba(5, 17, 24, 0.82);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  opacity:1;
  color:#dff7ff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);
}

.hero-body{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:14px;
}

.hero-input input{
  font-size:18px;
  padding:12px 12px;
}

.hero-kpi{
  background:linear-gradient(180deg, rgba(9,28,39,0.94), rgba(5,16,23,0.94));
  border:1px solid var(--border2);
  border-radius:16px;
  padding:12px 14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);
}

.hero-kpi-value{
  font-size:26px;
  font-weight:900;
  margin:4px 0 2px;
}

/* ---------- presets ---------- */
.preset-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:10px 0 12px;
}

.chip{
  border:1px solid var(--border2);
  background:linear-gradient(180deg, rgba(14,38,48,0.9), rgba(6,19,27,0.96));
  color:var(--text);
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  font-size:12px;
  font-weight:800;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.chip:hover{
  border-color:rgba(126,240,197,0.72);
  box-shadow:0 0 0 1px rgba(126,240,197,0.16);
  transform:translateY(-1px);
}

/* ---------- status ---------- */
.status-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:14px;
}

.status-card{
  background:linear-gradient(180deg, rgba(8,25,34,0.94), rgba(5,15,22,0.94));
  border:1px solid var(--border2);
  border-radius:16px;
  padding:14px 16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.025);
}

.status-card.ok{ border-left:4px solid var(--ok); }
.status-card.warn{ border-left:4px solid var(--warn); }
.status-card.info{
  border-left:4px solid #5cc8ff;
  border-color:rgba(92,200,255,0.28);
  background:rgba(92,200,255,0.06);
}
.status-card.action{
  border-left:4px solid #7ef0c5;
  border-color:rgba(126,240,197,0.28);
  background:rgba(126,240,197,0.06);
}
.status-card.emphasis{
  border-left:4px solid #ffd166;
  border-color:rgba(255,209,102,0.28);
  background:rgba(255,209,102,0.06);
}
.status-card.danger{
  border-left:4px solid #ff6b6b;
  border-color:rgba(255,107,107,0.28);
  background:rgba(255,107,107,0.08);
}

.status-card-wide{
  grid-column:1 / -1;
}

.status-title{ font-size:12px; opacity:.75; margin-bottom:6px; }
.status-value{ font-size:20px; font-weight:900; margin-bottom:4px; }
.status-text{ font-size:13px; opacity:.85; }

/* ---------- hint ---------- */
.hint-line{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--border2);
  background:linear-gradient(180deg, rgba(9,29,39,0.82), rgba(5,16,23,0.9));
  border-radius:12px;
  font-size:13px;
  opacity:.95;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.025);
}

.hint-badge{
  border:1px solid var(--border2);
  background:rgba(7,23,31,0.82);
  padding:3px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}

/* ---------- details / accordion ---------- */
.details-box{
  margin-top:14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.018), transparent 28%),
    var(--card-strong);
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px 16px;
  box-shadow:
    0 14px 30px rgba(3, 11, 18, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.03);
}

.details-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  font-weight:900;
  list-style:none;
}

.details-summary::-webkit-details-marker{ display:none; }

.sum-left{
  display:flex;
  align-items:baseline;
  gap:8px;
}

.sum-title{ font-weight:900; }

.sum-right{
  display:flex;
  align-items:center;
  gap:10px;
}

.details-summary::after{
  content:"▾";
  opacity:.7;
  transition:transform .2s ease;
}

.details-box[open] .details-summary::after{
  transform:rotate(180deg);
}

.details-content{
  margin-top:14px;
  padding-top:14px;
  border-top:1px dashed var(--border2);
}

.details-content h4{ margin:10px 0 6px; font-size:14px; }
.details-content p{ margin:0 0 10px; line-height:1.35; }

/* ---------- toggle ---------- */
.toggle-line{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  cursor:pointer;
  padding:10px 0;
}

.toggle-line input{
  width:auto;
  margin:0;
  transform:scale(1.15);
}

.toggle-text{
  display:flex;
  flex-direction:row;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
}

.toggle-title{ font-weight:900; }
.toggle-sub{ opacity:.75; font-size:12px; }

/* ---------- results ---------- */
.result-wrap{
  padding-top:14px;
  background:
    radial-gradient(circle at top right, rgba(89,199,255,0.08), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,0.018), transparent 26%),
    var(--card-strong);
}

.result-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:10px;
}

.result-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin:12px 0 6px;
}

.result-note{
  text-align:center;
  max-width:520px;
  opacity:.75;
  line-height:1.35;
}

.dose-plan{
  margin:16px 0 4px;
  padding:16px;
  border:1px solid rgba(92,200,255,0.22);
  border-radius:20px;
  background:
    radial-gradient(circle at top right, rgba(92,200,255,0.12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)),
    rgba(4,18,26,0.58);
}

.dose-plan-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  margin-bottom:12px;
}

.dose-plan-kicker{
  color:var(--btn);
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.dose-plan-heading{
  margin-top:2px;
  font-size:21px;
  font-weight:900;
  letter-spacing:.01em;
}

.dose-plan-note{
  max-width:260px;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
  text-align:right;
}

.dose-plan-item{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  gap:12px;
  align-items:center;
  padding:12px 14px;
  border:1px solid rgba(var(--dose-rgb, 92,200,255), 0.34);
  border-radius:16px;
  background:
    linear-gradient(90deg, rgba(var(--dose-rgb, 92,200,255), 0.22), rgba(var(--dose-rgb, 92,200,255), 0.08) 40%, rgba(255,255,255,0.015) 72%),
    radial-gradient(circle at 96% 50%, rgba(var(--dose-rgb, 92,200,255), 0.12), transparent 38%),
    rgba(2,13,20,0.50);
  box-shadow:
    inset 5px 0 0 rgba(var(--dose-rgb, 92,200,255), 0.64),
    0 10px 22px rgba(2,8,13,.18);
}

.dose-plan-item + .dose-plan-item{ margin-top:9px; }

.dose-plan-step{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:#f8ffff;
  font-weight:900;
  background:rgba(var(--dose-rgb, 92,200,255), 0.26);
  border:1px solid rgba(var(--dose-rgb, 92,200,255), 0.52);
  box-shadow:0 0 18px rgba(var(--dose-rgb, 92,200,255), .16);
}

.dose-plan-title{
  font-weight:900;
  line-height:1.25;
}

.dose-plan-text{
  margin-top:3px;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}

.dose-plan-amount{
  color:#f7feff;
  font-size:20px;
  font-weight:900;
  white-space:nowrap;
  text-shadow:
    0 0 12px rgba(var(--dose-rgb, 92,200,255), 0.38),
    0 1px 0 rgba(0,0,0,.35);
}

.dose-plan-n{ --dose-rgb:82, 211, 106; }
.dose-plan-po4{ --dose-rgb:239, 47, 61; }
.dose-plan-fe{ --dose-rgb:255, 122, 47; }
.dose-plan-k{ --dose-rgb:242, 211, 69; }
.dose-plan-mg{ --dose-rgb:126, 240, 197; }
.dose-plan-muted{ --dose-rgb:128, 160, 174; opacity:.82; }

.section-title{ margin:0 0 10px; font-size:16px; }

.trend-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:12px;
  margin:14px 0 18px;
}

.trend-row{
  min-height:128px;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px;
  border:1px solid var(--border2);
  border-radius:16px;
  background:rgba(4,18,26,0.5);
}

.trend-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.trend-label{
  font-size:12px;
  font-weight:900;
  color:var(--muted);
}

.trend-latest{
  min-width:44px;
  padding:4px 7px;
  border:1px solid rgba(126,240,197,.16);
  border-radius:999px;
  color:#dffcf3;
  background:rgba(126,240,197,.055);
  font-size:10px;
  font-weight:900;
  text-align:center;
}

.trend-chart{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:8px;
  align-items:stretch;
}

.trend-scale{
  height:82px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-end;
  color:rgba(215,237,244,.56);
  font-size:9px;
  line-height:1;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}

.trend-plot{
  position:relative;
  height:82px;
  overflow:hidden;
  border-left:1px solid rgba(126,240,197,.12);
}

.trend-gridlines{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  pointer-events:none;
}

.trend-gridlines span{
  display:block;
  height:1px;
  background:linear-gradient(90deg, rgba(126,240,197,.22), rgba(126,240,197,.04));
}

.trend-bars{
  height:82px;
  display:flex;
  align-items:flex-end;
  gap:5px;
  position:relative;
  z-index:1;
  padding-left:6px;
}

.trend-bar{
  flex:1;
  min-width:5px;
  border-radius:999px 999px 4px 4px;
  background:linear-gradient(180deg, rgba(126,240,197,0.9), rgba(92,200,255,0.42));
  box-shadow:0 0 12px rgba(92,200,255,0.16);
}

.table-wrap{
  width:100%;
  overflow-x:auto;
  border:1px solid var(--border2);
  border-radius:16px;
}

.waterlog-table{
  width:100%;
  border-collapse:collapse;
  min-width:860px;
  background:rgba(4,18,26,0.42);
}

.waterlog-table th,
.waterlog-table td{
  padding:11px 12px;
  border-bottom:1px solid rgba(125,170,190,0.14);
  text-align:left;
  white-space:nowrap;
}

.waterlog-table th{
  color:#dffaff;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:rgba(92,200,255,0.08);
}

.waterlog-table td{
  color:var(--text);
  font-size:13px;
}

.waterlog-table tr:last-child td{ border-bottom:0; }

.calcium-tool .grid2{
  align-items:stretch;
}

.calcium-status{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:190px;
  border-color:rgba(92,200,255,0.26);
  background:
    radial-gradient(circle at top right, rgba(92,200,255,0.12), transparent 42%),
    rgba(4,18,26,0.62);
}

.calcium-status.is-ok{
  border-color:rgba(126,240,197,0.42);
  background:
    radial-gradient(circle at top right, rgba(126,240,197,0.16), transparent 42%),
    rgba(4,18,26,0.62);
}

.calcium-status.is-warn{
  border-color:rgba(255,209,102,0.44);
  background:
    radial-gradient(circle at top right, rgba(255,209,102,0.16), transparent 42%),
    rgba(4,18,26,0.62);
}

.calcium-status.is-danger{
  border-color:rgba(255,107,107,0.46);
  background:
    radial-gradient(circle at top right, rgba(255,107,107,0.18), transparent 42%),
    rgba(4,18,26,0.62);
}

.calcium-status-tag{
  width:max-content;
  border:1px solid currentColor;
  border-radius:999px;
  padding:5px 10px;
  color:#9cf5d0;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.calcium-status.is-warn .calcium-status-tag{ color:#ffd166; }
.calcium-status.is-danger .calcium-status-tag{ color:#ff8c8c; }
.calcium-status.is-info .calcium-status-tag{ color:#8ddcff; }

.calcium-status-title{
  margin-top:14px;
  font-size:24px;
  font-weight:900;
  letter-spacing:.01em;
}

.calcium-status-text{
  margin-top:8px;
  color:var(--text-soft);
  line-height:1.55;
}

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

.calcium-formula-card{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:12px;
  border:1px solid rgba(92,200,255,0.16);
  border-radius:14px;
  background:rgba(4,18,26,0.44);
}

.calcium-formula-card span{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:9px;
  border:1px solid rgba(126,240,197,0.25);
  background:rgba(126,240,197,0.10);
  font-weight:900;
}

.calcium-formula-card p{
  margin:0;
  font-size:13px;
  line-height:1.45;
}

@media (max-width: 900px){
  .calcium-formula-grid{
    grid-template-columns:1fr;
  }
}

.result-card{
  background:rgba(255,255,255,.015);
  border:1px solid var(--border2);
  border-radius:14px;
  padding:12px 14px;
  margin:10px 0;
}

.product-card{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  padding:16px 18px;
  border-color:rgba(var(--product-rgb, 89,199,255), 0.3);
  background:
    linear-gradient(100deg, rgba(var(--product-rgb, 89,199,255), 0.13) 0%, rgba(var(--product-rgb, 89,199,255), 0.065) 34%, rgba(7, 20, 28, 0.92) 72%),
    radial-gradient(circle at top right, rgba(var(--product-rgb, 89,199,255), 0.13), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.03), transparent 30%),
    rgba(7, 20, 28, 0.88);
  box-shadow:
    inset 6px 0 0 rgba(var(--product-rgb, 89,199,255), 0.58),
    inset 0 1px 0 rgba(255,255,255,0.025),
    0 14px 28px rgba(3, 11, 18, 0.16),
    0 0 0 1px rgba(var(--product-rgb, 89,199,255), 0.08);
}

.product-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:38%;
  background:
    linear-gradient(135deg, rgba(var(--product-rgb, 89,199,255), 0.105), rgba(var(--product-rgb, 89,199,255), 0.025)),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 18px);
  pointer-events:none;
}

.product-card::after{
  content:"";
  position:absolute;
  right:-42px;
  top:-54px;
  width:160px;
  height:160px;
  border-radius:999px;
  background:rgba(var(--product-rgb, 89,199,255), 0.09);
  filter:blur(2px);
  pointer-events:none;
}

.product-card-n{
  --product-rgb:82, 211, 106;
  border-color:rgba(82,211,106,.34);
  background:
    linear-gradient(100deg, rgba(82,211,106,.16) 0%, rgba(82,211,106,.085) 34%, rgba(7,20,28,.92) 76%),
    radial-gradient(circle at top right, rgba(82,211,106,.14), transparent 36%),
    rgba(7,20,28,.92);
  box-shadow:inset 6px 0 0 rgba(82,211,106,.62), 0 16px 32px rgba(3,11,18,.20), 0 0 0 1px rgba(82,211,106,.09);
}

.product-card-po4{
  --product-rgb:239, 47, 61;
  border-color:rgba(239,47,61,.36);
  background:
    linear-gradient(100deg, rgba(239,47,61,.17) 0%, rgba(239,47,61,.085) 34%, rgba(7,20,28,.92) 76%),
    radial-gradient(circle at top right, rgba(239,47,61,.14), transparent 36%),
    rgba(7,20,28,.92);
  box-shadow:inset 6px 0 0 rgba(239,47,61,.62), 0 16px 32px rgba(3,11,18,.20), 0 0 0 1px rgba(239,47,61,.09);
}

.product-card-fe{
  --product-rgb:255, 122, 47;
  border-color:rgba(255,122,47,.37);
  background:
    linear-gradient(100deg, rgba(255,122,47,.17) 0%, rgba(255,122,47,.09) 34%, rgba(7,20,28,.92) 76%),
    radial-gradient(circle at top right, rgba(255,122,47,.15), transparent 36%),
    rgba(7,20,28,.92);
  box-shadow:inset 6px 0 0 rgba(255,122,47,.64), 0 16px 32px rgba(3,11,18,.20), 0 0 0 1px rgba(255,122,47,.10);
}

.product-card-k{
  --product-rgb:242, 211, 69;
  border-color:rgba(242,211,69,.38);
  background:
    linear-gradient(100deg, rgba(242,211,69,.16) 0%, rgba(242,211,69,.085) 34%, rgba(7,20,28,.92) 76%),
    radial-gradient(circle at top right, rgba(242,211,69,.14), transparent 36%),
    rgba(7,20,28,.92);
  box-shadow:inset 6px 0 0 rgba(242,211,69,.64), 0 16px 32px rgba(3,11,18,.20), 0 0 0 1px rgba(242,211,69,.10);
}

.product-card-n::before{ background:linear-gradient(135deg, rgba(82,211,106,.13), rgba(82,211,106,.025)), repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 1px, transparent 1px 18px); }
.product-card-po4::before{ background:linear-gradient(135deg, rgba(239,47,61,.13), rgba(239,47,61,.025)), repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 1px, transparent 1px 18px); }
.product-card-fe::before{ background:linear-gradient(135deg, rgba(255,122,47,.13), rgba(255,122,47,.025)), repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 1px, transparent 1px 18px); }
.product-card-k::before{ background:linear-gradient(135deg, rgba(242,211,69,.13), rgba(242,211,69,.025)), repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 1px, transparent 1px 18px); }

.product-card-n::after{ background:rgba(82,211,106,.10); }
.product-card-po4::after{ background:rgba(239,47,61,.10); }
.product-card-fe::after{ background:rgba(255,122,47,.11); }
.product-card-k::after{ background:rgba(242,211,69,.10); }

.product-card .result-main{
  position:relative;
  z-index:1;
}

.product-chip{
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  color:#f7fffb;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-shadow:0 1px 10px rgba(0,0,0,0.35);
}

.product-chip::before{
  content:"";
  display:inline-block;
  width:10px;
  height:10px;
  margin-right:8px;
  border-radius:999px;
  background:rgb(var(--product-rgb, 89,199,255));
  box-shadow:0 0 10px rgba(var(--product-rgb, 89,199,255), 0.44);
}

.product-card .result-title{
  font-size:14px;
}

.product-card .result-ml{
  color:#ffffff;
  text-shadow:
    0 0 14px rgba(var(--product-rgb, 89,199,255), 0.32),
    0 1px 0 rgba(0,0,0,0.32);
}

.result-main{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.result-title{ font-weight:900; font-size:13px; opacity:.95; }

.result-ml{
  font-size:28px;
  font-weight:900;
  letter-spacing:.2px;
}

.result-sub{ width:100%; margin-top:2px; font-size:12px; opacity:.68; }

.result-details{
  margin-top:10px;
  background:rgba(255,255,255,0.02);
  border:1px solid var(--border2);
  border-radius:12px;
  padding:8px 10px;
}

.result-details summary{
  cursor:pointer;
  font-weight:900;
  list-style:none;
}

.result-details summary::-webkit-details-marker{ display:none; }

/* ---------- product / recommendation cards ---------- */
.reco-subtitle{
  margin:16px 0 10px;
  font-size:14px;
  font-weight:800;
}

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

.cardlink{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--border2);
  background:var(--bg);
  text-decoration:none;
  color:var(--text);
  transition:transform .12s ease, border-color .12s ease, filter .12s ease;
}

.cardlink:hover{
  border-color:var(--btn);
  transform:translateY(-1px);
  filter:brightness(1.03);
}

.cardlink.is-disabled{
  opacity:.55;
  cursor:not-allowed;
}

.cardlink-img{
  width:76px;
  height:76px;
  border-radius:12px;
  border:1px solid var(--border2);
  overflow:hidden;
  flex:0 0 auto;
  background:rgba(255,255,255,0.02);
  display:flex;
  align-items:center;
  justify-content:center;
}

.cardlink-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.img-placeholder{ font-size:12px; opacity:.65; }

.cardlink-body{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.cardlink-title{
  font-size:14px;
  font-weight:800;
  line-height:1.2;
}

.cardlink-hint{
  font-size:12px;
  opacity:.75;
  line-height:1.3;
}

.cardlink-cta{
  font-size:12px;
  font-weight:800;
  color:var(--btn);
  opacity:.95;
}

/* ---------- unified notices / callouts (nicht transparent) ---------- */
.callouts{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:14px 0;
}

.notice{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid var(--border2);
  background:linear-gradient(180deg, rgba(12,31,41,0.84), rgba(7,18,25,0.92));
  position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.025);
}

.notice::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:4px;
  border-radius:999px;
}

.notice-badge{
  display:inline-flex;
  align-items:center;
  height:22px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.2px;
  border:1px solid var(--border2);
  background:rgba(7,23,31,0.82);
  white-space:nowrap;
  text-transform:lowercase;
}

.notice-body{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.notice-title{ font-weight:900; font-size:14px; }
.notice-text{ font-size:13px; opacity:.92; line-height:1.35; margin:0; }

.notice.info::before{ background:linear-gradient(180deg, #59c7ff, #8ad8ff); }
.notice.ok::before{ background:var(--ok); }
.notice.warn::before{ background:linear-gradient(180deg, #ffd166, #ffb347); }
.notice.danger::before{ background:var(--warn); }

/* ---------- brand footer ---------- */
.brand-footer{
  margin:18px 0 6px;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid var(--border2);
  background:var(--bg);
  text-align:center;
}

.brand-badge{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--border2);
  background:var(--card);
  font-weight:900;
  letter-spacing:.3px;
  margin-bottom:8px;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.social-links{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

.social-link{
  width:39px;
  height:39px;
  min-width:39px;
  max-width:39px;
  max-height:39px;
  display:inline-grid;
  place-items:center;
  border-radius:14px;
  border:1px solid rgba(126,240,197,.24);
  background:
    radial-gradient(circle at 30% 10%, rgba(255,255,255,.10), transparent 34%),
    rgba(3,15,22,.56);
  color:var(--text-soft);
  text-decoration:none;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
}

.social-link svg{
  width:20px;
  height:20px;
  max-width:20px;
  max-height:20px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.social-link-youtube svg path{
  fill:currentColor;
  stroke:none;
}

.social-link:hover,
.social-link:focus-visible{
  transform:translateY(-2px);
  color:var(--text);
  border-color:rgba(126,240,197,.58);
  box-shadow:0 0 0 3px rgba(126,240,197,.10), 0 12px 24px rgba(2,8,13,.28);
}

.social-link-instagram:hover,
.social-link-instagram:focus-visible{
  border-color:rgba(255,120,190,.62);
  box-shadow:0 0 0 3px rgba(255,120,190,.11), 0 12px 24px rgba(2,8,13,.28);
}

.social-link-tiktok:hover,
.social-link-tiktok:focus-visible{
  border-color:rgba(89,199,255,.62);
  box-shadow:0 0 0 3px rgba(89,199,255,.11), 0 12px 24px rgba(2,8,13,.28);
}

.social-link-youtube:hover,
.social-link-youtube:focus-visible{
  border-color:rgba(255,96,96,.64);
  box-shadow:0 0 0 3px rgba(255,96,96,.12), 0 12px 24px rgba(2,8,13,.28);
}

.legal-links{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
  font-size:12px;
}

.beta-note{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
  max-width:760px;
  margin:10px auto 0;
  color:var(--text-soft);
  font-size:12px;
  line-height:1.45;
  text-align:center;
}

.beta-note-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(126,240,197,.30);
  border-radius:999px;
  padding:4px 9px;
  color:#a5f6e3;
  background:rgba(126,240,197,.075);
  font-size:10px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.legal-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:31px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(126,240,197,.28);
  background:rgba(3,15,22,.45);
  color:var(--text-soft);
  text-decoration:none;
  font-weight:800;
  letter-spacing:.02em;
}

.legal-links a:hover,
.legal-links a:focus-visible{
  color:var(--text);
  border-color:rgba(126,240,197,.55);
  box-shadow:0 0 0 3px rgba(126,240,197,.10);
}

/* ---------- legacy links list (falls noch genutzt) ---------- */
.links a{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border2);
  text-decoration:none;
  color:var(--text);
  background:var(--bg);
  margin:8px 0;
}

.links a:hover{ border-color:var(--btn); }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .ar-flow{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .ar-info-compact summary{
    flex-direction:column;
  }

  .grid2{ grid-template-columns:1fr; }
  .pair-grid{ grid-template-columns:1fr; }
  .status-grid{ grid-template-columns:1fr; }
  .hero-body{ grid-template-columns:1fr; }
  .micro-field input{ max-width:100%; }
  .reco-grid{ grid-template-columns:1fr; }
  .dose-plan-head{
    display:block;
  }
  .dose-plan-note{
    max-width:none;
    margin-top:6px;
    text-align:left;
  }
  .dose-plan-item{
    grid-template-columns:auto minmax(0, 1fr);
  }
  .dose-plan-amount{
    grid-column:2;
    font-size:18px;
  }
  .trend-grid{
    grid-template-columns:1fr;
  }
  .trend-row{
    min-height:104px;
  }
}
/* ===== INDEX: weniger bunt, bessere Blickführung ===== */

/* Standard: Kacheln neutral, keine Farbbalken-Orgie */
.home-tile .notice{
  background:rgba(255,255,255,0.015);
  border:1px solid var(--border2);
}

/* Im Index: Farbbalken grundsätzlich aus */
.home-tile .notice::before{
  background:transparent !important;
}

/* Badge im Index: neutral, ruhig */
.home-tile .notice-badge{
  border-color:var(--border2) !important;
  background:rgba(255,255,255,0.02) !important;
  color:rgba(230,237,243,0.9) !important;
}

/* CTA bleibt blau als einziger klarer Blickanker */
.home-cta{
  color:var(--btn);
}

/* Hover: nur leicht, kein Farbgewitter */
.home-tile:hover .notice{
  border-color:rgba(43,127,255,0.35);
  filter:brightness(1.02);
}

/* Warnung: EIN klarer Akzent (links) + dezenter Hintergrund */
.home-tile .notice.warn{
  background:rgba(245,158,11,0.06);
  border-color:rgba(245,158,11,0.25);
}
.home-tile .notice.warn::before{
  background:#f59e0b !important;
}

/* Gefahr: wenn du später richtig rot willst (optional) */
.home-tile .notice.danger{
  background:rgba(239,68,68,0.06);
  border-color:rgba(239,68,68,0.25);
}
.home-tile .notice.danger::before{
  background:#ef4444 !important;
}

/* Wichtig: keine roten Textflächen im Index (die schreien zu hart) */
.home-tile .notice-text{
  color:rgba(230,237,243,0.9);
}
/* =========================
   MOBILE OPTIMIERUNG
   ========================= */

/* etwas mehr Luft links/rechts + bessere Lesbarkeit */
@media (max-width: 520px){
  .wrap{
    padding:16px;
  }

  .card{
    padding:14px;
    border-radius:16px;
  }

  p{ line-height:1.45; }

  /* Top-Buttons nicht so gequetscht */
  .topnav{
    padding:10px 12px;
    border-radius:16px;
    gap:8px;
  }
  .linkbtn{
    padding:10px 12px;
    border-radius:14px;
  }

  textarea{
    min-height:116px;
  }

  /* Hero: alles untereinander + etwas mehr spacing */
  .hero-head{
    align-items:flex-start;
    gap:10px;
    margin-bottom:12px;
  }

  .hero-body{
    grid-template-columns:1fr;
    gap:12px;
  }

  .hero-input input{
    font-size:18px;
    padding:14px 12px;
    border-radius:12px;
  }

  .hero-kpi{
    padding:14px;
    border-radius:16px;
  }

  .hero-kpi-value{
    font-size:28px;
    line-height:1.05;
  }

  /* Inputs allgemein: mehr fingerfreundlich */
  input{
    padding:14px 12px;
    border-radius:12px;
  }

  /* Pair/Grid: wirklich 1 Spalte, mehr Abstand */
  .pair-grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  /* Info-Kacheln: mehr Innenabstand + bessere Textführung */
  .notice{
    padding:14px;
    border-radius:16px;
    gap:12px;
  }
  .notice-title{
    font-size:14px;
  }
  .notice-text{
    font-size:13px;
    line-height:1.45;
  }
  .notice-badge{
    height:24px;
    padding:0 10px;
    font-size:12px;
  }

  .info-overview-head{
    flex-direction:column;
  }

  .info-overview-grid{
    grid-template-columns:1fr;
  }

  .fact-card{
    padding:14px;
    border-radius:16px;
  }

  .photo-panel{
    padding:14px;
    border-radius:16px;
  }

  .photo-panel-head{
    flex-direction:column;
    align-items:flex-start;
  }

  /* Status-Karten und Ergebnis-Karten: mehr Luft */
  .status-card{
    padding:14px;
    border-radius:16px;
  }
  .status-value{
    font-size:22px;
  }

  .result-card{
    padding:14px;
    border-radius:16px;
  }
  .result-ml{
    font-size:30px;
    line-height:1.05;
  }

  /* Details (Accordion): weniger „Blockig“ */
  .details-box{
    padding:14px;
    border-radius:16px;
  }

  /* Links/Empfehlungskarten: Bild kleiner, Text sauber */
  .cardlink{
    padding:12px;
    border-radius:16px;
  }
  .cardlink-img{
    width:58px;
    min-width:58px;
    height:58px;
    border-radius:14px;
  }
}
select{
  width:100%;
  padding:10px 10px;
  border-radius:10px;
  border:1px solid var(--border2);
  background:var(--bg);
  color:var(--text);
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(230,237,243,0.75) 50%),
    linear-gradient(135deg, rgba(230,237,243,0.75) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:34px;
}

select:focus{
  outline:none;
  border-color:var(--btn);
  box-shadow:0 0 0 2px rgba(43,127,255,.15);
}

/* ---------- Ergebnis Action-Bar (unten schön) ---------- */
.actionbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-top:12px;
}

.actionbar-left{
  flex:1 1 320px;
  min-width:260px;
}

.actionbar-right{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.actionbar .btn.btn-primary{
  min-width:280px;
}

.actionbar-note{
  text-align:center;
  max-width:520px;
  opacity:.75;
  font-size:12px;
  line-height:1.35;
}

/* Mobile: alles untereinander */
@media (max-width: 700px){
  .actionbar{
    align-items:stretch;
  }
  .actionbar-right{
    align-items:stretch;
  }
  .actionbar .btn.btn-primary{
    width:100%;
    min-width:0;
  }
  .actionbar-note{
    text-align:left;
  }
}

/* =========================
   NITRIT NOTFALL: SOFORTPLAN KACHELN
   (deutlich unterscheidbar, paniktauglich)
   ========================= */

.step-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  margin-top:12px;
}

@media (max-width:900px){
  .step-grid{ grid-template-columns:1fr; }
}

.step-card{
  position:relative;
  display:flex;
  flex-direction:column;
  border:1px solid var(--border2);
  border-radius:12px;
  padding:14px 16px 16px;
  background:var(--card);
  min-height:172px;
}

.step-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  border-radius:12px 0 0 12px;
  opacity:0.95;
}

.step-kicker{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.step-no{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:22px;
  padding:0;
  border-radius:999px;
  border:1px solid var(--border2);
  background:rgba(5, 18, 26, 0.9);
  font-size:12px;
  font-weight:900;
  opacity:.95;
  flex:0 0 auto;
}

.step-title{
  font-size:14px;
  font-weight:900;
  margin:0;
  line-height:1.25;
  text-align:right;
}

.step-text{
  margin:0;
  font-size:13px;
  line-height:1.45;
  opacity:.92;
}

.step-mini{
  margin-top:12px;
  padding-top:9px;
  border-top:1px dashed var(--border2);
  font-size:12px;
  opacity:.76;
  line-height:1.4;
}

.step-products{
  display:grid;
  gap:8px;
  margin-top:auto;
  transform:translateY(4px);
}

.step-product{
  display:grid;
  grid-template-columns:42px minmax(0, 1fr);
  gap:10px;
  align-items:center;
  padding:9px 10px;
  border-radius:10px;
  border:1px solid var(--border2);
  background:rgba(5, 18, 26, 0.42);
  color:var(--text);
  text-decoration:none;
  transition:transform .14s ease, border-color .14s ease, background .14s ease;
}

a.step-product:hover{
  transform:translateY(-1px);
  border-color:var(--btn);
  background:rgba(7, 24, 34, 0.78);
}

.step-card > .step-product{
  margin-top:auto;
  transform:translateY(4px);
}

.step-card > a.step-product:hover{
  transform:translateY(2px);
}

.step-product.is-disabled{
  opacity:.72;
}

.step-product-media{
  width:42px;
  height:34px;
  border-radius:8px;
  border:1px solid var(--border2);
  background:
    linear-gradient(135deg, rgba(126,240,197,.12), rgba(89,199,255,.06)),
    rgba(255,255,255,.025);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text);
  font-size:10px;
  font-weight:900;
  text-align:center;
  line-height:1.1;
  text-transform:uppercase;
}

.step-product-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  background:rgba(255,255,255,0.96);
}

.step-product-body{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.step-product-eyebrow{
  font-size:10px;
  font-weight:900;
  letter-spacing:.02em;
  opacity:.58;
  text-transform:uppercase;
}

.step-product-label{
  font-size:12px;
  font-weight:900;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.step-product-cta{
  font-size:11px;
  font-weight:900;
  color:var(--btn);
  white-space:nowrap;
}

.step-product.is-disabled .step-product-cta{
  color:var(--text-soft);
}

/* Varianten (klar unterscheidbar) */
.step-card.critical{ background:rgba(239,68,68,0.06); border-color:rgba(239,68,68,0.28); }
.step-card.critical::before{ background:var(--warn); }

.step-card.action{ background:rgba(43,127,255,0.06); border-color:rgba(43,127,255,0.28); }
.step-card.action::before{ background:var(--btn); }

.step-card.support{ background:rgba(245,158,11,0.06); border-color:rgba(245,158,11,0.28); }
.step-card.support::before{ background:var(--amber); }

.step-card.okay{ background:rgba(167,243,208,0.06); border-color:rgba(167,243,208,0.20); }
.step-card.okay::before{ background:var(--ok); }

.nitrit-reco-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
  margin-top:14px;
}

.nitrit-reco-section{
  border:1px solid var(--border2);
  border-radius:16px;
  background:var(--bg);
  padding:12px;
}

.nitrit-reco-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.nitrit-reco-head h3{
  margin:0;
  font-size:14px;
  font-weight:900;
}

.nitrit-reco-head span{
  font-size:11px;
  opacity:.62;
  white-space:nowrap;
}

.nitrit-product-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.nitrit-product-grid .cardlink{
  min-height:104px;
  background:rgba(5, 18, 26, 0.72);
}

.nitrit-product-grid .cardlink-img{
  width:72px;
  height:72px;
}

@media (max-width:1100px){
  .nitrit-reco-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:700px){
  .ar-flow{
    grid-template-columns:1fr;
  }

  .nitrit-reco-grid{ grid-template-columns:1fr; }

  .step-product{
    grid-template-columns:40px minmax(0, 1fr);
  }

  .step-product-media{
    width:40px;
    height:34px;
  }

}

/* Mini-Rechner Layout */
.mini-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 12px;
  margin-top:10px;
}
@media (max-width:900px){
  .mini-grid{ grid-template-columns:1fr; }
}

.mini-kpi{
  margin-top:10px;
  border:1px solid var(--border2);
  border-radius:14px;
  background:var(--bg);
  padding:10px 12px;
}

.mini-kpi .kpi-title{ font-size:12px; opacity:.75; margin-bottom:6px; }
.mini-kpi .kpi-value{ font-size:22px; font-weight:900; line-height:1.05; }
.mini-kpi .kpi-sub{ font-size:12px; opacity:.7; margin-top:4px; line-height:1.35; }

/* Algen-Analyse: Ergebnis-Dashboard */
.algae-score{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(88,211,255,.22);
  border-radius:22px;
  padding:18px;
  background:
    radial-gradient(circle at top left, rgba(88,211,255,.10), transparent 46%),
    linear-gradient(145deg, rgba(8,28,38,.86), rgba(5,18,26,.78));
  box-shadow:0 16px 38px rgba(0,0,0,.18);
}

.algae-score::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:linear-gradient(180deg, rgba(88,211,255,.9), rgba(126,240,197,.65));
  opacity:.72;
}

.algae-score.high{
  border-color:rgba(255,107,107,.42);
  background:
    radial-gradient(circle at top left, rgba(255,107,107,.13), transparent 45%),
    linear-gradient(145deg, rgba(36,18,22,.86), rgba(8,18,25,.78));
}

.algae-score.high::before{ background:linear-gradient(180deg, #ff6b6b, #ffd166); }

.algae-score.mid{
  border-color:rgba(255,209,102,.35);
  background:
    radial-gradient(circle at top left, rgba(255,209,102,.12), transparent 45%),
    linear-gradient(145deg, rgba(32,30,18,.86), rgba(8,18,25,.78));
}

.algae-score.mid::before{ background:linear-gradient(180deg, #ffd166, #7ef0c5); }

.algae-score.low{
  border-color:rgba(126,240,197,.28);
}

.algae-score.hero{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:18px;
  align-items:center;
  padding:22px 24px;
}

.algae-score-title{
  margin-bottom:10px;
  color:#eafff8;
  font-weight:900;
  letter-spacing:.01em;
}

.algae-score-value{
  color:#ffd166;
  font-size:clamp(28px, 4vw, 44px);
  font-weight:950;
  line-height:1;
  letter-spacing:.01em;
  text-shadow:0 0 24px rgba(255,209,102,.18);
}

.algae-result-tag{
  justify-self:end;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:0 14px;
  border:1px solid rgba(126,240,197,.34);
  border-radius:999px;
  color:#bfffe9;
  background:rgba(126,240,197,.08);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.algae-result-tag::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:#7ef0c5;
  box-shadow:0 0 16px rgba(126,240,197,.75);
}

.algae-list{
  margin:0;
  padding-left:18px;
  color:rgba(230,237,243,.86);
  line-height:1.45;
}

.algae-list li + li{ margin-top:7px; }

.algae-cause-list,
.algae-action-steps,
.algae-link-grid{
  display:grid;
  gap:10px;
}

.algae-cause{
  padding:11px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:15px;
  background:rgba(0,0,0,.14);
}

.algae-cause-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:#effcff;
  font-weight:900;
  font-size:13px;
}

.algae-cause-head span:last-child{
  color:#7ef0c5;
  white-space:nowrap;
}

.algae-score-bar{
  height:7px;
  margin:9px 0 8px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}

.algae-score-bar span{
  display:block;
  width:var(--bar-width, 30%);
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, #7ef0c5, #58d3ff, #ffd166);
  box-shadow:0 0 16px rgba(126,240,197,.3);
}

.algae-cause p{
  margin:0;
  color:rgba(230,237,243,.76);
  font-size:13px;
  line-height:1.38;
}

.algae-action-step{
  display:grid;
  grid-template-columns:32px minmax(0, 1fr);
  gap:10px;
  align-items:start;
  padding:10px;
  border:1px solid rgba(126,240,197,.14);
  border-radius:15px;
  background:rgba(126,240,197,.045);
}

.algae-action-step strong{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:11px;
  color:#061117;
  background:linear-gradient(135deg, #7ef0c5, #58d3ff);
  box-shadow:0 10px 22px rgba(88,211,255,.16);
}

.algae-action-step span{
  color:rgba(230,237,243,.86);
  line-height:1.42;
}

.algae-link-grid{
  grid-template-columns:1fr 1fr;
}

.algae-link-card{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  min-height:48px;
  padding:12px;
  border:1px solid rgba(88,211,255,.18);
  border-radius:15px;
  color:#eafff8;
  text-decoration:none;
  background:rgba(88,211,255,.045);
}

.algae-link-card:hover{
  border-color:rgba(126,240,197,.42);
  background:rgba(126,240,197,.075);
}

.algae-link-card span:last-child{
  color:#7ef0c5;
  font-weight:900;
}

@media (max-width:700px){
  .algae-score,
  .algae-score.hero{
    grid-template-columns:1fr;
    padding:16px;
    border-radius:18px;
  }

  .algae-result-tag{
    justify-self:start;
  }

  .algae-link-grid{
    grid-template-columns:1fr;
  }

  .algae-cause-head{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }
}

.mg-live-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px 14px;
}

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

@media (max-width:900px){
  .mg-live-grid,
  .triple-grid{
    grid-template-columns:1fr;
  }
}

.nutrient-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.nutrient-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border2);
  background:var(--bg);
  font-size:12px;
  opacity:.95;
}

/* =========================
   INDEX: EINSTEIGERFLOW
   ========================= */

.quicklinks{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 14px;
}

.quicklink-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid var(--border2);
  background:var(--bg);
  color:var(--text);
  text-decoration:none;
  font-size:12px;
  font-weight:800;
}

.quicklink-pill:hover{
  border-color:var(--btn);
}

.quickstart-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px 14px;
  margin-top:12px;
}

.quickstart-step{
  display:flex;
  gap:12px;
  align-items:flex-start;
  border:1px solid var(--border2);
  border-radius:16px;
  background:var(--bg);
  padding:14px 16px;
}

.quickstart-step-num{
  width:34px;
  height:34px;
  border-radius:999px;
  background:var(--btn);
  color:var(--btnText);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:900;
  flex:0 0 auto;
}

.quickstart-step-title{
  font-size:14px;
  font-weight:900;
  margin-bottom:4px;
}

.quickstart-step-text{
  margin:0;
  font-size:13px;
  line-height:1.45;
  opacity:.9;
}

.beginner-grid{
  margin-top:14px;
}

@media (max-width:900px){
  .quickstart-grid{
    grid-template-columns:1fr;
  }
}

/* =========================
   MOBILE APP-SCHICHT
   Nur Smartphone / kleine Tablets
   ========================= */

.mobile-app-nav,
.aquawutz-toast{
  display:none;
}

@media (max-width:760px){
  body{
    background-color:#07131b;
    background:
      radial-gradient(circle at top left, rgba(89,199,255,0.10), transparent 24%),
      linear-gradient(180deg, #081018 0%, #061019 100%);
  }

  body::before{
    opacity:.20;
    background:
      linear-gradient(135deg, rgba(255,255,255,0.018), transparent 28%, transparent 74%, rgba(255,255,255,0.012)),
      repeating-linear-gradient(120deg, rgba(126,240,197,0.02) 0 1px, transparent 1px 28px);
  }

  html{
    -webkit-tap-highlight-color:transparent;
    scroll-padding-bottom:110px;
  }

  body{
    padding-bottom:calc(86px + env(safe-area-inset-bottom));
    overscroll-behavior-y:contain;
  }

  .mobile-app-nav{
    position:fixed;
    left:10px;
    right:10px;
    bottom:calc(10px + env(safe-area-inset-bottom));
    z-index:80;
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:5px;
    min-height:66px;
    padding:7px;
    border:1px solid rgba(126,240,197,.24);
    border-radius:24px;
    background:
      radial-gradient(circle at 12% 0%, rgba(126,240,197,.14), transparent 34%),
      radial-gradient(circle at 86% 0%, rgba(89,199,255,.12), transparent 36%),
      rgba(3,13,20,.86);
    box-shadow:
      0 18px 40px rgba(0,0,0,.44),
      inset 0 1px 0 rgba(255,255,255,.04);
  }

  .mobile-app-nav-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-width:0;
    border-radius:18px;
    color:rgba(223,247,255,.74);
    text-decoration:none;
    font-size:10px;
    font-weight:900;
    letter-spacing:.01em;
    transition:transform .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease;
    touch-action:manipulation;
  }

  .mobile-app-icon{
    width:20px;
    height:20px;
    stroke-width:2.1;
  }

  .mobile-app-nav-item.is-active{
    color:#06131b;
    background:linear-gradient(135deg, #86f1d0, #55cfff);
    box-shadow:0 10px 22px rgba(85,207,255,.18);
  }

  .mobile-app-nav-item:active{
    transform:scale(.94);
  }

  .btn,
  .linkbtn,
  .quicklink-pill,
  .home-tile,
  .cardlink,
  summary,
  button,
  a{
    touch-action:manipulation;
  }

  .btn:active,
  .linkbtn:active,
  .quicklink-pill:active,
  .home-card:active,
  .cardlink:active,
  .path-card:active,
  .mini-link:active,
  .ww-card-link:active,
  .algae-link-card:active{
    transform:scale(.985);
    filter:brightness(1.04);
  }

  .aquawutz-toast{
    position:fixed;
    left:18px;
    right:18px;
    bottom:calc(88px + env(safe-area-inset-bottom));
    z-index:90;
    display:block;
    pointer-events:none;
    opacity:0;
    transform:translateY(14px) scale(.98);
    padding:13px 15px;
    border:1px solid rgba(126,240,197,.32);
    border-radius:18px;
    background:
      linear-gradient(135deg, rgba(126,240,197,.15), rgba(89,199,255,.10)),
      rgba(3,13,20,.92);
    color:#eafff8;
    box-shadow:0 18px 38px rgba(0,0,0,.38);
    font-size:13px;
    font-weight:900;
    line-height:1.35;
    text-align:center;
    transition:opacity .18s ease, transform .18s ease;
  }

  .aquawutz-toast.is-visible{
    opacity:1;
    transform:translateY(0) scale(1);
  }

  .aquawutz-toast[data-type="warn"]{
    border-color:rgba(255,209,102,.42);
    background:
      linear-gradient(135deg, rgba(255,209,102,.16), rgba(89,199,255,.08)),
      rgba(3,13,20,.92);
  }

  .aquawutz-toast[data-type="danger"]{
    border-color:rgba(255,107,107,.45);
    background:
      linear-gradient(135deg, rgba(255,107,107,.16), rgba(89,199,255,.08)),
      rgba(3,13,20,.92);
  }

  .brand-footer{
    margin-bottom:calc(88px + env(safe-area-inset-bottom));
  }

  .card,
  .subcard,
  .topnav,
  .menu-return-card,
  .fact-card,
  .photo-panel{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}

@media (max-width:1100px){
  body.app-sidebar-open{
    overflow:hidden;
  }

  .app-shell{
    grid-template-columns:1fr;
    gap:0;
  }

  .app-sidebar{
    position:fixed;
    top:10px;
    left:0;
    bottom:12px;
    width:min(86vw, 340px);
    min-height:0;
    height:auto;
    max-height:none;
    border-radius:0 24px 24px 0;
    transform:translateX(calc(-100% - 16px));
    transition:transform .24s ease;
    z-index:95;
  }

  body.app-sidebar-open .app-sidebar{
    transform:translateX(0);
  }

  .app-sidebar-backdrop{
    position:fixed;
    inset:0;
    background:rgba(3,11,18,.58);
    backdrop-filter:blur(4px);
    z-index:90;
  }

  body.app-sidebar-open .app-sidebar-backdrop{
    display:block;
  }

  .app-mobile-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:0 0 12px;
    padding:6px 2px 0;
  }

  .app-mobile-menu-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:44px;
    padding:10px 14px;
    border-radius:16px;
    border:1px solid rgba(89,199,255,.16);
    background:
      linear-gradient(180deg, rgba(255,255,255,.025), transparent 84%),
      rgba(4,16,24,.74);
    color:#eaf9ff;
    font:inherit;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 10px 22px rgba(3,11,18,.18);
  }

  .app-mobile-menu-icon{
    width:18px;
    height:12px;
    position:relative;
    display:block;
  }

  .app-mobile-menu-icon::before,
  .app-mobile-menu-icon::after,
  .app-mobile-menu-icon span{
    content:"";
    position:absolute;
    left:0;
    width:100%;
    height:2px;
    border-radius:999px;
    background:#dffcf3;
  }

  .app-mobile-menu-icon::before{ top:0; }
  .app-mobile-menu-icon span{ top:5px; }
  .app-mobile-menu-icon::after{ bottom:0; }

  .app-mobile-topbar-badge{
    padding:8px 11px;
    border-radius:999px;
    border:1px solid rgba(126,240,197,.18);
    background:rgba(126,240,197,.08);
    color:#dffcf3;
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
}

@media (max-width:760px){
  .app-sidebar{
    width:min(92vw, 340px);
    bottom:calc(96px + env(safe-area-inset-bottom));
    padding-bottom:18px;
    border-radius:0 22px 22px 0;
  }
}