:root{
      /* Fieldglass Pro (2026) — calm instrument panel + micro-reward. */
      --bg0:#070A0F;
      --bg1:#0B1220;
      --bg2:#0E1A2D;

      /* Glass surfaces */
      --panel:rgba(16,26,43,0.66);
      --panel2:rgba(19,33,55,0.62);

      /* Type */
      --ink:#EAF2FF;
      --muted:#AAB9D3;

      /* Hairlines */
      --stroke:rgba(255,255,255,0.10);
      --stroke2:rgba(255,255,255,0.06);

      /* Accent tokens (kept names for compatibility) */
      --orange:#FFB454;   /* warm reward */
      --tan:#D8E3F6;      /* soft neutral */
      --pink:#FF6AA3;     /* optional accent / error-adjacent */
      --purple:#8A7CFF;   /* secondary */
      --blue:#47D7FF;     /* primary */
      --good:#32E6A6;
      --warn:#FFD166;
      --bad:#FF4D6D;

      /* Gradients (new; safe to add) */
      --g-accent: linear-gradient(135deg, #47D7FF 0%, #8A7CFF 55%, #32E6A6 100%);
      --g-warm:   linear-gradient(135deg, #FFB454 0%, #FFD166 60%, #FF6AA3 100%);

      /* Motion tokens */
      --t-fast:160ms;
      --t-med:260ms;
      --t-slow:420ms;
      --ease-in: cubic-bezier(.7,0,.84,0);
      --ease-out: cubic-bezier(.16,1,.3,1);
      --ease-io: cubic-bezier(.45,0,.55,1);

      /* Focus */
      --focus: rgba(71,215,255,0.95);
      --focus2: rgba(5,10,18,0.95);

      --shadow: 0 18px 55px rgba(0,0,0,0.45);
      --shadow2: 0 10px 30px rgba(0,0,0,0.35);

      --r:20px;
      --r2:14px;
      --pad:14px;
    }

    
    /* Global sizing + rendering */
    *, *::before, *::after{ box-sizing:border-box; }
    ::selection{ background: rgba(71,215,255,0.22); }

    @keyframes auroraShift{
      0%{ transform: translate3d(-0.6%, -0.4%, 0) scale(1.01); filter: hue-rotate(0deg); }
      50%{ transform: translate3d(0.6%, 0.4%, 0) scale(1.02); filter: hue-rotate(6deg); }
      100%{ transform: translate3d(-0.6%, -0.4%, 0) scale(1.01); filter: hue-rotate(0deg); }
    }
    @keyframes edgePulse{
      0%{ box-shadow: 0 0 0 0 rgba(71,215,255,0.0); }
      40%{ box-shadow: 0 0 0 6px rgba(71,215,255,0.16); }
      100%{ box-shadow: 0 0 0 0 rgba(71,215,255,0.0); }
    }
    @keyframes sheen{
      0%{ transform: translateX(-120%) skewX(-14deg); opacity:0; }
      20%{ opacity:.38; }
      60%{ opacity:.35; }
      100%{ transform: translateX(220%) skewX(-14deg); opacity:0; }
    }

    @media (prefers-reduced-motion: reduce){
      *, *::before, *::after{
        animation-duration:1ms !important;
        animation-iteration-count:1 !important;
        transition-duration:1ms !important;
        scroll-behavior:auto !important;
      }
    }

html,body{
      height:100%;
      margin:0;
      background:#000;
      color:var(--ink);
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }
    body{
      /* Background image (Agromic Fondo) with dark instrument-panel veil */
      background:
        linear-gradient(160deg, rgba(7,10,15,0.35), rgba(14,26,45,0.40)),
        url("/agromic_fondo.png");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      overflow:hidden;
      position:relative;
      isolation:isolate;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* Ambient aurora layer */
    body::before{
      content:"";
      position:fixed;
      inset:-12%;
      z-index:-2;
      pointer-events:none;
      background:
        radial-gradient(1100px 640px at 58% 38%, rgba(71,215,255,0.18) 0%, transparent 62%),
        radial-gradient(900px 560px at 28% 62%, rgba(138,124,255,0.14) 0%, transparent 60%),
        radial-gradient(760px 520px at 72% 70%, rgba(50,230,166,0.12) 0%, transparent 58%),
        radial-gradient(1200px 700px at 50% 50%, rgba(255,180,84,0.06) 0%, transparent 64%);
      filter:saturate(115%) contrast(108%);
      transform-origin:center;
      animation: auroraShift 14s var(--ease-io) infinite;
      opacity:.55;
    }

    /* Fine grain layer (SVG turbulence; subtle) */
    body::after{
      content:"";
      position:fixed;
      inset:0;
      z-index:-1;
      pointer-events:none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
      background-size: 220px 220px;
      mix-blend-mode: overlay;
      opacity:.05;
    }

    .app{
      height:100%;
      display:grid;
      grid-template-rows:auto 1fr;
      gap:14px;
      padding:14px;
      box-sizing:border-box;
      min-height:0;
    }

    .top{
      display:grid;
      grid-template-columns: minmax(320px, 1.7fr) minmax(240px, 1.05fr) minmax(220px, 0.9fr);
      gap:14px;
      align-items:stretch;
      min-width:0;
      position:sticky;
      top:0;
      z-index:40;
    }
    .pill{
      border:1px solid var(--stroke);
      border-radius:18px;
      background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
      backdrop-filter: blur(12px) saturate(125%);
      -webkit-backdrop-filter: blur(12px) saturate(125%);
      box-shadow: var(--shadow2), inset 0 1px 0 rgba(255,255,255,0.07);
      padding:12px 16px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:14px;
      min-width:0;
      position:relative;
      overflow:hidden;
      transition: transform var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), filter var(--t-med) var(--ease-out);
    }

    .pill strong{ letter-spacing:.6px; }
    .pill small{ color:var(--muted); letter-spacing:.2px; }

    /* NET status colors */
    #netLabel.net-ok{ color: var(--good); }
    #netLabel.net-warn{ color: var(--warn); }
    #netLabel.net-fail{ color: var(--bad); }


    .tag{
      padding:7px 12px;
      border-radius: 14px;
      font-weight:700;
      font-size:12px;
      letter-spacing:.7px;
      border:1px solid var(--stroke2);
      background: rgba(255,255,255,0.06);
      color:var(--ink);
      user-select:none;
      white-space:nowrap;
      max-width:100%;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .top .brand{
      background: linear-gradient(180deg, #1a1f2e, #0a0f1b);
    }

    .top .user{
      background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
    }


    /* Brand mark (crisp at small sizes; avoids dark-mode halation) */
    .brandStack{
      min-width:0;
      display:flex;
      align-items:center;
      min-height:100%;
    }
    .brandRow{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }
    .brandRow strong{ white-space:nowrap; }
    .brandMark{
      width:24px;
      height:24px;
      flex:0 0 auto;
      display:block;
      opacity:.95;
      filter: saturate(.90) brightness(1.02);
      user-select:none;
      -webkit-user-drag:none;
    }
    @media (max-width:1180px){
      .brandMark{ width:22px; height:22px; }
    }
    @media (max-width:980px){
      .brandMark{ width:20px; height:20px; }
    }
    .pill.brand:hover .brandMark{
      filter: saturate(.98) brightness(1.06) drop-shadow(0 0 14px rgba(71,215,255,0.22));
    }

    /* Inbox mail icon (top bar) */
    .pill.brand{ padding-right:56px; }
    .mailBtn{
      position:absolute;
      top:10px;
      right:10px;
      width:38px;
      height:38px;
      border-radius:16px;
      border:1px solid var(--stroke2);
      background: rgba(255,255,255,0.06);
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      user-select:none;
    }
    .mailBtn:hover{ filter:brightness(1.06); }
    .mailBtn:active{ transform: translateY(1px); }
    .mailIcon{ width:20px; height:20px; }
    .mailIcon path{ stroke: var(--ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
    .mailDot{
      position:absolute;
      top:9px;
      right:9px;
      width:9px;
      height:9px;
      border-radius:999px;
      background: var(--good);
      box-shadow: 0 0 0 2px rgba(7,10,15,0.85);
      display:none;
    }
    .mailBtn.hasUnread .mailDot{ display:block; }
    .settingsBtn{
      position:absolute;
      top:10px;
      right:54px;
      width:38px;
      height:38px;
      border-radius:16px;
      border:1px solid var(--stroke2);
      background: rgba(255,255,255,0.06);
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      user-select:none;
    }
    .settingsBtn:hover{ filter:brightness(1.06); }
    .settingsBtn:active{ transform: translateY(1px); }
    .settingsIcon{ width:20px; height:20px; }
    .settingsIcon path{ fill: var(--ink); }



    .grid{
      display:grid;
      grid-template-columns: 280px minmax(0,1fr) 340px;
      gap:14px;
      min-height:0;
      min-width:0;
    }

    /* LEFT NAV */
    .nav{
      border:1px solid var(--stroke);
      border-radius: var(--r);
      background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025));
      backdrop-filter: blur(14px) saturate(125%);
      -webkit-backdrop-filter: blur(14px) saturate(125%);
      box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.06);
      padding:12px;
      overflow:auto;
      min-width:0;
      display:flex;
      flex-direction:column;
    }

    .groupTitle{
      margin:10px 8px 8px;
      color:var(--muted);
      font-weight:800;
      letter-spacing:.9px;
      font-size:11px;
      text-transform:uppercase;
    }


/* Nav dropdown groups (desktop USERS only).
   Master keeps everything expanded (no dropdown behavior). */
.navDrop{
  margin-top: 6px;
}
.navDropHead{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 6px 6px;
  padding: 9px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  font-weight: 900;
  letter-spacing: .9px;
  font-size: 11px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.navDropHead:hover{
  border-color: rgba(71,215,255,0.18);
  filter: brightness(1.03);
}
.navDropChev{
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(234,242,255,0.65);
  border-bottom: 2px solid rgba(234,242,255,0.65);
  transform: rotate(45deg);
  opacity: .65;
  transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}

/* USER: collapsed by default, expands on .open */
html.role-user .navDropBody{
  display: none;
}
html.role-user .navDrop.open .navDropBody{
  display: block;
}
html.role-user .navDrop.open .navDropChev{
  transform: rotate(-135deg);
  opacity: .85;
}

/* MASTER: always expanded; header becomes plain section label */
html.role-master .navDropHead{
  cursor: default;
  pointer-events: none;
  margin: 10px 8px 8px;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}
html.role-master .navDropChev{
  display: none;
}
html.role-master .navDropBody{
  display: block;
}

    /* Nav rail "chips" (LAB / TOOLS) — less button-like, more selected instrument chips */
    .railChip{
      width:100%;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,0.12);
      padding:10px 12px;
      cursor:pointer;
      font-weight:950;
      letter-spacing:.85px;
      color:var(--ink);
      text-transform:uppercase;
      background: rgba(255,255,255,0.035);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
      backdrop-filter: blur(10px) saturate(120%);
      -webkit-backdrop-filter: blur(10px) saturate(120%);
      position:relative;
      overflow:hidden;
      transition: border-color var(--t-fast) var(--ease-out), filter var(--t-fast) var(--ease-out), background var(--t-med) var(--ease-out);
    }
    .railChip::after{
      content:"";
      position:absolute;
      inset:-2px;
      background: var(--g-accent);
      opacity:0;
      filter: blur(18px);
      z-index:-1;
      transition: opacity var(--t-med) var(--ease-out);
    }
    .railChip span{
      font-weight:800;
      font-size:11px;
      opacity:.70;
      letter-spacing:.45px;
      text-transform:uppercase;
      white-space:nowrap;
    }
    .railChip:hover{
      border-color: rgba(71,215,255,0.28);
      filter: brightness(1.04);
    }
    .railChip:hover::after{ opacity:.14; }
    .railChip:active{ filter: brightness(1.02); }

    .railChip.active{
      background: linear-gradient(180deg, rgba(71,215,255,0.10), rgba(255,255,255,0.03));
      border-color: rgba(71,215,255,0.42);
    }
    .railChip.active::after{ opacity:.22; }

    /* Optional warm cue for TOOLS without looking like a CTA */
    .railChip[data-tone="warm"]::after{ background: var(--g-warm); }

    .btn{
      width:100%;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      border-radius: 16px;
      border:1px solid rgba(255,255,255,0.12);
      padding:12px 12px;
      margin:8px 0;
      cursor:pointer;
      font-weight:900;
      letter-spacing:.6px;
      color:var(--ink);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
      backdrop-filter: blur(10px) saturate(120%);
      -webkit-backdrop-filter: blur(10px) saturate(120%);
      box-shadow: var(--shadow2), inset 0 1px 0 rgba(255,255,255,0.07);
      min-width:0;
      position:relative;
      overflow:hidden;
      transition:
        transform var(--t-fast) var(--ease-out),
        filter var(--t-fast) var(--ease-out),
        border-color var(--t-fast) var(--ease-out),
        box-shadow var(--t-med) var(--ease-out);
    }
    .btn::after{
      content:"";
      position:absolute;
      inset:-2px;
      background: var(--g-accent);
      opacity:.0;
      filter: blur(14px);
      z-index:-1;
      transition: opacity var(--t-med) var(--ease-out);
    }
    .btn:hover{
      transform: translateY(-1px);
      border-color: rgba(71,215,255,0.30);
      filter: brightness(1.06);
    }
    .btn:hover::after{ opacity:.22; }
    .btn:active{
      transform: translateY(0px) scale(.985);
      filter: brightness(1.02);
    }
    .btn span{
      font-weight:800;
      font-size:11px;
      opacity:.72;
      letter-spacing:.4px;
      text-transform:uppercase;
      white-space:nowrap;
    }

    .bOrange{ background: linear-gradient(180deg, #ffc56f, var(--orange)); }
    .bTan{ background: linear-gradient(180deg, #ffe5bc, var(--tan)); }
    .bPink{ background: linear-gradient(180deg, #ff9ac6, var(--pink)); }
    .bPurple{ background: linear-gradient(180deg, #cdbaff, var(--purple)); }
    .bBlue{ background: linear-gradient(180deg, #a8caff, var(--blue)); }
    /* Grow tools buttons: calmer teal-glass (less aggressive than primary accent). */
    .toolsNav .btn.bBlue{
      background: linear-gradient(180deg, rgba(18,161,148,0.28), rgba(18,161,148,0.12));
      border-color: rgba(18,161,148,0.22);
    }
    .toolsNav .btn.bBlue::after{
      background: linear-gradient(135deg, rgba(18,161,148,0.65) 0%, rgba(71,215,255,0.35) 55%, rgba(138,124,255,0.30) 100%);
      opacity:.10;
      filter: blur(16px);
    }
    .toolsNav .btn.bBlue:hover{
      border-color: rgba(18,161,148,0.34);
      filter: brightness(1.04);
    }


    .btn:active{ transform: translateY(1px); }
    .btn:hover{ filter:brightness(1.03); }

    .subBtns{
      margin:0 0 8px 0;
      padding:0 0 0 8px;
      border-left:1px solid #ffffff10;
    }
    .subBtns .btn{
      margin:6px 0;
    }

    /* MAIN */
    .main{
      border:1px solid var(--stroke);
      border-radius: var(--r);
      background: linear-gradient(180deg, #0b0f1a, #070a12);
      box-shadow: var(--shadow), inset 0 0 0 1px #ffffff08;
      display:grid;
      grid-template-rows: 1fr auto;
      min-height:0;
      overflow:hidden;
      min-width:0;
    }

    .chat{
      padding:14px;
      overflow:auto;
      min-height:0;
      min-width:0;
    }

    .bubble{
      max-width:min(860px, 92%);
      border-radius: 18px;
      padding:12px 14px;
      margin:10px 0;
      border:1px solid var(--stroke2);
      background: rgba(255,255,255,0.05);
      box-shadow: 0 12px 28px #0006;
      white-space:pre-wrap;
      line-height:1.25rem;
      overflow-wrap:anywhere;
    }
    .bubble.user{
      margin-left:auto;
      background: linear-gradient(180deg, rgba(122,176,255,0.20), rgba(255,255,255,0.05));
    }
    .bubble.bot{
      background: linear-gradient(180deg, rgba(255,179,87,0.14), rgba(255,255,255,0.05));
    }
    .meta{
      color:var(--muted);
      font-size:11px;
      margin-top:6px;
      letter-spacing:.2px;
    }



    /* Report receipt + details (chat) */
    .receiptBox{
      border:1px solid var(--stroke2);
      background: rgba(255,255,255,0.035);
      border-radius: 14px;
      padding:8px 10px;
      margin: 0 0 10px 0;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    }
    .receiptLine1{
      font-size:12px;
      color: var(--muted);
      letter-spacing:.2px;
    }
    .receiptLine1 b{ color: var(--ink); font-weight:950; }
    .receiptTags{
      margin-top:6px;
      display:flex;
      flex-wrap:wrap;
      gap:6px;
    }
    .receiptTag{
      padding:5px 9px;
      border-radius:18px;
      border:1px solid var(--stroke2);
      background: rgba(0,0,0,0.12);
      color: var(--ink);
      font-weight:900;
      font-size:11px;
      letter-spacing:.55px;
      white-space:nowrap;
    }
    .receiptTag.dim{ color: var(--muted); font-weight:850; }

    details.reportDetails{
      border:1px solid var(--stroke2);
      background: rgba(255,255,255,0.03);
      border-radius: 14px;
      padding:8px 10px;
      margin: 0 0 10px 0;
    }
    details.reportDetails summary{
      cursor:pointer;
      user-select:none;
      color: var(--muted);
      font-weight:950;
      letter-spacing:.5px;
      outline:none;
    }
    details.reportDetails[open] summary{ color: var(--ink); }
    .reportDetailsBody{
      margin-top:8px;
      color: var(--muted);
      font-size:12px;
      line-height:1.15rem;
      white-space:pre-wrap;
    }

    /* Precision pane micro styling */
    .precHint{
      color: var(--muted);
      font-size:12px;
      line-height:1.1rem;
      margin: 6px 0 10px 0;
    }
    .composer{
      display:grid;
      grid-template-columns: minmax(0,1fr) 118px 92px 92px;
      gap:10px;
      padding:12px;
      border-top:1px solid var(--stroke);
      background: linear-gradient(180deg, #080b13, #05070d);
      min-width:0;
    }


    .inactivityHint{
      grid-column: 1 / -1;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:10px 12px;
      border-radius: 14px;
      border:1px solid var(--stroke2);
      background: rgba(255,255,255,0.04);
      color: var(--muted);
      font-size: 13px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    }
    .inactivityHint.hidden{ display:none; }
    .ihText{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .ihBtns{ display:flex; gap:8px; flex:0 0 auto; }
    .ihBtn{
      border-radius: 12px;
      border:1px solid var(--stroke2);
      cursor:pointer;
      padding:8px 10px;
      font-weight:950;
      letter-spacing:.55px;
      background: rgba(255,255,255,0.06);
      color: var(--ink);
      white-space:nowrap;
    }
    .ihBtn:hover{ filter:brightness(1.03); }

    .newThread{
      border-radius: 14px;
      border:1px solid var(--stroke2);
      cursor:pointer;
      font-weight:900;
      letter-spacing:.6px;
      box-shadow: 0 12px 28px #0006;
      white-space:nowrap;
      background: var(--g-warm);
      color:#07101b;
    }
    .newThread:hover{ filter:brightness(1.03); }

    textarea{
      resize:none;
      height:44px;
      padding:10px 12px;
      border-radius: 14px;
      border:1px solid var(--stroke2);
      outline:none;
      background: rgba(255,255,255,0.04);
      color:var(--ink);
      box-shadow: inset 0 0 0 1px #ffffff08;
      font-size:14px;
      line-height:1.2rem;
      min-width:0;
    }

    .send{
      border-radius: 14px;
      border:1px solid var(--stroke2);
      cursor:pointer;
      font-weight:900;
      letter-spacing:.6px;
      box-shadow: 0 12px 28px #0006;
      white-space:nowrap;
    }
    .send{
      background: var(--g-accent);
      color:#07101b;
    }
    .send:hover{ filter:brightness(1.03); }

    /* RIGHT SIDE */
    .side{
      display:grid;
      grid-auto-rows:min-content;
      align-content:start;
      gap:14px;
      min-height:0;
      overflow-y:auto;
      overflow-x:hidden; /* kill horizontal scroll */
      min-width:0;
    }
    .card{
      border:1px solid var(--stroke);
      border-radius: var(--r);
      background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
      backdrop-filter: blur(14px) saturate(125%);
      -webkit-backdrop-filter: blur(14px) saturate(125%);
      box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.06);
      padding:12px;
      min-width:0;
      overflow-x:hidden;
      position:relative;
    }

    .card h3{
      margin:6px 6px 10px;
      letter-spacing:.7px;
      text-transform:uppercase;
      font-size:12px;
      color:var(--muted);
    }

    .hint{
      color:var(--muted);
      font-size:13px;
      line-height:1.2rem;
      padding:0 6px 6px;
    }

    .formSectionTitle{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin:10px 6px 6px;
      color:var(--ink);
      font-weight:900;
      letter-spacing:.6px;
      font-size:12px;
      text-transform:uppercase;
      min-width:0;
    }
    .subTag{
      padding:5px 10px;
      border-radius:18px;
      border:1px solid var(--stroke2);
      background: rgba(255,255,255,0.05);
      color:var(--muted);
      font-size:11px;
      font-weight:800;
      letter-spacing:.4px;
      white-space:nowrap;
      max-width:100%;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .formGrid{
      display:grid;
      grid-template-columns: minmax(0,1fr) minmax(0,1fr);
      gap:10px;
      padding:6px;
      min-width:0;
    }

    .field{
      display:flex;
      flex-direction:column;
      gap:6px;
      min-width:0;
    }
    .field label{
      font-size:12px;
      color:var(--muted);
      font-weight:800;
      letter-spacing:.3px;
    }
    .field input, .field select{
      padding:10px 12px;
      border-radius: 14px;
      border:1px solid var(--stroke2);
      outline:none;
      background: rgba(255,255,255,0.035);
      color:var(--ink);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
      font-size:14px;
      min-width:0;
      transition:
        border-color var(--t-fast) var(--ease-out),
        box-shadow var(--t-fast) var(--ease-out),
        filter var(--t-fast) var(--ease-out),
        background var(--t-fast) var(--ease-out);
    }
    .field input:hover, .field select:hover{
      border-color: rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.045);
    }
    .field input:focus-visible, .field select:focus-visible{
      border-color: rgba(71,215,255,0.40);
      box-shadow:
        0 0 0 2px var(--focus),
        0 0 0 4px var(--focus2),
        inset 0 1px 0 rgba(255,255,255,0.07);
    }
    .field.wide{ grid-column:1 / -1; }

    /* Shared native select popup fix: keep desktop dropdown menus readable instead of white-on-white. */
    select{
      color-scheme: dark;
    }
    select option{
      background: #0E1A2D;
      color: var(--ink);
    }
    select option:checked{
      background: #13243D;
      color: #F3F8FF;
    }
    select optgroup{
      background: #0B1220;
      color: var(--muted);
      font-style: normal;
      font-weight: 800;
    }

    .checkRow{
      display:flex;
      align-items:center;
      gap:10px;
      padding:10px 12px;
      border-radius: 14px;
      border:1px solid var(--stroke2);
      background: rgba(255,255,255,0.04);
      box-shadow: inset 0 0 0 1px #ffffff08;
      color:var(--ink);
      user-select:none;
      min-width:0;
    }
    .checkRow input{
      width:18px;
      height:18px;
      accent-color: var(--blue);
      flex:0 0 auto;
    }
    .checkRow .checkLabel{
      font-size:13px;
      color:var(--ink);
      font-weight:800;
      letter-spacing:.2px;
      line-height:1.1rem;
      overflow-wrap:anywhere;
    }
    .checkRow .checkHint{
      font-size:11px;
      color:var(--muted);
      font-weight:700;
      letter-spacing:.2px;
      margin-left:auto;
      white-space:nowrap;
      flex:0 0 auto;
    }


    .save{
      width:100%;
      padding:12px 12px;
      border-radius: 14px;
      border:1px solid var(--stroke2);
      cursor:pointer;
      font-weight:950;
      letter-spacing:.8px;
      background: var(--g-accent);
      color:#07101b;
      box-shadow: 0 16px 30px #0007;
      white-space:nowrap;
    }
    .save:hover{ filter:brightness(1.03); }

    .save.secondary{
      background: rgba(255,255,255,0.07);
      color: var(--ink);
      border-color: rgba(255,255,255,0.14);
      box-shadow: 0 14px 26px #0006, inset 0 1px 0 rgba(255,255,255,0.06);
    }


    .row{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      padding:6px;
      border-top:1px solid #ffffff0c;
      min-width:0;
    }
    .row:first-of-type{ border-top:none; }
    .toast{
      position:fixed;
      left:50%;
      bottom:18px;
      transform:translateX(-50%);
      background: rgba(9,13,22,0.62);
      border:1px solid rgba(255,255,255,0.12);
      backdrop-filter: blur(14px) saturate(125%);
      -webkit-backdrop-filter: blur(14px) saturate(125%);
      color:var(--ink);
      border-radius: 16px;
      padding:10px 12px;
      box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.07);
      max-width:min(720px, calc(100vw - 24px));
      display:none;
      /* Above modals + mobile bar (field mode). */
      z-index:12000;
      animation: edgePulse 700ms var(--ease-out) 1;
    }

    .mutedLine{
      color:var(--muted);
      font-size:12px;
      padding:0 6px 6px;
      line-height:1.15rem;
    }
    .mutedLine:empty{ display:none; }

    .divider{ height:1px; background:var(--stroke2); margin:14px 0; }

    .hidden{ display:none !important; }

    /* --- Metrics sub-tabs (Metrics tool: Reports vs Plant Groups) --- */
    .subTabs{
      display:flex;
      gap:10px;
      margin: 10px 0 14px 0;
    }
    .subTabBtn{
      flex:1;
      border:1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.06);
      color: inherit;
      padding: 10px 12px;
      border-radius: 12px;
      cursor:pointer;
      font-weight:700;
      letter-spacing:.5px;
    }
    .subTabBtn.active{
      background: rgba(255,255,255,0.14);
      border-color: rgba(255,255,255,0.22);
    }


    /* --------- MODAL (Audit logs) --------- */
    .modalBackdrop{
      position:fixed;
      inset:0;
      background: rgba(0,0,0,0.58);
      backdrop-filter: blur(10px) saturate(110%);
      -webkit-backdrop-filter: blur(10px) saturate(110%);
      display: none;
      /* Above field-device bottom bar. */
      z-index:10000;
      padding:18px;
      box-sizing:border-box;
    }
    .modalBackdrop[aria-hidden="false"]{
      display:flex;
    }
    .modal{
      margin:0 auto;
      width:min(1200px, 100%);
      max-height: calc(100vh - 36px);
      border-radius: 22px;
      border:1px solid rgba(255,255,255,0.14);
      background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
      backdrop-filter: blur(16px) saturate(130%);
      -webkit-backdrop-filter: blur(16px) saturate(130%);
      box-shadow: 0 24px 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
      overflow:hidden;
      display:flex;
      flex-direction:column;
      transform: translateY(10px);
      opacity: 0;
      transition: transform var(--t-slow) var(--ease-out), opacity var(--t-slow) var(--ease-out);
    }
    .modalBackdrop[aria-hidden="false"] .modal{
      transform: translateY(0);
      opacity: 1;
    }
    .modalHeader{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:12px 14px;
      border-bottom:1px solid var(--stroke);
      min-width:0;
    }
    .modalHeader strong{
      letter-spacing:.7px;
      text-transform:uppercase;
      font-size:12px;
      color:var(--muted);
      white-space:nowrap;
    }
    .modalActions{
      display:flex;
      gap:10px;
      align-items:center;
      min-width:0;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .modalBtn{
      cursor:pointer;
      border:1px solid var(--stroke2);
      background: rgba(255,255,255,0.05);
      color:var(--ink);
      border-radius:18px;
      padding:7px 12px;
      font-weight:900;
      letter-spacing:.55px;
      white-space:nowrap;
      position:relative;
      overflow:hidden;
    }
    .modalBtn:hover{
      border-color: rgba(255,255,255,0.16);
      filter: brightness(1.06);
      transform: translateY(-1px);
    }
    .modalBtn:hover{ filter:brightness(1.06); }

    .modalBody{
      display:grid;
      grid-template-columns: minmax(0,1.2fr) minmax(0,1fr);
      gap:14px;
      padding:14px;
      min-height:0;
      min-width:0;
      flex:1;
      overflow:hidden;
    }

    /* --------- WIZARD (Plant Groups) --------- */
    .modalBody.wizardBody{
      display:flex;
      flex-direction:column;
      gap:12px;
      overflow:auto;
    }
    .wizardHeaderLeft{ min-width:0; }
    .wizardSteps{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      align-items:center;
    }
    .wizardStepPill{
      cursor:pointer;
      border:1px solid var(--stroke2);
      background: rgba(255,255,255,0.04);
      color:var(--ink);
      border-radius: 999px;
      padding:6px 10px;
      font-weight:900;
      letter-spacing:.45px;
      font-size:12px;
      text-transform:uppercase;
    }
    .wizardStepPill:hover{ filter: brightness(1.06); transform: translateY(-1px); }
    .wizardStepPill.active{
      border-color: rgba(122,176,255,0.45);
      box-shadow: 0 0 0 3px rgba(122,176,255,0.15);
    }
    .wizardStepPill.locked{ opacity:0.45; cursor:default; transform:none; }
    .wizardStepPane{ min-width:0; }
    .wizardNav{
      display:flex;
      justify-content:space-between;
      gap:10px;
      align-items:center;
      padding-top:10px;
      border-top:1px solid var(--stroke);
    }
    .wizardNavRight{ display:flex; gap:10px; align-items:center; }
    .req{
      font-size:11px;
      color: var(--muted);
      font-weight:900;
      letter-spacing:.35px;
      text-transform:uppercase;
    }
    .auditList{
      border:1px solid var(--stroke2);
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;

      border-radius: var(--r2);
      overflow:auto;
      min-height:0;
      background: rgba(255,255,255,0.03);
    }
    .auditItem{
      padding:10px 12px;
      border-bottom:1px solid #ffffff10;
      cursor:pointer;
      min-width:0;
    }
    .auditItem:hover{ background: rgba(255,255,255,0.04); }
    .auditItem.active{ outline:2px solid rgba(122,176,255,0.35); background: rgba(122,176,255,0.06); }
    .auditTopLine{
      display:flex;
      justify-content:space-between;
      gap:10px;
      min-width:0;
    }
    .auditTs{
      font-weight:900;
      letter-spacing:.2px;
      font-size:12px;
      white-space:nowrap;
    }
    .auditMeta{
      color:var(--muted);
      font-size:12px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      max-width:60%;
    }
    .auditSummary{
      color:var(--muted);
      font-size:12px;
      margin-top:6px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

    .auditEditor{
      border:1px solid var(--stroke2);
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;

      border-radius: var(--r2);
      overflow:auto;
      min-height:0;
      background: rgba(255,255,255,0.03);
      padding:10px;
    }
    .auditEditor h4{
      margin:4px 6px 10px;
      letter-spacing:.7px;
      text-transform:uppercase;
      font-size:12px;
      color:var(--muted);
    }
    .auditRowBtns{
      display:flex;
      gap:10px;
      padding:6px;
      flex-wrap:wrap;
    }
    .danger{
      background: linear-gradient(180deg, rgba(255,77,109,0.22), rgba(255,77,109,0.10));
      color: var(--ink);
      border:1px solid rgba(255,77,109,0.28);
      border-radius:18px;
      padding:7px 12px;
      font-weight:950;
      letter-spacing:.6px;
      cursor:pointer;
      white-space:nowrap;
      position:relative;
      overflow:hidden;
      transition: transform var(--t-fast) var(--ease-out), filter var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
    }
    .danger:hover{ transform: translateY(-1px); filter:brightness(1.06); border-color: rgba(255,77,109,0.42); }
    .danger:active{ transform: translateY(0) scale(.985); }
    .neutral{
      background: rgba(255,255,255,0.055);
      color:var(--ink);
      border:1px solid var(--stroke2);
      border-radius:18px;
      padding:7px 12px;
      font-weight:900;
      letter-spacing:.6px;
      cursor:pointer;
      white-space:nowrap;
      transition: transform var(--t-fast) var(--ease-out), filter var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
    }
    .neutral:hover{ transform: translateY(-1px); filter:brightness(1.06); border-color: rgba(255,255,255,0.16); }
    .neutral:active{ transform: translateY(0) scale(.985); }

    /* --------- TOOLS MODAL --------- */
    .toolsBody{
      display:grid;
      grid-template-columns: minmax(0,1fr);
      gap:14px;
      padding:14px;
      min-height:0;
      min-width:0;
      flex:1;
      overflow:hidden;
    }
    .toolsNav{
      border:1px solid var(--stroke2);
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;

      border-radius: var(--r2);
      overflow:auto;
      min-height:0;
      background: rgba(255,255,255,0.03);
      padding:10px;
    }
    .toolsPane{
      border:1px solid var(--stroke2);
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;

      border-radius: var(--r2);
      overflow:auto;
      min-height:0;
      background: rgba(255,255,255,0.03);
      padding:10px;
    }
    .toolsPane h4{
      margin:4px 6px 10px;
      letter-spacing:.7px;
      text-transform:uppercase;
      font-size:12px;
      color:var(--muted);
    }

    .miniTable{
      width:100%;
      border-collapse:collapse;
      font-size:13px;
    }
    .miniTable th, .miniTable td{
      padding:10px 10px;
      border-bottom:1px solid #ffffff10;
      vertical-align:middle;
    }
    .miniTable th{
      color:var(--muted);
      font-size:11px;
      letter-spacing:.7px;
      text-transform:uppercase;
      text-align:left;
    }
    .miniInput{
      width:140px;
      max-width:100%;
      padding:9px 10px;
      border-radius: 12px;
      border:1px solid var(--stroke2);
      outline:none;
      background: rgba(255,255,255,0.04);
      color:var(--ink);
      box-shadow: inset 0 0 0 1px #ffffff08;
      font-size:14px;
      box-sizing:border-box;
    }
    .mono{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size:12.5px;
      line-height:1.2rem;
      white-space:pre-wrap;
      overflow-wrap:anywhere;
      padding:8px 10px;
      border-radius: 12px;
      border:1px solid var(--stroke2);
      background: rgba(0,0,0,0.25);
      margin:6px;
    }

    /* --------- Responsive --------- */
    @media (max-width: 1180px){
      .grid{ grid-template-columns: 240px minmax(0,1fr) 320px; }
      .top{ grid-template-columns: 1fr 1fr; }
      .top .brand{ grid-column: 1 / -1; }
    }
    @media (max-width: 760px){
      .navMeta{ padding-top:12px; }
    }
    @media (max-width: 980px){
      body{ overflow:auto; }
      .app{ height:auto; min-height:100vh; }
      .grid{ grid-template-columns: 1fr; }
      .nav{ order:1; }
      .main{ order:2; min-height:520px; }
      .side{ order:3; overflow:visible; }
      .modalBody{ grid-template-columns: 1fr; }
      .toolsBody{ grid-template-columns: 1fr; }
    }
  
    /* -----------------------
       Field Instrument Mode (mobile/tablet)
       - Desktop unchanged unless .field-device is active
       ----------------------- */
    .mobileBar{ display:none; }
    html.field-device body{ padding-bottom: calc(74px + env(safe-area-inset-bottom)); overflow:auto; } /* space for bottom bar */
    html.field-device body{ background-attachment: scroll; }
    html.field-device .app{ min-height: 100svh; height:auto; }
    html.field-device .top{ position:static; }
    html.field-device .main,
    html.field-device .side,
    html.field-device .nav{
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    html.field-device .main{ overflow: visible; }
    html.field-device .grid{
      grid-template-columns: 1fr !important;
    }
    html.field-device .side{
      padding-bottom: calc(74px + env(safe-area-inset-bottom));
      scroll-padding-bottom: calc(74px + env(safe-area-inset-bottom));
    }
    html.field-device .nav{ display:none !important; }
    html.field-device .main{ display:none !important; } /* removes chat on field devices */
    /* (vestigial) .right removed; right column is .side */
    html.field-device .card{ border-radius:18px; }
    html.field-device .mobileBar{
      display:flex;
      position:fixed;
      left:0; right:0;
      bottom:0;
      height:64px;
      padding:10px 12px calc(10px + env(safe-area-inset-bottom));
      gap:10px;
      background: linear-gradient(180deg, rgba(7,10,18,0.35), rgba(7,10,18,0.92));
      border-top:1px solid #ffffff12;
      backdrop-filter: blur(10px);
      z-index:9999;
    }
    html.field-device .mobileBar button{
      flex:1;
      border-radius:18px;
      border:1px solid #ffffff20;
      background: linear-gradient(180deg, #0c1223, #09101d);
      color: var(--ink);
      font-weight:900;
      letter-spacing:.8px;
      text-transform:uppercase;
      box-shadow: 0 10px 24px rgba(0,0,0,0.35), inset 0 0 0 1px #ffffff10;
    }
    html.field-device .mobileBar button.active{
      border-color: rgba(18,161,148,0.65);
      box-shadow: 0 12px 28px rgba(18,161,148,0.10), inset 0 0 0 1px rgba(18,161,148,0.25);
    }
    html.field-device .mobileBar button:active{ transform: translateY(1px); }
    /* Field mode: remove Quick guidance facade and maximize tool content area */
    html.field-device #quickGuidanceCard{ display:none !important; }

    /* Field mode: Tools modal layout — horizontal tool chips, big pane below */
    html.field-device .toolsBody{
      grid-template-columns: 1fr !important;
      grid-template-rows: auto 1fr;
      gap:12px;
      overflow:hidden;
      min-height:0;
    }
    html.field-device .toolsNav{
      display:flex;
      flex-direction:row;
      gap:10px;
      overflow-x:auto;
      overflow-y:hidden;
      padding:10px;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
      border-radius: var(--r2);
      /* Critical: allow horizontal swipe scrolling on touch devices.
         Base .toolsNav uses touch-action: pan-y which blocks pan-x. */
      touch-action: pan-x;
      overscroll-behavior-x: contain;
    }
    html.field-device .toolsNav .btn{
      flex:0 0 auto;
      width:auto;
      min-width: 200px;
      scroll-snap-align: start;
    }
    html.field-device .toolsPane{
      padding:10px;
      min-height:0;
      overflow:auto;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
    }

    /* Field mode: robust scrolling for long histories (iOS/Android) */
    html.field-device .modalBackdrop{
      overflow:auto;
      -webkit-overflow-scrolling: touch;
      align-items:flex-start;
      justify-content:stretch;
      padding:12px 12px calc(86px + env(safe-area-inset-bottom));
    }
    html.field-device .modal{
      width:min(100%, 960px);
      max-height: calc(100svh - 24px - 74px - env(safe-area-inset-bottom));
      margin:0 auto;
    }





    /* --------- Navigation pages (UI-only) --------- */
    /* Default: show chat+composer, but hide the Lab Log form unless user is on LOG page (desktop).
       Field-device always shows the Lab Log card. */
    #labCard{ display:none; }
    #setupCard{ display:none; }
    #dashCard{ display:none; }

    html[data-page="log"] #labCard{ display:block; }
    html.field-device #labCard{ display:block; }

    /* TODAY page: hide chat + show today shell; log form stays hidden */
    html[data-page="dash"] #dashCard{ display:block; }
    html[data-page="dash"] #setupCard{ display:none; }
    html[data-page="dash"] #labCard{ display:none; }
    html.field-device[data-page="dash"] #labCard{ display:none; }

    /* SETUP page: same shell position as Today, but focused on first-run guidance */
    html[data-page="setup"] #setupCard{ display:block; }
    html[data-page="setup"] #dashCard{ display:none; }
    html[data-page="setup"] #labCard{ display:none; }

    /* LOG page: remove chat to reduce cognitive mixup (logging vs read-only reports). */
    html[data-page="log"] .main{ display:none; }
    html:not(.field-device)[data-page="log"] .side{ grid-column: 2 / -1; }

    /* Today and setup use the right-side operating surface. */
    html[data-page="dash"] .main{ display:none; }
    html:not(.field-device)[data-page="dash"] .side{ grid-column: 2 / -1; }
    html[data-page="setup"] .main{ display:none; }
    html:not(.field-device)[data-page="setup"] .side{ grid-column: 2 / -1; }

    /* INBOX page: main-only (email-like). */
    html[data-page="inbox"] .side{ display:none; }
    html:not(.field-device)[data-page="inbox"] .main{ grid-column: 2 / -1; }
    /* Root-cause fix: inbox was still inheriting the generic opaque .main shell,
       which painted the full page as a blue slab underneath the real inbox panes.
       Inbox should use the scene background, like Logs, and let only its own
       list/detail cards provide glass chrome. */
    html[data-page="inbox"] .main{
      background: transparent;
      border-color: transparent;
      box-shadow: none;
    }
    html[data-page="inbox"] .inboxList,
    html[data-page="inbox"] .inboxDetail{
      background:
        linear-gradient(180deg, rgba(255,255,255,0.034), rgba(255,255,255,0.012)),
        rgba(7,12,22,0.10);
      border-color: rgba(255,255,255,0.08);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.045),
        0 10px 22px rgba(0,0,0,0.12);
    }

    /* Field-device: allow Inbox to render (main is normally hidden in field mode) */
    html.field-device[data-page="inbox"] .main{ display:block !important; }

    /* Field mode: single-column forms for touch entry */
    html.field-device .formGrid{ grid-template-columns: 1fr !important; }

    /* --------- Dashboard (UI-only) --------- */
    #dashCard{
      padding:16px;
    }
    #dashCard .dashHead{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:16px;
      margin-bottom:16px;
      padding-bottom:8px;
    }
    #dashCard .dashHeadMain{
      min-width:0;
      display:flex;
      flex-direction:column;
      gap:4px;
    }
    #dashCard .dashTitle{
      font-weight:900;
      font-size:20px;
      letter-spacing:.01em;
      line-height:1.08;
      color: rgba(242,247,255,0.97);
      display:-webkit-box;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:1;
      overflow:hidden;
    }
    #dashCard .dashSubtitle{
      max-width:72ch;
      font-size:12px;
      line-height:1.35;
      letter-spacing:.06em;
      color: rgba(222,233,248,0.72);
      text-transform:uppercase;
      display:-webkit-box;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:2;
      overflow:hidden;
    }
    #dashCard .dashUpdated{
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:.9px;
      color: rgba(234,242,255,0.72);
      white-space:nowrap;
      padding-top:3px;
    }

    #dashCard .dashSensors{
      display:grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap:16px;
      margin-bottom:16px;
    }
    @media (max-width: 980px){
      #dashCard .dashSensors{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 620px){
      #dashCard .dashSensors{ grid-template-columns: 1fr; }
      #dashCard .dashHead{ flex-direction:column; }
    }
    #dashCard .dashSensor{
      border:1px solid var(--stroke2);
      border-radius: 18px;
      padding:18px 18px 16px;
      background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
      backdrop-filter: blur(12px) saturate(120%);
      -webkit-backdrop-filter: blur(12px) saturate(120%);
      min-height: 138px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    #dashCard .dashSensorTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom:14px;
    }
    #dashCard .dashSensorLabel{
      font-weight:950;
      letter-spacing:.9px;
      text-transform:uppercase;
      font-size:12px;
      color: rgba(234,242,255,0.78);
    }
    #dashCard .dashStatusDot{
      width:10px;
      height:10px;
      border-radius:999px;
      background: rgba(255,196,77,0.92);
      box-shadow: 0 0 0 3px rgba(255,196,77,0.12);
      flex:0 0 auto;
    }
    #dashCard .dashSensorValue{
      font-weight:950;
      font-size:34px;
      line-height:1;
      letter-spacing:-.02em;
      margin-bottom:10px;
      white-space:nowrap;
    }
    #dashCard .dashUnit{
      font-size:13px;
      font-weight:900;
      color: rgba(234,242,255,0.72);
      margin-left:3px;
    }
    #dashCard .dashSensorMeta{
      display:flex;
      justify-content:space-between;
      font-size:11px;
      color: var(--muted);
      text-transform:lowercase;
      gap:8px;
    }

    #dashCard .dashLower{
      display:grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
      grid-template-areas:
        "actions inbox"
        "groups groups";
      gap:16px;
      align-items:start;
    }
    #dashCard .dashLower > .dashPanel:nth-child(1){ grid-area: actions; }
    #dashCard .dashLower > .dashPanel:nth-child(2){ grid-area: inbox; }
    #dashCard .dashLower > .dashPanel:nth-child(3){ grid-area: groups; }
    @media (max-width: 980px){
      #dashCard .dashLower{
        grid-template-columns: 1fr;
        grid-template-areas:
          "actions"
          "inbox"
          "groups";
      }
    }
    #dashCard .dashPanel{
      border:1px solid var(--stroke2);
      border-radius: 20px;
      padding:14px;
      background: rgba(255,255,255,0.03);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
      backdrop-filter: blur(14px) saturate(125%);
      -webkit-backdrop-filter: blur(14px) saturate(125%);
    }
    #dashCard .dashPanelTitle{
      font-weight:950;
      letter-spacing:.9px;
      text-transform:uppercase;
      font-size:12px;
      color: rgba(234,242,255,0.78);
    }
    #dashCard .dashPanelSub{
      margin-top:4px;
      margin-bottom:12px;
      font-size:11px;
      color: var(--muted);
    }

    #dashCard .dashActions{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:14px;
    }
    @media (max-width: 620px){
      #dashCard .dashActions{ grid-template-columns: 1fr; }
    }
    #dashCard .dashActionBtn{
      min-height:84px;
      border-radius:16px;
      padding:16px 14px;
      border:1px solid var(--stroke2);
      background: rgba(255,255,255,0.04);
      color: var(--ink);
      font-weight:950;
      letter-spacing:.2px;
      cursor:pointer;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
      transition: transform var(--t-fast) var(--ease-out), filter var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
      text-align:left;
    }
    #dashCard .dashActionBtn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
    #dashCard .dashActionBtn:active{ transform: translateY(0px) scale(0.99); }
    #dashCard .dashActionPrimary{
      background: var(--g-accent);
      color:#07101b;
      border-color: rgba(255,255,255,0.10);
      box-shadow: 0 10px 22px rgba(38, 63, 92, 0.22), inset 0 1px 0 rgba(255,255,255,0.10);
    }
    #dashCard .dashActionWrap{
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    #dashCard .dashActionMain{
      font-size:16px;
      line-height:1.1;
    }
    #dashCard .dashActionSub{
      font-size:12px;
      line-height:1.25;
      color: inherit;
      opacity:.78;
    }

    #dashCard .dashInboxRows{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    #dashCard .dashInboxRow{
      width:100%;
      min-height:72px;
      text-align:left;
      border:1px solid rgba(255,255,255,0.10);
      border-radius: 14px;
      padding:12px 12px;
      background: rgba(0,0,0,0.12);
      color: var(--text);
      cursor:pointer;
      transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
    }
    #dashCard .dashInboxRow:hover:not(:disabled){
      background: rgba(255,255,255,0.04);
      border-color: rgba(255,255,255,0.16);
      transform: translateY(-1px);
    }
    #dashCard .dashInboxRow:disabled{
      opacity: 0.62;
      cursor: default;
    }
    #dashCard .dashInboxRow.unread{
      border-color: rgba(255,196,77,0.30);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    }
    #dashCard .dashInboxRowTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom:6px;
      gap:8px;
    }
    #dashCard .dashInboxTag{
      font-weight:950;
      letter-spacing:.6px;
      text-transform:uppercase;
      font-size:10px;
      color: rgba(234,242,255,0.80);
    }
    #dashCard .dashInboxTs{
      font-size:10px;
      color: var(--muted);
      white-space:nowrap;
    }
    #dashCard .dashInboxTitle{
      font-weight:950;
      font-size:12px;
      letter-spacing:.2px;
      margin-bottom:4px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    #dashCard .dashInboxSnippet{
      font-size:11px;
      color: var(--muted);
      line-height:1.25;
      overflow:hidden;
      display:-webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    #dashCard .dashPgGrid{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap:12px;
    }
    #dashCard .dashPgCard{
      border:1px solid rgba(255,255,255,0.08);
      border-radius:16px;
      padding:14px;
      background: rgba(255,255,255,0.02);
      display:grid;
      gap:12px;
      min-height:136px;
    }
    #dashCard .dashPgHeader{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
    }
    #dashCard .dashPgName{
      font-weight:900;
      font-size:15px;
      line-height:1.15;
      color: rgba(242,247,255,0.97);
    }
    #dashCard .dashPgPill{
      border:1px solid rgba(255,255,255,0.10);
      border-radius:999px;
      padding:5px 9px;
      font-size:10px;
      line-height:1;
      font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
      color: rgba(234,242,255,0.78);
      white-space:nowrap;
    }
    #dashCard .dashPgStats{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:10px 12px;
    }
    #dashCard .dashPgStat{
      min-width:0;
    }
    #dashCard .dashPgKey{
      display:block;
      font-size:10px;
      line-height:1.1;
      letter-spacing:.08em;
      text-transform:uppercase;
      color: var(--muted);
      margin-bottom:4px;
    }
    #dashCard .dashPgVal{
      display:block;
      font-size:13px;
      line-height:1.2;
      font-weight:850;
      color: rgba(242,247,255,0.92);
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    #dashCard .dashEmpty{
      color: var(--muted);
      text-align:center;
      padding:18px 10px;
      border:1px dashed rgba(255,255,255,0.10);
      border-radius:16px;
      grid-column:1 / -1;
    }

    /* Oracle protocol guide */
    .oracleGuide{
      margin-top:12px;
      border:1px solid var(--stroke2);
      border-radius: var(--r2);
      padding:10px 12px;
      background: rgba(255,255,255,0.03);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    }
    .oracleGuide summary{
      cursor:pointer;
      user-select:none;
      font-weight:950;
      letter-spacing:.8px;
      text-transform:uppercase;
      font-size:12px;
      color: var(--muted);
      outline:none;
    }
    .oracleGuide[open] summary{ color: rgba(234,242,255,0.92); }


/* --- UI overhaul: tools launcher + segmented + structured metrics --- */
.toolsPaneTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:2px 2px 8px;
}
.toolsPaneTitleStack h4{
  margin:0;
}
#toolsPaneHint{ display:none; }
.toolsLauncher{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
  margin:10px 0 14px;
}
@media (max-width: 720px){
  .toolsLauncher{ grid-template-columns: 1fr; }
}
.toolTile{
  border:1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.10));
  border-radius: 14px;
  padding:12px 12px;
  text-align:left;
  cursor:pointer;
}
.toolTile:hover{
  border-color: rgba(255,255,255,0.20);
  transform: translateY(-1px);
}
.toolTile:active{ transform: translateY(0px); }
.ttTitle{ font-weight:700; letter-spacing:0.3px; }
.ttSub{ opacity:0.70; font-size:12px; margin-top:2px; }

.segmented{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:6px;
}
.segBtn{
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.14);
  color: rgba(255,255,255,0.86);
  padding:8px 10px;
  border-radius: 999px;
  cursor:pointer;
  font-size:12px;
}
.segBtn.active{
  border-color: rgba(146, 227, 255, 0.55);
  box-shadow: 0 0 0 2px rgba(146, 227, 255, 0.12) inset;
}

.metricsCards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-top:12px;
  margin-bottom:10px;
}
@media (max-width: 900px){
  .metricsCards{ grid-template-columns: 1fr; }
}
.mCard{
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.10);
  border-radius: 14px;
  padding:12px 12px;
}
.mCard h5{
  margin:0 0 8px 0;
  font-size:13px;
  letter-spacing:0.3px;
}
.kv{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap:6px 10px;
  font-size:12px;
}
.kv .k{ opacity:0.70; }
.kv .v{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

details.metricsRaw{
  margin-top:10px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  background: rgba(0,0,0,0.08);
  padding:10px 10px;
}
details.metricsRaw > summary{
  cursor:pointer;
  font-weight:600;
  opacity:0.90;
}

/* --- UI Overhaul: modal centering + field dropup + sticky lab actions --- */
.modalBackdrop{
  align-items: center;
  justify-content: center;
}
.modal{
  max-height: calc(100vh - 24px);
}
.labActions{
  /* Do NOT use sticky/fixed here: on tablets the side column is a scroll container,
     and sticky-bottom overlays inputs (Chrome/Android especially). */
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
  padding: 0;
  margin-top: 12px;
  background: transparent;
  border: none;
  backdrop-filter: none;
}

.entryHint{
  margin: 8px 0 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  background: rgba(0,0,0,0.25);
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  line-height: 1.35;
}
.mobileDropup{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 58px; /* above mobileBar */
  display: none;
  padding: 10px;
  z-index: 60;
}
.mobileDropupPanel{
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
}
.mobileDropupPanel button{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.mobileDropupPanel button:active{
  transform: translateY(1px);
}


/* Header user badge slot */
#headerUserBadgeSlot{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  min-width:0;
}


.navMeta{
  margin-top:auto;
  padding:14px 8px 4px;
  display:grid;
  gap:4px;
}
.navMeta small{
  color: rgba(234,242,255,0.34);
  letter-spacing:.5px;
  text-transform:uppercase;
  line-height:1.2;
}


/* Lab actions sizing (non-overlapping) */
.labActions button{
  flex: 1 1 220px;
  min-width: 0;
}
html.field-device .labActions{
  flex-direction: column;
}
html.field-device .labActions button{
  width: 100%;
  flex: 0 0 auto;
}




/* Plant Groups pane: compact controls + table columns */
#panePlantGroups .pgHero{
  display:grid;
  gap:10px;
  margin: 0 0 12px;
}
#panePlantGroups .pgSummaryBar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
#panePlantGroups .pgSummaryChip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)),
    rgba(6,10,18,0.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
#panePlantGroups .pgSummaryChip strong{
  font-size: 14px;
  font-weight: 950;
  letter-spacing: 0.02em;
  color: var(--ink);
}
#panePlantGroups .pgSummaryChip span:last-child{
  color: var(--muted);
  font-size: 12px;
  line-height: 1.1;
}

#panePlantGroups .pgControls{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin: 0 0 14px;
  padding: 12px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02)),
    rgba(6,10,18,0.46);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 10px 24px rgba(0,0,0,0.18);
}
#panePlantGroups .pgSearchWrap{ flex: 1 1 360px; min-width: 240px; }
#panePlantGroups .pgSearchWrap input{ width: 100%; }
#panePlantGroups .pgStatusWrap{ flex: 0 0 180px; }
#panePlantGroups .pgStatusWrap select{ width: 100%; }
#panePlantGroups .pgAddWrap{ flex: 0 0 auto; margin-left: auto; }
#panePlantGroups .pgAddWrap button{ white-space: nowrap; min-height: 42px; padding-inline: 16px; }

/* match core glass inputs without needing .field wrappers */
#panePlantGroups .pgControls input,
#panePlantGroups .pgControls select{
  min-height: 42px;
  padding:10px 14px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,0.08);
  outline:none;
  background: rgba(255,255,255,0.035);
  color:var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  font-size:14px;
  min-width:0;
  transition:
    border-color var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out),
    filter var(--t-fast) var(--ease-out),
    background var(--t-fast) var(--ease-out);
}
#panePlantGroups .pgControls input::placeholder{ color: rgba(255,255,255,0.55); }
#panePlantGroups .pgControls input:hover,
#panePlantGroups .pgControls select:hover{
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
}
#panePlantGroups .pgControls input:focus-visible,
#panePlantGroups .pgControls select:focus-visible{
  border-color: rgba(71,215,255,0.40);
  box-shadow:
    0 0 0 2px var(--focus),
    0 0 0 4px var(--focus2),
    inset 0 1px 0 rgba(255,255,255,0.07);
}

#panePlantGroups .pgTableShell{
  border-radius: 20px;
  border:1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.016)),
    rgba(6,10,18,0.50);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 18px 42px rgba(0,0,0,0.22);
  overflow:hidden;
}
#panePlantGroups .pgTableWrap{
  overflow-x:auto;
  padding: 8px 10px 12px;
}
#panePlantGroups .pgTable{
  width:100%;
  min-width: 980px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 10px;
}
#panePlantGroups .pgTable thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  text-align:left;
  font-size:11px;
  letter-spacing:.7px;
  text-transform:uppercase;
  color: rgba(226,236,248,0.76);
  padding: 0 12px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: transparent;
}
#panePlantGroups .pgTable tbody td{
  padding: 12px;
  vertical-align: middle;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)),
    rgba(255,255,255,0.012);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
#panePlantGroups .pgTable tbody tr td:first-child{
  border-left: 1px solid rgba(255,255,255,0.06);
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}
#panePlantGroups .pgTable tbody tr td:last-child{
  border-right: 1px solid rgba(255,255,255,0.06);
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}
#panePlantGroups .pgTable tbody tr{
  transition: transform var(--t-fast) var(--ease-out), filter var(--t-fast) var(--ease-out);
}
#panePlantGroups .pgTable tbody tr:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}
#panePlantGroups .pgTable tbody tr:hover td{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.024)),
    rgba(255,255,255,0.016);
}

#panePlantGroups .pgTable .pgColId{ width: 92px; }
#panePlantGroups .pgTable .pgColPlants{ width: 86px; }
#panePlantGroups .pgTable .pgColGenetics{ width: 270px; }
#panePlantGroups .pgTable .pgColStart{ width: 160px; }
#panePlantGroups .pgTable .pgColStatus{ width: 132px; }
#panePlantGroups .pgTable .pgColActions{ width: 176px; }

#panePlantGroups td.pgTdId,
#panePlantGroups td.pgTdName,
#panePlantGroups td.pgTdPlants,
#panePlantGroups td.pgTdGenetics,
#panePlantGroups td.pgTdStart,
#panePlantGroups td.pgTdStatus,
#panePlantGroups td.pgTdActions{
  overflow:hidden;
}
#panePlantGroups td.pgTdStatus,
#panePlantGroups td.pgTdStart{
  white-space: nowrap;
}
#panePlantGroups td.pgTdName,
#panePlantGroups td.pgTdGenetics{
  white-space: normal;
}
#panePlantGroups td.pgTdPlants{
  text-align: center;
  white-space: nowrap;
}
#panePlantGroups .pgIdBadge,
#panePlantGroups .pgCountBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 42px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
#panePlantGroups .pgIdBadge{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  letter-spacing: .03em;
}
#panePlantGroups .pgCountBadge{
  font-weight: 900;
  font-size: 14px;
}
#panePlantGroups .pgTextBlock{
  display:grid;
  gap:4px;
  min-width:0;
}
#panePlantGroups .pgTextPrimary{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight: 800;
  color: var(--ink);
}
#panePlantGroups .pgTdGenetics .pgTextPrimary{
  white-space: normal;
  line-height: 1.25;
}
#panePlantGroups .pgTextSecondary{
  display:block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#panePlantGroups .pgDateBlock{
  display:grid;
  gap:3px;
}
#panePlantGroups .pgDateMain{
  font-weight: 800;
  line-height: 1.1;
}
#panePlantGroups .pgDateSub{
  color: var(--muted);
  font-size: 12px;
  line-height: 1.1;
}
#panePlantGroups .pgTdActions{
  text-align: right;
}
#panePlantGroups .pgActionRow{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:nowrap;
}

/* action buttons: compact + not full-width (override old .btn defaults) */
#panePlantGroups .pgActionRow .btn,
#panePlantGroups .pgActionRow .neutral,
#panePlantGroups .pgActionRow .danger{
  width:auto;
  margin:0;
  padding:7px 12px;
  border-radius: 16px;
  min-height: 34px;
}
#panePlantGroups .pgActionRow .danger{ letter-spacing:.5px; }

/* status badge */
#panePlantGroups .pgBadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 11px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  font-weight:900;
  letter-spacing:.4px;
  font-size:12px;
  white-space:nowrap;
}
#panePlantGroups .pgBadge::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background: rgba(255,255,255,0.40);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.25);
}
#panePlantGroups .pgBadge.active{ border-color: rgba(71,215,255,0.22); background: rgba(71,215,255,0.08); }
#panePlantGroups .pgBadge.active::before{ background: rgba(71,215,255,0.90); }
#panePlantGroups .pgBadge.post_processing{ border-color: rgba(255,197,111,0.20); background: rgba(255,197,111,0.08); }
#panePlantGroups .pgBadge.post_processing::before{ background: rgba(255,197,111,0.95); }
#panePlantGroups .pgBadge.archived{ opacity:0.78; }
#panePlantGroups .pgRow[data-status="active"] .pgIdBadge{ border-color: rgba(71,215,255,0.18); }
#panePlantGroups .pgRow[data-status="post_processing"] .pgIdBadge{ border-color: rgba(255,197,111,0.18); }
#panePlantGroups .pgRow[data-status="archived"] .pgIdBadge{ border-color: rgba(255,255,255,0.08); opacity: .84; }
#panePlantGroups .pgEmptyState{
  padding: 28px 18px !important;
  text-align:center;
  border-radius: 18px !important;
}
#panePlantGroups .pgEmptyStateInner{
  display:grid;
  gap:6px;
  justify-items:center;
}
#panePlantGroups .pgEmptyStateInner strong{
  font-size: 15px;
  letter-spacing: .02em;
}
#panePlantGroups .pgEmptyStateInner span{
  color: var(--muted);
  font-size: 12px;
  max-width: 46ch;
}

@media (max-width: 960px){
  #panePlantGroups .pgAddWrap{ margin-left: 0; }
  #panePlantGroups .pgStatusWrap{ flex: 1 1 180px; }
  #panePlantGroups .pgControls{ padding: 10px; }
  #panePlantGroups .pgSummaryChip{ min-height: 34px; }
}


/* Plant History pane: match active table polish */
#panePlantHistory .phHero{
  display:grid;
  gap:10px;
  margin: 2px 0 12px;
}
#panePlantHistory .phIntro{ margin: 0; padding: 0; max-width: 92ch; }
#panePlantHistory .phSummaryBar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
#panePlantHistory .phSummaryChip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)),
    rgba(6,10,18,0.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
#panePlantHistory .phSummaryChip strong{
  font-size: 14px;
  font-weight: 950;
  letter-spacing: 0.02em;
  color: var(--ink);
}
#panePlantHistory .phSummaryChip span:last-child{
  color: var(--muted);
  font-size: 12px;
  line-height: 1.1;
}

#panePlantHistory .phControls{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin: 0 0 14px;
  padding: 12px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02)),
    rgba(6,10,18,0.46);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 10px 24px rgba(0,0,0,0.18);
}
#panePlantHistory .phSearchWrap{ flex: 1 1 360px; min-width: 240px; }
#panePlantHistory .phSearchWrap input{ width: 100%; }
#panePlantHistory .phStatusWrap{ flex: 0 0 180px; }
#panePlantHistory .phStatusWrap select{ width: 100%; }
#panePlantHistory .phControls input,
#panePlantHistory .phControls select{
  min-height: 42px;
  padding:10px 14px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,0.08);
  outline:none;
  background: rgba(255,255,255,0.035);
  color:var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  font-size:14px;
  min-width:0;
  transition:
    border-color var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out),
    filter var(--t-fast) var(--ease-out),
    background var(--t-fast) var(--ease-out);
}
#panePlantHistory .phControls input::placeholder{ color: rgba(255,255,255,0.55); }
#panePlantHistory .phControls input:hover,
#panePlantHistory .phControls select:hover{
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
}
#panePlantHistory .phControls input:focus-visible,
#panePlantHistory .phControls select:focus-visible,
#panePlantHistory .phRow:focus-visible{
  border-color: rgba(71,215,255,0.40);
  box-shadow:
    0 0 0 2px var(--focus),
    0 0 0 4px var(--focus2),
    inset 0 1px 0 rgba(255,255,255,0.07);
}

#panePlantHistory .phTableShell,
#panePlantHistory .phDetailCard{
  border-radius: 20px;
  border:1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.016)),
    rgba(6,10,18,0.50);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 18px 42px rgba(0,0,0,0.22);
  overflow:hidden;
}
#panePlantHistory .phTableShell{ margin-bottom: 16px; }
#panePlantHistory .phTableWrap{
  overflow-x:auto;
  padding: 8px 10px 12px;
}
#panePlantHistory .phTable{
  width:100%;
  min-width: 900px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 10px;
}
#panePlantHistory .phTable thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  text-align:left;
  font-size:11px;
  letter-spacing:.7px;
  text-transform:uppercase;
  color: rgba(226,236,248,0.76);
  padding: 0 12px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: transparent;
}
#panePlantHistory .phTable tbody td{
  padding: 12px;
  vertical-align: middle;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)),
    rgba(255,255,255,0.012);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
#panePlantHistory .phTable tbody tr td:first-child{
  border-left: 1px solid rgba(255,255,255,0.06);
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}
#panePlantHistory .phTable tbody tr td:last-child{
  border-right: 1px solid rgba(255,255,255,0.06);
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}
#panePlantHistory .phTable tbody tr{
  cursor:pointer;
  transition: transform var(--t-fast) var(--ease-out), filter var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
#panePlantHistory .phTable tbody tr:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}
#panePlantHistory .phTable tbody tr:hover td{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.024)),
    rgba(255,255,255,0.016);
}
#panePlantHistory .phTable tbody tr.is-selected td{
  background:
    linear-gradient(180deg, rgba(71,215,255,0.11), rgba(71,215,255,0.035)),
    rgba(255,255,255,0.02);
  border-top-color: rgba(71,215,255,0.22);
  border-bottom-color: rgba(71,215,255,0.18);
}
#panePlantHistory .phTable tbody tr.is-selected td:first-child{ border-left-color: rgba(71,215,255,0.22); }
#panePlantHistory .phTable tbody tr.is-selected td:last-child{ border-right-color: rgba(71,215,255,0.22); }

#panePlantHistory .phTable .phColId{ width: 92px; }
#panePlantHistory .phTable .phColPlants{ width: 86px; }
#panePlantHistory .phTable .phColGenetics{ width: 280px; }
#panePlantHistory .phTable .phColStart{ width: 160px; }
#panePlantHistory .phTable .phColStatus{ width: 132px; }

#panePlantHistory td.phTdId,
#panePlantHistory td.phTdName,
#panePlantHistory td.phTdPlants,
#panePlantHistory td.phTdGenetics,
#panePlantHistory td.phTdStart,
#panePlantHistory td.phTdStatus{
  overflow:hidden;
}
#panePlantHistory td.phTdPlants{
  text-align:center;
  white-space:nowrap;
}
#panePlantHistory td.phTdStart,
#panePlantHistory td.phTdStatus{
  white-space:nowrap;
}
#panePlantHistory .phIdBadge,
#panePlantHistory .phCountBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 42px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
#panePlantHistory .phIdBadge{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  letter-spacing: .03em;
}
#panePlantHistory .phCountBadge{
  font-weight: 900;
  font-size: 14px;
}
#panePlantHistory .phTextBlock{
  display:grid;
  gap:4px;
  min-width:0;
}
#panePlantHistory .phTextPrimary{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight: 800;
  color: var(--ink);
}
#panePlantHistory .phTdGenetics .phTextPrimary{ white-space: normal; line-height: 1.25; }
#panePlantHistory .phTextSecondary{
  display:block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#panePlantHistory .phDateBlock,
#panePlantHistory .phStamp{
  display:grid;
  gap:3px;
}
#panePlantHistory .phDateMain,
#panePlantHistory .phStampDate{
  font-weight: 800;
  line-height: 1.1;
}
#panePlantHistory .phDateSub,
#panePlantHistory .phStampTime{
  color: var(--muted);
  font-size: 12px;
  line-height: 1.1;
}
#panePlantHistory .phBadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 11px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  font-weight:900;
  letter-spacing:.4px;
  font-size:12px;
  white-space:nowrap;
}
#panePlantHistory .phBadge::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background: rgba(255,255,255,0.40);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.25);
}
#panePlantHistory .phBadge.active{ border-color: rgba(71,215,255,0.22); background: rgba(71,215,255,0.08); }
#panePlantHistory .phBadge.active::before{ background: rgba(71,215,255,0.90); }
#panePlantHistory .phBadge.post_processing{ border-color: rgba(255,197,111,0.20); background: rgba(255,197,111,0.08); }
#panePlantHistory .phBadge.post_processing::before{ background: rgba(255,197,111,0.95); }
#panePlantHistory .phBadge.archived{ opacity:0.78; }
#panePlantHistory .phRow[data-status="active"] .phIdBadge{ border-color: rgba(71,215,255,0.18); }
#panePlantHistory .phRow[data-status="post_processing"] .phIdBadge{ border-color: rgba(255,197,111,0.18); }
#panePlantHistory .phRow[data-status="archived"] .phIdBadge{ border-color: rgba(255,255,255,0.08); opacity: .84; }
#panePlantHistory .phEmptyState{
  padding: 28px 18px !important;
  text-align:center;
  border-radius: 18px !important;
}
#panePlantHistory .phEmptyStateInner{
  display:grid;
  gap:6px;
  justify-items:center;
}
#panePlantHistory .phEmptyStateInner strong{
  font-size: 15px;
  letter-spacing: .02em;
}
#panePlantHistory .phEmptyStateInner span{
  color: var(--muted);
  font-size: 12px;
  max-width: 42ch;
}

#panePlantHistory .phDetailCard{ padding: 14px; }
#panePlantHistory .phDetailHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom: 14px;
}
#panePlantHistory .phDetailHead h4{ margin:0 0 4px; }
#panePlantHistory .phDetailHeadCopy{ min-width: 260px; }
#panePlantHistory .phActionRow{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}
#panePlantHistory .phActionRow .neutral,
#panePlantHistory .phActionRow .btn,
#panePlantHistory .phActionRow .danger{
  width:auto;
  margin:0;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 16px;
}
#panePlantHistory .phMetaWrap{
  display:grid;
  gap:14px;
}
#panePlantHistory .phMetaEmpty{
  padding: 18px;
  border-radius: 16px;
  border:1px dashed rgba(255,255,255,0.10);
  color: var(--muted);
  background: rgba(255,255,255,0.02);
}
#panePlantHistory .phMetricGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
}
#panePlantHistory .phMetric{
  display:grid;
  gap:4px;
  padding: 12px 14px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
    rgba(10,16,28,0.48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
#panePlantHistory .phMetric span{
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
#panePlantHistory .phMetric strong{
  font-size: 16px;
  font-weight: 900;
  line-height: 1.15;
}
#panePlantHistory .phMetaGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}
#panePlantHistory .phMetaCard{
  display:grid;
  gap:12px;
  padding: 14px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)),
    rgba(9,14,24,0.46);
}
#panePlantHistory .phMetaCard--full{ grid-column: 1 / -1; }
#panePlantHistory .phMetaCard h5{
  margin:0;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(226,236,248,0.76);
}
#panePlantHistory .phFieldGrid{
  display:grid;
  gap:10px;
}
#panePlantHistory .phField{
  display:grid;
  gap:4px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
#panePlantHistory .phField:last-child{ border-bottom: 0; padding-bottom: 0; }
#panePlantHistory .phFieldLabel{
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
#panePlantHistory .phFieldValue{
  font-weight: 700;
  line-height: 1.3;
}
#panePlantHistory .phField--stamp{
  grid-template-columns: minmax(110px, 130px) minmax(0, 1fr);
  align-items:center;
  gap:10px;
}
#panePlantHistory .phField--stamp .phFieldLabel{ margin: 0; }
#panePlantHistory .phNote{
  white-space: pre-wrap;
  line-height: 1.45;
  color: var(--ink);
}
#panePlantHistory .phHistoryCard{
  margin-top: 14px;
  border-radius: 18px;
}
#panePlantHistory .phHistoryCard summary{
  font-weight: 800;
}
#panePlantHistory .phHistoryCard .mono{
  min-height: 88px;
}

@media (max-width: 960px){
  #panePlantHistory .phStatusWrap{ flex: 1 1 180px; }
  #panePlantHistory .phControls{ padding: 10px; }
  #panePlantHistory .phSummaryChip{ min-height: 34px; }
  #panePlantHistory .phMetricGrid,
  #panePlantHistory .phMetaGrid{ grid-template-columns: 1fr; }
}


/* Insights pane: mirror active/archive glass structure */
#paneMetrics .mxHero{
  display:grid;
  gap:10px;
  margin: 0 0 12px;
}
#paneMetrics .mxSummaryBar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
#paneMetrics .mxSummaryChip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:38px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)),
    rgba(6,10,18,0.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
#paneMetrics .mxSummaryChip strong{
  font-size:14px;
  font-weight:950;
  letter-spacing:0.02em;
  color:var(--ink);
}
#paneMetrics .mxSummaryChip span:last-child{
  color:var(--muted);
  font-size:12px;
  line-height:1.1;
}
#paneMetrics .mxControls,
#paneMetrics .mxCardsShell{
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.016)),
    rgba(6,10,18,0.50);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 18px 42px rgba(0,0,0,0.22);
}
#paneMetrics .mxControls{
  padding:14px;
  margin-bottom:16px;
}
#paneMetrics .mxCardsShell{
  padding:12px;
  margin-bottom:14px;
}
#paneMetrics .mxControls .field label{ color: rgba(226,236,248,0.76); }
#paneMetrics .mxControls .field input,
#paneMetrics .mxControls .field select{
  min-height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
#paneMetrics .mxControls .field input:hover,
#paneMetrics .mxControls .field select:hover{
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
}
#paneMetrics .mxControls .field input:focus-visible,
#paneMetrics .mxControls .field select:focus-visible{
  border-color: rgba(71,215,255,0.40);
  box-shadow: 0 0 0 2px var(--focus), 0 0 0 4px var(--focus2), inset 0 1px 0 rgba(255,255,255,0.07);
}
#paneMetrics .mxExtrasField{
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)),
    rgba(9,14,24,0.44);
}
#paneMetrics .mxExtrasGrid .field{ margin:0; }
#paneMetrics .mxRunField{ display:flex; justify-content:flex-end; }
#paneMetrics #metricsRunBtn{
  width:auto;
  min-width:220px;
  min-height:42px;
  border-radius:16px;
}
#paneMetrics .mxSegmented{ margin-top:8px; }
#paneMetrics .segBtn{
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  min-height:36px;
  padding:8px 12px;
}
#paneMetrics .segBtn.active{
  border-color: rgba(71,215,255,0.36);
  box-shadow: 0 0 0 2px rgba(71,215,255,0.12) inset;
  background: rgba(71,215,255,0.08);
}
#paneMetrics .metricsCards{ margin:0; gap:12px; }
#paneMetrics .mCard{
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
    rgba(9,14,24,0.48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  padding:14px;
}
#paneMetrics .mCard h5{
  margin:0 0 10px;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(226,236,248,0.82);
}
#paneMetrics .kv{
  grid-template-columns: minmax(120px, 150px) minmax(0, 1fr);
  gap:8px 12px;
  font-size:12px;
}
#paneMetrics .kv .k{
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size:11px;
}
#paneMetrics .kv .v{ font-size:12px; line-height:1.35; color: var(--ink); }
#paneMetrics .mxRawCard{
  margin-top:0;
  border-radius:20px;
  padding:12px 14px;
}
#paneMetrics .mxRawCard summary{ font-weight:800; }
#paneMetrics .mxRawCard .mono{ min-height:96px; }

/* Post-processing pane: same glass language as active/archive */
#panePostProcessing .ppHero{
  display:grid;
  gap:10px;
  margin:2px 0 12px;
}
#panePostProcessing .ppIntro{ margin:0; padding:0; max-width:92ch; }
#panePostProcessing .ppSummaryBar{ display:flex; flex-wrap:wrap; gap:10px; }
#panePostProcessing .ppSummaryChip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:38px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)),
    rgba(6,10,18,0.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
#panePostProcessing .ppSummaryChip strong{
  font-size:14px;
  font-weight:950;
  letter-spacing:0.02em;
  color:var(--ink);
}
#panePostProcessing .ppSummaryChip span:last-child{
  color:var(--muted);
  font-size:12px;
  line-height:1.1;
}
#panePostProcessing .ppControls,
#panePostProcessing .ppDetailCard,
#panePostProcessing .ppFormCard,
#panePostProcessing .ppTableShell{
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.016)),
    rgba(6,10,18,0.50);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 18px 42px rgba(0,0,0,0.22);
  overflow:hidden;
}
#panePostProcessing .ppControls{
  display:flex;
  gap:12px;
  align-items:end;
  flex-wrap:wrap;
  padding:14px;
  margin-bottom:16px;
}
#panePostProcessing .ppGroupWrap{ flex:1 1 360px; min-width:240px; }
#panePostProcessing .ppDryWrap{ flex:0 0 180px; }
#panePostProcessing .ppControls select,
#panePostProcessing .ppControls input,
#panePostProcessing .ppFormCard input{
  min-height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
#panePostProcessing .ppControls select:hover,
#panePostProcessing .ppControls input:hover,
#panePostProcessing .ppFormCard input:hover{
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
}
#panePostProcessing .ppControls select:focus-visible,
#panePostProcessing .ppControls input:focus-visible,
#panePostProcessing .ppFormCard input:focus-visible{
  border-color: rgba(71,215,255,0.40);
  box-shadow: 0 0 0 2px var(--focus), 0 0 0 4px var(--focus2), inset 0 1px 0 rgba(255,255,255,0.07);
}
#panePostProcessing .ppDetailCard,
#panePostProcessing .ppFormCard,
#panePostProcessing .ppTableShell,
#panePostProcessing .ppHistoryCard{ margin-bottom:16px; }
#panePostProcessing .ppDetailCard,
#panePostProcessing .ppFormCard{ padding:14px; }
#panePostProcessing .ppDetailHead,
#panePostProcessing .ppFormHead,
#panePostProcessing .ppTableHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
#panePostProcessing .ppDetailHead h4,
#panePostProcessing .ppFormHead h4,
#panePostProcessing .ppTableHead h4{ margin:0 0 4px; }
#panePostProcessing .ppActionRow{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}
#panePostProcessing .ppActionRow .neutral,
#panePostProcessing .ppActionRow .btn,
#panePostProcessing .ppAddField .neutral{
  width:auto;
  margin:0;
  min-height:38px;
  padding:8px 14px;
  border-radius:16px;
}
#panePostProcessing .ppMetaWrap{ display:grid; gap:14px; }
#panePostProcessing .ppMetaEmpty{
  padding:18px;
  border-radius:16px;
  border:1px dashed rgba(255,255,255,0.10);
  color:var(--muted);
  background: rgba(255,255,255,0.02);
}
#panePostProcessing .ppMetricGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
}
#panePostProcessing .ppMetric{
  display:grid;
  gap:4px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
    rgba(10,16,28,0.48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
#panePostProcessing .ppMetric span{
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
#panePostProcessing .ppMetric strong{
  font-size:16px;
  font-weight:900;
  line-height:1.15;
}
#panePostProcessing .ppMetaGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}
#panePostProcessing .ppMetaCard{
  display:grid;
  gap:12px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)),
    rgba(9,14,24,0.46);
}
#panePostProcessing .ppMetaCard--full{ grid-column:1 / -1; }
#panePostProcessing .ppMetaCard h5{
  margin:0;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(226,236,248,0.76);
}
#panePostProcessing .ppFieldGrid{ display:grid; gap:10px; }
#panePostProcessing .ppField{
  display:grid;
  gap:4px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
#panePostProcessing .ppField:last-child{ border-bottom:0; padding-bottom:0; }
#panePostProcessing .ppFieldLabel{
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
#panePostProcessing .ppFieldValue{ font-weight:700; line-height:1.3; }
#panePostProcessing .ppField--stamp{
  grid-template-columns: minmax(110px, 130px) minmax(0, 1fr);
  align-items:center;
  gap:10px;
}
#panePostProcessing .ppStamp,
#panePostProcessing .ppDateBlock{ display:grid; gap:3px; }
#panePostProcessing .ppStampDate,
#panePostProcessing .ppDateMain{ font-weight:800; line-height:1.1; }
#panePostProcessing .ppStampTime,
#panePostProcessing .ppDateSub{ color:var(--muted); font-size:12px; line-height:1.1; }
#panePostProcessing .ppNote{ white-space:pre-wrap; line-height:1.45; color:var(--ink); }
#panePostProcessing .ppFormGrid{ gap:12px; }
#panePostProcessing .ppAddField{ display:flex; justify-content:flex-end; align-items:center; }
#panePostProcessing .ppTableWrap{
  overflow-x:auto;
  padding:8px 10px 12px;
}
#panePostProcessing .ppTable{
  width:100%;
  min-width:920px;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0 10px;
}
#panePostProcessing .ppTable .ppColTs{ width:180px; }
#panePostProcessing .ppTable .ppColAw,
#panePostProcessing .ppTable .ppColMoist,
#panePostProcessing .ppTable .ppColThc,
#panePostProcessing .ppTable .ppColCbd{ width:96px; }
#panePostProcessing .ppTable .ppColYield{ width:112px; }
#panePostProcessing .ppTable thead th{
  text-align:left;
  font-size:11px;
  letter-spacing:.7px;
  text-transform:uppercase;
  color: rgba(226,236,248,0.76);
  padding:0 12px 8px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  background:transparent;
}
#panePostProcessing .ppTable tbody td{
  padding:12px;
  vertical-align:middle;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)),
    rgba(255,255,255,0.012);
  border-top:1px solid rgba(255,255,255,0.06);
  border-bottom:1px solid rgba(255,255,255,0.05);
}
#panePostProcessing .ppTable tbody tr td:first-child{
  border-left:1px solid rgba(255,255,255,0.06);
  border-top-left-radius:16px;
  border-bottom-left-radius:16px;
}
#panePostProcessing .ppTable tbody tr td:last-child{
  border-right:1px solid rgba(255,255,255,0.06);
  border-top-right-radius:16px;
  border-bottom-right-radius:16px;
}
#panePostProcessing .ppTable tbody tr{
  transition: transform var(--t-fast) var(--ease-out), filter var(--t-fast) var(--ease-out);
}
#panePostProcessing .ppTable tbody tr:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
}
#panePostProcessing .ppTable tbody tr:hover td{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.024)),
    rgba(255,255,255,0.016);
}
#panePostProcessing .ppTdNum{ text-align:center; white-space:nowrap; font-weight:800; }
#panePostProcessing .ppTdNote{ white-space:normal; }
#panePostProcessing .ppTextPrimary{ display:block; line-height:1.3; }
#panePostProcessing .ppEmptyState{
  padding:28px 18px !important;
  text-align:center;
  border-radius:18px !important;
}
#panePostProcessing .ppEmptyStateInner{
  display:grid;
  gap:6px;
  justify-items:center;
}
#panePostProcessing .ppEmptyStateInner strong{ font-size:15px; letter-spacing:.02em; }
#panePostProcessing .ppEmptyStateInner span{ color:var(--muted); font-size:12px; max-width:42ch; }
#panePostProcessing .ppHistoryCard{ border-radius:20px; padding:12px 14px; }
#panePostProcessing .ppHistoryCard summary{ font-weight:800; }
#panePostProcessing .ppHistoryCard .mono{ min-height:88px; }

@media (max-width: 960px){
  #paneMetrics .mxRunField,
  #panePostProcessing .ppAddField{ justify-content:stretch; }
  #paneMetrics #metricsRunBtn,
  #panePostProcessing .ppAddField .neutral{ width:100%; min-width:0; }
  #panePostProcessing .ppDryWrap{ flex:1 1 180px; }
  #paneMetrics .mxSummaryChip,
  #panePostProcessing .ppSummaryChip{ min-height:34px; }
  #panePostProcessing .ppMetricGrid,
  #panePostProcessing .ppMetaGrid{ grid-template-columns:1fr; }
}


/* --------- INBOX (email-like) --------- */
.inbox{
  height: calc(100svh - 194px);
  min-height: 460px;
  display:flex;
  flex-direction: column;
  gap:14px;
}
.inboxHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
}
.inboxTitle{ font-weight:950; font-size:22px; letter-spacing:-0.02em; }
.inboxSubtitle{ color: var(--muted); font-size:13px; margin-top:3px; max-width:48ch; line-height:1.35; }
.inboxHeadRight{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.inboxBody{
  flex:1;
  display:grid;
  grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
  gap:14px;
  min-height: 0;
}
.inboxList, .inboxDetail{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.016)),
    rgba(10,18,34,0.18);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 22px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 12px 28px rgba(0,0,0,0.16);
}
.inboxList{ padding:10px; }
.inboxDetail{ padding:10px; }
.inboxEmpty{
  min-height: 180px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
  color: var(--muted);
  line-height:1.45;
}

.inboxRow{
  display:flex;
  gap:12px;
  padding:14px 14px;
  cursor:pointer;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  margin:0 0 10px;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.inboxRow:last-child{ margin-bottom:0; }
.inboxRow:hover{ background: rgba(255,255,255,0.055); border-color: rgba(255,255,255,0.11); transform: translateY(-1px); }
.inboxRow.active{ background: rgba(71,215,255,0.08); border-color: rgba(71,215,255,0.22); }
.inboxDot{
  width:11px; height:11px; border-radius:999px;
  margin-top:7px;
  background: rgba(255,255,255,0.22);
  flex: 0 0 auto;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.03);
}
.inboxRow.unread .inboxDot{ background: rgba(140, 210, 255, 0.98); }
.inboxRowMain{ flex:1; min-width:0; }
.inboxRowTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.inboxKindTag{
  font-size:11px;
  font-weight:800;
  padding:4px 10px;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(230,240,255,0.92);
}
.inboxTs{ color: var(--muted); font-size:11px; white-space:nowrap; }
.inboxSubject{ font-weight:850; font-size:17px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:6px; letter-spacing:-0.01em; }
.inboxSnippet{ color: var(--muted); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:5px; }

.inboxMsg{ padding:20px 20px; max-width: 960px; }
.inboxMsgHead{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.inboxMsgTitle{ font-weight:950; font-size:22px; line-height:1.15; letter-spacing:-0.02em; }
.inboxMsgMeta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.inboxMsgBody{ margin-top:14px; white-space:pre-wrap; line-height:1.6; font-size:14px; color: rgba(234,242,255,0.96); }
.inboxMsgBodyBrief{ white-space:normal; font-size:14px; line-height:1.55; }
.briefBody{ display:flex; flex-direction:column; gap:10px; }
.briefLead{ margin:0; color: rgba(246,250,255,0.98); font-size:15px; font-weight:700; letter-spacing:-0.01em; }
.briefMeta{ margin:-2px 0 2px; color: rgba(167,186,210,0.92); font-size:12px; font-style:italic; }
.briefGroup{ border:1px solid rgba(255,255,255,0.09); background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015)); border-radius:16px; padding:14px 14px 10px; }
.briefGroupHead{ font-size:16px; font-weight:900; letter-spacing:-0.02em; color: rgba(247,251,255,0.98); margin-bottom:8px; }
.briefRow{ margin:6px 0; }
.briefLabel{ display:inline-block; min-width:126px; margin-right:8px; font-weight:850; color: rgba(186,204,225,0.94); }
.briefValue{ color: rgba(236,243,252,0.97); }
.briefValue.is-good{ color: rgba(161,231,196,0.98); font-weight:700; }
.briefValue.is-warn{ color: rgba(255,210,144,0.98); font-weight:700; }
.briefValue.is-bad{ color: rgba(255,154,154,0.98); font-weight:800; }
.briefValue.is-muted{ color: rgba(169,184,203,0.94); font-style:italic; }
.briefSep{ color: rgba(122,145,171,0.86); }
.briefList{ margin:6px 0 2px 0; padding-left:18px; }
.briefList li{ margin:5px 0; color: rgba(238,243,251,0.97); }
.briefNote, .briefParagraph{ margin:5px 0; color: rgba(227,236,248,0.96); }
.inboxMsgActions{ margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; }
.inboxBackBtn{ display:none; }

/* Field mode: single-column list/detail swap instead of stacked mail + body */
html.field-device .inbox{ height:auto; min-height:0; gap:12px; }
html.field-device .inboxHead{ flex-direction:column; align-items:stretch; gap:12px; }
html.field-device .inboxHeadRight{ width:100%; justify-content:space-between; align-items:flex-start; gap:12px; }
html.field-device .inboxFilters{ display:flex; flex-wrap:wrap; gap:10px; }
html.field-device .inboxBody{ display:block; }
html.field-device .inboxList,
html.field-device .inboxDetail{
  border-radius: 20px;
  min-height: 0;
  max-height: none;
}
html.field-device .inboxDetail{ display:none; }
html.field-device .inbox.show-detail .inboxList{ display:none; }
html.field-device .inbox.show-detail .inboxDetail{ display:block; }
html.field-device .inboxTitle{ font-size: 18px; }
html.field-device .inboxSubtitle{ font-size: 12px; max-width:none; }
html.field-device .inboxRow{ padding:13px 12px; }
html.field-device .inboxSubject{ font-size:16px; white-space:normal; line-height:1.2; }
html.field-device .inboxSnippet{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
html.field-device .inboxMsg{ padding:16px 16px calc(96px + env(safe-area-inset-bottom)); }
html.field-device .inboxMsgHead{ flex-direction:column; align-items:flex-start; }
html.field-device .inboxMsgMeta{ justify-content:flex-start; }
html.field-device .inboxMsgTitle{ font-size:18px; }
html.field-device .inboxMsgActions{ padding-bottom:6px; }
html.field-device .briefGroup{ padding:12px 12px 8px; border-radius:14px; }
html.field-device .briefLabel{ min-width:0; display:block; margin:0 0 2px 0; }
html.field-device #inboxRefresh{ margin-left:auto; }
html.field-device .inboxBackBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: var(--ink);
  font-weight:900;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

/* Calendar: same operational glass family as the strongest tools */
#paneCalendar{
  display:grid;
  gap:14px;
}
#paneCalendar .calToolbarShell,
#paneCalendar .calGridShell,
#paneCalendar .calCard{
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.016)),
    rgba(6,10,18,0.50);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 18px 42px rgba(0,0,0,0.22);
}
#paneCalendar .calToolbarShell{
  padding:14px;
  display:grid;
  gap:12px;
}
#paneCalendar .calControls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
#paneCalendar .calNavCluster,
#paneCalendar .calActionsCluster{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
#paneCalendar .calMonth{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  font-size:15px;
  font-weight:950;
  letter-spacing:0.03em;
  color:var(--ink);
}
#paneCalendar #calStatus{
  min-width:176px;
  min-height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
#paneCalendar .calSummaryBar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
#paneCalendar .calSummaryChip{
  display:inline-grid;
  gap:2px;
  min-width:124px;
  min-height:58px;
  padding:10px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.028);
}
#paneCalendar .calSummaryChip strong,
#paneCalendar .calMetricPill strong{
  font-size:18px;
  font-weight:950;
  color:var(--ink);
  line-height:1.1;
}
#paneCalendar .calSummaryChip span,
#paneCalendar .calMetricPill span{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(226,236,248,0.74);
}
#paneCalendar .calLegend{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
#paneCalendar .calLegendChip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:30px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color:rgba(234,242,255,0.86);
}
#paneCalendar .calLegendChip b{
  font-size:10px;
  letter-spacing:.08em;
}
#paneCalendar .calLegendChip small{
  font-size:11px;
  color:rgba(226,236,248,0.68);
}
#paneCalendar .calLegendChip[data-kind="start"]{ border-color:rgba(255,255,255,0.11); }
#paneCalendar .calLegendChip[data-kind="flip"]{ border-color:rgba(201,170,255,0.18); }
#paneCalendar .calLegendChip[data-kind="formula"]{ border-color:rgba(140,210,255,0.24); }
#paneCalendar .calLegendChip[data-kind="harvest"]{ border-color:rgba(255,184,108,0.22); }
#paneCalendar .calLegendChip[data-kind="check"]{ border-color:rgba(108,232,164,0.24); }
#paneCalendar .calLegendChip[data-kind="message"]{ border-color:rgba(255,255,255,0.12); }
#paneCalendar .calLayout{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(320px,0.92fr);
  gap:14px;
  align-items:start;
}
#paneCalendar .calMain,
#paneCalendar .calSide{ min-width:0; }
#paneCalendar .calSide{
  display:flex;
  flex-direction:column;
  gap:12px;
}
#paneCalendar .calFocusCard{ position:sticky; top:12px; }
#paneCalendar .calCard{ padding:14px; display:grid; gap:12px; }
#paneCalendar .calCardHead{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}
#paneCalendar .calCardEyebrow,
#paneCalendar .calSectionTitle{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(226,236,248,0.74);
}
#paneCalendar .calCardHead h4{
  margin:4px 0 0;
  font-size:18px;
  font-weight:900;
  color:var(--ink);
}
#paneCalendar .calCardMeta{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(226,236,248,0.60);
  white-space:nowrap;
}
#paneCalendar .calFocusMetrics{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:8px;
}
#paneCalendar .calMetricPill{
  display:grid;
  gap:3px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}
#paneCalendar .calSectionStack{ display:grid; gap:12px; }
#paneCalendar .calSection{ display:grid; gap:8px; }
#paneCalendar .calDetailList{ display:grid; gap:8px; }
#paneCalendar .calDetailRow,
#paneCalendar .calAgendaItem{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.028);
}
#paneCalendar .calAgendaItem{
  width:100%;
  text-align:left;
  cursor:pointer;
  color:inherit;
}
#paneCalendar .calAgendaItem:hover,
#paneCalendar .calAgendaItem:focus-visible,
#paneCalendar .calDetailRow:hover{
  border-color:rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.045);
}
#paneCalendar .calAgendaItem[data-priority="0"]{ border-color:rgba(255,91,120,0.18); background:rgba(255,91,120,0.05); }
#paneCalendar .calAgendaItem[data-priority="1"]{ border-color:rgba(108,232,164,0.16); }
#paneCalendar .calAgendaDate,
#paneCalendar .calMiniTag,
#paneCalendar .calMiniPill{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(236,243,255,0.88);
  white-space:nowrap;
}
#paneCalendar .calMiniPill{ letter-spacing:.03em; text-transform:none; }
#paneCalendar .calMiniTag[data-kind="check"]{ border-color:rgba(108,232,164,0.22); background:rgba(108,232,164,0.08); }
#paneCalendar .calMiniTag[data-kind="formula"]{ border-color:rgba(140,210,255,0.22); background:rgba(140,210,255,0.08); }
#paneCalendar .calMiniTag[data-kind="flip"]{ border-color:rgba(201,170,255,0.22); background:rgba(201,170,255,0.08); }
#paneCalendar .calMiniTag[data-kind="harvest"]{ border-color:rgba(255,184,108,0.22); background:rgba(255,184,108,0.08); }
#paneCalendar .calMiniTag[data-kind="message"]{ border-color:rgba(255,255,255,0.12); background:rgba(255,255,255,0.05); }
#paneCalendar .calAgendaCopy,
#paneCalendar .calDetailCopy{
  min-width:0;
  display:grid;
  gap:3px;
}
#paneCalendar .calAgendaCopy strong,
#paneCalendar .calDetailCopy strong{
  font-size:13px;
  font-weight:850;
  color:var(--ink);
  line-height:1.25;
}
#paneCalendar .calAgendaCopy span,
#paneCalendar .calDetailCopy span{
  font-size:12px;
  line-height:1.35;
  color:var(--muted);
}
#paneCalendar .calDetailRowGroup{ justify-content:space-between; }
#paneCalendar .calEmptyState{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:16px;
  border-radius:16px;
  border:1px dashed rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  color:var(--muted);
}
#paneCalendar .calGridShell{ padding:12px; }
#paneCalendar .calGrid{
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.08);
  overflow:hidden;
  background: rgba(0,0,0,0.10);
}
#paneCalendar .calWeekHead{
  display:grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  background: rgba(255,255,255,0.045);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
#paneCalendar .calWeekHead div{
  padding:10px 12px;
  font-size:11px;
  color: rgba(230,240,255,0.70);
  letter-spacing:0.08em;
  text-transform:uppercase;
}
#paneCalendar .calWeeks{
  display:grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
}
#paneCalendar .calDay{
  appearance:none;
  min-height:118px;
  padding:10px 12px;
  border:none;
  border-right:1px solid rgba(255,255,255,0.06);
  border-bottom:1px solid rgba(255,255,255,0.06);
  cursor:pointer;
  background: rgba(0,0,0,0.10);
  text-align:left;
}
#paneCalendar .calDay:nth-child(7n){ border-right:none; }
#paneCalendar .calDay:hover,
#paneCalendar .calDay:focus-visible{ background: rgba(255,255,255,0.03); }
#paneCalendar .calDay.muted{ opacity:0.46; }
#paneCalendar .calDay.active{
  outline:2px solid rgba(140,210,255,0.55);
  outline-offset:-2px;
  background: rgba(140,210,255,0.06);
}
#paneCalendar .calDayNum{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:900;
  font-size:13px;
  color: rgba(230,240,255,0.88);
}
#paneCalendar .calBadges{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
#paneCalendar .calBadge{
  display:flex;
  align-items:center;
  gap:6px;
  min-height:26px;
  padding:0 8px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  font-size:11px;
  line-height:1.15;
}
#paneCalendar .calBadgeTag{
  flex:0 0 auto;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  color: rgba(230,240,255,0.70);
  white-space:nowrap;
}
#paneCalendar .calBadgeName{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:780;
  color:var(--ink);
}
#paneCalendar .calBadgeMore{ justify-content:center; }
#paneCalendar .calTodayDot{
  width:8px;
  height:8px;
  border-radius:999px;
  background: rgba(108,232,164,0.95);
  box-shadow: 0 0 0 3px rgba(108,232,164,0.15);
}
#paneCalendar .calDay.today{
  box-shadow: inset 0 0 0 1px rgba(108,232,164,0.55);
}
#paneCalendar .calBadge[data-kind="check"]{ background: rgba(108,232,164,0.08); }
#paneCalendar .calBadge[data-kind="formula"]{ background: rgba(140,210,255,0.08); }
#paneCalendar .calBadge[data-kind="flip"]{ background: rgba(201,170,255,0.08); }
#paneCalendar .calBadge[data-kind="harvest"]{ background: rgba(255,184,108,0.08); }
#paneCalendar .calBadge[data-kind="message"]{ background: rgba(255,255,255,0.05); }
@media (max-width: 1180px){
  #paneCalendar .calLayout{ grid-template-columns:1fr; }
  #paneCalendar .calFocusCard{ position:static; }
}
@media (max-width: 780px){
  #paneCalendar .calControls{ align-items:stretch; }
  #paneCalendar .calNavCluster,
  #paneCalendar .calActionsCluster{ width:100%; }
  #paneCalendar .calNavCluster > *,
  #paneCalendar .calActionsCluster > *{ flex:1 1 auto; }
  #paneCalendar .calFocusMetrics{ grid-template-columns:1fr; }
  #paneCalendar .calWeekHead div{ padding:8px 6px; font-size:10px; }
  #paneCalendar .calDay{ min-height:104px; padding:8px; }
  #paneCalendar .calBadge{ padding:0 6px; }
}



    .entryWizard{
      display:flex;
      flex-direction:column;
      gap:8px;
      margin-bottom:12px;
      padding:10px 12px;
      border:1px solid var(--stroke2);
      border-radius: var(--r2);
      background: rgba(255,255,255,0.03);
    }
    .entryWizard .mutedLine{ padding:0; }


/* Brand pill: force the same glass tone as the other header pills */
.pill.brand{
  padding-right:56px;
  border:1px solid var(--stroke);
  border-radius:18px;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(167,255,229,0.14), transparent 48%),
    radial-gradient(120% 140% at 15% 100%, rgba(92,188,255,0.08), transparent 54%),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  backdrop-filter: blur(12px) saturate(125%);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  box-shadow: var(--shadow2), inset 0 1px 0 rgba(255,255,255,0.07);
}


.pill.brand .settingsBtn,
.pill.brand .mailBtn{
  border:1px solid var(--stroke2);
  background: rgba(255,255,255,0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}


/* Dashboard action button redesign */
#dashboardActionCard .quickGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

#dashboardActionCard .quickBtn{
  min-height:64px;
  padding:0 20px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
    rgba(20,28,42,0.30);
  color:#eef4ff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 8px 18px rgba(0,0,0,0.14);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  transition:
    transform 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease,
    background 120ms ease;
}

#dashboardActionCard .quickBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 12px 22px rgba(0,0,0,0.18);
}

#dashboardActionCard .quickBtn:active{
  transform: translateY(0);
}

#dashboardActionCard .quickBtn.primary{
  border-color: rgba(162,231,255,0.22);
  background:
    linear-gradient(135deg,
      rgba(73,174,255,0.98) 0%,
      rgba(106,152,255,0.96) 38%,
      rgba(122,129,255,0.94) 62%,
      rgba(66,222,195,0.92) 100%);
  color:#06111f;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 12px 28px rgba(42,104,158,0.24);
}

#dashboardActionCard .quickBtn.primary:hover{
  border-color: rgba(190,240,255,0.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 16px 32px rgba(42,104,158,0.28);
}

#dashboardActionCard .quickBtn.secondary{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02)),
    rgba(28,38,58,0.42);
  color:#f0f5ff;
}

#dashboardActionCard .quickBtn .quickBtnWrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
}

#dashboardActionCard .quickBtn .quickBtnMain{
  font-size:15px;
  line-height:1.05;
  font-weight:800;
  letter-spacing:0.01em;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#dashboardActionCard .quickBtn.primary .quickBtnMain{
  color:#071220;
}

#dashboardActionCard .quickBtn .quickBtnSub{
  font-size:11px;
  line-height:1.1;
  font-weight:650;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color: rgba(228,238,252,0.72);
}

#dashboardActionCard .quickBtn.primary .quickBtnSub{
  color: rgba(7,18,32,0.72);
}

@media (max-width: 760px){
  #dashboardActionCard .quickGrid{
    grid-template-columns:1fr;
  }
  #dashboardActionCard .quickBtn{
    min-height:60px;
  }
}

#dashboardActionCard .sectionTitle{
  letter-spacing:0.03em;
}
#dashboardActionCard .sectionSubtitle{
  color: rgba(228,236,248,0.72);
}


/* Settings modal refresh */
.settingsPane{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:4px 2px 2px;
}

.settingsCard{
  border:1px solid rgba(255,255,255,0.10);
  border-radius:20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02)),
    rgba(10,18,34,0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 10px 26px rgba(0,0,0,0.14);
  padding:18px 18px 16px;
}

.settingsHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:8px;
}

.settingsHead h4{
  margin:0;
}

.settingsToggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  color:rgba(236,242,252,0.92);
}

.settingsToggle input{
  transform: translateY(1px);
}

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

.settingsGridTwo{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}

.settingsPane .field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.settingsPane .fieldHint{
  font-size:12px;
  line-height:1.45;
  color:rgba(223,232,245,0.72);
}

.settingsPane input[type="time"],
.settingsPane select{
  min-height:44px;
}

.settingsActions{
  display:flex;
  justify-content:flex-end;
  padding-top:4px;
}

.settingsActions .neutral{
  min-width:220px;
  min-height:46px;
  border-radius:16px;
}

@media (max-width: 880px){
  .settingsGridTwo{
    grid-template-columns:minmax(0,1fr);
  }
  .settingsHead{
    align-items:flex-start;
    flex-direction:column;
  }
  .settingsActions{
    justify-content:stretch;
  }
  .settingsActions .neutral{
    width:100%;
  }
}


/* Final actual dashboard action redesign */
#dashCard .dashActions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
#dashCard .dashActionBtn{
  min-height:58px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)),
    rgba(20,30,44,0.34);
  color:#eef4ff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 8px 20px rgba(0,0,0,0.14);
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  text-align:left;
  letter-spacing:0;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    border-color 120ms ease,
    background 120ms ease;
}
#dashCard .dashActionBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 12px 24px rgba(0,0,0,0.18);
  filter:none;
}
#dashCard .dashActionBtn:active{
  transform: translateY(0);
}
#dashCard .dashActionPrimary{
  border-color: rgba(132,201,255,0.24);
  background:
    linear-gradient(180deg, rgba(107,173,245,0.16), rgba(84,138,214,0.08)),
    rgba(20,34,52,0.42);
  color:#edf4ff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 10px 22px rgba(22,54,94,0.18);
}
#dashCard .dashActionPrimary:hover{
  border-color: rgba(160,215,255,0.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 12px 24px rgba(30,76,124,0.16);
}
#dashCard .dashActionSecondary{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02)),
    rgba(28,39,59,0.46);
  color:#f0f5ff;
}
#dashCard .dashActionWrap{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:3px;
}
#dashCard .dashActionMain{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:15px;
  line-height:1.16;
  font-weight:760;
  letter-spacing:0.005em;
  color:#f4f7ff;
}
#dashCard .dashActionPrimary .dashActionMain{
  color:#f5f8ff;
}
#dashCard .dashActionSub{
  font-size:10px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:0.015em;
  text-transform:none;
  color: rgba(214,225,242,0.68);
}
#dashCard .dashActionPrimary .dashActionSub{
  color: rgba(222,233,248,0.70);
}

/* Final actual settings modal fix */
.settingsModal{
  width:min(960px, calc(100vw - 48px));
  max-width:960px;
}
.settingsBody{
  padding-top:18px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  min-height:0;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}
.settingsPane{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.settingsCard{
  border:1px solid rgba(255,255,255,0.10);
  border-radius:20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02)),
    rgba(10,18,34,0.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 10px 24px rgba(0,0,0,0.14);
  padding:18px;
}
.settingsCardHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:14px;
}
.settingsCardHead h4{
  margin:0 0 6px;
}
.settingsToggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  color:rgba(236,242,252,0.92);
  white-space:nowrap;
}
.settingsToggle input{
  transform:translateY(1px);
}
.settingsFields{
  display:grid;
  gap:14px;
}
.settingsFieldsOne{
  grid-template-columns:minmax(0,320px);
}
.settingsFieldsTwo{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.settingsPane .field{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.settingsPane .fieldHint{
  font-size:12px;
  line-height:1.45;
  color:rgba(223,232,245,0.72);
}
.settingsPane input[type="time"],
.settingsPane select{
  min-height:46px;
}
.settingsActions{
  display:flex;
  justify-content:flex-end;
  padding-top:4px;
}
.settingsActions .neutral{
  min-width:240px;
  min-height:48px;
  border-radius:16px;
}
@media (max-width: 900px){
  .settingsFieldsTwo{
    grid-template-columns:minmax(0,1fr);
  }
  .settingsCardHead{
    flex-direction:column;
  }
}
@media (max-width: 760px){
  #dashCard .dashActions{
    grid-template-columns:1fr;
  }
  #dashCard .dashActionBtn{
    min-height:56px;
  }
  #dashCard .dashActionMain{
    font-size:14px;
  }
}

@media (max-width: 760px){
  #dashCard .dashHead{
    flex-direction:column;
    align-items:flex-start;
  }
  #dashCard .dashUpdated{
    white-space:normal;
  }
}



/* -----------------------
   2026-03-08 header + dashboard refinement
   UI-only. No controller or science logic touched.
   ----------------------- */
.top{
  grid-template-columns: minmax(360px, 1.55fr) minmax(320px, 0.95fr);
  gap: 12px;
}

.pill{
  min-height: 78px;
  padding: 12px 16px;
  border-radius: 20px;
  align-items: stretch;
}

.pill strong,
.pill .pillMain{
  display:block;
  line-height: 1.1;
}

.pillEyebrow{
  display:block;
  color: rgba(226,236,249,0.70);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.05px;
  text-transform: uppercase;
}

.pillMain{
  margin-top: 4px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: rgba(243,247,255,0.97);
}

.pillMeta{
  display:block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.35px;
}

.pill.brand{
  padding-right: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(83,219,255,0.12), transparent 42%),
    radial-gradient(120% 140% at 100% 100%, rgba(138,124,255,0.12), transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
}

.brandStack{
  min-width: 0;
}

.brandRow{
  gap: 12px;
}

.brandText{
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.brandName{
  font-size: 16px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.brandMark{
  width: 26px;
  height: 26px;
}

.brandActions{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.settingsBtn,
.mailBtn{
  position: relative;
  inset: auto;
  width: 42px;
  height: 42px;
  border-radius: 15px;
  flex: 0 0 auto;
  transition:
    transform var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    background var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out);
}

.settingsBtn:hover,
.mailBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.09);
}

.settingsIcon,
.mailIcon{
  width: 21px;
  height: 21px;
}


#netLabel{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.95px;
  text-transform: uppercase;
}

html[data-page="dash"] .side{
  align-content: start;
  grid-auto-rows: min-content;
}

#dashCard{
  align-self: start;
  display: none;
  gap: 18px;
  padding: 18px;
}

html[data-page="dash"] #dashCard{
  display: grid;
}

#dashCard .dashHead{
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items:end;
  gap: 16px;
  margin: 0;
}

#dashCard .dashHeadMain{
  min-width: 0;
}

#dashCard .dashTitle{
  font-size: clamp(30px, 2.3vw, 40px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

#dashCard .dashSubtitle{
  margin-top: 8px;
  max-width: 64ch;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(222,233,248,0.78);
}

#dashCard .dashUpdated{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  font-size: 10px;
  letter-spacing: 0.95px;
}

#dashCard .dashSensors{
  display:grid;
  grid-template-columns: repeat(4, minmax(108px, 112px));
  gap: 12px;
  margin: 0;
  justify-content: start;
}

#dashCard .dashSensor{
  min-height: 0;
  padding: 14px 14px 12px;
  border-radius: 18px;
  aspect-ratio: 1 / 1;
  gap: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)),
    rgba(19,31,50,0.34);
}

#dashCard .dashSensorTop{
  margin: 0;
}

#dashCard .dashSensorLabel{
  font-size: 11px;
  letter-spacing: 1px;
}

#dashCard .dashStatusDot{
  width: 9px;
  height: 9px;
}

#dashCard .dashSensorValue{
  font-size: clamp(28px, 2vw, 34px);
  line-height: 1;
  margin: 0;
}

#dashCard .dashUnit{
  font-size: 12px;
  margin-left: 4px;
}

#dashCard .dashSensorMeta{
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 11px;
}

#dashCard .dashLower{
  margin-top: 0;
  display:grid;
  grid-template-columns: minmax(320px, 0.92fr) minmax(420px, 1.08fr);
  grid-template-areas:
    "actions inbox"
    "groups groups";
  gap: 14px;
  align-items: stretch;
}

#dashCard .dashPanelGroups{ grid-area: groups; }
#dashCard .dashPanelActions{ grid-area: actions; }
#dashCard .dashPanelInbox{ grid-area: inbox; }

#dashCard .dashPanel{
  padding: 15px 16px 16px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
    rgba(14,24,40,0.30);
}

#dashCard .dashPanelTitle{
  font-size: 11px;
  letter-spacing: 1.1px;
}

#dashCard .dashPanelSub{
  margin: 4px 0 14px;
  font-size: 12px;
  line-height: 1.4;
}

#dashCard .dashActions{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#dashCard .dashActionBtn{
  min-height: 82px;
  padding: 15px 16px;
  border-radius: 18px;
}

#dashCard .dashActionPrimary{
  background:
    linear-gradient(180deg, rgba(106,173,245,0.18), rgba(84,138,214,0.08)),
    rgba(20,34,52,0.42);
}

#dashCard .dashActionWrap{
  gap: 5px;
}

#dashCard .dashActionMain{
  font-size: 16px;
  line-height: 1.18;
  font-weight: 800;
}

#dashCard .dashActionSub{
  font-size: 11px;
  line-height: 1.3;
  color: rgba(214,225,242,0.72);
}

#dashCard .dashInboxRows{
  gap: 10px;
}

#dashCard .dashInboxRow{
  min-height: 90px;
  padding: 12px 14px;
  border-radius: 18px;
}

#dashCard .dashInboxRowTop{
  margin-bottom: 8px;
}

#dashCard .dashInboxTag,
#dashCard .dashInboxTs{
  font-size: 10px;
  letter-spacing: 0.85px;
}

#dashCard .dashInboxTitle{
  font-size: 14px;
  margin-bottom: 6px;
}

#dashCard .dashInboxSnippet{
  font-size: 12px;
  line-height: 1.35;
}

#dashCard .dashTableWrap{
  overflow: auto;
  margin: 0 -4px -2px;
  padding: 0 4px 2px;
}

#dashCard .dashTable{
  font-size: 12px;
}

#dashCard .dashTable th,
#dashCard .dashTable td{
  padding: 12px 10px;
}

#dashCard .dashTable tbody tr{
  transition: background var(--t-fast) var(--ease-out);
}

#dashCard .dashTable tbody tr:hover{
  background: rgba(255,255,255,0.03);
}

@media (max-width: 1260px){
  .top{
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
  .top .brand{
    grid-column: 1 / -1;
  }
  .top .user{
    grid-column: auto;
  }
  #dashCard .dashSensors{
    grid-template-columns: repeat(2, minmax(108px, 112px));
    justify-content: start;
  }
}

@media (max-width: 980px){
  .top{
    grid-template-columns: 1fr;
  }
  .top .brand,
  .top .user{
    grid-column: auto;
  }
  .pill{
    min-height: auto;
  }
  #dashCard .dashLower{
    grid-template-columns: 1fr;
    grid-template-areas:
      "actions"
      "inbox"
      "groups";
  }
}

@media (max-width: 720px){
  .pill.brand{
    grid-template-columns: 1fr;
  }
  .brandActions{
    justify-content: flex-start;
  }
  #dashCard{
    padding: 16px;
  }
  #dashCard .dashHead{
    grid-template-columns: 1fr;
    align-items: start;
  }
  #dashCard .dashSensors,
  #dashCard .dashActions{
    grid-template-columns: 1fr;
  }
  #dashCard .dashTitle{
    font-size: 28px;
  }
}


/*
   2026-03-08 brand pill sizing refinement
   Expand the workspace lockup so it actually uses the available horizontal space.
*/
.pill.brand{
  min-height: 88px;
  padding: 14px 18px 14px 20px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
}

.brandStack{
  display:flex;
  align-items:center;
  min-width:0;
  min-height:100%;
}

.brandRow{
  width:100%;
  display:grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items:center;
  column-gap: 16px;
}

.brandMark{
  width: 34px;
  height: 34px;
  align-self:center;
}

.pill.brand .brandText{
  min-width:0;
  display:grid;
  align-content:center;
  gap: 4px;
}

.pill.brand .pillEyebrow{
  font-size: 11px;
  letter-spacing: 2px;
  line-height: 1;
  color: rgba(229, 238, 252, 0.78);
}

.brandName{
  font-size: clamp(28px, 2.15vw, 36px);
  line-height: 0.96;
  letter-spacing: 0.11em;
}

.brandActions{
  gap: 12px;
}

.pill.brand .settingsBtn,
.pill.brand .mailBtn{
  width: 44px;
  height: 44px;
  border-radius: 16px;
}

.pill.brand .settingsIcon,
.pill.brand .mailIcon{
  width: 20px;
  height: 20px;
}

@media (max-width: 1180px){
  .brandMark{
    width: 30px;
    height: 30px;
  }

  .brandName{
    font-size: clamp(24px, 2.4vw, 30px);
  }
}

@media (max-width: 720px){
  .pill.brand{
    padding: 14px 16px;
    gap: 14px;
  }

  .brandRow{
    column-gap: 12px;
  }

  .brandMark{
    width: 26px;
    height: 26px;
  }

  .brandName{
    font-size: 22px;
    letter-spacing: 0.09em;
  }

  .pill.brand .pillEyebrow{
    font-size: 10px;
    letter-spacing: 1.6px;
  }
}


/* route-safe dashboard visibility guard */
html:not([data-page="dash"]) #dashCard{
  display: none !important;
}
html[data-page="dash"] #dashCard{
  display: grid !important;
}


/*
   2026-03-08 header logo replacement
   Replace the text lockup with the new wide brand mark and size it to properly occupy the pill.
*/
.pill.brand{
  min-height: 96px;
  padding: 12px 18px 12px 20px;
  gap: 20px;
}

.brandStack{
  display:flex;
  align-items:center;
  min-width:0;
  min-height:100%;
}

.brandLockup{
  display:block;
  width:auto;
  height:clamp(54px, 5.6vw, 74px);
  max-width:min(100%, 540px);
  object-fit:contain;
  object-position:left center;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,0.18))
    drop-shadow(0 12px 26px rgba(0,0,0,0.34));
}

.brandActions{
  align-self:center;
  gap: 12px;
}

.pill.brand .settingsBtn,
.pill.brand .mailBtn{
  width: 44px;
  height: 44px;
  border-radius: 16px;
}

@media (max-width: 1180px){
  .brandLockup{
    height: clamp(50px, 5vw, 64px);
    max-width: min(100%, 470px);
  }
}

@media (max-width: 720px){
  .pill.brand{
    min-height: 88px;
    padding: 12px 16px;
    gap: 14px;
  }

  .brandLockup{
    height: 48px;
    max-width: 100%;
  }
}


/*
   2026-03-08 dashboard copy clipping + field header cleanup
   Fix heading/subtitle clipping and collapse account pill in field mode.
*/
#dashCard .dashTitle,
#dashCard .dashSubtitle{
  display: block;
  overflow: visible;
  -webkit-line-clamp: initial;
  -webkit-box-orient: initial;
}

#dashCard .dashHead{
  align-items: start;
}

#dashCard .dashHeadMain{
  padding-block: 2px 4px;
}

#dashCard .dashTitle{
  line-height: 1.12;
}

#dashCard .dashSubtitle{
  line-height: 1.56;
}


.settingsFieldsHardware{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.settingsFieldsHardware .wide{
  grid-column:1 / -1;
}
.settingsActionsSplit{
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:10px;
}
.settingsActionsSplit .neutral,
.settingsActionsSplit .btn,
.settingsActionsSplit .danger{
  min-width:220px;
  min-height:46px;
  border-radius:16px;
}
@media (max-width: 900px){
  .settingsFieldsHardware{ grid-template-columns:minmax(0,1fr); }
}

/* 2026-03-12 dashboard layout consolidation: final authoritative dashboard overrides */
html[data-page="dash"] #dashCard{
  display:block;
  padding:16px;
}
#dashCard .dashHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
  padding-bottom:8px;
}
#dashCard .dashHeadMain{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding-block:0;
}
#dashCard .dashTitle{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:1;
  overflow:hidden;
  font-size:20px;
  line-height:1.08;
  letter-spacing:.01em;
}
#dashCard .dashSubtitle{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  max-width:72ch;
  margin-top:0;
  font-size:12px;
  line-height:1.35;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: rgba(222,233,248,0.72);
}
#dashCard .dashUpdated{
  display:block;
  min-height:auto;
  padding-top:3px;
  padding-inline:0;
  border:none;
  background:none;
  box-shadow:none;
}
#dashCard .dashSensors{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:16px;
  margin-bottom:16px;
  justify-content:stretch;
}
#dashCard .dashSensor{
  padding:18px 18px 16px;
  min-height:138px;
  aspect-ratio:auto;
}
#dashCard .dashSensorValue{
  font-size:34px;
  line-height:1;
  letter-spacing:-.02em;
  white-space:nowrap;
}
#dashCard .dashSensorMeta{
  font-size:11px;
}
#dashCard .dashLower{
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(320px, 0.9fr);
  grid-template-areas:
    "actions inbox"
    "groups groups";
  gap:16px;
  align-items:start;
}
#dashCard .dashPanelActions{ grid-area:actions; }
#dashCard .dashPanelInbox{ grid-area:inbox; }
#dashCard .dashPanelGroups{ grid-area:groups; }
#dashCard .dashPanel{
  padding:14px;
}
#dashCard .dashPanelSub{
  margin-bottom:12px;
}
#dashCard .dashActions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}
#dashCard .dashActionBtn{
  min-height:84px;
  border-radius:16px;
  padding:16px 14px;
  text-align:left;
}
#dashCard .dashActionWrap{
  display:flex;
  flex-direction:column;
  gap:6px;
}
#dashCard .dashActionMain{
  font-size:16px;
  line-height:1.1;
}
#dashCard .dashActionSub{
  font-size:12px;
  line-height:1.25;
}
#dashCard .dashInboxRows{
  gap:10px;
}
#dashCard .dashInboxRow{
  min-height:72px;
  border-radius:14px;
  padding:12px;
}
#dashCard .dashPgGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
}
#dashCard .dashPgCard{
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  padding:14px;
  background: rgba(255,255,255,0.02);
  display:grid;
  gap:12px;
  min-height:136px;
}
#dashCard .dashPgHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
#dashCard .dashPgName{
  font-size:15px;
  line-height:1.15;
}
#dashCard .dashPgPill{
  border:1px solid rgba(255,255,255,0.10);
  border-radius:999px;
  padding:5px 9px;
  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(234,242,255,0.78);
  white-space:nowrap;
}
#dashCard .dashPgStats{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px 12px;
}
#dashCard .dashPgKey{
  display:block;
  font-size:10px;
  line-height:1.1;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--muted);
  margin-bottom:4px;
}
#dashCard .dashPgVal{
  display:block;
  font-size:13px;
  line-height:1.2;
  font-weight:850;
  color: rgba(242,247,255,0.92);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#dashCard .dashEmpty{
  grid-column:1 / -1;
  padding:18px 10px;
  border:1px dashed rgba(255,255,255,0.10);
  border-radius:16px;
}
@media (max-width: 980px){
  #dashCard .dashSensors{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  #dashCard .dashLower{
    grid-template-columns:1fr;
    grid-template-areas:
      "actions"
      "inbox"
      "groups";
  }
}
@media (max-width: 620px){
  #dashCard .dashHead{ flex-direction:column; }
  #dashCard .dashSensors,
  #dashCard .dashActions,
  #dashCard .dashPgStats{
    grid-template-columns:1fr;
  }
  #dashCard .dashTitle{ font-size:20px; }
}

#dashCard .dashSensor{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  text-align:left;
  cursor:pointer;
}
#dashCard .dashSensor:focus-visible{
  outline:2px solid rgba(71,215,255,0.9);
  outline-offset:2px;
}
#dashCard .dashSensor:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.055);
}
.dashTelemetryModal{
  position:fixed;
  inset:0;
  z-index:2600;
}
.dashTelemetryModal.hidden{ display:none !important; }
.dashTelemetryBackdrop{
  position:absolute;
  inset:0;
  background:rgba(3,8,16,0.7);
  backdrop-filter:blur(8px);
}
.dashTelemetryDialog{
  position:relative;
  width:min(880px, calc(100vw - 32px));
  margin:48px auto;
  padding:18px;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:24px;
  background:linear-gradient(180deg, rgba(18,24,33,0.97), rgba(9,13,20,0.98));
  box-shadow:0 28px 90px rgba(0,0,0,0.45);
}
.dashTelemetryHead{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.dashTelemetryEyebrow,.dashTelemetryMeta,.dashTelemetryStatKey,.dashTelemetryAxis{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(222,233,248,0.62);
}
.dashTelemetryAxis{
  fill:rgba(238,244,255,0.98);
  font-weight:800;
}
.dashTelemetryTitle{ font-size:22px; font-weight:900; color:rgba(246,249,255,0.96); }
.dashTelemetryClose{
  appearance:none;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.04);
  color:#eef5ff;
  border-radius:14px;
  width:40px;
  height:40px;
  cursor:pointer;
}
.dashTelemetryRanges{ display:flex; gap:10px; margin:14px 0 10px; flex-wrap:wrap; }
.dashTelemetryRange{
  appearance:none;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:999px;
  padding:8px 12px;
  background:rgba(255,255,255,0.03);
  color:rgba(234,242,255,0.84);
  cursor:pointer;
  font-weight:800;
}
.dashTelemetryRange.active{ background:rgba(71,215,255,0.12); border-color:rgba(71,215,255,0.42); }
.dashTelemetryChartWrap{
  position:relative;
  min-height:300px;
  margin-top:12px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  overflow:hidden;
}
.dashTelemetryChart{ width:100%; height:300px; display:block; }
.dashTelemetryGrid{ stroke:rgba(255,255,255,0.09); stroke-width:1; }
.dashTelemetryArea{ fill:rgba(71,215,255,0.12); }
.dashTelemetryLine{ fill:none; stroke:rgba(71,215,255,0.95); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.dashTelemetryPoint{ fill:#47d7ff; }
.dashTelemetryEmpty{
  position:absolute; inset:0; display:grid; place-items:center;
  color:rgba(234,242,255,0.66); font-weight:700;
}
.dashTelemetryStats{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; margin-top:12px;
}
.dashTelemetryStat{
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  padding:12px;
  background:rgba(255,255,255,0.025);
  display:grid; gap:6px;
}
.dashTelemetryStatVal{ font-size:15px; font-weight:850; color:rgba(246,249,255,0.96); }
body.dashTelemetryOpen{ overflow:hidden; }
@media (max-width: 720px){
  .dashTelemetryDialog{ width:min(100vw - 18px, 880px); margin:18px auto; padding:14px; }
  .dashTelemetryStats{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}


.fwPanel{ background: rgba(255,255,255,0.02); }
.fwCardGrid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
.fwCard{ border:1px solid rgba(255,255,255,0.10); border-radius:12px; padding:10px; background:rgba(255,255,255,0.02); min-width:0; }
.fwCardTitle{ font-size:11px; letter-spacing:.7px; text-transform:uppercase; color:var(--muted); margin:0 0 8px; }
.fwKvTable td:last-child, .fwKvTable th:last-child, .fwContribTable td:last-child, .fwContribTable th:last-child{ width:50%; }
.fwWarningList{ margin:0; padding-left:18px; }
.fwWarningList li{ margin:0 0 6px; }
.fwMuted{ opacity:.76; }
@media (max-width: 980px){ .fwCardGrid{ grid-template-columns: 1fr; } }


.fwProfilesTopBar{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding:6px; flex-wrap:wrap; }
.fwProfilesTopText{ min-width:220px; }
.fwTopKicker{ font-size:11px; letter-spacing:.7px; text-transform:uppercase; color:var(--muted); margin:0 0 4px; }
.fwActionRowSticky{ padding:0; }
#fwProfilesPane .formGrid{ margin-top:4px; }
#fwProfilesPane .fwPanel{ margin-top:8px; }


/* Stock room: same glass language, but operationally richer */
#paneStockInv .stockHero{
  display:grid;
  gap:10px;
  margin:0 0 12px;
}
#paneStockInv .stockHeroTop{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  gap:10px;
}
#paneStockInv .stockHeroActions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}
#paneStockInv .stockSummaryBar{ display:flex; flex-wrap:wrap; gap:10px; }
#paneStockInv .stockSummaryChip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:38px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)),
    rgba(6,10,18,0.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
#paneStockInv .stockSummaryChip strong{
  font-size:14px;
  font-weight:950;
  letter-spacing:0.02em;
  color:var(--ink);
}
#paneStockInv .stockSummaryChip span:last-child{
  color:var(--muted);
  font-size:12px;
  line-height:1.1;
}
#paneStockInv .stockTableShell,
#paneStockInv .stockRecipeShell,
#paneIrrCalc .irrControls,
#paneIrrCalc .irrOutputShell{
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.016)),
    rgba(6,10,18,0.50);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 18px 42px rgba(0,0,0,0.22);
}
#paneStockInv .stockTableShell{ overflow:hidden; margin-bottom:16px; }
#paneStockInv .stockControls,
#paneStockInv .stockRecipeHead,
#paneIrrCalc .irrOutputHead{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  padding:14px;
}
#paneStockInv .stockControlsTitle,
#paneIrrCalc .stockControlsTitle{
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(226,236,248,0.84);
  margin-bottom:4px;
}
#paneStockInv .stockActionRow{ margin-left:auto; }
#paneStockInv .stockTableWrap{ overflow-x:auto; padding: 8px 10px 12px; }
#paneStockInv .stockTable{
  width:100%;
  min-width: 0;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0 8px;
}
#paneStockInv .stockTable .stockColName{ width: auto; }
#paneStockInv .stockTable .stockColLiters{ width: 168px; }
#paneStockInv .stockTable thead th{
  text-align:left;
  font-size:11px;
  letter-spacing:.7px;
  text-transform:uppercase;
  color:rgba(226,236,248,0.76);
  padding:0 12px 8px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
#paneStockInv .stockTable tbody td{
  padding:10px 12px;
  vertical-align:middle;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)),
    rgba(255,255,255,0.012);
  border-top:1px solid rgba(255,255,255,0.06);
  border-bottom:1px solid rgba(255,255,255,0.05);
}
#paneStockInv .stockTable tbody tr td:first-child{
  border-left:1px solid rgba(255,255,255,0.06);
  border-top-left-radius:16px;
  border-bottom-left-radius:16px;
}
#paneStockInv .stockTable tbody tr td:last-child{
  border-right:1px solid rgba(255,255,255,0.06);
  border-top-right-radius:16px;
  border-bottom-right-radius:16px;
}
#paneStockInv .stockTable tbody tr{ transition: transform var(--t-fast) var(--ease-out), filter var(--t-fast) var(--ease-out); }
#paneStockInv .stockTable tbody tr:hover{ transform:translateY(-1px); filter:brightness(1.03); }
#paneStockInv .stockNameBlock,
#paneStockInv .stockRecipeStack{
  display:grid;
  gap:5px;
  min-width:0;
}
#paneStockInv .stockNameBlockCompact{
  gap:2px;
}
#paneStockInv .stockTableCompact .stockNamePrimary{
  font-size:14px;
}
#paneStockInv .stockTableCompact .stockNameSecondary{
  font-size:11px;
  line-height:1.2;
}
#paneStockInv .stockInputWrapCompact{
  min-height:38px;
  padding:2px 6px 2px 10px;
}
#paneStockInv .stockTableCompact tbody td:last-child{
  padding-left:8px;
}
#paneStockInv .stockNamePrimary{
  font-weight:850;
  color:var(--ink);
  line-height:1.15;
}
#paneStockInv .stockNameSecondary,
#paneStockInv .stockMuted,
#paneStockInv .stockRecipeLine,
#paneStockInv .stockRecipeMore{
  color:var(--muted);
  font-size:12px;
  line-height:1.28;
}
#paneStockInv .stockRecipeLine{ color: rgba(234,241,250,0.9); }
#paneStockInv .stockRecipeStackInline{
  gap:2px;
  margin-top:2px;
}
#paneStockInv .stockRecipeStackInline .stockRecipeLine{
  font-size:11px;
  line-height:1.24;
}
#paneStockInv .stockRecipeMore{ font-style:italic; }
#paneStockInv .stockTdLiters{ white-space:nowrap; }
#paneStockInv .stockInputWrap{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:4px 6px 4px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
#paneStockInv .stockInput{
  width:100%;
  min-width:0;
  border:none;
  outline:none;
  background:transparent;
  color:var(--ink);
  font-size:14px;
  padding:6px 0;
}
#paneStockInv .stockInputUnit{
  flex:0 0 auto;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:0 6px 0 0;
}
#paneStockInv .stockEmptyRow{
  text-align:center;
  color:var(--muted);
  padding:20px !important;
}
#paneStockInv .stockRecipeShell{ padding-bottom:14px; }
#paneStockInv .stockRecipeGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:12px;
  padding:0 14px 14px;
}
#paneStockInv .stockRecipeCard{
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
    rgba(9,14,24,0.48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  padding:14px;
  display:grid;
  gap:12px;
}
#paneStockInv .stockRecipeCardTop{
  display:flex;
  gap:10px;
  align-items:flex-start;
  justify-content:space-between;
}
#paneStockInv .stockRecipeTitle{ font-weight:900; font-size:15px; color:var(--ink); }
#paneStockInv .stockRecipeKind{ color:var(--muted); font-size:12px; margin-top:4px; }
#paneStockInv .stockRecipeLiters{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(71,215,255,0.18);
  background: rgba(71,215,255,0.08);
  color:var(--ink);
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}
#paneStockInv .stockDosePair{ display:flex; flex-wrap:wrap; gap:10px; }
#paneStockInv .stockDoseChip{
  display:grid;
  gap:2px;
  min-width:120px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}
#paneStockInv .stockDoseChip strong{ font-size:14px; font-weight:950; color:var(--ink); }
#paneStockInv .stockDoseChip span:last-child{ color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.07em; }
#paneStockInv .stockRecipeList{
  display:grid;
  gap:8px;
}
#paneStockInv .stockRecipeListRow{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  color: rgba(234,241,250,0.92);
  font-size:12px;
  line-height:1.35;
}
#paneStockInv .stockRecipeNote{
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
  padding-top:2px;
}
#paneStockInv .stockRecipeEmpty{
  grid-column:1 / -1;
  padding:18px;
  text-align:center;
  color:var(--muted);
  border-radius:16px;
  border:1px dashed rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.02);
}

/* Irrigation calc: same family, cleaner result surface */
#paneIrrCalc .irrHero{
  display:grid;
  gap:10px;
  margin:0 0 12px;
}
#paneIrrCalc .irrSummaryBar{ display:flex; flex-wrap:wrap; gap:10px; }
#paneIrrCalc .irrSummaryChip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:38px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)),
    rgba(6,10,18,0.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
#paneIrrCalc .irrSummaryChip strong{ font-size:14px; font-weight:950; color:var(--ink); }
#paneIrrCalc .irrSummaryChip span:last-child{ color:var(--muted); font-size:12px; line-height:1.1; }
#paneIrrCalc .irrControls{ padding:14px; margin-bottom:16px; }
#paneIrrCalc .irrControls .field label{ color: rgba(226,236,248,0.76); }
#paneIrrCalc .irrControls .field input,
#paneIrrCalc .irrControls .field select{
  min-height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
#paneIrrCalc .irrControls .field input:hover,
#paneIrrCalc .irrControls .field select:hover{
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
}
#paneIrrCalc .irrControls .field input:focus-visible,
#paneIrrCalc .irrControls .field select:focus-visible{
  border-color: rgba(71,215,255,0.40);
  box-shadow: 0 0 0 2px var(--focus), 0 0 0 4px var(--focus2), inset 0 1px 0 rgba(255,255,255,0.07);
}
#paneIrrCalc .irrRunField{ display:flex; align-items:end; }
#paneIrrCalc #irrCalcBtn{ width:100%; min-height:42px; border-radius:16px; }
#paneIrrCalc .irrOutputShell{ overflow:hidden; }
#paneIrrCalc .irrOutBody{ padding:14px; }
#paneIrrCalc .irrPlaceholder{
  min-height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:18px;
  border-radius:16px;
  border:1px dashed rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  color:var(--muted);
}
#paneIrrCalc .irrError{ color:#ffd1d7; border-color: rgba(255,91,120,0.18); background: rgba(255,91,120,0.06); }
#paneIrrCalc .irrResultGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:12px;
  margin-bottom:14px;
}
#paneIrrCalc .irrMetricCard{
  display:grid;
  gap:4px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
    rgba(9,14,24,0.48);
}
#paneIrrCalc .irrMetricCard span{ color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
#paneIrrCalc .irrMetricCard strong{ font-size:16px; font-weight:950; color:var(--ink); line-height:1.2; }
#paneIrrCalc .irrResultBody{
  display:grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.9fr);
  gap:14px;
}
#paneIrrCalc .irrUsageShell,
#paneIrrCalc .irrOrderCard{
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.018)),
    rgba(9,14,24,0.46);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  overflow:hidden;
}
#paneIrrCalc .irrSectionTitle{
  padding:12px 14px 0;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(226,236,248,0.84);
}
#paneIrrCalc .irrUsageWrap{ padding:10px 12px 12px; overflow-x:auto; }
#paneIrrCalc .irrUsageTable{ width:100%; border-collapse:separate; border-spacing:0 8px; }
#paneIrrCalc .irrUsageTable thead th{
  text-align:left;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:rgba(226,236,248,0.7);
  padding:0 10px 6px;
}
#paneIrrCalc .irrUsageTable tbody td{
  padding:12px 10px;
  background: rgba(255,255,255,0.03);
  border-top:1px solid rgba(255,255,255,0.05);
  border-bottom:1px solid rgba(255,255,255,0.05);
}
#paneIrrCalc .irrUsageTable tbody tr td:first-child{ border-left:1px solid rgba(255,255,255,0.05); border-top-left-radius:14px; border-bottom-left-radius:14px; }
#paneIrrCalc .irrUsageTable tbody tr td:last-child{ border-right:1px solid rgba(255,255,255,0.05); border-top-right-radius:14px; border-bottom-right-radius:14px; width:130px; text-align:right; }
#paneIrrCalc .irrUsageName{ font-weight:850; color:var(--ink); }
#paneIrrCalc .irrUsageRecipe{ color:var(--muted); font-size:12px; line-height:1.35; margin-top:4px; }
#paneIrrCalc .irrUsagePill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:86px;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(71,215,255,0.18);
  background: rgba(71,215,255,0.08);
  font-weight:900;
}
#paneIrrCalc .irrOrderList{ margin:10px 0 0; padding:0 18px 14px 34px; color:var(--ink); }
#paneIrrCalc .irrOrderList li{ margin:0 0 10px; line-height:1.35; }
#paneIrrCalc .irrEmptyRow{ text-align:center; color:var(--muted); }

@media (max-width: 920px){
  #paneStockInv .stockControls,
  #paneIrrCalc .irrOutputHead{ align-items:flex-start; }
  #paneStockInv .stockHeroTop,
  #paneStockInv .stockHeroActions{ justify-content:flex-start; }
  #paneIrrCalc .irrResultBody{ grid-template-columns: 1fr; }
}

/* Formulate overhaul: same glass family as active/archive, but with one-page chemistry */
#paneStockFormulas .fwHero{
  display:flex;
  justify-content:flex-end;
  margin:0 0 6px;
}
#paneStockFormulas .fwControlCard .formGrid{
  padding:0;
  gap:8px 12px;
  grid-template-columns:minmax(170px, 0.55fr) minmax(280px, 1fr) minmax(240px, 0.95fr);
  align-items:end;
}
#paneStockFormulas .fwControlCard .formGrid > .field:nth-child(1){ grid-column:1; }
#paneStockFormulas .fwControlCard .formGrid > .field:nth-child(2){ grid-column:2; }
#paneStockFormulas .fwControlCard .formGrid > .field:nth-child(3){ grid-column:3; }
#paneStockFormulas .fwHeroActions{ display:flex; align-items:flex-start; justify-content:flex-end; }
#paneStockFormulas .fwHeroIconGroup{ display:flex; align-items:center; gap:10px; }
#paneStockFormulas .fwAuditIconBtn{
  min-width:46px;
  min-height:46px;
  border-radius:16px;
  font-size:20px;
  line-height:1;
  padding:0;
}
#paneStockFormulas .fwWorkbenchShell,
#paneStockFormulas .fwControlCard,
#paneStockFormulas .fwDoseShell,
#paneStockFormulas .fwAnalysisStack > .fwPanel,
#paneStockFormulas .fwContribShell,
#fwIngredientsBackdrop .fwIngredientModal,
#paneStockFormulas .fwAdvancedModal{
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.016)),
    rgba(6,10,18,0.50);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 18px 42px rgba(0,0,0,0.22);
}
#paneStockFormulas .fwWorkbenchShell{ padding:10px; display:grid; gap:10px; }
#paneStockFormulas .fwControlCard{ padding:10px; }
#fwIngredientsBackdrop .fwIngredientActionRowStart{ display:flex; gap:10px; }
#paneStockFormulas .fwControlCard .field label{ color:rgba(226,236,248,0.76); font-size:11px; }
#paneStockFormulas .fwControlCard .field input,
#paneStockFormulas .fwControlCard .field select,
#paneStockFormulas .fwDoseInputWrap{
  min-height:38px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
#paneStockFormulas .fwControlCard .field input,
#paneStockFormulas .fwControlCard .field select{
  padding:8px 11px;
}
#paneStockFormulas .fwControlCard .field{ gap:4px; }
#paneStockFormulas .fwControlCard .field input:hover,
#paneStockFormulas .fwControlCard .field select:hover,
#paneStockFormulas .fwDoseInputWrap:hover{
  border-color:rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.05);
}
#paneStockFormulas .fwControlCard .field input:focus-visible,
#paneStockFormulas .fwControlCard .field select:focus-visible,
#paneStockFormulas .fwDoseInputWrap:focus-within{
  border-color: rgba(71,215,255,0.40);
  box-shadow: 0 0 0 2px var(--focus), 0 0 0 4px var(--focus2), inset 0 1px 0 rgba(255,255,255,0.07);
}
#paneStockFormulas .fwControlRow{
  margin-top:10px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
#paneStockFormulas .fwWorkbenchActions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:0; margin:0; }
#paneStockFormulas .fwWorkbenchActions .neutral,
#paneStockFormulas .fwWorkbenchActions .danger{
  min-height:38px;
  padding:0 14px;
  border-radius:16px;
  font-size:12px;
  letter-spacing:.08em;
}
#paneStockFormulas .fwEcAdjustCard{
  margin-left:auto;
  min-width:248px;
  display:grid;
  gap:6px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}
#paneStockFormulas .fwEcAdjustLabel{
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(226,236,248,0.84);
}
#paneStockFormulas .fwEcAdjustControls{ display:flex; align-items:center; gap:8px; }
#paneStockFormulas .fwEcStepBtn{
  flex:0 0 36px;
  min-width:36px;
  min-height:36px;
  border-radius:12px;
  padding:0;
  font-size:22px;
  line-height:1;
}
#paneStockFormulas .fwEcAdjustDisplay{
  flex:1 1 auto;
  min-width:0;
  display:grid;
  justify-items:center;
  gap:2px;
  padding:6px 10px;
  border-radius:14px;
  border:1px solid rgba(71,215,255,0.18);
  background: rgba(71,215,255,0.08);
}
#paneStockFormulas .fwEcAdjustDisplay strong{ font-size:15px; font-weight:950; color:var(--ink); }
#paneStockFormulas .fwEcAdjustDisplay span{ color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.07em; }
#paneStockFormulas .fwWorkbenchGrid{
  display:grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.85fr);
  gap:14px;
  align-items:start;
}
#paneStockFormulas .fwSectionHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px 0;
}
#paneStockFormulas .fwDoseShell{ overflow:hidden; }
#paneStockFormulas .fwDoseWrap{ padding:10px 12px 12px; overflow-x:auto; }
#paneStockFormulas .fwDoseTable{
  width:100%;
  min-width:620px;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0 8px;
}
#paneStockFormulas .fwDoseColStock{ width:240px; }
#paneStockFormulas .fwDoseColInput{ width:210px; }
#paneStockFormulas .fwDoseColRef{ width:140px; }
#paneStockFormulas .fwDoseTable thead th{
  text-align:left;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:rgba(226,236,248,0.72);
  padding:0 10px 6px;
}
#paneStockFormulas .fwDoseTable tbody td{
  padding:12px 10px;
  vertical-align:middle;
  background: rgba(255,255,255,0.03);
  border-top:1px solid rgba(255,255,255,0.05);
  border-bottom:1px solid rgba(255,255,255,0.05);
}
#paneStockFormulas .fwDoseTable tbody tr td:first-child{ border-left:1px solid rgba(255,255,255,0.05); border-top-left-radius:14px; border-bottom-left-radius:14px; }
#paneStockFormulas .fwDoseTable tbody tr td:last-child{ border-right:1px solid rgba(255,255,255,0.05); border-top-right-radius:14px; border-bottom-right-radius:14px; }
#paneStockFormulas .fwDoseStockCell{ display:grid; gap:5px; min-width:0; }
#paneStockFormulas .fwDoseStockName{ font-weight:850; color:var(--ink); line-height:1.15; }
#paneStockFormulas .fwDoseStockMeta{ color:var(--muted); font-size:12px; line-height:1.33; }
#paneStockFormulas .fwDoseInputWrap{ display:flex; align-items:center; gap:8px; padding:4px 6px 4px 12px; }
#paneStockFormulas .fwDoseInputWrap input{
  width:100%;
  min-width:0;
  border:none;
  outline:none;
  background:transparent;
  color:var(--ink);
  font-size:15px;
  font-weight:850;
  padding:6px 0;
}
#paneStockFormulas .fwDoseInputUnit{
  flex:0 0 auto;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding-right:6px;
}
#paneStockFormulas .fwDoseRefCell{ text-align:center; }
#paneStockFormulas .fwDoseRefPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:96px;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  font-weight:900;
}
#paneStockFormulas .fwDoseEmpty{ text-align:center; color:var(--muted); }
#paneStockFormulas .fwAnalysisStack{ display:grid; gap:14px; align-content:start; position:sticky; top:14px; }
#paneStockFormulas .fwPanel{ padding:14px; min-width:0; }
#paneStockFormulas .fwSnapshotHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
#paneStockFormulas .fwSnapshotTitle{ font-size:18px; font-weight:950; color:var(--ink); line-height:1.15; }
#paneStockFormulas .fwSnapshotMeta{ margin-top:4px; color:var(--muted); font-size:12px; }
#paneStockFormulas .fwStateBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(71,215,255,0.18);
  background:rgba(71,215,255,0.08);
  color:var(--ink);
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}
#paneStockFormulas .fwStatGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}
#paneStockFormulas .fwStatCard,
#paneStockFormulas .fwMetricTile,
#paneStockFormulas .fwRatioRow{
  display:grid;
  gap:4px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.03);
}
#paneStockFormulas .fwStatCard span,
#paneStockFormulas .fwMetricTile span,
#paneStockFormulas .fwRatioRow span{
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1.15;
}
#paneStockFormulas .fwStatCard strong,
#paneStockFormulas .fwMetricTile strong,
#paneStockFormulas .fwRatioRow strong{
  color:var(--ink);
  font-size:14px;
  font-weight:950;
  line-height:1.25;
}
#paneStockFormulas .fwInlineSection{ display:grid; gap:10px; margin-top:14px; }
#paneStockFormulas .fwMetricGrid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
#paneStockFormulas .fwRatioGrid{ display:grid; gap:10px; }
#paneStockFormulas .fwContribShell{ padding:12px; min-width:0; }
#paneStockFormulas .fwContribShellModal{ padding:0; min-width:0; border:none; background:transparent; box-shadow:none; }
#paneStockFormulas .fwCardGridTight{ gap:12px; }
#paneStockFormulas .fwContribList{ display:grid; gap:12px; }
#paneStockFormulas .fwContribRow{ display:grid; gap:8px; }
#paneStockFormulas .fwContribLabel{ font-weight:900; color:var(--ink); line-height:1.2; }
#paneStockFormulas .fwContribTokens{ display:flex; flex-wrap:wrap; gap:6px; }
#paneStockFormulas .fwContribToken{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:30px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.07);
  background:rgba(255,255,255,0.03);
  color:rgba(236,242,252,0.92);
  font-size:12px;
  line-height:1.2;
}
#paneStockFormulas .fwContribToken strong{ font-size:12px; font-weight:900; color:var(--ink); }
#fwIngredientsBackdrop .fwIngredientModal,
#paneStockFormulas .fwAdvancedModal{
  width:min(1320px, calc(100vw - 40px));
  max-height:min(88vh, 980px);
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
}
#fwIngredientsBackdrop .fwIngredientModalBody{ display:block; overflow:hidden; }
#paneStockFormulas .fwAdvancedModalBody{ display:block; overflow:auto; max-height:72vh; }
#fwIngredientsBackdrop .fwIngredientShell{ display:grid; grid-template-columns:minmax(240px, 300px) minmax(0, 1fr); gap:14px; min-height:min(70vh, 760px); }
#fwIngredientsBackdrop .fwIngredientRail,
#fwIngredientsBackdrop .fwIngredientEditorShell,
#fwIngredientsBackdrop .fwIngredientIntroCard,
#fwIngredientsBackdrop .fwSpecEditorCard,
#fwIngredientsBackdrop .fwSpecInlineCard,
#fwIngredientsBackdrop .fwStockSpecCard,
#fwIngredientsBackdrop .fwSpecRowCard{ border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.03); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }
#fwIngredientsBackdrop .fwIngredientRail,
#fwIngredientsBackdrop .fwIngredientEditorShell{ border-radius:18px; padding:12px; min-width:0; }
#fwIngredientsBackdrop .fwIngredientRail{ display:grid; grid-template-rows:auto minmax(0,1fr); gap:12px; overflow:hidden; }
#fwIngredientsBackdrop .fwIngredientRailHead{ display:flex; gap:10px; align-items:flex-start; }
#fwIngredientsBackdrop .fwIngredientStockList{ display:grid; gap:10px; overflow:auto; padding-right:2px; }
#fwIngredientsBackdrop .fwStockSpecCardTop{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
#fwIngredientsBackdrop .fwStockTypePill,
#fwIngredientsBackdrop .fwStockStatusPill,
#fwIngredientsBackdrop .fwIngredientIntroPill,
#fwIngredientsBackdrop .fwSpecRowGhostTag{ display:inline-flex; align-items:center; min-height:22px; padding:0 8px; border-radius:999px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.05); color:rgba(226,236,248,0.86); font-size:11px; font-weight:800; letter-spacing:.02em; }
#fwIngredientsBackdrop .fwStockTypePill.is-acid{ background:rgba(255,122,122,0.12); border-color:rgba(255,122,122,0.24); }
#fwIngredientsBackdrop .fwStockTypePill.is-micro{ background:rgba(71,215,255,0.12); border-color:rgba(71,215,255,0.26); }
#fwIngredientsBackdrop .fwStockTypePill.is-multi{ background:rgba(255,208,94,0.12); border-color:rgba(255,208,94,0.26); }
#fwIngredientsBackdrop .fwStockTypePill.is-single{ background:rgba(138,230,138,0.12); border-color:rgba(138,230,138,0.24); }
#fwIngredientsBackdrop .fwStockStatusPill,
#fwIngredientsBackdrop .fwIngredientIntroPill.isDirty{ background:rgba(255,208,94,0.12); border-color:rgba(255,208,94,0.26); color:rgba(255,231,166,0.98); }
#fwIngredientsBackdrop .fwStockSpecCard{ appearance:none; width:100%; text-align:left; border-radius:16px; padding:12px 13px; display:grid; gap:5px; cursor:pointer; transition: border-color .15s ease, transform .15s ease, background .15s ease; }
#fwIngredientsBackdrop .fwStockSpecCard:hover{ border-color:rgba(255,255,255,0.16); transform:translateY(-1px); }
#fwIngredientsBackdrop .fwStockSpecCard.isActive{ border-color:rgba(71,215,255,0.32); background:rgba(71,215,255,0.09); }
#fwIngredientsBackdrop .fwStockSpecCardTitle{ font-size:13px; font-weight:950; color:var(--ink); line-height:1.25; }
#fwIngredientsBackdrop .fwStockSpecCardSubtitle{ font-size:12px; color:var(--muted); line-height:1.35; }
#fwIngredientsBackdrop .fwIngredientEditorShell{ display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:12px; overflow:hidden; }
#fwIngredientsBackdrop .fwIngredientIntroCard{ border-radius:16px; padding:12px 14px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
#fwIngredientsBackdrop .fwIngredientIntroMain,
#fwIngredientsBackdrop .fwIngredientIntroAside{ display:grid; gap:6px; min-width:0; }
#fwIngredientsBackdrop .fwIngredientIntroBadgeRow{ display:flex; flex-wrap:wrap; gap:8px; }
#fwIngredientsBackdrop .fwIngredientIntroCard strong{ font-size:16px; font-weight:950; color:var(--ink); }
#fwIngredientsBackdrop .fwIngredientIntroCard span{ font-size:12px; color:var(--muted); line-height:1.35; }
#fwIngredientsBackdrop .fwIngredientIntroAside{ margin-left:auto; text-align:right; align-content:start; }
#fwIngredientsBackdrop .fwIngredientIntroMetaLabel{ font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:rgba(226,236,248,0.72); }
#fwIngredientsBackdrop .fwIngredientIntroAside strong{ font-size:13px; line-height:1.3; }
#fwIngredientsBackdrop .fwIngredientEditor{ overflow:auto; padding-right:2px; }
#fwIngredientsBackdrop .fwSpecEditorCard,
#fwIngredientsBackdrop .fwSpecInlineCard,
#fwIngredientsBackdrop .fwSpecRowCard{ border-radius:18px; padding:14px; }
#fwIngredientsBackdrop .fwSpecEditorCard{ display:grid; gap:14px; }
#fwIngredientsBackdrop .fwSpecHeader{ display:flex; justify-content:space-between; gap:14px; align-items:flex-start; }
#fwIngredientsBackdrop .fwSpecEyebrow,
#fwIngredientsBackdrop .fwSpecInlineHead span,
#fwIngredientsBackdrop .fwSpecField > span,
#fwIngredientsBackdrop .fwSpecStaticField span{ font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:rgba(226,236,248,0.72); }
#fwIngredientsBackdrop .fwSpecHeader h3{ margin:4px 0 0; font-size:20px; line-height:1.15; color:var(--ink); }
#fwIngredientsBackdrop .fwSpecHeader p,
#fwIngredientsBackdrop .fwSpecNote,
#fwIngredientsBackdrop .fwSpecHint{ margin:6px 0 0; color:var(--muted); font-size:12px; line-height:1.45; }
#fwIngredientsBackdrop .fwSpecFieldGrid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
#fwIngredientsBackdrop .fwSpecFieldGridSingle{ grid-template-columns:minmax(0, 1.7fr) repeat(2, minmax(150px, .65fr)); }
#fwIngredientsBackdrop .fwSpecFieldGridRow{ grid-template-columns:minmax(0, 1.6fr) repeat(2, minmax(140px, .7fr)); }
#fwIngredientsBackdrop .fwSpecField{ display:grid; gap:6px; min-width:0; }
#fwIngredientsBackdrop .fwSpecField input,
#fwIngredientsBackdrop .fwSpecField select{ min-height:42px; width:100%; border-radius:14px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.035); color:var(--ink); padding:0 12px; }
#fwIngredientsBackdrop .fwSpecField input:hover,
#fwIngredientsBackdrop .fwSpecField select:hover{ border-color:rgba(255,255,255,0.14); background:rgba(255,255,255,0.05); }
#fwIngredientsBackdrop .fwSpecField input:focus-visible,
#fwIngredientsBackdrop .fwSpecField select:focus-visible{ border-color: rgba(71,215,255,0.40); box-shadow: 0 0 0 2px var(--focus), 0 0 0 4px var(--focus2); outline:none; }
#fwIngredientsBackdrop .fwSpecField input:disabled{ opacity:.7; cursor:not-allowed; }
#fwIngredientsBackdrop .fwSpecStaticField{ align-content:center; padding:10px 12px; border-radius:14px; min-height:42px; }
#fwIngredientsBackdrop .fwSpecStaticField strong{ font-size:14px; color:var(--ink); }
#fwIngredientsBackdrop .fwSpecInlineCard{ display:grid; gap:12px; }
#fwIngredientsBackdrop .fwSpecInlineHead{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
#fwIngredientsBackdrop .fwSpecInlineHead strong{ font-size:14px; font-weight:950; color:var(--ink); }
#fwIngredientsBackdrop .fwSpecInlineGrid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
#fwIngredientsBackdrop .fwSpecChipRow{ display:flex; flex-wrap:wrap; gap:8px; }
#fwIngredientsBackdrop .fwSpecChip{ display:inline-flex; align-items:center; min-height:30px; padding:0 10px; border-radius:999px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.04); color:rgba(236,242,252,0.92); font-size:12px; }
#fwIngredientsBackdrop .fwSpecCompoundGrid{ display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(280px, .95fr); gap:14px; align-items:start; }
#fwIngredientsBackdrop .fwSpecRowsPanel{ display:grid; gap:12px; }
#fwIngredientsBackdrop .fwSpecRows{ display:grid; gap:12px; }
#fwIngredientsBackdrop .fwSpecRowCard{ display:grid; gap:10px; }
#fwIngredientsBackdrop .fwSpecRowCard.isBlank{ opacity:.94; }
#fwIngredientsBackdrop .fwSpecRowCard.fwSpecRowCompact{ cursor:pointer; }
#fwIngredientsBackdrop .fwSpecRowCard.isActive{ border-color:rgba(71,215,255,0.30); box-shadow:0 0 0 1px rgba(71,215,255,0.16) inset; background:rgba(71,215,255,0.07); }
#fwIngredientsBackdrop .fwSpecRowHead{ display:flex; justify-content:space-between; gap:10px; align-items:center; }
#fwIngredientsBackdrop .fwSpecRowHead strong{ font-size:13px; font-weight:950; color:var(--ink); }
#fwIngredientsBackdrop .fwSpecRowMeta{ display:flex; align-items:center; gap:10px; min-height:22px; }
#fwIngredientsBackdrop .fwSpecRowMetaText{ font-size:12px; color:var(--muted); line-height:1.4; }
#fwIngredientsBackdrop .fwSpecRowRemoveBtn{ min-width:76px; min-height:34px; border-radius:12px; padding:0 10px; }
#fwIngredientsBackdrop .fwSpecInspectorCard{ position:sticky; top:0; }
#fwIngredientsBackdrop .fwSpecAddRowBtn{ min-height:42px; border-radius:14px; }
#fwIngredientsBackdrop .fwIngredientActionRow{ justify-content:space-between; align-items:center; }
@media (max-width: 1120px){
  #paneStockFormulas .fwControlCard .formGrid{ grid-template-columns:minmax(170px, 0.65fr) minmax(0, 1fr); }
  #paneStockFormulas .fwControlCard .formGrid > .field:nth-child(1){ grid-column:1; }
  #paneStockFormulas .fwControlCard .formGrid > .field:nth-child(2){ grid-column:2; }
  #paneStockFormulas .fwControlCard .formGrid > .field:nth-child(3){ grid-column:1 / -1; }
  #paneStockFormulas .fwWorkbenchGrid{ grid-template-columns: 1fr; }
  #paneStockFormulas .fwAnalysisStack{ position:static; top:auto; }
  #fwIngredientsBackdrop .fwIngredientShell{ grid-template-columns:1fr; min-height:0; }
  #fwIngredientsBackdrop .fwIngredientRail{ grid-template-rows:auto auto; }
  #fwIngredientsBackdrop .fwIngredientStockList{ grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); }
  #fwIngredientsBackdrop .fwSpecCompoundGrid{ grid-template-columns:1fr; }
}
@media (max-width: 760px){
  #paneStockFormulas .fwControlCard .formGrid{ grid-template-columns:1fr; }
  #paneStockFormulas .fwControlCard .formGrid > .field:nth-child(1),
  #paneStockFormulas .fwControlCard .formGrid > .field:nth-child(2),
  #paneStockFormulas .fwControlCard .formGrid > .field:nth-child(3){ grid-column:auto; }
  #paneStockFormulas .fwHeroActions{ justify-content:flex-start; }
  #paneStockFormulas .fwControlRow{ flex-direction:column; }
  #paneStockFormulas .fwEcAdjustCard{ margin-left:0; min-width:0; }
  #paneStockFormulas .fwStatGrid,
  #paneStockFormulas .fwMetricGrid,
  #fwIngredientsBackdrop .fwSpecFieldGrid,
  #fwIngredientsBackdrop .fwSpecFieldGridSingle,
  #fwIngredientsBackdrop .fwSpecFieldGridRow,
  #fwIngredientsBackdrop .fwSpecInlineGrid{ grid-template-columns:1fr; }
  #fwIngredientsBackdrop .fwIngredientIntroCard,
  #fwIngredientsBackdrop .fwSpecInlineHead,
  #fwIngredientsBackdrop .fwSpecRowHead{ flex-direction:column; align-items:flex-start; }
  #fwIngredientsBackdrop .fwIngredientIntroAside{ margin-left:0; text-align:left; }
  #paneStockInv .stockActionRow,
  #fwIngredientsBackdrop .fwIngredientActionRow{ justify-content:stretch; flex-wrap:wrap; }
}

/* Ingredient specs final cleanup */
#fwIngredientsBackdrop{
  overflow:auto;
  align-items:flex-start;
  justify-content:center;
}
#fwIngredientsBackdrop .fwIngredientModal{
  width:min(1040px, calc(100vw - 28px));
  max-height:none;
  margin:10px auto;
}
#fwIngredientsBackdrop .fwIngredientModalBody{
  overflow:auto;
  padding-bottom:18px;
}
#fwIngredientsBackdrop .fwIngredientShell{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  min-height:0;
}
#fwIngredientsBackdrop .fwIngredientRail,
#fwIngredientsBackdrop .fwIngredientEditorShell{
  border-radius:18px;
  padding:14px;
}
#fwIngredientsBackdrop .fwIngredientRail{
  display:grid;
  gap:12px;
  overflow:visible;
}
#fwIngredientsBackdrop .fwIngredientRailHead,
#fwIngredientsBackdrop .fwIngredientContextCard,
#fwIngredientsBackdrop .fwIngredientSectionHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
#fwIngredientsBackdrop .fwIngredientStockList{
  display:grid;
  grid-template-columns:minmax(260px, 360px) minmax(0, 1fr);
  gap:12px;
  overflow:visible;
  padding-right:0;
  align-items:end;
}
#fwIngredientsBackdrop .fwIngredientStockSelectorField,
#fwIngredientsBackdrop .fwIngredientAssaySelectField{
  max-width:360px;
}
#fwIngredientsBackdrop .fwIngredientSelectorMeta,
#fwIngredientsBackdrop .fwIngredientInlineNote{
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.03);
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
  padding:11px 12px;
}
#fwIngredientsBackdrop .fwIngredientEditorShell{
  display:grid;
  grid-template-rows:auto auto;
  gap:12px;
  overflow:visible;
}
#fwIngredientsBackdrop .fwIngredientContextState{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.05);
  color:rgba(236,242,252,0.92);
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}
#fwIngredientsBackdrop .fwIngredientContextState[data-fw-ingredient-dirty-state="1"]{
  background:rgba(255,208,94,0.12);
  border-color:rgba(255,208,94,0.26);
  color:rgba(255,231,166,0.98);
}
#fwIngredientsBackdrop .fwIngredientEditor{
  display:grid;
  gap:12px;
  overflow:visible;
  padding-right:0;
}
#fwIngredientsBackdrop .fwIngredientSectionCard{
  display:grid;
  gap:14px;
}
#fwIngredientsBackdrop .fwIngredientSectionHead h3{
  margin:0;
  font-size:18px;
  line-height:1.15;
  color:var(--ink);
}
#fwIngredientsBackdrop .fwIngredientSectionHead p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}
#fwIngredientsBackdrop .fwIngredientAcidGrid{
  grid-template-columns:repeat(4, minmax(0,1fr));
}
#fwIngredientsBackdrop .fwIngredientAssayMetaGrid{
  grid-template-columns:repeat(2, minmax(0,1fr));
}
#fwIngredientsBackdrop .fwIngredientInstructionList,
#paneStockInv .stockRecipeCardInstruction .stockRecipeList{
  display:grid;
  gap:8px;
}
#fwIngredientsBackdrop .fwIngredientInstructionRow,
#paneStockInv .stockRecipeCardInstruction .stockRecipeListRow{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.03);
  color:rgba(234,241,250,0.92);
  font-size:12px;
  line-height:1.4;
}
#fwIngredientsBackdrop .fwIngredientRecipeGrid{
  display:grid;
  gap:10px;
}
#fwIngredientsBackdrop .fwIngredientRecipeRow{
  display:grid;
  grid-template-columns:minmax(180px, 1.2fr) minmax(140px, .8fr) minmax(140px, .8fr);
  gap:12px;
  align-items:end;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.03);
}
#fwIngredientsBackdrop .fwIngredientRecipeLabelWrap{
  display:grid;
  gap:4px;
  min-width:0;
}
#fwIngredientsBackdrop .fwIngredientRecipeLabel{
  font-size:14px;
  font-weight:900;
  color:var(--ink);
  line-height:1.25;
}
#fwIngredientsBackdrop .fwIngredientRecipeMeta{
  font-size:12px;
  color:var(--muted);
  line-height:1.35;
}
#fwIngredientsBackdrop .fwIngredientElementGroup{
  display:grid;
  gap:10px;
}
#fwIngredientsBackdrop .fwIngredientElementGroupHead{
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(226,236,248,0.76);
}
#fwIngredientsBackdrop .fwIngredientElementGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
}
#fwIngredientsBackdrop .fwIngredientElementField input{
  font-weight:850;
}
#paneStockInv .stockRecipeGrid{
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
}
#paneStockInv .stockRecipeCardInstruction{
  gap:10px;
}
#paneStockInv .stockRecipeCardInstruction .stockRecipeCardTop{
  justify-content:flex-start;
}
@media (max-width: 980px){
  #fwIngredientsBackdrop .fwIngredientStockList,
  #fwIngredientsBackdrop .fwIngredientRecipeRow,
  #fwIngredientsBackdrop .fwIngredientAcidGrid,
  #fwIngredientsBackdrop .fwIngredientElementGrid,
  #fwIngredientsBackdrop .fwIngredientAssayMetaGrid{
    grid-template-columns:1fr;
  }
  #fwIngredientsBackdrop .fwIngredientRailHead,
  #fwIngredientsBackdrop .fwIngredientContextCard,
  #fwIngredientsBackdrop .fwIngredientSectionHead{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* Ingredient Specs modal cleanup v9 */
#fwIngredientsBackdrop .fwIngredientModal{
  width:min(980px, calc(100vw - 32px));
  max-height:calc(100vh - 32px);
}
#fwIngredientsBackdrop .fwIngredientModalBody{
  overflow:auto;
  padding:18px 20px 22px;
}
#fwIngredientsBackdrop .fwIngredientShell{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  min-height:0;
}
#fwIngredientsBackdrop .fwIngredientRail,
#fwIngredientsBackdrop .fwIngredientEditorShell{
  display:grid;
  gap:14px;
  min-width:0;
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.07);
  background:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02));
  box-shadow:0 20px 48px rgba(0,0,0,0.24);
  padding:18px;
}
#fwIngredientsBackdrop .fwIngredientRailHead{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
}
#fwIngredientsBackdrop .fwIngredientStockList{
  display:grid;
  grid-template-columns:minmax(280px, 430px) minmax(0,1fr);
  gap:14px;
  align-items:end;
}
#fwIngredientsBackdrop .fwIngredientEditorIntro{
  display:none;
}
#fwIngredientsBackdrop .fwIngredientSelectorMeta,
#fwIngredientsBackdrop .fwIngredientInlineNote{
  display:flex;
  align-items:center;
  min-height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.025);
  padding:10px 12px;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}
#fwIngredientsBackdrop .fwIngredientSimpleCard{
  display:grid;
  gap:16px;
}
#fwIngredientsBackdrop .fwIngredientContextPill{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  margin-bottom:8px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.04);
  color:rgba(236,242,252,0.92);
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
#fwIngredientsBackdrop .fwIngredientSimpleGrid{
  display:grid;
  gap:14px;
}
#fwIngredientsBackdrop .fwIngredientSimpleGridSolid{
  grid-template-columns:minmax(180px, 220px) minmax(0,1fr);
  align-items:start;
}
#fwIngredientsBackdrop .fwIngredientSimpleGridAcid{
  grid-template-columns:repeat(2, minmax(180px, 240px));
  align-items:end;
}
#fwIngredientsBackdrop .fwIngredientElementGroup{
  border:1px solid rgba(255,255,255,0.06);
  border-radius:16px;
  padding:14px;
  background:rgba(255,255,255,0.02);
}
#fwIngredientsBackdrop .fwIngredientElementStack{
  display:grid;
  gap:14px;
}
#fwIngredientsBackdrop .fwIngredientElementGrid{
  grid-template-columns:repeat(3, minmax(140px, 1fr));
}
#fwIngredientsBackdrop .fwIngredientActionRow{
  justify-content:space-between;
  align-items:center;
  margin-top:2px;
}
@media (max-width: 980px){
  #fwIngredientsBackdrop .fwIngredientStockList,
  #fwIngredientsBackdrop .fwIngredientSimpleGridSolid,
  #fwIngredientsBackdrop .fwIngredientSimpleGridAcid,
  #fwIngredientsBackdrop .fwIngredientElementGrid{
    grid-template-columns:1fr;
  }
}


.cameraPreviewWrap,
.cameraCalWrap{
  position:relative;
  width:100%;
  min-height:280px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  background:rgba(12,18,24,0.82);
  overflow:hidden;
}
.cameraPreviewImg{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}
.cameraCalOverlay{
  position:absolute;
  inset:0;
  cursor:crosshair;
}
.cameraRegionBox{
  position:absolute;
  border:2px solid #4dd0e1;
  background:rgba(77,208,225,0.08);
  box-shadow:0 0 0 1px rgba(0,0,0,0.35) inset;
}
.cameraRegionBox span{
  position:absolute;
  left:6px;
  top:6px;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(0,0,0,0.66);
  color:#fff;
  font-size:11px;
  font-weight:700;
}
#settingsCameraOut .miniTable td,
#settingsCameraOut .miniTable th{ white-space:nowrap; }

.cameraCardList{ display:grid; gap:14px; }
.cameraCard{
  border:1px solid rgba(255,255,255,0.10);
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
    rgba(12,18,24,0.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 18px 40px rgba(0,0,0,0.18);
  padding:16px;
}
.cameraCardTitle{ font-weight:900; font-size:18px; line-height:1.1; }
.cameraCardTitleRow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}
.cameraCardSubline{
  color:rgba(226,236,248,0.78);
  font-size:12px;
  margin-top:4px;
}
.cameraCardHelp{
  color:rgba(226,236,248,0.64);
  font-size:12px;
  margin-top:6px;
}
.cameraCardTop{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:start;
}
.cameraCardIdentity{ min-width:0; }
.cameraCardMeta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 0;
}
.cameraCardMetaV2{ margin-top:12px; }
.cameraChip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  font-size:12px;
  color:rgba(240,246,255,0.92);
}
.cameraChip.ok{ border-color:rgba(86,212,125,0.45); background:rgba(86,212,125,0.08); }
.cameraChip.warn{ border-color:rgba(255,196,87,0.45); background:rgba(255,196,87,0.08); }
.cameraChip.info{ border-color:rgba(71,215,255,0.40); background:rgba(71,215,255,0.08); }
.cameraChip.muted{ border-color:rgba(255,255,255,0.12); background:rgba(255,255,255,0.04); }
.cameraStatGrid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.cameraStatTile{
  min-width:0;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
}
.cameraStatLabel{
  font-size:11px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:rgba(226,236,248,0.58);
}
.cameraStatValue{
  margin-top:6px;
  font-size:18px;
  font-weight:850;
  color:var(--ink);
  line-height:1.15;
}
.cameraStatDetail{
  margin-top:5px;
  font-size:12px;
  color:rgba(226,236,248,0.68);
  line-height:1.35;
  word-break:break-word;
}
.cameraCardGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px 16px;
  margin-top:10px;
}
.cameraCardGridV2{
  margin-top:0;
  padding-top:12px;
}
.cameraCardPrimaryActions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}
.cameraCardPrimaryActions button{ min-width:136px; }
.cameraCardActions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.cameraCardActions button{ min-width:120px; }
.cameraCardActionsSecondary{
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,0.08);
}
.cameraCardDetails{
  margin-top:14px;
  border-top:1px solid rgba(255,255,255,0.08);
  padding-top:10px;
}
.cameraCardDetails summary{
  cursor:pointer;
  list-style:none;
  font-weight:700;
  color:rgba(240,246,255,0.92);
}
.cameraCardDetails summary::-webkit-details-marker{ display:none; }
.cameraCardDetails summary::after{
  content:'▾';
  float:right;
  opacity:0.8;
}
.cameraCardDetails[open] summary::after{ content:'▴'; }
.cameraCardDetailsBody{ padding-top:10px; }
.cameraTargetChecklist{
  display:grid;
  gap:8px;
}
.cameraTargetRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
}
.cameraTargetRow.active{ border-color:rgba(77,208,225,0.65); box-shadow:0 0 0 1px rgba(77,208,225,0.25) inset; }
.cameraTargetStatus{ font-size:12px; opacity:0.85; }
.cameraValidationPanel{ margin-top:14px; }
.cameraValidationGrid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:12px; margin-top:8px; }
.cameraValidationCropList{ display:grid; gap:10px; }
.cameraValidationCropItem{ border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:10px; background:rgba(255,255,255,0.03); }
.cameraValidationCropItem img{ width:100%; border-radius:10px; display:block; }
@media (max-width: 980px){
  .cameraStatGrid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .cameraCardTop{ grid-template-columns:1fr; }
  .cameraCardPrimaryActions{ justify-content:flex-start; }
  .cameraCardGrid, .cameraValidationGrid{ grid-template-columns:1fr; }
}

/* 2026-03-16 camera/settings cleanup: authoritative usability layout */
.settingsFieldsHardware{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:14px;
  align-items:start;
}
.settingsActionsSplit{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  width:100%;
  gap:10px;
}
.settingsActionsSplit .neutral,
.settingsActionsSplit .btn,
.settingsActionsSplit .danger{
  min-width:0;
  width:100%;
}
#settingsCameraOut,
#settingsDeviceOut{ min-width:0; }
.cameraCardV2{
  padding:18px;
}
.cameraCardV2 .cameraCardTop{
  grid-template-columns:1fr;
  gap:12px;
}
.cameraCardV2 .cameraCardTitleRow{
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}
.cameraCardV2 .cameraCardSubline,
.cameraCardV2 .cameraCardHelp,
.cameraCardV2 .cameraStatDetail,
.cameraCardV2 .mutedLine{
  overflow-wrap:anywhere;
}
.cameraCardV2 .cameraCardPrimaryActions{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(148px, 1fr));
  justify-content:stretch;
  width:100%;
}
.cameraCardV2 .cameraCardPrimaryActions button,
.cameraCardV2 .cameraCardActionsSecondary button{
  min-width:0;
  width:100%;
}
.cameraCardV2 .cameraStatGrid{
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
}
.cameraCardV2 .cameraStatTile{
  min-height:120px;
}
.cameraCardV2 .cameraCardGrid{
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}
.cameraCardV2 .cameraCardActionsSecondary{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:8px;
}
@media (max-width: 880px){
  .settingsActionsSplit{ grid-template-columns:minmax(0, 1fr); }
  .cameraCardV2 .cameraCardPrimaryActions,
  .cameraCardV2 .cameraCardActionsSecondary,
  .cameraCardV2 .cameraStatGrid{
    grid-template-columns:minmax(0, 1fr);
  }
}


/* --------- Phase 1 Today + Setup shell --------- */
#setupCard,
#dashCard{
  padding:16px;
}
.dashSection,
.setupStep{
  border:1px solid rgba(154,170,196,0.14);
  background:rgba(10,16,26,0.72);
  border-radius:18px;
  padding:14px;
  box-shadow:0 10px 34px rgba(0,0,0,0.18);
}
.dashSection{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.dashSectionHead{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.setupHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:14px;
}
.setupTitle{
  font-size:22px;
  font-weight:800;
  line-height:1.15;
  color:rgba(245,249,255,0.98);
}
.setupSubtitle{
  margin-top:4px;
  color:rgba(191,203,220,0.9);
  font-size:13px;
  line-height:1.45;
}
.setupState,
.setupStepState{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(124,145,173,0.24);
  background:rgba(9,14,24,0.72);
  color:rgba(226,235,246,0.94);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
.setupSteps{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.setupStep{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.setupStepTop{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}
.setupStepTitle{
  font-size:15px;
  font-weight:800;
  color:rgba(245,249,255,0.98);
  line-height:1.25;
}
.setupStepMeta{
  margin-top:4px;
  color:rgba(191,203,220,0.88);
  font-size:13px;
  line-height:1.45;
}
.inboxActionRow{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.feedToolsTabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.feedToolsTab{
  appearance:none;
  border:1px solid rgba(124,145,173,0.22);
  background:rgba(10,16,26,0.72);
  color:rgba(226,235,246,0.94);
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.feedToolsTab.active{
  border-color:rgba(92,209,182,0.48);
  box-shadow:0 0 0 1px rgba(92,209,182,0.22) inset;
  color:rgba(242,250,255,0.98);
}
.navDropHead{
  text-transform:none;
}
@media (max-width: 980px){
  .setupSteps{
    grid-template-columns:1fr;
  }
}


/* 2026-03-16.51 remove next-move action pill */

#dashCard .dashSensorValue{
  color:rgba(234,242,255,0.96);
}

#dashCard .dashSensorValue .dashUnit{
  color:rgba(226,236,249,0.82);
}


/* 2026-03-16.54 premium desktop Today compaction */
@media (min-width: 1180px){
  html[data-page="dash"] #dashCard{
    display:grid;
    grid-template-columns:minmax(0, 1.18fr) minmax(360px, 0.82fr);
    grid-template-areas:
      "head head"
      "env actions"
      "signal groups";
    gap:12px;
    align-content:start;
  }

  #dashCard .dashHead{
    grid-area:head;
    margin-bottom:0;
    padding-bottom:0;
    min-height:0;
  }

  #dashCard .dashSection{
    margin-top:0;
    min-height:0;
    padding:12px;
    gap:10px;
  }

  #dashCard .dashSectionEnv{ grid-area:env; }
  #dashCard .dashSectionSignal{ grid-area:signal; }
  #dashCard .dashSectionGroups{ grid-area:groups; }
  #dashCard .dashSectionActions{ grid-area:actions; }

  #dashCard .dashSectionHead{
    gap:3px;
  }

  #dashCard .dashPanelSub{
    margin-bottom:0;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:1;
    overflow:hidden;
    font-size:12px;
    line-height:1.25;
  }

  #dashCard .dashUpdated{
    font-size:11px;
    letter-spacing:.08em;
  }

  #dashCard .dashSensors{
    gap:12px;
    margin-bottom:0;
  }

  #dashCard .dashSensor{
    min-height:118px;
    padding:14px 16px;
  }

  #dashCard .dashSensorValue{
    font-size:30px;
  }

  #dashCard .dashSensorMeta{
    font-size:10px;
  }

  #dashCard .dashInboxRows{
    gap:8px;
  }

  #dashCard .dashInboxRow{
    min-height:0;
    padding:10px 12px;
    border-radius:13px;
  }

  #dashCard .dashInboxTitle{
    font-size:13px;
    line-height:1.18;
  }

  #dashCard .dashInboxSnippet{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:1;
    overflow:hidden;
    font-size:12px;
    line-height:1.25;
  }

  #dashCard .dashPgGrid{
    grid-template-columns:1fr;
    gap:10px;
  }

  #dashCard .dashPgCard{
    padding:12px;
    min-height:0;
    gap:10px;
  }

  #dashCard .dashPgName{
    font-size:14px;
  }

  #dashCard .dashPgStats{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
  }

  #dashCard .dashPgVal{
    font-size:12px;
  }

  #dashCard .dashActions{
    gap:10px;
  }

  #dashCard .dashActionBtn{
    min-height:68px;
    padding:12px 14px;
    border-radius:14px;
  }

  #dashCard .dashActionWrap{
    gap:4px;
  }

  #dashCard .dashActionMain{
    font-size:15px;
  }

  #dashCard .dashActionSub{
    font-size:11px;
    line-height:1.2;
  }
}


/* 2026-03-17 header lockup sizing + placement refinement */
.top{
  grid-template-columns:1fr;
}

.top .brand{
  grid-column:1 / -1;
}

.pill.brand{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  min-height:102px;
  padding:10px 18px;
  column-gap:18px;
}

.brandStack{
  min-width:0;
  min-height:0;
  display:flex;
  align-items:center;
}

.brandLockup{
  display:block;
  width:auto;
  height:clamp(64px, 5.9vw, 82px);
  max-width:min(100%, 560px);
  object-fit:contain;
  object-position:left center;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,0.16))
    drop-shadow(0 12px 26px rgba(0,0,0,0.34));
}

.brandActions{
  display:flex;
  align-items:center;
  justify-self:end;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:nowrap;
}

#headerUserBadgeSlot{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width:0;
  flex:0 1 auto;
}

#headerUserBadgeSlot .userBadgeBtn{
  min-height:44px;
  padding:0 12px;
  border-radius:16px;
  max-width:220px;
}

#dashCard .dashHead{
  align-items:flex-start;
}

#dashCard .dashHeadSide{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  flex:0 0 auto;
  min-width:0;
}

#dashCard .dashUpdated{
  padding-top:0;
}

#dashCard .dashNetStatus{
  display:flex;
  justify-content:flex-end;
  width:100%;
}

#dashCard #netLabel{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(234,242,255,0.72);
  background:none;
  border:none;
  border-radius:0;
  padding:0;
}

@media (max-width: 1180px){
  .pill.brand{
    min-height:96px;
    padding:10px 16px;
    column-gap:16px;
  }

  .brandLockup{
    height:clamp(58px, 5.4vw, 72px);
    max-width:min(100%, 500px);
  }
}

@media (max-width: 760px){
  .pill.brand{
    grid-template-columns:minmax(0, 1fr);
    row-gap:12px;
    min-height:auto;
  }

  .brandActions{
    width:100%;
    justify-self:start;
    justify-content:flex-start;
    flex-wrap:wrap;
  }

  #headerUserBadgeSlot{
    width:auto;
    justify-content:flex-start;
  }
}

@media (max-width: 720px){
  .brandLockup{
    height:54px;
    max-width:100%;
  }

  #dashCard .dashHeadSide{
    align-items:flex-start;
  }
  #dashCard .dashNetStatus{
    justify-content:flex-start;
  }
}


#panePlantHistory .phPhotoCardBody{
  min-height: 248px;
}
#panePlantHistory .phPhotoEmpty{
  min-height: 220px;
  display:grid;
  place-items:center;
  text-align:center;
  color: var(--muted);
  border:1px dashed rgba(255,255,255,0.10);
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
  padding: 14px;
}
#panePlantHistory .phPhotoShell{
  display:grid;
  gap:10px;
}
#panePlantHistory .phPhotoPreviewWrap{
  display:grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  gap:8px;
  align-items:stretch;
}
#panePlantHistory .phPhotoPreview{
  position:relative;
  display:block;
  min-height: 154px;
  padding:0;
  border-radius: 16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(4,10,18,0.72);
  cursor:pointer;
}
#panePlantHistory .phPhotoPreview img{
  display:block;
  width:100%;
  height:154px;
  object-fit:cover;
}
#panePlantHistory .phPhotoOpenHint{
  position:absolute;
  right:10px;
  bottom:10px;
  padding:5px 8px;
  border-radius:999px;
  background: rgba(7,12,20,0.82);
  border:1px solid rgba(255,255,255,0.12);
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
}
#panePlantHistory .phPhotoNav{
  min-height: 154px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: var(--ink);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  cursor:pointer;
}
#panePlantHistory .phPhotoNav:disabled{
  opacity:.38;
  cursor:default;
}
#panePlantHistory .phPhotoMetaRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color: var(--muted);
}
#panePlantHistory .phPhotoCount{
  font-weight:800;
  color: var(--ink);
}
#panePlantHistory .phPhotoStamp{
  text-align:right;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#panePlantHistory .phPhotoThumbRail{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns: 64px;
  gap:8px;
  overflow-x:auto;
  padding-bottom: 2px;
}
#panePlantHistory .phPhotoThumb{
  padding:0;
  border-radius: 12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  cursor:pointer;
  height:54px;
}
#panePlantHistory .phPhotoThumb.is-active{
  border-color: rgba(71,215,255,0.44);
  box-shadow: 0 0 0 1px rgba(71,215,255,0.24) inset;
}
#panePlantHistory .phPhotoThumb img{
  display:block;
  width:100%;
  height:54px;
  object-fit:cover;
}
@media (max-width: 960px){
  #panePlantHistory .phPhotoMetaRow{
    display:grid;
    justify-content:stretch;
  }
  #panePlantHistory .phPhotoStamp{ text-align:left; }
}

.dashRoomPicker{ display:flex; align-items:center; gap:8px; }
.dashRoomPicker.hidden{ display:none; }
.dashRoomNav{ border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.04); color:inherit; border-radius:12px; width:36px; height:36px; }
.dashRoomSelectBtn{ border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.04); color:inherit; border-radius:14px; padding:8px 12px; display:flex; flex-direction:column; align-items:flex-start; min-width:180px; }
#dashRoomName{ font-weight:700; }
#dashRoomMeta{ opacity:.75; font-size:.82rem; }
.dashPgRoom{ display:inline-flex; align-items:center; border:1px solid rgba(255,255,255,.1); border-radius:999px; padding:2px 8px; font-size:.8rem; opacity:.85; }

.dashControlBasis{ margin-top:12px; padding-top:11px; border-top:1px solid rgba(255,255,255,0.08); display:flex; flex-direction:column; gap:8px; }
.dashControlBasis.hidden{ display:none !important; }
.dashControlBasisHeader{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.dashControlBasisLabel{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(188,206,235,0.72); font-weight:900; }
.dashControlBasisState{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(214,225,245,0.76); font-weight:800; }
.dashControlBasisChips,.dashControlBasisRails{ display:flex; flex-wrap:wrap; gap:8px; }
.dashBasisChip,.dashBasisRail{ display:inline-flex; align-items:center; gap:6px; border:1px solid rgba(255,255,255,0.10); border-radius:999px; padding:5px 10px; background:rgba(255,255,255,0.045); color:rgba(243,248,255,0.96); font-size:11px; line-height:1.15; }
.dashBasisChipPrimary{ background:rgba(71,215,255,0.12); border-color:rgba(71,215,255,0.30); }
.dashBasisChipWarn,.dashBasisRailWarn{ background:rgba(255,196,77,0.10); border-color:rgba(255,196,77,0.28); color:rgba(255,232,191,0.96); }
.dashBasisChipBad{ background:rgba(255,107,107,0.10); border-color:rgba(255,107,107,0.26); color:rgba(255,214,214,0.98); }
.dashBasisChipMuted,.dashBasisRailMuted{ background:rgba(255,255,255,0.028); border-color:rgba(255,255,255,0.08); color:rgba(208,220,240,0.78); }
.dashControlBasisNote{ font-size:11px; line-height:1.35; color:rgba(214,225,245,0.78); }
.dashControlBasisNote.hidden{ display:none !important; }
.dashControlBasisNoteWarn{ color:rgba(255,232,191,0.96); }
.dashControlBasisNoteBad{ color:rgba(255,214,214,0.96); }
@media (max-width: 760px){
  .dashControlBasis{ gap:7px; }
  .dashControlBasisHeader{ gap:8px; }
  .dashBasisChip,.dashBasisRail{ font-size:10px; padding:5px 9px; }
}


.setupTemplateRow{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 12px;}
.setupTemplateBtn{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--text);padding:8px 12px;border-radius:999px;font:inherit;cursor:pointer;}
.setupTemplateBtn:hover{background:rgba(255,255,255,.08);}
.fieldSubtle{font-size:.78em;opacity:.65;font-weight:400;}


/* 2026-03-18 settings modal redesign: compact top navigation and single active workspace */
.settingsModal{
  width:min(1460px, calc(100vw - 24px));
  max-width:1460px;
}
.settingsBody{
  display:flex;
  flex-direction:column;
  padding:0;
  overflow:hidden;
  min-width:0;
  min-height:0;
}
.settingsShell{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  grid-template-rows:auto minmax(0, 1fr);
  width:100%;
  min-width:0;
  min-height:0;
  flex:1;
}
.settingsSidebar{
  min-width:0;
  padding:14px 18px 12px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  background:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  overflow:hidden;
}
.settingsSidebarCard{
  min-width:0;
}
.settingsSidebarIntro h3{
  margin:0;
}
.settingsEyebrow{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(188,206,235,0.72);
  font-weight:900;
}
.settingsNav{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
  align-content:start;
  width:100%;
}
.settingsNavBtn{
  text-align:left;
  border:1px solid rgba(255,255,255,0.09);
  border-radius:16px;
  background:rgba(255,255,255,0.035);
  color:var(--ink);
  padding:14px 15px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  min-height:84px;
  cursor:pointer;
  transition:transform var(--t-fast) var(--ease-out), border-color var(--t-fast) ease, background var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.settingsNavBtn:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.06);
}
.settingsNavBtn.is-active{
  border-color:rgba(123,187,255,0.42);
  background:linear-gradient(180deg, rgba(104,165,255,0.18), rgba(104,165,255,0.08));
  box-shadow:0 10px 24px rgba(12,25,52,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
}
.settingsNavTitle{
  font-weight:900;
  font-size:14px;
}
.settingsNavMeta,
.settingsMiniLabel,
.settingsPanelHint,
.settingsFooterText .mutedLine{
  color:rgba(223,232,245,0.74);
  font-size:12px;
  line-height:1.45;
}
.settingsSidebarStats{display:none;}
.settingsMiniStat{display:none;}
.settingsMiniStat strong{font-size:inherit;line-height:inherit;}
.settingsNoteTitle,
.settingsPanelTitle{
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:900;
  color:rgba(236,242,252,0.88);
}
.settingsMain{
  overflow:auto;
  padding:18px;
  gap:18px;
  min-width:0;
  width:100%;
}
.settingsSection.hidden{
  display:none;
}
.settingsSection{
  padding:22px;
  scroll-margin-top:18px;
  width:100%;
  box-sizing:border-box;
}
.settingsSectionLead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}
.settingsSectionLead h4{
  margin:4px 0 6px;
  font-size:24px;
  line-height:1.1;
}

.settingsCodeBlock{
  margin:0;
  min-height:120px;
  max-height:240px;
  overflow:auto;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(7,13,24,0.46);
  color:rgba(236,243,250,0.9);
  font:12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space:pre-wrap;
  word-break:break-word;
}
.settingsSubcard{
  border:1px solid rgba(255,255,255,0.09);
  border-radius:18px;
  background:rgba(255,255,255,0.03);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
  padding:16px;
}
.settingsSubcard h5{
  margin:0 0 6px;
  font-size:18px;
}
.settingsBriefGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}
.settingsManagerGrid{
  display:grid;
  grid-template-columns:minmax(360px, 460px) minmax(0, 1fr);
  gap:16px;
  align-items:start;
}
.settingsEditorPanel,
.settingsListPanel{
  border:1px solid rgba(255,255,255,0.09);
  border-radius:18px;
  background:rgba(255,255,255,0.03);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
  padding:16px;
  min-width:0;
}
.settingsListPanel{
  min-height:420px;
}
.settingsListPanelFull{
  min-height:260px;
}

.automationSettingsStack{
  display:grid;
  gap:14px;
}
.automationMainStack{
  align-content:start;
}
.automationWorkspace{
  display:grid;
  gap:14px;
}
.automationRoomTopGrid{
  display:grid;
  grid-template-columns:minmax(0, 1.22fr) minmax(300px, 0.78fr);
  gap:14px;
  align-items:start;
}
.automationTopColumn{
  display:grid;
  gap:14px;
  min-width:0;
}
.automationSidebarColumn{
  position:static;
}
.automationDeviceGrid{
  grid-template-columns:minmax(320px, 0.88fr) minmax(0, 1.12fr);
}
.automationDeviceGrid .settingsListPanel{
  min-height:0;
}
.automationDeviceGrid .settingsCodeBlock{
  min-height:108px;
  max-height:160px;
}
.automationDeviceFields{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
.automationDeviceFields .field textarea{
  min-height:82px;
}
.automationDeviceActions{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
.automationDeviceActions .btn:first-child,
.automationDeviceActions .danger:last-child{
  grid-column:span 2;
}
.automationRoleBindingsCard{
  margin-top:0;
}
.automationGroupCard{
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  background:rgba(255,255,255,0.025);
  padding:12px;
}
.automationGroupTitle{
  font-weight:700;
  letter-spacing:.02em;
  margin:0 0 12px;
}
.automationCompactFields{
  grid-template-columns:repeat(3, minmax(0,1fr));
}
.automationCompactFieldsTwo{
  grid-template-columns:repeat(2, minmax(0,1fr));
}
.automationCompactFieldsThree{
  grid-template-columns:repeat(3, minmax(0,1fr));
}
.automationRoleGrid{
  display:grid;
  gap:10px;
}
.automationRoleGridHead,
.automationRoleRow{
  display:grid;
  grid-template-columns:minmax(220px, 1.15fr) minmax(180px, 1fr) minmax(150px, .8fr) minmax(160px, .95fr);
  gap:10px;
  align-items:start;
}
.automationRoleGridHead{
  color:rgba(255,255,255,0.62);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:0 4px 2px;
}
.automationRoleRow{
  border:1px solid rgba(255,255,255,0.07);
  border-radius:14px;
  background:rgba(255,255,255,0.03);
  padding:12px;
}
.automationRoleInfo{
  display:grid;
  gap:4px;
}
.automationRoleInfo span,
.automationRoleSpacer{
  color:rgba(255,255,255,0.68);
  font-size:13px;
  line-height:1.45;
}
.automationCellLabel{
  display:none;
}
.automationActionGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}
.automationActionGridPrimary .btn:first-child{
  grid-column:1 / -1;
}
.automationActionGridSecondary{
  margin-top:10px;
}
.automationActionGrid button{
  width:100%;
  min-height:46px;
}
.automationQuickActionsCard{
  display:grid;
  gap:12px;
}
.automationSidebarHint{
  color:rgba(255,255,255,0.72);
  line-height:1.5;
  font-size:13px;
}
.automationLocationState{
  display:grid;
  gap:6px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  background:rgba(0,0,0,0.16);
  padding:12px;
}
.automationLocationStateTitle{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(255,255,255,0.62);
}
.automationLocationStateValue{
  font-weight:600;
  line-height:1.4;
}
.automationLocationMeta{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:8px 12px;
  margin-top:4px;
}
.automationLocationMetaRow{
  display:grid;
  gap:2px;
  border-top:1px solid rgba(255,255,255,0.06);
  padding-top:8px;
}
.automationLocationMetaRow span{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(255,255,255,0.58);
}
.automationLocationMetaRow strong{
  font-weight:600;
  line-height:1.4;
  word-break:break-word;
}
.automationLocationStateNote{
  color:rgba(255,255,255,0.74);
  line-height:1.5;
  font-size:13px;
}
.automationLocationStateOk{
  border-color:rgba(124, 212, 144, 0.28);
  background:rgba(124, 212, 144, 0.10);
}
.automationLocationStateWarn{
  border-color:rgba(255,198,92,0.30);
  background:rgba(255,198,92,0.10);
}
.automationLocationStateBad{
  border-color:rgba(255,118,118,0.26);
  background:rgba(255,118,118,0.10);
}
.automationDisclosure{
  margin-top:0;
  min-height:0;
}
.automationDisclosure > summary{
  cursor:pointer;
  font-weight:700;
  list-style:none;
}
.automationDisclosure > summary::-webkit-details-marker{
  display:none;
}
.automationDisclosure > summary::before{
  content:'▸';
  display:inline-block;
  margin-right:8px;
  transition:transform .15s ease;
}
.automationDisclosure[open] > summary::before{
  transform:rotate(90deg);
}
.automationStatusWrap{
  display:grid;
  gap:10px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  background:rgba(0,0,0,0.14);
  padding:12px;
}
.automationStatusChips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.automationStatusChip{
  border:1px solid rgba(255,255,255,0.10);
  border-radius:999px;
  background:rgba(255,255,255,0.04);
  padding:6px 10px;
  font-size:12px;
  color:rgba(255,255,255,0.84);
}
.automationStatusChipWarn{
  border-color:rgba(255,198,92,0.34);
  background:rgba(255,198,92,0.12);
}
.automationStatusMain{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
}
.automationStatusLabel{
  font-size:12px;
  color:rgba(255,255,255,0.62);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:4px;
}
.automationStatusValue{
  font-weight:600;
  line-height:1.4;
}
.automationStatusNote{
  color:rgba(255,255,255,0.76);
  line-height:1.5;
}
.automationStatusNoteWarn{
  color:#ffd37a;
}
@media (max-width: 1180px){
  .automationDeviceGrid,
  .automationRoomTopGrid,
  .automationCompactFields,
  .automationCompactFieldsTwo,
  .automationCompactFieldsThree,
  .automationDeviceFields,
  .automationStatusMain,
  .automationRoleGridHead,
  .automationRoleRow,
  .automationActionGrid,
  .automationDeviceActions{
    grid-template-columns:minmax(0,1fr);
  }
  .automationSidebarColumn{
    position:static;
  }
  .automationDeviceActions .btn:first-child,
  .automationDeviceActions .danger:last-child{
    grid-column:auto;
  }
  .automationRoleGridHead{ display:none; }
  .automationCellLabel{ display:block; }
}
.settingsPanelHint{
  margin:6px 0 12px;
}

.settingsWarningCard{
  display:grid;
  gap:12px;
  border-color:rgba(255,198,92,0.28);
  background:rgba(255,198,92,0.08);
}
.settingsWarningToggle{
  align-items:flex-start;
}
.settingsEnvironmentRailsToolbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:16px 0;
}
.settingsEnvironmentRailsOut{
  display:grid;
  gap:14px;
}
.settingsEnvironmentStageStack{
  display:grid;
  gap:14px;
}
.settingsEnvironmentStageCard{
  border:1px solid rgba(255,255,255,0.09);
  border-radius:18px;
  background:rgba(255,255,255,0.03);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
  padding:16px;
}
.settingsEnvironmentStageCard h5{
  margin:0 0 12px;
  font-size:18px;
}
.settingsEnvironmentStageGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px 14px;
}
.settingsEnvironmentFieldRow{
  display:grid;
  gap:8px;
}
.settingsEnvironmentFieldLabel{
  font-size:13px;
  font-weight:700;
  color:rgba(236,242,252,0.88);
}
.settingsEnvironmentFieldLabel span{
  color:rgba(223,232,245,0.64);
  font-weight:600;
  margin-left:6px;
}
.settingsEnvironmentPair{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}
.settingsEnvironmentPair .field span{
  display:block;
  margin-bottom:6px;
  font-size:12px;
  color:rgba(223,232,245,0.7);
}
@media (max-width: 980px){
  .settingsEnvironmentStageGrid{
    grid-template-columns:minmax(0,1fr);
  }
}
.settingsCameraToolbar{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:10px;
  margin-bottom:14px;
}
.settingsCameraToolbar .neutral{
  width:100%;
  min-height:48px;
  border-radius:16px;
}
.settingsFooterBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
  padding:16px 18px;
  margin-top:18px;
  margin-bottom:2px;
}
.settingsActionsFooter{
  padding-top:0;
}
.settingsActionsFooter .neutral{
  min-width:240px;
  min-height:50px;
}
.settingsFooterBar.hidden{
  display:none;
}
.settingsPane .field{
  min-width:0;
}
.settingsPane input[type="time"],
.settingsPane select,
.settingsPane input[type="text"],
.settingsPane input:not([type]),
.settingsPane textarea{
  width:100%;
}
#settingsRoomsOut,
#settingsDeviceOut,
#settingsCameraOut{
  min-width:0;
}
#settingsRoomsOut .miniTable,
#settingsDeviceOut .miniTable{
  width:100%;
}
#settingsRoomsOut [data-room-id],
#settingsDeviceOut [data-device-id]{
  cursor:pointer;
}
#settingsRoomsOut [data-room-id].is-selected,
#settingsDeviceOut [data-device-id].is-selected{
  outline:1px solid rgba(123,187,255,0.42);
  background:rgba(104,165,255,0.10);
}
#settingsRoomsOut td,
#settingsRoomsOut th,
#settingsDeviceOut td,
#settingsDeviceOut th{
  vertical-align:top;
}
.settingsCardHead h4,
.settingsCardHead h5{
  letter-spacing:0;
  text-transform:none;
}
@media (max-width: 1240px){
  .settingsNav{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 980px){
  .settingsNav{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px){
  .settingsBriefGrid,
  .settingsManagerGrid{
    grid-template-columns:minmax(0, 1fr);
  }
  .settingsFooterBar{
    flex-direction:column;
    align-items:stretch;
  }
  .settingsActionsFooter,
  .settingsActionsFooter .neutral{
    width:100%;
    min-width:0;
  }
}
@media (max-width: 720px){
  .settingsModal{
    width:min(100vw, calc(100vw - 12px));
    max-height:calc(100vh - 12px);
    border-radius:18px;
  }
  .settingsSidebar,
  .settingsMain{
    padding:12px;
  }
  .settingsSection,
  .settingsEditorPanel,
  .settingsListPanel,
  .settingsSubcard,
  .settingsFooterBar{
    padding:14px;
    border-radius:16px;
  }
}
.dashControlBasisNoteMuted{ color:rgba(208,220,240,0.78); }