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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #0a0a0a;
  color: #e0e0e0;
  min-height: 100vh;
  font-size: 1.2rem;
}

#app {
  max-width: none;
  padding: 1rem;
}

@media (min-width: 768px) {
  #app { padding: 1rem 1.5rem; }
}

/* Header */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

h1 { font-size: 1.5rem; }
#ver { color: #666; font-size: 0.5em; font-weight: normal; }

.header-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.header-btn {
  background: none;
  border: 1px solid #333;
  color: #888;
  padding: 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.header-btn:hover { color: #e0e0e0; border-color: #555; }
.header-btn.active {
  color: #e0e0e0;
  border-color: #e0e0e0;
  background: rgba(255,255,255,0.08);
}

#logout {
  background: none;
  border: 1px solid #333;
  color: #888;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
}
#logout:hover { color: #e0e0e0; border-color: #555; }

/* Toast */
#toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 8px;
  padding: 0.7rem 1rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  font-size: 0.95rem;
  animation: toast-in 0.18s ease;
}
#toast[hidden] { display: none; }
#toast-action {
  background: none;
  border: none;
  color: #4dabf7;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
}
#toast-action:hover { color: #74c0fc; }
@keyframes toast-in {
  from { transform: translate(-50%, 1rem); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}

/* Glow border: spinning conic-gradient angle, driven by JS (see "Glow border on hover") */
@property --spin {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

/* Glow background: blurred duplicate of the ring's conic that extends OUTSIDE
   the card (halo around the edge, in the same conic colors as the ring).
   - position absolute at inset:-6px (escapes ~6px in every direction)
   - z-index:-1 sits BEHIND the host's background. The host's own bg colour
     (the card colour) covers the part of glow-bg under the host, so visible
     glow = only the ring extending past the card edges.
   - Requires the host to NOT establish a stacking context (position:relative
     without z-index is fine) and to have overflow:visible.
   - Selectors per host so they outweigh the "host > *" rules.

   Alternative (kept as reference — v0.108 shipped this inward variant):
     inset: 4px; z-index: 3; filter: blur(28px); opacity: 0.35
     → soft wash INSIDE the card. Worth coming back to if we ever want both. */
.grid-note > .glow-bg,
#create-bar > .glow-bg,
#modal > .glow-bg {
  position: absolute;
  inset: -4px;
  border-radius: 12px;
  background: conic-gradient(
    from var(--spin) at var(--cx) var(--cy) in oklab,
    var(--ring-c1, #ff6a00),
    var(--ring-c2, #0a7bff),
    var(--ring-c1, #ff6a00)
  );
  filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: -1;
}
.grid-note:hover > .glow-bg,
#create-bar:hover > .glow-bg { opacity: 0.5; }
#modal-overlay:not([hidden]) #modal > .glow-bg { opacity: 0.5; }

/* Halo conic origin pinned to the same corner as the sharp ring for modal,
   so both layers radiate from the same point and feel cohesive. */
#modal > .glow-bg {
  background: conic-gradient(
    from var(--spin) at 100% 0% in oklab,
    var(--ring-c1, #ff6a00),
    var(--ring-c2, #0a7bff),
    var(--ring-c1, #ff6a00)
  );
}

/* Inner glow: SECOND blurred conic, this one painted INSIDE the card (above
   the ::after cover, below content). Adds depth — the ring's colours
   "breathe" into the card interior, especially noticeable on coloured cards.
   Kept subtle so it doesn't fight readability.
   Origin is fixed at 50% 50% (NOT the cursor) — coupling the inner conic to
   the cursor made the colour wash track right under the pointer which felt
   oppressive. Now it only spins via --spin. */
.grid-note > .glow-inset,
#create-bar > .glow-inset,
#modal > .glow-inset {
  position: absolute;
  inset: 4px;
  border-radius: 6px;
  background: conic-gradient(
    from var(--spin) at 50% 50% in oklab,
    var(--ring-c1, #ff6a00),
    var(--ring-c2, #0a7bff),
    var(--ring-c1, #ff6a00)
  );
  filter: blur(28px);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 3;
}
.grid-note:hover > .glow-inset,
#create-bar:hover > .glow-inset { opacity: 0.15; }
#modal-overlay:not([hidden]) #modal > .glow-inset { opacity: 0.12; }

/* The modal is up to 1400px wide — blur(28px) that unifies a 260px grid card
   is only ~2% of the modal's width, so the conic's 4-sector pattern stays
   visible as distinct coloured quadrants instead of a soft wash. Scale blur
   to keep roughly the same diffusion ratio. */
#modal > .glow-inset { filter: blur(140px); }

/* Dark inner stroke that appears together with the ring. Without it, the
   sharp ring's orange↔blue washes out when the card has a saturated
   background colour (the palette is also mid-saturation, so the ring's hue
   competes with the card hue). A thin dark inset between the ring and the
   card-color interior gives the ring contrast on its inner side, while the
   halo handles the outer side against the body bg. Only on hover / modal-open
   — permanent would over-frame the cards at idle. */
.grid-note::after,
#create-bar::after,
#modal::after { transition: box-shadow 0.15s ease; }
.grid-note:hover::after,
#create-bar:hover::after,
#modal-overlay:not([hidden]) #modal::after {
  box-shadow: inset 0 0 0 1.5px rgba(0,0,0,0.55);
}

/* Trash view */
body.trash-mode #create-bar,
body.trash-mode #labels-bar,
body.trash-mode #search-wrap,
body.trash-mode #search-btn { display: none; }
.trash-note { cursor: default; }
.trash-note:hover { border-color: rgba(255,255,255,0.13); }
.trash-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  justify-content: flex-end;
}
.trash-actions button {
  background: none;
  border: 1px solid rgba(255,255,255,0.22);
  color: inherit;
  opacity: 0.8;
  padding: 0.35rem 0.55rem;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.trash-actions button:hover { opacity: 1; border-color: rgba(255,255,255,0.55); }
.trash-meta {
  margin-top: 0.55rem;
  font-size: 0.75rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}
.empty-grid {
  grid-column: 1 / -1;
  text-align: center;
  opacity: 0.5;
  padding: 3rem 1rem;
}

/* Note cards */
.note-card {
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 8px;
  padding: 1rem;
}

.note-card.pinned { border-color: rgba(255,255,255,0.32); }

/* Create bar */
#create-bar {
  margin-bottom: 1.5rem;
  overflow: visible;
  position: relative;
  --cx: 50%;
  --cy: 50%;
}

#create-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: conic-gradient(
    from var(--spin) at var(--cx) var(--cy) in oklab,
    var(--ring-c1, #ff6a00),
    var(--ring-c2, #0a7bff),
    var(--ring-c1, #ff6a00)
  );
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
  z-index: 1;
  -webkit-mask-image: radial-gradient(circle at var(--cx) var(--cy), #000 0, #000 160px, transparent 460px);
  mask-image: radial-gradient(circle at var(--cx) var(--cy), #000 0, #000 160px, transparent 460px);
}

#create-bar::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 6px;
  background: inherit;
  pointer-events: none;
  z-index: 2;
}

#create-bar:hover::before { opacity: 1; }

#create-bar > * {
  position: relative;
  z-index: 3;
}

.create-header {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

#create-title {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  color: #e0e0e0;
  font-size: 1.1rem;
  font-weight: 500;
  outline: none;
  padding: 0.45rem 0;
}

.type-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.55;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  flex-shrink: 0;
}
.type-btn:hover { opacity: 1; background: rgba(255,255,255,0.06); }
.type-btn.active { opacity: 1; background: rgba(255,255,255,0.08); }

.create-body textarea, #modal textarea {
  width: 100%;
  background: none;
  border: none;
  color: #e0e0e0;
  font-size: 1rem;
  outline: none;
  resize: none;
  font-family: inherit;
  margin-top: 0.5rem;
}

.create-actions, .modal-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  align-items: center;
}

.create-actions button, .modal-actions button {
  background: none;
  border: 1px solid rgba(255,255,255,0.2);
  color: inherit;
  opacity: 0.75;
  padding: 0.45rem 0.9rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
}
.create-actions button:hover, .modal-actions button:hover { opacity: 1; border-color: rgba(255,255,255,0.5); }

/* Notes grid */
#notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
}

@media (min-width: 768px) {
  #notes-grid {
    grid-template-columns: repeat(auto-fill, 260px);
    justify-content: center;
  }
}

@media (min-width: 1024px) {
  #notes-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    justify-content: stretch;
  }
}

.grid-note {
  cursor: pointer;
  overflow: visible;
  position: relative;
  --cx: 50%;
  --cy: 50%;
}

.grid-note::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: conic-gradient(
    from var(--spin) at var(--cx) var(--cy) in oklab,
    var(--ring-c1, #ff6a00),
    var(--ring-c2, #0a7bff),
    var(--ring-c1, #ff6a00)
  );
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
  z-index: 1;
  -webkit-mask-image: radial-gradient(circle at var(--cx) var(--cy), #000 0, #000 160px, transparent 460px);
  mask-image: radial-gradient(circle at var(--cx) var(--cy), #000 0, #000 160px, transparent 460px);
}

.grid-note::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 6px;
  background: inherit;
  pointer-events: none;
  z-index: 2;
}

.grid-note:hover::before {
  opacity: 1;
}

.grid-note > * {
  position: relative;
  z-index: 3;
}
.grid-note.dragging { opacity: 0; }

body.grid-dragging, body.grid-dragging * {
  cursor: grabbing !important;
  user-select: none;
}

.grid-note .note-title {
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: 0.35rem;
  word-break: break-word;
}

.grid-note .note-content {
  font-size: 1rem;
  color: inherit;
  opacity: 0.72;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow: hidden;
}

.grid-note .pin-badge {
  float: right;
  font-size: 0.8rem;
  opacity: 0.5;
}

/* Checklist items */
.check-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0;
  font-size: 1rem;
  overflow: hidden;
}

/* Grid items can wrap to multiple lines — keep checkbox aligned with first line */
.grid-note .check-item { align-items: flex-start; }
.grid-note .check-item span { line-height: 1.5; }

.hand-cb {
  flex-shrink: 0;
  cursor: pointer;
  box-sizing: content-box;
  overflow: visible;
}
#modal .hand-cb,
#create-bar .hand-cb {
  padding: 0.6rem 0.75rem 0.6rem 0.25rem;
  margin: -0.1rem 0 -0.6rem -0.25rem;
}

.check-item.done span:not(.drag-handle) { text-decoration: line-through; opacity: 0.55; }
.grid-note .check-item span { cursor: pointer; }
.grid-note .check-item { cursor: pointer; }

.drag-handle {
  cursor: grab;
  color: inherit;
  opacity: 0.55;
  font-size: 1.5rem;
  user-select: none;
  padding: 0.3rem;
  flex-shrink: 0;
  min-width: 2.2rem;
  min-height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.drag-handle:hover { opacity: 1; }

.check-item.dragging { opacity: 0; }
body.item-dragging, body.item-dragging * { cursor: grabbing !important; }

.check-item .item-text {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: #e0e0e0;
  font-size: 1rem;
  outline: none;
  padding: 0 0 0.3rem;
  font-family: inherit;
  resize: none;
  line-height: 1.5;
  overflow: hidden;
  word-break: break-word;
}
.check-item .item-text::-webkit-resizer { display: none; }

#modal .check-item, #create-bar .check-item { align-items: flex-start; }
#modal .check-item .drag-handle,
#create-bar .check-item .drag-handle,
#modal .check-item .item-delete,
#create-bar .check-item .item-delete {
  margin-top: -0.1rem;
}

.item-delete {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.55;
  cursor: pointer;
  font-size: 1.3rem;
  padding: 0.3rem;
  flex-shrink: 0;
  min-width: 2.2rem;
  min-height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-delete:hover { opacity: 1; }

/* Modal */
#modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 0.5rem;
}

#modal-overlay[hidden] {
  display: none;
}

/* Lock background scroll while modal is open */
body:has(#modal-overlay:not([hidden])) {
  overflow: hidden;
}

#modal {
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: visible;
  position: relative;
  padding: 0;
  border-color: #444;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  --cx: 50%;
  --cy: 50%;
}

#modal::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  /* Conic origin pinned at top-right corner (100% 0%) instead of cursor.
     On a 1400px-wide modal a cursor-anchored conic visibly slides under the
     pointer; pinning to a corner keeps the gradient spatially stable while
     --spin still rotates it. */
  background: conic-gradient(
    from var(--spin) at 100% 0% in oklab,
    var(--ring-c1, #ff6a00),
    var(--ring-c2, #0a7bff),
    var(--ring-c1, #ff6a00)
  );
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
  z-index: 1;
  /* No cursor-mask: the 160/460px radial of the grid cards covers only ~33%
     of a modal's width, hiding the ring on the rest. The ring is visible all
     around. */
}

#modal::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 6px;
  background: inherit;
  pointer-events: none;
  z-index: 2;
}

#modal-overlay:not([hidden]) #modal::before {
  opacity: 1;
}

.modal-head, .modal-body, .modal-foot {
  position: relative;
  z-index: 3;
}

.modal-head {
  flex-shrink: 0;
  padding: 1.25rem 1.25rem 0.5rem;
  position: relative;
}
.modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 1.25rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.modal-body::-webkit-scrollbar { width: 8px; }
.modal-body::-webkit-scrollbar-track { background: transparent; }
.modal-body::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18);
  border-radius: 4px;
}
.modal-body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.35); }
.modal-foot {
  flex-shrink: 0;
  padding: 0.75rem 1.25rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}

@media (min-width: 768px) {
  #modal { max-width: min(95vw, 1100px); }
  .modal-head { padding: 1.5rem 1.75rem 0.5rem; }
  .modal-body { padding: 0 1.75rem; }
  .modal-foot { padding: 0.5rem 1.75rem 1.5rem; }
}
@media (min-width: 1200px) {
  #modal { max-width: min(95vw, 1400px); }
}

#modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  color: #e0e0e0;
  font-size: 1.6rem;
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  line-height: 1;
  z-index: 1;
}
#modal-close:hover { color: #fff; }

#modal-title {
  width: calc(100% - 2.5rem);
  background-color: transparent;
  border: none;
  color: #e0e0e0;
  font-size: 1.2rem;
  font-weight: 600;
  outline: none;
  padding: 0.35rem 0 0;
}

#modal-add-item input {
  width: 100%;
  background-color: transparent;
  border: none;
  color: #e0e0e0;
  font-size: 1rem;
  outline: none;
  padding: 0.4rem 0 0.5rem;
  font-family: inherit;
  margin-top: 0.25rem;
}

.check-item.done .item-text { text-decoration: line-through; opacity: 0.55; }

/* Placeholders inherit card color so they don't go muddy on colored backgrounds */
#create-title::placeholder,
#modal-title::placeholder,
.create-body textarea::placeholder,
#modal textarea::placeholder,
#modal-add-item input::placeholder,
.check-item input::placeholder,
#search::placeholder {
  color: inherit;
  opacity: 0.5;
}

.modal-actions {
  justify-content: flex-end;
  margin-top: 1rem;
}

.modal-actions button {
  padding: 0.5rem 1rem;
  font-size: 1.1rem;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.btn-icon svg { vertical-align: middle; }

/* Color picker */
.color-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.color-chip {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  cursor: pointer;
  padding: 0;
  position: relative;
}
.color-chip:hover { border-color: rgba(255,255,255,0.7); }
.color-chip.selected { border-color: #e0e0e0; border-width: 2px; }
.color-chip.default { background: #1a1a1a; }
.color-chip.default::after {
  content: '';
  position: absolute;
  top: 50%; left: 10%; right: 10%;
  height: 1px;
  background: rgba(255,255,255,0.5);
  transform: rotate(-45deg);
}

/* Search */
#search-wrap {
  position: relative;
  margin-bottom: 1rem;
}
#search-wrap .search-icon {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
  pointer-events: none;
}
#search {
  width: 100%;
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  color: #e0e0e0;
  font-size: 1.05rem;
  padding: 0.65rem 1rem 0.65rem 2.6rem;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s;
}

#search:hover, #search:focus { border-color: #555; }

/* Labels */
.labels-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.label-pill {
  background: #1a1a1a;
  border: 1px solid #333;
  color: #aaa;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.95rem;
  font-family: inherit;
}
.label-pill:hover { border-color: #555; color: #e0e0e0; }
.label-pill.active { background: #e0e0e0; color: #0a0a0a; border-color: #e0e0e0; }
.label-pill-add { color: #666; }

.modal-labels {
  margin-top: 0.75rem;
}
.modal-labels-title {
  font-size: 0.85rem;
  color: inherit;
  opacity: 0.6;
  margin-bottom: 0.4rem;
}
.label-chip {
  background: none;
  border: 1px solid rgba(255,255,255,0.25);
  color: inherit;
  opacity: 0.75;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
  margin: 0 0.25rem 0.3rem 0;
}
.label-chip:hover { border-color: rgba(255,255,255,0.55); opacity: 1; }
.label-chip.active {
  background: rgba(255,255,255,0.92);
  color: #0a0a0a;
  border-color: transparent;
  opacity: 1;
}

/* Completed items section */
#modal-done-section {
  margin-top: 0.5rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 0.3rem;
}
#modal-done-toggle {
  width: 100%;
  background: none;
  border: none;
  color: inherit;
  padding: 0.5rem 0;
  font-family: inherit;
  font-size: 0.85rem;
  opacity: 0.7;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  text-align: left;
}
#modal-done-toggle:hover { opacity: 1; }
#modal-done-toggle .chevron { transition: transform 0.15s; flex-shrink: 0; }
#modal-done-toggle.expanded .chevron { transform: rotate(90deg); }
#modal-done-items[hidden] { display: none; }

/* URL links inside notes */
.note-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.note-link:hover { text-decoration-style: solid; }

/* Modal meta footer */
.modal-meta {
  margin-top: 0.9rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255,255,255,0.18);
  font-size: 0.75rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: inherit;
  opacity: 0.75;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.85rem;
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
}
.modal-meta:empty { display: none; }
.modal-meta span { white-space: nowrap; }
.modal-meta span[title] { cursor: help; }

/* Grid progress badge for checklists */
.grid-note .progress-badge {
  float: right;
  font-size: 0.7rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background: rgba(255,255,255,0.12);
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  opacity: 0.7;
  margin-left: 0.4rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}

.grid-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.6rem;
}
.grid-label {
  background: rgba(255,255,255,0.15);
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  opacity: 0.85;
}
.grid-label.more {
  opacity: 0.55;
}


@media (max-width: 480px) {
  #modal {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 12px;
  }
}