@font-face { font-family: 'Lora'; src: url('/fonts/Lora-Variable.ttf') format('truetype'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('/fonts/Lora-Italic-Variable.ttf') format('truetype'); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-Medium.otf') format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-SemiBold.otf') format('opentype'); font-weight: 600; font-display: swap; }

:root {
  --ink: #1b1916; --ink-2: #4a453e; --ink-3: #7d766b;
  --paper: #f7f3ec; --card: #ffffff; --line: #e6dfd2; --line-2: #efe9dd;
  --night: #14110f; --night-2: #1d1916; --night-line: #2c2621;
  --gold: #b8955a; --gold-2: #c9a66b; --gold-soft: #f1e6d0;
  --ok: #3f7a55; --ok-soft: #e3f0e8; --warn: #a8741a; --warn-soft: #f8ecd1; --bad: #a64040; --bad-soft: #f6e0e0; --info: #3d6a82; --info-soft: #e1edf3;
  --radius: 14px; --shadow: 0 1px 2px rgba(20,17,15,.05), 0 8px 24px rgba(20,17,15,.06);
  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--sans); color: var(--ink); background: var(--paper); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; letter-spacing: -.01em; }
h1 { font-size: 28px; } h2 { font-size: 20px; } h3 { font-size: 16px; font-family: var(--sans); font-weight: 600; }
p { margin: 0; } a { color: var(--gold); }
button { font: inherit; cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--ink-3); } .small { font-size: 13px; } .right { text-align: right; } .nowrap { white-space: nowrap; }
.row { display: flex; gap: 12px; align-items: center; } .row.wrap { flex-wrap: wrap; } .spread { justify-content: space-between; } .grow { flex: 1; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 12px; } .stack-sm { display: flex; flex-direction: column; gap: 6px; }
.grid { display: grid; gap: 14px; } .g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .g4 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .g2 { grid-template-columns: 1fr; } }

/* ---------- Layout do app ---------- */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.side { background: var(--night); color: #d9d1c3; display: flex; flex-direction: column; padding: 20px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 22px; color: #fff; }
.brand .mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(145deg, var(--gold-2), #8c6c38); display: grid; place-items: center; color: var(--night); font-family: var(--serif); font-weight: 700; font-size: 17px; }
.brand b { font-family: var(--serif); font-size: 16px; font-weight: 600; line-height: 1.1; display: block; }
.brand span { font-size: 11px; color: #9c9384; letter-spacing: .08em; text-transform: uppercase; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: #cfc6b5; text-decoration: none; font-weight: 500; font-size: 14px; }
.nav a:hover { background: var(--night-2); color: #fff; }
.nav a.active { background: var(--night-2); color: var(--gold-2); box-shadow: inset 2px 0 0 var(--gold-2); }
.nav .badge { margin-left: auto; background: var(--gold); color: var(--night); border-radius: 999px; font-size: 11px; padding: 1px 7px; font-weight: 600; }
.nav .sep { height: 1px; background: var(--night-line); margin: 10px 6px; }
.side .me { margin-top: auto; padding: 14px 10px 4px; border-top: 1px solid var(--night-line); font-size: 13px; }
.side .me b { color: #fff; display: block; } .side .me button { margin-top: 8px; }
.main { padding: 28px 32px 60px; max-width: 1280px; width: 100%; }
.topbar { display: none; }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .side { position: fixed; z-index: 40; width: 270px; left: -290px; transition: left .2s; box-shadow: 0 0 40px rgba(0,0,0,.4); }
  .side.open { left: 0; }
  .scrim { position: fixed; inset: 0; background: rgba(20,17,15,.45); z-index: 30; }
  .topbar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--night); color: #fff; position: sticky; top: 0; z-index: 20; }
  .topbar .t { font-family: var(--serif); font-size: 16px; }
  .main { padding: 18px 16px 80px; }
}
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head p { color: var(--ink-3); margin-top: 4px; }

/* ---------- Componentes ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.card.flat { box-shadow: none; }
.card h3 { margin-bottom: 10px; }
.kpi .label { color: var(--ink-3); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.kpi .value { font-family: var(--serif); font-size: 28px; font-weight: 600; margin-top: 4px; }
.kpi .sub { color: var(--ink-3); font-size: 13px; margin-top: 2px; }
.btn { border: 1px solid var(--line); background: #fff; color: var(--ink); padding: 9px 16px; border-radius: 10px; font-weight: 500; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: background .15s, border-color .15s; }
.btn:hover { border-color: var(--gold); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.primary:hover { background: #2b2722; }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #fff; } .btn.gold:hover { background: #a3834c; }
.btn.danger { color: var(--bad); border-color: #e8c4c4; } .btn.danger:hover { background: var(--bad-soft); }
.btn.sm { padding: 5px 10px; font-size: 13px; border-radius: 8px; } .btn.block { width: 100%; justify-content: center; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
label.f { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
input, select, textarea { font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gold-soft); border-color: var(--gold); }
textarea { min-height: 96px; resize: vertical; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--gold); padding: 0; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-2); }
.field-error { color: var(--bad); font-size: 12px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--line-2); color: var(--ink-2); }
.chip.ok { background: var(--ok-soft); color: var(--ok); } .chip.warn { background: var(--warn-soft); color: var(--warn); } .chip.bad { background: var(--bad-soft); color: var(--bad); } .chip.info { background: var(--info-soft); color: var(--info); } .chip.gold { background: var(--gold-soft); color: #7b5f2c; }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.table td { padding: 11px 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.table tr.click { cursor: pointer; } .table tr.click:hover td { background: #faf7f1; }
.scroll-x { overflow-x: auto; }
.empty { text-align: center; color: var(--ink-3); padding: 34px 10px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; }
.tabs button { background: none; border: 0; padding: 10px 14px; color: var(--ink-3); font-weight: 500; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs button.active { color: var(--ink); border-color: var(--gold); }
.banner { padding: 12px 16px; border-radius: 12px; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 18px; background: var(--gold-soft); color: #6b5224; }
.banner.bad { background: var(--bad-soft); color: var(--bad); } .banner.info { background: var(--info-soft); color: var(--info); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--gold-soft); color: #7b5f2c; display: grid; place-items: center; font-weight: 600; font-size: 13px; flex: none; }
.icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Modal e toast ---------- */
.overlay { position: fixed; inset: 0; background: rgba(20,17,15,.5); display: grid; place-items: center; z-index: 100; padding: 16px; overflow-y: auto; }
.modal { background: #fff; border-radius: 18px; padding: 24px; width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow-y: auto; box-shadow: 0 30px 80px rgba(0,0,0,.3); }
.modal.wide { max-width: 760px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.toasts { position: fixed; bottom: 18px; right: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.toast { background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 12px; box-shadow: var(--shadow); max-width: 360px; font-size: 14px; }
.toast.bad { background: var(--bad); } .toast.ok { background: var(--ok); }

/* ---------- Login ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth .hero { background: radial-gradient(1200px 600px at 20% 0%, #2a231c, var(--night)); color: #efe7d8; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; }
.auth .hero h1 { font-size: 40px; line-height: 1.12; color: #fff; max-width: 520px; }
.auth .hero h1 em { color: var(--gold-2); font-style: italic; }
.auth .hero ul { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; color: #cfc6b5; }
.auth .hero li::before { content: '✦'; color: var(--gold-2); margin-right: 10px; }
.auth .panel { display: grid; place-items: center; padding: 32px; }
.auth form { width: 100%; max-width: 400px; }
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; } .auth .hero { padding: 28px; } .auth .hero h1 { font-size: 28px; } .auth .hero ul { display: none; } }

/* ---------- Agenda ---------- */
.agenda-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.agenda { display: grid; min-width: 640px; position: relative; }
.agenda .col-head { position: sticky; top: 0; background: #fff; padding: 10px; font-weight: 600; font-size: 13px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line-2); display: flex; align-items: center; gap: 8px; z-index: 3; }
.agenda .time-col { position: relative; }
.agenda .hour { height: 60px; font-size: 11px; color: var(--ink-3); padding: 2px 8px; border-top: 1px solid var(--line-2); }
.agenda .col { position: relative; border-left: 1px solid var(--line-2); }
.agenda .col .slot { height: 60px; border-top: 1px solid var(--line-2); }
.agenda .col .slot:hover { background: #fbf8f2; cursor: pointer; }
.appt { position: absolute; left: 3px; right: 3px; border-radius: 8px; padding: 4px 8px; font-size: 12px; overflow: hidden; color: #1b1916; border-left: 4px solid var(--c, var(--gold)); background: color-mix(in srgb, var(--c, #c9a66b) 18%, #fff); cursor: pointer; z-index: 2; }
.appt b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt.done { opacity: .6; } .appt.noshow, .appt.cancelled { opacity: .45; text-decoration: line-through; } .appt.confirmed::after { content: '✓'; position: absolute; right: 6px; top: 3px; color: var(--ok); font-weight: 700; }
.now-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--bad); z-index: 4; pointer-events: none; }

/* ---------- Kanban, conversas, gráficos ---------- */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.kcol { background: #efe9dd; border-radius: var(--radius); padding: 12px; min-height: 240px; }
.kcol h3 { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); }
.kcard { background: #fff; border-radius: 12px; padding: 12px; margin-bottom: 10px; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.kcard.dragging { opacity: .5; }
.inbox { display: grid; grid-template-columns: 340px 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; height: calc(100vh - 190px); min-height: 480px; }
.inbox .list { border-right: 1px solid var(--line); overflow-y: auto; }
.inbox .item { padding: 14px 16px; border-bottom: 1px solid var(--line-2); cursor: pointer; display: flex; gap: 12px; }
.inbox .item:hover, .inbox .item.active { background: #faf7f1; }
.inbox .thread { display: flex; flex-direction: column; min-width: 0; }
.msgs { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 8px; background: #fbf9f4; }
.msg { max-width: 76%; padding: 9px 13px; border-radius: 14px; font-size: 14px; white-space: pre-wrap; word-wrap: break-word; }
.msg.in { background: #fff; border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.out { background: var(--ink); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.msg.out.bot { background: #3a332b; } .msg .meta { font-size: 11px; opacity: .65; margin-top: 3px; }
@media (max-width: 900px) { .inbox { grid-template-columns: 1fr; height: auto; } .inbox .thread { height: 70vh; } .inbox.show-thread .list { display: none; } .inbox:not(.show-thread) .thread { display: none; } }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 150px; }
.bars .bar { flex: 1; background: linear-gradient(180deg, var(--gold-2), #a7854e); border-radius: 6px 6px 0 0; min-height: 3px; position: relative; }
.bars .bar:hover::after { content: attr(data-tip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; font-size: 11px; padding: 3px 7px; border-radius: 6px; white-space: nowrap; }
.axis { display: flex; gap: 6px; font-size: 10px; color: var(--ink-3); margin-top: 6px; } .axis span { flex: 1; text-align: center; }
.list-clean { list-style: none; margin: 0; padding: 0; } .list-clean li { padding: 10px 0; border-bottom: 1px solid var(--line-2); display: flex; gap: 12px; align-items: center; } .list-clean li:last-child { border: 0; }
.plan { position: relative; } .plan.current { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-soft); }
.plan .price { font-family: var(--serif); font-size: 32px; font-weight: 600; } .plan ul { padding-left: 18px; color: var(--ink-2); margin: 10px 0 14px; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; background: var(--line-2); padding: 2px 6px; border-radius: 6px; word-break: break-all; }
.copy { display: flex; gap: 8px; align-items: center; } .copy code { flex: 1; padding: 8px 10px; }

/* ---- complementos das telas ---- */
.thread-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.composer { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); } .composer textarea { flex: 1; }
.thread-wrap { display: flex; flex-direction: column; min-width: 0; } .thread-wrap .back { display: none; margin: 8px; align-self: flex-start; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--gold-soft); color: var(--gold); display: grid; place-items: center; font-weight: 600; flex: none; }
.block { display: block; } .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
@media (max-width: 900px) { .thread-wrap .back { display: inline-flex; } .inbox .thread-wrap { display: none; } .inbox.show-thread .thread-wrap { display: flex; } .inbox.show-thread .list { display: none; } }
.pub-wrap { max-width: 560px; margin: 0 auto; padding: 22px 16px 40px; }
.pub-head { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; } .pub-head h1 { font-size: 24px; margin: 0; }
.pub-logo { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-top: 8px; font: inherit; cursor: pointer; }
.opt:hover { border-color: var(--gold); }
.days { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px; }
.day { flex: none; display: flex; flex-direction: column; align-items: center; padding: 8px 14px; border: 1px solid var(--line); background: #fff; border-radius: 12px; font: inherit; cursor: pointer; }
.day.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.slot-btn { padding: 10px 0; border: 1px solid var(--line); background: #fff; border-radius: 10px; font: inherit; cursor: pointer; } .slot-btn:hover { border-color: var(--gold); background: var(--gold-soft); }
body.public { background: var(--paper); }
.plan.current { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-soft); } .dim { opacity: .55; }
.pre { white-space: pre-wrap; background: #faf7f1; padding: 8px 10px; border-radius: 8px; } .break { word-break: break-all; display: block; margin: 8px 0; }
.pub-head .mark { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: #fff; display: grid; place-items: center; font-family: var(--serif); font-size: 22px; font-weight: 700; flex: none; }

/* ---------- Identidade visual do salão (cores vêm de theme.js) ---------- */
.btn.gold { color: var(--on-accent, #fff); }
.nav .badge { color: var(--on-accent, var(--night)); }
.brand .mark { background: linear-gradient(145deg, var(--gold-2), var(--gold)); color: var(--on-accent, var(--night)); overflow: hidden; }
.brand .mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
body[data-side="light"] .side { color: var(--ink-2); border-right: 1px solid var(--night-line); }
body[data-side="light"] .brand { color: var(--ink); } body[data-side="light"] .brand span { color: var(--ink-3); }
body[data-side="light"] .nav a { color: var(--ink-2); } body[data-side="light"] .nav a:hover { background: var(--night-2); color: var(--ink); }
body[data-side="light"] .nav a.active { color: var(--gold); box-shadow: inset 2px 0 0 var(--gold); }
body[data-side="light"] .side .me b { color: var(--ink); }
.seg3 { display: flex; gap: 8px; flex-wrap: wrap; } .seg3 button { flex: 1; min-width: 130px; padding: 12px; border: 1.5px solid var(--line); background: #fff; border-radius: 12px; text-align: left; }
.seg3 button b { display: block; } .seg3 button span { font-size: 12px; color: var(--ink-3); }
.seg3 button.on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-soft); }
.swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .swatches input[type=color] { width: 100%; height: 44px; padding: 2px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.preview { display: grid; grid-template-columns: 120px 1fr; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; min-height: 140px; }
.preview .pv-side { padding: 12px 10px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; } .preview .pv-side i { display: block; height: 8px; border-radius: 4px; opacity: .5; background: currentColor; }
.preview .pv-main { padding: 14px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .preview .pv-btn { padding: 8px 14px; border-radius: 10px; font-weight: 600; font-size: 13px; }
.logo-box { width: 84px; height: 84px; border-radius: 16px; border: 1px dashed var(--line); display: grid; place-items: center; overflow: hidden; background: #fff; font-family: var(--serif); font-size: 32px; color: var(--gold); } .logo-box img { width: 100%; height: 100%; object-fit: cover; }
.pub-contact { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .pub-contact a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; }
.pub-contact a.wa { background: var(--gold); border-color: var(--gold); color: var(--on-accent, #fff); }
.pub-hero { background: var(--night); color: #fff; margin: -22px -16px 20px; padding: 22px 16px 20px; border-radius: 0 0 22px 22px; }
.pub-hero h1 { color: var(--gold-2); } .pub-hero p { color: rgba(255,255,255,.78); }
body[data-side="light"] .pub-hero { color: var(--ink); } body[data-side="light"] .pub-hero h1 { color: var(--gold); } body[data-side="light"] .pub-hero p { color: var(--ink-2); }
@media (max-width: 560px) { .preview { grid-template-columns: 90px 1fr; } }

/* Campo de senha com olhinho */
.pw { position: relative; display: block; } .pw input { width: 100%; padding-right: 46px; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; display: grid; place-items: center; border: 0; background: transparent; color: var(--ink-3); border-radius: 8px; cursor: pointer; }
.pw-eye:hover { color: var(--ink); background: var(--gold-soft); } .pw-eye .icon { width: 20px; height: 20px; }

/* Troca rápida do tipo de espaço no menu */
.modesw { margin: 14px 4px 4px; padding: 10px; border-radius: 12px; background: var(--night-2); } .modesw > span { display: block; margin-bottom: 6px; opacity: .75; }
.modesw-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .modesw-btns button { padding: 8px 2px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: inherit; font-size: 12px; font-weight: 600; }
.modesw-btns button.on { background: var(--gold); color: var(--on-accent, #fff); } .modesw-btns button:not(.on):hover { border-color: var(--gold-2); }