/* Bioguard XAMPP visual layer: keeps original jQuery Mobile logic intact. */
:root{
  --bio-navy:#102B4E;
  --bio-blue:#163E73;
  --bio-cyan:#35C6E8;
  --bio-mint:#56E0B6;
  --bio-gold:#F3C96B;
  --bio-bg:#F4F8FC;
  --bio-card:#FFFFFF;
  --bio-text:#172033;
  --bio-muted:#5F6F86;
  --bio-line:#D8E4F0;
}

html, body, .ui-page, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper{
  min-height:100%;
  color:var(--bio-text);
  font-family:'Outfit','Noto Sans TC','Microsoft JhengHei',Arial,sans-serif !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(53,198,232,.18), transparent 32rem),
    radial-gradient(circle at 90% 12%, rgba(86,224,182,.13), transparent 28rem),
    linear-gradient(135deg,#F7FBFF 0%,#EEF5FC 45%,#E8F1FA 100%) !important;
}

.ui-header, .ui-footer, .ui-bar-inherit{
  border:0 !important;
  color:#fff !important;
  text-shadow:none !important;
  background:linear-gradient(120deg,var(--bio-navy),var(--bio-blue)) !important;
  box-shadow:0 10px 30px rgba(16,43,78,.22);
}
.ui-header h1, .ui-footer h2{
  color:#fff !important;
  text-shadow:none !important;
  font-weight:700 !important;
  letter-spacing:.02em;
}
.ui-header h1:before{
  content:"";
  display:inline-block;
  width:18px;
  height:18px;
  margin-right:.45rem;
  vertical-align:-3px;
  border-radius:5px;
  background:linear-gradient(135deg,var(--bio-cyan),var(--bio-mint));
  box-shadow:0 0 16px rgba(53,198,232,.65);
}

.ui-content{
  max-width:1180px;
  margin:0 auto;
  padding:1.2rem !important;
}

.ui-field-contain,
.ui-listview,
#db-data,
#device-data,
#user-data,
#devfw-data,
#devsn-data{
  background:rgba(255,255,255,.92);
  border:1px solid var(--bio-line) !important;
  border-radius:18px;
  box-shadow:0 14px 35px rgba(16,43,78,.10);
  backdrop-filter:blur(6px);
}
.ui-field-contain{
  padding:1rem !important;
  margin-bottom:1rem !important;
}

label, .ui-controlgroup-label{
  color:#23415F !important;
  font-weight:700 !important;
}
.ui-input-text, .ui-select .ui-btn, .ui-input-search{
  border:1px solid #C9D8E7 !important;
  border-radius:14px !important;
  background:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7) !important;
}
.ui-input-text input, .ui-input-search input, textarea, select{
  color:var(--bio-text) !important;
  text-shadow:none !important;
}

.ui-page-theme-a .ui-btn,
html .ui-bar-a .ui-btn,
html .ui-body-a .ui-btn,
html body .ui-group-theme-a .ui-btn,
html head + body .ui-btn.ui-btn-a{
  border:0 !important;
  border-radius:14px !important;
  color:#fff !important;
  text-shadow:none !important;
  font-weight:800 !important;
  letter-spacing:.01em;
  background:linear-gradient(135deg,var(--bio-blue),#1D5F9D) !important;
  box-shadow:0 10px 22px rgba(22,62,115,.22) !important;
}
.ui-page-theme-a .ui-btn:hover,
html head + body .ui-btn.ui-btn-a:hover{
  background:linear-gradient(135deg,#1A4F89,#1978B4) !important;
  transform:translateY(-1px);
}
.ui-page-theme-a .ui-btn:active,
html head + body .ui-btn.ui-btn-a:active{
  transform:translateY(0);
}
.ui-btn-icon-notext{
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.2) !important;
  box-shadow:none !important;
}

.bioguard-login-brand{
  display:flex;
  gap:1rem;
  align-items:center;
  max-width:560px;
  margin:1rem auto 1.2rem;
  padding:1.15rem 1.25rem;
  border:1px solid rgba(216,228,240,.95);
  border-radius:24px;
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(239,247,252,.92));
  box-shadow:0 18px 48px rgba(16,43,78,.14);
}
.bioguard-login-brand img{
  width:128px;
  max-height:52px;
  object-fit:contain;
  filter:drop-shadow(0 7px 12px rgba(16,43,78,.10));
}
.bioguard-login-brand strong{
  display:block;
  color:var(--bio-navy);
  font-size:1.08rem;
  line-height:1.2;
}
.bioguard-login-brand span{
  display:block;
  margin-top:.25rem;
  color:var(--bio-muted);
  font-size:.86rem;
}
#page-login .ui-field-contain{
  max-width:560px;
  margin-left:auto !important;
  margin-right:auto !important;
}
#page-login .ui-grid-a{
  max-width:560px;
  margin:0 auto;
}
#page-login:before{
  content:"";
  position:fixed;
  right:4vw;
  bottom:4vh;
  width:180px;
  height:180px;
  pointer-events:none;
  opacity:.38;
  background:radial-gradient(circle,rgba(53,198,232,.5),transparent 62%);
  filter:blur(2px);
}

#page-main .ui-content{
  max-width:720px;
  padding-top:2rem !important;
}
#page-main .ui-btn{
  margin:.75rem 0 !important;
  padding:1rem !important;
  font-size:1.02rem !important;
}

#db-data,
#device-data,
#user-data,
#devfw-data,
#devsn-data{
  padding:.7rem;
  overflow:auto !important;
}
table{
  border-collapse:separate !important;
  border-spacing:0 !important;
  width:100%;
}
table th, table td{
  border-bottom:1px solid #E3ECF5 !important;
  padding:.55rem .7rem !important;
  text-shadow:none !important;
}
table th{
  position:sticky;
  top:0;
  z-index:1;
  color:#fff !important;
  background:linear-gradient(135deg,var(--bio-navy),var(--bio-blue)) !important;
}
table tr:nth-child(even) td{
  background:#F8FBFE !important;
}

.ui-panel{
  background:#F7FBFF !important;
}
.ui-panel .ui-listview > li > a{
  color:#1B3858 !important;
  background:#fff !important;
  border-color:#E0EAF4 !important;
  text-shadow:none !important;
}
.ui-li-divider{
  color:#fff !important;
  background:var(--bio-navy) !important;
  text-shadow:none !important;
}

@media (max-width:640px){
  .ui-content{padding:.85rem !important;}
  .bioguard-login-brand{align-items:flex-start; flex-direction:column; border-radius:20px;}
  .bioguard-login-brand img{width:150px;}
}