/* ── Base variables (Midnight theme / fallback) ──────────── */
:root {
  --bg:        #060d1b;
  --surface:   #0c1628;
  --card:      #101e36;
  --card2:     #152444;
  --border:    #1c2f50;
  --border2:   #263d66;
  --txt:       #dde8f8;
  --txt2:      #7fa0c4;
  --txt3:      #3d5a7a;
  --blue:      #3d85f5;
  --indigo:    #6366f1;
  --green:     #22c55e;
  --red:       #f43f5e;
  --amber:     #f59e0b;
  --plex:      #e5a00d;
  --discord:   #5865f2;
  --mc:        #4ade80;
  --cyan:      #22d3ee;
}

/* ── Themes ──────────────────────────────────────────────── */
[data-theme="midnight"] {
  --bg:#060d1b; --surface:#0c1628; --card:#101e36; --card2:#152444;
  --border:#1c2f50; --border2:#263d66;
  --txt:#dde8f8; --txt2:#7fa0c4; --txt3:#3d5a7a;
  --blue:#3d85f5; --indigo:#6366f1;
}
[data-theme="void"] {
  --bg:#000000; --surface:#0a0a0a; --card:#111111; --card2:#1a1a1a;
  --border:#222222; --border2:#333333;
  --txt:#f0f0f0; --txt2:#888888; --txt3:#444444;
  --blue:#ffffff; --indigo:#cccccc;
}
[data-theme="forest"] {
  --bg:#020f07; --surface:#061409; --card:#0a1e0e; --card2:#0e2813;
  --border:#163820; --border2:#1e4d2c;
  --txt:#d6f0de; --txt2:#6fa87e; --txt3:#2e5438;
  --blue:#22c55e; --indigo:#16a34a;
}
[data-theme="crimson"] {
  --bg:#0f0205; --surface:#190308; --card:#220409; --card2:#2c050c;
  --border:#3d0812; --border2:#55101b;
  --txt:#fde8ec; --txt2:#c4647a; --txt3:#6b2535;
  --blue:#f43f5e; --indigo:#e11d48;
}
[data-theme="aurora"] {
  --bg:#07040f; --surface:#0f0820; --card:#160c30; --card2:#1c1040;
  --border:#2d1a60; --border2:#3d2480;
  --txt:#ede8ff; --txt2:#9d88cc; --txt3:#4d3880;
  --blue:#a78bfa; --indigo:#8b5cf6;
}
[data-theme="ember"] {
  --bg:#0d0800; --surface:#180f00; --card:#201400; --card2:#2a1c00;
  --border:#3d2800; --border2:#553800;
  --txt:#fef3e2; --txt2:#c4a064; --txt3:#6b5030;
  --blue:#f59e0b; --indigo:#d97706;
}
[data-theme="slate"] {
  --bg:#080c10; --surface:#0f1520; --card:#141d2b; --card2:#1a2535;
  --border:#232f42; --border2:#2e3f58;
  --txt:#e2e8f0; --txt2:#7d95af; --txt3:#3a4d62;
  --blue:#64748b; --indigo:#475569;
}
[data-theme="neon"] {
  --bg:#020408; --surface:#040810; --card:#060c18; --card2:#081020;
  --border:#0a1830; --border2:#0e2040;
  --txt:#e0f8ff; --txt2:#40b8d8; --txt3:#1a5068;
  --blue:#00d4ff; --indigo:#b800ff;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--txt);
  min-height: 100vh;
  overflow-x: hidden;
}
body::after {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 15% 10%, rgba(61,133,245,.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 85% 90%, rgba(99,102,241,.06) 0%, transparent 60%);
  pointer-events: none; z-index: 0;
}

/* ── Header ──────────────────────────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(6,13,27,.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: .875rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
}
.logo { display: flex; align-items: center; gap: .625rem; }
.logo-pulse {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 10px var(--blue);
  animation: logopulse 3s ease-in-out infinite;
}
@keyframes logopulse {
  0%,100% { box-shadow: 0 0 8px var(--blue); }
  50%      { box-shadow: 0 0 18px var(--blue); }
}
.logo-text { font-size: 1rem; font-weight: 700; letter-spacing: -.02em; }

/* ── Grid ────────────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.125rem;
  position: relative; z-index: 1;
}
.sz-s { grid-column: span 1; }
.sz-m { grid-column: span 2; }
.sz-l { grid-column: span 3; }
.wide { grid-column: span 3; } /* backward-compat alias */

@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .sz-l, .wide { grid-column: span 2; }
}
@media (max-width: 600px) {
  .grid { grid-template-columns: 1fr; }
  .sz-m, .sz-l, .wide { grid-column: span 1; }
}

/* ── Panel ───────────────────────────────────────────────── */
.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.375rem;
  position: relative; overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.panel:hover { border-color: var(--border2); box-shadow: 0 4px 30px rgba(0,0,0,.25); }
.panel-accent {
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px; border-radius: 18px 18px 0 0;
}
.acc-plex    { background: linear-gradient(90deg,#e5a00d,#ff7c00); }
.acc-bot     { background: linear-gradient(90deg,#5865f2,#7c3aed); }
.acc-mc      { background: linear-gradient(90deg,#4ade80,#16a34a); }
.acc-sys     { background: linear-gradient(90deg,#22d3ee,#3b82f6); }
.acc-custom  { background: linear-gradient(90deg,var(--blue),var(--indigo)); }

/* Panel states */
.panel.collapsed { padding-bottom: .875rem; }
.panel.collapsed .panel-body { display: none; }
.panel.collapsed .collapse-chevron { transform: rotate(-180deg); }
.panel.hidden-panel { display: none; }
.collapse-chevron { transition: transform .2s ease; display: inline-block; }

/* Panel controls */
.panel-controls {
  display: flex; align-items: center; gap: .4rem;
  flex-shrink: 0; position: relative;
}
.ctrl-btn {
  background: none; border: none; cursor: pointer;
  color: var(--txt3); padding: .2rem .3rem;
  border-radius: 6px; font-size: .78rem;
  transition: color .15s, background .15s;
  line-height: 1; position: relative;
}
.ctrl-btn:hover { color: var(--txt2); background: var(--card2); }
.size-badge {
  font-size: .62rem; font-weight: 700; letter-spacing: .04em;
  padding: .15rem .4rem; border-radius: 4px;
  background: var(--card2); border: 1px solid var(--border);
  color: var(--txt2); cursor: pointer;
  transition: all .15s; font-family: inherit; line-height: 1.4;
}
.size-badge:hover { border-color: var(--border2); color: var(--txt); }
.accent-picker-input {
  position: absolute; width: 0; height: 0;
  opacity: 0; pointer-events: none; top: 100%; left: 0;
}

/* drag */
.drag-handle { cursor: grab; color: var(--txt3); transition: color .15s; padding: .2rem .3rem; }
.drag-handle:hover { color: var(--txt2); }
.drag-handle:active { cursor: grabbing; }
.sortable-ghost { opacity: .35; }
.sortable-drag  { transform: rotate(1.5deg) scale(1.02); box-shadow: 0 24px 60px rgba(0,0,0,.5); z-index: 300; }

/* panel icon */
.p-icon {
  width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.ic-plex    { background: rgba(229,160,13,.12); color: var(--plex); }
.ic-bot     { background: rgba(88,101,242,.15); color: var(--discord); }
.ic-mc      { background: rgba(74,222,128,.1);  color: var(--mc); }
.ic-sys     { background: rgba(34,211,238,.1);  color: var(--cyan); }
.ic-dl      { background: rgba(61,133,245,.12); color: var(--blue); }
.ic-custom  { background: rgba(61,133,245,.12); color: var(--blue); }

/* status */
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-on  { background: var(--green); box-shadow: 0 0 6px var(--green); animation: blink 2.5s ease-in-out infinite; }
.dot-off { background: var(--red); }
.dot-warn{ background: var(--amber); }
.dot-dim { background: var(--txt3); }
@keyframes blink {
  0%,100% { box-shadow: 0 0 5px var(--green); }
  50%      { box-shadow: 0 0 12px var(--green); }
}

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .45rem .9rem; border-radius: 9px;
  font-size: .78rem; font-weight: 500; cursor: pointer;
  border: 1px solid transparent; transition: all .15s;
  text-decoration: none; white-space: nowrap;
}
.btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn-green  { background: rgba(34,197,94,.1);   border-color: rgba(34,197,94,.25);  color: #4ade80; }
.btn-green:hover  { background: rgba(34,197,94,.2); }
.btn-red    { background: rgba(244,63,94,.09);  border-color: rgba(244,63,94,.25);  color: #fb7185; }
.btn-red:hover    { background: rgba(244,63,94,.18); }
.btn-amber  { background: rgba(245,158,11,.09); border-color: rgba(245,158,11,.25); color: #fbbf24; }
.btn-amber:hover  { background: rgba(245,158,11,.18); }
.btn-blue   { background: rgba(61,133,245,.1);  border-color: rgba(61,133,245,.25); color: #7aabff; }
.btn-blue:hover   { background: rgba(61,133,245,.2); }
.btn-ghost  { background: transparent; border-color: var(--border); color: var(--txt2); }
.btn-ghost:hover  { background: var(--card2); border-color: var(--border2); }

/* progress bars */
.bar-wrap { background: var(--surface); border-radius: 99px; height: 5px; overflow: hidden; }
.bar { height: 100%; border-radius: 99px; transition: width .6s ease; }

/* ── Login ───────────────────────────────────────────────── */
#login-page {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}
.login-card {
  width: 100%; max-width: 360px; margin: 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 2.25rem 2rem;
}
.pin-row { display: flex; gap: .75rem; justify-content: center; }
.pin-box {
  width: 3rem; height: 3.5rem; border-radius: 13px;
  background: var(--surface); border: 2px solid var(--border);
  font-size: 1.6rem; font-weight: 700; text-align: center;
  color: var(--txt); outline: none; transition: border-color .15s;
  caret-color: transparent;
}
.pin-box:focus { border-color: var(--blue); }
.pin-box.err   { border-color: var(--red); animation: shake .35s ease; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}

/* ── Toast ───────────────────────────────────────────────── */
#toasts { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 900; display: flex; flex-direction: column; gap: .5rem; }
.toast {
  display: flex; align-items: center; gap: .5rem;
  padding: .65rem 1.1rem; border-radius: 11px;
  font-size: .82rem; font-weight: 500;
  animation: toastin .25s ease;
}
@keyframes toastin { from { transform: translateX(60px); opacity: 0; } to { transform: none; opacity: 1; } }
.toast-ok  { background: rgba(34,197,94,.12);  border: 1px solid rgba(34,197,94,.3);  color: #4ade80; }
.toast-err { background: rgba(244,63,94,.12);  border: 1px solid rgba(244,63,94,.3);  color: #fb7185; }
.toast-inf { background: rgba(61,133,245,.12); border: 1px solid rgba(61,133,245,.3); color: #7aabff; }

/* ── Add Panel Modal ─────────────────────────────────────── */
.modal-bg {
  position: fixed; inset: 0; z-index: 800;
  background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.modal {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 20px; padding: 2rem;
  width: 100%; max-width: 400px; margin: 1rem;
}
.field {
  width: 100%; padding: .55rem .875rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 9px; color: var(--txt); font-size: .875rem; outline: none;
  transition: border-color .15s;
}
.field:focus { border-color: var(--blue); }

/* misc */
.spin { animation: spinning 1s linear infinite; display: inline-block; }
@keyframes spinning { to { transform: rotate(360deg); } }
.sep { width: 100%; height: 1px; background: var(--border); margin: 1rem 0; }

/* ── Settings drawer ─────────────────────────────────────── */
#settings-overlay {
  position: fixed; inset: 0; z-index: 490;
  background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
body.settings-open #settings-overlay { opacity: 1; pointer-events: auto; }
#settings-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 320px; z-index: 500;
  background: var(--card);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .25s ease;
}
body.settings-open #settings-drawer { transform: translateX(0); }
.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.25rem .875rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.drawer-header h3 { font-size: .95rem; font-weight: 600; }
.drawer-body {
  overflow-y: auto; flex: 1;
  padding: 1rem 1.25rem;
  display: flex; flex-direction: column; gap: 1.25rem;
}
.drawer-section-title {
  font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--txt3); margin-bottom: .75rem;
}

/* Theme swatches */
.theme-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
}
.theme-swatch {
  border-radius: 10px; padding: .5rem .25rem;
  border: 2px solid transparent;
  cursor: pointer; text-align: center;
  transition: border-color .15s, transform .1s;
  display: flex; flex-direction: column;
  align-items: center; gap: .3rem;
  background: var(--card2);
}
.theme-swatch:hover { transform: scale(1.05); }
.theme-swatch.active { border-color: var(--blue); }
.swatch-dot {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.15);
}

/* Panel visibility toggles */
.panel-toggle-row {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: .45rem 0;
  border-bottom: 1px solid var(--border);
}
.panel-toggle-row:last-child { border-bottom: none; }
.panel-toggle-label {
  display: flex; align-items: center; gap: .5rem;
  font-size: .83rem; color: var(--txt2);
}
.toggle-switch {
  position: relative; width: 34px; height: 18px;
  flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-track {
  position: absolute; inset: 0;
  background: var(--border2); border-radius: 99px;
  cursor: pointer; transition: background .2s;
}
.toggle-switch input:checked + .toggle-track { background: var(--blue); }
.toggle-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; transition: transform .2s;
  pointer-events: none;
}
.toggle-switch input:checked ~ .toggle-thumb { transform: translateX(16px); }

/* ── Download Manager ───────────────────────────────────── */
.acc-dl      { background: linear-gradient(90deg,#3d85f5,#06b6d4); }

/* Filter chips */
.dl-filters  { display:flex; gap:.3rem; margin-bottom:.5rem; flex-wrap:wrap; }
.dl-filter   { background:var(--card2); border:1px solid var(--border); border-radius:6px;
               padding:.22rem .6rem; font-size:.7rem; cursor:pointer; color:var(--txt2);
               font-family:inherit; transition:all .15s; display:inline-flex; align-items:center; gap:.3rem; }
.dl-filter:hover { border-color:var(--border2); color:var(--txt); }
.dl-filter.active { background:var(--blue); border-color:var(--blue); color:#fff; }
.dl-filter-history { margin-left:auto; }
.dl-fc       { background:rgba(255,255,255,.12); border-radius:3px;
               padding:.05rem .3rem; font-size:.65rem; font-weight:600; min-width:1.2rem; text-align:center; }

/* Column header row */
.dl-col-header {
  display:flex; align-items:center; gap:.4rem;
  padding:.3rem .5rem; margin-bottom:.2rem;
  font-size:.65rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; color:var(--txt3);
  border-bottom:1px solid var(--border);
}
.dl-col-sm { width:5.5rem; text-align:right; flex-shrink:0; }

/* Torrent rows (new rich layout) */
.dl-row2 {
  display:flex; align-items:center; gap:.4rem;
  padding:.5rem .5rem; border-bottom:1px solid var(--border);
  transition:background .1s;
}
.dl-row2:last-child { border-bottom:none; }
.dl-row2:hover { background:var(--card2); border-radius:8px; }
.dl-row2-main { flex:1; min-width:0; overflow:hidden; }
.dl-name2 { font-size:.79rem; font-weight:600; white-space:nowrap;
            overflow:hidden; text-overflow:ellipsis; }
.dl-pb2   { height:3px; background:var(--border2); border-radius:2px; overflow:hidden; margin:.25rem 0 .15rem; }
.dl-val   { font-size:.72rem; color:var(--txt2); font-variant-numeric:tabular-nums;
            width:5.5rem; text-align:right; flex-shrink:0; }
.dl-meta  { font-size:.68rem; color:var(--txt3); }
.dl-cat   { color:var(--plex); }

/* History rows */
.dl-hist-row {
  display:flex; align-items:flex-start; gap:.6rem;
  padding:.45rem .5rem; border-bottom:1px solid var(--border);
}
.dl-hist-row:last-child { border-bottom:none; }

/* Status badges */
.dl-state-badge { font-size:.62rem; padding:.15rem .4rem; border-radius:4px;
                  background:var(--card2); border:1px solid var(--border);
                  color:var(--txt3); flex-shrink:0; font-weight:500; }
.badge-seed  { background:rgba(34,197,94,.1);   border-color:rgba(34,197,94,.25);  color:#4ade80; }
.badge-err   { background:rgba(244,63,94,.1);   border-color:rgba(244,63,94,.25);  color:#fb7185; }
.badge-pause { background:rgba(245,158,11,.1);  border-color:rgba(245,158,11,.25); color:#fbbf24; }
.badge-dl    { background:rgba(61,133,245,.1);  border-color:rgba(61,133,245,.25); color:#7aabff; }

/* Scrollable list */
#dl-list, #dl-history-list { max-height:320px; overflow-y:auto; }

/* ── Activity feed ──────────────────────────────────────── */
.acc-activity { background: linear-gradient(90deg,#a78bfa,#22d3ee); }
.ic-activity  { background: rgba(167,139,250,.12); color: #a78bfa; }

#activity-list { max-height: 360px; overflow-y: auto; padding-right: .25rem; }
.act-row {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .55rem .25rem; border-bottom: 1px solid var(--border);
}
.act-row:last-child { border-bottom: none; }
.act-row:hover     { background: var(--card2); border-radius: 8px; }
.act-icon {
  width: 24px; height: 24px; flex-shrink: 0; margin-top: .15rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: .7rem;
}
.act-icon.ic-approve   { background:rgba(34,197,94,.12);  color:#4ade80; }
.act-icon.ic-deny      { background:rgba(244,63,94,.12);  color:#fb7185; }
.act-icon.ic-fail      { background:rgba(244,63,94,.12);  color:#fb7185; }
.act-icon.ic-grab      { background:rgba(245,158,11,.12); color:#fbbf24; }
.act-icon.ic-import    { background:rgba(34,211,238,.12); color:#22d3ee; }
.act-icon.ic-fulfill   { background:rgba(34,197,94,.18);  color:#4ade80; }
.act-icon.ic-scan      { background:rgba(229,160,13,.12); color:var(--plex); }
.act-icon.ic-other     { background:rgba(99,102,241,.12); color:var(--indigo); }

.act-body  { flex: 1; min-width: 0; }
.act-line  { font-size: .82rem; color: var(--txt); }
.act-title { font-weight: 600; }
.act-meta  { font-size: .68rem; color: var(--txt3); margin-top: .15rem;
             display: flex; gap: .65rem; align-items: center; }
.act-actor { color: var(--txt2); }
.act-empty { font-size: .78rem; color: var(--txt3); padding: .5rem 0; }

/* ── Request lifecycle state pills ─────────────────────── */
.req-pill {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .62rem; font-weight: 600;
  padding: .15rem .45rem; border-radius: 99px;
  background: var(--card2); border: 1px solid var(--border);
  color: var(--txt3); white-space: nowrap;
  text-transform: uppercase; letter-spacing: .04em;
}
.req-pill .fa-circle { font-size: .35rem; }
.pill-pending  { color:#fbbf24; border-color:rgba(245,158,11,.3); background:rgba(245,158,11,.08); }
.pill-approved { color:#7aabff; border-color:rgba(61,133,245,.3); background:rgba(61,133,245,.08); }
.pill-radarr   { color:#7aabff; border-color:rgba(61,133,245,.3); background:rgba(61,133,245,.08); }
.pill-search   { color:#fbbf24; border-color:rgba(245,158,11,.3); background:rgba(245,158,11,.08); }
.pill-download { color:#22d3ee; border-color:rgba(34,211,238,.3); background:rgba(34,211,238,.08); }
.pill-imported { color:#22d3ee; border-color:rgba(34,211,238,.3); background:rgba(34,211,238,.12); }
.pill-fulfilled{ color:#4ade80; border-color:rgba(34,197,94,.3); background:rgba(34,197,94,.1); }
.pill-failed   { color:#fb7185; border-color:rgba(244,63,94,.3); background:rgba(244,63,94,.1); }
.pill-denied   { color:var(--txt3); border-color:var(--border); background:var(--card2); }
/* Pulse for active in-flight states (searching, downloading) */
.pill-pulse { animation: pulsate 1.8s ease-in-out infinite; }
@keyframes pulsate {
  0%,100% { opacity: 1; }
  50%      { opacity: .55; }
}

/* Legacy compat */
.dl-row      { display:flex; align-items:center; gap:.5rem; padding:.4rem 0;
               border-bottom:1px solid var(--border); }
.dl-row:last-child { border-bottom:none; }
.dl-name     { font-size:.8rem; font-weight:600; white-space:nowrap;
               overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; }
.dl-progress-wrap { margin:.25rem 0; }
.dl-progress-bar  { height:4px; background:var(--border2); border-radius:2px; overflow:hidden; }
.dl-progress-fill { height:100%; background:var(--blue); border-radius:2px; transition:width .6s ease; }
.dl-progress-fill.seeding { background:var(--green); }
.dl-progress-fill.error   { background:var(--red); }
.dl-empty    { font-size:.78rem; color:var(--txt3); padding:.5rem 0; }
.dl-err      { font-size:.68rem; color:var(--red); margin-top:.15rem; }