.library-page-title { margin-bottom: 16px; }
.library-tabs { display: flex; gap: 8px; padding: 7px; margin-bottom: 16px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.library-tabs button { flex: 0 0 auto; min-height: 42px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; transition: .2s ease; }
.library-tabs button:hover { color: var(--primary); background: #faf9ff; }
.library-tabs button.active { color: #fff; background: linear-gradient(135deg, var(--primary), #8371ec); box-shadow: 0 8px 18px rgba(108, 77, 232, .2); }
.library-hero { display: grid; grid-template-columns: 1.25fr .75fr; gap: 16px; margin-bottom: 16px; }
.library-welcome { min-height: 190px; padding: 26px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, #172554, #4f46e5 58%, #7c3aed); position: relative; overflow: hidden; box-shadow: 0 18px 35px rgba(67, 56, 202, .18); }
.library-welcome::after { content: "▤"; position: absolute; inset-inline-end: 28px; bottom: -38px; font-size: 160px; color: rgba(255,255,255,.09); transform: rotate(-8deg); }
.library-welcome span { font-size: 12px; color: #c7d2fe; font-weight: 800; }
.library-welcome h2 { margin: 10px 0 6px; font-size: 27px; }
.library-welcome p { max-width: 620px; margin: 0; color: #e0e7ff; font-size: 13px; line-height: 1.9; }
.library-welcome strong { display: inline-flex; margin-top: 18px; padding: 8px 12px; border-radius: 9px; background: rgba(255,255,255,.13); font-size: 12px; }
.library-alerts { padding: 20px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.library-alerts h3 { margin: 0 0 13px; font-size: 16px; }
.library-alert-list { display: grid; gap: 9px; }
.library-alert { display: flex; align-items: center; gap: 10px; padding: 11px; border-radius: 11px; background: #fafafd; }
.library-alert i { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; background: var(--orange-soft); color: var(--orange); font-style: normal; }
.library-alert strong { display: block; font-size: 12px; }
.library-alert span { color: var(--muted); font-size: 10px; }
.library-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 16px; }
.library-kpi { min-height: 112px; padding: 17px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: var(--shadow); }
.library-kpi span { color: var(--muted); font-size: 11px; }
.library-kpi strong { display: block; margin: 9px 0 3px; font-size: 24px; color: var(--text); }
.library-kpi small { color: var(--muted); font-size: 9px; }
.library-kpi.purple { border-top: 4px solid var(--primary); }.library-kpi.blue { border-top: 4px solid var(--blue); }.library-kpi.green { border-top: 4px solid var(--green); }.library-kpi.orange { border-top: 4px solid var(--orange); }.library-kpi.red { border-top: 4px solid var(--red); }
.library-dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.library-card { padding: 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.library-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.library-card-head h3 { margin: 0; font-size: 16px; }
.library-card-head span { color: var(--muted); font-size: 10px; }
.library-ranking { display: grid; gap: 10px; }
.library-rank-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.library-rank-row > b { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; background: var(--primary-soft); color: var(--primary); }
.library-rank-main strong { display: block; font-size: 12px; }
.library-rank-main span { color: var(--muted); font-size: 9px; }
.library-rank-value { min-width: 55px; text-align: end; font-size: 12px; color: var(--primary); font-weight: 900; }
.library-bar { height: 5px; margin-top: 6px; overflow: hidden; border-radius: 5px; background: #eceef5; }
.library-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), #9b8cf1); }
.library-toolbar { margin-bottom: 0; border-radius: 12px 12px 0 0; flex-wrap: wrap; }
.library-toolbar .library-filter { min-width: 155px; }
.library-table-wrap table { min-width: 1180px; }
.library-table-wrap .compact-table { min-width: 980px; }
.library-book-title strong { display: block; font-size: 13px; }.library-book-title span { color: var(--muted); font-size: 10px; }
.library-actions { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.library-action-btn { border: 0; border-radius: 8px; padding: 7px 9px; color: var(--primary); background: var(--primary-soft); font-family: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
.library-action-btn.return { color: var(--green); background: var(--green-soft); }.library-action-btn.danger { color: var(--red); background: var(--red-soft); }
.library-status { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.library-status.available, .library-status.returned { color: var(--green); background: var(--green-soft); }.library-status.borrowed { color: var(--orange); background: var(--orange-soft); }.library-status.overdue { color: var(--red); background: var(--red-soft); }
.library-empty { padding: 35px 15px; text-align: center; color: var(--muted); }
.library-empty b { display: block; margin-bottom: 5px; color: var(--text); }
.library-analytics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.library-month-report { margin-top: 16px; }
.library-month-selector { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.library-month-selector input { min-height: 42px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; font-family: inherit; }
.library-detail-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0 18px; }
.library-detail-list div { padding: 11px; border-radius: 10px; background: #fafafd; }
.library-detail-list span { display: block; color: var(--muted); font-size: 9px; }.library-detail-list strong { display: block; margin-top: 4px; font-size: 12px; }
.library-copy-editor { grid-column: 1 / -1; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: #fafafd; }
.library-copy-editor h3 { margin: 0 0 10px; font-size: 13px; }
.library-form-note { grid-column: 1 / -1; margin: 0 0 12px; padding: 10px 12px; border-radius: 9px; color: #5b4bc4; background: var(--primary-soft); font-size: 10px; line-height: 1.8; }
.library-location-guide { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 10px; align-items: center; padding: 14px; margin-bottom: 16px; border: 1px solid #ddd8ff; border-radius: 14px; background: linear-gradient(135deg, #faf9ff, #f4f8ff); }
.library-location-guide > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.library-location-guide > div > b { width: 31px; height: 31px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--primary); }
.library-location-guide strong, .library-location-guide span { display: block; }.library-location-guide span { color: var(--muted); font-size: 10px; }.library-location-guide strong { margin-bottom: 2px; color: var(--text); font-size: 12px; }
.library-location-guide > i { color: var(--primary); font-style: normal; font-weight: 900; }
.library-location-add, .library-shelf-add { display: flex; align-items: end; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.library-location-add { margin-bottom: 15px; background: #fafafd; }
.library-location-add label, .library-shelf-add label { flex: 1; display: flex; flex-direction: column; gap: 6px; color: var(--text); font-size: 11px; font-weight: 800; }
.library-location-add input, .library-shelf-add input { width: 100%; min-height: 42px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; font-family: inherit; }
.library-rack-list { display: grid; gap: 13px; max-height: 460px; overflow-y: auto; padding-inline-end: 3px; }
.library-rack-card { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.library-rack-card > header { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, var(--primary-soft), #fff); }
.library-rack-card > header > div { flex: 1; }.library-rack-card > header span { display: block; color: var(--muted); font-size: 9px; }.library-rack-card > header strong { font-size: 18px; direction: ltr; display: inline-block; }
.library-rack-card > header > b { padding: 5px 9px; border-radius: 999px; color: var(--primary); background: #fff; font-size: 10px; }
.library-shelf-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 15px; }
.library-shelf-chips > span { min-width: 125px; position: relative; padding: 9px 34px 9px 11px; border: 1px solid #ddd8ff; border-radius: 10px; background: #faf9ff; direction: ltr; }
.library-shelf-chips b, .library-shelf-chips small { display: block; }.library-shelf-chips b { color: var(--primary); font-size: 12px; }.library-shelf-chips small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.library-shelf-chips button { position: absolute; inset-inline-end: 7px; top: 50%; transform: translateY(-50%); width: 21px; height: 21px; padding: 0; border: 0; border-radius: 6px; color: var(--red); background: var(--red-soft); cursor: pointer; }
.library-shelf-chips p { width: 100%; margin: 3px 0; color: var(--muted); font-size: 10px; text-align: center; }
.library-shelf-add { margin: 0 14px 14px; border-style: dashed; background: #fafafd; }

@media (max-width: 1050px) {
  .library-kpis { grid-template-columns: repeat(3, 1fr); }
  .library-analytics-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  .library-hero, .library-dashboard-grid { grid-template-columns: 1fr; }
  .library-kpis { grid-template-columns: repeat(2, 1fr); }
  .library-detail-list { grid-template-columns: 1fr 1fr; }
  .library-location-guide { grid-template-columns: 1fr; }.library-location-guide > i { transform: rotate(-90deg); text-align: center; }
}
@media (max-width: 520px) {
  .library-kpis, .library-analytics-grid, .library-detail-list { grid-template-columns: 1fr; }
  .library-tabs button { padding: 0 12px; font-size: 11px; }
  .library-welcome h2 { font-size: 22px; }
}