/* CanGem V10.11 — Combined CSS */

/* Flash-Fix: muss ganz oben bleiben */
html,body{background:#121a26!important;color:#e8f2d8}

/* iOS Splash */
@media screen and (device-width: 390px) {
  body::before{content:'';display:none}
}

/* Font Fallback */
body{font-family:'Nunito','SF Pro Rounded','SF Pro Text',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.hstrain,.hpchip,.bhtit,.stitle,.ob-title,.ob-btn,.btnfire,.rsnm,.ob-bw-val,
[class*="fredoka"],[style*="Fredoka"]{font-family:'Fredoka One','SF Pro Rounded',system-ui,sans-serif}

/* ══ MAIN CSS ══ */
/* ══ VARIABLES ══ */
:root{
  --pb:#b8d14a;--pb3:#7a9620;
  --bg:#121a26;--bg2:#1a2432;--bg3:#222e40;--card:#1c2838;--card2:#22303e;
  --bd:rgba(184,209,74,.13);--bd2:rgba(184,209,74,.25);
  --tx:#e8f2d8;--tx2:#8aaa78;--tx3:#486048;
  --amber:#f0a030;--cyan:#38c8d8;--alarm:#e83030;--warn:#f0a820;--blue:#3498db;
  --ok:#b8d14a;--hi:#e83030;--lo:#3498db;
  --touch:52px;--nav:74px;--hdr-h:102px;
  --st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);
  --sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none}
body{font-family:'Nunito',sans-serif;background:var(--bg);color:var(--tx);
  display:flex;flex-direction:column;width:100%;-webkit-font-smoothing:antialiased;
  touch-action:pan-y;padding-left:var(--sl);padding-right:var(--sr)}
input,select,textarea{font-size:16px!important;-webkit-appearance:none}
input[type="text"],input[type="number"],input[type="email"]{autocorrect:off}
::-webkit-scrollbar{display:none}
*{scrollbar-width:none}
/* ══ V8 GAME LAYER ══ */
/* BADGE TOAST */
#badge-toast{position:fixed;top:calc(var(--st) + 60px);left:50%;
  transform:translateX(-50%) translateY(-20px);
  background:linear-gradient(135deg,#2a1f08,#1a1408);
  border:2px solid var(--amber);border-radius:20px;z-index:3000;
  display:none;padding:10px 20px 10px 14px;
  box-shadow:0 8px 32px rgba(240,160,48,.35),0 0 60px rgba(240,160,48,.1);
  max-width:88%;min-width:200px}
#badge-toast.on{display:flex;align-items:center;gap:10px;animation:badgePop .4s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(-16px) scale(.9)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
@keyframes badgePop{from{opacity:0;transform:translateX(-50%) translateY(-20px) scale(.8)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
.bt-ico{font-size:28px;flex-shrink:0}
.bt-txt{flex:1}
.bt-ttl{font-family:'Fredoka One',cursive;font-size:13px;color:var(--amber);line-height:1.2}
.bt-sub{font-size:10px;color:var(--tx3);font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin-top:2px}
.bt-xp{font-family:'Fredoka One',cursive;font-size:18px;color:var(--pb);flex-shrink:0}
/* XP FLOAT */
@keyframes xpPop{0%{opacity:1;transform:translateY(0) scale(1)}80%{opacity:.8;transform:translateY(-28px) scale(1.15)}100%{opacity:0;transform:translateY(-40px) scale(.9)}}
.xp-float{position:fixed;font-family:'Fredoka One',cursive;font-size:18px;color:var(--amber);pointer-events:none;z-index:4000;animation:xpPop .9s cubic-bezier(.22,1,.36,1) forwards}
/* LEVEL UP OVERLAY */
#lvl-overlay{position:fixed;inset:0;z-index:5000;pointer-events:none;
  display:none;align-items:center;justify-content:center}
#lvl-overlay.on{display:flex;animation:lvlFade 2.8s ease-out forwards}
@keyframes lvlFade{0%{opacity:0}15%{opacity:1}70%{opacity:1}100%{opacity:0}}
.lvl-card{background:linear-gradient(135deg,rgba(11,15,20,.96),rgba(18,24,32,.98));
  border:2px solid var(--amber);border-radius:24px;padding:28px 36px;text-align:center;
  box-shadow:0 0 80px rgba(240,160,48,.3)}
.lvl-emo{font-size:52px;margin-bottom:8px}
.lvl-ttl{font-family:'Fredoka One',cursive;font-size:26px;color:var(--amber)}
.lvl-sub{font-size:11px;color:var(--tx3);font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-top:4px}
/* THOUGHT BUBBLES */
.tb-wrap{position:absolute;pointer-events:none;z-index:10}
@keyframes tbFloat{0%,100%{transform:translateY(0) scale(1);opacity:.92}50%{transform:translateY(-5px) scale(1.08);opacity:1}}
@keyframes tbPop{0%{transform:scale(0) translateY(8px);opacity:0}60%{transform:scale(1.2) translateY(-2px);opacity:1}100%{transform:scale(1) translateY(0);opacity:.95}}
.tb-bubble{animation:tbFloat 2.4s ease-in-out infinite;transform-origin:center bottom;font-size:18px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));display:inline-block}
.tb-bubble.pop{animation:tbPop .5s cubic-bezier(.34,1.56,.64,1) forwards, tbFloat 2.4s ease-in-out 0.5s infinite}
/* PLUMBOB GLOW PULSE (>95%) */
@keyframes pbPulse{0%,100%{filter:drop-shadow(0 2px 8px rgba(184,209,74,.6))}50%{filter:drop-shadow(0 0 20px rgba(255,255,255,.9)) drop-shadow(0 0 40px rgba(184,209,74,.8))}}
.hpb.pulse svg{animation:bob 2.8s ease-in-out infinite, pbPulse 1.4s ease-in-out infinite}
/* XP WIDGET in Home */
.xpcard{margin:0 12px 8px;background:linear-gradient(135deg,rgba(240,160,48,.07),rgba(184,209,74,.04));
  border:1px solid rgba(240,160,48,.25);border-radius:16px;padding:12px 14px;display:flex;align-items:center;gap:12px}
.xpcard-lvl{font-size:28px;flex-shrink:0;line-height:1}
.xpcard-info{flex:1;min-width:0}
.xpcard-name{font-family:'Fredoka One',cursive;font-size:14px;color:var(--amber);line-height:1.1}
.xpcard-xp{font-size:11px;color:var(--tx3);font-weight:700;margin-top:2px}
.xpbar-bg{height:7px;background:rgba(255,255,255,.07);border-radius:7px;overflow:hidden;margin-top:6px}
.xpbar-fill{height:100%;border-radius:7px;background:linear-gradient(90deg,#c89010,var(--amber));
  transition:width .6s cubic-bezier(.34,1.56,.64,1);box-shadow:0 0 6px rgba(240,160,48,.5)}
.xpcard-snd{width:36px;height:36px;border-radius:50%;border:1px solid rgba(240,160,48,.3);
  background:rgba(240,160,48,.07);display:flex;align-items:center;justify-content:center;
  font-size:18px;cursor:pointer;flex-shrink:0;touch-action:manipulation}
.xpcard-snd:active{background:rgba(240,160,48,.2)}
.xpcard-snd.muted{opacity:.38}
/* ══ V9 RECORDS CARD ══ */
#records-card{display:none;margin:0 12px 8px;background:linear-gradient(135deg,rgba(240,160,48,.07),rgba(184,209,74,.04));
  border:1px solid rgba(240,160,48,.22);border-radius:14px;overflow:hidden}
.rc-hdr{display:flex;align-items:center;gap:8px;padding:9px 12px 6px;border-bottom:1px solid rgba(240,160,48,.12);cursor:pointer;-webkit-tap-highlight-color:transparent}
.rc-hdr:active{background:rgba(240,160,48,.06)}
.rc-htitle{font-family:'Fredoka One',cursive;font-size:13px;color:var(--amber);flex:1}
.rc-chevron{font-size:10px;color:var(--tx3);transition:transform .2s}
.rc-chevron.open{transform:rotate(180deg)}
.rc-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(240,160,48,.1)}
.rc-tile{background:var(--bg2);padding:9px 10px;display:flex;flex-direction:column;gap:2px}
.rc-val{font-family:'Fredoka One',cursive;font-size:18px;color:var(--amber);line-height:1}
.rc-lbl{font-size:10px;color:var(--tx3);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.rc-sub{font-size:10px;color:var(--tx2);margin-top:1px}
/* ══ V9 FAV MODAL ══ */
#fav-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:600;align-items:flex-end}
.fav-item{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;
  background:var(--bg3);border:1px solid var(--bd);margin-bottom:6px;cursor:pointer;touch-action:manipulation;transition:background .1s}
.fav-item:active{background:rgba(184,209,74,.1);border-color:var(--pb)}
.fav-ico{font-size:20px;flex-shrink:0}
.fav-name{font-weight:700;font-size:12px;color:var(--tx);flex:1}
.fav-meta{font-size:11px;color:var(--tx3)}
.fav-del{width:30px;height:30px;border-radius:50%;border:1px solid rgba(232,48,48,.3);background:rgba(232,48,48,.08);
  color:var(--alarm);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;touch-action:manipulation;flex-shrink:0}
.fav-del:active{background:rgba(232,48,48,.25)}
/* ══ PDF REPORT OVERLAY ══ */
#pdf-overlay{display:none;position:fixed;inset:0;z-index:9000;background:#555;overflow-y:auto;-webkit-overflow-scrolling:touch}
#pdf-overlay.on{display:block}
.pdf-toolbar{position:sticky;top:0;z-index:9001;background:#2a3d2a;padding:10px 16px;display:flex;align-items:center;gap:10px;border-bottom:2px solid #b8d14a}
.pdf-toolbar-title{font-family:'Fredoka One',cursive;font-size:15px;color:#b8d14a;flex:1}
.pdf-print-btn{background:#b8d14a;color:#0b0f14;border:none;border-radius:10px;padding:9px 18px;font-size:13px;font-weight:700;cursor:pointer;touch-action:manipulation}
.pdf-print-btn:active{background:#9ab030}
.pdf-close-btn{background:none;border:1px solid rgba(255,255,255,.3);color:#ccc;border-radius:8px;padding:8px 14px;font-size:12px;cursor:pointer}
.pdf-page-wrap{width:210mm;max-width:100%;margin:12px auto;background:#fff;box-shadow:0 4px 20px rgba(0,0,0,.4)}
.pdf-page-wrap canvas{width:100%;height:auto;display:block}
@media print{
  #pdf-overlay .pdf-toolbar{display:none}
  #pdf-overlay{background:#fff;overflow:visible;position:absolute}
  .pdf-page-wrap{margin:0;box-shadow:none;page-break-after:always}
}
/* ══ V9 DEMO MODAL ══ */
#demo-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:700;align-items:flex-end}
.demo-card{background:var(--bg2);border:1px solid var(--bd2);border-radius:14px;
  padding:12px 14px;margin-bottom:8px;cursor:pointer;touch-action:manipulation;
  display:flex;align-items:flex-start;gap:12px;transition:border-color .15s,background .15s}
.demo-card:active{background:rgba(184,209,74,.07);border-color:var(--pb)}
.demo-card.diff-1{border-left:3px solid #38c8d8}
.demo-card.diff-2{border-left:3px solid #b8d14a}
.demo-card.diff-3{border-left:3px solid #f0a030}
.demo-card.diff-4{border-left:3px solid #e058a8}
.demo-card.diff-5{border-left:3px solid #e83030}
.demo-card.diff-6{border-left:3px solid #a060f0}
.demo-ico{font-size:26px;flex-shrink:0;line-height:1;margin-top:2px}
.demo-info{flex:1;min-width:0}
.demo-title{font-family:'Fredoka One',cursive;font-size:14px;color:var(--tx);line-height:1.2}
.demo-strain{font-size:11px;color:var(--pb);font-weight:700;margin-top:2px}
.demo-desc{font-size:11px;color:var(--tx2);margin-top:3px;line-height:1.5}
.demo-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.demo-tag{font-size:10px;font-weight:700;padding:2px 6px;border-radius:6px;
  background:rgba(255,255,255,.06);color:var(--tx3);text-transform:uppercase;letter-spacing:.05em}
.demo-badge{font-size:10px;font-weight:700;padding:3px 8px;border-radius:8px;
  background:rgba(184,209,74,.12);color:var(--pb);border:1px solid rgba(184,209,74,.3);
  white-space:nowrap;flex-shrink:0;align-self:center}
/* ══ V8.4: TRICHOM TRACKER ══ */
.trich-card{margin:0 12px 10px;background:var(--card);border:1px solid var(--bd2);border-radius:16px;overflow:hidden}
.trich-hdr{padding:10px 14px 6px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between}
.trich-bars{padding:10px 14px 6px;display:flex;flex-direction:column;gap:8px}
.trich-row{display:flex;align-items:center;gap:8px}
.trich-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;width:62px;flex-shrink:0}
.trich-stepper{display:flex;align-items:center;gap:4px}
.trich-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--bd2);background:var(--bg3);
  color:var(--tx);font-size:22px;font-weight:300;cursor:pointer;display:flex;align-items:center;
  justify-content:center;touch-action:manipulation;font-family:'Nunito',sans-serif}
.trich-btn:active{background:rgba(184,209,74,.18);transform:scale(.93)}
.trich-val{font-family:'Fredoka One',cursive;font-size:22px;min-width:40px;text-align:center}
.trich-bar-bg{flex:1;height:7px;background:rgba(255,255,255,.06);border-radius:7px;overflow:hidden}
.trich-bar-fill{height:100%;border-radius:7px;transition:width .4s cubic-bezier(.34,1.56,.64,1)}
.trich-advice{padding:8px 14px 12px;font-size:10px;line-height:1.5;font-weight:600;border-top:1px solid var(--bd)}
.trich-log-entry{display:flex;justify-content:space-between;align-items:center;
  padding:6px 14px;border-top:1px solid var(--bd);font-size:11px}
/* ══ V8.4: PHASE PHOTO ══ */
.photo-zone{margin:0 12px 10px;background:var(--card);border:1px dashed var(--bd2);border-radius:14px;
  padding:14px;display:flex;align-items:center;gap:12px;cursor:pointer;touch-action:manipulation;
  transition:border-color .2s}
.photo-zone:active{border-color:var(--pb);background:rgba(184,209,74,.05)}
.photo-zone.has-photo{border-style:solid;border-color:rgba(184,209,74,.35)}
.photo-thumb{width:60px;height:60px;border-radius:10px;object-fit:cover;flex-shrink:0;display:none}
.photo-thumb.visible{display:block}
.photo-placeholder{width:60px;height:60px;border-radius:10px;background:rgba(255,255,255,.04);
  display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.photo-info{flex:1}
.photo-lbl{font-size:11px;font-weight:700;color:var(--tx);line-height:1.2}
.photo-sub{font-size:10px;color:var(--tx3);margin-top:2px}
/* ══ V8.4: GROW ARCHIVE ══ */
.archive-card{margin:0 12px 10px;background:var(--card);border:1px solid var(--bd);border-radius:16px;overflow:hidden}
.archive-card-hdr{padding:12px 14px 8px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:10px}
.archive-card-ico{font-size:26px;flex-shrink:0}
.archive-card-name{font-family:'Fredoka One',cursive;font-size:14px;color:var(--pb);line-height:1.1}
.archive-card-date{font-size:10px;color:var(--tx3);font-weight:700;margin-top:2px}
.archive-card-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:8px 0}
.archive-stat{text-align:center;padding:4px 0;border-right:1px solid var(--bd)}
.archive-stat:last-child{border-right:none}
.archive-stat-v{font-family:'Fredoka One',cursive;font-size:16px;color:var(--amber)}
.archive-stat-l{font-size:10px;color:var(--tx3);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
/* NEW GROW button */
.btn-newgrow{display:block;width:calc(100% - 24px);margin:8px 12px;padding:16px;min-height:52px;
  background:linear-gradient(135deg,rgba(184,209,74,.12),rgba(56,200,216,.06));
  border:2px solid rgba(184,209,74,.4);border-radius:16px;
  font-family:'Fredoka One',cursive;font-size:16px;color:var(--pb);
  cursor:pointer;text-align:center;transition:all .15s;letter-spacing:.04em;touch-action:manipulation}
.btn-newgrow:active{transform:scale(.97);background:rgba(184,209,74,.2)}
.grow-action-btn{background:var(--card);border:1px solid var(--bd);border-radius:14px;
  padding:10px 12px;display:flex;align-items:center;gap:8px;cursor:pointer;
  touch-action:manipulation;transition:all .15s;min-height:52px}
.grow-action-btn:active{background:rgba(184,209,74,.12);transform:scale(.97)}
.grow-action-btn.done{border-color:rgba(184,209,74,.4);background:rgba(184,209,74,.07)}
.grow-action-btn.done .ga-name{color:var(--pb)}
.grow-action-btn.demo-ref{border-color:rgba(56,200,216,.3);background:rgba(56,200,216,.05)}
.grow-action-btn.demo-ref .ga-name{color:var(--cyan);opacity:.85}
.grow-action-btn.demo-ref .ga-desc{color:var(--tx3);font-style:italic}
.ga-ico{font-size:20px;flex-shrink:0}
.ga-info{flex:1;min-width:0}
.ga-name{font-size:10px;font-weight:700;color:var(--tx);line-height:1.2}
.ga-desc{font-size:10px;color:var(--tx3);margin-top:1px}
.ga-check{font-size:14px;flex-shrink:0}
/* TIMELINE */
.tl-entry{display:flex;gap:10px;padding:8px 0;position:relative}
.tl-entry::before{content:'';position:absolute;left:15px;top:24px;bottom:-8px;width:1px;background:var(--bd)}
.tl-entry:last-child::before{display:none}
.tl-dot{width:32px;height:32px;border-radius:50%;background:var(--card);border:1.5px solid var(--bd2);
  display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;position:relative;z-index:1}
.tl-dot.tl-badge{border-color:rgba(240,160,48,.5);background:rgba(240,160,48,.1)}
.tl-dot.tl-action{border-color:rgba(184,209,74,.5);background:rgba(184,209,74,.08)}
.tl-dot.tl-log{border-color:rgba(56,200,216,.4);background:rgba(56,200,216,.06)}
.tl-body{flex:1;padding-top:4px}
.tl-title{font-size:10px;font-weight:700;color:var(--tx);line-height:1.2}
.tl-meta{font-size:10px;color:var(--tx3);margin-top:2px}
.ach-hero{padding:14px 14px 10px;text-align:center;background:linear-gradient(180deg,rgba(184,209,74,.04),transparent)}
.ach-stat{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.ach-stat-c{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:10px;text-align:center}
.ach-stat-v{font-family:'Fredoka One',cursive;font-size:20px;color:var(--amber)}
.ach-stat-l{font-size:10px;color:var(--tx3);font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin-top:2px}
.badge-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:0 12px 10px}
.badge-card{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:12px;display:flex;align-items:center;gap:10px;transition:border-color .3s}
.badge-card.earned{border-color:rgba(240,160,48,.4);background:linear-gradient(135deg,rgba(240,160,48,.07),rgba(184,209,74,.04))}
.badge-card.locked{opacity:.45}
.badge-ico{font-size:24px;flex-shrink:0}
.badge-name{font-family:'Fredoka One',cursive;font-size:11px;color:var(--amber);line-height:1.2}
.badge-sub{font-size:10px;color:var(--tx3);font-weight:700;margin-top:2px;line-height:1.3}
.badge-xp{font-size:10px;color:var(--pb);font-weight:700;margin-top:3px}
.badge-lock{font-size:10px;color:var(--tx3)}

/* ══ HEADER ══ */
#hdr{flex-shrink:0;
  background:linear-gradient(180deg,#0e1520,var(--bg));border-bottom:1px solid var(--bd2);
  display:flex;flex-direction:column;z-index:20}
.hdr-row1{display:flex;align-items:center;padding:0 10px;min-height:52px;padding-top:var(--st)}
.hdr-row2{display:flex;align-items:center;gap:0;border-top:1px solid rgba(184,209,74,.1);padding:0;overflow:hidden;height:50px}
/* Phase-Chips im Header */
#hdr-pnav{display:flex;gap:6px;overflow-x:auto;padding:6px 12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;align-items:center}
#hdr-pnav::-webkit-scrollbar{display:none}
.hpchip{flex-shrink:0;padding:6px 12px;border-radius:14px;border:1px solid transparent;
  background:transparent;color:var(--tx3);font-size:10px;font-weight:700;
  cursor:pointer;text-transform:uppercase;white-space:nowrap;min-height:34px;touch-action:manipulation;
  transition:transform .12s;letter-spacing:.05em}
.hpchip:active{transform:scale(.94)}
.hpchip{min-width:38px;}
.hpchip.cur{background:var(--pb);color:#0b0f14;border-color:var(--pb);
  box-shadow:0 0 10px rgba(184,209,74,.35);font-weight:900}
.hpchip.done{color:var(--tx3);border-color:rgba(184,209,74,.2);background:rgba(184,209,74,.06)}
/* Header Nav-Arrows — 44px touch target */
.hdr-phase-arr{flex-shrink:0;min-width:50px;height:50px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;color:rgba(184,209,74,.7);font-size:20px;
  cursor:pointer;touch-action:manipulation;
  transition:color .15s,background .15s}
.hdr-phase-arr:active{background:rgba(184,209,74,.12);color:var(--pb);transform:scale(.9)}
/* ── V10 UX1: Override tiny inline header label sizes ── */
#hdr-bloom-day,#hdr-cd-lbl,#hdr-cd-sub{font-size:10px!important}
#hampel-lbl{font-size:10px!important;letter-spacing:.04em}
#hampel-pct{font-size:10px!important}
#hdr-bloom-wk,#hdr-cd-num{font-size:24px!important}
.hpb{width:36px;height:52px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hpb svg{filter:drop-shadow(0 2px 8px rgba(184,209,74,.6));animation:bob 2.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0deg)}40%{transform:translateY(-3px) rotate(1.5deg)}70%{transform:translateY(-1px) rotate(-1deg)}}
.hinfo{flex:1;padding:0 8px;min-width:0}
.hstrain{font-family:'Fredoka One',cursive;font-size:13px;color:var(--pb);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 12px rgba(184,209,74,.4);line-height:1.1}
.hphase{font-size:10px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.hright{display:flex;align-items:center;gap:6px;flex-shrink:0}
/* ══ SECTION TITLES ══ */
/* #alert-bar: Styling over .unibanner --err */
.abx{margin-left:auto;background:none;border:1px solid rgba(232,48,48,.4);color:var(--alarm);
  width:30px;height:30px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:12px}
@keyframes blink{50%{opacity:0}}
.blink{animation:blink .8s step-end infinite}

/* ══ TABS ══ */
#tabs{height:calc(100dvh - var(--hdr-h) - var(--nav) - var(--sb));flex:none;overflow:hidden;position:relative}
.tab{display:none}
.tab.active{display:block;position:absolute;inset:0;
  overflow-y:scroll;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;padding-bottom:calc(var(--nav) + var(--sb) + 20px)}

/* ══ NAV ══ */
#nav{position:fixed;bottom:0;left:0;right:0;height:calc(var(--nav) + var(--sb));
  background:rgba(11,15,20,.97);border-top:1px solid var(--bd2);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  display:flex;align-items:flex-start;z-index:100;padding:0 4px}
.nb{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:none;border:none;cursor:pointer;
  min-height:calc(var(--nav) + var(--sb));
  padding:10px 2px var(--sb);
  border-radius:12px;transition:background .15s;position:relative;
  touch-action:manipulation;-webkit-user-select:none;user-select:none}
.nb:active{background:rgba(184,209,74,.08)}
.nbico{font-size:22px;line-height:1;transition:transform .2s}
.nblbl{font-size:10px;font-weight:700;color:var(--tx3);letter-spacing:.01em}
.nb.on .nbico{transform:scale(1.15)}
.nb.on .nblbl{color:var(--pb)}
.nb.on::after{content:'';position:absolute;top:5px;left:50%;transform:translateX(-50%);
  width:24px;height:2px;background:var(--pb);border-radius:2px;box-shadow:0 0 8px rgba(184,209,74,.7)}

/* ══ PERF: GPU hints ══ */
.hpb svg,.hbar-fill,.ntbf,.bpfill,.progfill,.vpdbf{will-change:transform}
.tab.active{will-change:scroll-position}

/* ══ SECTION TITLES ══ */
.stitle{font-family:'Fredoka One',cursive;font-size:14px;color:var(--tx2);
  text-transform:uppercase;letter-spacing:.07em;padding:12px 14px 7px;
  display:flex;align-items:center;gap:8px}
.stitle::after{content:'';flex:1;height:1px;background:var(--bd)}
.micro{font-size:10px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.08em}
.mb8{margin-bottom:8px}.mt8{margin-top:8px}.p12{padding:0 14px}
.row{display:flex;align-items:center}.gap8{gap:8px}.flex1{flex:1}

/* ══ NEURAL HUB (SVG) ══ */
.hub-card{margin:8px 12px 6px;border-radius:16px;overflow:hidden;border:1px solid var(--bd2);background:var(--bg2)}
.hub-todo{padding:8px 12px;border-top:1px solid var(--bd);min-height:42px;display:flex;align-items:center;gap:8px}
.htag{font-size:10px;font-weight:700;padding:3px 9px;border-radius:8px;flex-shrink:0}
.mrow{display:flex;gap:5px;overflow-x:auto;padding:6px 12px 8px;border-top:1px solid var(--bd);scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.md{display:flex;align-items:center;gap:5px;border-radius:18px;scroll-snap-align:start;
  padding:5px 9px;white-space:nowrap;font-size:10px;font-weight:700;flex-shrink:0;border:1px solid currentColor}
.mdg{color:var(--pb);background:rgba(184,209,74,.08)}
.mdc{color:var(--cyan);background:rgba(56,200,216,.08)}
.mda{color:var(--amber);background:rgba(240,160,48,.08)}
.mdp{color:#e058a8;background:rgba(224,88,168,.08)}
.mdr{color:var(--alarm);background:rgba(232,48,48,.08)}

/* ══ HOMEO BAR ══ */
.hbar-row{margin:0 12px 8px;display:flex;align-items:center;gap:10px}
.hbar-lbl{font-family:'Fredoka One',cursive;font-size:11px;text-transform:uppercase;
  letter-spacing:.07em;flex-shrink:0;min-width:86px;transition:color .5s}
.hbar-pct{font-family:'Fredoka One',cursive;font-size:28px;line-height:1;
  flex-shrink:0;transition:color .5s;min-width:52px;text-align:center}
.hbar-bg{flex:1;height:10px;background:rgba(255,255,255,.06);border-radius:10px;overflow:hidden;cursor:pointer}
.hbar-fill{height:100%;border-radius:10px;background:var(--pb);
  transition:width .7s cubic-bezier(.34,1.56,.64,1),background .5s;box-shadow:0 0 10px rgba(184,209,74,.35)}

/* ══ TODO ══ */
.todo{display:flex;align-items:center;gap:10px;background:var(--card);
  border:1px solid var(--bd);border-radius:12px;padding:12px;margin-bottom:6px;min-height:var(--touch);
  cursor:pointer;transition:transform .15s cubic-bezier(.34,1.56,.64,1);touch-action:manipulation}
.todo:active{transform:scale(.97)}
.todo.tu{border-color:rgba(232,48,48,.3);background:rgba(232,48,48,.04)}
.todo.tw{border-color:rgba(240,168,32,.25);background:rgba(240,168,32,.04)}
.todo.tok{border-color:rgba(184,209,74,.18)}
.todo.td{opacity:.45}
.tico{font-size:20px;flex-shrink:0}
.ttxt{flex:1;font-size:12px;font-weight:600;color:var(--tx);line-height:1.35}
.ttag{font-size:10px;font-weight:700;padding:4px 9px;border-radius:8px;flex-shrink:0}
.tu2{color:var(--alarm);background:rgba(232,48,48,.12)}
.tw2{color:var(--warn);background:rgba(240,168,32,.1)}
.tok2{color:var(--pb);background:rgba(184,209,74,.1)}

/* ══ NEEDS TILES ══ */
.ntiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 14px 12px}
.ntile{background:var(--card);border:1px solid var(--bd);border-radius:16px;
  padding:14px 8px 12px;display:flex;flex-direction:column;align-items:center;gap:6px}
.nto{border-color:rgba(184,209,74,.22)}
.ntw{border-color:rgba(240,168,32,.3);background:rgba(240,168,32,.04)}
.ntb{border-color:rgba(232,48,48,.35);background:rgba(232,48,48,.05)}
.ntl{border-color:rgba(52,152,219,.35);background:rgba(52,152,219,.05)}
.ntico{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative}
.nticobg{position:absolute;inset:0;border-radius:50%;opacity:.18}
.nticoe{position:relative;z-index:1}
.ntlbl{font-size:10px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.05em}
.ntpct{font-family:'Fredoka One',cursive;font-size:20px;line-height:1}
.ntpct.ok{color:var(--ok)}.ntpct.wn{color:var(--warn)}.ntpct.bd{color:var(--alarm)}.ntpct.lo{color:var(--blue)}
.ntbar{width:100%;height:5px;background:rgba(255,255,255,.06);border-radius:5px;overflow:hidden}
.ntbf{height:100%;border-radius:5px;transition:width .7s cubic-bezier(.34,1.56,.64,1)}
.nbg{background:linear-gradient(90deg,var(--pb3),var(--pb));box-shadow:0 0 5px rgba(184,209,74,.4)}
.nbw{background:linear-gradient(90deg,#a06010,var(--warn))}
.nbb{background:linear-gradient(90deg,#900,var(--alarm))}
.nbl{background:linear-gradient(90deg,#1a5090,var(--blue))}

/* ══ AI TIP ══ */
.aitip{margin:0 12px 10px;background:linear-gradient(135deg,rgba(184,209,74,.05),rgba(56,200,216,.03));
  border:1px solid rgba(184,209,74,.2);border-radius:16px;padding:14px 16px;position:relative;overflow:hidden}
.aitip::after{content:'🤖';position:absolute;right:12px;top:12px;font-size:22px;opacity:.22}
.aitag{font-size:10px;font-weight:900;color:var(--pb);text-transform:uppercase;letter-spacing:.1em;
  margin-bottom:5px;display:flex;align-items:center;gap:6px}
.aidot{width:6px;height:6px;background:var(--pb);border-radius:50%;
  box-shadow:0 0 6px rgba(184,209,74,.8);animation:adot 2s ease-in-out infinite}
@keyframes adot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.6)}}
.aitxt{font-size:12px;color:var(--tx);line-height:1.6;font-weight:600;padding-right:28px}

/* ══ VPD CARD ══ */
.vpdc{margin:8px 12px;background:var(--card);border:1px solid var(--bd2);
  border-radius:16px;padding:14px 16px;display:flex;gap:14px;align-items:center}
.vpdn{font-family:'Fredoka One',cursive;font-size:36px;color:var(--pb);
  text-shadow:0 0 20px rgba(184,209,74,.3);line-height:1;transition:color .4s}
.vpdbg{height:8px;background:rgba(255,255,255,.06);border-radius:8px;overflow:hidden;margin-top:8px}
.vpdbf{height:100%;border-radius:8px;transition:width .5s,background .4s;background:var(--pb)}
.vpdz{display:flex;justify-content:space-between;font-size:10px;color:var(--tx3);
  font-weight:700;margin-top:3px;text-transform:uppercase;letter-spacing:.04em}

/* ══ SENSOR STEPPERS ══ */
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 12px 10px}
.scard{background:var(--card);border:1px solid var(--bd);border-radius:16px;
  padding:14px 10px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.scard::before{content:'';position:absolute;inset:0;border-radius:16px;
  background:linear-gradient(135deg,rgba(255,255,255,.02),transparent);pointer-events:none}
.shdr{display:flex;align-items:center;gap:5px}
.sico{font-size:16px;flex-shrink:0}
.slbl{font-size:10px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.07em;flex:1;min-width:0}
.sbdg{font-size:10px;font-weight:700;padding:3px 8px;border-radius:8px;flex-shrink:0}
.bok{color:var(--ok);background:rgba(184,209,74,.12)}
.bhi{color:var(--hi);background:rgba(232,48,48,.12)}
.blo{color:var(--lo);background:rgba(52,152,219,.12)}
.sctl{display:flex;align-items:center;gap:8px;justify-content:space-between}
.sbtn{width:var(--touch);height:var(--touch);min-width:52px;min-height:52px;border-radius:14px;
  border:1px solid var(--bd2);background:var(--bg3);
  color:var(--tx);font-size:28px;font-weight:300;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background .08s,transform .08s;
  -webkit-user-select:none;user-select:none;touch-action:manipulation;font-family:'Nunito',sans-serif;line-height:1}
.sbtn:active{background:rgba(184,209,74,.18);transform:scale(.93)}
.sbtnw{width:58px}
.svalw{flex:1;text-align:center;min-width:0}
.sval{font-family:'Fredoka One',cursive;font-size:30px;color:var(--amber);line-height:1;display:block;transition:color .3s}
.sunit{font-size:11px;color:var(--tx3);font-weight:700;display:block;margin-top:2px}
.sthint{font-size:10px;color:var(--tx3);display:flex;justify-content:space-between;padding:0 2px;margin-top:-2px}
.sthint span{opacity:.7}
.stip{font-size:11px;margin-top:5px;line-height:1.45;padding:6px 9px;border-radius:8px;border-left:2px solid}
.tipok{color:var(--tx2);border-color:var(--pb3);background:rgba(184,209,74,.04)}
.tiphi{color:var(--hi);border-color:rgba(232,48,48,.4);background:rgba(232,48,48,.06)}
.tiplo{color:var(--lo);border-color:rgba(52,152,219,.4);background:rgba(52,152,219,.06)}
.qlbtn{display:flex;align-items:center;justify-content:center;gap:8px;
  width:calc(100% - 24px);margin:4px 12px 8px;padding:16px;min-height:var(--touch);
  background:linear-gradient(135deg,rgba(184,209,74,.1),rgba(56,200,216,.05));
  border:1px solid rgba(184,209,74,.3);border-radius:14px;
  font-family:'Fredoka One',cursive;font-size:15px;color:var(--pb);
  cursor:pointer;letter-spacing:.04em;transition:all .15s;touch-action:manipulation}
.qlbtn:active{transform:scale(.97);background:rgba(184,209,74,.18)}
input[type=range]{-webkit-appearance:none;width:100%;height:6px;border-radius:4px;
  background:rgba(255,255,255,.07);outline:none;margin:8px 0 4px;cursor:pointer;touch-action:pan-x}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;
  border-radius:50%;background:var(--pb);box-shadow:0 0 8px rgba(184,209,74,.5);cursor:pointer}
input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--pb);border:none}

/* ══ GROW TAB ══ */
#scenewrap{width:100%;background:var(--bg2);border-bottom:2px solid var(--bd2);position:relative;overflow:hidden}
#growsvg{width:100%;display:block;touch-action:pan-y}
.spill{position:absolute;top:10px;left:50%;transform:translateX(-50%);
  background:rgba(11,15,20,.78);border:1px solid var(--bd2);border-radius:20px;
  padding:4px 14px;font-family:'Fredoka One',cursive;font-size:12px;color:var(--pb);
  white-space:nowrap;backdrop-filter:blur(8px);pointer-events:none}
/* Phase nav */
.pscroll{display:flex;gap:6px;overflow-x:auto;padding:10px 12px;scrollbar-width:none}
.pscroll::-webkit-scrollbar{display:none}
.pchip{flex-shrink:0;padding:8px 14px;border-radius:20px;border:1px solid var(--bd);
  background:var(--card);color:var(--tx3);font-size:10px;font-weight:700;
  cursor:pointer;text-transform:uppercase;transition:transform .15s;white-space:nowrap;
  min-height:38px;touch-action:manipulation}
.pchip:active{transform:scale(.96)}
.pchip.cur{background:var(--pb);color:#0b0f14;border-color:var(--pb);
  box-shadow:0 0 14px rgba(184,209,74,.4);font-weight:900}
/* Status tiles (Zelt Live-Status) */
.stiles{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;padding:0 12px 10px}
.stile{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:8px 6px;text-align:center}
.stile-l{font-size:10px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.08em}
.stile-v{font-family:'Fredoka One',cursive;font-size:16px;line-height:1.1;margin:2px 0}
.stile-u{font-size:10px;color:var(--tx3);font-weight:600}
/* Soll grid */
.sollg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0 12px 10px}
.sv{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:10px;text-align:center}
.sv.sok{border-color:rgba(184,209,74,.22)}
.sv.swn{border-color:rgba(240,168,32,.28);background:rgba(240,168,32,.04)}
.sv.sbd{border-color:rgba(232,48,48,.28);background:rgba(232,48,48,.04)}
.svl{font-size:10px;color:var(--tx3);text-transform:uppercase;letter-spacing:.09em}
.svv{font-family:'Fredoka One',cursive;font-size:18px;line-height:1.1}
.svd{font-size:10px;font-weight:700;margin-top:2px}
/* Phase box */
.pbox{margin:0 12px 10px;background:linear-gradient(135deg,rgba(184,209,74,.05),transparent);
  border:1px solid rgba(184,209,74,.15);border-radius:16px;padding:14px}
#plantinspect{display:none;margin:0 12px 10px;
  background:linear-gradient(135deg,rgba(184,209,74,.07),transparent);
  border:1px solid rgba(184,209,74,.25);border-radius:16px;padding:14px}
/* Timer card */
.tcard{margin:0 12px 8px;background:var(--card);border:1px solid rgba(240,160,48,.22);border-radius:16px;padding:14px}
.btadj{width:44px;height:44px;border-radius:50%;border:1px solid var(--bd2);
  background:var(--card2);color:var(--tx);font-size:22px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;touch-action:manipulation}
.btadj:active{background:rgba(184,209,74,.15)}
.btwn{font-family:'Fredoka One',cursive;font-size:28px;color:var(--amber);text-align:center;min-width:38px}
.bpbg{height:8px;background:rgba(255,255,255,.06);border-radius:8px;overflow:hidden;margin-bottom:6px}
.bpfill{height:100%;border-radius:8px;transition:width .5s}

/* ══ BATCH TAB ══ */
.bhero{padding:14px 14px 10px;display:flex;flex-direction:column;gap:2px}
.bhtit{font-family:'Fredoka One',cursive;font-size:20px;color:var(--tx)}
.bhsub{font-size:11px;color:var(--tx3);font-weight:700;letter-spacing:.04em;margin-top:2px}
.togrow{display:flex;gap:8px;margin-bottom:12px}
.topt{flex:1;padding:12px 8px;border-radius:12px;border:1.5px solid var(--bd);background:var(--card);color:var(--tx3);font-size:13px;font-weight:700;cursor:pointer;text-align:center;touch-action:manipulation;transition:all .18s cubic-bezier(.34,1.56,.64,1)}
.topt.on{background:rgba(184,209,74,.14);border-color:var(--pb);color:var(--pb)}
.volnum{font-family:'Fredoka One',cursive;font-size:28px;color:var(--amber);background:var(--card);border:1px solid var(--bd2);border-radius:12px;padding:8px 12px;width:90px;text-align:center;touch-action:manipulation}
.badj{width:44px;height:44px;border-radius:10px;border:1px solid var(--bd2);
  background:var(--card2);color:var(--tx);font-size:22px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;touch-action:manipulation}
.badj:active{background:rgba(184,209,74,.15)}
.bval{font-family:'Fredoka One',cursive;font-size:20px;color:var(--pb);min-width:52px;text-align:center}
.tgts{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;padding:0 12px 10px}
.tc{background:rgba(184,209,74,.06);border:1px solid rgba(184,209,74,.18);border-radius:11px;padding:8px;text-align:center}
.tcl{font-size:10px;color:var(--pb3);text-transform:uppercase;letter-spacing:.09em}
.tcv{font-family:'Fredoka One',cursive;font-size:14px;color:var(--pb);line-height:1.1}
.rprog{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;margin:4px 0}
.rpnum{font-family:'Fredoka One',cursive;font-size:13px;color:var(--pb)}
.rlist{padding:0 12px}
.rstep{display:flex;align-items:center;gap:12px;background:var(--card);
  border:1px solid var(--bd);border-radius:14px;padding:14px 12px;margin-bottom:8px;
  cursor:pointer;transition:all .18s;position:relative;overflow:hidden;
  min-height:60px;touch-action:manipulation}
.rstep::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  border-radius:4px 0 0 4px;background:var(--bd2)}
.rstep.done{border-color:rgba(184,209,74,.22);background:rgba(184,209,74,.03)}
.rstep.done::before{background:var(--pb)}
.rstep.rsf::before{background:var(--amber)}
.rstep.rsp::before{background:var(--cyan)}
.rsn{width:34px;height:34px;border-radius:50%;background:var(--bg3);color:var(--tx3);
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rstep.done .rsn{background:var(--pb);color:#0b0f14}
.rsnm{font-size:12px;font-weight:700;color:var(--tx);flex:1}
.rsamt{font-family:'Fredoka One',cursive;font-size:20px;color:var(--amber);flex-shrink:0}
.rsnote{font-size:11px;color:var(--tx3);margin-top:2px;line-height:1.35}
.rsrng{font-size:11px;color:var(--pb3);margin-top:2px}
.progwrap{padding:0 14px 12px}
.progbg{height:8px;background:rgba(255,255,255,.06);border-radius:8px;overflow:hidden}
.progfill{height:100%;border-radius:8px;background:linear-gradient(90deg,var(--pb3),var(--pb));transition:width .5s}
.measg{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 14px 10px}
.mblk{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:14px;cursor:pointer;touch-action:manipulation}
.mblk:active{background:rgba(184,209,74,.06)}
.mblkl{font-size:10px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px}
.mblkv{font-family:'Fredoka One',cursive;font-size:32px;color:var(--amber);display:block;line-height:1}
.btnfire{display:block;width:calc(100% - 24px);margin:8px 12px 6px;padding:18px;
  min-height:56px;
  background:linear-gradient(135deg,rgba(232,48,48,.18),rgba(240,80,0,.12));
  border:2px solid rgba(232,48,48,.5);border-radius:16px;
  font-family:'Fredoka One',cursive;font-size:18px;color:var(--alarm);
  cursor:pointer;text-align:center;transition:transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .15s;
  letter-spacing:.04em;touch-action:manipulation;position:relative;
  box-shadow:0 4px 20px rgba(232,48,48,.2)}
.btnfire:active{transform:scale(.97)}
.btnfire:active{transform:scale(.97);background:rgba(232,48,48,.15)}
/* Sensor value — tap to type */
.svalw{cursor:pointer;-webkit-tap-highlight-color:rgba(184,209,74,.15);border-radius:8px;transition:background .1s}
.svalw:active{background:rgba(184,209,74,.08)}
.addcard{margin:0 12px 10px;background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:14px}
#blinfo{display:none;margin:0 12px 8px;background:rgba(184,209,74,.07);
  border:1px solid var(--bd2);border-radius:12px;padding:10px 12px;font-size:10px;color:var(--tx2);font-weight:700}

/* ══ GENETICS ══ */
:root{--gc:3}
#sgrid{display:grid;grid-template-columns:repeat(var(--gc),1fr);gap:6px;padding:0 12px 8px}
.scc{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:10px}
.scc.edit-card{padding:10px}
.scb{font-size:10px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:3px;line-height:1.2}
.gposmap{display:flex;align-items:flex-start;gap:7px;margin-bottom:7px}
.gposmap svg{flex-shrink:0;margin-top:1px}
.si{width:100%;background:rgba(0,0,0,.25);border:1px solid var(--bd2);color:var(--tx);
  border-radius:8px;padding:8px;margin-bottom:5px;
  font-family:'Nunito',sans-serif;font-size:16px!important;
  font-weight:700;box-sizing:border-box}
.si/* Touch: outline:none hier, Tastatur bekommt :focus-visible Ring */
:focus{outline:none;border-color:var(--pb);background:rgba(0,0,0,.35)}
/* Keyboard focus ring — only when NOT using touch */
:focus-visible{outline:2px solid var(--pb)!important;outline-offset:2px!important;border-radius:4px}
button:focus-visible,a:focus-visible,.hpchip:focus-visible,.nb:focus-visible{
  outline:2px solid var(--pb)!important;outline-offset:3px!important}
/* Skip to main content */
.skip-link{position:fixed;top:-100px;left:0;z-index:99999;background:var(--pb);color:var(--bg);
  padding:8px 16px;font-weight:700;border-radius:0 0 8px 0;transition:top .15s}
.skip-link:focus{top:0}
.si::placeholder{color:var(--tx3);font-weight:600}
.nota{width:100%;background:rgba(0,0,0,.2);border:1px solid var(--bd);color:var(--tx);
  border-radius:8px;padding:8px;min-height:52px;resize:none;font-family:'Nunito',sans-serif;font-size:16px!important}
.ne{margin-top:5px;padding:6px 8px;background:rgba(0,0,0,.2);border-radius:8px}
.nets{font-size:10px;color:var(--tx3);margin-bottom:2px}
.nett{font-size:10px;color:var(--tx2);line-height:1.4}
.gcopyrow{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}
.gcopybtn{background:rgba(184,209,74,.08);border:1px solid var(--bd2);color:var(--pb);
  font-size:10px;font-weight:700;padding:4px 7px;border-radius:7px;cursor:pointer;
  touch-action:manipulation;font-family:'Nunito',sans-serif}
.gcopybtn:active{background:rgba(184,209,74,.22)}
/* Clone Button — prominent, full-width in edit mode */
.gclonesec{margin-top:8px;padding-top:8px;border-top:1px solid var(--bd)}
.gclonebtn{display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;padding:9px;border-radius:10px;border:1px solid rgba(56,200,216,.35);
  background:rgba(56,200,216,.07);color:var(--cyan);
  font-size:10px;font-weight:700;cursor:pointer;touch-action:manipulation;font-family:'Nunito',sans-serif}
.gclonebtn:active{background:rgba(56,200,216,.18)}
.gclone-targets{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.gclone-target{padding:6px 10px;border-radius:8px;border:1px solid var(--bd2);
  background:var(--bg3);color:var(--tx);font-size:10px;font-weight:700;
  cursor:pointer;touch-action:manipulation;font-family:'Nunito',sans-serif}
.gclone-target:active{background:rgba(56,200,216,.2);border-color:var(--cyan);color:var(--cyan)}
/* Clone-All button */
.gclone-all{padding:6px 12px;border-radius:8px;border:1px solid rgba(56,200,216,.4);
  background:rgba(56,200,216,.1);color:var(--cyan);font-size:10px;font-weight:700;
  cursor:pointer;touch-action:manipulation;font-family:'Nunito',sans-serif}
.gclone-all:active{background:rgba(56,200,216,.25)}

/* ══ GENERIC CARDS & BUTTONS ══ */
.card{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:14px;margin:0 12px 8px}
.btn{background:var(--card2);border:1px solid var(--bd2);color:var(--tx);
  font-size:10px;font-weight:700;padding:10px 14px;border-radius:10px;
  cursor:pointer;font-family:'Nunito',sans-serif;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;min-height:40px;touch-action:manipulation}
.btn:active{opacity:.75}
.btng{background:rgba(184,209,74,.1);border-color:rgba(184,209,74,.3);color:var(--pb)}
.btna{background:rgba(240,160,48,.08);border-color:rgba(240,160,48,.28);color:var(--amber)}
select{background:var(--card2);border:1px solid var(--bd2);color:var(--tx);
  border-radius:10px;padding:10px 12px;width:100%;min-height:44px}
.lkbdg{background:rgba(184,209,74,.08);border:1px solid rgba(184,209,74,.2);
  border-radius:10px;padding:10px 12px;font-size:10px;color:var(--pb);font-weight:700}

/* ══ LOG ══ */
.logwrap{overflow-x:auto;padding:0 12px 10px}
.ltbl{width:100%;border-collapse:collapse;font-size:12px}
.ltbl th{background:rgba(0,0,0,.3);color:var(--tx3);padding:7px 6px;
  text-align:left;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  border-bottom:1px solid var(--bd);white-space:nowrap}
.ltbl td{padding:7px 6px;border-bottom:1px solid rgba(255,255,255,.04);white-space:nowrap}
.lok{color:var(--pb)}.lwn{color:var(--warn)}.lbd{color:var(--alarm)}
.spark{display:flex;gap:3px;align-items:flex-end;padding:4px 12px 4px;min-height:68px}
.spb{flex:1;min-width:10px;background:rgba(184,209,74,.4);border-radius:3px 3px 0 0}
.spb.sb{background:rgba(232,48,48,.5)}.spb.sw{background:rgba(52,152,219,.4)}
.lbentry{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:12px;margin:0 12px 8px}
.lbts{font-size:11px;color:var(--tx3);font-weight:700;margin-bottom:6px}
.lbvals{display:flex;gap:12px;flex-wrap:wrap}
.lbvl{font-size:10px;color:var(--tx3);text-transform:uppercase;letter-spacing:.09em}
.lbv{font-family:'Fredoka One',cursive;font-size:16px;color:var(--pb)}

/* ══ TOAST & MODAL ══ */
#toast{
  position:fixed;top:calc(var(--st) + 56px);left:50%;
  transform:translateX(-50%) translateY(-8px);
  background:rgba(20,30,24,.97);border:1px solid rgba(184,209,74,.3);
  border-radius:14px;z-index:10000;display:none;
  padding:10px 14px 10px 10px;font-size:13px;font-weight:700;color:var(--tx);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  max-width:88%;text-align:left;align-items:center;gap:10px;
}
#toast.on{display:flex;animation:toastIn .3s cubic-bezier(.34,1.56,.64,1) forwards}
#toast .tmsg{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#toast .ticon{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}
/* Typ-spezifische Icon-Rahmen — Textfarbe bleibt neutral */
#toast.t-info .ticon{border-color:rgba(56,200,216,.5);box-shadow:0 0 8px rgba(56,200,216,.25)}
#toast.t-warn .ticon{border-color:rgba(240,160,48,.55);box-shadow:0 0 8px rgba(240,160,48,.3)}
#toast.t-ok   .ticon{border-color:rgba(184,209,74,.55);box-shadow:0 0 8px rgba(184,209,74,.3)}
#toast.t-err  .ticon{border-color:rgba(232,48,48,.6);box-shadow:0 0 10px rgba(232,48,48,.35)}
/* Legacy .alarm-Klasse: Override auf neutralen Hintergrund, damit alte Calls auch neue Optik bekommen */
#toast.alarm{background:rgba(20,30,24,.97);color:var(--tx)}
@keyframes tpop{from{opacity:0;transform:translateX(-50%) translateY(12px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
#modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:500;align-items:flex-end}
#modal.on{display:flex;animation:sup .25s ease forwards}
@keyframes sup{from{opacity:0}to{opacity:1}}
.mbox{background:var(--bg2);border:1px solid var(--bd2);width:100%;
  max-height:88vh;border-radius:20px 20px 0 0;display:flex;flex-direction:column;overflow:hidden;padding-bottom:var(--sb)}
.mbox::before{content:'';display:block;width:36px;height:4px;background:rgba(255,255,255,.18);border-radius:4px;margin:10px auto 0}
.mhd{background:rgba(0,0,0,.3);border-bottom:1px solid var(--bd);
  padding:12px 14px;display:flex;align-items:center;justify-content:space-between}
.mhdt{font-family:'Fredoka One',cursive;font-size:15px;color:var(--cyan)}
.mbd{overflow-y:auto;padding:12px;flex:1;-webkit-overflow-scrolling:touch}
/* ══ BATCH C: PUSH REMINDERS ══ */
.notif-banner{margin:0 12px 10px;background:rgba(184,209,74,.07);border:1px solid rgba(184,209,74,.22);border-radius:14px;padding:12px 14px;display:flex;gap:10px;align-items:center}
.notif-banner-ico{font-size:22px;flex-shrink:0}
.notif-banner-body{flex:1;min-width:0}
.notif-banner-ttl{font-size:11px;font-weight:700;color:var(--pb);margin-bottom:2px}
.notif-banner-sub{font-size:11px;color:var(--tx3);line-height:1.4}
.notif-enable-btn{background:var(--pb);border:none;border-radius:8px;padding:7px 12px;font-size:11px;font-weight:700;color:var(--bg);cursor:pointer;white-space:nowrap;flex-shrink:0}
.reminder-list{display:flex;flex-direction:column;gap:6px;margin:0 12px 10px}
.reminder-row{display:flex;align-items:center;gap:8px;background:var(--card);border-radius:10px;padding:9px 12px;border:1px solid var(--bd)}
.reminder-row.active{border-color:rgba(184,209,74,.3)}
.reminder-ico{font-size:16px;flex-shrink:0;width:22px;text-align:center}
.reminder-body{flex:1;min-width:0}
.reminder-lbl{font-size:11px;font-weight:700;color:var(--tx)}
.reminder-sub{font-size:11px;color:var(--tx3);margin-top:1px}
.reminder-toggle{position:relative;width:36px;height:20px;flex-shrink:0}
.reminder-toggle input{opacity:0;width:0;height:0;position:absolute}
.rt-track{position:absolute;inset:0;border-radius:10px;background:rgba(255,255,255,.1);cursor:pointer;transition:background .2s}
.rt-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.4);transition:all .2s;cursor:pointer}
.reminder-toggle input:checked~.rt-track{background:rgba(184,209,74,.4)}
.reminder-toggle input:checked~.rt-thumb{transform:translateX(16px);background:var(--pb)}

/* ══ BATCH A: TRICHOM CHART / STRAIN-BW / pH-TREND / WASSER ══ */
.trich-chart-wrap{margin:10px 0 4px;background:rgba(0,0,0,.25);border-radius:12px;padding:10px 8px 6px;display:none}
.trich-chart-wrap .chart-lbl{font-size:10px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.chart-legend-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.strain-bw{display:flex;align-items:center;gap:4px;margin-top:6px;padding-top:6px;border-top:1px solid rgba(184,209,74,.1)}
.strain-bw-lbl{font-size:10px;color:var(--tx3);font-weight:700;flex:1}
.sbwadj{width:22px;height:22px;border:1px solid rgba(184,209,74,.25);background:rgba(0,0,0,.3);border-radius:6px;color:var(--tx2);font-size:13px;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sbwval{font-size:11px;font-weight:700;color:var(--amber);min-width:22px;text-align:center}
.ph-trend-badge{display:inline-flex;align-items:center;gap:4px;background:rgba(240,168,32,.1);border:1px solid rgba(240,168,32,.3);border-radius:8px;padding:3px 7px;font-size:10px;font-weight:700;color:var(--warn)}
.water-card{margin:0 12px 10px;background:rgba(56,200,216,.06);border:1px solid rgba(56,200,216,.2);border-radius:14px;padding:12px 14px}
.water-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:10px}
.water-stat{background:rgba(0,0,0,.2);border-radius:10px;padding:8px;text-align:center}
.water-stat-v{font-family:'Fredoka One',cursive;font-size:18px;color:var(--cyan)}
.water-stat-l{font-size:10px;color:var(--tx3);text-transform:uppercase;letter-spacing:.06em;margin-top:2px;font-weight:700}
.water-bars{display:flex;gap:4px;align-items:flex-end;height:40px;margin-top:8px}
.water-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px}
.water-bar{width:100%;border-radius:4px 4px 0 0;background:rgba(56,200,216,.5);min-height:2px}
.water-bar-lbl{font-size:10px;color:var(--tx3);font-weight:700}

/* ══ NEEDS HUB COMBINED ══ */
#needs-hub .ntile{border-radius:10px;padding:7px 4px;text-align:center;cursor:pointer;position:relative;min-height:82px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:1px;touch-action:manipulation}
#needs-hub .ntico{font-size:20px;line-height:1}
#needs-hub .ntlbl{font-size:9px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
#needs-hub .ntval{font-family:'Fredoka One',cursive;font-size:15px;line-height:1.1;color:var(--tx)}
#needs-hub .ntunit{font-size:9px;font-weight:700;color:var(--tx3);margin-left:1px}
#needs-hub .ntsoll{font-size:8.5px;color:var(--tx3);line-height:1.2;margin-top:1px}
#needs-hub .ntdiff{font-size:9px;font-weight:900;line-height:1;margin-top:2px}
#needs-hub .ntdiff.dOk{color:var(--ok)}
#needs-hub .ntdiff.dWn{color:var(--warn)}
#needs-hub .ntdiff.dBd{color:var(--alarm)}
#needs-hub .ntbar{width:100%;height:3px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden;margin-top:4px}
#needs-hub .ntbf{height:3px;border-radius:3px;transition:width .6s cubic-bezier(.34,1.56,.64,1)}
/* keep old ntile classes for colour states */
#needs-hub .nto{background:rgba(184,209,74,.1);border:1px solid rgba(184,209,74,.25)}
#needs-hub .ntw{background:rgba(240,168,32,.08);border:1px solid rgba(240,168,32,.2)}
#needs-hub .ntl{background:rgba(232,48,48,.1);border:1px solid rgba(232,48,48,.25)}
#needs-hub .ntb{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
#needs-hub .ok{color:var(--pb)}
#needs-hub .wn{color:var(--warn)}
#needs-hub .lo{color:var(--alarm)}
#needs-hub .bd{color:var(--tx3)}
#needs-hub .nbg{background:var(--pb)}
#needs-hub .nbw{background:var(--warn)}
#needs-hub .nbl{background:var(--alarm)}
#needs-hub .nbb{background:rgba(255,255,255,.25)}
/* #7 Veraltete Daten Banner */
/* #stale-banner: Styling over .unibanner --warn */
.stale-ico{font-size:20px;flex-shrink:0}
.stale-body{flex:1;min-width:0}
.stale-ttl{font-size:11px;font-weight:700;color:var(--warn)}
.stale-sub{font-size:11px;color:var(--tx3);margin-top:1px}
.stale-btn{background:var(--warn);border:none;border-radius:8px;padding:6px 10px;font-size:10px;font-weight:700;color:var(--bg);cursor:pointer;white-space:nowrap;flex-shrink:0}
/* #6 Alert Snooze */
.alert-snooze-btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:5px 10px;font-size:10px;font-weight:700;color:var(--tx3);cursor:pointer;flex-shrink:0;margin-left:4px}
/* #9 Batch Notiz */
#batch-note-wrap{padding:0 12px 8px;margin-top:-4px}
#batch-note{width:100%;background:rgba(0,0,0,.3);border:1px solid var(--bd);border-radius:10px;padding:8px 10px;color:var(--tx);font-size:13px;resize:none;min-height:52px;font-family:'Nunito',sans-serif;line-height:1.45}
#batch-note::placeholder{color:var(--tx3)}
/* #5 Quicklog Undo */
#ql-undo-bar{display:none;position:fixed;bottom:calc(var(--nav)+70px);left:8px;right:72px;
  background:rgba(56,200,216,.12);border:1px solid rgba(56,200,216,.3);border-radius:12px;
  padding:8px 12px;z-index:390;align-items:center;gap:8px}
#ql-undo-bar.on{display:flex;animation:slUp .2s ease}
/* #3 Teil-Ernte */
.part-harvest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.ph-plant-btn{background:rgba(0,0,0,.3);border:1px solid var(--bd);border-radius:10px;padding:8px 4px;text-align:center;cursor:pointer;transition:all .15s}
.ph-plant-btn.harvested{background:rgba(184,209,74,.12);border-color:rgba(184,209,74,.4)}
.ph-plant-btn.harvested .ph-ico{opacity:.4}
.ph-plant-lbl{font-size:10px;color:var(--tx3);font-weight:700;margin-bottom:4px;text-transform:uppercase}
.ph-ico{font-size:18px}
.ph-date{font-size:10px;color:var(--pb);margin-top:3px;font-weight:700}
/* #4 Terpenprofil in Genetics */
.terp-field{margin-top:6px;padding-top:6px;border-top:1px solid rgba(184,209,74,.1)}
.terp-field label{font-size:10px;color:var(--tx3);font-weight:700;display:block;margin-bottom:3px;text-transform:uppercase;letter-spacing:.05em}
.terp-input{width:100%;background:rgba(0,0,0,.3);border:1px solid var(--bd);border-radius:6px;padding:5px 7px;color:var(--tx2);font-size:11px;font-family:'Nunito',sans-serif}
/* #10 Strain Ranking */
.strain-rank-card{background:rgba(184,209,74,.06);border:1px solid rgba(184,209,74,.2);border-radius:14px;padding:12px;margin:0 12px 10px}
.rank-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid rgba(184,209,74,.07)}
.rank-row:last-child{border:none}
.rank-pos{font-family:'Fredoka One',cursive;font-size:16px;color:var(--amber);min-width:26px}
.rank-name{flex:1;font-size:12px;font-weight:700;color:var(--tx)}
.rank-stats{font-size:10px;color:var(--tx3);text-align:right}
.rank-yield{font-family:'Fredoka One',cursive;font-size:14px;color:var(--pb);min-width:44px;text-align:right}
/* #8 Rosin Chart */
#rosin-chart-wrap{margin-top:12px;background:rgba(0,0,0,.25);border-radius:12px;padding:10px 8px 6px;display:none}
#rosin-chart-lbl{font-size:10px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px}
/* ══ BATCH B CSS (continued) ══ */
#quicklog-overlay{display:none;position:fixed;bottom:calc(var(--nav) + 8px);left:8px;right:8px;
  background:var(--bg2);border:1px solid var(--bd2);border-radius:18px;
  padding:14px 14px 12px;z-index:400;box-shadow:0 -4px 32px rgba(0,0,0,.6)}
#quicklog-overlay.on{display:block;animation:slUp .2s ease}
@keyframes slUp{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
.ql-title{font-family:'Fredoka One',cursive;font-size:13px;color:var(--amber);margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
.ql-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}
.ql-row{background:rgba(0,0,0,.3);border-radius:10px;padding:8px 10px}
.ql-lbl{font-size:10px;color:var(--tx3);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.ql-ctl{display:flex;align-items:center;gap:6px}
.ql-btn{width:44px;height:44px;border-radius:12px;border:1px solid var(--bd2);background:rgba(255,255,255,.05);
  color:var(--tx);font-size:24px;font-weight:300;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background .12s;touch-action:manipulation}
.ql-val{flex:1;text-align:center;font-family:'Fredoka One',cursive;font-size:16px;color:var(--pb)}
.ql-unit{font-size:11px;color:var(--tx3);font-weight:700}
.ql-apply{display:block;width:100%;padding:16px;margin-top:8px;background:linear-gradient(135deg,var(--pb3),var(--pb));border:none;border-radius:14px;font-family:'Fredoka One',cursive;font-size:17px;color:#0b0f14;cursor:pointer;text-align:center;transition:transform .15s cubic-bezier(.34,1.56,.64,1);touch-action:manipulation}.ql-apply:active{transform:scale(.97)}
#ql-fab{position:fixed;bottom:calc(var(--nav) + 14px);right:14px;width:48px;height:48px;
  border-radius:50%;background:linear-gradient(135deg,var(--pb3),var(--pb));
  border:none;color:var(--bg);font-size:22px;cursor:pointer;z-index:410;
  box-shadow:0 4px 16px rgba(184,209,74,.4);display:flex;align-items:center;justify-content:center}
#ql-fab.ql-open{background:linear-gradient(135deg,#602020,#a03030)}
.archive-card{cursor:pointer;position:relative}
.archive-card .cmp-badge{display:none;position:absolute;top:8px;right:60px;
  background:var(--amber);color:var(--bg);border-radius:20px;font-size:10px;font-weight:900;padding:2px 7px}
.archive-card.selected{border-color:var(--amber)!important}
.archive-card.selected .cmp-badge{display:block}
#compare-bar{display:none;position:fixed;bottom:calc(var(--nav)+8px);left:8px;right:72px;
  background:rgba(240,160,48,.15);border:1px solid var(--amber);border-radius:14px;
  padding:8px 12px;z-index:350;align-items:center;gap:8px}
#compare-bar.on{display:flex}
#compare-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:700;overflow-y:auto;padding:16px 12px calc(var(--nav)+24px);-webkit-overflow-scrolling:touch}
#compare-modal.on{display:block}
.cmp-header{font-family:'Fredoka One',cursive;font-size:16px;color:var(--amber);margin-bottom:14px;display:flex;justify-content:space-between;align-items:center}
.cmp-v{font-weight:700;font-family:'Fredoka One',cursive;font-size:13px;color:var(--tx2)}
.cmp-v.win{color:var(--pb)}
.cmp-v.lose{color:var(--tx3)}
.rosin-row{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.rosin-field{flex:1;min-width:80px}
.rosin-field label{font-size:10px;color:var(--tx3);font-weight:700;text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:3px}
.rosin-field input{width:100%;background:rgba(0,0,0,.35);border:1px solid var(--bd);border-radius:8px;
  padding:7px 8px;color:var(--tx);font-family:'Fredoka One',cursive;font-size:15px;text-align:center}
.rosin-yield{text-align:center;border-radius:8px;padding:8px;margin-top:4px}
.rosin-yield-n{font-family:'Fredoka One',cursive;font-size:22px;color:var(--amber)}
.rosin-yield-l{font-size:10px;color:var(--tx3);font-weight:700;text-transform:uppercase}
.rosin-log-item{font-size:10px;color:var(--tx2);padding:5px 0;border-bottom:1px solid var(--bd);line-height:1.5}
.rosin-log-item:last-child{border:none}
/* ══════════════════════════════════════════════════════════
   V10.1 UX SPRINT — SMARTPHONE OPTIMIERUNG
   Swipe · Native Nav · Bottom Sheets · FAB · Collapsibles
   ══════════════════════════════════════════════════════════ */

/* ── 1. TAB TRANSITION ANIMATIONS ── */
.tab{backface-visibility:hidden}
@keyframes _uxSlideInRight{from{transform:translateX(52px);opacity:.3}to{transform:translateX(0);opacity:1}}
@keyframes _uxSlideInLeft{from{transform:translateX(-52px);opacity:.3}to{transform:translateX(0);opacity:1}}
.tab._ux-enter-right{animation:_uxSlideInRight .28s cubic-bezier(.25,.46,.45,.94) forwards}
.tab._ux-enter-left{animation:_uxSlideInLeft .28s cubic-bezier(.25,.46,.45,.94) forwards}

/* ── 2. ENHANCED BOTTOM NAV ── */
#nav{
  height:calc(72px + var(--sb));
  background:rgba(8,12,18,.98);
  backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);
  border-top:1px solid rgba(184,209,74,.14);
  padding:0 6px;
}
.nb{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:none;border:none;cursor:pointer;
  min-height:56px;
  padding:10px 4px calc(var(--sb) + 2px);
  border-radius:14px;
  transition:background .15s,transform .18s cubic-bezier(.34,1.56,.64,1);
  touch-action:manipulation;-webkit-user-select:none;user-select:none;
  position:relative;
}
.nb:active{background:rgba(184,209,74,.07);transform:scale(.93)}
.nb.on{background:rgba(184,209,74,.09)}

/* Active pill indicator replaces old ::after */
.nb::after{
  content:'';position:absolute;top:5px;left:50%;
  transform:translateX(-50%) scaleX(0);
  width:28px;height:3px;
  background:var(--pb);border-radius:2px;
  box-shadow:0 0 10px rgba(184,209,74,.75);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1);
}
.nb.on::after{transform:translateX(-50%) scaleX(1)}

.nbico{font-size:25px;line-height:1.1;transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.nb.on .nbico{transform:scale(1.2) translateY(-1px)}
.nblbl{font-size:10px;font-weight:800;letter-spacing:.01em;color:var(--tx3);transition:color .15s}
.nb.on .nblbl{color:var(--pb)}

/* Tab area padding for new nav height */
.tab.active{padding-bottom:calc(72px + var(--sb) + 20px)}

/* ── 3. FAB ── */
#_ux_fab{
  position:fixed;left:14px;
  bottom:calc(72px + var(--sb) + 14px);
  z-index:210;
  width:54px;height:54px;
  background:linear-gradient(145deg,#c8de55,#9fc040);
  border-radius:17px;border:none;
  cursor:pointer;
  box-shadow:0 4px 18px rgba(184,209,74,.5),0 2px 8px rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;line-height:1;
  touch-action:manipulation;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),opacity .2s,box-shadow .2s;
  -webkit-tap-highlight-color:transparent;
}
#_ux_fab:active{transform:scale(.85);box-shadow:0 2px 10px rgba(184,209,74,.3)}
#_ux_fab._hidden{transform:scale(0) translateY(12px);opacity:0;pointer-events:none}
#_ux_fab_tip{
  position:fixed;left:76px;
  bottom:calc(72px + var(--sb) + 26px);
  background:rgba(18,26,36,.96);border:1px solid var(--bd2);
  border-radius:10px;padding:7px 12px;
  font-size:11px;font-weight:700;color:var(--tx);
  z-index:209;white-space:nowrap;
  opacity:0;pointer-events:none;
  transform:translateX(6px);
  transition:opacity .18s,transform .18s;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
}
#_ux_fab_tip._show{opacity:1;transform:translateX(0)}

/* ── 4. BOTTOM SHEETS ── */
@keyframes _sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
._ux-sheet{
  width:100%;max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  border-radius:22px 22px 0 0!important;
  padding-bottom:calc(var(--sb) + 16px)!important;
  background:var(--bg2)!important;
  border:1px solid var(--bd2)!important;border-bottom:none!important;
  animation:_sheetUp .32s cubic-bezier(.32,.72,0,1) forwards;
  box-shadow:0 -8px 40px rgba(0,0,0,.5)!important;
}
._ux-sheet-handle{
  width:38px;height:4px;background:rgba(255,255,255,.14);
  border-radius:2px;margin:14px auto 16px;flex-shrink:0;display:block;
}

/* ── 5. COLLAPSIBLE SECTIONS ── */
._csect-trigger{
  display:flex;align-items:center;padding:12px 14px 6px;
  cursor:pointer;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;user-select:none;
  font-family:'Fredoka One',cursive;font-size:13px;color:var(--tx2);
  text-transform:uppercase;letter-spacing:.07em;gap:8px;
}
._csect-trigger::before{content:attr(data-icon);font-size:14px;font-family:inherit}
._csect-trigger::after{content:'';flex:1;height:1px;background:var(--bd)}
._csect-chev{
  font-size:11px;color:var(--tx3);margin-left:6px;flex-shrink:0;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1);display:inline-block;
}
._csect-chev._open{transform:rotate(180deg)}
._csect-body{
  overflow:hidden;
  max-height:0;
  transition:max-height .32s cubic-bezier(.4,0,.2,1),opacity .25s;
  opacity:0;
}
._csect-body._open{max-height:3000px;opacity:1}

/* ── 6. SWIPE HINT BADGE ── */
@keyframes _swipeHint{
  0%{opacity:0;transform:translateX(-50%) translateY(8px)}
  15%{opacity:1;transform:translateX(-50%) translateY(0)}
  75%{opacity:1;transform:translateX(-50%) translateY(0)}
  100%{opacity:0;transform:translateX(-50%) translateY(-6px)}
}
._swipe-hint{
  position:fixed;bottom:calc(72px + var(--sb) + 10px);left:50%;
  transform:translateX(-50%);
  background:rgba(10,14,20,.92);border:1px solid rgba(255,255,255,.1);
  border-radius:20px;padding:7px 16px;
  font-size:11px;font-weight:700;color:rgba(255,255,255,.7);
  z-index:208;pointer-events:none;white-space:nowrap;
  animation:_swipeHint 3s 1.2s ease-in-out forwards;
  backdrop-filter:blur(10px);
}

/* ── 7. SECTION VISUAL POLISH ── */
.stitle{padding:14px 14px 7px;font-size:12px}
.scard{border-radius:18px}

/* ── 8. TAB CONTAINER SAFE ── */
#tabs{touch-action:pan-y}

/* ── 9. MODAL BACKDROPS IMPROVED ── */
#demo-modal,#fav-modal{align-items:flex-end}

/* ── 10. ACTIVE FEEDBACK FOR CARDS ── */
[onclick]:not(.nb):not(button):not(.hpchip){-webkit-tap-highlight-color:rgba(184,209,74,.06)}

/* ══ V10.1 PATCH 2 — HOME FOCUS STRIP + SECTION POLISH ══ */

/* Focus Strip — persistent live-Werte-Bar über der nav */
#_ux_strip{
  position:fixed;
  bottom:calc(72px + var(--sb));
  left:0;right:0;
  height:36px;
  background:rgba(9,13,18,.96);
  border-top:1px solid rgba(184,209,74,.1);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  display:flex;align-items:center;
  padding:0 14px;gap:0;
  z-index:199;
  transition:transform .22s,opacity .22s;
}
#_ux_strip._hidden{transform:translateY(100%);opacity:0;pointer-events:none}
._strip-val{
  flex:1;display:flex;flex-direction:column;align-items:center;
  font-family:'Fredoka One',cursive;cursor:pointer;
  touch-action:manipulation;
  border-right:1px solid rgba(255,255,255,.06);
  padding:0 6px;
}
._strip-val:last-child{border-right:none}
._sv-num{font-size:16px;line-height:1;color:var(--pb);transition:color .4s}
._sv-num.hi{color:var(--alarm)}
._sv-num.lo{color:var(--blue)}
._sv-lbl{font-size:10px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.07em;margin-top:1px}

/* Nav padding on tab content — strip removed */
.tab.active{padding-bottom:calc(72px + var(--sb) + 20px)}
#_ux_strip{display:none!important}

/* Home: Fokus-Modus Toggle */


/* Better Needs Hub compact mode */
#needs-hub{border-radius:18px!important}
#ntiles .ntile{border-radius:12px!important}

/* Section dividers more readable */
.stitle{
  color:var(--tx3)!important;
  font-size:11px!important;
  padding:14px 14px 5px!important;
}

/* XP card tighter */
.xpcard{margin:0 12px 6px!important;padding:10px 12px!important}

/* Records card no extra margin */
#records-card{margin:0 0 6px!important}

/* Phase preview card tighter */
#home-phase-preview{margin:0 12px 6px!important}

/* Sensor cards bigger values */
.sval{font-size:32px!important}
.sbtn{border-radius:16px!important;font-weight:400!important}

/* AI tip tighter */
.aitip{margin:0 12px 6px!important;padding:12px 14px!important}

/* Batch tab: recipe steps larger touch target */
.rstep{min-height:52px!important;border-radius:12px!important}

/* ══ V10.1 PATCH 4 — BATCH + LOG + GENES MOBILE POLISH ══ */

/* Batch recipe steps — bigger checkboxes */
.rsn{min-width:32px!important;min-height:32px!important;width:32px!important;height:32px!important;border-radius:10px!important;font-size:13px!important}
.rsnm{font-size:13px!important;font-weight:700!important}
.rsamt{font-size:18px!important}

/* Log tab: entries bigger */
.le{min-height:54px!important;border-radius:14px!important}
.lev{font-size:16px!important}

/* Genetics inputs bigger */
.si{font-size:14px!important;padding:10px 12px!important;min-height:44px!important;border-radius:12px!important}
.scc{border-radius:16px!important;padding:12px!important}

/* Achievements tab */
.badge-card{min-height:56px!important;border-radius:16px!important;padding:14px!important}
.badge-ico{font-size:28px!important}

/* Overlays as bottom sheets */
#compare-bar{border-radius:22px 22px 0 0!important}
#quicklog-overlay{border-radius:22px 22px 0 0!important}

/* Trichom stepper */
.trich-btn{min-width:44px!important;min-height:44px!important;border-radius:12px!important}

/* Archive card */
.archive-card{border-radius:18px!important}

/* Better card active states */
.ntile:active{transform:scale(.94)!important;transition:transform .1s!important}

/* Phase chips */
.hpchip{padding:7px 14px!important;min-height:36px!important;font-size:11px!important}

/* Quick action buttons */
.grow-action-btn{border-radius:16px!important;padding:12px 14px!important}

/* Grow scene */
#scenewrap{border-radius:0 0 18px 18px!important}

/* ═══════════════════════════════════════════════════════════
   iOS NATIVE FEEL PATCH — V10.2
   Press Feedback · Spring Curves · Scroll · PWA Polish
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Kein Tap-Highlight überall ── */
*{-webkit-tap-highlight-color:transparent!important}

/* ── 2. Instant Press Feedback (CSS-Haptic für iOS) ── */
._tap{
  transform:scale(0.96)!important;
  filter:brightness(0.85)!important;
  transition:transform 0.05s ease,filter 0.05s ease!important;
}
/* Spring-Release auf allen interaktiven Elementen */
button,.hpchip,.ntile,.rstep,.todo,.badge-card,.archive-card,
.fav-item,.scc,.xpcard,._csect-trigger,.mblk,.addcard{
  transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
             filter 0.22s ease-out,
             background 0.12s ease,
             border-color 0.12s ease;
}

/* ── 3. Haptic Flash auf Root-Ebene ── */
@keyframes _hapFlash{0%{opacity:.92}50%{opacity:1}100%{opacity:1}}
html._hap{animation:_hapFlash 0.1s ease-out}

/* ── 4. iOS Spring Curves — weicher und natürlicher ── */
/* Tab Slide: schneller Einlauf, sanfter Stop */
@keyframes _uxSlideInRight{
  from{transform:translateX(44px);opacity:0.2}
  to  {transform:translateX(0);   opacity:1}
}
@keyframes _uxSlideInLeft{
  from{transform:translateX(-44px);opacity:0.2}
  to  {transform:translateX(0);    opacity:1}
}
.tab._ux-enter-right{animation:_uxSlideInRight 0.3s cubic-bezier(0.22,1,0.36,1) forwards}
.tab._ux-enter-left {animation:_uxSlideInLeft  0.3s cubic-bezier(0.22,1,0.36,1) forwards}

/* Bottom Sheet: iOS typische Slide-Up Kurve */
@keyframes _sheetUp{
  from{transform:translateY(100%);opacity:0.6}
  to  {transform:translateY(0);   opacity:1}
}
._ux-sheet,._ux-sheet~div{
  animation:_sheetUp 0.36s cubic-bezier(0.22,1,0.36,1) forwards!important
}

/* Modal Backdrop: sanfteres Einblenden */
#demo-modal,#fav-modal,#clone-modal,#sval-modal{
  animation:none;transition:none;
}
#demo-modal[style*="flex"],#fav-modal[style*="flex"],
#clone-modal[style*="flex"],#sval-modal[style*="flex"]{
  animation:_backdropIn 0.22s ease-out forwards;
}
@keyframes _backdropIn{from{opacity:0}to{opacity:1}}

/* ── 5. Scroll Verbesserungen ── */
/* Kein CSS smooth-scroll — iOS hat eigene Momentum-Physik */
.tab.active{scroll-behavior:auto}

/* Overscroll nur in Containern einschließen, nicht auf Body */
.tab.active,._ux-sheet,#compare-modal,#pdf-overlay,
#fav-modal > div,#demo-modal > div,#clone-modal > div{
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

/* Phase-Chips: Scroll Snap */
#hdr-pnav{
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}
.hpchip{scroll-snap-align:center}

/* ── 6. User-Select auf UI-Chrome ── */
#hdr,#nav,#_ux_strip,
.stitle,.ntile,.badge-card,.rc-hdr,.xpcard,
.hub-todo,.mrow,.shdr,.sthint,._csect-trigger,
button,.hpchip,.nb,.togrow{
  -webkit-user-select:none!important;
  user-select:none!important;
}

/* ── 7. Global Touch-Action ── */
a,button,[onclick],[role="button"],.hpchip,.nb,
.ntile,.rstep,.todo,.badge-card{
  touch-action:manipulation;
}

/* ── 8. PWA Standalone Mode ── */
html.pwa #hdr{
  /* Header-Hintergrund nahtlos hinter Dynamic Island */
  background:linear-gradient(180deg,#0b0f14 0%,#0e1520 100%);
}
html.pwa body{
  /* Kein Overscroll-Bounce auf Body-Ebene */
  overscroll-behavior-y:none;
}
/* Im Standalone-Modus: kein "Website"-Feeling */
html.pwa *::selection{background:transparent}

/* ── 9. Keyboard Open State ── */
html._kb-open #nav{
  transform:translateY(calc(-1 * var(--kb-h,0px)));
  transition:transform 0.28s cubic-bezier(0.22,1,0.36,1);
}
html._kb-open #_ux_strip{
  transform:translateY(calc(-1 * var(--kb-h,0px)));
  transition:transform 0.28s cubic-bezier(0.22,1,0.36,1);
}

/* ── 10. Smooth Rendering ── */
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Stretch beim Wischen */
.tab{transform-origin:center top}
@keyframes _tabStretch{0%{transform:scale(1)}30%{transform:scale(.97,.985)}100%{transform:scale(1)}}
.tab._ux-stretch{animation:_tabStretch .3s cubic-bezier(.34,1.56,.64,1) forwards}

/* Pull-to-Refresh Indikator */
#_ptr{
  position:fixed;top:0;left:50%;transform:translateX(-50%) translateY(-100%);
  z-index:500;pointer-events:none;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),opacity .2s;
  opacity:0;
}
#_ptr._visible{transform:translateX(-50%) translateY(calc(var(--st) + 6px));opacity:1}
#_ptr-inner{
  background:var(--bg2);border:1px solid var(--bd2);border-radius:20px;
  padding:6px 14px;display:flex;align-items:center;gap:7px;
  font-size:11px;font-weight:700;color:var(--tx3);
  box-shadow:0 4px 16px rgba(0,0,0,.4);
}
#_ptr-spinner{
  width:14px;height:14px;border:2px solid var(--bd2);border-top-color:var(--pb);
  border-radius:50%;animation:_spin .7s linear infinite;
}
@keyframes _spin{to{transform:rotate(360deg)}}

/* ══ DATENPERSISTENZ V10.3 ══ */
#backup-card{margin:0 12px 10px;background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:14px}
.bkp-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.bkp-title{font-family:'Fredoka One',cursive;font-size:13px;color:var(--tx);flex:1}
.bkp-last{font-size:10px;color:var(--tx3);font-weight:700}
.storage-track{height:6px;background:rgba(255,255,255,.07);border-radius:6px;overflow:hidden;flex:1}
.storage-fill{height:100%;border-radius:6px;background:var(--pb);transition:width .6s cubic-bezier(.34,1.56,.64,1)}
.storage-fill.warn{background:var(--warn)}
.storage-fill.crit{background:var(--alarm)}
.storage-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.storage-pct{font-size:11px;font-weight:700;color:var(--tx3);min-width:34px;text-align:right}
#backup-list{margin-bottom:10px}
.bkp-item{display:flex;align-items:center;gap:8px;padding:8px 10px;background:rgba(0,0,0,.2);border-radius:10px;margin-bottom:4px}
.bkp-item-date{font-size:11px;font-weight:700;color:var(--tx);flex:1}
.bkp-item-size{font-size:10px;color:var(--tx3)}
.bkp-restore{background:rgba(184,209,74,.1);border:1px solid var(--bd2);border-radius:7px;padding:4px 10px;font-size:10px;font-weight:700;color:var(--pb);cursor:pointer;touch-action:manipulation;flex-shrink:0}
.bkp-del{background:none;border:none;color:var(--tx3);font-size:14px;cursor:pointer;padding:4px;touch-action:manipulation}
/* #storage-warn-banner: Styling over .unibanner --warn */
.swb-ico{font-size:20px;flex-shrink:0}
.swb-body{flex:1;min-width:0}
.swb-ttl{font-size:11px;font-weight:700;color:var(--alarm)}
.swb-sub{font-size:10px;color:var(--tx3);margin-top:2px}
.swb-btn{background:var(--alarm);border:none;border-radius:8px;padding:6px 12px;font-size:10px;font-weight:700;color:#fff;cursor:pointer;white-space:nowrap;flex-shrink:0;touch-action:manipulation}
/* #export-reminder: Styling over .unibanner --info */


/* ════════════════════════════════════════════
   V10.9 SMARTPHONE REDESIGN
   ════════════════════════════════════════════ */

/* ── Sensor Cards: größer, klarer, mehr Luft ── */
.scard{background:var(--card);border:1px solid var(--bd);border-radius:18px;
  padding:16px 12px 14px;display:flex;flex-direction:column;gap:12px;
  position:relative;overflow:hidden;
  transition:border-color .2s,box-shadow .2s}
.scard:active{border-color:var(--pb);box-shadow:0 0 0 1px var(--pb) inset}

/* Sensor value: größer, zentrierter */
.sval{font-family:'Fredoka One',cursive;font-size:36px;color:var(--amber);
  line-height:1;display:block;transition:color .3s;text-align:center}
.sunit{font-size:12px;color:var(--tx3);font-weight:700;display:block;
  margin-top:3px;text-align:center;letter-spacing:.04em}
.svalw{flex:1;text-align:center;min-width:0;padding:4px 0;cursor:pointer}

/* Header row: Icon + Label + Badge */
.shdr{display:flex;align-items:center;gap:6px;padding-bottom:2px}
.slbl{font-size:11px;font-weight:700;color:var(--tx3);
  text-transform:uppercase;letter-spacing:.08em;flex:1}
.sico{font-size:18px;flex-shrink:0}

/* Stepper buttons: noch größer, besser greifbar */
.sbtn{width:56px;height:56px;min-width:56px;min-height:56px;
  border-radius:16px;border:1px solid var(--bd2);
  background:var(--bg3);color:var(--tx);
  font-size:28px;font-weight:300;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:background .08s,transform .1s;
  -webkit-user-select:none;user-select:none;
  touch-action:manipulation;font-family:'Nunito',sans-serif;line-height:1}
.sbtn:active{background:rgba(184,209,74,.15);transform:scale(.92)}

/* sctl: mehr Abstand */
.sctl{display:flex;align-items:center;gap:10px;justify-content:space-between}

/* Hint text */
.sthint{font-size:10px;color:var(--tx3);display:flex;
  justify-content:space-between;padding:0 4px;opacity:.7}

/* Tip box */
.stip{font-size:11px;margin-top:2px;line-height:1.5;
  padding:7px 10px;border-radius:10px;border-left:2px solid}

/* sgrid: mehr Abstand */
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 14px 12px}

/* ── Nav: klarer, mehr Kontrast ── */
.nb{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;padding:8px 4px;min-height:var(--nav);
  background:none;border:none;cursor:pointer;
  transition:opacity .15s,transform .2s cubic-bezier(.34,1.56,.64,1);
  touch-action:manipulation;-webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent}
.nb.on{opacity:1}
.nb:not(.on){opacity:.45}
.nb.on .nbico{transform:scale(1.18) translateY(-2px)}
.nbico{font-size:24px;line-height:1;transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.nblbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  transition:color .2s}
.nb.on .nblbl{color:var(--pb)}
.nb:not(.on) .nblbl{color:var(--tx3)}

/* ── Batch fire button ── */
.btnfire{display:block;width:calc(100% - 24px);margin:8px 12px 6px;padding:20px;
  min-height:60px;
  background:rgba(232,48,48,.15);
  border:2px solid rgba(232,48,48,.55);border-radius:18px;
  font-family:'Fredoka One',cursive;font-size:19px;color:var(--alarm);
  cursor:pointer;text-align:center;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1),
             box-shadow .2s,background .2s;
  letter-spacing:.05em;touch-action:manipulation;position:relative;
  box-shadow:0 4px 24px rgba(232,48,48,.25)}
.btnfire:active{transform:scale(.96);box-shadow:0 1px 8px rgba(232,48,48,.2)}

/* ── Quick Log Rows ── */
.ql-row{background:rgba(0,0,0,.25);border-radius:12px;
  padding:10px 12px;display:flex;align-items:center;
  gap:8px;margin-bottom:6px}
.ql-lbl{font-size:12px;font-weight:700;color:var(--tx3);
  text-transform:uppercase;letter-spacing:.06em;flex:1;min-width:60px}
.ql-ctl{display:flex;align-items:center;gap:8px}
.ql-val{font-family:'Fredoka One',cursive;font-size:20px;
  color:var(--amber);min-width:56px;text-align:center}
.ql-unit{font-size:11px;color:var(--tx3);min-width:24px}
.ql-btn{width:44px;height:44px;border-radius:12px;
  border:1px solid var(--bd2);background:var(--bg3);
  color:var(--tx);font-size:24px;font-weight:300;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  touch-action:manipulation;
  transition:background .08s,transform .1s}
.ql-btn:active{background:rgba(184,209,74,.15);transform:scale(.9)}

/* ── Needs tiles ── */
.ntile{flex:1;background:var(--card);border:1px solid var(--bd);
  border-radius:14px;padding:10px 8px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1),
             border-color .2s;touch-action:manipulation}
.ntile:active{transform:scale(.94)}
.ntile.ok{border-color:rgba(184,209,74,.3)}
.ntile.warn{border-color:rgba(240,168,32,.4)}
.ntile.crit{border-color:rgba(232,48,48,.4)}
.ntbf{height:4px;border-radius:4px;
  transition:width .6s cubic-bezier(.34,1.56,.64,1)}

/* ── Mblk (Batch measurement) ── */
.mblk{background:var(--card);border:1px solid var(--bd);
  border-radius:16px;padding:16px 12px;cursor:pointer;touch-action:manipulation}
.mblkl{font-size:12px;font-weight:700;color:var(--tx3);
  text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px}
.mblkv{font-family:'Fredoka One',cursive;font-size:32px;
  line-height:1;transition:color .3s}

/* ── Section headers ── */
.stitle{font-family:'Fredoka One',cursive;font-size:14px;
  color:var(--tx2);padding:8px 14px 4px;
  letter-spacing:.02em;display:block}

/* ── DIF Card ── */
.dif-card{margin:0 14px 10px;padding:12px 14px;
  background:rgba(56,200,216,.06);
  border:1px solid rgba(56,200,216,.2);border-radius:16px}

/* ── Todo items ── */
.todo{display:flex;align-items:center;gap:10px;background:var(--card);
  border:1px solid var(--bd);border-radius:14px;
  padding:14px 12px;margin-bottom:8px;min-height:54px;
  cursor:pointer;transition:transform .15s cubic-bezier(.34,1.56,.64,1);
  touch-action:manipulation}
.todo:active{transform:scale(.97)}

/* ── Phase chips ── */
.hpchip{font-family:'Fredoka One',cursive;font-size:13px;
  padding:7px 12px;border-radius:20px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);color:var(--tx3);
  cursor:pointer;white-space:nowrap;min-width:42px;
  transition:transform .2s;touch-action:manipulation;text-align:center}
.hpchip.cur{background:var(--pb);color:#0b0f14;
  border-color:var(--pb);font-size:14px;
  box-shadow:0 0 14px rgba(184,209,74,.4)}
.hpchip.done{opacity:.5;font-size:12px}

/* ── Batch recipe steps ── */
.rstep{display:flex;align-items:center;gap:12px;
  background:var(--card);border:1px solid var(--bd);
  border-radius:14px;padding:14px 12px;margin-bottom:6px;
  cursor:pointer;transition:all .2s;touch-action:manipulation}
.rstep.done{background:rgba(184,209,74,.06);
  border-color:rgba(184,209,74,.25)}
.rstep:active{transform:scale(.98)}
.rsn{font-size:13px;font-weight:700;color:var(--pb);
  min-width:28px;text-align:center}
.rsnm{font-family:'Fredoka One',cursive;font-size:15px;
  color:var(--tx);flex:1}
.rsval{font-size:14px;font-weight:700;color:var(--amber);
  white-space:nowrap}

/* ── Strip ── */
#_ux_strip{position:fixed;bottom:calc(var(--nav) + var(--sb));
  left:0;right:0;height:38px;
  background:rgba(9,13,18,.97);
  border-top:1px solid rgba(184,209,74,.12);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  display:flex;align-items:center;padding:0 12px;gap:0;
  z-index:199;transition:transform .22s,opacity .22s}
._strip-val{flex:1;display:flex;flex-direction:column;
  align-items:center;font-family:'Fredoka One',cursive;
  cursor:pointer;touch-action:manipulation;
  border-right:1px solid rgba(255,255,255,.05);padding:0 4px}
._strip-val:last-child{border-right:none}
._sv{font-size:14px;line-height:1.2;color:var(--tx)}
._sl{font-size:8px;color:var(--tx3);font-weight:700;
  text-transform:uppercase;letter-spacing:.05em}
._sv.hi{color:var(--alarm)}._sv.lo{color:var(--cyan)}

/* ── sbdg (sensor badge) ── */
.sbdg{font-size:10px;font-weight:700;padding:2px 8px;
  border-radius:10px;letter-spacing:.03em}
.bok{background:rgba(184,209,74,.1);color:var(--pb)}
.bwn{background:rgba(240,168,32,.1);color:var(--warn)}
.bbd{background:rgba(232,48,48,.12);color:var(--alarm)}
.lbd,.lbwn,.lok{font-size:10px;font-weight:700;padding:1px 5px;border-radius:6px}
.lok{background:rgba(184,209,74,.1);color:var(--pb)}
.lbwn{background:rgba(240,168,32,.1);color:var(--warn)}
.lbd{background:rgba(232,48,48,.1);color:var(--alarm)}

/* ── Badge grid ── */
.badge-card{background:var(--card);border:1px solid var(--bd);
  border-radius:14px;padding:12px 10px;display:flex;
  flex-direction:column;align-items:center;gap:4px;
  cursor:pointer;touch-action:manipulation;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.badge-card.earned{border-color:rgba(184,209,74,.4);
  background:rgba(184,209,74,.06)}
.badge-card:active{transform:scale(.94)}
.badge-grid{display:grid;grid-template-columns:repeat(4,1fr);
  gap:8px;padding:0 12px 12px}

/* ── Xp card ── */
.xpcard{background:var(--card);border:1px solid var(--bd);
  border-radius:16px;margin:0 12px 10px;padding:14px}

/* ── archive card ── */
.archive-card{touch-action:manipulation;
  transition:transform .15s;cursor:pointer}
.archive-card:active{transform:scale(.98)}


/* V10.9 FINAL — Tab scroll clearance (strip+nav) */
.tab.active{padding-bottom:calc(var(--nav) + var(--sb) + 20px) !important}
/* Sensor values — large, clear */
.sval{font-size:36px !important}
/* Stepper buttons — full 56px */
.sbtn{width:56px !important;height:56px !important;min-width:56px !important;min-height:56px !important}

/* ── Strain Ranking V10.9 ── */
.srdb-card{background:var(--card);border:1px solid var(--bd);border-radius:16px;
  margin:0 12px 10px;overflow:hidden}
.srdb-header{padding:12px 14px 10px;display:flex;align-items:center;gap:8px;
  border-bottom:1px solid var(--bd)}
.srdb-add-btn{background:rgba(184,209,74,.12);border:1px solid var(--pb);
  border-radius:10px;padding:6px 14px;font-size:12px;font-weight:700;
  color:var(--pb);cursor:pointer;touch-action:manipulation;white-space:nowrap}
.srdb-row{padding:12px 14px;border-bottom:1px solid var(--bd);
  display:grid;grid-template-columns:1fr auto;gap:8px;align-items:start}
.srdb-row:last-child{border-bottom:none}
.srdb-name{font-family:'Fredoka One',cursive;font-size:15px;color:var(--tx);
  display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.srdb-breeder{font-size:11px;color:var(--tx3);margin-top:2px}
.srdb-stats{display:flex;gap:12px;margin-top:8px;flex-wrap:wrap}
.srdb-stat{display:flex;flex-direction:column;align-items:center;gap:1px}
.srdb-stat-v{font-family:'Fredoka One',cursive;font-size:18px;color:var(--amber)}
.srdb-stat-l{font-size:9px;color:var(--tx3);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;text-align:center}
.srdb-actions{display:flex;gap:6px;flex-direction:column;align-items:flex-end}
.srdb-badge-mother{background:rgba(240,160,48,.12);border:1px solid rgba(240,160,48,.35);
  border-radius:8px;padding:3px 8px;font-size:10px;font-weight:700;color:var(--amber);
  white-space:nowrap;cursor:pointer;touch-action:manipulation}
.srdb-badge-mother.active{background:rgba(240,160,48,.25);border-color:var(--amber)}
.srdb-edit-btn{background:var(--bg3);border:1px solid var(--bd2);border-radius:8px;
  padding:4px 10px;font-size:11px;color:var(--tx3);cursor:pointer;touch-action:manipulation}
/* Strain Edit Modal */
#strain-edit-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.82);
  z-index:800;align-items:flex-end}
#strain-edit-modal.on{display:flex}
.sem-sheet{background:var(--bg2);width:100%;border-radius:22px 22px 0 0;
  padding-bottom:calc(env(safe-area-inset-bottom,0px)+16px);
  max-height:85vh;overflow-y:auto}
.sem-handle{width:36px;height:4px;border-radius:2px;background:var(--bd2);
  margin:10px auto 12px}
.sem-field{margin:0 16px 12px}
.sem-label{font-size:10px;font-weight:700;color:var(--tx3);
  text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px;display:block}
.sem-input{width:100%;background:var(--card);border:1.5px solid var(--bd2);
  border-radius:12px;padding:12px 14px;color:var(--tx);font-size:16px;
  font-family:'Nunito',sans-serif;outline:none}
.sem-input:focus{border-color:var(--pb)}
.sem-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 16px 12px}
.sem-mother-toggle{display:flex;align-items:center;gap:10px;margin:0 16px 16px;
  padding:12px;background:rgba(240,160,48,.06);border:1px solid rgba(240,160,48,.2);
  border-radius:12px;cursor:pointer;touch-action:manipulation}
.sem-mother-ico{font-size:22px}
.sem-mother-txt{flex:1;font-size:13px;font-weight:700;color:var(--tx2)}
.sem-mother-sub{font-size:11px;color:var(--tx3);margin-top:1px}
.sem-save-btn{display:block;width:calc(100% - 32px);margin:0 16px 8px;padding:16px;
  background:linear-gradient(135deg,var(--pb3),var(--pb));border:none;border-radius:14px;
  font-family:'Fredoka One',cursive;font-size:17px;color:#0b0f14;cursor:pointer;
  touch-action:manipulation}
.sem-del-btn{display:block;width:calc(100% - 32px);margin:0 16px;padding:12px;
  background:transparent;border:1px solid rgba(232,48,48,.25);border-radius:12px;
  font-size:13px;color:var(--alarm);cursor:pointer;touch-action:manipulation}


/* ══ Confetti Animation ══ */
@keyframes cFall{
  0%{transform:translateX(0) translateY(0) rotate(0deg) scale(0.5);opacity:1}
  15%{opacity:1;transform:translateX(calc(var(--drift) * 0.3)) translateY(12vh) rotate(180deg) scale(1)}
  100%{transform:translateX(var(--drift)) translateY(105vh) rotate(720deg) scale(0.2);opacity:0}
}

/* ══ TENT BLUEPRINT V4 ══ */
@keyframes tentPulse{0%,100%{opacity:1}50%{opacity:.4}}
.st-row1{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.06);border-top:1px solid rgba(255,255,255,.06)}
.st-cell{padding:8px 6px;background:#0c1014;display:flex;flex-direction:column;align-items:center;gap:2px}
.st-lbl{font-size:7.5px;font-weight:700;color:#475569;text-transform:uppercase;letter-spacing:.1em;white-space:nowrap}
.st-main{display:flex;align-items:baseline;gap:3px}
.st-big{font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:800;line-height:1.1;letter-spacing:-.03em}
.st-sm{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;color:#475569}
.st-sub{font-size:8px;font-weight:600;color:#475569}
.vpd-ampel{display:flex;gap:3px;align-items:center}
.vpd-dot{width:10px;height:10px;border-radius:50%;border:1.5px solid rgba(255,255,255,.08)}
.vpd-dot.r{background:#ef4444;border-color:rgba(239,68,68,.3);box-shadow:0 0 6px #ef4444}
.vpd-dot.a{background:#f59e0b;border-color:rgba(245,158,11,.3);box-shadow:0 0 6px #f59e0b}
.vpd-dot.g{background:#22c55e;border-color:rgba(34,197,94,.3);box-shadow:0 0 6px #22c55e}
.vpd-dot.off{background:rgba(255,255,255,.06);box-shadow:none}
.trend-arrow{font-size:16px;font-weight:900;line-height:1}
.trend-val{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:800}
.prog-bar{width:100%;height:3px;background:rgba(255,255,255,.06);border-radius:3px;margin-top:2px;overflow:hidden}
.prog-fill{height:100%;border-radius:3px;transition:width .5s}
.fd-row{display:flex;align-items:center;border-top:1px solid rgba(255,255,255,.06);background:#0c1014;padding:6px 0}
.fd-col{flex:1;text-align:center;padding:4px 2px}
.fd-hdr{font-size:7px;font-weight:700;color:#475569;text-transform:uppercase;letter-spacing:.12em;margin-bottom:3px}
.fd-val{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;line-height:1.2;letter-spacing:-.02em;color:#f1f5f9}
.fd-unit{font-size:8px;font-weight:500;color:#475569}
.fd-arrow{flex:0 0 24px;text-align:center;font-size:12px;color:#475569;opacity:.4}
.fd-divider{width:1px;align-self:stretch;background:rgba(255,255,255,.06);margin:2px 0}
.fd-status{display:inline-flex;align-items:center;gap:2px;font-size:7px;font-weight:700;border-radius:4px;padding:1px 5px}
.fd-status.ok{color:#22c55e;background:rgba(34,197,94,.08)}
.fd-status.warn{color:#f59e0b;background:rgba(245,158,11,.08)}
.fd-status.crit{color:#ef4444;background:rgba(239,68,68,.08)}
.tent-sensor-bar{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.06)}
.tent-sensor-bar .sb-cell{padding:10px 4px;text-align:center;border-right:1px solid rgba(255,255,255,.06);background:#0c1014}
.tent-sensor-bar .sb-cell:nth-child(3n){border-right:none}
.tent-sensor-bar .sb-cell:nth-child(n+4){border-top:1px solid rgba(255,255,255,.06)}
.tent-sensor-bar .sb-val{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:700;color:#f1f5f9;line-height:1.4;letter-spacing:-.02em}
.tent-sensor-bar .sb-val .u{font-size:10px;font-weight:500;color:#475569;margin-left:1px}
.tent-sensor-bar .sb-lbl{font-size:8px;font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:.1em;margin-top:1px}
.tent-sensor-bar .sb-val.ok{color:#22c55e}.tent-sensor-bar .sb-val.warn{color:#f59e0b}.tent-sensor-bar .sb-val.crit{color:#ef4444}
.tent-sheet-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:90;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tent-sheet-bg.on{display:block;animation:tentFadeIn .2s}
@keyframes tentFadeIn{from{opacity:0}to{opacity:1}}
.tent-sheet{position:fixed;bottom:0;left:0;right:0;z-index:100;background:#0c1014;border-top:1px solid rgba(255,255,255,.1);border-radius:20px 20px 0 0;padding:0 16px calc(32px + env(safe-area-inset-bottom,0px));transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.72,0,1);box-shadow:0 -4px 40px rgba(0,0,0,.5);max-height:70vh;overflow-y:auto}
.tent-sheet.on{transform:translateY(0)}
.tent-sheet-ring{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:800}
.tent-sheet-name{font-size:16px;font-weight:800;color:#f1f5f9;letter-spacing:-.02em}
.tent-sheet-sub{font-size:12px;color:#475569;font-weight:500;margin-top:1px}
.sheet-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.sheet-stat{padding:12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);text-align:center}
.sheet-stat-val{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:800;line-height:1.2}
.sheet-stat-lbl{font-size:9px;font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:.1em;margin-top:2px}
.sheet-tip{padding:12px;border-radius:12px;border-left:3px solid #f59e0b;background:rgba(245,158,11,.06);font-size:12px;color:#94a3b8;line-height:1.6}
.sheet-tip b{color:#f59e0b;font-weight:700}


/* ══════════════════════════════════════════════════════
 * V11 NEW STYLES — Preview Polish Integration
 * Phase 2 — CanGem Integration
 * Diese Styles sind alle additiv, überschreiben NICHTS Bestehendes.
 * Werden in Phase 3+ durch neue HTML-Elemente aktiviert.
 * ══════════════════════════════════════════════════════ */

/* ── Unified Nav-Card (Sprung-Kacheln) ── */
.nav-card{
  margin:10px 8px 4px;border-radius:14px;cursor:pointer;
  padding:16px;position:relative;overflow:hidden;
  transition:transform .15s;
}
.nav-card::before{
  content:'';position:absolute;inset:0;pointer-events:none;
}
.nav-card:active{transform:scale(.98)}
.nav-card.nc-amber{background:linear-gradient(180deg,#1a1408,#120e05);border:1px solid rgba(240,160,48,.18)}
.nav-card.nc-amber::before{background:radial-gradient(ellipse at 80% 50%,rgba(240,160,48,.06),transparent 60%)}
.nav-card.nc-cyan{background:linear-gradient(180deg,#0a141a,#06101a);border:1px solid rgba(56,200,216,.18)}
.nav-card.nc-cyan::before{background:radial-gradient(ellipse at 80% 50%,rgba(56,200,216,.06),transparent 60%)}
.nav-card.nc-green{background:linear-gradient(180deg,#0e1a14,#0a1410);border:1px solid rgba(34,197,94,.18)}
.nav-card.nc-green::before{background:radial-gradient(ellipse at 80% 50%,rgba(34,197,94,.06),transparent 60%)}
.nc-row{display:flex;align-items:center;gap:14px;position:relative}
.nc-icon{
  width:56px;height:56px;border-radius:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;
}
.nav-card.nc-amber .nc-icon{background:rgba(240,160,48,.1);border:1px solid rgba(240,160,48,.25);color:var(--amber,#f0a030)}
.nav-card.nc-cyan .nc-icon{background:rgba(56,200,216,.1);border:1px solid rgba(56,200,216,.25);color:var(--cyan,#38c8d8)}
.nav-card.nc-green .nc-icon{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);color:#22c55e}
.nc-info{flex:1;min-width:0}
.nc-title{font-size:11px;font-weight:800;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px}
.nc-status{font-size:14px;font-weight:800;color:#f1f5f9;letter-spacing:-.01em;line-height:1.2}
.nc-meta{font-family:var(--mono,'JetBrains Mono',monospace);font-size:10px;color:var(--tx3,#94a3b8);font-weight:600;margin-top:3px}
.nc-arrow{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0;
}
.nav-card.nc-amber .nc-arrow{background:rgba(240,160,48,.1);border:1px solid rgba(240,160,48,.25);color:var(--amber,#f0a030)}
.nav-card.nc-cyan .nc-arrow{background:rgba(56,200,216,.1);border:1px solid rgba(56,200,216,.25);color:var(--cyan,#38c8d8)}
.nav-card.nc-green .nc-arrow{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);color:#22c55e}

/* ── Phase-Navigator V11 (scrollable chip strip) ── */
.phase-nav-v11{
  display:flex;gap:5px;padding:10px 12px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  scroll-snap-type:x mandatory;
}
.phase-nav-v11::-webkit-scrollbar{display:none}
.phn-chip-v11{
  flex-shrink:0;font-family:var(--mono,monospace);font-size:10px;font-weight:800;
  padding:6px 11px;border-radius:7px;cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  color:rgba(255,255,255,.4);letter-spacing:.04em;
  transition:all .15s;scroll-snap-align:center;
}
.phn-chip-v11:active{transform:scale(.94)}
.phn-chip-v11.active{font-weight:800;box-shadow:0 0 12px currentColor}

/* ── Modal Polish V11 (slide-up + drag handle) ── */
@keyframes slideUpV11{from{transform:translateY(20px);opacity:.4}to{transform:translateY(0);opacity:1}}
.modal.v11{
  animation:slideUpV11 .28s cubic-bezier(.32,.72,0,1);
  max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  position:relative;
  box-shadow:0 -8px 40px rgba(0,0,0,.5);
}
.modal.v11::before{
  content:'';display:block;
  width:36px;height:4px;border-radius:4px;
  background:rgba(255,255,255,.12);
  margin:6px auto 12px;
}

/* ── Onboarding Banner V11 ── */
.onboarding-v11{
  margin:8px;padding:16px;
  background:linear-gradient(135deg,rgba(184,209,74,.06),rgba(56,200,216,.04));
  border:1px solid rgba(184,209,74,.18);border-radius:14px;
  position:relative;
}
.onboarding-v11 .onb-title{font-size:13px;font-weight:800;color:var(--pb,#b8d14a);margin-bottom:12px;letter-spacing:-.01em;padding-right:24px}
.onboarding-v11 .onb-grid{display:flex;flex-direction:column;gap:10px}
.onboarding-v11 .onb-item{display:flex;gap:11px;align-items:flex-start}
.onboarding-v11 .onb-item-ico{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;line-height:1;
}
.onboarding-v11 .onb-item-ico.cyan{background:rgba(56,200,216,.1);border:1px solid rgba(56,200,216,.25)}
.onboarding-v11 .onb-item-ico.amber{background:rgba(240,160,48,.1);border:1px solid rgba(240,160,48,.25)}
.onboarding-v11 .onb-item-body{flex:1;min-width:0}
.onboarding-v11 .onb-item-title{font-size:12px;font-weight:800;color:#f1f5f9;margin-bottom:2px;letter-spacing:-.01em}
.onboarding-v11 .onb-item-txt{font-size:11px;color:rgba(255,255,255,.55);font-weight:600;line-height:1.45}
.onboarding-v11 .onb-tip{
  margin-top:12px;padding-top:10px;
  border-top:1px solid rgba(255,255,255,.05);
  font-size:10px;color:rgba(255,255,255,.4);font-weight:700;line-height:1.4;
}
.onboarding-v11 .onb-close{
  position:absolute;top:12px;right:12px;
  width:24px;height:24px;border-radius:50%;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.3);font-size:11px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  z-index:1;
}

/* ── Logbook V11 ── */
.logbook-v11{
  margin:10px 8px 4px;background:var(--card,#1e2936);
  border:1px solid var(--bd,rgba(255,255,255,.08));border-radius:14px;overflow:hidden;
}
.logbook-v11 .lb-hdr{
  display:flex;align-items:center;gap:8px;
  padding:13px 16px 11px;border-bottom:1px solid rgba(255,255,255,.04);
}
.logbook-v11 .lb-hdr-dot{width:8px;height:8px;border-radius:50%;background:var(--cyan,#38c8d8);box-shadow:0 0 10px var(--cyan,#38c8d8)}
.logbook-v11 .lb-hdr-title{flex:1;font-size:13px;font-weight:800;color:var(--pb,#b8d14a);letter-spacing:-.01em}
.logbook-v11 .lb-hdr-count{font-family:var(--mono,monospace);font-size:10px;color:var(--tx3,#94a3b8);font-weight:700}
.logbook-v11 .lb-filter{
  display:flex;gap:5px;padding:10px 12px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.logbook-v11 .lb-filter::-webkit-scrollbar{display:none}
.logbook-v11 .lb-filter-chip{
  flex-shrink:0;font-family:'Nunito',sans-serif;font-size:11px;font-weight:800;
  padding:6px 12px;border-radius:7px;cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  color:rgba(255,255,255,.4);
}
.logbook-v11 .lb-filter-chip.active{background:rgba(56,200,216,.12);border-color:rgba(56,200,216,.3);color:var(--cyan,#38c8d8)}
.logbook-v11 .lb-list{
  max-height:50vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.logbook-v11 .lb-empty{
  padding:24px 16px;text-align:center;
  font-size:11px;color:var(--tx3,#94a3b8);font-weight:700;line-height:1.5;
}
.logbook-v11 .lb-entry{
  display:flex;align-items:flex-start;gap:11px;
  padding:12px 14px;cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.04);
  transition:background .12s;position:relative;
}
.logbook-v11 .lb-entry:active{background:rgba(255,255,255,.03)}
.logbook-v11 .lb-entry:last-child{border-bottom:none}
.logbook-v11 .lb-entry.lb-draft{background:rgba(240,160,48,.04)}
.logbook-v11 .lb-entry-icon{
  width:32px;height:32px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:14px;
}
.logbook-v11 .lb-entry-icon.cyan{background:rgba(56,200,216,.1);border:1px solid rgba(56,200,216,.22)}
.logbook-v11 .lb-entry-icon.amber{background:rgba(240,160,48,.1);border:1px solid rgba(240,160,48,.22)}
.logbook-v11 .lb-entry-body{flex:1;min-width:0}
.logbook-v11 .lb-entry-head{display:flex;align-items:center;gap:6px;margin-bottom:2px}
.logbook-v11 .lb-entry-strain{font-size:12px;font-weight:800;color:var(--pb,#b8d14a);letter-spacing:-.01em}
.logbook-v11 .lb-draft-tag{font-family:var(--mono,monospace);font-size:8px;font-weight:800;color:var(--amber,#f0a030);background:rgba(240,160,48,.15);padding:1px 5px;border-radius:4px;letter-spacing:.05em}
.logbook-v11 .lb-entry-meta{font-family:var(--mono,monospace);font-size:9px;color:var(--tx3,#94a3b8);font-weight:700;margin-bottom:4px}
.logbook-v11 .lb-entry-stats{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.logbook-v11 .lb-stars{color:var(--amber,#f0a030);font-size:11px;letter-spacing:.5px}
.logbook-v11 .lb-yield{font-family:var(--mono,monospace);font-size:10px;color:var(--pb,#b8d14a);font-weight:800}
.logbook-v11 .lb-entry-note{font-size:10px;color:rgba(255,255,255,.55);line-height:1.4;font-style:italic;margin-top:3px}
.logbook-v11 .lb-entry-del{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  background:transparent;border:1px solid rgba(255,255,255,.06);
  color:rgba(255,255,255,.25);font-size:10px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;align-self:flex-start;
}

/* ── Mother Card V11 (corner badge style) ── */
.mcard-v11{
  background:linear-gradient(145deg,rgba(28,40,56,.95),rgba(18,24,32,.98));
  border:1px solid rgba(56,200,216,.12);border-radius:14px;
  padding:34px 10px 12px;display:flex;flex-direction:column;align-items:center;
  position:relative;overflow:hidden;
}
.mcard-v11::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 15%,rgba(56,200,216,.04),transparent 65%);pointer-events:none}
.mcard-v11-corner-badge{
  position:absolute;top:8px;left:8px;
  font-family:var(--mono,monospace);font-size:10px;font-weight:800;
  color:var(--cyan,#38c8d8);background:rgba(56,200,216,.12);
  border:1px solid rgba(56,200,216,.3);
  padding:3px 7px;border-radius:6px;
  letter-spacing:.02em;pointer-events:none;
}
.mcard-v11-corner-mini{
  position:absolute;top:8px;right:8px;
  pointer-events:none;opacity:.85;
}

/* ── Health Breakdown Modal V11 ── */
.hb-big-v11{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:18px 0 14px;
  background:rgba(255,255,255,.02);border:1px solid var(--bd,rgba(255,255,255,.08));
  border-radius:12px;margin:12px 0;
}
.hb-score-v11{font-family:var(--mono,monospace);font-size:42px;font-weight:800;letter-spacing:-.03em;line-height:1}
.hb-status-v11{font-size:11px;color:rgba(255,255,255,.5);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.hb-row-v11{display:flex;align-items:center;gap:10px;padding:5px 0}
.hb-row-v11 .hb-row-info{flex:0 0 90px}
.hb-row-v11 .hb-row-k{font-size:11px;font-weight:800;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.04em}
.hb-row-v11 .hb-row-v{font-family:var(--mono,monospace);font-size:10px;color:var(--tx3,#94a3b8);font-weight:700;margin-top:1px}
.hb-row-v11 .hb-row-bar{flex:1;height:5px;background:rgba(255,255,255,.05);border-radius:3px;overflow:hidden}
.hb-row-v11 .hb-row-fill{height:100%;border-radius:3px;transition:width .4s ease}
.hb-row-v11 .hb-row-score{flex:0 0 28px;text-align:right;font-family:var(--mono,monospace);font-size:13px;font-weight:800}

/* ── Pcard Info Grid V11 (2-column) ── */
.pcard-info-grid-v11{
  display:grid;grid-template-columns:1fr 1fr;gap:5px;
  width:100%;margin-top:8px;
}
.pcard-info-cell-v11{
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.05);
  border-radius:6px;padding:5px 6px;
  display:flex;flex-direction:column;align-items:flex-start;
  min-width:0;overflow:hidden;
}
.pcard-info-lbl-v11{
  font-family:var(--mono,monospace);font-size:7px;font-weight:800;
  color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:1px;
}
.pcard-info-val-v11{
  font-size:10px;font-weight:800;color:var(--pb,#b8d14a);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  width:100%;line-height:1.2;
}

/* ══════════════════════════════════════════════════════
 * END OF V11 STYLES
 * ══════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════
 * V11 Phase 3A — Blueprint Mother-Tab Integration
 * Aus TentBlueprint_V5_Flow__1_.html kopiert
 * ═══════════════════════════════════════════════════════ */

/* ── Capacity Selector + Mutter-Zelt ── */
/* ══ CAPACITY SELECTOR ══ */
.cap-card{margin:8px;padding:14px;background:#0c1014;border:1px solid rgba(255,255,255,.06);border-radius:14px}
.cap-row{display:flex;align-items:center;gap:12px}
.cap-info{flex:1;min-width:0}
.cap-title{font-size:11px;font-weight:800;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:6px}
.cap-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.cap-dot.mcap{background:var(--cyan);box-shadow:0 0 6px rgba(56,200,216,.5)}
.cap-dot.gcap{background:var(--green);box-shadow:0 0 6px rgba(34,197,94,.5)}
.cap-sub{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.35);margin-top:3px;font-weight:600;padding-left:12px}
.cap-divider{height:1px;background:rgba(255,255,255,.05);margin:12px 0}
.cap-buttons{display:flex;gap:5px}
.cap-btn{
  width:36px;height:36px;border-radius:9px;border:1px solid var(--bd);
  background:var(--card);color:var(--tx3);font-family:var(--mono);
  font-size:13px;font-weight:800;cursor:pointer;
}
.cap-btn.active{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.4);color:var(--green);box-shadow:0 0 8px rgba(34,197,94,.15)}
.cap-btn.mcap.active{background:rgba(56,200,216,.12);border-color:rgba(56,200,216,.4);color:var(--cyan);box-shadow:0 0 8px rgba(56,200,216,.15)}
.cap-btn:active{opacity:.7}

/* Empty mother slot */
.mcard-empty{
  background:rgba(255,255,255,.015);
  border:1px dashed rgba(255,255,255,.08)!important;
  cursor:pointer;
}
.mcard-empty::before{display:none}
.mcard-empty:active{background:rgba(56,200,216,.04);border-color:rgba(56,200,216,.2)!important}
.mcard-empty-ico{font-size:24px;color:rgba(255,255,255,.15);font-weight:300;line-height:1}
.mcard-empty-txt{font-size:10px;color:rgba(255,255,255,.2);font-weight:700;text-align:center;line-height:1.3;margin:4px 0 6px}
.mcard-empty-pos{font-family:var(--mono);font-size:8px;color:rgba(255,255,255,.12);font-weight:700;letter-spacing:.06em;margin-top:auto}

/* Slot counter in tent header */
.tent-slots{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.25);font-weight:700;margin-left:auto}
.tent-badge{font-family:var(--mono);font-size:11px;font-weight:600;padding:4px 12px;border-radius:6px;letter-spacing:.03em;margin-left:8px}

/* Position minimap a bit larger margin */
.pos-map{margin-bottom:8px}

/* ═══════════ MUTTER-ZELT (Genetics Hub) ═══════════ */
.mutter-wrap{margin:8px;border-radius:18px;overflow:hidden;background:#0c1014;border:1px solid rgba(255,255,255,.06)}
.mutter-hdr{display:flex;align-items:center;gap:8px;padding:14px 16px 12px;border-bottom:1px solid rgba(255,255,255,.04)}
.mutter-hdr-dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 6px var(--cyan);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.mutter-hdr-title{font-size:14px;font-weight:700;color:#f1f5f9;font-family:Inter,sans-serif}
.mutter-hdr-count{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.2);margin-left:auto}

.mgrid{display:grid;gap:8px;padding:10px 10px 12px}
.mgrid.c3{grid-template-columns:repeat(3,1fr)}
.mgrid.c4{grid-template-columns:repeat(4,1fr)}

.mcard{
  background:linear-gradient(145deg,rgba(28,40,56,.95),rgba(18,24,32,.98));
  border:1px solid rgba(56,200,216,.12);border-radius:14px;
  padding:34px 10px 12px;display:flex;flex-direction:column;align-items:center;
  position:relative;overflow:hidden;
}
.mcard::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 15%,rgba(56,200,216,.04),transparent 65%);pointer-events:none}
.mcard-corner-badge{
  position:absolute;top:8px;left:8px;
  font-family:var(--mono);font-size:10px;font-weight:800;
  color:var(--cyan);background:rgba(56,200,216,.12);
  border:1px solid rgba(56,200,216,.3);
  padding:3px 7px;border-radius:6px;
  letter-spacing:.02em;
  pointer-events:none;
}
.mcard-corner-badge-empty{
  color:rgba(255,255,255,.25);
  background:rgba(255,255,255,.02);
  border-color:rgba(255,255,255,.08);
}
.mcard-corner-mini{
  position:absolute;top:8px;right:8px;
  pointer-events:none;
  opacity:.85;
}
.mcard-poslbl{
  font-family:var(--mono);font-size:9px;font-weight:800;
  color:var(--cyan);letter-spacing:.08em;
  padding:2px 8px;margin-bottom:4px;
  background:rgba(56,200,216,.08);border-radius:5px;
  border:1px solid rgba(56,200,216,.15);
}
.mcard-poslbl.empty{color:rgba(56,200,216,.4);background:rgba(56,200,216,.03);border-color:rgba(56,200,216,.08)}
.mcard-name{font-size:12px;font-weight:800;color:var(--pb);text-align:center;line-height:1.15;word-break:break-word;margin-bottom:2px}
.mcard-breeder{font-size:10px;color:var(--tx3);text-align:center;font-weight:600}
.mcard-bw{font-size:10px;color:var(--amber);font-weight:700;margin-top:4px}
.mcard-terp{font-size:9px;color:var(--tx2);margin-top:2px;text-align:center;opacity:.7}

/* Inactive mother styling */
.mcard-inactive{opacity:.5;filter:saturate(.4)}
.mcard-inactive .mcard-cut{background:rgba(100,100,100,.1)!important;border-color:rgba(100,100,100,.2)!important;color:rgba(255,255,255,.3)!important}
.inactive-tag{display:inline-block;background:rgba(100,116,139,.2);color:#94a3b8;font-family:var(--mono);font-size:8px;font-weight:800;padding:1px 5px;border-radius:4px;margin-left:4px;letter-spacing:.05em;vertical-align:middle}

/* Highlight flash on grow tent cards */
@keyframes flashHighlight{
  0%,100%{box-shadow:0 0 0 0 rgba(56,200,216,0)}
  50%{box-shadow:0 0 0 6px rgba(56,200,216,.4),0 0 30px rgba(56,200,216,.6)}
}
.pcard.highlight-flash{
  animation:flashHighlight 1.2s ease-out 2;
  border-color:var(--cyan)!important;
}

/* Autosuggest chips */
.suggest-row{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;align-items:center}
.suggest-row:empty{margin:0}
.sug-chip{
  background:rgba(56,200,216,.08);border:1px solid rgba(56,200,216,.22);
  color:var(--cyan);font-family:'Nunito',sans-serif;font-size:11px;font-weight:700;
  padding:5px 10px;border-radius:14px;cursor:pointer;
}
.sug-chip:active{background:rgba(56,200,216,.18)}
.sug-close{
  background:transparent;border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.3);font-size:11px;font-weight:700;
  width:22px;height:22px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;margin-left:auto;
}
.sug-close:active{background:rgba(255,255,255,.05)}

/* History viewer */
.history-modal{padding:8px 16px calc(20px + var(--sb));max-height:88vh;overflow-y:auto}
.hist-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:14px 0 12px}
.hist-stat{background:rgba(255,255,255,.02);border:1px solid var(--bd);border-radius:10px;padding:10px 6px;text-align:center}
.hist-stat-v{font-family:var(--mono);font-size:15px;font-weight:800;letter-spacing:-.02em}
.hist-stat-l{font-size:9px;color:var(--tx3);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-top:3px}
.hist-list{display:flex;flex-direction:column;gap:8px}
.hist-entry{
  background:linear-gradient(145deg,rgba(28,40,56,.6),rgba(18,24,32,.8));
  border:1px solid var(--bd);border-radius:11px;padding:11px 13px;
}
.hist-entry-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
.hist-stars{color:var(--amber);font-size:13px;letter-spacing:1px}
.hist-date{font-family:var(--mono);font-size:10px;color:var(--tx3);font-weight:600}
.hist-meta{font-family:var(--mono);font-size:11px;color:var(--tx2);font-weight:600}
.hist-meta b{color:var(--pb)}
.hist-note{font-size:12px;color:rgba(255,255,255,.7);margin-top:5px;line-height:1.4;font-style:italic}
.mcard-cut{
  margin-top:8px;width:100%;padding:8px 0;border-radius:8px;
  background:rgba(56,200,216,.06);border:1px solid rgba(56,200,216,.2);
  color:var(--cyan);font-size:11px;font-weight:700;cursor:pointer;
  font-family:'Nunito',sans-serif;touch-action:manipulation;
}
.mcard-cut:active{background:rgba(56,200,216,.15)}


/* ── Export Row + Logbook ── */
.export-row{margin:10px 8px 4px}

/* ══ LOGBOOK ══ */
.logbook-wrap{
  margin:10px 8px 4px;background:var(--card);
  border:1px solid var(--bd);border-radius:14px;overflow:hidden;
}
.logbook-hdr{
  display:flex;align-items:center;gap:8px;
  padding:13px 16px 11px;border-bottom:1px solid rgba(255,255,255,.04);
}
.logbook-hdr-dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.logbook-hdr-title{flex:1;font-size:13px;font-weight:800;color:var(--pb);letter-spacing:-.01em}
.logbook-hdr-count{font-family:var(--mono);font-size:10px;color:var(--tx3);font-weight:700}
.logbook-filter{
  display:flex;gap:5px;padding:10px 12px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.logbook-filter::-webkit-scrollbar{display:none}
.lb-filter-chip{
  flex-shrink:0;font-family:'Nunito',sans-serif;font-size:11px;font-weight:800;
  padding:6px 12px;border-radius:7px;cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  color:rgba(255,255,255,.4);
}
.lb-filter-chip.active{background:rgba(56,200,216,.12);border-color:rgba(56,200,216,.3);color:var(--cyan)}
.logbook-list{
  max-height:50vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;gap:0;
}
.lb-empty{
  padding:24px 16px;text-align:center;
  font-size:11px;color:var(--tx3);font-weight:700;line-height:1.5;
}
.lb-entry{
  display:flex;align-items:flex-start;gap:11px;
  padding:12px 14px;cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.04);
  transition:background .12s;position:relative;
}
.lb-entry:active{background:rgba(255,255,255,.03)}
.lb-entry:last-child{border-bottom:none}
.lb-entry.lb-draft{background:rgba(240,160,48,.04)}
.lb-entry.lb-draft:active{background:rgba(240,160,48,.08)}
.lb-entry-icon{
  width:32px;height:32px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:14px;
}
.lb-entry-icon.cyan{background:rgba(56,200,216,.1);border:1px solid rgba(56,200,216,.22)}
.lb-entry-icon.amber{background:rgba(240,160,48,.1);border:1px solid rgba(240,160,48,.22)}
.lb-entry-body{flex:1;min-width:0}
.lb-entry-head{display:flex;align-items:center;gap:6px;margin-bottom:2px}
.lb-entry-strain{font-size:12px;font-weight:800;color:var(--pb);letter-spacing:-.01em}
.lb-draft-tag{font-family:var(--mono);font-size:8px;font-weight:800;color:var(--amber);background:rgba(240,160,48,.15);padding:1px 5px;border-radius:4px;letter-spacing:.05em}
.lb-entry-meta{font-family:var(--mono);font-size:9px;color:var(--tx3);font-weight:700;margin-bottom:4px}
.lb-entry-stats{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.lb-stars{color:var(--amber);font-size:11px;letter-spacing:.5px}
.lb-no-rating{font-size:9px;color:var(--tx3);font-style:italic;font-weight:600}
.lb-yield{font-family:var(--mono);font-size:10px;color:var(--pb);font-weight:800}
.lb-entry-note{font-size:10px;color:rgba(255,255,255,.55);line-height:1.4;font-style:italic;margin-top:3px}
.lb-entry-del{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  background:transparent;border:1px solid rgba(255,255,255,.06);
  color:rgba(255,255,255,.25);font-size:10px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;align-self:flex-start;
}
.lb-entry-del:active{background:rgba(208,72,72,.1);color:#d04848;border-color:rgba(208,72,72,.25)}

.export-btn{
  width:100%;display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-radius:14px;cursor:pointer;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  font-family:'Nunito',sans-serif;text-align:left;
  transition:all .15s;
}
.export-btn:active{background:rgba(255,255,255,.05);transform:scale(.98)}
.export-ico{
  font-size:18px;width:38px;height:38px;flex-shrink:0;
  border-radius:10px;background:rgba(184,209,74,.08);
  border:1px solid rgba(184,209,74,.2);color:var(--pb);
  display:flex;align-items:center;justify-content:center;font-weight:800;
}
.export-lbl{flex:1;font-size:13px;font-weight:800;color:rgba(255,255,255,.7);letter-spacing:-.01em}
.export-meta{font-family:var(--mono);font-size:10px;color:var(--tx3);font-weight:700}

/* Export stats */
.export-stats{margin:14px 0 12px;background:rgba(255,255,255,.02);border:1px solid var(--bd);border-radius:11px;padding:10px 14px}
.exs-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.exs-row:last-child{border-bottom:none}
.exs-lbl{font-size:11px;color:var(--tx3);font-weight:700}
.exs-val{font-family:var(--mono);font-size:13px;color:var(--pb);font-weight:800}

/* Health breakdown modal */
.ll-health-tap{cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.ll-health-tap:active{opacity:.7}
.ll-info{font-size:11px;color:rgba(255,255,255,.3);margin-left:2px}
.hb-big{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:18px 0 14px;
  background:rgba(255,255,255,.02);border:1px solid var(--bd);
  border-radius:12px;margin:12px 0;
}
.hb-score{font-family:var(--mono);font-size:42px;font-weight:800;letter-spacing:-.03em;line-height:1}
.hb-status{font-size:11px;color:rgba(255,255,255,.5);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.hb-list{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.hb-row{display:flex;align-items:center;gap:10px;padding:5px 0}
.hb-row-info{flex:0 0 90px}
.hb-row-k{font-size:11px;font-weight:800;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.04em}
.hb-row-v{font-family:var(--mono);font-size:10px;color:var(--tx3);font-weight:700;margin-top:1px}
.hb-row-bar{flex:1;height:5px;background:rgba(255,255,255,.05);border-radius:3px;overflow:hidden}
.hb-row-fill{height:100%;border-radius:3px;transition:width .4s ease}
.hb-row-score{flex:0 0 28px;text-align:right;font-family:var(--mono);font-size:13px;font-weight:800}
.hb-footer{
  display:flex;align-items:flex-start;gap:8px;
  padding:11px 13px;background:rgba(56,200,216,.04);
  border:1px solid rgba(56,200,216,.15);border-radius:10px;
}
.hb-foot-ico{font-size:13px;color:var(--cyan);flex-shrink:0;line-height:1.4}
.hb-foot-txt{font-size:11px;color:rgba(255,255,255,.55);line-height:1.45;font-weight:600}

.pcard-notes-badge{
  position:absolute;top:8px;left:8px;
  font-family:var(--mono);font-size:9px;font-weight:800;
  color:var(--cyan);background:rgba(56,200,216,.12);
  border:1px solid rgba(56,200,216,.3);
  padding:2px 6px;border-radius:5px;
  pointer-events:none;
}

/* Notes modal */
.notes-modal{padding:8px 16px calc(20px + var(--sb))}
.nm-list{
  max-height:42vh;overflow-y:auto;
  display:flex;flex-direction:column;gap:8px;
  margin:14px 0 12px;
}
.nm-empty{
  text-align:center;padding:24px 12px;
  font-size:11px;color:var(--tx3);font-weight:700;line-height:1.5;
  background:rgba(255,255,255,.015);
  border:1px dashed rgba(255,255,255,.06);
  border-radius:11px;
}
.nm-entry{
  background:linear-gradient(145deg,rgba(28,40,56,.6),rgba(18,24,32,.8));
  border:1px solid var(--bd);border-radius:11px;padding:10px 12px;
}
.nm-entry-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
.nm-date{font-family:var(--mono);font-size:10px;color:var(--tx3);font-weight:700}
.nm-del{
  width:22px;height:22px;border-radius:50%;
  background:transparent;border:1px solid rgba(255,255,255,.06);
  color:rgba(255,255,255,.25);font-size:11px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.nm-del:active{background:rgba(208,72,72,.1);color:#d04848;border-color:rgba(208,72,72,.25)}
.nm-text{font-size:12px;color:rgba(255,255,255,.78);line-height:1.45;font-weight:600}
.nm-input-row{display:flex;gap:8px;align-items:flex-end}
.nm-input-row textarea{
  flex:1;padding:11px 12px;background:var(--card);border:1px solid var(--bd);
  border-radius:10px;color:var(--tx);font-size:14px;font-family:'Nunito',sans-serif;
  font-weight:600;-webkit-appearance:none;resize:none;line-height:1.4;
}
.nm-input-row textarea:focus{outline:none;border-color:rgba(184,209,74,.4);background:var(--card2)}
.nm-add{
  background:rgba(184,209,74,.1);border:1px solid rgba(184,209,74,.25);
  color:var(--pb);font-size:12px;font-weight:800;padding:11px 14px;
  border-radius:10px;cursor:pointer;font-family:'Nunito',sans-serif;
  white-space:nowrap;
}
.nm-add:active{background:rgba(184,209,74,.2)}
.pcard.selected{
  border:2px solid var(--cyan)!important;
  box-shadow:0 0 0 4px rgba(56,200,216,.15),0 0 24px rgba(56,200,216,.25)!important;
  transform:scale(.96);
}

/* Drag-and-drop states */
.pcard{touch-action:none}
.pcard.dragging-source{
  opacity:.25;filter:saturate(.3);
  transform:scale(.96);
  transition:opacity .15s,transform .15s;
}
.pcard.drag-ghost{
  transform:scale(1.06) rotate(-2deg);
  box-shadow:0 12px 40px rgba(0,0,0,.6),0 0 0 2px var(--cyan)!important;
  opacity:.95;
  transition:none;
}
.pcard.drag-over{
  border:2px dashed var(--cyan)!important;
  background:rgba(56,200,216,.08)!important;
  box-shadow:0 0 0 4px rgba(56,200,216,.15)!important;
  transform:scale(1.02);
}
.pcard.selected::after{
  content:'↔';position:absolute;top:6px;right:8px;
  font-size:14px;color:var(--cyan);font-weight:800;
  background:rgba(11,15,20,.85);width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(56,200,216,.4);
}
.pcard-empty.selected{
  border:2px dashed var(--cyan)!important;
  background:rgba(56,200,216,.06)!important;
}

/* Swap hint banner */
.swap-hint{
  margin:0 8px 6px;padding:10px 14px;
  background:rgba(56,200,216,.08);border:1px solid rgba(56,200,216,.25);
  border-radius:12px;display:flex;align-items:center;gap:10px;
  font-size:12px;color:var(--cyan);font-weight:700;
}
.swap-hint span{flex:1;line-height:1.3}
.swap-hint b{color:#fff;font-weight:800}
.swap-hint button{
  background:rgba(56,200,216,.15);border:1px solid rgba(56,200,216,.3);
  color:var(--cyan);font-size:11px;font-weight:700;padding:6px 12px;
  border-radius:8px;cursor:pointer;font-family:'Nunito',sans-serif;
}

/* Seed form */
.seed-form{margin-bottom:16px}
.seed-form label{display:block;font-size:10px;font-weight:800;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.06em;margin:10px 0 5px}
.seed-form label:first-child{margin-top:0}
.seed-form input{
  width:100%;padding:11px 12px;background:var(--card);border:1px solid var(--bd);
  border-radius:10px;color:var(--tx);font-size:14px;font-family:'Nunito',sans-serif;
  font-weight:600;-webkit-appearance:none;
}
.seed-form input:focus{outline:none;border-color:rgba(184,209,74,.4);background:var(--card2)}

/* Count stepper for seed multi-add */
.count-stepper{
  display:flex;align-items:center;gap:10px;
  background:var(--card);border:1px solid var(--bd);
  border-radius:10px;padding:6px 8px;
}
.cs-btn{
  width:38px;height:38px;border-radius:8px;
  background:rgba(56,200,216,.08);border:1px solid rgba(56,200,216,.22);
  color:var(--cyan);font-family:var(--mono);font-size:20px;font-weight:800;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.cs-btn:active{background:rgba(56,200,216,.18)}
.cs-val{
  font-family:var(--mono);font-size:24px;font-weight:800;color:var(--pb);
  min-width:32px;text-align:center;
}
.cs-hint{
  flex:1;font-size:10px;font-weight:700;color:var(--tx3);
  letter-spacing:.02em;
}

.hr-wrap{position:relative;width:64px;height:64px;margin-bottom:8px}
/* Sensor bar */
.hr-svg{transform:rotate(-90deg)}
.hr-bg{fill:none;stroke:rgba(255,255,255,.06);stroke-width:3}
.hr-fill{fill:none;stroke-width:3;stroke-linecap:round;transition:stroke-dashoffset .6s ease}
.hr-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--mono);font-weight:800;line-height:1}
.hr-val{font-size:19px;letter-spacing:-.04em}
.hr-lbl{font-size:8px;font-weight:600;color:rgba(255,255,255,.2);margin-top:1px}

.pcard-name{font-size:12px;font-weight:800;color:var(--pb);text-align:center;line-height:1.15;word-break:break-word;margin-top:2px}
.pcard-info-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:5px;
  width:100%;margin-top:8px;
}
.pcard-info-cell{
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.05);
  border-radius:6px;padding:5px 6px;
  display:flex;flex-direction:column;align-items:flex-start;
  min-width:0;overflow:hidden;
}
.pcard-info-lbl{
  font-family:var(--mono);font-size:7px;font-weight:800;
  color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:1px;
}
.pcard-info-val{
  font-size:10px;font-weight:800;color:var(--pb);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  width:100%;line-height:1.2;
}
.pcard-info-amber{color:var(--amber)}
.pcard-info-cyan{color:var(--cyan)}
.pcard-info-orphan{color:#94a3b8}
.pcard-origin{font-family:var(--mono);font-size:8px;color:var(--cyan);font-weight:700;margin-top:3px;letter-spacing:.02em}
.pcard-origin.seed{color:var(--amber)}
.pcard-breeder{font-size:10px;color:var(--tx3);text-align:center;margin-top:2px;font-weight:600}
.pcard-bloom{font-size:10px;color:var(--amber);font-weight:700;margin-top:4px}
.pcard-pos{font-family:var(--mono);font-size:8px;font-weight:700;color:rgba(255,255,255,.15);letter-spacing:.06em;margin-top:auto;padding-top:5px}

/* Position minimap */
.pos-map{margin-bottom:6px}

/* Sensor bar */
.sbar{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.06)}
.sbar-c{padding:12px 4px;text-align:center;border-right:1px solid rgba(255,255,255,.06);background:#0c1014}
.sbar-c:nth-child(3n){border-right:none}
.sbar-c:nth-child(n+4){border-top:1px solid rgba(255,255,255,.06)}
.sbar-v{font-family:var(--mono);font-size:18px;font-weight:700;color:#f1f5f9;line-height:1.4;letter-spacing:-.02em}
.sbar-v .u{font-size:11px;font-weight:500;color:#475569;margin-left:1px}
.sbar-l{font-size:9px;font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:.1em;margin-top:2px}
.sbar-v.ok{color:var(--green)}.sbar-v.warn{color:var(--amber)}

/* Empty tent state */
.tent-empty{padding:40px 20px;text-align:center}
.tent-empty-ico{font-size:48px;opacity:.3;margin-bottom:12px}
.tent-empty-txt{font-size:13px;color:var(--tx3);font-weight:700;line-height:1.5;margin-bottom:16px}


/* ── Live Status Link + Nav-Card + Onboarding ── */
/* ══ LIVE STATUS LINK (V2) — used as base for all action cards ══ */
.live-link,.nav-card{
  margin:10px 8px 4px;border-radius:14px;cursor:pointer;
  padding:16px;position:relative;overflow:hidden;
  transition:transform .15s;
}
.live-link{
  background:linear-gradient(180deg,#0e1a14,#0a1410);
  border:1px solid rgba(34,197,94,.18);
}
.live-link::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 80% 50%,rgba(34,197,94,.06),transparent 60%);
  pointer-events:none;
}
.live-link:active{transform:scale(.98);background:linear-gradient(180deg,#0f2018,#0c1612)}
.ll-row{display:flex;align-items:center;gap:14px;position:relative}
.ll-ring-wrap{position:relative;width:56px;height:56px;flex-shrink:0}
.ll-ring-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:15px;font-weight:800;color:var(--green)}
.ll-info{flex:1;min-width:0}
.ll-title{font-size:11px;font-weight:800;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px}
.ll-status{font-size:14px;font-weight:800;color:#f1f5f9;letter-spacing:-.01em;line-height:1.2}
.ll-meta{font-family:var(--mono);font-size:10px;color:var(--tx3);font-weight:600;margin-top:3px}
.ll-meta b{color:var(--green)}
.ll-arrow{
  width:36px;height:36px;border-radius:50%;
  background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;color:var(--green);flex-shrink:0;
}

/* ══ NAV-CARD (unified for all action/link tiles) ══ */
.nav-card{position:relative;overflow:hidden}
.nav-card::before{
  content:'';position:absolute;inset:0;pointer-events:none;
}
.nav-card:active{transform:scale(.98)}

/* Themed variants */
.nav-card.nc-amber{background:linear-gradient(180deg,#1a1408,#120e05);border:1px solid rgba(240,160,48,.18)}
.nav-card.nc-amber::before{background:radial-gradient(ellipse at 80% 50%,rgba(240,160,48,.06),transparent 60%)}
.nav-card.nc-amber:active{background:linear-gradient(180deg,#20180a,#181006)}
.nav-card.nc-amber .nc-icon{background:rgba(240,160,48,.1);border:1px solid rgba(240,160,48,.25);color:var(--amber)}
.nav-card.nc-amber .nc-arrow{background:rgba(240,160,48,.1);border:1px solid rgba(240,160,48,.25);color:var(--amber)}
.nav-card.nc-amber .nc-meta b{color:var(--amber)}

.nav-card.nc-cyan{background:linear-gradient(180deg,#0a141a,#06101a);border:1px solid rgba(56,200,216,.18)}
.nav-card.nc-cyan::before{background:radial-gradient(ellipse at 80% 50%,rgba(56,200,216,.06),transparent 60%)}
.nav-card.nc-cyan:active{background:linear-gradient(180deg,#0c1820,#081420)}
.nav-card.nc-cyan .nc-icon{background:rgba(56,200,216,.1);border:1px solid rgba(56,200,216,.25);color:var(--cyan)}
.nav-card.nc-cyan .nc-arrow{background:rgba(56,200,216,.1);border:1px solid rgba(56,200,216,.25);color:var(--cyan)}
.nav-card.nc-cyan .nc-meta b{color:var(--cyan)}

.nc-row{display:flex;align-items:center;gap:14px;position:relative}
.nc-icon{
  width:56px;height:56px;border-radius:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;
}
.nc-info{flex:1;min-width:0}
.nc-title{font-size:11px;font-weight:800;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px}
.nc-status{font-size:14px;font-weight:800;color:#f1f5f9;letter-spacing:-.01em;line-height:1.2}
.nc-meta{font-family:var(--mono);font-size:10px;color:var(--tx3);font-weight:600;margin-top:3px}
.nc-arrow{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0;
}

/* #6 Phase nav scroll-snap */
.phase-nav{scroll-snap-type:x mandatory}
.phn-chip{scroll-snap-align:center}
.phn-chip-action{
  background:rgba(240,160,48,.15)!important;
  border-color:rgba(240,160,48,.4)!important;
  color:var(--amber)!important;
  box-shadow:0 0 12px rgba(240,160,48,.25);
  animation:phnPulse 2s ease-in-out infinite;
}
@keyframes phnPulse{0%,100%{box-shadow:0 0 12px rgba(240,160,48,.25)}50%{box-shadow:0 0 20px rgba(240,160,48,.5)}}

/* Tent day counter (#7) */
.tent-day{
  font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.4);
  font-weight:700;letter-spacing:.04em;margin-left:auto;
}
.tent-slots{margin-left:6px}

/* Orphan plant tag (#8) */
.pcard-origin.orphan{color:#94a3b8;background:rgba(148,163,184,.08);border:1px solid rgba(148,163,184,.2)}

/* Clear options (#5 rebalanced) */
.clear-options{display:flex;flex-direction:column;gap:6px;margin:14px 0 8px}
.clear-opt{
  display:flex;align-items:center;gap:12px;
  background:var(--card);border:1px solid var(--bd);
  border-radius:12px;padding:13px 14px;cursor:pointer;
  font-family:'Nunito',sans-serif;text-align:left;
}
.clear-opt:active{background:var(--card2)}
.co-ico{
  font-size:18px;width:38px;height:38px;flex-shrink:0;
  border-radius:10px;display:flex;align-items:center;justify-content:center;
}
.co-info{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.co-lbl{font-size:13px;font-weight:800;color:var(--tx);letter-spacing:-.01em}
.co-desc{font-size:10px;color:var(--tx3);font-weight:600}
.clear-opt-review .co-ico{background:rgba(56,200,216,.1);border:1px solid rgba(56,200,216,.25);color:var(--cyan)}
.clear-opt-review .co-lbl{color:var(--cyan)}
.clear-opt-direct .co-ico{background:rgba(208,72,72,.08);border:1px solid rgba(208,72,72,.22);color:#d04848}
.clear-opt-direct .co-lbl{color:#d04848}

/* History hint in seed modal (#4) */
.history-hint{
  display:flex;align-items:center;gap:8px;margin-top:6px;padding:8px 12px;
  background:rgba(240,160,48,.06);border:1px solid rgba(240,160,48,.2);
  border-radius:9px;font-size:11px;font-weight:700;color:var(--amber);
}
.history-hint span{flex:1}
.history-hint button{
  background:rgba(240,160,48,.15);border:1px solid rgba(240,160,48,.3);
  color:var(--amber);font-size:11px;font-weight:800;padding:5px 10px;
  border-radius:7px;cursor:pointer;font-family:'Nunito',sans-serif;
}

/* Mini yield trend chart (#9) */
.ytc-wrap{margin:8px 0 12px;padding:12px 14px;background:rgba(255,255,255,.02);border:1px solid var(--bd);border-radius:12px}
.ytc-title{font-size:9px;font-weight:800;color:var(--tx3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.ytc-chart{display:flex;align-items:flex-end;gap:6px;height:60px}
.ytc-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%}
.ytc-bar-wrap{flex:1;width:100%;display:flex;align-items:flex-end}
.ytc-bar{width:100%;border-radius:3px 3px 0 0;min-height:2px;transition:height .4s ease}
.ytc-lbl{font-family:var(--mono);font-size:8px;color:var(--tx3);font-weight:700}

/* Onboarding (#10) */
.onboarding{
  margin:8px;padding:16px;
  background:linear-gradient(135deg,rgba(184,209,74,.06),rgba(56,200,216,.04));
  border:1px solid rgba(184,209,74,.18);border-radius:14px;
  position:relative;
}
.onb-title{font-size:13px;font-weight:800;color:var(--pb);margin-bottom:12px;letter-spacing:-.01em;padding-right:24px}
.onb-grid{display:flex;flex-direction:column;gap:10px}
.onb-item{display:flex;gap:11px;align-items:flex-start}
.onb-item-ico{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;line-height:1;
}
.onb-item-ico.cyan{background:rgba(56,200,216,.1);border:1px solid rgba(56,200,216,.25)}
.onb-item-ico.amber{background:rgba(240,160,48,.1);border:1px solid rgba(240,160,48,.25)}
.onb-item-body{flex:1;min-width:0}
.onb-item-title{font-size:12px;font-weight:800;color:#f1f5f9;margin-bottom:2px;letter-spacing:-.01em}
.onb-item-txt{font-size:11px;color:rgba(255,255,255,.55);font-weight:600;line-height:1.45}
.onb-tip{
  margin-top:12px;padding-top:10px;
  border-top:1px solid rgba(255,255,255,.05);
  font-size:10px;color:rgba(255,255,255,.4);font-weight:700;line-height:1.4;
}
.onb-close{
  position:absolute;top:12px;right:12px;
  width:24px;height:24px;border-radius:50%;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.3);font-size:11px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  z-index:1;
}


/* ── Mutter Header Pause Badge + Mother Empty Hint ── */
/* Mutter header pause badge (#7) */
.mutter-hdr-pause{
  display:inline-flex;align-items:center;
  font-family:var(--mono);font-size:10px;font-weight:800;
  background:rgba(100,116,139,.15);color:#94a3b8;
  padding:3px 8px;border-radius:6px;letter-spacing:.04em;
  margin-left:6px;
}

/* Mother empty hint (#10) */
.mother-empty-hint{
  display:flex;align-items:center;gap:12px;
  margin:0 12px 12px;padding:14px;
  border-radius:12px;
  background:rgba(56,200,216,.04);
  border:1px dashed rgba(56,200,216,.2);
}
.meh-ico{font-size:22px;color:var(--cyan);font-weight:300;line-height:1}
.meh-txt{font-size:12px;color:rgba(255,255,255,.55);font-weight:700;line-height:1.4;flex:1}

/* ── MCard Pills (Clones, Rating) ── */
/* Larger touch targets for mcard pills (#9) */
.mcard-clones{
  font-family:var(--mono);font-size:9px;color:var(--cyan);font-weight:700;
  margin-top:6px;opacity:.9;cursor:pointer;
  padding:6px 10px;border-radius:7px;min-height:28px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(56,200,216,.06);border:1px solid rgba(56,200,216,.18);
  transition:all .15s;
}
.mcard-clones:active{background:rgba(56,200,216,.18)}
.mcard-rating{
  font-family:var(--mono);font-size:9px;color:var(--amber);font-weight:800;
  margin-top:5px;letter-spacing:.02em;cursor:pointer;
  padding:6px 10px;border-radius:7px;min-height:28px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(240,160,48,.06);border:1px solid rgba(240,160,48,.18);
  transition:all .15s;
}
.mcard-rating:active{background:rgba(240,160,48,.18)}


/* ── V11 Phase 3 — Modal base (aus Blueprint) ── */
.btn-cyan{background:rgba(56,200,216,.08);border-color:rgba(56,200,216,.25);color:var(--cyan)}
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:90;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.modal-bg.on{display:flex;align-items:flex-end;justify-content:center;animation:fi .2s ease}
@keyframes fi{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(20px);opacity:.4}to{transform:translateY(0);opacity:1}}
.modal{
  width:100%;max-width:440px;background:#0c1014;
  border:1px solid rgba(255,255,255,.08);border-bottom:none;
  border-radius:20px 20px 0 0;
  padding:8px 16px calc(24px + var(--sb));
  max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  position:relative;
  animation:slideUp .28s cubic-bezier(.32,.72,0,1);
  box-shadow:0 -8px 40px rgba(0,0,0,.5);
}
/* Drag handle */
.modal::before{
  content:'';display:block;
  width:36px;height:4px;border-radius:4px;
  background:rgba(255,255,255,.12);
  margin:6px auto 12px;
}
.modal-title{font-size:15px;font-weight:800;color:#f1f5f9;margin-bottom:4px}
.modal-sub{font-size:11px;color:var(--tx3);margin-bottom:16px;font-weight:600}
.modal-count{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:16px}
.modal-count-btn{
  width:44px;height:44px;border-radius:12px;border:1px solid var(--bd);
  background:var(--card);color:var(--tx);font-size:22px;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);
}
.modal-count-btn:active{background:var(--card2)}
.modal-count-val{font-family:var(--mono);font-size:32px;font-weight:800;color:var(--cyan);min-width:48px;text-align:center}
.modal-actions{display:flex;gap:8px}
.modal-actions .btn{flex:1;padding:14px}

/* ── V11 Phase 3 — Action Menu (aus Blueprint) ── */
.action-menu{padding:8px 16px calc(20px + var(--sb))}
.action-list{display:flex;flex-direction:column;gap:6px;margin:14px 0 4px}
.action-item{
  display:grid;
  grid-template-columns:36px 1fr;grid-template-rows:auto auto;
  gap:0 12px;align-items:center;
  background:var(--card);border:1px solid var(--bd);border-radius:12px;
  padding:12px 14px;cursor:pointer;text-align:left;
  font-family:'Nunito',sans-serif;
}
.action-item:active{background:var(--card2)}
.action-ico{
  grid-row:1/3;font-size:20px;color:var(--cyan);text-align:center;
  width:36px;height:36px;border-radius:9px;
  background:rgba(56,200,216,.08);border:1px solid rgba(56,200,216,.2);
  display:flex;align-items:center;justify-content:center;
}
.action-lbl{font-size:13px;font-weight:800;color:var(--tx);line-height:1.2}
.action-desc{font-size:10px;color:var(--tx3);font-weight:600;margin-top:1px}
.action-danger .action-ico{color:#d04848;background:rgba(208,72,72,.08);border-color:rgba(208,72,72,.2)}
.action-danger .action-lbl{color:#d04848}

/* Danger button */
.btn-danger{background:rgba(208,72,72,.12)!important;border-color:rgba(208,72,72,.35)!important;color:#d04848!important}


/* ── V11 Phase 4A — Missing btn-g class ── */
.btn-g{background:rgba(184,209,74,.1);border-color:rgba(184,209,74,.25);color:var(--pb)}

/* ═══════════════════════════════════════════════════════
 * V11 Phase 4B — Grow Tent Card Grid (Blueprint Look)
 * Alle Klassen mit -v11 Suffix, keine Kollision mit Legacy
 * ═══════════════════════════════════════════════════════ */
.tent-wrap-v11{margin:8px;border-radius:18px;overflow:hidden;background:#0c1014;border:1px solid rgba(255,255,255,.06)}
.tent-hdr-v11{display:flex;align-items:center;gap:8px;padding:14px 16px 12px;border-bottom:1px solid rgba(255,255,255,.04)}
.tent-dot-v11{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e;animation:mpulse 2s infinite}
.tent-title-v11{font-size:14px;font-weight:700;color:#f1f5f9}
.tent-slots-v11{font-family:var(--mono,monospace);font-size:10px;color:rgba(255,255,255,.4);font-weight:700;margin-left:auto}

.pgrid-v11{display:grid;gap:8px;padding:10px 10px 12px}
.pgrid-v11.c3{grid-template-columns:repeat(3,1fr)}
.pgrid-v11.c4{grid-template-columns:repeat(4,1fr)}

.pcard-v11{
  background:linear-gradient(145deg,rgba(28,40,56,.95),rgba(18,24,32,.98));
  border:1px solid rgba(184,209,74,.1);border-radius:14px;
  padding:14px 10px 10px;display:flex;flex-direction:column;align-items:center;
  cursor:pointer;transition:all .15s;position:relative;overflow:hidden;
}
.pcard-v11::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 20%,rgba(184,209,74,.03),transparent 70%);pointer-events:none}
.pcard-v11:active{transform:scale(.97);border-color:rgba(184,209,74,.3)}
.pcard-v11-poslbl{
  font-family:var(--mono,monospace);font-size:9px;font-weight:800;
  color:var(--cyan);letter-spacing:.08em;padding:2px 8px;margin-bottom:4px;
  background:rgba(56,200,216,.08);border-radius:5px;
  border:1px solid rgba(56,200,216,.15);
}
.pcard-v11-name{font-size:12px;font-weight:800;color:var(--pb);text-align:center;line-height:1.15;word-break:break-word;margin-top:2px}
.pcard-v11-breeder{font-size:10px;color:var(--tx3);text-align:center;margin-top:2px;font-weight:600}
.pcard-v11-bloom{font-size:10px;color:var(--amber);font-weight:700;margin-top:4px}
.pcard-v11-origin{font-family:var(--mono,monospace);font-size:8px;color:var(--cyan);font-weight:700;margin-top:5px;letter-spacing:.04em;padding:2px 6px;border-radius:4px;background:rgba(56,200,216,.08);border:1px solid rgba(56,200,216,.18)}
.pcard-v11-origin.seed{color:var(--amber);background:rgba(240,160,48,.08);border-color:rgba(240,160,48,.18)}
.pcard-v11-empty{
  background:rgba(255,255,255,.015)!important;
  border:1px dashed rgba(255,255,255,.1)!important;
  min-height:140px;
  align-items:center;justify-content:center;
}
.pcard-v11-empty::before{display:none}
.pcard-v11-empty:active{background:rgba(56,200,216,.04)!important;border-color:rgba(56,200,216,.25)!important}
.pcard-v11-empty-ico{font-size:28px;color:rgba(255,255,255,.12);font-weight:300;line-height:1;margin-bottom:8px}
.pcard-v11-empty-lbl{font-size:10px;color:rgba(255,255,255,.2);font-weight:700}


/* ═══════════════════════════════════════════════════════
 * V11 Phase 4B Hotfix — Modal Scroll + Sticky Actions
 * Problem: Speichern-Button war unterhalb des Viewport abgeschnitten.
 * Fix: niedrigere max-height, Modal als Flex-Column, Actions unten fixiert.
 * ═══════════════════════════════════════════════════════ */
.modal-bg.on{
  align-items:flex-end !important;
}
.modal{
  max-height:82vh !important;
  display:flex !important;
  flex-direction:column !important;
  padding:8px 16px 0 !important;
}
.modal > .seed-form,
.modal > .action-list,
.modal > .modal-count{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  flex:1 1 auto;
  min-height:0;
}
.modal > .modal-actions{
  position:sticky;bottom:0;
  background:linear-gradient(180deg,transparent 0,#0c1014 20%,#0c1014 100%);
  padding:10px 0 calc(20px + var(--sb,0px));
  margin-top:8px;
  flex-shrink:0;
  z-index:2;
}
/* Safety for mobile: ensure minimum tap target */
.modal-actions .btn{min-height:46px !important}


/* ═══ V11 Hotfix 2 — Samen-Card clickability ═══ */
.nav-card { position:relative !important; z-index:2 !important; }
.nav-card > * { pointer-events:auto !important; }


/* ═══════════════════════════════════════════════════════
 * V11 Großer Wurf — Altes Grow-Zelt komplett ausblenden
 * (die neue V11-Card-Grid übernimmt die Darstellung)
 * ═══════════════════════════════════════════════════════ */
#tab-grow #scenewrap,
#tab-grow .tent-sheet-bg,
#tab-grow .tent-sheet { display:none !important; }

/* ══ UNIFIED BANNER — persistent, oben angedockt, 4 Typen ══ */
.unibanner{
  display:none;align-items:center;gap:10px;
  width:100%;padding:10px 14px;
  font-size:12px;font-weight:700;letter-spacing:.01em;
  border-bottom:1px solid transparent;color:#fff;
  position:relative;z-index:9500;
}
.unibanner.on{display:flex}
.unibanner .ubicon{
  flex-shrink:0;width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:12px;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);
}
.unibanner .ubmsg{flex:1;line-height:1.35}
.unibanner .ubact{flex-shrink:0}
.unibanner--info{background:rgba(56,200,216,.18);border-bottom-color:rgba(56,200,216,.35);color:#a8e8f0}
.unibanner--warn{background:rgba(240,160,48,.18);border-bottom-color:rgba(240,160,48,.35);color:#f0c888}
.unibanner--err {background:rgba(200,30,30,.9);border-bottom-color:rgba(255,80,80,.4);color:#fff}
.unibanner--ok  {background:rgba(184,209,74,.18);border-bottom-color:rgba(184,209,74,.35);color:#c8e088}
#tab-batch.active{padding-bottom:calc(var(--nav) + var(--sb) + 90px) !important}