:root{--bg: #fff;--fg: #222;--accents-1: #f7f7f7;--accents-2: #ebebeb;--accents-3: #ddd;--accents-5: #717171;--primary: #222;--radius: 12px;--shadow-card: rgba(0, 0, 0, .02) 0 0 0 1px, rgba(0, 0, 0, .04) 0 2px 6px, rgba(0, 0, 0, .1) 0 4px 8px;--shadow-hover: rgba(0, 0, 0, .08) 0 4px 12px;--focus-ring: 0 0 0 4px #fff, 0 0 0 6px #222;--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font);background-color:#fafafa;background-image:linear-gradient(rgba(0,61,165,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(0,61,165,.07) 1px,transparent 1px);background-size:24px 24px;padding:1.25rem;min-height:100vh;color:var(--fg);line-height:1.5;-webkit-font-smoothing:antialiased;display:flex;justify-content:center;align-items:flex-start}.dashboard{display:grid;grid-template-columns:260px 1fr;width:100%;max-width:76rem;background:var(--bg);border:1px solid var(--accents-2);border-radius:1.25rem;box-shadow:0 1px 3px #00000005,0 10px 40px #0000000d;overflow:hidden}.sidebar{border-right:1px solid var(--accents-2);padding:24px;display:flex;flex-direction:column;gap:32px;position:sticky;top:0;background:var(--bg);z-index:100}.logo{font-weight:700;font-size:1.2rem;display:flex;align-items:center;gap:10px;letter-spacing:-.02em}.nav-group{display:flex;flex-direction:column;gap:4px}.nav-item{display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:8px;text-decoration:none;color:var(--accents-5);font-size:.95rem;transition:all .2s;cursor:pointer}.nav-item:hover,.nav-item.active{background:var(--accents-1);color:var(--primary)}.nav-item:focus{outline:none;box-shadow:var(--focus-ring)}.icon{display:inline-block;vertical-align:middle}.main{padding:40px;max-width:1400px;margin:0 auto;width:100%;padding-bottom:max(40px,calc(env(safe-area-inset-bottom,0px) + 80px))}header{margin-bottom:40px}h1{font-size:2.2rem;letter-spacing:-.05em;margin-bottom:8px;font-weight:800}p{color:var(--accents-5);font-size:1.1rem}.controls{display:flex;gap:16px;margin-bottom:32px;flex-wrap:wrap}.search-wrapper{position:relative;flex:1;min-width:250px}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%)}input[type=text]{width:100%;padding:14px 14px 14px 44px;border:1px solid var(--accents-3);border-radius:30px;font-size:1rem;outline:none;background:var(--bg);box-shadow:var(--shadow-card)}input:focus{box-shadow:var(--focus-ring)}.sort-wrapper{min-width:180px;position:relative}.sort-btn{width:100%;padding:14px 16px;border:1px solid var(--accents-3);border-radius:30px;font-size:1rem;background:var(--bg);color:var(--fg);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;box-shadow:var(--shadow-card);font-family:var(--font)}.sort-btn:hover{box-shadow:var(--shadow-hover)}.sort-btn:focus{outline:none;box-shadow:var(--focus-ring)}.sort-btn svg{transition:transform .2s}.sort-btn[aria-expanded=true] svg{transform:rotate(180deg)}.sort-dropdown{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--bg);border:1px solid var(--accents-3);border-radius:12px;box-shadow:var(--shadow-hover);padding:6px;z-index:300;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .2s}.sort-dropdown.open{opacity:1;visibility:visible;transform:translateY(0)}.sort-option{padding:10px 14px;border-radius:8px;cursor:pointer;font-size:.95rem}.sort-option:hover{background:var(--accents-1)}.sort-option[aria-selected=true]{background:var(--accents-1);font-weight:600}.library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:24px}.card{border:1px solid var(--accents-2);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;justify-content:space-between;background:var(--bg);box-shadow:var(--shadow-card)}.card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}.card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;gap:10px}.card h3{font-size:1.15rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card p{font-size:.95rem;color:var(--accents-5);margin-bottom:20px;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;height:4rem;line-height:1.4}.meta-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}.tag{font-size:.75rem;padding:4px 10px;border-radius:6px;background:var(--accents-1);border:1px solid var(--accents-2);font-weight:600}.stats-row{display:flex;align-items:center;gap:16px;margin-bottom:20px;padding-top:12px;border-top:1px solid var(--accents-1);font-size:.85rem;font-weight:500}.stat-item{display:flex;align-items:center;gap:6px}.card-actions{display:flex;gap:10px}.card-actions button{flex:1;justify-content:center;height:44px}button{background:var(--primary);color:#fff;border:none;padding:10px 16px;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s}button:hover{opacity:.9;box-shadow:var(--shadow-hover)}button:focus{outline:none;box-shadow:var(--focus-ring)}button.secondary{background:var(--bg);border:1px solid var(--primary);color:var(--primary)}button:active{transform:scale(.96)}.fav-btn{background:transparent;color:var(--accents-5);padding:0;width:32px;height:32px;justify-content:center;border-radius:50%}.fav-btn:hover{background:var(--accents-1);color:#ff385c}.fav-btn.active{color:#ff385c}.toast{position:fixed;bottom:32px;right:32px;background:#222;color:#fff;padding:16px 32px;border-radius:12px;transform:translateY(150px);transition:transform .4s cubic-bezier(.18,.89,.32,1.28);z-index:1000;font-weight:500;box-shadow:0 8px 28px #00000047}.toast.show{transform:translateY(0)}.loader{display:none;justify-content:center;padding:60px;width:100%}.loader.show{display:flex}.loading-spinner{animation:rotate 1s linear infinite;color:var(--accents-5)}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.skeleton-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:24px}.skeleton-card{border:1px solid var(--accents-2);border-radius:var(--radius);padding:24px;background:var(--bg);box-shadow:var(--shadow-card);display:flex;flex-direction:column;justify-content:space-between;min-height:240px}.skeleton-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;gap:10px}.skeleton-title{height:24px;flex:1;max-width:180px;border-radius:4px;background:var(--accents-1)}.skeleton-fav{width:32px;height:32px;border-radius:50%;background:var(--accents-1);flex-shrink:0}.skeleton-tags{display:flex;gap:6px;margin-bottom:16px}.skeleton-tag{height:22px;width:50px;border-radius:6px;background:var(--accents-1)}.skeleton-text{height:64px;margin-bottom:20px;border-radius:4px;background:var(--accents-1)}.skeleton-stats{height:20px;width:80px;margin-bottom:20px;border-radius:4px;background:var(--accents-1);border-top:1px solid var(--accents-1);padding-top:12px}.skeleton-actions{display:flex;gap:10px}.skeleton-btn{height:44px;flex:1;border-radius:8px;background:var(--accents-1)}@media(max-width:1024px){.dashboard{grid-template-columns:1fr}.sidebar{position:fixed;inset:auto 0 0;height:70px;width:100%;border-right:none;border-top:1px solid var(--accents-2);flex-direction:row;justify-content:space-around;padding:10px;box-shadow:0 -2px 10px #0000000d}.logo,.nav-item span{display:none}.nav-group{flex-direction:row;width:100%;justify-content:space-evenly;gap:10px}.main{padding:20px 16px 100px}.toast{bottom:90px;left:50%;right:auto;transform:translate(-50%,150px);width:max-content}.toast.show{transform:translate(-50%)}}@media(max-width:480px){h1{font-size:1.8rem}.card-actions{flex-direction:column}.card-actions button{width:100%}}@media(max-width:640px){body{padding:.75rem}.dashboard{border-radius:1rem}}