:root {
      --bg-main: #f5f5f5;
      --bg-card: #ffffff;
      --border-soft: rgba(0, 0, 0, 0.08);
      --text-main: #111827;
      --text-muted: #6b7280;
      --node-min-size: 50px;
      --node-max-size: 200px;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
      "Segoe UI", sans-serif;
      color: var(--text-main);
      background: var(--bg-main);
      height: 100vh;
      overflow: hidden;
    }

    .app {
      position: relative;
      width: 100%;
      height: 100vh;
    }

    /* GARDEN SIDE */
    .garden-container {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #f5f5f5;
    }

    #connections-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .nodes-layer {
      position: absolute;
      inset: 0;
    }

    /* ORBS – flat, no glow, no shadow */
    .node {
      position: absolute;
      border-radius: 50%;
      cursor: pointer;
      overflow: visible;        /* label can sit outside circle */
      border: none;
      box-shadow: none;
      transform: translate(-50%, -50%);
      transition: transform 0.12s ease-out;
    }

    .node:hover {
      box-shadow: none;
      transform: translate(-50%, -50%) scale(1.02);
    }

    .node.selected {
      box-shadow: none;
      transform: translate(-50%, -50%) scale(1.04);
      z-index: 5;
    }

        /* existing */
    .node-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    box-shadow: none;
    filter: none;
    overflow: hidden;      /* already there */
    position: relative;    /* <-- add this line */
    }

    /* NEW: grain overlay */
    .node-inner::after {
    content: "";
    position: absolute;
    inset: -1px; /* cover full circle edge-to-edge */
    pointer-events: none;
    border-radius: inherit;
    opacity: 5;  /* tweak strength of grain */
    mix-blend-mode: soft-light;

    /* SVG noise texture */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1' numOctaves='3' stitchTiles='noStitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px; /* adjust for finer/coarser grain */
    }


    .node-weak .node-inner {
      background: grey 70%;
    }

    .node-dead .node-inner {
      background: black 70%;
    }

    /* label BELOW orb */
    .node-label {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translate(-50%, 6px);
      white-space: nowrap;
      font-size: 11px;
      text-align: center;
      color: #111827;
      pointer-events: none;
      line-height: 1.3;
    }

    .node-label .node-percent {
      display: block;
      font-size: 10px;
      color: #6b7280;
    }

    .time-indicator {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 2px;
    }

    /* HEADER OVERLAY (top-left) – only subtle text now */
    .header-overlay {
      position: absolute;
      top: 24px;
      left: 32px;
      max-width: 320px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      pointer-events: none;
    }

    .title {
      display: none; /* hide heading completely */
    }

    .subtitle {
      font-size: 13px;
      color: var(--text-muted);
    }

    .small { font-size: 11px; color: var(--text-muted); }

    .header-summary {
      margin-top: 6px;
    }

    /* hide the red status text entirely */
    .status-message {
      display: none;
    }

    /* PLUS ORB (add new connection) – bottom-right */
    .garden-add-orb {
      position: absolute;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      right: 32px;
      bottom: 32px;
      background:black;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40px;
      color: white;
      cursor: pointer;
      box-shadow: none;
      border: none;
    }

    .garden-add-orb:hover {
      transform: scale(1.03);
    }

    /* Small popup form near the plus orb */
    .add-form {
      position: absolute;
      right: 32px;
      bottom: 130px;
      display: none;
      z-index: 10;
    }

    .add-form-card {
      background: var(--bg-card);
      border-radius: 14px;
      padding: 10px 12px;
      border: 1px solid var(--border-soft);
      box-shadow: 0 10px 25px rgba(0,0,0,0.08);
      min-width: 210px;
      font-size: 12px;
    }

    .add-form-row {
      display: flex;
      flex-direction: column;
      margin-bottom: 6px;
    }

    .add-form-row label {
      font-size: 11px;
      color: var(--text-muted);
      margin-bottom: 2px;
    }

    .add-field {
      padding: 5px 7px;
      border-radius: 8px;
      border: 1px solid rgba(209,213,219,0.9);
      font-size: 12px;
      background: #fff;
    }

    .add-form-actions {
      display: flex;
      justify-content: flex-end;
      gap: 6px;
      margin-top: 4px;
    }

    .btn-small {
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid rgba(209,213,219,0.9);
      background: #f9fafb;
      font-size: 11px;
      cursor: pointer;
    }

    .btn-small.primary {
      background: #111827;
      color: #f9fafb;
      border-color: #111827;
    }

    /* WATERING BUTTONS – vertical on right */
    .watering-panel {
      position: absolute;
      top: 50%;
      right: 32px;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    button { border: none; cursor: pointer; font: inherit; }

    .btn {
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 11px;
      border: 1px solid rgba(209, 213, 219, 0.9);
      background: #f9fafb;
      color: var(--text-main);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition:
        background 0.15s ease-out,
        transform 0.06s ease-out,
        box-shadow 0.15s ease-out,
        border-color 0.15s ease-out;
    }

    .btn span.emoji { font-size: 13px; }

    .btn:hover {
      background: #eff6ff;
      border-color: rgba(59, 130, 246, 0.8);
      box-shadow: 0 0 15px rgba(191, 219, 254, 0.8);
      transform: translateY(-0.5px);
    }