:root{
  --smx-demo-page:#050a11;
}


html:has(body.smx-demo-page),
body.smx-demo-page{margin:0!important;padding:0!important;background:#050a11!important;min-height:100%!important}
body.smx-demo-page > header,body.smx-demo-page > footer,body.smx-demo-page #masthead,body.smx-demo-page #colophon,body.smx-demo-page .elementor-location-header,body.smx-demo-page .elementor-location-footer,body.smx-demo-page .entry-header,body.smx-demo-page .entry-title{display:none!important}
body.smx-demo-page #page,body.smx-demo-page #content,body.smx-demo-page #primary,body.smx-demo-page .site-content,body.smx-demo-page .content-area,body.smx-demo-page .entry-content,body.smx-demo-page .elementor,body.smx-demo-page .e-con,body.smx-demo-page .e-con-inner{margin:0!important;padding:0!important;max-width:none!important;width:100%!important;background:#050a11!important}
body.smx-demo-page .elementor-widget-shortcode,body.smx-demo-page .elementor-widget-shortcode>.elementor-widget-container{margin:0!important;padding:0!important;width:100%!important}
html:has(.smx-demo-app),
body:has(.smx-demo-app){
  margin:0!important;
  padding:0!important;
  background:var(--smx-demo-page)!important;
}

body:has(.smx-demo-app) > header,
body:has(.smx-demo-app) > footer,
body:has(.smx-demo-app) #masthead,
body:has(.smx-demo-app) #colophon,
body:has(.smx-demo-app) .elementor-location-header,
body:has(.smx-demo-app) .elementor-location-footer,
body:has(.smx-demo-app) .entry-header,
body:has(.smx-demo-app) .entry-title{
  display:none!important;
}

.smx-demo-app{
  --bg:#050b13;
  --bg2:#07111d;
  --panel:#081827;
  --panel2:#0a1b2d;
  --panel3:#0d2035;
  --line:#17304a;
  --line-soft:rgba(105,150,190,.15);
  --text:#eef7ff;
  --muted:#6e869b;
  --muted2:#8ea2b5;
  --blue:#238ef2;
  --blue2:#1958bd;
  --purple:#8d55e9;
  --violet:#7c4fd3;
  --green:#29c982;
  --cyan:#23c9cc;
  --orange:#ee8d2c;
  --gold:#d6b039;
  --red:#e54b59;

  width:100vw;
  height:100vh;
  min-height:610px;
  margin-left:calc(50% - 50vw);
  padding:6px 8px 4px;
  display:grid;
  grid-template-rows:56px 86px 42px minmax(290px,1fr) 78px 20px;
  gap:6px;
  overflow:hidden;

  color:var(--text);
  background:
    radial-gradient(circle at 12% 0,rgba(35,142,242,.07),transparent 23%),
    linear-gradient(180deg,#040910,#06111d);
  font-family:"Segoe UI",Inter,Arial,sans-serif;
  font-size:11px;
  box-sizing:border-box;
}

.smx-demo-app *{box-sizing:border-box}
.smx-demo-app button,
.smx-demo-app input,
.smx-demo-app select{font:inherit}

/* CABEÇALHO */
.smx-demo-header{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 18px;
  border:1px solid rgba(36,72,104,.24);
  border-radius:8px;
  background:#06111d;
}

.smx-demo-brand{
  display:flex;
  align-items:center;
  min-width:0;
}

.smx-demo-brand img{
  width:210px;
  max-width:24vw;
  max-height:48px;
  object-fit:contain;
  object-position:left center;
}

.smx-demo-clock{
  width:190px;
  flex:0 0 190px;
  text-align:center;
}

.smx-demo-clock strong{
  display:block;
  height:34px;
  color:#f1ecda;
  text-shadow:0 0 8px rgba(255,244,210,.18);
  font-family:Consolas,"Courier New",monospace;
  font-size:28px;
  font-weight:700;
  line-height:34px;
  letter-spacing:-2px;
}

.smx-demo-clock span{
  display:block;
  margin-top:0;
  color:#3597e8;
  font-size:8px;
  line-height:13px;
  text-transform:lowercase;
}

/* 6 CARDS */
.smx-demo-cards{
  min-width:0;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:6px;
}

.smx-status-card{
  min-width:0;
  position:relative;
  padding:9px 11px 8px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 30%,#17304a);
  border-radius:8px;
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,#0a1727),#091521);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

.smx-status-card.blue{--accent:var(--blue)}
.smx-status-card.purple{--accent:var(--purple)}
.smx-status-card.violet{--accent:#a45fe1}
.smx-status-card.orange{--accent:var(--orange)}
.smx-status-card.gold{--accent:var(--gold)}
.smx-status-card.green{--accent:var(--green)}

.smx-status-card-top{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
}

.smx-status-card-top>span{
  color:var(--accent);
  font-size:13px;
  line-height:1;
}

.smx-status-card small{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:var(--accent);
  font-size:8px;
  font-weight:850;
  letter-spacing:.015em;
}

.smx-status-card>strong{
  display:block;
  min-width:0;
  margin-top:8px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#edf7ff;
  font-size:10px;
  font-weight:750;
}

.smx-status-card>em{
  display:block;
  min-width:0;
  margin-top:4px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#73889b;
  font-size:8px;
  font-style:normal;
}

.smx-status-card>i{
  position:absolute;
  left:10px;
  right:10px;
  bottom:5px;
  height:2px;
  overflow:hidden;
  border-radius:999px;
  background:#13263a;
}

.smx-status-card>i>b{
  display:block;
  width:0;
  height:100%;
  background:var(--accent);
}

/* MENU ORIGINAL */
.smx-demo-nav{
  min-width:0;
  display:flex;
  align-items:center;
  gap:2px;
  padding:3px 5px;
  overflow:hidden;
  border:1px solid #122a41;
  border-radius:7px;
  background:#091827;
}

.smx-demo-nav button{
  min-width:0;
  height:34px;
  padding:0 9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex:0 1 auto;
  border:1px solid transparent;
  border-radius:6px;
  color:#9fb2c4;
  background:transparent;
  white-space:nowrap;
  cursor:pointer;
  font-size:9px;
  font-weight:650;
}

.smx-demo-nav button b{
  color:#94abc0;
  font-size:11px;
  font-weight:500;
}

.smx-demo-nav button:hover{
  color:#fff;
  background:#0e2438;
}

.smx-demo-nav button.active{
  color:#fff;
  border-color:#163853;
  background:#0e2a43;
}

.smx-demo-nav button.active b{color:#48aaf8}

/* ÁREA CENTRAL */
.smx-demo-main{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-columns:27fr 29fr 44fr;
  gap:6px;
}

.smx-demo-pane{
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid #122c44;
  border-radius:8px;
  background:linear-gradient(180deg,#081725,#06121d);
}

.smx-demo-pane-title{
  min-height:48px;
  padding:9px 10px 5px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}

.smx-demo-pane-title.stacked>div>strong,
.smx-demo-pane-title.queue-title>div>strong{
  display:block;
  color:#eef7ff;
  font-size:10px;
  font-weight:850;
}

.smx-demo-pane-title.stacked>div>span,
.smx-demo-pane-title.queue-title>div>span{
  display:block;
  margin-top:2px;
  color:#667e93;
  font-size:8px;
}

.smx-demo-pane-menu{
  width:24px;
  height:24px;
  border:0;
  border-radius:5px;
  color:#7891a7;
  background:#0d2235;
  cursor:pointer;
}

/* ARQUIVOS */
.smx-demo-explorer{
  height:142px;
  margin:0 9px;
  padding:8px 8px 7px;
  overflow:auto;
  border:1px solid #28435c;
  background:#06131f;
}

.smx-demo-explorer>small,
.smx-demo-folder-files>small,
.smx-demo-destination>small{
  display:block;
  margin-bottom:6px;
  color:#657f95;
  font-size:7px;
  font-weight:800;
  letter-spacing:.02em;
}

.smx-demo-explorer button{
  width:100%;
  min-height:20px;
  padding:1px 4px;
  display:flex;
  align-items:center;
  gap:4px;
  border:0;
  color:#b6c5d2;
  background:transparent;
  text-align:left;
  cursor:pointer;
  font-size:8px;
}

.smx-demo-explorer button:hover,
.smx-demo-explorer button.active{
  color:#fff;
  background:#0d2942;
}

.smx-demo-explorer .tree-child{padding-left:20px;color:#8096a9}

.smx-demo-folder-files{
  min-height:0;
  flex:1;
  margin:8px 9px 0;
  overflow:hidden;
}

.smx-demo-folder-files>div{
  height:calc(100% - 18px);
  min-height:58px;
  overflow:auto;
  border-top:1px solid rgba(255,255,255,.025);
}

.smx-folder-file{
  min-height:22px;
  padding:3px 5px;
  display:flex;
  align-items:center;
  gap:5px;
  color:#8da2b4;
  border-bottom:1px solid rgba(255,255,255,.02);
  font-size:8px;
}

.smx-folder-file:before{
  content:"♫";
  color:#468ed0;
}

.smx-demo-destination{
  padding:7px 9px 9px;
  border-top:1px solid rgba(255,255,255,.035);
}

.smx-demo-destination>div{
  display:grid;
  grid-template-columns:minmax(0,1fr) 122px;
  gap:5px;
}

.smx-demo-destination select{
  min-width:0;
  height:28px;
  padding:0 7px;
  color:#d3dde6;
  border:1px solid #28435c;
  background:#eef0f2;
  color:#1d2933;
  font-size:8px;
}

.smx-demo-destination button{
  height:28px;
  border:0;
  border-radius:2px;
  color:#fff;
  background:#2486dd;
  cursor:pointer;
  font-size:7px;
  font-weight:850;
}

/* BIBLIOTECA */
.smx-demo-search-row{
  min-height:34px;
  padding:0 10px 5px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 28px;
  gap:5px;
}

.smx-demo-search-row input{
  min-width:0;
  height:27px;
  padding:0 7px;
  color:#c9d7e3;
  border:1px solid #36516a;
  background:#06131f;
  font-size:8px;
}

.smx-demo-search-row button{
  width:28px;
  border:0;
  color:#8ba0b2;
  background:#0b2439;
  cursor:pointer;
}

.smx-demo-table-head{
  display:grid;
  align-items:center;
  min-height:25px;
  margin:0 10px;
  padding:0 6px;
  color:#8fa1b2;
  border:1px solid #2d465e;
  background:#0b1926;
  font-size:7px;
  font-weight:800;
}

.smx-demo-table-head.library{
  grid-template-columns:28px minmax(100px,1.8fr) minmax(72px,1fr) 54px 44px;
}

.smx-demo-table-head.queue{
  grid-template-columns:28px 75px minmax(110px,1.55fr) minmax(80px,.8fr) 58px;
}

.smx-demo-list{
  min-height:0;
  flex:1;
  margin:0 10px;
  overflow:auto;
  scrollbar-color:#647d92 #0a1927;
  scrollbar-width:thin;
}

.smx-demo-row{
  min-width:0;
  min-height:25px;
  display:grid;
  align-items:center;
  padding:0 6px;
  color:#aec0cf;
  border-bottom:1px solid rgba(93,132,165,.07);
  background:transparent;
  cursor:pointer;
  font-size:8px;
}

.smx-demo-row.library-row{
  grid-template-columns:28px minmax(100px,1.8fr) minmax(72px,1fr) 54px 44px;
}

.smx-demo-row.queue-row{
  grid-template-columns:28px 75px minmax(110px,1.55fr) minmax(80px,.8fr) 58px;
}

.smx-demo-row:hover{background:#0b2135}

.smx-demo-row.selected{
  color:#fff;
  background:#10549a;
}

.smx-demo-row.current{
  position:relative;
  color:#dff7ff;
  background:#0b2f50;
}

.smx-demo-row.current:after{
  content:"";
  position:absolute;
  left:101px;
  right:5px;
  bottom:1px;
  height:2px;
  background:linear-gradient(90deg,#258dea var(--progress,0%),#14314b var(--progress,0%));
}

.smx-demo-row.next{background:#0b2135}

.smx-demo-row span{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.smx-demo-row .number{color:#7e95a9}
.smx-demo-row.selected .number{color:#fff}
.smx-demo-row .status{font-size:7px;font-weight:800}
.smx-demo-row .status.playing{color:#37c5f4}
.smx-demo-row .status.next-status{color:#b875ef}
.smx-demo-row .status.waiting{color:#38a7ff}
.smx-demo-row .status.jingle{color:#aa65e8}
.smx-demo-row .status.ad{color:#f69a39}
.smx-demo-row .status.call{color:#31c982}
.smx-demo-row .status.notice{color:#d8b83b}
.smx-demo-row .status.voice{color:#26c681}
.smx-demo-row .artist{color:#91a5b7}
.smx-demo-row .duration{text-align:right;color:#c5d1dc}
.smx-demo-row .kind{text-align:center;color:#8ba2b6}

.smx-demo-library-footer{
  min-height:58px;
  padding:5px 10px 8px;
  border-top:1px solid rgba(255,255,255,.025);
}

.smx-demo-library-footer>small{
  display:block;
  min-height:14px;
  color:#60798f;
  font-size:7px;
}

.smx-demo-library-actions{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:4px;
}

.smx-demo-library-actions button{
  height:27px;
  padding:0 4px;
  border:0;
  border-radius:2px;
  color:#fff;
  cursor:pointer;
  font-size:7px;
  font-weight:850;
}

.smx-demo-library-actions .blue{background:#2488df}
.smx-demo-library-actions .purple{background:#9d5de0}
.smx-demo-library-actions .green{background:#30c984}
.smx-demo-library-actions .slate{background:#31485b}
.smx-demo-library-actions .gold{background:#d29225}

/* PISTA */
.smx-demo-pane-title.queue-title{
  min-height:48px;
  align-items:center;
}

.smx-demo-queue-tools{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
}

.smx-demo-queue-tools>span{
  height:24px;
  padding:0 9px;
  display:flex;
  align-items:center;
  border-radius:2px;
  font-size:7px;
  font-weight:850;
}

.smx-demo-queue-tools .ok{
  color:#28c57f;
  background:#071b1b;
}

.smx-demo-queue-tools .info{
  color:#55a9e9;
  background:#0b2033;
}

.smx-demo-queue-tools .remove{
  height:24px;
  padding:0 9px;
  border:0;
  color:#fff;
  background:#d94a57;
  cursor:pointer;
  font-size:7px;
  font-weight:800;
}

/* PLAYER */
.smx-demo-player{
  min-width:0;
  display:grid;
  grid-template-columns:280px 150px minmax(250px,1fr) 145px 190px;
  gap:8px;
  align-items:center;
  padding:7px 10px;
  border:1px solid #122d44;
  border-radius:8px;
  background:linear-gradient(90deg,#081827,#091c2d);
}

.smx-demo-now{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}

.smx-demo-cover{
  flex:0 0 50px;
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:5px;
  color:#44a6f5;
  background:#0c2942;
  font-size:23px;
}

.smx-demo-now>div{
  min-width:0;
  line-height:1.25;
}

.smx-demo-now small{
  display:block;
  color:#3d9fe9;
  font-size:7px;
  font-weight:900;
}

.smx-demo-now strong{
  display:block;
  min-width:0;
  margin-top:3px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#eef7ff;
  font-size:11px;
}

.smx-demo-now span:not(.smx-demo-cover){
  display:block;
  min-width:0;
  margin-top:2px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#7f94a7;
  font-size:8px;
}

.smx-demo-transport{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.smx-demo-transport button{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  color:#afc0cf;
  background:#142b40;
  cursor:pointer;
  font-size:10px;
}

.smx-demo-transport .play{
  width:49px;
  height:49px;
  color:#fff;
  background:#2e8cdf;
  font-size:16px;
}

.smx-demo-progress-wrap{
  min-width:0;
  display:grid;
  grid-template-columns:36px minmax(80px,1fr) 36px;
  gap:6px;
  align-items:center;
}

.smx-demo-progress-wrap>span{
  color:#91a4b6;
  font-size:7px;
  text-align:center;
}

.smx-demo-progress-wrap input,
.smx-demo-volume input{
  width:100%;
  accent-color:#2c91eb;
}

.smx-demo-volume{
  min-width:0;
  display:grid;
  grid-template-columns:18px minmax(50px,1fr);
  gap:7px;
  align-items:center;
}

.smx-demo-volume span{font-size:10px}

.smx-demo-power{
  min-width:0;
  height:58px;
  padding:0 12px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:9px;
  align-items:center;
  border:1px solid #173d43;
  border-radius:9px;
  color:#c3d4df;
  background:#082127;
  cursor:pointer;
}

.smx-demo-power>b{
  width:37px;
  height:37px;
  display:grid;
  place-items:center;
  border:1px solid #23825d;
  border-radius:50%;
  color:#26ca84;
  background:#083225;
  font-size:18px;
}

.smx-demo-power span{
  min-width:0;
  text-align:left;
}

.smx-demo-power strong,
.smx-demo-power small{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.smx-demo-power strong{color:#e9f4fa;font-size:8px}
.smx-demo-power small{margin-top:2px;color:#6f8497;font-size:7px}

.smx-demo-power.on{
  border-color:#1f6b51;
  background:#07271e;
}

.smx-demo-power.on>b{
  color:#39eba1;
  border-color:#2ccb8b;
  box-shadow:0 0 12px rgba(39,199,123,.25);
}

/* STATUS INFERIOR */
.smx-demo-statusbar{
  min-width:0;
  padding:0 9px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  overflow:hidden;
  color:#526a7f;
  border-top:1px solid rgba(255,255,255,.03);
  background:#040a10;
  font-size:6.5px;
}

.smx-demo-statusbar>div{
  min-width:0;
  display:flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
}

.smx-demo-statusbar i{
  width:1px;
  height:8px;
  margin:0 4px;
  background:#172b3c;
}

.smx-demo-statusbar b{
  color:#70a8ce;
  font-weight:850;
}

.smx-demo-statusbar .green-dot{color:#23c67f}
.smx-demo-statusbar .cyan-dot{color:#20bde0}
.smx-demo-statusbar>small{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:6px;
}

/* MODAL / LOCUÇÃO / PROGRAMAS */
.smx-demo-modal{
  position:fixed;
  inset:0;
  z-index:999999;
  padding:28px;
  background:rgba(1,6,11,.82);
  backdrop-filter:blur(7px);
}

.smx-demo-modal[hidden]{display:none}

.smx-demo-modal-card{
  position:relative;
  width:min(1120px,94vw);
  max-height:90vh;
  margin:3vh auto 0;
  padding:22px;
  overflow:auto;
  color:#eef7ff;
  border:1px solid #1a3955;
  border-radius:12px;
  background:#071624;
  box-shadow:0 30px 90px rgba(0,0,0,.48);
}

.smx-demo-modal-card h2{
  margin:0 45px 6px 0;
  font-size:21px;
}

.smx-demo-modal-card p{
  color:#8299ab;
  font-size:10px;
}

.smx-demo-modal-close{
  position:absolute;
  right:12px;
  top:12px;
  width:32px;
  height:32px;
  border:0;
  border-radius:7px;
  color:#fff;
  background:#122b41;
  cursor:pointer;
}

.smx-voice-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:17px;
}

.smx-voice-group{
  padding:11px;
  border:1px solid #173450;
  border-radius:8px;
  background:#0a2034;
}

.smx-voice-group h4{
  margin:0 0 7px;
  font-size:10px;
}

.smx-voice-group select{
  width:100%;
  height:34px;
  color:#dce8f2;
  border:1px solid #23445e;
  background:#06131f;
  font-size:9px;
}

.smx-voice-builder{
  margin-top:14px;
  padding:13px;
  border:1px solid #153049;
  border-radius:8px;
  background:#06121d;
}

.smx-voice-chain{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  margin:9px 0 12px;
}

.smx-voice-chip{
  padding:6px 8px;
  border:1px solid rgba(39,199,123,.18);
  border-radius:6px;
  color:#ccebdc;
  background:rgba(39,199,123,.08);
  font-size:8px;
}

.smx-demo-modal-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.smx-demo-modal-actions button{
  min-height:34px;
  padding:0 12px;
  border:0;
  border-radius:6px;
  color:#fff;
  background:#2187dc;
  cursor:pointer;
  font-size:8px;
  font-weight:850;
}

.smx-program-card,
.smx-schedule-card,
.smx-demo-knowledge-card,
.smx-demo-setting-card{
  margin:7px 0;
  padding:11px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  border:1px solid #183752;
  border-radius:8px;
  background:#0a2034;
  font-size:9px;
}

.smx-program-card button{
  min-height:31px;
  padding:0 10px;
  border:0;
  border-radius:6px;
  color:#fff;
  background:#1d73ba;
  cursor:pointer;
  font-size:8px;
}

.smx-demo-settings-grid,
.smx-demo-knowledge-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:14px;
}

.smx-demo-setting-card,
.smx-demo-knowledge-card{
  display:block;
}

.smx-demo-setting-card strong,
.smx-demo-knowledge-card strong{
  display:block;
  margin-bottom:4px;
  color:#eaf5fd;
}

/* TOAST */
.smx-demo-toast{
  position:fixed;
  right:18px;
  bottom:110px;
  z-index:1000001;
  max-width:340px;
  padding:10px 13px;
  border:1px solid #265070;
  border-radius:8px;
  color:#d9e9f5;
  background:#0a2034;
  box-shadow:0 18px 45px rgba(0,0,0,.35);
  font-size:9px;
}

.smx-demo-toast[hidden]{display:none}

/* EXPIRAÇÃO */
.smx-demo-expired{
  position:fixed;
  inset:0;
  z-index:1000000;
  display:grid;
  place-items:center;
  padding:20px;
  color:#fff;
  background:rgba(2,7,12,.95);
}

.smx-demo-expired[hidden]{display:none}

.smx-demo-expired>div{
  width:min(620px,94vw);
  padding:34px;
  text-align:center;
  border:1px solid #173b57;
  border-radius:14px;
  background:#0a1d2f;
}

.smx-demo-expired-actions{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:20px;
}

.smx-demo-expired-actions a{
  padding:11px 14px;
  border-radius:8px;
  color:#fff;
  text-decoration:none;
  background:#2187dc;
  font-size:9px;
  font-weight:900;
}

.smx-demo-invalid{
  max-width:680px;
  margin:80px auto;
  padding:30px;
  color:#fff;
  background:#0b1a2c;
  border-radius:15px;
  text-align:center;
}

.smx-demo-invalid a{color:#8dc5ff}

/* NOTEBOOK — MESMO LAYOUT, APENAS COMPACTO */
@media(max-width:1650px){
  .smx-demo-app{
    grid-template-rows:52px 82px 40px minmax(270px,1fr) 74px 19px;
    gap:5px;
    padding:5px 6px 3px;
  }

  .smx-demo-brand img{width:190px}
  .smx-demo-clock{width:170px;flex-basis:170px}
  .smx-demo-clock strong{font-size:25px}
  .smx-status-card{padding:8px 9px 7px}
  .smx-status-card>strong{font-size:9px}
  .smx-demo-nav button{padding:0 7px;font-size:8px}
  .smx-demo-nav button b{font-size:10px}

  .smx-demo-main{grid-template-columns:22fr 28fr 50fr}
  .smx-demo-pane-title{padding-left:8px;padding-right:8px}
  .smx-demo-explorer,.smx-demo-folder-files{margin-left:7px;margin-right:7px}
  .smx-demo-destination{padding-left:7px;padding-right:7px}
  .smx-demo-search-row{padding-left:8px;padding-right:8px}
  .smx-demo-table-head,.smx-demo-list{margin-left:8px;margin-right:8px}

  .smx-demo-player{
    grid-template-columns:240px 135px minmax(205px,1fr) 125px 175px;
    gap:6px;
    padding:6px 8px;
  }

  .smx-demo-power{height:54px}
  .smx-demo-cover{width:46px;height:46px;flex-basis:46px}
  .smx-demo-transport .play{width:45px;height:45px}
}

@media(max-width:1320px){
  .smx-demo-app{
    grid-template-rows:48px 76px 38px minmax(250px,1fr) 70px 18px;
    padding:4px 5px 3px;
  }

  .smx-demo-header{padding:0 12px}
  .smx-demo-brand img{width:170px}
  .smx-demo-clock{width:145px;flex-basis:145px}
  .smx-demo-clock strong{font-size:22px}
  .smx-status-card{padding:7px 8px}
  .smx-status-card>em{font-size:7px}
  .smx-demo-nav button{height:32px;padding:0 5px;gap:4px;font-size:7.5px}

  .smx-demo-main{grid-template-columns:22fr 28fr 50fr}

  .smx-demo-explorer{height:124px}
  .smx-demo-destination>div{grid-template-columns:minmax(0,1fr) 105px}
  .smx-demo-destination button{font-size:6.5px}

  .smx-demo-table-head.library,
  .smx-demo-row.library-row{
    grid-template-columns:24px minmax(86px,1.65fr) minmax(56px,.85fr) 48px 34px;
  }

  .smx-demo-table-head.queue,
  .smx-demo-row.queue-row{
    grid-template-columns:24px 65px minmax(92px,1.55fr) minmax(65px,.72fr) 50px;
  }

  .smx-demo-row{font-size:7px}
  .smx-demo-queue-tools>span{padding:0 6px;font-size:6px}
  .smx-demo-queue-tools .remove{padding:0 6px;font-size:6px}

  .smx-demo-player{
    grid-template-columns:220px 120px minmax(180px,1fr) 110px 165px;
    gap:5px;
  }

  .smx-demo-now strong{font-size:9px}
  .smx-demo-power{grid-template-columns:36px minmax(0,1fr);padding:0 8px}
  .smx-demo-power>b{width:33px;height:33px}
}

/* Tela muito estreita: continua em três colunas enquanto for utilizável */
@media(max-width:1180px){
  .smx-demo-main{grid-template-columns:20fr 27fr 53fr}

  .smx-demo-nav button span{
    max-width:82px;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .smx-demo-player{
    grid-template-columns:205px 112px minmax(155px,1fr) 96px 155px;
  }

  .smx-demo-volume{grid-template-columns:15px minmax(40px,1fr)}
}

/* Celular/tablet pequeno: aqui a prioridade deixa de ser imitar notebook */
@media(max-width:780px){
  .smx-demo-app{
    height:auto;
    min-height:100vh;
    overflow:auto;
    grid-template-rows:auto;
  }

  .smx-demo-header{min-height:54px}
  .smx-demo-cards{grid-template-columns:repeat(3,1fr)}
  .smx-demo-nav{overflow:auto}
  .smx-demo-nav button{flex:0 0 auto}
  .smx-demo-main{grid-template-columns:1fr}
  .smx-demo-files{display:none}
  .smx-demo-library,.smx-demo-queue{min-height:360px}
  .smx-demo-player{
    grid-template-columns:1fr;
    position:sticky;
    bottom:0;
    z-index:20;
  }
  .smx-demo-volume{display:none}
  .smx-demo-statusbar{display:none}
  .smx-voice-grid{grid-template-columns:1fr}
}
body.smx-demo-page #wpadminbar{display:none!important}
html:has(body.smx-demo-page){margin-top:0!important}
body.smx-demo-page .elementor-section,
body.smx-demo-page .elementor-container,
body.smx-demo-page .elementor-column,
body.smx-demo-page .elementor-widget-wrap,
body.smx-demo-page .elementor-element-populated{margin:0!important;padding:0!important;max-width:none!important;width:100%!important;background:#050a11!important}

/* SUPER MYXA v0.4.2 — LEGIBILIDADE +30% */
/* Aplicado somente ao Ambiente de Teste. Home e ADM não mudam de escala. */

@media (min-width:781px){
  .smx-demo-app{font-size:14px}

  .smx-demo-clock span{font-size:10.5px;line-height:15px}

  .smx-status-card-top>span{font-size:17px}
  .smx-status-card small{font-size:10.5px}
  .smx-status-card>strong{font-size:13px}
  .smx-status-card>em{font-size:10.5px}

  .smx-demo-nav button{font-size:11.7px}
  .smx-demo-nav button b{font-size:14px}

  .smx-demo-pane-title.stacked>div>strong,
  .smx-demo-pane-title.queue-title>div>strong{font-size:13px}

  .smx-demo-pane-title.stacked>div>span,
  .smx-demo-pane-title.queue-title>div>span{font-size:10.5px}

  .smx-demo-explorer>small,
  .smx-demo-folder-files>small,
  .smx-demo-destination>small{font-size:9px}

  .smx-demo-explorer button{font-size:10.5px}
  .smx-folder-file{font-size:10.5px}
  .smx-demo-destination select{font-size:10.5px}
  .smx-demo-destination button{font-size:9px}

  .smx-demo-table-head{font-size:9px}
  .smx-demo-row{min-height:28px;font-size:10.5px}
  .smx-demo-row .status{font-size:9px}

  .smx-demo-library-footer>small{font-size:9px}
  .smx-demo-library-actions button{font-size:9px}

  .smx-demo-queue-tools>span{font-size:9px}
  .smx-demo-queue-tools .remove{font-size:9px}

  .smx-demo-now small{font-size:9px}
  .smx-demo-now strong{font-size:14px}
  .smx-demo-now span:not(.smx-demo-cover){font-size:10.5px}
  .smx-demo-transport button{font-size:13px}
  .smx-demo-transport .play{font-size:21px}
  .smx-demo-progress-wrap>span{font-size:9px}
  .smx-demo-volume span{font-size:13px}
  .smx-demo-power strong{font-size:10.5px}
  .smx-demo-power small{font-size:9px}

  .smx-demo-statusbar{font-size:8.5px}
  .smx-demo-statusbar>small{font-size:8px}

  .smx-demo-modal-card h2{font-size:27px}
  .smx-demo-modal-card p{font-size:13px}
  .smx-voice-group h4{font-size:13px}
  .smx-voice-group select{font-size:11.7px}
  .smx-voice-chip{font-size:10.5px}
  .smx-demo-modal-actions button{font-size:10.5px}

  .smx-program-card,
  .smx-schedule-card,
  .smx-demo-knowledge-card,
  .smx-demo-setting-card{font-size:11.7px}

  .smx-program-card button{font-size:10.5px}
  .smx-demo-toast{font-size:11.7px}
  .smx-demo-expired-actions a{font-size:11.7px}

  /* Compensa o aumento para não cortar os textos. */
  .smx-demo-pane-title{min-height:52px}
  .smx-demo-table-head{min-height:28px}
  .smx-demo-library-footer{min-height:62px}
  .smx-demo-library-actions button{height:30px}
  .smx-demo-queue-tools>span,
  .smx-demo-queue-tools .remove{height:27px}
}

/* Notebook: mantém as três colunas do software e impede a compactação
   antiga de reduzir novamente os textos. */
@media (min-width:781px) and (max-width:1650px){
  .smx-status-card>strong{font-size:13px}
  .smx-demo-nav button{font-size:11.7px}
  .smx-demo-nav button b{font-size:14px}
}

@media (min-width:781px) and (max-width:1320px){
  .smx-status-card>em{font-size:10px}
  .smx-demo-nav button{height:34px;font-size:11px}
  .smx-demo-destination button{font-size:8.5px}
  .smx-demo-row{font-size:10px}
  .smx-demo-queue-tools>span,
  .smx-demo-queue-tools .remove{font-size:8.5px}
  .smx-demo-now strong{font-size:13px}
}

/* Celular/tablet: leitura também ampliada, mantendo o layout móvel existente. */
@media (max-width:780px){
  .smx-demo-app{font-size:14px}
  .smx-status-card small{font-size:10px}
  .smx-status-card>strong{font-size:12px}
  .smx-status-card>em{font-size:10px}
  .smx-demo-nav button{font-size:11px}
  .smx-demo-nav button b{font-size:13px}

  .smx-demo-pane-title.stacked>div>strong,
  .smx-demo-pane-title.queue-title>div>strong{font-size:13px}

  .smx-demo-pane-title.stacked>div>span,
  .smx-demo-pane-title.queue-title>div>span{font-size:10px}

  .smx-demo-table-head{font-size:9px}
  .smx-demo-row{min-height:30px;font-size:11px}
  .smx-demo-row .status{font-size:9px}
  .smx-demo-library-actions button{font-size:10px}
  .smx-demo-now small{font-size:9px}
  .smx-demo-now strong{font-size:14px}
  .smx-demo-now span:not(.smx-demo-cover){font-size:10px}
}

/* SUPER MYXA v0.4.3 — CARDS CLICÁVEIS + BOTÃO DE ENERGIA */

.smx-status-card[role="button"]{
  cursor:pointer;
  transition:
    transform .14s ease,
    border-color .14s ease,
    background .14s ease,
    box-shadow .14s ease;
  outline:none;
}

.smx-status-card[role="button"]:focus-visible{
  border-color:var(--accent);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.07),
    0 0 0 4px color-mix(in srgb,var(--accent) 34%,transparent);
}

.smx-status-card[role="button"]:active{
  transform:translateY(1px) scale(.992);
}

@media (hover:hover) and (pointer:fine){
  .smx-status-card[role="button"]:hover{
    transform:translateY(-2px);
    border-color:color-mix(in srgb,var(--accent) 62%,#28465f);
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb,var(--accent) 12%,#0b1b2d),
        #091521
      );
    box-shadow:
      0 7px 20px rgba(0,0,0,.20),
      0 0 18px color-mix(in srgb,var(--accent) 12%,transparent);
  }

  .smx-status-card[role="button"]:hover .smx-status-card-top>span{
    transform:scale(1.08);
  }
}

.smx-status-card-top>span{
  transition:transform .14s ease;
}

/* Botão Rádio — OFF azul, ON verde e hover vermelho para desligar. */
.smx-demo-power{
  transition:
    border-color .14s ease,
    background .14s ease,
    box-shadow .14s ease;
}

.smx-demo-power .smx-power-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:2px solid #3399ef;
  border-radius:50%;
  color:#4eafff;
  background:#082848;
  box-shadow:
    inset 0 0 0 3px rgba(47,142,223,.08),
    0 0 14px rgba(47,142,223,.16);
  font-size:24px;
  line-height:1;
  transition:
    color .14s ease,
    border-color .14s ease,
    background .14s ease,
    box-shadow .14s ease,
    transform .14s ease;
}

.smx-demo-power.on .smx-power-icon{
  color:#54f2ad;
  border-color:#31cf8d;
  background:#073a29;
  box-shadow:
    inset 0 0 0 3px rgba(49,207,141,.09),
    0 0 16px rgba(49,207,141,.24);
}

.smx-demo-power:focus-visible{
  outline:2px solid #48a9f8;
  outline-offset:2px;
}

.smx-demo-power:active .smx-power-icon{
  transform:scale(.94);
}

@media (hover:hover) and (pointer:fine){
  .smx-demo-power:not(.on):hover{
    border-color:#2e91e7;
    background:#092b46;
  }

  .smx-demo-power.on:hover{
    border-color:#cb4452;
    background:#32151c;
  }

  .smx-demo-power.on:hover .smx-power-icon{
    color:#ff7f8a;
    border-color:#dc5561;
    background:#45161d;
    box-shadow:0 0 16px rgba(220,85,97,.22);
  }
}