/* Evermail WebApp — kit-specific layout & component CSS.
   Originally a single-page React kit; ported into the Blazor app.
   colors_and_type.css is loaded globally by App.razor — no @import here.

   The kit's body-level layout (display:flex spanning the viewport) is
   re-scoped to `.app-shell` so it doesn't fight the marketing/auth pages
   under PublicLayout. MainLayout's outer wrapper applies `.app-shell`. */

.app-shell {
  display: flex;
  min-height: 100vh;
  background: var(--color-app-bg);
  color: var(--color-text-primary);
}

/* ============ Sidebar ============ */
.sidebar {
  width: 250px;
  flex-shrink: 0;
  background: var(--color-sidebar-gradient);
  color: #cbd5f5;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1rem .5rem;
  /* Stretch with the scroll height of the page (body is flex, so the sidebar
     matches the tallest sibling — i.e. .main's full content height).
     An inner sticky wrapper keeps the nav visible while scrolling. */
  align-self: stretch;
}
/* Inner sticky wrapper — pin the nav + user card to the viewport top
   while the sidebar background stretches to the full document height. */
.sidebar__inner {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  /* Account for the sidebar's own top/bottom padding so the inner content
     fits within the viewport without clipping. */
  height: calc(100vh - 1.75rem);
}
/* The first group (Workspace) gets its own bottom margin; Account group uses margin-top:auto to pin. */
.sidebar > .sidebar__group:first-of-type { margin-bottom: 1rem; }
.sidebar__brand { display:flex; align-items:center; gap:.6rem; padding:.5rem .25rem; }
.sidebar__brand img { width:28px; height:28px; }
.sidebar__brand-text { font-weight:700; font-size:1.05rem; color:#f8fafc; }
.sidebar__brand-text .word { color:#49d9c9; }

.sidebar__user {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  margin: .5rem 0 .35rem;
  border-radius: 14px;
  padding: .65rem .75rem;
  display:flex; align-items:center; gap:.65rem;
}
.sidebar__user .avatar {
  width:36px; height:36px; border-radius:999px;
  background: linear-gradient(120deg,#2563eb,#06b6d4);
  color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem;
  flex: none;
}
.sidebar__user .meta { display:flex; flex-direction:column; min-width:0; flex: 1 1 auto; }
.sidebar__user .name { font-weight:600; font-size:.85rem; color:#f8fafc; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar__user .plan { font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:#5de1d6; margin-top:2px; }

/* Logout — ghost icon button tucked into the right edge of the user card */
.sidebar__user-logout {
  flex: none;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(226, 232, 240, 0.55);
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
  padding: 0;
  font-size: 1rem;
}
.sidebar__user-logout:hover {
  color: #fecaca;                            /* soft red-wash on hover so the action reads as "leave" */
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(248, 113, 113, 0.22);
}
.sidebar__user-logout:focus-visible {
  outline: 2px solid rgba(248, 113, 113, 0.45);
  outline-offset: 2px;
}

.sidebar__group { display:flex; flex-direction:column; gap:.15rem; }
.sidebar__group-label { font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; color:#64748b; padding:0 .65rem; margin-bottom:.4rem; }

.nav-link {
  display:flex; align-items:center; gap:.7rem;
  padding:.6rem .75rem; border-radius:14px;
  font-size:.9rem; color:#cbd5f5; cursor:pointer;
  text-decoration:none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.nav-link i { font-size: 1.05rem; opacity:.85; }
.nav-link:hover { background: rgba(255,255,255,0.05); color:#fff; }
.nav-link.active { background: rgba(94,225,214,0.10); color:#fff; }
.nav-link.active i { color: #5de1d6; opacity:1; }

/* Parent nav link (Settings) */
.nav-link--parent { position:relative; }
.nav-link__chev {
  margin-left:auto;
  font-size:.85rem !important;
  opacity:.5 !important;
  transition: transform .28s cubic-bezier(.32,.72,.3,1), opacity var(--transition-fast);
}
.nav-link--parent.is-open .nav-link__chev {
  transform: rotate(90deg);
  opacity:.9 !important;
}
.nav-link--parent:hover .nav-link__chev { opacity:.8 !important; }

/* Sublist — max-height animation for broad browser support */
.nav-sublist {
  /* Reset the legacy airy.css sublist-reveal animation so our max-height toggle wins */
  animation: none !important;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .4s cubic-bezier(.32,.72,.3,1),
              opacity .2s ease;
}
.nav-sublist__inner {
  display: flex; flex-direction: column; gap: .1rem;
  margin: 0 0 0 .55rem;
  padding: .35rem 0 .1rem .7rem;
  border-left: 1px solid rgba(255,255,255,0.08);
}
.nav-sublist.is-open {
  max-height: 420px;
  opacity: 1;
  transition: max-height .4s cubic-bezier(.32,.72,.3,1),
              opacity .2s ease .08s;
}

/* Sublist items — staggered fade/slide in */
.nav-sublink {
  display:flex; align-items:center; gap:.55rem;
  padding:.42rem .6rem;
  border-radius:10px;
  font-size:.82rem;
  color:#94a3b8;
  cursor:pointer;
  text-decoration:none;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
  animation: navSublinkIn .36s cubic-bezier(.32,.72,.3,1) both;
  animation-delay: calc(40ms + var(--i, 0) * 32ms);
}
.nav-sublink i { font-size:.9rem; opacity:.7; width:14px; text-align:center; }
.nav-sublink:hover { background: rgba(255,255,255,0.04); color:#e2e8f0; }
.nav-sublink:hover i { opacity:.95; }
.nav-sublink.active { background: rgba(94,225,214,0.08); color:#fff; }
.nav-sublink.active i { color:#5de1d6; opacity:1; }
@keyframes navSublinkIn {
  from { opacity:0; transform: translateX(-6px); }
  to   { opacity:1; transform: translateX(0); }
}

.sidebar__footer {
  padding:.75rem .65rem .25rem;
  font-size:.72rem; color: rgba(248,250,252,.55); letter-spacing:.02em;
  display:flex; align-items:center; gap:.5rem;
  border-top: 1px solid rgba(255,255,255,.06);
  margin-top: 0;
}
.sidebar__footer-logo { height:16px; width:auto; opacity:.9; }
.sidebar__footer span { color: rgba(248,250,252,.7); font-weight: 500; }

/* ============ Main area ============ */
.main {
  flex: 1;
  min-width: 0;
  padding: 1.25rem 2rem 3rem;
  display:flex; flex-direction:column; gap:1.5rem;
}

/* ============ Top bar ============ */
/* Flat row — no pill chrome. Just a hairline underneath separating the
   bar from the content below. Matches the "airy" visual vocabulary used
   elsewhere in the app. */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  padding: 0 0 1rem;
  height: auto;
  box-shadow: none;
}
.topbar__crumbs { font-size:.85rem; color: var(--color-text-secondary); }
.topbar__crumbs strong { color: var(--color-text-primary); font-weight:600; }
.topbar__right { display:flex; align-items:center; gap:.4rem; }
/* .icon-btn — unified definition further down, in the Buttons section */

/* ============ Page hero ============ */
.page-hero {
  /* Compact title row — no card chrome, just a thin line of type + a
     primary action. Was a huge pill eating ~140px of vertical space on
     every interior page; now it's a single baseline row. */
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: .25rem 0 0;
  display:flex; gap:1.5rem; justify-content:space-between; align-items:flex-end;
}
.page-hero h1 {
  margin: 0;
  font-size: clamp(1.35rem, 1.8vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
/* Eyebrow is sidebar duplication — hide it. Subtitle stays visible but
   demoted to a small meta line directly under the h1. */
.page-hero .eyebrow { display: none; }
.page-hero > div > p {
  margin: .3rem 0 0;
  font-size: .82rem;
  color: var(--color-text-muted);
  max-width: 640px;
  line-height: 1.35;
}

/* ============ Stat grid ============ */
.stat-grid {
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:1.5rem;
}
.stat-card {
  background: var(--color-surface);
  border:1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1.5rem 1.65rem;
  box-shadow: var(--shadow-sm);
}
.stat-card .label { font-size: .75rem; letter-spacing:.12em; text-transform:uppercase; color: var(--color-text-secondary); font-weight:600; }
.stat-card .value { font-size: 2rem; font-weight:700; color: var(--color-brand-deep); margin-top:.4rem; }
.stat-card .delta { font-size: .8rem; font-weight:600; margin-top:.25rem; color: var(--color-success); display:flex; align-items:center; gap:.3rem; }
.stat-card .delta.muted { color: var(--color-text-secondary); }

/* ============ Home screen ============ */
.home-hero {
  margin-bottom: 0;
}
.home-hero h1 { margin:.5rem 0 .5rem; }
.home-hero__sub {
  font-size:.92rem;
  color: var(--color-text-secondary);
  margin:0;
}
.home-hero__sub strong { color: var(--color-text-primary); }

.home-search { /* override big top margin if needed; search-panel already fine */ }

.home-grid {
  display:grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 2.25rem;
  position: relative;
}
.home-grid::before {
  /* subtle divider between the two columns */
  content: '';
  position: absolute;
  left: calc(1.35 / 2.35 * 100% - .25rem);
  top: 2rem; bottom: .5rem;
  width: 1px;
  background: var(--color-border);
  opacity: .6;
}
@media (max-width: 1024px) {
  .home-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .home-grid::before { display:none; }
}

.home-panel {
  /* airy: no card chrome — just rhythm from spacing */
  padding: 0;
}
.home-panel__head {
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom: .75rem;
  padding: 0 .2rem;
}
.home-panel__head h3 { margin:.15rem 0 0; font-size:1.05rem; }
.home-panel__head .eyebrow { margin:0; }

/* Recent searches list */
.recent-list { display:flex; flex-direction:column; gap:.35rem; }
.recent-row {
  all: unset;
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap:.85rem;
  align-items:center;
  padding:.65rem .55rem;
  border-radius:10px;
  cursor:pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.recent-row:hover { background: var(--color-surface-muted); }
.recent-row:active { transform: scale(.995); }
.recent-row__ico {
  color: var(--color-brand-primary);
  font-size:.95rem;
  width:24px; height:24px;
  display:grid; place-items:center;
  background: rgba(13,148,136,0.10);
  border-radius:8px;
}
.recent-row__body { min-width:0; display:flex; flex-direction:column; gap:.3rem; }
.recent-row__q {
  font-weight:600; color: var(--color-text-primary);
  font-size:.92rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.recent-row__filters { display:flex; flex-wrap:wrap; gap:.3rem; }
.recent-row__chip {
  font-size:.7rem;
  padding:.12rem .5rem;
  border-radius:999px;
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}
.recent-row__meta { text-align:right; display:flex; flex-direction:column; gap:.2rem; }
.recent-row__count { font-size:.82rem; color: var(--color-text-secondary); }
.recent-row__count strong { color: var(--color-text-primary); font-weight:600; }
.recent-row__when { font-size:.72rem; color: var(--color-text-tertiary, var(--color-text-secondary)); }

/* Archives at a glance */
.home-archives { display:flex; flex-direction:column; gap:.3rem; }
.home-archive {
  all: unset;
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap:.85rem;
  align-items:center;
  padding:.65rem .55rem;
  border-radius:10px;
  cursor:pointer;
  transition: background var(--transition-fast);
}
.home-archive:hover { background: var(--color-surface-muted); }
.home-archive__ico {
  width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center;
  font-size:.95rem;
}
.home-archive__name { font-weight:600; color: var(--color-text-primary); font-size:.9rem; }
.home-archive__meta { font-size:.78rem; color: var(--color-text-secondary); margin-top:.1rem; }

/* Home quota indicator in search panel */
.home-quota {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .78rem; color: var(--color-text-secondary);
  cursor: default;
}
.home-quota__label strong { color: var(--color-text-primary); font-weight:600; }
.home-quota__bar {
  width: 90px; height: 6px;
  background: var(--color-surface-muted);
  border-radius: 999px; overflow: hidden;
  border: 1px solid var(--color-border);
}
.home-quota__fill {
  display:block; height:100%;
  background: var(--color-brand-gradient);
  border-radius: 999px;
  transition: width .3s ease;
}
.home-quota__fill.is-warning { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.home-quota__plan {
  padding: .1rem .5rem;
  border-radius: 999px;
  font-size: .68rem; font-weight:700; letter-spacing:.04em;
  color: var(--color-brand-deep);
  background: rgba(13,148,136,0.10);
  border: 1px solid rgba(13,148,136,0.25);
}
[data-theme="dark"] .home-quota__plan {
  color: #5de1d6;
  background: rgba(94,225,214,0.12);
  border-color: rgba(94,225,214,0.3);
}

/* ============ Modern card ============ */
.modern-card {
  background: var(--color-surface);
  border:1px solid var(--color-border);
  border-radius: var(--radius-card-elevated);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}
.modern-card h3 { margin-bottom: .25rem; }
.card-row {
  display:flex; align-items:center; gap:1rem; padding:.85rem 0;
  border-bottom: 1px solid var(--color-border);
}
.card-row:last-child { border-bottom: 0; padding-bottom:0; }
.card-row:first-child { padding-top:0; }

/* ============ Search panel ============ */
.search-panel {
  background: var(--color-surface);
  border:1px solid var(--color-border);
  border-radius: var(--radius-card-elevated);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.search-bar {
  display:flex; align-items:center; gap:.75rem;
  background: var(--color-surface);
  border:1px solid var(--color-border);
  border-radius: 999px;
  padding: .85rem 1.2rem;
  font-size: 1rem;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.search-bar:focus-within { border-color: var(--color-brand-primary); }
.search-bar i { color: var(--color-text-secondary); }
.search-bar input { flex:1; background:transparent; border:none; outline:none; font: inherit; color: var(--color-text-primary); }
.search-bar input::placeholder { color: var(--color-text-muted); }
.search-bar kbd {
  font-family: var(--font-family-mono);
  font-size: .75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 2px 8px;
  color: var(--color-text-secondary);
}
/* Clear-search (x) button inside the bar */
.search-bar__clear {
  all: unset; cursor: pointer;
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 999px;
  color: var(--color-text-muted);
  transition: color .12s ease, background .12s ease;
}
.search-bar__clear:hover { color: var(--color-text-primary); background: color-mix(in oklch, var(--color-text-primary) 6%, transparent); }
.search-bar__clear i { font-size: 1rem; }

/* Clear-filters chip inside the bar — visible only when filters > 0 */
.search-bar__clear-filters {
  all: unset; cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .65rem; border-radius: 999px;
  font-size: .75rem; font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: all .12s ease;
}
.search-bar__clear-filters:hover {
  color: #dc2626; border-color: color-mix(in oklch, #dc2626 35%, var(--color-border));
  background: color-mix(in oklch, #dc2626 6%, var(--color-surface));
}
.search-bar__clear-filters i { font-size: .8rem; }

/* Primary CTA on the right side of the bar */
.search-bar__cta {
  all: unset; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1.1rem; border-radius: 999px;
  font-size: .85rem; font-weight: 600;
  background: var(--color-brand-primary); color: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,.12), 0 4px 10px -4px color-mix(in oklch, var(--color-brand-primary) 50%, transparent);
  transition: transform .08s ease, background .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.search-bar__cta:hover { background: color-mix(in oklch, var(--color-brand-primary) 92%, #000); }
.search-bar__cta:active { transform: translateY(1px); }
.search-bar__cta:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* Ghost variant — used on list screens where CTA toggles a filter panel
   rather than submits an action. Less visual weight than the primary blue. */
.search-bar__cta--ghost {
  background: transparent;
  color: var(--color-text-secondary);
  box-shadow: inset 0 0 0 1px var(--color-border);
}
.search-bar__cta--ghost:hover {
  background: var(--color-surface-muted);
  color: var(--color-text-primary);
  box-shadow: inset 0 0 0 1px var(--color-border-strong, var(--color-border));
}
.search-bar__cta--ghost.is-active {
  background: color-mix(in oklch, var(--color-brand-primary) 10%, transparent);
  color: var(--color-brand-primary);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-brand-primary) 40%, transparent);
}
.search-bar__cta--ghost i { color: currentColor !important; }

/* Active-filter count badge inside the ghost CTA */
.search-bar__cta-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.1rem; height: 1.1rem; padding: 0 .35rem;
  border-radius: 999px; background: var(--color-brand-primary); color: #fff;
  font-size: .65rem; font-weight: 600; margin-left: .15rem;
}
/* Icon color — explicit white so it reads against the brand fill.
   Bootstrap Icons default to `currentColor`, but some global rule in
   airy.css darkens `.search-bar i` — this wins by specificity. */
.search-bar__cta i { font-size: .85rem; color: #fff; }

/* Hide the esc kbd on small screens when CTA takes priority */
.search-bar__kbd { /* kbd already styled by .search-bar kbd */ }
@media (max-width: 900px) {
  .search-bar__kbd, .search-bar__clear-filters { display: none; }
}

.filter-chips { display:flex; gap:.5rem; flex-wrap:wrap; margin-top: 1rem; }
.chip {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .85rem; border-radius:999px;
  font-size:.8rem; font-weight:500;
  background: var(--color-surface-muted); color: var(--color-text-secondary);
  border:1px solid var(--color-border);
  cursor:pointer;
}
.chip i { font-size:.85rem; }
.chip.active { background: rgba(37,99,235,0.10); color: var(--color-brand-primary); border-color: rgba(37,99,235,0.25); }
/* Right-aligned cluster in the filter chips row */
.filter-chips__right {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .65rem;
}
/* "Clear all" chip — ghost-destructive */
.chip.chip--clear-all {
  all: unset; cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .8rem; border-radius: 999px;
  font-size: .78rem; font-weight: 500;
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px dashed var(--color-border);
  transition: all .12s ease;
}
.chip.chip--clear-all:hover {
  color: #dc2626; border-color: color-mix(in oklch, #dc2626 45%, var(--color-border));
  background: color-mix(in oklch, #dc2626 5%, transparent);
  border-style: solid;
}
.chip.chip--clear-all i { font-size: .7rem; }
.chip .x { opacity:.6; margin-left:.2rem; }

/* ============ Email card ============ */
.email-list { display:flex; flex-direction:column; gap:.75rem; margin-top:1.25rem; }
.email-card {
  display:grid; grid-template-columns: 36px 1fr auto;
  gap:1rem; padding: 1rem 1.25rem;
  background: var(--color-surface);
  border:1px solid var(--color-border);
  border-radius: var(--radius-card);
  cursor:pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.email-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); border-color: var(--color-border-strong); }
.email-card.active { border-color: var(--color-brand-primary); }
.email-card .avatar {
  width:36px; height:36px; border-radius:999px;
  background: var(--color-surface-muted); color: var(--color-text-secondary);
  display:inline-flex; align-items:center; justify-content:center; font-weight:600; font-size:.8rem;
}
.email-card .body { min-width:0; }
.email-card .row1 { display:flex; align-items:baseline; gap:.5rem; }
.email-card .from { font-weight:600; color: var(--color-text-primary); font-size:.95rem; }
.email-card .to { color: var(--color-text-secondary); font-size:.8rem; }
.email-card .subject { font-weight:600; color: var(--color-text-primary); margin-top:.15rem; }
.email-card .subject mark { background: rgba(37,99,235,0.18); color: inherit; padding:0 2px; border-radius:3px; }
.email-card .snippet { color: var(--color-text-secondary); font-size:.85rem; margin-top:.25rem; line-height:1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.email-card .snippet mark { background: rgba(6,182,212,0.18); color: inherit; padding:0 2px; border-radius:3px; }
.email-card .right { display:flex; flex-direction:column; align-items:flex-end; gap:.4rem; }
.email-card .when { font-size:.75rem; color: var(--color-text-muted); white-space:nowrap; }
.email-card .att { display:inline-flex; align-items:center; gap:.25rem; font-size:.75rem; color: var(--color-text-secondary); background: var(--color-surface-muted); padding: 2px 8px; border-radius:999px; }

/* ============ Status pills ============ */
.status-pill {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.3rem .75rem; border-radius:999px;
  font-size:.78rem; font-weight:600;
  background: var(--color-neutral-bg); color: var(--color-text-secondary);
}
.status-pill--success    { background: var(--color-success-bg);    color: var(--color-success); }
.status-pill--processing { background: var(--color-processing-bg); color: var(--color-processing); }
.status-pill--warning    { background: var(--color-warning-bg);    color: var(--color-warning); }
.status-pill--danger     { background: var(--color-danger-bg);     color: var(--color-danger); }

/* ============ Buttons (unified system) ============ */
/*
  The system:
    btn-primary   — brand gradient, the ONE main CTA per screen
    btn-secondary — white surface + border, default non-primary action
    btn-ghost     — transparent text button, for cancels / tertiary
    btn-danger    — destructive only
    btn-sm        — compact modifier for inline rows
*/
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.65rem 1.25rem; border-radius:999px;
  font-family: inherit; font-size:.88rem; font-weight:600;
  border:1px solid transparent; cursor:pointer; text-transform:none;
  white-space: nowrap;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; transform:none; }
.btn i { font-size: 1em; }

/* Primary — softer shadow so it reads as confident, not loud */
.btn-primary {
  background: var(--color-brand-gradient);
  color: #fff;
  box-shadow: 0 4px 14px -6px rgba(13,148,136,0.45);
}
.btn-primary:hover:not(:disabled) {
  box-shadow: 0 6px 18px -6px rgba(13,148,136,0.55);
  transform: translateY(-1px);
}

/* Secondary — canonical non-primary action */
.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover:not(:disabled) {
  border-color: var(--color-brand-primary);
  color: var(--color-brand-primary);
}

/* Ghost — text only */
.btn-ghost { background: transparent; color: var(--color-text-secondary); }
.btn-ghost:hover:not(:disabled) { background: var(--color-surface-muted); color: var(--color-text-primary); }

/* Danger */
.btn-danger {
  background: #dc2626; color:#fff;
  box-shadow: 0 4px 14px -6px rgba(220,38,38,0.50);
}
.btn-danger:hover:not(:disabled) {
  background:#b91c1c;
  box-shadow: 0 6px 18px -6px rgba(220,38,38,0.60);
  transform: translateY(-1px);
}

/* Deprecated aliases — keep legacy markup working while code is unified */
.btn-outline { background: var(--color-surface); color: var(--color-text-primary); border-color: var(--color-border-strong); }
.btn-outline:hover:not(:disabled) { color: var(--color-brand-primary); border-color: var(--color-brand-primary); }
.btn--primary { background: var(--color-brand-gradient); color:#fff; box-shadow: 0 4px 14px -6px rgba(13,148,136,0.45); }
.btn--primary:hover:not(:disabled) { box-shadow: 0 6px 18px -6px rgba(13,148,136,0.55); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--color-text-secondary); }
.btn--ghost:hover:not(:disabled) { background: var(--color-surface-muted); color: var(--color-text-primary); }

/* Sizes */
.btn-sm { padding:.4rem .85rem; font-size:.8rem; gap:.4rem; }
.btn-lg { padding:.85rem 1.6rem; font-size:.95rem; }

/* ============ Icon buttons (unified) ============ */
/*
  Single class `.icon-btn` for any icon-only button.
  Modifiers: --sm, --danger, --active (for toggles), --solid (brand-filled)
  `.icon-chip` is a legacy alias kept working via this same base.
*/
.icon-btn, .icon-chip {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  border:1px solid transparent;
  border-radius:10px;
  background: transparent;
  color: var(--color-text-secondary);
  cursor:pointer;
  flex-shrink:0;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.icon-btn i, .icon-chip i { font-size: 1rem; line-height: 1; }
.icon-btn:hover, .icon-chip:hover {
  background: var(--color-surface-muted);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}
.icon-btn:active, .icon-chip:active { transform: scale(.95); }
.icon-btn:disabled, .icon-chip:disabled { opacity:.4; cursor:not-allowed; }

.icon-btn--sm, .icon-chip--sm { width:30px; height:30px; border-radius:8px; }
.icon-btn--sm i, .icon-chip--sm i { font-size:.85rem; }

.icon-btn--danger:hover, .icon-chip.danger:hover {
  color:#dc2626;
  background: rgba(220,38,38,0.08);
  border-color: rgba(220,38,38,0.25);
}

.icon-btn--active, .icon-btn.is-active {
  color: var(--color-brand-primary);
  background: rgba(13,148,136,0.08);
  border-color: rgba(13,148,136,0.25);
}

/* ============ Modal (delete confirm) ============ */
.modal-backdrop {
  position:fixed; inset:0; z-index:100;
  background: rgba(15,23,42,0.44);
  backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
  animation: mbFade .18s ease-out both;
}
[data-theme="dark"] .modal-backdrop { background: rgba(2,6,23,0.6); }
@keyframes mbFade { from { opacity:0; } to { opacity:1; } }

.modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  box-shadow: 0 28px 80px -20px rgba(15,23,42,0.35);
  padding: 1.6rem 1.7rem;
  width: min(520px, 100%);
  animation: modalIn .22s cubic-bezier(.32,.72,.3,1) both;
}
@keyframes modalIn { from { opacity:0; transform: translateY(8px) scale(.98); } to { opacity:1; transform: none; } }

.delete-modal__head { display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.1rem; }
.delete-modal__ico {
  flex:none; width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center;
  background: rgba(220,38,38,0.12);
  color:#dc2626;
  font-size:1.15rem;
}
.delete-modal__head h3 { margin:0 0 .3rem; font-size:1.15rem; font-weight:600; color: var(--color-text-primary); }
.delete-modal__head p  { margin:0; font-size:.88rem; color: var(--color-text-secondary); line-height:1.5; }

.delete-modal__facts {
  display:grid; grid-template-columns: repeat(3,1fr); gap:.6rem;
  padding:.75rem .9rem; margin-bottom:1rem;
  background: var(--color-surface-muted); border-radius:12px;
  border: 1px solid var(--color-border);
}
.delete-modal__facts > div { display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.delete-modal__facts span { font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color: var(--color-text-tertiary, var(--color-text-secondary)); }
.delete-modal__facts strong { font-size:.88rem; color: var(--color-text-primary); }
.delete-modal__facts code { font-size:.78rem; color: var(--color-text-primary); font-family: ui-monospace, "SF Mono", Menlo, monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.delete-modal__label { display:block; font-size:.82rem; color: var(--color-text-secondary); margin-bottom:.45rem; }
.delete-modal__label code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--color-surface-muted);
  padding:.08rem .4rem; border-radius:6px;
  color: var(--color-text-primary); font-size:.82rem;
  border:1px solid var(--color-border);
}
.delete-modal__input {
  width:100%; box-sizing:border-box;
  padding:.7rem .85rem;
  border:1px solid var(--color-border-strong);
  border-radius:10px;
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size:.9rem;
  transition: border-color .15s, box-shadow .15s;
}
.delete-modal__input:focus { outline:none; border-color:#dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.15); }
.delete-modal__input.is-valid { border-color:#16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,0.15); }

.delete-modal__foot { display:flex; justify-content:flex-end; gap:.5rem; margin-top:1.2rem; }

/* ============ Upload dropzone ============ */
.upload-dropzone {
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-hero);
  padding: 2.5rem;
  text-align:center;
  background: linear-gradient(180deg, var(--color-surface), var(--color-surface-muted));
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.upload-dropzone:hover { border-color: var(--color-brand-primary); }
.upload-dropzone .ico {
  width:64px; height:64px; border-radius:20px;
  background: rgba(37,99,235,0.10); color: var(--color-brand-primary);
  display:inline-flex; align-items:center; justify-content:center; font-size:1.6rem;
  margin-bottom: 1rem;
}
.upload-dropzone h3 { font-size:1.15rem; margin-bottom:.4rem; }
.format-pills { display:inline-flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem; justify-content:center; }
.format-pills span {
  font-family: var(--font-family-mono); font-size:.75rem;
  padding: .35rem .8rem; border-radius:999px;
  background: var(--color-surface-muted); color: var(--color-text-secondary);
  border:1px solid var(--color-border);
}

/* ============ Usage progress ============ */
.usage-progress {
  height: 8px; border-radius:999px;
  background: var(--color-surface-muted);
  overflow:hidden;
}
.usage-progress > span {
  display:block; height:100%;
  background: var(--color-brand-gradient);
  border-radius:999px;
}

/* ============ Data table ============ */
.table-card {
  background: var(--color-surface);
  border:1px solid var(--color-border);
  border-radius: var(--radius-hero);
  box-shadow: var(--shadow-sm);
  overflow:hidden;
}
.table-card__head {
  display:flex; justify-content:space-between; align-items:center;
  padding: 1.5rem 1.75rem;
  border-bottom: 1px solid var(--color-border);
}
.data-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.data-table thead th {
  text-align:left;
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--color-text-secondary); font-weight:600;
  padding: .85rem 1.75rem;
  background: var(--color-surface-muted);
}
.data-table tbody td { padding: 1rem 1.75rem; border-top: 1px solid var(--color-border); color: var(--color-text-primary); vertical-align: middle; }
.data-table tbody tr:hover { background: var(--color-surface-muted); }
.cell-mono { font-family: var(--font-family-mono); color: var(--color-text-secondary); font-size:.8rem; }
.btn-table-action {
  width:32px; height:32px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background: transparent; border:1px solid var(--color-border);
  color: var(--color-text-secondary); cursor:pointer;
  margin-left:.25rem;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.btn-table-action:hover { color: var(--color-brand-primary); border-color: var(--color-brand-primary); background: rgba(37,99,235,0.06); }
.btn-table-action.danger:hover { color: var(--color-danger); border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.06); }

/* ============ Email viewer (right pane) ============ */
.split { display:grid; grid-template-columns: 1fr 1.2fr; gap:1.5rem; align-items:start; }
@media (max-width: 1100px) { .split { grid-template-columns: 1fr; } }

.email-viewer {
  background: var(--color-surface);
  border:1px solid var(--color-border);
  border-radius: var(--radius-hero);
  box-shadow: var(--shadow-sm);
  overflow:hidden;
}
.email-viewer__head { padding: 1.5rem 1.75rem; border-bottom:1px solid var(--color-border); }
.email-viewer__subject { font-size:1.25rem; font-weight:700; }
.email-viewer__meta { display:flex; gap:1rem; flex-wrap:wrap; font-size:.8rem; color: var(--color-text-secondary); margin-top:.5rem; }
.email-viewer__body {
  padding: 1.75rem;
  font-family: var(--font-family-base);
  font-size: .95rem; line-height:1.65; color: var(--color-text-primary);
}
.email-viewer__body p { color: var(--color-text-primary); margin: 0 0 1rem; }
.email-viewer__attachments { padding: 0 1.75rem 1.75rem; display:flex; flex-wrap:wrap; gap:.5rem; }
.attachment-pill {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem .9rem; border-radius:999px;
  background: var(--color-surface-muted); border:1px solid var(--color-border);
  font-size:.8rem; color: var(--color-text-primary);
}
.attachment-pill i { color: var(--color-brand-primary); }

/* ============ Help menu ============ */
.help-wrap { position: relative; display: inline-flex; }
.help-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 340px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 20px 48px -16px rgba(15,23,42,.18);
  z-index: 1000;
  overflow: hidden;
  animation: help-menu-in .14s ease-out;
}
@keyframes help-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.help-menu__head { padding: .85rem 1rem .5rem; }
.help-menu__title {
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-text-muted); font-weight: 600;
}
.help-menu__list { display: flex; flex-direction: column; padding: .25rem; }
.help-menu__item {
  all: unset; cursor: pointer;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem;
  padding: .6rem .75rem; border-radius: 8px;
  transition: background .12s ease;
}
.help-menu__item:hover { background: var(--color-surface-muted); }
.help-menu__ico {
  color: var(--color-brand-primary); font-size: 1rem; width: 18px; text-align: center;
}
.help-menu__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.help-menu__label {
  font-weight: 600; font-size: .88rem; color: var(--color-text-primary);
  display: inline-flex; align-items: center; gap: .5rem;
}
.help-menu__sub { font-size: .75rem; color: var(--color-text-secondary); }
.help-menu__tag {
  font-size: .62rem; font-weight: 700;
  padding: 1px 7px; border-radius: 999px;
  background: var(--color-brand-primary); color: #fff;
  letter-spacing: .02em;
}
.help-menu__end {
  color: var(--color-text-muted); font-size: .8rem;
  display: inline-flex; align-items: center;
}
.help-menu__kbd, .sc-keys kbd {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .72rem; font-weight: 600;
  min-width: 22px; padding: 2px 6px;
  border: 1px solid var(--color-border);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  display: inline-flex; align-items: center; justify-content: center;
}
.help-menu__foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: .65rem 1rem;
  border-top: 1px solid var(--color-border);
  font-size: .72rem; color: var(--color-text-muted);
}
.help-menu__foot a {
  color: var(--color-text-secondary); text-decoration: none;
  display: inline-flex; align-items: center; gap: .4rem;
}
.help-menu__foot .status-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18);
}

/* ============ Help modal shell ============ */
.help-modal__backdrop {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(3px);
  display: grid; place-items: center;
  padding: 2rem;
  animation: help-fade .14s ease-out;
}
@keyframes help-fade { from { opacity: 0 } to { opacity: 1 } }
.help-modal {
  width: min(640px, 100%);
  max-height: calc(100vh - 4rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 30px 60px -20px rgba(15,23,42,.35);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: help-pop .16s ease-out;
}
@keyframes help-pop {
  from { opacity: 0; transform: translateY(6px) scale(.98) }
  to   { opacity: 1; transform: translateY(0) scale(1) }
}
.help-modal__head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  padding: 1.25rem 1.5rem .9rem;
  border-bottom: 1px solid var(--color-border);
}
.help-modal__head h3 {
  margin: 0; font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.help-modal__sub {
  margin: .25rem 0 0; font-size: .82rem; color: var(--color-text-secondary);
}
.help-modal__body { padding: 1.25rem 1.5rem 1.5rem; overflow: auto; }
.help-modal__foot {
  display: flex; justify-content: flex-end; gap: .5rem;
  margin-top: 1.25rem; padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

/* ============ Shortcuts ============ */
.sc-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.sc-group__name {
  margin: 0 0 .5rem; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-text-muted); font-weight: 600;
}
.sc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.sc-row {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--color-border);
}
.sc-row:last-child { border-bottom: 0; }
.sc-label { font-size: .88rem; color: var(--color-text-primary); }
.sc-keys { display: inline-flex; align-items: center; gap: .25rem; }

/* ============ Feedback ============ */
.fb-kinds { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.fb-kind {
  all: unset; cursor: pointer;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .85rem; border-radius: 999px;
  background: var(--color-surface-muted);
  border: 1px solid transparent;
  color: var(--color-text-secondary);
  font-size: .82rem; font-weight: 500;
  transition: all .12s ease;
}
.fb-kind:hover { color: var(--color-text-primary); }
.fb-kind.is-sel {
  background: color-mix(in oklch, var(--color-brand-primary) 10%, var(--color-surface));
  border-color: color-mix(in oklch, var(--color-brand-primary) 40%, transparent);
  color: var(--color-brand-primary);
}
.fb-kind i { font-size: .9rem; }
.fb-text {
  width: 100%; box-sizing: border-box;
  padding: .85rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-family: inherit; font-size: .9rem; color: var(--color-text-primary);
  resize: vertical; min-height: 120px;
  transition: border-color .12s ease;
}
.fb-text:focus {
  outline: none;
  border-color: var(--color-brand-primary);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-brand-primary) 15%, transparent);
}
.fb-meta { margin-top: .8rem; }
.fb-check {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; color: var(--color-text-secondary);
  cursor: pointer;
}
.fb-sent { text-align: center; padding: 2rem 0; }
.fb-sent__ico {
  width: 56px; height: 56px; border-radius: 999px;
  display: grid; place-items: center;
  background: color-mix(in oklch, #22c55e 15%, var(--color-surface));
  color: #22c55e; font-size: 1.8rem;
  margin: 0 auto 1rem;
}
.fb-sent p { font-size: 1rem; color: var(--color-text-primary); font-weight: 500; margin: 0; }

/* ============ Changelog ============ */
.cl-list { display: flex; flex-direction: column; gap: 1.75rem; }
.cl-rel__head {
  display: flex; align-items: baseline; gap: .6rem;
  padding-bottom: .5rem; border-bottom: 1px solid var(--color-border);
  margin-bottom: .75rem;
}
.cl-rel__v {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 600; font-size: .95rem; color: var(--color-text-primary);
  letter-spacing: -0.01em;
}
.cl-rel__date { font-size: .78rem; color: var(--color-text-muted); }
.cl-rel__tag {
  font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: color-mix(in oklch, var(--color-brand-primary) 15%, var(--color-surface));
  color: var(--color-brand-primary);
  margin-left: auto;
}
.cl-rel__items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.cl-rel__items li {
  position: relative;
  padding-left: 1.1rem;
  font-size: .88rem; color: var(--color-text-secondary);
  line-height: 1.5;
}
.cl-rel__items li::before {
  content: ''; position: absolute; left: 0; top: .55rem;
  width: 4px; height: 4px; border-radius: 999px;
  background: var(--color-brand-primary);
}


/* ============ Manage saved searches modal ============ */
.manage-modal {
  width: min(640px, 100%);
  padding: 0;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 4rem);
}
.manage-modal__head {
  display:flex; justify-content:space-between; align-items:flex-start; gap:1rem;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--color-border);
}
.manage-modal__head h3 { margin:0; font-size:1.05rem; font-weight:600; color: var(--color-text-primary); }
.manage-modal__head p  { margin:.25rem 0 0; font-size:.82rem; color: var(--color-text-secondary); }
.manage-modal__close {
  background:transparent; border:none; cursor:pointer;
  width:32px; height:32px; border-radius:8px;
  color: var(--color-text-tertiary, var(--color-text-secondary));
  display:grid; place-items:center;
  transition: background .15s, color .15s;
}
.manage-modal__close:hover { background: var(--color-surface-muted); color: var(--color-text-primary); }

.manage-modal__body { padding: .8rem 1.5rem 1rem; overflow:auto; }

.manage-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; }
.manage-row {
  display:grid;
  grid-template-columns: auto auto 1fr auto auto;
  gap:.85rem;
  align-items:center;
  padding:.6rem .2rem;
  border-bottom: 1px solid var(--color-border);
}
.manage-row:last-child { border-bottom: none; }
.manage-row__reorder { display:flex; flex-direction:column; gap:2px; }
.manage-row__rbtn {
  background:transparent; border:1px solid transparent;
  width:20px; height:16px; border-radius:4px;
  display:grid; place-items:center; cursor:pointer;
  color: var(--color-text-tertiary, var(--color-text-secondary));
  font-size:.65rem;
  transition: background .12s, color .12s;
}
.manage-row__rbtn:hover:not(:disabled) { background: var(--color-surface-muted); color: var(--color-text-primary); }
.manage-row__rbtn:disabled { opacity:.3; cursor:not-allowed; }

.manage-row__icon { color: var(--color-brand-primary); font-size:.9rem; }

.manage-row__body { min-width:0; }
.manage-row__name {
  font-size:.9rem; font-weight:500; color: var(--color-text-primary);
  cursor: text;
  display:flex; align-items:center; gap:.5rem;
}
.manage-row__name:hover { color: var(--color-brand-primary); }
.manage-row__badge {
  font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; font-weight:600;
  padding:.1rem .4rem; border-radius:4px;
  background: rgba(13,148,136,0.12); color: var(--color-brand-primary);
}
.manage-row__desc {
  font-size:.74rem; color: var(--color-text-secondary);
  margin-top:.15rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.manage-row__input {
  width:100%; font-size:.9rem; font-weight:500;
  padding:.3rem .5rem; border-radius:6px;
  border: 1px solid var(--color-brand-primary);
  background: var(--color-surface);
  color: var(--color-text-primary);
  outline:none;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.12);
}
.manage-row__count {
  font-size:.78rem; color: var(--color-text-tertiary, var(--color-text-secondary));
  font-variant-numeric: tabular-nums;
}
.manage-row__actions { display:flex; gap:.15rem; }
.manage-row__abtn {
  background:transparent; border:none; cursor:pointer;
  width:28px; height:28px; border-radius:6px;
  display:grid; place-items:center;
  color: var(--color-text-tertiary, var(--color-text-secondary));
  transition: background .12s, color .12s;
}
.manage-row__abtn:hover { background: var(--color-surface-muted); color: var(--color-text-primary); }
.manage-row__abtn--danger:hover { background: rgba(220,38,38,0.1); color:#dc2626; }

.manage-new {
  display:flex; align-items:center; gap:.6rem;
  padding:.75rem .85rem;
  border: 1px dashed var(--color-border-strong);
  border-radius:10px;
  margin-top: 1rem;
  background: var(--color-surface-muted);
}
.manage-new i { color: var(--color-text-tertiary, var(--color-text-secondary)); }
.manage-new input {
  flex:1; background:transparent; border:none; outline:none;
  font-size:.88rem; color: var(--color-text-primary);
}
.manage-new input::placeholder { color: var(--color-text-tertiary, var(--color-text-secondary)); }
.manage-new__cta {
  background: var(--color-brand-primary); color:#fff; border:none;
  padding:.4rem .9rem; border-radius:999px;
  font-size:.78rem; font-weight:500; cursor:pointer;
  transition: opacity .15s;
}
.manage-new__cta:disabled { opacity:.4; cursor:not-allowed; }

.manage-modal__foot {
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-muted);
  border-radius: 0 0 16px 16px;
}
.manage-modal__hint { font-size:.75rem; color: var(--color-text-secondary); }