*{box-sizing:border-box}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;
  background:#f3f5fb;
  color:#090909;
}
.app{
  max-width:720px;
  margin:auto;
  padding:10px 10px 80px;
}
.top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:linear-gradient(135deg,#063cff,#08a8ff);
  color:white;
  border-radius:18px;
  padding:14px;
  box-shadow:0 10px 24px #0002;
}
h1{margin:0;font-size:20px;letter-spacing:.3px}
h2{margin:0;font-size:19px}
h3{margin:14px 0 8px;font-size:16px}
p{margin:5px 0;color:#eef}
button{
  border:0;
  border-radius:10px;
  padding:10px 12px;
  font-weight:800;
  background:#e9edf7;
  color:#111;
}
button:active{transform:scale(.98)}
.pill{background:#fff;color:#064bff;border-radius:999px;padding:8px 12px}
.main-nav{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:7px;
  margin:10px 0;
}
.main-nav button{padding:9px 6px;font-size:13px}
.main-nav button.active,.mode-tabs button.active{background:#0500b8;color:white}
.panel{
  background:white;
  border-radius:18px;
  padding:13px;
  box-shadow:0 8px 22px #00000010;
  margin-top:10px;
}
.hidden{display:none!important}
.mode-tabs{
  display:flex;
  gap:8px;
  margin-bottom:10px;
}
.mode-tabs button{
  border-radius:7px;
  padding:10px 14px;
  font-size:15px;
}
.notice{
  background:#fff8e8;
  border:1px solid #ffe1a8;
  color:#4a3100;
  border-radius:13px;
  padding:9px 10px;
  font-size:13px;
  line-height:1.35;
  margin-bottom:10px;
}
select,input,textarea{
  width:100%;
  padding:12px 13px;
  border:1px solid #ccd4e2;
  border-radius:10px;
  font-size:16px;
  background:#fff;
  outline:none;
  margin-bottom:9px;
}
textarea{resize:vertical;min-height:110px}
.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.input-wrap{position:relative}
.input-wrap input{padding-right:42px}
.paste{
  position:absolute;
  right:5px;
  top:5px;
  padding:7px 8px;
  background:transparent;
  color:#667085;
  font-size:17px;
}
.agree{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin:9px 0 10px;
  font-size:14px;
  line-height:1.25;
}
.agree input{width:20px;height:20px;margin:0}
.primary{
  width:100%;
  margin-top:3px;
  background:#f7aa3e;
  color:white;
  font-size:18px;
  border-radius:10px;
  padding:13px;
}
.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.card{
  border:1px solid #e1e6f0;
  border-radius:13px;
  padding:11px;
  margin:9px 0;
  background:#fbfcff;
  line-height:1.35;
}
.card.compact{font-size:13px;padding:9px}
.summary{
  background:#eaf8ef;
  border:1px solid #bfe8cc;
  color:#116b2d;
  border-radius:12px;
  padding:10px;
  margin:10px 0;
  font-weight:800;
}
.bad{color:#d93025}
.pending{color:#a86500}
.muted{color:#a6adc0;font-size:13px}

@media(max-width:480px){
  .app{padding:8px 8px 70px}
  .top{padding:12px;border-radius:16px}
  h1{font-size:18px}
  .panel{padding:11px;border-radius:16px}
  .mode-tabs button{font-size:14px;padding:9px 10px}
  select,input,textarea{font-size:15px;padding:11px;margin-bottom:8px}
  .grid-2{gap:7px}
  .notice{font-size:12.5px;padding:8px}
}

.main-nav{grid-template-columns:repeat(4,1fr)}
.admin-card{
  border:1px solid #e1e6f0;
  border-radius:14px;
  padding:12px;
  margin:10px 0;
  background:#fbfcff;
}
.danger{
  background:#e53935;
  color:white;
}

.admin-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  margin:10px 0;
}
.admin-grid div{
  background:#f3f6ff;
  border:1px solid #e0e7ff;
  border-radius:12px;
  padding:10px;
}
.admin-grid b{
  display:block;
  font-size:18px;
  color:#0500b8;
}
.admin-grid span{
  font-size:12px;
  color:#596070;
}
.manual-actions{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:6px;
  margin-top:8px;
}
.manual-actions button{
  padding:8px 6px;
  font-size:12px;
}