/* 365 Kora World-Class Interface Layer */
:root{
  --k-bg:#050b14;
  --k-panel:#0b1624;
  --k-panel-2:#0f1d2e;
  --k-line:rgba(159,183,210,.18);
  --k-line-strong:rgba(93,165,255,.35);
  --k-text:#f4f8ff;
  --k-muted:#9fb3cc;
  --k-blue:#1d8cff;
  --k-green:#21c46b;
  --k-gold:#f5c84b;
  --k-red:#ef4444;
  --k-pink:#f04480;
}
html{background:var(--k-bg)}
body{
  background:
    linear-gradient(180deg,#07111d 0,#050b14 420px,#050b14 100%) !important;
  color:var(--k-text) !important;
  letter-spacing:0 !important;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(29,140,255,.08),transparent 24%,transparent 76%,rgba(240,68,128,.07)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 92px);
  opacity:.9;
  z-index:-1;
}
.top{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(16px);
  background:rgba(5,11,20,.84) !important;
  border-bottom:1px solid var(--k-line) !important;
}
.top-in{max-width:1480px !important;padding:12px 20px !important}
.brand{
  color:var(--k-text) !important;
  text-decoration:none !important;
  gap:10px !important;
}
.brand:before{
  box-shadow:0 0 0 1px rgba(255,255,255,.16) inset,0 12px 30px rgba(29,140,255,.22) !important;
}
.brand b{color:var(--k-gold) !important}
.nav a,
.news-source,
.btn,
.side-arrow,
.today-link,
.quick-chip,
.calendar-day{
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease,color .18s ease;
}
.nav a:hover,
.news-source:hover,
.btn:hover,
.side-arrow:hover,
.today-link:hover,
.quick-chip:hover,
.calendar-day:hover{transform:translateY(-1px)}
.wrap{max-width:1480px !important}
.ticker,.hly-pro-text-ticker{
  border:1px solid rgba(93,165,255,.28) !important;
  background:linear-gradient(135deg,rgba(11,28,48,.94),rgba(11,22,36,.94)) !important;
  border-radius:18px !important;
  box-shadow:0 16px 42px rgba(0,0,0,.22) !important;
}
.page-grid{gap:18px !important}
.side-panel,.content-panel,.card,.news-item-card,.match-card,.side-league,.calendar-pop,.news-empty,.card-shell{
  background:linear-gradient(180deg,rgba(15,29,46,.96),rgba(8,19,32,.96)) !important;
  border:1px solid var(--k-line) !important;
  box-shadow:0 18px 55px rgba(0,0,0,.24) !important;
}
.side-panel,.content-panel{border-radius:22px !important}
.side-league-head,.match-top{
  background:rgba(255,255,255,.035) !important;
  border-color:rgba(255,255,255,.08) !important;
}
.side-match,.match-card,.news-item-card{
  position:relative;
  overflow:hidden;
}
.side-match:before,.match-card:before,.news-item-card:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg,rgba(29,140,255,.10),transparent 34%,rgba(245,200,75,.07));
  opacity:0;
  transition:opacity .2s ease;
}
.side-match:hover:before,.match-card:hover:before,.news-item-card:hover:before{opacity:1}
.match-card:hover,.news-item-card:hover,.side-match:hover{
  border-color:var(--k-line-strong) !important;
  box-shadow:0 22px 70px rgba(0,0,0,.32),0 0 0 1px rgba(29,140,255,.16) inset !important;
}
.team-logo,.side-league-logo,.news-item-image img,.img{
  background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}
.team-logo,.avatar{
  border:1px solid rgba(255,255,255,.18) !important;
}
.score,.side-score strong{
  color:var(--k-text) !important;
  text-shadow:0 0 22px rgba(29,140,255,.24);
}
.state.live,.js-live-status.live,.live-state{
  color:#d9ffe8 !important;
  background:rgba(33,196,107,.16) !important;
  border:1px solid rgba(33,196,107,.42) !important;
  box-shadow:0 0 22px rgba(33,196,107,.22);
}
.state.live:before,.js-live-status.live:before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-inline-end:6px;
  border-radius:999px;
  background:var(--k-green);
  box-shadow:0 0 0 0 rgba(33,196,107,.65);
  animation:kLivePulse 1.5s infinite;
}
@keyframes kLivePulse{70%{box-shadow:0 0 0 8px rgba(33,196,107,0)}100%{box-shadow:0 0 0 0 rgba(33,196,107,0)}}
.state.done,.js-live-status.done{background:rgba(148,163,184,.13) !important;color:#d7e4f5 !important;border:1px solid rgba(148,163,184,.20) !important}
.state.soon,.js-live-status.soon{background:rgba(29,140,255,.14) !important;color:#d8ecff !important;border:1px solid rgba(29,140,255,.28) !important}
.btn,.news-source,.today-link,.quick-chip.active,.nav a.active{
  background:linear-gradient(135deg,var(--k-blue),#1463d8) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 12px 30px rgba(29,140,255,.18) !important;
}
.title,h1,h2,h3{letter-spacing:0 !important;color:var(--k-text) !important}
.muted,.meta,.summary,.note,.small{color:var(--k-muted) !important}
.news-page{max-width:1180px !important;margin:24px auto !important;padding:0 16px !important}
.news-list{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:16px !important}
.news-item-card{display:grid !important;grid-template-columns:240px 1fr !important;gap:16px !important;border-radius:20px !important;padding:14px !important}
.news-item-image{min-height:180px !important;border-radius:16px !important;overflow:hidden;background:linear-gradient(135deg,#123154,#181f33) !important;display:grid;place-items:center;color:#fff;font-size:34px;font-weight:1000}
.news-item-image img{width:100% !important;height:100% !important;object-fit:cover !important;border-radius:16px !important}
.news-item-content h2{font-size:22px !important;line-height:1.55 !important;margin:8px 0 !important}
.news-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.news-source.soft{background:rgba(255,255,255,.08) !important;box-shadow:none !important}
body .wrap .card, article.card{border-radius:22px !important}
article.card h1{font-size:34px !important;line-height:1.45 !important}
article.card .img{border-radius:20px !important;width:100% !important;object-fit:cover !important}
@media(max-width:980px){.page-grid{grid-template-columns:1fr !important}.news-list{grid-template-columns:1fr !important}.news-item-card{grid-template-columns:1fr !important}.news-item-image{min-height:220px !important}}
@media(max-width:620px){.top-in{padding:10px 12px !important}.brand{font-size:20px !important}.nav{gap:6px !important}.nav a{padding:8px 10px !important}.match-main{grid-template-columns:1fr !important;text-align:center}.team,.team.away{justify-content:center !important}.news-page{margin:14px auto !important}.news-item-content h2{font-size:19px !important}article.card h1{font-size:25px !important}}

/* News cards upgrade */
.news-hero-pro{
  margin:0 0 16px;
  padding:26px 24px;
  border-radius:24px;
  border:1px solid rgba(93,165,255,.28);
  background:
    linear-gradient(135deg,rgba(29,140,255,.18),rgba(240,68,128,.10)),
    linear-gradient(180deg,rgba(15,29,46,.98),rgba(8,19,32,.98));
  box-shadow:0 20px 60px rgba(0,0,0,.26);
}
.news-hero-pro span{display:inline-flex;padding:7px 11px;border-radius:999px;background:rgba(245,200,75,.14);border:1px solid rgba(245,200,75,.32);color:#ffe9a6;font-weight:1000;font-size:12px}
.news-hero-pro h1{margin:12px 0 8px;font-size:36px;line-height:1.25}
.news-hero-pro p{margin:0;color:var(--k-muted);font-size:16px;line-height:1.8}
.news-item-content .body{display:none !important}
.news-item-card .summary{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.wc-news-card{border:1px solid rgba(159,183,210,.16) !important;background:linear-gradient(180deg,rgba(15,29,46,.92),rgba(8,19,32,.92)) !important;border-radius:18px !important;overflow:hidden !important}
.wc-news-thumb img{object-fit:cover !important}


/* Mobile-first spectator polish */
@media(max-width:850px){
  .page-grid{grid-template-columns:1fr !important;grid-template-areas:"content" "side" !important;direction:rtl !important}
  .content-panel{grid-area:content !important}
  .side-panel{grid-area:side !important;position:static !important;max-height:none !important}
  .ticker .track{animation:none !important;transform:none !important;overflow-x:auto !important;display:flex !important;gap:10px !important;padding:10px 12px !important;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .ticker .track span{flex:0 0 auto;max-width:84vw;overflow:hidden;text-overflow:ellipsis;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);scroll-snap-align:start}
  .ticker .track::-webkit-scrollbar{display:none}
  .hly-pro-text-ticker .hly-pro-track{animation:none !important;transform:none !important;overflow-x:auto !important;gap:10px !important;padding:10px 12px !important}
  .hly-pro-text-ticker .hly-pro-item{flex:0 0 auto;max-width:84vw;overflow:hidden;text-overflow:ellipsis;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10)}
}
@media(max-width:620px){
  .top-in{align-items:flex-start !important;gap:10px !important}
  .nav{justify-content:flex-start !important;max-width:100% !important}
  .content-panel,.side-panel{border-radius:20px !important}
  .match-card{border-radius:18px !important}
  .match-card .match-main{grid-template-columns:minmax(0,1fr) 76px minmax(0,1fr) !important;gap:8px !important;text-align:center !important}
  .match-card .team{justify-content:center !important;min-width:0 !important}
  .match-card .team .name{font-size:14px !important;line-height:1.35 !important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .match-card .team-logo{width:46px !important;height:46px !important}
  .match-card .score{font-size:24px !important;white-space:nowrap !important}
  .match-card .muted{font-size:11px !important;line-height:1.45 !important}
}


/* Match detail mobile scoreboard polish */
@media(max-width:700px){
  body .wrap{width:min(100% - 18px,94vw) !important;margin-top:14px !important}
  body .hero{padding:16px 12px 18px !important;border-radius:24px !important}
  body .hero .meta{margin-bottom:14px !important;gap:8px !important}
  body .hero .meta span{padding:7px 10px !important;font-size:12px !important;line-height:1.25 !important}
  body .hero .scoreline{grid-template-columns:minmax(0,1fr) 86px minmax(0,1fr) !important;gap:7px !important;align-items:center !important}
  body .hero .team{min-width:0 !important;text-align:center !important}
  body .hero .team-logo{width:62px !important;height:62px !important;box-shadow:0 10px 22px rgba(0,0,0,.28) !important}
  body .hero .team-name{font-size:16px !important;line-height:1.25 !important;margin-top:7px !important;display:-webkit-box !important;-webkit-line-clamp:2 !important;-webkit-box-orient:vertical !important;overflow:hidden !important;min-height:40px !important}
  body .hero .center{min-width:0 !important}
  body .hero .score,body .hero .score-visual{font-size:31px !important;line-height:1 !important;margin:4px 0 !important;white-space:nowrap !important}
  body .hero .state{font-size:12px !important;padding:6px 10px !important;margin-top:2px !important}
  body .hero .date{margin-top:7px !important;gap:4px !important;font-size:10.5px !important;line-height:1.45 !important}
  body .match-info-tickets{grid-template-columns:1fr 1fr !important;gap:8px !important;margin-top:12px !important}
  body .info-ticket{min-height:74px !important;padding:10px !important;border-radius:16px !important}
  body .tabs#match-tabs,body .tabs{margin:14px 0 18px !important;border-radius:18px !important;padding:8px !important;gap:7px !important}
  body .tab,body .tabs#match-tabs a.tab{padding:9px 12px !important;font-size:13px !important}
}


/* Compact mobile top navigation */
@media(max-width:700px){
  body .top .nav,body header.top .nav{overflow-x:auto !important;flex-wrap:nowrap !important;max-width:100% !important;scrollbar-width:none !important;-webkit-overflow-scrolling:touch;padding-bottom:2px !important}
  body .top .nav::-webkit-scrollbar,body header.top .nav::-webkit-scrollbar{display:none !important}
  body .top .nav a,body header.top .nav a{flex:0 0 auto !important;white-space:nowrap !important}
}
