:root {
  --bg: #000000;
  --surface: #0d0d12;
  --surface2: #141420;
  --surface3: #1a1a28;
  --border: #1a1a2e;
  --border2: #2a2a3e;
  --accent: #ff4d00;
  --accent2: #ff8c00;
  --accent3: #ffb347;
  --amber: #ff9d2e;
  --gold: #d4a843;
  --glow: rgba(255,77,0,0.35);
  --glow2: rgba(255,140,0,0.2);
  --text: #e8e8f0;
  --muted: rgba(232,232,240,0.45);
  --muted2: rgba(232,232,240,0.25);
  --green: #00ff88;
  --red: #ff4444;
  --sidebar-w: 200px;
  --nav-h: 38px;
  --mono: 'Share Tech Mono', monospace;
  --font-display: 'Nunito', sans-serif;
  --font-body: 'Nunito', sans-serif;
  --font-mono: 'Nunito', sans-serif;

  --up-modal-font-family: 'Nunito', ui-sans-serif, sans-serif;
  --up-modal-dark-bg: #0a0608;
  --up-modal-bg: #0a0608;
  --up-modal-font-dark-color: #f5ece0;
  --up-modal-font-color: #f5ece0;
  --up-modal-btn-dark-color: #ff4d00;
  --up-modal-btn-color: #ff4d00;
  --up-modal-btn-dark-text: #1a0f00;
  --up-modal-btn-text: #1a0f00;
  --up-modal-border-radius: 18px;
  --up-modal-btn-radius: 14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html {
  background: #000 url('background4.webp') center center / cover no-repeat;
}
body{
  background: #000 url('background4.webp') center -30px / cover no-repeat fixed;
  color:var(--text);
  font-family:var(--font-body);
  min-height:100vh;
  overflow-x:hidden;
}
/* Subtle noise overlay */
body::before{
  content:'';
  position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none;z-index:0;opacity:.6;
}

/* ── Perf: mobile / WebView mode ─────────────────────────────────────────
   `background-attachment: fixed` forces a full-page repaint on every
   scroll frame on mobile/WebView compositors, and backdrop-filter is
   extremely expensive on those same GPUs. Also targets (hover: none) to
   catch touch devices that report a wide viewport (tablets, WebViews). */
@media (max-width: 700px), (hover: none) {
  html, body {
    background-attachment: scroll;
    background-position: center center;
    background-size: cover;
  }

  body::before {
    display: none;
  }

  * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ── Perf: pause offscreen decorative animations ─────────────────────────
   Toggle this class (via IntersectionObserver) on elements running
   infinite CSS animations to stop compositor/GPU work while offscreen. */
.anim-offscreen,
.anim-offscreen *,
.anim-offscreen::before,
.anim-offscreen::after {
  animation-play-state: paused !important;
}

/* ── NAVBAR (SoulBloom style) ──────────────────────────── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  width: 100%;
  background: linear-gradient(135deg, #ff4d00, #ff8c00);
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: var(--nav-h);
  border-bottom: 1px solid rgba(0,0,0,0.2);
  box-shadow:
    0 2px 12px rgba(255,77,0,0.35),
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 -6px 18px rgba(0,0,0,0.25) inset;
  overflow: hidden;
}
.navbar::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: #ffd400;
  opacity: 0.6;
  pointer-events: none;
}
.navbar::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  background: rgba(255,255,255,0.22);
  animation: navbar-shimmer 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes shimmer-slide {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes navbar-shimmer {
  0%   { transform: translateX(-100%) skewX(-15deg); opacity:0; }
  40%  { opacity: 0.18; }
  100% { transform: translateX(300%) skewX(-15deg); opacity:0; }
}
.navbar > * { position: relative; z-index: 1; }
.navbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #000;
  text-transform: uppercase;
  margin-right: 28px;
  text-decoration: none;
  opacity: 0.92;
}
.navbar-brand-cursor {
  display: inline-block;
  font-weight: 900;
  animation: dot-blink 1s steps(2, start) infinite;
}
.navbar-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}
.nav-sep {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.35) 30%, rgba(0,229,255,0.45) 50%, rgba(0,0,0,0.35) 70%, transparent);
  margin: 0 4px;
  flex-shrink: 0;
  border-radius: 1px;
}
.navbar-link {
  position: relative;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #000;
  text-decoration: none;
  padding: 5px 14px;
  border-radius: 3px;
  transition: background 0.15s, opacity 0.15s, letter-spacing 0.15s;
  opacity: 0.7;
  background: none;
  border: none;
  cursor: pointer;
}
.navbar-link::before,
.navbar-link::after {
  opacity: 0;
  transition: opacity 0.15s, margin 0.15s;
  font-weight: 900;
}
.navbar-link::before { content: '['; margin-right: 0; }
.navbar-link::after  { content: ']'; margin-left: 0; }
.navbar-link:hover {
  background: rgba(0,0,0,0.12);
  opacity: 1;
  letter-spacing: 2.5px;
}
.navbar-link:hover::before, .navbar-link.active::before { opacity: 0.6; margin-right: 3px; }
.navbar-link.active::before { content: ''; background-image: url('image2_1.webp'); background-size: contain; background-repeat: no-repeat; background-position: center; width: 28px; height: 28px; display: inline-block; opacity: 1; margin-right: 4px; vertical-align: middle; }
.nav-bloom-logo-mobile { display: none; }
.navbar-link:hover::after { opacity: 0.6; margin-left: 3px; }
.navbar-link.active::after  { content: ''; opacity: 0 !important; margin-left: 0; }
.navbar-link.active {
  color: #ff8c00;
  opacity: 1;
  letter-spacing: 2.5px;
  text-shadow: 0 0 10px rgba(255,140,0,0.8), 0 0 20px rgba(255,140,0,0.4);
  background: linear-gradient(145deg, #2a2a2a 0%, #050505 55%, #000 100%);
  border: 2px solid #1a1a1a;
  border-radius: 8px;
  transform: none;
  align-self: center;
  display: flex;
  align-items: center;
  height: 24px;
  padding-top: 0;
  padding-bottom: 0;
  animation: active-tab-sheen 2.4s ease-in-out infinite;
}
@keyframes active-tab-tilt {
  0%, 100% { transform: none; }
  50%      { transform: none; }
}
@keyframes active-tab-sheen {
  0%   { box-shadow: 0 0 8px rgba(255,140,0,0.4), 0 0 18px rgba(255,100,0,0.2), inset 0 0 6px rgba(255,140,0,0.05); }
  50%  { box-shadow: 0 0 16px rgba(255,140,0,0.75), 0 0 32px rgba(255,100,0,0.4), 0 0 48px rgba(255,60,0,0.15), inset 0 0 10px rgba(255,140,0,0.12); }
  100% { box-shadow: 0 0 8px rgba(255,140,0,0.4), 0 0 18px rgba(255,100,0,0.2), inset 0 0 6px rgba(255,140,0,0.05); }
}
.navbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}
@property --garden-spin {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes garden-rotate { to { --garden-spin: 360deg; } }
@keyframes garden-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,184,0,0.55), 0 0 14px rgba(255,140,0,0.35), inset 0 0 10px rgba(255,255,255,0.18); }
  50%      { box-shadow: 0 0 0 4px rgba(255,184,0,0.12), 0 0 22px rgba(255,140,0,0.55), inset 0 0 14px rgba(255,255,255,0.28); }
}
@keyframes garden-pulse-leave {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,255,136,0.45), 0 0 14px rgba(0,255,136,0.30), inset 0 0 10px rgba(255,255,255,0.16); }
  50%      { box-shadow: 0 0 0 4px rgba(0,255,136,0.10), 0 0 22px rgba(0,255,136,0.50), inset 0 0 14px rgba(255,255,255,0.26); }
}
@keyframes garden-sweep {
  0%   { transform: translateX(-130%) skewX(-18deg); }
  100% { transform: translateX(230%)  skewX(-18deg); }
}
@keyframes garden-pop {
  0%   { transform: scale(0.4) rotate(-15deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(4deg);  opacity: 1; }
  100% { transform: scale(1) rotate(0deg);     opacity: 1; }
}
#connect-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #1a0f00;
  padding: 7px 18px;
  opacity: 1;
  background: linear-gradient(135deg, #ffc830 0%, #ffe680 22%, #ffffff 48%, #fff0a0 74%, #ffb800 100%);
  box-shadow: 0 0 0 0 rgba(255,184,0,0.55), 0 2px 8px rgba(0,0,0,0.35), inset 0 0 10px rgba(255,255,255,0.18);
  transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s ease, filter 0.2s ease, letter-spacing 0.2s ease;
  animation: garden-pulse 2.6s ease-in-out infinite;
  will-change: transform;
}
#connect-btn::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--garden-spin), #ffb800, #fff3b0, #ff7a00, #ffe680, #ffb800);
  animation: garden-rotate 3.2s linear infinite;
  filter: saturate(1.3);
}
#connect-btn::after {
  content: '';
  position: absolute;
  top: -10%; bottom: -10%; left: 0;
  width: 32%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.75), transparent);
  pointer-events: none;
  mix-blend-mode: overlay;
  animation: garden-sweep 2.8s ease-in-out infinite;
  animation-delay: 0.4s;
}
#connect-btn:hover {
  transform: translateY(-2px) scale(1.045);
  letter-spacing: 2.6px;
  filter: brightness(1.08) saturate(1.15);
  box-shadow: 0 0 0 3px rgba(255,184,0,0.18), 0 6px 18px rgba(255,122,0,0.40), inset 0 0 14px rgba(255,255,255,0.3);
}
#connect-btn:active { transform: translateY(0) scale(0.96); filter: brightness(0.97); transition-duration: 0.08s; }
#connect-btn:focus-visible { outline: 2px solid #fff3b0; outline-offset: 3px; }
#connect-btn .connect-l1, #connect-btn .connect-l2 { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  #connect-btn, #connect-btn::before, #connect-btn::after { animation: none !important; }
}
@keyframes dot-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}
#connected-dot {
  display: none;
  width: 10px; height: 10px;
  min-width: 10px; min-height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  flex-shrink: 0;
  animation: dot-blink 1.5s ease-in-out infinite;
}
#connected-dot.is-connected { display: inline-block; }
#up-identity.is-connected { display: inline-flex !important; }
@media (max-width: 1680px) {
  #up-identity.is-connected { display: none !important; }
}
@media (max-width: 1279px) {
  #up-name { display: none; }
  #up-pfp  { display: none; }
  #up-identity.is-connected { display: none !important; }
}
#disconnect-btn.btn-connected {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: none !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  font-family: 'Nunito', sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 2.2px !important;
  text-transform: uppercase !important;
  color: #1a0f00 !important;
  padding: 7px 18px !important;
  opacity: 1 !important;
  background: linear-gradient(135deg, #00ffaa 0%, #b9ffe3 22%, #ffffff 48%, #c9ffe9 74%, #00e09a 100%) !important;
  box-shadow: 0 0 0 0 rgba(0,255,136,0.45), 0 2px 8px rgba(0,0,0,0.35), inset 0 0 10px rgba(255,255,255,0.16) !important;
  transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s ease, filter 0.2s ease, letter-spacing 0.2s ease !important;
  animation: garden-pulse-leave 2.6s ease-in-out infinite, garden-pop 0.45s cubic-bezier(.34,1.56,.64,1) !important;
  will-change: transform;
}
#disconnect-btn.btn-connected::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--garden-spin), #00e09a, #d6fff0, #00ffaa, #b9ffe3, #00e09a);
  animation: garden-rotate 3.2s linear infinite;
  filter: saturate(1.3);
}
#disconnect-btn.btn-connected::after {
  content: '';
  position: absolute;
  top: -10%; bottom: -10%; left: 0;
  width: 32%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.75), transparent);
  pointer-events: none;
  mix-blend-mode: overlay;
  animation: garden-sweep 2.8s ease-in-out infinite;
  animation-delay: 1.2s;
}
#disconnect-btn.btn-connected:hover {
  transform: translateY(-2px) scale(1.045) !important;
  letter-spacing: 2.6px !important;
  filter: brightness(1.08) saturate(1.15) !important;
  box-shadow: 0 0 0 3px rgba(0,255,136,0.18), 0 6px 18px rgba(0,255,136,0.40), inset 0 0 14px rgba(255,255,255,0.3) !important;
}
#disconnect-btn.btn-connected:active { transform: translateY(0) scale(0.96) !important; filter: brightness(0.97) !important; transition-duration: 0.08s !important; }
#disconnect-btn.btn-connected:focus-visible { outline: 2px solid #d6fff0 !important; outline-offset: 3px !important; }
#disconnect-btn .disconnect-label-short, #disconnect-btn .disconnect-label-full { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  #disconnect-btn.btn-connected, #disconnect-btn.btn-connected::before, #disconnect-btn.btn-connected::after { animation: none !important; }
}
@media (min-width: 1280px) {
  #connect-btn { border-radius: 20px !important; }
}
@media (max-width: 1279px) {
  .navbar-brand { display: none; }
  .navbar {
    padding: 0 8px;
    overflow: visible;
  }
  .navbar-links {
    flex: 1;
    justify-content: flex-start;
    gap: 0;
    min-width: 0;
    overflow: hidden;
  }
  .navbar-link {
    padding: 5px 7px !important;
    font-size: 14px !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap;
  }
  .navbar-link:hover, .navbar-link.active { letter-spacing: 0.5px !important; }
  .nav-sbt-prefix { display: none; }
  .nav-bloom-prefix { display: none; }
  .navbar-link::before, .navbar-link::after { display: none !important; }
  .navbar-link.active::before { display: none !important; }
  .nav-bloom-logo-mobile { display: inline-block !important; width: 24px; height: 24px; object-fit: contain; vertical-align: middle; margin-right: 4px; flex-shrink: 0; }
  .navbar-link.active::after  { display: none !important; content: ''; opacity: 0 !important; }
  .navbar-actions {
    flex-shrink: 0;
    gap: 4px;
    margin-left: 4px;
  }
  #connect-btn {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 12px !important;
    padding: 4px 5px !important;
    font-size: 7px !important;
    letter-spacing: 0.5px !important;
    line-height: 1.2 !important;
    color: #1a0f00 !important;
    white-space: normal;
    width: 42px;
    flex-shrink: 0;
  }
  #connect-btn:hover { transform: none; letter-spacing: 0.5px !important; }
  #connect-btn .connect-l1,
  #connect-btn .connect-l2 { display: block; }
  #connect-btn.btn-hidden-mobile { display: none !important; }
  #connected-dot { display: none !important; }
  #connected-dot.is-connected {
    display: none !important;
  }
  #disconnect-btn.btn-connected {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    padding: 4px 7px !important;
    font-size: 7px !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap;
    flex-shrink: 0;
  }
  #disconnect-btn.btn-connected:hover { transform: none !important; letter-spacing: 0.5px !important; }
}

/* ── LAYOUT ──────────────────────────────────────────────── */
.layout{
  display:flex;
  margin-top:var(--nav-h);
  min-height:calc(100vh - var(--nav-h));
}

/* ── SIDEBAR ──────────────────────────────────────────────── */
.sidebar{
  width:var(--sidebar-w);
  min-width:var(--sidebar-w);
  background: rgba(6,6,8,0.75);
  backdrop-filter: blur(12px);
  border-right:1px solid var(--border);
  position:fixed;top:var(--nav-h);bottom:0;
  display:flex;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;
  z-index:100;
  padding: 0;
  scrollbar-width:none; /* Firefox */
  -ms-overflow-style:none; /* IE/Edge */
}
.sidebar::-webkit-scrollbar{display:none;} /* Chrome/Safari */
.sidebar-header {
  padding: 24px 16px 4px;
  margin-bottom: 0;
}
.sidebar-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 4px;
  background: linear-gradient(90deg, #ff4d00, #ff8c00, #ffb347, #ff8c00, #ff4d00);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 18px rgba(255,140,0,.45), 0 0 36px rgba(255,77,0,.25);
  animation: sidebarTitleFlow 6s ease-in-out infinite;
}
@keyframes sidebarTitleFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.sidebar-subtitle {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #ff7b00;
  letter-spacing: 1px;
  text-align: center;
}
.sidebar-section{flex-shrink:0;overflow-y:visible;scrollbar-width:none;-ms-overflow-style:none;}
.sidebar-section::-webkit-scrollbar{display:none;}
.sidebar-label{
  font-family:var(--font-mono);font-size:9px;letter-spacing:2.5px;
  color:var(--muted2);text-transform:uppercase;
  padding:16px 16px 6px;
}
.sidebar-label-soulblooms-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 16px 6px;gap:8px;
}
.sidebar-label-soulblooms-row .sidebar-label-soulblooms{padding:0;}
.bloom-list-refresh-btn{
  flex-shrink:0;font-family:var(--font-mono);font-size:15px;line-height:1;
  color:var(--muted) !important;background:var(--surface2) !important;
  border:1px solid var(--border2) !important;border-radius:6px;
  width:30px;height:30px;padding:0;cursor:pointer;transition:all .15s;
  display:flex;align-items:center;justify-content:center;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  box-shadow:none;outline:none;
}
.bloom-list-refresh-btn:hover:not(:disabled){border-color:var(--accent) !important;color:var(--accent2) !important;}
.bloom-list-refresh-btn:disabled{opacity:0.5;cursor:not-allowed;}
.bloom-list-refresh-btn.spinning{animation:bloom-refresh-spin .8s linear infinite;}
@keyframes bloom-refresh-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.sidebar-label-soulblooms{
  font-family:var(--font-mono);font-size:9px;letter-spacing:2.5px;
  text-transform:uppercase;padding:16px 16px 6px;
  background-image:linear-gradient(90deg,#ffe066,#ffb347,#facc15,#ffe066);
  background-size:200% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:shimmer-bloom 3s ease-in-out infinite;
  filter:drop-shadow(0 0 6px rgba(250,204,21,.45));
}
.sidebar-nav{list-style:none;}
.sidebar-nav li a{
  display:flex;align-items:center;gap:10px;
  padding:9px 16px;cursor:pointer;
  font-size:12px;font-weight:500;letter-spacing:.5px;
  color:var(--muted);text-decoration:none;
  border-left:2px solid transparent;
  transition:all .15s;
  position:relative;
}
.sidebar-nav li a:hover{color:var(--text);background:rgba(255,255,255,.04);}
.sidebar-nav li.active a{
  color:var(--accent3);
  border-left-color:var(--accent);
  background:linear-gradient(90deg,rgba(232,102,10,.12),transparent);
}
.nav-icon{font-size:14px;width:20px;text-align:center;flex-shrink:0;}

/* Bloom list inside sidebar */
.bloom-list{padding:4px 12px 12px;}
.bloom-item{
  display:flex;align-items:center;gap:9px;
  padding:7px 10px;border-radius:8px;cursor:pointer;
  margin-bottom:3px;
  transition:all .15s;
  border:1px solid transparent;
}
.bloom-item:hover{background:var(--surface2);border-color:var(--border2);}
.bloom-item.active-bloom{
  background:linear-gradient(135deg,rgba(232,102,10,.15),rgba(245,147,50,.08));
  border-color:rgba(232,102,10,.35);
}
.bloom-thumb{
  width:30px;height:30px;border-radius:6px;
  background:radial-gradient(circle,#d4630a,#5a1f00);
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:14px;overflow:hidden;border:1px solid rgba(232,102,10,.3);
}
.bloom-thumb img{width:100%;height:100%;object-fit:cover;}
.bloom-info{flex:1;min-width:0;}
.bloom-name{font-size:11px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bloom-meta{font-family:var(--font-mono);font-size:9px;color:var(--muted);margin-top:1px;}
.bloom-badge{
  font-family:var(--font-mono);font-size:8px;padding:1px 5px;
  border-radius:3px;background:rgba(232,102,10,.15);
  color:var(--accent2);border:1px solid rgba(232,102,10,.25);
  flex-shrink:0;
}

.sidebar-divider{
  height:1px;background:var(--border);margin:8px 0;
}
.btn-plant{
  width:100%;
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:9px;border-radius:8px;cursor:pointer;
  background:transparent;
  border:1px dashed rgba(232,102,10,.35);
  color:var(--accent);font-size:11px;font-weight:600;letter-spacing:.5px;
  transition:all .15s;
}
.btn-plant:hover{background:rgba(232,102,10,.08);border-color:var(--accent);}

.sidebar-bottom{
  padding:12px;
  margin-top:0;
}
.sidebar-plant-zone {
  margin-top: auto;
  padding: 0 12px 16px;
  flex-shrink: 0;
}
/* YOUR BLOOM — shimmer yellow like Bloom Identity */
.your-bloom-card{
  position:relative;
  border:1.5px solid transparent;
  border-radius:10px;
  padding:12px;text-align:center;
  background-origin:border-box;
  background-clip:padding-box,border-box;
  background-image:
    linear-gradient(rgba(6,6,8,.85),rgba(6,6,8,.85)),
    linear-gradient(135deg,#fff9c4,#fff176,#ffe100,#ffd000,#f0b800,#ffe100,#fff9c4);
  background-size:100% 100%,300% 300%;
  animation:shimmer-bloom 5s ease-in-out infinite;
  transition:transform .2s,box-shadow .2s,animation-duration .2s;
  cursor:default;
}
/* Dynamic LSP7/LSP8 watermark, set via --bloom-bg from JS (updateYourBloom) */
.your-bloom-card::before{
  content:'';
  position:absolute;inset:0;
  border-radius:inherit;
  background-image:var(--bloom-bg,none);
  background-size:var(--bloom-bg-size,cover);background-position:var(--bloom-bg-position,center);background-repeat:no-repeat;
  opacity:.16;
  pointer-events:none;z-index:0;
}
.your-bloom-card > *{position:relative;z-index:1;}
.your-bloom-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(220,180,0,.28);
  animation-duration:2.2s;
}
/* TOP 5 — shimmer teal/cyan like Bloom Network */
.top5-card{
  position:relative;
  border:1.5px solid transparent;
  border-radius:10px;
  padding:10px 12px;
  background-origin:border-box;
  background-clip:padding-box,border-box;
  background-image:
    linear-gradient(rgba(6,6,8,.85),rgba(6,6,8,.85)),
    linear-gradient(135deg,#34d399,#10b981,#06b6d4,#0ea5e9,#22d3ee,#34d399,#34d399);
  background-size:100% 100%,300% 300%;
  animation:shimmer-holders 5s ease-in-out infinite;
  transition:transform .2s,box-shadow .2s,animation-duration .2s;
  cursor:default;
}
/* Static backtop.png watermark */
.top5-card::before{
  content:'';
  position:absolute;inset:0;
  border-radius:inherit;
  background-image:url('backtop.png');
  background-size:cover;background-position:center;background-repeat:no-repeat;
  opacity:.16;
  pointer-events:none;z-index:0;
}
.top5-card > *{position:relative;z-index:1;}
.top5-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(16,185,129,.28);
  animation-duration:2.2s;
}
.top5-label{font-family:var(--font-mono);font-size:8px;letter-spacing:2px;color:#34d399;margin-bottom:8px;text-shadow:0 0 8px rgba(6,182,212,.5);display:block;text-align:left;margin-left:-4px;}
.top5-row{
  display:flex;align-items:center;gap:7px;padding:5px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:background .12s;border-radius:5px;padding:5px 4px;
}
.top5-row:last-child{border-bottom:none;}
.top5-row:hover{background:rgba(168,85,247,.06);}
.top5-rank{font-family:var(--font-mono);font-size:8px;color:var(--muted2);min-width:14px;text-align:center;}
.top5-pfp{width:20px;height:20px;border-radius:50%;background:rgba(168,85,247,.2);border:1px solid rgba(168,85,247,.3);flex-shrink:0;object-fit:cover;}
.top5-info{flex:1;min-width:0;}
.top5-name{font-family:var(--font-display);font-size:9px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.top5-score{font-family:var(--font-mono);font-size:8px;color:#c084fc;font-weight:700;flex-shrink:0;}
.top5-skeleton{height:28px;background:linear-gradient(90deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 100%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:5px;margin-bottom:4px;}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.your-bloom-label{font-family:var(--font-mono);font-size:8px;letter-spacing:2px;color:#ffe040;margin-bottom:8px;text-align:left;margin-left:4px;}
.your-bloom-img{
  width:50px;height:50px;margin:0 auto 6px;
  background:transparent;
  border-radius:50%;border:2px solid rgba(220,180,0,.5);
  display:flex;align-items:center;justify-content:center;font-size:22px;
  box-shadow:0 0 20px rgba(220,180,0,.3),0 0 40px rgba(220,180,0,.1);
  overflow:hidden;transition:transform .25s ease,border-color .2s,box-shadow .2s;
}
.your-bloom-img:hover{
  transform:scale(1.18);
  border-color:rgba(255,220,0,.85);
  box-shadow:0 0 28px rgba(220,180,0,.55),0 0 50px rgba(220,180,0,.2);
}
.your-bloom-name{font-family:var(--font-display);font-size:10px;color:var(--text);margin-bottom:2px;}
.your-bloom-type{font-family:var(--font-mono);font-size:8px;color:#ffe040;letter-spacing:1px;}
.bloom-stats{display:flex;gap:8px;margin-top:10px;}
.bloom-stat{
  flex:1;background:rgba(0,0,0,.3);border-radius:6px;
  padding:5px;text-align:center;border:1px solid var(--border);
}
.bloom-stat-val{font-family:var(--font-mono);font-size:12px;color:var(--accent3);font-weight:600;}
.avg-score-red{color:var(--red) !important;}
.avg-score-yellow{color:var(--accent3) !important;}
.avg-score-green{color:var(--green) !important;}
.bloom-stat-lbl{font-size:8px;color:var(--muted2);margin-top:1px;}
.connected-user{
  display:flex;align-items:center;gap:8px;margin-top:10px;
  padding:8px;border-radius:8px;background:rgba(0,0,0,.3);
  border:1px solid var(--border);cursor:pointer;
  transition:border-color .15s;
}
.connected-user:hover{border-color:var(--border2);}
.user-avatar{
  width:28px;height:28px;border-radius:50%;
  background:radial-gradient(circle,#7a3a10,#2a1006);
  border:1.5px solid rgba(200,165,0,.4);
  flex-shrink:0;font-size:13px;
  display:flex;align-items:center;justify-content:center;
}
.user-info{flex:1;min-width:0;}
.user-name{font-size:11px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.user-role{font-family:var(--font-mono);font-size:8px;color:var(--accent2);}

/* ── MAIN CONTENT ──────────────────────────────────────────── */
.main{
  margin-left:var(--sidebar-w);
  flex:1;
  padding-top:var(--nav-h);
  padding-left:0;
  padding-right:0;
  padding-bottom:0;
  display:flex;flex-direction:column;gap:0;
}
.main > * {
  width:100%;
}

/* ── PANEL BASE ──────────────────────────────────────────────── */
.panel{
  background: rgba(6,6,8,0.75);
  backdrop-filter: blur(12px);
  border:1px solid var(--border2);
  border-radius:12px;overflow:hidden;
}
.panel-header{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:clamp(8px,1.2vw,20px);
  padding:clamp(10px,1.2vw,20px) clamp(12px,1.4vw,24px);
  border-bottom:1px solid var(--border);
  background:linear-gradient(90deg,rgba(200,165,0,.07),transparent);
  position:relative;
  min-height:calc(clamp(10px,1vw,17px) + 2*clamp(10px,1.2vw,20px) + 2*clamp(10px,1.2vw,20px));
  box-sizing:border-box;
}
/* ── Per-card themed title band — contrasts against the dark card body ── */
.panel-identity .panel-header{
  background:linear-gradient(90deg,rgba(220,180,0,.34),rgba(220,180,0,.04));
  border-bottom:1px solid rgba(220,180,0,.45);
}
.guardian-roles-panel .panel-header{
  background:linear-gradient(90deg,rgba(168,85,247,.34),rgba(168,85,247,.04));
  border-bottom:1px solid rgba(168,85,247,.45);
}
.holders-panel .panel-header{
  background:linear-gradient(90deg,rgba(16,185,129,.34),rgba(16,185,129,.04));
  border-bottom:1px solid rgba(16,185,129,.45);
}
.panel-header > *:not(.panel-title){grid-column:3;justify-self:end;flex-shrink:0;}
.panel-title-icon{
  height:1em;width:auto;display:block;
}
.panel-header-side{
  display:flex;align-items:center;gap:clamp(6px,0.8vw,10px);
  flex-wrap:wrap;justify-content:flex-end;
}
.panel-title{
  grid-column:2;
  display:flex;align-items:center;gap:clamp(6px,0.8vw,10px);justify-content:center;
  font-family:var(--font-display);font-size:14px;
  letter-spacing:2.5px;color:var(--accent3);font-weight:600;
  min-width:0;
  flex:1 1 auto;
}
.panel-icon{font-size:clamp(14px,1.6vw,20px);}
.panel-badge{
  font-family:var(--font-mono);font-size:clamp(8px,0.75vw,9px);
  background:rgba(220,180,0,.15);color:#ffe040;
  border:1px solid rgba(220,180,0,.3);
  padding:clamp(1px,0.2vw,2px) clamp(6px,0.7vw,8px);border-radius:4px;
  white-space:nowrap;
}
.holders-panel .panel-badge {
  background:rgba(16,185,129,.12);color:#34d399;
  border-color:rgba(16,185,129,.3);
}
#identity-contract-addr.copied-flash {
  background:rgba(52,211,153,.25) !important;
  color:#34d399 !important;
  border-color:rgba(52,211,153,.5) !important;
}

/* ── PREMIUM PANEL TITLE GRADIENTS ──────────────────────────── */
.panel-title-text {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(10px,1vw,17px);
  font-weight: 900;
  letter-spacing: clamp(2px,0.25vw,5px);
  text-transform: uppercase;
  position: relative;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px currentColor);
  cursor: pointer;
  user-select: none;
}

/* ── COLLAPSIBLE CARDS ──────────────────────────────────────── */
.panel-collapse-arrow {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  color: var(--accent2);
  margin-left: 6px;
  transition: transform .25s ease;
  cursor: pointer;
  user-select: none;
}
/* Arrow colors per card theme */
.panel-identity .panel-collapse-arrow { color: #ffe040; }
.guardian-roles-panel .panel-collapse-arrow { color: #c084fc; }
.holders-panel .panel-collapse-arrow { color: #34d399; }
.panel.collapsed .panel-collapse-arrow {
  transform: rotate(-90deg);
}
.panel.collapsed > *:not(.panel-header) {
  display: none !important;
}
.top-row .holders-panel.collapsed {
  align-self: flex-start;
}
.top-row .guardian-roles-panel.collapsed {
  flex: 0 0 auto;
}


/* BLOOM IDENTITY — warm gold → yellow → solar */
.title-bloom-identity {
  background-image: linear-gradient(
    135deg,
    #fff176 0%,
    #fff176 20%,
    #ffd600 45%,
    #f5c000 65%,
    #c8a800 85%,
    #ffe040 100%
  );
  filter: drop-shadow(0 0 10px rgba(220, 180, 0, 0.6));
  animation: shimmer-bloom 4s ease-in-out infinite;
  background-size: 200% auto;
}

/* GUARDIAN ROLES — violet → indigo → electric blue */
.title-guardian-roles {
  background-image: linear-gradient(
    135deg,
    #c084fc 0%,
    #a855f7 20%,
    #7c3aed 42%,
    #4f46e5 60%,
    #818cf8 80%,
    #c084fc 100%
  );
  filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.65));
  animation: shimmer-guardian 4s ease-in-out infinite;
  background-size: 200% auto;
}

/* GUARDIAN HOLDERS — teal → cyan → mint */
.title-guardian-holders {
  background-image: linear-gradient(
    135deg,
    #34d399 0%,
    #10b981 22%,
    #06b6d4 48%,
    #0ea5e9 65%,
    #22d3ee 82%,
    #34d399 100%
  );
  filter: drop-shadow(0 0 10px rgba(6, 182, 212, 0.6));
  animation: shimmer-holders 4s ease-in-out infinite;
  background-size: 200% auto;
}

@keyframes shimmer-bloom {
  0%   { background-position: 0% center; }
  50%  { background-position: 100% center; }
  100% { background-position: 0% center; }
}
@keyframes shimmer-guardian {
  0%   { background-position: 0% center; }
  50%  { background-position: 100% center; }
  100% { background-position: 0% center; }
}
@keyframes shimmer-holders {
  0%   { background-position: 0% center; }
  50%  { background-position: 100% center; }
  100% { background-position: 0% center; }
}

/* Panel icon glow per title theme */
.panel-header:has(.title-bloom-identity) .panel-icon {
  filter: drop-shadow(0 0 6px rgba(220,180,0,0.7));
}
.panel-header:has(.title-guardian-roles) .panel-icon {
  filter: drop-shadow(0 0 6px rgba(139,92,246,0.7));
}
.panel-header:has(.title-guardian-holders) .panel-icon {
  filter: drop-shadow(0 0 6px rgba(6,182,212,0.7));
}

/* ── TOP ROW — 2 column: [Identity+CA stacked] [GH full height] ── */
.panels-wrapper{width:100%;padding:clamp(4px,0.8vw,8px);padding-top:0.05cm;padding-left:0;padding-bottom:0;}
.top-row{
  display:grid;
  grid-template-columns: 35vw 1fr;
  gap:0.05cm;
  align-items:stretch;
  width:100%;
  min-height:calc(100vh - var(--nav-h) - 16px);
}
/* Col 1 wrapper (Identity + CA stacked) */
.top-row-col1{grid-column:1;display:flex;flex-direction:column;gap:0.05cm;}
.top-row .panel-identity{flex-shrink:0;}
/* CA stretches to fill remaining col1 height */
.holders-panel{grid-column:2;align-self:stretch;margin-top:0;margin-bottom:0;}
.guardian-roles-panel{flex:1;position:relative;}
#ca-not-sbt-notice{
  border-radius:inherit;
  background:rgba(6,6,8,0.85);
  backdrop-filter:blur(4px);
}
/* Desktop (≥1280px): fully remove the overlay background so the card's
   own background (and its gradient border glow) shows through cleanly. */
@media (min-width:1280px){
  #ca-not-sbt-notice{
    background:transparent;
    backdrop-filter:none;
  }
}

/* Desktop-only: give the BLOOM SCORE column (header + cells) more breathing room */
@media (min-width:1280px){
  .gardeners-table th:nth-child(3),
  .gardeners-table td:nth-child(3){
    width:220px;
    min-width:220px;
  }
  .gardeners-table th:nth-child(3) .th-label-full{
    white-space:nowrap;
  }
}


/* Cards with animated gradient border (background-clip technique —
   does not use pseudo-elements/z-index, so card content is never hidden) */
.top-row .panel-identity,
.top-row .guardian-roles-panel,
.top-row .holders-panel {
  border: 1.5px solid transparent !important;
  border-radius: 12px !important;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: 100% 100%, 300% 300%;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Hover: lift + colored glow + faster shimmer */
.top-row .panel-identity:hover,
.top-row .guardian-roles-panel:hover,
.top-row .holders-panel:hover {
  transform: translateY(-2px);
  animation-duration: 2.2s;
}
.top-row .panel-identity:hover {
  box-shadow: 0 10px 28px rgba(220,180,0,.28);
}
.top-row .guardian-roles-panel:hover {
  box-shadow: 0 10px 28px rgba(124,58,237,.28);
}
.top-row .holders-panel:hover {
  box-shadow: 0 10px 28px rgba(16,185,129,.28);
}

/* Identity — warm gold → yellow → solar */
.top-row .panel-identity {
  position:relative;
  background-image:
    linear-gradient(rgba(6,6,8,0.75), rgba(6,6,8,0.75)),
    linear-gradient(135deg,#fff9c4,#fff176,#ffe100,#ffd000,#f0b800,#ffe100,#fff9c4);
  animation-name: border-shimmer-bloom;
}
/* Dynamic LSP7/LSP8 watermark, set via --identity-bg from JS (loadIdentityPanel) */
.top-row .panel-identity::before{
  content:'';
  position:absolute;inset:0;
  border-radius:inherit;
  background-image:var(--identity-bg,url('LSP7.png'));
  background-size:var(--identity-bg-size,cover);background-position:var(--identity-bg-position,center);background-repeat:no-repeat;
  opacity:.16;
  pointer-events:none;z-index:0;
}
.top-row .panel-identity > *{position:relative;z-index:1;}
@keyframes border-shimmer-bloom {
  0%   { background-position: 0 0, 0% 50%; }
  50%  { background-position: 0 0, 100% 50%; }
  100% { background-position: 0 0, 0% 50%; }
}

/* Contract Actions — violet → indigo → electric blue */
.top-row .guardian-roles-panel {
  background-image:
    linear-gradient(rgba(6,6,8,0.75), rgba(6,6,8,0.75)),
    linear-gradient(135deg,#c084fc,#a855f7,#7c3aed,#4f46e5,#818cf8,#c084fc,#c084fc);
  animation-name: border-shimmer-guardian;
}
@keyframes border-shimmer-guardian {
  0%   { background-position: 0 0, 0% 50%; }
  50%  { background-position: 0 0, 100% 50%; }
  100% { background-position: 0 0, 0% 50%; }
}

/* Guardian Holders — teal → cyan → mint */
.top-row .holders-panel {
  position:relative;
  background-image:
    linear-gradient(rgba(6,6,8,0.75), rgba(6,6,8,0.75)),
    linear-gradient(135deg,#34d399,#10b981,#06b6d4,#0ea5e9,#22d3ee,#34d399,#34d399);
  animation-name: border-shimmer-holders;
}
/* Static backtop.png watermark */
.top-row .holders-panel::before{
  content:'';
  position:absolute;inset:0;
  border-radius:inherit;
  background-image:url('backtop.png');
  background-size:cover;background-position:center;background-repeat:no-repeat;
  opacity:.16;
  pointer-events:none;z-index:0;
}
.top-row .holders-panel > *{position:relative;z-index:1;}
@keyframes border-shimmer-holders {
  0%   { background-position: 0 0, 0% 50%; }
  50%  { background-position: 0 0, 100% 50%; }
  100% { background-position: 0 0, 0% 50%; }
}

.top-row .guardian-roles-panel { display: flex; flex-direction: column; overflow: hidden; }
.top-row .holders-panel { display: flex; flex-direction: column; }
.top-row .holders-panel .gardeners-footer { margin-top: auto; margin-bottom: 0.15cm; padding-top: 8px !important; }

/* ── IDENTITY PANEL ──────────────────────────────────────────── */
.identity-body{padding:clamp(6px,0.8vw,14px);display:flex;gap:clamp(8px,0.9vw,16px);align-items:flex-start;}
.identity-img-wrap{
  display:flex;flex-direction:column;align-items:center;gap:clamp(6px,0.6vw,10px);flex-shrink:0;
  width:clamp(100px,12vw,220px);
}
.identity-img{
  width:clamp(100px,12vw,220px);height:calc(clamp(100px,12vw,220px) + 38px);border-radius:14px;
  background:transparent;
  border:2px solid rgba(220,180,0,.5);
  display:flex;align-items:center;justify-content:center;font-size:72px;
  box-shadow:0 0 30px rgba(220,180,0,.3),0 0 60px rgba(220,180,0,.1);
  cursor:pointer;position:relative;overflow:hidden;transition:border-color .2s,box-shadow .2s;
}
.identity-img:hover{
  border-color:rgba(255,220,0,.85);
  box-shadow:0 0 40px rgba(220,180,0,.55),0 0 80px rgba(220,180,0,.2);
}
.identity-img-overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .2s;
  font-size:12px;color:var(--text);letter-spacing:1px;
  font-family:var(--font-mono);
}
.identity-img:hover .identity-img-overlay{opacity:1;}
.btn-change-img{
  font-family:var(--font-mono);font-size:9px;letter-spacing:1px;
  color:#ffe040;cursor:pointer;border:none;background:none;
  text-transform:uppercase;
}
.identity-fields{flex:1;display:flex;flex-direction:column;gap:12px;min-width:0;}
.th-label-full{display:inline;}
.th-label-short{display:none;}
.field-label{font-family:var(--font-mono);font-size:9px;letter-spacing:2px;color:#ffe040;margin-bottom:5px;text-transform:uppercase;}
.field-input{
  width:100%;background:var(--surface2);
  border:1px solid var(--border2);border-radius:7px;
  padding:9px 12px;font-family:var(--font-body);font-size:12px;
  color:var(--text);outline:none;transition:border-color .15s;
}
.field-input:focus{border-color:rgba(220,180,0,.6);}
.field-textarea{resize:none;height:60px;line-height:1.5;}
.links-row{display:flex;gap:8px;align-items:center;}
.link-btn{
  width:32px;height:32px;border-radius:7px;
  background:var(--surface2);border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:14px;transition:all .15s;color:var(--muted);
}
.link-btn:hover{border-color:var(--accent);color:var(--accent2);}
.link-btn.filled{border-color:rgba(220,180,0,.4);color:#ffe040;}
.add-link-btn{
  font-family:var(--font-mono);font-size:9px;color:var(--muted2);
  background:#000;border:1px dashed #000;border-radius:7px;
  padding:0 10px;height:32px;cursor:pointer;transition:all .15s;letter-spacing:1px;
}
.add-link-btn:hover{border-color:rgba(220,180,0,.4);color:#ffe040;}
.identity-footer{
  padding:0.8vw 1.2vw;
  border-top:1px solid var(--border);
  display:flex;justify-content:flex-end;gap:0.6vw;align-items:center;
}
.btn-save{
  position:relative;
  background:linear-gradient(135deg,#fff176 0%,#ffe040 45%,#f5c800 100%);
  border:1px solid rgba(255,255,255,.25);
  border-radius:8px;
  font-family:var(--font-display);font-size:10px;
  letter-spacing:2px;color:#1a1200;font-weight:900;
  text-shadow:0 1px 2px rgba(255,255,255,.2);
  padding:10px 22px;cursor:pointer;
  box-shadow:0 4px 16px rgba(220,180,0,.35),inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .15s,box-shadow .15s,filter .15s;
}
.btn-save:hover{
  box-shadow:0 6px 26px rgba(220,180,0,.6),inset 0 1px 0 rgba(255,255,255,.5);
  transform:translateY(-2px);
  filter:brightness(1.08);
}
.btn-save:active{
  transform:translateY(0);
  box-shadow:0 2px 10px rgba(220,180,0,.4),inset 0 1px 4px rgba(0,0,0,.15);
  filter:brightness(.96);
}
.btn-save:disabled{
  cursor:default;
  filter:grayscale(.35) brightness(.85);
  box-shadow:0 2px 10px rgba(220,180,0,.2),inset 0 1px 0 rgba(255,255,255,.15);
  transform:none;
}
.btn-view-garden{
  background:none;border:1px solid var(--border2);border-radius:8px;
  font-family:var(--font-mono);font-size:9px;letter-spacing:1.5px;
  color:var(--muted);padding:10px 16px;cursor:pointer;
  transition:all .15s;text-transform:uppercase;
}
.btn-view-garden:hover{border-color:var(--accent);color:var(--accent2);}
.identity-footer .btn-view-garden:hover{border-color:rgba(255,220,0,.8);color:#ffe040;}
/* CANCEL lights up once the form differs from the freshly-fetched native data */
.identity-footer .btn-view-garden.is-dirty{
  border-color:rgba(220,180,0,.6);
  color:#ffe040;
  background:rgba(220,180,0,.08);
}
.identity-footer .btn-view-garden.is-dirty:hover{
  border-color:rgba(255,220,0,.9);
  color:#fff176;
  background:rgba(220,180,0,.16);
}
/* VIEW button in the BLOOM IDENTITY title band — solid white outline + white text for visibility */
.panel-identity .panel-header .btn-view-garden{
  border:1px solid rgba(255,255,255,.6);
  color:#fff;
  padding:5px 10px;
  font-size:8px;
}
.panel-identity .panel-header .btn-view-garden:hover{
  border-color:var(--accent);
  color:#fff;
  background:rgba(220,180,0,.1);
}

/* ── GUARDIANS PANEL ──────────────────────────────────────────── */
.guardians-body{padding:16px 20px;display:flex;flex-direction:column;gap:8px;}
.guardian-row{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:9px;
  background:var(--surface2);
  cursor:pointer;transition:all .15s;
}
.guardian-row:hover{background:var(--surface3);}
.guardian-rank{
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  color:var(--muted2);min-width:22px;text-align:center;flex-shrink:0;
}
.guardian-icon{
  width:32px;height:32px;border-radius:7px;
  background:linear-gradient(135deg,rgba(232,102,10,.25),rgba(232,102,10,.08));
  display:flex;align-items:center;justify-content:center;font-size:15px;
  flex-shrink:0;
}
.guardian-info{flex:1;}
.guardian-name{font-size:12px;font-weight:600;color:var(--text);}
.guardian-desc{font-size:10px;color:var(--muted);margin-top:1px;}
.guardian-members{display:flex;align-items:center;gap:6px;}
.member-avatars{display:flex;}
.member-avatar{
  width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle,#8a4020,#2a1006);
  border:1.5px solid var(--bg);
  margin-left:-6px;font-size:10px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.member-avatar:first-child{margin-left:0;}
.member-count{font-family:var(--font-mono);font-size:10px;color:var(--muted);}
.guardian-arrow{color:var(--muted2);font-size:12px;}
.btn-add-guardian{
  margin-top:4px;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:10px;border-radius:9px;cursor:pointer;
  background:transparent;border:1px dashed rgba(232,102,10,.3);
  color:var(--accent);font-size:11px;font-weight:600;letter-spacing:.5px;
  transition:all .15s;
}
.btn-add-guardian:hover{background:rgba(232,102,10,.07);border-color:var(--accent);}

/* ── GARDENERS PANEL ──────────────────────────────────────────── */
.gardeners-header-actions{display:flex;align-items:center;gap:clamp(6px,1vw,10px);flex-wrap:wrap;}
.search-wrap{
  position:relative;display:flex;align-items:center;
}
.search-input{
  background:var(--surface2);border:1px solid var(--border2);
  border-radius:7px;padding:7px 12px 7px 30px;
  font-family:var(--font-body);font-size:11px;color:var(--text);
  outline:none;width:72px;transition:border-color .15s;
}
.search-input:focus{border-color:rgba(232,102,10,.4);}
.search-icon{
  position:absolute;left:9px;font-size:11px;color:var(--muted2);
  pointer-events:none;
}
.filter-btn{
  width:32px;height:32px;border-radius:7px;
  background:var(--surface2);border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:14px;color:var(--muted);transition:all .15s;
}
.filter-btn:hover{border-color:var(--accent);color:var(--accent2);}
.gardeners-table{width:100%;border-collapse:separate;border-spacing:0 4px;min-width:0;}
.gardeners-table thead tr{
  border-bottom:none;
}
.gardeners-table th{
  font-family:var(--font-mono);font-size:clamp(7px,0.5vw,9px);letter-spacing:clamp(1px,0.15vw,2px);
  color:var(--muted2);text-align:left;padding:clamp(3px,0.3vw,6px) clamp(8px,0.8vw,14px) clamp(5px,0.5vw,9px);
  text-transform:uppercase;font-weight:400;
}
.gardeners-table tbody tr{
  background:rgba(20,20,32,0.15);
  border-radius:14px;
  transition:all .18s;cursor:pointer;
  box-shadow:0 0 0 1px rgba(255,255,255,0.07);
  backdrop-filter:blur(6px);
}
.gardeners-table tbody tr:hover{
  background:rgba(30,22,14,0.25);
  box-shadow:0 0 0 1px rgba(232,102,10,.35), 0 4px 16px rgba(232,102,10,.1);
}
.gardeners-table tbody tr.row-selected{
  background:rgba(232,102,10,.12);
  box-shadow:0 0 0 1.5px rgba(232,102,10,.6), 0 4px 20px rgba(232,102,10,.18);
}
.gardeners-table td{padding:clamp(5px,0.6vw,9px) clamp(7px,0.8vw,12px);font-size:clamp(10px,0.68vw,12.5px);}
.gardeners-table td:first-child{border-radius:14px 0 0 14px;}
.gardeners-table td:last-child{border-radius:0 14px 14px 0;}
.gardener-cell{display:flex;align-items:center;gap:13px;}
.gardener-avatar{
  width:clamp(32px,2.4vw,52px);height:clamp(32px,2.4vw,52px);border-radius:50%;
  background:radial-gradient(circle,#8a4020,#2a1006);
  border:2px solid rgba(255,77,0,.3);
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(14px,1.1vw,22px);flex-shrink:0;
  overflow:hidden;
  position:relative;
}
.gardener-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;}
.gardener-name{font-weight:600;color:var(--text);font-size:clamp(10px,0.75vw,14px);}
.gardener-addr{font-family:var(--font-mono);font-size:clamp(8px,0.55vw,10px);color:var(--muted);margin-top:2px;}
.score-cell{display:flex;align-items:center;gap:6px;}
.score-val{font-family:var(--font-mono);font-size:15px;font-weight:700;}
.score-high{color:var(--green);}
.score-mid{color:var(--accent3);}
.score-low{color:var(--accent);}
.score-never{color:#ff1414;font-size:12px;font-weight:600;font-style:italic;letter-spacing:.2px;}
.score-spark{font-size:12px;}
.token-badge{
  display:inline-flex;align-items:center;
  font-family:var(--font-mono);font-size:10px;
  background:rgba(212,168,67,.12);color:var(--gold);
  border:1px solid rgba(212,168,67,.2);
  padding:2px 8px;border-radius:4px;
}
.tokenid-dropdown-wrap{display:inline-flex;}
.lsp8-count-badge{
  font-family:var(--font-mono);font-size:9px;font-weight:700;
  color:var(--muted2);background:rgba(255,255,255,.06);
  border:1px solid var(--border2);border-radius:4px;
  padding:1px 5px;white-space:nowrap;
}
.tokenid-dropdown-panel{
  position:absolute;top:calc(100% + 4px);left:0;z-index:9999;
  min-width:110px;max-height:220px;overflow-y:auto;
  background:rgba(10,8,6,.98);border:1px solid rgba(212,168,67,.25);
  border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.5);
  padding:4px;scrollbar-width:thin;scrollbar-color:var(--gold) transparent;
}
.tokenid-dropdown-panel::-webkit-scrollbar{width:4px;}
.tokenid-dropdown-panel::-webkit-scrollbar-thumb{background:var(--gold);border-radius:2px;}
.tokenid-dropdown-item{
  font-family:var(--font-mono);font-size:10px;color:var(--gold);
  padding:4px 8px;border-radius:4px;cursor:pointer;white-space:nowrap;
}
.tokenid-dropdown-item:hover{background:rgba(212,168,67,.14);}
.tokenid-dropdown-item.is-current{background:rgba(212,168,67,.2);font-weight:700;}
.tokenid-dropdown-loading,.tokenid-dropdown-empty{
  font-family:var(--font-mono);font-size:9px;color:var(--muted);padding:6px 8px;white-space:nowrap;
}
.since-cell{font-family:var(--font-mono);font-size:10px;color:var(--muted);}
.actions-cell{display:flex;align-items:center;gap:6px;}
.action-btn{
  width:28px;height:28px;border-radius:6px;
  border:1px solid var(--border2);background:var(--surface2);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:13px;transition:all .15s;color:var(--muted);
}
.action-btn:hover.inspect{border-color:rgba(100,180,255,.3);color:#64b4ff;}
.action-btn:hover.revoke{border-color:rgba(248,113,113,.3);color:var(--red);}
.action-btn:hover.airtrust{border-color:rgba(16,185,129,.4);color:#34d399;}

/* ══════════════════════════════════════════════════════════════════════
   AIRTRUST MODAL — native (left "YOUR TOKENS & COLLECTIBLES" panel only)
   Recipients are sourced from the current Bloom Network selection —
   no Bloomboard / filters panel here.
   ══════════════════════════════════════════════════════════════════════ */
#airtrust-content{
  display:none;position:fixed;inset:0;z-index:99998;
  background:rgba(0,0,0,0.88);backdrop-filter:blur(6px);
  align-items:center;justify-content:center;
  padding:3vw 16px;box-sizing:border-box;
}
#airtrust-content.open{display:flex;}
.airtrust-modal-card{
  position:relative;width:100%;max-width:560px;max-height:92vh;
  overflow-y:auto;overflow-x:hidden;
  background:rgba(6,6,8,0.98);
  border:1.5px solid rgba(16,185,129,0.45);border-radius:14px;
  box-shadow:0 0 0 1px rgba(16,185,129,0.08),0 0 60px rgba(6,182,212,0.18),0 8px 40px rgba(0,0,0,0.8);
  padding:28px 22px 22px;box-sizing:border-box;
  scrollbar-width:thin;scrollbar-color:#34d399 transparent;
  font-family:var(--font-body);
}
.airtrust-modal-card::-webkit-scrollbar{width:5px;}
.airtrust-modal-card::-webkit-scrollbar-thumb{background:#34d399;border-radius:3px;}

.airtrust-modal-close{
  position:absolute;top:14px;right:14px;z-index:5;width:30px;height:30px;
  background:rgba(0,0,0,0.7);border:1.5px solid rgba(16,185,129,0.4);
  color:#34d399;font-size:14px;line-height:1;border-radius:6px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.airtrust-modal-close:hover{background:rgba(16,185,129,0.2);border-color:#34d399;color:#fff;}

.airtrust-modal-header{text-align:center;margin-bottom:18px;}
.airtrust-modal-header .at-title{
  font-family:var(--font-display);font-size:18px;font-weight:900;
  letter-spacing:5px;color:#34d399;text-transform:uppercase;
  text-shadow:0 0 8px rgba(16,185,129,.7),0 0 20px rgba(6,182,212,.35);
}
.airtrust-modal-header .at-subtitle{
  font-family:var(--font-mono);font-size:9px;letter-spacing:2px;
  color:#886655;text-transform:uppercase;margin-top:5px;
}

#assets-held-section{
  background-color:rgba(10,10,14,0.6);
  background-size:cover;background-position:center center;background-repeat:no-repeat;
  border:1px solid rgba(16,185,129,0.3);border-radius:12px;
  padding:16px;box-sizing:border-box;
  transition:background-image .4s ease;
}

.airtrust-section-title{
  font-family:var(--font-display);font-size:11px;font-weight:800;
  letter-spacing:3px;color:#34d399;text-transform:uppercase;
  text-shadow:0 0 8px rgba(16,185,129,.6),0 0 20px rgba(6,182,212,.3);
}

.airtrust-list{
  display:flex;flex-direction:column;gap:8px;
  max-height:280px;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:#34d399 transparent;
}
.airtrust-list::-webkit-scrollbar{width:4px;}
.airtrust-list::-webkit-scrollbar-thumb{background:#34d399;border-radius:2px;}

.airtrust-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 12px;min-height:48px;
  background:linear-gradient(135deg, rgba(16,185,129,0.08), rgba(6,182,212,0.04));
  border:1px solid rgba(16,185,129,0.3);border-radius:6px;
  font-family:var(--font-mono);font-size:11px;color:var(--text);
  transition:all .18s;flex-shrink:0;
}
.airtrust-item:hover{border-color:rgba(52,211,153,.8);box-shadow:0 0 14px rgba(16,185,129,.2);}

.token-drop-item{padding:10px 12px;min-height:48px;line-height:1.3;align-items:center;}

.airtrust-item-name{color:#34d399;font-weight:700;font-size:11px;}
.airtrust-item-value{color:var(--green);font-weight:700;text-align:right;font-size:12px;}
.airtrust-item-address{color:#888;font-size:9px;letter-spacing:.5px;}
.airtrust-item-label{display:flex;flex-direction:column;gap:3px;}
.airtrust-label-wrap{display:flex;align-items:center;gap:10px;}
.airtrust-item-meta{display:flex;flex-direction:column;gap:2px;}
.airtrust-upname{font-weight:700;color:#34d399;font-size:11px;}
.airtrust-pfp{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;box-shadow:0 0 8px rgba(16,185,129,.3);transition:box-shadow .2s;}
.airtrust-item:hover .airtrust-pfp{box-shadow:0 0 14px rgba(6,182,212,.5);}
.airtrust-pfp-fallback{width:36px;height:36px;border-radius:50%;background:rgba(16,185,129,.12);display:inline-block;flex-shrink:0;}

.airtrust-loading{text-align:center;padding:32px 20px;color:#34d399;font-family:var(--font-mono);font-size:11px;letter-spacing:2px;}
.airtrust-error{text-align:center;padding:18px;background:rgba(255,100,100,.1);border:1.5px solid rgba(255,100,100,.3);border-radius:6px;color:#ff6464;font-family:var(--font-mono);font-size:11px;letter-spacing:1px;}

#airtrust-content .nft-up-option:hover{background:rgba(16,185,129,0.12) !important;}

.gardeners-footer{
  display:flex;align-items:center;justify-content:center;
  padding:6.5px 14px;border-top:1px solid var(--border);
}
.btn-view-all{
  font-family:var(--font-display);font-size:9px;letter-spacing:2px;
  color:var(--accent2);background:none;border:none;cursor:pointer;
  display:flex;align-items:center;gap:8px;text-transform:uppercase;
  transition:color .15s;
}
.btn-view-all:hover{color:var(--accent3);}

/* ── SCORE BAR ──────────────────────────────────────────────── */
.score-bar-wrap{
  width:70px;height:5px;background:rgba(255,255,255,.12);
  border-radius:3px;overflow:hidden;display:inline-block;
  vertical-align:middle;margin-left:6px;flex-shrink:0;
}
.score-bar-fill{display:block;height:100%;border-radius:3px;transition:width .3s;min-width:2px;}

/* ── GLOW ACCENTS ──────────────────────────────────────────────── */
.glow-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 8px var(--glow);
  flex-shrink:0;
}

/* ── CONTRACT ACTIONS PANEL ────────────────────────────────────── */
.ca-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  gap: 2px;
  flex-shrink: 0;
}
.ca-tab {
  font-family: 'Nunito', sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 9px 10px 8px;
  cursor: pointer;
  transition: all .15s;
  margin-bottom: -1px;
}
.ca-tab:hover { color: var(--text); }
.ca-tab.active {
  color: #c084fc;
  border-bottom-color: #a855f7;
}
.ca-pane {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.ca-field-group { display: flex; flex-direction: column; gap: 5px; }
.ca-label {
  font-family: 'Nunito', sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--muted2);
  text-transform: uppercase;
}
.ca-input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 7px;
  padding: clamp(6px, 0.8vw, 9px) 11px;
  font-family: 'Nunito', sans-serif;
  font-size: clamp(9px, 0.7vw, 11px);
  color: var(--text);
  outline: none;
  transition: border-color .15s;
  letter-spacing: 0.5px;
}
.ca-input:focus { border-color: rgba(168, 85, 247, .5); }
.ca-input[type=number]::-webkit-inner-spin-button,
.ca-input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ca-input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.ca-row { display: flex; align-items: center; gap: 8px; }
.ca-checkbox-label {
  font-family: 'Nunito', sans-serif;
  font-size: 8px;
  color: var(--muted);
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.ca-action-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: clamp(9px, 1vw, 11px) 16px;
  border: none;
  border-radius: 8px;
  font-family: 'Nunito', sans-serif;
  font-size: clamp(8px, 0.65vw, 10px);
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all .18s;
  text-transform: uppercase;
  margin-top: 4px;
  position: relative;
  overflow: hidden;
}
.ca-action-btn:disabled { opacity: .4; cursor: not-allowed; }
.ca-action-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.08);
  opacity: 0;
  transition: opacity .15s;
}
.ca-action-btn:not(:disabled):hover::after { opacity: 1; }
.ca-btn-mint {
  background: linear-gradient(135deg, #1a3d1a, #2a5e1a);
  color: #6ee86e;
  box-shadow: 0 3px 14px rgba(0,220,80,.2);
  border: 1px solid rgba(0,220,80,.25);
}
.ca-btn-mint:not(:disabled):hover { box-shadow: 0 4px 20px rgba(0,220,80,.35); transform: translateY(-1px); }
.ca-btn-danger {
  background: linear-gradient(135deg, #3d1212, #5e1a1a);
  color: #f87171;
  box-shadow: 0 3px 14px rgba(248,113,113,.2);
  border: 1px solid rgba(248,113,113,.25);
}
.ca-btn-danger:not(:disabled):hover { box-shadow: 0 4px 20px rgba(248,113,113,.35); transform: translateY(-1px); }
.ca-btn-lock {
  background: linear-gradient(135deg, #1a1440, #2a1a5e);
  color: #a5b4fc;
  box-shadow: 0 3px 14px rgba(99,102,241,.2);
  border: 1px solid rgba(99,102,241,.3);
}
.ca-btn-lock:not(:disabled):hover { box-shadow: 0 4px 20px rgba(99,102,241,.35); transform: translateY(-1px); }
.ca-btn-unlock {
  background: linear-gradient(135deg, #2a2a0a, #3d3a00);
  color: #fde68a;
  box-shadow: 0 3px 14px rgba(250,204,21,.15);
  border: 1px solid rgba(250,204,21,.25);
}
.ca-btn-unlock:not(:disabled):hover { transform: translateY(-1px); }
.ca-status {
  font-family: 'Nunito', sans-serif;
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--muted2);
  min-height: 14px;
  transition: color .2s;
  text-align: center;
}
.ca-status.ok { color: var(--green); }
.ca-status.err { color: var(--red); }
.ca-status.pending { color: var(--accent3); }

.ca-mini-btn {
  font-family: 'Nunito', sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 9px;
  border-radius: 5px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
  text-transform: uppercase;
  white-space: nowrap;
}
.ca-mini-btn:hover { border-color: rgba(168,85,247,.4); color: #c084fc; }
.ca-mini-grant { border: 2px solid rgba(0,220,80,.4); color: #6ee86e; background: rgba(0,220,80,.06); }
.ca-mini-grant:hover { border-color: rgba(0,220,80,.7); }
.ca-mini-revoke-r { border-color: rgba(248,113,113,.2); color: #f87171; background: rgba(248,113,113,.06); }
.ca-mini-revoke-r:hover { border-color: rgba(248,113,113,.5); }

/* Roles grid — 4 columns side by side, always fitting the card width */
#ca-pane-roles { overflow-x: hidden; }
.ca-roles-grid {
  --ca-gap: clamp(4px, 1.2vw, 14px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--ca-gap);
  row-gap: 0;
}
.ca-role-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  transition: border-color .15s;
}
.ca-role-row:hover { border-color: rgba(168,85,247,.25); }
.ca-role-icon { font-size: 15px; flex-shrink: 0; }
.ca-role-info { flex: 1; min-width: 0; }
.ca-role-name { font-size: 11px; font-weight: 600; color: var(--text); }
.ca-role-hash { font-family: 'Nunito', sans-serif; font-size: 7.5px; color: var(--muted2); letter-spacing: .5px; margin-top: 1px; }
.ca-role-actions { display: flex; gap: 5px; flex-shrink: 0; }

/* Lock state */
.ca-lock-state {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ca-lock-row { display: flex; align-items: center; justify-content: space-between; }
.ca-lock-lbl { font-family: 'Nunito', sans-serif; font-size: 11px; color: var(--muted); letter-spacing: 1px; }
.ca-lock-val { font-family: 'Nunito', sans-serif; font-size: 12px; color: var(--accent3); letter-spacing: .5px; }
/* Hide spinners on calendar time inputs */
#lock-cal-hh::-webkit-inner-spin-button, #lock-cal-hh::-webkit-outer-spin-button,
#lock-cal-mm::-webkit-inner-spin-button, #lock-cal-mm::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
#lock-cal-hh, #lock-cal-mm { -moz-appearance:textfield; appearance:textfield; }
/* Hide spinners on calendar time inputs */
#ca-pane-lock .ca-label { font-size: 11px; color: #facc15; }
#ca-pane-lock .ca-input { font-size: 12px; background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
#ca-pane-lock .ca-mini-btn { font-size: 10px; padding: 3px 10px; }

/* Info box */
.ca-info-box {
  background: rgba(168,85,247,.07);
  border: 1px solid rgba(168,85,247,.2);
  border-radius: 7px;
  padding: 9px 12px;
  font-size: 10px;
  color: var(--muted);
  line-height: 1.5;
}

/* role blocks — vertical layout */
.ca-role-block {
  border: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
}
.ca-role-block:not(:last-child)::after {
  content: '';
  position: absolute;
  right: calc(-1 * var(--ca-gap) / 2 - 1.5px);
  top: 0.2cm;
  bottom: 0;
  width: 0.5px;
  background: #ffd1e6;
}
.ca-role-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 0 8px;
  border-bottom: none;
  background: transparent;
}
.ca-role-img {
  width: calc(100% + 2cm);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 100px;
  flex-shrink: 0;
  margin-inline: -0.75cm;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), filter .25s ease;
  will-change: transform;
}
.ca-role-img:hover {
  transform: scale(1.18);
  filter: drop-shadow(0 0 12px rgba(255,180,100,.45));
  z-index: 10;
  position: relative;
}

/* ── ROLE INFO MODAL ── */
#role-info-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(12px);
  align-items: center;
  justify-content: center;
}
#role-info-modal.open { display: flex; }

/* ── TOKEN PREVIEW MODAL: BLOOM EDITOR THEME ─────────────────── */
#token-preview-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(12px);
  align-items: center;
  justify-content: center;
  /* Force browser to fetch tokenid2.png even before modal opens */
  background-image: url("tokenid2.png");
  background-size: 0;
}
#token-preview-modal.open { display: flex; background-image: none; overflow: visible; }
#token-preview-card {
  --bloom-pink: #ff7fc2;
  --bloom-pink-glow: rgba(255,127,194,.35);
  --bloom-purple: #b794f6;
  --bloom-surface: rgba(50,20,38,.45);
  --bloom-border: rgba(255,127,194,.22);
  --bloom-text: #f7e9f1;
  --bloom-muted: #c9aec0;
  --bloom-green: #8fe3a3;
  /* Frame border via border-image — tokenid2.png sliced at 18% on each side */
  background-color: transparent;
  border-style: solid;
  border-width: clamp(25px, 3.5vw, 49px) 3cm;
  border-image: url('tokenid2.png') 22% fill / clamp(36px,5vw,70px) 3cm stretch;
  border-radius: 0;
  box-shadow: 0 30px 80px rgba(0,0,0,.75), 0 0 70px var(--bloom-pink-glow);
  padding: 0;
  width: min(calc(96vw), calc(980px + 7cm));
  max-height: calc(94vh + 2cm);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: fadeUp .22s ease both;
  position: relative;
  font-family: 'Nunito', sans-serif;
  color: var(--bloom-text);
}
#token-preview-card .tp-close {
  position: absolute;
  /* Above the top-right corner of the card, outside the card bounds */
  top: calc(-1 * clamp(36px, 5vw, 70px) + 8px);
  right: calc(-3cm + 14px);
  transform: none;
  background: rgba(14,7,16,.75); border: 1px solid rgba(255,127,194,.35);
  border-radius: 50%;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,127,194,.85); font-size: 14px;
  cursor: pointer; line-height: 1;
  z-index: 100;
  transition: color .15s, background .15s, border-color .15s;
}
#token-preview-card .tp-close:hover { color: var(--bloom-pink); background: rgba(255,127,194,.15); border-color: var(--bloom-pink); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── TOKEN PREVIEW MODAL — responsive fix ───────────────────────
   The 3cm side borders (decorative tokenid2.png frame) were fixed
   in absolute units, so on small screens they ate almost the whole
   modal width and left barely any room for the actual content.
   Below 760px we swap them for vw-based clamps so the frame scales
   down with the viewport and the card can use the full screen. */
@media (max-width: 760px) {
  #token-preview-card {
    border-width: clamp(14px, 4vw, 22px) clamp(10px, 3.5vw, 18px);
    border-image: url('tokenid2.png') 22% fill / clamp(20px, 6vw, 30px) clamp(10px, 3.5vw, 18px) stretch;
    width: 96vw;
    max-height: 94vh;
  }
  /* The close button used to sit just outside the card's border, which
     on small screens could land off-screen or get hidden depending on
     content height. Pin it to the viewport corner instead so it's
     always visible and tappable. */
  #token-preview-card .tp-close {
    position: fixed !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 100000 !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 16px !important;
    background: rgba(14,7,16,.85) !important;
  }

  /* "Bloom Identity" → "Identity", "Bloom Story" → "Story" (desktop keeps full label) */
  #token-preview-card .tp-word-bloom {
    display: none !important;
  }

  /* Mobile-only: hide the flower / name / tier-pill line (e.g. "🌺 Garden Guardian 🌸 AWAKENED TIER") */
  #token-preview-card .bloom-editor-header {
    display: none !important;
  }

  /* TIER field in Attributes — 20% narrower, icon picker reclaims the space */
  #token-preview-card #tp-tier-label-input {
    flex: 0 0 26.6% !important;
  }

  /* CULTIVATE BLOOM — push to its own row at the bottom, centered */
  #token-preview-card .bloom-footer {
    flex-direction: column !important;
    align-items: center !important;
  }
  #token-preview-card .bloom-status {
    flex: 0 0 auto !important;
    order: 1 !important;
    text-align: center !important;
    justify-content: center !important;
  }
  #token-preview-card #tp-explorer-btn {
    order: 2 !important;
  }
  #token-preview-card #tp-save-btn {
    order: 3 !important;
    width: 100% !important;
  }
}

/* layout */
.bloom-layout { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.bloom-preview-col { flex: 0 0 360px; max-width: 100%; display: flex; flex-direction: column; gap: 12px; }
.bloom-eyebrow {
  font-size: 11px; letter-spacing: 3px; font-weight: 800;
  color: var(--bloom-pink); text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
}
.bloom-card {
  background: var(--bloom-surface); border: 1px solid var(--bloom-border);
  border-radius: 16px; padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
}

/* image preview */
.bloom-img-wrap {
  position: relative; aspect-ratio: 1 / 1; width: 100%;
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--bloom-border);
  background: rgba(0,0,0,.3);
  display: flex; align-items: center; justify-content: center;
}
.bloom-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.bloom-img-wrap:hover #tp-img-hover { opacity: 1 !important; }
.bloom-img-wrap:hover img { filter: brightness(.7); }
.tp-img-loader {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--bloom-muted);
  animation: spin 1s linear infinite;
}
.bloom-chip {
  position: absolute; top: 10px; left: 10px;
  background: rgba(10,4,10,.65); border: 1px solid var(--bloom-border);
  border-radius: 20px; padding: 4px 10px; font-size: 10px;
  letter-spacing: 1px; display: flex; align-items: center; gap: 6px;
  backdrop-filter: blur(6px); color: var(--bloom-text); z-index: 1;
}
.bloom-chip code { font-family: var(--font-mono); color: var(--bloom-pink); }
.bloom-copy-btn { background: none; border: none; color: var(--bloom-muted); cursor: pointer; font-size: 12px; padding: 0; }
.bloom-copy-btn:hover { color: var(--bloom-pink); }

/* name + tier */
.bloom-name-row { display: flex; align-items: center; gap: 10px; }
.bloom-tier-badge {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--bloom-pink);
  background: rgba(255,127,194,.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.bloom-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800; letter-spacing: 1px;
  padding: 5px 11px; border-radius: 20px;
  background: rgba(143,227,163,.12); border: 1px solid rgba(143,227,163,.35);
  color: var(--bloom-green); text-transform: uppercase;
}
.bloom-preview-name { font-size: 19px; font-weight: 900; color: var(--bloom-text); line-height: 1.2; }
.bloom-preview-sub { font-size: 11px; color: var(--bloom-muted); display: flex; align-items: center; gap: 5px; margin-top: 2px; }

/* overview stats */
.bloom-deco-divider { height: 1px; background: linear-gradient(90deg, var(--bloom-pink-glow), transparent 75%); margin: 0; }
.bloom-overview-title { font-size: 10px; letter-spacing: 2px; font-weight: 800; color: var(--bloom-pink); text-transform: uppercase; }
.bloom-overview-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.bloom-stat { background: rgba(0,0,0,.25); border: 1px solid var(--bloom-border); border-radius: 10px; padding: 8px 6px; text-align: center; }
.bloom-stat-label { font-size: 8px; letter-spacing: 1px; color: var(--bloom-muted); text-transform: uppercase; }
.bloom-stat-val { font-size: 13px; font-weight: 800; color: var(--bloom-text); margin-top: 3px; word-break: break-word; }

/* editor column */
.bloom-editor-col { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 12px; }
.bloom-editor-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bloom-editor-header .flower { font-size: 26px; flex-shrink: 0; }
#tp-name {
  flex: 1; min-width: 120px; margin: 0;
  font-size: 28px; font-weight: 900; letter-spacing: .3px;
  background: linear-gradient(135deg, var(--bloom-pink), var(--bloom-purple));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bloom-tokenid-row { font-size: 11px; color: var(--bloom-muted); display: flex; align-items: center; gap: 6px; }
.bloom-tokenid-row code { color: var(--bloom-pink); font-family: var(--font-mono); }

/* tabs */
.bloom-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.bloom-tab {
  background: rgba(0,0,0,.25); border: 1px solid var(--bloom-border); border-radius: 10px;
  padding: 9px 14px; font-size: 10px; font-weight: 800; letter-spacing: 1.5px;
  color: var(--bloom-muted); cursor: pointer; text-transform: uppercase;
  display: flex; align-items: center; gap: 6px; transition: all .15s;
  font-family: 'Nunito', sans-serif;
}
.bloom-tab.active {
  background: linear-gradient(135deg, rgba(255,127,194,.18), rgba(183,148,246,.12));
  border-color: var(--bloom-pink); color: var(--bloom-text);
}
.bloom-tab:hover { color: var(--bloom-text); }

/* form fields */
.bloom-pane { display: flex; flex-direction: column; gap: 14px; }
.bloom-field-row { display: flex; gap: 14px; flex-wrap: wrap; }
.bloom-field { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 6px; }
.bloom-label {
  font-size: 9px; letter-spacing: 1.5px; font-weight: 800;
  color: var(--bloom-pink); text-transform: uppercase;
  display: flex; align-items: center; gap: 5px; justify-content: space-between;
}
.bloom-input, .bloom-textarea {
  width: 100%; background: rgba(0,0,0,.3); border: 1px solid var(--bloom-border);
  border-radius: 10px; padding: 10px 12px;
  font-family: 'Nunito', sans-serif; font-size: 12px; color: var(--bloom-text);
  outline: none; transition: border-color .15s; letter-spacing: .3px;
}
.bloom-input:focus, .bloom-textarea:focus { border-color: var(--bloom-pink); }
.bloom-input[readonly] { color: var(--bloom-muted); }
.bloom-textarea { resize: vertical; min-height: 160px; line-height: 1.65; }
.bloom-input-icon-wrap { position: relative; display: flex; }
.bloom-input-icon-wrap .bloom-input { padding-right: 38px; }
.bloom-icon-btn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 7px;
  background: rgba(255,127,194,.12); border: 1px solid var(--bloom-border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--bloom-pink); font-size: 12px; padding: 0;
}
.bloom-icon-btn:hover { border-color: var(--bloom-pink); }

/* tier selector */
.bloom-tier-row { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; }
.bloom-tier-icons { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; }
.bloom-tier-opt {
  flex: 1; min-width: 58px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 4px; border-radius: 0; border: none;
  background: transparent; cursor: pointer; transition: all .15s;
  font-size: 9px; letter-spacing: .5px; color: var(--bloom-muted);
}
.bloom-tier-opt .ic { font-size: 20px; }
.bloom-tier-opt.active { color: var(--bloom-pink); border-bottom: 2px solid var(--bloom-pink); }
.bloom-tier-opt:hover { color: var(--bloom-text); }
.bloom-tier-name-input {
  width: 100%; background: transparent; border: none; outline: none;
  text-align: center; color: inherit; font-family: 'Nunito', sans-serif;
  font-size: 9px; font-weight: 700; letter-spacing: .5px; padding: 2px 0;
  border-radius: 4px; cursor: text;
}
.bloom-tier-name-input:hover { background: rgba(255,127,194,.08); }
.bloom-tier-name-input:focus { background: rgba(0,0,0,.3); color: var(--bloom-text); }
.bloom-tier-preview {
  flex: 0 0 60px; max-width: 100%; border: none; border-radius: 0;
  background: transparent; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-align: center;
}
.bloom-tier-preview .ic { font-size: 30px; }
.bloom-tier-preview .cap { font-size: 9px; color: var(--bloom-muted); line-height: 1.4; }

/* links / connections */
.bloom-links-list, .tp-attrs-edit { display: flex; flex-direction: column; gap: 8px; }
.bloom-link-row, .bloom-attr-row {
  display: flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,.25); border: 1px solid var(--bloom-border);
  border-radius: 10px; padding: 6px 10px;
}
.bloom-link-icon { font-size: 14px; flex-shrink: 0; width: 18px; text-align: center; }
.bloom-link-row input, .bloom-attr-row input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--bloom-text); font-size: 12px; font-family: 'Nunito', sans-serif;
}
.bloom-attr-row input:first-child { flex: 0 0 35%; border-right: 1px solid var(--bloom-border); padding-right: 8px; }
.bloom-link-remove { background: none; border: none; color: var(--bloom-muted); cursor: pointer; font-size: 13px; flex-shrink: 0; padding: 0; }
.bloom-link-remove:hover { color: #ff6b6b; }
.bloom-add-link-btn {
  align-self: flex-start; background: none; border: 1px dashed var(--bloom-border);
  color: var(--bloom-pink); border-radius: 10px; padding: 8px 14px;
  font-size: 10px; font-weight: 800; letter-spacing: 1px; cursor: pointer;
  text-transform: uppercase; font-family: 'Nunito', sans-serif; transition: all .15s;
}
.bloom-add-link-btn:hover { border-color: var(--bloom-pink); background: rgba(255,127,194,.06); }
.tp-empty-hint { font-size: 9px; color: var(--bloom-muted); letter-spacing: .5px; padding: 4px 2px; }

/* advanced / publish */
.bloom-advanced { border: 1px dashed var(--bloom-border); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.bloom-advanced summary { cursor: pointer; font-size: 9px; letter-spacing: 1.5px; color: var(--bloom-muted); text-transform: uppercase; font-weight: 800; }

/* footer */
.bloom-footer { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--bloom-border); padding-top: 14px; }
.bloom-status { flex: 1; font-size: 11px; color: var(--bloom-green); display: flex; align-items: center; gap: 6px; min-width: 140px; min-height: 14px; transition: color .2s; }
.bloom-status.pending { color: var(--bloom-purple); }
.bloom-status.err { color: #ff6b6b; }
.bloom-status.dirty { color: var(--bloom-muted); }
.tp-explorer-btn {
  background: rgba(0,0,0,.25); border: 1px solid var(--bloom-border); color: var(--bloom-text);
  border-radius: 14px; padding: 12px 22px; font-size: 11px; font-weight: 800;
  letter-spacing: 1.5px; cursor: pointer; text-decoration: none;
  display: flex; align-items: center; gap: 8px; text-transform: uppercase;
  transition: border-color .15s;
}
.tp-explorer-btn:hover { border-color: var(--bloom-pink); }
.bloom-btn-cultivate {
  background: linear-gradient(135deg, var(--bloom-pink), var(--bloom-purple));
  border: none; color: #1a0a14; border-radius: 14px; padding: 14px 28px;
  cursor: pointer; box-shadow: 0 4px 14px var(--bloom-pink-glow);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .15s, box-shadow .15s;
  font-family: 'Nunito', sans-serif;
  font-size: 15px; font-weight: 800; letter-spacing: 2px;
  white-space: nowrap; line-height: 1; text-align: center;
}
.bloom-btn-cultivate:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 30px var(--bloom-pink-glow); }
.bloom-btn-cultivate:disabled { opacity: .6; cursor: not-allowed; }
.bloom-btn-cultivate .main { font-size: 15px; font-weight: 800; letter-spacing: 2px; display: inline-flex; align-items: center; justify-content: center; width: 100%; gap: 6px; line-height: 1; }
.bloom-btn-cultivate .sub { font-size: 9px; opacity: .75; font-weight: 700; margin-top: 2px; }

@media (max-width: 760px) {
  .bloom-preview-col { flex: 1 1 100%; }
  .bloom-tier-preview { flex: 1 1 100%; }
}

#role-info-card {
  background: #0d0d12;
  border: 1.5px solid transparent;
  border-radius: 18px;
  background-clip: padding-box;
  box-shadow: 0 0 0 1.5px rgba(255,160,80,.22), 0 24px 60px rgba(0,0,0,.7);
  padding: 28px 28px 22px;
  width: min(380px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: fadeUp .22s ease both;
  position: relative;
}
#role-info-card .ri-close {
  position: absolute;
  top: 14px; right: 16px;
  background: none; border: none;
  color: var(--muted); font-size: 18px;
  cursor: pointer; line-height: 1;
  transition: color .15s;
}
#role-info-card .ri-close:hover { color: var(--text); }
.ri-header {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ri-img-wrap {
  width: 90px; height: 90px; flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255,160,80,.3);
  background: var(--surface2);
}
.ri-img-wrap img { width: 100%; height: 100%; object-fit: contain; }
.ri-title-wrap { display: flex; flex-direction: column; gap: 3px; }
.ri-role-label {
  font-family: 'Nunito', sans-serif;
  font-size: 9px; letter-spacing: 2px;
  color: var(--accent3); text-transform: uppercase;
}
.ri-role-name {
  font-family: 'Nunito', sans-serif;
  font-size: 25px; font-weight: 1000;
  color: var(--text); letter-spacing: .5px;
}
.ri-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(255,160,80,.25), transparent);
  margin: 0 -2px;
}
.ri-desc {
  font-family: 'Nunito', sans-serif;
  font-size: 16px; color: var(--muted);
  line-height: 1.65; letter-spacing: .2px;
}
.ri-perms { display: flex; flex-direction: column; gap: 9px; }
.ri-perm-row {
  display: flex; align-items: flex-start; gap: 10px;
  font-family: 'Nunito', sans-serif;
  font-size: 15.5px; color: var(--text);
  line-height: 1.5; letter-spacing: .2px;
}
.ri-perm-icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: rgba(255,160,80,.1);
  border: 1px solid rgba(255,160,80,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
}
.ca-role-header .ca-role-icon { font-size: 14px; flex-shrink: 0; }
.ca-role-header .ca-role-name {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
}
#rb-COFOUNDER .ca-role-name { color: #f9a8d4; } /* pale pink   */
#rb-ADMIN     .ca-role-name { color: #7dd3fc; } /* bleu ciel   */
#rb-MODERATOR .ca-role-name { color: #c084fc; } /* violet      */
#rb-MINTER    .ca-role-name { color: #86efac; } /* vert        */
.ca-role-promote-wrap {
  padding: 6px 0;
  border-bottom: none;
  display: flex;
  justify-content: center;
}
.ca-role-promote-wrap .ca-mini-grant {
  width: 100%;
  text-align: center;
  justify-content: center;
}
.ca-role-members { display: flex; flex-direction: column; align-items: center; gap: 0; flex: 1; }
.ca-role-member-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border-bottom: none;
  transition: background .12s;
}
.ca-role-member-row:last-child { border-bottom: none; }
.ca-role-member-row:hover { background: rgba(255,255,255,.03); }
.ca-role-member-pfp {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface3);
  overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  border: 2px solid var(--border2);
}
.ca-role-member-pfp img { width: 100%; height: 100%; object-fit: cover; }
.ca-role-member-name {
  flex: 1;
  font-size: 10px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ca-role-member-addr {
  font-family: 'Nunito', sans-serif;
  font-size: 7.5px;
  color: var(--muted2);
  letter-spacing: .3px;
}
.ca-role-member-empty {
  width: 100%;
  padding: 8px 10px;
  font-family: 'Nunito', sans-serif;
  font-size: 8px;
  color: var(--muted2);
  letter-spacing: 1px;
  text-align: center;
}

/* promote modal search */
.pm-results { display: flex; flex-direction: column; gap: 4px; max-height: 140px; overflow-y: auto; }
.pm-result-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 6px;
  background: var(--surface2); border: 1px solid var(--border);
  cursor: pointer; transition: border-color .12s;
}
.pm-result-row:hover { border-color: rgba(168,85,247,.4); }
.pm-result-pfp { width: 24px; height: 24px; border-radius: 50%; background: var(--surface3); overflow: hidden; flex-shrink: 0; }
.pm-result-pfp img { width: 100%; height: 100%; object-fit: cover; }
.pm-result-name { flex: 1; font-size: 10px; color: var(--text); }
.pm-result-addr { font-family: 'Nunito', sans-serif; font-size: 7.5px; color: var(--muted2); }
.pm-result-row.pm-added { border-color: rgba(34,197,94,.4); opacity: .55; cursor: default; }

/* multi-select chips for promote modal */
.pm-selected-list { display: flex; flex-direction: column; gap: 6px; max-height: 160px; overflow-y: auto; }
.pm-selected-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface2); border: 1px solid rgba(168,85,247,.3);
  border-radius: 8px; padding: 8px 10px;
}
.pm-selected-pfp { width: 28px; height: 28px; border-radius: 50%; background: var(--surface3); overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.pm-selected-pfp img { width: 100%; height: 100%; object-fit: cover; }
.pm-selected-name { font-size: 11px; color: var(--text); font-weight: 600; }
.pm-selected-addr { font-family: 'Nunito', sans-serif; font-size: 7.5px; color: var(--muted2); margin-top: 2px; }
.pm-selected-remove { background: none; border: none; color: var(--muted); font-size: 14px; cursor: pointer; flex-shrink: 0; }
.pm-selected-remove:hover { color: var(--red); }
.pm-selected-count {
  font-family: 'Nunito', sans-serif; font-size: 8px; font-weight: 700; letter-spacing: 1.5px;
  color: #c084fc; background: rgba(168,85,247,.1); border: 1px solid rgba(168,85,247,.3);
  border-radius: 4px; padding: 2px 8px;
}

/* ── MANAGE ROLES BTN ──────────────────────────────────────────── */
.btn-manage{
  font-family:var(--font-mono);font-size:9px;letter-spacing:1.5px;
  color:var(--accent);border:1px solid rgba(232,102,10,.3);
  background:rgba(232,102,10,.07);border-radius:5px;
  padding:5px 10px;cursor:pointer;transition:all .15s;text-transform:uppercase;
}
.btn-manage:hover{background:rgba(232,102,10,.14);border-color:var(--accent);}

/* ── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:rgba(232,102,10,.3);}

/* ── PAGINATION ──────────────────────────────────────────────── */
.btn-pg{
  font-family:var(--font-mono);font-size:10px;letter-spacing:1.5px;
  color:var(--muted) !important;background:var(--surface2) !important;
  border:1px solid var(--border2) !important;border-radius:6px;
  padding:6px 16px;cursor:pointer;transition:all .15s;text-transform:uppercase;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  box-shadow:none;outline:none;
}
.btn-pg:hover:not(:disabled){border-color:var(--accent) !important;color:var(--accent2) !important;}
.btn-pg:disabled{opacity:0.3;cursor:not-allowed;}

.pg-numbers{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:center;width:100%;}
.btn-pg-num{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.5px;
  color:var(--muted) !important;background:var(--surface2) !important;
  border:1px solid var(--border2) !important;border-radius:6px;
  min-width:26px;height:26px;padding:0 6px;cursor:pointer;transition:all .15s;
  display:flex;align-items:center;justify-content:center;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  box-shadow:none;outline:none;text-transform:uppercase;
}
.btn-pg-num:hover:not(:disabled){border-color:var(--accent) !important;color:var(--accent2) !important;}
.btn-pg-num:disabled{opacity:0.3;cursor:not-allowed;}
.btn-pg-num.pg-active{
  color:#fff !important;background:var(--accent2, #ff8c00) !important;border-color:var(--accent2, #ff8c00) !important;
  font-weight:700;cursor:default;
}
.pg-ellipsis{
  font-family:var(--font-mono);font-size:10px;color:var(--muted);
  padding:0 2px;user-select:none;
}

@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.panel{animation:fadeUp .4s ease both;}
.panel:nth-child(1){animation-delay:.05s;}
.panel:nth-child(2){animation-delay:.12s;}
.panel:nth-child(3){animation-delay:.18s;}
/* Disable browser autocomplete dropdowns on all inputs */
input:-webkit-autofill { box-shadow: 0 0 0 1000px var(--surface2) inset !important; -webkit-text-fill-color: var(--text) !important; }

/* ── RESPONSIVE BOTTOM NAV ─────────────────────────────────── */
@media (max-width: 1279px) {
  :root { --bottom-nav-h: 105px; }

  /* Desktop-only REFRESH button (next to SELECT ALL) — mobile has its own
     REFRESH button in #mob-network-refresh below the pagination. */
  .desktop-only-refresh { display: none !important; }

  /* Bring SELECT ALL / REFRESH closer to the pagination row (override the
     desktop 0.5cm bottom margin on .gardeners-footer). */
  .top-row .holders-panel .gardeners-footer { margin-bottom: 0 !important; }

  /* Lock the page scroll: the start of the bottom bar is treated as the end
     of the screen. Each panel scrolls internally instead. */
  html, body {
    height: 100%;
    overflow: hidden;
  }

  /* Bottom nav bar — floating pill, matches soulbloom.html / garden.html */
  #mobile-bottom-nav {
    display: flex;
    position: fixed !important;
    bottom: calc(32px + env(safe-area-inset-bottom, 0px)) !important;
    left: 50% !important;
    right: auto !important;
    top: auto;
    transform: translateX(-50%) !important;
    height: 65px !important;
    width: 100% !important;
    max-width: calc(100% - 24px) !important;
    background:
      linear-gradient(180deg, rgba(18,10,8,0.45) 0%, rgba(6,6,8,0.55) 100%),
      url('background4.webp') center center / cover no-repeat !important;
    border-radius: 18px !important;
    box-shadow:
      0 8px 30px rgba(0,0,0,0.55),
      0 2px 12px rgba(255,77,0,0.15),
      0 0 0 1px rgba(255,140,0,0.18) !important;
    border-top: none !important;
    overflow: hidden !important;
    z-index: 9998;
    align-items: stretch;
  }

  .mob-nav-btn {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 2px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ff8c00;
    transition: color .15s, background .15s;
    border-right: none;
    position: relative;
  }
  .mob-nav-btn:last-child { border-right: none; }

  .mob-nav-btn .mob-icon {
    font-size: 24px;
    line-height: 1;
    transition: transform .2s;
  }
  .mob-nav-btn span.mob-icon {
    width: clamp(38px, 7.8vw, 53px);
    height: clamp(38px, 7.8vw, 53px);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mob-nav-btn img.mob-icon {
    width: clamp(38px, 7.8vw, 53px);
    height: clamp(38px, 7.8vw, 53px);
    object-fit: contain;
  }

  .mob-nav-btn.active,
  .mob-nav-btn:active {
    background: rgba(255,77,0,0.1);
    border-radius: 8px;
  }
  .mob-nav-btn[data-target="panel-identity"].active {
    background: rgba(255,224,64,0.16);
  }
  .mob-nav-btn[data-target="guardian-roles-panel"].active {
    background: rgba(192,132,252,0.16);
  }
  .mob-nav-btn[data-target="holders-panel"].active {
    background: rgba(52,211,153,0.16);
  }

  /* Coloured active indicator line + icon colours per card */
  .mob-nav-btn.active::after {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 2px;
    border-radius: 0 0 2px 2px;
  }
  .mob-nav-btn[data-target="sidebar"].active { color: #ffe080; }
  .mob-nav-btn[data-target="sidebar"].active::after { background: #ff8c00; }
  .mob-nav-btn[data-target="panel-identity"].active {
    color: #ffe040;
    text-shadow: 0 0 10px rgba(255,224,64,0.9), 0 0 20px rgba(255,224,64,0.5);
  }
  .mob-nav-btn[data-target="panel-identity"].active::after {
    background: #ffe040;
    box-shadow: 0 0 8px rgba(255,224,64,0.9);
  }
  .mob-nav-btn[data-target="guardian-roles-panel"].active {
    color: #c084fc;
    text-shadow: 0 0 10px rgba(192,132,252,0.9), 0 0 20px rgba(192,132,252,0.5);
  }
  .mob-nav-btn[data-target="guardian-roles-panel"].active::after {
    background: #c084fc;
    box-shadow: 0 0 8px rgba(192,132,252,0.9);
  }
  .mob-nav-btn[data-target="holders-panel"].active {
    color: #34d399;
    text-shadow: 0 0 10px rgba(52,211,153,0.9), 0 0 20px rgba(52,211,153,0.5);
  }
  .mob-nav-btn[data-target="holders-panel"].active::after {
    background: #34d399;
    box-shadow: 0 0 8px rgba(52,211,153,0.9);
  }
  /* Icon glow matches each tab's theme color when active */
  .mob-nav-btn[data-target="panel-identity"].active img.mob-icon {
    filter: drop-shadow(0 0 8px rgba(255,224,64,0.95)) drop-shadow(0 0 16px rgba(255,224,64,0.6));
  }
  .mob-nav-btn[data-target="guardian-roles-panel"].active img.mob-icon {
    filter: drop-shadow(0 0 8px rgba(192,132,252,0.95)) drop-shadow(0 0 16px rgba(192,132,252,0.6));
  }
  .mob-nav-btn[data-target="holders-panel"].active img.mob-icon {
    filter: drop-shadow(0 0 8px rgba(52,211,153,0.95)) drop-shadow(0 0 16px rgba(52,211,153,0.6));
  }

  /* Sidebar: hidden by default on mobile, becomes slide-in overlay */
  .sidebar {
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 400;
    width: min(260px, 80vw) !important;
    min-width: 0 !important;
    bottom: var(--bottom-nav-h);
    overflow-y: auto !important;
  }
  .sidebar.mob-open {
    transform: translateX(0);
  }

  /* Sidebar overlay backdrop */
  #mob-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    bottom: var(--bottom-nav-h);
    background: rgba(0,0,0,.55);
    z-index: 399;
  }
  #mob-sidebar-backdrop.visible { display: block; }

  /* Main: no left margin, full width, pad bottom for nav.
     padding-top must stay = nav-h: the panel max-height calc below already
     subtracts nav-h assuming content starts under the fixed navbar — removing
     this padding hides the panel-header/title under the navbar and lets the
     page grow taller than the viewport (content leaking below the bottom bar). */
  .main {
    margin-left: 0 !important;
    padding-bottom: var(--bottom-nav-h);
    padding-top: var(--nav-h) !important;
  }

  /* Panels wrapper: stack vertically */
  .panels-wrapper {
    padding: 6px 6px 0 6px;
  }
  .top-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  .top-row-col1 {
    display: contents !important;
  }

  /* Each panel: full viewport height minus navbar + bottom nav, show one at a time */
  .top-row .panel-identity,
  .top-row .guardian-roles-panel,
  .top-row .holders-panel {
    display: none;
    width: 100% !important;
    min-height: calc(100dvh - var(--nav-h) - var(--bottom-nav-h) - 12px);
    max-height: calc(100dvh - var(--nav-h) - var(--bottom-nav-h) - 12px);
    overflow-y: auto;
  }
  .top-row .panel-identity.mob-active,
  .top-row .guardian-roles-panel.mob-active,
  .top-row .holders-panel.mob-active {
    display: flex;
    flex-direction: column;
  }

  /* Uncollapse panels on mobile */
  .top-row .panel-identity.mob-active.collapsed > *:not(.panel-header):not(.identity-footer),
  .top-row .guardian-roles-panel.mob-active.collapsed > *:not(.panel-header),
  .top-row .holders-panel.mob-active.collapsed > *:not(.panel-header) {
    display: block !important;
  }
  /* CULTIVATE BLOOM footer must stay a flex row (space-between) even when
     the card is "collapsed" — the rule above forces block on every other
     direct child, which was overriding the flex alignment below and is
     why the button never landed on the right. */
  .top-row .panel-identity.mob-active.collapsed > .identity-footer {
    display: flex !important;
  }

  /* ── Card titles: force visible (no longer hidden under the navbar).
     Keep the desktop grid (1fr auto 1fr) so the title+icon stay centered
     instead of collapsing to a left-aligned flex row. ── */
  .top-row .panel-header {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
  }
  .top-row .panel-title {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .top-row .panel-title-text {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* ── CARD IDENTITY: centered layout ── */
  .top-row .panel-identity .identity-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px !important;
  }
  .top-row .panel-identity .identity-img-wrap {
    width: clamp(166px, 53vw, 248px) !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin: 0 auto !important;
  }
  .top-row .panel-identity .identity-img {
    width: clamp(166px, 53vw, 248px) !important;
    height: clamp(166px, 53vw, 248px) !important;
  }
  .top-row .panel-identity .identity-fields {
    width: 100% !important;
    min-width: 0 !important;
  }
  /* Shrink VIEW button height so it doesn't overlap the card border */
  .top-row .panel-identity .panel-header .btn-view-garden {
    padding: 5px 10px !important;
    font-size: 8px !important;
  }

  /* Bigger Bloom Bio field */
  .top-row .panel-identity .field-textarea {
    height: 120px !important;
  }

  /* Remove the collapse/accordion affordance */
  .top-row .panel-identity .panel-collapse-arrow,
  .top-row .guardian-roles-panel .panel-collapse-arrow,
  .top-row .holders-panel .panel-collapse-arrow {
    display: none !important;
  }
  .top-row .panel-identity .panel-title-text,
  .top-row .guardian-roles-panel .panel-title-text,
  .top-row .holders-panel .panel-title-text {
    cursor: default !important;
    pointer-events: none !important;
  }

  .top-row .panel-identity #identity-contract-addr {
    display: none !important;
  }

  /* Cancel left, Cultivate Bloom pinned hard to the right.
     space-between with exactly two flex children guarantees the first
     sits at the start and the last at the very end of the row. */
  .top-row .panel-identity .identity-footer {
    display: flex !important;
    flex-direction: row !important;
    align-self: stretch !important;
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 12px !important;
    gap: 8px !important;
  }
  .top-row .panel-identity .identity-footer .btn-view-garden {
    flex: 0 0 auto !important;
    margin-right: auto !important;
  }
  .top-row .panel-identity .identity-footer .btn-save {
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }

  /* ── CARD GOVERNANCE ── */
  .top-row .guardian-roles-panel .ca-roles-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .top-row .guardian-roles-panel .ca-role-block {
    display: grid !important;
    grid-template-columns: calc((68px + 2cm) * 0.9025) 1fr !important;
    grid-template-areas:
      "header  members"
      "promote members" !important;
    column-gap: 8px !important;
    row-gap: 4px !important;
    align-items: start !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(255,209,230,.15) !important;
  }
  .top-row .guardian-roles-panel .ca-role-block:last-child {
    border-bottom: none !important;
  }
  .top-row .guardian-roles-panel .ca-role-block:not(:last-child)::after {
    content: none !important;
    display: none !important;
  }
  .top-row .guardian-roles-panel .ca-role-header {
    grid-area: header !important;
    flex-direction: column !important;
    padding: 4px 0 !important;
    gap: 4px !important;
  }
  /* -5% on previous size, height especially */
  .top-row .guardian-roles-panel .ca-role-img {
    width: calc((68px + 2cm) * 0.9025) !important;
    height: calc((68px + 2cm) * 0.857) !important;
    margin-inline: 0 !important;
    object-fit: contain !important;
  }
  .top-row .guardian-roles-panel .ca-role-header .ca-role-name {
    font-size: 8px !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
  }
  .top-row .guardian-roles-panel .ca-role-promote-wrap {
    grid-area: promote !important;
    padding: 0 !important;
  }
  .top-row .guardian-roles-panel .ca-role-promote-wrap .ca-mini-grant {
    font-size: 8px !important;
    padding: 4px 2px !important;
  }
  .top-row .guardian-roles-panel .ca-role-members {
    grid-area: members !important;
    align-items: stretch !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  /* Let UP name breathe — only truncate very late */
  .top-row .guardian-roles-panel .ca-role-members .ca-role-member-name {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 160px !important;
  }
  /* Lock + Mint tab: -1px on all text */
  .top-row .guardian-roles-panel #ca-pane-lock .ca-label {
    font-size: calc(11px - 1px) !important;
  }
  .top-row .guardian-roles-panel #ca-pane-lock .ca-input {
    font-size: calc(12px - 1px) !important;
  }
  .top-row .guardian-roles-panel #ca-pane-lock .ca-mini-btn {
    font-size: calc(10px - 1px) !important;
  }
  .top-row .guardian-roles-panel #ca-pane-lock .ca-lock-lbl {
    font-size: calc(11px - 1px) !important;
  }
  .top-row .guardian-roles-panel #ca-pane-lock .ca-lock-val {
    font-size: calc(12px - 1px) !important;
  }
  .top-row .guardian-roles-panel #ca-pane-mint .ca-label {
    font-size: calc(8px - 1px) !important;
  }
  .top-row .guardian-roles-panel #ca-pane-mint .ca-input {
    font-size: calc(11px - 1px) !important;
  }
  .top-row .guardian-roles-panel #ca-pane-mint .ca-mini-btn {
    font-size: calc(8px - 1px) !important;
  }
  .top-row .guardian-roles-panel #ca-pane-mint .ca-action-btn {
    font-size: calc(10px - 1px) !important;
  }

  /* ── CARD NETWORK ── */
  /* Search = emoji loupe only */
  .top-row .holders-panel .search-input {
    width: 32px !important;
    padding: 7px 4px 7px 26px !important;
    color: transparent !important;
    caret-color: var(--text) !important;
  }
  .top-row .holders-panel .search-input::placeholder {
    color: transparent !important;
  }
  .top-row .holders-panel .search-input:focus {
    width: 120px !important;
    color: var(--text) !important;
    caret-color: var(--text) !important;
  }
  .top-row .holders-panel .search-input:focus::placeholder {
    color: var(--muted2) !important;
  }
  /* Hide progress bar */
  .top-row .holders-panel .score-bar-wrap {
    display: none !important;
  }
  /* Tighten PFP ↔ name gap */
  .top-row .holders-panel .gardener-cell {
    gap: 5px !important;
  }
  /* Bigger table content */
  .top-row .holders-panel .gardeners-table th,
  .top-row .holders-panel .gardeners-table td {
    font-size: calc(clamp(9px, 2.2vw, 12px) + 2px) !important;
    padding: clamp(10px, 2.4vw, 16px) clamp(6px, 1.2vw, 12px) !important;
  }
  /* Remove column separator lines (Gardener | ID | Score | Actions) */
  .top-row .holders-panel .gardeners-table,
  .top-row .holders-panel .gardeners-table th,
  .top-row .holders-panel .gardeners-table td,
  .top-row .holders-panel .gardeners-table thead tr {
    border: none !important;
    border-collapse: collapse !important;
    box-shadow: none !important;
    outline: none !important;
  }
  /* The seams that appear between columns specifically when a UP background
     image is set on the row come from backdrop-filter creating a separate
     compositing seam at each cell boundary once there's something behind it
     to blur. Disabling it on mobile removes the seam without touching the
     row background look. */
  .top-row .holders-panel .gardeners-table tbody tr {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    background-clip: padding-box !important;
  }
  .top-row .holders-panel .gardeners-table tbody td {
    border: none !important;
  }
  /* Rows WITHOUT a UP background keep transparent cells (original behaviour). */
  .top-row .holders-panel .gardeners-table tbody tr:not(.has-bg-layer) td {
    background: transparent !important;
  }
  /* Paint the UP background image (see _enrichHolderRow / _paintRowBgSlices).
     IMPORTANT: never give a <tr> a generated ::before/::after box (even
     display:none-adjacent, zero-size, unpositioned) on mobile — Chrome's
     table auto-layout treats any generated content on a table-row as a
     signal to recompute the row's intrinsic (max-content, unwrapped) width
     instead of its constrained width. That inflated the row ~50px past the
     panel, which silently clipped/cut the rightmost (ACTIONS) column and
     made every column look shifted one slot to the right. Fix: paint the
     background as a real `background-image` directly on each <td>, sliced
     with a shared background-size + per-cell negative background-position
     so it reads as one continuous image — backgrounds never affect table
     column sizing, so this can't trigger the same bug. */
  .top-row .holders-panel .gardeners-table tbody tr.has-bg-layer td {
    background-repeat: no-repeat !important;
  }
  /* Shrink GARDENER / ID / SCORE / ACTIONS header labels by 1px (net, mobile only) */
  .top-row .holders-panel .gardeners-table th {
    font-size: calc(clamp(7px, 0.5vw, 9px) - 1px) !important;
  }
  /* +2px to all Bloom Network content (mobile only) + PFP enlarged to match */
  .top-row .holders-panel .gardener-name {
    font-size: calc(clamp(10px, 0.75vw, 14px) + 2px) !important;
  }
  .top-row .holders-panel .gardener-addr {
    font-size: calc(clamp(8px, 0.55vw, 10px) + 2px) !important;
  }
  .top-row .holders-panel .gardener-avatar {
    width: calc(clamp(32px, 2.4vw, 52px) + 2px) !important;
    height: calc(clamp(32px, 2.4vw, 52px) + 2px) !important;
    font-size: calc(clamp(14px, 1.1vw, 22px) + 2px) !important;
  }
  /* Mobile-only: "TOKEN ID" → "ID", "BLOOM SCORE" → "SCORE" (desktop keeps full label) */
  .top-row .holders-panel .th-label-full {
    display: none !important;
  }
  .top-row .holders-panel .th-label-short {
    display: inline !important;
  }

  /* Move Refresh below pagination */
  #bloom-network-refresh-btn {
    display: none !important;
  }
  #mob-network-refresh {
    display: flex !important;
  }

  /* Small left gap */
  .top-row .holders-panel .gardeners-table {
    margin-left: 0.1cm !important;
    width: calc(100% - 0.1cm) !important;
  }

  /* ── TABLE OVERFLOW FIX (S8+ 360px and narrower) ── */
  /* Shrink action buttons so 3×btn + gaps fits narrow columns */
  .top-row .holders-panel .action-btn {
    width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
    border-radius: 5px !important;
  }
  /* Tighten cell padding further on very narrow screens */
  .top-row .holders-panel .gardeners-table th,
  .top-row .holders-panel .gardeners-table td {
    padding: 8px 4px !important;
  }
  /* Collapse lsp7 column width (was hardcoded 170px inline — override here) */
  #lsp7-th {
    width: 80px !important;
    min-width: 0 !important;
  }
  /* Hide select-all button from ACTIONS header on mobile — moved to footer row */
  .top-row .holders-panel #select-all-btn {
    display: none !important;
  }

  /* ── BOTTOM BAR ── */
}
@media (min-width: 1280px) {
  #mobile-bottom-nav { display: none !important; }
  #mob-sidebar-backdrop { display: none !important; }
  .top-row .holders-panel .search-input { width: 108px !important; }
}

/* ── UP Identity dropdown (soulbloom style) ── */
#bloom-score-dropdown {
  position: fixed;
  top: 45px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  z-index: 9998;
  width: 240px;
  background: rgba(8,8,12,0.97);
  border: 1.5px solid rgba(255,77,0,0.5);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 24px rgba(255,77,0,0.12);
  padding: 16px 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#bloom-score-dropdown.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
#bsd-pfp {
  width: 48px; height: 48px;
  border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(255,77,0,0.6);
  margin-bottom: 4px;
}
#bsd-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px; font-weight: 700; color: #e8e8f0;
  letter-spacing: 1px; text-align: center;
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#bsd-addr {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: #555; letter-spacing: 1px; margin-top: -2px;
}
#bsd-score-wrap {
  display: flex; flex-direction: column; align-items: center;
  margin: 6px 0 2px; gap: 2px;
}
#bsd-score-title {
  font-family: 'Orbitron', sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: 3px; color: #ff8c00; text-transform: uppercase; opacity: 0.8;
}
#bsd-score {
  font-family: 'Orbitron', sans-serif; font-size: 28px;
  font-weight: 900; line-height: 1; letter-spacing: 2px;
}
#bsd-label {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; margin-top: 2px;
}
.bsd-divider {
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,77,0,0.3), transparent);
  margin: 6px 0 4px;
}
#bsd-bloom-link {
  font-family: 'Orbitron', sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: 2px; color: #ff8c00; text-decoration: none;
  text-transform: uppercase; opacity: 0.6; transition: opacity 0.15s;
}
#bsd-bloom-link:hover { opacity: 1; }