/* ZapGrupos — Tema Premium Verde Glass | Baseado no BASE violeta, convertido para verde suave */
:root{
  --primary:#1DB954;
  --primary-dark:#0d8a38;
  --primary-soft:rgba(29,185,84,.16);
  --highlight:#F59E0B;
  --radius:22px;
  --radius-lg:18px;
  --radius-md:14px;
  --radius-xl:24px;
  --shadow:0 22px 65px rgba(0,0,0,.38);
  --shadow-sm:0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.12);
  /* Green dark theme */
  --panel-bg:#06160d;
  --panel-bg-2:#0b2e16;
  --card-bg:rgba(12,38,22,.78);
  --card-bg-strong:rgba(8,28,16,.92);
  --sidebar-bg:linear-gradient(180deg, rgba(12,46,22,.97) 0%, rgba(2,18,9,.98) 100%);
  --link-bg:rgba(255,255,255,.055);
  --link-hover:rgba(29,185,84,.20);
  --logout-bg:rgba(255,77,109,.16);
  --logout-hover:rgba(255,77,109,.28);
  --border-color:rgba(180,255,200,.14);
  --border-strong:rgba(180,255,200,.28);
  --text-primary:#ffffff;
  --text-secondary:#c8e6d2;
  --text-muted:#8ec0a0;
  --bg:#06160d;
  --surface:rgba(12,38,22,.78);
  --surface-2:rgba(255,255,255,.045);
  --border:rgba(180,255,200,.14);
  --text:#eafff1;
  --muted:#8ec0a0;
  --sidebar:#06160d;
  --sidebar-2:#0b2e16;
  --danger:#ff4d6d;
  --warning:#f59e0b;
  --info:#5faeff;
  --primary-bg:linear-gradient(135deg, #1ed760 0%, #0fa64a 48%, #065c28 100%);
}
/* Prioriza cor dinâmica do admin: --primary sobrescreve, --primary-bg derivado */
*{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  font-family:Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(circle at 30% 18%, rgba(29,185,84,.28), transparent 36%),
    linear-gradient(135deg, rgba(5,22,13,.88), rgba(8,48,22,.68)),
    var(--page-bg-image, url('../images/background.png')) center center / cover fixed no-repeat,
    #06160d;
  color:var(--text-primary);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.38), transparent 38%, rgba(0,0,0,.22)),
    radial-gradient(circle at 92% 84%, rgba(124,255,107,.07), transparent 22%);
  z-index:-1;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0 0 .35rem;line-height:1.25;font-weight:800;letter-spacing:-.02em;color:#fff}
h1{font-size:1.6rem}h2{font-size:1.25rem}h3{font-size:1.05rem}
p{margin:0 0 .75rem;color:var(--text-secondary)}
.muted{color:var(--text-muted) !important}
.small{font-size:.82rem}
.text-center{text-align:center}
.mt-0{margin-top:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}
.container{width:100%;max-width:1140px;margin:0 auto;padding:0 18px}
.flex{display:flex}.between{justify-content:space-between}.center{align-items:center}
.gap-1{gap:.5rem}.gap-2{gap:1rem}.wrap{flex-wrap:wrap}
.hide{display:none !important}
/* ===== HEADER PÚBLICO ===== */
.site-header{
  position:sticky;top:0;z-index:40;
  background:rgba(6,22,13,.72);
  border-bottom:1px solid var(--border-color);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 8px 32px rgba(0,0,0,.22);
}
.site-header .inner{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.15rem;letter-spacing:-.02em;color:#fff}
.brand .logo-mark{
  width:36px;height:36px;border-radius:11px;background:var(--primary-bg);color:#fff;
  display:grid;place-items:center;font-size:1.1rem;box-shadow:0 8px 20px rgba(29,185,84,.28);
}
.brand img{height:38px;width:auto;filter:drop-shadow(0 8px 18px rgba(0,0,0,.28))}
body.public-page .site-header .brand img{height:42px;width:auto}
/* ===== BOTÕES ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.68rem 1.1rem;border-radius:15px;border:1px solid rgba(255,255,255,.16);
  font-weight:800;font-size:.9rem;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease,background .18s ease;
  background:rgba(255,255,255,.08);color:#fff;line-height:1;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.18);filter:saturate(1.08)}
.btn-primary{background:var(--primary-bg) !important;border-color:rgba(255,255,255,.22) !important;color:#fff !important;box-shadow:0 10px 28px rgba(29,185,84,.28),inset 0 1px 0 rgba(255,255,255,.28) !important}
.btn-outline{background:rgba(255,255,255,.06);border-color:var(--border-color);color:#fff}
.btn-outline:hover{border-color:rgba(29,185,84,.45);color:#fff;background:rgba(29,185,84,.14)}
.btn-danger{background:linear-gradient(135deg,#ff4d6d,#b5174b) !important;border-color:rgba(255,255,255,.2) !important;color:#fff !important}
.btn-warning{background:linear-gradient(135deg,#fbbf24,var(--warning))!important;border-color:rgba(255,255,255,.2)!important;color:#3a2100 !important}
.btn-dark{background:linear-gradient(145deg,var(--sidebar-2),var(--sidebar))!important;border-color:rgba(255,255,255,.12)!important;color:#fff!important}
.btn-sm{padding:.46rem .78rem;font-size:.8rem;border-radius:11px}
.btn-block{width:100%}
.btn[disabled],.btn.disabled{opacity:.55;cursor:not-allowed;transform:none !important}
.btn-lg{padding:.85rem 1.4rem;font-size:.95rem}
/* ===== CARDS ===== */
.card{background:var(--card-bg) !important;border:1px solid var(--border-color) !important;border-radius:var(--radius-xl) !important;box-shadow:var(--shadow) !important;backdrop-filter:blur(16px) !important;overflow:hidden}
.card-body{padding:1.25rem 1.35rem}
.card-head{padding:1rem 1.25rem;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;background:rgba(255,255,255,.02)}
.card-head h2{font-size:1.05rem}
/* ===== STATS ===== */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem}
.stat{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-xl);padding:1.15rem 1.2rem;box-shadow:var(--shadow);backdrop-filter:blur(16px);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.stat:hover{transform:translateY(-4px);border-color:rgba(29,185,84,.32);box-shadow:0 26px 70px rgba(0,0,0,.4)}
.stat .label{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);font-weight:700}
.stat .value{font-size:1.7rem;font-weight:800;letter-spacing:-.02em;margin-top:.3rem;background:linear-gradient(135deg,#ffffff 0%,#b9f5cc 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stat .icon{float:right;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(29,185,84,.14);color:#7CFF6B;font-size:1.05rem;border:1px solid rgba(124,255,107,.18)}
/* ===== BADGES ===== */
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.28rem .65rem;border-radius:999px;font-size:.74rem;font-weight:700;letter-spacing:.02em;border:1px solid rgba(255,255,255,.12)}
.badge-ativo{background:rgba(29,185,84,.16);color:#b9f5cc;border-color:rgba(29,185,84,.28)}
.badge-inativo{background:rgba(255,255,255,.08);color:var(--text-secondary)}
.badge-cheio{background:rgba(255,77,109,.14);color:#ffd5de;border-color:rgba(255,77,109,.24)}
.badge-aprovado{background:rgba(29,185,84,.16);color:#b9f5cc;border-color:rgba(29,185,84,.28)}
.badge-pendente,.badge-aguardando{background:rgba(245,158,11,.16);color:#ffe2b3;border-color:rgba(245,158,11,.28)}
.badge-expirado{background:rgba(255,255,255,.07);color:var(--text-muted)}
.badge-cancelado{background:rgba(255,77,109,.14);color:#ffd5de;border-color:rgba(255,77,109,.24)}
.badge-destaque{background:var(--highlight);color:#fff;box-shadow:0 2px 10px rgba(245,158,11,.28);border-color:rgba(255,255,255,.18)}
.badge-recomendado{background:var(--primary-bg);color:#fff;border-color:rgba(255,255,255,.18)}
/* ===== HERO ===== */
.hero{padding:2.2rem 0 1.2rem;text-align:center}
.hero h1{font-size:clamp(1.6rem,3vw,2.15rem);background:linear-gradient(135deg,#fff 0%,#b9f5cc 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero p{color:var(--text-secondary);max-width:620px;margin:0 auto}
.search-bar{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.35rem 0 1rem}
.search-bar input[type=search]{flex:1;min-width:220px}
.filters{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.45rem}
.filters a{padding:.46rem .92rem;border-radius:999px;border:1px solid var(--border-color);background:rgba(255,255,255,.06);font-size:.85rem;font-weight:700;color:var(--text-secondary);backdrop-filter:blur(10px);transition:.18s}
.filters a.active{background:var(--primary-bg);border-color:rgba(255,255,255,.22);color:#fff;box-shadow:0 8px 20px rgba(29,185,84,.22)}
.filters a:hover{border-color:rgba(255,255,255,.22);color:#fff}
/* ===== GROUP LIST ===== */
.group-list{display:flex;flex-direction:column;gap:1.15rem;padding-bottom:3rem}
.group-card{
  background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-xl);
  overflow:hidden;backdrop-filter:blur(16px);box-shadow:var(--shadow);display:flex;flex-direction:column;position:relative;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
@media (min-width:641px){
  .group-card{width:100%;max-width:500px;margin-inline:auto}
}
.group-card:hover{box-shadow:0 26px 70px rgba(0,0,0,.4);transform:translateY(-3px);border-color:rgba(29,185,84,.28)}
.group-card.is-highlighted{border-color:var(--highlight);box-shadow:0 0 0 1px rgba(245,158,11,.22),var(--shadow)}
.group-banner{position:relative;background:rgba(255,255,255,.04);aspect-ratio:3/1;overflow:hidden}
.group-banner img{width:100%;height:100%;object-fit:cover}
.group-flags{position:absolute;top:.7rem;left:.7rem;display:flex;gap:.4rem;flex-wrap:wrap}
.group-body{padding:1.1rem 1.25rem;display:flex;flex-direction:column;gap:.5rem;background:rgba(0,0,0,.08)}
.group-title{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.group-title h3{margin:0;font-size:1.1rem;color:#fff}
.group-meta{display:flex;gap:1rem;flex-wrap:wrap;color:var(--text-muted);font-size:.85rem}
.group-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.35rem}
.empty{padding:3rem 1rem;text-align:center;color:var(--text-muted)}
/* ===== SUPPORT FAB ===== */
.support-fab{
  position:fixed;right:18px;bottom:18px;z-index:60;display:inline-flex;align-items:center;gap:.5rem;
  background:var(--primary-bg);color:#fff;padding:.78rem 1.1rem;border-radius:999px;font-weight:800;font-size:.88rem;
  box-shadow:0 14px 32px rgba(29,185,84,.35);border:1px solid rgba(255,255,255,.18);
}
.support-fab:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(29,185,84,.45)}
/* ===== AUTH ===== */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:2rem 1rem;
  background:
    radial-gradient(800px 500px at 50% -10%, rgba(29,185,84,.18), transparent 60%),
    linear-gradient(135deg, rgba(5,22,13,.88), rgba(8,48,22,.62)),
    var(--page-bg-image, url('../images/background.png')) center center / cover fixed no-repeat,
    #06160d;
}
.auth-card{width:100%;max-width:430px;background:var(--card-bg);border:1px solid var(--border-color);
  border-radius:var(--radius-xl);box-shadow:var(--shadow);padding:2rem;backdrop-filter:blur(18px)}
.auth-card .brand{justify-content:center;margin-bottom:1.2rem;font-size:1.3rem}
/* ===== FORMS ===== */
.form-group{margin-bottom:1rem}
label{display:block;font-size:.84rem;font-weight:700;margin-bottom:.35rem;color:#fff}
input[type=text],input[type=password],input[type=email],input[type=number],input[type=search],
input[type=url],input[type=tel],input[type=date],input[type=file],select,textarea{
  width:100%;padding:.7rem .9rem;border:1px solid rgba(180,255,200,.18);border-radius:15px;
  font:inherit;background:rgba(0,0,0,.26);color:#fff;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
  min-height:46px;
}
input::placeholder,textarea::placeholder{color:rgba(200,230,210,.5)}
input:focus,select:focus,textarea:focus{outline:none;border-color:rgba(29,185,84,.65) !important;box-shadow:0 0 0 4px rgba(29,185,84,.14) !important;background:rgba(255,255,255,.055) !important}
input[type=color]{width:56px;height:42px;padding:3px;border:1px solid var(--border-color);border-radius:12px;background:rgba(0,0,0,.26)}
textarea{min-height:110px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.help{font-size:.8rem;color:var(--text-muted);margin-top:.3rem}
/* ===== LAYOUT PAINEL ===== */
.layout{display:flex;min-height:100vh}
.sidebar{
  width:286px;flex-shrink:0;background:var(--sidebar-bg);color:#e8fff0;
  display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:1002;
  border-right:1px solid var(--border-color);box-shadow:18px 0 60px rgba(0,0,0,.35);
  padding:18px 14px;overflow-y:auto;transition:transform .28s ease;
}
.sidebar::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 40% 0%, rgba(29,185,84,.22), transparent 34%);
  pointer-events:none;
}
.sidebar .sb-brand{display:flex;align-items:center;gap:.6rem;padding:1rem 1.1rem;color:#fff;font-weight:800;border:1px solid var(--border-color);border-radius:20px;background:rgba(255,255,255,.055);margin-bottom:16px;position:relative;z-index:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.sidebar .sb-brand img{height:32px;width:auto;filter:drop-shadow(0 8px 18px rgba(0,0,0,.3))}
.sidebar nav{padding:.2rem 0;display:flex;flex-direction:column;gap:.38rem;overflow-y:auto;position:relative;z-index:1;flex:1}
.sidebar nav .section{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:#6ec18a;padding:.9rem .6rem .35rem;font-weight:800}
.sidebar nav a{display:flex;align-items:center;gap:.65rem;padding:.66rem .75rem;border:1px solid transparent;border-radius:14px;font-size:.9rem;font-weight:700;color:#c8e6d2;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;background:rgba(255,255,255,.045)}
.sidebar nav a:hover{background:rgba(29,185,84,.16);border-color:rgba(180,255,200,.14);color:#fff;box-shadow:0 10px 24px rgba(0,0,0,.18);transform:translateX(4px)}
.sidebar nav a.active{background:var(--primary-bg) !important;border-color:rgba(255,255,255,.22) !important;color:#fff !important;font-weight:800;box-shadow:0 12px 30px rgba(29,185,84,.28) !important;transform:translateX(4px)}
.sidebar nav a.logout{color:#ffb3c1;background:rgba(255,77,109,.1);border-color:rgba(255,77,109,.14)}
.sidebar nav a.logout:hover{background:rgba(255,77,109,.2);color:#fff}
.main{flex:1;margin-left:286px;min-width:0;display:flex;flex-direction:column}
/* ===== TOPBAR ===== */
.topbar{
  min-height:66px;background:rgba(8,28,16,.62);border-bottom:1px solid var(--border-color);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:12px 1.25rem;position:sticky;top:0;z-index:30;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 8px 32px rgba(0,0,0,.14);
}
.topbar .page-title{font-weight:800;font-size:1.05rem;color:#fff;display:flex;align-items:center;gap:.5rem}
.topbar .actions{display:flex;align-items:center;gap:.65rem}
.avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;display:inline-grid;place-items:center;
  background:var(--primary-bg);color:#fff;font-weight:800;font-size:.85rem;flex:0 0 auto;overflow:hidden;border:1px solid rgba(255,255,255,.14)}
.avatar-link{display:inline-flex;border-radius:50%}
.avatar-sm{width:32px;height:32px;font-size:.72rem}
.avatar-lg{width:96px;height:96px;font-size:1.6rem}
.avatar-edit{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.avatar-form{flex:1 1 220px;min-width:0}
.user-cell{display:flex;align-items:center;gap:.6rem;min-width:0}
.icon-btn{position:relative;width:42px;height:42px;border-radius:13px;border:1px solid var(--border-color);background:rgba(255,255,255,.06);display:grid;place-items:center;cursor:pointer;font-size:1.05rem;color:#fff;transition:.18s;backdrop-filter:blur(10px)}
.icon-btn:hover{background:rgba(255,255,255,.1);transform:translateY(-1px)}
.icon-btn .dot{position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%;background:var(--danger);box-shadow:0 0 10px var(--danger);border:1px solid rgba(255,255,255,.6)}
.dropdown{position:absolute;right:0;top:48px;width:320px;background:var(--card-bg-strong);border:1px solid var(--border-color);border-radius:16px;box-shadow:var(--shadow);padding:.5rem;max-height:380px;overflow:auto;backdrop-filter:blur(18px);z-index:40}
.dropdown .item{padding:.6rem .7rem;border-radius:10px;font-size:.86rem;color:#eafff1}
.dropdown .item:hover{background:rgba(255,255,255,.06)}
.content{padding:1.5rem;flex:1}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem;padding:18px 20px;border:1px solid var(--border-color);border-radius:var(--radius-xl);background:rgba(8,28,16,.56);backdrop-filter:blur(16px);box-shadow:var(--shadow)}
.page-head h1{font-size:clamp(1.25rem,2.2vw,1.55rem)}
.menu-toggle{display:none}
.sb-backdrop{display:none;position:fixed;inset:0;background:rgba(2,12,7,.62);backdrop-filter:blur(8px);z-index:1001;pointer-events:none}
.sb-backdrop.open{pointer-events:auto}
/* ===== TABLE ===== */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;border-radius:12px}
table.data{width:max-content;min-width:100%;border-collapse:collapse;font-size:.88rem;color:#eafff1}
table.data th{
  text-align:left;padding:.75rem .9rem;background:rgba(29,185,84,.14);color:#b9f5cc;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:800;border-bottom:1px solid var(--border-color);white-space:nowrap;
}
table.data td{padding:.78rem .9rem;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:middle;white-space:nowrap;word-break:normal;overflow-wrap:normal;color:#eafff1}
table.data tr:last-child td{border-bottom:none}
table.data tbody tr:hover{background:rgba(255,255,255,.04)}
.thumb{width:64px;height:36px;object-fit:cover;border-radius:9px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.row-actions{display:flex;gap:.35rem;flex-wrap:nowrap;align-items:center;width:max-content}
.tree{margin:.5rem 0 .5rem 1rem;border-left:2px dashed var(--border-color);padding-left:1rem}
.tree .node{padding:.45rem .2rem;font-size:.87rem;display:flex;align-items:center;gap:.6rem;flex-wrap:nowrap;width:max-content;white-space:nowrap;color:#eafff1}
/* ===== MODAL ===== */
.modal{position:fixed;inset:0;background:rgba(2,12,7,.62);backdrop-filter:blur(10px);display:none;z-index:70;padding:1rem;overflow:auto;align-items:center;justify-content:center}
.modal.open{display:flex}
.modal-box{background:var(--card-bg-strong);border:1px solid var(--border-color);border-radius:20px;width:100%;max-width:520px;box-shadow:0 30px 80px rgba(0,0,0,.5);overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 2rem);backdrop-filter:blur(20px)}
.modal-head{padding:1.1rem 1.25rem;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.03)}
.modal-head h3{font-size:1.05rem}
.modal-body{padding:1.25rem;overflow-y:auto}
.modal-foot{padding:1rem 1.25rem;border-top:1px solid var(--border-color);display:flex;justify-content:flex-end;gap:.6rem;flex-wrap:wrap;background:rgba(0,0,0,.12)}
.modal-close{background:rgba(255,255,255,.08);border:1px solid var(--border-color);width:36px;height:36px;border-radius:11px;font-size:1.25rem;cursor:pointer;color:#fff;display:grid;place-items:center;line-height:1;transition:.18s}
.modal-close:hover{background:rgba(255,255,255,.14)}
/* ===== TOASTS ===== */
.toasts{position:fixed;top:16px;right:16px;z-index:90;display:flex;flex-direction:column;gap:.55rem;max-width:360px}
.toast{background:var(--card-bg-strong);border:1px solid var(--border-color);border-left:4px solid var(--info);
  border-radius:13px;padding:.85rem 1rem;box-shadow:var(--shadow);font-size:.88rem;animation:slideIn .25s ease;color:#eafff1;backdrop-filter:blur(16px)}
.toast.success{border-left-color:var(--primary)}
.toast.error{border-left-color:var(--danger)}
.toast.warning{border-left-color:var(--warning)}
@keyframes slideIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
/* ===== ALERTS ===== */
.alert{padding:.9rem 1rem;border-radius:14px;font-size:.88rem;margin-bottom:1rem;border:1px solid var(--border-color);background:rgba(255,255,255,.06);color:#eafff1;backdrop-filter:blur(12px)}
.alert-warning{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.28);color:#ffe2b3}
.alert-danger{background:rgba(255,77,109,.1);border-color:rgba(255,77,109,.24);color:#ffd5de}
.alert-success{background:rgba(29,185,84,.12);border-color:rgba(29,185,84,.26);color:#b9f5cc}
/* ===== QUICK ACTIONS ===== */
.quick-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.85rem}
.quick-actions a{display:flex;align-items:center;gap:.7rem;padding:1rem;border:1px solid var(--border-color);border-radius:16px;background:var(--card-bg);font-weight:700;font-size:.9rem;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;color:#eafff1;backdrop-filter:blur(16px);box-shadow:var(--shadow-sm)}
.quick-actions a:hover{border-color:rgba(29,185,84,.28);color:#fff;transform:translateY(-3px);box-shadow:var(--shadow)}
/* ===== PAGINATION ===== */
.pagination{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:1.15rem}
.pagination a,.pagination span{padding:.46rem .82rem;border-radius:11px;border:1px solid var(--border-color);font-size:.85rem;background:rgba(255,255,255,.06);color:#eafff1;backdrop-filter:blur(10px);font-weight:700}
.pagination .current{background:var(--primary-bg);border-color:rgba(255,255,255,.2);color:#fff;box-shadow:0 8px 20px rgba(29,185,84,.22)}
.pagination a:hover{border-color:rgba(255,255,255,.22);transform:translateY(-1px)}
.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;display:inline-block;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pix-box{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}
.pix-box img{width:240px;height:240px;border:1px solid var(--border-color);border-radius:14px;background:#fff;padding:8px}
.pix-code{width:100%;font-family:ui-monospace,Menlo,monospace;font-size:.76rem;word-break:break-all;background:rgba(0,0,0,.22);border:1px solid var(--border-color);border-radius:12px;padding:.75rem;color:#b9f5cc}
/* ===== TABS ===== */
.tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.tabs a{flex:1 1 140px;text-align:center;padding:.72rem 1rem;border-radius:14px;font-weight:800;
  font-size:.88rem;border:1px solid var(--border-color);background:rgba(255,255,255,.06);color:var(--text-secondary);
  transition:.18s;backdrop-filter:blur(10px)}
.tabs a:hover{border-color:rgba(255,255,255,.18);color:#fff}
.tabs a.active{background:var(--primary-bg);border-color:rgba(255,255,255,.2);color:#fff;
  box-shadow:0 8px 20px rgba(29,185,84,.22)}
/* ===== FILE UPLOAD (BASE style) ===== */
.file-upload{position:relative;display:block;width:100%}
.file-upload input[type=file]{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;inset:0;z-index:2}
.file-upload-label{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-direction:column;
  padding:42px 20px;background:rgba(0,0,0,.22);border:2px dashed rgba(180,255,200,.18);border-radius:16px;color:var(--text-muted);
  cursor:pointer;transition:border-color .18s ease,background .18s ease,color .18s ease;text-align:center;min-height:140px;
}
.file-upload-label:hover{border-color:rgba(29,185,84,.42);background:rgba(29,185,84,.06);color:#b9f5cc}
.file-upload-label.has-file{border-color:rgba(29,185,84,.55);background:rgba(29,185,84,.1);color:#b9f5cc}
.file-info{margin-top:10px;font-size:.8rem;color:var(--text-muted)}
.preview-section{margin-top:1.5rem;padding:18px;background:rgba(0,0,0,.18);border-radius:16px;border:1px solid var(--border-color)}
.preview-section h3{font-size:.95rem;margin-bottom:12px}
.preview-image{width:100%;max-height:360px;object-fit:cover;border-radius:12px;border:1px solid var(--border-color)}
.preview-stage{width:100%;min-height:160px;display:flex;align-items:center;justify-content:center;padding:20px;border-radius:16px;background:rgba(0,0,0,.18);border:1px dashed var(--border-color)}
.preview-logo{max-width:260px;max-height:130px;object-fit:contain;filter:drop-shadow(0 10px 22px rgba(0,0,0,.4))}
/* ===== RESPONSIVE ===== */
@media (max-width:980px){
  .sidebar{transform:translateX(-105%)}
  .sidebar.open{transform:none}
  .sb-backdrop.open{display:block}
  .main{margin-left:0}
  .menu-toggle{display:grid}
  .topbar{padding:10px 14px}
  .content{padding:1rem}
}
@media (max-width:640px){
  .form-row{grid-template-columns:1fr}
  .hero h1{font-size:1.6rem}
  .group-banner{aspect-ratio:2/1}
  .toasts{left:12px;right:12px;max-width:none}
  .support-fab{padding:.7rem .95rem;font-size:.82rem}
  .stats{grid-template-columns:1fr 1fr}
  .site-header .inner{height:60px}
  .modal{padding:.6rem}
  .modal-box{max-width:none;max-height:calc(100vh - 1.2rem);border-radius:16px}
  .modal-foot{flex-wrap:nowrap}
  .modal-foot .btn{flex:1 1 0}
}
@media (max-width:420px){
  .stats{grid-template-columns:1fr}
}
.break-text,.card-body p,.node{overflow-wrap:anywhere}
.group-list-table{min-width:840px}
.group-list-table .group-cell{min-width:220px}
.group-list-table .group-cell-inner{display:flex;align-items:center;gap:.6rem;min-width:max-content}
.group-list-table .group-name{display:block;white-space:nowrap;word-break:normal;overflow-wrap:normal;color:#fff}
.group-list-table .actions-cell{white-space:nowrap;min-width:max-content}
.code-url{display:block;margin-top:.3rem;padding:.6rem .75rem;background:rgba(0,0,0,.22);
  border:1px solid var(--border-color);border-radius:10px;font-size:.78rem;color:#b9f5cc;
  overflow-wrap:anywhere;word-break:break-all;white-space:normal;max-width:100%}
.min-w-0{min-width:0}
.row-actions,.group-actions,.btn-row{display:flex;align-items:center;gap:.5rem}
.row-actions{flex-wrap:nowrap;width:max-content}
.group-actions,.btn-row{flex-wrap:wrap}
.row-actions .btn,.group-actions .btn,.btn-row .btn{flex:0 1 auto;white-space:nowrap}
.row-actions form{display:inline-flex;flex:0 0 auto;margin:0}
.support-fab .fab-text{display:inline}
.support-fab .fab-icon{line-height:1;display:inline-grid;place-items:center}
.support-fab .fab-icon svg{width:20px;height:20px;display:block}
.group-desc{margin:.35rem 0 0}
.group-desc>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.35rem;
  font-size:.85rem;font-weight:700;color:#7CFF6B}
.group-desc>summary::-webkit-details-marker{display:none}
.group-desc>summary::after{content:'▾';transition:transform .15s}
.group-desc[open]>summary::after{transform:rotate(180deg)}
.group-desc .d-open{display:none}
.group-desc[open] .d-closed{display:none}
.group-desc[open] .d-open{display:inline}
.group-desc p{margin-top:.5rem;white-space:pre-line;font-size:.9rem;color:var(--text-secondary)}
.notif-item{display:block;color:inherit;text-decoration:none;border-radius:10px;padding:.6rem .7rem}
.notif-item:hover{background:rgba(255,255,255,.06)}
.notif-item.unread{border-left:3px solid var(--primary);background:rgba(29,185,84,.08)}
.row-focus{background:rgba(29,185,84,.1)}
.hamburger-btn{
  display:none;position:fixed;top:14px;left:14px;z-index:1003;
  background:var(--primary-bg);border:1px solid rgba(255,255,255,.18);
  width:46px;height:46px;border-radius:14px;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
  box-shadow:0 14px 32px rgba(0,0,0,.28);
}
.hamburger-btn span{display:block;width:22px;height:3px;background:#fff;border-radius:8px;transition:.25s}
.hamburger-btn.active span:nth-child(1){transform:rotate(45deg) translate(6px,6px)}
.hamburger-btn.active span:nth-child(2){opacity:0}
.hamburger-btn.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(2,12,7,.55);backdrop-filter:blur(8px);z-index:1001;opacity:0;transition:opacity .25s;pointer-events:none}
.sidebar-overlay.active{pointer-events:auto}
.sidebar-overlay.active{display:block;opacity:1}
@media (max-width:980px){.hamburger-btn{display:flex}}
/* Scrollbars */
.sidebar::-webkit-scrollbar,.table-wrap::-webkit-scrollbar,.dropdown::-webkit-scrollbar{width:7px;height:7px}
.sidebar::-webkit-scrollbar-track,.table-wrap::-webkit-scrollbar-track,.dropdown::-webkit-scrollbar-track{background:rgba(255,255,255,.04)}
.sidebar::-webkit-scrollbar-thumb,.table-wrap::-webkit-scrollbar-thumb,.dropdown::-webkit-scrollbar-thumb{background:rgba(29,185,84,.4);border-radius:99px}
/* Public page container like base */
@media (min-width:641px){
  body.public-page main>.container{width:100%;max-width:500px;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}
  body.public-page main>.container>.hero,
  body.public-page main>.container>.tabs,
  body.public-page main>.container>.search-bar,
  body.public-page main>.container>.filters,
  body.public-page main>.container>.group-list,
  body.public-page main>.container .pagination,
  body.public-page main>.container .group-card{width:100%;max-width:500px;margin-left:auto;margin-right:auto}
  body.public-page main>.container>.hero p{max-width:100%}
}
/* Info box */
.info-box{background:rgba(95,174,255,.1);border:1px solid rgba(95,174,255,.22);color:#d8ecff;padding:14px;border-radius:12px;font-size:.85rem;backdrop-filter:blur(10px)}
/* FIX menu ofuscado: overlay atrás da sidebar, nunca sobre ela */
@media (min-width:981px){
  .sidebar-overlay, .sb-backdrop{display:none !important}
  .sidebar{transform:none !important}
}