:root{
  --bg:#171a1f;
  --panel:#22262e;
  --panel2:#1d2128;
  --text:#f3f5f8;
  --muted:#b8bfcb;
  --stroke:rgba(255,255,255,.10);
  --btn:#2a303a;
  --green:#2e7d32;
  --red:#c62828;
  --gray:#3a414e;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,#1b1f26 0%, #161a1f 60%, #14171c 100%);
  color:var(--text);
}
a{color:inherit;text-decoration:none}

.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 18px;
  background:#1c2027;
  box-shadow:none;
}
.brand{font-weight:800;letter-spacing:.2px}
.top-right{display:flex;gap:10px}
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:12px;
  background:var(--btn);
  border:1px solid var(--stroke);
}
.icon-btn i{font-size:18px}

.wrap{max-width:520px;margin:0 auto;padding:18px 18px 90px}
.clock{margin:12px 0 18px;text-align:center}
.clock-date{color:var(--muted);font-weight:700}
.clock-time{font-size:54px;font-weight:900;letter-spacing:1px;margin-top:6px}

.pin-dots{display:flex;justify-content:center;gap:10px;margin:12px 0 18px}
.pin-dots span{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.18)}
.pin-dots span.on{background:rgba(255,255,255,.92)}

.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 auto;max-width:360px}
.pad button{
  height:72px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:var(--panel);
  color:var(--text);
  font-size:26px;
  font-weight:800;
}
.pad button:active{transform:scale(.99)}
.pad button i{font-size:22px;line-height:1}

.hint{text-align:center;color:var(--muted);margin-top:12px;min-height:22px;font-weight:700}
.hidden{display:none !important}

.card{
  background:var(--panel2);
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:14px 14px;
  margin:8px 0 16px;
}
.card-title{font-size:22px;font-weight:900}

.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btn-row.single{grid-template-columns:1fr}
.btn{
  height:64px;
  border-radius:14px;
  border:1px solid var(--stroke);
  font-size:22px;
  font-weight:900;
  color:var(--text);
}
.btn:disabled{opacity:.6}
.btn-green{background:linear-gradient(180deg,rgba(46,125,50,.95),rgba(46,125,50,.75))}
.btn-red{background:linear-gradient(180deg,rgba(198,40,40,.95),rgba(198,40,40,.75))}
.btn-gray{background:var(--gray)}

.bottom{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  background:#1c2027;
  display:flex;
  justify-content:space-around;
  padding:10px 12px;
  box-shadow:none;
}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--muted);font-weight:800}
.nav-item.active{color:var(--text)}
.nav-ico{font-size:18px}
.nav-ico i{font-size:18px}
.nav-txt{font-size:12px}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.modal-box{
  width:min(520px,100%);
  background:var(--panel2);
  border:1px solid var(--stroke);
  border-radius:18px;
  padding:16px;
}
.modal-title{font-size:18px;font-weight:900}
.modal-text{margin-top:10px;color:var(--muted);font-weight:750}
.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}

.toast{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:calc(100% - 32px);
  max-width:520px;
  background:var(--panel2);
  border:1px solid var(--stroke);
  border-radius:18px;
  padding:18px 16px;
  text-align:center;
  z-index:50;
  box-shadow:none;
}
.toast .t1{font-size:26px;font-weight:950}
.toast .t2{margin-top:6px;color:var(--muted);font-weight:800}
.toast.ok{outline:2px solid rgba(46,125,50,.28)}
.toast.bad{outline:2px solid rgba(198,40,40,.28)}

.card-sub{margin-top:8px;color:var(--muted);font-weight:700;line-height:1.35}

.input{
  width:100%;
  height:56px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:var(--panel);
  color:var(--text);
  padding:0 14px;
  font-size:18px;
  outline:none;
}
.input:focus{
  border-color:rgba(255,255,255,.18);
}

.hint.bad{color:rgba(198,40,40,.95)}
.hint i{margin-right:8px}

.card, .btn-row{ width:100%; }

.menu{display:grid;gap:12px}

.btn-menu{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  width:100%;
  padding:0 16px;
  text-align:left;
}

.btn-menu i{
  width:26px;
  min-width:26px;
  text-align:center;
  font-size:20px;
  line-height:1;
}

.btn-menu span{
  flex:1;
  display:block;
  font-weight:900;
}

.stats{margin-top:10px}