:root{font-family:"Noto Sans JP",system-ui,sans-serif;color:#172033;background:#eef2f7}*{box-sizing:border-box}body{margin:0}header{height:60px;padding:0 22px;background:#14213d;color:#fff;display:flex;align-items:center;gap:16px}header span{margin-left:auto;color:#cbd5e1;font-size:.88rem}button{border:0;border-radius:10px;background:#2563eb;color:#fff;font-weight:700;padding:12px 20px;cursor:pointer}header button{padding:8px 12px;background:#334155}main{max-width:1050px;margin:auto;padding:40px 22px}.login{max-width:520px;margin:6vh auto;padding:42px;text-align:center;background:#fff;border-radius:24px;box-shadow:0 18px 60px #0f172a1f}.mark{display:inline-grid;place-items:center;width:88px;height:88px;border-radius:24px;background:#14213d;color:#fca311;font-weight:900}.login h1{font-size:2rem}.login p,.lead{color:#607089}.login a{display:block;margin-top:22px}.sub{display:block;margin:12px auto;background:#475569}#menu>h1{text-align:center;font-size:2.2rem;margin-bottom:6px}.lead{text-align:center;margin-bottom:32px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.app{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;background:#fff;border-radius:20px;padding:28px;text-decoration:none;color:inherit;box-shadow:0 10px 34px #0f172a14;transition:.2s}.app:hover{transform:translateY(-3px);box-shadow:0 16px 42px #0f172a24}.icon{display:grid;place-items:center;width:82px;height:82px;border-radius:22px;color:#fff;font-weight:900}.ds{background:#0f766e}.books{background:#14213d;color:#fca311}.app h2{margin:0 0 7px}.app p{margin:0;color:#64748b}.app b{grid-column:2;color:#2563eb}@media(max-width:700px){.grid{grid-template-columns:1fr}.login{padding:30px 20px}.app{padding:22px}}
[hidden]{display:none!important}button:disabled{opacity:.55;cursor:wait}a:focus-visible,button:focus-visible{outline:3px solid #60a5fa;outline-offset:5px}header .brand{color:#fff;font-weight:700;text-decoration:none}header .back{color:#cbd5e1;font-size:.85rem;text-decoration:none;white-space:nowrap}.app .open{grid-column:2;color:#2563eb;font-weight:700}.app h2{font-size:1.35rem}.app p{line-height:1.7}#message{min-height:2.8em;font-size:.9rem}@media(max-width:600px){header{height:auto;min-height:60px;flex-wrap:wrap;padding:12px 16px;gap:10px}header #status{font-size:.8rem}.app{grid-template-columns:60px minmax(0,1fr);gap:16px}.icon{width:60px;height:60px;border-radius:16px}.app h2{font-size:1.2rem}.app p{font-size:.9rem}}