/* ============================================================
   RePay — app.css  |  Humana Saúde
   Baseado no skeleton HBSM Web
   ============================================================ */

/* ── Variáveis de tema padrão (Healthcare Blue) ─────────── */
:root {
  --bg:#f0f9ff; --bg2:#ffffff; --bg3:#dbeafe; --bg4:#bfdbfe; --bg5:#082f49;
  --border:rgba(2,132,199,.18); --border2:rgba(2,132,199,.28);
  --text:#082f49; --text2:#43627a; --text3:#7aa4bd;
  --accent:#1a5276; --accent2:#2980b9;
  --teal:#0d9488; --pink:#e879a0;
  --success:#16a34a; --warning:#d97706; --danger:#dc2626; --info:#0284c7;
  --r:10px; --rsm:6px;
  --font-body:'DM Sans',system-ui,sans-serif;
  --font-mono:'DM Mono','SFMono-Regular',Consolas,monospace;
  --sidebar-bg:var(--bg5);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { font-size:14px }
body {
  background:var(--bg); color:var(--text);
  font-family:var(--font-body);
  min-height:100vh; display:flex;
  transition:background .25s,color .25s;
}

/* ── SCROLLBAR ─────────────────────────────────────────── */
::-webkit-scrollbar { width:4px; height:4px }
::-webkit-scrollbar-track { background:var(--bg2) }
::-webkit-scrollbar-thumb { background:var(--bg4); border-radius:4px }

/* ── SIDEBAR ───────────────────────────────────────────── */
.sidebar {
  width:220px; min-height:100vh;
  background:var(--sidebar-bg, var(--bg5));
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0; z-index:100;
  transition:background .25s, transform .25s;
}
.sb-logo {
  padding:16px 18px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  text-align:center;
}
.sb-logo-inner {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.12); border-radius:8px;
  padding:6px 10px;
}
.sb-logo-inner svg { width:22px; height:22px; flex-shrink:0; }
.sb-logo-title { font-size:15px; font-weight:700; color:#fff; letter-spacing:.01em; }
.sb-logo-sub { font-size:9px; color:rgba(255,255,255,.45); text-transform:uppercase; letter-spacing:.07em; margin-top:5px; }

.sb-nav { flex:1; padding:8px 0; overflow-y:auto; }
.sb-section {
  padding:10px 16px 4px;
  font-size:9.5px; font-weight:700; color:rgba(255,255,255,.3);
  letter-spacing:.09em; text-transform:uppercase;
}
.nav-item {
  display:flex; align-items:center; gap:9px;
  padding:8px 16px; font-size:12.5px; color:rgba(255,255,255,.55);
  cursor:pointer; transition:all .15s;
  border-left:2px solid transparent; text-decoration:none;
}
.nav-item:hover  { background:rgba(255,255,255,.07); color:rgba(255,255,255,.9); }
.nav-item.active {
  background:rgba(255,255,255,.1); color:#fff;
  border-left-color:var(--accent2);
}
.nav-item svg { width:15px; height:15px; opacity:.7; flex-shrink:0; }
.nav-item.active svg { opacity:1; }
.nav-badge {
  margin-left:auto; background:var(--danger); color:#fff;
  border-radius:10px; font-size:9px; padding:1px 6px; font-weight:700;
}

.sb-footer {
  padding:12px 14px; border-top:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; gap:8px;
}
.sb-user-avatar {
  width:30px; height:30px; border-radius:50%;
  background:var(--accent2); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; flex-shrink:0;
}
.sb-user-name { font-size:11.5px; font-weight:600; color:rgba(255,255,255,.85); display:block; }
.sb-user-role { font-size:9.5px; color:rgba(255,255,255,.35); }
.sb-logout {
  margin-left:auto; color:rgba(255,255,255,.3); text-decoration:none;
  width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  border-radius:6px; transition:all .15s; flex-shrink:0;
}
.sb-logout:hover { color:var(--danger); background:rgba(220,38,38,.15); }
.sb-logout svg { width:14px; height:14px; }

/* ── MAIN ──────────────────────────────────────────────── */
.main { margin-left:220px; flex:1; min-height:100vh; display:flex; flex-direction:column; }

/* ── TOPBAR ────────────────────────────────────────────── */
.topbar {
  height:52px; background:var(--bg2); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; position:sticky; top:0; z-index:50;
  gap:12px; transition:background .25s;
}
.topbar-left { display:flex; align-items:center; gap:10px; min-width:0; }
.page-title { font-size:14px; font-weight:600; color:var(--text); white-space:nowrap; }
.page-sub   { font-size:10.5px; color:var(--text3); margin-top:1px; }
.topbar-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.sidebar-toggle {
  display:none; background:none; border:none; color:var(--text2);
  cursor:pointer; padding:4px;
}
.sidebar-toggle svg { width:18px; height:18px; }
.content { padding:20px 24px; width:100%; }

/* ── FLASH ─────────────────────────────────────────────── */
.flash {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:11px 24px; font-size:12.5px; font-weight:500;
  border-bottom:1px solid transparent;
}
.flash-success { background:rgba(22,163,74,.1);  color:var(--success); border-color:rgba(22,163,74,.2); }
.flash-error   { background:rgba(220,38,38,.1);  color:var(--danger);  border-color:rgba(220,38,38,.2); }
.flash-warning { background:rgba(217,119,6,.1);  color:var(--warning); border-color:rgba(217,119,6,.2); }
.flash-info    { background:rgba(2,132,199,.1);  color:var(--info);    border-color:rgba(2,132,199,.2); }
.flash-close { background:none; border:none; color:inherit; font-size:18px; cursor:pointer; opacity:.6; }

/* ── BOTÕES ────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 13px; border-radius:var(--rsm);
  font-size:12px; font-weight:600; font-family:var(--font-body);
  cursor:pointer; border:1px solid transparent;
  transition:all .15s; text-decoration:none; white-space:nowrap;
}
.btn svg { width:13px; height:13px; flex-shrink:0; }
.btn-primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-primary:hover { background:var(--accent2); border-color:var(--accent2); }
.btn-ghost   { background:transparent; color:var(--text2); border-color:var(--border2); }
.btn-ghost:hover { color:var(--text); border-color:var(--accent); }
.btn-success { background:rgba(22,163,74,.12);  color:var(--success); border-color:rgba(22,163,74,.3); }
.btn-success:hover { background:rgba(22,163,74,.22); }
.btn-warning { background:rgba(217,119,6,.12);  color:var(--warning); border-color:rgba(217,119,6,.3); }
.btn-warning:hover { background:rgba(217,119,6,.22); }
.btn-danger  { background:rgba(220,38,38,.1);   color:var(--danger);  border-color:rgba(220,38,38,.28); }
.btn-danger:hover  { background:rgba(220,38,38,.2); }
.btn-sm { padding:4px 10px; font-size:11px; }
.btn-xs { padding:2px 7px;  font-size:10px; }

/* ── CARDS ─────────────────────────────────────────────── */
.card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r); padding:16px 18px; margin-bottom:12px;
  transition:background .25s;
}
.card-title {
  font-size:13px; font-weight:600; color:var(--text); margin-bottom:10px;
  display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
}
.card-sub { font-size:10.5px; color:var(--text3); }

/* ── KPI GRID ──────────────────────────────────────────── */
.kpi-grid   { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.kpi-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }
.kpi-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r); padding:14px 16px;
  position:relative; overflow:hidden; transition:background .25s;
}
.kpi-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
}
.kpi-card.c-accent::before  { background:var(--accent2); }
.kpi-card.c-teal::before    { background:var(--teal); }
.kpi-card.c-warn::before    { background:var(--warning); }
.kpi-card.c-danger::before  { background:var(--danger); }
.kpi-card.c-success::before { background:var(--success); }
.kpi-card.c-info::before    { background:var(--info); }
.kpi-val   { font-size:26px; font-weight:700; font-family:var(--font-mono); }
.kpi-card.c-accent  .kpi-val { color:var(--accent2); }
.kpi-card.c-teal    .kpi-val { color:var(--teal); }
.kpi-card.c-warn    .kpi-val { color:var(--warning); }
.kpi-card.c-danger  .kpi-val { color:var(--danger); }
.kpi-card.c-success .kpi-val { color:var(--success); }
.kpi-card.c-info    .kpi-val { color:var(--info); }
.kpi-label { font-size:11.5px; color:var(--text2); margin-top:5px; }
.kpi-sub   { font-size:10.5px; color:var(--text3); margin-top:2px; font-family:var(--font-mono); }

/* ── BADGES ────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center;
  font-size:10.5px; font-weight:500; padding:2px 8px; border-radius:20px;
}
.badge-success, .badge-aprovado, .badge-enviado_fluig {
  background:rgba(22,163,74,.1);  color:var(--success); border:1px solid rgba(22,163,74,.25);
}
.badge-danger, .badge-rejeitado, .badge-erro_fluig {
  background:rgba(220,38,38,.1);  color:var(--danger);  border:1px solid rgba(220,38,38,.25);
}
.badge-warning, .badge-revisao_pendente {
  background:rgba(217,119,6,.1);  color:var(--warning); border:1px solid rgba(217,119,6,.25);
}
.badge-info, .badge-extraido {
  background:rgba(2,132,199,.1);  color:var(--info);    border:1px solid rgba(2,132,199,.25);
}
.badge-accent, .badge-pronto_fluig {
  background:rgba(26,82,118,.12); color:var(--accent2); border:1px solid rgba(26,82,118,.28);
}
.badge-gray, .badge-importado {
  background:var(--bg3); color:var(--text3); border:1px solid var(--border);
}

/* ── TABELA ────────────────────────────────────────────── */
.tbl-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:12.5px; }
th {
  text-align:left; padding:8px 10px; color:var(--text3);
  font-weight:600; font-size:10.5px; letter-spacing:.04em;
  text-transform:uppercase; border-bottom:1px solid var(--border); white-space:nowrap;
}
td {
  padding:8px 10px; border-bottom:1px solid var(--border);
  color:var(--text); vertical-align:middle;
}
tr:last-child td { border-bottom:none; }
tr:hover td { background:var(--bg3); }
.td-mono { font-family:var(--font-mono); font-size:11.5px; }
.td-actions { white-space:nowrap; display:flex; gap:4px; align-items:center; }

/* Tabela ordenável */
table.tbl-sortable thead th {
  cursor:pointer; user-select:none; position:relative; transition:color .1s;
}
table.tbl-sortable thead th:hover { color:var(--text); background:rgba(26,82,118,.06); }
table.tbl-sortable thead th.tbl-sort-asc::after  { content:' ▲'; font-size:9px; color:var(--accent2); }
table.tbl-sortable thead th.tbl-sort-desc::after { content:' ▼'; font-size:9px; color:var(--accent2); }

/* ── TOOLBAR TABELA ────────────────────────────────────── */
.tbl-tools {
  display:flex; gap:7px; align-items:center;
  justify-content:flex-end; flex-wrap:wrap; margin:0 0 10px;
}
.tbl-tools-note { font-size:10px; color:var(--text3); margin-right:auto; }
.tbl-btn {
  height:28px; border:1px solid var(--border2);
  background:var(--bg3); color:var(--text2); border-radius:8px;
  padding:0 11px; font-size:11px; font-weight:700;
  cursor:pointer; white-space:nowrap; font-family:var(--font-body); transition:all .15s;
}
.tbl-btn:hover { border-color:rgba(26,82,118,.5); color:var(--text); }
.tbl-btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }

/* ── FILTROS ───────────────────────────────────────────── */
.filter-bar {
  display:flex; gap:9px; align-items:flex-end; flex-wrap:wrap; margin-bottom:12px;
  padding:12px 14px; background:var(--bg2); border:1px solid var(--border); border-radius:var(--r);
}
.filter-bar .form-group { margin:0; flex:1; min-width:130px; }

/* ── PAGINAÇÃO ─────────────────────────────────────────── */
.pagination {
  display:flex; gap:4px; align-items:center;
  justify-content:flex-end; margin-top:12px; flex-wrap:wrap;
}
.pg-info { font-size:10.5px; color:var(--text3); margin-right:auto; }
.pg-btn {
  height:28px; min-width:28px; border:1px solid var(--border2);
  background:var(--bg3); color:var(--text2); border-radius:6px;
  font-size:11.5px; cursor:pointer; font-family:var(--font-body);
  padding:0 7px; transition:all .15s; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
}
.pg-btn:hover { border-color:var(--accent); color:var(--text); }
.pg-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
.pg-btn.disabled { opacity:.4; pointer-events:none; }

/* ── MODAL ─────────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000;
  display:none; align-items:center; justify-content:center; backdrop-filter:blur(3px);
}
.modal-overlay.open { display:flex; }
.modal-box {
  background:var(--bg2); border:1px solid var(--border2);
  border-radius:var(--r); width:min(520px,96vw); max-height:90vh; overflow-y:auto;
  box-shadow:0 20px 70px rgba(0,0,0,.35); animation:modalIn .2s ease;
}
@keyframes modalIn { from{opacity:0;transform:translateY(-10px) scale(.97)} to{opacity:1;transform:none} }
.modal-head {
  padding:16px 18px 12px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.modal-title { font-size:14px; font-weight:700; color:var(--text); }
.modal-close {
  background:none; border:none; color:var(--text2);
  font-size:20px; cursor:pointer; padding:2px 6px; border-radius:4px;
}
.modal-close:hover { color:var(--danger); }
.modal-body    { padding:16px 18px; }
.modal-footer  { padding:12px 18px; border-top:1px solid var(--border); display:flex; gap:7px; justify-content:flex-end; }
.modal-box.modal-lg { width:min(760px,96vw); }

/* ── FORMULÁRIOS ───────────────────────────────────────── */
.form-group { margin-bottom:12px; }
.form-label {
  display:block; font-size:10.5px; font-weight:700;
  color:var(--text2); text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px;
}
.form-input, .form-select, .form-textarea {
  width:100%; background:var(--bg3); border:1px solid var(--border2);
  border-radius:var(--rsm); color:var(--text); font-size:13px;
  font-family:var(--font-body); padding:7px 10px; outline:none; transition:border .15s;
}
.form-input:focus,.form-select:focus,.form-textarea:focus {
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(26,82,118,.1);
}
.form-input::placeholder,.form-textarea::placeholder { color:var(--text3); font-style:italic; }
.form-hint  { font-size:10.5px; color:var(--text3); margin-top:3px; }
.form-error { font-size:10.5px; color:var(--danger); margin-top:3px; }
.form-row   { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:11px; }
.form-textarea { resize:vertical; min-height:76px; }
.form-section {
  font-size:10.5px; font-weight:700; color:var(--accent2);
  text-transform:uppercase; letter-spacing:.07em;
  padding:11px 0 7px; border-bottom:1px solid var(--border); margin-bottom:11px;
}

/* Campo preenchido */
.form-input:not(:placeholder-shown),.form-textarea:not(:placeholder-shown) {
  border-color:rgba(26,82,118,.45); background:var(--bg2);
}
/* Campo vazio */
.form-input:placeholder-shown:not(:focus),.form-textarea:placeholder-shown:not(:focus) {
  border-style:dashed;
}

/* ── UPLOAD ZONE ───────────────────────────────────────── */
.upload-zone {
  border:2px dashed var(--border2); border-radius:var(--r);
  padding:3rem 2rem; text-align:center; cursor:pointer;
  transition:all .2s; background:var(--bg3); display:block;
}
.upload-zone:hover,.upload-zone.dragover {
  border-color:var(--accent); background:var(--bg2);
}
.upload-zone input[type="file"] { display:none; }
.upload-zone-icon { width:44px; height:44px; margin:0 auto .75rem; color:var(--text3); }
.upload-zone-icon svg { width:100%; height:100%; }
.upload-zone-title { font-weight:700; color:var(--text); margin-bottom:.375rem; }
.upload-zone-sub   { font-size:11px; color:var(--text3); }

/* ── DETAIL VIEW ───────────────────────────────────────── */
.detail-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.75rem; }
.detail-field { display:flex; flex-direction:column; gap:.25rem; }
.detail-label { font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text3); }
.detail-value { font-size:13px; color:var(--text); }
.detail-value.mono { font-family:var(--font-mono); font-size:11.5px; }

.section-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; margin-bottom:10px; }
.section-card-header {
  padding:.75rem 1.125rem; background:var(--bg3); border-bottom:1px solid var(--border);
  font-size:11.5px; font-weight:700; color:var(--text2); display:flex; align-items:center; gap:.5rem;
}
.section-card-body { padding:1.125rem; }

/* ── TOAST ─────────────────────────────────────────────── */
#toast-container {
  position:fixed; top:64px; right:18px; z-index:2000;
  display:flex; flex-direction:column; gap:7px; pointer-events:none;
}
.toast {
  background:var(--bg2); border:1px solid var(--border2); border-radius:var(--r);
  padding:10px 14px; font-size:12px; display:flex; align-items:center; gap:9px;
  box-shadow:0 6px 22px rgba(0,0,0,.25); pointer-events:all;
  animation:toastIn .2s ease; max-width:320px;
}
@keyframes toastIn { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:none} }
.toast.success { border-color:rgba(22,163,74,.35); }
.toast.error   { border-color:rgba(220,38,38,.35); }
.toast.warning { border-color:rgba(217,119,6,.35); }
.toast-x { cursor:pointer; color:var(--text3); font-size:16px; margin-left:auto; }

/* ── THEME SWITCHER ────────────────────────────────────── */
#ms-theme-trigger-OLD {
  position:fixed; left:16px; bottom:16px; z-index:999;
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--border2); background:var(--bg2);
  font-size:16px; cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center;
  transition:all .2s;
}
#ms-theme-trigger:hover { transform:translateY(-2px); border-color:var(--accent); }
#ms-theme-panel {
  position:fixed; left:16px; bottom:64px; z-index:1000;
  width:310px; max-height:400px; overflow-y:auto;
  background:var(--bg2); border:1px solid var(--border2);
  border-radius:14px; box-shadow:0 14px 46px rgba(0,0,0,.4);
  display:none; animation:modalIn .18s ease;
}
#ms-theme-panel.open { display:block; }
.ms-th-head {
  padding:10px 14px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:var(--bg2); z-index:2;
}
.ms-th-title { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--text2); }
.ms-th-close { border:0; background:transparent; color:var(--text2); font-size:18px; cursor:pointer; }
.ms-th-search {
  width:calc(100% - 28px); margin:8px 14px;
  padding:7px 10px; border-radius:8px;
  border:1px solid var(--border2); background:var(--bg3);
  color:var(--text); outline:none; font-size:11.5px; font-family:var(--font-body);
}
.ms-th-search:focus { border-color:var(--accent); }
.ms-th-grid { display:grid; gap:2px; padding:0 7px 10px; }
.ms-th-card {
  display:grid; grid-template-columns:68px 1fr; align-items:center; gap:8px;
  padding:7px; border-radius:9px; background:transparent;
  border:0; color:var(--text); text-align:left; cursor:pointer; width:100%; transition:background .14s;
}
.ms-th-card:hover { background:var(--bg3); }
.ms-th-card.active { background:rgba(26,82,118,.15); outline:1px solid rgba(26,82,118,.3); }
.ms-th-preview { height:24px; display:flex; gap:3px; align-items:center; }
.ms-th-preview i { flex:1; height:16px; border-radius:4px; border:1px solid rgba(0,0,0,.08); }
.ms-th-name { font-size:11.5px; font-weight:700; color:var(--text); }
.ms-th-font { display:block; font-size:9.5px; color:var(--text3); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── LOGIN ─────────────────────────────────────────────── */
.login-wrap {
  min-height:100vh; display:flex; align-items:center;
  justify-content:center; background:var(--bg); padding:20px;
}
.login-box  { width:min(400px,100%); }
.login-card {
  background:var(--bg2); border:1px solid var(--border2);
  border-radius:calc(var(--r) * 1.5); padding:2.25rem;
  box-shadow:0 8px 40px rgba(0,0,0,.12);
}
.login-logo { text-align:center; margin-bottom:1.75rem; }
.login-logo-icon {
  width:48px; height:48px; background:var(--accent); border-radius:12px;
  display:flex; align-items:center; justify-content:center; margin:0 auto .75rem;
}
.login-logo-icon svg { width:26px; height:26px; fill:#fff; }
.login-logo-title { font-size:20px; font-weight:700; color:var(--accent2); }
.login-logo-sub   { font-size:11.5px; color:var(--text3); margin-top:4px; }

/* ── RESPONSIVO ────────────────────────────────────────── */
@media(max-width:900px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:none; box-shadow:4px 0 20px rgba(0,0,0,.3); }
  .main { margin-left:0; }
  .sidebar-toggle { display:flex; }
  .kpi-grid { grid-template-columns:repeat(2,1fr); }
  #ms-theme-trigger-OLD { left:10px; bottom:10px; }
  #ms-theme-panel { left:10px; right:10px; bottom:58px; width:auto; }
}
@media(max-width:600px) {
  .form-row,.form-row-3 { grid-template-columns:1fr; }
  .kpi-grid { grid-template-columns:1fr 1fr; }
  .filter-bar { flex-direction:column; }
  .content { padding:14px 14px; }
}

/* ── Tema escuro genérico ──────────────────────────────── */
[data-theme="dark"] .login-card { box-shadow:0 8px 40px rgba(0,0,0,.4); }

/* ── THEME TRIGGER — integrado na sidebar (inferior esquerdo) ── */
#ms-theme-trigger {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 220px;
  height: 42px;
  border-radius: 0;
  border: none;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.05);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  z-index: 101;
  transition: all .2s;
  letter-spacing: .02em;
}
#ms-theme-trigger:hover {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.85);
  transform: none;
}
#ms-theme-panel {
  position: fixed;
  left: 0;
  bottom: 42px;
  z-index: 1000;
  width: 320px;
  max-height: 420px;
  overflow-y: auto;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 0 14px 0 0;
  box-shadow: 6px -6px 40px rgba(0,0,0,.4);
  display: none;
  animation: modalIn .18s ease;
}
#ms-theme-panel.open { display: block; }

/* Ajusta main para não sobrepor o botão de tema */
.main { padding-bottom: 0; }

/* Ajusta sidebar footer para não colidir com o theme trigger */
.sb-footer { padding-bottom: 54px; }

@media(max-width:900px) {
  #ms-theme-trigger { width: 100%; left: 0; bottom: 0; display: none; }
  #ms-theme-trigger.open { display: flex; }
  #ms-theme-panel { left: 0; right: 0; bottom: 42px; width: 100%; border-radius: 14px 14px 0 0; }
}