.boot-message { display: block; max-width: 640px; margin: 32px auto; padding: 20px; color: #526f85; font: 14px/1.8 "PingFang SC", "Microsoft YaHei", sans-serif; }
.library-toggle { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #ffffff70; border-radius: 9px; padding: 9px 12px; color: #fff; background: #163750a6; cursor: pointer; font-size: 12px; font-weight: 650; }
.library-toggle .site-icon { width: 15px; height: 15px; }
.library-toggle:hover { background: #234e6ccc; border-color: #cde4f1; }
.library-toggle:focus-visible, .library-drawer :focus-visible { outline: 3px solid #76b2d9; outline-offset: 3px; }
.library-backdrop { position: fixed; inset: 0; z-index: 40; background: #102b425e; backdrop-filter: blur(4px); }
.library-drawer { box-sizing: border-box; position: fixed; z-index: 41; top: 0; right: 0; display: flex; flex-direction: column; width: min(470px, 100vw); height: 100dvh; overflow: auto; padding: 30px 25px; color: #203b50; background: #f7fafc; box-shadow: -15px 0 65px #142e4b26; font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; }
.library-drawer *, .library-drawer *::before, .library-drawer *::after { box-sizing: border-box; }
.library-drawer button, .library-drawer a { font-family: inherit; }
.library-drawer[hidden], .library-backdrop[hidden] { display: none; }
.library-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.library-kicker { color: #7491a3; font-size: 11px; font-weight: 500; }
.library-drawer h2 { margin: 7px 0 0; color: #203b50; font-size: 23px; font-weight: 650; letter-spacing: -.04em; }
.library-close { display: grid; place-items: center; flex: 0 0 auto; width: 35px; height: 35px; border: 1px solid #d5e2eb; border-radius: 10px; color: #648398; background: #fff; cursor: pointer; font-size: 23px; line-height: 1; }
.library-intro { margin: 18px 0 22px; color: #748b9b; font-size: 12px; line-height: 1.8; }
.library-filters { display: flex; gap: 5px; padding: 4px; border: 1px solid #dce7ee; border-radius: 10px; background: #eaf1f6; }
.library-filters button { flex: 1; min-height: 36px; border: 0; border-radius: 7px; padding: 8px 7px; color: #698496; background: transparent; cursor: pointer; font-size: 11px; }
.library-filters button[aria-pressed="true"] { color: #315f7d; background: #fff; box-shadow: 0 1px 4px #254d6410; font-weight: 600; }
.library-filters b { margin-left: 3px; font-size: 10px; font-weight: 500; }
.library-status { margin: 20px 2px 12px; color: #718c9c; font-size: 12px; }
.library-status.is-error { color: #ae614a; }
.library-list { display: grid; gap: 11px; padding-top: 20px; }
.library-card { display: flex; align-items: center; gap: 7px; border: 1px solid #dce7ee; border-radius: 11px; padding: 8px; color: inherit; background: #fff; transition: border-color .18s; }
.library-card:hover, .library-card.is-current { border-color: #91b6cd; }
.library-card.is-current { background: #edf5fa; }
.library-card-link { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; color: inherit; text-decoration: none; }
.library-card-image { display: block; width: 62px; height: 62px; flex: 0 0 62px; border-radius: 7px; object-fit: cover; }
.library-card-mark { display: grid; place-items: center; width: 62px; height: 62px; flex: 0 0 62px; border-radius: 8px; color: #668fa8; background: #e9f2f8; }
.library-card-mark .site-icon { width: 26px; height: 26px; }
.library-card-copy { display: grid; min-width: 0; flex: 1; gap: 4px; }
.library-card-meta { overflow: hidden; color: #7a95a5; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.library-card strong { overflow: hidden; color: #24465e; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.library-card-copy > span:last-child { overflow: hidden; color: #7a8e9b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.library-card-arrow { color: #7199b0; margin-right: 4px; }
.library-card-arrow .site-icon { width: 16px; height: 16px; }
.library-card-delete { flex: 0 0 auto; border: 1px solid #ebd8d0; border-radius: 7px; padding: 6px 7px; color: #ad715a; background: #fff8f5; cursor: pointer; font-size: 10px; }
.library-card-delete:hover { border-color: #c79680; }
.library-card-delete:disabled { cursor: wait; opacity: .6; }
.library-empty { margin: 24px 2px; color: #7a909f; font-size: 12px; }
.library-bottom { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid #dce7ee; }
.library-bottom a { display: flex; align-items: center; gap: 5px; color: #4f7e9c; text-decoration: none; font-size: 11px; }
.library-bottom .site-icon { width: 15px; height: 15px; }
body.library-open { overflow: hidden; }
.library-kicker, .library-intro, .library-status, .library-empty, .library-filters button, .library-card-meta, .library-card-copy > span:last-child { color: #586f7f; }
.library-bottom a { color: #366482; }
.library-card-delete { color: #96583e; }
@media (max-width: 520px) { .library-drawer { padding: 24px 17px; } .library-toggle { padding: 9px; } .library-toggle span:last-child { display: none; } .library-drawer h2 { font-size: 21px; } }
@media (prefers-reduced-motion: reduce) { .library-card { transition: none; } }