/* ======================================================= */
    /* 4. SPECIMEN DETAIL MODAL (MASTER APPROVED DETAIL)       */
    /* ======================================================= */
    #detail-view {
      position: fixed;
      inset: 0;
      background: var(--bg);
      z-index: 1100;
      overflow-y: auto;
      padding-bottom: 80px;
      display: none;
      opacity: 1;
      transform: translateY(0);
      transition: opacity 260ms var(--spring-sheet, cubic-bezier(0.22, 1, 0.36, 1)),
                  transform 280ms var(--spring-sheet, cubic-bezier(0.22, 1, 0.36, 1));
    }

    @starting-style {
      #detail-view {
        opacity: 0;
        transform: translateY(24px);
      }
    }

    @keyframes canopyHeroPhotoSettle {
      from {
        transform: scale(1.045);
      }
      to {
        transform: scale(1);
      }
    }

    .detail-viewport {
      width: 100%;
      max-width: 480px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
    }

    .hero-full-section {
      position: relative;
      width: 100%;
      height: 310px;
      min-height: 310px;
      background: #11281E;
      flex-shrink: 0;
      overflow: hidden;
    }

    .hero-full-section img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      animation: canopyHeroPhotoSettle 420ms var(--spring-sheet, cubic-bezier(0.22, 1, 0.36, 1)) backwards;
    }

    .hero-floating-nav {
      position: absolute;
      top: max(56px, calc(env(safe-area-inset-top, 0px) + 16px)) !important;
      left: 16px;
      right: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 20;
    }

    .hero-nav-pill {
      background: var(--glass-pill-bg);
      backdrop-filter: blur(16px) saturate(160%);
      -webkit-backdrop-filter: blur(16px) saturate(160%);
      border: 1px solid var(--glass-pill-border);
      box-shadow: var(--glass-pill-shadow);
      color: #F0FDF4 !important;
      padding: 7px 13px;
      border-radius: 20px;
      font-size: var(--fs-base);
      font-weight: var(--fw-bold);
      display: flex;
      align-items: center;
      gap: 5px;
      cursor: pointer;
    }

    .photo-duration-badge {
      background: var(--glass-pill-bg);
      backdrop-filter: blur(16px) saturate(160%);
      -webkit-backdrop-filter: blur(16px) saturate(160%);
      border: 1px solid var(--glass-pill-border);
      box-shadow: var(--glass-pill-shadow);
      color: #F0FDF4 !important;
      font-family: var(--font-mono);
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      letter-spacing: 0.05em;
      padding: 6px 12px;
      border-radius: 20px;
    }

    .change-photo-badge {
      position: absolute;
      bottom: 14px;
      right: 16px;
      background: var(--glass-pill-bg);
      backdrop-filter: blur(16px) saturate(160%);
      -webkit-backdrop-filter: blur(16px) saturate(160%);
      border: 1px solid var(--glass-pill-border);
      box-shadow: var(--glass-pill-shadow);
      color: #F0FDF4 !important;
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      letter-spacing: 0.04em;
      padding: 5px 11px;
      border-radius: 14px;
      cursor: pointer;
    }

    .detail-content-body {
      padding: 16px 18px 30px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      background: var(--bg);
    }

    .specimen-identity-card {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 18px;
      padding: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: var(--card-elevation);
    }

    .specimen-identity-block {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .specimen-detail-name {
      font-size: var(--fs-xl);
      font-weight: var(--fw-bold);
      letter-spacing: -0.02em;
      color: var(--text-primary);
      line-height: 1.15;
    }

    .specimen-detail-species {
      font-size: var(--fs-base);
      font-style: italic;
      font-weight: var(--fw-medium);
      color: var(--text-secondary);
    }

    .specimen-acquisition {
      font-size: var(--fs-sm);
      font-weight: var(--fw-medium);
      color: #557562;
      margin-top: 1px;
    }

    .btn-water-standalone {
      width: 100%;
      height: 48px;
      background: var(--urgent-red);
      color: #FFFFFF;
      border: none;
      border-radius: 12px;
      font-size: var(--fs-sm);
      font-weight: var(--fw-bold);
      letter-spacing: 0.05em;
      text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(185, 28, 28, 0.28);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Dedicated Hydration Status Card */
    .hydration-status-card {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 16px;
      padding: 14px 16px;
      box-shadow: 0 2px 8px rgba(13, 36, 22, 0.04);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .hydration-status-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .hydration-status-title {
      font-family: var(--font-serif);
      font-size: var(--fs-md);
      font-weight: var(--fw-bold);
      letter-spacing: -0.02em;
      color: var(--text-primary);
    }

    .hydration-status-countdown {
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      color: var(--text-accent);
      background: var(--card-inner);
      border: 1px solid var(--card-border-subtle);
      padding: 3px 9px;
      border-radius: 10px;
      letter-spacing: 0.02em;
    }

    .hydration-spectrum-track {
      width: 100%;
      height: 8px;
      background: var(--card-inner, #F3F7F4);
      border: 1px solid var(--card-border-subtle, #D8E4DC);
      border-radius: 6px;
      overflow: hidden;
      position: relative;
    }

    .hydration-track-bar {
      height: 100%;
      background: var(--text-accent);
      border-radius: 5px;
      transition: width 0.35s ease, background 0.35s ease;
    }

    .hydration-status-labels {
      display: flex;
      justify-content: space-between;
      font-size: var(--fs-xs);
      font-weight: var(--fw-medium);
      color: var(--text-secondary);
    }

    /* Sleek Lux Slider */
    .light-slider-card {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 18px;
      padding: 15px 16px;
      box-shadow: var(--card-elevation);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .light-header-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .light-title {
      font-family: var(--font-serif);
      font-size: var(--fs-md);
      font-weight: var(--fw-bold);
      letter-spacing: -0.02em;
      color: var(--text-primary);
    }

    .light-val-badge {
      font-family: var(--font-sans);
      font-size: var(--fs-sm);
      font-weight: var(--fw-bold);
      font-variant-numeric: tabular-nums;
      color: var(--text-accent);
      background: transparent;
      border: none;
      padding: 0;
      border-radius: 0;
      letter-spacing: -0.01em;
      transition: color 0.18s ease;
    }

    .light-val-badge[data-light-state="low"] {
      color: #0284C7;
    }

    .light-val-badge[data-light-state="optimal"] {
      color: var(--text-accent);
    }

    .light-val-badge[data-light-state="high"] {
      color: #D97706;
    }

    /* Option A: Continuous Luminous Capsule + Ceramic Thumb (Plant-Specific Databank Zones) */
    .light-spectrum-track {
      --lux-step: 6;
      --lux-ratio: calc((var(--lux-step) - 1) / 9);
      --thumb-pct: calc(11px + (100% - 22px) * var(--lux-ratio));
      --plant-light-gradient: linear-gradient(90deg, #38BDF8 0%, #0EA5E9 18%, #22C55E 26%, #15803D 56%, #F59E0B 64%, #EA580C 100%);
      position: relative;
      height: 28px;
      display: flex;
      align-items: center;
      cursor: pointer;
      touch-action: pan-y;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
      outline: none;
    }

    .light-capsule-rail {
      position: relative;
      width: 100%;
      height: 12px;
      border-radius: 99px;
      background: var(--card-inner);
      border: 1px solid var(--card-border-subtle);
      box-shadow: inset 0 1px 2px rgba(13, 36, 22, 0.10);
      overflow: hidden;
    }

    .light-capsule-rail::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--plant-light-gradient);
      opacity: 0.22;
      pointer-events: none;
    }

    .light-capsule-fill {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border-radius: 99px;
      background: var(--plant-light-gradient);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
      clip-path: inset(0 calc(100% - var(--thumb-pct)) 0 0 round 99px);
      transition: clip-path 0.14s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .light-capsule-dots {
      position: absolute;
      inset: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;
      pointer-events: none;
      z-index: 2;
    }

    .light-segment {
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: rgba(13, 36, 22, 0.22);
      transition: background 0.14s ease;
    }

    .light-segment.filled {
      background: rgba(255, 255, 255, 0.78);
    }

    .light-capsule-thumb {
      position: absolute;
      top: 50%;
      left: var(--thumb-pct);
      transform: translate(-50%, -50%);
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #FFFFFF;
      border: 2.5px solid var(--text-accent);
      box-shadow: 0 2px 8px rgba(13, 36, 22, 0.22), 0 0 0 3px color-mix(in srgb, var(--text-accent) 16%, transparent);
      transition: left 0.14s cubic-bezier(0.22, 1, 0.36, 1), transform 0.14s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease, box-shadow 0.2s ease;
      pointer-events: none;
      z-index: 3;
    }

    .light-spectrum-track[data-light-state="low"] .light-capsule-thumb {
      border-color: #0284C7;
      box-shadow: 0 2px 8px rgba(13, 36, 22, 0.22), 0 0 0 3px rgba(2, 132, 199, 0.18);
    }

    .light-spectrum-track[data-light-state="optimal"] .light-capsule-thumb {
      border-color: var(--text-accent);
      box-shadow: 0 2px 8px rgba(13, 36, 22, 0.22), 0 0 0 3px color-mix(in srgb, var(--text-accent) 16%, transparent);
    }

    .light-spectrum-track[data-light-state="high"] .light-capsule-thumb {
      border-color: #D97706;
      box-shadow: 0 2px 8px rgba(13, 36, 22, 0.22), 0 0 0 3px rgba(217, 119, 6, 0.18);
    }

    .light-spectrum-track.scrubbing .light-capsule-fill,
    .light-spectrum-track.scrubbing .light-capsule-thumb {
      transition: none;
    }

    .light-spectrum-track.scrubbing .light-capsule-thumb {
      transform: translate(-50%, -50%) scale(1.12);
    }

    .light-labels-row {
      display: flex;
      justify-content: space-between;
      font-size: var(--fs-xs);
      font-weight: var(--fw-medium);
      color: var(--text-secondary);
    }

    .light-zone-lbl {
      cursor: pointer;
      transition: color 0.18s ease;
      -webkit-tap-highlight-color: transparent;
    }

    .light-zone-lbl.active {
      font-weight: var(--fw-bold);
      color: var(--text-accent);
    }

    .light-zone-lbl.active[data-light-state="low"] {
      color: #0284C7;
    }

    .light-zone-lbl.active[data-light-state="high"] {
      color: #D97706;
    }

    .notes-card-expanding {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 18px;
      padding: 15px 16px;
      box-shadow: var(--card-elevation);
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .notes-header-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .notes-title,
    .lifeline-card-title {
      font-family: var(--font-serif);
      font-size: var(--fs-md);
      font-weight: var(--fw-bold);
      letter-spacing: -0.02em;
      color: var(--text-primary);
    }

    .notes-save-btn {
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      letter-spacing: 0.04em;
      color: var(--text-accent);
      background: none;
      border: none;
      cursor: pointer;
    }

    .notes-expanding-field {
      background: var(--card-inner);
      border: 1px solid var(--card-border-subtle);
      border-radius: 10px;
      padding: 10px 12px;
      font-size: var(--fs-sm);
      font-weight: var(--fw-medium);
      color: var(--text-primary);
      line-height: 1.45;
      outline: none;
      min-height: 60px;
      resize: vertical;
    }

    .tab-slider-bar {
      display: flex;
      background: var(--card-inner, #F3F7F4);
      border: 1px solid var(--card-border, #C8D7CD);
      border-radius: 12px;
      padding: 3px;
      gap: 3px;
      width: 100%;
      box-sizing: border-box;
    }

    .tab-slider-pill {
      flex: 1 1 0;
      min-width: 0;
      background: transparent;
      border: none;
      padding: 8px 2px;
      border-radius: 9px;
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      color: var(--text-secondary);
      cursor: pointer;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      text-align: center;
      white-space: nowrap;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
    }

    .tab-slider-pill.active {
      background: var(--card-bg, #FFFFFF);
      color: var(--text-accent, #15803D);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    }

    .tab-panel-container {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 16px;
      padding: 14px 16px;
      box-shadow: 0 2px 8px rgba(13, 36, 22, 0.04);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* ======================================================= */
    /* 5. UNIFIED FLOATING GLASS CAPSULE DOCK (OPTION A)       */
    /* ======================================================= */
    .dock-navigation {
      position: fixed;
      bottom: max(16px, env(safe-area-inset-bottom, 16px));
      left: 14px;
      right: 14px;
      height: 56px;
      background: color-mix(in srgb, var(--card-bg) 88%, transparent);
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      border: 1px solid var(--card-border);
      border-radius: 999px;
      box-shadow: var(--card-specular-rim), 0 12px 28px -4px rgba(13, 36, 22, 0.18), 0 4px 10px rgba(13, 36, 22, 0.08);
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 5px;
      z-index: 85;
      max-width: 452px;
      margin: 0 auto;
      box-sizing: border-box;
    }

    .dock-tabs-track {
      --tab-count: 3;
      --active-tab-index: 0;
      position: relative;
      flex: 1;
      height: 100%;
      display: flex;
      align-items: center;
      min-width: 0;
      isolation: isolate;
    }

    .dock-tabs-track::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: calc(100% / var(--tab-count, 3));
      border-radius: 999px;
      background: var(--card-bg);
      border: 1px solid var(--card-border-subtle);
      box-shadow: var(--card-specular-rim), 0 2px 8px rgba(13, 36, 22, 0.09);
      transform: translateX(calc(var(--active-tab-index, 0) * 100%));
      transition: transform 280ms var(--spring-sheet, cubic-bezier(0.22, 1, 0.36, 1)),
                  width 280ms var(--spring-sheet, cubic-bezier(0.22, 1, 0.36, 1));
      z-index: 0;
      pointer-events: none;
      box-sizing: border-box;
    }

    [data-theme="white"] .dock-tabs-track::before {
      background: var(--card-inner);
      border-color: var(--card-border);
    }

    .dock-nav-item {
      position: relative;
      z-index: 1;
      flex: 1 1 0;
      min-width: 0;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      border-radius: 999px;
      color: var(--text-secondary);
      cursor: pointer;
      padding: 0 6px;
      transition: color 180ms ease, transform 150ms ease;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

    .dock-nav-item:active {
      transform: scale(0.96);
    }

    .dock-nav-item.active {
      color: var(--text-primary);
    }

    .dock-nav-label {
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      letter-spacing: 0.05em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .dock-active-indicator {
      display: none !important;
    }

    .floating-action-btn {
      position: relative;
      bottom: auto;
      right: auto;
      width: 44px;
      height: 44px;
      min-width: 44px;
      border-radius: 50%;
      background: var(--text-accent);
      color: #FFFFFF;
      border: none;
      padding: 0;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 12px rgba(21, 128, 61, 0.34);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: transform 200ms var(--spring-pop, cubic-bezier(0.34, 1.56, 0.64, 1));
      -webkit-tap-highlight-color: transparent;
    }

    .floating-action-btn svg {
      display: block;
    }

    .floating-action-btn:active {
      transform: scale(0.91);
    }

    /* ======================================================= */
    /* 6. UNIVERSAL SEARCH OVERLAY (MASTER APPROVED SEARCH)    */
    /* ======================================================= */
    #search-overlay-modal {
      position: fixed;
      inset: 0;
      background: var(--bg);
      z-index: 2100;
      display: none;
      flex-direction: column;
      overflow-y: auto;
      opacity: 1;
      transform: translateY(0);
      transition: opacity 240ms var(--spring-sheet, cubic-bezier(0.22, 1, 0.36, 1)),
                  transform 260ms var(--spring-sheet, cubic-bezier(0.22, 1, 0.36, 1));
    }

    .search-sheet-header {
      padding: var(--safe-top) 18px 14px;
      background: var(--header-bg);
      border-bottom: 1px solid var(--card-border-subtle);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-shrink: 0;
    }

    .search-sheet-input-wrap {
      flex: 1;
      position: relative;
    }

    .search-sheet-input {
      width: 100%;
      height: 42px;
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 12px;
      padding: 0 14px 0 38px;
      font-size: var(--fs-base);
      font-weight: var(--fw-medium);
      color: var(--text-primary);
      outline: none;
    }

    .search-sheet-cancel {
      background: none;
      border: none;
      font-size: var(--fs-base);
      font-weight: var(--fw-bold);
      color: var(--text-secondary);
      cursor: pointer;
    }

    /* Fullscreen Creation Flow Modal */
    #creation-flow-modal {
      position: fixed;
      inset: 0;
      background: var(--bg);
      z-index: 2100;
      display: none;
      flex-direction: column;
      overflow-y: auto;
      opacity: 1;
      transform: translateY(0);
      transition: opacity 260ms var(--spring-sheet, cubic-bezier(0.22, 1, 0.36, 1)),
                  transform 280ms var(--spring-sheet, cubic-bezier(0.22, 1, 0.36, 1));
    }

    /* Modals Overlay & Content Window */
    .modal-overlay, .photo-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.75);
      backdrop-filter: blur(10px);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 2500;
      padding: var(--safe-top) 16px var(--safe-bottom) 16px;
      box-sizing: border-box;
      opacity: 1;
      transition: opacity 220ms var(--spring-sheet, cubic-bezier(0.22, 1, 0.36, 1));
    }

    .modal-content {
      background: var(--card-bg, #FFFFFF);
      border: 1px solid var(--card-border, #C8D7CD);
      border-radius: 20px;
      width: 100%;
      max-width: 440px;
      max-height: calc(100vh - 96px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      padding: 24px 20px max(32px, env(safe-area-inset-bottom, 24px)) 20px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
      display: flex;
      flex-direction: column;
      position: relative;
      box-sizing: border-box;
      opacity: 1;
      transform: translateY(0) scale(1);
      transition: opacity 240ms var(--spring-sheet, cubic-bezier(0.22, 1, 0.36, 1)),
                  transform 260ms var(--spring-sheet, cubic-bezier(0.22, 1, 0.36, 1));
    }

    @starting-style {
      #search-overlay-modal,
      #creation-flow-modal {
        opacity: 0;
        transform: translateY(20px);
      }
      .modal-overlay,
      .photo-modal-overlay {
        opacity: 0;
      }
      .modal-overlay .modal-content {
        opacity: 0;
        transform: translateY(14px) scale(0.985);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #detail-view,
      #search-overlay-modal,
      #creation-flow-modal,
      .modal-overlay,
      .photo-modal-overlay,
      .modal-content,
      .hero-full-section img {
        transition: none !important;
        animation: none !important;
      }
    }

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--card-border-subtle, #D8E4DC);
    }

    .modal-header h2 {
      font-size: var(--fs-md);
      font-weight: var(--fw-bold);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--text-primary, #11281E);
      margin: 0;
    }

    /* Modal Form Elements */
    .form-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 16px;
    }

    .form-group label {
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-secondary);
    }

    .form-group select,
    .form-group textarea,
    .form-group input[type="text"],
    .form-group input[type="password"],
    .form-group input[type="email"],
    .form-group input[type="number"],
    .form-group input[type="search"] {
      width: 100%;
      background: var(--card-inner, #F3F7F4);
      border: 1px solid var(--card-border, #C8D7CD);
      border-radius: 10px;
      padding: 10px 12px;
      font-size: var(--fs-base);
      color: var(--text-primary);
      outline: none;
      box-sizing: border-box;
      transition: border-color 0.15s ease;
    }

    .form-group select:focus,
    .form-group textarea:focus,
    .form-group input[type="text"]:focus,
    .form-group input[type="password"]:focus,
    .form-group input[type="email"]:focus,
    .form-group input[type="number"]:focus,
    .form-group input[type="search"]:focus {
      border-color: var(--text-accent, #15803D);
    }

    /* Modern Styled File Upload Button */
    .form-group input[type="file"] {
      width: 100%;
      font-size: var(--fs-sm);
      color: var(--text-secondary);
      background: var(--card-inner, #F3F7F4);
      border: 1px dashed var(--card-border, #C8D7CD);
      border-radius: 10px;
      padding: 10px 12px;
      box-sizing: border-box;
      cursor: pointer;
    }

    .form-group input[type="file"]::file-selector-button {
      background: var(--card-bg, #FFFFFF);
      border: 1px solid var(--card-border, #C8D7CD);
      border-radius: 8px;
      padding: 7px 14px;
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--text-primary);
      cursor: pointer;
      transition: all 0.15s ease;
      margin-right: 12px;
    }

    .form-group input[type="file"]::-webkit-file-upload-button {
      background: var(--card-bg, #FFFFFF);
      border: 1px solid var(--card-border, #C8D7CD);
      border-radius: 8px;
      padding: 7px 14px;
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--text-primary);
      cursor: pointer;
      transition: all 0.15s ease;
      margin-right: 12px;
    }

    .form-group input[type="file"]::file-selector-button:hover,
    .form-group input[type="file"]::-webkit-file-upload-button:hover {
      background: var(--card-border-subtle, #D8E4DC);
    }

    /* Modal Submit Button Matching Canopy Primary Action Buttons */
    .btn-submit {
      width: 100%;
      padding: 13px;
      background: var(--text-accent, #15803D);
      color: #FFFFFF;
      border: none;
      border-radius: 12px;
      font-size: var(--fs-sm);
      font-weight: var(--fw-bold);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.15s ease;
      box-shadow: 0 4px 14px rgba(21, 128, 61, 0.25);
      margin-top: 8px;
    }

    .btn-submit:active {
      transform: scale(0.98);
    }

    .btn-submit:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    /* Large Visual Picker Trigger (Matches Photo Box Geometry) */
    .visual-picker-trigger {
      width: 100%;
      min-height: 52px;
      background: var(--card-inner, #F3F7F4);
      border: 1px solid var(--card-border, #C8D7CD);
      border-radius: 10px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      box-sizing: border-box;
      transition: all 0.15s ease;
    }

    .visual-picker-trigger:hover {
      background: var(--card-border-subtle, #D8E4DC);
    }

    .visual-picker-trigger:active {
      transform: scale(0.99);
    }

    .visual-picker-trigger-left {
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 1;
      min-width: 0;
    }

    .visual-picker-badge {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background: rgba(21, 128, 61, 0.12);
      color: var(--text-accent, #15803D);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .visual-picker-badge.blemish {
      background: rgba(185, 28, 28, 0.12);
      color: var(--urgent-red, #B91C1C);
    }

    .visual-picker-text-wrap {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }

    .visual-picker-selected-title {
      font-size: var(--fs-base);
      font-weight: var(--fw-bold);
      color: var(--text-primary, #11281E);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .visual-picker-selected-desc {
      font-size: var(--fs-xs);
      color: var(--text-secondary, #617D70);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .visual-picker-change-btn {
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--text-accent, #15803D);
      background: var(--card-bg, #FFFFFF);
      border: 1px solid var(--card-border, #C8D7CD);
      border-radius: 8px;
      padding: 6px 12px;
      flex-shrink: 0;
    }

    .visual-picker-trigger.blemish .visual-picker-change-btn {
      color: var(--urgent-red, #B91C1C);
    }

    /* Visual Picker Modal List & Option Cards */
    .tag-picker-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 14px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      max-height: 52vh;
      padding-right: 4px;
      padding-bottom: 16px;
    }

    .tag-option-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      background: var(--card-inner, #F3F7F4);
      border: 1.5px solid transparent;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.15s ease;
      box-sizing: border-box;
    }

    .tag-option-card:hover {
      background: var(--card-border-subtle, #D8E4DC);
    }

    .tag-option-card.selected {
      border-color: var(--text-accent, #15803D);
      background: rgba(21, 128, 61, 0.06);
    }

    .tag-option-card.selected.blemish {
      border-color: var(--urgent-red, #B91C1C);
      background: rgba(185, 28, 28, 0.06);
    }

    .tag-option-visual {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      background: var(--card-bg, #FFFFFF);
      border: 1px solid var(--card-border, #C8D7CD);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: var(--text-accent, #15803D);
    }

    .tag-option-visual.blemish {
      color: var(--urgent-red, #B91C1C);
    }

    .tag-option-body {
      display: flex;
      flex-direction: column;
      gap: 2px;
      flex: 1;
      min-width: 0;
    }

    .tag-option-title {
      font-size: var(--fs-base);
      font-weight: var(--fw-bold);
      color: var(--text-primary);
    }

    .tag-option-desc {
      font-size: var(--fs-xs);
      color: var(--text-secondary);
      line-height: 1.35;
    }

    .visual-picker-badge img.picker-thumb,
    .tag-option-visual img.picker-thumb {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 8px;
      display: block;
    }

    .tag-picker-custom-section {
      border-top: 1px solid var(--card-border-subtle, #D8E4DC);
      padding-top: 14px;
    }

    .custom-entry-toggle-btn {
      width: 100%;
      padding: 11px 16px;
      background: var(--card-inner, #F3F7F4);
      border: 1px solid var(--card-border, #C8D7CD);
      border-radius: 10px;
      font-size: var(--fs-sm);
      font-weight: var(--fw-bold);
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--text-primary);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: all 0.15s ease;
    }

    .custom-entry-toggle-btn:hover {
      background: var(--card-border-subtle, #D8E4DC);
    }

    .custom-entry-form-panel {
      display: none;
      flex-direction: column;
      gap: 10px;
      margin-top: 12px;
      background: var(--card-inner, #F3F7F4);
      border: 1px solid var(--card-border, #C8D7CD);
      border-radius: 12px;
      padding: 14px;
    }

    .custom-entry-form-panel.active {
      display: flex;
    }

    .custom-entry-input {
      width: 100%;
      background: var(--card-bg, #FFFFFF);
      border: 1px solid var(--card-border, #C8D7CD);
      border-radius: 8px;
      padding: 9px 12px;
      font-size: var(--fs-sm);
      color: var(--text-primary);
      outline: none;
      box-sizing: border-box;
    }

    .custom-entry-input:focus {
      border-color: var(--text-accent, #15803D);
    }

    .btn-custom-photo-trigger {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 14px;
      background: var(--card-bg, #FFFFFF);
      border: 1px solid var(--card-border, #C8D7CD);
      border-radius: 8px;
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--text-primary);
      cursor: pointer;
      width: 100%;
      box-sizing: border-box;
      transition: all 0.15s ease;
    }

    .btn-custom-photo-trigger:hover {
      background: var(--card-border-subtle, #D8E4DC);
    }

    .btn-picker-custom-use {
      width: 100%;
      padding: 12px;
      background: var(--text-accent, #15803D);
      color: #FFFFFF;
      border: none;
      border-radius: 10px;
      font-size: var(--fs-sm);
      font-weight: var(--fw-bold);
      letter-spacing: 0.05em;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.15s ease;
      box-shadow: 0 3px 10px rgba(21, 128, 61, 0.25);
    }

    .btn-picker-custom-use:active {
      transform: scale(0.98);
    }

    /* ======================================================= */
    /* 7. SPECIMEN DETAIL DOSSIER TABS (BLOCK 1)               */
    /* ======================================================= */
    .dossier-card {
      background: var(--card-bg, #FFFFFF);
      border: 1px solid var(--card-border, #C8D7CD);
      border-radius: 14px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 12px;
    }

    .dossier-subtoggle {
      display: flex;
      background: var(--card-inner, #F3F7F4);
      border: 1px solid var(--card-border-subtle, #D8E4DC);
      border-radius: 10px;
      padding: 3px;
      gap: 4px;
      margin-bottom: 12px;
    }

    .dossier-subtoggle-btn {
      flex: 1;
      padding: 7px 12px;
      border-radius: 8px;
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      border: none;
      background: transparent;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .dossier-subtoggle-btn.active {
      background: var(--card-bg, #FFFFFF);
      color: var(--text-accent, #15803D);
      box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    }

    /* Dossier Stat Grid (Strict 2-Column Key/Value Layout) */
    .dossier-stat-grid {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 10px;
    }

    .dossier-stat-item {
      display: grid;
      grid-template-columns: 130px 1fr;
      align-items: baseline;
      gap: 12px;
      padding-bottom: 9px;
      border-bottom: 1px solid var(--card-border-subtle, #D8E4DC);
    }

    .dossier-stat-item:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    .dossier-stat-key {
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-secondary, #617D70);
      line-height: 1.35;
    }

    .dossier-stat-val {
      font-size: var(--fs-sm);
      font-weight: var(--fw-medium);
      color: var(--text-primary, #11281E);
      line-height: 1.4;
      text-align: left;
    }

    .dossier-stat-val.italic {
      font-style: italic;
    }

    .pot-grid-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }

    .pot-selector-card {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px;
      border: 1px solid var(--card-border, #C8D7CD);
      border-radius: 10px;
      background: var(--card-bg, #FFFFFF);
      cursor: pointer;
      transition: all 0.15s;
    }

    .pot-selector-card.active {
      border-color: var(--text-accent, #15803D);
      background: rgba(21, 128, 61, 0.06);
    }

    .pot-card-thumb {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      object-fit: cover;
      background: #102016;
      flex-shrink: 0;
    }

    .microclimate-chips-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .microclimate-chip {
      padding: 6px 10px;
      border-radius: 20px;
      border: 1px solid var(--card-border, #C8D7CD);
      background: var(--card-inner, #F3F7F4);
      font-size: var(--fs-xs);
      font-weight: var(--fw-medium);
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.15s;
    }

    .microclimate-chip.active {
      background: var(--text-accent, #15803D);
      color: #FFFFFF;
      border-color: var(--text-accent, #15803D);
    }

    .math-breakdown-box {
      background: var(--card-inner, #F3F7F4);
      border: 1px solid var(--card-border, #C8D7CD);
      border-radius: 12px;
      padding: 14px;
      font-size: var(--fs-sm);
      line-height: 1.6;
    }

    .math-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 4px 0;
    }

    .math-row.total {
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px dashed var(--card-border);
      font-weight: var(--fw-bold);
      font-size: var(--fs-base);
      color: var(--text-accent, #15803D);
    }

    .math-tag-amber { color: #D97706; }
    .math-tag-emerald { color: #15803D; }
    .math-tag-blue { color: #0284C7; }

    .btn-log-action-dossier {
      width: 100%;
      padding: 12px;
      border-radius: 10px;
      font-size: var(--fs-sm);
      font-weight: var(--fw-bold);
      letter-spacing: 0.05em;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.15s;
      border: 1px solid var(--card-border);
      margin-bottom: 12px;
    }

    .btn-log-action-growth {
      background: rgba(21, 128, 61, 0.08);
      border-color: var(--text-accent, #15803D);
      color: var(--text-accent, #15803D);
    }

    .btn-log-action-health {
      background: rgba(21, 128, 61, 0.08);
      border-color: var(--text-accent, #15803D);
      color: var(--text-accent, #15803D);
    }

    /* ======================================================= */
    /* 8. VISUAL SPECIMEN CREATION WIZARD (BLOCK 2)            */
    /* ======================================================= */
    .wizard-stepper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 14px;
      padding: 0 4px;
    }

    .wizard-step-label {
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-secondary);
      transition: color 0.2s;
    }

    .wizard-step-label.active {
      color: var(--text-accent) !important;
    }

    .wizard-step-divider {
      flex: 1;
      height: 1px;
      background: var(--card-border);
      margin: 0 8px;
    }

    .wizard-species-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      max-height: none !important;
      overflow-y: visible !important;
      padding-bottom: 70px;
    }

    .wizard-species-card {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 12px;
      overflow: hidden;
      cursor: pointer;
      transition: transform 0.15s, border-color 0.15s;
      display: flex;
      flex-direction: column;
    }

    .wizard-species-card:active {
      transform: scale(0.97);
      border-color: var(--text-accent);
    }

    .wizard-species-photo {
      width: 100%;
      height: 100px;
      object-fit: cover;
      background: #14221a;
      display: block;
    }

    .wizard-species-info {
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .wizard-species-name {
      font-size: var(--fs-sm);
      font-weight: var(--fw-bold);
      color: var(--text);
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .wizard-species-meta {
      font-size: var(--fs-xs);
      font-style: italic;
      color: var(--text-secondary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .wizard-species-badge {
      display: inline-block;
      font-size: var(--fs-2xs);
      font-weight: var(--fw-bold);
      text-transform: uppercase;
      color: var(--text-accent);
      background: rgba(21, 128, 61, 0.08);
      padding: 2px 5px;
      border-radius: 4px;
      align-self: flex-start;
      margin-top: 3px;
    }

    .wizard-filter-chip {
      padding: 5px 11px;
      border-radius: 20px;
      border: 1px solid var(--card-border);
      background: var(--card-bg);
      color: var(--text-secondary);
      font-size: var(--fs-xs);
      font-weight: var(--fw-bold);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.15s;
    }

    .wizard-filter-chip.active {
      background: var(--text-accent);
      color: #fff;
      border-color: var(--text-accent);
    }

    .wizard-room-grid {
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-height: none !important;
      overflow-y: visible !important;
      padding-bottom: 16px;
    }

    .wizard-room-grid > *,
    .property-picker-card,
    .room-choice-item {
      flex-shrink: 0;
    }

    .wizard-room-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border: 1px solid var(--card-border);
      border-radius: 12px;
      background: var(--card-bg);
      cursor: pointer;
      transition: all 0.15s;
    }

    .wizard-room-card:active {
      transform: scale(0.98);
    }

    .wizard-room-card.selected {
      border-color: var(--text-accent) !important;
      background: rgba(21, 128, 61, 0.06) !important;
    }

    .wizard-room-thumb {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      object-fit: cover;
      background: var(--card-inner);
      border: 1px solid var(--card-border-subtle);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: var(--fw-bold);
      font-size: var(--fs-base);
      color: var(--text-accent);
      flex-shrink: 0;
    }

    .city-result-card:hover, .property-picker-card:hover {
      border-color: var(--text-accent) !important;
      background: rgba(21, 128, 61, 0.04) !important;
    }

    .city-result-card:active, .property-picker-card:active {
      transform: scale(0.98);
    }

    .wizard-species-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      max-height: none !important;
      overflow-y: visible !important;
      padding-bottom: 60px;
    }

    .room-type-card {
      border: 1px solid var(--card-border);
      border-radius: 12px;
      background: var(--card-bg);
      cursor: pointer;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: all 0.15s;
    }
    .room-type-card:hover {
      border-color: var(--text-accent);
      background: rgba(21, 128, 61, 0.04);
    }
    .room-type-card:active {
      transform: scale(0.98);
    }
    .room-type-card.selected {
      border-color: var(--text-accent) !important;
      background: rgba(21, 128, 61, 0.08) !important;
    }

    #city-picker-modal.active, #parent-property-picker-modal.active, #wizard-room-picker-modal.active, #room-type-picker-modal.active, #room-detail-modal.active, #room-climate-modal.active {
      pointer-events: auto !important;
      opacity: 1 !important;
      display: flex !important;
    }
    #city-picker-modal.active .modal-content, #parent-property-picker-modal.active .modal-content, #wizard-room-picker-modal.active .modal-content, #room-type-picker-modal.active .modal-content, #room-detail-modal.active .modal-content, #room-climate-modal.active .modal-content {
      pointer-events: auto !important;
      overscroll-behavior: contain !important;
    }

/* Specimen Settings Header Button */
.btn-specimen-settings-gear {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--glass-pill-bg);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--glass-pill-border);
  box-shadow: var(--glass-pill-shadow);
  color: #F0FDF4 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}
.btn-specimen-settings-gear:hover {
  background: rgba(13, 36, 22, 0.85);
  border-color: rgba(255, 255, 255, 0.4);
  transform: rotate(30deg);
}

    /* Universal Modal Close Button (True Geometric Crosshair) */
    .modal-close-btn {
      position: relative;
      width: 36px;
      height: 36px;
      min-width: 36px;
      min-height: 36px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.06);
      border: 1px solid var(--card-border, #C8D7CD);
      color: transparent !important;
      font-size: var(--fs-xl);
      line-height: 1;
      text-indent: -9999px;
      overflow: hidden;
      display: inline-grid;
      place-items: center;
      cursor: pointer;
      transition: background 0.15s ease, transform 0.15s ease;
      padding: 0;
      flex-shrink: 0;
      -webkit-tap-highlight-color: transparent;
    }

    .modal-close-btn::before,
    .modal-close-btn::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 13px;
      height: 1.75px;
      background: var(--text-primary, #0D2416);
      border-radius: 99px;
      text-indent: 0;
      pointer-events: none;
    }

    .modal-close-btn::before {
      transform: translate(-50%, -50%) rotate(45deg);
    }

    .modal-close-btn::after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }

    .modal-close-btn:hover {
      background: rgba(0, 0, 0, 0.12);
      transform: scale(1.06);
    }

    .caregiver-perm-option {
      transition: all 0.2s ease;
    }

    .caregiver-perm-option:hover {
      border-color: var(--text-accent, #15803D);
    }

    .caregiver-perm-option.selected {
      border-color: var(--text-accent, #15803D) !important;
      background: rgba(21, 128, 61, 0.08) !important;
    }

    /* Auth & Account Form Inputs */
    #auth-form input[type="text"],
    #auth-form input[type="password"],
    #auth-form input[type="email"] {
      width: 100%;
      background: var(--card-inner, #F3F7F4);
      border: 1px solid var(--card-border, #C8D7CD);
      border-radius: 10px;
      padding: 10px 12px;
      font-size: var(--fs-base);
      font-weight: var(--fw-medium);
      color: var(--text-primary);
      outline: none;
      box-sizing: border-box;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    #auth-form input:focus {
      border-color: var(--text-accent);
      box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.15);
    }