.home-page { padding:8px 0 28px; }
.home-welcome { margin-bottom:20px; }
.home-welcome > p { color:#6de0a3; font-size:11px; letter-spacing:1.2px; margin-bottom:8px; }
.home-welcome h1 { color:#e9edf3; font-size:clamp(23px,3vw,32px); line-height:1.3; margin:0; }
.home-search { display:flex; align-items:center; gap:12px; background:#182d41; border:1px solid #2a4259; border-radius:14px; padding:10px 12px; margin-bottom:20px; }
.home-search > i { color:#a8bbce; font-size:20px; }
.home-search input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:#f0f3f7; font-size:16px; }
.home-search input::placeholder { color:#a8bbce; }
.home-search button { border:0; padding:8px 14px; border-radius:8px; background:#ddb04d; color:#0a192f; font-weight:600; }
.home-search { position:relative; }
.home-search .list-search-res { top:100%; left:0; right:0; width:auto; }
.home-tabs { display:flex; overflow-x:auto; scrollbar-width:none; gap:24px; margin-bottom:18px; border-bottom:1px solid #273b50; }
.home-tabs::-webkit-scrollbar { display:none; }
.home-tabs button { flex-shrink:0; position:relative; padding:12px 0 15px; background:transparent; border:0; color:#9cb0c7; font-size:18px; font-weight:600; }
.home-tabs button[aria-selected=true] { color:#f2f4f8; }
.home-tabs button[aria-selected=true]::after { content:""; position:absolute; height:3px; background:#e1b54b; border-radius:3px; bottom:0; left:15%; right:15%; }
.home-filter { display:flex; align-items:center; gap:12px; margin-bottom:20px; font-size:13px; }
.home-filter label { margin:0; color:#acbed0; }
.home-filter select { max-width:55%; min-width:120px; border:1px solid #304a62; border-radius:8px; background:#10253b; color:#e1e9f3; padding:9px; }
.home-filter > a { color:#b9cddd; margin-left:auto; }
.home-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.home-grid[hidden] { display:none!important; }
#home-feed[aria-busy=true] > .home-grid:not([hidden]) { opacity:.6; }
.home-card { display:flex; flex-direction:column; min-width:0; border:1px solid #263b50; background:#12263a; border-radius:13px; overflow:hidden; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
.home-card-cover { display:block; flex-shrink:0; position:relative; background:#09192a; aspect-ratio:355/200; }
.home-card-cover img { display:block; width:100%; height:100%; object-fit:contain; }
.home-card-views,.home-card-state,.home-card-rating { position:absolute; bottom:8px; right:8px; border-radius:5px; padding:3px 7px; background:#07121fd9; color:#fff; font-size:11px; line-height:1.4; white-space:nowrap; }
.home-card-rating { right:auto; left:8px; }
.home-card-state { bottom:auto; top:8px; color:#0a192f; background:#e1b54b; }
.home-card-body { display:flex; flex-direction:column; flex:1; gap:7px; min-width:0; padding:12px; }
.home-card h2 { margin:0; font-family:inherit; font-size:16px; line-height:1.4; font-weight:600; }
.home-card h2 a { color:#ecf0f5; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; height:2.8em; overflow-wrap:anywhere; }
.home-card h2 a:hover { color:#e1b54b; }
.home-card-author { min-width:0; color:#a2b6cb; font-size:12px; line-height:1.5; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-card-author a { color:inherit; }
.home-card-tags { display:flex; flex-wrap:nowrap; align-items:center; gap:6px; min-width:0; font-size:10px; line-height:1.4; }
.home-card-tags a { flex:0 1 auto; min-width:0; background:#263b50; color:#bcd0e3; padding:4px 7px; border-radius:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-card-tags span { flex:0 0 auto; max-width:50%; color:#81c7a2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-card-body > .save-story { order:2; width:100%; margin:0; margin-top:auto; min-height:36px; font-size:12px; }
.home-card .story-ranks { flex-wrap:nowrap; gap:4px; min-width:0; margin:0; }
.home-card .story-rank-badge { flex:0 1 auto; min-width:0; padding:3px 5px; font-size:10px; line-height:1.4; overflow:hidden; text-overflow:ellipsis; }
.home-card .ranking-views,.home-card .home-card-progress { margin:0; font-size:11px; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.home-card .home-card-progress { order:1; }
.home-empty { grid-column:1/-1; padding:48px 12px; text-align:center; color:#acbed0; }
.home-page :is(a,button,select,input):focus-visible { outline:2px solid #e1b54b; outline-offset:3px; }
#home-sentinel { height:1px; }
@media(max-width:991px) { .home-page { padding:8px 16px 28px; } .home-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:575px) { .home-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .home-card-body { padding:10px; } .home-card h2 { font-size:14px; } .home-tabs { gap:0; justify-content:space-between; } .home-tabs button { font-size:15px; } .home-filter { gap:8px; font-size:12px; } .home-filter > a { font-size:11px; } }