@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');

:root{
  --bg:#020a14;
  --bg2:#06192d;
  --panel:#083a67;
  --panel2:#0b4f89;
  --panel3:rgba(7,39,69,.88);
  --line:rgba(186,214,234,.20);
  --line-strong:rgba(208,229,242,.32);
  --text:#f4fbff;
  --muted:#b8d0e1;
  --heading:#122433;
  --header:#d9e6ef;
  --blue:#4a89f4;
  --blue2:#2d69d6;
  --blue-soft:#89c2ff;
  --green:#30cf9c;
  --red:#ff6b84;
  --yellow:#f7bf57;
  --shadow:0 18px 48px rgba(0,0,0,.30);
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  color:var(--text);
  font-family:Inter,Segoe UI,Arial,sans-serif;
  background:
    radial-gradient(circle at 18% 12%, rgba(55,125,255,.30), transparent 30%),
    radial-gradient(circle at 78% 20%, rgba(255,0,120,.14), transparent 22%),
    linear-gradient(135deg,#020914 0%,#093560 50%,#030d19 100%);
  background-attachment:fixed;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(120deg,transparent 0 32%,rgba(255,255,255,.07) 33%,transparent 35% 58%,rgba(111,190,255,.09) 59%,transparent 61%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 88px);
  opacity:.55;
}

.layout{min-height:100vh;position:relative;z-index:1}
.sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:275px;
  padding:22px 16px;
  display:flex;
  flex-direction:column;
  z-index:30;
  background:rgba(1,10,19,.88);
  border-right:1px solid var(--line);
  backdrop-filter:blur(18px);
  box-shadow:18px 0 50px rgba(0,0,0,.28);
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 8px 20px;
  margin-bottom:14px;
  border-bottom:1px solid rgba(216,236,248,.13);
}
.brand img{
  width:52px;
  height:52px;
  object-fit:contain;
  border-radius:10px;
  background:linear-gradient(135deg,#177fd1,#d5006a);
  box-shadow:0 0 0 1px rgba(255,255,255,.16),0 14px 28px rgba(0,0,0,.28);
}
.brand strong,.brand small{display:block}
.brand strong{font-size:16px;color:#fff;letter-spacing:.2px}
.brand small{color:#8fc8ff;font-size:12px;margin-top:3px}

.sidebar nav{display:grid;gap:8px}
.sidebar nav a,.logout{
  color:#d4e6f5;
  text-decoration:none;
  padding:12px 14px;
  border-radius:8px;
  border:1px solid transparent;
  transition:.2s ease;
  display:flex;
  align-items:center;
  gap:10px;
}
.sidebar nav a:hover,
.sidebar nav a.active,
.logout:hover{
  color:#fff;
  background:linear-gradient(90deg,rgba(74,137,244,.28),rgba(74,137,244,.08));
  border-color:rgba(137,194,255,.28);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.sidebar nav a i,.logout i{width:18px;text-align:center;color:#8fc8ff}
.logout{margin-top:auto;color:#ffb2c0}
.logout i{color:#ff8ca1}

.content{margin-left:275px;padding:26px 32px 54px;position:relative}
.topbar{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:58px;
  margin-bottom:24px;
  padding:0 16px;
  border-radius:8px;
  border:1px solid var(--line);
  background:rgba(216,236,248,.08);
  backdrop-filter:blur(16px);
  box-shadow:0 18px 45px rgba(0,0,0,.18);
}
.topbar div b,.topbar div span{display:block}
.topbar span{color:var(--muted);font-size:12px}
.menu{
  display:none;
  background:#10263a;
  color:#fff;
  border:1px solid var(--line);
  border-radius:9px;
  padding:8px 11px;
}
.page-title{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}
.page-title h1{margin:0;font-size:28px;color:#fff}
.page-title p{margin:7px 0 0;color:var(--muted)}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}
.stats article,
.card{
  background:linear-gradient(145deg,rgba(220,238,249,.14),rgba(0,72,120,.18));
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 22px 70px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(14px);
}
.stats article{padding:20px}
.stats span{display:block;color:#a9c7dc;font-size:13px}
.stats b{display:block;font-size:30px;margin-top:8px;color:#fff}
.card{padding:20px;margin-bottom:20px}
.card h2{margin:0 0 18px;font-size:18px;color:#fff}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:14px}
.card-head h2{margin:0}
.card-head a{color:#8fc8ff}
.grid-2{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(0,1.6fr);gap:18px}
.form-grid{display:grid;gap:15px}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.span-2{grid-column:span 2}
.form-actions{display:flex;align-items:end;gap:10px;flex-wrap:wrap}

label{display:grid;gap:7px;color:#d9e8f4;font-size:13px;font-weight:600}
input,select,textarea{
  width:100%;
  border:1px solid rgba(216,236,248,.22);
  background:rgba(1,14,27,.72);
  color:#fff;
  border-radius:6px;
  padding:11px 12px;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
input::placeholder,textarea::placeholder{color:#86a6bd}
input:focus,select:focus,textarea:focus{
  border-color:#63c9ff;
  box-shadow:0 0 0 3px rgba(73,140,255,.18);
}
.check{display:flex;align-items:center;gap:9px}
.check input{width:auto}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid rgba(216,236,248,.22);
  background:rgba(216,236,248,.10);
  color:#fff;
  text-decoration:none;
  border-radius:7px;
  padding:10px 15px;
  cursor:pointer;
  transition:.2s ease;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.btn.primary{
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  border-color:transparent;
  box-shadow:0 16px 34px rgba(0,124,214,.26);
}
.btn.full{width:100%}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}

.table-wrap{overflow:auto;border-radius:8px;border:1px solid rgba(216,236,248,.11)}
table{width:100%;border-collapse:collapse;min-width:760px}
th,td{text-align:left;padding:13px 11px;border-bottom:1px solid rgba(216,236,248,.10);vertical-align:middle}
th{color:#a9c7dc;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
td small{display:block;color:#a9c7dc;margin-top:4px}
code{
  background:#06121e;
  border:1px solid #1b354d;
  padding:4px 7px;
  border-radius:7px;
  color:#bce8ff;
  white-space:nowrap;
}
.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.actions a,.actions button{color:#67c9ff;background:none;border:0;padding:0;cursor:pointer;text-decoration:none}
.actions button{color:#ff8ca0}
.actions form{margin:0}
.badge{display:inline-flex;padding:5px 8px;border-radius:7px;font-size:11px;border:1px solid}
.badge.ok{color:#79f1c8;border-color:#247f65;background:#0b3a2e}
.badge.bad{color:#ff9daf;border-color:#8d3345;background:#3a1520}
.badge.warn{color:#ffd491;border-color:#8a6530;background:#3a2a11}
.badge.off{color:#b8c3cc;border-color:#4d5a66;background:#222d36}
.empty{text-align:center;color:#a9c7dc;padding:28px}
.alert{padding:13px 15px;border-radius:11px;margin-bottom:18px;background:#0f513d;border:1px solid #238c68}
.alert.error{background:#4a1722;border-color:#97384d}
.search{display:flex;gap:8px;max-width:430px;width:100%;flex-wrap:wrap}
.api-box code{display:block;overflow:auto;padding:13px}
.api-box p{color:#a9c7dc}
.narrow{max-width:540px}

.login-body{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:20px;
  background:
    radial-gradient(circle at 50% 12%,rgba(73,140,255,.36),transparent 34%),
    radial-gradient(circle at 77% 22%,rgba(217,0,106,.16),transparent 20%),
    linear-gradient(135deg,#030914,#053b65 55%,#020914);
  background-size:cover;
  background-position:center;
}
.login-card{
  width:min(440px,100%);
  padding:30px;
  background:rgba(3,15,28,.86);
  border:1px solid rgba(216,236,248,.2);
  border-radius:8px;
  backdrop-filter:blur(20px);
  box-shadow:0 28px 90px rgba(0,0,0,.46);
}
.login-card>img{
  width:86px;
  height:86px;
  object-fit:contain;
  display:block;
  margin:0 auto 18px;
  border-radius:8px;
  background:linear-gradient(135deg,#177fd1,#d5006a);
  padding:8px;
}
.login-card h1{text-align:center;margin:0;color:#fff}
.login-card p{text-align:center;color:var(--muted)}
.login-card form{display:grid;gap:15px;margin-top:22px}
.login-note{text-align:center;color:var(--muted);font-size:12px;margin-top:18px;line-height:1.6}
.login-note a{color:#8fc8ff;text-decoration:none}
.activation{text-align:center}
.device-code{
  font-size:24px;
  font-weight:800;
  letter-spacing:.08em;
  background:#071725;
  border:1px dashed #57a6f0;
  border-radius:12px;
  padding:16px;
  margin:20px 0;
}
.activation small{display:block;color:var(--muted);margin-top:16px}

/* helper classes for iconized texts and developer credit */
.icon-text,.meta-item,.info-item{display:flex;align-items:flex-start;gap:10px}
.icon-text i,.meta-item i,.info-item i{color:#8fc8ff;width:18px;text-align:center;margin-top:2px}
.dev-credits,
.footer-credits,
.maxrebrands-credit{
  margin-top:18px;
  padding:14px 16px;
  border-radius:8px;
  background:rgba(216,236,248,.08);
  border:1px solid rgba(216,236,248,.14);
  color:#dcecf8;
  line-height:1.75;
}
.dev-credits a,
.footer-credits a,
.maxrebrands-credit a{color:#8fc8ff;text-decoration:none}
.section-title,
.panel-title,
.page-title h1,
.card h2{display:flex;align-items:center;gap:10px}
.section-title i,
.panel-title i,
.card h2 i,
.page-title h1 i{color:#8fc8ff}

/* mobile responsiveness */
@media(max-width:1000px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}
  .cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .sidebar{transform:translateX(-100%);transition:.2s}
  .menu-open .sidebar{transform:none}
  .content{margin-left:0;padding:18px}
  .menu{display:block}
  .stats{grid-template-columns:1fr 1fr}
  .page-title{align-items:flex-start;flex-direction:column}
  .cols-2,.cols-3{grid-template-columns:1fr}
  .span-2{grid-column:auto}
  .card-head{align-items:flex-start;flex-direction:column}
  .search{max-width:none}
  .topbar{padding:10px 14px;align-items:flex-start;flex-wrap:wrap}
  .login-card{padding:24px 18px}
  .brand{padding-bottom:16px}
}
@media(max-width:480px){
  .stats{grid-template-columns:1fr}
  .page-title .btn,.btn.full{width:100%}
  .content{padding:14px}
  .card,.stats article{padding:16px}
  .login-card>img{width:74px;height:74px}
  table{min-width:680px}
}


/* ===== Maxrebrands additions: icons, login credits and hide debug notices ===== */
.sidebar nav a:nth-child(1)::before,
.sidebar nav a:nth-child(2)::before,
.sidebar nav a:nth-child(3)::before,
.sidebar nav a:nth-child(4)::before,
.logout::before{
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  width:18px;
  display:inline-block;
  text-align:center;
  color:#8fc8ff;
}
.sidebar nav a:nth-child(1)::before{content:"\f015"}
.sidebar nav a:nth-child(2)::before{content:"\f0ac"}
.sidebar nav a:nth-child(3)::before{content:"\f013"}
.sidebar nav a:nth-child(4)::before{content:"\f2bd"}
.logout::before{content:"\f2f5";color:#ff9fb1}

.page-title h1::before,
.card h2::before{
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  content:"\f0c9";
  color:#8fc8ff;
  margin-right:10px;
}

.btn.primary::before,
.btn.full::before{
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  content:"\2b";
}

/* login screen */
.login-card{
  position:relative;
  overflow:hidden;
}
.login-card::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg,#4a89f4,#d5006a,#4a89f4);
  opacity:.95;
}
.login-card::after{
  content:"👨‍💻 Créditos ao Maxrebrands\A 🌐 Loja: www.maxloja.xyz\A ✈️ Telegram: https://t.me/dvmaxrebrands";
  white-space:pre-line;
  display:block;
  margin-top:18px;
  padding:14px 16px;
  border-radius:8px;
  background:rgba(216,236,248,.08);
  border:1px solid rgba(216,236,248,.14);
  color:#dcecf8;
  line-height:1.8;
  font-size:13px;
  text-align:left;
}
.login-card h1::before{
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  content:"\f2f6";
  color:#8fc8ff;
  margin-right:10px;
}
.login-card label:first-of-type::before{
  content:"\f007";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  color:#8fc8ff;
  margin-right:8px;
}
.login-card label:nth-of-type(2)::before{
  content:"\f023";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  color:#8fc8ff;
  margin-right:8px;
}
.login-note{display:none!important}

/* attempt to hide debug and info notices */
.debug,
.debug-box,
.debug-text,
.system-debug,
.notice-debug,
.login-debug,
.dev-debug,
small.debug,
p.debug,
.alert.debug,
.message.debug,
.flash.debug,
.info-debug,
.log-debug,
pre.debug,
code.debug,
.login-body>.alert,
.login-body>.notice,
.login-body>.message,
.login-body>.info,
.login-body>.warning,
.login-body>small,
.login-body>p:first-child,
.login-card .debug,
.login-card .notice,
.login-card .info,
.login-card .message.info,
.login-card .message.debug,
.login-card small.notice,
.login-card small.info,
.login-card p.notice,
.login-card p.info{
  display:none!important;
}

/* generic icon helpers for text lists */
.icon-list li,
.meta-list li,
.info-list li{
  list-style:none;
  position:relative;
  padding-left:28px;
}
.icon-list li::before,
.meta-list li::before,
.info-list li::before{
  content:"\f058";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  left:0;
  top:1px;
  color:#8fc8ff;
}


/* ===== V3 Duplex branding and flash effects ===== */
@keyframes duplexGlow {
  0%{box-shadow:0 0 0 rgba(74,137,244,0),0 28px 90px rgba(0,0,0,.46)}
  50%{box-shadow:0 0 28px rgba(74,137,244,.25),0 28px 90px rgba(0,0,0,.46)}
  100%{box-shadow:0 0 0 rgba(74,137,244,0),0 28px 90px rgba(0,0,0,.46)}
}
@keyframes duplexShine {
  0%{transform:translateX(-140%) skewX(-18deg);opacity:0}
  15%{opacity:.12}
  50%{opacity:.20}
  100%{transform:translateX(240%) skewX(-18deg);opacity:0}
}
@keyframes duplexPulse {
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.02)}
}

/* replace arabic brand naming visually */
.brand strong,
.topbar div b,
.login-card h1{
  font-size:0 !important;
  line-height:1.2;
  position:relative;
}
.brand strong::after,
.topbar div b::after,
.login-card h1::after{
  content:"DUPLEX";
  font-size:clamp(18px,2vw,22px);
  color:#fff;
  letter-spacing:.3px;
  font-weight:800;
}
.brand small,
.topbar div span{
  font-size:0 !important;
  position:relative;
}
.brand small::after{content:"Duplex IPTV Connect";font-size:12px;color:#8fc8ff}
.topbar div span::after{content:"Administração Duplex IPTV";font-size:12px;color:#b8d0e1}
.login-card p{
  font-size:0;
  position:relative;
  min-height:20px;
}
.login-card p::after{
  content:"Entre para administrar seus dispositivos e servidores.";
  font-size:15px;
  color:var(--muted);
}

/* more eye-catching login visual */
.login-card{
  animation:duplexGlow 3.5s ease-in-out infinite;
}
.login-card::before{
  height:3px;
  background:linear-gradient(90deg,#4a89f4,#d5006a,#63c9ff,#4a89f4);
  background-size:200% 100%;
}
.login-card .btn.primary,
.login-card button,
.login-card input[type=submit]{
  animation:duplexPulse 2.6s ease-in-out infinite;
  position:relative;
  overflow:hidden;
}
.login-card .btn.primary::after,
.login-card button::after,
.login-card input[type=submit]::after{
  content:"";
  position:absolute;
  inset:-20% auto -20% -40%;
  width:36%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  animation:duplexShine 2.8s linear infinite;
}

/* horizontal credit bar (visual only via CSS) */
.login-card::after{
  content:"👨‍💻 Créditos: Maxrebrands    |    🌐 Loja: www.maxloja.xyz    |    ✈️ Telegram: t.me/dvmaxrebrands";
  white-space:normal;
  display:block;
  margin-top:16px;
  padding:12px 14px;
  border-radius:8px;
  background:linear-gradient(90deg,rgba(216,236,248,.10),rgba(216,236,248,.06));
  border:1px solid rgba(216,236,248,.14);
  color:#dcecf8;
  line-height:1.5;
  font-size:12.5px;
  text-align:center;
}

/* stronger shine on dashboard cards too */
.stats article,.card,.topbar{
  position:relative;
  overflow:hidden;
}
.stats article::before,.card::before,.topbar::before{
  content:"";
  position:absolute;
  inset:-35% auto auto -50%;
  width:28%;
  height:170%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
  transform:skewX(-18deg);
  animation:duplexShine 6.5s linear infinite;
  pointer-events:none;
}

/* upload e visualização da logotipo em Configurações */
.logo-upload-field small,
.logo-preview-box small{
  color:var(--muted);
  font-size:12px;
  font-weight:400;
  line-height:1.5;
}
.logo-upload-field input[type="file"]{
  padding:8px;
  cursor:pointer;
}
.logo-upload-field input[type="file"]::file-selector-button{
  margin-right:12px;
  padding:9px 13px;
  border:0;
  border-radius:6px;
  color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  cursor:pointer;
}
.logo-preview-box{
  display:grid;
  gap:7px;
  align-content:start;
  color:#d9e8f4;
  font-size:13px;
  font-weight:600;
}
.logo-preview-frame{
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  border:1px solid rgba(216,236,248,.22);
  border-radius:6px;
  background:rgba(1,14,27,.72);
  overflow:hidden;
}
.logo-preview-frame img{
  display:block;
  max-width:100%;
  width:auto;
  height:66px;
  object-fit:contain;
}
.generated-url{color:#8fc8ff!important}

/* ===== Configurações do aplicativo ===== */
.settings-page-title h1{
  display:flex;
  align-items:center;
  gap:11px;
  font-size:27px;
}
.settings-page-title h1 i{
  color:#8fc8ff;
  font-size:22px;
}
.settings-card{
  max-width:1360px;
  padding:28px;
  border-radius:14px;
  overflow:visible;
}
.settings-card::before{display:none}
.settings-form{
  display:grid;
  gap:24px;
}
.settings-fields-stack{
  display:grid;
  gap:18px;
}
.settings-field{
  display:grid;
  gap:9px;
}
.settings-field>span{
  display:flex;
  align-items:center;
  gap:9px;
  color:#e8f4fc;
  font-size:13px;
  font-weight:700;
}
.settings-field>span i{
  width:18px;
  color:#a7d5ff;
  text-align:center;
}
.settings-field input,
.settings-field textarea{
  border-radius:10px;
  padding:13px 15px;
  background:rgba(1,14,27,.80);
  border-color:rgba(216,236,248,.24);
  font-size:14px;
}
.settings-field textarea{
  min-height:96px;
  resize:vertical;
}
.settings-logo-grid{
  display:grid;
  grid-template-columns:minmax(320px,1fr) 1px minmax(240px,.72fr);
  gap:28px;
  align-items:stretch;
  padding:6px 0 2px;
}
.settings-logo-column{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.settings-logo-divider{
  width:1px;
  min-height:250px;
  background:linear-gradient(to bottom,transparent,rgba(216,236,248,.20) 12%,rgba(216,236,248,.20) 88%,transparent);
}
.settings-section-heading{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:18px;
}
.settings-section-heading>i{
  width:20px;
  padding-top:2px;
  color:#a7d5ff;
  text-align:center;
}
.settings-section-heading>div{
  display:grid;
  gap:5px;
}
.settings-section-heading strong{
  color:#f6fbff;
  font-size:15px;
}
.settings-section-heading small{
  color:var(--muted);
  font-size:12.5px;
  font-weight:400;
}
.logo-file-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;
}
.logo-file-trigger{
  width:min(100%,340px);
  min-height:138px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:20px;
  border:1px dashed rgba(137,194,255,.44);
  border-radius:12px;
  background:linear-gradient(145deg,rgba(74,137,244,.09),rgba(1,14,27,.50));
  cursor:pointer;
  text-align:center;
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.logo-file-trigger:hover{
  border-color:#6dcbff;
  background:linear-gradient(145deg,rgba(74,137,244,.15),rgba(1,14,27,.58));
  transform:translateY(-1px);
}
.logo-upload-icon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#9fd4ff;
  background:rgba(74,137,244,.14);
  border:1px solid rgba(137,194,255,.18);
  font-size:21px;
}
.logo-file-trigger b{
  color:#fff;
  font-size:14px;
}
.logo-file-trigger small{
  display:block;
  max-width:280px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#9fb9cc;
  font-size:11.5px;
  font-weight:400;
}
.logo-upload-help{
  margin:11px 0 0;
  color:#a9c2d5;
  font-size:11.5px;
  line-height:1.55;
}
.logo-preview-panel{
  justify-content:flex-start;
}
.logo-preview-frame{
  width:126px!important;
  height:126px!important;
  min-height:126px!important;
  max-width:126px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:12px!important;
  border-radius:13px!important;
  border:1px solid rgba(216,236,248,.27)!important;
  background:linear-gradient(145deg,rgba(1,14,27,.88),rgba(10,47,79,.78))!important;
  box-shadow:0 14px 35px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05)!important;
  overflow:hidden!important;
}
.logo-preview-frame img{
  display:block!important;
  width:100px!important;
  height:100px!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100px!important;
  max-height:100px!important;
  object-fit:contain!important;
  border-radius:8px;
}
.settings-actions{
  display:flex;
  justify-content:flex-end;
  padding-top:2px;
}
.settings-save-button{
  min-width:190px;
  min-height:44px;
  border-radius:9px;
}
.settings-save-button::before{display:none!important}

@media(max-width:980px){
  .settings-logo-grid{
    grid-template-columns:1fr;
    gap:22px;
  }
  .settings-logo-divider{display:none}
  .logo-preview-panel{
    padding-top:4px;
    border-top:1px solid rgba(216,236,248,.14);
  }
  .settings-section-heading{margin-top:15px}
}
@media(max-width:760px){
  .settings-card{padding:18px}
  .settings-form{gap:20px}
  .settings-logo-grid{gap:16px}
  .logo-file-trigger{width:100%}
  .settings-actions{justify-content:stretch}
  .settings-save-button{width:100%}
}

/* Integração de listas remotas por ID do dispositivo */
.muted{color:var(--muted,#91a7bd);margin:.25rem 0 0;font-size:.92rem}
.field-hidden{display:none!important}
.form-grid label small{display:block;margin-top:6px;color:var(--muted,#91a7bd);font-size:.78rem;line-height:1.35}
.remote-form-card{border-color:rgba(73,140,255,.28)}
.action-primary{font-weight:700;color:#8fc8ff!important}
.truncate-url{display:block;max-width:330px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.table-wrap td code{font-size:.9rem;letter-spacing:.35px}
.table-wrap td small{display:block;margin-top:4px;color:var(--muted,#91a7bd);line-height:1.35}
@media(max-width:900px){
  .truncate-url{max-width:220px}
}