:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}body{background:radial-gradient(circle at top left,#dbeafe 0%,transparent 45%),radial-gradient(circle at top right,#fce7f3 0%,transparent 45%),radial-gradient(circle at bottom,#dcfce7 0%,transparent 45%),#f8fafc;color:#0f172a}.page{max-width:1300px;margin:auto;padding:22px}.top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;background:#fff;border-radius:18px;padding:18px;border:1px solid #e8eef7;box-shadow:0 10px 25px #0f172a0f;margin-bottom:16px}.brand{display:flex;align-items:center;gap:12px}.logoBox{height:48px;width:48px;border-radius:14px;background:linear-gradient(135deg,#2563eb,#7c3aed);display:grid;place-items:center;box-shadow:0 10px 18px #2563eb40}.logoBox span{font-size:22px;color:#fff;font-weight:900}.top h1{font-size:22px;font-weight:900;letter-spacing:.2px}.top p{font-size:13px;color:#64748b;margin-top:4px}.stats{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}.statCard{min-width:150px;background:#f8fafc;border:1px solid #e8eef7;padding:12px 14px;border-radius:16px}.statCard .label{font-size:12px;color:#64748b;margin-bottom:6px}.statCard .value{font-size:18px;font-weight:900;color:#0f172a}.layout{display:grid;grid-template-columns:420px 1fr;gap:16px;align-items:start}.form-card,.table-card{background:#fff;border-radius:18px;border:1px solid #e8eef7;box-shadow:0 10px 25px #0f172a0f;overflow:hidden;height:650px;display:flex;flex-direction:column}.cardHead{padding:14px 16px;border-bottom:1px solid #edf2fb;background:linear-gradient(180deg,#fff,#fbfdff);display:flex;justify-content:space-between;align-items:center}.cardHead h2{font-size:16px;font-weight:900}.cardHead span{font-size:12px;color:#64748b}.formBody{padding:14px 6px 16px 16px;flex:1;overflow-y:auto}.formBody::-webkit-scrollbar,.table-scroll::-webkit-scrollbar{width:8px}.formBody::-webkit-scrollbar-thumb,.table-scroll::-webkit-scrollbar-thumb{background:#64748b66;border-radius:8px}.book-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field{display:flex;flex-direction:column;gap:6px}.field label{font-size:12px;font-weight:700;color:#475569}input,textarea{width:100%;border:1px solid #e2e8f0;border-radius:14px;padding:12px;font-size:14px;background:#fff;outline:none;transition:.2s}input:focus,textarea:focus{border-color:#2563eb;box-shadow:0 0 0 4px #2563eb1f}textarea{resize:none}.full{grid-column:1 / -1}.err{color:#dc2626;font-size:12px;font-weight:700}.btns{display:flex;gap:10px;margin-top:4px}.btn{border:none;cursor:pointer;padding:11px 14px;border-radius:14px;font-weight:800;font-size:14px;transition:.2s}.btn.primary{color:#fff;background:linear-gradient(135deg,#2563eb,#7c3aed);box-shadow:0 10px 22px #2563eb38}.btn.primary:hover{transform:translateY(-1px)}.btn.ghost{background:#f1f5f9;color:#0f172a}.btn.danger{color:#fff;background:linear-gradient(135deg,#ef4444,#f97316)}.btn.small{padding:8px 12px;font-size:13px;border-radius:12px}.tableToolbar{padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #edf2fb;background:#fff}.searchBox{flex:1;display:flex;gap:10px}.searchBox input{flex:1}.metaInfo{font-size:12px;font-weight:700;color:#64748b}.table-scroll{flex:1;max-height:460px;overflow-y:auto}.book-table{width:100%;border-collapse:collapse;table-layout:fixed}.book-table th,.book-table td{padding:12px;border-bottom:1px solid #edf2fb;font-size:14px;text-align:left;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.book-table thead th{position:sticky;top:0;z-index:2;background:#fff;color:#475569;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.6px}.book-table tbody tr:hover{background:#f8fbff}.book-table th:nth-child(1),.book-table td:nth-child(1){width:24%}.book-table th:nth-child(2),.book-table td:nth-child(2){width:18%}.book-table th:nth-child(3),.book-table td:nth-child(3){width:18%}.book-table th:nth-child(4),.book-table td:nth-child(4){width:10%}.book-table th:nth-child(5),.book-table td:nth-child(5){width:8%}.book-table th:nth-child(6),.book-table td:nth-child(6){width:22%;text-align:center}.clickable{font-weight:900;color:#2563eb;cursor:pointer}.clickable:hover{text-decoration:underline}.actions{display:flex;gap:10px;justify-content:center;flex-wrap:nowrap}.actions .btn{min-width:72px}.details-page{max-width:900px;margin:auto;padding:22px}.details-card{background:#fff;border-radius:18px;border:1px solid #e8eef7;box-shadow:0 10px 25px #0f172a0f;padding:18px;margin-top:14px}.details-card h1{font-size:22px;font-weight:900;margin-bottom:10px}.details-card p{font-size:14px;color:#334155;margin:6px 0}.details-card h3{margin-top:14px;font-size:15px;font-weight:900}.book-table td:nth-child(6){overflow:visible!important}.actions{display:flex;justify-content:center;gap:10px;flex-wrap:nowrap}.actionBtn{border:1px solid transparent;padding:8px 12px;border-radius:12px;font-size:13px;font-weight:800;cursor:pointer;transition:.2s;min-width:74px}.actionBtn.edit{background:#f1f5f9;border-color:#e2e8f0;color:#0f172a}.actionBtn.edit:hover{background:#e2e8f0}.actionBtn.delete{background:#fee2e2;border-color:#fecaca;color:#b91c1c}.actionBtn.delete:hover{background:#fecaca}.book-table th,.book-table td{padding:14px;font-size:14px}.book-table tbody tr{height:60px}.form-card,.table-card{border-radius:22px}.cardHead{padding:18px}.tableToolbar{padding:14px 18px}@media(max-width:980px){.layout{grid-template-columns:1fr}.top{flex-direction:column}.stats{justify-content:flex-start}.book-form{grid-template-columns:1fr}}