/* Serene Rebuild: full visual reset over the existing Laravel front-end. */
body[data-app=front].serene-rebuild{
  --serene-ink:#17231f;
  --serene-ink-2:#33453d;
  --serene-muted:#6f7b72;
  --serene-faint:#9aa49b;
  --serene-paper:rgba(255,253,246,.86);
  --serene-paper-strong:rgba(255,253,246,.94);
  --serene-glass:rgba(245,246,236,.64);
  --serene-line:rgba(45,72,62,.16);
  --serene-line-strong:rgba(45,72,62,.26);
  --serene-green:#1e4d43;
  --serene-green-2:#38695d;
  --serene-jade:#6da395;
  --serene-gold:#d49a48;
  --serene-red:#d93431;
  --serene-red-deep:#ad241f;
  --serene-cream:#fff6e5;
  --serene-shadow:0 30px 90px rgba(27,48,42,.16);
  min-width:320px;
  color:var(--serene-ink);
  background:#e8eee6;
  font-family:"Inter","Microsoft YaHei UI","Microsoft YaHei",system-ui,sans-serif;
}

body[data-app=front].serene-rebuild::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(760px 460px at 10% 8%,rgba(255,246,229,.60),transparent 72%),
    radial-gradient(760px 500px at 82% 10%,rgba(109,163,149,.28),transparent 70%),
    linear-gradient(180deg,rgba(249,247,237,.52),rgba(225,234,225,.74) 62%,rgba(218,226,218,.86));
  opacity:.96;
  mask-image:none;
}

body[data-app=front].serene-rebuild *{
  scrollbar-color:rgba(45,72,62,.28) rgba(255,255,255,.18);
}

body[data-app=front].serene-rebuild .cinematic-bg{
  background:#dfe8de;
}

body[data-app=front].serene-rebuild .cinematic-bg-video{
  opacity:.34;
  filter:saturate(.98) contrast(.98) brightness(1.04);
  transform:scale(1.08);
  transform-origin:50% 50%;
  animation:serene-video-pan 26s ease-in-out infinite alternate;
}

body[data-app=front].serene-rebuild .cinematic-bg-veil{
  background:
    linear-gradient(90deg,rgba(239,242,234,.96),rgba(239,242,234,.72) 34%,rgba(239,242,234,.80) 66%,rgba(239,242,234,.96)),
    linear-gradient(180deg,rgba(255,253,246,.62),rgba(231,237,228,.88) 74%,rgba(224,232,222,.94)),
    radial-gradient(620px 360px at 50% 0,rgba(255,246,229,.48),transparent 74%);
}

body[data-app=front].serene-rebuild .cinematic-node-map,
body[data-app=front].serene-rebuild .cinematic-orb{
  display:none;
}

body[data-app=front].serene-rebuild .app-shell{
  position:relative;
  z-index:1;
  min-height:100dvh;
}

body[data-app=front].serene-rebuild .workspace{
  position:relative;
  min-height:100dvh;
  background:
    linear-gradient(90deg,rgba(238,241,232,.42),rgba(255,253,246,.24) 28%,rgba(236,241,232,.62)),
    radial-gradient(720px 320px at 56px 92%,rgba(30,77,67,.10),transparent 70%);
}

body[data-app=front].serene-rebuild .page-content{
  width:min(100%,1344px);
  padding:24px 32px 62px;
}

/* Opening: real video-led landscape animation, not a black splash. */
body[data-app=front].serene-rebuild .serene-intro{
  position:fixed;
  inset:0;
  background:#dfe8de url("media/serene-art-poster.png") center/cover no-repeat;
  color:var(--serene-cream);
  isolation:isolate;
}

body[data-app=front].serene-rebuild .intro-video{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.06) contrast(1.08) brightness(.86);
  transform:scale(1.12);
  transform-origin:50% 50%;
  background:#dfe8de url("media/serene-art-poster.png") center/cover no-repeat;
}

body[data-app=front].serene-rebuild .intro-wash{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,rgba(13,33,29,.34),rgba(13,33,29,.04) 38%,rgba(13,33,29,.10) 70%,rgba(13,33,29,.36)),
    linear-gradient(180deg,rgba(13,33,29,.12),rgba(13,33,29,0) 42%,rgba(13,33,29,.42)),
    radial-gradient(620px 380px at 50% 52%,rgba(255,246,229,.10),transparent 72%);
}

body[data-app=front].serene-rebuild .glass-sky,
body[data-app=front].serene-rebuild .glass-plane,
body[data-app=front].serene-rebuild .glass-orb,
body[data-app=front].serene-rebuild .glass-wave{
  display:none!important;
}

body[data-app=front].serene-rebuild .intro-mist{
  position:absolute;
  z-index:2;
  left:-12%;
  right:-12%;
  height:170px;
  border-radius:50%;
  opacity:.16;
  filter:blur(18px);
  background:linear-gradient(90deg,transparent,rgba(255,246,229,.42),rgba(175,205,190,.16),transparent);
  animation:serene-mist 18s ease-in-out infinite alternate;
}

body[data-app=front].serene-rebuild .mist-one{top:20%;transform:translateX(-6%);}
body[data-app=front].serene-rebuild .mist-two{top:48%;opacity:.22;animation-duration:23s;animation-direction:alternate-reverse;}
body[data-app=front].serene-rebuild .mist-three{bottom:11%;opacity:.20;animation-duration:28s;}

body[data-app=front].serene-rebuild .intro-grid{
  position:absolute;
  inset:0;
  z-index:3;
  opacity:.045;
  background:
    linear-gradient(rgba(255,246,229,.18) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,246,229,.14) 1px,transparent 1px);
  background-size:96px 96px;
  mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);
}

body[data-app=front].serene-rebuild .intro-horizon{
  position:absolute;
  left:50%;
  top:51%;
  z-index:4;
  width:min(720px,64vw);
  height:1px;
  transform:translate(-50%,-50%);
  background:linear-gradient(90deg,transparent,rgba(255,246,229,.22),rgba(212,154,72,.68),rgba(255,246,229,.22),transparent);
}

body[data-app=front].serene-rebuild .intro-horizon i{
  position:absolute;
  top:-1px;
  width:16%;
  height:3px;
  border-radius:999px;
  background:var(--serene-gold);
}

body[data-app=front].serene-rebuild .intro-horizon i:nth-child(1){left:10%;}
body[data-app=front].serene-rebuild .intro-horizon i:nth-child(2){left:42%;opacity:.62;}
body[data-app=front].serene-rebuild .intro-horizon i:nth-child(3){left:74%;opacity:.34;}

body[data-app=front].serene-rebuild .intro-chip{
  position:absolute;
  z-index:5;
  display:grid;
  gap:4px;
  color:rgba(255,246,229,.72);
  font-size:12px;
  letter-spacing:.06em;
}

body[data-app=front].serene-rebuild .intro-chip b{
  color:#ffad4e;
  font-size:18px;
  font-weight:700;
  letter-spacing:0;
}

body[data-app=front].serene-rebuild .chip-one{left:13%;top:28%;}
body[data-app=front].serene-rebuild .chip-two{right:14%;top:34%;}
body[data-app=front].serene-rebuild .chip-three{right:21%;bottom:23%;}

body[data-app=front].serene-rebuild .intro-panel{
  position:absolute;
  left:50%;
  top:52%;
  z-index:6;
  width:min(760px,calc(100vw - 48px));
  transform:translate(-50%,-50%);
  text-align:center;
  background:transparent;
  box-shadow:none;
}

body[data-app=front].serene-rebuild .intro-mark{
  display:flex;
  justify-content:center;
  gap:7px;
  margin-bottom:22px;
}

body[data-app=front].serene-rebuild .intro-mark i{
  width:36px;
  height:3px;
  border-radius:999px;
  background:#ffad4e;
  box-shadow:0 0 24px rgba(255,173,78,.42);
}

body[data-app=front].serene-rebuild .intro-mark i:last-child{
  width:14px;
  opacity:.42;
}

body[data-app=front].serene-rebuild .intro-topline{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-bottom:16px;
  color:rgba(255,246,229,.72);
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

body[data-app=front].serene-rebuild .intro-topline i,
body[data-app=front].serene-rebuild .intro-formula i,
body[data-app=front].serene-rebuild .intro-footer i{
  width:30px;
  height:1px;
  background:rgba(255,246,229,.38);
}

body[data-app=front].serene-rebuild .intro-brand{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:12px;
  color:var(--serene-cream);
  font-family:"Instrument Serif","Noto Serif SC",serif;
  letter-spacing:-.07em;
  line-height:.88;
  text-shadow:0 24px 70px rgba(0,0,0,.34);
}

body[data-app=front].serene-rebuild .intro-brand strong{
  color:#f39732;
  font-size:clamp(82px,12vw,168px);
  font-weight:400;
}

body[data-app=front].serene-rebuild .intro-brand em{
  color:var(--serene-cream);
  font-size:clamp(42px,6vw,86px);
  font-style:normal;
  font-weight:400;
}

body[data-app=front].serene-rebuild .intro-formula{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:22px 0 12px;
  color:rgba(255,246,229,.82);
  font-size:16px;
}

body[data-app=front].serene-rebuild .intro-panel p{
  margin:0;
  color:rgba(255,246,229,.74);
  font-size:14px;
}

body[data-app=front].serene-rebuild .intro-footer{
  position:absolute;
  left:50%;
  bottom:34px;
  z-index:6;
  display:flex;
  align-items:center;
  gap:12px;
  transform:translateX(-50%);
  color:rgba(255,246,229,.70);
  font-size:12px;
  white-space:nowrap;
}

body[data-app=front].serene-rebuild .intro-skip{
  position:absolute;
  right:24px;
  bottom:22px;
  z-index:3;
  height:38px;
  padding:0 14px;
  border:1px solid rgba(255,246,229,.28);
  border-radius:999px;
  color:var(--serene-cream);
  background:rgba(30,77,67,.42);
  box-shadow:0 18px 44px rgba(0,0,0,.16);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

/* Navigation shell */
body[data-app=front].serene-rebuild .sidebar{
  color:var(--serene-cream);
  border-right:1px solid rgba(255,246,229,.18);
  background:
    linear-gradient(180deg,rgba(25,53,45,.88),rgba(21,43,37,.78)),
    rgba(30,77,67,.72);
  box-shadow:16px 0 64px rgba(27,48,42,.16);
  backdrop-filter:blur(22px) saturate(122%);
  -webkit-backdrop-filter:blur(22px) saturate(122%);
}

body[data-app=front].serene-rebuild .sidebar::before{
  height:190px;
  background:
    radial-gradient(circle at 36% 10%,rgba(255,246,229,.22),transparent 38%),
    linear-gradient(180deg,rgba(255,255,255,.10),transparent);
}

body[data-app=front].serene-rebuild .brand-block{
  border-bottom-color:rgba(255,246,229,.18);
}

body[data-app=front].serene-rebuild .brand-block img{
  border:1px solid rgba(255,246,229,.46);
  border-radius:12px;
  background:#fff;
  box-shadow:0 14px 36px rgba(12,30,26,.22);
}

body[data-app=front].serene-rebuild .brand-block strong{
  color:var(--serene-cream);
  font-family:"Instrument Serif","Noto Serif SC",serif;
  font-size:23px;
  font-weight:400;
  letter-spacing:-.035em;
}

body[data-app=front].serene-rebuild .nav-menu{
  gap:8px;
}

body[data-app=front].serene-rebuild .nav-item{
  min-height:50px;
  border:1px solid transparent;
  border-radius:14px;
  color:rgba(255,246,229,.70);
  background:transparent;
  font-size:16px;
  font-weight:650;
}

body[data-app=front].serene-rebuild .nav-item svg{
  color:#f1be75;
}

body[data-app=front].serene-rebuild .nav-item:hover{
  color:#fff;
  border-color:rgba(255,246,229,.18);
  background:rgba(255,246,229,.09);
  transform:translateX(2px);
}

body[data-app=front].serene-rebuild .nav-item.is-active{
  color:#fff;
  border-color:rgba(255,246,229,.24);
  background:linear-gradient(90deg,rgba(217,52,49,.40),rgba(255,246,229,.10));
  overflow:hidden;
}

body[data-app=front].serene-rebuild .nav-item.is-active::before{
  content:"";
  position:absolute;
  left:10px;
  top:50%;
  width:3px;
  height:24px;
  border-radius:99px;
  background:#ffb15c;
  transform:translateY(-50%);
  animation:none;
}

body[data-app=front].serene-rebuild .nav-item.is-active::after{
  content:"";
  position:absolute;
  inset:1px;
  z-index:0;
  border-radius:13px;
  background:linear-gradient(110deg,rgba(255,255,255,.12),rgba(255,255,255,.02));
}

body[data-app=front].serene-rebuild .nav-item>*{
  position:relative;
  z-index:1;
}

body[data-app=front].serene-rebuild .season-card{
  border-color:rgba(255,246,229,.22);
  border-radius:14px;
  color:rgba(255,246,229,.72);
  background:rgba(255,246,229,.08);
  box-shadow:inset 0 1px rgba(255,255,255,.14);
}

body[data-app=front].serene-rebuild .season-card svg,
body[data-app=front].serene-rebuild .season-card strong{
  color:#ffd28e;
}

/* Summit stays red, but the surrounding system stops reading as black. */
body[data-app=front].serene-rebuild .summit-banner-wrap{
  max-width:1280px;
  margin-inline:auto;
  margin-bottom:16px;
  border-color:rgba(255,255,255,.84);
  border-radius:18px;
  box-shadow:0 28px 82px rgba(126,35,27,.16),0 22px 70px rgba(45,72,62,.12);
}

body[data-app=front].serene-rebuild .summit-banner-wrap::before,
body[data-app=front].serene-rebuild .summit-banner-wrap::after{
  content:none!important;
}

body[data-app=front].serene-rebuild .summit-title{
  font-family:"Instrument Serif","Noto Serif SC",serif;
  font-weight:400;
}

body[data-app=front].serene-rebuild .summit-countdown{
  background:linear-gradient(90deg,#fffdf7,#fff8ed 42%,#fffdf7);
}

/* Ticker */
body[data-app=front].serene-rebuild .cinematic-ticker{
  max-width:1280px;
  margin:0 auto 28px;
  border:1px solid rgba(45,72,62,.14);
  background:rgba(255,253,246,.62);
  box-shadow:0 18px 52px rgba(45,72,62,.10);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
}

body[data-app=front].serene-rebuild .cinematic-ticker::before{
  background:linear-gradient(90deg,rgba(255,253,246,.92),transparent);
}

body[data-app=front].serene-rebuild .cinematic-ticker::after{
  background:linear-gradient(270deg,rgba(255,253,246,.92),transparent);
}

body[data-app=front].serene-rebuild .cinematic-ticker b{
  color:var(--serene-red);
}

body[data-app=front].serene-rebuild .cinematic-ticker em{
  color:var(--serene-ink-2);
}

/* Page typography */
body[data-app=front].serene-rebuild .view-panel{
  max-width:1280px;
  margin-inline:auto;
}

body[data-app=front].serene-rebuild .page-context{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin:0 0 20px;
  padding:22px 0 16px;
  border-bottom:1px solid rgba(45,72,62,.18);
}

body[data-app=front].serene-rebuild .page-eyebrow{
  margin:0 0 7px;
  color:var(--serene-red);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
}

body[data-app=front].serene-rebuild .page-context h1{
  margin:0;
  color:var(--serene-ink);
  font-family:"Instrument Serif","Noto Serif SC",serif;
  font-size:clamp(58px,5.8vw,82px);
  font-weight:400;
  line-height:.95;
  letter-spacing:-2.46px;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}

body[data-app=front].serene-rebuild .page-context h1::after{
  background:linear-gradient(90deg,var(--serene-red),rgba(217,52,49,0));
}

body[data-app=front].serene-rebuild .page-context p:not(.page-eyebrow){
  max-width:620px;
  color:var(--serene-ink-2);
  font-size:15px;
  line-height:1.7;
}

body[data-app=front].serene-rebuild .page-context-index{
  color:rgba(45,72,62,.14);
  font-family:"Instrument Serif","Noto Serif SC",serif;
  font-size:84px;
  font-weight:400;
}

/* Product surfaces */
body[data-app=front].serene-rebuild .panel,
body[data-app=front].serene-rebuild .cockpit-panel,
body[data-app=front].serene-rebuild .combat-ring-panel,
body[data-app=front].serene-rebuild .pk-battle-menu,
body[data-app=front].serene-rebuild .pk-duel-stage,
body[data-app=front].serene-rebuild .public-operation-panel,
body[data-app=front].serene-rebuild .calendar-panel{
  color:var(--serene-ink);
  border:1px solid var(--serene-line);
  border-radius:16px;
  background:var(--serene-paper);
  box-shadow:var(--serene-shadow),inset 0 1px rgba(255,255,255,.70);
  backdrop-filter:blur(22px) saturate(124%);
  -webkit-backdrop-filter:blur(22px) saturate(124%);
}

body[data-app=front].serene-rebuild .ranking-panel,
body[data-app=front].serene-rebuild .matrix-panel,
body[data-app=front].serene-rebuild .calendar-panel{
  overflow:hidden;
}

body[data-app=front].serene-rebuild .ranking-table,
body[data-app=front].serene-rebuild .cockpit-table{
  background:rgba(255,253,246,.42);
}

body[data-app=front].serene-rebuild .ranking-table th,
body[data-app=front].serene-rebuild .cockpit-table th{
  background:rgba(233,232,218,.86);
  color:#5a6c62;
  border-bottom-color:var(--serene-line);
  font-size:11px;
  letter-spacing:.06em;
}

body[data-app=front].serene-rebuild .ranking-table td,
body[data-app=front].serene-rebuild .cockpit-table td{
  color:var(--serene-ink-2);
  border-bottom-color:rgba(45,72,62,.11);
}

body[data-app=front].serene-rebuild .ranking-table tbody tr{
  transition:background .22s ease,transform .22s ease;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr:hover,
body[data-app=front].serene-rebuild .cockpit-table tbody tr:hover td{
  background:rgba(255,255,255,.62);
}

body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank{
  background:linear-gradient(90deg,rgba(217,52,49,.10),rgba(255,253,246,.34) 68%);
}

body[data-app=front].serene-rebuild .company-name,
body[data-app=front].serene-rebuild .matrix-company span,
body[data-app=front].serene-rebuild .money-cell,
body[data-app=front].serene-rebuild .progress-value,
body[data-app=front].serene-rebuild .cockpit-table b{
  color:var(--serene-ink);
}

body[data-app=front].serene-rebuild .company-avatar,
body[data-app=front].serene-rebuild .matrix-company img,
body[data-app=front].serene-rebuild .matrix-logo-badge,
body[data-app=front].serene-rebuild .cockpit-bar-logo{
  border-color:rgba(45,72,62,.18);
  border-radius:10px;
  background:#fff;
}

body[data-app=front].serene-rebuild .progress-track,
body[data-app=front].serene-rebuild .combat-track,
body[data-app=front].serene-rebuild .pk-score-track,
body[data-app=front].serene-rebuild .pk-metric-track{
  height:6px;
  background:rgba(45,72,62,.12);
}

body[data-app=front].serene-rebuild .progress-fill,
body[data-app=front].serene-rebuild .combat-track i,
body[data-app=front].serene-rebuild .pk-score-track i,
body[data-app=front].serene-rebuild .pk-metric-track i{
  background:linear-gradient(90deg,var(--serene-green-2),var(--serene-jade));
}

body[data-app=front].serene-rebuild .table-footer,
body[data-app=front].serene-rebuild .calendar-footer{
  color:var(--serene-muted);
  border-top-color:var(--serene-line);
  background:rgba(240,238,226,.64);
}

/* KPI cards: keep four real circular charts, but make them feel product-grade. */
body[data-app=front].serene-rebuild .cockpit-shell{
  display:grid;
  gap:18px;
}

body[data-app=front].serene-rebuild .cockpit-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
  overflow:visible!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}

body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card{
  --metric-accent:var(--serene-green-2);
  position:relative;
  display:grid!important;
  grid-template-rows:1fr auto;
  justify-items:center!important;
  align-items:center!important;
  min-height:218px!important;
  padding:20px 16px 18px!important;
  overflow:hidden;
  border:1px solid var(--serene-line);
  border-radius:18px!important;
  background:
    radial-gradient(circle at 50% 28%,rgba(255,255,255,.92),rgba(255,253,246,.52) 58%,rgba(230,237,226,.70)),
    var(--serene-paper);
  box-shadow:0 20px 64px rgba(45,72,62,.12),inset 0 1px rgba(255,255,255,.78);
}

body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card::before{
  content:"";
  position:absolute;
  inset:auto 18px 0;
  height:3px;
  border-radius:999px 999px 0 0;
  background:linear-gradient(90deg,transparent,var(--metric-accent),transparent);
}

body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card::after,
body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card>i{
  content:none!important;
  display:none!important;
}

body[data-app=front].serene-rebuild .metric-ring-card.metric-blue{--metric-accent:#3f7568;}
body[data-app=front].serene-rebuild .metric-ring-card.metric-cyan{--metric-accent:#6b9d8f;}
body[data-app=front].serene-rebuild .metric-ring-card.metric-indigo{--metric-accent:#d49a48;}
body[data-app=front].serene-rebuild .metric-ring-card.metric-red{--metric-accent:#d93431;}

body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring{
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  width:148px!important;
  min-width:148px!important;
  max-width:148px!important;
  height:148px!important;
  aspect-ratio:1!important;
  border-radius:50%!important;
  background:
    conic-gradient(var(--metric-accent) 0 var(--metric-progress),rgba(45,72,62,.12) var(--metric-progress) 360deg)!important;
  box-shadow:0 16px 34px rgba(45,72,62,.14),inset 0 0 0 1px rgba(255,255,255,.52)!important;
}

body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring::before{
  content:""!important;
  position:absolute!important;
  inset:12px!important;
  display:block!important;
  border-radius:50%!important;
  background:linear-gradient(180deg,#fffdf7,#edf1e8)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.94),inset 0 0 0 1px rgba(45,72,62,.10)!important;
}

body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring-core{
  position:relative!important;
  z-index:1!important;
  display:grid!important;
  place-items:center!important;
  width:106px!important;
  height:106px!important;
  text-align:center!important;
}

body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring-core strong{
  display:block!important;
  color:var(--serene-ink)!important;
  font-family:"Inter","Microsoft YaHei UI",system-ui,sans-serif!important;
  font-size:30px!important;
  font-weight:800!important;
  letter-spacing:-.04em!important;
  line-height:1!important;
}

body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring-core span{
  display:block!important;
  margin:7px 0 0!important;
  color:var(--serene-ink-2)!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1.2!important;
  white-space:normal!important;
}

body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card footer{
  display:grid!important;
  gap:4px!important;
  justify-items:center!important;
  width:100%!important;
  max-width:none!important;
  color:var(--serene-muted)!important;
  text-align:center!important;
}

body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card footer b{
  color:var(--serene-ink)!important;
  font-size:18px!important;
  font-weight:800!important;
}

body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card footer span{
  color:var(--serene-muted)!important;
  font-size:12px!important;
}

body[data-app=front].serene-rebuild .cockpit-main-grid{
  grid-template-columns:minmax(0,1fr) 340px;
  gap:18px;
}

body[data-app=front].serene-rebuild .cockpit-bar-row{
  margin:0;
  border-bottom-color:rgba(45,72,62,.10);
  background:transparent;
}

body[data-app=front].serene-rebuild .combat-rank{
  background:rgba(217,52,49,.10);
  color:var(--serene-red);
}

body[data-app=front].serene-rebuild .rank-1{background:#ffe4ac;color:#7a4306;}
body[data-app=front].serene-rebuild .rank-2{background:#e8eee8;color:#56665e;}
body[data-app=front].serene-rebuild .rank-3{background:#f0d3b0;color:#774b20;}

body[data-app=front].serene-rebuild .cockpit-company-block label,
body[data-app=front].serene-rebuild .cockpit-bar-row>strong{
  color:var(--serene-ink);
}

body[data-app=front].serene-rebuild .cockpit-company-block small em{
  background:rgba(45,72,62,.08);
  color:var(--serene-muted);
}

body[data-app=front].serene-rebuild .combat-ring-panel{
  background:
    radial-gradient(circle at 50% 37%,rgba(255,255,255,.96),rgba(236,241,232,.70) 70%),
    var(--serene-paper);
}

body[data-app=front].serene-rebuild .command-ring{
  background:conic-gradient(var(--serene-red) 0 var(--ring-progress),rgba(217,52,49,.12) var(--ring-progress) 360deg);
  box-shadow:0 0 0 12px rgba(217,52,49,.08),0 24px 54px rgba(45,72,62,.14);
}

body[data-app=front].serene-rebuild .command-ring::before{
  background:var(--serene-paper-strong);
  box-shadow:inset 0 0 0 1px rgba(45,72,62,.12);
}

body[data-app=front].serene-rebuild .ring-core span,
body[data-app=front].serene-rebuild .ring-core p,
body[data-app=front].serene-rebuild .ring-foot{
  color:var(--serene-muted);
}

body[data-app=front].serene-rebuild .ring-core strong,
body[data-app=front].serene-rebuild .ring-foot b{
  color:var(--serene-ink);
}

/* PK */
body[data-app=front].serene-rebuild .pk-screen{
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:18px;
}

body[data-app=front].serene-rebuild .pk-battle-menu{
  align-self:start;
  background:rgba(30,77,67,.84);
  color:var(--serene-cream);
}

body[data-app=front].serene-rebuild .pk-battle-menu-title{
  border-bottom-color:rgba(255,246,229,.18);
}

body[data-app=front].serene-rebuild .pk-battle-menu-title strong,
body[data-app=front].serene-rebuild .pk-battle-tab small{
  color:rgba(255,246,229,.66);
}

body[data-app=front].serene-rebuild .pk-battle-menu-title b,
body[data-app=front].serene-rebuild .pk-battle-tab>span:first-child{
  color:#ffd28e;
}

body[data-app=front].serene-rebuild .pk-battle-tab{
  color:var(--serene-cream);
  border-radius:12px;
}

body[data-app=front].serene-rebuild .pk-battle-tab:hover{
  background:rgba(255,246,229,.10);
}

body[data-app=front].serene-rebuild .pk-battle-tab.is-active{
  background:rgba(217,52,49,.30);
}

body[data-app=front].serene-rebuild .pk-battle-tab>span:first-child{
  background:rgba(255,246,229,.14);
  box-shadow:inset 0 0 0 1px rgba(255,246,229,.20);
}

body[data-app=front].serene-rebuild .pk-duel-card,
body[data-app=front].serene-rebuild .pk-telemetry-card,
body[data-app=front].serene-rebuild .pk-stat-chip,
body[data-app=front].serene-rebuild .pk-duel-info-grid article{
  border-color:var(--serene-line);
  border-radius:14px;
  background:rgba(255,253,246,.78);
}

body[data-app=front].serene-rebuild .pk-duel-card{
  border-top:3px solid var(--serene-green-2);
}

body[data-app=front].serene-rebuild .pk-duel-card.right{
  border-top-color:var(--serene-red);
}

body[data-app=front].serene-rebuild .pk-duel-company h2,
body[data-app=front].serene-rebuild .pk-duel-score strong,
body[data-app=front].serene-rebuild .pk-stage-header h1,
body[data-app=front].serene-rebuild .pk-stat-chip strong,
body[data-app=front].serene-rebuild .pk-duel-info-grid strong{
  color:var(--serene-ink);
}

body[data-app=front].serene-rebuild .pk-battle-menu-title b,
body[data-app=front].serene-rebuild .pk-metric-line strong,
body[data-app=front].serene-rebuild .pk-telemetry-card header strong,
body[data-app=front].serene-rebuild .pk-duel-score b{
  color:var(--serene-red);
}

body[data-app=front].serene-rebuild .pk-radar-gauge{
  background:conic-gradient(var(--serene-red) 0 var(--pk-gauge),rgba(217,52,49,.12) var(--pk-gauge) 360deg);
}

body[data-app=front].serene-rebuild .pk-radar-gauge::before{
  background:#fffdf7;
  box-shadow:inset 0 0 0 1px rgba(45,72,62,.10);
}

body[data-app=front].serene-rebuild .pk-radar-gauge strong{
  color:var(--serene-ink);
}

body[data-app=front].serene-rebuild .pk-radar-gauge small{
  color:var(--serene-muted);
}

body[data-app=front].serene-rebuild .pk-versus-core{
  color:var(--serene-red);
  border-color:rgba(217,52,49,.28);
  background:rgba(255,253,246,.76);
  box-shadow:0 12px 34px rgba(45,72,62,.12);
}

/* Duty calendar */
body[data-app=front].serene-rebuild .calendar-toolbar{
  border-bottom-color:var(--serene-line);
  background:rgba(255,253,246,.54);
}

body[data-app=front].serene-rebuild .calendar-toolbar-title small,
body[data-app=front].serene-rebuild .calendar-toolbar-summary,
body[data-app=front].serene-rebuild .calendar-weekdays span,
body[data-app=front].serene-rebuild .calendar-day.is-outside>header time,
body[data-app=front].serene-rebuild .calendar-modal-record span{
  color:var(--serene-muted);
}

body[data-app=front].serene-rebuild .calendar-toolbar-title strong,
body[data-app=front].serene-rebuild .calendar-day>header time,
body[data-app=front].serene-rebuild .calendar-modal-header h2,
body[data-app=front].serene-rebuild .calendar-modal-record strong{
  color:var(--serene-ink);
}

body[data-app=front].serene-rebuild .calendar-toolbar-title svg,
body[data-app=front].serene-rebuild .calendar-icon,
body[data-app=front].serene-rebuild .calendar-toolbar-summary b,
body[data-app=front].serene-rebuild .calendar-day>header span,
body[data-app=front].serene-rebuild .calendar-more{
  color:var(--serene-red);
}

body[data-app=front].serene-rebuild .calendar-summary-stat{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  white-space:nowrap;
}

body[data-app=front].serene-rebuild .calendar-weekdays{
  background:rgba(233,232,218,.78);
  border-bottom-color:var(--serene-line);
}

body[data-app=front].serene-rebuild .calendar-day{
  border-color:rgba(45,72,62,.12);
  background:rgba(255,253,246,.54);
}

body[data-app=front].serene-rebuild .calendar-day.is-outside{
  background:rgba(235,238,226,.48);
}

body[data-app=front].serene-rebuild .calendar-day.is-today>header time{
  color:#fff;
  background:var(--serene-red);
}

body[data-app=front].serene-rebuild .calendar-event{
  color:var(--serene-ink);
  background:rgba(30,77,67,.10);
}

body[data-app=front].serene-rebuild .calendar-day.has-events{
  cursor:pointer;
}

body[data-app=front].serene-rebuild .calendar-event-action{
  width:100%;
  border:0;
  appearance:none;
  -webkit-appearance:none;
  font:inherit;
  cursor:pointer;
  text-align:center;
}

body[data-app=front].serene-rebuild .calendar-event-action:focus-visible{
  outline:2px solid rgba(76,145,174,.62);
  outline-offset:2px;
}

body[data-app=front].serene-rebuild .calendar-event::before{
  background:var(--serene-red);
}

body[data-app=front].serene-rebuild .calendar-step,
body[data-app=front].serene-rebuild .calendar-today-button,
body[data-app=front].serene-rebuild .calendar-month-picker,
body[data-app=front].serene-rebuild .calendar-modal-close{
  color:var(--serene-ink);
  border-color:var(--serene-line);
  background:rgba(255,255,255,.54);
}

body[data-app=front].serene-rebuild .calendar-month-picker input{
  color:var(--serene-ink);
}

body[data-app=front].serene-rebuild .calendar-day-modal{
  position:fixed;
  inset:0;
  z-index:120;
  display:grid;
  place-items:center;
  padding:clamp(14px,3vw,32px);
}

body[data-app=front].serene-rebuild .calendar-day-modal[hidden]{
  display:none!important;
}

body[data-app=front].serene-rebuild .calendar-modal-backdrop{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:rgba(27,48,42,.32);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

body[data-app=front].serene-rebuild .calendar-modal-dialog{
  position:relative;
  z-index:1;
  width:min(560px,calc(100vw - 28px));
  max-height:min(680px,calc(100dvh - 28px));
  overflow:auto;
  border-color:var(--serene-line);
  background:rgba(255,253,247,.94);
  backdrop-filter:blur(22px) saturate(1.15);
  -webkit-backdrop-filter:blur(22px) saturate(1.15);
  box-shadow:0 30px 90px rgba(23,48,56,.22), 0 0 0 1px rgba(255,255,255,.64) inset;
}

body[data-app=front].serene-rebuild .calendar-modal-record{
  border-color:var(--serene-line);
  background:#fffdf7;
}

/* Motion polish */
body[data-app=front].serene-rebuild .view-panel.is-active .page-context,
body[data-app=front].serene-rebuild .view-panel.is-active .cockpit-kpis,
body[data-app=front].serene-rebuild .view-panel.is-active .ranking-panel,
body[data-app=front].serene-rebuild .view-panel.is-active .pk-screen,
body[data-app=front].serene-rebuild .view-panel.is-active .calendar-panel{
  animation:serene-fade-rise .72s cubic-bezier(.23,1,.32,1) both;
}

@keyframes serene-video-pan{
  from{transform:scale(1.08) translate3d(-1.6%,0,0);}
  to{transform:scale(1.14) translate3d(1.8%,-1.2%,0);}
}

@keyframes serene-mist{
  from{transform:translateX(-8%) scaleX(1);}
  to{transform:translateX(8%) scaleX(1.08);}
}

@keyframes serene-fade-rise{
  from{opacity:0;transform:translateY(20px);filter:blur(8px);}
  to{opacity:1;transform:translateY(0);filter:blur(0);}
}

@media(max-width:1279px){
  body[data-app=front].serene-rebuild .page-content{
    padding:20px 24px 48px;
  }

  body[data-app=front].serene-rebuild .cockpit-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  body[data-app=front].serene-rebuild .cockpit-main-grid,
  body[data-app=front].serene-rebuild .pk-screen{
    grid-template-columns:1fr;
  }
}

@media(max-width:767px){
  body[data-app=front].serene-rebuild .cinematic-bg-video{
    opacity:.32;
  }

  body[data-app=front].serene-rebuild .page-content{
    padding:74px 12px 34px;
  }

  body[data-app=front].serene-rebuild .mobile-menu{
    position:fixed;
    z-index:25;
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    border:1px solid rgba(255,246,229,.28);
    border-radius:999px;
    color:var(--serene-cream);
    background:rgba(30,77,67,.82);
    box-shadow:0 14px 36px rgba(27,48,42,.20);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }

  body[data-app=front].serene-rebuild .sidebar{
    width:286px;
    background:rgba(25,53,45,.94);
  }

  body[data-app=front].serene-rebuild .page-context{
    gap:12px;
    padding:4px 0 12px;
    margin-bottom:16px;
  }

  body[data-app=front].serene-rebuild .page-context h1{
    font-size:48px;
  }

  body[data-app=front].serene-rebuild .page-context p:not(.page-eyebrow){
    max-width:320px;
    font-size:13px;
  }

  body[data-app=front].serene-rebuild .page-context-index{
    font-size:58px;
  }

  body[data-app=front].serene-rebuild .summit-banner-wrap{
    border-radius:18px;
  }

  body[data-app=front].serene-rebuild .cinematic-ticker{
    margin-bottom:18px;
  }

  body[data-app=front].serene-rebuild .cockpit-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }

  body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card{
    min-height:180px!important;
    padding:14px 8px 12px!important;
    border-radius:16px!important;
  }

  body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring{
    width:104px!important;
    min-width:104px!important;
    max-width:104px!important;
    height:104px!important;
  }

  body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring::before{
    inset:10px!important;
  }

  body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring-core{
    width:78px!important;
    height:78px!important;
  }

  body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring-core strong{
    font-size:23px!important;
  }

  body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring-core span{
    font-size:10px!important;
  }

  body[data-app=front].serene-rebuild .cockpit-bar-row{
    grid-template-columns:30px 36px minmax(0,1fr) 48px;
  }

  body[data-app=front].serene-rebuild .cockpit-bar-row>.combat-track{
    display:none;
  }

  body[data-app=front].serene-rebuild .pk-battle-tabs{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  body[data-app=front].serene-rebuild .calendar-toolbar{
    grid-template-columns:1fr!important;
    gap:12px;
    overflow:visible;
  }

  body[data-app=front].serene-rebuild .calendar-toolbar-title,
  body[data-app=front].serene-rebuild .calendar-toolbar-summary,
  body[data-app=front].serene-rebuild .calendar-controls{
    grid-column:1/-1;
    width:100%;
    min-width:0;
  }

  body[data-app=front].serene-rebuild .calendar-toolbar-summary{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px 10px;
  }

  body[data-app=front].serene-rebuild .calendar-summary-stat{
    min-width:96px;
  }

  body[data-app=front].serene-rebuild .calendar-controls{
    display:grid;
    grid-template-columns:38px minmax(0,1fr) 38px auto;
    gap:8px;
    overflow:visible;
    padding-bottom:0;
    white-space:normal;
  }

  body[data-app=front].serene-rebuild .calendar-step,
  body[data-app=front].serene-rebuild .calendar-today-button,
  body[data-app=front].serene-rebuild .calendar-month-picker{
    height:38px;
  }

  body[data-app=front].serene-rebuild .calendar-month-picker{
    min-width:0;
    width:100%;
    padding:0 10px;
  }

  body[data-app=front].serene-rebuild .calendar-month-picker span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  body[data-app=front].serene-rebuild .calendar-month-picker input{
    width:96px;
    min-width:82px;
  }

  body[data-app=front].serene-rebuild .calendar-today-button{
    min-width:84px;
    padding:0 10px;
  }

  body[data-app=front].serene-rebuild .calendar-weekdays,
  body[data-app=front].serene-rebuild .calendar-grid{
    min-width:0!important;
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
  }

  body[data-app=front].serene-rebuild .calendar-weekdays span{
    padding:8px 2px;
    font-size:9px;
  }

  body[data-app=front].serene-rebuild .calendar-day{
    min-height:86px;
    padding:6px 3px;
  }

  body[data-app=front].serene-rebuild .calendar-day>header time{
    width:22px;
    height:22px;
    font-size:10px;
  }

  body[data-app=front].serene-rebuild .calendar-day>header span{
    display:none;
  }

  body[data-app=front].serene-rebuild .calendar-events{
    gap:3px;
    margin-top:5px;
  }

  body[data-app=front].serene-rebuild .calendar-event{
    min-height:28px;
    padding:3px;
  }

  body[data-app=front].serene-rebuild .calendar-event::before{
    display:none;
  }

  body[data-app=front].serene-rebuild .calendar-event .calendar-logo,
  body[data-app=front].serene-rebuild .calendar-event .calendar-logo-badge{
    max-width:38px;
    max-height:24px;
  }

  body[data-app=front].serene-rebuild .intro-chip{
    display:none;
  }

  body[data-app=front].serene-rebuild .intro-brand{
    gap:8px;
  }

  body[data-app=front].serene-rebuild .intro-brand strong{
    font-size:76px;
  }

  body[data-app=front].serene-rebuild .intro-brand em{
    font-size:42px;
  }
}

@media(max-width:390px){
  body[data-app=front].serene-rebuild .cockpit-kpis{
    gap:8px!important;
  }

  body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card{
    min-height:166px!important;
    padding-left:6px!important;
    padding-right:6px!important;
  }

  body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring{
    width:92px!important;
    min-width:92px!important;
    max-width:92px!important;
    height:92px!important;
  }

  body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring-core{
    width:66px!important;
    height:66px!important;
  }

  body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring-core strong{
    font-size:20px!important;
  }

  body[data-app=front].serene-rebuild .calendar-controls{
    grid-template-columns:38px minmax(0,1fr) 38px;
  }

  body[data-app=front].serene-rebuild .calendar-today-button{
    grid-column:1/-1;
    width:100%;
  }

  body[data-app=front].serene-rebuild .calendar-day{
    min-height:78px;
  }
}

/* Pastel glass adjustment: light red + light blue transparent neumorphism. */
body[data-app=front].serene-rebuild{
  --glass-red:rgba(255,116,128,.30);
  --glass-red-strong:rgba(235,78,88,.52);
  --glass-blue:rgba(143,202,255,.32);
  --glass-blue-strong:rgba(74,157,225,.46);
  --glass-white:rgba(255,255,255,.52);
  --glass-line:rgba(116,150,178,.22);
  --glass-shadow:0 24px 70px rgba(103,134,160,.18),inset 0 1px rgba(255,255,255,.68);
}

body[data-app=front].serene-rebuild .workspace{
  background:
    radial-gradient(720px 420px at 20% 8%,rgba(255,118,133,.16),transparent 70%),
    radial-gradient(760px 460px at 88% 18%,rgba(130,198,255,.22),transparent 74%),
    linear-gradient(180deg,rgba(249,253,255,.62),rgba(244,249,251,.78) 50%,rgba(241,247,248,.86));
}

body[data-app=front].serene-rebuild .sidebar{
  color:#21323a;
  border-right:1px solid rgba(255,255,255,.46);
  background:
    linear-gradient(150deg,rgba(255,255,255,.58),rgba(255,222,226,.34) 38%,rgba(205,232,255,.44)),
    rgba(246,250,255,.58);
  box-shadow:18px 0 70px rgba(108,143,171,.18),inset -1px 0 rgba(255,255,255,.52);
  backdrop-filter:blur(26px) saturate(145%);
  -webkit-backdrop-filter:blur(26px) saturate(145%);
}

body[data-app=front].serene-rebuild .sidebar::before{
  background:
    radial-gradient(circle at 26% 10%,rgba(255,127,140,.32),transparent 38%),
    radial-gradient(circle at 78% 16%,rgba(118,193,255,.32),transparent 36%),
    linear-gradient(180deg,rgba(255,255,255,.28),transparent);
}

body[data-app=front].serene-rebuild .brand-block{
  border-bottom-color:rgba(116,150,178,.22);
}

body[data-app=front].serene-rebuild .brand-block strong{
  color:#243942;
}

body[data-app=front].serene-rebuild .nav-menu{
  width:100%;
  gap:10px;
}

body[data-app=front].serene-rebuild .nav-item{
  width:100%;
  min-height:56px;
  justify-content:flex-start;
  padding:0 18px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:999px;
  color:#36505a;
  background:
    linear-gradient(135deg,rgba(255,255,255,.52),rgba(219,238,255,.24)),
    rgba(255,255,255,.34);
  box-shadow:10px 12px 28px rgba(104,135,164,.12),inset 0 1px rgba(255,255,255,.78),inset 0 -1px rgba(116,150,178,.12);
  font-size:16px;
  font-weight:700;
}

body[data-app=front].serene-rebuild .nav-item svg{
  color:#d94b56;
}

body[data-app=front].serene-rebuild .nav-item:hover{
  color:#1f343c;
  border-color:rgba(255,132,145,.34);
  background:
    linear-gradient(135deg,rgba(255,236,238,.64),rgba(221,240,255,.42)),
    rgba(255,255,255,.48);
  transform:translateX(0) translateY(-1px);
}

body[data-app=front].serene-rebuild .nav-item.is-active{
  color:#162f3a;
  border-color:rgba(255,116,128,.48);
  background:
    linear-gradient(135deg,rgba(255,138,150,.48),rgba(155,211,255,.44)),
    rgba(255,255,255,.52);
  box-shadow:0 18px 42px rgba(219,86,101,.18),0 18px 46px rgba(93,158,214,.16),inset 0 1px rgba(255,255,255,.78);
}

body[data-app=front].serene-rebuild .nav-item.is-active::before{
  content:none!important;
  display:none!important;
}

body[data-app=front].serene-rebuild .nav-item.is-active::after{
  content:"";
  position:absolute;
  inset:1px;
  z-index:0;
  border-radius:999px;
  background:linear-gradient(120deg,rgba(255,255,255,.42),rgba(255,255,255,.04) 50%,rgba(255,255,255,.24));
}

body[data-app=front].serene-rebuild .season-card{
  color:#3c5862;
  border-color:rgba(255,255,255,.46);
  background:linear-gradient(145deg,rgba(255,255,255,.48),rgba(219,238,255,.26));
  box-shadow:10px 14px 36px rgba(104,135,164,.12),inset 0 1px rgba(255,255,255,.72);
}

body[data-app=front].serene-rebuild .season-card svg,
body[data-app=front].serene-rebuild .season-card strong{
  color:#d94b56;
}

body[data-app=front].serene-rebuild .view-panel{
  padding-top:16px;
}

body[data-app=front].serene-rebuild .page-context,
body[data-app=front].serene-rebuild .cockpit-bottom-grid,
body[data-app=front].serene-rebuild .pk-telemetry-grid,
body[data-app=front].serene-rebuild .pk-duel-info-grid{
  display:none!important;
}

body[data-app=front].serene-rebuild .panel,
body[data-app=front].serene-rebuild .cockpit-panel,
body[data-app=front].serene-rebuild .combat-ring-panel,
body[data-app=front].serene-rebuild .pk-battle-menu,
body[data-app=front].serene-rebuild .pk-duel-stage,
body[data-app=front].serene-rebuild .public-operation-panel,
body[data-app=front].serene-rebuild .calendar-panel,
body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card,
body[data-app=front].serene-rebuild .pk-duel-card,
body[data-app=front].serene-rebuild .pk-stat-chip,
body[data-app=front].serene-rebuild .pk-telemetry-card{
  border-color:var(--glass-line);
  background:
    radial-gradient(circle at 18% 0,rgba(255,135,148,.14),transparent 48%),
    radial-gradient(circle at 88% 0,rgba(135,203,255,.16),transparent 54%),
    rgba(255,255,255,.50);
  box-shadow:var(--glass-shadow);
}

body[data-app=front].serene-rebuild .pk-battle-menu{
  color:#1f343c;
  background:
    linear-gradient(145deg,rgba(255,224,228,.62),rgba(219,238,255,.50)),
    rgba(255,255,255,.48);
}

body[data-app=front].serene-rebuild .pk-battle-menu-title{
  border-bottom-color:rgba(116,150,178,.18);
}

body[data-app=front].serene-rebuild .pk-battle-menu-title strong,
body[data-app=front].serene-rebuild .pk-battle-tab small{
  color:#68808a;
}

body[data-app=front].serene-rebuild .pk-battle-tab{
  color:#253c45;
  border-radius:999px;
}

body[data-app=front].serene-rebuild .pk-battle-tab.is-active{
  background:linear-gradient(135deg,rgba(255,116,128,.36),rgba(143,202,255,.34));
}

body[data-app=front].serene-rebuild .ranking-table th,
body[data-app=front].serene-rebuild .cockpit-table th,
body[data-app=front].serene-rebuild .calendar-weekdays{
  background:rgba(226,241,252,.50);
}

body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank{
  background:linear-gradient(90deg,rgba(255,116,128,.14),rgba(143,202,255,.10),rgba(255,255,255,.16));
}

@media(min-width:768px) and (max-width:1279px){
  :root{
    --sidebar-w:218px;
  }

  body[data-app=front].serene-rebuild .sidebar{
    align-items:stretch;
    padding:16px 12px;
  }

  body[data-app=front].serene-rebuild .brand-block{
    justify-content:flex-start;
  }

  body[data-app=front].serene-rebuild .brand-block strong,
  body[data-app=front].serene-rebuild .season-card strong,
  body[data-app=front].serene-rebuild .season-card span{
    display:block;
  }

  body[data-app=front].serene-rebuild .season-card{
    width:auto;
    min-height:0;
    padding:14px 12px;
    place-items:initial;
  }

  body[data-app=front].serene-rebuild .season-card svg{
    grid-row:span 2;
  }
}

@media(max-width:1279px){
  body[data-app=front].serene-rebuild .nav-item{
    justify-content:flex-start;
    padding:0 14px;
    border-radius:999px;
  }

  body[data-app=front].serene-rebuild .nav-item span{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

@media(max-width:767px){
  body[data-app=front].serene-rebuild .sidebar{
    background:
      linear-gradient(150deg,rgba(255,255,255,.70),rgba(255,222,226,.46) 40%,rgba(205,232,255,.56)),
      rgba(246,250,255,.76);
  }

  body[data-app=front].serene-rebuild .mobile-menu{
    color:#243942;
    border-color:rgba(255,255,255,.58);
    background:
      linear-gradient(135deg,rgba(255,226,230,.76),rgba(214,237,255,.70)),
      rgba(255,255,255,.62);
    box-shadow:0 14px 36px rgba(104,135,164,.18),inset 0 1px rgba(255,255,255,.82);
  }

  body[data-app=front].serene-rebuild .nav-item{
    justify-content:flex-start;
    padding:0 18px;
    min-height:56px;
  }

  body[data-app=front].serene-rebuild .view-panel{
    padding-top:12px;
  }
}

@media(prefers-reduced-motion:reduce){
  body[data-app=front].serene-rebuild *,
  body[data-app=front].serene-rebuild *::before,
  body[data-app=front].serene-rebuild *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
  }

  body[data-app=front].serene-rebuild .cinematic-ticker-track{
    transform:none!important;
  }
}

/* Top navigation + full-screen workspace + void atmosphere background. */
body[data-app=front].serene-rebuild{
  --top-nav-height:76px;
  --void-red:rgba(242,64,50,.34);
  --void-blue:rgba(159,214,255,.28);
  background:#eef5f7;
}

body[data-app=front].serene-rebuild::before{
  background:
    linear-gradient(180deg,rgba(246,251,253,.78),rgba(238,247,250,.70) 48%,rgba(235,243,245,.88)),
    radial-gradient(760px 460px at 18% 0,rgba(255,118,128,.28),transparent 70%),
    radial-gradient(860px 520px at 86% 6%,rgba(143,202,255,.32),transparent 70%);
}

body[data-app=front].serene-rebuild .cinematic-bg{
  background:#f7fbfd url("media/void-atmosphere.png") center/cover no-repeat;
}

body[data-app=front].serene-rebuild .cinematic-bg::before,
body[data-app=front].serene-rebuild .cinematic-bg::after{
  content:"";
  position:absolute;
  z-index:2;
  pointer-events:none;
}

body[data-app=front].serene-rebuild .cinematic-bg::before{
  inset:0;
  opacity:.12;
  background:
    linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:72px 72px;
  mix-blend-mode:screen;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.56),transparent 76%);
}

body[data-app=front].serene-rebuild .cinematic-bg::after{
  inset:0;
  background:
    radial-gradient(760px 500px at 9% -5%,rgba(255,255,255,.64),transparent 64%),
    radial-gradient(860px 540px at 92% 0,rgba(166,217,255,.58),transparent 70%),
    linear-gradient(180deg,rgba(248,252,253,.72),rgba(241,249,251,.76) 36%,rgba(239,247,249,.92));
}

body[data-app=front].serene-rebuild .cinematic-bg-video{
  display:none;
}

body[data-app=front].serene-rebuild .cinematic-bg-veil{
  z-index:3;
  background:
    radial-gradient(680px 340px at 32% 0,rgba(255,210,218,.38),transparent 70%),
    radial-gradient(780px 420px at 78% 0,rgba(177,223,255,.38),transparent 72%),
    linear-gradient(180deg,rgba(248,252,253,.44),rgba(241,248,250,.76) 68%,rgba(238,246,248,.92));
}

body[data-app=front].serene-rebuild .app-shell{
  min-height:100dvh;
}

body[data-app=front].serene-rebuild .sidebar{
  position:fixed;
  inset:14px 18px auto 18px;
  z-index:45;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  width:auto;
  height:var(--top-nav-height);
  padding:10px 14px;
  overflow:visible;
  color:#21323a;
  border:1px solid rgba(255,255,255,.54);
  border-radius:28px;
  background:
    linear-gradient(135deg,rgba(255,236,239,.64),rgba(220,240,255,.55)),
    rgba(255,255,255,.50);
  box-shadow:0 24px 70px rgba(102,135,160,.18),inset 0 1px rgba(255,255,255,.78),inset 0 -1px rgba(118,150,178,.12);
  transform:none!important;
  backdrop-filter:blur(28px) saturate(150%);
  -webkit-backdrop-filter:blur(28px) saturate(150%);
}

body[data-app=front].serene-rebuild .sidebar::before{
  inset:0;
  height:auto;
  border-radius:inherit;
  background:
    radial-gradient(circle at 11% 14%,rgba(255,122,132,.30),transparent 32%),
    radial-gradient(circle at 88% 18%,rgba(136,203,255,.36),transparent 36%),
    linear-gradient(180deg,rgba(255,255,255,.38),transparent);
}

body[data-app=front].serene-rebuild .brand-block{
  width:auto;
  min-height:0;
  margin:0;
  padding:0 18px 0 0;
  border-right:1px solid rgba(116,150,178,.22);
  border-bottom:0;
}

body[data-app=front].serene-rebuild .brand-block img{
  width:42px;
  height:42px;
  border-radius:14px;
  box-shadow:0 10px 28px rgba(95,133,164,.16),inset 0 1px rgba(255,255,255,.72);
}

body[data-app=front].serene-rebuild .brand-block strong{
  display:block;
  color:#233942;
  font-family:"Noto Serif SC","Songti SC",serif;
  font-size:22px;
  font-weight:700;
  letter-spacing:-.08em;
  white-space:nowrap;
}

body[data-app=front].serene-rebuild .nav-menu{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  gap:10px;
  padding:0 14px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
}

body[data-app=front].serene-rebuild .nav-menu::-webkit-scrollbar{
  display:none;
}

body[data-app=front].serene-rebuild .nav-item{
  flex:0 0 auto;
  width:auto;
  min-width:142px;
  min-height:50px;
  justify-content:center;
  padding:0 18px;
  border-radius:999px;
  white-space:nowrap;
}

body[data-app=front].serene-rebuild .nav-item svg,
body[data-app=front].serene-rebuild .nav-item span{
  position:relative;
  z-index:1;
}

body[data-app=front].serene-rebuild .season-card{
  display:grid;
  grid-template-columns:18px auto;
  align-items:center;
  min-width:176px;
  height:50px;
  margin:0;
  padding:8px 14px;
  border-radius:20px;
}

body[data-app=front].serene-rebuild .season-card svg{
  grid-row:span 2;
}

body[data-app=front].serene-rebuild .season-card strong,
body[data-app=front].serene-rebuild .season-card span{
  display:block;
}

body[data-app=front].serene-rebuild .season-card span{
  font-size:11px;
  line-height:1.15;
}

body[data-app=front].serene-rebuild .workspace{
  min-height:100dvh;
  margin-left:0;
  background:
    radial-gradient(780px 420px at 19% 3%,rgba(255,132,145,.20),transparent 68%),
    radial-gradient(820px 460px at 86% 2%,rgba(140,205,255,.24),transparent 70%),
    linear-gradient(180deg,rgba(249,253,255,.52),rgba(240,248,250,.76) 54%,rgba(236,245,247,.92));
}

body[data-app=front].serene-rebuild .page-content{
  width:100%;
  max-width:none;
  min-height:100dvh;
  margin:0;
  padding:108px clamp(16px,2.4vw,34px) 64px;
}

body[data-app=front].serene-rebuild .view-panel{
  width:100%;
  max-width:none;
  margin:0;
}

body[data-app=front].serene-rebuild .summit-banner-wrap,
body[data-app=front].serene-rebuild .cinematic-ticker,
body[data-app=front].serene-rebuild .board-layout,
body[data-app=front].serene-rebuild .cockpit-shell,
body[data-app=front].serene-rebuild .pk-screen,
body[data-app=front].serene-rebuild .public-operation-mount{
  width:100%;
  max-width:none;
}

body[data-app=front].serene-rebuild .sidebar-overlay,
body[data-app=front].serene-rebuild .mobile-menu{
  display:none!important;
}

/* Opener typography and cinematic accents. */
body[data-app=front].serene-rebuild .serene-intro{
  background:#d61c16 url("media/void-atmosphere.png") center/cover no-repeat;
  overflow:hidden;
}

body[data-app=front].serene-rebuild .serene-intro::before,
body[data-app=front].serene-rebuild .serene-intro::after{
  content:"";
  position:absolute;
  z-index:2;
  pointer-events:none;
  opacity:.28;
  background-repeat:no-repeat;
  background-size:contain;
  filter:saturate(1.15) contrast(1.08);
  mix-blend-mode:screen;
}

body[data-app=front].serene-rebuild .serene-intro::before{
  left:-9vw;
  top:-13vh;
  width:min(720px,48vw);
  height:min(620px,52vh);
  background-image:url("media/void-hand-left.png");
  animation:void-float-left 12s ease-in-out infinite;
}

body[data-app=front].serene-rebuild .serene-intro::after{
  right:-10vw;
  bottom:-12vh;
  width:min(660px,44vw);
  height:min(520px,46vh);
  background-image:url("media/void-hand-right.png");
  animation:void-float-right 14s ease-in-out infinite;
}

body[data-app=front].serene-rebuild .intro-video{
  opacity:.20;
  filter:saturate(1.05) contrast(1.05) brightness(.72);
  mix-blend-mode:multiply;
}

body[data-app=front].serene-rebuild .intro-wash{
  background:
    linear-gradient(90deg,rgba(20,16,18,.42),rgba(20,16,18,.06) 42%,rgba(20,16,18,.38)),
    radial-gradient(760px 420px at 50% 42%,rgba(255,236,228,.18),transparent 70%),
    linear-gradient(180deg,rgba(86,8,10,.16),rgba(86,8,10,.08) 44%,rgba(21,28,34,.46));
}

body[data-app=front].serene-rebuild .intro-grid{
  opacity:.10;
  background:
    linear-gradient(rgba(255,246,229,.20) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,246,229,.16) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(circle at 50% 48%,#000 0,rgba(0,0,0,.72) 42%,transparent 78%);
}

body[data-app=front].serene-rebuild .intro-panel{
  width:min(820px,calc(100vw - 44px));
}

body[data-app=front].serene-rebuild .intro-brand{
  position:relative;
  gap:18px;
  letter-spacing:0;
  line-height:.92;
  text-shadow:0 24px 80px rgba(60,0,0,.36),0 0 26px rgba(255,232,214,.30);
}

body[data-app=front].serene-rebuild .intro-brand::after{
  content:"";
  position:absolute;
  left:50%;
  top:52%;
  width:min(760px,88vw);
  height:2px;
  transform:translate(-50%,-50%);
  background:linear-gradient(90deg,transparent,rgba(255,200,116,.64),rgba(255,255,255,.72),rgba(255,200,116,.64),transparent);
  box-shadow:0 0 28px rgba(255,198,116,.42);
  animation:void-light-sweep 2.9s ease-in-out infinite;
}

body[data-app=front].serene-rebuild .intro-brand strong{
  color:#ff8d21;
  font-family:"Playfair Display","Times New Roman",serif;
  font-size:clamp(92px,13vw,184px);
  font-style:italic;
  font-weight:700;
  letter-spacing:-.08em;
  text-shadow:0 0 16px rgba(255,151,56,.46),0 18px 64px rgba(0,0,0,.34);
}

body[data-app=front].serene-rebuild .intro-brand em{
  color:#fff7e8;
  font-family:"Noto Serif SC","Songti SC",serif;
  font-size:clamp(48px,6.5vw,94px);
  font-style:normal;
  font-weight:900;
  letter-spacing:-.12em;
  text-shadow:0 0 18px rgba(255,247,232,.40),0 18px 64px rgba(0,0,0,.34);
}

body[data-app=front].serene-rebuild .intro-topline{
  color:rgba(255,247,232,.78);
  letter-spacing:.10em;
}

body[data-app=front].serene-rebuild .intro-mark i,
body[data-app=front].serene-rebuild .intro-horizon i{
  background:#ff9b2e;
  box-shadow:0 0 28px rgba(255,151,46,.52);
}

body[data-app=front].serene-rebuild .intro-horizon{
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,186,90,.34),rgba(255,245,222,.74),rgba(255,186,90,.34),transparent);
  box-shadow:0 0 42px rgba(255,174,80,.34);
}

body[data-app=front].serene-rebuild .intro-formula{
  color:rgba(255,247,232,.86);
}

body[data-app=front].serene-rebuild .intro-panel p,
body[data-app=front].serene-rebuild .intro-footer{
  color:rgba(255,247,232,.78);
}

@keyframes void-float-left{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg);}
  50%{transform:translate3d(18px,-20px,0) rotate(2deg);}
}

@keyframes void-float-right{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg);}
  50%{transform:translate3d(-18px,22px,0) rotate(-2deg);}
}

@keyframes void-light-sweep{
  0%,100%{opacity:.24;transform:translate(-50%,-50%) scaleX(.76);}
  50%{opacity:.86;transform:translate(-50%,-50%) scaleX(1);}
}

@media(max-width:900px){
  body[data-app=front].serene-rebuild{
    --top-nav-height:auto;
  }

  body[data-app=front].serene-rebuild .sidebar{
    inset:10px 10px auto 10px;
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
    height:auto;
    padding:10px;
    border-radius:24px;
  }

  body[data-app=front].serene-rebuild .brand-block{
    padding-right:10px;
    border-right:0;
  }

  body[data-app=front].serene-rebuild .brand-block strong{
    font-size:19px;
  }

  body[data-app=front].serene-rebuild .season-card{
    min-width:144px;
    height:44px;
    padding:7px 10px;
    border-radius:18px;
  }

  body[data-app=front].serene-rebuild .nav-menu{
    grid-column:1/-1;
    justify-content:flex-start;
    padding:0 2px 2px;
  }

  body[data-app=front].serene-rebuild .nav-item{
    min-width:128px;
    min-height:48px;
    padding:0 14px;
    font-size:15px;
  }

  body[data-app=front].serene-rebuild .page-content{
    padding:154px 12px 40px;
  }
}

@media(max-width:430px){
  body[data-app=front].serene-rebuild .sidebar{
    grid-template-columns:1fr;
  }

  body[data-app=front].serene-rebuild .brand-block{
    justify-content:center;
  }

  body[data-app=front].serene-rebuild .nav-menu{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    overflow:visible;
    padding:0;
  }

  body[data-app=front].serene-rebuild .nav-item{
    width:100%;
    min-width:0;
    min-height:46px;
    padding:0 10px;
    font-size:14px;
  }

  body[data-app=front].serene-rebuild .season-card{
    display:none;
  }

  body[data-app=front].serene-rebuild .page-content{
    padding-top:188px;
  }

  body[data-app=front].serene-rebuild .intro-brand{
    gap:10px;
  }

  body[data-app=front].serene-rebuild .intro-brand strong{
    font-size:72px;
  }

  body[data-app=front].serene-rebuild .intro-brand em{
    font-size:42px;
  }

  body[data-app=front].serene-rebuild .serene-intro::before,
  body[data-app=front].serene-rebuild .serene-intro::after{
    opacity:.16;
  }
}

/* Softly-style compact top navigation. */
body[data-app=front].serene-rebuild .sidebar{
  left:50%;
  right:auto;
  top:24px;
  width:min(720px,calc(100vw - 40px));
  height:56px;
  min-height:56px;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:18px;
  padding:7px 10px 7px 16px;
  transform:translateX(-50%)!important;
  border-radius:999px;
  border-color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.68);
  box-shadow:0 18px 54px rgba(83,94,108,.12),inset 0 1px rgba(255,255,255,.88);
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
}

body[data-app=front].serene-rebuild .sidebar::before{
  border-radius:inherit;
  background:
    radial-gradient(circle at 7% 50%,rgba(255,155,163,.28),transparent 18%),
    radial-gradient(circle at 75% 50%,rgba(187,222,255,.22),transparent 34%);
}

body[data-app=front].serene-rebuild .brand-block{
  gap:8px;
  padding:0 8px 0 0;
  border-right:0;
}

body[data-app=front].serene-rebuild .brand-block img{
  width:24px;
  height:24px;
  border-radius:999px;
  box-shadow:0 0 0 5px rgba(255,155,163,.18);
}

body[data-app=front].serene-rebuild .brand-block strong{
  color:#252225;
  font-family:"Inter","Microsoft YaHei UI",sans-serif;
  font-size:16px;
  font-weight:800;
  letter-spacing:-.045em;
}

body[data-app=front].serene-rebuild .nav-menu{
  justify-content:center;
  gap:4px;
  padding:0;
  overflow:visible;
}

body[data-app=front].serene-rebuild .nav-item{
  min-width:auto;
  min-height:38px;
  padding:0 13px;
  border:0;
  border-radius:999px;
  color:#56545b;
  background:transparent;
  box-shadow:none;
  font-size:12px;
  font-weight:700;
}

body[data-app=front].serene-rebuild .nav-item svg{
  display:none;
}

body[data-app=front].serene-rebuild .nav-item:hover{
  color:#1f1d21;
  background:rgba(255,179,186,.20);
  box-shadow:none;
  transform:none;
}

body[data-app=front].serene-rebuild .nav-item.is-active{
  color:#201d21;
  border-color:transparent;
  background:linear-gradient(135deg,rgba(255,169,177,.66),rgba(221,239,255,.62));
  box-shadow:inset 0 1px rgba(255,255,255,.72),0 8px 18px rgba(255,130,143,.15);
}

body[data-app=front].serene-rebuild .nav-item.is-active::after{
  content:none;
  display:none;
}

body[data-app=front].serene-rebuild .season-card{
  display:flex;
  grid-template-columns:none;
  align-items:center;
  justify-content:center;
  min-width:132px;
  width:auto;
  height:42px;
  padding:0 18px;
  border:0;
  border-radius:999px;
  color:#fff;
  background:#121112;
  box-shadow:0 14px 28px rgba(18,17,18,.18),inset 0 1px rgba(255,255,255,.10);
}

body[data-app=front].serene-rebuild .season-card svg{
  display:none;
}

body[data-app=front].serene-rebuild .season-card strong{
  display:block;
  color:#fff;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

body[data-app=front].serene-rebuild .season-card span,
body[data-app=front].serene-rebuild .season-card i{
  display:none;
}

body[data-app=front].serene-rebuild .page-content{
  padding-top:100px;
}

@media(max-width:900px){
  body[data-app=front].serene-rebuild .sidebar{
    top:12px;
    left:50%;
    right:auto;
    width:min(720px,calc(100vw - 20px));
    height:auto;
    min-height:0;
    grid-template-columns:auto minmax(0,1fr);
    gap:8px 12px;
    padding:10px 12px;
    border-radius:26px;
  }

  body[data-app=front].serene-rebuild .brand-block{
    justify-content:flex-start;
  }

  body[data-app=front].serene-rebuild .season-card{
    justify-self:end;
    min-width:98px;
    height:36px;
    padding:0 13px;
  }

  body[data-app=front].serene-rebuild .nav-menu{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:6px;
  }

  body[data-app=front].serene-rebuild .nav-item{
    width:100%;
    min-height:38px;
    padding:0 8px;
    font-size:12px;
  }

  body[data-app=front].serene-rebuild .page-content{
    padding-top:128px;
  }
}

@media(max-width:430px){
  body[data-app=front].serene-rebuild .sidebar{
    grid-template-columns:1fr auto;
    border-radius:24px;
  }

  body[data-app=front].serene-rebuild .brand-block{
    justify-content:flex-start;
  }

  body[data-app=front].serene-rebuild .brand-block strong{
    font-size:15px;
  }

  body[data-app=front].serene-rebuild .season-card{
    display:flex;
    min-width:88px;
    height:34px;
    padding:0 11px;
  }

  body[data-app=front].serene-rebuild .season-card strong{
    font-size:11px;
  }

  body[data-app=front].serene-rebuild .nav-menu{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }

  body[data-app=front].serene-rebuild .nav-item{
    min-height:40px;
    font-size:13px;
  }

  body[data-app=front].serene-rebuild .page-content{
    padding-top:176px;
  }
}

/* Premium light-blue glass treatment for the ranking board card. */
body[data-app=front].serene-rebuild .ranking-panel{
  position:relative;
  padding:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.72);
  border-radius:30px;
  background:
    radial-gradient(840px 390px at 8% -8%,rgba(255,199,211,.22),transparent 62%),
    radial-gradient(1040px 520px at 92% -10%,rgba(106,196,255,.46),transparent 68%),
    linear-gradient(135deg,rgba(255,255,255,.66),rgba(215,240,255,.34) 52%,rgba(235,249,255,.52)),
    rgba(234,248,255,.46);
  box-shadow:
    0 42px 110px rgba(74,118,151,.24),
    0 18px 44px rgba(115,202,255,.14),
    inset 0 1px rgba(255,255,255,.94),
    inset 0 -1px rgba(91,155,198,.18);
  backdrop-filter:blur(34px) saturate(170%);
  -webkit-backdrop-filter:blur(34px) saturate(170%);
}

body[data-app=front].serene-rebuild .ranking-panel::before,
body[data-app=front].serene-rebuild .ranking-panel::after{
  content:"";
  position:absolute;
  pointer-events:none;
}

body[data-app=front].serene-rebuild .ranking-panel::before{
  inset:0;
  background:
    linear-gradient(116deg,rgba(255,255,255,.62),transparent 30%,rgba(104,196,255,.18) 66%,rgba(255,255,255,.42)),
    radial-gradient(circle at 18% 20%,rgba(255,255,255,.45),transparent 34%),
    linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:auto,auto,48px 48px,48px 48px;
  opacity:.72;
  mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.84) 58%,transparent 100%);
}

body[data-app=front].serene-rebuild .ranking-panel::after{
  left:18px;
  right:18px;
  top:14px;
  height:1px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.86),rgba(159,216,255,.62),transparent);
}

body[data-app=front].serene-rebuild .ranking-panel .table-wrap{
  position:relative;
  z-index:1;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.58);
  border-radius:24px;
  background:
    radial-gradient(720px 220px at 92% 0,rgba(119,206,255,.28),transparent 70%),
    linear-gradient(180deg,rgba(238,249,255,.54),rgba(221,243,255,.24)),
    rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px rgba(255,255,255,.88),
    inset 0 -1px rgba(97,160,204,.16),
    0 1px 0 rgba(255,255,255,.32);
  backdrop-filter:blur(24px) saturate(165%);
  -webkit-backdrop-filter:blur(24px) saturate(165%);
}

body[data-app=front].serene-rebuild .ranking-table{
  position:relative;
  z-index:1;
  border-collapse:separate;
  border-spacing:0 9px;
  background:transparent;
}

body[data-app=front].serene-rebuild .ranking-table thead th{
  height:42px;
  border:0;
  color:#365b66;
  background:
    linear-gradient(180deg,rgba(238,250,255,.82),rgba(202,233,252,.52)),
    rgba(218,241,255,.42);
  box-shadow:
    inset 0 1px rgba(255,255,255,.88),
    inset 0 -1px rgba(78,151,199,.16);
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:none;
}

body[data-app=front].serene-rebuild .ranking-table thead th:first-child{
  border-radius:16px 0 0 16px;
}

body[data-app=front].serene-rebuild .ranking-table thead th:last-child{
  border-radius:0 16px 16px 0;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr{
  background:transparent;
}

body[data-app=front].serene-rebuild .ranking-table tbody td{
  height:61px;
  border:0;
  color:#14282f;
  background:
    linear-gradient(180deg,rgba(255,255,255,.56),rgba(225,244,255,.34)),
    rgba(233,248,255,.42);
  box-shadow:
    inset 0 1px rgba(255,255,255,.80),
    inset 0 -1px rgba(87,152,198,.10);
  backdrop-filter:blur(18px) saturate(155%);
  -webkit-backdrop-filter:blur(18px) saturate(155%);
}

body[data-app=front].serene-rebuild .ranking-table tbody td + td{
  border-left:1px solid rgba(255,255,255,.22);
}

body[data-app=front].serene-rebuild .ranking-table tbody td:first-child{
  border-radius:16px 0 0 16px;
}

body[data-app=front].serene-rebuild .ranking-table tbody td:last-child{
  border-radius:0 16px 16px 0;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr:hover td{
  background:
    linear-gradient(180deg,rgba(255,255,255,.68),rgba(211,240,255,.46)),
    rgba(241,251,255,.58);
  box-shadow:
    0 12px 30px rgba(74,142,188,.13),
    inset 0 1px rgba(255,255,255,.90),
    inset 0 -1px rgba(90,158,203,.14);
}

body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank td{
  background:
    linear-gradient(180deg,rgba(255,247,249,.70),rgba(221,244,255,.40)),
    rgba(238,249,255,.48);
}

body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank td:first-child,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank td:nth-child(2){
  background:
    linear-gradient(90deg,rgba(255,221,226,.60),rgba(229,246,255,.40)),
    rgba(244,250,255,.48);
}

body[data-app=front].serene-rebuild .ranking-table .company-avatar,
body[data-app=front].serene-rebuild .ranking-table .company-avatar-badge{
  border-color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.72);
  box-shadow:0 10px 24px rgba(71,119,153,.14),inset 0 1px rgba(255,255,255,.90);
}

body[data-app=front].serene-rebuild .ranking-table .rank-badge{
  border-color:rgba(103,179,222,.34);
  background:rgba(235,249,255,.66);
  box-shadow:inset 0 1px rgba(255,255,255,.82);
}

body[data-app=front].serene-rebuild .ranking-table .progress-track{
  height:7px;
  background:rgba(92,145,174,.14);
  box-shadow:inset 0 1px 2px rgba(55,89,110,.10);
}

body[data-app=front].serene-rebuild .ranking-table .progress-fill{
  background:linear-gradient(90deg,#83cfff,#ff9faa);
  box-shadow:0 0 16px rgba(131,207,255,.30);
}

body[data-app=front].serene-rebuild .ranking-panel .table-footer{
  position:relative;
  z-index:1;
  margin-top:10px;
  padding:10px 14px 2px;
  border-top:0;
  color:#5b7179;
  background:transparent;
}

@media(max-width:767px){
  body[data-app=front].serene-rebuild .ranking-panel{
    padding:10px;
    border-radius:24px;
  }

  body[data-app=front].serene-rebuild .ranking-panel .table-wrap{
    padding:8px;
    overflow:visible;
    border-radius:20px;
  }

  body[data-app=front].serene-rebuild .ranking-table{
    display:block;
    width:100%;
    min-width:0!important;
    border-spacing:0;
    font-size:12px;
  }

  body[data-app=front].serene-rebuild .ranking-table thead{
    display:none;
  }

  body[data-app=front].serene-rebuild .ranking-table tbody{
    display:grid;
    gap:10px;
  }

  body[data-app=front].serene-rebuild .ranking-table tbody tr,
  body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank{
    display:grid;
    width:100%;
    min-width:0!important;
    grid-template-columns:48px minmax(0,1fr) auto;
    grid-template-areas:
      "rank company money"
      "rank stats stats"
      "rank progress progress";
    gap:9px 10px;
    padding:12px;
    border:1px solid rgba(255,255,255,.54);
    border-radius:18px;
    background:
      linear-gradient(145deg,rgba(255,255,255,.56),rgba(218,242,255,.34)),
      rgba(235,248,255,.46);
    box-shadow:
      inset 0 1px rgba(255,255,255,.84),
      inset 0 -1px rgba(88,150,194,.12);
    backdrop-filter:blur(20px) saturate(160%);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
  }

  body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank{
    background:
      linear-gradient(145deg,rgba(255,227,231,.62),rgba(218,242,255,.38)),
      rgba(239,249,255,.48);
  }

  body[data-app=front].serene-rebuild .ranking-table tbody td,
  body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank td,
  body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank td:first-child,
  body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank td:nth-child(2){
    display:block;
    height:auto;
    min-width:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  body[data-app=front].serene-rebuild .ranking-table tbody td + td{
    border-left:0;
  }

  body[data-app=front].serene-rebuild .ranking-table .rank-cell{
    grid-area:rank;
    align-self:stretch;
  }

  body[data-app=front].serene-rebuild .ranking-table .rank-award,
  body[data-app=front].serene-rebuild .ranking-table .rank-standard{
    height:100%;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    border-radius:16px;
    background:rgba(255,255,255,.34);
  }

  body[data-app=front].serene-rebuild .ranking-table .rank-award strong{
    font-size:12px;
  }

  body[data-app=front].serene-rebuild .ranking-table td:nth-child(2){
    grid-area:company;
    align-self:center;
  }

  body[data-app=front].serene-rebuild .ranking-table .company-cell{
    gap:8px;
  }

  body[data-app=front].serene-rebuild .ranking-table .company-name{
    overflow:visible;
    color:#102b34;
    font-size:12px;
    line-height:1.28;
    text-overflow:clip;
    white-space:normal;
  }

  body[data-app=front].serene-rebuild .ranking-table .money-cell{
    grid-area:money;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:5px;
    align-self:center;
    color:#102b34;
    font-size:12px;
  }

  body[data-app=front].serene-rebuild .ranking-table .money-cell::before{
    content:"业绩";
    color:#6f8891;
    font-family:var(--font-body);
    font-size:10px;
    font-weight:700;
  }

  body[data-app=front].serene-rebuild .ranking-table td:nth-child(4),
  body[data-app=front].serene-rebuild .ranking-table td:nth-child(5){
    grid-area:stats;
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:calc(50% - 5px);
    min-height:30px;
    padding:0 10px;
    border:1px solid rgba(255,255,255,.44);
    border-radius:999px;
    background:rgba(232,247,255,.44);
    color:#102b34;
    box-shadow:inset 0 1px rgba(255,255,255,.72);
  }

  body[data-app=front].serene-rebuild .ranking-table td:nth-child(4){
    justify-self:start;
  }

  body[data-app=front].serene-rebuild .ranking-table td:nth-child(5){
    justify-self:end;
  }

  body[data-app=front].serene-rebuild .ranking-table td:nth-child(4)::before{
    content:"新客户";
  }

  body[data-app=front].serene-rebuild .ranking-table td:nth-child(5)::before{
    content:"商机";
  }

  body[data-app=front].serene-rebuild .ranking-table td:nth-child(4)::before,
  body[data-app=front].serene-rebuild .ranking-table td:nth-child(5)::before{
    color:#6f8891;
    font-family:var(--font-body);
    font-size:10px;
    font-weight:700;
  }

  body[data-app=front].serene-rebuild .ranking-table .progress-cell{
    grid-area:progress;
  }

  body[data-app=front].serene-rebuild .ranking-table .progress-line{
    grid-template-columns:minmax(0,1fr) auto;
  }

  body[data-app=front].serene-rebuild .ranking-panel .table-footer{
    padding:10px 8px 0;
    font-size:11px;
  }
}

/* Dashboard ring panel removed: let the company ranking area occupy the full system width. */
body[data-app=front].serene-rebuild .cockpit-main-grid.business-main-grid{
  grid-template-columns:1fr!important;
}

body[data-app=front].serene-rebuild .cockpit-main-grid.business-main-grid .top-five-panel{
  width:100%;
}

/* Top nav becomes lighter and more transparent once the page scrolls. */
body[data-app=front].serene-rebuild .sidebar{
  transition:
    background .26s ease,
    border-color .26s ease,
    box-shadow .26s ease,
    backdrop-filter .26s ease,
    -webkit-backdrop-filter .26s ease;
}

body[data-app=front].serene-rebuild .sidebar::before,
body[data-app=front].serene-rebuild .nav-item.is-active,
body[data-app=front].serene-rebuild .season-card{
  transition:
    opacity .26s ease,
    background .26s ease,
    border-color .26s ease,
    box-shadow .26s ease;
}

body[data-app=front].serene-rebuild.nav-is-scrolled .sidebar{
  border-color:rgba(255,255,255,.46);
  background:
    linear-gradient(135deg,rgba(255,232,236,.34),rgba(218,240,255,.30)),
    rgba(255,255,255,.28);
  box-shadow:
    0 12px 34px rgba(83,110,132,.10),
    inset 0 1px rgba(255,255,255,.58);
  backdrop-filter:blur(30px) saturate(178%);
  -webkit-backdrop-filter:blur(30px) saturate(178%);
}

body[data-app=front].serene-rebuild.nav-is-scrolled .sidebar::before{
  opacity:.46;
}

body[data-app=front].serene-rebuild.nav-is-scrolled .nav-item.is-active{
  background:linear-gradient(135deg,rgba(255,169,177,.42),rgba(221,239,255,.38));
  box-shadow:inset 0 1px rgba(255,255,255,.52),0 6px 14px rgba(255,130,143,.08);
}

body[data-app=front].serene-rebuild.nav-is-scrolled .season-card{
  background:rgba(18,17,18,.70);
  box-shadow:0 10px 22px rgba(18,17,18,.12),inset 0 1px rgba(255,255,255,.10);
}

/* Desktop ranking board: replace the stretched table look with premium glass rows. */
@media(min-width:768px){
  body[data-app=front].serene-rebuild .ranking-panel{
    padding:20px;
    border-radius:32px;
    background:
      radial-gradient(900px 420px at 7% -12%,rgba(255,191,204,.26),transparent 62%),
      radial-gradient(980px 470px at 94% -16%,rgba(82,190,255,.44),transparent 66%),
      linear-gradient(145deg,rgba(255,255,255,.70),rgba(216,242,255,.34) 54%,rgba(244,251,255,.58)),
      rgba(232,248,255,.48);
  }

  body[data-app=front].serene-rebuild .ranking-panel .table-wrap{
    padding:12px;
    border-radius:26px;
    background:
      linear-gradient(180deg,rgba(255,255,255,.46),rgba(218,243,255,.22)),
      rgba(240,250,255,.24);
  }

  body[data-app=front].serene-rebuild .ranking-table{
    --ranking-grid:92px minmax(210px,2.15fr) minmax(82px,.55fr) minmax(74px,.42fr) minmax(74px,.42fr) minmax(190px,1fr);
    display:block;
    width:100%;
    min-width:0!important;
    border-collapse:separate;
    border-spacing:0;
    font-size:13px;
  }

  body[data-app=front].serene-rebuild .ranking-table thead,
  body[data-app=front].serene-rebuild .ranking-table tbody{
    display:block;
  }

  body[data-app=front].serene-rebuild .ranking-table thead tr,
  body[data-app=front].serene-rebuild .ranking-table tbody tr{
    display:grid;
    grid-template-columns:var(--ranking-grid);
    align-items:center;
  }

  body[data-app=front].serene-rebuild .ranking-table thead tr{
    min-height:42px;
    margin-bottom:10px;
    border:1px solid rgba(255,255,255,.54);
    border-radius:18px;
    background:
      linear-gradient(180deg,rgba(235,249,255,.78),rgba(197,232,252,.45)),
      rgba(224,244,255,.44);
    box-shadow:inset 0 1px rgba(255,255,255,.86),inset 0 -1px rgba(80,151,198,.13);
  }

  body[data-app=front].serene-rebuild .ranking-table thead th{
    display:flex;
    align-items:center;
    width:auto!important;
    height:auto;
    min-width:0;
    padding:0 16px;
    border:0;
    border-radius:0!important;
    color:#456570;
    background:transparent!important;
    box-shadow:none!important;
    font-size:11px;
    font-weight:850;
    letter-spacing:.04em;
  }

  body[data-app=front].serene-rebuild .ranking-table tbody{
    display:grid;
    gap:10px;
  }

  body[data-app=front].serene-rebuild .ranking-table tbody tr{
    position:relative;
    min-height:68px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.58);
    border-radius:20px;
    background:
      linear-gradient(100deg,rgba(255,255,255,.64),rgba(219,243,255,.38) 56%,rgba(247,252,255,.58)),
      rgba(235,249,255,.50);
    box-shadow:
      0 12px 28px rgba(64,128,172,.08),
      inset 0 1px rgba(255,255,255,.86),
      inset 0 -1px rgba(78,146,194,.12);
    backdrop-filter:blur(22px) saturate(165%);
    -webkit-backdrop-filter:blur(22px) saturate(165%);
    transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
  }

  body[data-app=front].serene-rebuild .ranking-table tbody tr::before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:4px;
    background:linear-gradient(180deg,#85d3ff,#ffc4cd);
    opacity:.74;
  }

  body[data-app=front].serene-rebuild .ranking-table tbody tr::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(110deg,rgba(255,255,255,.54),transparent 26%,rgba(137,210,255,.12) 72%,rgba(255,255,255,.30));
    opacity:.62;
  }

  body[data-app=front].serene-rebuild .ranking-table tbody tr:hover{
    transform:translateY(-1px);
    border-color:rgba(111,202,255,.55);
    box-shadow:
      0 18px 38px rgba(63,132,180,.13),
      inset 0 1px rgba(255,255,255,.92),
      inset 0 -1px rgba(78,146,194,.16);
  }

  body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-1{
    background:
      linear-gradient(100deg,rgba(255,220,226,.72),rgba(218,244,255,.40) 54%,rgba(255,255,255,.60)),
      rgba(240,250,255,.52);
  }

  body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-2,
  body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-3{
    background:
      linear-gradient(100deg,rgba(255,233,236,.56),rgba(218,244,255,.38) 54%,rgba(255,255,255,.58)),
      rgba(239,250,255,.50);
  }

  body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-1::before{
    background:linear-gradient(180deg,#ff8fa0,#7ed2ff);
  }

  body[data-app=front].serene-rebuild .ranking-table tbody td,
  body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank td,
  body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank td:first-child,
  body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank td:nth-child(2){
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    width:auto!important;
    min-width:0;
    height:auto;
    min-height:68px;
    padding:10px 16px;
    border:0;
    border-left:1px solid rgba(255,255,255,.18);
    border-radius:0!important;
    color:#142b33;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  body[data-app=front].serene-rebuild .ranking-table tbody td:first-child{
    border-left:0;
    padding-left:18px;
  }

  body[data-app=front].serene-rebuild .ranking-table .rank-award,
  body[data-app=front].serene-rebuild .ranking-table .rank-standard{
    display:flex;
    align-items:center;
    justify-content:center;
    width:62px;
    min-height:42px;
    gap:6px;
    border:1px solid rgba(255,255,255,.48);
    border-radius:16px;
    background:rgba(255,255,255,.38);
    box-shadow:inset 0 1px rgba(255,255,255,.72);
  }

  body[data-app=front].serene-rebuild .ranking-table .rank-award span{
    display:block;
  }

  body[data-app=front].serene-rebuild .ranking-table .rank-award strong{
    color:#152b32;
    font-size:12px;
    font-weight:850;
  }

  body[data-app=front].serene-rebuild .ranking-table .rank-trophy{
    width:16px;
    height:16px;
  }

  body[data-app=front].serene-rebuild .ranking-table .rank-badge{
    width:34px;
    height:34px;
    border-color:rgba(103,179,222,.38);
    background:rgba(237,250,255,.72);
  }

  body[data-app=front].serene-rebuild .ranking-table .company-cell{
    gap:12px;
    width:100%;
    min-width:0;
  }

  body[data-app=front].serene-rebuild .ranking-table .company-avatar,
  body[data-app=front].serene-rebuild .ranking-table .company-avatar-badge{
    width:34px;
    height:34px;
    flex-basis:34px;
    border-radius:12px;
  }

  body[data-app=front].serene-rebuild .ranking-table .company-name{
    color:#112931;
    font-size:13px;
    font-weight:800;
  }

  body[data-app=front].serene-rebuild .ranking-table .number-cell{
    justify-content:center;
    color:#1b333b;
    font-weight:800;
  }

  body[data-app=front].serene-rebuild .ranking-table .money-cell{
    justify-content:flex-start;
  }

  body[data-app=front].serene-rebuild .ranking-table .progress-cell{
    padding-right:18px;
  }

  body[data-app=front].serene-rebuild .ranking-table .progress-line{
    width:100%;
    grid-template-columns:minmax(84px,1fr) 48px;
    gap:12px;
  }

  body[data-app=front].serene-rebuild .ranking-table .progress-track{
    height:8px;
    border:1px solid rgba(255,255,255,.28);
    background:rgba(78,133,164,.13);
    box-shadow:inset 0 1px 2px rgba(42,82,108,.12);
  }

  body[data-app=front].serene-rebuild .ranking-table .progress-value{
    color:#183039;
    font-size:12px;
    font-weight:850;
  }

  body[data-app=front].serene-rebuild .ranking-panel .table-footer{
    margin-top:12px;
    padding:10px 6px 0;
    color:#54707a;
  }
}

/* Azure-only glass: board and dashboard surfaces use one light-blue material system. */
body[data-app=front].serene-rebuild{
  --azure-glass-line:rgba(255,255,255,.64);
  --azure-glass-blue:rgba(214,243,255,.46);
  --azure-glass-blue-strong:rgba(185,231,255,.54);
  --azure-ink:#132e38;
  --azure-muted:#5d7882;
}

body[data-app=front].serene-rebuild .ranking-panel{
  border-color:var(--azure-glass-line)!important;
  background:
    radial-gradient(980px 480px at 86% -14%,rgba(86,195,255,.34),transparent 66%),
    radial-gradient(760px 420px at 16% -10%,rgba(215,244,255,.38),transparent 68%),
    linear-gradient(145deg,rgba(255,255,255,.72),rgba(214,243,255,.38) 56%,rgba(242,251,255,.58)),
    rgba(231,248,255,.52)!important;
  box-shadow:
    0 38px 96px rgba(64,132,178,.18),
    inset 0 1px rgba(255,255,255,.92),
    inset 0 -1px rgba(87,156,204,.16)!important;
}

body[data-app=front].serene-rebuild .ranking-panel::before{
  background:
    linear-gradient(116deg,rgba(255,255,255,.58),transparent 28%,rgba(112,203,255,.18) 66%,rgba(255,255,255,.36)),
    radial-gradient(circle at 82% 8%,rgba(124,211,255,.26),transparent 36%),
    linear-gradient(rgba(255,255,255,.11) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px)!important;
}

body[data-app=front].serene-rebuild .ranking-panel::after{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.86),rgba(131,211,255,.68),transparent)!important;
}

body[data-app=front].serene-rebuild .ranking-panel .table-wrap{
  border-color:rgba(255,255,255,.56)!important;
  background:
    radial-gradient(720px 260px at 94% 0,rgba(117,207,255,.26),transparent 72%),
    linear-gradient(180deg,rgba(246,253,255,.55),rgba(217,243,255,.22)),
    rgba(238,250,255,.28)!important;
}

body[data-app=front].serene-rebuild .ranking-table thead tr,
body[data-app=front].serene-rebuild .ranking-table thead th{
  color:#416674!important;
}

body[data-app=front].serene-rebuild .ranking-table thead tr{
  background:
    linear-gradient(180deg,rgba(235,250,255,.80),rgba(195,232,252,.46)),
    rgba(221,244,255,.48)!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-1,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-2,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-3{
  border-color:rgba(255,255,255,.58)!important;
  background:
    linear-gradient(102deg,rgba(255,255,255,.66),rgba(214,243,255,.42) 56%,rgba(247,253,255,.60)),
    rgba(234,249,255,.52)!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr::before,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-1::before{
  background:linear-gradient(180deg,#8fd9ff,#d9f3ff)!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr::after{
  background:linear-gradient(110deg,rgba(255,255,255,.50),transparent 26%,rgba(125,210,255,.14) 72%,rgba(255,255,255,.30))!important;
}

body[data-app=front].serene-rebuild .ranking-table .rank-award,
body[data-app=front].serene-rebuild .ranking-table .rank-standard{
  background:rgba(232,248,255,.56)!important;
  border-color:rgba(255,255,255,.62)!important;
}

body[data-app=front].serene-rebuild .ranking-table .rank-trophy,
body[data-app=front].serene-rebuild .rank-award-2 .rank-trophy,
body[data-app=front].serene-rebuild .rank-award-3 .rank-trophy{
  color:#54bfe9!important;
}

body[data-app=front].serene-rebuild .ranking-table .rank-award strong,
body[data-app=front].serene-rebuild .ranking-table .company-name,
body[data-app=front].serene-rebuild .ranking-table .number-cell,
body[data-app=front].serene-rebuild .ranking-table .progress-value{
  color:var(--azure-ink)!important;
}

body[data-app=front].serene-rebuild .ranking-table .progress-fill{
  background:linear-gradient(90deg,#68cfff,#b8ebff)!important;
  box-shadow:0 0 18px rgba(104,207,255,.28)!important;
}

body[data-app=front].serene-rebuild .ranking-panel .table-footer{
  color:var(--azure-muted)!important;
}

body[data-app=front].serene-rebuild .cockpit-shell{
  gap:18px;
}

body[data-app=front].serene-rebuild .cockpit-kpis{
  padding:12px!important;
  gap:12px!important;
  border:1px solid rgba(255,255,255,.62)!important;
  border-radius:30px!important;
  background:
    radial-gradient(860px 360px at 86% 0,rgba(98,199,255,.26),transparent 66%),
    linear-gradient(145deg,rgba(255,255,255,.62),rgba(214,243,255,.32)),
    rgba(235,250,255,.42)!important;
  box-shadow:
    0 30px 80px rgba(70,134,177,.16),
    inset 0 1px rgba(255,255,255,.86)!important;
  backdrop-filter:blur(28px) saturate(165%)!important;
  -webkit-backdrop-filter:blur(28px) saturate(165%)!important;
}

body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card{
  border:1px solid rgba(255,255,255,.62)!important;
  border-radius:22px!important;
  background:
    radial-gradient(circle at 50% 22%,rgba(255,255,255,.72),transparent 48%),
    linear-gradient(160deg,rgba(255,255,255,.58),rgba(212,242,255,.38)),
    rgba(234,249,255,.48)!important;
  box-shadow:
    0 18px 46px rgba(70,134,177,.12),
    inset 0 1px rgba(255,255,255,.84),
    inset 0 -1px rgba(93,161,206,.10)!important;
}

body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card::before{
  background:linear-gradient(90deg,transparent,#7ed6ff,transparent)!important;
}

body[data-app=front].serene-rebuild .metric-ring-card.metric-blue,
body[data-app=front].serene-rebuild .metric-ring-card.metric-cyan,
body[data-app=front].serene-rebuild .metric-ring-card.metric-indigo,
body[data-app=front].serene-rebuild .metric-ring-card.metric-red{
  --metric-accent:#73d0ff!important;
}

body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring{
  background:conic-gradient(#73d0ff 0 var(--metric-progress),rgba(103,184,224,.13) var(--metric-progress) 360deg)!important;
  box-shadow:
    0 16px 34px rgba(79,148,190,.12),
    0 0 0 10px rgba(216,243,255,.48),
    inset 0 0 0 1px rgba(255,255,255,.56)!important;
}

body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring::before{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(232,249,255,.72))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.94),inset 0 0 0 1px rgba(90,158,205,.11)!important;
}

body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring-core strong,
body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card footer b,
body[data-app=front].serene-rebuild .cockpit-bar-row>strong,
body[data-app=front].serene-rebuild .cockpit-company-block label{
  color:var(--azure-ink)!important;
}

body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring-core span,
body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card footer span,
body[data-app=front].serene-rebuild .cockpit-company-block small em{
  color:var(--azure-muted)!important;
}

body[data-app=front].serene-rebuild .top-five-panel{
  border-color:rgba(255,255,255,.62)!important;
  background:
    radial-gradient(900px 360px at 86% 0,rgba(98,199,255,.25),transparent 66%),
    linear-gradient(145deg,rgba(255,255,255,.60),rgba(214,243,255,.30)),
    rgba(235,250,255,.42)!important;
  box-shadow:
    0 30px 80px rgba(70,134,177,.16),
    inset 0 1px rgba(255,255,255,.86)!important;
  backdrop-filter:blur(28px) saturate(165%)!important;
  -webkit-backdrop-filter:blur(28px) saturate(165%)!important;
}

body[data-app=front].serene-rebuild .cockpit-bar-row{
  border:1px solid rgba(255,255,255,.56)!important;
  border-radius:18px!important;
  background:
    linear-gradient(102deg,rgba(255,255,255,.60),rgba(215,243,255,.34) 58%,rgba(247,253,255,.54)),
    rgba(234,249,255,.44)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.78),inset 0 -1px rgba(87,156,204,.10)!important;
}

body[data-app=front].serene-rebuild .combat-rank,
body[data-app=front].serene-rebuild .rank-1,
body[data-app=front].serene-rebuild .rank-2,
body[data-app=front].serene-rebuild .rank-3{
  color:#186680!important;
  background:rgba(219,244,255,.72)!important;
}

body[data-app=front].serene-rebuild .cockpit-company-block small em{
  background:rgba(221,244,255,.54)!important;
}

body[data-app=front].serene-rebuild .combat-track,
body[data-app=front].serene-rebuild .progress-track{
  background:rgba(83,145,177,.14)!important;
}

body[data-app=front].serene-rebuild .combat-track i{
  background:linear-gradient(90deg,#68cfff,#b8ebff)!important;
}

body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpi.metric-ring-card,
body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpi.metric-ring-card:nth-child(n){
  border:1px solid rgba(255,255,255,.62)!important;
  border-radius:22px!important;
  background:
    radial-gradient(circle at 50% 22%,rgba(255,255,255,.72),transparent 48%),
    linear-gradient(160deg,rgba(255,255,255,.58),rgba(212,242,255,.38)),
    rgba(234,249,255,.48)!important;
  box-shadow:
    0 18px 46px rgba(70,134,177,.12),
    inset 0 1px rgba(255,255,255,.84),
    inset 0 -1px rgba(93,161,206,.10)!important;
  backdrop-filter:blur(22px) saturate(158%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(158%)!important;
}

body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpi.metric-ring-card::before,
body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpi.metric-ring-card::after,
body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpi.metric-ring-card>i{
  content:none!important;
  display:none!important;
}

body[data-app=front].cinematic-atlas.serene-rebuild .metric-ring-card.metric-blue,
body[data-app=front].cinematic-atlas.serene-rebuild .metric-ring-card.metric-cyan,
body[data-app=front].cinematic-atlas.serene-rebuild .metric-ring-card.metric-indigo,
body[data-app=front].cinematic-atlas.serene-rebuild .metric-ring-card.metric-red{
  --metric-accent:#73d0ff!important;
}

body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring{
  background:conic-gradient(#73d0ff 0 var(--metric-progress),rgba(103,184,224,.13) var(--metric-progress) 360deg)!important;
  box-shadow:
    0 16px 34px rgba(79,148,190,.12),
    0 0 0 10px rgba(216,243,255,.48),
    inset 0 0 0 1px rgba(255,255,255,.56)!important;
}

body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring::before{
  content:""!important;
  display:block!important;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(232,249,255,.72))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.94),inset 0 0 0 1px rgba(90,158,205,.11)!important;
}

body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring-core strong,
body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpi.metric-ring-card footer b{
  color:var(--azure-ink)!important;
}

body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring-core span,
body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpi.metric-ring-card footer span{
  color:var(--azure-muted)!important;
}

/* Single-surface azure glass: remove nested panel and row backgrounds. */
body[data-app=front].serene-rebuild{
  --single-azure-surface:rgba(225,247,255,.54);
  --single-azure-line:rgba(83,160,206,.22);
  --single-azure-line-strong:rgba(255,255,255,.70);
}

body[data-app=front].serene-rebuild .ranking-panel,
body[data-app=front].serene-rebuild .top-five-panel{
  border:1px solid var(--single-azure-line-strong)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.62),var(--single-azure-surface))!important;
  box-shadow:
    0 34px 90px rgba(54,124,170,.16),
    inset 0 1px rgba(255,255,255,.88),
    inset 0 -1px rgba(75,146,194,.12)!important;
  backdrop-filter:blur(30px) saturate(165%)!important;
  -webkit-backdrop-filter:blur(30px) saturate(165%)!important;
}

body[data-app=front].serene-rebuild .ranking-panel::before,
body[data-app=front].serene-rebuild .ranking-panel::after{
  content:none!important;
  display:none!important;
}

body[data-app=front].serene-rebuild .ranking-panel .table-wrap{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

body[data-app=front].serene-rebuild .ranking-table thead tr{
  border:0!important;
  border-bottom:1px solid var(--single-azure-line)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

body[data-app=front].serene-rebuild .ranking-table thead th,
body[data-app=front].serene-rebuild .ranking-table thead th:first-child,
body[data-app=front].serene-rebuild .ranking-table thead th:last-child{
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-1,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-2,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-3{
  border:0!important;
  border-bottom:1px solid var(--single-azure-line)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  transform:none!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr:last-child{
  border-bottom-color:transparent!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr::before,
body[data-app=front].serene-rebuild .ranking-table tbody tr::after,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-1::before{
  content:none!important;
  display:none!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody td,
body[data-app=front].serene-rebuild .ranking-table tbody td:first-child,
body[data-app=front].serene-rebuild .ranking-table tbody td:last-child,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank td,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank td:first-child,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank td:nth-child(2){
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr:hover{
  background:rgba(255,255,255,.18)!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr:hover td{
  background:transparent!important;
  box-shadow:none!important;
}

body[data-app=front].serene-rebuild .top-five-panel .cockpit-bars{
  background:transparent!important;
}

body[data-app=front].serene-rebuild .cockpit-bar-row{
  border:0!important;
  border-bottom:1px solid var(--single-azure-line)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

body[data-app=front].serene-rebuild .cockpit-bar-row:last-child{
  border-bottom-color:transparent!important;
}

body[data-app=front].serene-rebuild .cockpit-bar-row:hover{
  background:rgba(255,255,255,.16)!important;
}

/* Dashboard KPI data marks and static company list interactions. */
body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring{
  overflow:visible!important;
}

body[data-app=front].serene-rebuild .metric-icon-shell{
  display:none!important;
}

body[data-app=front].serene-rebuild .metric-symbol-shell{
  content:none!important;
  display:none!important;
}

body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring-core{
  padding-top:0!important;
}

body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring-core strong{
  font-size:clamp(24px,2vw,30px)!important;
}

body[data-app=front].serene-rebuild .metric-symbol-shell{
  position:absolute!important;
  top:24px!important;
  right:26px!important;
  z-index:1!important;
  display:grid!important;
  width:58px!important;
  height:58px!important;
  place-items:center!important;
  border:1px solid rgba(255,255,255,.70)!important;
  border-radius:20px!important;
  color:#209dcc!important;
  background:
    radial-gradient(circle at 32% 24%,rgba(255,255,255,.98),rgba(236,251,255,.70) 44%,rgba(196,235,253,.40)),
    rgba(229,248,255,.58)!important;
  box-shadow:
    0 18px 44px rgba(58,142,190,.13),
    inset 0 1px rgba(255,255,255,.96),
    inset 0 -1px rgba(72,154,202,.12)!important;
  pointer-events:none!important;
}

body[data-app=front].serene-rebuild .metric-symbol-shell::before{
  content:""!important;
  position:absolute!important;
  inset:7px!important;
  border:1px solid rgba(95,181,226,.20)!important;
  border-radius:15px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(155,218,247,.10))!important;
}

body[data-app=front].serene-rebuild .metric-symbol-shell span{
  position:relative!important;
  z-index:1!important;
  font-family:"Inter","Microsoft YaHei UI",system-ui,sans-serif!important;
  font-size:26px!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:0!important;
  text-shadow:0 7px 18px rgba(32,157,204,.20)!important;
}

body[data-app=front].serene-rebuild .top-five-panel,
body[data-app=front].serene-rebuild .top-five-panel:hover,
body[data-app=front].serene-rebuild .top-five-panel .cockpit-bar-row,
body[data-app=front].serene-rebuild .top-five-panel .cockpit-bar-row:hover,
body[data-app=front].cinematic-atlas.serene-rebuild .top-five-panel,
body[data-app=front].cinematic-atlas.serene-rebuild .top-five-panel:hover,
body[data-app=front].cinematic-atlas.serene-rebuild .top-five-panel .cockpit-bar-row,
body[data-app=front].cinematic-atlas.serene-rebuild .top-five-panel .cockpit-bar-row:hover{
  transform:none!important;
}

body[data-app=front].serene-rebuild .top-five-panel .cockpit-bar-row{
  transition:background .22s ease,border-color .22s ease!important;
}

body[data-app=front].serene-rebuild .top-five-panel .cockpit-bar-row:hover{
  box-shadow:none!important;
}

/* Remove KPI side marks and center the four metric cards as a compact group. */
body[data-app=front].serene-rebuild .cockpit-kpis,
body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpis{
  width:min(100%,1088px)!important;
  margin-inline:auto!important;
  grid-template-columns:repeat(4,minmax(220px,250px))!important;
  justify-content:center!important;
  align-items:stretch!important;
}

body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card,
body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpi.metric-ring-card,
body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpi.metric-ring-card:nth-child(n){
  width:100%!important;
  max-width:250px!important;
  margin-inline:auto!important;
  grid-template-rows:minmax(150px,1fr) auto!important;
  justify-items:center!important;
  place-items:center!important;
  align-content:center!important;
  text-align:center!important;
  transform:none!important;
}

body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring,
body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring{
  justify-self:center!important;
  margin-inline:auto!important;
}

body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card footer,
body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpi.metric-ring-card footer{
  justify-self:center!important;
}

body[data-app=front].serene-rebuild .metric-symbol-shell,
body[data-app=front].serene-rebuild .metric-icon-shell{
  display:none!important;
}

@media(max-width:1180px){
  body[data-app=front].serene-rebuild .cockpit-kpis,
  body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpis{
    width:min(100%,620px)!important;
    grid-template-columns:repeat(2,minmax(220px,280px))!important;
  }

  body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card,
  body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpi.metric-ring-card,
  body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpi.metric-ring-card:nth-child(n){
    max-width:280px!important;
  }
}

@media(max-width:560px){
  body[data-app=front].serene-rebuild .cockpit-kpis,
  body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpis{
    width:100%!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }

  body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card,
  body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpi.metric-ring-card,
  body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpi.metric-ring-card:nth-child(n){
    max-width:none!important;
  }
}

@media(max-width:767px){
  body[data-app=front].serene-rebuild .ranking-panel .table-wrap{
    padding:4px 6px!important;
  }

  body[data-app=front].serene-rebuild .ranking-table tbody tr,
  body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank{
    padding:12px 4px!important;
  }

  body[data-app=front].serene-rebuild .metric-icon-shell{
    display:none!important;
  }

  body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring-core{
    padding-top:0!important;
  }

  body[data-app=front].serene-rebuild .metric-symbol-shell{
    display:none!important;
  }
}

/* KPI alignment fix: keep the cards full-width, center the text inside each metric. */
body[data-app=front].serene-rebuild .cockpit-kpis,
body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpis{
  width:100%!important;
  max-width:none!important;
  margin-inline:0!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  justify-content:stretch!important;
  align-items:stretch!important;
}

body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card,
body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpi.metric-ring-card,
body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpi.metric-ring-card:nth-child(n){
  max-width:none!important;
  width:100%!important;
  margin-inline:0!important;
  justify-items:center!important;
  align-items:center!important;
  place-items:center!important;
  text-align:center!important;
}

body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring,
body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring{
  display:grid!important;
  place-items:center!important;
  justify-self:center!important;
  align-self:center!important;
  margin-inline:auto!important;
  text-align:center!important;
}

body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring-core,
body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring-core{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  justify-self:center!important;
  align-self:center!important;
  gap:7px!important;
  width:100%!important;
  max-width:108px!important;
  height:108px!important;
  margin:0 auto!important;
  padding:0!important;
  text-align:center!important;
}

body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring-core strong,
body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring-core span,
body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring-core strong,
body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring-core span{
  display:block!important;
  width:100%!important;
  margin-inline:auto!important;
  text-align:center!important;
  justify-self:center!important;
}

body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card footer,
body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpi.metric-ring-card footer{
  justify-items:center!important;
  align-items:center!important;
  justify-self:center!important;
  width:100%!important;
  text-align:center!important;
}

body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card footer b,
body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card footer span,
body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpi.metric-ring-card footer b,
body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpi.metric-ring-card footer span{
  display:block!important;
  width:100%!important;
  text-align:center!important;
}

@media(max-width:1180px){
  body[data-app=front].serene-rebuild .cockpit-kpis,
  body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpis{
    width:100%!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:560px){
  body[data-app=front].serene-rebuild .cockpit-kpis,
  body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* Hard-center KPI contents inside each card. */
body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card,
body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpi.metric-ring-card,
body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpi.metric-ring-card:nth-child(n){
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:16px!important;
}

body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring,
body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring{
  flex:0 0 auto!important;
  margin:0 auto!important;
  align-self:center!important;
}

body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring-core,
body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpi.metric-ring-card .metric-ring-core,
body[data-app=front].serene-rebuild .cockpit-kpi.metric-ring-card footer,
body[data-app=front].cinematic-atlas.serene-rebuild .cockpit-kpi.metric-ring-card footer{
  flex:0 0 auto!important;
  align-self:center!important;
}

/* Mobile top nav brand alignment. */
@media(max-width:900px){
  body[data-app=front].serene-rebuild .sidebar{
    grid-template-columns:1fr!important;
    justify-items:center!important;
  }

  body[data-app=front].serene-rebuild .brand-block{
    grid-column:1/-1!important;
    width:100%!important;
    margin:0 auto!important;
    padding:0!important;
    justify-content:center!important;
    justify-self:center!important;
    text-align:center!important;
  }

  body[data-app=front].serene-rebuild .brand-block strong{
    text-align:center!important;
  }

  body[data-app=front].serene-rebuild .nav-menu{
    grid-column:1/-1!important;
    width:100%!important;
    justify-self:stretch!important;
  }
}

/* Motiq-style border beam motion for the top navigation component. */
@property --ai-nav-beam-angle{
  syntax:"<angle>";
  inherits:false;
  initial-value:24deg;
}

body[data-app=front].serene-rebuild .sidebar{
  --ai-nav-beam-angle:24deg;
  --ai-nav-beam-speed:8.5s;
  isolation:isolate;
}

body[data-app=front].serene-rebuild .sidebar::before{
  z-index:0;
  pointer-events:none;
}

body[data-app=front].serene-rebuild .sidebar::after{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:1;
  padding:1.25px;
  border-radius:inherit;
  pointer-events:none;
  opacity:.78;
  background:
    conic-gradient(from var(--ai-nav-beam-angle),
      transparent 0deg,
      rgba(124,190,226,.04) 18deg,
      rgba(124,190,226,.50) 45deg,
      rgba(255,255,255,.88) 58deg,
      transparent 68deg,
      transparent 192deg,
      rgba(255,151,164,.04) 210deg,
      rgba(255,151,164,.48) 236deg,
      rgba(255,255,255,.86) 250deg,
      transparent 262deg,
      transparent 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  animation:ai-nav-border-beam var(--ai-nav-beam-speed) linear infinite;
  transition:opacity .24s ease,filter .24s ease;
}

body[data-app=front].serene-rebuild .sidebar:hover,
body[data-app=front].serene-rebuild .sidebar:focus-within{
  --ai-nav-beam-speed:2.8s;
}

body[data-app=front].serene-rebuild .sidebar:hover::after,
body[data-app=front].serene-rebuild .sidebar:focus-within::after{
  opacity:1;
  filter:drop-shadow(0 0 13px rgba(104,177,214,.20)) drop-shadow(0 0 12px rgba(255,151,164,.16));
}

body[data-app=front].serene-rebuild .brand-block,
body[data-app=front].serene-rebuild .nav-menu{
  position:relative;
  z-index:2;
}

body[data-app=front].serene-rebuild .nav-item{
  position:relative;
  overflow:hidden;
  transition:
    color .22s ease,
    background .22s ease,
    box-shadow .22s ease,
    transform .22s ease;
}

body[data-app=front].serene-rebuild .nav-item.is-active{
  background:
    linear-gradient(135deg,rgba(255,196,205,.72),rgba(236,247,255,.58));
  box-shadow:
    inset 0 1px rgba(255,255,255,.82),
    inset 0 -1px rgba(196,111,123,.10),
    0 10px 24px rgba(255,132,150,.15);
}

body[data-app=front].serene-rebuild .nav-item.is-active::after{
  content:"" !important;
  position:absolute!important;
  inset:1px!important;
  z-index:0!important;
  display:block!important;
  border-radius:inherit!important;
  background:
    linear-gradient(105deg,
      transparent 0%,
      rgba(255,255,255,.08) 28%,
      rgba(255,255,255,.72) 48%,
      rgba(125,190,225,.26) 58%,
      transparent 78%)!important;
  transform:translateX(-132%);
  animation:ai-nav-active-sheen 4.8s cubic-bezier(.4,0,.2,1) infinite;
}

body[data-app=front].serene-rebuild .nav-item span,
body[data-app=front].serene-rebuild .nav-item svg{
  position:relative;
  z-index:1;
}

body[data-app=front].serene-rebuild.nav-is-scrolled .sidebar::after{
  opacity:.52;
}

@keyframes ai-nav-border-beam{
  to{--ai-nav-beam-angle:384deg;}
}

@keyframes ai-nav-active-sheen{
  0%,58%{transform:translateX(-132%);opacity:0;}
  66%{opacity:.78;}
  88%{transform:translateX(132%);opacity:0;}
  100%{transform:translateX(132%);opacity:0;}
}

@media(prefers-reduced-motion:reduce){
  body[data-app=front].serene-rebuild .sidebar::after,
  body[data-app=front].serene-rebuild .nav-item.is-active::after{
    animation:none!important;
  }

  body[data-app=front].serene-rebuild .sidebar::after{
    opacity:.58;
  }
}

/* Collapsed icon navigation: inactive routes are icons only; the active route expands. */
body[data-app=front].serene-rebuild .nav-menu{
  justify-content:center!important;
  gap:12px!important;
  padding:0 16px!important;
}

body[data-app=front].serene-rebuild .nav-item{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:44px!important;
  min-width:44px!important;
  height:44px!important;
  min-height:44px!important;
  gap:0!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.66)!important;
  border-radius:999px!important;
  color:#20323b!important;
  background:rgba(255,255,255,.46)!important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.72),
    0 10px 24px rgba(76,111,132,.10)!important;
  overflow:hidden!important;
}

body[data-app=front].serene-rebuild .nav-item svg{
  display:block!important;
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
  color:currentColor!important;
}

body[data-app=front].serene-rebuild .nav-item span{
  display:block!important;
  width:0!important;
  max-width:0!important;
  opacity:0!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  color:inherit!important;
  font-size:14px!important;
  font-weight:700!important;
  transform:translateX(-4px);
  transition:
    width .28s cubic-bezier(.22,1,.36,1),
    max-width .28s cubic-bezier(.22,1,.36,1),
    opacity .18s ease,
    transform .28s cubic-bezier(.22,1,.36,1);
}

body[data-app=front].serene-rebuild .nav-item:hover,
body[data-app=front].serene-rebuild .nav-item:focus-visible{
  color:#121416!important;
  background:rgba(255,255,255,.76)!important;
  transform:translateY(-1px)!important;
}

body[data-app=front].serene-rebuild .nav-item.is-active{
  width:auto!important;
  min-width:148px!important;
  gap:10px!important;
  padding:0 18px 0 12px!important;
  color:#fff!important;
  background:#111315!important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.16),
    0 18px 38px rgba(17,19,21,.18)!important;
}

body[data-app=front].serene-rebuild .nav-item.is-active svg{
  width:30px!important;
  height:30px!important;
  flex-basis:30px!important;
  padding:7px!important;
  border-radius:999px!important;
  color:#4d91ae!important;
  background:rgba(236,248,255,.92)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.70);
}

body[data-app=front].serene-rebuild .nav-item.is-active span{
  width:auto!important;
  max-width:92px!important;
  opacity:1!important;
  transform:translateX(0);
}

body[data-app=front].serene-rebuild .nav-item.is-active::after{
  border-radius:inherit!important;
  mix-blend-mode:screen;
  opacity:.72;
}

@media(max-width:900px){
  body[data-app=front].serene-rebuild .nav-menu{
    grid-template-columns:none!important;
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:center!important;
    gap:10px!important;
    padding:0!important;
  }

  body[data-app=front].serene-rebuild .nav-item{
    width:46px!important;
    min-width:46px!important;
    height:46px!important;
    min-height:46px!important;
  }

  body[data-app=front].serene-rebuild .nav-item.is-active{
    min-width:min(188px,calc(100vw - 84px))!important;
  }

  body[data-app=front].serene-rebuild .nav-item.is-active span{
    max-width:96px!important;
  }
}

@media(max-width:420px){
  body[data-app=front].serene-rebuild .nav-menu{
    gap:8px!important;
  }

  body[data-app=front].serene-rebuild .nav-item.is-active{
    min-width:168px!important;
  }
}

/* Pearl company buttons for every enterprise in the ranking board. */
body[data-app=front].serene-rebuild .ranking-table tbody{
  gap:clamp(14px,1.05vw,20px)!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-1,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-2,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-3{
  margin-block:0!important;
}

body[data-app=front].serene-rebuild .ranking-table .company-cell{
  position:relative!important;
  isolation:isolate!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:12px!important;
  width:min(100%,360px)!important;
  min-width:0!important;
  min-height:50px!important;
  padding:7px 18px 7px 8px!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.22)!important;
  border-radius:999px!important;
  color:#f5f7f8!important;
  background:
    radial-gradient(110% 88% at 50% -12%,rgba(255,255,255,.48),rgba(255,255,255,.13) 24%,transparent 48%),
    linear-gradient(180deg,#3f4041 0%,#191a1b 43%,#070808 100%)!important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.50),
    inset 0 -14px 24px rgba(0,0,0,.42),
    0 18px 34px rgba(15,24,30,.18)!important;
  transform:translateZ(0);
}

body[data-app=front].serene-rebuild .ranking-table .company-cell::before{
  content:"";
  position:absolute;
  left:6%;
  right:6%;
  top:7px;
  z-index:-1;
  height:42%;
  border-radius:999px 999px 44% 44%;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.08) 58%,transparent);
  filter:blur(.15px);
}

body[data-app=front].serene-rebuild .ranking-table .company-cell::after{
  content:"";
  position:absolute;
  inset:auto 10% 5px 18%;
  z-index:-1;
  height:18px;
  border-radius:999px;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.16),transparent 72%);
  opacity:.55;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr:hover .company-cell{
  border-color:rgba(255,255,255,.32)!important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.60),
    inset 0 -14px 24px rgba(0,0,0,.40),
    0 20px 38px rgba(15,24,30,.22)!important;
}

body[data-app=front].serene-rebuild .ranking-table .company-avatar,
body[data-app=front].serene-rebuild .ranking-table .company-avatar-badge{
  position:relative!important;
  z-index:1!important;
  width:36px!important;
  height:36px!important;
  flex:0 0 36px!important;
  padding:3px!important;
  border:1px solid rgba(255,255,255,.54)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.92)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.86),0 5px 12px rgba(0,0,0,.22)!important;
}

body[data-app=front].serene-rebuild .ranking-table .company-avatar-badge{
  display:grid!important;
  place-items:center!important;
  color:#27586b!important;
  font-size:10px!important;
  font-weight:700!important;
}

body[data-app=front].serene-rebuild .ranking-table .company-name{
  position:relative!important;
  z-index:1!important;
  min-width:0!important;
  overflow:hidden!important;
  color:#f0f2f3!important;
  font-size:14px!important;
  font-weight:800!important;
  line-height:1.15!important;
  text-overflow:ellipsis!important;
  text-shadow:0 1px 1px rgba(0,0,0,.46)!important;
  white-space:nowrap!important;
}

@media(max-width:767px){
  body[data-app=front].serene-rebuild .ranking-table tbody{
    gap:14px!important;
  }

  body[data-app=front].serene-rebuild .ranking-table tbody tr,
  body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank{
    padding:13px 10px!important;
  }

  body[data-app=front].serene-rebuild .ranking-table .company-cell{
    width:100%!important;
    min-height:48px!important;
    padding:7px 14px 7px 7px!important;
  }

  body[data-app=front].serene-rebuild .ranking-table .company-avatar,
  body[data-app=front].serene-rebuild .ranking-table .company-avatar-badge{
    width:34px!important;
    height:34px!important;
    flex-basis:34px!important;
  }

  body[data-app=front].serene-rebuild .ranking-table .company-name{
    font-size:12px!important;
  }
}

/* Absolute final ocean override: keep the 11 ranking components as live water capsules. */
body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank.has-rank-ocean-canvas,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-1.has-rank-ocean-canvas,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-2.has-rank-ocean-canvas,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-3.has-rank-ocean-canvas{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.78),rgba(215,244,255,.56) 45%,rgba(198,235,249,.62)),
    rgba(225,247,255,.72)!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas::before,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-1.has-rank-ocean-canvas::before{
  content:none!important;
  display:none!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas .ranking-ocean-canvas{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  border-radius:inherit!important;
  opacity:.74!important;
  pointer-events:none!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas::after{
  content:""!important;
  position:absolute!important;
  inset:1px!important;
  z-index:1!important;
  width:auto!important;
  height:auto!important;
  border-radius:inherit!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.68),rgba(255,255,255,.16) 40%,transparent 70%),
    linear-gradient(100deg,transparent 0 28%,rgba(255,255,255,.26) 38%,transparent 49% 100%)!important;
  opacity:.78!important;
  filter:none!important;
  transform:none!important;
  pointer-events:none!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas td,
body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas td:first-child,
body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas td:last-child,
body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas td + td,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank.has-rank-ocean-canvas td,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank.has-rank-ocean-canvas td:first-child,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank.has-rank-ocean-canvas td:nth-child(2){
  position:relative!important;
  z-index:2!important;
  border-left:0!important;
  border-right:0!important;
  border-color:transparent!important;
  background:transparent!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas:hover .ranking-ocean-canvas{
  opacity:.82!important;
}

/* Absolute final ocean override: keep the 11 ranking components as live water capsules. */
body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank.has-rank-ocean-canvas,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-1.has-rank-ocean-canvas,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-2.has-rank-ocean-canvas,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-3.has-rank-ocean-canvas{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.78),rgba(215,244,255,.56) 45%,rgba(198,235,249,.62)),
    rgba(225,247,255,.72)!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas::before,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-1.has-rank-ocean-canvas::before{
  content:none!important;
  display:none!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas .ranking-ocean-canvas{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  border-radius:inherit!important;
  opacity:.74!important;
  pointer-events:none!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas::after{
  content:""!important;
  position:absolute!important;
  inset:1px!important;
  z-index:1!important;
  width:auto!important;
  height:auto!important;
  border-radius:inherit!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.68),rgba(255,255,255,.16) 40%,transparent 70%),
    linear-gradient(100deg,transparent 0 28%,rgba(255,255,255,.26) 38%,transparent 49% 100%)!important;
  opacity:.78!important;
  filter:none!important;
  transform:none!important;
  pointer-events:none!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas td,
body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas td:first-child,
body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas td:last-child,
body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas td + td,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank.has-rank-ocean-canvas td,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank.has-rank-ocean-canvas td:first-child,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank.has-rank-ocean-canvas td:nth-child(2){
  position:relative!important;
  z-index:2!important;
  border-left:0!important;
  border-right:0!important;
  border-color:transparent!important;
  background:transparent!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas:hover .ranking-ocean-canvas{
  opacity:.82!important;
}

/* Final override: GSAP canvas is the real ocean layer for the 11 ranking components. */
body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank.has-rank-ocean-canvas,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-1.has-rank-ocean-canvas,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-2.has-rank-ocean-canvas,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-3.has-rank-ocean-canvas{
  isolation:isolate!important;
  overflow:hidden!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.78),rgba(215,244,255,.56) 45%,rgba(198,235,249,.62)),
    rgba(225,247,255,.72)!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas::before,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-1.has-rank-ocean-canvas::before{
  content:none!important;
  display:none!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas .ranking-ocean-canvas{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  width:100%!important;
  height:100%!important;
  border-radius:inherit!important;
  opacity:.74;
  pointer-events:none!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas::after{
  content:""!important;
  position:absolute!important;
  inset:1px!important;
  z-index:1!important;
  height:auto!important;
  border-radius:inherit!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.68),rgba(255,255,255,.16) 40%,transparent 70%),
    linear-gradient(100deg,transparent 0 28%,rgba(255,255,255,.26) 38%,transparent 49% 100%)!important;
  opacity:.78!important;
  pointer-events:none!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas td,
body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas td:first-child,
body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas td:last-child,
body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas td + td,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank.has-rank-ocean-canvas td,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank.has-rank-ocean-canvas td:first-child,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank.has-rank-ocean-canvas td:nth-child(2){
  position:relative!important;
  z-index:2!important;
  border-left:0!important;
  border-right:0!important;
  border-color:transparent!important;
  background:transparent!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas:hover .ranking-ocean-canvas{
  opacity:.82;
}

@media(max-width:767px){
  body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas .ranking-ocean-canvas{
    opacity:.68;
  }
}

/* GSAP/canvas ocean renderer: real wave texture sits inside the first 11 ranking capsules. */
body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas{
  isolation:isolate!important;
  overflow:hidden!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.78),rgba(215,244,255,.56) 45%,rgba(198,235,249,.62)),
    rgba(225,247,255,.72)!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas::before{
  content:none!important;
  display:none!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas .ranking-ocean-canvas{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  width:100%!important;
  height:100%!important;
  border-radius:inherit!important;
  opacity:.74;
  pointer-events:none!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas::after{
  z-index:1!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.68),rgba(255,255,255,.16) 40%,transparent 70%),
    linear-gradient(100deg,transparent 0 28%,rgba(255,255,255,.26) 38%,transparent 49% 100%)!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas td,
body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas td:first-child,
body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas td:last-child,
body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas td + td,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank.has-rank-ocean-canvas td,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank.has-rank-ocean-canvas td:first-child,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank.has-rank-ocean-canvas td:nth-child(2){
  position:relative!important;
  z-index:2!important;
  border-left:0!important;
  border-right:0!important;
  border-color:transparent!important;
  background:transparent!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas:hover .ranking-ocean-canvas{
  opacity:.82;
}

@media(max-width:767px){
  body[data-app=front].serene-rebuild .ranking-table tbody tr.has-rank-ocean-canvas .ranking-ocean-canvas{
    opacity:.68;
  }
}

/* Final ranking-row treatment: real moving ocean surface inside the 11 long capsules. */
body[data-app=front].serene-rebuild .ranking-table tbody tr:nth-child(-n+11),
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank:nth-child(-n+11),
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-1:nth-child(-n+11),
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-2:nth-child(-n+11),
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-3:nth-child(-n+11){
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.76),rgba(220,244,255,.50) 44%,rgba(199,235,249,.56)),
    rgba(225,247,255,.72)!important;
  animation:none!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr:nth-child(-n+11)::before,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-1:nth-child(-n+11)::before{
  content:""!important;
  position:absolute!important;
  inset:-22px -220px -22px -32px!important;
  z-index:0!important;
  width:auto!important;
  height:auto!important;
  border-radius:inherit!important;
  background-image:url("media/ranking-ocean-surface.png")!important;
  background-repeat:repeat-x!important;
  background-size:520px 156%!important;
  background-position:0 50%!important;
  opacity:.48!important;
  filter:saturate(1.28) contrast(1.08) brightness(1.12)!important;
  transform:translate3d(-72px,0,0) scale(1.03);
  transform-origin:center;
  animation:ranking-real-ocean-flow 14s linear infinite!important;
  pointer-events:none!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr:nth-child(-n+11)::after{
  content:""!important;
  position:absolute!important;
  inset:1px!important;
  z-index:1!important;
  height:auto!important;
  border-radius:inherit!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.15) 40%,transparent 68%),
    linear-gradient(100deg,transparent 0 28%,rgba(255,255,255,.30) 36%,transparent 46% 100%)!important;
  opacity:.74!important;
  filter:none!important;
  transform:none!important;
  animation:ranking-ocean-glass-sheen 7.8s ease-in-out infinite alternate!important;
  pointer-events:none!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr:nth-child(-n+11) td,
body[data-app=front].serene-rebuild .ranking-table tbody tr:nth-child(-n+11) td:first-child,
body[data-app=front].serene-rebuild .ranking-table tbody tr:nth-child(-n+11) td:last-child,
body[data-app=front].serene-rebuild .ranking-table tbody tr:nth-child(-n+11) td + td,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank:nth-child(-n+11) td,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank:nth-child(-n+11) td:first-child,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank:nth-child(-n+11) td:nth-child(2){
  z-index:2!important;
  border-left:0!important;
  border-right:0!important;
  border-color:transparent!important;
  background:transparent!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr:nth-child(-n+11):hover::before{
  opacity:.58!important;
  filter:saturate(1.34) contrast(1.1) brightness(1.16)!important;
}

@keyframes ranking-real-ocean-flow{
  0%{
    background-position:0 52%;
    transform:translate3d(-82px,0,0) scale(1.03);
  }
  50%{
    background-position:260px 47%;
    transform:translate3d(24px,-2px,0) scale(1.06);
  }
  100%{
    background-position:520px 52%;
    transform:translate3d(112px,1px,0) scale(1.03);
  }
}

@keyframes ranking-ocean-glass-sheen{
  0%{background-position:-120px 0, -180px 0;opacity:.62;}
  100%{background-position:90px 0, 180px 0;opacity:.82;}
}

@media(max-width:767px){
  body[data-app=front].serene-rebuild .ranking-table tbody tr:nth-child(-n+11)::before,
  body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-1:nth-child(-n+11)::before{
    inset:-18px -150px -18px -26px!important;
    background-size:430px 145%!important;
    opacity:.42!important;
  }
}

@media(prefers-reduced-motion:reduce){
  body[data-app=front].serene-rebuild .ranking-table tbody tr:nth-child(-n+11)::before,
  body[data-app=front].serene-rebuild .ranking-table tbody tr:nth-child(-n+11)::after{
    animation:none!important;
  }
}

/* Spectra-style moving glow: apply only to the 11 enterprise ranking row components. */
body[data-app=front].serene-rebuild .ranking-table tbody tr:nth-child(-n+11),
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank:nth-child(-n+11),
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-1:nth-child(-n+11),
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-2:nth-child(-n+11),
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-3:nth-child(-n+11){
  --spectra-x:38%;
  --spectra-y:50%;
  --spectra-delay:0s;
  isolation:isolate!important;
  overflow:hidden!important;
  background:
    radial-gradient(62% 160% at var(--spectra-x) var(--spectra-y),rgba(255,180,118,.42),rgba(255,188,154,.22) 24%,rgba(255,124,170,.18) 42%,transparent 63%),
    radial-gradient(44% 124% at calc(var(--spectra-x) + 24%) 18%,rgba(127,214,255,.32),transparent 66%),
    radial-gradient(95% 115% at 50% -38%,rgba(255,255,255,.95),rgba(255,255,255,.48) 26%,transparent 48%),
    linear-gradient(180deg,rgba(250,254,255,.90) 0%,rgba(221,245,255,.76) 45%,rgba(201,235,249,.72) 100%)!important;
  background-size:150% 180%,132% 150%,100% 100%,100% 100%!important;
  background-position:0 0,0 0,center,center!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -18px 30px rgba(105,178,209,.14),
    0 18px 38px rgba(74,132,164,.12)!important;
  animation:ranking-spectra-flow 9.5s cubic-bezier(.42,0,.22,1) infinite alternate;
  animation-delay:var(--spectra-delay);
}

body[data-app=front].serene-rebuild .ranking-table tbody tr:nth-child(-n+11)::before,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-1:nth-child(-n+11)::before{
  content:""!important;
  position:absolute!important;
  inset:-34% 12% -30% 18%!important;
  z-index:0!important;
  width:auto!important;
  height:auto!important;
  border-radius:999px!important;
  background:
    radial-gradient(46% 56% at 28% 50%,rgba(255,184,112,.54),transparent 72%),
    radial-gradient(38% 48% at 62% 44%,rgba(255,127,173,.34),transparent 70%),
    radial-gradient(38% 54% at 78% 38%,rgba(113,210,255,.30),transparent 74%);
  opacity:.64!important;
  filter:blur(18px) saturate(1.12)!important;
  transform:translate3d(-18%,0,0) scale(1.05);
  animation:ranking-spectra-blob 12s cubic-bezier(.42,0,.22,1) infinite alternate;
  animation-delay:var(--spectra-delay);
  pointer-events:none!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr:nth-child(-n+11)::after{
  content:""!important;
  position:absolute!important;
  inset:1px 1px auto 1px!important;
  z-index:0!important;
  height:58%!important;
  border-radius:inherit!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.68),rgba(255,255,255,.17) 58%,transparent),
    linear-gradient(98deg,transparent 0 16%,rgba(255,255,255,.38) 19%,transparent 24% 42%,rgba(255,255,255,.28) 45%,transparent 51% 100%);
  opacity:.82!important;
  filter:blur(.1px)!important;
  transform:translate3d(0,0,0);
  animation:ranking-spectra-shine 8.8s ease-in-out infinite alternate;
  animation-delay:var(--spectra-delay);
  pointer-events:none!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr:nth-child(-n+11):hover{
  background:
    radial-gradient(62% 160% at var(--spectra-x) var(--spectra-y),rgba(255,184,118,.48),rgba(255,188,154,.25) 24%,rgba(255,124,170,.21) 42%,transparent 63%),
    radial-gradient(44% 124% at calc(var(--spectra-x) + 24%) 18%,rgba(127,214,255,.36),transparent 66%),
    radial-gradient(95% 115% at 50% -38%,rgba(255,255,255,1),rgba(255,255,255,.52) 26%,transparent 48%),
    linear-gradient(180deg,rgba(251,254,255,.94) 0%,rgba(216,243,255,.84) 44%,rgba(196,233,249,.78) 100%)!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr:nth-child(1){--spectra-x:28%;--spectra-y:46%;--spectra-delay:-.2s;}
body[data-app=front].serene-rebuild .ranking-table tbody tr:nth-child(2){--spectra-x:44%;--spectra-y:48%;--spectra-delay:-1.1s;}
body[data-app=front].serene-rebuild .ranking-table tbody tr:nth-child(3){--spectra-x:36%;--spectra-y:52%;--spectra-delay:-2.0s;}
body[data-app=front].serene-rebuild .ranking-table tbody tr:nth-child(4){--spectra-x:58%;--spectra-y:46%;--spectra-delay:-2.8s;}
body[data-app=front].serene-rebuild .ranking-table tbody tr:nth-child(5){--spectra-x:50%;--spectra-y:54%;--spectra-delay:-3.6s;}
body[data-app=front].serene-rebuild .ranking-table tbody tr:nth-child(6){--spectra-x:66%;--spectra-y:48%;--spectra-delay:-4.2s;}
body[data-app=front].serene-rebuild .ranking-table tbody tr:nth-child(7){--spectra-x:40%;--spectra-y:50%;--spectra-delay:-5.1s;}
body[data-app=front].serene-rebuild .ranking-table tbody tr:nth-child(8){--spectra-x:60%;--spectra-y:52%;--spectra-delay:-5.8s;}
body[data-app=front].serene-rebuild .ranking-table tbody tr:nth-child(9){--spectra-x:32%;--spectra-y:50%;--spectra-delay:-6.4s;}
body[data-app=front].serene-rebuild .ranking-table tbody tr:nth-child(10){--spectra-x:54%;--spectra-y:46%;--spectra-delay:-7.0s;}
body[data-app=front].serene-rebuild .ranking-table tbody tr:nth-child(11){--spectra-x:46%;--spectra-y:54%;--spectra-delay:-7.7s;}

@keyframes ranking-spectra-flow{
  0%{background-position:-12% 0,10% 0,center,center;}
  50%{background-position:44% 0,58% 0,center,center;}
  100%{background-position:116% 0,92% 0,center,center;}
}

@keyframes ranking-spectra-blob{
  0%{transform:translate3d(-22%,0,0) scale(1.04);opacity:.52;}
  52%{transform:translate3d(10%,-2%,0) scale(1.10);opacity:.70;}
  100%{transform:translate3d(28%,1%,0) scale(1.06);opacity:.58;}
}

@keyframes ranking-spectra-shine{
  0%{background-position:-60px 0;opacity:.62;}
  100%{background-position:90px 0;opacity:.86;}
}

@media(max-width:767px){
  body[data-app=front].serene-rebuild .ranking-table tbody tr:nth-child(-n+11)::before,
  body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-1:nth-child(-n+11)::before{
    inset:-24% -8% -18% 14%!important;
    filter:blur(14px) saturate(1.08)!important;
    opacity:.52!important;
  }

  body[data-app=front].serene-rebuild .ranking-table tbody tr:nth-child(-n+11)::after{
    height:46%!important;
    opacity:.72!important;
  }
}

@media(prefers-reduced-motion:reduce){
  body[data-app=front].serene-rebuild .ranking-table tbody tr:nth-child(-n+11),
  body[data-app=front].serene-rebuild .ranking-table tbody tr:nth-child(-n+11)::before,
  body[data-app=front].serene-rebuild .ranking-table tbody tr:nth-child(-n+11)::after{
    animation:none!important;
  }
}


/* Remove the outer ranking card shell; keep each pearl row as the component surface. */
body[data-app=front].serene-rebuild .ranking-panel{
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

body[data-app=front].serene-rebuild .ranking-panel::before,
body[data-app=front].serene-rebuild .ranking-panel::after{
  content:none!important;
  display:none!important;
}

body[data-app=front].serene-rebuild .ranking-panel .table-wrap{
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

body[data-app=front].serene-rebuild .ranking-panel .table-footer{
  padding-inline:0!important;
  background:transparent!important;
  border-top:0!important;
  box-shadow:none!important;
}

@media(min-width:768px){
  body[data-app=front].serene-rebuild .ranking-table thead tr{
    margin-inline:0!important;
    border-color:rgba(255,255,255,.34)!important;
    background:transparent!important;
    box-shadow:none!important;
  }
}

/* Corrected ranking treatment: the full enterprise row is one long light-blue pearl capsule. */
body[data-app=front].serene-rebuild .ranking-table tbody{
  gap:clamp(16px,1.22vw,24px)!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-1,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-2,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-3{
  position:relative!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.72)!important;
  border-radius:999px!important;
  background:
    radial-gradient(95% 115% at 50% -38%,rgba(255,255,255,.94),rgba(255,255,255,.48) 26%,transparent 48%),
    linear-gradient(180deg,rgba(249,254,255,.86) 0%,rgba(223,245,255,.76) 44%,rgba(204,236,249,.72) 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -18px 30px rgba(109,177,207,.16),
    0 18px 38px rgba(74,132,164,.12)!important;
  backdrop-filter:blur(22px) saturate(160%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(160%)!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr::before,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-1::before{
  content:""!important;
  position:absolute!important;
  inset:7px 20px auto 20px!important;
  z-index:0!important;
  width:auto!important;
  height:38%!important;
  border-radius:999px 999px 46% 46%!important;
  background:linear-gradient(180deg,rgba(255,255,255,.84),rgba(255,255,255,.22) 62%,transparent)!important;
  opacity:.86!important;
  filter:blur(.12px);
}

body[data-app=front].serene-rebuild .ranking-table tbody tr::after{
  content:""!important;
  position:absolute!important;
  inset:auto 8% 5px 18%!important;
  z-index:0!important;
  height:24px!important;
  border-radius:999px!important;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.42),transparent 74%)!important;
  opacity:.56!important;
  pointer-events:none!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(255,255,255,.88)!important;
  background:
    radial-gradient(95% 115% at 50% -38%,rgba(255,255,255,1),rgba(255,255,255,.52) 26%,transparent 48%),
    linear-gradient(180deg,rgba(251,254,255,.92) 0%,rgba(216,243,255,.82) 44%,rgba(196,233,249,.76) 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -18px 30px rgba(92,168,204,.18),
    0 22px 46px rgba(70,129,162,.16)!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody td,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank td,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank td:first-child,
body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank td:nth-child(2){
  position:relative!important;
  z-index:1!important;
  background:transparent!important;
  border-color:rgba(255,255,255,.24)!important;
  box-shadow:none!important;
}

body[data-app=front].serene-rebuild .ranking-table .company-cell{
  isolation:auto!important;
  display:flex!important;
  align-items:center!important;
  width:100%!important;
  min-height:0!important;
  padding:0!important;
  gap:12px!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  color:#12313c!important;
  background:transparent!important;
  box-shadow:none!important;
}

body[data-app=front].serene-rebuild .ranking-table .company-cell::before,
body[data-app=front].serene-rebuild .ranking-table .company-cell::after{
  content:none!important;
  display:none!important;
}

body[data-app=front].serene-rebuild .ranking-table tbody tr:hover .company-cell{
  border-color:transparent!important;
  box-shadow:none!important;
}

body[data-app=front].serene-rebuild .ranking-table .company-avatar,
body[data-app=front].serene-rebuild .ranking-table .company-avatar-badge{
  width:38px!important;
  height:38px!important;
  flex:0 0 38px!important;
  padding:3px!important;
  border:1px solid rgba(255,255,255,.84)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.78)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.90),0 8px 16px rgba(80,144,176,.14)!important;
}

body[data-app=front].serene-rebuild .ranking-table .company-name{
  min-width:0!important;
  overflow:hidden!important;
  color:#102f3b!important;
  font-size:14px!important;
  font-weight:850!important;
  line-height:1.2!important;
  text-overflow:ellipsis!important;
  text-shadow:none!important;
  white-space:nowrap!important;
}

body[data-app=front].serene-rebuild .ranking-table .rank-award,
body[data-app=front].serene-rebuild .ranking-table .rank-standard{
  border-color:rgba(255,255,255,.58)!important;
  background:rgba(255,255,255,.34)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.72)!important;
}

@media(max-width:767px){
  body[data-app=front].serene-rebuild .ranking-table tbody{
    gap:14px!important;
  }

  body[data-app=front].serene-rebuild .ranking-table tbody tr,
  body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank,
  body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-1,
  body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-2,
  body[data-app=front].serene-rebuild .ranking-table tbody tr.top-rank-3{
    border-radius:28px!important;
    padding:14px 12px!important;
  }

  body[data-app=front].serene-rebuild .ranking-table .company-avatar,
  body[data-app=front].serene-rebuild .ranking-table .company-avatar-badge{
    width:34px!important;
    height:34px!important;
    flex-basis:34px!important;
  }

  body[data-app=front].serene-rebuild .ranking-table .company-name{
    font-size:12px!important;
  }
}