:root{ --fg:#1d2733; --muted:#6b7785; --line:#dde3ea; --bg:#f5f7fa; --pri:#2563eb; --ok:#0a8754; --ng:#c0392b; --warn:#b7791f; }
*{ box-sizing:border-box; }
body{ font-family:-apple-system,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif; color:var(--fg); margin:0; background:var(--bg); line-height:1.6; }
a{ color:var(--pri); }
h1{ font-size:1.5rem; } h2{ font-size:1.15rem; margin-top:1.6rem; } h3{ font-size:1rem; }

.topbar{ display:flex; align-items:center; gap:1rem; background:#fff; border-bottom:1px solid var(--line); padding:.6rem 1rem; flex-wrap:wrap; }
.topbar .brand{ font-weight:700; text-decoration:none; color:var(--fg); }
.topbar nav{ display:flex; gap:.9rem; flex-wrap:wrap; }
.topbar nav a{ text-decoration:none; }
.topbar .logout{ margin-left:auto; }
.container{ max-width:1000px; margin:0 auto; padding:1rem 1.2rem 4rem; }

.center{ display:flex; min-height:100vh; align-items:center; justify-content:center; background:var(--bg); }
.card{ background:#fff; padding:2rem; border-radius:12px; box-shadow:0 4px 20px rgba(0,0,0,.06); width:min(92vw,380px); }

label{ display:block; margin:.6rem 0; font-size:.92rem; }
input[type=text],input[type=email],input[type=password],input[type=number],select{
  width:100%; padding:.5rem; border:1px solid var(--line); border-radius:7px; font-size:1rem; }
.inline input,.inline select{ width:auto; }
button{ background:var(--pri); color:#fff; border:0; padding:.5rem .9rem; border-radius:7px; font-size:.95rem; cursor:pointer; }
button:hover{ filter:brightness(1.05); }
button.danger,.danger button{ background:var(--ng); }
button.link{ background:none; color:var(--ng); padding:.2rem; }
.btn{ display:inline-block; background:var(--pri); color:#fff; padding:.5rem .9rem; border-radius:7px; text-decoration:none; }
.btn-big{ font-size:1.1rem; padding:.8rem 1.4rem; width:100%; margin:.6rem 0; }

table{ border-collapse:collapse; width:100%; background:#fff; margin:.6rem 0; }
th,td{ border:1px solid var(--line); padding:.45rem .6rem; text-align:left; font-size:.92rem; vertical-align:top; }
th{ background:#eef2f7; }
.muted{ color:var(--muted); font-size:.88rem; } .ok{ color:var(--ok); } .ng{ color:var(--ng); font-weight:700; } .warn-text{ color:var(--warn); }

.flash{ padding:.6rem .9rem; border-radius:7px; margin:.5rem 0; }
.flash-success{ background:#e6f7ee; color:var(--ok); } .flash-error{ background:#fdecea; color:var(--ng); } .flash-info{ background:#eef2f7; }

.cards{ display:flex; gap:1rem; flex-wrap:wrap; }
.stat{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:1rem 1.4rem; text-align:center; min-width:120px; }
.stat span{ display:block; font-size:1.8rem; font-weight:700; }
.warn{ background:#fff8ec; border:1px solid #f0d8a8; border-radius:10px; padding:.6rem 1rem; }

.inline{ display:inline; margin:0; }
.actions form{ display:inline-block; margin:0 .1rem .2rem 0; }
.actions select{ font-size:.8rem; }
.filter{ margin:.6rem 0; }
.replace-box{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:.6rem 1rem; margin:.6rem 0; }
.replace-box label{ display:inline-block; margin:.3rem .6rem .3rem 0; }

.token-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; }
.token-card{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:1rem; text-align:center; }
.token-card .qr{ display:flex; justify-content:center; margin:.5rem 0; }
.token-card input{ font-size:.7rem; }
.token-actions{ display:flex; gap:.4rem; justify-content:center; margin-top:.5rem; }

.label-sheet{ display:flex; flex-wrap:wrap; gap:8mm; }
.label{ width:40mm; text-align:center; border:1px dashed #bbb; padding:3mm; }
.label .qr{ display:flex; justify-content:center; }
.label-id{ font-family:monospace; font-size:11pt; margin-top:2mm; }

/* 校舎入力 */
body.school .container{ max-width:680px; }
.progress-banner{ position:sticky; top:0; background:var(--pri); color:#fff; padding:.7rem 1rem; border-radius:8px; font-size:1.05rem; z-index:5; }
.progress-banner strong{ font-size:1.3rem; }
.scan video{ width:100%; max-width:480px; border-radius:10px; background:#000; }
.scan-msg{ font-weight:700; } .scan-msg.ok{ color:var(--ok); } .scan-msg.warn{ color:var(--warn); } .scan-msg.ng{ color:var(--ng); }
.device-list tr.confirmed{ background:#e6f7ee; }
.check-cell{ text-align:center; font-weight:700; color:var(--ok); }
.notice{ background:#fff; border:1px solid var(--line); border-radius:8px; padding:1rem; }
.notice.success{ border-color:#bfe6cf; background:#e6f7ee; }

@media print{
  .no-print,.topbar{ display:none; }
  .label{ border:1px solid #999; }
}