* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen; margin:0; background:#f5f7fa; color:#122; }
a { color:#0a58ca; text-decoration:none; }

.navbar { display:flex; justify-content:space-between; align-items:center; padding:0.75rem 1rem; background:#182b4d; color:#fff; }
.navbar .brand { font-weight:600; }

.container { max-width:960px; margin:1.5rem auto; padding:0 1rem; }
.container.small { max-width:420px; }

.card { background:#fff; padding:1rem 1.25rem; border-radius:12px; box-shadow:0 4px 12px -4px rgba(0,0,0,.08), 0 2px 4px -2px rgba(0,0,0,.06); margin-bottom:1.5rem; }
.card h2 { margin-top:0; }

form { display:flex; flex-direction:column; gap:0.75rem; }
label { font-size:0.9rem; font-weight:500; display:flex; flex-direction:column; gap:0.35rem; }
input[type="email"], input[type="password"], input[type="text"], textarea, select { padding:0.6rem 0.7rem; border:1px solid #c9d2e0; border-radius:8px; font-size:0.95rem; background:#fff; }
textarea { min-height:90px; resize:vertical; }
input:focus, textarea:focus, select:focus { outline:2px solid #4b8df8; border-color:#4b8df8; }

button { cursor:pointer; background:#2563eb; color:#fff; border:none; padding:0.7rem 1.1rem; font-size:0.95rem; border-radius:8px; font-weight:600; box-shadow:0 2px 4px rgba(0,0,0,.15); transition:background .15s, transform .15s; }
button:hover { background:#1d4ed8; }
button:active { transform:translateY(1px); }

.error { color:#b42318; font-size:0.85rem; }
.info { font-size:0.85rem; color:#155e75; }

.tabs { display:flex; gap:8px; margin-bottom:1.5rem; border-bottom:2px solid #dbe2ea; padding-bottom:0; }
.tab { background:transparent; color:#64748b; border:none; padding:0.75rem 1.5rem; font-size:1rem; font-weight:600; box-shadow:none; border-bottom:3px solid transparent; margin-bottom:-2px; transition:color .15s, border-color .15s; }
.tab:hover { color:#334155; }
.tab.active { color:#2563eb; border-bottom-color:#2563eb; }

.books-grid { display:flex; flex-direction:column; gap:1rem; }
.book-card { 
  background:#fff; 
  border:2px solid #dbe2ea; 
  padding:1rem; 
  border-radius:10px; 
  display:flex; 
  flex-direction:row; 
  gap:1rem; 
  align-items:stretch;
  position:relative;
  cursor:pointer;
  transition:all .2s ease;
}
.book-card:hover {
  border-color:#b8c5d6;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.book-card.selected {
  border:3px solid #2563eb !important;
  background:#f0f7ff;
  box-shadow:0 0 0 3px rgba(37, 99, 235, 0.15), 0 4px 12px rgba(37, 99, 235, 0.2) !important;
}
.book-card .selection-checkbox {
  position:absolute;
  top:0.75rem;
  right:0.75rem;
  width:28px;
  height:28px;
  border:2px solid #cbd5e0;
  border-radius:6px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .2s;
  z-index:10;
  box-shadow:0 1px 3px rgba(0,0,0,.1);
}
.book-card.selected .selection-checkbox {
  background:#2563eb;
  border-color:#2563eb;
  box-shadow:0 2px 6px rgba(37, 99, 235, 0.4);
}
.book-card.selected .selection-checkbox::after {
  content:'✓';
  color:#fff;
  font-size:18px;
  font-weight:bold;
  line-height:1;
}
.book-card .cover { 
  width:120px; 
  min-width:120px;
  aspect-ratio:3/4; 
  object-fit:cover; 
  border-radius:6px; 
  background:#e3e8ef; 
}
.book-card .book-info {
  flex:1;
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  min-width:0;
}
.book-card h3 { margin:0; font-size:1.1rem; line-height:1.3; }
.book-card .meta { font-size:0.75rem; text-transform:uppercase; opacity:.7; letter-spacing:.06em; }
.book-card p { margin:0; font-size:0.85rem; line-height:1.4; color:#555; }
.book-card .book-buttons {
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  min-width:150px;
  justify-content:center;
}
.book-card button { font-size:0.85rem; padding:0.6rem 1rem; white-space:nowrap; }

.collection-card { background:#fff; border:1px solid #dbe2ea; padding:1rem; border-radius:10px; margin-bottom:1rem; transition:box-shadow .15s, border-color .15s; }
.collection-card:hover { box-shadow:0 2px 8px rgba(0,0,0,.08); border-color:#b8c5d6; }
.collection-card h3 { margin:0 0 0.5rem 0; font-size:1.1rem; color:#182b4d; }
.collection-card .collection-info { font-size:0.85rem; color:#64748b; margin-bottom:0.75rem; }
.collection-card .collection-actions { display:flex; gap:8px; flex-wrap:wrap; }
.collection-card button { font-size:0.85rem; padding:0.5rem 1rem; }

.modal { display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; overflow:auto; background-color:rgba(0,0,0,0.6); backdrop-filter:blur(2px); }
.modal-content { background:#fff; margin:10% auto; padding:2rem; border-radius:12px; width:90%; max-width:500px; box-shadow:0 12px 32px rgba(0,0,0,.25); position:relative; animation:modalSlideIn 0.2s ease-out; }
@keyframes modalSlideIn { from { transform:translateY(-30px); opacity:0; } to { transform:translateY(0); opacity:1; } }
.close { color:#999; position:absolute; right:1.5rem; top:1.5rem; font-size:28px; font-weight:bold; line-height:1; cursor:pointer; transition:color .15s; }
.close:hover, .close:focus { color:#333; }
.modal-content h2 { margin-top:0; margin-bottom:1.5rem; }
.modal-content label { display:block; margin-bottom:0.5rem; font-weight:500; }
.modal-content select, .modal-content input[type="text"], .modal-content textarea { width:100%; margin-bottom:1rem; }

/* Toast Notifications */
#toastContainer { 
  position:fixed; 
  top:20px; 
  right:20px; 
  z-index:10000; 
  display:flex; 
  flex-direction:column; 
  gap:10px; 
  max-width:400px;
}

.toast { 
  background:#fff; 
  padding:1rem 1.25rem; 
  border-radius:8px; 
  box-shadow:0 4px 12px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.1); 
  display:flex; 
  align-items:center; 
  gap:12px;
  border-left:4px solid #2563eb;
  animation:toastSlideIn 0.3s ease-out;
  min-width:300px;
}

.toast.success { border-left-color:#10b981; background:#f0fdf4; }
.toast.error { border-left-color:#ef4444; background:#fef2f2; }
.toast.warning { border-left-color:#f59e0b; background:#fffbeb; }
.toast.info { border-left-color:#3b82f6; background:#eff6ff; }

.toast-icon {
  font-size:20px;
  flex-shrink:0;
}

.toast.success .toast-icon { color:#10b981; }
.toast.error .toast-icon { color:#ef4444; }
.toast.warning .toast-icon { color:#f59e0b; }
.toast.info .toast-icon { color:#3b82f6; }

.toast-content {
  flex:1;
  min-width:0;
}

.toast-title {
  font-weight:600;
  font-size:0.95rem;
  margin-bottom:2px;
  color:#1f2937;
}

.toast-message {
  font-size:0.85rem;
  color:#6b7280;
  line-height:1.4;
}

.toast-close {
  cursor:pointer;
  color:#9ca3af;
  font-size:20px;
  line-height:1;
  padding:0 4px;
  transition:color 0.15s;
  flex-shrink:0;
}

.toast-close:hover {
  color:#4b5563;
}

@keyframes toastSlideIn {
  from { 
    transform:translateX(400px); 
    opacity:0; 
  }
  to { 
    transform:translateX(0); 
    opacity:1; 
  }
}

@keyframes toastSlideOut {
  from { 
    transform:translateX(0); 
    opacity:1; 
  }
  to { 
    transform:translateX(400px); 
    opacity:0; 
  }
}

.toast.removing {
  animation:toastSlideOut 0.3s ease-in forwards;
}

@media (max-width:600px){
  .books-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
}