.back-fab{
  position:fixed; left:16px; top:16px; z-index:1000;
  width:40px; height:40px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:#ffffffcc; backdrop-filter:saturate(1.2) blur(4px);
  border:1px solid #e4e4e4; color:#333; text-decoration:none;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  transition:transform .1s, background .2s;
}
.back-fab:hover{ background:#fff; }
.back-fab:active{ transform:scale(.97); }
.back-fab:focus-visible{ outline:3px solid #66ccff; }


:root { --max: 480px; }
body{font-family: system-ui,-apple-system,Segoe UI,Roboto,"Hiragino Kaku Gothic ProN","Meiryo",sans-serif; margin: 24px;}
h1{font-size: 20px;margin:0 0 12px;text-align:center}
.wrap{max-width: var(--max); margin: 0 auto;}

fieldset{border:1px solid #ddd;border-radius:12px;padding:16px;margin:12px 0}
legend{padding:0 6px}
label{font-size:14px;color:#333;display:block;margin-bottom:8px}
input, select{width:100%;font-size:18px;padding:10px;border:1px solid #ccc;border-radius:10px;box-sizing:border-box;margin-top:4px}
input[readonly]{background:#fafafa}
.note{font-size:12px;color:#666;margin-top:4px}
.results{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.card{border:1px solid #e4e4e4;border-radius:12px;padding:12px}
.rank{font-weight:600;margin-bottom:4px}
.sumline{font-variant-numeric: tabular-nums}
.muted{color:#666}
.footer{font-size:12px;color:#666;margin-top:16px;text-align:center}

/* タブ */
.tabs{display:flex;gap:8px;justify-content:center;margin:0 0 12px}
.tabbtn{padding:8px 14px;border:1px solid #ddd;border-radius:999px;background:#fafafa;font-size:14px;cursor:pointer}
.tabbtn.active{background:#eef6ff;border-color:#bcd7ff}
.tab{display:none}
.tab.active{display:block}

/* ポイント精算の2列フォーム（名前/ポイントを横並び） */
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grid2 label { margin:0 }