:root{
  --bg:#06110b;--panel:#0b1c12;--panel2:#10261a;--line:rgba(128,255,170,.10);
  --green:#39e978;--green2:#20c760;--greenSoft:rgba(57,233,120,.11);
  --blue:#5aa8ff;--red:#ff6877;--amber:#ffbd59;--text:#f2fff6;--muted:#8da596;
  --shadow:0 24px 80px rgba(0,0,0,.34)
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 80% 0%,rgba(57,233,120,.07),transparent 28%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
button,input{font:inherit}.app-shell{min-height:100vh;display:flex}
.sidebar{width:238px;position:fixed;inset:0 auto 0 0;background:linear-gradient(180deg,#09180f,#07120c);border-right:1px solid var(--line);padding:26px 18px;display:flex;flex-direction:column;z-index:10}
.brand{display:flex;gap:12px;align-items:center;margin:0 8px 32px}.brand-mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-weight:900;font-size:21px;background:linear-gradient(135deg,var(--green),#88ffb6);color:#041108;box-shadow:0 0 35px rgba(57,233,120,.24)}
.brand strong{display:block;letter-spacing:.08em;font-size:18px}.brand span{display:block;color:var(--muted);font-size:12px;margin-top:2px}
nav{display:grid;gap:8px}.nav-item{border:0;background:transparent;color:var(--muted);padding:12px 14px;border-radius:12px;text-align:left;display:flex;gap:12px;align-items:center;cursor:pointer}
.nav-item.active,.nav-item:hover{color:var(--text);background:var(--greenSoft)}.nav-item.active{box-shadow:inset 3px 0 0 var(--green)}
.sidebar-footer{margin-top:auto;padding:14px;color:var(--muted);font-size:12px;line-height:1.8;border-top:1px solid var(--line)}.dot-online{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin:0 5px 0 2px;box-shadow:0 0 12px var(--green)}
.content{flex:1;margin-left:238px;padding:34px 40px 60px;max-width:1700px}.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.eyebrow{color:var(--green);font-size:11px;letter-spacing:.16em;font-weight:800;margin:0 0 8px}
h1{font-size:clamp(30px,4vw,46px);line-height:1;margin:0;letter-spacing:-.04em}h2,h3{margin:0}.muted{color:var(--muted)}
.top-actions{display:flex;gap:12px;align-items:center}.ghost-btn{border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--text);padding:10px 14px;border-radius:12px;cursor:pointer}.ghost-btn:hover{border-color:rgba(57,233,120,.35);background:var(--greenSoft)}
.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--greenSoft);color:var(--green);border:1px solid rgba(57,233,120,.25);font-weight:800}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:34px 0 20px}.stat-card{background:linear-gradient(180deg,rgba(16,38,25,.96),rgba(10,25,16,.96));border:1px solid var(--line);border-radius:18px;padding:20px;display:flex;gap:14px;align-items:center;box-shadow:var(--shadow)}
.stat-card small{display:block;color:var(--muted);margin-bottom:5px}.stat-card strong{font-size:28px}.stat-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-size:18px;border:1px solid currentColor}
.green{color:var(--green);background:rgba(57,233,120,.08)}.red{color:var(--red);background:rgba(255,104,119,.08)}.blue{color:var(--blue);background:rgba(90,168,255,.08)}.amber{color:var(--amber);background:rgba(255,189,89,.08)}
.panel{background:rgba(11,28,18,.95);border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--shadow)}.panel-head{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:20px}.panel-head h2{font-size:20px;margin-bottom:6px}.panel-head p{margin:0;font-size:13px}
.search-wrap input{width:min(320px,55vw);background:#07140c;border:1px solid var(--line);color:var(--text);padding:12px 14px;border-radius:12px;outline:none}.search-wrap input:focus{border-color:rgba(57,233,120,.45);box-shadow:0 0 0 3px rgba(57,233,120,.08)}
.computer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.computer-card{border:1px solid var(--line);border-radius:16px;padding:18px;background:linear-gradient(180deg,#0e2417,#0a1a10);cursor:pointer;transition:.18s ease}.computer-card:hover{transform:translateY(-2px);border-color:rgba(57,233,120,.30)}
.computer-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.machine-title{display:flex;gap:12px;align-items:center}.pc-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--greenSoft);color:var(--green);border:1px solid rgba(57,233,120,.2)}
.machine-title strong{display:block;margin-bottom:4px}.machine-title small{color:var(--muted)}.status-pill{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:700}.status-online{color:var(--green);background:rgba(57,233,120,.08)}.status-offline{color:var(--red);background:rgba(255,104,119,.08)}.status-dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}.metric{background:#07140c;border:1px solid rgba(255,255,255,.04);border-radius:12px;padding:11px}.metric span{display:block;color:var(--muted);font-size:11px;margin-bottom:5px}.metric strong{font-size:13px}
.empty-state{text-align:center;padding:60px 20px 48px;color:var(--muted)}.empty-icon{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;margin:0 auto 18px;color:#041108;font-weight:900;font-size:26px;background:linear-gradient(135deg,var(--green),#88ffb6)}.empty-state h3{color:var(--text);margin-bottom:8px}
.modal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.72);display:grid;place-items:center;padding:20px}.modal.hidden{display:none}.modal-card{position:relative;width:min(760px,96vw);max-height:90vh;overflow:auto;background:#0a1c11;border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:0 30px 100px rgba(0,0,0,.58)}.modal-wide{width:min(1120px,96vw)}
.close-btn{position:absolute;right:16px;top:14px;border:0;background:transparent;color:var(--muted);font-size:30px;cursor:pointer}
.detail-hero{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;padding-right:38px}.detail-hero h2{font-size:28px}.detail-badge{display:inline-flex;gap:7px;align-items:center;color:var(--green);background:var(--greenSoft);border:1px solid rgba(57,233,120,.18);border-radius:999px;padding:8px 11px;font-size:12px;font-weight:800}
.section-title{margin:28px 0 12px;font-size:14px;text-transform:uppercase;letter-spacing:.11em;color:#b6cabe}
.detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.detail-box{background:#07140c;border:1px solid var(--line);border-radius:14px;padding:14px;min-height:74px}.detail-box span{display:block;color:var(--muted);font-size:11px;margin-bottom:6px}.detail-box strong{font-size:13px;word-break:break-word}
.list-card{background:#07140c;border:1px solid var(--line);border-radius:15px;overflow:hidden}.list-row{display:grid;grid-template-columns:minmax(160px,1.5fr) repeat(3,minmax(100px,1fr));gap:12px;padding:13px 14px;border-top:1px solid rgba(255,255,255,.05);align-items:center}.list-row:first-child{border-top:0}.list-row small{color:var(--muted)}.list-row strong{font-size:13px;word-break:break-word}.list-row.two{grid-template-columns:minmax(180px,1.5fr) minmax(160px,1fr)}
.no-data{color:var(--muted);font-size:13px;padding:12px 0}
@media(max-width:980px){
  .sidebar{width:78px;padding:24px 12px}.sidebar .brand>div:last-child,.nav-item span,.sidebar-footer{display:none}.brand{margin:0 auto 28px}.nav-item{justify-content:center;font-size:18px}.content{margin-left:78px;padding:28px 20px 50px}.stats-grid{grid-template-columns:repeat(2,1fr)}.detail-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .sidebar{display:none}.content{margin-left:0;padding:22px 14px 40px}.topbar{align-items:center}.top-actions .ghost-btn{display:none}.stats-grid{grid-template-columns:1fr 1fr;gap:10px}.computer-grid{grid-template-columns:1fr}.panel-head{align-items:stretch;flex-direction:column}.search-wrap input{width:100%}.metrics{grid-template-columns:1fr 1fr}.detail-grid{grid-template-columns:1fr}.list-row,.list-row.two{grid-template-columns:1fr}.detail-hero{display:block}
}

.event-list{display:grid;gap:10px}
.event-item{display:flex;gap:13px;align-items:flex-start;background:#07140c;border:1px solid var(--line);border-radius:14px;padding:14px}
.event-icon{width:38px;height:38px;flex:0 0 38px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.03);font-size:18px}
.event-main{min-width:0}.event-title{font-weight:800;font-size:13px;margin-bottom:4px}
.event-summary{color:#ccded2;font-size:13px;line-height:1.45}
.event-meta{color:var(--muted);font-size:11px;margin-top:7px;word-break:break-word}
.event-bsod{border-color:rgba(90,168,255,.25)}
.event-whea{border-color:rgba(255,104,119,.25)}
.event-kernel-power,.event-unexpected-shutdown{border-color:rgba(255,189,89,.25)}
.event-application-hang{border-color:rgba(167,120,255,.22)}


/* v0.4 diagnostics */
.event-topline{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px
}
.severity-pill{
  flex:0 0 auto;
  font-size:9px;
  letter-spacing:.10em;
  font-weight:900;
  padding:5px 7px;
  border-radius:999px
}
.severity-critical{
  border-color:rgba(255,104,119,.28)!important
}
.severity-warning{
  border-color:rgba(255,189,89,.24)!important
}
.severity-pill.severity-critical{
  color:var(--red);
  background:rgba(255,104,119,.10)
}
.severity-pill.severity-warning{
  color:var(--amber);
  background:rgba(255,189,89,.09)
}
.severity-pill.severity-info{
  color:var(--blue);
  background:rgba(90,168,255,.09)
}
.event-details{
  display:flex;
  flex-wrap:wrap;
  gap:6px 12px;
  margin-top:9px;
  padding:9px 10px;
  background:rgba(255,255,255,.025);
  border-radius:9px;
  color:#9db4a5;
  font-size:10px
}
.event-details b{color:#cae0d2}

.storage-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px
}
.storage-card{
  background:#07140c;
  border:1px solid var(--line);
  border-radius:15px;
  padding:15px
}
.storage-ok{border-color:rgba(57,233,120,.20)}
.storage-warning{border-color:rgba(255,189,89,.30)}
.storage-bad{border-color:rgba(255,104,119,.35)}
.storage-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:14px
}
.storage-head span{
  color:var(--muted);
  font-size:11px
}
.storage-data{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px
}
.storage-data div{
  background:rgba(255,255,255,.025);
  border-radius:10px;
  padding:9px
}
.storage-data small{
  display:block;
  color:var(--muted);
  margin-bottom:4px;
  font-size:10px
}
.storage-data b{
  font-size:12px;
  word-break:break-word
}

@media(max-width:760px){
  .storage-grid{grid-template-columns:1fr}
  .storage-data{grid-template-columns:repeat(2,1fr)}
}


/* v0.5 - HWMonitor-inspired storage sensors */
.hw-storage-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.hw-storage-card{
  padding:16px;
  background:
    linear-gradient(180deg,rgba(14,36,23,.98),rgba(7,20,12,.98));
}
.hw-storage-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px
}
.hw-storage-header>div:first-child{
  min-width:0
}
.hw-storage-header strong{
  display:block;
  font-size:15px;
  margin-bottom:5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.hw-storage-header small{
  color:var(--muted);
  font-size:10px
}
.health-ring{
  --health:0;
  width:76px;
  height:76px;
  flex:0 0 76px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:
    conic-gradient(
      var(--ring-color) calc(var(--health)*1%),
      rgba(255,255,255,.07) 0
    );
  position:relative
}
.health-ring:after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:50%;
  background:#08170e;
  border:1px solid rgba(255,255,255,.04)
}
.health-ring>div{
  z-index:1;
  text-align:center
}
.health-ring b{
  display:block;
  font-size:17px
}
.health-ring small{
  font-size:7px;
  letter-spacing:.11em;
  color:var(--muted)
}
.health-good{--ring-color:var(--green)}
.health-mid{--ring-color:var(--amber)}
.health-low{--ring-color:var(--red)}
.health-unknown{--ring-color:#64756b}

.hw-sensor-table{
  border:1px solid rgba(255,255,255,.04);
  border-radius:12px;
  overflow:hidden;
  background:#06110a
}
.sensor-row{
  min-height:36px;
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  padding:8px 11px;
  border-top:1px solid rgba(255,255,255,.045)
}
.sensor-row:first-child{border-top:0}
.sensor-row span{
  color:#93aa9b;
  font-size:11px
}
.sensor-row b{
  text-align:right;
  font-size:11px;
  word-break:break-word
}
.live-read b{color:#6fb8ff}
.live-write b{color:#61ed93}
.subtle-row b{
  color:var(--muted);
  font-weight:600
}
.meter{
  height:3px;
  margin:0 11px 4px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.05)
}
.meter i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#3698ff,#69baff);
  transition:width .25s ease
}
.live-write+.meter i{
  background:linear-gradient(90deg,#20c760,#68ef98)
}
.activity-meter i{
  background:linear-gradient(90deg,#ffbd59,#ffde8c)
}

@media(max-width:900px){
  .hw-storage-grid{grid-template-columns:1fr}
}


/* v0.6 login */
.auth-gate{
  position:fixed;inset:0;z-index:1000;display:grid;place-items:center;
  padding:20px;background:radial-gradient(circle at 50% 10%,rgba(57,233,120,.12),transparent 35%),rgba(3,10,6,.96);
  backdrop-filter:blur(12px)
}
.auth-gate.hidden{display:none}
.auth-card{
  width:min(420px,94vw);padding:30px;border-radius:22px;
  background:linear-gradient(180deg,#0d2115,#08150d);
  border:1px solid rgba(57,233,120,.18);
  box-shadow:0 30px 100px rgba(0,0,0,.6)
}
.auth-logo{
  width:54px;height:54px;border-radius:16px;display:grid;place-items:center;
  margin-bottom:18px;color:#031008;font-size:26px;font-weight:950;
  background:linear-gradient(135deg,var(--green),#8cffb8)
}
.auth-card h2{font-size:25px;margin-bottom:7px}
.auth-card form{display:grid;gap:14px;margin-top:22px}
.auth-card label,.warranty-form label{display:grid;gap:7px;color:#a8bcaf;font-size:11px}
.auth-card input,.warranty-form input{
  width:100%;padding:12px 13px;border-radius:11px;border:1px solid var(--line);
  background:#06120a;color:var(--text);outline:none
}
.auth-card input:focus,.warranty-form input:focus{
  border-color:rgba(57,233,120,.42);
  box-shadow:0 0 0 3px rgba(57,233,120,.07)
}
.primary-btn{
  border:0;border-radius:11px;padding:12px 15px;cursor:pointer;
  font-weight:800;color:#031008;background:linear-gradient(135deg,var(--green),#79f9a9)
}
.auth-error{min-height:18px;color:var(--red);font-size:12px}

/* v0.6 warranty */
.warranty-status{
  display:flex;justify-content:space-between;align-items:center;gap:15px;
  padding:14px 16px;margin-bottom:12px;border-radius:13px;
  border:1px solid var(--line);background:#07140c
}
.warranty-status strong{font-size:12px;letter-spacing:.08em}
.warranty-status span{color:var(--muted);font-size:12px;text-align:right}
.warranty-active{border-color:rgba(57,233,120,.27)}
.warranty-active strong{color:var(--green)}
.warranty-expiring{border-color:rgba(255,189,89,.30)}
.warranty-expiring strong{color:var(--amber)}
.warranty-expired{border-color:rgba(255,104,119,.30)}
.warranty-expired strong{color:var(--red)}
.warranty-none strong{color:#a2b4a8}

.warranty-form{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;
  padding:14px;border-radius:14px;border:1px solid var(--line);background:#07140c
}
.warranty-actions{
  grid-column:1/-1;display:flex;align-items:center;gap:12px;margin-top:4px
}
#warrantyMsg{color:var(--green);font-size:11px}

@media(max-width:900px){.warranty-form{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){
  .warranty-form{grid-template-columns:1fr}
  .warranty-status{align-items:flex-start;flex-direction:column}
  .warranty-status span{text-align:left}
}


/* v0.8 warranty dashboard */
.warranty-stats-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:-6px 0 20px
}
.mini-stat{
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(57,233,120,.16);
  background:rgba(8,24,14,.75)
}
.mini-stat span{
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-bottom:5px
}
.mini-stat strong{
  font-size:22px;
  color:var(--green)
}
.mini-stat.warning{border-color:rgba(255,189,89,.20)}
.mini-stat.warning strong{color:var(--amber)}
.mini-stat.danger{border-color:rgba(255,104,119,.20)}
.mini-stat.danger strong{color:var(--red)}

.danger-btn{
  border:1px solid rgba(255,104,119,.30);
  border-radius:11px;
  padding:11px 14px;
  cursor:pointer;
  font-weight:800;
  color:#ff9aa4;
  background:rgba(255,104,119,.08)
}
.danger-btn:hover{background:rgba(255,104,119,.14)}

.chart-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px
}
.chart-card{
  min-width:0;
  border:1px solid var(--line);
  border-radius:14px;
  padding:13px;
  background:#07140c
}
.chart-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px
}
.chart-head strong{font-size:12px}
.chart-head span{color:var(--muted);font-size:9px}
.chart-card canvas{
  width:100%;
  height:180px;
  display:block
}

@media(max-width:800px){
  .warranty-stats-grid{grid-template-columns:1fr}
  .chart-grid{grid-template-columns:1fr}
}


/* v0.9 support */
.warranty-stats-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))
}
.mini-stat.support{
  border-color:rgba(90,168,255,.22)
}
.mini-stat.support strong{
  color:var(--blue)
}
.support-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:12px
}
.support-summary>div{
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#07140c
}
.support-summary span{
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-bottom:5px
}
.support-summary strong{
  font-size:12px
}
.support-list{
  display:grid;
  gap:8px
}
.support-item{
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:center;
  padding:12px 14px;
  background:#07140c;
  border:1px solid rgba(90,168,255,.18);
  border-radius:12px
}
.support-item.resolved{
  opacity:.65;
  border-color:var(--line)
}
.support-item strong{
  display:block;
  font-size:12px;
  margin-bottom:4px
}
.support-item small{
  color:var(--muted);
  font-size:10px
}
.support-item-actions{
  display:flex;
  gap:10px;
  align-items:center
}
.support-item-actions>span{
  color:var(--blue);
  font-size:9px;
  letter-spacing:.08em;
  font-weight:900
}
.support-resolve-btn{
  border:1px solid rgba(57,233,120,.25);
  border-radius:9px;
  padding:7px 9px;
  background:rgba(57,233,120,.08);
  color:var(--green);
  cursor:pointer;
  font-size:10px;
  font-weight:800
}
.support-resolve-btn:hover{
  background:rgba(57,233,120,.14)
}
@media(max-width:900px){
  .warranty-stats-grid{grid-template-columns:repeat(2,1fr)}
  .support-summary{grid-template-columns:1fr}
}
@media(max-width:620px){
  .warranty-stats-grid{grid-template-columns:1fr}
  .support-item{
    align-items:flex-start;
    flex-direction:column
  }
}


/* v0.10 admin test mode */
.test-mode-panel{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  margin-bottom:18px;
  padding:18px 20px;
  border:1px solid rgba(255,189,89,.22);
  border-radius:16px;
  background:linear-gradient(120deg,rgba(255,189,89,.07),rgba(7,20,12,.96))
}
.test-mode-panel h2{margin:2px 0 5px;font-size:18px}
.test-mode-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  flex-wrap:wrap
}
.test-mode-badge{
  padding:7px 10px;
  border-radius:999px;
  font-size:9px;
  font-weight:900;
  letter-spacing:.09em
}
.test-mode-badge.off{
  color:#9BAC9F;
  background:#112018;
  border:1px solid var(--line)
}
.test-mode-badge.on{
  color:#231500;
  background:var(--amber);
  border:1px solid rgba(255,189,89,.45)
}
.primary-btn:disabled,.danger-btn:disabled{
  opacity:.4;
  cursor:not-allowed
}

/* global queue */
.support-queue-panel{margin-bottom:18px}
.global-support-list{display:grid;gap:9px}
.global-support-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:13px 14px;
  border:1px solid rgba(90,168,255,.16);
  border-radius:13px;
  background:#07140c
}
.global-support-item.is-test{
  border-color:rgba(255,189,89,.25);
  background:linear-gradient(90deg,rgba(255,189,89,.05),#07140c)
}
.global-support-title{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:5px
}
.global-support-pc{
  color:#B8C9BD;
  font-size:11px;
  margin-bottom:5px
}
.global-support-description{
  color:#E6F1E9;
  font-size:11px;
  line-height:1.45;
  margin-bottom:5px
}
.global-support-meta{
  color:var(--muted);
  font-size:9px
}
.test-ticket-badge{
  display:inline-flex;
  padding:3px 6px;
  border-radius:999px;
  background:rgba(255,189,89,.13);
  border:1px solid rgba(255,189,89,.28);
  color:var(--amber);
  font-size:8px;
  font-weight:900;
  letter-spacing:.08em
}
.support-ticket-title{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:5px
}
.support-ticket-description{
  color:#DDEAE1;
  font-size:11px;
  line-height:1.45;
  margin-bottom:5px
}
.support-ticket-snapshot{
  color:#75B9FF;
  font-size:9px;
  margin-bottom:5px
}

@media(max-width:760px){
  .test-mode-panel{
    flex-direction:column;
    align-items:flex-start
  }
  .global-support-item{
    flex-direction:column;
    align-items:flex-start
  }
}


/* v0.11 device security */
.security-panel,.audit-panel{margin-bottom:18px}
.device-security-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:12px
}
.device-security-stats>div{
  padding:12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#07140c
}
.device-security-stats span{
  display:block;
  color:var(--muted);
  font-size:9px;
  margin-bottom:4px
}
.device-security-stats strong{font-size:20px}
.device-list{display:grid;gap:8px}
.device-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:12px 14px;
  border:1px solid rgba(57,233,120,.15);
  border-radius:12px;
  background:#07140c
}
.device-row.revoked{
  border-color:rgba(255,104,119,.18);
  opacity:.8
}
.device-row-title{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:4px
}
.device-row-title strong{font-size:12px}
.device-state{
  padding:3px 6px;
  border-radius:999px;
  font-size:8px;
  font-weight:900;
  letter-spacing:.08em
}
.device-state.active{
  color:var(--green);
  border:1px solid rgba(57,233,120,.25);
  background:rgba(57,233,120,.08)
}
.device-state.revoked{
  color:var(--red);
  border:1px solid rgba(255,104,119,.25);
  background:rgba(255,104,119,.08)
}
.device-row-meta{
  color:var(--muted);
  font-size:9px
}
.audit-list{display:grid;gap:6px}
.audit-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.04)
}
.audit-row strong{display:block;font-size:11px}
.audit-row span,.audit-row small{
  color:var(--muted);
  font-size:9px
}
@media(max-width:700px){
  .device-security-stats{grid-template-columns:1fr}
  .device-row{
    align-items:flex-start;
    flex-direction:column
  }
}


/* v0.13 - page navigation */
.view-page{display:none}
.view-page.active{display:block}

.overview-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:14px 0 20px
}
.overview-card{
  min-height:150px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:17px;
  border:1px solid rgba(57,233,120,.16);
  border-radius:15px;
  background:linear-gradient(180deg,rgba(10,29,17,.95),rgba(6,18,10,.95))
}
.overview-card>span{
  color:var(--muted);
  font-size:10px
}
.overview-card>strong{
  margin:7px 0 3px;
  font-size:29px;
  color:var(--green)
}
.overview-card>small{
  color:var(--muted);
  line-height:1.4
}
.overview-card.warning{border-color:rgba(255,189,89,.20)}
.overview-card.warning>strong{color:var(--amber)}
.overview-card.danger{border-color:rgba(255,104,119,.20)}
.overview-card.danger>strong{color:var(--red)}
.overview-card.support{border-color:rgba(90,168,255,.20)}
.overview-card.support>strong{color:#6fb8ff}

.link-btn{
  margin-top:auto;
  padding:8px 0 0;
  border:0;
  background:transparent;
  color:var(--green);
  font-size:10px;
  font-weight:800;
  cursor:pointer
}

.overview-hints{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px
}
.overview-hints>div{
  padding:13px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#07140c
}
.overview-hints b{
  display:block;
  font-size:11px;
  margin-bottom:5px
}
.overview-hints span{
  color:var(--muted);
  font-size:9px;
  line-height:1.4
}

/* tables */
.data-table-wrap{
  overflow:auto;
  border:1px solid var(--line);
  border-radius:14px;
  background:#07140c
}
.data-table{
  width:100%;
  border-collapse:collapse;
  min-width:850px
}
.data-table th{
  padding:11px 12px;
  text-align:left;
  color:#7f9988;
  font-size:9px;
  letter-spacing:.05em;
  text-transform:uppercase;
  border-bottom:1px solid var(--line);
  background:#08180e
}
.data-table td{
  padding:12px;
  font-size:10px;
  border-bottom:1px solid rgba(255,255,255,.04);
  vertical-align:middle
}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table td strong{
  display:block;
  font-size:11px;
  margin-bottom:3px
}
.data-table td small{
  display:block;
  color:var(--muted);
  font-size:9px
}
.table-actions{
  display:flex;
  gap:6px;
  white-space:nowrap
}
.small-btn{
  padding:7px 9px!important;
  font-size:9px!important
}
.table-status{
  display:inline-flex;
  padding:5px 7px;
  border-radius:999px;
  font-size:8px;
  font-weight:900;
  letter-spacing:.07em
}
.table-status.active{
  color:var(--green);
  border:1px solid rgba(57,233,120,.25);
  background:rgba(57,233,120,.07)
}
.table-status.expiring{
  color:var(--amber);
  border:1px solid rgba(255,189,89,.25);
  background:rgba(255,189,89,.07)
}
.table-status.expired{
  color:var(--red);
  border:1px solid rgba(255,104,119,.25);
  background:rgba(255,104,119,.07)
}
.empty-inline{
  min-height:150px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:5px;
  color:var(--muted);
  text-align:center
}
.empty-inline strong{color:var(--text)}

/* warranty editor */
.warranty-editor-card{
  width:min(620px,94vw);
  max-height:92vh;
  overflow:auto
}
.standalone-warranty-form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:20px
}
.standalone-warranty-form label{
  display:grid;
  gap:6px;
  color:#a8bcaf;
  font-size:10px
}
.standalone-warranty-form label:first-child,
.standalone-warranty-form label:nth-child(2){
  grid-column:1/-1
}
.standalone-warranty-form input,
.standalone-warranty-form select{
  width:100%;
  padding:12px 13px;
  border:1px solid var(--line);
  border-radius:10px;
  outline:none;
  background:#06120a;
  color:var(--text)
}
.standalone-warranty-form input:focus,
.standalone-warranty-form select:focus{
  border-color:rgba(57,233,120,.42);
  box-shadow:0 0 0 3px rgba(57,233,120,.06)
}
.warranty-editor-preview{
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 13px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#07140c
}
.warranty-editor-preview span{
  color:var(--muted);
  font-size:10px
}
.form-message{
  grid-column:1/-1;
  min-height:18px;
  font-size:10px;
  color:var(--muted)
}
.form-message.success{color:var(--green)}
.form-message.error{color:var(--red)}
.modal-form-actions{
  grid-column:1/-1;
  display:flex;
  gap:9px;
  justify-content:flex-end
}
.save-banner{
  margin-bottom:12px;
  padding:11px 13px;
  border-radius:10px;
  font-size:10px
}
.save-banner.success{
  color:var(--green);
  border:1px solid rgba(57,233,120,.22);
  background:rgba(57,233,120,.06)
}
.save-banner.hidden{display:none}
.detail-action-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px
}

@media(max-width:1100px){
  .overview-grid{grid-template-columns:repeat(2,1fr)}
  .overview-hints{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .overview-grid,
  .overview-hints{grid-template-columns:1fr}
  .standalone-warranty-form{grid-template-columns:1fr}
  .standalone-warranty-form label:first-child,
  .standalone-warranty-form label:nth-child(2),
  .warranty-editor-preview,
  .form-message,
  .modal-form-actions{grid-column:1}
}


/* v0.14 warranty search */
.panel-head-actions{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap
}
.warranty-search-wrap input{
  min-width:340px
}

/* diagnostics */
.repair-stats-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:16px
}
.mini-stat.rma{
  border-color:rgba(190,130,255,.20)
}
.mini-stat.rma strong{color:#c28cff}
.mini-stat.ready{
  border-color:rgba(57,233,120,.22)
}
.mini-stat.ready strong{color:var(--green)}

.repair-filters{
  display:flex;
  gap:7px;
  overflow:auto;
  padding-bottom:10px;
  margin-bottom:8px
}
.filter-chip{
  flex:0 0 auto;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#07140c;
  color:var(--muted);
  font-size:9px;
  cursor:pointer
}
.filter-chip.active{
  color:var(--green);
  border-color:rgba(57,233,120,.30);
  background:rgba(57,233,120,.07)
}

.repair-list{display:grid;gap:10px}
.repair-card{
  display:flex;
  justify-content:space-between;
  align-items:stretch;
  gap:16px;
  padding:15px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#07140c
}
.repair-card-main{
  flex:1;
  min-width:0
}
.repair-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px
}
.repair-card-head strong{
  display:block;
  font-size:13px;
  margin-top:4px
}
.repair-os{
  color:#75b9ff;
  font-size:9px;
  font-weight:900;
  letter-spacing:.07em
}
.repair-status{
  flex:0 0 auto;
  padding:5px 8px;
  border-radius:999px;
  font-size:8px;
  font-weight:900
}
.repair-status.inprogress{
  color:#75b9ff;
  border:1px solid rgba(90,168,255,.25);
  background:rgba(90,168,255,.07)
}
.repair-status.waiting{
  color:var(--amber);
  border:1px solid rgba(255,189,89,.25);
  background:rgba(255,189,89,.07)
}
.repair-status.ready{
  color:var(--green);
  border:1px solid rgba(57,233,120,.25);
  background:rgba(57,233,120,.07)
}
.repair-status.cancelled{
  color:var(--red);
  border:1px solid rgba(255,104,119,.25);
  background:rgba(255,104,119,.07)
}
.repair-client-line{
  margin-top:8px;
  color:var(--muted);
  font-size:10px
}
.repair-problem{
  margin:8px 0;
  color:#dbe8df;
  font-size:10px;
  line-height:1.45
}
.repair-progress-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin:9px 0
}
.repair-progress-track{
  flex:1;
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:#102219
}
.repair-progress-track span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,#2fb966,#55f18c)
}
.repair-progress-row small{
  width:34px;
  text-align:right;
  color:var(--muted)
}
.repair-meta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:9px
}
.repair-public-message{
  margin-top:9px;
  padding:8px 10px;
  border-left:2px solid var(--green);
  background:rgba(57,233,120,.04);
  color:#aac4b2;
  font-size:9px
}
.repair-card-actions{
  width:135px;
  display:flex;
  flex-direction:column;
  gap:6px;
  justify-content:center
}

.repair-editor-card{
  width:min(850px,94vw);
  max-height:92vh;
  overflow:auto
}
.repair-form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px;
  margin-top:18px
}
.repair-form label,
.repair-status-form label{
  display:grid;
  gap:6px;
  color:#a8bcaf;
  font-size:10px
}
.repair-form input,
.repair-form select,
.repair-form textarea,
.repair-status-form select,
.repair-status-form textarea{
  width:100%;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#06120a;
  color:var(--text);
  outline:none;
  resize:vertical
}
.repair-form textarea{
  min-height:82px
}
.full-span{grid-column:1/-1}

.repair-detail-card{
  width:min(900px,94vw);
  max-height:92vh;
  overflow:auto
}
.repair-detail-title{
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:flex-start
}
.repair-detail-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  margin:15px 0
}
.repair-detail-grid>div,
.repair-detail-block{
  padding:11px;
  border-radius:11px;
  border:1px solid var(--line);
  background:#07140c
}
.repair-detail-grid span,
.repair-detail-block>span{
  display:block;
  color:var(--muted);
  font-size:9px;
  margin-bottom:5px
}
.repair-detail-grid strong{
  font-size:10px
}
.repair-detail-block p{
  margin:0;
  font-size:10px;
  line-height:1.5
}
.repair-detail-block.internal{
  margin-top:9px;
  border-color:rgba(255,189,89,.17)
}
.repair-timeline{
  display:grid;
  gap:0;
  margin-top:5px
}
.repair-timeline-item{
  display:grid;
  grid-template-columns:18px 1fr;
  gap:8px;
  position:relative;
  padding-bottom:15px
}
.repair-timeline-item:before{
  content:"";
  position:absolute;
  left:5px;top:12px;bottom:-1px;
  width:1px;background:var(--line)
}
.repair-timeline-item:last-child:before{display:none}
.timeline-dot{
  width:11px;height:11px;margin-top:3px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 3px rgba(57,233,120,.08);
  z-index:1
}
.timeline-head{
  display:flex;
  justify-content:space-between;
  gap:10px
}
.timeline-head strong{font-size:10px}
.timeline-head small,
.repair-timeline-item small{color:var(--muted);font-size:8px}
.repair-timeline-item p{margin:4px 0;font-size:10px}
.timeline-internal{
  margin:5px 0;
  padding:6px 8px;
  color:var(--amber);
  background:rgba(255,189,89,.05);
  border-radius:7px;
  font-size:9px
}
.repair-status-card{
  width:min(620px,94vw)
}
.repair-status-form{
  display:grid;
  gap:11px;
  margin-top:18px
}
.repair-status-form textarea{min-height:90px}

@media(max-width:900px){
  .repair-stats-grid{grid-template-columns:repeat(2,1fr)}
  .repair-card{flex-direction:column}
  .repair-card-actions{
    width:auto;
    flex-direction:row;
    flex-wrap:wrap
  }
  .repair-detail-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:650px){
  .warranty-search-wrap input{min-width:220px}
  .repair-stats-grid{grid-template-columns:1fr}
  .repair-form{grid-template-columns:1fr}
  .full-span{grid-column:1}
  .repair-detail-grid{grid-template-columns:1fr}
}


/* v0.15 Kanban */
.repair-kanban-panel{margin-bottom:16px}
.repair-kanban{
  display:grid;
  grid-template-columns:repeat(6,minmax(180px,1fr));
  gap:9px;
  overflow:auto;
  padding-bottom:5px
}
.kanban-column{
  min-width:180px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#06120a;
  overflow:hidden
}
.kanban-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px;
  border-bottom:1px solid var(--line);
  background:#08180e
}
.kanban-head strong{font-size:10px}
.kanban-head span{
  min-width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#102719;
  color:var(--muted);
  font-size:9px
}
.kanban-cards{
  display:grid;
  gap:7px;
  padding:8px;
  max-height:380px;
  overflow:auto
}
.kanban-card{
  width:100%;
  display:block;
  text-align:left;
  padding:9px;
  border:1px solid rgba(255,255,255,.05);
  border-radius:9px;
  background:#091b10;
  color:var(--text);
  cursor:pointer
}
.kanban-card:hover{border-color:rgba(57,233,120,.25)}
.kanban-card strong{
  display:block;
  margin:4px 0;
  font-size:10px
}
.kanban-card small{color:var(--muted);font-size:8px}
.kanban-os{color:#75b9ff;font-size:8px;font-weight:900}
.kanban-bottom{
  display:flex;
  justify-content:space-between;
  gap:6px;
  align-items:center;
  margin-top:7px;
  color:var(--muted);
  font-size:8px
}
.kanban-empty{
  min-height:45px;
  display:grid;
  place-items:center;
  color:#496152
}

.priority-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 6px;
  border-radius:999px;
  font-size:8px;
  font-weight:900;
  letter-spacing:.05em
}
.priority-badge.normal{
  color:#8fa79a;
  border:1px solid var(--line);
  background:#0b1a10
}
.priority-badge.high{
  color:var(--amber);
  border:1px solid rgba(255,189,89,.25);
  background:rgba(255,189,89,.07)
}
.priority-badge.urgent{
  color:#ff8793;
  border:1px solid rgba(255,104,119,.28);
  background:rgba(255,104,119,.08)
}
.repair-assignment-line{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:8px;
  color:var(--muted);
  font-size:9px
}

/* v0.15 quote */
.quote-editor-card{
  width:min(860px,94vw);
  max-height:92vh;
  overflow:auto
}
.quote-items{
  display:grid;
  gap:8px;
  margin:18px 0 10px
}
.quote-item-row{
  display:grid;
  grid-template-columns:minmax(220px,1fr) 80px 130px 125px 36px;
  gap:7px;
  align-items:center
}
.quote-item-row input{
  width:100%;
  padding:10px;
  border-radius:9px;
  border:1px solid var(--line);
  background:#06120a;
  color:var(--text)
}
.quote-item-row strong{
  text-align:right;
  font-size:10px
}
.quote-remove-btn{
  width:34px;height:34px;
  border-radius:8px;
  border:1px solid rgba(255,104,119,.25);
  background:rgba(255,104,119,.07);
  color:var(--red);
  cursor:pointer;
  font-size:17px
}
.quote-note-label{
  display:grid;
  gap:6px;
  margin-top:14px;
  color:#a8bcaf;
  font-size:10px
}
.quote-note-label textarea{
  min-height:80px;
  padding:11px;
  border-radius:9px;
  border:1px solid var(--line);
  resize:vertical;
  background:#06120a;
  color:var(--text)
}
.quote-total-row{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:16px;
  margin:14px 0;
  padding:12px;
  border-top:1px solid var(--line)
}
.quote-total-row span{color:var(--muted);font-size:10px}
.quote-total-row strong{font-size:20px;color:var(--green)}
.quote-summary-inline{
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:center;
  margin-bottom:7px
}
.quote-summary-inline strong{color:var(--amber)}
.quote-summary-inline b{font-size:16px;color:var(--green)}

@media(max-width:760px){
  .quote-item-row{
    grid-template-columns:1fr 70px 110px;
  }
  .quote-item-row .quote-line-total{grid-column:1/3;text-align:left}
}


/* v0.16 — leitura maior */
body{font-size:15px}
.nav-item{font-size:13px!important;padding:12px 13px!important}
.sidebar-footer{font-size:11px!important}
.eyebrow{font-size:11px!important}
.topbar h1{font-size:28px!important}
.muted{font-size:11px!important;line-height:1.5}
.panel h2,.test-mode-panel h2{font-size:18px!important}
.stat-card small,.overview-card>span,.overview-card>small,.overview-hints span{font-size:11px!important}
.ghost-btn,.primary-btn,.danger-btn{font-size:11px!important;min-height:38px}
.small-btn{font-size:10px!important;min-height:32px}
input,select,textarea{font-size:13px!important}
.data-table th{font-size:10px!important;padding:13px 14px!important}
.data-table td{font-size:12px!important;padding:14px!important}
.data-table td strong{font-size:12px!important}.data-table td small{font-size:10px!important}
.repair-card-head strong{font-size:14px!important}.repair-client-line,.repair-problem{font-size:11px!important}
.repair-meta,.repair-public-message,.repair-assignment-line{font-size:10px!important}
.form-message{font-size:11px!important}.section-title{font-size:12px!important}

/* v0.16 — galeria */
.media-editor-card{width:min(1000px,95vw);max-height:92vh;overflow:auto}
.media-upload-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}
.media-upload-form label{display:grid;gap:7px;color:#b5c9bb;font-size:11px}
.media-upload-form input,.media-upload-form select,.media-upload-form textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;background:#06120a;color:var(--text)}
.media-upload-form textarea{min-height:85px;resize:vertical}.media-upload-form small{color:var(--muted);font-size:10px}
.visibility-check{display:flex!important;flex-direction:row;align-items:center;gap:10px!important;align-self:end;min-height:46px}.visibility-check input{width:18px!important;height:18px}
.repair-media-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.repair-media-card{overflow:hidden;border:1px solid var(--line);border-radius:13px;background:#07140c}
.repair-media-preview{background:#020805}.repair-media-preview img,.repair-media-preview video{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:#000}
.repair-media-info{padding:11px}.repair-media-head{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}.repair-media-head strong{font-size:12px;line-height:1.4}
.repair-media-info small{display:block;margin-top:6px;color:var(--muted);font-size:10px}.media-visibility{flex:0 0 auto;padding:4px 6px;border-radius:999px;font-size:9px;font-weight:900}
.media-visibility.public{color:var(--green);border:1px solid rgba(57,233,120,.25);background:rgba(57,233,120,.06)}.media-visibility.private{color:var(--amber);border:1px solid rgba(255,189,89,.25);background:rgba(255,189,89,.06)}
.repair-media-actions{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
@media(max-width:900px){.repair-media-gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.media-upload-form{grid-template-columns:1fr}.repair-media-gallery{grid-template-columns:1fr}}


/* ============================================================
   v0.17 — tamanho de interface configurável
   ============================================================ */
:root{
  --ui-scale:1.15;
}
.app-shell{
  zoom:var(--ui-scale);
}
.modal-card,
.auth-card{
  zoom:var(--ui-scale);
}
.ui-scale-control{
  display:flex;
  align-items:center;
  gap:5px;
  padding:4px 6px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#07140c
}
.ui-scale-control span{
  padding:0 4px;
  color:var(--muted);
  font-size:10px;
  font-weight:700
}
.ui-scale-control button{
  border:0;
  border-radius:7px;
  padding:6px 8px;
  background:transparent;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  cursor:pointer
}
.ui-scale-control button.active{
  color:#041008;
  background:var(--green)
}

/* support queue/chat */
.global-support-item.in-progress{
  border-color:rgba(57,233,120,.24)
}
.support-state-badge{
  padding:4px 7px;
  border-radius:999px;
  font-size:9px;
  font-weight:900
}
.support-state-badge.open{
  color:var(--amber);
  border:1px solid rgba(255,189,89,.25)
}
.support-state-badge.in_progress{
  color:var(--green);
  border:1px solid rgba(57,233,120,.25)
}
.support-last-message{
  margin-top:7px;
  padding:7px 9px;
  border-radius:8px;
  background:#06120a;
  color:#b9cabf;
  font-size:10px
}
.support-queue-actions{
  display:flex;
  flex-direction:column;
  gap:6px;
  width:120px
}
.support-chat-card{
  width:min(900px,94vw);
  height:min(820px,92vh);
  display:flex;
  flex-direction:column
}
.support-chat-header{
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:flex-start;
  padding-right:34px
}
.support-chat-status{
  padding:6px 9px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  white-space:nowrap
}
.support-chat-status.open{
  color:var(--amber);
  border:1px solid rgba(255,189,89,.25)
}
.support-chat-status.in_progress{
  color:var(--green);
  border:1px solid rgba(57,233,120,.25)
}
.support-chat-status.resolved{
  color:var(--muted);
  border:1px solid var(--line)
}
.support-chat-messages{
  flex:1;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:9px;
  margin:14px 0;
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#051009
}
.chat-message{
  max-width:78%;
  padding:10px 11px;
  border-radius:12px;
  border:1px solid var(--line)
}
.chat-message.technician{
  margin-left:auto;
  background:rgba(57,233,120,.07);
  border-color:rgba(57,233,120,.18)
}
.chat-message.customer{
  margin-right:auto;
  background:rgba(90,168,255,.07);
  border-color:rgba(90,168,255,.18)
}
.chat-message.system{
  align-self:center;
  max-width:90%;
  background:#0b1710;
  color:var(--muted)
}
.chat-message-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:5px
}
.chat-message-head strong{
  font-size:10px
}
.chat-message-head small{
  color:var(--muted);
  font-size:9px
}
.chat-message-body{
  white-space:pre-wrap;
  font-size:12px;
  line-height:1.5
}
.support-chat-compose{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px
}
.support-chat-compose textarea{
  min-height:70px;
  resize:vertical
}
.support-chat-footer-actions{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:10px
}
.support-remote-box{
  margin-top:12px
}
.remote-state{
  display:grid;
  gap:4px;
  padding:11px 12px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#07140c
}
.remote-state strong{
  font-size:12px
}
.remote-state span{
  color:var(--muted);
  font-size:10px
}
.remote-state b{
  color:var(--green);
  font-size:10px
}
.remote-state.authorized{
  border-color:rgba(57,233,120,.35)
}
.remote-state.waiting{
  border-color:rgba(255,189,89,.30)
}
.remote-state.blocked{
  border-color:rgba(255,104,119,.28)
}

@media(max-width:760px){
  .ui-scale-control{display:none}
  .support-queue-actions{
    width:auto;
    flex-direction:row;
    flex-wrap:wrap
  }
  .support-chat-compose{
    grid-template-columns:1fr
  }
}


/* ============================================================
   v0.17.2 — correção de layout do suporte/remoto
   ============================================================ */
.support-chat-card{
  max-height:calc(92vh / var(--ui-scale));
  overflow:hidden;
}
.support-chat-messages{
  min-height:180px;
  overflow:auto;
}
.support-chat-compose{
  flex:0 0 auto;
}
.support-chat-footer-actions{
  flex:0 0 auto;
  position:sticky;
  bottom:0;
  z-index:4;
  padding-top:8px;
  padding-bottom:4px;
  background:linear-gradient(
    to bottom,
    rgba(6,17,10,.2),
    rgba(6,17,10,.98) 30%
  );
}
.support-remote-box{
  flex:0 0 auto;
}

.remote-connect-btn{
  width:max-content;
  min-width:190px;
  margin-top:9px;
  font-weight:900!important;
}

.agent-version-line{display:block;margin-top:4px;font-size:11px!important;font-weight:800}.agent-version-line.agent-ok{color:#45ed82!important}.agent-version-line.agent-old{color:#ffbd59!important}.detail-badge.agent-detail-old{border-color:#6b541d!important;color:#ffbd59!important}


/* ============================================================
   v0.22 — Equipe & Acessos
   ============================================================ */

.logged-user{
  min-width:120px;
  text-align:right;
  display:flex;
  flex-direction:column;
  line-height:1.05;
}
.logged-user strong{
  font-size:13px;
  color:var(--text);
}
.logged-user small{
  margin-top:4px;
  font-size:10px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
}

.team-stats-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}

.team-list{
  display:flex;
  flex-direction:column;
  gap:9px;
}

.team-row{
  display:grid;
  grid-template-columns:minmax(180px,1fr) auto auto;
  gap:14px;
  align-items:center;
  border:1px solid var(--border);
  border-radius:12px;
  background:#07140c;
  padding:13px 14px;
}

.team-row.inactive{
  opacity:.62;
}

.team-main{
  min-width:0;
}
.team-main strong{
  font-size:14px;
}
.team-main small{
  display:block;
  color:var(--muted);
  margin-top:5px;
}

.role-badge{
  display:inline-flex;
  align-items:center;
  padding:5px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.role-badge.admin{
  color:#ffbd59;
  border-color:#5a4512;
}
.role-badge.technician{
  color:#45ed82;
  border-color:#285c38;
}

.team-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.team-user-card{
  max-width:520px;
}

@media (max-width:1050px){
  .team-stats-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .team-row{
    grid-template-columns:1fr;
  }
  .team-actions{
    justify-content:flex-start;
  }
  .logged-user{
    display:none;
  }
}

/* v0.23 */
.mywork-stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}.mywork-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}.mywork-list{display:flex;flex-direction:column;gap:9px}.mywork-item{border:1px solid var(--border);background:#07140c;border-radius:12px;padding:12px 13px}.mywork-item-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.mywork-item p{margin:7px 0;color:var(--muted);font-size:12px}.mywork-meta{display:flex;flex-wrap:wrap;gap:8px 12px;color:var(--muted);font-size:11px}.mywork-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.assignment-card{max-width:520px}.assignment-owner{display:inline-flex;padding:4px 7px;border:1px solid var(--border);border-radius:999px;font-size:10px;color:var(--muted)}.assignment-owner.mine{border-color:#285c38;color:#45ed82}@media(max-width:1050px){.mywork-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mywork-grid{grid-template-columns:1fr}}


/* ============================================================
   v0.24 — Notificações & SLA interno
   ============================================================ */

.notification-wrap{
  position:relative;
}

.notification-btn{
  position:relative;
  min-width:42px;
}

.notification-badge{
  position:absolute;
  top:-6px;
  right:-5px;
  min-width:19px;
  height:19px;
  padding:0 5px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#ff596a;
  color:#fff;
  border:2px solid #07140c;
  font-size:9px;
  font-weight:900;
}

.notification-panel{
  position:absolute;
  z-index:80;
  top:calc(100% + 9px);
  right:0;
  width:min(420px,calc(100vw - 28px));
  max-height:min(620px,75vh);
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:#07140c;
  box-shadow:0 22px 60px rgba(0,0,0,.48);
}

.notification-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:12px 13px;
  border-bottom:1px solid var(--border);
}

.notification-panel-head small{
  display:block;
  margin-top:3px;
  color:var(--muted);
}

.notification-list{
  max-height:520px;
  overflow:auto;
  padding:8px;
}

.notification-item{
  display:block;
  width:100%;
  text-align:left;
  border:1px solid transparent;
  border-radius:10px;
  padding:10px;
  margin:0 0 6px;
  background:#09160e;
  color:var(--text);
  cursor:pointer;
}

.notification-item:hover{
  border-color:var(--border);
}

.notification-item.unread{
  background:#0d2014;
  border-color:#235a36;
}

.notification-item.warning{
  border-left:3px solid #ffbd59;
}

.notification-item.danger{
  border-left:3px solid #ff596a;
}

.notification-item strong{
  display:block;
  font-size:12px;
}

.notification-item p{
  margin:5px 0 6px;
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
}

.notification-item time{
  color:#657b6b;
  font-size:9px;
}

.mywork-stats-grid{
  grid-template-columns:repeat(5,minmax(0,1fr));
}

.mywork-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  margin-bottom:14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#07140c;
}

.mywork-toolbar span{
  display:block;
  margin-top:3px;
  font-size:11px;
}

.sla-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  border:1px solid var(--border);
  border-radius:999px;
  padding:4px 7px;
  font-size:10px;
  font-weight:800;
}

.sla-badge.ok,
.sla-badge.met{
  color:#45ed82;
  border-color:#285c38;
}

.sla-badge.warning{
  color:#ffbd59;
  border-color:#604c1b;
}

.sla-badge.overdue,
.sla-badge.breached{
  color:#ff7d89;
  border-color:#66262c;
}

.sla-badge.unknown{
  color:var(--muted);
}

.sla-settings-card{
  max-width:660px;
}

.sla-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:16px 0;
}

@media(max-width:1050px){
  .mywork-stats-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:700px){
  .sla-form-grid{
    grid-template-columns:1fr;
  }
  .notification-panel{
    position:fixed;
    top:80px;
    right:14px;
    left:14px;
    width:auto;
  }
}


/* v0.25 — Backup & Recuperação */
.backup-stats-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}

.backup-warning{
  margin-bottom:12px;
  padding:11px 12px;
  border:1px solid #604c1b;
  border-radius:10px;
  background:#201a08;
  color:#e8d89c;
  font-size:12px;
  line-height:1.45;
}

.backup-warning code{
  color:#ffbd59;
}

.backup-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.backup-row{
  display:grid;
  grid-template-columns:minmax(220px,1fr) auto auto;
  gap:12px;
  align-items:center;
  padding:12px 13px;
  border:1px solid var(--border);
  border-radius:11px;
  background:#07140c;
}

.backup-main strong{
  display:block;
  font-size:13px;
  word-break:break-all;
}

.backup-main small{
  display:block;
  margin-top:5px;
  color:var(--muted);
}

.backup-mode{
  display:inline-flex;
  padding:5px 8px;
  border:1px solid #285c38;
  border-radius:999px;
  color:#45ed82;
  font-size:10px;
  font-weight:900;
}

.backup-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

@media(max-width:1050px){
  .backup-stats-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .backup-row{
    grid-template-columns:1fr;
  }

  .backup-actions{
    justify-content:flex-start;
  }
}


/* ============================================================
   v0.26 - Relatórios & PDF
   ============================================================ */

.report-builder{
  margin-bottom:14px;
}

.report-controls{
  display:grid;
  grid-template-columns:minmax(210px,1.4fr) minmax(150px,.8fr) minmax(150px,.8fr) auto;
  gap:12px;
  align-items:end;
}

.report-controls label{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.report-controls label span{
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.report-controls select,
.report-controls input{
  min-height:42px;
}

.report-main-actions{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}

.report-period-shortcuts{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin-top:12px;
}

.report-period-shortcuts>span{
  color:var(--muted);
  font-size:11px;
}

.report-feedback{
  margin-top:10px;
  padding:9px 11px;
  border:1px solid var(--border);
  border-radius:9px;
  background:#07140c;
  font-size:11px;
}

.report-feedback.error{
  border-color:#66262c;
  color:#ff7d89;
}

.report-feedback.ok{
  border-color:#285c38;
  color:#45ed82;
}

.report-stats-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}

.reports-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:14px;
  align-items:start;
}

.report-current-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}

.report-current-grid>div{
  padding:11px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#07140c;
}

.report-current-grid span{
  display:block;
  color:var(--muted);
  font-size:10px;
}

.report-current-grid strong{
  display:block;
  margin-top:5px;
  font-size:18px;
}

.report-catalog{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.report-catalog>div{
  padding:10px 11px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#07140c;
}

.report-catalog strong{
  display:block;
  font-size:12px;
}

.report-catalog span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:11px;
  line-height:1.4;
}

@media(max-width:1180px){
  .report-controls{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .report-stats-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .reports-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:700px){
  .report-controls{
    grid-template-columns:1fr;
  }

  .report-stats-grid{
    grid-template-columns:1fr 1fr;
  }

  .report-current-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* ============================================================
   v0.26.1 — Hotfix da central de notificações
   ============================================================ */

/*
  A v0.26 aplicava a classe "hidden" via JavaScript, porém não havia
  regra específica para esconder notification-panel/notification-badge.
*/
.notification-panel.hidden,
.notification-badge.hidden{
  display:none !important;
}

.notification-head-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.notification-close-btn{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid var(--border);
  border-radius:8px;
  background:#0b1c11;
  color:var(--text);
  font-size:21px;
  line-height:1;
  cursor:pointer;
  flex:0 0 auto;
}

.notification-close-btn:hover,
.notification-close-btn:focus-visible{
  border-color:#3a7650;
  background:#102718;
  outline:none;
}

.notification-panel{
  overscroll-behavior:contain;
}


/* ============================================================
   v0.26.2 — Chat de suporte mais amplo estilo mensageiro
   ============================================================ */

.support-queue-panel-messenger{
  margin-bottom:18px;
}

.support-queue-toolbar{
  padding:0 0 12px;
}

.support-queue-toolbar input{
  min-height:44px;
}

.global-support-list-messenger{
  display:grid;
  gap:10px;
}

.global-support-list-messenger .global-support-item{
  border-radius:16px;
  padding:16px 16px;
  align-items:flex-start;
  gap:14px;
  transition:transform .12s ease,border-color .12s ease,background .12s ease;
}

.global-support-list-messenger .global-support-item:hover{
  transform:translateY(-1px);
  border-color:#2f7b4b;
}

.global-support-list-messenger .global-support-item.active{
  border-color:#2f7b4b;
  background:#0d2014;
  box-shadow:0 0 0 1px rgba(69,237,130,.18) inset;
}

.global-support-list-messenger .global-support-title strong{
  font-size:15px;
}

.global-support-list-messenger .global-support-pc{
  font-size:12px;
  line-height:1.5;
}

.global-support-list-messenger .global-support-description{
  font-size:12px;
  line-height:1.5;
}

.support-chat-card-messenger{
  width:min(1180px,96vw);
  height:min(900px,94vh);
  padding:22px 24px 16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.support-chat-header-messenger{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding-right:34px;
  border-bottom:1px solid var(--border);
  padding-bottom:14px;
  margin-bottom:2px;
}

.support-chat-header-main{
  display:flex;
  align-items:flex-start;
  gap:14px;
  min-width:0;
}

.support-chat-avatar{
  width:56px;
  height:56px;
  border-radius:18px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,#22c55e,#138a42);
  color:#fff;
  font-weight:900;
  font-size:22px;
  box-shadow:0 10px 22px rgba(10,40,22,.24);
}

.support-chat-header-text{
  min-width:0;
}

.support-chat-header-text h2{
  font-size:21px;
  line-height:1.2;
  margin:2px 0 4px;
}

.support-chat-header-text .muted{
  font-size:13px;
  line-height:1.45;
}

.support-chat-messages-messenger{
  flex:1 1 auto;
  min-height:430px;
  max-height:none;
  padding:18px 14px;
  border-radius:20px;
  border:1px solid var(--border);
  background:
    radial-gradient(circle at top right, rgba(34,197,94,.06), transparent 40%),
    linear-gradient(180deg,#08140d 0%,#0a1810 100%);
  display:flex;
  flex-direction:column;
  gap:12px;
}

.support-chat-messages-messenger .chat-message{
  max-width:min(78%,760px);
  padding:12px 14px;
  border-radius:18px;
}

.support-chat-messages-messenger .chat-message.customer{
  align-self:flex-start;
  border-top-left-radius:7px;
}

.support-chat-messages-messenger .chat-message.staff,
.support-chat-messages-messenger .chat-message.technician{
  align-self:flex-end;
  border-top-right-radius:7px;
}

.support-chat-messages-messenger .chat-message-head{
  margin-bottom:6px;
}

.support-chat-messages-messenger .chat-message-body{
  font-size:14px;
  line-height:1.55;
}

.support-chat-messages-messenger .chat-message-time{
  margin-top:8px;
  font-size:10px;
}

.support-chat-compose-messenger{
  flex:0 0 auto;
  border-radius:18px;
  padding:14px;
  border:1px solid var(--border);
  background:#07140c;
}

.support-chat-compose-messenger textarea{
  min-height:120px;
  max-height:260px;
  resize:vertical;
  border-radius:16px;
  padding:14px 16px;
  font-size:14px;
  line-height:1.55;
}

.support-chat-compose-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

.support-compose-tip{
  color:var(--muted);
  font-size:11px;
}

.support-chat-footer-actions-messenger{
  flex:0 0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
  padding-top:2px;
  background:transparent;
  position:static;
}

@media(max-width:980px){
  .support-chat-card-messenger{
    width:min(96vw,96vw);
    height:min(94vh,94vh);
    padding:18px 18px 14px;
  }

  .support-chat-header-messenger{
    flex-direction:column;
    padding-right:26px;
  }

  .support-chat-messages-messenger{
    min-height:320px;
  }

  .support-chat-footer-actions-messenger{
    justify-content:flex-start;
  }
}

@media(max-width:640px){
  .support-chat-avatar{
    width:48px;
    height:48px;
    font-size:18px;
    border-radius:14px;
  }

  .support-chat-header-text h2{
    font-size:18px;
  }

  .support-chat-messages-messenger .chat-message{
    max-width:92%;
  }

  .support-chat-compose-messenger textarea{
    min-height:98px;
  }
}


/* ============================================================
   v0.26.3 — Chat profissional estilo mensageiro
   ============================================================ */

.support-queue-toolbar{
  display:flex;
  align-items:center;
  gap:10px;
}

.support-search-wrap{
  position:relative;
  flex:1;
  min-width:0;
}

.support-search-icon{
  position:absolute;
  left:13px;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  font-size:18px;
  pointer-events:none;
}

.support-search-wrap input{
  width:100%;
  padding-left:38px!important;
  border-radius:14px;
  background:#08150d;
}

.support-conversation-counter{
  min-width:76px;
  height:44px;
  padding:0 12px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  border:1px solid var(--border);
  border-radius:14px;
  background:#07140c;
}

.support-conversation-counter span{
  font-size:15px;
  font-weight:900;
  color:var(--text);
  line-height:1;
}

.support-conversation-counter small{
  margin-top:3px;
  color:var(--muted);
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.06em;
}

/* cada chamado vira uma linha visual de conversa */
.global-support-list-messenger .global-support-item{
  position:relative;
  display:grid!important;
  grid-template-columns:52px minmax(0,1fr) auto;
  align-items:start!important;
}

.support-conversation-avatar{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(145deg,#1ec65d,#0b7f37);
  color:#fff;
  font-size:16px;
  font-weight:900;
  box-shadow:0 8px 18px rgba(0,0,0,.22);
}

.support-conversation-main{
  min-width:0;
}

.support-conversation-topline{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:5px;
}

.support-conversation-name{
  font-size:14px;
  font-weight:900;
  color:var(--text);
}

.support-conversation-subtitle{
  color:var(--muted);
  font-size:11px;
  line-height:1.4;
}

.support-conversation-preview{
  display:block;
  max-width:100%;
  margin-top:7px;
  color:#afc0b4;
  font-size:11px;
  line-height:1.45;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.support-conversation-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}

.support-conversation-side{
  min-width:84px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:7px;
}

.support-conversation-time{
  color:var(--muted);
  font-size:9px;
  white-space:nowrap;
}

.support-unread-badge{
  min-width:21px;
  height:21px;
  padding:0 6px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#22c55e;
  color:#061108;
  font-size:9px;
  font-weight:900;
}

.support-read-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#496054;
}

.global-support-list-messenger .global-support-item.has-unread{
  border-color:rgba(34,197,94,.36);
  background:linear-gradient(90deg,rgba(34,197,94,.06),#07140c);
}

.global-support-list-messenger .global-support-item.has-unread .support-conversation-name{
  color:#eafff0;
}

/* cabeçalho da conversa */
.support-chat-header-messenger{
  flex:0 0 auto;
}

.support-chat-presence{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:5px;
  color:#8eaa98;
  font-size:10px;
}

.support-presence-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,.10);
}

/* histórico */
.support-chat-messages-messenger{
  scrollbar-width:thin;
  scrollbar-color:#285c38 transparent;
}

.support-chat-messages-messenger::-webkit-scrollbar{
  width:8px;
}

.support-chat-messages-messenger::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:#285c38;
}

.chat-day-separator{
  align-self:center;
  margin:5px 0 2px;
  padding:5px 9px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#07140c;
  color:var(--muted);
  font-size:9px;
  font-weight:800;
  letter-spacing:.03em;
}

.support-chat-messages-messenger .chat-message{
  position:relative;
  min-width:90px;
  box-shadow:0 6px 14px rgba(0,0,0,.10);
}

.support-chat-messages-messenger .chat-message.customer{
  background:#0c1d28;
  border-color:rgba(90,168,255,.20);
}

.support-chat-messages-messenger .chat-message.technician{
  background:#12301b;
  border-color:rgba(57,233,120,.20);
}

.support-chat-messages-messenger .chat-message.system{
  box-shadow:none;
  border-radius:999px;
  padding:7px 11px;
}

.support-chat-messages-messenger .chat-message-body{
  font-size:14px;
  line-height:1.55;
  word-break:break-word;
}

.chat-message-footer{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:5px;
  margin-top:7px;
  color:#789181;
  font-size:9px;
}

.chat-message.technician .chat-message-footer{
  color:#88b195;
}

.chat-message.customer .chat-message-footer{
  color:#829eb0;
}

/* campo de envio fica sempre no rodapé do chat */
.support-chat-compose-messenger{
  position:sticky;
  bottom:0;
  z-index:6;
  background:#07140c;
  box-shadow:0 -14px 30px rgba(2,9,5,.25);
}

.support-chat-compose-messenger textarea{
  min-height:90px!important;
  max-height:220px;
  transition:border-color .12s ease,box-shadow .12s ease,height .12s ease;
}

.support-chat-compose-messenger textarea:focus{
  border-color:#2f7b4b;
  box-shadow:0 0 0 3px rgba(34,197,94,.08);
}

.support-compose-meta{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.support-char-count{
  color:#6d8172;
  font-size:10px;
}

.support-char-count.near-limit{
  color:#ffbd59;
}

.support-char-count.at-limit{
  color:#ff6877;
  font-weight:900;
}

.support-send-btn{
  min-width:110px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:13px;
}

.support-send-icon{
  font-size:12px;
}

@media(max-width:760px){
  .support-queue-toolbar{
    align-items:stretch;
  }

  .support-conversation-counter{
    min-width:68px;
  }

  .global-support-list-messenger .global-support-item{
    grid-template-columns:44px minmax(0,1fr);
  }

  .support-conversation-avatar{
    width:40px;
    height:40px;
  }

  .support-conversation-side{
    grid-column:2;
    min-width:0;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }

  .support-send-btn{
    width:100%;
  }
}


/* ============================================================
   v0.26.5 — Chat do técnico alinhado ao chat do cliente
   ============================================================ */

.support-chat-card-messenger{
  width:min(1180px,96vw);
  height:min(900px,94vh);
  border-radius:26px;
  background:
    radial-gradient(circle at top left,rgba(34,197,94,.08),transparent 35%),
    linear-gradient(180deg,#07170f 0%,#051109 100%);
  border:1px solid rgba(65,126,86,.34);
  box-shadow:0 28px 90px rgba(0,0,0,.45);
  padding:18px 18px 16px;
}

.support-chat-card-messenger .close-btn{
  top:16px;
  right:18px;
}

.support-chat-header-messenger{
  align-items:center;
  gap:18px;
  padding:4px 42px 12px 4px;
  border-bottom:1px solid rgba(76,121,92,.16);
  margin-bottom:12px;
}

.support-chat-header-main{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.support-chat-avatar{
  width:48px;
  height:48px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-size:22px;
  font-weight:900;
  background:linear-gradient(145deg,#3ce374,#128241);
  color:#04200f;
  box-shadow:0 12px 25px rgba(0,0,0,.22);
  flex:0 0 auto;
}

.support-chat-header-text{
  min-width:0;
}

.support-chat-header-text h2{
  font-size:28px;
  line-height:1.08;
  margin:0;
}

.support-chat-header-text .muted{
  margin-top:4px;
  font-size:12px;
}

.support-chat-status{
  align-self:flex-start;
  padding:8px 12px;
  font-size:11px;
  letter-spacing:.02em;
  border-width:1px;
  background:#07140d;
}

.support-remote-box{
  margin:0 2px 12px;
}

.support-remote-box .remote-state{
  border-radius:18px;
  border:1px solid rgba(84,127,98,.20);
  background:#07140d;
  padding:14px 16px;
  gap:6px;
}

.support-chat-thread-tech{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px 14px;
  background:
    linear-gradient(180deg,rgba(4,20,11,.94),rgba(3,13,8,.98));
  border:1px solid rgba(76,121,92,.16);
  border-radius:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}

.support-chat-messages-messenger{
  scrollbar-width:thin;
  scrollbar-color:#2d6540 transparent;
}

.support-chat-messages-messenger::-webkit-scrollbar{
  width:9px;
}

.support-chat-messages-messenger::-webkit-scrollbar-thumb{
  background:#285a39;
  border-radius:999px;
}

.chat-day-separator{
  align-self:center;
  padding:7px 13px;
  border-radius:999px;
  border:1px solid rgba(84,127,98,.18);
  background:#07140d;
  color:#91a995;
  font-size:10px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.support-chat-thread-tech .chat-message{
  position:relative;
  max-width:min(74%,760px);
  min-width:140px;
  padding:12px 14px 11px;
  border-radius:24px;
  border:1px solid rgba(84,127,98,.16);
  box-shadow:0 10px 30px rgba(0,0,0,.14);
}

.support-chat-thread-tech .chat-message.system{
  align-self:center;
  max-width:min(82%,850px);
  min-width:auto;
  border-radius:16px;
  padding:10px 14px;
  background:#0a1a12;
  border-color:rgba(84,127,98,.14);
  box-shadow:none;
}

.support-chat-thread-tech .chat-message.customer{
  align-self:flex-start;
  margin-right:auto;
  background:
    linear-gradient(180deg,rgba(13,31,43,.94),rgba(10,23,33,.98));
  border-color:rgba(90,168,255,.18);
}

.support-chat-thread-tech .chat-message.technician{
  align-self:flex-end;
  margin-left:auto;
  background:
    linear-gradient(180deg,rgba(17,53,30,.96),rgba(14,42,24,.99));
  border-color:rgba(57,233,120,.18);
}

.support-chat-thread-tech .chat-message-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:7px;
}

.support-chat-thread-tech .chat-message-badge{
  display:inline-flex;
  align-items:center;
  padding:5px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  line-height:1;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.support-chat-thread-tech .chat-message.customer .chat-message-badge{
  background:rgba(90,168,255,.14);
  color:#93c6ff;
}

.support-chat-thread-tech .chat-message.technician .chat-message-badge{
  background:rgba(57,233,120,.14);
  color:#7df7ab;
}

.support-chat-thread-tech .chat-message.system .chat-message-badge{
  background:rgba(255,255,255,.06);
  color:#b9c9ba;
}

.support-chat-thread-tech .chat-message-author{
  color:#dff6e2;
  font-size:12px;
  font-weight:800;
  letter-spacing:.01em;
}

.support-chat-thread-tech .chat-message-body{
  font-size:15px;
  line-height:1.6;
  color:#eef8f0;
  white-space:pre-wrap;
  word-break:break-word;
}

.support-chat-thread-tech .chat-message-footer{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:6px;
  margin-top:10px;
  color:#8ea791;
  font-size:10px;
}

.support-chat-thread-tech .chat-message.customer .chat-message-footer{
  color:#83a0b1;
}

.support-chat-thread-tech .chat-message.technician .chat-message-footer{
  color:#90c39f;
}

.support-chat-compose-messenger{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) 260px;
  gap:14px;
  align-items:end;
  margin-top:12px;
  padding:14px;
  border-radius:22px;
  border:1px solid rgba(76,121,92,.18);
  background:#06140d;
  box-shadow:0 -10px 32px rgba(0,0,0,.16);
}

.support-chat-compose-messenger textarea{
  width:100%;
  min-height:96px !important;
  max-height:180px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(89,127,98,.22);
  background:#f4f5f4;
  color:#132516;
  font-size:15px;
  line-height:1.45;
  resize:vertical;
}

.support-chat-compose-messenger textarea::placeholder{
  color:#6c756e;
}

.support-chat-compose-messenger textarea:focus{
  outline:none;
  border-color:rgba(34,197,94,.45);
  box-shadow:0 0 0 3px rgba(34,197,94,.10);
}

.support-chat-compose-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  min-width:0;
}

.support-compose-meta{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  text-align:right;
}

.support-compose-tip{
  color:#90a593;
  font-size:10px;
}

.support-char-count{
  color:#7c9180;
  font-size:10px;
  font-weight:700;
}

.support-send-btn{
  min-width:142px;
  min-height:46px;
  border-radius:14px;
  font-size:14px;
  font-weight:900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  box-shadow:0 10px 24px rgba(34,197,94,.16);
}

.support-send-icon{
  font-size:12px;
}

.support-chat-footer-actions-messenger{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  padding-top:12px;
}

.support-chat-footer-actions-messenger .primary-btn,
.support-chat-footer-actions-messenger .ghost-btn,
.support-chat-footer-actions-messenger .danger-btn{
  min-height:42px;
  border-radius:14px;
  padding:0 16px;
  font-size:12px;
  font-weight:800;
}

@media(max-width:1100px){
  .support-chat-card-messenger{
    width:min(1020px,97vw);
    height:min(900px,95vh);
  }

  .support-chat-compose-messenger{
    grid-template-columns:1fr;
  }

  .support-chat-compose-actions{
    width:100%;
    align-items:stretch;
  }

  .support-compose-meta{
    align-items:flex-start;
    text-align:left;
  }

  .support-send-btn{
    width:100%;
  }
}

@media(max-width:760px){
  .support-chat-card-messenger{
    width:98vw;
    height:96vh;
    padding:16px 12px 14px;
    border-radius:18px;
  }

  .support-chat-header-messenger{
    padding-right:28px;
  }

  .support-chat-header-text h2{
    font-size:22px;
  }

  .support-chat-thread-tech .chat-message{
    max-width:88%;
  }

  .support-chat-thread-tech .chat-message-body{
    font-size:14px;
  }

  .support-chat-footer-actions-messenger{
    justify-content:stretch;
  }

  .support-chat-footer-actions-messenger .primary-btn,
  .support-chat-footer-actions-messenger .ghost-btn,
  .support-chat-footer-actions-messenger .danger-btn{
    flex:1 1 100%;
  }
}


/* ============================================================
   v0.26.6 — Ajustes finos do chat do técnico
   ============================================================ */

.hidden{
  display:none !important;
}

.support-chat-thread-tech{
  gap:10px;
  padding:16px 12px;
}

.support-chat-thread-tech .chat-message{
  max-width:min(58%,540px);
  min-width:96px;
  padding:10px 12px 9px;
  border-radius:20px;
}

.support-chat-thread-tech .chat-message.system{
  max-width:min(72%,720px);
  padding:9px 12px;
  border-radius:14px;
}

.support-chat-thread-tech .chat-message-head{
  gap:7px;
  margin-bottom:5px;
}

.support-chat-thread-tech .chat-message-badge{
  padding:4px 7px;
  font-size:9px;
}

.support-chat-thread-tech .chat-message-author{
  font-size:11px;
}

.support-chat-thread-tech .chat-message-body{
  font-size:14px;
  line-height:1.48;
}

.support-chat-thread-tech .chat-message-footer{
  margin-top:8px;
  font-size:9px;
}

.support-chat-compose-messenger{
  grid-template-columns:minmax(0,1fr) 220px;
}

.support-chat-compose-messenger textarea{
  min-height:88px !important;
  font-size:14px;
}

.support-send-btn{
  min-width:128px;
  min-height:42px;
  font-size:13px;
}

@media(max-width:1100px){
  .support-chat-thread-tech .chat-message{
    max-width:72%;
  }
}

@media(max-width:760px){
  .support-chat-thread-tech .chat-message{
    max-width:86%;
  }
}


/* ============================================================
   v0.26.7 — Melhor aproveitamento vertical da tela de suporte
   ============================================================ */

.support-page{
  min-height:calc(100vh - 92px);
  display:flex;
  flex-direction:column;
  gap:14px;
}

.support-page .page-header{
  margin-bottom:0;
}

.support-admin-card{
  flex:0 0 auto;
}

.support-list-card{
  flex:1 1 auto;
  min-height:calc(100vh - 330px);
  display:flex;
  flex-direction:column;
}

.support-list-toolbar{
  flex:0 0 auto;
}

.support-list{
  flex:1 1 auto;
  min-height:320px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.support-request-item{
  flex:0 0 auto;
}

.support-request-list-empty{
  flex:1 1 auto;
  display:grid;
  place-items:center;
  min-height:220px;
}

@media(min-width:1200px){
  .support-page{
    min-height:calc(100vh - 86px);
  }

  .support-list-card{
    min-height:calc(100vh - 300px);
  }
}

@media(max-width:900px){
  .support-list-card{
    min-height:calc(100vh - 260px);
  }

  .support-list{
    min-height:260px;
  }
}


/* ============================================================
   v0.26.8 — Suporte ocupa praticamente toda a tela
   ============================================================ */

/*
  A página real usa:
  .view-page[data-page="support"]
  .test-mode-panel
  .support-queue-panel-messenger
  .global-support-list-messenger
*/

.view-page[data-page="support"].active{
  display:flex;
  flex-direction:column;
  min-height:calc(100vh - 175px);
  height:auto;
}

.view-page[data-page="support"] > .test-mode-panel{
  flex:0 0 auto;
  margin-bottom:14px;
}

.view-page[data-page="support"] > .support-queue-panel-messenger{
  flex:1 1 auto;
  min-height:520px;
  margin-bottom:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.support-queue-panel-messenger > .panel-head{
  flex:0 0 auto;
  margin-bottom:14px;
}

.support-queue-panel-messenger > .support-queue-toolbar{
  flex:0 0 auto;
  margin-bottom:10px;
}

.support-queue-panel-messenger > .global-support-list-messenger{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  align-content:start;
  padding-right:4px;
  padding-bottom:8px;
  scrollbar-width:thin;
  scrollbar-color:#285c38 transparent;
}

.support-queue-panel-messenger > .global-support-list-messenger::-webkit-scrollbar{
  width:8px;
}

.support-queue-panel-messenger > .global-support-list-messenger::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:#285c38;
}

.support-queue-panel-messenger > .global-support-list-messenger > .no-data{
  min-height:100%;
  display:grid;
  place-items:center;
}

/* Em monitor alto, aproveita ainda mais a altura disponível. */
@media(min-height:850px){
  .view-page[data-page="support"].active{
    min-height:calc(100vh - 160px);
  }

  .view-page[data-page="support"] > .support-queue-panel-messenger{
    min-height:590px;
  }
}

/* Em telas menores, evita forçar scroll desnecessário. */
@media(max-height:760px){
  .view-page[data-page="support"].active{
    min-height:calc(100vh - 145px);
  }

  .view-page[data-page="support"] > .support-queue-panel-messenger{
    min-height:390px;
  }
}

@media(max-width:900px){
  .view-page[data-page="support"].active{
    min-height:auto;
  }

  .view-page[data-page="support"] > .support-queue-panel-messenger{
    min-height:440px;
  }
}


/* ============================================================
   v0.27 — Segurança
   ============================================================ */

.security-v27-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  align-items:start;
}

.security-status-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.security-status-grid>div{
  padding:12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#07140c;
}

.security-status-grid span{
  display:block;
  color:var(--muted);
  font-size:10px;
}

.security-status-grid strong{
  display:block;
  margin-top:5px;
  font-size:15px;
}

.security-prod-note{
  margin-top:12px;
  padding:11px 12px;
  border:1px solid #604c1b;
  border-radius:10px;
  background:#201a08;
  color:#e8d89c;
  font-size:11px;
  line-height:1.5;
}

.security-prod-note code{
  color:#ffbd59;
}

.security-events-list{
  display:flex;
  flex-direction:column;
  gap:7px;
  max-height:520px;
  overflow:auto;
}

.security-event-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  padding:10px 11px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#07140c;
}

.security-event-row strong{
  display:block;
  font-size:11px;
}

.security-event-row span{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:9px;
}

.security-event-row.success{
  border-left:3px solid #22c55e;
}

.security-event-row.failure{
  border-left:3px solid #ff596a;
}

@media(max-width:900px){
  .security-v27-grid{
    grid-template-columns:1fr;
  }
}

/* ============================================================
   v0.28.1 — Marca/Logo UPAR
   ============================================================ */
.brand-mark-img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.sidebar-brand-mark img,
.login-brand-mark img{
  filter:drop-shadow(0 0 10px rgba(77,255,148,.12));
}

.sidebar-brand-mark{
  overflow:hidden;
}

.login-brand-mark{
  overflow:hidden;
}


/* ============================================================
   v0.30 — Central de atualizações
   ============================================================ */
.update-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:14px;
  align-items:start;
}

.update-current-card{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-bottom:12px;
}

.update-current-card>div{
  min-height:74px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#07140c;
}

.update-current-card span{
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-bottom:5px;
}

.update-current-card strong{
  font-size:14px;
}

.update-current-card code{
  display:block;
  overflow-wrap:anywhere;
  color:#9fe6b8;
  font-size:9px;
  line-height:1.45;
}

.update-notes{
  white-space:pre-wrap;
  line-height:1.55;
  margin:12px 0;
}

.update-publish-form{
  display:grid;
  gap:12px;
}

.update-publish-form textarea{
  width:100%;
  resize:vertical;
  border:1px solid var(--line);
  border-radius:10px;
  background:#07140c;
  color:var(--text);
  padding:11px;
  font:inherit;
}

@media(max-width:950px){
  .update-grid{
    grid-template-columns:1fr;
  }
}