*{box-sizing:border-box}
:root{--bg:#0b0d12;--panel:#11141b;--panel2:#151923;--border:#252a34;--text:#eef1f6;--muted:#8f98a8;--accent:#7c5cff}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;min-width:0}
button,input,textarea{font:inherit}
button{touch-action:manipulation}
.layout{display:flex;min-height:100vh}
.sidebar{width:255px;flex:0 0 255px;background:#0f1218;border-right:1px solid var(--border);padding:22px 14px;display:flex;flex-direction:column}
.brand{display:flex;align-items:baseline;gap:7px;padding:4px 12px 22px;font-weight:900;font-size:25px}
.brand-mark{letter-spacing:-1px}.brand-core{font-size:11px;color:var(--muted);letter-spacing:2px}
.channel-card{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:10px;margin:0 4px 20px}
.channel-avatar{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;max-width:34px!important;max-height:34px!important;flex:0 0 34px!important;border-radius:10px;display:grid;place-items:center;background-color:#202635;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;overflow:hidden!important;box-sizing:border-box!important;position:relative;isolation:isolate}.channel-avatar img{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;max-width:34px!important;max-height:34px!important;object-fit:cover!important;object-position:center!important;display:block!important;border-radius:10px!important;position:absolute!important;inset:0!important;margin:0!important}.channel-card>div:last-child{min-width:0;flex:1}
.channel-card strong{display:block;font-size:13px}.channel-card small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
nav{display:flex;flex-direction:column;gap:4px}
nav button{border:0;background:transparent;color:#aeb6c5;text-align:left;padding:11px 12px;border-radius:9px;font-size:14px;cursor:pointer}
nav button span{display:inline-block;width:24px;text-align:center;margin-right:5px;color:#7f899b}
nav button:hover,nav button.active{background:#1b202a;color:#fff}
nav button.active span{color:#fff}
.sidebar-footer{margin-top:auto;padding:20px 12px 4px;color:#667082;font-size:10px;letter-spacing:1px}.sidebar-footer span{float:right}
main{flex:1;padding:34px 42px;max-width:1250px;width:100%;min-width:0}
.topbar{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:32px}
.eyebrow{font-size:10px;letter-spacing:2px;color:#697386;font-weight:800;margin-bottom:7px}
h1{margin:0 0 5px;font-size:30px;letter-spacing:-.5px}h2{margin:0;font-size:21px}h3{margin:0 0 5px;font-size:16px}p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.status{font-size:11px;padding:8px 11px;border-radius:20px;background:#13261b;color:#9ce6b4;border:1px solid #21472d;font-weight:700}.status i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#53d47b;margin-right:5px}
.tab{display:none}.tab.active{display:block}.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.grid{display:grid;gap:14px}.stats-grid{grid-template-columns:repeat(4,1fr)}
.stat,.panel{background:var(--panel);border:1px solid var(--border);border-radius:14px}
.stat{padding:18px;display:flex;align-items:center;gap:12px}.stat-icon{width:38px;height:38px;border-radius:10px;background:#1a1f2a;display:grid;place-items:center;font-size:13px;font-weight:800;flex:0 0 auto}.stat small{display:block;color:var(--muted);font-size:11px;margin-bottom:5px}.stat strong{display:block;font-size:16px;overflow-wrap:anywhere}
.overview-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;margin-top:14px}
.panel{padding:20px}.panel-title{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.panel-title h3{margin-bottom:4px}
.link-btn{background:transparent;border:0;color:#a9b2c2;font-size:12px;cursor:pointer;white-space:nowrap}.link-btn:hover{color:#fff}
.preview-line{margin-top:22px;display:flex;align-items:center;gap:10px;padding:13px 14px;border-radius:10px;background:#0c0f15;border:1px solid #202531}.preview-line strong{font-size:14px;overflow-wrap:anywhere}.preview-line code{margin-left:auto;color:#9aa4b7;font-size:12px}
.command-count{display:flex;align-items:end;gap:10px;margin-top:25px}.command-count strong{font-size:32px}.command-count span{color:var(--muted);font-size:12px;margin-bottom:5px}
.form-panel{max-width:850px}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 16px}
label{display:block;color:#aeb6c5;font-size:12px;margin:10px 0 8px}
input,textarea{display:block;width:100%;margin-top:7px;background:#0b0d12;color:#fff;border:1px solid #303744;border-radius:9px;padding:12px;font-size:16px;line-height:1.3;outline:none;appearance:none;-webkit-appearance:none}
textarea{min-height:110px;resize:vertical}
input:focus,textarea:focus{border-color:#58647a;box-shadow:0 0 0 2px rgba(124,92,255,.12)}
.btn{display:inline-block;background:#fff;color:#111;border:0;border-radius:9px;padding:11px 16px;font-weight:800;cursor:pointer;min-height:44px}.btn:hover{opacity:.9}
.save-row{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:18px}.save-row p{margin-right:auto}.save-row .success{color:#8fe0a7}.save-row .error{color:#e7a1a8}
.info-box{margin-top:14px;padding:12px 14px;border:1px solid var(--border);background:#0d1016;border-radius:10px;color:var(--muted);font-size:12px}
.empty-panel{text-align:center;padding:48px 24px;max-width:700px}.empty-icon{font-size:30px;margin-bottom:10px;color:#697386}.empty-panel h3{margin-bottom:7px}
.command-form{display:grid;grid-template-columns:180px 1fr auto;gap:8px}.list-head{display:grid;grid-template-columns:180px 1fr 70px;gap:8px;color:#687284;font-size:10px;text-transform:uppercase;letter-spacing:1px;padding:22px 10px 8px}.commands-list{border-top:1px solid var(--border)}
.command{display:grid;grid-template-columns:180px 1fr 70px;gap:8px;align-items:center;padding:13px 10px;border-bottom:1px solid var(--border);font-size:12px}.command b{color:#fff}.command-response{color:#aab3c1;overflow-wrap:anywhere}.delete-btn{border:0;background:transparent;color:#d77b84;cursor:pointer;font-size:11px;min-height:40px}
.appearance-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.coming{display:inline-block;font-size:9px;letter-spacing:1.5px;color:#9ca6b8;background:#1b2029;border-radius:20px;padding:5px 8px;margin-bottom:14px}

@media(max-width:900px){
  .sidebar{width:220px;flex-basis:220px}
  main{padding:25px}
  .stats-grid{grid-template-columns:1fr 1fr}
  .overview-grid{grid-template-columns:1fr}
}

@media(max-width:700px){
  .layout{display:block}
  .sidebar{
    position:fixed;left:0;right:0;bottom:0;z-index:100;
    width:100%;height:70px;flex:none;padding:7px 8px 8px;
    border-right:0;border-top:1px solid var(--border);
    background:rgba(15,18,24,.97);backdrop-filter:blur(12px);
  }
  .brand,.channel-card,.sidebar-footer{display:none}
  nav{height:100%;display:grid;grid-template-columns:repeat(6,1fr);gap:2px}
  nav button{font-size:9px;text-align:center;padding:5px 2px;min-width:0;white-space:nowrap}
  nav button span{display:block;width:auto;margin:0 0 2px;font-size:17px;line-height:20px}
  nav button.active{background:#1b202a}
  main{padding:20px 14px 92px;max-width:none}
  .topbar{margin-bottom:22px}
  h1{font-size:25px}
  .status{display:none}
  .stats-grid{grid-template-columns:1fr 1fr;gap:10px}
  .stat{padding:13px 11px;gap:9px;min-width:0}
  .stat-icon{width:34px;height:34px}
  .stat strong{font-size:14px}
  .overview-grid{gap:10px}
  .panel{padding:16px}
  .form-grid,.appearance-grid{grid-template-columns:1fr}
  .command-form{grid-template-columns:1fr}
  .list-head{display:none}
  .command{grid-template-columns:1fr auto}
  .command-response{grid-column:1}
  .delete-btn{grid-column:2;grid-row:1/3}
  .preview-line{flex-wrap:wrap}
  .preview-line code{margin-left:0}
  .save-row{flex-wrap:wrap;justify-content:stretch}
  .save-row p{width:100%;margin:0}
  .save-row .btn{width:100%}
}

@media(max-width:430px){
  main{padding-left:11px;padding-right:11px}
  .stats-grid{grid-template-columns:1fr 1fr}
  .stat{padding:11px 9px}
  .stat-icon{display:none}
  nav button{font-size:8px}
  nav button span{font-size:16px}
}

.sn7-response-preview{margin-top:7px;min-height:110px;padding:12px;border-radius:9px;background:#0b0d12;border:1px solid #303744;color:#e9edf4;font-size:16px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.sn7-response-preview:empty::before{content:"A mensagem que aparecerá no chat será mostrada aqui.";color:#6f7888}
.sn7-edit-response{margin-top:8px;border:1px solid var(--border);background:#151923;color:#aeb6c5;border-radius:8px;padding:8px 12px;font-size:12px;font-weight:700;cursor:pointer}
.sn7-edit-response:hover{color:#fff;background:#1b202a}
.sn7-response-editor[hidden],#points_response_help[hidden]{display:none!important}
.sn7-command-preview{display:block;color:#9ea7b7;font-size:12px;line-height:1.45;margin-top:5px;overflow-wrap:anywhere}
.sn7-command-row.loading{opacity:.72;pointer-events:none}

/* SN7 MODAL - SINGLE IMPLEMENTATION */
body.sn7-modal-open { overflow: hidden !important; }

.sn7-config-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99998 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 8px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: auto !important;
  background: rgba(3,5,9,.78) !important;
}
.sn7-config-modal[hidden] { display: none !important; }

.sn7-config-modal-card {
  position: relative !important;
  display: block !important;
  box-sizing: border-box !important;
  width: min(680px, calc(100vw - 16px)) !important;
  max-width: calc(100vw - 16px) !important;
  max-height: calc(100dvh - 16px) !important;
  margin: auto !important;
  padding: 54px 16px 18px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  flex: 0 1 auto !important;
  border-radius: 16px !important;
}

.sn7-config-close {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 99999 !important;
  float: none !important;
  margin: 0 !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  border: 0 !important;
  line-height: 1 !important;
  font-size: 28px !important;
  cursor: pointer !important;
}

@media (max-width:600px) {
  .sn7-config-modal-card {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    padding: 54px 14px 18px !important;
  }
  .sn7-config-close { top: 8px !important; right: 8px !important; }
}


/* SN7 UI POLISH V1 - COMMAND CARDS + SUBTLE TOUCH */
.sn7-command-panel{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;overflow:visible!important}
.sn7-command-category{padding:0!important;margin:0 0 22px!important;border:0!important}
.sn7-command-category+.sn7-command-category{border-top:0!important}
.sn7-command-head{padding:0 2px 10px!important}
.sn7-command-row{position:relative!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;min-height:88px!important;margin:10px 0!important;padding:16px 14px!important;box-sizing:border-box!important;border:1px solid var(--border)!important;border-radius:16px!important;background:#11151d!important;cursor:pointer!important;overflow:hidden!important;-webkit-tap-highlight-color:transparent!important;transition:border-color .16s ease,background .16s ease,transform .08s ease!important}
.sn7-command-row:first-child{border-top:1px solid var(--border)!important}
.sn7-command-row:hover{background:#141923!important;border-color:#2b3342!important}
.sn7-command-row:active{background:#121720!important;border-color:#30394a!important;transform:scale(.998)!important}
.sn7-command-row>div:first-child{min-width:0!important;flex:1 1 auto!important}
.sn7-command-row code{display:block!important;color:#f4f6fa!important;font-size:16px!important;line-height:1.25!important}
.sn7-command-row small{display:block!important;margin-top:6px!important;color:var(--muted)!important;font-size:13px!important;line-height:1.4!important}
.sn7-command-preview,.sn7-aliases{display:block!important;margin-top:6px!important}
.sn7-command-row>.sn7-command-status-badge{flex:0 0 auto!important}
nav button,.sn7-points-card,.sn7-command-row{-webkit-tap-highlight-color:transparent!important;tap-highlight-color:transparent!important}
nav button:focus,nav button:focus-visible{outline:none!important}
nav button:active{background:inherit!important;box-shadow:none!important;transform:none!important}
nav button.active{position:relative!important;overflow:hidden!important;isolation:isolate!important}
nav button.active::after{content:""!important;position:absolute!important;inset:3px!important;border-radius:inherit!important;background:rgba(255,255,255,.018)!important;pointer-events:none!important;z-index:-1!important}
.sn7-points-card:active,.sn7-command-row:active{box-shadow:none!important}
@media(max-width:700px){.sn7-command-row{min-height:84px!important;margin:9px 0!important;padding:15px 14px!important;border-radius:16px!important}.sn7-command-row code{font-size:15px!important}.sn7-command-row small,.sn7-command-preview,.sn7-aliases{font-size:12px!important}}


/* SN7 UI POLISH V2 - smoother touch, modal layers and loading */
:root{
  --sn7-ease:cubic-bezier(.22,.8,.24,1);
}

/* Confirmation must sit above every configuration/editor modal. */
.sn7-confirm-modal{
  z-index:100100 !important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .16s var(--sn7-ease),visibility 0s linear .16s;
}
.sn7-confirm-modal.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .16s var(--sn7-ease);
}
.sn7-confirm-modal.closing{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.sn7-confirm-card{
  transform:translateY(8px) scale(.985);
  opacity:.98;
  transition:transform .18s var(--sn7-ease),opacity .18s var(--sn7-ease);
}
.sn7-confirm-modal.open .sn7-confirm-card{
  transform:translateY(0) scale(1);
  opacity:1;
}

/* Command editor opens/closes smoothly. */
.sn7-modal.sn7-command-modal{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s var(--sn7-ease),visibility 0s linear .18s;
}
.sn7-modal.sn7-command-modal.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .18s var(--sn7-ease);
}
.sn7-modal.sn7-command-modal .sn7-box{
  transform:translateY(8px) scale(.985);
  opacity:.98;
  transition:transform .18s var(--sn7-ease),opacity .18s var(--sn7-ease);
}
.sn7-modal.sn7-command-modal.open .sn7-box{
  transform:translateY(0) scale(1);
  opacity:1;
}

/* Better mobile touch feedback: short, subtle and consistent. */
.sn7-command-row{
  -webkit-tap-highlight-color:transparent !important;
  transition:
    transform .12s var(--sn7-ease),
    border-color .16s ease,
    background-color .16s ease,
    box-shadow .16s ease !important;
}
.sn7-command-row:active{
  transform:translateY(1px) scale(.996) !important;
  background:#151a22 !important;
  border-color:#394253 !important;
  box-shadow:0 2px 8px rgba(0,0,0,.14) !important;
}
.sn7-command-row.loading{
  opacity:.58 !important;
  transform:none !important;
  pointer-events:none !important;
}

/* Command buttons and modal actions get the same tactile response. */
.sn7-command-panel button,
.sn7-command-modal button,
.sn7-confirm-modal button,
.sn7-config-modal button{
  -webkit-tap-highlight-color:transparent !important;
  transition:
    transform .12s var(--sn7-ease),
    background-color .16s ease,
    border-color .16s ease,
    opacity .16s ease,
    box-shadow .16s ease !important;
}
.sn7-command-panel button:active,
.sn7-command-modal button:active,
.sn7-confirm-modal button:active,
.sn7-config-modal button:active{
  transform:translateY(1px) scale(.985);
}
.sn7-command-panel button:disabled,
.sn7-command-modal button:disabled{
  transform:none !important;
}

/* Softer command refresh/loading instead of an abrupt swap. */
.sn7-command-panel.is-loading{
  opacity:.72;
  transition:opacity .18s ease;
}
.sn7-command-panel.is-loading .sn7-command-row{
  pointer-events:none;
}
.sn7-command-panel.is-ready{
  animation:sn7PanelReady .22s var(--sn7-ease);
}
.sn7-command-panel.is-ready .sn7-command-row{
  animation:sn7CommandReady .22s var(--sn7-ease) both;
}
.sn7-command-panel.is-ready .sn7-command-row:nth-child(2){animation-delay:.018s}
.sn7-command-panel.is-ready .sn7-command-row:nth-child(3){animation-delay:.036s}
.sn7-command-panel.is-ready .sn7-command-row:nth-child(4){animation-delay:.054s}
@keyframes sn7PanelReady{
  from{opacity:.72}
  to{opacity:1}
}
@keyframes sn7CommandReady{
  from{opacity:.72;transform:translateY(3px)}
  to{opacity:1;transform:translateY(0)}
}

/* Spinner is calmer on small screens. */
.sn7-spinner{
  animation:sn7spin .8s linear infinite !important;
  will-change:transform;
}

/* Respect users who disable motion. */
@media (prefers-reduced-motion:reduce){
  .sn7-confirm-modal,
  .sn7-confirm-card,
  .sn7-modal.sn7-command-modal,
  .sn7-modal.sn7-command-modal .sn7-box,
  .sn7-command-row,
  .sn7-command-panel button,
  .sn7-command-modal button,
  .sn7-confirm-modal button,
  .sn7-config-modal button{
    transition:none !important;
    animation:none !important;
  }
}

/* SN7 DESKTOP CARDS — 2 cards por linha, conteúdo completo */
.sn7-desktop-extra-card{display:none!important}

@media (min-width:901px){
  .sn7-points-cards{
    width:100%;
    max-width:none;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    align-items:stretch;
  }

  .sn7-points-card{
    min-width:0;
    min-height:170px;
    padding:20px;
    display:flex;
    align-items:center;
    gap:14px;
  }

  .sn7-points-card-body{
    min-width:0;
    flex:1 1 auto;
    width:auto;
  }

  .sn7-points-card-body small,
  .sn7-points-card-body strong,
  .sn7-points-card-body em{
    display:block;
    max-width:100%;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    word-break:normal;
    overflow-wrap:break-word;
    hyphens:none;
  }

  .sn7-points-card-body small{
    line-height:1.3;
  }

  .sn7-points-card-body strong{
    line-height:1.25;
  }

  .sn7-points-card-body em{
    line-height:1.45;
  }

  .sn7-points-card-arrow{
    flex:0 0 auto;
    align-self:center;
    margin-left:auto;
    white-space:nowrap;
  }
}/* SN7 — SISTEMA DE PONTOS EM LISTA, IGUAL A COMANDOS */
.sn7-desktop-extra-card{display:none!important}

.sn7-points-cards{
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:none;
  gap:10px;
}

.sn7-points-card{
  position:relative;
  width:100%;
  min-width:0;
  min-height:88px;
  margin:0;
  padding:16px 14px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:1px solid var(--border);
  border-radius:16px;
  background:#11151d;
  overflow:hidden;
}

.sn7-points-card:hover{
  background:#141923;
  border-color:#2b3342;
}

.sn7-points-card:active{
  transform:scale(.998);
}

.sn7-points-card-icon{
  flex:0 0 42px;
  width:42px;
  height:42px;
}

.sn7-points-card-body{
  min-width:0;
  flex:1 1 auto;
  width:auto;
}

.sn7-points-card-body small,
.sn7-points-card-body strong,
.sn7-points-card-body em{
  display:block;
  max-width:100%;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  word-break:normal;
  overflow-wrap:break-word;
  hyphens:none;
}

.sn7-points-card-body small{
  margin-bottom:6px;
  line-height:1.4;
  font-size:13px;
}

.sn7-points-card-body strong{
  font-size:16px;
  line-height:1.35;
}

.sn7-points-card-body em{
  margin-top:5px;
  font-size:13px;
  line-height:1.45;
}

.sn7-points-card-arrow{
  flex:0 0 auto;
  align-self:center;
  margin-left:auto;
  white-space:nowrap;
  color:#a9b2c2;
  font-size:12px;
}

/* SN7 MUSIC PLAYER V2 - compacto, mobile-first e sem dependências */
.sn7-music-shell{width:100%;max-width:720px}
.sn7-music-player{
  position:relative;overflow:hidden;width:100%;padding:15px 16px;
  border:1px solid #2b3340;border-radius:17px;
  background:linear-gradient(145deg,#151a23,#0f131a);
  box-shadow:0 12px 32px rgba(0,0,0,.18)
}
.sn7-music-topline,.sn7-music-bottom,.sn7-music-times{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sn7-music-kicker{font-size:9px;letter-spacing:1.8px;font-weight:900;color:#858fa1}
.sn7-music-config{
  width:34px;height:34px;border:1px solid #303846;border-radius:10px;
  background:#181e28;color:#aeb6c5;cursor:pointer;font-size:16px;
  transition:transform .12s ease,background .12s ease,border-color .12s ease
}
.sn7-music-main{display:flex;align-items:center;gap:12px;padding:13px 0 11px}
.sn7-music-art{
  width:48px;height:48px;flex:0 0 48px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(145deg,#262d3a,#151a22);border:1px solid #343d4d;
  color:#c4baff;font-size:21px
}
.sn7-music-info{min-width:0;flex:1}
.sn7-music-label{display:block;font-size:8px;letter-spacing:1.5px;color:#7e8798;font-weight:800;margin-bottom:3px}
.sn7-music-info strong{display:block;font-size:15px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sn7-music-info>span:last-child{display:block;color:#929bac;font-size:11px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sn7-music-progress{height:3px;background:#252b36;border-radius:999px;overflow:hidden}
.sn7-music-progress span{display:block;height:100%;width:0;background:#b7abff;border-radius:inherit;transition:width .18s linear}
.sn7-music-times{font-size:9px;color:#717b8d;margin-top:5px}
.sn7-music-controls{display:flex;align-items:center;justify-content:center;gap:9px;padding:10px 0 9px}
.sn7-music-btn,.sn7-volume-btn{
  width:36px;height:36px;border:1px solid #303846;border-radius:50%;
  background:#181e28;color:#dce1e9;cursor:pointer;font-size:16px;
  display:grid;place-items:center;transition:transform .12s ease,background .12s ease,border-color .12s ease,opacity .12s ease;
  -webkit-tap-highlight-color:transparent
}
.sn7-music-btn.primary{width:44px;height:44px;background:#fff;color:#10131a;border-color:#fff;font-size:17px}
.sn7-music-btn:active,.sn7-volume-btn:active,.sn7-music-config:active,.sn7-music-queue-toggle:active,.sn7-subtle:active{transform:scale(.92)}
.sn7-music-btn:hover,.sn7-volume-btn:hover,.sn7-music-config:hover{background:#202734;border-color:#3b4555}
.sn7-music-btn.primary:hover{background:#eef0f4;border-color:#eef0f4}
.sn7-music-volume{display:flex;align-items:center;gap:5px;margin-left:5px;color:#9099a9;font-size:12px}
.sn7-volume-value{min-width:22px;text-align:center;color:#e2e6ed;font-size:11px;font-weight:800}
.sn7-volume-btn{width:29px;height:29px;border-radius:9px;font-size:17px}
.sn7-music-bottom{padding-top:8px;border-top:1px solid rgba(255,255,255,.06);font-size:10px;color:#788294;min-width:0}
.sn7-music-bottom>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sn7-music-queue-toggle{
  display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
  border:1px solid #303846;border-radius:9px;background:#151b24;color:#aeb6c5;
  padding:7px 9px;font-size:10px;font-weight:800;cursor:pointer;
  transition:transform .12s ease,background .12s ease,border-color .12s ease;
  -webkit-tap-highlight-color:transparent
}
.sn7-music-queue-toggle:hover{background:#1c2330;border-color:#3b4555;color:#fff}
.sn7-music-queue-toggle b{color:#c4baff;font-size:10px}
.sn7-music-queue-card{max-width:560px!important}
.sn7-music-queue-modal-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px;padding-right:52px;min-height:38px}
.sn7-music-queue-modal-head h3{margin:3px 0 0;font-size:18px}
.sn7-queue-clear{white-space:nowrap}
.sn7-music-queue{display:grid;gap:5px}
.sn7-music-empty{padding:20px 6px;color:var(--muted);font-size:12px;text-align:center}
.sn7-music-row{
  display:flex;align-items:center;gap:9px;padding:9px 7px;
  border:1px solid transparent;border-radius:11px;transition:background .12s ease,border-color .12s ease
}
.sn7-music-row:hover{background:#151a22;border-color:#252c37}
.sn7-music-number{width:22px;color:#697386;font-size:10px;text-align:center;flex:0 0 22px}
.sn7-music-row-info{min-width:0;flex:1}
.sn7-music-row-info strong{display:block;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sn7-music-row-info small{display:block;color:var(--muted);font-size:10px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sn7-music-provider{font-size:8px;text-transform:uppercase;letter-spacing:1px;color:#798396;flex:0 0 auto}
.sn7-music-remove{
  width:32px;height:32px;border:1px solid transparent;border-radius:9px;background:transparent;
  color:#7f899a;cursor:pointer;padding:0;font-size:17px;display:grid;place-items:center;
  transition:transform .12s ease,background .12s ease,color .12s ease
}
.sn7-music-remove:hover{color:#ff9ca6;background:rgba(255,90,105,.08);border-color:rgba(255,90,105,.15)}
.sn7-music-remove:active{transform:scale(.88)}
.sn7-music-queue-message{margin-top:8px;font-size:11px;color:#ff9ca6}
.sn7-music-source-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
.sn7-source-card{display:flex!important;align-items:center;gap:10px;margin:0!important;padding:13px;border:1px solid var(--border);border-radius:12px;background:#0d1117;cursor:pointer}
.sn7-source-card:hover{border-color:#384152;background:#121720}
.sn7-source-icon{width:34px;height:34px;border-radius:9px;background:#181e28;display:grid;place-items:center;color:#b7abff;font-weight:800;flex:0 0 34px}
.sn7-source-icon.has-avatar{overflow:hidden;padding:0;background:#181e28}
.sn7-source-icon.has-avatar img{width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit}
.sn7-source-card span:nth-child(2){min-width:0;flex:1}
.sn7-source-card strong{display:block;font-size:13px}
.sn7-source-card small{display:block;color:var(--muted);font-size:10px;margin-top:3px}
.sn7-source-card input{width:18px;height:18px;margin:0;accent-color:#b7abff}
.sn7-music-security-note{display:flex;gap:10px;margin-top:14px;padding:12px;border:1px solid #29313e;border-radius:11px;background:#0d1117;color:#aeb6c5}
.sn7-music-security-note>span{font-size:16px}
.sn7-music-security-note strong{display:block;font-size:12px;color:#e5e9ef}
.sn7-music-security-note small{display:block;font-size:10px;line-height:1.5;margin-top:3px;color:#7f899a}
@media(max-width:600px){
  .sn7-music-player{padding:13px 14px;border-radius:15px}
  .sn7-music-main{gap:10px;padding:11px 0 9px}
  .sn7-music-art{width:48px;height:48px;flex-basis:48px}
  .sn7-music-info strong{font-size:14px}
  .sn7-music-controls{gap:7px}
  .sn7-music-volume{margin-left:2px;gap:4px}
  .sn7-volume-btn{width:28px;height:28px}
  .sn7-music-queue-modal-head{display:block;padding-right:52px;min-height:0}
  .sn7-music-queue-modal-head .sn7-subtle{padding:8px 9px;margin-top:10px}
  .sn7-music-row{padding:8px 4px}
  .sn7-music-provider{display:none}
}


/* SN7 MUSIC V3 - conexões + modal mobile estável */
.sn7-source-card{
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr) auto auto;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:9px;
  row-gap:4px;
  padding:11px!important;
}
.sn7-source-card .sn7-source-icon{grid-column:1;grid-row:1 / span 2}
.sn7-source-card>span:nth-child(2){grid-column:2;grid-row:1;min-width:0}
.sn7-source-card .sn7-connection-status{grid-column:3;grid-row:1;justify-self:end}
.sn7-source-card .sn7-source-action{grid-column:4;grid-row:1;justify-self:end}
.sn7-source-card .sn7-source-allow{grid-column:2 / span 3;grid-row:2;display:inline-flex!important;align-items:center;gap:5px;margin:0!important;color:#7f899a;font-size:9px}
.sn7-source-card .sn7-source-allow input{width:15px;height:15px;margin:0;accent-color:#b7abff}
.sn7-source-card strong{font-size:12px!important}
.sn7-source-card small{font-size:9px!important}
.sn7-connection-status{
  width:25px;height:25px;border-radius:7px;display:grid;place-items:center;
  border:1px solid #303846;background:#0b0f15;color:#ff9ca6;font-size:14px;font-weight:900;
  flex:0 0 25px;
}
.sn7-connection-status.connected{color:#72e5a0;border-color:#2d6947;background:#10251a}
.sn7-connection-status.neutral{color:#697386;border-color:#303846;background:#11151d}
.sn7-source-action{
  min-height:29px!important;padding:6px 8px!important;border:1px solid #303846!important;
  border-radius:8px!important;background:#181e28!important;color:#dce1e9!important;
  font-size:9px!important;font-weight:800!important;cursor:pointer!important;white-space:nowrap;
}
.sn7-source-action:hover{background:#202734!important;border-color:#3b4555!important}
.sn7-source-action:active{transform:scale(.94)}
.sn7-source-card{transition:transform .14s ease, border-color .14s ease, background .14s ease; -webkit-tap-highlight-color:transparent}
.sn7-source-card:active{transform:scale(.985);border-color:#4a5568;background:#121821}
.sn7-source-action:focus-visible{outline:2px solid #9b8cff;outline-offset:2px}
.sn7-source-action.is-connecting{opacity:.72;transform:scale(.96);cursor:wait!important}
.sn7-source-card.is-connecting{border-color:#5a4fb2;background:#111522}
.sn7-source-card.is-connecting .sn7-source-icon{transform:scale(.94);transition:transform .14s ease}

.sn7-music-public-box{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;
  padding:12px;border:1px solid var(--border);border-radius:11px;background:#0d1117;
}
.sn7-music-public-box strong{display:block;font-size:12px;color:#e5e9ef}
.sn7-music-public-box small{display:block;color:#7f899a;font-size:10px;line-height:1.45;margin-top:3px}
.sn7-public-toggle{display:flex!important;align-items:center;gap:6px!important;margin:0!important;white-space:nowrap!important;color:#aeb6c5!important;font-size:10px!important}
.sn7-public-toggle input{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
body.sn7-modal-open{overflow:hidden!important;overscroll-behavior:none!important}
.sn7-config-modal{
  height:100svh!important;min-height:100svh!important;
  align-items:flex-start!important;
  padding:12px max(8px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
}
.sn7-config-modal-card{
  max-height:calc(100svh - 24px)!important;
  margin:0 auto!important;
}
@media(max-width:600px){
  .sn7-source-card{grid-template-columns:32px minmax(0,1fr) auto;column-gap:8px}
  .sn7-source-card .sn7-source-action{grid-column:3;grid-row:2}
  .sn7-source-card .sn7-connection-status{grid-column:3;grid-row:1}
  .sn7-source-card .sn7-source-allow{grid-column:2;grid-row:2}
  .sn7-source-action{min-height:27px!important;padding:5px 7px!important}
  .sn7-music-public-box{align-items:flex-start;flex-direction:column}
}

.sn7-music-future-note{margin-top:9px;color:#697386;font-size:9px;line-height:1.45}

/* SN7 MUSIC V4 - status visual e permissões sem ruído */
.sn7-source-card .sn7-source-allow:not(.sn7-link-allow){display:none!important}
.sn7-link-allow{grid-column:3 / span 2!important;grid-row:1!important;justify-self:end!important}
.sn7-link-allow{display:inline-flex!important;align-items:center!important;gap:7px!important}
.sn7-link-allow input{
  appearance:none!important;-webkit-appearance:none!important;
  width:25px!important;height:25px!important;flex:0 0 25px!important;
  margin:0!important;border:1px solid #303846!important;border-radius:7px!important;
  background:#0b0f15!important;display:grid!important;place-items:center!important;
  position:relative!important;
}
.sn7-link-allow input:checked{border-color:#2d6947!important;background:#10251a!important}
.sn7-link-allow input:checked::after{content:"✓";color:#72e5a0;font-size:14px;font-weight:900;line-height:1}
.sn7-toggle-status{width:25px;height:25px;border-radius:7px;display:grid;place-items:center;border:1px solid #303846;background:#0b0f15;color:#ff9ca6;font-size:14px;font-weight:900}
.sn7-toggle-status.connected{color:#72e5a0;border-color:#2d6947;background:#10251a}
.sn7-toggle-status.disconnected{color:#ff9ca6;border-color:#5d3038;background:#211015}
.sn7-public-toggle{cursor:pointer}
.sn7-public-toggle:active{transform:scale(.98)}


/* SN7 MUSIC V5 - controles monocromáticos, toque discreto e status perfeitamente centralizado */
.sn7-music-btn,
.sn7-volume-btn,
.sn7-music-config,
.sn7-music-queue-toggle,
.sn7-source-card,
.sn7-source-action,
.sn7-link-allow,
.sn7-public-toggle,
.sn7-config-close,
.sn7-config-modal button,
.sn7-config-modal label {
  -webkit-tap-highlight-color: transparent !important;
  tap-highlight-color: transparent !important;
}

.sn7-music-btn.primary {
  position: relative;
  overflow: hidden;
}
.sn7-play-icon,
.sn7-pause-icon {
  display:block;
  width:18px;
  height:18px;
  position:relative;
  flex:0 0 18px;
}
.sn7-play-icon {
  width:0;
  height:0;
  margin-left:3px;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
  border-left:14px solid currentColor;
}
.sn7-pause-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.sn7-pause-icon i {
  display:block;
  width:4px;
  height:15px;
  border-radius:1.5px;
  background:currentColor;
}
.sn7-music-btn.primary.is-playing .sn7-pause-icon i {
  background:#171a20;
}
.sn7-music-btn.primary .sn7-play-icon {
  color:#11141a;
}
.sn7-music-btn.primary:active,
.sn7-music-btn.primary:focus-visible {
  transform:none;
}
.sn7-music-btn:active,
.sn7-volume-btn:active,
.sn7-music-config:active,
.sn7-music-queue-toggle:active,
.sn7-subtle:active {
  transform:scale(.965);
  background:inherit;
}

/* Ícone de volume sem emoji: mantém a mesma linguagem visual do player. */
.sn7-volume-icon {
  position:relative;
  display:inline-block;
  width:17px;
  height:17px;
  flex:0 0 17px;
  color:#aeb6c5;
}
.sn7-volume-icon::before {
  content:"";
  position:absolute;
  left:1px;
  top:6px;
  width:5px;
  height:6px;
  border-radius:1px;
  background:currentColor;
}
.sn7-volume-icon::after {
  content:"";
  position:absolute;
  left:4px;
  top:4px;
  width:7px;
  height:9px;
  background:currentColor;
  clip-path:polygon(0 35%,45% 0,45% 100%,0 65%);
}
.sn7-volume-icon {
  background:radial-gradient(circle at 67% 50%, transparent 0 4px, currentColor 4.5px 5.5px, transparent 6px 100%);
}
.sn7-volume-icon.is-muted { color:#70798a; }
.sn7-volume-icon.is-muted::before { opacity:.7; }
.sn7-volume-icon.is-muted::after { opacity:.7; }
.sn7-volume-icon.is-muted { background:none; }
.sn7-volume-icon.is-muted {
  overflow:hidden;
}
.sn7-volume-icon.is-muted span { display:none; }

/* Remove o flash azul nativo do Android/Chrome sem eliminar o foco de teclado. */
html, body, button, input, label, a, select, textarea {
  -webkit-tap-highlight-color: transparent !important;
}
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
label:focus:not(:focus-visible) {
  outline:none !important;
  box-shadow:none !important;
}

/* ✓ fica matematicamente centralizado dentro do quadrado. */
.sn7-link-allow input {
  position:relative !important;
  display:block !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  text-indent:0 !important;
  line-height:1 !important;
}
.sn7-link-allow input:checked::after {
  content:"✓" !important;
  position:absolute !important;
  inset:0 !important;
  display:grid !important;
  place-items:center !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  color:#72e5a0 !important;
  font-size:15px !important;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif !important;
  font-weight:900 !important;
  line-height:1 !important;
  transform:none !important;
}
.sn7-link-allow:active { transform:none !important; }
.sn7-source-card:active {
  transform:scale(.995) !important;
  border-color:#303846 !important;
  background:#0d1117 !important;
}
.sn7-source-action:active {
  transform:scale(.985) !important;
}
.sn7-config-modal-card button:active,
.sn7-config-modal-card label:active {
  filter:none !important;
  box-shadow:none !important;
}


/* Checkbox de Links: estrutura própria para o ✓ nunca depender do alinhamento nativo do input. */
.sn7-link-allow {
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:7px !important;
  min-width:0 !important;
}
.sn7-link-allow input {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
.sn7-checkbox-box {
  width:25px !important;
  height:25px !important;
  flex:0 0 25px !important;
  box-sizing:border-box !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid #303846 !important;
  border-radius:7px !important;
  background:#0b0f15 !important;
  color:transparent !important;
  font:900 15px/1 system-ui,-apple-system,"Segoe UI",sans-serif !important;
  transition:background .14s ease,border-color .14s ease,color .14s ease,transform .12s ease !important;
}
.sn7-link-allow input:checked + .sn7-checkbox-box {
  border-color:#2d6947 !important;
  background:#10251a !important;
  color:#72e5a0 !important;
}
.sn7-link-allow:active .sn7-checkbox-box {
  transform:scale(.98) !important;
}
.sn7-link-allow > span:last-child {
  white-space:nowrap !important;
}

/* ============================================================
   SN7 CORE 1.9.0 — NAVIGATION + RESPONSIVE DESIGN
   Redesign consolidado. Mantém a paleta atual e não altera
   componentes funcionais; apenas reorganiza a apresentação.
   ============================================================ */

:root{
  --sn7-accent:#9b8cff;
  --sn7-accent-soft:rgba(155,140,255,.14);
  --sn7-border-soft:rgba(255,255,255,.075);
  --sn7-sidebar:#0d1016;
  --sn7-sidebar-card:#121722;
  --sn7-shadow:0 18px 55px rgba(0,0,0,.28);
  --sn7-ease:cubic-bezier(.22,.8,.24,1);
}

html{background:#080a0f}
body{
  background:
    radial-gradient(900px 500px at 72% -12%,rgba(111,91,255,.10),transparent 62%),
    radial-gradient(700px 500px at 5% 32%,rgba(65,105,180,.055),transparent 62%),
    #080a0f;
}

/* ---------- DESKTOP / TABLET ---------- */
.layout{
  display:flex;
  min-height:100vh;
  align-items:stretch;
}

.sidebar{
  position:sticky;
  top:0;
  z-index:50;
  width:272px;
  flex:0 0 272px;
  height:100vh;
  padding:22px 14px 16px;
  display:flex;
  flex-direction:column;
  gap:0;
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(255,255,255,.025),transparent 30%),
    rgba(10,13,18,.94);
  border-right:1px solid var(--sn7-border-soft);
  box-shadow:10px 0 40px rgba(0,0,0,.12);
  backdrop-filter:blur(22px) saturate(125%);
  -webkit-backdrop-filter:blur(22px) saturate(125%);
}

.sidebar::after{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  left:-130px;
  top:80px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(155,140,255,.09),transparent 70%);
  pointer-events:none;
}

.brand{
  position:relative;
  z-index:1;
  display:flex;
  align-items:baseline;
  gap:8px;
  min-height:42px;
  padding:5px 12px 17px;
}

.brand-mark{
  letter-spacing:-1.5px;
  font-size:25px;
  line-height:1;
  text-shadow:0 8px 28px rgba(124,92,255,.22);
}

.brand-core{
  font-size:10px;
  letter-spacing:2.4px;
  color:var(--muted);
}

.channel-card{
  position:relative;
  z-index:1;
  margin:8px 2px 18px;
  padding:12px;
  gap:11px;
  min-height:66px;
  border:1px solid var(--sn7-border-soft);
  border-radius:18px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),
    var(--sn7-sidebar-card);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 10px 28px rgba(0,0,0,.14);
}

.channel-card strong{font-size:13px}
.channel-card small{font-size:11px}

.channel-avatar{
  border-radius:13px;
  box-shadow:0 0 0 3px rgba(155,140,255,.07);
}

.sidebar nav{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:0 2px;
}

.sidebar nav button{
  position:relative;
  width:100%;
  min-height:52px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:9px 13px;
  border:1px solid transparent;
  border-radius:15px;
  background:transparent;
  color:#9ca5b5;
  text-align:left;
  font-size:13px;
  font-weight:650;
  line-height:1.2;
  white-space:nowrap;
  cursor:pointer;
  overflow:hidden;
  transform:translateZ(0);
  transition:
    transform .20s var(--sn7-ease),
    background .20s ease,
    border-color .20s ease,
    color .20s ease,
    box-shadow .20s ease;
}

.sidebar nav button::before{
  content:"";
  position:absolute;
  left:-1px;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:99px;
  background:var(--sn7-accent);
  opacity:0;
  transform:scaleY(.35);
  transition:opacity .20s ease,transform .20s var(--sn7-ease);
}

.sidebar nav button:hover{
  color:var(--text);
  background:rgba(255,255,255,.035);
  transform:translateX(2px);
}

.sidebar nav button.active{
  color:var(--text);
  background:
    linear-gradient(135deg,rgba(155,140,255,.15),rgba(155,140,255,.055)),
    rgba(255,255,255,.012);
  border-color:rgba(155,140,255,.20);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 10px 28px rgba(0,0,0,.16);
}

.sidebar nav button.active::before{
  opacity:1;
  transform:scaleY(1);
}

.sidebar nav button > span:first-child{
  width:30px;
  min-width:30px;
  height:30px;
  margin:0;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.055);
  border-radius:10px;
  background:rgba(255,255,255,.025);
  color:#7f899b;
  font-size:16px;
  line-height:1;
  transition:transform .20s var(--sn7-ease),background .20s ease,color .20s ease;
}

.sidebar nav button.active > span:first-child{
  color:#d8d3ff;
  background:rgba(155,140,255,.12);
  border-color:rgba(155,140,255,.17);
  transform:scale(1.04);
}

.sidebar nav button:hover > span:first-child{
  color:var(--text);
}

.sidebar nav button .sn7-nav-label{
  min-width:0;
  overflow:visible;
  text-overflow:clip;
  white-space:nowrap;
  font-size:13px;
  line-height:1.2;
}

.sidebar nav button .sn7-nav-label::after{
  content:none !important;
}

.sidebar nav button .sn7-nav-profile-icon{
  overflow:hidden!important;
  display:grid!important;
  place-items:center!important;
  border-radius:10px!important;
  flex:0 0 30px!important;
}

.sidebar nav button .sn7-nav-profile-icon.has-avatar{
  border-radius:10px!important;
}

.sidebar-footer{
  position:relative;
  z-index:1;
  margin-top:auto;
  padding:15px 12px 3px;
  border-top:1px solid rgba(255,255,255,.045);
  color:#667082;
  font-size:10px;
  letter-spacing:1px;
}

.sidebar-footer span{float:right;color:#858da0}

/* ---------- CONTEÚDO ---------- */
main{
  flex:1;
  width:100%;
  max-width:1440px;
  min-width:0;
  margin:0 auto;
  padding:32px clamp(22px,4vw,52px) 70px;
}

.topbar{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  min-height:112px;
  margin-bottom:24px;
  padding:25px 27px;
  border:1px solid var(--sn7-border-soft);
  border-radius:23px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),
    rgba(12,15,21,.72);
  box-shadow:var(--sn7-shadow);
  overflow:hidden;
}

.topbar::after{
  content:"";
  position:absolute;
  width:300px;
  height:300px;
  right:-150px;
  top:-190px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(155,140,255,.16),transparent 68%);
  pointer-events:none;
}

.topbar h1{
  position:relative;
  z-index:1;
  font-size:clamp(26px,3vw,36px);
  letter-spacing:-1.1px;
  margin-top:5px;
}

.topbar p{position:relative;z-index:1;max-width:650px}
.topbar .status{position:relative;z-index:2}

.tab{
  animation:sn7TabIn .22s var(--sn7-ease) both;
}

@keyframes sn7TabIn{
  from{opacity:0;transform:translateY(5px)}
  to{opacity:1;transform:none}
}

.sn7-welcome{
  max-width:none;
  padding:36px clamp(24px,4vw,44px);
  border-radius:24px;
  background:
    radial-gradient(500px 240px at 100% 0,rgba(155,140,255,.13),transparent 70%),
    linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  box-shadow:var(--sn7-shadow);
}

.sn7-welcome h2{font-size:clamp(26px,4vw,38px);letter-spacing:-1.1px}
.sn7-points-cards{max-width:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}

.sn7-points-card{
  min-height:138px;
  padding:20px;
  border-radius:20px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),
    var(--panel);
  box-shadow:0 12px 35px rgba(0,0,0,.16);
  transition:transform .20s var(--sn7-ease),border-color .20s ease,box-shadow .20s ease;
}

.sn7-points-card:hover{
  transform:translateY(-3px);
  border-color:rgba(155,140,255,.28);
  box-shadow:0 18px 42px rgba(0,0,0,.23);
}

.sn7-points-card-icon{
  width:46px;height:46px;flex-basis:46px;
  border:1px solid rgba(155,140,255,.14);
  background:var(--sn7-accent-soft);
}

.sn7-points-card-body strong{font-size:18px}
.sn7-points-card-arrow{font-weight:700}
.sn7-ranking-list{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr))}

.sn7-ranking-row{
  min-height:74px;
  border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),var(--panel);
  transition:transform .18s ease,border-color .18s ease;
}

.sn7-ranking-row:hover{transform:translateY(-2px);border-color:rgba(155,140,255,.22)}

.sn7-command-panel{
  border-radius:22px;
  border-color:var(--sn7-border-soft);
  box-shadow:var(--sn7-shadow);
}

.sn7-command-row{
  border-radius:15px!important;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}

.sn7-command-row:hover{
  transform:translateX(2px);
  border-color:rgba(155,140,255,.20)!important;
}

/* ---------- TABLET ---------- */
@media(max-width:1050px){
  .sidebar{width:238px;flex-basis:238px}
  .sidebar nav button{padding-left:10px;padding-right:10px}
  main{padding-left:24px;padding-right:24px}
  .sn7-points-cards{grid-template-columns:1fr 1fr}
  .sn7-points-card:last-child{grid-column:1/-1}
}

@media(max-width:820px) and (min-width:701px){
  .sidebar{width:86px;flex-basis:86px;padding-left:9px;padding-right:9px}
  .brand{justify-content:center;padding-left:0;padding-right:0}
  .brand-core,.channel-card>div:last-child,.sidebar-footer span{display:none}
  .channel-card{justify-content:center;margin-left:0;margin-right:0;padding:10px}
  .sidebar nav button{justify-content:center;padding:9px}
  .sidebar nav button > span:first-child{width:38px;min-width:38px;height:38px}
  .sidebar nav button .sn7-nav-label{display:none}
  .sidebar-footer{text-align:center;padding-left:0;padding-right:0}
  .sidebar-footer{font-size:9px}
  main{padding-left:20px;padding-right:20px}
}

/* ---------- MOBILE ---------- */
@media(max-width:700px){
  body{
    min-width:0;
    padding-bottom:calc(94px + env(safe-area-inset-bottom));
  }

  .layout{display:block;min-height:100dvh}

  .sidebar{
    position:fixed;
    left:10px;
    right:10px;
    bottom:calc(9px + env(safe-area-inset-bottom));
    z-index:1000;
    width:auto;
    height:78px;
    min-height:78px;
    padding:7px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:25px;
    background:
      linear-gradient(180deg,rgba(255,255,255,.035),transparent 45%),
      rgba(14,17,24,.96);
    box-shadow:
      0 22px 55px rgba(0,0,0,.38),
      0 5px 16px rgba(0,0,0,.20),
      inset 0 1px 0 rgba(255,255,255,.045);
    backdrop-filter:blur(20px) saturate(125%);
    -webkit-backdrop-filter:blur(20px) saturate(125%);
    overflow:visible;
  }

  .sidebar::after{display:none}
  .brand,.channel-card,.sidebar-footer{display:none}

  .sidebar nav{
    width:100%;
    height:64px;
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:4px;
    padding:0;
  }

  .sidebar nav button{
    min-width:0;
    min-height:64px;
    height:64px;
    margin:0;
    padding:5px 2px 6px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:3px;
    border:1px solid transparent;
    border-radius:18px;
    background:transparent;
    color:#8f98a8;
    text-align:center;
    font-size:8.5px;
    font-weight:700;
    line-height:1.05;
    white-space:nowrap;
    overflow:hidden;
  }

  .sidebar nav button::before{
    left:50%;
    top:auto;
    bottom:4px;
    width:18px;
    height:2px;
    transform:translateX(-50%) scaleX(.2);
    opacity:0;
  }

  .sidebar nav button:hover{transform:none;background:transparent}
  .sidebar nav button:active{transform:scale(.95)}

  .sidebar nav button.active{
    transform:translateY(-3px);
    background:
      linear-gradient(145deg,rgba(155,140,255,.17),rgba(155,140,255,.055)),
      rgba(255,255,255,.012);
    border-color:rgba(155,140,255,.22);
    box-shadow:
      0 10px 22px rgba(0,0,0,.23),
      inset 0 1px 0 rgba(255,255,255,.05);
  }

  .sidebar nav button.active::before{
    transform:translateX(-50%) scaleX(1);
    opacity:.95;
  }

  .sidebar nav button > span:first-child{
    width:29px;
    min-width:29px;
    height:29px;
    margin:0;
    border-radius:10px;
    font-size:17px;
  }

  .sidebar nav button.active > span:first-child{
    transform:scale(1.04);
  }

  .sidebar nav button .sn7-nav-label{
    max-width:100%;
    min-width:0;
    font-size:8.5px;
    line-height:1.05;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .sidebar nav button .sn7-nav-profile-icon{
    width:29px!important;
    min-width:29px!important;
    height:29px!important;
    flex-basis:29px!important;
    border-radius:50%!important;
  }

  main{
    width:100%;
    max-width:none;
    padding:12px 12px calc(20px + env(safe-area-inset-bottom));
  }

  .topbar{
    min-height:98px;
    margin-bottom:16px;
    padding:18px 17px 16px;
    border-radius:19px;
  }

  .topbar h1{font-size:25px}
  .topbar p{font-size:12px;margin-top:5px;padding-right:60px}
  .topbar .status{
    position:absolute;
    right:14px;
    top:14px;
    font-size:9px;
    padding:6px 8px;
  }

  .sn7-welcome{padding:25px 20px;border-radius:20px}
  .sn7-welcome h2{font-size:25px}
  .sn7-points-cards{grid-template-columns:1fr}
  .sn7-points-card:last-child{grid-column:auto}
  .sn7-points-card{min-height:104px;padding:16px;border-radius:17px}
  .sn7-ranking-list{grid-template-columns:1fr}
}

@media(max-width:380px){
  .sidebar{left:6px;right:6px;height:74px;min-height:74px;padding:6px;border-radius:23px}
  .sidebar nav{height:62px;gap:2px}
  .sidebar nav button{height:62px;min-height:62px;border-radius:16px;font-size:8px}
  .sidebar nav button > span:first-child{width:27px;min-width:27px;height:27px;font-size:16px}
  .sidebar nav button .sn7-nav-label{font-size:8px}
}

@media(prefers-reduced-motion:reduce){
  .sidebar nav button,
  .sidebar nav button > span:first-child,
  .sn7-points-card,
  .sn7-command-row,
  .tab{transition:none!important;animation:none!important}
}


/* ============================================================
   SN7 CORE 1.9.1 — NAV ICONS + PAGE TITLE + MOBILE DOCK
   Final override layer. Replaces legacy Unicode navigation visuals
   without changing navigation behavior or application logic.
   ============================================================ */

/* Page header: icon and title are separate elements, never glued. */
.topbar h1#title{
  display:flex !important;
  align-items:center !important;
  gap:11px !important;
  min-width:0 !important;
}
.sn7-page-title-icon{
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
  flex:0 0 32px !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid rgba(155,140,255,.18) !important;
  border-radius:10px !important;
  background:rgba(155,140,255,.09) !important;
  color:#d8d3ff !important;
}
.sn7-page-title-svg{
  width:19px !important;
  height:19px !important;
  display:block !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.8 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}
.sn7-page-title-text{
  min-width:0 !important;
  display:block !important;
}

/* Desktop / tablet navigation icons. */
.sidebar nav button > .sn7-nav-icon{
  width:32px !important;
  min-width:32px !important;
  height:32px !important;
  flex:0 0 32px !important;
  margin:0 !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid rgba(255,255,255,.055) !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.025) !important;
  color:#7f899b !important;
  font-size:0 !important;
  line-height:1 !important;
  overflow:hidden !important;
  transition:transform .20s var(--sn7-ease),background .20s ease,color .20s ease,border-color .20s ease !important;
}
.sidebar nav button > .sn7-nav-icon svg{
  width:18px !important;
  height:18px !important;
  display:block !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.8 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}
.sidebar nav button.active > .sn7-nav-icon{
  color:#d8d3ff !important;
  background:rgba(155,140,255,.12) !important;
  border-color:rgba(155,140,255,.17) !important;
  transform:scale(1.04) !important;
}
.sidebar nav button:hover > .sn7-nav-icon{
  color:var(--text) !important;
}

/* Profile avatar is allowed to replace its SVG with the real image. */
.sidebar nav button > .sn7-nav-profile-icon{
  overflow:hidden !important;
  padding:0 !important;
}
.sidebar nav button > .sn7-nav-profile-icon img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  border-radius:inherit !important;
}

/* Explicit spacing between icon and navigation label. */
.sidebar nav button .sn7-nav-label{
  margin:0 !important;
  padding:0 !important;
  display:block !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

/* Prevent the old generic span rules from affecting the new SVG icons. */
.sidebar nav button > span:not(.sn7-nav-icon){
  width:auto !important;
  min-width:0 !important;
}

/* ---------- MOBILE: navigation is ALWAYS a bottom dock ---------- */
@media (max-width:700px){
  body{
    padding-bottom:calc(106px + env(safe-area-inset-bottom)) !important;
  }

  .layout{
    display:block !important;
    min-height:100dvh !important;
  }

  .sidebar{
    position:fixed !important;
    top:auto !important;
    left:10px !important;
    right:10px !important;
    bottom:calc(10px + env(safe-area-inset-bottom)) !important;
    inset-inline:10px !important;
    width:auto !important;
    height:78px !important;
    min-height:78px !important;
    max-height:78px !important;
    z-index:2147483000 !important;
    margin:0 !important;
    padding:7px !important;
    display:block !important;
    border:1px solid rgba(255,255,255,.09) !important;
    border-radius:25px !important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012) 48%),
      rgba(12,15,22,.96) !important;
    box-shadow:
      0 22px 55px rgba(0,0,0,.40),
      0 5px 16px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.055) !important;
    backdrop-filter:blur(22px) saturate(135%) !important;
    -webkit-backdrop-filter:blur(22px) saturate(135%) !important;
    overflow:visible !important;
  }

  .sidebar nav{
    width:100% !important;
    height:64px !important;
    min-height:64px !important;
    display:grid !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    gap:4px !important;
    padding:0 !important;
    margin:0 !important;
  }

  .sidebar nav button{
    position:relative !important;
    width:100% !important;
    min-width:0 !important;
    min-height:64px !important;
    height:64px !important;
    margin:0 !important;
    padding:5px 2px 6px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
    gap:4px !important;
    border:1px solid transparent !important;
    border-radius:18px !important;
    background:transparent !important;
    color:#8f98a8 !important;
    text-align:center !important;
    font-size:8.5px !important;
    font-weight:700 !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    transform:none !important;
  }

  .sidebar nav button::before{
    left:50% !important;
    top:auto !important;
    bottom:3px !important;
    width:20px !important;
    height:2px !important;
    transform:translateX(-50%) scaleX(.2) !important;
    opacity:0 !important;
  }

  .sidebar nav button.active{
    transform:translateY(-2px) !important;
    background:
      linear-gradient(145deg,rgba(155,140,255,.18),rgba(155,140,255,.055)),
      rgba(255,255,255,.012) !important;
    border-color:rgba(155,140,255,.23) !important;
    box-shadow:
      0 9px 22px rgba(0,0,0,.24),
      inset 0 1px 0 rgba(255,255,255,.05) !important;
  }

  .sidebar nav button.active::before{
    transform:translateX(-50%) scaleX(1) !important;
    opacity:.95 !important;
  }

  .sidebar nav button > .sn7-nav-icon{
    width:29px !important;
    min-width:29px !important;
    height:29px !important;
    flex:0 0 29px !important;
    margin:0 !important;
    border-radius:10px !important;
    font-size:0 !important;
  }

  .sidebar nav button > .sn7-nav-icon svg{
    width:17px !important;
    height:17px !important;
    stroke-width:1.8 !important;
  }

  .sidebar nav button .sn7-nav-label{
    width:100% !important;
    min-width:0 !important;
    flex:0 0 auto !important;
    margin:0 !important;
    padding:0 !important;
    font-size:8.5px !important;
    line-height:1.05 !important;
    text-align:center !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  .topbar{
    position:relative !important;
  }

  .topbar h1#title{
    gap:9px !important;
    font-size:25px !important;
  }

  .sn7-page-title-icon{
    width:29px !important;
    height:29px !important;
    min-width:29px !important;
    flex-basis:29px !important;
    border-radius:9px !important;
  }

  .sn7-page-title-svg{
    width:17px !important;
    height:17px !important;
  }

  main{
    padding-bottom:calc(20px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width:380px){
  .sidebar{
    left:6px !important;
    right:6px !important;
    inset-inline:6px !important;
    bottom:calc(8px + env(safe-area-inset-bottom)) !important;
    height:74px !important;
    min-height:74px !important;
    max-height:74px !important;
    padding:6px !important;
    border-radius:23px !important;
  }
  .sidebar nav{
    height:62px !important;
    min-height:62px !important;
    gap:2px !important;
  }
  .sidebar nav button{
    height:62px !important;
    min-height:62px !important;
    border-radius:16px !important;
  }
  .sidebar nav button > .sn7-nav-icon{
    width:27px !important;
    min-width:27px !important;
    height:27px !important;
    flex-basis:27px !important;
  }
  .sidebar nav button > .sn7-nav-icon svg{
    width:16px !important;
    height:16px !important;
  }
  .sidebar nav button .sn7-nav-label{
    font-size:8px !important;
  }
}

@media (min-width:701px){
  /* Desktop header has a real visual gap, not a Unicode character stuck to text. */
  .topbar h1#title{
    padding-left:1px !important;
  }
}

/* SN7 1.9.2 — header icon alignment + Kick avatar hardening */
.topbar h1#title{
  display:flex !important;
  align-items:center !important;
  gap:11px !important;
  margin-top:0 !important;
  line-height:1 !important;
}
.topbar h1#title .sn7-page-title-icon{
  align-self:center !important;
  position:relative !important;
  display:grid !important;
  place-items:center !important;
  align-items:center !important;
  justify-items:center !important;
  margin:0 !important;
  padding:0 !important;
  line-height:0 !important;
  vertical-align:middle !important;
}
.topbar h1#title .sn7-page-title-icon > svg,
.topbar h1#title .sn7-page-title-icon > .sn7-page-title-svg{
  display:block !important;
  width:19px !important;
  height:19px !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  flex:none !important;
}
.topbar h1#title .sn7-page-title-text{
  display:block !important;
  margin:0 !important;
  line-height:1.05 !important;
}

.sidebar nav button > .sn7-nav-icon{
  display:grid !important;
  place-items:center !important;
  align-items:center !important;
  justify-items:center !important;
  padding:0 !important;
  line-height:0 !important;
  vertical-align:middle !important;
}
.sidebar nav button > .sn7-nav-icon > svg{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  flex:none !important;
}
.sidebar nav button > .sn7-nav-profile-icon{
  position:relative !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
  padding:0 !important;
}
.sidebar nav button > .sn7-nav-profile-icon > img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:inherit !important;
}

/* Mobile header uses the same exact centering rules. */
@media(max-width:700px){
  .topbar h1#title{
    align-items:center !important;
    gap:9px !important;
    margin-top:0 !important;
    line-height:1 !important;
  }
  .topbar h1#title .sn7-page-title-icon{
    align-self:center !important;
  }
  .topbar h1#title .sn7-page-title-icon > svg,
  .topbar h1#title .sn7-page-title-icon > .sn7-page-title-svg{
    width:17px !important;
    height:17px !important;
  }
}

/* SN7 MODAL V4 - viewport seguro e ações sempre acessíveis */
body.sn7-modal-open { overscroll-behavior: none !important; }
.sn7-config-modal {
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}
.sn7-config-modal-card {
  max-height: calc(100svh - 16px) !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}
.sn7-config-modal-card .save-row {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 3 !important;
  margin: 18px -14px -18px !important;
  padding: 12px 14px 14px !important;
  background: linear-gradient(180deg, rgba(17,20,27,0), #11141b 28%) !important;
}
@media (min-width:601px) {
  .sn7-config-modal-card .save-row {
    margin-left:-16px !important;
    margin-right:-16px !important;
  }
}
.sn7-profile-login-options .sn7-platform-login-btn,
.sn7-profile-login-options .sn7-platform-login-btn * {
  text-decoration: none !important;
}
.sn7-profile-login-options .sn7-login-platform-icon {
  background: transparent !important;
  border-radius: 0 !important;
}
.sn7-profile-login-options .sn7-login-platform-icon img {
  width: 26px !important;
  height: 26px !important;
  object-fit: contain !important;
}

/* SN7 1.9.12 modal/mobile navigation fix */
.sn7-config-modal{z-index:2147483100 !important;height:100svh !important;min-height:100svh !important;max-height:100svh !important;overflow-y:auto !important;overscroll-behavior:contain !important;padding:8px !important;}
.sn7-config-modal .sn7-config-modal-card{max-height:calc(100svh - 20px) !important;overflow-y:auto !important;overscroll-behavior:contain !important;-webkit-overflow-scrolling:touch !important;padding-bottom:calc(24px + env(safe-area-inset-bottom)) !important;}
.sn7-login-platform-icon{width:28px !important;height:28px !important;flex:0 0 28px !important;background:transparent !important;}
.sn7-login-platform-icon img{width:26px !important;height:26px !important;display:block !important;object-fit:contain !important;}
.sn7-profile-login-options .sn7-platform-login-btn{text-decoration:none !important;}
@media(max-width:700px){.sn7-config-modal{align-items:flex-start !important;padding:8px 8px calc(8px + env(safe-area-inset-bottom)) !important;} .sn7-config-modal .sn7-config-modal-card{width:min(680px,100%) !important;margin:0 auto !important;max-height:calc(100svh - 16px) !important;padding:18px 15px calc(26px + env(safe-area-inset-bottom)) !important;} .sn7-config-modal-card h3{font-size:20px !important;margin-bottom:5px !important}.sn7-config-modal-card>p{margin-bottom:12px !important}.sn7-config-modal-card label{margin-top:10px !important}.sn7-config-modal-card .form-grid{gap:8px !important}.sn7-config-modal-card .save-row{padding-top:10px !important;gap:8px !important;}.sn7-config-modal-card .save-row .btn,.sn7-config-modal-card .save-row .sn7-danger{min-height:46px !important;flex:0 0 auto !important;}}