:root { color-scheme: light; font-family: "Noto Sans JP", system-ui, sans-serif; color:#243247; background:#f3f7fb; }
* { box-sizing:border-box; }
body { margin:0; }
.hidden { display:none !important; }
header { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
h1 { margin:.2rem 0; font-size:clamp(1.45rem,4vw,2.25rem); color:#22577a; }
button,input,textarea { font:inherit; }
.student-page { min-height:100svh; padding:clamp(.55rem,2vw,1rem); display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:.6rem; max-width:1300px; margin:auto; }
.slide-shell { min-height:0; border-radius:18px; overflow:hidden; background:#dbe7f0; box-shadow:0 5px 24px #183b5630; }
.slide-shell iframe { display:block; width:100%; height:100%; min-height:52svh; border:0; background:white; }
.confirm-area { text-align:center; }
.confirm-area p { margin:.25rem 0 .55rem; }
.confirm-button { width:min(680px,100%); min-height:68px; border:0; border-radius:18px; background:#16866a; color:white; font-weight:800; font-size:clamp(1.25rem,3vw,2rem); box-shadow:0 5px 0 #0d5c48; cursor:pointer; }
.confirm-button:disabled { background:#94a4af; box-shadow:none; cursor:default; }
.confirm-button.done { background:#2878b5; box-shadow:none; }
.teacher-page { max-width:980px; margin:auto; padding:1rem; }
.teacher-header { align-items:center; }
.teacher-actions { display:flex; gap:.55rem; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.teacher-controls { display:flex; gap:.7rem; align-items:center; margin:1rem 0; }
input,textarea { border:1px solid #b7c6d1; border-radius:10px; padding:.65rem; background:white; }
.summary { background:white; border-radius:16px; padding:1rem 1.25rem; display:flex; gap:1rem; align-items:baseline; }
.summary strong { font-size:2rem; color:#16866a; }
.status-list { display:grid; gap:.55rem; margin-top:1rem; }
.status-row { display:grid; grid-template-columns:3rem 1fr 8rem 7rem; align-items:center; padding:.8rem 1rem; background:white; border-radius:12px; }
.status { font-weight:800; }
.confirmed { color:#16866a; }.opened { color:#c47700; }.unseen { color:#73808a; }
.sub-button,.primary-button { border:0; border-radius:10px; padding:.7rem 1rem; cursor:pointer; }
.sub-button { background:#e2edf4; color:#22577a; }.primary-button { background:#22577a; color:white; font-weight:700; }
.logout-button { border:1px solid #c7d1d8; border-radius:10px; padding:.65rem .85rem; background:white; color:#61717d; cursor:pointer; font-size:.88rem; }
.settings-panel { margin-top:1rem; padding:1rem; background:white; border-radius:16px; }
.settings-panel textarea { width:100%; }
.link-list { display:grid; gap:.4rem; margin-top:.7rem; font-size:.9rem; }
.link-row { display:grid; grid-template-columns:3rem 1fr 3fr; gap:.5rem; padding:.5rem; background:#f3f7fb; border-radius:8px; }
.qr-panel { margin-top:1rem; }
.qr-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.qr-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.qr-card { min-height:310px; border:2px dashed #9aabb6; border-radius:12px; padding:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; break-inside:avoid; background:white; }
.qr-card h3 { margin:0 0 8px; font-size:1.2rem; }
.qr-card canvas { width:180px !important; height:180px !important; }
.qr-card p { margin:8px 0 0; font-weight:700; color:#22577a; }
@media (max-width:650px) { .status-row { grid-template-columns:2.5rem 1fr; gap:.25rem; }.status-row time,.status-row .status { grid-column:2; }.link-row { grid-template-columns:2.5rem 1fr; }.link-row code { grid-column:1/-1; overflow-wrap:anywhere; } }
@media print {
  @page { size:A4 portrait; margin:10mm; }
  body * { visibility:hidden !important; }
  #qrPanel, #qrPanel * { visibility:visible !important; }
  #qrPanel { display:block !important; position:absolute; inset:0; margin:0; padding:0; }
  .qr-toolbar,.qr-help { display:none !important; }
  .qr-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:6mm; }
  .qr-card { min-height:80mm; border:1px dashed #777; padding:4mm; }
  .qr-card canvas { width:45mm !important; height:45mm !important; }
}