/* Short News Hub v6 — Page Styles */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
.snr-hub-body{background:#f4f4f2}
.snr-hub{display:flex;flex-direction:column;min-height:100dvh;min-height:100vh;max-width:540px;margin:0 auto;background:#f4f4f2;font-family:-apple-system,'SF Pro Display','Segoe UI',system-ui,sans-serif;position:relative;box-shadow:0 0 60px rgba(0,0,0,.12)}
.hub-skeleton{background:#e8e4e6;border-radius:12px;animation:hub-shimmer 1.4s ease-in-out infinite;position:relative;overflow:hidden}
.hub-skeleton::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);animation:hub-sweep 1.4s ease-in-out infinite}
@keyframes hub-shimmer{0%,100%{opacity:1}50%{opacity:.7}}
@keyframes hub-sweep{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* Header */
.hub-header{position:sticky;top:0;z-index:200;background:#93003f;padding:14px 16px 12px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.admin-bar .hub-header{top:32px}
.hub-header__left{display:flex;align-items:center;gap:10px}
.hub-header__logo{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hub-header__title{color:#fff;font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.1}
.hub-header__sub{color:rgba(255,255,255,.6);font-size:11px;margin-top:1px}
.hub-header__actions{display:flex;align-items:center;gap:8px}
.hub-header__search,.hub-header__add{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.15);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s;text-decoration:none;flex-shrink:0}
.hub-header__search:hover,.hub-header__add:hover{background:rgba(255,255,255,.25)}

/* Search Overlay */
.hub-search-overlay{position:fixed;inset:0;z-index:300;background:#fff;display:flex;flex-direction:column;transform:translateY(-100%);transition:transform .28s cubic-bezier(.25,.46,.45,.94)}
.hub-search-overlay.is-open{transform:translateY(0)}
.admin-bar .hub-search-overlay{top:32px}
.hub-search-inner{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid #eee;background:#93003f}
.hub-search-input{flex:1;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);border-radius:20px;padding:9px 16px;font-size:14px;color:#fff;outline:none}
.hub-search-input::placeholder{color:rgba(255,255,255,.6)}
.hub-search-input:focus{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5)}
.hub-search-close{width:32px;height:32px;border-radius:50%;border:none;background:rgba(255,255,255,.15);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}
.hub-search-results{flex:1;overflow-y:auto;padding:12px 16px}
.hub-search-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #f0f0f0;cursor:pointer;text-decoration:none}
.hub-search-item:last-child{border-bottom:none}
.hub-search-item__thumb{width:48px;height:48px;border-radius:8px;object-fit:cover;flex-shrink:0;background:#eee}
.hub-search-item__title{font-size:14px;font-weight:600;color:#111;line-height:1.3}
.hub-search-item__meta{font-size:12px;color:#888;margin-top:2px}
.hub-search-empty{text-align:center;color:#999;font-size:14px;padding:40px 0}

/* Main */
.hub-main{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:80px}

/* Section */
.hub-section{padding:0 0 4px}
.hub-section__header{display:flex;align-items:baseline;justify-content:space-between;padding:18px 16px 10px}
.hub-section__title{font-size:16px;font-weight:700;color:#111;letter-spacing:-.01em}
.hub-section__count{font-size:12px;color:#999;font-weight:500}

/* Featured */
.hub-featured{margin:12px 16px 0;border-radius:16px;overflow:hidden;position:relative}
.hub-featured__skeleton{height:200px}
.hub-featured__card{position:relative;height:200px;border-radius:16px;overflow:hidden;cursor:pointer;text-decoration:none;display:block}
.hub-featured__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hub-featured__fallback{position:absolute;inset:0;background:linear-gradient(135deg,#c4607a,#93003f,#3a0018)}
.hub-featured__overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(0,0,0,.78) 0%,rgba(0,0,0,.25) 55%,transparent 100%)}
.hub-featured__content{position:absolute;top:0;bottom:0;left:0;right:45%;padding:18px 16px;display:flex;flex-direction:column;justify-content:center}
.hub-featured__badge{display:inline-flex;align-items:center;gap:4px;background:#fff;color:#93003f;font-size:9px;font-weight:800;padding:3px 8px;border-radius:8px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;align-self:flex-start}
.hub-featured__title{color:#fff;font-size:15px;font-weight:800;line-height:1.25;letter-spacing:-.01em;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hub-featured__meta{color:rgba(255,255,255,.55);font-size:11px}
.hub-featured__cta{margin-top:10px;display:inline-flex;align-items:center;gap:5px;background:#93003f;color:#fff;font-size:11px;font-weight:700;padding:7px 13px;border-radius:16px;align-self:flex-start}

/* Category Tiles */
.hub-cat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0 16px 4px}
.hub-cat-tile{position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .18s}
.hub-cat-tile:active{transform:scale(.96)}
.hub-cat-tile__bg{position:absolute;inset:0;background-size:cover;background-position:center}
.hub-cat-tile__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72) 0%,transparent 55%)}
.hub-cat-tile__body{position:absolute;bottom:0;left:0;right:0;padding:8px 10px}
.hub-cat-tile__icon{width:24px;height:24px;border-radius:7px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.hub-cat-tile__name{color:#fff;font-size:11px;font-weight:700;line-height:1.2}
.hub-cat-tile__count{color:rgba(255,255,255,.6);font-size:10px;margin-top:1px}
.hub-cat-tile--all .hub-cat-tile__bg{background:#93003f}
.hub-cat-tile--c0 .hub-cat-tile__bg{background:linear-gradient(135deg,#7F77DD,#3C3489)}
.hub-cat-tile--c1 .hub-cat-tile__bg{background:linear-gradient(135deg,#1D9E75,#085041)}
.hub-cat-tile--c2 .hub-cat-tile__bg{background:linear-gradient(135deg,#EF9F27,#633806)}
.hub-cat-tile--c3 .hub-cat-tile__bg{background:linear-gradient(135deg,#D85A30,#4A1B0C)}
.hub-cat-tile--c4 .hub-cat-tile__bg{background:linear-gradient(135deg,#378ADD,#042C53)}
.hub-cat-tile--c5 .hub-cat-tile__bg{background:linear-gradient(135deg,#D4537E,#4B1528)}
.hub-cat-tile--c6 .hub-cat-tile__bg{background:linear-gradient(135deg,#639922,#173404)}
.hub-cat-tile--c7 .hub-cat-tile__bg{background:linear-gradient(135deg,#BA7517,#412402)}
/* When a category has an image, the bg class gradient is overridden by inline style */
/* When a category has a real image: fade it in and deepen the scrim so the
   white label/count stay legible over arbitrary photography. Also ensures an
   image on the hardcoded All Stories tile overrides its maroon fill. */
.hub-cat-tile--has-img .hub-cat-tile__bg{animation:snrTileFade .35s ease;background-color:transparent}
.hub-cat-tile--has-img .hub-cat-tile__overlay{background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.28) 45%,transparent 72%)}
.hub-cat-tile--has-img .hub-cat-tile__count{color:rgba(255,255,255,.82)}
@keyframes snrTileFade{from{opacity:0}to{opacity:1}}
.hub-cat-tile.hub-skeleton{aspect-ratio:1/1;border-radius:14px}

/* Recent Strip */
.hub-recent-strip{display:flex;gap:10px;padding:0 16px 4px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.hub-recent-strip::-webkit-scrollbar{display:none}
.hub-recent-card{flex-shrink:0;width:100px;aspect-ratio:9/14;border-radius:12px;overflow:hidden;position:relative;cursor:pointer;background:#222;text-decoration:none;display:block;-webkit-tap-highlight-color:transparent;transition:transform .18s}
.hub-recent-card:active{transform:scale(.95)}
.hub-recent-card.hub-skeleton{background:#e8e4e6}
.hub-recent-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hub-recent-card__fallback{position:absolute;inset:0}
.hub-recent-card__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.88) 0%,transparent 50%)}
.hub-recent-card__play{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center}
.hub-recent-card__body{position:absolute;bottom:0;left:0;right:0;padding:7px}
.hub-recent-card__cat{background:#93003f;color:#fff;font-size:9px;font-weight:700;padding:1px 5px;border-radius:5px;display:inline-block;margin-bottom:3px;text-transform:uppercase;letter-spacing:.04em}
.hub-recent-card__title{color:#fff;font-size:10px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Filter Pills */
.hub-filter-bar{display:flex;gap:6px;padding:14px 16px 2px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;position:sticky;top:62px;background:#f4f4f2;z-index:100}
.admin-bar .hub-filter-bar{top:94px}
.hub-filter-bar::-webkit-scrollbar{display:none}
.hub-filter-pill{flex-shrink:0;padding:6px 15px;border-radius:18px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;border:1.5px solid #ddd;background:#fff;color:#555;transition:all .18s;-webkit-tap-highlight-color:transparent;user-select:none}
.hub-filter-pill.is-active{background:#93003f;color:#fff;border-color:#93003f}
.hub-filter-pill:hover:not(.is-active){border-color:#93003f;color:#93003f}

/* Story List */
.hub-story-list{padding:0 16px;display:flex;flex-direction:column;gap:10px}
.hub-story-card{background:#fff;border-radius:14px;overflow:hidden;display:flex;align-items:stretch;cursor:pointer;text-decoration:none;border:0.5px solid rgba(0,0,0,.06);transition:transform .18s;-webkit-tap-highlight-color:transparent}
.hub-story-card:active{transform:scale(.98)}
.hub-story-card__thumb{width:88px;flex-shrink:0;background:#eee;position:relative;overflow:hidden}
.hub-story-card__thumb img{width:100%;height:100%;object-fit:cover}
.hub-story-card__thumb-fallback{width:100%;height:100%}
.hub-story-card__body{flex:1;padding:11px 13px;display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.hub-story-card__cat{display:inline-block;background:rgba(147,0,63,.1);color:#93003f;font-size:10px;font-weight:700;padding:2px 7px;border-radius:8px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;align-self:flex-start}
.hub-story-card__title{font-size:14px;font-weight:700;color:#111;line-height:1.3;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:5px}
.hub-story-card__meta{font-size:11px;color:#999;font-weight:500}
.hub-story-card__play{flex-shrink:0;width:32px;height:32px;margin:auto 12px auto 0;border-radius:50%;background:#93003f;display:flex;align-items:center;justify-content:center}

/* Load More */
.hub-load-more-wrap{padding:16px 16px 0}
.hub-load-more{width:100%;padding:13px;border:1.5px solid #93003f;border-radius:12px;background:transparent;color:#93003f;font-size:14px;font-weight:700;cursor:pointer;transition:background .18s,color .18s}
.hub-load-more:hover{background:#93003f;color:#fff}
.hub-load-more:disabled{opacity:.5;cursor:default}

/* Bottom Nav */
.hub-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:540px;background:#fff;border-top:0.5px solid rgba(0,0,0,.1);display:flex;justify-content:space-around;align-items:center;padding:10px 0;z-index:200}
@supports(padding-bottom:env(safe-area-inset-bottom)){.hub-nav{padding-bottom:max(10px,env(safe-area-inset-bottom))}}
.hub-nav__item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;cursor:pointer;color:#bbb;transition:color .18s;-webkit-tap-highlight-color:transparent;padding:0}
.hub-nav__item.is-active{color:#93003f}
.hub-nav__item span{font-size:10px;font-weight:600}

/* Empty/Error */
.hub-empty{text-align:center;padding:40px 20px;color:#aaa;font-size:14px}
.hub-empty h3{color:#555;font-size:16px;margin-bottom:6px}
.hub-error-banner{margin:12px 16px;padding:12px 14px;background:#fff0f5;border:1px solid rgba(147,0,63,.2);border-radius:10px;font-size:13px;color:#93003f}

/* Fix: All Stories tile — overlay too dark, label not visible */
.hub-cat-tile--all .hub-cat-tile__overlay{background:linear-gradient(to top,rgba(0,0,0,.5) 0%,transparent 60%)}
.hub-cat-tile--all .hub-cat-tile__name{color:#fff;font-size:12px;font-weight:800}