:root{
  --zw-primary:#004c8c;
  --zw-accent:#00c2a8;

  --zw-bg:#0b1220;
  --zw-surface:#0f1a2e;
  --zw-border:rgba(255,255,255,.08);
  --zw-text:#eaf1ff;
  --zw-muted:rgba(234,241,255,.68);

  --zw-radius:16px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 15% 15%, rgba(0,194,168,.18), transparent 60%),
              radial-gradient(900px 500px at 80% 10%, rgba(0,76,140,.22), transparent 55%),
              var(--zw-bg);
  color: var(--zw-text);
}

.zw-shell{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.zw-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid var(--zw-border);
  background: rgba(15,26,46,.65);
  backdrop-filter: blur(10px);
}

.zw-brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.zw-logo{
  width:40px;
  height:40px;
  border-radius:12px;
  background: rgba(255,255,255,.06);
  border:1px solid var(--zw-border);
  object-fit:contain;
}

.zw-brand-text{ line-height:1.15; }
.zw-title{ font-weight:700; letter-spacing:.2px; }
.zw-sub{ font-size:12px; color:var(--zw-muted); margin-top:2px; }

.zw-actions{
  display:flex;
  gap:10px;
}

.zw-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--zw-border);
  color:var(--zw-text);
  text-decoration:none;
  background: rgba(255,255,255,.04);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.zw-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14);
}

.zw-btn-accent{
  border-color: rgba(0,194,168,.35);
  background: rgba(0,194,168,.12);
}

.zw-btn-accent:hover{
  background: rgba(0,194,168,.18);
}

.zw-main{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:34px 18px;
}

.zw-loading{
  width:min(520px, 92vw);
  padding:26px 22px;
  border:1px solid var(--zw-border);
  background: rgba(15,26,46,.55);
  border-radius: var(--zw-radius);
  text-align:center;
}

.zw-spinner{
  width:38px;
  height:38px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.14);
  border-top-color: var(--zw-accent);
  margin:0 auto 12px auto;
  animation: zwspin 1s linear infinite;
}

@keyframes zwspin{
  to{ transform: rotate(360deg); }
}

.zw-loading-text{
  color: var(--zw-muted);
  font-size:14px;
}

.zw-footer{
  padding:16px 22px;
  border-top:1px solid var(--zw-border);
  color: var(--zw-muted);
  background: rgba(15,26,46,.40);
}

.zw-footer-inner{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  font-size:13px;
}

.zw-dot{ opacity:.6; }