/* =========================================================
   DreamBoard — App Styles (clean + masonry media library)
   ========================================================= */

/* ---------- Theme tokens ---------- */
:root{
  --bg:#0d131e;--surface:#111722;--surface-2:#0f1420;
  --text:#e6edf3;--muted:#9aa5b1;--border:#21262d;
  --primary:#0a5aee;--primary-contrast:#ffffff;
  --ring:0 0 0 3px rgba(47,107,255,.35);
  --radius:16px;--card-shadow:0 8px 24px rgba(0,0,0,.35);
}


/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%; overflow-x: hidden;}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:16px/1.5 system-ui,Inter,Segoe UI,Roboto,Arial
}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:24px}
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--card-shadow)
}
.h1{font-size:44px;font-weight:800;letter-spacing:.2px;text-align:center}
.sub{color:var(--muted);font-size:18px;margin-top:8px;text-align:center}
.btn{
  display:inline-flex;gap:10px;align-items:center;padding:12px 16px;
  border-radius:12px;border:1px solid transparent;cursor:pointer;font-weight:600
}
.btn-primary{background:var(--primary);color:var(--primary-contrast)}
.btn-primary:hover{filter:brightness(1.05)}
.btn:focus{outline:var(--ring)}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--text)}

/* ---------- Home header + hero ---------- */
.home-wrap{position:relative}
.home-header{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;padding:.75rem 1rem;margin:0 auto;max-width:960px
}
.home-brand{display:flex;align-items:center;gap:10px}
.brand-title{font-weight:700}
.logo-mark{
  width:26px;height:26px;border:2px solid #fff;border-radius:6px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px
}
.logo-mark span{background:#fff;border-radius:50%}
.home-actions{display:flex;gap:10px;flex-wrap:wrap}
.hero{padding:40px}
.hero-offset{margin-top:56px}
.cta{margin-top:24px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.home-tagline{margin-top:28px;color:#cfd6df;text-align:center}

/* ---------- Budget dropdown (kept) ---------- */
.select-container{position:relative}
.select-container .selected-currency{
  display:inline-block;background:var(--panel-2,#2a2f36);
  border:1px solid var(--panel-border,rgba(255,255,255,.08));
  padding:8px 10px;border-radius:8px;cursor:pointer;user-select:none
}
.select-container #budgetCurrencySearch{
  width:100%;margin:6px 0;border-radius:8px;
  border:1px solid var(--panel-border,rgba(255,255,255,.08));
  background:var(--panel-2,#2a2f36);color:inherit;padding:8px 10px;outline:none
}
.dropdown-list{
  position:absolute;left:0;right:0;top:100%;z-index:1000;background:var(--panel-2,#2a2f36);
  border:1px solid var(--panel-border,rgba(255,255,255,.08));border-radius:10px;
  max-height:260px;overflow:auto;box-shadow:0 10px 24px rgba(0,0,0,.35);margin-top:6px
}
.dropdown-item{padding:8px 12px;cursor:pointer}
.dropdown-item:hover{background:var(--panel-3,#353b43)}
.dropdown-item.muted{opacity:.6;cursor:default}

/* ---------- Docs / tables (kept) ---------- */
.docs-card{background:#121212;border:1px solid #2a2a2a;border-radius:16px;overflow:hidden}
.docs-head{background:#181818;padding:12px 16px;font-weight:600;letter-spacing:.3px;border-bottom:1px solid #242424}
#docsTable{width:100%;border-collapse:separate;border-spacing:0}
#docsTable thead th{
  text-align:left;font-weight:600;font-size:.92rem;color:#bfbfbf;padding:10px 14px;
  background:#181818;position:sticky;top:0;z-index:1;border-bottom:1px solid #242424
}
#docsTable tbody td{padding:12px 14px;vertical-align:middle;border-bottom:1px solid #1e1e1e}
#docsTable tbody tr:nth-child(odd){background:#141414}
#docsTable tbody tr:nth-child(even){background:#171717}
#docsTable tbody tr:hover{background:#1f1f1f}
.doc-name{display:flex;gap:10px;align-items:center;font-weight:600;color:#eaeaea}
.doc-meta{font-size:.86rem;color:#9a9a9a}
.status-pill{display:inline-block;padding:3px 8px;border-radius:999px;font-size:.78rem;border:1px solid #2b2b2b;color:#cfcfcf;background:#1b1b1b}
.status-pill.is-final{border-color:#2f6;color:#cfc;background:#163}
.action-link{color:#7ab7ff;text-decoration:none}
.action-link:hover{text-decoration:underline}
.docs-topbar{display:flex;align-items:center;gap:12px;padding:12px 16px 0}
.docs-topbar .hint{font-size:.9rem;color:#8a8a8a}

/* =========================================================
   MEDIA LIBRARY  (Mood boards) — MASONRY GRID
   ========================================================= */

/* Full‑bleed container on edit page */
.media-section,#libraryGrid{max-width: 100%;box-sizing: border-box;padding: 0 8px; }

/* Use multi‑column masonry; cards flow top‑to‑bottom per column */
#libraryGrid.masonry-cols{column-gap:16px}

@media (max-width:599px){ #libraryGrid.masonry-cols{column-count:1} }
/* Force 2-column layout on small screens */
@media (max-width: 640px) {
  #libraryGrid.masonry-cols {
    column-count: 2 !important;
    column-gap: 12px;
  }
}
@media (min-width:600px){ #libraryGrid.masonry-cols{column-count:2} }
@media (min-width:900px){ #libraryGrid.masonry-cols{column-count:3} }
@media (min-width:1200px){ #libraryGrid.masonry-cols{column-count:4} }
@media (min-width:1600px){ #libraryGrid.masonry-cols{column-count:5} }

/* === Fix: full-bleed library grid + 2 columns on mobile === */

/* Full-bleed: let the grid span the viewport even if a parent has padding */
#libraryGrid {
  max-width: 100vw;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-inline: 8px;            /* small gutters so nothing kisses the edge */
  box-sizing: border-box;
}

/* Kill any horizontal scroll that might still appear */
html, body { overflow-x: hidden; }

/* Mobile: always 2 columns (tight gap) */
@media (max-width: 640px) {
  #libraryGrid.masonry-cols {
    column-count: 2 !important;
    column-gap: 12px;
  }
}

/* (Optional) Very small phones: still 2 cols but with smaller gutters */
@media (max-width: 380px) {
  #libraryGrid { padding-inline: 6px; }
  #libraryGrid.masonry-cols { column-gap: 10px; }
}


/* Card */
.media-card{
  display:inline-block;           /* needed for masonry columns */
  width:100%;
  margin:0 0 16px;
  background:#151922;border:1px solid #222938;border-radius:12px;
  overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.25);
  position:relative;break-inside:avoid
}

/* Thumbnail area — **natural height** for images (Pinterest look) */
.media-card .thumb{width:100%;background:#1f2430;position:relative}
.media-card .thumb img{
  width:100%;
  height:auto !important;         /* never force fixed heights on images */
  display:block;object-fit:cover
}

/* For files without a real preview (pdf/doc/etc.) show a soft placeholder */
.media-card .thumb-fallback{
  width:100%;padding:28% 0;display:flex;align-items:center;justify-content:center;
  color:#bdb6c9;background:#1f2430;font-size:12px
}

/* YouTube/Video embeds — keep a tidy 16:9 box inside the card */
.media-card .thumb.embed{aspect-ratio:16/9}
.media-card .thumb iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0
}

/* Optional tiny play badge for videos */
.media-card .play-badge{
  position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.55);
  color:#fff;font-size:12px;padding:2px 6px;border-radius:6px
}

/* Meta row */
.media-card .meta{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:10px 12px
}
.media-card .name{
  flex:1;font-size:13px;color:#c9d2ea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.media-card .badge{
  font-size:11px;color:#aab3c8;background:#232b3a;border:1px solid #303a4e;
  padding:2px 6px;border-radius:8px
}

/* Kebab menu */
.media-card .menu-toggle{
  position:absolute;right:6px;top:6px;background:transparent;border:0;
  color:#9db0d7;font-size:18px;cursor:pointer;z-index:10;padding:5px;background-color: black;
}
/* Kebab menu: allow tall lists with scroll and safe viewport padding */
.media-card .card-menu {
  position: fixed;            /* we’ll set top/left via JS on open */
  inset: auto auto auto auto; /* reset */
  z-index: 9999;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  will-change: transform;
}
/* subtle shadow & rounding already set — keep it */
.media-card .card-menu.drop-up {
  /* no special styles needed; class is just a flag if you want an arrow later */
}
.media-card .card-menu ul{list-style:none;margin:0;padding:6px}
.media-card .card-menu li{padding:6px 10px;cursor:pointer;color:#c9d2ea}
.media-card .card-menu li:hover{background:#1b2231}

/* Utility: when you need a strict 4:3 tile somewhere else */
.tile-4x3{aspect-ratio:4/3;overflow:hidden}
.tile-4x3 > img{width:100%;height:100%;object-fit:cover}

/* Global queue pill */
.upl-pill{
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  background:#0f1522; border:1px solid #283149; color:#cfe0ff;
  padding:8px 12px; border-radius:999px; display:flex; gap:10px; align-items:center;
  box-shadow:0 6px 18px rgba(0,0,0,.35); z-index: 9999;
}
.upl-pill .upl-cancel{ background:transparent;border:0;color:#9db0d7;cursor:pointer;font-size:14px }

/* Uploading state overlay on a card */
.media-card.uploading{ position:relative; opacity:.92 }
.media-card.uploading .upl-overlay{
  position:absolute; inset:0; background:rgba(0,0,0,.45);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; color:#e9f0ff; font-weight:600;
}
.media-card.uploading .upl-bar{
  width:82%; height:6px; background:rgba(255,255,255,.15);
  border-radius:999px; overflow:hidden;
}
.media-card.uploading .upl-bar > i{
  display:block; height:100%; width:0%; background:linear-gradient(90deg,#60a5fa,#34d399);
}

/* Error state */
.media-card.upl-error .upl-overlay{ background:rgba(145,20,20,.65) }
.media-card.upl-error .upl-msg{ color:#ffd7d7 }
.media-card.upl-error .upl-actions button{
  background:#fff; color:#111; border:0; border-radius:6px; padding:4px 8px; cursor:pointer;
}

/* Small spinner (while size/virus checks run server-side) */
.upl-spinner{ width:18px; height:18px; border-radius:50%; border:3px solid rgba(255,255,255,.4); border-top-color:#fff; animation:spin .8s linear infinite }

.tags-row{display:flex;gap:6px;flex-wrap:wrap;margin:6px 12px 2px}
.groups-row{margin:0 12px 10px;color:#aeb9d6;font-size:11px}
.chip{font-size:11px;padding:2px 6px;border-radius:999px;background:#283146;color:#cddaef;border:1px solid #33405b}
.chip.more{opacity:.75}
.grp{background:#232b3a;border:1px solid #303a4e;border-radius:6px;padding:1px 6px}

/* --- Media Library overlay --- */
.ml-overlay[hidden] { display:none; }
.ml-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.55);
  display: grid; place-items: center;
}
.ml-sheet {
  background: #121826;
  border: 1px solid #263149;
  border-radius: 14px;
  width: min(540px, 92vw);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  color: #e8ecf6;
}
.ml-head { padding: 14px 16px; border-bottom:1px solid #263149; display:flex; justify-content:space-between; gap:12px; align-items:center }
.ml-title { font-weight:700; font-size:16px }
.ml-close { background:transparent; border:0; color:#9db0d7; font-size:20px; cursor:pointer }
.ml-body { padding: 14px 16px; display:grid; gap:12px; }
.ml-actions { padding: 12px 16px; border-top:1px solid #263149; display:flex; gap:10px; justify-content:flex-end }
.ml-btn { padding:10px 14px; border-radius:10px; border:1px solid #2b3550; background:#1a2236; color:#e8ecf6; cursor:pointer }
.ml-btn.primary { background:#0a5aee; border-color:#0a5aee; color:#fff }
.ml-input, .ml-select {
  width:100%; padding:10px 12px; border-radius:10px;
  background:#0f1421; color:#e8ecf6; border:1px solid #263149; outline:none;
}
.ml-hint { color:#9db0d7; font-size:12px }

.ml-chips { display:flex; gap:8px; flex-wrap:wrap }
.ml-chip { background:#1b2234; border:1px solid #2b3550; color:#cfe0ff; padding:6px 10px; border-radius:999px; display:inline-flex; gap:8px; align-items:center }
.ml-chip button { background:transparent; border:0; color:#9db0d7; cursor:pointer; font-size:14px; line-height:1 }



/* Keep the menu button on top of the image */
.media-card { position: relative; }
.media-card .thumb { position: relative; }
.media-card .thumb img { display:block; width:100%; height:auto; pointer-events: none; }

/* Kebab button */
.media-card .menu-toggle{
  position:absolute; right:8px; top:8px;
  z-index: 20;              /* above image */
  background: rgba(0,0,0,.45);
  color:#fff; border:0; border-radius:8px;
  width:28px; height:28px; line-height:28px;
  display:grid; place-items:center; cursor:pointer;
}

/* The popup menu */
.media-card .card-menu{
  position:absolute; right:8px; top:40px;
  min-width: 160px;
  background:#0e1320; border:1px solid #263149;
  border-radius:10px; box-shadow:0 10px 24px rgba(0,0,0,.35);
  z-index: 30; display:none;
}
.media-card .card-menu.open{ display:block; }
.media-card .card-menu ul{ list-style:none; margin:0; padding:6px; }
.media-card .card-menu li{ padding:8px 10px; cursor:pointer; color:#c9d2ea; border-radius:6px; }
.media-card .card-menu li:hover{ background:#1b2231; }


@keyframes spin { to { transform: rotate(360deg) } }


/* ---------- Mobile tweaks ---------- */
@media (max-width:640px){
  .brand-title{display:none}
  .logo-mark{width:46px;height:46px}
  .container{padding:0}
  .home-header{margin-top:12px}
  .h1{font-size:32px}
  .hero{padding:24px}
  .hero-offset{margin-top:32px}
  .home-actions .btn{width:auto}
  .cta .btn{width:100%;justify-content:center}
}

.media-card.uploading .thumb {
  position: relative;
  display: grid;
  place-items: center;
  background: #f5f5f5;
  aspect-ratio: 16 / 9;
  border-radius: 10px 10px 0 0;
}
.media-card.uploading .thumb .thumb-fallback {
  opacity: .8;
  font-size: 14px;
}
.media-card.uploading .progress {
  position: absolute;
  left: 8px; right: 8px; bottom: 8px;
  height: 6px; border-radius: 999px;
  background: #e5e7eb; overflow: hidden;
}
.media-card.uploading .progress .bar {
  height: 100%;
  width: 0%;
  background: #4f46e5; /* your accent color */
  transition: width .15s linear;
}

.media-card.uploading .thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #2a2f3a;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}
.media-card.uploading .thumb img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.95);
}
.media-card.uploading .overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.35);
}
.media-card.uploading .progress {
  width: 70%; height: 8px; border-radius: 999px;
  background: rgba(255,255,255,0.35);
  overflow: hidden;
}
.media-card.uploading .progress .bar {
  height: 100%; width: 0%;
  background: #8b5cf6;            /* accent */
  transition: width .12s linear;
}
.media-card.uploading.done .overlay { background: rgba(0,0,0,0.25); }

/* --- Consistent button style across library bar --- */
.library-bar,
.library-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;        /* still wraps on small screens */
  margin: 9px 0 10px 0;
}

.library-bar button,
.library-actions button {
  appearance: none;
  border: 1px solid var(--ui-border, #3b3f4c);
  background: var(--ui-bg, #1e2230);
  color: var(--ui-fg, #f1f5f9);
  padding: 6px 14px;
  border-radius: 6px;
  font: 500 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

.library-bar button:hover,
.library-actions button:hover {
  background: var(--ui-accent-bg, #374151);
  border-color: var(--ui-accent, #6366f1);
}

.library-bar button.active,
.library-actions button.active {
  background: var(--primary);
  border-color: var(--ui-accent, #6366f1);
  color: #fff;
}

/* Ensure cards don't clip their menus */
.media-card { position: relative; z-index: 0; overflow: visible; }

/* When a menu is open, float this card above its neighbors */
.media-card.menu-open { z-index: 10000; }

/* Menu should sit above anything inside the card */
.media-card .card-menu {
  position: absolute;          /* keep using absolute to the card */
  top: 8px;                    /* adjust as you like */
  right: 8px;
  z-index: 10001;
}

/* Just in case a parent created a clipping context */
.masonry-cols,
#libraryGrid,
#mediaGrid {
  overflow: visible;
  position: relative; /* harmless, but gives a stacking context baseline */
}

/* Toolbar container */
.filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px 0;
}

/* Base pill styles */
.pill {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  border-radius: 999px;
  background: #1a202b;
  color: #e6e8eb;
  border: 1px solid rgba(255,255,255,0.08);
  padding: 0 14px;
}
.pill:hover {
  border-color: rgba(255,255,255,0.14);
}
.pill:focus-within {
  box-shadow: 0 0 0 3px rgba(10,90,238,0.35);
}

/* Inputs and selects inside pills */
.pill input,
.pill select {
  background: #1a202b;
  border: none;
  color: inherit;
  font: inherit;
  width: auto;
  flex: 1;
  padding: 4px;
  outline: none;
  margin: 0px 0px 0px 11px;
}
.pill select {
  appearance: none;
  padding-right: 26px; /* space for chevron */
}

/* Custom chevron */
.pill::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 12px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #9aa4b2;
  border-bottom: 2px solid #9aa4b2;
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}
.tag-pill::after,
.search-pill select::after {
  /* Hide chevron on tag input; show only on selects */
  display: none;
}

/* Icons */
.pill-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  color: #9aa4b2;
  flex-shrink: 0;
}

/* Responsive wrap */
@media (max-width: 640px) {
  .filter-toolbar {
    gap: 8px;
  }
  .pill {
    flex: 1 1 140px;
  }
}


/***************************
  Mood board Canvas — CLEAN
***************************/

/* --- Layering: content above connectors --- */
/* #canvasContent { position:absolute; inset:0; z-index:2; } */
#canvasContent { position: absolute; z-index: 1; }

/* #canvasOverlay { position:absolute; inset:0; z-index:1; pointer-events:auto; } */
#canvasOverlay { position: absolute; z-index: 0; pointer-events: none; }

#canvasOverlay, #canvasOverlay * { width:100%; height:100%; display:block; }

/* Back group receives clicks; dashed preview should NOT */
#overlayBack  { pointer-events:auto; }
#overlayFront { pointer-events:none; }

/* Hover + selected styles for connectors */
#overlayBack line:hover { stroke:#60a5fa; stroke-width:3; }
#overlayBack line.connector-line { pointer-events: stroke; }          /* normal */
#overlayBack line.connector-line:hover { stroke:#60a5fa; stroke-width:3; }
#overlayBack line.connector-selected   { stroke:#3b82f6; stroke-width:3; }

/* Hover + selected feedback for connectors */
#overlayBack line.connector-line.connector-hover,
#overlayBack line.connector-line:hover { stroke:#60a5fa; stroke-width:3; }
#overlayBack line.connector-line.connector-selected { stroke:#3b82f6; stroke-width:3; }

/* --- Snap grid (toggled by JS on #canvasStage) --- */
#canvasStage.snap-on {
  background-image:
    linear-gradient(to right, rgba(0,0,0,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.06) 1px, transparent 1px);
  background-size: 8px 8px, 8px 8px;
}

/* subtle “selected” look for a connector */
line.connector-selected { stroke: #4a90e2; stroke-width: 3; }

/* --- Items, selection & connector-hover --- */
.canvas-item { position: relative; } /* ensure inner fill positions correctly */
.canvas-item.selected { outline: 2px solid #4a90e2; outline-offset: 0; }
.canvas-item.connect-hover { outline:2px dashed #22c55e; }

/* media overlay should not intercept mouse/touch */
.canvas-item .mc-media,
.canvas-item .mc-media * {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* --- Marquee (rubberband) --- */
.marquee {
  position: absolute;
  border: 1px dashed #4a90e2;
  background: rgba(74,144,226,.12);
  pointer-events: none;
  z-index: 30;
}

/* --- Resize handles (corners, edges, center move) --- */
.resize-handle {
  position: absolute;
  width: 10px; height: 10px;
  background: #3b82f6;
  border: 2px solid #fff;
  border-radius: 50%;
  z-index: 10;               /* must be above the item content */
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}

/* corners */
.resize-handle.nw { left:-6px;  top:-6px;    cursor: nwse-resize; }
.resize-handle.ne { right:-6px; top:-6px;    cursor: nesw-resize; }
.resize-handle.sw { left:-6px;  bottom:-6px; cursor: nesw-resize; }
.resize-handle.se { right:-6px; bottom:-6px; cursor: nwse-resize; }

/* edges */
.resize-handle.n  { left:50%;   top:-6px;    transform: translateX(-50%); cursor: ns-resize; }
.resize-handle.s  { left:50%;   bottom:-6px; transform: translateX(-50%); cursor: ns-resize; }
.resize-handle.w  { left:-6px;  top:50%;     transform: translateY(-50%); cursor: ew-resize; }
.resize-handle.e  { right:-6px; top:50%;     transform: translateY(-50%); cursor: ew-resize; }

/* center move dot */
.resize-handle.center {
  width: 12px; height: 12px;
  background: #111;
  border-color: #fff;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  cursor: grab;
}
.resize-handle.center:active { cursor: grabbing; }

/* --- Toolbar --- */
.canvas-toolbar button {
  appearance: none;
  border: 1px solid #c9d6ff;
  background: #f7f9ff;
  color: #0b1b4d;
  padding: 6px 10px;
  border-radius: 8px;
  margin-right: 6px;
  cursor: pointer;
}
.canvas-toolbar button.active {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}

/* --- Status pill --- */
#tool-pill {
  position: absolute;
  top: 8px; right: 8px;
  background: #111; color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  font: 12px/1.4 system-ui;
  opacity: .9;
  z-index: 40;
}