body { font-family: 'DM Sans', sans-serif; }
.glass-card { background: rgba(255,255,255,0.75); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.65); }
.tab-pill { transition: all .25s ease; border-radius: 12px; padding: 10px 16px; }
.tab-pill.active { background: rgba(99,102,241,.12); color: #4f46e5; font-weight: 600; }
.modern-input { background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 10px 14px; font-size: 14px; transition: border-color .2s, box-shadow .2s; }
.modern-input:focus { outline: none; border-color: #818cf8; box-shadow: 0 0 0 3px rgba(129,140,248,.15); }
.modern-btn { border-radius: 12px; padding: 12px 20px; font-weight: 600; font-size: 14px; transition: transform .15s, box-shadow .15s; }
.modern-btn:active { transform: scale(.97); }
.badge-card { width: 260px; height: 400px; position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 60px -15px rgba(0,0,0,.2), 0 0 0 1px rgba(255,255,255,.3); background: #fff; }
.badge-top-bar { height: 90px; background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); position: relative; }
.badge-top-bar::after { content: ''; position: absolute; bottom: -45px; left: 0; right: 0; height: 45px; background: #fff; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.badge-photo-container { width: 90px; height: 90px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.15); overflow: hidden; position: absolute; top: 65px; left: 50%; transform: translateX(-50%); z-index: 2; background: #e2e8f0; }
.badge-photo-container img { width: 100%; height: 100%; object-fit: cover; }
.badge-content { padding-top: 72px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; height: calc(100% - 90px); justify-content: flex-start; }
.badge-divider { width: 50px; height: 3px; background: linear-gradient(90deg, #4f46e5, #7c3aed); border-radius: 2px; margin: 4px 0; }
.badge-qr-code { width: 100px !important; height: 100px !important; margin: 0 auto; }
.task-card { background: rgba(255,255,255,.82); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.7); border-radius: 16px; padding: 16px; transition: transform .15s, box-shadow .15s; }
.task-card:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
@media (max-width: 640px) { .tab-pill { padding: 9px 12px; } }

.brand-logo img { display:block; filter: drop-shadow(0 10px 20px rgba(15,23,42,.18)); }
@media (max-width: 640px) { .brand-logo img { max-width: 235px; height: auto; } }
.brand-logo img { filter: none; }
footer { box-shadow: 0 -20px 50px rgba(15, 23, 42, .08); }
.site-header{background:linear-gradient(135deg,#4f46e5,#7c3aed);padding:20px 24px}.site-header .brand-logo img{height:54px;width:auto;display:block}.brand-logo img{max-width:360px;height:auto}

.public-done-panel {
  background: radial-gradient(circle at top left, rgba(79,70,229,.16), transparent 34%), radial-gradient(circle at top right, rgba(16,185,129,.12), transparent 30%), #f8fafc;
}
.public-done-panel .glass-card {
  background: rgba(255,255,255,.9);
  border-color: rgba(226,232,240,.9);
  box-shadow: 0 18px 55px rgba(15,23,42,.08);
}
.public-done-panel .task-card {
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 12px 35px rgba(15,23,42,.06);
}
.rt-stat-card {
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(226,232,240,.9);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 14px 40px rgba(15,23,42,.06);
}
.rt-stat-card span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.rt-stat-card strong {
  display: block;
  margin-top: 8px;
  color: #0f172a;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1;
  letter-spacing: -.04em;
}
.preloader-card{
  width:min(360px,calc(100vw - 40px));
  border-radius:22px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(226,232,240,.95);
  box-shadow:0 24px 70px rgba(15,23,42,.22);
  padding:22px;
}
.preloader-bar{
  height:8px;
  overflow:hidden;
  border-radius:999px;
  background:#e2e8f0;
}
.preloader-bar span{
  display:block;
  width:42%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#4f46e5,#7c3aed);
  animation:preloaderMove 1.05s ease-in-out infinite;
}
@keyframes preloaderMove{
  0%{transform:translateX(-115%)}
  100%{transform:translateX(260%)}
}