@import url("/styles.css");
.container{ padding-bottom: 90px; }
.panel-head{ margin: 16px 2px 10px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.panel-head h1{ margin:0; font-size: 34px; }
.smallmuted{ color: rgba(255,255,255,.50); font-size: 14px; }
.stats{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin: 14px 0; }
.scard{
  padding:14px; border-radius: 20px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(10,20,24,.34);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 36px rgba(0,0,0,.45);
  min-width:0;
}
.scard b{ display:block; font-size:12px; color: rgba(255,255,255,.48); margin-bottom: 6px; }
.scard span{ display:block; font-size: 18px; font-weight: 800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.grid{ display:grid; grid-template-columns: 1fr; gap:12px; margin: 10px 0 14px; }
.block{
  padding:16px; border-radius: 24px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(10,20,24,.34);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 36px rgba(0,0,0,.45);
  min-width:0;
}
.block h3{ margin:0 0 12px; font-size: 20px; display:flex; align-items:center; gap:10px; }
.block h3 .ic{
  width:30px;height:30px;border-radius: 14px;
  display:grid; place-items:center;
  border:1px solid rgba(54,240,228,.18);
  color: var(--accent);
  background: rgba(6,18,22,.28);
  box-shadow: 0 0 18px rgba(54,240,228,.12);
  flex:0 0 auto;
}
.hr{ height:1px; background: rgba(255,255,255,.07); margin: 12px 0; }
.row{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; }
.row .label{ color: rgba(255,255,255,.56); font-size: 14px; }
.row .value{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 52%; text-align:right; }

.input{
  width:100%; padding:14px 16px; border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(10,20,24,.28);
  color: rgba(255,255,255,.92);
  outline:none;
}
.input::placeholder{ color: rgba(255,255,255,.35); }

.inline{ display:flex; gap:12px; margin-top: 10px; }
.inline .btn{ flex:1; }

.qrbox{
  margin-top: 12px;
  padding: 14px;
  border-radius: 20px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(10,20,24,.26);
}
.qrbox .qr{
  width: 180px; height: 180px;
  border-radius: 18px;
  border:1px solid rgba(54,240,228,.18);
  background: rgba(6,18,22,.28);
  display:grid; place-items:center;
  margin: 10px auto 6px;
  overflow:hidden;
}
.qrbox canvas{ width: 180px; height: 180px; }
.qrbox .qhint{
  text-align:center;
  color: rgba(255,255,255,.55);
  font-size: 13px;
  line-height:1.35;
  overflow-wrap:anywhere;
}

.bottomnav{
  position:fixed; left:0; right:0; bottom:0;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, rgba(2,4,6,.82) 24%, rgba(2,4,6,.95));
  backdrop-filter: blur(14px);
  z-index:60;
}
.navbar{
  width:min(980px, 100%); margin: 0 auto;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(10,20,24,.55);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  display:flex; justify-content:space-between;
  padding: 10px 8px; gap:6px;
}
.navitem{
  flex:1; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding: 10px 6px;
  border-radius: 18px;
  color: rgba(255,255,255,.62);
  text-decoration:none;
  border:1px solid transparent;
}

.navitem img{width:18px;height:18px;filter: drop-shadow(0 0 10px rgba(54,240,228,.55));}
.navitem.active img{filter: drop-shadow(0 0 14px rgba(54,240,228,.85));}
.navitem span{ font-size: 11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.navitem.active{
  color: rgba(255,255,255,.92);
  border-color: rgba(54,240,228,.22);
  background: rgba(54,240,228,.08);
  box-shadow: 0 0 22px rgba(54,240,228,.10);
}
.hidden{ display:none !important; }

/* Auth tabs */
.auth-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.auth-tabs{ display:flex; gap:8px; }
.auth-tabs .tab{
  padding:10px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(10,20,24,.22);
  color: rgba(255,255,255,.70);
  font-weight:700;
}
.auth-tabs .tab.active{
  border-color: rgba(54,240,228,.22);
  background: rgba(54,240,228,.08);
  color: rgba(255,255,255,.92);
  box-shadow: 0 0 22px rgba(54,240,228,.10);
}

/* Input with eye */
.field{ position:relative; }
.field .eye{
  position:absolute; right:10px; top:50%; transform: translateY(-50%);
  width:40px; height:40px; border-radius: 14px;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(10,20,24,.22);
}
.field .eye img{ width:18px; height:18px; filter: drop-shadow(0 0 10px rgba(54,240,228,.55)); opacity:.92 }

/* Modal */
.modal{
  position:fixed; inset:0; z-index:120;
  padding: 14px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(12px);
  display:grid; place-items:center;
}
.modal-card{
  width:min(520px, 100%);
  border-radius: 24px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(10,20,24,.72);
  box-shadow: 0 22px 80px rgba(0,0,0,.65);
  padding: 14px;
}
.modal-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom: 10px; }

/* Devices list */
.devlist{ display:grid; gap:10px; }
.ditem{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(10,20,24,.26);
  padding: 12px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.dleft{ display:flex; align-items:center; gap:10px; min-width:0; }
.dicon{
  width:34px; height:34px; border-radius: 16px;
  border:1px solid rgba(54,240,228,.18);
  background: rgba(6,18,22,.28);
  display:grid; place-items:center;
  flex:0 0 auto;
}
.dicon img{ width:18px; height:18px; filter: drop-shadow(0 0 10px rgba(54,240,228,.55)); opacity:.92 }
.dname{ font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dmeta{ color: rgba(255,255,255,.52); font-size: 12px; white-space:nowrap; }
.dright{ display:flex; gap:10px; align-items:center; }
.dright .btn{ flex:0 0 auto; padding-left: 14px; padding-right: 14px; }