/* Missa dos Amigos — mesmo esqueleto da Gestão Integrada (Gramiscelli), com paleta litúrgica: bordô, dourado e marfim */
:root {
  --wine-950: #16070c; --wine-900: #240c13; --wine-800: #35121c; --wine-700: #521a28; --wine: #6e2133; --wine-600: #842a3e;
  --wine-100: #f5e8ea; --wine-50: #fbf4f5;
  --gold: #c6a15b; --gold-2: #e3c98f; --gold-50: #fbf6ea; --ivory: #f7f1e3;
  --bg: #f6f3ee; --card: #ffffff; --line: #e8e2d8; --line-2: #f0ebe3;
  --ink: #241b1d; --ink-2: #4e4446; --ink-3: #85797b; --ink-4: #b5abac;
  --red: #b3261e; --red-50: #fcebea; --amber: #9a6b12; --amber-50: #fbf2df; --ok: #2f7d4f; --ok-50: #e7f3ec;
  /* cores litúrgicas */
  --lt-verde: #2f7d4f; --lt-roxo: #6b3fa0; --lt-branco: #c6a15b; --lt-vermelho: #b3261e; --lt-rosa: #cf5f8c;
  --sans: "Inter", -apple-system, system-ui, sans-serif; --serif: "Cormorant Garamond", Georgia, serif; --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --radius: 12px; --shadow: 0 1px 2px rgba(40,20,24,.05), 0 8px 24px -12px rgba(40,20,24,.14);
  --top: 58px; --side: 260px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 14px; -webkit-font-smoothing: antialiased; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
input, button, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }
.mono { font-family: var(--mono); font-size: .88em; }
.muted { color: var(--ink-3); }
.serif { font-family: var(--serif); }

/* ---------- Login ---------- */
.login { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; color: var(--ivory); color-scheme: dark;
  background: radial-gradient(120% 70% at 80% 0%, rgba(198,161,91,.14), transparent 50%), radial-gradient(90% 60% at 0% 100%, rgba(132,42,62,.35), transparent 60%), linear-gradient(180deg, #2a0e16, #12060a); }
.login-card { position: relative; overflow: hidden; width: min(400px, 100%); padding: 40px 34px 28px; text-align: center; border-radius: 22px; border: 1px solid rgba(198,161,91,.3);
  background: linear-gradient(180deg, rgba(48,16,25,.94), rgba(22,8,12,.97)); box-shadow: 0 40px 100px rgba(0,0,0,.55), inset 0 1px 0 rgba(247,241,227,.06); animation: cardIn .7s cubic-bezier(.22,1,.36,1) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.login-glow { position: absolute; top: -45%; left: 50%; width: 340px; height: 340px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(198,161,91,.22), transparent 62%); pointer-events: none; }
.login-logo { position: relative; width: 74px; height: 74px; margin: 0 auto 10px; display: block; }
.login-title { position: relative; margin: 0; font-family: var(--serif); font-size: 34px; font-weight: 600; letter-spacing: .01em; color: var(--ivory); }
.login-sub { position: relative; margin: 4px 0 26px; color: var(--gold); font-size: .68rem; letter-spacing: .32em; text-transform: uppercase; }
.gate { position: relative; display: flex; flex-direction: column; gap: 12px; }
.gate input[type=text], .gate input[type=password] { width: 100%; padding: 14px 16px; border-radius: 10px; border: 1px solid rgba(247,241,227,.18); background: rgba(247,241,227,.05); color: var(--ivory); font-size: 15px; transition: border-color .2s, background .2s; }
.gate input::placeholder { color: rgba(247,241,227,.4); }
.gate input:focus { outline: none; border-color: var(--gold); background: rgba(247,241,227,.08); }
.btn-login { width: 100%; padding: 14px; margin-top: 4px; border-radius: 10px; background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #2a1a08; font-weight: 600; font-size: 15px; }
.btn-login:disabled { opacity: .6; }
.login-err { position: relative; color: #f0a9a0; margin: 14px 0 0; font-size: 13px; }
.remember { display: flex; align-items: center; gap: 9px; margin: -2px 0 0 2px; color: rgba(247,241,227,.6); font-size: 12.5px; text-align: left; cursor: pointer; }
.remember input { width: 15px; height: 15px; accent-color: var(--gold); margin: 0; }
.login-verse { position: relative; margin: 26px 0 0; color: rgba(247,241,227,.45); font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.45; }
.login-verse span { display: block; margin-top: 4px; font-family: var(--sans); font-style: normal; font-size: 10.5px; letter-spacing: .2em; color: rgba(198,161,91,.7); }
.pw { position: relative; display: flex; }
.pw input { flex: 1; padding-right: 46px !important; }
.eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 32px; display: grid; place-items: center; border-radius: 7px; color: var(--ink-3); }
.gate .eye { color: rgba(247,241,227,.5); }
.gate .eye:hover { color: var(--gold); }

/* ---------- Shell ---------- */
.topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--top); z-index: 20; display: flex; align-items: center; gap: 18px; padding: 0 16px; color: var(--ivory);
  background: radial-gradient(90% 140% at 0% 0%, rgba(198,161,91,.16), transparent 55%), linear-gradient(90deg, #1c080e, #2f0f18 55%, #3d1520); border-bottom: 1px solid rgba(198,161,91,.35); }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, var(--gold), rgba(198,161,91,.15) 45%, transparent 80%); }
.brand { display: flex; align-items: center; gap: 11px; flex: none; width: calc(var(--side) - 32px); }
.brand img { width: 34px; height: 34px; }
.brand-name { font-family: var(--serif); font-size: 21px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.global-search { flex: 0 1 460px; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px 0 12px; border-radius: 9px; background: rgba(247,241,227,.05); border: 1px solid rgba(198,161,91,.22); color: rgba(247,241,227,.55); }
.global-search:focus-within { border-color: rgba(198,161,91,.7); background: rgba(247,241,227,.08); color: var(--ivory); }
.global-search svg { width: 15px; height: 15px; color: var(--gold); }
.global-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--ivory); font-size: 13.5px; }
.global-search input::placeholder { color: rgba(247,241,227,.42); }
.global-search kbd { font-family: var(--mono); font-size: 10.5px; color: rgba(247,241,227,.45); border: 1px solid rgba(247,241,227,.18); border-radius: 4px; padding: 1px 5px; }
.top-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.tempo-hoje { display: inline-flex; align-items: center; gap: 8px; margin-right: 10px; padding-right: 16px; border-right: 1px solid rgba(198,161,91,.3); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-2); white-space: nowrap; }
.tempo-hoje .lt-dot { box-shadow: 0 0 0 3px rgba(247,241,227,.08); }
.icon-btn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; color: rgba(247,241,227,.75); }
.icon-btn:hover { background: rgba(247,241,227,.08); color: var(--ivory); }
.user-wrap { position: relative; }
.user { display: flex; align-items: center; gap: 10px; padding: 3px 3px 3px 10px; border-radius: 999px; }
.user:hover { background: rgba(247,241,227,.08); }
.user-name { font-size: 12.5px; color: rgba(247,241,227,.78); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #2a1a08; font-weight: 700; font-size: 12.5px; display: grid; place-items: center; }
.user-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 240px; padding: 6px; border-radius: 12px; background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: 0 18px 50px -12px rgba(0,0,0,.35); animation: cardIn .18s cubic-bezier(.22,1,.36,1) both; }
.user-menu-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--line-2); margin-bottom: 6px; }
.user-menu-head b { display: block; }
.user-menu-head span { font-size: 12px; color: var(--ink-3); text-transform: capitalize; }
.user-menu button { display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 12px; border-radius: 8px; font-size: 13.5px; color: var(--ink-2); }
.user-menu button:hover { background: var(--wine-50); color: var(--wine); }

.side { position: fixed; top: var(--top); left: 0; bottom: 0; width: var(--side); z-index: 30; display: flex; flex-direction: column; gap: 2px; padding: 20px 14px 14px; overflow-y: auto;
  background: linear-gradient(180deg, #2a0e16, #170709); border-right: 1px solid rgba(198,161,91,.16); color: rgba(247,241,227,.72); }
.side-sec { padding: 0 12px; margin: 14px 0 8px; color: var(--gold); font-size: 10.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.side-sec:first-child { margin-top: 0; }
.nav { display: flex; align-items: center; gap: 12px; width: 100%; height: 42px; padding: 0 12px; border-radius: 10px; font-size: 14px; color: rgba(247,241,227,.75); transition: background .15s, color .15s; }
.nav svg { width: 17px; height: 17px; color: rgba(247,241,227,.5); }
.nav:hover { background: rgba(247,241,227,.06); color: var(--ivory); }
.nav.active { background: rgba(198,161,91,.14); color: var(--ivory); font-weight: 600; box-shadow: inset 3px 0 0 var(--gold); }
.nav.active svg { color: var(--gold-2); }
.nav .n { margin-left: auto; font-family: var(--mono); font-size: 10.5px; opacity: .55; }
.nav.cta { margin: 4px 0 6px; background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #2a1a08; font-weight: 600; justify-content: center; }
.nav.cta svg { color: #2a1a08; }
.nav.cta:hover { filter: brightness(1.05); }
.side-foot { margin-top: auto; padding: 14px 12px 4px; border-top: 1px solid rgba(198,161,91,.16); font-family: var(--serif); font-style: italic; font-size: 14px; line-height: 1.4; color: rgba(247,241,227,.45); }
.side-foot small { display: block; margin-top: 3px; font-family: var(--sans); font-style: normal; font-size: 10px; letter-spacing: .18em; color: rgba(198,161,91,.6); }
.side-backdrop { display: none; }
.menu-btn { display: none; }

.main { padding: calc(var(--top) + 24px) 26px 48px calc(var(--side) + 26px); max-width: calc(var(--side) + 1240px); }
.page { display: flex; flex-direction: column; gap: 16px; animation: fadeIn .25s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- Cabeçalho de página ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 2px 2px 4px; }
.crumb { margin: 0 0 4px; color: var(--gold); font-size: 10.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.crumb a:hover { color: var(--wine); }
h1 { margin: 0; font-family: var(--serif); font-size: 34px; font-weight: 600; line-height: 1.05; letter-spacing: -.005em; color: var(--wine-800); }
h2 { margin: 0; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
h2.serif { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--wine-800); }
.page-sub { margin: 6px 0 0; color: var(--ink-3); font-size: 13.5px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 9px; font-weight: 600; font-size: 13.5px; white-space: nowrap; transition: background .15s, border-color .15s, color .15s, transform .05s; }
.btn svg { width: 16px; height: 16px; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-primary { background: var(--wine); color: #fff; }
.btn-primary:hover { background: var(--wine-700); }
.btn-gold { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #2a1a08; }
.btn-gold:hover { filter: brightness(1.04); }
.btn-ghost { border: 1px solid var(--line); background: #fff; color: var(--ink-2); font-weight: 500; }
.btn-ghost:hover { border-color: var(--ink-4); color: var(--ink); }
.btn-danger { border: 1px solid #efc6c2; background: #fff; color: var(--red); font-weight: 500; }
.btn-danger:hover { background: var(--red-50); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; }
.btn-lg { height: 46px; padding: 0 22px; font-size: 15px; border-radius: 11px; }
.act { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--ink-3); transition: background .12s, color .12s; }
.act:hover { background: var(--wine-50); color: var(--wine); }
.act.danger:hover { background: var(--red-50); color: var(--red); }
.act svg { width: 16px; height: 16px; }
.act:disabled { opacity: .3; cursor: default; background: none; }
.link { color: var(--wine); font-weight: 500; }
.link:hover { text-decoration: underline; }

/* ---------- Cards ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 10px; }
.card-body { padding: 4px 20px 18px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.count { display: inline-grid; place-items: center; min-width: 24px; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--line-2); color: var(--ink-2); font-size: 11.5px; font-weight: 600; font-family: var(--mono); }
.empty { text-align: center; padding: 44px 20px; color: var(--ink-3); line-height: 1.7; }
.empty svg { width: 34px; height: 34px; color: var(--ink-4); margin-bottom: 6px; }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; }
.kpi span { display: block; color: var(--ink-3); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.kpi b { display: block; margin-top: 6px; font-family: var(--serif); font-size: 34px; font-weight: 600; line-height: 1; color: var(--wine-800); }

/* Destaque (próxima missa) */
.hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 24px 26px; border-radius: 16px; color: var(--ivory);
  background: radial-gradient(70% 140% at 100% 0%, rgba(198,161,91,.22), transparent 60%), linear-gradient(120deg, #2a0e16, #4a1724); border: 1px solid rgba(198,161,91,.35); box-shadow: 0 20px 50px -24px rgba(42,14,22,.7); }
.hero::before { content: ""; position: absolute; right: -40px; top: -60px; width: 260px; height: 260px; border-radius: 50%; border: 1px solid rgba(198,161,91,.18); }
.hero .eyebrow { color: var(--gold); font-size: 10.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
.hero h2 { margin-top: 6px; font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--ivory); }
.hero p { margin: 6px 0 0; color: rgba(247,241,227,.7); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hero .btn-ghost { background: rgba(247,241,227,.06); border-color: rgba(198,161,91,.35); color: var(--ivory); }
.hero .btn-ghost:hover { background: rgba(247,241,227,.12); }
.hero-actions { position: relative; display: flex; gap: 10px; flex-wrap: wrap; }

/* Tempo litúrgico */
.lt-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--lt-verde); }
.lt-dot.roxo { background: var(--lt-roxo); } .lt-dot.branco { background: #fff; box-shadow: inset 0 0 0 1.5px var(--lt-branco); } .lt-dot.vermelho { background: var(--lt-vermelho); } .lt-dot.rosa { background: var(--lt-rosa); }
.lt { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--ok-50); color: var(--lt-verde); }
.lt.roxo { background: #f0eaf7; color: var(--lt-roxo); } .lt.branco { background: var(--gold-50); color: #8a6a2c; } .lt.vermelho { background: var(--red-50); color: var(--lt-vermelho); } .lt.rosa { background: #fbeaf1; color: #b0466f; }
.hero .lt { background: rgba(247,241,227,.1); color: var(--ivory); }

/* Lista de missas */
.mlist { display: flex; flex-direction: column; }
.mrow { position: relative; display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; padding: 12px 20px 12px 22px; border-top: 1px solid var(--line-2); cursor: pointer; transition: background .12s; }
.mrow:first-child { border-top: 0; }
.mrow:hover { background: #fcfaf7; }
.mrow::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--lt-verde); }
.mrow.roxo::before { background: var(--lt-roxo); } .mrow.branco::before { background: var(--gold-2); } .mrow.vermelho::before { background: var(--lt-vermelho); } .mrow.rosa::before { background: var(--lt-rosa); }
.dbox { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 12px; background: var(--wine-50); color: var(--wine); border: 1px solid #f0dfe2; }
.dbox b { font-family: var(--serif); font-size: 26px; font-weight: 700; line-height: .95; }
.dbox span { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.mrow .t { font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mrow .s { margin-top: 3px; color: var(--ink-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mrow .s b { color: var(--ink-2); font-weight: 500; }
.mrow .meta { text-align: right; color: var(--ink-3); font-size: 12px; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--line-2); color: var(--ink-2); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.tag.gold { background: var(--gold-50); color: #8a6a2c; }
.tag.wine { background: var(--wine-100); color: var(--wine); }
.tag.warn { background: var(--amber-50); color: var(--amber); }
.tag.ok { background: var(--ok-50); color: var(--ok); }
.tag svg { width: 12px; height: 12px; }
.year-sep { padding: 14px 22px 6px; color: var(--gold); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; background: #fcfaf7; border-top: 1px solid var(--line-2); }

/* Filtros */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid var(--line-2); }
.search-field { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink-3); flex: 1 1 260px; min-width: 0; }
.search-field:focus-within { border-color: var(--wine); box-shadow: 0 0 0 3px rgba(110,33,51,.1); color: var(--ink); }
.search-field input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 13.5px; }
select, .input, textarea { height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-size: 13.5px; color: var(--ink); }
select { padding-right: 34px; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2385797b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center / 15px; }
textarea { height: auto; min-height: 80px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
select:focus, .input:focus, textarea:focus { outline: none; border-color: var(--wine); box-shadow: 0 0 0 3px rgba(110,33,51,.1); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); font-size: 12.5px; font-weight: 500; }
.chip:hover { border-color: var(--ink-4); }
.chip.on { background: var(--wine); border-color: var(--wine); color: #fff; }
.chip.on .lt-dot.branco { box-shadow: none; }

/* Tabela */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 10px 14px; text-align: left; color: var(--ink-3); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; border-bottom: 1px solid var(--line); background: #fff; position: sticky; top: 0; }
th:first-child, td:first-child { padding-left: 20px; }
td { padding: 12px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; font-size: 13.5px; color: var(--ink-2); }
tbody tr.click { cursor: pointer; }
tbody tr.click:hover { background: #fcfaf7; }
tbody tr:last-child td { border-bottom: 0; }
td.tit { color: var(--ink); font-weight: 600; }
td .sub { display: block; margin-top: 2px; color: var(--ink-3); font-weight: 400; font-size: 12px; max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r { text-align: right; }
.nowrap { white-space: nowrap; }
.more { display: flex; justify-content: center; padding: 14px; border-top: 1px solid var(--line-2); }

/* Ranking */
.rank { display: flex; flex-direction: column; gap: 2px; }
.rank a { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 8px 6px; border-radius: 8px; }
.rank a:hover { background: #fcfaf7; }
.rank .pos { font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--gold); text-align: center; }
.rank .nm { font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .nm small { display: block; color: var(--ink-3); font-weight: 400; font-size: 11.5px; }
.rank .bar { display: block; height: 4px; margin-top: 5px; border-radius: 4px; background: linear-gradient(90deg, var(--wine), var(--gold)); }
.rank .v { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }

/* ---------- Missa: roteiro ---------- */
.roteiro { display: flex; flex-direction: column; }
.ritem { display: grid; grid-template-columns: 36px 180px 1fr auto; gap: 14px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--line-2); }
.ritem:first-child { border-top: 0; }
.ritem .num { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--gold); text-align: center; }
.ritem .mom { color: var(--wine); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.ritem .mus { min-width: 0; }
.ritem .mus a, .ritem .mus b { font-weight: 600; color: var(--ink); }
.ritem .mus a:hover { color: var(--wine); }
.ritem .mus small { display: block; margin-top: 2px; color: var(--ink-3); font-size: 12px; }
.ritem .pend { color: var(--amber); font-weight: 500; font-style: italic; }
.ritem .acts { display: flex; gap: 2px; }

/* Editor */
.editor { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
.editor > *, .mdet > *, .grid-2 > *, .eitem > *, .ritem > * { min-width: 0; }
.editor .card.sticky { position: sticky; top: calc(var(--top) + 16px); }
.form { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 20px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { color: var(--ink-3); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.field > span em { color: var(--wine); font-style: normal; }
.field .input, .field select, .field textarea { width: 100%; min-width: 0; }
.field > span.hint, .field .hint { color: var(--ink-3); font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.45; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.eitem { display: grid; grid-template-columns: 26px 172px 1fr 86px auto; gap: 12px; align-items: center; padding: 10px 14px 10px 16px; border-top: 1px solid var(--line-2); transition: background .15s; }
.eitem:first-child { border-top: 0; }
.eitem.flash { animation: flash 1s ease; }
@keyframes flash { 0% { background: var(--gold-50); } 100% { background: transparent; } }
.eitem .num { font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--gold); text-align: center; }
.eitem select { height: 34px; font-size: 12.5px; font-weight: 600; color: var(--wine); }
.pick { display: flex; align-items: center; gap: 10px; min-height: 44px; width: 100%; padding: 6px 12px; border: 1px dashed var(--ink-4); border-radius: 10px; color: var(--ink-3); text-align: left; transition: border-color .15s, background .15s; }
.pick:hover { border-color: var(--wine); background: var(--wine-50); color: var(--wine); }
.pick.set { border-style: solid; border-color: var(--line); background: #fff; color: var(--ink); }
.pick.set:hover { border-color: var(--wine); background: #fff; }
.pick .pt { flex: 1; min-width: 0; }
.pick .pt b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick .pt small { display: block; color: var(--ink-3); font-size: 11.5px; margin-top: 1px; }
.pick svg { color: var(--ink-4); }
.eitem .acts { display: flex; gap: 0; }
.tom { display: flex; align-items: center; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.tom:focus-within { border-color: var(--wine); box-shadow: 0 0 0 3px rgba(110,33,51,.1); }
.tom span { padding: 0 0 0 9px; color: var(--ink-3); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.tom input { width: 100%; min-width: 0; height: 100%; padding: 0 8px 0 6px; border: 0; outline: none; background: none; font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--wine); }
.tom input::-webkit-calendar-picker-indicator { display: none !important; }
.tom input::placeholder { color: var(--ink-4); font-weight: 400; }
.tom.do-grupo { border-color: var(--gold); background: var(--gold-50); }
.tom:has(input:disabled) { background: #faf8f5; opacity: .55; }
.tag.tom-tag { background: var(--wine-100); color: var(--wine); font-family: var(--mono); font-weight: 600; }
.add-mom { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line-2); background: #fcfaf7; border-radius: 0 0 var(--radius) var(--radius); flex-wrap: wrap; }
.add-mom select { flex: 1 1 200px; }
.save-bar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; margin: 0 -2px; border-radius: 12px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border: 1px solid var(--line); box-shadow: 0 -10px 30px -18px rgba(40,20,24,.3); }
.save-bar .info { color: var(--ink-3); font-size: 12.5px; }
.spacer { flex: 1; }

/* Painel de escolha (gaveta lateral) */
.drawer-bg { position: fixed; inset: 0; z-index: 90; background: rgba(28,10,16,.4); backdrop-filter: blur(2px); animation: fadeIn .15s ease both; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 91; width: min(560px, 100%); display: flex; flex-direction: column; background: #fff; box-shadow: -30px 0 80px -20px rgba(0,0,0,.35); animation: slideIn .25s cubic-bezier(.22,1,.36,1) both; }
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-head { padding: 18px 20px 12px; border-bottom: 1px solid var(--line); }
.drawer-head .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.drawer-head h3 { margin: 2px 0 0; font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--wine-800); }
.drawer-tools { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.drawer-tools .search-field { flex: none; }
.drawer-tools .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.drawer-tools .line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.seg { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--line-2); gap: 2px; }
.seg button { height: 28px; padding: 0 10px; border-radius: 7px; font-size: 12px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.seg button.on { background: #fff; color: var(--wine); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.drawer-list { flex: 1; overflow-y: auto; }
.opt { border-bottom: 1px solid var(--line-2); }
.opt-main { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 12px 20px; text-align: left; transition: background .12s; }
.opt-main:hover { background: var(--wine-50); }
.opt.sel .opt-main { background: var(--gold-50); box-shadow: inset 3px 0 0 var(--gold); }
.opt-main b { display: block; color: var(--ink); font-weight: 600; }
.opt-main .tr { display: block; margin-top: 3px; color: var(--ink-3); font-size: 12px; line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.opt-main .tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.opt-side { display: flex; gap: 4px; align-items: center; }
.opt-det { padding: 4px 20px 16px; background: #fcfaf7; border-top: 1px dashed var(--line); }
.letra { white-space: pre-wrap; font-family: var(--serif); font-size: 16.5px; line-height: 1.45; color: var(--ink-2); }
.letra.box { max-height: 260px; overflow-y: auto; padding: 12px 14px; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.letra.cols { columns: 2 260px; column-gap: 32px; }
.versoes { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.versao { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 12.5px; }
.versao input { accent-color: var(--wine); }
.versao .vn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-foot { display: flex; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); background: #fcfaf7; }

/* Detalhe da música */
.mdet { display: grid; grid-template-columns: 1fr 360px; gap: 16px; align-items: start; }
.stat-row { display: flex; gap: 22px; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid var(--line-2); }
.stat-row div span { display: block; color: var(--ink-3); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.stat-row div b { display: block; margin-top: 3px; font-size: 15px; color: var(--ink); }
.hist { display: flex; flex-direction: column; }
.hist a { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 9px 20px; border-top: 1px solid var(--line-2); font-size: 13px; }
.hist a:hover { background: #fcfaf7; }
.hist a small { display: block; color: var(--ink-3); font-size: 11.5px; }
.vlist { display: flex; flex-direction: column; }
.vrow { display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-top: 1px solid var(--line-2); }
.vrow .ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--wine-50); color: var(--wine); flex: none; }
.vrow .vi { flex: 1; min-width: 0; }
.vrow .vi b { display: block; font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vrow .vi small { color: var(--ink-3); font-size: 11.5px; }

/* Envio de slides */
.drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px 20px; border: 2px dashed var(--ink-4); border-radius: 14px; background: #fff; color: var(--ink-3); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.drop:hover, .drop.over { border-color: var(--wine); background: var(--wine-50); color: var(--wine); }
.drop svg { width: 34px; height: 34px; }
.drop b { color: var(--ink); font-size: 15px; }
.up-card { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.up-card + .up-card { border-top: 1px solid var(--line-2); }
.up-top { display: flex; align-items: center; gap: 10px; }
.up-top .fn { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-grid { display: grid; grid-template-columns: 1fr 220px; gap: 12px; }
.choice { display: flex; flex-direction: column; gap: 6px; }
.choice label { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 13px; }
.choice label:has(input:checked) { border-color: var(--wine); background: var(--wine-50); }
.choice input { margin-top: 2px; accent-color: var(--wine); }
.choice small { display: block; color: var(--ink-3); font-size: 12px; }
.up-done { display: flex; align-items: center; gap: 8px; color: var(--ok); font-weight: 500; }
.up-err { color: var(--red); font-weight: 500; }
.moms { display: flex; gap: 6px; flex-wrap: wrap; }
.moms label { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; cursor: pointer; background: #fff; }
.moms label:has(input:checked) { background: var(--wine); border-color: var(--wine); color: #fff; }
.moms input { display: none; }

/* ---------- Modal ---------- */
.modal-bg { position: fixed; inset: 0; z-index: 100; background: rgba(28,10,16,.45); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 18px; animation: fadeIn .15s ease both; }
.modal { width: min(560px, 100%); max-height: 92vh; display: flex; flex-direction: column; background: #fff; border-radius: 16px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.4); animation: cardIn .25s cubic-bezier(.22,1,.36,1) both; }
.modal.wide { width: min(760px, 100%); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px 14px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--wine-800); }
.modal-head p { margin: 4px 0 0; color: var(--ink-3); font-size: 13px; }
.modal-body { overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.modal-foot { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--line); background: #fcfaf7; border-radius: 0 0 16px 16px; }
.msg-err { color: var(--red); font-size: 13px; }
.check { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13px; cursor: pointer; }
.check input { accent-color: var(--wine); width: 15px; height: 15px; }
.switch { position: relative; display: inline-block; width: 36px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--ink-4); transition: background .15s; cursor: pointer; }
.switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch input:checked + span { background: var(--wine); }
.switch input:checked + span::after { transform: translateX(16px); }

/* ---------- Toast ---------- */
.toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); background: var(--wine-900); color: var(--ivory); padding: 12px 18px; border-radius: 11px; box-shadow: 0 16px 40px -10px rgba(0,0,0,.45); font-size: 13.5px; animation: cardIn .2s ease both; }
.toast.err { background: var(--red); color: #fff; }
.toast svg { color: var(--gold-2); }

/* ---------- Impressão do repertório ---------- */
@media print {
  .topbar, .side, .head-actions, .acts, .no-print, .toast { display: none !important; }
  .main { padding: 0; max-width: none; }
  body { background: #fff; }
  .card { box-shadow: none; border: 0; }
  .ritem { grid-template-columns: 30px 170px 1fr; padding: 8px 0; }
}

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .editor, .mdet { grid-template-columns: 1fr; }
  .editor > *, .mdet > *, .grid-2 > *, .eitem > *, .ritem > * { min-width: 0; }
.editor .card.sticky { position: static; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  :root { --side: 270px; }
  .menu-btn { display: grid; }
  .brand { width: auto; }
  .side { transform: translateX(-100%); transition: transform .25s cubic-bezier(.22,1,.36,1); }
  .side.open { transform: none; }
  .side-backdrop.open { display: block; position: fixed; inset: var(--top) 0 0 0; z-index: 25; background: rgba(28,10,16,.4); }
  .main { padding: calc(var(--top) + 18px) 14px 40px; }
  .tempo-hoje, .user-name { display: none; }
  .grid-2 { grid-template-columns: 1fr; }
  .global-search kbd { display: none; }
}
@media (max-width: 640px) {
  .brand-name { display: none; }
  .global-search { flex: 1; }
  h1 { font-size: 28px; }
  .mrow { grid-template-columns: 52px 1fr; padding: 12px 14px 12px 16px; }
  .dbox { width: 50px; height: 50px; } .dbox b { font-size: 22px; }
  .mrow .meta { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; }
  .ritem { grid-template-columns: 28px 1fr auto; padding: 12px 14px; }
  .ritem .mom { grid-column: 2; }
  .ritem .mus { grid-column: 2; grid-row: 2; }
  .ritem .acts { grid-column: 3; grid-row: 1 / span 2; }
  .eitem { grid-template-columns: 24px 1fr auto; padding: 10px 10px 10px 12px; }
  .eitem .pick { grid-column: 1 / 3; grid-row: 2; }
  .eitem .tom { grid-column: 3; grid-row: 2; width: 104px; justify-self: end; }
  .eitem .acts { grid-column: 3; grid-row: 1; }
  .up-grid, .row2 { grid-template-columns: 1fr; }
  .hero h2 { font-size: 26px; }
  .card-head, .toolbar { padding-left: 14px; padding-right: 14px; }
  th:first-child, td:first-child { padding-left: 14px; }
  .hide-sm { display: none; }
  .save-bar { gap: 8px; padding: 10px; }
  .save-bar .info { width: 100%; }
  .save-bar .btn-ghost { display: none; }
  .save-bar .btn { flex: 1 1 0; padding: 0 10px; font-size: 13px; }
  .save-bar .spacer { display: none; }
}

/* Equipe */
.gcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.gcard { display: flex; align-items: center; gap: 14px; padding: 16px 18px; transition: border-color .15s, transform .1s; }
.gcard:hover { border-color: var(--gold); }
.gcard.off { opacity: .6; }
.gcard .gico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--wine-50); color: var(--wine); flex: none; }
.gcard .gmain { flex: 1; min-width: 0; }
.gcard .gmain b { display: block; font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--wine-800); }
.gcard .gmain small { display: block; margin: 2px 0 8px; color: var(--ink-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcard .tags { display: flex; gap: 5px; flex-wrap: wrap; }
.gcard > svg { color: var(--ink-4); }
.add-tom { position: relative; }
.sugs { position: absolute; left: 20px; right: 20px; top: calc(100% - 8px); z-index: 10; max-height: 320px; overflow-y: auto; padding: 4px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 18px 40px -16px rgba(0,0,0,.3); }
.sugs button { display: block; width: 100%; padding: 8px 10px; border-radius: 7px; text-align: left; }
.sugs button:hover { background: var(--wine-50); }
.sugs b { display: block; font-weight: 600; }
.sugs small { display: block; color: var(--ink-3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td .tom { height: 36px; max-width: 120px; }
.tons-grupo { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.tons-grupo a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; }
.tons-grupo a b { margin: 0 !important; font-size: 13px !important; font-weight: 500 !important; color: var(--ink) !important; }
.tons-grupo a:hover b { color: var(--wine) !important; }
.stat-row .tons-grupo .tag { display: inline-flex; letter-spacing: 0; text-transform: none; font-size: 12px; color: var(--wine); }

/* Slides reformulados */
.cor-sel { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); }
.cor-sel select { height: 38px; }
.card.aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 18px; background: var(--amber-50); border-color: #f0dcb0; color: var(--amber); line-height: 1.5; }
.resumo-rev { display: grid; grid-template-columns: repeat(4, 1fr); padding: 14px 6px; }
.resumo-rev div { padding: 0 16px; border-left: 1px solid var(--line-2); }
.resumo-rev div:first-child { border-left: 0; }
.resumo-rev b { display: block; font-family: var(--serif); font-size: 28px; font-weight: 600; color: var(--wine-800); line-height: 1; }
.resumo-rev span { font-size: 12px; color: var(--ink-3); }
.rev-list { display: flex; flex-direction: column; gap: 10px; }
.rev.aberto { border-color: var(--gold); }
.rev-head { display: flex; align-items: center; gap: 14px; padding: 12px 16px; cursor: pointer; flex-wrap: wrap; }
.rev-head .num { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--gold); width: 24px; text-align: center; }
.rev-tit { flex: 1; min-width: 180px; }
.rev-tit small { display: block; color: var(--wine); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.rev-tit b { font-weight: 600; }
.rev-acts { display: flex; align-items: center; gap: 6px; }
.rev-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 18px; padding: 4px 16px 18px; border-top: 1px solid var(--line-2); }
.rev-body > div { min-width: 0; padding-top: 12px; }
.rev-orig .letra.box { max-height: 560px; font-size: 15px; }
.rev-notas { padding: 10px 12px; border-radius: 10px; margin-bottom: 10px; font-size: 12.5px; }
.rev-notas b { display: flex; align-items: center; gap: 6px; }
.rev-notas ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.55; }
.rev-notas.ok { background: var(--ok-50); color: var(--ok); }
.rev-notas.warn { background: var(--amber-50); color: var(--amber); }
.sl-list { display: flex; flex-direction: column; gap: 8px; }
.sl { border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; }
.sl.refrao { border-color: var(--gold); background: var(--gold-50); }
.sl-top { display: flex; align-items: center; gap: 8px; padding: 6px 8px 0 10px; }
.sl-n { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.sl-top select { height: 28px; padding: 0 28px 0 8px; font-size: 12px; background-position: right 7px center; }
.sl textarea { display: block; width: 100%; min-height: 0; border: 0; background: transparent; padding: 6px 12px 10px; font-family: var(--serif); font-size: 17px; line-height: 1.4; resize: vertical; }
.sl textarea:focus { box-shadow: none; }
.sl.refrao textarea { font-style: italic; color: #6d5320; }
.sl-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
@media (max-width: 900px) { .rev-body { grid-template-columns: 1fr; } .resumo-rev { grid-template-columns: repeat(2, 1fr); row-gap: 12px; } }

/* Tema / festa na montagem */
.tema-faixa { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 16px 10px; padding: 10px 14px; border-radius: 10px; background: var(--gold-50); border: 1px solid #ecdcb5; color: #6d5320; font-size: 13px; line-height: 1.45; }
.tema-faixa > span { flex: 1 1 260px; }
.tema-faixa > svg { color: var(--gold); }
.pick.sugerida { border-style: dashed; border-color: var(--gold); background: var(--gold-50); }
.pick .sug { color: #8a6a2c; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.pick .sug svg { width: 11px; height: 11px; }