:root{
  --bg:#f5f6f8;
  --card:#ffffff;
  --text:#111111;
  --muted:#6b7280;
  --brand:#111111;
  --accent:#10b981;
  --danger:#ef4444;
  --radius:18px;
  --shadow:0 10px 20px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,"Noto Sans JP",sans-serif;
}

.header{
  position:sticky; top:0; z-index:10;
  background:linear-gradient(180deg,#111 0%, #222 100%);
  color:#fff;
  padding:18px 16px;
  display:flex; align-items:center; gap:12px; justify-content:space-between;
}
.header h1{font-size:18px; margin:0; letter-spacing:.3px}
.header .right{display:flex; gap:8px; align-items:center}
.header .chip{font-size:12px; opacity:.9; padding:6px 10px; background:#333; border-radius:999px}

.container{max-width:460px; margin:28px auto; padding:0 16px}
.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
}

.logo{
  display:flex; align-items:center; gap:12px; margin:12px 0 20px 0;
}
.logo img{width:32px; height:32px; border-radius:8px}
.logo .title{font-weight:700; letter-spacing:.4px}

.input{width:100%; display:block; padding:12px 14px; margin:8px 0 14px 0;
  background:#f9fafb; border:1px solid #e5e7eb; border-radius:12px; font-size:15px}
.btn{
  width:100%; padding:12px 14px; border:0; border-radius:12px;
  background:var(--brand); color:#fff; font-weight:600; cursor:pointer; font-size:15px;
}
.btn:disabled{opacity:.6; cursor:default}
.btn-outline{background:#fff; color:#111; border:1px solid #e5e7eb}
.btn-google{display:flex; align-items:center; justify-content:center; gap:10px}
.btn-danger{background:var(--danger)}

.row{display:flex; gap:10px}
.help{color:var(--muted); font-size:12px}
.hr{height:1px; background:#eee; margin:16px 0}
.center{text-align:center}

.kpi{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px;
}
.kpi .item{background:#f9fafb; border:1px solid #eee; border-radius:12px; padding:14px}
.kpi .item .label{font-size:12px; color:var(--muted)}
.kpi .item .value{font-size:20px; font-weight:700; margin-top:6px}

.list{margin-top:14px}
.list .cell{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px; border:1px solid #eee; background:#fff; border-radius:12px; margin-bottom:8px;
}
.badge{font-size:12px; padding:4px 8px; border-radius:999px; background:#eef; color:#223}
footer{margin:30px 0; color:var(--muted); font-size:12px; text-align:center}