*{box-sizing:border-box}body{color:#1f2937;background:#f5f7fb;margin:0;font-family:Arial,Noto Sans TC,Microsoft JhengHei,sans-serif}a{color:inherit;text-decoration:none}button{color:#fff;cursor:pointer;background:#1f4e79;border:none;border-radius:10px;padding:10px 16px;font-size:15px;font-weight:600}button:hover{background:#173d61}.app{min-height:100vh}.navbar{background:#fff;border-bottom:1px solid #e5e7eb;justify-content:space-between;align-items:center;height:68px;padding:0 40px;display:flex}.brand{color:#1f4e79;font-size:22px;font-weight:800}.nav-links{align-items:center;gap:20px;display:flex}.nav-links a{color:#374151;font-weight:600}.nav-links a.router-link-active{color:#1f4e79}.main{max-width:1120px;margin:32px auto;padding:0 20px}.page-card{background:#fff;border-radius:18px;padding:28px;box-shadow:0 8px 24px #0f172a14}.page-header{justify-content:space-between;align-items:center;gap:16px;display:flex}h1{color:#111827;margin:0;font-size:32px}h2{color:#111827;margin:0;font-size:21px}.subtitle{color:#6b7280;margin-top:8px}.message{color:#1f4e79;background:#eef6ff;border-radius:10px;margin-top:18px;padding:12px 14px;font-weight:700}.loading{color:#6b7280}.secondary-button{color:#374151;background:#e5e7eb}.secondary-button:hover{background:#d1d5db}.book-grid{grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:20px;margin-top:28px;display:grid}.book-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:20px;transition:transform .15s,box-shadow .15s}.book-card:hover{transform:translateY(-2px);box-shadow:0 8px 18px #0f172a14}.book-top{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px;display:flex}.status-badge{border-radius:999px;padding:5px 10px;font-size:12px;font-weight:800}.status-badge.available{color:#166534;background:#dcfce7}.status-badge.borrowed{color:#991b1b;background:#fee2e2}.intro{color:#4b5563;line-height:1.6}@media (width<=720px){.navbar{flex-direction:column;align-items:flex-start;gap:12px;height:auto;padding:18px 20px}.page-header{flex-direction:column;align-items:flex-start}}.auth-card{max-width:460px;margin:60px auto}.form{flex-direction:column;gap:16px;margin-top:24px;display:flex}.form label{color:#374151;font-weight:700}input{border:1px solid #d1d5db;border-radius:10px;outline:none;width:100%;margin-top:6px;padding:12px 14px;font-size:15px}input:focus{border-color:#1f4e79}.user-name{color:#1f4e79;font-weight:700}.logout-button{background:#6b7280}.logout-button:hover{background:#4b5563}button:disabled{cursor:not-allowed;background:#9ca3af}.actions{margin-top:18px}.return-button{background:#b45309}.return-button:hover{background:#92400e}.footer{text-align:center;color:#6b7280;margin-top:40px;padding:24px 16px;font-size:14px}