:root{--primary-light:#3498db;--primary:#0000aa;--primary-dark:navy;--success:green;--warning:orange;--danger:red;--bg:white;--text:white;}
html,body{margin:0;padding:0;height:100%;background:var(--bg);overflow-x:hidden;font-size:1rem;overscroll-behavior-y:contain !important;touch-action:pan-y !important;}

button.btn,button.btn-large,button.btn-small{width:95%;display:flex;justify-content:center;align-items:center;margin:auto;background:linear-gradient(to right,var(--primary-light) 0%,var(--primary-dark) 50%,var(--primary) 100%);color:var(--text);}
.header{color:var(--text);position:fixed;top:0;left:0;width:100%;height:50px;line-height:50px;padding:0 10px;font-size:1.rem;text-align:center;margin-top:-1px;z-index:9999; background-image:linear-gradient(to right, var(--primary-light), var(--primary-dark));}
.footer{color:var(--text);position:fixed;left:0;bottom:0;width:100%;height:45px;line-height:45px;display:flex;justify-content:space-evenly;align-items:center;font-size:2.3rem;z-index:9998;background-image:linear-gradient(to right, var(--primary-light), var(--primary-dark));}
.form{position:relative;top:55px;}
.waitingdiv {
  position: fixed;
  background-color: transparent;
  width: 160px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 99999999;
}

.waitprocess {
  transform-style: preserve-3d;
  perspective: 1000px;
  animation: 
    coinFlip 3s linear infinite,
    pulseFade 3s ease-in-out infinite;
	border-radius:50%;
}
@keyframes coinFlip {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}
@keyframes pulseFade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.dbactive,.dbpassive,.dbprogress{height:30px;margin:5px;padding:5px;color:var(--text);font-weight:700;text-align:center;}
.dbactive{background:var(--success);}
.dbpassive{background:gray;}
.dbprogress{background:var(--warning);}
.input-field .select-wrapper,.input-field .select-wrapper input.select-dropdown{text-align:left!important;left:0!important;margin-left:0!important;padding-left:0!important;display:block!important;width:100%!important;}
.select-wrapper .dropdown-content li>span{text-align:left!important;justify-content:flex-start!important;}

.page-title{margin:5px 0 8px 0;padding:3px;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:var(--text);font-size:18px;font-weight:700;box-shadow:0 8px 20px rgba(0,0,170,.22);text-align:center;}

.container{display: block !important;
  width: 100% !important;
  overflow-y: contain !important;                
  -webkit-overflow-scrolling: touch !important;
  padding: 8px 4px 20px 4px !important;     
  box-sizing: border-box !important;    
  height:100%;
  background:#F8F8F8;
  }
.app-card{display:flex;align-items:center;gap:16px;padding:16px;margin-bottom:16px;background:var(--bg);border:1px solid lightgray;box-shadow:0 4px 18px rgba(0,0,0,.08);transition:.25s;}
.app-card:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(0,0,0,.12);}
.app-image{width:90px;height:90px;object-fit:cover;background:var(--bg);padding:4px;box-shadow:0 6px 16px rgba(0,0,0,.12);flex-shrink:0;}
.app-content{display:flex;flex-direction:column;}
.app-title{margin:0;font-size:18px;font-weight:700;color:var(--primary-dark);}
.app-desc{margin-top:4px;font-size:13px;line-height:1.5;color:#607d8b;}
.app-link{display:block;color:inherit;text-decoration:none;}