body.story-browser-page{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#f8f9fa;margin:0;padding:0}.story-browser-header{background:linear-gradient(135deg,#1c5f73 0%,#2a7a8a 100%);color:#fff;padding:40px 20px;box-shadow:0 4px 6px rgb(0 0 0 / .1)}.header-content{max-width:1400px;margin:0 auto}.back-home{color:rgb(255 255 255 / .9);text-decoration:none;font-size:1rem;font-weight:500;padding:8px 16px;background:rgb(255 255 255 / .1);border-radius:8px;display:inline-block;transition:all 0.3s ease;margin-bottom:20px}.back-home:hover{background:rgb(255 255 255 / .2);transform:translateX(-3px)}.story-browser-header h1{font-size:2.5rem;color:#fff;margin:0 0 20px 0;font-weight:300;text-shadow:0 2px 4px rgb(0 0 0 / .2)}.story-explanation{background:rgb(255 255 255 / .1);padding:20px;border-radius:8px;margin-bottom:20px;backdrop-filter:blur(10px)}.story-explanation p{margin:0;font-size:1.1rem;line-height:1.7;color:rgb(255 255 255 / .95)}.story-types-note{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.type-badge{padding:6px 14px;border-radius:20px;font-size:.9rem;font-weight:600;display:inline-block}.grammar-badge{background:#10b981;color:#fff}.lexical-badge{background:#3b82f6;color:#fff}.story-filters-section{background:#fff;padding:30px 20px;margin:30px auto;max-width:1400px;border-radius:12px;box-shadow:0 2px 8px rgb(0 0 0 / .1)}.filters-container{display:flex;gap:20px;align-items:end;flex-wrap:wrap}.filter-group{display:flex;flex-direction:column;gap:8px;min-width:180px}.filter-group label{font-weight:600;color:#495057;font-size:.95rem}.filter-group select,.filter-group input{padding:10px 15px;border:2px solid #e9ecef;border-radius:8px;font-size:1rem;transition:all 0.3s ease}.filter-group select:focus,.filter-group input:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 0 3px rgb(139 92 246 / .1)}.clear-filters-btn{background:#dc3545;color:#fff;border:none;padding:10px 20px;border-radius:8px;cursor:pointer;font-weight:600;transition:all 0.3s ease;align-self:flex-end}.clear-filters-btn:hover{background:#c82333}.story-results-info{max-width:1400px;margin:0 auto 20px;padding:0 20px}.results-count{font-size:1.1rem;color:#6c757d;margin:0}#results-number{font-weight:600;color:#8b5cf6}.story-grid-section{max-width:1400px;margin:0 auto 40px;padding:0 20px}.story-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:30px}.story-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 6px rgb(0 0 0 / .1);transition:all 0.3s ease;position:relative;display:flex;flex-direction:column}.story-card:hover{transform:translateY(-8px);box-shadow:0 12px 24px rgb(0 0 0 / .15)}.story-card.access-public{border:3px solid #1CF4FB;box-shadow:0 4px 6px rgb(28 244 251 / .35);position:relative}.story-card.access-public:hover{border-color:#0A9396;box-shadow:0 12px 24px rgb(28 244 251 / .45)}.story-card.access-members{border:3px solid #005f73;box-shadow:0 4px 6px rgb(0 95 115 / .3);position:relative}.story-card.access-members:hover{border-color:#0A9396;box-shadow:0 12px 24px rgb(0 95 115 / .4)}.story-card .access-badge{position:absolute;top:12px;right:12px;color:#fff;padding:8px 16px;border-radius:20px;font-weight:700;font-size:.85rem;z-index:10;box-shadow:0 4px 8px rgb(0 0 0 / .2);text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;gap:6px}.story-card .badge-public{background:linear-gradient(135deg,#1CF4FB,#0A9396)}.story-card .badge-members{background:linear-gradient(135deg,#005f73,#175676)}@keyframes access-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}.story-card .badge-public{animation:access-pulse 2s ease-in-out infinite}.card-link{display:flex;flex-direction:column;text-decoration:none;color:inherit;flex:1}.story-card-image{width:100%;height:200px;overflow:hidden;background:#f8f9fa}.story-card-image img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s ease}.story-card:hover .story-card-image img{transform:scale(1.05)}.story-card-content{padding:20px;display:flex;flex-direction:column;flex:1}.story-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px}.story-title{font-size:1.3rem;font-weight:600;color:#2c3e50;margin:0;flex:1}.story-type-badge{background:#f8f9fa;padding:4px 10px;border-radius:12px;font-size:.8rem;font-weight:600;white-space:nowrap;color:#6c757d}.story-card.grammar-story .story-type-badge{background:#d1fae5;color:#065f46}.story-card.lexical-story .story-type-badge{background:#dbeafe;color:#1e40af}.story-abstract{font-size:.95rem;line-height:1.6;color:#6c757d;margin-bottom:15px;flex:1;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.story-meta{display:flex;gap:15px;margin-bottom:15px;font-size:.9rem;color:#6c757d;flex-wrap:wrap}.episode-count,.story-level{display:flex;align-items:center;gap:5px}.story-action{margin-top:auto}.start-reading-btn{display:inline-block;background:linear-gradient(135deg,#8b5cf6,#6366f1);color:#fff;padding:10px 20px;border-radius:8px;font-weight:600;transition:all 0.3s ease}.story-card:hover .start-reading-btn{transform:translateX(5px)}.no-stories-message{grid-column:1 / -1;text-align:center;padding:60px 20px;background:#fff;border-radius:12px}.no-stories-message p{font-size:1.2rem;color:#6c757d;margin:0}@media (max-width:768px){.story-browser-header h1{font-size:2rem}.story-grid{grid-template-columns:1fr}.filters-container{flex-direction:column;align-items:stretch}.filter-group{min-width:auto}.clear-filters-btn{width:100%}}.title-badge-wrapper{display:flex;flex-direction:column;gap:4px;flex:1}.story-card .featured-badge{display:inline-block;background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);color:#fff;padding:4px 12px;border-radius:20px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-top:4px;box-shadow:0 2px 8px rgb(245 158 11 / .3);align-self:flex-start}@media (max-width:768px){.story-card .featured-badge{font-size:.7rem;padding:3px 10px}}